:root {
    --dlg-bg: #0f1115;
    --dlg-sidebar: #16181d;
    --dlg-accent: #e0a527;
    --dlg-accent-dark: #b8860f;
    --dlg-text-muted: #9aa0a6;
    --dlg-border: #26292f;
    --dlg-card: #1a1d23;
}

body {
    background: #f4f5f7;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Login ---------- */
.login-page {
    background: var(--dlg-bg);
    min-height: 100vh;
}
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.login-card {
    background: var(--dlg-card);
    color: #fff;
    padding: 2.2rem;
    border-radius: 14px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.login-card .form-label { color: var(--dlg-text-muted); font-size: .85rem; }
.login-card .form-control { background:#0f1115; border:1px solid var(--dlg-border); color:#fff; }
.login-card .form-control:focus { border-color: var(--dlg-accent); box-shadow:0 0 0 .2rem rgba(224,165,39,.25); }
.login-logo { font-size: 2.6rem; }
.login-logo img { max-height: 64px; max-width: 100%; object-fit: contain; }

/* ---------- App shell ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--dlg-sidebar);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.2rem 1rem;
    border-bottom: 1px solid var(--dlg-border);
    font-weight: 700;
}
.sidebar-brand .logo { font-size: 1.6rem; }
.sidebar-brand img.logo { height: 28px; width: auto; max-width: 40px; object-fit: contain; }
.navbar-brand img.logo { height: 26px; width: auto; max-width: 40px; object-fit: contain; vertical-align: middle; margin-right: .3rem; }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: .75rem .5rem;
}
.sidebar-nav .nav-link {
    color: #d7d9dd;
    padding: .6rem .85rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .92rem;
    margin-bottom: .15rem;
}
.sidebar-nav .nav-link:hover {
    background: rgba(224,165,39,.12);
    color: var(--dlg-accent);
}
.sidebar-nav .nav-link.active {
    background: var(--dlg-accent);
    color: #14161a;
    font-weight: 600;
}

.sidebar-footer {
    padding: .9rem;
    border-top: 1px solid var(--dlg-border);
}
.user-chip { display:flex; align-items:center; gap:.6rem; }
.user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--dlg-accent); color:#14161a;
    display:flex; align-items:center; justify-content:center;
    font-weight:700;
}
.user-name { font-size: .85rem; font-weight:600; }
.user-role { font-size: .72rem; color: var(--dlg-text-muted); text-transform: capitalize; }

.main-area { flex: 1; min-width: 0; }
.topbar {
    display:flex; align-items:center; gap:.75rem;
    padding: .75rem 1rem; background:#fff; border-bottom:1px solid #e5e7eb;
    position: sticky; top:0; z-index: 10;
}
.content { padding: 1.5rem; max-width: 1400px; }

@media (max-width: 992px) {
    .sidebar {
        position: fixed;
        left: -260px;
        z-index: 1000;
        transition: left .2s ease;
    }
    .sidebar.open { left: 0; }
}

/* ---------- Componentes comunes ---------- */
.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    border: 1px solid #e9ebee;
    height: 100%;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; }
.stat-card .stat-label { font-size: .8rem; color: #6b7280; }

.card-panel {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e9ebee;
    padding: 1.25rem;
}

.table-alumnos td, .table-alumnos th { vertical-align: middle; }

.avatar-sm {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--dlg-accent); color:#14161a;
    display:flex; align-items:center; justify-content:center; font-weight:700;
    font-size: .85rem;
    object-fit: cover;
}

.badge-plan { background:#eef1f5; color:#374151; }