/* ═══════════════════════════════════════════════════════════════════════════
   LMS L3 — the learner side: Mis cursos, the classroom (aula), questions inbox.
   Shared by the Admin and the client portal. Design-system tokens only: works in
   light and in the midnight-navy & gold dark theme. Prefix: lrn-.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Classroom-only tokens, the same in both themes on purpose: the video letterbox is black and document pages are paper-white.
   Everything else derives from the design-system tokens. */
:root {
  --lrn-screen: #000;
  --lrn-paper: #fff;
  --lrn-scrim: color-mix(in srgb, var(--navy-900) 60%, transparent);
  --lrn-glass: color-mix(in srgb, var(--navy-900) 94%, transparent);
  --lrn-on-navy-soft: color-mix(in srgb, var(--on-accent) 18%, transparent);
  --lrn-on-navy-hover: color-mix(in srgb, var(--on-accent) 8%, transparent);
}

.lrn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lrn-grow { flex: 1 1 auto; }
.lrn-muted { color: var(--gray-500); font-size: 12.5px; }
.lrn-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrn-danger { color: var(--red-500) !important; }

/* ── gold progress ring ── */
.lrn-ring { position: relative; display: inline-flex; width: 34px; height: 34px; flex: none; }
.lrn-ring svg { width: 100%; height: 100%; transform: rotate(0deg); }
.lrn-ring__track { fill: none; stroke: var(--gray-200); stroke-width: 3.6; }
.lrn-ring__value { fill: none; stroke: var(--gold-500); stroke-width: 3.6; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.lrn-ring__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: var(--gray-800); }
.lrn-ring__text small { font-size: 7px; font-weight: 600; }
.lrn-ring--lg { width: 96px; height: 96px; }
.lrn-bar .lrn-ring__track { stroke: var(--lrn-on-navy-soft); }
.lrn-bar .lrn-ring__text { color: var(--on-accent); }

/* ── buttons of the classroom (gold = the main action) ── */
.lrn-btn-gold, .lrn-btn-outline {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-md); padding: 7px 14px; font: 600 13px var(--font-body);
  cursor: pointer; text-decoration: none; white-space: nowrap; border: 1px solid transparent; line-height: 1.2;
}
.lrn-btn-gold { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }
.lrn-btn-gold:hover { background: var(--gold-400); border-color: var(--gold-400); text-decoration: none; color: var(--navy-900); }
.lrn-btn-outline { background: transparent; color: inherit; border-color: currentColor; }
.lrn-btn-outline:hover { background: var(--lrn-on-navy-hover); }
.lrn-btn-gold:focus-visible, .lrn-btn-outline:focus-visible, .lrn-ls:focus-visible, .lrn-tab:focus-visible, .lrn-filter:focus-visible, .lrn-mark:focus-visible {
  outline: 2px solid var(--gold-500); outline-offset: 2px;
}
.lrn-icon-btn { background: none; border: 0; color: var(--gray-500); cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); font-size: 15px; line-height: 1; }
.lrn-icon-btn:hover { color: var(--gray-900); background: var(--gray-100); }

/* ── chips, banners ── */
.lrn-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: var(--r-pill); white-space: nowrap; vertical-align: middle; }
.lrn-chip--opt { background: var(--gold-100); color: var(--gold-700); margin-left: 6px; }
.lrn-chip--free { background: var(--teal-100); color: var(--teal-500); }
.lrn-chip--ok { background: var(--green-100); color: var(--green-600); }
.lrn-chip--wait { background: var(--orange-100); color: var(--orange-500); }
.lrn-chip--lg { font-size: 12px; padding: 4px 10px; }
.lrn-banner { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-md); font-size: 13px; border: 1px solid; margin: 8px 0; }
.lrn-banner--error { background: var(--red-100); color: var(--red-600); border-color: var(--red-border); }
.lrn-banner--ok { background: var(--green-100); color: var(--green-600); border-color: var(--green-border); }
.lrn-banner--warn { background: var(--gold-100); color: var(--gold-700); border-color: var(--gold-200); }
.lrn-banner .lrn-icon-btn { margin-left: auto; color: inherit; }
.lrn-loading { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 60px 16px; color: var(--gray-500); }
.lrn-loading i { animation: lrn-spin 1s linear infinite; }
@keyframes lrn-spin { to { transform: rotate(360deg); } }

