/* Responsive para el formulario */
@media (max-width: 2021px) {
    .user-actions-mobile {
        right: 20%;
        /* Ajusta la posición del nuevo botón de usuario */
    }

    .carrito-container {
        right: 20%;
    }

}


@media (max-width: 1801px) {
    .user-actions-mobile {
        right: 20%;
        /* Ajusta la posición del nuevo botón de usuario */
    }

    .carrito-container {
        right: 20%;
    }



}

@media (max-width: 1600px) {
    .user-actions-mobile {
        right: 15%;
    }

    .carrito-container {
        right: 20%;
    }
}

@media (max-width: 1400px) {
    .carrito-container {
        right: 25%;
    }
}

@media (max-width: 1150px) {
    #welcome-message {
        position: absolute;
        left:29%; 
    } 
}

@media (max-width: 1080px) {

    #logo-empresa {
        left: 1%;
    }
     .buscador-carrito h1 {
        position: absolute;
        top: -20px;
        margin-left: -65%;
    }  

    #welcome-message {
        position: absolute;
        top: 10px;
        
    } 
}

@media (max-width: 1020px) {

    #logo-empresa {
        left: -1%;
    }
     .buscador-carrito h1 {
        position: absolute;
        top: -20px;
        margin-left: -70%;
    }  

   
}

@media (max-width: 1000px) {
    .user-session-controls {
        display: none;
        /* Ocultamos los botones de escritorio en móvil */
    }

    .session-btn {
    margin-right: 0px;
}

    .user-actions-mobile {
        display: block;
        /* Mostramos el botón de usuario móvil */
        position: absolute;
        right: 20px;
        /* Lo posicionamos cerca del carrito */
        top: 15px;
    }

        .buscador-carrito {
        margin-left: 0px;
     }

     .buscador-carrito h1 {
        position: absolute;
        top: -20px;
        margin-left: -54%;
    } 

    .carrito-container {
        right: 15%;
    }

    .user-menu-toggle-btn {
        margin-top: 4px;
        margin-right: 60px;


    }

  /* --- INICIO: Estilos para el mensaje de bienvenida --- */
   .welcome-message {
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    margin-right: 20px;
    /* Espacio entre el mensaje y los botones */
    white-space: nowrap;
    /* Evita que el nombre se parta en dos líneas */
   }



    .welcome-message {
        display: none;
        /* Ocultamos el mensaje en la barra principal en móvil */
    }
}

@media (max-width: 992px) {
    .user-actions-mobile {
        right: 10%;
    }

    .carrito-container {
        right: 25%;
    }
}

@media (max-width: 930px) {

     .buscador-carrito h1 {
        margin-left: -50%;
    }  


     .carrito-container {
        right: 15%;
    }

    .user-menu-toggle-btn {
        margin-top: 4px;
        margin-right: 30px;


    }

      .user-actions-mobile {
        display: block;
        /* Mostramos el botón de usuario móvil */
        position: absolute;
        right: 20px;
        /* Lo posicionamos cerca del carrito */
        top: 15px;
    }
}

@media (max-width: 900px) {

      .buscador-carrito {
        margin-left: 20px;
     }

     .buscador-carrito h1 {
        position: absolute;
        top: -20px;
        margin-left: -54%;
    } 

    .carrito-container {
        right: 15%;
    }

    .user-menu-toggle-btn {
        margin-top: 4px;
        margin-right: 30px;


    }

      .user-actions-mobile {
        display: block;
        /* Mostramos el botón de usuario móvil */
        position: absolute;
        right: 20px;
        /* Lo posicionamos cerca del carrito */
        top: 15px;
    }

  /* --- INICIO: Estilos para el mensaje de bienvenida --- */
    #welcome-message {
        left: 35%;
    }
}

