/* ATERRIZA EU, ruta "Conseguir piso en Alemania" (11/10/2026).
   Solo lo que no existe en paginas.css / componentes.css; todo con variables de tokens.css, movil primero. */

.aviso--ruta { margin-block: var(--espacio-4); }

.indice-ruta { margin-block: var(--espacio-5); }
.indice-ruta ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.indice-ruta a {
  display: inline-block;
  padding: var(--espacio-2) var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-completo);
  background: var(--color-superficie);
  color: var(--color-carbon);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  text-decoration: none;
}
.indice-ruta a:hover { border-color: var(--color-salvia); }

.progreso-ruta {
  padding-block: var(--espacio-3);
  margin-block: var(--espacio-4);
  border-bottom: 1px solid var(--color-borde);
}
.progreso-ruta__texto { margin: 0 0 var(--espacio-2); font-weight: var(--peso-semibold); font-size: var(--texto-sm); }
.progreso-ruta__barra {
  display: block;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: var(--radio-completo);
  overflow: hidden;
  background: var(--color-carbon-15);
  accent-color: var(--color-salvia);
}
.progreso-ruta__barra::-webkit-progress-bar { background: var(--color-carbon-15); }
.progreso-ruta__barra::-webkit-progress-value { background: var(--color-completado-fg); }
.progreso-ruta__barra::-moz-progress-bar { background: var(--color-completado-fg); }
.progreso-ruta__final {
  margin: var(--espacio-2) 0 0;
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-sm);
  background: var(--color-completado-bg);
  color: var(--color-completado-fg);
  font-weight: var(--peso-semibold);
  font-size: var(--texto-sm);
}

.etapa {
  margin: 0 0 var(--espacio-5);
  padding: var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
  min-inline-size: 0;
}
.etapa > legend {
  padding-inline: var(--espacio-2);
  font-weight: var(--peso-extrabold);
  font-size: var(--texto-md);
  color: var(--color-carbon);
}
.etapa__nota { margin-block: 0 var(--espacio-3); font-size: var(--texto-sm); color: var(--color-carbon-70); }

.casillas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-2); }
.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  border-radius: var(--radio-sm);
  background: var(--color-crema);
}
.casilla input {
  flex: none;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  margin-block-start: 0.15rem;
  accent-color: var(--color-completado-fg);
}
.casilla label { flex: 1; min-inline-size: 0; font-weight: var(--peso-semibold); overflow-wrap: anywhere; cursor: pointer; }
.casilla__detalle { display: block; margin-block-start: var(--espacio-1); font-weight: var(--peso-regular); font-size: var(--texto-sm); color: var(--color-carbon-70); }
.casilla__detalle a, .casilla label a { color: inherit; text-decoration: underline; }
.casilla input:checked + label { color: var(--color-completado-fg); }

.acciones-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3); }
.boton-ruta {
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  padding: var(--espacio-2) var(--espacio-4);
  border: 1px solid var(--color-carbon-30);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
  color: var(--color-carbon);
  cursor: pointer;
}
.boton-ruta:hover { border-color: var(--color-carbon); }
.ayuda-ruta { font-size: var(--texto-sm); color: var(--color-carbon-70); }

.lista-ruta { padding-inline-start: var(--espacio-5); }
.lista-ruta li { margin-block-end: var(--espacio-3); }

.glosario { display: grid; gap: var(--espacio-3); margin: 0; }
.glosario__item {
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  scroll-margin-block-start: var(--espacio-10);
}
.glosario dt { font-weight: var(--peso-extrabold); color: var(--color-carbon); }
.glosario dd { margin: var(--espacio-1) 0 0; font-size: var(--texto-sm); color: var(--color-carbon-70); }
.glosario dd a { color: inherit; text-decoration: underline; }

@media (min-width: 720px) {
  .glosario { grid-template-columns: repeat(2, 1fr); }
}