/*
  repos-tokens.css — núcleo de identidad de Repos Software.

  Fuente única de verdad de color, tipografía y forma para TODOS los
  subsistemas: ReposApp (POS, KDS, Reportes, Configuración, Oficina),
  Online/ReposNube (landing y panel), los correos de Alertas Repos y el
  instalador. Esta hoja se importa ANTES que buttons.css / pos.css /
  config.css / reportes.css / kds.css / oficina.css.

  Dirección "Espectro" (B), aprobada 2026-09-09. El brief completo con el
  diagnóstico y las justificaciones está en docs/IDENTIDAD_REPOS.md.

  Regla que sostiene todo el sistema: el degradado cian→morado sólo se
  pinta en CUATRO superficies de marca — tarjeta del login, franja de
  encabezado de los correos, hero de la landing, pantalla del instalador.
  Nunca en un botón, nunca como fondo de una pantalla de trabajo, nunca
  detrás de texto pequeño.
*/

/*
  Fuentes autohospedadas. El servidor del restaurante puede operar sin
  internet, así que NO se enlaza a Google Fonts: los .woff2 viven en
  wwwroot/fonts, igual que Bootstrap y jQuery viven en wwwroot/lib. Ambas
  familias son SIL OFL 1.1 (licencias junto a los archivos).

  Hanken Grotesk es variable (un archivo cubre de 400 a 800). IBM Plex Mono
  va en tres pesos estáticos. De cada una se traen los subconjuntos latin y
  latin-ext y nada más — el resto (cirílico, vietnamita) sería peso muerto
  en una tablet de restaurante. Ver fonts/README.md para regenerarlos.

  font-display: swap — el texto se lee de inmediato con la letra del
  sistema y se recompone al llegar la fuente. En una terminal de venta,
  esperar a que cargue una fuente para poder leer un total no es opción.
*/

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-var-latin.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;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.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;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.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;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600-latin.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;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Marca. Muestreados del logotipo, no elegidos a mano. --- */
  --repos-cian-100: #e6f6fb;
  --repos-cian-200: #c2e9f4;
  --repos-cian-300: #8ad7ea;
  --repos-cian-400: #3fb8d8;
  --repos-cian-500: #0090b3; /* cian del logotipo */
  --repos-cian-600: #007695;
  --repos-cian-700: #005e79;
  --repos-cian-800: #04475b;
  --repos-cian-900: #072f3c;

  --repos-morado-100: #f7ecfa;
  --repos-morado-200: #ecd4f2;
  --repos-morado-300: #dbaee7;
  --repos-morado-400: #c07fd4;
  --repos-morado-500: #a24cbb;
  --repos-morado-600: #832e98; /* morado del logotipo */
  --repos-morado-700: #6a2379;
  --repos-morado-800: #4f1a5b;
  --repos-morado-900: #33113a;

  /* --- Neutros fríos. El 90% de cualquier pantalla. --- */
  --repos-gris-0: #ffffff;
  --repos-gris-50: #f5f7f9;
  --repos-gris-100: #eceff3;
  --repos-gris-200: #dde2e9;
  --repos-gris-300: #c3cad4;
  --repos-gris-400: #98a2b0;
  --repos-gris-500: #6f7b8b;
  --repos-gris-600: #515c6b;
  --repos-gris-700: #3a4350;
  --repos-gris-800: #262e39;
  --repos-gris-900: #1a2029;
  --repos-gris-950: #10141b;

  /* --- Roles, tema claro (Reportes, Configuración, Oficina, nube). --- */
  --repos-bg: var(--repos-gris-50);
  --repos-surface: var(--repos-gris-0);
  --repos-surface-raised: var(--repos-gris-0);
  --repos-border: var(--repos-gris-200);
  --repos-border-subtle: var(--repos-gris-100);
  --repos-fg: var(--repos-gris-900);
  --repos-fg-muted: var(--repos-gris-600);

  /* Acción: cian 600 mide 4.8:1 sobre blanco. */
  --repos-accent: var(--repos-cian-600);
  --repos-accent-fg: #ffffff;
  /* Inteligencia: Alertas Repos, pronóstico, food cost. NUNCA un botón
     primario — si el morado se gasta en acciones comunes deja de señalar
     lo que el sistema dedujo, que es el diferenciador de venta. */
  --repos-inteligencia: var(--repos-morado-600);

  --repos-success: #1a7d36;
  --repos-danger: #dc3545;
  --repos-info: var(--repos-cian-600);
  --repos-warning-bg: #fff8e1;
  --repos-warning-border: #e2c04a;
  --repos-warning-fg: #6b5200;

  --repos-shadow: rgba(16, 20, 27, 0.14);
  --repos-modal-overlay: rgba(16, 20, 27, 0.6);

  /* --- Superficie de marca. Sólo login, correo, hero e instalador. --- */
  --repos-degradado: linear-gradient(120deg, #0090b3 0%, #0e6f9f 40%, #5a4a95 70%, #832e98 100%);

  /* --- Tipografía. Ambas SIL OFL, autohospedadas en wwwroot/fonts: el
         servidor del restaurante puede no tener internet. --- */
  --repos-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --repos-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Forma. Dos sombras en todo el sistema; el resto se separa con borde. --- */
  --repos-radius-sm: 6px;
  --repos-radius-lg: 14px;
  --repos-elev-1: 0 1px 2px rgba(16, 20, 27, 0.08);
  --repos-elev-2: 0 6px 20px rgba(16, 20, 27, 0.14);

  /* buttons.css ya declara --pos-btn-radius; se unifica aquí en 10px. */
  --pos-btn-radius: 10px;
  --pos-btn-border: var(--repos-border);

  /* --- Header/login: ya NO es el navy #14213d suelto. La superficie
         oscura del shell es el neutro frío del sistema. --- */
  --repos-header-bg: var(--repos-gris-950);
  --repos-header-fg: var(--repos-gris-50);
}

