/* ==========================================================================
   CertiProf OS · Design tokens
   Paleta derivada del Brandbook oficial de Certiprof.
   Azul #003BC8 · Cian #14C4ED · Teal #01B5A2 · Violeta #6D30EE · Navy #05092D

   Sistema (2-sep-2026): SUPERFICIES EN CAPAS.

   La interfaz se lee por profundidad, no por adorno. Tres capas y siempre las
   mismas, en los dos temas:

     1. El RAÍL (barra lateral) es la capa de la casa: navy de marca, mate, con
        el logotipo a color y el cian del brandbook como único acento. Es lo
        único de la plataforma pintado con un color de marca en bloque, y por
        eso identifica el producto sin que el contenido tenga que llevar color.
     2. El LIENZO es un gris frío apenas teñido de azul; sobre él se apoyan
     3. las TARJETAS, blancas, con una línea de 1 px y una sombra de un píxel.

   El azul #003BC8 queda para lo accionable —botones primarios, destino activo,
   foco, enlaces— y los tonos semánticos se derivan del propio brandbook: el
   teal es «bien», el cian es «información», el violeta es el acento secundario.
   Nada de degradados decorativos en el contenido; la única superficie con un
   lavado de color es el saludo del Inicio, y va a un 8 %.

   Regla de las versalitas: se escriben en MAYÚSCULA ESPACIADA solo los rótulos
   estructurales de las superficies de navegación (grupos del menú, rótulos de
   menús desplegables, cabeceras de días en calendarios). Los rótulos de
   CONTENIDO —indicadores, cabeceras de tabla, subtítulos de tarjeta— van en
   frase normal: se leen, no se escanean.
   ========================================================================== */

