/* Incremento visual 1 — fundamento visual compartido (docs/20-incremento-
   visual-1-fundamento-diseno.md, secciones 3.1-3.3). Única fuente de
   primitivos y tokens semánticos para los tres paneles (Cliente, Cocina,
   Personal/Gerencia). Cargado antes que el styles.css de cada panel. */

:root {
  --font-family-base: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Sora (--font-family-display) es la pila de títulos vigente en casi
     toda Cliente, no 4 pantallas. DM Sans sigue acotada a alias-form/
     group-entry-choice; Cocina/Personal/games.css siguen en Fraunces. */
  --font-family-display: 'Sora', var(--font-family-base);
  --font-family-body: 'DM Sans', var(--font-family-base);
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  /* Lluvia de ideas (lista nueva) -- formaliza un radio que ya se usaba
     como literal repetido (22px) en las superficies más grandes del
     Cliente (header.bar, .product-card): mismo valor, ahora sí parte real
     de la escala en vez de un número mágico sin nombre. */
  --radius-xl: 22px;
  --radius-pill: 999px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  --touch-target-min: 44px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Contienen exclusivamente el valor de duración, nunca la palabra clave
     de temporización — se consumen como
     `transition: filter var(--transition-duration-fast) ease`; si el
     primitivo incluyera "ease" dentro de su propio valor, esa declaración
     produciría "120ms ease ease", CSS inválido. El "ease" se escribe
     explícitamente en cada declaración `transition` de cada panel. */
  --transition-duration-fast: 120ms;
  --transition-duration-base: 150ms;

  --overlay-backdrop-bg: rgba(0, 0, 0, 0.5);

  /* Incremento visual 6 (docs/25 sección F.3) — retraso de revelación de
     skeletons; NUNCA anulado bajo prefers-reduced-motion (solo afecta
     animation-duration, nunca animation-delay). */
  --loading-reveal-delay: 150ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration-fast: 0.001ms;
    --transition-duration-base: 0.001ms;
  }
}

/* Tokens de núcleo — mismo nombre en los tres temas, valor propio.
   Alineación visual con la referencia aprobada de Cloud Menu (2026-09-15,
   docs/21 y siguientes -- imagen de referencia entregada por el dueño):
   crema cálido + carbón azulado reemplaza el neutro genérico anterior
   (#f6f5f1/#ffffff/#222222), como CANVAS COMPARTIDO de las 6 familias de
   tema del restaurante (verde/azul/rojo/rosa/monocromo-claro/oscuro) --
   ninguna de esas 6 familias toca page-bg/surface-bg/text-primary/
   text-secondary/border-color hoy (solo los dos pares de acento de marca),
   así que este cambio de base se aplica UNIFORME a cualquier restaurante
   sin excepción, sin reabrir el contraste ya auditado de cada familia
   (verificado abajo, WCAG real, nunca a ojo). `--action-primary-strong-bg`/
   `--action-emphasis-strong-bg` de este bloque base son el valor de
   PREDETERMINADO/DEMOSTRACIÓN de Cloud Menu (petróleo profundo + coral) --
   en la práctica SIEMPRE quedan sobrescritos por una de las 6 familias
   (`applyCustomerTheme()` en app.js agrega una clase `theme-family-*` sin
   excepción, con "verde" como respaldo), así que este cambio no altera el
   aspecto de ningún restaurante ya configurado; representa el "tema
   predeterminado Cloud Menu" mostrado en la captura dedicada de esta
   ronda. Contraste verificado con la fórmula WCAG real:
   #1f2e35 (texto) sobre #f7ecd9 (página) 11.97:1; sobre #fdf9f2
   (superficie) 13.34:1; #5c6b72 (texto secundario) sobre #f7ecd9 4.72:1,
   sobre #fdf9f2 5.26:1 -- los cuatro ≥4.5:1 AA. #0f565c (petróleo) contra
   blanco 8.38:1; #c8492f (coral) contra blanco 4.72:1 -- ambos ≥4.5:1 AA
   (el coral muestreado directo de la referencia, #d3513c/#da5c46, no
   alcanzaba 4.5:1; se oscureció el tono manteniendo la misma familia
   cromática, mismo criterio ya usado para el resto de acentos de este
   archivo). Los badges/chips pastel (--state-*-badge-bg, texto alias de
   --text-primary) se reverificaron contra el nuevo texto más oscuro: el
   más ajustado (--state-danger-badge-bg) pasa de 10.52:1 a 9.25:1, sigue
   muy por encima de AA. */
