/* Importar la fuente Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');






/**************************************************************************/
/*                           Estilos Generales                             */
/**************************************************************************/
.woocommerce-breadcrumb {
    display: none;
}

@media (max-width: 768px) {
    body {
        margin: 15px;
    }
    .site-container {
        padding: 15px;
    }
}


/**************************************************************************/
/*                Estilos para Botones de Añadir al Carrito               */
/**************************************************************************/
.woocommerce .single_add_to_cart_button,
.woocommerce .button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    background-color: black !important;
    color: white !important;
    font-family: 'Roboto', sans-serif !important;
    border: 2px solid black !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    height: 40px !important;
    display: block !important;
    width: max-content !important;
    margin: -10px auto 0 !important; /* Margen encima */
    margin-bottom: 50px !important; /* Margen debajo */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s !important;
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce .button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
}



/**************************************************************************/
/*   EFECTO AL PASAR EL RATON GENERAR BORDE NEGRO EN TODO EL PRODUCTO     */
/**************************************************************************/
/* Estilizar el contenedor del producto en WooCommerce */
.woocommerce ul.products li.product {
    transition: border 0.3s ease; /* Transición suave para el cambio de borde */
    /* Otros estilos del contenedor del producto */
}

/* Estilizar el borde al pasar el ratón sobre el botón de añadir al carrito */
.woocommerce ul.products li.product:hover {
    border: 2px solid black; /* Establece el borde */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3); /* Aumenta la sombra para un efecto más destacado */

}

/* Estilizar el botón de añadir al carrito */
.woocommerce ul.products li.product .button.add_to_cart_button {
    /* Estilos para el botón */
}

/* Cambiar estilos del botón al pasar el ratón */
.woocommerce ul.products li.product .button.add_to_cart_button:hover {
    /* Estilos para el botón al pasar el ratón */
}


/**************************************************************************/
/*           Estilos para Páginas de Categorías y Productos                */
/**************************************************************************/
.tax-product_cat .site-branding, 
.woocommerce-shop .site-branding,
.single-product .site-branding {
    display: none;
}

.woocommerce-loop-product__title {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: black;
}

/* Ocultar el título de la página de la tienda de WooCommerce */
.woocommerce-products-header__title.page-title {
    display: none;
}


/*Titulos (nombre) de productos*/  
.woocommerce-loop-product__title {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: black;
}



/* Ocultar migas de pan */
.woocommerce-breadcrumb {
    display: none;
}

/* Estilizar el nombre y el precio del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin-right: 10px; /* Añade un margen a la derecha */
}

/* Cambiar el color del precio a negro en PAGINACION DE TIENDA*/
.woocommerce ul.products li.product .price {
    color: #000000; /* Negro */
    font-weight: bold; /* Estilo en negrita */

}


/* Estilizar la descripción del producto */
.woocommerce ul.products li.product .woocommerce-product-details__short-description {
    display: block; /* Asegúrate de que la descripción se muestre */
    margin: 5px 10px; /* Añade márgenes para no pegar el texto a los bordes */
    font-size: 0.9em; /* Ajusta el tamaño de la fuente si es necesario */
    overflow: hidden; /* Oculta el texto que exceda el espacio disponible */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es demasiado largo */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

/* Estilizar el contenedor del producto para asegurar suficiente espacio para la descripción */
.woocommerce ul.products li.product {
    padding: 10px; /* Añade un relleno para crear espacio alrededor de los elementos internos */
}

/* Ajustes adicionales para la imagen del producto */
.woocommerce ul.products li.product img {
    margin-bottom: 5px; /* Añade un pequeño margen debajo de la imagen */
}

.woocommerce-product-details__short-description {
    color: #046cfc; /* Color deseado para la descripción */
    margin-left: 0 !important; /* Fuerza la eliminación del margen a la izquierda */
    text-align: left; /* Asegura la alineación a la izquierda */
}


/* Cambia el color del PRECIO en la ficha de producto a negro */
.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #000; /* Cambia el color a negro */
    font-weight: bold; /* Estilo en negrita */

}



/**************************************************************************/
/*          Estilos para botón de VOLVER A TODOS LOS PRODUCTOS            */
/**************************************************************************/

/* Estilos para el contenedor del botón fijo */
.fixed-return-button-container {
    position: fixed; /* Fija la posición */
    top: 40px; /* Ajusta esto según la altura de tu encabezado */
    left: 50%; /* Centra el contenedor */
    transform: translateX(-50%); /* Ajusta la posición para centrar el botón */
    z-index: 9999; /* Asegura que esté sobre otros elementos */
}

