/* Lumen Academic Campus — capa de marca
   Tokens alineados con sitio/assets/css/estilos.css y patrones de tarjeta
   derivados de la referencia de diseño (surface, etiqueta, icono, progreso). */

:root{
  /* Identidad institucional */
  --navy-deep:#0a162d;
  --navy:#0f1f3d;
  --navy-soft:#243653;
  --gold:#c49a2a;
  --gold-soft:#d9bc68;
  --gold-pale:#f1e6c7;
  --gold-ink:#8a6a12;
  --ivory:#faf8f3;
  --ink:#5f6b7a;
  --line:#e7e9ed;
  --white:#fff;

  /* Superficies y estados */
  --surface:#fff;
  --surface-soft:#f5f7fb;
  --surface-sunken:#f1f4f9;
  --success:#1f7a4d;
  --success-soft:#e4f3ec;
  --warning:#9a3412;
  --warning-soft:#fdf0e6;
  --danger:#a3232b;

  /* Tipografía */
  --font-sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  /* Ritmo y forma */
  --radius-sm:.5rem;
  --radius:.75rem;
  --radius-lg:1rem;
  --radius-xl:1.25rem;
  --shadow-xs:0 1px 2px rgba(15,31,61,.06);
  --shadow-sm:0 2px 8px rgba(15,31,61,.06);
  --shadow-md:0 12px 28px -12px rgba(15,31,61,.18);
  --shadow-lg:0 28px 60px -28px rgba(15,31,61,.28);
  --ease:cubic-bezier(.22,1,.36,1);
}

body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

.shell{width:min(1180px,calc(100% - 2.5rem))}

/* ---------- Endurecido anti-desborde y anti-solape ---------- */
/* Regla transversal: ninguna caja debe poder crecer mas alla de su contenedor. */
img,svg,video,canvas,iframe{max-width:100%}
img,svg,video,canvas{height:auto}
h1,h2,h3,h4,h5,h6,p,li,dd,dt,figcaption{overflow-wrap:break-word}
table{max-width:100%}
/* Los hijos de flex/grid pueden encogerse pero nunca desbordar su caja.
   min-width:0 es imprescindible: sin el, min-width:auto impide encoger y el
   contenido se sale de la caja (por eso .lesson-nav desbordaba 58px). */
.cover-body > *, .list-item > *, .stat > *{flex:0 0 auto}
.stack > *, .lesson-layout > *, .cover-grid > *{min-width:0;max-width:100%}
/* Los botones largos (titulos de unidad, nombres largos) deben poder partirse.
   nowrap solo donde la etiqueta es corta por definicion. Las badges y los
   kickers NO van en nowrap: algunas badges llevan titulos largos (foros) y con
   nowrap su min-content llegaba a 401px y desbordaba toda la rejilla. */
.button,button{max-width:100%;white-space:normal;overflow-wrap:break-word}
.cover-actions .button,.button-small,.status-pill,.nav-pill{
  white-space:nowrap;
}
/* Controles de formulario: un <select> o un <input> con size grande impone su
   ancho intrinseco y hace desbordar la etiqueta que lo contiene. */
input,select,textarea{min-width:0;max-width:100%}
.form-stack label,.compact-form label,.quick-action label,.inline-form label{min-width:0}
/* Rejillas del panel: 1fr equivale a minmax(auto,1fr) y no baja de su
   min-content, por lo que la columna crece y aparece scroll horizontal. */
