Feat: Agregar tipos de pago faltantes (transferencia y abono) en totales monetarios

- Actualizar query Metabase Card 63 para extraer total_transferencia y total_abono
- Agregar campos total_transferencia y total_abono a props del componente
- Actualizar computed totalDistribucion para incluir los 5 tipos de pago
- Cambiar grid de distribución de 4 a 6 columnas (5 tipos + verificación)
- Agregar metric boxes para transferencia (cyan) y abono (orange)
- Agregar barras de visualización para transferencia y abono
- Actualizar función copiarTexto con los 5 tipos de pago
- Ahora la verificación de totales cuadra correctamente

nuxt4-app/app/components/comercios/TotalesMonetariosComercio.vue

@@ -41,7 +41,7 @@
       <!-- Distribución de Pagos -->
       <div>
         <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Distribución de Pagos</h3>
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
+        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-3">
           <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
             <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Efectivo</div>
             <div class="text-lg font-bold text-green-400">
@@ -69,6 +69,24 @@
               {{ calcularPorcentaje(data.total_cheque, data.total_invertido) }}%
             </div>
           </div>
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Transferencia</div>
+            <div class="text-lg font-bold text-cyan-400">
+              {{ formatCurrency(data.total_transferencia) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              {{ calcularPorcentaje(data.total_transferencia, data.total_invertido) }}%
+            </div>
+          </div>
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Abono</div>
+            <div class="text-lg font-bold text-orange-400">
+              {{ formatCurrency(data.total_abono) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              {{ calcularPorcentaje(data.total_abono, data.total_invertido) }}%
+            </div>
+          </div>
           <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
             <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Verificación</div>
             <div class="text-lg font-bold" :class="totalMatch ? 'text-green-500' : 'text-red-500'">
@@ -121,6 +139,30 @@
             </div>
             <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatCurrency(data.total_cheque) }}</span>
           </div>
+          <div class="flex items-center gap-3">
+            <span class="text-xs w-20 text-[var(--brand-text-muted)]">Transferencia</span>
+            <div class="flex-1 h-8 bg-[var(--brand-surface)] rounded-lg overflow-hidden border border-[var(--brand-border)]">
+              <div
+                class="h-full bg-cyan-500/60 flex items-center justify-end px-2 transition-all duration-500"
+                :style="{ width: `${calcularPorcentaje(data.total_transferencia, data.total_invertido)}%` }"
+              >
+                <span class="text-xs font-semibold text-white">{{ calcularPorcentaje(data.total_transferencia, data.total_invertido) }}%</span>
+              </div>
+            </div>
+            <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatCurrency(data.total_transferencia) }}</span>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="text-xs w-20 text-[var(--brand-text-muted)]">Abono</span>
+            <div class="flex-1 h-8 bg-[var(--brand-surface)] rounded-lg overflow-hidden border border-[var(--brand-border)]">
+              <div
+                class="h-full bg-orange-500/60 flex items-center justify-end px-2 transition-all duration-500"
+                :style="{ width: `${calcularPorcentaje(data.total_abono, data.total_invertido)}%` }"
+              >
+                <span class="text-xs font-semibold text-white">{{ calcularPorcentaje(data.total_abono, data.total_invertido) }}%</span>
+              </div>
+            </div>
+            <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatCurrency(data.total_abono) }}</span>
+          </div>
         </div>
       </div>
     </div>
@@ -136,6 +178,8 @@ const props = defineProps<{
     total_efectivo: number
     total_deposito: number
     total_cheque: number
+    total_transferencia: number
+    total_abono: number
     num_comercios: number
   }
   contadores?: {
@@ -154,7 +198,9 @@ const showChart = ref(true)
 const totalDistribucion = computed(() => {
   return (props.data.total_efectivo || 0) +
          (props.data.total_deposito || 0) +
-         (props.data.total_cheque || 0)
+         (props.data.total_cheque || 0) +
+         (props.data.total_transferencia || 0) +
+         (props.data.total_abono || 0)
 })
 
 const totalMatch = computed(() => {
@@ -208,6 +254,8 @@ async function copiarTexto() {
    Efectivo: ${formatCurrency(props.data.total_efectivo)} (${calcularPorcentaje(props.data.total_efectivo, props.data.total_invertido)}%)
    Depósito: ${formatCurrency(props.data.total_deposito)} (${calcularPorcentaje(props.data.total_deposito, props.data.total_invertido)}%)
    Cheque: ${formatCurrency(props.data.total_cheque)} (${calcularPorcentaje(props.data.total_cheque, props.data.total_invertido)}%)
+   Transferencia: ${formatCurrency(props.data.total_transferencia)} (${calcularPorcentaje(props.data.total_transferencia, props.data.total_invertido)}%)
+   Abono: ${formatCurrency(props.data.total_abono)} (${calcularPorcentaje(props.data.total_abono, props.data.total_invertido)}%)
 
    Total Distribución: ${formatCurrency(totalDistribucion.value)}
    Verificación: ${totalMatch.value ? '✓ Coincide con total invertido' : '✗ No coincide con total invertido'}${footer}`