/* ===========================================================================
   dark.css — TODO lo relacionado al modo oscuro va en este archivo
   ---------------------------------------------------------------------------
   La libreria darkmode-js oscurece invirtiendo la pagina con una capa
   .darkmode-layer { mix-blend-mode: difference }. Esa inversion genera
   artefactos y no deja controlar colores desde CSS (cualquier color declarado
   tambien se invierte). Aqui se desactiva esa capa en la PORTADA y se declaran
   los colores de forma explicita.

   El contenido dentro de <iframe> no se puede estilizar desde este archivo:
   es otro documento. De eso se encarga js/dark-iframes.js, que inyecta CSS
   equivalente en los iframes de mismo origen.

   Revertir: quitar css/dark.css de solucionweb.libraries.yml y drush cr
   =========================================================================== */

body.darkmode--activated.path-frontpage {
  --dm-bg:        #0b0f14;
  --dm-nav:       #12305c;
  --dm-surface:   #12233f;
  --dm-surface-2: #15181c;
  --dm-text:      #ffffff;
  --dm-muted:     #c7d0dc;
  --dm-link:      #9ec5ff;
  --dm-border:    rgba(255, 255, 255, .12);
}

/* 1. Anular la inversion solo en la portada -------------------------------- */
body.darkmode--activated.path-frontpage .darkmode-layer,
body.darkmode--activated.path-frontpage .darkmode-background {
  display: none !important;
}

/* 2. Superficies ----------------------------------------------------------- */
body.darkmode--activated.path-frontpage,
body.darkmode--activated.path-frontpage #header,
body.darkmode--activated.path-frontpage .region-content,
/* el envoltorio de mmenu tiene id dinamico (#mm-NN): va por clase */
body.darkmode--activated.path-frontpage .mm-page,
body.darkmode--activated.path-frontpage .mm-slideout {
  background-color: var(--dm-bg) !important;
  color: var(--dm-text);
}

body.darkmode--activated.path-frontpage #block-solucionweb-cortosinformativos,
body.darkmode--activated.path-frontpage .menu--horizontal-menu,
body.darkmode--activated.path-frontpage nav.menu--horizontal-menu {
  background-color: var(--dm-nav) !important;
}

/* Estos bloques NO llevan fondo propio: contienen tarjetas con
   border-radius, y cualquier color aqui asoma por las esquinas redondeadas
   (era el efecto de "esquinas de colores"). La superficie la ponen las
   tarjetas internas. */
body.darkmode--activated.path-frontpage #block-solucionweb-resultados,
body.darkmode--activated.path-frontpage #block-solucionweb-views-block-destacados-block-1,
body.darkmode--activated.path-frontpage #block-solucionweb-views-block-destacados-block-2,
body.darkmode--activated.path-frontpage #block-solucionweb-transmisiones {
  background-color: transparent !important;
}

/* indicadoreshome y pibregional TAMBIEN llevan tarjetas con border-radius
   ("Indicadores GT" y "Evento especial"): su fondo asomaba por las esquinas
   cuadradas. Se dejan transparentes igual que los demas. */
body.darkmode--activated.path-frontpage #block-solucionweb-indicadoreshome,
body.darkmode--activated.path-frontpage #block-solucionweb-pibregional {
  background-color: transparent !important;
}

/* El fondo pasa de el bloque a .stats-grid, en linea con style.css: el
   bloque ya no es la tarjeta, lo es su contenido. Si se dejara aqui, la
   franja azul volveria a quedar pegada sobre el mismo fondo. */
body.darkmode--activated.path-frontpage #block-solucionweb-tiposdecambio {
  background-color: transparent !important;
}
body.darkmode--activated.path-frontpage #block-solucionweb-tiposdecambio .stats-grid {
  background-color: var(--dm-surface) !important;
}

body.darkmode--activated.path-frontpage #block-solucionweb-preguntasfrecuentes {
  background-color: var(--dm-surface-2) !important;
}

/* #block-solucionweb-accesosdirectos NO se toca aqui: style.css ya le define
   su #181818 de diseno. Antes esa regla no llegaba a aplicarse porque el
   selector de la linea 4670 estaba partido; ya reparado. */
