/* ═══════════════════════════════════════════════════════════════════════════
   LMS L3 in the client portal: Mis cursos / Cursos disponibles, the classroom
   inside the portal shell, and the passwordless access screens. The classroom
   itself is styled by Flowtavia.Shared.UI/css/lms-learn.css (shared with the
   Admin). Design-system tokens only (light and dark).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mis cursos: wider than the other portal pages (a grid of cards) ── */
.client-content.lrn-portal { max-width: 1100px; }
/* the tabs reuse the classroom's .lrn-tabs / .lrn-tab (keyboard pattern and look); a little larger here */
.lrn-portal__tabs { margin-top: 0; }
.lrn-portal__tabs .lrn-tab { font-size: 14px; padding: 9px 14px; display: inline-flex; align-items: center; gap: 6px; }
.lrn-portal__count { min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--gold-100); color: var(--gold-700); font-size: 11px; text-align: center; }
#lrn-ppanel { padding-top: 16px; outline: none; }
#lrn-ppanel:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: var(--r-sm); }
.lrn-portal__desc { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--gray-600);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lrn-portal__meta { flex-wrap: wrap; gap: 4px 12px; }
.lrn-portal__meta span { display: inline-flex; align-items: center; gap: 4px; }
.lrn-portal .lrn-btn-gold { align-self: flex-start; }
.lrn-portal .lrn-btn-gold:disabled { opacity: .6; cursor: default; }

/* ── the classroom inside the portal shell ── */
.client-main:has(.lrn-portal-room) { padding: var(--space-4) var(--space-4) 80px; }
.lrn-portal-room { max-width: 1400px; margin: 0 auto; }
/* Phones and narrow windows: the classroom takes the whole screen — the fixed bottom nav would cover the lesson and the "Siguiente"
   notice, and the top bar's back arrow already leads to Mis cursos. (The Admin shell has its own rule in lms-learn.css.) */
@media (max-width: 900px) {
  .client-shell:has(.lrn-portal-room) .client-bottom-nav { display: none; }
  .client-main:has(.lrn-portal-room) { padding: 8px; }
  .client-shell:has(.lrn-portal-room) .client-header { position: static; }
}

/* ── passwordless access (/courses/{token}, /client/learn-access) inside the auth layout ── */
.lrn-access { margin-top: 16px; }
.lrn-access form { display: flex; flex-direction: column; }
.lrn-access .auth-field__input input { width: 100%; }
.lrn-access__code { letter-spacing: .4em; font-variant-numeric: tabular-nums; font-size: 18px !important; font-weight: 700; }
.lrn-access__hint { display: block; font-size: 12px; opacity: .8; margin-top: 2px; }
.lrn-access__links { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 12px; font-size: 13px; color: var(--gray-400); }
.lrn-access__links .auth-link { background: none; border: 0; cursor: pointer; padding: 0; font: inherit; }
.lrn-access__spin { display: inline-block; vertical-align: -3px; margin-right: 6px; border-color: var(--gray-200); border-top-color: var(--gold-500); }
.lrn-access__alt { margin-top: 4px; margin-bottom: 14px; text-decoration: none; }