/* ============================================================================
 * day-themes.css v2.0 — 12 Temas Día + 12 Oscuros (alineados con admin.js v15)
 * ----------------------------------------------------------------------------
 * Aplicables vía:
 *   - body.day-mode[data-day-theme="..."]   (modo día)
 *   - body[data-theme="..."]                (modo oscuro)
 *   - O directamente con variables CSS inline desde el admin (live preview)
 *
 * Los IDs coinciden EXACTAMENTE con los DAY_THEMES de js/admin.js v15.0
 * ========================================================================= */

/* ===================================================================
   MODO DÍA — VARIABLES BASE (defaults)
   =================================================================== */
body.day-mode {
    --day-bg:     #FFFFFF;
    --day-fg:     #0F172A;
    --day-accent: #2563EB;
    --day-card:   #F8FAFC;
    --day-border: #E2E8F0;
    --day-muted:  #64748B;
    --day-grad-start: var(--day-bg);
    --day-grad-end:   var(--day-card);
    background: var(--day-bg);
    color: var(--day-fg);
    transition: background .4s ease, color .4s ease;
}

/* ===================================================================
   12 TEMAS DÍA PROFESIONALES (alineados con admin.js v15.0)
   =================================================================== */

/* 1. Pure White — Blanco puro minimalista */
body.day-mode[data-day-theme="pure-white"] {
    --day-bg: #FFFFFF; --day-fg: #0F172A; --day-accent: #2563EB;
    --day-card: #F8FAFC; --day-border: #E2E8F0; --day-muted: #64748B;
    --day-grad-start: #FFFFFF; --day-grad-end: #F1F5F9;
}

/* 2. Soft Cream — Crema suave editorial */
body.day-mode[data-day-theme="soft-cream"] {
    --day-bg: #FAF8F3; --day-fg: #1F1A14; --day-accent: #B8860B;
    --day-card: #FFFFFF; --day-border: #E8E2D5; --day-muted: #6B6253;
    --day-grad-start: #FAF8F3; --day-grad-end: #F2EAD8;
}

/* 3. Arctic Mint — Menta polar fresca */
body.day-mode[data-day-theme="arctic-mint"] {
    --day-bg: #F0FAF7; --day-fg: #0F2E25; --day-accent: #059669;
    --day-card: #FFFFFF; --day-border: #D1F0E2; --day-muted: #4A6B5F;
    --day-grad-start: #F0FAF7; --day-grad-end: #D9F0E5;
}

/* 4. Rose Quartz — Cuarzo rosa elegante */
body.day-mode[data-day-theme="rose-quartz"] {
    --day-bg: #FDF6F4; --day-fg: #2A1518; --day-accent: #BE185D;
    --day-card: #FFFFFF; --day-border: #F5DEDA; --day-muted: #7A5560;
    --day-grad-start: #FDF6F4; --day-grad-end: #F8E2DD;
}

/* 5. Ocean Breeze — Brisa del mar pacífica */
body.day-mode[data-day-theme="ocean-breeze"] {
    --day-bg: #F0F7FB; --day-fg: #0C1E2E; --day-accent: #0EA5E9;
    --day-card: #FFFFFF; --day-border: #D6E8F2; --day-muted: #4A6478;
    --day-grad-start: #F0F7FB; --day-grad-end: #DAEAF5;
}

/* 6. Lavender Dream — Lavanda onírica premium */
body.day-mode[data-day-theme="lavender-dream"] {
    --day-bg: #F8F5FB; --day-fg: #1F1438; --day-accent: #7C3AED;
    --day-card: #FFFFFF; --day-border: #E4D9F2; --day-muted: #615175;
    --day-grad-start: #F8F5FB; --day-grad-end: #EADCF8;
}

/* 7. Sandstone — Piedra arenisca natural */
body.day-mode[data-day-theme="sandstone"] {
    --day-bg: #F7F2E9; --day-fg: #2A1F10; --day-accent: #D97706;
    --day-card: #FFFEFA; --day-border: #ECE0C8; --day-muted: #7A6448;
    --day-grad-start: #F7F2E9; --day-grad-end: #F0E2C5;
}

