/* ============================================================================
   Componentes, siguiendo DISENO_SISTEMA.md §7.

   Convención: las superficies se delimitan con un filete de 1px hecho con
   `box-shadow` (el `ring` del sistema), no con `border`, para que el filete no
   desplace la caja ni se acumule con el relleno. Los `border` quedan para
   separadores y para los filetes de acento.
   ========================================================================= */

/* ------------------------------------------------------------------ ring -- */

.ring {
  box-shadow: 0 0 0 1px var(--ring);
}

/* ---------------------------------------------------------------- navbar --
   Pegajosa, translúcida, con barra de progreso de scroll de 3px (§7.2). */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--niebla) 82%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--ring);
  transition: box-shadow var(--speed) var(--ease);
}

.navbar.on-dark {
  background: color-mix(in srgb, var(--azul-profundo) 82%, transparent);
}

.navbar.is-scrolled {
  box-shadow: var(--shadow-md);
}

.navbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  min-height: 5rem;
  padding-block: var(--s-3);
}

.navbar__brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  margin-inline-end: var(--s-5);
}

.navbar__brand:hover {
  color: inherit;
}

.navbar__brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-strong);
}

.navbar__brand-sub {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--acento);
}

.navbar__link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}

.navbar__link:hover {
  color: var(--acento-em);
}

.navbar__spacer {
  margin-inline-start: auto;
}

.navbar__user {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.scroll-progress-track {
  height: 3px;
  width: 100%;
  grid-column: full;
}

.scroll-progress {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--azul), var(--vino), var(--dorado));
}

/* La barra de secciones del curso es la misma navbar; `.toolbar` se conserva
   porque la hoja de impresión la oculta por ese nombre. */
.toolbar__spacer {
  margin-inline-start: auto;
}

.toolbar__user {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* ------------------------------------------------------------------ hero --
   Banda clara sobre niebla, con blobs difuminados y entrada escalonada. */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-8) var(--s-9);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.375rem var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--ring);
}

.hero__badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--acento);
}

.hero h1 {
  margin-block: var(--s-5) 0;
}

.hero > p:not(.small):not(.watermark) {
  margin-block-start: var(--s-5);
  font-size: var(--fs-md);
  color: var(--ink-soft);
}

.hero .btn-row {
  margin-block-start: var(--s-6);
}

.hero .small {
  margin-block-start: var(--s-4);
}

.hero__eyebrow {
  color: var(--acento);
}

/* --------------------------------------------------------- introducción --
   Un solo bloque editorial: cabecera a todo el ancho con el título y la marca
   de agua, filete de arranque con su tramo de acento, y debajo dos columnas
   cosidas por el mismo sistema de filetes —la definición citada en papel a la
   izquierda, los cinco puntos como registro numerado a la derecha. */

.intro {
  /* Aire entre el filete que separa las columnas y el texto que cuelga de él. */
  --intro-gutter: var(--s-6);
}

/* La cabecera ocupa las dos columnas: el título ya no compite con la lista por
   la altura de arranque, así que las dos columnas empiezan a la misma línea. */
.intro__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5);
  padding-block-end: var(--s-6);
  border-block-end: 1px solid var(--hairline);
}

/* Tramo de acento sobre el filete: el mismo gesto de arranque del sistema,
   aquí al pie del título. */
.intro__head::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  width: 5rem;
  height: 2px;
  background: var(--acento);
}

.intro__head h1 {
  margin-block: 0;
}

/* La marca de agua es un elemento más de la rejilla —no un adorno absoluto en
   la esquina—: ocupa el hueco que el título deja a su derecha y nunca sale
   recortada por el `overflow` del hero. */
.intro__sigma {
  position: static;
  justify-self: end;
  margin: 0;
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: 0.78;
}

.intro__body {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: var(--s-7) var(--s-8);
  align-items: start;
  margin-block-start: var(--s-6);
}

/* Sobre la niebla del hero la cita necesita papel propio: es el documento que
   se cita, y conviene que se vea como una pieza aparte del texto redactado. */
.cita--intro {
  padding: var(--s-7) var(--s-6);
  background: var(--paper-raised);
  box-shadow:
    0 0 0 1px var(--ring),
    var(--shadow-sm);
}

.cita--intro blockquote > p {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--ink);
}

/* La ficha del curso, redactada. Las cifras van en la display y en azul: el
   párrafo se puede leer entero o barrer solo por sus números. */
.intro__plan {
  margin-block-start: var(--s-7);
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--ink-soft);
}

.intro__plan .num {
  font-size: 1.05em;
  color: var(--ink-strong);
}

/* Puntos de la introducción: para qué sirve, la ventaja, por qué importa.
   Los cinco cuelgan del filete que separa las dos columnas, separados entre sí
   por filetes finos y con el número en la display colgado en el margen: se leen
   como una serie —un registro— y no como cinco notas sueltas. */
.intro-points {
  display: grid;
  margin: 0;
  counter-reset: punto;
  padding-inline-start: var(--intro-gutter);
  border-inline-start: 1px solid var(--hairline);
}

.intro-points > div {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--s-3);
  padding-block: var(--s-4);
}

.intro-points > div + div {
  border-block-start: 1px solid var(--hairline);
}

/* El primero arranca a la altura de la cita y el último cierra con ella. */
.intro-points > div:first-child {
  padding-block-start: 0;
}

.intro-points > div:last-child {
  padding-block-end: 0;
}

/* 01 … 05 colgados en el margen, alineados por línea de base con su rótulo. */
.intro-points > div::before {
  counter-increment: punto;
  content: counter(punto, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  transition: color var(--speed-fast) var(--ease);
}

/* Tramo de acento montado sobre el filete de la columna: señala el punto
   activo sin mover ni agrandar nada. */
.intro-points > div::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc((var(--intro-gutter) + 1px) * -1);
  width: var(--rail);
  background: var(--acento);
  opacity: 0;
  transition: opacity var(--speed-fast) var(--ease);
}

.intro-points dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--ink-strong);
}

.intro-points dd {
  grid-column: 2;
  margin: var(--s-2) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-soft);
  transition: color var(--speed-fast) var(--ease);
}

/* El punto sobre el que está el cursor se afirma: tramo de acento en el riel,
   número en terracota y texto a tinta plena. Nada se mueve. */
