/* ============================================================
 * Design System v1 — aprueba.net (marca)
 * Basado en DESIGN.md (proyecto Guías Interactivas de Estudio).
 *
 * REGLA CRÍTICA: cualquier estilo de píldora / badge / uppercase
 * sobre <span> dentro de un componente que pueda contener KaTeX
 * (\(...\) en el contenido) DEBE usar el selector de hijo directo
 * `>`, nunca el combinador descendiente. KaTeX inserta jerarquía
 * profunda de spans y un descendiente produce "blobs" gigantes
 * alrededor de la fórmula. Detalles: docs/context/quality-checklist.md
 * ============================================================ */

/* Fuente del sistema (sin CDN): stack -apple-system. Antes era
 * Mona Sans; ahora se usa la fuente nativa por marca aprueba.net. */

/* === Tokens compartidos (no cambian entre temas) === */
:root {
  /* Acentos de marca aprueba.net (naranja interaccion, verde exito) */
  --accent-green: #39B54A;
  --accent-green-hover: #2E9E3E;
  --accent-green-active: #248030;
  --accent-blue: #F5821F;
  --accent-orange: var(--accent-blue); /* brand: alias semantico */
  --accent-orange-hover: var(--accent-blue-hover);
  --accent-navy: #283891;
  --accent-blue-hover: #E56F0E;
  --accent-blue-active: #C75D08;
  --accent-yellow: #FCB900;
  --accent-red: #CF2E2E;
  --accent-red-hover: #B82626;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(40, 56, 145, 0.35);

  /* Easing — ease-out exponencial: arranque vivo, llegada suave (sin rebote) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* === Estandar visual aprueba.net (ref: docs/templates/design-reference.html, ADR 0018) ===
     Lenguaje matematico: cuadricula de cuaderno + marcador. Roles de color:
     naranja=accion, navy=modo ejercicio, verde=exito. */
  --ink-strong: #181B22;                 /* negro de marca: estructura, bordes fuertes, sombra dura */
  --ok-tint: #EAF7EC;                     /* fondo de exito suave: paso completado, acierto, progreso */
  --bg-exercise: var(--accent-navy);     /* cabecera "modo ejercicio" (separa resolver de leer) */
  --shadow-hard: 4px 4px 0 var(--ink-strong);  /* sombra dura desplazable (hero, boton sticker) */
  --grid-line: var(--border-soft);       /* linea de la cuadricula de cuaderno del hero */
  --ok: var(--accent-green);              /* alias semantico de exito */
  --ok-deep: var(--accent-green-active);  /* exito profundo (texto sobre tinte) */
  --accent-deep: var(--accent-blue-active); /* naranja profundo (texto sobre cream) */
  --cream: #FFF3E7;                       /* tinte naranja muy suave: hover, superficies calidas */
  --r-card: 16px;                         /* radio de tarjetas y contenedores del estandar */
  --r-hero: 22px;                         /* radio de hero y bloques grandes */

  /* Radios */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Espaciado base 4px */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Tipografía */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: Menlo, ui-monospace, SFMono-Regular, "Liberation Mono", monospace;
}

/* === Tema claro (unico) — marca aprueba.net === */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg-base: #FFFFFF;
  --bg-elev-1: #FFFFFF;
  --bg-elev-2: #F0F5FA;
  --bg-input: #FFFFFF;
  --bg-topbar: rgba(255, 255, 255, 0.85);
  --bg-glow-1: rgba(245, 130, 31, 0.05);
  --bg-glow-2: rgba(57, 181, 74, 0.04);

  --bg-tint-blue: rgba(245, 130, 31, 0.08);
  --bg-tint-green: rgba(57, 181, 74, 0.08);
  --bg-tint-yellow: rgba(252, 185, 0, 0.14);
  --bg-tint-red: rgba(207, 46, 46, 0.07);
  --bg-tint-subtle: rgba(31, 35, 40, 0.04);

  --text-primary: #334155;
  --text-secondary: #475569;
  --text-muted: #59636E;
  --text-disabled: #94A3B8;
  --text-success: #39B54A;
  --text-danger: #CF2E2E;
  --text-on-yellow: #5C3D00;

  --border-strong: #B7BDC8;
  --border-default: #D1D5DB;
  --border-soft: #ECEFF3;
  --progress-track: #ECEFF3;

  --shadow-raised:
    rgba(31, 35, 40, 0.04) 0px 0px 0px 1px,
    rgba(31, 35, 40, 0.04) 0px 6px 12px -3px,
    rgba(31, 35, 40, 0.06) 0px 6px 18px 0px;
  --shadow-lifted:
    rgba(31, 35, 40, 0.06) 0px 0px 0px 1px,
    rgba(31, 35, 40, 0.10) 0px 12px 28px -6px,
    rgba(31, 35, 40, 0.08) 0px 24px 48px 0px;
}

