/* ==========================================================================
   Campus Alumno — hoja de estilos sobre el sistema Modernist
   --------------------------------------------------------------------------
   Se carga DESPUÉS de `modernist.css` y `socorrista.css`, y sin capa, así que
   le gana al sistema donde haga falta. El sistema aporta los tokens, la
   tipografía Archivo y la base tipográfica; acá viven los componentes propios
   del campus (el shell, las tarjetas de curso, el temario, el reproductor).

   >>> POR QUÉ NO SE REESCRIBIÓ EL MARCADO DE LAS 7 PANTALLAS <<<
   Porque no hacía falta: el HTML del campus no tiene un solo color propio
   (cero hex sueltos), todo el aspecto salía de este archivo. Reescribiendo la
   hoja cambia el aspecto entero sin tocar el marcado ni el JavaScript, que es
   mucho menos riesgoso que rehacer siete pantallas a mano.
   Los nombres de clase se conservaron TODOS, incluidos los que el JavaScript
   enciende y apaga: hidden, open, show, urgent, is-done, checked, fail,
   active, done, locked, current.

   Modo oscuro: eliminado a propósito (CLAUDE.md 13.2). Modernist es un sistema
   de fondo claro únicamente. Nadie lo había pedido; venía del diseño anterior.
   ========================================================================== */

/* ── Alias de los tokens viejos ─────────────────────────────────────────────
   Los nombres de antes se mantienen apuntando a los tokens de Modernist. No es
   por nostalgia: hay estilos en línea en el marcado que usan `var(--text-muted)`,
   y así siguen funcionando sin tocar el HTML. También sirve de traducción para
   quien conocía la hoja vieja. */
