/* =========================================================
   VERSIÓN SIN AGENDA: MODO OSCURO (html[data-tema="oscuro"]; lo pone js-activo.js y lo cambia el botón de la cabecera).
   El modo claro (comun/css/ufo.css) es la referencia y no se toca. Base del modo oscuro: #1D455B.
   Cómo funciona: los tokens se invierten (--negro pasa a ser la tinta clara y --blanco la superficie oscura), y aquí se corrigen
   solo los lugares donde eso no sirve:
     · rellenos turquesa o azul (botones, chips, insignias): llevan tinta OSCURA (--tinta), porque el texto claro sobre ellos no se lee;
     · bloques grandes de color (franjas, tarjeta de domicilio, tarjeta lateral, pie): pasan a superficie oscura con borde de acento;
     · colores escritos a mano en ufo.css (blancos semitransparentes, sombras).
   Contraste medido (WCAG AA): texto #F2F8FB sobre #1D455B 9,5:1 y sobre la superficie #234F66 8,2:1; texto secundario ≥ 7:1;
   tinta #062130 sobre azul 6,5:1 y sobre turquesa 8,4:1; turquesa como texto sobre la base 5,2:1; bordes de controles ≥ 4,5:1.
   ========================================================= */
/* Azul profundo del pie en modo oscuro (#163749). Se usa también como fondo del hero de Inicio, en los dos modos: un solo tono. */
:root{--pie-oscuro:#163749}
[data-tema="oscuro"]{
  color-scheme:dark;
  --fondo:#1D455B;                     /* base de la página */
  --blanco:#234F66;                    /* superficies: tarjetas, campos, cabecera, menús */
  --negro:#F2F8FB;                     /* tinta clara (texto, bordes fuertes, foco) */
  --tinta:#062130;                     /* tinta oscura sobre turquesa o azul */
  --tinte:rgba(107,200,198,.16);
  --tinte-2:rgba(107,200,198,.32);
  --texto-suave:rgba(242,248,251,.88);
  --linea:rgba(242,248,251,.18);
  --borde:rgba(242,248,251,.62);
  --error:#F28B82;
  --error-texto:#FFD3CD;
  --error-suave:rgba(242,139,130,.16);
  --exito:#5CD6AC;
  --exito-texto:#A8EDD3;
  --exito-suave:rgba(92,214,172,.16);
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.6);
  --sombra-alta:0 2px 4px rgba(0,0,0,.3), 0 28px 60px -22px rgba(0,0,0,.75);
}
[data-tema="oscuro"] body{background:var(--fondo)}
/* Cambio de modo: transición breve de colores (solo mientras se cambia) */
.tema-cambio,.tema-cambio *,.tema-cambio *::before,.tema-cambio *::after{transition:background-color .25s ease,color .25s ease,border-color .25s ease!important}
@media (prefers-reduced-motion:reduce){.tema-cambio,.tema-cambio *,.tema-cambio *::before,.tema-cambio *::after{transition:none!important}}

