:root{
    --navy:#07152f;
    --navy-2:#0b1f4d;
    --blue:#1d4ed8;
    --blue-2:#2563eb;
    --blue-3:#60a5fa;
    --cyan:#06b6d4;
    --purple:#8b5cf6;
    --orange:#f59e0b;
    --orange-2:#ff5e3a;
    --white:#ffffff;
    --shadow-xl:0 30px 70px rgba(15,23,42,.16);
    --shadow-lg:0 18px 36px rgba(15,23,42,.10);
    --shadow-md:0 12px 24px rgba(15,23,42,.08);
}

html[data-theme="light"]{
    --bg-grad-1:#edf4ff;
    --bg-grad-2:#f7faff;
    --bg-grad-3:#deefff;
    --text:#0f172a;
    --muted:#66758d;
    --glass:rgba(255,255,255,.22);
    --glass-border:rgba(255,255,255,.42);
    --panel-card:rgba(255,255,255,.70);
    --chip-bg:rgba(255,255,255,.40);
    --line:#dbeafe;
    --card-bg:#ffffff;
}

html[data-theme="dark"]{
    --bg-grad-1:#07111f;
    --bg-grad-2:#0b1730;
    --bg-grad-3:#101f40;
    --text:#edf4ff;
    --muted:#aab8d1;
    --glass:rgba(14,20,38,.50);
    --glass-border:rgba(130,156,255,.18);
    --panel-card:rgba(17,28,52,.82);
    --chip-bg:rgba(255,255,255,.06);
    --line:rgba(130,156,255,.18);
    --card-bg:#111c34;
    --shadow-xl:0 30px 70px rgba(0,0,0,.34);
    --shadow-lg:0 18px 36px rgba(0,0,0,.28);
    --shadow-md:0 12px 24px rgba(0,0,0,.22);
}

*{ box-sizing:border-box; }

html,body{
    margin:0;
    padding:0;
    min-height:100%;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 10% 10%, rgba(139,92,246,.14), transparent 20%),
        radial-gradient(circle at 88% 12%, rgba(96,165,250,.16), transparent 22%),
        radial-gradient(circle at 82% 88%, rgba(6,182,212,.12), transparent 18%),
        linear-gradient(135deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 48%, var(--bg-grad-3) 100%);
    overflow-x:hidden;
    transition:background .3s ease,color .3s ease;
}

body::before,
body::after{
    content:"";
    position:fixed;
    border-radius:50%;
    filter:blur(90px);
    z-index:0;
    pointer-events:none;
    opacity:.30;
    animation: floatGlow 11s ease-in-out infinite;
}
body::before{ width:360px; height:360px; left:-90px; top:30px; background:linear-gradient(135deg, var(--purple), var(--cyan)); }
body::after{ width:420px; height:420px; right:-120px; bottom:0; background:linear-gradient(135deg, var(--blue-3), var(--purple)); animation-delay:-5s; }
@keyframes floatGlow{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-18px) scale(1.08); } }

.mesh{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:34px 34px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.24), transparent 82%);
    opacity:.22;
}

.glass{
    background:var(--glass);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border:1px solid var(--glass-border);
    box-shadow:var(--shadow-lg);
    position:relative;
    overflow:hidden;
}
.glass::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,.18), transparent 28%, transparent 72%, rgba(255,255,255,.06));
    pointer-events:none;
}