body.darkmode--activated.path-frontpage #block-solucionweb-piedepagina {
  background-color: #000 !important;
}

/* 3. Tarjetas claras que quedaban blancas sobre el fondo oscuro ------------- */
body.darkmode--activated.path-frontpage .destacados.view,
body.darkmode--activated.path-frontpage .view .clearfix.text-formatted,
body.darkmode--activated.path-frontpage :is(.views-row, .card, .slick-list, .slick-track) {
  background-color: transparent !important;
}

/* 4. Contraste de texto ---------------------------------------------------- */
body.darkmode--activated.path-frontpage :is(h1, h2, h3, h4, h5, h6) {
  color: var(--dm-text) !important;
}
body.darkmode--activated.path-frontpage :is(p, li, span, td, th, dd, dt,
label, figcaption, blockquote, strong, em, small) {
  color: var(--dm-text);
}
/* estos venian en azul oscuro (#28487c) o gris (#909090): ilegibles en negro */
body.darkmode--activated.path-frontpage #block-solucionweb-accesosdirectos :is(h2, a, span, div),
body.darkmode--activated.path-frontpage .slick-slide :is(p, span, div) {
  color: var(--dm-text) !important;
}
body.darkmode--activated.path-frontpage a { color: var(--dm-link); }
body.darkmode--activated.path-frontpage :is(.menu--horizontal-menu, #footer) a {
  color: var(--dm-text);
}

/* 5. Patron decorativo de glifos ------------------------------------------
      Lo pinta el pseudo-elemento .region-contenthome::before con la imagen
      adorno_fondo_slides.png, en una caja de 1280x4973 que cubre toda la
      pagina. En claro es una marca de agua sutil sobre blanco; sobre fondo
      oscuro el mismo dibujo sale blanco y compite con el texto. Solo se
      atenua en dark: en claro queda intacto. */
body.darkmode--activated.path-frontpage .region-contenthome::before {
  opacity: .07 !important;
}

/* 6. Bordes ---------------------------------------------------------------- */
body.darkmode--activated.path-frontpage :is(hr, table, td, th) {
  border-color: var(--dm-border) !important;
}

/* 7. Imagenes y graficas se dejan sin alterar ------------------------------ */
body.darkmode--activated.path-frontpage :is(img, canvas, svg) {
  filter: none;
  mix-blend-mode: normal;
}

/* 8. Tarjetas de enlace: venian en #f7f7f7 (blanco) sobre el fondo oscuro.
      Se igualan al gris que style.css ya usa para las de accesos directos. */
body.darkmode--activated.path-frontpage .paragraph--type--enlace {
  background: #181818 !important;
}

/* 9. Bloque de preguntas frecuentes: titulo y preguntas venian en azul
      (#3b6fc4) sobre fondo oscuro, con contraste insuficiente. */
body.darkmode--activated.path-frontpage #block-solucionweb-preguntasfrecuentes :is(h1,h2,h3,h4,h5,h6) {
  color: var(--dm-text) !important;
}
body.darkmode--activated.path-frontpage #block-solucionweb-preguntasfrecuentes :is(a, .faq-accordion-question) {
  color: #cfe0ff !important;
}


/* ===========================================================================
   REGLAS MIGRADAS DESDE style.css (seccion "Dark Mode", lineas 4666-4709)
   ---------------------------------------------------------------------------
   Se trasladaron aqui para que todo el modo oscuro viva en un solo archivo.
   Van SIN el prefijo .path-frontpage a proposito: aplican a todo el sitio,
   igual que antes. Las rutas url(../images/...) siguen resolviendo bien
   porque dark.css esta en el mismo directorio css/ que style.css.
   =========================================================================== */

