/* =========================================================================
   Exámenes Libres · Cuestionario interactivo
   ========================================================================= */

:root {
  --azul: #2563eb;
  --azul-osc: #1d4ed8;
  --azul-claro: #e8f0ff;
  --verde: #16a34a;
  --verde-osc: #15803d;
  --verde-claro: #e8f7ee;
  --rojo: #dc2626;
  --rojo-osc: #b91c1c;
  --rojo-claro: #fdecec;
  --ambar: #f59e0b;
  --ambar-osc: #b45309;
  --ambar-claro: #fff7e6;

  --tinta: #172033;
  --tinta-suave: #5b6577;
  --linea: #e3e8f0;
  --fondo: #f4f7fc;
  --blanco: #ffffff;

  --radio: 18px;
  --radio-chico: 12px;
  --sombra: 0 10px 30px -12px rgba(23, 32, 51, .18);
  --sombra-suave: 0 4px 14px -6px rgba(23, 32, 51, .12);
  --transicion: 160ms ease;

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background-color: var(--fondo);
  background-image:
    radial-gradient(900px 420px at 8% -12%, #dce8ff 0%, transparent 60%),
    radial-gradient(760px 380px at 100% 0%, #fdeccd 0%, transparent 55%);
  background-repeat: no-repeat;
}

h1, h2, h3, p, ul {
  margin: 0;
}

h1, h2, h3 {
  line-height: 1.25;
  letter-spacing: -.015em;
}

img {
  max-width: 100%;
}

button,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

.contenedor {
  width: min(100% - 2rem, 880px);
  margin-inline: auto;
}

main.contenedor {
  flex: 1;
  padding-block: 1.5rem 3rem;
}

/* ------------------------------------------------------------------ */
/* Accesibilidad                                                       */
/* ------------------------------------------------------------------ */
.saltar-contenido {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--azul);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: top var(--transicion);
}

.saltar-contenido:focus {
  top: .75rem;
}

:focus-visible {
  outline: 3px solid #93b4ff;
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#pregunta-titulo:focus,
#res-titulo:focus,
.feedback:focus {
  outline: none;
}

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */
.cabecera {
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--linea);
  backdrop-filter: blur(8px);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .85rem;
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .35rem;
  margin-left: auto;
}

.marca {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.marca__icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--azul), #4f8bff);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .7);
}

.marca__icono svg {
  width: 24px;
  height: 24px;
}

.marca__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.marca__titulo {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

.marca__sub {
  font-size: .78rem;
  color: var(--tinta-suave);
}

/* ------------------------------------------------------------------ */
/* Botones                                                             */
/* ------------------------------------------------------------------ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: .65rem 1.1rem;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion),
    color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

.boton:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.boton--primario {
  background: var(--azul);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .9);
}

.boton--primario:hover:not(:disabled) {
  background: var(--azul-osc);
  transform: translateY(-1px);
}

.boton--secundario {
  background: var(--blanco);
  border-color: var(--linea);
  color: var(--tinta);
}

.boton--secundario:hover:not(:disabled) {
  border-color: #b9c7de;
  background: #f7faff;
}

.boton--fantasma {
  background: transparent;
  color: var(--tinta-suave);
}

.boton--fantasma:hover:not(:disabled) {
  background: #eef3fb;
  color: var(--tinta);
}

.boton--grande {
  padding: .9rem 1.6rem;
  font-size: 1.02rem;
  border-radius: 14px;
}

.boton--chico {
  padding: .45rem .8rem;
  font-size: .84rem;
  border-radius: 10px;
}

/* ------------------------------------------------------------------ */
/* Tarjetas y pantallas                                                */
/* ------------------------------------------------------------------ */
.pantalla {
  animation: aparecer 260ms ease both;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.sobre-titulo {
  display: inline-block;
  margin-bottom: .55rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--azul-claro);
  color: var(--azul-osc);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.texto-suave {
  color: var(--tinta-suave);
}

/* ------------------------------------------------------------------ */
/* Inicio                                                              */
/* ------------------------------------------------------------------ */
.inicio {
  padding: clamp(1.5rem, 4vw, 2.6rem);
}

.inicio h1 {
  font-size: clamp(1.6rem, 4.2vw, 2.15rem);
  margin-bottom: .6rem;
}

.inicio > .texto-suave {
  max-width: none;
}

.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.6rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
}

.campo--ancho {
  grid-column: 1 / -1;
}

.campo label {
  font-size: .84rem;
  font-weight: 700;
  color: var(--tinta-suave);
  letter-spacing: .02em;
}

.select-envoltura {
  position: relative;
}

.select-envoltura select {
  width: 100%;
  appearance: none;
  border: 2px solid var(--linea);
  border-radius: 12px;
  background: #fbfcff;
  padding: .72rem 2.4rem .72rem .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transicion), background-color var(--transicion);
}