.create-type-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.create-type{min-width:0}
.create-type strong,.create-type span{overflow-wrap:anywhere}
@media (max-width:720px){
  .admin-grid,.course-content{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:800px){
  .create-type-grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Foco y accesibilidad ---------- */
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:.85rem 1.25rem;background:var(--navy);color:#fff;
  font-weight:700;text-decoration:none;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0}

/* ---------- Barra superior ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;flex-wrap:wrap;row-gap:.7rem;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-bottom:1px solid rgba(201,154,42,.28);
  padding:.85rem clamp(1.25rem,4vw,3.5rem);
  box-shadow:0 1px 0 rgba(255,255,255,.04);
}
.brand{align-items:center;gap:.9rem;min-width:0}
.brand img{height:2.1rem;width:auto;display:block}
.brand-mark{display:none}
.brand small{color:rgba(255,255,255,.62);font-size:.66rem;letter-spacing:.18em}
/* flex-wrap + min-width:0 evitan que la navegacion desborde en pantallas
   estrechas (antes provocaba scroll horizontal a 360px). */
.topnav{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;min-width:0;margin-left:auto}
.topnav a{
  padding:.5rem .85rem;border-radius:999px;
  color:rgba(255,255,255,.78);font-size:.92rem;font-weight:600;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.topnav a:hover{background:rgba(255,255,255,.1);color:#fff}
.topnav a[aria-current="page"]{background:var(--gold);color:var(--navy-deep)}
.topnav .topnav-exit{
  margin-left:.35rem;border:1px solid rgba(255,255,255,.28);
  background:transparent;
}
.topnav .topnav-exit:hover{border-color:var(--gold);color:var(--gold-soft)}

/* ---------- Etiqueta superior (patrón de la referencia) ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.4rem;max-width:100%;
  font-size:.68rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);overflow-wrap:anywhere;
}
.kicker-pill{
  background:var(--gold-pale);border-radius:999px;padding:.3rem .7rem;
}

/* ---------- Superficies ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.card-hover{transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-pad{padding:1.35rem}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1.1rem;
}
.card-head h2,.card-head h3{margin:0;color:var(--navy);font-family:var(--font-display);
  font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.card-head .card-link{font-size:.85rem;font-weight:700;color:var(--navy);text-decoration:none}
.card-head .card-link:hover{color:var(--gold-ink);text-decoration:underline}

.icon-tile{
  display:grid;place-items:center;flex:0 0 auto;
  width:2.6rem;height:2.6rem;border-radius:var(--radius);
  background:var(--gold-pale);color:var(--navy);
}
.icon-tile svg{width:1.25rem;height:1.25rem;fill:currentColor}
.icon-tile--navy{background:rgba(15,31,61,.08);color:var(--navy)}
.icon-tile--success{background:var(--success-soft);color:var(--success)}
.icon-tile--gold{background:var(--gold-pale);color:var(--gold-ink)}

.stat-label{
  font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);
}
.stat-value{
  display:block;margin-top:.35rem;color:var(--navy);
  font-size:2rem;font-weight:700;line-height:1.1;letter-spacing:-.02em;
}
.stat-value small{font-size:.9rem;font-weight:500;color:var(--ink)}
.stat-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--line);
  font-size:.8rem;
}

/* ---------- Panel de administración ---------- */
.sidebar{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-right:1px solid rgba(201,154,42,.22);
}
.sidebar-heading{border-bottom:1px solid rgba(255,255,255,.12)}
.sidebar-heading strong{font-family:var(--font-display);font-weight:700}
.sidebar-kicker{color:var(--gold-soft)}
.sidebar-link{color:rgba(255,255,255,.74);border-radius:var(--radius-sm);font-weight:600}
.sidebar-link:hover,.sidebar-link:focus-visible{background:rgba(255,255,255,.1);color:#fff}
.sidebar-link.is-active{
  background:rgba(196,154,42,.2);color:#fff;
  box-shadow:inset 3px 0 0 var(--gold);
}
.nav-icon{color:var(--gold-soft)}
.sidebar-user{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06);border-radius:var(--radius)}
.workspace-main{width:min(100%,1300px)}

.admin-card{
  border-radius:var(--radius-lg);border-color:var(--line);box-shadow:var(--shadow-sm);
}
.admin-card h2,.admin-edit-card h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em}
.admin-card-primary{border-top:3px solid var(--gold)}
.metric-card{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.metric-card:after{border-color:rgba(196,154,42,.28)}
.status-pill{min-height:1.6rem;font-size:.7rem}
.status-draft{background:var(--gold-pale);color:var(--gold-ink)}
.status-published{background:var(--success-soft);color:var(--success)}
.status-archived{background:var(--surface-sunken);color:var(--ink)}
.module-editor{
  background:linear-gradient(135deg,var(--surface-soft),#fff);
  border-color:var(--line);border-radius:var(--radius-lg);
}
.module-editor h3,.lesson-info h3{font-family:var(--font-display);color:var(--navy)}
.lesson-row{border-top-color:var(--line)}
.lesson-card,.admin-course-row{
  border-top-color:var(--line);transition:background .18s var(--ease);
}
.lesson-card:hover,.admin-course-row:hover{background:var(--surface-soft)}
.button-small{border-radius:999px;padding:.55rem 1rem;background:var(--navy);color:#fff;font-weight:700}
.button-small:hover{background:var(--navy-deep)}
.button-danger{
  border-radius:999px;padding:.55rem 1rem;background:#fdecec;color:var(--danger);
  border:1px solid #f0c6c9;font-weight:700;
}
.button-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.danger-zone{border-radius:var(--radius);border-color:#f0c6c9;background:#fdf5f5}
.resource-list{background:var(--surface-soft);border-color:var(--line);border-radius:var(--radius)}
.resource-list a,.resource-inline{color:var(--navy)}
.resource-form{border-color:var(--line);border-radius:var(--radius)}
.assessment-staff-tools{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding-top:.75rem;margin-top:.75rem;border-top:1px solid var(--line);
}
.admin-forum-row{
  border-top:1px solid var(--line);
  transition:background .18s var(--ease);
}
.admin-forum-row:hover{background:var(--surface-soft)}
.editor-layout{gap:1.25rem}
.editor-aside .aside-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.quiz-question{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.question-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.option-row{
  border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.option-row:hover{border-color:var(--gold-soft);background:var(--surface-soft)}
.quiz-option.is-correct{border-color:var(--success);background:var(--success-soft)}
.quiz-option.is-wrong{border-color:var(--danger);background:#fdecec}
.feedback-box{
  background:var(--gold-pale);border-left:3px solid var(--gold);
  border-radius:var(--radius-sm);padding:.85rem 1rem;color:var(--navy);
}
.grading-card,.review-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.date-fields input{padding:.6rem .7rem}

/* ---------- Acceso ---------- */
.auth-split{
  display:grid;gap:1.25rem;align-items:stretch;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  margin-top:clamp(1rem,4vw,2.5rem);
}
@media (max-width:860px){.auth-split{grid-template-columns:1fr}}
.auth-aside{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);isolation:isolate;min-height:22rem;
  display:flex;align-items:flex-end;
}
.auth-aside__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.auth-aside::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(10,22,45,.9) 0%,rgba(15,31,61,.78) 55%,rgba(10,22,45,.94) 100%);
}
.auth-aside__body{padding:clamp(1.5rem,3vw,2.25rem);color:#fff}
.auth-aside__body h1{
  margin:.7rem 0 .5rem;color:#fff;font-family:var(--font-display);
  font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.08;letter-spacing:-.02em;
}
.auth-aside__body p{margin:0;color:rgba(255,255,255,.8);max-width:46ch}
.auth-aside .kicker-pill{background:rgba(196,154,42,.22);color:#f3e2b4;border:1px solid rgba(196,154,42,.45)}
.auth-points{
  list-style:none;margin:1.15rem 0 0;padding:0;display:grid;gap:.55rem;
  color:rgba(255,255,255,.86);font-size:.94rem;
}
.auth-points li{display:flex;gap:.6rem;align-items:flex-start}
.auth-points li::before{
  content:"";flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.2rem;
  border-radius:50%;background:var(--gold);
  box-shadow:inset 0 0 0 2px rgba(10,22,45,.55);
}
.auth-card{padding:clamp(1.6rem,4vw,2.5rem);margin:0;width:100%}
.auth-card h2{
  margin:.5rem 0 .3rem;color:var(--navy);
  font-family:var(--font-display);font-size:1.9rem;letter-spacing:-.02em;
}
.auth-card .form-stack{margin-top:1.4rem}
.auth-card .button{width:100%}
.auth-help{margin-top:1.1rem}
.auth-help a{color:var(--navy);font-weight:700}

/* ---------- Verificación y certificados ---------- */
.verify-card{margin-top:1.35rem}
.verify-result{text-align:center;margin-top:1.25rem}
.verify-result h2{font-family:var(--font-display);color:var(--navy)}
.verify-seal{
  display:grid;place-items:center;width:3.25rem;height:3.25rem;margin:0 auto .75rem;
  border-radius:50%;background:var(--success-soft);color:var(--success);
  font-size:1.5rem;font-weight:800;
}
.verify-result.is-revoked .verify-seal{background:var(--warning-soft);color:var(--warning)}
.verify-details{
  display:grid;gap:.75rem;margin:1.25rem 0 0;text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.verify-details > div{
  padding:.85rem 1rem;background:var(--surface-soft);border-radius:var(--radius);
}
.verify-details dt{
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.verify-details dd{margin:.25rem 0 0;color:var(--navy);font-weight:700}
.back-link{
  display:inline-flex;align-items:center;gap:.35rem;margin-bottom:1rem;
  color:var(--navy);font-weight:700;font-size:.9rem;text-decoration:none;
}
.back-link:hover{color:var(--gold-ink);text-decoration:underline}
.editor-header{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.35rem;
}
.editor-header h1{
  margin:.4rem 0 .3rem;color:var(--navy);font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em;
}

/* ---------- Módulos y lecciones ---------- */
.module-number{
  font-size:.78rem;font-weight:800;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.lesson-check{
  display:grid;place-items:center;flex:0 0 auto;
  width:1.5rem;height:1.5rem;border-radius:50%;
  border:1.5px solid var(--line);background:#fff;
  color:var(--success);font-size:.8rem;font-weight:800;
}
.module-forums{margin:.2rem 0 .5rem .35rem}
.module-forums a{text-decoration:none}
.course-progress-panel{margin-bottom:1.35rem}

/* ---------- Héro con fotografía ---------- */
.hero-media{
  position:relative;overflow:hidden;margin-bottom:1.35rem;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);isolation:isolate;
}
.hero-media__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-media::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(10,22,45,.96) 0%,rgba(15,31,61,.9) 45%,rgba(15,31,61,.55) 100%),
    radial-gradient(circle at 85% 20%,rgba(196,154,42,.32),transparent 55%);
}
.hero-media::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:22px 22px;
}
.hero-media__inner{
  position:relative;z-index:1;padding:clamp(1.75rem,4vw,3rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
}
/* min-width:0 permite que la copia y las acciones se ajusten al ancho real. */
.hero-media__inner > *{min-width:0;max-width:100%}
.hero-media h1{
  margin:.7rem 0 .5rem;color:#fff;font-family:var(--font-display);
  font-size:clamp(2rem,4.5vw,3rem);line-height:1.04;letter-spacing:-.02em;
  text-shadow:0 2px 18px rgba(10,22,45,.45);
}
.hero-media .lead{color:rgba(255,255,255,.82);max-width:52ch}
.hero-media .kicker-pill{background:rgba(196,154,42,.22);color:#f3e2b4;border:1px solid rgba(196,154,42,.45)}
.hero-media .hint{color:rgba(255,255,255,.7)}
.hero-media .button-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.hero-media .button-ghost:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px #fff}
.hero-media .bar{background:rgba(255,255,255,.2)}
/* La ruta de navegacion vive sobre el fondo oscuro del heroe. Hereda los
   colores oscuros de .breadcrumb (navy/ink), que ahi no se leen: por eso se
   vuelve a pintar en blanco solo dentro del heroe, y no en .breadcrumb, para
   no romper un uso futuro sobre fondo claro. */
.hero-media .breadcrumb{color:rgba(255,255,255,.8)}
.hero-media .breadcrumb a{color:#fff;text-shadow:0 1px 10px rgba(10,22,45,.5)}
.hero-media .breadcrumb a:hover{color:var(--gold-soft)}
.hero-media .breadcrumb [aria-hidden="true"]{color:rgba(255,255,255,.55)}

/* ---------- Tarjetas de curso con portada ---------- */
.cover-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr))}
.cover-card{
  display:flex;flex-direction:column;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease);
}
.cover-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.cover-media{position:relative;flex:0 0 auto;aspect-ratio:16/7;overflow:hidden;background:var(--navy)}
.cover-media img{width:100%;height:100%;object-fit:cover;display:block}
.cover-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,22,45,.05) 0%,rgba(10,22,45,.55) 100%)}
.cover-media .cover-tag{position:absolute;z-index:1;left:.85rem;bottom:.85rem}
.cover-body{display:flex;flex-direction:column;gap:.85rem;padding:1.25rem 1.25rem 1.35rem;flex:1}
.cover-body h3{margin:0;color:var(--navy);font-family:var(--font-display);font-size:1.25rem;line-height:1.2;overflow-wrap:anywhere}
.cover-body .cover-summary{
  margin:0;font-size:.9rem;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Progreso en dos filas explícitas: barra a lo ancho y etiquetas debajo.
   Así la barra nunca comparte línea con el porcentaje ni con el contador. */
.cover-progress{display:grid;gap:.55rem}
.cover-progress__row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cover-progress__row .hint{margin-left:auto}
.cover-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.cover-actions .button{flex:0 0 auto;padding:.6rem 1.05rem;font-size:.88rem}

/* ---------- Panel con imagen de cabecera ---------- */
.panel-media{overflow:hidden;padding-bottom:0}
.panel-media__img{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--navy)}
.panel-media__img img{width:100%;height:100%;object-fit:cover;display:block}
.panel-media__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,22,45,.15),rgba(10,22,45,.62))}
.panel-media__body{padding:1.15rem 1.35rem 1.35rem}

