/* ============================================================================
   Campus — Que les jodan · sistema visual
   ----------------------------------------------------------------------------
   Oscuro, sobrio, un solo acento (naranja #f7931a). Sin blanco en superficies,
   sin sombras fuertes: la jerarquía se construye con superficie + borde.
   Titillium Web autohospedada. Sin CDNs, sin trackers.

   Orden: tokens → base → layout → componentes → vistas → estados → responsive.
   ========================================================================== */

/* ------------------------------------------------------------------ fuentes */
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/TitilliumWeb-400.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/TitilliumWeb-600.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/TitilliumWeb-700.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:900;font-display:swap;
  src:url('/fonts/TitilliumWeb-900.woff2') format('woff2')}

/* ------------------------------------------------------------------- tokens */
:root{
  /* superficies: cuatro niveles de elevación, nunca blanco */
  --bg:#131619;
  --s1:#1a1e23;          /* tarjetas, barras, paneles */
  --s2:#21262c;          /* campos, cabeceras de tabla, hover */
  --s3:#2a3037;          /* hover fuerte, botón secundario */
  --overlay:#2f363e;     /* desplegables, modales */
  --border:#2b3138;      /* separadores */
  --border-strong:#3a4046;
  --border-input:#656f7b;

  /* texto */
  --text:#e9ecef;
  --text-2:#a8b1ba;
  --muted:#949ea8;

  /* acento único */
  --brand:#f7931a;
  --brand-hover:#ffa63d;
  --on-brand:#15181c;

  /* estados */
  --success:#3fb950;
  --danger:#f85149;
  --warning:#e3b341;
  --info:#58a6ff;

  /* tipografía */
  --font:'Titillium Web',system-ui,Arial,sans-serif;
  --fs-display:2.5rem;   /* 40 */
  --fs-h1:1.75rem;       /* 28 */
  --fs-h2:1.25rem;       /* 20 */
  --fs-h3:1.0625rem;     /* 17 */
  --fs-body:1rem;        /* 16 */
  --fs-sm:.875rem;       /* 14 */
  --fs-xs:.75rem;        /* 12 */

  /* espacio: base 4 */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* formas */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;

  /* contenedores */
  --w-reading:44rem;
  --w-app:78rem;

  --speed:140ms;
  --ease:cubic-bezier(.2,.6,.3,1);
}

/* --------------------------------------------------------------------- base */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  min-height:100svh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--brand);color:var(--on-brand)}

h1,h2,h3,h4{font-weight:700;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}

a{color:inherit;text-decoration:none}
a:hover{color:var(--brand)}

img,video,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
hr{border:0;border-top:1px solid var(--border);margin:var(--sp-5) 0}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}

[hidden]{display:none!important}
.error{color:var(--danger);font-weight:600}
.acento{color:var(--brand);font-weight:700}
.sidebar-foot > button.navlink{display:flex;align-items:center;gap:var(--sp-3);min-height:38px;text-align:left}
.sidebar-foot > button.navlink svg{color:var(--muted);flex:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* salto de contenido: primera parada con teclado */
.skip{position:absolute;left:var(--sp-4);top:-4rem;z-index:100;
  background:var(--brand);color:var(--on-brand);font-weight:700;
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-sm)}
.skip:focus{top:var(--sp-3)}

.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.text-2{color:var(--text-2)}

/* ------------------------------------------------------------------- layout */
.app{display:flex;flex-direction:column;min-height:100svh}

.container{width:100%;max-width:var(--w-app);margin:0 auto;
  padding-inline:clamp(20px,4vw,40px)}

.page{padding-block:clamp(28px,4vw,48px) var(--sp-9)}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}

.page-title{font-size:var(--fs-h1);font-weight:700}
.page-lead{color:var(--text-2);max-width:var(--w-reading);margin-top:var(--sp-2)}

.eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

.crumbs{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-4);
  flex-wrap:wrap}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{opacity:.5}

