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

   CONTENIDO:
   - Tabs de facturación (columna)
   - Conceptos grid (1 columna)
   - Cost inputs grid y distribución
   - Custom concept row (columna)

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

@media screen and (max-width: 768px) {
    /* Tabs de facturación */
    .facturacion-tabs {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Conceptos grid */
    .conceptos-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cost inputs */
    .cost-inputs-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cost-distribution {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Custom concept row */
    .custom-concept-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .custom-concept-row > * {
        width: 100% !important;
    }

    /* Header Pagos móvil: título + botón Volver */
    .pagos-mobile-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }

    .pagos-mobile-header .btn-volver-pagos {
        width: auto !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
        min-height: 0 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        order: -1 !important;
    }

    .pagos-mobile-header .dir-title {
        font-size: 0.95rem !important;
        margin: 0 !important;
        font-weight: 700 !important;
    }
}