:root{
  --abyss:#05071A; --ink:#F3F1FF; --haze:#9097BE; --amber:#FFC46B; --ice:#A6E8FF; --ember:#FF7A6B;
  --tint:rgba(150,170,255,.10); --tint-strong:rgba(14,18,44,.56); --hair:rgba(220,228,255,.16);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --dock-b:calc(12px + var(--safe-b)); --dock-h:62px; --above-dock:calc(var(--dock-b) + var(--dock-h) + 10px);
  --lx:50%; --ly:0%; --la:0deg;
  --spring:cubic-bezier(.2,1.3,.3,1); --spring-d:480ms;
  --font:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--abyss);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.45;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:12px}
.hidden{display:none!important}

/* ================= CRISTAL ================= */
.glass{position:relative;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 55%,rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(var(--frost,10px)) saturate(1.2);backdrop-filter:blur(var(--frost,10px)) saturate(1.2);
  box-shadow:0 14px 34px -10px rgba(0,0,10,.55),inset 0 0 0 .5px rgba(255,255,255,.22),inset 0 1px 1px rgba(255,255,255,.18)}
/* borde que capta la luz: el pico sigue a --la, que cambia al inclinar el móvil */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:2;
  background:conic-gradient(from calc(var(--la) - 70deg),rgba(255,255,255,.05),rgba(255,255,255,.9) 70deg,rgba(255,255,255,.05) 140deg,
    rgba(255,255,255,.03) 180deg,rgba(255,255,255,.4) 250deg,rgba(255,255,255,.04) 320deg,rgba(255,255,255,.05));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* brillo especular difuso */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at var(--lx) var(--ly),rgba(255,255,255,.16),transparent 45%);mix-blend-mode:screen}
.glass > *{position:relative;z-index:3}

/* ================= PORTADA ================= */
#intro{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(24px + var(--safe-t)) 28px calc(36px + var(--safe-b));background:var(--abyss)}
#introSky{position:absolute;inset:0;width:100%;height:100%}
.intro-inner{position:relative;max-width:420px;width:100%;margin:0 auto}
.wordmark{font-weight:800;font-variation-settings:"wdth" 75,"opsz" 96;letter-spacing:-.01em;line-height:.9;margin:0;
  background:linear-gradient(180deg,#fff 30%,#FFE2AE 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#intro .wordmark{font-size:clamp(56px,16vw,96px)}
.lede{font-size:19px;line-height:1.35;color:#D9DBF2;margin:14px 0 30px;max-width:22ch;font-variation-settings:"wdth" 92}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:64px;border-radius:32px;
  font-size:19px;font-weight:700;--frost:1.5px;color:#fff;background:linear-gradient(160deg,rgba(255,214,150,.28),rgba(255,196,107,.10))}
.cta svg{width:22px;height:22px}
.cta:active{transform:scale(.97)}
.link{display:block;margin:14px auto 0;color:var(--haze);font-size:15px;padding:8px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(144,151,190,.5)}
.fine{margin:22px 0 0;font-size:12.5px;color:#6F769C;line-height:1.5;max-width:40ch}

/* ================= ESCENA ================= */
#stage{position:fixed;inset:0}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#sky{position:absolute;inset:0;width:100%;height:100%}

#top{position:fixed;left:0;right:0;top:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;
  padding:calc(10px + var(--safe-t)) 14px 0;pointer-events:none}
#top .wordmark{font-size:26px;margin-top:6px;text-shadow:none}
.pill{border-radius:20px;padding:7px 14px;text-align:center;--frost:6px;pointer-events:auto;min-width:84px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pill b{display:block;font-size:17px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.pill span{display:block;font-size:11.5px;color:var(--haze);line-height:1.3}
body.tt .pill{background:linear-gradient(160deg,rgba(255,196,107,.30),rgba(255,196,107,.08))}
body.tt .pill b{color:var(--amber)}

#tape{position:fixed;top:calc(64px + var(--safe-t));left:50%;width:min(230px,58vw);height:34px;margin-left:calc(min(230px,58vw)/-2);
  border-radius:17px;z-index:5;--frost:4px;pointer-events:none;overflow:hidden}
#tapeCv{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
#tape .caret{position:absolute;left:50%;top:0;width:0;height:0;margin-left:-5px;border:5px solid transparent;border-top:6px solid var(--amber);z-index:4}
body.demo #tape{display:none}

#banner{position:fixed;left:50%;top:calc(108px + var(--safe-t));z-index:8;width:max-content;max-width:min(88vw,420px);
  transform:translate(-50%,-8px);opacity:0;transition:opacity .25s,transform .45s var(--spring);pointer-events:none;
  border-radius:18px;padding:10px 15px;font-size:14px;line-height:1.4;text-align:center;--frost:14px;background-color:var(--tint-strong)}
#banner.show{opacity:1;transform:translate(-50%,0)}
body.demo #banner{top:calc(64px + var(--safe-t))}

/* ---------- La lente ---------- */
#lens{position:fixed;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;z-index:4;pointer-events:none;
  --frost:0px;background:radial-gradient(circle,rgba(255,255,255,0) 58%,rgba(255,255,255,.06));
  transition:transform var(--spring-d) var(--spring);--lock:var(--amber)}
#lens.locked{transform:scale(1.2)}
html:not(.real-glass) #lens{-webkit-backdrop-filter:none;backdrop-filter:none;background:radial-gradient(circle,rgba(255,255,255,0) 62%,rgba(255,255,255,.1))}
#lens .ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);transform:rotate(-90deg);z-index:4;overflow:visible}
#lens .ring circle{fill:none;stroke:var(--lock);stroke-width:4;stroke-linecap:round;stroke-dasharray:333;stroke-dashoffset:333;
  transition:stroke-dashoffset .55s cubic-bezier(.3,.7,.2,1),stroke .3s;filter:drop-shadow(0 0 6px var(--lock))}
#lens.locked .ring circle{stroke-dashoffset:0}
#lens .pip{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:rgba(255,255,255,.9);z-index:4}

/* ---------- Tarjeta del astro ---------- */
#card{position:fixed;left:10px;right:10px;bottom:var(--above-dock);z-index:6;max-width:520px;margin:0 auto;border-radius:28px;
  padding:0;--frost:16px;background-color:var(--tint-strong);
  transform:translateY(24px) scale(.96);opacity:0;pointer-events:none;
  transition:transform var(--spring-d) var(--spring),opacity .2s,bottom var(--spring-d) var(--spring)}