/* -------------------------------------------------------------------- marca */
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);min-width:0}
.brand-mark{width:28px;height:28px;flex:none;color:var(--brand)}
.brand-mark:not(svg){border-radius:50%;object-fit:cover}
.brand-name{font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;
  white-space:nowrap}
.brand-sub{font-size:var(--fs-sm);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-left:var(--sp-3);
  border-left:1px solid var(--border-strong);white-space:nowrap}

/* ------------------------------------------------------------------- topbar */
.topbar{position:sticky;top:0;z-index:40;background:rgb(26 30 35 / .92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topbar-inner{display:flex;align-items:center;gap:var(--sp-6);min-height:60px}
.topbar-nav{display:flex;align-items:center;gap:var(--sp-1);margin-left:var(--sp-2)}
.navlink{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease)}
.navlink:hover{background:var(--s2);color:var(--text)}
.navlink[aria-current="page"]{background:var(--s2);color:var(--text)}
.topbar-user{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.topbar-user > div{display:flex;align-items:center;gap:var(--sp-2)}
.user-name{font-size:var(--fs-sm);color:var(--text-2);max-width:16rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.avatar{width:30px;height:30px;border-radius:var(--r-pill);flex:none;
  display:grid;place-items:center;background:var(--s3);color:var(--text);
  font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  border:1px solid var(--border-strong)}

/* -------------------------------------------------------------------- botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:40px;padding:0 var(--sp-4);border-radius:var(--r-sm);
  border:1px solid transparent;font-size:var(--fs-sm);font-weight:700;
  white-space:nowrap;user-select:none;
  transition:background var(--speed) var(--ease),border-color var(--speed) var(--ease),
             color var(--speed) var(--ease)}

.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-hover);color:var(--on-brand)}

.btn-secondary{background:var(--s2);border-color:var(--border-strong);color:var(--text)}
.btn-secondary:hover{background:var(--s3);border-color:var(--border-input);color:var(--text)}

.btn-ghost{color:var(--text-2)}
.btn-ghost:hover{background:var(--s2);color:var(--text)}

.btn-danger{color:var(--danger);border-color:rgb(248 81 73 / .35)}
.btn-danger:hover{background:rgb(248 81 73 / .1);border-color:var(--danger);color:var(--danger)}

.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.btn-icon{width:36px;height:36px;min-height:36px;padding:0;justify-content:center;
  color:var(--muted);border-color:transparent}
.btn-icon:hover{background:var(--s2);color:var(--text)}

.btn-sm{min-height:32px;padding:0 var(--sp-3);font-size:var(--fs-xs)}
/* Acceso a la comunidad: a la izquierda de la bola de cuenta. En pantallas
   estrechas se queda solo el icono para no apretar la barra. */
.btn-comunidad{display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap}
@media (max-width:640px){
  .btn-comunidad .btn-comunidad-texto{display:none}
  .btn-comunidad{padding:0 var(--sp-2)}
}
.btn-block{width:100%}

/* cuenta: aro con el glow del acento (único uso decorativo del naranja) */
.btn-cuenta{width:32px;height:32px;flex:none;border-radius:50%;display:grid;
  place-items:center;color:var(--brand);background:var(--s2);
  border:1px solid rgb(247 147 26 / .35);
  box-shadow:0 0 0 2px rgb(247 147 26 / .04),0 0 9px rgb(247 147 26 / .12);
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease),
             border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease)}
.btn-cuenta:hover{background:rgb(247 147 26 / .1);color:var(--brand-hover);
  border-color:rgb(247 147 26 / .7);
  box-shadow:0 0 0 2px rgb(247 147 26 / .07),0 0 14px rgb(247 147 26 / .28)}
.btn-cuenta:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* --------------------------------------------------------- menú de la cuenta */
.cuenta-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 10px);width:16rem;z-index:60;
  background:var(--overlay);border:1px solid var(--border-strong);
  border-radius:var(--r-md);box-shadow:0 20px 44px -16px rgb(0 0 0 / .8);
  padding:var(--sp-2)}
