/* ═══════════════════════════════════════════════════════════════════
   STAND — punto de venta para eventos · Le Paquet
   ═══════════════════════════════════════════════════════════════════
   AUTOCONTENIDO A PROPOSITO. No importa nada de /shared/: esta carpeta
   se sube sola y tiene que funcionar sin red y sin el resto del sitio.
   Los tokens de abajo son COPIA de shared/styles.css (misma marca), no
   una reinterpretacion. Si alla cambia un color, aca no cambia solo.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Anybody';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/anybody-latin.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--t-ui);
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* En un stand se toca rapido y con la mano ocupada: nada de zoom por
     doble toque ni de seleccion accidental al arrastrar. */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
input { -webkit-appearance: none; }

/* ── Tokens de marca (copia de shared/styles.css) ────────────────── */
:root {
  --bg:       #fbf8fd;
  --bg2:      #f4f1f6;
  --card:     #ffffff;
  --card2:    #fbf8fd;
  --border:   #e0dde3;
  --border-s: #cecbd0;
  --sep:      #f4f1f6;

  --text:  #231f25;
  --text2: #534f55;
  --text3: #706d71;

  --accent:    #643c7b;
  --accent2:   #4c295f;
  --accent-s:  #f6edfc;
  --on-accent: #ffffff;
  --rosa:      #e5c3d1;

  --destacado:    #f6d468;
  --destacado-s:  #fff6da;
  --on-destacado: #231f25;

  --green:  #107b32;  --green-s:  #e9faea;
  --orange: #955400;  --orange-s: #fff2e7;
  --red:    #a93e37;  --red-s:    #fff1ef;
  --blue:   #1668b5;  --blue-s:   #edf5ff;

  --shadow:  0 1px 2px rgba(35,31,37,0.05);
  --shadow2: 0 2px 8px rgba(35,31,37,0.07);
  --shadow3: 0 8px 32px rgba(35,31,37,0.14);

  --font-display: 'Anybody', 'Archivo', system-ui, sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-display: 30px;
  --t-title:   20px;
  --t-body:    16px;
  --t-ui:      14px;
  --t-small:   12px;
  --t-label:   11px;
  --ls-display: -0.02em;
  --ls-label:    0.13em;

  --e1: 4px;  --e2:  8px;  --e3: 12px;
  --e4: 16px; --e5: 24px;  --e6: 32px;
  --r1: 6px;  --r2: 10px;  --r3: 14px;  --r-full: 999px;

  /* Propios del stand */
  --barra-h: 76px;   /* alto de la barra de cobro fija en celular */
  --top-h:   56px;
  /* Margen lateral de la pagina. Es un token y no un numero suelto porque
     la fila de chips se SALE de ese margen con margenes negativos: si el
     margen y el sangrado dejan de ser el mismo valor, los chips empujan la
     pagina entera a lo ancho. Ya pasó. */
  /* Tamaño mínimo de un control que se toca con el dedo. Estaba en 40 en
     siete lugares distintos y ninguno llegaba al mínimo cómodo. Un solo
     token: subirlo acá los arregla a todos y no se vuelve a desincronizar. */
  --toque: 44px;
  --pad-pantalla: var(--e4);
  /* Medida de la pagina en escritorio. Un solo valor para la cabecera, el
     segmento y el contenido: si cada uno elige la suya, los bordes no
     coinciden y eso se lee como desprolijidad aunque no sepas por que. */
  --medida: 1280px;
}

body.oscuro {
  --bg:       #131015;
  --bg2:      #1f1c22;
  --card:     #1b171d;
  --card2:    #1f1c22;
  --border:   #312d33;
  --border-s: #423f45;
  --sep:      #1f1c22;

  --text:  #f6f2f8;
  --text2: #cbc8cd;
  --text3: #a19ea3;

  --accent:    #b98ad5;
  --accent2:   #d2aeea;
  --accent-s:  #2c1d35;
  --on-accent: #131015;

  --destacado:    #e9c861;
  --destacado-s:  #342a07;
  --on-destacado: #231f25;

  --green:  #6fc97e;  --green-s:  #14331a;
  --orange: #f09c4b;  --orange-s: #3f2307;
  --red:    #fd8d81;  --red-s:    #431e1b;
  --blue:   #74b6ff;  --blue-s:   #132c47;

  --shadow:  0 1px 2px rgba(0,0,0,0.4);
  --shadow2: 0 2px 8px rgba(0,0,0,0.5);
  --shadow3: 0 8px 32px rgba(0,0,0,0.6);
}

/* Cifras tabulares en TODO lo que sea plata: si no, los importes bailan
   de fila en fila y el total no se puede leer de un vistazo. */
.num, input[inputmode="decimal"], input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Portón (login) ──────────────────────────────────────────────
   La clase `sin-llave` la pone un script en el <head>, antes de pintar.
   Es un intercambio, no un adorno: sin ella el equipo sin permiso vería
   la caja un instante antes de que el JS la tape, y el equipo con permiso
   vería un cartel de "verificando" en cada apertura. */
#porton { display: none; }
html.sin-llave body > *:not(#porton) { display: none !important; }
html.sin-llave #porton {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  padding: var(--e4);
}
.porton-caja {
  width: 100%; max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--shadow2);
  padding: var(--e5) var(--e4);
  text-align: center;
}
.porton-caja .marca { justify-content: center; margin-bottom: var(--e4); }
.porton-caja h1 {
  font-family: var(--font-display);
  font-size: var(--t-title); font-weight: 700;
  letter-spacing: var(--ls-display);
  margin-bottom: var(--e2);
}
#porton-msg { color: var(--text2); margin-bottom: var(--e4); }
#porton-btn { margin-bottom: var(--e4); }
.porton-pie {
  font-size: var(--t-small); color: var(--text3);
  border-top: 1px solid var(--sep); padding-top: var(--e3);
}