@media (max-width: 800px) {
    body {
        /* Ajustamos el padding para pantallas más pequeñas para reducir el espacio superior */
        padding-top: 120px;
    }

    header {
    height: 120px; 
 }

    #logo-empresa {
        height: 110px;
        width: 110px;
    }

    #welcome-message {
        top: 15px;
        left: 38%;
    }


    .buscador-carrito {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        height: 150px;
        width: 20%;
        flex: 1;
        margin-left: 0px;
    }

    .buscador-carrito h1 {
        position: absolute;
        top: -20px;
        margin-left: -10%;
    }

    #buscadorForm {
        margin-top: 30px;
        background-color: transparent;
        width: 20%;
        margin-left: 10%;
    }

    #botonBuscar {
        right: -20px;
    }

    .carrito-container {
        top: 20px;
        background-color: transparent;
        right: 10%;
    }

    .user-menu-toggle-btn {
        margin-top: 8px;
        margin-right: 10px;


    }

    .user-menu-dropdown {
        top: 60px;
        right: -20px;
    }

    .session-btn {
        padding: 8px 15px;
        font-size: 14px;
        text-align: center;
        display: inline-block;
        /* Asegura que el padding y la alineación se apliquen correctamente */
    }

    /* Estilos responsivos para la cesta del carrito */
    /* cesta del cliente */
    .contenedorCompra {
        position: fixed;
        /* o static si prefieres */
        top: 139px;
        left: 0;
        /* Corrección: Cambiar vw a % para evitar el desbordamiento horizontal */
        width: 100%;
        height: 20vh;
        min-height: 83vh;
        overflow-y: auto;
        flex-direction: column !important;
        transition: max-height 0.3s;
        gap: 8px;
        z-index: 1100;
        background-color: rgba(0, 0, 0, 0.808);
    }



    /* Ajusta el contenedor individual de cada producto*/
    .productosCompra>div {
        left: 0px;
        width: 100%;
    }

    /* Ajusta la imagen de cada producto*/
    .carrito-producto-img {
        width: 90px;
        /* Aumentamos el tamaño de la imagen considerablemente */
        height: 90px;
        /* Aumentamos el tamaño de la imagen considerablemente */

    }

    /* <-- codigo ajustar contenedor de los botones de selector de cantidades */
    #contenedorCompra .productosCompra .selector-cantidad {
        position: relative;
        padding: 0;
        margin-top: -10px;
        /* <-- Puedes ajustar este valor para moverlo hacia arriba o abajo */
        margin-left: 20px;
        background-color: transparent;
        border-radius: 30px;
        border: solid 2px green;
        height: 40px;
        width: 120px;
    }

    /* Cantidad de items en el carrito */
    #contenedorCompra .productosCompra .carrito-item-cantidad {
        margin-top: 3px;
        background-color: transparent;
    }

    /* --- INICIO: Estilos para los botones de cantidad (+/-) en el carrito --- */
    .selector-cantidad .sumar-cantidad,
    .selector-cantidad .restar-cantidad {

        margin-top: 0px;
    }


    .informacionCompra,
    .formulario-cliente {
        position: absolute;
        width: 100%;
    }


    /* Estilos responsivos para la cesta del carrito */
    /* cesta del cliente */

    .informacionCompra {
        top: 80px;
        min-height: 490px;

    }

    .informacionCompra h2 {
        margin-top: -20px;
        margin-left: 0px;
        font-size: 16px;
        width: 90%;

    }

    .productosCompra {
        font-size: 17px;
        width: 100%;
        /* Cambiado de 100vw a 100% para evitar el desbordamiento horizontal */
        min-height: 400px;
        max-height: 400px;
        margin-top: 30px;
        padding: 0px;
        left: 0px;

    }

    .carrito-item-titulo {
        margin-top: 0px;
        /* ¡IMPORTANTE! Eliminamos el margen que causaba el problema */
        margin-left: 0px;
        /* ¡IMPORTANTE! Eliminamos el margen que causaba el problema */
        font-size: 10px;
        /* Cambia el tamaño según tu preferencia */
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        /* Hacemos el título más notorio */
        text-align: center;
    }

    .carrito-item {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        /* Eliminamos el margen para que ocupe todo el espacio */
        padding: 15px 10px;
        /* Ajustamos el padding vertical y horizontal */
        display: flex;
        flex-direction: row;
        /* Crea el diseño de dos columnas */
        justify-content: space-between;
        /* Separa las dos columnas */
        align-items: center;
        gap: 15px;
    }

    .carrito-item-info-principal {
        display: flex;
        flex-direction: column;
        /* Apila título, imagen, talla */
        align-items: center;
        gap: 8px;
    }

    .carrito-item-controles {
        display: flex;
        flex-direction: column;
        /* Apila controles de cantidad y precio */
        align-items: center;
        justify-content: center;
        gap: 10px;
        /* Espacio entre todos los elementos */
    }

    .carrito-producto-img {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        object-fit: cover;
    }

    .carrito-item-talla {
        font-size: 12px;
        font-style: italic;
        color: #a2b3c7;
    }

    /* Hacemos el selector más específico para que anule al de style.css */
    #productosCompra .carrito-item>.selector-cantidad {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;
    }

    .precio-eliminar-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .total {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 26px;
        /* Cambia el tamaño según tu preferencia */
        font-weight: 600;
        color: #fff;
        margin-top: 18px;
        font-family: 'Montserrat', sans-serif;
    }


    .formulario-cliente {
        top: 680px;
        left: 0px;
    }


    .informacionCompra {
        order: 1;
    }

    .formulario-cliente {
        order: 2;
    }

    #enviarWhatsApp {
        width: 90%;
        /* Hacemos que ocupe casi todo el ancho */
        max-width: 400px;
        /* Pero con un límite */
    }

    .x {
        position: fixed;
        top: 120px;
        left: 0px;
        /* Ajusta para que no se superpongan */
        width: 200px;
        z-index: 20;
        text-align: center;
        background-color: rgba(42, 98, 250, 0.932);
    }

    #contenedor {
        margin-top: -30px;
    }

}