:root {
  /* ---- Marca (valores literales del brandbook, no se alteran) ---- */
  --brand-navy: #05092d;
  --brand-blue: #003bc8;
  --brand-cyan: #14c4ed;
  --brand-teal: #01b5a2;
  --brand-purple: #6d30ee;
  --brand-red: #e53331;
  --brand-yellow: #fae721;

  /* El degradado sobrevive porque el login —congelado al final de este
     archivo— lo usa. Fuera de esa pantalla no se aplica a nada. */
  --brand-gradient: linear-gradient(125deg, #003bc8 0%, #0a72e0 34%, #14c4ed 66%, #01b5a2 100%);

  /* ---- Tipografía ----
     Outfit para lo que se mira (títulos y cifras), Plus Jakarta Sans para lo
     que se lee. Dos familias porque cumplen dos papeles; la escala es fija en
     rem —una interfaz de operación no se estira con la ventana—. */
  --font-display: "Outfit", "Franie", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans: "Plus Jakarta Sans", "Franie", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --fs-3xs: .625rem;   /* 10 */
  --fs-2xs: .6875rem;  /* 11 */
  --fs-xs:  .75rem;    /* 12 */
  --fs-sm:  .8125rem;  /* 13 */
  --fs-md:  .875rem;   /* 14 */
  --fs-base: .9375rem; /* 15 */
  --fs-lg:  1.0625rem; /* 17 */
  --fs-xl:  1.25rem;   /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: 1.875rem;  /* 30 */
  --fs-4xl: 2.375rem;  /* 38 */
  --fs-hero: 3rem;     /* 48 */

  /* ---- Espaciado (base 4) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;

  /* ---- Radios ----
     Tres pasos y una píldora: 8 px para lo que se pulsa (botones, campos,
     enlaces del menú), 10 px para lo que flota (menús, avisos), 12 px para lo
     que contiene (tarjetas, modales) y píldora para lo que rotula. */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-full: 999px;

  /* ---- Botón táctil ----
     El botón se levanta UN píxel al pasar el cursor y apoya una sombra suave
     del color de su propio relleno; al pulsar, baja un píxel. Era el gesto de
     Hubstaff con un bloque sólido de 4 px debajo: en una pantalla que se usa
     ocho horas, cuarenta botones saltando tres píxeles cansan. Las variables
     viven aquí para que el login —congelado abajo— pueda anularlas. */
  --btn-lift: -1px;
  --btn-press: 1px;
  --btn-drop: 0px;

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 60px;
  --content-max: 1560px;

  /* ---- Movimiento ----
     Corto y con salida exponencial. Una interfaz de operación carga en medio
     de una tarea: nadie quiere ver una coreografía cada vez que cambia de
     pantalla. */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Había un tercero, `--ease-spring`, con rebote (`cubic-bezier(.34, 1.56,
     .64, 1)`: el 1.56 se pasa del destino y vuelve). Se quitó el 4-sep-2026.
     Lo usaban el pomo del interruptor y los saltos de Certipoo, y en los dos
     el rebote sobraba: en el pomo porque un conmutador que se pasa de largo
     se lee como que no acabó de decidirse, y en el muñeco porque el rebote ya
     está DENTRO de los fotogramas —`cp-jump` sube, aplasta y vuelve—, así que
     la curva solo lo distorsionaba. Los tres sitios pasan a `--ease-out`, que
     es una salida exponencial: frena como frena algo real. */
  --t-fast: .12s;
  --t: .2s;
  --t-slow: .3s;

  --z-sticky: 100;
  --z-drawer: 400;
  --z-modal: 600;
  --z-palette: 700;
  --z-toast: 800;
}

/* ==========================================================================
   Tema claro (por defecto)
   ========================================================================== */
/* `html[…]` y no `[…]` a secas: los botones de Ajustes → Apariencia llevan
   `data-theme="light|dark"` como VALOR a elegir, y con el selector suelto
   cada botón recibía la paleta entera del tema que ofrece —fondo blanco con
   el rótulo heredado casi blanco—. Los tokens del tema solo los declara la
   raíz del documento. */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Lienzo gris claro y NEUTRO: Juan pidió quitarle el azul al fondo
     (2-sep-2026). Las tarjetas se separan de él por luminosidad, una línea de
     1 px y una sombra de un píxel; el color de marca lo pone el raíl. */
  --bg: #f4f5f7;
  --bg-grad: none;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef0f3;
  --surface-inset: #f0f1f4;
  --surface-glass: #ffffff;

  /* Líneas apenas frías, para casar con la tinta navy sin volver a teñir el
     fondo. */
  --border: #e3e6ec;
  --border-soft: #edeff3;
  --border-strong: #cdd2dc;

  /* Tinta navy: ningún texto es negro puro, pero el primer nivel es más oscuro
     que antes (#253053 → #141a33). El gris claro sobre blanco era la mitad de
     lo que hacía que la interfaz se viera pálida. */
  --ink: #141a33;
  --ink-2: #3b4361;
  --ink-3: #626b88;
  --ink-4: #737c9a;
  --ink-invert: #ffffff;

  --primary: #003bc8;
  --primary-hover: #1247d8;
  --primary-soft: rgba(0, 59, 200, .08);
  --primary-soft-2: rgba(0, 59, 200, .15);
  --primary-ink: #ffffff;

  --accent: #6d30ee;
  --accent-soft: rgba(109, 48, 238, .1);

  /* El naranja de Certipoo (#ff8a4d), el único color cálido de la casa. No es
     un semántico: no significa «cuidado» ni «error», solo marca las acciones
     que AÑADEN algo dentro de una ficha —subtarea, adjunto— para que se
     distingan de un vistazo del azul, que es todo lo demás. Lo pidió Juan el
     4-sep-2026. Como aquí sirve de TEXTO sobre el relleno suave, la tinta se
     oscurece hasta pasar AA sobre blanco; el naranja del muñeco se queda para
     el relleno y para el estado sobre el que se pasa el cursor. */
  --orange: #b4500e;
  --orange-soft: rgba(255, 138, 77, .16);
  --orange-solid: #ff8a4d;
  --orange-ink: #2a1102;

  /* Semánticos. Los rellenos suaves salen del brandbook —teal para «bien»,
     cian para «información»— y las tintas se oscurecen hasta pasar AA sobre
     blanco, porque aquí sirven de TEXTO, no solo de fondo. */
  --success: #0b7c62;
  --success-soft: rgba(1, 181, 162, .14);
  --warning: #9a5b00;
  --warning-soft: rgba(250, 176, 32, .18);
  --danger: #cf2723;
  --danger-soft: rgba(229, 51, 49, .1);
  --info: #0b6f92;
  --info-soft: rgba(20, 196, 237, .14);
  --neutral-soft: rgba(98, 107, 136, .1);

  /* Sombras teñidas de navy, nunca negro sobre un fondo azulado. La tarjeta
     lleva una de un píxel; solo lo que flota —menús, modales, avisos— usa las
     grandes. */
  --shadow-card: 0 1px 2px rgba(20, 26, 51, .04);
  --shadow-xs: 0 1px 2px rgba(20, 26, 51, .05);
  --shadow-sm: 0 1px 2px rgba(20, 26, 51, .06), 0 2px 6px rgba(20, 26, 51, .04);
  --shadow-md: 0 4px 12px rgba(20, 26, 51, .08), 0 1px 2px rgba(20, 26, 51, .05);
  --shadow-lg: 0 10px 30px rgba(20, 26, 51, .12), 0 2px 6px rgba(20, 26, 51, .06);
  --shadow-xl: 0 20px 50px rgba(20, 26, 51, .16), 0 4px 10px rgba(20, 26, 51, .06);
  --ring: 0 0 0 3px rgba(0, 59, 200, .18);

  /* Superficie de gráficos + serie categórica (orden fijo, nunca ciclado).
     Las series son de marca: azul, teal, ámbar y magenta. */
  --chart-surface: #ffffff;
  --c1: #2f5bff;
  --c2: #01b5a2;
  --c3: #f5a524;
  --c4: #c026d3;
  --grid: #e9ebf0;
  --axis-ink: #7b83a0;

  /* Cargador: las dos tintas del logotipo, planas */
  --loader-1: #14c4ed;
  --loader-2: #003bc8;

  /* ---- El raíl ----
     Navy de marca, levantado un paso de #05092d para que el texto tenga aire.
     Igual en los dos temas: la capa de la casa no cambia con la luz. */
  --rail-bg: #0a1034;
  --rail-bg-2: #121a47;
  --rail-line: rgba(255, 255, 255, .08);
  --rail-hover: rgba(255, 255, 255, .07);
  --rail-active: rgba(255, 255, 255, .13);
  --rail-ink: #f3f5ff;
  --rail-ink-2: rgba(243, 245, 255, .8);
  --rail-ink-3: rgba(243, 245, 255, .58);
  --rail-ink-4: rgba(243, 245, 255, .5);
  --rail-accent: #14c4ed;
  --rail-accent-hover: #3fd2f3;
  --rail-accent-ink: #05092d;
}