/* ═════════════════ Mis cursos ═════════════════ */
.lrn-mycourses { display: flex; flex-direction: column; gap: 16px; }
.lrn-filters { display: flex; gap: 6px; border-bottom: 1px solid var(--gray-200); }
.lrn-filter { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font: 600 13.5px var(--font-body); color: var(--gray-500); cursor: pointer; margin-bottom: -1px; }
.lrn-filter span { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: var(--r-pill); background: var(--gray-100); font-size: 11px; color: var(--gray-600); }
.lrn-filter--on { color: var(--gray-900); border-bottom-color: var(--gold-500); }
.lrn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.lrn-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.lrn-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.lrn-card__cover { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--navy-900); color: var(--gold-400); font-size: 40px; overflow: hidden; }
.lrn-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lrn-card__badge { position: absolute; top: 10px; left: 10px; display: inline-flex; gap: 4px; align-items: center; background: var(--gold-500); color: var(--navy-900); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); }
.lrn-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px; flex: 1; }
.lrn-card__title { font: 400 18px/1.25 var(--font-display); color: var(--blue-900); text-decoration: none; }
.lrn-card__title:hover { text-decoration: underline; }
.lrn-card__sub { font-size: 13px; color: var(--gray-600); }
.lrn-card__meta { display: flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--gray-500); }
.lrn-card__progress { display: flex; gap: 10px; align-items: center; margin: 6px 0 4px; }
.lrn-card__status { font-size: 13px; font-weight: 600; color: var(--gray-800); }
.lrn-card__body > a:last-child { align-self: flex-start; margin-top: auto; }
.lrn-due { font-size: 12.5px; color: var(--gray-600); }
.lrn-due--late { color: var(--red-500); font-weight: 600; }
.lrn-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 16px; text-align: center; color: var(--gray-500); background: var(--white); border: 1px dashed var(--gray-300); border-radius: var(--r-lg); }
.lrn-empty i { font-size: 38px; color: var(--gold-500); }
.lrn-empty b { color: var(--gray-800); font-size: 15px; }
.lrn-empty-sm { color: var(--gray-500); font-size: 13px; padding: 12px 0; }