/* ── Cabecera ────────────────────────────────────────────────────── */
.top {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
  padding-top: env(safe-area-inset-top);
}
/* El fondo llega a los bordes de la pantalla, el contenido no: si la barra
   se cortara en la medida, en pantalla ancha quedaria una tarjeta flotando
   en vez de una cabecera. */
.top-in {
  height: var(--top-h);
  display: flex; align-items: center; gap: var(--e3);
  max-width: var(--medida); margin-inline: auto;
  padding-inline: var(--pad-pantalla);
}
.marca {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--t-body);
  letter-spacing: var(--ls-display);
  color: var(--accent);
  white-space: nowrap;
}
.marca span { color: var(--text3); font-weight: 500; }
.top-sp { flex: 1; }
.caja-chip {
  font-size: var(--t-small); font-weight: 600;
  padding: 5px 10px; border-radius: var(--r-full);
  background: var(--accent-s); color: var(--accent);
  white-space: nowrap; max-width: 130px;
  overflow: hidden; text-overflow: ellipsis;
}

/* ── Segmento de navegacion ──────────────────────────────────────── */
/* La pista va en --bg (no --bg2): en oscuro la --card es mas oscura que
   --bg2, y sobre --bg2 la seccion activa se HUNDE en vez de subir. */
.seg {
  display: flex; gap: var(--e1);
  background: var(--bg); padding: var(--e1);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  margin-top: var(--e3);
}
.seg-caja {
  max-width: var(--medida); margin-inline: auto;
  padding-inline: var(--pad-pantalla);
}
/* Pegajosas en escritorio: con sesenta productos había que volver hasta
   arriba de todo para pasar a Ventas o Cierre. La cabecera ya se queda,
   pero sola no lleva a ningún lado. */
@media (min-width: 880px) {
  .seg-caja {
    position: sticky; top: var(--top-h); z-index: 35;
    background: var(--bg);
    padding-block: var(--e2) var(--e3);
  }
  .seg { margin-top: 0; }
}
.seg button {
  flex: 1 1 auto; min-height: var(--toque); padding: 0 var(--e2);
  border-radius: var(--r-full);
  font-size: var(--t-ui); font-weight: 600; color: var(--text2);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  /* Sin min-width:0 un item flex no baja de su contenido, y con nowrap eso
     empuja la PAGINA entera a lo ancho. Con esto, si algun dia no entra,
     el rotulo se recorta y el resto del layout queda intacto. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.seg button[aria-selected="true"] {
  background: var(--card); color: var(--text);
  box-shadow: var(--shadow);
}
.seg .badge {
  display: inline-block; min-width: 18px; margin-inline-start: 5px;
  padding: 0 5px; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent);
  font-size: 10px; font-weight: 700; line-height: 18px;
  vertical-align: 1px;
}

/* ── Estructura de pantalla ──────────────────────────────────────── */
.pantalla {
  display: none;
  padding: var(--e4) var(--pad-pantalla) var(--e6);
  max-width: var(--medida);
  margin-inline: auto;
}
.pantalla.activa { display: block; }

#p-vender.activa { display: grid; }
#p-vender {
  grid-template-columns: 1fr;
  gap: var(--e4);
  padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom) + var(--e4));
}
/* Un item de grid trae min-width:auto, o sea que NO baja de su contenido
   minimo aunque la columna sea 1fr. Con la fila de chips adentro eso
   ensanchaba la seccion y con ella la pagina entera en pantallas chicas.
   El 1fr solo encoge de verdad con esto puesto. */
#p-vender > section { min-width: 0; }

h2.titulo {
  font-family: var(--font-display);
  font-size: var(--t-display); font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: 1.15;
  margin-bottom: var(--e1);
}
.subtitulo { color: var(--text3); font-size: var(--t-ui); margin-bottom: var(--e5); }
.rotulo {
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text3);
  margin-bottom: var(--e2);
}

/* ── Bloque: el mecanismo de la marca ────────────────────────────
   Superficie mas clara + borde 1px + sombra sutil. Las tres juntas.
   Sacar cualquiera mata el despegue del fondo. */
.bloque {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--shadow);
  padding: var(--e3);
}
.bloque + .bloque { margin-top: var(--e3); }
.fila {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--sep);
}
.fila:first-child { padding-top: 0; }
.fila:last-child  { padding-bottom: 0; border-bottom: none; }

/* ── Productos agrupados por rubro ───────────────────────────────
   El primer grupo no lleva separador arriba: el rótulo del bloque ya
   dice dónde empieza la lista. */
/* La fila de producto medía 37px: es el control que más se toca en esta
   pantalla y era el más chico de la app. */
#lista-prod .fila .desc {
  min-height: var(--toque);
  display: flex; flex-direction: column; justify-content: center;
}
.grupo-prod + .grupo-prod {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--border);
}
.grupo-tit {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--e1);
}
.grupo-n {
  background: var(--accent-s); color: var(--accent);
  border-radius: var(--r-full); padding: 1px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0;
}

/* ── Botones ─────────────────────────────────────────────────────── */
/* `hidden` tiene que ganarle a cualquier display declarado.

   La regla del navegador es [hidden]{display:none}, y le gana cualquier
   selector de clase: .btn declara display:inline-flex, asi que TODO boton
   con el atributo hidden se seguia viendo igual. Se descubrio con el boton
   "Editar", pero afectaba a los doce elementos del HTML que usan hidden. */
[hidden] { display: none !important; }

