/* =========================================================================== RIFARIO — Design tokens =========================================================================== Fuente de verdad del sistema visual. Ningún componente escribe un color, un espaciado o un radio literal: todo sale de aquí. Si un valor hace falta en dos sitios, es un token; si hace falta en uno, probablemente esté mal. ADN extraído del logo oficial: · azul royal #1b5ef3 el cuerpo del isotipo → acción, selección, foco · azul tinta #0f2350 el wordmark → texto, jerarquía · cyan #22d3ee los puntos → señal, estado, acento Reparto de color deliberado (≈70 / 20 / 10): · 70 % neutros, blanco y espacio · 20 % azul Rifario, y solo donde hay una acción o un estado activo · 10 % cyan, como SEÑAL — nunca como relleno decorativo La interfaz es plana a propósito: sin degradados decorativos, sin cristal, sin brillos. La jerarquía la dan el espacio, el contraste y el borde; la sombra es el último recurso, no el primero. =========================================================================== */ :root { /* --- Marca ------------------------------------------------------------- */ --brand-primary: #1b5ef3; --brand-primary-hover: #1550d8; --brand-primary-active: #1143b8; --brand-primary-soft: #eaf1fe; /* fondo de estado, chips, hover de celda */ --brand-primary-border: #c2d7fd; --brand-accent: #22d3ee; --brand-accent-hover: #0fbcd6; --brand-accent-soft: #e4fafe; --brand-ink: #0f2350; /* el navy del wordmark */ --on-brand: #ffffff; /* Alias del tema. La página pública de una rifa sobrescribe `--primary` con el color que haya elegido su organizador; todo lo demás se recalcula solo. */ --primary: var(--brand-primary); --primary-hover: var(--brand-primary-hover); --primary-active: var(--brand-primary-active); --primary-soft: var(--brand-primary-soft); --on-primary: var(--on-brand); /* --- Neutros ----------------------------------------------------------- Con sesgo azul, no grises puros: un gris neutro junto a un azul saturado se ve sucio, y el conjunto deja de parecer elegido. */ --background: #f7f9fc; --surface: #ffffff; --surface-secondary: #f1f5fb; --surface-sunk: #eef3fa; --text-primary: #0f2350; --text-secondary: #47547a; --text-muted: #6d789b; --text-onDark: #eef2fb; --border: #e3e9f4; --border-strong: #c8d3e6; /* --- Semánticos -------------------------------------------------------- Separados del acento a propósito: el cyan es marca, el verde es "salió bien". Mezclarlos deja al usuario sin saber si un color significa algo. */ --success: #15803d; --success-soft: #e8f6ed; --warning: #b45309; --warning-soft: #fdf3e6; --danger: #c02626; --danger-soft: #fdeced; --info: var(--brand-primary); --info-soft: var(--brand-primary-soft); /* --- Estados de un número ---------------------------------------------- Semáforo, que es como la gente lee un talonario sin mirar la leyenda: VERDE se puede, AMARILLO está en proceso, ROJO ya no. Una asimetría deliberada: DISPONIBLE es lo único que NO lleva relleno saturado. Es el estado mayoritario —en una rifa de 2.000 números son 2.000 celdas— y pintarlas todas de verde neón crearía una pared de color donde ni lo vendido ni la propia selección del usuario destacarían. En su lugar lleva tinte verde claro + BORDE verde vivo de 2px + número verde oscuro: lee verde sin inundar. Los estados ocupados sí van rellenos, porque son la minoría y son justo lo que hay que localizar de un vistazo. Ningún estado depende SOLO del color. Rojo y verde son la pareja que peor distingue una persona con daltonismo (~8% de los hombres), así que cada estado cambia también el relleno, el color del número, el grosor o el estilo del borde, y además cada celda lleva su estado escrito en `title`. Contraste comprobado contra WCAG AA (4.5:1) en cada pareja fondo/texto: por eso el naranja y el amarillo llevan número OSCURO y no blanco — blanco sobre naranja da 2.8:1 y es ilegible al tamaño de estas celdas. */ --num-available-bg: #eafff4; --num-available-border: #00c853; /* verde vivo: el borde es lo que "pinta" el verde */ --num-available-text: #046c3b; --num-hover-bg: var(--brand-primary-soft); --num-hover-border: var(--brand-primary-border); --num-selected-bg: var(--primary); --num-selected-text: var(--on-primary); --num-reserved-bg: #ffc400; /* amarillo vivo — apartado, aún puede caducar */ --num-reserved-text: #3d2c00; /* Violeta, NO azul: el azul de marca es "lo has elegido tú" (--num-selected-bg) y aparece además en cada botón del producto. Con "pago en revisión" también azul, en el talonario público la celda que el participante acaba de tocar y la que está esperando que alguien apruebe un pago se veían exactamente igual. */ --num-review-bg: #7c3aed; --num-review-text: #ffffff; --num-assigned-bg: #ff6d00; /* naranja vivo — lo tiene un rifador, fuera del pool */ --num-assigned-text: #2b1400; --num-paid-bg: #de2910; /* rojo chino — vendido, ya no se puede */ --num-paid-text: #ffffff; --num-blocked-bg: #64748b; /* gris pizarra + borde discontinuo */ --num-blocked-text: #ffffff; --num-winner-bg: var(--brand-ink); --num-winner-text: #ffd400; /* oro sobre casi negro: la única celda oscura */ /* --- Tipografía --------------------------------------------------------- Pila del sistema, no una fuente web. Motivo técnico, no estético: la CSP del producto es `default-src 'self'` y cargar Google Fonts obligaría a abrirla a un origen externo, además de meter una petición bloqueante y un salto de tipografía en la primera carga. La pila del sistema da en cada plataforma la interfaz nativa moderna (SF Pro, Segoe UI Variable, Roboto), que es exactamente el registro que pide la marca. */ --font-sans: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, monospace; --text-display: 40px; --text-h1: 30px; --text-h2: 22px; --text-h3: 18px; --text-h4: 16px; --text-body: 15px; --text-small: 13.5px; --text-label: 13px; --text-caption: 12px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.2; --leading-snug: 1.35; --leading-body: 1.55; /* --- Espaciado: escala de 4 -------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* --- Radios ------------------------------------------------------------- Diferenciados por rol. Todo con el mismo radio aplana la jerarquía y, si es grande, el producto se vuelve infantil. */ --radius-sm: 6px; /* celdas de número, chips */ --radius-md: 10px; /* inputs, botones */ --radius-lg: 14px; /* tarjetas */ --radius-xl: 20px; /* modales, superficies grandes */ --radius-full: 999px; /* --- Sombras: dos, y solo para elevar de verdad ------------------------- */ --shadow-sm: 0 1px 2px rgb(15 35 80 / 6%); --shadow-md: 0 8px 24px rgb(15 35 80 / 10%); /* --- Movimiento --------------------------------------------------------- */ --motion-fast: 150ms; --motion-base: 200ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); /* --- Capas -------------------------------------------------------------- */ --z-sticky: 20; --z-nav: 40; --z-drawer: 60; --z-modal: 80; --z-toast: 100; /* --- Áreas seguras (PWA en modo standalone) ----------------------------- */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --header-h: 64px; --bottombar-h: 68px; color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } /* El atributo `hidden` tiene que ganar SIEMPRE. Por defecto solo aplica `display: block` con la especificidad más baja del navegador, así que cualquier `display: flex` o `grid` de un componente lo anula en silencio y el elemento se ve pese a estar marcado como oculto. Es un fallo que no da error en consola y solo se detecta mirando la pantalla. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--background); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow-x: hidden; } img, svg { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--brand-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--brand-primary-hover); } h1, h2, h3, h4 { color: var(--text-primary); line-height: var(--leading-tight); letter-spacing: -0.015em; text-wrap: balance; } /* Foco visible SIEMPRE. Se estiliza, nunca se quita: quitarlo deja el producto inutilizable con teclado y es la regresión de accesibilidad más común. */ :focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: var(--radius-sm); } @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; } } .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; }