@media (hover: hover) {
  .intro-points > div:hover::after {
    opacity: 1;
  }

  .intro-points > div:hover::before {
    color: var(--acento);
  }

  .intro-points > div:hover dd {
    color: var(--ink);
  }
}

@media (max-width: 62rem) {
  .intro__body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Apiladas, el riel vertical ya no separa nada: la lista queda al filo del
     texto y se apoya solo en sus filetes horizontales. */
  .intro-points {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .intro-points > div::after {
    content: none;
  }

  .intro__sigma {
    display: none;
  }
}

/* -------------------------------------------------------------- medidas --
   Ficha técnica del curso: rejilla de cifras en display, sobre banda oscura. */

.measures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-6) var(--s-5);
  padding-block: var(--s-6);
  border-block-start: 2px solid rgb(227 164 66 / 0.4);
}

.measure dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--acento);
}

.on-dark .measure dt {
  color: rgb(255 255 255 / 0.65);
}

.measure dd {
  margin: var(--s-2) 0 0;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--azul);
}

.on-dark .measure dd {
  color: var(--dorado);
}

/* --------------------------------------------------------------- botones --
   Sin redondeo, con `transition` y elevación de medio píxel al pasar (§7.1). */

.btn {
  --btn-bg: var(--azul);
  --btn-fg: #fff;
  --btn-ring: transparent;
  --btn-shadow: var(--shadow-azul);
  --btn-bg-hover: var(--vino);

  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.625rem 1.25rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 0;
  box-shadow:
    0 0 0 1px var(--btn-ring),
    var(--btn-shadow);
  cursor: pointer;
  transition:
    background var(--speed-fast) var(--ease),
    color var(--speed-fast) var(--ease),
    transform var(--speed-fast) var(--ease),
    box-shadow var(--speed-fast) var(--ease);
}

.btn:hover:not(:disabled) {
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
  transform: translateY(-2px);
}

.btn:active:not(:disabled) {
  transform: none;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Flecha que avanza al pasar el cursor. */
.btn > .arrow {
  transition: transform var(--speed-fast) var(--ease);
}

.btn:hover > .arrow {
  transform: translateX(0.25rem);
}

/* Fantasma sobre claro: sin fondo, filete azul que vira a vino. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-strong);
  --btn-ring: var(--ring-strong);
  --btn-shadow: none;
  --btn-bg-hover: transparent;
}

.btn--ghost:hover:not(:disabled) {
  color: var(--acento-em);
  box-shadow: 0 0 0 1px var(--acento-em);
}

/* Acento: el botón de acción principal del curso. */
.btn--accent {
  --btn-bg: var(--vino);
  --btn-shadow: var(--shadow-vino);
  --btn-bg-hover: var(--azul);
}

.btn--quiet {
  --btn-bg: transparent;
  --btn-fg: var(--ink-muted);
  --btn-ring: transparent;
  --btn-shadow: none;
  --btn-bg-hover: transparent;
  font-weight: 600;
}

.btn--quiet:hover:not(:disabled) {
  color: var(--acento-em);
}

/* Sobre banda oscura el acento es dorado (regla 4 del sistema). */
.on-dark .btn,
.btn--gold {
  --btn-bg: var(--dorado);
  --btn-fg: var(--tinta);
  --btn-shadow: var(--shadow-dorado);
  --btn-bg-hover: #fff;
}

.on-dark .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-ring: rgb(255 255 255 / 0.2);
  --btn-shadow: none;
  --btn-bg-hover: transparent;
}

.on-dark .btn--ghost:hover:not(:disabled) {
  color: var(--dorado);
  box-shadow: 0 0 0 1px rgb(227 164 66 / 0.6);
}

.on-dark .btn--quiet {
  --btn-bg: transparent;
  --btn-fg: rgb(255 255 255 / 0.7);
  --btn-shadow: none;
}

.btn--lg {
  font-size: var(--fs-md);
  padding: 0.9rem 1.75rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

/* -------------------------------------------------------------- superficies */

.card {
  position: relative;
  padding: var(--s-5);
  background: var(--paper-raised);
  box-shadow:
    0 0 0 1px var(--ring),
    var(--shadow-sm);
  transition:
    transform var(--speed-fast) var(--ease),
    background var(--speed-fast) var(--ease),
    border-color var(--speed-fast) var(--ease),
    box-shadow var(--speed-fast) var(--ease);
}

/* Sobre banda oscura la tarjeta es un vidrio blanco: la misma receta de
   `.comp-card` —velo en degradado, desenfoque de fondo, filo de luz y grano—
   pero a media voz, porque estas tarjetas informan y no invitan a pulsarlas. */
.on-dark .card {
  isolation: isolate;
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.11) 0%,
      rgb(255 255 255 / 0.055) 45%,
      rgb(255 255 255 / 0.03) 100%
    );
  backdrop-filter: blur(8px) saturate(1.1);
  border-block-start: 1px solid rgb(255 255 255 / 0.28);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 0 0 1px rgb(255 255 255 / 0.12),
    0 10px 26px rgb(0 12 28 / 0.24);
  color: rgb(255 255 255 / 0.78);
  overflow: hidden;
}

/* El grano de la banda, también dentro del vidrio. */
.on-dark .card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Las que sí son enlace suben el velo y encienden el aro dorado, como la
   tarjeta de competencia pero sin el resplandor. */
.on-dark .card--link:hover {
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.17) 0%,
      rgb(255 255 255 / 0.09) 45%,
      rgb(255 255 255 / 0.05) 100%
    );
  border-block-start-color: var(--dorado);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.2),
    0 0 0 1px rgb(227 164 66 / 0.4),
    0 18px 38px rgb(0 12 28 / 0.34);
}

.on-dark .card h3,
.on-dark .card h4 {
  color: #fff;
}

/* El CTA de una tarjeta se empuja al fondo para que todas las de una fila
   alineen el botón (el `mt-auto` del sistema, §7.7). */
.card.stack {
  display: flex;
  flex-direction: column;
}

.card.stack > div:last-child:has(.btn) {
  margin-block-start: auto;
  padding-block-start: var(--s-2);
}

.card--link:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px var(--ring),
    var(--shadow-lg);
}

.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