.select-envoltura select:hover {
  border-color: #c4d2e8;
}

.select-envoltura select:focus {
  border-color: var(--azul);
  background: #fff;
}

.select-flecha {
  position: absolute;
  right: 1rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--tinta-suave);
  border-bottom: 2px solid var(--tinta-suave);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.resumen {
  grid-column: 1 / -1;
  border: 1px dashed #c9d6ea;
  border-radius: var(--radio-chico);
  background: #f8faff;
  padding: .95rem 1.05rem;
  font-size: .9rem;
  color: var(--tinta-suave);
}

.resumen strong {
  color: var(--tinta);
}

.resumen__fila {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  align-items: baseline;
}

.resumen__fila + .resumen__fila {
  margin-top: .35rem;
}

.chip {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: #eaf0fb;
  color: #334155;
  font-size: .76rem;
  font-weight: 600;
}



.formulario__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .2rem;
}

.pistas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.2rem;
}

.pista {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1.1rem;
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--linea);
}

.pista h2 {
  font-size: .95rem;
  margin-bottom: .2rem;
}

.pista p {
  font-size: .84rem;
  color: var(--tinta-suave);
  line-height: 1.45;
}

.pista__icono {
  flex: 0 0 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.pista__icono svg {
  width: 20px;
  height: 20px;
}

.pista__icono--azul { background: var(--azul-claro); color: var(--azul-osc); }
.pista__icono--ambar { background: var(--ambar-claro); color: var(--ambar-osc); }
.pista__icono--verde { background: var(--verde-claro); color: var(--verde-osc); }

/* ------------------------------------------------------------------ */
/* Barra de avance                                                     */
/* ------------------------------------------------------------------ */
.barra-avance {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-block: .8rem .95rem;
  margin-bottom: .9rem;
  background: linear-gradient(var(--fondo) 70%, rgba(244, 247, 252, 0));
}

.barra-avance__texto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .45rem;
}

.barra-avance__examen {
  font-weight: 800;
  font-size: .9rem;
  color: var(--tinta);
}

.barra-avance__progreso {
  font-size: .84rem;
  font-weight: 600;
  color: var(--tinta-suave);
  white-space: nowrap;
}

.progreso {
  height: 10px;
  border-radius: 999px;
  background: #e2e9f5;
  overflow: hidden;
}

.progreso__relleno {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--azul), #5f9bff);
  transition: width 280ms ease;
}

/* ------------------------------------------------------------------ */
/* Pregunta                                                            */
/* ------------------------------------------------------------------ */
.pregunta {
  padding: clamp(1.25rem, 3.5vw, 2rem);
}

.pregunta__cabecera {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--linea);
}

.etiqueta {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--azul-claro);
  color: var(--azul-osc);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pregunta h1 {
  font-size: clamp(1.25rem, 3.3vw, 1.55rem);
}

/* ------------------------------------------------------------------ */
/* Bloques de contenido (texto, imágenes, tablas)                      */
/* ------------------------------------------------------------------ */
.bloques {
  display: flow-root;
}

.bloques > * + * {
  margin-top: .7rem;
}

.bloque-texto {
  display: block;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.bloque-texto:empty {
  display: none;
}

/* Texto de lectura (inglés): caja destacada dentro de la pregunta */
.bloque-lectura {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid #cfe0ff;
  border-left: 4px solid var(--azul);
  border-radius: var(--radio-chico);
  background: var(--azul-claro);
}

.bloque-lectura__titulo {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul-osc);
}

.bloque-lectura__texto {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
}

.bloque-lectura__texto + .bloque-lectura__texto {
  margin-top: .6rem;
}

.img-en-linea {
  display: inline-block;
  width: auto !important;
  height: 1.55em;
  max-width: 40vw;
  vertical-align: -0.32em;
  margin-inline: .1em;
  object-fit: contain;
}