/* === Tema oscuro (alternativa) === */

/* === Reset y base === */

* { box-sizing: border-box; }

html {
  background: var(--bg-base);
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 480px at 100% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(900px 380px at -10% 110%, var(--bg-glow-2), transparent 60%),
    var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 220ms ease, color 220ms ease;
}

h1, h2, h3, p { overflow-wrap: anywhere; }

::selection {
  background: rgba(245, 130, 31, 0.40);
  color: var(--text-primary);
}

/* === Tipografía (DESIGN.md §3) === */

h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* === Topbar === */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 96px;
  padding: var(--s-5) clamp(20px, 5vw, 56px);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-default);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* === Theme toggle === */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-tint-subtle);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--accent-blue);
  background: var(--bg-tint-blue);
  color: var(--accent-blue);
  outline: none;
}

.theme-toggle:focus-visible { box-shadow: var(--focus-ring); }

.theme-toggle:active { transform: scale(0.97); }

.theme-toggle svg { width: 18px; height: 18px; display: block; }

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.topbar h1 {
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.2;
}

.eyebrow,
.module-kicker {
  margin: 0 0 6px;
  color: var(--accent-blue);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* === Píldoras y badges (clases propias, sin span hijo) === */

.version-tag,
.state-chip,
.memory-chip,
.day-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  background: var(--bg-tint-blue);
  color: var(--accent-blue);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.version-tag {
  margin-left: 10px;
  vertical-align: middle;
}

.memory-chip {
  background: var(--bg-tint-yellow);
  color: var(--accent-yellow);
  border-color: rgba(252, 185, 0, 0.30);
}

.day-pill {
  background: var(--bg-tint-blue);
  color: var(--accent-blue);
  border-color: rgba(245, 130, 31, 0.30);
}

.status-pill {
  flex: 0 0 auto;
  min-width: 220px;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-elev-2);
  color: var(--text-secondary);
  font-weight: 500;
  text-align: center;
}

/* === Layout === */

.layout {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: var(--s-6) clamp(18px, 4vw, 48px) 64px;
}

.study-app {
  display: grid;
  gap: var(--s-5);
}

.study-app[data-view="challenge"] { gap: var(--s-4); }

/* === Tarjetas base (raised) === */

.study-view-head,
.study-quick-start,
.study-module-card,
.module-overview,
.challenge-card,
.progress-card,
.variant-card,
.challenge-nav {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-elev-1);
  box-shadow: var(--shadow-raised);
}

.study-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5);
}

.study-view-head p:not(.module-kicker) {
  max-width: 820px;
  margin: var(--s-2) 0 0;
  color: var(--text-muted);
}

.study-view-actions,
.study-card-actions,
.challenge-nav,
.form-actions,
.status-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.study-view-actions { justify-content: flex-end; }

/* === Quick start (banda destacada) === */

.study-quick-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-color: rgba(245, 130, 31, 0.35);
  background:
    linear-gradient(90deg, rgba(245, 130, 31, 0.12), rgba(57, 181, 74, 0.10)),
    var(--bg-elev-1);
}

/* > directo para no afectar KaTeX (puede haber math en strong) */
.study-quick-start > div > span {
  display: block;
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.study-quick-start strong {
  display: block;
  margin-top: 4px;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
}

.study-quick-start p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-weight: 400;
}

/* === Grid de misiones === */

.study-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.study-module-card {
  position: relative;
  display: grid;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-5);
  overflow: hidden;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.study-module-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lifted);
}

.study-module-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent-blue), var(--accent-green));
}

.study-module-card h3 { font-size: 18px; line-height: 1.3; }

.study-module-card p {
  margin: 6px 0 0;
  color: var(--text-muted);
}

