/* ---------------------------------------------------------------------------
   Modo oscuro.

   El diseño de la referencia no lo tiene: esto es nuestro. Vale la misma regla
   que en `marca.css` — `style.css` NO se toca—, así que todo cuelga de
   `html[data-tema="oscuro"]`, que pone el script del `<head>` antes de pintar.

   No es una inversión ciega. Se auditó con Playwright qué colores se pintan de
   verdad en las 21 páginas, y son pocos: el texto sale casi todo de
   `--main-dark`, los grises de `--warm-gray` y `--rules`, y el resto son una
   veintena de literales. Eso es lo que hay aquí.

   Tres decisiones que explican el resto:

   · `--main-dark` es el color del TEXTO, y aquí se aclara. Como `marca.css`
     hace que el acento salga de él, el acento pasa a claro solo, que es
     justo lo que pide la regla de la marca: negro sobre claro, blanco sobre
     oscuro. Los fondos negros del submenú NO salen de ahí, sino de
     `--marca-negro`, y por eso siguen siendo negros.
   · Lo que ya era oscuro en modo claro —el héroe, los banners con foto, el
     pie, el submenú, el aviso de cookies— no se toca. Ya estaba bien.
   · Las fotografías no se filtran ni se atenúan. Son de un fotógrafo y se ven
     como son.
   --------------------------------------------------------------------------- */

html[data-tema="oscuro"] {
  /* Que los controles del navegador —scroll, selects, autorelleno— vayan en
     oscuro también. Sin esto salen cajas blancas en mitad de la página. */
  color-scheme: dark;

  --main-dark: #ece8e6;
  --warm-gray: #a49b99;
  --rules: #34302f;
}

/* --------------------------------------------------------------------------
   Superficies
   -------------------------------------------------------------------------- */

html[data-tema="oscuro"] body,
html[data-tema="oscuro"] #header,
html[data-tema="oscuro"] body.services #banner,
html[data-tema="oscuro"] body.contact-item #banner {
  background: #101010;
}

/* Las bandas de sección, un punto por encima del fondo */
html[data-tema="oscuro"] #bottomContent,
html[data-tema="oscuro"] #bottomSpotlights,
html[data-tema="oscuro"] .bottomContentText,
html[data-tema="oscuro"] #bannerExtras,
html[data-tema="oscuro"] #subscribeLink,
html[data-tema="oscuro"] #areaBrochure a {
  background: #171615;
}

/* Las tarjetas, otro punto más */
html[data-tema="oscuro"] #bottomSpotlights .results_list > li > a {
  background: #1d1b1a;
}

html[data-tema="oscuro"] #officeList li {
  background: #26221f;
}

/* Las cifras escalonadas llevan fondo propio —no es decorativo: tapa el borde
   de la caja por detrás del número, que sube 40 px y lo cruza—. Ese fondo es
   el de la página, así que aquí es el oscuro. Sin esto, cada cifra sale en un
   recuadro blanco. */
html[data-tema="oscuro"] #staggeredSpotlights .title {
  background: #101010;
}

/* --------------------------------------------------------------------------
   Texto que no sale de `--main-dark`
   -------------------------------------------------------------------------- */

html[data-tema="oscuro"] h4,
html[data-tema="oscuro"] #emailSignupForm h2,
html[data-tema="oscuro"] .newsList .title,
html[data-tema="oscuro"] .blogPosts div.title,
html[data-tema="oscuro"] #bannerContent {
  color: var(--main-dark);
}

/* El menú va en negro literal, no con el token, así que en oscuro se quedaba
   negro sobre negro. Sólo el primer nivel: los enlaces del submenú y los del
   menú móvil van sobre fondo negro y ya estaban en blanco. Sobre el héroe
   manda `home.css`, que tiene más especificidad, y siguen en blanco. */
html[data-tema="oscuro"] #mainNav > ul > li > a,
html[data-tema="oscuro"] #mainNav > ul > li.current:nth-child(n + 4) > a {
  color: var(--main-dark);
}

/* Las tres barras del botón de menú, por lo mismo */
html[data-tema="oscuro"] .mobileNavBox span {
  background-color: var(--main-dark);
}

html[data-tema="oscuro"] #bannerExtras #bannerIntro a,
html[data-tema="oscuro"] .bottomContentText .view_more a:not(:hover):not(:focus) {
  color: var(--warm-gray);
}

/* Los enlaces dentro de las entradas del blog llevaban el azul de la
   referencia (#005f8b), que no es de esta marca. Van con el acento. */
