/* Sistema de diseño de La Barra.
 *
 * LA METÁFORA ES UNA LIBRETA, Y NO ES UN ADORNO: ES EL MODELO DE DATOS.
 *
 * En esta aplicación no hay campo `stock` ni saldo guardado. Las existencias
 * son `SUM(cantidad)` y el bote es `SUM(importe_cents)`; corregir no borra,
 * escribe el apunte contrario y los dos quedan a la vista. Eso ES una libreta
 * de cuentas, así que la pantalla se parece a una: renglones con un filete de
 * margen a la izquierda, líneas finas en vez de tarjetas dentro de tarjetas, y
 * un apunte corregido que se TACHA con su contrario debajo, nunca uno que
 * desaparece.
 *
 * Es hermana del jukebox a propósito (`D:\MINIMAX\jukebox`): mismo papel y
 * misma tinta, hexadecimal por hexadecimal. Las dos las usa la misma gente en
 * el mismo sitio y tienen que parecer la misma casa. Lo que cambia es el
 * oficio: allí las tarjetas son de una gramola, aquí son de un libro.
 *
 * POR QUÉ AHORA HAY COLOR
 *
 * Esto nació en blanco y negro: papel, tinta, y el ámbar del dinero. Sobre el
 * papel es lo correcto y se defiende solo. Delante de la nevera, no: quien usa
 * esto lleva toda la vida apuntando en una libreta de verdad, no distingue una
 * pantalla de otra —las tres son papel beige con letras negras— y no sabe qué
 * de todo lo que ve se puede tocar, porque en una libreta no se toca nada.
 *
 * Así que el color entra, y entra con un trabajo asignado a cada uno. Un color
 * que no contesta a una pregunta es decoración, y la decoración aquí estorba.
 *
 * LAS CUATRO REGLAS QUE NO SE ROMPEN
 *
 *   1. EL ÁMBAR ES EL DINERO, Y SOLO EL DINERO. Precio, bote, lo que dejas.
 *      Nunca un botón, nunca un título, nunca «queda poco». Un local que
 *      funciona con la palabra de doce personas no se puede permitir que la
 *      cifra se confunda con otra cosa. Es la regla que MÁS aprieta ahora que
 *      hay color por todas partes, no la que menos. Sobre papel el ámbar no se
 *      lee como texto (1,9:1): si hace falta ámbar en texto se usa
 *      `--ambar-tinta`, que es el mismo color bajado hasta poder leerse.
 *   2. EL COLOR DE LA CASA CONTESTA DOS PREGUNTAS, Y NADA MÁS: «¿dónde estoy?»
 *      y «¿qué puedo pulsar?». Cada pantalla tiene el suyo —verde «Me sirvo»,
 *      azul «La libreta», ciruela «El local»— y lo llevan la cabecera y TODO
 *      lo pulsable de esa pantalla. Un texto que no se pulsa no lleva el color
 *      de la casa; si lo lleva, alguien lo va a tocar.
 *   3. LO PULSABLE PARECE UNA TECLA. Borde inferior grueso y oscuro, y se
 *      hunde al pulsarlo. El color por sí solo no dice «púlsame» a quien no ha
 *      usado nunca una aplicación; un bulto sí, y lo dice desde antes de que
 *      existieran las pantallas.
 *   4. LAS CIFRAS VAN EN MONOESPACIADA Y TABULAR. Los números son la máquina;
 *      los nombres son las personas y van en la de siempre. Una columna de
 *      euros que no alinea las comas se lee mal, y aquí leer mal es dinero de
 *      alguien.
 *
 * Y una quinta que solo vive en la carta de «Me sirvo»: cada CATEGORÍA tiene
 * su color, para que la nevera se encuentre por manchas y no leyendo. Va en el
 * filete de la izquierda y en el rótulo del grupo — nunca en el botón, que es
 * de la casa.
 *
 * Antes esto heredaba los tokens de `carmen` tal cual, con fichas de mesa,
 * chips de camarero, control segmentado y carril de pasos. La Barra no tiene
 * mesas, ni camareros, ni pasos: todo aquello se ha ido.
 */