#card.show{transform:none;opacity:1;pointer-events:auto}
body.tt #card{bottom:calc(var(--above-dock) + 112px)}
body.tt #card .fact{display:none}
body.sheet-open #card,body.sheet-open #timebar{opacity:0!important;pointer-events:none!important}
/* píldora de una línea; se despliega hacia arriba con toda la info */
#card .card-body{display:flex;flex-direction:column-reverse}
.card-pill{display:flex;align-items:center;gap:10px;height:56px;padding:0 6px 0 18px;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.card-pill .swatch{width:12px;height:12px;box-shadow:0 0 10px 1px currentColor}
.card-pill .nm{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;overflow:hidden}
#cName{margin:0;font-size:18px;line-height:1.1;font-weight:800;font-variation-settings:"wdth" 80,"opsz" 24;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
#cShort{font-size:13px;color:var(--haze);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 10 auto}
.where{flex:none;font-size:14px;color:var(--haze);white-space:nowrap;font-variant-numeric:tabular-nums}
.where b{color:var(--ink);font-weight:700}
.more-btn{width:44px;height:44px;border-radius:22px;color:var(--amber);flex:none}
.more-btn svg{width:18px;height:18px;transition:transform var(--spring-d) var(--spring)}
#card.open .more-btn svg{transform:rotate(180deg)}
.card-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--spring-d) var(--spring)}
#card.open .card-more{grid-template-rows:1fr}
.more-in{min-height:0;overflow:hidden;padding:0 16px 0 18px;opacity:0;transition:opacity .18s}
#card.open .more-in{opacity:1;transition:opacity .3s .08s}
#cMore #cKind{margin-top:16px}
#card.open .card-pill{box-shadow:inset 0 1px 0 var(--hair)}
#cMore .card-actions{margin:12px 0 6px}
.card-head{display:flex;align-items:center;gap:13px}
.swatch{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:0 0 14px 2px currentColor}
.card-head .nm{flex:1;min-width:0}
#cKind{margin:0;color:var(--haze);font-size:13.5px}
.follow{flex:none;height:36px;padding:0 15px;border-radius:18px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--hair);transition:background .25s,color .25s}
.follow.on{background:var(--amber);color:#2A1A00;box-shadow:none}
.facts{display:flex;gap:22px;margin:14px 0 0;padding:0}
.facts div{min-width:0}
.facts dt{font-size:12px;color:var(--haze)}
.facts dd{margin:0;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fact{margin:10px 0 0;font-size:14px;color:#D4D7EE;line-height:1.45;max-width:60ch}

/* ---------- Barra de tiempo ---------- */
#timebar{position:fixed;left:10px;right:10px;bottom:var(--above-dock);z-index:7;max-width:540px;margin:0 auto;border-radius:26px;
  padding:10px 12px 9px;--frost:14px;background-color:var(--tint-strong);
  transform:translateY(30px) scale(.94);opacity:0;pointer-events:none;transition:transform var(--spring-d) var(--spring),opacity .2s}
body.tt #timebar{transform:none;opacity:1;pointer-events:auto}
.tb-row{display:flex;align-items:center;gap:6px}
.ibtn{width:38px;height:38px;border-radius:19px;display:grid;place-items:center;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--hair)}
.ibtn svg{width:18px;height:18px}
#tbWhen{flex:1;text-align:center;font-weight:700;font-size:16px;color:var(--amber);font-variant-numeric:tabular-nums}
.now{height:38px;padding:0 14px;border-radius:19px;background:var(--amber);color:#2A1A00;font-weight:700;font-size:14px}
.scrub{position:relative;height:34px;margin:6px 4px 0;touch-action:none;cursor:grab}
.scrub-track{position:absolute;left:0;right:0;top:12px;height:10px;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,.6),inset 0 0 0 .5px rgba(255,255,255,.2)}
.bead{position:absolute;top:17px;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,.75) 35%,rgba(255,220,160,.55) 70%,rgba(255,196,107,.5));
  box-shadow:0 4px 12px rgba(0,0,0,.45),inset 0 -2px 4px rgba(160,100,0,.35),0 0 0 1px rgba(255,255,255,.4)}
.ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--haze);margin:0 2px;font-variant-numeric:tabular-nums}

/* ---------- Dock ---------- */
#dock{position:fixed;left:50%;bottom:var(--dock-b);height:var(--dock-h);width:min(430px,calc(100vw - 20px));transform:translateX(-50%);
  z-index:12;border-radius:31px;display:flex;padding:5px;--frost:8px}
#dock button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;white-space:nowrap;font-weight:600;
  color:#DADDF5;border-radius:26px;position:relative;z-index:4;transition:color .25s}
#dock button svg{width:22px;height:22px}
#dock button.on{color:var(--amber)}
#drop{position:absolute;top:5px;left:0;height:calc(100% - 10px);border-radius:26px;z-index:3;opacity:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.5),inset 0 1px 1px rgba(255,255,255,.5),0 6px 16px rgba(0,0,0,.3)}

/* ---------- Hojas ---------- */
#scrim{position:fixed;inset:0;z-index:10;background:rgba(2,3,12,.32);opacity:0;pointer-events:none;transition:opacity .3s}
#scrim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:10px;right:10px;bottom:var(--above-dock);z-index:11;max-width:540px;margin:0 auto;max-height:min(66vh,640px);
  border-radius:32px;--frost:26px;background-color:rgba(12,16,42,.74);display:flex;flex-direction:column;visibility:hidden}