html[data-tema="oscuro"] .blogPosts a {
  color: var(--main-dark);
}

/* --------------------------------------------------------------------------
   El velo del banner claro
   En modo claro, las fichas de área y de oficina llevan un velo casi blanco
   que tapa el 40 % izquierdo de la foto para que el titular se lea. En oscuro
   ese velo es el fondo oscuro: mismo papel, color contrario.
   -------------------------------------------------------------------------- */

html[data-tema="oscuro"] #banner #bannerImage::after {
  background: #101010;
}

@media (min-width: 1024px) {
  html[data-tema="oscuro"] #banner #bannerImage::after {
    background: linear-gradient(to right, rgba(16, 16, 16, 1) 40%, rgba(16, 16, 16, 0) 80%);
  }
}

/* La misma pareja, en la foto del perfil del equipo */
@media (min-width: 768px) {
  html[data-tema="oscuro"] #bioPhoto::after {
    background: linear-gradient(to right, rgba(16, 16, 16, 1) 20%, rgba(16, 16, 16, 0) 50%);
  }
}

/* --------------------------------------------------------------------------
   Lo que se pinta CON el acento encima
   El acento es claro en oscuro, así que lo que va sobre él tiene que ser
   oscuro: si no, quedaría blanco sobre blanco.
   -------------------------------------------------------------------------- */

html[data-tema="oscuro"] .expandableHeading.expanded button,
html[data-tema="oscuro"] h2.sectionTitle.isOpen,
html[data-tema="oscuro"] #bottomContent .expandableHeading.expanded button,
html[data-tema="oscuro"] #bottomContent :not(#lowerContent) .expandableHeading.expanded button,
html[data-tema="oscuro"] p.expandButton button:is(:hover, :focus),
html[data-tema="oscuro"] button.toggleExpand:is(:hover, :focus),
html[data-tema="oscuro"] .view_more a:is(:hover, :focus),
html[data-tema="oscuro"] #subscribeLink:is(:hover, :focus),
html[data-tema="oscuro"] #areaBrochure a:is(:hover, :focus),
html[data-tema="oscuro"] :is(input[type="submit"], button[type="submit"], .standardButton):is(:hover, :focus) {
  color: #101010;
}

html[data-tema="oscuro"] #bottomSpotlights .circlelink svg .svgInnards,
html[data-tema="oscuro"] .circlelink svg .svgInnards {
  fill: #101010;
}

/* El tinte de hover de tarjetas y desplegables: el gris claro de `marca.css`
   pasa a un gris oscuro, con la misma distancia respecto del fondo. */
html[data-tema="oscuro"] .expandableHeading button:is(:hover, :focus),
html[data-tema="oscuro"] #bottomContent :not(#lowerContent) .expandableHeading button:is(:hover, :focus),
html[data-tema="oscuro"] #bottomSpotlights a:is(:hover, :focus) {
  background: #2a2726 !important;
}

/* Los enlaces de salto —«Ir al contenido», «Ir al menú», «Volver arriba»—
   sólo aparecen al tabular, y lo hacen sobre un rectángulo blanco. Con el
   texto ya en claro, quedaban ilegibles justo para quien más los necesita.

   OJO con el `:focus`: su hoja los esconde con `background: transparent
   !important` mientras no tienen el foco, pero eso no apaga un `box-shadow`.
   Sin acotarlo, el filo se veía SIEMPRE, y en la portada —donde la cabecera
   es transparente sobre la foto— salían dos recuadros flotando arriba. */
html[data-tema="oscuro"] .contentJump:focus {
  background: #101010;
  box-shadow: inset 0 0 0 1px #34302f;
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

html[data-tema="oscuro"] input:not([type="radio"]):not([type="checkbox"]),
html[data-tema="oscuro"] textarea,
html[data-tema="oscuro"] select {
  background-color: #1d1b1a;
  color: var(--main-dark);
  border-color: var(--rules);
}

/* --------------------------------------------------------------------------
   Lo nuestro: el marcador de retrato y los datos legales pendientes
   -------------------------------------------------------------------------- */

html[data-tema="oscuro"] .bioList .photo:has(.retrato-pendiente) {
  background: #1d1b1a;
}
html[data-tema="oscuro"] .retrato-pendiente {
  color: #5f5855;
}
/* El rojo de «falta este dato» no se lee sobre fondo oscuro: sube de tono lo
   justo para pasar de 4,5:1 sin dejar de leerse como aviso. */
html[data-tema="oscuro"] #mainContent dl.datos dd.dato-pendiente {
  color: #ff8b7a;
}