/* ============================================
   CUENTAS POR PAGAR - MOBILE (<768px + <480px)
   Sistema de Administración de Condominios
   ============================================

   CONTENIDO:
   1. Header: título + botones en columna
   2. Stats bar: flex-wrap 2 columnas
   3. Tabs: wrap 2 columnas
   4. Filtros: columna completa
   5. Tabla: ocultar columnas secundarias, reducir padding
   6. Acciones: wrap con touch targets
   7. Modales: 95% width, forms en columna
   8. Proyección: cards en columna

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


/* ============================================
   1. HEADER
   ============================================ */

/* Anular reglas genéricas de directorio.css que filtran a todos los módulos */
@media (max-width: 768px) {
    #moduleContainer[data-module="cuentas-por-pagar"] .cxp-tabs {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    #moduleContainer[data-module="cuentas-por-pagar"] .cxp-tabs {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        width: 100% !important;
    }
}

/* Anular flex-direction:column que directorio.css aplica genéricamente al header */
@media (max-width: 992px) {
    #moduleContainer > div:first-child > div:first-child.cxp-header-left {
        flex-direction: row !important;
        align-items: center !important;
    }

    #moduleContainer > div.cxp-header,
    #moduleContainer > div:first-child > div:first-child.cxp-header,
    .module-header.cxp-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .module-header.cxp-header .cxp-btn-volver {
        width: auto !important;
    }
}

@media screen and (max-width: 768px) {
    .cxp-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .module-header.cxp-header .cxp-header-left {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .module-header.cxp-header .cxp-btn-volver {
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: none !important;
        padding: 0 12px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    .module-header.cxp-header .cxp-title {
        flex: 1 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .cxp-subtitle {
        font-size: 11px !important;
    }

    .cxp-header-actions {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .cxp-header-actions button {
        flex: 1 !important;
        min-height: 44px !important;
        font-size: 13px !important;
        width: auto !important;
    }
}

/* ============================================
   2. STATS BAR
   ============================================ */

@media screen and (max-width: 768px) {
    .stat-card[data-section="stats"] {
        margin-bottom: 8px !important;
    }

    .stat-card[data-section="stats"] > div {
        flex-wrap: wrap !important;
    }

    .stat-card[data-section="stats"] .stat-info {
        flex: 1 1 40% !important;
        min-width: 0 !important;
        padding: 6px 4px !important;
    }

    .stat-card[data-section="stats"] .stat-info h3 {
        font-size: 12px !important;
    }

    .stat-card[data-section="stats"] .stat-info p {
        font-size: 9px !important;
    }

    /* Ocultar separadores en mobile */
    .stat-card[data-section="stats"] > div > div[style*="width: 2px"] {
        display: none !important;
    }
}

/* ============================================
   3. TABS
   ============================================ */

@media screen and (max-width: 768px) {
    .cxp-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .cxp-toolbar > .cxp-tabs {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
    }

    .cxp-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        width: 100% !important;
    }

    .cxp-tabs .tab-btn {
        flex: 0 0 50% !important;
        white-space: nowrap !important;
        text-align: center !important;
        padding: 8px 12px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    .cxp-tabs .tab-btn:last-child {
        flex: 0 0 100% !important;
    }

    /* Esquinas redondeadas en los bordes */
    .cxp-tabs .tab-btn:first-child {
        border-radius: 6px 0 0 0 !important;
    }
    .cxp-tabs .tab-btn:nth-child(2) {
        border-radius: 0 6px 0 0 !important;
    }
    .cxp-tabs .tab-btn:nth-child(3) {
        border-radius: 0 0 0 6px !important;
    }
    .cxp-tabs .tab-btn:nth-child(4) {
        border-radius: 0 0 6px 0 !important;
    }

    /* Proyección filtros */
    .cxp-proy-filters {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        width: 100% !important;
    }

    .cxp-proy-filters .btn-proy-meses {
        flex: 1 !important;
        text-align: center !important;
        padding: 8px 4px !important;
        font-size: 11px !important;
        min-height: 36px !important;
    }
}

/* ============================================
   4. FILTROS
   ============================================ */

@media screen and (max-width: 768px) {
    .cxp-filters {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        align-items: stretch !important;
    }

    .cxp-filters select {
        flex: 3 1 0 !important;
        min-width: 0 !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        height: 38px !important;
        border: 1px solid #d1d5db !important;
        border-radius: 6px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 8px center !important;
        padding-right: 28px !important;
    }

    .cxp-filters input[type="month"] {
        flex: 2 1 0 !important;
        min-width: 0 !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
        height: 38px !important;
    }

    /* Si el select está solo (sin input mes), ocupa todo el ancho */
    .cxp-filters select:only-child {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ============================================
   5. TABLA
   ============================================ */

@media screen and (max-width: 768px) {
    .table-container[data-section="table"] {
        border-radius: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .cxp-table {
        font-size: 16px !important;
        min-width: 800px !important;
        width: max-content !important;
    }

    .cxp-table th,
    .cxp-table td {
        font-size: 16px !important;
        padding: 10px 12px !important;
        white-space: nowrap !important;
    }

    .cxp-col-concepto {
        white-space: normal !important;
        min-width: 160px !important;
    }

    .cxp-col-monto {
        white-space: nowrap !important;
    }
}

/* ============================================
   6. ACCIONES
   ============================================ */

@media screen and (max-width: 768px) {
    .cxp-acciones {
        gap: 4px !important;
    }

    .cxp-acciones button {
        min-width: 28px !important;
        min-height: 28px !important;
    }
}

/* ============================================
   7. MODALES - WIDTH FIXES
   ============================================ */

@media screen and (max-width: 768px) {
    /* Los modales de CxP usan divs con max-width fijo */
    div[style*="max-width: 600px"],
    div[style*="max-width:600px"],
    div[style*="max-width: 680px"],
    div[style*="max-width:680px"],
    div[style*="max-width: 700px"],
    div[style*="max-width:700px"],
    div[style*="max-width: 750px"],
    div[style*="max-width:750px"],
    div[style*="max-width: 800px"],
    div[style*="max-width:800px"],
    div[style*="max-width: 900px"],
    div[style*="max-width:900px"],
    div[style*="width: 600px"],
    div[style*="width:600px"],
    div[style*="width: 680px"],
    div[style*="width:680px"],
    div[style*="width: 700px"],
    div[style*="width:700px"],
    div[style*="width: 750px"],
    div[style*="width:750px"],
    div[style*="width: 800px"],
    div[style*="width:800px"],
    div[style*="width: 900px"],
    div[style*="width:900px"] {
        width: 95% !important;
        max-width: 95vw !important;
    }

    /* Grids de modales en columna */
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Inputs y selects en modales */
    #formPago input,
    #formPago select,
    #seccionCompra input,
    #seccionCompra select,
    #seccionPagoInmediato input,
    #seccionPagoInmediato select {
        min-height: 38px !important;
        font-size: 13px !important;
    }

    /* Botones del form compra/gasto - tipo CxP */
    .btn-tipo-cxp {
        min-height: 50px !important;
        font-size: 12px !important;
    }

    /* Botones comprobante */
    #btnSubirComprobante,
    #btnCamaraComprobante,
    #btnPegarComprobante,
    #btnSubirCompraComp,
    #btnCamaraCompraComp,
    #btnPegarCompraComp {
        min-height: 36px !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
}

/* ============================================
   8. PROYECCIÓN
   ============================================ */

@media screen and (max-width: 768px) {
    #proyeccionContainer {
        overflow-x: hidden !important;
    }

    #proyeccionContainer > div {
        padding: 8px !important;
    }

    /* Cards de proveedor en proyección */
    #proyeccionContainer table {
        font-size: 10px !important;
    }

    #proyeccionContainer table th,
    #proyeccionContainer table td {
        padding: 4px 6px !important;
    }
}

/* ============================================
   9. DETALLE MODAL - HISTORIAL ABONOS
   ============================================ */

@media screen and (max-width: 768px) {
    /* Grid de resumen Total/Pagado/Saldo */
    div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 4px !important;
    }

    /* Tabla abonos */
    .btn-print-egreso {
        min-width: 28px !important;
        min-height: 28px !important;
    }

    /* Recibo de egreso */
    #reciboEgresoPDF,
    #reciboNominaPDF {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   10. TABLA PROVEEDORES
   ============================================ */

@media screen and (max-width: 768px) {
    #proveedoresContainer {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #proveedoresContainer table {
        font-size: 16px !important;
        min-width: 900px !important;
        width: max-content !important;
    }

    #proveedoresContainer table th,
    #proveedoresContainer table td {
        font-size: 16px !important;
        padding: 10px 12px !important;
        white-space: nowrap !important;
    }

    /* Columnas con texto largo permiten wrap */
    #proveedoresContainer table td:nth-child(2) {
        white-space: normal !important;
        min-width: 160px !important;
    }

    #proveedoresContainer table td div {
        font-size: 16px !important;
    }
}

