/* ========================================
   FIX PARA RADZEN DATEPICKER EN TABLETS
   ======================================== */

/* ?? Problema: RadzenDatePicker tiene comportamiento errático en tablets con Chrome
   - El calendario se cierra inmediatamente
   - Los toques no se registran correctamente
   - Difícil seleccionar fechas
*/

/* ? SOLUCIÓN 1: Touch Events Optimizados */

.rz-datepicker,
.rz-calendar {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.rz-datepicker-trigger,
.rz-datepicker input,
.rz-calendar-day {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* ? SOLUCIÓN 2: Áreas Táctiles Aumentadas (Tablets) */

@media (max-width: 1024px) {
    /* Input del DatePicker más grande */
    .rz-datepicker input {
        min-height: 44px !important;
        font-size: 16px !important; /* Evita auto-zoom en iOS */
        padding: 10px 12px !important;
    }

    /* Botón de calendario más grande */
    .rz-datepicker-trigger {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Días del calendario más grandes */
    .rz-calendar-day {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }

    /* Header del calendario */
    .rz-calendar-header button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* ? SOLUCIÓN 3: Delay para Prevenir Cierre Inmediato */

@media (hover: none) and (pointer: coarse) {
    /* Solo en dispositivos táctiles */
    
    .rz-calendar-popup,
    .rz-datepicker-popup {
        animation: delayCalendarInteraction 0.3s;
    }
    
    @keyframes delayCalendarInteraction {
        0% {
            pointer-events: none;
        }
        99% {
            pointer-events: none;
        }
        100% {
            pointer-events: auto;
        }
    }
}

/* ? SOLUCIÓN 4: Z-Index Elevado para Tablets */

@media (max-width: 1024px) {
    .rz-calendar-popup,
    .rz-datepicker-popup {
        z-index: 99999 !important;
        position: fixed !important;
    }

    /* Overlay del calendario */
    .rz-calendar-popup::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        pointer-events: none;
    }
}

/* ? SOLUCIÓN 5: Fix Específico para Chrome en Tablets */

@supports (-webkit-touch-callout: none) {
    .rz-calendar-popup {
        transition: opacity 0.1s ease-in-out;
    }

    .rz-datepicker-trigger:active {
        background-color: inherit !important;
    }
}

/* ? SOLUCIÓN 6: Días del Calendario - Touch Friendly */

.rz-calendar-day {
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.rz-calendar-day:hover {
    background-color: #f3f4f6;
}

.rz-calendar-day:active {
    background-color: #e5e7eb;
    transform: scale(0.95);
}

/* ? SOLUCIÓN 7: Input Nativo HTML5 como Fallback */

/* Esconder input nativo por defecto en desktop */
.date-native-input {
    display: none;
}

@media (max-width: 768px) {
    /* Mostrar input nativo en móvil */
    .date-native-input {
        display: block !important;
    }

    /* Esconder RadzenDatePicker en móvil si hay input nativo */
    .use-native-date .rz-datepicker {
        display: none !important;
    }
}

/* ? SOLUCIÓN 8: Calendario Full-Width en Móvil */

@media (max-width: 768px) {
    .rz-calendar-popup {
        width: 95vw !important;
        max-width: 95vw !important;
        left: 2.5vw !important;
    }

    .rz-calendar {
        width: 100% !important;
    }
}

/* ? SOLUCIÓN 9: Botones de Navegación del Calendario */

.rz-calendar-header button {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.rz-calendar-header button:hover {
    background-color: #f3f4f6;
}

.rz-calendar-header button:active {
    background-color: #e5e7eb;
    transform: scale(0.95);
}

/* ? SOLUCIÓN 10: Prevenir Scroll del Body cuando Calendario Abierto */

@media (max-width: 768px) {
    body:has(.rz-calendar-popup[style*="display: block"]) {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* ? SOLUCIÓN 11: Estado Disabled más Claro */

.rz-datepicker input:disabled {
    background-color: #f3f4f6 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.rz-calendar-day.rz-disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

/* ? SOLUCIÓN 12: Mejoras Visuales para Tablet/Chrome */

@media (max-width: 1024px) {
    /* Sombra más pronunciada */
    .rz-calendar-popup {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 8px !important;
    }

    /* Padding interno del calendario */
    .rz-calendar {
        padding: 12px !important;
    }

    /* Espaciado entre días */
    .rz-calendar-week {
        gap: 4px !important;
    }
}

/* ? SOLUCIÓN 13: Prevenir Doble-Tap Zoom */

.rz-datepicker,
.rz-datepicker *,
.rz-calendar,
.rz-calendar * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Permitir selección de texto solo en el input */
.rz-datepicker input {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* ? SOLUCIÓN 14: Smooth Scrolling en Calendario */

.rz-calendar-months,
.rz-calendar-years {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

/* ? SOLUCIÓN 15: Indicador Visual de Touch */

@media (hover: none) and (pointer: coarse) {
    .rz-calendar-day:active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 90, 159, 0.1);
        border-radius: 4px;
        animation: touchPulse 0.3s;
    }

    @keyframes touchPulse {
        0% {
            opacity: 0;
            transform: scale(0.9);
        }
        50% {
            opacity: 1;
            transform: scale(1.05);
        }
        100% {
            opacity: 0;
            transform: scale(1);
        }
    }
}

/* ? SOLUCIÓN 16: Fix para Selección de Mes/Año */

.rz-calendar-title button {
    padding: 8px 12px !important;
    min-height: 40px !important;
    font-size: 14px !important;
}

.rz-calendar-months-view,
.rz-calendar-years-view {
    padding: 8px !important;
}

.rz-calendar-month,
.rz-calendar-year {
    min-width: 60px !important;
    min-height: 44px !important;
    margin: 4px !important;
}

/* ? SOLUCIÓN 17: Mejoras para Landscape Mode */

@media (max-width: 1024px) and (orientation: landscape) {
    .rz-calendar-popup {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    .rz-calendar-day {
        min-width: 38px !important;
        min-height: 38px !important;
    }
}

/* ? SOLUCIÓN 18: Fix para Very Small Screens */

@media (max-width: 375px) {
    .rz-calendar-day {
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 12px !important;
    }

    .rz-calendar {
        padding: 8px !important;
    }
}

/* ? SOLUCIÓN 19: Prevenir Interferencia con Otros Elementos */

.rz-calendar-popup {
    isolation: isolate;
    contain: layout style;
}

/* ? SOLUCIÓN 20: Transiciones Suaves */

.rz-calendar-popup {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.rz-calendar-popup[data-opening="true"] {
    animation: calendarFadeIn 0.2s ease-in-out;
}

@keyframes calendarFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ? TESTING: Indicador Visual (Comentar en producción) */
/*
@media (hover: none) and (pointer: coarse) {
    .rz-calendar-popup::after {
        content: '?? TOUCH DEVICE - DATEPICKER FIXED';
        position: fixed;
        bottom: 10px;
        left: 10px;
        background: green;
        color: white;
        padding: 5px 10px;
        font-size: 11px;
        z-index: 999999;
        border-radius: 4px;
    }
}
*/