/* Color = esfuerzo. Los únicos colores fuertes son las zonas de FC. Todo lo demás es asfalto y niebla. */
:root{
  --cond:"Barlow Condensed","Roboto Condensed","Arial Narrow","DejaVu Sans Condensed",sans-serif;
  --fog:#E9ECEF; --paper:#F7F8F9; --asphalt:#1F2329; --ink:#3A414B; --mut:#7A838F; --rule:#D5DAE0;
  --z1:#B9C1CB; --z2:#3E7BFA; --z3:#17A673; --z4:#F2A007; --z5:#E5484D;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#C9CED5;color:var(--asphalt);font-family:Barlow,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased}
.phone{max-width:430px;margin:0 auto;min-height:100vh;background:var(--fog);padding-bottom:90px;position:relative}
.cd{font-family:var(--cond)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--z2);outline-offset:2px;border-radius:6px}

/* barra superior */
.top{display:flex;align-items:baseline;justify-content:space-between;padding:18px 20px 6px}
.brand{font-family:var(--cond);font-weight:800;font-size:22px;letter-spacing:.5px}
.brand span{color:var(--z4)}
.top .date{color:var(--mut);font-size:14px}
.top .cfg{color:var(--mut);font-size:14px;text-decoration:underline;text-underline-offset:3px}

main{padding:0 20px}
.screen{display:none}.screen.on{display:block;animation:in .25s ease-out}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.screen.on{animation:none}}

.context{font-size:14px;color:var(--mut);margin:6px 0 16px}
.context b{color:var(--ink);font-weight:600}

/* ===== HOY: la sesión es el héroe ===== */
.session{background:var(--paper);border-radius:22px;padding:22px 20px 20px;box-shadow:0 1px 0 var(--rule)}
.session .when{font-size:14px;color:var(--mut)}
.session h1{font-family:var(--cond);font-weight:800;font-size:76px;line-height:.85;letter-spacing:-1px;margin:10px 0 2px}
.session h1 small{font-size:30px;font-weight:700;letter-spacing:0;margin-left:4px}
.session .kind{font-size:20px;font-weight:600;color:var(--ink)}
.strip{display:flex;height:46px;border-radius:10px;overflow:hidden;margin:20px 0 8px;gap:2px}
.strip i{display:block}
.legend{display:flex;justify-content:space-between;font-size:13px;color:var(--mut)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;border-top:1px solid var(--rule)}
.facts div{padding:12px 0 2px}
.facts div+div{padding-left:14px;border-left:1px solid var(--rule)}
.facts b{display:block;font-family:var(--cond);font-size:26px;font-weight:700;line-height:1}
.facts span{font-size:12.5px;color:var(--mut)}
.coachline{margin-top:16px;font-size:15px;line-height:1.5;color:var(--ink)}
.actions{display:flex;gap:10px;margin-top:18px}
.btn{flex:1;padding:15px;border-radius:14px;font-weight:700;font-size:16px;text-align:center}
.btn.go{background:var(--asphalt);color:#fff}
.btn.alt{background:var(--fog);color:var(--asphalt)}

.timeline{display:flex;justify-content:space-between;margin:22px 4px 0;position:relative}
.timeline:before{content:"";position:absolute;left:10px;right:10px;top:5px;border-top:2px dotted var(--rule)}
.timeline div{position:relative;text-align:center;flex:1}
.timeline div:first-child{text-align:left}.timeline div:last-child{text-align:right}
.timeline i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--fog);border:2px solid var(--rule)}
.timeline .now i{background:var(--asphalt);border-color:var(--asphalt)}
.timeline b{display:block;font-family:var(--cond);font-size:20px;font-weight:700;margin-top:4px}
.timeline span{font-size:12px;color:var(--mut)}

/* bloques secundarios: sin cajas, solo títulos y reglas */
.sec{margin-top:30px}
.sec h2{font-size:17px;font-weight:700;margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline}
.sec h2 a,.sec h2 button{font-size:14px;font-weight:500;color:var(--mut);text-decoration:underline;text-underline-offset:3px}

.ready{display:flex;gap:16px;align-items:center}
.ready .score{font-family:var(--cond);font-size:64px;font-weight:800;line-height:.8;color:var(--z3)}
.ready p{font-size:15px;line-height:1.45;color:var(--ink)}
.ready p b{color:var(--asphalt)}