/* Responsive para el formulario */
@media (max-width: 768px) {
    .formulario-cliente {
        width: 90%;
        margin: 15px auto;
    }

    .ayuda-texto {
        font-size: 11px;
    }

    /* --- INICIO: Ajuste para evitar que el header solape el contenido en móvil --- */
    body {
        /* Ajustamos el padding para pantallas más pequeñas para reducir el espacio superior */
        padding-top: 120px;
    }

    /* --- FIN: Ajuste para el header --- */

    /* --- INICIO: Estilos para filtros de categoría en móvil (scroll horizontal) --- */
    .filtros-container {
        flex-wrap: nowrap;
        /* Evita que los botones se apilen */
        overflow-x: auto;
        /* Permite el scroll horizontal */
        justify-content: flex-start;
        /* Alinea los botones al inicio */
        padding: 5px 15px;
        /* Reducimos el padding vertical para disminuir el espacio */
        -webkit-overflow-scrolling: touch;
        /* Scroll más suave en iOS */
        scrollbar-width: none;
        /* Oculta la barra de scroll en Firefox */
    }

    /* Oculta la barra de scroll en navegadores Webkit (Chrome, Safari) */
    .filtros-container::-webkit-scrollbar {
        display: none;
    }

    /* --- FIN: Estilos para filtros de categoría en móvil --- */

}



