/* ═══════════════════════════════════════════════════════════════
   AProbar — Sistema de temas (claro / oscuro)
   ═══════════════════════════════════════════════════════════════ */

html {
    color-scheme: dark;
    transition: background-color 0.25s ease, color 0.25s ease;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --background: #111111;
    --background-alt: #1a1a1a;
    --surface: #1a1a1a;
    --surface-muted: rgba(255, 255, 255, 0.04);
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.65);
    --text-subtle: rgba(255, 255, 255, 0.45);
    --text-faint: rgba(255, 255, 255, 0.3);
    --primary: #E53935;
    --primary-dark: #c62828;
    --primary-soft: rgba(229, 57, 53, 0.12);
    --primary-border: rgba(229, 57, 53, 0.3);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    --input-bg: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.12);
    --placeholder: rgba(255, 255, 255, 0.25);
    --on-primary: #ffffff;
    --shadow: rgba(0, 0, 0, 0.4);
    --bg-gradient: linear-gradient(135deg, #111111 0%, #1a1a1a 40%, #2a0a0a 100%);
    --bg-glow-a: rgba(229, 57, 53, 0.08);
    --bg-glow-b: rgba(229, 57, 53, 0.05);
    --header-bg: transparent;
    --toggle-color: rgba(255, 255, 255, 0.85);
    --toggle-border: rgba(255, 255, 255, 0.28);
    --note-bg: rgba(255, 251, 235, 0.08);
    --note-border: rgba(253, 230, 138, 0.25);
    --note-text: #fde68a;
    /* Demo */
    --demo-body-bg: radial-gradient(circle at top left, rgba(15, 23, 42, 0.98), rgba(5, 10, 20, 1) 45%);
    --demo-header-bg: rgba(4, 7, 18, 0.86);
    --demo-glass: rgba(10, 14, 28, 0.92);
    --demo-loader-bg: #020617;
}

html[data-theme="light"] {
    color-scheme: light;
    --background: #f4f6f9;
    --background-alt: #ffffff;
    --surface: #ffffff;
    --surface-muted: #f0f2f6;
    --text: #1a1f2e;
    --text-muted: #4a5568;
    --text-subtle: #64748b;
    --text-faint: #94a3b8;
    --primary: #d32f2f;
    --primary-dark: #b71c1c;
    --primary-soft: rgba(211, 47, 47, 0.1);
    --primary-border: rgba(211, 47, 47, 0.28);
    --border: rgba(26, 31, 46, 0.1);
    --border-strong: rgba(26, 31, 46, 0.18);
    --input-bg: #ffffff;
    --input-border: rgba(26, 31, 46, 0.14);
    --placeholder: #94a3b8;
    --on-primary: #ffffff;
    --shadow: rgba(15, 23, 42, 0.12);
    --bg-gradient: linear-gradient(160deg, #f4f6f9 0%, #ffffff 42%, #fef5f5 100%);
    --bg-glow-a: rgba(211, 47, 47, 0.07);
    --bg-glow-b: rgba(211, 47, 47, 0.04);
    --header-bg: transparent;
    --toggle-color: #1a1f2e;
    --toggle-border: rgba(26, 31, 46, 0.22);
    --note-bg: #fffbeb;
    --note-border: #fde68a;
    --note-text: #92400e;
    --demo-body-bg: linear-gradient(165deg, #f8fafc 0%, #ffffff 40%, #fef2f2 100%);
    --demo-header-bg: rgba(255, 255, 255, 0.92);
    --demo-glass: rgba(255, 255, 255, 0.94);
    --demo-loader-bg: #f8fafc;
}

/* ── Barra superior + toggle ─────────────────────────────────── */
.header-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;
    min-height: 44px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--toggle-border);
    background: transparent;
    color: var(--toggle-color);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, color 0.2s, transform 0.2s, background 0.2s;
}
.theme-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
    transform: scale(1.05);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.theme-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }

/* ── Logo según tema ─────────────────────────────────────────── */
.logo-wrap {
    display: inline-block;
    line-height: 0;
}
.theme-logo-on-light { display: none; }
html[data-theme="light"] .theme-logo-on-dark { display: none; }
html[data-theme="light"] .theme-logo-on-light { display: inline-block; }

/* Demo: toggle en header-actions */
.header-panel .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Demo comercial — tema claro ─────────────────────────────── */
html[data-theme="light"] body.demo-app {
    color: #1e293b !important;
    background: var(--demo-body-bg) !important;
}
html[data-theme="light"] .demo-app .header-panel {
    background: var(--demo-header-bg) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="light"] .demo-app .header-tagline,
html[data-theme="light"] .demo-app .text-muted,
html[data-theme="light"] .demo-app .hero-description,
html[data-theme="light"] .demo-app .section-copy,
html[data-theme="light"] .demo-app .metric-label,
html[data-theme="light"] .demo-app .metric-note,
html[data-theme="light"] .demo-app .mini-label {
    color: var(--text-muted) !important;
}
html[data-theme="light"] .demo-app .eyebrow { color: var(--primary) !important; }
html[data-theme="light"] .demo-app .glass-card,
html[data-theme="light"] .demo-app .metric-card,
html[data-theme="light"] .demo-app .hero-status div,
html[data-theme="light"] .demo-app .floating-card,
html[data-theme="light"] .demo-app .plan-card,
html[data-theme="light"] .demo-app .insight-card,
html[data-theme="light"] .demo-app .contact-panel {
    background: var(--demo-glass) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: 0 12px 40px var(--shadow) !important;
}
html[data-theme="light"] .demo-app .btn-secondary {
    border-color: var(--border-strong) !important;
    background: var(--surface-muted) !important;
    color: var(--text) !important;
}
html[data-theme="light"] .demo-app .btn-outline {
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
html[data-theme="light"] .demo-app .pill {
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
}
html[data-theme="light"] .demo-app #pageLoader {
    background: var(--demo-loader-bg) !important;
    color: var(--text) !important;
}
html[data-theme="light"] .demo-app .fixed.inset-x-0.top-0.z-40 {
    background: rgba(241, 245, 249, 0.9) !important;
}
html[data-theme="light"] .demo-app .footer-panel a {
    color: var(--primary) !important;
}
html[data-theme="light"] .demo-app h1,
html[data-theme="light"] .demo-app h2,
html[data-theme="light"] .demo-app h3,
html[data-theme="light"] .demo-app h4,
html[data-theme="light"] .demo-app .metric-value,
html[data-theme="light"] .demo-app .floating-card,
html[data-theme="light"] .demo-app .hero-panel,
html[data-theme="light"] .demo-app .summary-card,
html[data-theme="light"] .demo-app .plan-section-title {
    color: var(--text) !important;
}
html[data-theme="light"] .demo-app .glass-card {
    color: var(--text) !important;
}
html[data-theme="light"] .demo-app .hero-status div strong,
html[data-theme="light"] .demo-app .metric-card strong {
    color: var(--text) !important;
}
html[data-theme="light"] .demo-app .footer-panel {
    border-top-color: var(--border) !important;
    color: var(--text-muted) !important;
}