/*
Theme Name:  Hello Elementor Child
Description: Tema hijo para hacer personalizaciones de código
Author:      Esthelae
Author URL:  https://tu-sitio.com
Template:    hello-elementor
Version:     1.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hello-elementor-child
*/

/* 🌐 Miniaturas de blog */
.elementor-post__thumbnail {
    position: relative;
    overflow: hidden;
    background-color: transparent;
    aspect-ratio: 3 / 2;
    padding: 0 !important;
    margin: 0 !important;
}

    .elementor-post__thumbnail img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

/* 📆 Calendario de reservas */

/* ⏰ Contenedor de todos los bloques de horario */
#fbuilder .slots {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
}

    /* 📦 Bloques individuales de horario */
    #fbuilder .slots div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 240px !important;
        height: 120px !important;
        margin: 4px !important;
        padding: 0 !important;
        text-align: center !important;
        vertical-align: top !important;
        position: relative !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 10px !important;
    }

        /* 🔗 Enlace horario dentro de cada bloque */
        #fbuilder .slots div a {
            font-size: 2rem !important;
            font-weight: 600 !important;
            padding: 15px 15px !important;
            text-decoration: none !important;
            
            margin: 1px 4px 0 !important;
            border-radius: 10px !important;
            line-height: 1.2 !important;
        }

            #fbuilder .slots div a:hover {
                background-color: #9B1915 !important;
                
            }

            #fbuilder .slots div a.selected {
                color: white !important;
            }

/* 🧊 Slot desactivado visualmente */
.slots div.htmlUsed a {
    background-color: #eeeeee !important;
    
    cursor: not-allowed !important;
}

/* 📆 Estilo para la fecha del día (separada del flex de horarios) */
#fbuilder .slots > span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 30px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}

/* 📱 Responsivo para móviles con horarios en fila */
@media screen and (max-width: 480px) {
    #fbuilder .slots {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
        #fbuilder .slots br {
            display: none !important;
        }

        #fbuilder .slots div {
            width: 45% !important; /* dos bloques por fila aprox. */
            height: auto !important;
            margin: 5px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-direction: row !important;
        }

            #fbuilder .slots div a {
                font-size: 1.5rem !important;
                padding: 10px 12px !important;
                margin: 0 !important;
                width: 100% !important;
            }

                #fbuilder .slots div a.selected {
                    color: white !important;
                }

        #fbuilder .slots.grupo-unico .availableslot {
            width: 50% !important; /* ↔ como los demás */
        }
}

/* Animación y formato para cuando en un horario quedan 2 o menos plazas*/
@keyframes pulso-urgente {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.horario-urgente {
    color: #9B1915 !important;
    font-weight: bold;
    background-color: #fff3f3 !important;
    border: 1px solid #9B1915 !important;
    animation: pulso-urgente 1s ease-in-out infinite;
    border-radius: 4px;
}