/* View-specific styles ------------------------------------------------------ */

/* Onboarding ---------------------------------------------------------------- */
.onb { min-height: 100dvh; display: flex; flex-direction: column; }
.onb__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 18px var(--pad-page);
}
.onb__body { flex: 1; padding: 0 var(--pad-page) 48px; }
.onb__card {
  max-width: 880px; margin-inline: auto; width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow-md);
  padding: 34px;
}

.steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.steps__item { display: flex; align-items: center; gap: 10px; }
.steps__dot {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--ink-100); color: var(--ink-400);
  font-weight: 700; font-size: var(--fs-md);
}
.steps__item[data-state="active"] .steps__dot { background: var(--purple-600); color: var(--white); }
.steps__item[data-state="done"] .steps__dot { background: var(--purple-100); color: var(--purple-700); }
.steps__item { background: none; border: 0; padding: 4px 6px; border-radius: 12px; font: inherit; text-align: left; }
button.steps__item { cursor: pointer; }
button.steps__item:hover { background: var(--purple-50); }
.steps__label { display: grid; gap: 2px; }
.steps__name { font-weight: 700; color: var(--ink-800); font-size: var(--fs-md); line-height: 1.2; }
.steps__state { font-size: var(--fs-xs); color: var(--ink-400); }
.steps__line { width: 64px; height: 2px; background: var(--ink-100); border-radius: 2px; }

/* One step at a time: a heading, the choices for that step, and the nav. */
.onb__head { text-align: center; margin-bottom: 26px; }
.onb__head h1 { font-size: var(--fs-3xl); line-height: 1.15; }
.onb__head .page__sub { margin-top: 6px; }
.onb__recap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }

.onb__step { min-height: 340px; }
.onb__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }
.onb__panel { min-width: 0; }

.onb__nav {
  display: flex; align-items: center; gap: 12px;
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 860px) {
  .onb__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .onb__step { min-height: 0; }
}
@media (max-width: 720px) {
  .onb__card { padding: 22px; border-radius: 20px; }
  .onb__head h1 { font-size: var(--fs-2xl); }
}

.optcard {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.optcard:hover { border-color: var(--purple-300); }
.optcard[aria-pressed="true"] { border-color: var(--purple-500); background: var(--purple-50); }
.optcard__key {
  width: 42px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--purple-50); color: var(--purple-700);
  font-weight: 800;
}
.optcard__body { min-width: 0; flex: 1; }
.optcard__name { font-weight: 700; color: var(--ink-900); font-size: var(--fs-base); }
.optcard__desc { font-size: var(--fs-sm); color: var(--ink-400); }
.optcard__check {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1.5px solid var(--border-strong);
  color: transparent;
}
.optcard[aria-pressed="true"] .optcard__check { background: var(--purple-600); border-color: var(--purple-600); color: var(--white); }
.optcard[disabled] { opacity: .55; pointer-events: none; }

.tilegrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* One per row, laid out horizontally: at two columns the name, the description
   and three tags had to stack, and the text ran into itself. */
.tilecard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  text-align: left;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.tilecard:hover { border-color: var(--purple-300); }
.tilecard[aria-pressed="true"] { border-color: var(--purple-500); background: var(--purple-50); }
.tilecard__icon { grid-column: 1; grid-row: 1 / span 2; color: var(--purple-500); }
.tilecard__body { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.tilecard__name { display: block; font-weight: 800; color: var(--ink-900); }
.tilecard__desc { display: block; font-size: var(--fs-sm); color: var(--ink-400); }
.tilecard .tags { grid-column: 1 / -1; justify-content: flex-start; margin-top: 8px; }
.tilecard__check {
  grid-column: 3; grid-row: 1 / span 2;
  width: 20px; height: 20px; display: none; place-items: center;
  border-radius: var(--r-full); background: var(--purple-600); color: var(--white);
}
.tilecard[aria-pressed="true"] .tilecard__check { display: grid; }

.daypicker { display: flex; gap: 8px; flex-wrap: wrap; }
.daypicker__btn {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-weight: 700; color: var(--ink-400);
}
.daypicker__btn[aria-pressed="true"] { background: var(--purple-600); border-color: var(--purple-600); color: var(--white); }

/* Minutes per study day: a figure that comes out of the plan, not a control. */
.loadout { display: flex; align-items: baseline; gap: 8px; }
.loadout__big {
  font-size: var(--fs-3xl); font-weight: 800;
  letter-spacing: -.03em; color: var(--purple-600);
}
.loadout__unit { font-size: var(--fs-md); color: var(--ink-400); }

/* Today, split by what kind of work it is. The accent line carries the tone,
   so the headings can stay plain. */
.daysection { margin-top: 26px; }
.daysection__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding-left: 12px;
  border-left: 3px solid var(--accent, var(--purple-600));
}
.daysection__head h2 { margin: 0; }
.daysection__note { font-size: var(--fs-sm); color: var(--ink-400); }