/* ============================================
   ULTRA SMALL (<480px)
   ============================================ */

@media screen and (max-width: 480px) {
    #moduleContainer > div:first-child h2 {
        font-size: 1.5rem !important;
    }

    .cxp-header-actions button {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }

    .cxp-tabs .tab-btn {
        font-size: 16px !important;
        padding: 6px 4px !important;
    }

    /* Tabla: solo mostrar concepto, monto, estado, acciones */
    .cxp-col-codigo {
        display: none !important;
    }

    .cxp-col-vencimiento {
        display: none !important;
    }

    .cxp-col-proveedor {
        max-width: 70px !important;
    }

    .cxp-table th,
    .cxp-table td {
        padding: 4px 4px !important;
        font-size: 9px !important;
    }

    /* Stats ultra-small */
    .stat-card[data-section="stats"] .stat-info h3 {
        font-size: 16px !important;
    }

    .stat-card[data-section="stats"] .stat-info p {
        font-size: 16px !important;
    }

    /* Modales pequeños */
    div[style*="width: 400px"],
    div[style*="width:400px"],
    div[style*="width: 450px"],
    div[style*="width:450px"],
    div[style*="max-width: 400px"],
    div[style*="max-width:400px"] {
        width: 95% !important;
        max-width: 95vw !important;
    }

    /* Cámara modal */
    #modalCamaraCxP > div,
    #modalCamaraCompra > div {
        width: 95% !important;
        max-width: 95vw !important;
        padding: 10px !important;
    }
}