/* Tema Datacivis para tableros-datacivis.pages.dev
   Lleva el portal y los tableros a la paleta y tipografía de datacivis.com
   (Sora para títulos, Manrope para texto; azules #0b2f53 / #0b4d79 / #1e9bd7).
   Uso: <link rel="stylesheet" href="/assets/datacivis-tema.css"> en cada página.
   Los selectores llevan "html" adelante para ganarle a los estilos propios de cada
   tablero sin importar dónde estén en la página. No cambia las escalas de los mapas. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap");

/* Oscuro (por defecto de los tableros, o si el sistema está en modo oscuro) */
html:root{
  --bg:#08131f; --surface:#0f2133; --surface2:#13283d; --panel:#0f2133;
  --line:#1d3448; --fg:#e7f0f8; --muted:#94a8bb; --faint:#8196ab; --ink:#cfe6f7;
  --aqua:#4cb8ec; --orange:#f2b544;
  --bar:#2b8fc4; --bar-sel:#4cb8ec; --bar-dim:#22405c; --grid:#172b3d;
  --tip-bg:#e7f0f8; --tip-fg:#08131f; --hero-shade:rgba(5,12,20,.86);
  --font-display:"Sora","Manrope",system-ui,sans-serif;
  --font-body:"Manrope","Avenir Next","Segoe UI",system-ui,sans-serif;
}
/* Claro (sistema en modo claro, o tablero puesto en claro) */
@media (prefers-color-scheme: light){
  html:root:not([data-theme="dark"]){
    --bg:#f2f7fc; --surface:#ffffff; --surface2:#e8f0f8; --panel:#ffffff;
    --line:#d5e1ec; --fg:#0f2438; --muted:#566b80; --faint:#5f7287; --ink:#0b2f53;
    --aqua:#0b4d79; --orange:#925d0a;
    --bar:#1e9bd7; --bar-sel:#0b4d79; --bar-dim:#c9d9e8; --grid:#e5edf5;
    --tip-bg:#0b2f53; --tip-fg:#f2f7fc;
  }
}
html:root[data-theme="light"]{
  --bg:#f2f7fc; --surface:#ffffff; --surface2:#e8f0f8; --panel:#ffffff;
  --line:#d5e1ec; --fg:#0f2438; --muted:#566b80; --faint:#5f7287; --ink:#0b2f53;
  --aqua:#0b4d79; --orange:#925d0a;
  --bar:#1e9bd7; --bar-sel:#0b4d79; --bar-dim:#c9d9e8; --grid:#e5edf5;
  --tip-bg:#0b2f53; --tip-fg:#f2f7fc;
}
html:root[data-theme="dark"]{
  --bg:#08131f; --surface:#0f2133; --surface2:#13283d; --panel:#0f2133;
  --line:#1d3448; --fg:#e7f0f8; --muted:#94a8bb; --faint:#8196ab; --ink:#cfe6f7;
  --aqua:#4cb8ec; --orange:#f2b544;
  --bar:#2b8fc4; --bar-sel:#4cb8ec; --bar-dim:#22405c; --grid:#172b3d;
  --tip-bg:#e7f0f8; --tip-fg:#08131f;
}

/* Portal: tipografía y tarjetas como en datacivis.com */
html body{font-family:var(--font-body)}
html h1, html h2, html h3{font-family:var(--font-display);font-stretch:normal;letter-spacing:-.015em}
html .card{border-radius:20px;padding:22px 22px 20px}
html .card:hover{border-color:var(--aqua);box-shadow:0 18px 40px rgba(15,36,56,.12)}
html .kind{border:0;border-radius:100px;padding:5px 10px;font-weight:800;background:color-mix(in srgb,currentColor 12%,transparent)}
html .brand{color:var(--aqua)}

/* Barra superior de marca (portal) */
.dcv-bar{background:#161617;border-bottom:1px solid #2c2c2e}
.dcv-bar-in{max-width:1120px;margin:0 auto;padding:0 20px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.dcv-bar img{display:block;width:128px;height:16px}
.dcv-bar nav{display:flex;gap:22px;font:600 14px/1 var(--font-body)}
.dcv-bar nav a{color:#d1d1d6;text-decoration:none}
.dcv-bar nav a:hover{color:#ffffff}
@media (max-width:560px){.dcv-bar nav{gap:14px;font-size:13px}}