.btn {
  min-height: 48px; padding: 0 var(--e4);
  border-radius: var(--r2);
  font-size: var(--t-body); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  background: var(--card); color: var(--text);
  border: 1px solid var(--border-s);
  transition: background 0.12s, border-color 0.12s, opacity 0.12s, scale 0.1s;
}
.btn:active { scale: 0.96; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; scale: 1; }
.btn-1 { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn-2 { background: var(--bg2); border-color: transparent; }
.btn-peligro { color: var(--red); border-color: var(--border-s); }
.btn-bloque { width: 100%; }
.btn-gigante { min-height: 60px; font-size: var(--t-title); }
/* min-width tambien: con un texto de dos letras ("Si", "No") el padding
   solo daba 39px de ancho y el boton quedaba mas angosto que el dedo. */
.btn-chico { min-height: var(--toque); min-width: var(--toque); font-size: var(--t-ui); padding: 0 var(--e3); }
.btn:focus-visible, .seg button:focus-visible, .prod:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Campos ──────────────────────────────────────────────────────── */
label.campo { display: block; }
label.campo > span {
  display: block; font-size: var(--t-small); font-weight: 600;
  color: var(--text2); margin-bottom: var(--e1);
}
input[type="text"], input[type="number"], input[inputmode], select {
  width: 100%; min-height: 48px;
  padding: 0 var(--e3);
  /* 16px o menos hace que iOS haga zoom al enfocar y descoloque la caja. */
  font-size: var(--t-body);
  background: var(--card); color: var(--text);
  border: 1px solid var(--border-s); border-radius: var(--r1);
  -webkit-user-select: text; user-select: text;
}
select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text3) 50%),
                    linear-gradient(135deg, var(--text3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: var(--e6);
}

/* ── Chips de categoria ──────────────────────────────────────────── */
/* Scroller horizontal: el proximo chip asoma en el borde para que se vea
   que hay mas. Sin ese asomo, el scroll no existe para el usuario. */
.cats {
  display: flex; gap: var(--e2);
  overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--pad-pantalla) * -1);
  padding-inline: var(--pad-pantalla);
  padding-bottom: var(--e1);
  scroll-padding-inline: var(--pad-pantalla);
}
.cats::-webkit-scrollbar { display: none; }
.chip {
  /* display explicito: como <span> (la lista de categorias en Productos)
     un chip inline ignora min-height y deja la cruz colgada de la linea
     base en vez de centrada. Con inline-flex se centra en los dos usos. */
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  flex: 0 0 auto; min-height: var(--toque); padding: 0 var(--e4);
  border-radius: var(--r-full);
  background: var(--card); border: 1px solid var(--border-s);
  font-size: var(--t-ui); font-weight: 600; color: var(--text2);
  transition: background 0.12s, color 0.12s, border-color 0.12s, scale 0.1s;
}
.chip:active { scale: 0.96; }
.chip[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
}

/* ── Secciones por categoria ─────────────────────────────────────
   Antes se elegia UNA categoria y se veia solo esa. Ahora se ven todas,
   una debajo de otra, y las categorias pasan a ser saltos. En un stand
   se cobra scrolleando en vez de cambiar de pestana: un toque menos por
   venta, y son cientos de ventas. */
.zona { min-width: 0; }
.cat-sec {
  /* Al saltar, el titulo tiene que quedar DEBAJO de la cabecera pegajosa
     y de los chips, no atras. */
  scroll-margin-top: calc(var(--top-h) + 56px);
}
.cat-sec + .cat-sec { margin-top: var(--e5); }
.cat-tit {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text3);
  margin-bottom: var(--e2);
}
.cat-n {
  background: var(--bg2); color: var(--text3);
  border-radius: var(--r-full); padding: 1px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0;
}

/* ── Indice lateral (solo escritorio ancho) ──────────────────────
   Es una guia, no un menu: dice donde estas mientras scrolleas y deja
   saltar. En celular no existe — ahi los chips pegajosos hacen lo mismo
   sin robarle ancho a la grilla. */
.indice { display: none; }
.indice-b {
  display: flex; align-items: center; gap: var(--e2);
  width: 100%; min-height: var(--toque); padding: 0 var(--e2);
  border-radius: var(--r1);
  text-align: start;
  font-size: var(--t-ui); font-weight: 600; color: var(--text3);
  transition: background 0.12s, color 0.12s;
}
.indice-b:hover { background: var(--bg2); color: var(--text2); }
.indice-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.indice-n { font-size: var(--t-small); color: var(--text3); font-weight: 600; }
.indice-b[aria-current="true"] {
  background: var(--accent-s); color: var(--accent);
  /* Barrita a la izquierda: dice "estas aca" sin gritar como lo haria
     un bloque violeta pleno repetido seis veces al costado. */
  box-shadow: inset 3px 0 0 var(--accent);
}
.indice-b[aria-current="true"] .indice-n { color: var(--accent); }

/* ── Chips de categoría en Productos ─────────────────────────────
   Llevan flechas, nombre, cuenta y borrar: sin aire propio los cuatro se
   tocan entre sí y se yerra el toque. */
#lista-cats .chip { padding-inline: var(--e2); gap: 2px; }
#lista-cats .chip button {
  min-width: 32px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r1);
}
#lista-cats .chip button:not([disabled]):hover { background: var(--bg2); }
#lista-cats .chip button[data-editar-cat] { padding-inline: 4px; }

/* ── Modo edición de la lista de productos ───────────────────────
   Todo cuelga de body.modo-orden. Fuera del modo no aplica una sola de
   estas reglas: la lista queda idéntica a la de siempre, que es lo que
   hace que apagar el modo sea una vuelta atrás de verdad y no a medias. */
.rotulo-lista { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }

/* Pegada al pie mientras dura el modo.
   Al final de la lista, con dieciocho productos, "Borrar 3" quedaba a una
   pantalla y media de scroll de lo que acababas de marcar: se marca arriba
   y la accion vive abajo. */
