/* * Revio — Base CSS * Reset + tipografía + elementos base usando los tokens de tokens.css * * Este archivo define el estilo "de serie" del HTML. NO incluye componentes * específicos (botones, tablas, cards) — esos van en app.css a partir de Fase 2.3. * * Carga order en el : * 1. tokens.css ← variables * 2. base.css ← reset + tipografía (este archivo) * 3. app.css ← componentes Revio (Fase 2.3+) * 4. template.css ← CSS legacy de QWcrm (compat, se va reduciendo) */ /* ========================= RESET ========================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; } html, body { margin: 0; padding: 0; min-height: 100vh; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); font-weight: var(--font-weight-regular); color: var(--text-high); background-color: var(--bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt", "ss01"; transition: background-color var(--transition-base), color var(--transition-base); } /* Eliminar margen de elementos de bloque */ h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } /* Listas sin estilo por defecto cuando llevan role o clase utility */ ul[role="list"], ol[role="list"], ul.list-none, ol.list-none { list-style: none; padding: 0; } /* Imágenes responsive */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Inputs heredan la tipografía */ input, button, textarea, select { font: inherit; color: inherit; } /* Botones sin estilo nativo: los estilizamos luego */ button { background: none; border: none; padding: 0; cursor: pointer; } /* Texto largo sin desbordar */ p, li, figcaption, blockquote, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; } /* Tablas */ table { border-collapse: collapse; width: 100%; } /* ========================= TIPOGRAFÍA ========================= */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-weight-bold); color: var(--text-high); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } h1 { font-size: var(--text-4xl); font-weight: var(--font-weight-extrabold); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-mid); } p { color: var(--text-high); line-height: var(--leading-relaxed); } small { font-size: var(--text-xs); color: var(--text-mid); } strong, b { font-weight: var(--font-weight-semibold); color: var(--text-high); } em, i { font-style: italic; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } code { background-color: var(--bg-surface-2); color: var(--color-accent); padding: 0.1em 0.35em; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); } pre { background-color: var(--bg-surface); color: var(--text-high); padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; border: 1px solid var(--border-base); line-height: var(--leading-snug); } pre code { background: none; border: none; padding: 0; color: inherit; } hr { border: none; border-top: 1px solid var(--border-base); margin: var(--space-6) 0; } /* ========================= ENLACES ========================= */ a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; } a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* ========================= FOCUS VISIBLE GLOBAL ========================= */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ========================= SCROLLBAR (webkit) ========================= */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--bg-surface-2); border-radius: var(--radius-full); border: 2px solid var(--bg-base); } ::-webkit-scrollbar-thumb:hover { background: var(--bg-elevated); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--bg-surface-2) var(--bg-base); } /* ========================= SELECCIÓN DE TEXTO ========================= */ ::selection { background-color: var(--color-primary); color: var(--text-on-primary); } /* ========================= UTILIDADES BÁSICAS (solo las imprescindibles — el resto en app.css en Fase 2.3) ========================= */ .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; } .text-mono { font-family: var(--font-mono); } .text-display { font-family: var(--font-display); } .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } /* ========================= MOTION Respeta prefers-reduced-motion ========================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================= IMPRESIÓN ========================= */ @media print { body { background: white; color: black; } a { color: black; text-decoration: underline; } }