/* ═══ MLB · sistema visual ═══
   Verde = plata que entró, y nada más.
   Amarillo = lo que se navega.  Rojo = lo que hay que atender. */
:root{
  --ground:#0E0D10;
  --surface:#17161A;
  --surface-2:#1F1D23;
  --line:#38343F;
  --line-soft:#2A272F;
  --ink:#EFEAE3;
  /* Estos negocios trabajan de noche, al aire libre y con la pantalla sucia.
     Medidos sobre la tarjeta oscura: ink-2 10.0:1 · ink-3 6.9:1
     (antes ink-3 estaba en 3.3:1, por debajo del mínimo legible). */
  --ink-2:#D8D2DA;
  --ink-3:#BAB2BF;
  --red:#FF6A5E;      /* medido: 5.70:1 en el peor de los 6 fondos */
  --red-dim:#A03D33;
  --yellow:#F5C244;
  --yellow-dim:#8A6C1F;
  --money:#4ADE80;      /* validado 11.5:1 sobre el fondo */
  --money-2:#34A85C;
  --money-dim:#1E6B3C;
  /* Verde tranquilo para la línea de la licencia: se lee a 11px sobre los
     seis fondos (peor caso 7.9:1) sin robarle el show al número de ventas.
     El --money-dim que estaba antes daba 2.9:1 — ilegible, medido. */
  --lic-ok:#3BBF6E;
  --wa:#25D366;
}

/* ═══ LOS CINCO FONDOS ═══
   Solo cambian el suelo y las tarjetas. El verde, el amarillo y el rojo
   NO se tocan nunca: en esta app significan algo —plata que entró, lo
   que se navega, lo que hay que atender— y cambiarlos por gusto rompería
   el idioma que el dueño ya aprendió.

   Los cinco están medidos: el peor contraste de los cinco es 5.5:1,
   por encima del mínimo. No se escogieron a ojo. */
:root[data-tema="vino"]{
  --ground:#2C0814; --surface:#3A0F1D; --surface-2:#471526;
  --line:#63263C; --line-soft:#4C1A2C;
}
:root[data-tema="selva"]{
  --ground:#001A12; --surface:#04251B; --surface-2:#093024;
  --line:#17493A; --line-soft:#0F372B;
}
:root[data-tema="noche"]{
  --ground:#09172F; --surface:#0E2141; --surface-2:#142B52;
  --line:#25436F; --line-soft:#193254;
}
:root[data-tema="cafe"]{
  --ground:#1F1400; --surface:#2C1E06; --surface-2:#38270B;
  --line:#54401A; --line-soft:#3E2E10;
}
:root[data-tema="ciruela"]{
  --ground:#1E0A2C; --surface:#2A1039; --surface-2:#361747;
  --line:#4E2B66; --line-soft:#3A1E4E;
}

/* El resto del archivo sigue usando los mismos nombres: con cambiar el
   atributo del <html> cambia todo, sin tocar una sola regla más. */
