/* ───────────────────────────────────────────────────────────────────────────
   Tablero de Congestión — paleta institucional DIM (verde) + pulido moderno.
   Solo estilos visuales; la estructura de layout (grid/flex/alturas) se conserva.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Paleta institucional (misma del aplicativo) */
  --green:        #879225;  /* lima del header */
  --green-dark:   #44663E;  /* verde oscuro: títulos y barra */
  --green-deep:   #4C5326;  /* verde profundo: hover */
  --green-accent: #7B882B;  /* acento */
  --lime-soft:    #eef1df;  /* fondos suaves tintados */

  --bg:           #f5f6f1;
  --panel-bg:     #ffffff;
  --panel-border: #e7e9df;
  --text-light:   #ffffff;
  --text-dark:    #2b3327;
  --text-muted:   #6c757d;

  /* Sombras en capas (profundidad natural, en vez de bordes duros) */
  --shadow-sm: 0 1px 2px rgba(38, 50, 25, 0.05);
  --shadow-md: 0 1px 2px rgba(38, 50, 25, 0.05), 0 4px 12px rgba(38, 50, 25, 0.07);
  --shadow-lg: 0 2px 4px rgba(38, 50, 25, 0.06), 0 10px 24px rgba(38, 50, 25, 0.10);

  --radius:    12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

/* El tablero va embebido bajo el header del aplicativo: no forzamos overflow
   hidden ni 100% en el documento (eso impedía hacer scroll y cortaba la parte
   inferior). Se deja que la página fluya y, si hace falta, scrollee. */
html, body {
  margin: 0;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Altura acotada (necesaria para que las gráficas con height:100% rendericen),
     descontando el header/subtítulo/footer del aplicativo. El scroll del
     documento cubre cualquier diferencia en pantallas pequeñas. */
  height: calc(100vh - 170px);
  min-height: 540px;
  padding: 10px;
  gap: 8px;
  background-color: var(--bg);
  border-radius: var(--radius);
}

/* Superficies */
.panel {
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
}
.chart-panel { padding: 8px; display: flex; flex-direction: column; }
.chart-panel:hover { box-shadow: var(--shadow-md); }

/* Oculta la atribución del basemap (CARTO/OpenStreetMap) en el mapa.
   Nota: OSM/CARTO requieren atribución; mantenerla o reubicarla es lo correcto. */
#mapa-principal .maplibregl-ctrl-attrib,
#mapa-principal .maplibregl-ctrl-bottom-right,
#mapa-principal .mapboxgl-ctrl-attrib,
#mapa-principal .mapboxgl-ctrl-bottom-right,
#m-mapa-principal .maplibregl-ctrl-attrib,
#m-mapa-principal .maplibregl-ctrl-bottom-right,
#m-mapa-principal .mapboxgl-ctrl-attrib,
#m-mapa-principal .mapboxgl-ctrl-bottom-right { display: none !important; }

/* SPA: solo una vista visible a la vez */
.vista[hidden] { display: none; }

/* Pie: fecha de actualización del tablero (gris, abajo a la izquierda) */
.dashboard-footer {
  flex: 0 0 auto;
  padding: 2px 4px 0;
  font-size: 10px;
  color: var(--text-muted);
}

/* Title bar */
.title-bar {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-deep) 100%);
  color: var(--text-light);
  border-radius: var(--radius);
  padding: 12px 16px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
/* color explícito: la plantilla base define h2{color:#44663E} a nivel global,
   que de otro modo gana sobre el color heredado del .title-bar */
.title-bar h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-wrap: balance;
  color: var(--text-light);
}
.title-bar p {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 300;
  opacity: 0.85;
  text-wrap: pretty;
  color: var(--text-light);
}

/* Main grid */
.main-row {
  display: grid;
  grid-template-columns: 16.6% 1fr 25%;
  /* minmax(0,1fr): la fila se ajusta a la altura de la caja y NO crece con el
     contenido (evita que Plotly estire los paneles y se desborden hacia abajo). */
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  flex: 1;
  min-height: 0;
}