.menu-head{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-2) var(--sp-3)}
.menu-head .avatar{width:34px;height:34px;background:var(--s3);font-size:var(--fs-xs)}
.menu-who{display:flex;flex-direction:column;min-width:0}
.menu-who strong{font-size:var(--fs-sm);font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-who span{font-size:var(--fs-xs);color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-progreso{padding:0 var(--sp-2) var(--sp-3);
  padding-left:calc(var(--sp-2) + 34px + var(--sp-3));
  font-size:var(--fs-xs);color:var(--text-2)}
.menu-sep{height:1px;background:var(--border);margin:var(--sp-1) calc(var(--sp-2) * -1)}
.menu-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:38px;
  padding:0 var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-sm);
  color:var(--text-2);text-align:left;
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease)}
.menu-item svg{color:var(--muted);flex:none}
.menu-item:hover{background:var(--s3);color:var(--text)}
.menu-item:hover svg{color:var(--text-2)}
.menu-item.is-danger:hover{background:rgb(248 81 73 / .12);color:var(--danger)}
.menu-item.is-danger:hover svg{color:var(--danger)}
.menu-item:focus-visible{outline-offset:-2px}

/* ayuda: contactos */
.contacto{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-3)}
.contacto li{display:flex;flex-direction:column;gap:2px}
.contacto a{font-size:var(--fs-sm);color:var(--brand);overflow-wrap:anywhere}
.contacto a:hover{color:var(--brand-hover);text-decoration:underline;
  text-underline-offset:2px}

/* --------------------------------------------------------------------- cards */
.card{background:var(--s1);border:1px solid var(--border);border-radius:var(--r-md)}
.card-pad{padding:var(--sp-5)}
.card-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border)}
.card-title{font-size:var(--fs-h3);font-weight:700}

.invite-who{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r-sm)}
.invite-who strong{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.invite-who span{font-size:var(--fs-xs);color:var(--muted);overflow-wrap:anywhere}

/* ------------------------------------------------------------------ forms */
.field{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.field > label,.field-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.input,.select,.textarea{
  width:100%;min-height:44px;padding:var(--sp-3) var(--sp-3);
  background:var(--s2);color:var(--text);
  border:1px solid var(--border-input);border-radius:var(--r-sm);
  transition:border-color var(--speed) var(--ease),background var(--speed) var(--ease)}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.textarea{min-height:6rem;resize:vertical}
.select{appearance:none;padding-right:2.5rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.field-hint{font-size:var(--fs-xs);color:var(--muted);line-height:1.45}
.field-error{font-size:var(--fs-sm);color:var(--danger);font-weight:600}

.input[type=file]{padding:var(--sp-1) var(--sp-1)}
.input::file-selector-button{font:inherit;font-size:var(--fs-sm);font-weight:600;
  color:var(--text);background:var(--s3);border:1px solid var(--border-strong);
  border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin-right:var(--sp-3);
  cursor:pointer;transition:border-color var(--speed) var(--ease)}
.input::file-selector-button:hover{border-color:var(--border-input)}

.input-group{position:relative}
.input-group .input{padding-right:3rem}
.input-group .btn-icon{position:absolute;right:4px;top:4px}

.check{display:flex;align-items:flex-start;gap:var(--sp-3);min-height:40px;
  padding:var(--sp-2) var(--sp-2);border-radius:var(--r-sm);cursor:pointer}
.check:hover{background:var(--s2)}
.check input{appearance:none;width:18px;height:18px;margin-top:2px;flex:none;
  background:var(--s2);border:1px solid var(--border-input);border-radius:4px;
  display:grid;place-items:center;cursor:pointer;
  transition:background var(--speed) var(--ease),border-color var(--speed) var(--ease)}
.check input:hover{border-color:var(--text-2)}
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input:checked::after{content:"";width:9px;height:5px;
  border-left:2px solid var(--on-brand);border-bottom:2px solid var(--on-brand);
  transform:rotate(-45deg) translateY(-1px)}
.check input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

fieldset{border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4) var(--sp-2);margin:0;min-width:0}
legend{padding:0 var(--sp-2);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.check-group{display:flex;flex-direction:column;gap:2px}
.check-group .check{margin-inline:calc(var(--sp-2) * -1)}
.check span{font-size:var(--fs-sm);color:var(--text)}

.form-actions{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
  margin-top:var(--sp-5)}

/* --------------------------------------------------------------- badge, chip */
.badge{display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:2px var(--sp-2);border-radius:var(--r-pill);
  border:1px solid var(--border-strong);font-size:var(--fs-xs);font-weight:600;
  color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;
  white-space:nowrap;line-height:1.6}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none}
.badge.is-done{color:var(--success);border-color:rgb(63 185 80 / .35)}
.badge.is-active{color:var(--brand);border-color:rgb(247 147 26 / .4)}
.badge.is-error{color:var(--danger);border-color:rgb(248 81 73 / .4)}
.badge.is-draft{color:var(--muted)}

.chip{display:inline-flex;align-items:center;gap:var(--sp-1);
  background:var(--s2);border:1px solid var(--border-strong);
  border-radius:var(--r-pill);padding:2px 4px 2px var(--sp-3);
  font-size:var(--fs-xs);color:var(--text-2)}
.chip button{display:grid;place-items:center;width:20px;height:20px;
  border-radius:50%;color:var(--muted)}
.chip button:hover{background:var(--s3);color:var(--danger)}

/* ----------------------------------------------------------------- progreso */
.meter{height:4px;background:var(--s3);border-radius:var(--r-pill);overflow:hidden}
.meter > span{display:block;height:100%;background:var(--brand);
  border-radius:inherit;transition:width 300ms var(--ease)}
.progress-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-2);
  font-size:var(--fs-xs);color:var(--muted)}
