// ─── Expedientes · Detalle — tarjeta Financiero ──────────────────────────
// FinancieroCard: el panel lateral de montos (Neto/Ganancia/IVA/Total) del
// detalle de expediente — extraída de detalle.jsx (FIX P13, ítem 4: el
// archivo estaba en 426 líneas, por encima del techo DURO de 400; único
// bloque cohesivo >30 líneas con tema propio y sin dependencias del resto del
// render — se saca a archivo nuevo con nombre propio en vez de fragmentar en
// detalle-cards.jsx, que ya está en ~360 líneas y hubiera quedado con el
// mismo problema). Expone a window: FinancieroCard. Consume formatMoney
// (dominio/formato.js).
function FinancieroCard({ exp, editing, hasMoney }) {
  return (
    <div className="rounded-2xl bg-card p-5 sm:p-6 flex flex-col" style={{
        border: '1px solid color-mix(in oklab, var(--border) 55%, transparent)',
        boxShadow: 'var(--shadow-card)',
        opacity: editing ? 0.55 : 1,
        pointerEvents: editing ? 'none' : 'auto'
      }}>
      <p className="text-[10.5px] font-bold uppercase tracking-[0.18em]" style={{ color: 'var(--accent)' }}>
        Financiero
      </p>
      {hasMoney ?
        <React.Fragment>
      <div className="mt-5 flex flex-col gap-4 text-[13px]">
        <div className="flex items-center justify-between">
          {/* "Neto (sin IVA)" y no "Costos": es subtotal - bonificaciones (venta), NO costo
              de mercadería real — no hay costo real en la DB para distinguirlo (ver
              public/erp/CLAUDE.md, BUGS-caza-01-07-2026.md #9/M2). Relabelar para no mentir
              con el nombre aunque el número sea real. */}
          <span style={{ color: 'var(--muted-foreground)' }}>Neto (sin IVA)</span>
          <span className="font-bold tabular-nums" style={{ color: 'var(--foreground)' }}>{formatMoney(exp.costosSinIva)}</span>
        </div>
        <div className="flex items-center justify-between">
          <span style={{ color: 'var(--muted-foreground)' }}>Ganancia</span>
          <div className="flex items-baseline gap-1.5">
            {/* exp.ganancia siempre null hoy (sin costo real, honesto) -> formatMoney da "—". */}
            <span className="font-bold tabular-nums" style={{ color: 'var(--foreground)' }}>{formatMoney(exp.ganancia)}</span>
            {exp.gananciaPct != null && <span className="text-[11.5px] font-bold tabular-nums" style={{ color: 'var(--success)' }}>({exp.gananciaPct}%)</span>}
          </div>
        </div>
        <div className="flex items-center justify-between">
          <span style={{ color: 'var(--muted-foreground)' }}>IVA (21%)</span>
          <span className="font-bold tabular-nums" style={{ color: 'var(--foreground)' }}>{formatMoney(exp.iva != null ? exp.iva : (exp.total != null ? exp.total - exp.total / 1.21 : null))}</span>
        </div>
      </div>
      <div className="h-px my-5" style={{ background: 'color-mix(in oklab, var(--border) 45%, transparent)' }} />
      <div className="flex items-start justify-between gap-3">
        <span className="text-[11px] font-bold uppercase tracking-[0.14em]" style={{ color: 'var(--muted-foreground)' }}>Total</span>
        <span className="text-[clamp(26px,3.4vw,32px)] font-extrabold tabular-nums tracking-[-0.02em] leading-none" style={{ color: 'var(--accent)' }}>
          {formatMoney(exp.total)}
        </span>
      </div>
      </React.Fragment> :

        <div className="mt-5 flex flex-1 flex-col items-start justify-center gap-2 py-4">
          <p className="text-[13px] font-semibold" style={{ color: 'var(--foreground)' }}>Sin presupuesto cargado</p>
          <p className="text-[12px]" style={{ color: 'var(--muted-foreground)' }}>
            Los montos se calculan cuando cargás el presupuesto del expediente.
          </p>
        </div>
        }
    </div>
  );
}

Object.assign(window, { FinancieroCard });