/* Paleta clara. Se carga después del <style> de cada página, pero lo que la hace ganar es la
   especificidad: `:root[data-tema="claro"]` pesa más que `:root`, así que no importa el orden.

   Solo se redefinen VARIABLES. Todo color estructural del sitio pasa por una de ellas —si algún
   día aparece un #0f1829 escrito a mano en una página, esa caja se va a quedar oscura en modo
   claro, y ese es el aviso de que hay que llevarlo a variable. */

/* ---- familia principal (portada, arriendos, alimentos, combustible, farmacia, ferretería, …) ---- */
:root[data-tema="claro"]{
  --bg:#f7f8fb; --bg2:#eef1f7; --deep:#e9edf4;
  --panel:#ffffff; --panel2:#f4f6fa;
  --line:#dde3ee; --line2:#c3ccdd;
  --ink:#0d1526; --muted:#4a5871; --faint:#76839c;
  --accent:#2b56d8; --accent2:#b57200;
  --up:#0f9d68; --down:#d93a4c;
  /* qué tinta va ENCIMA de los colores de marca: en claro el acento se oscurece, así que el
     texto pasa a blanco. Si esto no se invierte, los botones quedan azul sobre azul. */
  --sobre-accent:#ffffff; --sobre-accent2:#ffffff;
  --ok-bg:#e7f6ec; --ok-line:#a9dcbb;
  /* superficies translúcidas: la barra pegada arriba, el velo del modal, el velo que tapa un
     dato bloqueado, y la sombra. En claro todas se dan vuelta o casi desaparecen. */
  --barra:rgba(255,255,255,.9); --velo:rgba(13,21,38,.42);
  --velo-caja:rgba(247,248,251,.78); --sombra-f:rgba(13,21,38,.13);
}
/* En claro, el índice de alimentos y los que invierten los colores siguen invirtiéndolos:
   cada página define --up/--down después, así que acá solo se fija el par base. */

/* ---- la rampa del mapa de calor ----
   Son SIETE tramos, --b1 a --b7, y van completos o no van. Definir solo algunos deja la
   escala partida: pasó con b1–b3 en claro y b4–b7 en oscuro, y el resultado era rojos
   pastel arriba con verdes oscuros abajo, sin continuidad. Cada tramo necesita su par
   -bg (fondo) e -ink (tinta). Los valores oscuros viven en el `:root` de cada página,
   como el resto de la paleta; acá van solo las vueltas del tema claro. ---- */

/* ---- familia de ETFs (paleta propia, estilo terminal de mercado) ---- */
:root[data-tema="claro"]{
  --fondo:#ffffff; --fondo2:#f5f7fa; --borde:#d5dce6; --borde2:#e6ebf2;
  --texto:#0d1117; --texto2:#3b4657; --tenue:#5f6b7d;
  --acento:#1f6feb; --verde:#137a35; --rojo:#c62d26;
  /* El tooltip del mapa sigue siendo oscuro en tema claro —es un panel flotante sobre
     ladrillos pastel— así que su tinta NO se da vuelta: se repite clara. Si tomara
     `--texto`, que en claro es casi negro, quedaría negro sobre azul oscuro. */
  --tip-bg:#1b2231ee; --tip-ink:#eef2f8; --tip-ink2:#a9b4c6;
  --velo:#0d152699; --sombra:#0d152626;
  /* La rampa del mapa de calor, los siete tramos. En oscuro son bloques saturados con
     letra clara; en claro se dan vuelta: fondo pastel y letra fuerte. Tienen que estar
     las SIETE o la escala queda partida —pasó: con solo tres definidas, en tema claro los
     tramos 1 a 3 salían pastel y los 4 a 7 seguían siendo bloques oscuros. */
  --b1-bg:#fde7e7; --b1-ink:#8a1f1f; --b2-bg:#fbdcdc; --b2-ink:#8f2020; --b3-bg:#fbe6de; --b3-ink:#8a3a24;
  --b4-bg:#eef1f6; --b4-ink:#41506a; --b5-bg:#e2f4e9; --b5-ink:#1c6b3e;
  --b6-bg:#d5f0e0; --b6-ink:#156237; --b7-bg:#c6ecd6; --b7-ink:#0f5730;
}

/* ---- el interruptor ---- */
.tema-btn{
  background:transparent; border:1px solid var(--line,var(--borde,#30363d));
  color:var(--faint,var(--tenue,#8b949e)); border-radius:9px;
  width:32px; height:32px; line-height:1; font-size:14px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
  transition:color .15s, border-color .15s;
}
.tema-btn:hover{ color:var(--accent,var(--acento,#58a6ff)); border-color:var(--accent,var(--acento,#58a6ff)); }

/* En claro, las sombras negras del modo oscuro se ven como manchas: se suavizan de una vez. */
:root[data-tema="claro"] .uno{ box-shadow:0 0 0 1px rgba(43,86,216,.10), 0 14px 40px rgba(13,21,38,.09) !important; }
:root[data-tema="claro"] img, :root[data-tema="claro"] .logo i{ filter:none; }

/* ---- el logo (21-sep-2026) ----
   Cada página lleva dos imágenes: /logo-claro.png (letras claras, para el fondo oscuro, visible
   por defecto) y /logo.png (oculta con estilo en línea, para que una página sin este archivo no
   muestre las dos). En claro se dan vuelta con !important, que es lo único que le gana al estilo
   en línea. `multiply` borra el fondo blanco de /logo.png sobre fondos casi blancos. Las dos se
   reemplazan desde el panel de ops (🏢 Sitios → Logo de Indx). */
:root[data-tema="claro"] .logo-marca .en-oscuro{ display:none !important; }
:root[data-tema="claro"] .logo-marca .en-claro{ display:block !important; mix-blend-mode:multiply; }
.logo-marca{ display:inline-flex !important; align-items:center; text-decoration:none; }