/* Pantallas de misión: construir, predecir, ordenar y enseñarle a Bit. */

.mision {
  display: grid;
  gap: var(--espacio-5);
}
.mision__cabecera {
  display: grid;
  gap: var(--espacio-2);
  justify-items: start;
}
.mision__titulo {
  font-size: var(--t-6);
  font-weight: 800;
}
.mision__tipo {
  color: var(--linea);
}
.mision__tipo-nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.3rem;
  padding: 0.15rem 0.7rem;
  border-radius: var(--radio-pildora);
  background: var(--luz-suave);
  color: var(--luz);
  font-size: var(--t-0);
  font-weight: 700;
}
/* El enunciado llega como una transmisión: un panel de cristal con el tinte
   del lenguaje y la antena a la izquierda. */
.mision__enunciado {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: start;
  gap: var(--espacio-2) var(--espacio-4);
  width: 100%;
  margin-top: var(--espacio-2);
  padding: var(--espacio-4) var(--espacio-5) var(--espacio-4) var(--espacio-4);
  border: 1px solid color-mix(in srgb, var(--acento) 35%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--acento) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--superficie-alta), var(--superficie));
  box-shadow: 0 14px 30px -22px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.06);
  font-size: var(--t-3);
  line-height: 1.5;
}
.mision__enunciado > :not(.mision__antena) {
  grid-column: 2;
  margin: 0;
}
.mision__antena {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--acento) 35%, #fff), var(--acento) 55%, color-mix(in srgb, var(--acento) 50%, #000));
  color: #0a0c24;
  box-shadow: 0 0 18px -4px var(--acento);
}
.mision__antena .icono {
  width: 1.3rem;
  height: 1.3rem;
  stroke-width: 2.2;
}
/* Una sola columna: la ayuda ahora vive en una hoja aparte, no en un lateral. */
.mision__area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espacio-6);
  align-items: start;
}
.mision__cuerpo {
  display: grid;
  gap: var(--espacio-4);
  min-width: 0;
}
.mision__final:focus {
  outline: none;
}

/* Ayuda: ficha, pistas y solución */
.ayuda {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: var(--espacio-4);
}
.ayuda__bloque {
  display: grid;
  gap: var(--espacio-2);
  justify-items: start;
  padding: var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}
.ayuda__titulo {
  font-size: var(--t-4);
}
.pistas__lista {
  display: grid;
  gap: var(--espacio-3);
  padding-left: 1.2rem;
}
.pistas__lista:empty {
  display: none;
}
.pistas__pista strong {
  color: var(--luz);
}
.solucion {
  display: grid;
  gap: var(--espacio-2);
  margin-top: var(--espacio-2);
  font-size: var(--t-1);
}

/* Ficha rápida */
.ficha-rapida {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(86vh, 52rem);
  padding: 0;
  border: 1px solid var(--linea-media);
  border-radius: var(--radio-panel);
  background: var(--superficie);
  color: var(--papel);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}
.ficha-rapida::backdrop {
  background: rgba(4, 12, 22, 0.8);
}
.ficha-rapida__cabecera {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-4) var(--espacio-5);
  border-bottom: 1px solid var(--linea-tenue);
  background: var(--superficie);
}
.ficha-rapida__cabecera h2 {
  font-size: var(--t-5);
  color: var(--acento);
}
.ficha-rapida__cuerpo {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-5);
}
.ficha-rapida__cuerpo h3 {
  margin-top: var(--espacio-2);
  font-size: var(--t-3);
  color: var(--linea);
}
.ficha-rapida__analogia {
  font-size: var(--t-3);
  line-height: 1.5;
}

/* Construir: el método de las 4 preguntas */
.preguntas {
  display: grid;
  gap: var(--espacio-4);
  justify-items: start;
  max-width: 48rem;
  padding: var(--espacio-6);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}
.preguntas__campo {
  display: grid;
  gap: var(--espacio-1);
  width: 100%;
}
.preguntas__campo label {
  font-family: var(--fuente-rotulo);
  font-size: var(--t-4);
  font-weight: 700;
}

