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

.cp-navbar{

    background: var(--cp-surface);

    min-height:80px;

    position:sticky;

    top:0;

    z-index:1000;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}


/*=========================================================
LOGO
=========================================================*/

.cp-logo{

    font-family: var(--cp-font-heading);

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--cp-text-primary) !important;

    text-decoration: none;

    transition: color .3s ease;

}

.cp-logo:hover{

    color: var(--cp-color-primary) !important;

}


/*=========================================================
ENLACES DEL MENÚ
=========================================================*/

.cp-nav-link{

    font-family: var(--cp-font-body);

    font-size: 1rem;

    font-weight: 500;

    color: var(--cp-text-primary) !important;

    margin: 0 .5rem;

    transition: all .3s ease;

}

.cp-nav-link:hover{

    color: var(--cp-color-primary) !important;

}

.cp-nav-link.active{

    color: var(--cp-color-primary) !important;

}


/*=========================================================
LOGO DEL NAVBAR
=========================================================*/

.cp-navbar-logo{

    width:auto;

    height:65px;

    display:block;

    transform:scale(1.35);

}


/*=========================================================
LOGO EN DISPOSITIVOS MÓVILES
=========================================================*/

@media (max-width:767.98px){

    .cp-navbar-logo{

        height:50px;

        transform:scale(1.35);

    }

}


/*=========================================================
INFORMACIÓN DE SESIÓN
=========================================================*/

.cp-session-user{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    margin-left:1rem;

    line-height:1.35;

    font-size:0.8rem;

    color:var(--cp-text-primary);

}

.cp-session-user div{

    white-space:nowrap;

}

.cp-session-user strong{

    font-weight:700;

}

.cp-session-user span{

    font-weight:400;

}

.cp-session-user .cp-btn-primary{

    margin-left:0;

}


/*=========================================================
   DISTRIBUCIÓN DEL NAVBAR EN ESCRITORIO
=========================================================*/

@media (min-width:992px){

    /*
    El navbar utiliza todo el ancho disponible.
    */

    .cp-navbar > .container{

        width:100%;

        max-width:none;

        padding-left:2rem;

        padding-right:2rem;

    }


    /*
    La zona de navegación ocupa todo el espacio
    disponible entre el logo y los botones.
    */

    .cp-navbar .navbar-collapse{

        position:relative;

        flex-grow:1;

    }


    /*
    CONTENEDOR DE LOS ELEMENTOS DEL NAVBAR

    Los enlaces principales se mantienen centrados.
    */

    .cp-navbar .navbar-nav{

        position:relative;

        width:100%;

        min-height:80px;

        display:flex;

        align-items:center;

        justify-content:center;

        margin:0 !important;

        padding:0 !important;

        white-space:nowrap;

    }


    /*
    =========================================================
    CARRITO
    =========================================================

    Carrito queda inmediatamente a la izquierda
    del botón Cliente.
    */

    .cp-navbar .navbar-nav > li:has(a[data-cp-cart="true"]){

        position:absolute !important;

        right:160px !important;

        top:50% !important;

        transform:translateY(-50%) !important;

        margin:0 !important;

    }


    /*
    =========================================================
    CLIENTE
    =========================================================

    Cliente queda completamente al extremo derecho.
    */

    .cp-navbar .navbar-nav > li[data-cp-user-menu="true"]{

        position:absolute !important;

        right:0 !important;

        top:50% !important;

        transform:translateY(-50%) !important;

        margin:0 !important;

    }


    /*
    =========================================================
    BOTÓN INICIAR SESIÓN
    =========================================================

    Cuando NO existe sesión, el botón queda
    al extremo derecho.
    */

    .cp-navbar .navbar-nav > li:has(> a.cp-btn-primary){

        margin-left:auto !important;

        margin-right:0 !important;

    }

}

/*=========================================================
AJUSTE PARA BOTONES
=========================================================*/

@media (min-width:992px){

    .cp-navbar .navbar-nav > li:has([data-cp-cart="true"]) .btn{

        margin:0;

    }

    .cp-navbar .navbar-nav > li:has([data-cp-user-menu="true"]) .btn{

        margin:0;

    }

}