/* Título uniforme para todas las tarjetas (Localidades, gráficas, estadísticas) */
.localidades h5,
.panel-title,
.stats-title {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: 0.2px;
  text-transform: none;
}
.panel-title,
.stats-title { flex: 0 0 auto; }
/* Panel acotado (min-height:0 permite que el ítem de grid encoja) para que la
   lista scrollee en vez de desbordarse sobre el footer. */
.localidades {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.localidades-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--green-accent) transparent;
}
.localidades-list::-webkit-scrollbar { width: 6px; }
.localidades-list::-webkit-scrollbar-thumb {
  background: var(--panel-border);
  border-radius: 3px;
}
.localidades-list::-webkit-scrollbar-thumb:hover { background: var(--green-accent); }
.localidades-list label {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
  color: var(--text-dark);
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.localidades-list label:hover { background-color: var(--lime-soft); }
.localidades-list input {
  margin-right: 6px;
  vertical-align: middle;
  accent-color: var(--green-dark);
}
/* Resalta la localidad seleccionada */
.localidades-list label:has(input:checked) {
  color: var(--green-dark);
  font-weight: 600;
  background-color: var(--lime-soft);
}

/* Center column */
.center-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.center-col .panel:nth-child(1) { flex: 1.3; }
.center-col .panel:nth-child(2) { flex: 1; }
.center-col .panel > div { width: 100%; flex: 1 1 auto; min-height: 0; }

/* Right column */
.right-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
/* Misma proporción que la columna central (1.3 : 1) para que el Top 10 quede a
   la altura del mapa y las estadísticas a la altura del histograma de distribución. */
.right-col .panel:nth-child(1) { flex: 1.3; }
.right-col .panel.stats-panel  { flex: 1; }
.right-col .chart-panel > div  { width: 100%; flex: 1 1 auto; min-height: 0; }

/* Stats panel */
/* El panel se vuelve columna flex para que la grilla ocupe el alto restante */
.stats-panel {
  display: flex;
  flex-direction: column;
}
/* Disposición 3 arriba + 2 abajo (centradas), llenando el alto del panel.
   Rejilla de 6 columnas: cada tarjeta ocupa 2 → fila 1 = 3 tarjetas (6 col);
   la fila 2 arranca en la col 2 para centrar las 2 restantes. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}
.stat-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  text-align: center;
  background-color: var(--lime-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:nth-child(4) { grid-column: 2 / span 2; }
.stat-card:nth-child(5) { grid-column: 4 / span 2; }
.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.stat-card .sigla {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}
.stat-card .nombre {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.1;
  margin-bottom: 3px;
}
.stat-card .valor {
  font-size: 14px;
  color: var(--text-dark);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Filter bar */
.filter-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 10px 12px;
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.filter-bar select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  font-size: 13px;
  font-family: inherit;
  background-color: #fff;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filter-bar select:hover { border-color: var(--green-accent); }
.filter-bar select:focus {
  outline: none;
  border-color: var(--green-dark);
  box-shadow: 0 0 0 3px rgba(68, 102, 62, 0.15);
}
/* Select con valor elegido: se distingue del estado "sin elegir" */
.filter-bar select.is-active {
  border-color: var(--green-dark);
  background-color: var(--lime-soft);
  color: var(--green-dark);
  font-weight: 600;
}
.btn-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 38px;
  background-color: var(--green-dark);
  color: var(--text-light);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.05s ease, box-shadow 0.18s ease;
}
.btn-reset .fa { font-size: 12px; line-height: 1; }
.btn-reset:hover {
  background-color: var(--green-deep);
  box-shadow: var(--shadow-md);
}
.btn-reset:active { transform: scale(0.96); }

/* ── Filtros multi-selección (desplegable con checkboxes) ───────────────────── */
.filter-bar .ms { position: relative; min-width: 0; }
.ms > summary {
  list-style: none;
  height: 38px;
  padding: 0 26px 0 10px;
  display: flex;
  align-items: center;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background-color: #fff;
  color: var(--text-dark);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ms > summary::-webkit-details-marker { display: none; }
.ms > summary::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.ms > summary:hover { border-color: var(--green-accent); }
.ms.is-active > summary {
  border-color: var(--green-dark);
  background-color: var(--lime-soft);
  color: var(--green-dark);
  font-weight: 600;
}
.ms-panel {
  position: absolute;
  z-index: 1300;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  background-color: #fff;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.ms:not([open]) .ms-panel { display: none; }
.ms-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-dark);
  white-space: nowrap;
  cursor: pointer;
}
.ms-opt:hover { background-color: var(--lime-soft); }
.ms-opt input { accent-color: var(--green-dark); }

