/* Tablero de Ruta · jerometrinquier.com · 04-nov-2026 ECT
   Layout: rail + paneles de vidrio achaflanados (mapa | velocímetro / clima-brújula-viaje | radar / música); en vertical se apila */
:root{
  --night:#04090c; --glass:#0a1a20; --glass-2:#0d222a; --line:rgba(94,231,245,.34);
  --cyan:#5ee7f5; --ink:#e6f6f8; --mute:#8fb3b9; --amber:#f5b83d; --danger:#ff4d5e; --ok:#5ef5a6;
  --f-num:"Chakra Petch","Saira",ui-monospace,monospace;
  --f-ui:"Saira",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--night);color:var(--ink);font-family:var(--f-ui);overflow:hidden;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
.screen{height:100vh;height:100dvh;display:grid;grid-template-columns:64px 1fr;gap:10px;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  background:radial-gradient(120% 120% at 30% 0%,#0c2128 0%,#061015 55%,#04090c 100%)}
.rail{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 0;border-radius:36px;background:linear-gradient(180deg,rgba(94,231,245,.08),rgba(94,231,245,.02));border:1px solid var(--line)}
.rail button{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.rail button svg{width:23px;height:23px}
.rail button.on{background:radial-gradient(circle,rgba(94,231,245,.3),rgba(94,231,245,.08));color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 18px rgba(94,231,245,.45)}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.main{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:minmax(0,1fr) auto auto;gap:10px;min-width:0;min-height:0;position:relative}
.pnl{--c:14px;position:relative;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));background:var(--line);min-width:0}
.pnl::before{content:"";position:absolute;inset:1px;background:linear-gradient(160deg,var(--glass-2),var(--glass));clip-path:inherit}
.pnl>*{position:relative}
/* mapa */
.map{grid-column:1;grid-row:1;min-height:0;overflow:hidden}
#map{position:absolute;inset:1px;clip-path:inherit}
.map .shade{position:absolute;inset:1px;pointer-events:none;background:linear-gradient(180deg,rgba(6,16,21,.85) 0%,rgba(6,16,21,0) 28%)}
.maplibregl-ctrl-attrib{background:rgba(5,15,19,.6)!important;color:var(--mute)!important;font-size:9px}
.maplibregl-ctrl-attrib a{color:var(--mute)!important}
.turn{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 12px;border-radius:12px;background:rgba(14,40,46,.88);border:1px solid var(--line);max-width:calc(100% - 120px)}
.turn svg{width:34px;height:34px;flex:none}
.turn b{font:600 clamp(18px,2.6vw,28px)/1 var(--f-num);font-variant-numeric:tabular-nums}
.turn small{display:block;font-size:12px;color:var(--mute);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.turn>div{min-width:0}
.clock{position:absolute;top:14px;right:16px;text-align:right;font:600 15px/1.2 var(--f-num);font-variant-numeric:tabular-nums;pointer-events:none}
.clock span{display:block;font:500 11px var(--f-ui);color:var(--mute)}
.eta{position:absolute;top:56px;right:16px;text-align:right;font:600 13px/1.3 var(--f-num);color:var(--cyan);pointer-events:none}
.chip{position:absolute;bottom:22px;left:12px;font:600 10px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--amber);background:rgba(5,15,19,.75)}
.chip.ok{color:var(--ok);border-color:rgba(94,245,166,.5)} .chip.demo{color:var(--cyan)}
.recenter{position:absolute;bottom:22px;right:12px;border:1px solid var(--cyan);background:rgba(5,15,19,.85);color:var(--cyan);font:600 12px var(--f-ui);padding:8px 14px;border-radius:999px;cursor:pointer}
.car{width:44px;height:44px;filter:drop-shadow(0 0 10px rgba(94,231,245,.9))}
.dst{width:18px;height:18px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(94,231,245,.25),0 0 18px var(--cyan)}
/* velocímetro */
.gauge{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:0;padding:10px}
.dial{position:relative;width:min(100%,290px,42vh);aspect-ratio:1}
.dial svg{width:100%;height:100%;overflow:visible}
.dial .num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dial .num b{font:700 clamp(40px,min(6.4vw,11vh),84px)/1 var(--f-num);font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(94,231,245,.35)}
.dial .num span{font:600 14px var(--f-num);letter-spacing:.08em;margin-top:4px}
.dial.over .num b{color:var(--danger);text-shadow:0 0 24px rgba(255,77,94,.5)}
.sign{position:absolute;top:0;right:-4%}
.sign.metric{width:56px;height:56px;border-radius:50%;background:#fff;border:7px solid #d71f2b;display:grid;place-items:center;color:#111;font:700 20px var(--f-num)}
.sign.imperial{width:50px;padding:4px 0 5px;background:#fff;border:2px solid #111;outline:2px solid #fff;border-radius:5px;color:#111;text-align:center;font:700 8px/1.05 var(--f-ui)}
.sign.imperial b{display:block;font:700 21px/1 var(--f-num);margin-top:2px}
.sign i{position:absolute;bottom:-16px;left:0;right:0;text-align:center;font:500 10px var(--f-ui);font-style:normal;color:var(--mute)}
.gstats{display:flex;gap:16px;font:500 12px var(--f-ui);color:var(--mute)}
.gstats b{color:var(--ink);font:600 14px var(--f-num);margin-left:4px;font-variant-numeric:tabular-nums}
/* info */
.info{grid-column:1;grid-row:2;display:grid;grid-template-columns:1.25fr auto 1fr;align-items:center;padding:8px 10px;min-height:66px}
.info>*{display:flex;align-items:center;gap:10px;padding:0 10px;min-width:0}
.info>*+*{border-left:1px solid var(--line)}
.info button{all:unset;position:relative;cursor:pointer;display:flex;align-items:center;gap:10px;min-width:0;padding:0 10px}
.info button+*,.info *+button{border-left:1px solid var(--line)}
.wx svg{width:44px;height:40px;flex:none}
.big{font:600 clamp(17px,2.2vw,25px)/1 var(--f-num);font-variant-numeric:tabular-nums}
.lbl{font:600 10px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.sub{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compass{width:52px;height:52px;flex:none}
/* radar */
.radar{grid-column:2;grid-row:3;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 12px;text-align:center}
.radar svg{width:24px;height:24px;color:var(--amber);flex:none}
.radar b{font:600 clamp(14px,1.8vw,19px) var(--f-num);color:var(--amber);font-variant-numeric:tabular-nums}
.radar.near{animation:pulse 1s ease-in-out infinite}
.radar.none svg,.radar.none b{color:var(--mute)}
.radar.none b{font-size:13px}
@keyframes pulse{50%{filter:drop-shadow(0 0 10px rgba(245,184,61,.8)) brightness(1.3)}}
/* música */
.np{grid-column:1;grid-row:3;display:flex;align-items:center;gap:12px;padding:6px 14px 6px 10px;min-height:52px}
.art{width:50px;height:40px;border-radius:6px;flex:none;background:linear-gradient(180deg,#0b2b4a,#58c7f0 60%,#e8fbff 64%,#1d5c7a 70%,#06121c);box-shadow:0 0 14px rgba(94,231,245,.3)}
.np .t{min-width:0;flex:1}
.np .t b{display:block;font:500 15px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np .bar{height:3px;background:rgba(94,231,245,.15);border-radius:2px;margin-top:5px;overflow:hidden}
.np .bar i{display:block;height:100%;width:0;background:var(--cyan)}
.np .ctl{display:flex;gap:4px}
.np .ctl button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.np .ctl button svg{width:17px;height:17px}
.np .state{font:600 10px var(--f-ui);letter-spacing:.14em;color:var(--cyan);white-space:nowrap}
/* hojas */
.sheet{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:rgba(5,14,18,.96);border:1px solid var(--line);border-radius:20px;padding:16px 18px;overflow:auto}
.sheet h2{margin:0 0 12px;font:600 17px var(--f-num);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet h2 button,.btn{font:500 13px var(--f-ui);text-transform:none;letter-spacing:0;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.list{display:grid;gap:8px}
.item{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;border:1px solid rgba(94,231,245,.18);background:rgba(94,231,245,.04);cursor:pointer}
.item:hover,.item.on{border-color:var(--cyan);background:rgba(94,231,245,.1)}
.item b{font:500 15px var(--f-ui);min-width:0;overflow:hidden;text-overflow:ellipsis} .item span{font:500 12px var(--f-num);color:var(--mute);white-space:nowrap}
.search{display:flex;gap:8px;margin-bottom:12px}
.search input{flex:1;min-width:0;font:500 16px var(--f-ui);color:var(--ink);background:rgba(94,231,245,.05);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.search input:focus{outline:2px solid var(--cyan)}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 14px}
.seg button{font:500 13px var(--f-ui);padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.seg button.on{background:var(--cyan);color:#03171b;border-color:var(--cyan)}
.note{font-size:12px;color:var(--mute);line-height:1.5;margin:6px 0 0}
.fc{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px}
.fc div{padding:10px 12px;border-radius:12px;border:1px solid rgba(94,231,245,.18)}
.fc b{display:block;font:600 17px var(--f-num)} .fc small{color:var(--mute);font-size:12px}
.pad{display:grid;grid-template-columns:repeat(3,62px);gap:10px;justify-content:center}
.pad button{height:54px;border-radius:50%;border:1px solid var(--line);background:rgba(94,231,245,.05);color:var(--ink);font:600 21px var(--f-num);cursor:pointer}
.dialout{text-align:center;font:600 26px var(--f-num);min-height:34px;letter-spacing:.05em;user-select:all;margin-bottom:8px}
.toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:9;background:#0f2a31;border:1px solid var(--cyan);color:var(--ink);padding:10px 16px;border-radius:12px;font-size:13px;max-width:86%;text-align:center}
.start{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(4,9,12,.92);padding:24px}
.start div{max-width:420px;text-align:center;display:grid;gap:14px;justify-items:center}
.start h1{margin:0;font:700 26px var(--f-num);letter-spacing:.04em;color:var(--cyan)}
.start p{margin:0;color:var(--mute);line-height:1.5;font-size:14px}
.start .go{font:600 16px var(--f-ui);background:var(--cyan);color:#03171b;border:0;border-radius:999px;padding:14px 28px;cursor:pointer;box-shadow:0 0 24px rgba(94,231,245,.5)}
/* vertical */
@media (max-aspect-ratio:1/1){
  .screen{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .rail{flex-direction:row;order:2;border-radius:30px;padding:4px 8px}
  .main{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto auto auto}
  .map{grid-column:1 / -1;grid-row:1}
  .gauge{grid-column:1;grid-row:2;padding:12px 6px}
  .dial{width:min(40vw,200px)}
  .dial .num b{font-size:clamp(34px,11vw,56px)}
  .info{grid-column:2;grid-row:2;grid-template-columns:1fr;row-gap:10px;padding:12px 4px}
  .info>*+*,.info button+*,.info *+button{border-left:0}
  .radar{grid-column:1 / -1;grid-row:3}
  .np{grid-column:1 / -1;grid-row:4}
  .np .state{display:none}
  .sign{right:-12%;transform:scale(.85)}
}
@media (prefers-reduced-motion:reduce){.radar.near{animation:none}}