/* ---------- Banda inferior con imagen ---------- */
.figure-band{
  position:relative;overflow:hidden;margin-top:1.35rem;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.figure-band img{width:100%;height:100%;object-fit:cover;display:block}
.figure-band__inner{
  position:relative;z-index:1;padding:clamp(1.35rem,3vw,2rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  background:linear-gradient(100deg,rgba(10,22,45,.94),rgba(15,31,61,.62));
}
.figure-band h2{margin:0 0 .25rem;color:#fff;font-family:var(--font-display);font-size:1.4rem}
.figure-band p{margin:0;color:rgba(255,255,255,.78);max-width:60ch;font-size:.95rem}

.stat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.stat-foot--stack{flex-direction:column;align-items:stretch;gap:.5rem}
.stack{display:flex;flex-direction:column;gap:1.25rem}

/* ---------- Héro del panel ---------- */
.hero-panel{
  position:relative;overflow:hidden;margin-bottom:1.35rem;
  background:linear-gradient(135deg,#fff 0%,var(--surface-soft) 100%);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem;
}
.hero-panel::after{
  content:"";position:absolute;right:-6rem;top:-6rem;width:18rem;height:18rem;
  border-radius:50%;background:radial-gradient(circle,var(--gold-pale),transparent 70%);
  pointer-events:none;
}
.hero-copy{position:relative;z-index:1;max-width:52ch}
.hero-copy h1{
  margin:.6rem 0 .35rem;color:var(--navy);
  font-family:var(--font-display);font-size:clamp(1.9rem,4vw,2.6rem);
  line-height:1.05;letter-spacing:-.02em;
}
.hero-media .hero-copy h1,
.hero-media .hero-copy h2,
.hero-media .hero-copy h3{color:#fff;text-shadow:0 2px 18px rgba(10,22,45,.45)}
.hero-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.6rem}
.next-panel h2{
  margin:.4rem 0 .3rem;color:var(--navy);
  font-family:var(--font-display);font-size:1.5rem;
}
.next-panel .button{margin-top:1rem}

/* ---------- Barras de progreso ---------- */
.bar{display:block;width:100%;height:.45rem;border-radius:999px;background:var(--surface-sunken);overflow:hidden}
.bar > span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transition:width .45s var(--ease)}
.bar--navy > span{background:linear-gradient(90deg,var(--navy-soft),var(--navy))}
.bar--success > span{background:linear-gradient(90deg,var(--success),#2f9e6a)}

/* ---------- Insignias de estado ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.35rem;max-width:100%;
  padding:.25rem .65rem;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.04em;overflow-wrap:anywhere;
  background:var(--surface-sunken);color:var(--navy-soft);
}
.badge--gold{background:var(--gold-pale);color:var(--gold-ink)}
.badge--success{background:var(--success-soft);color:var(--success)}
.badge--warning{background:var(--warning-soft);color:var(--warning)}
.badge--navy{background:rgba(15,31,61,.08);color:var(--navy)}

/* ---------- Botones ---------- */
.button{
  border-radius:999px;font-weight:700;padding:.7rem 1.35rem;
  transition:background .18s var(--ease),color .18s var(--ease),
    box-shadow .18s var(--ease),transform .18s var(--ease);
}
.button-primary{background:var(--navy);color:#fff}
.button-primary:hover{background:var(--navy-deep);box-shadow:var(--shadow-md)}
.button-gold{background:var(--gold);color:var(--navy-deep)}
.button-gold:hover{background:var(--gold-soft)}
.button-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.button-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--navy);background:var(--surface-soft)}
.button-light{background:#fff;color:var(--navy)}
.button-light:hover{background:var(--gold-pale)}
.button:active{transform:translateY(1px)}

/* ---------- Encabezados de página ---------- */
.page-heading h1{color:var(--navy);font-family:var(--font-display);letter-spacing:-.02em}
.page-heading .lead{max-width:60ch}
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  margin-bottom:1rem;font-size:.82rem;color:var(--ink);
}
.breadcrumb a{color:var(--navy);text-decoration:none;font-weight:600}
.breadcrumb a:hover{color:var(--gold-ink);text-decoration:underline}

/* ---------- Formularios ---------- */
.form-stack label,.field label{color:var(--navy);font-weight:700}
input,select,textarea{
  border-radius:var(--radius-sm);border-color:var(--line);background:#fff;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,31,61,.1);outline:none;
}
.form-stack input{padding:.85rem 1rem}
.hint{color:var(--ink);font-size:.82rem;font-weight:500}
input[type="checkbox"],input[type="radio"]{accent-color:var(--navy)}

/* ---------- Alertas ---------- */
.alert{border-radius:var(--radius);border-left:4px solid var(--navy)}
.alert-error,.alert.is-error{border-left-color:var(--danger);background:#fdf2f2;color:#7f1d24}
.alert-success,.alert.is-success{border-left-color:var(--success);background:var(--success-soft);color:#14532d}

/* ---------- Tablas ---------- */
table{border-color:var(--line)}
thead th{
  background:var(--surface-soft);color:var(--navy);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
tbody tr{border-color:var(--line)}
tbody tr:hover{background:var(--surface-soft)}

/* ---------- Paneles vacíos ---------- */
.empty-panel,.empty-state{
  background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--radius-lg);padding:2.25rem 1.75rem;text-align:center;
}
.empty-panel h2,.empty-state h2{color:var(--navy);font-family:var(--font-display);margin:.35rem 0 .5rem}
.empty-panel p,.empty-state p{max-width:52ch;margin:0 auto 1.25rem;color:var(--ink)}

/* ---------- Lista de elementos ---------- */
.list{display:grid;gap:.85rem;margin:0;padding:0;list-style:none}
.list-item{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.1rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-xs);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease);
}
.list-item:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);border-color:var(--gold-soft)}
.list-item .list-body{min-width:0;flex:1}
.list-item .list-title{
  display:block;color:var(--navy);font-weight:700;text-decoration:none;
}
a.list-item:hover .list-title{color:var(--gold-ink)}
/* Global: esta clase tambien se usa fuera de .list-item (tarjetas de curso,
   panel de pendientes). Antes solo estaba definida dentro de .list-item, por lo
   que quedaba como bloque simple y el <span class="bar"> se renderizaba en
   linea, provocando que badge y hint se montaran sobre los botones. */
.list-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-top:.3rem;font-size:.8rem;color:var(--ink);
}
.list-item .list-progress{flex:0 0 8rem}
@media (max-width:640px){
  .list-item{flex-wrap:wrap}
  .list-item .list-progress{flex:1 1 100%}
}

/* ---------- Ajustes de pantallas estrechas ---------- */
@media (max-width:640px){
  /* La barra superior se apila: marca arriba, navegacion abajo en dos lineas. */
  .topbar{flex-direction:column;align-items:stretch;padding:.75rem 1rem}
  .topnav{margin-left:0;gap:.3rem}
  .topnav a{padding:.45rem .62rem;font-size:.82rem}
  .topnav .topnav-exit{margin-left:auto}
  .cover-grid{grid-template-columns:1fr}
  .grid-metrics{grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
}
@media (max-width:420px){
  /* Botones de accion a ancho completo: evita textos apretados. */
  .cover-actions{flex-direction:column;align-items:stretch}
  .cover-actions .button{width:100%}
  .cover-progress__row .hint{margin-left:0}
}

/* ---------- Rejillas ---------- */
.grid-metrics{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));
}
.grid-split{
  display:grid;gap:1.25rem;align-items:start;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
}
/* minmax(0,1fr) y no 1fr: la columna no debe crecer por encima del contenedor
   aunque un hijo tenga un min-content grande. */