/* Bloque marcado: filete de acento a la izquierda, sin redondeo. */
.callout {
  padding: var(--s-4) var(--s-5);
  background: var(--paper-sunk);
  box-shadow: 0 0 0 1px var(--ring);
  border-inline-start: var(--rail) solid var(--azul);
}

.on-dark .callout {
  background: var(--surface-dark);
  box-shadow: 0 0 0 1px var(--ring-dark);
  border-inline-start-color: var(--dorado);
}

.callout--warn {
  background: var(--warn-bg);
  border-inline-start-color: var(--dorado);
  box-shadow: 0 0 0 1px var(--warn-line);
}

.callout--ok {
  background: var(--ok-bg);
  border-inline-start-color: var(--ok);
  box-shadow: 0 0 0 1px var(--ok-line);
}

.callout--bad {
  background: var(--bad-bg);
  border-inline-start-color: var(--bad);
  box-shadow: 0 0 0 1px var(--bad-line);
}

.callout--info {
  background: var(--info-bg);
  border-inline-start-color: var(--azul);
}

/* ------------------------------------------------ taller de transferencia --
   El caso real del nivel: título, situación, la afirmación que se discute y la
   fuente de las cifras. La afirmación va entrecomillada y en vino porque es lo
   que hay que sostener o refutar, no una instrucción más. */

.workshop__title {
  margin-block-end: var(--s-2);
}

.workshop__claim {
  margin-block: var(--s-3);
  padding-inline-start: var(--s-4);
  border-inline-start: var(--rail) solid var(--vino);
  color: var(--vino);
  font-style: italic;
}

.workshop__claim > p {
  margin: 0;
}

.workshop__source {
  color: var(--ink-soft);
}

/* -------------------------------------------------------- competencia tag --
   Etiqueta cuadrada, en mayúsculas y con tracking: el «chip» del sistema. */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.25rem 0.6rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper-sunk);
  color: var(--ink-soft);
  box-shadow: 0 0 0 1px var(--ring);
}

.tag--i { background: var(--comp-i-bg); color: var(--comp-i); box-shadow: 0 0 0 1px rgb(0 53 106 / 0.18); }
.tag--f { background: var(--comp-f-bg); color: var(--comp-f); box-shadow: 0 0 0 1px rgb(196 96 65 / 0.3); }
.tag--a { background: var(--comp-a-bg); color: var(--comp-a); box-shadow: 0 0 0 1px rgb(122 3 44 / 0.22); }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

/* ------------------------------------------------------------ dificultad -- */

.difficulty {
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
}

.difficulty i {
  width: 4px;
  height: 9px;
  border: 1px solid var(--warn-line);
}

.difficulty i.is-on {
  background: var(--dorado);
  border-color: var(--dorado);
}

/* --------------------------------------------------------------- medidor --
   La barra del sistema (§7.13) es plana: pista azul/10 y relleno azul. */

.meter {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr auto;
  gap: var(--s-3);
  align-items: center;
}

.meter__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
}

.meter__track {
  position: relative;
  height: 0.5rem;
  background: var(--ring);
}

.on-dark .meter__track {
  background: rgb(255 255 255 / 0.12);
}

.meter__fill {
  height: 100%;
  background: var(--ink-strong);
  transition: width var(--speed) var(--ease);
}

.on-dark .meter__fill {
  background: var(--dorado);
}

.meter__value {
  min-width: 7ch;
  text-align: end;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.meter__value[data-empty="true"] {
  color: var(--ink-muted);
}

/* ------------------------------------------------------------- acordeones -- */

.panel {
  background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--ring);
}

.panel + .panel {
  margin-block-start: var(--s-3);
}

.panel > summary {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-strong);
  cursor: pointer;
  list-style: none;
  background: var(--paper-sunk);
  transition: background var(--speed-fast) var(--ease);
}

.panel > summary::-webkit-details-marker {
  display: none;
}

.panel > summary::after {
  content: "";
  margin-inline-start: auto;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--acento);
  border-bottom: 2px solid var(--acento);
  transform: rotate(45deg);
  transition: transform var(--speed) var(--ease);
}

.panel[open] > summary::after {
  transform: rotate(-135deg);
}

.panel > summary:hover {
  background: color-mix(in srgb, var(--niebla) 60%, var(--paper));
  color: var(--acento-em);
}

.panel__body {
  padding: var(--s-5);
  border-block-start: 1px solid var(--ring);
}

/* ------------------------------------------------------- panel de nivel --
   Mismo cuerpo que el acordeón de la biblioteca, pero su cabecera no es un
   <summary>: el panel se muestra desde la tarjeta del nivel, no plegándose. */

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--paper-sunk);
}

.panel__head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-strong);
}

.panel__head .btn {
  margin-inline-start: auto;
  flex: none;
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-xs);
}

/* Al revelarlo se le lleva el foco (app.js): sin esto el navegador dibuja el
   anillo alrededor de todo el panel, que es enorme. */
.level-panel:focus {
  outline: none;
}

.level-panel:focus-visible {
  outline: 2px solid var(--acento-em);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ cita --
   Texto que no es nuestro: la definición y el desagregado oficiales del Icfes,
   y sus preguntas de ejemplo. Se marca en tres capas para que no haya duda de
   dónde salió —filete dorado, rótulo de procedencia y fuente al pie— porque
   citar sin distinguir la voz propia de la ajena es justo lo que el módulo de
   argumentación enseña a no hacer.

   El dorado es el acento institucional del sistema (el mismo de `callout--warn`
   y de los kickers sobre oscuro); el terracota queda para la voz del curso. */

.cita {
  position: relative;
  margin: 0;
  padding: var(--s-5);
  background: var(--paper-sunk);
  border-inline-start: var(--rail) solid var(--dorado);
  box-shadow: 0 0 0 1px var(--ring);
}

/* Comilla de adorno, arriba a la derecha para no chocar con el texto. */
.cita::before {
  content: "\201C";
  position: absolute;
  inset-block-start: 0.06em;
  inset-inline-end: var(--s-4);
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--dorado);
  opacity: 0.3;
  pointer-events: none;
}

