/* Mapa del operativo territorial: leyenda, pantalla completa, búsqueda y ventanas de Leaflet. */

.territorial-map-panel {
  margin-top: 18px;
}

.territorial-analytics-grid {
  display: grid;
  /* Son dos paneles (situaciones y actividad mensual); con tres columnas quedaba
     una vacía a la derecha. */
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}

.territorial-analytics-grid canvas {
  height: 300px;
}

.territorial-analytics-grid .chart-canvas-box canvas {
  height: 100% !important;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: -1px;
}

/* Colores exactos del mapa original (Looker Studio). Coinciden con situationColor() en js/territorial/map.js. */
.legend-dot { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .18); }
.legend-dot.mpa { background: #e574b1; }
.legend-dot.regularized { background: #0544e4; }
.legend-dot.notified { background: #ffee07; }
.legend-dot.nocc { background: #6666ba; }
.legend-dot.d2 { background: #ddba83; }
.legend-dot.deadline { background: #99d8f4; }
.legend-dot.disconnected { background: #db372d; }
.legend-dot.kiosk { background: #1c7781; }
.legend-dot.d3 { background: #e3aef2; }
.legend-dot.risk { background: #b95b41; }
.legend-dot.connection { background: #f59e52; }
.legend-dot.reconnection { background: #4285f4; }
.legend-dot.other { background: #64748b; }

.map-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dbe6f4;
  border-radius: 10px;
  background: #f8fbff;
  color: var(--muted);
  padding: 8px 12px;
  min-height: 30px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}

.map-fullscreen-btn:hover {
  transform: none;
  box-shadow: none;
  background: #edf5ff;
  color: var(--text);
}

.map-fullscreen-icon { font-size: 14px; line-height: 1; }

/* Botón flotante sobre el mapa (esquina superior derecha), más cómodo que en el
   encabezado. Se mantiene visible también en pantalla completa. */
.map-fullscreen-floating {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  background: #fff;
  border: 1px solid #dbe6f4;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .22);
}

.map-fullscreen-floating:hover {
  background: #f4f9ff;
  color: var(--text);
}

/* Pantalla completa del mapa. Selectores separados (nativo, webkit y fallback por
   clase): agrupar :-webkit-full-screen con :fullscreen invalida toda la regla en
   algunos navegadores. En modo nativo el navegador ya ocupa toda la pantalla. */
.territorial-map-panel:fullscreen {
  margin: 0; border-radius: 0; overflow: auto;
  display: flex; flex-direction: column;
  background: #fff; padding: 16px;
}
.territorial-map-panel:-webkit-full-screen {
  margin: 0; border-radius: 0; overflow: auto;
  display: flex; flex-direction: column;
  background: #fff; padding: 16px;
}
.territorial-map-panel.is-fullscreen {
  position: fixed; inset: 0; z-index: 1200;
  margin: 0; border-radius: 0; overflow: auto;
  display: flex; flex-direction: column;
  background: #fff;
}
.territorial-map-panel:fullscreen .map-shell {
  flex: 1 1 auto; height: auto; min-height: 0; margin-top: 12px;
}
.territorial-map-panel:-webkit-full-screen .map-shell {
  flex: 1 1 auto; height: auto; min-height: 0; margin-top: 12px;
}
.territorial-map-panel.is-fullscreen .map-shell {
  flex: 1 1 auto; height: auto; min-height: 0; margin-top: 12px;
}

body.map-fullscreen-open { overflow: hidden; }

.map-panel-actions {
  display: grid;
  gap: 10px;
  justify-items: end;
  min-width: min(100%, 460px);
}

.map-search {
  position: relative;
  width: min(100%, 460px);
  justify-self: end;
}

.map-search-control {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid #dbe6f4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
  padding: 4px 5px 4px 10px;
}

.map-search-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #64748b;
}

.map-search-icon::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 999px;
  box-sizing: border-box;
  box-shadow: 7px 7px 0 -5px currentColor;
  transform: rotate(-12deg);
}

.map-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 0;
}

.map-search input::placeholder {
  color: #94a3b8;
  font-weight: 760;
}

.map-search input:disabled {
  cursor: not-allowed;
  color: #94a3b8;
}

.map-search-clear {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #64748b;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  font-size: 17px;
  line-height: 1;
}

.map-search-clear:hover {
  transform: none;
  background: #edf5ff;
  box-shadow: none;
  color: var(--text);
}

.map-search-results {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 5px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid #dbe6f4;
  border-radius: 12px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 44px rgba(15,23,42,.18);
  padding: 7px;
}

.map-search-results[hidden] {
  display: none !important;
}

.map-search-option {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  text-align: left;
}

.map-search-option:hover,
.map-search-option.is-active {
  transform: none;
  background: #edf5ff;
  border-color: #c8dcf5;
  box-shadow: none;
}

.map-search-option strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 950;
}

.map-search-option span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 780;
  line-height: 1.25;
}

.map-search-empty,
.map-search-meta {
  padding: 7px 9px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
}

.map-search-meta {
  padding-bottom: 0;
  text-align: right;
}

.map-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #dbe6f4;
  border-radius: 10px;
  background: #f8fbff;
  padding: 4px;
}

.map-mode-toggle button {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 7px 10px;
  min-height: 30px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}

.map-mode-toggle button:hover {
  transform: none;
  box-shadow: none;
  background: #edf5ff;
  color: var(--text);
}

.map-mode-toggle button.is-active {
  background: var(--blue);
  color: #fff;
}

.map-shell {
  position: relative;
  margin-top: 14px;
  border: 1px solid #dbe6f4;
  border-radius: 14px;
  background: #edf5ff;
  overflow: hidden;
  /* Altura atada al alto de la pantalla (no al ancho): antes el
     aspect-ratio + min-height:520px hacían un mapa demasiado alto en
     notebooks y había que bajar el zoom del navegador para que entrara.
     clamp() garantiza que quepa en cualquier pantalla, con piso y techo.
     Se agrandó (antes 56vh/600px) al liberar el espacio de las
     estadísticas que estaban debajo del mapa. */
  height: clamp(380px, 66vh, 680px);
}

#territorialMap {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.map-empty-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #475569;
  font-size: 14px;
  font-weight: 850;
  background: linear-gradient(135deg, rgba(239,247,255,.92), rgba(248,250,252,.86));
  pointer-events: none;
}

.map-empty-overlay[hidden] {
  display: none !important;
}

.leaflet-container {
  font: inherit;
  background: #eaf3fb;
}

/* Leaflet pone el control de atribucion pegado al borde (margin:0), lo
   que lo hace sobresalir contra la esquina redondeada de .map-shell. */
.map-shell .leaflet-control-attribution {
  margin: 0 10px 10px 0;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(15,23,42,.12);
}

.territorial-heat-layer {
  pointer-events: none;
  opacity: .82;
  filter: blur(.65px) saturate(1.18);
  mix-blend-mode: normal;
  transition: opacity .12s ease;
}

.territorial-heat-layer.is-zooming {
  opacity: 0;
}

.leaflet-popup-content-wrapper {
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15,23,42,.16);
}

.map-popup {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 750;
}

.map-popup strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13.5px;
  font-weight: 950;
}

.map-popup span {
  display: block;
  color: var(--muted);
  font-weight: 700;
}

.map-popup dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 9px;
  margin: 8px 0 0;
}

.map-popup dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.map-popup dd {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.leaflet-interactive.map-selected-point {
  filter: drop-shadow(0 0 8px rgba(15,23,42,.35));
}

.leaflet-tooltip.map-tooltip {
  border: 1px solid #dbe6f4;
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(15,23,42,.14);
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 760;
}

.map-tooltip strong {
  display: block;
  margin-bottom: 3px;
  font-size: 12.5px;
  font-weight: 950;
}

.map-tooltip span {
  display: block;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.3;
}