.darkmode-toggle,
.darkmode-layer--button,
.darkmode-layer--simple{ top: -30px; }
.darkmode--activated :is(#block-solucionweb-views-block-destacados-block-1,#block-solucionweb-views-block-destacados-block-2) .destacados,
.darkmode--activated #block-solucionweb-accesosdirectos,
.darkmode--activated #block-solucionweb-accesosdirectos .paragraph--type--enlace{
    background: #181818 !important;
}
.darkmode--activated #block-solucionweb-accesosdirectos{ border-radius: 20px !important; }
.darkmode--activated :is(#block-solucionweb-views-block-destacados-block-1, #block-solucionweb-views-block-destacados-block-2) .views-field-field-subtitulo-destacado .field-content,
.darkmode--activated :is(#block-solucionweb-views-block-destacados-block-1, #block-solucionweb-views-block-destacados-block-2) .sw-destacados-next{
    color: #fff !important;
}
.darkmode--activated #footer,
.darkmode--activated .mega__panel{
    background: url(../images/footer_dark.png) center top/cover no-repeat;
}
.darkmode--activated #contentInterno:has(article.sw-page-options){
    background-image: url("../images/fondo_content_dark.png") !important;
}
.darkmode--activated #contentInterno:has(article.sw-page-options) article.sw-page-options .field--name-body,
.darkmode--activated #contentInterno:has(article.sw-page-options)::before{ background: #142746 !important; }
.darkmode--activated #block-solucionweb-content article.sw-page-text .field--name-body{ background: #1A1A1A !important; }
.darkmode--activated #block-solucionweb-content article.sw-page-text .field--name-body :where(p, span, div, li, td, h6, h5, h4, h3, h2, h1){
    color: #fff !important;
}

#block-solucionweb-controlesdetamanodefuente > div > div > #type-controls > p{
    margin-bottom: 0 !important;
}


#block-solucionweb-controlesdetamanodefuente .itemlogo{
    font-size: 0;
    display: block;
    background: #fff url(../images/dia-y-noche.svg) no-repeat center center / 100% auto;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
}
button.darkmode-toggle,
#block-solucionweb-darkmodeswitcher{ display: none; }

body.darkmode--activated #block-solucionweb-logobancodeguatemala > div > a:nth-child(1) {
  display: none;
}

body.darkmode--activated #block-solucionweb-logobancodeguatemala > div > a:nth-child(2) {
  display: block;
}

#block-solucionweb-logobancodeguatemala > div a img{
  width: 100%;  
  max-width: 400px;
    height: auto;
}

/* ===========================================================================
   Ajustes de contraste entre contenedor y tarjetas
   ---------------------------------------------------------------------------
   style.css pinta #181818 tanto en #block-solucionweb-accesosdirectos como en
   sus .paragraph--type--enlace: al ser el mismo tono, los azulejos se fundian
   con el contenedor y se perdia el fondo gris del diseno. Aqui se separan.
   =========================================================================== */

body.darkmode--activated.path-frontpage #block-solucionweb-accesosdirectos {
  background: transparent !important;
}
body.darkmode--activated.path-frontpage #block-solucionweb-accesosdirectos .paragraph--type--enlace,
body.darkmode--activated.path-frontpage .paragraph--type--enlace {
  background: #1c1c1c !important;
}

/* las tarjetas .destacados conservan su gris; se refuerza para que no las
   pise ninguna regla de bloque */
body.darkmode--activated.path-frontpage :is(#block-solucionweb-views-block-destacados-block-1,
#block-solucionweb-views-block-destacados-block-2) .destacados {
  background: #181818 !important;
}


/* ===========================================================================
   Separacion visual del pie de pagina
   ---------------------------------------------------------------------------
   #footer recibe background: url(footer_dark.png) desde las reglas migradas;
   ese shorthand deja background-color en transparent y el footer no tiene
   borde, asi que sobre fondo oscuro se funde con el contenido y no se ve
   donde empieza ni donde termina. Aqui se le da un tono propio, un borde
   superior y una franja de cierre.
   Aplica a TODO el sitio (sin .path-frontpage), como el resto de lo migrado.
   =========================================================================== */

body.darkmode--activated #footer{
    background-color: #05080c;
    border-top: 2px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.darkmode--activated #block-solucionweb-piedepagina{
    border-top: 1px solid rgba(255, 255, 255, .10);
}


