/* «Me sirvo»: la pantalla que se usa veinte veces al día.
 *
 * Se usa de pie, delante de la nevera, con los guantes de moto puestos y
 * probablemente con una mano ocupada. La spec pide TRES TOQUES, y de ahí sale
 * casi todo lo de aquí: una sola columna (la mano va sola al botón sin
 * apuntar), superficie de 56 px, y la cuenta abajo, donde está el pulgar.
 *
 * La cifra del pie es el héroe: es lo que de verdad hace esta pantalla, y se
 * ve ANTES de confirmar. En una barra que funciona con la palabra de doce
 * personas, saber cuánto dejas es el producto entero.
 */

/* Hueco para el pie fijo. Es alto porque lleva la cifra grande. */
body { padding-bottom: 132px; }

/* ── Entrar ──────────────────────────────────────────────────────────── */

.entrada {
  max-width: 25rem; margin: 10vh auto; padding: var(--s-5);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-lg);
  /* La franja verde de arriba dice, antes de leer nada, que esto es la puerta
     de «Me sirvo» y no otra pantalla. Va de sombra INTERIOR y no de
     `border-top`: un borde grueso arriba y fino a los lados se abre en
     diagonal al llegar a la esquina redondeada, y la franja parece que se sale
     de la tarjeta. La sombra la recorta la esquina, y queda a escuadra. */
  box-shadow: inset 0 6px 0 var(--casa), var(--relieve);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.entrada-rotulo {
  margin: 0;
  font-size: .62rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.entrada-titulo { margin: 0 0 var(--s-1); font-size: 1.5rem; letter-spacing: -.01em; }
.entrada .error { min-height: 1.3em; }

/* ── El interruptor de invitado ──────────────────────────────────────────
   Es un MODO: cambia lo que hace el siguiente «+». Por eso va pegado bajo la
   cabecera y por eso, encendido, se invierte entero en vez de marcar un tic:
   con guantes y a media luz, un tic pequeño no se ve. */
.invitado {
  position: sticky; top: 67px; z-index: 4;
  display: flex; flex-direction: row; align-items: center; gap: var(--s-3);
  min-height: var(--tap); padding: 0 var(--s-4);
  background: var(--papel); border-bottom: 1px solid var(--linea);
  /* Apagado también hay que ver que se puede tocar: el filete verde de la
     izquierda es lo que lo dice, y es el mismo verde de todo lo pulsable. */
  border-left: 6px solid var(--casa-tenue);
  font-weight: 600; cursor: pointer;
}
.invitado input { width: 24px; height: 24px; min-height: 0; flex-shrink: 0; accent-color: var(--casa); }
.invitado-texto { flex: 1; }
/* «esta ronda / la siguiente» se pinta desde el CSS: no cambia nunca y no
   merece una línea de JavaScript. */
.invitado-estado::after {
  content: "apagado";
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave);
}
/* Encendido sigue siendo TINTA y no el verde de la casa, y es a propósito: la
   cabecera de esta pantalla ya es verde, así que una banda verde justo debajo
   se leería como parte de la cabecera. En negro no hay duda de que es otra
   cosa, y de que está encendida. */
.invitado:has(input:checked) {
  background: var(--tinta); color: var(--papel);
  border-bottom-color: var(--tinta); border-left-color: var(--tinta);
  box-shadow: inset 0 1px 0 rgba(255, 254, 252, .22);
}
.invitado:has(input:checked) .invitado-estado::after { content: "encendido"; color: var(--papel); }
.invitado:has(input:checked) input { accent-color: var(--papel); }

/* ── La carta ────────────────────────────────────────────────────────── */

main { padding: var(--s-4) var(--s-4) var(--s-5); }

.grupo { margin-bottom: var(--s-5); }
.grupo:last-child { margin-bottom: 0; }
/* El rótulo de la familia va en el color de la familia. Es lo único de la
   pantalla que lleva color sin ser pulsable ni ser dinero, y se lo puede
   permitir porque JAMÁS lleva el verde de la casa: nadie va a intentar pulsar
   un rótulo morado en una pantalla donde todo lo que se pulsa es verde. */