#barra-orden {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; gap: var(--e2); justify-content: flex-end;
  margin: var(--e4) calc(var(--e3) * -1) calc(var(--e3) * -1);
  padding: var(--e3);
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r2) var(--r2);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom));
}
#barra-orden .btn { flex: 0 0 auto; padding-inline: var(--e4); }
.btn.peligro { color: var(--red); border-color: var(--red); }

/* La fila entera marca: una casilla de 20px es un blanco imposible parado
   y apurado. La casilla es el indicador, no el objetivo. */
/* `selec`, no `marca`: .marca ya es el logotipo de la cabecera en
   index.html. Dos cosas distintas con el mismo nombre de clase y los
   estilos de la fila se le aplicaban al encabezado. */
.selec {
  display: flex; align-items: center; gap: var(--e3);
  min-height: var(--toque); padding: var(--e1) 0;
}
.casilla {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--r1);
  border: 2px solid var(--border-s); background: var(--card);
}
.selec.si .casilla {
  background: var(--accent); border-color: var(--accent);
  /* El tilde, dibujado con dos trazos: sin archivo nuevo, así no hay que
     tocar la lista de archivos del service worker. */
  background-image:
    linear-gradient(45deg, transparent 42%, var(--card) 42%, var(--card) 58%, transparent 58%),
    linear-gradient(-45deg, transparent 52%, var(--card) 52%, var(--card) 68%, transparent 68%);
  background-size: 11px 11px, 11px 11px;
  background-position: 2px 4px, 7px 2px;
  background-repeat: no-repeat;
}

/* El asa va a la DERECHA. Pegada al borde izquierdo se pisa con la zona
   del gesto "atrás" de Android: el toque llega tarde, se siente muerto, y
   con algo de componente horizontal cierra la app —que en modo instalado
   no tiene historial adonde volver— en el medio de la cola. */
.mango {
  flex: 0 0 auto; width: var(--toque); height: var(--toque);
  border-radius: var(--r1);
  /* touch-action: none SÓLO acá y SÓLO dentro del modo: es la única
     superficie de la app donde el dedo no scrollea. */
  touch-action: none;
  cursor: grab;
  background-image: linear-gradient(var(--text3) 0 0), linear-gradient(var(--text3) 0 0), linear-gradient(var(--text3) 0 0);
  background-size: 18px 2px;
  background-position: center calc(50% - 6px), center 50%, center calc(50% + 6px);
  background-repeat: no-repeat;
  opacity: 0.75;
}
.mango:active { cursor: grabbing; opacity: 1; }

body.modo-orden #lista-prod .fila { transition: transform 0.16s ease; }
/* Durante el arrastre nada de transiciones: la fila agarrada tiene que ir
   pegada al dedo, no persiguiéndolo. */
body.arrastrando #lista-prod .fila { transition: none; }
body.arrastrando { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* La fila levantada. El fondo va con --card2, no con --card: el bloque que
   la contiene YA es --card, así que en oscuro quedaba negro sobre negro y
   la sombra era invisible. El borde asegura el escalón en los dos temas. */
#lista-prod .fila.alzada {
  position: relative; z-index: 5;
  background: var(--card2);
  border: 1px solid var(--border-s);
  border-radius: var(--r2);
  box-shadow: var(--shadow3);
  padding-inline: var(--e3);
  margin-inline: calc(var(--e3) * -1);
}

/* ── Grilla de productos ─────────────────────────────────────────── */
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e3);
  margin-top: var(--e4);
}
.prod {
  /* Radio exterior = interior + padding -> 10 + 4 no aplica aca porque no
     hay hijo con fondo; se usa --r3 para igualar a los demas bloques. */
  min-height: 92px;
  padding: var(--e3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: start; gap: var(--e2);
  transition: border-color 0.12s, box-shadow 0.12s, scale 0.08s;
  position: relative;
}
.prod:hover { border-color: var(--border-s); box-shadow: var(--shadow2); }
.prod:active { scale: 0.96; }
.prod .n {
  font-size: var(--t-body); font-weight: 600; line-height: 1.25;
  /* Sin alto fijo: un nombre largo envuelve, no se corta. */
  overflow-wrap: anywhere;
}
.prod .p {
  font-family: var(--font-display);
  font-size: var(--t-title); font-weight: 700;
  letter-spacing: var(--ls-display);
  color: var(--accent);
}
.prod .cant {
  position: absolute; top: -7px; inset-inline-end: -7px;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--t-small); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow2);
}

/* ── Barra de cobro (celular: fija abajo) ────────────────────────── */
.barra {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(35,31,37,0.06);
  padding: var(--e3) var(--e4);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--e3);
}
body.oscuro .barra { box-shadow: 0 -2px 12px rgba(0,0,0,0.5); }
.barra.vacia { display: none; }
.barra-info { flex: 1; min-width: 0; text-align: start; }
.barra-info .c { font-size: var(--t-small); color: var(--text3); font-weight: 600; }
.barra-info .t {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700; letter-spacing: var(--ls-display);
  line-height: 1.1;
}
.barra .btn-gigante { flex: 0 0 auto; padding-inline: var(--e5); }

/* ── Carrito ─────────────────────────────────────────────────────── */
.carrito-lista { max-height: 46vh; overflow-y: auto; }
.item {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--sep);
}
.item:last-child { border-bottom: none; }
.item .desc { flex: 1; min-width: 0; }
.item .desc .n { font-weight: 600; overflow-wrap: anywhere; }
.item .desc .u { font-size: var(--t-small); color: var(--text3); }
.item .sub { font-weight: 700; min-width: 74px; text-align: end; }
.pasos { display: flex; align-items: center; gap: var(--e1); flex: 0 0 auto; }
.paso {
  width: var(--toque); height: var(--toque); border-radius: var(--r1);
  background: var(--bg2); color: var(--text);
  font-size: var(--t-title); font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, scale 0.1s;
}
.paso:active { scale: 0.96; }
.paso.quitar { color: var(--red); }
.pasos .v { min-width: 26px; text-align: center; font-weight: 700; }