:root {
  /* El papel. Cálido, no blanco de oficina: se mira a media luz y con el
     brillo del móvil bajo. Mismos valores que el jukebox. */
  --fondo: #f1ede7;
  --papel: #fffefc;
  --linea: #e4ded6;
  /* El filete del margen de la libreta. Es la única línea que pesa. */
  --margen: #cfc6ba;

  /* La tinta. Negro cálido con algo de ciruela. */
  --tinta: #221b26;
  --tinta-suave: #6b6270;

  /* EL DINERO. Regla 1. */
  --ambar: #f2a13b;
  --ambar-tinta: #8a4a00;
  --ambar-suave: #fdf3e6;

  /* Se está acabando, o algo ha ido mal. */
  --brasa: #b93415;
  --brasa-suave: #fbeae5;

  /* Cuadra. */
  --valido: #1d6b45;
  --valido-suave: #eaf3ee;

  --maquina: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --gente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 36px;

  /* 44 es el mínimo de una aplicación normal. Aquí se pulsa con los guantes de
     moto puestos, y eso lo mide la spec, no el gusto. */
  --tap: 56px;

  --relieve: 0 1px 2px rgba(34, 27, 38, .05), 0 1px 10px rgba(34, 27, 38, .04);
  --relieve-alto: 0 -2px 20px rgba(34, 27, 38, .10);

  color-scheme: light;

  /* ── EL COLOR DE LA CASA. Regla 2 ───────────────────────────────────────
     Lo redefine cada pantalla en su `data-pantalla`. Lo que hay aquí es el
     verde, que es el de «Me sirvo» — la pantalla que se usa veinte veces al
     día y la única que puede quedarse sin atributo sin que se note.

       --casa        la cabecera y el relleno de lo pulsable
       --casa-hondo  el canto de la tecla, y el fondo al pulsarla
       --casa-tenue  el borde de lo pulsable que NO es la acción principal
       --casa-suave  el papel teñido: lo elegido, lo marcado, el foco

     Los tres colores pasan de 6:1 sobre papel, así que valen como relleno con
     letra clara Y como texto sobre papel. Ninguno es ámbar, y ninguno se
     acerca a la brasa: si el verde de la casa se confundiera con el aviso de
     «se acaba», el color habría dejado de contestar una pregunta. */
  --casa: #1e6b4a;
  --casa-hondo: #12482f;
  --casa-tenue: #a9cbb8;
  --casa-suave: #e9f2ec;

  /* ── LOS COLORES DE LAS CATEGORÍAS ──────────────────────────────────────
     Cinco, y ninguno verde: en «Me sirvo» —la única pantalla donde se usan—
     el verde ya es de la casa, y una categoría verde se leería como un botón.
     Tampoco hay ámbar (es el dinero) ni brasa (es el aviso). Cinco bastan: un
     club no tiene veinte familias en la nevera, y si las tuviera el ciclo se
     repite sin romper nada. */
  --cat-1: #0f6a72; --cat-1-suave: #e5f1f2;
  --cat-2: #2f4fa2; --cat-2-suave: #e9edf8;
  --cat-3: #6d3572; --cat-3-suave: #f3ebf4;
  --cat-4: #a03a5d; --cat-4-suave: #fbeaf0;
  --cat-5: #4f6018; --cat-5-suave: #eef2e3;
  /* Sin categoría asignada, el filete es el del margen de la libreta. */
  --cat: var(--margen);
  --cat-suave: var(--fondo);
}

/* «La libreta»: azul de tinta. Es la pantalla donde se ESCRIBE. */
body[data-pantalla="libreta"] {
  --casa: #28457f;
  --casa-hondo: #1a2e57;
  --casa-tenue: #b5c2dd;
  --casa-suave: #e9edf7;
}

/* «El local»: ciruela. Es la pantalla donde se MIRA, y la única que no apunta
   nada en el libro. */