/* ===========================================================================
   Paginas internas: sw-page-text, sw-page-options y preguntas frecuentes
   ---------------------------------------------------------------------------
   El tipo de contenido "preguntas_frecuentes" se identifica por la clase de
   TIPO (.page-node-type-...), no por la ruta. Sus nodos pueden no tener alias
   (p. ej. /node/5840), y las reglas del tema que usan body.path-* nunca los
   alcanzan.
   ---------------------------------------------------------------------------
   El tema ya define colores oscuros explicitos para estas plantillas
   (#1A1A1A, #142746, color:#fff en las reglas migradas). Fueron escritas
   asumiendo que NO hay inversion. Pero .darkmode-layer sigue activa en las
   internas, y da vuelta esos valores: el color:#fff termina renderizado en
   NEGRO sobre fondo negro, que es el texto "gris que casi no se aprecia".

   Se desactiva la inversion en estas dos plantillas para que esas reglas
   funcionen como fueron pensadas, y se completan los colores que faltaban.
   El resto de plantillas conserva la inversion sin cambios.
   =========================================================================== */

body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) :is(.darkmode-layer, .darkmode-background){
    display: none !important;
}

body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search),
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) :is(.mm-page, .mm-slideout, #header, .region-content, #content){
    background-color: #0b0f14 !important;
    color: #ffffff;
}

/* cuerpo del articulo: el tema ya le pone #1A1A1A; se asegura el texto */
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) article .field--name-body :is(p, li, td, th, span, div, dd, dt){
    color: #ffffff !important;
}

/* titulos: venian en #315f9b (azul institucional), sin contraste sobre negro */
/* Los titulos los fija style.css con
   #block-solucionweb-content article.sw-page-text .field--name-body :where(strong,b)
   en #315f9b. Ambas reglas son !important, asi que decide la especificidad: esa
   lleva un ID (#block-solucionweb-content) y un ID pesa mas que cualquier
   numero de clases. Por eso aqui se repite el ID en vez de encadenar clases. */
body.darkmode--activated #block-solucionweb-content article.sw-page-text .field--name-body :is(strong, b),
body.darkmode--activated #block-solucionweb-content article.sw-page-options .field--name-body :is(strong, b),
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) :is(h1, h2, h3, h4, h5, h6){
    color: #cfe0ff !important;
}
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) a{
    color: #9ec5ff !important;
}

/* barra de navegacion y avisos, que sin inversion volvian a su color claro */
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) :is(.menu--horizontal-menu, #block-solucionweb-cortosinformativos){
    background-color: #12305c !important;
}


/* ===========================================================================
   Variables de color en paginas internas
   ---------------------------------------------------------------------------
   style.css declara la paleta en #content:
       --sw-text: #222222;  --sw-title-blue: #00508f;  --sw-blue: #00508f;
   y varias reglas la consumen con var(). Entre ellas
       ...article.sw-page-text .field--name-body table.tabla-banco tr td
   que por especificidad (1 ID + 3 clases + 4 elementos) le gana a cualquier
   regla nuestra encadenando clases: por eso el texto de las TABLAS seguia en
   #222 sobre fondo oscuro.

   Redefinir las variables corrige de una vez todas las reglas que las usan,
   en lugar de duplicar selectores. Se acota a las mismas dos plantillas donde
   ya se desactivo la inversion; el resto del sitio conserva su paleta.
   =========================================================================== */

/* Solo se redefine --sw-text, que es inequivocamente color de texto.
   --sw-title-blue y --sw-blue NO se tocan: style.css las usa a la vez como
   color de texto Y como fondo (banner del titulo, y el fondo del :hover en el
   menu de sw-page-options). Aclararlas dejaba el hover en azul claro con
   texto blanco encima, ilegible. Los textos se fijan abajo con reglas
   explicitas, que es lo unico que distingue ambos usos. */
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) #content{
    --sw-text: #ffffff;
}

/* bordes de las tablas, para que se distingan las filas sobre fondo oscuro */
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) :is(table, td, th, tr){
    border-color: rgba(255, 255, 255, .15) !important;
}