.cita__label {
  display: block;
  margin-block-end: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cita blockquote {
  margin: 0;
  color: var(--ink-soft);
}

.cita blockquote > * + * {
  margin-block-start: var(--s-3);
}

.cita figcaption {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.cita cite {
  font-style: italic;
}

/* Cita breve de un solo párrafo: lleva las comillas de verdad. En las largas no
   se ponen, que repetir « en cada párrafo estorba la lectura; ahí el filete y el
   rótulo hacen el trabajo. */
.cita--breve blockquote > p::before {
  content: "\AB";
}

.cita--breve blockquote > p::after {
  content: "\BB";
}

/* Donde ya hay comillas reales, la comilla de adorno sobra. */
.cita--breve::before {
  content: none;
}

/* Dentro de un bloque que ya trae su propio marco —la pregunta explicada vive
   en un `.review-item`— la cita se queda sin caja: encajar recuadros dentro de
   recuadros no aclara nada. Sobreviven el rótulo y la fuente al pie, que es lo
   que de verdad señala la procedencia. */
.cita--desnuda {
  padding: 0;
  background: none;
  box-shadow: none;
  border-inline-start: 0;
}

.cita--desnuda::before {
  content: none;
}

/* El desagregado de la hoja de competencia entra entero dentro de la cita, con
   sus propios rótulos. Se le quita el margen que traía como hijo directo de
   `.detail`, pero se le conserva el filete: cae justo bajo el rótulo de
   procedencia y lo separa de los rótulos internos, que si no se leen como dos
   encabezados seguidos. */
.cita__cuerpo > .detail__label:first-child {
  margin-block-start: 0;
}

/* --------------------------------------------------------- tarjeta nivel -- */

.level-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-5);
  background: var(--paper-raised);
  box-shadow:
    0 0 0 1px var(--ring),
    var(--shadow-sm);
  transition:
    transform var(--speed-fast) var(--ease),
    box-shadow var(--speed-fast) var(--ease);
}

.level-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px var(--ring),
    var(--shadow-lg);
}

/* Toda la tarjeta abre el nivel, no solo su título. */
.level-card[data-level-card] {
  cursor: pointer;
}

/* La tarjeta cuyo panel está a la vista, marcada con el filete de acento. */
.level-card.is-open {
  box-shadow:
    0 0 0 2px var(--acento-em),
    var(--shadow-lg);
}

.level-card h3 {
  font-size: var(--fs-lg);
}

.level-card h3 a {
  color: var(--ink-strong);
  text-decoration: none;
}

.level-card:hover h3 a {
  color: var(--acento-em);
}

.level-number {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: #fff;
  background: var(--azul);
}

.panel > summary .level-number {
  width: 2.25rem;
  height: 2.25rem;
  font-size: var(--fs-md);
}

.level-card__meta {
  margin-block-start: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--acento);
}

.level-card__status {
  display: block;
  margin-block-start: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* Nivel aún no abierto: se apaga, pero se sigue leyendo y su enlace sigue
   llevando al panel — el estudiante puede ver de qué trata lo que le espera. */

.level-card--locked {
  background: var(--paper-sunk);
  box-shadow: 0 0 0 1px var(--ring);
}

.level-card--locked,
.level-card[aria-disabled="true"] {
  cursor: default;
}

.level-card--locked:hover {
  transform: none;
  box-shadow: 0 0 0 1px var(--ring);
}

.level-card--locked .level-number,
.level-card--locked h3 a,
.level-card--locked .level-card__meta {
  color: var(--ink-muted);
}

.level-card--locked .level-number {
  background: var(--ink-muted);
  color: var(--paper-raised);
}

.level-card--locked:hover h3 a {
  color: var(--ink-muted);
}


/* --------------------------------------------------------- lanzaderas ----- */

.launch {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--paper-raised);
  box-shadow:
    0 0 0 1px var(--ring),
    var(--shadow-sm);
  border-block-start: var(--rail) solid var(--azul);
  transition:
    transform var(--speed-fast) var(--ease),
    box-shadow var(--speed-fast) var(--ease);
}

.launch:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px var(--ring),
    var(--shadow-lg);
}

.launch--test { border-block-start-color: var(--vino); }
.launch--sim { border-block-start-color: var(--terracota); }
.launch--transfer { border-block-start-color: var(--dorado); }

.launch h4 {
  font-size: var(--fs-lg);
}

.launch p {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  flex: 1;
}

/* --------------------------------------------------------- video del tema --
   Vecino de `.visual` y con su misma receta —papel hundido, aro, sin borde—
   porque cumple el mismo papel: un bloque incrustado dentro de la prosa del
   apartado. Cero redondeos, aquí tampoco.

   El marco existe antes que el reproductor: `app.js` cambia el botón por el
   <iframe> al primer clic, y los dos ocupan exactamente el mismo hueco, así que
   la página no da un salto al reproducir. */

.video {
  margin-block: var(--s-5);
  background: var(--paper-sunk);
  box-shadow: 0 0 0 1px var(--ring);
}

.video__play,
.video > iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.video__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-5);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
  transition: background var(--speed-fast) var(--ease), color var(--speed-fast) var(--ease);
}

.video__play:hover {
  background: var(--paper-raised);
  color: var(--ink-strong);
}

/* Triángulo recortado sobre un cuadrado azul: la regla 1 prohíbe redondear, así
   que el botón de reproducir es un rectángulo, no la píldora de YouTube. */
.video__icon {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--azul);
  clip-path: polygon(30% 20%, 30% 80%, 80% 50%);
  transition: background var(--speed-fast) var(--ease), transform var(--speed) var(--ease);
}

.video__play:hover .video__icon {
  background: var(--vino);
  transform: translateY(-2px);
}

.video__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.video__pie {
  padding: var(--s-3) var(--s-4);
  border-block-start: 1px solid var(--ring);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
}

@media (prefers-reduced-motion: reduce) {
  .video__play:hover .video__icon {
    transform: none;
  }
}

/* ------------------------------------------------------------- visuales --- */

.visual {
  margin-block: var(--s-4);
  padding: var(--s-4);
  background: var(--paper-sunk);
  box-shadow: 0 0 0 1px var(--ring);
  overflow-x: auto;
}

.visual table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-sm);
}

.visual th,
.visual td {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ring);
  text-align: center;
}

.visual th {
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-color: rgb(255 255 255 / 0.15);
}

.visual td {
  font-variant-numeric: tabular-nums;
}