.grupo .epigrafe {
  color: var(--cat);
  /* `justify-content` explícito: el epígrafe del sistema separa sus dos
     extremos —lo usa «El local» para colgar una coletilla a la derecha— y aquí
     eso dejaba el taco de color pegado a un borde y el nombre al otro, como si
     no fueran la misma cosa. */
  display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2);
  font-size: .74rem; letter-spacing: .18em;
}
/* Un taco de color delante del rótulo: es lo que se ve al pasar la vista por
   la pantalla sin pararse a leer. */
.grupo .epigrafe::before {
  content: ""; flex: 0 0 auto;
  width: 14px; height: 14px; border-radius: 4px;
  background: var(--cat);
}

/* Una sola columna en móvil: la mano va sola al botón sin apuntar. En
   pantalla ancha —la tablet del local— caben dos. */
.rejilla { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }

.producto {
  display: grid;
  /* `minmax(0, 1fr)` y no `1fr`, por lo mismo que la pareja de campos de «La
     libreta»: el mínimo de `1fr` es `auto`, o sea el ancho de la palabra más
     larga del nombre, y con el precio y las dos teclas al lado eso desborda la
     página entera en horizontal. Medido con el filete de la familia puesto:
     362 px de contenido en una pantalla de 360. Un nombre largo parte en dos
     líneas, que es lo que tenía que hacer desde el principio. */
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-2);
  padding-right: var(--s-2);
  background: var(--papel);
  border: 1px solid var(--linea);
  /* El filete de la izquierda es el margen de la libreta, y lleva el color de
     la familia. Seis píxeles y siempre presentes: si el grosor cambiara al
     marcar, la fila entera se desplazaría y la lista bailaría bajo el dedo. */
  border-left: 6px solid var(--cat);
  border-radius: var(--r-md);
}
/* «Esto lo llevo». Antes era un filete negro de 3 px en el borde izquierdo, y
   con el móvil al brillo bajo y de pie delante de la nevera, tres píxeles no
   son nada. Ahora la fila entera se tiñe del verde de la casa y se le pone
   contorno: se ve cuántas llevas de un vistazo, sin contar los números. */
.producto.marcado {
  background: var(--casa-suave);
  border-color: var(--casa);
  border-left-color: var(--cat);
}

/* La ficha entera es pulsable: sumar sigue costando un toque, sin apuntar. */
.ficha {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  /* Ocho de sangría y no doce: el filete de color de la familia ya separa el
     nombre del borde, y esos cuatro píxeles por lado son justo los que le
     hacen falta al nombre para no partirse en dos en una pantalla de 360. */
  min-height: 66px; padding: var(--s-2);
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--r-md);
}
.nombre { font-size: 1.06rem; font-weight: 700; line-height: 1.25; }
.quedan { font-size: .78rem; color: var(--tinta-suave); }
/* Ni «queda poco» ni «no queda» gastan ámbar: el ámbar es del dinero. */
.quedan.poco { color: var(--brasa); font-weight: 700; }
.quedan.agotado { color: var(--tinta-suave); font-weight: 700; }

.precio { font-size: 1rem; white-space: nowrap; padding-left: var(--s-1); }

/* El selector. Ancho fijo para que las filas no bailen al aparecer el menos.
   Las tres columnas se ASIGNAN a mano: al ocultar el «−» y la cuenta, el
   navegador los saca de la rejilla y el «+» se coloca solo en la primera
   columna, dejando 90 px muertos a su derecha y el botón lejos del borde.
   Se ve en el navegador y no lo ve ningún test. */
.contador {
  display: grid; grid-template-columns: var(--tap) 30px var(--tap);
  align-items: center; justify-items: center;
}
.paso[data-restar] { grid-column: 1; }
.paso.mas { grid-column: 3; }
/* El «+» y el «−» son las dos teclas más pulsadas de la aplicación, así que
   llevan el tratamiento de tecla completo: canto oscuro abajo y hundido al
   apretar. Es el mismo recurso que `.btn`, escrito aquí porque estos dos no
   son botones de texto sino cuadrados de 56 px. */
