// ══════════════════════════════════════════════
// RRB Admin — Module: ganancias
// ══════════════════════════════════════════════

// ════════════════════════════════════════════
let ganData = null;

function seleccionarReporte(nombre) {
  document.querySelectorAll('.btn-subreport').forEach(b => b.classList.remove('active'));
  document.querySelector(`.btn-subreport[data-report="${nombre}"]`)?.classList.add('active');
  document.getElementById('reporte-calificados').style.display = nombre === 'calificados' ? 'block' : 'none';
  document.getElementById('reporte-ganancias').style.display   = nombre === 'ganancias'   ? 'block' : 'none';
  if (nombre === 'ganancias') {
    const now = new Date();
    document.getElementById('gan-mes').value  = now.getMonth() + 1;
    document.getElementById('gan-anio').value = now.getFullYear();
  }
}

async function cargarGanancias() {
  const mes  = document.getElementById('gan-mes').value;
  const anio = document.getElementById('gan-anio').value;
  if (!mes || !anio) { showToast('Selecciona mes y año', 'error'); return; }

  const btn = document.getElementById('btn-gan-buscar');
  btn.disabled = true;
  btn.textContent = '⏳ Calculando...';

  document.getElementById('gan-loading').style.display = 'block';
  document.getElementById('gan-result').style.display  = 'none';
  document.getElementById('gan-empty').style.display   = 'none';
  document.getElementById('gan-summary').style.display = 'none';
  document.getElementById('btn-gan-export').style.display = 'none';
  document.getElementById('btn-gan-regalias').style.display = 'none';

  try {
    const data = await api('GET', `ganancias.php?mes=${mes}&anio=${anio}`);
    if (!data.success) throw new Error(data.message);
    ganData = data;
    renderGanancias(data);
  } catch (err) {
    showToast('Error: ' + err.message, 'error');
    document.getElementById('gan-loading').style.display = 'none';
  } finally {
    btn.disabled = false;
    btn.textContent = '🔍 Generar Reporte';
  }
}

// Estado de ordenamiento de la tabla de ganancias
let ganSortCol = null;
let ganSortAsc = true;

function sortGanancias(col) {
  if (ganSortCol === col) {
    ganSortAsc = !ganSortAsc;
  } else {
    ganSortCol = col;
    ganSortAsc = true;
  }
  // Actualizar íconos
  document.querySelectorAll('.sort-icon').forEach(el => el.textContent = '⇅');
  const icon = document.getElementById('sort-' + col);
  if (icon) icon.textContent = ganSortAsc ? '↑' : '↓';
  // Re-renderizar con datos ordenados
  if (ganData) renderGananciasTabla(ganData);
}

function renderGanancias(data) {
  document.getElementById('gan-loading').style.display = 'none';
  const distribuidores = data.distribuidores || [];

  if (distribuidores.length === 0) {
    document.getElementById('gan-empty').style.display = 'block';
    return;
  }

  const conGanancias = distribuidores.filter(d => d.niveles_abiertos > 0);
  const parciales    = distribuidores.filter(d => d.calificacion === 'parcial' && d.niveles_abiertos > 0);
  const plenos       = distribuidores.filter(d => d.calificacion === 'calificado' && d.niveles_abiertos > 0);

  document.getElementById('gan-total').textContent   = conGanancias.length;
  document.getElementById('gan-parcial').textContent = parciales.length;
  document.getElementById('gan-pleno').textContent   = plenos.length;
  document.getElementById('gan-summary').style.display = 'grid';
  document.getElementById('gan-count').textContent = `${distribuidores.length} distribuidor${distribuidores.length !== 1 ? 'es' : ''}`;

  renderGananciasTabla(data);

  document.getElementById('gan-result').style.display = 'block';
  document.getElementById('btn-gan-export').style.display = 'inline-block';
  document.getElementById('btn-gan-regalias').style.display = 'inline-block';
}

