/* header.css */

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0;
    background: rgb(0, 150, 64); /* Fondo oscuro */
    z-index: 12;
    height: 60px; /*posible cambio a 60px*/
}

.navbar {
    background: transparent;
    color: white;
    --bs-navbar-padding-x: initial;
}

.navbar a {
    margin-top: -28px;
}

.navbar img {
    height: 60px;
    margin-left: 20px;
}

.navbar .navbar-brand, .navbar .nav-link {
    color: white;
}

.navbar .navbar-toggler-icon {
   /* background-color: white;*/
}

.navbar form {
    margin-left: auto; /* Alinea el formulario a la derecha */
    display: flex;
    align-items: center;
    margin-top: -25px;
}

.navbar form input {
    border-radius: 5px;
    padding: 5px 15px;
    height: 50px;
}

.navbar form button {
    border-radius: 5px;
    margin-right: 5px;
    color: #DF1995;
    border: none;
    background-color: white;
    margin-left: -49px;
}


/*ESTILOS RESPONSIVES*/

@media (max-width: 991.98px) {
    header {
        height: 60px; /* fijo en móvil */
        padding: 0 10px;
    }

    .navbar {
        display: flex;
        align-items: center; /* alinea logo y toggler */
        justify-content: space-between;
    }

    .navbar a{
        margin-top: 0px !important;
    }

        .navbar .navbar-brand {
            margin-top: 0 !important; /* elimina el -28px */
        }

        .navbar img {
            height: 55px; /* más pequeño en móvil */
            margin-left: 0;
        }

    .navbar-toggler {
       /* margin: 0 !important;*/ /* resetea márgenes */
        padding: .5rem .75rem; /* controla tamaño */
        border: none !important;
    }
   #hamburguesa{
        width: 24px;
  height: auto;
  display: block;
   }

     #navbarNav {
    position: fixed !important;
    inset: 0 !important;              /* top/right/bottom/left: 0 */
    height: 100vh;
    background: #ffffff;              /* fondo blanco, como el ref. */
    padding: 16px 20px 24px 20px;     /* respiración interna */
    overflow-y: auto;
    z-index: 1050;                    /* sobre el header */
    border-radius: 0 !important;      /* sin esquinas redondeadas */
    box-shadow: none !important;
  }
        #navbarNav.collapse:not(.show) {
            position: static !important;
            inset: auto !important;
            height: auto !important;
        }


    .bi-tiktok,
    .bi-instagram,
    .bi-facebook {
        color: #525252 !important;
        margin: -40px 0px 0px 5px;

    }
    .nav-item.socialt,
    .nav-item.sociali,
    .nav-item.socialf {
        display: none !important;
    }

    /* Específico para el logo dentro del menú móvil */
    .navbar .logo-menu {
        height: 28px !important; /* ajusta el tamaño que desees */
        margin-top: 5px; /* opcional */
        margin-bottom: 10px; /* opcional */
    }

    /* Cabecera: logo + botón cerrar */
    .mobile-overlay-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 24px 6px 24px;
    }

        .mobile-overlay-head .logo-menu {
            height: 34px;
            width: auto;
            display: block;
        }

    .mobile-close {
        opacity: .7;
    }

        .mobile-close:focus {
            box-shadow: none;
        }

    /* Línea verde debajo del logo */
    .mobile-divider {
        height: 3px;
        background: #009640;
        border: 0;
        margin: 0 24px 8px 24px;
        opacity: .85;
    }

    /* Wrapper interno para márgenes laterales */
    .menu-sheet {
        padding: 0 24px 16px 24px;
    }

        /* Ítems grandes: look & feel */
        .menu-sheet .navbar-nav > .nav-item {
            width: 100%;
            border-bottom: 1px solid #f0f0f0;
        }

        .menu-sheet .nav-link.menu-tittle {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 4px;
            margin: 0;
            font-size: 17px;
            color: #3a3a3a !important;
            font-weight: 500;
        }

            .menu-sheet .nav-link.menu-tittle:hover {
                background: #f8f9fa;
            }

        /* Chevron grande a la derecha (usando el ::after de Bootstrap) */
        .menu-sheet .dropdown-toggle::after {
            margin-left: 8px;
            border: solid #7a7a7a;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 4px;
            transform: rotate(45deg); /* caret tipo chevron */
            content: "";
        }

        .menu-sheet .dropdown-toggle[aria-expanded="true"]::after {
            transform: rotate(-135deg); /* gira hacia arriba al abrir */
        }

        /* Submenús ocupan ancho completo, sin borde y con padding interno */
        .menu-sheet .dropdown-menu {
            position: static !important;
            float: none;
            transform: none !important;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            padding: 0 0 10px 0;
            margin: 0 0 10px 0;
        }

        .menu-sheet .dropdown-item {
            padding: 12px 0 12px 12px;
            font-size: 18px;
        }

        .social-group-mobile{
            justify-content: center;
            padding: 0px 0 10px 0;

        }
    .mobile-close {
        background: none;
        border: none;
        font-size: 26px; /* tamaño de la X */
        font-weight: 300; /* delgada, estilo pro */
        color: #6c757d; /* gris elegante */
        cursor: pointer;
        padding: 0;
        line-height: 1;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .mobile-close:hover {
            color: #000; /* leve contraste al tocar */
        }

    #btnIngresar,
    #btnIngresar:hover {
        color: #009640 !important;
    }

    /* El caret (pseudo-elemento) no bloquea el toque */
    .menu-sheet .dropdown-toggle::after {
        pointer-events: none;
    }

    /* Asegura visibilidad del menú cuando Bootstrap añade .show */
    .menu-sheet .dropdown-menu.show {
        display: block;
    }

    /* Un poco más de zona táctil a la derecha del ítem */
    .menu-sheet .nav-link.menu-tittle {
        padding-right: 14px;
    }

    /* Quitar el fondo azul de los dropdown items activos o seleccionados */
    .dropdown-menu .dropdown-item:active,
    .dropdown-menu .dropdown-item.active,
    .dropdown-menu .dropdown-item.show {
        background-color: transparent !important;
        color: #009640 !important; /* verde Servientrega */
    }

    /* También quitar el hover azul */
    .dropdown-menu .dropdown-item:hover {
        /*background-color: rgba(0, 150, 64, 0.08) !important;*/ /* efecto suave opcional */
        color: #009640 !important;
    }

}
/* Bloquea el "abrir por hover" en móvil */
/*@media (hover: none), (pointer: coarse) {
    .navbar .dropdown:hover .dropdown-menu {
        display: none !important;
    }
}
*/
/* Si quieres hover en desktop, actívalo SOLO ahí */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block !important;
    }
}


/* ====== Desktop (>=992px): menú centrado + redes a la derecha ====== */
@media (min-width: 992px) {

    /* El contenedor de ambos ULs */
    .menu-sheet {
        display: flex;
        align-items: center;
        width: 100%;
        flex-wrap: nowrap; /* evita que redes se vayan abajo */
    }

        /* UL del menú */
        .menu-sheet .menu-primary {
            flex: 1 1 auto;
            display: flex;
            justify-content: center; /* centra el grupo del menú */
            align-items: center;
            gap: 1rem;
            min-width: 0;
        }

        /* UL de redes */
        .menu-sheet .menu-social {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            margin-left: auto; /* las manda a la derecha */
            gap: .5rem;
            padding-left: 1rem;
        }

    /* Quita el empuje fijo que te desalineaba todo */
    .ms-init {
        margin-left: 0 !important;
    }

    /* Para que el texto del menú no rompa líneas */
    .menu-sheet .menu-primary .nav-link {
        white-space: nowrap;
    }
}