/* Responsive para el carrito y el formulario */
@media (max-width: 730px) {
    body {
        /* Ajustamos el padding para pantallas más pequeñas para reducir el espacio superior */
        padding-top: 120px;
    }

    #logo-empresa {
        position: absolute;
        top: 2px;
        left: -2;
        height: 110px;
        width: 110px;
    }

    #welcome-message {
        position: absolute;
        top: 15px;
        left: 47%;
    }


    .buscador-carrito {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        height: 150px;
        width: 20%;
        flex: 1;
        margin-left: 0px;
    }

    .buscador-carrito h1 {
        position: absolute;
        top: -20px;
        margin-left: -10%;
    }

    #buscadorForm {
        margin-top: 30px;
        background-color: transparent;
        width: 20%;
        margin-left: 15%;
    }

    #botonBuscar {
        right: -20px;
    }

    .carrito-container {
        top: 20px;
        background-color: transparent;
        
    }

    .user-menu-toggle-btn {
        margin-top: 8px;


    }

    
    .session-btn {
        padding: 8px 15px;
        font-size: 14px;
        text-align: center;
        display: inline-block;
        /* Asegura que el padding y la alineación se apliquen correctamente */
    }

    /* Estilos responsivos para la cesta del carrito */
    /* cesta del cliente */
    .contenedorCompra {
        position: fixed;
        /* o static si prefieres */
        top: 130px;
        left: 0;
        /* Corrección: Cambiar vw a % para evitar el desbordamiento horizontal */
        width: 100%;
        height: 20vh;
        min-height: 80vh;
        overflow-y: auto;
        flex-direction: column !important;
        transition: max-height 0.3s;
        gap: 8px;
        z-index: 1100;
        background-color: rgba(0, 0, 0, 0.808);
    }



    /* Ajusta el contenedor individual de cada producto*/
    .productosCompra>div {
        left: 0px;
        width: 100%;
    }

    /* Ajusta la imagen de cada producto*/
    .carrito-producto-img {
        width: 90px;
        /* Aumentamos el tamaño de la imagen considerablemente */
        height: 90px;
        /* Aumentamos el tamaño de la imagen considerablemente */

    }

    /* <-- codigo ajustar contenedor de los botones de selector de cantidades */
    #contenedorCompra .productosCompra .selector-cantidad {
        position: relative;
        padding: 0;
        margin-top: -10px;
        /* <-- Puedes ajustar este valor para moverlo hacia arriba o abajo */
        margin-left: 20px;
        background-color: transparent;
        border-radius: 30px;
        border: solid 2px green;
        height: 40px;
        width: 120px;
    }

    /* Cantidad de items en el carrito */
    #contenedorCompra .productosCompra .carrito-item-cantidad {
        margin-top: 3px;
        background-color: transparent;
    }

    /* --- INICIO: Estilos para los botones de cantidad (+/-) en el carrito --- */
    .selector-cantidad .sumar-cantidad,
    .selector-cantidad .restar-cantidad {

        margin-top: 0px;
    }


    .informacionCompra,
    .formulario-cliente {
        position: absolute;
        width: 100%;
    }


    /* Estilos responsivos para la cesta del carrito */
    /* cesta del cliente */

    .informacionCompra {
        top: 80px;
        min-height: 490px;

    }

    .informacionCompra h2 {
        margin-top: -20px;
        margin-left: 0px;
        font-size: 16px;
        width: 90%;

    }

    .productosCompra {
        font-size: 17px;
        width: 100%;
        /* Cambiado de 100vw a 100% para evitar el desbordamiento horizontal */
        min-height: 400px;
        max-height: 400px;
        margin-top: 30px;
        padding: 0px;
        left: 0px;

    }

    .carrito-item-titulo {
        margin-top: 0px;
        /* ¡IMPORTANTE! Eliminamos el margen que causaba el problema */
        margin-left: 0px;
        /* ¡IMPORTANTE! Eliminamos el margen que causaba el problema */
        font-size: 10px;
        /* Cambia el tamaño según tu preferencia */
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        /* Hacemos el título más notorio */
        text-align: center;
    }

    .carrito-item {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        /* Eliminamos el margen para que ocupe todo el espacio */
        padding: 15px 10px;
        /* Ajustamos el padding vertical y horizontal */
        display: flex;
        flex-direction: row;
        /* Crea el diseño de dos columnas */
        justify-content: space-between;
        /* Separa las dos columnas */
        align-items: center;
        gap: 15px;
    }

    .carrito-item-info-principal {
        display: flex;
        flex-direction: column;
        /* Apila título, imagen, talla */
        align-items: center;
        gap: 8px;
    }

    .carrito-item-controles {
        display: flex;
        flex-direction: column;
        /* Apila controles de cantidad y precio */
        align-items: center;
        justify-content: center;
        gap: 10px;
        /* Espacio entre todos los elementos */
    }

    .carrito-producto-img {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        object-fit: cover;
    }

    .carrito-item-talla {
        font-size: 12px;
        font-style: italic;
        color: #a2b3c7;
    }

    /* Hacemos el selector más específico para que anule al de style.css */
    #productosCompra .carrito-item>.selector-cantidad {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;
    }

    .precio-eliminar-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .total {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 26px;
        /* Cambia el tamaño según tu preferencia */
        font-weight: 600;
        color: #fff;
        margin-top: 18px;
        font-family: 'Montserrat', sans-serif;
    }




    .formulario-cliente {
        top: 680px;
        left: 0px;
    }


    .informacionCompra {
        order: 1;
    }

    .formulario-cliente {
        order: 2;
    }

    #enviarWhatsApp {
        width: 90%;
        /* Hacemos que ocupe casi todo el ancho */
        max-width: 400px;
        /* Pero con un límite */
    }

    .x {
        position: fixed;
        top: 120px;
        left: 0px;
        /* Ajusta para que no se superpongan */
        width: 200px;
        z-index: 20;
        text-align: center;
        background-color: rgba(42, 98, 250, 0.932);
    }

    #contenedor {
        margin-top: -30px;
    }

}

