/**
 * DATEPICKER MEJORADO - Gravity Forms
 * Estilos personalizados para jQuery UI Datepicker
 */

/* Ocultar datepicker vacío antes de cargar */
.ui-datepicker:empty,
.ui-datepicker-inline:empty {
    display: none !important;
}

/* Contenedor principal del datepicker - FORZAR fondo blanco */
.xxx_ui-datepicker,
.xxx_ui-datepicker.ui-widget,
.xxx_ui-datepicker.ui-widget-content,
#xxx_ui-datepicker-div {
    width: 100% !important;
    max-width: 380px !important;
    min-width: 320px !important;
    padding: 20px !important;
    background: var(--color-contrast) !important;
    background-color: var(--color-contrast) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    font-family: var(--font-body) !important;
    z-index: 99999 !important;
    overflow: hidden !important;
}

/* Eliminar cualquier línea/borde interno */
.ui-datepicker *,
#ui-datepicker-div * {
    border-collapse: collapse !important;
}

/* Header con mes y año - VISIBLE */
.ui-datepicker .ui-datepicker-header,
.ui-datepicker-header {
    background: var(--color-contrast) !important;
    background-color: var(--color-contrast) !important;
    border: none !important;
    border-bottom: none !important;
    padding: 10px 8px 20px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

.ui-datepicker .ui-datepicker-title,
.ui-datepicker-title {
    font-size: var(--font-base) !important;
    font-weight: 600 !important;
    color: var(--color-base) !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex-grow: 1 !important;
    justify-content: center !important;
}

.ui-datepicker .ui-datepicker-title select,
.ui-datepicker-title select,
.ui-datepicker-month,
.ui-datepicker-year {
    font-size: var(--font-base) !important;
    font-weight: 600 !important;
    color: var(--color-base) !important;
    border: 1px solid var(--color-neutral-100) !important;
    background: var(--color-contrast) !important;
    cursor: pointer !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    margin: 0 4px !important;
}

.ui-datepicker .ui-datepicker-title select:hover {
    background: var(--color-neutral-50) !important;
    border-color: var(--color-racc-500) !important;
}

/* Botones de navegación */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker-prev,
.ui-datepicker-next {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--color-neutral-50) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    top: 12px !important;
    border: none !important;
    position: relative !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: var(--color-racc-500) !important;
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon,
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
    background-image: none !important;
    text-indent: 0 !important;
    display: block !important;
    font-size: 0 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
}

.ui-datepicker-prev .ui-icon::before,
.ui-datepicker-next .ui-icon::before {
    content: '' !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border: solid var(--color-base) !important;
    border-width: 0 2.5px 2.5px 0 !important;
}

.ui-datepicker-prev .ui-icon::before {
    transform: rotate(135deg) !important;
    margin-left: 4px !important;
}

.ui-datepicker-next .ui-icon::before {
    transform: rotate(-45deg) !important;
    margin-right: 4px !important;
}

/* Tabla del calendario */
.ui-datepicker table,
.ui-datepicker-calendar {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 6px !important;
    margin: 0 !important;
    background: var(--color-contrast) !important;
    border: none !important;
}

/* Altura fija para tbody - siempre 6 filas para evitar saltos */
.ui-datepicker-calendar tbody {
    display: block !important;
    min-height: 312px !important; /* 6 filas x 52px (42px día + 10px spacing) */
}

.ui-datepicker-calendar tbody tr {
    display: flex !important;
    justify-content: space-around !important;
}

/* Eliminar líneas entre header y tabla */
.ui-datepicker-header + table,
.ui-datepicker-header + .ui-datepicker-calendar {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Días de la semana (header) */
.ui-datepicker thead,
.ui-datepicker-calendar thead {
    display: block !important;
}

.ui-datepicker thead tr,
.ui-datepicker-calendar thead tr {
    display: flex !important;
    justify-content: space-around !important;
}

.ui-datepicker th,
.ui-datepicker-calendar thead th {
    font-size: var(--font-tiny) !important;
    font-weight: 700 !important;
    color: var(--color-neutral-700) !important;
    text-transform: uppercase !important;
    padding: 10px 0 !important;
    text-align: center !important;
    background: var(--color-contrast) !important;
    border: none !important;
    flex: 1 !important;
    min-width: 42px !important;
}

/* Celdas de los días */
.ui-datepicker td,
.ui-datepicker-calendar td {
    padding: 0 !important;
    background: var(--color-contrast) !important;
    border: none !important;
    flex: 1 !important;
    min-width: 42px !important;
    margin: 3px 0 !important;
}

.ui-datepicker td a,
.ui-datepicker td span,
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span,
.ui-state-default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    font-size: var(--font-small) !important;
    font-weight: 600 !important;
    color: var(--color-base) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border: 2px solid transparent !important;
    background: var(--color-contrast) !important;
    background-color: var(--color-contrast) !important;
}

.ui-datepicker td a:hover,
.ui-datepicker-calendar td a:hover,
.ui-state-default:hover {
    background: var(--color-contrast) !important;
    border-color: var(--color-neutral-300) !important;
}