/* ---------- Rellenos de acento: tinta oscura ---------- */
[data-tema="oscuro"] ::selection{background:var(--turquesa);color:var(--tinta)}
[data-tema="oscuro"] .skip,
[data-tema="oscuro"] .btn-solid,[data-tema="oscuro"] .btn-teal,[data-tema="oscuro"] .btn-sage,[data-tema="oscuro"] .btn-wa,
[data-tema="oscuro"] .cta,[data-tema="oscuro"] .badge,[data-tema="oscuro"] mark,[data-tema="oscuro"] .fill,
[data-tema="oscuro"] .chip[aria-pressed="true"],[data-tema="oscuro"] .opt input:checked+label,[data-tema="oscuro"] .opt input:checked+label small,
[data-tema="oscuro"] .pasos-mini li::before,[data-tema="oscuro"] .wa-float,[data-tema="oscuro"] .sede-principal,
[data-tema="oscuro"] .bn-chips .chip[aria-pressed="true"],[data-tema="oscuro"] .bn-insignias li.ok,[data-tema="oscuro"] .bn-semana li.hecho>span:first-child{color:var(--tinta)}
[data-tema="oscuro"] .btn-solid,[data-tema="oscuro"] .btn-teal,[data-tema="oscuro"] .btn-wa,[data-tema="oscuro"] .cta,
[data-tema="oscuro"] .chip[aria-pressed="true"],[data-tema="oscuro"] .opt input:checked+label,[data-tema="oscuro"] .wa-float{border-color:var(--tinta)}
[data-tema="oscuro"] .btn-solid:hover,[data-tema="oscuro"] .btn-teal:hover,[data-tema="oscuro"] .cta:hover{border-color:var(--negro)}
[data-tema="oscuro"] .chip[aria-pressed="true"],[data-tema="oscuro"] .opt input:checked+label{box-shadow:inset 0 0 0 1.5px var(--tinta)}
[data-tema="oscuro"] .social-row a:hover{color:var(--tinta)}
[data-tema="oscuro"] .btn-solid,[data-tema="oscuro"] .btn-teal{box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
/* Íconos de estado: "!" y "?" con tinta oscura sobre su círculo de color */
[data-tema="oscuro"] .err-msg::before,[data-tema="oscuro"] .err-general::before,[data-tema="oscuro"] .bn-error::before,[data-tema="oscuro"] .bn-urgente::before,
[data-tema="oscuro"] .pago-estado.mal::before,[data-tema="oscuro"] .pago-estado.ok::before{color:var(--tinta)}
[data-tema="oscuro"] .btn-peligro{color:var(--tinta)}
[data-tema="oscuro"] .btn-peligro:hover{background:var(--blanco);color:var(--error-texto)}

/* ---------- Bloques grandes de color: superficie oscura con borde de acento ---------- */
[data-tema="oscuro"] .home-card,[data-tema="oscuro"] .aside-card,[data-tema="oscuro"] .cot-card{background:var(--blanco);border:2px solid var(--azul)}
[data-tema="oscuro"] .home-card .icon-wrap{background:var(--tinte)}
[data-tema="oscuro"] .home-card .icon-wrap::after{border-color:var(--blanco)}
[data-tema="oscuro"] .home-card .btn,[data-tema="oscuro"] .aside-card .btn,[data-tema="oscuro"] .band .btn-light{background:var(--fondo);color:var(--negro);border-color:var(--negro)}
[data-tema="oscuro"] .home-card .btn:hover,[data-tema="oscuro"] .aside-card .btn:hover,[data-tema="oscuro"] .band .btn-light:hover,[data-tema="oscuro"] .btn-borde-claro:hover{background:var(--tinte-2)}
[data-tema="oscuro"] .band::before{border-color:rgba(107,200,198,.35)}
/* Bloque final: el mismo degradado de la versión clara; el texto va en tinta oscura (#062130: 6,5:1 sobre azul y 8,4:1 sobre turquesa). */
[data-tema="oscuro"] .band{background-color:var(--azul);background-image:var(--degrade);border:0;color:var(--tinta)}
[data-tema="oscuro"] .band h2,[data-tema="oscuro"] .band p{color:var(--tinta)}
[data-tema="oscuro"] .band h2 em{background:linear-gradient(transparent 62%,rgba(107,200,198,.45) 62%)}
[data-tema="oscuro"] .aside-card .link-arrow{text-decoration-color:var(--turquesa)}

/* Títulos: el resaltado turquesa pasa a ser una franja translúcida (el texto claro sigue legible encima) */
[data-tema="oscuro"] h1 em,[data-tema="oscuro"] h2 em{background:linear-gradient(transparent 64%,rgba(107,200,198,.5) 64%)}

/* ---------- Colores escritos a mano en ufo.css ---------- */
[data-tema="oscuro"] .cab-in,[data-tema="oscuro"] .header-in{background:rgba(29,69,91,.94);border-color:var(--linea);box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
@supports ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){
  [data-tema="oscuro"] .cab-in,[data-tema="oscuro"] .header-in{background:rgba(29,69,91,.82)}
}
[data-tema="oscuro"] .hero-mesh::before{background:radial-gradient(38% 42% at 78% 38%,rgba(107,200,198,.26),transparent 70%),
  radial-gradient(30% 36% at 18% 70%,rgba(0,173,238,.12),transparent 70%),radial-gradient(34% 30% at 60% 88%,rgba(107,200,198,.12),transparent 70%)}
[data-tema="oscuro"] .ficha>*{background:rgba(35,79,102,.92)}
[data-tema="oscuro"] .home-line{background:rgba(35,79,102,.7)}
[data-tema="oscuro"] .checklist label:hover{background:rgba(242,248,251,.08)}
[data-tema="oscuro"] .field input::placeholder,[data-tema="oscuro"] .field textarea::placeholder{color:rgba(242,248,251,.66)}
[data-tema="oscuro"] .step .bar{background:conic-gradient(var(--azul) calc(var(--p,1) * 1turn),rgba(242,248,251,.18) 0)}
[data-tema="oscuro"] .canal-guia .ticks li{border-bottom-color:var(--linea)}
[data-tema="oscuro"] .video-caja{background:#173A4D}
[data-tema="oscuro"] .post-top{background:linear-gradient(135deg,var(--blanco) 0%,rgba(107,200,198,.28) 100%)}
[data-tema="oscuro"] .pill{background:var(--fondo)}
/* Distintivo «+20 años» en modo oscuro: plata clara y pulida (no oscura) con sombras frías; el brillo blanco que cruza al desplazarse se distingue sobre ella */
[data-tema="oscuro"] .sello20 .s20-m1{stop-color:#FFE9A6}
[data-tema="oscuro"] .sello20 .s20-destello{fill:#FFF0B8}
[data-tema="oscuro"] .sello20 .s20-m2{stop-color:#D9A845}
[data-tema="oscuro"] .sello20 .s20-m3{stop-color:#FFF4C9}
[data-tema="oscuro"] .sello20 .s20-m4{stop-color:#B5862E}
[data-tema="oscuro"] .sello20 .s20-c1{stop-color:#8A6824}
[data-tema="oscuro"] .sello20 .s20-c2{stop-color:#5C4414}
[data-tema="oscuro"] .sello20 .s20-brillo{opacity:.9}

/* Pie: superficie oscura (el turquesa a pantalla completa deslumbra en modo oscuro) */
[data-tema="oscuro"] footer.site{background:var(--pie-oscuro);border-top:3px solid var(--turquesa)}
[data-tema="oscuro"] footer.site::before{border-color:rgba(107,200,198,.22)}
[data-tema="oscuro"] .foot-links a{text-decoration-color:rgba(242,248,251,.5)}
[data-tema="oscuro"] .foot-bottom{border-top-color:var(--linea)}
[data-tema="oscuro"] .social-row a{background:var(--blanco)}

/* Mapa: teselas oscurecidas y controles de Leaflet con los colores del sitio */
[data-tema="oscuro"] .ufo-tiles{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.5)}
[data-tema="oscuro"] .leaflet-container{background:#173A4D}
[data-tema="oscuro"] .leaflet-popup-content-wrapper,[data-tema="oscuro"] .leaflet-popup-tip{background:var(--blanco);color:var(--negro)}
[data-tema="oscuro"] .leaflet-bar a,[data-tema="oscuro"] .leaflet-bar a:hover{background:var(--blanco);color:var(--negro);border-bottom-color:var(--linea)}
[data-tema="oscuro"] .leaflet-control-attribution{background:rgba(6,33,48,.8)!important;color:var(--texto-suave)}
[data-tema="oscuro"] .leaflet-control-attribution a{color:var(--negro)}
[data-tema="oscuro"] .leaflet-container a.leaflet-popup-close-button{color:var(--negro)}

/* Ejercicios del blog (bienestar.css) */
[data-tema="oscuro"] .bn-caja,[data-tema="oscuro"] .bn-mapa{box-shadow:0 20px 45px -30px rgba(0,0,0,.7)}
[data-tema="oscuro"] .bn-punto.on .bn-nucleo{fill:var(--tinta)}

/* Cabecera y menús: los íconos de modo y el menú usan la superficie */
[data-tema="oscuro"] .cab-sub,[data-tema="oscuro"] .cab-menu{background:var(--blanco);border-color:var(--linea)}
[data-tema="oscuro"] .cab-tema,[data-tema="oscuro"] .cab-burger{background:var(--fondo)}

/* Señales "por confirmar": pastilla oscurecida (sobre las secciones con tinte turquesa el texto claro seguía legible por poco) */
[data-tema="oscuro"] .senal,[data-tema="oscuro"] .pending,[data-tema="oscuro"] .draft-note{background:rgba(6,33,48,.5)}
[data-tema="oscuro"] .senal::before,[data-tema="oscuro"] .pending::before,[data-tema="oscuro"] .draft-note::before{color:var(--tinta)}
/* Botones dentro de artículos (bienestar.css fija su color con más especificidad) */
[data-tema="oscuro"] .prose a.btn-teal,[data-tema="oscuro"] .prose a.btn-solid{color:var(--tinta)}
[data-tema="oscuro"] .aside-card a.btn-teal{color:var(--negro)}