display (p. ej. .pantalla-pago { display: flex }) pisa el display: none del navegador y deja el elemento a la vista: así se vieron abiertos al cargar la pantalla de cobro y el PIN de supervisor del mostrador. */ [hidden] { display: none !important; } /* Roboto variable, servida desde el propio ERP (la CSP no deja cargar fuentes de fuera, y un mostrador no debe depender de internet para verse bien). Licencia OFL en /static/fonts/LICENSE-roboto.txt. */ @font-face { font-family: "Roboto"; src: url("/static/fonts/roboto-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Misma paleta sobria que el panel admin (grises de Google, un azul de acento, estados apagados), en dos versiones: oscura para el bar (poca luz) y clara para el mostrador de una tienda (de día). Los componentes solo usan tokens. */ :root { color-scheme: dark; --pos-bg: #202124; --pos-superficie: #292a2d; --pos-superficie-alta: #35363a; --pos-borde: #3c4043; --pos-texto: #e8eaed; --pos-texto-tenue: #9aa0a6; --pos-texto-suave: #bdc1c6; --pos-primario: #1a73e8; --pos-primario-fuerte: #1558b8; --pos-primario-tenue: #1f2f4a; --pos-exito-bg: #1e3a2a; --pos-exito-fg: #81c995; --pos-peligro: #d93025; --pos-peligro-bg: #3c2422; --pos-peligro-fg: #f28b82; --pos-aviso-bg: #3d3120; --pos-aviso-fg: #fdd663; --pos-velo: rgba(0, 0, 0, .62); --pos-radio: 12px; --pos-sombra: 0 1px 3px rgba(0, 0, 0, 0.5); --pos-fuente-numeros: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif; /* Series de las gráficas (src/lib/graficas.ts), mismas que en el admin. */ --serie-1: #8ab4f8; --serie-2: #fdd663; --serie-3: #fcad70; --serie-4: #f28b82; --serie-5: #f28b82; --serie-neutra: #5f6368; } /* Tema claro: lo elige cada vista con . */ :root[data-tema="claro"] { color-scheme: light; --pos-bg: #f8f9fa; --pos-superficie: #ffffff; --pos-superficie-alta: #f1f3f4; --pos-borde: #dadce0; --pos-texto: #202124; --pos-texto-tenue: #5f6368; --pos-texto-suave: #3c4043; --pos-primario: #1a73e8; --pos-primario-fuerte: #1558b8; --pos-primario-tenue: #e8f0fe; --pos-exito-bg: #e6f4ea; --pos-exito-fg: #137333; --pos-peligro: #c5221f; --pos-peligro-bg: #fce8e6; --pos-peligro-fg: #c5221f; --pos-aviso-bg: #fef7e0; --pos-aviso-fg: #b06000; --pos-velo: rgba(32, 33, 36, .6); --pos-sombra: 0 1px 2px rgba(60, 64, 67, 0.12), 0 1px 3px 1px rgba(60, 64, 67, 0.08); --serie-1: #1a73e8; --serie-2: #fbbc04; --serie-3: #f29900; --serie-4: #e8710a; --serie-5: #c5221f; --serie-neutra: #dadce0; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; background: var(--pos-bg); color: var(--pos-texto); font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; font-size: 16px; } body { padding-bottom: 96px; } .pos-lienzo { max-width: 1180px; margin: 0 auto; padding: 18px 20px 40px; } a { color: var(--pos-primario); } h1 { font-size: 1.3rem; margin: 0; letter-spacing: -0.01em; } h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pos-texto-tenue); margin: 30px 0 14px; } h2:first-of-type { margin-top: 6px; } /* Barra superior POS: minimal, cambio rápido Órdenes/Caja */ .pos-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; background: var(--pos-superficie); border-bottom: 1px solid var(--pos-borde); } .pos-topbar .pos-marca { display: flex; align-items: center; gap: 18px; } .pos-switch { display: flex; gap: 6px; background: var(--pos-bg); padding: 4px; border-radius: 999px; } .pos-switch a { text-decoration: none; color: var(--pos-texto-tenue); font-weight: 500; font-size: 0.88rem; padding: 8px 18px; border-radius: 999px; } .pos-switch a.activo { background: var(--pos-primario); color: white; } .pos-cuenta { display: flex; align-items: center; gap: 14px; font-size: 0.82rem; color: var(--pos-texto-tenue); } .pos-cuenta strong { color: var(--pos-texto); } .pos-cuenta a { color: var(--pos-texto-tenue); text-decoration: none; } .pos-cuenta a:hover { color: var(--pos-texto); } /* Teléfono: la marca, el título y el conmutador se apilan en vez de salirse por la derecha (en 390 px la página medía 491). */ @media (max-width: 900px) { .pos-topbar { padding: 10px 14px; } .pos-topbar .pos-marca { flex-wrap: wrap; gap: 6px 14px; min-width: 0; } .pos-topbar .pos-marca h1 { font-size: 1.15rem; } .pos-switch { flex-wrap: wrap; max-width: 100%; } .pos-cuenta { flex-wrap: wrap; gap: 6px 12px; } } /* Tarjetas / paneles */ .pos-panel { background: var(--pos-superficie); border: 1px solid var(--pos-borde); border-radius: var(--pos-radio); box-shadow: var(--pos-sombra); padding: 18px; margin-bottom: 16px; } /* Grid de fichas táctiles (mesas abiertas, productos, órdenes por cobrar) */ .pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; } .pos-ficha { display: block; text-align: left; background: var(--pos-superficie); border: 1px solid var(--pos-borde); border-radius: var(--pos-radio); padding: 16px; min-height: 92px; color: var(--pos-texto); text-decoration: none; cursor: pointer; font-family: inherit; transition: border-color 100ms ease, background-color 100ms ease, transform 80ms ease; } .pos-ficha:hover { border-color: var(--pos-primario); text-decoration: none; } .pos-ficha:active { transform: scale(0.97); } .pos-ficha .pos-ficha-titulo { display: block; font-weight: 500; font-size: 1rem; margin-bottom: 4px; } .pos-ficha .pos-ficha-sub { display: block; font-size: 0.78rem; color: var(--pos-texto-tenue); } .pos-ficha .pos-ficha-precio { display: block; margin-top: 10px; font-family: var(--pos-fuente-numeros); font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--pos-texto); font-weight: 500; } button.pos-ficha { width: 100%; } /* Ficha de "agregar nuevo" / acción secundaria discreta */ .pos-ficha.pos-ficha-fantasma { background: transparent; border-style: dashed; color: var(--pos-texto-tenue); display: flex; align-items: center; justify-content: center; font-weight: 700; } .pos-ficha.pos-ficha-fantasma:hover { color: var(--pos-texto); } /* Patrón radio-ficha: selección de mesa / orden / método de pago sin JS */ .pos-radio-ficha { position: relative; display: block; } .pos-radio-ficha input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .pos-radio-ficha .pos-ficha { border-width: 2px; } .pos-radio-ficha input:checked + .pos-ficha { border-color: var(--pos-primario); background: var(--pos-primario-tenue); box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.22); } .pos-radio-ficha input:focus-visible + .pos-ficha { outline: 2px solid var(--pos-primario); outline-offset: 2px; } /* Botones */ button, .pos-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; min-height: 52px; border: none; border-radius: 999px; background: var(--pos-primario); color: white; font-family: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; text-decoration: none; } button:hover, .pos-boton:hover { background: var(--pos-primario-fuerte); text-decoration: none; } button:active, .pos-boton:active { transform: scale(0.98); } button.secundario { background: var(--pos-superficie-alta); color: var(--pos-texto); border: 1px solid var(--pos-borde); } button.peligro { background: var(--pos-peligro); } button.pequeno { padding: 8px 18px; min-height: 40px; font-size: 0.88rem; } button.ancho { width: 100%; } /* Formularios */ form { display: flex; flex-direction: column; gap: 12px; } label { font-size: 0.85rem; font-weight: 500; color: var(--pos-texto-tenue); } input, select, textarea { padding: 14px 14px; min-height: 52px; border: 1px solid var(--pos-borde); border-radius: 10px; font-size: 1.05rem; font-family: inherit; background: var(--pos-superficie); color: var(--pos-texto); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--pos-primario); border-color: var(--pos-primario); } .fila-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .fila-form > div { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 6px; } /* Entrada de dinero estilo "display" de caja registradora */ .pos-monto-grupo { display: flex; align-items: center; background: var(--pos-superficie-alta); border: 1px solid var(--pos-borde); border-radius: 10px; padding: 0 14px; } .pos-monto-grupo:focus-within { outline: 2px solid var(--pos-primario); border-color: var(--pos-primario); } .pos-monto-grupo span { font-family: var(--pos-fuente-numeros); color: var(--pos-texto-tenue); font-weight: 700; font-size: 1.2rem; } .pos-monto-grupo input { border: none; background: transparent; font-family: var(--pos-fuente-numeros); font-size: 1.6rem; font-weight: 700; text-align: right; padding: 14px 0 14px 8px; min-height: unset; } .pos-monto-grupo input:focus { outline: none; } /* Chips de cantidad (selector compartido antes de tocar una ficha de producto) */ .pos-chips { display: flex; gap: 8px; flex-wrap: wrap; } .pos-chip { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--pos-borde); background: var(--pos-superficie-alta); color: var(--pos-texto); font-weight: 500; cursor: pointer; min-height: 44px; } .pos-chip.activo { background: var(--pos-primario); border-color: var(--pos-primario); color: white; } /* Tabla (líneas de orden, pagos) */ .pos-tabla-envoltorio { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } th { text-align: left; padding: 10px 10px; color: var(--pos-texto-tenue); font-size: 0.82rem; font-weight: 500; border-bottom: 1px solid var(--pos-borde); } td { padding: 13px 10px; border-bottom: 1px solid var(--pos-borde); font-variant-numeric: tabular-nums; } tbody tr:last-child td { border-bottom: none; } .etiqueta { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 500; } .etiqueta.venta { background: var(--pos-exito-bg); color: var(--pos-exito-fg); } .etiqueta.merma { background: var(--pos-peligro-bg); color: var(--pos-peligro-fg); } .etiqueta.promocion { background: var(--pos-aviso-bg); color: var(--pos-aviso-fg); } .etiqueta.devuelta { background: var(--pos-primario-tenue); color: var(--pos-primario); border: 1px solid var(--pos-borde); } .pos-ficha.estado-LIBRE { border-color: var(--pos-exito-fg); background: var(--pos-exito-bg); } .pos-ficha.estado-OCUPADA { border-color: var(--pos-aviso-fg); background: var(--pos-aviso-bg); } .pos-ficha.estado-CUENTA_PEDIDA { border-color: var(--pos-primario); background: var(--pos-primario-tenue); animation: pulsoCuenta 2s infinite ease-in-out; } @keyframes pulsoCuenta { 0%, 100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.35); } 50% { box-shadow: 0 0 12px 4px rgba(26, 115, 232, 0.5); } } .pos-modal-envoltorio { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 999; align-items: center; justify-content: center; padding: 20px; } .pos-modal-envoltorio.abierto { display: flex; } .pos-modal { background: var(--pos-superficie); border: 1px solid var(--pos-borde); border-radius: var(--pos-radio); max-width: 440px; width: 100%; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); } .error { background: var(--pos-peligro-bg); color: var(--pos-peligro-fg); border: 1px solid rgba(217, 48, 37, 0.3); padding: 14px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 0.92rem; font-weight: 600; } .vacio { color: var(--pos-texto-tenue); font-style: italic; } .ayuda { color: var(--pos-texto-tenue); font-size: 0.88rem; } /* Gráficas SVG del servidor (src/lib/graficas.ts) en el tema POS. */ .grafica { max-width: 100%; height: auto; display: block; margin: 0 auto; font-family: inherit; font-variant-numeric: tabular-nums; } .grafica text { fill: var(--pos-texto-tenue); font-size: 11px; } .grafica text.valor { fill: var(--pos-texto); } .grafica .eje { stroke: var(--pos-borde); stroke-width: 1; } .grafica .promedio { stroke: var(--pos-texto-tenue); stroke-width: 1; stroke-dasharray: 4 3; } .grafica .fondo { fill: var(--pos-superficie-alta); } /* Botón de salir de la cabecera POS (antes con color fijo en el partial). */ .pos-logout-btn { background: var(--pos-superficie-alta); color: var(--pos-texto); padding: 8px 14px; min-height: 40px; border-radius: 999px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .pos-logout-btn.urgente { background: var(--pos-peligro); color: white; } .pos-cuenta a.pos-admin { min-height: 40px; display: inline-flex; align-items: center; padding: 0 10px; } /* Total grande, estilo visor digital */ .pos-total-grande { font-family: var(--pos-fuente-numeros); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--pos-primario); } /* Barra de acción fija abajo, alcanzable con el pulgar en tablet */ .pos-barra-inferior { position: sticky; bottom: 0; left: 0; right: 0; margin: 24px -20px -40px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(21, 18, 31, 0) 0%, var(--pos-bg) 30%); display: flex; gap: 12px; justify-content: flex-end; } details.pos-detalle { margin-top: 4px; } details.pos-detalle summary { cursor: pointer; color: var(--pos-texto-tenue); font-size: 0.85rem; font-weight: 600; padding: 8px 0; } details.pos-detalle[open] summary { color: var(--pos-texto); }