/* ========================================================================= Megalabs Quiz · Design Tokens ------------------------------------------------------------------------- Fuente de verdad de color, tipografía, espacio, radios, sombras y motion. Todo componente consume variables de este archivo. Ningún valor literal de color, tamaño de fuente o duración aparece en otro CSS. Origen de la paleta: · El verde institucional y el gris salen del logo de Megalabs, muestreados píxel a píxel: #008063, #009640 y #7A8991. · El magenta sale del logo de Línea Diabetes: #EC0677. · La escala de verde petróleo del fondo y el ámbar del "¡Casi!" salen del boceto que aprobó el cliente (docs-mega/desafio-megalabs.html). Ratios de contraste WCAG 2.1 verificados — ver design/palette.json. Cargar SIEMPRE primero: ========================================================================= */ :root { /* ===================================================================== 1. COLOR · Verde petróleo — el fondo de todo el juego ===================================================================== */ --petrol-950: #021D1A; --petrol-900: #032824; /* brand — fondo más profundo del degradado */ --petrol-800: #053C34; /* brand — FONDO BASE del juego */ --petrol-700: #075045; /* brand — superficies elevadas */ --petrol-600: #0A6B5B; --petrol-500: #0E8477; --petrol-400: #2FA294; /* 2. COLOR · Verde institucional Megalabs */ --verde-300: #8FE5AC; --verde-400: #5FD584; /* brand — acentos sobre fondo oscuro (6.66:1) */ --verde-500: #22B24C; /* brand — verde vivo del boceto */ --verde-600: #158E3E; --verde-700: #0E7C36; /* el más claro que aguanta texto blanco (5.31:1) */ --verde-800: #0A6B2E; /* 3. COLOR · Teal institucional (isotipo Megalabs) */ --teal-400: #2FBFA4; --teal-500: #00967D; /* brand — teal del boceto */ --teal-600: #008063; /* BRAND — verde del logo Megalabs */ --teal-700: #00705A; --teal-800: #045C4A; /* 4. COLOR · Magenta de Línea Diabetes. Solo identidad de línea: badges y el logo. NUNCA para estados. */ --linea-300: #F999C0; --linea-500: #EC0677; /* brand — logo Línea Diabetes */ --linea-700: #B80A5E; /* 5. COLOR · Neutros (derivados del gris del wordmark Megalabs) */ --ink-50: #F7FAF9; --ink-100: #F2F6F4; --ink-200: #E4EAE8; --ink-300: #C8D2CF; --ink-400: #B9C4C1; --ink-500: #7A8991; /* brand — gris del wordmark Megalabs */ --ink-600: #4A5551; --ink-700: #333C39; --ink-800: #232B29; --ink-900: #1A211F; --white: #FFFFFF; /* 6. COLOR · Semánticos El ámbar del "¡Casi!" no es un rojo a propósito: el RFP pide que el error nunca suene a castigo, y ese mensaje es el que más se ve en el evento. */ --exito: var(--verde-400); --exito-800: var(--verde-800); --casi: #F5C453; /* del boceto · 7.58:1 sobre el fondo */ --casi-900: #4A3608; --error: #FF8A73; /* solo para fallos del sistema, no del juego */ --error-600: #C4452C; /* ===================================================================== 7. ROLES SEMÁNTICOS · lo único que consumen los componentes ===================================================================== */ --bg: var(--petrol-800); /* Tres capas, como el boceto: dos resplandores encima del degradado base. Es lo que el cliente pidió conservar — "los degradados/difuminados". */ --bg-gradient: radial-gradient(ellipse 70% 55% at 15% 12%, rgba(34, 178, 76, 0.16), transparent 70%), radial-gradient(ellipse 65% 60% at 88% 82%, rgba(0, 150, 125, 0.20), transparent 70%), linear-gradient(160deg, var(--petrol-900) 0%, var(--petrol-800) 55%, var(--petrol-700) 100%); --surface: var(--petrol-700); --surface-raised: rgba(255, 255, 255, 0.07); --surface-sunken: rgba(0, 0, 0, 0.22); --border: rgba(255, 255, 255, 0.14); --border-fuerte: rgba(255, 255, 255, 0.30); --text: var(--white); /* 12.34:1 sobre --bg */ --text-secondary: var(--ink-200); /* 11.32:1 */ --text-tertiary: var(--ink-400); /* 6.89:1 */ --text-on-accent: var(--white); --accent: var(--verde-400); --accent-fuerte: var(--verde-700); --focus-ring: var(--verde-300); /* ⚠️ El degradado de los botones NO va de --verde-500 a --teal-500 como el boceto: el blanco sobre #22B24C da 2.78:1 y no llega ni al 3:1 que pide el texto grande. Se oscurecen los dos extremos hasta que el peor punto del degradado aguanta el texto: --verde-700 da 5.31:1 y --teal-600 4.92:1. A tres metros de la TV esto no es un detalle formal. */ --gradiente-cta: linear-gradient(120deg, var(--verde-700), var(--teal-600)); --gradiente-cta-hover: linear-gradient(120deg, var(--verde-600), var(--teal-500)); --gradiente-letra: linear-gradient(135deg, var(--petrol-600), var(--teal-500)); /* ===================================================================== 8. TIPOGRAFÍA ===================================================================== */ /* RFP §5: Barlow como institucional, Manrope —más pesada— para los títulos. ⚠️ --emoji va en la cola de las dos familias: las fuentes subseteadas al español no traen glifos de emoji y el 🎉 del cierre se dibuja como un cuadrito vacío sin que ningún error lo delate. */ --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif, var(--emoji); --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif, var(--emoji); --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Escala fluida. Las pendientes están calculadas para alcanzar su máximo exactamente a 1920px, que es el ancho real de la TV del evento. ⚠️ Verificá el valor renderizado en el navegador, no el comentario. */ --step--2: clamp(0.75rem, 0.71rem + 0.21vw, 0.875rem); /* 12 → 14 */ --step--1: clamp(0.875rem, 0.80rem + 0.36vw, 1.125rem); /* 14 → 18 */ --step-0: clamp(1rem, 0.86rem + 0.71vw, 1.5rem); /* 16 → 24 */ --step-1: clamp(1.25rem, 1.00rem + 1.25vw, 2.125rem); /* 20 → 34 */ --step-2: clamp(1.5rem, 1.07rem + 2.14vw, 3rem); /* 24 → 48 */ --step-3: clamp(1.875rem, 1.16rem + 3.57vw, 4.375rem); /* 30 → 70 */ --step-4: clamp(2.25rem, 1.11rem + 5.71vw, 6rem); /* 36 → 96 */ --step-5: clamp(2.75rem, 0.96rem + 8.93vw, 9rem); /* 44 → 144 */ --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-bold: 700; --peso-black: 800; --alto-titulo: 1.04; --alto-texto: 1.45; --track-titulo: -0.02em; --track-eyebrow: 0.18em; /* ===================================================================== 9. ESPACIO ===================================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem; --space-12: 8rem; --gutter: clamp(1.25rem, 4vw, 5rem); /* ===================================================================== 10. ÁREAS TÁCTILES ===================================================================== */ /* Contra --vh, que publica kiosk.js desde visualViewport, y no contra el vh de CSS: en iPadOS el vh de CSS incluye la barra del navegador y el último botón queda debajo del borde de la pantalla. */ --touch-min: 44px; --touch-comfy: 64px; --touch-tablet: clamp(96px, calc(var(--vh, 1vh) * 13), 190px); --touch-cta: clamp(72px, calc(var(--vh, 1vh) * 9), 128px); --touch-gap: clamp(0.75rem, 1.6vh, 1.5rem); /* ===================================================================== 11. RADIOS · el boceto es de esquinas muy redondeadas ===================================================================== */ --radio-sm: 10px; --radio-md: 18px; --radio-lg: 28px; --radio-xl: 40px; --radio-full: 999px; /* ===================================================================== 12. SOMBRAS · teñidas de verde, nunca negro puro ===================================================================== */ --sombra-sm: 0 2px 8px rgba(2, 29, 26, 0.30); --sombra-md: 0 10px 28px rgba(2, 29, 26, 0.38); --sombra-lg: 0 18px 48px rgba(2, 29, 26, 0.46); --sombra-flotante: 0 18px 24px rgba(0, 0, 0, 0.35); --glow-exito: 0 0 44px rgba(95, 213, 132, 0.45); --glow-cta: 0 12px 40px rgba(14, 124, 54, 0.45); --glow-casi: 0 0 40px rgba(245, 196, 83, 0.35); /* ===================================================================== 13. MOTION ===================================================================== */ --dur-instant: 90ms; --dur-fast: 180ms; --dur-normal: 300ms; --dur-slow: 450ms; --dur-slower: 700ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Tiempos de la máquina de estados. Los del servidor mandan; estos son para que la animación acompañe y no se corte a la mitad. */ --t-pantalla: 450ms; --t-flote: 6s; /* ===================================================================== 14. CAPAS ===================================================================== */ --z-fondo: 0; --z-flotantes: 1; --z-contenido: 10; --z-header: 20; --z-overlay: 40; --z-toast: 60; --z-dev: 90; } /* =========================================================================== TEMA DEL PANEL · fondo claro. Solo se redefinen los roles semánticos; la escala de arriba no se toca. =========================================================================== */ [data-theme='admin'] { --bg: #F4F7F6; --bg-gradient: none; --surface: var(--white); --surface-raised: var(--white); --surface-sunken: var(--ink-100); --border: var(--ink-200); --border-fuerte: var(--ink-300); --text: var(--ink-900); /* 16.39:1 sobre blanco */ --text-secondary: var(--ink-600); /* 7.75:1 */ --text-tertiary: var(--ink-500); --text-on-accent: var(--white); --accent: var(--teal-600); /* 4.92:1 sobre blanco */ --accent-fuerte: var(--teal-700); --focus-ring: var(--teal-500); --exito: var(--verde-700); --casi: #A5730B; --error: var(--error-600); } /* =========================================================================== Menos movimiento. El fondo con productos flotando es lo primero que se apaga: es decorativo y es lo que más se mueve en toda la pantalla. =========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-normal: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; --t-pantalla: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }