/* ========================================================= CDS Project Control — themes.css 6 combinaciones reales e independientes. Se aplican vía IMPORTANTE (corrige inconsistencia detectada en la auditoría): Futurista·Claro y SaaS·Claro deben leerse como temas DISTINTOS, no como el mismo tratamiento con otro nombre. La diferenciación se sostiene en 3 ejes: color primario, presencia de borde/glow cian, y tipografía de títulos (Orbitron solo en los temas Futurista). CDS · Claro/Oscuro parte de la misma paleta que SaaS (mismos colores de fondo/texto/card), pero con un tratamiento propio del ítem activo del menú lateral — ver la regla de .sidebar-link.is-active scoped a [data-theme="cds"] en components.css, es lo único que lo distingue de SaaS por ahora. ========================================================= */ /* ---------- 1. FUTURISTA · OSCURO (default, HUD / centro de control) ---------- */ :root, [data-theme="futurista"][data-mode="dark"] { --color-bg: #070a12; --color-bg-image: radial-gradient(circle at 15% 0%, rgba(34, 211, 238, 0.08), transparent 45%), radial-gradient(circle at 85% 100%, rgba(56, 189, 248, 0.06), transparent 45%); --color-sidebar: #0b1120; --color-panel: rgba(15, 23, 42, 0.55); --color-card: rgba(15, 23, 42, 0.55); --color-card-blur: blur(16px); --color-border: rgba(56, 189, 248, 0.28); --color-text: #e6edf7; --color-text-muted: #a8b8d1; /* hotfix legibilidad: antes #8ea0bd, contraste real insuficiente sobre el card translúcido */ --color-text-readable-secondary: var(--color-text-muted); /* alias explícito para las clases .table-* de datos operativos */ --bs-secondary-color: var(--color-text-muted); /* CRÍTICO: Bootstrap define .text-muted{color:var(--bs-secondary-color)!important} con un gris casi negro fijo (rgba(33,37,41,.75)) que nunca cambiaba con el tema — pisando esta variable, el !important de Bootstrap sigue ganando pero ahora resuelve al color correcto del tema activo. Ver README changelog para el detalle. */ --color-primary: #22d3ee; --color-primary-hover: #06b6d4; --color-primary-contrast: #041014; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #38bdf8; --color-review: #a78bfa; --color-neutral: #475569; --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35); --glow-primary: 0 0 18px rgba(34, 211, 238, 0.35); --font-heading-active: var(--font-heading); --grid-overlay: linear-gradient(rgba(148, 197, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 197, 255, 0.05) 1px, transparent 1px); } /* ---------- 2. FUTURISTA · CLARO (tecnológico, NO es una copia de SaaS claro) ---------- */ [data-theme="futurista"][data-mode="light"] { --color-bg: #f7fafc; --color-bg-image: radial-gradient(circle at 10% 0%, rgba(8, 145, 178, 0.06), transparent 45%); --color-sidebar: #ffffff; --color-panel: #ffffff; --color-card: #ffffff; --color-card-blur: none; --color-border: rgba(8, 145, 178, 0.30); /* borde cian sutil: la marca de este tema */ --color-text: #0f172a; --color-text-muted: #47566b; /* hotfix legibilidad: antes #5b6b82 */ --color-text-readable-secondary: var(--color-text-muted); --bs-secondary-color: var(--color-text-muted); /* ver nota en Futurista Oscuro: pisa el gris fijo que trae Bootstrap */ --color-primary: #0891b2; --color-primary-hover: #0e7490; --color-primary-contrast: #041014; --color-success: #15803d; --color-warning: #b45309; --color-danger: #b91c1c; --color-info: #0284c7; --color-review: #7c3aed; --color-neutral: #64748b; --shadow-card: 0 1px 2px rgba(8, 145, 178, 0.06), 0 6px 20px rgba(8, 145, 178, 0.08); --glow-primary: 0 0 0 rgba(0,0,0,0); /* sin glow en modo claro: legibilidad primero */ --font-heading-active: var(--font-heading); /* conserva Orbitron: "sensación tecnológica" */ --grid-overlay: none; } /* ---------- 3. SAAS · CLARO (dashboard comercial, plano y prolijo) ---------- */ [data-theme="saas"][data-mode="light"] { --color-bg: #f4f6fb; --color-bg-image: none; --color-sidebar: #ffffff; --color-panel: #ffffff; --color-card: #ffffff; --color-card-blur: none; --color-border: #e5e9f2; --color-text: #0f172a; --color-text-muted: #4b5768; /* hotfix legibilidad: antes #64748b, fallaba WCAG AA (4.40:1) contra el fondo */ --color-text-readable-secondary: var(--color-text-muted); --bs-secondary-color: var(--color-text-muted); /* ver nota en Futurista Oscuro: pisa el gris fijo que trae Bootstrap */ --color-primary: #2563eb; --color-primary-contrast: #ffffff; --color-primary-hover: #1d4ed8; --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #2563eb; --color-review: #7c3aed; --color-neutral: #94a3b8; --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04); --glow-primary: 0 0 0 rgba(0,0,0,0); --font-heading-active: var(--font-body); /* sin Orbitron: look SaaS neutro */ --grid-overlay: none; } /* ---------- 4. SAAS · OSCURO (profesional, con MENOS glow que Futurista Oscuro) ---------- */ [data-theme="saas"][data-mode="dark"] { --color-bg: #0f172a; --color-bg-image: none; --color-sidebar: #111827; --color-panel: #1e293b; --color-card: #1e293b; --color-card-blur: none; --color-border: #334155; /* borde plano, sin tinte cian */ --color-text: #e5e7eb; --color-text-muted: #a9b6c7; /* hotfix legibilidad: antes #94a3b8 */ --color-text-readable-secondary: var(--color-text-muted); --bs-secondary-color: var(--color-text-muted); /* ver nota en Futurista Oscuro: pisa el gris fijo que trae Bootstrap */ --color-primary: #3b82f6; --color-primary-contrast: #ffffff; --color-primary-hover: #2563eb; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #38bdf8; --color-review: #a78bfa; --color-neutral: #475569; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3); --glow-primary: 0 0 0 rgba(0,0,0,0); /* explícitamente sin glow */ --font-heading-active: var(--font-body); /* sin Orbitron */ --grid-overlay: none; } /* ---------- 5. CDS · CLARO (misma paleta que SaaS·Claro) ---------- */ [data-theme="cds"][data-mode="light"] { --color-bg: #f4f6fb; --color-bg-image: none; --color-sidebar: #ffffff; --color-panel: #ffffff; --color-card: #ffffff; --color-card-blur: none; --color-border: #e5e9f2; --color-text: #0f172a; --color-text-muted: #4b5768; --color-text-readable-secondary: var(--color-text-muted); --bs-secondary-color: var(--color-text-muted); --color-primary: #2563eb; --color-primary-contrast: #ffffff; --color-primary-hover: #1d4ed8; --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #2563eb; --color-review: #7c3aed; --color-neutral: #94a3b8; --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04); --glow-primary: 0 0 0 rgba(0,0,0,0); --font-heading-active: var(--font-body); --grid-overlay: none; } /* ---------- 6. CDS · OSCURO (misma paleta que SaaS·Oscuro) ---------- */ [data-theme="cds"][data-mode="dark"] { --color-bg: #0f172a; --color-bg-image: none; --color-sidebar: #111827; --color-panel: #1e293b; --color-card: #1e293b; --color-card-blur: none; --color-border: #334155; --color-text: #e5e7eb; --color-text-muted: #a9b6c7; --color-text-readable-secondary: var(--color-text-muted); --bs-secondary-color: var(--color-text-muted); --color-primary: #3b82f6; --color-primary-contrast: #ffffff; --color-primary-hover: #2563eb; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #38bdf8; --color-review: #a78bfa; --color-neutral: #475569; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3); --glow-primary: 0 0 0 rgba(0,0,0,0); --font-heading-active: var(--font-body); --grid-overlay: none; } /* ---------- Aplicación del fondo con grilla / gradients ---------- */ body { background-color: var(--color-bg); background-image: var(--color-bg-image); } .hud-grid::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: var(--grid-overlay); background-size: 42px 42px; z-index: 0; } h1, h2, h3, h4, .brand-title { font-family: var(--font-heading-active); }