.theme-customer {
  --customer-text-scale: 1;
  --page-bg: #f7ecd9;
  --surface-bg: #fdf9f2;
  --text-primary: #1f2e35;
  --text-secondary: #5c6b72;
  --border-color: #e3d2ae;

  --action-primary-strong-bg: #0f565c;
  --action-primary-strong-text: #ffffff;

  --state-success-fg: #2a7a2a;
  --state-danger-fg: #b00020;

  --focus-ring-color: #0f565c;

  /* Incremento visual 6 (docs/25 sección J.2) — alias puro, sin hex nuevo. */
  --loading-placeholder-bg: var(--control-secondary-bg);
}

/* Primer incremento de dirección visual de Cocina (2026-09-18) --
   reemplaza el neutro genérico (#14181f/#1f2530, "azul marino de
   dashboard") por la MISMA superficie oscura cálida ya auditada de
   .theme-customer.reading-force-dark/prefers-color-scheme (líneas ~457-497
   -- carbón azulado con tinte cálido, nunca un negro nuevo sin probar).
   --action-primary-strong-bg pasa a petróleo (#0f565c, mismo valor que
   .theme-customer.theme-family-cloud-menu) -- se DESACOPLA a propósito de
   --state-success-strong-bg (Cocina, extensión más abajo), que se queda en
   su verde de siempre: ya eran dos tokens independientes por diseño (ver
   ese comentario), ahora también con valores distintos. Contraste real:
   #f2e9da sobre #12201f 13.93:1, sobre #1c2b29 12.22:1; #9fb0ac sobre
   #12201f 7.41:1, sobre #1c2b29 6.50:1; blanco sobre #0f565c 8.38:1 --
   los cuatro ≥4.5:1 AA. --focus-ring-color se conserva sin cambio (ya
   pasaba 5.9-6.7:1 contra ambos fondos nuevos, sin necesidad de retocarlo). */
.theme-kitchen {
  --page-bg: #12201f;
  --surface-bg: #1c2b29;
  --text-primary: #f2e9da;
  --text-secondary: #9fb0ac;
  --border-color: #2d3f3c;

  --action-primary-strong-bg: #0f565c;
  --action-primary-strong-text: #ffffff;

  --state-success-fg: #7fd88f;
  --state-danger-fg: #ff8a80;

  --focus-ring-color: #7aa2ff;

  /* Pedido explícito del dueño ("bonito, no agresivo, que atrape a todo
     público"): profundidad real en las tarjetas del tablero -- token
     propio (nunca un rgba() suelto en kitchen/styles.css) para que
     tests/kitchen-ui-visual4-css.test.ts ("cero literal de color/sombra
     fuera de var(...)") siga midiendo lo que de verdad importa: que
     ningún color nuevo se cuele SIN pasar por un token nombrado. */
  --shadow-card-strong: 0 2px 10px rgba(0, 0, 0, 0.28);

  /* Incremento visual 6 (docs/25 sección J.2) — alias puro, sin hex nuevo. */
  --loading-placeholder-bg: var(--border-color);
}

/* Primer incremento visual de Staff (shell/operación diaria) -- reutiliza
   EXACTOS los mismos valores claros ya auditados de .theme-customer
   (líneas ~90-104: crema/petróleo/carbón azulado), nunca un tono nuevo sin
   probar. A diferencia de Cocina, Staff conserva una superficie CLARA
   (nunca el fondo nocturno de Cocina -- pedido explícito). Contraste ya
   verificado ahí, mismos pares exactos: carbón #1f2e35 sobre crema
   #f7ecd9/superficie #fdf9f2 y blanco sobre petróleo #0f565c (8.38:1). */
.theme-staff {
  --page-bg: #f7ecd9;
  --surface-bg: #fdf9f2;
  --text-primary: #1f2e35;
  --text-secondary: #5c6b72;
  --border-color: #e3d2ae;

  --action-primary-strong-bg: #0f565c;
  --action-primary-strong-text: #ffffff;

  --state-success-fg: #2a7a2a;
  --state-danger-fg: #b00020;

  --focus-ring-color: #0f565c;

  /* Incremento visual 6 (docs/25 sección J.2) — alias puro, sin hex nuevo. */
  --loading-placeholder-bg: var(--border-color);

  /* MC4.5 -- acento cálido decorativo (halo de header, mancha ambiental),
     fijo en las 6 familias; nunca redefine estados de error/éxito/aviso. */
  --staff-ambient-warm: #c8492f;
}

/* Extensiones por tema — cada superficie declara su fondo y su texto,
   incluidos los casos donde el texto es un alias directo de
   --text-primary/--text-secondary. */