/* Día actual */
.ui-datepicker td.ui-datepicker-today {
    background: transparent !important;
}

.ui-datepicker td.ui-datepicker-today a,
.ui-datepicker-today a {
    background: var(--color-racc-200) !important;
    background-color: var(--color-racc-200) !important;
    border: 2px solid var(--color-racc-500) !important;
    font-weight: 700 !important;
}

/* Día seleccionado */
.ui-datepicker .ui-state-active,
.ui-datepicker-calendar .ui-state-active,
.ui-state-active {
    background: var(--color-racc-500) !important;
    background-color: var(--color-racc-500) !important;
    color: var(--color-base) !important;
    font-weight: 700 !important;
    border-color: var(--color-racc-500) !important;
}

/* Días de otros meses (grises claros) */
.ui-datepicker-other-month,
.ui-datepicker-other-month span,
.ui-datepicker-other-month a,
.ui-priority-secondary {
    opacity: 0.4 !important;
}

/* Días deshabilitados */
.ui-datepicker-unselectable,
.ui-datepicker-unselectable span,
.ui-state-disabled,
.ui-state-disabled span {
    color: var(--color-neutral-300) !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

/* Input de fecha - mejoras */
.xxx_gform_wrapper .gfield input.datepicker,
.xxx_gform_wrapper .gfield input[type="text"].datepicker,
.xxx_ginput_container_date input {
    font-size: var(--font-base) !important;
    padding: 14px 16px !important;
    border: 2px solid var(--color-neutral-100) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--color-contrast) !important;
}

.gform_wrapper .gfield input.datepicker:focus,
.ginput_container_date input:focus {
    border-color: var(--color-racc-500) !important;
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(255, 212, 0, 0.25) !important;
}

/* Botón de cerrar (X) arriba a la derecha - Desktop y móvil */
.ui-datepicker .ui-datepicker-header .datepicker-close-btn {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    width: 28px !important;
    height: 28px !important;
    background: var(--color-contrast) !important;
    border: 2px solid var(--color-neutral-100) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--font-small) !important;
    color: var(--color-neutral-700) !important;
    cursor: pointer !important;
    z-index: 100 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.ui-datepicker .ui-datepicker-header .datepicker-close-btn:hover {
    background: var(--color-neutral-50) !important;
    border-color: var(--color-neutral-300) !important;
}

.ui-datepicker .ui-datepicker-header .datepicker-close-btn:active {
    background: var(--color-neutral-100) !important;
    transform: scale(0.95) !important;
}

/* Responsive - móvil: FULL WIDTH centrado */
@media screen and (max-width: 768px) {
    .ui-datepicker,
    .ui-datepicker.ui-widget,
    #ui-datepicker-div {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        max-width: none !important;
        min-width: auto !important;
        max-height: 85vh !important;
        overflow: visible !important;
        /* Overlay oscuro usando box-shadow gigante */
        box-shadow: 
            0 10px 40px rgba(0, 0, 0, 0.3),
            0 0 0 100vmax rgba(0, 0, 0, 0.5) !important;
    }

    /* Botón más grande en móvil para mejor toque */
    .ui-datepicker .ui-datepicker-header .datepicker-close-btn {
        top: -12px !important;
        right: -12px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: var(--font-base) !important;
    }

    .ui-datepicker td a,
    .ui-datepicker td span,
    .ui-datepicker-calendar td a,
    .ui-datepicker-calendar td span {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        font-size: var(--font-base) !important;
        background: var(--color-contrast) !important;
        background-color: var(--color-contrast) !important;
    }

    /* Asegurar que td no tiene fondo visible */
    .ui-datepicker td,
    .ui-datepicker-calendar td {
        background: transparent !important;
        overflow: visible !important;
    }

    /* Día de hoy en móvil */
    .ui-datepicker td.ui-datepicker-today a,
    .ui-datepicker-today a {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: var(--color-racc-200) !important;
        background-color: var(--color-racc-200) !important;
        border: 2px solid var(--color-racc-500) !important;
    }

    /* Día seleccionado en móvil */
    .ui-datepicker .ui-state-active,
    .ui-datepicker-calendar .ui-state-active,
    .ui-state-active {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: var(--color-racc-500) !important;
        background-color: var(--color-racc-500) !important;
        border: none !important;
    }

    .ui-datepicker-calendar {
        border-spacing: 4px !important;
    }

    .ui-datepicker-calendar tbody {
        min-height: 348px !important; /* 6 filas x 58px (50px día + 8px spacing) */
    }

    .ui-datepicker th,
    .ui-datepicker-calendar thead th {
        font-size: var(--font-tiny) !important;
        padding: 8px 0 !important;
    }
}

/* Animación de entrada - sin efecto de "plegado" */
.ui-datepicker {
    animation: datepickerFadeIn 0.15s ease-out !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Asegurar que no hay líneas/bordes internos */
.ui-datepicker hr {
    display: none !important;
}

/* Forzar visibilidad del header */
.ui-datepicker .ui-datepicker-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@keyframes datepickerFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    @keyframes datepickerFadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}