.visual small {
  display: block;
  margin-block-start: var(--s-2);
  color: var(--ink-muted);
  font-size: var(--fs-xs);
}

.visual .chart-svg {
  width: 100%;
  min-width: 26rem;
  height: auto;
}

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-block-start: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.legend-row span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.legend-row i {
  width: 12px;
  height: 12px;
}

/* --------------------------------------------------------------- fórmula -- */

.formula {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: #fff;
  background: var(--azul);
  overflow-x: auto;
}

.formula + .formula {
  margin-block-start: var(--s-2);
}

/* --------------------------------------------------------------- diálogo -- */

dialog.work {
  width: min(60rem, calc(100% - 2rem));
  max-height: 92vh;
  padding: 0;
  border: none;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

dialog.work::backdrop {
  background: rgb(0 36 63 / 0.75);
  backdrop-filter: blur(3px);
}

.work__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  color: #fff;
}

.work__head h2 {
  font-size: var(--fs-lg);
  color: #fff;
  flex: 1;
}

.work__body {
  padding: var(--s-6) var(--s-5);
  max-height: calc(92vh - 4.5rem);
  overflow-y: auto;
}

.timer {
  padding: 0.25rem 0.7rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--dorado);
  background: rgb(255 255 255 / 0.1);
  box-shadow: 0 0 0 1px rgb(227 164 66 / 0.4);
}

.timer[data-low="true"] {
  background: var(--vino);
  color: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.3);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2);
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
  transition:
    background var(--speed-fast) var(--ease),
    color var(--speed-fast) var(--ease);
}

.icon-btn:hover {
  background: var(--dorado);
  color: var(--tinta);
  box-shadow: 0 0 0 1px var(--dorado);
}

/* ---------------------------------------------------------------- quiz ---- */

.progress-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-block-end: var(--s-5);
  padding: 0;
  list-style: none;
}

.progress-dots li {
  width: 1.75rem;
  height: 4px;
  background: var(--ring);
}

.progress-dots li[data-state="answered"] { background: var(--acento); }
.progress-dots li[data-state="current"] { background: var(--ink-strong); }

.problem__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-block-end: var(--s-4);
}

.problem__stem {
  font-size: var(--fs-md);
  color: var(--ink-soft);
}

.options {
  display: grid;
  gap: var(--s-2);
  margin-block: var(--s-5);
  padding: 0;
  border: none;
}

.option {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--ring);
  cursor: pointer;
  transition:
    box-shadow var(--speed-fast) var(--ease),
    background var(--speed-fast) var(--ease);
}

.option:hover {
  box-shadow: 0 0 0 1px rgb(196 96 65 / 0.5);
}

.option:has(input:checked) {
  background: var(--paper-sunk);
  box-shadow: 0 0 0 2px var(--azul);
}

.option:has(input:disabled) {
  cursor: default;
}

.option__letter {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--acento);
}

/* El resultado nunca se comunica solo por color: hay marca y etiqueta. */
.option__mark {
  font-weight: 700;
  visibility: hidden;
}

.option[data-result="correct"] {
  background: var(--ok-bg);
  box-shadow: 0 0 0 2px var(--ok);
}

.option[data-result="correct"] .option__mark {
  visibility: visible;
  color: var(--ok);
}

.option[data-result="correct"] .option__mark::before {
  content: "✓ Correcta";
}

.option[data-result="wrong"] {
  background: var(--bad-bg);
  box-shadow: 0 0 0 2px var(--bad);
}

.option[data-result="wrong"] .option__mark {
  visibility: visible;
  color: var(--bad);
}

.option[data-result="wrong"] .option__mark::before {
  content: "✕ Tu respuesta";
}

.option__mark::before {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.problem__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--ring);
}

/* ----------------------------------------------------------- feedback ----- */

.feedback {
  margin-block-start: var(--s-5);
  padding: var(--s-5);
  background: var(--paper-sunk);
  box-shadow: 0 0 0 1px var(--ring);
  border-inline-start: var(--rail) solid var(--ink-muted);
}

.feedback[data-result="correct"] {
  background: var(--ok-bg);
  box-shadow: 0 0 0 1px var(--ok-line);
  border-inline-start-color: var(--ok);
}

.feedback[data-result="wrong"] {
  background: var(--bad-bg);
  box-shadow: 0 0 0 1px var(--bad-line);
  border-inline-start-color: var(--bad);
}

.feedback__verdict {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
}

.feedback h4 {
  margin-block-start: var(--s-5);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--acento);
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin-block-start: var(--s-3);
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: var(--s-6);
  margin-block-start: var(--s-2);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0.15em;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #fff;
  background: var(--azul);
}

/* Paso del método con su aplicación al problema tipo debajo. El reset deja los
   <p> sin margen, y sin estas dos reglas el imperativo y su explicación se leen
   como un solo párrafo. */
.steps--worked li + li {
  margin-block-start: var(--s-4);
}

.steps--worked li > p + p {
  margin-block-start: var(--s-2);
}

.audit {
  list-style: none;
  padding: 0;
  margin-block-start: var(--s-3);
  display: grid;
  gap: var(--s-2);
}

.audit li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--ring);
}

.audit li[data-correct="true"] {
  box-shadow: 0 0 0 1px var(--ok-line);
}

.audit__letter {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--acento);
}

/* ---------------------------------------------------------- resultados ----
   La cifra grande es el patrón «estadística» del sistema: display, semibold. */

.score {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.score__dial {
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  background: var(--azul);
  color: #fff;
}

.score-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  color: #fff;
}

.score__pct {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--dorado);
}

.review-item {
  box-shadow: 0 0 0 1px var(--ring);
  border-inline-start: var(--rail) solid var(--ink-muted);
}

.review-item + .review-item {
  margin-block-start: var(--s-2);
}

.review-item[data-result="correct"] { border-inline-start-color: var(--ok); }
.review-item[data-result="wrong"] { border-inline-start-color: var(--bad); }

.review-item > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  list-style: none;
  background: var(--paper-sunk);
}

.review-item > summary::-webkit-details-marker {
  display: none;
}

.review-item > summary::after {
  content: "Ver detalle →";
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--acento-em);
}

.review-item[open] > summary::after {
  content: "Ocultar";
}

.review-item__body {
  padding: var(--s-5);
  background: var(--paper);
}

.verdict-chip {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
}

