/* ============================================================
   ALIENSBA ADMIN — extensión liviana sobre styles.css
   Reutiliza las variables y clases del front (--surface, --green,
   --radius, .btn, .card, .pill, .icon-btn) en vez de un tema nuevo.
   ============================================================ */

.admin-body{ min-height:100vh; }

.admin-badge{
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--violet); background:rgba(155,107,255,0.12); border:1px solid var(--border);
  padding:2px 8px; border-radius:999px; vertical-align:middle;
}

.admin-email{ font-size:.82rem; color:var(--text-dim); margin-right:6px; }

/* ---------- Login ---------- */
.admin-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background: radial-gradient(ellipse at 50% 20%, #0e1f16 0%, #05070a 70%);
}
.admin-login__card{ max-width:420px; width:100%; }
.admin-back-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-size:.82rem; color:var(--text-mute);
}
.admin-back-link:hover{ color:var(--green); }

/* ---------- Forms ---------- */
.admin-form{ display:flex; flex-direction:column; gap:14px; text-align:left; margin-top:18px; }
.admin-form--wide{ max-width:560px; }
.admin-form h3{ font-size:.95rem; color:var(--green); margin:10px 0 -4px; }
.admin-field{ display:flex; flex-direction:column; gap:6px; }
.admin-field span{ font-size:.8rem; color:var(--text-mute); }
.admin-field input, .admin-field select, .admin-field textarea{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:10px 12px; color:var(--text); font-family:inherit; font-size:.9rem;
  outline:none; transition: border-color var(--transition);
}
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus{
  border-color: var(--border-strong);
}
.admin-field input[type="color"]{ padding:4px; height:40px; }
.admin-field-row{ display:flex; gap:14px; }
.admin-field-row .admin-field{ flex:1; }
.admin-checkbox{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-dim); }

.admin-image-preview{ display:flex; align-items:center; gap:14px; }
.admin-image-preview img{
  width:84px; height:84px; object-fit:cover; border-radius: var(--radius-sm);
  border:1px solid var(--border); background: var(--surface-2);
}

.admin-image-gallery{ display:flex; flex-wrap:wrap; gap:10px; }
.admin-image-gallery__item{ position:relative; width:72px; height:72px; }
.admin-image-gallery__item img{
  width:100%; height:100%; object-fit:cover; border-radius: var(--radius-sm);
  border:1px solid var(--border);
}
.admin-image-gallery__item button{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  background:#ff6b6b; color:#fff; border:none; font-size:.7rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

.admin-video-list{ display:flex; flex-direction:column; gap:8px; margin:0; padding:0; }
.admin-video-list li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:8px 12px; font-size:.8rem; color:var(--text-dim);
}
.admin-video-list li span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-video-list li button{
  background:none; border:none; color:var(--text-mute); flex-shrink:0; font-size:.85rem;
}
.admin-video-list li button:hover{ color:#ff6b6b; }

.admin-error{ color:#ff8080; font-size:.85rem; margin:0; }
.admin-success{ color:var(--green); font-size:.85rem; margin:0; }

.admin-stats-fields{ display:flex; flex-direction:column; gap:10px; }
.admin-stat-field{ display:flex; gap:10px; }
.admin-stat-field input{ flex:1; }

/* ---------- Layout / tabs ---------- */
.admin-main{ padding:32px 24px 80px; }
#adminTabs{ justify-content:flex-start; margin-bottom:28px; }

.admin-panel__header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;
}
.admin-panel__header h2{ font-size:1.3rem; margin:0; }

/* ---------- Table ---------- */
.admin-table-wrap{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  overflow-x:auto;
}
.admin-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.admin-table th, .admin-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.admin-table th{ color:var(--text-mute); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.4px; }
.admin-table tr:last-child td{ border-bottom:none; }
.admin-table tr.is-inactive{ opacity:.45; }
.admin-table .admin-row-actions{ display:flex; gap:8px; justify-content:flex-end; }
.admin-table .admin-row-actions button{
  background:none; border:1px solid var(--border); color:var(--text-dim);
  width:32px; height:32px; border-radius:8px; font-size:.85rem;
}
.admin-table .admin-row-actions button:hover{ border-color:var(--green); color:var(--green); }
.admin-table .admin-row-actions button.admin-danger:hover{ border-color:#ff6b6b; color:#ff6b6b; }
.admin-swatch{ display:inline-block; width:16px; height:16px; border-radius:4px; margin-right:4px; vertical-align:middle; border:1px solid rgba(255,255,255,.2); }

/* ---------- Modal ---------- */
.admin-modal-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.6); backdrop-filter: blur(3px); padding:24px;
}
.admin-modal-overlay[hidden]{ display:none; }
.admin-modal{
  max-width:480px; width:100%; max-height:90vh; overflow-y:auto;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding:26px 26px 30px; animation: pop .3s ease;
}
.admin-modal__header{ display:flex; align-items:center; justify-content:space-between; }
.admin-modal__header h3{ margin:0; font-size:1.1rem; }
.admin-modal__actions{ margin-top:6px; }