.pointer {
    cursor: pointer;
}

#divLetrosCargando, #cargado, #horasDisponibles {
    display: none;
}
.scrollable-table-container {
    overflow-y: scroll;
    max-height: 23vh;
    display: none;
}

/* Ajustes para el contenedor del calendario */
#calendario {
    width: 100%;
    margin: 0 auto;
}

/* Ajustar el ancho del datepicker */
.ui-datepicker {
    width: 100% !important;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Ajustar el ancho de la tabla del calendario */
.ui-datepicker-calendar {
    width: 100% !important;
    margin: 0 auto;
}

/* Asegurar que las celdas tengan el mismo ancho */
.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
    width: 14.28%; /* 100% / 7 días */
    padding: 2px;
    text-align: center;
}

/* Estilos para resaltar el día actual en el calendario */
.ui-datepicker .ui-datepicker-today .ui-state-active,
.ui-datepicker .ui-datepicker-today .ui-state-hover,
.ui-datepicker .ui-datepicker-today.today .ui-state-default {
    background: #f0ad4e !important;
    color: #fff !important;
    font-weight: bold;
}

/* Estilo para el borde del día actual */
.ui-datepicker .ui-datepicker-today.today .ui-state-default {
    /*border: 2px solid #eea236;*/
}

/* Estilo para días no disponibles */
.ui-datepicker .disabled-day .ui-state-default {
    color: #ccc !important;
    text-decoration: line-through;
    cursor: not-allowed;
    background: #f5f5f5 !important;
}

/* Estilo para el día seleccionado */
.ui-datepicker .ui-datepicker-current-day .ui-state-active {
    background: #5cb85c !important;
    color: #fff !important;
}

/* Asegurar que el texto sea legible en todos los estados */
.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default {
    color: #333;
}

/* Mejorar el hover en los días */
.ui-datepicker .ui-state-hover {
    background: #e6e6e6 !important;
    border-color: #adadad !important;
}

/* Estilos para el encabezado del calendario */
.ui-datepicker .ui-datepicker-header {
    background: #f1f1f1;
    border: none;
    border-radius: 0;
    padding: 10px 0;
    margin-bottom: 5px;
}

/* Título del mes y año */
.ui-datepicker .ui-datepicker-title {
    color: #333;
    font-weight: 600;
}