/* ── El atributo hidden, que de verdad oculte ───────────────────────────
   «hidden» solo vale «display: none» de la hoja del navegador, y cualquier
   regla propia le gana: los estilos de autor mandan sobre los del
   navegador, sin importar la especificidad.
   Aqui costo caro: «.menu a { display: flex }» dejaba a la vista los
   modulos de administracion para un investigador. El servidor los protegia
   -responde 403- pero la interfaz le ofrecia puertas que daban a un error.
   Ya se habia parcheado dos veces caso por caso; esto lo arregla de raiz. */
[hidden] { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════
   OBSERVATORIO DE DATOS DEL MAULE
   Sistema de diseño institucional elegante · v3.0
   Paleta: azul marino + dorado + acentos burdeos
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Paleta principal */
  --navy-900: #0a1f3a;
  --navy-800: #0f2b52;
  --navy-700: #153f6f;
  --navy-600: #1d5491;
  --navy-500: #2870b8;
  --navy-400: #4a8fd1;
  --navy-300: #7db1e0;
  --navy-100: #e4eef9;
  --navy-50:  #f2f7fc;

  --gold-700: #8a6511;
  --gold-600: #b38620;
  --gold-500: #d4a72c;
  --gold-400: #e4bf5a;
  --gold-100: #faf1da;

  --burgundy-700: #6d1324;
  --burgundy-600: #941c31;
  --burgundy-500: #b72a42;
  --burgundy-100: #fae7ea;

  --teal-600: #0d7377;
  --teal-500: #14a098;
  --teal-100: #dcf4f2;

  --green-600: #1d6b4a;
  --green-500: #2a9567;
  --green-100: #dff2e8;

  /* Neutros */
  --ink-900: #0c1c2e;
  --ink-800: #142538;
  --ink-700: #1e3148;
  --ink-600: #2f4761;
  --ink-500: #4b6380;
  --ink-400: #718aa6;
  --ink-300: #a4b6cc;
  --ink-200: #cfd9e6;
  --ink-100: #e6edf5;
  --ink-50:  #f5f8fc;
  --paper:   #ffffff;
  --cream:   #fbf8f2;

  /* Semánticos */
  --bg:        #f6f9fd;
  --bg-dim:    #eef3f9;
  --surface:   #ffffff;
  --surface-2: #fafcff;
  --border:    #e0e8f2;
  --border-strong: #c6d3e3;

  --text:  var(--ink-900);
  --muted: var(--ink-500);
  --dim:   var(--ink-400);

  /* Tipografía */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --font-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Radios */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px;

  /* Sombras */
  --sh-xs: 0 1px 2px rgba(10, 31, 58, 0.04);
  --sh-sm: 0 2px 6px rgba(10, 31, 58, 0.06), 0 1px 2px rgba(10, 31, 58, 0.04);
  --sh-md: 0 8px 24px rgba(10, 31, 58, 0.08), 0 2px 6px rgba(10, 31, 58, 0.04);
  --sh-lg: 0 20px 48px rgba(10, 31, 58, 0.12), 0 4px 12px rgba(10, 31, 58, 0.06);
  --sh-xl: 0 32px 80px rgba(10, 31, 58, 0.18), 0 8px 24px rgba(10, 31, 58, 0.08);
  --sh-gold: 0 10px 32px rgba(212, 167, 44, 0.32);
  --sh-navy: 0 10px 32px rgba(21, 63, 111, 0.28);

  /* Transiciones */
  --t-fast: 0.15s ease;
  --t-med:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══ RESET ═══ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(at 10% 0%, rgba(21, 63, 111, 0.04) 0%, transparent 40%),
    radial-gradient(at 90% 10%, rgba(212, 167, 44, 0.035) 0%, transparent 40%);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--navy-900); }
h1 { font-size: clamp(36px, 4.5vw, 58px); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: 20px; }

.container, .nav-inner, .topbar-inner, .footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* ═══ TOPBAR ═══ */
.topbar {
  background: linear-gradient(95deg, var(--navy-900) 0%, var(--navy-800) 50%, var(--navy-700) 100%);
  color: rgba(255, 255, 255, 0.9);
  padding: 10px 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-bottom: 2px solid var(--gold-500);
  position: relative;
  z-index: 1200;
  overflow: hidden;
}
.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212, 167, 44, 0.08) 50%, transparent);
  animation: shimmer 8s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.topbar-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.topbar-meta { display: flex; align-items: center; gap: 18px; }
.topbar-meta span { display: inline-flex; align-items: center; gap: 6px; }
.topbar-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 8px var(--gold-400); }
.topbar-meta .live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3fd673;
  box-shadow: 0 0 0 0 rgba(63, 214, 115, 0.7);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(63, 214, 115, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(63, 214, 115, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 214, 115, 0); }
}

/* ═══ NAV ═══ */
.nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-xs);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 28px;
}
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand-logo {
  /* Sin tarjeta ni fondo: el emblema va directo sobre lo que haya detras.
     Se pinta con una mascara para que tome el color del contexto —oscuro en
     la cabecera clara, blanco en el pie oscuro— con un solo archivo. */
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: block;
  /* Reserva: si el navegador no soporta mascaras, se ve la imagen tal cual */
  background: url('/assets/logo-maule-oscuro.png') center / contain no-repeat;
}