.progress-row strong{color:var(--text);font-size:var(--fs-sm)}

/* ------------------------------------------------------------------ avisos */
.banner{display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);
  background:var(--s1);border:1px solid var(--border);
  border-left:2px solid var(--brand);font-size:var(--fs-sm);color:var(--text-2)}
.banner strong{color:var(--text)}
.banner.is-error{border-left-color:var(--danger);color:#ffb4b0}
.banner.is-error strong{color:#ffc9c6}
.banner.is-success{border-left-color:var(--success)}

/* ---------------------------------------------------------------- vacíos */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  text-align:center;padding:var(--sp-7) var(--sp-5);
  border:1px dashed var(--border-strong);border-radius:var(--r-md);
  color:var(--muted)}
.empty-icon{width:40px;height:40px;border-radius:var(--r-pill);
  display:grid;place-items:center;background:var(--s2);color:var(--brand)}
.empty h2{font-size:var(--fs-h3);font-weight:700;color:var(--text)}
.empty p{font-size:var(--fs-sm);max-width:34rem}

/* --------------------------------------------------------------- diálogos */
.dialog{width:min(32rem,calc(100% - 2rem));margin:auto;padding:0;
  background:var(--s1);color:var(--text);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:0 24px 64px -12px rgb(0 0 0 / .7)}
.dialog::backdrop{background:rgb(8 10 12 / .75);backdrop-filter:blur(2px)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);padding:var(--sp-5) var(--sp-5) var(--sp-3)}
.dialog-title{font-size:var(--fs-h2);font-weight:700}
.dialog-body{padding:0 var(--sp-5) var(--sp-2)}
.dialog-foot{display:flex;justify-content:flex-end;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5) var(--sp-5)}

/* ==========================================================================
   ALUMNO
   ========================================================================== */

/* ------------------------------------------------------------ acceso */
.login{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr}
.login-aside{position:relative;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(32px,5vw,64px);
  border-right:1px solid var(--border);
  background:
    radial-gradient(120% 90% at 0% 0%,rgb(247 147 26 / .07),transparent 55%),
    radial-gradient(90% 70% at 100% 100%,rgb(88 166 255 / .04),transparent 60%)}