/* ═════════════════ the classroom ═════════════════ */
.lrn-room { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.lrn-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--navy-900); color: var(--on-accent); }
.lrn-bar__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lrn-bar__back { color: var(--on-accent); opacity: .8; font-size: 18px; text-decoration: none; }
.lrn-bar__back:hover { opacity: 1; }
.lrn-bar__course { font: 400 18px/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrn-bar__module { color: var(--gold-400); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lrn-bar__side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lrn-bar__pct { font-size: 13px; opacity: .9; }
.lrn-room__banner { margin: 10px 16px 0; }

.lrn-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 60vh; position: relative; }
.lrn-main { padding: 16px 20px 24px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lrn-side { border-left: 1px solid var(--gray-200); background: var(--gray-50); min-width: 0; }
.lrn-only-narrow { display: none !important; }

.lrn-lesson-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lrn-eyebrow { color: var(--gold-600); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lrn-lesson-title { font: 400 24px/1.2 var(--font-display); color: var(--blue-900); margin: 2px 0 0; }

/* stage: the lesson's content */
.lrn-stage { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--gray-100); }
.lrn-stage--video { background: var(--lrn-screen); aspect-ratio: 16 / 9; max-height: 70vh; }
.lrn-stage--video video { width: 100%; height: 100%; display: block; background: var(--lrn-screen); }
.lrn-stage--image { display: flex; justify-content: center; padding: 12px; }
.lrn-stage--image img { max-width: 100%; max-height: 70vh; border-radius: var(--r-sm); box-shadow: var(--shadow-md); }
.lrn-stage--msg { display: flex; align-items: center; justify-content: center; min-height: 260px; text-align: center; color: var(--gray-500); padding: 24px; }
.lrn-stage--msg i { font-size: 34px; color: var(--gold-500); }
.lrn-stage__err { position: absolute; left: 12px; right: 12px; top: 12px; background: var(--red-100); color: var(--red-600); padding: 8px 12px; border-radius: var(--r-md); font-size: 13px; }

/* document viewer (pdf.js pages) */
.lrn-doc { height: min(72vh, 900px); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; scroll-behavior: auto; }
.lrn-doc:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.lrn-doc__page { position: relative; width: min(100%, 860px); background: var(--lrn-paper); box-shadow: var(--shadow-md); border-radius: 3px; flex: none; }
.lrn-doc__page canvas { display: block; width: 100%; height: auto; border-radius: 3px; }
.lrn-doc__num { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: var(--gray-500); background: color-mix(in srgb, var(--lrn-paper) 85%, transparent); padding: 1px 6px; border-radius: var(--r-pill); }
.lrn-doc__wait { color: var(--gray-500); padding: 40px; }
.lrn-doc--viewer { height: 75vh; background: var(--gray-100); }

/* the "Siguiente" notice */
.lrn-next { position: absolute; right: 16px; bottom: 60px; width: min(300px, calc(100% - 32px)); background: var(--lrn-glass); border: 1px solid var(--gold-500);
  color: var(--on-accent); border-radius: var(--r-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-lg); z-index: 3; }
.lrn-next small { color: var(--gold-400); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.lrn-next b { font-size: 14.5px; }
.lrn-next__count { font-size: 12.5px; opacity: .85; }
.lrn-next__actions { display: flex; gap: 8px; margin-top: 6px; }
.lrn-next .lrn-btn-outline { color: var(--on-accent); }
.lrn-stage--doc .lrn-next, .lrn-stage--image .lrn-next { bottom: 16px; }

/* reading bar */
.lrn-read { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--r-md); background: var(--gray-50); font-size: 13px; }
.lrn-read__clock { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gold-600); font-variant-numeric: tabular-nums; }
.lrn-read__tick { animation: lrn-pulse 2s ease-in-out infinite; }
@keyframes lrn-pulse { 50% { opacity: .45; } }

.lrn-prevnext { display: flex; align-items: center; gap: 8px; }

/* tabs */
.lrn-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gray-200); margin-top: 6px; overflow-x: auto; }
.lrn-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; font: 600 13.5px var(--font-body); color: var(--gray-500); cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.lrn-tab:hover { color: var(--gray-800); }
.lrn-tab--on { color: var(--blue-900); border-bottom-color: var(--gold-500); }
.lrn-tabpanel { padding: 12px 2px; }
.lrn-tabpanel:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; border-radius: var(--r-sm); }
.lrn-summary p { margin: 0 0 10px; white-space: pre-line; color: var(--gray-800); line-height: 1.55; }
.lrn-summary__facts { display: flex; flex-wrap: wrap; gap: 14px; color: var(--gray-500); font-size: 12.5px; }
.lrn-summary__facts span { display: inline-flex; gap: 5px; align-items: center; }

/* lists: materials, notes, questions */
.lrn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lrn-material { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: var(--r-md); background: var(--white); }
.lrn-material > i { font-size: 20px; color: var(--blue-600); }
.lrn-material__name { display: flex; flex-direction: column; min-width: 0; }
.lrn-material__name b { font-size: 13.5px; color: var(--gray-900); overflow-wrap: anywhere; }
.lrn-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.lrn-form__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lrn-input { width: 100%; box-sizing: border-box; border: 1px solid var(--gray-300); border-radius: var(--r-md); padding: 8px 10px; font: 13.5px/1.45 var(--font-body);
  background: var(--white); color: var(--gray-900); resize: vertical; }
.lrn-input:focus { outline: 2px solid var(--gold-400); outline-offset: 0; border-color: transparent; }
.lrn-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray-700); cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 400; }
.lrn-note, .lrn-thread { border: 1px solid var(--gray-200); border-radius: var(--r-md); padding: 10px 12px; background: var(--white); }
.lrn-note__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--gray-700); }
.lrn-note__text { margin-top: 6px; white-space: pre-line; font-size: 13.5px; color: var(--gray-900); overflow-wrap: anywhere; }
.lrn-mark { display: inline-flex; align-items: center; gap: 4px; background: var(--gold-100); color: var(--gold-700); border: 1px solid var(--gold-200); border-radius: var(--r-pill);
  padding: 1px 9px; font: 700 12px var(--font-body); cursor: pointer; font-variant-numeric: tabular-nums; }
