/* PIEZA: migas de pan
 * ---------------------------------------------------------------------------
 * Deliberadamente discreta. No introduce ni un color ni una tipografia nueva:
 * usa los que ya tiene el sitio, medidos sobre las paginas vivas el 2026-09-02.
 *
 *   #595959  gris del pie      -> texto de la ruta
 *   #1E72BD  azul de enlaces   -> solo al pasar por encima
 *
 * La ruta tiene que leerse como contexto, no competir con el titulo que va
 * justo debajo.
 * --------------------------------------------------------------------------- */

.dl-migas {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #595959;
}

.dl-migas__ruta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
}

/* Rank Math mete su propia envoltura dentro; se neutraliza para que no
   duplique margenes ni rompa la fila. */
.dl-migas__ruta > p,
.dl-migas__ruta > nav,
.dl-migas__ruta > div {
  display: contents;
  margin: 0;
}

.dl-migas a {
  color: #595959;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dl-migas a:hover {
  color: #1E72BD;
  border-bottom-color: #1E72BD;
}

/* El foco se ve al instante y nunca se anima: quien navega con teclado
   necesita saber donde esta, no una transicion bonita. */
.dl-migas a:focus-visible {
  outline: 2px solid #1E72BD;
  outline-offset: 2px;
  border-radius: 2px;
  transition: none;
}

.dl-migas__sep {
  color: #B9BFC6;
  user-select: none;
}

.dl-migas__actual {
  color: #3A3A3A;
}

/* La ultima miga (el titulo del articulo) ya NO se pinta en ninguna anchura:
   se quita desde el ajuste `breadcrumbs_remove_post_title` de Rank Math, que
   es mejor sitio que taparlo con CSS. Repetir el titulo justo encima del
   titulo no aporta nada, y asi la ruta cabe siempre en una linea.
   Lo bueno del ajuste: Rank Math lo quita de la ruta VISIBLE pero lo mantiene
   en el `BreadcrumbList`, asi que los datos estructurados siguen completos. */
@media (max-width: 600px) {
  .dl-migas {
    font-size: 0.78125rem;
    margin-bottom: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dl-migas a { transition: none; }
}