.verdict-chip[data-result="correct"] { background: var(--ok-bg); color: var(--ok); box-shadow: 0 0 0 1px var(--ok-line); }
.verdict-chip[data-result="wrong"] { background: var(--bad-bg); color: var(--bad); box-shadow: 0 0 0 1px var(--bad-line); }

.recommendation {
  padding: var(--s-5);
  background: var(--paper-sunk);
  box-shadow: 0 0 0 1px var(--ring);
  border-block-start: var(--rail) solid var(--ink-muted);
}

.recommendation[data-kind="recover"] { border-block-start-color: var(--vino); }
.recommendation[data-kind="consolidate"] { border-block-start-color: var(--dorado); }
.recommendation[data-kind="deepen"] { border-block-start-color: var(--ok); }

/* ------------------------------------------------------------- bandas -----
   Regla 2: la página avanza alternando claro y oscuro. */

.band--dark {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-9);
}

.band--paper {
  background: var(--paper);
}

.simulation-zone {
  position: relative;
}

/* ------------------------------------------------------------ formularios --
   Estilo A del sistema: fondo niebla, filete azul/10, foco dorado (§7.11). */

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

.field label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--ink-strong);
}

.field label strong {
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  background: var(--paper-sunk);
  color: var(--ink);
  border: 0;
  box-shadow: 0 0 0 1px var(--ring);
  outline: none;
  transition: box-shadow var(--speed-fast) var(--ease);
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: var(--lh-normal);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--paper);
  box-shadow: 0 0 0 2px rgb(227 164 66 / 0.6);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
}

.save-state {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  min-height: 1.2em;
}

/* ------------------------------------------------- editor de ecuaciones ----
   MathLive trae su propia piel; aquí se le pone la del sistema (fondo niebla,
   filete azul/10, foco dorado) para que no cante como widget de otra librería. */

.mathpad {
  box-shadow: 0 0 0 1px var(--ring);
  background: var(--paper);
}

.mathpad > summary {
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--acento-em);
  list-style: none;
}

.mathpad > summary::-webkit-details-marker {
  display: none;
}

.mathpad > summary::after {
  content: " +";
}

.mathpad[open] > summary::after {
  content: " −";
}

.mathpad__body {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border-block-start: 1px solid var(--hairline);
}

.mathpad math-field {
  --caret-color: var(--acento);
  --selection-background-color: rgb(227 164 66 / 0.35);
  --smart-fence-color: var(--acento-em);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-md);
  background: var(--paper-sunk);
  box-shadow: 0 0 0 1px var(--ring);
}

.mathpad math-field:focus-within {
  background: var(--paper);
  box-shadow: 0 0 0 2px rgb(227 164 66 / 0.6);
  outline: none;
}

/* Vista previa de lo escrito: la prosa tal cual y compuesto solo lo que va
   entre $…$, para que se lea la fórmula y no el LaTeX. */
.math-preview {
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  background: var(--paper-sunk);
  box-shadow: 0 0 0 1px var(--ring);
  white-space: pre-wrap;
}

/* El componente trae su propia caja; en la previa estorba: aquí la fórmula va
   dentro de la frase, no en un recuadro. */
.math-preview math-field {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
}

/* Contenedor de formulario del sistema: blanco, p-8, ring azul/10. */
.auth {
  max-width: 28rem;
  margin-inline: auto;
  padding: var(--s-6);
  background: var(--paper);
  box-shadow:
    0 0 0 1px var(--ring),
    var(--shadow-md);
}

.error-list {
  margin: 0;
  padding: var(--s-3) var(--s-5);
  list-style-position: inside;
  background: var(--bad-bg);
  box-shadow: 0 0 0 1px var(--bad-line);
  color: var(--bad);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------------------------------------------------------------- footer --
   Estructura de FOOTER_DISENO.md §5: gradiente oscuro + grano, marca de agua,
   tres columnas 1.4fr 1fr 1fr y barra inferior con remate en cursiva. */

.footer {
  position: relative;
  overflow: hidden;
  color: rgb(255 255 255 / 0.7);
}

.footer__grid {
  display: grid;
  gap: var(--s-7);
  padding-block: var(--s-8);
}

@media (min-width: 48rem) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: #fff;
}

.footer__sub {
  margin-block-start: var(--s-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dorado);
}

.footer__blurb {
  margin-block-start: var(--s-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.footer h3 {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dorado);
}

.footer ul {
  margin-block-start: var(--s-4);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.footer li + li {
  margin-block-start: 0.625rem;
}

.footer a {
  color: inherit;
  text-decoration: none;
}

.footer a:hover {
  color: var(--dorado);
}

.footer__legal {
  border-block-start: 1px solid rgb(255 255 255 / 0.1);
}

.footer__legal p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-4);
  font-size: var(--fs-xs);
}

.footer__sign {
  font-family: var(--font-display);
  font-style: italic;
}

/* ---------------------------------------------------- gestión de cuentas -- */

.section-head--compact > * + * {
  margin-block-start: var(--s-1);
}

.account-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: start;
}

.account-tools .panel + .panel {
  margin-block-start: 0;
}

.accounts-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-end: var(--s-3);
  border-block-end: 1px solid var(--hairline);
}

.account-list {
  display: grid;
  gap: var(--s-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.account-card {
  background: var(--paper-raised);
  box-shadow:
    0 0 0 1px var(--ring),
    var(--shadow-sm);
}

.account-card--off {
  background: var(--paper-sunk);
}

.account-card__overview {
  display: grid;
  grid-template-columns: minmax(13rem, 1.25fr) minmax(12rem, 1fr) minmax(8rem, auto) auto auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
}

.account-card__identity,
.account-card__academic {
  display: grid;
  min-width: 0;
}

.account-card__name {
  overflow: hidden;
  font-weight: 700;
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-card__academic {
  line-height: 1.45;
}

.account-status,
.account-card__self {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  width: max-content;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.account-status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--ok);
}

.account-status[data-active="false"] {
  color: var(--ink-muted);
}

.account-status[data-active="false"]::before {
  background: var(--bad);
}

.account-card__self {
  padding: var(--s-1) var(--s-2);
  color: var(--info);
  background: var(--info-bg);
  box-shadow: 0 0 0 1px var(--ring);
}

.account-card__manage {
  border-block-start: 1px solid var(--ring);
}

.account-card__manage > summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: max-content;
  margin-inline-start: auto;
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-strong);
  cursor: pointer;
  list-style: none;
}