.theme-customer {
  /* Acción de énfasis (CTA) — distinta de la acción primaria de navegación */
  --action-emphasis-strong-bg: #b8501f;
  --action-emphasis-strong-text: #ffffff;

  /* Control neutro — .tabs button (inactivo). Texto: alias de --text-primary. */
  --control-secondary-bg: #e4e1d8;
  --control-secondary-text: var(--text-primary);

  /* Control sutil — .cart-item .remove, .status-line .cancel-request,
     .status-ENVIADO: mismo literal #eee, mismo rol "neutral/inactivo" en
     los tres. Texto: alias de --text-primary. */
  --control-subtle-bg: #eeeeee;
  --control-subtle-text: var(--text-primary);

  /* Badges de estado de pedido — fondo suave. Texto en los cinco: alias
     de --text-primary. */
  --state-warning-badge-bg: #ffe9c7;
  --state-warning-badge-text: var(--text-primary);
  --state-progress-badge-bg: #ffd7a8;
  --state-progress-badge-text: var(--text-primary);
  --state-success-badge-bg: #c9f2c9;
  --state-success-badge-text: var(--text-primary);
  --state-info-badge-bg: #b6e2ff;
  --state-info-badge-text: var(--text-primary);
  /* .error-banner + badges RECHAZADO/CANCELADO: mismo fondo suave de
     peligro, texto SIGUE siendo --text-primary (nunca #7a1c1c — ese color
     es un rol distinto, ver --action-urgent-soft-* abajo). */
  --state-danger-badge-bg: #f8c6c6;
  --state-danger-badge-text: var(--text-primary);

  /* Acción urgente (.help-btn-urgent) — ROL PROPIO, no un badge: mismo
     fondo hexadecimal que --state-danger-badge-bg por coincidencia, pero
     con su propio texto real (#7a1c1c). Nunca se fusiona con el token de
     arriba. */
  --action-urgent-soft-bg: #f8c6c6;
  --action-urgent-soft-text: #7a1c1c;

  --shadow-resting: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Incremento visual 5 — Diálogo 2 (Cancelación del Cliente) es el único
     diálogo destructive de Cliente; Cocina/Staff ya tenían este par. */
  --state-danger-strong-bg: #c0453f;
  --state-danger-strong-text: #ffffff;

  /* Rol propio del toast warning — nunca reutiliza --state-warning-badge-*
     (badge de estado de pedido, rol distinto). */
  --feedback-warning-bg: #fff3d6;
  --feedback-warning-text: #7a4b00;

  /* Alias puro hacia --surface-bg/--text-primary — el <textarea>
     compartido de dialog.css necesita el token definido en los tres
     temas aunque ningún diálogo de Cliente de este incremento lo use. */
  --field-bg: var(--surface-bg);
  --field-text: var(--text-primary);
}

/* Suite de experiencia del cliente (decisión 1 del dueño) — 5 familias
   comerciales, elegidas por GERENTE (Restaurant.customerTheme), aplicadas
   por `applyCustomerTheme()` en public/customer/app.js como una clase
   adicional sobre `.theme-customer`, nunca en su lugar. Compuesto con
   `.theme-customer` a propósito: la especificidad (0,2,0) gana sobre
   cualquiera de los dos bloques `.theme-customer` de arriba sin importar
   el orden, y el resto de tokens de Cliente (badges de estado, superficie,
   etc.) se hereda sin repetirlos aquí. Solo se tocan los DOS pares de marca
   (`--action-primary-strong-*`, `--action-emphasis-strong-*`) — nunca los
   tokens semánticos de éxito/error/deshabilitado, que siguen señalando su
   estado por opacidad/cursor además de color (ver `button:disabled` en
   public/customer/styles.css), no solo por el acento de marca.
   Contraste verificado ≥4.5:1 (AA texto normal) para cada par texto/fondo
   con una fórmula WCAG real, no a ojo. "verde" reafirma explícitamente los
   valores YA vigentes de `.theme-customer` (ningún restaurante existente
   cambia de aspecto al migrar) en vez de dejarlos implícitos. */
/* Pedido explícito del dueño, referencia real de la industria (Cash App/
   Duolingo/Notion): "un acento vibrante bien elegido" en vez de los
   tonos tierra apagados originales (verde bosque, azul marino, vino,
   granate) que el dueño describió como "no atrapan, parecen de tercera
   edad". Solo se toca `--action-primary-strong-bg` (el color de MARCA
   que varía por familia) -- `--action-emphasis-strong-bg` (el acento
   cálido de CTA, consistente entre familias, ya reutilizado hoy en chips
   de modificador/íconos del tutorial/enlace de reseña) se deja tal cual,
   a propósito: cambiarlo también reabriría contraste ya verificado en
   piezas de esta misma sesión sin necesidad real -- la queja del dueño
   era sobre el color de MARCA, no sobre el acento de acción. Cada valor
   nuevo verificado con la fórmula WCAG real (nunca a ojo) contra su
   propio texto blanco: verde 5.41:1, azul 5.17:1, rojo 4.83:1,
   rosa 4.60:1 -- los cuatro ≥4.5:1 AA. Ninguno de los dos modos
   (alto-contraste/oscuro forzado) toca action-primary-strong-*, así que
   un solo valor por familia cubre ambos. */
