/* ================================================================
   CareFlow — TOKENS DE DISEÑO (sistema compartido)
   Plataforma SaaS clínica · landing · login · dashboard · módulos
   ================================================================ */

/* ================================================================
   NACELLE — tipografía oficial del Manual de Marca (SIL OFL)

   Servida desde el propio artefacto, no desde Google Fonts. Era el único origen
   externo de todo el producto; al traerla aquí, `style-src` y `font-src` se cierran
   a 'self' en las dos CSP.

   Las declaraciones viven en tokens.css y no en una hoja aparte a propósito:
   `build-institutional-site.mjs` publica por lista blanca (INCLUDED_FILES), y una
   hoja nueva se quedaría fuera del sitio institucional sin que nada avisara.

   Cinco caras, que es lo que la interfaz usa de verdad. La cursiva aparece en siete
   sitios y todos resuelven a peso 400, así que basta una itálica.

   ─── size-adjust ───
   Nacelle se lee más pequeña que Plus Jakarta Sans al mismo font-size. Medido:

     altura de x        PJS 0,540 em   Nacelle 0,521 em   (−3,5 %)
     altura de mayúscula PJS 0,750 em   Nacelle 0,730 em   (−2,7 %)
     anchura de «n»     PJS 0,573 em   Nacelle 0,571 em   (idéntica)

   size-adjust reescala el em de la fuente, así que recupera el tamaño óptico sin
   tocar ninguna de las ~80 declaraciones de font-size repartidas entre las dos
   hojas. El valor está entre el 103,6 % que igualaría la altura de x y el 102,7 %
   que igualaría la de mayúscula.

   Ojo al tocarlo: reescala TAMBIÉN la anchura. Como las dos familias miden igual de
   ancho, cada punto de size-adjust ensancha el texto en la misma proporción, y los
   sitios ajustados son el navbar, los botones con nowrap, el clamp del h1 del hero
   y los enlaces del footer.
   ================================================================ */
