/* ============================================================ FLYING CUQUIS — DESIGN TOKENS (Sistema J) Versión: 1.0 · Fecha: 29 junio 2026 Uso: importar en el antes de cualquier otro CSS ============================================================ */ :root { /* ---------------------------------------------------------- COLORES BASE ---------------------------------------------------------- */ /* Fondo principal — negro profundo con toque azulado frío */ --fc-bg: #0A0A0F; /* Superficies elevadas (cards, panel, modales) */ --fc-surface-1: #13131A; /* +1 nivel sobre el fondo */ --fc-surface-2: #1C1C26; /* +2 niveles — inputs, filas hover */ --fc-border: rgba(240, 100, 0, 0.15); /* borde sutil naranja */ --fc-border-blue: rgba(0, 168, 232, 0.15); /* borde sutil azul */ /* ---------------------------------------------------------- ACENTOS ---------------------------------------------------------- */ /* Naranja FC — acento primario, CTAs, highlights */ --fc-orange: #F06400; --fc-orange-hover: #D45800; /* estado hover — 15% más oscuro */ --fc-orange-glow: rgba(240, 100, 0, 0.25); /* sombra/glow difuso */ --fc-orange-subtle: rgba(240, 100, 0, 0.10); /* fondo tintado suave */ /* Azul eléctrico — acento secundario, HUD, iconos, líneas */ --fc-blue: #00A8E8; --fc-blue-hover: #0090C8; --fc-blue-glow: rgba(0, 168, 232, 0.25); --fc-blue-subtle: rgba(0, 168, 232, 0.10); /* Dorado — uso puntual: medalla de Oro (Palmarés/línea temporal). Metal real, no amarillo puro, para leer junto a plata/bronce como el mismo trío de medalla en vez de un acento nuevo. */ --fc-gold: #D4AF37; --fc-gold-glow: rgba(212, 175, 55, 0.35); /* Rojo — alerta/estado negativo (ej. badge "Finalizado" en Camps & Events). No se usa en ningún otro sitio de Sistema J hoy: reservado a propósito para esto, así destaca por contraste puro contra el naranja/azul del resto de la identidad en vez de competir con ellos. */ --fc-red: #FF3B3B; --fc-red-hover: #E22F2F; --fc-red-glow: rgba(255, 59, 59, 0.35); --fc-red-subtle: rgba(255, 59, 59, 0.12); /* ---------------------------------------------------------- TEXTO ---------------------------------------------------------- */ --fc-text-primary: #F0EDE8; /* blanco roto cálido — cuerpo principal */ --fc-text-secondary: #8A8A9A; /* gris azulado — metadatos, labels */ --fc-text-disabled: #4A4A5A; /* texto inactivo */ --fc-text-on-orange: #FFFFFF; /* texto sobre fondo naranja */ --fc-text-on-blue: #FFFFFF; /* texto sobre fondo azul */ /* ---------------------------------------------------------- TIPOGRAFÍA ---------------------------------------------------------- */ /* Familias — importar desde Google Fonts en el HTML: Carter One · Barlow Condensed · DM Sans */ --fc-font-display: 'Carter One', serif; /* títulos principales */ --fc-font-data: 'Barlow Condensed', sans-serif; /* números, datos */ --fc-font-body: 'DM Sans', sans-serif; /* cuerpo de texto */ /* Escala tipográfica */ --fc-text-xs: 0.75rem; /* 12px — labels HUD, metadatos */ --fc-text-sm: 0.875rem; /* 14px — texto secundario */ --fc-text-base: 1rem; /* 16px — cuerpo */ --fc-text-lg: 1.125rem; /* 18px — subtítulos */ --fc-text-xl: 1.375rem; /* 22px — títulos sección */ --fc-text-2xl: 1.75rem; /* 28px — títulos grandes */ --fc-text-3xl: 2.25rem; /* 36px — hero subtítulo */ --fc-text-4xl: 3rem; /* 48px — hero título */ --fc-text-5xl: 4rem; /* 64px — hero display */ /* ---------------------------------------------------------- ESPACIADO (escala 4px) ---------------------------------------------------------- */ --fc-space-1: 0.25rem; /* 4px */ --fc-space-2: 0.5rem; /* 8px */ --fc-space-3: 0.75rem; /* 12px */ --fc-space-4: 1rem; /* 16px */ --fc-space-5: 1.25rem; /* 20px */ --fc-space-6: 1.5rem; /* 24px */ --fc-space-8: 2rem; /* 32px */ --fc-space-10: 2.5rem; /* 40px */ --fc-space-12: 3rem; /* 48px */ --fc-space-16: 4rem; /* 64px */ --fc-space-20: 5rem; /* 80px */ --fc-space-24: 6rem; /* 96px */ /* ---------------------------------------------------------- BORDES Y RADIOS ---------------------------------------------------------- */ --fc-radius-sm: 4px; --fc-radius-md: 8px; --fc-radius-lg: 12px; --fc-radius-xl: 16px; --fc-radius-full: 9999px; /* pills, badges */ --fc-border-width: 1px; /* ---------------------------------------------------------- SOMBRAS Y GLOWS ---------------------------------------------------------- */ /* Glow naranja — botones primarios, títulos destacados */ --fc-shadow-orange: 0 0 20px rgba(240, 100, 0, 0.30), 0 0 60px rgba(240, 100, 0, 0.10); /* Glow azul — elementos HUD, fuente de luz atmosférica */ --fc-shadow-blue: 0 0 20px rgba(0, 168, 232, 0.25), 0 0 60px rgba(0, 168, 232, 0.08); /* Glow rojo — mismo criterio de intensidad que --fc-shadow-orange (elemento destacado), en rojo de alerta */ --fc-shadow-red: 0 0 20px rgba(255, 59, 59, 0.30), 0 0 60px rgba(255, 59, 59, 0.10); /* Glow título hero — naranja difuso en texto */ --fc-text-glow-orange: 0 0 30px rgba(240, 100, 0, 0.40), 0 0 80px rgba(240, 100, 0, 0.15); /* Glow título — variante azul, mismo criterio que --fc-text-glow-orange */ --fc-text-glow-blue: 0 0 30px rgba(0, 168, 232, 0.40), 0 0 80px rgba(0, 168, 232, 0.15); /* Sombra de superficie (cards) */ --fc-shadow-surface: 0 1px 3px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.30); /* ---------------------------------------------------------- EFECTOS HUD ---------------------------------------------------------- */ /* Líneas láser diagonales — usar como background o pseudo-elemento */ --fc-laser-orange: rgba(240, 100, 0, 0.28); --fc-laser-blue: rgba(0, 168, 232, 0.28); --fc-laser-width: 1px; /* grosor estándar línea láser */ /* Viñeta — colapsa los bordes al fondo oscuro */ --fc-vignette: radial-gradient( ellipse at center, transparent 50%, rgba(10, 10, 15, 0.70) 100% ); /* Fuente de luz azul — esquina inferior-izquierda */ --fc-light-source: radial-gradient( ellipse 60% 40% at 0% 100%, rgba(0, 168, 232, 0.12) 0%, transparent 70% ); /* Fuente de luz naranja — esquina superior-derecha */ --fc-light-source-orange: radial-gradient( ellipse 55% 45% at 100% 0%, rgba(240, 100, 0, 0.09) 0%, transparent 70% ); /* ---------------------------------------------------------- TRANSICIONES ---------------------------------------------------------- */ --fc-transition-fast: 150ms ease; --fc-transition-base: 250ms ease; --fc-transition-slow: 400ms ease; /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --fc-max-width: 1200px; /* ancho máximo del contenedor */ --fc-max-width-content: 800px; /* ancho máximo texto/secciones */ --fc-padding-x: 1.5rem; /* padding lateral mobile */ --fc-padding-x-lg: 2.5rem; /* padding lateral desktop */ /* ---------------------------------------------------------- Z-INDEX ---------------------------------------------------------- */ --fc-z-base: 1; --fc-z-raised: 10; --fc-z-dropdown: 100; --fc-z-toast: 300; --fc-z-nav: 400; --fc-z-modal: 500; /* ---------------------------------------------------------- ESTADOS DE RESERVA (panel admin) ---------------------------------------------------------- */ --fc-status-pending-bg: rgba(240, 180, 0, 0.12); --fc-status-pending-text: #F0B400; --fc-status-pending-border:rgba(240, 180, 0, 0.30); --fc-status-confirmed-bg: rgba(0, 168, 232, 0.12); --fc-status-confirmed-text: #00A8E8; --fc-status-confirmed-border:rgba(0, 168, 232, 0.30); --fc-status-done-bg: rgba(0, 200, 100, 0.12); --fc-status-done-text: #00C864; --fc-status-done-border:rgba(0, 200, 100, 0.30); --fc-status-cancelled-bg: rgba(138, 138, 154, 0.12); --fc-status-cancelled-text: #8A8A9A; --fc-status-cancelled-border:rgba(138, 138, 154, 0.30); } /* ============================================================ RESET BASE — aplicar junto con los tokens ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--fc-bg); color: var(--fc-text-primary); font-family: var(--fc-font-body); font-size: var(--fc-text-base); line-height: 1.6; min-height: 100vh; /* Fuente de luz atmosférica permanente — azul inferior-izquierda + naranja superior-derecha */ background-image: var(--fc-light-source-orange), var(--fc-light-source); background-attachment: fixed; } /* ---------------------------------------------------------- CLASES DE UTILIDAD — HUD y efectos Sistema J ---------------------------------------------------------- */ /* Contenedor con viñeta */ .fc-vignette { position: relative; } .fc-vignette::after { content: ''; position: absolute; inset: 0; background: var(--fc-vignette); pointer-events: none; } /* Crosshair HUD — esquina superior-izquierda. Los offsets del lado contrario se anclan explícitamente a auto: los pseudo-elementos cascadean propiedad a propiedad como cualquier elemento, así que si otra regla del mismo elemento declara antes un inset completo (p. ej. .fc-vignette::after { inset: 0 }), sus top/left sobreviven aquí y la caja queda sobre-restringida — ganan top+height y left+width, y el crosshair se pinta en la esquina equivocada pegado al borde. Anclarlos a auto hace la clase inmune a ese arrastre. En elementos que no combinan clases esto es un no-op: ya valían auto. */ .fc-hud-corner::before { content: ''; position: absolute; top: 12px; left: 12px; right: auto; bottom: auto; width: 16px; height: 16px; border-top: 1px solid var(--fc-blue); border-left: 1px solid var(--fc-blue); opacity: 0.6; } /* Crosshair HUD — esquina inferior-derecha. Mismo anclaje a auto que ::before, y además background: none — de .fc-vignette::after también se arrastraba el degradado de viñeta, que acababa pintado dentro del cuadrado de 16px del crosshair en vez de sobre la tarjeta entera. */ .fc-hud-corner::after { content: ''; position: absolute; top: auto; left: auto; bottom: 12px; right: 12px; width: 16px; height: 16px; border-bottom: 1px solid var(--fc-blue); border-right: 1px solid var(--fc-blue); background: none; opacity: 0.6; } /* Texto con glow naranja */ .fc-glow-title { text-shadow: var(--fc-text-glow-orange); } /* Línea decorativa naranja */ .fc-line-orange { display: block; height: 1px; background: linear-gradient( 90deg, transparent 0%, var(--fc-orange) 50%, transparent 100% ); opacity: 0.4; } /* Línea decorativa azul */ .fc-line-blue { display: block; height: 1px; background: linear-gradient( 90deg, transparent 0%, var(--fc-blue) 50%, transparent 100% ); opacity: 0.4; } /* Línea decorativa "estela" — degradado naranja→azul en vez de un solo color, para separadores con icono de línea (avión, etc.) que sugieren recorrido/movimiento en vez de un simple filete centrado. Cada color ocupa un tramo propio (10%-45% naranja puro, 55%-90% azul puro) con una mezcla corta en el centro — un degradado continuo de extremo a extremo diluye demasiado el naranja contra los glows cálidos que ya tiene el fondo de la página, y deja de leerse como "naranja". height: 2px + scaleY(0.5) en vez de height: 1px directo — confirmado con Mario que a ciertos zooms del navegador (90%, 75%) un hairline de 1px redondea a 0px de dispositivo y la línea desaparece. Con 2px reales el navegador siempre rasteriza una geometría por encima del umbral de colapso, y el compositor la reduce visualmente después, ya renderizada — la línea no puede volver a desaparecer por escalado fraccionario. Solo aquí: .fc-line-orange y .fc-line-blue son reglas independientes (sin base compartida) y no se han tocado. */ .fc-line-trail { display: block; height: 2px; transform: scaleY(0.5); transform-origin: center; background: linear-gradient( 90deg, transparent 0%, var(--fc-orange) 10%, var(--fc-orange) 45%, var(--fc-blue) 55%, var(--fc-blue) 90%, transparent 100% ); opacity: 0.85; } /* Label HUD — datos técnicos decorativos */ .fc-hud-label { font-family: var(--fc-font-data); font-size: var(--fc-text-xs); color: var(--fc-blue); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; } /* Botón primario */ .fc-btn-primary { display: inline-flex; align-items: center; gap: var(--fc-space-2); padding: var(--fc-space-3) var(--fc-space-6); background: var(--fc-orange); color: var(--fc-text-on-orange); font-family: var(--fc-font-display); font-size: var(--fc-text-base); font-weight: 700; border: none; border-radius: var(--fc-radius-md); cursor: pointer; transition: background var(--fc-transition-fast), box-shadow var(--fc-transition-fast); text-decoration: none; } .fc-btn-primary:hover { background: var(--fc-orange-hover); box-shadow: var(--fc-shadow-orange); } /* Botón secundario (outline azul) */ .fc-btn-secondary { display: inline-flex; align-items: center; gap: var(--fc-space-2); padding: var(--fc-space-3) var(--fc-space-6); background: transparent; color: var(--fc-blue); font-family: var(--fc-font-display); font-size: var(--fc-text-base); font-weight: 700; border: 1px solid var(--fc-blue); border-radius: var(--fc-radius-md); cursor: pointer; transition: background var(--fc-transition-fast), box-shadow var(--fc-transition-fast); text-decoration: none; } .fc-btn-secondary:hover { background: var(--fc-blue-subtle); box-shadow: var(--fc-shadow-blue); } /* ============================================================ FONDO NEBULOSA — PRUEBA Para revertir: borrar este bloque completo. No modifica la regla `body` original de arriba — solo la sobreescribe en cascada (misma especificidad, gana por orden de aparición), así que quitar este bloque restaura el fondo original sin tocar nada más. Capas nuevas inspiradas en el póster de Gravity Brake (estrellas, nebulosa, sensación de espacio), aplicadas a TODAS las páginas via el body compartido. Orden de atrás hacia adelante: estrellas → nebulosa → líneas diagonales → --fc-light-source (sin cambios, se reutiliza tal cual) → viñeta (existente por elemento, no afectada) → contenido. El ángulo de las líneas diagonales se calcula en vivo con atan2(100vh, -100vw): da el ángulo del gradiente perpendicular a la diagonal real del viewport, así que las bandas de color quedan SIEMPRE paralelas a la diagonal esquina-a-esquina, sea cual sea el ancho/alto de pantalla — sin media queries ni JS. Las líneas viven en su propio body::before (no en el background-image de abajo) porque necesitan un mask-image propio para el fundido — así el mask no afecta a estrellas/nebulosa. Equivalente en CSS puro al linearGradient+stroke de SVG que describe el fundido a lo largo de la línea (mismo resultado visual: 0% opacidad en la esquina, 0.5 en el centro, 0% en la esquina opuesta), sin tener que insertar SVG en cada página. ============================================================ */ body { --fc-diagonal-angle: atan2(100vh, -100vw); background-image: /* 1-2. --fc-light-source ya existente, intacto */ var(--fc-light-source-orange), var(--fc-light-source), /* 3-4. nebulosa — dos manchas muy tenues */ radial-gradient(ellipse 55% 45% at 80% 60%, rgba(240, 100, 0, 0.08) 0%, transparent 70%), radial-gradient(ellipse 55% 45% at 20% 15%, rgba(0, 168, 232, 0.10) 0%, transparent 70%), /* 5-12. estrellas — puntos dispersos sin patrón regular, tile 480px */ radial-gradient(1.5px 1.5px at 30px 50px, rgba(240, 237, 232, 0.8), transparent 100%), radial-gradient(1px 1px at 150px 180px, rgba(240, 237, 232, 0.55), transparent 100%), radial-gradient(1.5px 1.5px at 280px 40px, rgba(240, 237, 232, 0.7), transparent 100%), radial-gradient(1px 1px at 380px 220px, rgba(240, 237, 232, 0.5), transparent 100%), radial-gradient(1px 1px at 90px 300px, rgba(240, 237, 232, 0.65), transparent 100%), radial-gradient(1.5px 1.5px at 420px 120px, rgba(240, 237, 232, 0.85), transparent 100%), radial-gradient(1px 1px at 200px 380px, rgba(240, 237, 232, 0.5), transparent 100%), radial-gradient(1.5px 1.5px at 350px 400px, rgba(240, 237, 232, 0.6), transparent 100%); background-repeat: repeat, repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat; background-size: auto, auto, 100% 100%, 100% 100%, 480px 480px, 480px 480px, 480px 480px, 480px 480px, 480px 480px, 480px 480px, 480px 480px, 480px 480px; } /* Líneas diagonales — naranja y azul, ~71px de separación, 1px de grosor. El color de cada banda va a alpha 1 (opaco); el fundido 0 → 0.18 → 0 a lo largo de la línea lo aporta el mask-image de abajo, con el mismo ángulo pero girado 90° (eje paralelo a la propia diagonal en vez de perpendicular a ella). */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient( var(--fc-diagonal-angle), transparent calc(50% - 36px), rgb(240, 100, 0) calc(50% - 36px), rgb(240, 100, 0) calc(50% - 35px), transparent calc(50% - 35px), transparent calc(50% + 35px), rgb(0, 168, 232) calc(50% + 35px), rgb(0, 168, 232) calc(50% + 36px), transparent calc(50% + 36px) ); background-repeat: no-repeat; background-size: 100% 100%; background-attachment: fixed; -webkit-mask-image: linear-gradient( calc(var(--fc-diagonal-angle) - 90deg), transparent 0%, rgba(0, 0, 0, 0.18) 50%, transparent 100% ); mask-image: linear-gradient( calc(var(--fc-diagonal-angle) - 90deg), transparent 0%, rgba(0, 0, 0, 0.18) 50%, transparent 100% ); }