/**
 * Estilos responsive para el modal de vista previa
 * Usado en: page-solicitud-bonificacion.php
 */

@media (max-width: 767.98px) {
    #previewModal .modal-body {
        font-size: 0.6rem !important;
        padding: 0.5rem !important;
        word-break: break-word !important;
    }

    #previewModal td,
    #previewModal th {
        word-break: break-word !important;
    }

    #previewModal .modal-body h1,
    #previewModal .modal-body h2,
    #previewModal .modal-body h3,
    #previewModal .modal-body h4,
    #previewModal .modal-body h5,
    #previewModal .modal-body h6,
    #previewModal .modal-body strong {
        font-size: 0.6rem !important;
    }

    #previewModal .modal-body .container-fluid {
        padding: 0 !important;
    }

    #previewModal .modal-body .card,
    #previewModal .modal-body .card-body {
        padding: 0.4rem !important;
    }

    #previewModal .modal-body .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #previewModal .modal-body [class*="col-"] {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    #previewModal .modal-body .mb-3,
    #previewModal .modal-body .mb-4,
    #previewModal .modal-body .my-3,
    #previewModal .modal-body .my-4 {
        margin-bottom: 0.3rem !important;
    }

    #previewModal .modal-body .p-3,
    #previewModal .modal-body .p-4,
    #previewModal .modal-body .px-3,
    #previewModal .modal-body .px-4,
    #previewModal .modal-body .py-3,
    #previewModal .modal-body .py-4 {
        padding: 0.3rem !important;
    }
}