@media (max-width: 700px) {

    
#titulo-logov {
    top: 5px;
}

  /* --- INICIO: Estilos para el mensaje de bienvenida --- */
    #welcome-message {
        top: 30px;
        left: 47%;
        
    }

    #buscadorForm {
        margin-top: 70px;
    }

     .user-menu-toggle-btn {
        margin-top: 0px;
        margin-right: -15px;
    }

    .carrito-container {
        top: 12px;
        background-color: transparent;
        right: 5%;
        
    }
}


@media (max-width: 560px) {

    #logo-empresa {
        left: -3%;
       
    }

     .buscador-carrito h1 {
        position: absolute;
        top: -20px;
        margin-left: -24%;
    } 

  /* --- INICIO: Estilos para el mensaje de bienvenida --- */
    #welcome-message {
        left: 50%;
    }

     .user-menu-toggle-btn {
        margin-top: 0px;
        margin-right: -15px;
    }

    .carrito-container {
        top: 12px;
        background-color: transparent;
        right: 5%;
        
    }
}

@media (max-width: 500px) {
     .buscador-carrito h1 {
        position: absolute;
        top: -20px;
        margin-left: -24%;
    } 

  /* --- INICIO: Estilos para el mensaje de bienvenida --- */
    #welcome-message {
        left: 54%;
    }

    .user-menu-toggle-btn {
        margin-top: 0px;
        margin-right: 50px;
    }

    .carrito-container {
        top: 12px;
        background-color: transparent;
        right: -4%;
    }
}

@media (max-width: 470px) {

    
    #header {
        height: 150px;
    }


  /* --- INICIO: Estilos para el mensaje de bienvenida --- */
    #welcome-message {
        top: 70px;
        left: 64%;
    }

     #buscadorForm {
        margin-top: 80px;
    }

    .user-menu-toggle-btn {
        margin-top: -5px;
        margin-right: 50px;
    }

    .carrito-container {
        top: 9px;
        background-color: transparent;
        right: -4%;
    }
}

@media (max-width: 450px) {

  /* --- INICIO: Estilos para el mensaje de bienvenida --- */
    #welcome-message {
        left: 65%;
    }

}