@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .brand-logo {
    background: currentColor;
    -webkit-mask: url('/assets/logo-maule.png') center / contain no-repeat;
            mask: url('/assets/logo-maule.png') center / contain no-repeat;
  }
}

/* Cabecera: tinta institucional sobre fondo claro */
.brand { color: var(--navy-700); }
/* Pie: el fondo es azul oscuro, el emblema va en claro */
.footer-brand .brand-logo,
.footer .brand-logo { color: #fff; }
.brand small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 3px;
}
.brand strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy-900);
  letter-spacing: -0.015em;
}

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  border: none;
  background: none;
  border-radius: 9px;
  color: var(--ink-600);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-links a:hover,
.nav-trigger:hover { color: var(--navy-800); background: var(--navy-50); }

/* Activo: una linea fina abajo en vez de un bloque de color.
   Se lee igual y no compite con los botones de la derecha. */
.nav-links > a.active,
.nav-trigger.active { color: var(--navy-900); }
.nav-links > a.active::after,
.nav-trigger.active::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--navy-600), var(--gold-500));
}

/* ── Desplegable de modulos ── */
.nav-group { position: relative; }
.nav-trigger svg { transition: transform var(--t-fast); opacity: .6; }
.nav-group.abierto .nav-trigger svg { transform: rotate(180deg); }
.nav-group.abierto .nav-trigger { color: var(--navy-900); background: var(--navy-50); }

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 232px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(9, 30, 60, 0.14);
  display: none;
  z-index: 20;
}
.nav-group.abierto .nav-menu { display: block; animation: navAparece .16s ease both; }
@keyframes navAparece { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.nav-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink-700);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-menu a:hover { background: var(--navy-50); color: var(--navy-800); }
.nav-menu a.active { color: var(--navy-900); background: var(--navy-100); }

/* ── Boton de menu para pantallas angostas ── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1040px) {
  .nav-inner { padding: 14px 20px; gap: 14px; }
  .nav-burger { display: flex; }

  /* Los enlaces pasan a un panel desplegable a pantalla completa */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 20px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(9, 30, 60, 0.12);
  }
  .nav.abierto .nav-links { display: flex; }
  .nav-links a, .nav-trigger { padding: 12px 14px; font-size: 15px; width: 100%; }
  .nav-links > a.active::after, .nav-trigger.active::after { left: 14px; right: auto; width: 22px; }

  /* Dentro del panel el desplegable se muestra en linea, sin flotar */
  .nav-group { width: 100%; }
  .nav-trigger { justify-content: space-between; }
  .nav-menu {
    position: static;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 2px 0 6px 14px;
    border-left: 2px solid var(--border);
    margin-left: 14px;
  }
  .nav-actions .btn-outline { display: none; }
}

@media (max-width: 560px) {
  .brand div { display: none; }        /* solo el emblema */
  .nav-actions .btn { padding: 9px 13px; font-size: 13px; }
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ═══ BOTONES ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: all var(--t-med);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: #fff;
  box-shadow: var(--sh-navy);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(21, 63, 111, 0.38); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-600), var(--gold-500));
  color: var(--navy-900);
  box-shadow: var(--sh-gold);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(212, 167, 44, 0.42); }
.btn-outline {
  background: var(--paper);
  color: var(--navy-800);
  border: 1.5px solid var(--border-strong);
}
.btn-outline:hover { border-color: var(--navy-600); background: var(--navy-50); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--navy-700); }
.btn-ghost:hover { background: var(--navy-50); }