/* Séptima familia real (2026-09-16, migración 20260916000000_customer_
   theme_cloud_menu_default): apariencia predeterminada de fábrica --
   MISMOS valores del bloque base `.theme-customer` (líneas ~90-100),
   declarados explícitos porque applyCustomerTheme() SIEMPRE aplica una
   familia real. Contraste ya verificado ahí: 8.38:1/4.72:1 AA. */
.theme-customer.theme-family-cloud-menu {
  --action-primary-strong-bg: #0f565c;
  --action-primary-strong-text: #ffffff;
  --action-emphasis-strong-bg: #c8492f;
  --action-emphasis-strong-text: #ffffff;
}
.theme-customer.theme-family-verde {
  --action-primary-strong-bg: #0b7a43;
  --action-primary-strong-text: #ffffff;
  --action-emphasis-strong-bg: #b8501f;
  --action-emphasis-strong-text: #ffffff;
}
.theme-customer.theme-family-azul {
  --action-primary-strong-bg: #2563eb;
  --action-primary-strong-text: #ffffff;
  --action-emphasis-strong-bg: #a8460f;
  --action-emphasis-strong-text: #ffffff;
}
.theme-customer.theme-family-rojo {
  --action-primary-strong-bg: #dc2626;
  --action-primary-strong-text: #ffffff;
  --action-emphasis-strong-bg: #8a5a00;
  --action-emphasis-strong-text: #ffffff;
}
.theme-customer.theme-family-rosa {
  --action-primary-strong-bg: #db2777;
  --action-primary-strong-text: #ffffff;
  --action-emphasis-strong-bg: #8a5624;
  --action-emphasis-strong-text: #ffffff;
}
/* Monocromo — UNA familia comercial, dos presentaciones inversas (nunca un
   sexto concepto en la selección de GERENTE, que la ofrece como una sola
   tarjeta "Monocromo" con dos muestras). Sin tono de color en ninguna de
   las dos: los dos pares de marca son grises/blanco/negro puros, y la
   distinción con los estados deshabilitados sigue siendo por
   opacidad/cursor, no por ser ambos "grises". */
.theme-customer.theme-family-monocromo-claro {
  --action-primary-strong-bg: #111111;
  --action-primary-strong-text: #ffffff;
  --action-emphasis-strong-bg: #3a3a3a;
  --action-emphasis-strong-text: #ffffff;
}
.theme-customer.theme-family-monocromo-oscuro {
  /* Presentación invertida completa, no solo el acento. Corrección
     (revisión independiente de Codex, 2026-09-03): la primera versión
     invertía superficie/texto pero olvidaba `--text-secondary` (heredaba
     el valor del tema CLARO, ~2.66:1 sobre esta superficie oscura --
     ilegible incluso en modo normal, sin relación con el modo de alto
     contraste).

     Segunda corrección (encontrada verificando contraste en vivo,
     2026-09-05, a pedido explícito del dueño): esta familia es la única
     forma de tener una superficie oscura por ELECCIÓN DIRECTA del
     restaurante (no por accesibilidad del comensal), pero nunca recibió
     la misma corrección ya aplicada a reading-force-dark/prefers-
     color-scheme:dark más abajo -- dejaba state-success-fg/state-danger-
     fg (verdes/rojos pensados para fondo CLARO) casi ilegibles sobre esta
     superficie (2.87:1 y 2.10:1 medidos, muy por debajo de 4.5:1), y los
     chips/badges pastel (que nunca invierten su fondo) con texto casi
     invisible sobre sí mismos (1.13:1 y 1.00:1).

     Tercera corrección -- personalidad (2026-09-16): negro con tinte
     petróleo (nunca gris genérico) + texto crema, EXCLUSIVO de Cliente
     (Cocina/Staff sin tocar). WCAG real: texto 13.93:1/12.22:1, texto
     secundario 7.41:1/6.50:1, verde/rojo/foco sin cambiar (ya sobraba
     margen sobre la nueva superficie). */
  --page-bg: #12201f;
  --surface-bg: #1c2b29;
  --text-primary: #f2e9da;
  --text-secondary: #9fb0ac;
  --border-color: #2d3f3c;
  --action-primary-strong-bg: #f2f2f2;
  --action-primary-strong-text: #111111;
  --action-emphasis-strong-bg: #d9d9d9;
  --action-emphasis-strong-text: #111111;
  --state-success-fg: #7fd88f;
  --state-danger-fg: #ff8a80;
  --focus-ring-color: #7aa2ff;
  --control-secondary-text: #222222;
  --control-subtle-text: #222222;
  --state-warning-badge-text: #222222;
  --state-progress-badge-text: #222222;
  --state-success-badge-text: #222222;
  --state-info-badge-text: #222222;
  --state-danger-badge-text: #222222;
}

