@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

:root{
  /* tema oscuro (por defecto) */
  --bg:#15181E; --bgDeep:#101318; --panel:#1E222B; --panel2:#232834;
  --line:#2C313C; --lineSoft:#242935; --text:#E8E6E1; --textMut:#8A9099;
  --textFaint:#5B616C; --accent:#6BD5CE; --accentDim:#3E6F6B; --warn:#E0A45C;
  --glow:rgba(107,213,206,.14); --cardGrad:rgba(255,255,255,.025);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
:root[data-theme="light"]{
  --bg:#F3F1EA; --bgDeep:#FBFAF6; --panel:#FFFFFF; --panel2:#F4F1E9;
  --line:#E2DDD0; --lineSoft:#EBE7DC; --text:#23262E; --textMut:#646A73;
  --textFaint:#9AA0A8; --accent:#2C988F; --accentDim:#BEE3DF; --warn:#C07A2C;
  --glow:rgba(44,152,143,.12); --cardGrad:rgba(0,0,0,.012);
  --shadow:0 1px 2px rgba(60,60,40,.06),0 10px 30px rgba(60,60,40,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%,var(--glow),transparent 60%),
    var(--bg);
  color:var(--text);font-family:'Inter',system-ui,sans-serif;min-height:100vh;
  transition:background-color .35s ease,color .35s ease;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.disp{font-family:'Space Grotesk',system-ui,sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 60px}
h1{font-size:clamp(32px,6vw,56px);font-weight:700;line-height:1.02;letter-spacing:-.02em;margin-bottom:8px}
h2{font-size:17px;font-weight:600}

.panel{
  background:linear-gradient(180deg,var(--cardGrad),transparent),var(--panel);
  border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:var(--shadow);transition:background-color .35s,border-color .35s;
}

input,select{width:100%;padding:9px 11px;background:var(--bgDeep);border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:13px;font-family:inherit;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover{border-color:var(--accentDim)}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9099' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
select:disabled{opacity:.5;cursor:default}
button{font-family:inherit;cursor:pointer}
.btn{transition:background .15s,border-color .15s,color .15s,transform .12s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
label .lbl{display:block;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--textFaint);margin-bottom:6px}

/* ---- header / topbar ---- */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.topbar .rule{flex:1;height:1px;background:var(--line)}
.themeToggle{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--textMut);
  transition:color .15s,border-color .15s,background .15s,transform .12s;
}
.themeToggle:hover{color:var(--accent);border-color:var(--accentDim);transform:translateY(-1px)}
.themeToggle:active{transform:translateY(0)}
.themeToggle svg{width:17px;height:17px;display:block}
.topbtn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;width:auto;height:34px;padding:0 15px;
  border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.2px;white-space:nowrap;
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel));
  box-shadow:0 1px 2px rgba(0,0,0,.15),0 0 0 0 var(--glow);
  transition:border-color .18s,box-shadow .18s,transform .12s,background .18s,color .18s;
}
.topbtn svg{width:15px;height:15px;display:block;transition:transform .3s}
.topbtn:hover{
  color:var(--bgDeep);border-color:var(--accent);
  background:var(--accent);
  transform:translateY(-1px);box-shadow:0 4px 16px var(--glow)}
.topbtn:hover svg{transform:rotate(-90deg)}
.topbtn:active{transform:translateY(0)}
.topbtn:disabled{opacity:.65;cursor:default;transform:none}
.topbtn.spinning{color:var(--bgDeep);background:var(--accent);border-color:var(--accent)}
.topbtn.spinning svg{animation:l-orbit .8s linear infinite;transform:none}

/* ---- celdas mapa ---- */
.cell{border-radius:6px;transition:transform .12s,outline-color .12s,box-shadow .12s;outline:1.5px solid transparent;cursor:crosshair}
.cell:hover{transform:scale(1.16);outline-color:var(--text);box-shadow:0 4px 14px rgba(0,0,0,.35);position:relative;z-index:5}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.scroll::-webkit-scrollbar{height:8px;width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--accentDim)}

.layout{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:22px;margin-top:26px;align-items:start}
.viz{display:flex;flex-direction:column;gap:22px;min-width:0}

/* ---- tarjetas de estadísticas ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px}
.stcard{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--cardGrad),transparent 55%),var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:14px 15px;
  box-shadow:var(--shadow);
  animation:rise .42s cubic-bezier(.2,.7,.3,1) both;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.stcard:hover{transform:translateY(-3px);border-color:var(--accentDim);box-shadow:0 6px 22px rgba(0,0,0,.28)}
.stcard .lbl-sm{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--textFaint)}
.stcard .big{font-size:27px;font-weight:600;margin-top:3px;line-height:1.05}
.stcard .sub{font-size:11px;color:var(--textMut);margin-top:2px}
.stcard .accentbar{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px}
.spark{margin-top:8px;display:block;width:100%;height:26px;overflow:visible}

.field{display:block;margin-bottom:0}

/* ---- segmented (vista) ---- */
.seg{display:flex;gap:6px;background:var(--bgDeep);padding:4px;border-radius:11px;border:1px solid var(--line)}
.seg button{flex:1;padding:8px 0;border-radius:8px;border:none;font-size:13px;font-weight:600;background:transparent;color:var(--textMut);transition:background .18s,color .18s}
.seg button:hover:not(.on){color:var(--text)}
.seg button.on{background:var(--accent);color:var(--bgDeep);box-shadow:0 2px 10px var(--glow)}

