/* ============================================================================
   student.css — what the student area adds to site.css: /dashboard (Mi cuenta),
   /mis-cursos and the page of one programme. Loaded by those three templates
   through {% block head_extra %}; their shared script is static/js/student.js.

   These are pages people work in, so nothing arrives slowly here: no reveals,
   no plates, the content first. One row of tabs moves between the two places
   of the area; the site's own bar stays the only menu.

   Order: page · the bar of the area · head · sections (account) · list of
   programmes · profile · cards and loading · one programme: tabs, stage and
   queue, resources · phones · reduced motion.
   ========================================================================== */

/* a short page keeps the footer below the first screen */
.lp.stu { min-height: calc(100vh - var(--bar)); min-height: calc(100svh - var(--bar)); }

/* ── the bar of the area: where you are, and the way out ── */
.lp .stu-bar { display: flex; align-items: stretch; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.lp .stu-bar .lp-tabs { border-bottom: 0; }
.lp .stu-who { display: flex; align-items: center; gap: 1.1rem; min-width: 0; font-size: 0.88rem; color: var(--muted); }
.lp .stu-who__mail { overflow: hidden; max-width: 30ch; text-overflow: ellipsis; white-space: nowrap; }
.lp .stu-who .lp-link { font-size: 0.88rem; white-space: nowrap; }

/* ── head ── */
.lp .stu-head { padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 3vw, 2.25rem); }
.lp .stu-head .lp-h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.lp .stu-meta { font: 500 0.68rem/1.5 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lp .stu-meta > span:not([hidden]) + span:not([hidden])::before { content: "·"; margin: 0 0.5rem; }
/* a page that is entered to watch something keeps its head low; what you act on stands beside the title */
.lp .stu-head--tight { padding-block: clamp(1.5rem, 3.4vw, 2.25rem) clamp(1rem, 2.4vw, 1.5rem); }
.lp .stu-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.1rem 2rem; }
.lp .stu-head__row > div { min-width: 0; flex: 1 1 28rem; }
.lp .stu-head__facts { margin-top: 0.9rem; font-size: 0.9rem; color: var(--muted); }
.lp .stu-head__facts > span:not([hidden]) + span:not([hidden])::before { content: "·"; margin: 0 0.55rem; }

.lp .stu-notes > * { margin-bottom: 1rem; }
.lp .stu-notes > *:last-child:not([hidden]) { margin-bottom: clamp(1.25rem, 3vw, 2rem); }

/* ── account: a label column and what belongs to it ── */
.lp .stu-sect {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1.4rem clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2rem, 4.5vw, 3rem); border-top: 1px solid var(--line);
}
.lp .stu-sect__head { scroll-margin-top: calc(var(--bar) + 1.5rem); }
.lp .stu-sect--first { padding-top: 0; border-top: 0; }
.lp .stu-sect__head .lp-h2 { margin-top: 0.55rem; }
.lp .stu-sect__note { margin-top: 0.6rem; font-size: 0.93rem; line-height: 1.55; color: var(--muted); }
.lp .stu-sect__body { min-width: 0; }
.lp .stu-sect__body > * + * { margin-top: 1.25rem; }
.lp .stu-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.lp .stu-acts--after { margin-top: 1.1rem; }
/* a question with two answers: one under the other, the safe one first */
.lp.stu .lp-dialog__box > .lp-h2 { margin-top: 0; }
.lp.stu .lp-dialog__box > .stu-acts { display: grid; gap: 0.6rem; margin-top: 1.6rem; }
body .lp .stu-danger { color: var(--bad); border-color: rgba(180, 35, 24, 0.45); }
@media (hover: hover) and (pointer: fine) {
  body .lp .stu-danger:not(:disabled):hover { border-color: var(--bad); background: rgba(180, 35, 24, 0.05); }
}
.lp .stu-code { max-width: 30rem; }