@media (max-width:900px){.grid-split{grid-template-columns:minmax(0,1fr)}}

/* ---------- Pie ---------- */
.site-foot{
  margin-top:3rem;padding:2rem 0 2.5rem;border-top:1px solid var(--line);
  color:var(--ink);font-size:.85rem;text-align:center;
}
.site-foot a{color:var(--navy);font-weight:600}

/* ---------- Impresión ---------- */
@media print{
  .topbar,.sidebar,.site-foot,.button,.skip-link{display:none!important}
  body{background:#fff}
  .card,.card-hover{box-shadow:none;border-color:#ccc}
  .rc-lightbox,.lesson-toc{display:none!important}
}

/* =========================================================
   Contenido enriquecido (lecciones del diplomado)
   Clases generadas por el conversor DOCX -> HTML:
   h2/h3 con id, .rc-note--*, .rc-table, .rc-list, .rc-quote,
   .rc-lead, .rc-closing, .rc-figure y .rc-links
   ========================================================= */
.rich-copy{
  color:var(--ink);
  font-size:1.0625rem;
  line-height:1.75;
  max-width:70ch;
}
.rich-copy > *:first-child{margin-top:0}
.rich-copy > *:last-child{margin-bottom:0}
.rich-copy p{margin:0 0 1.15em}
.rich-copy a{
  color:var(--navy);font-weight:600;
  text-decoration:underline;text-underline-offset:.18em;
  text-decoration-color:var(--gold-soft);
}
.rich-copy a:hover{text-decoration-color:var(--gold)}
.rich-copy strong{color:var(--navy);font-weight:700}
.rich-copy em{color:var(--navy-soft)}

/* Titulos: el h2 es el titulo de seccion y lleva el id de anclaje */
.rich-copy h2{
  font-family:var(--font-display);
  font-size:1.75rem;line-height:1.25;
  color:var(--navy);font-weight:700;
  margin:2.4em 0 .7em;
  padding-bottom:.35em;
  border-bottom:1px solid var(--line);
  scroll-margin-top:5rem;
}
.rich-copy h3{
  font-family:var(--font-sans);
  font-size:1.1875rem;line-height:1.35;
  color:var(--navy-soft);font-weight:700;
  margin:1.9em 0 .55em;
  scroll-margin-top:5rem;
}
.rich-copy h2:first-child{margin-top:0}
.rich-copy .rc-closing{
  border-bottom:0;
  color:var(--gold-ink);
  font-style:italic;
}

/* Entradilla con etiqueta en negrita */
.rich-copy .rc-lead{margin-bottom:1em}
.rich-copy .rc-lead strong{
  color:var(--gold-ink);
  letter-spacing:.01em;
}

/* Parrafo que es solo un enlace */
.rich-copy .rc-links a{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82em;word-break:break-all;
}

/* Cita */
.rich-copy .rc-quote{
  margin:1.5em 0;
  padding:.35em 0 .35em 1.25em;
  border-left:3px solid var(--gold);
  font-family:var(--font-display);
  font-size:1.1875rem;line-height:1.55;
  color:var(--navy-soft);
  font-style:italic;
}

/* Listas */
.rich-copy .rc-list{
  margin:0 0 1.3em;
  padding-left:0;
  list-style:none;
}
.rich-copy .rc-list li{
  position:relative;
  padding-left:1.6em;
  margin-bottom:.6em;
}
.rich-copy .rc-list li::before{
  content:"";
  position:absolute;left:.35em;top:.72em;
  width:.4em;height:.4em;
  border-radius:50%;
  background:var(--gold);
}

/* ---------- Recuadros tematicos ---------- */
.rc-note{
  margin:1.75em 0;
  padding:1.15rem 1.35rem 1.15rem 1.35rem;
  border-radius:var(--radius);
  border:1px solid var(--line);
  border-left:4px solid var(--navy-soft);
  background:var(--surface-soft);
}
.rc-note > *:last-child{margin-bottom:0}
.rc-note__label{
  margin:0 0 .55em!important;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.rc-note--purpose{
  border-left-color:var(--navy);
  background:linear-gradient(180deg,#f4f7fc,#eef2f9);
}
.rc-note--purpose .rc-note__label{color:var(--navy)}
.rc-note--outcomes{
  border-left-color:var(--success);
  background:var(--success-soft);
}
.rc-note--outcomes .rc-note__label{color:var(--success)}
.rc-note--example{
  border-left-color:var(--gold);
  background:#fdfaf1;
}
.rc-note--example .rc-note__label{color:var(--gold-ink)}
.rc-note--activity{
  border-left-color:var(--warning);
  background:var(--warning-soft);
}
.rc-note--activity .rc-note__label{color:var(--warning)}
.rc-note--remember,
.rc-note--deeper{
  border-left-color:var(--navy-soft);
  background:var(--surface-sunken);
}
.rc-note--remember .rc-note__label,
.rc-note--deeper .rc-note__label{color:var(--navy-soft)}

/* ---------- Tablas ---------- */
.rich-copy .rc-table{
  width:100%;
  margin:1.75em 0;
  border-collapse:collapse;
  font-size:.9375rem;
  line-height:1.55;
  display:block;
  overflow-x:auto;
}
.rich-copy .rc-table td{
  border:1px solid var(--line);
  padding:.65em .8em;
  vertical-align:top;
  background:var(--white);
}
.rich-copy .rc-table tr:first-child td{
  background:var(--surface-sunken);
  font-weight:700;
  color:var(--navy);
}

/* ---------- Figuras con lightbox ---------- */
.rc-figure{
  margin:2em 0;
  max-width:100%;
}
.rc-figure__link{
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface-sunken);
  box-shadow:var(--shadow-sm);
  cursor:zoom-in;
}
.rc-figure__link img{
  display:block;
  width:100%;
  height:auto;
  transition:transform .35s var(--ease);
}
.rc-figure__link:hover img{transform:scale(1.015)}
.rc-figure__link:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}
.rc-figure figcaption{
  margin-top:.6rem;
  font-size:.875rem;
  line-height:1.5;
  color:var(--ink);
  text-align:center;
}

/* ---------- Visor de imagenes ---------- */
.rc-lightbox{
  position:fixed;inset:0;z-index:200;
  display:none;
  align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(10,22,45,.92);
  backdrop-filter:blur(3px);
}
.rc-lightbox.is-open{display:flex}
.rc-lightbox__figure{
  margin:0;
  max-width:min(1200px,100%);
  max-height:100%;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.rc-lightbox__img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 8rem);
  width:auto;height:auto;
  object-fit:contain;
  border-radius:var(--radius-sm);
  background:#fff;
}
.rc-lightbox__caption{
  color:var(--gold-pale);
  font-size:.95rem;
  text-align:center;
  line-height:1.5;
}
.rc-lightbox__close,
.rc-lightbox__nav{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border:1px solid rgba(250,248,243,.3);
  border-radius:50%;
  background:rgba(15,31,61,.7);
  color:var(--ivory);
  font-size:1.5rem;line-height:1;
  cursor:pointer;
  transition:background .2s var(--ease);
}
.rc-lightbox__close:hover,
.rc-lightbox__nav:hover{background:var(--navy)}
.rc-lightbox__close{top:1.1rem;right:1.1rem}
.rc-lightbox__nav--prev{left:1.1rem;top:50%;transform:translateY(-50%)}
.rc-lightbox__nav--next{right:1.1rem;top:50%;transform:translateY(-50%)}
.rc-lightbox[hidden]{display:none}

/* ---------- Indice de la leccion ----------
   Pegajoso (sigue disponible durante toda la leccion) y plegable (plegado
   ocupa una sola linea). Abierto se limita al alto disponible y scrollea por
   dentro, de modo que nunca tapa el documento. */
.lesson-toc{
  position:sticky;
  top:calc(var(--topbar-h,4.4rem) + .6rem);
  z-index:20;
  margin:0 0 2rem;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-soft);
  box-shadow:var(--shadow-sm);
}
.lesson-toc__bar{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem 1rem;
  cursor:pointer;
  list-style:none;
  border-radius:var(--radius);
}
.lesson-toc__bar::-webkit-details-marker{display:none}
.lesson-toc__bar::marker{content:""}
.lesson-toc__bar:hover{background:rgba(201,154,42,.08)}
.lesson-toc__title{
  margin:0;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.lesson-toc__count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.5rem;height:1.5rem;padding:0 .4rem;
  border-radius:999px;
  background:var(--gold);color:var(--navy-deep);
  font-size:.72rem;font-weight:800;
}
.lesson-toc__hint{
  margin-left:auto;
  color:var(--muted);
  font-size:.75rem;font-weight:600;
}
.lesson-toc__hint::after{content:"Ver secciones"}
.lesson-toc[open] .lesson-toc__hint::after{content:"Plegar"}
/* Chevron que gira al desplegarse. */
.lesson-toc__bar::after{
  content:"";flex:0 0 auto;
  width:.5rem;height:.5rem;
  margin-left:.4rem;
  border-right:2px solid var(--gold-ink);
  border-bottom:2px solid var(--gold-ink);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--ease);
}
.lesson-toc[open] .lesson-toc__bar::after{transform:rotate(225deg) translate(-2px,-2px)}
/* Abierto se limita a menos de la mitad de la pantalla y scrollea por dentro:
   nunca llega a tapar la seccion a la que se acaba de saltar. */
