/* ⚠️ box-sizing NO se hereda del CSS del panel, que no lo pone globalmente.
Sin esto, "width:100%" en un de verdad, no un div
con onclick: se llega con el teclado y los lectores de pantalla dicen si
está abierta o cerrada. */
/* ⚠️ Se llama .cbarra y no .resumen, que sería el nombre natural: el modal
del historial ya usa la clase "mcaja resumen", y como este CSS se concatena
dentro del CSS del panel, la caja del modal quedaba pintada como un botón
—36×44px, cursor de mano— y el popup del historial "no abría". Abría: se
dibujaba del tamaño de un botón. Dos cosas distintas con el mismo nombre de
clase en la misma hoja es un choque silencioso. */
.cbarra{display:flex;width:100%;align-items:center;gap:10px;font:inherit;
font-size:15px;font-weight:700;background:transparent;border:0;cursor:pointer;
padding:7px 2px;color:#1f1f23;text-align:left}
.cbarra .cant{flex:1;min-width:0}
.cbarra .chev{transition:transform .18s ease;color:#7a7268;font-size:12px}
.cuenta.abierta .cbarra .chev{transform:rotate(180deg)}
/* Plegada se esconde TAMBIÉN el desglose: el total ya está en la barra que
se toca ("9 productos · $7.09"), así que repetirlo abajo son 70px de
pantalla comidos para no decir nada nuevo. Con esto la cuenta plegada pasa
de 195px a ~120px en un teléfono de 812. */
.cuenta:not(.abierta) .detalle,
.cuenta:not(.abierta) .sumas{display:none}
@media (prefers-reduced-motion:reduce){ .cbarra .chev{transition:none} }
/* La observación se ve como el nombre pero más chica: es opcional y no tiene
que competir con lo que SÍ se llena siempre. */
.nota{font-size:14px !important}
.nota::placeholder{color:#9a938a}
.cli{width:100%;font:inherit;font-size:16px;padding:11px 12px;margin:0 0 9px;
border:1px solid var(--line,#e7e0d8);border-radius:10px;background:#fff}
/* Quién atiende, con su etiqueta encima: un desplegable suelto en medio de la
cuenta no dice de qué es, y este se toca una vez por turno — no todo el
tiempo, así que tiene que explicarse solo. */
.mesero{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;color:#9a938a;margin:0 0 4px}
.mesero select{margin-top:3px}
/* ⚠️ SIN scroll propio. Tenía max-height:24vh con overflow, o sea una barra
de desplazamiento DENTRO de otra caja que ya se desplaza: dos barras
pegadas, y el dedo nunca sabe cuál va a mover. Ahora la lista crece lo que
tenga que crecer y el que se desplaza es el panel entero, una sola vez. */
#mLineas{list-style:none;margin:0 0 8px}
#mLineas li{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid #f2ede7;font-size:14.5px}
#mLineas .n{flex:1;min-width:0}
#mLineas button{width:30px;height:30px;border:1px solid var(--line,#e7e0d8);background:#fff;
border-radius:8px;font-size:17px;line-height:1;cursor:pointer;color:#1f1f23}
.sumas{font-size:14px;margin:0 0 10px}
.sumas div{display:flex;justify-content:space-between;padding:2px 0}
/* ⚠️ Sin esto la fila de la propina NO se podía esconder: el JS ponía
hidden=true, el atributo quedaba puesto, y la regla .sumas div con
display:flex le ganaba por especificidad al [hidden] del navegador. Se veía
"Propina (10%) $0.00" en todo negocio que no cobre propina — o sea, en
todos por defecto. Medido: hidden=true y display calculado 'flex'.
Cada vez que se le pone display a un selector de clase hay que devolverle
el [hidden], o el atributo deja de servir en silencio. */
.sumas div[hidden]{display:none}
.sumas .tot{font-size:20px;font-weight:800;border-top:1px solid var(--line,#e7e0d8);
margin-top:5px;padding-top:7px}
.cerrar{display:flex;gap:9px}
.cerrar button{flex:1;font:inherit;font-size:16px;font-weight:700;padding:14px 8px;border:0;
border-radius:12px;cursor:pointer;color:#fff;line-height:1.25}
.bmonto{display:block;font-size:14px;font-weight:800;opacity:.92;margin-top:2px}
.bmonto:empty{display:none}
.cerrar .aqui{background:#1f1f23}
.cerrar .llevar{background:#c2410c}
.cerrar button:disabled{opacity:.45;cursor:default}
.vacio{color:#7a7268;font-size:14px;text-align:center;padding:6px 0 10px}
.merr{color:#b91c1c;font-size:13.5px;margin:0 0 8px;display:none}
.merr.on{display:block}
/* ── PANTALLA ANCHA: dos columnas ──────────────────────────────────────────
900px y no 768: a 768 la columna del menú queda tan angosta que el nombre
del producto, la masa y los cinco números no entran en una línea y cada
producto pasa a ocupar dos. Medido en la tablet, no supuesto. */
@media (min-width:900px){
/* El del panel está topado en 760px, y una rejilla no puede pasar
de su padre: sin esto las dos columnas entraban igual pero apretadas
(menú de 396px en una pantalla de 1180). Se ensancha SOLO esta página,
con :has() — el mismo recurso que ya usa el canal público, así que no
agrega una dependencia nueva. */
main:has(#mostrador){max-width:1120px}
.most{max-width:1120px;padding-bottom:24px;
display:grid;grid-template-columns:minmax(0,1fr) 340px;
gap:0 24px;align-items:start}
/* En pantalla ancha el aviso va abajo a la izquierda: hay sitio de sobra y
ahí no le tapa nada ni a la cuadrícula ni a la cuenta. */
.maviso{left:16px;right:auto;bottom:16px;max-width:360px}
.productos{grid-column:1;min-width:0}
/* STICKY y no fixed: dentro de la rejilla, fija la sacaría del flujo y
volvería a taparlo todo. Sticky la ancla al costado y la deja acompañar
el desplazamiento sin robarle ancho al menú. */
.cuenta{grid-column:2;position:sticky;top:14px;border:1px solid var(--line,#e7e0d8);
border-radius:14px;box-shadow:0 2px 14px rgba(0,0,0,.07);
max-height:calc(100vh - 28px);overflow-y:auto}
.cuenta .in{padding:14px;max-height:none}
.cuenta .detalle{overflow-y:visible}
/* Acá no se pliega: hay espacio de sobra y esconderla sería trabajo extra
por nada. El botón de desplegar desaparece. */
.cbarra{display:none}
.cuenta:not(.abierta) .detalle{display:block}
.cuenta:not(.abierta) .sumas{display:block}
#mLineas{max-height:none}
.cerrar{flex-direction:column}
}
/* 🧪 La franja de la demo (docs/demo.md): siempre a la vista, sin gritar. */
.demobar{background:#fff3d6;border:1px solid #f3d38a;color:#5b4a1d;border-radius:12px;padding:10px 14px;
margin:0 0 14px;font-size:14px;line-height:1.5}
.demobar a{color:#c2410c;font-weight:600}
.demonota{background:#fff8ea;border-radius:8px;padding:6px 10px}
.catnombre{font-weight:700}
/* ── Un pedido que lleva esperando ────────────────────────────────────────
Se pinta la TARJETA, no el contador. El caso que lo motivó: un pedido con
700 minutos en el tablero y lo único que lo delataba era un número de doce
píxeles en rojo, en una tarjeta idéntica a las demás.
Colores suaves y borde grueso a la izquierda: tiene que verse DE REOJO al
barrer la pantalla, sin gritar. Un rojo de error en toda la tarjeta se
vuelve ruido cuando hay tres así, y entonces se ignoran los tres. */
.card.tarde{background:#fffaf0;border-color:#fcd9a8;box-shadow:inset 5px 0 0 #d97706}
.card.muytarde{background:#fdf2f2;border-color:#f3c4c0;box-shadow:inset 5px 0 0 #b91c1c}
/* El color solo no alcanza: con sol en la pantalla, o para quien no
distingue bien los colores, un texto SÍ se lee. */
.tardeetq{display:none}
.card.tarde .tardeetq,.card.muytarde .tardeetq{
display:block;margin:7px 0 0;font-size:13px;font-weight:700;letter-spacing:.01em}
.card.tarde .tardeetq{color:#b45309}
.card.muytarde .tardeetq{color:#b91c1c}
.card.tarde .tardeetq::before{content:'⏰ Este pedido se está tardando'}
.card.muytarde .tardeetq::before{content:'⏰ Lleva mucho esperando — ¿sigue en pie?'}
/* Deshacer: destacado, porque es la red de seguridad y tiene que verse. */
.act.deshacer{background:#1f1f23;color:#fff;font-weight:700}
/* Cancelar: APARTE, más chico y sin color de botón. Antes estaba del mismo
tamaño y a un centímetro de "Preparar" — un dedo con masa cancelaba el
pedido de un cliente de verdad, y no había vuelta atrás. */
.peligro{margin:9px 0 0;text-align:right}
/* Papel, no color de marca: no compite con los botones de avanzar el
pedido, que son la acción principal de la tarjeta. */
/* ⚠️ Es un , no un : TODO el tamaño de los botones vive en la
regla button{...} de más arriba, y un enlace no hereda nada de eso. Sin
repetirlo acá quedaba sin relleno y con otra tipografía — más chico que sus
vecinos y desalineado. Se copia el mismo caja por caja. */
.act.comanda{font:inherit;font-weight:500;line-height:normal;
border-radius:8px;padding:8px 14px;
background:#fff;border:1px solid var(--line,#e6e6e6);
color:var(--ink,#1f1f23);text-decoration:none;
display:inline-flex;align-items:center;justify-content:center;gap:4px}
.act.comanda:hover{border-color:#1f1f23}
/* 👁 Ver: borde punteado — se distingue de un vistazo de los que mandan papel. */
.act.comanda.ver{border-style:dashed;color:#52525b}
/* ¿Salió el papel? Va PEGADO al botón de la comanda, que es donde se mira
cuando uno se hace esa pregunta. Verde apagado y no un ✅ gritando: es un
dato de referencia, no una felicitación. */
.impr{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;
padding:6px 9px;border-radius:8px;white-space:nowrap}
.impr.ok{background:#f0f7f1;color:#2f6b3a;border:1px solid #cfe3d3}
/* 🖨️ El aviso de la impresora, arriba del tablero: ámbar y ancho, tiene que
verse de reojo desde la cocina — es algo que alguien tiene que ir a hacer. */
.avisoimpr{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#fff7ed;
border:1px solid #fdba74;border-left:6px solid #ea580c;color:#7c2d12;font-weight:600;line-height:1.35}
/* "Sin imprimir" en ámbar y no en rojo: todavía no es un fallo —puede que el
pedido acabe de entrar— pero tiene que verse de reojo entre diez tarjetas. */
.impr.falta{background:#fff7e8;color:#8a5a12;border:1px solid #f0dcb8}
.act.cancelar-chico{background:none;border:1px solid var(--line,#e6e6e6);
color:var(--muted,#5b6371);font-size:13px;font-weight:500;
padding:7px 12px;min-height:36px}
.act.cancelar-chico:hover{border-color:#b91c1c;color:#b91c1c}
.entregado.cancelado{background:#f3f2ef;border-color:#e2e0dc;color:var(--muted,#5b6371)}
/* ── Globito de ayuda ──────────────────────────────────────────────────
El disparador es un BOTÓN y se abre con :hover Y con :focus-within,
porque con el dedo no hay hover — y este tablero vive en un teléfono. */
.ayuda{position:relative;display:inline-flex;vertical-align:middle;margin-left:5px}
.ayudab{width:19px;height:19px;min-height:0;padding:0;border-radius:50%;
border:1px solid var(--line,#ddd);background:#fff;color:var(--muted,#5b6371);
font:600 12px/1 ui-serif,Georgia,serif;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.ayudab:hover,.ayudab:focus-visible{border-color:var(--brand,#c2410c);color:var(--brand,#c2410c)}
/* Un globo cuyo botón dice algo (en la demo, "🔒 Versión real"). */
.ayudab.conTexto{width:auto;height:auto;padding:4px 10px;border-radius:999px;
font:600 13px/1.2 system-ui,-apple-system,sans-serif;background:#fff8ea;border-color:#f3d38a;color:#92400e}
/* Una opción bloqueada (la demo): se ve, no se toca, y el globo dice por qué. */
.bloqueada{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.bloqueada .bloq{opacity:.6;cursor:not-allowed}
.bloqueada .ayuda{margin-left:0}
.globo{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);
width:max-content;max-width:min(280px,72vw);
background:#1f1f23;color:#fff;border-radius:10px;padding:9px 12px;
font:400 13px/1.45 inherit;text-align:left;
box-shadow:0 8px 24px rgba(0,0,0,.22);
opacity:0;visibility:hidden;pointer-events:none;z-index:70;
transition:opacity .15s ease,transform .15s ease}
/* La puntita. */
.globo::after{content:'';position:absolute;top:100%;left:50%;margin-left:-5px;
border:5px solid transparent;border-top-color:#1f1f23}
.ayuda:hover .globo,.ayuda:focus-within .globo{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* En móvil el globo NO se ancla al botoncito: anclarlo ahí lo saca de la
pantalla cuando el botón está cerca de un borde (medido: se salía). Se
ancla a la BARRA entera y ocupa su ancho, así siempre cabe. Para eso
.ayuda pasa a position:static y el ancestro posicionado es la barra. */
.alerta,.tiempos{position:relative}
/* La carga de la cocina: se lee de reojo, como la barra de entregas. */
.cocina{background:#fff;border:1px solid #eee3cd;border-radius:12px;padding:8px 12px;margin:0 0 10px;
display:flex;flex-direction:column;gap:4px;font-size:14px}
.cocina .cfila{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.cocina .clab{font-weight:700;min-width:118px}
.cocina .cn b{font-size:16px}
/* Mesas (057) */
.card .who .mesa{color:#14532d}
header .atiende{font-size:14px;color:#5b6371;margin-left:8px}
.mesasgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:10px 0}
.mesabtn{display:block;text-align:center;padding:18px 8px;border-radius:12px;background:#fff;border:1px solid #eee3cd;
font-weight:700;font-size:16px;color:#1f1f23;text-decoration:none}
.mesabtn:active{background:#fff7e6}
/* Para más tarde (055): se ve distinto de un vistazo, sin parecer un problema. */
.paralas{background:#eef4ff;border:1px solid #c9d8f5;color:#1e3a8a;border-radius:8px;padding:5px 9px;
margin:6px 0;font-size:14px}
.card.prog{opacity:.92;border-style:dashed}
.progtit{margin:18px 2px 8px;font-size:15px;color:#1e3a8a}
.cuentamesa{background:#fffbeb;border:1px solid #f3d38a;border-left:6px solid #d97706;border-radius:12px;padding:12px 14px;margin:10px 0}
.cuentamesa.cobrada{background:#f0fdf4;border-color:#bbe5c8;border-left-color:#16a34a}
.cmcab{font-size:16px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cmtot{margin-left:auto;font-weight:800;font-size:17px}
.cmlist{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 2px;font-size:14px;color:#5b6371}
.cmfalta{font-size:13px;color:#92400e;align-self:center}
@media (max-width:520px){
.ayuda{position:static}
.globo{left:8px;right:8px;width:auto;max-width:none;
bottom:auto;top:calc(100% + 8px);transform:translateY(-4px)}
/* La puntita ahora apunta hacia ARRIBA, al botón. */
.globo::after{top:auto;bottom:100%;left:auto;right:18px;
border-top-color:transparent;border-bottom-color:#1f1f23}
.ayuda:hover .globo,.ayuda:focus-within .globo{transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){ .globo{transition:none} }
.tlab{display:inline-flex;align-items:center;font-weight:600;color:var(--ink,#1f1f23)}
/* Promedio de entregas. Discreto: es contexto, no una acción. */
.tiempos{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
background:#fff;border:1px solid var(--line,#e6e6e6);border-radius:12px;
padding:10px 14px;margin:0 0 12px;font-size:13px;color:var(--muted,#5b6371)}
.tiempos .t b{color:var(--ink,#1f1f23);font-weight:700}
.tiempos .t small{opacity:.75}
.tiempos .t.vacio{opacity:.65}
.tiempos .cmp{margin-left:auto;font-weight:600}
.alerta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.alerta .sonidobtn{flex:0 1 auto;min-width:0}
.tiempos .cmp.mejor{color:var(--ok,#15803d)}
/* Pedido recien entregado: verde y sin botones. Se va solo. */
.entregado{flex:1;background:#effaf3;border:1px solid #b7e4c7;color:#15803d;
border-radius:10px;padding:11px 13px;font-size:14px}
.entregado small{display:block;opacity:.7;font-size:12px;margin-top:2px}
.card.s-completed{opacity:.72}
.cuantas{font-weight:700;font-size:14px;margin:5px 0 0}
.lleva{font-size:14px;margin:7px 0 0}
.lleva{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lleva .sin{color:var(--muted,#5b6371)}
.asig{font:inherit;font-size:13px;padding:5px 7px;border-radius:8px;
border:1px solid var(--line,#e6e6e6);background:#fff;color:var(--ink,#1f1f23);
max-width:180px}
/* La línea de tiempo: chiquita y en gris. Es contexto, no la acción — se
consulta cuando alguien pregunta "¿y el mío?", no todo el rato. */
.linea{display:flex;flex-wrap:wrap;gap:5px;align-items:baseline;
margin:8px 0 0;font-size:12px;color:var(--muted,#5b6371)}
.linea .paso b{font-weight:600;color:var(--ink,#1f1f23)}
.linea .flecha{opacity:.45}
.mlink{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
margin:-4px 0 12px;padding:0 2px 8px;border-bottom:1px solid var(--line,#eee)}
.mlink .codigo{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted,#5b6371);
user-select:all;word-break:break-all;flex:1;min-width:180px}
/* Selector de orden. Dentro del bloque que se refresca solo, para que el
botón marcado nunca mienta sobre el orden que se está viendo. */
.ordbar{display:flex;gap:8px;margin:0 0 12px}
.ordbar .ord{flex:1;text-align:center;padding:9px 10px;border-radius:10px;
border:1px solid var(--line,#e6e6e6);background:#fff;
color:var(--muted,#5b6371);font-size:14px;font-weight:600;
text-decoration:none;cursor:pointer;min-height:42px;
display:flex;align-items:center;justify-content:center}
.ordbar .ord.sel{background:#1f1f23;color:#fff;border-color:#1f1f23}
/* Segunda fila: de dónde vino y quién atendió. Se envuelve sola en 375px en
vez de apretar cuatro controles en una línea ilegible. */
.fbar{flex-wrap:wrap}
.fbar .ord{flex:1 1 auto;min-width:88px}
.fbar .fmesero{flex:1 1 160px;min-height:42px}
.empty .verlos{color:#1f1f23;font-weight:600}
/* Pedido que pide ojo humano. Ámbar y no rojo: no es un error, es una
pregunta — y la mayoría de las veces la respuesta será "sí, es real". */
.revisar{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;
border-radius:10px;padding:9px 12px;margin:8px 0 0;font-size:14px}
.revisar ul{margin:5px 0 0;padding-left:20px}
.revisar li{margin:2px 0}
.revisado{color:var(--ok,#15803d);font-size:13px;margin:7px 0 0}
/* El pago con bitcoin: verde pagado, rojo si hay que devolver. */
.pagobtc{border-radius:10px;padding:9px 12px;margin:8px 0 0;font-size:14px;display:flex;flex-wrap:wrap;
gap:6px 10px;align-items:center}
.pagobtc.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}
.pagobtc.devolver{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
/* Discreto a propósito: es un dato que tranquiliza, no una alerta. Con el
mismo peso que el aviso de revisar competiría con él justo en la tarjeta
donde los dos pueden aparecer juntos. */
/* De dónde vino, en el historial: con palabra y no solo con icono, porque acá
hay lugar y porque es lo que se filtra con la vista al revisar el día. */
.orig{font-weight:600;color:#5c554d}
/* Segmentado de canal en los filtros: el radio de verdad va escondido, así
funciona con teclado y sin JS, pero se ve como tres botones pegados. */
/* Los botones de la tarjeta del historial: alineados a la derecha y con aire
arriba, para que no se confundan con el total que tienen encima. */
.hacts{display:flex;justify-content:flex-end;gap:8px;margin:8px 0 0}
/* Fila de día desplegable. Cursor y flecha para que se vea que se toca: una
fila de tabla no parece un botón si no se lo dice. */
.dfila{cursor:pointer}
.dfila .chev{font-size:10px;color:#9a938a;transition:transform .15s ease;display:inline-block}
.dfila[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dfila:hover td{background:#faf7f3}
.ddet td{padding:0 8px 10px}
.dcanales{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:#5c554d;
background:#faf7f3;border-radius:9px;padding:9px 11px}
/* LOS PEDIDOS DE UN MESERO. En DOS columnas y agrupados por día: antes eran
fichitas sueltas que se envolvían solas y con 26 pedidos parecían un
montón. Con dos columnas se lee en orden, y el día arriba evita repetir la
fecha en cada renglón. En un teléfono angosto baja a una sola columna: dos
columnas de 80px no son una tabla, son un revoltijo más chico. */
.mdet{background:#faf7f3;border-radius:9px;padding:9px 11px}
.mdia{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:#9a938a;margin:8px 0 4px}
.mdet .mdia:first-child{margin-top:0}
.mped{display:grid;grid-template-columns:1fr 1fr;gap:1px 20px}
.mped .p{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;
color:#5c554d;padding:2px 0;border-bottom:1px solid #efe9e1}
.mped .p b{color:#1f1f23;font-weight:700}
.mresto{margin:8px 0 0;font-size:12.5px;color:#9a938a}
@media (max-width:460px){ .mped{grid-template-columns:1fr} }
.dcanales b{color:#1f1f23}
@media (prefers-reduced-motion:reduce){ .dfila .chev{transition:none} }
.canal{display:inline-flex;background:#f1ece6;border-radius:9px;padding:2px;gap:2px}
.canal label{font-size:13px;font-weight:600;color:#5c554d;padding:7px 11px;border-radius:7px;cursor:pointer}
/* ⚠️ El resaltado sale del RADIO, no de una clase que pinta el servidor.
Con la clase, tocar "Local" marcaba el radio de verdad pero el fondo blanco
se quedaba en "Todos" hasta recargar: el botón se veía trabado aunque por
dentro había cambiado. :has() lo sigue al instante y sin JS — y ya se usa
en dos lugares más del proyecto, así que no agrega una dependencia nueva. */
.canal label:has(input:checked){background:#fff;color:#1f1f23;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.canal input{position:absolute;opacity:0;width:0;height:0}
.fmesero{font:inherit;font-size:14px;padding:9px 10px;border:1px solid var(--line,#e7e0d8);
border-radius:9px;background:#fff;color:#1f1f23}
/* El diálogo de confirmar. Mismo lenguaje que el resto del panel. */
.cfondo{position:fixed;inset:0;background:rgba(20,15,12,.55);z-index:60;
display:flex;align-items:center;justify-content:center;padding:18px}
.ccaja{background:#fff;border-radius:16px;padding:22px 20px 18px;max-width:420px;width:100%;
box-shadow:0 18px 50px rgba(0,0,0,.3)}
.ctxt{font-size:16px;line-height:1.5;margin:0 0 18px;color:#1f1f23}
.cbtns{display:flex;gap:10px}
.cbtns button{flex:1;font:inherit;font-size:15px;font-weight:700;padding:13px 10px;
border-radius:11px;cursor:pointer;border:1px solid var(--line,#e7e0d8);background:#fff;color:#1f1f23}
.cbtns .csi{background:#1f1f23;border-color:#1f1f23;color:#fff}
.cbtns button:focus-visible{outline:2px solid #ff7a00;outline-offset:2px}
.conocido{color:#6b7280;font-size:12.5px;margin:6px 0 0}
/* LA FILA DEL MENÚ: un formulario con todos los campos y un botón.
Rejilla y no flex: así el nombre, la abreviatura y el precio quedan
ALINEADOS entre filas — con flex cada fila los acomodaba donde le cabía y
la columna de precios bailaba, que es agotador de leer con 81 productos. */
/* La DESCRIPCIÓN va en su propia línea, no compitiendo por ancho con el
nombre. En una sola fila el nombre quedaba en ~146px y se leía "Pupusa de
frijo": justo el dato que hay que poder leer para saber qué estás editando.
Medido a 1180px, no supuesto. */
/* La columna de la abreviatura pasó de 56px a 96px cuando el tope subió de 5
a 50 caracteres: en 56px entraban cinco letras, y "TORTA/POLLO" se leía
"TORTA" con el resto adentro de un campo que hay que desplazar a mano. */
.mrow{display:grid;gap:6px;flex:1;min-width:0;
grid-template-columns:minmax(0,1fr) 96px 74px auto;align-items:center}
/* Cada campo en SU celda, no donde el navegador lo acomode. Dejándolo
automático, la descripción ocupaba la fila entera y empujaba el botón a una
tercera fila para él solo. Y con las posiciones fijas las columnas quedan
alineadas entre pupusas y bebidas, aunque las bebidas no lleven
abreviatura: la de precios se lee como una columna de verdad. */
.mrow .f-nom{grid-area:1/1}
.mrow .f-abbr{grid-area:1/2}
.mrow .f-pre{grid-area:1/3}
.mrow .guardar{grid-area:1/4}
.mrow .f-desc{grid-area:2/1/3/-1}
.mrow input{font:inherit;font-size:14px;padding:8px 9px;min-width:0;
border:1px solid var(--line,#e7e0d8);border-radius:8px;color:#1f1f23;background:#fff}
.mrow .f-abbr{text-align:center;font-weight:700;text-transform:uppercase}
.mrow .f-abbr.chocada{border-color:#b91c1c;background:#fef2f2}
.mrow .f-pre{text-align:right}
.mrow .f-desc{font-size:13px;color:#5c554d}
.mrow input:focus{outline:2px solid #ff7a00;outline-offset:1px}
/* El botón está apagado hasta que haya algo que guardar: así no hay que
adivinar si el cambio quedó, y de paso no se manda una petición por nada. */
.mrow .guardar{font:inherit;font-size:13px;font-weight:700;padding:8px 12px;border-radius:8px;
border:1px solid var(--line,#e7e0d8);background:#f7f3ee;color:#9a938a;cursor:default}
.mrow.sucia .guardar{background:#1f1f23;border-color:#1f1f23;color:#fff;cursor:pointer}
@media (max-width:720px){
/* En el teléfono se apilan: cinco columnas en 375px no entran, y apretarlas
deja campos de 40px donde no se puede escribir. */
.mrow{grid-template-columns:minmax(0,1fr) 84px 74px}
.mrow .f-desc{grid-area:2/1/3/-1}
.mrow .guardar{grid-area:3/1/4/-1}
/* 🔴 LA FOTO SE MONTABA SOBRE EL FORMULARIO.
.mitem es un flex con cuatro hijos: el formulario, la foto, Agotar y la
papelera. El formulario tenía flex:1 y adentro es una REJILLA con dos
columnas fijas (56px + 74px), así que su ancho mínimo real es mayor que
el que el flex le asignaba: se desbordaba de su caja y la descripción
quedaba dibujada DEBAJO de la foto y de Agotar. Se veía como si la foto
estuviera encima del campo "Qué lleva".
El arreglo es darle la línea completa al formulario, y que la foto, Agotar
y la papelera bajen a la siguiente. Se envuelve desde 720px y no desde
640: entre esos dos anchos —una tableta en vertical— pasaba lo mismo. */
.mitem{flex-wrap:wrap}
.mitem .mrow{flex:1 1 100%;order:-1}
.mitem .mfoto{flex:0 0 auto;width:44px;height:44px}
/* En el teléfono la asa baja a la fila de los botones (el formulario ocupa
la primera) y crece al tamaño de un dedo. */
.mitem .asa{width:40px;height:44px;font-size:20px}
.mitem .toggle,.mitem .del{flex:1 1 auto;min-height:44px}
}
.catetq{font-size:11.5px;font-weight:600;color:#7a7268;background:#f4efe8;
border-radius:99px;padding:3px 9px;margin-left:8px;vertical-align:middle}
.catetq.bebida{background:#eef4fb;color:#3b5c80}
/* La cabecera de la categoría es una fila, no un título suelto: nombre
editable, qué hace, y borrar. */
.cath{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.catform{display:flex;gap:6px;align-items:center;flex:1;min-width:180px}
.catform input{flex:1;min-width:0;font:inherit;font-size:16px;font-weight:700;padding:7px 9px;
border:1px solid transparent;border-radius:8px;background:transparent;color:#1f1f23}
/* Sin borde hasta que se toca: en reposo tiene que leerse como el TÍTULO que
es, no como un formulario. El borde aparece al enfocarlo, que es cuando
hace falta saber que se puede escribir. */
.catform input:hover{border-color:var(--line,#e7e0d8);background:#fff}
.catform input:focus{outline:2px solid #ff7a00;outline-offset:1px;background:#fff}
.catguardar{font:inherit;font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:8px;
border:1px solid var(--line,#e7e0d8);background:#f7f3ee;color:#9a938a;cursor:default}
.catform.sucia .catguardar{background:#1f1f23;border-color:#1f1f23;color:#fff;cursor:pointer}
.delcat{border:0;background:transparent;cursor:pointer;font-size:15px;opacity:.55}
.ayudalink{display:inline-block;font-weight:700;color:#c2410c;text-decoration:none;
border:1px solid #e7ded2;border-radius:9px;padding:10px 14px;margin:2px 0 10px}
/* La foto en la fila del menú: un cuadrito que se toca. Con foto muestra la
miniatura; sin foto, la cámara — así se ve de un vistazo a cuáles les falta. */
/* La estrella, del tamaño de un dedo y sin color de botón: marca algo, no
ejecuta nada. Apagada es un contorno; encendida, la estrella llena. */
/* LA PORTADA. La vista previa muestra el nombre ENCIMA, con el mismo velo
que la página real: es donde el dueño se da cuenta solo de si su foto
sirve — lo único que ninguna medida automática puede decidir por él. */
.portada{margin:10px 0 0}
.pvista{position:relative;aspect-ratio:2.4;border-radius:12px;overflow:hidden;
background:linear-gradient(180deg,#241c16,#3a2c21);display:flex;align-items:flex-start}
.pvista img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* La foto mientras se acomoda. Se mueve con transform —el navegador la
desplaza en el compositor, sin repintar— y se recorta UNA sola vez al
guardar. touch-action:none para que arrastrar con el dedo mueva la foto y
no la página. */
.pvista .pfoto{position:absolute;max-width:none;touch-action:none;will-change:transform}
.pvista.mueve .pfoto{cursor:grab}
.pvista.mueve .pfoto:active{cursor:grabbing}
/* La pista de que se puede mover, solo cuando de verdad hay a dónde. */
.pvista.mueve .protulo::after{content:"↕ arrastrá la foto para elegir qué se ve";
display:block;margin-top:6px;font-size:11.5px;opacity:.85}
/* 🔴 EL VELO Y EL RÓTULO SE COMÍAN EL ARRASTRE. Los dos van ENCIMA de la
foto, así que el dedo los tocaba a ellos y la foto no se enteraba. Son
decorado —no hay nada que tocar ahí dentro— así que dejan pasar el puntero.
Mi prueba no lo agarró porque disparaba los eventos DIRECTO sobre la foto,
salteándose el hit-test del navegador: pasaba en verde con la función
rota. */
.pvelo{pointer-events:none;position:absolute;inset:0;
background:linear-gradient(180deg,rgba(20,15,12,.80) 0%,rgba(20,15,12,.52) 46%,rgba(20,15,12,.08) 80%)}
.protulo{pointer-events:none;position:relative;width:100%;padding:14px 16px;text-align:center;color:#fff}
.protulo b{display:block;font-size:19px;line-height:1.2;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.protulo span{font-size:12.5px;opacity:.92;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.pbtns{display:flex;gap:8px;margin:10px 0 0;flex-wrap:wrap}
.pbtns label{cursor:pointer}
.perr{margin:9px 0 0;font-size:14px;line-height:1.45;color:#b91c1c;display:none}
.perr.on{display:block}
.estrella{font:inherit;font-size:19px;line-height:1;padding:0;width:38px;height:38px;
min-height:0;border:1px solid var(--line,#e7e0d8);border-radius:9px;
background:#fff;color:#9a938a;cursor:pointer;display:inline-flex;
align-items:center;justify-content:center;flex:0 0 auto}
.estrella.on{border-color:#f0b429;background:#fffaf0}
.mfoto{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
border:1px dashed #c9c1b6;border-radius:9px;cursor:pointer;overflow:hidden;background:#fff;flex:none}
.mfoto.tiene{border-style:solid;border-color:#d7cfc4}
.mfoto img{width:100%;height:100%;object-fit:cover;display:block}
.mfoto .sinfoto{font-size:16px;opacity:.5}
.mfoto.subiendo{opacity:.45}
/* Quitar la foto: chico y sin color de botón, pegado a la miniatura. */
.quitafoto{font:inherit;font-size:13px;line-height:1;width:26px;height:26px;padding:0;min-height:0;
margin-left:-6px;border:1px solid #e7e0d8;border-radius:99px;background:#fff;color:#8a8278;
cursor:pointer;flex:none}
.quitafoto:hover,.quitafoto:focus-visible{color:#b42318;border-color:#f0c4bf}
/* EL ORDEN DEL MENÚ (ORDEN_JS). touch-action:none en la asa: sin eso, en el
teléfono el dedo desplaza la página en vez de arrastrar la variedad. */
.asa{font:inherit;font-size:18px;line-height:1;width:30px;height:38px;padding:0;min-height:0;
border:0;border-radius:8px;background:none;color:#b3aba0;cursor:grab;touch-action:none;flex:none}
.asa:hover,.asa:focus-visible{color:#1f1f23;background:#f4efe8}
.mitem.arrastrando,.cat.arrastrando{position:relative;z-index:5;box-shadow:0 10px 26px rgba(0,0,0,.18);outline:2px solid #ff7a00}
/* Moviendo categorías, cada una se pliega a su cabecera (ver ORDEN_JS). */
body.ordenandocats #menu .cat[data-cat] > :not(.cath){display:none}
.cath .asacat{margin-right:-4px}
body.ordenando{-webkit-user-select:none;user-select:none;cursor:grabbing}
body.ordenando .asa{cursor:grabbing}
.avisoorden{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;
background:#1f1f23;color:#fff;font-weight:700;font-size:14px;padding:10px 16px;border-radius:99px;
box-shadow:0 6px 20px rgba(0,0,0,.2)}
.act.verificar{background:#b45309;color:#fff;flex:1 1 100%}
/* Aviso de prueba: ámbar avisa, rojo ya pasó. Ninguno tapa el tablero. */
.prueba{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;border-radius:12px;
padding:11px 14px;margin:0 0 12px;font-size:14px;line-height:1.5}
/* Últimos 3 días: sube de tono. A cinco días alcanza con informar; a tres
hay que interrumpir, porque el tablero es lo único que se mira a diario. */
.prueba.urge{background:#fff1f2;border-color:#fecdd3;color:#9f1239;font-weight:500}
.prueba.fin{background:#fdeceb;border-color:#f3c4c0;color:#991b1b}
/* La tarjeta de la prueba en Ajustes: primera y destacada. */
.prueba-caja{border-color:#fed7aa;background:#fffbf5}
body{font-family:system-ui,sans-serif;margin:0;background:#f4f2ec;color:#1a1a18}
header{background:#fff;padding:12px 16px;border-bottom:1px solid #ddd;display:flex;gap:16px;align-items:center;position:sticky;top:0}
header b{font-size:18px}header a{color:#444;text-decoration:none;font-weight:500}
header a.navout{margin-left:auto;color:#a32d2d}
main{max-width:760px;margin:0 auto;padding:16px}
.card{background:#fff;border-radius:12px;padding:14px;margin:10px 0;border-left:6px solid #ccc}
.card.s-confirmed{border-color:#888}.card.s-received{border-color:#378add}.card.s-preparing{border-color:#ef9f27}
.card.s-ready{border-color:#1d9e75}.card.s-on_the_way{border-color:#7f77dd}.card.s-completed{border-color:#bbb;opacity:.6}.card.s-cancelled{border-color:#e24b4a;opacity:.6}
.row1{display:flex;gap:10px;align-items:center}.no{font-weight:600;font-size:18px}.who{flex:1}.badge{background:#eee;border-radius:20px;padding:3px 10px;font-size:13px}
/* Los tonos de la pastilla. Iban con .badge a secas, que es gris para
todo: 'conectado' y 'sin responder' se veían IGUAL, que es lo contrario
de para qué existe el estado. */
/* El envío pendiente: AMARILLO y no rojo. No es un error —el pedido está
bien— es algo que falta hacer. El rojo acá competiría con los pedidos que
de verdad piden revisión, y dos rojos distintos se dejan de mirar. */
/* EL BOTÓN QUE HAY QUE TOCAR. Late despacio y en ámbar, no en rojo: no es
una alarma, es un pendiente. Un rojo más en una tarjeta que ya puede tener
el aviso de revisión hace que se dejen de mirar los dos.
Se detiene para quien pidió menos movimiento: un elemento que late sin
parar es exactamente lo que molesta a esas personas. */
.wa.urge{background:#f59e0b;color:#1f2937;font-weight:600;animation:latir 2s ease-in-out infinite}
@keyframes latir{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){ .wa.urge{animation:none;outline:2px solid #b45309} }
.envioform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 0;
background:#fef3c7;border:1px solid #fcd34d;border-radius:10px;padding:8px 10px}
.envioform .epq{font-size:14px;color:#713f12;flex:1;min-width:150px}
.envioform input{width:70px}
.badge.ok{background:#dcfce7;color:#14532d}
.badge.warn{background:#fef3c7;color:#713f12}
.badge.err{background:#fee2e2;color:#7f1d1d}
.timer{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;color:#444;background:#eee;border-radius:6px;padding:2px 8px;white-space:nowrap}
.timer.warn{background:#fac775;color:#633806}.timer.late{background:#f7c1c1;color:#a32d2d}
.items{margin:6px 0;color:#333}.row2{display:flex;justify-content:space-between;color:#555;font-size:14px}.total{font-weight:600;color:#1a1a18}
.note{margin:4px 0;padding:4px 8px;background:#fff7e6;border-left:3px solid #e0a800;border-radius:4px;font-size:13px;color:#5a4500}
.acts{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
button{font:inherit;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;background:#1d9e75;color:#fff;font-weight:500}
button.cancelled{background:#e24b4a}button.toggle{background:#633806}.empty{color:#777;text-align:center;padding:30px}
h3{color:#777;font-size:14px;margin:20px 0 6px}.done{color:#aaa}
.cat{background:#faf8f2;border:1px solid #e5e2d8;border-radius:12px;padding:12px 14px;margin:14px 0}
.cat h2{margin:0 0 8px;font-size:17px}.empty2{color:#999;font-size:14px;margin:6px 0}
.mitem{background:#fff;border-radius:10px;padding:10px 12px;margin:8px 0;display:flex;gap:10px;align-items:center}
.mitem.soldout{opacity:.55}.mname{flex:1;display:flex;gap:4px;min-width:120px}.mname input{flex:1;min-width:90px;border:1px solid #ccc;border-radius:6px;padding:6px}
.mname button{background:#888;padding:6px 8px}.mprice{display:flex;gap:4px}.mprice input{border:1px solid #ccc;border-radius:6px;padding:6px;width:64px}
.mprice button{background:#888}.del{background:#e24b4a;padding:6px 9px}
/* Abreviatura de la comanda. Monoespaciada y en mayúsculas para que lo que se
escribe acá se vea IGUAL que lo que va a salir en el papel. */
.mabbr{display:flex;gap:4px}
.mabbr input{border:1px solid #ccc;border-radius:6px;padding:6px;width:52px;
text-align:center;text-transform:uppercase;font-weight:700;
font-family:ui-monospace,Menlo,Consolas,monospace}
.mabbr input::placeholder{font-weight:400;color:#aaa;text-transform:none}
.mabbr button{background:#888;padding:6px 8px}
/* La que choca se marca en su sitio: el aviso de arriba dice QUÉ pasa, el
borde rojo dice DÓNDE arreglarlo. */
.mabbr.chocada input{border-color:#b91c1c;background:#fdeceb}
.estado{background:#25d366;color:#fff;font-weight:700;font-size:15px;
padding:12px 18px;border-radius:10px;border:0;margin:10px 0 4px;cursor:pointer}
.estado:active{background:#1eb457}
.radio{display:flex;gap:9px;align-items:flex-start;margin:0 0 9px;cursor:pointer;
font-size:14px;line-height:1.45}
.radio input{margin:3px 0 0;flex:0 0 auto;width:18px;height:18px}
.radio span{color:var(--muted,#5b6371)}.radio b{color:var(--ink,#1f1f23)}
.choque{background:#fdeceb;border:1px solid #f3c4c0;color:#991b1b;
border-radius:10px;padding:11px 13px;margin:0 0 12px;font-size:14px;line-height:1.5}
.madd{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.madd input[name=name]{flex:1;min-width:120px;border:1px solid #ccc;border-radius:8px;padding:8px}
.madd input[name=price]{width:70px;border:1px solid #ccc;border-radius:8px;padding:8px}.madd button{background:#1d9e75}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;background:#fff;border:1px solid #e5e2d8;border-radius:12px;padding:12px;margin-bottom:8px}
.filters label{display:flex;flex-direction:column;font-size:12px;color:#777;gap:2px}
.filters input{border:1px solid #ccc;border-radius:8px;padding:8px}
.filters input[name=name],.filters input[name=phone]{min-width:120px}
.clearf{align-self:center;color:#888;font-size:13px;text-decoration:none}
/* ── Resumen del historial ── */
.mcaja.resumen{max-width:520px}
.rcifras{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px}
.rcifras div{background:#faf8f3;border:1px solid var(--line,#e5e2d8);border-radius:12px;
padding:12px 8px;text-align:center}
.rcifras b{display:block;font-size:22px;color:var(--ink,#1f1f23);line-height:1.15}
.rcifras span{font-size:12px;color:var(--muted,#5b6371)}
.rcanc{background:#faf8f3;border:1px solid var(--line,#e5e2d8);border-radius:10px;
padding:10px 12px;margin:10px 0 0;font-size:13px;line-height:1.5;
color:var(--muted,#5b6371)}
.rcanc b{color:var(--ink,#1f1f23)}
.mcaja.resumen h4{font-size:14px;margin:20px 0 8px;color:var(--muted,#5b6371);
text-transform:uppercase;letter-spacing:.05em}
/* Una fila por variedad. La barra da la proporción de un vistazo: una lista de
números sueltos no dice cuál manda hasta que uno los compara a mano. */
.vfila{display:grid;grid-template-columns:1fr 88px 34px;align-items:center;
gap:10px;padding:5px 0;font-size:14px}
.vet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vet .ms{color:var(--muted,#5b6371);font-size:13px}
.vbar{background:#efece4;border-radius:99px;height:9px;overflow:hidden}
/* ⚠️ EL ANCHO VA POR CLASE, no por style en línea. La CSP del sitio es
style-src 'self': un atributo style se DESCARTA en silencio, la variable
nunca llega, el ancho queda inválido y la barra llena todo — todas iguales,
que fue justo lo que se vio en producción. Veinte clases de 5% en 5%: el
error máximo es 2.5%, invisible en una barra de 88px. */
.vbar i{display:block;height:100%;background:#ff7a00;border-radius:99px}
.vbar .b5{width:5%}
.vbar .b10{width:10%}
.vbar .b15{width:15%}
.vbar .b20{width:20%}
.vbar .b25{width:25%}
.vbar .b30{width:30%}
.vbar .b35{width:35%}
.vbar .b40{width:40%}
.vbar .b45{width:45%}
.vbar .b50{width:50%}
.vbar .b55{width:55%}
.vbar .b60{width:60%}
.vbar .b65{width:65%}
.vbar .b70{width:70%}
.vbar .b75{width:75%}
.vbar .b80{width:80%}
.vbar .b85{width:85%}
.vbar .b90{width:90%}
.vbar .b95{width:95%}
.vbar .b100{width:100%}
.vqty{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
/* La tabla se desplaza sola: con muchos días, en un teléfono se desborda. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rtab{width:100%;border-collapse:collapse;font-size:14px}
.rtab th{text-align:left;font-size:12px;color:var(--muted,#5b6371);font-weight:600;
padding:6px 10px 6px 0;border-bottom:1px solid var(--line,#e5e2d8)}
.rtab td{padding:7px 10px 7px 0;border-bottom:1px solid #f2efe8;
font-variant-numeric:tabular-nums;white-space:nowrap}
.rtab .mny{font-weight:700}
.hmeta{color:#666;font-size:13px;margin:4px 0}
.hcount{display:flex;align-items:center;gap:8px;width:100%;
background:#fff;border:1px solid var(--line,#e5e2d8);border-radius:10px;
padding:11px 14px;margin:8px 0;color:var(--muted,#5b6371);font-size:14px;
cursor:pointer;text-align:left;font-family:inherit}
.hcount:hover{border-color:#1f1f23}
.hcount{flex-wrap:wrap}
.hcount b{color:var(--ink,#1f1f23);font-size:15px}
.hcount .hnums{display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline}
.hcount .htope{flex-basis:100%;font-size:12px;opacity:.8}
.hcount .verm{margin-left:auto;color:var(--brand,#c2410c);font-weight:600;font-size:13px}
.setform{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.setform input:not([type=radio]):not([type=checkbox]){border:1px solid #ccc;border-radius:8px;padding:8px;width:90px}
.setform input[inputmode=tel]{width:150px}
/* El nombre de la estación se escribe una vez y hay que poder leerlo entero:
en 90px, "Pupusería" ya no entra, y el ejemplo del placeholder —que es la
única explicación de qué va acá— se cortaba en "Pupusería, Taq". */
.setform input[name=grupo_nombre]{width:190px}
/* Ajustes: the BIG settings form stacks its sections full-width (it is NOT a
one-line .setform — that flex-row squeezed the cards side by side). */
.bigform{display:block}
.weblink{margin-top:8px;font-size:14px}
.weblink a{color:#c2410c;font-weight:600;word-break:break-all}
.src{font-size:14px;margin-right:2px}
.bigform label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:500}
.bigform input{border:1px solid #ccc;border-radius:8px;padding:8px;font:inherit}
.bigform input[type=number],.bigform input[inputmode=decimal]{width:90px}
.bigform input[inputmode=tel]{width:200px}
.bigform input.wide{flex:1 1 260px;min-width:0}
.bigform>button{margin-top:6px;min-width:180px;min-height:44px;font-size:16px}
.hint{color:#777;font-size:13px;margin:4px 0 0}.flash{color:#1d7a4d;font-weight:600;margin:0 2px 8px}
/* Avisos push: un solo boton grande — se toca con el pulgar, en la cocina. */
.pushbtn{margin-top:10px;background:#c2410c;color:#fff;border:0;border-radius:10px;
padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;min-height:46px;font-family:inherit}
/* Los del QR son ENLACES con cara de botón —abren otra pestaña y descargan un
archivo, que es lo que un hace bien— y sin esto salían subrayados y
desalineados respecto a los botones de al lado. */
a.pushbtn{display:inline-flex;align-items:center;justify-content:center;
text-decoration:none;box-sizing:border-box}
.pushbtn[data-on="1"]{background:#fff;color:#c2410c;border:1px solid #c2410c}
.pushbtn.ghost{background:#fff;color:#555;border:1px solid #d8d4c8;margin-left:8px}
/* Barra del aviso sonoro. Va FUERA de #orders porque HTMX reemplaza ese nodo
cada 10s y se llevaría el botón (y su estado) por delante. */
/* Verde WhatsApp y con borde, para que NO se confunda con los botones de
estado: aquel cambia el pedido, este solo abre un chat. */
.wa{display:inline-flex;align-items:center;background:#fff;color:#128c7e;
border:1px solid #128c7e;border-radius:10px;padding:0 12px;min-height:38px;
font-size:14px;font-weight:600;text-decoration:none;margin-left:auto}
.wa:hover{background:#128c7e;color:#fff}
/* El botón más importante del panel: si esto está cerrado, no entra ni un
pedido. Grande, con color inequívoco, y sin nada al lado que lo confunda. */
.turnobtn{width:100%;max-width:340px;border:0;border-radius:12px;padding:16px;
font-size:17px;font-weight:700;cursor:pointer;font-family:inherit;color:#fff;min-height:54px}
.turnobtn.abrir{background:#15803d}
.turnobtn.cerrar{background:#b91c1c}
.turnobtn:active{transform:scale(.99)}
/* La fila de arriba es un boton: blanco grande para tocar con el pulgar. */
.row1{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;
padding:2px 0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.row1:hover .lupa{opacity:1}
.lupa{margin-left:auto;opacity:.35;font-size:13px}
/* Ventana de detalle. #modal vacio no ocupa nada: abrir/cerrar es poner o
quitar el HTML, sin estado que se pueda desincronizar. */
#modal:empty{display:none}
.mfondo{position:fixed;inset:0;background:rgba(20,15,12,.55);z-index:50;
display:flex;align-items:flex-end;justify-content:center;padding:0}
.mcaja{background:#fff;width:100%;max-width:520px;max-height:86vh;overflow:auto;
border-radius:16px 16px 0 0;padding:18px 18px 26px}
@media (min-width:560px){ .mfondo{align-items:center;padding:20px} .mcaja{border-radius:16px} }
.mtop{display:flex;align-items:center;gap:12px;font-size:17px}
.mcerrar{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;
cursor:pointer;color:#777;min-width:44px;min-height:44px}
.mhora{color:#777;font-size:13px;margin:2px 0 10px}
.mdatos{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:12px 0 0;font-size:14px}
.mdatos dt{color:#777}
.mdatos dd{margin:0}
.reslist{list-style:none;margin:10px 0;padding:0}
.reslist li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
border-bottom:1px solid #eee3cd;font-size:15px}
.reslist li:last-child{border-bottom:0}
.reslist small{color:#777}
.restot{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin-top:8px;
padding-top:10px;border-top:1px solid #eee3cd;font-size:14px}
.restot .grande{font-size:17px;font-weight:700;padding-top:4px}
.mono{font-family:ui-monospace,monospace;font-size:12px;color:#777}
.fotolbl{display:block;margin:12px 0 6px;font-size:14px;font-weight:600}
.alerta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.sonidobtn{background:#fff;color:#555;border:1px solid #d8d4c8;border-radius:10px;
padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;min-height:42px;font-family:inherit}
.sonidobtn.on{background:#c2410c;color:#fff;border-color:#c2410c}
.sonidobtn.ghost{background:#fff;color:#555;border-color:#d8d4c8}
.sonidobtn.pendiente{background:#fff;color:#b45309;border-color:#b45309}
.pendnota{display:block;color:#b45309;margin-top:2px}
.alerta .hint{flex:1 1 240px;min-width:0}
/* El pedido recién llegado se marca hasta que el dueño mire la pantalla. */
.card.nuevo{outline:2px solid #c2410c;outline-offset:2px;animation:latir 1.1s ease-out 3}
@keyframes latir{0%{background:#fff4ec}60%{background:transparent}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){ .card.nuevo{animation:none;background:#fff4ec} }
.pushbtn:disabled{opacity:.6;cursor:default}
.pushout{font-size:13px;margin:8px 0 0;color:#777;min-height:1.2em}
.pushout.ok{color:#1d7a4d;font-weight:600}
.pushout.warn{color:#b45309}
.ok{color:#1d7a4d;font-weight:600}.off{color:#a32d2d;font-weight:600}
.masalabel{align-items:center;font-weight:500}
.loginbox{background:#fff;padding:20px;border-radius:12px;max-width:380px;margin:30px auto}
.loginerr{color:#a32d2d}
.logininput{width:100%;box-sizing:border-box;padding:10px;border:1px solid #ccc;border-radius:8px;margin-bottom:10px}
.fullw{width:100%}.wide{min-width:200px}
/* ── Responsive: phones (the kitchen's everyday device) ── */
@media (max-width:640px){
header{flex-wrap:wrap;gap:6px 14px;padding:10px 12px}
header b{font-size:17px;flex-basis:100%}
header a{font-size:15px}
main{padding:12px 10px}
/* inputs at 16px stop iOS from zooming on focus */
input,button,select{font-size:16px}
.card{padding:13px 12px}
.row1{flex-wrap:wrap;gap:6px 10px}.who{flex-basis:auto}
/* .act y no button: el de la comanda es un enlace, y con la regla
apuntando solo a button quedaba de otro ancho que los demás. */
.acts{gap:8px}.acts .act,.acts button{flex:1 1 40%;min-height:46px}
.mitem{flex-wrap:wrap}.mname{flex:1 1 100%}.mprice{flex:1 1 auto}.mprice input{width:100%}
.mabbr{flex:0 0 auto}
.mitem .toggle,.mitem .del{flex:1 1 auto;min-height:44px}
.madd input[name=name]{flex:1 1 100%}.madd input[name=price]{flex:1 1 90px}.madd button{flex:1 1 100%;min-height:44px}
.filters{flex-direction:column;align-items:stretch}
.filters label,.filters input{width:100%;box-sizing:border-box}
.filters button{min-height:46px}
/* 🔴 Las casillas y los botones redondos NO se estiran. Con "input" a secas
esto les daba el 100% del ancho, y el texto de cada opción quedaba
empujado FUERA de la pantalla (lo vio Héctor el 24-sep en el envío). */
.setform{flex-wrap:wrap}
.setform input:not([type=radio]):not([type=checkbox]){width:100%;box-sizing:border-box}
/* Y cada campo con su emoji ocupa la línea: angostos, el ejemplo se cortaba
("7000 0000 (opcion…"). */
.setform:not(.col) label{flex:1 1 100%;display:flex;gap:8px;align-items:center}
/* Quitar a una PERSONA no es una barra roja de lado a lado: se lee como
alarma y se toca sin querer al bajar la página. Botón compacto al lado. */
.mitem.persona{flex-wrap:nowrap}.mitem.persona .mname{flex:1 1 auto;min-width:0}
.mitem.persona .del{flex:0 0 52px}
.setform button{width:100%;min-height:46px}
/* Ajustes on the phone: text-ish inputs fill the line NEXT TO their emoji
(flex-grow, not width:100%, so the icon doesn't orphan on its own line);
small numeric ones (minutos, hora, $) stay compact beside their unit. */
.bigform input[inputmode=tel],.bigform input.wide{flex:1 1 200px;width:auto;min-width:0;box-sizing:border-box}
.bigform>button{width:100%;min-height:48px}
/* La asignación de estaciones, en el teléfono: el nombre arriba y el
selector abajo, ocupando la línea. Lado a lado en 375px el selector
quedaba en 90px, donde "Pupusería" y "Plancha" se ven iguales. */
.gfila{flex-wrap:wrap}
.gfila .gsel{flex:1 1 100%;min-height:44px}
}
/* ── Dividir la cocina ────────────────────────────────────────────────── */
.subt{font-size:14px;margin:16px 0 4px;color:#3f3a34}
.gfila{display:flex;align-items:center;gap:10px;padding:7px 0;
border-top:1px solid var(--line,#e7e0d8)}
.gnom{flex:1;min-width:0;font-size:14px}
.gnom small{display:block;color:#8a837a;font-size:12px}
/* ── El logo del comprobante y el QR ─────────────────────────────────── */
.logobox{margin:10px 0}
/* Fondo BLANCO y a cuadros no: el logo es blanco y negro y va sobre papel
blanco, así que la vista previa tiene que ser blanca o miente. */
.lvista{display:flex;align-items:center;justify-content:center;min-height:88px;
padding:10px;background:#fff;border:1px dashed var(--line,#e7e0d8);border-radius:10px}
.lvista img,.lvista canvas{max-width:100%;max-height:120px;height:auto;image-rendering:pixelated}
.lvacio{color:#a49c92;font-size:14px}
.qrcaja{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:10px 0}
.qrvista{border:1px solid var(--line,#e7e0d8);border-radius:10px;background:#fff}
.qrlado{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.qrurl{font-size:13px;color:#5c554d;word-break:break-all;margin:0 0 2px}
.gsel{font:inherit;font-size:14px;padding:7px 9px;border-radius:8px;
border:1px solid var(--line,#e7e0d8);background:#fff;color:#1f1f23;max-width:60%}
.asigguardar{font:inherit;font-size:14px;font-weight:700;margin:12px 0 0;padding:10px 16px;
border-radius:8px;border:1px solid #1f1f23;background:#1f1f23;color:#fff;cursor:pointer}
/* Los modos de reparto son párrafos, no una fila de campos: apilados se
pueden leer, y hay que leerlos para elegir bien. */
.setform.col{display:block}
/* El envío y la propina del negocio (24-sep): el campo va debajo de su opción,
con sangría, para que se lea a cuál pertenece. */
.sangria{display:flex;gap:6px;align-items:center;margin:-2px 0 12px 27px;font-size:14px}
.sangria input{width:90px;padding:8px 10px;border:1px solid var(--line,#e7e0d8);border-radius:8px;font:inherit}
.hint.warn{background:#fff7ed;border:1px solid #fcd9b6;color:#7c2d12;border-radius:10px;padding:9px 12px;margin:8px 0}
.hint.warn a{color:#c2410c;font-weight:700}
.flash.err{color:#b91c1c;background:#fdeceb;border:1px solid #f3c4c0;border-radius:10px;padding:10px 12px}