/* Construir: el taller */
.taller {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--espacio-3);
  height: min(62vh, 520px);
  min-height: 340px;
}
.taller__editor {
  display: flex;
  min-width: 0;
  min-height: 0;
}
.taller__editor .editor-archivos {
  flex: 1;
}
.taller__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3) var(--espacio-4);
}
.taller__pruebas {
  padding: var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}
.pruebas {
  display: grid;
  gap: var(--espacio-2);
  padding: 0;
  list-style: none;
}
.prueba {
  display: grid;
  grid-template-columns: 0.8rem minmax(0, 1fr);
  gap: var(--espacio-3);
  align-items: start;
}
/* Cada prueba es una ventana: se enciende cuando pasa. */
.prueba__marca {
  width: 0.8rem;
  height: 1rem;
  margin-top: 0.3rem;
  border: 1px solid var(--linea-media);
  border-radius: 2px;
}
.prueba--ok .prueba__marca {
  border-color: var(--luz);
  background: var(--luz);
  box-shadow: 0 0 8px var(--luz);
}
.prueba--falla .prueba__marca {
  border-color: var(--error);
  background: var(--error-suave);
}
.prueba--falla .prueba__texto {
  color: var(--papel);
}
.prueba--pendiente .prueba__texto {
  color: var(--linea);
}
.prueba__detalle {
  display: block;
  color: var(--error);
  font-size: var(--t-1);
}
.plan {
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
}
.plan summary {
  cursor: pointer;
  color: var(--linea);
  font-weight: 600;
}
.plan dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--espacio-1) var(--espacio-4);
  margin: var(--espacio-3) 0 0;
}
.plan dt {
  color: var(--linea);
}
.plan dd {
  margin: 0;
}

/* Predecir */
.prediccion {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--espacio-5);
  align-items: start;
}
.prediccion__codigo .cm-editor {
  max-height: 420px;
}
.prediccion__lado {
  display: grid;
  gap: var(--espacio-3);
}
.prediccion__formulario {
  display: grid;
  gap: var(--espacio-4);
  justify-items: start;
}
.opciones {
  display: grid;
  gap: var(--espacio-2);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.prediccion__pregunta {
  margin-bottom: var(--espacio-3);
  font-family: var(--fuente-rotulo);
  font-size: var(--t-5);
  font-weight: 700;
  line-height: 1.1;
}
.opcion {
  position: relative;
}
.opcion input {
  position: absolute;
  opacity: 0;
}
.opcion label {
  display: block;
  padding: var(--espacio-3) var(--espacio-4) var(--espacio-3) 2.7rem;
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  background: var(--superficie);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.opcion label::before {
  content: "";
  position: absolute;
  left: var(--espacio-4);
  top: 50%;
  width: 0.75rem;
  height: 0.95rem;
  translate: 0 -50%;
  border: 1px solid var(--linea-media);
  border-radius: 2px;
}
.opcion label:hover {
  border-color: var(--linea-media);
  background: var(--superficie-alta);
}
.opcion input:checked + label {
  border-color: var(--luz);
  background: var(--luz-suave);
}
.opcion input:checked + label::before {
  border-color: var(--luz);
  background: var(--luz);
  box-shadow: 0 0 8px var(--luz);
}
.opcion input:focus-visible + label {
  outline: 2px solid var(--papel);
  outline-offset: 2px;
}
.opcion input:disabled + label {
  cursor: default;
}
.respuesta-libre {
  max-width: 12rem;
  font-size: var(--t-4);
  font-family: var(--fuente-codigo);
}
.prediccion__resultado,
.ordenar__resultado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--espacio-4);
  align-items: start;
}
.prediccion__resultado:empty,
.ordenar__resultado:empty {
  display: none;
}
.prediccion__resultado > .acciones {
  grid-column: 1 / -1;
}
.veredicto {
  display: grid;
  gap: var(--espacio-2);
  padding: var(--espacio-5);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
}
.veredicto--bien {
  border-color: rgb(var(--luz-rgb) / 0.6);
  background: var(--luz-suave);
}
.veredicto--mal {
  border-color: rgba(255, 138, 122, 0.6);
  background: var(--error-suave);
}
.veredicto__titulo {
  font-family: var(--fuente-rotulo);
  font-size: var(--t-5);
  font-weight: 800;
  line-height: 1;
}
.veredicto--bien .veredicto__titulo {
  color: var(--luz);
}
.veredicto--mal .veredicto__titulo {
  color: var(--error);
}
.veredicto__idea {
  font-weight: 600;
}
.veredicto ul {
  display: grid;
  gap: var(--espacio-1);
  padding-left: 1.1rem;
}