/* Estilos para el botón de Volver a todos los productos */
.boton-volver {
    display: inline-block;
    background-color: #deef90;
    color: black;
    padding: 10px 20px;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
}

.boton-volver:hover {
    background-color: white;
    color: black;
    border: 2px solid black;
}

/* Estilos específicos para dispositivos móviles */
@media screen and (max-width: 768px) {
    .fixed-return-button-container {
        left: initial; /* Restablece la posición izquierda */
        right: 10px; /* Posiciona a la derecha con un margen de 10px */
        transform: none; /* Elimina la transformación */
    }
}

/* ELIMINAR MENU DE NAVEGACION EN PAGINAS DE PRODUCTOS DEJANDO SOLO EL DE VOLVER A PRODUCTOS */

    body.single-product .header-navigation {
        display: none; /* Oculta el menú de navegación en móviles en páginas de producto */
    }





/**************************************************************************/
/*                          Estilos CARRITO                                */
/**************************************************************************/



/* Estilos específicos solo para la sección de totales del carrito en WooCommerce */
.wc-block-components-sidebar-layout {
    /* Tus estilos específicos aquí */
    padding: 0 90px;
}



/* Estilos para el nombre del producto dentro de la sección */
.wc-block-components-sidebar-layout .wc-block-components-product-name {
    font-family: 'Roboto', sans-serif; /* Fuente Roboto */
    font-size: 18px; /* Tamaño de fuente de 18px */
    color: #046cfc; /* Color de fuente azul */
    text-decoration: none; /* Elimina el subrayado del enlace */
}

/* Estilos para el nombre del producto al pasar el ratón */
.wc-block-components-sidebar-layout .wc-block-components-product-name:hover {
    border: 2px solid #046cfc; /* Borde azul al pasar el ratón */
    border-radius: 5px; /* Esquinas redondeadas */
    padding: 5px; /* Espaciado interno para mantener el contenido centrado */
}


/* Estilos para la descripción corta del producto */
.wc-block-components-product-metadata__description{
    font-family: 'Roboto', sans-serif; /* Fuente Roboto */
    font-size: 18px; /* Tamaño de fuente de 18px */
    color: black; /* Color de fuente negro */
}

/* Estilos para los precios dentro de la sección */
.wc-block-components-sidebar-layout .price {
    font-weight: bold; /* Fuente en negrita para los precios */
    font-family: 'Roboto', sans-serif; /* Fuente Roboto */
    font-size: 18px; /* Tamaño de fuente de 18px */
    color: black; /* Color de fuente negro */
}


body {
    font-family: 'Roboto', sans-serif;
}


/* Estilos para el botón de cupón en la página del carrito */
.wc-block-components-totals-coupon a {
    background-color: #deef90; /* Color de fondo */
    color: black; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 10px; /* Esquinas redondeadas */
    text-decoration: none; /* Sin subrayado */
    border: none; /* Sin borde */
    display: inline-block; /* Asegura que se muestre como un botón */
    transition: background-color 0.3s, color 0.3s, border 0.3s; /* Efecto suave de transición */
}

.wc-block-components-totals-coupon a:hover {
    background-color: white; /* Color de fondo al pasar el ratón */
    color: black; /* Color del texto al pasar el ratón */
    border: 2px solid #deef90; /* Borde al pasar el ratón */
}






/**************************************************************************/
/*                          Estilos FINALIZAR COMPRA                                */
/**************************************************************************/

/* Aumentando la especificidad y usando !important para sobrescribir estilos */
.shop_table.woocommerce-checkout-review-order-table,
.shop_table.woocommerce-checkout-review-order-table * {
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    color: black !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
}


/* Estilos para el bloque de pago en la página de pago de WooCommerce */
.woocommerce-checkout-payment {
    background-color: #C3C3C3 !important; /* Fondo gris */
}

/* Estilos para el botón dentro del área de pago */
.woocommerce-checkout-payment .button.alt, 
.woocommerce-checkout-payment .button.alt:hover {
    background-color: #046cfc !important; /* Fondo azul */
    color: white !important; /* Texto blanco */
    border: none !important; /* Sin bordes */
    text-decoration: none !important; /* Sin subrayado */
}









/**************************************************************************/
/*Estilos para botón idiomas que se inserta en la plantilla de menú con el shortcode [gtranslate]*/
/**************************************************************************/


.header-nav-lang-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.language-selector {
    margin-left: 20px; /* Ajusta este margen según necesites */
}

@media (max-width: 768px) {
    .header-nav-lang-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    .language-selector {
        margin-top:0px;
    }
}

    /* Ajustar el tamaño del botón para dispositivos móviles */
    .gtranslate_wrapper {
        font-size: 0.4em; /* Disminuir el tamaño del texto */
        padding: 1px; /* Reducir el relleno */
    }