.login-aside .aside-body{margin-block:auto}
.login-aside .statement{max-width:24ch;font-size:clamp(1.75rem,3.2vw,2.35rem);
  font-weight:900;line-height:1.08;letter-spacing:-.015em;margin-top:var(--sp-3)}
.login-aside .statement em{font-style:normal;color:var(--brand)}
.login-aside .statement.is-pending{font-size:var(--fs-sm);font-weight:400;
  color:var(--muted);letter-spacing:0;line-height:1.6;max-width:34ch}
.login-aside .aside-foot{display:flex;gap:var(--sp-4);align-items:center;
  color:var(--muted);font-size:var(--fs-xs);margin-top:var(--sp-6);max-width:34ch}

.login-main{display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,5vw,64px)}
.auth{width:100%;max-width:24rem}
.auth-head{margin-bottom:var(--sp-6)}
.auth-title{font-size:var(--fs-h1);font-weight:700;margin-top:var(--sp-2)}
.auth-sub{color:var(--text-2);font-size:var(--fs-sm);margin-top:var(--sp-2)}
.auth .btn-block{margin-top:var(--sp-2)}
.auth-foot{margin-top:var(--sp-5);padding-top:var(--sp-4);
  border-top:1px solid var(--border);color:var(--muted);font-size:var(--fs-xs)}
.auth-foot a{color:var(--text-2);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--border-input)}
.auth-foot a:hover{color:var(--brand);text-decoration-color:var(--brand)}

/* ------------------------------------------------------------ mis cursos */
.course-grid{display:grid;gap:var(--sp-4);
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}

.course-card{display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-5);background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:background var(--speed) var(--ease),border-color var(--speed) var(--ease),
             transform var(--speed) var(--ease)}
.course-card:hover{background:var(--s2);border-color:var(--border-strong);
  transform:translateY(-1px)}
.course-card:hover .course-title{color:var(--brand)}
.course-card:focus-visible{outline-offset:3px}
.course-kicker{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);font-size:var(--fs-xs);color:var(--muted)}
.course-title{font-size:1.125rem;font-weight:700;line-height:1.3;
  transition:color var(--speed) var(--ease);overflow-wrap:anywhere}
.course-desc{font-size:var(--fs-sm);color:var(--text-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.course-foot{margin-top:auto;padding-top:var(--sp-3);display:flex;
  flex-direction:column;gap:var(--sp-2)}
.course-meta{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);font-size:var(--fs-xs);color:var(--muted)}
.course-go{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);font-weight:700;color:var(--brand)}
.course-card:hover .course-go svg{transform:translateX(2px)}
.course-go svg{transition:transform var(--speed) var(--ease)}

/* ---------------------------------------------------------------- curso */
.course-layout{display:grid;gap:var(--sp-6);align-items:start}
@media (min-width:1024px){
  .course-layout{grid-template-columns:minmax(0,1fr) minmax(18rem,23rem)}
}
.course-hero{margin-bottom:clamp(40px,5vw,64px)}
.course-hero .page-title{margin-top:var(--sp-2);font-size:2rem}
.course-hero .page-lead{margin-top:var(--sp-3)}
.hero-actions{display:flex;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;margin-top:var(--sp-5)}
.hero-progress{margin-top:var(--sp-5);max-width:28rem}
.next-up{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-xs);
  color:var(--muted)}
.next-up strong{font-size:var(--fs-sm);color:var(--text-2);font-weight:600}

/* Curso: cabecera a todo el ancho y secciones en tarjetas, sin columna vacía. */
.sections-grid{display:grid;gap:var(--sp-4);align-items:start}
/* Curso: una sola columna de lectura, centrada bajo la cabecera. */
#vista:has(> .course-hero){max-width:54rem;margin-inline:auto}
.section-card{background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5)}
.section-card .section-label{margin-bottom:var(--sp-2)}
.section-card .lesson{margin-inline:calc(var(--sp-2) * -1)}
.section-card .lesson + .lesson{border-top:1px solid var(--border);border-radius:0}

