/* ======================================================================== */ /* pos-v2 — brutalist monochrome (modeled on yeezy.com) */ /* ======================================================================== */ /* * Design intent * ────────────── * Pure black on pure white. No color. No radii. No shadows. No gradients. * Helvetica. All-caps section labels. Thin 1px black borders as the only * structural element. Typography does every piece of heavy lifting. * * The POS shouldn't try to look friendly — it should look decisive. A * cashier scans two numbers and presses Enter; the UI gets out of the way. * * Every class name stays pos-v2-native. Only the visual tokens change. */ /* ======================= TOKENS ======================================== */ :root { --bg: #ffffff; --bg-sunken: #f0f0f0; --surface: #ffffff; --surface-2: #fafafa; --ink: #000000; --ink-soft: #000000; --ink-muted: #666666; --ink-faint: #999999; --ink-subtle: #cccccc; --line: #000000; --line-soft: #cccccc; --accent: #000000; --accent-ink: #ffffff; --primary: #000000; --primary-hover: #1a1a1a; --primary-ink: #ffffff; --ok: #000000; --ok-soft: #f0f0f0; --warn: #000000; --warn-soft: #f0f0f0; --danger: #d00000; --danger-soft:#ffeeee; --ring: 0 0 0 2px #000000; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-card: none; --radius: 0; --radius-sm: 0; --radius-lg: 0; /* Inter — loaded from Google Fonts via index.html. Helvetica Neue / Arial stay as fallbacks for the initial paint before Inter finishes loading, and for kiosks that are completely offline. */ --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ======================= RESET + BASE ================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Don't pin html/body to a fixed 100% height — that made body the scrolling root in some browsers, defeating scrollbar-gutter on . Letting content grow past the viewport and scroll from keeps overflow-y: scroll + scrollbar-gutter: stable in charge of the gutter. */ html { -webkit-text-size-adjust: 100%; background: #ffffff; /* Reserve the vertical-scrollbar gutter permanently so viewport width stays constant whether the current tab's content overflows or not. Without this, switching to the Fiscal tab (whose content loads in stages) makes the scrollbar appear/disappear mid-load, which shrinks and re-expands the flexed topbar. The gutter must be reserved on both html and body because `html { height: 100% }` below forces body to be the actual scrolling root in some browsers. */ scrollbar-gutter: stable; overflow-y: scroll; } body { color: #000; font-family: var(--font); font-size: 13px; line-height: 1.35; background: #ffffff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; min-height: 100dvh; font-weight: 400; letter-spacing: 0.01em; } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: #000; width: 100%; border: 1px solid #000; background: #fff; border-radius: 0; padding: 10px 12px; transition: none; } /* Checkboxes and radios must escape the textbox-style defaults above — otherwise they render as giant 100%-wide boxes with borders and padding. */ input[type="checkbox"], input[type="radio"] { width: 14px; height: 14px; min-width: 14px; padding: 0; margin: 0; border: 1px solid #000; accent-color: #000; cursor: pointer; flex-shrink: 0; } input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid #000; outline-offset: -1px; box-shadow: none; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: 0; color: #000; } #root { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #fff; } ::selection { background: #000; color: #fff; } /* ======================= APP SHELL ===================================== */ .v2-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* "Nueva versión disponible" banner (updateCheck.js) — managers/admins only. Amber + black so it stands out against the monochrome chrome. Renders just below the sticky topbar, nagging until the manager taps Refrescar. */ .v2-update-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; background: #ffe08a; color: #1a1300; border-bottom: 2px solid #000; font-weight: 700; font-size: 14px; text-align: center; } .v2-update-banner__text { line-height: 1.3; } .v2-update-banner__btn { appearance: none; cursor: pointer; border: 2px solid #000; background: #000; color: #fff; font-weight: 800; padding: 7px 16px; border-radius: 8px; white-space: nowrap; } .v2-update-banner__btn:hover { background: #fff; color: #000; } /* Manager announcement — red broadcast banner (dismissible). Bold RED text. */ .v2-announce-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #fff5f5; border-bottom: 2px solid #d00000; } .v2-announce-banner__body { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .v2-announce-banner__icon { font-size: 16px; } .v2-announce-banner__text { color: #d00000; font-weight: 800; font-size: 15px; line-height: 1.35; } .v2-announce-banner__by { color: #a33; font-size: 12px; font-weight: 600; } .v2-announce-banner__close { appearance: none; cursor: pointer; flex-shrink: 0; border: 2px solid #d00000; background: #fff; color: #d00000; font-weight: 800; width: 28px; height: 28px; border-radius: 8px; line-height: 1; } .v2-announce-banner__close:hover { background: #d00000; color: #fff; } /* Ajustes announcement editor */ .ajustes__announce-input { width: 100%; resize: vertical; font: inherit; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; margin: 6px 0; box-sizing: border-box; } .ajustes__announce-active { color: #d00000; font-weight: 700; } /* Terminales activas list */ .ajustes__terminals { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .ajustes__terminal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid #eee; border-radius: 8px; } .ajustes__terminal-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ajustes__terminal-app { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; background: #000; color: #fff; padding: 2px 6px; border-radius: 5px; } .ajustes__terminal-who { font-weight: 700; } .ajustes__terminal-id { color: #666; font-size: 12px; } .ajustes__terminal-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ajustes__terminal-ver { font-family: ui-monospace, monospace; font-size: 12px; color: #333; } .ajustes__terminal-ver.is-stale { color: #d00000; font-weight: 700; } .ajustes__terminal-stale { color: #d00000; font-weight: 800; font-size: 11px; text-transform: uppercase; } .ajustes__terminal-seen { color: #888; font-size: 11px; } .v2-topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 0; padding: 0; background: #fff; border-bottom: 1px solid #000; } .v2-topbar__brand { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-right: 1px solid #000; flex-shrink: 0; /* button reset — the brand is now a