/* --------------------------------------------------------------------------
   Arreglo del modo noche.

   El sistema visual no tenía variable para la crema de las tarjetas y la
   cabecera (#f4efe1) ni para su borde (#e2d9c4): estaban escritos a mano en
   cada página, así que el modo noche no podía cambiarlos y quedaban fondos
   claros con el texto ya en blanco. Aquí se declaran como variables y se les
   da su valor de noche.
   -------------------------------------------------------------------------- */
:root {
  --color-card: #f4efe1;
  --color-card-line: #e2d9c4;
}

[data-jl-tema="noche"],
[data-jl-tema="noche"] body {
  --color-card: #1e232b;
  --color-card-line: #333a45;
}

/* Las imágenes con fondo blanco de fábrica cantan mucho sobre el fondo oscuro */
[data-jl-tema="noche"] img[src$=".png"] {
  background: #20242c;
}

/* Las fotos de producto con fondo blanco van con mix-blend-mode:multiply para
   que en el modo día el blanco se funda con la tarjeta. En el modo noche,
   multiplicar contra un fondo oscuro las deja casi negras (los kits de la
   portada y de la calculadora no se veían, 01/10). Se muestran tal cual,
   sobre su blanco de origen. Se busca «multiply» en el atributo style porque
   el runtime puede escribirlo con o sin espacio. */
[data-jl-tema="noche"] img[style*="multiply"],
[data-jl-tema="noche"] [data-jl-funde] {
  mix-blend-mode: normal !important;
  background: #fff !important;
  border-radius: .6rem;
}

/* --------------------------------------------------------------------------
   PENDIENTE, y a propósito sin parchear.

   Medido en el navegador: en modo noche quedan ~9 sitios con texto ilegible
   (texto claro sobre el amarillo de marca, y texto oscuro sobre superficies ya
   oscuras). Vienen del propio diseño, no de la copia.

   Se intentó arreglar con selectores del tipo [style*="--color-yellow"] y SALIÓ
   PEOR (de 9 a 19): ese selector caza también el texto amarillo, no solo los
   fondos amarillos, y volvía blanco un texto que iba sobre amarillo.

   Lo que hace falta es una pasada de diseño decidiendo, para cada superficie de
   marca, qué color de texto lleva en cada tema. No se puede deducir con un
   selector. Ver docs/ESTADO.md.
   -------------------------------------------------------------------------- */

/* Un formulario dentro de una franja amarilla (el de Trabaja): la regla que
   pone el texto oscuro sobre amarillo también lo ponía dentro de la tarjeta del
   formulario, que en modo noche es oscura. Ahí dentro, texto claro (01/10). */
[data-jl-tema="noche"] [data-jl-bg="yellow"] form,
[data-jl-tema="noche"] [data-jl-bg="yellow"] form * {
  color: var(--color-ink) !important;
}