/* ===========================================================================
   Contenido pegado desde Word con estilos en linea
   ---------------------------------------------------------------------------
   Varias paginas tienen el cuerpo pegado desde Word (se reconoce por
   margin:15.0pt / font-size:18.0pt). Ese HTML trae estilos en linea propios:

       <p style="background-color:white"><span style="color:#333333">...

   El color se corrige solo (nuestras reglas son !important y el inline no lo
   es), pero el background-color:white sobrevive y queda texto blanco sobre
   fondo blanco: ilegible.

   Se neutraliza el fondo SOLO en los elementos que declaran uno propio
   (atributo style con "background", o el bgcolor heredado de tablas viejas),
   sin tocar el resto del contenido.
   =========================================================================== */

body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) article .field--name-body [style*="background"]:not(img):not([class*="goog-te"]),
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) article .field--name-body [bgcolor]{
    background-color: transparent !important;
    background-image: none !important;
}

/* El widget de Google Translate mantiene su fondo claro propio, asi que su
   texto debe seguir siendo oscuro; queda excluido de las reglas de arriba. */
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) :is(.goog-te-gadget, .goog-te-gadget *, [class*="goog-te"] *){
    color: #222222 !important;
}


/* ---------------------------------------------------------------------------
   Widget de Google Translate
   Vive en #block-solucionweb-translate, dentro de .region-header, y ese bloque
   tambien usa .field--name-body. Por eso las reglas de contenido lo estaban
   alcanzando y le dejaban texto blanco sobre su fondo claro propio.
   Ya quedan acotadas a article; aqui se le fija su aspecto nativo.
   --------------------------------------------------------------------------- */
/* El widget queda sobre el header, que en oscuro es #0b0f14, y su propio
   fondo es transparente. Por eso el texto va claro: poner texto oscuro
   dejaba 1.2:1 de contraste. */
body.darkmode--activated :is(#google_translate_element, #google_translate_element *,
#block-solucionweb-translate .goog-te-gadget, #block-solucionweb-translate .goog-te-gadget *){
    color: #e8eef6 !important;
    background-color: transparent !important;
}
body.darkmode--activated #google_translate_element :is(span, a){
    border-color: rgba(255, 255, 255, .25) !important;
}


/* ---------------------------------------------------------------------------
   Menu de las paginas sw-page-options
   Texto aclarado en reposo; en :hover el fondo pasa a --sw-title-blue
   (#00508f) y el texto vuelve a blanco. Se repite la cadena con
   #contentInterno para igualar la especificidad de style.css, que lleva ID.
   --------------------------------------------------------------------------- */
body.darkmode--activated #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco :is(tr td, td > a, .glyphicon){
    color: #cfe0ff !important;
}
body.darkmode--activated #contentInterno:has(article.sw-page-options) article.sw-page-options table.tabla-banco tr:hover :is(td, td > a, .glyphicon){
    color: #ffffff !important;
}


/* ===========================================================================
   Pagina de error (404) / "Consulta nuestra informacion"
   ---------------------------------------------------------------------------
   Cuando no existe la ruta, Drupal sirve este nodo con el webform de consulta.
   No tiene <article>, asi que las reglas de sw-page-text/options no la
   alcanzaban y quedaba con la inversion a medias.
   Se identifica por: bloque de contenido con el webform Y sin article.
   =========================================================================== */

body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) :is(.darkmode-layer, .darkmode-background){
    display: none !important;
}

body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)),
body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) :is(.mm-page, .mm-slideout, #header, .region-content, #content){
    background-color: #0b0f14 !important;
    color: #ffffff;
}

/* Solo el color: el border-radius y el padding los define style.css, para
   que claro y oscuro no puedan quedar con formas distintas. */
body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) #block-solucionweb-content{
    background-color: #1a1a1a !important;
}

body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) :is(p, li, span, strong, em, label, h1, h2, h3, h4, h5, h6, .form-item label){
    color: #ffffff !important;
}
body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) a{
    color: #9ec5ff !important;
}