.timepicker { display: flex; gap: 8px; flex-wrap: wrap; }
.timepicker__btn {
  min-width: 62px;
  padding: 8px 4px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--white);
  display: grid; justify-items: center; line-height: 1.15;
}
.timepicker__btn b { font-size: var(--fs-lg); color: var(--ink-900); }
.timepicker__btn span { font-size: var(--fs-xs); color: var(--ink-400); }
.timepicker__btn[aria-pressed="true"] { border-color: var(--purple-500); background: var(--purple-50); }

.summary { position: sticky; top: 20px; }
.summary__headline { font-size: var(--fs-2xl); font-weight: 800; color: var(--purple-600); letter-spacing: -.02em; }
.summary__list { display: grid; gap: 10px; margin: 16px 0; }
.summary__row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--ink-500); }
.summary__row .icon { color: var(--ink-300); flex: none; }
.skillbar { display: grid; gap: 4px; }
.skillbar__top { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.skillbar__name { color: var(--ink-500); font-weight: 600; }
.skillbar__val { color: var(--ink-400); }

/* Dashboard ----------------------------------------------------------------- */
.hero {
  display: flex; align-items: center; gap: 24px;
  padding: 24px 28px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 200px at 88% 120%, var(--purple-100) 0%, rgba(234,230,253,0) 70%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.hero__body { flex: 1; min-width: 0; }
.hero__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.hero__stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; }
.hero__stat { display: flex; align-items: center; gap: 10px; }
.hero__stat b { display: block; color: var(--ink-900); font-size: var(--fs-lg); line-height: 1.2; }
.hero__stat span { font-size: var(--fs-sm); color: var(--ink-400); }
.hero__art { flex: none; align-self: stretch; display: grid; place-items: end center; }
@media (max-width: 860px) { .hero { flex-direction: column; align-items: stretch; } .hero__art { display: none; } }

.today { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.todaycard {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--accent-line, var(--border));
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  text-align: left;
  width: 100%;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.todaycard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.todaycard__body { flex: 1; min-width: 0; }
.todaycard__name { font-weight: 700; color: var(--ink-900); }
.todaycard__meta { font-size: var(--fs-sm); color: var(--ink-400); }
.todaycard__side { text-align: right; flex: none; }
.todaycard__count { font-weight: 700; color: var(--ink-800); font-size: var(--fs-md); }

.coach { display: grid; gap: 14px; }
.coach__item { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-md); color: var(--ink-600, var(--ink-500)); }
.coach__item .tile { width: 32px; height: 32px; border-radius: var(--r-sm); }

.trend { width: 100%; height: 120px; }
.trend__line { fill: none; stroke: var(--purple-500); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trend__area { fill: url(#trendGrad); }
.trend__dot { fill: var(--purple-600); }
.trend__axis { stroke: var(--border); stroke-width: 1; }
.trend__tick { fill: var(--ink-300); font-size: 11px; }

/* Roadmap ------------------------------------------------------------------- */
.weekstrip { display: flex; gap: 12px; align-items: center; }
.weekstrip__scroll {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x mandatory; flex: 1; min-width: 0;
}
.weekchip {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 168px;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  text-align: left;
}
.weekchip__name { font-weight: 700; color: var(--ink-900); font-size: var(--fs-base); line-height: 1.2; }
.weekchip__state { font-size: var(--fs-sm); color: var(--ink-400); }
.weekchip[data-state="completed"] { border-color: var(--green-100); }
.weekchip[data-state="completed"] .icon { color: var(--green-500); }
/* La semana en curso se senala, no se subraya a gritos: un tinte y el icono en
   color. El relleno fuerte estaba reservado a algo que ni siquiera cambiaba al
   pulsar, y encima competia con la semana que se esta mirando. */
.weekchip[data-state="current"] { background: var(--purple-50); border-color: var(--purple-200); }
.weekchip[data-state="current"] .weekchip__state { color: var(--purple-600); font-weight: 700; }
.weekchip[data-state="current"] .icon { color: var(--purple-500); }

/* La que se esta mirando: el borde la saca del resto en cualquiera de los
   cuatro estados, incluido el gris de las cerradas. */
.weekchip[data-selected="true"] {
  border-color: var(--purple-600);
  box-shadow: 0 0 0 3px var(--purple-100);
}
.weekchip[data-selected="true"] .weekchip__name { color: var(--purple-800); }

.weekchip[data-state="locked"] { background: var(--surface-sunken); color: var(--ink-300); }
.weekchip[data-state="locked"] .weekchip__name { color: var(--ink-400); }
.weekchip[data-state="locked"] .icon { color: var(--ink-300); }

.actcard {
  display: flex; align-items: center; gap: 16px;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--accent-line, var(--border));
  background: var(--accent-soft, var(--surface-sunken));
  min-width: 0;
}
.actcard__body { flex: 1; min-width: 0; display: grid; gap: 7px; }
.actcard__name { font-weight: 700; color: var(--ink-900); font-size: var(--fs-lg); letter-spacing: -.01em; }
.actcard__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actcard__score { font-size: var(--fs-sm); color: var(--ink-400); font-weight: 700; text-align: right; }
.actcard[data-locked="true"] { opacity: .62; }
@media (max-width: 560px) { .actcard { flex-wrap: wrap; } }

/* Learning list (grammar / vocabulary) --------------------------------------- */
.modcard {
  display: grid; gap: 14px;
  padding: 22px;
  border-radius: var(--r-xl);
  border: 1px solid var(--accent-line, var(--border));
  background: var(--accent-soft, var(--surface));
  min-width: 0;
}
.modcard__head { display: flex; align-items: flex-start; gap: 14px; }
.modcard__title { font-size: var(--fs-xl); font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; }
.modcard__foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.modcard__foot .push { margin-left: auto; }

/* Exercise runner ----------------------------------------------------------- */
.runner { display: grid; gap: 20px; }
.runner__progress { display: flex; align-items: center; gap: 14px; }
.runner__count { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-400); white-space: nowrap; }

.qcard { display: grid; gap: 18px; padding: 26px; }
.qcard__kicker { font-size: var(--fs-sm); font-weight: 700; color: var(--accent, var(--purple-600)); text-transform: uppercase; letter-spacing: .06em; }
.qcard__prompt { font-size: 1.3rem; font-weight: 650; color: var(--ink-900); line-height: 1.5; }
.qcard__prompt .blank { display: inline-block; min-width: 92px; border-bottom: 2px solid var(--purple-300); }
.qcard__hint { font-size: var(--fs-md); color: var(--ink-400); }

/* Las preguntas de una escucha van todas en la misma hoja, una debajo de otra:
   el alumno las lee antes de darle al play y puede corregirse hasta el final. */
.sheet { list-style: none; display: grid; gap: 26px; margin: 0; padding: 0; }
.sheet__item { display: grid; gap: 12px; }
.sheet__item + .sheet__item { border-top: 1px solid var(--border); padding-top: 22px; }
.sheet .qcard__prompt { font-size: 1.08rem; font-weight: 600; }
.sheet__n {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; margin-right: 10px;
  border-radius: 50%;
  background: var(--ink-50); color: var(--ink-400);
  font-size: var(--fs-sm); font-weight: 700;
  vertical-align: 2px;
}

.choices { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  text-align: left;
  font-size: var(--fs-base);
  color: var(--ink-800);
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.choice:hover { border-color: var(--purple-300); }
.choice__key {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--ink-50); color: var(--ink-400);
  font-size: var(--fs-sm); font-weight: 700;
}
.choice[aria-pressed="true"] { border-color: var(--purple-500); background: var(--purple-50); }
.choice[aria-pressed="true"] .choice__key { background: var(--purple-600); color: var(--white); }
.choice[data-result="correct"] { border-color: var(--green-500); background: var(--green-50); }
.choice[data-result="correct"] .choice__key { background: var(--green-500); color: var(--white); }
.choice[data-result="wrong"] { border-color: var(--red-500); background: var(--red-50); }
.choice[data-result="wrong"] .choice__key { background: var(--red-500); color: var(--white); }
.choice[disabled] { pointer-events: none; }

.tokens { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; padding: 12px; border-radius: var(--r-md); background: var(--surface-sunken); border: 1px dashed var(--border-strong); }
.tokens--target { background: var(--white); border-style: solid; }
.token {
  padding: 8px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--white);
  font-weight: 600;
  color: var(--ink-800);
}
.token:hover { border-color: var(--purple-400); background: var(--purple-50); }
.tokens--target .token { background: var(--purple-50); border-color: var(--purple-200); color: var(--purple-700); }

.verdict { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--r-lg); font-size: var(--fs-md); }
.verdict--ok { background: var(--green-50); color: var(--green-600); }
.verdict--no { background: var(--red-50); color: var(--red-500); }
.verdict b { display: block; color: inherit; }
.verdict__sol { color: var(--ink-700); margin-top: 3px; }
/* El motivo de la respuesta: lo unico que queda por leer cuando se falla. */
.verdict__why {
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  color: var(--ink-700); line-height: 1.5;
}
.verdict__whyLabel {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400);
  margin-bottom: 2px;
}

