/* ============================================================
   ⚠ DEUDA TÉCNICA — PARCHES TEMPORALES RESPONSIVE
   Sistema de Administración de Condominios
   ============================================================

   IMPORTANTE: Todo lo que está en este archivo son parches
   temporales que existen porque JS genera inline styles (style="")
   en elementos del DOM, y CSS necesita sobreescribirlos en móvil.

   NO agregar nuevas reglas aquí sin documentar:
     - Qué JS genera el style="" que se está compensando
     - Qué archivo y línea de JS lo origina
     - Cuál es el plan de migración a clase CSS

   PLAN DE ELIMINACIÓN (Prioridad 3 del plan de arquitectura):
     - Grupo A (Modales inline): eliminar cuando los módulos JS
       migren a usar la clase .modal-overlay (global/modals.css)
     - Grupo B (Grids inline): eliminar cuando JS use clases
       .grid-cols-* en lugar de style.gridTemplateColumns
     - Grupo C (Flex containers): eliminar progresivamente
       cuando JS use clases semánticas
   ============================================================ */


/* ── GRUPO A: MODALES INLINE (position: fixed generado por JS) ── */
/*
 * CAUSA: pagos.js, directorio.js, cxp.js, nomina.js crean modales
 * con modal.style.cssText = 'position:fixed;top:0;...'
 * PLAN: migrar a modal.className = 'modal-overlay' + global/modals.css
 * ESTADO: pendiente Prioridad 3
 */

@media screen and (max-width: 768px) {
    div[style*="position: fixed"][style*="z-index"] > div[style*="background: white"],
    div[style*="position: fixed"][style*="z-index"] > div[style*="background:white"],
    div[style*="position:fixed"][style*="z-index"] > div[style*="background: white"],
    div[style*="position:fixed"][style*="z-index"] > div[style*="background:white"] {
        width: 95% !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        border-radius: 8px !important;
    }

    div[style*="position: fixed"][style*="z-index"][style*="display: flex"],
    div[style*="position: fixed"][style*="z-index"][style*="display:flex"],
    div[style*="position:fixed"][style*="z-index"][style*="display: flex"],
    div[style*="position:fixed"][style*="z-index"][style*="display:flex"] {
        padding: 10px !important;
        overflow-y: auto !important;
    }

    div[style*="position: fixed"] div[style*="background: #0a2463"],
    div[style*="position:fixed"] div[style*="background: #0a2463"],
    div[style*="position: fixed"] div[style*="background:#0a2463"],
    div[style*="position:fixed"] div[style*="background:#0a2463"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    div[style*="position: fixed"] div[style*="background: #0a2463"] button,
    div[style*="position:fixed"] div[style*="background: #0a2463"] button,
    div[style*="position: fixed"] div[style*="background:#0a2463"] button,
    div[style*="position:fixed"] div[style*="background:#0a2463"] button {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
}

@media screen and (max-width: 480px) {
    div[style*="position: fixed"][style*="z-index"] > div[style*="background: white"],
    div[style*="position: fixed"][style*="z-index"] > div[style*="background:white"],
    div[style*="position:fixed"][style*="z-index"] > div[style*="background: white"],
    div[style*="position:fixed"][style*="z-index"] > div[style*="background:white"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }

    div[style*="position: fixed"][style*="z-index"][style*="display: flex"],
    div[style*="position: fixed"][style*="z-index"][style*="display:flex"],
    div[style*="position:fixed"][style*="z-index"][style*="display: flex"],
    div[style*="position:fixed"][style*="z-index"][style*="display:flex"] {
        padding: 0 !important;
    }
}

/* ── GRUPO A.2: INPUTS DE BÚSQUEDA CON ANCHO FIJO (módulo Pagos) ── */
/*
 * CAUSA: Pagos renderiza inputs de búsqueda (#buscadorHistorial,
 * #buscadorEstadoCuenta) sin clase responsive — ancho queda fijo.
 * PLAN: agregar clase al elemento en pagos.js o en su template HTML.
 * ESTADO: pendiente Prioridad 2 (módulos grandes)
 */

@media screen and (max-width: 768px) {
    #buscadorEstadoCuenta {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 12px !important;
    }

    #buscadorHistorial {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 12px !important;
    }

    #buscadorEstadoCuentaWrap { width: 100% !important; }

    #estadoCuentaConcepto {
        max-width: 100% !important;
        width: 100% !important;
    }

    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"] {
        flex-wrap: wrap !important;
    }
}

/* ── GRUPO B: GRIDS DE FORMULARIOS INLINE ────────────────────── */
/*
 * CAUSA: Los módulos generan elementos con style="grid-template-columns: X"
 * directamente en el HTML renderizado por JS.
 *
 * EXCEPCIÓN: div[style*="repeat(7"] (calendario) — NO colapsar.
 * EXCEPCIÓN: div[style*="auto 1fr"] (labels de recibo) — mantener.
 *
 * ESTADO: pendiente Prioridad 3 (migración JS → clases)
 */

