/* ECOBICI — sitio de análisis. Estilo dark, acento verde del logo, fuente Archivo.
   Sistema de tokens inspirado en el portafolio: ningún componente usa un color
   literal; todo pasa por un token. */
:root {
  --plano: #0e1512;        /* fondo de la página */
  --superficie: #16201b;   /* cabecera, tarjetas, controles */
  --superficie-2: #1d2a23;
  --tinta: #e9f0ec;  --tinta-2: #aebbb4;  --tenue: #7d8c85;
  --linea: #243029;  --eje: #33423a;
  --acento: #1faa4e;        /* verde del logo */
  --acento-claro: #58d983;  /* verde claro para texto/enlaces sobre fondo oscuro */
  --sobre-acento: #04160b;
  --drenaje: #ff6f52;   /* estaciones que se vacían */
  --donante: #4aa3ff;   /* estaciones que acumulan */
  --neutro: #8a9a93;
  --warn: #f0b429;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --maxw: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; font-family: var(--sans); color: var(--tinta); background: var(--plano);
  line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--acento-claro); }
.envoltura { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }

/* --- Cabecera --- */
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--linea); }
.cabecera__contenido {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px 40px; padding-block: 28px 22px;
}
.cabecera__izq { display: flex; gap: 18px; align-items: center; flex: 1 1 36rem; max-width: 820px; }
.logo { width: 54px; height: 54px; border-radius: 13px; flex: none; box-shadow: var(--sombra); }
.cabecera__texto { display: grid; gap: 7px; min-width: 0; }
.sobretitulo { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--acento-claro); }
h1 { margin: 0; font-size: clamp(27px, 3.6vw, 41px); line-height: 1.03; font-weight: 760; font-stretch: 112%; letter-spacing: -.02em; }
.bajada { margin: 0; color: var(--tinta-2); font-size: 15.5px; max-width: 64ch; }
.frescura { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.frescura div { display: grid; gap: 2px; }
.frescura dt { font-size: 12px; color: var(--tenue); }
.frescura dd { margin: 0; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }

/* --- Pestañas pegajosas --- */
.pestanas {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--plano) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--linea);
}
.pestanas__contenido { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pestanas__lista { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; min-width: 0; }
.pestanas__lista::-webkit-scrollbar { display: none; }
.pestanas__lista a {
  padding: 13px 0 11px; color: var(--tinta-2); text-decoration: none; white-space: nowrap;
  font-weight: 500; font-size: 14px; border-bottom: 2px solid transparent;
}
.pestanas__lista a:hover { color: var(--tinta); }
.pestanas__lista a[aria-current="page"] { color: var(--tinta); font-weight: 650; border-bottom-color: var(--acento); }
.pestanas__resumen { font-size: 12.5px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; text-align: right; }
@media (min-width: 1001px) { .pestanas__lista { flex: none; } }
@media (max-width: 1000px) { .pestanas__resumen { display: none; } }

/* --- Secciones --- */
section { padding: 42px 0; border-top: 1px solid var(--linea); }
section:first-of-type { border-top: 0; }
section h2 { font-size: 1.55rem; letter-spacing: -.01em; margin: 0 0 .2em; font-stretch: 108%; }
section .q { color: var(--tinta-2); margin: 0 0 1.4em; max-width: 72ch; }

/* --- KPIs --- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; }
.kpi .label { font-size: 11.5px; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { font-size: 1.9rem; font-weight: 740; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .value.sm { font-size: 1.3rem; }
.kpi .delta { font-size: .85rem; color: var(--tenue); margin-top: 2px; }
.kpi .delta.good { color: var(--acento-claro); }

/* --- Tarjetas / gráficas --- */
.card { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.card h3 { margin: 0 0 .2em; font-size: 1.05rem; }
.card .hint { color: var(--tinta-2); font-size: .85rem; margin: 0 0 12px; }
.chart-wrap { position: relative; height: 300px; }

/* --- Controles: filtros, segmentado, select --- */
.controls { display: flex; gap: 14px 22px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.filtro { display: grid; gap: 6px; min-width: 0; }
.filtro__etiqueta { font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.segmentado { display: inline-flex; border: 1px solid var(--eje); border-radius: 9px; background: var(--superficie); overflow: hidden; }
.segmentado button { border: 0; background: transparent; color: var(--tinta-2); padding: 7px 12px; font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.segmentado button + button { border-left: 1px solid var(--linea); }
.segmentado button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); font-weight: 650; }
select {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 13.5px; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--eje); border-radius: 9px; padding: 7px 32px 7px 11px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23aebbb4' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 11px center;
}

/* --- Mapa --- */
#map, #map-reb { height: 460px; border-radius: var(--radio); border: 1px solid var(--linea); z-index: 1; }
/* Oscurece los tiles OSM (sin API key) sin tocar los marcadores (otro pane). */
.leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.82); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--tinta-2); margin-top: 10px; }
.legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }
.leaflet-popup-content { font-family: var(--sans); font-size: .85rem; }
.leaflet-container a.leaflet-popup-close-button { color: var(--tenue); }

/* --- Tablas --- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { color: var(--tenue); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--superficie-2); }

/* --- Notas / listas / chips --- */
.note { background: var(--superficie-2); border-left: 3px solid var(--acento); border-radius: 8px; padding: 14px 16px; color: var(--tinta-2); }
.note.warn { border-left-color: var(--warn); }
ul.clean { margin: 0; padding-left: 1.1em; }
ul.clean li { margin: .35em 0; color: var(--tinta-2); }
ul.clean strong { color: var(--tinta); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; background: var(--superficie-2);
  border: 1px solid var(--eje); border-radius: 8px; padding: 4px 9px; color: var(--tinta-2); }

/* --- Footer --- */
footer { border-top: 1px solid var(--linea); padding: 28px 0 48px; color: var(--tenue); font-size: .9rem; }
footer a { color: var(--tinta-2); }
.sr-note { font-size: .8rem; color: var(--tenue); margin-top: 6px; }