@font-face {
  font-family: 'Nacelle';
  src: url('../assets/fonts/nacelle-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 103%;
}
@font-face {
  font-family: 'Nacelle';
  src: url('../assets/fonts/nacelle-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  size-adjust: 103%;
}
@font-face {
  font-family: 'Nacelle';
  src: url('../assets/fonts/nacelle-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  size-adjust: 103%;
}
@font-face {
  font-family: 'Nacelle';
  src: url('../assets/fonts/nacelle-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 103%;
}
@font-face {
  font-family: 'Nacelle';
  src: url('../assets/fonts/nacelle-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  size-adjust: 103%;
}

:root {
  /* ─── Paleta de marca — Manual de Marca CareFlow (Pantone) ───
     Los cinco tonos oficiales ocupan 600–950. El manual no define tonos claros, así que
     50–500 son mezclas de #3866ae (Pantone 7683 C) sobre blanco al 6/8/15/25/35/50 %:
     extienden la paleta a escala de UI sin introducir ningún hue ajeno a la marca.
     Qué papel cumple cada tono y cuándo se usa cada uno:
     documents/CareFlow_guia_de_diseno_de_producto.md §2–§4 */
  --cf-blue-950: #172034;   /* Pantone 4146 C — azul más profundo */
  --cf-blue-900: #1b2340;   /* Pantone 4147 C — azul muy oscuro */
  --cf-blue-800: #233466;   /* Pantone 2119 C — azul secundario oscuro */
  --cf-blue-700: #273777;   /* Pantone 2118 C — PRINCIPAL DE MARCA */
  --cf-blue-600: #3866ae;   /* Pantone 7683 C — azul secundario claro */
  --cf-blue-500: #9cb3d7;   /* mezcla 50 % */
  --cf-blue-400: #b9c9e3;   /* mezcla 35 % */
  --cf-blue-300: #cdd9eb;   /* mezcla 25 % */
  --cf-blue-200: #e2e9f3;   /* mezcla 15 % */
  --cf-blue-100: #eff3f9;   /* mezcla  8 % */
  --cf-blue-50:  #f3f6fa;   /* mezcla  6 % */

  /* ─── Superficies y fondos — BLANCO PURO ─── */
  --cf-bg:        #ffffff;  /* lienzo: blanco puro, alto contraste */
  --cf-bg-soft:   #fafbfd;  /* casi-blanco, solo para hovers sutiles */
  --cf-surface:   #ffffff;
  --cf-surface-2: #f7f9fc;  /* gris-azul tenue para hovers/insets discretos */

  /* ─── Acentos para partículas ─── */
  --cf-accent-violet: #6b5bff;
  --cf-accent-cyan:   #18c6e6;

  /* ─── Texto ─── */
  --cf-text:      #0a1424;  /* casi negro, máximo contraste sobre blanco */
  --cf-text-2:    #3a516c;
  --cf-muted:     #6a7e95;
  --cf-on-dark:   #ffffff;

  /* ─── Bordes (finos, casi imperceptibles sobre blanco) ─── */
  --cf-border:       #eef1f6;
  --cf-border-2:     #e2e7f0;
  --cf-border-focus: #3866ae;

  /* ─── Semántico ─── */
  --cf-success:    #0a9e63;
  --cf-success-bg: #e9fbf3;
  --cf-warn:       #b6791f;
  --cf-warn-bg:    #fff6e6;
  --cf-danger:     #c0392b;

  /* ─── Gradientes de marca ─── */
  --cf-grad:        linear-gradient(135deg, #233466 0%, #3866ae 100%);
  --cf-grad-soft:   linear-gradient(135deg, #3866ae 0%, #9cb3d7 100%);
  --cf-grad-deep:   linear-gradient(150deg, #233466 0%, #273777 40%, #3866ae 100%);
  --cf-grad-text:   linear-gradient(120deg, #273777 0%, #3866ae 100%);

  /* ─── Espaciado ─── */
  --cf-1: 4px;   --cf-2: 8px;   --cf-3: 12px;  --cf-4: 16px;
  --cf-5: 20px;  --cf-6: 24px;  --cf-8: 32px;  --cf-10: 40px;
  --cf-12: 48px; --cf-16: 64px; --cf-20: 80px; --cf-24: 96px;

  /* ─── Radios ─── */
  --cf-r-sm:  10px;
  --cf-r-md:  14px;
  --cf-r-lg:  20px;
  --cf-r-xl:  28px;
  --cf-r-full: 9999px;

  /* ─── Sombras premium (suaves, difusas, casi imperceptibles) ─── */
  --cf-shadow-xs: 0 1px 2px rgba(16, 33, 64, .04);
  --cf-shadow-sm: 0 2px 8px rgba(16, 33, 64, .05), 0 1px 2px rgba(16, 33, 64, .04);
  --cf-shadow-md: 0 6px 22px rgba(16, 33, 64, .07), 0 2px 6px rgba(16, 33, 64, .04);
  --cf-shadow-lg: 0 16px 44px rgba(16, 33, 64, .10), 0 4px 12px rgba(16, 33, 64, .05);
  --cf-shadow-xl: 0 28px 70px rgba(12, 26, 56, .14), 0 8px 20px rgba(12, 26, 56, .06);
  --cf-glow:      0 10px 34px rgba(56, 102, 174, .28);

  /* ─── Easing y duración ─── */
  --cf-ease:      cubic-bezier(.4, 0, .2, 1);
  --cf-ease-out:  cubic-bezier(.22, .61, .36, 1);
  --cf-spring:    cubic-bezier(.34, 1.56, .64, 1);
  --cf-fast: 150ms;
  --cf-mid:  280ms;
  --cf-slow: 520ms;

  /* ─── Tipografía — Nacelle, del Manual de Marca (ver @font-face arriba) ───
     Nacelle NO tiene Medium: sus pesos son 100/200/300/400/600/700/800/900. La
     interfaz no debe pedir 500, 650 ni 750; la jerarquía y el criterio para
     resolver un 500 están en documents/CareFlow_guia_de_diseno_de_producto.md §8 */
  --cf-font: 'Nacelle', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --cf-tracking-tight:  -0.02em;
  --cf-tracking-tighter: -0.035em;  /* titulares grandes, empaque premium */
  --cf-tracking-wide:    0.04em;

  /* ─── Layout ─── */
  --cf-sidebar-w: 256px;
  --cf-topbar-h:  68px;
  --cf-maxw:      1200px;
}

/* ─── Reset base compartido (solo para páginas del shell CareFlow) ─── */
.cf, .cf *, .cf *::before, .cf *::after {
  box-sizing: border-box;
}

/* Scrollbar refinada para el shell */
.cf ::-webkit-scrollbar { width: 9px; height: 9px; }
.cf ::-webkit-scrollbar-track { background: transparent; }
.cf ::-webkit-scrollbar-thumb {
  background: var(--cf-border-2);
  border-radius: var(--cf-r-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.cf ::-webkit-scrollbar-thumb:hover { background: var(--cf-blue-300); background-clip: padding-box; }