.datepicker {
    font-family: var(--font-secondary);
    font-size: 0.98rem;
}

.datepicker-dropdown {
    min-width: 300px;
    box-shadow: 0 2px 12px rgba(0,87,184,0.08);
    border-radius: var(--esquina-redondeada);
    border: 1px solid var(--card-border);
    background: var(--grid-header);
    z-index: 9999;
}

.datepicker table {
    font-size: 0.98rem;
}

.datepicker-days {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 300px;
}

.datepicker-days th {
    color: var(--navbar-yusapi1);
    font-weight: 600;
    padding: 0.35em 0.7em;
    text-align: center;
    border-radius: var(--esquina-redondeada);
}
.datepicker-days th:hover {
    background-color: var(--card-border);
}

.datepicker-days td {
    padding: 0.35em 0.7em;
    font-family: var(--font-secondary);
    border-radius: var(--esquina-redondeada);
    transition: background 0.15s, color 0.15s;
    text-align: center;
    vertical-align: middle;
}

.datepicker-days td.active, .datepicker-days td.active:hover {
    background: var(--navbar-yusapi1);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,87,184,0.08);
}

.datepicker-days td.day:hover {
    background: var(--card-border);
    color: var(--navbar-yusapi1);
    cursor: pointer;
}

.datepicker-days td.today {
    background: var(--card-border);
    color: var(--navbar-yusapi1);
    font-weight: 600;
}

.datepicker-days td.old, .datepicker-days td.new {
    color: #bfc9da !important;
    opacity: 0.7;
    font-weight: 500;
}

.datepicker-days td.disabled {
    background: var(--grid-header);
    color: var(--text-color) !important;
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
    text-decoration: line-through;
    transition: background 0.2s, color 0.2s;
}

.datepicker-days td.disabled:hover {
    background: var(--grid-border);
    color: var(--text-color) !important;
    cursor: not-allowed;
}

.datepicker .datepicker-switch, 
.datepicker .prev, 
.datepicker .next {
    font-family: var(--font-secondary);
    font-size: 0.98rem;
    color: var(--navbar-yusapi1);
    font-weight: 600;
}

.datepicker .datepicker-switch {
    background: var(--grid-header);
    border-radius: var(--esquina-redondeada);
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
    padding-bottom: 5px;
}

.datepicker .datepicker-switch:hover {
    background: var(--card-border);
}

.datepicker .prev, .datepicker .next {
    background: transparent;
    border-radius: var(--esquina-redondeada);
    padding: 0.2em 0.5em;
}

.datepicker .prev:hover, .datepicker .next:hover {
    background: var(--card-border);
}

.datepicker .prev, 
.datepicker .next {
    background: transparent;
    border-radius: var(--esquina-redondeada);
    padding: 0.2em 0.5em;
    cursor: pointer;
    transition: background 0.15s;
}

.datepicker .prev:hover, 
.datepicker .next:hover {
    background: var(--card-border);
}

/* Ajustar las flechas en meses, años y décadas */
.datepicker-months .next,
.datepicker-years .next,
.datepicker-decades .next {
    position: absolute;
    right: 0;
}

.datepicker-months .prev,
.datepicker-years .prev,
.datepicker-decades .prev {
    position: absolute;
    left: 0;
}

/* Estilos para la vista de selección de meses */
.datepicker-months {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 300px;
}

.datepicker-months .month {
    display: inline-block;
    width: 60px;
    min-height: 40px;
    padding: 0.5em 0.2em;
    margin: 2px;
    font-family: var(--font-secondary);
    font-size: 0.98rem;
    border-radius: var(--esquina-redondeada);
    text-align: center;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s;
    color: var(--navbar-yusapi1);
    font-weight: 500;
    cursor: pointer;
}

.datepicker-months .month:hover,
.datepicker-months .month.focused {
    background: var(--card-border);
    color: var(--navbar-yusapi1);
}

.datepicker-months .month.active {
    background: var(--navbar-yusapi1);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 87, 184, 0.08);
}

/* Estilos para la vista de selección de años */
.datepicker-years {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 300px;
}

.datepicker-years .year {
    display: inline-block;
    width: 61px;
    min-height: 40px;
    padding: 0.5em 0.3em;
    font-family: var(--font-secondary);
    font-size: 0.98rem;
    border-radius: var(--esquina-redondeada);
    text-align: center;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s;
    color: var(--navbar-yusapi1);
    font-weight: 500;
    cursor: pointer;
    margin: 2px;
}

.datepicker-years .year:hover,
.datepicker-years .year.focused {
    background: var(--card-border);
    color: var(--navbar-yusapi1);
}

.datepicker-years .year.active {
    background: var(--navbar-yusapi1);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 87, 184, 0.08);
}

.datepicker-years .datepicker-switch {
    width: 100%;
}

/* Centrar el botón de "Hoy" */
.datepicker .today {
    display: block;
    margin: 0 auto;
    padding: 0.35em 0.7em;
    font-family: var(--font-secondary);
    font-size: 0.98rem;
    color: var(--navbar-yusapi1);
    font-weight: 600;
    border-radius: var(--esquina-redondeada);
    background: var(--grid-header);
    text-align: center;
}
.datepicker .today:hover {
    background: var(--card-border);
    cursor: pointer;
}

/* Estilos para la vista de décadas */
.datepicker-decades {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 305px;
}

.datepicker-decades .decade {
    display: inline-block;
    width: 80px;
    min-height: 40px;
    margin: 4px;
    padding: 0.5em 0.3em;
    font-family: var(--font-secondary);
    font-size: 0.98rem;
    border-radius: var(--esquina-redondeada);
    text-align: center;
    transition: background 0.15s, color 0.15s;
    color: var(--navbar-yusapi1);
    font-weight: 500;
    cursor: pointer;
}

.datepicker-decades .decade:hover {
    background: #e0e7ff;
    color: var(--navbar-yusapi1);
}

.datepicker-decades .decade.active {
    background: var(--navbar-yusapi1);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 87, 184, 0.08);
}

/* Ajustes para mantener consistencia en pantallas pequeñas */
@media (max-width: 600px) {
    .datepicker-dropdown {
        max-width: 350px;
        left: 12vw !important;
        right: 12vw !important;
        box-shadow: 0 2px 12px rgba(0,87,184,0.10);
    }

    .calendar-icon-input {
        right: 0.5em;
    }

    .with-calendar-icon {
        padding-right: 2.5em !important;
    }

    .datepicker-days,
    .datepicker-years,
    .datepicker-decades,
    .datepicker-months {
        max-width: 100%;
    }

    .datepicker-months .month {
        width: 60px;
        padding: 0.6em 0.3em;
    }

    .datepicker-months .month,
    .datepicker-years .year {
        width: 70px;
        min-height: 48px;
        padding: 0.6em 0.5em;
        margin: 3px;
    }

    .datepicker .today {
        padding: 0.5em 1em;
    }

    .datepicker-months .next,
    .datepicker-years .next,
    .datepicker-decades .next {
        right: 1vw;
    }

    .datepicker-months .prev,
    .datepicker-years .prev,
    .datepicker-decades .prev {
        left: 1vw;
    }
}