* {
    font-family: 'Poppins', 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
}

.space {
    height: 60px;
}

.test {
    border: 1px solid red;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

h1,
h4 {
    text-align: center;
}

.head-title h1 {
    font-weight: 700;
}

.popover-content {
    color: red;
    font-size: 10px;
}


/* -----------------------------------------------------------------------------------BUTTONS----------------------------------------------------------------------------------- */

.citas-box {
    background-color: #e9ecef;
    padding: 20px 100px 100px 100px ;
    text-align: center;
}

.btn-dudas {
    /*background-image: url(/icons/Preguntas.svg);*/
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 50px;
}

.btn-home {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #6687aa;
    color: #ffffff;
    font-weight: 700;
    width: 300px;
}

.btn-home:hover {
    background-color: #003764;
}

.btn-cita {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #6687aa;
    color: #ffffff;
    font-weight: 700;
    width: 100%;
}

.btn-cita:hover {
    background-color: #003764;
}


/* -----------------------------------------------------------------------------------ICONS----------------------------------------------------------------------------------- */

.icon-atras {
    /*width: 4vh;*/
    /*margin-left: 30px;*/
    float: left;
    transition: ease .5s;
}

.icon-atras:hover {
    transform: scale(1.2);
}

.icon-dudas {
    width: 4vh;
    /*margin-right: 30px;*/
    float: right;
    transition: ease .5s;
}

.icon-dudas:hover {
    transform: scale(1.2);
}


/* -----------------------------------------------------------------------------------POPOVER----------------------------------------------------------------------------------- */

.bs-popover-auto[x-placement^=right]>.arrow::after, .bs-popover-right>.arrow::after {
    left: 1px;
    border-width: .5rem .5rem .5rem 0;
    border-right-color: #454645 !important;
    /* background: #454645; */
}
.popover-body {
    background: #6687aa;
    color: #ffffff !important;
    font-size: .9em;
}

.bs-popover-right .arrow::before {
    border-right-color: #6687aa;
}

.bs-popover-right .arrow::after {
    border-right-color: #6687aa;
}

.bs-popover-left .arrow::before {
    border-right-color: #6687aa;
}

.bs-popover-left .arrow::after {
    border-right-color: #6687aa;
}


/* -----------------------------------------------------------------------------------FOOTER----------------------------------------------------------------------------------- */

footer p {
    text-align: center;
    font-size: 0.7em;
    padding: 20px;
}

/* -----------------------------------------------------------------------------------Table Horarios----------------------------------------------------------------------------------- */
.tableFixHead          { overflow: auto; /*height: 100%; */}
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px;}
#tablaHorarios th     {    background-color: #003764;  color: white}
#tablaHorarios tr:hover    {    background-color: rgba(255, 255, 255, 0.8); color: black; font-weight: 600;}

.activeDay{
    background-color: #28a745;
    color: white;
    font-weight: 600;
}
/* -----------------------------------------------------------------------------------Table Horarios----------------------------------------------------------------------------------- */
#ui-datepicker-div { z-index: 2000; }

.invalid-feedback { display: block; }
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
    display: block;
    color: red;
}
.form-control-feedback-error{
    color: red;
}

.solicitanteform-verifycode{
    color: red;
}

.ui-datepicker-calendar .ui-state-default {
    background: white;
    color: black;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ui-datepicker-current-day .ui-state-active {
    background: #2563eb !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ui-datepicker td {
    border: none !important;
}

.ui-datepicker th {
    border: none !important;
}

.ui-datepicker .ui-datepicker-current-day {
    border: none !important;
}

.ui-datepicker .ui-state-default {
    border: none !important;
}

/*---------------------------------------------------------------------------------------------------SCROL -----------------------------------------------*/

::-webkit-scrollbar {
    width: 10px;
    /*display: none;*/
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#calendario .ui-datepicker-inline {
    width: 100% !important; /* Hace que el widget del calendario ocupe completamente el ancho de #calendario */
    max-width: 450px; /* Un ancho máximo para que no se extienda demasiado en pantallas muy grandes */
    margin: 0 auto; /* Centrar si se usa max-width */
}

#calendario .ui-datepicker-group { /* Múltiples meses (numberOfMonths > 1) */
    width: 100%;
}

#calendario .ui-datepicker-calendar {
    width: 100% !important; /* Hace que la tabla del calendario ocupe todo el ancho */
    table-layout: fixed;    /* Distribuye el ancho de las columnas equitativamente */
}

#calendario .ui-datepicker-calendar td,
#calendario .ui-datepicker-calendar th {
    padding: 3px; /* Ajusta el padding para celdas y encabezados de días */
    text-align: center;
}

#calendario .ui-datepicker-calendar td a,
#calendario .ui-datepicker-calendar td span {
    padding: 0.5em 0.3em; /* Ajusta el padding dentro de los días para mejor toque */
    /*display: block;*/
    border-radius: 50% !important; /* Mantiene los círculos que ya tienes */
    width: 2.2em; /* Ancho consistente para los días */
    height: 2.2em; /* Alto consistente para los días */
    line-height: 1.2em; /* Ajustar para centrar el texto verticalmente si es necesario */
    box-sizing: border-box; /* Para que el padding no aumente el tamaño total */
    margin: auto; /* Centrar el círculo dentro de la celda td */
}