/* campos del formulario */
body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select){
    background-color: #14181d !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
}
body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) ::placeholder{
    color: rgba(255, 255, 255, .55) !important;
}
/* el boton conserva el azul institucional, que ya contrasta con texto blanco */
body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) :is(button, input[type="submit"], .webform-button--submit){
    color: #ffffff !important;
}
/* barra de navegacion y avisos, que sin inversion volvian al color claro */
body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) :is(.menu--horizontal-menu, #block-solucionweb-cortosinformativos){
    background-color: #12305c !important;
}

/* #content.principal-content trae fondo blanco propio. El panel del contenido
   no lo cubre por completo, y el sobrante quedaba como una franja blanca
   entre el contenido y el footer. Por eso se incluye #content arriba. */


/* ===========================================================================
   Controles de formulario en las plantillas internas
   ---------------------------------------------------------------------------
   normalize.css y bootstrap.min.css declaran:
       button, input, optgroup, select, textarea { color: inherit; }
   Con el tema oscuro el texto heredado es blanco, pero el FONDO del control
   sigue siendo el blanco por defecto del navegador: queda texto blanco sobre
   blanco e invisible (p. ej. los select dentro de .listado-filtro).
   Hay que fijar fondo Y color juntos; con uno solo no basta.

   Nota: el desplegable abierto lo dibuja el sistema. Chrome en Windows/Linux
   respeta el estilo de <option>; macOS lo ignora y usa su apariencia nativa.
   =========================================================================== */

body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) :is(select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], textarea){
    background-color: #14181d !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
}
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) :is(select option, select optgroup){
    background-color: #14181d !important;
    color: #ffffff !important;
}
body.darkmode--activated:is(:has(article.sw-page-text), :has(article.sw-page-options), .page-node-type-preguntas-frecuentes, :has(.faq-accordion-group), .path-search) ::placeholder{
    color: rgba(255, 255, 255, .55) !important;
}

/* mismo tratamiento para los <option> de la pagina de error */
body.darkmode--activated:has(#block-solucionweb-content .webform-submission-form):not(:has(article)) :is(select, select option, select optgroup){
    background-color: #14181d !important;
    color: #ffffff !important;
}


/* La flecha del select se dibuja con un SVG incrustado; en claro es gris
   oscuro y sobre fondo oscuro no se veria. Aqui se sustituye por una clara.
   Se usa background-image (no el shorthand) para no pisar el background-color
   que ya define la regla de controles de formulario. */
body.darkmode--activated .listado-filtro select{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
}


/* ===========================================================================
   Cambio de tema instantaneo
   ---------------------------------------------------------------------------
   darkmode-js anima un circulo que se expande: transform: scale(100) sobre
   .darkmode-layer, que ademas lleva mix-blend-mode: difference. Eso obliga al
   navegador a recomponer y mezclar la pagina COMPLETA en cada fotograma. En
   paginas con imagenes, iframes y el patron de fondo no puede ir a 60fps: se
   ve a tirones y se queda a medias.

   Habia ademas una incoherencia: en las plantillas ya convertidas a CSS
   explicito la capa esta oculta y el cambio era instantaneo, mientras que en
   el resto se animaba. Dos comportamientos distintos en el mismo sitio.

   Se unifica en instantaneo. Es la unica opcion que se ve igual de bien en
   cualquier equipo: una animacion que se traba da peor sensacion que ninguna.
   =========================================================================== */

.darkmode-layer,
.darkmode-layer--button,
.darkmode-layer--simple,
.darkmode-layer--expanded,
.darkmode-background{
    transition: none !important;
    animation: none !important;
}


/* ---------------------------------------------------------------------------
   Acordeon de preguntas frecuentes
   El contenido de este tipo no cuelga de .field--name-body sino de
   .field--name-field-preguntas > .faq-accordion-item > .paragraph--type--
   preguntas-frecuentes, asi que las reglas de texto anteriores no lo
   alcanzaban y el parrafo se quedaba en el #777 heredado del modo claro
   (4.3:1 sobre el fondo oscuro, por debajo del minimo AA de 4.5:1).
   --------------------------------------------------------------------------- */