.theme-toggle{
    border:1px solid var(--glass-border);
    border-radius:18px;
    background:var(--chip-bg);
    color:var(--text);
    padding:10px 14px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.page-wrap{
    position:relative;
    z-index:1;
    padding:18px 0 30px;
}

.shell{
    max-width:1450px;
    margin:0 auto;
    padding:0 16px;
}

.app-grid{
    display:grid;
    grid-template-columns:290px 1fr;
    gap:22px;
    align-items:start;
}

.sidebar{
    border-radius:30px;
    padding:18px;
    position:sticky;
    top:18px;
}

.brand-box{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px;
    border-radius:22px;
    background:var(--chip-bg);
    border:1px solid var(--glass-border);
    margin-bottom:18px;
}

.brand-box img{
    width:56px;
    height:56px;
    object-fit:contain;
    border-radius:16px;
    background:linear-gradient(135deg, var(--navy-2), var(--blue));
    padding:8px;
    box-shadow:0 10px 20px rgba(29,78,216,.16);
}

.brand-box h1{
    font-size:1.08rem;
    margin:0;
    font-weight:900;
    color:var(--text);
}

.brand-box p{
    margin:3px 0 0;
    font-size:.78rem;
    color:var(--muted);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.side-title{
    font-size:.78rem;
    font-weight:900;
    color:var(--muted);
    letter-spacing:.10em;
    text-transform:uppercase;
    margin:16px 0 10px;
    padding-left:6px;
}

.nav-campus{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.nav-campus a{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--text);
    font-weight:800;
    border-radius:18px;
    padding:14px;
    background:var(--chip-bg);
    border:1px solid var(--glass-border);
    transition:.25s ease;
}

.nav-campus a:hover,
.nav-campus a.active{
    transform:translateX(4px);
    background:linear-gradient(135deg, rgba(29,78,216,.95), rgba(79,70,229,.95));
    color:#fff;
    box-shadow:0 14px 24px rgba(37,99,235,.18);
}

.user-box{
    margin-top:18px;
    padding:18px;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(7,21,47,.96), rgba(29,78,216,.92));
    color:#fff;
    box-shadow:var(--shadow-md);
}

.user-box .mini{
    font-size:.78rem;
    opacity:.82;
    text-transform:uppercase;
    letter-spacing:.10em;
    font-weight:800;
    margin-bottom:8px;
}

.user-box .name{
    font-size:1.15rem;
    font-weight:900;
    line-height:1.2;
    margin-bottom:6px;
}

.user-box .role{
    font-size:.92rem;
    opacity:.88;
    margin-bottom:12px;
}

.user-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.user-chips span{
    padding:8px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
    font-size:.74rem;
    font-weight:800;
}

.main{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.topbar{
    border-radius:28px;
    padding:16px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.topbar-left h2{
    margin:0;
    font-size:1.35rem;
    font-weight:900;
    color:var(--text);
}

.topbar-left p{
    margin:4px 0 0;
    color:var(--muted);
    font-weight:700;
}

.topbar-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn-campus{
    border:none;
    border-radius:18px;
    padding:12px 18px;
    font-weight:900;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:.25s ease;
    cursor:pointer;
}

.btn-campus.primary{
    color:#fff;
    background:linear-gradient(135deg, var(--blue), var(--blue-2));
    box-shadow:0 14px 22px rgba(37,99,235,.20);
}

.btn-campus.soft{
    color:var(--text);
    background:var(--chip-bg);
    border:1px solid var(--glass-border);
}

.btn-campus:hover{
    transform:translateY(-2px);
}

.hero{
    border-radius:34px;
    overflow:hidden;
    box-shadow:var(--shadow-xl);
    background:var(--panel-card);
}

.hero-top{
    position:relative;
    background:
        radial-gradient(circle at 12% 22%, rgba(255,255,255,.08), transparent 15%),
        radial-gradient(circle at 84% 16%, rgba(255,255,255,.08), transparent 16%),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 44%, var(--blue) 100%);
    color:#fff;
    padding:34px;
    overflow:hidden;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:22px;
    align-items:center;
    position:relative;
    z-index:1;
}

.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:900;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.14);
    margin-bottom:14px;
}

.hero-title{
    font-size:clamp(2rem, 4vw, 4rem);
    line-height:1.02;
    font-weight:900;
    margin-bottom:10px;
}

.hero-text{
    color:rgba(255,255,255,.88);
    line-height:1.75;
    max-width:760px;
    margin-bottom:20px;
}

.progress-box{
    display:grid;
    gap:14px;
}

.progress-card{
    border-radius:24px;
    padding:18px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(12px);
}

.progress-card h4{
    margin:0 0 12px;
    font-size:1rem;
    font-weight:900;
}

.linebar{
    width:100%;
    height:14px;
    border-radius:999px;
    background:rgba(255,255,255,.15);
    overflow:hidden;
    margin-bottom:10px;
}

