/* ═══ 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 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} .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} .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 */ .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 */ .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} .plata-hoy .s{font-size:12.5px;color:var(--ink-3)} @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} .olvido-cierre .t b{display:block;font-size:15.5px;font-weight:800;color:var(--red); margin-bottom:4px} .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} .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)} /* La casilla de los días: tres cifras y ya. 365 es un año, y más de un año no se vende de una. */ .vig-dias{display:flex;align-items:center;gap:10px;margin-bottom:6px} .vig-dias .campo.dias3{width:104px;flex:0 0 auto;margin:0;text-align:center; font-family:var(--mono);font-size:22px;font-weight:800;letter-spacing:.04em} .vig-u{font-size:14px;color:var(--ink-3)} .cal-res.vacio-res{border-color:var(--line);background:none} /* ── 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} .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}