/*
  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);

  /* --- Espaciado. Escala de 4 pasos (E03-108): los huecos entre bloques
         de una pantalla se miden con esto, no con rem sueltos. --- */
  --repos-space-1: 0.25rem;
  --repos-space-2: 0.5rem;
  --repos-space-3: 0.75rem;
  --repos-space-4: 1rem;

  /* --- Objetivos táctiles (E03-111, REVISION_DISENO_POS §1). 44px es el
         piso de cualquier cosa que se toca con el dedo (WCAG 2.2 AAA);
         48px es la fila seleccionable de una lista. Todo mínimo táctil
         que no sea un .pos-btn se mide con estos dos, no con rem. --- */
  --repos-touch-min: 44px;
  --repos-touch-row: 48px;

  /* --- 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);

  /* Pantalla de cocina (KDS, 2026-09-25): la cabecera de cada orden va del
     color de su espera, para leerse a dos metros. Gris a tiempo, ámbar desde
     el parámetro 217 y rojo desde el 218. El ámbar es el único color fuera
     del espectro: es aviso, y el amarillo pastel de --repos-warning-bg no se
     distingue de lejos. */
  --repos-kds-atiempo-bg: var(--repos-gris-700);
  --repos-kds-atiempo-fg: var(--repos-gris-0);
  --repos-kds-advertencia-bg: #f2a900;
  --repos-kds-advertencia-fg: var(--repos-gris-900);
  --repos-kds-retraso-bg: #c62835;
  --repos-kds-retraso-fg: var(--repos-gris-0);
  --repos-kds-nueva: var(--repos-morado-600);
}

/*
  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;
  /* E21-58 — la mesa que un comensal inició desde su QR y nadie ha tomado:
     no es un StatusMesa, es un pedido esperando mesero; la ven todos. */
  --mesa-qr-bg: #ffd700;
  --mesa-qr-fg: #1a1a1a;

  /* 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) — el color de cada tipo, que desde
     2026-09-25 va como franja a la izquierda del botón (pos.css), no como
     relleno pastel: el relleno se leía como «ya elegida». */
  --forma-pago-extranjera-fg: #1a7d36;
  --forma-pago-credito: #005dff;
  --forma-pago-debito-border: #17a2b8;

  /* Papel del cheque (E04-17) — la vista previa es el rollo térmico: blanco
     con tinta oscura en los DOS temas, como sale impreso. Un cheque pintado
     con el tema oscuro no se parecía al papel que se lleva el cliente. */
  --repos-papel-bg: var(--repos-gris-0);
  --repos-papel-fg: var(--repos-gris-950);
  --repos-papel-borde: var(--repos-gris-300);
  --repos-papel-sombra: 0 6px 20px rgba(0, 0, 0, 0.35);

  /* E00-53 — los colores que vivían sueltos en las hojas de componentes
     y en la vista de Caja. Mismo valor que tenían, fijo en los dos temas
     como lo era el literal. */
  /* Texto sobre un relleno sólido (éxito, peligro, acento, la línea
     enviada): blanco también en oscuro, como el #fff de antes. */
  --repos-fg-sobre-relleno: var(--repos-gris-0);
  /* Grupo sin color propio (ColorTile.Resolver: Gainsboro con texto
     oscuro), el mismo par que pinta el botón «Todos» de Caja. */
  --repos-grupo-sin-color-bg: #dcdcdc;
  --repos-grupo-sin-color-fg: #1a1a1a;
  /* Borde del combo sugerido en Caja (E05-17, .caja-sugerencias__combo). */
  --repos-sugerencia-combo-borde: #48bb78;
  /* Fecha del movimiento de efectivo (Retiros y depósitos). */
  /* 2026-09-26 (decisión del dueño) — la fecha en gris: el naranja parecía aviso. */
  --repos-movimiento-fecha: var(--repos-fg-muted);
  /* El marco del QR es parte del código: blanco en los dos temas. */
  --repos-qr-marco: var(--repos-gris-0);
  /* Tarjeta y tabla de reporte en papel (@media print). */
  --repos-impresion-bg: var(--repos-gris-0);
  --repos-impresion-fg: #000000;
  --repos-impresion-borde: #cccccc;

  /* 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);
}

/*
  Oficina (E22-07) — los valores propios del puesto de atrás, con el mismo
  contrato de tres capas. Vivían en oficina.css; se mudan aquí (E00-53)
  porque esta hoja es la fuente única de color. Sus valores no cambian.
*/
:root {
  /* Tinte de encabezado y pie de tabla: medio escalón entre la superficie
     elevada y el fondo, para que la fila fija y el total se despeguen sin
     una línea más. */
  --of-tint: #fafbfc;
  /* Renglón bajo el cursor y renglón que pide atención. Son fondos de
     fila, no semántica de estado: el estado siempre va además escrito. */
  --of-row-hover: #f6f9fe;
  --of-row-atencion: #fffdf6;
  --of-rail-fg: #c9d2e6;
  --of-rail-fg-muted: #8f9bb8;
  --of-rail-linea: rgba(255, 255, 255, 0.1);
  --of-rail-chip: rgba(255, 255, 255, 0.14);
  --of-chip-ok-bg: #eaf7ee;
  --of-chip-ok-fg: #14602a;
  --of-chip-ok-borde: #cfe4d6;
  --of-chip-danger-bg: #fdeaec;
  --of-chip-danger-fg: #a51d29;
  /* El número del rail sobre el ámbar de --repos-warning-border. */
  --of-rail-cuenta-fg: #3b2c00;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --of-tint: #20242c;
    --of-row-hover: #2d3340;
    --of-row-atencion: #33301f;
    --of-chip-ok-bg: #1e3a26;
    --of-chip-ok-fg: #7fd39a;
    --of-chip-ok-borde: #2c5637;
    --of-chip-danger-bg: #3a1d22;
    --of-chip-danger-fg: #f4a3ae;
  }
}

:root[data-theme="dark"] {
  --of-tint: #20242c;
  --of-row-hover: #2d3340;
  --of-row-atencion: #33301f;
  --of-chip-ok-bg: #1e3a26;
  --of-chip-ok-fg: #7fd39a;
  --of-chip-ok-borde: #2c5637;
  --of-chip-danger-bg: #3a1d22;
  --of-chip-danger-fg: #f4a3ae;
}

/*
  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);
}