/* ── Admin Layout ───────────────────────────────────────────────────────────── */
.admin-body { display: flex; min-height: 100vh; background: #f1f5f9; }

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.admin-sidebar { width: 240px; background: #1e293b; color: white; display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-brand { padding: 1.5rem; font-size: 1.3rem; font-weight: 700; border-bottom: 1px solid #334155; }
.sidebar-nav { display: flex; flex-direction: column; padding: 1rem 0; }
.sidebar-nav a { padding: .85rem 1.5rem; color: rgba(255,255,255,.75); font-weight: 500; transition: all .2s; display: flex; align-items: center; gap: .6rem; }
.sidebar-nav a:hover { background: #334155; color: white; }
.logout-link { margin-top: auto; color: #f87171 !important; }

/* ── Content area ───────────────────────────────────────────────────────────── */
.admin-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.admin-topbar { background: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.admin-topbar h2 { font-size: 1.3rem; }
.admin-main { padding: 2rem; overflow-y: auto; }

/* ── Stats ──────────────────────────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background: white; border-radius: 10px; padding: 1.5rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.stat-icon { font-size: 2.5rem; }
.stat-num { font-size: 2rem; font-weight: 700; color: var(--primary, #2563eb); }
.stat-label { color: #64748b; font-size: .9rem; }
.quick-links { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Table ──────────────────────────────────────────────────────────────────── */
.tabla { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.tabla th { background: #1e293b; color: white; padding: .9rem 1rem; text-align: left; font-size: .88rem; }
.tabla td { padding: .8rem 1rem; border-bottom: 1px solid #f1f5f9; font-size: .9rem; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }
.tabla tr:hover td { background: #f8fafc; }
.acciones { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ── Modal ──────────────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: white; border-radius: 12px; padding: 2rem; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; }
.modal-lg { max-width: 680px; }
.modal h3 { font-size: 1.3rem; margin-bottom: 1.5rem; color: #1e293b; }
.modal-acciones { display: flex; gap: 1rem; margin-top: 1.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-full { grid-column: 1 / -1; }

/* ── Login ──────────────────────────────────────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #1e293b, #2563eb); }
.login-container { width: 100%; max-width: 400px; padding: 1rem; }
.login-card { background: white; border-radius: 16px; padding: 2.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.login-card h1 { font-size: 1.8rem; margin-bottom: .5rem; text-align: center; }
.login-card > p { text-align: center; color: #64748b; margin-bottom: 1.5rem; }

/* ── Responsive admin ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-body { flex-direction: column; }
  .admin-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
  .tabla { font-size: .8rem; }
}