/* ═══════════════════════════════════════════════════
   DXArte Monitor - Estilos con temas
   ═══════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-size:100%;scroll-behavior:smooth}

/* ── TEMA OSCURO (default) ── */
:root, [data-theme="dark"]{
  --bg:#0b0f19; --bg2:#0e1424; --card:#101827; --card2:#152036;
  --border:#22304d; --txt:#e8eefc; --dim:#8ea0bf; --head:#8ea0bf;
  --green:#34d399; --red:#f87171; --amber:#fbbf24;
  --accent:#5eead4; --accent2:#818cf8;
  --glow:rgba(94,234,212,.16);
}

/* ── TEMA CLARO ── */
[data-theme="light"]{
  --bg:#f4f7fc; --bg2:#eef3fb; --card:#ffffff; --card2:#f7faff;
  --border:#d8e1f0; --txt:#182235; --dim:#5b6b85; --head:#5b6b85;
  --green:#059669; --red:#dc2626; --amber:#b45309;
  --accent:#0891b2; --accent2:#6366f1;
  --glow:rgba(8,145,178,.12);
}

/* ── TEMA RETRO ── */
[data-theme="retro"]{
  --bg:#070d07; --bg2:#0a120a; --card:#0e180e; --card2:#122010;
  --border:#1c3a1c; --txt:#3dff6a; --dim:#1f8f3f; --head:#1f8f3f;
  --green:#00ff41; --red:#ff2a4d; --amber:#ffb000;
  --accent:#00ff41; --accent2:#00e5ff;
  --glow:rgba(0,255,65,.14);
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 480px at 85% -10%, var(--glow), transparent 60%),
    radial-gradient(900px 420px at -10% 15%, var(--glow), transparent 55%),
    var(--bg);
  color:var(--txt);
  min-height:100vh;
  padding:max(14px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));
  max-width:780px;
  margin:0 auto;
  transition:background .3s,color .3s;
}

/* ── Hero ── */
.hero{text-align:center;padding:32px 8px 0}
.heart{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:18px;font-size:28px;
  background:linear-gradient(135deg,var(--card2),var(--card));
  border:1px solid var(--border);box-shadow:0 8px 30px var(--glow);
  animation:heartbeat 1.7s ease-in-out infinite;margin-bottom:12px;
}
@keyframes heartbeat{
  0%,100%{transform:scale(1)}10%{transform:scale(1.14)}
  20%{transform:scale(1)}30%{transform:scale(1.1)}40%{transform:scale(1)}
}
h1{
  font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;text-fill-color:transparent;
  animation:sheen 6s linear infinite;
}
@keyframes sheen{to{background-position:200% center}}
.tagline{color:var(--dim);font-size:.92rem;margin-top:10px}
.tagline .pulse-eq{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);
  margin-right:6px;vertical-align:1px;box-shadow:0 0 10px var(--green);animation:blink 2s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Controls: timezone + tema ── */
.controls{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:14px 0 0;
}

/* Timezone select */
.control-row{display:flex;justify-content:center;align-items:center}
.tz-select{
  font-size:.72rem;padding:5px 10px;
  border:1px solid var(--border);border-radius:99px;
  background:var(--card);color:var(--txt);
  cursor:pointer;font-variant-numeric:tabular-nums;
  transition:border-color .15s,background .3s,color .3s;
  appearance:auto;
}
.tz-select:hover{border-color:var(--dim)}
.tz-select:focus{outline:none;border-color:var(--accent)}

/* Theme row — discreta */
.theme-row{display:flex;gap:4px}
.theme-btn{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:50%;
  background:transparent;cursor:pointer;
  font-size:.75rem;opacity:.45;
  transition:opacity .15s,border-color .15s,background .15s;
}
.theme-btn:hover{opacity:.7;border-color:var(--border)}
.theme-btn.active{
  opacity:1;border-color:var(--border);
  background:var(--card);
}

