:root{--acc-rgb:231,189,120;--b-rgb:134,191,220;--gold2:#d9935a}
/* ---------- Fuentes alojadas en la propia web (antes venían de Google Fonts) ----------
   Mismas familias y pesos que se pedían a Google. Fraunces es variable en tamaño óptico, como la de Google;
   sus dos pesos apuntan al mismo archivo, así que se descarga una sola vez. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300;font-display:swap;src:url("fonts/fraunces-latin-ext-opsz-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/fraunces-latin-ext-opsz-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-condensed-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-condensed-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300;font-display:swap;src:url("fonts/fraunces-latin-opsz-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/fraunces-latin-opsz-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/barlow-condensed-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--hero:url("img/hero.webp");--peak:url("img/peak.webp");--bgimg:none}

:root{--bg:#0f262c;--card:rgba(8,28,34,.72);--ink:#e9eef0;--mute:#8fa5ab;--gold:#d9b25e;--line:rgba(217,178,94,.25);--ok:#8fd19e;--bad:#e5766b}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;overflow-x:hidden;
background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 30% 8%,#fff9,transparent),radial-gradient(1.5px 1.5px at 55% 22%,#fff7,transparent),radial-gradient(1px 1px at 72% 12%,#fff9,transparent),radial-gradient(1.5px 1.5px at 88% 28%,#fff8,transparent),radial-gradient(1px 1px at 42% 34%,#fff6,transparent),radial-gradient(1px 1px at 20% 40%,#fff6,transparent),radial-gradient(1px 1px at 93% 6%,#fff8,transparent);background-attachment:fixed}
.moon{position:absolute;top:70px;left:max(4vw,16px);width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#d6dadb 60%,#a9b0b2);box-shadow:0 0 40px #fff4}
.moon:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 60% 55%,#0003 6px,transparent 7px),radial-gradient(circle at 30% 65%,#0002 5px,transparent 6px),radial-gradient(circle at 55% 25%,#0002 4px,transparent 5px)}
.dots{position:fixed;left:max(2vw,10px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:20}
.dots a{width:14px;height:14px;border:2px solid #fff;border-radius:50%;display:block;transition:.2s}
.dots a:hover,.dots a.on{border-color:var(--gold);background:var(--gold)}
.vert{position:fixed;right:max(1.5vw,8px);top:30%;writing-mode:vertical-rl;font-size:11px;letter-spacing:.2em;color:var(--mute);z-index:20}
.vert b{color:var(--gold);font-weight:400}
.hero{position:relative;text-align:center;padding:70px 16px 0;max-width:900px;margin:auto}
.kicker{font-size:12px;color:#dfe8ea}.kicker b{display:block;color:var(--gold);font-weight:400}
.kicker:after,.tag:after{content:"";display:block;width:70px;height:1px;background:var(--gold);margin:8px auto 0}
.hero h1{font-size:clamp(34px,7vw,60px);letter-spacing:.18em;font-weight:600;text-transform:uppercase;margin:14px 0 -10px;position:relative;z-index:2}
.hero svg{display:block;width:100%;height:auto;margin-top:-6px}
.status{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:-30px 0 24px;position:relative;z-index:3}
.pill{display:flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:12px;color:var(--mute)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--bad)}.dot.ok{background:var(--ok)}.dot.wait{background:var(--gold)}
main{max-width:1000px;margin:auto;padding:10px 16px 60px;display:grid;gap:34px}
.tag{text-align:center;font-size:12px;color:#dfe8ea}
h2{text-align:center;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(20px,4vw,28px);margin:12px 0 18px}
h2 span{color:var(--gold)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;backdrop-filter:blur(8px)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{background:var(--gold);color:#1a2a2e;border:0;border-radius:99px;padding:10px 20px;font:600 12px Inter;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.2s}
.btn:hover{filter:brightness(1.12)}.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn.ghost:hover{border-color:var(--gold)}
.btn.danger{background:transparent;color:var(--bad);border:1px solid #e5766b66}
select,input,textarea{width:100%;background:#0a1d22;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:13px Inter}
select:focus,input:focus,textarea:focus{outline:0;border-color:var(--gold)}
label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:12px 0 5px}
.muted{color:var(--mute);font-size:13px;line-height:1.5}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.m{border:1px solid var(--line);border-radius:12px;padding:12px;background:#0a1d2266}
.m small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.m b{font-size:22px;font-weight:600}.m i{font-style:normal;font-size:11px;color:var(--mute)}
.charts{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ch{height:240px;position:relative}
.cat{margin:12px 0}.cat .h{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}
.bar{height:8px;border-radius:9px;background:#0a1d22;overflow:hidden}.bar i{display:block;height:100%;background:#5d7f86;transition:.4s}.bar i.ok{background:var(--gold)}
.chip{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:11px;color:var(--gold);margin:2px 4px 2px 0}
.ov{position:fixed;inset:0;background:#040e11d9;backdrop-filter:blur(4px);z-index:50;display:none;align-items:center;justify-content:center;padding:14px}
.ov.on{display:flex}.box{background:#0d2227;border:1px solid var(--line);border-radius:18px;padding:24px;max-width:480px;width:100%;max-height:92vh;overflow:auto}
.box h3{letter-spacing:.14em;text-transform:uppercase;font-size:15px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hide{display:none}
@media(max-width:700px){.dots,.vert{display:none}.moon{top:20px;width:44px;height:44px}}

/* Ajustes solicitados: portada y estado del dispositivo */
.kicker b{display:block;color:#f5f5f0;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.kicker:after{display:none}
.hero-actions{display:flex;justify-content:center;align-items:center;margin:20px auto 22px}
.hero-actions .btn{display:inline-flex;align-items:center;gap:10px}
.hero .status{display:none}
#sesiones .status{justify-content:flex-start;margin:0 0 4px}
#sesiones .status .pill{font-size:12px}
/* --- Cumio visual refresh: diseño editorial de montaña --- */
:root{--bg:#08141c;--card:rgba(9,22,31,.76);--ink:#f5f5f0;--mute:#b8c4c9;--gold:#e7bd78;--line:rgba(var(--acc-rgb),.25);--ok:#9bd6ae;--bad:#f08b83}
html{scroll-padding-top:28px}
body{background-color:#08141c;background-image:linear-gradient(180deg,rgba(7,17,27,.10) 0%,rgba(7,17,27,.30) 36%,#08141c 78%),var(--bgimg);background-position:center top;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,rgba(5,15,24,.28),transparent 48%,rgba(5,15,24,.22))}
.moon{display:none}
.dots{left:26px;gap:15px}
.dots a{width:9px;height:9px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.15)}
.dots a:hover,.dots a.on{border-color:var(--gold);background:var(--gold);transform:scale(1.2)}
.vert{right:24px;color:#d5dcdf;font-size:10px;letter-spacing:.22em}
.hero{max-width:none;min-height:100svh;padding:clamp(115px,17vh,180px) 24px 60px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,15,24,.12) 0%,rgba(5,15,24,.18) 42%,#08141c 100%),var(--bgimg) center 42%/cover no-repeat}
.kicker{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#f4e5d4}
.kicker b{font-size:11px;letter-spacing:.18em;margin-top:10px;color:var(--gold)}
.kicker:after{width:44px;margin-top:18px}
.hero h1{font-size:clamp(48px,10vw,118px);letter-spacing:.055em;line-height:.98;font-weight:800;margin:26px 0 20px;text-shadow:0 8px 35px #07121a99}
.hero svg{display:none}
.hero-copy{max-width:550px;margin:0 auto;color:#f0f2f1;font-size:clamp(15px,1.8vw,19px);line-height:1.75;font-weight:300;text-wrap:balance;text-shadow:0 2px 16px #07121a}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin:30px 0 28px}
.hero-actions .btn{display:inline-flex;gap:18px;align-items:center;text-decoration:none;padding:15px 22px;font-size:10px;letter-spacing:.15em}
.hero-note{font-size:9px;letter-spacing:.2em;color:#e0e7e9}
.status{margin:8px 0 0;gap:8px}
.pill{background:rgba(6,17,25,.52);border-color:#ffffff30;color:#e1e8e9;backdrop-filter:blur(12px);padding:8px 13px}
main{max-width:1160px;padding:35px 26px 100px;gap:90px}
section{scroll-margin-top:25px}
.tag{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.tag:after{width:36px;margin-top:12px}
h2{font-size:clamp(25px,4vw,42px);letter-spacing:.06em;font-weight:600;margin:16px 0 30px}
h2 span{color:var(--gold)}
.card{background:linear-gradient(135deg,rgba(11,28,39,.88),rgba(8,20,29,.78));border:1px solid rgba(255,255,255,.13);border-radius:5px;padding:clamp(18px,3vw,30px);backdrop-filter:blur(18px);box-shadow:0 22px 70px #02080c25}
.row{gap:10px}
.btn{border-radius:2px;padding:13px 18px;font-size:10px;letter-spacing:.12em;transition:transform .25s,background .25s,border-color .25s}
.btn:hover{filter:none;transform:translateY(-2px);background:#f0cc8b}
.btn.ghost{border-radius:2px;background:rgba(255,255,255,.035);border-color:#ffffff35;color:#f2f3f0}
.btn.ghost:hover{border-color:var(--gold);background:#ffffff0c}
.btn.danger{border-radius:2px}
select,input,textarea{background:rgba(3,13,20,.72);border-color:#ffffff28;border-radius:3px;padding:12px 13px}
label{font-size:10px;letter-spacing:.16em}
.muted{color:#b4c1c7;font-size:12px;line-height:1.75}
.grid{gap:12px}
.m{background:rgba(5,16,24,.55);border:1px solid #ffffff1c;border-radius:3px;padding:18px}
.m small{font-size:9px;letter-spacing:.15em}
.m b{display:inline-block;margin-top:8px;font-size:clamp(23px,3vw,31px);font-weight:500}
.charts{gap:14px}
.ch{height:260px}
.cat{margin:18px 0}
.bar{height:5px;border-radius:0;background:#ffffff15}
.bar i{background:#8ca6ad}
.bar i.ok{background:var(--gold)}
.chip{border-radius:2px;padding:5px 9px;font-size:10px}
.ov{background:rgba(2,8,13,.82);backdrop-filter:blur(12px)}
.box{background:#0b1b25;border-radius:4px;border-color:#ffffff25;box-shadow:0 25px 100px #0008}
.box h3{letter-spacing:.1em}
@media(min-width:900px){main{gap:110px}.card{padding:30px}}
@media(max-width:700px){
  body{background-position:56% top;background-attachment:scroll;background-size:auto 100svh}
  .hero{min-height:94svh;padding:120px 22px 45px}
  .hero h1{font-size:clamp(43px,12vw,72px);letter-spacing:.02em}
  .hero-copy{max-width:360px;font-size:15px}
  .hero-actions{gap:14px;flex-direction:column}
  .hero-note{font-size:8px}
  main{padding:24px 15px 70px;gap:68px}
  .card{padding:17px}
  .two{grid-template-columns:1fr}
  .charts{grid-template-columns:1fr}
  .ch{height:220px}
  .status{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}



/* ================= Cumio v3: capa de datos ================= */
:root{--num:"Barlow Condensed","Roboto Condensed","Arial Narrow",Inter,sans-serif;--snow:#f2f0ea;--lichen:#a3b5bc;--glacier:#86bfdc;--coral:#ef8f7f;--hair:rgba(255,255,255,.09);--panel:rgba(9,22,31,.82);--plate:#0a1822}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.wrap-sec{display:grid;gap:14px}

/* Paneles */
.pane{background:var(--panel);border:1px solid var(--hair);border-radius:6px;padding:clamp(16px,2.6vw,28px);backdrop-filter:blur(18px)}
.pane h3{font:600 16px/1.3 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--snow);margin:0 0 4px}
.pane .sub{font-size:13px;color:var(--lichen);line-height:1.55;margin:0 0 16px;max-width:66ch}
.split{display:grid;gap:14px;grid-template-columns:1.55fr 1fr}
.split.even{grid-template-columns:1fr 1fr}
@media(max-width:860px){.split,.split.even{grid-template-columns:1fr}}
.chart{position:relative}
.chart canvas{display:block;width:100%}
.axis{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--lichen);margin-top:6px;font-variant-numeric:tabular-nums}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--lichen);margin-top:12px;align-items:center}
.legend i{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:7px;vertical-align:middle}
.legend i.tick{width:2px;height:12px;border-radius:0}
.legend i.dash{width:16px;height:0;border-top:2px dashed var(--glacier);border-radius:0}
.tip{position:absolute;left:0;top:0;pointer-events:none;background:#0b1b25;border:1px solid rgba(255,255,255,.18);padding:7px 10px;border-radius:4px;font-size:12px;line-height:1.45;color:var(--snow);white-space:nowrap;transform:translate(-50%,calc(-100% - 10px));opacity:0;transition:opacity .12s;z-index:5;box-shadow:0 10px 30px #0008}
.tip.on{opacity:1}
.tip b{font-family:var(--num);font-size:16px;font-weight:600}
.empty{padding:22px 0 6px;color:var(--lichen);font-size:13.5px;line-height:1.6}

/* Etiquetas */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.t{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:1;padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.05);color:var(--snow);border:1px solid rgba(255,255,255,.12);white-space:nowrap}
.t.g{border-color:rgba(var(--acc-rgb),.5);color:var(--gold)}
.t.b{border-color:rgba(var(--b-rgb),.5);color:var(--glacier)}
.t.warn{border-color:rgba(240,139,131,.55);color:var(--bad)}
.t.dim{color:var(--lichen)}

/* Resumen de sesión */
.sum{position:relative;padding:clamp(20px,3.2vw,40px);border-radius:6px;background:linear-gradient(180deg,rgba(15,34,47,.94),rgba(8,20,29,.88));border:1px solid var(--hair);backdrop-filter:blur(18px)}
.sum-head{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-start;justify-content:space-between;margin-bottom:clamp(22px,3.4vw,38px)}
.sum-when{font-size:15px;color:var(--snow);font-weight:500}
.sum-when small{display:block;color:var(--lichen);font-size:12.5px;font-weight:400;margin-top:4px}
#rWhen{font-size:clamp(19px,2.2vw,24px);font-weight:600;line-height:1.25}
#rWhen small{font-size:14.5px;margin-top:6px}
.sum-head .side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.linkbtn{background:none;border:0;color:var(--gold);font:500 12.5px Inter,sans-serif;cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--acc-rgb),.4)}
.linkbtn:hover{text-decoration-color:var(--gold)}
.figs{display:grid;grid-template-columns:1.3fr 1.3fr 1fr 1fr;gap:clamp(16px,3vw,44px);align-items:end}
@media(max-width:780px){.figs{grid-template-columns:1fr 1fr;row-gap:26px}}
.fig b{display:block;font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(52px,7.6vw,96px);line-height:.86;color:var(--snow);letter-spacing:.005em}
.fig.lead b{color:var(--gold)}
.fig.small b{font-size:clamp(36px,4.6vw,58px);color:#dfe5e3}
.fig .k{display:block;font-size:13.5px;color:var(--snow);margin-top:12px}
.fig .n{display:block;font-size:12.5px;color:var(--lichen);margin-top:4px;min-height:1.4em;line-height:1.4}
.strip{margin-top:clamp(26px,3.6vw,40px)}
#cStrip{height:104px;cursor:pointer}

/* Precisión */
.acc{display:grid;gap:22px}
.acc-row{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:18px;align-items:center}
@media(max-width:700px){.acc-row{grid-template-columns:1fr}}
.acc-row p{font-size:13px;color:var(--lichen);line-height:1.5}
.acc-row p b{display:block;font-family:var(--num);font-size:26px;font-weight:600;color:var(--snow);line-height:1.1;margin-bottom:2px}
.scale{position:relative;height:48px}
.scale .track{position:absolute;left:0;right:0;top:18px;height:4px;background:rgba(255,255,255,.1);border-radius:2px}
.scale .zone{position:absolute;top:12px;height:16px;background:rgba(155,214,174,.14);border-left:1px solid rgba(155,214,174,.55);border-right:1px solid rgba(155,214,174,.55)}
.scale .mk{position:absolute;top:4px;width:3px;height:32px;margin-left:-1.5px;background:var(--gold);border-radius:2px;transition:left .35s}
.scale .mk.bad{background:var(--bad)}
.scale .tk{position:absolute;top:34px;font-size:11px;color:var(--lichen);transform:translateX(-50%);font-variant-numeric:tabular-nums}
.pr{display:flex;height:10px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.08)}
.pr i{display:block;height:100%}
.pr-legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--lichen);margin-top:8px}
.pr-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* Editor de señal */
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 14px}
.tools .gap{flex:1}
.seg{display:inline-flex;border:1px solid rgba(255,255,255,.2);border-radius:3px;overflow:hidden;background:rgba(3,13,20,.5)}
.seg button{background:transparent;color:var(--snow);border:0;border-right:1px solid rgba(255,255,255,.12);padding:10px 14px;font:500 12.5px Inter,sans-serif;cursor:pointer;transition:background .15s,color .15s}
.seg button:last-child{border-right:0}
.seg button:hover{background:rgba(255,255,255,.06)}
.seg button[aria-pressed="true"]{background:var(--gold);color:#16252b}
.seg.wide{display:flex;width:100%}.seg.wide button{flex:1;padding:11px 8px}
.icon{min-width:40px;padding:10px 12px!important;font-size:14px!important;letter-spacing:0!important}
.check{display:inline-flex;gap:8px;align-items:center;font-size:12.5px;color:var(--snow);text-transform:none;letter-spacing:0;margin:0;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--gold);margin:0}
.editor{position:relative;height:clamp(240px,34vw,330px);border-radius:4px;background:var(--plate);border:1px solid var(--hair)}
.editor canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;border-radius:4px}
.editor.segmode canvas{cursor:ew-resize}
#ovCv{display:block;width:100%;height:46px;margin-top:8px;border-radius:4px;background:var(--plate);border:1px solid var(--hair);cursor:grab;touch-action:none}
.statline{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:16px;font-size:12.5px;color:var(--lichen);align-items:baseline}
.statline span b{font-family:var(--num);font-size:26px;font-weight:600;color:var(--snow);margin-right:7px;font-variant-numeric:tabular-nums}
.statline span b.ok{color:var(--ok)}.statline span b.bad{color:var(--bad)}

/* Historial */
.totals{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,40px);margin-bottom:clamp(22px,3vw,34px)}
@media(max-width:700px){.totals{grid-template-columns:1fr 1fr}}
.totals b{display:block;font-family:var(--num);font-weight:600;font-size:clamp(36px,4.8vw,58px);line-height:.9;color:var(--snow);font-variant-numeric:tabular-nums}
.totals div:first-child b{color:var(--gold)}
.totals span{display:block;font-size:13px;color:var(--snow);margin-top:9px}
.totals small{display:block;font-size:12px;color:var(--lichen);margin-top:3px}
.ridge{background:var(--plate);border:1px solid var(--hair);border-radius:4px;padding:8px 0 0}
#cRidge{cursor:pointer}
.ridge .axis{padding:0 14px 10px}
.list{display:grid;margin-top:4px}
.rowS{display:grid;grid-template-columns:1.15fr 1.7fr .6fr .65fr .9fr 1.5fr;gap:14px;align-items:center;padding:13px 10px;border:0;border-top:1px solid var(--hair);background:none;color:var(--snow);text-align:left;font:13px Inter,sans-serif;width:100%;cursor:pointer;transition:background .15s}
.rowS:hover{background:rgba(255,255,255,.035)}
.rowS.on{background:rgba(var(--acc-rgb),.08);box-shadow:inset 3px 0 0 var(--gold)}
.rowS.hd{cursor:default;font-size:12px;color:var(--lichen);padding-top:4px;border-top:0}
.rowS.hd:hover{background:none}
.rowS .d small{display:block;color:var(--lichen);font-size:12px;margin-top:2px}
.rowS .v{font-family:var(--num);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.rowS .v small{font-family:Inter,sans-serif;font-size:11.5px;font-weight:400;color:var(--lichen);margin-left:4px}
.rowS canvas{width:100%;height:28px;display:block}
@media(max-width:760px){
  .rowS{grid-template-columns:1fr auto;row-gap:8px}
  .rowS .c-tags,.rowS .c-bar{grid-column:1/-1}
  .rowS .c-dur{display:none}
  .rowS.hd{display:none}
  .rowS [data-l]::after{content:attr(data-l);font:400 11.5px Inter,sans-serif;color:var(--lichen);margin-left:6px}
}
.busy{font-size:12px;color:var(--lichen);min-height:1.4em;margin-top:10px}

/* Dataset */
.totals.ds{margin:14px 0 18px}
.hold{margin-top:28px;padding-top:20px;border-top:1px solid var(--hair)}
.hold h4{font:500 14px Inter,sans-serif;color:var(--gold);margin:0 0 4px}
.totals.ds b{font-size:clamp(30px,3.6vw,44px)}
.totals.ds div:first-child b{color:var(--gold)}
.info .bub.wide{max-width:min(480px,86vw)}
.mx{display:grid;grid-template-columns:minmax(74px,.8fr) repeat(2,1fr);gap:6px;margin-top:6px}
.mx .grp{grid-column:span 2;text-align:center;font-size:13px;color:var(--snow);padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.14)}
.mx .h{font-size:12px;color:var(--lichen);text-align:center;padding:4px 0 2px}
.mx .rl{font-size:13.5px;color:var(--snow);display:flex;align-items:center}
.cell{position:relative;min-height:76px;border-radius:4px;border:1px solid var(--hair);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:rgba(255,255,255,.025)}
.cell .fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(var(--acc-rgb),.30),rgba(var(--acc-rgb),.12));transition:height .5s}
.cell.done{border-color:rgba(var(--acc-rgb),.6)}
.cell b{position:relative;font-family:var(--num);font-size:30px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.cell small{position:relative;font-size:11px;color:var(--lichen);margin-top:4px}
.cell.zero b{color:#6f8188}
@media(max-width:560px){.cell{min-height:60px}.cell b{font-size:24px}.mx .h{font-size:11px}}
.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,3vw,32px);margin-top:26px}
@media(max-width:700px){.extras{grid-template-columns:1fr}}
.ex .h{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}
.ex .h span:last-child{font-family:var(--num);font-size:17px;font-weight:600;color:var(--lichen)}
.ex.ok .h span:last-child{color:var(--gold)}
.ex .tr{height:5px;background:rgba(255,255,255,.09);border-radius:3px;overflow:hidden}
.ex .tr i{display:block;height:100%;background:#8ca6ad;transition:width .5s}
.ex.ok .tr i{background:var(--gold)}
.ex p{font-size:11.5px;color:var(--lichen);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}

/* Modelo */
.form3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.form3{grid-template-columns:1fr}}
.form3 label{white-space:nowrap}
.hint{font-size:11.5px;color:var(--lichen);margin-top:5px;line-height:1.4}
.meters{display:grid;gap:13px;margin-top:14px}
.meter{display:grid;grid-template-columns:minmax(120px,.9fr) 1.2fr 76px;gap:12px;align-items:center;font-size:13px}
.meter small{display:block;font-size:11.5px;color:var(--lichen);margin-top:2px}
.meter .tr{height:6px;background:rgba(255,255,255,.09);border-radius:3px;overflow:hidden}
.meter .tr i{display:block;height:100%;background:var(--gold);transition:width .6s}
.meter .tr i.c{background:var(--coral)}
.meter b{font-family:var(--num);font-size:22px;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#lossCv{height:130px;background:var(--plate);border:1px solid var(--hair);border-radius:4px}

/* Modal de etiquetado */
.box{max-width:580px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:480px){.choices{grid-template-columns:1fr 1fr}}
.choice{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);color:var(--snow);border-radius:4px;padding:12px 11px;text-align:left;cursor:pointer;font:500 13.5px Inter,sans-serif;transition:border-color .15s,background .15s}
.choice small{display:block;color:var(--lichen);font-weight:400;font-size:11.5px;margin-top:4px;line-height:1.35}
.choice:hover{border-color:rgba(var(--acc-rgb),.5)}
.choice[aria-pressed="true"]{border-color:var(--gold);background:rgba(var(--acc-rgb),.13)}
.box .two{margin-top:2px}
@media(prefers-reduced-motion:reduce){.scale .mk,.cell .fill,.ex .tr i,.meter .tr i{transition:none}}

.hide{display:none!important}
#lossCv{display:block;width:100%}

/* Marcha y terreno */
#cTG{height:46px;cursor:pointer}
.tgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(18px,3vw,40px);margin-top:20px;align-items:start}
@media(max-width:820px){.tgrid{grid-template-columns:1fr}}
.share{margin-bottom:20px}.share .h{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--snow);margin-bottom:8px}
.share .muted{font-size:12px}
.tq{display:grid;grid-template-columns:minmax(96px,1.2fr) repeat(3,minmax(70px,1fr));overflow-x:auto}
.tq>span{padding:9px 6px;border-top:1px solid var(--hair);text-align:right;font-family:var(--num);font-size:19px;font-weight:600;color:var(--snow);font-variant-numeric:tabular-nums;white-space:nowrap}
.tq>.hd{font:400 11.5px/1.3 Inter,sans-serif;color:var(--lichen);border-top:0;white-space:normal;align-self:end}
.tq>.rl{text-align:left;font:400 13px Inter,sans-serif;align-self:center}
.tgm{margin-top:18px}.tgm h4{font:500 14px Inter,sans-serif;color:var(--snow);margin:0 0 4px}
.cm{display:grid;gap:4px;margin-top:12px}
.cm .h{font-size:11.5px;color:var(--lichen);text-align:center;padding:2px 0}
.cm .rl{font-size:12.5px;color:var(--snow);display:flex;align-items:center}
.cm .cc{border:1px solid var(--hair);border-radius:3px;text-align:center;padding:9px 2px;font-family:var(--num);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.cm .cc.d{border-color:rgba(155,214,174,.45)}

/* Ruta */
.map{position:relative;isolation:isolate;z-index:0;height:clamp(300px,46vw,480px);border-radius:4px;border:1px solid var(--hair);background:var(--plate);overflow:hidden}
.map.leaflet-container{background:var(--plate);font:12px/1.4 Inter,system-ui,sans-serif}
.map .leaflet-bar{border:1px solid rgba(255,255,255,.18);box-shadow:none}
.map .leaflet-bar a{background:#0b1b25;color:var(--snow);border-bottom-color:rgba(255,255,255,.12)}
.map .leaflet-bar a:hover{background:#13293a;color:var(--gold)}
.map .leaflet-control-attribution{background:rgba(8,20,28,.72);color:var(--lichen);font-size:10.5px}
.map .leaflet-control-attribution a{color:var(--lichen)}
.map .leaflet-tooltip{background:#0b1b25;border:1px solid rgba(255,255,255,.18);color:var(--snow);box-shadow:0 10px 30px #0008;font:12px Inter,sans-serif}
.map .leaflet-tooltip-top:before{border-top-color:rgba(255,255,255,.18)}
.map .mnote{position:absolute;left:12px;bottom:10px;font-size:11.5px;color:var(--lichen);pointer-events:none}
#rProf{height:150px;cursor:crosshair}
#rSync{display:block;width:100%;height:74px;background:var(--plate);border:1px solid var(--hair);border-radius:4px;margin-top:4px}
#ruta .pane,#ruta .sum{transition:border-color .2s}
#ruta.drop .pane,#ruta.drop .sum{border-color:rgba(var(--acc-rgb),.6)}
.shift{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.shift .btn{padding:10px 12px}
.lbl-link{display:inline;margin:0;text-transform:none;letter-spacing:0}

/* ===== v4 ===== */
/* Fondo: degradado del cielo de la foto de montaña (azul, lavanda, malva), más claro que antes
   para que destaquen los paneles, que siguen siendo oscuros */
body{background-color:#2b3f63;background-image:linear-gradient(180deg,#2b3f63 0%,#3b5282 20%,#5a6798 45%,#7c719c 70%,#957a98 88%,#a4808f 100%);background-size:100% 100%;background-repeat:no-repeat;background-attachment:scroll;background-position:0 0}
body:before{background:linear-gradient(90deg,rgba(14,20,40,.22),transparent 45%,rgba(14,20,40,.16))}
.hero:before{background:linear-gradient(180deg,rgba(5,15,24,.12) 0%,rgba(5,15,24,.16) 45%,rgba(43,63,99,.72) 84%,#2b3f63 100%),var(--bgimg) center 42%/cover no-repeat}
h2{text-shadow:0 2px 22px rgba(15,22,46,.5)}
.vert{color:#eef1f4}
/* Dispositivo */
#sesiones .status{justify-content:center}
.connect{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:8px 0 4px}
.connect .row{justify-content:center;gap:12px}
#connect{padding:19px 38px;font-size:12px;letter-spacing:.16em}
#download{padding:19px 28px;font-size:12px;letter-spacing:.14em}
/* Cifras del mismo tamaño */
.figs{grid-template-columns:repeat(4,1fr)}
.fig b,.fig.small b{font-size:clamp(50px,6.6vw,88px)}
.fig .k{font-size:15px;margin-top:14px}
.fig .n{font-size:13px}
.figs.f5{grid-template-columns:repeat(5,1fr);gap:clamp(14px,2.4vw,32px)}
.figs.f5 .fig b{font-size:clamp(40px,5vw,70px)}
@media(max-width:780px){.figs,.figs.f5{grid-template-columns:1fr 1fr}.fig b,.fig.small b,.figs.f5 .fig b{font-size:clamp(42px,12vw,64px)}}
.strip .legend{font-size:13px}
.strip .axis{font-size:12.5px}
/* Tabla de terreno más grande */
.rq>span{font-size:24px;padding:12px 8px}
.rq>.hd{font-size:12.5px}
.rq>.rl{font-size:14.5px}
#cHist{cursor:crosshair}
/* Modo desarrollo de modelos */
body:not(.dev) .devonly{display:none!important}
body:not(.dev) #cStrip,body:not(.dev) #cTG{cursor:default}
.devgate{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.devgate .sub{margin:0}
.warnbox{border-left:3px solid var(--coral);padding:4px 0 4px 14px;margin:14px 0 18px}
.warnbox p{color:var(--snow);font-size:13.5px;line-height:1.6}
.warnbox p+p{margin-top:8px;color:var(--lichen)}

/* ===== v6 ===== */
/* Cifras alineadas por arriba: el texto de debajo puede ocupar más o menos líneas sin mover el número */
.figs,.figs.f5{align-items:start}
.fig{min-width:0}
.figs.f5{gap:clamp(18px,3vw,40px)}
.figs.f5 .fig b{font-size:clamp(38px,4.6vw,64px)}
.figs.f5 .fig .k,.figs.f5 .fig .n{overflow-wrap:break-word}
/* Icono de información: el texto aparece al pasar el ratón o al tocarlo */
.pane{position:relative}
.pane:hover,.pane:focus-within{z-index:3}
.pane .sub:empty{display:none}
.info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:9px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.38);background:transparent;color:var(--lichen);font:italic 600 11.5px/1 Georgia,"Times New Roman",serif;cursor:help;vertical-align:2px;transition:border-color .15s,color .15s}
.info:hover,.info:focus{border-color:var(--gold);color:var(--gold);outline:0}
.info:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.info .bub{position:absolute;left:-12px;top:calc(100% + 9px);z-index:30;width:max-content;max-width:min(340px,78vw);padding:11px 13px;background:#0b1b25;border:1px solid rgba(255,255,255,.18);border-radius:4px;box-shadow:0 14px 40px #0009;font:normal 400 12.5px/1.55 Inter,system-ui,sans-serif;color:var(--snow);text-align:left;white-space:normal;letter-spacing:0;text-transform:none;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
.info:hover .bub,.info:focus .bub{opacity:1;visibility:visible;transform:none}
/* oculta, la burbuja no ocupa sitio (si no, ensancha la página hacia la derecha) */
.info .bub{display:none}
.info:hover .bub,.info:focus .bub{display:block}
/* Gráficas más grandes donde ha quedado sitio */
#rProf{height:200px}
#cTG{height:60px}
.map{height:clamp(320px,50vw,540px)}
/* Lista de sesiones de altura fija, con su propia barra de desplazamiento */
.list{position:relative;max-height:min(560px,70vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(var(--acc-rgb),.35) transparent;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.list::-webkit-scrollbar{width:8px}
.list::-webkit-scrollbar-thumb{background:rgba(var(--acc-rgb),.3);border-radius:4px}
.list .rowS.hd{position:sticky;top:0;z-index:1;background:#0c1d28;padding-top:10px}
@media(max-width:780px){.figs.f5 .fig b{font-size:clamp(42px,12vw,64px)}}
#rPlay{padding:8px 16px;font-size:10.5px;line-height:16px}

/* ===== v7 ===== */
/* Textos pequeños algo más grandes */
.legend,.pr-legend{font-size:13.5px}
.axis{font-size:12.5px}
.hint{font-size:12.5px}
.share .h{font-size:14.5px}
.tq>.hd{font-size:12.5px}
/* La tabla del gesto nunca se desplaza: las columnas se ajustan al cuadro */
.tq{overflow:visible}
.rlead{font-size:15.5px;line-height:1.5;color:var(--snow);margin:2px 0 14px}
.rlead:empty{display:none}
/* Reproducción: panel en directo sobre el mapa y línea de tiempo */
.mapwrap{position:relative}
.hud{position:absolute;left:14px;top:14px;z-index:5;max-width:calc(100% - 28px);padding:13px 16px 12px;background:rgba(8,20,28,.88);border:1px solid rgba(255,255,255,.16);border-radius:6px;box-shadow:0 14px 40px #0008;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.hud.on{opacity:1;transform:none}
.hud-t{font-family:var(--num);font-size:22px;font-weight:600;color:var(--snow);font-variant-numeric:tabular-nums}
.hud-t small{font-size:15px;color:var(--lichen);font-weight:500}
.hud-v{display:flex;gap:20px;margin-top:6px}
.hud-v span{display:flex;flex-direction:column;min-width:64px}
.hud-v b{font-family:var(--num);font-size:36px;font-weight:600;line-height:1;color:var(--snow);font-variant-numeric:tabular-nums}
.hud-v small{font-size:11.5px;color:var(--lichen);margin-top:5px}
.hud-p{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hud-p i{font-style:normal;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--c);color:var(--snow);background:color-mix(in srgb,var(--c) 22%,transparent)}
#rScrub{display:block;width:100%;height:30px;margin-top:10px;cursor:pointer;touch-action:none}
@media(max-width:600px){.hud{left:8px;top:8px;padding:10px 12px}.hud-v{gap:14px}.hud-v b{font-size:28px}}
/* Eficiencia */
.mini{display:grid;gap:26px;margin-top:6px}
.mini .fig b{font-size:clamp(40px,4.4vw,60px)}
/* Ritmo con y sin bastones */
/* Ritmo con y sin bastones: una ficha por terreno, como las cifras de la ruta */
.pvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pv{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px 16px 14px;display:flex;flex-direction:column;min-width:0}
.pv-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.pv-h span{font-size:13px;color:var(--snow)}
.pv-h small{font-size:12px;color:var(--lichen)}
.pv-fs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pv-f{min-width:0;transition:opacity .2s}
.pv-f b{display:block;font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(34px,3.6vw,46px);line-height:.9;color:#dfe5e3}
.pv-f.u b{color:var(--gold)}
.pv-f.lose{opacity:.45}
.pv-f .k{display:block;font-size:12.5px;color:var(--lichen);margin-top:8px}
.pv>.n{display:block;font-size:12.5px;line-height:1.45;color:var(--lichen);margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.pv>.n b{font-weight:600;color:var(--snow)}.pv>.n.u b{color:var(--gold)}
#rPace{cursor:crosshair}#rSlope{cursor:crosshair}
/* Cansancio: la conclusión y, por métrica, una ficha con las barras de inicio y final */
#fatTxt.fat-v{font:500 17px/1.45 var(--sans);color:var(--snow);margin:0 0 16px}
.fatg{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:12px}
.fz{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px 16px 14px;min-width:0}
.fz-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.fz-n{font-size:13px;line-height:1.35;color:var(--snow)}
.fz-n small{display:block;color:var(--lichen);font-size:12px;margin-top:2px}
.fz-d{flex:none;font:600 15px/1 var(--num);font-variant-numeric:tabular-nums;color:var(--c);padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);white-space:nowrap}
.fz-r{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:9px}
.fz-k{font-size:12px;color:var(--lichen)}
.fz-t{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden}
.fz-t>span{display:block;height:100%;border-radius:3px}
.fz-r.a .fz-t>span{background:rgba(var(--acc-rgb),.38)}
.fz-r.b .fz-t>span{background:var(--cb)}
.fz-v{font:600 22px/1 var(--num);font-variant-numeric:tabular-nums;color:var(--snow);min-width:54px;text-align:right;white-space:nowrap}
.fz-r.a .fz-v{color:var(--lichen)}
.cmpt>span{font-size:17px}.cmpt>.rl{font-size:13.5px}.cmpt>.win{color:var(--gold)}
.pses{margin-top:18px}.pses summary{cursor:pointer;color:var(--gold);font-size:13.5px;list-style:none}.pses summary::-webkit-details-marker{display:none}
.pses summary:before{content:"▸ ";display:inline-block;transition:transform .15s}.pses[open] summary:before{transform:rotate(90deg)}
.pst{margin-top:10px}.pst>span{font-size:15px}.pst>.rl small{display:block;font:400 11.5px Inter,sans-serif;color:var(--lichen)}.pst>.bad{color:var(--coral)}
.legend i.ring{width:10px;height:10px;border-radius:50%;border:2px solid var(--lichen);background:transparent}
@media(max-width:600px){#ruta .tools .seg button{padding:8px 7px;font-size:12px}
  .rq>span{font-size:18px;padding:10px 3px}}
.tq>span{min-width:0}
@media(max-width:400px){.rq>span{font-size:16px;padding:9px 2px}.rq>.hd{font-size:10.5px;hyphens:auto;overflow-wrap:anywhere}.rq>.hd{font-size:11px}.tq>span{padding:9px 3px}
}
.btn,select,input,textarea{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.tk{white-space:nowrap}


/* ===== Sacar y guardar en el mapa ===== */
.pmk-w{background:none;border:0}
.pmk{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:0 6px 18px #000a,0 0 0 2px rgba(10,24,34,.9);animation:pmkIn .45s cubic-bezier(.2,1.4,.4,1) both;transition:transform .18s}
.pmk svg{width:16px;height:16px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pmk.on{background:var(--gold)}.pmk.on svg{stroke:#14232b}
.pmk.off{background:#0b1b25;box-shadow:0 6px 18px #000a,inset 0 0 0 2px var(--snow)}.pmk.off svg{stroke:var(--snow)}
.pmk-w:hover .pmk{transform:scale(1.15)}
@keyframes pmkIn{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pmk{animation:none}}
.map .leaflet-tooltip.ptip{padding:9px 12px;line-height:1.5;border-radius:6px}
.ptip b{font-weight:600;color:var(--gold)}.ptip .mt{color:var(--lichen)}
.legend i.pmk-l{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;vertical-align:middle}
.legend i.pmk-l svg{width:11px;height:11px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.legend i.pmk-l.on{background:var(--gold)}.legend i.pmk-l.on svg{stroke:#14232b}
.legend i.pmk-l.off{background:#0b1b25;box-shadow:inset 0 0 0 1.5px var(--snow)}.legend i.pmk-l.off svg{stroke:var(--snow)}
/* ===== Silueta en el historial ===== */
.rowS .d{display:flex;align-items:center;gap:12px}
.sil{width:44px;height:34px;flex:none;overflow:visible}
.sil path{fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(var(--acc-rgb),.35))}
.sil circle{fill:var(--snow)}
.sil.none path{stroke:rgba(255,255,255,.14);filter:none;stroke-dasharray:2 3}
.rowS:hover .sil path,.rowS.on .sil path{stroke-width:2.1}
/* ===== Botones de tarjeta y sin conexión ===== */
.card-btn{display:inline-flex;align-items:center;gap:8px}
.card-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-btn{padding:10px 14px}
/* ===== Tarjeta de la sesión ===== */
.box.pbox{max-width:1080px;padding:22px}
.pst{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(270px,.9fr);gap:28px;align-items:start}
.pst-prev{display:flex;align-items:center;justify-content:center;min-height:300px;padding:22px;border-radius:6px;background:radial-gradient(circle at 50% 40%,#183442,#060f15 75%)}
.pst-prev canvas{display:block;max-width:100%;max-height:min(74vh,760px);width:auto;height:auto;border-radius:8px;box-shadow:0 30px 70px #000b,0 0 0 1px rgba(255,255,255,.08);transition:opacity .2s}
.pst-ctl label{margin-top:16px}
.pst-ctl input:not([type=checkbox]){width:100%}
.pthemes button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pthemes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pthemes button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 4px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:var(--snow);font:500 12px Inter,sans-serif;cursor:pointer;transition:border-color .15s,transform .15s}
.pthemes button:hover{transform:translateY(-2px)}
.pthemes button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:rgba(var(--acc-rgb),.1);box-shadow:0 0 0 1px var(--gold)}
.pthemes i{width:100%;aspect-ratio:4/5;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.seg button small{display:block;font-size:10.5px;opacity:.7;margin-top:2px}
.pst-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pst-act .btn{flex:1 1 auto}
@media (max-width:780px){.pst{grid-template-columns:1fr}.pst-prev{padding:12px;min-height:0}.pst-prev canvas{max-height:52vh}}

:is(#kTer,#rTable) .tq>span{display:flex;align-items:center;justify-content:flex-end;align-self:stretch}
:is(#kTer,#rTable) .tq>.rl{justify-content:flex-start}
:is(#kTer,#rTable) .tq>.hd{align-items:flex-end;text-align:right}
:is(#kTer,#rTable) .tq>.hd.rl{text-align:left}

/* ===================== v8 · capa editorial (mockup) ===================== */
:root{color-scheme:dark;--night:#0b1218;--snow:#f2f0ea;--sand:#f5d9a6;--gold:#e7bd78;--lichen:#a3b5bc;--mist:#c9d3d7;--hair:rgba(242,240,234,.12);--panel:transparent;--plate:#0a1822;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
html{background:#2b3f63}
body{font-family:var(--sans);font-size:15px;line-height:1.6;background-color:#2b3f63!important;color:var(--snow)}
body:before{display:none}
body{min-height:100vh;background-image:linear-gradient(180deg,#2b3f63 0%,#3b5282 18%,#5a6798 42%,#7c719c 68%,#957a98 88%,#a4808f 100%)!important;background-size:100% 100%!important;background-repeat:no-repeat!important;background-attachment:scroll!important}
.btn,select,input,textarea,.seg button,.choice,.linkbtn,.check{font-family:var(--sans)}
a{color:var(--snow)}a:hover{color:var(--gold)}

/* ---------- Cabecera ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:30}
.top-in{max-width:1200px;margin:0 auto;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:var(--serif);font-size:30px;line-height:1;text-decoration:none;color:var(--snow)}
.logo em{color:var(--gold)}
.tabs{display:flex;gap:6px 28px;font-size:14px}
.tabs a{text-decoration:none;padding:10px 0;color:#d6dde0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.tabs a:hover{color:var(--snow)}
.tabs a[aria-current="page"]{color:var(--snow);border-bottom-color:var(--gold)}
.tabs a svg{display:none}
.syncbtn{display:flex;align-items:center;gap:10px;font:500 14px var(--sans);color:var(--snow);padding:10px 18px 10px 14px;border-radius:999px;background:rgba(11,18,24,.45);border:1px solid rgba(245,217,166,.5);backdrop-filter:blur(12px);min-height:44px;cursor:pointer;transition:border-color .15s,background .15s}
.syncbtn:hover{border-color:var(--sand);background:rgba(11,18,24,.65)}
.syncbtn svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--sand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.syncbtn .lv{width:8px;height:8px;border-radius:50%;background:var(--lichen);opacity:.6}
.syncbtn.on .lv{background:#8fd6a8;opacity:1}
.syncbtn.busy .lv{background:var(--sand);opacity:1;animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- Vistas ---------- */
.view{display:none}
.view.on{display:block}
.wrap{max-width:1160px;margin:0 auto;padding:8px 28px 110px;display:flex;flex-direction:column;gap:56px}
main.wrap{display:flex;gap:56px}

/* Portada de la sesión */
.hx{position:relative;overflow:hidden;min-height:560px;display:flex;flex-direction:column;isolation:isolate}
.hx:before,.ph:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero) center 55%/cover no-repeat}
.hx:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,18,24,.45) 0%,rgba(11,18,24,.1) 30%,rgba(30,44,72,.45) 68%,#2b3f63 100%)}
.hx-in{margin-top:auto;padding:150px 32px 72px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.kick{margin:0;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--sand)}
.hx h1,.ph h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.2vw,88px);line-height:.98;letter-spacing:-.01em;max-width:900px;text-transform:none;text-shadow:none}
.hx h1 em,.ph h1 em,.wrap h2 em,.dlg h2 em{color:var(--sand)}
.meta{margin:0;font-size:15px;color:#d6dde0;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.hx .btn{margin-top:10px}

/* Cabecera de las otras vistas */
.ph{position:relative;overflow:hidden;isolation:isolate;min-height:340px;display:flex;align-items:flex-end}
.ph:before{filter:blur(5px);transform:scale(1.05)}
.ph:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,30,52,.45),rgba(33,49,80,.7) 60%,#2b3f63)}
.ph-in{max-width:1100px;width:100%;margin:0 auto;padding:130px 32px 34px;display:flex;flex-direction:column;gap:12px}
.ph h1{font-size:clamp(44px,6vw,72px)}
.ph p{margin:0;color:var(--mist);max-width:60ch}

/* Títulos de bloque */
.wrap h2{text-align:left;margin:0 0 18px;font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,40px);line-height:1.1;letter-spacing:0;text-transform:none;text-shadow:none}
.wrap h2 span{color:inherit}

/* ---------- Selector de sesión ---------- */
/* La sesión abierta se lee como un título (serif, como el resto de cabeceras) y las acciones van
   en un grupo de iconos como el de los controles del mapa */
.pick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:center}
.pick-sel{min-width:0}
.pick-sel label{margin:0 0 6px;font:500 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--lichen)}
.selw{position:relative}
.selw:after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:1.6px solid var(--sand);border-bottom:1.6px solid var(--sand);transform:translateY(-75%) rotate(45deg);pointer-events:none}
.pick select{-webkit-appearance:none;appearance:none;width:100%;background:transparent;border:0;border-bottom:1px solid rgba(242,240,234,.16);border-radius:0;padding:2px 34px 10px 0;font:300 clamp(22px,2.6vw,30px)/1.25 var(--serif);letter-spacing:-.01em;color:var(--snow);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;transition:border-color .15s}
.pick select:hover{border-bottom-color:rgba(245,217,166,.5)}
.pick select:focus{outline:0;border-color:transparent;border-bottom-color:var(--sand)}
.pick select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.pick select option{font:400 15px var(--sans);background:#0b1b25;color:var(--snow)}
.pick .acts{display:flex;align-items:center;gap:2px;padding:6px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.pact{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:76px;min-height:56px;margin:0;padding:7px 8px 6px;border:0;border-radius:16px;background:transparent;color:var(--mist);font:600 11.5px/1.2 var(--sans);letter-spacing:0;text-transform:none;cursor:pointer;transition:background .15s,color .15s}
.pact svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pact:hover{color:var(--snow);background:rgba(255,255,255,.06)}
.pact:focus-visible,.pact:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:1px}
.pact.del{color:#f0a89f}
.pact.del:hover{color:var(--coral);background:rgba(239,143,127,.1)}
.pick .dsep{height:34px;margin:0 4px}
.pick .tags{grid-column:1/-1}
.pick .tags:empty{display:none}
@media(max-width:820px){.pick{grid-template-columns:1fr}.pick .acts{justify-content:space-between}.pact{flex:1;min-width:0}}

/* ---------- v9 · Tarjetas ---------- */
.card2,.pane,.sum,.pick{background:linear-gradient(150deg,rgba(14,30,44,.86),rgba(9,20,30,.80))!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:22px!important;box-shadow:0 18px 50px rgba(8,14,30,.28)!important;backdrop-filter:blur(18px)!important;padding:clamp(18px,2.4vw,28px)!important}
.wrap-sec{gap:16px}
.split{gap:16px}
.split>.pane{min-width:0}
.pane h3,.sum>h3,#accTitle,.lab{font:500 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--lichen);margin:0 0 12px}
.pane .sub{color:var(--mist);font-size:14px}
.rlead{font-size:15.5px;color:var(--snow);max-width:70ch}
.info{border-color:rgba(242,240,234,.3);vertical-align:1px}
.empty{color:var(--lichen)}
.sum-head{margin-bottom:22px}
#rWhen{font:400 clamp(26px,3vw,34px)/1.15 var(--serif)}
#rWhen small{font-family:var(--sans)}
/* Cifras: la tipografía de datos de Cumio */
.num,.fig b,.totals b{font-family:var(--num);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.005em}
.fig.lead b,.totals div:first-child b{color:var(--gold)}
.fig .k{font-size:13px;color:var(--snow);margin-top:10px}
.fig .n{color:var(--lichen)}
/* Las cifras de la ruta y del historial pasan a ser tarjetas pequeñas */
.figs.f5,.totals{gap:12px}
.figs.f5 .fig,.totals>div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px 16px 14px}
.figs.f5 .fig b{font-size:clamp(34px,3.6vw,48px)}
.totals b{font-size:clamp(32px,3.6vw,46px)}
.totals span{font-size:13px;color:var(--snow);margin-top:8px}

/* Resumen de la sesión: rejilla de tarjetas */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bento>.card2{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:var(--snow)}
.bento .use{grid-column:span 3;flex-direction:row;align-items:center;gap:24px}
.bento .routecard{grid-column:span 3}
.bento .stat{grid-column:span 2}
.stat b.num{font-size:clamp(46px,5vw,64px);line-height:.9;color:var(--snow)}
.stat .n,.use .n,.routecard .n{font-size:12.5px;color:var(--lichen);line-height:1.45;margin-top:8px}
.use .num{font-size:clamp(40px,4.4vw,54px);line-height:.9;display:block}
.ring{position:relative;width:170px;height:170px;flex:none}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring .bg{stroke:rgba(255,255,255,.08)}
.ring .fg{stroke-linecap:round;transition:stroke-dasharray .7s ease}
.ring b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:600 44px/1 var(--num);color:var(--snow);font-variant-numeric:tabular-nums}
.ring b small{font:500 12px var(--sans);color:var(--gold)}
@media(prefers-reduced-motion:reduce){.ring .fg{transition:none}}
.routecard{position:relative;overflow:hidden;transition:border-color .2s}
.routecard:hover{border-color:rgba(var(--acc-rgb),.55)!important;color:var(--snow)}
.routecard>*{position:relative}
.routecard>.topo-w{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 40%,rgba(0,0,0,.55) 100%);mask-image:radial-gradient(ellipse at 50% 45%,#000 40%,rgba(0,0,0,.55) 100%)}
.topo-w svg{display:block;width:100%;height:100%}
.topo path{fill:none;stroke:rgba(242,240,234,.085);stroke-width:.7;stroke-linecap:round}
.topo .ix{stroke:rgba(var(--acc-rgb),.2);stroke-width:1}
.routecard:hover .topo .ix{stroke:rgba(var(--acc-rgb),.3)}
#hSil{flex:1;display:flex;align-items:center;justify-content:center;min-height:150px}
#hSil svg.sil{width:100%;height:160px;overflow:visible}
#hSil .sil path{stroke-width:1.1;filter:drop-shadow(0 0 2px rgba(var(--acc-rgb),.35))}
#hSil .sil.none path{stroke-width:.6}
#hSil .sil circle{r:1.3px}
.go{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gold);margin-top:6px}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .use,.bento .routecard{grid-column:1/-1}.bento .stat{grid-column:span 1}.bento .stat:last-child{grid-column:1/-1}}
@media(max-width:480px){.bento .use{flex-direction:column;align-items:flex-start}.ring{width:150px;height:150px}}

/* Detalle plegable */
.more:not(.open){display:none}
.morebtn{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:none;border:0;padding:6px 0;color:var(--gold);font:500 13.5px var(--sans);cursor:pointer}
.morebtn:after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.morebtn[aria-expanded="true"]:after{transform:rotate(-135deg) translateY(-1px)}
.more.open{margin-top:12px}

/* Mapa integrado */
.mapwrap{border-radius:18px;overflow:hidden;isolation:isolate}
.map{border-radius:18px;border:1px solid rgba(255,255,255,.12)}

/* Botones píldora */
.btn{border-radius:999px;padding:12px 22px;min-height:44px;font:600 14px var(--sans);letter-spacing:0;text-transform:none;color:var(--night);background:var(--sand)}
.btn:hover{transform:none;background:#f8e4bf;color:var(--night)}
.btn.ghost{border-radius:999px;background:transparent;border:1px solid rgba(242,240,234,.35);color:var(--snow);font-weight:500}
.btn.ghost:hover{border-color:var(--sand);background:rgba(245,217,166,.06);color:var(--snow)}
.btn.danger{border-radius:999px;font-weight:500;border-color:rgba(240,139,131,.5)}
.btn:disabled{opacity:.35}
.btn.sm{padding:9px 16px;min-height:40px;font-size:13px}
#rPlay{padding:9px 16px;font-size:13px;line-height:20px}
.seg{border-radius:999px;border-color:rgba(242,240,234,.22)}
.seg button{padding:9px 14px;font-size:13px}
.seg button[aria-pressed="true"]{background:var(--sand);color:var(--night)}
.card-btn{padding:10px 16px}
select,input,textarea{border-radius:4px}
label{font-family:var(--sans)}

/* Desarrollo: tarjeta con imagen */
.gate{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;min-height:380px;display:flex;align-items:center;justify-content:center;text-align:center}
.gate:before{content:"";position:absolute;inset:0;z-index:-2;background:var(--peak) center 45%/cover no-repeat}
.gate:after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,18,24,.62)}
.gate-in{padding:48px 32px;max-width:720px;display:flex;flex-direction:column;align-items:center;gap:20px}
.gate h3{margin:0;font:400 clamp(32px,4vw,44px)/1.1 var(--serif);letter-spacing:0;text-transform:none;color:var(--snow)}
.gate p{margin:0;color:var(--mist);max-width:56ch}
.devsec{display:flex;flex-direction:column;gap:20px}

/* Modales del código (etiquetado, avisos, tarjeta) por encima del diálogo de sincronización */
.ov{z-index:80;background:rgba(5,10,14,.78)}
.box{background:rgba(11,22,32,.97);border:1px solid rgba(242,240,234,.14);border-radius:22px;padding:34px 38px}
.box h3{font:400 32px/1.1 var(--serif);letter-spacing:0;text-transform:none;color:var(--snow);margin-bottom:6px}

/* ---------- Diálogo de sincronización ---------- */
.sync{position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;justify-content:center;padding:max(6vh,24px) 16px 24px;overflow:auto}
.sync.on{display:flex}
.sync-bg{position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(11,18,24,.74),rgba(11,18,24,.74)),var(--hero) center 55%/cover no-repeat}
.sync-bg:after{content:"";position:absolute;inset:0;backdrop-filter:blur(6px)}
.dlg{position:relative;width:min(560px,100%);background:rgba(11,18,24,.88);border:1px solid rgba(242,240,234,.14);border-radius:22px;padding:36px 44px 30px;display:flex;flex-direction:column;gap:22px;backdrop-filter:blur(20px)}
.dlg-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand)}
.dlg h2{margin:0;font:400 40px/1.05 var(--serif);text-transform:none;letter-spacing:0;text-shadow:none;text-align:inherit}
#connect,#download{padding:14px 28px;font-size:15px;letter-spacing:0;min-height:48px}
.dlg p{margin:0;color:var(--mist)}
.dlg .note{font-size:12px;color:var(--lichen)}
.st{display:none;flex-direction:column;gap:18px}
.dlg[data-state="idle"] .st-idle,.dlg[data-state="searching"] .st-searching,.dlg[data-state="found"] .st-found,.dlg[data-state="down"] .st-down,.dlg[data-state="done"] .st-done{display:flex}
.st.center{align-items:center;text-align:center}
.st .btn{align-self:flex-start}
.st.center .btn{align-self:center}
.radar{width:132px;height:132px}
.radar circle{fill:none}
.radar path{fill:none;stroke:var(--sand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dev-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.dev-row b{display:block;font-weight:600}
.dev-row small{display:block;font-size:13px;color:var(--lichen)}
.batt{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mist);font-variant-numeric:tabular-nums}
.batt>span:first-child{width:26px;height:12px;border:1px solid var(--lichen);border-radius:3px;padding:1px;display:inline-block}
.batt i{display:block;height:100%;width:0;background:#8fd6a8;border-radius:1px;transition:width .4s}
.batt i.low{background:var(--bad)}
.bign{font:400 88px/1 var(--serif);font-variant-numeric:tabular-nums}
.dlg .dl-now{font:300 28px/1.2 var(--serif);color:var(--snow)}
.bign small{font-size:28px;color:var(--lichen);margin-left:8px}
.indet{height:2px;background:var(--hair);overflow:hidden;position:relative}
.indet i{position:absolute;top:0;bottom:0;width:30%;background:var(--sand);animation:slide 1.4s ease-in-out infinite}
@keyframes slide{from{left:-30%}to{left:100%}}
.st-done .row{gap:10px}
.sline{display:flex;align-items:center;gap:9px;padding-top:14px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--lichen);min-height:1.4em}
.sline .dot{flex:none}
@media(prefers-reduced-motion:reduce){.radar animate{display:none}.indet i{animation:none;left:0;width:100%;opacity:.5}.syncbtn.busy .lv{animation:none}}

/* Aviso flotante para los mensajes de estado con el diálogo cerrado */
.toast{position:fixed;left:50%;bottom:28px;z-index:90;transform:translate(-50%,10px);max-width:min(520px,calc(100% - 32px));padding:12px 18px;border-radius:999px;background:rgba(11,18,24,.94);border:1px solid rgba(242,240,234,.16);font-size:13.5px;color:var(--snow);box-shadow:0 14px 40px #0009;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}

.foot{text-align:center;font-size:12px;color:var(--lichen);padding:0 16px 40px}

/* ---------- Móvil ---------- */
@media(max-width:760px){
  .top-in{padding:20px 22px}
  .logo{font-size:26px}
  .syncbtn{padding:0;width:44px;justify-content:center;gap:0;position:relative}
  .syncbtn .lbl{display:none}
  .syncbtn .lv{position:absolute;top:2px;right:2px;width:10px;height:10px;box-shadow:0 0 0 2px var(--night)}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;justify-content:space-around;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:rgba(11,18,24,.94);border-top:1px solid var(--hair);backdrop-filter:blur(14px);font-size:11.5px}
  .tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border:0;color:var(--lichen)}
  .tabs a svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .tabs a[aria-current="page"]{color:var(--sand)}
  .hx{min-height:560px}
  .hx-in{padding:120px 22px 48px;gap:12px}
  .ph{min-height:270px}
  .ph-in{padding:100px 22px 26px}
  .wrap{padding:4px 14px 120px;gap:44px}
  main.wrap{gap:44px}
  .dlg{padding:28px 22px 22px}
  .dlg h2{font-size:34px}
  .bign{font-size:64px}
  .toast{bottom:84px;border-radius:12px}
  .foot{padding-bottom:96px}
}
/* La foto de cabecera se funde con el cielo de la página, sin corte */
.hx:before,.hx:after,.ph:before,.ph:after{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.hx:after{background:linear-gradient(180deg,rgba(11,18,24,.4) 0%,rgba(11,18,24,.08) 30%,rgba(30,44,72,.35) 70%,rgba(43,63,99,.6) 100%)}
.ph:after{background:linear-gradient(180deg,rgba(20,30,52,.45),rgba(33,49,80,.7))}

/* Panel de reproducción: anchos fijos para que las cifras no bailen y colores que se funden */
.hud-v b{display:inline-block;min-width:3.6ch}
.hud-p i{transition:background-color .5s,border-color .5s,color .5s}
.hud-w{font-size:11px;color:var(--lichen);margin-top:9px}

/* Separación entre tarjetas dentro de la parte de ruta que aparece con GPX */
#rMore{display:grid;gap:16px}
/* Las cifras de la ruta y del historial, todas de la misma altura */
.figs.f5,.totals{align-items:stretch!important}
.figs.f5 .fig,.totals>div{height:100%}

/* Cabecera fija: las pestañas siguen a mano al bajar */
.top{position:fixed;z-index:45;transition:transform .25s}
.top:before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(24,36,60,.78);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px rgba(8,14,30,.25);opacity:0;transition:opacity .25s;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.top.stuck:before{opacity:1}
.top-in{transition:padding .25s}
.top.stuck .top-in{padding-top:10px;padding-bottom:10px}
.top.stuck .logo{font-size:26px}
section,.pane,.sum{scroll-margin-top:96px}
@media(max-width:760px){.top.stuck .top-in{padding-top:8px;padding-bottom:8px}section,.pane,.sum{scroll-margin-top:72px}}
@media(prefers-reduced-motion:reduce){.top,.top:before,.top-in{transition:none}}

/* ---------- v11 · Recorrido con controles flotantes ---------- */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.routepane{padding:14px!important}
.mapbox{position:relative}
.routepane .map{height:clamp(440px,52vw,620px);border-radius:16px;border:0}
.mapwrap{border-radius:16px}
.fl,.hud{background:rgba(11,22,32,.86);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(0,0,0,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mapbox:has(#rMap.hide) :is(.fl,.hud){display:none}
.fl{position:absolute;z-index:6}
.ftitle{left:18px;top:18px;display:flex;align-items:center;gap:12px;padding:9px 18px 9px 10px;border-radius:999px;max-width:calc(100% - 330px)}
.ftitle b{display:block;font-weight:600;font-size:14px;line-height:1.3}
#rStat{display:block;font-size:12.5px;color:var(--lichen);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fic{width:34px;height:34px;flex:none;border-radius:50%;background:var(--sand);color:var(--night);display:flex;align-items:center;justify-content:center}
.fright{right:18px;top:18px;display:flex;align-items:flex-start;gap:8px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.fseg{background:rgba(11,22,32,.86);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(0,0,0,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:3px;gap:2px}
.fseg button{border-radius:999px;border:0!important}
.optw{position:relative}
.fbtn{width:46px;height:46px;border-radius:50%;border:0;background:var(--sand);color:var(--night);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.3)}
.fbtn:hover,.fbtn[aria-expanded="true"]{background:#f8e4bf}
.fpop{position:absolute;right:0;top:56px;width:236px;padding:16px 18px;border-radius:18px;display:flex;flex-direction:column;gap:14px;background:rgba(11,22,32,.94);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,0,0,.4);z-index:8}
.fpop[hidden]{display:none}
.fpop-k{font-size:12.5px;color:var(--lichen)}
.fsw{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;font:500 14px var(--sans);color:var(--snow);letter-spacing:0;text-transform:none;cursor:pointer;min-height:28px}
.fsw input{width:20px;height:20px;accent-color:var(--gold);cursor:pointer;margin:0}
/* Panel de reproducción en columna, a la izquierda */
.hud{left:18px;top:84px;width:178px;max-width:none;padding:16px 18px;border-radius:18px;z-index:6}
.hud-v{flex-direction:column;gap:12px;margin-top:12px}
.hud-v span{display:flex;flex-direction:column-reverse;gap:2px}
.hud-v b{font-size:30px;min-width:0}
.hud-v small{font-size:11.5px}
.hud-p{margin-top:14px}
/* Dock inferior: modos de color, reproducir y velocidad */
.dock{left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:26px;max-width:calc(100% - 36px)}
.dmodes{display:flex;gap:2px}
.dmodes button{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;min-height:52px;padding:7px 0 6px;border:0;border-radius:14px;background:transparent;color:var(--mist);font:600 11.5px var(--sans);cursor:pointer;transition:background .15s,color .15s}
.dmodes button:hover{color:var(--snow);background:rgba(255,255,255,.06)}
.dmodes button[aria-pressed="true"]{background:var(--sand);color:var(--night)}
.dsep{width:1px;height:40px;background:rgba(255,255,255,.14)}
.dplay{width:56px;height:56px;flex:none;border-radius:50%;border:0;background:var(--gold);color:var(--night);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.dplay:hover{background:var(--sand)}
.dplay svg{margin-left:2px}
.dplay[aria-pressed="true"] svg{margin-left:0}
/* Zoom de Leaflet: abajo a la derecha, como el resto de controles flotantes */
.routepane .leaflet-top.leaflet-left{top:auto;left:auto;right:18px;bottom:112px}
.routepane .leaflet-control-zoom{border:1px solid rgba(255,255,255,.14)!important;border-radius:14px!important;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.3)!important;margin:0!important}
.routepane .leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important;background:rgba(11,22,32,.86)!important;color:var(--snow)!important;border-color:rgba(255,255,255,.12)!important}
/* Debajo del mapa: leyenda, línea de tiempo y perfil */
.rbot{padding:14px 14px 4px}
.rbot-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rbot-h .legend{margin:0}
#rScrub{margin-top:12px}
.rbot .chart{margin-top:12px}
/* Añadir GPX: recuadro destacado en Ruta, píldora en la cabecera y en la tarjeta de recorrido */
.gpxdrop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:clamp(34px,6vw,60px) 22px;border:1.5px dashed rgba(var(--acc-rgb),.55);border-radius:16px;background:radial-gradient(ellipse at 50% 0%,rgba(var(--acc-rgb),.13),rgba(var(--acc-rgb),.03) 70%);transition:border-color .2s,background .2s}
.gd-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(var(--acc-rgb),.16);color:var(--gold)}
.gd-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gpxdrop h4{margin:6px 0 0;font:400 clamp(22px,2.6vw,28px)/1.2 var(--serif);color:var(--snow)}
.gpxdrop p{margin:0;max-width:46ch;font-size:14.5px;line-height:1.5;color:var(--lichen)}
.gpxdrop .btn{display:inline-flex;align-items:center;gap:9px;margin:10px 0 0;cursor:pointer}
.gpxdrop .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gpxdrop small{font-size:12.5px;color:var(--lichen)}
.gpxdrop.off{border-style:solid;border-color:var(--hair);background:none}
.gpxdrop.off .btn,.gpxdrop.off small{display:none}
.gpxdrop.off .gd-ic{background:rgba(255,255,255,.05);color:var(--lichen)}
#ruta.drop .gpxdrop:not(.off){border-color:var(--gold);background:rgba(var(--acc-rgb),.17)}
.gpxmini{display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 14px 7px 11px;border-radius:999px;border:1px solid rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.1);color:var(--gold);font:600 13px var(--sans);letter-spacing:0;text-transform:none;cursor:pointer;transition:background .2s}
.gpxmini:hover{background:rgba(var(--acc-rgb),.2)}
.gpxmini svg,.gpxpill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.gpxpill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:8px 15px 8px 12px;border-radius:999px;border:1px solid rgba(var(--acc-rgb),.55);background:linear-gradient(rgba(var(--acc-rgb),.17),rgba(var(--acc-rgb),.17)),#132230;color:var(--gold);font:600 13.5px var(--sans);cursor:pointer;transition:background .2s}
.gpxpill:hover{background:linear-gradient(rgba(var(--acc-rgb),.28),rgba(var(--acc-rgb),.28)),#132230}
.gpxpill:focus-visible,.gpxmini:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:900px){.dmodes button{width:60px;font-size:11px}}
@media(max-width:760px){
  .routepane .map{height:440px}
  .ftitle{left:10px;top:10px;max-width:calc(100% - 20px);padding-right:14px}
  .fright{top:66px;right:10px}
  .hud{left:10px;right:66px;top:430px;bottom:auto;translate:0 -100%;width:auto;padding:10px 12px;border-radius:14px}
  .hud-t{font-size:17px}
  .hud-v{flex-direction:row;gap:14px;margin-top:6px}
  .hud-v b{font-size:22px}
  .hud-p{margin-top:8px}
  .hud-p i{font-size:11px;padding:3px 8px}
  .hud-w{display:none}
  .dock{position:static;transform:none;margin:10px 0 0;max-width:none;flex-wrap:wrap;justify-content:center;border-radius:20px}
  .dmodes{width:100%;justify-content:space-between}
  .dmodes button{flex:1;width:auto}
  .dsep{display:none}
  .routepane .leaflet-top.leaflet-left{bottom:16px;top:auto;right:10px}
}


/* ---------- Cumio: tipografía común con la landing (Fraunces + Inter) ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.02em}
.logo svg{width:30px;height:30px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hx h1,.ph h1{font-weight:300;letter-spacing:-.025em;font-size:clamp(42px,6.4vw,80px);line-height:1.02}
.ph h1{font-size:clamp(40px,5.4vw,66px)}
.hx h1 em,.ph h1 em,.wrap h2 em,.dlg h2 em{font-weight:300}
.wrap h2{font-weight:300;letter-spacing:-.015em}
.kick.brand{display:none}
@media (max-width:700px){.logo{font-size:26px}.logo svg{width:26px;height:26px}}

/* Dos bastones */
#duoPane .tq>.rl{white-space:normal}
#duoPane .duo-co>.hd{padding-top:16px}
#duoPane .duo-co>.hd:first-child,#duoPane .duo-co>.hd:nth-child(2){padding-top:0}
#duoPane .duo-w{font:500 14px Inter,sans-serif;align-self:center}
#duoPane .duo-d{font:500 13.5px Inter,sans-serif;color:var(--lichen);align-self:center;white-space:normal}

/* ---------- Ajustes de lectura ---------- */
/* Fecha de la sesión en la portada: un poco más grande */
.hx .kick:not(.brand){font-size:13.5px}
/* Subtítulos de tarjetas y paneles: algo más grandes y claros que el texto corriente */
.pane h3,.sum>h3,#accTitle,.lab{font-size:15px;color:#c9d5d8}
.fig .k{font-size:14.5px}
/* Métricas centradas en sus tarjetas (los subtítulos siguen a la izquierda) */
.bento .use{justify-content:center}
.stat b.num{margin-top:auto;text-align:center}
.stat .n{margin-bottom:auto;text-align:center}
@media(max-width:480px){.bento .use{align-items:center}.use>div:not(.ring){text-align:center}}
/* Pie del diálogo de conexión: sin punto rojo cuando no hay conexión */
.sline .dot:not(.ok):not(.wait){display:none}
/* Umbral de pendiente a la vista */
/* GPX y terreno: botones y pendiente en una fila (bajan a otra si no caben) */
.rgpx{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;margin-top:6px}
.rgpx-b{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rth{display:flex;align-items:center;gap:12px}
.rth label{margin:0}
.rth input{width:90px}
/* Sin sesiones */
.nosess{text-align:center;padding:clamp(36px,6vw,64px) clamp(20px,4vw,48px);border:1px solid rgba(255,255,255,.11);border-radius:22px;background:linear-gradient(150deg,rgba(14,30,44,.86),rgba(9,20,30,.80));display:flex;flex-direction:column;align-items:center;gap:14px}
.nosess h2{margin:0;font:400 clamp(28px,3.6vw,40px)/1.15 var(--serif);color:var(--snow);text-transform:none;letter-spacing:0}
.nosess p{margin:0;color:var(--lichen);font-size:15px;max-width:44ch;line-height:1.55}
.nosess .row{justify-content:center;margin-top:8px}
.stat .n{min-height:2.9em}

/* ---------- Dos bastones en la sesión ---------- */
.duoview{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.duoview .dv-k{font-size:13px;color:var(--lichen)}
.duoview .seg button{padding:9px 16px}
#histNote{flex-wrap:wrap}
#histNote i.sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:-1px}
.fat-side{display:flex;align-items:center;gap:8px;margin:18px 0 10px;font:500 14px var(--sans);color:var(--snow)}
.fat-side:first-child{margin-top:4px}
.fat-side i{width:10px;height:10px;border-radius:2px}

/* ---------- Sesiones del Cumio para elegir ---------- */
.dl-list{width:100%;max-height:260px;overflow:auto;margin:4px 0 12px;border:1px solid var(--hair);border-radius:14px;padding:6px 4px}
.dl-h{display:flex;justify-content:space-between;align-items:center;padding:6px 12px 8px;font-size:13px;color:var(--lichen)}
.dl-it{display:flex;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;cursor:pointer;text-transform:none;letter-spacing:0;margin:0}
.dl-it:hover{background:rgba(255,255,255,.04)}
.dl-it input,.dl-drop input{width:18px;height:18px;accent-color:var(--gold);flex:none;margin:0}
.dl-it b{display:block;font:500 14px var(--sans);color:var(--snow)}
.dl-it small{font-size:12.5px;color:var(--lichen)}
.dl-drop{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--lichen);margin:0 0 14px;text-transform:none;letter-spacing:0;cursor:pointer}

/* ---------- Panel «Dos bastones» ---------- */
#duoSub:empty,#duoLead:empty{display:none}
.duo-tech{margin:6px 0 26px}
.duo-tech-h{display:flex;justify-content:space-between;align-items:baseline;font:500 16px var(--sans);color:var(--snow);margin-bottom:12px}
.duo-tech-h .muted{font-size:13px}
.duo-bar{display:flex;height:26px;border-radius:13px;overflow:hidden;background:rgba(255,255,255,.06);gap:2px}
.duo-bar i{display:block;height:100%}
/* Cifras de técnica: como los totales del resto de la web (sin cajas), con una marca de su color */
.duo-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px clamp(16px,3vw,36px);margin-top:20px}
.duo-tile{display:flex;flex-direction:column}
.duo-tile>i{display:block;width:28px;height:4px;border-radius:2px;background:var(--c);margin-bottom:12px}
.duo-tile b{font:600 clamp(34px,4vw,48px)/.9 var(--num);color:var(--snow);font-variant-numeric:tabular-nums}
.duo-tile b small{font-size:.45em;color:var(--lichen);font-weight:500}
.duo-tile span{font-size:13px;color:var(--snow);margin-top:9px}
.duo-tile>small{font-size:12px;color:var(--lichen);margin-top:3px}
.duo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:800px){.duo-grid{grid-template-columns:1fr}}
.duo-col{display:flex;flex-direction:column;gap:18px}
.duo-card{border:1px solid var(--hair);border-radius:16px;padding:16px 18px;background:rgba(255,255,255,.02)}
.duo-card-h{display:flex;justify-content:space-between;align-items:baseline;font:500 15px var(--sans);color:var(--snow);margin-bottom:6px}
.duo-card-h small{font-size:12.5px;color:var(--lichen)}
.duo-q{margin:0 0 14px;font-size:13px;color:var(--lichen);line-height:1.5}
.duo-split{position:relative;display:flex;height:18px;border-radius:9px;overflow:hidden;gap:2px}
.duo-split i{display:block;height:100%}
.duo-split .mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:rgba(242,240,234,.6)}
.duo-split-k{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12.5px;color:var(--lichen)}
.duo-split-k span:last-child{text-align:right}
.duo-split-k b{display:block;font:600 22px var(--num);color:var(--snow)}
.duo-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.duo-big b{font:600 40px/1 var(--num);color:var(--snow)}
.duo-big>small{font-size:14px;color:var(--lichen)}
.duo-big span{flex-basis:100%;font-size:13px;color:var(--lichen);margin-top:4px}
.duo-gauge{position:relative;height:8px;margin-top:16px}
.duo-gauge .tr{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,rgba(155,214,174,.55),rgba(var(--acc-rgb),.45),rgba(240,138,118,.5))}
.duo-gauge .mk{position:absolute;top:-5px;width:4px;height:18px;margin-left:-2px;border-radius:2px;background:var(--snow);box-shadow:0 0 0 2px rgba(10,24,34,.9)}
.duo-gauge-k{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--lichen)}
.duo-cmp{padding:12px 0;border-top:1px solid var(--hair)}
.duo-cmp:first-of-type{border-top:0;padding-top:4px}
.duo-cmp-h{display:flex;justify-content:space-between;font-size:13.5px;color:var(--snow);margin-bottom:8px}
.duo-cmp-h .d{color:var(--lichen);font-size:12.5px}
.duo-cmp-r{display:grid;grid-template-columns:16px minmax(0,1fr) 84px;gap:10px;align-items:center;margin-top:5px}
.duo-cmp-r .k{font:600 12px var(--sans);color:var(--lichen)}
.duo-cmp-r .duo-tr{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.duo-cmp-r .duo-tr i{display:block;height:100%;border-radius:5px}
.duo-cmp-r .v{font:600 14px var(--num);color:var(--snow);text-align:right;font-variant-numeric:tabular-nums}
.duoview .linkbtn{margin-left:auto}


/* Cabecera de la ruta: etiqueta, «Crear tarjeta» y «Añadir GPX» en fila cuando caben */
.sum-head .side{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}

/* ================= Progreso ================= */
#progreso>.busy:empty{display:none}
.pg-sec{margin-top:clamp(44px,6vw,72px)}
#pgRecW{margin-top:0}
.pg-two{grid-template-columns:1fr 1fr}
@media(max-width:860px){.pg-two{grid-template-columns:1fr}}
.pg-kick{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.pg-need{margin:6px 0 0;padding:16px 18px;border:1px dashed rgba(242,240,234,.18);border-radius:14px;color:var(--lichen);font-size:13.5px;line-height:1.55}

/* Bloqueo: anillo de avance, qué se desbloquea */
.pg-lock{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 40px;align-items:center;padding:clamp(24px,4vw,44px);border-radius:22px;border:1px solid rgba(255,255,255,.11);
  background:radial-gradient(120% 140% at 0% 0%,rgba(var(--acc-rgb),.16),transparent 55%),linear-gradient(150deg,rgba(14,30,44,.9),rgba(9,20,30,.84));box-shadow:0 18px 50px rgba(8,14,30,.28);margin-bottom:clamp(40px,6vw,64px)}
.pg-ring{position:relative;width:clamp(150px,18vw,190px);aspect-ratio:1}
.pg-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pg-ring circle{fill:none;stroke-width:7}
.pg-ring .bg{stroke:rgba(255,255,255,.08)}
.pg-ring .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dasharray .8s ease}
.pg-ring b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 clamp(52px,6vw,68px)/1 var(--num);color:var(--snow)}
.pg-ring b small{font:500 13px var(--sans);color:var(--lichen);margin-top:6px}
.pg-lock-tx h3{margin:10px 0 12px;font:300 clamp(28px,3.4vw,40px)/1.1 var(--serif);letter-spacing:-.01em;color:var(--snow);text-transform:none}
.pg-lock-tx p{margin:0;color:var(--mist);max-width:52ch;line-height:1.6}
.pg-dots{display:flex;gap:8px;margin-top:18px}
.pg-dots i{width:34px;height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.pg-dots i.on{background:var(--gold)}
.pg-soon{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:900px){.pg-soon{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pg-lock{grid-template-columns:1fr;justify-items:center;text-align:center}.pg-dots{justify-content:center}.pg-lock-tx p{margin:0 auto}.pg-soon{text-align:left}}
@media(max-width:420px){.pg-soon{grid-template-columns:1fr}}
.pg-soon-it{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);opacity:.82}
.pg-soon-it svg{flex:none;width:34px;height:34px;padding:7px;border-radius:10px;background:rgba(var(--acc-rgb),.12);fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pg-soon-it b{display:block;font:500 14px var(--sans);color:var(--snow)}
.pg-soon-it small{display:block;font-size:12.5px;color:var(--lichen);margin-top:2px;line-height:1.45}

/* Récords */
.pg-recs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.pg-recs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.pg-recs{grid-template-columns:1fr 1fr}}
.pg-rec{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:18px 18px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(150deg,rgba(14,30,44,.86),rgba(9,20,30,.80));color:var(--snow);font:inherit;cursor:pointer;transition:transform .15s,border-color .15s}
button.pg-rec:hover{transform:translateY(-2px);border-color:rgba(var(--acc-rgb),.5)}
.pg-rec.off{opacity:.55;cursor:default}
.pg-rec-k{font-size:13px;color:var(--lichen);line-height:1.35;min-height:2.7em}
.pg-rec b{font:600 clamp(34px,3.6vw,46px)/.95 var(--num);font-variant-numeric:tabular-nums}
.pg-rec b small{font-size:.42em;color:var(--lichen);font-weight:500}
.pg-rec.lead b{color:var(--gold)}
.pg-rec-d{font-size:12px;color:var(--lichen)}

/* Desnivel con y sin bastones */
.pg-split-n{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pg-split-n b{font:600 clamp(48px,6vw,72px)/.9 var(--num);color:var(--gold)}
.pg-split-n b small{font-size:.4em;color:var(--lichen)}
.pg-split-n span{font-size:15px;color:var(--snow)}
.pg-split-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:rgba(242,240,234,.14);margin:18px 0 12px}
.pg-split-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.pg-split-k{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--snow)}
.pg-split-k i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:-1px}

/* Umbral de pendiente */
.pg-thr{display:grid;grid-template-columns:1fr 1fr auto;gap:14px 40px;margin:4px 0 18px}
@media(max-width:620px){.pg-thr{grid-template-columns:1fr 1fr}}
.pg-thr-it b{display:block;font:600 clamp(48px,6vw,72px)/.95 var(--num);color:var(--snow);margin:6px 0 4px;font-variant-numeric:tabular-nums}
.pg-thr-it:first-child b{color:var(--gold)}
.pg-thr-it small{display:block;font-size:12.5px;color:var(--lichen);max-width:30ch;line-height:1.45}

/* Cifra grande de cada tendencia */
.pg-big{margin-bottom:10px}
.pg-big-n{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pg-big-n b{font:600 clamp(40px,4.6vw,56px)/.95 var(--num);color:var(--snow);font-variant-numeric:tabular-nums}
.pg-big-n b small{font-size:.42em;color:var(--lichen);font-weight:500}
.pg-big-n span{font-size:13px;color:var(--lichen)}
.pg-verd{margin:8px 0 0;font-size:13.5px;color:var(--mist)}
.pg-verd.good{color:#9bd6ae}
.pg-verd.bad{color:var(--coral)}
.pg-lock2{display:flex;gap:22px;align-items:center;padding:22px 24px;border-radius:18px;border:1px dashed rgba(242,240,234,.22);background:linear-gradient(150deg,rgba(14,30,44,.86),rgba(9,20,30,.80))}
.pg-lock2 .pg-dots{margin:0;flex:none}
.pg-lock2 b{display:block;font:500 16px var(--sans);color:var(--snow)}
.pg-lock2 p{margin:6px 0 0;color:var(--lichen);font-size:13.5px;line-height:1.55;max-width:70ch}
@media(max-width:620px){.pg-lock2{flex-direction:column;align-items:flex-start}}

/* ================= Copia de seguridad (Historial) ================= */
.backup{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 26px;align-items:center;padding:clamp(20px,3vw,30px);border-radius:22px;border:1px solid rgba(var(--acc-rgb),.35);
  background:radial-gradient(90% 160% at 100% 0%,rgba(var(--acc-rgb),.14),transparent 60%),linear-gradient(150deg,rgba(14,30,44,.9),rgba(9,20,30,.84));box-shadow:0 18px 50px rgba(8,14,30,.28)}
.bk-ic svg{width:52px;height:52px;padding:13px;border-radius:16px;background:rgba(var(--acc-rgb),.16);fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bk-tx h3{margin:0 0 6px;font:400 clamp(22px,2.4vw,28px)/1.15 var(--serif);color:var(--snow);text-transform:none;letter-spacing:0}
.bk-tx p{margin:0;color:var(--mist);font-size:14px;line-height:1.55;max-width:62ch}
.bk-tx .bk-st{margin-top:8px;font-size:13px;color:var(--lichen)}
.backup.warn .bk-st{color:var(--sand);font-weight:500}
.bk-act{display:flex;flex-direction:column;gap:10px;align-items:stretch}
@media(max-width:860px){.backup{grid-template-columns:auto minmax(0,1fr)}.bk-act{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}}
@media(max-width:520px){.backup{grid-template-columns:1fr}.bk-act{flex-direction:column}}
.bk-act .btn{justify-content:center;text-align:center}

/* Técnica a lo largo de la sesión (dos bastones) y botones de conexión */
.duo-tl{margin-top:22px}
.duo-tl-h{font-size:13px;color:var(--lichen);margin-bottom:4px}
.duo-tl .axis{margin-top:2px}
.dl-more{display:flex;justify-content:center;gap:22px;margin-top:16px}
.dl-more .linkbtn{font-size:13px}

/* Qué Cumio es cada bastón, y porcentajes de marcha en la leyenda */
.duo-who{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;color:var(--lichen)}
.duo-who i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:-1px}
#tgLegend .lg-v{font:600 15px var(--num);color:var(--snow);margin-left:6px}
#tgLegend .lg-t{font-size:11.5px;color:var(--lichen);margin-left:5px}