@media screen and (max-width: 768px) {
    .header-inner {
        position: relative;
    }

    .language-selector {
        position: absolute;
        top: 0;
        right: 0;
        transform: none;
    }

}


/**************************************************************************/
/*          Estilos para la Página de Categorías Personalizada             */
/**************************************************************************/
.custom-categorias-page .woocommerce {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
}

.custom-categorias-page .woocommerce ul.products {
    width: 100%;
}

.custom-categorias-page .woocommerce ul.products li.product-category {
    margin: 10px;
    flex-basis: calc(33.333% - 20px);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.custom-categorias-page .woocommerce ul.products li.product-category a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
}

.custom-categorias-page .woocommerce ul.products li.product-category img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.custom-categorias-page .woocommerce ul.products li.product-category h2 {
    font-size: 1.2em;
    margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
    .custom-categorias-page .woocommerce ul.products li.product-category {
        flex-basis: calc(50% - 20px);
    }
}

@media screen and (max-width: 480px) {
    .custom-categorias-page .woocommerce ul.products li.product-category {
        flex-basis: 100%;
    }
}




/**************************************************************************/
/*                     Estilos para el Menú de Categorías                 */
/**************************************************************************/
.product-categories-filter {
    margin-bottom: 50px;
    border-bottom: 2px solid #ddd;
    box-shadow: 0px 4px 5px -2px rgba(0,0,0,0.2);
}

.product-categories-filter .category-button {
    background-color: white;
    color: black;
    font-family: 'Roboto', sans-serif;
    padding: 5px 10px;
    margin: 5px;
    border: 2px solid black;
    border-radius: 15px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}

.product-categories-filter .category-button:hover,
.product-categories-filter .category-button.selected {
    background-color: #444;
    color: white;
}



/**************************************************************************/
/*       Estilos para la Barra de Navegación Inferior del Carrito         */
/**************************************************************************/
#fixed-cart-info {
    background-color: #fff;
    color: #000;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 18px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    z-index: 1000; /* Valor alto para asegurar que esté por encima de otros elementos */

}

.cart-info, .cart-link {
    margin: 0 20px;
    min-width: 200px;
}

.cart-link {
    background-color: #046cfc;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s;
}

.cart-link:hover, .cart-link:focus {
    background-color: #fff;
    color: #C71585;
    border: 2px solid #C71585;
}

@media screen and (max-width: 768px) {
    #fixed-cart-info .products-count {

    }

    #fixed-cart-info {
        padding-left: 15px;
        padding-right: 60px;
    }
    #fixed-cart-info .cart-info {
        text-align: left;
        flex-grow: 1;
    }
    .cart-link {
        padding: 5px 5px;
        margin-right: 50px;
        margin-left: auto;
        min-width: auto;
    }
}






/****************************************************************************/
/*                   Botón FINALIZAR COMPRA                                 */
/****************************************************************************/

.button.alt.wc-forward {
    background-color: #046cfc;
    color: #fff;
    /* Añade aquí más estilos según necesites */
}



.wc-block-components-button__text {
    background-color: #046cfc; /* Color de fondo del botón */
    color: #fff;              /* Color del texto */
    font-family: 'Roboto', sans-serif; /* Fuente del texto */
    padding: 10px 20px;        /* Espaciado interno del botón */
    border: none;              /* Sin bordes */
    cursor: pointer;           /* Tipo de cursor */
    text-decoration: none !important;     /* Sin subrayado en el texto */
    border-radius: 10px;        /* Bordes redondeados */
    transition: background-color 0.3s, color 0.3s; /* Transición suave de colores */
}

.wc-block-components-button__text:hover, .wc-block-components-button__text:focus {
    background-color: #fff;    /* Color de fondo al pasar el ratón o enfocar */
    color: #046cfc;            /* Color del texto al pasar el ratón o enfocar */
    border: 2px solid #046cfc; /* Borde al pasar el ratón o enfocar */
}



/* Ajustes para dispositivos móviles */
@media screen and (max-width: 768px) {
    .wc-block-components-button__text {
        padding: 5px 5px;      /* Reducción del espaciado interno en dispositivos móviles */
        min-width: auto;       /* Ajuste del ancho mínimo */
    }
}

.wc-block-cart__submit-container a, 
.wc-block-cart__submit-container a:hover, 
.wc-block-cart__submit-container a:focus {
    text-decoration: none !important;
}

