:root{
  --bg:#e4e9ee; --panel:#f7f9fb; --ink:#15212b; --mute:#5b6873; --line:#c9d2da;
  --red:#c4161c; --amber:#e8a317; --ok:#2e7d4f; --chip:#dbe2e8; --a0:#c9d2da;
  --sheet:#ffffff;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1a22; --panel:#16242f; --ink:#e6edf2; --mute:#8fa0ad; --line:#2a3b48;
    --red:#ff4b4f; --amber:#f2b33a; --ok:#5cc489; --chip:#1f303c; --a0:#2a3b48; --sheet:#1a2a36;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1a22; --panel:#16242f; --ink:#e6edf2; --mute:#8fa0ad; --line:#2a3b48;
  --red:#ff4b4f; --amber:#f2b33a; --ok:#5cc489; --chip:#1f303c; --a0:#2a3b48; --sheet:#1a2a36;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Barlow,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.4}
.cond{font-family:"Barlow Condensed","Arial Narrow",Barlow,sans-serif}
button{font:inherit;color:inherit}
button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.wrap{max-width:780px;margin:0 auto;padding:12px 12px 120px}

/* Cabecera */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:6px 2px 12px;border-bottom:3px solid var(--red)}
.top h1{margin:0;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;line-height:1.05}
.top p{margin:2px 0 0;color:var(--mute);font-size:13px}
.clock{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:52px;line-height:.9;font-variant-numeric:tabular-nums;text-align:right}
.clock small{display:block;font-size:13px;font-weight:500;color:var(--mute);font-family:Barlow,sans-serif}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:12px 0}
.stat{background:var(--panel);padding:8px 10px}
.stat b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:12px;color:var(--mute)}
.stat.bad b{color:var(--red)}

h2{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:18px;margin:18px 0 8px}
.hint{color:var(--mute);font-size:13px;margin:-4px 0 8px}

