/* ============================================================
   Aula Virtual — IESTP Benjamín Franklin
   Sistema de diseño compartido con el sitio institucional y el
   panel administrativo (MoqueguaSoft). Misma paleta, tipografía
   y componentes que iestpbf.edu.pe/admin para que ambos productos
   se sientan como un mismo sistema.
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;background:#f0f2f5;color:#1c1917;line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit}
ul{list-style:none}
img{max-width:100%}

:root{
  --ag500:#f59e0b;--ag600:#d97706;--ag700:#92400e;--ag900:#78350f;
  --ag100:#fef3c7;--ag200:#fde68a;--ag300:#fcd34d;
  --ab500:#3b82f6;--ab600:#2563eb;--ab700:#1d4ed8;--ab900:#0e2370;
  --ab100:#dbeafe;--ab200:#bfdbfe;
  --t500:#14b8a6;--t100:#ccfbf1;--t700:#0d9488;
  --n900:#111827;--n800:#1f2937;--n700:#374151;--n600:#4b5563;
  --n500:#6b7280;--n400:#9ca3af;--n300:#d1d5db;--n200:#e5e7eb;--n100:#f3f4f6;
  --white:#fff;
  --danger:#dc2626;--danger-lt:#fee2e2;
  --success:#16a34a;--success-lt:#dcfce7;
  --warning:#d97706;--warning-lt:#fef3c7;
  --info:#0284c7;--info-lt:#e0f2fe;
  --sb-bg:#0d0f1a;--sb-w:248px;
  --sh-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.07);
  --sh:0 1px 3px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.08);
  --sh-md:0 4px 6px rgba(0,0,0,.05),0 10px 24px rgba(0,0,0,.1);
  --radius:10px;--radius-sm:6px;--radius-lg:14px
}

/* ══════════════════════════════════════
   LOGIN — split layout (igual al panel admin institucional)
══════════════════════════════════════ */
.av-login{min-height:100vh;display:flex}
.av-login__panel{
  flex:0 0 42%;display:flex;flex-direction:column;justify-content:center;
  padding:60px 52px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#0d0f1a 0%,#0a1845 45%,#0e2370 75%,#6b2d0a 100%)
}
.av-login__panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 20% 80%,rgba(245,158,11,.22) 0%,transparent 52%),
             radial-gradient(ellipse at 80% 20%,rgba(59,130,246,.15) 0%,transparent 48%)
}
.av-login__panel-logo{position:relative;z-index:1;margin-bottom:28px}
.av-login__panel-logo img{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(0,0,0,.5))}
.av-login__panel h2{position:relative;z-index:1;font-size:1.65rem;font-weight:900;color:#fff;line-height:1.3;margin-bottom:12px}
.av-login__panel h2 span{color:var(--ag300)}
.av-login__panel > p{position:relative;z-index:1;font-size:.875rem;color:rgba(255,255,255,.52);line-height:1.7;max-width:320px}
.av-login__badges{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.av-login__badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65);font-size:.7rem;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:.04em}
.av-login__form{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 52px;background:var(--white)}
.av-login__box{width:100%;max-width:390px}
.av-login__box h1{font-size:1.6rem;font-weight:900;color:var(--n900);margin-bottom:6px}
.av-login__sub{font-size:.875rem;color:var(--n500);margin-bottom:28px}
@media(max-width:820px){
  .av-login{flex-direction:column}
  .av-login__panel{flex:none;padding:40px 32px}
  .av-login__form{padding:40px 24px}
}

