/* Estilos adicionales para prevenir el zoom y desplazamiento lateral */

html, body {
    max-width: 100%;
    overflow-x: hidden;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
}

/* Asegurar que los elementos interactivos tengan suficiente espacio para tocar en móviles */
button, .browse-link, .file-action-btn, .secondary-btn, .action-btn {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

/* Evitar desbordamiento en imágenes */
img {
    max-width: 100%;
    height: auto;
}

/* Asegurar que las tarjetas de PDF se ajusten al ancho disponible */
.pdf-cards-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ajustar el tamaño de los elementos a versión móvil */
@media screen and (max-width: 480px) {
    input[type="text"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* Evitar zoom automático en iOS */
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .range-input-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Mejorar espaciado vertical para elementos apilados */
    .files-list, .pdf-preview, .split-options {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Asegurar que los modales no excedan el ancho de la pantalla */
    .modal-content {
        width: 95% !important;
        max-width: 95vw !important;
        box-sizing: border-box;
    }
}

/* Prevenir que elementos flotantes o posicionados absolutamente causen desbordamiento */
.overlay, .download-overlay, #main-nav, .modal {
    max-width: 100vw;
    box-sizing: border-box;
}