:root {
  --red-50:  var(--color-accent-100);
  --red-100: var(--color-accent-200);
  --red-600: var(--color-accent);
  --red-700: var(--color-accent-hover);
  --red-800: var(--color-accent-active);

  --bg:          var(--color-bg);
  --surface:     var(--color-bg);
  --surface-alt: var(--color-surface);
  --border:        color-mix(in srgb, var(--color-text) 18%, transparent);
  --border-strong: var(--color-divider);

  /* Los dos tonos de texto secundario salen del SISTEMA, no de acá: están
     calculados para pasar el contraste mínimo (ver socorrista.css). El campus
     es justo donde más importa — las etiquetas del contador de vencimiento son
     de 9px —, y en la hoja vieja estaban en 2,9:1, muy por debajo del mínimo. */
  --text:       var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-faint: var(--color-text-faint);

  /* Estado: los dos únicos colores que Modernist no trae (CLAUDE.md 13.7). */
  --success:        var(--color-ok-700);
  --success-bg:     var(--color-ok-100);
  --success-border: var(--color-ok-300);
  --warn:           var(--color-warn-700);
  --warn-bg:        var(--color-warn-100);
  --warn-border:    var(--color-warn-300);
  /* Peligro usa el rojo de la marca; bloqueado usa los neutros del sistema. */
  --danger:        var(--color-accent-700);
  --danger-bg:     var(--color-accent-100);
  --danger-border: var(--color-accent-300);
  --lock:    var(--color-neutral-700);
  --lock-bg: var(--color-neutral-200);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
button { font-family: inherit; color: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background: none; border: none; padding: 0; margin: 0; text-align: inherit; font-size: inherit; }
a { color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
.hidden { display: none !important; }
.tabular { font-variant-numeric: tabular-nums; }

/* Foco de teclado: el contorno rojo de Modernist, nunca el azul del navegador
   ni un anillo redondeado (que contradice el cero-redondeo del sistema). */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.app { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: var(--space-8) var(--space-4) 64px; }
@media (min-width: 768px) { .wrap { padding-inline: var(--space-6); } }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-badge {
  width: 34px; height: 34px; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.brand {
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  letter-spacing: -0.02em; line-height: 1.15; min-width: 0;
}
.brand small {
  display: block; font-family: var(--font-body); font-weight: 400; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-top: 2px;
}

.topnav { display: flex; align-items: center; gap: var(--space-6); }
.topnav a {
  font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--color-text); text-decoration: none; }
.topnav a.active { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }

/* En el celular la barra superior se apretaba: la marca se partía en dos
   líneas y "Mis cursos" en tres. Se achica lo accesorio y se dejan intactos
   el nombre y el acceso al menú, que es lo que se usa. */
@media (max-width: 560px) {
  .topbar { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .topnav { gap: var(--space-3); }
  .brand { font-size: 14px; }
  .brand small { display: none; }
  .logo-badge { width: 28px; height: 28px; }
  /* Se esconde el NOMBRE, no el avatar. Ojo: el avatar también es un <span>,
     así que un `.user-chip span` a secas lo hace desaparecer. */
  .user-chip > span:not(.avatar) { display: none; }
  .user-chip { padding: 5px; }
}

/* ── Menú del usuario ───────────────────────────────────────────────────── */
.user-menu { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px;
  border: 2px solid var(--color-divider); background: var(--color-bg); cursor: pointer;
}
.user-chip:hover { background: var(--color-surface); }
.user-chip span { font-size: 13px; font-weight: 600; }
.avatar {
  width: 28px; height: 28px; flex: none; overflow: hidden;
  background: var(--color-accent); color: var(--color-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.chip-caret { color: var(--text-faint); transition: transform .15s ease; flex: none; }
.user-menu.open .chip-caret { transform: rotate(180deg); }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 60;
  background: var(--color-bg); border: 2px solid var(--color-divider);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column;
}
.user-dropdown a, .user-dropdown button {
  display: block; width: 100%; text-align: left; padding: 11px 14px;
  font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none;
  background: none; border: none;
}
.user-dropdown a + a, .user-dropdown button { border-top: 1px solid var(--border); }
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--color-surface); text-decoration: none; }
.user-dropdown button { color: var(--danger); }

.back-link {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-4);
  font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none;
}
.back-link:hover { color: var(--color-accent); text-decoration: none; }

/* ── Tarjetas de formulario ─────────────────────────────────────────────── */
.card {
  background: var(--color-bg); border: 2px solid var(--color-divider);
  border-radius: 0; padding: var(--space-6); box-shadow: none; max-width: 460px;
}
.card + .card { margin-top: var(--space-6); }
.card h2 { font-size: 19px; margin: 0 0 4px; }
.card .card-hint { margin: 0 0 var(--space-4); font-size: 14px; color: var(--text-muted); }

/* ── Campos ─────────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-4); }
.field label {
  display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
}
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; min-height: 44px; font-size: 15px;
  border: 2px solid var(--color-divider); border-radius: 0;
  background: var(--color-surface); color: var(--color-text);
  caret-color: var(--color-accent);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--color-accent); outline-offset: -2px;
  border-color: var(--color-accent); background: var(--color-bg);
}
.field input:disabled { opacity: .55; cursor: not-allowed; }
.field .error-msg { font-size: 13px; font-weight: 600; color: var(--danger); min-height: 18px; margin: 8px 0 0; }

.password-row { position: relative; display: flex; }
.password-row input { padding-right: 44px; }
.password-toggle {
  position: absolute; right: 2px; top: 2px; bottom: 2px; width: 40px;
  display: flex; align-items: center; justify-content: center; color: var(--text-faint);
}
.password-toggle:hover { color: var(--color-text); }
.password-toggle svg { width: 18px; height: 18px; }

/* ── Botones ────────────────────────────────────────────────────────────────
   Las variantes del sistema ya sirven; acá sólo se ajusta lo propio del campus
   (alto cómodo para el dedo y ancho completo). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid transparent; border-radius: 0;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  padding: 10px 18px; min-height: 44px; cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.btn-primary:active { background: var(--color-accent-active); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; background: var(--color-accent); }
.btn-secondary, .btn-ghost {
  background: var(--color-bg); border-color: var(--color-divider); color: var(--color-text);
}
.btn-secondary:hover, .btn-ghost:hover {
  background: var(--color-surface); border-color: var(--color-accent); color: var(--color-accent);
}
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; min-height: 36px; font-size: 13px; }

.login-forgot {
  display: block; width: 100%; text-align: center; margin-top: var(--space-4);
  font-size: 14px; font-weight: 600; color: var(--text-muted);
}
.login-forgot:hover { color: var(--color-accent); text-decoration: underline; }

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); padding: var(--space-6);
}
.login-card {
  width: 100%; max-width: 400px; background: var(--color-bg);
  border: 2px solid var(--color-divider); border-top-width: 6px;
  border-top-color: var(--color-accent);
  border-radius: 0; padding: var(--space-8); box-shadow: none;
}
.login-logo { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); text-align: left; }
.login-logo .logo-badge { width: 48px; height: 48px; }
.login-logo h1 { font-size: 25px; }
.login-logo p { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }

/* ── Encabezado de pantalla ─────────────────────────────────────────────── */
.page-head { margin-bottom: var(--space-8); }
.eyebrow {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-700);
  margin: 0 0 var(--space-2);
}
.page-head h1 { font-size: clamp(26px, 4vw, 34px); }
.page-head p { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: 15px; }