.img-en-linea--ancha {
  height: 1.15em;
  vertical-align: -0.18em;
}

.bloque-imagen {
  display: block;
  margin: 1rem 0;
  text-align: center;
}

.bloque-imagen img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
}

.bloque-imagen img.con-borde {
  border: 1px solid var(--linea);
  background: #fff;
  padding: .25rem;
}

.tabla-envoltura {
  margin: 1rem 0;
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
}

.bloques table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: .93rem;
}

.bloques th,
.bloques td {
  border-bottom: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
  padding: .55rem .7rem;
  text-align: left;
  vertical-align: top;
}

.bloques tr:last-child th,
.bloques tr:last-child td {
  border-bottom: 0;
}

.bloques th:last-child,
.bloques td:last-child {
  border-right: 0;
}

.bloques thead th,
.bloques tr:first-child th {
  background: #f6f9ff;
  font-weight: 700;
}

.bloques table .bloque-texto {
  white-space: pre-line;
}

/* ------------------------------------------------------------------ */
/* Alternativas                                                        */
/* ------------------------------------------------------------------ */
.interaccion {
  margin-top: 1.4rem;
}

.alternativas {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.alternativa {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  width: 100%;
  padding: .85rem 1rem;
  text-align: left;
  background: #fff;
  border: 2px solid var(--linea);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color var(--transicion), background-color var(--transicion),
    transform var(--transicion), box-shadow var(--transicion);
}

.alternativa:hover:not(:disabled) {
  border-color: #9db9f5;
  background: #f7faff;
  transform: translateY(-1px);
  box-shadow: var(--sombra-suave);
}

.alternativa:disabled {
  cursor: default;
}

.alternativa__letra {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--azul-claro);
  color: var(--azul-osc);
  font-weight: 800;
  font-size: .95rem;
  transition: background-color var(--transicion), color var(--transicion);
}

.alternativa__contenido {
  flex: 1;
  min-width: 0;
  padding-top: .18rem;
}

.alternativa__contenido > * + * {
  margin-top: .35rem;
}

.alternativa__contenido .bloque-imagen {
  margin: .3rem 0;
  text-align: left;
}

.alternativa__contenido .img-en-linea {
  height: 1.5em;
}

.alternativa--correcta {
  border-color: var(--verde);
  background: var(--verde-claro);
}

.alternativa--correcta .alternativa__letra {
  background: var(--verde);
  color: #fff;
}

.alternativa--incorrecta {
  border-color: var(--rojo);
  background: var(--rojo-claro);
}

.alternativa--incorrecta .alternativa__letra {
  background: var(--rojo);
  color: #fff;
}

.alternativa--atenuada {
  opacity: .55;
}

.alternativas--letras {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.alternativas--letras .alternativa {
  justify-content: center;
  padding: .9rem .5rem;
}

.alternativas--letras .alternativa__contenido {
  display: none;
}

.alternativas--letras .alternativa__letra {
  flex: 0 0 42px;
  height: 42px;
  font-size: 1.1rem;
}

/* ------------------------------------------------------------------ */
/* Desarrollo                                                          */
/* ------------------------------------------------------------------ */
.desarrollo__ayuda {
  margin-bottom: .5rem;
  font-size: .88rem;
  color: var(--tinta-suave);
}

.desarrollo textarea {
  width: 100%;
  min-height: 132px;
  padding: .85rem .95rem;
  border: 2px solid var(--linea);
  border-radius: 12px;
  background: #fbfcff;
  resize: vertical;
  line-height: 1.55;
  transition: border-color var(--transicion), background-color var(--transicion);
}

.desarrollo textarea:hover {
  border-color: #c4d2e8;
}

.desarrollo textarea:focus {
  border-color: var(--azul);
  background: #fff;
}

.desarrollo textarea:disabled {
  background: #f7f9fd;
  color: var(--tinta-suave);
}

.desarrollo__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .75rem;
}

.autoevaluacion {
  margin-top: 1.1rem;
  padding: .95rem 1rem;
  border: 1px dashed #c9d6ea;
  border-radius: 12px;
  background: #f8faff;
}

.autoevaluacion p {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: .6rem;
}

