/*
 * Navegacion por lugar: migas arriba del titulo y escalon de abajo debajo.
 *
 * Las dos viven dentro de .results-header, que es un panel oscuro, asi que
 * ambas se pintan en claro sobre teal. Comparten fichero porque son la misma
 * idea vista al derecho y al reves, y siempre se cargan juntas.
 */

/* --- Migas ---------------------------------------------------------- */

.breadcrumb {
    margin-bottom: var(--space-4);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* La barra separadora se dibuja aqui y no en el marcado: es decoracion, y un
   lector de pantalla no tiene por que leerla. */
.breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    color: rgba(255, 255, 255, 0.35);
}

.breadcrumb__link {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
    color: #fff;
    border-bottom-color: var(--sun);
}

.breadcrumb__current {
    color: rgba(255, 255, 255, 0.55);
}

/* --- Escalon de abajo ------------------------------------------------ */

.place-nav {
    margin-top: var(--space-5);
}

.place-nav__label {
    display: block;
    margin-bottom: var(--space-3);
    color: rgba(255, 255, 255, 0.6);
}

.place-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Pildoras y no una lista corrida: en una provincia con doscientos municipios
   la lista corrida es un muro, y en pildoras se barre con la vista. */
.place-nav__link {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--r-pill);
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.place-nav__link:hover,
.place-nav__link:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--sun);
}

/* --- Plegado cuando la lista es larga -----------------------------------
   Una provincia puede tener cien municipios. Se pliega con <details>, igual
   que en el panel de filtros: sin JavaScript y con los enlaces siempre en el
   HTML.
   ------------------------------------------------------------------------ */

.place-nav__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
}

.place-nav__summary::-webkit-details-marker {
    display: none;
}

.place-nav__summary .place-nav__label {
    margin-bottom: 0;
}

/* Cuantos hay dentro: sin el numero, quien pliega no sabe si merece la pena. */
.place-nav__count {
    padding: 0.05rem 0.5rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--fs-xs);
    font-weight: 700;
}

/* Chevron propio, como en los filtros. */
.place-nav__summary::after {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    margin-bottom: 0.15rem;
    border-right: 2px solid rgba(255, 255, 255, 0.6);
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    transform: rotate(45deg);
    transition: transform var(--dur) var(--ease);
}

.place-nav__fold[open] > .place-nav__summary::after {
    transform: rotate(-135deg);
}

.place-nav__fold .place-nav__list {
    margin-top: var(--space-3);
    max-height: 15rem;
    overflow-y: auto;
    /* Mismo motivo que en el panel de filtros: pedir overflow-y saca el eje X
       de "visible" y aparece una barra horizontal que no pinta nada. */
    overflow-x: hidden;
    padding-right: var(--space-2);
}