/* ═══ CARDS ═══ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: all var(--t-med);
}
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.card-padded { padding: 26px; }

/* ═══ HERO ═══ */
.hero {
  position: relative;
  padding: 48px 0 24px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(212, 167, 44, 0.11) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -150px; left: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(21, 63, 111, 0.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-main {
  padding: 44px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 253, 0.9) 100%),
    radial-gradient(circle at 20% 90%, rgba(212, 167, 44, 0.08), transparent 50%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  position: relative;
  overflow: hidden;
}
.hero-main::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 100%;
  background: linear-gradient(180deg, var(--navy-700), var(--gold-500));
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-100), var(--gold-100));
  color: var(--navy-800);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border: 1px solid rgba(21, 63, 111, 0.1);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 8px var(--gold-400);
}
.hero-main h1 {
  margin: 20px 0 18px;
  background: linear-gradient(135deg, var(--navy-900) 30%, var(--navy-600) 60%, var(--burgundy-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-main .lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-600);
  max-width: 62ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero-foot {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mini-stat {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  transition: all var(--t-med);
  position: relative;
}
.mini-stat:hover { transform: translateY(-2px); border-color: var(--gold-400); background: #fff; }
.mini-stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--navy-800);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.mini-stat span { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* Hero side */
.hero-side {
  padding: 30px;
  background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  position: relative;
  overflow: hidden;
}
.hero-side::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(212, 167, 44, 0.25), transparent 65%);
  pointer-events: none;
}
.hero-side h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 4px;
}
.hero-side .panel-sub { color: rgba(255, 255, 255, 0.7); font-size: 13px; margin-bottom: 22px; }
.hero-side .feature {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}
.hero-side .feature:last-child { border-bottom: 0; }
.hero-side .feature strong { display: block; font-size: 15px; margin-bottom: 4px; color: #fff; font-weight: 700; }
.hero-side .feature .copy { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }

/* ═══ KPI TICKERS (live indicators) ═══ */
.kpi-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 32px 0 12px;
}
.kpi-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 22px;
  overflow: hidden;
  transition: all var(--t-med);
  cursor: default;
}
.kpi-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--kc, var(--navy-500)); }
.kpi-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kc, var(--navy-600));
}
.kpi-tile::after {
  content: '';
  position: absolute;
  right: -40px; bottom: -40px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kc-soft, rgba(21, 63, 111, 0.06)) 0%, transparent 70%);
  pointer-events: none;
}
.kc-dolar  { --kc: #2a9567; --kc-soft: rgba(42, 149, 103, 0.1); }
.kc-uf     { --kc: var(--navy-600); --kc-soft: rgba(29, 84, 145, 0.1); }
.kc-euro   { --kc: var(--gold-600); --kc-soft: rgba(179, 134, 32, 0.1); }
.kc-ipc    { --kc: var(--burgundy-600); --kc-soft: rgba(148, 28, 49, 0.1); }
.kc-imacec { --kc: var(--teal-600); --kc-soft: rgba(13, 115, 119, 0.1); }
.kc-utm    { --kc: #5b3f9c; --kc-soft: rgba(91, 63, 156, 0.1); }
.kc-tpm    { --kc: #b45309; --kc-soft: rgba(180, 83, 9, 0.1); }
.kc-empleo { --kc: #0369a1; --kc-soft: rgba(3, 105, 161, 0.1); }
.kc-pob    { --kc: #7c3aed; --kc-soft: rgba(124, 58, 237, 0.1); }
.kc-pib    { --kc: #0891b2; --kc-soft: rgba(8, 145, 178, 0.1); }

.kpi-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.kpi-value {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 800;
  color: var(--kc, var(--navy-800));
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.kpi-value.loading { color: var(--ink-300); animation: pulse-text 1.4s infinite; }
@keyframes pulse-text { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

.kpi-sub {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.kpi-delta.up { background: var(--green-100); color: var(--green-600); }
.kpi-delta.down { background: var(--burgundy-100); color: var(--burgundy-600); }
.kpi-delta.flat { background: var(--ink-100); color: var(--ink-500); }

/* ═══ SECTIONS ═══ */
.section { padding: 30px 0; position: relative; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 0;
}
.section-head p { color: var(--muted); font-size: 15px; margin-top: 6px; max-width: 62ch; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin-bottom: 10px;
}
.section-label::before {
  content: '';
  width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--navy-600), var(--gold-500));
  border-radius: 2px;
}

/* ═══ GRIDS ═══ */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 980px) { .grid-3, .grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ═══ BADGES ═══ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge.blue   { background: var(--navy-100);   color: var(--navy-800); }
.badge.red    { background: var(--burgundy-100); color: var(--burgundy-700); }
.badge.green  { background: var(--green-100);  color: var(--green-600); }
.badge.gold   { background: var(--gold-100);   color: var(--gold-700); }
.badge.teal   { background: var(--teal-100);   color: var(--teal-600); }
.badge.live {
  background: #d7f5e1;
  color: #157a40;
}
.badge.live::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #1d9a4e;
  animation: livePulse 2s infinite;
}

/* ═══ MODULE / FEATURE CARDS ═══ */
.module-card {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
  transition: all var(--t-med);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.module-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--mc, var(--navy-600)), var(--gold-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med);
}
.module-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.module-card:hover::before { transform: scaleX(1); }
.module-card .mc-num {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 800;
  color: var(--mc, var(--navy-500));
  line-height: 1;
  opacity: 0.25;
  position: absolute;
  right: 20px; top: 14px;
  letter-spacing: -0.03em;
}
.module-card h3 {
  font-size: 21px;
  margin: 0;
  color: var(--navy-900);
}
.module-card p.copy {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.module-card.m-01 { --mc: var(--navy-600); }
.module-card.m-02 { --mc: var(--burgundy-600); }
.module-card.m-03 { --mc: var(--green-600); }
.module-card.m-04 { --mc: var(--gold-600); }
.module-card.m-05 { --mc: var(--teal-600); }
.module-card.m-06 { --mc: #5b3f9c; }
.module-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy-700);
  font-weight: 700;
  font-size: 14px;
  padding-top: 6px;
  transition: gap var(--t-fast);
}
.module-link:hover { color: var(--navy-900); gap: 10px; }
.module-link::after { content: '→'; font-size: 16px; }

/* ═══ CHART CARDS ═══ */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sh-sm);
  transition: all var(--t-med);
}
.chart-card:hover { box-shadow: var(--sh-md); }
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.chart-title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--navy-900); }
.chart-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.chart-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chart-chip {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: all var(--t-fast);
}
.chart-chip:hover { background: var(--navy-100); color: var(--navy-700); }
.chart-chip.active { background: var(--navy-700); color: #fff; }
.chart-wrap { position: relative; height: 260px; }
.chart-wrap-sm { position: relative; height: 180px; }
.chart-wrap-lg { position: relative; height: 380px; }

/* Source pills */
.src-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.src-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.src-bcch { background: rgba(91, 63, 156, 0.1); color: #5b3f9c; }
.src-bcch::before { background: #5b3f9c; }
.src-ine { background: var(--green-100); color: var(--green-600); }
.src-ine::before { background: var(--green-500); }
.src-mindicador { background: var(--navy-100); color: var(--navy-800); }
.src-mindicador::before { background: var(--navy-600); }
.src-live { background: #d7f5e1; color: #157a40; }
.src-live::before { background: #1d9a4e; animation: livePulse 2s infinite; }

/* ═══ MAPA ═══ */
.map-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.map-wrap {
  height: 480px;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: var(--navy-50);
}
.map-legend {
  position: absolute;
  bottom: 16px; right: 16px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  z-index: 400;
  font-size: 12px;
  border: 1px solid var(--border);
}
.map-legend strong {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy-800);
}
.map-legend .legend-item { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.map-legend .legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }

/* ═══ TABLE ═══ */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table th {
  text-align: left;
  padding: 14px 18px;
  background: var(--navy-50);
  color: var(--navy-800);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-700);
}
.table tr:hover td { background: var(--navy-50); }
.table tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }

/* ═══ COMPARADOR ═══ */
.comparator {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
}
@media (max-width: 900px) { .comparator { grid-template-columns: 1fr; } }
.comp-controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--sh-sm);
  height: fit-content;
  position: sticky;
  top: 90px;
}
.comp-field label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 8px;
}
.comp-field select, .comp-field input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color var(--t-fast);
}
.comp-field select:focus, .comp-field input:focus { outline: none; border-color: var(--navy-500); }
.region-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--navy-100);
  color: var(--navy-800);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  margin-right: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--t-fast);
}
.region-pill:hover { border-color: var(--navy-500); }
.region-pill.active { background: var(--navy-700); color: #fff; }

/* ═══ FOOTER ═══ */
.footer {
  background: linear-gradient(180deg, var(--navy-900) 0%, #060f1f 100%);
  color: rgba(255, 255, 255, 0.75);
  padding: 52px 0 28px;
  margin-top: 60px;
  border-top: 3px solid var(--gold-500);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 {
  color: #fff;
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer a { color: rgba(255, 255, 255, 0.75); display: block; padding: 4px 0; font-size: 14px; }
.footer a:hover { color: var(--gold-400); }
.footer-brand { max-width: 380px; }

.footer-brand p { color: rgba(255, 255, 255, 0.7); font-size: 14px; line-height: 1.6; margin: 16px 0; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

/* ═══ UTILIDADES ═══ */
.list { padding-left: 20px; }
.list li { margin: 8px 0; color: var(--ink-600); line-height: 1.6; }
.divider { height: 1px; background: var(--border); margin: 24px 0; }
.helper { color: var(--muted); font-size: 13px; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 20px; } .mt-l { margin-top: 32px; }
.mb-s { margin-bottom: 12px; } .mb-m { margin-bottom: 20px; } .mb-l { margin-bottom: 32px; }
.text-center { text-align: center; }
.hidden { display: none !important; }



/* Animaciones de entrada */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.anim-up { animation: fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
.anim-up.d-1 { animation-delay: 0.08s; }
.anim-up.d-2 { animation-delay: 0.16s; }
.anim-up.d-3 { animation-delay: 0.24s; }
.anim-up.d-4 { animation-delay: 0.32s; }
.anim-up.d-5 { animation-delay: 0.4s; }

/* ═══ MAPA - Leaflet overrides ═══ */
.leaflet-container {
  font-family: var(--font-sans) !important;
  background: var(--navy-50);
  position: relative;
  z-index: 0;
}
.leaflet-popup-content-wrapper {
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  border: 1px solid var(--border);
}
.leaflet-popup-content { margin: 14px 18px !important; }
.leaflet-popup-content h4 {
  font-size: 15px; margin-bottom: 6px; color: var(--navy-900);
}
.leaflet-popup-content .pop-stat {
  display: flex; justify-content: space-between;
  padding: 4px 0; border-top: 1px solid var(--border);
  font-size: 13px;
}
.leaflet-popup-content .pop-stat strong { color: var(--navy-800); }

/* ─── Ajustes de z-index para Leaflet ───
   Asegura que la barra superior (z-index:1200) y la navegación (z-index:1100)
   estén por encima del mapa y sus controles. */
.leaflet-container { z-index: 0 !important; position: relative !important; }
.leaflet-pane { z-index: 1 !important; }
.leaflet-map-pane { z-index: 1 !important; }
.leaflet-tile-pane { z-index: 1 !important; }
.leaflet-overlay-pane { z-index: 1 !important; }
.leaflet-shadow-pane { z-index: 1 !important; }
.leaflet-marker-pane { z-index: 2 !important; }
.leaflet-popup-pane, .leaflet-tooltip-pane { z-index: 3 !important; }
.leaflet-control { z-index: 3 !important; }
.leaflet-popup, .leaflet-tooltip { z-index: 3 !important; }

/* ═══ CTA Block ═══ */
.cta-block {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 50%, var(--navy-800) 100%);
  color: #fff;
  padding: 48px 52px;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 820px) { .cta-block { grid-template-columns: 1fr; padding: 36px 28px; } }
.cta-block::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(212, 167, 44, 0.26), transparent 65%);
  pointer-events: none;
}
.cta-block h2 { color: #fff; margin-bottom: 12px; }
.cta-block p { color: rgba(255, 255, 255, 0.8); font-size: 15.5px; max-width: 58ch; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; justify-content: flex-end; }
@media (max-width: 820px) { .cta-actions { justify-content: flex-start; } }

/* Asegurar topbar y nav siempre encima (override si otra hoja cambia z-index en servidor) */
.topbar { z-index: 99999 !important; }
.nav { z-index: 99990 !important; }

/* Forzar z-index bajos para las capas internas de Leaflet */
.leaflet-container { z-index: 0 !important; position: relative !important; }
.leaflet-pane { z-index: 1 !important; }
.leaflet-map-pane { z-index: 1 !important; }
.leaflet-tile-pane { z-index: 1 !important; }
.leaflet-overlay-pane { z-index: 1 !important; }
.leaflet-shadow-pane { z-index: 1 !important; }
.leaflet-marker-pane { z-index: 2 !important; }
.leaflet-popup-pane, .leaflet-tooltip-pane { z-index: 3 !important; }
.leaflet-control { z-index: 3 !important; }
.leaflet-popup, .leaflet-tooltip { z-index: 3 !important; }

/* ══════════════════════════════════════════════════════════════════════
   PÁGINAS PÚBLICAS CON DATOS REALES
   Piezas que necesitan las páginas ahora que leen /api/publico en vez de
   traer las cifras escritas a mano. Se apoyan en los tokens de arriba.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Barra de filtros: una sola fila sobre el contenido ── */
.filtros {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 0 0 18px;
}
.filtros .buscar {
  flex: 1 1 260px; min-width: 0; position: relative;
}
.filtros .buscar input {
  width: 100%; padding: 10px 14px; font: inherit; font-size: 14px;
  border: 1px solid var(--navy-100); border-radius: 10px;
  background: #fff; color: var(--ink-800);
}
.filtros .buscar input:focus {
  outline: none; border-color: var(--navy-400);
  box-shadow: 0 0 0 3px var(--navy-50);
}
.filtros select {
  padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--navy-100); border-radius: 10px;
  background: #fff; color: var(--ink-800); cursor: pointer;
}
.filtros .cuenta { font-size: 13px; color: var(--ink-400); margin-left: auto; }

/* ── Gráfico ── */
.graf { position: relative; }
.graf-globo {
  position: absolute; top: 0; transform: translateX(-50%);
  background: var(--ink-900); color: #fff;
  padding: 5px 9px; border-radius: 7px; font-size: 12px; line-height: 1.35;
  white-space: nowrap; pointer-events: none; opacity: 0;
  transition: opacity .12s; box-shadow: 0 4px 14px rgba(12,28,46,.22);
}
.graf-globo strong { display: block; font-size: 13.5px; font-weight: 700; }
.graf-globo span { color: var(--navy-300); }

.tabla-serie { max-height: 340px; overflow: auto; margin-top: 14px; }
.tabla-serie table { font-size: 13px; }

/* ── Ficha de un indicador, abierta sobre la página ── */
.ficha-velo {
  position: fixed; inset: 0; background: rgba(10,31,58,.55);
  display: none; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow: auto;
  backdrop-filter: blur(2px);
  /* Por encima de todo, barra de navegación incluida. El número es enorme
     porque más arriba hay reglas con !important que fijan .topbar en 99999
     y .nav en 99990 para que queden sobre los mapas. Con un valor menor, la
     barra se dibujaba sobre la cabecera de la ficha y tapaba el botón de
     cerrar: en móvil la ficha no se podía cerrar sin recargar la página.
     Y una ventana modal abierta no debería dejar la barra pulsable. */
  z-index: 100010;
}
.ficha-velo.abierto { display: flex; }
.ficha {
  background: #fff; border-radius: 16px; width: 100%; max-width: 780px;
  box-shadow: 0 24px 60px rgba(10,31,58,.3); overflow: hidden;
}
.ficha-cab {
  padding: 22px 26px 18px; border-bottom: 1px solid var(--navy-100);
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
}
.ficha-cab h3 {
  margin: 6px 0 0; font-size: 20px; line-height: 1.25; color: var(--navy-800);
  font-family: var(--font-serif);
}
.ficha-cerrar {
  background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--ink-400); padding: 0 4px;
}
.ficha-cerrar:hover { color: var(--ink-800); }
.ficha-cuerpo { padding: 22px 26px 26px; }
.ficha-cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.ficha-cifra small {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-400); font-weight: 700;
}
.ficha-cifra strong {
  display: block; font-size: 21px; color: var(--navy-800); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.ficha-meta { border-top: 1px solid var(--navy-100); margin-top: 20px; padding-top: 18px; }
.ficha-meta dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 0; font-size: 13.5px; }
.ficha-meta dt { color: var(--ink-400); font-weight: 600; }
.ficha-meta dd { margin: 0; color: var(--ink-700); }

/* ── Aviso honesto cuando algo no se pudo cargar ── */
.aviso-carga {
  padding: 16px 18px; border-radius: 10px; font-size: 14px;
  background: var(--gold-100); color: var(--gold-700);
  border: 1px solid var(--gold-400);
}
.aviso-carga.malo { background: var(--burgundy-100); color: var(--burgundy-700); border-color: var(--burgundy-500); }

.cargando-fila { color: var(--ink-400); font-size: 14px; padding: 22px 0; }

/* ── Cifra sin dato: mejor un guion honesto que un cero inventado ── */
.sin-dato { color: var(--ink-400); }

@media (max-width: 640px) {
  .ficha-meta dl { grid-template-columns: 1fr; gap: 2px 0; }
  .ficha-meta dt { margin-top: 10px; }
}

/* Los nombres de las series varían de una a tres líneas —«Tasa de ocupación,
   Maule» contra «Tasa de ocupación informal sin sector agropecuario, Maule»—
   y eso empujaba cada cifra a una altura distinta. Se acotan a dos líneas
   para que los números queden alineados; el nombre completo está en la tabla
   del catálogo. */
#kpis .kpi-tile { display: flex; flex-direction: column; }
#kpis .kpi-label {
  min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
#kpis .kpi-tile > [data-mini] { margin-top: auto; }

/* ══════════════════════════════════════════════════════════════════════
   EL OBSERVATORIO — módulo público organizado por PESTEL
   ══════════════════════════════════════════════════════════════════════ */

/* Las seis dimensiones. Se ve de un vistazo cuánto hay en cada una, y las
   vacías se muestran igual: esconderlas daría a entender que el análisis
   PESTEL solo tiene las dimensiones que hoy tienen datos. */
.obs-pestillos {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px;
}
.obs-pestillo {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 11px 16px; border: 1px solid var(--navy-100); background: #fff;
  border-radius: 11px; cursor: pointer; font: inherit; text-align: left;
  transition: border-color .15s, background .15s;
}
.obs-pestillo:hover { border-color: var(--navy-400); }
.obs-pestillo.activo { background: var(--navy-800); border-color: var(--navy-800); }
.obs-pt-n { font-size: 14px; font-weight: 700; color: var(--navy-800); }
.obs-pt-c { font-size: 11.5px; color: var(--ink-400); }
.obs-pestillo.activo .obs-pt-n { color: #fff; }
.obs-pestillo.activo .obs-pt-c { color: var(--navy-300); }
.obs-pestillo[data-vacia] .obs-pt-n { color: var(--ink-400); }

.obs-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
  padding-bottom: 18px; border-bottom: 1px solid var(--navy-100);
}
.obs-cab h3 {
  margin: 0 0 4px; font-size: 24px; color: var(--navy-800);
  font-family: var(--font-serif, Georgia, serif);
}
.obs-cab p { margin: 0; color: var(--ink-500); font-size: 14.5px; max-width: 62ch; }

.obs-vacia { padding: 40px 0; }
.obs-vacia h3 {
  margin: 0 0 6px; font-size: 22px; color: var(--navy-800);
  font-family: var(--font-serif, Georgia, serif);
}
.obs-vacia p { margin: 0 0 8px; color: var(--ink-500); max-width: 62ch; }

.obs-bloque { margin-bottom: 38px; }
.obs-bloque-cab { margin-bottom: 14px; }
.obs-bloque-cab h4 {
  margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--navy-800);
  letter-spacing: -.005em;
}
.obs-bloque-cab p { margin: 0; font-size: 13.5px; color: var(--ink-400); max-width: 68ch; }