/* ── Mis cursos ─────────────────────────────────────────────────────────── */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); }
.course-card {
  background: var(--color-bg); border: 2px solid var(--color-divider); border-radius: 0;
  overflow: hidden; box-shadow: none; display: flex; flex-direction: column;
}
/* Modernist: nada flota. Nada de levantar la tarjeta al pasar el mouse; el
   estado se marca con el borde, que es más honesto y no mueve la página. */
.course-card:not(.is-locked):hover { border-color: var(--color-accent); }
.course-cover {
  aspect-ratio: 16/9; background: var(--color-accent);
  display: flex; align-items: flex-end; padding: var(--space-3); position: relative; overflow: hidden;
}
.course-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.course-cover.cover-locked { background: var(--color-neutral-600); }
.course-badge {
  position: relative; font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 0; color: var(--color-on-accent); box-shadow: none;
}
.course-badge.status-progress { background: var(--color-accent-700); }
.course-badge.status-approved { background: var(--color-ok-700); }
.course-badge.status-expired  { background: var(--color-neutral-700); }
.course-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.course-body h3 { font-size: 19px; line-height: 1.25; }

.progress-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.progress-bar { height: 8px; border-radius: 0; background: var(--color-surface); border: 1px solid var(--border); overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-accent); border-radius: 0; }
.progress-fill.success { background: var(--color-ok-600); }

.countdown-label {
  font-family: var(--font-heading); font-weight: 800; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin: 0 0 6px;
}
.countdown {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: 0; background: var(--color-surface); border: 2px solid var(--border);
}
.countdown.urgent { background: var(--color-warn-100); border-color: var(--color-warn-300); }
.countdown-icon { font-size: 15px; }
.countdown-timer { display: flex; gap: var(--space-3); font-variant-numeric: tabular-nums; }
.countdown-timer div { display: flex; flex-direction: column; align-items: flex-start; min-width: 30px; }
.countdown-timer b { font-family: var(--font-heading); font-size: 15px; font-weight: 800; line-height: 1; }
.countdown-timer span { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.countdown.urgent .countdown-timer b { color: var(--color-warn-800); }

.status-pill {
  align-self: flex-start; font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.04em; padding: 4px 10px; border-radius: 0; border: 2px solid;
}
.status-pill.approved { background: var(--color-ok-100); border-color: var(--color-ok-300); color: var(--color-ok-800); }
.status-pill.expired  { background: var(--color-accent-100); border-color: var(--color-accent-300); color: var(--color-accent-800); }
.course-card.is-locked { opacity: .8; }
.expired-note { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.empty-state { padding: 64px var(--space-4); color: var(--text-muted); border: 2px solid var(--color-divider); }

/* ── Foto de perfil ─────────────────────────────────────────────────────── */
.avatar-upload-row { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.avatar-lg {
  width: 88px; height: 88px; flex: none; overflow: hidden;
  background: var(--color-accent); color: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 32px;
}
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.avatar-upload-status { width: 100%; font-size: 13px; color: var(--text-muted); }

/* ── Aviso flotante ─────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: var(--space-6); left: 50%;
  transform: translateX(-50%) translateY(16px); opacity: 0;
  background: var(--color-text); color: var(--color-bg);
  padding: 12px 18px; border-radius: 0; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg); transition: .25s ease; z-index: 100; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Ventana modal ──────────────────────────────────────────────────────── */
.modal-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-8) var(--space-4); overflow-y: auto;
}
.modal {
  background: var(--color-bg); border: 2px solid var(--color-divider); border-radius: 0;
  width: 100%; max-width: 420px; box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4); border-bottom: 2px solid var(--color-divider);
}
.modal-header h2 { font-size: 19px; }
.modal-close { color: var(--text-muted); font-size: 22px; line-height: 1; padding: 4px 8px; }
.modal-close:hover { background: var(--color-surface); color: var(--color-text); }
.modal-body { padding: var(--space-4); }
.form-footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ── Ficha del curso ────────────────────────────────────────────────────── */
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: var(--space-4); flex-wrap: wrap; }
.crumb a { color: var(--text-muted); font-weight: 600; text-decoration: none; }
.crumb a:hover { color: var(--color-accent); text-decoration: none; }
.crumb .sep { color: var(--text-faint); }
.crumb .current { color: var(--color-text); font-weight: 600; }

.detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 821px) { .detail-grid { grid-template-columns: 1.6fr 1fr; } }

.module { background: var(--color-bg); border: 2px solid var(--color-divider); border-radius: 0; margin-bottom: var(--space-4); overflow: hidden; }
.module-head {
  padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--color-surface); border-bottom: 2px solid var(--color-divider);
}
.module-head h3 { font-size: 16px; }
.module-progress { font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--text-muted); flex: none; }

.lesson-row {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); width: 100%;
  border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: .15s;
}
.lesson-row:last-child { border-bottom: none; }
.lesson-row:not(.locked):hover { background: var(--color-surface); }
.lesson-row.locked { cursor: not-allowed; color: var(--text-faint); }
.lesson-icon {
  width: 30px; height: 30px; border-radius: 0; display: flex; align-items: center; justify-content: center;
  flex: none; font-size: 13px; border: 2px solid var(--color-divider);
}
.lesson-row.done .lesson-icon { background: var(--color-ok-100); border-color: var(--color-ok-600); color: var(--color-ok-800); }
.lesson-row.current .lesson-icon { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.lesson-row.locked .lesson-icon { background: var(--lock-bg); border-color: var(--border); color: var(--lock); }
.lesson-info { flex: 1; min-width: 0; }
.lesson-info b { display: block; font-size: 15px; font-weight: 600; }
.lesson-info span { font-size: 12px; color: var(--text-faint); }
.lesson-row.current .lesson-info b { color: var(--color-accent-700); }
.lesson-tag { font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); flex: none; }

.side-card { background: var(--color-bg); border: 2px solid var(--color-divider); border-radius: 0; padding: var(--space-4); margin-bottom: var(--space-4); }
.side-card h3 { font-size: 16px; margin-bottom: var(--space-3); }
.disclaimer-box {
  border: 2px solid var(--color-divider); border-left-width: 6px;
  border-left-color: var(--color-warn-500); border-radius: 0;
  padding: var(--space-4); font-size: 13px; color: var(--text-muted); line-height: 1.55;
}
.disclaimer-box b { color: var(--color-text); font-family: var(--font-heading); font-weight: 800; }

/* ── Pantalla de lección ────────────────────────────────────────────────── */
.lesson-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.curriculum-sidebar { order: 2; position: static; max-height: none; }
.lesson-main { order: 1; }
@media (min-width: 901px) {
  .lesson-layout { grid-template-columns: 280px 1fr; }
  .curriculum-sidebar { order: 0; position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; }
  .lesson-main { order: 0; }
}
.curriculum-sidebar {
  background: var(--color-bg); border: 2px solid var(--color-divider); border-radius: 0;
  padding: var(--space-4); display: flex; flex-direction: column; gap: 2px;
}
.curriculum-head { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 2px solid var(--color-divider); }
.curriculum-course-link { font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.curriculum-course-link:hover { color: var(--color-accent); text-decoration: none; }
.curriculum-module + .curriculum-module { margin-top: var(--space-4); }
.curriculum-module h4 {
  font-family: var(--font-heading); font-weight: 800; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint);
  margin: 0 0 6px; padding: 0;
}
.curriculum-lesson {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: 8px 6px; border-radius: 0; border: none; background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer; font-size: 13px;
}
.curriculum-lesson:not(.locked):not(.active):hover { background: var(--color-surface); }
.curriculum-lesson.locked { cursor: not-allowed; color: var(--text-faint); }
.curriculum-lesson.active { background: var(--color-accent-100); font-weight: 700; color: var(--color-accent-800); }
.curriculum-lesson .ci {
  width: 20px; height: 20px; border-radius: 0; display: flex; align-items: center; justify-content: center;
  flex: none; font-size: 10px; border: 2px solid var(--color-divider);
}
.curriculum-lesson.done .ci { background: var(--color-ok-100); border-color: var(--color-ok-600); color: var(--color-ok-800); }
.curriculum-lesson.active .ci { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.curriculum-lesson.locked .ci { background: var(--lock-bg); border-color: var(--border); color: var(--lock); }
.curriculum-lesson .ct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.video-box { background: var(--color-neutral-900); border-radius: 0; aspect-ratio: 16/9; position: relative; overflow: hidden; box-shadow: none; }
.video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.video-progress-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); font-size: 13px; color: var(--text-muted); gap: var(--space-3); flex-wrap: wrap; }
.lesson-title-row { margin-top: var(--space-6); }
.lesson-title-row h1 { font-size: clamp(22px, 3.5vw, 30px); }
.lesson-title-row p { margin: var(--space-2) 0 0; font-size: 14px; color: var(--text-muted); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

.btn-complete { background: var(--color-ok-700); color: var(--color-on-accent); border-color: var(--color-ok-700); }
.btn-complete:hover { background: var(--color-ok-800); border-color: var(--color-ok-800); color: var(--color-on-accent); }
.btn-complete:disabled { background: var(--lock-bg); color: var(--text-faint); cursor: not-allowed; border-color: var(--border); }
.btn-complete.is-done { background: var(--color-ok-100); color: var(--color-ok-800); border-color: var(--color-ok-300); cursor: default; }
.btn-complete.is-done:hover { background: var(--color-ok-100); color: var(--color-ok-800); border-color: var(--color-ok-300); }

.resource-item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: 0; border: 2px solid var(--color-divider); margin-bottom: var(--space-2);
  font-size: 14px; font-weight: 600;
}
.resource-item .ico { font-size: 18px; }
.resource-item a, .resource-item button {
  margin-left: auto; font-size: 13px; color: var(--color-accent-700); text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; background: none; border: none; cursor: pointer;
}
.resource-item a:hover, .resource-item button:hover { text-decoration: underline; }
.resource-text-box {
  background: var(--color-surface); border: 2px solid var(--color-divider); border-radius: 0;
  padding: var(--space-4); font-size: 14px; line-height: 1.6; color: var(--color-text);
  white-space: pre-wrap; margin: 0 0 var(--space-3);
}