function renderGananciasTabla(data) {
  let distribuidores = [...(data.distribuidores || [])];

  // Ordenar si hay columna seleccionada
  if (ganSortCol) {
    distribuidores.sort((a, b) => {
      let va = a[ganSortCol];
      let vb = b[ganSortCol];
      if (typeof va === 'string') va = va.toLowerCase();
      if (typeof vb === 'string') vb = vb.toLowerCase();
      if (va < vb) return ganSortAsc ? -1 : 1;
      if (va > vb) return ganSortAsc ? 1 : -1;
      return 0;
    });
  }

  const fmt = n => `$${Number(n).toLocaleString('es-MX', {minimumFractionDigits:2, maximumFractionDigits:2})}`;

  const tbody = document.getElementById('gan-tbody');
  tbody.innerHTML = distribuidores.map((d, i) => {
    const calBadge = d.calificacion === 'calificado'
      ? '<span class="group-badge pleno">Pleno</span>'
      : '<span class="group-badge parcial">Parcial</span>';
    const ganN1  = d.ganancia_n1 > 0
      ? `<span style="color:var(--success);font-weight:600">${fmt(d.ganancia_n1)}</span>`
      : '<span style="color:var(--muted)">$0.00</span>';
    const ganTot = d.ganancia_total > 0
      ? `<span style="color:#0a6e3f;font-weight:700">${fmt(d.ganancia_total)}</span>`
      : '<span style="color:var(--muted)">$0.00</span>';
    return `<tr>
      <td style="color:var(--muted);font-size:12px">${i + 1}</td>
      <td style="font-weight:600">${esc(d.referencia)}</td>
      <td style="font-size:13px;color:var(--muted)">${esc(d.rfc)}</td>
      <td>${esc((d.nombre_completo || '').trim())}</td>
      <td style="font-weight:600">${Number(d.puntos_propios).toLocaleString('es-MX', {maximumFractionDigits:0})}</td>
      <td>${calBadge}</td>
      <td style="text-align:center">${d.directos_624}</td>
      <td style="text-align:center;font-weight:600;color:var(--primary)">${d.niveles_abiertos}</td>
      <td>${ganN1}</td>
      <td>${ganTot}</td>
      <td><button class="btn-action btn-edit" onclick="verDetalleGanancias(${d.id_inver})">📊 Ver</button></td>
    </tr>`;
  }).join('');

  // Fila de totales
  const totalAPagar = data.total_a_pagar || distribuidores.reduce((s, d) => s + (d.ganancia_total || 0), 0);
  const tfoot = document.getElementById('gan-tfoot');
  tfoot.innerHTML = `<tr style="font-weight:700;background:#e8f5e9;font-size:14px">
    <td colspan="9" style="text-align:right;padding:10px 16px">TOTAL A PAGAR:</td>
    <td style="text-align:left;color:#0a6e3f;font-size:15px;padding:10px 16px">$${Number(totalAPagar).toLocaleString('es-MX', {minimumFractionDigits:2, maximumFractionDigits:2})}</td>
    <td></td>
  </tr>`;
}