body[data-pantalla="local"] {
  --casa: #6d3572;
  --casa-hondo: #4a2350;
  --casa-tenue: #d2b8d6;
  --casa-suave: #f3ebf4;
}

/* El número lo pone `familiaCategoria()` en `shared/api.js`, a partir del
   nombre de la categoría. Es un reparto por hash y no por orden de aparición
   a propósito: dar de alta «Aperitivos» no puede repintar la nevera entera. */
[data-cat="1"] { --cat: var(--cat-1); --cat-suave: var(--cat-1-suave); }
[data-cat="2"] { --cat: var(--cat-2); --cat-suave: var(--cat-2-suave); }
[data-cat="3"] { --cat: var(--cat-3); --cat-suave: var(--cat-3-suave); }
[data-cat="4"] { --cat: var(--cat-4); --cat-suave: var(--cat-4-suave); }
[data-cat="5"] { --cat: var(--cat-5); --cat-suave: var(--cat-5-suave); }

* { box-sizing: border-box; }

/* `hidden` tiene que ganar a cualquier regla de componente que fije display. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--gente);
  font-size: 17px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 700; }

/* ── El rótulo de la casa ─────────────────────────────────────────────────
   Sin tipografía descargada, a propósito: esto se abre junto a una nevera, a
   veces compartiendo los datos de un móvil. El carácter lo pone el
   TRATAMIENTO —versales estrechas, muy espaciadas, como un rótulo pintado en
   la pared del garaje—, no un fichero de 40 KB que puede no llegar.

   La cabecera va en el COLOR DE LA CASA y no en tinta (regla 2): es la banda
   más grande y más estable de la pantalla, y es lo primero que se ve al
   abrirla. Que «Me sirvo» sea verde y «El local» ciruela contesta «¿dónde
   estoy?» desde el otro lado del local, sin leer una palabra — que es
   exactamente como lo mira quien no está acostumbrado a esto. */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--casa);
  color: var(--papel);
  /* El canto oscuro es el mismo recurso que el de las teclas: separa la banda
     del papel sin una línea que parezca un borde. */
  border-bottom: 3px solid var(--casa-hondo);
}
.barra-marca { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.barra-casa {
  font-size: .62rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255, 254, 252, .72);
}
.barra-donde {
  font-size: 1.15rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra nav { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
/* Antes eran texto al 72% de opacidad, y a un texto no se le nota que lleva a
   otro sitio si nunca has usado una aplicación. Ahora son pastillas con borde:
   se ve el contorno de la cosa que se pulsa. */
.barra nav a, .barra nav button {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--s-3);
  border: 1.5px solid rgba(255, 254, 252, .45); border-radius: 999px;
  background: rgba(255, 254, 252, .16);
  font: inherit; font-size: .88rem; font-weight: 700;
  color: var(--papel); text-decoration: none; cursor: pointer;
}
.barra nav a:hover, .barra nav button:hover { background: var(--papel); color: var(--casa); }
.barra nav a:active, .barra nav button:active { transform: translateY(1px); }

/* ── El epígrafe ──────────────────────────────────────────────────────────
   El rótulo de una sección de la libreta. Pequeño, ancho y apagado: nombra sin
   competir con lo que nombra. */
.epigrafe {
  margin: 0 0 var(--s-3);
  font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-suave);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
}

/* ── Las cifras. Regla 3 ──────────────────────────────────────────────────
   `tabular-nums` es lo que alinea las comas en una columna de euros. */