.account-card__manage > summary::-webkit-details-marker {
  display: none;
}

.account-card__manage > summary::after {
  content: "+";
  color: var(--acento-em);
  font-size: var(--fs-md);
}

.account-card__manage[open] > summary::after {
  content: "−";
}

.account-card__manage > summary:hover {
  color: var(--acento-em);
}

.account-card__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  padding: 0 var(--s-5) var(--s-5);
}

.account-action {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--paper-sunk);
  box-shadow: 0 0 0 1px var(--ring);
}

.account-action h3 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
}

.account-action form:not(.account-delete-form) {
  margin-block-start: auto;
}

.account-role-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.account-role-form select {
  min-height: 2.75rem;
}

.account-action--danger {
  color: var(--bad);
  background: var(--bad-bg);
  box-shadow: inset var(--rail) 0 0 var(--bad-line), 0 0 0 1px var(--bad-line);
}

.account-action--danger h3 {
  color: var(--bad);
}

.account-delete-form {
  width: 100%;
}

.btn--danger {
  --btn-bg: var(--bad);
  --btn-shadow: var(--shadow-vino);
  --btn-bg-hover: var(--azul);
}

.account-action__notice {
  grid-column: 1 / -1;
  width: 100%;
}

@media (max-width: 64rem) {
  .account-card__overview {
    grid-template-columns: minmax(12rem, 1.2fr) minmax(12rem, 1fr) auto;
  }

  .account-card__actions {
    grid-template-columns: 1fr 1fr;
  }

  .account-action--danger {
    grid-column: 1 / -1;
  }
}

@media (max-width: 46rem) {
  .account-tools,
  .account-card__actions {
    grid-template-columns: 1fr;
  }

  .account-card__overview {
    grid-template-columns: 1fr auto;
  }

  .account-card__identity,
  .account-card__academic {
    grid-column: 1 / -1;
  }

  .account-action--danger {
    grid-column: auto;
  }
}

/* ------------------------------------------------------- tabla de informe */

/* Tabla ancha de solo lectura: se desplaza dentro de su caja en vez de
   ensanchar la página, que es lo que rompe la lectura en portátil. */
.tabla-scroll {
  overflow-x: auto;
  background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--ring);
}

.tabla-informe {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.tabla-informe th,
.tabla-informe td {
  padding: var(--s-3) var(--s-4);
  text-align: end;
  white-space: nowrap;
  border-block-end: 1px solid var(--ring);
}

.tabla-informe th:first-child,
.tabla-informe td:first-child,
.tabla-informe th:nth-child(2),
.tabla-informe td:nth-child(2),
.tabla-informe th:nth-child(3),
.tabla-informe td:nth-child(3) {
  text-align: start;
  white-space: normal;
}

.tabla-informe thead th {
  position: sticky;
  inset-block-start: 0;
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tabla-informe tbody tr:hover {
  background: var(--paper-sunk);
}

.tabla-informe .fila-total {
  font-weight: 700;
  background: var(--paper-sunk);
  border-block-start: 2px solid var(--ring);
}

.tabla-informe .reservado {
  color: var(--ink-muted);
  font-style: italic;
}

/* --------------------------------------------------------------- utilidades */

.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0;
  list-style: none;
}

.chip-list li {
  padding: 0.35rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--paper-sunk);
  box-shadow: 0 0 0 1px var(--ring-strong);
  color: var(--ink-strong);
}

@media (max-width: 46rem) {
  .meter {
    grid-template-columns: 1fr auto;
  }

  .meter__track {
    grid-column: 1 / -1;
    order: 3;
  }

  .level-card {
    grid-template-columns: 1fr;
  }

  .navbar__inner {
    gap: var(--s-2);
  }
}

/* ------------------------------------------------------- login partido ----
   §7.16: panel oscuro con glifos matemáticos a la izquierda (oculto en móvil)
   y formulario a la derecha sobre blanco. */

main > .login-split {
  display: grid;
  padding-block: 0;
  /* La pantalla no lleva footer: el split se come el alto completo del
     viewport para que no quede niebla suelta debajo. */
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 64rem) {
  .login-split {
    grid-template-columns: 1fr 1fr;
  }
}

.login-split__aside {
  display: none;
  position: relative;
  overflow: hidden;
}

@media (min-width: 64rem) {
  .login-split__aside {
    display: block;
  }
}

.login-split__glyphs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-split__glyphs span {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  color: rgb(255 255 255 / 0.05);
  user-select: none;
}

.login-split__aside-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-7);
  height: 100%;
  padding: var(--s-8) clamp(2rem, 4vw, 4rem);
}

.login-split__form {
  display: grid;
  place-items: center;
  padding: var(--s-8) var(--gutter);
  background: var(--paper);
}

.login-split__form-inner {
  width: min(28rem, 100%);
}

/* Lista de ventajas con check dorado (§7.16). */
.checklist {
  list-style: none;
  padding: 0;
  margin-block-start: var(--s-5);
  display: grid;
  gap: var(--s-3);
  font-size: var(--fs-sm);
}

.checklist li {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.checklist li::before {
  content: "✓";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dorado);
  background: rgb(227 164 66 / 0.2);
}

/* ---------------------------------------------------- tarjeta competencia --
   Las tres tarjetas de «Cómo funciona» son ahora botones que abren la hoja de
   detalle. Sobre la banda oscura rige la regla 4: el acento es dorado, así que
   la competencia se distingue por la etiqueta, el ordinal y el glifo de fondo,
   no por vino ni terracota. */

.comp-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-5);
  font: inherit;
  color: inherit;
  text-align: start;
  /* Velo blanco en degradado: la tarjeta se lee como un papel translúcido
     iluminado desde arriba, no como un rectángulo plano un punto más claro
     que el fondo. */
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.17) 0%,
      rgb(255 255 255 / 0.08) 42%,
      rgb(255 255 255 / 0.04) 100%
    );
  backdrop-filter: blur(10px) saturate(1.15);
  border: 0;
  border-block-start: var(--rail) solid rgb(255 255 255 / 0.5);
  /* Filo interior claro + aro exterior: dos líneas de blanco que despegan la
     tarjeta de la banda. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    0 0 0 1px rgb(255 255 255 / 0.14),
    0 14px 34px rgb(0 12 28 / 0.32);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--speed-fast) var(--ease),
    background var(--speed-fast) var(--ease),
    border-color var(--speed-fast) var(--ease),
    box-shadow var(--speed-fast) var(--ease);
}

/* El grano de la página, dentro de la tarjeta: la superficie de vidrio queda
   con la misma textura que la banda que la sostiene. */