/* ── Stats ── */
.stats{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.stat{
  flex:1;min-width:115px;text-align:center;padding:14px 8px;border-radius:16px;
  background:var(--card);border:1px solid var(--border);
  transition:background .3s,border-color .3s;
}
.stat .n{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
.stat .l{font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin-top:4px}
.stat.green .n{color:var(--green)} .stat.red .n{color:var(--red)}
.stat.amber .n{color:var(--amber)} .stat.blue .n{color:var(--accent)}

/* ── Leyenda ── */
.legend{display:flex;justify-content:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;color:var(--dim);font-size:.64rem;text-transform:uppercase;letter-spacing:.09em}
.legend .dot{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.dot.ok{background:var(--green);box-shadow:0 0 10px var(--green);animation:blink 2.4s infinite}
.dot.down{background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1s infinite}
.dot.maint{background:var(--accent)}

/* ── Grupos ── */
section{margin-top:28px}
section h2{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--head);
  margin:0 0 10px;font-weight:700;display:flex;align-items:center;gap:7px;
}
section h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}

/* ── Tarjetas ── */
.card{
  background:linear-gradient(135deg,var(--card2),var(--card));
  border:1px solid var(--border);border-radius:16px;
  padding:16px 18px;margin-bottom:12px;
  transition:transform .18s ease,border-color .18s,box-shadow .18s,background .3s;
}
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 34px var(--glow)}

.card-top{display:flex;align-items:center;gap:12px}
.card-top .name{font-weight:700;font-size:1.02rem;flex:1}
.card-top .name.link{
  color:var(--txt);
  text-decoration:none;
  transition:color .15s;
  position:relative;
}
.card-top .name.link::after{
  content:" ↗";
  font-size:.75rem;
  color:var(--accent);
  opacity:.5;
  transition:opacity .15s;
}
.card-top .name.link:hover{color:var(--accent)}
.card-top .name.link:hover::after{opacity:1}
.card-top .name.link:active{opacity:.7}
.card-top .badge{
  font-size:.58rem;padding:2px 9px;border-radius:99px;border:1px solid var(--border);
  color:var(--dim);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;
}
.card-top .badge.up{color:var(--green);border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08)}
.card-top .badge.down{color:var(--red);border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.08)}

.uptime{font-size:.78rem;color:var(--dim);margin-top:2px;font-variant-numeric:tabular-nums}

/* ── Heartbeat bars ── */
.heartbeat-list{
  display:flex;flex-direction:row;gap:2px;margin-top:10px;height:32px;align-items:flex-end;
}
.heartbeat-bar{
  flex:1;min-width:3px;border-radius:3px;transition:height .2s ease;
}
.heartbeat-bar.up{
  background:linear-gradient(180deg,var(--green),#059669);
  box-shadow:0 0 4px rgba(52,211,153,.3);
}
.heartbeat-bar.down{
  background:linear-gradient(180deg,var(--red),#dc2626);
  box-shadow:0 0 4px rgba(248,113,113,.3);
}
.heartbeat-bar.maint{background:var(--accent);opacity:.5}

/* ── Error state ── */
.error-state{
  text-align:center;padding:60px 20px;
  background:linear-gradient(135deg,var(--card),var(--bg2));
  border:1px dashed var(--red);border-radius:18px;
}
.error-state .icon{font-size:3rem;margin-bottom:16px;animation:blink 1s infinite}
.error-state h2{font-size:1.2rem;font-weight:700;margin-bottom:8px}
.error-state p{color:var(--dim);font-size:.9rem;line-height:1.6}
.error-state .retry-btn{
  margin-top:16px;padding:10px 24px;border-radius:12px;
  background:var(--card2);border:1px solid var(--border);color:var(--txt);
  cursor:pointer;font-size:.85rem;transition:border-color .15s;
}
.error-state .retry-btn:hover{border-color:var(--accent)}

/* ── Signoff ── */
.signoff{
  margin-top:34px;text-align:center;padding:26px 18px;border-radius:18px;
  background:linear-gradient(135deg,var(--card),var(--bg2));
  border:1px dashed var(--border);
}
.signoff .big{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.signoff .big span{color:var(--accent)}
.signoff .small{color:var(--dim);font-size:.78rem;margin-top:8px;line-height:1.6}

footer{margin-top:26px;text-align:center;color:var(--dim);font-size:.7rem;line-height:1.7}
footer .foot-heart{color:var(--red);animation:heartbeat 2.4s infinite;display:inline-block}
#updated{cursor:pointer}

/* ── Toast ── */
.toast-container{position:fixed;top:16px;right:16px;z-index:1000;display:flex;flex-direction:column;gap:8px;max-width:320px}
.toast{
  padding:12px 16px;border-radius:12px;font-size:.85rem;
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  animation:fadeIn .3s ease;
}
.toast.error{border-color:var(--red);color:var(--red)}
.toast.success{border-color:var(--green);color:var(--green)}
.toast.info{border-color:var(--accent);color:var(--accent)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--dim)}

/* ── Responsive ── */
@media(min-width:640px){h1{font-size:2.1rem}.hero{padding-top:38px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}