body.darkmode--activated.page-node-type-preguntas-frecuentes article :is(p, li, td, th, dd, dt, span, div){
    color: #ffffff !important;
}
body.darkmode--activated.page-node-type-preguntas-frecuentes :is(.faq-accordion-question, .faq-accordion-item > .field__label, h2, h3, h4, h5, h6){
    color: #cfe0ff !important;
}
body.darkmode--activated.page-node-type-preguntas-frecuentes article a{
    color: #9ec5ff !important;
}
/* El contenedor del acordeon trae background:#f7f7f7 propio. Sin oscurecerlo,
   el texto blanco quedaba sobre gris claro: 1.1:1, ilegible. */
body.darkmode--activated.page-node-type-preguntas-frecuentes .field--name-field-preguntas{
    background-color: #1a1a1a !important;
}

/* separadores del acordeon, para que las preguntas no se fundan entre si */
body.darkmode--activated.page-node-type-preguntas-frecuentes .faq-accordion-item{
    border-color: rgba(255, 255, 255, .15) !important;
}


/* ===========================================================================
   Resultados de busqueda
   ---------------------------------------------------------------------------
   Los titulos usan el azul por defecto de Bootstrap (#337ab7) y los extractos
   un gris claro: ambos pensados para fondo blanco. Sobre el fondo oscuro se
   pierden. Se identifican por body.path-search.
   =========================================================================== */
body.darkmode--activated.path-search :is(.search-result, .search-results, ol.search-results) :is(p, li, span, div, em, strong, time){
    color: #ffffff !important;
}
body.darkmode--activated.path-search :is(.search-result__title a, .search-results a, .search-result a){
    color: #9ec5ff !important;
}
body.darkmode--activated.path-search :is(.search-result__snippet, .search-snippet-info, .search-result__info){
    color: #d5dde8 !important;
}

/* ===========================================================================
   Campo de busqueda
   ---------------------------------------------------------------------------
   normalize.css y bootstrap declaran color:inherit en los controles, asi que
   el input heredaba el blanco del tema oscuro mientras su fondo seguia siendo
   blanco: texto invisible. El campo conserva su fondo claro por diseno, asi
   que su texto debe ser oscuro.
   =========================================================================== */
body.darkmode--activated :is(#edit-keys, .search-block-form input[type="search"], .search-block-form input[type="text"], #block-solucionweb-formulariodebusqueda input){
    /*color: #222222 !important;
    background-color: #ffffff !important;*/
}
body.darkmode--activated :is(.search-block-form, #block-solucionweb-formulariodebusqueda) ::placeholder{
    color: #666666 !important;
    opacity: 1;
}


/* El texto del boton lo heredaba la regla de enlaces del modo oscuro
   (#9ec5ff). Sobre el azul institucional daba 4.7:1: pasa AA pero no era la
   intencion. Se encadena .btn para ganar por numero de clases, que es lo que
   decide antes que el numero de elementos. */
body.darkmode--activated a.btn.btn-success,
body.darkmode--activated a.btn-success.button--success,
body.darkmode--activated :is(button, input).btn-success{
    color: #ffffff !important;
}


/* ===========================================================================
   Acordeon FAQ: reglas ancladas al propio componente
   ---------------------------------------------------------------------------
   El acordeon aparece en al menos tres contextos distintos: nodos del tipo
   preguntas_frecuentes (/node/5840), una vista sin <article>
   (/preguntas-frecuentes) y paginas sw-page-text (/page/preguntas-frecuentes).
   Anclar por tipo de contenido o por article deja fuera alguno de ellos, asi
   que aqui se ancla al componente, que es lo unico comun a los tres.
   =========================================================================== */
body.darkmode--activated:has(.faq-accordion-group) :is(.faq-accordion-group, .faq-accordion-item, .faq-accordion-group .view-content, .faq-accordion-group .views-row){
    background-color: #1a1a1a !important;
}
body.darkmode--activated:has(.faq-accordion-group) .faq-accordion-item :is(p, li, td, th, dd, dt, span, div){
    color: #ffffff !important;
}
body.darkmode--activated:has(.faq-accordion-group) :is(.faq-accordion-question, .field--name-field-pregunta, .faq-accordion-item h2, .faq-accordion-item h3, .faq-accordion-item h4){
    color: #cfe0ff !important;
}
body.darkmode--activated:has(.faq-accordion-group) .faq-accordion-item a{
    color: #9ec5ff !important;
}
body.darkmode--activated:has(.faq-accordion-group) .faq-accordion-item{
    border-color: rgba(255, 255, 255, .15) !important;
}