/* Análisis publicados */
.obs-graficos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 18px;
}
.obs-grafico {
  margin: 0; background: #fff; border: 1px solid var(--navy-100);
  border-radius: 13px; padding: 18px 20px 20px; min-width: 0;
}
.obs-grafico figcaption { margin-bottom: 14px; }
.obs-grafico figcaption strong {
  display: block; font-size: 15.5px; color: var(--navy-800); line-height: 1.3;
}
.obs-grafico figcaption span {
  display: block; font-size: 13.5px; color: var(--ink-500); margin-top: 3px;
}
.obs-grafico figcaption small {
  display: block; font-size: 11.5px; color: var(--ink-400); margin-top: 5px;
}
.obs-lienzo { min-height: 60px; }

/* Archivos descargables */
.obs-archivos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.obs-archivo {
  background: #fff; border: 1px solid var(--navy-100); border-radius: 13px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 9px;
}
.obs-arch-cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.obs-archivo > strong { font-size: 15px; color: var(--navy-800); line-height: 1.35; }
.obs-archivo > p { margin: 0; font-size: 13.5px; color: var(--ink-500); line-height: 1.5; }
.obs-arch-meta {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
  margin: 2px 0 4px; font-size: 12.5px;
}
.obs-arch-meta dt { color: var(--ink-400); }
.obs-arch-meta dd { margin: 0; color: var(--ink-700); }
/* El botón se pega abajo para que todas las tarjetas lo tengan a la misma
   altura aunque sus descripciones midan distinto. */
