/* ==========================================================================
   Fuerza Salud CRM · Tokens v1 (2026-11) — FASE 1 del rediseño.
   Fuente: docs/diseno/fuerza-tokens.css (entregable de Claude Design) +
   docs/diseno/Manual de marca.dc.html. Revisado para el CRM real (2026-11-08):
     - @font-face de Figtree autoalojada (assets/fonts/, OFL).
     - Alias de la marca anterior "Pulso" (--c-brand-*, --c-success*,
       --c-danger*, --radius-*, --dur-icono, --dur-entrada) y de la paleta
       "SANNA pastel" (--c-bg, --c-primary, --c-mint...): NINGUNA página se
       rompe. Los alias que apuntan a una escala fija (--c-mint-strong,
       --c-brand-200...) se redefinen en el tema oscuro.
   Carga: includes/layout.php (app_head) e includes/publico_layout.php, ANTES
   de assets/tailwind.css. assets/fs-puente.css (después de Tailwind) apunta
   las utilidades de color de Tailwind a estos roles.
   Tema: <html data-tema="claro|oscuro">. "auto" lo resuelve el script en
   línea de app_head() (window.fsTema). Movimiento reducido manual:
   <html data-movimiento="reducido"> (clase .fs-sin-movimiento).
   ========================================================================== */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('fonts/figtree-latin-var.woff2') format('woff2-variations'), url('fonts/figtree-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Escalas ─────────────────────────────────────────────────────────── */
  --c-verde-50:#EFF8F3; --c-verde-100:#E3F3EA; --c-verde-200:#C3E6D2; --c-verde-300:#8FD3AE;
  --c-verde-400:#4DB883; --c-verde-500:#149A60; --c-verde-600:#00784A; --c-verde-700:#00603B;
  --c-verde-800:#004A2E; --c-verde-900:#0B3324;

  --c-neutro-50:#FBFAF7; --c-neutro-100:#F6F5F1; --c-neutro-200:#ECEAE3; --c-neutro-300:#E4E2DA;
  --c-neutro-400:#C9CBC3; --c-neutro-500:#8F9892; --c-neutro-600:#56635C; --c-neutro-700:#3E4A44;
  --c-neutro-800:#26302B; --c-neutro-900:#14201B;

  --c-logro-50:#FEF4EC; --c-logro-100:#FDE6D3; --c-logro-200:#F9C9A3; --c-logro-300:#F3A66C;
  --c-logro-400:#EC9049; --c-logro-500:#E8833A; --c-logro-600:#C9661F; --c-logro-700:#A14E15;
  --c-logro-800:#7A3B12; --c-logro-900:#4F260C;

  --c-noche-900:#0D1211; --c-noche-800:#141B19; --c-noche-700:#1B2421; --c-noche-600:#24302C;
  --c-noche-500:#2C3A35; --c-senal:#3EE6A0;

  --c-chispa:#3FD99A;           /* solo puntos de "nuevo"; nunca texto */

  /* Paleta de datos (manual §12): verde siempre = "nosotros"/dato principal. */
  --c-dato-1:#00784A; --c-dato-2:#3D6FD8; --c-dato-3:#D18A00; --c-dato-4:#8E5BD0;
  --c-dato-5:#D9534F; --c-dato-6:#8A948F;

  /* ── Roles (tema claro) ─────────────────────────────────────────────── */
  --c-fondo:var(--c-neutro-100);
  --c-superficie:#FFFFFF;
  --c-superficie-baja:var(--c-neutro-50);
  --c-superficie-alta:var(--c-neutro-200);
  --c-borde:var(--c-neutro-300);
  --c-borde-fuerte:var(--c-neutro-400);
  --c-borde-input:var(--c-neutro-500);   /* 3.0:1 sobre blanco (AA componentes) */
  --c-texto:var(--c-neutro-900);
  --c-texto-2:var(--c-neutro-600);     /* 6.3:1 sobre blanco */
  --c-texto-3:#66726B;                 /* 4.8:1 sobre blanco, solo ≥13px */
  --c-accion:var(--c-verde-600);       /* 5.5:1 sobre blanco */
  --c-accion-hover:var(--c-verde-700);
  --c-sobre-accion:#FFFFFF;
  --c-accion-suave:var(--c-verde-100);
  --c-sobre-accion-suave:var(--c-verde-800);
  --c-ia:var(--c-verde-800);  --c-ia-suave:var(--c-verde-100);
  --c-exito:var(--c-verde-600);  --c-exito-suave:var(--c-verde-100);
  --c-alerta:#8F5300;   --c-alerta-suave:#FFF3DC;
  --c-error:#B42318;    --c-error-suave:#FDECEC;   --c-error-hover:#971C13;  --c-sobre-error:#FFFFFF;
  --c-info:#1D5FBF;     --c-info-suave:#E8F1FD;
  --c-logro:var(--c-logro-500);  --c-sobre-logro:var(--c-logro-900);  --c-logro-suave:var(--c-logro-50);
  --c-sobre-logro-suave:var(--c-logro-900);   /* texto sobre --c-logro-suave (QA 2026-11-08) */
  --c-pista:var(--c-neutro-200);
  --c-foco:var(--c-verde-600);
  --c-velo:rgba(20,32,27,.48);
  --c-inverso:var(--c-neutro-900);  --c-sobre-inverso:var(--c-neutro-100);  /* toast, tooltip */
  --c-seleccion:var(--c-verde-200);
  --c-scroll:var(--c-neutro-400);  --c-scroll-hover:var(--c-neutro-500);
  --c-vidrio:rgba(255,255,255,.86);   /* topbar / barra inferior translúcidas */

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --font-ui:'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-display:800 40px/44px var(--font-ui);
  --t-h1:800 28px/34px var(--font-ui);
  --t-h2:700 22px/28px var(--font-ui);
  --t-h3:700 18px/24px var(--font-ui);
  --t-cuerpo-l:500 16px/24px var(--font-ui);
  --t-cuerpo:400 15px/22px var(--font-ui);
  --t-chico:500 13px/18px var(--font-ui);
  --t-rotulo:700 12px/16px var(--font-ui);   /* + letter-spacing .04em, mayúsculas */
  --t-kpi:700 32px/36px var(--font-ui);      /* + font-variant-numeric: tabular-nums */

  /* ── Espaciado (base 4) ─────────────────────────────────────────────── */
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:20px; --esp-6:24px;
  --esp-8:32px; --esp-10:40px; --esp-12:48px; --esp-16:64px;
  --toque:44px;                               /* objetivo táctil mínimo */

  /* ── Radios ─────────────────────────────────────────────────────────── */
  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:20px; --radius-2xl:24px; --radius-full:9999px;
  --radius-burbuja:18px; --radius-cola:6px;

  /* ── Sombras (tinta, muy suaves) ────────────────────────────────────── */
  --shadow-xs:0 1px 2px rgba(20,32,27,.05);
  --shadow-sm:0 1px 2px rgba(20,32,27,.05), 0 2px 6px -2px rgba(20,32,27,.06);
  --shadow-md:0 4px 16px -4px rgba(20,32,27,.10), 0 1px 3px rgba(20,32,27,.05);
  --shadow-lg:0 12px 32px -8px rgba(20,32,27,.14), 0 2px 8px -2px rgba(20,32,27,.06);
  --shadow-xl:0 24px 56px -16px rgba(20,32,27,.22), 0 4px 12px -4px rgba(20,32,27,.08);
  --shadow-card:0 0 0 1px var(--c-borde), 0 1px 2px rgba(20,32,27,.04);

  /* ── Capas ──────────────────────────────────────────────────────────── */
  --z-base:0; --z-sticky:20; --z-nav:40; --z-drawer:60; --z-velo:80; --z-modal:90;
  --z-toast:100; --z-tooltip:110;

  /* ── Movimiento ─────────────────────────────────────────────────────── */
  --dur-instante:90ms;   /* hundir al tocar */
  --dur-rapida:140ms;    /* hover, color, foco */
  --dur-base:200ms;      /* popover, toast que se va, íconos */
  --dur-media:280ms;     /* modal, hoja inferior, toast que llega */
  --dur-lenta:380ms;     /* drawer, entrada de página, estado vacío */
  --dur-trazo:520ms;     /* dibujo del destello */
  --dur-momento:1200ms;  /* tope de un momento de marca */
  --ease-salida:cubic-bezier(.23,1,.32,1);      /* llega y se asienta (decelera) */
  --ease-entrada:cubic-bezier(.55,0,1,.45);     /* se va (acelera) */
  --ease-trazo:cubic-bezier(.65,0,.35,1);       /* dibujos, giros, contadores */
  --ease-hoja:cubic-bezier(.32,.72,0,1);        /* drawer, hoja inferior */
  --ease-rebote:cubic-bezier(.34,1.56,.64,1);   /* chispa, insignias, check */
  --dist-entrada:8px;                           /* desplazamiento de entrada */
  --escala-presion:.97;

  /* ── Alias de compatibilidad (no borrar hasta la fase 8) ────────────── */
  --c-bg:var(--c-fondo); --c-surface:var(--c-superficie);
  --c-surface-low:var(--c-superficie-baja); --c-surface-high:var(--c-superficie-alta);
  --c-border:var(--c-borde); --c-border-strong:var(--c-borde-fuerte);
  --c-text:var(--c-texto); --c-text-muted:var(--c-texto-2); --c-text-subtle:var(--c-texto-3);
  --c-primary:var(--c-accion); --c-primary-hover:var(--c-accion-hover);
  --c-mint:var(--c-accion-suave); --c-on-mint:var(--c-sobre-accion-suave);
  --c-brand:var(--c-verde-500); --c-mint-strong:var(--c-verde-200); --c-mint-border:var(--c-verde-200);
  --c-violet:var(--c-info); --c-violet-soft:var(--c-info-suave); --c-violet-border:#C9DCF8; /* violeta retirado */
  --c-error-soft:var(--c-error-suave); --c-warning:var(--c-alerta); --c-warning-soft:var(--c-alerta-suave);
  --c-info-soft:var(--c-info-suave); --c-success:var(--c-exito); --c-success-soft:var(--c-exito-suave);
  --c-danger:var(--c-error); --c-danger-soft:var(--c-error-suave); --c-track:var(--c-pista);
  --c-brand-50:var(--c-verde-50); --c-brand-100:var(--c-verde-100); --c-brand-200:var(--c-verde-200);
  --c-brand-300:var(--c-verde-300); --c-brand-500:var(--c-verde-500); --c-brand-600:var(--c-verde-600);
  --c-brand-700:var(--c-verde-700); --c-brand-900:var(--c-verde-900);
  --font-display:var(--font-ui); --font-body:var(--font-ui);
  --ease-out:var(--ease-salida); --ease-in-out:var(--ease-trazo); --ease-drawer:var(--ease-hoja);
  --dur-fast:var(--dur-rapida); --dur-slow:var(--dur-media);
  --dur-icono:var(--dur-base); --dur-entrada:var(--dur-lenta);
}