.theory { display: grid; gap: 14px; }
.theory p { color: var(--ink-500); line-height: 1.7; }
.theory__rule {
  display: grid; gap: 6px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--purple-50);
  border: 1px solid var(--purple-100);
}
.theory__pattern { font-weight: 800; color: var(--purple-700); font-size: var(--fs-lg); }
.theory__example { color: var(--ink-500); font-style: italic; }

/* Vocabulary table ---------------------------------------------------------- */
.word { font-weight: 700; color: var(--ink-900); }
.word__ex { color: var(--ink-500); font-size: var(--fs-md); }
.word__ex mark { background: transparent; color: var(--purple-600); font-weight: 700; }
/* El altavoz del ejemplo va alineado con la primera linea, no centrado en un
   bloque que puede ocupar tres. */
.word__ex .speakbtn { float: left; margin: 1px 8px 0 0; }
.word__extr { display: block; clear: both; margin-top: 4px; color: var(--ink-400); font-size: var(--fs-sm); }
.speakbtn { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--purple-50); color: var(--purple-600); }
.speakbtn--sm { width: 24px; height: 24px; }
.speakbtn:hover { background: var(--purple-100); }

.flashcard {
  display: grid; place-items: center; gap: 16px;
  min-height: 260px; padding: 32px;
  text-align: center;
}
.flashcard__word { font-size: 2rem; font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; }
.flashcard__meaning { font-size: var(--fs-xl); color: var(--purple-600); font-weight: 700; }
.flashcard__example { color: var(--ink-400); max-width: 46ch; }