/*
  Colores CON SIGNIFICADO — vocabulario aprendido por el mesero, no
  decoración. Vivían en pos.css (E19-02); se mueven aquí porque esta hoja
  es ahora la fuente única de color, pero sus VALORES no cambian: son
  insignias de color sólido con su propio contraste bg/fg ya resuelto, y
  por eso siguen fijas en los dos temas (invertir su luminosidad con el
  tema les rompería el significado sin ganar nada, porque no dependen del
  fondo de la página). Lo único que adoptan del sistema nuevo es el radio.
*/
:root {
  /* Estado de mesa (StatusMesa), ver
     Deprecated/ReposPOS/docs/windows/Shell-Seguridad-Sync-Reportes.md. */
  --mesa-abierta-bg: #ffffff;
  --mesa-abierta-fg: #696969;
  --mesa-cerrada-bg: #00bfff;
  --mesa-cerrada-fg: #ffffff;
  --mesa-reservada-anticipada-bg: #9acd32;
  --mesa-reservada-anticipada-fg: #ffffff;
  --mesa-reservada-expirada-bg: #000000;
  --mesa-reservada-expirada-fg: #ffffff;
  --mesa-en-preparacion-bg: #ee82ee;
  --mesa-en-preparacion-fg: #000000;
  --mesa-preparado-no-enviado-bg: #ffa500;
  --mesa-preparado-no-enviado-fg: #000000;
  --mesa-en-reparto-bg: #d3d3d3;
  --mesa-en-reparto-fg: #000000;
  --mesa-entrega-confirmada-bg: #008000;
  --mesa-entrega-confirmada-fg: #ffffff;

  /* Combo/Paquete (E03-08) — mismo criterio que --mesa-*. */
  --repos-combo-bg: #191970;
  --repos-combo-border: #daa520;
  --repos-combo-fg: #ffffff;
  --repos-paquete-bg: #9acd32;
  --repos-paquete-border: #b22222;
  --repos-paquete-fg: #1a1a1a;

  /* Formas de pago (Dialogo_Pagar) — chips pastel con su propio
     contraste. Border/texto fijos aparte (no --repos-success/--repos-info,
     que sí cambian con el tema) para no perder contraste contra un fondo
     pastel que se queda fijo. */
  --forma-pago-extranjera-bg: #eaf7ee;
  --forma-pago-extranjera-fg: #1a7d36;
  --forma-pago-credito-bg: #eaf0ff;
  --forma-pago-credito: #005dff;
  --forma-pago-debito-bg: #e6fbfb;
  --forma-pago-debito-border: #17a2b8;
  --forma-pago-debito-fg: #0f6674;
  --forma-pago-puntos-bg: #f4eaff;

  /* Tamaño mínimo de tile de mesa, validado en el sistema legado. */
  --mesa-tile-min: 160px;
  --mesa-tile-min-height: 100px;
}

