/* =========================================================================== gerente.css — la hoja CAJA, con pinta de hoja de cálculo ⭐ POR QUÉ ESTE PANEL ES CLARO Y EL DEL CAJERO ES OSCURO No es capricho ni falta de coherencia: son dos aparatos distintos. El panel del cajero se llena de noche, en el PC del local, mirando una pantalla a medio metro y con la térmica al lado — el fondo oscuro cansa menos y hace que el descuadre en rojo salte. Este se abre para LEER una tabla de 23 columnas y compararla contra el Excel que Cristian tiene abierto al lado. Ahí lo que manda es que se parezca a la hoja: fondo blanco, líneas finas, números a la derecha y tabulares. Copiar el tema oscuro habría quedado bonito y se habría leído peor. ⭐ EL SCROLL HORIZONTAL VIVE EN `.hoja-envoltura`, NO EN EL `` Son 23 columnas: en ninguna pantalla caben todas, tampoco en el Excel. Lo que no se puede perder al desplazarse es SABER QUÉ SE ESTÁ MIRANDO, así que la columna FECHA y las dos filas de encabezado quedan pegadas (`position: sticky`). Si el scroll estuviera en el ``, la barra de arriba (sede, mes, ↻) se iría con la tabla y el gerente terminaría desplazándose de vuelta cada vez que quiere cambiar de mes. ⚠️ Las celdas pegadas necesitan `background` OPACO sí o sí. Con fondo transparente el contenido que pasa por debajo se ve a través y la hoja se vuelve ilegible justo al desplazarse — que es el único momento en que estas celdas existen. =========================================================================== */ :root { --fondo: #f4f2ef; --hoja: #ffffff; --panel: #ffffff; --borde: #d9d4ce; --borde-duro: #b4aca3; --texto: #1b1917; --texto-2: #6f675f; --acento: #b57614; /* mostaza Las Crepes, oscurecida para leerse en claro */ --acento-flojo:#fdf4e2; --ok: #1f7a44; --mal: #c02730; --ajuste: #7a4bd0; /* lo escrito a mano — ver abajo por qué NO es rojo */ --ajuste-flojo:#f3ecff; --manual: #1d6fa5; --manual-flojo:#eaf4fb; --radio: 10px; --alto-barra: 92px; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; background: var(--fondo); color: var(--texto); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; /* 16px: iOS no hace zoom al enfocar un campo */ line-height: 1.4; } button, input { font: inherit; color: inherit; } /* ⚠️ `hidden` es el ÚNICO interruptor que usa `gerente.js` para mostrar y esconder la puerta, la barra, el panel y el modal. Pero `[hidden]` viene del navegador como `display:none` con especificidad (0,1,0), así que CUALQUIER regla nuestra que fije `display` le gana — y aquí `.puerta` y `.modal` fijan `display:flex`. Sin esta línea el panel está roto de la peor manera posible: `puerta.hidden` pasa a `true`, el mes se baja, la hoja se dibuja con sus 31 filas… y el gerente sigue viendo la pantalla de la clave, porque la puerta es `position:fixed; inset:0; z-index:100` y está encima de todo. **Nada da error y la consola sale limpia**: desde el código se ve que todo funcionó. El modal es todavía peor —z-index 90 sobre toda la hoja— y se traga cada clic sin pintar nada visible. Va con `!important` a propósito: es una regla de estado, no de estilo, y tiene que ganarle a cualquier `display` que se agregue después sin acordarse de esto. */ [hidden] { display: none !important; } /* ============================================================== LA PUERTA === Ocupa la pantalla entera a propósito. A diferencia del panel del cajero —donde la clave se pide al GUARDAR para que nunca haga falta internet para cerrar una caja— aquí sin el mes bajado de Supabase no hay absolutamente nada que enseñar, así que fingir un panel de fondo sería mentir. =========================================================================== */ .puerta { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--fondo); } .tarjeta-puerta { width: 100%; max-width: 340px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px 22px; box-shadow: 0 8px 30px rgba(0,0,0,.07); } .tarjeta-puerta h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; } .tarjeta-puerta .sub { margin: 2px 0 22px; color: var(--texto-2); font-size: 14px; } .tarjeta-puerta label { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 6px; } .tarjeta-puerta input { width: 100%; height: 46px; padding: 0 12px; background: #fff; border: 1px solid var(--borde-duro); border-radius: 8px; letter-spacing: .18em; } .tarjeta-puerta input:focus { outline: 2px solid var(--acento); outline-offset: 1px; } .tarjeta-puerta .btn { width: 100%; margin-top: 14px; height: 46px; } /* ================================================================= BOTONES = */ .btn { min-height: 40px; padding: 0 14px; background: #fff; color: var(--texto); border: 1px solid var(--borde-duro); border-radius: 8px; cursor: pointer; } .btn:hover { background: #faf8f6; } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: .5; cursor: default; } .btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; } .btn.primario:hover { background: #a06a10; } .btn.peligro { background: var(--mal); border-color: var(--mal); color: #fff; font-weight: 600; } .btn.peligro:hover { background: #a11f27; } .btn-icono { width: 34px; height: 34px; padding: 0; line-height: 1; font-size: 20px; background: #fff; border: 1px solid var(--borde-duro); border-radius: 8px; cursor: pointer; } .btn-icono:hover { background: #faf8f6; } /* =================================================================== BARRA = */ .barra { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--panel); border-bottom: 1px solid var(--borde); padding: 10px 14px 0; padding-top: calc(10px + env(safe-area-inset-top)); } .barra-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sedes { display: flex; gap: 6px; } .chip { min-height: 34px; padding: 0 12px; background: #fff; border: 1px solid var(--borde-duro); border-radius: 999px; cursor: pointer; font-size: 14px; } .chip:hover { background: #faf8f6; } /* La sede puesta se marca con FONDO, no solo con borde: un borde de 1px de diferencia no se distingue de reojo, y equivocarse de sede aquí significa ajustar la contabilidad del otro local. */ .chip.puesto { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; } .mes-nav { display: flex; align-items: center; gap: 8px; } .mes-titulo { min-width: 150px; text-align: center; font-weight: 700; font-size: 17px; text-transform: capitalize; } .barra-der { margin-left: auto; display: flex; align-items: center; gap: 8px; } .quien-caja { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); } .quien-caja input { width: 130px; height: 34px; padding: 0 10px; background: #fff; border: 1px solid var(--borde-duro); border-radius: 8px; font-size: 14px; } /* ⚠️ El nombre es OBLIGATORIO para el servidor (`gerente-ajuste` lo exige) y la clave del gerente es compartida, así que es lo ÚNICO que dice quién tocó la casilla. Vacío se marca en rojo antes de que el gerente descubra por un error del servidor que le faltaba. */ .quien-caja input.falta { border-color: var(--mal); background: #fff5f5; } .barra-estado { min-height: 22px; padding: 2px 0 6px; font-size: 13px; color: var(--texto-2); } .barra-estado.malo { color: var(--mal); font-weight: 600; } .barra-estado.bueno { color: var(--ok); } /* ==================================================================== MAIN = */ main { padding: calc(var(--alto-barra) + 10px) 14px 20px; } /* =================================================================== HOJA === */ .hoja-envoltura { overflow: auto; /* ⭐ el scroll de la tabla vive AQUÍ */ max-height: calc(100vh - var(--alto-barra) - 86px); background: var(--hoja); border: 1px solid var(--borde-duro); border-radius: var(--radio); } .hoja { border-collapse: separate; /* `separate` + border-spacing 0: con `collapse` los bordes de las celdas pegadas se pierden al desplazarse (el navegador los pinta en la celda vecina, que sí se va) */ border-spacing: 0; font-size: 13px; white-space: nowrap; } .hoja th, .hoja td { border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding: 5px 8px; background: var(--hoja); /* opaco: hace falta para las celdas pegadas */ } /* --- encabezado de dos filas, como los combinados del Excel --------------- */ .hoja thead th { position: sticky; z-index: 3; background: #efece7; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); font-weight: 700; text-align: center; border-bottom: 1px solid var(--borde-duro); } .hoja thead tr:first-child th { top: 0; } .hoja thead tr:last-child th { top: 26px; } .hoja thead th.grupo { border-left: 1px solid var(--borde-duro); } /* --- la columna FECHA se queda quieta ------------------------------------- */ .hoja .col-fecha { position: sticky; left: 0; z-index: 2; background: var(--hoja); border-right: 1px solid var(--borde-duro); text-align: left; font-weight: 600; font-variant-numeric: tabular-nums; } .hoja thead .col-fecha { z-index: 5; background: #efece7; } .hoja tfoot .col-fecha { background: #efece7; } /* --- celdas de número ----------------------------------------------------- */ .hoja td.num { text-align: right; font-variant-numeric: tabular-nums; cursor: cell; min-width: 82px; } .hoja td.num:hover { background: var(--acento-flojo); } .hoja td.cero { color: #bdb6ae; } /* un 0 real, apagado para que no compita */ /* ⭐ Lo ajustado a mano se marca en MORADO, no en rojo. Rojo significa «esto está mal» en el resto del sistema (el descuadre del panel del cajero, los errores). Un ajuste no está mal: es una corrección deliberada y firmada. Pintarla de rojo haría que el gerente busque un problema cada vez que ve su propio trabajo. */ .hoja td.ajustada { background: var(--ajuste-flojo); color: var(--ajuste); font-weight: 700; } /* ⭐ La marca ● es un BOTÓN de verdad, no un `::after`. Es el único camino para ver quién ajustó la casilla y para ANULAR, y un pseudo-elemento no se puede clicar ni enfocar con el teclado: el ajuste quedaría visible pero irreversible desde la pantalla. Dentro de la misma celda conviven dos gestos: clic en el número = corregir, clic en la marca = ver/anular. Por eso la marca necesita su propia área tocable. */ .hoja td.num .marca { display: inline-block; width: 16px; height: 16px; padding: 0; margin-left: 3px; vertical-align: super; border: 0; background: transparent; color: var(--ajuste); font-size: 9px; line-height: 16px; cursor: pointer; } .hoja td.num .marca:hover, .hoja td.num .marca:focus-visible { background: var(--ajuste); color: #fff; border-radius: 50%; outline: none; } /* El hover de la fila es más específico que `.ajustada` y le apagaba el morado justo cuando el gerente está apuntando a la casilla. */ .hoja tbody tr:hover td.ajustada { background: var(--ajuste-flojo); } .muestra-ajustada { background: var(--ajuste-flojo); color: var(--ajuste); font-weight: 700; padding: 1px 6px; border-radius: 4px; } .muestra-ajustada::after { content: "●"; font-size: 8px; vertical-align: super; margin-left: 3px; } /* Un día que NO tiene cuadre firmado: existe solo porque alguien lo escribió. No es lo mismo un número que salió de un cuadre que uno tecleado, y la hoja tiene que poder decirlo de un vistazo. */ .hoja tr.dia-manual .col-fecha { color: var(--manual); background: var(--manual-flojo); } .hoja tr.dia-manual .col-fecha::after { content: " ✎"; font-size: 11px; } /* ⭐ Un día del que NO SE SABE NADA: ni cuadre ni ajuste. Sale igual que los demás —con sus 23 casillas vacías y clicables— porque es justo ahí donde se cumple la mitad «subir los datos también manualmente» de lo que pidió Cristian. Si la hoja pintara solo los días que existen, un día sin cuadre no tendría ni una casilla dónde hacer clic y no habría forma de llenarlo desde la pantalla. ⚠️ Las casillas van EN BLANCO, no en cero. Un 0 afirma «ese día no se vendió nada»; el blanco dice «todavía no lo sabemos», que es la verdad. La fecha se apaga para que el mes se lea de un vistazo: lo claro es lo que falta. */ .hoja tr.dia-vacio .col-fecha { color: #a49b91; font-weight: 500; } .hoja tr.dia-vacio td.num { background: #fcfbfa; } .hoja tbody tr:hover td { background: #fbf9f7; } .hoja tbody tr:hover .col-fecha { background: #f3efe9; } .hoja tbody tr.dia-manual:hover .col-fecha { background: #dceaf5; } /* ⚠️ Esta regla va DESPUÉS del hover de fila y con más peso a propósito. `.hoja tbody tr:hover td` (0,3,2) le gana a `.hoja td.num:hover` (0,2,2), así que sin esto la casilla bajo el cursor no se distingue de las otras 22 de su fila — y en una hoja de 23 columnas el resalte de la CASILLA es lo único que dice dónde se va a escribir al hacer clic. En un día vacío es todavía más importante: es la única pista de que ahí se puede teclear. */ .hoja tbody tr:hover td.num:hover { background: var(--acento-flojo); } .hoja tbody tr:hover td.ajustada:hover { background: #e9dcff; } /* --- la fila TOTAL, al pie como en el Excel -------------------------------- */ .hoja tfoot td { position: sticky; bottom: 0; z-index: 2; background: #efece7; border-top: 2px solid var(--borde-duro); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .hoja tfoot .col-fecha { z-index: 4; text-align: left; } /* --- el input de edición, encima de la celda ------------------------------- */ .hoja td.num input { width: 100%; min-width: 74px; height: 24px; padding: 0 4px; margin: -3px 0; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; border: 2px solid var(--acento); border-radius: 4px; background: #fff; } .hoja td.num input:focus { outline: none; } .hoja td.guardando { opacity: .45; } /* ================================================================== VACÍO == */ .vacio { margin-top: 16px; padding: 26px; background: var(--panel); border: 1px dashed var(--borde-duro); border-radius: var(--radio); color: var(--texto-2); text-align: center; } .vacio strong { display: block; color: var(--texto); font-size: 17px; margin-bottom: 6px; } .pie-ayuda { margin: 12px 2px 0; font-size: 12.5px; color: var(--texto-2); } kbd { background: #fff; border: 1px solid var(--borde-duro); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 11px; font-family: ui-monospace, monospace; } /* ================================================================== MODAL == */ .modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,17,15,.45); } .modal-caja { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.2); } .modal-caja h2 { margin: 0 0 14px; font-size: 19px; } .datos { margin: 0 0 16px; font-size: 14px; } .datos div { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; border-bottom: 1px solid var(--borde); } .datos dt { color: var(--texto-2); } .datos dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .modal-caja label { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 6px; } .modal-caja input[type="text"] { width: 100%; height: 42px; padding: 0 12px; background: #fff; border: 1px solid var(--borde-duro); border-radius: 8px; } .modal-caja input[type="text"]:focus { outline: 2px solid var(--acento); outline-offset: 1px; } .nota { font-size: 12.5px; color: var(--texto-2); margin: 10px 0 0; } .modal-botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } .error { color: var(--mal); font-size: 13.5px; margin: 10px 0 0; min-height: 18px; } /* ================================================================== AVISO == */ .aviso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 95; max-width: 92vw; padding: 11px 18px; background: #1b1917; color: #fff; border-radius: 999px; font-size: 14px; box-shadow: 0 6px 22px rgba(0,0,0,.25); } .aviso.malo { background: var(--mal); } .aviso.bueno { background: var(--ok); } /* ================================================= PANTALLA ANGOSTA ======== */ /* El panel del gerente se usa en el PC —una hoja de 23 columnas no es cosa de celular—, pero abrirlo desde el teléfono para mirar un número tiene que funcionar. Lo único que se reacomoda es la barra: la tabla ya sabe desplazarse sola. */ @media (max-width: 700px) { :root { --alto-barra: 132px; } .barra-der { margin-left: 0; width: 100%; } .quien-caja { flex: 1; } .quien-caja input { width: 100%; } .mes-titulo { min-width: 120px; font-size: 15px; } main { padding-left: 8px; padding-right: 8px; } }