/* Writing ------------------------------------------------------------------- */
.taskbanner {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px;
  border-radius: var(--r-xl);
  border: 1px solid var(--amber-100);
  background: linear-gradient(180deg, var(--amber-50), rgba(255, 248, 235, .35));
}
.taskbanner__body { flex: 1; min-width: 0; }
.taskbanner__title { font-size: var(--fs-xl); font-weight: 800; color: var(--ink-900); letter-spacing: -.01em; }
.taskbanner__prompt { color: var(--ink-500); margin-top: 4px; white-space: pre-line; }
/* pre-line: una tarea con formato de examen trae su situacion y sus puntos
   en lineas separadas, y sin esto se juntaban en un solo parrafo. */
@media (max-width: 700px) { .taskbanner { flex-wrap: wrap; } }

.editor { border: 1px solid var(--border-strong); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.editor__bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); flex-wrap: wrap; }
.editor__area { width: 100%; border: 0; padding: 18px; min-height: 260px; resize: vertical; line-height: 1.75; font-size: var(--fs-lg); }
.editor__area:focus { outline: none; }
.editor__foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.editor__count { font-size: var(--fs-sm); color: var(--ink-400); font-weight: 650; }
.editor__count[data-state="ok"] { color: var(--green-600); }
.editor__count[data-state="over"] { color: var(--red-500); }