/* 8. Forest Sage — Salvia bosque orgánico */
body.day-mode[data-day-theme="forest-sage"] {
    --day-bg: #F4F7EE; --day-fg: #1A2410; --day-accent: #65A30D;
    --day-card: #FFFFFF; --day-border: #DCE5C8; --day-muted: #5A6A4E;
    --day-grad-start: #F4F7EE; --day-grad-end: #E2EAD0;
}

/* 9. Corporate Slate — Pizarra ejecutiva */
body.day-mode[data-day-theme="corporate-slate"] {
    --day-bg: #F4F5F7; --day-fg: #0F172A; --day-accent: #1E293B;
    --day-card: #FFFFFF; --day-border: #D7DBE0; --day-muted: #475569;
    --day-grad-start: #F4F5F7; --day-grad-end: #E5E7EB;
}

/* 10. Champagne — Champaña real lujo */
body.day-mode[data-day-theme="champagne"] {
    --day-bg: #FBF6EC; --day-fg: #3F2E14; --day-accent: #C9A24B;
    --day-card: #FFFEFA; --day-border: #ECD9B0; --day-muted: #7C6840;
    --day-grad-start: #FBF6EC; --day-grad-end: #F5E5BD;
}

/* 11. Sky Indigo — Cielo crepuscular tech */
body.day-mode[data-day-theme="midnight-sky"] {
    --day-bg: #EEF2FF; --day-fg: #1E1B4B; --day-accent: #4F46E5;
    --day-card: #FFFFFF; --day-border: #C7D2FE; --day-muted: #4B5563;
    --day-grad-start: #EEF2FF; --day-grad-end: #DCE2FF;
}

/* 12. Pearl Graphite — Grafito perla moderno */
body.day-mode[data-day-theme="pearl-graphite"] {
    --day-bg: #F5F5F4; --day-fg: #1C1917; --day-accent: #0891B2;
    --day-card: #FFFFFF; --day-border: #E7E5E4; --day-muted: #57534E;
    --day-grad-start: #F5F5F4; --day-grad-end: #E7E5E4;
}

/* ===================================================================
   ✨✨✨ 12 TEMAS DÍA NUEVOS v18.0 — Ultra Premium ✨✨✨
   =================================================================== */

/* 13. Apple Glass — Cristal Apple iOS 18 premium */
body.day-mode[data-day-theme="apple-glass"] {
    --day-bg: #F2F2F7; --day-fg: #1C1C1E; --day-accent: #007AFF;
    --day-card: #FFFFFF; --day-border: #D1D1D6; --day-muted: #8E8E93;
    --day-grad-start: #F2F2F7; --day-grad-end: #E5E5EA;
}

/* 14. Nordic Frost — Escarcha nórdica escandinava */
body.day-mode[data-day-theme="nordic-frost"] {
    --day-bg: #ECEFF4; --day-fg: #2E3440; --day-accent: #5E81AC;
    --day-card: #FFFFFF; --day-border: #D8DEE9; --day-muted: #4C566A;
    --day-grad-start: #ECEFF4; --day-grad-end: #D8DEE9;
}

/* 15. Sakura Bloom — Flor de cerezo japonesa */
body.day-mode[data-day-theme="sakura-pink"] {
    --day-bg: #FFF5F7; --day-fg: #3D1A2A; --day-accent: #EC4899;
    --day-card: #FFFFFF; --day-border: #FBCFE8; --day-muted: #9D4E6E;
    --day-grad-start: #FFF5F7; --day-grad-end: #FCE7F3;
}

/* 16. Mocha Warm — Café mocha cálido boutique */
body.day-mode[data-day-theme="mocha-warm"] {
    --day-bg: #FAF3E7; --day-fg: #3E2A14; --day-accent: #92400E;
    --day-card: #FFFEF7; --day-border: #E7D6B5; --day-muted: #7B5E36;
    --day-grad-start: #FAF3E7; --day-grad-end: #F0E4CB;
}