.autoevaluacion__botones {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.boton--bien {
  background: var(--verde);
  color: #fff;
}

.boton--bien:hover:not(:disabled) {
  background: var(--verde-osc);
}

.boton--mal {
  background: #fff;
  border-color: #f0b4b4;
  color: var(--rojo-osc);
}

.boton--mal:hover:not(:disabled) {
  background: var(--rojo-claro);
}

/* ------------------------------------------------------------------ */
/* Feedback                                                            */
/* ------------------------------------------------------------------ */
.feedback {
  margin-top: 1.4rem;
  border: 1px solid var(--linea);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.feedback--ok {
  border-color: #b6e3c5;
}

.feedback--error {
  border-color: #f3bcbc;
}

.feedback--neutro {
  border-color: #f2d39b;
}

.feedback__cabecera {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .9rem 1.1rem;
  font-weight: 700;
}

.feedback--ok .feedback__cabecera {
  background: var(--verde-claro);
  color: var(--verde-osc);
}

.feedback--error .feedback__cabecera {
  background: var(--rojo-claro);
  color: var(--rojo-osc);
}

.feedback--neutro .feedback__cabecera {
  background: var(--ambar-claro);
  color: var(--ambar-osc);
}

.feedback__icono {
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: currentColor;
}

.feedback__icono svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

.feedback__texto {
  padding-top: .08rem;
}

.feedback__texto > span {
  display: block;
}

.feedback__texto small {
  display: block;
  margin-top: .1rem;
  font-weight: 500;
  opacity: .85;
}

.feedback__cuerpo {
  padding: 1rem 1.1rem 1.2rem;
}

.feedback__subtitulo {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .55rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.feedback__subtitulo::before {
  content: "";
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: var(--ambar);
}

.feedback__cuerpo .bloques {
  font-size: .96rem;
}

.feedback__cuerpo .bloques > * + * {
  margin-top: .5rem;
}

.feedback__cuerpo .bloque-imagen {
  margin: .75rem 0;
  text-align: left;
}

.feedback__correcta {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 10px;
  background: var(--verde-claro);
  color: var(--verde-osc);
  font-weight: 800;
  margin-bottom: .6rem;
}

/* ------------------------------------------------------------------ */
/* Navegación                                                          */
/* ------------------------------------------------------------------ */
.navegacion {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 1rem;
}

/* ------------------------------------------------------------------ */
/* Resultados                                                          */
/* ------------------------------------------------------------------ */
.resultados {
  padding: clamp(1.4rem, 4vw, 2.4rem);
}

.resultados__cabecera {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.2rem);
}

.anillo {
  --porcentaje: 0;
  flex: 0 0 auto;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--verde) calc(var(--porcentaje) * 1%),
    #e5ebf5 0
  );
  transition: background 400ms ease;
}

.anillo__centro {
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px var(--linea);
}

.anillo__numero {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

.anillo__rotulo {
  margin-top: .15rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.resultados__texto h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: .35rem;
}

.estadisticas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin-top: 1.7rem;
}

.estadistica {
  padding: .9rem 1rem;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: #fbfcff;
}

.estadistica__numero {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
}

