/*
 * Lo propio de cada pestaña.
 * Recoge la portada, la línea de tiempo del camino dentro de la admisión, el cuestionario de preparación, el catálogo del atlas y el modo estudio.
 * Ocupa el cuarto lugar de la cascada porque afina componentes que ya existen y no define ninguno nuevo desde cero.
 * Todo lo que aparece aquí se usa en una sola vista, de modo que un cambio de sección no puede romper otra.
 */

/* ------------------------------------------------------------
   Variantes de tarjeta, cada una propia de una pestaña.
   La tarjeta base vive en la hoja de componentes y aquí solo se ajusta lo que cambia.
   ------------------------------------------------------------ */

/* La tarjeta de un curso reserva sitio a la izquierda para la franja de familia que pinta la hoja de acentos. */
.tarjeta-curso { padding-left: 22px; }

.tarjeta-etapa .tarjeta-titulo { color: var(--marca); }

.tarjeta-recurso { gap: 6px; }

.tarjeta-especializacion {
  padding: 22px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--marca) 7%, var(--superficie)), var(--superficie) 55%);
}

/* La tarjeta que es en sí misma un enlace, como cada especialización de la portada, se alcanza con el tabulador sin una sola línea de código y por eso hereda el color del texto en lugar del subrayado del enlace. */
.tarjeta-enlace {
  text-decoration: none;
  color: inherit;
}

/* ------------------------------------------------------------
   Portada.
   ------------------------------------------------------------ */

.heroe {
  padding: 46px 16px 34px;
  text-align: center;
}

.heroe-titulo {
  margin: 0 auto 0.4em;
  max-width: 18ch;
  background: linear-gradient(120deg, var(--tinta) 18%, var(--marca) 58%, var(--marca-2) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--tinta);
}

.heroe-texto {
  max-width: 74ch;
  margin: 0 auto 26px;
  color: var(--tinta-2);
  font-size: 1.08rem;
}

.heroe-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ------------------------------------------------------------
   Cifras de la portada.
   ------------------------------------------------------------ */

.cifra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-align: center;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.cifra:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}

.cifra-numero {
  font-family: var(--fuente-titulo);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  background: var(--grad-marca);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--marca);
}

.cifra-etiqueta {
  color: var(--tinta-3);
  font-size: 0.86rem;
}

/* Cuenta regresiva hasta la próxima fecha de solicitud, que es el dato con el que más se vuelve a la portada. */
.cuenta-regresiva {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--marca);
}

/* ------------------------------------------------------------
   El camino, con su línea de tiempo y su lista de verificación.
   ------------------------------------------------------------ */

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

/*
 * Hilo de la línea de tiempo.
 * Se aplica al contenedor de la lista de etapas, cuyos hijos son tarjetas y no elementos de lista, razón por la cual las reglas apuntan a cualquier hijo directo.
 */
.linea-tiempo {
  position: relative;
  display: block;
  margin: 0;
  padding: 0 0 0 30px;
  list-style: none;
}

/* El hilo vertical une las seis etapas y deja claro que se recorren en orden. */
.linea-tiempo::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--grad-marca);
  opacity: 0.55;
}

.linea-tiempo > * {
  position: relative;
  margin-bottom: 18px;
}

.linea-tiempo > *::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 8px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--marca);
  border-radius: 50%;
  background: var(--superficie);
}

.lista-verificacion {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-verificacion > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
  color: var(--tinta-2);
}

.lista-verificacion > li:last-child { border-bottom: 0; }

.lista-verificacion .casilla {
  margin-top: 2px;
}

/* ------------------------------------------------------------
   Preparación y autoevaluación.
   ------------------------------------------------------------ */

.autoevaluacion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.autoevaluacion fieldset {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--superficie-2);
}

.autoevaluacion legend {
  padding: 0 6px;
  font-weight: 600;
  color: var(--tinta);
}

.resultado-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  align-items: center;
  gap: 10px 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
}

.resultado-area:last-child { border-bottom: 0; }

.resultado-area .barra {
  grid-column: 1 / -1;
}

/* ------------------------------------------------------------
   Atlas de estudio.
   ------------------------------------------------------------ */

