/* ════════════════════════════════════════════════════════════════════════════
   La prueba de cámara · el cuestionario público y su resultado

   Vive dentro de una página de Divi, así que aquí NO hay reinicios ni reglas
   de elemento: todo cuelga de `.sc-prueba` y de `.sc-prueba-resultado`. Una
   regla suelta de `label` o de `fieldset` se le metería por debajo a Divi en el
   resto de la página, que es exactamente el fallo que costó acotar `base.css`
   el 2026-08-25.

   Cero valores de marca a mano: todo sale de tokens.css.
   ════════════════════════════════════════════════════════════════════════════ */

.sc-prueba {
  --sc-prueba-ancho: 46rem;

  max-width: var(--sc-prueba-ancho);
  margin-inline: auto;
  font-family: var(--sc-fuente-lectura);
  color: var(--sc-texto-primario);
}

/* El atributo `hidden` vale `display: none` en la hoja del navegador, y ahí lo
   pisa cualquier `display` de autor: los botones llevan `inline-flex`, así que
   «Ver mi perfil» salía junto a «Siguiente» desde la primera pregunta. Medido a
   390 px el 2026-08-27. Va acotado a `.sc-prueba` para no tocar nada de Divi. */
.sc-prueba [hidden] { display: none; }

/* La trampa de miel. Fuera de la pantalla y no con `display: none`: hay robots
   que saltan lo que está en display none, y este campo tiene que parecerles un
   campo de verdad. Al no ser `hidden`, se saca del tabulador con `tabindex` y
   de los lectores con `aria-hidden` en el marcado, no desde aquí. */
.sc-prueba__miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sc-prueba__forma {
  display: flex;
  flex-direction: column;
  gap: var(--sc-espacio-6);
}


/* ── El progreso ─────────────────────────────────────────────────────────── */

.sc-prueba__paso {
  margin: 0;
  font-size: var(--sc-tipo-etiqueta);
  font-weight: var(--sc-peso-fuerte);
  letter-spacing: var(--sc-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--sc-texto-terciario);
}

.sc-prueba__barra {
  height: var(--sc-espacio-1);
  border-radius: var(--sc-radio-pildora);
  background: var(--sc-color-superficie-hundida);
  overflow: hidden;
}

.sc-prueba__barra-valor {
  display: block;
  width: 10%;
  height: 100%;
  border-radius: inherit;
  background: var(--sc-color-accion);
  transition: width var(--sc-dur-normal) var(--sc-ease-suave);
}


/* ── Una pregunta ────────────────────────────────────────────────────────── */

/* Sin JavaScript se ven las once seguidas, y entonces cada una necesita su
   separación. Con JavaScript solo hay una en pantalla y el margen sobra. */
.sc-prueba__pantalla {
  margin: 0;
  padding: 0;
  border: 0;
}

.sc-prueba:not(.sc-prueba--paso-a-paso) .sc-prueba__pantalla + .sc-prueba__pantalla {
  margin-top: var(--sc-espacio-10);
  padding-top: var(--sc-espacio-8);
  border-top: var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
}

.sc-prueba__enunciado {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: var(--sc-espacio-5);
  font-family: var(--sc-fuente-titulo);
  font-size: var(--sc-tipo-titulo-2);
  line-height: var(--sc-linea-titulo);
  color: var(--sc-texto-primario);
}

/* El foco se le pone por JavaScript al cambiar de pregunta; sin anillo, porque
   no es un control: es el punto donde empieza a leer un lector de pantalla. */
.sc-prueba__enunciado:focus { outline: none; }

.sc-prueba__pista {
  margin: calc(var(--sc-espacio-4) * -1) 0 var(--sc-espacio-5);
  font-size: var(--sc-tipo-cuerpo-s);
  color: var(--sc-texto-secundario);
}

.sc-prueba__opciones {
  display: flex;
  flex-direction: column;
  gap: var(--sc-espacio-3);
}


/* ── Una opción ──────────────────────────────────────────────────────────── */

.sc-prueba__opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--sc-espacio-3);
  min-height: var(--sc-toque-minimo);
  padding: var(--sc-espacio-4) var(--sc-espacio-5);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde-sutil);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-superficie-elevada);
  font-size: var(--sc-tipo-cuerpo);
  line-height: var(--sc-linea-cuerpo);
  cursor: pointer;
  transition: border-color var(--sc-dur-rapida) var(--sc-ease-entrada),
              background-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

.sc-prueba__opcion:hover {
  border-color: var(--sc-color-borde-fuerte);
  background: var(--sc-capa-hover);
}

/* La opción entera se tiñe al marcarla, no solo el círculo: en el móvil el
   control mide 20 px y el dedo lo tapa justo cuando hay que confirmar. */
.sc-prueba__opcion:has(input:checked) {
  border-color: var(--sc-color-borde-acento);
  background: var(--sc-color-acento-superficie);
}

.sc-prueba__opcion input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--sc-color-accion);
}

.sc-prueba__opcion:focus-within {
  outline: var(--sc-trazo-foco) solid var(--sc-color-foco);
  outline-offset: 2px;
}

.sc-prueba__opcion--casilla {
  margin-top: var(--sc-espacio-5);
  align-items: flex-start;
}


/* ── La pantalla del correo ──────────────────────────────────────────────── */

.sc-prueba__etiqueta {
  display: block;
  margin-bottom: var(--sc-espacio-2);
  font-size: var(--sc-tipo-cuerpo-s);
  font-weight: var(--sc-peso-semi);
  color: var(--sc-texto-primario);
}

.sc-prueba__campo {
  width: 100%;
  min-height: var(--sc-toque-minimo);
  padding: var(--sc-espacio-3) var(--sc-espacio-4);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde-campo);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-superficie-elevada);
  font-family: inherit;
  font-size: var(--sc-tipo-cuerpo);
  color: var(--sc-texto-primario);
}

.sc-prueba__campo:focus-visible {
  outline: var(--sc-trazo-foco) solid var(--sc-color-foco);
  outline-offset: 1px;
}

.sc-prueba__legal {
  margin: var(--sc-espacio-4) 0 0;
  font-size: var(--sc-tipo-nota);
  line-height: var(--sc-linea-compacta);
  color: var(--sc-texto-terciario);
}


/* ── El pie ──────────────────────────────────────────────────────────────── */

.sc-prueba__pie {
  display: flex;
  align-items: center;
  gap: var(--sc-espacio-4);
}

.sc-prueba__siguiente,
.sc-prueba__enviar,
.sc-prueba-oferta__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sc-toque-minimo);
  padding: var(--sc-espacio-3) var(--sc-espacio-6);
  border: var(--sc-trazo-normal) solid transparent;
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-accion);
  color: var(--sc-color-tinta-sobre-acento);
  font-family: inherit;
  font-size: var(--sc-tipo-cuerpo);
  font-weight: var(--sc-peso-semi);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sc-dur-rapida) var(--sc-ease-entrada);
}

/* base.css colorea todo <a>, y `a:visited` (0,1,1) le gana a una clase sola:
   sin esto el botón de la oferta sale marrón una vez visitado. Es el mismo
   fallo que se corrigió en el panel el 2026-08-27. */
.sc-prueba-oferta__boton:is(:link, :visited) { color: var(--sc-color-tinta-sobre-acento); }

.sc-prueba__siguiente:hover,
.sc-prueba__enviar:hover,
.sc-prueba-oferta__boton:hover { background: var(--sc-color-accion-hover); }

.sc-prueba__atras {
  min-height: var(--sc-toque-minimo);
  padding: var(--sc-espacio-3) var(--sc-espacio-4);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde);
  border-radius: var(--sc-radio-m);
  background: transparent;
  font-family: inherit;
  font-size: var(--sc-tipo-cuerpo);
  color: var(--sc-texto-secundario);
  cursor: pointer;
}