/* ==========================================================================
   Tema oscuro — navy apagado, no gris neutro. Las capas se conservan: el raíl
   es lo más oscuro, el lienzo un paso más claro y las tarjetas otro más. Las
   tintas secundarias suben un punto respecto al tema anterior: sobre oscuro,
   un gris al 55 % no se lee después de ocho horas.
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0c101c;
  --bg-grad: none;
  --surface: #141a2b;
  --surface-2: #1a2136;
  --surface-3: #232b45;
  --surface-inset: #0f1422;
  --surface-glass: #141a2b;

  --border: #273050;
  --border-soft: #1f2740;
  --border-strong: #3b4569;

  --ink: #eef1fa;
  --ink-2: #c9cee0;
  --ink-3: #a3abc6;
  --ink-4: #7f88a8;
  --ink-invert: #0c101c;

  --primary: #6f90ff;
  --primary-hover: #8aa4ff;
  --primary-soft: rgba(111, 144, 255, .14);
  --primary-soft-2: rgba(111, 144, 255, .24);
  --primary-ink: #0a0e1c;

  --accent: #b48cff;
  --accent-soft: rgba(180, 140, 255, .16);

  /* Sobre oscuro la tinta sube en vez de bajar: el #b4500e del tema claro se
     hunde en el fondo navy. El relleno y el sólido no cambian. */
  --orange: #ffa767;
  --orange-soft: rgba(255, 138, 77, .18);
  --orange-solid: #ff8a4d;
  --orange-ink: #2a1102;

  --success: #3ad3b4;
  --success-soft: rgba(1, 181, 162, .18);
  --warning: #ffc75c;
  --warning-soft: rgba(250, 176, 32, .18);
  --danger: #ff7b7b;
  --danger-soft: rgba(255, 123, 123, .14);
  --info: #5fd3f2;
  --info-soft: rgba(20, 196, 237, .16);
  --neutral-soft: rgba(158, 166, 194, .12);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, .65), 0 4px 10px rgba(0, 0, 0, .4);
  --ring: 0 0 0 3px rgba(111, 144, 255, .4);

  --chart-surface: #141a2b;
  --c1: #6f90ff;
  --c2: #3ad3b4;
  --c3: #ffc75c;
  --c4: #e879f9;
  --grid: #242c48;
  --axis-ink: #7f88a8;

  --loader-1: #5ed8f5;
  --loader-2: #5b8cff;

  --rail-bg: #070a19;
  --rail-bg-2: #0f1530;
  --rail-line: rgba(255, 255, 255, .07);
  --rail-hover: rgba(255, 255, 255, .06);
  --rail-active: rgba(255, 255, 255, .11);
}