.linebar span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(135deg, #22c55e, #06b6d4);
}

.progress-meta{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:rgba(255,255,255,.84);
    font-weight:800;
    font-size:.9rem;
}

.quick-stats{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:18px;
}

.stat-card{
    border-radius:26px;
    padding:22px 18px;
    text-align:center;
    background:var(--panel-card);
}

.stat-card strong{
    display:block;
    font-size:2rem;
    color:var(--text);
    font-weight:900;
    line-height:1;
    margin-bottom:8px;
}

.stat-card span{
    color:var(--muted);
    font-weight:800;
    font-size:.92rem;
}

.section-card{
    border-radius:32px;
    padding:24px;
    background:var(--panel-card);
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:14px;
    margin-bottom:18px;
}

.section-head h3{
    margin:0;
    font-size:1.5rem;
    font-weight:900;
    color:var(--text);
}

.section-head p{
    margin:6px 0 0;
    color:var(--muted);
    font-weight:700;
}

.courses-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
}

.course-card{
    border-radius:28px;
    overflow:hidden;
    background:var(--card-bg);
    border:1px solid var(--glass-border);
    box-shadow:var(--shadow-md);
    transition:.25s ease;
}

.course-card:hover{
    transform:translateY(-5px);
}

.course-top{
    position:relative;
    height:210px;
    overflow:hidden;
}

.course-top img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.course-card:hover .course-top img{
    transform:scale(1.05);
}

.course-top::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(7,21,47,.62), rgba(7,21,47,.08));
}

.course-tag{
    position:absolute;
    left:16px;
    bottom:16px;
    z-index:2;
    padding:9px 14px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:900;
    color:#fff;
    background:linear-gradient(135deg, var(--orange), var(--orange-2));
}

.course-body{
    padding:22px;
}

.course-title{
    font-size:1.08rem;
    font-weight:900;
    color:var(--text);
    margin-bottom:8px;
}

.course-text{
    color:var(--muted);
    line-height:1.65;
    font-size:.93rem;
    margin-bottom:14px;
}

.progress-mini{
    margin-top:12px;
}

.progress-mini .label{
    display:flex;
    justify-content:space-between;
    font-size:.88rem;
    font-weight:800;
    color:var(--text);
    margin-bottom:7px;
}

.progress-mini .bar{
    width:100%;
    height:11px;
    border-radius:999px;
    background:rgba(191,212,247,.55);
    overflow:hidden;
}

.progress-mini .bar span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(135deg, var(--blue), var(--cyan));
}

.footer-box{
    text-align:center;
    color:var(--muted);
    font-weight:700;
    padding:20px 0;
}

@media (max-width: 991.98px){
    .app-grid,
    .hero-grid{
        grid-template-columns:1fr;
    }

    .sidebar{
        position:relative;
        top:auto;
    }

    .quick-stats{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .courses-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 767.98px){
    .topbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .topbar-actions{
        width:100%;
    }

    .btn-campus{
        width:100%;
        justify-content:center;
    }

    .hero-top{
        padding:24px 18px;
    }

    .quick-stats,
    .courses-grid{
        grid-template-columns:1fr;
    }

    .section-card{
        padding:18px;
    }

    .sidebar{
        border-radius:24px;
    }
}
/* =========================================================
   LOGIN HOMOLOGADO - SONORA GRILL ACADEMY
   ========================================================= */
.login-page{
    position:relative;
    z-index:1;
    min-height:100vh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px 18px;
}

.login-shell{
    width:min(1180px, 100%);
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);
    gap:24px;
    align-items:stretch;
}

.brand-panel,
.login-panel{
    min-height:650px;
    border-radius:34px;
    overflow:hidden;
    position:relative;
    box-shadow:var(--shadow-xl);
}

.brand-panel{
    background:
        linear-gradient(135deg, rgba(7,21,47,.95), rgba(29,78,216,.76)),
        radial-gradient(circle at 15% 18%, rgba(245,158,11,.45), transparent 28%),
        radial-gradient(circle at 82% 74%, rgba(6,182,212,.35), transparent 30%);
    color:#fff;
    padding:36px;
    display:flex;
    align-items:stretch;
}

