/* ==========================================================================
   KREPKO · tokens de marca 2026
   ENCARGO F1-UI · Tanda 1 — 30/08/2026

   Capa de DEFINICIONES. No pinta nada por sí sola: no hay un solo selector
   de elemento aquí, solo variables. Enlazar este fichero en una página no
   cambia su aspecto — el aspecto cambia cuando algo CONSUME las variables.
   Eso es deliberado: permite introducir la paleta sin arrastrar a los 127
   gates del deploy, y hace el rollback trivial (quitar el <link>).

   Prefijo `--k-` (krepko) a propósito: `app.css` ya define 33 variables sin
   prefijo (--primary, --text, --border…). Sin prefijo, una de las dos capas
   pisaría a la otra en silencio según el orden de los <link>, que es
   exactamente el tipo de fallo que no da error y se descubre tarde.

   Paleta aprobada por Vincent el 29-30/08/2026. Fuente: los dos HTML de
   login (`krepko-login-claro.html` / `-oscuro.html`) + el encargo F1-UI.
   ========================================================================== */

:root {
  /* ---- Marca ---------------------------------------------------------- */
  --k-navy:          #0A2340;   /* tinta de marca, titulares, cabeceras     */
  --k-teal:          #12B8AB;   /* acentos, datos, foco, estado activo      */
  --k-teal-ink:      #0E9488;   /* teal legible sobre fondo claro (links)   */
  --k-naranja:       #FF8C42;   /* ÚNICO color de acción. Ver nota abajo.   */
  --k-naranja-hover: #F1772A;
  --k-rojo:          #D03B3B;   /* SOLO peligro/destructivo. Ver nota.      */
  --k-rojo-ink:      #B02F2F;   /* rojo legible sobre fondo claro           */

  /* ---- Superficies ----------------------------------------------------- */
  --k-lienzo:        #F6F7F9;   /* fondo de página                          */
  --k-superficie:    #FFFFFF;   /* tarjetas, tablas, modales                */
  --k-hairline:      #E7EAF0;   /* borde de 1px. Nunca un gris más oscuro.  */

  /* ---- Tinta ----------------------------------------------------------- */
  --k-ink:           #131A26;   /* texto principal                          */
  --k-ink-2:         #5C6675;   /* texto secundario, etiquetas              */
  --k-ink-3:         #95A0AE;   /* texto terciario, placeholders            */

  /* ---- Forma ----------------------------------------------------------- */
  --k-r:             12px;      /* radio por defecto (tarjeta, modal)       */
  --k-r-sm:          9px;       /* radio pequeño (botón, input, chip)       */
  --k-r-glass:       26px;      /* solo el cristal del login                */

  /* ---- Sombras --------------------------------------------------------- */
  --k-sh:            0 1px 3px rgba(10,35,64,.07), 0 1px 2px rgba(10,35,64,.04);
  --k-sh-md:         0 4px 12px rgba(10,35,64,.10);
  --k-sh-lg:         0 10px 30px rgba(10,35,64,.13);

  /* ---- Tipografía ------------------------------------------------------ */
  /* OJO (Tanda 0, punto 3): `smoke-editor-unidad.js` mide measureText con la
     fuente COMPUTADA y la compara contra el hueco de la celda «Ud.» (76px,
     calibrados el 23/08 con la fuente de hoy). La app resuelve hoy a Segoe UI
     — `-apple-system` y `BlinkMacSystemFont` no aplican en Chrome/Windows.
     Poner Inter primero en `body` cambia los anchos y ese gate se pone rojo
     LEGÍTIMAMENTE. Por eso estas variables existen pero NADIE las aplica al
     body todavía: solo las consume el login, que no tiene esa tabla. El paso
     a la app entera es Tanda 2, con el ancho de la columna re-medido. */
  --k-font-brand:    "Montserrat", "Arial Black", system-ui, sans-serif;
  --k-font-ui:       "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Cristal (login) -------------------------------------------------- */
  --k-glass:         rgba(255,255,255,.62);
  --k-glass-input:   rgba(255,255,255,.72);
  --k-glass-border:  rgba(255,255,255,.9);
  --k-glass-blur:    blur(20px) saturate(1.5);
  --k-glass-line:    rgba(19,26,38,.08);
}

/* ==========================================================================
   Modo oscuro — SOLO el login (decisión de Vincent, 29-30/08).
   El interior de la aplicación sigue en «blanco y limpio» y NO tiene modo
   oscuro: por eso estos overrides van bajo `.k-dark-scope`, no sueltos en
   :root. Un `@media (prefers-color-scheme:dark)` sin acotar alcanzaría a
   cualquier página que enlazara este fichero, que es justo lo que no se
   quiere.

   Dos vías, como el resto de la casa: la preferencia del sistema y un
   `data-theme` explícito que la pisa en ambos sentidos.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .k-dark-scope:not([data-theme="light"]) {
    --k-ink:          #F4F8FC;
    --k-ink-2:        rgba(233,241,249,.72);
    --k-ink-3:        rgba(233,241,249,.45);
    --k-lienzo:       #0A1420;
    --k-superficie:   #0E1B2A;
    --k-hairline:     rgba(255,255,255,.14);
    --k-teal-ink:     #3FD6C9;   /* el teal oscuro no se lee sobre navy */
    --k-rojo-ink:     #FF9B9B;
    --k-glass:        rgba(255,255,255,.09);
    --k-glass-input:  rgba(255,255,255,.07);
    --k-glass-border: rgba(255,255,255,.22);
    --k-glass-blur:   blur(22px) saturate(1.6);
    --k-glass-line:   rgba(255,255,255,.14);
  }
}

.k-dark-scope[data-theme="dark"] {
  --k-ink:          #F4F8FC;
  --k-ink-2:        rgba(233,241,249,.72);
  --k-ink-3:        rgba(233,241,249,.45);
  --k-lienzo:       #0A1420;
  --k-superficie:   #0E1B2A;
  --k-hairline:     rgba(255,255,255,.14);
  --k-teal-ink:     #3FD6C9;
  --k-rojo-ink:     #FF9B9B;
  --k-glass:        rgba(255,255,255,.09);
  --k-glass-input:  rgba(255,255,255,.07);
  --k-glass-border: rgba(255,255,255,.22);
  --k-glass-blur:   blur(22px) saturate(1.6);
  --k-glass-line:   rgba(255,255,255,.14);
}