/* ==========================================================================
   El raíl vuelve a resolver los tokens genéricos con su propia paleta.
   Es el mismo mecanismo del login congelado: `.sidebar` es un ancestro más
   cercano que `:root`, así que la caja de fichaje, las insignias, los botones
   y los menús que viven dentro se visten solos para el navy, sin duplicar una
   regla por componente. El cian del brandbook hace de «primario» aquí porque
   es el color accionable sobre navy en la web oficial; el azul #003BC8 no se
   distingue del fondo.
   ========================================================================== */
.sidebar {
  color-scheme: dark;

  --surface: var(--rail-bg-2);
  --surface-2: rgba(255, 255, 255, .06);
  --surface-3: rgba(255, 255, 255, .1);
  --surface-inset: rgba(0, 0, 0, .22);

  --border: var(--rail-line);
  --border-soft: rgba(255, 255, 255, .06);
  --border-strong: rgba(255, 255, 255, .22);

  --ink: var(--rail-ink);
  --ink-2: var(--rail-ink-2);
  --ink-3: var(--rail-ink-3);
  --ink-4: var(--rail-ink-4);
  --ink-invert: var(--rail-accent-ink);

  --primary: var(--rail-accent);
  --primary-hover: var(--rail-accent-hover);
  --primary-soft: rgba(20, 196, 237, .14);
  --primary-soft-2: rgba(20, 196, 237, .26);
  --primary-ink: var(--rail-accent-ink);

  --success: #3ad3b4;
  --success-soft: rgba(1, 181, 162, .2);
  --warning: #ffc75c;
  --warning-soft: rgba(250, 176, 32, .2);
  --danger: #ff8a8a;
  --danger-soft: rgba(255, 123, 123, .16);
  --neutral-soft: rgba(255, 255, 255, .1);

  --shadow-card: none;
  --shadow-xs: none;
  --ring: 0 0 0 3px rgba(20, 196, 237, .35);
}

/* Densidad compacta (Ajustes → Apariencia) */
[data-density="compact"] {
  --topbar-h: 54px;
  --s6: 18px; --s7: 24px; --s8: 32px; --s9: 38px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t: .01ms; --t-slow: .01ms; }
}

