/* ============================================================
   CONFIGURACIÓN - MOBILE (<768px)
   Sistema de Administración de Condominios
   ============================================================

   CONTENIDO
   - Config section y config grid (1 columna)
   - Cuentas bancarias (bank-accounts-list, bank-account-card)
   - Filtros de auditoría (inputs, selects, contenedor flex → columna)

   SCOPE: clases genéricas bajo [data-module="configuracion"];
          IDs de filtros de auditoría ya son únicos por nombre.

   ============================================================ */


/* ── SECCIONES DE CONFIGURACIÓN ─────────────────────────────── */

@media screen and (max-width: 768px) {
    #moduleContainer[data-module="configuracion"] .config-section {
        padding: 12px !important;
    }

    #moduleContainer[data-module="configuracion"] .config-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cuentas bancarias */
    #moduleContainer[data-module="configuracion"] .bank-accounts-list {
        gap: 12px !important;
    }

    #moduleContainer[data-module="configuracion"] .bank-account-card {
        padding: 14px !important;
    }
}


/* ── FILTROS DE AUDITORÍA ────────────────────────────────────── */

@media screen and (max-width: 768px) {
    /*
     * IDs de filtros de auditoría — ya son únicos, no necesitan scope adicional.
     * Se mantienen sin scope de módulo por ser IDs específicos.
     */
    #filtroAudModulo,
    #filtroAudAccion,
    #filtroAudUsuario,
    #filtroAudFechaDesde,
    #filtroAudFechaHasta,
    #buscadorAuditoria {
        min-width: 0 !important;
        width: 100% !important;
    }

    /*
     * Contenedor flex de filtros → columna.
     * DEUDA TÉCNICA: selector de atributo sobre style="" generado por JS.
     * SCOPE: limitado a [data-module="configuracion"] para reducir alcance.
     * PLAN: reemplazar por clase .audit-filters-container en Prioridad 3.
     */
    #moduleContainer[data-module="configuracion"] div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 10px"][style*="background: #f9fafb"] {
        flex-direction: column !important;
    }

    #moduleContainer[data-module="configuracion"] div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 10px"][style*="background: #f9fafb"] > div {
        min-width: 0 !important;
        width: 100% !important;
        flex: none !important;
    }
}