.brand-panel::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(120deg, rgba(255,255,255,.16), transparent 32%, transparent 70%, rgba(255,255,255,.06)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 14px);
    pointer-events:none;
}

.brand-content{
    position:relative;
    z-index:2;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:30px;
}

.brand-top img{
    width:98px;
    max-height:98px;
    object-fit:contain;
    margin-bottom:28px;
    border-radius:26px;
    background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.28);
    padding:12px;
    box-shadow:0 22px 42px rgba(0,0,0,.20);
}

.brand-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.20);
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size:.78rem;
    margin-bottom:18px;
}

.brand-title{
    font-size:clamp(2rem, 4vw, 4.6rem);
    line-height:.98;
    letter-spacing:-.06em;
    font-weight:950;
    max-width:680px;
    margin-bottom:20px;
}

.brand-text{
    max-width:700px;
    font-size:1.05rem;
    line-height:1.65;
    color:rgba(255,255,255,.82);
    font-weight:600;
}

.brand-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
}

.brand-mini{
    min-height:112px;
    border-radius:24px;
    padding:18px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.brand-mini i{
    font-size:1.45rem;
    margin-bottom:10px;
    display:block;
    color:#fff;
}

.brand-mini strong{
    display:block;
    font-size:1rem;
    font-weight:950;
    color:#fff;
}

.brand-mini span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.74);
    font-size:.9rem;
    font-weight:600;
}

.login-panel{
    background:var(--panel-card);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(24px) saturate(165%);
    -webkit-backdrop-filter:blur(24px) saturate(165%);
    display:flex;
    align-items:center;
}

.login-inner{
    position:relative;
    z-index:2;
    width:100%;
    padding:42px;
}

.login-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:30px;
}

.login-head h2{
    margin:0;
    font-size:2.2rem;
    letter-spacing:-.04em;
    font-weight:950;
    color:var(--text);
}

.login-head p{
    margin:8px 0 0;
    color:var(--muted);
    font-weight:700;
}

.login-panel form{
    margin-top:8px;
}

.login-panel .form-label{
    font-weight:900;
    color:var(--text);
    margin-bottom:8px;
}

.soft-input,
.login-panel .form-control{
    min-height:56px;
    border-radius:18px !important;
    border:1px solid var(--glass-border) !important;
    background:rgba(255,255,255,.82) !important;
    color:#0f172a !important;
    padding:14px 16px !important;
    font-weight:700;
    box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
}

html[data-theme="dark"] .soft-input,
html[data-theme="dark"] .login-panel .form-control{
    background:rgba(255,255,255,.92) !important;
    color:#0f172a !important;
}

.soft-input:focus,
.login-panel .form-control:focus{
    border-color:var(--blue-3) !important;
    box-shadow:0 0 0 .25rem rgba(96,165,250,.24), 0 16px 28px rgba(29,78,216,.10) !important;
}

.btn-login-main{
    width:100%;
    border:0;
    min-height:58px;
    border-radius:18px;
    color:#fff;
    font-weight:950;
    letter-spacing:.01em;
    background:linear-gradient(135deg, var(--blue), #4f46e5);
    box-shadow:0 18px 30px rgba(37,99,235,.26);
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
    display:inline-flex;
    justify-content:center;
    align-items:center;
}

.btn-login-main:hover{
    transform:translateY(-2px);
    filter:saturate(1.08);
    box-shadow:0 24px 42px rgba(37,99,235,.34);
}

.helper-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:18px;
    color:var(--muted);
    font-weight:800;
    flex-wrap:wrap;
}

.helper-row a{
    color:var(--blue-2);
    text-decoration:none;
    font-weight:900;
}

.helper-row a:hover{ text-decoration:underline; }

.login-footer{
    margin-top:32px;
    padding-top:18px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-weight:800;
    text-align:center;
}

.alert-soft{
    border:0;
    border-radius:18px;
    font-weight:850;
    box-shadow:var(--shadow-md);
}

