/* ========================================================================== VOTE360 — DESIGN TOKENS (FUENTE ÚNICA DE VERDAD) ========================================================================== Referencia canónica: AGENT_UI.md Este archivo DEBE cargarse antes que cualquier otro CSS de la app. No redefinir estas variables en otros :root globales. Las vistas pueden override en scope local (ej: .layout-container { ... }). ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. PALETA BASE ---------------------------------------------------------------------- */ --background-color: #00042e; /* Azul marino profundo (fondo principal) */ --foreground-color: #e9d59a; /* Dorado elegante (texto principal, acentos) */ --accent-1: #ddc587; /* Dorado claro */ --accent-2: #d2b575; /* Dorado medio */ --accent-3: #c7a563; /* Dorado oscuro (CTAs, bordes activos) */ --white: #ffffff; /* Aliases legacy usados en vistas existentes — mantener por compatibilidad */ --theme-background: var(--background-color); --theme-foreground: var(--foreground-color); --theme-accent-1: var(--accent-1); --theme-accent-2: var(--accent-2); --theme-accent-3: var(--accent-3); /* ---------------------------------------------------------------------- 2. SUPERFICIES Y GLASSMORPHISM ---------------------------------------------------------------------- */ --modern-card-bg: rgba(26, 29, 41, 0.85); --modern-glass-bg: rgba(255, 255, 255, 0.05); --modern-border-glass: rgba(233, 213, 154, 0.2); --modern-hover-glow: 0 0 20px rgba(233, 213, 154, 0.3); --modern-preview-bg: rgba(255, 255, 255, 0.1); --theme-glass-bg: rgba(26, 29, 41, 0.85); --theme-dropdown-bg: #1a1d29; --param-glass-bg: rgba(26, 29, 41, 0.85); /* Niveles de blur (usar siempre con saturate(1.2) o saturate(1.3)) */ --blur-subtle: blur(5px) saturate(1.2); /* Inputs, filtros */ --blur-medium: blur(10px) saturate(1.2); /* Navbar, toolbars */ --blur-strong: blur(15px) saturate(1.2); /* Sidebar, cards, paginación */ --blur-max: blur(20px) saturate(1.3); /* Sidebar de filtros, paneles flotantes */ /* ---------------------------------------------------------------------- 3. SOMBRAS ---------------------------------------------------------------------- */ --shadow-light: rgba(0, 4, 46, 0.10); --shadow-medium: rgba(0, 4, 46, 0.15); --shadow-heavy: rgba(0, 4, 46, 0.25); /* ---------------------------------------------------------------------- 4. TEXTO SEMÁNTICO ---------------------------------------------------------------------- */ --modern-text-primary: #f8f9fa; /* Texto principal sobre fondo oscuro */ --modern-text-secondary: #adb5bd; /* Texto secundario */ --modern-text-tertiary: #00042e; /* Texto sobre fondo claro (tablas) */ --modern-text-success: #28a745; --modern-text-critical: #ff6b6b; --modern-text-gold: #c7a563; /* ---------------------------------------------------------------------- 5. COLORES SEMÁNTICOS DE ESTADO ---------------------------------------------------------------------- */ --color-success: #28a745; --color-danger: #dc3545; --color-warning: #c7a563; /* Dorado, NO amarillo */ --color-info: #17a2b8; /* Badges de referidos */ --badge-alto-bg: #28a745; --badge-alto-border: 2px solid #28a745; --badge-medio-bg: var(--foreground-color); --badge-medio-border: 2px solid var(--accent-3); --badge-bajo-bg: #adb5bd; --badge-bajo-border: 2px solid #6c757d; --badge-cero-bg: #dc3545; --badge-cero-border: 2px solid #dc3545; /* Ranking podio */ --rank-1-bg: #FFD700; /* Oro */ --rank-2-bg: #C0C0C0; /* Plata */ --rank-3-bg: #CD7F32; /* Bronce */ --rank-other-color: #666; /* ---------------------------------------------------------------------- 6. GRADIENTES ---------------------------------------------------------------------- */ --gradient-primary: linear-gradient(135deg, #00042e 0%, #222222 100%); --gradient-secondary: linear-gradient(135deg, #e9d59a 0%, #ddc587 100%); --gradient-accent: linear-gradient(135deg, #d2b575 0%, #c7a563 100%); --gradient-success: linear-gradient(135deg, #28a745 0%, #20c997 100%); --gradient-info: linear-gradient(135deg, #17a2b8 0%, #00d4ff 100%); --gradient-danger: linear-gradient(135deg, #dc3545 0%, #bd2130 100%); --gradient-glass-overlay: linear-gradient(135deg, rgba(233,213,154,0.10) 0%, rgba(199,165,99,0.05) 50%, rgba(0,4,46,0.10) 100%); --gradient-border-decorative: linear-gradient(145deg, rgba(233,213,154,0.30), rgba(199,165,99,0.20)); /* ---------------------------------------------------------------------- 7. TIPOGRAFÍA ---------------------------------------------------------------------- */ --font-body: 'Open Sans', sans-serif; --font-heading: 'Maven Pro', 'Open Sans', sans-serif; --font-modern: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-mono: 'Courier New', monospace; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extra: 800; /* Escalas relativas para tabla y chrome (de AGENT_UI.md §4) */ --fs-table-body: 0.88em; --fs-table-header: 0.85em; --fs-filter-label: 0.78em; --fs-filter-input: 0.85em; --fs-filter-check: 0.82em; --fs-badge: 0.90em; --fs-pagination: 0.82em; --fs-action-icon: 0.85em; --fs-sidebar-h4: 0.80em; /* ---------------------------------------------------------------------- 8. ESPACIADO ---------------------------------------------------------------------- */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 20px; --spacing-xl: 32px; --spacing-2xl: 48px; /* ---------------------------------------------------------------------- 9. BORDES Y RADIOS ---------------------------------------------------------------------- */ --border-radius: 8px; /* Cards, inputs, botones, paneles */ --border-radius-sm: 6px; /* Botones pequeños, inputs filtro */ --border-radius-lg: 12px; /* Modales, elementos grandes */ --border-radius-pill: 12px; /* Badges píldora */ --border-radius-circle: 50%; /* Rankings, indicadores */ /* ---------------------------------------------------------------------- 10. TRANSICIONES ---------------------------------------------------------------------- */ --transition-fast: all 0.15s ease-out; /* Tooltips, badges */ --transition-smooth: all 0.30s cubic-bezier(0.4, 0, 0.2, 1); /* Uso general */ --avant-garde-transition: all 0.40s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Sidebar, paneles */ /* ---------------------------------------------------------------------- 11. Z-INDEX (jerarquía obligatoria — no crear niveles intermedios) ---------------------------------------------------------------------- */ --z-table-thead-sticky: 10; --z-sidebar-filters: 100; --z-sidebar-overlay: 999; --z-sidebar-mobile: 1000; --z-sidebar-toggle: 1001; --z-navbar: 1030; --z-datepicker: 99999; /* ---------------------------------------------------------------------- 12. DROPDOWN (heredado de modern-menu) ---------------------------------------------------------------------- */ --dropdown-min-width: 240px; --dropdown-padding: 0px; --dropdown-item-padding-vertical: 8px; --dropdown-item-padding-horizontal: 12px; --dropdown-item-margin: 0px; --dropdown-item-gap: 8px; --dropdown-icon-size: 0.9em; --dropdown-icon-width: 16px; --dropdown-bg-color: #1a1d29; --dropdown-text-color: #f6f6f6; --dropdown-border-color: #2a2f5a; --dropdown-section-title-color: #c7a563; --dropdown-glass-bg: rgba(26, 29, 41, 0.85); --dropdown-neon-glow: 0 0 20px rgba(233, 213, 154, 0.3); --dropdown-hover-glow: 0 0 15px rgba(233, 213, 154, 0.5); --dropdown-border-gradient: linear-gradient(145deg, rgba(233,213,154,0.3), rgba(199,165,99,0.2)); /* ---------------------------------------------------------------------- 13. BREAKPOINTS (uso documental — media queries van inline en CSS) ---------------------------------------------------------------------- */ /* --bp-xl: 1024px; sidebar moderno full-width --bp-lg: 992px; sidebar filtros fixed + overlay, FAB --bp-md: 768px; toolbar columna, botones sin texto --bp-sm: 576px; tabla 0.8em, padding reducido --bp-xs: 480px; ajustes mínimos */ }