/* ── Total ───────────────────────────────────────────────────────── */
.total-fila {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--e3); padding-top: var(--e3);
  border-top: 1px solid var(--border);
}
.total-fila .k { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text3); }
.total-fila .v {
  font-family: var(--font-display);
  font-size: var(--t-display); font-weight: 700; letter-spacing: var(--ls-display);
}

/* ── Hoja / modal ────────────────────────────────────────────────── */
.velo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(35,31,37,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease-out, visibility 0.18s;
}
.velo.abierto { opacity: 1; visibility: visible; }
.hoja {
  width: 100%; max-width: 520px;
  max-height: 92vh; overflow-y: auto;
  background: var(--bg);
  border-radius: var(--r3) var(--r3) 0 0;
  padding: var(--e4);
  padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom));
  /* Salida mas suave que la entrada, con un translate corto y fijo. */
  transform: translateY(16px);
  transition: transform 0.18s ease-out;
  -webkit-user-select: text; user-select: text;
}
.velo.abierto .hoja { transform: translateY(0); }
/* PEGAJOSA. En Configuración, que es larga, el título y la ✕ se iban con
   el scroll y la hoja quedaba sin salida visible: había que adivinar que
   se cierra tocando afuera. Juan terminó usando la flecha del navegador,
   que sale de la app entera. La salida tiene que estar siempre a la vista. */
.hoja-top {
  display: flex; align-items: center; gap: var(--e3);
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  /* Se estira hasta los bordes de la hoja para que el contenido no se vea
     pasar por los costados al scrollear. */
  margin: calc(var(--e4) * -1) calc(var(--e4) * -1) var(--e4);
  padding: var(--e4);
  border-bottom: 1px solid var(--border);
}
.hoja-top h3 { font-size: var(--t-title); font-weight: 700; flex: 1; }
.cerrar {
  width: 44px; height: 44px; border-radius: var(--r-full);
  background: var(--bg2); color: var(--text2);
  font-size: var(--t-title); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; transition: background 0.12s, scale 0.1s;
}
.cerrar:active { scale: 0.96; }

/* ── Cobro ───────────────────────────────────────────────────────── */
.cobro-total {
  background: var(--destacado-s);
  border: 1px solid var(--destacado);
  border-radius: var(--r3);
  padding: var(--e4);
  text-align: center;
  margin-bottom: var(--e4);
}
.cobro-total .k { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text2); }
.cobro-total .v {
  font-family: var(--font-display);
  font-size: 44px; font-weight: 800; letter-spacing: var(--ls-display);
  line-height: 1.05; color: var(--text);
}
.pagos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.pagos .btn { flex-direction: column; gap: 2px; min-height: 64px; font-size: var(--t-ui); }
.pagos .btn[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); border-color: transparent;
}
.rapidos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.vuelto {
  background: var(--green-s);
  border: 1px solid var(--green);
  border-radius: var(--r3);
  padding: var(--e3) var(--e4);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
}
.vuelto.falta { background: var(--red-s); border-color: var(--red); }
.vuelto .k { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text2); }
.vuelto .v {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: var(--ls-display);
  color: var(--green);
}
.vuelto.falta .v { color: var(--red); }

/* ── Listo (post venta) ──────────────────────────────────────────── */
.listo { text-align: center; padding: var(--e4) 0 0; }
.listo .tic {
  width: 68px; height: 68px; border-radius: var(--r-full);
  background: var(--green-s); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--e3);
}
.listo h3 { font-size: var(--t-title); font-weight: 700; }
.listo .nro { color: var(--text3); font-size: var(--t-ui); margin-bottom: var(--e4); }

/* ── Ventas ──────────────────────────────────────────────────────── */
.venta {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--sep);
  text-align: start; width: 100%;
}
.venta:last-child { border-bottom: none; }
.venta.anulada { opacity: 0.5; }
.venta.anulada .imp { text-decoration: line-through; }
.venta .meta { flex: 1; min-width: 0; }
.venta .meta .l1 { font-weight: 600; }
.venta .meta .l2 { font-size: var(--t-small); color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venta .imp { font-weight: 700; font-size: var(--t-body); }
.tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.tag.efectivo      { background: var(--green-s);  color: var(--green); }
.tag.transferencia { background: var(--blue-s);   color: var(--blue); }
.tag.tarjeta       { background: var(--orange-s); color: var(--orange); }
.tag.anulada       { background: var(--red-s);    color: var(--red); }
.tag.otra          { background: var(--bg2);      color: var(--text2); }

/* ── Vacio ───────────────────────────────────────────────────────── */
.vacio {
  text-align: center; padding: var(--e6) var(--e4);
  color: var(--text3);
}
.vacio p { margin-bottom: var(--e4); max-width: 34ch; margin-inline: auto; }
.vacio strong { color: var(--text); display: block; font-size: var(--t-body); margin-bottom: var(--e1); }

/* ── Cierre ──────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e3); }
/* Con tres KPI y dos columnas, el tercero quedaba solo con medio ancho
   vacío al lado. Que ocupe la fila entera. */
@media (max-width: 879px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3):last-child { grid-column: 1 / -1; }
}
.kpi {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r3); box-shadow: var(--shadow);
  padding: var(--e3);
}
.kpi .k { font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text3); }
.kpi .v {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; letter-spacing: var(--ls-display); line-height: 1.15;
}
.kpi.destaca { background: var(--destacado-s); border-color: var(--destacado); }
.barra-prod {
  height: 6px; border-radius: var(--r-full);
  background: var(--accent); opacity: 0.85;
  margin-top: 6px; min-width: 3px;
}
.aviso {
  background: var(--destacado-s);
  border: 1px solid var(--destacado);
  border-radius: var(--r3);
  padding: var(--e3);
  font-size: var(--t-ui); color: var(--text2);
}
.aviso strong { color: var(--text); }