/* 17. Mint Fresh — Verde menta vibrante */
body.day-mode[data-day-theme="mint-fresh"] {
    --day-bg: #ECFDF5; --day-fg: #064E3B; --day-accent: #10B981;
    --day-card: #FFFFFF; --day-border: #A7F3D0; --day-muted: #047857;
    --day-grad-start: #ECFDF5; --day-grad-end: #D1FAE5;
}

/* 18. Coral Sunset — Atardecer coral tropical */
body.day-mode[data-day-theme="coral-sunset"] {
    --day-bg: #FFF1EB; --day-fg: #451A03; --day-accent: #F97316;
    --day-card: #FFFFFF; --day-border: #FED7AA; --day-muted: #9A3412;
    --day-grad-start: #FFF1EB; --day-grad-end: #FFEDD5;
}

/* 19. Sky Cloud — Cielo nube celeste suave */
body.day-mode[data-day-theme="sky-cloud"] {
    --day-bg: #F0F9FF; --day-fg: #0C4A6E; --day-accent: #0284C7;
    --day-card: #FFFFFF; --day-border: #BAE6FD; --day-muted: #0369A1;
    --day-grad-start: #F0F9FF; --day-grad-end: #E0F2FE;
}

/* 20. Royal Emerald — Esmeralda real lujo */
body.day-mode[data-day-theme="royal-emerald"] {
    --day-bg: #F0FDF4; --day-fg: #14532D; --day-accent: #16A34A;
    --day-card: #FFFFFF; --day-border: #BBF7D0; --day-muted: #15803D;
    --day-grad-start: #F0FDF4; --day-grad-end: #DCFCE7;
}

/* 21. Platinum Luxe — Platino lujo ejecutivo */
body.day-mode[data-day-theme="platinum-luxe"] {
    --day-bg: #FAFAFA; --day-fg: #18181B; --day-accent: #A1A1AA;
    --day-card: #FFFFFF; --day-border: #E4E4E7; --day-muted: #52525B;
    --day-grad-start: #FAFAFA; --day-grad-end: #F4F4F5;
}

/* 22. Amber Glow — Resplandor ámbar dorado */
body.day-mode[data-day-theme="amber-glow"] {
    --day-bg: #FFFBEB; --day-fg: #451A03; --day-accent: #F59E0B;
    --day-card: #FFFFFF; --day-border: #FDE68A; --day-muted: #92400E;
    --day-grad-start: #FFFBEB; --day-grad-end: #FEF3C7;
}

/* 23. Velvet Rouge — Terciopelo rojo boutique */
body.day-mode[data-day-theme="velvet-rouge"] {
    --day-bg: #FEF2F2; --day-fg: #450A0A; --day-accent: #DC2626;
    --day-card: #FFFFFF; --day-border: #FECACA; --day-muted: #991B1B;
    --day-grad-start: #FEF2F2; --day-grad-end: #FEE2E2;
}

/* 24. Teal Ocean — Verde azulado océano */
body.day-mode[data-day-theme="teal-ocean"] {
    --day-bg: #F0FDFA; --day-fg: #134E4A; --day-accent: #0D9488;
    --day-card: #FFFFFF; --day-border: #99F6E4; --day-muted: #115E59;
    --day-grad-start: #F0FDFA; --day-grad-end: #CCFBF1;
}

