/* ============================================================ base.css — Reset moderno + tipografia base de la plataforma ------------------------------------------------------------ Carga DESPUES de tokens.css (consume las CSS vars de marca). Cubre: - Reset moderno (sensible defaults, no aggressive zero-out). - Tipografia base (familia, size, leading). - Numeros con tabular-nums consistente para timestamps + precios. - Eyebrow + headings con escalera del design handoff. - Utilidades minimas (.sr-only, .num, focus-visible, etc.). Tipografias se cargan desde Google Fonts en el del layout: ============================================================ */ /* ---------- Reset moderno ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { min-height: 100vh; line-height: var(--leading-normal); font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink); background-color: var(--bg); } img, picture, video, canvas, svg { display: block; max-width: 100%; } svg { fill: none; stroke: currentColor; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } button:disabled { cursor: not-allowed; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul, ol { padding-left: 1.25em; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } #root, #__next, [role="main"] { isolation: isolate; } /* ---------- Numerica tabular consistente ---------- */ /* Aplica a TODOS los numeros de UI (timestamps, montos, contadores). */ .num, time, .tabular, [data-tabular] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---------- Eyebrow (label uppercase microcategorico) ---------- */ .eyebrow { font-size: var(--text-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: 500; color: var(--muted); } /* ---------- Headings ---------- */ h1, .h1 { font-size: var(--text-3xl); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); } h2, .h2 { font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); } h3, .h3 { font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-snug); } h4, .h4 { font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-snug); } h5, .h5 { font-size: var(--text-md); font-weight: 600; line-height: var(--leading-snug); } h6, .h6 { font-size: var(--text-base); font-weight: 600; } /* Display (hero pareja en CSM dashboard, recepcion 1920x1080, etc.) */ .display { font-family: var(--font-serif); font-style: italic; font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--serif-accent); } .display-lg { font-size: var(--text-display-lg); } .display-xl { font-size: var(--text-display-xl); } /* ---------- Body sizes ---------- */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-md { font-size: var(--text-md); } .text-lg { font-size: var(--text-lg); } /* ---------- Mono (codes, timestamps tecnicos, IDs) ---------- */ .mono, code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } /* ---------- Focus visible (a11y, WCAG AA) ---------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); } /* Inputs con borde focus mas integrado */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--focus-ring); box-shadow: var(--shadow-focus); } /* ---------- Selection ---------- */ ::selection { background: var(--accent-soft); color: var(--accent-ink); } /* ---------- Utilidades minimas ---------- */ /* Skip link genérico (a11y, WCAG 2.4.1) — oculto hasta foco con teclado */ .skip-link { position: absolute; left: -10000px; top: 0; background: var(--primary, #0e2747); color: var(--primary-fg, #fff); padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); font-weight: 600; z-index: 10000; text-decoration: none; } .skip-link:focus, .skip-link:focus-visible { left: var(--space-2); top: var(--space-2); outline: 2px solid var(--focus-ring, currentColor); outline-offset: 2px; } /* Screen reader only (visually hidden pero accesible) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Truncate texto con ellipsis */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2, .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { -webkit-line-clamp: 2; } .line-clamp-3 { -webkit-line-clamp: 3; } /* Bloqueo de scroll del body cuando hay modal abierto */ body.no-scroll { overflow: hidden; } /* Container responsive (uso opcional en pages) */ .container { width: 100%; margin-inline: auto; padding-inline: var(--space-4); max-width: 1280px; } @media (min-width: 1024px) { .container { padding-inline: var(--space-6); } } /* ---------- Print friendly minimo (para exports de cocina + comprobantes) ---------- */ @media print { body { background: white; color: black; } .no-print, nav, header, footer { display: none !important; } a { color: black; text-decoration: underline; } } /* ---------- Touch: 16px minimo en campos (evita el auto-zoom de iOS) ---------- */ /* iOS Safari hace zoom automatico al enfocar cualquier campo con font-size < 16px, y el usuario queda con la pagina desencuadrada. En punteros gruesos (telefono/tablet, PWA de staff incluida) forzamos el minimo de 16px; max() conserva los tamanos que ya son mayores. El desktop con mouse no se toca. */ @media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea { font-size: max(16px, 1em); } }