async function verDetalleGanancias(idInver) {
  const mes  = document.getElementById('gan-mes').value;
  const anio = document.getElementById('gan-anio').value;
  const body = document.getElementById('modal-gan-body');
  body.innerHTML = '<div style="text-align:center;padding:32px;color:var(--muted)">⏳ Cargando detalle...</div>';
  document.getElementById('modal-ganancias').classList.add('open');

  try {
    const data = await api('GET', `ganancias.php?mes=${mes}&anio=${anio}&id=${idInver}`);
    if (!data.success) throw new Error(data.message);

    const calLabel = data.calificacion === 'calificado' ? '✅ Calificado Pleno' :
                     data.calificacion === 'parcial'    ? '🟡 Calificación Parcial' : '❌ No Calificado';

    const filas = (data.tabla_ganancias || []).map(n => {
      const pct    = n.porcentaje % 1 === 0 ? n.porcentaje + '%' : n.porcentaje.toFixed(0) + '%';
      const gen    = `$${Number(n.generado).toLocaleString('es-MX', {minimumFractionDigits:2, maximumFractionDigits:2})}`;
      const rec    = `$${Number(n.recibir).toLocaleString('es-MX', {minimumFractionDigits:2, maximumFractionDigits:2})}`;
      const rowCls = n.abierto ? '' : 'style="opacity:.45"';
      const abierto = n.abierto ? '🔓' : '🔒';
      return `<tr ${rowCls}>
        <td style="text-align:center;font-weight:600">${n.nivel}</td>
        <td style="text-align:center">${pct}</td>
        <td style="text-align:right">${Number(n.puntos).toLocaleString('es-MX', {maximumFractionDigits:0})}</td>
        <td style="text-align:right;color:var(--muted)">${gen}</td>
        <td style="text-align:right;font-weight:600;color:${n.abierto ? 'var(--success)' : 'var(--muted)'}">${rec}</td>
        <td style="text-align:center">${abierto}</td>
      </tr>`;
    }).join('');

    const totalGen = `$${Number(data.total_generado).toLocaleString('es-MX', {minimumFractionDigits:2, maximumFractionDigits:2})}`;
    const totalRec = `$${Number(data.total_recibir).toLocaleString('es-MX', {minimumFractionDigits:2, maximumFractionDigits:2})}`;

    document.getElementById('modal-gan-title').textContent = `Ganancias — ${data.nombre_completo || ''}`;
    body.innerHTML = `
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px">
        <div style="background:#f0f4f8;border-radius:8px;padding:12px;text-align:center">
          <div style="font-size:11px;color:var(--muted);margin-bottom:4px">REFERENCIA</div>
          <div style="font-weight:700;font-size:15px">${esc(data.referencia || '')}</div>
        </div>
        <div style="background:#f0f4f8;border-radius:8px;padding:12px;text-align:center">
          <div style="font-size:11px;color:var(--muted);margin-bottom:4px">PUNTOS PROPIOS</div>
          <div style="font-weight:700;font-size:15px">${Number(data.puntos_propios).toLocaleString('es-MX', {maximumFractionDigits:0})}</div>
        </div>
        <div style="background:#f0f4f8;border-radius:8px;padding:12px;text-align:center">
          <div style="font-size:11px;color:var(--muted);margin-bottom:4px">CALIFICACIÓN</div>
          <div style="font-weight:700;font-size:13px">${calLabel}</div>
        </div>
        <div style="background:#f0f4f8;border-radius:8px;padding:12px;text-align:center">
          <div style="font-size:11px;color:var(--muted);margin-bottom:4px">DIRECTOS 624+</div>
          <div style="font-weight:700;font-size:15px">${data.directos_624} / ${data.directos_1500} con 1500+</div>
        </div>
        <div style="background:#f0f4f8;border-radius:8px;padding:12px;text-align:center">
          <div style="font-size:11px;color:var(--muted);margin-bottom:4px">NIVELES ABIERTOS</div>
          <div style="font-weight:700;font-size:20px;color:var(--primary)">${data.niveles_abiertos}</div>
        </div>
      </div>
      <div style="overflow-x:auto">
        <table>
          <thead>
            <tr>
              <th style="text-align:center">Nivel</th>
              <th style="text-align:center">%</th>
              <th style="text-align:right">Puntos en red</th>
              <th style="text-align:right">Generado</th>
              <th style="text-align:right">A recibir</th>
              <th style="text-align:center">Estado</th>
            </tr>
          </thead>
          <tbody>${filas}</tbody>
          <tfoot>
            <tr style="font-weight:700;background:#f8fafc">
              <td colspan="3" style="text-align:right">TOTAL</td>
              <td style="text-align:right;color:var(--muted)">${totalGen}</td>
              <td style="text-align:right;color:var(--success);font-size:16px">${totalRec}</td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>
    `;
  } catch (err) {
    body.innerHTML = `<div style="text-align:center;padding:32px;color:var(--error)">Error: ${esc(err.message)}</div>`;
  }
}

function cerrarModalGanancias() {
  document.getElementById('modal-ganancias').classList.remove('open');
}

function exportarGanancias() {
  if (!ganData) return;
  const mes  = document.getElementById('gan-mes');
  const anio = document.getElementById('gan-anio').value;
  const mesNombre = mes.options[mes.selectedIndex].text;

  const rows = [
    ['Referencia', 'RFC', 'Nombre', 'Puntos', 'Calificación', 'Directos 624+', 'Directos 1500+', 'Niveles Abiertos', 'Ganancia N1', 'Ganancia Total'],
    ...(ganData.distribuidores || []).map(d => [
      d.referencia, d.rfc, (d.nombre_completo || '').trim(),
      d.puntos_propios, d.calificacion, d.directos_624, d.directos_1500,
      d.niveles_abiertos, d.ganancia_n1, d.ganancia_total || 0
    ]),
    ['', '', 'TOTAL A PAGAR', '', '', '', '', '', '', ganData.total_a_pagar || 0],
  ];

  const csv = rows.map(r => r.map(c => `"${String(c).replace(/"/g, '""')}"`).join(',')).join('\n');
  const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
  const url  = URL.createObjectURL(blob);
  const a    = document.createElement('a');
  a.href     = url;
  a.download = `ganancias_${mesNombre}_${anio}.csv`;
  a.click();
  URL.revokeObjectURL(url);
}

