:root{ --ink:#07090f; --panel:#0e131d; --line:#1c2536; --volt:#b6ff3b; --cyan:#3be3ff; --heat:#ff5a36; --ice:#8fd8ff; }
html,body{ background:var(--ink); overscroll-behavior:none; -webkit-tap-highlight-color:transparent; }
body{ min-height:100vh; background:
  radial-gradient(120% 60% at 50% -10%, rgba(59,227,255,.10), transparent 60%),
  radial-gradient(80% 40% at 100% 0%, rgba(182,255,59,.06), transparent 60%), var(--ink); background-attachment:fixed; }
input,textarea,select{ user-select:text; -webkit-user-select:text; }
.num{ font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ---------- superficies ---------- */
.card{ background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:22px; }
.card-hi{ position:relative; overflow:hidden; border-radius:26px; border:1px solid rgba(182,255,59,.25);
  background: radial-gradient(120% 120% at 0% 0%, rgba(182,255,59,.16), transparent 50%),
              radial-gradient(120% 120% at 100% 100%, rgba(59,227,255,.14), transparent 55%), #0b111a; }
.card-hi::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:22px 22px; mask-image:linear-gradient(180deg, #000, transparent 85%); pointer-events:none; }
.chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:11px; font-weight:600; padding:.28rem .6rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:#c9d3e3; }
.chip-volt{ background:rgba(182,255,59,.12); border-color:rgba(182,255,59,.35); color:var(--volt); }
.chip-heat{ background:rgba(255,90,54,.12); border-color:rgba(255,90,54,.4); color:#ff8a6b; }
.chip-ice{ background:rgba(143,216,255,.10); border-color:rgba(143,216,255,.35); color:var(--ice); }
.chip-gold{ background:rgba(255,200,61,.12); border-color:rgba(255,200,61,.35); color:#ffd56b; }
.label{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#7d8aa3; font-weight:600; }

/* ---------- botones ---------- */
.btn-volt,.btn-ghost,.btn-heat,.btn-ice{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:700; border-radius:16px; padding:.85rem 1.1rem; font-size:15px; transition:transform .12s ease, opacity .2s, filter .2s; }
.btn-volt{ background:var(--volt); color:#0a0f02; box-shadow:0 8px 24px -8px rgba(182,255,59,.6); }
.btn-ghost{ background:rgba(255,255,255,.06); border:1px solid var(--line); color:#e8eef8; }
.btn-heat{ background:linear-gradient(135deg,#ff7a45,#ff3d5a); color:#fff; box-shadow:0 8px 24px -8px rgba(255,90,54,.7); }
.btn-ice{ background:linear-gradient(135deg,#8fd8ff,#3be3ff); color:#03141c; box-shadow:0 8px 24px -8px rgba(59,227,255,.7); }
.btn-volt:active,.btn-ghost:active,.btn-heat:active,.btn-ice:active{ transform:scale(.96); }
button:disabled{ opacity:.45; filter:grayscale(.4); }
.btn-ice.ready,.btn-volt.ready{ animation:pop .5s ease; }
@keyframes pop{ 50%{ transform:scale(1.06);} }

/* ---------- inputs ---------- */
.inp{ width:100%; background:#0a0f18; border:1px solid var(--line); border-radius:14px; padding:.8rem .95rem; font-size:15px; color:#fff; outline:none; transition:border-color .2s; }
.inp:focus{ border-color:rgba(182,255,59,.6); }
.inp::placeholder{ color:#4f5b70; }
.opt{ display:block; cursor:pointer; }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt .box{ border:1px solid var(--line); border-radius:16px; padding:.8rem; background:rgba(255,255,255,.02); transition:all .15s; }
.opt input:checked + .box{ border-color:var(--volt); background:rgba(182,255,59,.08); box-shadow:0 0 0 3px rgba(182,255,59,.12); }

/* ---------- navegación ---------- */
.nav-glass{ background:rgba(7,9,15,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid var(--line);
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 8px); }
.nav-btn{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:.35rem 0; color:#66748c; font-size:10.5px; font-weight:600; transition:color .2s; position:relative; }
.nav-btn svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-btn svg .fillc{ fill:currentColor; stroke:none; }
.nav-btn.active{ color:var(--volt); }
.nav-btn.active::before{ content:""; position:absolute; top:-9px; width:26px; height:3px; border-radius:3px; background:var(--volt); box-shadow:0 0 12px var(--volt); }

/* ---------- toasts ---------- */
.toast{ pointer-events:auto; max-width:420px; width:100%; padding:.8rem 1rem; border-radius:16px; font-size:14px; font-weight:600; backdrop-filter:blur(14px);
  animation:tin .25s ease; transition:opacity .35s, transform .35s; border:1px solid; }
.toast-ok{ background:rgba(24,38,10,.92); color:#d8ff9a; border-color:rgba(182,255,59,.35); }
.toast-err{ background:rgba(45,12,10,.92); color:#ffb4a1; border-color:rgba(255,90,54,.45); }
.toast-info{ background:rgba(8,30,40,.92); color:#bdefff; border-color:rgba(59,227,255,.4); }
.toast.out{ opacity:0; transform:translateY(-10px); }
@keyframes tin{ from{ opacity:0; transform:translateY(-12px) scale(.98);} }

/* ---------- loaders ---------- */
.loader{ width:46px; height:46px; border-radius:50%; border:3px solid #1c2536; border-top-color:var(--volt); animation:spin .8s linear infinite; }
.spin{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(0,0,0,.25); border-top-color:currentColor; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg);} }
#view.htmx-request{ opacity:.55; transition:opacity .2s .15s; }
.fade-in{ animation:fin .35s ease both; }
@keyframes fin{ from{ opacity:0; transform:translateY(6px);} }
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--volt); box-shadow:0 0 10px var(--volt); animation:pulse 1.6s infinite; }
[data-live].off .live-dot{ background:#ff5a36; box-shadow:0 0 10px #ff5a36; }
@keyframes pulse{ 50%{ opacity:.35; } }

/* ---------- robots ---------- */
.bot{ --c:#b6ff3b; position:relative; }
.bot svg{ width:100%; height:100%; overflow:visible; }
.bot .shell{ fill:#121a28; stroke:var(--c); stroke-width:2.2; }
.bot .visor{ fill:#04060b; }
.bot .eye{ fill:var(--c); transform-box:fill-box; transform-origin:center; }
.bot .led{ fill:var(--c); }
.bot .acc{ fill:var(--c); opacity:.9; }
.bot .fan{ transform-box:fill-box; transform-origin:center; }
.bot .fan path{ fill:var(--c); opacity:.85; }
.bot .halo{ fill:var(--c); opacity:.0; }
.bot .steam{ display:none; }
.bot-running svg{ animation:bob 2.6s ease-in-out infinite; }
.bot-running .fan{ animation:spin .55s linear infinite; }
.bot-running .eye{ animation:blink 4.2s infinite; }
.bot-running .led{ animation:pulse 1.2s infinite; }
.bot-running .halo{ animation:halo 2.6s ease-in-out infinite; }
.bot-overheated{ --c:#ff5a36 !important; }
.bot-overheated svg{ animation:shake .18s linear infinite; filter:drop-shadow(0 0 14px rgba(255,90,54,.75)); }
.bot-overheated .eye{ transform:scaleY(.25); }
.bot-overheated .steam{ display:block; }
.bot-overheated .steam circle{ fill:#d6dde8; opacity:0; animation:steam 1.6s ease-out infinite; }
.bot-overheated .steam circle:nth-child(2){ animation-delay:.5s; }
.bot-overheated .steam circle:nth-child(3){ animation-delay:1s; }
.bot-expired{ filter:grayscale(1); opacity:.45; }
@keyframes bob{ 50%{ transform:translateY(-4px);} }
@keyframes blink{ 0%,92%,100%{ transform:scaleY(1);} 95%{ transform:scaleY(.1);} }
@keyframes shake{ 25%{ transform:translate(1px,-1px) rotate(.6deg);} 75%{ transform:translate(-1px,1px) rotate(-.6deg);} }
@keyframes halo{ 0%,100%{ opacity:.05;} 50%{ opacity:.16;} }
@keyframes steam{ 0%{ opacity:0; transform:translateY(0) scale(.6);} 30%{ opacity:.7;} 100%{ opacity:0; transform:translateY(-26px) scale(1.5);} }

/* ---------- barra de temperatura ---------- */
.temp-track{ height:8px; border-radius:99px; background:#0a0f18; border:1px solid var(--line); overflow:hidden; }
.temp-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,#3be3ff,#b6ff3b 45%,#ffc83d 70%,#ff5a36); background-size:calc(100vw - 64px) 100%; transition:width .25s linear; }
.botcard{ --temp:0; transition:border-color .3s; }
.botcard[data-status=running]{ border-color:rgba(182,255,59,calc(.12 + var(--temp)*.0)); box-shadow: inset 0 0 0 1px rgba(255,90,54,calc(var(--temp)*var(--temp)*.45)); }
.botcard[data-status=overheated]{ border-color:rgba(255,90,54,.5); background:linear-gradient(180deg, rgba(255,90,54,.10), rgba(255,90,54,.02)); }

/* ---------- modal ---------- */
.overlay{ position:fixed; inset:0; z-index:60; background:rgba(3,5,9,.78); backdrop-filter:blur(8px); display:flex; align-items:flex-end; animation:fin .2s ease; }
.sheet{ width:100%; max-height:94vh; overflow:auto; background:#0b1019; border-top:1px solid var(--line); border-radius:28px 28px 0 0; padding:1.1rem 1.1rem calc(env(safe-area-inset-bottom,0px) + 1.2rem); animation:sheet .3s cubic-bezier(.2,.9,.3,1); }
@keyframes sheet{ from{ transform:translateY(40px); opacity:.4;} }
.ring{ transform:rotate(-90deg); }
.ring .bg{ stroke:#1c2536; }
.ring .fg{ stroke:var(--ice); stroke-dasharray:113; transition:stroke-dashoffset 1s linear; stroke-linecap:round; }
.snow{ position:absolute; color:#bfe9ff; animation:snow 2.4s linear infinite; opacity:0; }
@keyframes snow{ 0%{ transform:translateY(-10px); opacity:0;} 15%{ opacity:1;} 100%{ transform:translateY(160px) rotate(180deg); opacity:0;} }

.progress{ height:6px; border-radius:99px; background:#0a0f18; overflow:hidden; }
.progress > i{ display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--volt)); border-radius:99px; }
.dots{ display:flex; gap:6px; }
.dots i{ flex:1; height:6px; border-radius:99px; background:#1c2536; }
.dots i.on{ background:var(--ice); box-shadow:0 0 10px rgba(143,216,255,.6); }
.hide-scroll::-webkit-scrollbar{ display:none; }