@media (max-width: 768px) {
    /* Rule 1: Standardize inputs, selects and textareas */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important;
        padding: 12px 15px !important;
        height: auto !important;
        min-height: 48px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Rule 2: Textareas specialized height */
    textarea.form-control,
    textarea {
        min-height: 120px !important;
    }

    /* Rule 3: Form labels readability */
    .form-label, label {
        font-size: 16px !important;
        margin-bottom: 10px !important;
        font-weight: 600 !important;
        display: block !important;
        text-align: left !important;
    }

    /* Rule 4: Group spacing */
    .form-group {
        margin-bottom: 25px !important;
        width: 100% !important;
    }

    /* Rule 5: Standardize buttons for mobile */
    .btn {
        width: 100% !important;
        margin-bottom: 12px !important;
        padding: 15px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 48px !important;
        white-space: normal !important;
    }

    .btn i {
        margin-right: 12px !important;
        font-size: 20px !important;
    }

    /* Rule 6: Fix column stacking for erroneously used col-* classes */
    .row > [class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 10px;
    }

    /* Rule 7: Container adjustments */
    .content-body {
        padding: 15px 10px !important;
    }
    
    .panel_header {
        padding: 15px !important;
    }
    
    .panel_header h2 {
        font-size: 22px !important;
        float: none !important;
        text-align: center !important;
    }

    /* Rule 8: Headings full width */
    h1, h2, h3, h4, h5, h6 {
        width: 100% !important;
        display: block !important;
        float: none !important;
    }

    /* Rule 9: Table-responsive behavior */
    .table-responsive {
        border: 0 !important;
        margin-bottom: 20px !important;
    }

    /* Rule 9: Scrollable Tabs for mobile */
    .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-bottom: 1px solid #dee2e6 !important;
        margin-bottom: 20px !important;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto !important;
    }

    .nav-tabs .nav-link {
        white-space: nowrap !important;
        padding: 10px 15px !important;
    }

    /* Rule 10: Specific adjustment for Antecedentes buttons (2 columns) */
    #antecedentes {
        text-align: center !important;
        padding: 0 !important;
    }

    #antecedentes .btn-group {
        width: 48% !important;
        margin: 1% !important;
        display: inline-block !important;
    }

    #antecedentes .btn-group .btn {
        width: 100% !important;
        margin-bottom: 0 !important;
        padding: 10px 5px !important;
        font-size: 13px !important;
        min-height: 44px !important;
    }

    #antecedentes h5 {
        margin-top: 20px !important;
        margin-bottom: 15px !important;
        font-size: 18px !important;
    }

    #antecedentes .btn-block {
        width: 100% !important;
        margin-top: 10px !important;
    }

    /* Rule 11: Hide search icons and their containers on mobile to save space */
    .fa-search,
    .input-group-prepend .input-group-text i.fa-search,
    .input-group-prepend:has(.fa-search),
    .input-group-text:has(.fa-search) {
        display: none !important;
    }

    /* Fallback for environments where :has() is not supported */
    .input-group-prepend .input-group-text {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    
    .input-group-prepend > .input-group-text:has(.fa-search) {
        display: none !important;
    }
}