/* ── Tema oscuro "Noche" ─────────────────────────────────────────────── */
:root[data-tema="oscuro"], [data-tema="oscuro"] {
  color-scheme:dark;
  --c-fondo:var(--c-noche-900);
  --c-superficie:var(--c-noche-800);
  --c-superficie-baja:#111816;
  --c-superficie-alta:var(--c-noche-700);
  --c-borde:var(--c-noche-600);
  --c-borde-fuerte:var(--c-noche-500);
  --c-borde-input:#4A5D56;
  --c-texto:#E8F0EC;
  --c-texto-2:#9FB2A8;     /* 8.4:1 */
  --c-texto-3:#7F948A;     /* 5.8:1 */
  --c-accion:var(--c-senal);           /* 11.6:1 sobre fondo */
  --c-accion-hover:#6BF0B8;
  --c-sobre-accion:#04140D;
  --c-accion-suave:#163126;
  --c-sobre-accion-suave:#7FF0C0;
  --c-ia:#7FF0C0;  --c-ia-suave:#163126;
  --c-exito:var(--c-senal);  --c-exito-suave:#163126;
  --c-alerta:#FFC857;  --c-alerta-suave:#2E2610;
  --c-error:#FF7A6B;   --c-error-suave:#33171A;   --c-error-hover:#FF9A8E;  --c-sobre-error:#2A0B07;
  --c-info:#8AB4FF;    --c-info-suave:#132034;
  --c-logro:#F09A55;   --c-sobre-logro:#2A1404;  --c-logro-suave:#2E1E12;
  --c-sobre-logro-suave:#F09A55;   /* --c-sobre-logro (#2A1404) era ilegible sobre --c-logro-suave */
  --c-pista:var(--c-noche-700);
  --c-foco:var(--c-senal);
  --c-velo:rgba(0,0,0,.6);
  --c-inverso:#E8F0EC;  --c-sobre-inverso:var(--c-noche-900);
  --c-seleccion:#1F5A42;
  --c-scroll:var(--c-noche-500);  --c-scroll-hover:#3E504A;
  --c-vidrio:rgba(13,18,17,.86);
  --c-dato-1:#3EE6A0; --c-dato-2:#7FA3F0; --c-dato-3:#F2B33D; --c-dato-4:#B48FEA;
  --c-dato-5:#FF7A6B; --c-dato-6:#7F948A;
  --shadow-xs:none; --shadow-sm:0 0 0 1px var(--c-borde);
  --shadow-md:0 0 0 1px var(--c-borde), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-lg:0 0 0 1px var(--c-borde), 0 16px 40px -12px rgba(0,0,0,.6);
  --shadow-xl:0 0 0 1px var(--c-borde-fuerte), 0 24px 56px -16px rgba(0,0,0,.7);
  --shadow-card:0 0 0 1px var(--c-borde);
  /* Alias que apuntaban a una escala fija (claro) y se usan como fondo/borde. */
  --c-brand:var(--c-senal); --c-mint-strong:#1E4535; --c-mint-border:#24503D; --c-violet-border:#23385A;
  --c-brand-50:#12261D; --c-brand-100:#163126; --c-brand-200:#24503D; --c-brand-300:#3E8A68;
  --c-brand-500:var(--c-senal); --c-brand-600:var(--c-senal); --c-brand-700:#7FF0C0; --c-brand-900:#C9F7E3;
}

