/*
==================================================
 PM UI Framework - Navbar
 File: navbar.css
 Version: 0.1.0
==================================================
*/


/* ===============================================
   NAVBAR BASE
=============================================== */

.pm-navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pm-space-4, 1rem);

    padding: var(--pm-space-3, 0.75rem)
             var(--pm-space-5, 1.25rem);

    background: var(--pm-bg, #ffffff);
    border-bottom: 1px solid var(--pm-border, #e0e0e0);

    position: relative;
    z-index: 1000;
}


/* ===============================================
   NAVBAR BRAND
=============================================== */

.pm-navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--pm-space-2, .5rem);

    font-size: var(--pm-font-size-lg, 1.25rem);
    font-weight: 700;

    color: var(--pm-text, #212121);

    text-decoration: none;
    white-space: nowrap;
}


.pm-navbar-brand:hover {
    color: var(--pm-primary, #2E7D32);
}



/* ===============================================
   NAVBAR MENU
=============================================== */

.pm-navbar-menu {
    display: flex;
    align-items: center;
    gap: var(--pm-space-4, 1rem);

    margin: 0;
    padding: 0;

    list-style: none;
}


.pm-navbar-item {
    position: relative;
}


.pm-navbar-link {

    display: inline-flex;
    align-items: center;

    padding: .5rem .75rem;

    color: var(--pm-text, #212121);

    font-size: var(--pm-font-size-sm, .95rem);
    font-weight: 500;

    text-decoration: none;

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


.pm-navbar-link:hover {

    color: var(--pm-primary, #2E7D32);

    background: rgba(46,125,50,.08);

    border-radius: var(--pm-radius-md, .5rem);
}


.pm-navbar-link.active {

    color: var(--pm-primary, #2E7D32);

    font-weight: 700;
}

/* ===============================================
   NAVBAR DROPDOWN
=============================================== */

.pm-navbar-dropdown {
    position: relative;
}


/* Flecha del dropdown */

.pm-navbar-dropdown > .pm-navbar-link::after {

    content: "";

    display: inline-block;

    width: .45rem;
    height: .45rem;

    margin-left: .5rem;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg) translateY(-2px);

    transition: transform .2s ease;
}


.pm-navbar-dropdown:hover > .pm-navbar-link::after {

    transform:
        rotate(225deg)
        translateY(-2px);

}



/* ===============================================
   SUBMENU
=============================================== */

.pm-navbar-submenu {

    position: absolute;

    top: calc(100% + .5rem);

    left: 0;

    min-width: 220px;

    padding: .5rem;

    margin: 0;

    list-style: none;


    background: var(--pm-bg, #ffffff);

    border: 1px solid var(--pm-border, #e0e0e0);

    border-radius: var(--pm-radius-md, .5rem);

    box-shadow:
        0 10px 25px rgba(0,0,0,.10);


    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px);


    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;


    z-index: 1100;
}



/* Mostrar submenu */

.pm-navbar-dropdown:hover > .pm-navbar-submenu {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}



/* Items submenu */

.pm-navbar-submenu-item {

    width: 100%;
}


.pm-navbar-submenu-link {

    display: flex;

    align-items: center;

    width: 100%;


    padding: .65rem .75rem;


    color: var(--pm-text, #212121);


    font-size: var(--pm-font-size-sm, .95rem);


    text-decoration: none;


    border-radius:
        var(--pm-radius-sm, .35rem);


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

}



.pm-navbar-submenu-link:hover {

    background:
        rgba(46,125,50,.08);


    color:
        var(--pm-primary, #2E7D32);

}

/* ===============================================
   NAVBAR ACTIONS
=============================================== */

.pm-navbar-actions {

    display: flex;

    align-items: center;

    gap:
        var(--pm-space-3, .75rem);

}



/* ===============================================
   NAVBAR TOGGLE BUTTON
=============================================== */

.pm-navbar-toggle {

    display: none;


    align-items: center;

    justify-content: center;


    width: 42px;

    height: 42px;


    padding: 0;


    background: transparent;


    border: 1px solid var(--pm-border, #e0e0e0);


    border-radius:
        var(--pm-radius-md, .5rem);


    cursor: pointer;


    transition:
        background-color .2s ease,
        border-color .2s ease;

}



.pm-navbar-toggle:hover {

    background:
        rgba(46,125,50,.08);


    border-color:
        var(--pm-primary, #2E7D32);

}



/* Icono hamburguesa */

.pm-navbar-toggle-icon {

    position: relative;


    width: 22px;

    height: 2px;


    background:
        var(--pm-text, #212121);


    display: block;


    transition:
        transform .2s ease;

}



.pm-navbar-toggle-icon::before,
.pm-navbar-toggle-icon::after {

    content: "";

    position: absolute;


    left: 0;


    width: 22px;

    height: 2px;


    background:
        var(--pm-text, #212121);


    transition:
        transform .2s ease;

}



.pm-navbar-toggle-icon::before {

    top: -7px;

}



.pm-navbar-toggle-icon::after {

    top: 7px;

}



/* ===============================================
   NAVBAR MOBILE CONTAINER
=============================================== */

.pm-navbar-mobile {

    display: none;


    width: 100%;


    padding:

        var(--pm-space-3, .75rem);


    background:
        var(--pm-bg, #ffffff);


    border-top:

        1px solid var(--pm-border, #e0e0e0);

}



.pm-navbar-mobile.active {

    display: block;

}

/* ===============================================
   NAVBAR RESPONSIVE
=============================================== */

@media (max-width: 768px) {


    .pm-navbar {

        flex-wrap: wrap;

        padding:
            var(--pm-space-3, .75rem);

    }



    .pm-navbar-toggle {

        display: inline-flex;

    }



    .pm-navbar-menu {

        display: none;


        flex-direction: column;


        align-items: stretch;


        width: 100%;


        gap: .25rem;


        margin-top:
            var(--pm-space-3, .75rem);

    }



    .pm-navbar-menu.active {

        display: flex;

    }



    .pm-navbar-item {

        width: 100%;

    }



    .pm-navbar-link {

        width: 100%;


        justify-content: space-between;


        padding:
            .75rem 1rem;

    }



    /* Dropdown móvil */

    .pm-navbar-submenu {

        position: static;


        width: 100%;


        margin-top: .25rem;


        padding-left: 1rem;


        box-shadow: none;


        border-radius:
            var(--pm-radius-sm, .35rem);


        opacity: 1;


        visibility: visible;


        transform: none;


        display: none;

    }



    .pm-navbar-dropdown.open > .pm-navbar-submenu {

        display: block;

    }



    .pm-navbar-dropdown > .pm-navbar-link::after {

        margin-left: auto;

    }



    .pm-navbar-actions {

        margin-left: auto;

    }


}

/* ===============================================
   NAVBAR STICKY
=============================================== */

.pm-navbar-sticky {

    position: sticky;

    top: 0;

    left: 0;

    width: 100%;

    backdrop-filter: blur(10px);

}



/* ===============================================
   NAVBAR DARK VARIANT
=============================================== */

.pm-navbar-dark {

    background:
        var(--pm-dark, #212121);

    border-color:
        rgba(255,255,255,.12);

}



.pm-navbar-dark .pm-navbar-brand,
.pm-navbar-dark .pm-navbar-link {

    color:
        #ffffff;

}



.pm-navbar-dark .pm-navbar-link:hover {

    background:
        rgba(255,255,255,.12);


    color:
        #ffffff;

}



.pm-navbar-dark .pm-navbar-toggle {

    border-color:
        rgba(255,255,255,.25);

}



.pm-navbar-dark .pm-navbar-toggle-icon,
.pm-navbar-dark .pm-navbar-toggle-icon::before,
.pm-navbar-dark .pm-navbar-toggle-icon::after {

    background:
        #ffffff;

}



/* ===============================================
   NAVBAR TRANSPARENT
=============================================== */

.pm-navbar-transparent {

    background:
        transparent;

    border-bottom:
        none;

}



/* ===============================================
   NAVBAR DIVIDER
=============================================== */

.pm-navbar-divider {

    width: 1px;

    height: 28px;


    background:
        var(--pm-border, #e0e0e0);


    margin:
        0 .5rem;

}



/* ===============================================
   ACCESSIBILITY
=============================================== */

.pm-navbar-link:focus-visible,
.pm-navbar-toggle:focus-visible {

    outline:

        3px solid
        rgba(25,118,210,.35);


    outline-offset:
        2px;

}



/* ===============================================
   PRINT
=============================================== */

@media print {

    .pm-navbar {

        display: none;

    }

}