:root{
  --bg:#f4f6f8; --card:#fff; --ink:#1b2430; --muted:#66727f; --line:#e3e8ee;
  --accent:#0f7b6c; --warm:#e0603a; --cool:#2f6fd6; --rain:#3a8fd9; --norm:#9aa5b1;
  --good:#2e9d5b; --mid:#e2a72e; --bad:#d4483b;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#10151b;--card:#18202a;--ink:#e6ebf0;--muted:#94a1ae;--line:#2a3542;--norm:#5d6874}
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1000}
.brand{font-weight:700;font-size:18px;white-space:nowrap}
.brand small{font-weight:500;color:var(--muted);font-size:12px;margin-left:6px}
.logo{color:var(--accent)}
.search{position:relative;display:flex;gap:6px;flex:1;max-width:460px}
.search input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
.search button,.controls button{padding:9px 14px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.results{position:absolute;top:44px;left:0;right:0;margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.results li{padding:8px 10px;border-radius:8px;cursor:pointer}
.results li:hover{background:var(--bg)}
.layout{display:grid;grid-template-columns:minmax(320px,42%) 1fr;gap:0;height:calc(100vh - 58px - 30px)}
.mapwrap{position:relative}
#map{position:absolute;inset:0}
.place{position:absolute;left:12px;bottom:12px;z-index:500;background:var(--card);padding:8px 12px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.15);font-weight:600;max-width:calc(100% - 24px)}
.panel{overflow:auto;padding:12px 16px 24px}
.tabs{display:flex;gap:4px;position:sticky;top:-12px;background:var(--bg);padding:8px 0;z-index:10;overflow-x:auto}
.tab{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tabpane{display:none}.tabpane.active{display:block}
.status{margin:8px 0;padding:8px 12px;border-radius:10px;background:#fff6dd;color:#6b5100}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:10px 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.kpi .l{color:var(--muted);font-size:12px}
.kpi .v{font-size:24px;font-weight:700;margin-top:2px}
.kpi .s{font-size:12px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0}
.card h3{margin:0 0 8px;font-size:15px}
.en{font-weight:500;color:var(--muted);font-size:12px;margin-left:6px}
.chart{position:relative;height:220px}
.chart.tall{height:380px}
.note{color:var(--muted);font-size:12px;margin:6px 0 0}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0;align-items:end}
.controls label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px}
.controls select,.controls input{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit}
.suit{display:grid;gap:6px}
.srow{display:grid;grid-template-columns:130px 1fr 44px;gap:10px;align-items:center}
.srow .bar{height:12px;background:var(--line);border-radius:6px;overflow:hidden}
.srow .bar i{display:block;height:100%;border-radius:6px}
.srow .n{font-size:11px;color:var(--muted);grid-column:2/4}
.foot{height:30px;line-height:30px;padding:0 16px;font-size:11px;color:var(--muted);border-top:1px solid var(--line);background:var(--card)}
.spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:s .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes s{to{transform:rotate(360deg)}}
@media (max-width:860px){
  .layout{grid-template-columns:1fr;height:auto}
  .mapwrap{height:46vh}
  .panel{overflow:visible}
  .topbar{flex-wrap:wrap}
  .brand small{display:none}
  .search{max-width:none;flex-basis:100%}
  .tabs{top:0}
}
.status .retry{margin-left:8px;padding:4px 10px;border:0;border-radius:8px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}

/* stations + sources */
.stations{padding:10px 14px;margin:0 0 6px}
.stations summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.stations summary::-webkit-details-marker{display:none}
.stations summary::after{content:'▾';margin-left:auto;color:var(--muted)}
.stations[open] summary::after{content:'▴'}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:11px;color:var(--muted);font-weight:600}
.chip.alt{background:#fff1d6;color:#7a4b00;border-color:#f0c879}
.st-controls{margin:8px 0}
.st-controls input{flex:1;min-width:140px}
.st-list{list-style:none;margin:0;padding:0;max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.st-list li{display:flex;gap:8px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.st-list li:last-child{border-bottom:0}
.st-list li:hover,.st-list li.sel{background:var(--bg)}
.st-list .dot{width:9px;height:9px;border-radius:50%;flex:none}
.st-list .meta{margin-left:auto;color:var(--muted);font-size:11px;text-align:right}
.sources{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.st-pop b{font-size:13px}.st-pop .m{color:#555;font-size:12px;margin:2px 0}
.st-pop button{margin-top:6px;padding:5px 10px;border:0;border-radius:8px;background:#0f7b6c;color:#fff;font-weight:600;cursor:pointer}
.chip.live{background:#dff5ea;color:#11633f;border-color:#8fd3b0}
.foot{height:auto;min-height:30px;line-height:1.4;padding:7px 16px}

/* station icons: shape = type, colour = source */
.st-ico{display:inline-block;width:12px;height:12px;flex:none;background:var(--c);border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);box-sizing:border-box}
.st-ico.meteo{border-radius:50%}
.st-ico.rio{transform:rotate(45deg) scale(.85);border-radius:2px}
.st-ico.nieve{width:0;height:0;border:0;box-shadow:none;background:none;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--c);filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.st-ico.off{opacity:.45;filter:grayscale(.6)}
.leaflet-marker-icon .st-ico{margin:1px}
.st-legend{background:var(--card);color:var(--ink);padding:8px 10px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.2);font-size:11px;line-height:1.7}
.st-legend .st-ico{margin-right:6px;vertical-align:-1px}
.st-list li.more{color:var(--muted);cursor:default;font-size:12px}
.controls .chk{flex-direction:row;align-items:center;gap:6px;color:var(--ink)}
.controls .chk input{padding:0;width:auto;margin:0}

/* ---------- risk, drones, turismo, lots ---------- */
.ph{padding:14px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);text-align:center;font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .card{margin:0}
.riskrow{display:flex;gap:6px;flex-wrap:wrap}
.risk{flex:1 1 64px;min-width:64px;border-radius:10px;padding:6px 8px;background:var(--bg);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;text-align:center}
.risk b{font-size:13px;margin:2px 0}.risk small{font-size:11px;color:var(--muted)}
.risk.good{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,var(--card))}
.risk.mid{border-color:var(--mid);background:color-mix(in srgb,var(--mid) 16%,var(--card))}
.risk.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,var(--card))}
.risk.wet{border-color:var(--cool);background:color-mix(in srgb,var(--cool) 14%,var(--card))}
.verdict{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;margin:10px 0;font-size:14px}
.verdict b{font-size:18px}
.verdict.good{background:color-mix(in srgb,var(--good) 18%,var(--card));border:1px solid var(--good)}
.verdict.bad{background:color-mix(in srgb,var(--bad) 16%,var(--card));border:1px solid var(--bad)}
.strip{display:flex;flex-wrap:wrap;gap:2px;margin-top:8px}
.strip>i,.strip-l i{display:inline-block;width:calc((100% - 94px)/48);min-width:5px;height:14px;border-radius:2px}
.strip i.ok{background:var(--good)}.strip i.no{background:var(--bad)}.strip i.night{background:var(--line)}
.strip-l{flex-basis:100%;display:flex;gap:12px;font-size:11px;color:var(--muted);margin-top:4px}
.strip-l i{width:10px;height:10px;margin-right:4px;vertical-align:-1px}
ul.plain{list-style:none;margin:0;padding:0}ul.plain li{padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.dotz{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.st-ico.well{border-radius:2px;background:#3a8fd9;width:10px;height:10px}
.savebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.savebar input{flex:1;min-width:180px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
.btn,.lot-act button{padding:9px 14px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.lot-list{list-style:none;margin:0;padding:0}
.lot-list>li{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.lot-list label.chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer;flex:1;min-width:200px}
.lot-list label.chk input{margin-top:4px;width:18px;height:18px}
.lot-list small{display:block;color:var(--muted);font-size:11px}
.lot-act{display:flex;gap:6px;flex-wrap:wrap}
.lot-act button{padding:6px 10px;font-size:12px;background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.lot-act button.danger{color:var(--bad)}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;font-size:13px;min-width:420px}
table.cmp th,table.cmp td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.cmp thead th{position:sticky;top:0;background:var(--card)}
table.cmp th small{display:block;font-weight:400;color:var(--muted);font-size:10px}
table.cmp tbody th{font-weight:500;color:var(--muted);white-space:nowrap}
table.cmp td.best{font-weight:700;color:var(--good)}
table.cmp tr.sep th{padding-top:14px;color:var(--ink);font-weight:700}
.mini{display:inline-block;width:40px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--c) var(--w),var(--line) var(--w));margin-right:6px;vertical-align:1px}

/* ---------- phone & tablet ---------- */
@media (max-width:860px){
  body{font-size:15px}
  .topbar{padding:8px 12px;gap:8px;position:static}
  .brand{font-size:17px}
  .search input,.search button{padding:10px 12px;font-size:16px} /* 16px avoids iOS zoom on focus */
  .mapwrap{height:42vh;min-height:260px}
  .panel{padding:8px 12px 24px}
  .tabs{position:sticky;top:0;margin:0 -12px;padding:8px 12px;scrollbar-width:none;scroll-snap-type:x proximity}
  .tabs::-webkit-scrollbar{display:none}
  .tab{scroll-snap-align:start;padding:9px 14px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{padding:10px}.kpi .v{font-size:21px}
  .card{padding:12px;border-radius:12px}
  .chart{height:210px}.chart.tall{height:auto}
  .grid2{grid-template-columns:1fr}
  .controls{gap:8px}.controls label{flex:1 1 140px}
  .controls select,.controls input{font-size:16px;width:100%}
  .st-controls input,.st-controls select{flex:1 1 100%}
  .st-list{max-height:200px}
  .st-list li{padding:10px}
  .st-list .meta{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .srow{grid-template-columns:96px 1fr 34px;gap:8px}
  .place{font-size:13px;left:8px;bottom:8px;max-width:calc(100% - 70px)}
  .st-legend{display:none}
  .leaflet-control-layers-expanded{max-height:50vh;overflow:auto}
  .foot{font-size:10px}
  .savebar .btn{flex:1 1 100%}
}
@media (max-width:420px){
  .brand small{display:none}
  .kpi .v{font-size:19px}
  .risk{flex-basis:calc(33% - 6px);min-width:0}
  .strip>i{width:calc((100% - 50px)/24)}
  .verdict b{font-size:16px}
}
@media (min-width:861px) and (max-width:1180px){
  .layout{grid-template-columns:minmax(300px,38%) 1fr}
  .kpis{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
/* grid children must be allowed to shrink below their content (canvas sized at a previous width) */
.layout>*,.grid2>*,.kpis>*,.panel,.tabpane,.card{min-width:0}
.chart canvas{max-width:100%}
.st-controls .chk{flex:0 0 auto!important}
.st-controls .chk input{flex:none!important;width:18px!important;height:18px}
.chip.pending{background:transparent;color:var(--muted);border-style:dashed}
.kpi.warnk{border-color:var(--bad)}
.st-ico.pozo{border-radius:2px;width:10px;height:10px}
ul.plain li.inzone{color:var(--bad)}