/* ── Movimiento reducido: sin desplazamientos, fundidos cortos ───────── */
@media (prefers-reduced-motion: reduce) {
  :root { --dist-entrada:0px; --escala-presion:1; --dur-media:160ms; --dur-lenta:160ms;
          --dur-trazo:0ms; --dur-momento:0ms; }
}
:root[data-movimiento="reducido"] { --dist-entrada:0px; --escala-presion:1; --dur-media:160ms;
  --dur-lenta:160ms; --dur-trazo:0ms; --dur-momento:0ms; }

/* ── Base global ─────────────────────────────────────────────────────── */
html { background:var(--c-fondo); color:var(--c-texto); font-family:var(--font-ui); }
/* Cambio de tema animado (manual §04): fundido de 200 ms SOLO en html, una
   vez; window.fsTema.set() pone la clase durante el cambio y la quita. */
html.fs-tema-cambiando, html.fs-tema-cambiando body { transition:background-color 200ms ease, color 200ms ease; }
::selection { background:var(--c-seleccion); color:var(--c-texto); }

/* Foco visible solo con teclado: anillo de 2 px con 2 px de separación.
   :where() = especificidad 0 (un outline propio de la página sigue mandando). */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="switch"], [role="tab"]):focus-visible {
  outline:2px solid var(--c-foco); outline-offset:2px;
}
.focus-ring:focus-visible { outline:2px solid var(--c-foco); outline-offset:2px; }

