/* Versión oscura de 811.digital (prueba). Se activa con html[data-tema="oscuro"] (botón sol/luna de la barra
   superior, se recuerda en localStorage; también con ?tema=oscuro). Redefine las variables y pisa las superficies
   blancas que estaban escritas a mano. El Design System (/design-system) queda en claro: es una vitrina de componentes. */
html[data-tema="oscuro"]{--bg:#0b0b0b;--fn:#171717;--txt:#f0ede8;--txt2:#9b968f;--bdr:#2a2a2a;--hvr:#1b1b1b;color-scheme:dark}
html[data-tema="oscuro"] body{background:var(--bg);color:var(--txt)}
html[data-tema="oscuro"] :is(.tb,.mega,.rhdr,.perfil-hero,.side-stack-panel,.cp-mosaic,.cp-imgstack,.rftr,.demo-pag,.prod-flecha,.prod-flecha:disabled){background:var(--bg)}
html[data-tema="oscuro"] body.case-active .rhdr{background:var(--fn)}
html[data-tema="oscuro"] .prod-card::before{background:#161616;box-shadow:0 15px 40px rgba(0,0,0,.6)}
html[data-tema="oscuro"] .side-stack-panel{box-shadow:-24px 0 48px rgba(0,0,0,.6)}
html[data-tema="oscuro"] .rmd h3 em{background:#333;color:var(--txt)}
html[data-tema="oscuro"] .rmd ul.chips li{background:rgba(245,196,0,.16);color:#f5c400}
html[data-tema="oscuro"] .tb-cta{background:var(--txt);color:var(--bg)}
html[data-tema="oscuro"] .case-preview{box-shadow:0 24px 48px rgba(0,0,0,.7)}
html[data-tema="oscuro"] .demo-img{border-color:var(--bdr)}
html[data-tema="oscuro"] .demo .acc{background:var(--hvr)}
html[data-tema="oscuro"] .menu-toggle:hover{background:var(--hvr);color:var(--txt)}

/* botón de tema (sol/luna) en la barra superior */
.tb-tema{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--bdr,#e2e2e2);border-radius:999px;background:none;color:var(--txt,#1A1410);cursor:pointer;transition:background .2s ease}
.tb-tema:hover{background:var(--hvr,#f5f5f3)}
.tb-tema:focus-visible{outline:2px solid var(--txt,#1A1410);outline-offset:2px}
.tb-tema .material-symbols-outlined{font-size:20px}
.tb-tema + .tb-cta{margin-left:12px}