:root{
  --bg:#0b0b12;
  --panel:#151527;
  --muted:#9aa0b4;
  --text:#e9e9f2;
  --primary:#7a3cff; /* morado BTS */
  --primary-2:#9d6eff;
  --accent:#e95eff;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --link:#80a0ff;
  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:linear-gradient(180deg,#101024,#0b0b12);
  border-bottom:1px solid #1e1e33; position:sticky; top:0; z-index:10;
}
.brand{ font-weight:800; letter-spacing:2px; color:#fff; }
.tabs{ display:flex; gap:8px; }
.tab-btn{
  background:transparent; border:1px solid #2a2a44; color:#cfd3ff;
  padding:8px 12px; border-radius:999px; cursor:pointer;
}
.tab-btn:hover{ border-color:var(--primary); color:#fff; }
.actions .btn{ margin-left:8px; }

main{ padding:16px; max-width:1200px; margin:0 auto; }
.tab{ display:none; }
.tab.active{ display:block; }

.totals{ display:flex; gap:16px; margin-bottom:12px; }
.kpi{ background:var(--panel); padding:14px; border-radius:var(--radius); border:1px solid #25254a; min-width:200px; }
.kpi-val{ font-size:28px; font-weight:800; color:#fff; }
.kpi-label{ color:var(--muted); }

.toolbar{ display:flex; gap:8px; margin:12px 0; }
.toolbar input{
  flex:1; background:#0f0f1d; border:1px solid #2b2b49; color:#fff; padding:10px 12px; border-radius:10px;
}

/* Tablas (Inicio: series seguidas / Scraping) */
.table-wrap{ background:var(--panel); border:1px solid #25254a; border-radius:var(--radius); overflow:auto; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{
  padding:10px 12px; border-bottom:1px solid #242446; vertical-align:middle;
}
.table thead th{ position:sticky; top:0; background:#15152a; text-align:left; font-weight:700; }
.table tr:hover td{ background:#101025; }
.thumb{ width:50px; height:74px; object-fit:cover; border-radius:6px; border:1px solid #33335a; }

/* Pills (Scraping) */
.pill{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:#1a1830; color:#cfd3ff; border:1px solid #2a2a48; text-decoration:none; margin:2px;
}
.pill:hover{ border-color:var(--primary); color:#fff; }

/* Botones */
.btn{ border:none; border-radius:10px; padding:8px 12px; cursor:pointer; font-weight:600; }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-2); }
.btn-secondary{ background:#1b1b33; color:#cfd3ff; border:1px solid #2a2a44; }
.btn-secondary:hover{ border-color:var(--primary); color:#fff; }
.btn-link{ background:transparent; color:var(--link); text-decoration:underline; }
.btn-success{ background:var(--success); color:#06210f; }
.btn-warning{ background:var(--warning); color:#1d1200; }
.btn-danger{ background:var(--danger); color:#2a0707; }

/* Form */
.form-row{ display:flex; gap:8px; align-items:center; background:var(--panel); border:1px solid #25254a; padding:12px; border-radius:var(--radius); max-width:900px; }
.form-row input{
  flex:1; background:#0f0f1d; border:1px solid #2b2b49; color:#fff; padding:10px 12px; border-radius:10px;
}
.hint{ color:var(--muted); }

/* Switch */
.switch{ position:relative; display:inline-block; width:46px; height:26px; }
.switch input{ display:none; }
.slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#2a2a44; transition:.2s; border-radius:999px; }
.slider:before{ position:absolute; content:""; height:20px; width:20px; left:3px; top:3px; background:white; transition:.2s; border-radius:50%; }
input:checked + .slider{ background:var(--primary); }
input:checked + .slider:before{ transform:translateX(20px); }

/* ====== TARJETAS (Pendientes / Próximamente / Biblioteca) ====== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap:14px;
}
.cards{ margin:8px 0 16px; }
.card{
  background:var(--panel);
  border:1px solid #25254a;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  min-height: 100%;
}
.card-cover{
  width:100%;
  height:260px;                 /* altura fija de tarjeta */
  object-fit:contain;           /* << mostrar la portada ENTERA (sin recorte) */
  background:#0f0f1d;           /* bandas arriba/abajo si no llena */
  border-bottom:1px solid #26264a;
  display:block;
}
.card-body{ padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.card-title{ font-weight:700; color:#fff; line-height:1.2; }
.card-title .muted{ color:var(--muted); font-weight:600; }
.card-meta{ color:var(--muted); font-size:13px; }
.card-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ====== Acordeón (Biblioteca por serie) ====== */
.acc{
  background:transparent;
  border:1px solid #25254a;
  border-radius:var(--radius);
  margin-bottom:14px;
  overflow:hidden;
}
.acc[open] { border-color:#30305a; }
.acc-head{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; cursor:pointer; user-select:none;
  padding:12px 14px; background:#141428; font-weight:700; color:#fff;
}
.acc-head::-webkit-details-marker{ display:none; }
.acc-head::after{
  content:"▾"; transition:transform .2s ease; color:#9aa0b4;
}
.acc[open] .acc-head::after{ transform:rotate(180deg); }
.acc-title{ font-weight:800; }
.acc-meta{ color:var(--muted); font-weight:600; }
.acc-body{ padding:12px; background:var(--panel); }

/* Grupos de biblioteca (wrapper del acordeón) */
#lib-groups { margin-top:8px; }


/* --- LOGIN / REGISTRO / VERIFICACIÓN --- */

#login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050711;       /* igual que el fondo de la app */
  padding: 24px;
}

.login-box {
  background: #111827;
  color: #f9fafb;
  padding: 24px 32px;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-box h1 {
  margin: 0 0 4px;
  font-size: 28px;
}

.login-box p {
  margin: 0 0 8px;
}

.login-box form {
  display: flex;
  flex-direction: column;
  gap: 8px;              /* separación entre inputs y botón */
}

.login-box input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #4b5563;
  background: #020617;
  color: #e5e7eb;
}

.login-box input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 1px #8b5cf6;
}

.login-box .btn.btn-primary {
  width: 100%;           /* botón Entrar/Registrarme a lo ancho */
  justify-content: center;
}

.login-box .hint {
  font-size: 0.9rem;
}

.link-button {
  border: none;
  background: none;
  color: #a855f7;
  cursor: pointer;
  padding: 0 4px;
}

.link-button:hover {
  text-decoration: underline;
}

.error {
  color: #f97373;
  font-size: 0.9rem;
}

.ok {
  color: #4ade80;
  font-size: 0.9rem;
}

.highlight-email {
  font-weight: 600;
}

.verify-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Logo en login */
.login-logo {
  width: 96px;
  height: auto;
  margin: 0 auto 12px;
  display: block;
}

/* Logo en la barra superior */
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brand-logo {
  height: 28px;   /* ajusta si lo quieres más grande/pequeño */
  width: auto;
}