/* ==========================================================================
   LOGIN CONGELADO
   La pantalla de acceso queda tal cual estaba antes del rediseño. En vez de
   duplicar sus reglas, se le devuelven los tokens antiguos: `#login` es un
   ancestro más cercano que `:root`, así que todo su subárbol —incluidos los
   componentes compartidos: .input, .btn, .check, .badge— vuelve a resolver
   con la paleta, los radios y las sombras originales.

   No tocar sin querer cambiar el login.
   ========================================================================== */
#login {
  /* Radios originales */
  --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 26px;

  /* El botón táctil de Hubstaff se apaga aquí: el acceso conserva su gesto
     original —hundirse 1 px al pulsar— y no se levanta al pasar el cursor. */
  --btn-lift: 0px;
  --btn-press: 1px;
  --btn-drop: 0px;

  /* Paleta clara original */
  --bg: #e9eef7;
  --surface: #ffffff;
  --surface-2: #f3f7fd;
  --surface-3: #e7eef8;
  --surface-inset: #eff4fb;
  --surface-glass: rgba(255, 255, 255, .82);

  --border: #d8e1f0;
  --border-soft: #e5ebf6;
  --border-strong: #bfcbe2;

  --ink: #05092d;
  --ink-2: #333e60;
  --ink-3: #59647f;
  --ink-4: #8794b3;
  --ink-invert: #ffffff;

  --primary: #003bc8;
  --primary-hover: #0031a8;
  --primary-soft: rgba(0, 59, 200, .09);
  --primary-soft-2: rgba(0, 59, 200, .16);
  --primary-ink: #ffffff;

  --accent: #6d30ee;
  --accent-soft: rgba(109, 48, 238, .1);

  --success: #0a8f63;
  --success-soft: rgba(10, 143, 99, .11);
  --warning: #b45309;
  --warning-soft: rgba(180, 83, 9, .12);
  --danger: #cf2723;
  --danger-soft: rgba(207, 39, 35, .1);
  --info: #0b7fa8;
  --info-soft: rgba(11, 127, 168, .11);
  --neutral-soft: rgba(102, 114, 149, .1);

  --shadow-xs: 0 1px 2px rgba(5, 9, 45, .05);
  --shadow-sm: 0 1px 2px rgba(5, 9, 45, .05), 0 3px 8px rgba(5, 9, 45, .045);
  --shadow-md: 0 2px 4px rgba(5, 9, 45, .04), 0 10px 24px rgba(5, 9, 45, .07);
  --shadow-lg: 0 4px 8px rgba(5, 9, 45, .05), 0 24px 56px rgba(5, 9, 45, .12);
  --shadow-xl: 0 8px 16px rgba(5, 9, 45, .06), 0 40px 90px rgba(5, 9, 45, .18);
  --ring: 0 0 0 3px rgba(0, 59, 200, .2);
}

[data-theme="dark"] #login {
  --bg: #04081c;
  --surface: #0b1236;
  --surface-2: #101941;
  --surface-3: #17204e;
  --surface-inset: #070c26;
  --surface-glass: rgba(11, 18, 54, .84);

  --border: #223060;
  --border-soft: #182150;
  --border-strong: #33417e;

  --ink: #eef3ff;
  --ink-2: #c4cfef;
  --ink-3: #97a3c9;
  --ink-4: #74809f;
  --ink-invert: #05092d;

  --primary: #4d86ff;
  --primary-hover: #679bff;
  --primary-soft: rgba(77, 134, 255, .15);
  --primary-soft-2: rgba(77, 134, 255, .24);
  --primary-ink: #05092d;

  --accent: #9a6bff;
  --accent-soft: rgba(154, 107, 255, .16);

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, .15);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, .15);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, .15);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, .15);
  --neutral-soft: rgba(139, 151, 194, .14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 3px 8px rgba(0, 0, 0, .3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .42);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .4), 0 26px 60px rgba(0, 0, 0, .55);
  --shadow-xl: 0 8px 18px rgba(0, 0, 0, .45), 0 44px 96px rgba(0, 0, 0, .65);
  --ring: 0 0 0 3px rgba(77, 134, 255, .32);
}