/* ========================================================================= theme.css — SISTEMA DE ESTILOS CENTRALIZADO (theming) Toda la estética vive en variables. Ninguna pantalla hardcodea colores: todas leen estas custom properties. Para re-vestir una marca, editá SOLO su bloque [data-marca="…"] de abajo. ========================================================================= */ :root { /* — Tipografía — */ --font-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fw-normal: 400; --fw-semibold: 600; --fw-bold: 800; /* — Radios — */ --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; /* — Sombra / barra — */ --shadow: 0 1px 3px rgba(16, 32, 58, .08), 0 1px 2px rgba(16, 32, 58, .06); --topbar-strip: 4px; /* franja de color de marca arriba */ /* ===================================================================== MODO PC (default / denso, mouse+teclado). Los tamaños y espaciados que cambian entre MODO PC y MODO TABLET viven acá como variables; el modo tablet SOLO redefine estas mismas variables (bloque [data-modo="tablet"]). data-modo se pone en (persistido en localStorage por modo.js). ===================================================================== */ --fs-root: 16px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 18px; --touch: 40px; /* control estándar */ --touch-min: 36px; /* control chico (hitbox mínimo) */ --btn-py: 8px; --btn-px: 14px; /* padding botón normal */ --btn-lg-py: 12px; --btn-lg-px: 18px; --btn-lg-min: 44px; /* botón principal */ /* Botón chico = acciones de comanda. En MODO PC van COMPACTOS/densos (pill chico, texto solo, todo en una fila, fiel a Datalive). */ --btn-sm-py: 3px; --btn-sm-px: 9px; --btn-sm-min: 26px; --btn-fs: 1rem; --btn-lg-fs: 1.05rem; --btn-sm-fs: .82rem; --key-min: 52px; /* tecla del teclado numérico (login) */ --tile-min: 40px; /* alto mínimo de tiles (productos/categorías/marca) */ --user-tile-min: 52px; /* fichas de usuario (login) */ --gap-btns: 6px; /* separación entre botones de acción */ --input-py: 10px; /* padding vertical de inputs/selects */ /* Ancho máximo del contenido operativo (listado/armado/cierre). En MODO PC usa el ANCHO COMPLETO de la ventana (none) para no dejar margen muerto en monitores anchos; para poner un tope en el futuro, cambiá SOLO esta variable (ej. 2000px). */ --content-max-pc: none; --content-pad-x: 16px; /* padding lateral chico (no pegado al borde) */ /* Divisor entre comandas del listado (una sola perilla, igual en PC y Tablet). */ --cmd-divider: 3px solid color-mix(in srgb, var(--border) 45%, var(--texto-muted)); --cmd-row-gap-y: 14px; /* aire vertical dentro de cada fila (arriba+abajo) */ /* — Colores NEUTRALES (no dependen de la marca) — */ --surface: #ffffff; --texto: #16203a; --texto-muted: #667085; --border: #d8dee9; /* — Alertas — */ --ok: #0d9488; --danger: #dc2626; /* — Semáforo de RENTABILIDAD / Food Cost (hex IDÉNTICOS a Stock; tokenizados para no hardcodear en las pantallas). Los temas NO deberían cambiarlos: son el código de color compartido con Stock. — */ --rent-verde-bg: #dcfce7; --rent-verde-ink: #166534; --rent-naranja-bg: #fef3c7; --rent-naranja-ink: #92400e; --rent-rojo-bg: #fee2e2; --rent-rojo-ink: #b91c1c; --rent-override-line: #b45309; --rent-override-bg: #fffbeb; /* — Colores de ESTADO de comanda (semánticos, NO dependen de la marca) — cada estado tiene un color de tinta + un fondo suave para el chip. */ --est-tomada-ink: #1d4ed8; --est-tomada-bg: #e6efff; /* azul: recién tomada */ --est-cocina-ink: #b45309; --est-cocina-bg: #fdf0d5; /* ámbar: en cocina */ --est-despachado-ink: #7c3aed; --est-despachado-bg: #ede9fe; /* violeta: despachado (delivery) */ --est-encamino-ink: #0369a1; --est-encamino-bg: #e0f2fe; /* celeste: en camino (delivery) */ --est-entregada-ink: #047857; --est-entregada-bg: #d9f5e6; /* verde: entregada */ --est-cobrada-ink: #0f766e; --est-cobrada-bg: #ccf2ee; /* teal: cobrada */ --est-anulada-ink: #b91c1c; --est-anulada-bg: #fde2e2; /* rojo: anulada */ /* — Colores de MARCA (defaults marca-neutral; se sobrescriben por [data-marca]) — */ --color-principal: #16203a; --color-acento: #2563eb; --acento-ink: #ffffff; /* texto sobre el acento (contraste) */ --bg: #f4f6f9; /* fondo de pantalla */ /* — Derivados (se recalculan solos al cambiar acento/principal por marca) — */ --acento-soft: color-mix(in srgb, var(--color-acento) 12%, #ffffff); --principal-soft: color-mix(in srgb, var(--color-principal) 10%, #ffffff); --placeholder: #eef1f5; /* placeholder neutro de imagen */ --placeholder-ink: #b6bfcc; /* glifo del placeholder */ } /* ========================================================================= MODO TABLET (táctil, dedo). SOLO redefine las variables de tamaño/espaciado; la lógica, los colores y los componentes no cambian. Objetivo: tablet 10" horizontal y monitor touch 20", contraste NORMAL / estética sobria. Targets frecuentes ≥48px, principales ~56px, separación ≥8px. ========================================================================= */ :root[data-modo="tablet"] { --fs-root: 18px; --sp-1: 6px; --sp-2: 10px; --sp-3: 16px; --sp-4: 24px; --touch: 56px; --touch-min: 48px; --btn-py: 14px; --btn-px: 20px; --btn-lg-py: 18px; --btn-lg-px: 24px; --btn-lg-min: 60px; --btn-sm-py: 12px; --btn-sm-px: 16px; --btn-sm-min: 48px; --btn-fs: 1.02rem; --btn-lg-fs: 1.1rem; --btn-sm-fs: .95rem; --key-min: 68px; --tile-min: 56px; --user-tile-min: 64px; --gap-btns: 10px; --input-py: 14px; } /* Monitor touch grande (~1920×1080): aprovecha el espacio, targets algo más grandes. Solo aplica en modo tablet. */ @media (min-width: 1600px) { :root[data-modo="tablet"] { --fs-root: 19px; --touch: 60px; --btn-lg-min: 64px; --key-min: 76px; --user-tile-min: 68px; } } /* ---- Paletas por marca (valores de arranque; la diseñadora los ajusta) ---- Se aplican poniendo data-marca="" en el contenedor (body). Códigos: kizushi · kashiwa · poked · club_del_poke. */ /* Colores REALES tomados de cada logo (panel/public/assets/marcas/*.webp). Muestreados del propio archivo (principal + acento), ajustados para contraste. */ [data-marca="kizushi"] { /* negro + magenta vibrante del texto "KIZUSHI" */ --color-principal: #1A1A1A; --color-acento: #E80A78; --acento-ink: #ffffff; --bg: #f7f6f7; } [data-marca="kashiwa"] { /* marca monocroma DORADA (zorro + "KASHIWA") */ --color-principal: #9C6F15; /* oro profundo: legible como texto/borde sobre claro */ --color-acento: #E3A72B; /* oro de marca (botones) */ --acento-ink: #1A1A1A; /* acento claro → tinta oscura para contraste */ --bg: #fcf7ea; /* crema */ } [data-marca="poked"] { /* verde tropical del texto "POKĒD" */ --color-principal: #0B7A38; --color-acento: #12994A; --acento-ink: #ffffff; --bg: #f1f8f3; } [data-marca="club_del_poke"] { /* azul marino + rojo (la "O" y el subrayado) */ --color-principal: #12324C; --color-acento: #D83A3A; --acento-ink: #ffffff; --bg: #f3f6f9; } /* ========================================================================= TEMAS SWITCHEABLES — se aplican poniendo data-tema="" en . A futuro la pantalla de Configuración va a cambiar este atributo; por ahora sólo la pantalla PILOTO (precios masivos) lo setea. Un tema NO agrega estilos nuevos: sólo REDEFINE los tokens de arriba. Para sumar un tema, copiá este bloque y cambiá los valores. El default (sin data-tema) es el tema Ki&Ka original. ========================================================================= */ :root[data-tema="google"] { /* Tipografía limpia tipo Roboto/Inter (con fallback del sistema). */ --font-base: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Norte Google/Material: mucho blanco, texto gris oscuro, azul de acento. */ --surface: #ffffff; --bg: #ffffff; --texto: #202124; /* gris casi negro */ --texto-muted: #5f6368; /* gris secundario */ --border: #dadce0; /* gris de borde Material */ --color-principal: #202124; /* títulos/tinta = gris oscuro (no azul) */ --color-acento: #1a73e8; /* azul Google */ --acento-ink: #ffffff; --acento-soft: #e8f0fe; /* azul muy suave (hover/selección) */ --principal-soft: #f1f3f4; /* gris muy suave */ --placeholder: #f1f3f4; --placeholder-ink: #bdc1c6; /* Bordes menos redondeados + sombras MUY sutiles (elevación 1 de Material). */ --radius: 8px; --radius-sm: 4px; --shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); /* Franja de color de marca de la topbar: en Google la queremos fina/neutra. */ --topbar-strip: 0px; /* Divisor de filas más liviano (tablas Material tienen líneas finas gris claro). */ --cmd-divider: 1px solid var(--border); }