/* Para cambiar el estilo del botón dentro de .wc-block-cart__submit-container */
.wc-block-cart__submit-container .wc-block-components-button__text,
.wc-block-cart__submit-container .wc-block-components-button__text:hover,
.wc-block-cart__submit-container .wc-block-components-button__text:focus {
    background-color: #046cfc; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno del botón */
    border-radius: 10px; /* Bordes redondeados */
    font-family: 'Roboto', sans-serif; /* Tipo de fuente */
    border: none; /* Sin bordes */
    cursor: pointer; /* Tipo de cursor */
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
}

.wc-block-cart__submit-container .wc-block-components-button__text:hover {
    background-color: #fff; /* Color de fondo al pasar el ratón */
    color: #046cfc; /* Color del texto al pasar el ratón */
    border: 2px solid #046cfc; /* Borde al pasar el ratón */
}



/****************************************************************************/
/*                    Shortcode  [shortcode-email]                          */
/****************************************************************************/


/* Estilo del campo de email */
.campo-email {
    width: 50%; /* Ajusta el ancho según prefieras */
    border-radius: 10px; /* Esquinas redondeadas */
    padding: 10px; /* Espacio interior para mejor legibilidad */
}

/* Estilo del enlace de Políticas de Privacidad */
.politicas-privacidad a {
    color: green; /* Color del enlace */
    text-decoration: none; /* Opcional: elimina el subrayado */
}

/* Estilo del botón de suscripción */
input[type="submit"] {
    background-color: black;
    color: white;
    font-family: 'Roboto', sans-serif;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 15px; /* Agrega un margen superior de 15px */
}




/* Estilo del botón al pasar el ratón */
input[type="submit"]:hover {
    background-color: black;
    color: yellow;
}

/* Mensaje de éxito */
.mensaje-exito {
    color: green;
    font-size: 16px;
}

/**************************************************************************/
/*                          PANTALLA KIOSCO                               */
/**************************************************************************/

    .kiosco-page .site-footer {
        display: none;
    }




/**************************************************************************/
/*                  ESTILO  BOTONES NEGRO Y BLANCO                        */
/**************************************************************************/


.ver_mas {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    margin-top: 20px; /* Espacio entre categorías y botón "Ver más" */
}

.categoria_boton {
    padding: 10px 20px;
    background-color: black;
    color: white;
    border-radius: 20px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

.categoria_boton:hover {
    background-color: white;
    color: black;
}


/****************************************************************************/
/*                      PAGINA SOBRE NOSOTOS                                */
/****************************************************************************/
/* Estilos específicos para la página 'Sobre Nosotros' */
.about-us-page .about-us-home-welcome {
    /* Estilos para el contenedor principal */
}

.about-us-page .about-us-h1 {
    /* Estilos para el título H1 */
    font-style: normal;
    font-weight: 800;
    font-size: 48px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    color: #fff; /* Asegúrate de cambiar el color según sea necesario */
    text-align: center;
}

.about-us-page .about-us-h2 {
    /* Estilos para el subtítulo H2 */
    font-style: normal;
    font-weight: 800;
    font-size: 36px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    color: #fff; /* Cambia el color si es necesario */
    text-align: center;
}

.about-us-page .about-us-short-description {
    /* Estilos para la descripción corta */
    font-size: 24px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    color: #fff; /* Cambia el color si es necesario */
}

.about-us-page .about-us-gallery {
    /* Estilos para la galería de imágenes */
    margin-top: 20px;
}

.about-us-page .about-us-long-description {
    /* Estilos para la descripción larga */
}


/****************************************************************************/
/*                    SHORTCODE  [sobre-nosotros]                           */
/****************************************************************************/

.sobre-nosotros-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Alinea los elementos hijos verticalmente al centro */
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
    margin-top: 30px; /* Margen superior */
    margin-bottom: 30px; /* Margen inferior */
}

.sobre-nosotros-imagen {
    flex: 1;
    max-width: 50%;
}

.sobre-nosotros-imagen img {
    width: 100%;
    height: auto;
}

.sobre-nosotros-texto {
    flex: 1;
    max-width: 50%;
    padding: 20px;
}

/* Reducir el tamaño de los encabezados en el contenedor del shortcode */
.sobre-nosotros-texto h1 {
    font-size: 1.5em; /* Tamaño más pequeño para H1 */
}

.sobre-nosotros-texto h2 {
    font-size: 1.2em; /* Tamaño más pequeño para H2 */
}

.sobre-nosotros-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 20px;
}

.sobre-nosotros-galeria img {
    width: 100%;
    height: auto;
}

