/* Parques 360 — © 2026 Municipalidad de Curridabat. Todos los derechos reservados.
   Fuentes: Fraunces y Manrope (licencia OFL, ver /fonts). Sin estilos en línea: compatible con CSP estricta. */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Manrope";src:url("fonts/manrope-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;}

:root{
  --verde-950:#0b2218; --verde-900:#0f2e21; --verde-700:#1f6b45; --verde-600:#279159; --verde-500:#3aa869;
  --miel-500:#eea23a; --miel-400:#f4b95f;
  --bg:#f5f2e9; --card:#ffffff; --ink:#14231b; --ink-2:#4c5c52; --line:#e5e0d2;
  --musgo-100:#eaf1e6; --musgo-200:#dbe7d5;
  --shadow-sm:0 1px 2px rgba(15,46,33,.06),0 2px 10px rgba(15,46,33,.05);
  --shadow-md:0 8px 26px rgba(15,46,33,.12);
  --shadow-lg:0 20px 55px rgba(10,30,20,.22);
  --font-display:"Fraunces",Georgia,serif; --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1611; --card:#17221b; --ink:#eef2ec; --ink-2:#a9b7ac; --line:#2a352c;
    --musgo-100:#1b291f; --musgo-200:#22301f; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 26px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1611; --card:#17221b; --ink:#eef2ec; --ink-2:#a9b7ac; --line:#2a352c;
  --musgo-100:#1b291f; --musgo-200:#22301f; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 26px rgba(0,0,0,.45);
}

