/* ========================================================= oktoberMESS — 1. TOKENS --------------------------------------------------------- EL ÚNICO ARCHIVO DEL PROYECTO CON COLORES LITERALES. Ningún componente (ni de cliente ni de staff) debe escribir un hex, un rgba ni un px de radio a mano: siempre var(--*). Si un color no existe aquí, se agrega aquí — no en el componente. ========================================================= */ :root { /* ── PALETA OKTOBERMESS 2026 ───────────────────────────── PRIMARIA. Valores EXACTOS del archivo de diseño del gafete (OktoberMess.svg), no estimados de una captura. Si algo aquí cambia, tiene que cambiar en ese archivo primero. */ --ok-navy: #001446; /* arco superior y barra de contacto */ --ok-azul-medio: #225AA5; /* "Nombre y Apellido" y el folio */ --ok-cian: #00B0F0; /* "Empresa" y las dos líneas del folio */ --ok-azul-url: #004580; /* "www.mess.com.mx" del pie */ --ok-cerveza: #74F2CE; /* acento menta eléctrico de la experiencia del evento */ --ok-crema: #EDFDF7; /* contraste frío para textos sobre azul */ --ok-vino: #FF5C8A; /* detalle neón, reservado para estados */ --ok-gris-slot: #E7E6E6; /* relleno de la ranura del lanyard */ --ok-borde-slot: #172C51; /* borde de la ranura */ --ok-blanco: #ffffff; --blanco-hover: #dfeaf7; /* botón blanco al pasar encima */ /* Derivados para las pantallas (no salen del gafete: el gafete es impresión sobre blanco, la app es oscura). Se construyen sobre el MISMO tono del navy del diseño. */ --ok-cian-claro: #4FC8F5; --ok-azul-brillo: #3DB7FF; --ok-azul: var(--ok-navy); --ok-azul-osc: #001033; --ok-azul-prof: #000B26; /* base de las pantallas oscuras */ --ok-gris: #6D6E71; /* "OKTOBER" del logotipo */ /* Degradado de acento. Va del cian del diseño al navy del diseño: los dos extremos son colores reales de la marca, no inventados. */ --ok-degradado: linear-gradient(90deg, #00B0F0 0%, #225AA5 55%, #001446 100%); /* ── Marca MESS (SECUNDARIA) ───────────────────────────── Solo para el logotipo institucional y para los estados semánticos que la paleta del evento no cubre (no hay verde ni rojo en la gráfica). No usar como color decorativo. */ --mess-azul: #050D9E; /* Pantone 072 C */ --mess-naranja: #EAAA00; /* Pantone 143 C — solo estado "pendiente" */ --mess-gris: var(--ok-gris); /* ── Superficies ────────────────────────────────────────── Toda la escala oscura sale del navy de la gráfica del evento, bajado de luminosidad. Por eso las pantallas se leen "OKTOBERMESS" y no como un dark mode genérico. */ --bg: var(--ok-azul-prof); --bg-degrade: linear-gradient(180deg, #000B26 0%, #000B26 34%, #06163d 100%); --card-bg: #0b1c34; /* panel / tarjeta */ --card-soft: #123245; /* franja de encabezado, filas alternas, inputs */ --card-hover: #19465a; --overlay: rgba(0, 11, 38, .82); /* backdrop de modales y visor de fotos */ --glass-bg: rgba(255, 255, 255, .12); /* cristal claro para secciones prioritarias */ --glass-border: rgba(255, 255, 255, .3); --blue-glow: rgba(61, 183, 255, .2); --logo-glow: rgba(61, 183, 255, .46); /* ── Bordes y separadores ─────────────────────────────── */ --border: #2d5a68; --border-soft: rgba(255, 255, 255, .08); --border-fuerte: #2b56a0; /* borde de campo enfocado / tabla del staff */ /* ── Texto ────────────────────────────────────────────── */ --text: #edfdf7; --text-muted: #a9c8c6; --text-suave: #8f9bae; /* placeholders, pies de página, deshabilitado */ --text-invert: var(--ok-azul-prof); /* sobre superficies claras */ /* ── Acento interactivo ───────────────────────────────── */ --accent: var(--ok-cerveza); --accent-dark: #36C49B; --accent-soft: rgba(116, 242, 206, .16); /* fondos suaves, chips, hovers */ --accent-line: rgba(116, 242, 206, .52); /* bordes de foco y de tarjeta */ /* ── Semánticos ───────────────────────────────────────── */ --success: #2ecc8f; --success-soft: rgba(46, 204, 143, .14); --warning: var(--ok-cerveza); --warning-soft: rgba(116, 242, 206, .15); --danger: #ef4f5e; --danger-soft: rgba(239, 79, 94, .16); --info: var(--ok-cian-claro); --info-soft: rgba(79, 200, 245, .16); /* ── Sombras y brillos ────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0, 6, 22, .45); --shadow-md: 0 .5rem 1.25rem rgba(0, 6, 22, .55); --shadow-lg: 0 1.25rem 2.5rem rgba(0, 6, 22, .65); --glow: 0 0 18px rgba(116, 242, 206, .38); /* halo neón del evento */ --glow-blanco: 0 0 22px rgba(255, 255, 255, .28); --sombra-barra: 0 -4px 16px rgba(0, 6, 22, .55); /* barras fijas al pie */ /* Líneas de la textura de circuito del logotipo (fondo del evento) */ --malla: rgba(116, 242, 206, .07); /* ── Tipografía ───────────────────────────────────────── */ /* Roboto es la fuente de todos los sistemas MESS. --font-display existe para poder cambiar SOLO los títulos en un lugar si el área de marketing pide otra familia para el evento. */ --font-base: 'Roboto', 'Segoe UI', Tahoma, sans-serif; --font-display: 'Roboto', 'Segoe UI', Tahoma, sans-serif; --fs-xs: .72rem; --fs-sm: .8rem; --fs-base: .9rem; /* mismo base que el resto de sistemas MESS */ --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fw-normal: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.2; --lh-base: 1.5; --ls-wide: .06em; /* rótulos en mayúsculas del backoffice */ --ls-xwide: .14em; /* "TECNOLOGÍAS DEL NORTE S.A. DE C.V." */ /* ── Espaciado (escala única para todo el proyecto) ────── */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; /* ── Radios ───────────────────────────────────────────── */ --r-sm: .375rem; --r-md: .625rem; --r-lg: 1rem; --r-xl: 1.25rem; --r-pill: 999px; /* ── Transiciones ─────────────────────────────────────── */ --t-rapida: .15s ease; --t-media: .25s ease; /* ── Layout ───────────────────────────────────────────── */ --cliente-max-w: 30rem; /* el móvil no crece más aunque se abra en PC */ --staff-rail-w: 4.5rem; /* barra de iconos del backoffice */ --staff-max-w: 80rem; /* ── Capas (z-index en un solo lugar, sin números mágicos) */ --z-base: 1; --z-sticky: 100; --z-rail: 900; --z-topbar: 1000; --z-backdrop: 1040; --z-modal: 1050; --z-toast: 1080; }