.rubric { display: grid; gap: 12px; }
.rubric__row { display: grid; gap: 6px; }
.rubric__top { display: flex; align-items: center; gap: 10px; }
.rubric__name { font-weight: 650; color: var(--ink-700); font-size: var(--fs-md); }
.rubric__label { margin-left: auto; font-size: var(--fs-xs); font-weight: 800; }
.rubric__row[data-level="critical"]  { --accent: var(--red-500); }
.rubric__row[data-level="developing"] { --accent: var(--amber-500); }
.rubric__row[data-level="competent"]  { --accent: var(--green-500); }
.rubric__row[data-level="critical"]   .rubric__label { color: var(--red-500); }
.rubric__row[data-level="developing"] .rubric__label { color: var(--amber-600); }
.rubric__row[data-level="competent"]  .rubric__label { color: var(--green-600); }

.diff { line-height: 1.7; }

/* Only the words that changed are marked, and never struck through: the whole
   sentence stays readable, which is the point of showing it. */
.dw {
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.dw--was { background: var(--red-50); color: var(--red-500); text-decoration-color: var(--red-500); }
.dw--now { background: var(--green-50); color: var(--green-600); text-decoration-color: var(--green-500); }
.corrected { line-height: 1.85; font-size: var(--fs-lg); color: var(--ink-800); white-space: pre-wrap; }

/* El texto escrito y el corregido, en paralelo. Por debajo de 900px no caben
   dos columnas legibles, asi que se apilan en el orden en que se leen. */
.sbs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.sbs__col { min-width: 0; }
.sbs__col + .sbs__col { padding-left: 22px; border-left: 1px solid var(--border); }
.sbs__label {
  display: block; margin-bottom: 10px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-400);
}
.sbs__label--now { color: var(--green-600); }
@media (max-width: 900px) {
  .sbs { grid-template-columns: 1fr; gap: 18px; }
  .sbs__col + .sbs__col { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid var(--border); }
}

.sev { display: inline-flex; padding: 2px 8px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 800; }
.sev--high { background: var(--red-50); color: var(--red-500); }
.sev--medium { background: var(--amber-50); color: var(--amber-600); }
.sev--low { background: var(--ink-50); color: var(--ink-400); }

/* Reading ------------------------------------------------------------------- */
.readtext {
  font-size: 1.1rem; line-height: 1.95; color: var(--ink-800);
  max-width: 68ch;
}
.readtext p + p { margin-top: 1em; }

/* Steps / progress list (writing right column) ------------------------------- */
.stepslist { display: grid; gap: 4px; }
.stepslist__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--r-md);
}
.stepslist__item[data-state="active"] { background: var(--purple-50); }
.stepslist__mark { flex: none; margin-top: 2px; color: var(--ink-200); }
.stepslist__item[data-state="done"] .stepslist__mark,
.stepslist__item[data-state="active"] .stepslist__mark { color: var(--purple-600); }
.stepslist__name { font-weight: 650; color: var(--ink-700); font-size: var(--fs-md); }
.stepslist__item[data-state="active"] .stepslist__name { color: var(--purple-700); }
.stepslist__desc { font-size: var(--fs-sm); color: var(--ink-400); }