/* Sin JavaScript no hay pasos: se responde todo y se envía una vez. */
.sc-prueba:not(.sc-prueba--paso-a-paso) .sc-prueba__siguiente,
.sc-prueba:not(.sc-prueba--paso-a-paso) .sc-prueba__atras,
.sc-prueba:not(.sc-prueba--paso-a-paso) .sc-prueba__paso,
.sc-prueba:not(.sc-prueba--paso-a-paso) .sc-prueba__barra { display: none; }

.sc-prueba__falta {
  margin: var(--sc-espacio-4) 0 0;
  font-size: var(--sc-tipo-cuerpo-s);
  color: var(--sc-color-derivacion-texto);
}

.sc-prueba__aviso {
  padding: var(--sc-espacio-5);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde);
  border-radius: var(--sc-radio-m);
  background: var(--sc-color-superficie-elevada);
}

.sc-prueba__aviso--error {
  border-color: var(--sc-color-derivacion-borde);
  background: var(--sc-color-derivacion-superficie);
  color: var(--sc-color-derivacion-texto);
}


/* ── El resultado ────────────────────────────────────────────────────────── */

.sc-prueba-resultado {
  max-width: 46rem;
  margin-inline: auto;
  font-family: var(--sc-fuente-lectura);
  color: var(--sc-texto-primario);
}

.sc-prueba-resultado__titulo {
  margin: 0 0 var(--sc-espacio-5);
  font-family: var(--sc-fuente-titulo);
  font-size: var(--sc-tipo-titulo-1);
  line-height: var(--sc-linea-titulo);
}

.sc-prueba-resultado__texto {
  margin: 0 0 var(--sc-espacio-5);
  font-size: var(--sc-tipo-cuerpo);
  line-height: var(--sc-linea-cuerpo);
  color: var(--sc-texto-secundario);
}

.sc-prueba-resultado__secundario {
  margin: var(--sc-espacio-5) 0 0;
  font-size: var(--sc-tipo-cuerpo-s);
}

.sc-prueba-resultado__cuenta {
  margin: var(--sc-espacio-8) 0 0;
  padding-top: var(--sc-espacio-5);
  border-top: var(--sc-trazo-fino) solid var(--sc-color-borde-sutil);
  font-size: var(--sc-tipo-cuerpo-s);
  color: var(--sc-texto-secundario);
}

/* El bloque de oferta. NO existe en el perfil de alta dificultad, y eso no lo
   decide este archivo: la plantilla no lo pinta porque SC_Prueba devuelve
   `admite_oferta` en false y ya ha escrito la supresión comercial. */
.sc-prueba-oferta {
  margin: var(--sc-espacio-8) 0 0;
  padding: var(--sc-espacio-6);
  border: var(--sc-trazo-normal) solid var(--sc-color-borde-acento);
  border-radius: var(--sc-radio-l);
  background: var(--sc-color-acento-superficie);
}

.sc-prueba-oferta__titulo {
  margin: 0 0 var(--sc-espacio-3);
  font-family: var(--sc-fuente-titulo);
  font-size: var(--sc-tipo-titulo-3);
  color: var(--sc-texto-primario);
}

.sc-prueba-oferta__texto {
  margin: 0 0 var(--sc-espacio-4);
  font-size: var(--sc-tipo-cuerpo-s);
  line-height: var(--sc-linea-cuerpo);
  color: var(--sc-texto-secundario);
}


/* ── Por debajo de 640 ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .sc-prueba__enunciado { font-size: var(--sc-tipo-titulo-3); }
  .sc-prueba-resultado__titulo { font-size: var(--sc-tipo-titulo-2); }

  /* El pie se pega abajo: con diez pantallas, el botón tiene que estar donde
     está el pulgar y no al final de una lista de ocho opciones. */
  .sc-prueba--paso-a-paso .sc-prueba__pie {
    position: sticky;
    inset-block-end: 0;
    padding-block: var(--sc-espacio-4);
    background: var(--sc-color-superficie);
  }

  .sc-prueba__siguiente,
  .sc-prueba__enviar { flex: 1; }
}