.obs-archivo .btn { margin-top: auto; align-self: flex-start; }

/* ── Procedencia ────────────────────────────────────────────────────────
   Lo que separa un dato citable de un numero en una pagina web: de donde
   sale, quien lo aporto y quien lo reviso. Un informe que lo use tiene que
   poder decir de donde salio, y quien lo lea tiene que poder comprobarlo. */
.proc {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid var(--navy-100);
  font-size: 12.5px;
}
.proc dt { color: var(--ink-400); font-weight: 600; }
.proc dd { margin: 0; color: var(--ink-700); }
.proc dd em { color: var(--ink-500); }

.obs-arch-tam {
  margin: 0; font-size: 12.5px; color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.obs-arch-pie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.obs-arch-citar {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--navy-600); font-weight: 600; cursor: pointer; text-decoration: underline;
}
.obs-arch-citar:hover { color: var(--navy-800); }

/* Como citarlo: es para lo que se publica */
.citar {
  margin-top: 18px; padding: 14px 16px;
  background: var(--navy-50); border-left: 3px solid var(--navy-600);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.citar-et {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--navy-600); margin-bottom: 6px;
}
.citar p {
  margin: 0 0 9px; font-size: 13px; line-height: 1.55; color: var(--ink-800);
  user-select: all;
}
.citar-bt {
  background: none; border: 1px solid var(--navy-100); border-radius: 7px;
  padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--navy-700); cursor: pointer;
}
.citar-bt:hover { border-color: var(--navy-500); }