.comp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Resplandor dorado —el mismo recurso de los blobs del hero— apagado en
   reposo y encendido al pasar por encima. */
.comp-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: 50%;
  inset-block-end: -8rem;
  width: 20rem;
  height: 16rem;
  translate: -50% 0;
  border-radius: var(--r-full);
  background: rgb(227 164 66 / 0.55);
  filter: blur(64px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--speed) var(--ease);
}

.comp-card:hover,
.comp-card:focus-visible {
  transform: translateY(-4px);
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.24) 0%,
      rgb(255 255 255 / 0.12) 42%,
      rgb(255 255 255 / 0.06) 100%
    );
  border-block-start-color: var(--dorado);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 0 0 1px rgb(227 164 66 / 0.45),
    0 22px 46px rgb(0 12 28 / 0.42);
}

.comp-card:hover::after,
.comp-card:focus-visible::after {
  opacity: 1;
}

/* Fila superior: etiqueta de competencia y ordinal alineado a la derecha. */
.comp-card__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.comp-card__index {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1;
  color: rgb(255 255 255 / 0.4);
  transition: color var(--speed-fast) var(--ease);
}

.comp-card:hover .comp-card__index {
  color: rgb(227 164 66 / 0.85);
}

.comp-card h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: #fff;
  text-wrap: balance;
}

.comp-card p {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--on-dark);
  flex: 1;
}

/* Afordancia: el pie dorado indica que la tarjeta se puede abrir. */
.comp-card__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid rgb(255 255 255 / 0.2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase;
  color: var(--dorado);
}

.comp-card__cue .arrow {
  transition: transform var(--speed-fast) var(--ease);
}

.comp-card:hover .comp-card__cue .arrow {
  transform: translateX(4px);
}

/* Etiqueta de competencia sobre oscuro: los fondos claros de `.tag--*` se
   pierden contra la banda, así que aquí se invierten a velo blanco + dorado. */
.on-dark .tag--i,
.on-dark .tag--f,
.on-dark .tag--a {
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.22);
}

.comp-card:hover .tag {
  background: rgb(227 164 66 / 0.18);
  color: var(--dorado);
  box-shadow: 0 0 0 1px rgb(227 164 66 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .comp-card,
  .comp-card:hover,
  .comp-card:focus-visible {
    transform: none;
  }

  .comp-card::after {
    transition: none;
  }
}

/* ------------------------------------------------------ hoja de detalle ---
   Diálogo de lectura, hermano del de actividad (`dialog.work`): mismas
   proporciones y misma cabecera oscura, cuerpo claro. */

dialog.sheet {
  width: min(44rem, calc(100% - 2rem));
  max-height: 90vh;
  padding: 0;
  border: none;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

dialog.sheet::backdrop {
  background: rgb(0 36 63 / 0.75);
  backdrop-filter: blur(3px);
}

.sheet__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-6) var(--s-5);
  color: #fff;
}

.sheet__head .icon-btn {
  flex: none;
}

.sheet__kicker {
  display: block;
  margin-block-end: var(--s-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dorado);
}

.sheet__head h2 {
  flex: 1;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: #fff;
}

.sheet__body {
  padding: var(--s-6);
  max-height: calc(90vh - 9rem);
  overflow-y: auto;
}

.sheet__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}

/* Zona reservada para el contenido que se añadirá más adelante. */
.sheet__slot {
  margin-block-start: var(--s-5);
}

.sheet__slot:empty {
  display: none;
}

/* Desagregado de la competencia dentro de la hoja. El número de la afirmación
   y los de las evidencias toman el color de la competencia abierta. */
.detail--i { --detail-accent: var(--comp-i); --detail-accent-bg: var(--comp-i-bg); }
.detail--f { --detail-accent: var(--comp-f); --detail-accent-bg: var(--comp-f-bg); }
.detail--a { --detail-accent: var(--comp-a); --detail-accent-bg: var(--comp-a-bg); }

.detail {
  color: var(--ink-soft);
}

.detail__label {
  margin-block: var(--s-5) var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--hairline);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.detail > .detail__label:first-child {
  margin-block-start: 0;
}

.detail__claim {
  border-inline-start: var(--rail) solid var(--detail-accent);
  padding: var(--s-3) var(--s-4);
  background: var(--detail-accent-bg);
  color: var(--ink);
}

.detail__evidence {
  list-style: none;
  padding: 0;
}

.detail__evidence li + li {
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--hairline-soft);
}

/* El número va en versalita monoespaciada para que no se confunda con el texto. */
.detail__num {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--detail-accent);
}

.detail__source {
  margin-block-start: var(--s-5);
  color: var(--ink-muted);
}

/* Pregunta explicada al pie de la hoja. Reaprovecha `.review-item`, que nació
   en la pantalla de resultados; aquí solo cambia el filete, que toma el color
   de la competencia abierta, y el rótulo del plegable. */
.comp-example {
  margin-block-start: var(--s-6);
  border-inline-start-color: var(--detail-accent);
}

.comp-example > summary::after {
  content: "Ver pregunta →";
}

.comp-example[open] > summary::after {
  content: "Ocultar";
}

/* La etiqueta de dificultad no debe empujar el «Ver pregunta →» del ::after. */
.comp-example > summary .tag {
  margin-inline-start: var(--s-2);
}

/* Dentro de la hoja el cuerpo ya va sobre papel: sin el segundo relleno el
   contenido queda alineado con el resto del detalle. */
.comp-example .review-item__body {
  padding: var(--s-4) var(--s-4) var(--s-5);
}

.comp-example .visual img {
  display: block;
  width: 100%;
  height: auto;
}

.comp-example .callout {
  margin-block-start: var(--s-4);
}

.comp-example .audit {
  margin-block-start: var(--s-4);
}