/**
 * tnreserva.ios-fixes.css
 * Correcciones de compatibilidad para iOS Safari
 * 
 * Este archivo contiene todos los fixes CSS necesarios para que la aplicación
 * funcione correctamente en dispositivos iOS con Safari.
 * Los cambios están condicionados mediante @supports, media queries y propiedades
 * que son no-ops en escritorio, preservando el comportamiento existente.
 */

/* ==========================================================================
   1. Safe-area insets (Requisito 1.6)
   Aplica padding con env(safe-area-inset-*) para dispositivos con notch (iPhone X+).
   En dispositivos sin notch, env() retorna 0px — sin efecto visual.
   ========================================================================== */

@supports(padding: env(safe-area-inset-bottom)) {
    .navbar-static-side {
        padding-left: env(safe-area-inset-left);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .footer.fixed {
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .navbar-fixed-top,
    .navbar-static-top {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ==========================================================================
   2. Touch-action manipulation (Requisitos 1.10, 1.11)
   Elimina el 300ms tap delay en iOS Safari.
   No afecta dispositivos sin pantalla táctil.
   ========================================================================== */

a,
button,
input,
select,
textarea,
.change_state,
.navbar-minimalize,
.js-switch,
.switchery,
.btn,
.nav > li > a {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

/* ==========================================================================
   3. Cursor pointer para popovers (Requisito 1.7)
   iOS Safari requiere cursor: pointer para disparar eventos click
   en elementos no-interactivos. En escritorio no tiene efecto negativo.
   ========================================================================== */

.change_state,
.js-switch {
    cursor: pointer;
}

/* ==========================================================================
   4. Scroll táctil en sidebar (Requisito 1.1)
   En dispositivos táctiles, usa scroll nativo en lugar de slimScroll.
   @media (pointer: coarse) solo aplica en dispositivos táctiles.
   ========================================================================== */

@media (pointer: coarse) {
    .sidebar-collapse {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        height: 100% !important;
    }
}

/* ==========================================================================
   5. Dropdown scroll contenido (Requisito 1.9)
   Previene bounce effect y propagación del scroll al body.
   -webkit-overflow-scrolling: touch mejora el scroll en iOS.
   overscroll-behavior: contain previene la propagación del scroll.
   ========================================================================== */

.dropdown-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ==========================================================================
   6. Flexbox con prefijos -webkit- (Requisito 1.8)
   Duplica las reglas flexbox de tnreserva.responsive.css con prefijos
   para compatibilidad con iOS Safari < 14.5.
   Reemplaza gap por margin como alternativa compatible.
   ========================================================================== */

@media (max-width: 767.8px) {
    .actions-cell form .actions-container {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
    }

    /* Reemplazar gap: 10px con margin como alternativa compatible */
    .actions-cell form .actions-container > * {
        margin: 0 5px;
    }

    .actions-cell form .actions-container .state-options {
        display: -webkit-flex;
        display: flex;
    }

    .actions-cell form .actions-container .state-options > * {
        margin: 0 5px;
    }

    #table table tbody,
    #table table tbody tr {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: stretch;
        align-items: stretch;
        -webkit-justify-content: stretch;
        justify-content: stretch;
    }

    #table table tbody > tr {
        margin-bottom: 10px;
    }

    .pagination .btn-group {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media (max-width: 360.8px) {
    .actions-cell form .actions-container > * {
        margin: 0 2.5px;
    }

    .actions-cell form .actions-container .state-options > * {
        margin: 0 2.5px;
    }
}

/* ==========================================================================
   7. Modal fix para iOS (Requisito 1.2)
   Neutraliza el transform residual de animate.css en modales .inmodal
   para que position: fixed funcione correctamente en iOS Safari.
   En escritorio, transform: none no afecta el posicionamiento correcto.
   ========================================================================== */

.modal-open .inmodal .modal-content.animated {
    -webkit-transform: none;
    transform: none;
    -webkit-animation-fill-mode: initial;
    animation-fill-mode: initial;
}

/* ==========================================================================
   8. Viewport height utility (Requisito 1.12)
   Clase utilitaria para alturas de viewport dinámicas en iOS Safari.
   100dvh se ajusta dinámicamente cuando la barra de direcciones cambia.
   Fallback a -webkit-fill-available para versiones anteriores.
   ========================================================================== */

.ios-vh-fix {
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
}