/* Responsive para el carrito y el formulario */
@media (max-width: 430px) {
    body {
        /* Ajustamos el padding para pantallas más pequeñas para reducir el espacio superior */
        padding-top: 120px;
    }


    #welcome-message {
    position: absolute;
    top: 70px;
}


    .buscador-carrito {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        height: 150px;
        width: 20%;
        flex: 1;
        margin-left: 0px;
    }

    .buscador-carrito h1 {
        position: absolute;
        margin-left: -10%;
        margin-top: 30px;
        font-size: 45px;
    }

    #buscadorForm {
        margin-top: 80px;
        background-color: transparent;
        width: 20%;
    }

    .user-menu-toggle-btn {
        margin-top: 0px;
        margin-right: 60px;
    }

    .user-menu-dropdown {
        top: 80px;
        
    }

    #botonBuscar {
        right: -20px;
    }

    .carrito-container {
        top: 12px;
        background-color: transparent;
        right: -3%;
    }

    .session-btn {
        padding: 8px 15px;
        font-size: 14px;
        text-align: center;
        display: inline-block;
        /* Asegura que el padding y la alineación se apliquen correctamente */
    }


    /* Estilos responsivos para la cesta del carrito */
    /* cesta del cliente */
    .contenedorCompra {
        position: fixed;
        /* o static si prefieres */
        top: 130px;
        left: 0;
        /* Corrección: Cambiar vw a % para evitar el desbordamiento horizontal */
        width: 100%;
        height: 20vh;
        min-height: 80vh;
        overflow-y: auto;
        flex-direction: column !important;
        transition: max-height 0.3s;
        gap: 8px;
        z-index: 1100;
        background-color: rgba(0, 0, 0, 0.808);
    }



    /* Ajusta el contenedor individual de cada producto*/
    .productosCompra>div {
        left: 0px;
        width: 100%;
    }

    /* Ajusta la imagen de cada producto*/
    .carrito-producto-img {
        width: 90px;
        /* Aumentamos el tamaño de la imagen considerablemente */
        height: 90px;
        /* Aumentamos el tamaño de la imagen considerablemente */

    }

    /* <-- codigo ajustar contenedor de los botones de selector de cantidades */
    #contenedorCompra .productosCompra .selector-cantidad {
        position: relative;
        padding: 0;
        margin-top: -10px;
        /* <-- Puedes ajustar este valor para moverlo hacia arriba o abajo */
        margin-left: 20px;
        background-color: transparent;
        border-radius: 30px;
        border: solid 2px green;
        height: 40px;
        width: 120px;
    }

    /* Cantidad de items en el carrito */
    #contenedorCompra .productosCompra .carrito-item-cantidad {
        margin-top: 3px;
        background-color: transparent;
    }

    /* --- INICIO: Estilos para los botones de cantidad (+/-) en el carrito --- */
    .selector-cantidad .sumar-cantidad,
    .selector-cantidad .restar-cantidad {

        margin-top: 0px;
    }


    .informacionCompra,
    .formulario-cliente {
        position: absolute;
        width: 100%;
    }


    /* Estilos responsivos para la cesta del carrito */
    /* cesta del cliente */

    .informacionCompra {
        top: 80px;
        min-height: 490px;

    }

    .informacionCompra h2 {
        margin-top: -20px;
        margin-left: 0px;
        font-size: 16px;
        width: 90%;

    }

    .productosCompra {
        font-size: 17px;
        width: 100%;
        /* Cambiado de 100vw a 100% para evitar el desbordamiento horizontal */
        min-height: 400px;
        max-height: 400px;
        margin-top: 30px;
        padding: 0px;
        left: 0px;

    }

    .carrito-item-titulo {
        margin-top: 0px;
        /* ¡IMPORTANTE! Eliminamos el margen que causaba el problema */
        margin-left: 0px;
        /* ¡IMPORTANTE! Eliminamos el margen que causaba el problema */
        font-size: 10px;
        /* Cambia el tamaño según tu preferencia */
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        /* Hacemos el título más notorio */
        text-align: center;
    }

    .carrito-item {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        /* Eliminamos el margen para que ocupe todo el espacio */
        padding: 15px 10px;
        /* Ajustamos el padding vertical y horizontal */
        display: flex;
        flex-direction: row;
        /* Crea el diseño de dos columnas */
        justify-content: space-between;
        /* Separa las dos columnas */
        align-items: center;
        gap: 15px;
    }

    .carrito-item-info-principal {
        display: flex;
        flex-direction: column;
        /* Apila título, imagen, talla */
        align-items: center;
        gap: 8px;
    }

    .carrito-item-controles {
        display: flex;
        flex-direction: column;
        /* Apila controles de cantidad y precio */
        align-items: center;
        justify-content: center;
        gap: 10px;
        /* Espacio entre todos los elementos */
    }

    .carrito-producto-img {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        object-fit: cover;
    }

    .carrito-item-talla {
        font-size: 12px;
        font-style: italic;
        color: #a2b3c7;
    }

    /* Hacemos el selector más específico para que anule al de style.css */
    #productosCompra .carrito-item>.selector-cantidad {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;
    }

    .precio-eliminar-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .total {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 26px;
        /* Cambia el tamaño según tu preferencia */
        font-weight: 600;
        color: #fff;
        margin-top: 18px;
        font-family: 'Montserrat', sans-serif;
    }




    .formulario-cliente {
        top: 680px;
        left: 0px;
    }


    .informacionCompra {
        order: 1;
    }

    .formulario-cliente {
        order: 2;
    }

    #enviarWhatsApp {
        width: 90%;
        /* Hacemos que ocupe casi todo el ancho */
        max-width: 400px;
        /* Pero con un límite */
    }

    .x {
        position: fixed;
        top: 120px;
        left: 0px;
        /* Ajusta para que no se superpongan */
        width: 200px;
        z-index: 20;
        text-align: center;
        background-color: rgba(42, 98, 250, 0.932);
    }
 .filtros-container {
    margin-top: 40px;
 }
    #contenedor {
        margin-top: -40px;
    }


    #account-container {
        width: 100%;

    }
}


