/* Paleta institucional */
:root {
  --azul-gobierno: #1E3159;
  --azul-acento: #233E72;
  --celeste-cielo: #CCF0FF;
  --ocre-amanecer: #F2A119;
  --ocre-oscuro: #A8723A;
  --ocre-claro: #FFD392;

  /* Tema claro */
  --primario: var(--azul-gobierno);
  --acento: var(--azul-gobierno);         /* subtítulos y etiquetas */
  --encabezado-tabla: var(--azul-gobierno);
  --fila-hover: rgba(204, 240, 255, 0.6); /* celeste cielo */
  --fondo: #f4f7fb;
  --tarjeta: #ffffff;
  --texto: #1f2937;
  --texto-suave: #5b6475;
  --borde: #dfe3ea;
  --radio: 10px;
  color-scheme: light;
}
/* Tema oscuro (activo por defecto: data-tema="oscuro" en main.html) */
[data-tema="oscuro"] {
  --acento: var(--celeste-cielo);
  --encabezado-tabla: var(--azul-acento);
  --fila-hover: rgba(35, 62, 114, 0.55);  /* azul acento */
  --fondo: #0e1830;
  --tarjeta: #16264a;
  --texto: #e6edf7;
  --texto-suave: #a9b8d0;
  --borde: #2b4170;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.5;
}
main { max-width: 1280px; margin: 0 auto; padding: 20px; display: grid; gap: 20px; }

/* Encabezado: logo1 | título | logo2 */
.encabezado {
  background: var(--primario);
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
}
.encabezado .titulos { text-align: center; }
.encabezado h1 { margin: 0; color: var(--ocre-amanecer); font-size: clamp(1.4rem, 3vw, 2.2rem); }
.encabezado p { margin: 4px 0 0; opacity: 0.85; }
.logo { width: 72px; height: 72px; object-fit: contain; }

.encabezado { border-bottom: 3px solid var(--ocre-amanecer); }
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
h2 { color: var(--acento); font-size: 1.1rem; margin: 0 0 8px; }

/* Mapa + cuadro de texto */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.mapa { margin: 0; }
.mapa img { display: block; width: 100%; height: auto; }
.texto { padding: 20px; }

/* Selector */
.selector { display: flex; align-items: center; gap: 12px; }
.selector label { font-weight: 600; color: var(--acento); }
.selector select {
  flex: 1;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--tarjeta);
  color: var(--texto);
}
.selector select:focus { outline: 2px solid var(--ocre-amanecer); outline-offset: 1px; }

/* Gráfico (2/3) + tabla (1/3) */
.datos { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.grafico iframe { display: block; width: 100%; height: 480px; border: 0; }
.tabla { padding: 16px; display: flex; flex-direction: column; max-height: 480px; }
.tabla-scroll { overflow: auto; flex: 1; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { position: sticky; top: 0; background: var(--encabezado-tabla); color: #fff; font-weight: 600; }
tbody tr:hover { background: var(--fila-hover); }
.fuente { margin: 8px 0 0; font-size: 0.8rem; color: var(--texto-suave); }

/* Móvil: todo apilado, logos debajo del título */
@media (max-width: 760px) {
  main { padding: 16px; gap: 16px; }
  .encabezado { grid-template-columns: 1fr 1fr; padding: 16px; }
  .encabezado .titulos { grid-column: 1 / -1; grid-row: 1; }
  .encabezado .logo { width: 56px; height: 56px; }
  .encabezado .logo:first-of-type { justify-self: end; }
  .intro, .datos { grid-template-columns: 1fr; }
  .grafico iframe { height: 360px; }
  .tabla { max-height: 420px; }
  .selector { flex-direction: column; align-items: stretch; gap: 6px; }
}