.cifra {
  font-family: var(--maquina);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* Regla 1: el dinero es ámbar, y en texto se lee con `--ambar-tinta`. */
.dinero { color: var(--ambar-tinta); }

/* ── Lo pulsable. Reglas 2 y 3 ───────────────────────────────────────────
   Un botón aquí tiene DOS señales, y las dos hacen falta:

     · el color de la casa, que dice «esto es de las cosas que se tocan»;
     · el canto inferior grueso y oscuro, que dice «esto sobresale».

   La segunda es la que de verdad funciona con quien no ha usado nunca una
   aplicación. Un rectángulo de color plano es una convención aprendida —hay
   que saber que en las pantallas el color significa botón—; un bulto que se
   hunde al apretarlo no hay que aprenderlo, es lo mismo que un interruptor de
   la luz. Por eso el canto no es un adorno y no se quita para «modernizar».

   El hundido son 2 px de canto que se pierden y 2 px que baja el botón: el
   borde de abajo se queda donde estaba y el de arriba desciende, que es
   exactamente lo que hace una tecla de verdad. */
.btn {
  min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0 var(--s-4);
  border: 2px solid var(--casa-tenue); border-bottom-width: 4px;
  border-radius: var(--r-md);
  background: var(--papel); color: var(--casa);
  font: inherit; font-weight: 700; text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, background-color .12s ease, border-bottom-width .06s ease;
}
.btn:hover { background: var(--casa-suave); }
.btn:active { transform: translateY(2px); border-bottom-width: 2px; }
/* La acción principal va rellena: en una pantalla con cuatro botones, uno solo
   puede ser el que se pulsa al final. */
.btn-primary {
  background: var(--casa); border-color: var(--casa-hondo); color: var(--papel);
}
.btn-primary:hover { background: var(--casa-hondo); }
/* Deshabilitado se apaga del todo —gris, sin color de casa y sin canto—: si
   sigue pareciendo una tecla, se pulsa, y no pasa nada. Eso es peor que no
   poder pulsarlo. */
.btn:disabled, .btn-primary:disabled {
  background: var(--linea); border-color: var(--margen); border-bottom-width: 2px;
  color: var(--tinta-suave); cursor: not-allowed; transform: none;
}
/* El de salir de un paso sin hacer nada. No lleva canto —no es una tecla— pero
   sí el color de la casa y subrayado, que es lo que se ha entendido como «esto
   lleva a algún sitio» desde la primera pantalla que existió. */
.btn-ghost {
  background: transparent; border-color: transparent; border-bottom-width: 2px;
  color: var(--casa); text-decoration: underline; text-underline-offset: 3px;
}
.btn-ghost:hover { background: var(--casa-suave); }
/* Borrar y corregir NO son de la casa: son brasa. Lo que puede doler tiene su
   propio color en las tres pantallas, y es el mismo que el de «se acaba». */
.btn-peligro { color: var(--brasa); border-color: #e2b6a8; }
.btn-peligro:hover { background: var(--brasa-suave); }
.btn-menor { min-height: 44px; padding: 0 var(--s-3); font-size: .88rem; }

/* El foco se ve SIEMPRE. Se pulsa con guantes, pero también se navega con
   teclado desde el portátil que hay en el local. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
}

/* ── Formularios ─────────────────────────────────────────────────────── */
label { display: flex; flex-direction: column; gap: var(--s-1); }
.etiqueta-campo {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave);
}
/* Dos píxeles de borde y no uno: una casilla vacía sobre papel del mismo tono
   no se ve que es una casilla, y quien viene del papel espera un recuadro
   dibujado, no un cambio de blancos. */
input, select, textarea {
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border: 2px solid var(--margen); border-radius: var(--r-md);
  background: var(--papel); color: var(--tinta);
  font: inherit; font-size: 1.05rem;
}
textarea { min-height: 80px; resize: vertical; }
/* La casilla en la que se está escribiendo se tiñe del color de la casa: en un
   formulario de seis campos, saber cuál tiene el cursor es la mitad del
   trabajo. */
input:focus, select:focus, textarea:focus {
  border-color: var(--casa); background: var(--casa-suave);
}
/* Las casillas que piden dinero o unidades son cifras: se teclean y se leen
   como cifras. */
input[type="number"] { font-family: var(--maquina); font-variant-numeric: tabular-nums; }
input::placeholder, textarea::placeholder { color: var(--tinta-suave); opacity: .8; }

/* ── La libreta: renglones con margen ─────────────────────────────────────
   El filete de la izquierda es el margen del libro. Es lo más cerca de un
   adorno que hay en el sistema, y está porque dice algo cierto: estas filas
   son asientos de un libro, no tarjetas sueltas. */
.libreta {
  list-style: none; margin: 0; padding: 0 0 0 var(--s-4);
  border-left: 2px solid var(--margen);
}
.renglon {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--linea);
}
.renglon:last-child { border-bottom: 0; }
.renglon-que { font-weight: 600; }
.renglon-pie { grid-column: 1 / -1; font-size: .82rem; color: var(--tinta-suave); }

