/**
 * Árbol de destinos de la landing /ciudad/.
 * Provincia > Ciudad > Localidad, con guías verticales tipo "tree view".
 */

.csmc-city-tree {
    --csmc-tree-navy: #17324d;
    --csmc-tree-text: #33475b;
    --csmc-tree-line: #d8e1e9;
    --csmc-tree-accent: #4ecdc4;

    max-width: 760px;
    margin: 0 0 60px;
    color: var(--csmc-tree-text);
    font-size: 16px;
    line-height: 1.4;
}

.csmc-city-tree__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.csmc-city-tree__item {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Filas ------------------------------------------------------------------ */

.csmc-city-tree__row {
    display: flex;
    align-items: baseline;
    padding: 7px 0;
}

.csmc-city-tree__label {
    flex: 0 1 auto;
}

.csmc-city-tree__link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.csmc-city-tree__link:hover,
.csmc-city-tree__link:focus {
    color: var(--csmc-tree-navy);
    border-bottom-color: var(--csmc-tree-accent);
    text-decoration: none;
}

.csmc-city-tree__link:focus-visible {
    outline: 2px solid var(--csmc-tree-accent);
    outline-offset: 3px;
    border-bottom-color: transparent;
}

/* Nivel 1 · Provincia ---------------------------------------------------- */

.csmc-city-tree__list--root > .csmc-city-tree__item + .csmc-city-tree__item {
    margin-top: 26px;
}

.csmc-city-tree__row--province {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--csmc-tree-line);
}

.csmc-city-tree__row--province .csmc-city-tree__label {
    font-size: 19px;
    font-weight: 700;
    color: var(--csmc-tree-navy);
    letter-spacing: -0.01em;
}

/* Niveles anidados · guías verticales ------------------------------------ */

.csmc-city-tree__list--city,
.csmc-city-tree__list--locality {
    position: relative;
    margin-left: 9px;
    padding-left: 22px;
}

/* Guía vertical: se corta a la altura del último hijo. */
.csmc-city-tree__list--city > .csmc-city-tree__item::before,
.csmc-city-tree__list--locality > .csmc-city-tree__item::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--csmc-tree-line);
}

.csmc-city-tree__list--city > .csmc-city-tree__item:last-child::before,
.csmc-city-tree__list--locality > .csmc-city-tree__item:last-child::before {
    bottom: auto;
    height: 18px;
}

/* Guía horizontal hacia cada fila. */
.csmc-city-tree__list--city > .csmc-city-tree__item > .csmc-city-tree__row::before,
.csmc-city-tree__list--locality > .csmc-city-tree__item > .csmc-city-tree__row::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 18px;
    width: 15px;
    height: 1px;
    background: var(--csmc-tree-line);
}

.csmc-city-tree__list--city > .csmc-city-tree__item > .csmc-city-tree__row {
    position: relative;
}

.csmc-city-tree__list--locality > .csmc-city-tree__item > .csmc-city-tree__row {
    position: relative;
}

/* Nivel 2 · Ciudad ------------------------------------------------------- */

.csmc-city-tree__list--city {
    margin-top: 6px;
}

.csmc-city-tree__item--city > .csmc-city-tree__row .csmc-city-tree__label {
    font-size: 16px;
    font-weight: 600;
    color: var(--csmc-tree-navy);
}

/* Nivel 3 · Localidad ---------------------------------------------------- */

.csmc-city-tree__item--locality > .csmc-city-tree__row .csmc-city-tree__label {
    font-size: 15px;
    font-weight: 400;
}

@media (max-width: 600px) {
    .csmc-city-tree {
        font-size: 15px;
    }

    .csmc-city-tree__list--city,
    .csmc-city-tree__list--locality {
        margin-left: 5px;
        padding-left: 16px;
    }

    .csmc-city-tree__list--city > .csmc-city-tree__item::before,
    .csmc-city-tree__list--locality > .csmc-city-tree__item::before,
    .csmc-city-tree__list--city > .csmc-city-tree__item > .csmc-city-tree__row::before,
    .csmc-city-tree__list--locality > .csmc-city-tree__item > .csmc-city-tree__row::before {
        left: -16px;
    }

    .csmc-city-tree__list--city > .csmc-city-tree__item > .csmc-city-tree__row::before,
    .csmc-city-tree__list--locality > .csmc-city-tree__item > .csmc-city-tree__row::before {
        width: 11px;
    }
}