/* Estilos específicos para dispositivos móviles */
@media screen and (max-width: 768px) {
    .sobre-nosotros-container {
        flex-direction: column; /* Cambia la dirección de los elementos a columna */
    }

    .sobre-nosotros-imagen,
    .sobre-nosotros-texto {
        max-width: 100%; /* Ancho máximo del 100% en dispositivos móviles */
    }

    .sobre-nosotros-imagen {
        margin-bottom: 20px; /* Añade espacio entre la imagen y el texto */
    }

    .sobre-nosotros-galeria {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Ajusta el tamaño de las columnas de la galería */
        gap: 5px; /* Reduce el espacio entre las imágenes */
    }

    .sobre-nosotros-galeria img {
        width: 100%; /* Ajusta el ancho de las imágenes al 100% */
    }
}


/****************************************************************************/
/*        Desde /panel/ BOTON HOME VOLVER A /panel/ y a HOME/               */
/****************************************************************************/



.boton-flotante-home {
    position: fixed; /* Posición fija */
    bottom: 20px; /* 20px desde la parte inferior */
    right: 20px; /* 20px desde la parte derecha */
    padding: 10px 15px; /* Padding para tamaño */
    background-color: #007bff; /* Color de fondo */
    color: white; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
    border-radius: 5px; /* Bordes redondeados */
    z-index: 1000; /* Asegurarse de que esté por encima de otros elementos */
    font-size: 16px; /* Tamaño del texto */
}

.boton-flotante-home:hover {
    background-color: #0056b3; /* Cambiar color al pasar el ratón */
}




.boton-flotante-web {
    position: fixed; /* Posición fija */
    bottom: 20px; /* 20px desde la parte inferior */
    right: 20px; /* 20px desde la parte derecha */
    padding: 10px 15px; /* Padding para tamaño */
    background-color: #deef90; /* Color de fondo */
    color: black; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
    border-radius: 5px; /* Bordes redondeados */
    z-index: 1000; /* Asegurarse de que esté por encima de otros elementos */
    font-size: 16px; /* Tamaño del texto */
}

.boton-flotante-web:hover {
    background-color: #0056b3; /* Cambiar color al pasar el ratón */
}






/****************************************************************************/
/*                              ALERGENOS                                    */
/****************************************************************************/

/* Estilos para la banda horizontal de alérgenos */
.alergenos-container {
    margin-top: 20px; /* Margen superior */
    overflow-x: auto; /* Agregar barra de desplazamiento horizontal si es necesario */
    white-space: nowrap; /* Evitar que los elementos se envuelvan en varias líneas */
}

/* Estilos para cada ícono de alérgeno */
.alergenos-container img {
    width:50px; /* Ancho del ícono */
    height: auto; /* Altura automática para mantener la proporción */
    margin-right: 10px; /* Margen derecho para separar los íconos */
}

/* Estilos para cada ícono de alérgeno y su nombre */
.alergeno-item {
    display: flex; /* Para alinear los elementos en línea */
    align-items: center; /* Para alinear verticalmente los elementos */
    margin-bottom: 5px; /* Espacio entre cada par de icono y nombre */
}

/* Estilos para el nombre del alérgeno */
.alergeno-nombre {
    margin-left: 5px; /* Espacio entre el icono y el nombre */
}





/* Estilos para los iconos de alérgenos en la paginación de la tienda */
.woocommerce ul.products li.product .alergenos-container {
    margin-top: 10px; /* Margen superior reducido */
    overflow-x: auto; /* Agregar barra de desplazamiento horizontal si es necesario */
    white-space: nowrap; /* Evitar que los elementos se envuelvan en varias líneas */
    text-align: center; /* Centrar el contenido horizontalmente */
}

/* Estilos para cada ícono de alérgeno */
.woocommerce ul.products li.product .alergenos-container img {
    width: 50px; /* Ancho del ícono */
    height: auto; /* Altura automática para mantener la proporción */
    margin-right: 10px; /* Margen derecho para separar los íconos */
}

/* Estilos para cada ícono de alérgeno y su nombre */
.woocommerce ul.products li.product .alergenos-container .alergeno-item {
    display: inline-flex; /* Mostrar en línea horizontal */
    align-items: center; /* Para alinear verticalmente los elementos */
    margin-bottom: 5px; /* Espacio entre cada par de icono y nombre */
}

/* Estilos para el nombre del alérgeno */
.woocommerce ul.products li.product .alergenos-container .alergeno-nombre {
    margin-left: 5px; /* Espacio entre el icono y el nombre */
}




.md-layout.side-settings-col.md-column {
    display: none !important;
}






/**************************************************************************/
/**************************************************************************/
/*                        ESTILOS ADICIONALES HOME                        */
/**************************************************************************/
/**************************************************************************/



/**************************************************************************/
/*                Estilos para PRINCIPALES CATEGORIAS en HOME              */
/**************************************************************************/