/*
  Tema oscuro — POS y KDS por omisión (salón a media luz, pantalla de
  cocina vista a distancia). Se conserva el contrato de 3 capas que ya
  implementó E19-03: valores claros en :root, oscuros bajo
  prefers-color-scheme para quien no forzó claro, y otra vez bajo
  [data-theme="dark"] para que la elección manual gane.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --repos-bg: var(--repos-gris-950);
    --repos-surface: var(--repos-gris-900);
    --repos-surface-raised: #212a35;
    --repos-border: #2c3542;
    --repos-border-subtle: #20262f;
    --repos-fg: #eef1f5;
    --repos-fg-muted: var(--repos-gris-400);
    --repos-accent: var(--repos-cian-400);
    --repos-accent-fg: #06222c;
    --repos-inteligencia: var(--repos-morado-400);
    --repos-success: #3fb26a;
    --repos-danger: #e5566a;
    --repos-info: var(--repos-cian-400);
    --repos-warning-bg: #3a3320;
    --repos-warning-border: #c9a227;
    --repos-warning-fg: #e6cf8a;
    --repos-shadow: rgba(0, 0, 0, 0.6);
    --repos-modal-overlay: rgba(8, 10, 16, 0.7);
  }
}

:root[data-theme="dark"] {
  --repos-bg: var(--repos-gris-950);
  --repos-surface: var(--repos-gris-900);
  --repos-surface-raised: #212a35;
  --repos-border: #2c3542;
  --repos-border-subtle: #20262f;
  --repos-fg: #eef1f5;
  --repos-fg-muted: var(--repos-gris-400);
  --repos-accent: var(--repos-cian-400);
  --repos-accent-fg: #06222c;
  --repos-inteligencia: var(--repos-morado-400);
  --repos-success: #3fb26a;
  --repos-danger: #e5566a;
  --repos-info: var(--repos-cian-400);
  --repos-warning-bg: #3a3320;
  --repos-warning-border: #c9a227;
  --repos-warning-fg: #e6cf8a;
  --repos-shadow: rgba(0, 0, 0, 0.6);
  --repos-modal-overlay: rgba(8, 10, 16, 0.7);
}

/*
  Base tipográfica. Hoy NINGUNA hoja declara font-family: el producto se
  ve con la letra que le toque al sistema operativo de cada terminal.
  Esta es la línea que más cambia la percepción del sistema por sí sola.
*/
body {
  font-family: var(--repos-font);
  background: var(--repos-bg);
  color: var(--repos-fg);
}

/* Todo importe, cantidad, hora y folio en cifras de ancho fijo. */
.repos-cifra,
.caja-linea__monto,
.caja-linea__precio,
.caja-totales__fila,
.reporte-card__valor,
.pos-header__clock {
  font-variant-numeric: tabular-nums;
}

/* Superficie de marca. Las cuatro únicas apariciones del degradado. */
.repos-marca {
  background: var(--repos-degradado);
  color: #ffffff;
}

/* Señal de "el sistema dedujo esto" — Alertas Repos y avisos de costeo. */
.repos-inteligencia {
  border-color: var(--repos-morado-300);
  background: var(--repos-morado-100);
  color: var(--repos-morado-800);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .repos-inteligencia {
    border-color: var(--repos-morado-700);
    background: var(--repos-morado-900);
    color: var(--repos-morado-200);
  }
}

:root[data-theme="dark"] .repos-inteligencia {
  border-color: var(--repos-morado-700);
  background: var(--repos-morado-900);
  color: var(--repos-morado-200);
}