/* ============================================
   Páginas públicas (inicio, precios, legal): botón luna/sol y MODO OSCURO.
   El modo lo pone /js/tema.js en <html data-tema="...">.
   ============================================ */

/* ---------- Botón luna / sol ---------- */
.boton-tema {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 50%;
    background: transparent; border: 1px solid rgba(148, 163, 184, .45); color: inherit; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.boton-tema:hover { background: rgba(148, 163, 184, .16); }
.boton-tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.boton-tema .sol { display: none; }
html[data-tema="oscuro"] .boton-tema .sol { display: block; }
html[data-tema="oscuro"] .boton-tema .luna { display: none; }
.landing .boton-tema { color: #e2e8f0; border-color: rgba(255, 255, 255, .25); }
.precios .boton-tema { color: #475569; border-color: #cbd5e1; }
.legal .acciones-legal { display: inline-flex; align-items: center; gap: 14px; }
.legal .boton-tema { color: #475569; border-color: #cbd5e1; width: 34px; height: 34px; }

html[data-tema="oscuro"] { color-scheme: dark; }

/* ---------- Inicio: las secciones claras pasan a oscuras ---------- */
html[data-tema="oscuro"] .landing .seccion-clara { background: #0b1220; color: #94a3b8; }
html[data-tema="oscuro"] .landing .seccion-clara .titulo-seccion { color: #ffffff; }
html[data-tema="oscuro"] .landing .seccion-clara .etiqueta { color: #94a3b8; }
html[data-tema="oscuro"] .landing .paso-tarjeta { background: #111a2e; border-color: #1f2a44; box-shadow: none; }
html[data-tema="oscuro"] .landing .paso-tarjeta h3 { color: #f1f5f9 !important; }
html[data-tema="oscuro"] .landing .chip { background: #111a2e; border-color: #2c3a5a; color: #cbd5e1; }

/* ---------- Precios ---------- */
html[data-tema="oscuro"] body.precios { background: #0b1220; color: #cbd5e1; }
html[data-tema="oscuro"] .precios h1,
html[data-tema="oscuro"] .precios h2,
html[data-tema="oscuro"] .precios .precio .cifra,
html[data-tema="oscuro"] .precios .nota strong,
html[data-tema="oscuro"] .precios .faq summary,
html[data-tema="oscuro"] body:not(.anual) .conmutador .lbl-m,
html[data-tema="oscuro"] body.anual .conmutador .lbl-a { color: #f1f5f9; }
html[data-tema="oscuro"] .precios .pnav { background: rgba(11, 18, 32, .85); border-bottom-color: #1f2a44; }
html[data-tema="oscuro"] .precios .pnav-enlaces a.enlace,
html[data-tema="oscuro"] .precios .nav-salir,
html[data-tema="oscuro"] .precios .boton-tema { color: #cbd5e1; border-color: #2c3a5a; }
html[data-tema="oscuro"] .precios .nav-salir { background: transparent; }
html[data-tema="oscuro"] .precios .nav-salir:hover { background: #17223a; }
html[data-tema="oscuro"] .precios .plan,
html[data-tema="oscuro"] .precios .ppie { background: #111a2e; border-color: #1f2a44; }
html[data-tema="oscuro"] .precios .plan.popular { border-color: #3b82f6; box-shadow: 0 18px 40px rgba(37, 99, 235, .25); }
html[data-tema="oscuro"] .precios .plan hr,
html[data-tema="oscuro"] .precios .faq details { border-color: #1f2a44; }
html[data-tema="oscuro"] .precios .item,
html[data-tema="oscuro"] .precios .precio .moneda,
html[data-tema="oscuro"] .precios .faq .respuesta { color: #cbd5e1; }
html[data-tema="oscuro"] .precios .item .ok { background: rgba(59, 130, 246, .2); color: #93c5fd; }
html[data-tema="oscuro"] .precios .pbtn-borde { background: transparent; color: #93c5fd; border-color: #3b82f6; }
html[data-tema="oscuro"] .precios .pbtn-borde:hover { background: rgba(59, 130, 246, .12); }
html[data-tema="oscuro"] .precios .insignia { background: rgba(59, 130, 246, .18); color: #93c5fd; }
html[data-tema="oscuro"] .precios .plan .nombre { color: #94a3b8; }
html[data-tema="oscuro"] .precios .phero h1 span,
html[data-tema="oscuro"] .precios .ppie a { color: #60a5fa; }
html[data-tema="oscuro"] .precios .paviso { background: #2a0b0b; border-color: #7f1d1d; color: #fca5a5; }

/* ---------- Páginas legales ---------- */
html[data-tema="oscuro"] body.legal { background: #0b1220; color: #cbd5e1; }
html[data-tema="oscuro"] .legal .marca,
html[data-tema="oscuro"] .legal .documento h1,
html[data-tema="oscuro"] .legal .documento h2 { color: #f1f5f9; }
html[data-tema="oscuro"] .legal .documento { background: #111a2e; border-color: #1f2a44; }
html[data-tema="oscuro"] .legal a,
html[data-tema="oscuro"] .legal .otras a { color: #60a5fa; }
html[data-tema="oscuro"] .legal .boton-tema { color: #cbd5e1; border-color: #2c3a5a; }