/* ══════════════════════════════════════
   SHELL (sidebar oscuro + topbar, igual al admin institucional)
══════════════════════════════════════ */
.av-shell{display:flex;min-height:100vh}
.av-sidebar{
  width:var(--sb-w);flex-shrink:0;background:var(--sb-bg);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;
  overflow-y:auto;border-right:1px solid rgba(255,255,255,.04)
}
.av-sidebar::-webkit-scrollbar{width:4px}
.av-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
.av-sidebar__brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
.av-sidebar__brand img{width:38px;height:38px;object-fit:contain;flex-shrink:0}
.av-sidebar__brand-text span{display:block;font-weight:800;font-size:.86rem;color:#fff;line-height:1.2}
.av-sidebar__brand-text small{font-size:.63rem;color:rgba(255,255,255,.3);letter-spacing:.04em}
.av-nav{padding:10px 8px;display:flex;flex-direction:column;gap:1px;flex:1}
.av-nav__group{padding:14px 10px 4px;font-size:.58rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.22);user-select:none}
.av-nav__item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;color:rgba(255,255,255,.48);transition:all .15s;text-align:left;width:100%;position:relative}
.av-nav__item svg{width:15px;height:15px;flex-shrink:0}
.av-nav__item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.88)}
.av-nav__item.active{background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(59,130,246,.07));color:#60a5fa;font-weight:700}
.av-nav__item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:65%;background:var(--ab500);border-radius:0 3px 3px 0}
.av-sidebar__footer{padding:10px 8px;border-top:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:5px}
.av-topbar{position:sticky;top:0;z-index:100;height:58px;background:rgba(240,242,245,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--n200);padding:0 30px;display:flex;align-items:center;gap:14px}
.av-topbar__title{font-size:1rem;font-weight:900;color:var(--n900);flex:1}
.av-topbar__meta{font-size:.75rem;color:var(--n400);font-weight:500}
.av-topbar__status{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:var(--n700);background:var(--n100);padding:4px 11px;border-radius:999px}
.av-main{margin-left:var(--sb-w);flex:1;min-height:100vh;display:flex;flex-direction:column}
.av-main__content{padding:26px 30px;flex:1;max-width:1200px;width:100%}
@media(max-width:900px){
  .av-shell{flex-direction:column}
  .av-sidebar{position:sticky;top:0;left:0;right:0;bottom:auto;width:100%;height:auto;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;border-right:none;border-bottom:1px solid rgba(255,255,255,.06);z-index:200}
  .av-sidebar__brand{border-bottom:none;border-right:1px solid rgba(255,255,255,.06);padding:12px 14px;flex-shrink:0}
  .av-sidebar__brand-text{display:none}
  .av-nav{flex-direction:row;flex-wrap:nowrap;padding:8px 6px;gap:2px;flex:1}
  .av-nav__group{display:none}
  .av-nav__item{white-space:nowrap;padding:8px 12px;flex-shrink:0}
  .av-nav__item.active::before{display:none}
  .av-sidebar__footer{flex-direction:row;border-top:none;border-left:1px solid rgba(255,255,255,.06);padding:8px;flex-shrink:0}
  .av-main{margin-left:0}
  .av-main__content{padding:16px 14px}
  .av-topbar{padding:0 16px}
}
@media(max-width:600px){
  .av-topbar__meta{display:none}
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.av-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);font-size:.845rem;font-weight:700;transition:all .15s;white-space:nowrap;line-height:1}
.av-btn svg{width:15px;height:15px;flex-shrink:0}
.av-btn:hover{transform:translateY(-1px)}
.av-btn:active{transform:translateY(0)}
.av-btn--primary{background:linear-gradient(135deg,#60a5fa,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 2px 10px rgba(59,130,246,.25)}
.av-btn--primary:hover{box-shadow:0 4px 20px rgba(59,130,246,.4)}
.av-btn--secondary{background:var(--ab100);color:var(--ab700)}
.av-btn--secondary:hover{background:var(--ab200)}
.av-btn--danger{background:var(--danger-lt);color:var(--danger)}
.av-btn--danger:hover{background:#fecaca}
.av-btn--sm{padding:5px 10px;font-size:.78rem}
.av-btn--outline{background:transparent;color:var(--n600);border:1.5px solid var(--n300)}
.av-btn--outline:hover{background:var(--n100);color:var(--n900)}
.av-btn--white{background:#fff;color:var(--n900);box-shadow:var(--sh-sm)}
.av-btn--white:hover{background:#f0f2f5}
.av-btn--white-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.av-btn--white-ghost:hover{background:rgba(255,255,255,.18)}
.av-btn--block{width:100%;justify-content:center}

/* ══════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════ */
.av-page-header{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--n200)}
.av-page-header h2{font-size:1.3rem;font-weight:900;color:var(--n900);flex:1}
.av-page-header p{font-size:.85rem;color:var(--n500);flex-basis:100%;margin-top:-8px}

/* ══════════════════════════════════════
   CARDS
══════════════════════════════════════ */
.av-card{background:var(--white);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--sh);border:1px solid var(--n200)}
.av-card h3{font-size:.975rem;font-weight:800;color:var(--n900);margin-bottom:14px}
.av-card + .av-card{margin-top:18px}

/* Welcome banner */
.av-welcome{background:linear-gradient(118deg,#0a1845 0%,#0e2370 55%,#1d4ed8 100%);border-radius:var(--radius-lg);padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px;position:relative;overflow:hidden}
.av-welcome::before{content:'';position:absolute;right:-30px;top:-30px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.04)}
.av-welcome::after{content:'';position:absolute;right:50px;bottom:-50px;width:140px;height:140px;border-radius:50%;background:rgba(245,158,11,.07)}
.av-welcome__text h2{font-size:1.2rem;font-weight:900;color:#fff;margin-bottom:4px;position:relative;z-index:1}
.av-welcome__text p{font-size:.84rem;color:rgba(255,255,255,.58);position:relative;z-index:1}
.av-welcome__text strong{color:var(--ag300)}

/* KPI stats */
.av-stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.av-stat{background:var(--white);border-radius:var(--radius);padding:18px 16px;box-shadow:var(--sh);border:1px solid var(--n200);display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.av-stat:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.av-stat__icon{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.av-stat__icon svg{width:17px;height:17px}
.av-stat__num{font-size:1.9rem;font-weight:900;line-height:1;color:var(--n900)}
.av-stat__lbl{font-size:.72rem;font-weight:700;color:var(--n500);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.av-stat__bar{position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 var(--radius) var(--radius);background:var(--ab500)}

/* Quick action tiles */
.av-actions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.av-action-card{background:var(--white);border:1.5px solid var(--n200);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px;transition:all .18s}
.av-action-card:hover{border-color:var(--ab500);background:#eff6ff;transform:translateY(-2px);box-shadow:0 4px 16px rgba(59,130,246,.14)}
.av-action-card__icon{width:38px;height:38px;border-radius:var(--radius-sm);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.av-action-card__icon svg{width:19px;height:19px}
.av-action-card strong{font-size:.9rem;font-weight:800;color:var(--n900)}
.av-action-card span{font-size:.78rem;color:var(--n500)}

/* Course cards (mis cursos) */
.av-course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.av-course-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--sh);border:1px solid var(--n200);padding:20px;display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s}
.av-course-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.av-course-card__top{height:5px;margin:-20px -20px 8px;border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(90deg,#3b82f6,#0ea5e9,#14b8a6)}
.av-course-card h3{font-size:1rem;font-weight:800;color:var(--n900);margin:0}
.av-course-card .meta{font-size:.78rem;color:var(--n500)}
.av-course-card .stats{font-size:.75rem;color:var(--n500);flex-grow:1}

/* ══════════════════════════════════════
   FORMS
══════════════════════════════════════ */
.av-fg{margin-bottom:14px}
.av-fg label{font-size:.74rem;font-weight:800;color:var(--n600);display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.av-fg input,.av-fg textarea,.av-fg select{width:100%;padding:10px 13px;border:1.5px solid var(--n200);border-radius:var(--radius-sm);font-size:.9rem;background:var(--n100);color:var(--n900);transition:border-color .15s,box-shadow .15s,background .15s}
.av-fg input:focus,.av-fg textarea:focus,.av-fg select:focus{outline:none;border-color:var(--ab500);background:var(--white);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.av-fg textarea{resize:vertical;min-height:78px}
.av-fg select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:32px}
.av-fg input[type=checkbox]{width:auto;display:inline-block;margin-right:6px}
.av-fg input[type=file]{padding:8px 10px;background:var(--n100)}
.av-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:680px){.av-form-grid{grid-template-columns:1fr}}
.av-inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.av-inline-form .av-fg{margin-bottom:0;flex:1;min-width:140px}

/* ══════════════════════════════════════
   TABLES
══════════════════════════════════════ */
.av-table-wrap{background:var(--white);border-radius:var(--radius);box-shadow:var(--sh);border:1px solid var(--n200);overflow-x:auto}
.av-table{width:100%;border-collapse:collapse;font-size:.85rem}
.av-table thead{background:var(--n100);border-bottom:1.5px solid var(--n200)}
.av-table th{padding:11px 16px;text-align:left;font-size:.68rem;font-weight:800;color:var(--n500);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.av-table tbody tr{border-bottom:1px solid var(--n100);transition:background .12s}
.av-table tbody tr:last-child{border-bottom:none}
.av-table tbody tr:hover{background:#fafbff}
.av-table td{padding:11px 16px;color:var(--n700);vertical-align:middle}
.av-table td strong{color:var(--n900);font-weight:700}
.av-td-actions{display:flex;gap:5px;flex-wrap:wrap}

/* Badges */
.av-badge{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.av-badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.av-badge--green{background:var(--success-lt);color:var(--success)}
.av-badge--green::before{background:var(--success)}
.av-badge--red{background:var(--danger-lt);color:var(--danger)}
.av-badge--red::before{background:var(--danger)}
.av-badge--amber{background:var(--ag100);color:var(--ag700)}
.av-badge--amber::before{background:var(--ag500)}
.av-badge--blue{background:var(--ab100);color:var(--ab700)}
.av-badge--blue::before{background:var(--ab500)}
.av-badge--gray{background:var(--n100);color:var(--n600)}
.av-badge--gray::before{background:var(--n400)}

/* ══════════════════════════════════════
   ALERTS (mensajes flash)
══════════════════════════════════════ */
.av-alert{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;margin-bottom:14px}
.av-alert--success{background:var(--success-lt);color:#166534}
.av-alert--danger{background:var(--danger-lt);color:#991b1b}
.av-alert__close{background:transparent;border:none;color:inherit;opacity:.6;font-size:1.1rem;line-height:1;cursor:pointer}
.av-alert__close:hover{opacity:1}

/* ══════════════════════════════════════
   TABS
══════════════════════════════════════ */
.av-tabs{display:flex;gap:4px;border-bottom:2px solid var(--n200);margin-bottom:20px}
.av-tab{padding:10px 18px;font-size:.85rem;font-weight:700;color:var(--n500);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s}
.av-tab:hover{color:var(--n800)}
.av-tab.active{color:var(--ab600);border-color:var(--ab500)}
.av-tabpanel{display:none}
.av-tabpanel.active{display:block}

/* ══════════════════════════════════════
   ACCORDION (unidades)
══════════════════════════════════════ */
.av-accordion-item{background:var(--white);border:1px solid var(--n200);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.av-accordion-header{display:flex;align-items:center;gap:10px;width:100%;padding:14px 18px;font-size:.9rem;font-weight:700;color:var(--n900);background:var(--n100);text-align:left}
.av-accordion-header:hover{background:var(--ab100)}
.av-accordion-header .chev{margin-left:auto;transition:transform .2s}
.av-accordion-item.open .av-accordion-header .chev{transform:rotate(180deg)}
.av-accordion-body{display:none;padding:18px}
.av-accordion-item.open .av-accordion-body{display:block}

/* ══════════════════════════════════════
   LIST GROUP
══════════════════════════════════════ */
.av-list{border:1px solid var(--n200);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.av-list-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--n100)}
.av-list-item:last-child{border-bottom:none}
.av-list-item .content-title{font-weight:700;color:var(--n900);font-size:.9rem}
.av-list-item .content-desc{font-size:.78rem;color:var(--n500);margin-top:2px}
.av-empty{padding:32px;text-align:center;color:var(--n400);font-size:.85rem}

/* ══════════════════════════════════════
   COMMENTS (comentarios de curso)
══════════════════════════════════════ */
.av-comments{display:flex;flex-direction:column;gap:10px}
.av-comment{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:var(--white);border:1px solid var(--n200);border-radius:var(--radius);padding:14px 16px}
.av-comment__meta{display:flex;align-items:center;gap:8px;font-size:.8rem;margin-bottom:4px}
.av-comment__body p{font-size:.88rem;color:var(--n800);white-space:pre-wrap}

/* ══════════════════════════════════════
   CALENDAR (vista mensual)
══════════════════════════════════════ */
.av-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.av-cal-head h3{font-size:1.05rem;font-weight:800;color:var(--n900);text-transform:capitalize}
.av-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--n200);border:1px solid var(--n200);border-radius:var(--radius);overflow:hidden}
.av-cal-dow{background:var(--n100);padding:8px;text-align:center;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--n500)}
.av-cal-day{background:var(--white);min-height:96px;padding:6px;display:flex;flex-direction:column;gap:3px}
.av-cal-day.is-empty{background:var(--n100)}
.av-cal-day.is-today{background:#eff6ff}
.av-cal-day__num{font-size:.75rem;font-weight:700;color:var(--n600);margin-bottom:2px}
.av-cal-day.is-today .av-cal-day__num{color:var(--ab700)}
.av-cal-pill{font-size:.66rem;font-weight:700;padding:2px 6px;border-radius:5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-cal-pill--sesion{background:var(--ab100);color:var(--ab700)}
.av-cal-pill--tarea{background:var(--ag100);color:var(--ag700)}
@media(max-width:700px){
  .av-cal-dow{font-size:.58rem;padding:5px 2px}
  .av-cal-day{min-height:60px;padding:3px}
  .av-cal-pill{font-size:.58rem}
}

/* ══════════════════════════════════════
   MISC
══════════════════════════════════════ */
.av-grade-box{background:var(--success-lt);border-radius:var(--radius);padding:16px 18px;color:#166534;font-size:.88rem}
.av-text-muted{color:var(--n500)}
.av-footer-note{text-align:center;font-size:.76rem;color:var(--n400);padding:20px 0}