/* ── Datos abiertos ─────────────────────────────────────────────────────
   Sesenta series no caben como tarjetas: se apilarian en una pagina de
   quince mil pixeles y encontrar una seria imposible. Van en tablas
   agrupadas por fuente, que es como las busca quien viene a descargarlas. */
.da-grupo {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); margin-bottom: 12px; overflow: hidden;
}
.da-grupo > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 20px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--navy-800);
  transition: background var(--t-fast);
}
.da-grupo > summary::-webkit-details-marker { display: none; }
.da-grupo > summary:hover { background: var(--navy-50); }
.da-grupo > summary::before {
  content: '▸'; color: var(--navy-400); font-size: 13px;
  transition: transform var(--t-fast); flex: none;
}
.da-grupo[open] > summary::before { transform: rotate(90deg); }
.da-grupo-nombre { flex: 1; min-width: 0; }
.da-grupo-cuenta {
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--bg-dim); padding: 3px 10px; border-radius: 20px; flex: none;
}

.da-tabla-marco { overflow-x: auto; border-top: 1px solid var(--border); }
.da-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.da-tabla th {
  text-align: left; padding: 10px 16px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.da-tabla td { padding: 11px 16px; border-bottom: 1px solid var(--ink-100); vertical-align: top; }
.da-tabla tr:last-child td { border-bottom: none; }
.da-tabla tbody tr:hover { background: var(--navy-50); }
.da-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.da-tabla .fin { text-align: right; }
.da-tabla .apagado { color: var(--muted); }
.da-tabla td a { color: var(--navy-700); font-weight: 600; }
.da-tabla td a:hover { color: var(--navy-500); text-decoration: underline; }
/* El codigo va debajo del nombre: hace falta para pedir la serie por API,
   pero no es lo que se lee primero. */
.da-tabla code {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--dim);
}
.da-bajar {
  display: inline-block; padding: 5px 12px; white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--navy-700);
  transition: all var(--t-fast);
}
.da-bajar:hover { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }

