/* ============================================================================ THEMES ENGINE v1.0 — Motor de temas para el portafolio Rolando Cabrera ============================================================================ PROBLEMA RESUELTO: Los temas del admin (classic-gold, premium-dark, etc.) NO tenían reglas CSS asociadas. Este archivo define TODAS las paletas activadas por `` y ``. ============================================================================ */ /* ============================ TEMAS NOCHE (8 oscuros) ============================ */ /* CLASSIC GOLD — dorado + navy (DEFAULT) */ html[data-theme="classic-gold"] { --accent-primary: #C9A24B; --accent-secondary: #E8C766; --bg-dark: #0A1628; --bg-card: #142540; --text-primary: #F5F1E8; --text-muted: #B8B4A8; --border-soft: rgba(201, 162, 75, 0.25); --glow-color: rgba(201, 162, 75, 0.4); } /* PREMIUM DARK — ámbar + slate oscuro */ html[data-theme="premium-dark"] { --accent-primary: #F0A020; --accent-secondary: #FFB84D; --bg-dark: #0A0F1E; --bg-card: #1E293B; --text-primary: #F1F5F9; --text-muted: #94A3B8; --border-soft: rgba(240, 160, 32, 0.22); --glow-color: rgba(240, 160, 32, 0.45); } /* VANGUARD NEON — cian + magenta eléctricos */ html[data-theme="vanguard-neon"] { --accent-primary: #00F0FF; --accent-secondary: #FF2D92; --bg-dark: #0B0D21; --bg-card: #161A3D; --text-primary: #E8F0FF; --text-muted: #8B9DCB; --border-soft: rgba(0, 240, 255, 0.28); --glow-color: rgba(0, 240, 255, 0.5); } /* CORPORATE BLUE — azul corporativo */ html[data-theme="corporate-blue"] { --accent-primary: #2563EB; --accent-secondary: #60A5FA; --bg-dark: #0F1E3A; --bg-card: #1E3A8A; --text-primary: #F1F5F9; --text-muted: #94A3B8; --border-soft: rgba(37, 99, 235, 0.25); --glow-color: rgba(37, 99, 235, 0.4); } /* MINIMALIST — gris carbón monocromo */ html[data-theme="minimalist"] { --accent-primary: #FFFFFF; --accent-secondary: #D4D4D4; --bg-dark: #111111; --bg-card: #1F1F1F; --text-primary: #FAFAFA; --text-muted: #A3A3A3; --border-soft: rgba(255, 255, 255, 0.15); --glow-color: rgba(255, 255, 255, 0.3); } /* ROYAL PURPLE — violeta + dorado lujo */ html[data-theme="royal-purple"] { --accent-primary: #7C3AED; --accent-secondary: #D4AF37; --bg-dark: #1F1235; --bg-card: #2D1B4E; --text-primary: #F5F0FF; --text-muted: #B8A8D9; --border-soft: rgba(124, 58, 237, 0.28); --glow-color: rgba(124, 58, 237, 0.45); } /* FOREST GREEN — verde bosque + cobre */ html[data-theme="forest-green"] { --accent-primary: #16A34A; --accent-secondary: #B45309; --bg-dark: #0A1F12; --bg-card: #14361E; --text-primary: #F0FDF4; --text-muted: #86B69E; --border-soft: rgba(22, 163, 74, 0.25); --glow-color: rgba(22, 163, 74, 0.4); } /* SUNSET CORAL — coral + navy creativo */ html[data-theme="sunset-coral"] { --accent-primary: #FB7185; --accent-secondary: #FDA4AF; --bg-dark: #1E293B; --bg-card: #334155; --text-primary: #FFF7ED; --text-muted: #CBD5E1; --border-soft: rgba(251, 113, 133, 0.3); --glow-color: rgba(251, 113, 133, 0.45); } /* ============================ APLICACIÓN GLOBAL DE TEMAS NOCHE ============================ */ /* Estos selectores aplican las variables a los elementos visibles del portafolio. IMPORTANT: Sin estas reglas, el data-theme no hace nada visible. */ html[data-theme] .section-dark, html[data-theme] .portfolio-section.section-dark { background: linear-gradient(180deg, var(--bg-dark, #0A1628) 0%, var(--bg-card, #142540) 100%); color: var(--text-primary, #F5F1E8); } html[data-theme] .solid-accent, html[data-theme] .section-tag i, html[data-theme] .section-tag, html[data-theme] .acc-chevron, html[data-theme] .video-ai-badge, html[data-theme] .tool-badge i, html[data-theme] .design-tool-chip i { color: var(--accent-primary, #C9A24B) !important; } html[data-theme] .section-underline { background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); } html[data-theme] .accordion-premium-toggle, html[data-theme] .accordion-toggle { border-color: var(--border-soft); background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%); } html[data-theme] .accordion-premium-toggle:hover, html[data-theme] .accordion-toggle:hover { box-shadow: 0 12px 32px var(--glow-color); border-color: var(--accent-primary); } html[data-theme] .acc-icon-premium, html[data-theme] .acc-icon-dark { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: var(--bg-dark); } html[data-theme] .project-card { border-color: var(--border-soft); } html[data-theme] .project-card:hover { border-color: var(--accent-primary); box-shadow: 0 16px 40px var(--glow-color); } html[data-theme] .project-icon i { color: var(--accent-primary); } html[data-theme] .arch-pro-tag i, html[data-theme] .arch-pro-num { color: var(--accent-primary); } html[data-theme] .top-header, html[data-theme] .main-header { border-bottom-color: var(--border-soft); } html[data-theme] .nav-link:hover, html[data-theme] .nav-link.active { color: var(--accent-primary); } html[data-theme] .btn-primary, html[data-theme] .cta-primary { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: var(--bg-dark); border-color: var(--accent-primary); } html[data-theme] .btn-primary:hover, html[data-theme] .cta-primary:hover { box-shadow: 0 14px 36px var(--glow-color); } html[data-theme] .skill-bar-fill, html[data-theme] .progress-fill { background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); } html[data-theme] .terminal-prompt, html[data-theme] .terminal-line .cmd { color: var(--accent-primary); } /* Variables públicas — accesibles para componentes */ html[data-theme] { --theme-accent: var(--accent-primary); --theme-accent-soft: var(--accent-secondary); --theme-bg: var(--bg-dark); --theme-card: var(--bg-card); --theme-text: var(--text-primary); --theme-muted: var(--text-muted); } /* ============================ MODO DÍA (activado por body.day-mode) ============================ */ /* El modo día se activa con `` Y se puede combinar con `` para paletas día específicas. */ body.day-mode { background: var(--day-bg, #FBF8F0); color: var(--day-fg, #1A1A2E); } body.day-mode .portfolio-section { background: var(--day-bg, #FBF8F0); color: var(--day-fg, #1A1A2E); } body.day-mode .section-dark, body.day-mode .portfolio-section.section-dark { background: linear-gradient(180deg, var(--day-card, #FFFFFF) 0%, var(--day-bg, #FBF8F0) 100%); color: var(--day-fg, #1A1A2E); } body.day-mode .section-title-main, body.day-mode .bio-statement, body.day-mode .bio-statement-pro p, body.day-mode h2, body.day-mode h3, body.day-mode h4 { color: var(--day-fg, #1A1A2E) !important; } body.day-mode .section-subtitle, body.day-mode .wa-btn-subtitle, body.day-mode .wa-app-desc, body.day-mode .wa-app-url { color: var(--day-muted, #6B7280) !important; } body.day-mode .solid-accent, body.day-mode .section-tag i, body.day-mode .section-tag { color: var(--day-accent, #C9A24B) !important; } body.day-mode .section-underline { background: linear-gradient(90deg, var(--day-accent, #C9A24B), transparent); } body.day-mode .accordion-premium-toggle, body.day-mode .accordion-toggle, body.day-mode .wa-big-btn, body.day-mode .project-card, body.day-mode .arch-pro-card { background: var(--day-card, #FFFFFF) !important; color: var(--day-fg, #1A1A2E) !important; border-color: var(--day-border, #E8DEC4) !important; } body.day-mode .wa-app-card, body.day-mode .design-card-pro, body.day-mode .video-thumb { background: var(--day-card, #FFFFFF) !important; border-color: var(--day-border, #E8DEC4) !important; } body.day-mode .acc-icon-premium, body.day-mode .acc-icon-dark, body.day-mode .wa-btn-icon { background: linear-gradient(135deg, var(--day-accent, #C9A24B), var(--day-fg, #1A1A2E)); color: #FFFFFF; } body.day-mode .btn-primary, body.day-mode .cta-primary { background: var(--day-accent, #C9A24B) !important; color: #FFFFFF !important; border-color: var(--day-accent, #C9A24B) !important; } body.day-mode .design-tool-chip, body.day-mode .tool-badge { background: var(--day-card, #FFFFFF); color: var(--day-fg, #1A1A2E); border-color: var(--day-border, #E8DEC4); } /* Fondo de imagen opcional para modo día */ body.day-mode[data-day-bg-image] { background-image: var(--day-bg-image); background-size: cover; background-attachment: fixed; } /* ============================ PALETAS ESPECÍFICAS DÍA ============================ */ /* Estas se aplican vía html[data-day-theme="..."] y SOBREESCRIBEN las variables por defecto, permitiendo cambio instantáneo con un click en el admin. */ html[data-day-theme="ivory-gold"] body.day-mode { --day-bg: #FBF8F0; --day-fg: #1A1A2E; --day-accent: #C9A24B; --day-card: #FFFFFF; --day-border: #E8DEC4; --day-muted: #6B7280; } html[data-day-theme="pearl-blue"] body.day-mode { --day-bg: #F4F7FB; --day-fg: #0F1E3A; --day-accent: #1E40AF; --day-card: #FFFFFF; --day-border: #DCE5F0; --day-muted: #475569; } html[data-day-theme="warm-sand"] body.day-mode { --day-bg: #F8F2E5; --day-fg: #2A1F12; --day-accent: #B8722E; --day-card: #FFFCF5; --day-border: #E5D5B7; --day-muted: #7C6A52; } html[data-day-theme="mint-fresh"] body.day-mode { --day-bg: #EEF7F2; --day-fg: #0F2A1C; --day-accent: #0E9F6E; --day-card: #FFFFFF; --day-border: #C8E0D2; --day-muted: #4D6B5C; } html[data-day-theme="rose-light"] body.day-mode { --day-bg: #FCF2F0; --day-fg: #2D1418; --day-accent: #D4596B; --day-card: #FFFFFF; --day-border: #F0D5CE; --day-muted: #7E5158; } html[data-day-theme="executive"] body.day-mode { --day-bg: #FAFAFA; --day-fg: #0A0A0A; --day-accent: #171717; --day-card: #FFFFFF; --day-border: #E5E5E5; --day-muted: #525252; } html[data-day-theme="royal-purple"] body.day-mode { --day-bg: #F8F4FB; --day-fg: #1F1235; --day-accent: #7C3AED; --day-card: #FFFFFF; --day-border: #E2D4F0; --day-muted: #5A4A78; } html[data-day-theme="ocean-deep"] body.day-mode { --day-bg: #F1F6FB; --day-fg: #0A1E36; --day-accent: #0369A1; --day-card: #FFFFFF; --day-border: #D0DEEC; --day-muted: #4A6280; } /* ============================ MICRO TRANSICIÓN GLOBAL ============================ */ /* Permite cambiar de tema sin "saltos" — fade suave */ html, body, .portfolio-section, .wa-big-btn, .accordion-toggle, .project-card, .arch-pro-card, .wa-app-card, .design-card-pro, .btn-primary, .cta-primary, .section-title-main { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }