/* ==========================================================================
   QWorkLab · autoevaluacion.css
   Las tres fases de la autoevaluación. Depende de base.css.
   ========================================================================== */

.auto-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Barra de avance global ---------------------------------------------- */

.avance {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 3px;
  background: var(--papel-rayado);
}

.avance__relleno {
  height: 3px;
  background: var(--verde-senal);
  transition: width 0.3s ease;
}

/* --- Contenedor de fases -------------------------------------------------- */

.auto {
  flex: 1;
  padding-block: clamp(32px, 5vw, 56px) clamp(60px, 7vw, 90px);
}

.fase {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.4vw, 36px);
}

.fase[hidden] { display: none; }

.auto__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--papel-borde);
}

.rotulo-min--verde {
  letter-spacing: 0.18em;
  color: var(--verde-profundo);
}

/* --- Fase intro ----------------------------------------------------------- */

.auto__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(34px, 5.4vw, 54px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--tinta);
  text-wrap: balance;
}

.auto__descripcion {
  max-width: 620px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--tinta-cuerpo);
  text-wrap: pretty;
}

.auto__advertencias {
  padding-block: 22px;
  border-block: 1px solid var(--papel-borde);
  gap: 12px;
}

.auto__advertencias > li {
  font-size: 16px;
  color: var(--tinta-suave);
  gap: 12px;
}

.auto__noscript {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-verdoso);
}

/* --- Fase preguntas ------------------------------------------------------- */

.auto__pregunta {
  max-width: 760px;
  font-family: var(--fuente-titulo);
  font-size: clamp(26px, 3.8vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--tinta);
  text-wrap: pretty;
}

.opciones-auto {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* El área táctil supera los 44px con holgura. */
.opcion-auto {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(16px, 2vw, 20px);
  text-align: left;
  background: var(--papel-input);
  border: 1px solid var(--papel-borde);
  color: var(--tinta-cuerpo2);
}

.opcion-auto:hover { border-color: var(--gris-verdoso); }

.opcion-auto__letra {
  flex: 0 0 auto;
  font-family: var(--fuente-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.7;
  padding-top: 2px;
}

.opcion-auto__texto {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.5;
}

.opcion-auto[aria-pressed="true"] {
  background: var(--grafito);
  border-color: var(--grafito);
  color: var(--claro);
}

.auto__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 8px;
}

.auto__atras,
.auto__reiniciar {
  font-family: var(--fuente-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-verdoso);
  padding-block: 12px;
}

.auto__atras:hover,
.auto__reiniciar:hover { color: var(--tinta); }

/* --- Fase resultado ------------------------------------------------------- */

.resultado__lectura {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.resultado__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: var(--tinta);
  text-wrap: balance;
}

.resultado__textos {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
}

.resultado__textos p {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.65;
  color: var(--tinta-cuerpo);
  text-wrap: pretty;
}

.resultado__revisar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.8vw, 30px);
  background: var(--papel-alt);
}

.resultado__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.resultado__lista > li {
  display: flex;
  gap: 12px;
  padding-block: 12px;
  border-top: 1px solid var(--papel-borde);
  font-size: clamp(16px, 1.8vw, 17px);
  line-height: 1.55;
  color: var(--tinta-cuerpo2);
}

.resultado__lista > li::before {
  content: "—";
  flex: 0 0 auto;
  color: var(--verde-profundo);
}

.resultado__programa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-block: 20px;
  border-block: 1px solid var(--papel-borde);
}

.resultado__programa .rotulo-min { letter-spacing: 0.16em; }

.resultado__programa-nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.resultado__descargo {
  max-width: 620px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-verdoso);
}

/* --- Captura de correo ---------------------------------------------------- */

.captura {
  background: var(--grafito);
  padding: clamp(26px, 3.4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.captura__titular {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.captura__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--claro);
}

.captura__bajada {
  max-width: 520px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--claro-cuerpo);
}

.captura__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 14px;
}

.captura__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.resultado__cierre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

/* --- Footer simple -------------------------------------------------------- */

.footer__interior--simple {
  align-items: center;
  padding-block: 28px 34px;
}