/* Pagination ---------------------------------------------------------------- */
.pager { display: flex; align-items: center; gap: 6px; justify-content: center; }
.pager__btn {
  min-width: 34px; height: 34px; padding: 0 8px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  color: var(--ink-500); font-weight: 650; font-size: var(--fs-md);
}
.pager__btn:hover { background: var(--ink-50); }
.pager__btn[aria-current="page"] { background: var(--purple-600); color: var(--white); }
.pager__btn:disabled { opacity: .4; pointer-events: none; }

/* Auth ---------------------------------------------------------------------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth__card { width: min(420px, 100%); }

/* Grammar theory: rule + key points + reference tables, long prose folded away */
.keypoints { margin-top: 18px; }
.keypoints__title {
  display: block; margin-bottom: 10px;
  font-size: var(--fs-sm); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-400);
}
.keypoints ul { display: grid; gap: 9px; }
.keypoints li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-base); color: var(--ink-700); line-height: 1.55;
}
.keypoints li .icon { flex: none; margin-top: 3px; color: var(--green-500); }

.gtables { display: grid; gap: 18px; margin-top: 22px; }
.gtable { margin: 0; }
.gtable__title {
  font-size: var(--fs-md); font-weight: 700; color: var(--ink-900);
  margin-bottom: 8px;
}
.gtable__note { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-400); font-style: italic; }
.gtable .tablewrap { border: 1px solid var(--border); border-radius: var(--r-md); }

.table--grid { font-size: var(--fs-md); }
.table--grid th {
  background: var(--surface-sunken);
  color: var(--ink-500); font-weight: 700;
  padding: 9px 12px; border-bottom: 1px solid var(--border-strong);
}
.table--grid td { padding: 9px 12px; white-space: nowrap; }
.table--grid td + td { border-left: 1px solid var(--border); }
.table--grid th + th { border-left: 1px solid var(--border); }
.gtable__label { font-weight: 650; color: var(--ink-800); background: var(--surface-sunken); }
.table--grid tbody tr:hover { background: var(--purple-50); }

.theory__full { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px; }
.theory__full summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none;
  font-size: var(--fs-md); font-weight: 650; color: var(--purple-600);
}
.theory__full summary::-webkit-details-marker { display: none; }
.theory__full summary:hover { color: var(--purple-700); }
.theory__full[open] summary { margin-bottom: 4px; }

/* Weekly calendar ----------------------------------------------------------- */
.weekcal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calday {
  display: flex; flex-direction: column;
  min-height: 132px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.calday[data-study="true"] { background: var(--white); }
.calday[data-today="true"] { border-color: var(--purple-400); box-shadow: 0 0 0 2px var(--purple-100); }
.calday[data-target="true"] { border-color: var(--purple-500); border-style: dashed; background: var(--purple-50); }

.calday__head {
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
}
.calday__name { font-size: var(--fs-xs); font-weight: 800; color: var(--ink-400); text-transform: uppercase; letter-spacing: .04em; }
.calday__date { font-size: var(--fs-md); font-weight: 700; color: var(--ink-800); }
.calday[data-today="true"] .calday__date { color: var(--purple-600); }
.calday__today {
  margin-left: auto; padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--purple-600); color: var(--white);
  font-size: 10px; font-weight: 800;
}

.calday__body { flex: 1; display: grid; gap: 6px; align-content: start; padding: 8px; }
.calday__empty { font-size: var(--fs-xs); color: var(--ink-300); text-align: center; padding: 8px 2px; }
.calday__foot {
  padding: 5px 10px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-400); text-align: right;
}