/* Estilo del encabezado (Mes y Año) */
#calendario .ui-datepicker-header {
    background: #f1f1f1 !important; /* Un gris muy claro, similar a Bootstrap */
    border-color: #dee2e6 !important;     /* Un borde claro */
    color: #333 !important;               /* Texto oscuro para contraste */
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-radius: 4px 4px 0 0; /* Bordes redondeados arriba */
}

#calendario .ui-datepicker-title {
    color: #333 !important; /* Asegurar que el título del mes/año sea legible */
}

/* Estilo de las flechas de navegación (Modernizadas con Font Awesome) */
#calendario .ui-datepicker-prev .ui-icon,
#calendario .ui-datepicker-next .ui-icon {
    display: none !important; /* Oculta el span default que contiene el icono/texto original */
}

#calendario .ui-datepicker-prev,
#calendario .ui-datepicker-next {
    position: absolute !important;
    top: 35% !important;
    transform: translateY(-50%) !important;
    background: transparent !important; /* Sin fondo */
    border: none !important;            /* Sin borde */
    cursor: pointer !important;
    padding: 10px !important;           /* Área de clic más grande */
    z-index: 1; /* Asegurar que estén por encima de otros elementos del header si es necesario */
}

#calendario .ui-datepicker-prev {
    left: 5px !important;
}

#calendario .ui-datepicker-next {
    right: 5px !important;
}

#calendario .ui-datepicker-prev::before,
#calendario .ui-datepicker-next::before {
    font-family: "Font Awesome 5 Free"; /* Asegúrate que coincide con tu versión de Font Awesome */
    font-weight: 900; /* Para iconos sólidos (fas) */
    color: #4b5563;
    font-size: 1em;  /* Tamaño del icono */
    display: inline-block;
}

#calendario .ui-datepicker-prev:hover::before,
#calendario .ui-datepicker-next:hover::before {
    color: #0056b3; /* Color al pasar el mouse */
}

#calendario .ui-datepicker-prev::before {
    content: "\25C0"; /* Triángulo sólido izquierdo Unicode */
    font-family: inherit; /* Usa la fuente por defecto para mostrar el símbolo Unicode */
    font-size: 1em;
}
#calendario .ui-datepicker-next::before {
    content: "\25B6"; /* Triángulo sólido derecho Unicode */
    font-family: inherit;
    font-size: 1em;
}

/* Estilos para los días del calendario */
#calendario .ui-datepicker-calendar .ui-state-default {
    background: white;
    color: black;
    transition: all 0.2s ease;
}

/* Hover para los días */
#calendario .ui-datepicker-calendar .ui-state-hover {
    background: #e0e0e0 !important;
    color: #333 !important;
}

/* Día actual */
#calendario .ui-datepicker-today .ui-state-default {
    background: #e9ecef;
    color: #232323;
    font-weight: 600;
}

/* Día seleccionado */
#calendario .ui-datepicker-current-day .ui-state-active,
#calendario .ui-datepicker-current-day.ui-datepicker-today .ui-state-active {
    background: #2563eb !important;
    color: white !important;
}

/* Ajustes para pantallas más pequeñas usando Media Queries */
@media (max-width: 767px) { /* Para tablets y móviles */
    .citas-box {
        padding: 20px 20px 50px 20px; /* Menos padding lateral en pantallas pequeñas */
    }

    #calendario .ui-datepicker-calendar td a,
    #calendario .ui-datepicker-calendar td span {
        font-size: 0.85em; /* Números de día ligeramente más pequeños */
        width: 2em;
        height: 2em;
        line-height: 1em; /* Ajustar para centrar */
    }

    #calendario .ui-datepicker-header {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    #calendario .ui-datepicker-title {
        font-size: 0.95em; /* Título del mes/año un poco más pequeño */
    }

    #calendario .ui-datepicker-prev::before,
    #calendario .ui-datepicker-next::before {
        font-size: 1em; /* Iconos de flecha un poco más pequeños */
    }
}

@media (max-width: 480px) { /* Para móviles muy pequeños */
    .citas-box {
        padding: 15px 10px 40px 10px;
    }

    #calendario .ui-datepicker-calendar td a,
    #calendario .ui-datepicker-calendar td span {
        font-size: 0.8em; /* Números de día aún más pequeños */
        width: 1.8em;
        height: 1.8em;
        line-height: 0.8em; /* Ajustar para centrar */
    }

    .section-title { /* Título "ELEGIR FECHA Y HORA" */
        font-size: 0.9em;
    }

    .citas-box h4 { /* Título "AGENDA TU VISITA" */
        font-size: 1.2em;
    }

    #tablaHorarios th, #tablaHorarios td {
        padding: 6px 10px; /* Menos padding en la tabla de horarios */
        font-size: 0.9em;
    }

}

#ui-datepicker-div { z-index: 2000 !important; }