/* filas de días */
.days{border-top:1px solid var(--rule)}
.day{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--rule)}
.day .d{font-family:var(--cond);font-size:18px;font-weight:700;color:var(--mut);line-height:1}
.day .d small{display:block;font-family:Barlow,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:11.5px;font-weight:500}
.day .t{font-weight:600;font-size:15.5px}
.day .t small{display:block;font-weight:400;font-size:13px;color:var(--mut);margin-top:2px}
.day .mini{display:flex;height:5px;border-radius:3px;overflow:hidden;gap:1px;margin-top:7px;max-width:180px}
.day .r{font-size:13.5px;color:var(--mut)}
.day.today{background:var(--paper);margin:0 -12px;padding:13px 12px;border-radius:12px;border-bottom-color:transparent}
.day.today .d{color:var(--asphalt)}
.day.done .r{color:var(--z3);font-weight:600}
.day.rest .t{color:var(--mut);font-weight:500}

/* AÑO */
.year{margin-top:6px}
.yearbar{display:flex;height:34px;border-radius:8px;overflow:hidden;gap:2px}
.yearbar div{display:flex;align-items:center;padding-left:8px;font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}
.flags{position:relative;height:56px;margin-top:4px}
.flag{position:absolute;top:0;transform:translateX(-50%);text-align:center;font-size:12px;color:var(--mut)}
.flag:before{content:"";display:block;width:2px;height:14px;background:var(--asphalt);margin:0 auto 4px}
.flag b{display:block;font-family:var(--cond);font-size:18px;color:var(--asphalt);line-height:1}
.flag.a b{font-size:22px}
.months{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);margin-top:6px}

/* barras de volumen */
.vol{display:flex;align-items:flex-end;gap:10px;height:110px;margin-top:8px;padding-top:20px}
.vol div{flex:1;background:var(--z1);border-radius:6px 6px 0 0;position:relative}
.vol div.now{background:var(--asphalt)}
.vol div.down{background:transparent;border:2px dashed var(--z1);border-bottom:0}
.vol div b{position:absolute;top:-20px;left:0;right:0;text-align:center;font-family:var(--cond);font-size:16px}
.volx{display:flex;gap:10px;margin-top:6px}.volx span{flex:1;text-align:center;font-size:12px;color:var(--mut)}

/* PROGRESO */
.hero-num{font-family:var(--cond);font-weight:800;font-size:96px;line-height:.85;letter-spacing:-2px}
.hero-num small{font-size:28px;font-weight:600;letter-spacing:0;color:var(--mut)}
.delta{font-size:16px;color:var(--z3);font-weight:600;margin-top:6px}
svg.chart{width:100%;height:150px;margin-top:14px;overflow:visible}
.cap{font-size:13.5px;color:var(--mut);line-height:1.45;margin-top:8px}
.prs{border-top:1px solid var(--rule)}
.pr{display:grid;grid-template-columns:52px 1fr 1fr;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule)}
.pr .k{font-family:var(--cond);font-size:20px;font-weight:700}
.pr .now{font-family:var(--cond);font-size:24px;font-weight:700}
.pr .now small{display:block;font-family:Barlow,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:12px;font-weight:400;color:var(--mut)}
.pr .next{text-align:right;font-size:14px;color:var(--ink)}
.pr .next small{display:block;font-size:12px;color:var(--mut)}

/* CARRERA */
.bib{background:var(--paper);border-radius:22px;padding:20px;position:relative;overflow:hidden}
.bib:before,.bib:after{content:"";position:absolute;top:14px;width:10px;height:10px;border-radius:50%;background:var(--fog)}
.bib:before{left:14px}.bib:after{right:14px}
.bib .ev{font-size:14px;color:var(--mut);text-align:center;margin-top:4px}
.bib .num{font-family:var(--cond);font-weight:800;font-size:120px;line-height:.9;text-align:center;letter-spacing:-3px;margin:6px 0}
.bib .num small{font-size:30px;letter-spacing:0;font-weight:700}
.bib .goal{text-align:center;font-size:16px;color:var(--ink)}
.bib .goal b{font-family:var(--cond);font-size:22px}
.splits{margin-top:4px}
.split{display:grid;grid-template-columns:84px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.split .km{font-family:var(--cond);font-size:18px;font-weight:700}
.split .bar{height:8px;border-radius:4px}
.split .p{font-family:var(--cond);font-size:20px;font-weight:700;text-align:right}
.split .p small{display:block;font-family:Barlow,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:12px;font-weight:400;color:var(--mut)}
.check{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px}
.check span:last-child{color:var(--mut)}
.check.ok span:last-child{color:var(--z3);font-weight:600}
.check.todo span:last-child{color:var(--z4);font-weight:600}

/* CUERPO */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule)}
.metrics div{padding:14px 0;border-bottom:1px solid var(--rule)}
.metrics div:nth-child(odd){padding-right:12px;border-right:1px solid var(--rule)}
.metrics div:nth-child(even){padding-left:14px}
.metrics b{font-family:var(--cond);font-size:34px;font-weight:700;line-height:1;display:block}
.metrics span{font-size:13px;color:var(--mut)}
.metrics em{font-style:normal;font-size:12.5px;color:var(--z3);font-weight:600}