/* Ordenar */
.ordenar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--espacio-5);
  align-items: start;
}
.ordenar__columna {
  display: grid;
  gap: var(--espacio-2);
}
.ordenar__fijos {
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
}
.ordenar__fijos summary {
  cursor: pointer;
  color: var(--linea);
  font-weight: 600;
  margin-bottom: var(--espacio-2);
}
.piezas {
  display: grid;
  gap: var(--espacio-2);
  min-height: 8rem;
  margin: 0;
  padding: var(--espacio-3);
  border: 1px dashed var(--linea-tenue);
  border-radius: var(--radio-panel);
  list-style: none;
}
.piezas--armado {
  border-style: solid;
  background: var(--tinta-profunda);
}
.pieza {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  background: var(--superficie);
  cursor: grab;
}
.pieza:hover {
  border-color: var(--linea-media);
}
.pieza__codigo {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  background: none;
  padding: 0;
}
.pieza__numero {
  min-width: 1.4rem;
  color: var(--linea-media);
  font-family: var(--fuente-codigo);
  font-size: var(--t-0);
}
.pieza__acciones {
  display: inline-flex;
  gap: 0.1rem;
}
.piezas__vacio {
  align-self: center;
  color: var(--linea-media);
  font-size: var(--t-1);
}

/* Enséñale a Bit */
.ensenar {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--espacio-5);
  align-items: start;
}
.ensenar__codigo {
  display: grid;
  gap: var(--espacio-3);
}
.ensenar__codigo .cm-editor {
  max-height: 360px;
}
.ensenar__programa {
  display: grid;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}
.ensenar__bit {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--espacio-3);
  align-items: center;
}
.bit {
  width: 56px;
  height: 63px;
}
.bit__trazo {
  fill: none;
  stroke: var(--linea);
  stroke-width: 1.6;
}
.bit__ojo {
  fill: var(--linea-tenue);
}
.bit__baliza {
  fill: var(--linea-media);
}
.bit--bien .bit__ojo,
.bit--bien .bit__baliza {
  fill: var(--luz);
  filter: url(#resplandor);
}
.bit--mal .bit__ojo,
.bit--mal .bit__baliza {
  fill: var(--error);
}
.programa {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.programa__vacio {
  padding: var(--espacio-4);
  border: 1px dashed var(--linea-tenue);
  border-radius: var(--radio);
  color: var(--linea);
}
.paso {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: var(--espacio-2);
  align-items: start;
  padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--linea-tenue);
  border-radius: var(--radio);
  background: var(--tinta-profunda);
}
.paso--fallo {
  border-color: var(--error);
  background: var(--error-suave);
}
.paso__numero {
  padding-top: 0.35rem;
  color: var(--acento);
  font-family: var(--fuente-rotulo);
  font-size: var(--t-3);
  font-weight: 800;
  line-height: 1;
}
.paso__frase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  max-width: none;
  line-height: 2;
}
.paso__frase select,
.paso__frase input {
  width: auto;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radio-fino);
  font-size: var(--t-1);
}
.paso__frase select {
  font-family: var(--fuente-codigo);
}
.paso__entrada--corta {
  width: 6.5rem !important;
}
.paso__entrada--normal {
  width: 10rem !important;
}
.paso__entrada--ancha {
  flex: 1 1 12rem;
  width: auto !important;
  min-width: 10rem;
}
.paso__acciones {
  display: inline-flex;
  gap: 0.1rem;
}
.paleta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.paleta .boton {
  border-style: dashed;
}
.bit-dice {
  display: grid;
  gap: var(--espacio-2);
}
.bit-dice__frase {
  font-weight: 600;
}
.bit-dice__diferencias {
  display: grid;
  gap: var(--espacio-1);
  padding-left: 1.2rem;
}
.bit-dice__diferencias li::marker {
  color: var(--error);
}

