/* ==========================================================================
   DARK MODE — Variables y overrides para modo oscuro
   Solo via clase manual (.dark-mode) — el usuario activa con el toggle.
   ========================================================================== */

/* ── Variables modo oscuro via clase JS ─────────────────────────────────────── */
html.dark-mode {
    --zz-bg:          #0f1923;
    --zz-surface:     #1a2535;
    --zz-surface-alt: #212f40;
    --zz-border:      #2d3f54;
    --zz-text:        #c8d4e6;
    --zz-text-light:  #7a8fa8;
    --zz-dark:        #e8edf5;
    --zz-dark-lighter:#c4cfe0;
}

/* ── Correcciones específicas en modo oscuro ────────────────────────────────── */
html.dark-mode .site-header {
    background-color: var(--zz-bg);
    border-bottom-color: var(--zz-border);
}

html.dark-mode .site-header__main {
    background-color: var(--zz-bg);
    border-bottom-color: var(--zz-border);
}

html.dark-mode .product-card {
    background: var(--zz-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark-mode .home-section--sale {
    background: linear-gradient(180deg, #1a1a0d 0%, #1a2535 100%);
}

html.dark-mode .contact-form {
    background: var(--zz-surface);
}

html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="url"],
html.dark-mode input[type="number"],
html.dark-mode input[type="search"],
html.dark-mode input[type="password"],
html.dark-mode select,
html.dark-mode textarea {
    background-color: var(--zz-surface);
    border-color: var(--zz-border);
    color: var(--zz-text);
}

html.dark-mode .wc-sidebar {
    background: var(--zz-surface);
}

html.dark-mode .accordion__trigger {
    background: var(--zz-surface);
    color: var(--zz-dark);
}

html.dark-mode .accordion__trigger:hover {
    background: var(--zz-surface-alt);
}

html.dark-mode .widget ul li {
    border-bottom-color: var(--zz-border);
}

html.dark-mode .post-card {
    background: var(--zz-surface);
    border-color: var(--zz-border);
}

html.dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs {
    background: var(--zz-surface);
    border-bottom-color: var(--zz-border);
}

html.dark-mode .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background: var(--zz-bg);
}

html.dark-mode .sp__benefits {
    background: var(--zz-surface);
}

html.dark-mode .about-values {
    background: var(--zz-surface);
}

html.dark-mode .value-card {
    background: var(--zz-surface-alt);
}

html.dark-mode table.cart th {
    background: var(--zz-surface);
}

/* ── Elementos con fondo oscuro fijo (topbar, nav, footer, features)
   --zz-dark cambia a blanco en dark mode → hay que fijar un fondo oscuro explícito ── */

/* Valor fijo: oscuro-navy adaptado a dark mode (no usa --zz-dark) */
html.dark-mode .site-topbar,
html.dark-mode .site-footer,
html.dark-mode .page-hero,
html.dark-mode .home-hero {
    background-color: #0d1825;
}

/* Nav: dark mode siempre fuerza esquema oscuro, incluso si admin eligió variante clara.
   Se resetean los tokens --nav-* para garantizar contraste correcto. */
html.dark-mode .site-header__nav {
    background-color: #0d1825;
    --nav-bg:              #0d1825;
    --nav-border-bottom:   transparent;
    --nav-link:            rgba(255, 255, 255, 0.88);
    --nav-link-hover:      #ffffff;
    --nav-link-hover-bg:   rgba(255, 255, 255, 0.10);
    --nav-active-line:     transparent;
    --nav-muted:           rgba(255, 255, 255, 0.70);
    --nav-icon:            #ffffff;
    --nav-dm-border:       rgba(255, 255, 255, 0.25);
    --nav-dm-color:        rgba(255, 255, 255, 0.80);
    --nav-dm-hover-bg:     rgba(255, 255, 255, 0.10);
    --nav-dm-hover-color:  #ffffff;
}

html.dark-mode .features-bar {
    background: linear-gradient(135deg, #060e1a 0%, #0d1825 60%, #101f35 100%);
}