/* Responsive para el carrito y el formulario */
@media (max-height: 883px) and (max-width: 412px) {
    body {
        /* Ajustamos el padding para pantallas más pequeñas para reducir el espacio superior */
        padding-top: 120px;
    }

    #header {
        z-index: 1000;
    }

    #logo-empresa {
        
        left: -4%;
       
    }

    .buscador-carrito {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        height: 150px;
        width: 20%;
        flex: 1;
        background-color: rgba(241, 158, 5, 0);
        margin-left: 0px;
    }

    .buscador-carrito h1 {
        position: absolute;
        margin-left: -10%;
    }

    #buscadorForm {
        margin-top: 90px;
        background-color: transparent;
        width: 20%;

    }

    #botonBuscar {
        right: -20px;
    }

    .carrito-container {
        background-color: transparent;
        right: -3%;
    }

    .session-btn {
        padding: 8px 15px;
        font-size: 14px;
        text-align: center;
        display: inline-block;
        /* Asegura que el padding y la alineación se apliquen correctamente */
    }

    
.user-menu-dropdown {
    top: 80px; /* Debajo del botón */
   
}

    /* Estilos responsivos para la cesta del carrito */
    /* cesta del cliente */
    .contenedorCompra {
        position: fixed;
        /* o static si prefieres */
        top: 170px;
        left: 0;
        /* Corrección: Cambiar vw a % para evitar el desbordamiento horizontal */
        width: 100%;
        height: 25vh;
        min-height: 83vh;
        overflow-y: auto;
        flex-direction: column !important;
        transition: max-height 0.3s;
        gap: 8px;
        z-index: 100;
        background-color: rgba(0, 0, 0, 0.808);
    }