.study-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* > directo: las chips en study-stats pueden venir con math en el texto */
.study-stats > span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border: 1px solid rgba(57, 181, 74, 0.30);
  border-radius: var(--r-full);
  background: var(--bg-tint-green);
  color: var(--text-success);
  font-size: 12px;
  font-weight: 600;
}

/* === Layout de módulo (overview + progress aside) === */

.module-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--s-4);
  align-items: start;
}

.module-overview {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
}

.learning-block {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--accent-blue);
  border-radius: var(--r-sm);
  background: var(--bg-elev-2);
}

.learning-block h3 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-blue);
}

.learning-block.detour { border-left-color: var(--accent-yellow); }
.learning-block.detour h3 { color: var(--accent-yellow); }

.learning-block.example { border-left-color: var(--accent-green); }
.learning-block.example h3 { color: var(--text-success); }

.learning-block.recall { border-left-color: var(--accent-red); }
.learning-block.recall h3 { color: var(--text-danger); }

.learning-block p,
.learning-block ul,
.learning-block ol {
  margin: 6px 0 0;
  color: var(--text-secondary);
}

.learning-block li + li { margin-top: 4px; }

/* === Progress card (aside) === */

.progress-card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
}

.progress-card strong {
  color: var(--accent-blue);
  font-size: 34px;
  line-height: 1;
  font-weight: 600;
}

/* === Lista de retos (rows) === */

.challenge-list {
  display: grid;
  gap: var(--s-2);
}

.challenge-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-elev-2);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.challenge-row:hover,
.challenge-row:focus-visible {
  border-color: var(--accent-blue);
  background: var(--bg-tint-blue);
  outline: none;
}

/* > directo: el span de la izquierda puede tener math en el "kind" */
.challenge-row > span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border: 1px solid rgba(252, 185, 0, 0.30);
  border-radius: var(--r-full);
  background: var(--bg-tint-yellow);
  color: var(--accent-yellow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.challenge-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 500;
}

.challenge-row em {
  color: var(--text-muted);
  font-style: normal;
  font-weight: 500;
  text-align: right;
}

/* === Navegación del reto === */

.challenge-nav {
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
}

.step-meter {
  display: grid;
  gap: 6px;
  min-width: min(360px, 100%);
  color: var(--text-muted);
  font-weight: 500;
}

/* > directo: prevención KaTeX */
.step-meter > span {
  font-size: 12px;
  color: var(--text-muted);
}

.step-meter div {
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--progress-track);
}

.step-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
  transition: width 240ms ease;
}

/* === Tarjeta del reto === */

.challenge-card {
  display: grid;
  gap: var(--s-4);
  width: min(100%, 940px);
  justify-self: center;
  padding: clamp(20px, 3vw, 32px);
}

.challenge-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.challenge-title h2 { font-size: 22px; line-height: 1.3; }

/* > directo para no afectar KaTeX en el título */
.challenge-title > span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border: 1px solid rgba(245, 130, 31, 0.30);
  border-radius: var(--r-full);
  background: var(--bg-tint-blue);
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* === Stage label (Lee/Decide/Resuelve/Empareja) ===
 * MUY importante: > span obligatorio porque el prompt suele
 * llevar KaTeX (\(...\)) en el <strong>. */

.stage-label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-secondary);
  font-weight: 500;
}

.stage-label strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Píldora "Lee" (default = info / blue) */
.stage-label > span {
  display: inline-grid;
  place-items: center;
  min-width: 64px;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--accent-blue);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stage-label.decide > span { background: var(--accent-yellow); color: var(--text-on-yellow); }
.stage-label.solve > span { background: var(--accent-green); }

/* === Statement (enunciado del reto) === */

.statement {
  margin: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--accent-blue);
  border-radius: var(--r-sm);
  background: var(--bg-elev-2);
  color: var(--text-primary);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.55;
}

/* === Cajas: decisión / respuesta / memoria === */

.decision-box,
.answer-box,
.memory-box {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-elev-2);
}

.memory-box {
  border-color: rgba(252, 185, 0, 0.30);
  background: linear-gradient(180deg, rgba(252, 185, 0, 0.06), transparent 60%), var(--bg-elev-2);
}

.option-grid {
  display: grid;
  gap: var(--s-2);
}

.answer-prompt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 500;
}