// ── Regalías ──────────────────────────────────────────────────────────────
let regaliasData = null; // guarda mes/año para la confirmación

function calcularRegalias() {
  if (!ganData || !ganData.distribuidores || ganData.distribuidores.length === 0) {
    showToast('Primero genera el reporte de ganancias', 'error'); return;
  }
  const mes  = parseInt(document.getElementById('gan-mes').value);
  const anio = parseInt(document.getElementById('gan-anio').value);
  const mesNombre = document.getElementById('gan-mes').options[document.getElementById('gan-mes').selectedIndex].text;
  const total = ganData.total_a_pagar || 0;
  const conGanancias = (ganData.distribuidores || []).filter(d => (d.ganancia_total || 0) > 0).length;

  regaliasData = { mes, anio, mesNombre };

  document.getElementById('modal-reg-title').textContent = `🏦 Calcular Regalías — ${mesNombre} ${anio}`;
  document.getElementById('modal-reg-body').innerHTML = `
    <div style="padding:8px 0">
      <p style="margin-bottom:16px;color:var(--muted)">Se creará un registro en <strong>regs2</strong> por cada distribuidor con ganancias mayores a $0.</p>
      <div style="background:var(--surface);border-radius:10px;padding:16px;margin-bottom:16px">
        <div style="display:flex;justify-content:space-between;margin-bottom:8px">
          <span>Período:</span><strong>${mesNombre} ${anio}</strong>
        </div>
        <div style="display:flex;justify-content:space-between;margin-bottom:8px">
          <span>Distribuidores con ganancias:</span><strong>${conGanancias}</strong>
        </div>
        <div style="display:flex;justify-content:space-between;font-size:18px;color:#16a34a;font-weight:700;border-top:1px solid var(--border);padding-top:12px;margin-top:4px">
          <span>Total a pagar:</span><span>$${total.toLocaleString('es-MX', {minimumFractionDigits:2})}</span>
        </div>
      </div>
      <p style="color:var(--warning);font-size:13px">⚠️ Si ya existen regalías calculadas para hoy, serán reemplazadas.</p>
    </div>`;
  document.getElementById('btn-reg-confirmar').style.display = '';
  document.getElementById('modal-regalias').classList.add('open');
}

function cerrarModalRegalias() {
  document.getElementById('modal-regalias').classList.remove('open');
  regaliasData = null;
}