/* Regla global de movimiento reducido (sistema o interruptor de Apariencia,
   manual §06): animaciones y transiciones pasan a 1 ms (llegan a su estado
   final sin moverse; animationend/transitionend siguen llegando). Quedan
   fuera los INDICADORES DE ESTADO, que respiran en opacidad (spinners,
   loader de marca, .fs-respira) y los avisos de color que ya tienen su
   variante reducida en layout.php (.pulso-atencion, .sacudir). Un
   componente que maneje su propia variante reducida puede excluirse con
   la clase .fs-rm-ok. */
@keyframes fs-respira { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  *:not(.fs-rm-ok):not(.pulso-atencion):not(.sacudir):not(.animate-spin):not(.animate-ping):not(.animate-pulse):not(.fs-respira):not(.alm-destello),
  *:not(.fs-rm-ok)::before, *:not(.fs-rm-ok)::after {
    animation-duration:1ms !important; animation-delay:0s !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; transition-delay:0s !important;
  }
  .animate-spin, .animate-ping, .alm-destello { animation:fs-respira 1600ms ease-in-out infinite !important; }
}
html.fs-sin-movimiento { scroll-behavior:auto !important; }
html.fs-sin-movimiento *:not(.fs-rm-ok):not(.pulso-atencion):not(.sacudir):not(.animate-spin):not(.animate-ping):not(.animate-pulse):not(.fs-respira):not(.alm-destello),
html.fs-sin-movimiento *:not(.fs-rm-ok)::before, html.fs-sin-movimiento *:not(.fs-rm-ok)::after {
  animation-duration:1ms !important; animation-delay:0s !important; animation-iteration-count:1 !important;
  transition-duration:1ms !important; transition-delay:0s !important;
}
html.fs-sin-movimiento .animate-spin, html.fs-sin-movimiento .animate-ping, html.fs-sin-movimiento .alm-destello { animation:fs-respira 1600ms ease-in-out infinite !important; }