/* Tema: oscuro (por defecto), claro o automático. JS pone data-theme en <html>. */
:root{--field:#0b0705;--on-text:#000;--hl:#fff;--hl-on:#000;--stage:#000;--body-text:#e8dfd6;--nav:rgba(0,0,0,.88);--mani-bg:#fff;--mani-fg:#000}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{
  color-scheme:light;
  --black:#f7f2ec;--panel:#fff;--text:#1d130d;--muted:#6b5848;--latte:#7a4f32;--line:#e8dccf;--edge:#cdb9a5;--red-l:#c1121f;
  --field:#fffdfa;--on-text:#fff;--hl:#1d130d;--hl-on:#fff;--stage:#fbf8f4;--body-text:#3a2a20;--nav:rgba(247,242,236,.92);--mani-bg:#1d130d;--mani-fg:#f6f1ec;
}

/* Colores que antes eran fijos ahora siguen el tema */
button:hover{background:var(--text);color:var(--on-text)}
button.go:hover,.cta:hover,.spot:hover,.linksbar a:hover,.social a:hover{background:var(--hl);color:var(--hl-on)}
button:disabled:hover{background:var(--red);color:#fff}
button.link:hover{background:none;color:var(--text)}
.chips button:hover{background:none;color:var(--red-l)}
.lang button:hover{background:none;color:var(--text)}
input,textarea,select{background:var(--field)}
dialog input,dialog select,dialog textarea,.card input,.card select{background:transparent;color:var(--text)}
nav{background:var(--nav)}
.manifesto{background:var(--mani-bg);color:var(--mani-fg)}
.body,.terms p,.tsec p{color:var(--body-text)}
.ed-prev,.code{background:var(--stage)}
.bg .s2{background:var(--text)}
.upl:hover,.card .upl:hover{background:var(--text);color:var(--on-text)}
.news a:hover,.pj a:hover{color:#f6f1ec}

/* La franja del equipo y las cabeceras rojas conservan colores propios en ambos temas */
.band{--latte:#d9b48c;--muted:#d9c4ad;--text:#f6f1ec;color:#f6f1ec}
.dh,.dh h3{color:#fff}
.spot,.ticker{color:#fff}
#auth .av{background:#fff;color:#000}
html[data-theme="light"] .bg .dots{opacity:.7}
html[data-theme="light"] body::after{opacity:.05}
html[data-theme="light"] .ck{box-shadow:0 1rem 3rem rgba(60,30,10,.18)}

/* Animaciones reducidas (también activable desde Preferencias) */
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after{animation:none!important;transition:none!important}
html[data-motion="reduced"] #splash,html[data-motion="reduced"] #wipe,html[data-motion="reduced"] body::after{display:none}
@media (prefers-reduced-motion:reduce){#splash,#wipe,body::after{display:none}}