/* Final */
.final {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-6);
  align-items: flex-end;
  padding: var(--espacio-6);
  border: 1px solid rgb(var(--luz-rgb) / 0.6);
  border-radius: var(--radio-panel);
  background: var(--superficie);
}
.final--encendido {
  background:
    radial-gradient(ellipse 60% 120% at 10% 100%, rgb(var(--luz-rgb) / 0.22), transparent 65%),
    var(--superficie);
  box-shadow: 0 0 60px -30px rgb(var(--luz-rgb) / 0.8);
}
.final__edificio {
  width: 90px;
  height: 150px;
}
.final__texto {
  display: grid;
  flex: 1 1 22rem;
  gap: var(--espacio-3);
  justify-items: start;
}
.final__titulo {
  font-size: var(--t-6);
  font-weight: 800;
  color: var(--luz);
}
.final__efecto {
  font-size: var(--t-3);
}
.final__bytes {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

@media (max-width: 1000px) {
  .mision__area {
    grid-template-columns: minmax(0, 1fr);
  }
  .ayuda {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
  .ensenar,
  .prediccion {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .taller {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(260px, 1fr) minmax(220px, 1fr);
    height: auto;
  }
  .ordenar,
  .prediccion__resultado,
  .ordenar__resultado {
    grid-template-columns: minmax(0, 1fr);
  }
  .mision__titulo {
    font-size: var(--t-5);
  }
  .preguntas,
  .final {
    padding: var(--espacio-5);
  }
  .plan dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- La barra de herramientas de la misión ----------
   Pedir pista, restablecer y la lección o la solución, siempre a la vista:
   queda pegada arriba mientras escribes (en la misión no hay barra del juego). La pista va en dorado para
   encontrarla rápido; las pistas que pides aparecen justo debajo. */
.mision__herramientas {
  position: sticky;
  top: 0.6rem;
  z-index: 14;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
  padding: 0.45rem 0.5rem;
  border: 1px solid rgb(var(--luz-rgb) / 0.28);
  border-radius: 16px;
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  box-shadow: 0 10px 24px -18px rgb(0 0 0 / 0.7);
}
.mision__herramientas .mision__ayuda {
  margin-left: auto;
}
.mision__restablecer:empty {
  display: none;
}
.boton--pista {
  border-color: color-mix(in srgb, var(--oro) 60%, transparent);
  background: color-mix(in srgb, var(--oro) 14%, transparent);
}
.boton--pista .icono {
  color: var(--oro);
}
.pistas__cuenta {
  padding: 1px 7px;
  border-radius: var(--radio-pildora);
  background: color-mix(in srgb, var(--oro) 22%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
}
.restablecer__boton .icono {
  color: var(--luz);
}
.mision__pistas {
  margin: 0;
  padding: 0.8rem 1rem 0.8rem 2.1rem;
  border: 1px solid color-mix(in srgb, var(--oro) 35%, transparent);
  border-left: 4px solid var(--oro);
  border-radius: 14px;
  background: color-mix(in srgb, var(--oro) 9%, var(--superficie));
  line-height: 1.5;
}
.mision__pistas[hidden] {
  display: none;
}
.mision__pistas .pistas__pista strong {
  color: var(--oro);
}
@media (max-width: 720px) {
  .mision__herramientas {
    top: calc(0.4rem + env(safe-area-inset-top));
    padding: 0.4rem;
  }
}
/* En el celular los botones dicen lo mismo en corto para caber en una fila. */
@media (max-width: 480px) {
  .mision__herramientas {
    gap: 0.35rem;
  }
  .mision__herramientas .boton {
    gap: 0.35rem;
    min-height: 2.6rem;
    padding-inline: 0.6rem;
  }
  .mision__herramientas .texto-largo,
  .mision__herramientas .pistas__cuenta {
    display: none;
  }
  .mision__herramientas .texto-corto {
    display: inline;
  }
  /* Mientras «Restablecer» pregunta, la pregunta ocupa la fila sola. */
  .mision__herramientas:has(.restablecer__pregunta) > :not(.mision__restablecer, .restablecer) {
    display: none;
  }
}

/* «Restablecer»: vuelve la actividad a como estaba. Pregunta en el mismo lugar. */
.restablecer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
}
.restablecer__pregunta {
  color: var(--papel-suave);
  font-size: var(--t-1);
  font-weight: 700;
}

/* ---------- Examen de nivelación ---------- */
.nivelacion {
  display: grid;
  gap: var(--espacio-5);
  max-width: 64rem;
  margin-inline: auto;
}
.nivelacion__cabecera {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 18rem);
  align-items: center;
  gap: var(--espacio-4);
  padding: var(--espacio-4) var(--espacio-5);
  border: 1px solid var(--linea-tenue);
  border-radius: 24px;
  background:
    radial-gradient(60% 120% at 100% 0%, rgb(var(--brillo-rgb) / 0.16), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--superficie-alta) 85%, transparent), color-mix(in srgb, var(--superficie) 85%, transparent));
}
.nivelacion__titulo {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  min-width: 0;
}
.nivelacion__titulo h1 {
  margin: 0;
  font: 400 clamp(1.6rem, 3vw, 2.2rem) / 1 var(--fuente-comic);
  letter-spacing: 0.03em;
}
.nivelacion__titulo .nota {
  margin: 0.2rem 0 0;
}
.nivelacion__logo {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
}
.nivelacion__avance {
  display: grid;
  gap: 0.35rem;
}
.nivelacion__contador {
  color: var(--papel-suave);
  font: 700 0.78rem / 1 var(--fuente-hud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nivelacion__barra {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(var(--linea-rgb) / 0.2);
}
.nivelacion__relleno {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--luz), rgb(var(--brillo-rgb)));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform 0.4s ease-out;
}
.nivelacion__portada,
.nivelacion__resultado {
  display: grid;
  gap: var(--espacio-4);
  padding: var(--espacio-5);
  border: 1px solid var(--linea-tenue);
  border-radius: 24px;
  background: var(--superficie);
}
.nivelacion__lema {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.nivelacion__reglas {
  display: grid;
  gap: var(--espacio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nivelacion__reglas li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--espacio-3);
  align-items: start;
}
.nivelacion__reglas .icono {
  color: var(--luz);
}
.nivelacion__cuerpo {
  display: grid;
  gap: var(--espacio-4);
}
.nivelacion__pregunta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-3);
}
.nivelacion__pregunta h2 {
  margin: 0;
  font-size: 1.3rem;
}
.nivelacion__enfoque {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgb(var(--luz-rgb) / 0.14);
  color: var(--luz);
  font: 700 0.75rem / 1 var(--fuente-hud);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nivelacion__enfoque--logica {
  background: rgb(var(--brillo-rgb) / 0.16);
  color: rgb(var(--brillo-rgb));
}
.nivelacion__enfoque .icono {
  width: 0.95rem;
  height: 0.95rem;
}
.nivelacion__seguir {
  display: grid;
  justify-items: start;
  gap: var(--espacio-2);
}
.nivelacion__seguir:empty {
  display: none;
}
.nivelacion__resultado {
  justify-items: start;
  border-color: color-mix(in srgb, var(--exito) 40%, var(--linea-tenue));
}
.nivelacion__resultado h2 {
  margin: 0;
  font: 400 clamp(1.6rem, 3vw, 2.2rem) / 1.1 var(--fuente-comic);
  letter-spacing: 0.02em;
}
.nivelacion__sello {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--exito) 18%, transparent);
  color: var(--exito);
}
.nivelacion__sello .icono {
  width: 1.8rem;
  height: 1.8rem;
}
.nivelacion__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2) var(--espacio-5);
  margin: 0;
}
.nivelacion__cifras strong {
  font: 700 1.2rem / 1 var(--fuente-hud);
}
.nivelacion__validados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nivelacion__validados li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--exito) 14%, transparent);
  color: var(--exito);
  font-weight: 700;
  font-size: 0.85rem;
}
.nivelacion__validados .icono {
  width: 0.9rem;
  height: 0.9rem;
}
@media (max-width: 720px) {
  .nivelacion__cabecera {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--espacio-4);
  }
  .nivelacion__cabecera > .boton-hud {
    justify-self: start;
  }
  .nivelacion__portada,
  .nivelacion__resultado {
    padding: var(--espacio-4);
  }
}