.curriculum{position:sticky;top:76px}
.curriculum .card-head{padding-block:var(--sp-3)}
.section-block{padding:var(--sp-4) var(--sp-5) var(--sp-2)}
.section-block + .section-block{border-top:1px solid var(--border)}
.section-label{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-2)}
.section-label h2{font-size:var(--fs-h3);font-weight:700}
.section-label span{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}

.lesson{display:grid;grid-template-columns:2rem minmax(0,1fr) 1rem;
  align-items:center;gap:var(--sp-3);min-height:52px;
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-1);
  border-radius:var(--r-sm);margin-inline:calc(var(--sp-2) * -1);
  transition:background var(--speed) var(--ease)}
.lesson:hover{background:var(--s2)}
.lesson:hover .lesson-title{color:var(--text)}
.lesson-num{font-size:var(--fs-xs);color:var(--muted);text-align:center;
  font-variant-numeric:tabular-nums}
.lesson-body{min-width:0}
.lesson-title{font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
  overflow-wrap:anywhere;transition:color var(--speed) var(--ease)}
.lesson-state{display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.lesson-state .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.lesson-state.is-done{color:var(--success)}
.lesson-state.is-part{color:var(--brand)}
.lesson-arrow{color:var(--muted);transition:color var(--speed) var(--ease)}
.lesson:hover .lesson-arrow{color:var(--brand)}
.lesson[aria-current="page"]{background:var(--s2);box-shadow:inset 2px 0 0 var(--brand)}
.lesson[aria-current="page"] .lesson-title{color:var(--text);font-weight:700}
.lesson[aria-current="page"] .lesson-num{color:var(--brand)}

/* ---------------------------------------------------------------- reproductor */
.player-wrap{background:#000;border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;aspect-ratio:16/9}
.player-wrap video{width:100%;height:100%;object-fit:contain}

.video-head{margin-top:var(--sp-2)}
.video-title{font-size:var(--fs-h1);font-weight:700;margin-top:var(--sp-2)}
.video-meta{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--muted)}
.video-actions{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  margin-top:var(--sp-4)}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);
  margin-top:var(--sp-6)}
.pager a{display:flex;flex-direction:column;gap:2px;padding:var(--sp-4);
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r-md);
  transition:background var(--speed) var(--ease),border-color var(--speed) var(--ease)}
.pager a:hover{background:var(--s2);border-color:var(--border-strong);color:var(--text)}
.pager .dir{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;
  letter-spacing:.1em}
.pager strong{font-size:var(--fs-sm);font-weight:600;overflow-wrap:anywhere}
.pager a.next{text-align:right;grid-column:2}
.pager .placeholder{visibility:hidden}

/* ---------------------------------------------------------------- admin */
.admin{display:grid;grid-template-columns:15rem minmax(0,1fr);min-height:100svh}
/* Acceso del panel: ocupa la pantalla como el del alumno */
.admin.is-login{grid-template-columns:1fr}
.admin.is-login .admin-main{min-height:100svh}
.admin.is-login .admin-body{padding:0;max-width:none}

.sidebar{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  gap:var(--sp-6);padding:var(--sp-5) var(--sp-3);
  background:var(--s1);border-right:1px solid var(--border)}
.sidebar .brand{padding-inline:var(--sp-2)}
.sidebar-nav{display:flex;flex-direction:column;gap:2px}
.sidebar-nav .navlink{display:flex;align-items:center;gap:var(--sp-3);
  min-height:38px;padding:var(--sp-2) var(--sp-3);font-weight:600}
.sidebar-nav .navlink svg{color:var(--muted);flex:none}
.sidebar-nav .navlink:hover svg{color:var(--text-2)}
.sidebar-nav .navlink[aria-current="page"]{box-shadow:none;background:var(--s2)}
.sidebar-nav .navlink[aria-current="page"] svg{color:var(--brand)}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-2);
  padding-top:var(--sp-4);border-top:1px solid var(--border)}
.sidebar-user{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2);
  min-width:0}
