/* ===== Base: tema, reset, barra superior, secciones ===== */
:root{
  --bg:#121212; --card:#1e1e1e; --text:#e8e8e8; --muted:#888; --accent:#4ade80;
  --border:#333; --danger:#ef4444;
}
body.theme-light{
  --bg:#f5f5f5; --card:#fff; --text:#1a1a1a; --muted:#777; --border:#ddd;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,sans-serif}
body{background:var(--bg);color:var(--text);min-height:100vh}
main{max-width:720px;margin:0 auto;padding:1.5rem 1rem}

.topbar{display:flex;gap:.5rem;padding:1rem;background:var(--card);position:sticky;top:0}
.tab{background:transparent;border:none;color:var(--muted);padding:.6rem 1rem;border-radius:8px;cursor:pointer;font-size:.95rem}
.tab:hover{color:var(--text)}
.tab.active{background:var(--accent);color:#121212;font-weight:600}
.section{display:none}
.section.active{display:block}
/* Scrollbar oscura acorde al tema */
::-webkit-scrollbar{
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track{
  background:var(--bg);
}
::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--muted);
}