/* =============================================
   FIX RESPONSIVE — FinanceONE
   ============================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
}

.container {
    max-width: 100vw;
    overflow-x: visible;
}

@media (max-width: 900px) {

    /* ===== CONTENEDOR PRINCIPAL ===== */
    .container {
        padding: 6px !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: visible !important;
        box-sizing: border-box !important;
    }

    /* ===== CARDS ===== */
    .card {
        width: 100% !important;
        padding: 10px !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }

    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

        .card-header .actions {
            width: 100% !important;
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 6px !important;
        }

            .card-header .actions .btn {
                flex: 1 1 calc(50% - 6px) !important;
                min-width: 0 !important;
                font-size: .75rem !important;
                padding: 7px 6px !important;
                text-align: center !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

    /* ===== TODOS LOS GRIDS → 1 COLUMNA ===== */
    /* Clases conocidas */
    [class*="form-grid"],
    [class*="cols-"],
    .form-grid,
    .filters,
    .grid-2,
    .grid-3,
    .tab-grid-2,
    .tab-grid-3,
    .resumen-left,
    .resumen-right,
    .resumen-conc,
    .row-1,
    .line,
    .line-top,
    .ingreso-wrap .row-1 {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

        [class*="form-grid"] > *,
        [class*="cols-"] > *,
        .form-grid > *,
        .filters > *,
        .grid-2 > *,
        .grid-3 > *,
        .tab-grid-2 > *,
        .tab-grid-3 > * {
            grid-column: 1 / -1 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

    /* ===== GRIDS INLINE (style="display:grid" o style="grid-template-columns:...") ===== */
    div[style*="grid-template-columns"],
    div[style*="display:grid"],
    div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

        div[style*="grid-template-columns"] > *,
        div[style*="display:grid"] > *,
        div[style*="display: grid"] > * {
            grid-column: 1 / -1 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

    /* ===== CAMPOS DE FORMULARIO ===== */
    .field {
        width: 100% !important;
        max-width: 100% !important;
    }

        .field input,
        .field select,
        .field textarea,
        input.input,
        select.input,
        textarea.input,
        .input {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            font-size: .88rem !important;
        }

    /* ===== TABLAS ===== */
    .table-host {
        width: 100% !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        position: relative !important;
    }

    .solo-pantalla {
        width: 100% !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        position: relative !important;
    }

        .table-host > table,
        .table-host .table,
        .solo-pantalla > table,
        .solo-pantalla .table {
            min-width: 650px !important;
            width: max-content !important;
            display: table !important;
        }

    .table,
    .table-libro,
    .table-retenciones,
    .tbl-mini,
    .month-grid,
    table.table {
        min-width: 650px !important;
        width: max-content !important;
    }

    /* ===== REPORT SHEET ===== */
    .report-sheet {
        width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .report-top {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .report-logo img {
        height: 48px !important;
    }

    .report-headline {
        flex-direction: column !important;
        gap: 4px !important;
        text-align: center !important;
    }

    .report-title {
        font-size: 1rem !important;
    }

    .report-period {
        font-size: .9rem !important;
    }

    .report-meta {
        grid-template-columns: 1fr !important;
        font-size: .8rem !important;
    }

    /* ===== MODALES ===== */
    .modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .modal-card {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 92vh !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .modal-bd {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
    }

        .modal-bd .full,
        .modal-bd > * {
            grid-column: 1 / -1 !important;
            width: 100% !important;
        }

    /* ===== BOTONES EN MODALES ===== */
    .modal-ft {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px !important;
    }

        .modal-ft .btn {
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }

    /* ===== PANEL ===== */
    .panel {
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

        .panel h3 {
            font-size: .95rem !important;
            margin-bottom: 8px !important;
        }

    /* ===== COMBO DROPDOWNS ===== */
    .combo-search,
    .combo-dropdown {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* ===== PRESUPUESTO ===== */
    .month-scroll {
        width: 100% !important;
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ===== CONCILIACIÓN ===== */
    .resumen-conc {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .resumen-right,
    .resumen-left {
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }

    /* ===== FICHAS ===== */
    .ficha-page {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .ficha-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .ficha-label {
        border-bottom: none !important;
        border-radius: 6px 6px 0 0 !important;
    }

    .ficha-value {
        border-left: none !important;
        border-top: none !important;
        border-radius: 0 0 6px 6px !important;
        margin-bottom: 6px !important;
    }

    /* ===== RADIO LINES ===== */
    .radio-line {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* ===== ACCIONES ===== */
    .actions-row {
        justify-content: stretch !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

        .actions-row .btn {
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }

    /* ===== FLEX ROWS → COLUMNA ===== */
    /* Filas flex con múltiples elementos también se apilan */
    div[style*="display:flex"][style*="gap"],
    div[style*="display: flex"][style*="gap"] {
        flex-wrap: wrap !important;
    }

        div[style*="display:flex"][style*="gap"] > *,
        div[style*="display: flex"][style*="gap"] > * {
            flex: 1 1 100% !important;
            min-width: 0 !important;
        }
}