/* Asegurar que las categorías ocupen todo el ancho disponible */
.mostrar-categorias-en-home .woocommerce {
    width: 100%;
}

.mostrar-categorias-en-home .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribuye los elementos uniformemente */
}

.mostrar-categorias-en-home .woocommerce ul.products li.product {
    flex: 1 1 calc(25% - 20px); /* Ocupar el 25% del ancho menos el espacio del gap */
    margin: 10px; /* Para mantener un poco de espacio alrededor de cada producto */
}

@media only screen and (max-width: 768px) {
    .mostrar-categorias-en-home .woocommerce ul.products li.product {
        flex: 1 1 calc(50% - 20px); /* En pantallas más pequeñas, cada producto ocupa 50% */
    }
}





/******************************************************************************/
/*                         ESTILOS CARPETA SHORTCODES                         */
/******************************************************************************/

/* Custom Style para Clienty Shortcodes Plugin */



 
 
/******************************************************************************
* .home-button - Estilos para el botón "Home" fijo en la pantalla.            *
*  Lo puedes encontrar normalmente en la esquina inferior derecha             *
******************************************************************************/

.home-button {
    display: none;
}

/* Efecto hover para el botón 'Home' */
.home-button:hover {
    background-color: #2980b9; /* Color de fondo al pasar el mouse por encima */
}

 
/*****************************************************************************/
/*      Estilos para los diferentes 'estilos' de productos.                  */
/* Cada estilo modifica el color y el fondo de la descripción del producto.  */
/*****************************************************************************/

 

