/* ========================================================================= Comandas — hoja de estilo única. OJO: al tocar este archivo hay que subir CM_ASSET_VER en config.php, o el cambio no se ve en un celular que ya entró (los assets se cachean días). ========================================================================= */ /* ───────── Tipografía ───────── IBM Plex Sans, servida DESDE ESTE MISMO SERVIDOR. Dos decisiones, y las dos tienen su razón. POR QUÉ NO LA DEL SISTEMA. Antes el panel usaba solo la fuente del aparato, y el argumento era bueno: la tablet de la cocina puede estar con wifi malo y una fuente que no carga deja la pantalla ilegible justo cuando más se necesita. Servirla desde el propio dominio quita esa objeción entera — viaja por la conexión que ya está abierta para el HTML, sin DNS ni saludo TLS a un tercero, y la cachea el mismo max-age que el resto. Son 45 KB una sola vez. Y si aun así no llegara, `swap` más la misma pila de respaldo de antes dejan la pantalla exactamente como estaba: no se pierde nada. POR QUÉ PLEX Y NO INTER. Inter era la elección obvia y por eso mismo no es una elección: está en tantos paneles que ya no dice nada de quién lo hizo. Plex se dibujó para una empresa de máquinas, y eso es justo lo que es Comandas — un interruptor industrial, corriente corriendo por circuitos, un tablero que se lee a metro y medio en una cocina caliente. Los remates acampanados y la 'a' de doble piso le dan carácter sin costarle un gramo de legibilidad, porque se diseñó para interfaces. Trae cifras tabulares de verdad, que es lo que alinea una columna de precios en caja. Y pesa 45 KB contra los 48 de Inter. Un solo archivo variable de 400 a 700: los cuatro pesos que usa el panel pesan lo mismo que uno. */ @font-face{ font-family:'Plex var'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fuentes/plex-var-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } :root{ /* ── Superficies. Cuatro niveles, no más: cada nivel de más es una decisión que alguien tiene que tomar otra vez en la próxima pantalla. */ --fondo:#0A0A0C; --sup:#141418; --sup2:#1C1C22; --sup3:#24242C; --borde:#2A2A33; --borde2:#3A3A45; /* ── Texto. Los tres tonos están MEDIDOS contra la superficie más clara en la que aparecen (--sup3): 14.1:1, 5.5:1 y 4.5:1. --tenue2 era #6B6B75 y daba 2.92:1 sobre --sup3 — por debajo del mínimo de WCAG incluso para texto grande, y es justo el color de la ayuda que va debajo de cada campo. Se subió a #8A8A94, el gris más discreto que todavía pasa 4.5:1. */ --texto:#F5F5F7; --tenue:#9A9AA4; --tenue2:#8A8A94; --acento:#FF7A45; --acento2:#FF9B68; --acento-osc:#C4491A; /* Textos sobre tinte (verde sobre verde translúcido, etc). Van en variables porque el tema claro necesita las versiones OSCURAS de los mismos colores: un verde pastel #86EFAC que brilla sobre negro es invisible sobre blanco. */ --tx-ok:#86EFAC; --tx-mal:#FCA5A5; --tx-ojo:#FCD34D; --tx-info:#93C5FD; --tx-cielo:#7DD3FC;--tx-morado:#C4B5FD;--tx-esm:#6EE7B7; --tx-oro:#FDE68A; --nuevo:#3B82F6; --prep:#F59E0B; --listo:#22C55E; --malo:#EF4444; /* ── Escala tipográfica. Antes había veinte tamaños sueltos (13, 13.5, 14, 14.5, 15, 15.5…) que nadie podía distinguir a simple vista pero que sí se notan juntos: la pantalla se ve desordenada sin que uno sepa por qué. Esta escala tiene ocho pasos y cada salto es visible. */ --t-micro:11px; /* etiquetas en versalita, candados */ --t-mini:12.5px; /* metadatos, contadores */ --t-chico:13.5px; /* ayuda, texto secundario */ --t-ui:15px; /* botones, navegación, cuerpo del panel */ --t-base:16px; /* cuerpo de lectura */ --t-medio:17px; /* nombre de un producto en una lista */ --t-titulo:21px; /* título de una tarjeta o de un modal */ --t-dato:27px; /* la cifra de un KPI */ --t-gigante:34px; /* el turno de la comanda, leído a metro y medio */ /* ── Escala de espacio, en pasos de 4. Las mismas distancias en todas partes es lo que hace que dos pantallas distintas se vean del mismo producto. */ --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px; /* ── Radios. Uno por tipo de objeto, no uno por antojo. */ --r-chico:10px; /* etiquetas, campos pequeños, miniaturas */ --r:12px; /* botones, campos, avisos */ --r-tarjeta:16px; /* tarjetas y columnas */ --r-hoja:20px; /* la hoja que sube desde abajo (modal) */ --r2:16px; /* alias histórico — apunta al radio de tarjeta */ /* ── Elevación. Se declara UNA vez por objeto: o borde, o sombra. Un borde de 1px debajo de una sombra ancha deja el objeto flotando y apoyado a la vez, y se lee como un error de dibujo. Regla de la casa: lo que está QUIETO lleva borde; lo que FLOTA sobre el resto (modal, aviso, carrito, menú desplegable) lleva sombra y nada de borde. */ --sombra:0 4px 16px rgba(0,0,0,.4); --sombra-alta:0 18px 44px -12px rgba(0,0,0,.66); --toque:56px; /* alto mínimo de cualquier cosa que se toque */ --fuente:'Plex var',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%} body{ font-family:var(--fuente); background:var(--fondo); color:var(--texto); font-size:var(--t-base); line-height:1.45; overscroll-behavior-y:none; /* Sobre fondo negro el texto claro se "engorda": el navegador lo dibuja con más pixeles encendidos de los que le tocan. Estas dos líneas lo devuelven al peso real, y es la diferencia entre una pantalla oscura que se lee y una que cansa a las dos horas. */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* NADA de overflow:hidden en body. Las páginas públicas (menú, estado del pedido) no usan el armazón .app y en iPhone eso impide el scroll salvo con pinch-zoom. Fue un bug real en el sistema de contratos. */ a{color:var(--acento);text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} img{max-width:100%;display:block} /* El atributo `hidden` trae `display:none` de la hoja del navegador, y CUALQUIER `display:flex` o `display:grid` propio le gana por especificidad — el elemento sigue viéndose con el atributo puesto. Ya pasó una vez en este proyecto. Esta línea lo blinda para todo el archivo. */ [hidden]{display:none!important} /* ───────── Las superficies que pone el navegador ───────── Selección, cursor de escritura, barras de desplazamiento y anillo de foco. Nadie las mira a propósito, pero son las que delatan una pantalla armada de una hecha: en una app negra, la selección azul de fábrica y una barra de scroll clara aparecen sin permiso y no pertenecen a nada de lo que hay alrededor. Cuesta doce líneas. */ ::selection{background:rgba(255,122,69,.32);color:#FFF} :root{caret-color:var(--acento)} *{scrollbar-color:var(--borde2) transparent;scrollbar-width:thin} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{ background:var(--borde2);border-radius:999px; /* el borde transparente adelgaza el pulgar sin adelgazar la zona de agarre */ border:3px solid transparent;background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{background:#4B4B58;background-clip:content-box} ::-webkit-scrollbar-corner{background:transparent} /* ANILLO DE FOCO — antes no existía en ninguna parte. Los campos traían `outline:0` y los botones nunca tuvieron nada, así que quien navega con Tab —o con un teclado colgado de la tablet, que en una cocina es lo cómodo— no tenía forma de saber dónde estaba parado. :focus-visible y no :focus: el navegador solo lo pinta cuando el foco vino del teclado. Con el dedo o el mouse no aparece, que es lo correcto — un anillo tras cada toque en la tablet sería ruido. 2px y separado del elemento, para que se vea sobre cualquier fondo del panel (WCAG 2.2 pide un perímetro de 2px y 3:1 de contraste; naranja sobre negro da 7.65:1). */ :focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:var(--r-chico); } /* Sobre un botón naranja el anillo naranja se pierde: ahí va blanco. */ .btn-pri:focus-visible,.lanza.destaca:focus-visible{outline-color:#FFF} /* Y el interruptor lleva el suyo, redondo como él */ .interruptor:focus-visible{outline:3px solid #FFF;outline-offset:6px;border-radius:50%} /* ───────── Cifras alineadas ───────── Todo lo que sea plata, turno, hora o cantidad va en cifras de ancho fijo. Sin esto una columna de precios queda con las comas bailando y un cronómetro se mueve un pixel a cada segundo — dos cosas que se ven mal sin que uno sepa señalar por qué. */ .kpi b,.cm-turno,.it-cant,.col-cabeza .cuenta,.cm-reloj,.plata, table td,table th,.prod-meta,.resumen{font-variant-numeric:tabular-nums} /* Títulos sin palabra huérfana en el último renglón */ h1,h2,h3,.inicio h1{text-wrap:balance} /* ───────── Armazón del panel ───────── */ .app{display:flex;flex-direction:column;height:100dvh;overflow:hidden} .contenido{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch} /* ───────── Cabecera ───────── Dos filas y centrada: la marca arriba, la navegación debajo. Los controles (modo y salir) van ANCLADOS a la derecha sin entrar en el flujo, para que el nombre del negocio quede ópticamente centrado y no desplazado por el ancho de lo que haya al lado. Esta barra vive doce horas abierta en la misma pantalla: vale la pena que respire. */ .topbar{ display:flex;flex-direction:column;align-items:center;flex:none; padding:16px 18px 0; background:linear-gradient(180deg,var(--sup),var(--fondo)); border-bottom:1px solid var(--borde); position:sticky;top:0;z-index:40; } .topbar::after{ /* filo de luz: separa sin pintar una línea dura */ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent,var(--acento),transparent);opacity:.28; } /* REJILLA de tres columnas, no posición absoluta. Con `1fr auto 1fr` la celda del medio queda centrada respecto al contenedor y las laterales RESERVAN su espacio: los controles no pueden montarse sobre el nombre por más que crezcan (y crecen: cuando la plataforma entra a un negocio aparece el chip de "viendo"). Con posición absoluta el nombre quedaba tapado. En pantalla angosta son dos columnas: marca a la izquierda, controles a la derecha, que es lo honesto cuando no hay sitio para centrar nada. */ .topbar-fila{ display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:center;gap:10px;width:100%;min-height:44px; } .marca{grid-column:1;min-width:0} .topbar-controles{grid-column:2;display:flex;gap:9px;align-items:center;justify-self:end} /* OJO con minmax(0,1fr) en la columna de los controles: le permite quedar más angosta que su contenido y desbordarse encima del nombre. La columna derecha lleva `min-content` como mínimo — así nunca puede encogerse por debajo de lo que mide. La izquierda sí puede llegar a cero: está vacía. Y se centra solo desde 1200: cuando la plataforma entra a un negocio aparece el chip de "viendo" y los controles crecen bastante. */ @media (min-width:1200px){ .topbar-fila{grid-template-columns:minmax(0,1fr) auto minmax(min-content,1fr)} .marca{grid-column:2;justify-self:center} .topbar-controles{grid-column:3} } .marca{display:flex;align-items:center;color:var(--texto);min-width:0} @media (min-width:1200px){ .marca{align-items:center;text-align:center} } .marca-linea{display:flex;align-items:center;gap:10px;min-width:0} /* El nombre del negocio es lo primero que tiene que decir esta pantalla. Sin el subtítulo del modo debajo, puede ocupar el alto entero de la línea. */ .marca-linea b{font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.025em; line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .marca .punto{ width:13px;height:13px;border-radius:50%;background:var(--acento);flex:none; transition:background-color .4s var(--ease-salida) var(--retraso,0ms), box-shadow .4s var(--ease-salida) var(--retraso,0ms); } /* .marca-modo ya no se usa: el modo vive en el segmentado, donde se cambia. */ .nav{display:flex;gap:4px;justify-content:center;width:100%; padding:10px 0 0;overflow-x:auto;scrollbar-width:none;min-width:0} .nav::-webkit-scrollbar{display:none} /* Cada sección: icono arriba, nombre abajo, columna centrada. El icono lleva SU medida AQUÍ, en la base — antes solo estaba dentro del media query del sidebar y en tablet los SVG quedaban sin tamaño: explotaban al intrínseco y la barra se veía como un choque de trenes (visto en iPad). */ .navlink{ display:flex;flex-direction:column;align-items:center;gap:5px; min-width:64px;padding:10px 12px 12px; border-radius:var(--r-chico) var(--r-chico) 0 0;color:var(--tenue); font-weight:600;font-size:var(--t-mini);white-space:nowrap;position:relative; transition:color .16s ease; } .nav-ico{display:grid;place-items:center;width:24px;height:24px;flex:none} .nav-ico svg{width:22px;height:22px} .navlink.on{color:var(--texto)} .navlink.on .nav-ico{color:var(--acento)} .navlink.on::after{ content:"";position:absolute;left:50%;bottom:0;width:28px;height:2.5px; transform:translateX(-50%); border-radius:2px 2px 0 0;background:var(--acento); } @media (hover:hover){ .navlink:hover{color:var(--texto)} } /* Segmentado de modo: se ve el estado actual y las alternativas a la vez. Un desplegable escondería justo lo que hay que poder cambiar de un toque. */ .modos{display:flex;gap:2px;padding:3px;border-radius:var(--r-chico);background:var(--sup2); border:1px solid var(--borde);flex:none} .modo{ border:0;background:transparent;color:var(--tenue);cursor:pointer; padding:7px 12px;border-radius:var(--r-chico);font-size:var(--t-mini);font-weight:700; transition:background-color .16s ease,color .16s ease; } .modo.on{background:var(--sup3);color:var(--texto);box-shadow:0 1px 2px rgba(0,0,0,.35)} @media (hover:hover){ .modo:not(.on):hover{color:var(--texto)} } .salir{display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:999px; color:var(--tenue);font-weight:600;font-size:var(--t-chico);flex:none} .salir .inicial{ width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--sup3);color:var(--texto);font-weight:800;font-size:var(--t-chico); box-shadow:inset 0 0 0 1px var(--borde2); } @media (hover:hover){ .salir:hover{background:var(--sup2);color:var(--texto)} } @media (max-width:1000px){ .navlink{padding:9px 8px 11px;min-width:58px} } @media (max-width:760px){ .topbar{padding:12px 12px 0} .marca-linea b{font-size:19px} .modos .modo{padding:7px 9px;font-size:var(--t-micro)} .salir-txt{display:none} .navlink{padding:8px 6px 10px;min-width:52px;font-size:var(--t-micro)} .nav-ico svg{width:20px;height:20px} /* La navegación se alinea a la izquierda para poder deslizarla cuando no cabe */ .nav{justify-content:flex-start} } /* ───────── Botones ───────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:46px;padding:0 18px;border:0;border-radius:var(--r); background:var(--sup3);color:var(--texto);font-weight:700;font-size:var(--t-ui); cursor:pointer; /* La transición completa del botón se declara una sola vez, más abajo, en la sección del interruptor: ahí necesita además los colores escalonados del encendido. Declararla dos veces era tener una que no se aplicaba nunca. */ } .btn:active{transform:scale(.97)} .btn:disabled{opacity:.45;cursor:not-allowed} .btn-pri{background:var(--acento);color:#1A0B04} .btn-listo{background:var(--listo);color:#04240F} .btn-malo{background:transparent;color:var(--malo);box-shadow:inset 0 0 0 1px currentColor} .btn-linea{background:transparent;box-shadow:inset 0 0 0 1px var(--borde2);color:var(--texto)} .btn-grande{min-height:var(--toque);font-size:var(--t-medio);border-radius:var(--r-tarjeta);padding:0 var(--e5)} /* Un botón de solo icono es cuadrado y conserva su área de toque aunque el dibujo sea chico. Los tres que hay (cancelar, quitar opción, quitar valor) llevan aria-label: sin texto visible, es lo único que un lector de pantalla tiene para saber qué hacen. */ .btn-ico{padding:0;width:46px;min-width:46px} .btn-ico svg{width:18px;height:18px} .btn-ico-sm{min-height:38px;width:38px;min-width:38px} .btn-ico-sm svg{width:15px;height:15px} .btn-ico-xs{min-height:34px;width:34px;min-width:34px} .btn-ico-xs svg{width:13px;height:13px} .btn-bloque{width:100%} @media (hover:hover){ .btn:hover{filter:brightness(1.12);transform:translateY(-1px)} } /* ───────── Tarjetas y formularios ───────── */ .tarjeta{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-tarjeta);padding:var(--e5)} .campo{margin-bottom:14px} .campo label{display:block;font-size:var(--t-chico);font-weight:700;color:var(--tenue);margin-bottom:6px; text-transform:uppercase;letter-spacing:.04em} .campo input,.campo select,.campo textarea{ width:100%;min-height:48px;padding:12px 14px;background:var(--sup2); border:1px solid var(--borde);border-radius:var(--r); } .campo textarea{min-height:88px;resize:vertical} .campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--acento)} .ayuda{font-size:var(--t-chico);color:var(--tenue2);margin-top:5px;line-height:1.4} .aviso{padding:13px 16px;border-radius:var(--r);font-size:var(--t-ui);margin-bottom:16px;line-height:1.45} .aviso-ok{background:rgba(34,197,94,.12);color:var(--tx-ok);border:1px solid rgba(34,197,94,.3)} .aviso-mal{background:rgba(239,68,68,.12);color:var(--tx-mal);border:1px solid rgba(239,68,68,.3)} .aviso-info{background:rgba(59,130,246,.12);color:var(--tx-info);border:1px solid rgba(59,130,246,.3)} .aviso-ojo{background:rgba(245,158,11,.12);color:var(--tx-ojo);border:1px solid rgba(245,158,11,.3)} .candado{ display:inline-block;font-size:var(--t-micro);font-weight:800;letter-spacing:.05em;text-transform:uppercase; padding:3px 8px;border-radius:999px;background:var(--sup3);color:var(--tenue); border:1px solid var(--borde2);vertical-align:middle;margin-left:8px; } /* ───────── ENCENDER COCINA — el botón más importante del panel ───────── */ .encender{ display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--r2); border:1px solid var(--borde);background:var(--sup);margin-bottom:16px;flex-wrap:wrap; } .encender .luz{ width:52px;height:52px;border-radius:50%;flex:none;position:relative; background:var(--sup3);box-shadow:inset 0 0 0 2px var(--borde2); } .encender.on .luz{background:var(--listo)} .encender.on .luz::after{ content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(34,197,94,.55); animation:latido 2.4s ease-out infinite; } @keyframes latido{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}} .encender .txt{flex:1;min-width:180px} .encender .txt b{display:block;font-size:var(--t-medio);letter-spacing:-.01em} .encender .txt span{color:var(--tenue);font-size:var(--t-chico)} .encender .btn{min-height:var(--toque);font-size:var(--t-base)} .btn-encender{background:var(--listo);color:#04240F} .btn-apagar{background:var(--sup3);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borde2)} /* ───────── KPIs del día ───────── */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin-bottom:16px} .kpi{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r);padding:12px 14px} .kpi b{display:block;font-size:var(--t-dato);font-weight:800;letter-spacing:-.02em;line-height:1.1} .kpi span{font-size:var(--t-mini);color:var(--tenue);text-transform:uppercase;letter-spacing:.05em;font-weight:700} /* ───────── El tablero ───────── */ .tablero{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 14px 14px;align-items:start} .columna{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r2); display:flex;flex-direction:column;min-height:200px;overflow:hidden} .col-cabeza{ display:flex;align-items:center;gap:9px;padding:12px 14px;font-weight:800;font-size:var(--t-ui); border-bottom:1px solid var(--borde);position:sticky;top:0;background:var(--sup);z-index:2; text-transform:uppercase;letter-spacing:.04em; } .col-cabeza .bolita{width:10px;height:10px;border-radius:50%;flex:none} .col-cabeza .cuenta{margin-left:auto;background:var(--sup3);border-radius:999px;padding:2px 10px; font-size:var(--t-chico);color:var(--tenue);letter-spacing:0} .col-nuevo .bolita{background:var(--nuevo)} .col-preparando .bolita{background:var(--prep)} .col-listo .bolita{background:var(--listo)} .col-lista{padding:10px;display:flex;flex-direction:column;gap:10px;min-height:120px; overflow-y:auto;max-height:calc(100dvh - 250px)} /* ───────── La comanda ───────── */ /* El filo de color de 5 px a la izquierda se mantiene A PROPÓSITO, aunque sea de los patrones que un revisor marca de entrada. Ahí no es decoración: es el ESTADO del pedido, y es el único canal que se lee a metro y medio, cuando la letra de la comanda ya no se distingue. Azul entró, ámbar se está haciendo, verde está listo. Un cocinero con las manos ocupadas ve la franja de color antes que cualquier otra cosa de la tarjeta. Lo que el patrón critica —una barrita de acento en una tarjeta cualquiera— no es esto: aquí el color ES el dato. */ .comanda{ background:var(--sup2);border:1px solid var(--borde);border-left:5px solid var(--nuevo); border-radius:var(--r);padding:12px 13px; /* touch-action lo maneja Sortable; sin esto el arrastre pelea con el scroll */ touch-action:manipulation; } .comanda.e-preparando{border-left-color:var(--prep)} .comanda.e-listo{border-left-color:var(--listo)} .cm-cabeza{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px} .cm-turno{font-size:var(--t-gigante);font-weight:800;line-height:1;letter-spacing:-.03em} .cm-quien{flex:1;min-width:0} .cm-quien b{display:block;font-size:var(--t-ui);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cm-quien span{font-size:var(--t-mini);color:var(--tenue);display:block} /* ───────── El cronómetro: un anillo que se llena ───────── Antes era una pastilla con el número de minutos. El número obliga a leerlo y a compararlo de cabeza contra el tiempo prometido; el anillo dice cuánto falta sin leer nada, que es lo único que se puede hacer desde el otro lado de la cocina. El número se queda adentro para cuando sí hace falta el dato. Registrar --vuelta como propiedad tipada es lo que permite ANIMAR un degradado cónico: sin esto el navegador no sabe interpolar un ángulo dentro de un background y el anillo daría saltos. Donde no haya soporte, salta — sigue diciendo lo mismo, solo que sin el movimiento. */ /* inherits:TRUE, y no es un detalle: el arco lo dibuja el ::before, y un pseudo-elemento hereda de su elemento como cualquier hijo. Con `false` el ::before leía el valor inicial —0deg— y el anillo salía SIEMPRE vacío, aunque el elemento tuviera 360deg puestos en su atributo style. Se veía como un círculo gris; medido en el navegador, el degradado decía `conic-gradient(rosa 0deg, gris 0deg)`. */ @property --vuelta{ syntax:''; inherits:true; initial-value:0deg } .cm-reloj{ --vuelta:0deg; position:relative;flex:none; width:46px;height:46px;border-radius:50%; display:grid;place-items:center; font-size:var(--t-chico);font-weight:800;font-variant-numeric:tabular-nums; color:var(--tx-ok); /* el arco hereda de aquí: un color, no dos */ transition:color .4s var(--ease-salida), --vuelta 1.2s linear; } /* El arco. La máscara radial le saca el centro y lo convierte en anillo; sin ella sería un queso relleno, que a esta escala se lee como una mancha. */ .cm-reloj::before{ content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; background:conic-gradient(currentColor var(--vuelta), color-mix(in srgb, currentColor 20%, transparent) 0); -webkit-mask:radial-gradient(closest-side,transparent 70%,#000 71%); mask:radial-gradient(closest-side,transparent 70%,#000 71%); } /* Un velo tenue del mismo color adentro: separa el número del fondo de la comanda sin pintarle una caja alrededor. */ .cm-reloj::after{ content:"";position:absolute;inset:5px;border-radius:50%;pointer-events:none; background:currentColor;opacity:.11; } .cm-reloj > span{position:relative;z-index:1;line-height:1} .cm-reloj.medio{color:var(--tx-ojo)} /* Pasado el tiempo prometido el anillo ya está lleno, así que la señal nueva tiene que venir por otro lado: el color y un latido lento. No sigue dando vueltas —una segunda vuelta no se distingue de la primera y confundiría. */ .cm-reloj.tarde{color:var(--tx-mal);animation:parpadeo 1.6s ease-in-out infinite} @keyframes parpadeo{50%{opacity:.6}} /* En pantalla angosta la cabecera de la comanda va apretada: el anillo baja a 40px y sigue leyéndose. */ @media (max-width:400px){ .cm-reloj{width:40px;height:40px;font-size:var(--t-mini)} } .cm-etqs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px} .etq{font-size:var(--t-micro);font-weight:800;padding:3px 9px;border-radius:999px;background:var(--sup3); color:var(--tenue);text-transform:uppercase;letter-spacing:.04em; /* Una etiqueta partida en dos líneas ("PRIMERA / VEZ") se lee como un error. Si no cabe, que baje entera. */ white-space:nowrap;display:inline-block} .etq-mesa{background:rgba(139,92,246,.18);color:var(--tx-morado)} .etq-pagado{background:rgba(34,197,94,.16);color:var(--tx-ok)} .etq-verificar{background:rgba(245,158,11,.16);color:var(--tx-ojo)} .etq-debe{background:rgba(239,68,68,.16);color:var(--tx-mal)} .cm-items{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:10px} .cm-item{display:flex;gap:9px;align-items:flex-start;padding:7px 8px;border-radius:var(--r-chico);background:var(--sup); cursor:pointer} .cm-item.hecho{opacity:.42} .cm-item.hecho .it-nom{text-decoration:line-through} .it-cant{font-weight:800;font-size:var(--t-titulo);min-width:30px;color:var(--acento);flex:none;text-align:center} .it-cuerpo{flex:1;min-width:0} .it-nom{font-size:var(--t-base);font-weight:600;line-height:1.3} .it-ops{font-size:var(--t-chico);color:var(--tx-mal);font-weight:600;margin-top:2px} /* modificadores: rojo, se leen de lejos */ .it-nota{font-size:var(--t-chico);color:var(--tx-ojo);margin-top:2px;font-style:italic} .it-check{width:22px;height:22px;border-radius:6px;border:2px solid var(--borde2);flex:none;margin-top:2px; display:grid;place-items:center;color:transparent; transition:background-color .16s var(--ease-salida),border-color .16s var(--ease-salida),color .16s var(--ease-salida)} .it-check svg{width:14px;height:14px} .cm-item.hecho .it-check{background:var(--listo);border-color:var(--listo);color:#04240F} .cm-nota{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);color:var(--tx-ojo); padding:8px 10px;border-radius:var(--r-chico);font-size:var(--t-chico);margin-bottom:9px;line-height:1.4} .cm-alergia{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.4);color:var(--tx-mal); padding:8px 10px;border-radius:var(--r-chico);font-size:var(--t-chico);font-weight:700;margin-bottom:9px} .cm-pie{display:flex;gap:8px} .cm-pie .btn{flex:1;min-height:48px;font-size:var(--t-ui)} /* Estados del arrastre */ .arrastrando{opacity:.35} .fantasma{background:var(--sup3);border:2px dashed var(--acento);border-radius:var(--r)} .elegido{box-shadow:0 12px 32px rgba(0,0,0,.55);transform:scale(1.02)} .col-lista.vacia::after{ content:"Sin pedidos";display:grid;place-items:center;height:96px;color:var(--tenue2);font-size:var(--t-chico); border:2px dashed var(--borde);border-radius:var(--r); } /* ───────── Avisos flotantes ───────── */ /* Flota por encima de todo: le toca sombra, y por eso NO lleva borde. Un borde de 1px debajo de una sombra ancha deja el aviso apoyado y flotando a la vez. La sombra alta es la que lo despega de verdad sobre fondo negro. */ .brindis{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140%); background:var(--sup3);color:var(--texto);padding:14px 20px; border-radius:var(--r-tarjeta);font-weight:700;box-shadow:var(--sombra-alta);z-index:200; max-width:min(92vw,460px); /* Sin rebote. Un aviso que dice "entró un pedido" en una cocina no es un juguete, y el sobrepaso de un elástico se lee como algo mal calibrado. La misma curva fuerte de salida que usa el resto de la app. */ transition:transform .28s var(--ease-salida);text-align:center} .brindis.ver{transform:translateX(-50%) translateY(0)} .brindis.malo{background:#3B1114;color:var(--tx-mal)} .brindis.bien{background:#0B2E1A;color:var(--tx-ok)} /* ───────── Modal ───────── */ /* La apertura del diálogo: el fondo se funde a oscuro y la hoja sube. Transiciones (no keyframes): abrir-cerrar-abrir seguido siempre parte de donde va. El velo vive en el DOM con visibility — display:none no anima. */ .velo{position:fixed;inset:0;background:rgba(4,4,6,.78); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:150; display:flex;align-items:flex-end;justify-content:center; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .26s var(--ease-salida), visibility 0s linear .26s; } .velo.ver{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s} .velo .modal{ transform:translateY(34px) scale(.97);opacity:0; transition:transform .32s var(--ease-salida), opacity .26s var(--ease-salida); } .velo.ver .modal{transform:none;opacity:1} .modal{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-hoja) var(--r-hoja) 0 0;width:min(560px,100%); max-height:92dvh;overflow-y:auto;padding:20px; /* Solo scroll vertical: cualquier hijo que se pase de ancho (una palabra larga, una imagen, un flex sin min-width) creaba una barra horizontal dentro de la ventana, y una ventana que se mueve para los lados se siente rota. Lo que no quepa, se envuelve o se recorta. */ overflow-x:hidden;overflow-wrap:break-word} } @media (min-width:640px){ .velo{align-items:center} .modal{border-radius:var(--r-hoja)} } .modal h3{font-size:var(--t-titulo);margin-bottom:4px;letter-spacing:-.02em} /* ───────── Responsivo ───────── */ /* ── El tablero en celular: TRES PÁGINAS QUE SE DESLIZAN ── Apiladas en vertical había que hacer scroll infinito para llegar a "Listo". Ahora Nuevo / En preparación / Listo son páginas lado a lado: se pasa con el pulgar como entre pantallas de una app, y cada columna conserva su propio scroll vertical. El 88% de ancho deja asomar la siguiente columna — es la señal silenciosa de que hay más a la derecha. */ @media (max-width:860px){ .tablero{ display:flex;gap:10px;padding:0 10px 90px; overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; } .tablero::-webkit-scrollbar{display:none} .tablero .columna{ flex:0 0 88%;scroll-snap-align:center; max-height:calc(100dvh - 210px); } .col-lista{max-height:calc(100dvh - 270px)} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} } /* ========================================================================= EL INTERRUPTOR — encender y apagar el restaurante. Se acciona una o dos veces por turno, así que es el único sitio de la app donde un momento teatral está justificado: el resto (dar LISTO, mover una comanda) pasa cientos de veces al día y solo lleva respuesta instantánea. Lo que comunica es ESTADO: desde la puerta de la cocina, a tres metros, hay que saber si se están recibiendo pedidos. ========================================================================= */ :root{ --ease-salida:cubic-bezier(0.23, 1, 0.32, 1); --ease-vaiven:cubic-bezier(0.77, 0, 0.175, 1); --gris-muerto:#4A4A54; } /* --- Encendido y apagado, ELEMENTO POR ELEMENTO --- Cada elemento se enciende CUANDO LE LLEGA la energía, no todos a la vez. El escalonado lo hace el CSS, no temporizadores de JavaScript: cada elemento lleva su propio --retraso inline y el body cambia UNA sola clase. Así el navegador reparte las transiciones fuera del hilo principal. Con setTimeout no funcionaba de verdad: basta que la pestaña pase a segundo plano —o que el hilo se ocupe un instante— para que Chrome agrupe todos los temporizadores y la pantalla se encienda de golpe. Las dos paletas viven una sola vez, en --c-* (viva) y --o-* (apagada). --luz vale 1 o 0 y multiplica la opacidad de los brillos, para no repetir cada regla de neón dos veces. */ :root{ --c-acento:#FF7A45; --c-nuevo:#3B82F6; --c-prep:#F59E0B; --c-listo:#22C55E; --c-texto:#F5F5F7; --c-tenue:#9A9AA4; --o-acento:#6E6E78; --o-nuevo:#5A5A64; --o-prep:#6B6459; --o-listo:#586258; --o-texto:#C8C8CE; --o-tenue:#7E7E88; --luz:1; } body.apagado{ --acento:var(--o-acento); --nuevo:var(--o-nuevo); --prep:var(--o-prep); --listo:var(--o-listo); --texto:var(--o-texto); --tenue:var(--o-tenue); --luz:0; } /* Se nombran las propiedades — nada de transition:all. El retraso es el de cada elemento; sin --retraso definido vale 0 y el cambio es inmediato. */ .comanda,.kpi,.col-cabeza,.columna,.etq,.cm-turno,.cm-reloj,.it-cant,.navlink,.encender, .marca,.marca .punto,.col-cabeza .bolita,.encender .luz,.btn{ transition:background-color .4s var(--ease-salida) var(--retraso,0ms), border-color .4s var(--ease-salida) var(--retraso,0ms), color .4s var(--ease-salida) var(--retraso,0ms), box-shadow .4s var(--ease-salida) var(--retraso,0ms), text-shadow .4s var(--ease-salida) var(--retraso,0ms), filter .4s var(--ease-salida) var(--retraso,0ms); } .btn{transition:transform .14s var(--ease-salida), background-color .4s var(--ease-salida) var(--retraso,0ms), color .4s var(--ease-salida) var(--retraso,0ms), box-shadow .4s var(--ease-salida) var(--retraso,0ms), filter .4s var(--ease-salida) var(--retraso,0ms)} /* Apagado NO es deshabilitado: si cerraron con pedidos en curso, la cocina tiene que poder seguir sacándolos. Se ven apagados, funcionan igual. */ .btn-listo,.btn-pri{filter:saturate(calc(.15 + .85 * var(--luz)))} .cm-reloj{filter:saturate(calc(.2 + .8 * var(--luz)))} /* apagado: el anillo se desatura con el resto */ /* --- El botón --- VERDE en reposo: es la única acción pendiente en toda la pantalla, y el verde dice "presióname". ROJO cuando está en marcha: es la señal de que hay algo corriendo y de que tocarlo lo detiene. El paso de un color al otro se anima, porque es el momento en el que el usuario está mirando el botón. */ .interruptor{ position:fixed;right:20px;bottom:20px;z-index:120; width:132px;height:150px;border:0;background:0;padding:0;cursor:pointer; display:grid;place-items:center; -webkit-tap-highlight-color:transparent;touch-action:manipulation; } .itr-cuerpo{position:relative;width:124px;height:124px;display:grid;place-items:center} /* Base metálica: el cónico da el cepillado sin una sola imagen */ .itr-base{ position:absolute;inset:0;border-radius:50%; background:#8A8A92; background:conic-gradient(from 210deg,#6E6E78,#D8D8E0 12%,#9A9AA6 26%,#5C5C66 42%, #C6C6D0 58%,#7E7E8A 74%,#E2E2EA 88%,#6E6E78); box-shadow:0 10px 22px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.14) inset, 0 -10px 18px rgba(0,0,0,.5) inset; transition:box-shadow .3s var(--ease-salida); } .itr-base::after{ /* hueco interior donde se hunde la cúpula */ content:"";position:absolute;inset:11px;border-radius:50%; background:radial-gradient(circle at 50% 30%,#2A2A31,#101014); box-shadow:0 6px 12px rgba(0,0,0,.75) inset; } /* La cúpula vive en ROJO y lleva encima una capa VERDE que se desvanece al encender. Se hace con dos capas y no cambiando el degradado: un degradado no interpola de forma fiable entre navegadores y se vería un salto justo en el momento que más se está mirando. */ .itr-domo{ position:relative;width:96px;height:96px;border-radius:50%; background:radial-gradient(circle at 34% 26%,#FF7A6E 0%,#F0392B 34%,#B81609 68%,#6E0A04 100%); transform:translateY(-3px); transition:transform .16s var(--ease-salida), box-shadow .55s var(--ease-salida); } .itr-domo::before{ content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 34% 26%,#8CF5B4 0%,#25C167 34%,#0D8C43 68%,#04461F 100%); opacity:0;transition:opacity .55s var(--ease-salida); } /* Los signos van grabados en la cúpula: blanco translúcido con una sombra oscura debajo, que es lo que hace que se vean hundidos en el plástico y no pegados encima. */ .itr-signo{ position:absolute;left:50%;top:50%;width:46%;height:46%; transform:translate(-50%,-50%);z-index:1;pointer-events:none; fill:none;stroke:rgba(255,255,255,.9);stroke-width:2.1; stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.45)); transition:opacity .55s var(--ease-salida); } .itr-signo-on{opacity:0} .interruptor[data-on="1"] .itr-signo-off{opacity:0} .interruptor[data-on="1"] .itr-signo-on{opacity:1} .itr-brillo{ /* reflejo especular: es lo que lo vuelve un objeto y no un círculo */ position:absolute;left:16%;top:9%;width:52%;height:34%;border-radius:50%;z-index:2; background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.06)); filter:blur(1px);pointer-events:none; } .itr-anillo{ position:absolute;inset:6px;border-radius:50%;pointer-events:none; box-shadow:0 0 0 2px rgba(255,255,255,.05) inset; transition:box-shadow .55s var(--ease-salida), color .55s var(--ease-salida); } .itr-halo{ position:absolute;inset:-14px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(255,70,45,.45),transparent 68%); opacity:0;transition:opacity .5s var(--ease-salida); } .itr-eti{ margin-top:6px;font-size:var(--t-micro);font-weight:800;letter-spacing:.14em; text-transform:uppercase;transition:color .45s var(--ease-salida); } /* APAGADO — verde, respirando lento. 3,5 s se lee como "en espera"; más rápido se leería como alarma, y un botón que vibra sin parar parece un defecto. */ .interruptor[data-on="0"] .itr-domo::before{opacity:1} .interruptor[data-on="0"] .itr-domo{ box-shadow:0 8px 14px rgba(0,0,0,.55), 0 -6px 12px rgba(0,0,0,.35) inset, 0 4px 10px rgba(150,255,190,.35) inset, 0 0 24px rgba(34,197,94,.45); animation:itr-espera 3.5s ease-in-out infinite; } @keyframes itr-espera{ 50%{box-shadow:0 8px 14px rgba(0,0,0,.55), 0 -6px 12px rgba(0,0,0,.35) inset, 0 4px 10px rgba(150,255,190,.35) inset, 0 0 40px rgba(34,197,94,.8)} } .interruptor[data-on="0"] .itr-eti{color:#7DE0A4} .interruptor[data-on="0"] .itr-anillo{ color:#22C55E; box-shadow:0 0 0 2px rgba(34,197,94,.5) inset, 0 0 12px rgba(34,197,94,.3) inset; } /* ENCENDIDO — rojo, con halo que respira */ .interruptor[data-on="1"] .itr-domo{ box-shadow:0 8px 14px rgba(0,0,0,.55), 0 -6px 12px rgba(0,0,0,.3) inset, 0 4px 10px rgba(255,160,140,.45) inset, 0 0 28px rgba(255,60,40,.55); } .interruptor[data-on="1"] .itr-halo{opacity:1;animation:itr-respira 2.6s ease-in-out infinite} .interruptor[data-on="1"] .itr-eti{color:#FF8A72} .interruptor[data-on="1"] .itr-anillo{ color:#FF5A42; box-shadow:0 0 0 2px rgba(255,90,66,.75) inset, 0 0 14px rgba(255,90,66,.5) inset, 0 0 18px rgba(255,70,45,.4); } @keyframes itr-respira{50%{opacity:.42;transform:scale(1.06)}} /* El instante del cambio: el anillo suelta un pulso hacia afuera */ .interruptor.cambiando .itr-anillo::after{ content:"";position:absolute;inset:-6px;border-radius:50%; border:2px solid currentColor; animation:itr-pulso 620ms var(--ease-salida) forwards; } @keyframes itr-pulso{ from{transform:scale(.9);opacity:.85} to{transform:scale(1.7);opacity:0} } /* Pulsar: la cúpula se hunde en su hueco. 120ms — es respuesta, no espectáculo. */ .interruptor:active .itr-domo{transform:translateY(4px) scale(.985)} .interruptor:active .itr-base{box-shadow:0 5px 12px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.1) inset} .interruptor:disabled{cursor:wait} @media (hover:hover) and (pointer:fine){ .interruptor:hover .itr-domo{transform:translateY(-5px)} } .interruptor.negado{animation:itr-niega .4s var(--ease-vaiven)} @keyframes itr-niega{ 20%{transform:translateX(-7px)} 45%{transform:translateX(6px)} 70%{transform:translateX(-3px)} 100%{transform:translateX(0)} } /* --- El recorrido de la corriente --- La corriente viaja por el BORDE de cada elemento: ahí es donde hay conductor. No hay trazas cruzando el fondo negro ni puntos sueltos flotando. */ #circuitos{position:fixed;inset:0;z-index:110;pointer-events:none;opacity:0} #circuitos.corre{opacity:1} #circuitos path{ fill:none;stroke-width:2.5;stroke-linecap:round; filter:drop-shadow(0 0 5px currentColor); opacity:0; } #circuitos path{color:inherit} /* linear: es corriente recorriendo un borde, y no acelera al doblar la esquina. La duración la pone el JS según el perímetro de cada elemento, para que el pulso viaje siempre a la misma velocidad. */ #circuitos.corre path{animation-timing-function:linear;animation-fill-mode:backwards} #circuitos.enciende path{animation-name:recorre} #circuitos.apaga path{animation-name:recorre;animation-direction:reverse} @keyframes recorre{ from{stroke-dashoffset:var(--per);opacity:0} 8%{opacity:1} 88%{opacity:1} to{stroke-dashoffset:calc(var(--pulso) * -1);opacity:0} } /* El cable que sale del botón: más grueso, es la alimentación */ #circuitos .guia{stroke-width:3.5;filter:drop-shadow(0 0 9px currentColor)} /* Los saltos entre elementos pegados: la soldadura de una tarjeta a la siguiente */ #circuitos .salto{stroke-width:3;animation:chispea 260ms linear backwards} @keyframes chispea{ from{opacity:0} 40%{opacity:1} to{opacity:0} } /* El chispazo del elemento cuando la corriente termina de recorrerlo. Va en un pseudo-elemento aparte para no pelearse con el brillo de neón del propio elemento: si los dos escribieran box-shadow, al terminar la animación el brillo daría un salto. Y en SU color, no en verde. */ .comanda,.kpi,.col-cabeza,.encender,.marca,.navlink{position:relative} .energizado::after{ content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none; box-shadow:0 0 26px 2px var(--chispa,#34D399), 0 0 58px -10px var(--chispa,#34D399); animation:chispazo 620ms var(--ease-salida) var(--retraso,0ms) backwards; } @keyframes chispazo{ from{opacity:0} 26%{opacity:1} to{opacity:0} } /* --- Neón --- Cada elemento alumbra en SU color de estado, no todos en verde: así el brillo, además de bonito, sigue diciendo en qué va cada comanda. La intensidad se multiplica por --luz, que vale 1 o 0 según si a ESE elemento ya le llegó la corriente. Los radios de desenfoque se mantienen chicos porque esto vive en una lista que hace scroll. */ .col-nuevo .bolita{box-shadow:0 0 10px 1px rgb(59 130 246 / var(--luz)),0 0 22px rgb(59 130 246 / calc(.5 * var(--luz)))} .col-preparando .bolita{box-shadow:0 0 10px 1px rgb(245 158 11 / var(--luz)),0 0 22px rgb(245 158 11 / calc(.5 * var(--luz)))} .col-listo .bolita{box-shadow:0 0 10px 1px rgb(34 197 94 / var(--luz)),0 0 22px rgb(34 197 94 / calc(.5 * var(--luz)))} .comanda{box-shadow:-3px 0 12px -2px rgb(59 130 246 / calc(.55 * var(--luz)))} .comanda.e-preparando{box-shadow:-3px 0 12px -2px rgb(245 158 11 / calc(.55 * var(--luz)))} .comanda.e-listo{box-shadow:-3px 0 12px -2px rgb(34 197 94 / calc(.55 * var(--luz)))} .cm-turno{text-shadow:0 0 14px rgb(255 255 255 / calc(.45 * var(--luz)))} .kpi b{text-shadow:0 0 16px rgb(255 122 69 / calc(.55 * var(--luz)))} .btn-listo{box-shadow:0 0 16px rgb(34 197 94 / calc(.5 * var(--luz)))} .cm-alergia{box-shadow:0 0 14px rgb(239 68 68 / calc(.4 * var(--luz)))} .encender .luz{box-shadow:0 0 0 4px rgb(34 197 94 / calc(.18 * var(--luz))),0 0 24px rgb(34 197 94 / calc(.5 * var(--luz)))} .marca .punto{box-shadow:0 0 10px rgb(255 122 69 / calc(.8 * var(--luz)))} /* Deja el tablero respirar: sin esto la última comanda queda bajo el botón */ .tablero .columna:last-child .col-lista{padding-bottom:150px} @media (max-width:520px){ .interruptor{width:112px;height:128px;right:14px;bottom:14px} .itr-cuerpo{width:104px;height:104px} .itr-domo{width:80px;height:80px} } /* Movimiento reducido: se conserva la INFORMACIÓN —el cambio de color, el verde/rojo, el estado— y se quita el desplazamiento. Sin animaciones no es lo mismo que sin aviso: quien pidió menos movimiento igual necesita saber si la cocina está encendida. */ @media (prefers-reduced-motion:reduce){ .interruptor[data-on="0"] .itr-domo{animation:none} .interruptor[data-on="1"] .itr-halo{animation:none} .interruptor.cambiando .itr-anillo::after{animation:none;opacity:0} .interruptor.negado{animation:none;outline:2px solid var(--malo)} #circuitos.corre path{animation:none;opacity:0} #circuitos{transition:opacity .2s ease} .energizado::after{animation:none;opacity:0} } /* ───────── Selector de plantillas (Ajustes) ───────── Cada opción muestra una miniatura con los colores y la forma REALES de la plantilla. Elegir "Trattoria" de una lista de nombres es adivinar; verla es decidir. */ .plantillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .pl-opcion{ display:block;cursor:pointer;padding:10px;border-radius:var(--r-tarjeta); border:2px solid var(--borde);background:var(--sup2); transition:border-color .15s ease,transform .08s var(--ease-salida); } .pl-opcion:active{transform:scale(.985)} .pl-opcion.on{border-color:var(--acento)} .pl-opcion input{position:absolute;opacity:0;pointer-events:none} .pl-opcion b{display:block;font-size:var(--t-ui);margin-top:9px} .pl-para{display:block;font-size:var(--t-micro);color:var(--tenue2);line-height:1.35;margin-top:2px} .pl-muestra{ display:block;position:relative;height:104px;border-radius:var(--r-chico);overflow:hidden; border:1px solid;padding:8px; } .pl-barra{display:block;height:5px;width:44%;border-radius:999px;margin-bottom:8px} .pl-card{display:block;border:1px solid;padding:8px;height:70px} .pl-linea{display:block;height:5px;width:70%;border-radius:999px;opacity:.85} .pl-linea.corta{width:46%;margin-top:5px;opacity:.6} .pl-precio{display:block;font-size:var(--t-micro);font-weight:800;margin-top:9px} /* Sellos de cliente en la comanda: de un vistazo, si es la primera vez o si es de la casa. Los colores no compiten con los del estado del pedido. */ .etq-nuevo{background:rgba(56,189,248,.16);color:var(--tx-cielo)} .etq-vuelve{background:rgba(167,139,250,.16);color:var(--tx-morado)} .etq-fiel{background:rgba(52,211,153,.16);color:var(--tx-esm)} .etq-oro{background:linear-gradient(135deg,rgba(250,204,21,.22),rgba(217,119,6,.22));color:var(--tx-oro); box-shadow:inset 0 0 0 1px rgba(250,204,21,.35)} /* ═══════════ DISPOSICIÓN DEL PANEL ═══════════ Las pantallas de administración estaban en una sola columna angosta: en un computador quedaba media pantalla vacía y todo obligaba a bajar. Estos contenedores reparten en columnas según el ancho REAL del dispositivo. Tres cortes, pensados en aparatos y no en números redondos: · hasta 700px — celular: una columna, siempre. · 700–999px — iPad de pie (768) y portátiles chicos: dos columnas en listas. · desde 1000px — iPad acostado (1024) y escritorio: dos columnas en todo. · desde 1500px — pantallas grandes: tres columnas donde tiene sentido. */ .ancho{max-width:1280px;margin:0 auto;padding:18px 16px 48px} .ancho-medio{max-width:960px;margin:0 auto;padding:18px 16px 48px} .ancho-angosto{max-width:720px;margin:0 auto;padding:18px 16px 48px} .cols{display:grid;gap:14px;align-items:start} @media (min-width:700px){ .cols-2{grid-template-columns:repeat(2,1fr)} } /* 1000 y no 1100: un iPad acostado mide EXACTAMENTE 1024px. Con el corte en 1100 se quedaba en una sola columna, que es justo lo que había que evitar. */ @media (min-width:1000px){ .cols-2-tarde{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} } @media (min-width:1400px){ .cols-3-ancho{grid-template-columns:repeat(3,1fr)} } /* Mampostería para bloques independientes de alto distinto (Ajustes). break-inside:avoid es imprescindible: sin él un formulario se parte por la mitad entre dos columnas y queda ilegible. */ .mamposteria{columns:1;column-gap:16px} .mamposteria > *{break-inside:avoid;-webkit-column-break-inside:avoid; page-break-inside:avoid;margin-bottom:16px;display:block;width:100%} @media (min-width:1000px){ .mamposteria{columns:2} } /* iPad acostado = 1024 */ @media (min-width:1500px){ .mamposteria{columns:3} } /* Las tarjetas de una rejilla entran escalonadas: 45 ms entre una y otra — el ojo recorre la pantalla en el orden en que se pinta. Solo las primeras ocho: de ahí en adelante ya nadie está mirando la entrada. */ .cols > .tarjeta{animation:lanza-entra .32s var(--ease-salida) backwards} .cols > .tarjeta:nth-child(2){animation-delay:45ms} .cols > .tarjeta:nth-child(3){animation-delay:90ms} .cols > .tarjeta:nth-child(4){animation-delay:135ms} .cols > .tarjeta:nth-child(5){animation-delay:180ms} .cols > .tarjeta:nth-child(6){animation-delay:225ms} .cols > .tarjeta:nth-child(7){animation-delay:270ms} .cols > .tarjeta:nth-child(8){animation-delay:315ms} @media (prefers-reduced-motion:reduce){ .cols > .tarjeta{animation:none} } /* Un bloque que debe ocupar todo el ancho aunque esté en una rejilla */ .completo{grid-column:1 / -1} /* En pantallas anchas los formularios de una tarjeta también se reparten */ @media (min-width:700px){ .campos-2{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px} .campos-2 .completo{grid-column:1 / -1} } /* ───────── Horario semanal ───────── Cada franja es un bloque indivisible: al angostarse la columna, la segunda baja entera en vez de partirse en campos sueltos que no se sabe a qué hora pertenecen. */ .fila-dia{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap; padding:11px 0;border-top:1px solid var(--borde)} .dia-nombre{display:flex;gap:9px;align-items:center;min-width:112px;cursor:pointer;padding-top:8px} .dia-nombre input{width:21px;height:21px;accent-color:var(--acento);flex:none} .dia-nombre b{font-size:var(--t-ui)} .franjas{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0} .franja{display:flex;gap:7px;align-items:center;flex:none} .franja span{color:var(--tenue2);font-size:var(--t-chico)} .franja input[type=time]{ min-height:42px;padding:6px 9px;background:var(--sup2); border:1px solid var(--borde);border-radius:var(--r-chico);color:var(--texto); } .franja input[type=time]:focus{border-color:var(--acento)} /* La segunda franja se ve más tenue mientras esté vacía: comunica que es opcional */ .franja:last-child input[type=time]:placeholder-shown, .franja:last-child input[type=time]:not(:focus):invalid{opacity:.55} /* ═══════════ PANTALLA DE INICIO ═══════════ Tarjetas grandes, una por cosa que la persona puede hacer. Cada una trae un dato vivo: un menú de opciones sin información obliga a entrar a cada sitio para saber si hay algo pendiente. */ .inicio{min-height:calc(100dvh - 118px);display:grid;place-items:center;padding:32px 18px 60px} .inicio-caja{width:100%;max-width:940px;text-align:center} .inicio h1{font-size:clamp(25px,4.4vw,34px);font-weight:800;letter-spacing:-.03em;margin-bottom:7px} .inicio-sub{color:var(--tenue);font-size:var(--t-base);margin-bottom:34px} .lanzador{display:grid;gap:14px;grid-template-columns:1fr} @media (min-width:560px){ .lanzador{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .lanzador{grid-template-columns:repeat(3,1fr)} } @media (min-width:1400px){ .lanzador{grid-template-columns:repeat(4,1fr)} } .lanza{ display:flex;flex-direction:column;align-items:center;gap:5px; padding:26px 18px 22px;border-radius:var(--r-tarjeta); background:var(--sup);border:1px solid var(--borde);color:var(--texto); min-height:158px;justify-content:center;text-align:center; transition:transform .09s var(--ease-salida),border-color .18s ease,background-color .18s ease; } .lanza:active{transform:scale(.98)} @media (hover:hover) and (pointer:fine){ .lanza:hover{border-color:var(--borde2);background:var(--sup2)} } .lanza-ico{ width:52px;height:52px;border-radius:var(--r-tarjeta);display:grid;place-items:center;margin-bottom:9px; background:var(--sup2);color:var(--tenue); transition:background-color .18s ease,color .18s ease; } .lanza-ico svg{width:26px;height:26px} .lanza b{font-size:var(--t-base);font-weight:700;letter-spacing:-.01em} .lanza-det{font-size:var(--t-chico);color:var(--tenue);line-height:1.4;max-width:22ch} /* La destacada es la que tiene algo pendiente AHORA: pedidos esperando, comprobantes por revisar, la carta sin productos. No es una decoración fija, cambia según lo que esté pasando. */ .lanza.destaca{ background:linear-gradient(160deg,var(--acento),var(--acento-osc,var(--acento))); border-color:transparent;color:#1A0B04; } .lanza.destaca .lanza-ico{background:rgba(0,0,0,.14);color:inherit} .lanza.destaca .lanza-det{color:rgba(26,11,4,.72)} body.apagado .lanza.destaca{filter:saturate(.25)} /* ═══════════ LA CARTA (administración) ═══════════ Antes eran dos formularios distintos peleando por el mismo renglón: al angostarse la columna los botones se montaban uno encima del otro. Ahora es un solo formulario y cada zona tiene su sitio reservado. */ .menu-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px} .menu-cuenta{color:var(--tenue);font-size:var(--t-chico);margin-left:auto} .cat{padding:0;overflow:hidden} .cat-cabeza{ display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap; padding:15px 16px;border-bottom:1px solid var(--borde);background:var(--sup2); } .cat-titulo{flex:1;min-width:150px} .cat-nombre{ width:100%;background:transparent;border:0;padding:2px 0; font-size:var(--t-medio);font-weight:700;letter-spacing:-.015em;color:var(--texto); border-bottom:1px solid transparent;transition:border-color .15s ease; } .cat-nombre:hover{border-bottom-color:var(--borde2)} .cat-nombre:focus{border-bottom-color:var(--acento)} /* Con el mouse basta el subrayado; con el teclado hace falta el anillo, porque un subrayado naranja sobre un campo transparente no dice "estoy aquí". */ .cat-nombre:focus:not(:focus-visible){outline:0} .cat-meta{display:block;font-size:var(--t-mini);color:var(--tenue);margin-top:3px} /* Ancho reservado: los dos botones caben siempre, y si no, bajan JUNTOS a la línea de abajo en vez de encimarse. */ .cat-acciones{display:flex;gap:7px;flex:none} .cat-btn{min-height:38px;padding:0 13px;font-size:var(--t-chico)} .cat-vacia{padding:16px;color:var(--tenue);font-size:var(--t-chico);margin:0} .prod-lista{list-style:none;margin:0;padding:0} .prod-fila{ display:flex;gap:12px;align-items:center;flex-wrap:wrap; padding:11px 16px;border-top:1px solid var(--borde); } .prod-fila:first-child{border-top:0} .prod-mini{ width:46px;height:46px;border-radius:var(--r-chico);object-fit:cover;flex:none;background:var(--sup2); } .prod-mini.vacia{display:grid;place-items:center;color:var(--tenue2); box-shadow:inset 0 0 0 1px var(--borde)} .prod-mini.vacia svg{width:22px;height:22px} .prod-datos{flex:1;min-width:110px} .prod-datos b{display:block;font-size:var(--t-ui);font-weight:600;line-height:1.3} .prod-meta{display:block;font-size:var(--t-mini);color:var(--tenue);margin-top:2px} .prod-acciones{display:flex;gap:7px;flex:none;margin-left:auto} .prod-btn{min-height:38px;padding:0 12px;font-size:var(--t-chico);white-space:nowrap} /* Agotado y oculto se ven desde la lista, sin tener que entrar a cada producto */ .prod-fila.agotado .prod-datos b{text-decoration:line-through} .prod-fila.agotado .prod-mini,.prod-fila.agotado .prod-datos{opacity:.55} .prod-fila.oculto{opacity:.6} .cat-nueva{margin-top:6px} /* En columna angosta las acciones bajan completas debajo del producto */ @media (max-width:460px){ .prod-acciones{margin-left:0;width:100%;padding-left:58px} .cat-acciones{width:100%} .cat-btn{flex:1} } /* ───────── Editor de producto ───────── En una sola columna los campos quedaban de más de mil píxeles de ancho: incómodo de leer y de llenar. La foto va al lado de los datos, no al final. */ .prod-editor{display:grid;gap:14px;align-items:start} @media (min-width:1000px){ .prod-editor{grid-template-columns:1.35fr 1fr} } .prod-foto-caja{position:sticky;top:78px} .prod-foto-vista{ width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-tarjeta); background:var(--sup2);margin-bottom:12px;display:block; } /* El hueco de la foto pendiente. Antes era un emoji al 35% de opacidad; ahora es un plato dibujado y una frase que dice qué falta — un hueco que además explica es una instrucción, un hueco mudo es solo un hueco. */ .prod-foto-vista.vacia{ display:grid;place-items:center;gap:var(--e2);align-content:center; color:var(--tenue2);border:1px dashed var(--borde2); font-size:var(--t-chico);text-align:center;padding:var(--e4); } .prod-foto-vista.vacia svg{width:56px;height:56px;opacity:.8} .prod-foto-caja input[type=file]{ width:100%;padding:11px;background:var(--sup2);border:1px solid var(--borde); border-radius:var(--r);font-size:var(--t-chico); } @media (max-width:999px){ .prod-foto-caja{position:static} } /* Chip de "estás dentro del negocio X". Para la plataforma es imprescindible: sin él se confunde el panel de un cliente con el propio. */ .mirando button{ display:flex;align-items:center;gap:7px;max-width:230px; background:rgba(255,122,69,.14);border:1px solid rgba(255,122,69,.42); color:var(--acento);border-radius:999px;padding:7px 13px; font-size:var(--t-mini);font-weight:700;cursor:pointer;white-space:nowrap; overflow:hidden;text-overflow:ellipsis; } .mirando button span{color:var(--tenue);font-weight:600} .mirando button b{font-size:var(--t-ui);line-height:1} @media (hover:hover){ .mirando button:hover{background:rgba(255,122,69,.22)} } @media (max-width:760px){ .mirando button{max-width:130px}; .mirando button span{display:none} } /* ───────── La entrada de la primera pantalla ───────── Las tarjetas no aparecen todas de golpe: entran de izquierda a derecha con 45 ms entre una y la siguiente. Sirve para algo concreto — el ojo recorre el menú en el mismo orden en que se dibuja, en vez de tener que barrer una cuadrícula ya completa buscando dónde empezar. Se permite justamente porque esta pantalla se ve una o dos veces por turno, al entrar. Lo que se toca cientos de veces al día —dar LISTO, mover una comanda— no lleva ni un milisegundo de animación. Animación de CSS y no de JavaScript: corre fuera del hilo principal, así que no se entrecorta mientras la página termina de cargar el resto. El retraso lo pone el PHP en cada tarjeta con --retraso, el mismo mecanismo que usa el encendido de la cocina. */ @keyframes lanza-entra{ from{opacity:0;transform:translateY(10px) scale(.985)} to{opacity:1;transform:none} } .lanza{animation:lanza-entra .34s var(--ease-salida) var(--retraso,0ms) backwards} /* El título entra primero, sin desplazamiento: es el ancla de la pantalla y moverlo haría que el texto se leyera dos veces. */ @keyframes lanza-titulo{from{opacity:0}to{opacity:1}} .inicio h1,.inicio-sub{animation:lanza-titulo .3s var(--ease-salida) backwards} .inicio-sub{animation-delay:60ms} /* ═══════════ CANCELACIONES Y DEVOLUCIONES ═══════════ Una cancelación con plata adentro es una deuda del negocio con una persona. Se ve en rojo y arriba de todo, y no se va de la pantalla hasta que alguien la salda — a diferencia del resto de la caja, esto no se puede posponer. */ .caja-titulo{ font-size:var(--t-medio);margin:var(--e6) 0 var(--e3); display:flex;align-items:center;gap:var(--e2);color:var(--malo); } .caja-cuenta{ font-size:var(--t-mini);font-weight:800;background:rgba(239,68,68,.16); color:var(--tx-mal);border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums; } /* El borde rojo lo dice sin gritar. Con un fondo rojo entero, la tarjeta competiría con el botón de devolver que lleva adentro. */ .tarjeta-alerta{ border-color:rgba(239,68,68,.42); background:linear-gradient(180deg,rgba(239,68,68,.07),transparent 62%),var(--sup); } .dev-fila{display:flex;gap:var(--e3);align-items:flex-start;flex-wrap:wrap} .dev-turno{font-size:var(--t-dato);font-weight:800;min-width:52px; font-variant-numeric:tabular-nums;letter-spacing:-.02em} .dev-quien{flex:1;min-width:140px} .dev-quien b{display:block;font-size:var(--t-ui)} .dev-quien span{display:block;font-size:var(--t-chico);color:var(--tenue)} .dev-motivo{color:var(--tenue2)!important;margin-top:2px} .dev-plata{font-size:var(--t-titulo);font-weight:800;color:var(--tx-mal); font-variant-numeric:tabular-nums;margin-left:auto} .dev-acciones{display:flex;gap:var(--e2);margin-top:var(--e3);flex-wrap:wrap} .dev-acciones .btn{flex:1;min-width:132px} /* La nota de por qué se canceló, debajo del pedido ya cancelado */ .cancel-nota{ display:flex;gap:var(--e3);align-items:center;flex-wrap:wrap; margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--borde); font-size:var(--t-chico);color:var(--tenue); } .cancel-nota span{flex:1;min-width:120px} /* Los motivos: casillas grandes, no un desplegable. Un desplegable esconde las opciones justo cuando hay que escoger una, y en una tablet obliga a dos toques. Aquí se ven las cinco y se toca una. */ .motivos{display:grid;gap:var(--e2)} .motivo-op{ display:flex;align-items:center;gap:var(--e3);cursor:pointer; padding:var(--e3) var(--e4);border-radius:var(--r); background:var(--sup2);border:1px solid var(--borde); min-height:52px; transition:border-color .16s ease,background-color .16s ease; } .motivo-op input{width:21px;height:21px;accent-color:var(--acento);flex:none} .motivo-op span{font-size:var(--t-ui);font-weight:600} .motivo-op:has(input:checked){border-color:var(--acento);background:rgba(255,122,69,.1)} @media (hover:hover){ .motivo-op:hover{border-color:var(--borde2)} } /* ═══════════ EL INTERRUPTOR SE APARTA CUANDO YA CUMPLIÓ ═══════════ Medido en pantalla: apagado o encendido, el botón ocupa 132×150 px fijos en la esquina y TAPABA el botón de WhatsApp de la primera comanda de "Listo", más dos comandas enteras. Avisarle al cliente que su pedido está listo es la razón de ser de esta aplicación; tener eso debajo de un botón es inaceptable. El arreglo no es encoger el botón siempre —el usuario lo pidió grande y con razón—, es que su tamaño siga a su importancia: · APAGADO → es lo ÚNICO que importa en la pantalla. No hay pedidos que ver ni nada que tapar, porque no se está recibiendo nada. Tamaño completo. · ENCENDIDO → ya cumplió. La pantalla ahora es de las comandas, y él se retira a una ficha de 84 px: sigue rojo, sigue vivo, sigue en su esquina y sigue siendo un toque. Solo deja de estorbar. Al pasar el mouse o al recibir el foco vuelve a su tamaño, para que no haya que apuntarle a algo chiquito cuando llega la hora de cerrar. Se anima la CAJA y se escala el cuerpo con transform: como es `fixed`, nada más en la página se recalcula: el cambio le cuesta al navegador lo que un solo elemento, no un reacomodo de la pantalla. */ .interruptor{ --itr-escala:1; /* La CAJA cambia de golpe y no se anima: animar width/height obliga al navegador a recalcular la página en cada cuadro. Y no hace falta — el