/* estilo.css — fondos, letras y colores del frontend de /Bolsa (2026-09-20).
   Un solo sitio para cambiar el aspecto de TODAS las paginas nuevas.
   Las paginas de InfDiario y miInfDiario NO usan esto: llevan el suyo. */
:root{
  /* letras */
  --tipo: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, Arial, sans-serif;
  --tipo-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --cuerpo: 16px; --linea: 1.5;
  /* fondos y tintas */
  --fondo: #eef2f7;          /* fondo general */
  --papel: #ffffff;          /* tarjetas */
  --papel-2: #f7f9fc;        /* zonas suaves dentro de una tarjeta */
  --tinta: #16202b;          /* texto principal */
  --tinta-2: #56657a;        /* texto secundario */
  --tinta-3: #8090a2;        /* rotulos */
  --borde: #e3e9f0;
  --marca: #0a5b74;          /* azul de la casa */
  --marca-2: #26a69a;        /* verde de la casa */
  --acento: #ffd166;
  --sombra: 0 8px 22px rgba(16,32,48,.12);
  --sombra-alta: 0 16px 34px rgba(16,32,48,.20);
  --radio: 16px;
}
/* Modo oscuro del sistema: mismos elementos, otra paleta. */
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#0d1b2a; --papel:#12263a; --papel-2:#0e2133;
    --tinta:#e8eff5; --tinta-2:#a9bccd; --tinta-3:#7d94a8;
    --borde:#1d3a52;
    --sombra: 0 8px 22px rgba(0,0,0,.45); --sombra-alta: 0 16px 34px rgba(0,0,0,.55);
  }
}

/* ── Fondos: los MISMOS cuatro de PanelIA.html (claro, papel, azul, oscuro) ──
   Los elige el visitante con el selector de la cabecera (tema.js) y se recuerda
   en su navegador. Sin elegir nada, sigue al modo del sistema. (2026-09-20) */
:root[data-tema="claro"]{
  --fondo:#f4f6fa; --papel:#ffffff; --papel-2:#eef2f8; --borde:#d3dbe8;
  --tinta:#1c2533; --tinta-2:#5d6b82; --tinta-3:#7d8ba1; --marca:#0d9488; --marca-2:#0e7490;
}
:root[data-tema="papel"]{
  --fondo:#faf6ef; --papel:#fffdf8; --papel-2:#f3ecdf; --borde:#d9cdb4;
  --tinta:#3f3a30; --tinta-2:#776d59; --tinta-3:#9a8f78; --marca:#0f766e; --marca-2:#1d6b5b;
}
:root[data-tema="azul"]{
  --fondo:#f0f6ff; --papel:#ffffff; --papel-2:#e6effc; --borde:#bcd2ea;
  --tinta:#16324f; --tinta-2:#47678a; --tinta-3:#6b87a6; --marca:#0e7490; --marca-2:#0a5b74;
}
:root[data-tema="oscuro"]{
  --fondo:#0d1117; --papel:#161b22; --papel-2:#1e2735; --borde:#30363d;
  --tinta:#e6edf3; --tinta-2:#8b949e; --tinta-3:#768192; --marca:#2dd4bf; --marca-2:#26a69a;
  --sombra:0 8px 22px rgba(0,0,0,.45); --sombra-alta:0 16px 34px rgba(0,0,0,.55);
}
/* ── Letra: tres tamanos, tambien a eleccion del visitante ── */
:root[data-letra="normal"]{--cuerpo:16px}
:root[data-letra="grande"]{--cuerpo:18px}
:root[data-letra="mayor"]{--cuerpo:20px}

/* ── Selector de la cabecera ── */
.ajustes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.ajustes label{font-size:13px;color:#cfe9f2;display:flex;align-items:center;gap:6px}
.ajustes select{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4);
  border-radius:8px;padding:5px 10px;font:600 13px var(--tipo);cursor:pointer}
.ajustes select option{color:#16202b;background:#fff}

*{box-sizing:border-box}
html,body{margin:0}
body{font:var(--cuerpo)/var(--linea) var(--tipo); color:var(--tinta); background:var(--fondo);
     -webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.25;margin:0 0 6px}
a{color:var(--marca)}
code,kbd,.mono{font-family:var(--tipo-mono)}

.cabecera-sitio{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,#07344a,var(--marca) 55%,var(--marca-2));
  color:#fff;padding:34px 24px 30px}
.cabecera-sitio h1{font-size:30px;letter-spacing:.2px}
.cabecera-sitio .titulo{flex:1 1 auto}
.cabecera-sitio p{margin:6px 0 0;color:#cfe9f2;font-size:15px}
.cabecera-sitio a{color:#cfe9f2;text-decoration:none;font-weight:600;font-size:14px}

.tarjeta{background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden}
.pie-sitio{max-width:1180px;margin:0 auto;padding:0 18px 34px;color:var(--tinta-3);font-size:13px}