.lrn-mark:hover { background: var(--gold-200); }
.lrn-mark--static { cursor: default; }
.lrn-thread__a { margin: 10px 0 0 14px; padding: 8px 12px; border-left: 3px solid var(--gold-500); background: var(--gray-50); border-radius: 0 var(--r-md) var(--r-md) 0; }

/* outline */
.lrn-outline__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--gray-200); background: var(--white); font-size: 13px; }
.lrn-outline__head span { color: var(--gray-500); font-size: 12px; }
.lrn-mod { padding-bottom: 6px; border-bottom: 1px solid var(--gray-200); }
.lrn-mod__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px 4px; }
.lrn-mod__title { font-weight: 700; font-size: 13px; color: var(--blue-900); }
.lrn-mod__meta { display: inline-flex; gap: 6px; align-items: center; }
.lrn-mod__count { font-size: 11.5px; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.lrn-ls { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0;
  border-left: 3px solid transparent; padding: 7px 14px 7px 11px; font: 13px var(--font-body); color: var(--gray-800); cursor: pointer; }
.lrn-ls:hover { background: var(--gray-100); }
.lrn-ls__icon { font-size: 15px; display: inline-flex; justify-content: center; }
.lrn-ls__title { line-height: 1.3; overflow-wrap: anywhere; }
.lrn-ls__meta { display: inline-flex; gap: 3px; align-items: center; font-size: 11.5px; color: var(--gray-500); white-space: nowrap; }
.lrn-ls--done .lrn-ls__icon { color: var(--green-500); font-weight: 700; }
.lrn-ls--progress .lrn-ls__icon { color: var(--gold-500); }
.lrn-ls--open .lrn-ls__icon { color: var(--gray-400); }
.lrn-ls--locked { color: var(--gray-400); cursor: not-allowed; }
.lrn-ls--locked:hover { background: none; }
.lrn-ls--locked .lrn-ls__icon { color: var(--gray-400); }
.lrn-ls--current { background: var(--gold-100); border-left-color: var(--gold-500); font-weight: 700; color: var(--gray-900); }
.lrn-ls--current .lrn-ls__icon { color: var(--gold-600); }
.lrn-ls--current:hover { background: var(--gold-100); }

/* completion screen */
.lrn-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 16px 28px; }
.lrn-done__ring { position: relative; display: inline-flex; }
.lrn-done__ring i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 38px; color: var(--gold-500); }
.lrn-done h2 { font: 400 26px/1.25 var(--font-display); color: var(--blue-900); margin: 0; max-width: 640px; }
.lrn-done__date { color: var(--gray-600); margin: 0; }
.lrn-done__stats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.lrn-done__stats div { display: flex; flex-direction: column; min-width: 120px; padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: var(--r-md); background: var(--gray-50); }
.lrn-done__stats b { font-size: 18px; color: var(--gray-900); }
.lrn-done__stats span { font-size: 12px; color: var(--gray-500); }
.lrn-done__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.lrn-done a, .lrn-blocked a, .lrn-card a { text-decoration: none; }

/* closed classroom (removed / archived) */
.lrn-blocked { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 48px 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); }
.lrn-blocked > i { font-size: 42px; color: var(--gold-500); }
.lrn-blocked h2 { font: 400 22px var(--font-display); color: var(--blue-900); margin: 0; }
.lrn-blocked p { color: var(--gray-700); max-width: 560px; margin: 0; }
.lrn-blocked__notes { width: min(640px, 100%); text-align: left; margin-top: 16px; }
.lrn-blocked__notes h3 { font-size: 14px; display: flex; gap: 6px; align-items: center; color: var(--gray-800); }

/* support file viewer */
.lrn-viewer-backdrop { position: fixed; inset: 0; background: var(--lrn-scrim); z-index: 10010; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lrn-viewer { background: var(--white); border-radius: var(--r-lg); width: min(960px, 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-xl); }
.lrn-viewer__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--gray-200); color: var(--gray-900); }
.lrn-viewer__body { overflow: auto; display: flex; justify-content: center; background: var(--gray-100); }
.lrn-viewer__body img, .lrn-viewer__body video { max-width: 100%; max-height: 80vh; display: block; }