/* ── Toast ───────────────────────────────────────────────────────── */
.toast {
  position: fixed; z-index: 200;
  inset-inline: var(--e4);
  bottom: calc(var(--barra-h) + env(safe-area-inset-bottom) + var(--e4));
  margin-inline: auto; max-width: 420px;
  background: var(--text); color: var(--bg);
  padding: var(--e3) var(--e4); border-radius: var(--r2);
  box-shadow: var(--shadow3);
  font-size: var(--t-ui); font-weight: 600; text-align: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s;
}
.toast.visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* Con una hoja abierta el aviso sube por encima de ella. Medido: tapaba los
   48px enteros de "Imprimir ticket", el botón que se busca justo después de
   cobrar. Seguía siendo clickeable pero invisible, que es peor que si no
   funcionara — no se entiende por qué no pasa nada. */
.toast.sobre-hoja { bottom: auto; top: calc(env(safe-area-inset-top) + var(--e4)); z-index: 300; }

/* ── Escritorio ──────────────────────────────────────────────────── */
/* El corte esta donde el contenido deja de entrar (grilla + carrito de
   340px al lado), no en un ancho de catalogo. */
@media (min-width: 880px) {
  :root { --pad-pantalla: var(--e5); }
  /* Centrado: el tope de 560px lo dejaba pegado al borde izquierdo
     mientras todo lo de abajo estaba centrado. Dos ejes distintos en la
     misma pantalla se notan aunque no se sepa por que. */
  .seg { margin-top: var(--e4); max-width: 560px; margin-inline: auto; }
  .pantalla { padding-block: var(--e5) var(--e6); }
  /* Vender necesita todo el ancho para la grilla. Las otras tres son
     lectura y formulario: estiradas a 1400 quedaba un campo de precio de
     657px para cuatro dígitos, y 1200px de vacío entre el nombre de un
     producto y sus flechas. El ojo no cruza eso: deja de leerse como una
     fila. */
  #p-productos, #p-ventas, #p-cierre { max-width: 880px; }
  /* La barra de "qué se vendió" a 1300px de largo por 6 de alto se lee como
     un subrayado, no como una barra. */
  .barra-prod { height: 8px; max-width: 420px; }
  #p-vender {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    padding-bottom: var(--e6);
  }
  /* El carrito ocupa el alto de la pantalla y COBRAR queda ANCLADO abajo.
     Antes el panel medía lo que medía su contenido, así que el botón se
     movía de lugar segun cuantos productos tuviera la venta y quedaba
     flotando a media pantalla. En una caja que se usa parada y con cola,
     la accion principal tiene que estar SIEMPRE en el mismo lugar: la
     mano va sola y no hay que buscarla. */
  .carrito-panel {
    position: sticky; top: calc(var(--top-h) + var(--e5));
    height: calc(100vh - var(--top-h) - var(--e5) * 2);
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r3);
    box-shadow: var(--shadow);
    padding: var(--e4);
    /* El hueco con la grilla es MAS GRANDE que el de la grilla con el
       indice: elegir y cobrar son dos cosas distintas, y el espacio es
       lo que lo dice. Con los tres huecos iguales se leian como pares. */
    margin-inline-start: var(--e4);
  }
  .carrito-lista { flex: 1; min-height: 0; max-height: none; }
  .barra { display: none !important; }
  .toast { bottom: var(--e5); }
  .grilla { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  .velo { align-items: center; }
  .hoja { border-radius: var(--r3); max-height: 88vh; }
}

/* Desde 1200 entra el indice al costado sin apretar la grilla. La medida
   crece con el: mantenerla en 1280 con una columna mas dejaba tarjetas de
   168px, el minimo, y en una caja tactil eso es peor que un poco de aire
   de menos a los costados. */