/* Barra de progreso (indeterminada) en el borde superior del tablero */
.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  background-color: rgba(123, 136, 43, 0.18);
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 1200;
}
.progress-bar[hidden] { display: none; }
.progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  height: 100%;
  width: 40%;
  background-color: var(--green);
  border-radius: 3px;
  animation: indeterminate 1.1s ease-in-out infinite;
  will-change: transform;
}
@keyframes indeterminate {
  0%   { transform: translateX(0); }
  100% { transform: translateX(350%); }
}

/* Banner de estado vacío (flotante, centrado sobre el área de gráficas) */
.empty-banner {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 90%;
  padding: 14px 18px;
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  color: var(--text-dark);
  z-index: 1100;
}
.empty-banner[hidden] { display: none; }
.empty-banner .fa { font-size: 18px; color: var(--green-dark); }
.btn-empty-reset {
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--green-dark);
  color: var(--text-light);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.05s ease;
}
.btn-empty-reset:hover { background-color: var(--green-deep); }
.btn-empty-reset:active { transform: scale(0.96); }

/* ── Pestañas Diario / Histórico ───────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.tab {
  padding: 6px 16px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tab:hover { color: var(--green-dark); background-color: var(--lime-soft); }
.tab.active {
  color: var(--green-dark);
  background-color: var(--panel-bg);
  border-color: var(--panel-border);
  box-shadow: var(--shadow-sm);
}

/* Banner informativo: qué datos ofrece cada vista (compacto, una línea) */
.info-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background-color: var(--lime-soft);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-dark);
}
.info-banner .fa { color: var(--green-dark); font-size: 13px; flex: 0 0 auto; }

/* ── Página histórica ──────────────────────────────────────────────────────── */
.filter-bar-hist { grid-template-columns: repeat(5, 1fr); }

/* Cualquier panel de gráfica: el div de la gráfica llena el alto bajo el título */
.chart-panel > div { width: 100%; flex: 1 1 auto; min-height: 0; }

/* Franja inferior de dos gráficas (ambas pestañas): Evolución + Distribución. */
.chart-band {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
}

/* Páginas con franja inferior: la página crece con el contenido (scroll). El
   bloque superior se acota para que la primera gráfica de la franja inferior se
   ASOME ~media (afordancia de scroll); la franja añade su propio alto. */
.app-band { height: auto; }
/* 400px ≈ alto del cromo (encabezado + título + pestañas + banner + filtros);
   el segundo término es el ASOMO de la franja inferior (borde de las gráficas). */
.app-band .main-row { flex: none; height: calc(100vh - 400px - 25px); min-height: 370px; }
.app-band .chart-band { flex: none; height: 340px; }

/* Indicador de scroll: chevron sutil abajo-centro que invita a bajar y se oculta
   al hacer scroll (lo gestiona el script del SPA). */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 1500;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--green-dark);
  color: var(--text-light);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0.92;
  transition: opacity 0.3s ease;
  animation: scrollHintBounce 1.6s ease-in-out infinite;
}
.scroll-hint:hover { opacity: 1; }
.scroll-hint[hidden] { display: none; }
.scroll-hint .fa { font-size: 18px; line-height: 1; }
@keyframes scrollHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* Responsive: apila columnas en pantallas angostas */
@media (max-width: 1100px) {
  .app {
    height: auto;
    min-height: 0;
  }
  .main-row {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(240px, auto);
  }
  .filter-bar { grid-template-columns: repeat(3, 1fr); }

  /* Franja inferior: se apila en una columna */
  .chart-band {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(240px, auto);
  }
  .app-band .main-row,
  .app-band .chart-band { height: auto; }
}
@media (max-width: 640px) {
  .filter-bar { grid-template-columns: repeat(2, 1fr); }
}