/* ---- barra de controles (arriba) ---- */
.toolbar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.tfield{display:flex;flex-direction:column;flex:1 1 190px;min-width:150px;margin:0}
.tfield--sm{flex:0 1 150px}
.tfield--btn{flex:0 0 auto;width:auto;align-self:flex-end;padding:9px 16px;height:38px}
.tfield--btn.on{border-color:var(--accent);color:var(--text);background:var(--cardGrad)}

/* ---- gráfica principal ---- */
.mainhead{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.chTitle{font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.hero{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,5vw,44px);line-height:1;letter-spacing:-.02em}
.hero .u{font-size:.5em;font-weight:600;color:var(--textMut);margin-left:4px}
.heroLbl{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--textFaint);margin-bottom:8px}
.heroSub{font-size:12.5px;color:var(--textMut);margin-top:8px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--line)}
.chartbox{min-height:260px}
.empty{display:flex;align-items:center;justify-content:center;min-height:260px;color:var(--textFaint);font-size:13px;text-align:center;padding:20px;line-height:1.6}

/* ---- loader satélite ---- */
.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:300px;text-align:center;padding:20px}
.loader svg{width:128px;height:128px;overflow:visible}
.loader .l-planet{fill:var(--panel2);stroke:var(--line);stroke-width:1.5}
.loader .l-land{fill:var(--accentDim);opacity:.7}
.loader .l-orbit{fill:none;stroke:var(--line);stroke-dasharray:2 5;opacity:.8}
.loader .l-moon{fill:var(--textFaint)}
.loader .l-sat{fill:var(--accent)}
.loader .l-panel{fill:var(--accentDim);stroke:var(--accent);stroke-width:.6}
.loader .l-ant{stroke:var(--accent);stroke-width:1.4;stroke-linecap:round}
.loader .l-wave{fill:none;stroke:var(--accent);transform-box:fill-box;transform-origin:center;opacity:0}
.loader .l-orbiter{transform-box:view-box;transform-origin:64px 64px;animation:l-orbit 4s linear infinite}
.loader .l-core{transform-box:fill-box;transform-origin:center;animation:l-bob 3s ease-in-out infinite}
.loader .w1{animation:l-wave 2.4s ease-out infinite}
.loader .w2{animation:l-wave 2.4s ease-out infinite .8s}
.loader .w3{animation:l-wave 2.4s ease-out infinite 1.6s}
@keyframes l-orbit{to{transform:rotate(360deg)}}
@keyframes l-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
@keyframes l-wave{0%{opacity:.55;transform:scale(.35)}100%{opacity:0;transform:scale(2.6)}}
.loader-text{color:var(--textMut);font-size:13px;line-height:1.7;max-width:320px}
.loader-text b{color:var(--text)}
.loader-pending{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);margin-top:4px}
@media(prefers-reduced-motion:reduce){.loader .l-orbiter,.loader .l-core,.loader .l-wave{animation:none}.loader .l-wave{opacity:.25}}

/* ---- lista de estaciones ---- */
.stlist{max-height:160px;overflow-y:auto;margin-top:6px;border:1px solid var(--line);border-radius:9px}
.stlist button{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:8px 10px;border:none;border-bottom:1px solid var(--lineSoft);font-size:12px;background:transparent;color:var(--textMut);transition:background .12s,color .12s}
.stlist button:last-child{border-bottom:none}
.stlist button:hover{background:var(--lineSoft);color:var(--text)}
.stlist button.on{background:var(--accentDim);color:var(--text)}

/* ---- botones ---- */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 0;border-radius:10px;border:none;font-size:14px;font-weight:600;background:var(--accent);color:var(--bgDeep);width:100%;box-shadow:0 2px 12px var(--glow)}
.primary:hover{filter:brightness(1.07)}
.primary:disabled{opacity:.6;cursor:default;filter:none}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--textMut);font-weight:500;padding:9px 0;font-size:13px}
.ghost:hover{border-color:var(--accentDim);color:var(--text);background:var(--cardGrad)}
.btn svg{width:15px;height:15px;display:block}

.errbox{font-size:12px;color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));border-radius:9px;padding:9px 11px;line-height:1.5}

/* ---- tooltip flotante ---- */
#tip{
  position:fixed;pointer-events:none;z-index:50;opacity:0;
  transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 11px;box-shadow:0 8px 28px rgba(0,0,0,.35);
  font-size:12px;color:var(--text);white-space:nowrap;
}
#tip.show{opacity:1;transform:translateY(0)}
#tip .t-date{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--textFaint);letter-spacing:.4px;text-transform:uppercase}
#tip .t-val{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;margin-top:1px}
#tip .t-mm{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--textMut);margin-top:2px}

/* ---- responsive ---- */
@media(max-width:760px){
  .layout{grid-template-columns:1fr}
  .wrap{padding:22px 16px 48px}
  .panel{padding:16px;border-radius:14px}
  .tfield{flex:1 1 46%}
  .tfield--sm{flex:1 1 46%}
}
@media(max-width:560px){
  .wrap{padding:16px 12px 40px}
  h1{font-size:clamp(26px,9vw,40px)}
  .topbar{flex-wrap:wrap;gap:8px}
  .topbar .rule{order:-1;flex-basis:100%;display:none}
  .topbtn-txt{display:none}                 /* botón solo con icono */
  .topbtn{padding:0;width:34px;justify-content:center}
  .toolbar{gap:10px}
  .tfield,.tfield--sm{flex:1 1 100%}         /* un campo por fila */
  .tfield--btn{width:100%;justify-content:center}
  .mainhead{gap:8px}
  .chTitle{font-size:17px}
  .heroSub{font-size:11.5px}
  .chartbox{min-height:220px}
}
@media(prefers-reduced-motion:reduce){.cell,.btn,.stcard,body,.panel,.themeToggle{transition:none;animation:none}}