.estadistica__rotulo {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.estadistica--ok { background: var(--verde-claro); border-color: #c4e8d1; }
.estadistica--ok .estadistica__numero { color: var(--verde-osc); }
.estadistica--error { background: var(--rojo-claro); border-color: #f5cccc; }
.estadistica--error .estadistica__numero { color: var(--rojo-osc); }
.estadistica--pendiente { background: var(--ambar-claro); border-color: #f5dfb4; }
.estadistica--pendiente .estadistica__numero { color: var(--ambar-osc); }

.repaso {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linea);
}

.repaso h2 {
  font-size: 1.1rem;
  margin-bottom: .3rem;
}

.lista-repaso {
  display: grid;
  gap: .5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.lista-repaso__item {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .7rem .85rem;
  text-align: left;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--transicion), background-color var(--transicion);
}

.lista-repaso__item:hover {
  border-color: #b9c7de;
  background: #f8faff;
}

.lista-repaso__numero {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef3fb;
  font-size: .8rem;
  font-weight: 800;
  color: var(--tinta-suave);
}

.lista-repaso__titulo {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista-repaso__estado {
  flex: 0 0 auto;
  font-size: .74rem;
  font-weight: 800;
  padding: .15rem .55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lista-repaso__estado--error {
  background: var(--rojo-claro);
  color: var(--rojo-osc);
}

.lista-repaso__estado--pendiente {
  background: var(--ambar-claro);
  color: var(--ambar-osc);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.7rem;
}

/* ------------------------------------------------------------------ */
/* Pie                                                                 */
/* ------------------------------------------------------------------ */
.pie {
  border-top: 1px solid var(--linea);
  padding-block: 1.1rem;
  font-size: .8rem;
  color: var(--tinta-suave);
  text-align: center;
}

.pie__enlace {
  color: var(--azul);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 4px;
  transition: color var(--transicion);
}

.pie__enlace:hover {
  color: var(--azul-osc);
}

.pie__enlace:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

.aviso-noscript {
  margin: 1rem;
  padding: 1rem;
  border: 1px solid #f3bcbc;
  background: var(--rojo-claro);
  color: var(--rojo-osc);
  border-radius: 12px;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .formulario {
    grid-template-columns: 1fr;
  }

  .pistas {
    grid-template-columns: 1fr;
  }

  .estadisticas {
    grid-template-columns: repeat(2, 1fr);
  }

  .resultados__cabecera {
    flex-direction: column;
    text-align: center;
  }

  .resultados__texto .sobre-titulo {
    margin-inline: auto;
  }

  .anillo {
    width: 128px;
    height: 128px;
  }

  .navegacion {
    position: sticky;
    bottom: 0;
    padding-block: .75rem;
    background: linear-gradient(rgba(244, 247, 252, 0), var(--fondo) 35%);
  }

  .navegacion .boton {
    flex: 1;
  }

  #pantalla-quiz {
    padding-bottom: 2.5rem;
  }

  .feedback {
    scroll-margin-bottom: 90px;
  }
}

@media (max-width: 460px) {
  .cabecera__fila {
    flex-wrap: wrap;
  }

  .marca__sub {
    display: none;
  }

  .alternativas--letras {
    grid-template-columns: repeat(2, 1fr);
  }

  .acciones .boton,
  .formulario__acciones .boton {
    width: 100%;
  }

  .lista-repaso__titulo {
    white-space: normal;
  }
}

/* ------------------------------------------------------------------ */
/* Impresión                                                           */
/* ------------------------------------------------------------------ */
@media print {
  .cabecera,
  .navegacion,
  .acciones,
  .barra-avance {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .tarjeta {
    box-shadow: none;
    border-color: #ccc;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* Marca del autor, compartir y enlaces                               */
/* ------------------------------------------------------------------ */
.marca__enlace {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: inherit;
  text-decoration: none;
}

.marca__enlace:hover .marca__titulo {
  color: var(--azul-osc);
}

.cabecera__volver {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.cabecera__volver svg {
  width: 16px;
  height: 16px;
}

.autor {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: rgba(255, 255, 255, .75);
}

.autor__foto {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid var(--azul-claro);
}

.autor__texto {
  flex: 1 1 220px;
}

.autor__nombre {
  margin: 0;
  font-weight: 700;
  color: var(--tinta);
}

.autor__rol {
  margin: .1rem 0 0;
  font-size: .85rem;
  color: var(--tinta-suave);
}

.autor__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: .85rem;
}

.autor__enlaces a {
  color: var(--azul);
  font-weight: 600;
  text-decoration: none;
}

.autor__enlaces a:hover {
  text-decoration: underline;
}

.compartir {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border: 1px dashed #cfe0ff;
  border-radius: var(--radio-chico);
  background: var(--azul-claro);
}

.compartir__titulo {
  margin: 0 0 .7rem;
  font-weight: 700;
  color: var(--tinta);
}

.compartir__botones {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.compartir__botones .boton {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}

.compartir__botones svg {
  width: 16px;
  height: 16px;
}

.compartir__estado {
  margin: .6rem 0 0;
  min-height: 1.1rem;
  font-size: .85rem;
  color: var(--verde-osc);
}

.pie__fila {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
}

.pie__autor {
  margin: 0;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .9rem;
}

.pie__enlaces a {
  color: var(--azul);
  font-weight: 600;
  text-decoration: none;
}

.pie__enlaces a:hover {
  text-decoration: underline;
}

.pie__nota {
  margin: 0;
}

@media (max-width: 640px) {
  .cabecera__volver span {
    display: none;
  }
  .autor {
    align-items: flex-start;
  }
}