/* Layout: panel de filtros a la izquierda y mapa a pantalla completa; en el celular el panel se despliega encima */
:root{
  /* Siempre en colores oscuros, en todos los dispositivos (no depende del modo claro/oscuro del sistema) */
  --papel:#121715; --hoja:#1a211e; --tinta:#e6ece9; --tinta-2:#b3bfba; --tinta-3:#86948e; --linea:#2c3632;
  --mussio:#ffffff; --cantiani:#f2b705; --ambos:#3ba3e0; --ok:#1f9d55; --no:#d32f2f; --arch:#5f6b66;
  --texto:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--papel);color:var(--tinta);font:15px/1.5 var(--texto)}
.app{display:grid;grid-template-columns:minmax(300px,360px) 1fr;height:100%}
.panel{overflow-y:auto;padding:18px 18px 24px;background:var(--hoja);border-right:1px solid var(--linea);display:grid;gap:12px;align-content:start}
.rotulo{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3)}
h1{font-size:1.25rem;line-height:1.2;margin:4px 0 6px;text-wrap:balance}
.bajada{margin:0;color:var(--tinta-2);font-size:.92rem}
.resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.resumen div{background:var(--papel);border:1px solid var(--linea);border-radius:6px;padding:8px;text-align:center}
.resumen b{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums}
.resumen span{font-size:.75rem;color:var(--tinta-2)}
fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
legend{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);padding:0;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:inherit;font-size:.85rem;padding:5px 11px;border-radius:999px;border:1px solid var(--linea);background:var(--hoja);color:var(--tinta-2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chips button[aria-pressed="true"]{background:var(--tinta);color:var(--hoja);border-color:var(--tinta)}
.chips i{width:10px;height:10px;border-radius:50%;display:inline-block}
select,input[type=search]{font:inherit;font-size:.92rem;padding:8px 10px;border:1px solid var(--linea);border-radius:6px;background:var(--hoja);color:var(--tinta);width:100%}
:focus-visible{outline:2px solid var(--mussio);outline-offset:2px}
details summary{cursor:pointer;font-weight:600}
details ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;max-height:40vh;overflow:auto}
details li button{all:unset;cursor:pointer;display:block;font-size:.86rem;line-height:1.35;padding:6px 8px;border-radius:5px;border:1px solid var(--linea)}
details li button:hover{border-color:var(--tinta-3)}
.nota{font-size:.8rem;color:var(--tinta-3);margin:0}
.pie{margin-top:6px}
#mapa{height:100%;background:var(--papel)}
.leaflet-popup-content{margin:12px 14px;font:14px/1.45 var(--texto)}
/* mapa base oscuro: se invierten los mosaicos de OpenStreetMap (sin cargar nada de otros sitios) */
.leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9)}
.leaflet-container{background:var(--papel)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--hoja);color:var(--tinta);box-shadow:0 2px 10px #0008}
.leaflet-container a.leaflet-popup-close-button{color:var(--tinta-3)}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--hoja);color:var(--tinta);border-bottom-color:var(--linea)}
.leaflet-bar a.leaflet-disabled{background:var(--papel);color:var(--tinta-3)}
.leaflet-control-attribution{background:#1a211ecc!important;color:var(--tinta-2)}
.leaflet-control-attribution a{color:var(--ambos)}
.pop b{display:block;margin-bottom:2px}
.pop .meta{color:var(--tinta-2);font-size:.82rem}
.pop .est{font-weight:600}
.pop .acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.boton{font:inherit;font-size:.86rem;display:inline-block;padding:6px 11px;border-radius:6px;background:#6b3fa0;color:#fff;border:1px solid #6b3fa0;text-decoration:none;cursor:pointer}
.boton.secundario{background:transparent;color:var(--mussio)}
.leyenda{background:var(--hoja);color:var(--tinta);padding:8px 10px;border-radius:6px;font-size:.8rem;line-height:1.7;box-shadow:0 1px 4px #0003}
.leyenda i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;padding:16px;z-index:2000}
.modal[hidden]{display:none}
.caja{background:var(--hoja);color:var(--tinta);max-width:600px;width:100%;max-height:90vh;overflow:auto;border-radius:10px;padding:22px}
.caja h2{margin:4px 0 8px;font-size:1.15rem}
.caja dl{display:grid;grid-template-columns:9em 1fr;gap:6px 12px;font-size:.92rem;margin:12px 0}
.caja dt{color:var(--tinta-3)}
.caja dd{margin:0}
.caja .acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.caja .boton.secundario{color:var(--tinta);border-color:var(--linea)}
.abrir-panel{display:none}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .panel{position:fixed;inset:0 0 auto 0;max-height:75vh;z-index:1500;transform:translateY(-100%);transition:transform .2s;border-right:0;border-bottom:1px solid var(--linea);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .panel.abierto{transform:none}
  .abrir-panel{display:block;position:fixed;left:max(12px,env(safe-area-inset-left,0px));top:calc(12px + env(safe-area-inset-top,0px));z-index:1600;font:inherit;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--linea);background:var(--hoja);color:var(--tinta);box-shadow:0 1px 4px #0003}
  .caja dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}