/* Adaptación móvil común para formularios del CRM. */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    max-width: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

form,
fieldset,
.card,
.modal-content {
    max-width: 100%;
}

form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
form select,
form textarea {
    max-width: 100% !important;
}

form textarea {
    resize: vertical;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    body {
        overflow-x: hidden;
    }

    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    header,
    .page-header,
    .cabecera,
    .cabecera-panel,
    .navbar,
    .navbar > .container,
    .navbar > .container-fluid,
    .card-header.d-flex,
    .card-body.d-flex.align-items-center.justify-content-between {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    header .d-flex,
    .page-header .d-flex,
    .cabecera .d-flex,
    .cabecera-panel .d-flex,
    .navbar .d-flex,
    .card-header .d-flex,
    .d-flex.justify-content-between,
    .d-flex.align-items-center.justify-content-between,
    .btn-toolbar,
    .acciones,
    .acciones-superiores {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        max-width: 100%;
    }

    header .btn,
    .page-header .btn,
    .cabecera .btn,
    .cabecera-panel .btn,
    .card-header .btn,
    .navbar .btn,
    .acciones .btn,
    .acciones-superiores .btn {
        max-width: 100%;
        white-space: normal;
    }

    .navbar-brand,
    header img,
    .page-header img,
    .cabecera img,
    .cabecera-panel img {
        max-width: 100%;
        height: auto;
    }

    .navbar-collapse,
    .navbar-nav {
        width: 100%;
        max-width: 100%;
    }

    .navbar-nav {
        align-items: stretch !important;
    }

    .navbar-nav .nav-link,
    .navbar-collapse .btn {
        width: 100%;
        text-align: center;
    }

    .card-header h1,
    .card-header h2,
    .card-header h3,
    header h1,
    header h2,
    header h3 {
        margin-right: 0 !important;
        margin-left: 0 !important;
        overflow-wrap: anywhere;
    }

    form .row {
        --bs-gutter-x: 1rem;
    }

    form .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    form select,
    form textarea,
    form .form-control,
    form .form-select {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
    }

    form [style*="width"],
    form [style*="min-width"],
    form [style*="max-width"] {
        max-width: 100% !important;
    }

    form .d-flex,
    form .btn-group,
    form .input-group {
        flex-wrap: wrap;
    }

    form .input-group > .form-control,
    form .input-group > .form-select {
        flex: 1 1 180px;
    }

    form .btn,
    form button[type="submit"],
    form input[type="submit"] {
        min-height: 44px;
        white-space: normal;
    }

    form .d-grid .btn,
    form .w-100,
    form > .btn[type="submit"] {
        width: 100% !important;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-dialog {
        width: auto;
        max-width: calc(100% - 16px);
        margin: 8px auto;
    }

    .card-body,
    .modal-body {
        padding: 1rem;
    }

    h1 {
        font-size: clamp(1.45rem, 7vw, 2rem);
    }

    h2 {
        font-size: clamp(1.3rem, 6vw, 1.75rem);
    }

    h3 {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }
}