/* * DESIGN & DEVELOPMENT BY: Antonio Salazar
 * Email: siemprenegoceando@gmail.com
 * -------------------------------------------------------
 */

/* ---------------------------------------------------------- */
/* --- BASE DE LA NAVBAR (POSICIÓN FIJA Y FONDO) --- */
/* ---------------------------------------------------------- */

.navbar {
    background-color: var(--color-bg-dark) !important;

    /* PROPIEDADES DE POSICIÓN FIJA (FIXED TOP) */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1020;
    min-height: var(--navbar-height);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.navbar-toggler {
    border-color: var(--color-text-dark) !important;
}

/* Estilo para el icono del Toggler (líneas internas blancas) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}


/* ---------------------------------------------------------- */
/* --- ESTILOS DE LOGO Y ENLACES DE NAVEGACIÓN --- */
/* ---------------------------------------------------------- */

.navbar-brand {
    color: var(--color-text-light) !important;
    font-weight: 700;
}

/* Renombrado: .logo-icon */
.navbar .brand-icon {
    font-size: 1.6rem;
    margin-right: 8px;
    transition: none;
}

.nav-link {
    color: var(--color-cta-action) !important;
    position: relative;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 5px;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s, transform 0.2s ease-out;
    letter-spacing: 0.5px;
}

.nav-linkk {
    color: var(--color-text-dark) !important;
    height: 60px;
}

@media (min-width: 320px) and (max-width: 480px) {
    .navbar {
        /* Asegura que la barra de navegación ocupe todo el ancho disponible */
        width: 100%;
        /* Elimina el relleno horizontal excesivo del navbar */
        padding-left: 15px;
        /* o la cantidad mínima necesaria */
        padding-right: 15px;
        /* o la cantidad mínima necesaria */
        /* Asegura que no se fuerce una barra de desplazamiento horizontal */
        box-sizing: border-box;
    }

    /* El contenedor dentro del navbar (si usas container-fluid o container) */
    .navbar>.container,
    .navbar>.container-fluid {
        /* Evita que el contenedor tenga un ancho forzado que desborde la pantalla */
        width: 100%;
        /* Asegura que el contenido se ajuste si es necesario */
        max-width: 100%;
        /* Asegúrate de que el margen negativo de las filas de Bootstrap no esté causando un desborde */
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-expand-sm .navbar-collapse {
        justify-content: flex-end;
    }

    .navbar-nav {
        margin-left: auto !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .navbar {
        /* Asegura que la barra de navegación ocupe todo el ancho disponible */
        width: 100%;
        /* Elimina el relleno horizontal excesivo del navbar */
        padding-left: 15px;
        /* o la cantidad mínima necesaria */
        padding-right: 15px;
        /* o la cantidad mínima necesaria */
        /* Asegura que no se fuerce una barra de desplazamiento horizontal */
        box-sizing: border-box;
    }

    /* El contenedor dentro del navbar (si usas container-fluid o container) */
    .navbar>.container,
    .navbar>.container-fluid {
        /* Evita que el contenedor tenga un ancho forzado que desborde la pantalla */
        width: 100%;
        /* Asegura que el contenido se ajuste si es necesario */
        max-width: 100%;
        /* Asegúrate de que el margen negativo de las filas de Bootstrap no esté causando un desborde */
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-expand-sm .navbar-collapse {
        justify-content: flex-end;
    }

    .navbar-nav {
        margin-left: auto !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .navbar {
        /* Asegura que la barra de navegación ocupe todo el ancho disponible */
        width: 100%;
        /* Elimina el relleno horizontal excesivo del navbar */
        padding-left: 15px;
        /* o la cantidad mínima necesaria */
        padding-right: 15px;
        /* o la cantidad mínima necesaria */
        /* Asegura que no se fuerce una barra de desplazamiento horizontal */
        box-sizing: border-box;
    }

    /* El contenedor dentro del navbar (si usas container-fluid o container) */
    .navbar>.container,
    .navbar>.container-fluid {
        /* Evita que el contenedor tenga un ancho forzado que desborde la pantalla */
        width: 100%;
        /* Asegura que el contenido se ajuste si es necesario */
        max-width: 100%;
        /* Asegúrate de que el margen negativo de las filas de Bootstrap no esté causando un desborde */
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-expand-md .navbar-collapse {
        justify-content: flex-end;
    }

    .navbar-nav {
        margin-left: auto !important;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .navbar {
        /* Asegura que la barra de navegación ocupe todo el ancho disponible */
        width: 100%;
        /* Elimina el relleno horizontal excesivo del navbar */
        padding-left: 15px;
        /* o la cantidad mínima necesaria */
        padding-right: 15px;
        /* o la cantidad mínima necesaria */
        /* Asegura que no se fuerce una barra de desplazamiento horizontal */
        box-sizing: border-box;
    }

    /* El contenedor dentro del navbar (si usas container-fluid o container) */
    .navbar>.container,
    .navbar>.container-fluid {
        /* Evita que el contenedor tenga un ancho forzado que desborde la pantalla */
        width: 100%;
        /* Asegura que el contenido se ajuste si es necesario */
        max-width: 100%;
        /* Asegúrate de que el margen negativo de las filas de Bootstrap no esté causando un desborde */
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-expand-md .navbar-collapse {
        justify-content: flex-end;
    }

    .navbar-nav {
        margin-left: auto !important;
    }
}

@media (min-width: 1201px) and (max-width: 1399px) {
    .navbar {
        /* Asegura que la barra de navegación ocupe todo el ancho disponible */
        width: 100%;
        /* Elimina el relleno horizontal excesivo del navbar */
        padding-left: 15px;
        /* o la cantidad mínima necesaria */
        padding-right: 15px;
        /* o la cantidad mínima necesaria */
        /* Asegura que no se fuerce una barra de desplazamiento horizontal */
        box-sizing: border-box;
    }

    /* El contenedor dentro del navbar (si usas container-fluid o container) */
    .navbar>.container,
    .navbar>.container-fluid {
        /* Evita que el contenedor tenga un ancho forzado que desborde la pantalla */
        width: 100%;
        /* Asegura que el contenido se ajuste si es necesario */
        max-width: 100%;
        /* Asegúrate de que el margen negativo de las filas de Bootstrap no esté causando un desborde */
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-expand-lg .navbar-collapse {
        justify-content: flex-end;
    }

    .navbar-nav {
        margin-left: auto !important;
    }
}

@media (min-width: 1400px) and (max-width: 2400px) {
    .navbar {
        /* Asegura que la barra de navegación ocupe todo el ancho disponible */
        width: 100%;
        /* Elimina el relleno horizontal excesivo del navbar */
        padding-left: 15px;
        /* o la cantidad mínima necesaria */
        padding-right: 15px;
        /* o la cantidad mínima necesaria */
        /* Asegura que no se fuerce una barra de desplazamiento horizontal */
        box-sizing: border-box;
    }

    /* El contenedor dentro del navbar (si usas container-fluid o container) */
    .navbar>.container,
    .navbar>.container-fluid {
        /* Evita que el contenedor tenga un ancho forzado que desborde la pantalla */
        width: 100%;
        /* Asegura que el contenido se ajuste si es necesario */
        max-width: 100%;
        /* Asegúrate de que el margen negativo de las filas de Bootstrap no esté causando un desborde */
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-expand-lg .navbar-collapse {
        justify-content: flex-end;
    }

    .navbar-nav {
        margin-left: auto !important;
    }
}