/* La letra de la marca (Toki, entrega del diseñador del 13/10). Tiene que ir
   antes que cualquier regla. Si no baja —el local sin internet— las pantallas
   siguen con la del sistema, que es la que sigue en --tipo. */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;600;700&display=swap');

/**
 * Las decisiones visuales de Tablero, en un solo lugar.
 *
 * Hasta acá cada pantalla elegía sus colores por su cuenta: nueve archivos,
 * 2.188 líneas de estilo, y ni una compartida. El resultado era que la caja
 * tenía el acento azul y el mozo verde petróleo; que el gris del fondo era
 * #f8fafc en una y #f6f7f9 en la otra —casi igual, que es peor que distinto a
 * propósito, porque no parece una decisión sino un descuido—; y que cambiar el
 * color del producto significaba buscar a mano en nueve lugares.
 *
 * Acá viven las DECISIONES, no el dibujo. El estilo de las mesas, del carrito
 * y de la fila sigue en su pantalla: lo que se comparte es el vocabulario.
 *
 * Se sirve como archivo suelto, al lado del sw.js. Sin paso de compilación y
 * sin herramienta nueva, igual que el resto del proyecto: una pantalla es un
 * HTML que se abre y anda.
 */

:root {
  /* ── La escala de grises ────────────────────────────────────────────────
     Toda de la misma familia y no grises neutros mezclados. Es la diferencia
     entre una pantalla que se ve armada y una que se ve juntada: el fondo, el
     borde y el texto tenue tienen que venir del mismo lado.

     Cálida y no azulada. Antes era un slate con punta de azul, que se lee como
     pantalla de oficina; esto es un café. El texto se entibia junto con el
     resto: un negro azulado sobre un fondo cálido se ve sucio. */
  /* Toki (13/10): un neutro con punta de verde, de la misma familia que la
     marca. Los valores de 100, 200, 500, 600 y 900 son los del diseñador
     (fondo, borde, tenue, segundo, texto); el resto, interpolados entre ellos. */
  --gris-50:  #f7f8f3;
  --gris-100: #f1f2ec;
  --gris-200: #dce0d6;
  --gris-300: #c3c9bc;
  --gris-400: #9aa393;
  --gris-500: #5f6959;
  --gris-600: #4a5246;
  --gris-700: #363d33;
  --gris-800: #252a22;
  --gris-900: #1a1e17;

  /* ── Qué papel cumple cada uno ──────────────────────────────────────────
     Los nombres son por función y no por color: el día que el fondo deje de
     ser gris, `--fondo` sigue queriendo decir lo mismo y `--gris-50` no. */
  /* El fondo es un gris de VERDAD, no un blanco apenas teñido. Antes era
     #f8fafc contra paneles #fff: dos blancos separados por nada, así que los
     paneles no se leían como superficies apoyadas sobre algo. No faltaba
     color, faltaba suelo. */
  --fondo:       var(--gris-100);
  /* El panel no entra en la escala: es el papel sobre el que se escribe, y por
     eso es casi blanco pero cálido. Un #fff puro encima de un fondo cálido se
     ve azul. */
  --panel:       #fcfdfa;
  --borde:       var(--gris-200);
  --borde-suave: var(--gris-50);
  --texto:       var(--gris-900);
  --segundo:     var(--gris-600);
  --tenue:       var(--gris-500);
  --apagado:     var(--gris-400);

  /* El acento. Cada pantalla todavía pisa el suyo —la caja azul, el mozo
     verde— porque cuál es EL color del producto es una decisión de diseño y
     no de plomería. El día que se elija, se cambia acá y listo. */
  /* "Monte", el verde oscuro de Toki. NO es el verde del logo: ese es casi el
     de "mesa libre", y en la caja los dos se confundirían (--logo-yerba). */
  --acento:        #1a5a3e;
  --acento-alto:   #134630;
  --acento-suave:  #e3efe6;
  --acento-borde:  #b9d6c2;
  --acento-texto:  #fff;
  /* Sólo para el logo y piezas de marca. Nunca de fondo de un botón en la
     caja, el mozo o la cocina. */
  --logo-yerba:    #3bb36b;

  /* Estado. Tres y no más: lo que salió bien, lo que pide atención, lo que
     está mal. Un cuarto color de estado no lo distingue nadie de reojo. */
  --ok:      #147a3a;
  --aviso:   #a74d08;
  --peligro: #c81e1e;

  /* Los estados de la mesa. NO son la marca y no cambian con ella: el mozo
     lee "libre / ocupada / pidió la cuenta" por el color, de reojo, en pleno
     servicio. Antes estaban escritos a mano en la caja. */
  --mesa-libre:          #16a34a;
  --mesa-libre-borde:    #15803d;
  --mesa-ocupada:        #dc2626;
  --mesa-ocupada-borde:  #b91c1c;
  --mesa-cuenta:         #f59e0b;
  --mesa-cuenta-borde:   #d97706;
  --mesa-cuenta-tinta:   #78350f;

  /* Un botón que todavía no se puede apretar. */
  --deshabilitado: #cbd5e1;

  /* Los gráficos del backoffice salen del acento, mezclado con el papel: el
     día que cambia la marca cambian solos. Antes eran cinco violetas a mano. */
  --graf-1: var(--acento-alto);
  --graf-2: var(--acento);
  --graf-3: color-mix(in srgb, var(--acento) 65%, var(--panel));
  --graf-4: color-mix(in srgb, var(--acento) 40%, var(--panel));
  --graf-5: color-mix(in srgb, var(--acento) 20%, var(--panel));
  --graf-area:  color-mix(in srgb, var(--acento) 10%, var(--panel));
  --graf-punto: color-mix(in srgb, var(--acento) 55%, var(--panel));
  --graf-col:   color-mix(in srgb, var(--acento) 28%, var(--panel));

  /* ── Tipografía ─────────────────────────────────────────────────────────
     La del sistema, a propósito: es la única que ya está instalada en la PC
     del local, no hay que descargar nada y se ve como se ve todo lo demás en
     esa máquina. Una fuente que tarda en bajar deja la pantalla saltando a
     mitad de una venta.

     La escala son seis tamaños, no veinte. Hoy hay números sueltos —11.5, 12.5,
     13, 14, 15, 17, 18, 22, 26, 30, 32, 38— elegidos de a uno: nada dice cuál
     usar y cada pantalla inventa el suyo. */
  --tipo: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-mini:   12px;   /* etiquetas, rótulos en mayúscula */
  --t-chico:  13.5px; /* lo secundario: el detalle abajo de un nombre */
  --t-base:   15px;   /* el texto de todos los días */
  --t-medio:  18px;   /* títulos de sección, botones importantes */
  --t-grande: 24px;   /* el título de un panel */
  --t-cifra:  34px;   /* la plata. Es lo único que se lee a un metro */

  /* ── Espacio ────────────────────────────────────────────────────────────
     Una escala, porque el ojo nota cuando dos separaciones parecidas no son
     iguales, y hoy conviven 6, 8, 9, 10, 12, 14, 16 y 20 sin criterio. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;

  /* ── Formas y medidas ───────────────────────────────────────────────────
     `--toque` es cuánto mide lo que se aprieta. Cambia por pantalla y con
     razón: la cocina son manos mojadas y apuradas, la caja es un mouse. */
  --radio-chico:  8px;
  --radio:       12px;
  --radio-grande:18px;
  --toque:       46px;
}

