/* ------------------------------------ */
/* Base del Contenedor del Datepicker   */
/* ------------------------------------ */
.ui-datepicker {
    /* ... (El resto de estilos de base se mantiene igual) ... */
    width: 250px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 8px; 
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    z-index: 9999 !important;
}

/* ------------------------------------ */
/* Cabecera (Mes y Año)                 */
/* ------------------------------------ */
.ui-datepicker-header {
    background-color: #007bff; 
    color: #fff;
    padding: 8px 0;
    border-radius: 6px 6px 0 0;
    margin-bottom: 10px;
    border: none;
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.4;
    position: relative; /* Aseguramos la posición relativa para centrar las flechas */
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .5em 0;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 1.8em;
    line-height: 1.8em;
    text-align: center;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 48%;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 0.85em;
    line-height: 1em;
    margin: 1px 0;
}

/* ------------------------------------ */
/* Botones de Navegación (Flechas)      */
/* ------------------------------------ */

/* Resetear el botón de jQuery UI para usar nuestro propio estilo */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background: none;
    border: none;
    color: transparent; /* Ocultamos el texto base que no queremos ver */
    width: 25px; 
    height: 25px; 
    line-height: 25px;
    text-align: center;
    border-radius: 50%; 
    transition: background-color 0.2s;
    /* !IMPORANTE: Forzamos la posición relativa para que el ::after sea absoluto al botón */
    position: absolute; 
    z-index: 2; /* Aseguramos que estén por encima de la cabecera */
}

/* Posicionamiento y Hover */
.ui-datepicker .ui-datepicker-prev {
    left: 0px; 
}

.ui-datepicker .ui-datepicker-next {
    right: 0px; 
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background-color: rgba(255, 255, 255, 0.2); 
}

/* OCULTAR EL SPAN INTERNO (ui-icon) que podría estar usando la imagen de fondo */
.ui-datepicker .ui-icon {
    display: none; 
}

/* AÑADIR LA FLECHA VISIBLE USANDO PSEUDO-ELEMENTO ::after */

/* Flecha Izquierda (Anterior) */
.ui-datepicker .ui-datepicker-prev::after {
    content: '\25C0'; /* Código Unicode para un triángulo izquierdo sólido (◀) */
    color: #fff; /* Blanco para contraste */
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Flecha Derecha (Siguiente) */
.ui-datepicker .ui-datepicker-next::after {
    content: '\25B6'; /* Código Unicode para un triángulo derecho sólido (▶) */
    color: #fff;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ... (El resto de estilos de la tabla de días se mantiene igual) ... */



/* ------------------------------------ */
/* Tabla de Días                        */
/* ------------------------------------ */
.ui-datepicker table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

/* Encabezados de Días de la Semana */
.ui-datepicker th {
    padding: 5px 0;
    text-align: center;
    font-weight: 600;
    color: #666; /* Gris oscuro */
    border: none;
}

/* Celdas de Días */
.ui-datepicker td {
    padding: 2px;
    border: none;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: 6px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px; /* Esquinas de los días */
    transition: background-color 0.2s, color 0.2s;
    color: #333;
    border: 1px solid transparent; /* Para evitar saltos de diseño al seleccionar */
}

.ui-datepicker td a:hover {
    background-color: #f0f0f0; /* Fondo gris claro al pasar el ratón */
    color: #333;
}

/* Día Seleccionado (Hoy) */
.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-state-active {
    background-color: #007bff; /* Color primario: Azul */
    color: #fff !important;
    font-weight: 600;
    border: 1px solid #007bff;
}

/* Días no Seleccionables o de otro mes */
.ui-datepicker .ui-state-disabled span {
    color: #ccc;
}

.ui-datepicker .ui-datepicker-unselectable span {
    color: #ccc;
}

.ui-datepicker .ui-datepicker-other-month .ui-state-default {
    color: #aaa; /* Días de meses anteriores/siguientes más claros */
    opacity: 0.7;
}

/* Botones y Pie (si se usan, como "Hoy" o "Cerrar") */
.ui-datepicker button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s;
}

.ui-datepicker button:hover {
    background-color: #0056b3;
}