/*caracteristicas del calendario*/
#fbuilder .ui-datepicker-inline{background:#ffffff00!important;padding-bottom:5px}
#fbuilder .ui-datepicker th{background:#C7F2FF!important}
#fbuilder .ui-datepicker-header{background:#078cc0!important}
#fbuilder .ui-datepicker-title{color:#fff!important}

/* PONER EN ROJO LO COMPLETO */
#fbuilder .notavailslot.ui-datepicker-unselectable .ui-state-default {background:#f30400!Important}

/* CAMBIAR A NARANJA CUANDO SE SELECCIONA ALGO*/ 
.ahb_booked5 a,.ahb_booked6 a,.ahb_booked7 a,.ahb_booked8 a,.ahb_booked9 a {background:#ffb211!important;}

/* QUITAR EL MENU DE ARRIBA */
.ahbfield_service { display: none } 

/* QUITAR EL * DE ARRIBA */
#fbuilder label .r {display: none}

/*codigo nuevo*/

/* Ocultar SIEMPRE el texto original del plugin */
.slots a {
    font-size: 0 !important;
    color: transparent !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 130px !important;
    height: 48px !important;
    overflow: hidden !important;
}

/* Ocultar disponibilidad solo en libres */
.availableslot a .ahb_slot_availability {
    display: none !important;
}

/* ================================
   MAÑANA / TARDE en TODOS los estados
   (verde, azul, gris)
   ================================ */

/* MAÑANA si h1 < 12: h1 en DIV o en A */
.slots div[h1="8"] a::before,
.slots div[h1="9"] a::before,
.slots div[h1="10"] a::before,
.slots div[h1="11"] a::before,
.slots a[h1="8"]::before,
.slots a[h1="9"]::before,
.slots a[h1="10"]::before,
.slots a[h1="11"]::before {
    content: "MAÑANA";
}

/* TARDE si h1 >= 12: h1 en DIV o en A */
.slots div[h1="12"] a::before,
.slots div[h1="13"] a::before,
.slots div[h1="14"] a::before,
.slots div[h1="15"] a::before,
.slots div[h1="16"] a::before,
.slots div[h1="17"] a::before,
.slots div[h1="18"] a::before,
.slots a[h1="12"]::before,
.slots a[h1="13"]::before,
.slots a[h1="14"]::before,
.slots a[h1="15"]::before,
.slots a[h1="16"]::before,
.slots a[h1="17"]::before,
.slots a[h1="18"]::before {
    content: "TARDE";
}

/* Estilo del texto (mismo para verde, azul y gris) */
.slots a::before {
    font-size: 17px !important;
    font-weight: bold;
    color: #fff !important;   /* blanco para que se vea en azul y gris */
    position: absolute;
    z-index: 9999 !important;
    pointer-events: none;
}

/* Turno libre (verde) */
.availableslot a {
    background: #6dde40 !important;
    border: 5px solid #66CCFF !important;
}

/* Hover verde */
.availableslot a:hover {
    background: #66CCFF !important;
}

/* Turno usado (gris oscuro) */
.htmlUsed a {
    background: #7a7a7a !important;
}

/* Turno seleccionado (azul) */
.currentSelection a {
    background: #3995D0 !important;
}

/*chuminas*/

/* ============================================
   EFECTO: RESPLANDOR PULSANTE + HALO CIRCULAR
   Solo cuando el turno está seleccionado
   ============================================ */

.currentSelection a {
    position: relative !important;
    overflow: visible !important; /* necesario para el halo */
	animation: engorde 0.35s ease-out;
}
/* 1. Engorde suave */ 
@keyframes engorde { 
	0% { transform: scale(1); } 
	40% { transform: scale(1.12); } 
	100% { transform: scale(1); } 
}

/* Halo circular */
.currentSelection a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0px;
    height: 0px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: halo 1.2s ease-out forwards;
    pointer-events: none;
}

/* Resplandor pulsante */
.currentSelection a::before {
    animation: pulso 1.4s ease-in-out infinite;
}

/* Animación del halo */
@keyframes halo {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0.8;
    }
    70% {
        width: 180px;
        height: 180px;
        opacity: 0.15;
    }
    100% {
        width: 220px;
        height: 220px;
        opacity: 0;
    }
}

/* Animación del resplandor pulsante */
@keyframes pulso {
    0% {
        text-shadow: 0 0 4px rgba(255,255,255,0.6);
    }
    50% {
        text-shadow: 0 0 12px rgba(255,255,255,0.9);
    }
    100% {
        text-shadow: 0 0 4px rgba(255,255,255,0.6);
    }
}


/*#9C5E3F color marron
 #3995D0 azul oscuro*/