/* === Option cards / toggles === */

.option-card,
.field-row,
.state-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 10px var(--s-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}

.option-card:hover,
.option-card:focus-within,
.field-row:hover,
.field-row:focus-within,
.state-toggle:hover {
  border-color: var(--accent-blue);
  background: var(--bg-tint-blue);
}

.option-card input,
.state-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-green);
}

.answer-option { min-height: 48px; }

/* Estados marcados (cuando el JS añade is-correct/is-wrong) */
.option-card.is-correct { border-color: var(--accent-green); background: var(--bg-tint-green); }
.option-card.is-wrong { border-color: var(--accent-red); background: var(--bg-tint-red); }

/* === Inputs y selects === */

input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

/* Placeholder con contraste WCAG (>=4.5:1); --text-disabled no califica */
input[type="text"]::placeholder,
textarea::placeholder { color: var(--text-muted); }

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-blue);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* === Botones === */

.ghost-button,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--r-xs);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.ghost-button {
  border: 1px solid var(--border-strong);
  background: var(--bg-tint-subtle);
  color: var(--text-primary);
}

.ghost-button:hover,
.ghost-button:focus-visible {
  border-color: var(--text-primary);
  background: var(--bg-tint-subtle);
  outline: none;
}

.primary-button {
  border: 1px solid var(--accent-blue);
  background: var(--accent-blue);
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--accent-blue-hover);
  border-color: var(--accent-blue-hover);
  outline: none;
  box-shadow: 0 4px 12px rgba(245, 130, 31, 0.30);
}

.primary-button:active { background: var(--accent-blue-active); }

.ghost-button:disabled,
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

/* Variante azul opcional */
.primary-button.is-blue {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.primary-button.is-blue:hover { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); }

/* === Feedback === */

.feedback {
  min-height: 22px;
  margin: 0;
  color: var(--text-muted);
  font-weight: 500;
}

.feedback.correct { color: var(--text-success); }
.feedback.incorrect { color: var(--text-danger); }

/* === Details / disclosure === */

details {
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-elev-2);
}

summary {
  min-height: 40px;
  padding: 10px 14px;
  color: var(--accent-blue);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: " +";
  color: var(--text-muted);
  float: right;
}

details[open] summary::after { content: " −"; }

details p {
  margin: 0;
  padding: 0 14px 12px;
  color: var(--text-secondary);
}

/* === KaTeX (asegurar color blanco heredado y scroll horizontal) === */

.katex { font-size: 1.04em; color: inherit; }

.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
}

/* === Selector de variantes (7 días) === */

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

.variant-card {
  position: relative;
  display: grid;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-5);
  overflow: hidden;
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.variant-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lifted);
}

.variant-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent-blue), var(--accent-green));
}

.variant-card.is-complete::before {
  background: linear-gradient(180deg, var(--accent-green), var(--text-success));
}

.variant-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.variant-card h3 {
  margin: 0;
  font-size: 18px;
}

.variant-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.variant-progress {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.variant-progress > div {
  flex: 1;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--progress-track);
  overflow: hidden;
}

.variant-progress > div > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
  transition: width 0.25s ease;
}

.variant-card .primary-button {
  justify-self: stretch;
  text-align: center;
}

/* === Soporte: matching === */

.matching-grid {
  display: grid;
  gap: var(--s-2);
}

.matching-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.2fr;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-input);
}

.matching-row select { background: var(--bg-elev-2); }

.matching-row strong { color: var(--text-primary); font-weight: 600; }

.challenge-support { display: grid; gap: var(--s-2); }

/* === Responsive === */

@media (max-width: 1000px) {
  .study-module-grid,
  .module-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar,
  .study-view-head,
  .study-quick-start,
  .challenge-nav,
  .study-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .status-pill { width: 100%; }

  .challenge-row,
  .field-row {
    grid-template-columns: 1fr;
  }

  .challenge-row strong { white-space: normal; }
  .challenge-row em { text-align: left; }
}

/* === Movimiento reducido (accesibilidad, obligatorio) ===
 * Respeta prefers-reduced-motion: anula desplazamientos, escalados y
 * choreografía; deja solo cambios de color/opacidad casi instantaneos. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .study-module-card:hover,
  .variant-card:hover { transform: none; }

  .theme-toggle:active { transform: none; }
}