.sheet.open{visibility:visible}
.sheet-body{overflow:auto;touch-action:pan-y;padding:18px 18px 16px;overscroll-behavior:contain;border-radius:inherit}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sheet h3{margin:0;font-size:24px;line-height:1.1;font-weight:800;font-variation-settings:"wdth" 82,"opsz" 40}
.x{width:34px;height:34px;border-radius:17px;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:none}
.x svg{width:16px;height:16px}
.sub{margin:6px 0 14px;color:var(--haze);font-size:14px}
.h4{margin:20px 0 4px;font-size:15px;font-weight:700;color:#E4E6FA}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 2px;border-bottom:1px solid var(--hair);text-align:left}
.row:last-child{border-bottom:0}
.row .dot{width:10px;height:10px;border-radius:50%;flex:none}
.row .lb{flex:1;font-size:16px}
.row .vl{font-size:14px;color:#E1E3F7;text-align:right;line-height:1.35;font-variant-numeric:tabular-nums}
.row .vl small{display:block;color:var(--haze);font-size:12px}
.row .vl.up{color:#9BE8B4}
.row[disabled]{opacity:.45;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.chip{height:36px;padding:0 14px;border-radius:18px;font-size:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--hair);white-space:nowrap}
.chip.on{background:var(--amber);color:#2A1A00;box-shadow:none;font-weight:600}
input.chip{color:var(--ink);color-scheme:dark;font-family:var(--font)}
.month{font-weight:800;font-size:17px;margin:20px 0 2px;color:var(--amber);font-variation-settings:"wdth" 85}
.ev{display:flex;gap:12px;width:100%;padding:12px 0;border-bottom:1px solid var(--hair);text-align:left}
.ev .dt{width:42px;flex:none;text-align:center;padding-top:1px}
.ev .dt b{display:block;font-size:22px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.ev .dt span{font-size:12px;color:var(--haze)}
.ev .bd{flex:1;border-left:3px solid var(--c,var(--ice));padding-left:11px}
.ev .tt{font-size:15.5px;font-weight:600;line-height:1.3}
.ev .sb{font-size:13px;color:var(--haze);margin-top:3px;line-height:1.4}
.ev .hr{font-size:12px;color:#757CA6;margin-top:3px;font-variant-numeric:tabular-nums}
.loading{color:var(--haze);font-size:14px;padding:26px 0;text-align:center}
.set{padding:14px 0;border-bottom:1px solid var(--hair)}
.set:last-of-type{border-bottom:0}
.set label{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:16px}
.set small{display:block;color:var(--haze);font-size:12.5px;margin-top:5px;line-height:1.45}
.status{font-size:12.5px;color:var(--haze);line-height:1.7;margin-top:10px}

/* interruptor líquido */
.sw{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:15px;flex:none;position:relative;cursor:pointer;margin:0;
  background:rgba(255,255,255,.12);box-shadow:inset 0 1px 3px rgba(0,0,0,.5),inset 0 0 0 .5px rgba(255,255,255,.2);transition:background .3s}
.sw::before{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:12px;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform var(--spring-d) var(--spring),width .18s}
.sw:active::before{width:31px}
.sw:checked{background:var(--amber)}
.sw:checked::before{transform:translateX(20px)}
.sw:checked:active::before{transform:translateX(13px)}
input[type=range].rng{width:100%;margin:12px 0 0;appearance:none;-webkit-appearance:none;height:28px;background:none}
.rng::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.rng::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0}

/* entrada: tras abrirse el cielo, la interfaz se asienta una sola vez */
#top,#tape{transition:opacity .5s .15s}
#dock{transition:transform var(--spring-d) var(--spring) .12s,opacity .3s .12s}
#lens{transition:transform var(--spring-d) var(--spring),opacity .4s .25s}
body:not(.live) #top,body:not(.live) #tape{opacity:0}
body:not(.live) #dock{transform:translateX(-50%) translateY(110px);opacity:0}
body:not(.live) #lens{transform:scale(.3);opacity:0}

#night{position:fixed;inset:0;z-index:50;pointer-events:none;background:#ff2a1a;mix-blend-mode:multiply;display:none}
body.night #night{display:block}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ================= v4 ================= */
.card-actions{display:flex;gap:8px;flex:none}
.iact{width:38px;height:38px;border-radius:19px;display:grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--hair);transition:background .25s,color .25s}
.iact svg{width:19px;height:19px}
.iact.on{background:var(--amber);color:#2A1A00;box-shadow:none}
.iact.hidden{display:none}
.vis{display:inline-block;margin-top:6px;font-size:12.5px;padding:3px 9px;border-radius:10px;background:rgba(166,232,255,.12);color:var(--ice)}
.vis.warm{background:rgba(255,196,107,.14);color:var(--amber)}
.vis.off{background:rgba(255,255,255,.07);color:var(--haze)}
.play{width:38px;height:38px;border-radius:19px;display:grid;place-items:center;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--hair)}
.play svg{width:16px;height:16px}
.play.on{background:var(--ice);color:#04202A;box-shadow:none}
.search{width:100%;height:44px;border-radius:22px;border:0;padding:0 16px 0 42px;font:inherit;font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239097BE' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 14px center/18px;
  box-shadow:inset 0 0 0 1px var(--hair);outline:none;margin-bottom:4px}
.search:focus{box-shadow:inset 0 0 0 1.5px var(--amber)}
.search::placeholder{color:#737AA3}
.search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.row .tag{font-size:11.5px;color:var(--haze);display:block}
/* pronóstico */
.score{display:flex;align-items:center;gap:18px;margin:6px 0 4px}
.gauge{width:108px;height:108px;flex:none;position:relative}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:9;stroke-linecap:round}
.gauge .bg{stroke:rgba(255,255,255,.1)}
.gauge .fg{stroke:var(--sc,var(--amber));transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)}
.gauge b{position:absolute;inset:0;display:grid;place-items:center;font-size:36px;font-weight:800;font-variation-settings:"wdth" 80;font-variant-numeric:tabular-nums}
.verdict{font-size:22px;font-weight:800;line-height:1.1;font-variation-settings:"wdth" 82}
.verdict-sub{color:var(--haze);font-size:14px;margin-top:5px;line-height:1.4}
.hours{display:flex;align-items:flex-end;gap:3px;height:92px;margin:14px 0 4px;padding-top:4px}
.hours .h{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.hours .bar{width:100%;border-radius:5px 5px 3px 3px;min-height:3px}
.hours .hl{font-size:10.5px;color:var(--haze);font-variant-numeric:tabular-nums;height:13px}
.hours .moon{width:5px;height:5px;border-radius:50%;background:#ECEEF8;opacity:0}
.hours .moon.up{opacity:.85}
.legend{display:flex;gap:14px;font-size:12px;color:var(--haze);margin:2px 0 6px;flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.factors{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:12px 0 4px}
.factors dt{font-size:12px;color:var(--haze)}
.factors dd{margin:0;font-size:15.5px;font-weight:600}
.nights{display:flex;gap:8px;margin:12px 0 0}
.nights button{flex:1;padding:10px 6px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--hair);text-align:center}
.nights button.on{box-shadow:inset 0 0 0 1.5px var(--amber)}
.nights b{display:block;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.nights span{font-size:12px;color:var(--haze)}
.seg{display:flex;gap:4px;padding:4px;border-radius:16px;background:rgba(255,255,255,.07);margin-top:10px}
.seg button{flex:1;height:34px;border-radius:12px;font-size:14px;color:#D6D9F0}
.seg button.on{background:var(--amber);color:#2A1A00;font-weight:600}
.note{font-size:12.5px;color:#757CA6;margin-top:12px;line-height:1.5}
.credits{font-size:12px;color:#6F769C;line-height:1.6;margin-top:16px}

/* ================= v5 ================= */
/* arriba a la derecha, en este orden: ?, sonido y la hora */
.top-right{display:flex;align-items:center;gap:8px}
#fabs{display:flex;flex-direction:row;gap:8px;pointer-events:auto;transition:opacity .3s}
body:not(.live) #fabs{opacity:0;pointer-events:none}
.fab{width:48px;height:48px;border-radius:24px;display:grid;place-items:center;--frost:8px;color:#fff}
.fab b{font-size:22px;font-weight:800;line-height:1}
.fab svg{width:21px;height:21px}
.fab.on{background:linear-gradient(160deg,rgba(166,232,255,.42),rgba(166,232,255,.14));color:#fff}
body.away .pill{background:linear-gradient(160deg,rgba(166,232,255,.36),rgba(166,232,255,.1))}
body.away .pill span{color:#DFF6FF;font-weight:600}
.now.wide{width:100%;margin:12px 0 4px;height:46px;border-radius:23px;font-size:15px}
.two{display:flex;gap:10px}.two > *{flex:1}
.mapbox{height:300px;border-radius:22px;overflow:hidden;margin:10px 0;background:#0A0E24;box-shadow:inset 0 0 0 1px var(--hair)}
.mapbox.small{height:240px}
.leaflet-container{background:#0A0E24;font-family:var(--font)}
.osm-night{filter:invert(1) hue-rotate(195deg) brightness(.82) contrast(.9) saturate(.6)}
.leaflet-control-attribution{background:rgba(10,14,36,.7)!important;color:#9097BE!important;font-size:10px}
.leaflet-control-attribution a{color:#A6E8FF!important}
.gy-pin i{display:block;width:22px;height:22px;margin:2px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,196,107,.3),0 4px 10px rgba(0,0,0,.5)}
.gy-pin b{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#2A1A00;font-family:var(--font)}
.gy-me i{display:block;width:14px;height:14px;margin:1px;border-radius:50%;background:#A6E8FF;box-shadow:0 0 0 5px rgba(166,232,255,.3)}
.pick{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--hair)}
.pick-txt{flex:1;min-width:0}.pick-txt b{display:block;font-size:16px}.pick-txt span{font-size:12.5px;color:var(--haze)}
.pick-txt em{display:block;font-style:normal;font-size:13px;color:#D4D7EE;margin-top:4px}
.place-back{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(166,232,255,.1);margin-bottom:10px;font-size:13.5px}
.qrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
.qrow > span{font-size:15px}
.seg.mini{margin:0;width:190px}.seg.mini button{height:32px;font-size:13px}
.answer{display:flex;gap:12px;padding:14px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--hair);margin-top:6px}
.answer .swatch{margin-top:4px}
.answer b{font-size:18px;font-weight:800;font-variation-settings:"wdth" 85}
.answer p{margin:4px 0 0;font-size:14px;color:#D4D7EE;line-height:1.45}
.answer.slim{padding:12px 14px}
.sky-now{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:20px;background:rgba(255,255,255,.06)}
.sky-now b{display:block;font-size:17px}.sky-now span{font-size:13px;color:var(--haze);line-height:1.4}
.zone{flex:none;min-width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.dark-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hair)}
.dark-row .dk{flex:1;min-width:0}.dark-row b{display:block;font-size:15px}.dark-row span{display:block;font-size:12.5px;color:var(--haze);line-height:1.4}
.dark-row .now{display:grid;place-items:center;text-decoration:none;height:36px;font-size:13px;white-space:nowrap}
.kp{display:flex;gap:14px;align-items:flex-end;margin:6px 0 10px}
.kpnow b{display:block;font-size:34px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.kpnow span{font-size:12px;color:var(--haze)}
.kpbars{position:relative;flex:1;height:64px;display:flex;align-items:flex-end;gap:2px}
.kpbars i{flex:1;border-radius:3px 3px 1px 1px;min-height:3px}
.kpbars em{position:absolute;left:0;right:0;border-top:1px dashed rgba(255,196,107,.8)}
.row.launch{cursor:default}
.row .vl a{display:block;color:var(--ice);font-size:12px;margin-top:2px}
.steps{margin:6px 0 14px;padding-left:22px;line-height:1.5;font-size:15px}
.steps li{margin:0 0 10px;padding-left:4px}.steps li::marker{color:var(--amber);font-weight:800}
.form label{display:block;font-size:13px;color:var(--haze);margin:10px 0 0}
.form input[type=text],.form input[type=date],.form input[type=time],.form input[type=search]{display:block;width:100%;height:42px;margin-top:5px;border:0;border-radius:14px;padding:0 14px;
  font:inherit;font-size:16px;color:var(--ink);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--hair);color-scheme:dark;outline:none}
.form input:focus{box-shadow:inset 0 0 0 1.5px var(--amber)}
.poster-prev{display:block;width:62%;max-width:260px;aspect-ratio:1000/1414;margin:4px auto 6px;border-radius:6px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
/* planeta en 3D */
#p3d{position:fixed;inset:0;z-index:40;display:none;flex-direction:column;align-items:center;justify-content:center;padding:calc(20px + var(--safe-t)) 24px calc(24px + var(--safe-b));
  background:radial-gradient(80% 60% at 50% 40%,#0B1030,#03040E)}
#p3d.open{display:flex}
#p3d .x{position:absolute;top:calc(14px + var(--safe-t));right:14px;width:42px;height:42px;border-radius:21px}
#p3dCv{width:min(84vw,420px);height:min(84vw,420px);image-rendering:auto;touch-action:none;cursor:grab}
.p3d-info{max-width:420px;width:100%;text-align:left;margin-top:8px}
.p3d-info h2{margin:0;font-size:34px;font-weight:800;font-variation-settings:"wdth" 80}
.p3d-info p{margin:6px 0 0;color:#D4D7EE;font-size:15px;line-height:1.45}
.p3d-info .facts{flex-wrap:wrap;gap:12px 22px}
/* contador de estrellas fugaces: rojo para no perder la vista nocturna */
#meteorMode{position:fixed;inset:0;z-index:45;display:none;flex-direction:column;background:#0A0203;color:#FF8F80}
#meteorMode.open{display:flex}
#mTap{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;overflow:hidden}
.m-count{font-size:120px;font-weight:800;line-height:1;font-variation-settings:"wdth" 75;font-variant-numeric:tabular-nums;color:#FF6B57}
#mTap p{margin:10px 0 0;font-size:15px;color:#B9584A}
.burst{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;box-shadow:0 0 0 2px #FF6B57;animation:burst .7s ease-out forwards;pointer-events:none}
@keyframes burst{to{transform:scale(14);opacity:0}}
.m-panel{padding:12px 16px calc(16px + var(--safe-b));border-top:1px solid rgba(255,107,87,.18)}
.m-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.m-stats b{display:block;font-size:20px;color:#FF7A66}.m-stats span{font-size:10.5px;color:#9E4B40}
#mMap{display:block;width:100%;height:150px;margin:10px 0;border-radius:14px;background:rgba(255,80,60,.04)}
.m-share{display:flex;gap:8px;align-items:center;font-size:12.5px;color:#9E4B40;margin-bottom:10px}
#meteorMode .chip{width:100%;color:#FF8F80;background:rgba(255,80,60,.08);box-shadow:inset 0 0 0 1px rgba(255,107,87,.3)}

.sky-now .zone,.dark-row .zone{display:grid;font-size:14px;color:#fff;line-height:1}
body.p3d-open #card,body.p3d-open #fabs,body.p3d-open #timebar{opacity:0;pointer-events:none}

/* burbuja de cristal al deslizar por la barra */
#dockBubble{position:fixed;left:0;top:0;z-index:13;pointer-events:none;border-radius:999px;--frost:0px;opacity:0;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 60%,rgba(255,255,255,.08));
  box-shadow:0 18px 40px -8px rgba(0,0,10,.55),inset 0 0 0 .6px rgba(255,255,255,.5),inset 0 1px 1.5px rgba(255,255,255,.55);will-change:transform}
html:not(.real-glass) #dockBubble{-webkit-backdrop-filter:blur(2px) saturate(1.3) brightness(1.08);backdrop-filter:blur(2px) saturate(1.3) brightness(1.08)}
#dock.dragging button{transition:color .15s}
#dock.dragging #drop{opacity:0!important}
#dock button.hover{color:#fff}

/* barra con seis opciones */
#dock{width:min(460px,calc(100vw - 16px));padding:5px 4px}
/* cada botón ocupa su texto más la misma cantidad de aire: así el hueco entre todas las opciones es igual */
#dock button{flex:1 1 auto;font-size:10.5px;letter-spacing:-.01em}
#dock button svg{width:21px;height:21px}
#mapBtn{position:relative}
body.away #mapBtn::after{content:"";position:absolute;top:9px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--ice);box-shadow:0 0 8px var(--ice)}

/* ---------- Zoom con dos dedos ---------- */
#video{transform-origin:50% 50%}
#zoomChip{position:fixed;left:12px;top:196px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:0;min-width:64px;padding:7px 12px;border-radius:20px;
  --frost:10px;background-color:var(--tint);color:var(--ink);opacity:0;transform:scale(.8);pointer-events:none;
  transition:opacity .2s,transform var(--spring-d) var(--spring)}
#zoomChip.show{opacity:1;transform:none;pointer-events:auto}
#zoomChip b{font-size:17px;font-weight:800;color:var(--amber);font-variant-numeric:tabular-nums;line-height:1.1}
#zoomChip span{font-size:10.5px;color:var(--haze)}
body.sheet-open #zoomChip,body.p3d-open #zoomChip{opacity:0;pointer-events:none}

/* ================= Fotografía ================= */
.ptabs{display:flex;gap:8px;overflow-x:auto;touch-action:pan-x;scrollbar-width:none;margin:2px -18px 6px;padding:2px 18px 6px;scroll-padding:0 18px}
.ptabs::-webkit-scrollbar{display:none}
.ptabs .chip{flex:none}
.ppanel.hidden{display:none}
.ppanel .sub{margin:8px 0 10px}
.campick .seg{margin-top:8px}
.campick .seg button{font-size:13px;padding:0 4px}
.set.slim{padding:12px 0 4px;border-bottom:0}
.set.slim label{font-size:15px}
.set .val{font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.lbl{margin:12px 0 6px;font-size:13px;color:var(--haze)}
.bigstat{display:flex;gap:10px;margin:14px 0 4px}
.bigstat>div{flex:1;min-width:0;padding:12px 12px 10px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--hair)}
.bigstat b{display:block;font-size:24px;line-height:1.1;font-weight:800;font-variation-settings:"wdth" 85;font-variant-numeric:tabular-nums;color:var(--ink)}
.bigstat span{display:block;margin-top:3px;font-size:12px;color:var(--haze);line-height:1.3}
.bigstat.small b{font-size:17px}
.hint{margin:8px 0;font-size:13.5px;color:#C9CCE6;line-height:1.45}
.hint.warn{color:#FFB3A8}
.tips{margin:10px 0 4px;padding:0 0 0 18px;font-size:13.5px;color:#D4D7EE;line-height:1.5}
.tips li{margin:5px 0}
.tips b{color:var(--ink)}
/* previsión por horas */
.bestwin{margin:12px 0 6px;padding:10px 14px;border-radius:16px;background:rgba(166,232,255,.1);color:var(--ice);font-size:14px}
.bestwin b{color:var(--ink)}
.fhead,.frow{display:grid;grid-template-columns:46px 34px 1fr 92px;align-items:center;gap:8px}
.fhead{margin-top:10px;padding:0 2px 6px;font-size:11px;color:var(--haze);border-bottom:1px solid var(--hair)}
.fhead span:last-child{text-align:right}
.frow{padding:9px 2px;border-bottom:1px solid var(--hair);font-size:14px}
.frow.twi{opacity:.62}
.frow>b{font-variant-numeric:tabular-nums}
.frow .sc{width:30px;height:30px;border-radius:15px;display:grid;place-items:center;font-weight:800;color:#0A0D22;background:var(--c)}
.clb{display:flex;align-items:flex-end;gap:3px;height:30px}
.clb i{width:9px;height:100%;border-radius:3px;background:linear-gradient(to top,#C9D2F2 var(--v),rgba(255,255,255,.08) var(--v))}
.clb small{margin-left:6px;font-size:11.5px;color:var(--haze);align-self:center;white-space:nowrap}
.wd{text-align:right;font-variant-numeric:tabular-nums;line-height:1.25}
.wd small{display:block;font-size:11.5px;color:var(--haze)}
.wd small.warn{color:var(--amber)}
/* horas buenas */
.tline{position:relative;margin:16px 0 26px}
.tbar,.tcore{position:relative;height:16px;border-radius:8px;background:#0B0F28;overflow:hidden;box-shadow:inset 0 0 0 1px var(--hair)}
.tcore{height:6px;margin-top:4px;background:transparent;box-shadow:none}
.tbar i,.tcore i{position:absolute;top:0;bottom:0}
.tticks{position:absolute;left:0;right:0;top:100%;height:16px}
.tticks span{position:absolute;transform:translateX(-50%);font-size:10.5px;color:var(--haze);top:4px}
.tline .gold,.row.hr .dot.gold{background:#FFC46B}
.tline .blue,.row.hr .dot.blue{background:#5D7BF0}
.tline .tw2{background:#28306A}
.tline .night,.row.hr .dot.night{background:#2B3480}
.tline .dark{background:rgba(166,232,255,.55);top:5px;bottom:5px;border-radius:3px}
.row.hr .dot.dark{background:#A6E8FF}
.tline .mw,.row.hr .dot.mw{background:#E9D7B0;border-radius:3px}
.row.hr .dot{width:12px;height:12px;border-radius:4px}
/* alineación / ISS */
.gy-pin.cam i{background:var(--amber)}
.gy-pin.sub i{background:#A6E8FF}
.trd{padding:2px 0 10px;border-bottom:1px solid var(--hair)}
.trd.hidden{display:none}
.trd .chips a.chip{display:inline-flex;align-items:center;text-decoration:none}
@media (max-width:375px){#dock button{font-size:9.6px;letter-spacing:-.015em}}

/* ================= Calibrar brújula ================= */
#calib{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:rgba(3,4,16,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .25s}
#calib.show{opacity:1}
#calib.hidden{display:none}
.cal-card{width:min(360px,100%);border-radius:30px;padding:22px 22px 18px;text-align:center;background-color:var(--tint-strong);--frost:16px;
  transform:translateY(16px) scale(.97);transition:transform var(--spring-d) var(--spring)}
#calib.show .cal-card{transform:none}
.cal-step{margin:0;font-size:13px;color:var(--haze)}
#calTitle{margin:4px 0 6px;font-size:26px;line-height:1.1;font-weight:800;font-variation-settings:"wdth" 82}
.cal-txt{margin:0 auto;max-width:30ch;font-size:14.5px;color:#D4D7EE;line-height:1.45;min-height:4.3em}
.cal-vis{position:relative;width:200px;height:200px;margin:16px auto 10px}
.cal-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.cal-ring circle{fill:none;stroke-width:8}
.cal-ring .bg{stroke:rgba(255,255,255,.1)}
.cal-ring .fg{stroke:var(--amber);stroke-linecap:round;transition:stroke-dashoffset .15s linear,stroke .3s}
#calib.ok .cal-ring .fg{stroke:#9BE8B4}
.cal-eight{position:absolute;inset:44px 22px;display:grid;place-items:center}
.cal-eight svg{width:100%;overflow:visible}
.cal-eight path{fill:none;stroke:rgba(255,255,255,.28);stroke-width:3;stroke-linecap:round}
.cal-eight .dot{fill:var(--amber);filter:drop-shadow(0 0 6px var(--amber))}
.cal-level{position:absolute;inset:26px;border-radius:50%;background:radial-gradient(circle,rgba(166,232,255,.08),rgba(166,232,255,.02));box-shadow:inset 0 0 0 1px var(--hair)}
.cal-level .cross{position:absolute;inset:0;background:linear-gradient(var(--hair),var(--hair)) center/1px 100% no-repeat,linear-gradient(var(--hair),var(--hair)) center/100% 1px no-repeat}
.cal-level .target{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.cal-level .bubble{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 14px rgba(255,196,107,.7);transition:transform .08s linear,background .2s}
.cal-level.flat .bubble{background:#9BE8B4;box-shadow:0 0 16px rgba(155,232,180,.8)}
.cal-level.hidden,.cal-eight.hidden,.cal-done.hidden{display:none}
.cal-done{position:absolute;inset:50px;display:grid;place-items:center;color:#9BE8B4}
.cal-done svg{width:72px;height:72px}
.cal-read{margin:0 0 12px;min-height:1.4em;font-size:13.5px;color:var(--ice);line-height:1.45}
#calCancel{min-width:120px}
@media (prefers-reduced-motion:reduce){.cal-eight .dot{display:none}}