/* ── El modo oscuro ───────────────────────────────────────────────────────
   No es un tema que el usuario elige: son las pantallas que se miran de lejos
   y sin tocar —la cocina, la entrega, la tele de la pared, el fichaje—. En un
   local con las luces bajas, una pantalla blanca de 24" encandila y tapa lo
   único que importa, que son los números grandes.

   Se prende con  <html data-tema="oscuro">  y redefine SÓLO los papeles: la
   escala de grises de arriba no se toca, así que no hay dos paletas que
   mantener sincronizadas.

   Los colores de estado cambian de tono a propósito: el verde #15803d que se
   lee perfecto sobre blanco desaparece sobre un fondo casi negro. */
[data-tema="oscuro"] {
  --fondo:       #0f130e;
  --panel:       #1a2018;
  --panel-alto:  #232b21;
  --borde:       #2e372b;
  --borde-suave: #232b21;
  --texto:       #eef0e8;
  --segundo:     #bfc7b8;
  --tenue:       #8e9886;
  --apagado:     #646d5e;

  /* En oscuro la marca es un verde claro, con letra oscura encima. */
  --acento:       #bfe3cb;
  --acento-alto:  #d6eedd;
  --acento-suave: #1c2a21;
  --acento-borde: #3b5a45;
  --acento-texto: #0f130e;

  --ok:      #22c55e;
  --aviso:   #f59e0b;
  --peligro: #f25c5c;
}

/* ── Lo poco que conviene que sea igual en todas ──────────────────────────
   Tres cosas, y las tres porque olvidarlas ya costó caro. */

/* El anillo de foco. No existía en ningún botón de la caja: apretar Tab no
   cambiaba nada en pantalla, así que no había forma de saber dónde estabas
   parado y el teclado servía sólo donde hubiera un atajo explícito.

   `:focus-visible` y no `:focus` para que aparezca al tabular y no al hacer
   clic: un anillo alrededor de cada botón recién clickeado es ruido. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Menos el diálogo, donde el foco se pone por código para que Tab arranque
   adentro y no en el fondo de la pantalla. Ahí el anillo no señala nada. */
dialog:focus, dialog:focus-visible { outline: none; }

/* La respuesta del mouse. El dedo no tiene hover, así que el diseño nunca lo
   necesitó; con mouse es la señal gratis que dice "esto se aprieta" ANTES de
   comprometerse, y sin ella hay que apuntar y clickear para averiguar.

   Se oscurece con una sombra interior y no cambiando el fondo, porque los
   botones tienen diez fondos distintos —blanco, gris, azul pleno, rojo— y un
   color fijo los rompería a la mitad. */
@media (hover: hover) {
  button:hover:not(:disabled) { box-shadow: inset 0 0 0 999px rgba(15, 23, 42, .05); }
  [data-tema="oscuro"] button:hover:not(:disabled) { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .06); }
}

/* Que `hidden` gane siempre. Sin esto, cualquier regla que ponga `display` a
   un elemento lo deja visible aunque el código lo haya escondido, y el bug se
   ve como "la pantalla muestra algo que no debería" sin pista de por qué. */
[hidden] { display: none !important; }