/* ===== Caba Maps · tokens Calcite con marca DAIACABA ===== */
:root {
  /* azul Esri / Calcite brand */
  --calcite-color-brand: #0079c1;
  --calcite-color-brand-hover: #00619b;
  --calcite-color-brand-press: #004874;
  --calcite-ui-brand: #0079c1;
  --calcite-font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

calcite-shell { font-family: var(--calcite-font-family); }

/* header / topbar */
calcite-navigation { --calcite-color-brand: #0079c1; }
#map-title { opacity: 0.85; }

/* el contenedor del mapa kepler dentro del shell */
#root .kepler-gl { background: transparent !important; }
#root .maplibregl-map, #root .mapboxgl-map { height: 100% !important; }

/* el modal de kepler (Add Data) sigue funcionando por encima del shell */
.modal--wrapper { z-index: 9999 !important; }

/* panel Capas: lista de capas */
#layers-list calcite-list-item { --calcite-color-foreground-1: #ffffff; }

/* ===== Footer delgado Esri ===== */
#esri-footer {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 26px;
  padding: 0 12px;
  font-size: 12px;
  font-family: var(--calcite-font-family);
  background: #fff;
  border-top: 1px solid #e9e9e9;
  color: #4a4a4a;
}
#esri-footer #ft-attr { margin-left: auto; opacity: 0.8; }
#esri-footer a, #esri-footer .link { color: #0079c1; }

/* tabla de atributos (panel-bottom) */
#panel-bottom-tabla { --calcite-shell-panel-min-height: 200px; }

/* ===== FIX mapa partido: float layout + #root full-bleed ===== */
/* Con content-behind ambos paneles flotan y NO reservan ancho:
   el mapa kepler ocupa TODO el centro entre los rails, sin franja oscura. */
calcite-shell-panel[slot="panel-start"],
calcite-shell-panel[slot="panel-end"] {
  --calcite-shell-panel-width: 320px;
  --calcite-shell-panel-max-width: 320px;
}

/* el mapa kepler llena el contenedor del shell de borde a borde */
calcite-shell::part(content),
calcite-shell::part(main),
calcite-shell::part(center-row) {
  width: 100%;
}

#root {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#root .kepler-gl,
#root > div {
  width: 100% !important;
  height: 100% !important;
}

/* ===== LOOP FIX: mapa kepler full-bleed + AutoSizer recalc ===== */
/* La franja oscura aparece porque AutoSizer (react-virtualized) mide #root
   ANTES de que el calcite-shell le de el ancho completo, y cachea un width
   angosto. Forzamos a TODA la cadena de contenedores a 100% y disparamos un
   resize (en el JS) para que AutoSizer remida el ancho real. */
#root,
#root > div,
#root > div > div,
#root .kepler-gl,
#root .kepler-gl > div,
#root .maplibregl-map,
#root .mapboxgl-map,
#root .map-container,
#root [class*="MapContainer"],
#root canvas.maplibregl-canvas,
#root canvas.mapboxgl-canvas {
  width: 100% !important;
}
#root > div,
#root > div > div,
#root .kepler-gl,
#root .kepler-gl > div {
  height: 100% !important;
}
/* el wrapper de AutoSizer (overflow:hidden con width/height inline en px):
   lo forzamos a fluido para que su medición caiga al ancho real del shell */
#root .kepler-gl > div[style*="overflow"] {
  width: 100% !important;
  height: 100% !important;
}