.da-fuente { margin: 8px 0 0; font-size: 12px; color: var(--dim); }

.da-vacio {
  grid-column: 1 / -1; padding: 34px 28px; text-align: center;
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}
.da-vacio strong { display: block; font-size: 15px; color: var(--navy-800); margin-bottom: 6px; }
.da-vacio span { font-size: 13.5px; color: var(--muted); max-width: 52ch; display: inline-block; }

/* Los endpoints: se leen, se copian y se pinchan. La caja negra de antes
   documentaba direcciones que no existian. */
.da-endpoints { display: flex; flex-direction: column; gap: 9px; }
.da-endpoints > div {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-xs);
}
.da-verbo {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  color: var(--green-600); background: var(--green-100);
  padding: 2px 7px; border-radius: 5px; flex: none;
}
.da-endpoints code {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--navy-800);
  word-break: break-all;
}
.da-endpoints em { font-size: 12px; color: var(--muted); font-style: normal; width: 100%; }

.aviso-error {
  padding: 16px 18px; background: var(--burgundy-100);
  border-left: 3px solid var(--burgundy-500); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--burgundy-700); font-size: 13.5px;
}

/* ── Cobertura PESTEL ───────────────────────────────────────────────────
   Sustituye las etiquetas decorativas de cada dimension. Que una casilla
   este vacia no se esconde: en una plataforma de investigacion es
   justamente donde hace falta que alguien aporte. */