/* ── the programmes, as lines ── */
.lp .stu-list { border-top: 1px solid var(--line); }
body .lp .stu-item { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.lp .stu-item em { font: 500 0.66rem/1.4 var(--display); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .stu-item__title { font: 600 1.08rem/1.3 var(--display); letter-spacing: -0.015em; }
.lp .stu-item__title .lp-link { font: inherit; letter-spacing: inherit; }
.lp .stu-item__note { display: block; margin-top: 0.2rem; font: 400 0.84rem/1.4 var(--body); letter-spacing: 0; color: var(--muted); }

/* ── profile ── */
.lp .stu-profile__form { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.lp .stu-phone { display: grid; grid-template-columns: minmax(8.5rem, 0.6fr) minmax(0, 1fr); gap: 0.5rem; }

/* ── cards, and what stands in their place while they load ── */
.lp .stu-tools { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.lp .stu-skel .lp-card__media { border-color: transparent; animation: stu-wait 1.6s ease-in-out infinite; }
.lp .stu-skel__line { display: block; height: 0.9rem; margin-top: 1rem; border-radius: 4px; background: var(--tint); animation: stu-wait 1.6s ease-in-out infinite; }
.lp .stu-skel__line--short { width: 55%; margin-top: 0.6rem; }
@keyframes stu-wait { 50% { opacity: 0.45; } }
.lp .stu-wait { color: var(--muted); font-size: 0.95rem; }

/* ── one programme: its kinds of material ── */
.lp .stu-kinds { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.lp .stu-kinds .lp-tab small { margin-left: 0.45rem; font: 500 0.78em var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.lp .stu-intro { max-width: 66ch; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.lp .stu-intro strong { display: block; font: 600 1.02rem/1.3 var(--display); letter-spacing: -0.01em; }
.lp .stu-intro span { display: block; margin-top: 0.3rem; color: var(--muted); }

/* the stage plays one video at a time; the queue beside it is everything there is to watch */
.lp .stu-stage { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1.25rem, 3.4vw, 3rem); align-items: start; }
.lp .stu-stage__main { position: sticky; top: calc(var(--bar) + 1.25rem); min-width: 0; }
.lp .stu-stage .lp-player__frame { scroll-margin-top: calc(var(--bar) + 1rem); }
.lp .stu-now { margin-top: 1.1rem; }
.lp .stu-now__n { font: 500 0.68rem/1.4 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lp .stu-now__title { margin-top: 0.4rem; font: 600 clamp(1.15rem, 1.9vw, 1.45rem)/1.22 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.lp .stu-now__desc { margin-top: 0.5rem; max-width: 62ch; font-size: 0.96rem; color: var(--muted); }
.lp .stu-now__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.5rem; margin-top: 1.1rem; }

.lp .stu-queue { border-top: 1px solid var(--line); }
.lp .stu-queue__sect { padding: 1.3rem 0 0.55rem; font: 500 0.68rem/1.4 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.lp .stu-track {
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.7rem; width: 100%; min-height: 56px;
  padding: 0.85rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--muted);
  font-family: var(--body); cursor: pointer; transition: color 0.3s ease;
}
.lp .stu-track__n { font: 500 0.72rem var(--display); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.lp .stu-track__title { font: 600 0.97rem/1.32 var(--display); letter-spacing: -0.01em; color: inherit; }
.lp .stu-track__seen { font: 500 0.6rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.lp .stu-track.is-active { color: var(--ink); }
.lp .stu-track.is-active .stu-track__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .lp .stu-track:hover { color: var(--ink); } }

/* ── what opens somewhere else: notebooks, files, exercises ── */
.lp .stu-res-list { border-top: 1px solid var(--line); }
.lp .stu-res-list--after { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.lp .stu-res { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.lp .stu-res__n { align-self: start; padding-top: 0.2rem; font: 500 0.72rem var(--display); letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.lp .stu-res__title { font: 600 1.02rem/1.3 var(--display); letter-spacing: -0.012em; }
.lp .stu-res__text { margin-top: 0.3rem; max-width: 70ch; font-size: 0.93rem; line-height: 1.55; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
body .lp .stu-res__text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ============================================================ PHONES AND SMALL TABLETS */
@media (max-width: 991.98px) {
  .lp .stu-stage { grid-template-columns: 1fr; }
  .lp .stu-stage__main { position: static; }
}

@media (max-width: 700px) {
  .lp .stu-who__mail { display: none; }
  .lp .stu-sect { grid-template-columns: 1fr; gap: 1.25rem; }
  body .lp .stu-item { grid-template-columns: 1fr; gap: 0.15rem; }
  .lp .stu-res { grid-template-columns: minmax(0, 1fr); }
  .lp .stu-res__n { display: none; }
  .lp .stu-res .lp-btn { justify-self: start; }
  .lp .stu-phone { grid-template-columns: 9.75rem minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .lp .stu-acts .lp-btn, .lp .stu-head__row > .lp-btn { width: 100%; }
  .lp .stu-code .lp-inline { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lp .stu-skel .lp-card__media, .lp .stu-skel__line { animation: none; }
  .lp .stu-track { transition: none; }
}