/* ========================================================= oktoberMESS — 2. BASE --------------------------------------------------------- Reset ligero, tipografía, fondo del evento, utilidades y el PUENTE CON BOOTSTRAP 5.3 (mapeo de variables --bs-*). ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* iOS no reescala al girar el teléfono */ scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; min-height: 100dvh; /* barra de direcciones de Safari/Chrome móvil */ background-color: var(--bg); color: var(--text); font-family: var(--font-base); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } /* El zoom automático de iOS al enfocar un input aparece cuando la fuente mide menos de 16px. El invitado llega por QR desde su celular: los campos van a 16px sí o sí. */ @media (max-width: 576px) { input, select, textarea { font-size: 16px; } } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--text); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; opacity: 1; } /* ===== Tipografía ======================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: var(--lh-tight); margin: 0 0 var(--sp-3); color: var(--text); } h1 { font-size: var(--fs-2xl); font-weight: var(--fw-black); } h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); } h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); } h4, h5, h6 { font-size: var(--fs-md); font-weight: var(--fw-bold); } p { margin: 0 0 var(--sp-3); } p:last-child { margin-bottom: 0; } /* Rótulo en mayúsculas: el "DATOS DEL CLIENTE DETECTADO" del backoffice y el nombre de la empresa en el móvil. */ .ok-rotulo { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); } /* "powered by MESS Intelligence" y pies de página */ .ok-pie { font-size: var(--fs-xs); color: var(--text-suave); text-align: center; } .ok-pie strong { color: var(--accent); font-weight: var(--fw-black); } /* ===== Fondo del evento ================================== El degradado azul con textura de circuito del diseño, hecho solo con CSS: no hay imagen que descargar (el invitado abre esto con el dato del celular, en una nave, y cada KB cuenta). Se aplica con . ========================================================= */ .ok-fondo { background-color: var(--bg); background-image: var(--bg-degrade); background-attachment: fixed; position: relative; } /* Malla técnica tenue por encima del degradado. pointer-events:none para que no bloquee ningún clic. */ .ok-fondo::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35; background-image: linear-gradient(var(--malla) 1px, transparent 1px), linear-gradient(90deg, var(--malla) 1px, transparent 1px); background-size: 46px 46px; /* La malla se desvanece hacia abajo para no competir con el contenido */ -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, transparent 70%); } /* Todo lo que va sobre el fondo necesita apilarse encima de ::before */ .ok-fondo > * { position: relative; z-index: var(--z-base); } /* ===== Utilidades ========================================= Solo las que se repiten de verdad. Para el resto se usan las de Bootstrap (d-flex, gap-2, mb-3, text-center…), que ya están cargadas: no las duplicamos aquí. ========================================================= */ .ok-muted { color: var(--text-muted); } .ok-suave { color: var(--text-suave); } .ok-acento { color: var(--accent); } .ok-exito { color: var(--success); } .ok-peligro { color: var(--danger); } .ok-xs { font-size: var(--fs-xs); } .ok-sm { font-size: var(--fs-sm); } .ok-lg { font-size: var(--fs-lg); } .ok-centro { text-align: center; } /* Contenedor del móvil: centrado y con tope de ancho, para que la landing del QR no se deforme si alguien la abre en la PC. */ .ok-contenedor { width: 100%; max-width: var(--cliente-max-w); margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 768px) { .ok-contenedor { width: 66.666667%; max-width: none; } } /* Solo para lectores de pantalla (etiquetas de campos sin label visible) */ .ok-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Oculta sin pelearse con display:flex de Bootstrap */ [hidden] { display: none !important; } /* ===== Accesibilidad ===================================== Un foco visible y consistente en todo el sistema. Se usa :focus-visible para que el halo salga con teclado pero no al tocar con el dedo. ========================================================= */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } /* Respeta a quien pidió menos movimiento en su sistema operativo */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ===== Scrollbar (Webkit) ================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ========================================================= PUENTE BOOTSTRAP 5.3 --------------------------------------------------------- Se reasignan las variables de Bootstrap a los tokens del evento. El debe llevar data-bs-theme="dark" para que Bootstrap active sus propios ajustes oscuros (bordes de inputs, close-button invertido, dropdowns). NO agregar aquí overrides de componentes concretos: esos van en componentes.css, sección "Ajustes a Bootstrap". ========================================================= */ :root, [data-bs-theme="dark"] { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-body-font-family: var(--font-base); --bs-body-font-size: var(--fs-base); --bs-emphasis-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-tertiary-color: var(--text-suave); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border-soft); --bs-border-radius: var(--r-md); --bs-border-radius-sm: var(--r-sm); --bs-border-radius-lg: var(--r-lg); --bs-border-radius-xl: var(--r-xl); /* OJO: Bootstrap necesita los canales SUELTOS (los usa dentro de rgba(var(--bs-*-rgb), .5)), y CSS no sabe descomponer un hex. Son los ÚNICOS colores duplicados fuera de tokens.css: si cambias --ok-cian o --ok-cian-claro, actualiza también estos. */ --bs-primary: var(--accent); --bs-primary-rgb: 116, 242, 206; --bs-success: var(--success); --bs-success-rgb: 46, 204, 143; --bs-warning: var(--warning); --bs-warning-rgb: 116, 242, 206; --bs-danger: var(--danger); --bs-danger-rgb: 239, 79, 94; --bs-info: var(--info); --bs-info-rgb: 79, 200, 245; --bs-link-color: var(--accent); --bs-link-hover-color: var(--text); --bs-card-bg: var(--card-bg); --bs-modal-bg: var(--card-bg); --bs-modal-color: var(--text); --bs-box-shadow: var(--shadow-md); --bs-box-shadow-sm: var(--shadow-sm); --bs-box-shadow-lg: var(--shadow-lg); }