/* ── phones and narrow windows: the outline becomes a drawer ── */
@media (max-width: 900px) {
  .lrn-only-narrow { display: inline-flex !important; }
  .lrn-body { grid-template-columns: minmax(0, 1fr); }
  .lrn-main { padding: 12px; }
  .lrn-side { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); z-index: 10006; overflow-y: auto; border-left: 1px solid var(--gray-200);
    transform: translateX(100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; box-shadow: var(--shadow-xl); }
  .lrn-room--drawer .lrn-side { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .lrn-side__drawer-head { display: flex !important; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--navy-900); color: var(--on-accent); }
  .lrn-side__drawer-head .lrn-icon-btn { color: var(--on-accent); }
  .lrn-outline__head b { display: none; }   /* the drawer's own head already says "Temario" */
  .lrn-backdrop { position: fixed; inset: 0; background: var(--lrn-scrim); z-index: 10005; }
  .lrn-bar__pct { display: none; }
  .lrn-lesson-title { font-size: 20px; }
  .lrn-stage--video { max-height: none; }
  .lrn-doc { height: 65vh; padding: 8px; }
  .lrn-next { bottom: 50px; right: 8px; }
}
/* Admin shell on a phone: the shell has no mobile layout (a fixed 200 px sidebar), so the classroom page takes the whole width —
   the top bar's back arrow leads to Mis cursos. The portal has its own shell. */
@media (max-width: 900px) {
  .admin-shell:has(.lrn-page) .admin-sidebar { display: none; }
  .admin-main:has(> .lrn-page), .admin-main:has(.lrn-page) { padding: 8px; }
  .lrn-page { padding: 0 !important; }
}
@media (max-width: 520px) {
  .lrn-bar { padding: 10px 12px; }
  .lrn-bar__course { font-size: 16px; white-space: normal; }
  .lrn-bar__side .lrn-btn-gold { padding: 6px 10px; font-size: 12px; }
  .lrn-cards { grid-template-columns: 1fr; }
}

/* ═════════════════ Admin: questions inbox ═════════════════ */
.lrn-inbox { display: flex; flex-direction: column; gap: 12px; }
.lrn-inbox__item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.lrn-inbox__item--open { border-left: 4px solid var(--gold-500); }
.lrn-inbox__where { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--gray-500); }
.lrn-inbox__where b { color: var(--gray-800); }
.lrn-inbox__text { margin: 8px 0; font-size: 14px; color: var(--gray-900); white-space: pre-line; overflow-wrap: anywhere; }
.lrn-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.lrn-toolbar label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gray-600); font-weight: 600; }
.lrn-select { border: 1px solid var(--gray-300); border-radius: var(--r-md); padding: 7px 10px; font: 13.5px var(--font-body); background: var(--white); color: var(--gray-900); min-width: 200px; }
.lrn-pager { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: var(--gray-600); }

/* ── L2.1: scheduled modules (opening date in the outline, "Siguiente" hint, a course that hasn't started, the card line) ── */
.lrn-mod__clock { color: var(--gold-500); margin-right: 4px; font-size: 13px; vertical-align: -1px; }
.lrn-mod__opens { display: flex; gap: 6px; align-items: flex-start; margin: 2px 14px 6px; padding: 6px 10px; border-radius: var(--r-md);
  background: var(--gold-100); color: var(--gray-800); font-size: 12px; line-height: 1.35; }
.lrn-mod__opens i { color: var(--gold-600); font-size: 13px; margin-top: 1px; }
.lrn-mod--scheduled .lrn-mod__title { color: var(--gray-600); }
.lrn-next-opens { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--gray-600); text-align: right; }
.lrn-next-opens i { color: var(--gold-600); }
.lrn-waiting h2 { margin: 10px 0 6px; font-size: 18px; color: var(--gray-900); }
.lrn-waiting p { margin: 0 auto; max-width: 440px; font-size: 13px; }
.lrn-opening { font-size: 12.5px; color: var(--gray-700); display: flex; gap: 5px; align-items: center; }
.lrn-opening i { color: var(--gold-600); }
@media (max-width: 760px) {
  .lrn-prevnext { flex-wrap: wrap; }
  .lrn-next-opens { order: 3; flex-basis: 100%; justify-content: flex-end; }
}

