:root{
  --header-h: 76px;
  --panel-bg: rgba(10,14,23,.78);
  --panel-bd: rgba(255,255,255,.1);
  --fg: #e7edf6;
  --muted: #a6b0c3;
  --brand: #2d7ef7;
  --accent: #39ff14;   /* verde chillón */
  --accent2:#ff7a00;   /* naranja */
  --shadow: 0 6px 20px rgba(0,0,0,.25);
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#050814;color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}

#appHeader{
  height:var(--header-h);
  padding:10px 14px;
  background:linear-gradient(180deg,#0f1730 0%,#0b1020 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center
}
.filters{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px}
.left{display:flex;align-items:center;gap:8px}
.title{margin-left:6px;color:#cfe0ff}
.filter{display:flex;gap:6px;align-items:center}
.filter label{font-size:12px;color:var(--muted)}
.filter input,.filter select{
  height:36px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:#111731;color:var(--fg);outline:none;min-width:220px
}
.stats{display:flex;gap:18px;font-size:14px}
.stats strong{color:#bcd1ff}
.btn{
  display:inline-block;padding:8px 10px;border-radius:10px;color:#d9e6ff;
  background:#142357;border:1px solid rgba(255,255,255,.12);text-decoration:none
}

#map{height:calc(100vh - var(--header-h));width:100%}

/* Modo gris/azulado solo teselas */
#map.grey    .leaflet-pane.leaflet-tile-pane img.leaflet-tile{
  filter:grayscale(1) saturate(.25) brightness(1.05) contrast(1.15)!important}
#map.bluegrey .leaflet-pane.leaflet-tile-pane img.leaflet-tile{
  filter:grayscale(1) saturate(.35) hue-rotate(200deg) brightness(1.05) contrast(1.10)!important}
#map .leaflet-overlay-pane,#map .leaflet-marker-pane,
#map .leaflet-popup-pane,#map .leaflet-shadow-pane{
  filter:none!important}

/* Info panel */
#infoPanel{
  position:fixed;right:14px;bottom:14px;width:360px;max-width:calc(100vw - 28px);
  background:var(--panel-bg);border:1px solid var(--panel-bd);backdrop-filter:blur(6px);
  box-shadow:var(--shadow);border-radius:var(--radius);padding:12px 14px 14px;color:var(--fg);
  z-index:2000; top: 100px;
}
#infoPanel.hidden{display:none}
#infoClose{
  position:absolute;top:8px;right:8px;width:26px;height:26px;line-height:24px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);background:#0e1531;color:#d3dbef;cursor:pointer
}
#infoPanel h3{margin:6px 0 10px;font-size:16px;color:#d9e3ff}
#infoPanel .mini{color:var(--muted);font-size:12px}
#infoPanel .row{margin:6px 0}
#infoPanel .badge{display:inline-block;background:#18306a;color:#cfe0ff;border:1px solid rgba(255,255,255,.08);
  padding:4px 8px;border-radius:999px;font-size:12px;margin-right:6px}
.cta{
  display:inline-block;background:linear-gradient(90deg,#10cf54,#1be472);
  color:#ffffff;border:none;border-radius:12px;padding:10px 12px;font-weight:700;text-decoration:none
}

/* Loader */
.loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(5,8,20,.55);backdrop-filter:blur(2px);z-index:2500}
.loader.hidden{display:none}
.loader .label{margin-top:12px;color:#cfe0ff;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.ring{width:46px;height:46px;border-radius:50%;border:4px solid #20305d;border-top-color:#49ff87;
  animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}






/* Mapa con color suave (poco desaturado y un pelín más nítido) */
/*
#map.soft .leaflet-pane.leaflet-tile-pane img.leaflet-tile{
  filter: grayscale(.18) saturate(.85) brightness(1.03) contrast(1.06) !important;
  -webkit-filter: grayscale(.18) saturate(.85) brightness(1.03) contrast(1.06) !important;
}
*/

/* Variante azulada muy leve (por si la prefieres) */

#map.softblue .leaflet-pane.leaflet-tile-pane img.leaflet-tile{
  filter: grayscale(.18) saturate(.9) hue-rotate(200deg) brightness(1.03) contrast(1.05) !important;
  -webkit-filter: grayscale(.18) saturate(.9) hue-rotate(200deg) brightness(1.03) contrast(1.05) !important;
}


/* Asegúrate de que overlays (tus polígonos) no heredan el filtro */
#map .leaflet-overlay-pane,
#map .leaflet-marker-pane,
#map .leaflet-popup-pane,
#map .leaflet-shadow-pane{
  filter: none !important;
  -webkit-filter: none !important;
}