/* =========================================================
   MODERN BREADCRUMB
   Bootstrap 5 + Font Awesome 6
   Material Design 3 inspired
   ========================================================= */
/*
.modern-breadcrumb {
    --breadcrumb-bg: #f7f7fb;
    --breadcrumb-border: #e5e5ed;
    --breadcrumb-text: #646675;
    --breadcrumb-hover: #2f3349;
    --breadcrumb-active: #2f3349;
    --breadcrumb-primary: #6750a4;

    background: var(--breadcrumb-bg);
    border: 1px solid var(--breadcrumb-border);
    border-radius: 16px;
    box-shadow:
            0 1px 2px rgba(0, 0, 0, .04);

    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 6px 10px;
    overflow-x: auto;
}
*/

.modern-breadcrumb {
    --breadcrumb-bg: #f8f8fb;
    --breadcrumb-border: #e7e7ed;

    --breadcrumb-text: #6b6d7a;
    --breadcrumb-hover: #2f3349;

    --breadcrumb-active: #2f3349;
    --breadcrumb-primary: #2f3349;

    background:
            linear-gradient(
                    135deg,
                    #fafafd 0%,
                    #f5f5f9 100%
            );

    border: 1px solid var(--breadcrumb-border);

    box-shadow:
            0 2px 5px rgba(47, 51, 73, .04),
            0 1px 2px rgba(0, 0, 0, .03);

    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 6px 10px;
    overflow-x: auto;
    border-radius: 6px;
}



/* Bootstrap breadcrumb */

.modern-breadcrumb .breadcrumb {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    white-space: nowrap;
}


/* Cada elemento */

.modern-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;

    font-size: .875rem;
    font-weight: 500;

    color: var(--breadcrumb-text);
}


/* Elimina el separador original de Bootstrap */

.modern-breadcrumb
.breadcrumb-item + .breadcrumb-item::before {
    content: "\f054";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    color: #9b9ca8;

    font-size: .65rem;

    padding: 0 .65rem;
}


/* Links */

.modern-breadcrumb .breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 36px;
    padding: .45rem .75rem;

    color: var(--bs-primary);
    background-color: transparent;
    border-color: var(--bs-primary) 1px;

    /*color: var(--breadcrumb-text);*/
    text-decoration: none;
    border-radius: 10px;

    transition:
            background-color .2s ease,
            color .2s ease,
            transform .2s ease;
}


/* Iconos */

.modern-breadcrumb .breadcrumb-link i {
    font-size: .85rem;
}


/* Hover */

.modern-breadcrumb .breadcrumb-link:hover {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.3);
    /*
    background: rgba(47, 51, 73, .07);
    */

    transform: translateY(-1px);
}


/* Página actual */
.modern-breadcrumb
.breadcrumb-item.active {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    min-height: 36px;
    padding: .45rem .85rem;
    border-radius: 6px;

    color: var(--bs-primary);
    background:
            linear-gradient(
                    135deg,
                    rgba(var(--bs-primary-rgb), .12),
                    rgba(47, 51, 73, .06)
            );

    border: 1px solid rgba(var(--bs-primary-rgb), .08);
    box-shadow:
            0 1px 2px rgba(var(--bs-primary-rgb), .05);
}

/*
.modern-breadcrumb
.breadcrumb-item.active {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    min-height: 36px;
    padding: .45rem .85rem;

    color: var(--breadcrumb-active);
    background: rgba(103, 80, 164, .10);
    border-radius: 10px;
}
*/


/* Icono página actual */

.modern-breadcrumb
.breadcrumb-item.active i {
    color: var(--bs-primary);

    font-size: .85rem;
}


/* Focus accesible */

.modern-breadcrumb .breadcrumb-link:focus-visible {
    outline: 3px solid rgba(103, 80, 164, .25);
    outline-offset: 2px;
}


/* Responsive */

@media (max-width: 576px) {

    .modern-breadcrumb {
        min-height: 44px;
        padding: 5px 6px;

        border-radius: 14px;
    }

    .modern-breadcrumb .breadcrumb-link {
        padding: .4rem .55rem;
    }

    .modern-breadcrumb .breadcrumb-item {
        font-size: .8rem;
    }

    .modern-breadcrumb
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 .4rem;
    }

}