/* ── Examen ─────────────────────────────────────────────────────────────── */
.exam-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.meta-chip {
  font-family: var(--font-heading); font-weight: 800; font-size: 11px;
  letter-spacing: 0.04em; padding: 6px 12px; border-radius: 0;
  background: var(--color-surface); border: 2px solid var(--color-divider); color: var(--text-muted);
}
.q-card { background: var(--color-bg); border: 2px solid var(--color-divider); border-radius: 0; padding: var(--space-6); margin-bottom: var(--space-4); }
.q-card b.q-num { font-family: var(--font-heading); font-weight: 800; font-size: 11px; color: var(--color-accent-700); text-transform: uppercase; letter-spacing: 0.1em; }
.q-card h3 { font-size: 18px; margin-top: 6px; }
.q-options { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.q-option {
  display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-3);
  border-radius: 0; border: 2px solid var(--color-divider); font-size: 15px; cursor: pointer;
}
.q-option:hover { border-color: var(--color-accent); }
.q-option.checked { border-color: var(--color-accent); background: var(--color-accent-100); }
.q-option input { accent-color: var(--color-accent); width: 18px; height: 18px; flex: none; }

.exam-result {
  border: 2px solid var(--color-ok-300); border-top-width: 6px; border-top-color: var(--color-ok-600);
  background: var(--color-ok-100); border-radius: 0;
  padding: var(--space-8); max-width: 560px; margin: var(--space-8) auto 0;
}
.exam-result.fail { background: var(--color-accent-100); border-color: var(--color-accent-300); border-top-color: var(--color-accent); }
.exam-result .big-score {
  font-family: var(--font-heading); font-size: 56px; font-weight: 800; line-height: 1;
  color: var(--color-ok-800); font-variant-numeric: tabular-nums;
}
.exam-result.fail .big-score { color: var(--color-accent-800); }
.exam-result h2 { margin-top: var(--space-3); font-size: 25px; }
.exam-result p { color: var(--text-muted); font-size: 15px; max-width: 46ch; margin: var(--space-2) 0 0; }

/* ── Acceso vencido / bloqueado ─────────────────────────────────────────── */
.expired-screen {
  max-width: 560px; margin: var(--space-8) auto;
  background: var(--color-bg); border: 2px solid var(--color-divider);
  border-top-width: 6px; border-top-color: var(--color-warn-500);
  border-radius: 0; padding: var(--space-8); box-shadow: none;
}
.expired-screen .ico { font-size: 40px; }
.expired-screen h2 { margin-top: var(--space-3); font-size: 25px; }
.expired-screen p { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin-top: var(--space-2); }