@media screen and (max-width: 768px) {
    div[style*="grid-template-columns: 1fr 1fr"]:not([style*="grid-template-columns: 1fr 1fr 1fr"]),
    div[style*="grid-template-columns:1fr 1fr"]:not([style*="grid-template-columns:1fr 1fr 1fr"]) {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: 1fr 1fr 1fr"],
    div[style*="grid-template-columns:1fr 1fr 1fr"],
    div[style*="grid-template-columns: repeat(3"],
    div[style*="grid-template-columns:repeat(3"],
    div[style*="grid-template-columns: repeat(3, 1fr)"],
    div[style*="grid-template-columns:repeat(3, 1fr)"],
    div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: repeat(2"],
    div[style*="grid-template-columns:repeat(2"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: repeat(4"],
    div[style*="grid-template-columns: repeat(5"],
    div[style*="grid-template-columns: repeat(6"],
    div[style*="grid-template-columns:repeat(4"],
    div[style*="grid-template-columns:repeat(5"],
    div[style*="grid-template-columns:repeat(6"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="grid-template-columns: 2fr 1.2fr"],
    div[style*="grid-template-columns:2fr 1.2fr"],
    div[style*="grid-template-columns: 1.5fr 0.9fr"],
    div[style*="grid-template-columns:1.5fr 0.9fr"],
    div[style*="grid-template-columns: 1.5fr 0.9fr 1.3fr"],
    div[style*="grid-template-columns:1.5fr 0.9fr 1.3fr"],
    div[style*="grid-template-columns: 1.8fr 0.8fr 1.3fr"],
    div[style*="grid-template-columns:1.8fr 0.8fr 1.3fr"],
    div[style*="grid-template-columns: 0.9fr 0.9fr 0.8fr 1.4fr"],
    div[style*="grid-template-columns:0.9fr 0.9fr 0.8fr 1.4fr"],
    div[style*="grid-template-columns: 1.5fr 0.6fr 0.6fr"],
    div[style*="grid-template-columns:1.5fr 0.6fr 0.6fr"],
    div[style*="grid-template-columns: 1fr 2fr"],
    div[style*="grid-template-columns:1fr 2fr"],
    div[style*="grid-template-columns: 3fr 1fr 1fr"],
    div[style*="grid-template-columns:3fr 1fr 1fr"],
    div[style*="grid-template-columns: 3fr 1fr"],
    div[style*="grid-template-columns:3fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: 1fr 220px"],
    div[style*="grid-template-columns:1fr 220px"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: 1.5fr 1.5fr 55px"],
    div[style*="grid-template-columns:1.5fr 1.5fr 55px"],
    div[style*="grid-template-columns: 0.8fr 0.7fr 0.7fr"],
    div[style*="grid-template-columns:0.8fr 0.7fr 0.7fr"],
    div[style*="grid-template-columns: 1.2fr 1fr 1fr 1fr"],
    div[style*="grid-template-columns:1.2fr 1fr 1fr 1fr"],
    div[style*="grid-template-columns: 1.2fr 1fr 1fr 0.8fr"],
    div[style*="grid-template-columns:1.2fr 1fr 1fr 0.8fr"],
    div[style*="grid-template-columns: 0.8fr 1fr 1.2fr 1.2fr 1fr"],
    div[style*="grid-template-columns:0.8fr 1fr 1.2fr 1.2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: 1fr 1fr 80px"],
    div[style*="grid-template-columns:1fr 1fr 80px"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="display:grid"][style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
        grid-template-columns: 1fr !important;
    }

    div[style*="display: grid"],
    div[style*="display:grid"] {
        gap: 10px !important;
    }

    /* EXCEPCIÓN: Calendario (7 columnas) — NO colapsar */
    div[style*="grid-template-columns: repeat(7"],
    div[style*="grid-template-columns:repeat(7"] {
        grid-template-columns: repeat(7, 1fr) !important;
    }

    /* EXCEPCIÓN: auto 1fr (labels de recibo) — mantener */
    div[style*="grid-template-columns: auto 1fr"],
    div[style*="grid-template-columns:auto 1fr"] {
        grid-template-columns: auto 1fr !important;
    }

    /* Dense grids (120px 1fr) → 2 columnas en tablet */
    div[style*="grid-template-columns: 120px 1fr"],
    div[style*="grid-template-columns:120px 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media screen and (max-width: 480px) {
    div[style*="grid-template-columns: 120px 1fr"],
    div[style*="grid-template-columns:120px 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── GRUPO C: FLEX CONTAINERS CON ANCHOS FIJOS EN JS ────────── */
/*
 * CAUSA: Barras de herramientas, selects e inputs con width/max-width
 * fijo aplicado mediante style="" en JS o en templates HTML.
 *
 * PLAN: Agregar clases semánticas a los contenedores afectados.
 * ESTADO: pendiente Prioridad 3
 */

@media screen and (max-width: 768px) {
    div[style*="display: flex"][style*="justify-content: space-between"][style*="align-items: center"] {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    select[style*="max-width: 200px"],
    select[style*="max-width:200px"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    input[style*="width: 220px"],
    input[style*="width:220px"],
    input[style*="width: 180px"],
    input[style*="width:180px"] {
        width: 100% !important;
    }

    table td button,
    .data-table td button,
    .dir-table td button {
        padding: 6px 10px !important;
        font-size: 14px !important;
    }
}