algunos cambios de estilos

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

@@ -1,8 +1,14 @@
 <script lang="ts">
-  import Badge from '$lib/ui/atoms/Badge.svelte';
-  import { compareYmd, todayYmdUTC, ymdToDmy, isToday, isTomorrow } from '$lib/utils/date';
-  import { success, error as toastError } from '$lib/stores/toasts';
-  import { tick } from 'svelte';
+  import Badge from "$lib/ui/atoms/Badge.svelte";
+  import {
+    compareYmd,
+    todayYmdUTC,
+    ymdToDmy,
+    isToday,
+    isTomorrow,
+  } from "$lib/utils/date";
+  import { success, error as toastError } from "$lib/stores/toasts";
+  import { tick } from "svelte";
 
   export let id: number;
   export let description: string;
@@ -14,15 +20,15 @@
   export let completed_at: string | null = null;
 
   const code = display_code ?? id;
-  const codeStr = String(code).padStart(4, '0');
+  const codeStr = String(code).padStart(4, "0");
   $: isAssigned = currentUserId ? assignees.includes(currentUserId) : false;
   $: today = todayYmdUTC();
   $: overdue = !!due_date && compareYmd(due_date, today) < 0;
   $: imminent = !!due_date && (isToday(due_date) || isTomorrow(due_date));
-  $: dateDmy = due_date ? ymdToDmy(due_date) : '';
+  $: dateDmy = due_date ? ymdToDmy(due_date) : "";
 
   let editing = false;
-  let dateValue: string = due_date ?? '';
+  let dateValue: string = due_date ?? "";
   let busy = false;
 
   // Edición de texto (inline)
@@ -33,16 +39,16 @@
     if (busy) return;
     busy = true;
     try {
-      const res = await fetch(`/api/tasks/${id}/claim`, { method: 'POST' });
+      const res = await fetch(`/api/tasks/${id}/claim`, { method: "POST" });
       if (res.ok) {
-        success('Tarea reclamada');
+        success("Tarea reclamada");
         location.reload();
       } else {
         const txt = await res.text();
-        toastError(txt || 'No se pudo reclamar');
+        toastError(txt || "No se pudo reclamar");
       }
     } catch (e) {
-      toastError('Error de red');
+      toastError("Error de red");
     } finally {
       busy = false;
     }
@@ -52,16 +58,16 @@
     if (busy || completed) return;
     busy = true;
     try {
-      const res = await fetch(`/api/tasks/${id}/complete`, { method: 'POST' });
+      const res = await fetch(`/api/tasks/${id}/complete`, { method: "POST" });
       if (res.ok) {
-        success('Tarea completada');
+        success("Tarea completada");
         location.reload();
       } else {
         const txt = await res.text();
-        toastError(txt || 'No se pudo completar la tarea');
+        toastError(txt || "No se pudo completar la tarea");
       }
     } catch {
-      toastError('Error de red');
+      toastError("Error de red");
     } finally {
       busy = false;
     }
@@ -71,16 +77,16 @@
     if (busy) return;
     busy = true;
     try {
-      const res = await fetch(`/api/tasks/${id}/unassign`, { method: 'POST' });
+      const res = await fetch(`/api/tasks/${id}/unassign`, { method: "POST" });
       if (res.ok) {
-        success('Asignación eliminada');
+        success("Asignación eliminada");
         location.reload();
       } else {
         const txt = await res.text();
-        toastError(txt || 'No se pudo soltar');
+        toastError(txt || "No se pudo soltar");
       }
     } catch {
-      toastError('Error de red');
+      toastError("Error de red");
     } finally {
       busy = false;
     }
