/* ============================================================================
   Dunes Store · Modo oscuro
   Se activa con html[data-theme="dark"] (toggle + prefers-color-scheme).
   Remapea los tokens y las superficies blancas "duras" del storefront,
   el panel de cliente y el centro de ayuda. No toca el admin.
   ========================================================================== */

html[data-theme="dark"] {
    --ds-blu:#6E91E6;
    --ds-blu-d:#5B7FD1;
    --ds-blu-dd:#4E72C4;
    --ds-blu-soft:rgba(110,145,230,.16);
    --ds-ink:#E6ECF6;
    --ds-ink2:#B7C0D0;
    --ds-ink3:#8C97AC;
    --ds-ink4:#6B7689;
    --ds-line:#27324B;
    --ds-bg:#0B1220;
    --ds-bg2:#0F1830;
    --ds-shadow:0 14px 40px rgba(0,0,0,.45);
    --ds-shadow-blu:0 12px 32px rgba(110,145,230,.30);
    --ds-surface:#141E33;
    --ds-surface2:#1B2742;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .ds-body { background:var(--ds-bg); color:var(--ds-ink); }

/* ── Chrome: header · footer ── */
/* Opaco en oscuro: si fuera translúcido, el degradado del hero (más claro)
   se transparenta y deja una "franja azul" a lo ancho del header. */
/* Sólido opaco + SIN backdrop-filter: el saturate(180%) del modo claro aclaraba
   lo que había detrás dejando una "franja azul" a lo ancho del header en oscuro. */
html[data-theme="dark"] .ds-hdr { background:#0B1220 !important; border-bottom-color:var(--ds-line); -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
html[data-theme="dark"] .ds-hdr.is-scrolled { box-shadow:0 6px 24px rgba(0,0,0,.4); }
html[data-theme="dark"] .ds-hdr__name,
html[data-theme="dark"] .ds-hdr__mark { color:var(--ds-ink); }
html[data-theme="dark"] .ds-hdr__burger span { background:var(--ds-ink); }
html[data-theme="dark"] .ds-foot { background:#080D18; border-top-color:var(--ds-line); }

/* ── Fondos con degradado claro → oscuro ── */
html[data-theme="dark"] .ds-sn-hero,
html[data-theme="dark"] .ds-hero,
html[data-theme="dark"] .ds-phero,
html[data-theme="dark"] .dsa,
html[data-theme="dark"] .kb-top { background:linear-gradient(180deg,#0F1830 0%,#0B1220 100%); border-bottom-color:var(--ds-line); }

/* ── Superficies blancas → surface ── */
html[data-theme="dark"] .ds-prod,
html[data-theme="dark"] .ds-sn-feat,
html[data-theme="dark"] .ds-sn-metric,
html[data-theme="dark"] .ds-mod,
html[data-theme="dark"] .ds-feat,
html[data-theme="dark"] .ds-mini,
html[data-theme="dark"] .ds-val,
html[data-theme="dark"] .ds-why__card,
html[data-theme="dark"] .ds-warroom,
html[data-theme="dark"] .ds-warroom__stat,
html[data-theme="dark"] .ds-warroom__feed li,
html[data-theme="dark"] .ds-faq__item,
html[data-theme="dark"] .ds-acc-card,
html[data-theme="dark"] .ds-cform,
html[data-theme="dark"] .ds-co-pay,
html[data-theme="dark"] .ds-co-sum,
html[data-theme="dark"] .ds-ty__card,
html[data-theme="dark"] .ds-soon,
html[data-theme="dark"] .ds-rev,
html[data-theme="dark"] .ds-gx__card,
html[data-theme="dark"] .ds-trust,
html[data-theme="dark"] .ds-cmp-scroll,
html[data-theme="dark"] .dsa__wrap,
html[data-theme="dark"] .dsp-side,
html[data-theme="dark"] .dsp-card,
html[data-theme="dark"] .dsp-stat,
html[data-theme="dark"] .dsp-tl__body,
html[data-theme="dark"] .dsp-thread,
html[data-theme="dark"] .dsp-faq__item,
html[data-theme="dark"] .dsp-mtoggle,
html[data-theme="dark"] .kb-item,
html[data-theme="dark"] .kb-toc { background:var(--ds-surface); border-color:var(--ds-line); }

/* Tarjeta de precio "clara" (la Pro) → surface; la Enterprise ya es oscura */
html[data-theme="dark"] .ds-pricecard:not(.ds-pricecard--ent) { background:var(--ds-surface); }

/* Cajas internas y avatares con fondo blanco */
html[data-theme="dark"] .ds-warroom__stat,
html[data-theme="dark"] .dsp-spot__ringin { background:var(--ds-surface2); }
html[data-theme="dark"] .dsp-lic__ring i { background:var(--ds-surface); }
html[data-theme="dark"] .ds-co-sum__disc { border-top-color:var(--ds-line); }

/* ── Formularios ── */
html[data-theme="dark"] .ds-cform input,
html[data-theme="dark"] .ds-cform textarea,
html[data-theme="dark"] .ds-cform select,
html[data-theme="dark"] .ds-acc-form input,
html[data-theme="dark"] .dsa-f input,
html[data-theme="dark"] .dsa-f textarea,
html[data-theme="dark"] .dsa-f select,
html[data-theme="dark"] .ds-coupon input,
html[data-theme="dark"] .dsp-reply textarea,
html[data-theme="dark"] .kb-search input,
html[data-theme="dark"] .dsp-key__copy,
html[data-theme="dark"] .ds-nav__close { background:var(--ds-surface2); color:var(--ds-ink); border-color:var(--ds-line); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:var(--ds-ink4); }

/* ── Botón fantasma blanco → translúcido ── */
html[data-theme="dark"] .ds-btn--ghost { background:transparent; border-color:var(--ds-line); color:var(--ds-ink); }
html[data-theme="dark"] .ds-btn--ghost:hover { background:var(--ds-surface2); border-color:var(--ds-blu); }

/* ── Drawer móvil ── */
html[data-theme="dark"] .ds-nav { background:var(--ds-surface); border-left-color:var(--ds-line); }
html[data-theme="dark"] .ds-nav__actions { background:linear-gradient(180deg,var(--ds-surface) 0%,var(--ds-bg2) 100%); border-top-color:var(--ds-line); }

/* ── Código / claves: texto oscuro → claro ── */
html[data-theme="dark"] .dsp-key,
html[data-theme="dark"] .kb-item__a code,
html[data-theme="dark"] .ds-gx__hashes code { color:#9AD0FF; }
html[data-theme="dark"] .dsp-keyrow,
html[data-theme="dark"] .kb-item__a code { background:var(--ds-surface2); border-color:var(--ds-line); }

/* ── Tablas ── */
html[data-theme="dark"] .ds-cmp thead th { background:var(--ds-surface2); }
html[data-theme="dark"] .dsp-table tbody tr:hover { background:var(--ds-surface2); }

/* ── Sidebar TOC del centro de ayuda (móvil) ── */
html[data-theme="dark"] .kb-toc__link { color:var(--ds-ink2); }
html[data-theme="dark"] .kb-toc__n { background:var(--ds-surface2); color:var(--ds-ink3); }

/* ── Toggle de tema ── */
html[data-theme="dark"] .ds-theme { color:var(--ds-ink2); }
html[data-theme="dark"] .ds-theme:hover { color:var(--ds-blu); }
/* Sol visible en oscuro, luna en claro */
.ds-theme__moon { display:inline-flex; }
.ds-theme__sun { display:none; }
html[data-theme="dark"] .ds-theme__moon { display:none; }
html[data-theme="dark"] .ds-theme__sun { display:inline-flex; }

/* ── Logos con variante para fondo oscuro (versión en blanco) ── */
.ds-logo-dark { display:none; }
html[data-theme="dark"] .ds-logo-light { display:none; }
html[data-theme="dark"] .ds-logo-dark { display:block; }

/* ── Logo monocromo (un solo archivo, encaje idéntico en ambos modos):
      negro en claro, blanco en oscuro. Evita el desajuste entre dos PNG. ── */
.ds-logo-mono { filter:brightness(0); }
html[data-theme="dark"] .ds-logo-mono { filter:none; }

/* ── Tabla comparativa: los círculos pastel claros (blancos sobre oscuro)
      pasan a tinte translúcido con icono más brillante ── */
html[data-theme="dark"] .ds-cmp__ic.is-yes  { background:rgba(30,158,98,.18);  color:#5FD79B; }
html[data-theme="dark"] .ds-cmp__ic.is-no   { background:rgba(192,57,43,.22);  color:#F2887C; }
html[data-theme="dark"] .ds-cmp__ic.is-warn { background:rgba(200,136,27,.22); color:#E7B968; }

/* ── Sello "Protegido con Sentinel" del pie (era un degradado a blanco) ── */
html[data-theme="dark"] .ds-foot__secure--premium {
    background:var(--ds-surface); border-color:var(--ds-line); box-shadow:none;
}

/* ── Pago seguro del pie (texto + tarjetas): sombras de tarjeta más marcadas ── */
html[data-theme="dark"] .ds-foot__card {
    box-shadow:0 1px 4px rgba(0,0,0,.45);
}

/* ── Pills de estado del panel (afiliados/tickets): pastel → tinte translúcido ── */
html[data-theme="dark"] .ds-panel {
    --st-green-bg:rgba(30,158,98,.18);
    --st-amber-bg:rgba(183,121,31,.20);
    --st-red-bg:rgba(192,57,43,.20);
    --st-slate-bg:rgba(91,103,119,.26);
}

/* ── Marketing (boletín + recursos + post): superficies blancas → surface ── */
html[data-theme="dark"] .ds-news-card,
html[data-theme="dark"] .ds-news-perks li,
html[data-theme="dark"] .ds-res__card,
html[data-theme="dark"] .ds-post__cover { background:var(--ds-surface); border-color:var(--ds-line); }
html[data-theme="dark"] .ds-res__media { background:var(--ds-surface2); }
html[data-theme="dark"] .ds-news__row input { background:var(--ds-surface2); color:var(--ds-ink); border-color:var(--ds-line); }
html[data-theme="dark"] .ds-news-alert.is-err { background:rgba(192,57,43,.18); color:#F2887C; }
html[data-theme="dark"] .ds-res__pg { color:var(--ds-ink2); }