.pestel-estado {
  display: flex; flex-direction: column; gap: 5px;
  padding-top: 13px; margin-top: auto;
  border-top: 1px solid var(--border);
}
.pestel-ir {
  font-size: 13.5px; font-weight: 700; color: var(--navy-600);
  transition: color var(--t-fast);
}
.pestel-ir:hover { color: var(--navy-800); }
.pestel-fuentes { font-size: 11.5px; color: var(--dim); }

.pestel-estado.vacia > span {
  font-size: 13px; font-weight: 600; color: var(--dim);
}
.pestel-estado.vacia > a {
  font-size: 12px; color: var(--gold-700); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.pestel-estado.vacia > a:hover { color: var(--gold-600); }
/* La tarjeta sin datos se apaga un poco: se sigue leyendo el marco, pero
   no compite con las que si tienen algo que ofrecer. */
.pestel-card:has(.pestel-estado.vacia) { background: var(--surface-2); }
.pestel-card:has(.pestel-estado.vacia) h3 { color: var(--ink-600); }

/* ── Áreas sin datos ────────────────────────────────────────────────────
   Estas tarjetas llevaban cifras escritas a mano. Las cuatro que se
   pudieron contrastar estaban mal, y con «INE» al lado, que es lo que las
   hacía creíbles. Donde no hay de dónde sacar el dato se dice, igual que
   en PESTEL: una casilla vacía es donde hace falta que alguien aporte. */
.area-sindatos {
  font-size: 12.5px; line-height: 1.5; color: var(--dim);
  padding: 10px 0 0; border-top: 1px dashed var(--border-strong);
  margin-top: auto;
}
.area-sindatos a {
  color: var(--gold-700); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.area-sindatos a:hover { color: var(--gold-600); }
/* Una tarjeta sin datos se apaga un poco: sigue explicando el área, pero
   no compite con las que sí tienen algo que ofrecer. */
.area-card:has(.area-sindatos) { background: var(--surface-2); }

/* ── Un gráfico por dimensión ───────────────────────────────────────────
   La portada tenía cuatro gráficos y los cuatro eran mercado laboral.
   Ahora hay uno por letra del PESTEL. Las dimensiones sin datos no se
   esconden: que cuatro de seis estén vacías dice dónde no llega el
   observatorio, y es la única forma de pedir que alguien las llene. */
.chart-dim {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-700); margin-bottom: 4px;
}
.chart-vacia {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 210px; text-align: center;
  background: var(--surface-2); border-style: dashed;
}
.chart-vacia .chart-dim { color: var(--dim); }
.chart-vacia p { margin: 4px 0 0; }
.chart-vacia strong { color: var(--ink-600); font-size: 14px; }
.chart-vacia .helper { font-size: 12.5px; max-width: 28ch; margin: 4px auto 0; }
.chart-vacia a {
  color: var(--gold-700); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── Paginador ──────────────────────────────────────────────────────────
   Las tablas largas pintaban todo de una vez: la de estaciones dejaba la
   página en siete mil píxeles y encontrar una fila era desplazarse a
   ciegas. */
.paginador {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 14px;
}
.pag-cuenta { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pag-botones { display: flex; gap: 4px; flex-wrap: wrap; }
.pag-bt {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--ink-700);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--t-fast);
}
.pag-bt:hover:not(:disabled):not(.actual) {
  border-color: var(--navy-500); color: var(--navy-700);
}
.pag-bt:disabled { opacity: .38; cursor: default; }
.pag-bt.actual {
  background: var(--navy-600); border-color: var(--navy-600);
  color: #fff; cursor: default;
}

/* ── Catálogo de indicadores ────────────────────────────────────────────
   La forma de cada serie al lado de su nombre: un nombre no dice si sube,
   si baja ni si tuvo un salto en 2020. */
.sil { width: 84px; height: 22px; display: block; }
.sil.vacia {
  display: inline-block; width: 84px; height: 12px;
  border-bottom: 1px dashed var(--border-strong);
}
.cat-codigo {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--dim);
}
.cat-acciones { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.cat-csv {
  font-size: 11.5px; font-weight: 700; color: var(--navy-600);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px;
}
.cat-csv:hover { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }

/* Hace cuánto que no llega un dato. Sin esto una serie muerta hace dos años
   se ve igual que una de este mes, y quien la cite no tiene por qué notarlo. */
.sil-tibia { color: var(--gold-700) !important; font-weight: 600; }
.sil-vieja { color: var(--burgundy-600) !important; font-weight: 600; }

/* La tabla es ancha: se desplaza dentro de su caja, no arrastra la página. */
.tabla-scroll { overflow-x: auto; }

/* Filtros de la tabla de datos abiertos. Las series iban en acordeones por
   fuente: con la de treinta y siete abierta son mil píxeles de tabla, y hay
   que saber de antemano en qué fuente está lo que se busca. */
.da-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.da-filtros input, .da-filtros select {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font: inherit; font-size: 13.5px; color: var(--ink-800); background: var(--surface);
}
.da-filtros input { flex: 1; min-width: 220px; }
.da-filtros input:focus, .da-filtros select:focus {
  outline: none; border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(40, 112, 184, .12);
}