.lesson-toc ol{
  margin:0;padding:0 1.35rem 1.15rem;list-style:none;
  columns:2;column-gap:1.75rem;
  max-height:min(42vh,22rem);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.lesson-toc li{margin-bottom:.4em;break-inside:avoid}
.lesson-toc a{
  display:block;
  color:var(--navy);
  font-size:.9375rem;
  line-height:1.45;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.lesson-toc a:hover{border-bottom-color:var(--gold)}
.lesson-toc--nested ol{columns:1;padding-left:1rem}
.lesson-toc--nested li{font-size:.9rem}
/* El salto por ancla debe dejar el encabezado por debajo de la barra superior
   y del indice; --toc-h lo publica JS con el alto real del panel. */
.rich-copy h2[id],.rich-copy h3[id]{
  scroll-margin-top:calc(var(--topbar-h,4.4rem) + var(--toc-h,2.8rem) + .75rem);
}
@media (max-width:720px){
  .lesson-toc ol{columns:1;padding:0 1rem 1rem}
  .rich-copy{font-size:1rem}
  .rich-copy h2{font-size:1.5rem}
  .rich-copy h3{font-size:1.075rem}
  .rc-lightbox__nav--prev{left:.4rem}
  .rc-lightbox__nav--next{right:.4rem}
  .rc-lightbox__close{top:.5rem;right:.5rem}
}
/* En vertical la barra superior envuelve a dos filas. Se aprieta (logo y
   pastillas mas pequenos) para que el indice pegajazo conserve sitio util;
   si aun asi no cabe plegado, se le deja solo la linea de resumen. */
@media (max-width:800px){
  .topbar{padding:.5rem .75rem;row-gap:.3rem}
  .topbar .brand img{height:1.5rem}
  .topnav{gap:.2rem}
  .topnav a{padding:.4rem .6rem;font-size:.8rem}
  .topnav .topnav-exit{margin-left:.2rem}
  .lesson-toc__bar{padding:.45rem .75rem}
}

/* recursos del modulo en la pagina del curso */
.module-resources{margin-top:.9rem}
.module-resources>summary{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--navy);padding:.5rem .75rem;background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;list-style:none}
.module-resources>summary::-webkit-details-marker{display:none}
.module-resources>summary::before{content:'+ ';font-weight:700}
.module-resources[open]>summary::before{content:'- '}
.module-resources>summary:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.module-resources .resource-list{margin-top:.6rem}

/* ===== Acordeon de modulos y unidades (pagina del curso) ===== */
.module-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 .9rem}
.module-accordion{display:grid;gap:.7rem}
.module-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs);overflow:hidden}
.module-block[open]{box-shadow:var(--shadow-sm)}
.module-block__head{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;cursor:pointer;list-style:none;background:var(--surface);transition:background .18s var(--ease)}
.module-block__head::-webkit-details-marker{display:none}
.module-block__head:hover{background:var(--surface-soft)}
.module-block[open]>.module-block__head{border-bottom:1px solid var(--line);background:var(--surface-soft)}
.module-block__body{flex:1;min-width:0}
.module-block__title{display:block;color:var(--navy);font-weight:700;font-size:1.02rem;line-height:1.3}
.module-block__meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.2rem;color:var(--ink);font-size:.8rem}
.module-block__content{padding:1rem}
.module-block__chevron{flex:none;width:.55rem;height:.55rem;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg);transition:transform .2s var(--ease);margin-left:.15rem}
details[open]>.module-block__head .module-block__chevron{transform:rotate(45deg)}
.module-teacher{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin:0 0 1.1rem;padding:1.35rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,var(--surface-soft),var(--white));box-shadow:var(--shadow-xs);text-align:center}
.module-teacher__photo{display:block;flex:0 0 10rem;width:10rem;max-width:10rem;height:10rem;min-height:10rem;border:4px solid var(--white);border-radius:50%;object-fit:cover;object-position:center 25%;box-shadow:0 5px 20px rgba(13,27,53,.18)}
.module-teacher__details{width:100%;min-width:0}
.module-teacher__details h3{margin:0;color:var(--navy);font:clamp(1.2rem,2vw,1.45rem)/1.25 Georgia,serif}
.module-teacher__title{margin:.3rem 0 0;color:var(--ink);font-size:.82rem;font-weight:650;line-height:1.5}
.module-teacher__bio{max-width:75ch;margin:.55rem auto 0;color:var(--muted);font-size:.8rem;line-height:1.6}
.module-teacher-editor{margin:0 0 1.25rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-soft)}
.module-teacher-editor>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;cursor:pointer;list-style:none;color:var(--navy)}
.module-teacher-editor>summary::-webkit-details-marker{display:none}
.module-teacher-editor>summary strong,.module-teacher-editor>summary small{display:block}
.module-teacher-editor>summary small{margin-top:.2rem;color:var(--muted);font-size:.78rem;font-weight:400}
.module-teacher-editor[open]>summary{border-bottom:1px solid var(--line)}
.module-teacher-editor>.compact-form{padding:1rem}
.module-teacher-editor .compact-form label small{display:block;margin-top:.25rem;color:var(--muted);font-size:.75rem;font-weight:400}
.module-teacher-editor__current{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.module-teacher-editor__current img{width:4rem;height:4rem;border-radius:50%;object-fit:cover}
.module-teacher-editor__current label{display:flex;align-items:center;gap:.4rem;font-size:.85rem}

.unit-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}
.unit-block{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;min-width:0}
.unit-block[open]{background:var(--surface);box-shadow:var(--shadow-xs)}
.unit-block__head{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;cursor:pointer;list-style:none;transition:background .18s var(--ease);min-width:0}
.unit-block__head::-webkit-details-marker{display:none}
.unit-block__head:hover{background:var(--surface-sunken)}
.unit-block__body{flex:1;min-width:0}
.unit-block__title{display:block;color:var(--navy);font-weight:600;font-size:.93rem;line-height:1.35}
.unit-block__meta{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:.15rem;color:var(--ink);font-size:.76rem}
.unit-block[data-completed="1"] .unit-block__title{color:var(--success)}
.unit-open{flex:0 0 auto;min-width:0;font-size:.78rem;font-weight:600;color:var(--gold-ink);text-decoration:none;white-space:nowrap;padding:.3rem .55rem;border-radius:999px;border:1px solid var(--gold-soft);background:var(--white)}
.unit-open:hover{background:var(--gold-pale);color:var(--navy)}
.unit-block__content{padding:.2rem .85rem 1rem;display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem}
.unit-block__content>*{min-width:0}
.unit-lead{margin:0;color:var(--ink);font-size:.86rem;line-height:1.6}
.module-resources{margin-top:1rem}
@media (max-width:640px){
  .unit-open__long{display:none}
  .module-block__content{padding:.75rem}
  .unit-block__head{padding:.65rem .7rem;gap:.55rem}
  .module-teacher{gap:.65rem;padding:1rem}
  .module-teacher__photo{flex-basis:8rem;width:8rem;max-width:8rem;height:8rem;min-height:8rem}
}