/*
 * TaskFlow · tema (paleta navy + petróleo, 2026-10-01).
 *
 * Fuente ÚNICA de los colores de TaskFlow: la PWA y cualquier plantilla de Django importan este
 * archivo y usan estas variables; ningún hex suelto en otros CSS ni en el marcado (CLAUDE.md,
 * §Estándar de interfaz). Guía completa y razones de cada ajuste: docs/identidad-visual.md.
 *
 * Reglas rápidas:
 *  - Navy (--tf-primary): identidad, navegación, estructura.  Petróleo (--tf-accent): progreso
 *    («En curso»), seleccionado, indicadores. Para texto en petróleo, --tf-accent-text.
 *  - Sin coral ni naranja fuera de lo semántico (2026-10-01): el rojo y el ámbar quedan SOLO para
 *    peligro, vencido, urgente y advertencias, para que no parezca que algo está mal.
 *  - Botón principal y «+»: navy con texto blanco (--tf-btn, --tf-on-btn).
 *  - Sobre la barra lateral navy, los indicadores usan --tf-accent-on-dark (cian claro).
 *  - Badges: punto con el color base, texto con la variante *-text y fondo *-soft.
 *  - El logo conserva su color propio (--tf-logo); no se recolorea salvo la versión blanca.
 */
:root{
  /* Marca */
  --tf-logo:#000955;                 /* color propio del logo: no se cambia */
  --tf-primary:#172554;              /* navy: identidad, navegación, estructura */
  --tf-primary-hover:#1e3a8a;
  --tf-primary-soft:#e8ecf6;
  /* Acento petróleo (2026-10-01): reemplaza al coral (se leía como alerta) y al azul
     (se parecía al de todas las apps). */
  --tf-accent:#0e7490;               /* petróleo: progreso, seleccionado, indicadores */
  --tf-accent-hover:#155e75;
  --tf-accent-soft:#ecfeff;
  --tf-accent-text:#155e75;          /* texto petróleo sobre blanco (7.3) y sobre -soft (7.0) */
  --tf-on-accent:#ffffff;            /* texto sobre petróleo: blanco (5.4) */
  --tf-accent-on-dark:#67e8f9;       /* indicadores sobre la barra navy: cian claro (10.1) */
  /* Botón principal y botón «+»: navy con texto blanco (14.6), decidido 2026-10-01. */
  --tf-btn:#172554;
  --tf-btn-hover:#1e3a8a;
  --tf-on-btn:#ffffff;

  /* Fondos, texto y bordes */
  --tf-bg:#f5f7fa;
  --tf-surface:#ffffff;
  --tf-text:#172033;
  --tf-text-muted:#64748b;
  --tf-text-disabled:#94a3b8;
  --tf-border:#e2e8f0;
  --tf-sidebar-text:#cbd5e1;

  /* Estatus: punto/indicador · texto · fondo suave */
  --tf-status-pending:#64748b;  --tf-status-pending-text:#475569;  --tf-status-pending-soft:#f1f5f9;
  --tf-status-progress:#0e7490; --tf-status-progress-text:#155e75; --tf-status-progress-soft:#ecfeff;
  --tf-status-done:#16a34a;     --tf-status-done-text:#15803d;     --tf-status-done-soft:#ecfdf5;

  /* Semánticos */
  --tf-danger:#dc2626;  --tf-danger-text:#b91c1c;  --tf-danger-soft:#fef2f2;
  --tf-warning:#d97706; --tf-warning-text:#b45309; --tf-warning-soft:#fffbeb;
  --tf-info:#3b82f6;    --tf-info-text:#1d4ed8;    --tf-info-soft:#eff6ff;

  /* Prioridades. Baja y media en grises (media es la de omisión: neutra, no llama la atención);
     alta ámbar y urgente rojo, que sí son alertas. */
  --tf-priority-low:#cbd5e1;    --tf-priority-low-text:#64748b;    --tf-priority-low-soft:#f8fafc;
  --tf-priority-medium:#64748b; --tf-priority-medium-text:#334155; --tf-priority-medium-soft:#e2e8f0;
  --tf-priority-high:#d97706;   --tf-priority-high-text:#b45309;   --tf-priority-high-soft:#fffbeb;
  --tf-priority-urgent:#dc2626; --tf-priority-urgent-text:#b91c1c; --tf-priority-urgent-soft:#fef2f2;

  /* Avatares: escala navy/pizarra, sin colores extra */
  --av1:#172554; --av2:#1e3a8a; --av3:#334155; --av4:#475569; --av5:#0f3f6e; --av6:#3b4a6b;

  /* Forma */
  --tf-radius-card:12px; --tf-radius-btn:9px; --tf-radius-modal:16px;
  --tf-shadow:0 1px 3px rgba(15,23,42,.06);
  --tf-shadow-float:0 8px 24px rgba(15,23,42,.10);
  --tf-veil:rgba(15,23,42,.45);

}