/* ============================================================ 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); /* ---------------------------------------------------------- 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 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); /* 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% ); /* ---------------------------------------------------------- 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-modal: 200; --fc-z-toast: 300; --fc-z-nav: 400; /* ---------------------------------------------------------- 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 azul atmosférica permanente */ background-image: 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 */ .fc-hud-corner::before { content: ''; position: absolute; top: 12px; left: 12px; 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 */ .fc-hud-corner::after { content: ''; position: absolute; bottom: 12px; right: 12px; width: 16px; height: 16px; border-bottom: 1px solid var(--fc-blue); border-right: 1px solid var(--fc-blue); 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; } /* 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-body); font-size: var(--fc-text-base); font-weight: 600; 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-body); font-size: var(--fc-text-base); font-weight: 600; 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); }