feat: añadir Hourglass.svelte y usarlo en TaskItem.svelte

Co-authored-by: aider (openrouter/openai/gpt-5) <aider@aider.chat>

apps/web/src/lib/ui/data/TaskItem.svelte

@@ -11,6 +11,7 @@
 	import Popover from "$lib/ui/feedback/Popover.svelte";
 	import { normalizeDigits, buildWaMeUrl } from "$lib/utils/phone";
 	import { colorForGroup } from "$lib/utils/groupColor";
+	import Hourglass from "$lib/ui/icons/Hourglass.svelte";
 
 	export let id: number;
 	export let description: string;
@@ -285,7 +286,8 @@
 				class:soon={imminent}
 				title={overdue ? "Vencida" : imminent ? "Próxima" : "Fecha"}
 			>
-				📅 {dateDmy}{#if overdue}
+				<Hourglass size={16} />
+				{dateDmy}{#if overdue}
 					⚠{/if}
 			</span>
 		{/if}
@@ -392,7 +394,7 @@
 					aria-label="Editar fecha"
 					title="Editar fecha"
 					on:click|preventDefault={toggleEdit}
-					disabled={busy}>🗓️ Fecha</button
+					disabled={busy}><Hourglass size={16} /> Fecha</button
 				>
 			{:else}
 				<input class="date" type="date" bind:value={dateValue} />
@@ -517,6 +519,9 @@
 		font-size: 12px;
 	}
 	.date-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
 		padding: 4px 6px;
 		border-radius: 6px;
 		border: 1px solid transparent;

apps/web/src/lib/ui/icons/Hourglass.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let size: number = 16;
+  export let className: string = '';
+  export let ariaLabel?: string;
+  export let title?: string;
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  role={ariaLabel ? 'img' : undefined}
+  aria-label={ariaLabel}
+  aria-hidden={ariaLabel ? undefined : 'true'}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="M6 2h12" />
+  <path d="M6 22h12" />
+  <path d="M8 4l8 8" />
+  <path d="M8 20l8-8" />
+</svg>