.x {
        position: fixed;
        top: 170px;
        left: 0px;
        /* Ajusta para que no se superpongan */
        width: 200px;
        z-index: 20;
    }



    /* Ajusta el contenedor individual de cada producto*/
    .productosCompra>div {
        left: 0px;
        width: 100%;
    }

    /* Ajusta la imagen de cada producto*/
    .carrito-producto-img {
        width: 90px;
        /* Aumentamos el tamaño de la imagen considerablemente */
        height: 90px;
        /* Aumentamos el tamaño de la imagen considerablemente */

    }

    /* <-- codigo ajustar contenedor de los botones de selector de cantidades */
    #contenedorCompra .productosCompra .selector-cantidad {
        position: relative;
        padding: 0;
        margin-top: -10px;
        /* <-- Puedes ajustar este valor para moverlo hacia arriba o abajo */
        margin-left: 20px;
        background-color: transparent;
        border-radius: 30px;
        border: solid 2px green;
        height: 40px;
        width: 120px;
    }

    /* Cantidad de items en el carrito */
    #contenedorCompra .productosCompra .carrito-item-cantidad {
        margin-top: 3px;
        background-color: transparent;
    }

    /* --- INICIO: Estilos para los botones de cantidad (+/-) en el carrito --- */
    .selector-cantidad .sumar-cantidad,
    .selector-cantidad .restar-cantidad {

        margin-top: 0px;
    }


    .informacionCompra,
    .formulario-cliente {
        position: absolute;
        width: 100%;
    }


    /* Estilos responsivos para la cesta del carrito */
    /* cesta del cliente */

    .informacionCompra {
        top: 80px;
        min-height: 490px;

    }

    .informacionCompra h2 {
        margin-top: -20px;
        margin-left: 0px;
        font-size: 16px;
        width: 90%;

    }

    .productosCompra {
        font-size: 17px;
        width: 100%;
        /* Cambiado de 100vw a 100% para evitar el desbordamiento horizontal */
        min-height: 400px;
        max-height: 400px;
        margin-top: 30px;
        padding: 0px;
        left: 0px;

    }

    .carrito-item-titulo {
        margin-top: 0px;
        /* ¡IMPORTANTE! Eliminamos el margen que causaba el problema */
        margin-left: 0px;
        /* ¡IMPORTANTE! Eliminamos el margen que causaba el problema */
        font-size: 10px;
        /* Cambia el tamaño según tu preferencia */
        color: #fff;
        font-family: 'Montserrat', sans-serif;
        font-weight: bold;
        /* Hacemos el título más notorio */
        text-align: center;
    }

    .carrito-item {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        /* Eliminamos el margen para que ocupe todo el espacio */
        padding: 15px 10px;
        /* Ajustamos el padding vertical y horizontal */
        display: flex;
        flex-direction: row;
        /* Crea el diseño de dos columnas */
        justify-content: space-between;
        /* Separa las dos columnas */
        align-items: center;
        gap: 15px;
    }

    .carrito-item-info-principal {
        display: flex;
        flex-direction: column;
        /* Apila título, imagen, talla */
        align-items: center;
        gap: 8px;
    }

    .carrito-item-controles {
        display: flex;
        flex-direction: column;
        /* Apila controles de cantidad y precio */
        align-items: center;
        justify-content: center;
        gap: 10px;
        /* Espacio entre todos los elementos */
    }

    .carrito-producto-img {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        object-fit: cover;
    }

    .carrito-item-talla {
        font-size: 12px;
        font-style: italic;
        color: #a2b3c7;
    }

    /* Hacemos el selector más específico para que anule al de style.css */
    #productosCompra .carrito-item>.selector-cantidad {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;
    }

    .precio-eliminar-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .total {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-size: 26px;
        /* Cambia el tamaño según tu preferencia */
        font-weight: 600;
        color: #fff;
        margin-top: 18px;
        font-family: 'Montserrat', sans-serif;
    }




    .formulario-cliente {
        top: 680px;
        left: 0px;
    }


    .informacionCompra {
        order: 1;
    }

    .formulario-cliente {
        order: 2;
    }

    #enviarWhatsApp {
        width: 90%;
        /* Hacemos que ocupe casi todo el ancho */
        max-width: 400px;
        /* Pero con un límite */
    }

    
    #contenedor {
        margin-top: -30px;
    }

}

/* --- INICIO: Estilos para la animación de carga de productos --- */
.loader-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;
    /* Altura para darle espacio mientras carga */
    gap: 15px;
}

.loader {
    border: 6px solid #2D4263;
    /* Color base del círculo */
    border-top: 6px solid #25D366;
    /* Color que gira */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    /* Animación de giro */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* --- FIN: Estilos para la animación de carga de productos --- */

/* --- INICIO: Posicionamiento manual de SweetAlert (Toast) --- */
.swal2-container.swal-custom-margin {
    top: 130px !important; /* Header escritorio (120px) + 10px espacio */
}

@media (max-width: 800px) {
    .swal2-container.swal-custom-margin {
        top: 140px !important; /* Header tablet (120px) + 20px espacio */
    }
}

@media (max-width: 470px) {
    .swal2-container.swal-custom-margin {
        top: 170px !important; /* Header móvil (150px) + 20px espacio */
    }
}
/* --- FIN: Posicionamiento manual de SweetAlert --- */