/* ═════════════════ L4: the quiz stage (cover → attempt → result) ═════════════════ */
.qz { border: 1px solid var(--gray-200); border-radius: var(--r-md); background: var(--white); padding: 18px 20px; }
.qz-h { font: 400 22px/1.25 var(--font-display); color: var(--blue-900); margin: 2px 0 0; }
.qz-h:focus { outline: none; }
.qz-h:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: var(--r-sm); }
.qz-msg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; text-align: center; color: var(--gray-600); }
.qz-msg i { font-size: 34px; color: var(--gold-500); }
.qz-msg h2 { margin: 4px 0 0; font-size: 18px; color: var(--gray-900); }
.qz-msg p { margin: 0; max-width: 480px; font-size: 13.5px; }
.qz-spin { animation: lrn-spin 1s linear infinite; }
.qz-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.qz-type { background: var(--gray-100); color: var(--gray-600); margin-right: 8px; }
.qz-chip--fail { background: var(--red-100); color: var(--red-600); }

/* cover */
.qz-cover__head { display: flex; align-items: flex-start; gap: 14px; }
.qz-cover__head .lrn-chip--ok { margin-left: auto; }
.qz-cover__icon { flex: none; width: 46px; height: 46px; border-radius: var(--r-md); background: var(--gold-100); color: var(--gold-600); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.qz-rules { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
.qz-rules li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--gray-800); }
.qz-rules i { color: var(--gold-600); font-size: 16px; }
.qz-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.qz-stats div { display: flex; flex-direction: column; min-width: 140px; flex: 1 1 140px; padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: var(--r-md); background: var(--gray-50); }
.qz-stats b { font-size: 17px; color: var(--gray-900); }
.qz-stats span { font-size: 12px; color: var(--gray-500); min-height: 1em; }
.qz-countdown { font-variant-numeric: tabular-nums; }
.qz-history { margin-top: 16px; }
.qz-history summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--gray-800); }
.qz-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.qz-table th { text-align: left; font-size: 11.5px; color: var(--gray-500); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--gray-200); }
.qz-table td { padding: 7px 8px; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); }

/* attempt */
.qz-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--gray-600); }
.qz-top__count { font-weight: 600; color: var(--gray-800); }
.qz-save { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--gray-500); }
.qz-save--saved i { color: var(--green-500); }
.qz-save--failed { color: var(--red-500); }
.qz-timer { display: inline-flex; align-items: center; gap: 6px; font: 700 16px var(--font-body); font-variant-numeric: tabular-nums; color: var(--gray-900);
  padding: 4px 12px; border-radius: var(--r-pill); background: var(--gold-100); border: 1px solid var(--gold-200); }
.qz-timer i { color: var(--gold-600); }
.qz-timer--urgent { background: var(--red-100); border-color: var(--red-border); color: var(--red-600); }
.qz-timer--urgent i { color: var(--red-500); }
.qz-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.qz-nav__b { min-width: 34px; height: 34px; border-radius: var(--r-md); border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-700);
  font: 600 13px var(--font-body); cursor: pointer; }
.qz-nav__b:hover { border-color: var(--gold-500); }
.qz-nav__b--done { background: var(--gold-100); border-color: var(--gold-200); color: var(--gold-700); }
.qz-nav__b--on { border: 2px solid var(--gold-500); color: var(--gray-900); }
.qz-nav__b:focus-visible, .qz-opt:focus-within { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.qz-q { margin-top: 12px; }
.qz-q__num { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-600); }
.qz-q__num:focus { outline: none; }
.qz-q__num:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; border-radius: var(--r-sm); }
.qz-q__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.qz-q__text { font: 400 20px/1.35 var(--font-display); color: var(--blue-900); padding: 0; margin-bottom: 6px; white-space: pre-line; overflow-wrap: anywhere; }
.qz-q__hint { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12.5px; color: var(--gray-500); margin-bottom: 12px; }
.qz-opts { display: flex; flex-direction: column; gap: 8px; }
.qz-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid var(--gray-300); border-radius: var(--r-md); background: var(--white);
  cursor: pointer; font-size: 14px; color: var(--gray-900); line-height: 1.4; transition: border-color .12s, background .12s;
  text-transform: none; letter-spacing: normal; font-weight: 400; }