.sidebar-user .who{min-width:0;line-height:1.25}
.sidebar-user .who strong{display:block;font-size:var(--fs-sm);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user .who span{font-size:var(--fs-xs);color:var(--muted)}

.admin-main{min-width:0;display:flex;flex-direction:column}
.admin-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:var(--sp-4);min-height:60px;
  padding:0 clamp(20px,3vw,40px);background:rgb(19 22 25 / .92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.admin-bar h1{font-size:var(--fs-h3);font-weight:700}
.admin-body{padding:clamp(24px,3vw,40px);padding-bottom:var(--sp-9);width:100%;
  max-width:80rem}

/* tablas */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--s1)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
thead th{position:sticky;top:0;background:var(--s2);color:var(--muted);
  font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;text-align:left;padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);
  vertical-align:middle;color:var(--text-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--s2)}
td .strong,.cell-strong{color:var(--text);font-weight:600}
.cell-sub{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.cell-actions{display:flex;align-items:center;gap:var(--sp-1);justify-content:flex-end}
.col-actions{text-align:right;width:1%}
.cell-num{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}

/* formularios del panel */
.panel-card{padding:var(--sp-5);margin-bottom:var(--sp-5)}
.panel-card h2{font-size:var(--fs-h3);font-weight:700;margin-bottom:var(--sp-1)}
.panel-card .hint{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--sp-4)}
.form-grid{display:grid;gap:var(--sp-4) var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));align-items:start}
.form-grid .field{margin-bottom:0}
.form-grid .field-wide{grid-column:1/-1}

.disclosure{background:var(--s1);border:1px solid var(--border);
  border-radius:var(--r-md);margin-bottom:var(--sp-4);overflow:hidden}
.disclosure > summary{display:flex;align-items:center;gap:var(--sp-3);
  min-height:48px;padding:var(--sp-3) var(--sp-5);cursor:pointer;
  font-size:var(--fs-sm);font-weight:600;color:var(--text);
  list-style:none;transition:background var(--speed) var(--ease)}
.disclosure > summary::-webkit-details-marker{display:none}
.disclosure > summary::before{content:"";width:6px;height:6px;flex:none;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:rotate(-45deg);transition:transform var(--speed) var(--ease)}
.disclosure[open] > summary::before{transform:rotate(45deg)}
.disclosure > summary:hover{background:var(--s2)}
.disclosure > summary:focus-visible{outline-offset:-2px}
.disclosure-body{padding:0 var(--sp-5) var(--sp-4);
  border-top:1px solid var(--border);padding-top:var(--sp-4)}

/* bloque de curso en el panel */
.course-block{padding:var(--sp-4) 0;border-top:1px solid var(--border)}
.course-block:first-of-type{border-top:0}
.block-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.block-head h3{font-size:var(--fs-h3);font-weight:700}
.block-count{font-size:var(--fs-xs);color:var(--muted)}
.row-actions{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap}

.video-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;
  gap:var(--sp-4);align-items:center;padding:var(--sp-3) 0;
  border-bottom:1px solid var(--border)}
.video-row:last-child{border-bottom:0}
.thumb{width:7.5rem;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);
  background:#000;border:1px solid var(--border)}
.thumb-empty{display:grid;place-items:center;color:var(--muted);
  background:var(--s2);font-size:var(--fs-xs)}
.video-row .info{min-width:0}
.video-row .info strong{display:block;font-size:var(--fs-sm);font-weight:600;
  color:var(--text);overflow-wrap:anywhere}
.video-row .meta{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}

.upload{margin-top:var(--sp-2);max-width:22rem}
.upload-bar{height:4px;border-radius:var(--r-pill);background:var(--s3);
  overflow:hidden}
.upload-bar span{display:block;height:100%;background:var(--brand);width:0;
  transition:width 200ms linear}
