/* Layout general de páginas del aula */
.page-shell{
    max-width:1120px;
    margin:0 auto;
    padding:32px 16px 72px;
  }
  
  .page-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:24px;
  }
  
  .page-kicker{
    display:inline-block;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#9ca3af;
    margin-bottom:4px;
  }
  
  .page-title{
    font-family:"Playfair Display",serif;
    font-size:1.9rem;
    font-weight:700;
    letter-spacing:-.03em;
    margin:0;
    color:#0f172a;
  }
  
  .page-subtitle{
    margin:4px 0 0;
    font-size:.95rem;
    color:#6b7280;
  }
  
  /* Grid de cursos */
  .course-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
  }
  
  .course-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:18px 18px 16px;
    border-radius:18px;
    text-decoration:none;
    background:
      radial-gradient(circle at 0 0,rgba(178,202,227,.18),transparent 55%),
      #020617;
    border:1px solid rgba(148,163,184,.35);
    box-shadow:0 18px 40px rgba(15,23,42,.45);
    transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
  }
  
  .course-card:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 50px rgba(15,23,42,.55);
    border-color:rgba(248,250,252,.7);
  }
  
  .course-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
    font-size:.78rem;
    color:#9ca3af;
  }
  
  .course-program{
    font-weight:500;
  }
  
  .course-code{
    opacity:.85;
  }
  
  .course-name{
    margin:4px 0 10px;
    font-size:1rem;
    font-weight:600;
    color:#e5e7eb;
  }
  
  .course-progress{
    margin-top:auto;
  }
  
  .course-progress-bar{
    height:6px;
    border-radius:999px;
    background:#020617;
    border:1px solid #111827;
    overflow:hidden;
  }
  
  .course-progress-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#eab308,#f97316,#fb7185);
  }
  
  .course-progress-label{
    display:block;
    margin-top:4px;
    font-size:.78rem;
    color:#9ca3af;
  }
  
  /* Pills & headings */
  .page-header-aside{
    display:flex;
    align-items:center;
    gap:8px;
  }
  
  .pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:.3rem .7rem;
    border-radius:999px;
    font-size:.78rem;
    font-weight:500;
  }
  
  .pill-soft{
    background:rgba(37,99,235,.08);
    color:#1d4ed8;
    border:1px solid rgba(37,99,235,.25);
  }
  
  .section-heading{
    font-size:1rem;
    font-weight:600;
    margin:4px 0 10px;
    color:#0f172a;
  }
  
  /* Lista de lecciones */
  .lesson-list{
    list-style:none;
    margin:8px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  
  .lesson-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    border-radius:14px;
    text-decoration:none;
    background:#020617;
    border:1px solid rgba(148,163,184,.35);
    transition:transform .2s ease,border-color .2s ease,background .2s ease;
  }
  
  .lesson-item:hover{
    transform:translateY(-2px);
    border-color:rgba(248,250,252,.9);
    background:#020617;
  }
  
  .lesson-main{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  
  .lesson-meta{
    font-size:.78rem;
    color:#9ca3af;
  }
  
  .lesson-title{
    font-size:.95rem;
    font-weight:500;
    color:#e5e7eb;
  }
  
  .lesson-extra{
    font-size:.78rem;
    color:#9ca3af;
    white-space:nowrap;
  }
  
  .lesson-date{
    opacity:.9;
  }
  
  /* Empty state */
  .empty-state{
    margin-top:20px;
    padding:22px 18px;
    border-radius:16px;
    background:#f9fafb;
    border:1px dashed #cbd5f5;
  }
  
  .empty-state h2{
    margin:0 0 4px;
    font-size:1rem;
    font-weight:600;
    color:#111827;
  }
  
  .empty-state p{
    margin:0;
    font-size:.9rem;
    color:#6b7280;
  }
  
  .btn-filter {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #4b5563;
    background: #111827;
    color: #e5e7eb;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .btn-filter:hover {
    background: #1f2937;
    border-color: #6366f1;
    color: #f9fafb;
  }