@@ -90,21 +96,24 @@
     if (busy) return;
     busy = true;
     try {
-      const body = { due_date: dateValue && dateValue.trim() !== '' ? dateValue.trim() : null };
+      const body = {
+        due_date:
+          dateValue && dateValue.trim() !== "" ? dateValue.trim() : null,
+      };
       const res = await fetch(`/api/tasks/${id}`, {
-        method: 'PATCH',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify(body)
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body),
       });
       if (res.ok) {
-        success('Fecha actualizada');
+        success("Fecha actualizada");
         location.reload();
       } else {
         const txt = await res.text();
-        toastError(txt || 'No se pudo actualizar la fecha');
+        toastError(txt || "No se pudo actualizar la fecha");
       }
     } catch {
-      toastError('Error de red');
+      toastError("Error de red");
     } finally {
       busy = false;
     }
@@ -113,13 +122,13 @@
   function toggleEdit() {
     editing = !editing;
     if (editing) editingText = false;
-    dateValue = due_date ?? '';
+    dateValue = due_date ?? "";
   }
 
   function clearDate() {
     if (busy) return;
-    if (!confirm('¿Quitar la fecha de vencimiento?')) return;
-    dateValue = '';
+    if (!confirm("¿Quitar la fecha de vencimiento?")) return;
+    dateValue = "";
     saveDate();
   }
 
@@ -151,9 +160,9 @@
 
   async function saveText() {
     if (busy) return;
-    const raw = (descEl?.textContent || '').replace(/\s+/g, ' ').trim();
+    const raw = (descEl?.textContent || "").replace(/\s+/g, " ").trim();
     if (raw.length < 1 || raw.length > 1000) {
-      toastError('La descripción debe tener entre 1 y 1000 caracteres.');
+      toastError("La descripción debe tener entre 1 y 1000 caracteres.");
       return;
     }
     if (raw === description) {
@@ -163,20 +172,20 @@
     busy = true;
     try {
       const res = await fetch(`/api/tasks/${id}`, {
-        method: 'PATCH',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ description: raw })
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ description: raw }),
       });
       if (res.ok) {
         description = raw;
-        success('Descripción actualizada');
+        success("Descripción actualizada");
         editingText = false;
       } else {
         const txt = await res.text();
-        toastError(txt || 'No se pudo actualizar la descripción');
+        toastError(txt || "No se pudo actualizar la descripción");
       }
     } catch {
-      toastError('Error de red');
+      toastError("Error de red");
     } finally {
       busy = false;
     }
@@ -190,65 +199,125 @@
   }
 </script>
 
-<li class="task" class:completed={completed}>
+<li class="task" class:completed>
   <div class="left">
     <span class="code">#{codeStr}</span>
     <span
       class="desc"
       class:editing={editingText}