.upload-bar.is-indeterminate span{width:30%;animation:slide 1.2s infinite var(--ease)}
@keyframes slide{from{margin-left:-30%}to{margin-left:100%}}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1023px){
  .login{grid-template-columns:1fr}
  .login-aside{border-right:0;border-bottom:1px solid var(--border);
    padding-block:var(--sp-6)}
  .login-aside .statement{font-size:clamp(1.75rem,6vw,2.5rem);margin-top:var(--sp-6)}
  .login-aside .aside-foot{margin-top:var(--sp-4)}
  .admin{grid-template-columns:1fr}
  .sidebar{position:sticky;height:auto;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:var(--sp-2) var(--sp-4);padding:var(--sp-2) var(--sp-4);
    border-right:0;border-bottom:1px solid var(--border)}
  .sidebar-nav{order:3;flex-direction:row;gap:var(--sp-1);width:100%;
    overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .sidebar-nav::-webkit-scrollbar{display:none}
  .sidebar-nav .navlink,.sidebar-foot .navlink{min-width:max-content;
    white-space:nowrap}
  .sidebar-foot{margin:0 0 0 auto;padding:0;border:0;flex-direction:row}
  .sidebar-user .who{display:none}
  .curriculum{position:static}
}
@media (max-width:640px){
  .page-head{align-items:flex-start}
  .course-grid{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager a.next{grid-column:1}
  .table-wrap table{min-width:34rem}
  .video-row{grid-template-columns:5rem minmax(0,1fr);grid-template-areas:"thumb info" "act act"}
  .video-row .thumb{grid-area:thumb;width:5rem}
  .video-row .info{grid-area:info}
  .video-row .row-actions{grid-area:act;justify-content:flex-start}
  .lesson{grid-template-columns:1.5rem minmax(0,1fr) .75rem;gap:var(--sp-2)}
  .topbar-nav{display:none}
  .brand-sub{display:none}
  .topbar .user-name{display:none}
  .topbar-inner{gap:var(--sp-3)}
}

/* ------------------------------------------------------ recursos de lección */
/* Al final de la columna de la lección: dos grupos, Enlaces y Archivos. Solo
   se pinta si hay recursos, así que el margen no deja hueco cuando no los hay. */
.recursos{margin-top:var(--sp-6);overflow:hidden}
.recursos-grupo + .recursos-grupo{border-top:1px solid var(--border)}
.recursos-subtitulo{margin:0;padding:var(--sp-4) var(--sp-5) var(--sp-2);
  font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.recurso-lista{list-style:none;margin:0;padding:0}
.recurso{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5)}
.recurso + .recurso{border-top:1px solid var(--border)}
.recurso-icono{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:var(--r-sm);background:var(--s2);color:var(--brand)}
.recurso-texto{display:flex;flex-direction:column;min-width:0;flex:1 1 12rem}
.recurso-texto strong{font-weight:600;overflow-wrap:anywhere}
.recurso-meta{font-size:var(--fs-sm);color:var(--muted)}
.recurso-acciones{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex:none}
.recurso-acciones .btn-icon{color:var(--text-2)}
.recurso-acciones .btn-icon:hover{color:var(--brand)}
.recurso-audio{flex:1 1 100%;width:100%;max-width:26rem;margin-left:calc(32px + var(--sp-3))}

/* Recursos en el panel: lista del diálogo y formularios */
.recurso-admin-lista{list-style:none;margin:0 0 var(--sp-5);padding:0}
.recurso-admin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border)}
.recurso-admin:first-child{border-top:0}
.recurso-admin-info{display:flex;flex-direction:column;min-width:0}
.recurso-admin-info strong{font-weight:600;overflow-wrap:anywhere}
.recurso-form{margin:0}
.recurso-subida{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  padding-top:var(--sp-4);border-top:1px solid var(--border)}
.recurso-subida .hint{margin:0;flex:1 1 14rem}
.recurso-titulo-archivo{margin:0;flex:1 1 16rem}
.recurso-titulo-form{display:flex;align-items:center;gap:var(--sp-2)}
.recurso-titulo-form .input{min-width:12rem}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;
    scroll-behavior:auto!important}
}