#app{display:none; min-height:100dvh;}
  .shell{display:grid; grid-template-columns:250px 1fr; min-height:100dvh;}
  .sidebar{background:linear-gradient(180deg,var(--blue-900),#16305a); color:#e6edf7; padding:24px 16px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100dvh;}
  .brand{display:flex;align-items:center;gap:10px;padding:6px 8px 22px;}
  .brand .mark{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;overflow:hidden;}
  .brand .mark img{width:26px;height:26px;object-fit:contain;}
  .brand .txt{font-weight:700; font-size:15.5px; letter-spacing:.1em; text-transform:uppercase;}
  .brand .txt small{display:block;font-weight:400;font-size:11px;color:#9fb3d6;letter-spacing:0;text-transform:none;}
  .nav-item{display:flex;align-items:center;gap:11px; padding:10px 12px; border-radius:10px; color:#c8d7ee; font-size:14px; font-weight:500; background:transparent; border:none; text-align:left; transition:background .15s, color .15s;}
  .nav-item .ico{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .nav-item:hover{background:rgba(255,255,255,.08); color:#fff;}
  .nav-item.active{background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
  .nav-spacer{flex:1;}
  .side-foot{border-top:1px solid rgba(255,255,255,.1); padding-top:14px; display:flex; align-items:center; gap:10px;}
  .side-avatar{width:34px;height:34px;border-radius:50%;background:var(--blue-400);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#0b1c34;flex-shrink:0;}
  .side-foot .who{font-size:13px;font-weight:600;color:#fff; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .side-foot .who small{color:#9fb3d6;font-weight:400; display:block;}
  .logout-btn{margin-left:auto;background:transparent;border:none;color:#9fb3d6;padding:6px;border-radius:8px; flex-shrink:0;}
  .logout-btn:hover{color:#fff;background:rgba(255,255,255,.1);}
  .mobile-logout{display:none; margin-left:0; align-self:center; flex-shrink:0;}

  main{padding:30px 38px 60px; max-width:1180px; width:100%;}
  .topbar{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px;}
  .topbar h2{font-size:24px; margin:0 0 4px; font-weight:800; letter-spacing:-.02em;}
  .topbar p{margin:0; color:var(--ink-500); font-size:14px;}
  .stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;}
  .stat-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s;}
  .stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
  .stat-card .lbl{font-size:12.5px; color:var(--ink-500); font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
  .stat-card .val{font-size:30px; font-weight:800; color:var(--blue-900); margin-top:6px; letter-spacing:-.02em;}
  .section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap;}
  .section-head h3{font-size:17px; margin:0; font-weight:700;}
  .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .select-filter{padding:9px 12px; border-radius:9px; border:1.5px solid var(--border); background:#fff; font-size:13.5px; color:var(--ink-700);}

  /* Buscador de clase (embudo por nombre) */
  .class-search-wrap{position:relative; display:flex; align-items:center;}
  .class-search-ico{position:absolute; left:12px; font-size:12.5px; opacity:.55; pointer-events:none;}
  .class-search-input{
    padding:9px 32px 9px 32px; border-radius:9px; border:1.5px solid var(--border); background:#fff;
    font-size:13.5px; color:var(--ink-900); width:190px; transition:border-color .15s, box-shadow .15s, width .2s;
  }
  .class-search-input:focus{outline:none; border-color:var(--blue-600); box-shadow:0 0 0 4px var(--blue-100); width:230px;}
  .class-search-input::placeholder{color:var(--ink-500);}
  .class-search-clear{
    position:absolute; right:6px; width:20px; height:20px; border:none; border-radius:6px; background:transparent;
    color:var(--ink-500); font-size:11px; display:none; align-items:center; justify-content:center; cursor:pointer;
  }
  .class-search-clear.show{display:flex;}
  .class-search-clear:hover{background:var(--surface); color:var(--ink-700);}
  .card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease;}
  .card:hover{box-shadow:var(--shadow-md);}