/* Modo oscuro de STAFF. Se activa con el atributo data-tema="dark" en <html> (lo pone tema.js).
   Invierte las variables de color y vuelve a fijar en oscuro las superficies que usaban var(--navy) como fondo. */
:root[data-tema="dark"]{color-scheme:dark;--paper:#070A24;--white:#0F1338;--ink:#E8EAFB;--ink2:#A8ADD6;--navy:#E8EAFB;--mist:#1B2050;--line:rgba(201,205,242,.16);--blue:#8FA5FF;--green:#3FD1A1;--red:#FF8A80}

/* Superficies que en modo claro eran azul marino: se quedan oscuras */
:root[data-tema="dark"] .login-brand,:root[data-tema="dark"] .top,:root[data-tema="dark"] .hero,:root[data-tema="dark"] .step h3 span,:root[data-tema="dark"] .d2t th,:root[data-tema="dark"] .pieleg i.no,:root[data-tema="dark"] .desp .cnt,:root[data-tema="dark"] .votban.abre,:root[data-tema="dark"] .vb.no,:root[data-tema="dark"] .vst.abierta,:root[data-tema="dark"] .vcol .cnt,:root[data-tema="dark"] .p-hero,:root[data-tema="dark"] .p-cal-h,:root[data-tema="dark"] .p-rhero,:root[data-tema="dark"] .p-tile.g{background:#010431}
:root[data-tema="dark"] .photo,:root[data-tema="dark"] .d2t th button:hover,:root[data-tema="dark"] .p-rhero::after{background:#07106b}
:root[data-tema="dark"] .skip,:root[data-tema="dark"] .nav button[aria-pressed="true"],:root[data-tema="dark"] .p-tile.g .p-ic,:root[data-tema="dark"] .btn-hl{color:#010431}

/* Estados activos: relleno claro con texto oscuro (sobre fondo oscuro se perdían) */
:root[data-tema="dark"] .p-day.hoy span,:root[data-tema="dark"] .seg button[aria-pressed="true"],:root[data-tema="dark"] .p-seg button[aria-pressed="true"],:root[data-tema="dark"] .p-chip.p-pre[aria-pressed="true"],:root[data-tema="dark"] .d2l button[aria-current="true"]{background:var(--hl);color:#010431;border-color:var(--hl)}

/* Fondos claros fijos en el CSS original */
:root[data-tema="dark"] :is(select,input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),textarea){background:var(--white)!important;color:var(--ink)!important;border-color:rgba(201,205,242,.45)}
:root[data-tema="dark"] .p-seg button,:root[data-tema="dark"] .p-chip,:root[data-tema="dark"] .p-cal,:root[data-tema="dark"] .p-vacio,:root[data-tema="dark"] .p-dlg,:root[data-tema="dark"] .p-tile,:root[data-tema="dark"] .p-cl-row,:root[data-tema="dark"] .p-tb{background:var(--white)}
:root[data-tema="dark"] .maestras .r-muy,:root[data-tema="dark"] .mgen .r-muy{background:#12302A}
:root[data-tema="dark"] .danger{background:#2A1216}
:root[data-tema="dark"] .p-recep li{background:#2B2410;border-color:#6B5A1F}
:root[data-tema="dark"] .p-recep .p-item:hover{background:#3A3014}
:root[data-tema="dark"] .p-tbavs li.p-tbav{background:#12302A;border-color:#2F6B55}
:root[data-tema="dark"] .p-tb-tag.ok{color:#3FD1A1;border-color:#3FD1A1}
:root[data-tema="dark"] .p-tb-tag.wait{color:#E9B949;border-color:#CA8A04}
:root[data-tema="dark"] .p-cl-row .p-cl-full{color:#A8ADD6}

/* Detalles */
:root[data-tema="dark"] .hero,:root[data-tema="dark"] .p-hero,:root[data-tema="dark"] .p-rhero{box-shadow:inset 0 0 0 1px rgba(201,205,242,.14)}
:root[data-tema="dark"] .p-go{filter:brightness(1.7)}
:root[data-tema="dark"] .p-chip i{box-shadow:0 0 0 1px rgba(201,205,242,.55)}
:root[data-tema="dark"] .p-item:hover{background:#262C66}

/* Botón del tema (claro y oscuro) */
.temabtn{position:fixed;right:10px;bottom:10px;z-index:30;width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--ink2);display:grid;place-items:center;padding:0;cursor:pointer;opacity:.35;transition:opacity .14s}
@media (pointer:coarse){.temabtn{width:36px;height:36px}}
.temabtn:hover,.temabtn:focus-visible{opacity:1}
.temabtn svg{width:16px;height:16px}
body.solovoto .temabtn,body.anonv .temabtn{display:none}
@media print{.temabtn{display:none}}

/* Listas desplegables: cada opción lleva su propio fondo y color. Antes, las del encabezado heredaban un azul marino de diseno.css y en modo oscuro no se veían. */
:root[data-tema="dark"] select option,:root[data-tema="dark"] select optgroup,:root[data-tema="dark"] .hero select option{background-color:#0F1338;color:#E8EAFB}