.calblock {
  position: relative;
  border: 1px solid var(--accent-line, var(--border));
  border-left: 3px solid var(--accent, var(--purple-500));
  border-radius: var(--r-sm);
  background: var(--white);
  cursor: grab;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), opacity .12s var(--ease);
}
.calblock:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.calblock[data-dragging="true"] { opacity: .4; }
.calblock[data-picked="true"] { box-shadow: 0 0 0 2px var(--purple-500); }
/* Terminado ---------------------------------------------------------------
   El mismo gesto en las cuatro tarjetas -- panel, roadmap, gramatica,
   lectura -- para que "esto ya esta" se lea de un vistazo y no haya que
   buscar la etiqueta de estado: fondo verde muy claro, filo verde y la
   marca en la casilla del icono. Baja el contraste, no lo apaga: sigue
   siendo un enlace que se puede repetir. */
.todaycard[data-done="true"],
.actcard[data-done="true"],
.modcard[data-done="true"] {
  border-color: var(--green-100);
  background: var(--green-50);
}
.todaycard[data-done="true"] .tile,
.actcard[data-done="true"] .tile,
.modcard[data-done="true"] .tile {
  background: var(--green-50);
  color: var(--green-600);
  box-shadow: inset 0 0 0 1px var(--green-100);
}
.todaycard[data-done="true"] .todaycard__name,
.actcard[data-done="true"] .actcard__name,
.modcard[data-done="true"] .modcard__title { color: var(--ink-500); }

/* El bloque del calendario es pequeño: baja el contraste del texto en vez de
   apagar la tarjeta entera, y se queda con el verde y su marca. */
.calblock[data-done="true"] {
  border-color: var(--green-100);
  background: var(--green-50);
}
.calblock[data-done="true"] .calblock__name { color: var(--ink-500); }
.calblock[data-done="true"] .calblock__meta { opacity: .7; }

.calblock__link { display: grid; gap: 3px; padding: 7px 8px 8px; color: inherit; }
.calblock__link:hover { text-decoration: none; }
.calblock__top { display: flex; align-items: center; gap: 5px; color: var(--accent, var(--purple-600)); }
.calblock__top .pill { padding: 1px 6px; font-size: 10px; }
.calblock__name {
  font-size: var(--fs-sm); font-weight: 650; color: var(--ink-800); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.calblock__meta { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-400); }

.calblock__grip {
  position: absolute; top: 2px; right: 0;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--ink-300);
  cursor: grab;
}
.calblock__grip:hover { color: var(--purple-600); }
.calblock__done { position: absolute; bottom: 4px; right: 5px; color: var(--green-500); }