/* Panel de Staff (Gerencia/Mesero/Caja) sigue el customerTheme del
   restaurante — pedido explícito del dueño: cambiar el tema "solo tocaba
   botones/acentos, nunca el fondo", se veía "bien básico, poco trabajado".
   Aplicado por applyStaffTheme() en public/staff/app.js como clase
   adicional sobre `.theme-staff`, mismo patrón exacto que
   `.theme-customer.theme-family-*` arriba. A propósito solo se toca
   `--page-bg` (nunca `--action-primary-strong-bg`, la marca NAVY propia
   del panel de staff, independiente del restaurante -- ver `.theme-staff`
   arriba -- ni `--surface-bg`, que sigue blanco puro para que
   tablas/tarjetas mantengan el mismo contraste ya auditado). El tinte usa
   `color-mix()` sobre el MISMO hex de marca ya auditado en
   `.theme-customer.theme-family-*` (nunca un tono nuevo sin probar) a un
   6-7% sobre blanco -- a esa proporción el color de texto (#222222 sobre
   ~#fff) no pierde contraste real (la superficie se mantiene ~L*97+,
   muy por encima de cualquier umbral de AA para texto oscuro), así que no
   hace falta reverificar la fórmula WCAG para estos cinco pares. */
.theme-staff.theme-family-verde{ --page-bg: color-mix(in srgb, #0b7a43 7%, #ffffff); }
.theme-staff.theme-family-azul{ --page-bg: color-mix(in srgb, #2563eb 7%, #ffffff); }
.theme-staff.theme-family-rojo{ --page-bg: color-mix(in srgb, #dc2626 7%, #ffffff); }
.theme-staff.theme-family-rosa{ --page-bg: color-mix(in srgb, #db2777 7%, #ffffff); }
.theme-staff.theme-family-monocromo-claro{ --page-bg: color-mix(in srgb, #111111 5%, #ffffff); }
.theme-staff.theme-family-monocromo-oscuro {
  /* Mismos valores EXACTOS ya auditados de
     `.theme-customer.theme-family-monocromo-oscuro` arriba (4.88:1+ AA
     real, ver el comentario de esa familia) -- la única de las seis con
     superficie invertida, así que aquí SÍ hace falta reasignar el
     clúster completo de texto/superficie, no solo `--page-bg`. */
  --page-bg: #14181f;
  --surface-bg: #1f2530;
  --text-primary: #eeeeee;
  --text-secondary: #8892a0;
  --border-color: #444444;
  --state-success-fg: #7fd88f;
  --state-danger-fg: #ff8a80;
  /* Mismo problema que .theme-customer.theme-family-monocromo-oscuro ya
     documentó y corrigió arriba: estos tokens son ALIAS de --text-primary
     en el bloque .theme-staff base -- sin este pin de vuelta a #222222,
     heredarían el #eeeeee de arriba y quedarían casi ilegibles sobre sus
     propios fondos pastel/claros (que NUNCA se invierten). */
  --surface-muted-text: #222222;
  --surface-payments-soft-text: #222222;
  --field-text: #222222;
  --control-secondary-text: #222222;
  --state-warning-badge-text: #222222;
  --state-success-badge-text: #222222;
  --state-info-badge-text: #222222;
  --state-danger-badge-abandoned-text: #222222;
  --state-danger-row-text: #222222;
  --state-warning-row-text: #222222;
}

/* Decisión 13 del dueño — preferencia LOCAL de alto contraste, exclusiva de
   Cliente (`body.reading-high-contrast`, ver public/customer/app.js).
   Corrección (revisión independiente de Codex, 2026-09-03): esta regla NO
   puede fijar un color asumiendo una superficie clara -- "monocromo_oscuro"
   invierte `--surface-bg`/`--page-bg` a valores oscuros, y un texto oscuro
   sobre una superficie oscura da un contraste real de ~1.3:1, no ≥7:1. La
   primera versión midió el par aislado contra blanco, nunca la COMBINACIÓN
   real con la familia oscura -- error de composición de tokens, corregido
   aquí con una regla más específica que solo aplica en esa combinación.
   Contraste verificado con la fórmula WCAG real (no a ojo) para las DOS
   ramas: rama clara ≥11:1 contra `--surface-bg`/`--page-bg` claros (las
   otras 5 familias); rama oscura ≥14:1 contra los mismos tokens ya
   invertidos por "monocromo_oscuro". No toca ningún token semántico de
   éxito/error/deshabilitado. */
.theme-customer.reading-high-contrast {
  --text-secondary: #3a3630;
  --border-color: #000000;
}
.theme-customer.reading-high-contrast.theme-family-monocromo-oscuro {
  --text-secondary: #f5f5f5;
  --border-color: #ffffff;
}

/* Lluvia de ideas (lista nueva) -- modo noche, preferencia LOCAL de
   Cliente (ver public/customer/app.js, "Ajustes de lectura"). Reutiliza
   EXACTAMENTE la misma superficie oscura ya auditada de .theme-kitchen /
   .theme-family-monocromo-oscuro (mismo valor, nunca un negro nuevo) --
   solo invierte los tokens NEUTROS (superficie/texto/borde/textos de
   estado); el acento de marca de cada familia (verde/azul/rojo/rosa/
   monocromo) se conserva tal cual, igual que Cocina ya combina su propio
   acento con una superficie oscura sin problema. Dos formas de activarse,
   deliberadamente separadas en vez de una sola regla combinada -- "modo
   noche" puede venir del SISTEMA OPERATIVO (el dueño pidió explícitamente
   que se acople a la configuración del celular/PC) o de una elección
   MANUAL que la anula:
     1) Automático: sigue prefers-color-scheme, PERO nunca si el comensal
        ya eligió "siempre claro" a mano (reading-force-light).
     2) Forzado: reading-force-dark, sin importar el sistema operativo.
   Ninguna de las dos toca theme-family-monocromo-oscuro (ya está oscuro;
   los valores coinciden, así que aplicarlos de nuevo es un no-op inocuo,
   nunca un conflicto). reading-high-contrast en modo oscuro reutiliza la
   MISMA corrección que ya existía para monocromo-oscuro arriba (texto
   secundario/borde claros, nunca los valores de alto contraste pensados
   para una superficie CLARA).

   Corrección real encontrada probando en navegador (no solo en la prueba
   estática): --control-secondary-text/--control-subtle-text/--state-*-
   badge-text son alias de --text-primary (línea de arriba) porque en modo
   claro SIEMPRE fue un texto oscuro sobre un fondo pastel claro (chips de
   categoría, badges de estado) -- invertir --text-primary a un valor claro
   sin también fijar estos textos de vuelta a oscuro deja texto casi blanco
   sobre un fondo beige/pastel casi blanco, prácticamente invisible. Estos
   fondos pastel NO se invierten (siguen siendo "estampillas" claras y
   legibles encima de cualquier fondo, con o sin modo noche) -- solo su
   texto se fija de vuelta al literal oscuro de siempre, en vez de seguir
   la variable que ahora apunta a claro. --state-success-fg/--state-danger-
   fg SÍ cambian de valor (son texto plano sobre --surface-bg, que ahora es
   oscura) -- reutilizan los mismos verdes/rojos claros que .theme-kitchen
   ya usa sobre su propia superficie oscura, nunca un tono nuevo sin
   probar. Mismo criterio para --focus-ring-color. */
@media (prefers-color-scheme: dark) {
  .theme-customer:not(.reading-force-light) {
    /* Personalidad cálida (incremento "nav madre + Mi pedido",
       2026-09-16) -- mismos valores EXACTOS ya auditados de
       .theme-customer.theme-family-monocromo-oscuro (ver ese comentario
       para el detalle completo de contraste WCAG real). */
    --page-bg: #12201f;
    --surface-bg: #1c2b29;
    --text-primary: #f2e9da;
    --text-secondary: #9fb0ac;
    --border-color: #2d3f3c;
    --state-success-fg: #7fd88f;
    --state-danger-fg: #ff8a80;
    --focus-ring-color: #7aa2ff;
    --control-secondary-text: #222222;
    --control-subtle-text: #222222;
    --state-warning-badge-text: #222222;
    --state-progress-badge-text: #222222;
    --state-success-badge-text: #222222;
    --state-info-badge-text: #222222;
    --state-danger-badge-text: #222222;
  }
  .theme-customer:not(.reading-force-light).reading-high-contrast {
    --text-secondary: #f5f5f5;
    --border-color: #ffffff;
  }
}
.theme-customer.reading-force-dark {
  /* Personalidad cálida (incremento "nav madre + Mi pedido", 2026-09-16)
     -- mismos valores EXACTOS ya auditados de .theme-customer.theme-
     family-monocromo-oscuro (ver ese comentario para el detalle completo
     de contraste WCAG real). */
  --page-bg: #12201f;
  --surface-bg: #1c2b29;
  --text-primary: #f2e9da;
  --text-secondary: #9fb0ac;
  --border-color: #2d3f3c;
  --state-success-fg: #7fd88f;
  --state-danger-fg: #ff8a80;
  --focus-ring-color: #7aa2ff;
  --control-secondary-text: #222222;
  --control-subtle-text: #222222;
  --state-warning-badge-text: #222222;
  --state-progress-badge-text: #222222;
  --state-success-badge-text: #222222;
  --state-info-badge-text: #222222;
  --state-danger-badge-text: #222222;
}
.theme-customer.reading-force-dark.reading-high-contrast {
  --text-secondary: #f5f5f5;
  --border-color: #ffffff;
}

/* Lluvia de ideas (lista nueva) -- modo seguro para daltonismo, preferencia
   LOCAL de Cliente. La confusión real (protanopia/deuteranopia, ~99% de
   los casos de daltonismo) es entre ROJO y VERDE cuando se usan como
   pareja de estados opuestos (éxito vs. error) -- azul/naranja es la
   sustitución estándar de accesibilidad porque ambos matices permanecen
   distinguibles bajo cualquier tipo de daltonismo común. Se remplazan
   SOLO los tokens de éxito/error (los que de verdad compiten como pareja
   roja/verde en la misma pantalla) -- nunca los de advertencia ni info
   (state-warning-*, state-info-*), que ya usan matices distintos
   (ámbar/azul) sin conflicto, ni los destructivos fuertes ni de emergencia
   (state-danger-strong-*, action-urgent-soft-*): esos son una señal de
   "alto, esto es serio" en solitario, no una pareja roja/verde que un
   daltónico pueda confundir, y ya llevan texto explícito acompañando el
   color. (Nota: nunca escribir "--algo-*" seguido de "/" en un comentario
   CSS -- "*" + "/" cierra el comentario de golpe; así se rompió esta
   misma regla la primera vez, silenciosamente, sin ningún error de
   sintaxis visible.) */
.theme-customer.reading-colorblind-safe {
  --state-success-fg: #1c5f8a;
  --state-danger-fg: #8a4b00;
  --state-success-badge-bg: #cde7f5;
  --state-success-badge-text: var(--text-primary);
  --state-danger-badge-bg: #ffdcb0;
  --state-danger-badge-text: var(--text-primary);
}

.theme-kitchen {
  /* Campo de formulario — superficie propia, más oscura que --surface-bg */
  --field-bg: #10141a;
  --field-text: #ffffff;

  --state-warning-strong-bg: #e0a63c;
  --state-warning-strong-text: #000000;
  /* Alias exclusivo para uso como borde — .card.ACEPTADO. Nunca se usa
     --state-warning-strong-bg directamente en una propiedad de borde. */
  --state-warning-accent: var(--state-warning-strong-bg);

  --state-progress-strong-bg: #e08a3c;
  --state-progress-strong-text: #000000;
  --state-progress-accent: var(--state-progress-strong-bg);

  /* Éxito — rol semántico propio, distinto de la acción primaria aunque
     comparta hoy el mismo valor hexadecimal (#438142):
     --action-primary-strong-bg consume .login-box button;
     --state-success-strong-bg consume .btn-ready. Son dos tokens
     independientes, nunca el mismo, para que un cambio futuro de uno no
     arrastre al otro sin que nadie lo decida. */
  --state-success-strong-bg: #438142;
  --state-success-strong-text: #ffffff;
  --state-success-accent: var(--state-success-strong-bg);

  --state-danger-strong-bg: #c0453f;
  --state-danger-strong-text: #ffffff;

  --state-info-strong-bg: #2f68d1;
  --state-info-strong-text: #ffffff;

  --border-neutral: #888888;
  --border-sent: #999999;

  /* Incremento visual 5 — literal independiente para el tema oscuro,
     nunca var() hacia --state-warning-strong-bg: acoplaría el rol "estado
     de pedido" con el rol "toast de advertencia". */
  --feedback-warning-bg: #3a2f18;
  --feedback-warning-text: #e0a63c;

  /* Primer incremento visual de Cocina -- modificadores e indicaciones
     deben distinguirse entre sí y de los colores de ESTADO (warning/
     progress/success/danger, ya usados en botones/bordes) -- rol propio,
     nunca var() hacia esos. Coral (familia --action-emphasis-strong-bg de
     Cliente) para modificadores; petróleo claro para indicaciones. Ambos
     ≥4.5:1 contra --page-bg/--surface-bg (5.58/4.89 y 9.16/8.04). */
  --accent-modifier-text: #e8734a;
  --accent-note-text: #4fd1db;
}

.theme-staff {
  /* Coral -- énfasis de la ÚNICA acción de "comprometer el pedido" por
     bloque (Agregar/Guardar en el personalizador, Enviar pedido a cocina),
     mismo rol y mismo valor exacto que --action-emphasis-strong-bg de
     .theme-customer.theme-family-cloud-menu (ya verificado 4.72:1 AA
     contra blanco). Petróleo sigue siendo la estructura (nav, cabecera);
     coral solo marca ese momento puntual, nunca se reparte por todo el
     panel. */
  --action-emphasis-strong-bg: #c8492f;
  --action-emphasis-strong-text: #ffffff;

  --surface-muted-bg: #f4f5f7;
  --surface-muted-text: var(--text-primary);

  /* Superficie de pagos — .payments-row td. Texto: alias de
     --text-primary. */
  --surface-payments-soft-bg: #fafaff;
  --surface-payments-soft-text: var(--text-primary);

  /* Superficie de leyenda analítica — .an-legend. */
  --surface-legend-bg: #eef1f7;
  --surface-legend-text: var(--text-secondary);

  --field-bg: #f7f7f7;
  --field-text: var(--text-primary);

  --state-success-strong-bg: #438142;
  --state-success-strong-text: #ffffff;

  --state-danger-strong-bg: #c0453f;
  --state-danger-strong-text: #ffffff;

  --state-info-strong-bg: #2f68d1;
  --state-info-strong-text: #ffffff;

  /* Relleno de la barra horaria (.hourly-bar-rect) — rol propio de
     "gráfica", nunca --state-info-strong-bg reutilizado directamente:
     una gráfica no es una acción ni un estado del sistema, aunque hoy
     comparta el mismo azul corregido. */
  --chart-primary-fill: #2f68d1;

  /* Paleta categórica para gráficas con varias categorías sin orden ni
     jerarquía entre sí (dona de métodos de pago) -- pedido explícito del
     dueño (2026-09-05): diversificar las formas de gráfica más allá de
     barras. Alias puros hacia hexadecimales YA existentes en este mismo
     bloque (nunca un color crudo nuevo): ningún método de pago "significa"
     éxito/advertencia/pago como acción -- son solo 4 categorías que hay que
     poder distinguir entre sí a simple vista, reutilizando tonos que ya
     conviven bien en este panel. La leyenda de texto (nunca solo el color)
     sigue siendo la fuente real de qué segmento es cuál -- ver
     `donutChartHtml` en public/staff/app.js. */
  --chart-categorical-1: var(--chart-primary-fill);
  --chart-categorical-2: var(--action-force-strong-bg);
  --chart-categorical-3: var(--state-success-strong-bg);
  --chart-categorical-4: var(--action-payment-strong-bg);

  --state-warning-soft-bg: #fff3d6;
  --state-warning-soft-text: #7a4b00;

  --action-payment-strong-bg: #6b4fa0;
  --action-payment-strong-text: #ffffff;

  --action-force-strong-bg: #b8860b;
  --action-force-strong-text: #222222;

  /* Fondo deshabilitado de .btn-force-close:disabled — NUNCA
     --border-color, aunque comparta el literal #ccc: aquí la propiedad es
     `background`, no un borde, y el rol es "control inactivo", no "borde
     de campo". */
  --control-disabled-bg: #cccccc;
  --control-disabled-text: var(--action-force-strong-text);

  --control-secondary-bg: #e4e1d8;
  --control-secondary-text: var(--text-primary);

  /* Borde de jerarquía del árbol de Menú — mismo literal que
     --control-secondary-bg (#e4e1d8), rol distinto (acento de borde, no
     fondo de control). */
  --border-menu-accent: var(--control-secondary-bg);

  --state-warning-badge-bg: #ffe9c7;
  --state-warning-badge-text: var(--text-primary);
  --state-success-badge-bg: #dff5df;
  --state-success-badge-text: var(--text-primary);
  /* Mismo par ya auditado que .theme-customer (#b6e2ff, línea de arriba) --
     Staff nunca tuvo un badge "info" pastel propio hasta el aviso de
     pedidos LISTO (public/staff/readyAlert.js); reutiliza el hex existente
     en vez de inventar uno nuevo. */
  --state-info-badge-bg: #b6e2ff;
  --state-info-badge-text: var(--text-primary);
  --state-danger-badge-abandoned-bg: #ffcdd2;
  --state-danger-badge-abandoned-text: var(--text-primary);
  --state-danger-row-bg: #ffd6d6;
  --state-danger-row-text: var(--text-primary);
  --state-warning-row-bg: #fff3e0;
  --state-warning-row-text: var(--text-primary);

  --border-subtle: #eeeeee;

  --shadow-resting: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-raised: 0 4px 24px rgba(0, 0, 0, 0.25);

  /* Incremento visual 5 — alias directo: mismo rol ("superficie suave de
     advertencia") que Staff ya tiene, sin literal nuevo. */
  --feedback-warning-bg: var(--state-warning-soft-bg);
  --feedback-warning-text: var(--state-warning-soft-text);
}