/* Radar */
.radarbox{background:#13202a;border-radius:10px;padding:8px;color:#dfe7ec}
.radarbox canvas{display:block;width:100%;aspect-ratio:1/1;border-radius:6px;cursor:pointer;touch-action:manipulation}
.rctl{display:flex;gap:4px;margin-top:8px;overflow-x:auto}
.rctl button{flex:1 0 auto;background:#1f303c;border:1px solid #2f4352;color:#dfe7ec;border-radius:5px;padding:7px 8px;font-size:13px;cursor:pointer;font-family:"Barlow Condensed",sans-serif;font-weight:600}
.rctl button[aria-pressed="true"]{background:#dfe7ec;color:#13202a}
.rctl button.fut{border-style:dashed}
.rinfo{font-size:13px;color:#cfdae2;margin-top:6px;min-height:18px}
.shift{font-family:"Barlow Condensed",sans-serif;font-size:20px;background:var(--chip);border-radius:6px;padding:8px 10px;margin:4px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips .aem{font-size:10.5px}
.tchips{display:flex;flex-wrap:wrap;gap:5px}
.tchip{border:1px solid var(--line);background:var(--chip);border-radius:14px;padding:5px 9px;font-size:13px;cursor:pointer}
.tchip small{color:var(--mute);margin-left:3px}
.tchip.off{background:transparent;text-decoration:line-through;opacity:.55}
.brief{border:1px solid var(--line);border-radius:8px;padding:10px;margin:0 0 10px}
.brief .bh{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;margin-bottom:6px}
.brow{display:flex;gap:8px;align-items:flex-start;margin:4px 0}.brow>b{flex:0 0 72px;font-size:13px;padding-top:2px}
.langsel{display:flex;gap:6px;margin-bottom:10px}
.langsel button{flex:1;border:2px solid var(--line);background:transparent;border-radius:6px;padding:8px;font-weight:600;cursor:pointer}
.langsel button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.journo{font-family:"Barlow Condensed",sans-serif;font-size:22px;font-weight:600;line-height:1.2;padding:12px 14px;border-left:5px solid var(--red);background:var(--chip);border-radius:4px;margin:8px 0 12px}
.answers{display:flex;flex-direction:column;gap:7px}
.ans{text-align:left;border:2px solid var(--line);background:transparent;border-radius:8px;padding:11px 12px;font-size:15px;cursor:pointer}
.ans.chosen{border-color:var(--ink);background:var(--chip)}
.ans:disabled:not(.chosen){opacity:.45;cursor:default}
.react{margin-top:10px;padding:9px 11px;border-radius:6px;background:var(--chip);font-style:italic}
.react.pos{border-left:4px solid var(--ok)}.react.neg{border-left:4px solid var(--red)}
.verdict{font-family:"Barlow Condensed",sans-serif;font-size:26px;font-weight:600;line-height:1.15;margin:10px 0}
.verdict span{display:block;font-size:48px;margin-bottom:4px}
.rctl+.rctl{margin-top:4px}
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--bg);padding:6px 0;margin:0 0 10px}
.tabs button{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:8px 4px;font-size:13px;font-weight:600;cursor:pointer;line-height:1.15;min-height:44px}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tabs .dot{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--red);display:none}
.tabs .dot.on{display:block}
.tabs .cnt{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-style:normal;font-size:12px;line-height:20px;display:none}
.tabs .cnt.on{display:block}
@media(max-width:420px){.tabs button{font-size:12px}}
.gosend{width:100%;margin-top:10px;padding:12px}
.zpick{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 4px}
.zpick button{border:1px solid var(--line);background:var(--chip);border-radius:14px;padding:6px 10px;font-size:13px;cursor:pointer}
.zpick button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.zpick button small{opacity:.75;margin-left:3px}
.top{padding-bottom:8px}.stats{margin:8px 0}
@media(max-width:480px){.top h1{font-size:18px}.top p{display:none}.clock{font-size:40px}.stat{padding:6px 8px}.stat b{font-size:20px}}
.legend{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:#9fb1bf}
.legend .grad{flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,#a9d6f5,#5aa8e8,#2c6fd1,#f2d43b,#f28c28,#c4161c,#8a0f5c)}

/* Mapa de comarcas */
.map{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:560px){.map{grid-template-columns:repeat(3,1fr)}}
.radarbox{max-width:560px;margin:0 auto}
.zone{position:relative;text-align:left;background:var(--panel);border:2px solid var(--line);border-radius:8px;padding:7px 8px 8px;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.zone.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.zone.up{cursor:default;border-style:dashed}
.zhead{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.zname{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:17px;line-height:1.05}
.zpop{font-size:11px;color:var(--mute)}
.aem{flex:none;font-size:11px;font-weight:600;padding:2px 6px;border-radius:3px;color:#15212b;white-space:nowrap}
.radar{border-radius:5px;padding:3px 8px;font-family:"Barlow Condensed",sans-serif;font-size:21px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.radar small{font-size:12px;font-weight:500;font-family:Barlow,sans-serif}
.fc{font-size:12px;color:var(--mute)}
.fc b{color:var(--ink);font-weight:600}
.river{font-size:12px}
.river .bar{height:5px;background:var(--chip);border-radius:3px;margin-top:2px;overflow:hidden}
.river .bar i{display:block;height:100%;background:#2c6fd1}
.river .bar i.hi{background:var(--red)}
.badge{margin-top:auto;font-size:12px;font-weight:600;padding:3px 6px;border-radius:4px;background:var(--chip);color:var(--mute)}
.badge.l1{background:#f2d43b;color:#15212b}
.badge.l2{background:#f28c28;color:#15212b}
.badge.l3{background:var(--red);color:#fff}
.tick{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:13px;display:none;align-items:center;justify-content:center}
.zone.sel .tick{display:flex}

/* Panel de acción */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.seg button{border:2px solid var(--line);background:var(--bg);border-radius:6px;padding:8px 6px;cursor:pointer;text-align:left;font-size:13px;line-height:1.2}
.seg button b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:16px}
.seg button[aria-pressed="true"]{border-color:var(--ink);background:var(--panel)}
.seg button[data-l="1"] b{color:#b08a00}
.seg button[data-l="2"] b{color:#c96a0a}
.seg button[data-l="3"] b{color:var(--red)}
.btn{border:0;border-radius:6px;padding:10px 14px;font-weight:600;cursor:pointer;background:var(--chip)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.red{background:var(--red);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.on{background:var(--ok);color:#fff}
.small{font-size:13px;color:var(--mute)}

.advance{position:fixed;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 30%);display:flex;justify-content:center;z-index:5}
.speed{width:100%;max-width:756px;display:flex;gap:6px;background:var(--ink);border-radius:10px;padding:6px}
.speed button{flex:1;padding:11px 6px;font-size:17px;font-family:"Barlow Condensed",sans-serif;font-weight:700;background:transparent;color:var(--bg);border:0;border-radius:6px;cursor:pointer}
.speed button.play{flex:1.6}
.speed button[aria-pressed="true"]{background:var(--bg);color:var(--ink)}
.speed button.play.paused{background:var(--red);color:#fff}
.clock .live{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);margin-right:5px;vertical-align:middle}
.clock .live.off{background:var(--mute)}

/* Feed */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.feed li{background:var(--panel);border-left:4px solid var(--line);border-radius:4px;padding:7px 10px;font-size:14px}
.feed li time{font-family:"Barlow Condensed",sans-serif;font-weight:600;color:var(--mute);margin-right:6px}
.feed li.ofi{border-left-color:#2c6fd1}
.feed li.ems{border-left-color:var(--red)}
.feed li.red{border-left-color:var(--amber)}
.feed li.press{border-left-color:var(--ok)}
.feed li.you{border-left-color:var(--ink)}

/* Modales */
.modal{position:fixed;inset:0;background:rgba(10,18,24,.6);display:none;align-items:flex-end;justify-content:center;z-index:20;padding:0 0 env(safe-area-inset-bottom,0px)}
.modal.open{display:flex}
@media(min-width:640px){.modal{align-items:center}}
.sheet{background:var(--sheet);color:var(--ink);width:100%;max-width:640px;max-height:92vh;overflow:auto;border-radius:14px 14px 0 0;padding:18px 18px 22px}
@media(min-width:640px){.sheet{border-radius:14px}}
.sheet h3{font-family:"Barlow Condensed",sans-serif;font-size:26px;margin:0 0 8px;line-height:1.05}
.sheet p{margin:8px 0}
.phone{background:#1d1d1f;color:#fff;border-radius:16px;padding:12px 14px;margin:12px 0;font-size:14px;line-height:1.35}
.phone .ph{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:600;font-size:13px;color:#ffb3b3}
.phone .ph i{width:20px;height:20px;border-radius:5px;background:var(--red);display:inline-flex;align-items:center;justify-content:center;font-style:normal;color:#fff;font-size:12px}
.warn{background:rgba(232,163,23,.15);border-left:4px solid var(--amber);padding:8px 10px;border-radius:4px;font-size:14px}
table{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
th,td{text-align:left;padding:5px 4px;border-bottom:1px solid var(--line)}
th{color:var(--mute);font-weight:500}
.tablewrap{overflow-x:auto}
.headline{font-family:"Barlow Condensed",sans-serif;font-size:19px;font-weight:600;line-height:1.15;padding:8px 0;border-bottom:1px solid var(--line)}
.grade{font-family:"Barlow Condensed",sans-serif;font-size:44px;font-weight:700;line-height:1}
.how{font-size:14px}
.how li{margin:4px 0}
@media (prefers-reduced-motion:no-preference){
  .zone.flash{animation:fl .8s ease-out}
  @keyframes fl{from{box-shadow:0 0 0 6px var(--red)}to{box-shadow:0 0 0 0 transparent}}
}

.utility{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;color:var(--mute)}
.utility button{padding:6px 10px;min-height:44px}
.help-dialog{color:var(--ink);background:var(--sheet);border:1px solid var(--line);border-radius:12px;width:min(640px,calc(100% - 24px));max-height:85vh;overflow:auto;padding:20px}
.help-dialog::backdrop{background:rgba(10,18,24,.6)}
.help-dialog h2{margin-top:0;font-size:26px}
.help-dialog li{margin:8px 0}
.forecast-note{font-size:12px;color:#cfdae2;padding:8px 2px;line-height:1.5}
.balance-stats{grid-template-columns:repeat(2,1fr)}
.decision-timeline{padding-left:22px}
.decision-timeline li{padding:8px 0;border-bottom:1px solid var(--line)}
.decision-timeline time{font-variant-numeric:tabular-nums;margin-right:8px;font-weight:600}

.preferences-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.preference-group{display:flex;gap:6px;align-items:center}
.theme-options{margin-left:auto}
.preference{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:48px;min-height:44px;padding:7px 10px;background:var(--panel);border:2px solid var(--line);border-radius:7px;cursor:pointer}
.preference[data-lang]{font-size:27px;line-height:1}
.preference svg{display:block;border-radius:2px}
.preference[aria-pressed="true"]{border-color:var(--ink);background:var(--chip);box-shadow:inset 0 0 0 1px var(--ink)}
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media(max-width:420px){.utility{align-items:flex-start}.utility>.row{flex-wrap:nowrap}.utility button{font-size:12px;padding:6px}.preferences-row{gap:8px}.preference{padding:6px 8px}}
.town-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;margin:12px 0 6px}
#townSearch{display:block;width:100%;min-height:44px;padding:8px 10px;margin:5px 0 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:inherit}
.town-scroll{max-height:min(32vh,280px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:6px;padding:4px 8px}
.town-group{border-bottom:1px solid var(--line)}
.town-group:last-child{border-bottom:0}
.town-group summary{cursor:pointer;padding:12px 0;min-height:44px;font-weight:600}
.town-group summary small{font-weight:400;color:var(--mute)}
.town-group .tchips{padding-bottom:8px}
.tchip{min-height:44px}
.excluded-summary{margin-top:8px}
.excluded-scroll{max-height:96px;overflow:auto;overscroll-behavior:contain}
.confirm-actions{position:sticky;bottom:-22px;background:var(--sheet);padding:12px 0 8px;z-index:1;border-top:1px solid var(--line)}
summary:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.btn{min-height:44px}
.seg button[data-l="1"] b{color:#806400}
.seg button[data-l="2"] b{color:#a34d00}
:root[data-theme="dark"] .seg button[data-l="1"] b{color:#f2d43b}
:root[data-theme="dark"] .seg button[data-l="2"] b{color:#f2b33a}

.speed.is-paused button[data-m]{opacity:.55}
.speed.is-paused button[data-m]:hover,.speed.is-paused button[data-m]:focus-visible{opacity:1}
