# Plan de Diseño Web: Claridad de interacción, “tareas mías”, deadlines e identidad visual por grupo

Objetivos
- Distinguir de un vistazo qué elementos son clicables (box-shadow y estados).
- Señalar cuando “tú” estás entre los responsables (acento visual claro).
- Sustituir el emoji de calendario por un icono más entendible de “fecha límite” (SVG consistente).
- Dar color estable y reconocible a las pills de grupo con una paleta accesible y determinista.

Fases

Fase B1 — Paleta determinista de grupos (COMPLETADA)
- Idea: asignar una de 12–15 combinaciones (border, fondo tenue, texto) por group_id usando un hash determinista (mod N). Si hay más grupos que colores, se repiten.
- Paleta sugerida (AA sobre fondo claro):
  1) Blue: border #2563EB, fondo #DBEAFE, texto #1E3A8A
  2) Indigo: border #4F46E5, fondo #E0E7FF, texto #312E81
  3) Violet: border #7C3AED, fondo #EDE9FE, texto #4C1D95
  4) Purple: border #9333EA, fondo #F3E8FF, texto #581C87
  5) Fuchsia: border #C026D3, fondo #FAE8FF, texto #701A75
  6) Pink: border #DB2777, fondo #FCE7F3, texto #831843
  7) Rose: border #E11D48, fondo #FFE4E6, texto #881337
  8) Red: border #DC2626, fondo #FEE2E2, texto #7F1D1D
  9) Orange: border #EA580C, fondo #FFE7D1 (aprox.), texto #7C2D12
  10) Amber: border #D97706, fondo #FEF3C7, texto #78350F
  11) Green: border #16A34A, fondo #DCFCE7, texto #14532D
  12) Teal: border #0D9488, fondo #CCFBF1, texto #134E4A
- Implementación:
  - Crear apps/web/src/lib/utils/groupColor.ts con una función colorForGroup(groupId) → { border, bg, text } usando hash ligero (p. ej., sumatoria de charCodes) y modulo N.
  - Aplicar en la pill de grupo de TaskItem.svelte y donde aparezcan chips/etiquetas de grupo.

Fase B2 — Icono de “fecha límite” en SVG (COMPLETADA)
- Sustituir emoji de calendario por un icono más semántico:
  - Recomendación: “clock” (reloj) o “hourglass” (arena).
- Implementación:
  - Crear apps/web/src/lib/ui/icons/Clock.svelte (y/o Hourglass.svelte) como SVG inline con fill="currentColor", tamaño 16–18px.
  - Reemplazar en TaskItem.svelte donde se muestra due_date. Mantener aria-label/tooltip pertinentes.

Fase B3 — Indicador cuando “tú” estás asignado
- Mantener icono/contador de responsables y añadir acento visual si el usuario actual está entre los assignees:
  - Anillo/borde con el color primario alrededor del icono/badge o un pequeño dot superpuesto.
  - aria-label dinámico: “n responsables; tú incluido” | “n responsables; tú excluido”.
  - Tooltip opcional en desktop.
- Implementación:
  - En TaskItem.svelte, derivar isMine comprobando si App.locals.userId (o prop userId) ∈ assignees[] y aplicar clase/modificador que active el acento.

Fase B4 — Box-shadow solo en elementos interactivos
- Principio: toda superficie clicable debe tener pistas visuales coherentes (cursor, sombra/hover, focus visible). Superficies no interactivas no deben tener sombra.
- Implementación:
  - apps/web/src/lib/styles/tokens.css: definir variables de sombras (--shadow-sm, --shadow-md, --shadow-focus).
  - apps/web/src/lib/styles/base.css: patrones de hover/focus/active para botones, links con rol=button y chips clicables (sombra sutil en reposo, incremento ligero en hover/focus-visible, compresión en active).
  - Mantener focus-visible claro (ring) y contraste AA.
- QA: verificar en móvil ≤480px que no haya desbordes; mantener targets ~44px sin inflar paddings.

Accesibilidad
- Contraste AA para texto sobre fondo en las pills de grupo.
- Focus visible en todos los elementos interactivos.
- aria-label correcto en iconos y tooltips; roles adecuados si se usan popovers/modales.

Archivos a editar/crear

Crear
- apps/web/src/lib/utils/groupColor.ts (hash + paleta).
- apps/web/src/lib/ui/icons/Clock.svelte (y/u Hourglass.svelte) (SVG).

Editar
- apps/web/src/lib/ui/data/TaskItem.svelte
  - Aplicar paleta determinista en pill de grupo.
  - Sustituir emoji de fecha por SVG “deadline”.
  - Añadir acento visual “isMine” en el indicador de responsables con aria/tooltip.
- apps/web/src/lib/styles/tokens.css
  - Añadir variables de sombras y, si procede, refinar escala de colores.
- apps/web/src/lib/styles/base.css
  - Estados interactivos con sombras coherentes y cursor correcto.
- apps/web/src/lib/ui/layout/Card.svelte (opcional)
  - Ajustar padding vertical si hiciese falta para mantener densidad.

Criterios de aceptación
- Elementos interactivos distinguibles de un vistazo (sombra + cursor + focus).
- El indicador de responsables comunica “es mía” sin leer texto.
- El icono de due se interpreta como “fecha límite”.
- Las pills de grupo mantienen color estable sesión tras sesión.

Caveats
- Evitar sombras en contenedores no interactivos para no elevar ruido visual.
- Mantener densidad: no incrementar la altura de filas.
- Si hay dark-mode en el futuro, revisar la paleta para asegurar contraste.

Orden de entrega sugerido
- B1 + B2 primero (impacto alto, bajo riesgo).
- B3 después (requiere condicionar por userId).
- B4 al final (pulido transversal + QA de accesibilidad).

Notas operativas
- Para aplicar estos cambios, comparte en este chat los archivos UI relevantes (TaskItem.svelte, tokens.css, base.css y/o componentes de iconos) y propondré los parches en bloques SEARCH/REPLACE.