:root{
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* 16px evita el zoom de iOS. `line-height` explícito: el 1.5 del body se
   heredaba y dejaba el cursor más alto que el texto, corrido hacia abajo. */
input,textarea{font-family:inherit;font-size:16px;line-height:1.25}
:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ── estructura ── */
.app{min-height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto}
/* ── LA VERSIÓN, SIEMPRE ABAJO DEL TODO ──
   Iba al final del contenido, y cuando el contenido es corto —un mesero
   sin mesas abiertas— quedaba flotando en la mitad de la pantalla,
   robando atención justo donde el ojo busca lo que tiene que hacer.
   Ahora la vista ocupa el alto de la pantalla y la versión se empuja
   hasta el fondo: siempre en el mismo sitio, en todas las pantallas. */
.vista{flex:1;display:flex;flex-direction:column;min-height:100dvh;
       padding:calc(var(--safe-t) + 14px) 16px calc(var(--safe-b) + 20px)}
.vista > .ver{margin-top:auto}
.oculto{display:none !important}

/* ── encabezado ── */
.cabe{text-align:center;padding-bottom:4px}

/* ── la marca del negocio ──
   Nombre en amarillo y mayúsculas, con una banda de brillo que le pasa
   por encima cada 3 segundos. El logo a la derecha, con el mismo borde
   amarillo para que hagan juego. */
/* Rejilla de tres columnas: un hueco del ancho del logo, el nombre y el
   logo. Así el nombre queda centrado DE VERDAD en la pantalla y no
   corrido hacia la izquierda por el peso del círculo. */
.marca{
  display:grid;grid-template-columns:64px 1fr 64px;
  align-items:center;gap:10px;
  /* Simétrico: mete el círculo hacia adentro sin descentrar el nombre. */
  padding:0 10px;
}
.marca-n{grid-column:2;position:relative;min-width:0;text-align:center}
.marca-n .mn-b,.marca-n .mn-l{
  display:block;font-size:25px;font-weight:900;line-height:1.02;
  letter-spacing:.005em;text-wrap:balance;
}
/* Amarillo limpio, sin halo: el destello que cruza por dentro de la
   letra es suficiente, y el halo le quitaba filo al texto. */
.marca-n .mn-b{ color:var(--yellow) }
/* La copia de arriba lleva el brillo, recortado al trazo de la letra.
   Como el "Premium" de PUMPLE pero más pausado: la banda cruza despacio
   (2 s) y se queda quieta hasta completar 5 s. La banda es BLANCA Y DE
   BORDE DURO, no un degradado difuminado — es lo que la hace ver como
   destello y no como una sombra que pasa. */
.marca-n .mn-l{
  position:absolute;inset:0;pointer-events:none;color:transparent;
  background-image:linear-gradient(90deg,
    rgba(255,255,255,0) 0,      rgba(255,255,255,0) 47.2%,
    #fff 48%,                   #fff 52%,
    rgba(255,255,255,0) 52.8%,  rgba(255,255,255,0) 100%);
  background-size:300% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  animation:brillo 7s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes brillo{
  0%  {background-position:135% 0}
  57% {background-position:-35% 0}   /* 4 s de recorrido, bien pausado */
  100%{background-position:-35% 0}   /* 3 s quieto */
}
@media (prefers-reduced-motion:reduce){ .marca-n .mn-l{animation:none} }

.marca-l{
  /* La rejilla del padre puede estirar la celda; sin `align-self` el
     círculo crecía a lo alto y quedaba de huevo. Estas cuatro juntas
     lo dejan cuadrado pase lo que pase. */
  grid-column:3;align-self:center;justify-self:end;flex:none;
  width:64px;height:64px;min-width:64px;max-width:64px;
  min-height:64px;max-height:64px;aspect-ratio:1;
  border-radius:50%;
  border:2px solid var(--yellow);overflow:hidden;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
.marca-l img{width:100%;height:100%;object-fit:cover;display:block}
.marca-l b{font-size:24px;font-weight:800;color:var(--yellow)}
.marca-l.vacio{border-style:dashed;border-color:var(--yellow-dim)}
.marca-l.vacio span{font-size:20px;color:var(--yellow-dim);line-height:1}
.marca-l.tocable{cursor:pointer}
.marca-l.tocable:active{transform:scale(.95)}

/* ── el editor del logo ── */
.logo-prev{display:flex;justify-content:center;margin:16px 0 4px}
.logo-prev .marca-l{grid-column:auto;justify-self:auto;
  width:104px;height:104px;min-width:104px;max-width:104px;
  min-height:104px;max-height:104px;border-width:3px}
.logo-prev .marca-l span{font-size:30px}
.logo-marco{display:flex;justify-content:center;margin:16px 0 6px}
.logo-marco canvas{
  width:220px;height:220px;max-width:70vw;max-height:70vw;
  border-radius:50%;border:3px solid var(--yellow);
  touch-action:none;cursor:grab;background:var(--surface-2);display:block;
}
.logo-marco canvas:active{cursor:grabbing}
/* El marco también sin gestos del navegador: en iPhone el pellizco se lo
   llevaba el zoom de la página y nunca llegaba al recorte. */
.logo-marco{touch-action:none}
/* Botones de acercar: si el pellizco falla en algún celular, esto no. */
.logo-zoom{display:flex;gap:8px;justify-content:center;margin:12px 0 4px}
.logo-zoom button{
  min-width:54px;padding:11px 14px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-size:19px;font-weight:800;line-height:1;
}
.logo-zoom button.c{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--ink-2);flex:1;max-width:150px}
.logo-zoom button:active{background:var(--surface-2)}

.neg{font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.15;text-wrap:balance}
.fecha{font-size:15px;font-weight:600;color:var(--ink-2);margin-top:10px;line-height:1.2}
.fecha::first-letter{text-transform:uppercase}
.hora{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:3px;letter-spacing:.04em}

/* Hasta cuándo está paga. Chiquito: informa, no cobra. */
.lic{font-size:11px;margin-top:7px;letter-spacing:.01em;line-height:1.3}
.lic-verde{color:var(--lic-ok)}
.lic-amarillo{color:var(--yellow)}
.lic-rojo,.lic-vencida{color:var(--red);font-weight:600}

/* ── el número ── */
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.centro{text-align:center}
.plata{
  font-weight:800;font-size:clamp(52px,17vw,74px);letter-spacing:-.055em;line-height:.95;
  color:var(--money);font-variant-numeric:tabular-nums;display:block;
  transition:text-shadow .45s ease,transform .18s ease;
}
.plata.pulso{text-shadow:0 0 28px rgba(74,222,128,.5);transform:scale(1.03)}
.meta-txt{font-size:13px;color:var(--ink-2);margin-top:10px}

/* ── LA PANTALLA DEL MESERO ──
   Un solo renglón arriba: dónde está y quién es. Sin marca grande y sin
   logo — el mesero no está mirando de quién es la app, está pendiente de
   que no se le enfríe una mesa. De ahí para abajo todo es trabajo.
   La del dueño no se toca: esa sí es para mirar de lejos. */
.cabe-mes{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:2px 0 10px;margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
.cabe-mes .cm-n{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cabe-mes .cm-y{
  font-size:13.5px;font-weight:800;color:var(--ink-2);flex:0 0 auto;
}

/* La cifra del mesero salió de aquí: estaba dos veces en la misma
   pantalla (arriba y en el ranking) y arriba no servía para nada. Se quedó
   solo en el ranking, que es donde tiene sentido porque ahí se compara. */
.meta-txt .up{color:var(--money);font-weight:650}
.meta-txt .down{color:var(--red);font-weight:650}
.sutil{font-size:12.5px;color:var(--ink-3);margin-top:4px}

/* ── barra de meta ── */
.metabox{margin-top:14px}
.metatop{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-2);margin-bottom:7px}
.metatop b{color:var(--ink);font-weight:650}
.metabar{height:8px;border-radius:99px;background:#1E1C22;overflow:hidden}
.metafill{height:100%;width:0;border-radius:99px;background:var(--money);transition:width .6s cubic-bezier(.2,.7,.3,1)}
.metafill.pasada{background:linear-gradient(90deg,var(--money),var(--yellow))}

/* ── LA CARRERA HACIA LA META ──
   La bolsa avanza con cada venta hacia la bandera. Un porcentaje no
   aprieta a nadie; ver la bolsa a dos dedos de la bandera, sí. */
/* Pequeños y discretos: el que manda en la pantalla es el número verde
   de las ventas. Esto es un guiño al lado, no el espectáculo. */
.pista{
  position:relative;height:22px;margin:4px 0 2px;
  padding-right:19px;                  /* el sitio de la bandera */
}
.pista::before{                        /* el camino */
  content:'';position:absolute;left:0;right:19px;top:50%;height:6px;
  transform:translateY(-50%);border-radius:99px;background:#1E1C22;
}
.pista-hecho{
  position:absolute;left:0;top:50%;height:6px;width:0;
  transform:translateY(-50%);border-radius:99px;background:var(--money);
  transition:width .7s cubic-bezier(.2,.7,.3,1);
  max-width:calc(100% - 19px);
}
.pista-bolsa{
  position:absolute;top:50%;left:0;font-size:12.5px;line-height:1;
  transform:translate(-50%,-50%);
  transition:left .7s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));
  will-change:left;
}
.pista-meta{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:16px;line-height:1;opacity:.7;
  transition:right .7s cubic-bezier(.2,.7,.3,1);
}
/* Al llegar, la bandera celebra. */
.pista.lograda .pista-hecho{background:linear-gradient(90deg,var(--money),var(--yellow))}
.pista.lograda .pista-meta{opacity:.9;animation:ondea 1.4s ease-in-out infinite}
@keyframes ondea{0%,100%{transform:translateY(-50%) rotate(-6deg)}50%{transform:translateY(-50%) rotate(6deg)}}
.metafoot.lograda b{color:var(--yellow)}
/* Mientras la meta es estimada, se dice. Prometer precisión que no
   tenemos es la forma más rápida de perder la confianza. */
.metafoot .apenas{display:block;font-style:normal;font-size:11px;
  color:var(--ink-3);margin-top:5px;line-height:1.45}
.metafoot{font-size:12px;color:var(--ink-3);margin-top:7px}
.metafoot b{color:var(--money);font-weight:650}
.metafoot.lograda b{color:var(--yellow)}

/* ── secciones ── */
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin:24px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.sec-h .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.sec-h .v{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.sec-h .v.mal{color:var(--red)}

/* ── botones ── */
.btn{display:block;width:100%;text-align:center;font-weight:800;font-size:15px;padding:16px;border-radius:12px;letter-spacing:-.01em;margin-top:12px}
.btn.verde{background:var(--money);color:#06280F}
.btn.oro{background:var(--yellow);color:#2A1F00}
.btn.rojo{background:var(--red);color:#fff}
.btn.wa{background:var(--wa);color:#06280F}
.btn.fantasma{background:transparent;border:1px solid var(--line);color:var(--ink-2);font-weight:600;font-size:13.5px;padding:13px}
/* ── EL BOTÓN QUE HACE ALGO PERO NO GRITA ──
   En el cuadro de una mesa había tres botones a todo color, de lado a
   lado: al abrirla, lo primero que se veía era una pared amarilla y
   verde, no los productos. El color pleno queda para UNO solo —el de
   cobrar, que es el que mueve la plata—; los demás se ven, se tocan, y
   no compiten. (Álix, 26-ago-2026.) */
.btn.suave{background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink);font-weight:700;font-size:14px;padding:14px}
.btn:disabled,.btn.off{background:#252229;color:rgba(255,255,255,.46)}
.btn:active{transform:scale(.985)}

/* ── vacío ── */
.vacio{text-align:center;color:var(--ink-3);padding:34px 12px;font-size:14px;line-height:1.7}

/* ── carga ── */
/* La pantalla de entrada. Es lo primero que ve el cliente cada vez que
   abre, así que aquí es donde la marca se gana el espacio: el carrito
   grande, las iniciales, y el nombre completo debajo. */
.cargando{display:flex;align-items:center;justify-content:center;
  min-height:100dvh;flex-direction:column;gap:0}
.cargando img{
  width:182px;height:182px;max-width:48vw;max-height:48vw;
  border-radius:26px;animation:respira 2.4s ease-in-out infinite;
}
/* Las iniciales y el nombre, con los colores del logo: rojo el carrito,
   amarillo el toldo. Y cada palabra del color de su inicial —
   M·My rojo, L·Little amarillo, B·Business rojo. */
.cargando .ini{
  font-family:var(--mono);font-size:26px;letter-spacing:.42em;
  text-transform:uppercase;font-weight:800;
  margin-top:20px;padding-left:.42em;
}
.cargando .nom{
  font-size:16px;letter-spacing:.02em;font-weight:700;margin-top:8px;
}
.cargando i, .cargando u{font-style:normal;text-decoration:none}
.cargando i{color:var(--red)}
.cargando u{color:var(--yellow)}
.cargando.saliendo{opacity:0;transition:opacity .45s ease}
@keyframes respira{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Cerrar el turno: pequeño, centrado, negro con letra roja.
   Tiene que verse disponible pero nunca invitar a tocarlo. */
/* ── CERRAR EL TURNO ──
   Era una pastilla pequeña y centrada, para que no se tocara sin querer.
   Pero el resultado fue el contrario del buscado: no se entendía que ESE
   es el botón con el que se cierra el día, y un turno que no se cierra
   le suma las ventas de mañana a las de hoy — que es de lo más caro que
   le puede pasar a un negocio.
   Ahora ocupa el ancho de la pantalla y se lee de lejos. Sigue en rojo
   sobre negro, sin relleno: se ve que es de otra naturaleza que los
   demás, y ya de por sí pregunta antes de cerrar. (Álix, 26-ago-2026.) */
.cerrar-turno{
  display:block;width:100%;margin:22px 0 4px;padding:17px 20px;
  background:#000;color:var(--red);
  border:2px solid var(--red);border-radius:13px;
  font-family:var(--mono);font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;cursor:pointer;
}
.cerrar-turno:active{background:rgba(230,51,41,.14)}

/* ── tarjeta plegable ──
   Marco verde sutil. Recogida muestra su dato principal; el dueño la
   abre cuando quiera mirar y esa decisión se recuerda. */
.tj{border:1px solid rgba(74,222,128,.22);border-radius:14px;
  background:var(--surface);margin:16px 0 0;overflow:hidden}
.tj-h{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:14px;background:none;border:0;cursor:pointer}
.tj-t{font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);font-weight:700;flex:0 0 auto}
.tj-r{flex:1;min-width:0;text-align:right;font-size:13px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tj.abierta .tj-r{opacity:0}
/* El triángulo es lo único que dice "esto se recoge": tiene que verse
   como un botón, no como un adorno. */
.tj-f{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--money);font-size:17px;line-height:1;
  border:1px solid rgba(74,222,128,.28);background:rgba(74,222,128,.08);
}
.tj-h:active .tj-f{background:rgba(74,222,128,.2)}
.tj-c{padding:0 14px 14px}
.tj-sub{font-family:var(--mono);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
/* Dentro de una tarjeta las secciones no repiten su línea de arriba. */
.tj-c .sec-h{margin-top:14px;padding-top:14px}
.tj-c > div > .sec-h:first-child{margin-top:0;padding-top:0;border-top:0}

/* ── el detalle de una cuenta ──
   Cada producto con su precio a la derecha y el total abajo. Estas cuatro
   clases se usaban en app.js Y en mesero.js SIN existir en el CSS: los
   renglones salían apilados sin alineación y el precio pegado al nombre,
   justo en la pantalla donde se cobra. Es el tercer caso del mismo tipo
   (antes .chips y .toast) — cruzar las clases usadas contra el CSS tiene
   que ser parte del cierre de cada módulo. */
/* ── EL PEDIDO, EN SU MARCO ──
   Los productos y el total iban sueltos y seguidos venían los botones:
   no se veía dónde empezaba ni dónde terminaba lo que el cliente pidió.
   (Álix, 29-ago-2026.) */
.ped-caja{border:1px solid var(--line);border-radius:14px;
  padding:4px 14px 14px;margin:4px 0 16px;background:var(--surface)}
.ped-caja .det-li:last-of-type{border-bottom:0}
.ped-caja .acc-n{margin-bottom:0}

.det-li{display:flex;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line)}
/* Los productos son a lo que se abre esta pantalla: van grandes.
   (Álix, 26-ago-2026 — estaban en 14.5px, más chicos que los botones.) */
.det-li .dn{flex:1;min-width:0;font-size:18px;font-weight:600;color:var(--ink);line-height:1.3}
.det-li .dp{flex:0 0 auto;font-family:var(--mono);font-size:16px;
  font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.det-tot{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-top:12px;padding-top:11px;border-top:2px solid var(--line)}
.det-tot span{font-size:13px;color:var(--ink-2)}
.det-tot b{font-family:var(--mono);font-size:22px;font-weight:800;
  color:var(--money);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Aviso corto. Lo usa la pantalla del mesero; sin esto salía como
   texto suelto al final del documento y el mesero nunca lo veía. */
.toast{position:fixed;left:16px;right:16px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  z-index:95;background:var(--money);color:#06280F;
  font-weight:700;font-size:13.5px;text-align:center;
  padding:14px;border-radius:12px;max-width:490px;margin:0 auto;
  box-shadow:0 8px 28px rgba(0,0,0,.45)}

/* Quien ya tiene su acceso de esta noche. */
.op.hecho{border-color:var(--money-dim);background:rgba(74,222,128,.05)}
.op.hecho .t b{color:var(--money)}
/* Sacar a alguien de la lista: discreto, para no invitar a tocarlo. */
.quitar-p{font-size:11.5px;color:var(--ink-3);text-align:right;
  padding:2px 6px 10px;margin-top:-6px;cursor:pointer}
.quitar-p:active{color:var(--red)}

/* Opción bloqueada: se ve, pero apagada y con su candado. */
.op.bloq{opacity:.5}
.op.bloq .fl{font-size:13px}

/* Qué puede y qué no un administrador. */
.permisos{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.pm{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;
  line-height:1.45;color:var(--ink-2)}
.pm span{flex:0 0 auto;width:15px;font-weight:800;font-family:var(--mono);font-size:12px}
.pm.si span{color:var(--money)}
.pm.no span{color:var(--red)}
.pm.no{color:var(--ink-3)}
.pm em{font-style:normal;color:var(--ink-3);opacity:.8}

/* Los negocios desactivados: recogidos abajo, con su menú esperando. */
.apagados{margin-top:22px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);overflow:hidden}
.apagados-h{display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 14px;background:none;border:0;cursor:pointer;text-align:left}
.apagados-h .t{flex:1;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700}
.apagados-h .n{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--ink-2)}
.apagados-h .f{color:var(--ink-3);font-size:12px}
.apagados-c{padding:0 12px 12px}
.neg-fila.apagado{opacity:.6;border-left-color:var(--ink-3)}
.neg-fila.apagado em{display:block;font-style:normal;font-size:11px;
  color:var(--ink-3);margin-top:2px}
.neg-fila.apagado .rea{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--money);font-weight:700;
  border:1px solid var(--money-dim);border-radius:99px;padding:6px 10px}

/* ── VENDIENDO AHORA · el pulso de todos los negocios ── */
.vivo-tot{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.vivo-tot b{font-size:24px;font-weight:800;color:var(--money);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vivo-tot span{font-size:12.5px;color:var(--ink-3)}
.vivo{position:relative;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);overflow:hidden;margin-bottom:7px;
  padding:12px 13px;cursor:pointer}
.vivo.rey{border-color:var(--money-dim)}
.vivo-barra{position:absolute;left:0;top:0;bottom:0;
  background:rgba(74,222,128,.09);border-right:1px solid rgba(74,222,128,.20)}
.vivo.rey .vivo-barra{background:rgba(74,222,128,.15)}
.vivo-t{position:relative;display:grid;
  grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.vivo .vn{font-size:15px;font-weight:750;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vivo .vv{font-family:var(--mono);font-size:16px;font-weight:800;
  color:var(--money);font-variant-numeric:tabular-nums;text-align:right}
.vivo .vd{font-size:11.5px;color:var(--ink-3)}
.vivo .vh{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-align:right}

/* Lo que no tiene vuelta atrás: discreto, para no invitar a tocarlo. */
.peligro{
  display:block;width:100%;margin-top:18px;padding:12px;
  background:none;border:1px solid var(--red-dim);border-radius:11px;
  color:var(--red);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;
}
.peligro:active{background:rgba(230,51,41,.12)}

/* ── EL RODILLO ──
   Se gira como la alarma del celular. El que queda en la franja del
   centro es el escogido. */
.rod{
  position:relative;display:flex;gap:0;justify-content:center;
  height:170px;margin:14px 0 6px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  overflow:hidden;
  /* Se desvanece arriba y abajo: así se entiende que hay más girando. */
  -webkit-mask-image:linear-gradient(transparent,#000 26%,#000 74%,transparent);
  mask-image:linear-gradient(transparent,#000 26%,#000 74%,transparent);
}
.rod-banda{
  position:absolute;left:8px;right:8px;top:50%;height:38px;
  transform:translateY(-50%);border-radius:10px;
  background:rgba(74,222,128,.10);
  border-top:1px solid var(--money-dim);border-bottom:1px solid var(--money-dim);
  pointer-events:none;z-index:1;
}
.rod-col{
  flex:0 1 auto;min-width:88px;height:100%;overflow-y:auto;
  scroll-snap-type:y mandatory;scrollbar-width:none;
  /* Que rodar el rodillo no siga rodando el cuadro de atrás cuando llega
     al tope: es lo que hacía que la pantalla se fuera sola. */
  overscroll-behavior:contain;
  text-align:center;position:relative;z-index:2;
}
.rod-col::-webkit-scrollbar{display:none}
.rod-col.unid{min-width:104px;text-align:left}
.rod-esp{height:66px}          /* para que el primero y el último lleguen al centro */
.rod-it{
  height:38px;line-height:38px;scroll-snap-align:center;cursor:pointer;
  font-size:19px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  transition:color .12s,font-size .12s,font-weight .12s;
}
.rod-col.unid .rod-it{padding-left:10px;font-size:17px}
.rod-it.on{color:var(--money);font-size:23px;font-weight:800}
.rod-col.unid .rod-it.on{font-size:19px}

/* Lo que queda escogido, escrito con todas las letras. */
.rod-res{
  text-align:center;font-size:14px;color:var(--ink-2);
  padding:10px 4px 2px;line-height:1.5;
}
.rod-res b{color:var(--ink);font-weight:750}
.rod-res em{display:block;font-style:normal;font-size:12.5px;
  color:var(--ink-3);margin-top:3px}

/* La señal: un punto discreto, no una alarma. Trabajar sin conexión es
   normal en un puesto de comida y no hay nada que arreglar. */
.senal{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
  z-index:60;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 9px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-3);
  pointer-events:none;opacity:.85}
.senal.ok{width:8px;height:8px;padding:0;border:0;background:var(--money);opacity:.5}
.senal.sin{color:var(--ink-3);border-color:var(--line)}
.senal.cola{color:var(--yellow);border-color:var(--yellow-dim)}

/* ── LA PANTALLA DE COCINA ──
   Se lee de lejos, con las manos ocupadas. Todo más grande que en las
   otras pantallas y con un solo botón por comanda. */
.coc-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.coc-top .ct{font-family:var(--mono);font-size:13px;letter-spacing:.16em;
  color:var(--yellow);font-weight:700;flex:1;min-width:0}
.coc-top .cq{font-size:15px;color:var(--ink-2)}
.coc-top .cq b{font-size:26px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-right:5px}
.coc-top .cm{font-family:var(--mono);font-size:12px;font-weight:800;
  color:var(--red);letter-spacing:.08em;width:100%}

.coc-limpio{text-align:center;padding:52px 20px;border:1px dashed var(--line);
  border-radius:14px;margin-top:8px}
.coc-limpio .e{font-size:40px;color:var(--money);line-height:1}
.coc-limpio .t{font-size:20px;font-weight:800;color:var(--ink);margin-top:12px}
.coc-limpio .s{font-size:13.5px;color:var(--ink-3);margin-top:6px}

.com{border:1px solid var(--line);border-left:5px solid var(--ink-3);
  border-radius:13px;background:var(--surface);margin-bottom:10px;overflow:hidden}
.com.bien {border-left-color:var(--money-dim)}
.com.medio{border-left-color:var(--yellow);background:rgba(245,194,68,.05)}
.com.tarde{border-left-color:var(--red);border-color:var(--red-dim);
  background:rgba(230,51,41,.09);animation:latido 1.8s ease-in-out infinite}
.com.cambiada{border-color:var(--yellow)}

.com-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  width:100%;text-align:left;padding:14px 15px;background:none;border:0;cursor:pointer}
.com-h .cn{font-size:19px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.com-h .cr{font-family:var(--mono);font-size:19px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--ink-2);flex:0 0 auto}
.com.medio .com-h .cr{color:var(--yellow)}
.com.tarde .com-h .cr{color:var(--red)}
.com-min{padding:0 15px 14px;font-size:13px;color:var(--ink-3)}
.com-sub{padding:0 15px 10px;font-size:12.5px;color:var(--ink-3)}

.com-cambio{margin:0 15px 10px;padding:9px 11px;border-radius:9px;
  background:rgba(245,194,68,.14);border:1px solid var(--yellow);
  font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--yellow);
  letter-spacing:.05em;line-height:1.45}

.com-items{padding:0 15px 12px}
.com-li{display:flex;align-items:baseline;gap:8px;padding:7px 0;
  border-top:1px solid var(--line);flex-wrap:wrap}
.com-li .d{color:var(--ink-3);flex:0 0 auto}
.com-li .n{font-size:18px;font-weight:700;color:var(--ink);
  letter-spacing:-.015em;flex:1;min-width:0}
.com-li em{width:100%;padding-left:18px;font-style:normal;font-size:14px;
  font-weight:700;color:var(--red);line-height:1.4}
/* Lo que se quitó NO desaparece: se tacha, para que el cocinero lo vea. */
.com-li.fuera .n{text-decoration:line-through;color:var(--ink-3);font-weight:500}
.com-li.fuera em{text-decoration:line-through;color:var(--ink-3)}

.com-ok{display:block;width:100%;padding:17px;border:0;
  border-top:1px solid rgba(0,0,0,.25);
  background:var(--money);color:#06280F;cursor:pointer;
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800}
.com-ok:active{filter:brightness(.92)}

/* ═══ EL COMPROBANTE DE PAGO ═══
   Se le muestra al cliente en el celular, desde el otro lado de la mesa,
   mientras entrega $200.000 en efectivo. No es un documento para archivar:
   es un papel que alguien está mirando de lejos. Por eso todo es grande y
   va en blanco y negro — no compite con nada, se lee y ya. */
.cbn{
  background:#FFFFFF;color:#000;
  border-radius:14px;padding:24px 20px 20px;margin-bottom:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.cbn-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-bottom:14px;border-bottom:3px double #000;flex-wrap:wrap}
.cbn-m{font-family:var(--mono);font-size:11px;letter-spacing:.18em;font-weight:800;color:#000}
.cbn-n{font-family:var(--mono);font-size:13px;font-weight:800;color:#444}

.cbn-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#6A6A6A;margin-top:18px}
.cbn-neg{font-size:30px;font-weight:900;line-height:1.1;letter-spacing:-.02em;
  margin-top:6px;text-wrap:balance}
.cbn-due{font-size:17px;color:#3A3A3A;margin-top:4px}

/* La cifra es lo único que el cliente busca. Que no tenga que buscarla. */
.cbn-plata{font-size:52px;font-weight:900;letter-spacing:-.04em;line-height:1;
  margin-top:8px;font-variant-numeric:tabular-nums}

.cbn-corte{border-top:2px dashed #9A9A9A;margin-top:20px}
.cbn-per{font-size:24px;font-weight:800;line-height:1.3;margin-top:6px}
.cbn-per span{font-weight:500;color:#5A5A5A}
.cbn-nota{font-size:16px;color:#3A3A3A;margin-top:10px;line-height:1.4}

.cbn-pie{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-top:18px;font-size:15px;color:#3A3A3A;flex-wrap:wrap}
.cbn-pie b{color:#000;font-size:16px}

@media (max-width:360px){
  .cbn-plata{font-size:42px}
  .cbn-neg{font-size:25px}
  .cbn-per{font-size:20px}
}

/* ═══ LA COCINA, EN PAPEL ═══
   El cocinero tiene las manos ocupadas y grasa encima, mira de lejos y de
   reojo, y no tiene tiempo de manipular nada. Esta pantalla no es la app:
   es una comanda de papel colgada en la plancha.

   Blanco y negro grande, guiones, y una sola cosa que tocar por pedido.
   Los colores del negocio no llegan aquí a propósito: lo que importa es
   que se lea a un metro con la freidora encendida. */
body.coc-papel{
  --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F4F4;
  --ink:#000000; --ink-2:#1A1A1A; --ink-3:#5A5A5A;
  --line:#C9C9C9;
  /* Medidos sobre blanco: verde 5.1:1, rojo 5.9:1, ámbar 4.6:1 con negrilla. */
  --money:#0A6E2E; --money-dim:#0A6E2E; --money-2:#0A6E2E;
  --red:#C0261A; --red-dim:#C0261A;
  --yellow:#8A5A00; --yellow-dim:#8A5A00;
  background:#FFFFFF;color:#000;
}
body.coc-papel .vista{padding-left:14px;padding-right:14px;max-width:820px}

body.coc-papel .coc-top{border-bottom:3px double #000;padding-bottom:12px}
body.coc-papel .coc-top .ct{font-size:16px;color:#000;letter-spacing:.2em}
body.coc-papel .coc-top .cq{font-size:20px;color:#000;font-weight:700}
body.coc-papel .coc-top .cq b{font-size:44px;margin-right:8px}
body.coc-papel .coc-top .cm{font-size:15px;color:var(--red)}

/* Cada comanda es una tarjeta con el BORDE COMPLETO del color de su
   semáforo, y esquinas redondeadas: verde mientras va bien, amarillo al
   70% del tiempo prometido, rojo titilando cuando se pasó. El borde va de
   4px porque desde la plancha un filete fino no se distingue. */
body.coc-papel .com{
  border:4px solid #0A6E2E;border-radius:16px;
  background:#fff;margin:0 0 14px;padding:2px 16px 18px;animation:none;
  transform-origin:center top;
}
body.coc-papel .com.bien {border-color:#0A6E2E}
body.coc-papel .com.medio{border-color:#C58A00;background:#FFFBF0}
body.coc-papel .com.tarde{
  border-color:#C0261A;background:#FFF3F1;
  animation:latidoPapel 1.5s ease-in-out infinite;
}
/* Titila el BORDE, no el fondo: un fondo parpadeando cansa la vista de
   alguien que mira esta pantalla cuatro horas seguidas. */
@keyframes latidoPapel{
  0%,100%{border-color:#C0261A}
  50%    {border-color:#FF8A7A}
}

/* ── SE VA A LOS YA ENTREGADOS ──
   Se encoge y baja, en vez de desaparecer de golpe. El cocinero ve A DÓNDE
   se fue lo que acaba de despachar; si le dio al botón equivocado, sabe
   dónde buscarlo. Media pulgada de movimiento vale más que un aviso. */
body.coc-papel .com.se-va{
  animation:seVaAbajo .42s cubic-bezier(.4,0,.7,.35) forwards;
  pointer-events:none;
}
@keyframes seVaAbajo{
  0%  {transform:scale(1)    translateY(0);   opacity:1;   max-height:900px}
  55% {transform:scale(.72)  translateY(38px);opacity:.55}
  100%{transform:scale(.36)  translateY(90px);opacity:0;
       max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}
}
@media (prefers-reduced-motion:reduce){
  body.coc-papel .com.se-va{animation-duration:.01s}
  body.coc-papel .com.tarde{animation:none;border-color:#C0261A}
}

/* ── LO QUE YA SALIÓ, SIEMPRE A LA MANO ──
   Estaba al final de la pantalla: para mirar lo que acababa de despachar,
   el cocinero tenía que rodar toda la cola hacia abajo, con las manos
   ocupadas y una fila esperando. Ahora la barra vive pegada al borde
   inferior y la cola pasa POR DEBAJO. (Álix, 29-ago-2026.) */
body.coc-papel .coc-ya{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:0 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0, #fff 22px);
}
body.coc-papel .coc-ya .acor{
  border:3px solid #000;border-radius:12px;background:#fff;
  padding:16px 15px;font-size:19px;font-weight:800;color:#000;
  margin-top:0;box-shadow:0 -2px 14px rgba(0,0,0,.14);
}
/* Que la última comanda de la cola no quede debajo de la barra. */
body.coc-papel #app{padding-bottom:104px}
/* Abierta ocupa la pantalla y rueda por dentro: la cola sigue viva
   detrás, pero lo que se está mirando es esto. */
body.coc-papel .coc-ya.abierta{top:0;display:flex;flex-direction:column-reverse;
  background:#fff}
/* Adentro, la barra es la salida: negra al revés, para que se lea como
   un botón de volver y no como el mismo letrero de antes. */
body.coc-papel .coc-ya .acor.cerrar{background:#000;color:#fff}
body.coc-papel .coc-ya .acor.cerrar .fl,
body.coc-papel .coc-ya .acor.cerrar .acor-n{color:#fff}
body.coc-papel .coc-ya-tit{
  font-family:var(--mono);font-size:15px;font-weight:800;letter-spacing:.12em;
  color:#0A6E2E;padding:14px 4px 10px;
}
/* La otra salida, al final de la lista: el que rodó hasta abajo no tiene
   que devolverse arriba a buscar cómo salir. */
body.coc-papel .coc-ya-salir{
  display:block;width:100%;margin:6px 0 4px;padding:18px 12px;
  border:3px solid #000;border-radius:12px;background:#fff;
  font-size:19px;font-weight:800;color:#000;
}
body.coc-papel .coc-ya.abierta .acor-cuerpo{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:10px 2px 14px;
}
body.coc-papel .coc-ya .acor b{font-size:22px;margin-left:6px}
body.coc-papel .coc-ya .acor .fl{font-size:20px}
body.coc-papel .acor-cuerpo{padding:6px 2px 0}
/* Una comanda que ya salió: la MISMA tarjeta, verde y sin botón. Cambiarle
   la presentación a lo mismo obliga al cocinero a leer de nuevo algo que
   ya sabía leer de un vistazo.
   Sale CONTRAÍDA: cuando abre esto es porque busca UNA, y con veinte
   abiertas tendría que rodar cinco pantallas para encontrarla. */
body.coc-papel .com.lista{opacity:.78;padding-bottom:4px;position:relative;overflow:hidden}
body.coc-papel .com.lista .com-h{padding:14px 0 12px;cursor:pointer}
body.coc-papel .com.lista .com-h .cn,
body.coc-papel .com.lista .com-h .cr{font-size:26px;color:#0A6E2E}
body.coc-papel .com.lista.desplegada{opacity:1;padding-bottom:16px}
body.coc-papel .com.lista .com-li .n{color:#2A2A2A}
body.coc-papel .com.lista .com-eta{color:#0A6E2E;font-size:14px}
body.coc-papel .com.lista .izq,body.coc-papel .com.lista .der{position:relative;z-index:1}

/* El sello, como en la app del dueño: se lee de reojo, a un metro, sin
   tener que buscar la letra chiquita. */
body.coc-papel .sello-coc{
  /* Centrado, no pegado a la derecha: al doble de tamaño se salía del
     borde y la tarjeta le cortaba la última letra. */
  position:absolute;top:52%;left:50%;right:auto;
  transform:translate(-50%,-50%) rotate(-12deg);
  /* Al DOBLE: se lee desde la plancha, de reojo, sin gafas y de lejos.
     (Álix, 29-ago-2026 — estaba en 25px.) */
  font-family:var(--mono);font-size:50px;font-weight:800;
  letter-spacing:.14em;color:rgba(10,110,46,.20);
  border:7px solid rgba(10,110,46,.18);border-radius:14px;
  padding:10px 22px;pointer-events:none;white-space:nowrap;z-index:0;
}
@media (max-width:380px){ body.coc-papel .sello-coc{font-size:38px;padding:8px 16px} }

/* ── LO QUE ESA MESA YA RECIBIÓ ──
   Va arriba de lo nuevo, tachado y con su letrero. El cocinero ve una
   comanda de una mesa que ya atendió y necesita saber que esto SE SUMA,
   no reemplaza: en la duda, repite la preparación. */
body.coc-papel .com-ya{
  border:3px solid #0A6E2E;border-radius:12px;
  background:#F1FBF4;padding:10px 12px 6px;margin:4px 0 0;
}
body.coc-papel .cy-t{font-family:var(--mono);font-size:14px;font-weight:800;
  letter-spacing:.12em;color:#0A6E2E;margin-bottom:4px}
body.coc-papel .com-ya .com-li{border-top:0;padding:6px 0}
body.coc-papel .com-ya .com-li .n{font-size:23px;text-decoration:line-through;color:#5A7A63}
body.coc-papel .com-ya .com-li .d{font-size:23px;color:#5A7A63}
body.coc-papel .com-ya .com-li em{font-size:18px;color:#5A7A63;
  text-decoration:line-through;margin-left:36px}
body.coc-papel .cy-f{font-family:var(--mono);font-size:15px;font-weight:800;
  letter-spacing:.14em;color:#000;margin:14px 0 2px}
body.coc-papel .com.tarde .com-h .cr,
body.coc-papel .com.tarde .com-h .cn{color:#C0261A}
body.coc-papel .com.medio .com-h .cr{color:#8A5A00}
body.coc-papel .com.bien  .com-h .cr{color:#0A6E2E}

body.coc-papel .com-h{padding:18px 0 6px;align-items:center}
body.coc-papel .com-h .cn{font-size:31px;font-weight:900;letter-spacing:-.02em;
  white-space:normal;overflow:visible}
body.coc-papel .com-h .cr{font-size:31px;font-weight:900}
body.coc-papel .com-sub{padding:0 0 12px;font-size:17px;color:#3A3A3A}
/* El tipo de pedido, grande y a la derecha: donde el ojo ya está mirando
   el reloj. La cocina no empaca igual una mesa que un domicilio, y
   enterarse al final —leyendo letra chiquita— es enterarse tarde.
   Va posicionado, no en el flujo, para no empujar nada hacia abajo. */
body.coc-papel .com{position:relative}
body.coc-papel .com-tipo{
  /* ⚠ Estaba en 52px y el emoji quedaba TOCANDO el reloj: la bolsa del
     para-llevar se montaba sobre el 26:59. Se baja lo suficiente para
     que se lean como dos cosas. (Álix, 26-ago-2026.) */
  position:absolute;top:74px;right:14px;
  font-size:52px;line-height:1;pointer-events:none;
}
body.coc-papel .com.lista .com-tipo{top:86px;font-size:44px;opacity:.85}
@media (max-width:380px){
  body.coc-papel .com-tipo{font-size:40px;right:10px}
}
body.coc-papel .com-eta{font-family:var(--mono);font-size:15px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:0 0 10px}
body.coc-papel .com.bien  .com-eta{color:#0A6E2E}
body.coc-papel .com.medio .com-eta{color:#8A5A00}
body.coc-papel .com.tarde .com-eta{color:#C0261A}
/* ── DEMORADO METE PRESIÓN ──
   Al doble de tamaño y titilando. El resto de la tarjeta ya avisa con el
   color; esto es para el que está de espaldas a la pantalla y la mira de
   reojo cada tanto. Titila la PALABRA, no el fondo: cuatro horas frente a
   un fondo parpadeando cansan la vista. (Álix, 29-ago-2026.) */
body.coc-papel .com-eta.demorado{
  font-size:30px;letter-spacing:.10em;padding:2px 0 12px;
  animation:titilaDemorado 1.1s steps(1,end) infinite;
}
@keyframes titilaDemorado{
  0%,55% {opacity:1}
  56%,99%{opacity:.25}
}
@media (prefers-reduced-motion:reduce){
  body.coc-papel .com-eta.demorado{animation:none}
}
body.coc-papel .com-min{padding:0 0 14px;font-size:17px;color:#3A3A3A}

body.coc-papel .com-cambio{margin:0 0 12px;border:3px solid #000;border-radius:0;
  background:#FFF3C4;color:#000;font-size:17px;letter-spacing:.02em;padding:12px}

body.coc-papel .com-items{padding:0}
body.coc-papel .com-li{border-top:1px dashed #9A9A9A;padding:12px 0;gap:12px}
body.coc-papel .com-li:first-child{border-top:1px dashed #9A9A9A}
body.coc-papel .com-li .d{color:#000;font-size:30px;font-weight:900;line-height:1}
body.coc-papel .com-li .n{font-size:30px;font-weight:800;color:#000;line-height:1.15}
/* La anotación va DEBAJO de su producto y con sangría, para que se lea
   como parte de él y no como un renglón aparte. En rojo, que es el color
   de "ojo con esto" en toda la app.
   `width:100%` la baja de renglón: sin eso el contenedor es flex y la
   anotación quedaba flotando a la derecha del producto, como si fuera
   otra cosa. */
body.coc-papel .com-li em{
  width:100%;margin:6px 0 0 46px;padding:0;
  display:block;background:none;color:#C0261A;
  font-size:23px;font-weight:800;letter-spacing:0;line-height:1.2;
}
body.coc-papel .com-li.fuera .n,body.coc-papel .com-li.fuera .d{color:#8A8A8A}
body.coc-papel .com-li.fuera em{color:#8A8A8A}

/* Un solo botón, y enorme: es lo único que se toca en toda la noche. */
body.coc-papel .com-ok{
  margin-top:16px;border:0;border-radius:0;
  background:#0A6E2E;color:#fff;
  font-size:22px;letter-spacing:.16em;padding:26px 14px;
}
body.coc-papel .coc-limpio{border:3px dashed #000;border-radius:0;padding:64px 20px}
body.coc-papel .coc-limpio .e{font-size:64px;color:#0A6E2E}
body.coc-papel .coc-limpio .t{font-size:28px}
body.coc-papel .coc-limpio .s{font-size:17px}
body.coc-papel .vacio{font-size:20px;color:#3A3A3A}
body.coc-papel .mas{font-size:15px;color:#5A5A5A;margin-top:26px}

/* Se acabó el acceso del mesero. */
.fin{border:1px solid var(--line);border-radius:14px;padding:26px 20px;
  text-align:center;background:var(--surface);margin:22px 0 12px}
.fin .fi{font-size:36px;line-height:1}
.fin .ft{font-size:20px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;margin-top:12px}
.fin .fs{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:10px}

/* ── tips de bienvenida del mesero ── */
.tip{display:flex;gap:12px;align-items:flex-start;padding:14px;
  margin-bottom:8px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface)}
.tip .tn{flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:800;
  color:var(--money);border:1px solid var(--money-dim);
  background:rgba(74,222,128,.09)}
.tip .tt{flex:1;min-width:0}
.tip .tt b{display:block;font-size:15px;font-weight:750;color:var(--ink);
  letter-spacing:-.015em;margin-bottom:4px}
.tip .tt span{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.tip .tt span b{display:inline;font-size:inherit;color:var(--ink);font-weight:700}
.tip .tt span i{font-style:italic;color:var(--ink-3)}
.remate{margin:14px 0 4px;padding:14px;border-radius:12px;text-align:center;
  background:rgba(74,222,128,.10);border:1px solid var(--money-dim);
  font-size:14px;font-weight:750;color:var(--money);letter-spacing:-.01em}

/* Aviso de simulador: que nadie confunda la prueba con el celular real. */
.sim{font-size:12.5px;line-height:1.5;color:var(--ink-2);
  padding:11px 13px;margin-bottom:16px;border-radius:11px;
  border:1px dashed var(--yellow-dim);background:rgba(245,194,68,.06)}
.sim b{color:var(--yellow)}
.sim em{display:block;font-style:normal;margin-top:5px;color:var(--ink-3);font-size:11.5px}
/* El renglón de diagnóstico del modo mirar. Feo a propósito: es una herramienta de
   trabajo, no parte de la app del cliente. Se lee de un pantallazo. */
.sim-dg{margin-top:7px;font-family:var(--mono);font-size:9.5px;color:var(--ink-3);
  text-align:left;word-break:break-all;line-height:1.5}

/* Lo que no se pudo traer al asomarse a un cliente. Rojo y con los códigos a la vista:
   esta caja existe para que un pantallazo baste para saber qué arreglar. */
.sim-mal{margin-top:9px;padding:9px 10px;border-radius:9px;
  border:1px solid var(--red-dim);background:rgba(255,106,94,.08);text-align:left}
.sim-mal b{display:block;font-size:12.5px;color:var(--red);font-weight:800}
.sim-mal span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:3px;line-height:1.4}
.sim-mal .cods{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:5px}

.sim-x{display:block;width:100%;margin-top:10px;padding:9px;
  border:1px solid var(--yellow-dim);border-radius:9px;background:none;
  color:var(--yellow);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700}
.sim-x:active{background:rgba(245,194,68,.14)}

/* El renglón del propio mesero, resaltado en su ranking. */
.ms-li.yo{border-color:var(--ink-2)}
.ms-t .nm em{font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-left:6px}

/* ⚠ Aquí vivía `.hoja`, el recibo aparte que pintaba el mesero: hoja
   blanca, sin el servicio y sin las líneas punteadas. Las dos pantallas
   usan ahora `UI.recibo` —el mismo `.cli` del dueño—, así que esto ya no
   lo pinta nadie. (Álix, 28-ago-2026.) */
/* ⚠ Aquí había un segundo `.llave-caja` —caja de borde rojo sobre fondo
   claro— que no se veía nunca: 1.000 renglones más abajo está el que de
   verdad manda y lo pisaba entero. Su `.lk` dejaba el rótulo rojo SOBRE
   fondo rojo, invisible en la pantalla del mesero. Se borró y las dos
   pantallas usan las mismas clases. (Álix, 28-ago-2026.) */

/* ── lo más vendido (a la vista, en la pantalla inicial) ── */
.tv{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:13px;margin-bottom:7px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface);cursor:pointer}
.tv.abierta{border-color:var(--money-dim);border-bottom-left-radius:0;
  border-bottom-right-radius:0;margin-bottom:0}
.tv .ci{flex:1;min-width:0}
.tv .cn{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700}
.tv .cp{font-size:15.5px;font-weight:750;color:var(--ink);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv .cx{max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv .cd{text-align:right;flex:0 0 auto}
.tv .cu{font-family:var(--mono);font-size:19px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--money);line-height:1}
.tv .cx{font-size:9.5px;color:var(--ink-3);margin-top:3px}
.tv .fl{color:var(--ink-3);font-size:13px;flex:0 0 auto}
.tv-cuerpo{border:1px solid var(--money-dim);border-top:0;
  border-radius:0 0 11px 11px;background:var(--surface);
  padding:4px 13px 10px;margin-bottom:7px}
.tv-li{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-top:1px solid var(--line)}
.tv-li .pos{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  width:16px;flex:0 0 auto;font-weight:700}
.tv-li .nm{flex:1;min-width:0;font-size:14px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-li .un{font-family:var(--mono);font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink-2);flex:0 0 auto}
.tv-li.uno .nm{color:var(--ink);font-weight:650}
.tv-li.uno .un{color:var(--money)}
/* La suma de la categoría, para no tener que hacerla de cabeza. */
.tv-li.total{border-top:1px solid var(--money-dim);margin-top:2px;padding-top:9px}
.tv-li.total .nm{color:var(--ink);font-weight:700}
.tv-li.total .un{color:var(--money);font-weight:800;font-size:15px}

/* Pestañas del periodo. */
.pest{display:flex;gap:6px;margin-bottom:12px;padding:4px;
  background:var(--surface-2);border-radius:99px}
.pest button{flex:1;padding:9px 12px;border:0;border-radius:99px;
  background:none;color:var(--ink-3);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700}
.pest button.on{background:rgba(74,222,128,.14);color:var(--money)}

/* El total de todo, al pie de la tarjeta. */
.gran-total{display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.gran-total span{font-size:12.5px;color:var(--ink-2)}
.gran-total span em{display:block;font-style:normal;font-family:var(--mono);
  font-size:11px;color:var(--ink-3);margin-top:2px}
.gran-total b{font-family:var(--mono);font-size:17px;font-weight:800;
  color:var(--money);font-variant-numeric:tabular-nums}

/* ── mejor mesero ── */
.ms{display:flex;flex-direction:column;gap:6px}
.ms-li{position:relative;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);overflow:hidden;padding:12px 13px}
.ms-li.rey{border-color:var(--money-dim)}
.ms-barra{position:absolute;left:0;top:0;bottom:0;
  background:rgba(74,222,128,.09);border-right:1px solid rgba(74,222,128,.18)}
.ms-li.rey .ms-barra{background:rgba(74,222,128,.16)}
.ms-t{position:relative;display:flex;align-items:center;gap:10px}
.ms-t .pos{font-family:var(--mono);font-size:12px;font-weight:800;
  color:var(--ink-3);width:20px;flex:0 0 auto;text-align:center}
.ms-li.rey .ms-t .pos{font-size:15px}
.ms-t .nm{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-t .mt{font-family:var(--mono);font-size:14px;font-weight:750;
  font-variant-numeric:tabular-nums;color:var(--ink-2);flex:0 0 auto}
.ms-li.rey .ms-t .mt{color:var(--money)}

/* ── mesas ── */
/* ⚠ `.mesa` es de DOS pantallas: la del dueño y la del mesero. La del
   dueño trae `.m-top` y un pie con la plata; la del mesero pone el
   nombre y el reloj uno al lado del otro, sin envoltorio.
   Al rehacer la del dueño esto pasó a `display:block` y la del mesero se
   partió en dos renglones: cada tarjeta quedó del doble de alto y la
   pantalla del mesero cabía la mitad de mesas. (Álix, 26-ago-2026.)
   La fila sigue siendo lo de por defecto; la del dueño se declara. */
.mesa{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;padding:11px 13px;margin-bottom:8px;text-align:left;
  border:1px solid var(--line);border-left:4px solid var(--ink-3);
  border-radius:11px;background:var(--surface);cursor:pointer;
}
.mesa:has(.m-top){display:block}
.mesa .m-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mesa .izq{min-width:0;flex:1}
.mesa .nom{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.mesa .sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.mesa .der{text-align:right;flex:0 0 auto}
/* El reloj al DOBLE: es el dato por el que se mira esta pantalla.
   (Álix, 26-ago-2026 — antes 15px y se perdía entre todo lo demás.) */
/* El reloj grande es de la pantalla del DUEÑO, que mira de lejos y de
   vez en cuando. El mesero tiene su lista en la mano y necesita ver
   muchas mesas de una: ahí el reloj va del tamaño del nombre. */
.mesa .val{font-family:var(--mono);font-size:30px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink-2);letter-spacing:-.02em}
body.mesero-app .mesa .val{font-size:19px}
body.mesero-app .mesa .nom{font-size:15px}
body.mesero-app .mesa .sub{font-size:11.5px}
body.mesero-app .mesa .eti{font-size:8.5px;margin-top:3px}
body.mesero-app .mesa{padding:9px 12px;margin-bottom:6px}
.mesa .eti{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-top:5px;color:var(--ink-3)}

/* El pie: la plata de esa cuenta —lo que él quiere de reojo— y cómo va
   en la cocina. Donde antes había un botón verde. */
.mesa .m-pie{display:flex;align-items:center;gap:9px;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line-soft)}
.mesa .m-pie .pl{font-family:var(--mono);font-size:17px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--ink);flex:0 0 auto}
.mesa .m-pie .nt{flex:1;min-width:0;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mesa .m-pie .fl{flex:0 0 auto;color:var(--ink-3);font-size:15px}
.mesa.entregada .m-pie .pl{color:var(--yellow)}

/* El corte entre los que esperan comida y los que ya están comiendo. */
.m-corte{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:16px 0 8px 3px;opacity:.75}
.mesa.bien{border-left-color:var(--money-dim)} .mesa.bien .val{color:var(--money)} .mesa.bien .eti{color:var(--money-2)}
.mesa.medio{border-left-color:var(--yellow-dim);background:rgba(245,194,68,.05)} .mesa.medio .val,.mesa.medio .eti{color:var(--yellow)}
.mesa.tarde{border-left-color:var(--red);border-color:var(--red-dim);background:rgba(230,51,41,.09);animation:latido 1.8s ease-in-out infinite}
.mesa.tarde .val,.mesa.tarde .eti{color:var(--red)}
/* Cómo se saca la meta, en letra chica: el dueño no tiene que leerlo,
   pero si lo busca, está. */
.crecer-ej .c{font-size:11.5px;color:var(--ink-3);line-height:1.5;margin-top:9px}

/* ── PESTAÑA DE CONFIGURACIÓN ──
   Ocho renglones seguidos saturan; y son cosas que se tocan una vez en
   la vida. Se recogen, y lo del día a día queda afuera. */
.plega{border:1px solid var(--line);border-radius:12px;
  background:var(--surface);margin-bottom:8px;overflow:hidden}
.plega.abierta{border-color:var(--money-dim)}
/* ── «MI NEGOCIO», EN AMARILLO ──
   Es la puerta a todo lo que se configura una vez —la llave, la meta, el
   logo, la clave— y quedaba igualita a los renglones que se tocan cada
   noche. En amarillo se distingue sin leerla. (Álix, 29-ago-2026.) */
.plega.destacada{border-color:var(--yellow-dim);background:rgba(245,194,68,.07)}
.plega.destacada .plega-h .t b{color:var(--yellow)}
.plega.destacada .plega-h .f{color:var(--yellow)}
.plega.destacada.abierta{border-color:var(--yellow)}
.plega-h{display:flex;align-items:center;gap:12px;width:100%;
  text-align:left;padding:14px 13px;background:none;border:0;cursor:pointer}
.plega-h .e{font-size:20px;flex:0 0 auto}
.plega-h .t{flex:1;min-width:0}
.plega-h .t b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.plega-h .t span{display:block;font-size:11.5px;color:var(--ink-3);
  margin-top:3px;line-height:1.4}
.plega-h .f{color:var(--money);font-size:13px;flex:0 0 auto}
.plega-c{padding:0 10px 10px}
.plega-c .op{background:var(--ground)}
/* Subtítulos DENTRO de la pestaña: más pequeños que los de afuera, para
   que se lean como partes de la misma cosa y no como secciones nuevas. */
.cfg-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:16px 0 7px 3px;opacity:.75}

/* ── ANOTAR UN GASTO ──
   En la pantalla principal, no escondido en Configuración: es lo único
   de la noche que se anota sobre la marcha. Si no está a la mano nadie
   lo anota, y el arqueo acusa un faltante que no existe. */
.gasto-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 13px;margin-top:14px;border-radius:12px;cursor:pointer;
  border:1px solid var(--yellow-dim);background:rgba(245,194,68,.06)}
.gasto-btn .e{font-size:20px;flex:0 0 auto}
.gasto-btn .t{flex:1;min-width:0}
.gasto-btn .t b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.gasto-btn .t span{display:block;font-size:11.5px;color:var(--ink-3);
  margin-top:3px;line-height:1.4}
.gasto-btn .v{font-family:var(--mono);font-size:13.5px;font-weight:750;
  color:var(--yellow);flex:0 0 auto}
.gasto-btn:active{background:rgba(245,194,68,.13)}

/* ── ESCOGER EL COLOR ── */
.temas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 6px}
.tema{padding:10px 8px 12px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);text-align:center}
.tema.on{border-color:var(--money);background:rgba(74,222,128,.07)}
.tema .mu{display:flex;align-items:center;justify-content:center;gap:4px;
  height:52px;border-radius:9px;border:1px solid rgba(255,255,255,.10)}
.tema .mu i{width:9px;height:9px;border-radius:50%}
.tema .mu .v{background:#4ADE80} .tema .mu .a{background:#F5C244} .tema .mu .r{background:#F5564B}
.tema .nm{display:block;font-size:12.5px;color:var(--ink-2);margin-top:8px;font-weight:650}
.tema.on .nm{color:var(--money);font-weight:750}

/* El porqué de algo que parece un trámite. Sin explicarlo, el dueño lo
   siente inventado y busca cómo saltárselo. */
.porque{margin-top:18px;padding:14px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface)}
.porque b{color:var(--ink);font-weight:750}
.porque > b{display:block;font-size:14px;margin-bottom:8px}
.porque span{display:block;font-size:13px;line-height:1.55;color:var(--ink-2);margin-bottom:8px}
.porque em{display:block;font-style:normal;font-size:12.5px;line-height:1.5;
  color:var(--ink-3);margin:4px 0 4px 2px}
.porque span:last-child{margin-bottom:0;margin-top:10px}

/* ── NADIE VA A RECIBIR LOS PEDIDOS ──
   Amarillo, no rojo: no está roto, falta un paso. Y se dice ANTES de
   tomar el pedido, no después de que haya doce mesas esperando una
   comida que nunca se mandó a hacer. */
.sin-cocina{
  display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  padding:13px 14px;margin:0 0 12px;border-radius:12px;
  border:1px solid var(--yellow);background:rgba(245,194,68,.10);
}
.sin-cocina .i{font-size:19px;line-height:1.2;flex:0 0 auto}
.sin-cocina .t{font-size:13.5px;line-height:1.5;color:var(--ink);flex:1;min-width:0}
.sin-cocina .t em{display:block;font-style:normal;font-size:11.5px;
  color:var(--yellow);margin-top:4px;font-weight:700}
.sin-cocina.tocable{cursor:pointer}
.sin-cocina.tocable:active{background:rgba(245,194,68,.18)}

/* ── LA GUÍA DEL BUSCADOR ──
   La pantalla arranca limpia. Mostrar el catálogo entero la llenaba de
   productos que el mesero no pidió, y con la mesa esperando terminaba
   tocando el que no era. */
.tp-guia{text-align:center;padding:46px 24px 30px}
.tp-guia .lupa{
  width:88px;height:88px;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:38px;
  border:2px solid var(--money);background:rgba(74,222,128,.07);
}
.tp-guia .t{font-size:16.5px;font-weight:750;color:var(--ink);
  margin-top:20px;line-height:1.35}
.tp-guia .s{font-size:13.5px;color:var(--ink-3);margin-top:8px;line-height:1.5}

/* El buscador, con su borde verde: es lo único que hay que tocar. */
.tp-buscar{border-color:var(--money-dim)!important}
.tp-buscar:focus{border-color:var(--money)!important}

/* El detalle del error, para poder decir qué pasó. */
.err-det{margin-top:18px;padding:12px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);text-align:left}
.err-det b{display:block;font-family:var(--mono);font-size:12px;
  color:var(--red);line-height:1.5;word-break:break-word;font-weight:700}
.err-det em{display:block;font-family:var(--mono);font-size:10.5px;
  font-style:normal;color:var(--ink-3);margin-top:6px;word-break:break-all}

/* ── LAS VENTAS DE LA NOCHE ──
   Un solo recuadro para lo vivo y lo cerrado: es lo mismo en dos
   momentos, y separarlas obligaba a bajar y subir para saber cómo va. */
.ventas-caja{
  border:1px solid rgba(74,222,128,.22);border-radius:14px;
  background:var(--surface);padding:2px 14px 12px;margin-top:16px;
}
/* La cabecera de "Mesas abiertas" ya no necesita su línea de arriba:
   la del recuadro hace ese papel. */
.ventas-caja .sec-h:first-child{margin-top:12px;padding-top:0;border-top:0}
.ventas-linea{height:1px;background:var(--line);margin:14px -14px 4px}
.ventas-caja .acor{margin-top:6px}

/* Cuenta entregada: el reloj sigue, pero deja de apretar en colores.
   Ahora el tiempo responde otra pregunta: ¿por qué no han pagado? */
/* ── YA SE ENTREGÓ ──
   El reloj deja de apretar y se pone en verde: sigue diciendo cuánto lleva
   la cuenta abierta —el dueño quiere saberlo— pero ya no es un reproche.
   Y encima, un sello en diagonal: eso es lo que se lee de reojo, a un metro
   de distancia, sin buscar la letra chiquita. */
.mesa.entregada{position:relative;overflow:hidden;
  border-color:var(--money-dim);background:rgba(45,200,110,.045)}
.mesa.entregada .val{color:var(--money)}
.mesa.entregada .eti{color:var(--money-2)}
.mesa.entregada .izq,.mesa.entregada .der{position:relative;z-index:1}

.sello{
  /* Al medio, en el hueco que queda entre el nombre y el reloj. Pegado a
     la derecha quedaba justo encima del cronómetro. */
  position:absolute;top:50%;left:57%;
  transform:translate(-50%,-50%) rotate(-13deg);
  font-family:var(--mono);font-size:15px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(45,200,110,.30);
  border:2.5px solid rgba(45,200,110,.28);border-radius:7px;
  padding:4px 10px;pointer-events:none;white-space:nowrap;z-index:0;
}
.sello-domi{color:rgba(245,194,68,.32);border-color:rgba(245,194,68,.30)}
/* El sello no puede tapar el reloj: en pantallas angostas se recoge. */
@media (max-width:380px){ .sello{font-size:12px;padding:3px 7px;left:54%} }

/* Fila + botón de entrega, pegados como una sola pieza. */
.mesa-caja{margin-bottom:8px}
.mesa-caja .mesa{margin-bottom:0;cursor:pointer}
.mesa-caja .mesa.con-btn{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.entregar{
  width:100%;display:block;padding:12px;
  border:3px solid var(--ink-3);border-top:0;border-left-width:8px;
  border-radius:0 0 13px 13px;background:var(--surface-2,rgba(255,255,255,.03));
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;font-weight:800;
  text-transform:uppercase;color:var(--money);cursor:pointer;
}
.entregar:active{background:rgba(45,200,110,.12)}
.entregar.domi{color:var(--yellow)}
.entregar.domi:active{background:rgba(245,194,68,.12)}

/* La plata que salió con el domiciliario: existe, está contada, pero no
   está en la caja. Amarilla porque es un pendiente, no un problema. */
.calle{border:1px dashed var(--yellow-dim);border-radius:12px;
  background:rgba(245,194,68,.05);padding:11px;margin-bottom:12px}
.calle-h{font-size:12.5px;color:var(--ink-2);margin-bottom:8px}
.calle-h b{color:var(--yellow);font-variant-numeric:tabular-nums}

/* En la pantalla del mesero: la cuenta ya está avisada y él está
   esperando que el dueño confirme. El letrero amarillo basta — no es su
   pendiente, es del dueño, y llenarle la tarjeta de color le quita
   atención de sus mesas. */
.mesa.pagar .eti{color:var(--yellow);font-weight:800}
@keyframes latido{0%,100%{box-shadow:0 0 0 0 rgba(230,51,41,0)}50%{box-shadow:0 0 0 5px rgba(230,51,41,.20)}}
/* La caja hereda el color de su mesa: si no, el botón de abajo queda con
   un borde gris pegado a una tarjeta roja. */
.mesa-caja:has(.mesa.bien)     .entregar{border-color:var(--money-dim)}
.mesa-caja:has(.mesa.medio)    .entregar{border-color:var(--yellow-dim)}
.mesa-caja:has(.mesa.tarde)    .entregar{border-color:var(--red)}
.mesa-caja:has(.mesa.entregada).entregar{border-color:var(--money-dim)}

/* Los pasos para poner la app en la pantalla. Numerados de verdad porque
   aquí el ORDEN sí importa: en iPhone, instalar después de entrar deja al
   mesero por fuera y sin salida. */
.pasos{margin-top:14px}
.paso{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.paso b{flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-weight:800;
  color:var(--money);border:1.5px solid var(--money-dim)}
.paso span{flex:1;min-width:0;font-size:15.5px;line-height:1.45;
  color:var(--ink-2);padding-top:3px}
.paso em{font-style:normal;font-weight:800;color:var(--ink)}
.paso i{font-style:normal;color:var(--money);font-weight:800}

/* El nombre que hay que copiar para confirmar algo que no se deshace.
   Va AFUERA del campo: dentro, en gris, se lee como si ya estuviera
   escrito y la persona toca el botón sin haber escrito nada. */
.copiar-esto{
  font-family:var(--mono);font-size:17px;font-weight:800;
  letter-spacing:.06em;color:var(--ink);
  background:var(--surface-2,rgba(255,255,255,.05));
  border:1px dashed var(--line);border-radius:9px;
  padding:11px 13px;margin-top:8px;text-align:center;
  user-select:all;-webkit-user-select:all;word-break:break-word;
}

/* Lo que escriben los clientes desde su app. Con el negocio arriba y el
   celular a un toque: una sugerencia que no se puede responder es una
   sugerencia perdida. */
.sug{border:1px solid var(--line);border-radius:12px;padding:14px;
  margin-bottom:10px;background:var(--surface)}
.sug.leida{opacity:.55}
.sg-q{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;font-size:14px;color:var(--ink)}
.sg-q b{font-weight:800}
.sg-q span{font-family:var(--mono);font-size:11px;color:var(--ink-3);flex:0 0 auto}
.sg-t{font-size:15.5px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.sg-d{font-size:12px;color:var(--ink-3);margin-top:6px}

/* ── SIN DATOS ──
   Lo peor no es quedarse sin internet: es quedarse sin internet sin
   saberlo. Rojo y arriba de todo, porque mientras esté ahí lo demás de la
   pantalla no significa lo que parece. */
.sin-datos{display:flex;gap:11px;align-items:flex-start;
  border:2px solid var(--red);background:rgba(230,51,41,.12);
  border-radius:12px;padding:13px 14px;margin-bottom:14px;
  animation:latido 2.2s ease-in-out infinite}
.sin-datos .sd-i{font-size:20px;line-height:1.2;flex:0 0 auto}
.sin-datos .sd-t{font-size:14px;line-height:1.5;color:var(--ink-2)}
.sin-datos .sd-t b{color:var(--red)}
/* En la cocina, que es blanca, con sus propios colores. */
body.coc-papel .sin-datos{border-color:#C0261A;background:#FFF3F1;
  border-width:3px;animation:none}
body.coc-papel .sin-datos .sd-t{font-size:19px;color:#000;line-height:1.4}
body.coc-papel .sin-datos .sd-t b{color:#C0261A}
body.coc-papel .sin-datos .sd-i{font-size:26px}

/* ── PASAR LISTA ──
   Tocar un nombre tiene que ser tan fácil como marcar una planilla: filas
   anchas, la marca a la izquierda, y el estado en palabras al lado. */
.lista-t{margin-top:12px}
.lt-f{margin-bottom:10px}
.lt-p{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:15px 14px;border-radius:12px 12px 0 0;
  border:2px solid var(--line);border-bottom:0;background:var(--surface);cursor:pointer}
/* Mandarle el enlace: el camino principal para que entre. Pegado a su
   nombre, para que se lea como parte de la misma persona. */
.lt-wa{display:block;width:100%;padding:11px;border-radius:0 0 12px 12px;
  border:2px solid var(--line);border-top:1px solid var(--line);
  background:rgba(37,211,102,.07);color:#25D366;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;font-weight:800}
.lt-wa:active{background:rgba(37,211,102,.16)}
.lt-f:has(.lt-p.on) .lt-p,
.lt-f:has(.lt-p.on) .lt-wa{border-color:var(--money-dim)}
/* El nombre a la izquierda; la acción a la derecha y CON SU PALABRA. Una
   marca sin texto no dice qué pasa al tocarla. */
.lt-p .lt-n{flex:1;min-width:0;font-size:17px;font-weight:700;color:var(--ink-3)}
.lt-p .lt-e{flex:0 0 auto;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.lt-p .lt-c{flex:0 0 auto;padding:7px 11px;border-radius:9px;
  border:1.5px solid var(--line);color:var(--ink-3);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;font-weight:800}
.lt-p.on{border-color:var(--money-dim);background:rgba(45,200,110,.07)}
.lt-p.on .lt-n{color:var(--ink)}
.lt-p.on .lt-e{color:var(--money-2)}
/* Desactivar es lo que deja a alguien sin trabajar: se ve como lo que es. */
.lt-p.on .lt-c{border-color:var(--red-dim);color:var(--red)}

/* ── «¿RECIBISTE LA PLATA?» ──
   La pregunta y el botón para responderla, juntos. Antes el aviso iba
   arriba y el botón al final, con el listado de productos y otros tres
   botones en medio: el dueño leía el aviso y tenía que ir a buscar qué
   hacer con él. */
.confirma{border:2px solid var(--red);background:rgba(230,51,41,.10);
  border-radius:14px;padding:16px 15px 14px;margin-bottom:14px;text-align:center}
.cf-plata{font-size:34px;font-weight:900;color:var(--ink);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.cf-t{font-size:14px;color:var(--ink-2);margin-top:10px;line-height:1.5}
.cf-t b{color:var(--ink)}
/* La pregunta, aparte y más grande: es lo que tiene que responder. */
.cf-t em{display:block;font-style:normal;font-size:17px;font-weight:800;
  color:var(--ink);margin-top:8px;letter-spacing:-.015em}
.cf-si{display:block;width:100%;margin-top:14px;padding:16px;border:0;
  border-radius:12px;background:var(--money);color:#06280F;cursor:pointer;
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;font-weight:800}
.cf-si:active{filter:brightness(.92)}
.cf-no{display:block;width:100%;margin-top:8px;padding:11px;border:0;
  border-radius:10px;background:none;color:var(--ink-3);cursor:pointer;font-size:13.5px}

/* ── EL CUADRO DE UNA MESA ──
   Se pinta del color de su semáforo. Al abrirlo se perdía justo cuando el
   mesero está decidiendo qué hacer con ella: la que lleva 27 minutos y la
   que lleva 4 se veían idénticas. */
.ov-bien     {border-top:4px solid var(--money-dim)}
.ov-medio    {border-top:4px solid var(--yellow-dim)}
.ov-tarde    {border-top:4px solid var(--red)}
.ov-entregada{border-top:4px solid var(--money-dim)}

/* Las dos acciones, en una fila partida por la mitad. Dos botones enormes
   y rellenos de color, uno sobre otro, encandilan en una pantalla oscura y
   le tapan al mesero lo que vino a ver. El color se queda en el borde. */
.det-acc{display:flex;gap:9px;margin-top:16px}
.det-acc button{
  flex:1;min-width:0;padding:13px 10px;border-radius:11px;
  background:transparent;font-size:14px;font-weight:800;
  letter-spacing:-.01em;cursor:pointer;
}
.da-oro  {border:2px solid var(--yellow-dim);color:var(--yellow)}
.da-verde{border:2px solid var(--money-dim); color:var(--money)}
.da-oro:active  {background:rgba(245,194,68,.12)}
.da-verde:active{background:rgba(45,200,110,.12)}

/* ── mini gráfico del mes ── */
/* ══ EL GRÁFICO DEL MES ══
   Cada columna es un día. La barra crece desde el piso y la cifra del
   día va DENTRO de ella, girada —una columna mide unos 10px y el mes
   entero tiene que caber en una pantalla—.

   Los dos colores salen de escribir la cifra DOS VECES en el mismo
   sitio: una blanca detrás de la barra y otra negra adentro, recortada
   por la barra. La barra tapa la blanca y deja ver la negra; lo que
   sobresale por arriba no lo tapa nada y se ve blanco. Sin medir nada.
   (Álix, 27-ago-2026.) */
.mes-bars{display:flex;align-items:flex-end;gap:2px;height:96px;
  overflow:visible;margin-top:52px}
.mes-bars i.col{flex:1;min-width:0;position:relative;height:100%;display:block}
/* ⚠ Se llamaba `.barra` a secas y YA EXISTÍA otra `.barra` en este mismo
   archivo —la barra de progreso de 200px de ancho—. Como esta no declara
   `width`, la otra se la imponía: las barras del mes se salían de su
   columna. Un nombre de clase repetido en una hoja de estilo compartida
   es una bomba de tiempo. (27-ago-2026.) */
.mes-bars .mes-barra{position:absolute;left:0;right:0;bottom:0;display:block;
  /* Un verde más claro que el de antes: encima va texto NEGRO y sobre el
     verde oscuro no se leía. Medido a 9px, que es lo que cabe. */
  background:#5FCF8B;border-radius:3px 3px 0 0;z-index:1}
.mes-bars i.hoy .mes-barra{background:var(--money)}
.mes-bars i.peor .mes-barra{background:var(--red)}
/* ⚠ El mejor día NO lleva otro verde. La estrella y su altura ya dicen
   que es el mejor; un tercer tono de verde en la misma barra es una
   señal de más que solo hace ruido. (Álix, 27-ago-2026.) */
.mes-bars i.fut .mes-barra{background:#211F27;border-radius:2px 2px 0 0}

/* La cifra: misma posición las dos veces. */
/* ⚠ SIN `transform`. Llevaba `rotate(180deg)` para que la cifra se
   leyera de abajo hacia arriba. En Chrome quedaba perfecto y en el
   iPhone de Álix salía todo blanco: el recorte (`clip-path`) se aplica
   en las coordenadas del elemento y el giro se lo lleva puesto, así que
   lo que en Chrome se recortaba abajo, allá se recortaba arriba.
   No hay forma de probar un iPhone desde aquí, así que en vez de
   adivinar se quita la pieza dudosa: sin giro, el recorte es el mismo en
   todos lados. Se lee ladeando el celular a la derecha. (27-ago-2026.) */
/* ── LA CIFRA ARRANCA EN EL PISO DE LA BARRA ──
   Estaba CENTRADA a lo alto de la columna, y eso la dejaba flotando: en
   una barra alta el número salía por la mitad, y en una barra chiquita
   salía en el aire, lejos del piso. Con `justify-content:flex-end` —que
   en `vertical-rl` es el ABAJO— cada cifra empieza pegada a la base de
   su barra y sube. Así todas arrancan de la misma línea, que es la del
   suelo del gráfico. (Álix, 28-ago-2026.) */
.mes-bars .vdentro,
.mes-bars .vfuera{
  position:absolute;left:0;right:0;top:0;bottom:4px;z-index:2;
  display:flex;align-items:flex-end;justify-content:flex-end;
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:9px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;text-decoration:none;
  pointer-events:none;white-space:nowrap}
.mes-bars .vdentro{color:#04150B}                    /* sobre la barra: negro */
.mes-bars .vfuera{color:#FFF}                        /* lo que sobresale: blanco */
.mes-bars i.peor .vdentro{color:#2B0400}
.mes-bars i.fut .vdentro,.mes-bars i.fut .vfuera{display:none}

/* La estrella del mejor día va ARRIBA DEL TODO, en el aire que queda
   sobre las barras: así no la toca ninguna cifra, sobresalga lo que
   sobresalga. */
.mes-bars i .estrella{
  position:absolute;left:50%;bottom:100%;margin-bottom:2px;transform:translateX(-50%);
  font-size:11px;line-height:1;color:var(--yellow);text-decoration:none;
  pointer-events:none;z-index:3;
}

/* ── UN RECUADRO PARA EL MES ──
   El gráfico, el acumulado, el mejor y el peor día y el promedio hablan
   de lo mismo. Sueltos se leían como cinco cosas distintas. */
.cuadro-mes{border:1px solid var(--line);border-radius:14px;
  background:var(--surface);padding:14px 13px 16px;margin:16px 0 0}
.cuadro-mes .tj-sub{margin-top:0}

/* Mejor y peor día, escritos. */
.extremos{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;
  display:flex;flex-direction:column;gap:9px}
.ext{display:flex;align-items:center;gap:10px}
.ext .ic{width:22px;flex:0 0 auto;text-align:center;font-size:13px}
.ext.alta .ic{color:var(--yellow)}
.ext.baja .ic{color:var(--red)}
.ext .tx{flex:1;min-width:0}
.ext .tx b{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.ext .tx em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:1px}
.ext .mt{font-family:var(--mono);font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink);flex:0 0 auto}
.ext.baja .mt{color:var(--red)}
.mes-x{display:flex;gap:2px;margin-top:5px}
.mes-x span{flex:1;min-width:0;text-align:center;font-family:var(--mono);
  font-size:9px;font-weight:700;color:#CFC8D4;line-height:1.15}
.mes-x span.fds{color:var(--yellow)}
.mes-x span.hoy{color:var(--money)}
.mes-n{display:flex;gap:2px;margin-top:1px}
.mes-n span{flex:1;min-width:0;text-align:center;font-family:var(--mono);
  font-size:8.5px;color:#9E96A4;line-height:1.15}
.mes-n span.hoy{color:var(--money);font-weight:700}
/* Debajo del gráfico, a la derecha y 30% más pequeño que antes (26 → 18):
   arriba y grande se confundía con las ventas del turno. */
.mes-tot{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-top:11px}
.mes-tot .k{font-size:12px;color:var(--ink-3)}
.mes-tot b{font-size:18px;font-weight:800;letter-spacing:-.03em;
  color:var(--money);font-variant-numeric:tabular-nums;text-align:right}
.mes-pie{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);line-height:1.6}
.mes-pie b{color:var(--ink);font-weight:600;font-size:13.5px}
.mes-pie .ritmo{color:var(--ink-2)}
.mes-pie .ritmo b{color:var(--money)}

/* ── ranking por categoría (comprimido) ── */
.cat{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;
  padding:13px;margin-bottom:7px;text-align:left;border:1px solid var(--line);
  border-radius:11px;background:var(--surface)}
.cat .ci{min-width:0;flex:1}
.cat .cn{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cat .cp{font-size:15px;font-weight:700;color:var(--ink);margin-top:3px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat .cd{text-align:right;flex:0 0 auto}
.cat .cu{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--money)}
.cat .cx{font-family:var(--mono);font-size:9px;color:var(--ink-3);margin-top:2px}
.cat .fl{color:var(--ink-3);font-size:12px;flex:0 0 auto}

/* ── overlay ── */
/* El `bottom` sale del teclado (ui.js lo mide con visualViewport).
   Sin esto el modal queda anclado al fondo de la pantalla COMPLETA, debajo
   del teclado, y iOS dibuja el cursor en la posición vieja: fuera de la
   casilla. Con el teclado descontado, la casilla queda donde se ve. */
.ov{position:fixed;top:0;left:0;right:0;bottom:var(--teclado,0px);
  background:rgba(0,0,0,.72);display:flex;align-items:flex-end;
  justify-content:center;z-index:60;padding:0;animation:aparece .18s ease;
  transition:bottom .18s ease}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.ov-box{width:100%;max-width:520px;background:var(--ground);border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;padding:18px 16px calc(var(--safe-b) + 22px);max-height:86dvh;overflow-y:auto}
.ov-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ov-h .l{font-size:19px;font-weight:800;letter-spacing:-.02em}
.ov-x{font-size:23px;color:var(--ink-2);padding:6px 12px;line-height:1}
.seg{display:flex;gap:6px;background:var(--surface);padding:4px;border-radius:11px;margin-bottom:14px}
.seg button{flex:1;padding:10px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.seg button.on{background:var(--surface-2);color:var(--money);font-weight:700}
.ov-m{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-bottom:12px;letter-spacing:.05em}
.ov-it{display:flex;justify-content:space-between;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--line-soft);font-size:14.5px}
.ov-it:last-child{border-bottom:none}
.ov-it .n{color:var(--ink);flex:1;min-width:0}
.ov-it .n i{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-style:normal;margin-right:8px}
.ov-it .u{font-family:var(--mono);font-size:14px;color:var(--money);font-weight:700}
.ov-it.top .n{color:var(--money);font-weight:650}
.ov-bar{height:5px;border-radius:99px;background:#1A181E;overflow:hidden;margin-top:5px}
.ov-bar i{display:block;height:100%;background:var(--money-2);border-radius:99px}
.ov-it.top .ov-bar i{background:var(--money)}

/* ── acordeón ── */
.acor{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--surface);font-size:13.5px;color:var(--ink-2)}
.acor b{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-left:6px;font-weight:600}
.acor .fl{font-family:var(--mono);font-size:10px;transition:transform .2s ease}
.acor[aria-expanded="true"] .fl{transform:rotate(90deg)}
/* ── LO YA COBRADO SE VE COBRADO ──
   «Cuentas ya pagadas» quedaba en gris sobre gris, justo debajo de las
   tarjetas de colores: se perdía. Es plata que ya entró — va en verde,
   letra y borde. (Álix, 29-ago-2026.) */
.acor.verde{border-color:var(--money-dim);color:var(--money)}
.acor.verde b,
.acor.verde .monto{color:var(--money)}
.acor-cuerpo{display:none;padding:10px 2px 0}
.acor-cuerpo.abierto{display:block}
.pagada{display:flex;justify-content:space-between;align-items:center;padding:11px;margin-bottom:6px;border-radius:9px;background:rgba(74,222,128,.05);border-left:3px solid var(--money-dim);font-size:13px}
.pagada .pm{color:var(--ink-2)} .pagada .pw{color:var(--ink-3);font-size:11.5px}
.pagada .med{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:2px}
.pagada .pv{font-family:var(--mono);font-size:13px;color:var(--money);font-weight:600}

/* ── instalar ── */
.instalar{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--money-dim);border-radius:11px;background:rgba(74,222,128,.07);margin-top:18px}
.instalar img{width:38px;height:38px;border-radius:9px;flex:0 0 auto}
.instalar .tx{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.instalar .tx b{display:block;color:var(--ink);font-size:13.5px;font-weight:700}
.instalar button{background:var(--money);color:#06280F;font-weight:800;font-size:12.5px;padding:9px 14px;border-radius:8px;flex:0 0 auto}
/* En iPhone no hay botón —iOS no deja instalar desde la página— así que
   esto es una indicación, no algo que se toque. Que se vea como tal:
   borde punteado y sin el fondo verde de "aquí hay una acción". */
.instalar.guia{border-style:dashed;border-color:var(--line);background:none}
.instalar.guia .tx{font-size:13.5px;line-height:1.5}
.instalar.guia .tx em{font-style:normal;font-weight:800;color:var(--ink)}
.instalar.guia .tx i{font-style:normal;color:var(--money);font-weight:800}

/* ── abrir cuenta: los tres tipos ── */
.tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:6px 0 4px}
.tipo{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:18px 6px 15px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);
  transition:border-color .15s,background .15s;
}
.tipo .em{font-size:30px;line-height:1}
.tipo .tx{font-size:12.5px;font-weight:650;color:var(--ink-2);text-align:center;line-height:1.25}
.tipo.on{border-color:var(--money);background:rgba(74,222,128,.09)}
.tipo.on .tx{color:var(--money)}
.tipo:active{transform:scale(.97)}

.campo{
  width:100%;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);padding:14px;margin-top:10px;
  font-size:16px;line-height:1.25;color:var(--ink);
  box-sizing:border-box;-webkit-appearance:none;appearance:none;
}
.campo::placeholder{color:var(--ink-3)}
.campo:focus{border-color:var(--money);outline:none}
.campo-lbl{font-size:12px;color:var(--ink-3);margin:14px 0 0}
/* ⚠ Esto se llamaba `.pista` y YA EXISTÍA otra `.pista` 1.300 renglones
   más arriba: la pista de carreras de la meta, con su `height:22px` y su
   camino gris de `::before`. El renglón de consejo heredaba las dos
   cosas: salía aplastado en 22px de alto y con una barra gris encima.
   Se veía en «Dale el celular al cliente para que la vea», debajo de la
   cuenta. Tercera vez que un nombre de clase repetido nos muerde
   (`.barra`, `.llave-caja`, y esta). (Álix, 28-ago-2026.) */
.consejo{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  margin-top:8px;line-height:1.6;text-align:center}

/* el emoji del tipo en la lista de cuentas */
/* ── EL EMOJI DICE QUÉ ES, Y HAY QUE VERLO ──
   Un 50% más grande (17px → 25px): en esta pantalla el administrador
   reconoce de un vistazo si es mesa, para llevar o domicilio, y de eso
   depende cómo lo empaca la cocina. A 17px había que fijarse.
   (Álix, 29-ago-2026.) */
.mesa .em{font-size:25px;margin-right:9px;vertical-align:-4px;line-height:1}

/* ═══ panel maestro ═══ */
.m-app{max-width:520px;margin:0 auto;padding:calc(var(--safe-t) + 14px) 16px calc(var(--safe-b) + 24px)}
.m-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.m-top .mt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.m-top button{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);padding:6px 10px;border:1px solid var(--line);border-radius:99px}

.m-fact{font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--money);font-variant-numeric:tabular-nums;line-height:1}
.m-sub{font-size:13px;color:var(--ink-2);margin-top:7px}

.m-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:16px}
.m-chip{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:11px 6px;text-align:center}
.m-chip b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.m-chip span{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:3px;line-height:1.2}
.m-chip.ok b{color:var(--money)} .m-chip.pv b{color:var(--yellow)}
.m-chip.vn b{color:var(--red)}   .m-chip.pr b{color:var(--ink-2)}

.m-buscar{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:13px 14px;font-size:16px;line-height:1.25;color:var(--ink);margin-top:6px;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.m-buscar:focus{border-color:var(--money);outline:none}

.neg-fila{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;
  padding:13px;margin-bottom:7px;border:1px solid var(--line);border-left:4px solid var(--ink-3);
  border-radius:11px;background:var(--surface)}
.neg-fila.aldia{border-left-color:var(--money-dim)}
/* Los últimos 5 días PRESIONAN, pero sin gritar: el borde amarillo y un
   fondo apenas insinuado. Todavía hay tiempo de llamar al cliente. */
.neg-fila.porvencer{border-left-color:var(--yellow);background:rgba(226,178,42,.05)}
/* El ÚLTIMO día sí grita: mañana el cliente no entra. Es el único sitio
   del panel donde algo titila, y por eso se ve. (Álix, 30-ago-2026.) */
.neg-fila.ultimo{border-left-color:var(--red);background:rgba(230,51,41,.08)}
.neg-fila.ultimo .ne{animation:titilaRojo 1s steps(2, start) infinite;
  font-weight:800;letter-spacing:.06em}
.neg-fila.vencido{border-left-color:var(--red);background:rgba(230,51,41,.06)}
.neg-fila .ni{min-width:0;flex:1}
.neg-fila .nn{font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.neg-fila .nd{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.neg-fila .ne{font-family:var(--mono);font-size:10px;margin-top:3px}
.neg-fila .nv{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-align:right;flex:0 0 auto}

.frio{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;margin-bottom:6px;
  border-radius:9px;background:rgba(230,51,41,.07);border-left:3px solid var(--red-dim);font-size:13px}
.frio .fn{color:var(--ink)} .frio .fd{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);display:block;margin-top:2px}
.frio .fa{font-family:var(--mono);font-size:10.5px;color:var(--red)}

.ficha-l{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.ficha-l:last-child{border-bottom:none}
.ficha-l .k{color:var(--ink-3)} .ficha-l .v{color:var(--ink);font-family:var(--mono);font-size:13px}

/* Grupos de opciones cortas (tipo de llave, categorías, cocinas).
   Se usan en 5 pantallas — sin esta regla salen pegadas y sin forma. */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 4px}
.chips span{
  display:inline-block;font-size:13.5px;font-weight:600;
  padding:9px 14px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);color:var(--ink-2);background:var(--surface);
  transition:border-color .12s,color .12s,background .12s;
}
.chips span.on{border-color:var(--money);color:var(--money);background:rgba(74,222,128,.10)}
.chips span:active{background:var(--surface-2)}

.cal-q{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.cal-q button{font-family:var(--mono);font-size:11.5px;padding:9px 13px;border-radius:99px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface)}
.cal-q button.on{border-color:var(--money);color:var(--money);background:rgba(74,222,128,.09)}
.cal-res{border:1px solid var(--money-dim);border-radius:10px;background:rgba(74,222,128,.07);padding:13px;margin-top:12px;text-align:center}
.cal-res .r1{font-size:15px;font-weight:800;color:var(--money);letter-spacing:-.01em}
.cal-res .r2{font-family:var(--mono);font-size:11px;color:var(--ink-2);margin-top:4px}
.cal-res .r3{font-family:var(--mono);font-size:10.5px;color:var(--yellow);margin-top:3px}

/* aviso persistente — no se va solo */
.aviso{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--red);color:#fff;
  font-size:13px;font-weight:600;text-align:center;padding:calc(var(--safe-t) + 10px) 14px 10px;line-height:1.4}

/* ── configuración: interruptores ── */
.sw{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:14px 13px;margin-bottom:8px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface)}
.sw .em{font-size:21px;flex:0 0 auto}
.sw .tx{flex:1;min-width:0}
.sw .tx b{display:block;font-size:14.5px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.sw .tx span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.sw .caja{width:46px;height:27px;border-radius:99px;background:#2A272E;position:relative;flex:0 0 auto;transition:background .2s}
.sw .caja::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:var(--ink-3);transition:transform .2s,background .2s}
.sw.on{border-color:var(--money-dim)}
.sw.on .caja{background:var(--money)}
.sw.on .caja::after{transform:translateX(19px);background:#06280F}

/* ── tirilla de domicilio ── */
.tiri{background:#fff;color:#111;border-radius:12px;padding:18px 16px;font-family:var(--mono);
  font-size:12.5px;line-height:1.55;max-width:340px;margin:0 auto}
.tiri .tn{font-family:var(--sans);font-size:17px;font-weight:800;text-align:center;letter-spacing:-.02em;color:#111}
.tiri .tm{text-align:center;font-size:10.5px;color:#666;margin-top:2px;letter-spacing:.06em}
.tiri hr{border:none;border-top:1px dashed #bbb;margin:12px 0}
.tiri .fila{display:flex;justify-content:space-between;gap:10px}
.tiri .k{color:#666;font-size:11px}
.tiri .cli{font-family:var(--sans);font-size:16px;font-weight:800;color:#111;margin-top:2px}
.tiri .dir{font-family:var(--sans);font-size:15px;font-weight:600;color:#111;line-height:1.35;margin-top:3px}
.tiri .tel{font-size:14px;color:#111;margin-top:4px;font-weight:700}
.tiri .it{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.tiri .nota{background:#E63329;color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 6px;border-radius:3px;display:inline-block;margin:2px 0 2px 14px}
.tiri .tot{display:flex;justify-content:space-between;font-family:var(--sans);font-size:19px;font-weight:800;margin-top:4px}
.tiri .pago{margin-top:12px;padding:12px;border-radius:8px;text-align:center;font-family:var(--sans)}
.tiri .pago.cobrar{background:#E63329;color:#fff}
.tiri .pago.pagado{background:#1E7A3C;color:#fff}
.tiri .pago b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em}
.tiri .pago span{display:block;font-size:11.5px;margin-top:3px;opacity:.9}
.tiri .pie{text-align:center;font-size:10px;color:#888;margin-top:12px}

.ver{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-align:center;margin-top:22px;line-height:1.8}
.ver b{color:var(--ink-2);font-weight:600}
.ver button{font-family:var(--mono);font-size:10.5px;color:var(--yellow);text-decoration:underline}

/* ── base de caja ── */
.base-p{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.base-s{font-size:13.5px;color:var(--ink-2);margin-top:8px;line-height:1.45}
.base-in{
  width:100%;border:1px solid var(--money);border-radius:13px;background:var(--surface);
  padding:18px 16px;margin-top:18px;text-align:center;
  font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.04em;color:var(--money);
  box-sizing:border-box;-webkit-appearance:none;appearance:none;
  font-variant-numeric:tabular-nums;
}
.base-in::placeholder{color:var(--ink-3);font-weight:700}
.base-in:focus{outline:none;border-color:var(--money);box-shadow:0 0 0 3px rgba(74,222,128,.15)}
.base-ay{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:center;margin-top:10px;line-height:1.6}
.base-ay b{color:var(--yellow)}
.base-conf{border:1px solid var(--money-dim);border-radius:13px;background:rgba(74,222,128,.08);
  padding:20px 16px;text-align:center;margin-top:6px}
.base-conf .cq{font-size:13.5px;color:var(--ink-2)}
.base-conf .cv{font-size:38px;font-weight:800;color:var(--money);letter-spacing:-.045em;margin-top:6px;line-height:1;font-variant-numeric:tabular-nums}
.base-conf .cl{font-size:12.5px;color:var(--ink-3);margin-top:10px;line-height:1.45}

/* ── equipo y pantallas ── */
.acc{display:flex;align-items:center;gap:11px;padding:13px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.acc .pt{width:9px;height:9px;border-radius:50%;background:var(--money);flex:0 0 auto}
.acc .pt.esp{background:var(--yellow)}
.acc .pt.perm{background:#4A8FD4}
.acc .in{flex:1;min-width:0}
.acc .in b{display:block;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.acc .in span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:2px}
.acc .qq{font-family:var(--mono);font-size:10.5px;color:var(--yellow);flex:0 0 auto;padding:6px 9px;
  border:1px solid var(--yellow-dim);border-radius:7px}
.acc .del{font-family:var(--mono);font-size:10.5px;color:var(--red);flex:0 0 auto;padding:6px 4px}
.acc-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 8px}
.acc-t:first-child{margin-top:4px}
.acc-n{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin:-4px 0 9px;line-height:1.5}

.nom-g{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.nom-g button{font-size:15px;font-weight:700;padding:14px 18px;border-radius:11px;
  border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.nom-g button.nuevo{border-style:dashed;color:var(--ink-3);font-weight:600;font-size:13.5px}

.qr-caja{text-align:center;padding:6px 0}
.qr-nom{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.qr-ind{font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
.qr-cod{font-family:var(--mono);font-size:15px;letter-spacing:.28em;color:var(--yellow);margin-top:14px}
.qr-av{font-family:var(--mono);font-size:10.5px;color:var(--red);margin-top:8px}

/* dos acciones lado a lado */
.dos-btn{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:4px 0 6px}
.dos-btn button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:16px 8px;border-radius:13px;font-weight:800;font-size:13px;letter-spacing:-.01em;
  line-height:1.25;text-align:center;
}
.dos-btn button .e{font-size:22px;line-height:1}
.dos-btn button.mesero{background:var(--money);color:#06280F}
.dos-btn button.cocina{background:var(--yellow);color:#2A1F00}
.dos-btn button:disabled{background:#252229;color:rgba(255,255,255,.48)}
.dos-btn button:active{transform:scale(.97)}

/* acción dentro del encabezado de sección */
.sec-h.con-btn{align-items:center}
.sec-h .btn-mini{
  background:var(--money);color:#06280F;font-weight:800;font-size:12.5px;
  padding:9px 14px;border-radius:9px;letter-spacing:-.01em;flex:0 0 auto;
}
.sec-h .btn-mini:active{transform:scale(.96)}
.sec-h .izq-t{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}
.sec-h .izq-t .v{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.sec-h .izq-t .v.mal{color:var(--red)}
/* botones secundarios del pie, más discretos */
.btn.chico{font-size:13.5px;font-weight:650;padding:13px}

/* ── el menú ── */
/* ⚠ Aquí vivía la versión VIEJA de `.cat-h` —de cuando la categoría era
   un renglón fijo con `.cn`—. Nadie la pinta ya, pero le seguía metiendo
   su `margin-bottom` y su `justify-content` al renglón replegable nuevo,
   que está 600 líneas más abajo. Se borró. (Álix, 28-ago-2026.) */

.prod{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:12px 13px;margin-bottom:6px;border:1px solid var(--line-soft);
  border-radius:10px;background:var(--surface)}
.prod .pn{flex:1;min-width:0;font-size:15px;color:var(--ink);font-weight:600}
.prod .pn small{display:block;font-family:var(--mono);font-size:10px;color:var(--ink-3);font-weight:400;margin-top:2px}
.prod .pp{font-family:var(--mono);font-size:14px;color:var(--yellow);font-weight:700;flex:0 0 auto}
/* Duplicar sin entrar al producto. Discreto: se usa cargando una carta, no todos los
   días, y no puede competir con el precio por la mirada. */
.prod-dup{flex:0 0 auto;width:34px;height:34px;border:0;border-radius:9px;
  background:rgba(255,255,255,.07);color:var(--ink-3);font-size:15px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.prod-dup:active{background:rgba(255,255,255,.15);color:var(--ink)}
/* La ayudita bajo el nombre cuando se está duplicando. */
.campo-ayuda{font-size:12px;line-height:1.35;color:var(--ink-3);margin:-6px 0 12px}
.prod.agotado{opacity:.5}
.prod.agotado .pn{text-decoration:line-through}
.prod.agotado .pp{color:var(--red);font-size:10px;letter-spacing:.1em;text-decoration:none}

.sw-min{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);margin-top:10px}
.sw-min .tx{font-size:14px;color:var(--ink);font-weight:600}
.sw-min .tx small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400;margin-top:2px}
.sw-min .caja{width:46px;height:27px;border-radius:99px;background:#2A272E;position:relative;flex:0 0 auto;transition:background .2s}
.sw-min .caja::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:var(--ink-3);transition:transform .2s,background .2s}
.sw-min.on .caja{background:var(--red)}
.sw-min.on .caja::after{transform:translateX(19px);background:#fff}

/* ═══ tomar pedido ═══ */
.tp{display:flex;flex-direction:column;height:100dvh;background:var(--ground)}
.tp-top{flex:0 0 auto;background:#1A181B;padding:calc(var(--safe-t) + 12px) 14px 12px;border-bottom:1px solid var(--line)}
.tp-h1{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.tp-back{font-size:26px;color:var(--ink-3);line-height:1;padding:0 4px}
.tp-tit{flex:1;min-width:0}
.tp-tit b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-tit span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:1px}
.tp-buscar{width:100%;line-height:1.25;box-sizing:border-box;-webkit-appearance:none;appearance:none;background:#252229;border:none;border-radius:13px;padding:15px 17px;
  font-size:17px;color:var(--ink)}
.tp-buscar::placeholder{color:var(--ink-3)}
.tp-buscar:focus{outline:none;box-shadow:0 0 0 2px var(--money)}

.tp-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 14px}
.tp-res{padding-top:8px}
.tp-r{display:flex;align-items:center;gap:11px;padding:14px 0;border-bottom:1px solid #2A272F}
.tp-r .rn{flex:1;font-size:16.5px;font-weight:600;color:var(--ink)}
.tp-r .rn b{color:var(--money);font-weight:800}
.tp-r .rn small{display:block;font-size:11px;color:var(--ink-3);font-weight:400;margin-top:2px}
.tp-r .rp{font-family:var(--mono);font-size:14.5px;color:var(--yellow);font-weight:700}
.tp-r .rmas{width:38px;height:38px;border-radius:10px;background:var(--yellow);color:#241B00;
  font-size:21px;font-weight:900;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tp-r.ago{opacity:.45}
.tp-r.ago .rmas{background:#2A272E;color:var(--ink-3)}

.tp-cat{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 6px;padding-top:12px;border-top:1px solid var(--line-soft)}
.tp-cat:first-child{border-top:none;padding-top:0;margin-top:12px}

.tp-vacio{text-align:center;color:rgba(255,255,255,.44);padding:46px 14px;font-size:14.5px;line-height:1.7}
.tp-vacio span{font-size:12.5px}

/* Lo que lleva pedido. Es lo que el mesero relee en voz alta antes de
   mandar a cocina, muchas veces de pie y de reojo: va grande. */
.tp-car{padding:14px 0 8px}
.tp-cl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.tp-ci{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid #2A272F}
.tp-ci .cn{flex:1;min-width:0}
.tp-ci .cn b{display:block;font-size:20px;font-weight:800;color:var(--ink);
  letter-spacing:-.015em;line-height:1.2}
/* La anotación del cliente es lo que más se equivoca: que se lea sola. */
.tp-ci .cn em{display:block;font-size:15px;font-weight:700;color:#F0902B;
  font-style:normal;margin-top:4px;line-height:1.3}
.tp-ci .cn i{display:block;font-family:var(--mono);font-size:14.5px;color:var(--yellow);
  font-style:normal;margin-top:3px}
/* Botones más grandes: se tocan con el pulgar, de pie y con prisa. */
.tp-ci .bt{width:42px;height:42px;border-radius:11px;background:#232026;display:flex;
  align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.tp-env{padding:0 0 12px}
.tp-env .lock{background:#0C0B0D;border:1px solid var(--line);border-radius:10px;padding:12px 13px;margin-bottom:12px}
.tp-env .lock .ll{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-3);font-weight:800;margin-bottom:7px}
/* Lo que ya salió a cocina también se relee: iba a 12.5px, ilegible de pie. */
.tp-env .lock div.it{font-size:16px;color:var(--ink-2);padding:4px 0;line-height:1.3}

.tp-pie{flex:0 0 auto;background:#1C1A1E;border-top:2px solid #2A272E;
  padding:12px 14px calc(var(--safe-b) + 12px)}
.tp-tot{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink-2);margin-bottom:10px}
.tp-tot b{font-size:20px;font-weight:800;color:var(--money);letter-spacing:-.02em}
.tp-send{width:100%;text-align:center;border-radius:13px;padding:17px;font-size:16.5px;font-weight:900;
  background:var(--money);color:#06280F;letter-spacing:-.01em}
.tp-send.off{background:#252229;color:rgba(255,255,255,.46)}

/* cuenta atrás de los 8 segundos */
.cuenta8{position:fixed;inset:0;z-index:80;background:rgba(14,13,16,.96);display:flex;
  flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.cuenta8 .n{font-size:74px;font-weight:800;color:var(--yellow);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.cuenta8 .t{font-size:17px;font-weight:700;color:var(--ink);margin-top:14px}
.cuenta8 .s{font-size:13.5px;color:var(--ink-3);margin-top:8px;line-height:1.5}
.cuenta8 .barra{width:200px;height:5px;border-radius:99px;background:#252229;overflow:hidden;margin-top:20px}
.cuenta8 .barra i{display:block;height:100%;background:var(--yellow);width:100%}
.cuenta8 button{margin-top:26px;min-width:210px}

/* abrir cuenta: la acción principal del turno */
.btn-abrir{
  display:block;width:100%;text-align:center;
  background:var(--money);color:#06280F;
  font-weight:900;font-size:19px;letter-spacing:-.02em;
  padding:21px;border-radius:15px;margin:22px 0 14px;
}
.btn-abrir:active{transform:scale(.985)}

/* ── ya en cocina, con su ventana ── */
.env-i{display:flex;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid #2A272F}
.env-i:last-child{border-bottom:none}
.env-i .cn{flex:1;min-width:0}
.env-i .cn b{display:block;font-size:15px;font-weight:650;color:var(--ink-2)}
.env-i .cn em{display:block;font-size:11.5px;color:#E67E22;font-style:normal;margin-top:2px}
.env-i.tachado .cn b{text-decoration:line-through;color:var(--ink-3)}
.env-i .reloj{font-family:var(--mono);font-size:11px;color:var(--money);flex:0 0 auto}
.env-i .reloj.fin{color:var(--ink-3)}
.env-i .bt{width:34px;height:34px;border-radius:9px;background:#232026;display:flex;
  align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.env-i .bt.lock{background:transparent;font-size:14px}

/* menú de opciones */
/* ═══ GRÁFICOS Y ESTADÍSTICAS ═══
   Puerta propia en la pantalla de inicio. Los gráficos viven en Configuración desde el
   26-ago y ahí siguen — pero nadie entra a «configurar» para mirar cómo va su mes, y
   detrás de una tuerca gris no se veían. Dorado con un destello en diagonal que pasa
   cada nueve segundos: el barrido dura 1,6 s (más largo deja de leerse como destello) y
   el resto del ciclo es pausa, para que llame sin quedar titilando toda la noche.
   Misma receta del módulo gerencial de La Perrera.  (Álix, 5-sep-2026.) */
.btn-graf{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;margin:14px 0 0;padding:15px;cursor:pointer;
  border:1px solid #FFC400;border-radius:13px;
  background:linear-gradient(180deg,rgba(255,196,0,.15),rgba(255,196,0,.05));
  box-shadow:0 0 18px rgba(255,196,0,.13)}
.btn-graf:active{background:rgba(255,196,0,.22)}
.btn-graf .gr-ic{font-size:21px;flex:0 0 auto}
.btn-graf .gr-mid{flex:1;min-width:0}
.btn-graf .gr-mid b{display:block;font-size:14.5px;font-weight:800;color:#FFD24D;
  letter-spacing:-.01em;text-shadow:0 1px 4px rgba(255,196,0,.35)}
.btn-graf .gr-mid span{display:block;font-size:11.5px;font-weight:600;
  color:rgba(255,210,77,.66);margin-top:2px}
.btn-graf .gr-x{font-size:16px;font-weight:800;color:#FFD24D;flex:0 0 auto}
/* Dos estelas que viajan juntas: la ancha transparente y, muy cerca, otra con un sexto de
   su grosor y un pelo más marcada —a ese ancho, con la misma transparencia, no se vería—.
   Comparten animación y keyframes, así que no hay forma de que se desincronicen. */
.gr-shine,.gr-shine2{position:absolute;top:-30px;bottom:-30px;pointer-events:none}
.gr-shine{left:0;width:46px;background:rgba(255,255,255,.26);
  animation:gr-sweep 9s ease-in-out infinite}
.gr-shine2{left:58px;width:8px;background:rgba(255,255,255,.40);
  animation:gr-sweep 9s ease-in-out infinite}
@keyframes gr-sweep{
  0%{transform:translateX(-70px) rotate(18deg)}
  17.8%{transform:translateX(470px) rotate(18deg)}
  100%{transform:translateX(470px) rotate(18deg)}
}
@media (prefers-reduced-motion:reduce){ .gr-shine,.gr-shine2{animation:none;opacity:0} }

.mas{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:14.5px;font-weight:650;margin-top:20px}
.op{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:16px 14px;margin-bottom:8px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface)}
.op .e{font-size:22px;flex:0 0 auto;width:26px;text-align:center}
.op .t{flex:1;min-width:0}
.op .t b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.op .t span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.35}
.op .fl{color:var(--ink-3);font-size:14px}

/* elegir el crecimiento de la meta */
/* Los siete días de la semana, uno por columna, en orden colombiano: lunes primero y domingo
   al final. Hereda el aspecto de `.crecer` —los botones de porcentaje— para que la pantalla de
   días no parezca de otro programa. (Álix, 3-sep-2026.) */
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:12px}
.grid7 button{padding:14px 0;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:700;cursor:pointer;
  font-family:var(--mono)}
.grid7 button.on{border-color:var(--money);background:rgba(74,222,128,.11);color:var(--money)}
.crecer{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:12px}
.crecer button{padding:13px 0;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:700;font-family:var(--mono)}
.crecer button.on{border-color:var(--money);background:rgba(74,222,128,.11);color:var(--money)}
.crecer-ej{border:1px solid var(--money-dim);border-radius:11px;background:rgba(74,222,128,.07);
  padding:14px;margin-top:14px;text-align:center}
.crecer-ej .a{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.crecer-ej .b{font-size:22px;font-weight:800;color:var(--money);letter-spacing:-.02em;margin-top:6px}

/* segunda pantalla: configuración */
.cfg-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.cfg-top .atras{font-size:27px;color:var(--ink-2);line-height:1;padding:0 4px}
.cfg-top .tt b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.cfg-top .tt span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.cfg-sec{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:26px 0 10px}
.cfg-sec:first-of-type{margin-top:4px}

/* crear negocio */
.btn-crear{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--money);color:#06280F;font-weight:900;font-size:16.5px;
  padding:18px;border-radius:13px;margin:16px 0 4px;letter-spacing:-.01em}
.btn-crear:active{transform:scale(.985)}
/* ── alta lineal de un negocio ── */
.wz-p{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-top:2px}
.wz-barra{height:3px;border-radius:99px;background:var(--line);margin:9px 0 16px;overflow:hidden}
.wz-fill{height:100%;background:var(--money);border-radius:99px;transition:width .3s ease}
.wz-t{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.2}
.wz-nota{font-size:14px;color:var(--ink-2);line-height:1.55;margin:14px 0 4px;
  padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.wz-nota b{color:var(--ink);font-weight:700}
.wz-aviso{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:10px 0 4px;
  padding:12px 13px;border-left:3px solid var(--money-dim);border-radius:0 9px 9px 0;
  background:rgba(74,222,128,.05)}
.wz-ok{font-size:40px;color:var(--money);text-align:center;margin:8px 0 6px}

.paso{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 13px;margin-bottom:7px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface)}
.paso .bx{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto;color:var(--ink-3)}
.paso.ok .bx{background:var(--money);border-color:var(--money);color:#06280F}
.paso .t{flex:1;min-width:0}
.paso .t b{display:block;font-size:14.5px;font-weight:650;color:var(--ink)}
.paso.ok .t b{color:var(--ink-3);text-decoration:line-through}
.paso .t span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.35}
.cod{font-family:var(--mono);font-size:28px;letter-spacing:.3em;color:var(--money);
  text-align:center;padding:16px;border:1px dashed var(--money-dim);border-radius:12px;
  background:rgba(74,222,128,.06);margin:14px 0 6px}

.m-chip{transition:border-color .15s,background .15s}
.m-chip.sel{border-color:var(--ink-2);background:var(--surface-2)}
.m-chip.ok.sel{border-color:var(--money)} .m-chip.pv.sel{border-color:var(--yellow)}
.m-chip.vn.sel{border-color:var(--red)}   .m-chip.pr.sel{border-color:var(--ink-2)}

/* ── la cuenta que se le muestra al cliente ── */
.cli{background:#fff;color:#111;border-radius:14px;padding:20px 18px;max-width:360px;margin:0 auto}
/* El nombre del negocio, en grande: este papel lo mira el CLIENTE, y lo
   primero que tiene que saber es a quién le está pagando.
   (Álix, 26-ago-2026 — estaba en 19px, del tamaño de un renglón más.) */
.cli .cn{font-family:var(--sans);font-size:26px;font-weight:800;text-align:center;
  letter-spacing:-.03em;color:#111;line-height:1.15}
.cli .cm{text-align:center;font-size:11px;color:#666;margin-top:2px;font-family:var(--mono);letter-spacing:.08em}
.cli hr{border:none;border-top:1px dashed #bbb;margin:14px 0}
.cli .it{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:13px;padding:4px 0;color:#333}
.cli .nota{font-size:11px;color:#888;padding-left:12px;font-style:italic}
.cli .tot{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--sans);margin-top:6px}
.cli .tot span{font-size:15px;font-weight:700;color:#111}
.cli .tot b{font-size:32px;font-weight:800;letter-spacing:-.03em;color:#111}
/* Rayas gruesas entre segmentos: qué se consumió, cuánto es, a dónde se
   paga. Con la rayita fina de antes, todo se leía como un solo bloque. */
.cli .rayagorda{border-top:3px dashed #999;margin:15px 0}
.cli .sub{display:flex;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:13.5px;padding:3px 0;color:#333}
.cli .sub span:last-child{font-weight:700;color:#111}
/* La propina voluntaria, en negrilla y sin adornos: es la fórmula legal. */
.cli .volu{text-align:center;margin-top:14px;font-size:15px;color:#111}
.cli .volu b{font-weight:800}
.cli .volu.chico{font-size:12px;color:#666;margin-top:8px}

/* ── LAS FOTOS DEL MANUAL ──
   Pantallazos de la app de verdad, dentro de «Cómo se usa». Con su marco
   y su fondo, para que se lean como una foto de una pantalla y no como
   parte de la pantalla en la que uno está. */
.man-f{margin:10px 0 14px;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:var(--ground);line-height:0}
.man-f img{width:100%;height:auto;display:block}

/* Lo que Álix NO puede hacer dentro del panel de un cliente, en el sitio
   donde estaría el botón. Decirlo ahí vale más que esconderlo. */
.no-toca{border:1px dashed var(--line);border-radius:14px;padding:16px 15px;
  text-align:center;background:var(--surface)}
.no-toca b{display:block;font-size:15.5px;color:var(--ink-2);letter-spacing:-.01em}
.no-toca span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.5}

/* ── CON QUÉ PAGÓ: LAS CASILLAS ──
   Mismo cuadro de chulear que usa la cocina, para que en toda la app un
   chulo se vea igual. Se pueden marcar varios: el pago partido —«$20.000
   en efectivo y el resto transferido»— pasa todas las noches y antes
   estaba escondido detrás de un botón. (Álix, 28-ago-2026.) */
.medios-ck{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.medio-ck{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 14px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface)}
.medio-ck.on{border-color:var(--money);background:var(--surface-2)}
.medio-ck .chk{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;border:2px solid var(--ink-3);
  font-size:16px;font-weight:900;line-height:1;color:transparent}
.medio-ck.on .chk{background:var(--money);border-color:var(--money);color:#06240F}
.medio-ck .em{flex:0 0 auto;font-size:19px;line-height:1}
.medio-ck .nm{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La casilla del monto, con su emoji al lado para no repetir el nombre. */
.monto-f{display:flex;align-items:center;gap:10px;margin-top:6px}
.monto-f .mf-e{flex:0 0 auto;font-size:19px;width:24px;text-align:center}
.monto-f .campo{flex:1;min-width:0;margin:0;font-family:var(--mono);
  font-size:19px;font-weight:800;text-align:right}

/* ── PASADA LA VENTANA, EN VEZ DE LA CANECA ──
   Un candado a secas se lee como que la app se dañó, y su explicación
   estaba en un `title`, que en un celular no existe. Ahora se lee.
   (Álix, 28-ago-2026.) */
.solo-dueno{flex:0 0 auto;margin-left:10px;padding:4px 8px;border-radius:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;white-space:nowrap;
  color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);cursor:pointer}

/* ── A DÓNDE TRANSFERIR, DENTRO DEL RECIBO ──
   ⚠ Aquí había dos cajas de color entero —una roja para la llave y una
   fucsia para el Nequi—. Parecían botones: el cliente las iba a tocar
   esperando que pasara algo, y en un papel no pasa nada. Ahora es un
   solo recuadro de borde negro sobre el mismo blanco del recibo, con
   una fila por medio y el logo chiquito al lado para reconocerlo de un
   vistazo. (Álix, 28-ago-2026.) */
.cli .pagar{border:2px solid #111;border-radius:10px;padding:11px 13px 6px;
  margin-top:2px;background:#fff}
.cli .pg-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  color:#777;text-align:center;margin-bottom:9px}
.cli .pg-f{display:flex;align-items:center;gap:13px;padding:9px 0}
.cli .pg-f + .pg-f{border-top:1px dashed #ccc}
/* Los dos logos tienen proporciones distintas; la caja fija los alinea y
   deja las dos columnas de texto empezando en la misma raya. */
/* ⚠ El archivo de Nequi venía con un margen blanco enorme alrededor del
   logo, así que al meterlo en la caja se veía tres veces más chiquito
   que el de Bre-B aunque los dos midieran lo mismo. Se recortaron los
   dos a lo que de verdad pinta, y así los dos llenan su alto.
   La caja es más ancha que el más ancho para que las dos columnas de
   números arranquen en la misma raya. (Álix, 28-ago-2026.) */
.cli .pg-l{flex:0 0 auto;width:76px;height:18px;object-fit:contain;object-position:left center}
.cli .pg-d{flex:1;min-width:0}
.cli .pg-e{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#777}
.cli .pg-v{display:block;font-size:21px;font-weight:800;color:#111;line-height:1.2;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;word-break:break-all;margin-top:1px}
.cli .pg-n{display:block;font-size:11.5px;color:#666;margin-top:1px}

/* la tarjeta que le titila al dueño */
/* ── HAY PLATA QUE ENTREGAR ──
   El mesero ya recibió el dinero y tiene que pasárselo al dueño. Eso sí
   pide atención, pero la tarjeta NO se pinta de rojo: la comida ya salió
   y pintar toda la fila por un cobro pendiente llena la pantalla de alarma
   por algo que salió bien. Titila SOLO EL LETRERO — un punto rojo que se
   mueve en una pantalla tranquila se ve más que una pantalla toda roja. */
.mesa.confirmar .eti{
  color:var(--red);font-weight:800;
  animation:letreroRojo 1.2s ease-in-out infinite;
}
.mesa.confirmar .nom{color:#fff}
@keyframes letreroRojo{0%,100%{opacity:1} 50%{opacity:.32}}
@media (prefers-reduced-motion:reduce){
  .mesa.confirmar .eti{animation:none;text-decoration:underline}
}

/* ── historial de ventas · el detalle de cada día ──
   Tres columnas: cuántos, qué, y por cuánto. El número de la izquierda
   con ancho fijo para que la lista se lea en columna aunque haya un 3
   arriba de un 127. Y las cifras con `tabular-nums`: sin eso los pesos
   bailan de renglón en renglón y la columna deja de parecer una columna. */
.hv-l{display:flex;align-items:baseline;gap:10px;padding:5px 4px;
      border-bottom:1px solid var(--line)}
.hv-l:last-child{border-bottom:0}
.hv-u{flex:0 0 34px;text-align:right;font-weight:700;font-size:13.5px;
      color:var(--money);font-variant-numeric:tabular-nums}
.hv-p{flex:1;min-width:0;font-size:13.5px;color:var(--ink);
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hv-n{flex:0 0 auto;font-size:13px;color:var(--ink-2);
      font-variant-numeric:tabular-nums}
.hv-tot{border-top:1.5px solid var(--line);border-bottom:0;margin-top:4px;
        padding-top:8px;font-weight:700}
.hv-tot span{color:var(--ink);font-size:13.5px}
.hv-mes{display:flex;justify-content:space-between;align-items:baseline;
        padding:10px 4px;font-size:13.5px;color:var(--ink-3)}
.hv-mes .hv-n{color:var(--ink);font-weight:700;font-size:15px}
/* Cuando el detalle no da lo mismo que la venta. No es una alarma: es el
   dato que el dueño vino a buscar. */
/* Fondo de tarjeta y una franja amarilla al lado, en vez de fondo
   amarillo: el amarillo detrás del texto claro da 4.1:1 —medido— y a
   12,5px eso no se lee de noche. Sobre --surface-2 el texto va a 9,8:1. */
.hv-ojo{margin-top:10px;padding:10px 12px;border-radius:10px;
        background:var(--surface-2);border-left:3px solid var(--yellow);
        color:var(--ink);font-size:12.5px;line-height:1.5}
.plega-h .hv-n{margin-left:auto;font-weight:700;color:var(--ink);font-size:14px}

/* ── «enviando a cocina» ──
   Va en gris, no en rojo. Rojo es lo que hay que atender; que algo esté
   subiendo es lo normal y dura un segundo. Una alarma que suena todo el
   día deja de ser una alarma. */
.subiendo{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
          color:var(--ink-3);text-align:center;padding:8px 0 2px}

/* ── el salón entero en la pantalla del mesero ──
   Las suyas con su semáforo; las de los demás apagadas y sin tocar. El
   verde/amarillo/rojo tiene que seguir queriendo decir «esto es tuyo». */
.caja-lista{border:1px solid var(--line-soft);border-radius:14px;
            padding:8px;background:var(--surface);margin-top:6px}
.caja-lista .mesa{margin:6px 0}
.mesa.ajena{opacity:.42;border-color:var(--line-soft);background:transparent}
.mesa.ajena .nom{font-weight:600}
.vacio-min{text-align:center;color:var(--ink-3);font-size:12.5px;padding:10px 0 4px}
/* El ranking, chiquito: motiva, pero no es el trabajo. */
.sec-h.chico .t{font-size:12px}
.ms.chico .ms-li{min-height:34px}
.ms.chico .ms-t{font-size:12.5px}
.ms.chico .ms-t .mt{font-size:12.5px}

/* El ranking no ocupa pantalla: un botón chiquito, pegado abajo, encima
   de la versión. Motiva, pero no es el trabajo. */
/* Sin `margin-top:auto` aquí: lo tiene el pie de versión, y con los dos
   el espacio libre se repartía entre ambos y el botón quedaba flotando en
   la mitad. El empujón al fondo lo da uno solo. */
.btn-rank{display:block;width:100%;margin-top:16px;padding:9px 0;
          font-family:var(--mono);font-size:11px;letter-spacing:.1em;
          color:var(--ink-3);border:1px solid var(--line-soft);
          border-radius:10px;background:transparent}
/* El pie va de último SIEMPRE, aunque entre él y el botón haya un div
   vacío (`pieSalir()` mete uno). Por eso se empuja por el último hijo. */
.vista > *:last-child.ver{margin-top:auto}
.acor-n{display:block;font-style:normal;font-family:var(--mono);
        font-size:10.5px;color:var(--ink-3);margin-top:2px}
/* Una cuenta pagada que atendió otro: se ve, apagada y con su nombre. */
.pagada.ajena{opacity:.55}
/* El promedio de la cocina, al lado del nombre de la estación. */
body.coc-papel .coc-top .cprom{display:block;font-family:var(--mono);
  font-size:13px;font-weight:600;color:#3F7D52;letter-spacing:.02em;margin-top:2px}

/* ── LA PLATA, ABAJO Y CHIQUITA ──
   En pleno turno el administrador está mirando las mesas: cuánto llevan,
   qué pidieron, si ya salió. La cifra sigue subiendo en vivo y sigue a la
   vista, pero deja de atravesarse. */
.plata-pie{display:flex;flex-direction:column;align-items:center;
           gap:2px;margin:22px 0 4px;padding:14px 0 10px;
           border-top:1px solid var(--line-soft)}
.plata-pie .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
              text-transform:uppercase;color:var(--ink-3)}
.plata-pie .n{font-size:30px;font-weight:800;color:var(--money);
              letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plata-pie .s{font-size:12px;color:var(--ink-3)}

/* ── el manual ── */
.man-i{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:2px 0 8px}
.man-l{border-left:2px solid var(--line);padding-left:12px;margin-bottom:6px}
.man-p{font-size:13.5px;color:var(--ink-2);line-height:1.6;padding:6px 0;
       border-bottom:1px solid var(--line-soft)}
.man-p:last-child{border-bottom:0}
.man-p b{color:var(--yellow);font-weight:700}

/* ── el sonido de la cocina ──
   Si el aparato todavía no puede sonar, se dice grande: es la diferencia
   entre que la cocina se entere de un pedido o no. */
body.coc-papel .coc-sonido{display:block;width:100%;margin:0 0 14px;
  padding:16px 0;border:3px solid #B8860B;border-radius:12px;
  background:#FFF8E1;color:#7A5C00;
  font-family:var(--mono);font-size:15px;font-weight:800;letter-spacing:.06em}

/* ── EL SEMÁFORO DE LA MESA, EN TRES ESTADOS ──
   Amarillo «En preparación», rojo «Demorado» con los minutos titilando,
   verde «Entregado» en pequeño. Se acabó el sello grande en diagonal:
   repetía lo que la etiqueta ya dice y molestaba a la vista. */
.titila{animation:titilaRojo 1s steps(2, start) infinite; color:var(--red)}
@keyframes titilaRojo{0%,100%{opacity:1}50%{opacity:.25}}
.eti.ok{color:var(--money);font-size:11px;letter-spacing:.04em}

/* ── LA CARTA DEL CLIENTE, DESDE EL PANEL MAESTRO ──
   Se digita con la foto de la carta al lado: la lista arriba —para ver
   qué ya se metió— y el formulario abajo, siempre en el mismo sitio. */
.carta-lista{max-height:42vh;overflow-y:auto;margin:12px 0;
  border:1px solid var(--line-soft);border-radius:12px;padding:6px}
.carta-vacia{padding:18px 12px;text-align:center;color:var(--ink-3);font-size:14px;line-height:1.5}
.carta-cat{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 8px 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.carta-cat .c{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:20px;
  background:var(--line-soft);color:var(--ink-3);font-size:11px;letter-spacing:0}
.carta-x{background:none;border:0;color:var(--ink-3);font-size:15px;padding:2px 6px;cursor:pointer}
.carta-x:hover{color:var(--red)}
.carta-p{display:flex;align-items:center;gap:10px;padding:11px 8px;cursor:pointer;
  border-top:1px solid var(--line-soft)}
.carta-p .n{flex:1;font-size:15px}
.carta-p .pr{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.carta-p.editando{display:grid;grid-template-columns:1fr 1fr;gap:8px;cursor:default;
  background:var(--surface-2);border-radius:10px;padding:10px}
.carta-p.editando .campo{margin:0}
.carta-tot{padding:10px 8px;text-align:center;color:var(--ink-3);font-size:13px;
  border-top:1px solid var(--line-soft)}
.carta-form{border-top:1px solid var(--line-soft);padding-top:12px}
.cal-q button.mas{border-style:dashed}
.btn.chico{padding:10px;font-size:14px;margin:0}

/* ── EL LOCKER: LA HISTORIA DE UN CLIENTE ── */
.loc-l{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;
  padding:11px 8px;border-top:1px solid var(--line-soft)}
.loc-l:first-child{border-top:0}
.loc-l .c{font-size:17px;text-align:center}
.loc-l .q{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.loc-l .n{font-size:14px;line-height:1.35;margin-top:2px}
.loc-l .f{text-align:right;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.loc-l .f span{display:block;opacity:.65}
.carta-paso{display:flex;align-items:center;gap:9px;margin:16px 0 8px;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.carta-paso b{display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;background:var(--ink-2);color:var(--ground);
  font-size:12px;font-weight:800;letter-spacing:0;flex:0 0 auto}
.carta-paso i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink)}
.carta-nueva{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.carta-nueva .campo{margin:0}
.carta-tip{margin-top:10px;text-align:center;font-size:12px;color:var(--ink-3)}

/* ── EL CHULO DE CADA PRODUCTO ──
   Dos cocineros en la misma mesa. Cada uno va chuleando lo que preparó y
   al lado queda su nombre: sin nombre, un chulo no se le puede preguntar
   a nadie. La casilla es grande a propósito — se toca con el guante
   puesto y con las manos llenas. */
.com-li .chk{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;border:2px solid var(--ink-3);
  font-size:16px;font-weight:900;line-height:1;color:transparent}
.com-li.hecho .chk{background:var(--money);border-color:var(--money);color:#06240F}
.com-li.hecho .n{text-decoration:line-through;color:var(--ink-3)}
.com-li .quien{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--money-2);
  text-transform:uppercase;letter-spacing:.04em}
.com-li.fuera .chk{opacity:.35}
.com-cuenta{font-family:var(--mono);font-size:13px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding:6px 0 0}

/* En la pantalla de cocina, que es papel blanco y letra enorme. */
body.coc-papel .com-li{align-items:center}
body.coc-papel .com-li .chk{width:44px;height:44px;border-radius:10px;
  border:3px solid #2A2A2A;font-size:30px;color:transparent}
body.coc-papel .com-li.hecho .chk{background:#0A6E2E;border-color:#0A6E2E;color:#fff}
body.coc-papel .com-li.hecho .n{color:#5A7A63}
body.coc-papel .com-li .quien{font-size:18px;font-weight:900;color:#0A6E2E}
body.coc-papel .com-cuenta{font-size:19px;font-weight:900;color:#3A3A3A;padding:10px 0 0}

/* ── QUIÉN ESTÁ EN ESTA PANTALLA ── */
.coc-yo{margin:2px 0 10px}
.coc-yo-b{background:none;border:1px dashed var(--line);border-radius:20px;
  padding:6px 13px;font-size:12px;font-weight:800;letter-spacing:.08em;
  color:var(--ink-3);cursor:pointer}
.coc-yo-t{font-size:12px;color:var(--ink-3);margin-bottom:6px}
.coc-yo-f{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.coc-yo-f .campo{margin:0}
body.coc-papel .coc-yo-b{border-color:#9A9A9A;color:#3A3A3A;font-size:17px;padding:9px 18px}
body.coc-papel .coc-yo-t{color:#3A3A3A;font-size:17px}
.com-falta{font-family:var(--mono);font-size:13px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;padding:12px 0 4px;
  border-top:1px dashed var(--line-soft);margin-top:8px}
.com-falta span{display:block;margin-top:5px;font-family:inherit;font-size:11px;
  letter-spacing:.02em;text-transform:none;font-weight:600;opacity:.8}
body.coc-papel .com-falta{font-size:20px;color:#3A3A3A;border-top:2px dashed #9A9A9A;
  padding:18px 0 8px}
body.coc-papel .com-falta span{font-size:16px;color:#5A5A5A}
/* Qué salió ya de la cocina, en la mesa que abre el administrador. */
.det-li em.coc-ok{display:block;font-style:normal;font-size:12.5px;margin-top:3px;
  color:var(--money-2);font-weight:700;letter-spacing:.02em}
.det-li em.coc-esp{display:block;font-style:normal;font-size:12.5px;margin-top:3px;
  color:var(--ink-3)}
/* El letrero de arriba del botón: mismo alto siempre, para que el botón
   verde no suba ni baje solo debajo del dedo. */
.com-falta.ok{color:var(--money-2)}
body.coc-papel .com-falta.ok{color:#0A6E2E}
/* Con algo sin chulear el botón sigue en su sitio y del mismo tamaño:
   solo se ve hueco, y pregunta antes de despachar. */
.com-ok.a-medias{background:none;border:2px solid var(--money-dim);color:var(--money)}
body.coc-papel .com-ok.a-medias{background:#fff;border:3px solid #0A6E2E;color:#0A6E2E}

/* ── LA PLATA DEL TURNO, ARRIBA Y GRANDE ──
   Es el dato por el que el dueño abre la app cada rato. Estuvo abajo y
   pequeño; Álix lo probó en su negocio y decidió lo contrario
   (26-ago-2026). La meta va pegada debajo, sin separador: las dos son la
   misma pregunta —cuánto llevo y cuánto me falta—. */
.plata-hoy{display:flex;flex-direction:column;align-items:center;gap:3px;
  margin:16px 0 0;padding:18px 0 14px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.plata-hoy .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.plata-hoy .n{font-size:46px;font-weight:800;color:var(--money);line-height:1.05;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* La comparación con el mismo día de la semana pasada. En ámbar, no en verde: el verde de
   arriba es LA cifra del turno, y otro verde debajo la hace competir consigo misma. */
.plata-hoy .comp{font-size:12.5px;color:var(--yellow);text-align:center;line-height:1.35}
/* Las cuentas y el promedio, debajo de las ya pagadas: dato de contexto, no titular. */
.pag-res{font-size:11px;color:var(--ink-3);margin:7px 2px 1px;letter-spacing:.01em}
@media (max-width:360px){ .plata-hoy .n{font-size:38px} }

/* ── EL TURNO QUE SE QUEDÓ ABIERTO ──
   Mientras esto esté en pantalla, cada venta se le está sumando a la
   noche de ayer. Va arriba del todo y no se puede quitar sin cerrar. */
.olvido-cierre{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  margin:0 0 14px;padding:15px 14px;border-radius:13px;cursor:pointer;
  border:2px solid var(--red);background:rgba(230,51,41,.12);
  animation:latido 2.2s ease-in-out infinite}
.olvido-cierre .i{font-size:24px;flex:0 0 auto;line-height:1.1}
.olvido-cierre .t{flex:1;min-width:0}
/* El título grita a propósito: se lee de reojo al abrir la app, no se estudia. */
.olvido-cierre .t b{display:block;font-family:var(--mono);font-size:14px;font-weight:800;
  color:var(--red);letter-spacing:.06em;margin-bottom:5px}
/* La nota de «pon tu hora de cierre»: es un consejo, no parte del regaño. */
.olvido-cierre .t em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);
  margin-top:5px}
.olvido-cierre .t span{display:block;font-size:13px;line-height:1.5;color:var(--ink-2)}
.olvido-cierre .t span b{display:inline;font-size:13px;color:var(--ink)}

/* Las 24 horas del día, en rejilla: un negocio de desayunos cierra a las
   2 de la tarde y uno de almuerzos a las 4. */
.horas-24{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:4px 0 12px}
.horas-24 button{padding:11px 4px;border-radius:10px;font-size:13px;font-weight:700;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-variant-numeric:tabular-nums;cursor:pointer}
.horas-24 button.on{border-color:var(--money);background:rgba(74,222,128,.13);color:var(--money)}
@media (max-width:340px){ .horas-24{grid-template-columns:repeat(3,1fr)} }

/* ══ EL INFORME DE UNA NOCHE ══
   La tirilla contesta «¿cuadró la caja?». Esto contesta «¿qué vende mi
   negocio?», que es la pregunta del día siguiente, con calma. */
.inf-hero{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:16px 0 18px;margin-bottom:4px;border-bottom:1px solid var(--line-soft)}
.inf-hero .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.inf-hero .n{font-size:40px;font-weight:800;color:var(--money);line-height:1.05;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.inf-hero .s{font-size:12.5px;color:var(--ink-3)}

.inf-t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:22px 0 10px}

/* La dona, con la venta total en el hueco. */
.inf-torta{position:relative;display:flex;justify-content:center;margin:2px 0 6px}
.inf-torta .torta{width:192px;height:192px;max-width:60vw;max-height:60vw}
.inf-torta .mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;text-align:center}
.inf-torta .mid b{font-size:17px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.inf-torta .mid span{font-size:10.5px;color:var(--ink-3);margin-top:2px}

/* La leyenda: el color NUNCA va solo, siempre con nombre y cifra. */
.inf-leg{display:flex;flex-direction:column;gap:1px;margin-top:8px}
/* ── EL AÑO, MES A MES ──
   En línea y no en barras: lo que se mira aquí no es cuánto vendió en marzo, es hacia dónde
   va. El punto del mes en curso late despacio —cada 2,4 s— para que el ojo lo encuentre y se
   entienda que ese mes todavía está creciendo. Late, no parpadea: nada rápido, por la
   epilepsia fotosensible. (Álix, 5-sep-2026.) */
.cuadro-mes.ano{margin-top:12px}
.ano-g{margin:10px 0 2px}
.ano-svg{width:100%;height:auto;display:block;overflow:visible}
/* La rejilla es de apoyo, no de mirar: al 6% se nota lo justo para comparar dos meses lejanos
   sin competir con la línea. La base va un poco más marcada porque es el cero. */
.ano-rej{stroke:rgba(255,255,255,.06);stroke-width:1}
.ano-rej.base{stroke:rgba(255,255,255,.14)}
.ano-yl{fill:var(--ink-3);font-family:var(--mono);font-size:8.5px;text-anchor:end}
/* Delgada: en un gráfico gerencial la línea marca la tendencia, no llena la pantalla. */
.ano-linea{stroke:var(--money);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
/* ── EL TRAMO DEL MES EN CURSO: PUNTEADO Y TITILANDO ──
   No ha terminado y su cifra va a seguir subiendo, así que no puede dibujarse igual que un
   mes cerrado. Titila con el punto, al mismo ritmo, para que los dos se lean como una sola
   cosa: «esto todavía no ha pasado». (Álix, 13-sep-2026.) */
.ano-linea.curso{stroke-dasharray:3 3;animation:titilar 1.9s ease-in-out infinite}
.ano-vivo{animation:latir 2.4s ease-in-out infinite}
/* EL PUNTO PROYECTADO · el MISMO de los otros meses, titilando.
   Se probó hueco y punteado (se perdía) y con un aro alrededor (se leía como otra cosa).
   Álix: «la idea es que sea un punto igual al de los otros meses, solo que titilante».
   Y el color dice lo único que hay que saber de un vistazo: verde si el mes va a cerrar
   por encima del anterior, rojo si va a cerrar por debajo. (Álix, 13-sep-2026.) */
.ano-proy{fill:var(--money);animation:titilar 1.9s ease-in-out infinite}
.ano-proy.baja{fill:var(--red)}
.ano-linea.curso.baja{stroke:var(--red)}
@keyframes latir{0%,100%{opacity:1;r:4}50%{opacity:.5;r:5.5}}
@keyframes titilar{0%,100%{opacity:1}50%{opacity:.32}}
/* ── LOS MESES, YA DENTRO DEL DIBUJO ──
   Aquí vivía `.ano-x`, una rejilla HTML de doce columnas que nunca pudo cuadrar con unas
   líneas repartidas en once tramos. Ahora son texto del SVG, parados en la misma `px(i)`
   que los puntos: el tamaño sale del viewBox, así que se mantienen proporcionados a
   cualquier ancho de pantalla. (Álix, 13-sep-2026.) */
.ano-mes{fill:var(--ink-3);font-family:var(--mono);font-size:9px;letter-spacing:-.02em;
  text-anchor:middle}
.ano-mes.hoy{fill:var(--money);font-weight:800}
.ano-mes.flojo{opacity:.35}
/* La marquita que ata el nombre con su línea. */
.ano-tic{stroke:rgba(255,255,255,.18);stroke-width:1}
.ano-tic.hoy{stroke:var(--money)}
.ano-tic.flojo{opacity:.35}
.ano-vacio{font-size:12.5px;color:var(--ink-3);line-height:1.5;padding:14px 2px 4px}
@media (prefers-reduced-motion:reduce){
  .ano-vivo,.ano-proy,.ano-linea.curso{animation:none}
  /* Sin titileo el punto sigue siendo hueco y punteado: la proyección se distingue igual. */
}

/* ── LAS ETIQUETAS DE LA DONA ──
   El nombre del producto pegado a SU tajada, no en una lista al lado: así no toca emparejar
   colores con la vista para saber qué es el pedazo grande. Dos renglones bien juntos —nombre
   arriba, unidades y porcentaje abajo— pequeños y discretos, que el protagonista es el
   círculo. El porcentaje es lo que deja decir «el 33% de lo que vendo es esto».
   (Álix, 5-sep-2026.) */
.torta.con-eti{width:100%;max-width:none}
/* ⚠ Atadas a `.torta`: `.eti` a secas chocaba con la `.eti` de las mesas (línea 1073 y
   siguientes), que es un nombre viejo y muy usado. Hoy ganaba por especificidad la de las
   mesas y no se notaba, pero la trampa quedaba puesta para el que tocara cualquiera de las
   dos. (Revisión del 6-sep-2026.) */
.torta .eti{font-family:var(--sans)}
.torta .eti-n{fill:var(--ink-2);font-size:9.5px;font-weight:600}
.torta .eti-v{fill:var(--ink-3);font-size:8.5px;font-family:var(--mono)}

/* ── LA LISTA COMPLETA · CINCO A LA VISTA, EL RESTO SE ARRASTRA ──
   Con cien productos la lista se comía la pantalla entera. Cinco renglones caben, se leen, y
   dan a entender que hay más: el borde de arriba y de abajo se difumina para que se note que
   eso se mueve. (Álix, 5-sep-2026.) */
.lista-productos.abierto{max-height:250px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%)}
.lista-productos .inf-lg{padding:6px 2px}
.lista-productos .inf-lg .n{font-size:13.5px}
.lista-productos .inf-lg .v{font-size:12.5px}

.inf-lg{display:flex;align-items:center;gap:10px;padding:9px 2px;
  border-top:1px solid var(--line-soft)}
.inf-lg:first-child{border-top:0}
.inf-lg .p{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.inf-lg .n{flex:1;min-width:0;font-size:14.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inf-lg .v{flex:0 0 auto;font-family:var(--mono);font-size:13.5px;font-weight:700;
  color:var(--ink-2);font-variant-numeric:tabular-nums}
.inf-lg .v em{display:inline-block;min-width:34px;text-align:right;font-style:normal;
  color:var(--ink-3);font-size:12px;margin-left:8px}

/* Una barra por producto: el más largo es el que manda, sin leer cifras. */
.inf-barras{display:flex;flex-direction:column;gap:11px}
.inf-b .n{font-size:14.5px;color:var(--ink)}
.inf-b .v{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin:2px 0 5px;
  font-variant-numeric:tabular-nums}
.inf-b .p{height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.inf-b .p i{display:block;height:100%;border-radius:99px;background:var(--money)}

.inf-l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 2px;border-top:1px solid var(--line-soft);font-size:14.5px;color:var(--ink-2)}
.inf-l .n{font-family:var(--mono);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.inf-l.inf-tot{border-top:1px solid var(--line);margin-top:2px}
.inf-l.inf-tot span{font-weight:800;color:var(--ink)}
.inf-dice{font-size:13px;line-height:1.5;color:var(--ink-3);margin-top:10px;
  padding:11px 12px;border-radius:11px;background:var(--surface-2)}
.inf-dice b{color:var(--ink)}
.inf-dice.bueno{color:var(--money-2)} .inf-dice.bueno b{color:var(--money)}
.inf-dice.malo{color:var(--red)} .inf-dice.malo b{color:var(--red)}

/* ══ LA LICENCIA ══
   La franja de arriba dice la fecha todos los días, en pequeño: es un
   dato, no un cobro. En los últimos cinco días deja de ser un dato y
   pasa a ser algo que hay que hacer, y entonces tiene que verse. */
.lic-aviso{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  margin:0 0 14px;padding:14px;border-radius:13px;cursor:pointer;
  border:1px solid var(--yellow-dim);background:rgba(245,194,68,.10)}
.lic-aviso .i{font-size:21px;flex:0 0 auto;line-height:1.15}
.lic-aviso .t{flex:1;min-width:0}
.lic-aviso .t b{display:block;font-size:15px;font-weight:800;color:var(--yellow);
  margin-bottom:3px}
.lic-aviso .t span{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
.lic-aviso.hoy{border-color:var(--red);background:rgba(230,51,41,.12);
  animation:latido 2.2s ease-in-out infinite}
.lic-aviso.hoy .t b{color:var(--red)}

/* Vencida: no se deja trabajar, y se dice por qué. Lo suyo sigue siendo
   suyo — puede ver sus ventas y sus informes. */
.venc{text-align:center;padding:34px 16px 26px;margin:10px 0 4px;
  border:2px solid var(--red);border-radius:16px;background:rgba(230,51,41,.08)}
.venc .e{font-size:42px;line-height:1}
.venc .t{font-size:21px;font-weight:800;color:var(--red);margin-top:12px;
  letter-spacing:-.02em}
.venc .s{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:10px}
.venc .s b{color:var(--ink)}
.venc-n{font-size:12.5px;line-height:1.55;color:var(--ink-3);text-align:center;
  margin:18px 0 4px}

/* ── LA VIGENCIA QUE TIENE HOY ──
   Va primero y en su color. La pantalla solo mostraba hasta cuándo
   QUEDARÍA si se renueva: con dos clientes uno se acuerda, con veinte
   se termina regalando un mes sin darse cuenta. */
.vig-hoy{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px;border-radius:13px;margin-bottom:16px;
  border:1px solid var(--line);background:var(--surface-2)}
.vig-hoy .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.vig-hoy .f{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.vig-hoy .d{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.vig-hoy.ok .f{color:var(--lic-ok)}
.vig-hoy.poco{border-color:var(--yellow-dim)} .vig-hoy.poco .f,.vig-hoy.poco .d{color:var(--yellow)}
.vig-hoy.venc{border-color:var(--red-dim)}   .vig-hoy.venc .f,.vig-hoy.venc .d{color:var(--red)}
.cal-res .r0{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-bottom:2px}
/* ⚠ Y aquí vivía la versión VIEJA de `.vig-dias`, en rejilla, de cuando
   la vigencia se daba con fechas. La casilla de tres cifras que la
   reemplazó está unas líneas más abajo. (Álix, 28-ago-2026.) */
/* Lo que está dejando de hacer, con SU cifra. No un discurso. */
.venc-ult{display:flex;flex-direction:column;align-items:center;gap:2px;
  margin:16px 0 0;padding:15px 0 13px;border-radius:13px;
  border:1px solid var(--line);background:var(--surface)}
.venc-ult .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.venc-ult .n{font-size:30px;font-weight:800;color:var(--ink-3);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.venc-ult .s{font-size:12px;color:var(--ink-3)}
/* ── EL CALENDARIO DE LA VIGENCIA (26-sep-2026) ──
   Aquí vivía una casilla de tres cifras donde se escribían los DÍAS. Álix:
   «la manera más fácil es que me muestre el calendario y yo toque el día
   hasta el que quiero darle vigencia y ya». `type="date"` abre el calendario
   nativo del celular —en el iPhone, la rueda de Apple—, así que no hay nada
   que aprender. Se le da tamaño de dedo y la tipografía de las cifras. */
.campo.vig-fecha{width:100%;margin:0 0 10px;text-align:center;
  font-family:var(--mono);font-size:20px;font-weight:800;letter-spacing:.03em;
  min-height:54px;color-scheme:dark}
/* Safari en iOS no centra el texto de un input date si no se le dice al
   contenido de adentro; y sin esto el campo se ve vacío a la izquierda. */
.campo.vig-fecha::-webkit-date-and-time-value{text-align:center}
.vig-atajos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.vig-atajos .chip{flex:1 1 auto;min-width:72px;padding:10px 12px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-size:12.5px;font-weight:700;cursor:pointer}
.vig-atajos .chip:active{border-color:var(--money);color:var(--money)}
.cal-res.vacio-res{border-color:var(--line);background:none}
/* Una fecha hacia atrás se puede poner —es como se le corta a quien no
   pagó— pero tiene que verse que eso es lo que va a pasar. */
.cal-res.vencido-res{border-color:var(--red-dim);background:rgba(230,51,41,.07)}
.cal-res.vencido-res .r1{color:var(--red)}
.cal-res.vencido-res .r2{color:var(--red)}

/* ── SERVICIO / PROPINA ──
   Cuatro opciones excluyentes, con chulo. La primera es la que sale de
   fábrica: casi ningún puesto de comida cobra servicio. */
.serv-op{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.serv-b{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:14px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.serv-b .ck{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;border:2px solid var(--line);
  font-size:14px;font-weight:900;color:var(--ground);line-height:1}
.serv-b.on{border-color:var(--money);background:rgba(74,222,128,.09)}
.serv-b.on .ck{background:var(--money);border-color:var(--money)}
.serv-b .t{flex:1;min-width:0}
.serv-b .t b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.serv-b .t span{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-3);margin-top:3px}
.base-conf .cs{font-size:12.5px;color:var(--ink-3);margin-top:6px}



/* ⚠ Aquí abajo vivía una regla vieja de `.vdentro` que lo pintaba
   BLANCO. Cuando la cifra pasó a ser negra adentro, la regla nueva quedó
   arriba y esta —más abajo y más específica (`.mes-bars i .vdentro`)—
   le ganaba en la cascada: el número se seguía viendo blanco y no había
   nada mal en el código nuevo. Se borró. La de verdad está arriba, con
   el resto del gráfico. (27-ago-2026.)
   LECCIÓN: al cambiar el color de algo, buscar el nombre de la clase en
   TODO el archivo, no solo donde uno acaba de escribir. */

/* ── ÁLIX CONFIGURÁNDOLE EL NEGOCIO A UN CLIENTE ──
   La app se ve EXACTAMENTE igual que la suya, y a los diez minutos ya no
   se acuerda de en cuál está. El letrero es fijo, va arriba de todo y no
   se quita sin salirse. (Álix, 27-ago-2026.) */
.cfg-cliente{display:flex;align-items:flex-start;gap:11px;
  margin:0 0 14px;padding:13px 14px;border-radius:13px;
  border:2px solid var(--yellow);background:rgba(245,194,68,.13)}
.cfg-cliente .i{font-size:20px;flex:0 0 auto;line-height:1.1}
.cfg-cliente .t{flex:1;min-width:0;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.cfg-cliente .t b{color:var(--yellow);font-weight:800}
.cfg-cliente .t span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.cfg-cliente .sal{flex:0 0 auto;align-self:center;background:var(--yellow);color:#2A1F00;
  border:0;border-radius:9px;padding:9px 13px;font-size:13px;font-weight:800;cursor:pointer}

/* ── LAS CATEGORÍAS DEL MENÚ, REPLEGADAS ──
   Con cuatro categorías y sus productos la lista se volvía larguísima:
   para llegar a «Bebidas» había que rodar media pantalla. Ahora cada una
   es un renglón con su nombre en grande; se toca y se abre. Una a la vez.
   (Álix, 28-ago-2026.) */
.cat-h{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  margin-top:8px;padding:15px 14px;border-radius:13px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface)}
.cat-h.abierta{border-color:var(--money-dim);background:var(--surface-2)}
.cat-h .fl{flex:0 0 auto;color:var(--money);font-size:14px;width:14px}
.cat-h .t{flex:1;min-width:0;font-size:18px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-h .v{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--ink-3);background:var(--ground);border-radius:20px;padding:3px 10px}
.cat-c{padding:4px 0 10px}
.cat-c .prod{margin-top:6px}

/* ── CONTACTAR AL DESARROLLADOR ──
   El verde de WhatsApp, tal cual: es el color con el que la gente
   reconoce «esto abre WhatsApp» sin leer. Va de último en Configuración,
   con el saludo ya escrito del otro lado. (Álix, 29-ago-2026.) */
.btn-dev{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;margin:22px 0 6px;padding:17px 16px;
  background:#25D366;color:#fff;border:0;border-radius:14px;
  font-size:15px;font-weight:800;letter-spacing:.04em;
}
.btn-dev svg{width:26px;height:26px;flex:0 0 auto}
.btn-dev:active{background:#1FB855}

/* ── LA TORTA DEL TURNO ──
   La misma torta del informe, pero de HOY y en la pantalla principal.
   La leyenda cambia de orden: primero la cantidad —que es lo que se
   pregunta— y debajo la plata. (Álix, 29-ago-2026.) */
.torta-turno{margin-bottom:14px}
.torta-turno .inf-lg .v{font-weight:800;color:var(--ink)}
.torta-turno .inf-lg .v em{display:block;font-style:normal;font-weight:600;
  font-size:11px;color:var(--ink-3);margin-top:1px}
.torta-turno .inf-torta .mid b{font-size:30px;letter-spacing:-.02em}

/* El aviso de que el domi quedó anotado como salido, con su vuelta atrás.
   Abajo, encima de todo, y se va solo a los 8 segundos. */
.salio-aviso{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index:60;background:var(--surface);border:1px solid var(--yellow-dim);
  border-radius:14px;padding:14px 15px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.salio-aviso b{display:block;font-size:14.5px;color:var(--yellow)}
.salio-aviso span{display:block;font-size:12.5px;color:var(--ink-2);
  margin-top:4px;line-height:1.45}
.salio-aviso button{margin-top:10px;width:100%;padding:11px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  font-size:13.5px;font-weight:700}

/* El turno de ayer sin cerrar: donde iba «Tomar pedido». No es un aviso
   que se pueda pasar por alto — es lo único que se puede tocar ahí.
   (Álix, 30-ago-2026.) */
.no-toca.cerrar-ya{border-color:var(--yellow-dim);background:rgba(245,194,68,.08)}
.no-toca.cerrar-ya b{color:var(--yellow)}
.no-toca.cerrar-ya .btn-abrir{margin-top:12px;background:var(--yellow);color:#1A1400}

/* ── EL MES DEL NEGOCIO, EN LA FICHA DEL PANEL ──
   Una barra por día del mes. La de hoy en verde. Sin librerías: son
   divs, y funciona sin señal como todo lo demás. (Álix, 30-ago-2026.) */
.g-mes{border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0 4px;
  background:var(--surface)}
.g-t{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);
  margin-bottom:10px}
.g-t b{font-family:var(--mono);color:var(--ink);font-size:14px}

/* Caminar de mes en mes. Los turnos de un cliente nuevo suelen quedar en el
   mes anterior y al cambiar de mes el gráfico se vaciaba sin dejar cómo ir a
   verlos (Álix, 1-sep-2026). Las flechas van a los lados del título, con un
   blanco de toque de 44px aunque el signo sea chico: esto se usa desde el
   celular. */
/* Las mismas flechas en la app del DUEÑO, sobre el nombre del mes. Ver
   arriba el porqué: sin poder mirar atrás no hay cómo saber si el negocio
   está creciendo, que es lo único que de verdad importa. */
.mes-nav{display:flex;align-items:center;gap:4px;margin-bottom:2px}
.mes-nav .tj-sub{flex:1;text-align:center;margin:0}
.mes-fl{flex:0 0 auto;width:44px;height:44px;background:none;border:0;
  color:var(--ink);font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:10px}
.mes-fl:active{background:var(--line)}
.mes-fl.off{opacity:.2;cursor:default}

.g-nav{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.g-nav .g-t{flex:1;margin-bottom:0;text-align:center}
.g-fl{flex:0 0 auto;width:44px;height:44px;margin:-11px 0;
  background:none;border:1px solid var(--line);border-radius:10px;
  color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.g-fl:active{background:var(--line)}
.g-fl.off{opacity:.25;cursor:default;border-color:transparent}
.g-mes.cargando{opacity:.5}
.g-aviso{font-size:12px;color:var(--yellow);margin-top:8px}
.g-barras{display:flex;align-items:flex-end;gap:2px;height:70px}
.g-col{flex:1;height:100%;display:flex;align-items:flex-end}
.g-b{width:100%;background:var(--money-dim);border-radius:2px 2px 0 0}
.g-col.hoy .g-b{background:var(--money)}
.g-col.cero .g-b{background:var(--line)}
.g-pie{font-size:12px;color:var(--ink-3);margin-top:9px;line-height:1.5}
.g-pie b{color:var(--ink)}

/* La firma, debajo de la versión: discreta, pero que se vea de quién es
   el programa. (Álix, 30-ago-2026.) */
.ver .firma{display:block;margin-top:3px;letter-spacing:.08em}

/* ═══ LA GALLETA DE LA FORTUNA ═══
   Álix (7-sep-2026): «los trozos de la galleta quedan a los lados y el papel se ve saliendo
   de cada galleta, más alargado en vez de tan alto… y la galleta inicial volteada como una
   n, no como una u».

   La galleta es un ARCO —el pliegue arriba y las dos puntas colgando: eso es una n—. Al
   partirse, cada mitad se va a su lado y el papelito se estira de una a la otra: crece de
   ANCHO, con las puntas metidas debajo de cada mitad. Por eso el papel va detrás; encima se
   vería pegado sobre la galleta, no saliendo de ella.

   Las dos mitades son dos dibujos aparte, no uno solo partido: así se pueden poner al píxel
   donde tienen que quedar y el texto del consejo nunca queda debajo de una.

   Sale una vez por turno, en el segundo tranquilo entre abrir la caja y el primer cliente.
   Todo lo que se mueve se apaga con `prefers-reduced-motion` (regla global, línea 339). */
.gll-ov{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:rgba(6,5,8,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .26s ease}
.gll-ov.entro{opacity:1}
.gll-ov.yendose{opacity:0}

/* El recuadro opalino: lo justo para lo que lleva adentro. */
.gll-card{position:relative;width:100%;max-width:336px;padding:15px 13px 13px;
  border-radius:22px;text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 46%,rgba(255,214,140,.08));
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 20px 52px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateY(14px) scale(.96);transition:transform .34s cubic-bezier(.2,1.1,.3,1)}
.gll-ov.entro .gll-card{transform:none}
.gll-t{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.3}

/* El ancho de la escena está topado para que la galleta del panel y la del celular sean
   la MISMA: las mitades van en píxeles fijos desde el centro y el papel se estiraba con el
   contenedor, así que en el panel (26px más ancho) el papel salía distinto. */
.gll-esc{position:relative;display:block;width:100%;max-width:310px;height:196px;
  margin:8px auto 4px;
  border:0;background:none;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}

/* LAS DOS MITADES. Cerradas se tocan en el centro y forman el arco. */
/* El grupo lleva la sombra, no cada pieza: así se dibuja sobre la galleta entera y no
   aparece una raya donde se juntan las dos mitades. */
.gll-mits{position:absolute;inset:0;z-index:2;pointer-events:none;
  filter:drop-shadow(0 9px 8px rgba(0,0,0,.44))}
/* La galleta ENTERA manda mientras está cerrada. Al partirse desaparece y quedan las dos
   mitades, que son el corte exacto de esa misma imagen: el cambio no se ve porque pasa en
   el mismo instante en que empiezan a separarse. */
.gll-entera{position:absolute;top:50%;left:50%;width:206px;height:178px;
  margin-left:-103px;margin-top:-89px;transition:opacity .1s ease}
.gll-esc.abierta .gll-entera{opacity:0}
.gll-mit{position:absolute;top:50%;left:50%;opacity:0;
  transition:transform .62s cubic-bezier(.22,1.15,.32,1), opacity .1s ease}
/* ══ EL BORDE ROTO DE LA MITAD IZQUIERDA ══
   Álix (11-sep-2026): «a la galleta de la izquierda le hiciste un corte recto que le quita
   todo el realismo».

   El corte no lo hizo nadie hoy: viene en la imagen desde el 7-sep. Medido, de la fila 17%
   a la 71% el borde derecho está clavado en el 99,6% del ancho — una línea vertical
   perfecta de más de media galleta, porque esa mitad se recortó de la galleta entera con un
   trazo recto. La mitad derecha no lo tiene: es una galleta completa.

   Una galleta no se corta: se PARTE. Así que se le come una tira irregular a ese borde con
   una máscara, y solo en el tramo recto (del 14% al 75% de alto) — arriba y abajo la
   silueta ya es la curva natural de la galleta y ahí la máscara no toca nada.
   Va en la imagen, no en el grupo: la sombra del grupo (.gll-mits) se calcula DESPUÉS de la
   máscara, así que la sombra también sigue el borde roto. */
.gll-mit.izq{width:102px;height:153px;margin-left:-106px;margin-top:-77px;
  /* ⚠ La primera máscara tenía dientes iguales cada 3,5% y con 7% de fondo: se veía
     recortada con tijera de zigzag, peor que el corte recto. Un quiebre de verdad muerde
     POCO —entre medio y tres por ciento— y nunca dos veces igual, ni en profundidad ni en
     la altura del tramo. Va en base64 porque un SVG suelto dentro de `url(...)` se pelea
     con las comillas y el navegador descarta la regla EN SILENCIO. */
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMTAwIDAgTDEwMCAxMiBMOTkuNCAxNC4yIEw5OC4xIDE1LjEgTDk5LjAgMTcuNiBMOTcuMiAxOS4wIEw5OC42IDIxLjggTDk5LjUgMjMuMSBMOTcuOSAyNS40IEw5Ni40IDI2LjMgTDk4LjIgMjguMCBMOTkuMyAzMC42IEw5OC4wIDMyLjEgTDk5LjYgMzQuOCBMOTcuNiAzNi4yIEw5OC44IDM3LjQgTDk5LjQgNDAuMyBMOTguMyA0MS45IEw5Ni45IDQzLjAgTDk4LjcgNDQuNiBMOTkuNSA0Ny41IEw5OC4yIDQ5LjAgTDk5LjEgNTAuNCBMOTcuNCA1Mi4yIEw5OC45IDUzLjYgTDk5LjYgNTYuNCBMOTguNCA1OC4xIEw5OS4yIDU5LjMgTDk3LjggNjEuMCBMOTkuMCA2Mi40IEw5OC4xIDY0LjYgTDk5LjUgNjYuMiBMOTguNiA2OC4wIEw5OS4zIDcwLjEgTDk4LjAgNzEuNiBMOTkuNiA3My40IEwxMDAgNzUgTDEwMCAxMDAgTDAgMTAwIEwwIDAgWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMTAwIDAgTDEwMCAxMiBMOTkuNCAxNC4yIEw5OC4xIDE1LjEgTDk5LjAgMTcuNiBMOTcuMiAxOS4wIEw5OC42IDIxLjggTDk5LjUgMjMuMSBMOTcuOSAyNS40IEw5Ni40IDI2LjMgTDk4LjIgMjguMCBMOTkuMyAzMC42IEw5OC4wIDMyLjEgTDk5LjYgMzQuOCBMOTcuNiAzNi4yIEw5OC44IDM3LjQgTDk5LjQgNDAuMyBMOTguMyA0MS45IEw5Ni45IDQzLjAgTDk4LjcgNDQuNiBMOTkuNSA0Ny41IEw5OC4yIDQ5LjAgTDk5LjEgNTAuNCBMOTcuNCA1Mi4yIEw5OC45IDUzLjYgTDk5LjYgNTYuNCBMOTguNCA1OC4xIEw5OS4yIDU5LjMgTDk3LjggNjEuMCBMOTkuMCA2Mi40IEw5OC4xIDY0LjYgTDk5LjUgNjYuMiBMOTguNiA2OC4wIEw5OS4zIDcwLjEgTDk4LjAgNzEuNiBMOTkuNiA3My40IEwxMDAgNzUgTDEwMCAxMDAgTDAgMTAwIEwwIDAgWiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.gll-mit.der{width:124px;height:134px;margin-left:-18px;margin-top:-67px}
.gll-esc.abierta .gll-mit{opacity:1}
/* Cada mitad se va con SU giro y SU altura: dos pedazos rotos nunca caen igual. */
.gll-esc.abierta .gll-mit.izq{transform:translate(-104px,6px) rotate(-13deg)}
.gll-esc.abierta .gll-mit.der{transform:translate(116px,-4px) rotate(9deg)}
/* EL FLOTE. Cerrada respira con ganas: sube, baja y se ladea un poco, que es lo que la
   hace ver viva y no un dibujo pegado. Abierta NO se queda quieta —Álix, 7-sep— pero baja
   el ritmo: en ese momento el que manda es el mensaje, y un movimiento lento acompaña sin
   robarse la atención. Va en `translate`, no en `margin-top`, para no re-maquetar en cada
   cuadro. Ojo: las mitades ya usan `transform` para separarse, así que su flote tiene que
   ir en el grupo (.gll-mits), o se pisan. */
.gll-esc:not(.abierta) .gll-entera{animation:gll-flota 2.8s ease-in-out infinite}
@keyframes gll-flota{
  0%,100%{transform:translateY(0) rotate(0deg)}
  30%    {transform:translateY(-7px) rotate(-1.6deg)}
  65%    {transform:translateY(-3px) rotate(1.2deg)}
}
.gll-esc:not(.abierta):active .gll-entera{transform:translateY(4px)}
/* Ya partida: las dos mitades y el papel siguen meciéndose, mucho más despacio. */
.gll-esc.abierta .gll-mits,
.gll-esc.abierta .gll-papel{animation:gll-mece 6.4s ease-in-out infinite}
.gll-esc.abierta .gll-papel{animation-delay:.7s}
@keyframes gll-mece{0%,100%{translate:0 0}50%{translate:0 -4px}}
.gll-esc.abierta .gll-mits{filter:drop-shadow(0 9px 10px rgba(0,0,0,.46))}

/* EL PAPELITO: alargado. Crece a lo ancho desde el centro, y sus puntas quedan debajo de
   cada mitad. El texto vive en la franja del medio, donde nada lo tapa. */
/* ⚠ 31px, no 44: Álix (11-sep-2026) «me gustaba más antes, que quedaba debajo de las
   galletas». El papel vuelve a meterse bien debajo de cada mitad — 248px de ancho, la
   proporción que él aprobó— sin crecer de alto: no puede superar a las galletas. */
.gll-papel{position:absolute;left:31px;right:31px;height:118px;top:50%;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  transform:translateY(-50%) scaleX(.05);opacity:0;transform-origin:50% 50%;
  padding:13px 20px;border-radius:4px;
  background:linear-gradient(180deg,#FFFDF6,#F1E8D2);
  box-shadow:0 5px 14px rgba(0,0,0,.4), inset 0 0 0 1px rgba(140,110,60,.18);
  transition:transform .6s cubic-bezier(.2,1.12,.3,1) .08s, opacity .16s ease .08s}
.gll-esc.abierta .gll-papel{transform:translateY(-50%) scaleX(1);opacity:1}
/* ── LA LETRA LA DECIDE `ajustarLetra`, NO EL CSS ──
   Aquí vivían cuatro escalones (`holgado`, `largo`, `muy-largo`, `diminuto`) y el código
   probaba a ver cuál pegaba. Eran parches apilados —un tope de renglones por acá, un
   mínimo de palabras por fila por allá— y Álix lo dijo con todas sus letras el
   11-sep-2026: «estás haciendo cambios puntuales, de eso no se trata… la idea es que
   crees un algoritmo con lógica para que el texto siempre esté dentro de este recuadro».
   Ahora el tamaño se BUSCA midiendo, y se escribe en el elemento. El CSS solo pone el
   interlineado, que va sin unidad para que crezca con la letra. */
/* ══ LA FRANJA DONDE SE ESCRIBE ══
   Álix (11-sep-2026): «el texto se está tapando con un pedazo de galleta… lo que quería
   era que ajustaras simplemente el área de escritura para que no las tocara, pero el
   tamaño del papel y su proporción estaba bien».

   El papel es fluido —crece con el contenedor— y las dos mitades van en píxeles FIJOS
   desde el centro. Por eso en el panel de Álix, que es más ancho, la frase se metía debajo
   de la mitad derecha y en el celular del cliente no.

   La solución NO es encoger el papel ni separar las mitades: es que lo ESCRITO no se mida
   contra el papel sino contra el hueco que dejan las dos mitades.

   Ese hueco está MEDIDO en el navegador, no calculado: del centro hay 92px libres a la
   izquierda y 88px a la derecha (la derecha es la más justa porque su mitad va girada 9°,
   y el giro le mete la esquina hacia adentro). 168px centrados —84 por lado— caben con
   holgura en cualquier ancho. Debajo de 344px la galleta se encoge por su `@media` y el
   hueco baja a 79px: allá la franja va en 150.
   De paso arregla algo viejo: como la franja escrita ya es la misma en el panel y en el
   celular, una frase se parte en las mismas líneas en los dos. Lo que Álix juzga es
   exactamente lo que ve el cliente. */
/* ── LAS LÍNEAS, PAREJAS ──
   Álix (11-sep-2026): «mira qué mal proporcionado este texto, podríamos poner 6 palabras
   por línea y quedaría cada línea más homogénea». Tenía razón: «Todo lo que quieres está
   del otro / lado del miedo» dejaba siete palabras arriba y tres abajo, y en un papelito
   del tamaño de una uña eso se ve desbalanceado.
   `text-wrap:balance` es exactamente eso: el navegador reparte las palabras para que las
   líneas queden del mismo largo, en vez de llenar la primera hasta el borde. No cambia el
   tamaño de la letra ni el del papel. Donde el navegador sea viejo y no lo entienda, se
   parte como siempre — no se rompe nada. */
.gll-txt{font-size:13px;color:#3A2E18;font-weight:600;
  max-width:174px;margin-left:auto;margin-right:auto;
  line-height:1.26;text-wrap:balance;overflow-wrap:break-word;
  opacity:0;transition:opacity .26s ease .48s}
/* La frase va SIEMPRE en el centro del papel, tenga autor o no (Álix, 8-sep). Por eso el
   pie —firma y autor— va posicionado en la banda de abajo y FUERA del flujo: si fuera un
   hermano más, cada cita empujaría el texto hacia arriba y la frase bailaría de una
   galleta a otra. El relleno de arriba y abajo es igual, así que el centro es el centro. */
/* Quien la dijo. Va pegado a la frase, en cursiva y más chico, para que se lea como
   una firma y no como una segunda frase. */
/* ⚠ Se cuelga del CENTRO, no del borde del papel: el borde se mueve con el contenedor y
   la firma se iba con él hasta meterse debajo de la mitad derecha — el mismo error de la
   frase, en chiquito. 94px desde el centro es la misma franja segura que usa el texto.
   Lo cazó `galleta_texto_libre` midiendo. (11-sep-2026.) */
.gll-autor{position:absolute;right:50%;margin-right:-84px;bottom:4px;max-width:150px;
  /* ⚠ CHICO y APAGADO. Álix (11-sep-2026): «el texto del autor está muy grande y de color
     muy fuerte, la idea es que no se robe la atención». Quien manda en el papelito es la
     frase; el nombre es una firma, no una segunda línea. */
  font-size:9.2px;line-height:1.2;font-style:italic;color:#A2917A;text-align:right;
  opacity:0;transition:opacity .26s ease .52s}
.gll-esc.abierta .gll-autor{opacity:1}
/* La firma, chiquita y centrada debajo de la frase. */
.gll-mlb{position:absolute;left:50%;margin-left:-84px;bottom:6px;
  font-family:var(--mono);font-size:7px;letter-spacing:.24em;color:#BCA477;
  opacity:0;transition:opacity .26s ease .56s}
.gll-esc.abierta .gll-txt,.gll-esc.abierta .gll-mlb{opacity:1}

/* ══ LAS MIGAS ══
   Álix (11-sep-2026): «las migajas de galleta no deben ser puntos, eso es poco realista,
   deben ser pequeñas formas no uniformes».

   Tenía razón y es lo que delataba el dibujo: un círculo perfecto se lee como un adorno,
   no como un pedazo de galleta rota. Una miga de verdad no tiene dos lados iguales.

   Sin imágenes ni SVG: cada miga lleva sus CUATRO radios de esquina distintos —eso es lo
   que da la silueta irregular—, su propio giro y su propio tono. Ocho siluetas que se van
   turnando: con menos se nota el patrón, y a este tamaño ocho ya no se distinguen.
   `border-radius` con los ocho valores (`a b c d / e f g h`) deforma cada esquina por
   separado; es lo que convierte un cuadrito en una piedrita. */
.gll-miga-forma-1{border-radius:64% 36% 47% 53% / 58% 42% 58% 42%;rotate:14deg}
.gll-miga-forma-2{border-radius:38% 62% 58% 42% / 45% 61% 39% 55%;rotate:-23deg}
.gll-miga-forma-3{border-radius:55% 45% 33% 67% / 66% 38% 62% 34%;rotate:41deg}
.gll-miga-forma-4{border-radius:71% 29% 62% 38% / 41% 67% 33% 59%;rotate:-7deg}
.gll-miga-forma-5{border-radius:43% 57% 71% 29% / 54% 33% 67% 46%;rotate:28deg}
.gll-miga-forma-6{border-radius:60% 40% 40% 60% / 36% 64% 36% 64%;rotate:-36deg}
.gll-miga-forma-7{border-radius:33% 67% 55% 45% / 62% 47% 53% 38%;rotate:52deg}
.gll-miga-forma-8{border-radius:48% 52% 36% 64% / 39% 58% 42% 61%;rotate:-15deg}

/* Las migas del golpe: salen del centro y se apagan. */
.gll-migas{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3}
.gll-migas i{position:absolute;width:5px;height:4px;background:#EFBE75;opacity:0}
/* Ni siquiera las del golpe son del mismo tamaño: al partirse saltan pedazos, no perdigones. */
.gll-migas i:nth-child(1){width:6px;height:4.5px}
.gll-migas i:nth-child(2){width:3.5px;height:3px}
.gll-migas i:nth-child(3){width:5px;height:3.5px}
.gll-migas i:nth-child(4){width:4px;height:4.5px}
.gll-migas i:nth-child(5){width:6.5px;height:4px}
.gll-migas i:nth-child(6){width:3px;height:3.5px}
.gll-esc.abierta .gll-migas i{animation:gll-miga .6s ease-out forwards}
.gll-esc.abierta .gll-migas i:nth-child(1){--mx:-40px;--my:-26px;animation-delay:.04s}
.gll-esc.abierta .gll-migas i:nth-child(2){--mx:38px;--my:-24px;animation-delay:.02s}
.gll-esc.abierta .gll-migas i:nth-child(3){--mx:-28px;--my:24px;animation-delay:.08s}
.gll-esc.abierta .gll-migas i:nth-child(4){--mx:30px;--my:26px;animation-delay:.06s}
.gll-esc.abierta .gll-migas i:nth-child(5){--mx:-14px;--my:-34px;animation-delay:.10s}
.gll-esc.abierta .gll-migas i:nth-child(6){--mx:16px;--my:32px;animation-delay:.12s}
@keyframes gll-miga{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(var(--mx),var(--my)) scale(1)}
}

/* Las que quedan regadas. Van por encima de todo (z-index 3) porque desde el 11-sep
   algunas caen SOBRE el papel, en sus bordes — que es lo que pidió Álix y lo que hace que
   el papel se vea debajo de la galleta rota y no pegado aparte.
   Las de encima del papel llevan su sombrita: sobre un fondo claro, una miga sin sombra
   parece una mancha impresa. Y ninguna se mete en la franja de la frase. */
.gll-regadas{position:absolute;inset:0;z-index:3;pointer-events:none}
.gll-regadas i{position:absolute;background:#C9832F;opacity:0;
  box-shadow:0 1px 1px rgba(0,0,0,.28);transition:opacity .3s ease .36s}
/* Dos tonos, como una galleta de verdad: la miga que se partió por la costra es más
   oscura que la que salió de adentro. */
.gll-regadas i.claro{background:#E3A85E}
.gll-regadas i.oscuro{background:#A9682A}
/* Sobre el papel la sombra es más corta y más cerrada: está apoyada, no flotando. */
.gll-regadas i.enpapel{box-shadow:0 .5px 1.5px rgba(90,60,20,.42)}
.gll-esc.abierta .gll-regadas i{opacity:.92}
.gll-esc.abierta .gll-regadas i.enpapel{opacity:.88;transition-delay:.5s}

.btn-galleta{display:flex;align-items:center;justify-content:center;gap:9px}
.btn-galleta img{width:30px;height:26px;flex:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}

/* LA PISTA. Antes había un botón «Gracias» debajo; Álix lo mandó quitar el 8-sep y tiene
   razón: pedía una acción que ya se hace tocando la galleta. Queda solo la frase que dice
   qué hacer, y se va sola a los 4 segundos —para entonces ya la tocó o ya entendió—. No
   es un botón: la galleta entera es lo que se toca. */
/* ── ESCRIBIR FRASES DESDE EL PANEL (Álix, 8-sep-2026) ── */
.gll-sim-caja{margin:2px 0 8px}
.gll-ta{min-height:74px;resize:vertical;line-height:1.35}
/* El aviso de si cabe o no. Verde cuando va bien, rojo cuando hay que quitar palabras:
   se lee de reojo mientras se escribe, que es cuando sirve. */
.gll-aviso{font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink-3);margin:0 0 12px;min-height:15px}
.gll-aviso.bien{color:var(--money)}
.gll-aviso.mal{color:var(--red)}

/* La galleta arriba de la pantalla de frases: la misma, sin su recuadro propio —ya está
   dentro del de la pantalla— y sin sombra, para que no se vea una caja dentro de otra. */
.gll-arriba{margin:2px 0 10px}
/* ⚠ Conserva el ANCHO de la galleta del cliente (el max-width de .gll-card). Con
   `max-width:none` la galleta del panel salía más ancha que la de verdad: el papel se
   estiraba, el texto entraba en menos líneas y Álix podía aprobar una frase que en el
   celular del cliente no cabe. Lo que se juzga tiene que ser lo que se ve. */
.gll-inc{margin:0 auto;padding:0;background:none;box-shadow:none;
  backdrop-filter:none;border:0;transform:none}
.gll-inc .gll-t{margin-bottom:2px}

/* Las frases de Álix, plegadas: van a ser cientos. */
.gll-cajon{margin-top:12px}
.gll-cajon-h{display:flex;align-items:center;gap:8px;width:100%;padding:12px 13px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:12px;color:var(--ink);font-family:inherit;font-size:14px;
  font-weight:700;cursor:pointer;text-align:left}
.gll-cajon-h span{flex:1}
.gll-cajon-h b{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-3)}
.gll-cajon-h i{font-style:normal;color:var(--ink-3);transition:transform .18s ease}
.gll-cajon.abierto .gll-cajon-h i{transform:rotate(180deg)}
.gll-cajon .gll-lista{display:none}
.gll-cajon.abierto .gll-lista{display:flex;margin-top:8px}

.m-sub-2{font-size:12px;line-height:1.35;color:var(--ink-3);margin:-4px 0 10px}
.gll-lista{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.gll-fila{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:12px;padding:11px 12px}
.gll-fila-t{font-size:14px;line-height:1.35;color:var(--ink)}
.gll-fila-a{font-size:11.5px;font-style:italic;color:var(--ink-3);margin-top:3px}
.gll-fila.apagada .gll-fila-t{color:var(--ink-3);text-decoration:line-through}
.gll-fila-acc{display:flex;gap:8px;margin-top:9px}
.gll-fila-acc .btn-mini{background:rgba(255,255,255,.09);color:var(--ink);
  font-size:12px;font-weight:700;padding:7px 12px;border-radius:8px;border:0;cursor:pointer}
.gll-fila-acc .btn-mini.rojo{background:rgba(255,90,90,.13);color:var(--red)}
.gll-fila-acc .btn-mini:active{transform:scale(.96)}

/* Quitar una frase. Discreto y abajo: es una acción de Álix revisando, no del turno.
   Rojo apagado para que no invite a tocarlo sin querer. */
.gll-quitar{display:block;width:100%;margin-top:8px;padding:10px;border:0;border-radius:11px;
  background:rgba(255,90,90,.12);color:var(--red);font-family:inherit;font-size:13px;
  font-weight:700;cursor:pointer}
.gll-quitar:active{background:rgba(255,90,90,.2)}

/* La galleta del simulador: la misma, pero quieta y sin invitar a tocarla. */
/* ⚠ El simulador conserva el ANCHO de la galleta de verdad (336px). Se probó con
   `max-width:none` y el papel se estiraba mientras las mitades —que son imágenes de
   tamaño fijo— se quedaban donde estaban: quedaban encima del texto y tapaban la frase.
   Un simulador más ancho que la galleta real no simula nada. */
.gll-sim{margin:0 auto;box-shadow:none;background:rgba(255,255,255,.05)}
.gll-sim .gll-esc{cursor:default}
.gll-sim .gll-mits,.gll-sim .gll-papel{animation:none}

.gll-pista{margin-top:4px;text-align:center;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:rgba(255,255,255,.5);pointer-events:none;
  animation:gll-pista 4s ease forwards}
@keyframes gll-pista{
  0%  {opacity:0; transform:translateY(4px)}
  12% {opacity:1; transform:translateY(0)}
  78% {opacity:1}
  100%{opacity:0; visibility:hidden}
}

@media (max-width:344px){
  .gll-card{max-width:302px}
  .gll-entera{width:186px;height:161px;margin-left:-93px;margin-top:-80px}
  .gll-mit.izq{width:92px;height:138px;margin-left:-96px;margin-top:-69px}
  .gll-mit.der{width:112px;height:121px;margin-left:-16px;margin-top:-60px}
  .gll-esc.abierta .gll-mit.izq{transform:translate(-94px,6px) rotate(-13deg)}
  .gll-esc.abierta .gll-mit.der{transform:translate(104px,-4px) rotate(9deg)}
  /* La misma proporción que arriba (el papel bien metido debajo de las mitades), con la
     galleta chica: 27px de cada lado sobre una escena de 276. */
  .gll-papel{left:27px;right:27px;height:107px;padding:11px 16px}
  /* La galleta chica deja menos hueco: medido, 84px a la izquierda y 79 a la derecha. */
  .gll-txt{max-width:156px}
  .gll-autor{margin-right:-75px}
  .gll-mlb{margin-left:-75px}
}

/* ── LAS FALLAS DE LAS APPS DE LOS CLIENTES (9-sep-2026) ──
   La lista que Álix mira cuando un cliente llama diciendo «esto no me sirve».
   El texto del error va en monoespaciada porque es texto de máquina: se lee
   para compararlo, no para leerlo bonito. Y NO va en rojo entero —una pantalla
   toda roja no deja ver cuál importa—: rojo el renglón de arriba, apagado el
   de abajo. */
.falla-l{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.falla-l:last-child{border-bottom:none}
.falla-q{font-size:13.5px;line-height:1.35;color:var(--red);
         font-family:var(--mono);word-break:break-word}
.falla-d{font-size:11.5px;line-height:1.4;color:var(--ink-3);margin-top:4px}
.falla-d b{color:var(--ink-2)}
/* La cuenta del botón: se enciende sola y se apaga sola a los tres días. */
.btn.fantasma.con-fallas{border-color:var(--red-dim);color:var(--red)}
/* Una nota al pie que matiza lo que se acaba de leer, sin gritar. */
.m-nota{font-size:11.5px;line-height:1.45;color:var(--ink-3);margin-top:12px;
        padding-top:10px;border-top:1px solid var(--line-soft)}

/* ⛔ Tus ventas no están saliendo de este celular · 24-sep-2026.
   Roja y arriba de todo: no es el puntico discreto de «sin señal», es plata que
   no está llegando. Seis noches de una clienta se perdieron de vista porque
   esto era un letrerito gris en una esquina. */
.no-salen{
  background: color-mix(in srgb, var(--red) 16%, var(--surface));
  border: 1.5px solid var(--red);
  border-radius: 14px; padding: 13px 14px; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.no-salen b{ color: var(--red); font-size: 14.5px; line-height: 1.25; }
.no-salen span{ color: var(--ink-2); font-size: 12.5px; line-height: 1.35; }
.no-salen .btn{ margin: 3px 0 0; }
.no-salen-nota{ color: var(--ink-2); font-size: 12px; line-height: 1.35; }