/* Colores por estado del parque */
.st-activo{--st:#279159; --st-bg:#e1f3e6; --st-fg:#1b6a39;}
.st-parcial{--st:#e08a1e; --st-bg:#fdecd0; --st-fg:#8f5207;}
.st-cerrado{--st:#c4443b; --st-bg:#f8dedc; --st-fg:#9a2b24;}
.st-otro{--st:#8a948d; --st-bg:#e9ebe9; --st-fg:#44504a;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .st-activo{--st-bg:#173a27; --st-fg:#7fd99b;}
  :root:not([data-theme="light"]) .st-parcial{--st-bg:#40290c; --st-fg:#f3b565;}
  :root:not([data-theme="light"]) .st-cerrado{--st-bg:#411a18; --st-fg:#f1908a;}
  :root:not([data-theme="light"]) .st-otro{--st-bg:#252d28; --st-fg:#b5c0b8;}
}
:root[data-theme="dark"] .st-activo{--st-bg:#173a27; --st-fg:#7fd99b;}
:root[data-theme="dark"] .st-parcial{--st-bg:#40290c; --st-fg:#f3b565;}
:root[data-theme="dark"] .st-cerrado{--st-bg:#411a18; --st-fg:#f1908a;}
:root[data-theme="dark"] .st-otro{--st-bg:#252d28; --st-fg:#b5c0b8;}

*{box-sizing:border-box;}
html{scroll-padding-top:90px; scroll-behavior:smooth;}
body{margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.015em;}
p{margin:0;}
button,select,input{font-family:inherit;}
button{cursor:pointer;}
[hidden]{display:none !important;}
::selection{background:var(--miel-500); color:#1a1200;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.unzip-warning{display:none;}
.skip-link{position:absolute; left:-999px; top:8px; background:var(--miel-500); color:#1a1200; padding:8px 14px; border-radius:8px; z-index:100; font-weight:700;}
.skip-link:focus{left:8px;}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, select:focus-visible, input:focus-visible{outline:3px solid var(--miel-500); outline-offset:2px; border-radius:8px;}

/* ---------- Barra superior ---------- */
.topbar{position:sticky; top:0; z-index:30; background:var(--verde-950); color:#fff; padding-top:env(safe-area-inset-top,0px);}
.topbar-inner{max-width:1240px; margin:0 auto; padding:10px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:42px; height:42px; border-radius:12px; background:#fff; display:grid; place-items:center; padding:5px; flex-shrink:0;}
.brand-mark img{width:100%; height:100%; object-fit:contain;}
.brand-text strong{display:block; font-family:var(--font-display); font-size:19px; line-height:1.1;}
.brand-text span{font-size:12px; color:#b9d0c1; white-space:nowrap;}
.btn-icon{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; width:40px; height:40px; border-radius:12px; font-size:17px; transition:background .15s;}
.btn-icon:hover{background:rgba(255,255,255,.18);}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; color:#fff; padding:42px 22px 92px; background:linear-gradient(135deg,var(--verde-900) 0%,var(--verde-700) 100%);}
.hero::before{content:""; position:absolute; width:460px; height:460px; right:-130px; top:-170px; border-radius:50%; background:radial-gradient(circle,rgba(238,162,58,.5),transparent 68%);}
.hero::after{content:""; position:absolute; width:420px; height:420px; left:-150px; bottom:-230px; border-radius:50%; background:radial-gradient(circle,rgba(58,168,105,.6),transparent 70%);}
.hero-inner{max-width:1240px; margin:0 auto; position:relative; z-index:1;}
.hero-eyebrow{display:inline-block; background:rgba(255,255,255,.14); padding:5px 13px; border-radius:99px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px;}
.hero h2{font-size:clamp(30px,4.6vw,50px); line-height:1.08; max-width:18ch;}
.hero-sub{margin-top:14px; color:#d6e8dc; max-width:60ch; font-size:clamp(15px,1.6vw,17px);}
.searchcard{margin-top:28px; max-width:920px; background:var(--card); border-radius:20px; padding:8px; display:grid; grid-template-columns:2.2fr 1fr 1fr; gap:8px; box-shadow:var(--shadow-lg);}
.search-input{display:flex; align-items:center; gap:10px; padding:0 14px; min-width:0; color:var(--verde-600);}
.search-input input{border:0; outline:0; background:transparent; font-size:15.5px; width:100%; color:var(--ink); padding:14px 0;}
.search-input input::placeholder{color:var(--ink-2); opacity:.8;}
.select{border:0; background:var(--musgo-100); color:var(--ink); border-radius:14px; padding:13px 14px; font-size:14px; font-weight:700; min-width:0;}
.status-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px;}
.chip{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:99px; padding:8px 15px; font-size:13.5px; font-weight:700; transition:background .15s, transform .1s;}
.chip:hover{background:rgba(255,255,255,.22); transform:translateY(-1px);}
.chip .dot{flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--st); box-shadow:0 0 0 2px rgba(255,255,255,.75);}
.chip .count{background:rgba(255,255,255,.2); border-radius:99px; padding:0 8px; font-size:12px; line-height:20px;}
.chip[aria-pressed="true"]{background:var(--miel-500); border-color:var(--miel-500); color:#1a1200;}
.chip[aria-pressed="true"] .count{background:rgba(0,0,0,.14);}

/* ---------- Contenido ---------- */
main{max-width:1240px; margin:0 auto; padding:0 22px 70px;}
.banner{background:#fdecd2; color:#7a4a08; border-bottom:1px solid #f0cf9b; padding:11px 22px; font-size:13.5px; font-weight:600; display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; text-align:center;}
.banner button{background:var(--verde-700); color:#fff; border:0; border-radius:10px; padding:8px 14px; font-weight:700; font-size:13px;}
.stats-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:-48px; position:relative; z-index:2;}
.stat{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px 18px; display:flex; gap:14px; align-items:center; box-shadow:var(--shadow-md);}
.stat-ico{width:46px; height:46px; border-radius:14px; background:var(--musgo-100); display:grid; place-items:center; font-size:22px; flex-shrink:0;}
.stat b{font-family:var(--font-display); font-size:30px; line-height:1; display:block; color:var(--verde-700);}
.stat span.lbl{font-size:13px; color:var(--ink-2); display:block; margin-top:3px;}
:root[data-theme="dark"] .stat b{color:var(--verde-500);}
.data-freshness{font-size:12px; color:var(--ink-2); margin:12px 0 22px; text-align:right; min-height:1.2em;}

.split{display:grid; grid-template-columns:1.1fr 1fr; gap:26px; align-items:start;}
.list-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; min-height:28px;}
.result-count{font-weight:800; font-size:14px;}
.link-btn{background:none; border:0; color:var(--verde-700); font-weight:800; font-size:13.5px; text-decoration:underline; padding:4px;}
:root[data-theme="dark"] .link-btn{color:var(--verde-500);}

/* ---------- Tarjetas ---------- */
#listPane{display:flex; flex-direction:column; gap:12px;}
.park-card{background:var(--card); border:1px solid var(--line); border-left:6px solid var(--st); border-radius:16px; padding:15px 16px; display:flex; gap:14px; align-items:center; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s; cursor:pointer; animation:p360fade .3s ease both;}
.park-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.park-card.selected{outline:2.5px solid var(--verde-600); outline-offset:1px;}
.park-icon{width:48px; height:48px; border-radius:14px; background:var(--st-bg); display:grid; place-items:center; font-size:23px; flex-shrink:0;}
.park-card-body{flex:1; min-width:0;}
.park-card-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap;}
.park-card-top h3{font-size:17px; line-height:1.2; flex:1 1 150px; min-width:0;}
.badge{font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:99px; white-space:nowrap; display:inline-block; background:var(--st-bg); color:var(--st-fg);}
.park-card p.meta{font-size:12.5px; color:var(--ink-2); margin-top:3px;}
.park-card p.desc{font-size:13.5px; color:var(--ink-2); margin-top:7px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.chev{font-size:26px; color:var(--ink-2); opacity:.45; transition:transform .15s, opacity .15s; flex-shrink:0;}
.park-card:hover .chev{opacity:1; transform:translateX(3px);}
.empty-state{padding:44px 16px; text-align:center; color:var(--ink-2); background:var(--card); border:1px dashed var(--line); border-radius:16px;}
.empty-ico{font-size:38px; margin-bottom:8px;}
.empty-state .btn{display:inline-block; width:auto; margin-top:14px; padding:10px 18px;}
.skeleton{height:96px; border-radius:16px; background:linear-gradient(90deg,var(--musgo-100) 25%,var(--musgo-200) 50%,var(--musgo-100) 75%); background-size:200% 100%; animation:p360shimmer 1.3s infinite;}
@keyframes p360shimmer{to{background-position:-200% 0;}}
@keyframes p360fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---------- Mapa ---------- */
.map-pane{position:sticky; top:84px; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-md);}
#mapReal{height:min(620px,calc(100vh - 200px)); min-height:420px; width:100%;}
.map-legend{display:flex; flex-wrap:wrap; gap:8px 16px; padding:12px 16px; border-top:1px solid var(--line); font-size:12.5px; font-weight:700;}
.legend-item{display:inline-flex; align-items:center; gap:7px;}
.legend-item i{display:block; flex-shrink:0; width:12px; height:12px; border-radius:50%; background:var(--st); border:2px solid #fff; box-shadow:0 0 0 1px var(--line);}
.map-fallback{padding:10px 14px; text-align:center; color:var(--ink-2); font-size:12.5px; background:var(--card);}
.pin-dot{border-radius:50%; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.4); transition:transform .12s;}
.pin-dot.active{transform:scale(1.3); box-shadow:0 0 0 5px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.4);}
.leaflet-tooltip{font-family:var(--font-body); font-weight:800; font-size:12px; border-radius:8px;}
.leaflet-bar{border-radius:12px !important; overflow:hidden; box-shadow:var(--shadow-sm) !important;}

/* ---------- Ficha del parque ---------- */
.overlay{position:fixed; inset:0; background:rgba(8,22,15,.5); backdrop-filter:blur(2px); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s;}
.overlay.open{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(450px,94vw); z-index:41; background:var(--card); color:var(--ink); box-shadow:var(--shadow-lg); transform:translateX(100%); visibility:hidden; transition:transform .28s cubic-bezier(.2,.8,.2,1), visibility .28s; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom,0px);}
.drawer.open{transform:none; visibility:visible;}
.drawer-band{height:7px; background:var(--st);}
.drawer-head{padding:20px 22px 0; position:relative;}
.drawer-close{position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:16px; display:grid; place-items:center;}
.drawer-icon{width:54px; height:54px; border-radius:16px; background:var(--st-bg); display:grid; place-items:center; font-size:27px; margin-bottom:12px;}
.drawer-eyebrow{font-size:12.5px; color:var(--verde-700); font-weight:800;}
:root[data-theme="dark"] .drawer-eyebrow{color:var(--verde-500);}
.drawer h2{font-size:25px; margin-top:4px; padding-right:44px; line-height:1.15;}
.drawer .meta-line{font-size:13.5px; color:var(--ink-2); margin-top:6px;}
.drawer-body{padding:16px 22px 30px;}
.drawer-section{margin-top:20px;}
.drawer-section h4{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); font-weight:800; margin:0 0 9px;}
.drawer-section p{font-size:14.5px; line-height:1.6;}
.facts{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.fact{font-size:13px; color:var(--ink-2);}
.maint-card{background:var(--musgo-100); border-radius:14px; padding:13px 15px;}
.maint-card .row{display:flex; justify-content:space-between; gap:14px; font-size:13.5px; padding:3px 0;}
.maint-card .row span:first-child{color:var(--ink-2);}
.maint-card .row span:last-child{text-align:right; font-weight:700;}
.maint-note{margin-top:9px; font-size:14px; color:var(--ink-2);}
.history{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.history li{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.history small{color:var(--ink-2); display:block; font-size:12.5px;}
.history .fact{text-align:right; white-space:nowrap;}
.photo-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.photo-row img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; background:var(--musgo-100);}
.btn{display:block; width:100%; margin-top:10px; padding:14px; border-radius:14px; border:1.5px solid var(--line); background:transparent; color:var(--ink); font-weight:800; font-size:15px; text-align:center; text-decoration:none; transition:background .15s;}
.btn:hover{background:var(--musgo-100);}
.btn.primary{background:var(--verde-700); border-color:var(--verde-700); color:#fff; margin-top:22px;}
.btn.primary:hover{background:var(--verde-600);}

/* ---------- Pie ---------- */
.site-footer{background:var(--verde-950); color:#b9d0c1; padding:30px 22px calc(30px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:12.5px; line-height:1.8;}

/* ---------- Móvil ---------- */
.view-toggle{display:none;}
@media (max-width:900px){
  .split{grid-template-columns:1fr;}
  .split[data-view="lista"] .map-col{display:none;}
  .split[data-view="mapa"] .list-col{display:none;}
  .searchcard{grid-template-columns:1fr;}
  .hero{padding:30px 18px 84px;}
  main{padding:0 16px 110px;}
  .map-pane{position:static;}
  #mapReal{height:calc(100vh - 260px); min-height:380px;}
  .view-toggle{display:flex; gap:4px; position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:35; background:var(--verde-950); padding:5px; border-radius:99px; box-shadow:var(--shadow-lg);}
  .view-toggle button{border:0; background:transparent; color:#cfe3d6; padding:11px 20px; border-radius:99px; font-weight:800; font-size:14px;}
  .view-toggle button.active{background:var(--miel-500); color:#1a1200;}
}
@media (max-width:700px){
  .drawer{top:auto; bottom:0; left:0; right:0; width:100%; height:auto; max-height:90vh; border-radius:24px 24px 0 0; transform:translateY(100%);}
  .drawer.open{transform:none;}
  .drawer-band{border-radius:24px 24px 0 0;}
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important;} }