async function confirmarRegalias() {
  if (!regaliasData) return;
  const btn = document.getElementById('btn-reg-confirmar');
  btn.disabled = true;
  btn.textContent = '⏳ Calculando...';
  document.getElementById('modal-reg-body').innerHTML = `
    <div style="text-align:center;padding:40px;color:var(--muted)">
      <div style="font-size:36px;margin-bottom:12px">⏳</div>
      <p>Calculando regalías nivel por nivel...</p>
      <p style="font-size:12px;margin-top:8px">Esto puede tomar 1-3 minutos según el número de distribuidores.</p>
    </div>`;
  document.getElementById('modal-reg-footer').innerHTML = '';

  try {
    const resp = await fetch(`${API}/calcular_regalias.php`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token()}` },
      body: JSON.stringify({ mes: regaliasData.mes, anio: regaliasData.anio }),
    });
    const data = await resp.json();
    if (data.success) {
      document.getElementById('modal-reg-body').innerHTML = `
        <div style="text-align:center;padding:16px">
          <div style="font-size:48px;margin-bottom:12px">✅</div>
          <h4 style="color:#16a34a;margin-bottom:16px">Regalías calculadas correctamente</h4>
          <div style="background:var(--surface);border-radius:10px;padding:16px;text-align:left">
            <div style="display:flex;justify-content:space-between;margin-bottom:8px">
              <span>Período:</span><strong>${data.periodo || ''}</strong>
            </div>
            <div style="display:flex;justify-content:space-between;margin-bottom:8px">
              <span>Registros insertados:</span><strong>${data.insertados}</strong>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:18px;color:#16a34a;font-weight:700;border-top:1px solid var(--border);padding-top:12px;margin-top:4px">
              <span>Total a pagar:</span><span>$${(data.total_a_pagar||0).toLocaleString('es-MX',{minimumFractionDigits:2})}</span>
            </div>
          </div>
        </div>`;
      document.getElementById('modal-reg-footer').innerHTML = `<button class="btn-save" onclick="cerrarModalRegalias()" style="background:#16a34a">Cerrar</button>`;
      showToast(`✅ ${data.insertados} regalías subidas al servidor`, 'success');
    } else {
      document.getElementById('modal-reg-body').innerHTML = `<div style="text-align:center;padding:32px;color:var(--error)">❌ ${data.message || 'Error al calcular regalías'}</div>`;
      document.getElementById('modal-reg-footer').innerHTML = `<button class="btn-cancel" onclick="cerrarModalRegalias()">Cerrar</button>`;
    }
  } catch (e) {
    document.getElementById('modal-reg-body').innerHTML = `<div style="text-align:center;padding:32px;color:var(--error)">❌ Error de conexión: ${e.message}</div>`;
    document.getElementById('modal-reg-footer').innerHTML = `<button class="btn-cancel" onclick="cerrarModalRegalias()">Cerrar</button>`;
  }
}

function abrirModalVoucher(idreg, apagar, nombre, referencia) {
  _vouIdreg  = idreg;
  _vouApagar = apagar;
  _vouNombre = nombre;
  _vouRef    = referencia;

  document.getElementById('modal-vou-title').textContent = `🟣 Crear Voucher — ${nombre}`;
  document.getElementById('btn-vou-confirmar').disabled = true;

  document.getElementById('modal-vou-body').innerHTML = `
    <div style="padding:8px 0">
      <div style="background:var(--surface);border-radius:10px;padding:16px;margin-bottom:16px">
        <div style="display:flex;justify-content:space-between;margin-bottom:8px">
          <span style="color:var(--muted);font-size:13px">Distribuidor</span>
          <span style="font-weight:600">${esc(nombre)}</span>
        </div>
        <div style="display:flex;justify-content:space-between;margin-bottom:8px">
          <span style="color:var(--muted);font-size:13px">Referencia</span>
          <span style="font-weight:600">${esc(referencia)}</span>
        </div>
        <div style="display:flex;justify-content:space-between">
          <span style="color:var(--muted);font-size:13px">Saldo a pagar</span>
          <span style="font-weight:700;color:#15803d;font-size:16px">${fmtMXN(apagar)}</span>
        </div>
      </div>

      <div class="form-group" style="margin-bottom:16px">
        <label style="font-weight:600;margin-bottom:6px;display:block">Monto del voucher</label>
        <input type="number" id="vou-monto"
          min="0.01" max="${apagar}" step="0.01"
          placeholder="0.00"
          style="width:100%;padding:10px 12px;border-radius:8px;border:1.5px solid var(--border);font-size:16px;font-weight:600"
          oninput="calcularPreviewVoucher()"
        />
        <div style="font-size:12px;color:var(--muted);margin-top:4px">Máximo: ${fmtMXN(apagar)}</div>
      </div>

      <div id="vou-preview" style="display:none;background:#f5f3ff;border-radius:10px;padding:14px;border:1px solid #c4b5fd">
        <div style="display:flex;justify-content:space-between;margin-bottom:8px">
          <span style="color:#5b21b6;font-size:13px">🟣 Total del voucher</span>
          <span style="font-weight:700;color:#5b21b6" id="vou-prev-total">$0.00</span>
        </div>
        <div style="display:flex;justify-content:space-between;margin-bottom:8px">
          <span style="color:var(--muted);font-size:13px">📅 Se generará hoy</span>
          <span style="font-size:13px" id="vou-prev-fecha"></span>
        </div>
        <div style="display:flex;justify-content:space-between;border-top:1px solid #c4b5fd;padding-top:8px;margin-top:4px">
          <span style="color:var(--muted);font-size:13px">💰 Restante en regalías</span>
          <span style="font-weight:700" id="vou-prev-restante">$0.00</span>
        </div>
      </div>
    </div>`;

  document.getElementById('modal-voucher').classList.add('open');
}

function calcularPreviewVoucher() {
  const input   = document.getElementById('vou-monto');
  const monto   = parseFloat(input.value) || 0;
  const preview = document.getElementById('vou-preview');
  const btnConf = document.getElementById('btn-vou-confirmar');

  if (monto <= 0 || monto > _vouApagar) {
    preview.style.display = 'none';
    btnConf.disabled = true;
    input.style.borderColor = monto > _vouApagar ? 'var(--error)' : 'var(--border)';
    return;
  }

  input.style.borderColor = '#7c3aed';
  preview.style.display = 'block';
  btnConf.disabled = false;

  const restante = Math.max(0, _vouApagar - monto);
  const hoy = new Date().toLocaleDateString('es-MX', { day:'2-digit', month:'2-digit', year:'numeric' });

  document.getElementById('vou-prev-total').textContent    = fmtMXN(monto);
  document.getElementById('vou-prev-fecha').textContent    = hoy;
  document.getElementById('vou-prev-restante').textContent = fmtMXN(restante);
  document.getElementById('vou-prev-restante').style.color = restante === 0 ? '#15803d' : 'var(--foreground)';
}

async function confirmarVoucher() {
  const monto = parseFloat(document.getElementById('vou-monto').value) || 0;
  if (monto <= 0 || monto > _vouApagar) {
    showToast('Monto inválido', 'error');
    return;
  }

  const btn = document.getElementById('btn-vou-confirmar');
  btn.disabled = true;
  btn.textContent = '⏳ Creando...';

  document.getElementById('modal-vou-body').innerHTML = `
    <div style="text-align:center;padding:40px;color:var(--muted)">
      <div style="font-size:36px;margin-bottom:12px">⏳</div>
      <p>Creando voucher...</p>
    </div>`;
  document.getElementById('modal-vou-footer').innerHTML = '';

  try {
    const data = await api('POST', 'api/crear-voucher.php', { idreg: _vouIdreg, monto });
    if (data.success) {
      const restante = Number(data.nuevo_apagar) || 0;
      document.getElementById('modal-vou-body').innerHTML = `
        <div style="text-align:center;padding:16px">
          <div style="font-size:48px;margin-bottom:12px">✅</div>
          <h4 style="color:#5b21b6;margin-bottom:16px">Voucher creado correctamente</h4>
          <div style="background:#f5f3ff;border-radius:10px;padding:16px;text-align:left">
            <div style="margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #c4b5fd">
              <div style="color:var(--muted);font-size:12px;margin-bottom:2px">Distribuidor</div>
              <div style="font-weight:700;font-size:15px;color:var(--foreground)">${_vouNombre}</div>
            </div>
            <div style="display:flex;justify-content:space-between;margin-bottom:8px">
              <span style="color:var(--muted);font-size:13px"># Voucher</span>
              <span style="font-weight:700;color:#5b21b6;font-size:16px">${data.idv}</span>
            </div>
            <div style="display:flex;justify-content:space-between;margin-bottom:8px">
              <span style="color:var(--muted);font-size:13px">Monto</span>
              <span style="font-weight:700">${fmtMXN(data.monto_voucher)}</span>
            </div>
            <div style="display:flex;justify-content:space-between;border-top:1px solid #c4b5fd;padding-top:8px;margin-top:4px">
              <span style="color:var(--muted);font-size:13px">Restante en regalías</span>
              <span style="font-weight:700;color:${restante === 0 ? '#15803d' : 'var(--foreground)'}">${fmtMXN(restante)}</span>
            </div>
          </div>
        </div>`;
      document.getElementById('modal-vou-footer').innerHTML =
        `<button class="btn-save" onclick="cerrarModalVoucher()" style="background:#5b21b6">Cerrar</button>`;
      showToast(`✅ Voucher #${data.idv} creado`, 'success');

      // Actualizar el registro en el array local para reflejar el cambio sin recargar
      const idx = regsData.registros.findIndex(r => r.idreg === _vouIdreg);
      if (idx !== -1) {
        regsData.registros[idx].apagar = data.nuevo_apagar;
        regsData.registros[idx].status = data.nuevo_status;
        regsData.registros[idx].observaciones = data.observaciones;
      }
      // Reaplicar filtro actual
      filtrarRegs(regsStatusFilt);
    } else {
      document.getElementById('modal-vou-body').innerHTML =
        `<div style="text-align:center;padding:32px;color:var(--error)">❌ ${data.message || 'Error al crear voucher'}</div>`;
      document.getElementById('modal-vou-footer').innerHTML =
        `<button class="btn-cancel" onclick="cerrarModalVoucher()">Cerrar</button>`;
    }
  } catch (e) {
    document.getElementById('modal-vou-body').innerHTML =
      `<div style="text-align:center;padding:32px;color:var(--error)">❌ Error de conexión: ${e.message}</div>`;
    document.getElementById('modal-vou-footer').innerHTML =
      `<button class="btn-cancel" onclick="cerrarModalVoucher()">Cerrar</button>`;
  }
}

function cerrarModalVoucher() {
  document.getElementById('modal-voucher').classList.remove('open');
  _vouIdreg = 0; _vouApagar = 0; _vouNombre = ''; _vouRef = '';
}