/* Un apunte corregido NO se esconde: se tacha, y su contrario queda debajo. */
.renglon[data-estado="anulado"] .renglon-que,
.renglon[data-estado="anulado"] .renglon-dinero { text-decoration: line-through; opacity: .5; }

/* ── Tablas. Son datos, y se leen como un libro mayor ─────────────────── */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: var(--s-3) var(--s-3) var(--s-3) 0; text-align: left; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th {
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave); border-bottom-color: var(--margen);
}
td:last-child, th:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
caption { text-align: left; padding: var(--s-3) 0; color: var(--tinta-suave); }
/* Las columnas de números se alinean por la coma, no por el borde. */
td.num, th.num { text-align: right; font-family: var(--maquina); font-variant-numeric: tabular-nums; }

/* ── Estados del género ──────────────────────────────────────────────────
   Ni «queda poco» ni «no hay» gastan ámbar: el ámbar es del dinero. Lo que se
   acaba es brasa, y lo que ya no hay se apaga. */
.poco { color: var(--brasa); font-weight: 700; }
.agotado { color: var(--tinta-suave); font-weight: 700; }
.cuadra { color: var(--valido); font-weight: 700; }

/* ── Pastillas ───────────────────────────────────────────────────────── */
.pastilla {
  display: inline-block; padding: 2px var(--s-2); border-radius: 999px;
  border: 1px solid var(--linea); background: var(--fondo);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave); vertical-align: 2px;
}

/* ── La marca de la familia ──────────────────────────────────────────────
   El mismo taco de color que encabeza cada grupo de la carta de «Me sirvo»,
   para poder llevarlo a las tablas de las otras dos pantallas. Es lo que hace
   que «lo azul son los refrescos» sea cierto en toda la aplicación y no solo
   en la pantalla donde se aprendió. */
.marca-cat {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  background: var(--cat); margin-right: var(--s-2); vertical-align: 1px;
}

/* ── Avisos y notas ──────────────────────────────────────────────────── */
.nota { margin: 0; color: var(--tinta-suave); font-size: .88rem; }
.error { margin: 0; color: var(--brasa); font-weight: 600; }
.error a { color: inherit; }

/* ── El recado ───────────────────────────────────────────────────────────
   Sustituye a `alert()`. Un `alert` del navegador en un móvil no se puede leer
   con una copa en la mano: sale del sistema, no dice de qué pantalla viene y
   bloquea el pulgar hasta acertar con «Aceptar». */
.recado {
  position: fixed; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px);
  max-width: min(92vw, 30rem);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  background: var(--tinta); color: var(--papel);
  font-weight: 600; text-align: center;
  box-shadow: var(--relieve-alto);
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity .18s ease, transform .18s ease;
}
.recado.se-ve { opacity: 1; transform: translate(-50%, 0); }
.recado[data-tono="mal"] { background: var(--brasa); }
.recado[data-tono="bien"] { background: var(--valido); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  /* Se quita el DESPLAZAMIENTO, no el hundido: el canto sigue adelgazando de
     4 px a 2 al pulsar, que es la mitad del gesto de la tecla y la que no
     mueve nada por la pantalla. Quitarlo entero dejaría a quien pide menos
     movimiento sin ninguna confirmación de que ha pulsado. */
  .btn:active, .paso:active { transform: none; }
}