@media (min-width: 1200px) {
  :root { --medida: 1400px; }
  #p-vender { grid-template-columns: 132px minmax(0, 1fr) 364px; gap: var(--e4); }
  .indice {
    display: block;
    position: sticky; top: calc(var(--top-h) + var(--e5));
  }
  /* Con el indice al costado los chips repiten la misma informacion, y
     dos navegaciones para lo mismo confunden mas de lo que ayudan. */
  .cats { display: none; }
  .cat-sec { scroll-margin-top: calc(var(--top-h) + var(--e5)); }
}
@media (max-width: 879px) {
  .carrito-panel { display: none; }
  /* Los chips se pegan bajo la cabecera: son la navegacion entre categorias
     en celular, y si hay que scrollear hasta arriba para usarlos dejan de
     servir justo cuando hay cola. */
  .cats {
    position: sticky; top: var(--top-h); z-index: 30;
    background: var(--bg);
    padding-block: var(--e2);
    margin-block: calc(var(--e2) * -1) 0;
  }
}
/* A 340px (celulares chicos) dos columnas de 150px + 12 de gap no entran. */
@media (max-width: 359px) {
  .grilla { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

/* El segmento con sus cuatro rotulos necesita 325px; un iPhone SE da 320.
   Medido, no estimado: se aprieta lo justo para entrar en 320 y sobra
   margen hasta 300. Arriba de 380 no cambia nada. */
@media (max-width: 380px) {
  :root { --pad-pantalla: var(--e3); }
  .seg button { font-size: 13px; padding: 0 6px; }
  .seg .badge { margin-inline-start: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active, .prod:active, .chip:active, .paso:active, .cerrar:active { scale: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   TICKET — solo existe al imprimir
   ═══════════════════════════════════════════════════════════════════
   Ancho por defecto 80mm; con body.t58 pasa a 58mm. El @page se declara
   dos veces porque size: no se puede cambiar por variable CSS. */
/* La regla @page NO va aca: `size:` no acepta variables CSS, asi que la
   escribe app.js en <style id="regla-pagina">, que ya trae el 80mm por
   defecto puesto en el HTML. Duplicarla aca solo confunde sobre cual manda. */
#ticket { display: none; }

#menu { display: none; }

@media print {
  /* Nada de la app se imprime: sale el ticket, o el menu. Nunca los dos.
     Cual de los dos lo decide body.menu, que pone app.js antes de llamar
     a imprimir y saca despues. */
  body > *:not(#ticket):not(#menu) { display: none !important; }
  body.menu #ticket { display: none !important; }
  body:not(.menu) #menu { display: none !important; }
  body {
    background: #fff; color: #000;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #ticket {
    display: block;
    width: 72mm;              /* 80mm de papel - 4mm de margen por lado */
    margin: 0 auto;
    padding: 3mm 0 8mm;       /* el corte de la termica come los ultimos mm */
    font-family: var(--font-sans);
    font-size: 11pt;
    line-height: 1.32;
    color: #000;
  }
  body.t58 #ticket { width: 50mm; font-size: 9pt; }
  /* El logo real en el ticket: NEGRO. La térmica es monocroma —
     el violeta de marca sale como un gris sucio y desparejo. */
  #ticket .tk-logo { text-align: center; margin-bottom: 1.5mm; }
  /* Por ancho, con alto automatico. El lienzo del SVG era cuadrado y el
     logo es un lockup 3,8:1, asi que 26x26mm daban letras de 3,5mm
     rodeadas de aire. Ahora el ancho que se pide es ancho de tinta. */
  #ticket .tk-logo svg { width: 40mm; height: auto; display: inline-block; }
  body.t58 #ticket .tk-logo svg { width: 32mm; height: auto; }
  #ticket .tk-logo .lp-1, #ticket .tk-logo .lp-2 { fill: #000000; }

  /* En el A4 sí va en color: es papel blanco e impresora común. */
  #menu .mn-logo { line-height: 0; }
  #menu .mn-logo svg { width: 62mm; height: auto; }
  #menu .mn-logo .lp-1 { fill: #613f75; }
  #menu .mn-logo .lp-2 { fill: #402c4f; }
  body.menu-pizarra #menu .mn-logo { text-align: center; margin-bottom: 2mm; }
  body.menu-bloques #menu .mn-logo { margin-bottom: 2mm; }
  #menu .mn-ig {
    margin-inline-start: 4mm; padding-inline-start: 4mm;
    border-inline-start: 0.5pt solid #cecbd0; color: #706d71;
  }

  #ticket .tk-marca {
    font-family: var(--font-display);
    font-size: 17pt; font-weight: 800; letter-spacing: -0.02em;
    text-align: center; line-height: 1.1;
  }
  body.t58 #ticket .tk-marca { font-size: 14pt; }
  #ticket .tk-sub  { text-align: center; font-size: 8pt; }
  #ticket .tk-hr   { border: none; border-top: 1px dashed #000; margin: 2.5mm 0; }
  /* flex-start explicito: cuando el nombre del producto ocupa dos o tres
     lineas, el importe queda alineado con la PRIMERA, como en cualquier
     ticket. Con el stretch por defecto se ve igual, pero por accidente. */
  #ticket .tk-fila { display: flex; justify-content: space-between; gap: 3mm; align-items: flex-start; }
  #ticket .tk-fila .d { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  #ticket .tk-fila .m { white-space: nowrap; font-variant-numeric: tabular-nums; }
  #ticket .tk-item  { margin-bottom: 1.2mm; }
  #ticket .tk-item .u { font-size: 8pt; }
  #ticket .tk-total { font-weight: 800; font-size: 14pt; }
  body.t58 #ticket .tk-total { font-size: 12pt; }
  #ticket .tk-pie  { text-align: center; font-size: 8pt; margin-top: 3mm; }
  #ticket .tk-b    { font-weight: 700; }
  #ticket .tk-c    { text-align: center; }

  /* ── MENU A4 PARA EL MOSTRADOR ────────────────────────────────
     Se lee parado, a medio metro o mas: por eso los nombres van a 14pt
     y no al 10 u 11 de una carta de restaurante, que se lee sentado.

     Pensado para IMPRESORA COMUN SOBRE PAPEL BLANCO: fondo blanco y el
     violeta como TINTA, nunca como fondo de pagina. Un A4 con fondo
     violeta pleno sale humedo, se arruga y se come el cartucho.
     El amarillo aparece solo en contenedores chicos, que es lo que
     significa en la marca: "aca esta el dato". */
  body.menu #menu {
    display: block;
    color: #231f25;
    font-family: var(--font-sans);
    /* Los colores del menu van en hex y no en tokens: el papel es blanco
       siempre, asi que el modo oscuro no puede opinar sobre esto. */
  }
  #menu .mn-marca {
    font-family: var(--font-display);
    font-weight: 800; letter-spacing: -0.03em; line-height: 1;
    color: #643c7b;
  }
  #menu .mn-sub {
    font-weight: 600; font-size: 10pt;
    letter-spacing: 0.3em; text-transform: uppercase; color: #706d71;
  }
  #menu .mn-cat { break-inside: avoid; page-break-inside: avoid; }
  #menu .mn-cat-t {
    font-family: var(--font-display);
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  }
  #menu .mn-it {
    display: flex; align-items: baseline; gap: 4mm;
    break-inside: avoid; page-break-inside: avoid;
  }
  #menu .mn-n { font-size: 14pt; font-weight: 500; }
  /* Puntos guía dibujados como fondo, no como un borde punteado.
     El borde punteado a 0,5pt lo rasteriza el driver de la impresora, y a
     esa escala redondea cada punto a un píxel entero: salían guiones de
     largo desparejo, no puntos. Un radial-gradient con el punto medido en
     milímetros se imprime igual en cualquier impresora. */
  #menu .mn-guia {
    flex: 1 1 auto; min-width: 5mm; height: 0.8mm;
    transform: translateY(-1mm);
    background-image: radial-gradient(circle 0.3mm at center, #b3b0b6 100%, transparent 0);
    background-size: 2mm 0.8mm; background-repeat: repeat-x; background-position: 0 50%;
  }
  /* En Bloques cada fila ya lleva su línea separadora: los puntos encima
     eran una segunda raya diciendo lo mismo. */
  body.menu-bloques #menu .mn-guia { background-image: none; }
  #menu .mn-p {
    font-family: var(--font-display);
    font-weight: 800; font-size: 15pt; white-space: nowrap;
  }
  #menu .mn-pie {
    margin-top: 6mm; padding-top: 3mm;
    border-top: 1pt solid #cecbd0;
    display: flex; align-items: center; justify-content: space-between; gap: 6mm;
  }
  #menu .mn-pagos { font-size: 11pt; font-weight: 600; color: #534f55; }
  /* El alias va adentro del contenedor amarillo y en cifras grandes: lo
     va a copiar alguien parado, mirando de lejos, con el telefono en la
     otra mano. Un punto mal leido es una transferencia perdida. */
  #menu .mn-alias {
    background: #f6d468; border-radius: 6mm;
    padding: 2.5mm 6mm; display: flex; align-items: baseline; gap: 3mm;
  }
  #menu .mn-alias-k {
    font-size: 9pt; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: #534f55;
  }
  #menu .mn-alias-v {
    font-family: var(--font-display);
    font-weight: 800; font-size: 16pt; letter-spacing: 0.01em; color: #231f25;
  }

  /* ── A · PIZARRA: el precio en capsula amarilla ──
     Los aires estan medidos: con los 18 productos de hoy la hoja daba
     287mm contra los 273 utiles de un A4 con margen de 12, y tiraba una
     segunda pagina para imprimir solo el pie. Los milimetros salen del
     aire entre bloques, nunca del cuerpo de letra: el menu se lee parado
     y de lejos. Si en algun momento no entra, esta el interruptor de dos
     columnas. */
  body.menu-pizarra #menu .mn-top {
    text-align: center; padding-bottom: 4mm;
    border-bottom: 1.2mm solid #643c7b; margin-bottom: 6mm;
  }
  body.menu-pizarra #menu .mn-marca { font-size: 34pt; }
  body.menu-pizarra #menu .mn-sub { margin-top: 1.5mm; }
  body.menu-pizarra #menu .mn-cat { margin-bottom: 5mm; }
  body.menu-pizarra #menu .mn-cat-t { font-size: 20pt; color: #643c7b; margin-bottom: 2.5mm; }
  body.menu-pizarra #menu .mn-it { margin-bottom: 2mm; }
  body.menu-pizarra #menu .mn-p {
    background: #f6d468; border-radius: 5mm;
    padding: 1.2mm 4mm; color: #231f25;
  }
  body.menu-pizarra #menu .mn-pie { justify-content: center; gap: 8mm; }

  /* ── C · BLOQUES: cada categoria en su caja ── */
  body.menu-bloques #menu .mn-top { margin-bottom: 6mm; }
  body.menu-bloques #menu .mn-marca { font-size: 30pt; }
  body.menu-bloques #menu .mn-sub { margin-top: 1mm; }
  body.menu-bloques #menu .mn-cat {
    border: 0.8mm solid #643c7b; border-radius: 5mm;
    overflow: hidden; margin-bottom: 5mm;
  }
  body.menu-bloques #menu .mn-cat-t {
    font-size: 15pt; text-transform: uppercase; letter-spacing: 0.02em;
    background: #643c7b; color: #ffffff;
    padding: 2mm 6mm; margin: 0;
  }
  body.menu-bloques #menu .mn-items { padding: 1.5mm 6mm 2mm; }
  body.menu-bloques #menu .mn-it {
    /* 1,8mm arriba y abajo por 18 filas eran 65mm de puro aire: el pie
       se iba solo a una segunda hoja. La fila igual queda en 9mm y tiene
       su linea separadora. */
    padding: 1.2mm 0; border-bottom: 0.5pt solid #e6e3e9;
  }
  body.menu-bloques #menu .mn-it:last-child { border-bottom: none; }
  body.menu-bloques #menu .mn-p { color: #643c7b; }

  /* ── DOS COLUMNAS ────────────────────────────────────────────
     Medido: con una columna entran 13 productos en la hoja; con 14 ya
     se va a la segunda. Un menú de mostrador en dos hojas es peor menú,
     así que esto duplica la capacidad SIN tocar el estilo elegido.
     Sólo se parten las columnas del cuerpo: el encabezado y el alias
     siguen cruzando la hoja entera. */
  body.menu-2col #menu .mn-cuerpo {
    column-count: 2;
    column-gap: 9mm;
  }
  /* Una categoría partida al medio por el salto de columna es ilegible:
     preferís aire de más antes que "Helado" arriba y sus precios en la
     otra columna. */
  body.menu-2col #menu .mn-cat {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
  }
  body.menu-2col #menu .mn-n { font-size: 12.5pt; }
  body.menu-2col #menu .mn-p { font-size: 13pt; }
  body.menu-2col.menu-pizarra #menu .mn-cat-t { font-size: 16pt; }
  body.menu-2col.menu-bloques #menu .mn-cat-t { font-size: 13pt; }
}