/* === LEGACY ALIASES (compatibilidad con HTML viejo) === */
body.day-mode[data-day-theme="ivory-gold"]   { --day-bg: #FAF7F0; --day-fg: #2A1F0E; --day-accent: #C9A24B; --day-card: #FFFFFF; --day-border: #E8DCC0; --day-muted: #6B5D45; }
body.day-mode[data-day-theme="pearl-blue"]   { --day-bg: #F0F4FA; --day-fg: #0A1A3A; --day-accent: #1E40AF; --day-card: #FFFFFF; --day-border: #DCE5F2; --day-muted: #475569; }
body.day-mode[data-day-theme="warm-sand"]    { --day-bg: #F7F1E8; --day-fg: #3A2818; --day-accent: #D97706; --day-card: #FFFAF1; --day-border: #ECDCC4; --day-muted: #78624A; }
body.day-mode[data-day-theme="mint-fresh"]   { --day-bg: #F0F9F4; --day-fg: #0F2E1A; --day-accent: #059669; --day-card: #FFFFFF; --day-border: #D8EFE0; --day-muted: #5C7068; }
body.day-mode[data-day-theme="rose-light"]   { --day-bg: #FDF4F4; --day-fg: #3A1A1F; --day-accent: #BE185D; --day-card: #FFFFFF; --day-border: #F2DCDC; --day-muted: #7A5560; }
body.day-mode[data-day-theme="executive"]    { --day-bg: #F4F5F7; --day-fg: #0F172A; --day-accent: #1F2937; --day-card: #FFFFFF; --day-border: #D7DBE0; --day-muted: #4B5563; }

/* ===================================================================
   APLICACIÓN GLOBAL EN MODO DÍA
   =================================================================== */
body.day-mode {
    background: linear-gradient(180deg, var(--day-grad-start), var(--day-grad-end)) !important;
    background-attachment: fixed;
    color: var(--day-fg) !important;
}

body.day-mode .top-header {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--day-border) !important;
    color: var(--day-fg) !important;
}
body.day-mode .header-name,
body.day-mode .top-header h1,
body.day-mode .top-header strong { color: var(--day-fg) !important; }
body.day-mode .header-title,
body.day-mode .top-header .header-role,
body.day-mode .top-header p { color: var(--day-muted) !important; }

body.day-mode .frozen-nav {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: var(--day-border) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08) !important;
}
body.day-mode .fnav-btn {
    color: var(--day-muted) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: var(--day-border) !important;
}
body.day-mode .fnav-btn i { color: var(--day-accent) !important; }
body.day-mode .fnav-btn.active,
body.day-mode .fnav-btn[aria-current="page"],
body.day-mode .fnav-btn:hover {
    color: var(--day-card) !important;
    background: var(--day-accent) !important;
    border-color: var(--day-accent) !important;
}
body.day-mode .fnav-btn.active i,
body.day-mode .fnav-btn:hover i { color: var(--day-card) !important; }

body.day-mode .portfolio-section { background: transparent !important; }

body.day-mode .section-tag,
body.day-mode .section-title,
body.day-mode .section-title-main,
body.day-mode h1, body.day-mode h2, body.day-mode h3, body.day-mode h4 {
    color: var(--day-fg) !important;
}
body.day-mode .section-subtitle,
body.day-mode p { color: var(--day-muted) !important; }
body.day-mode .solid-accent,
body.day-mode .accent-text {
    color: var(--day-accent) !important;
    -webkit-text-fill-color: var(--day-accent) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
}
body.day-mode .neural-canvas { opacity: 0.10 !important; filter: invert(1) hue-rotate(180deg); }

/* Cards y contenedores */
body.day-mode .accordion-block,
body.day-mode .accordion-premium,
body.day-mode .accordion-pro,
body.day-mode .glass-card,
body.day-mode .premium-card,
body.day-mode .card-premium,
body.day-mode .stat-block,
body.day-mode .project-card,
body.day-mode .design-card,
body.day-mode .video-card,
body.day-mode .architect-card,
body.day-mode .cert-card,
body.day-mode .webapp-card,
body.day-mode .info-card {
    background: var(--day-card) !important;
    border: 1px solid var(--day-border) !important;
    color: var(--day-fg) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}

body.day-mode .accordion-toggle,
body.day-mode .accordion-premium-toggle,
body.day-mode .accordion-pro-toggle { color: var(--day-fg) !important; }
body.day-mode .accordion-toggle:hover,
body.day-mode .accordion-premium-toggle:hover { background: rgba(0, 0, 0, 0.03) !important; }

body.day-mode .acc-icon-premium,
body.day-mode .accordion-icon {
    background: linear-gradient(135deg, var(--day-accent), var(--day-accent)) !important;
    color: var(--day-card) !important;
}

body.day-mode .design-tool-chip,
body.day-mode .tech-chip,
body.day-mode .chip-premium,
body.day-mode .badge {
    background: var(--day-card) !important;
    color: var(--day-fg) !important;
    border: 1px solid var(--day-border) !important;
}

/* Botones */
body.day-mode .btn-primary,
body.day-mode .header-admin-btn,
body.day-mode button[type="submit"] {
    background: var(--day-accent) !important;
    color: var(--day-card) !important;
    border: 1px solid var(--day-accent) !important;
}
body.day-mode .btn-secondary {
    background: var(--day-card) !important;
    color: var(--day-fg) !important;
    border: 1px solid var(--day-border) !important;
}

/* Inputs */
body.day-mode input,
body.day-mode select,
body.day-mode textarea {
    background: var(--day-card) !important;
    color: var(--day-fg) !important;
    border-color: var(--day-border) !important;
}

/* Footer en day mode */
body.day-mode footer,
body.day-mode .site-footer {
    background: var(--day-card) !important;
    color: var(--day-muted) !important;
    border-top: 1px solid var(--day-border) !important;
}

/* ===================================================================
   12 TEMAS OSCUROS PREMIUM (body[data-theme])
   =================================================================== */

body[data-theme="midnight-gold"]  { --theme-bg: #0a0f1e; --theme-fg: #fff; --theme-accent: #D4AF37; --theme-card: #1a1228; }
body[data-theme="royal-amber"]    { --theme-bg: #0f0a1f; --theme-fg: #fff; --theme-accent: #FF8C42; --theme-card: #311a08; }
body[data-theme="platinum-noir"]  { --theme-bg: #000000; --theme-fg: #fff; --theme-accent: #C0C0C0; --theme-card: #1a1a1a; }
body[data-theme="cyber-violet"]   { --theme-bg: #0a0033; --theme-fg: #fff; --theme-accent: #A855F7; --theme-card: #330066; }
body[data-theme="emerald-night"]  { --theme-bg: #001a14; --theme-fg: #fff; --theme-accent: #10B981; --theme-card: #003b2e; }
body[data-theme="sunset-coral"]   { --theme-bg: #1a0a0a; --theme-fg: #fff; --theme-accent: #FF6B35; --theme-card: #3b1f1a; }
body[data-theme="arctic-blue"]    { --theme-bg: #000814; --theme-fg: #fff; --theme-accent: #3B82F6; --theme-card: #001d3d; }
body[data-theme="rose-gold"]      { --theme-bg: #1a0e14; --theme-fg: #fff; --theme-accent: #F472B6; --theme-card: #3a1828; }
body[data-theme="obsidian-jade"]  { --theme-bg: #0a1410; --theme-fg: #fff; --theme-accent: #00D4AA; --theme-card: #142822; }
body[data-theme="crimson-noir"]   { --theme-bg: #1a0808; --theme-fg: #fff; --theme-accent: #DC2626; --theme-card: #2e1414; }
body[data-theme="electric-cyan"]  { --theme-bg: #000d1f; --theme-fg: #fff; --theme-accent: #06B6D4; --theme-card: #001a35; }
body[data-theme="quantum-purple"] { --theme-bg: #0d0420; --theme-fg: #fff; --theme-accent: #8B5CF6; --theme-card: #1c0e3d; }

body[data-theme]:not(.day-mode) {
    background: var(--theme-bg, #0a0f1e) !important;
    color: var(--theme-fg, #fff);
    transition: background .5s ease, color .5s ease;
}
body[data-theme]:not(.day-mode) .top-header {
    background: rgba(0, 0, 0, 0.55) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body[data-theme]:not(.day-mode) .frozen-nav {
    background: rgba(0, 0, 0, 0.85) !important;
}
body[data-theme]:not(.day-mode) .solid-accent,
body[data-theme]:not(.day-mode) .section-tag i,
body[data-theme]:not(.day-mode) .header-admin-btn {
    color: var(--theme-accent) !important;
}