/* AJUSTES */
.set{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.set p{font-size:15.5px;font-weight:600}
.set p small{display:block;font-weight:400;font-size:13px;color:var(--mut);margin-top:2px}
.set .v{font-family:var(--cond);font-size:22px;font-weight:700}
.sw{width:46px;height:28px;border-radius:999px;background:var(--z1);position:relative;flex:none}
.sw.on{background:var(--asphalt)}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
.sw.on:after{left:21px}
.back{font-size:15px;color:var(--mut);text-decoration:underline;text-underline-offset:3px;margin:4px 0 8px;display:inline-block}
.pagetitle{font-family:var(--cond);font-weight:800;font-size:38px;line-height:.95;margin:6px 0 14px}


/* ===== análisis ===== */
.g3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.g3 div{padding:12px 10px 12px 0;border-bottom:1px solid var(--rule)}
.g3 div:not(:nth-child(3n+1)){padding-left:12px;border-left:1px solid var(--rule)}
.g3 b{display:block;font-family:var(--cond);font-size:26px;font-weight:700;line-height:1}
.g3 span{font-size:12.5px;color:var(--mut)}
.g3 em{display:block;font-style:normal;font-size:12px;margin-top:3px;font-weight:600}
.up{color:var(--z3)}.dn{color:var(--z5)}.eq{color:var(--mut)}
.kmb{display:flex;align-items:flex-end;gap:3px;height:86px;margin-top:12px}
.kmb i{flex:1;border-radius:3px 3px 0 0;display:block}
.kmx{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);margin-top:4px}
.zline{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;margin-top:10px}
.zleg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink);margin-top:8px}
.zleg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:0}
.flagline{font-size:13.5px;line-height:1.45;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--paper);color:var(--ink)}
.flagline b{color:var(--asphalt)}
.feel{display:flex;gap:6px;margin-top:10px}
.feel button{flex:1;padding:10px 0;border-radius:10px;background:var(--paper);font-family:var(--cond);font-size:18px;font-weight:700;color:var(--mut)}
.feel button.on{background:var(--asphalt);color:#fff}
.note2{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.45;color:var(--ink)}
.note2 .when{font-size:12.5px;color:var(--mut)}
.note2 .acts{display:flex;gap:8px;margin-top:8px}
.note2 .acts button{padding:7px 12px;border-radius:9px;font-size:13.5px;font-weight:700;background:var(--paper)}
.note2 .acts button.y{background:var(--asphalt);color:#fff}
.pvr{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:8px}
.pvr div{text-align:center;font-size:11.5px;color:var(--mut)}
.pvr .col{height:70px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;margin-bottom:4px}
.pvr .col i{display:block;border-radius:3px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.cal div{aspect-ratio:1;border-radius:8px;background:var(--paper);font-size:12px;padding:5px;color:var(--mut);position:relative}
.cal div b{position:absolute;left:5px;right:5px;bottom:5px;height:5px;border-radius:3px}
.cal div.t{outline:2px solid var(--asphalt);color:var(--asphalt);font-weight:700}
.cal div.x{background:transparent}
.cal div.ok:after{content:"✓";position:absolute;right:5px;top:3px;font-size:11px;color:var(--z3);font-weight:700}
.calh{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:11.5px;color:var(--mut);text-align:center;margin-top:6px}
svg.mini{width:100%;height:110px;margin-top:10px;overflow:visible}
.cmp{display:grid;grid-template-columns:1fr 70px 70px;border-top:1px solid var(--rule)}
.cmp div{padding:10px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.cmp .h{font-size:12.5px;color:var(--mut);text-align:right}
.cmp .n{text-align:right;font-family:var(--cond);font-size:19px;font-weight:700}
.sleep{display:flex;align-items:flex-end;gap:5px;height:90px;margin-top:12px;position:relative}
.sleep i{flex:1;border-radius:4px 4px 0 0;background:var(--z2);opacity:.85}
.sleep i.low{background:var(--z4)}
.sleep:after{content:"";position:absolute;left:0;right:0;bottom:70%;border-top:1px dashed var(--asphalt);opacity:.5}
.lift{display:grid;grid-template-columns:1fr auto;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.lift small{display:block;font-size:12.5px;color:var(--mut)}
.lift .w{font-family:var(--cond);font-size:20px;font-weight:700;text-align:right}
.lift .w small{text-align:right}

[data-theme=dark]{--fog:#12161C;--paper:#1B2129;--asphalt:#ECEFF3;--ink:#C8CED6;--mut:#8A94A1;--rule:#2A313B;--z1:#4A5462}
[data-theme=dark] body,html[data-theme=dark]{background:#0A0D11}
.btn.go{color:var(--fog)!important}
.vol div.now,.sw.on{background:var(--asphalt)}
.theme{font-size:14px;color:var(--mut);text-decoration:underline;text-underline-offset:3px;margin-left:12px}
/* navegación */
nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--paper);border-top:1px solid var(--rule);display:flex;padding:10px 8px 22px}
nav a{flex:1;text-align:center;text-decoration:none;color:var(--mut);font-size:13.5px;font-weight:600;padding:6px 0;position:relative}
nav a.on{color:var(--asphalt)}
nav a.on:after{content:"";position:absolute;left:30%;right:30%;top:-11px;height:3px;border-radius:0 0 3px 3px;background:var(--asphalt)}
/* v8 real */
.load{padding:60px 0;text-align:center;color:var(--mut)}
.err{background:var(--paper);border-radius:12px;padding:12px;color:var(--z5);font-size:14px;margin-top:12px}
.steps{margin-top:14px;border-top:1px solid var(--rule)}
.steps div{padding:10px 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.4;color:var(--ink)}
.steps b{color:var(--asphalt)}.steps small{display:block;color:var(--mut);font-size:13px}
.soon{padding:40px 0;color:var(--mut);line-height:1.5}
.soon a{color:var(--asphalt)}
.calnav{display:flex;gap:14px}
.cal div{cursor:pointer}
.cal div.x{cursor:default}
.cal div.miss:after{content:"·";position:absolute;right:6px;top:0;font-size:16px;color:var(--z5);font-weight:700}
.sheet{margin-top:10px;padding:12px;border-radius:12px;background:var(--paper);font-size:14px;line-height:1.45;color:var(--ink)}
.sheet b{color:var(--asphalt)}
.day{cursor:pointer}
.ver{font-size:11px;color:var(--mut);text-align:center;margin:30px 0 0}
.ver a{color:var(--mut)}
.facts b{white-space:nowrap;font-size:24px}
[data-theme=dark] .yearbar{outline:1px solid var(--rule)}
.metrics em{display:block;margin-top:3px}
/* gráficas de cuerpo */
svg.chart2{width:100%;height:auto;display:block;margin-top:6px;overflow:visible;touch-action:pan-y}
svg.chart2 .gl{stroke:var(--rule);stroke-width:1}
svg.chart2 .tk{font-size:10px;fill:var(--mut);font-family:Barlow,sans-serif}
svg.chart2 .lv{font-size:13px;font-weight:700;fill:var(--asphalt);font-family:var(--cond)}
svg .hit .xh{stroke:var(--asphalt);stroke-width:1;opacity:0}
svg .hit.on .xh,svg .hit:hover .xh{opacity:.35}
svg .hit.on path{filter:brightness(.85)}
svg.spark{width:100%;height:30px;display:block;margin-top:8px}
.leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--mut);margin-top:6px}
.leg i{display:inline-block;margin-right:6px;vertical-align:middle}
.leg .dot{width:8px;height:8px;border-radius:50%}
.leg .ln{width:16px;height:3px;border-radius:2px}
.leg .lsw{width:12px;height:10px;border-radius:2px;background:var(--z3);opacity:.35}
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--asphalt);color:var(--fog);border-radius:10px;padding:8px 10px;font-size:12.5px;line-height:1.35;box-shadow:0 4px 14px rgba(0,0,0,.18);max-width:220px}
.tip span,.tip b{display:block}.tip b{font-size:15px;font-family:var(--cond)}
details.tbl{margin-top:8px;font-size:13px;color:var(--mut)}
details.tbl summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;list-style:none}
details.tbl table{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:tabular-nums}
details.tbl th,details.tbl td{text-align:left;padding:5px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
details.tbl th{color:var(--mut);font-weight:500}
/* ===== v8.6 · series de gráficas, mapa de calor y escritorio ===== */
:root{--s1:#3E7BFA;--s2:#eb6834;--h1:#cde2fb;--h2:#86b6ef;--h3:#3987e5;--h4:#184f95}
[data-theme=dark]{--s2:#d95926;--h1:#1c3a66;--h2:#256abf;--h3:#5598e7;--h4:#b7d3f6}
.desk-only{display:none}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi{background:var(--paper);border-radius:16px;padding:14px 16px}
.kpi span{display:block;font-size:13px;color:var(--mut)}
.kpi b{display:block;font-family:var(--cond);font-size:34px;font-weight:700;line-height:1.05;margin-top:4px;white-space:nowrap}
.kpi em{display:block;font-style:normal;font-size:12.5px;font-weight:600;margin-top:4px;line-height:1.3}
.pn-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 0 18px}
.pn-head h1{font-family:var(--cond);font-weight:800;font-size:40px;line-height:1}
.pn-head p{color:var(--mut);font-size:14px;margin-top:6px}
.seg{display:flex;background:var(--paper);border-radius:12px;padding:3px;gap:2px}
.seg button{padding:8px 16px;border-radius:9px;font-size:14px;font-weight:600;color:var(--mut)}
.seg button.on{background:var(--asphalt);color:var(--fog)}
.pcard{background:var(--paper);border-radius:18px;padding:18px 20px 16px;margin-top:16px;min-width:0}
.pcard h2{font-size:17px;font-weight:700}
.pcard .sub{font-size:14px;color:var(--ink);line-height:1.45;margin:4px 0 6px}
.pcard .flagline,.pcard details.tbl{background:transparent}
.pgrid{display:grid;grid-template-columns:1fr;gap:0 16px}
.pgrid3{display:grid;gap:24px}
.ph b{display:block;font-size:15px}.ph span{font-size:12.5px;color:var(--mut)}
.pv{margin-top:6px}.pv b{font-family:var(--cond);font-size:30px;font-weight:700;margin-right:8px}.pv span{font-size:13px;color:var(--mut)}.pv em{font-style:normal;font-weight:600}
.ddwrap{display:grid;grid-template-columns:1fr;gap:20px}
#ddplots{cursor:crosshair;outline:none;border-radius:8px}
#ddplots:focus-visible{outline:2px solid var(--z2);outline-offset:4px}
.dp-h{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--mut);margin:12px 0 2px}
.dp-h b{color:var(--asphalt);font-size:14px}
svg .sx{stroke:var(--asphalt);stroke-width:1.25;opacity:.45}
.dcard{background:var(--fog);border-radius:14px;padding:14px 16px;align-self:start;position:sticky;top:20px}
.dc-h{font-family:var(--cond);font-size:24px;font-weight:700;line-height:1.05}
.dc-h small{display:block;font-family:Barlow,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:12px;font-weight:400;color:var(--mut);margin-top:3px}
.dc-s{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;margin:14px 0 4px}
.dent{position:relative;padding:6px 0 6px 12px;font-size:13.5px;line-height:1.35}
.dent b{display:block;font-weight:600}.dent span{color:var(--ink);font-size:12.5px}
.dent i{position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:2px}
.dr{display:grid;grid-template-columns:1fr auto;column-gap:8px;padding:6px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
.dr span{color:var(--mut)}.dr b{font-family:var(--cond);font-size:17px;font-weight:700;text-align:right}
.dr small{grid-column:1/-1;text-align:right;font-size:11.5px;font-weight:600;margin-top:-2px}
#zonas-sem{margin-top:14px}
#zonas-sem .sub{font-size:14px;margin-bottom:4px}
@media (min-width:700px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){
  html,body{background:var(--fog)}
  .phone{max-width:none;margin:0;padding:0 0 0 232px;min-height:100vh}
  .phone:before{content:"";position:fixed;left:0;top:0;bottom:0;width:232px;background:var(--paper);border-right:1px solid var(--rule)}
  .top{position:fixed;left:0;top:0;width:232px;flex-direction:column;align-items:flex-start;gap:6px;padding:28px 26px 0;z-index:6}
  .top .brand{font-size:28px}
  .theme{margin-left:0}
  nav{position:fixed;left:0;top:150px;bottom:auto;transform:none;width:232px;max-width:none;flex-direction:column;gap:2px;background:transparent;border:0;padding:0 14px;z-index:6}
  nav a{text-align:left;padding:11px 14px;border-radius:10px;font-size:15.5px}
  nav a.on{background:var(--fog)}
  nav a.on:after{display:none}
  nav a.desk-only{display:block}
  main{padding:30px 44px 40px;max-width:820px}
  main:has(#panel.on){max-width:1400px}
  .kpis{grid-template-columns:repeat(6,1fr)}
  .ddwrap{grid-template-columns:1fr 268px}
  .pgrid{grid-template-columns:1fr 1fr}
  .tip{max-width:260px}
  .sec h2{font-size:18px}
}
#progreso .zline,#progreso .zleg{display:none}