@media (max-width: 1050px){
    .login-shell{
        grid-template-columns:1fr;
        max-width:680px;
    }
    .brand-panel{ min-height:auto; }
    .login-panel{ min-height:auto; }
}

@media (max-width: 576px){
    .login-page{ padding:18px 12px; align-items:flex-start; }
    .brand-panel,
    .login-panel{ border-radius:24px; }
    .brand-panel{ padding:24px; }
    .login-inner{ padding:24px; }
    .brand-grid{ grid-template-columns:1fr; }
    .login-head{ flex-direction:column; }
    .theme-toggle{ width:100%; justify-content:center; }
}

/* =========================================================
   IMAGEN DE USUARIO EN PANEL
   ========================================================= */
.topbar-user{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
}

.user-avatar{
    width:72px;
    height:72px;
    flex:0 0 72px;
    border-radius:24px;
    object-fit:cover;
    background:linear-gradient(135deg, var(--navy-2), var(--blue));
    border:3px solid rgba(255,255,255,.72);
    box-shadow:0 16px 30px rgba(15,23,42,.16);
}

.user-box-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.user-avatar-sm{
    width:54px;
    height:54px;
    flex:0 0 54px;
    border-radius:18px;
    object-fit:cover;
    background:rgba(255,255,255,.14);
    border:2px solid rgba(255,255,255,.28);
    box-shadow:0 12px 20px rgba(0,0,0,.18);
}

@media (max-width: 767.98px){
    .topbar-user{
        width:100%;
        align-items:flex-start;
    }

    .user-avatar{
        width:58px;
        height:58px;
        flex-basis:58px;
        border-radius:20px;
    }
}

/* =========================
   MODO ADMIN / ALUMNO
   ========================= */
