/* Backlight — CSS del mapa de soportes. Extraído 1:1 de v3/styles.css (bloques del mapa).
   Lo encola el widget "Mapa de soportes". Motor: Leaflet + markercluster + map.js certificados. */

/* ---------- Mapa ---------- */
.mapa-envoltura { border: 1px solid var(--bl-carbon); background: var(--bl-noche); }
.mapa-barra {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--bl-e-4);
  padding: var(--bl-e-4);
  border-bottom: 1px solid var(--bl-carbon);
}
.mapa-filtro label {
  display: block; margin-bottom: var(--bl-e-1);
  font-size: var(--bl-t-xs); letter-spacing: var(--bl-tracking-label);
  text-transform: uppercase; color: var(--bl-piedra);
}
.mapa-conteo { margin: 0 0 var(--bl-e-2) auto; font-size: var(--bl-t-sm); color: var(--bl-humo); }
.mapa-conteo b { color: var(--bl-solar); }

/* isolation: contiene los z-index internos de Leaflet dentro del box del mapa. */
#mapa-lienzo { height: 560px; background: var(--bl-noche); isolation: isolate; }

.mapa-leyenda {
  margin: 0; padding: var(--bl-e-3) var(--bl-e-4);
  border-top: 1px solid var(--bl-carbon);
  font-size: var(--bl-t-sm); color: var(--bl-piedra);
}
.leyenda__libre { color: var(--bl-solar); }
.leyenda__ocupada { color: var(--bl-piedra); }

/* Marcadores: cada soporte es un globo de diálogo. Área táctil 44px, visual 24px. */
.marcador {
  display: flex; align-items: center; justify-content: center;
  width: var(--bl-target-min); height: var(--bl-target-min);
}
.marcador i {
  position: relative; display: block; width: 24px; height: 24px;
  background: var(--bl-solar); border: 2px solid var(--bl-espresso);
}
.marcador i::after {
  content: ""; position: absolute; left: 1px; top: 100%;
  width: 9px; height: 6px; background: var(--bl-solar);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.marcador--ocupada i { background: transparent; border-color: var(--bl-piedra); opacity: 0.6; }
.marcador--ocupada i::after { background: var(--bl-piedra); }

/* Cluster: globo lleno con el conteo en espresso (13.89:1) */
.marcador-cluster {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--bl-solar); color: var(--bl-espresso);
  border: 2px solid var(--bl-espresso);
  font-family: var(--bl-font-texto); font-weight: var(--bl-peso-extrabold);
}
.marcador-cluster::after {
  content: ""; position: absolute; left: 4px; top: 100%;
  width: 12px; height: 8px; background: var(--bl-solar);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Leaflet: superficies del sistema sobre los tiles oscuros */
.leaflet-container { background: var(--bl-noche); font-family: var(--bl-font-texto); }
.leaflet-popup-content-wrapper {
  background: var(--bl-espresso); color: var(--bl-humo);
  border: 1px solid var(--bl-carbon); border-radius: 0;
  box-shadow: none;
}
.leaflet-popup-tip { background: var(--bl-espresso); border: 1px solid var(--bl-carbon); box-shadow: none; }
.leaflet-popup-content { margin: var(--bl-e-4); line-height: 1.4; }
.leaflet-container a.leaflet-popup-close-button { color: var(--bl-piedra); }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--bl-solar); }
.popup__codigo {
  margin: 0 0 var(--bl-e-2); font-family: var(--bl-font-mono);
  font-size: var(--bl-t-sm); color: var(--bl-solar);
}
.popup__tipo { margin: 0; font-weight: var(--bl-peso-bold); color: var(--bl-humo); }
.popup__dato { margin: var(--bl-e-1) 0 0; font-size: var(--bl-t-sm); color: var(--bl-piedra); }
.popup__estado { margin: var(--bl-e-3) 0 0; font-size: var(--bl-t-sm); font-weight: var(--bl-peso-bold); }
.popup__estado--libre { color: var(--bl-solar); }
.popup__estado--ocupada { color: var(--bl-piedra); }
.leaflet-popup-content .btn { margin-top: var(--bl-e-3); }

.leaflet-bar { border-radius: 0; box-shadow: none; border: 1px solid var(--bl-carbon); }
.leaflet-bar a {
  background: var(--bl-espresso); color: var(--bl-humo);
  border-bottom: 1px solid var(--bl-carbon); border-radius: 0 !important;
}
.leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--bl-carbon); color: var(--bl-solar); }
.leaflet-container .leaflet-control-attribution {
  background: rgba(20, 16, 13, 0.85); color: var(--bl-piedra); font-size: 10px;
}
.leaflet-container .leaflet-control-attribution a { color: var(--bl-humo); text-decoration: underline; }

/* Tabla accesible */
.tabla-detalle { margin-top: var(--bl-e-6); }
.tabla-detalle summary {
  cursor: pointer; color: var(--bl-solar); font-weight: var(--bl-peso-medium);
  padding: var(--bl-e-2) 0;
}
.tabla-envoltura { overflow-x: auto; margin-top: var(--bl-e-4); border: 1px solid var(--bl-carbon); }
table { width: 100%; border-collapse: collapse; font-size: var(--bl-t-sm); }
th, td { text-align: left; padding: var(--bl-e-2) var(--bl-e-3); border-bottom: 1px solid var(--bl-carbon); }
th {
  color: var(--bl-piedra); font-size: var(--bl-t-xs);
  letter-spacing: var(--bl-tracking-label); text-transform: uppercase;
  position: sticky; top: 0; background: var(--bl-espresso);
}
td { color: var(--bl-humo); }
td.codigo { font-family: var(--bl-font-mono); color: var(--bl-solar); }

/* Campos de filtro (selects) */
.bl-campo {
  width: 100%; background: var(--bl-carbon);
  border: 1px solid var(--bl-borde-fuerte); color: var(--bl-humo);
  padding: var(--bl-e-3) var(--bl-e-4); min-height: var(--bl-target-min);
  border-radius: 0; font-family: var(--bl-font-texto); font-size: var(--bl-t-base);
  transition: border-color var(--bl-dur-lock) var(--bl-ease-lock),
              box-shadow var(--bl-dur-lock) var(--bl-ease-lock);
}
.bl-campo:focus-visible { border-color: var(--bl-solar); box-shadow: var(--bl-halo-cerca); }
.bl-campo[aria-invalid="true"] { border-color: var(--bl-alerta); }
select.bl-campo { width: auto; min-width: 12rem; }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  #mapa-lienzo { height: 420px; }
  .mapa-conteo { margin-left: 0; width: 100%; }
  .mapa-filtro { width: 100%; }
  .mapa-filtro select.bl-campo { width: 100%; min-width: 0; }
}