/* responsive.css — ajustes móviles/tablet compartidos por las 4 páginas.
   Se carga DESPUÉS del <style> inline de cada página para poder sobreescribir. */

/* Selector de AÑO: 10 años no caben en el panel angosto y quedaban recortados
   (overflow:hidden). Se permite que envuelva y todos los años queden usables. */
#segAnio { flex-wrap: wrap; overflow: visible; }
#segAnio button { border: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
#segAnio button[aria-pressed="true"] { border-color: var(--negro); position: relative; z-index: 1; }

/* ---------- Tablet e inferior ---------- */
@media (max-width: 1000px) {
  .grid { grid-template-columns: 1fr !important; }        /* Análisis: gráficas 1 col */
  .layout { grid-template-columns: 1fr !important; }       /* Candidatos: panel arriba */
  .panel { position: static !important; max-height: none !important; }
  .toplist { grid-template-columns: 1fr !important; }
}

/* ---------- Celular / tablet vertical ---------- */
@media (max-width: 768px) {
  /* Barra superior: solo logo + navegación deslizable (no desborda la pantalla) */
  .bar-in { padding-left: 12px !important; padding-right: 12px !important; gap: 8px; }
  .brand { flex-shrink: 0; }
  .brand span:not(.div) { display: none !important; }      /* ocultar texto de marca */
  .brand .div { display: none !important; }
  .bar-nav {
    flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
    justify-content: flex-start !important; gap: 16px !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .bar-nav::-webkit-scrollbar { display: none; }
  .bar-nav a { white-space: nowrap; flex-shrink: 0; font-size: 13px !important; }
  .selchip { flex-shrink: 0; max-width: 46vw; }
  .selchip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Cabecera de página y márgenes */
  .ph-in, main, .wrap, .foot-in { padding-left: 14px !important; padding-right: 14px !important; }
  h1 { font-size: 23px !important; }
  .note, .lead { font-size: 12.5px !important; }

  /* Controles y filtros: ocupar ancho y no apretar */
  .controls, .filters { gap: 8px !important; }
  .controls .ctrl, .ctrl { flex: 1 1 100%; }
  .seg { flex-wrap: wrap; }
  input[type=search] { min-width: 0 !important; width: 100% !important; }
  select { min-width: 0 !important; }

  /* Tablas anchas: scroll horizontal contenido (no desborda la página) */
  .tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tablescroll table { min-width: 720px; }        /* fuerza el scroll, no el aplaste */
  .tablescroll thead th { position: static !important; top: auto !important; box-shadow: none !important; }

  /* KPIs / chips: 2 por fila en vez de apretar muchos */
  .kpis { grid-template-columns: 1fr 1fr !important; }
  .chips { flex-direction: row; flex-wrap: wrap; }
  .chip { flex: 1 1 44%; }

  /* Panel de detalle (drawer) casi a pantalla completa */
  .drawer { width: 100vw !important; }

  /* Mapa: aside arriba, mapa abajo, con alturas usables */
  .split { grid-template-rows: auto 1fr !important; }
  aside { max-height: 42vh; }

  /* Gráficas SVG: que respiren */
  .card svg, #chTrend svg, #chSubj svg, #chCal svg, #chHist svg, #chGap svg { width: 100% !important; height: auto; }
}

/* ---------- Celular pequeño ---------- */
@media (max-width: 420px) {
  h1 { font-size: 21px !important; }
  .kpi .v { font-size: 20px !important; }
  .chip { flex-basis: 100%; }
  .bar-nav a { font-size: 12.5px !important; gap: 12px; }
}