/* La tarjeta que envuelve el acordeon es .views-row y esta POR ENCIMA de
   .faq-accordion-group en el arbol, no dentro: por eso la regla anterior, que
   la buscaba como descendiente, no la alcanzaba. Traia #f7f7f7 propio. */
body.darkmode--activated:has(.faq-accordion-group) .views-row{
    background-color: #1a1a1a !important;
}
body.darkmode--activated:has(.faq-accordion-group) :is(.views-field-title .field-content, .views-field-title a){
    color: #cfe0ff !important;
}

/* ===========================================================================
   Pagina de resultados de busqueda
   ---------------------------------------------------------------------------
   Las pestanas de administracion (Contenido / Help / Usuarios) usan el azul
   institucional, ilegible sobre el fondo oscuro.
   =========================================================================== */
body.darkmode--activated.path-search :is(.tabs a, .tabs__tab a, ul.tabs a, .tabs li a){
    color: #cfe0ff !important;
}

/* La pagina de resultados de busqueda quedaba fuera del grupo anterior, asi
   que la capa de inversion seguia activa ahi. Los botones de tipografia
   declaran rgb(0,163,207) y la mezcla "difference" los convertia en
   rgb(255,92,48): el naranja que se veia solo en modo oscuro. Lo mismo
   afectaba al selector de idioma.
   Al entrar .path-search en el grupo, la inversion se desactiva y los colores
   declarados se respetan tal cual, como en la portada. */

/* NOTA: el elemento 'font' se retiro deliberadamente de las listas de
   selectores de este archivo. Google Translate envuelve cada nodo de texto
   en <font dir="auto" style="vertical-align: inherit;">, y esos wrappers
   pasan a ser los que dibujan el texto. Al incluir 'font' en la lista, las
   declaraciones con !important los aplastaban: el h2 conservaba sus 27px
   pero su <font> computaba 15px, y el <a> seguia azul mientras su <font>
   computaba rgb(34,34,34). De ahi los titulos chicos y los enlaces negros
   al cambiar a ingles. En espanol no hay ni un <font> en el contenido, asi
   que incluirlo no aportaba nada. Sin el, los wrappers heredan del elemento
   real y el estilo se respeta en los dos idiomas. NO volver a agregarlo. */

/* ===========================================================================
   Funcionarios Superiores (nodo 4251) en modo oscuro
   ---------------------------------------------------------------------------
   El article lleva .sw-page-text, asi que la seccion 1 de este archivo ya
   anula la capa de inversion de darkmode-js en esta pagina: los colores
   declarados aqui se aplican literales, sin invertirse.

   Igual que en claro: el .field--name-body no se toca. El panel es el
   <ul type="disc"> y
   cada tarjeta un tono por encima. !important porque el contenido trae los
   colores en linea.
   =========================================================================== */
body.darkmode--activated.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"]{
    background: linear-gradient(180deg, #0e1a2b 0%, #0b1522 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
}
body.darkmode--activated.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"] > li{
    background: #16263f !important;
    color: #dfe7f2 !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-left: 3px solid #4d8fd6 !important;
    box-shadow: none !important;
}
body.darkmode--activated.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"] > li *{
    color: #c7d0dc !important;
}
body.darkmode--activated.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"] > li:hover{
    background: #1c3252 !important;
    border-left-color: #9ec5ff !important;
}
/* el nombre, en el azul claro de la paleta oscura */
body.darkmode--activated.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"] > li > span:first-child,
body.darkmode--activated.node-4251 #block-solucionweb-content .field--name-body > ul[type="disc"] > li > span:first-child *{
    color: #9ec5ff !important;
    font-weight: 600 !important;
}