.mode-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:11px 12px;
    border-radius:16px;
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:16px 0 14px;
    border:1px solid var(--glass-border);
}
.mode-badge.admin{
    color:#78350f;
    background:linear-gradient(135deg, rgba(251,191,36,.35), rgba(245,158,11,.16));
}
.mode-badge.student{
    color:#1d4ed8;
    background:linear-gradient(135deg, rgba(96,165,250,.28), rgba(59,130,246,.12));
}
[data-theme="dark"] .mode-badge.admin{
    color:#fde68a;
    background:linear-gradient(135deg, rgba(251,191,36,.22), rgba(245,158,11,.10));
}
[data-theme="dark"] .mode-badge.student{
    color:#bfdbfe;
}
.nav-campus-secondary{
    margin-bottom:10px;
}
.panel-mode-label{
    font-weight:900;
    color:var(--blue-2);
}
.admin-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}
.admin-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:150px;
    padding:22px;
    border-radius:24px;
    text-decoration:none;
    color:var(--text);
    background:var(--card-bg);
    border:1px solid var(--glass-border);
    box-shadow:var(--shadow-md);
    transition:.25s ease;
}
.admin-card:hover{
    transform:translateY(-4px);
    color:var(--text);
    box-shadow:0 18px 34px rgba(37,99,235,.18);
}
.admin-card i{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(135deg, rgba(29,78,216,.95), rgba(79,70,229,.95));
    font-size:1.15rem;
}
.admin-card strong{
    font-size:1.05rem;
    font-weight:900;
}
.admin-card span{
    color:var(--muted);
    line-height:1.45;
    font-weight:700;
    font-size:.9rem;
}
@media (max-width: 980px){
    .admin-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   MODULO: USUARIOS / ALUMNOS
   ========================================================= */
.admin-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:30px;
    border-radius:28px;
    margin-bottom:22px;
    background:linear-gradient(135deg, rgba(15,23,42,.96), rgba(37,99,235,.88));
    color:#fff;
    overflow:hidden;
}
.admin-hero h1{
    margin:14px 0 8px;
    font-size:clamp(2rem, 4vw, 3.4rem);
    font-weight:950;
    letter-spacing:-.04em;
}
.admin-hero p{
    margin:0;
    color:rgba(255,255,255,.84);
    font-weight:650;
    max-width:720px;
}
.pill-soft{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.18);
    font-weight:900;
    font-size:.86rem;
}
.admin-hero-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(130px,1fr));
    gap:12px;
    min-width:310px;
}
.admin-hero-stats div{
    padding:18px;
    border-radius:22px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    text-align:center;
}
.admin-hero-stats strong{
    display:block;
    font-size:2.2rem;
    line-height:1;
    font-weight:950;
}
.admin-hero-stats span{
    display:block;
    margin-top:8px;
    font-weight:800;
    color:rgba(255,255,255,.78);
    font-size:.86rem;
}
.filters-grid{
    display:grid;
    grid-template-columns:1.4fr repeat(4, minmax(150px, 1fr)) auto;
    gap:14px;
    align-items:end;
}
.filter-field label{
    display:block;
    margin-bottom:7px;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    font-weight:950;
}
.filter-field input,
.filter-field select{
    width:100%;
    height:48px;
    border-radius:16px;
    padding:0 14px;
    border:1px solid var(--glass-border);
    color:var(--text);
    background:var(--card-bg);
    font-weight:750;
    outline:none;
}
.filter-field input:focus,
.filter-field select:focus{
    border-color:rgba(37,99,235,.55);
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.btn-primary-campus,
.btn-soft{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:48px;
    border:0;
    border-radius:16px;
    padding:0 18px;
    text-decoration:none;
    font-weight:950;
    white-space:nowrap;
}
.btn-primary-campus{
    color:#fff;
    background:linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow:0 14px 24px rgba(37,99,235,.25);
}
.btn-soft{
    color:var(--text);
    background:var(--card-bg);
    border:1px solid var(--glass-border);
}
.campus-table-wrap{
    border-radius:22px;
    overflow:hidden;
    border:1px solid var(--glass-border);
}
.campus-table{
    margin:0;
    color:var(--text);
}
.campus-table thead th{
    background:rgba(37,99,235,.09);
    color:var(--muted);
    border-bottom:1px solid var(--glass-border);
    font-size:.76rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:950;
    padding:16px;
}
.campus-table tbody td{
    border-bottom:1px solid var(--glass-border);
    padding:14px 16px;
    font-weight:700;
    color:var(--text);
}
.campus-table tbody tr:last-child td{ border-bottom:0; }
.student-cell{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:260px;
}
.student-cell img{
    width:48px;
    height:48px;
    border-radius:16px;
    object-fit:cover;
    border:2px solid rgba(37,99,235,.25);
    background:#fff;
}
.student-cell strong{
    display:block;
    font-weight:950;
    line-height:1.15;
}
.student-cell span{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:.82rem;
    font-weight:750;
}
.code-badge,
.status-badge{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:7px 11px;
    font-weight:950;
    font-size:.8rem;
}
.code-badge{
    color:#1d4ed8;
    background:rgba(37,99,235,.12);
}
.status-badge.ok{
    color:#047857;
    background:rgba(16,185,129,.14);
}
.status-badge.neutral{
    color:#92400e;
    background:rgba(245,158,11,.16);
}
.empty-state{
    text-align:center;
    color:var(--muted) !important;
    font-weight:900;
    padding:34px !important;
}
[data-theme="dark"] .filter-field input,
[data-theme="dark"] .filter-field select{
    background:rgba(15,23,42,.72);
}
[data-theme="dark"] .campus-table thead th{
    background:rgba(255,255,255,.06);
}
[data-theme="dark"] .campus-table tbody td{
    color:rgba(255,255,255,.90);
}
[data-theme="dark"] .student-cell img{
    background:rgba(255,255,255,.08);
}
@media (max-width:1200px){
    .filters-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .filter-wide{ grid-column:span 2; }
    .filter-actions{ grid-column:span 2; }
    .filter-actions .btn-primary-campus{ width:100%; }
    .admin-hero{ flex-direction:column; align-items:stretch; }
    .admin-hero-stats{ min-width:0; }
}
@media (max-width:700px){
    .filters-grid{ grid-template-columns:1fr; }
    .filter-wide,.filter-actions{ grid-column:auto; }
    .admin-hero{ padding:22px; }
    .admin-hero-stats{ grid-template-columns:1fr; }
}