/* Below tablet the week becomes a scrollable strip of day columns. */
@media (max-width: 900px) {
  .weekcal {
    grid-template-columns: repeat(7, 78%);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .calday { scroll-snap-align: center; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .weekcal { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .calday { min-height: 120px; }
}

/* Grid children must be allowed to shrink, or a wide table pushes the page. */
.gtables { grid-template-columns: minmax(0, 1fr); }
.gtable, .gtable .tablewrap { min-width: 0; max-width: 100%; }
.weekcal { min-width: 0; max-width: 100%; }

/* Long unbroken strings (URLs, compound German nouns) wrap instead of pushing
   the layout - but only as a last resort, never mid-word in normal prose. */
.card, .modcard, .qcard { overflow-wrap: break-word; }

/* Data tables scroll inside their wrapper rather than crushing their columns.
   Without a floor the Example column collapses to one word per line as soon as
   the sidebar takes its 240px. */
.table--data { min-width: 760px; }
.table--data td, .table--data th { overflow-wrap: normal; word-break: normal; }
.table--data .word__ex { min-width: 260px; }
.table--data .word { white-space: nowrap; }

/* Clue after a gap-fill sentence: which verb to conjugate, which noun to decline */
.qcard__clue {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: var(--r-full);
  background: var(--purple-50);
  border: 1px solid var(--purple-100);
  color: var(--purple-700);
  font-size: var(--fs-base);
  font-weight: 650;
  font-style: italic;
  white-space: nowrap;
  vertical-align: middle;
}
@media (max-width: 620px) {
  .qcard__clue { display: block; margin: 8px 0 0; width: fit-content; white-space: normal; }
}

/* Blocking overlay while the model is working ------------------------------ */
.working {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(23, 20, 56, .55);
  backdrop-filter: blur(3px);
  animation: workingIn .18s var(--ease);
}
@keyframes workingIn { from { opacity: 0; } }

.working__box {
  width: min(400px, 100%);
  display: grid; justify-items: center; gap: 10px;
  padding: 32px 28px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.working__spinner {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--purple-100);
  border-top-color: var(--purple-600);
  animation: workingSpin .9s linear infinite;
}
@keyframes workingSpin { to { transform: rotate(360deg); } }

.working__title { font-size: var(--fs-xl); letter-spacing: -.01em; }
.working__body { font-size: var(--fs-md); color: var(--ink-400); max-width: 34ch; }
.working__steps {
  display: grid; gap: 8px;
  margin-top: 8px; padding-top: 14px;
  border-top: 1px solid var(--border);
  width: 100%;
}
.working__steps li {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-md); color: var(--ink-500);
}
.working__steps li:first-child .icon { color: var(--green-500); }
.working__steps li:last-child .icon { color: var(--purple-400); }

.todaycard--static { cursor: default; }
.todaycard--static:hover { transform: none; box-shadow: var(--shadow-xs); }

/* Cada error recurrente lleva a donde se ve: el bloque que se genero para el,
   o el feedback del writing donde aparecio. */
.mistake {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 9px; margin: 0 -9px;
  border-radius: var(--r-sm);
  color: inherit;
}
.mistake:hover { background: var(--ink-50); }
.mistake svg { color: var(--ink-300); flex: none; }
.mistake:hover svg { color: var(--purple-600); }

/* Teoria del tipo de texto: una fila baja encima de la tarea y un dialogo. */
.theorybar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 8px 7px 14px;
  border-radius: var(--r-lg);
  background: var(--amber-50);
  border: 1px solid var(--amber-100);
}
.theorybar__text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-700); }
.theorybar__text > svg { flex: none; color: var(--amber-600); }
.theorybtn { background: #F7C33C; color: var(--ink-900); font-weight: 700; }
.theorybtn:hover { background: #EDB31C; }
@media (max-width: 560px) {
  .theorybar { flex-wrap: wrap; }
  .theorybtn { width: 100%; justify-content: center; }
}
.theory { width: min(680px, 100%); }
.theory__head { display: flex; align-items: center; gap: 10px; }
.theory__head .iconbtn { margin-left: auto; }
.theory__exam {
  display: flex; gap: 8px; margin-top: 14px; padding: 10px 12px;
  border-radius: var(--r-md, 10px); background: var(--amber-50);
  font-size: var(--fs-sm); color: var(--ink-700);
}
.theory__exam > svg { flex: none; color: var(--amber-600); margin-top: 2px; }
.theory__section { margin-top: 18px; font-weight: 800; color: var(--ink-900); }
.theory__steps { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.theory__steps > li { padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md, 10px); }
.theory__steps p { margin: 2px 0 0; }
.theory__phrases { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--ink-900); }
.theory__avoid { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-700); }

/* Listening: reproductor sin barra de busqueda, como en el examen. */
.listen__situation { margin-top: 10px; color: var(--ink-700); }
.listen__player { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.listen__btn { background: var(--teal-600); color: var(--white); min-width: 128px; justify-content: center; }
.listen__btn:hover { background: var(--teal-700); }
.listen__track { flex: 1; height: 8px; border-radius: 99px; background: var(--ink-100); overflow: hidden; }
.listen__fill { display: block; height: 100%; width: 0; background: var(--teal-500); transition: width .25s linear; }
.listen__time { min-width: 92px; text-align: right; font-size: var(--fs-sm); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.listen__transcript { margin-top: 16px; }
.listen__transcript summary { cursor: pointer; font-weight: 700; color: var(--teal-600); }
.listen__line { margin: 8px 0 0; }
.listen__line b { color: var(--ink-900); }
.listen__cue { margin: 16px 0 0; font-weight: 700; color: var(--ink-500); }