-      class:completed={completed}
+      class:completed
       contenteditable={editingText && !completed}
       role="textbox"
       aria-label="Descripción de la tarea"
       spellcheck="true"
       bind:this={descEl}
       on:keydown={(e) => {
-        if (e.key === 'Escape') { e.preventDefault(); cancelText(); }
-        else if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); saveText(); }
-        else if (e.key === 'Enter') { e.preventDefault(); }
-      }}
-    >{description}</span>
+        if (e.key === "Escape") {
+          e.preventDefault();
+          cancelText();
+        } else if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+          e.preventDefault();
+          saveText();
+        } else if (e.key === "Enter") {
+          e.preventDefault();
+        }
+      }}>{description}</span
+    >
   </div>
 
   <div class="meta">
     {#if due_date}
-      <span class="date-badge" class:overdue={overdue} class:soon={imminent} title={overdue ? 'Vencida' : (imminent ? 'Próxima' : 'Fecha')}>
-        📅 {dateDmy}{#if overdue} ⚠{/if}
-      </span>
-    {/if}
-    {#if assignees?.length}
-      <span class="assignees">
-        {#each assignees as a}
-          <span class="assignee" title={a}>👤</span>
-        {/each}
+      <span
+        class="date-badge"
+        class:overdue
+        class:soon={imminent}
+        title={overdue ? "Vencida" : imminent ? "Próxima" : "Fecha"}
+      >
+        📅 {dateDmy}{#if overdue}
+          ⚠{/if}
       </span>
     {/if}
   </div>
-
+  {#if assignees?.length}
+    <div class="assignees">
+      {#each assignees as a}
+        <span class="assignee" title={a}>👤</span>
+      {/each}
+    </div>
+  {/if}
   <div class="actions">
     {#if !completed}
       {#if !isAssigned}
-        <button class="icon-btn" aria-label="Reclamar" on:click|preventDefault={doClaim} disabled={busy}>Reclamar</button>
+        <button
+          class="icon-btn"
+          aria-label="Reclamar"
+          on:click|preventDefault={doClaim}
+          disabled={busy}>Reclamar</button
+        >
       {:else}
-        <button class="icon-btn" aria-label="Soltar" title="Soltar" on:click|preventDefault={doUnassign} disabled={busy}>🫳</button>
+        <button
+          class="icon-btn"
+          aria-label="Soltar"
+          title="Soltar"
+          on:click|preventDefault={doUnassign}
+          disabled={busy}>🫳</button
+        >
       {/if}
 
-      <button class="icon-btn" aria-label="Completar" title="Completar" on:click|preventDefault={doComplete} disabled={busy}>✅</button>
+      <button
+        class="icon-btn"
+        aria-label="Completar"
+        title="Completar"
+        on:click|preventDefault={doComplete}
+        disabled={busy}>✅</button
+      >
 
       {#if !editingText}
-        <button class="icon-btn" aria-label="Editar texto" title="Editar texto" on:click|preventDefault={toggleEditText} disabled={busy}>✍️</button>
+        <button
+          class="icon-btn"
+          aria-label="Editar texto"
+          title="Editar texto"
+          on:click|preventDefault={toggleEditText}
+          disabled={busy}>✍️</button
+        >
       {:else}
-        <button class="btn primary" on:click|preventDefault={saveText} disabled={busy}>Guardar</button>
-        <button class="btn ghost" on:click|preventDefault={cancelText} disabled={busy}>Cancelar</button>
+        <button
+          class="btn primary"
+          on:click|preventDefault={saveText}
+          disabled={busy}>Guardar</button
+        >
+        <button
+          class="btn ghost"
+          on:click|preventDefault={cancelText}
+          disabled={busy}>Cancelar</button
+        >
       {/if}
 
       {#if !editing}
-        <button class="icon-btn" aria-label="Editar fecha" title="Editar fecha" on:click|preventDefault={toggleEdit} disabled={busy}>🗓️</button>
+        <button
+          class="icon-btn"
+          aria-label="Editar fecha"
+          title="Editar fecha"
+          on:click|preventDefault={toggleEdit}
+          disabled={busy}>🗓️</button
+        >
       {:else}
         <input class="date" type="date" bind:value={dateValue} />
-        <button class="btn primary" on:click|preventDefault={saveDate} disabled={busy}>Guardar</button>
-        <button class="btn danger" on:click|preventDefault={clearDate} disabled={busy}>Quitar</button>
-        <button class="btn ghost" on:click|preventDefault={toggleEdit} disabled={busy}>Cancelar</button>
+        <button
+          class="btn primary"
+          on:click|preventDefault={saveDate}
+          disabled={busy}>Guardar</button
+        >
+        <button
+          class="btn danger"
+          on:click|preventDefault={clearDate}
+          disabled={busy}>Quitar</button
+        >
+        <button
+          class="btn ghost"
+          on:click|preventDefault={toggleEdit}
+          disabled={busy}>Cancelar</button
+        >
       {/if}
     {/if}
   </div>
@@ -257,13 +326,17 @@
 <style>
   .task {
     display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-    gap: var(--space-2);
+    grid-template-columns: 2fr 1fr;
+    grid-template-rows: max-content max-content;
+    grid-gap: 2px;
     padding: 8px 0;
     border-bottom: 1px solid var(--color-border);
+    position: relative;
+    margin: 0 0 4px 0;
+  }
+  .task:last-child {
+    border-bottom: 0;
   }
-  .task:last-child { border-bottom: 0; }
   .left {
     display: inline-flex;
     align-items: center;
@@ -273,21 +346,69 @@
   }
   .code {
     font-weight: 600;
+    font-size: 0.8rem;
     color: var(--color-text-muted);
     font-family: monospace;
     letter-spacing: 0.5px;
+    position: absolute;
+    top: 0px;
+    left: 2px;
+  }
+  .desc {
+    padding: 8px;
+    grid-column: 1/2;
+    grid-row: 1/3;
+  }
+
+  .desc.editing {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    background: var(--color-surface);
+    padding: 2px 4px;
+    border-radius: 4px;
+    white-space: normal;
+    text-overflow: clip;
+    grid-column: 2/3;
+    grid-row: 2/3;
+  }
+  .desc.completed {
+    text-decoration: line-through;
+  }
+  .meta {
+    justify-self: end;
+    align-items: start;
+    gap: 8px;
+  }
+  .muted {
+    color: var(--color-text-muted);
+  }
+  .date-badge {
+    padding: 2px 6px;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    font-size: 12px;
+  }
+  .date-badge.overdue {
+    border-color: var(--color-danger);
+  }
+  .date-badge.soon {
+    border-color: var(--color-warning);
+  }
+  .assignees {
+    grid-column: 1/2;
+    text-align: left;
+    align-self: end;
+  }
+  .assignee {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+  .task.completed {
+    opacity: 0.7;
   }
-  .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .desc.editing { outline: 2px solid var(--color-primary); outline-offset: 2px; background: var(--color-surface); padding: 2px 4px; border-radius: 4px; white-space: normal; text-overflow: clip; }
-  .desc.completed { text-decoration: line-through; }
-  .meta { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
-  .muted { color: var(--color-text-muted); }
-  .date-badge { padding: 2px 6px; border-radius: 6px; border: 1px solid transparent; font-size: 12px; }
-  .date-badge.overdue { border-color: var(--color-danger); }
-  .date-badge.soon { border-color: var(--color-warning); }
-  .assignees { display: inline-flex; gap: 4px; }
-  .assignee { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
-  .task.completed { opacity: .7; }
 
   .actions {
     display: inline-flex;
@@ -295,6 +416,8 @@
     justify-self: end;
     align-items: center;
     flex-wrap: wrap;
+    grid-column: 2/3;
+    grid-row: 2/3;
   }
   .btn {
     padding: 4px 8px;
@@ -305,11 +428,35 @@
     font-size: 13px;
     cursor: pointer;
   }
-  .btn[disabled] { opacity: .6; cursor: not-allowed; }
-  .btn.primary { border-color: transparent; background: var(--color-primary); color: #fff; }
-  .btn.secondary { }
-  .btn.ghost { background: transparent; }
-  .btn.danger { background: var(--color-danger); color: #fff; border-color: transparent; }
-  .icon-btn { padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); font-size: 16px; line-height: 1; }
-  .date { padding: 4px 6px; font-size: 14px; }
+  .btn[disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .btn.primary {
+    border-color: transparent;
+    background: var(--color-primary);
+    color: #fff;
+  }
+  .btn.secondary {
+  }
+  .btn.ghost {
+    background: transparent;
+  }
+  .btn.danger {
+    background: var(--color-danger);
+    color: #fff;
+    border-color: transparent;
+  }
+  .icon-btn {
+    padding: 6px 8px;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    background: var(--color-surface);
+    font-size: 16px;
+    line-height: 1;
+  }
+  .date {
+    padding: 4px 6px;
+    font-size: 14px;
+  }
 </style>

apps/web/src/lib/ui/layout/Card.svelte

@@ -8,6 +8,7 @@
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
-    padding: var(--space-4);
+    padding: var(--space-1);
+    position: relative;
   }
 </style>