.paso {
  width: var(--tap); height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; line-height: 1;
  border: 2px solid var(--casa-tenue); border-bottom-width: 4px;
  border-radius: var(--r-md);
  background: var(--papel); color: var(--casa); cursor: pointer;
  transition: transform .06s ease, background-color .12s ease, border-bottom-width .06s ease;
}
.paso:active { transform: translateY(2px); border-bottom-width: 2px; }
/* El «+» es la acción de esta pantalla: va relleno del verde de la casa. El
   «−» se queda en papel con borde — se usa cuando te has pasado, no siempre. */
.paso.mas { background: var(--casa); border-color: var(--casa-hondo); color: var(--papel); }
.paso[hidden] { display: none; }
.marcadas {
  grid-column: 2;
  font-family: var(--maquina); font-variant-numeric: tabular-nums;
  font-size: 1.15rem; font-weight: 700;
  /* Cuántas llevas de este artículo. Va en el verde de la casa porque vive
     entre el «−» y el «+» y es la cuenta de lo que hacen esos dos, no una
     cifra de dinero — el ámbar aquí sería mentira. */
  color: var(--casa-hondo);
}

/* ── El pie: la cuenta ───────────────────────────────────────────────── */

footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  /* El canto verde separa la cuenta de la carta y dice que ahí abajo está lo
     que se pulsa al final. */
  background: var(--papel); border-top: 3px solid var(--casa);
  box-shadow: var(--relieve-alto);
}
.cuenta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cuenta .epigrafe { margin: 0; }
/* `Intl` mete un espacio duro antes del €, y en monoespaciada a este cuerpo
   eso abre un hueco de medio dedo entre la cifra y su moneda. */
.cuenta-total, .hecho-cifra { word-spacing: -.3em; }
.cuenta-total { font-size: 2rem; line-height: 1.05; }
/* Sin nada marcado la cifra no es cero: todavía no existe. Un «0,00 €» en
   ámbar dice que hay una cuenta abierta, y no la hay. */
.cuenta-total.vacia { color: var(--tinta-suave); font-size: 1.5rem; }
.cuenta-detalle {
  display: flex; align-items: center; gap: var(--s-1);
  font-size: .82rem; color: var(--tinta-suave);
}
#confirmar { min-width: 9.5rem; font-size: 1.05rem; flex-shrink: 0; }

/* ── Hecho ───────────────────────────────────────────────────────────────
   La cifra es lo único que hay que leer, y hay que poder leerla de un
   vistazo mientras se saca el dinero del bolsillo. */
.hecho {
  border: 0; border-radius: var(--r-lg); padding: var(--s-5);
  max-width: min(90vw, 24rem); text-align: center;
  background: var(--papel); color: var(--tinta);
  /* Verde arriba cuando salió bien, brasa cuando no. Es la única señal del
     diálogo que se entiende sin leer, y hace falta: quien lo abre está
     sacándose el dinero del bolsillo, no leyendo la pantalla. */
  box-shadow: inset 0 8px 0 var(--casa), 0 12px 48px rgba(34, 27, 38, .28);
}
.hecho[data-tono="mal"] { box-shadow: inset 0 8px 0 var(--brasa), 0 12px 48px rgba(34, 27, 38, .28); }
.hecho::backdrop { background: rgba(34, 27, 38, .55); }
.hecho .epigrafe { display: block; margin-bottom: var(--s-2); }
.hecho-cifra { margin: 0 0 var(--s-4); font-size: 3rem; line-height: 1; }
.hecho-aviso {
  margin: 0 0 var(--s-4); padding: var(--s-3);
  border-radius: var(--r-md); background: var(--brasa-suave); color: var(--brasa);
  font-size: .9rem; font-weight: 600;
}
.hecho .btn { width: 100%; }
/* Cuando no se pudo apuntar, la cifra deja de ser una cifra y el ámbar
   estorba: el mensaje se lee como texto. */
.hecho[data-tono="mal"] .hecho-cifra {
  font-family: var(--gente); font-size: 1.25rem; color: var(--tinta);
}