/* Estilo 0 - Rojo */
.style-0 { color: red; }
.style-0 .product-description { background-color: #ffe6e6; }

/* Estilo 1 - Azul */
.style-1 { color: blue; }
.style-1 .product-description { background-color: #e6e6ff; }

/* Estilo 2 - Verde */
/* ... y así sucesivamente para cada estilo */

/* Estilo para los contenedores de productos */
.product-container {
    display: none; /* Inicialmente oculto, posiblemente mostrado por script */
    width: 80%; /* Ancho relativo al contenedor padre */
    /* ... (resto de propiedades) */
}

/* Estilo para las imágenes de los productos */
.wp-image img {
    max-height: 1000px; /* Altura máxima para la imagen */
    width: auto; /* Ajuste automático del ancho para mantener la proporción */
    /* ... (resto de propiedades) */
}

/* Estilo para el nombre del producto */
.product-name {
    font-size: 2.4em; /* Tamaño de la fuente para mayor prominencia */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra para añadir profundidad */
    /* ... (resto de propiedades) */
}

/* Estilo para la descripción del producto */
.product-description {
    font-size: 2.2em; /* Tamaño de fuente grande para legibilidad */
    padding: 10px; /* Espaciado interno alrededor del texto */
    /* ... (resto de propiedades) */
}

/* Estilo para el precio del producto */
.product-price {
    font-size: 2em; /* Tamaño de fuente destacado */
    font-weight: bold; /* Texto en negrita para enfatizar el precio */
    /* ... (resto de propiedades) */
}

/* Personalizaciones adicionales */
/* Aquí puedes añadir tus propias reglas para cambiar tamaños, colores, etc. */
/* Por ejemplo, para hacer todo el contenido más pequeño: */
.my-custom-content {
    transform: scale(0.4);
    transform-origin: top left;
}



/* ESTILOS PARA EL BLOQUE CONTENEDOR  */
/* Estilos para el contenedor general */
.content-wrapper {
    display: flex;
    align-items: flex-start;
}

/* Estilos para el bloque del shortcode */
.shortcode-block {
    margin-right: 20px; /* Ajusta según sea necesario */
    /* otros estilos según sea necesario */
}

/* Estilos para el bloque personalizado */
.custom-block {
    width: auto;
    height: 200px;
    overflow: auto;
    border: 1px solid #ccc;
    padding: 10px;
    /* otros estilos según sea necesario */
}


/****************************************************************************/
/*                  ESTILOS PARA SHORTCODE RESERVA MESA                     */
/****************************************************************************/

/* ESTILOS PARA SHORTCODE RESERVA MESA */
/* Estilos Generales del Formulario */
.sistema-reserva {
    max-width: 500px;
    margin: 30px auto; /* Aumentar el margen superior e inferior */
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
    font-family: 'Arial', sans-serif;
}

.sistema-reserva h3 {
    text-align: center;
    color: #333;
    margin-bottom: 30px; /* Aumentar el espacio debajo del título */
}

.campo-fecha {
    margin-top: 15px; /* Aumentar el espacio por encima del campo de fecha */
}


/* Estilos de los Inputs y Labels */
.formulario-reserva label {
    display: block;
    margin-bottom: 10px; /* Aumentar el espacio debajo de cada etiqueta */
    font-weight: bold;
    color: #555;
}

.formulario-reserva input[type="text"],
.formulario-reserva input[type="tel"],
.formulario-reserva input[type="email"],
.formulario-reserva input[type="number"],
.formulario-reserva input[type="date"],
.formulario-reserva input[type="time"] {
    width: 100%;
    padding: 12px; /* Aumentar el padding para una mejor apariencia */
    margin-bottom: 15px; /* Aumentar el espacio debajo de cada campo */
    border: 1px solid #ccc; /* Color de borde más suave */
    border-radius: 4px;
    box-sizing: border-box;
}

/* Estilos del Botón de Envío */
/* Estilos para el botón de reserva normal */
input[type="submit"].boton-reserva {
    background-color: #046cfc; /* Color de fondo azul */
    color: white; /* Color del texto en blanco */
    border: none; /* Sin bordes */
    padding: 10px 20px; /* Espaciado interno */
    text-decoration: none; /* Sin subrayado en el texto */
    font-family: 'Roboto', sans-serif; /* Fuente Roboto */
    border-radius: 5px; /* Esquinas redondeadas */
    transition: background-color 0.3s, color 0.3s; /* Transición suave al cambiar de estado */
}

/* Estilos para el botón de reserva al pasar el ratón */
input[type="submit"].boton-reserva:hover {
    background-color: white; /* Color de fondo blanco al pasar el ratón */
    color: #046cfc; /* Color del texto en azul al pasar el ratón */
    border: 2px solid #046cfc; /* Borde azul al pasar el ratón */
}


/* Estilos para mensajes de error o confirmación */
.mensaje {
text-align: center;
margin-top: 20px;
padding: 10px;
color: #fff;
border-radius: 4px;
}

.mensaje.exito {
background-color: #28a745;
}

.mensaje.error {
background-color: #dc3545;
}

/* Estilos adicionales para mejorar la coherencia */
.selector-tiempo {
display: flex;
align-items: center;
margin-bottom: 20px; 
}

.selector-tiempo select {
margin-right: 10px; /* Espacio entre los selectores */
}

.puntos {
font-weight: bold;
margin: 0 5px;
}

/* Estilos específicos para jQuery UI DatePicker */
.ui-datepicker {
    font-family: Arial, sans-serif;
    border: 1px solid #000; /* Borde del calendario */
    background-color: #fff; /* Fondo del calendario */
    color: #000; /* Color del texto */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Estilo para el encabezado del calendario */
.ui-datepicker-header {
    background-color: #000; /* Fondo del encabezado */
    color: white;
    border-bottom: 1px solid #555;
    line-height: 1.8em;
    text-align: center;
}

/* Estilo para los días de la semana */
.ui-datepicker th {
    color: white; /* Color del texto */
    padding: 5px 0;
    background-color: #555; /* Fondo de los días de la semana */
    font-weight: bold;
}

/* Estilo para los días del calendario */
.ui-datepicker td {
    padding: 0;
    border-radius: 4px;
    background-color: #fff; /* Fondo de los días */
}

/* Estilo para los días del calendario al pasar el mouse */
.ui-datepicker td:hover {
    background-color: #eee; /* Efecto hover con un gris claro */
    cursor: pointer;
}

/* Estilo para los días no seleccionables */
.ui-datepicker-unselectable .ui-state-default {
    color: #ccc; /* Color gris para días no seleccionables */
}



/* Estilo para el día actual */
.ui-datepicker-today {
    border-radius: 50%; /* Forma circular para el día actual */
    background-color: #000; /* Fondo negro para el día actual */
    color: white; /* Texto en blanco */
}

.ui-datepicker-today a {
    color: white; /* Texto en blanco para garantizar visibilidad */
    text-decoration: none;
}

/* Estilo para el día seleccionado */
.ui-datepicker td.ui-datepicker-current-day {
    background-color: #555; /* Fondo gris oscuro para el día seleccionado */
    color: white; /* Texto en blanco */
}

.ui-datepicker td.ui-datepicker-current-day a {
    color: white; 
}



/****************************************************************************/
/*           Estilos para shortcode [clienty_back_to_home]                  */
/****************************************************************************/

.clienty-back-to-home {
    display: block;
    position: fixed; /* Fijar el botón en una posición constante */
    top: 6px;      /* Posición superior con algo de margen */
    left: 50%;      /* Centrar horizontalmente */
    transform: translateX(-50%); /* Ajuste fino para el centrado horizontal */
    background-color: #FF00FF; /* Fondo fucsia */
    color: white; /* Texto en blanco */
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    z-index: 1000; /* Asegurarse de que esté por encima de otros elementos */
    border-radius: 10px; /* Bordes más redondeados */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra ligera para resaltar */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Transición suave para los efectos */
}

.clienty-back-to-home:hover, .clienty-back-to-home:active {
    background-color: white; /* Cambio de color al pasar el ratón por encima o al hacer clic */
    color: #FF00FF; /* Texto en fucsia */
    transform: translateX(-50%) scale(0.95); /* Ligeramente más pequeño al interactuar */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Sombra más prominente al interactuar */
}




/****************************************************************************/
/*                  Estilos para shortcode [mi-reserva]                      */
/****************************************************************************/


        .datos-reserva, .datos-contacto {
            border: 2px solid black;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .datos-reserva h3, .datos-contacto h3 {
            margin-top: 0;
        }
        .boton-personalizado {
            background-color: black;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            text-decoration: none;
            transition: background-color 0.3s ease, transform 0.1s ease;
        }
        .boton-personalizado:hover {
            background-color: white;
            color: black;
            text-decoration: none;
        }
        .boton-personalizado:active {
            transform: scale(0.95);
        }


/*****************************************************************************/
/*                 Estilos para shortcode [gestion-reservas]                 */
/*****************************************************************************/


.gestion-reservas {
    border: 1px solid black;
    padding: 15px;
    border-radius: 10px;
}

.gestion-reservas .reserva {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid black;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
}

.gestion-reservas .info-reserva {
    flex-grow: 1;
}

.gestion-reservas .acciones-reserva {
    display: flex;
    gap: 10px;
}

.gestion-reservas .boton {
    background-color: black;
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
}

.gestion-reservas .boton:hover {
    background-color: white;
    color: black;
    border: 1px solid black;
}

.gestion-reservas .boton.rechazar {
    background-color: red;
}

.gestion-reservas .boton.rechazar:hover {
    background-color: white;
    color: red;
    border: 1px solid red;
}



/* BOTON ACTUALIZAR LISTADO  */
.contenedor-actualizar {
    text-align: center;
    margin-bottom: 20px;
}

.boton.actualizar {
    background-color: white; /* Fondo blanco */
    color: black; /* Texto negro */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    border: 2px solid black; /* Borde negro */
    transition: all 0.3s ease; /* Transición suave */
    animation: botonRespirar 4s ease-in-out infinite; /* Animación de "respiración" */
}

.boton.actualizar:hover {
    background-color: black; /* Fondo negro */
    color: white; /* Texto blanco */
    transform: scale(1.1); /* Aumentar el tamaño */
    border: 2px solid white; /* Borde blanco */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); /* Sombra para el efecto de intensidad */
}

@keyframes botonRespirar {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
    }
}




/****************************************************************************/
/*                    BOTON VOLVER A GESTION RESERVAS                       */
/****************************************************************************/



.boton-volver {
    background-color: black;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 30px; /* Espacio adicional por debajo del botón */

}

.boton-volver:hover {
    background-color: white;
    color: black;
    border: 1px solid black;
}

       
/****************************************************************************/
/*                          SHORTCODE [botones]                             */
/****************************************************************************/




/* Estilos para Escritorio */
.custom-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between;
    padding: 20px;
}

.custom-buttons .btn {
    flex-grow: 1;
    padding: 10px 20px;
    text-decoration: none;
    text-align: center;
    border-radius: 15px;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
}

/* Botón principal (sección 1) */
.custom-buttons .btn-section1 {
    background-color: black;
    color: white;
}

.custom-buttons .btn-section1:hover {
    background-color: white;
    color: black;
    border: 2px solid black; /* Borde negro cuando se pasa el ratón por encima */
}

/* Botones secundarios */
.custom-buttons .btn-secondary {
    background-color: white; /* Fondo blanco */
    color: black; /* Letra negra */
    border: 2px solid black; /* Borde negro */
    border-radius: 10px; /* Esquinas redondeadas */
}

.custom-buttons .btn-secondary:hover {
    background-color: black; /* Fondo negro al pasar el ratón */
    color: white; /* Letra blanca al pasar el ratón */
}


/* Estilos para Móviles */
@media (max-width: 768px) {
    .custom-buttons {
        flex-wrap: wrap;
        gap: 10px;
    }

    .custom-buttons .btn {
        flex-basis: 100%; /* Cambiado a 100% para una sola columna */
        margin-bottom: 10px;
        padding: 10px;
        font-size: 14px;
        white-space: normal;
    }
}