.qz-opt:hover { border-color: var(--gold-500); }
.qz-opt input { margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--gold-500); flex: none; cursor: pointer; }
.qz-opt--on { border-color: var(--gold-500); background: var(--gold-100); }
.qz-opt__text { overflow-wrap: anywhere; }
.qz-confirm { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--gold-200); border-left: 4px solid var(--gold-500); border-radius: var(--r-md); background: var(--gold-100); color: var(--gray-900); }
.qz-confirm b:focus { outline: none; }
.qz-confirm p { margin: 4px 0 0; font-size: 13px; color: var(--gray-700); }
.qz-confirm .qz-actions { margin-top: 10px; }
.qz-actions--nav { border-top: 1px solid var(--gray-200); padding-top: 12px; margin-top: 16px; }

/* result */
.qz-score { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.qz-score__ring { position: relative; display: inline-flex; flex: none; }
.qz-score__ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gray-900); }
.qz-score--fail .lrn-ring__value { stroke: var(--red-500); }
.qz-score--fail .qz-h { color: var(--red-600); }
.qz-score--pass .qz-h { color: var(--green-600); }
.qz-score__line { margin: 4px 0 0; font-size: 15px; color: var(--gray-800); }
.qz-score__meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 6px 0 0; font-size: 13px; color: var(--gray-700); }
.qz-score p.lrn-muted { margin: 2px 0 0; }
.qz-course-done { margin-top: 14px; flex-wrap: wrap; }
.qz-course-done .lrn-btn-gold { margin-left: auto; }
.qz-corr__title { font-size: 15px; margin: 22px 0 8px; color: var(--gray-900); }
.qz-corr { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.qz-corr__q { border: 1px solid var(--gray-200); border-left: 4px solid var(--green-500); border-radius: var(--r-md); padding: 10px 14px; background: var(--white); }
.qz-corr__q--wrong { border-left-color: var(--red-500); }
.qz-corr__head { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--gray-900); }
.qz-corr__head > i { font-size: 18px; color: var(--green-500); margin-top: 1px; }
.qz-corr__q--wrong .qz-corr__head > i { color: var(--red-500); }
.qz-corr__text { flex: 1; font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.qz-corr__opts { list-style: none; margin: 8px 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.qz-corr__opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--gray-700); padding: 4px 8px; border-radius: var(--r-sm); }
.qz-corr__opt i { color: var(--gray-400); }
.qz-corr__opt--ok { background: var(--green-100); color: var(--green-600); font-weight: 600; }
.qz-corr__opt--ok i, .qz-corr__opt--missed i { color: var(--green-500); }
.qz-corr__opt--missed { border: 1px dashed var(--green-500); color: var(--gray-900); }
.qz-corr__opt--wrong { background: var(--red-100); color: var(--red-600); font-weight: 600; }
.qz-corr__opt--wrong i { color: var(--red-500); }
.qz-corr__tag { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .9; }
.qz-corr__why { display: flex; gap: 8px; margin: 8px 0 0 26px; padding: 8px 12px; border-radius: var(--r-md); background: var(--gray-50); border: 1px solid var(--gray-200); font-size: 13px; color: var(--gray-800); white-space: pre-line; }
.qz-corr__why i { color: var(--gold-600); font-size: 16px; }
.qz-corr > li > .lrn-muted { margin: 6px 0 0 26px; }

@media (max-width: 640px) {
  .qz { padding: 14px 12px; }
  .qz-cover__head { flex-wrap: wrap; }
  .qz-cover__head .lrn-chip--ok { margin-left: 0; }
  .qz-q__text { font-size: 18px; }
  .qz-opt { padding: 12px; }
  .qz-actions--nav { position: sticky; bottom: 0; background: var(--white); padding-bottom: 8px; z-index: 2; }
  .qz-actions--nav .lrn-grow { display: none; }
  .qz-actions--nav > button { flex: 1 1 auto; justify-content: center; }
  .qz-corr__opts, .qz-corr__why, .qz-corr > li > .lrn-muted { margin-left: 0; }
  .qz-corr__tag { margin-left: 0; flex-basis: 100%; }
  .qz-score__ring .lrn-ring--lg { width: 76px; height: 76px; }
  .qz-course-done .lrn-btn-gold { margin-left: 0; }
}