/* La tarjeta de un tema y la de un bloque reservan sitio a la izquierda para la franja de familia que pinta la hoja de acentos. */
.tarjeta-tema,
.tarjeta-bloque { padding-left: 22px; }

.tarjeta-bloque .tarjeta-titulo { color: var(--fam, var(--marca)); }

/* Insignia del nivel de un tema, que acompaña siempre a la del bloque para que la dificultad no se deduzca del color. */
.insignia-nivel {
  border-color: var(--borde-fuerte);
  background: var(--superficie-2);
  color: var(--tinta-2);
}

/* Insignia del código de un curso al que prepara el tema, en monoespaciada porque es un código y no un nombre. */
.insignia-curso {
  font-family: var(--fuente-mono);
  letter-spacing: 0.04em;
}

.insignia-simulador {
  border-color: color-mix(in srgb, var(--info) 45%, transparent);
  background: color-mix(in srgb, var(--info) 12%, var(--superficie));
  color: var(--info);
}

/*
 * Fórmula de la ficha.
 * Se muestra en monoespaciada y tal cual viene del archivo de datos, dado que el sitio no lleva ningún componente que dibuje notación matemática.
 */
.formula {
  margin: 0 0 12px;
  padding: 12px 16px;
  overflow-x: auto;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--marca);
  border-radius: var(--radio-s);
  font-family: var(--fuente-mono);
  font-size: 0.92rem;
  line-height: 1.6;
}

.formula > code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* Caja en la que se monta el simulador dentro de la ficha, cuyo contenido lo pinta la hoja de los simuladores. */
.simulador-caja {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}

.simulador-lienzo { margin: 0; }

/* ------------------------------------------------------------
   Modo estudio.
   ------------------------------------------------------------ */

.pregunta-texto {
  margin: 14px 0 16px;
  font-size: 1.12rem;
  line-height: 1.5;
}

.opciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 16px;
}

/*
 * Botón de una opción.
 * El número de la izquierda es a la vez el rótulo y el atajo de teclado que la elige, de modo que la partida se puede responder sin ratón.
 */
.opcion {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--superficie);
  color: var(--tinta);
  text-align: left;
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}

.opcion:hover:not([disabled]) { border-color: var(--marca); transform: translateY(-2px); }

.opcion[disabled] { cursor: default; opacity: 1; }

.opcion-letra {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  color: var(--tinta-3);
  font-family: var(--fuente-mono);
  font-weight: 700;
}

.opcion-texto { min-width: 0; }

/* La marca escrita dice si la opción era la correcta o la elegida, de manera que el resultado no dependa de distinguir dos colores. */
.opcion-marca {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.opcion-correcta {
  border-color: var(--exito);
  background: color-mix(in srgb, var(--exito) 10%, var(--superficie));
  color: var(--exito);
}

.opcion-correcta .opcion-letra { border-color: var(--exito); color: var(--exito); }

.opcion-fallada {
  border-color: var(--peligro);
  background: color-mix(in srgb, var(--peligro) 10%, var(--superficie));
  color: var(--peligro);
}

.opcion-fallada .opcion-letra { border-color: var(--peligro); color: var(--peligro); }

/* Desglose de aciertos por bloque, tanto al terminar una partida como en el progreso acumulado. */
.barras-bloque {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin: 14px 0 0;
}

.barra-bloque {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
}

.barra-bloque-nombre { margin: 0; font-weight: 700; font-size: 0.92rem; }

.barra-bloque-cifra { margin: 0; color: var(--tinta-3); font-size: 0.82rem; }

/* ------------------------------------------------------------
   Resumen del camino en la portada y glosario del programa en la admisión.
   ------------------------------------------------------------ */

.camino {
  margin: 0 0 14px;
  padding-left: 1.4em;
  color: var(--tinta-2);
}

.camino > li { margin-bottom: 10px; }

.camino-resumen {
  display: block;
  color: var(--tinta-3);
  font-size: 0.9rem;
}

.glosario {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 0;
}

.glosario > dt {
  margin-top: 10px;
  font-weight: 700;
  color: var(--marca);
}

.glosario > dd {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.93rem;
}