/* ==========================================================================
   Foro de la Comunidad Informatica — modo oscuro

   Principio no negociable: nunca se redefinen las variables base
   (--gris, --negro, --borde, --fondo-claro, etc.) dentro de
   html[data-tema="oscuro"], porque esas mismas variables ya se usan DENTRO
   de las franjas que hoy son oscuras (ej. .foco-footer usa var(--negro)
   como fondo). Redefinirlas globalmente rompería esas franjas, que ya
   tienen su contraste resuelto. Por eso cada regla de acá es por selector
   especifico, nunca una redefinicion de variable.

   Las franjas que ya son oscuras (header, hero, info-esencial, banda de
   comunidades, panel de cierre, cierre politico, cta, footer) no aparecen
   en este archivo a proposito: se quedan igual en los dos modos.
   ========================================================================== */

/* --- Base ----------------------------------------------------------------- */
html[data-tema="oscuro"] body {
	color: var(--texto-sobre-oscuro);
	background: var(--negro);
}
html[data-tema="oscuro"] h1,
html[data-tema="oscuro"] h2,
html[data-tema="oscuro"] h3,
html[data-tema="oscuro"] h4,
html[data-tema="oscuro"] h5,
html[data-tema="oscuro"] h6 {
	color: #fff;
}
html[data-tema="oscuro"] .foco-skip-link:focus {
	background: var(--superficie-oscura);
	color: #fff;
}

/* --- Transversales (main.css) ---------------------------------------------- */
html[data-tema="oscuro"] .foco-boton--secundario { border-color: var(--azul-claro); color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-eyebrow { color: var(--azul-claro); }

html[data-tema="oscuro"] .foco-tarjeta-numerada { background: var(--superficie-oscura); border-color: var(--borde-oscuro); }
html[data-tema="oscuro"] .foco-tarjeta-numerada__desc { color: var(--texto-secundario-oscuro); }

html[data-tema="oscuro"] .foco-carrusel__flecha { background: var(--superficie-oscura); border-color: var(--borde-oscuro); color: #fff; }

html[data-tema="oscuro"] .foco-modal { background: var(--superficie-oscura); color: #fff; }
html[data-tema="oscuro"] .foco-modal__cabecera { border-bottom-color: var(--borde-oscuro); }
html[data-tema="oscuro"] .foco-modal__cerrar { background: rgba(255, 255, 255, .12); color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-modal__cargando { color: var(--texto-terciario-oscuro); }

html[data-tema="oscuro"] .foco-single__comunidad { color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-expositor__cargo,
html[data-tema="oscuro"] .foco-expositor__bio { color: var(--texto-terciario-oscuro); }

/* --- Secciones (secciones.css) ---------------------------------------------- */
html[data-tema="oscuro"] .foco-dato__etiqueta { color: var(--texto-terciario-oscuro); }
html[data-tema="oscuro"] .foco-dato__valor { color: #fff; }
html[data-tema="oscuro"] .foco-lead { color: #fff; }
html[data-tema="oscuro"] .foco-lugar { background: var(--negro); }

html[data-tema="oscuro"] .foco-agenda__nota { color: var(--texto-terciario-oscuro); }
html[data-tema="oscuro"] .foco-agenda__lista { border-top-color: var(--borde-oscuro); }
html[data-tema="oscuro"] .foco-agenda__bloque { border-color: var(--borde-oscuro); }
html[data-tema="oscuro"] .foco-agenda__bloque:hover { background: rgba(255, 255, 255, .06); border-left-color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-agenda__hora { color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-agenda__bloque:hover .foco-agenda__hora { color: #fff; }
html[data-tema="oscuro"] .foco-agenda__ver { color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-agenda__detalle,
html[data-tema="oscuro"] .foco-agenda__lugar { color: var(--texto-terciario-oscuro); }

html[data-tema="oscuro"] .foco-grid-seccion--alt { background: var(--superficie-oscura); }

html[data-tema="oscuro"] .foco-tarjeta { background: var(--superficie-oscura); border-color: var(--borde-oscuro); }
html[data-tema="oscuro"] .foco-tarjeta__imagen--placeholder { background: var(--negro); border-bottom-color: var(--borde-oscuro); color: var(--texto-terciario-oscuro); }
html[data-tema="oscuro"] .foco-tarjeta__etiqueta { background: rgba(127, 192, 245, .15); color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-tarjeta__titulo a { color: #fff; }
html[data-tema="oscuro"] .foco-tarjeta__descripcion { color: var(--texto-secundario-oscuro); }
html[data-tema="oscuro"] .foco-tarjeta__expositor { border-top-color: var(--borde-oscuro); }
html[data-tema="oscuro"] .foco-tarjeta__expositor-foto--inicial { background: rgba(127, 192, 245, .15); color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-tarjeta__expositor-nombre { color: #fff; }
html[data-tema="oscuro"] .foco-tarjeta__expositor-cargo,
html[data-tema="oscuro"] .foco-tarjeta__expositor-mas { color: var(--texto-terciario-oscuro); }
html[data-tema="oscuro"] .foco-tarjeta__expositor--pendiente .foco-tarjeta__expositor-nombre { color: var(--texto-secundario-oscuro); }

html[data-tema="oscuro"] .foco-vacio { color: var(--texto-terciario-oscuro); }

/* Unica tarjeta clara del trio de comunidades: pasa a superficie oscura,
   las otras dos (--0 y --1) ya eran oscuras y no cambian. */
html[data-tema="oscuro"] .foco-comunidad-card--2 { background: var(--superficie-oscura); color: #fff; }
html[data-tema="oscuro"] .foco-comunidad-card--2 .foco-comunidad-card__marca { color: rgba(127, 192, 245, .12); }
html[data-tema="oscuro"] .foco-comunidad-card--2 .foco-comunidad-card__numero { background: rgba(255, 255, 255, .12); color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-comunidad-card--2 .foco-comunidad-card__desc { color: var(--texto-secundario-oscuro); }

html[data-tema="oscuro"] .foco-comunidades-parte__accion p { color: var(--texto-secundario-oscuro); }

/* El marco de expositores usa mix-blend-mode: multiply para el duotono;
   sobre un fondo oscuro esa mezcla se ve mucho mas oscura que sobre el
   celeste original. Se compensa con un fondo mas claro que el resto de las
   superficies oscuras, solo en este componente. */
html[data-tema="oscuro"] .foco-expositor-card__marco { background: #35507A; }
html[data-tema="oscuro"] .foco-expositor-card__cargo { color: var(--texto-secundario-oscuro); }

html[data-tema="oscuro"] .foco-tarjeta__pregunta { color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-tarjeta--magistral .foco-tarjeta__descripcion { color: var(--texto-secundario-oscuro); }

html[data-tema="oscuro"] .foco-chips--temas .foco-chip { border-color: rgba(255, 255, 255, .18); color: var(--texto-secundario-oscuro); }
html[data-tema="oscuro"] .foco-chip--claro { background: rgba(127, 192, 245, .15); color: var(--azul-claro); }
html[data-tema="oscuro"] .foco-chip--claro.foco-chip--outline { border-color: rgba(158, 198, 234, .4); }