// ── Kanban: definición de columnas ──
const KANBAN_COLS = [
  { id: "ingresado",  label: "Ingresado",   estados: ["ingresado"],  nextEstado: "en_proceso", dateField: null,          accentVar: "--info" },
  { id: "en_proceso", label: "En proceso",  estados: ["en_proceso"], nextEstado: "terminado",  dateField: "fechaEnProceso", accentVar: "--amber" },
  { id: "terminado",  label: "Terminado",   estados: ["terminado"],  nextEstado: "entregado",  dateField: "terminado",   accentVar: "--brand" },
  { id: "entregado",  label: "Entregado",   estados: ["entregado"],  nextEstado: "pagados",    dateField: "entregado",   accentVar: "--text-dim" },
  { id: "pagados",    label: "Pagado",      estados: ["pagados"],    nextEstado: null,         dateField: "fechaPagado", accentVar: "--ok" },
];

function getColIndex(estado) {
  return KANBAN_COLS.findIndex(c => c.estados.includes(estado));
}


// ── Fila de orden en el Kanban ──
function KanbanCard({ orden, col, colIndex, isDragging, onDragStart, onDragEnd, onAdvance, onGoBack, onArchivar, onOpen }) {
  const isFirst = colIndex === 0;
  const isLast  = colIndex === KANBAN_COLS.length - 1;
  return (
    <div
      className={`kcard${isDragging ? " kcard--dragging" : ""}`}
      draggable
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
    >
      <div className="kcard__row" onClick={onOpen}>
        <span className="kcard__num">#{orden.numero}</span>
        <span className="kcard__plate">{orden.patente}</span>
      </div>
      <div className="kcard__actions">
        {!isFirst && (
          <button className="kcard__back" onClick={e => { e.stopPropagation(); onGoBack(); }} title="Volver etapa anterior">←</button>
        )}
        {!isLast && (
          <button className="kcard__advance" onClick={e => { e.stopPropagation(); onAdvance(); }} title="Avanzar etapa">→</button>
        )}
        {isLast && (
          <button className="kcard__archive" onClick={e => { e.stopPropagation(); onArchivar(); }} title="Archivar orden">Archivar</button>
        )}
      </div>
    </div>
  );
}

// ── Modal confirmación de archivo ──
function ConfirmArchiveModal({ orden, onConfirm, onCancel }) {
  return (
    <div className="modal-backdrop" onClick={onCancel}>
      <div className="confirm-modal" onClick={e => e.stopPropagation()}>
        <div className="confirm-modal__title">Archivar orden</div>
        <div className="confirm-modal__body">
          <div>Orden <span className="mono" style={{color:"var(--brand)"}}>#{orden.numero}</span> — <b>{orden.cliente}</b></div>
          <div style={{marginTop:8}}>La orden pasará al <b>Historial</b> y desaparecerá de las órdenes activas.</div>
          <div className="muted" style={{marginTop:6, fontSize:12}}>Esta acción no elimina ningún dato.</div>
        </div>
        <div className="confirm-modal__foot">
          <button className="btn" onClick={onCancel}>Cancelar</button>
          <button className="btn btn--primary" onClick={onConfirm}>Archivar</button>
        </div>
      </div>
    </div>
  );
}

// ── Modal de confirmación mínima ──
function ConfirmMoveModal({ orden, targetLabel, isBack, dateField, isPago, onConfirm, onCancel }) {
  const hoy = new Date().toLocaleDateString("es-AR", { day: "numeric", month: "long", year: "numeric" });
  const saldo = Number(orden.total || 0);
  return (
    <div className="modal-backdrop" onClick={onCancel}>
      <div className="confirm-modal" onClick={e => e.stopPropagation()}>
        <div className="confirm-modal__title">{isBack ? "Volver etapa anterior" : "Confirmar avance"}</div>
        <div className="confirm-modal__body">
          <div>Orden <span className="mono" style={{color:"var(--brand)"}}>#{orden.numero}</span> — <b>{orden.cliente}</b></div>
          <div style={{marginTop:8}}>
            Mover a <b style={{color: isBack ? "var(--text-dim)" : "var(--brand)"}}>{targetLabel}</b>
          </div>
          {isPago && (
            <div style={{marginTop: 8, fontSize: 13}}>
              Se registrará el cobro de la orden:{" "}
              <span className="mono" style={{color: "var(--ok)", fontWeight: 700}}>{fmtMoney(saldo)}</span>
            </div>
          )}
          <div className="muted" style={{marginTop:6, fontSize:12}}>
            {isBack && dateField
              ? "Se eliminará la fecha registrada en esta etapa."
              : dateField
                ? `Se registrará la fecha de hoy: ${hoy}`
                : "No se modifica ninguna fecha."
            }
          </div>
        </div>
        <div className="confirm-modal__foot">
          <button className="btn" onClick={onCancel}>Cancelar</button>
          <button className="btn btn--primary" onClick={onConfirm}>Confirmar</button>
        </div>
      </div>
    </div>
  );
}

// ── Vista principal: tablero Kanban ──
function OrdenesView({ data, setData, onSelectOrden, onNuevaOrden, search }) {
  const [dragging,        setDragging]       = React.useState(null);
  const [dragOver,        setDragOver]       = React.useState(null);
  const [pendingMove,     setPendingMove]    = React.useState(null);
  const [pendingArchive,  setPendingArchive] = React.useState(null);
  const [mobileExpanded,  setMobileExpanded] = React.useState(null);

  const ordenes = (search
    ? data.ordenes.filter(o => {
        const s = search.toLowerCase();
        return o.cliente.toLowerCase().includes(s) || o.patente.toLowerCase().includes(s) ||
               o.numero.includes(s) || o.modelo.toLowerCase().includes(s);
      })
    : data.ordenes
  ).filter(o => !o.archivado);

  function handleDragStart(e, orden) {
    setDragging(orden);
    e.dataTransfer.effectAllowed = "move";
  }

  function handleDragOver(e, colId) {
    e.preventDefault();
    if (!dragging) return;
    const from = getColIndex(dragging.estado);
    const to   = KANBAN_COLS.findIndex(c => c.id === colId);
    if (to === from + 1) { e.dataTransfer.dropEffect = "move"; setDragOver(colId); }
    else { e.dataTransfer.dropEffect = "none"; setDragOver(null); }
  }

  function handleDrop(e, colId) {
    e.preventDefault();
    setDragOver(null);
    if (!dragging) return;
    const from = getColIndex(dragging.estado);
    const to   = KANBAN_COLS.findIndex(c => c.id === colId);
    if (to !== from + 1) { setDragging(null); return; }
    setPendingMove({ orden: dragging, targetCol: KANBAN_COLS[to], isBack: false });
    setDragging(null);
  }

  function handleArchivar(orden) {
    setPendingArchive(orden);
  }

  function confirmArchive() {
    if (!pendingArchive) return;
    setData(prev => ({
      ...prev,
      ordenes: prev.ordenes.map(o =>
        o.numero === pendingArchive.numero ? { ...o, archivado: true } : o
      )
    }));
    setPendingArchive(null);
  }

  function handleAdvance(orden) {
    const idx = getColIndex(orden.estado);
    if (idx < 0 || idx >= KANBAN_COLS.length - 1) return;
    setPendingMove({ orden, targetCol: KANBAN_COLS[idx + 1], isBack: false });
  }

  function handleGoBack(orden) {
    const idx = getColIndex(orden.estado);
    if (idx <= 0) return;
    setPendingMove({ orden, targetCol: KANBAN_COLS[idx - 1], isBack: true, fromCol: KANBAN_COLS[idx] });
  }

  function confirmMove() {
    if (!pendingMove) return;
    const { orden, targetCol, isBack, fromCol } = pendingMove;
    const hoy = new Date().toISOString().slice(0, 10);
    const updates = { estado: targetCol.id };
    if (isBack) {
      if (fromCol?.dateField) updates[fromCol.dateField] = null;
    } else {
      if (targetCol.dateField) updates[targetCol.dateField] = hoy;
    }

    // Marcar "Pagado" solo registra la fecha (fechaPagado vía dateField). El cobro
    // se contabiliza en la sección Contabilidad a partir de fechaPagado.
    setData(prev => ({
      ...prev,
      ordenes: prev.ordenes.map(o => o.numero === orden.numero ? { ...o, ...updates } : o),
    }));
    setPendingMove(null);
  }

  return (
    <>
      {/* Barra superior */}
      <div className="kanban-toolbar">
        <div className="muted" style={{fontSize:12, fontFamily:"var(--font-mono)"}}>
          {data.ordenes.length} órdenes totales
        </div>
        <button className="btn btn--primary" onClick={onNuevaOrden}>
          <Icon.plus /> Nueva orden
        </button>
      </div>

      {/* Vista mobile: 5 cards por estado */}
      <div className="kanban-mobile">
        {KANBAN_COLS.map(col => {
          const items  = ordenes.filter(o => col.estados.includes(o.estado));
          const isOpen = mobileExpanded === col.id;
          return (
            <div key={col.id} className={`km-col${isOpen ? " km-col--open" : ""}`}
              style={{ "--col-accent": `var(${col.accentVar})` }}>
              <div className="km-col__head" onClick={() => setMobileExpanded(isOpen ? null : col.id)}>
                <div className="km-col__bar" />
                <span className="km-col__label">{col.label}</span>
                <span className="km-col__count">{items.length}</span>
                <svg className="km-col__chevron" width="16" height="16" viewBox="0 0 16 16" fill="none"
                  stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <polyline points="4,6 8,10 12,6" />
                </svg>
              </div>
              {isOpen && (
                <div className="km-col__body">
                  {items.length === 0 ? (
                    <div className="km-col__empty">Sin órdenes en este estado</div>
                  ) : items.map(orden => (
                    <div key={orden.numero} className="km-order-row" onClick={() => onSelectOrden(orden)}>
                      <span className="km-order-row__num">{orden.numero}</span>
                      <div className="km-order-row__info">
                        <div className="km-order-row__plate">{orden.patente}</div>
                        <div className="km-order-row__veh">{orden.marca} {orden.modelo} · {orden.cliente}</div>
                      </div>
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
                        stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
                        style={{ color: "var(--text-mute)", flexShrink: 0 }}>
                        <polyline points="5,3 9,7 5,11" />
                      </svg>
                    </div>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Tablero desktop */}
      <div className="kanban">
        {KANBAN_COLS.map(col => {
          const items   = ordenes.filter(o => col.estados.includes(o.estado));
          const isOver  = dragOver === col.id;
          return (
            <div
              key={col.id}
              className={`kanban-col${isOver ? " kanban-col--over" : ""}`}
              style={{"--col-accent": `var(${col.accentVar})`}}
              onDragOver={e => handleDragOver(e, col.id)}
              onDragLeave={() => setDragOver(null)}
              onDrop={e => handleDrop(e, col.id)}
            >
              <div className="kanban-col__head">
                <span className="kanban-col__label">{col.label}</span>
                <span className="kanban-col__count">{items.length}</span>
              </div>
              <div className="kanban-col__body">
                {items.map(orden => (
                  <KanbanCard
                    key={orden.numero}
                    orden={orden}
                    col={col}
                    colIndex={KANBAN_COLS.indexOf(col)}
                    isDragging={dragging?.numero === orden.numero}
                    onDragStart={e => handleDragStart(e, orden)}
                    onDragEnd={() => setDragging(null)}
                    onAdvance={() => handleAdvance(orden)}
                    onGoBack={() => handleGoBack(orden)}
                    onArchivar={() => handleArchivar(orden)}
                    onOpen={() => onSelectOrden(orden)}
                  />
                ))}
                {items.length === 0 && (
                  <div className="kanban-empty">Sin órdenes</div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {/* Confirmación */}
      {pendingArchive && (
        <ConfirmArchiveModal
          orden={pendingArchive}
          onConfirm={confirmArchive}
          onCancel={() => setPendingArchive(null)}
        />
      )}

      {pendingMove && (
        <ConfirmMoveModal
          orden={pendingMove.orden}
          targetLabel={pendingMove.targetCol.label}
          isBack={pendingMove.isBack}
          dateField={pendingMove.isBack ? pendingMove.fromCol?.dateField : pendingMove.targetCol.dateField}
          isPago={!pendingMove.isBack && pendingMove.targetCol.id === "pagados"}
          onConfirm={confirmMove}
          onCancel={() => setPendingMove(null)}
        />
      )}
    </>
  );
}

// Adapta una orden vieja (items + repuestos número) al modelo nuevo de 3 columnas.
function migrarOrden(o) {
  if (!o) return null;
  const base = { ...o };
  if (!base.mantenimiento && !base.reparaciones && !base.repuestosItems) {
    base.mantenimiento  = [];
    base.reparaciones   = (o.items || []).map(it => ({ descripcion: it.descripcion, importe: Number(it.manoObra) || 0 }));
    base.repuestosItems = Number(o.repuestos) > 0
      ? [{ id: Date.now(), descripcion: "Repuestos varios", compra: 0, venta: Number(o.repuestos), proveedorId: null }]
      : [];
  } else {
    base.mantenimiento  = base.mantenimiento  || [];
    base.reparaciones   = base.reparaciones   || [];
    base.repuestosItems = base.repuestosItems || [];
  }
  // Asegurar id + proveedorId en cada línea de repuesto (compatibilidad con seed/órdenes viejas)
  base.repuestosItems = base.repuestosItems.map((l, i) => ({
    id: l.id ?? Date.now() + i,
    proveedorId: l.proveedorId ?? null,
    ...l,
  }));
  // Asegurar tipoObjetivo en mantenimiento/reparaciones (compatibilidad con seed/órdenes viejas)
  base.mantenimiento = base.mantenimiento.map(l => ({ tipoObjetivo: l.tipoObjetivo ?? null, hs: l.hs ?? "", ...l }));
  base.reparaciones  = base.reparaciones.map(l => ({ tipoObjetivo: l.tipoObjetivo ?? null, hs: l.hs ?? "", ...l }));
  return base;
}

// ── Modal de confirmación de eliminación ──
function ConfirmDeleteModal({ orden, onConfirm, onCancel }) {
  return (
    <div className="modal-backdrop" onClick={onCancel} style={{ zIndex: 2000 }}>
      <div className="confirm-modal" onClick={e => e.stopPropagation()}>
        <div className="confirm-modal__title" style={{ color: "var(--accent)" }}>Eliminar orden</div>
        <div className="confirm-modal__body">
          <div>
            Orden <span className="mono" style={{ color: "var(--brand)" }}>#{orden.numero}</span> — <b>{orden.cliente}</b>
          </div>
          <div style={{ marginTop: 10 }}>
            Esta acción <b>no se puede deshacer</b>. La orden y todos sus registros vinculados serán eliminados permanentemente.
          </div>
        </div>
        <div className="confirm-modal__foot">
          <button className="btn" onClick={onCancel}>Cancelar</button>
          <button className="btn btn--primary" onClick={onConfirm}
            style={{ background: "var(--accent)", borderColor: "var(--accent)" }}>
            Eliminar orden
          </button>
        </div>
      </div>
    </div>
  );
}

// Modal con la orden — réplica del formulario físico
function OrdenModal({ orden, onClose, onSave, onDelete, isNew, nextNumero, tecnicos, proveedores, objetivosTrabajo, ordenes }) {
  const [errorTecnico,     setErrorTecnico]     = React.useState(false);
  const [showDelete,       setShowDelete]       = React.useState(false);
  const [errorFechaEstado, setErrorFechaEstado] = React.useState(false);
  const [errorNumero,      setErrorNumero]      = React.useState(false);
  const [data, setData] = React.useState(() => migrarOrden(orden) || {
    numero: nextNumero || String(Date.now()).slice(-8),
    cliente: "", telefono: "", direccion: "",
    marca: "", modelo: "", patente: "", motor: "nafta", km: "",
    entrada: new Date().toISOString().slice(0, 10),
    fechaEnProceso: null, terminado: null, entregado: null, fechaPagado: null,
    notasGenerales: "",
    tecnicoId: "",
    mantenimiento:  [{ descripcion: "", importe: 0, tipoObjetivo: null, hs: "" }],
    reparaciones:   [{ descripcion: "", importe: 0, tipoObjetivo: null, hs: "" }],
    repuestosItems: [{ id: Date.now(), descripcion: "", compra: 0, venta: 0, proveedorId: null }],
    estado: "ingresado",
  });

  // Recalcula derivados. Mantiene campos legacy (items, repuestos número, manoObraTotal)
  // para no romper Clientes / Historial / Técnicos hasta migrar la contabilidad.
  React.useEffect(() => {
    const mo    = [...data.mantenimiento, ...data.reparaciones].reduce((s, l) => s + (Number(l.importe) || 0), 0);
    const venta = data.repuestosItems.reduce((s, l) => s + (Number(l.venta)  || 0), 0);
    const costo = data.repuestosItems.reduce((s, l) => s + (Number(l.compra) || 0), 0);
    const sub   = mo + venta;
    const items = [...data.mantenimiento, ...data.reparaciones]
      .map((l, i) => ({ item: i + 1, descripcion: l.descripcion, manoObra: Number(l.importe) || 0 }));
    setData(d => ({ ...d, manoObraTotal: mo, repuestos: venta, repuestosCosto: costo, subtotal: sub, total: sub, items }));
  }, [JSON.stringify(data.mantenimiento), JSON.stringify(data.reparaciones), JSON.stringify(data.repuestosItems)]);

  const addLine    = (col, blank) => setData(d => ({ ...d, [col]: [...d[col], blank] }));
  const updateLine = (col, i, k, v) => setData(d => ({ ...d, [col]: d[col].map((l, idx) => idx === i ? { ...l, [k]: v } : l) }));
  const removeLine = (col, i) => setData(d => ({ ...d, [col]: d[col].filter((_, idx) => idx !== i) }));

  const renderColMO = (titulo, col, tipos) => (
    <div className="items-col">
      <div className="items-col__head">{titulo}</div>
      <div className="items-col__body">
        {data[col].length === 0 && <div className="items-col__empty">Sin líneas</div>}
        {data[col].map((l, i) => (
          <div className="mo-line-wrap" key={i}>
            <CustomSelect
              value={l.tipoObjetivo || ""}
              onChange={e => {
                const v = e.target.value;
                setData(d => ({
                  ...d,
                  [col]: d[col].map((line, idx) => idx === i
                    ? { ...line, tipoObjetivo: v || null, descripcion: v || line.descripcion }
                    : line),
                }));
              }}
              style={{ width: "100%", fontSize: 11 }}
            >
              <option value="">— Personalizado (no cuenta para objetivo) —</option>
              {(tipos || []).map(t => <option key={t.nombre} value={t.nombre}>{t.nombre}</option>)}
            </CustomSelect>
            <div className="mo-line">
              <input value={l.descripcion} placeholder="Descripción…"
                onChange={e => updateLine(col, i, "descripcion", e.target.value)} />
              <input className="num" type="number" value={l.hs || ""} placeholder="hs"
                style={{ maxWidth: 52 }} title="Horas trabajadas"
                onWheel={e => e.target.blur()}
                onChange={e => updateLine(col, i, "hs", e.target.value === "" ? "" : Number(e.target.value))} />
              <input className="num" type="number" value={l.importe || ""} placeholder="0"
                onWheel={e => e.target.blur()}
                onChange={e => updateLine(col, i, "importe", Number(e.target.value))} />
              <button className="line-del" title="Quitar" onClick={() => removeLine(col, i)}>✕</button>
            </div>
          </div>
        ))}
      </div>
      <button className="items-col__add" onClick={() => addLine(col, { descripcion: "", importe: 0, tipoObjetivo: null, hs: "" })}>+ Agregar</button>
      <div className="items-col__sub">
        <span>Subtotal</span>
        <span className="mono">{fmtMoney(data[col].reduce((s, l) => s + (Number(l.importe) || 0), 0))}</span>
      </div>
    </div>
  );

  const gananciaRep = (data.repuestos || 0) - (data.repuestosCosto || 0);
  const markupRep   = (data.repuestosCosto || 0) > 0 ? Math.round(gananciaRep / data.repuestosCosto * 100) : null;
  const hsTotal     = [...(data.mantenimiento || []), ...(data.reparaciones || [])].reduce((s, l) => s + (Number(l.hs) || 0), 0);

  // Orden histórica = nueva pero en estado avanzado (no "ingresado")
  const isHistorica = isNew && data.estado !== "ingresado";
  const colIdx = KANBAN_COLS.findIndex(c => c.id === data.estado);
  // Fechas obligatorias hasta el estado actual (aplica a nuevas, históricas y existentes)
  const requiredDateFields = KANBAN_COLS.slice(0, colIdx + 1).filter(c => c.dateField).map(c => c.dateField);
  // Campo de fecha obligatorio según el estado (solo orden normal nueva)
  const requiredDateField = !isHistorica && isNew
    ? (KANBAN_COLS.find(c => c.id === data.estado)?.dateField ?? null)
    : null;

  const needsDate = (campo) => requiredDateFields.includes(campo) && !data[campo];

  const setFecha = (campo) => (e) => {
    setData(d => ({ ...d, [campo]: e.target.value || null }));
    setErrorFechaEstado(false);
  };

  // Número duplicado: para nuevas basta con que exista; para existentes, que sea distinto al original
  const numeroDuplicado = ordenes
    ? ordenes.some(o => o.numero === data.numero && (isNew || o.numero !== orden?.numero))
    : false;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 1240 }}>
        <div className="modal__head">
          <div className="modal__title">{isNew ? "Nueva orden de reparación" : `Orden #${data.numero}`}</div>
          <CustomSelect
            value={data.estado}
            onChange={e => {
              const nuevoEstado = e.target.value;
              setData(d => {
                const up = { ...d, estado: nuevoEstado };
                if (nuevoEstado === "en_proceso" && !d.fechaEnProceso) {
                  up.fechaEnProceso = new Date().toISOString().slice(0, 10);
                }
                return up;
              });
              setErrorFechaEstado(false);
            }}
            style={{ minWidth: 150 }}
          >
            {KANBAN_COLS.map(c => <option key={c.id} value={c.id}>{c.label}</option>)}
          </CustomSelect>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>
        <div className="modal__body">
          <div className="order-sheet">
            {/* HEADER */}
            <div className="order-sheet__head">
              <div className="order-sheet__brand-block">
                <div className="order-sheet__brand-mark"><img src="logo-nuevo.png" alt="Automecánica San Jorge" /></div>
                <div className="order-sheet__brand-text">
                  <b>Automecánica San Jorge</b>
                  · Mecánica Integral del Automotor<br/>
                  · Inyección Electrónica · Lubricentro<br/>
                  Los Celibos 338 - B° San Jorge (1629) Pilar<br/>
                  11-4971-9307 · 11-3289-2318
                </div>
              </div>
              <div className="order-sheet__or-num">
                <small>Orden de reparación N°</small>
                <input
                  value={data.numero}
                  readOnly={!isNew}
                  onChange={isNew ? (e => { setData(d => ({ ...d, numero: e.target.value })); setErrorNumero(false); }) : undefined}
                  style={{
                    background: "transparent", border: "none",
                    borderBottom: `1px solid ${numeroDuplicado ? "var(--accent)" : isNew ? "var(--border)" : "transparent"}`,
                    color: isNew ? "var(--brand)" : "var(--text-mute)",
                    font: "inherit", fontSize: 22, fontWeight: 700, width: "100%",
                    padding: "2px 0", textAlign: "center", outline: "none",
                    cursor: isNew ? "text" : "default",
                  }}
                />
                {numeroDuplicado && (
                  <div style={{ color: "var(--accent)", fontSize: 11, marginTop: 4, textAlign: "center" }}>
                    Este número ya existe en otra orden.
                  </div>
                )}
                <div className="date-grid">
                  <div className="date-grid__cell"></div>
                  <div className="date-grid__cell">Fecha</div>

                  <div className="date-grid__cell date-grid__label">Entrada</div>
                  <div className="date-grid__cell date-grid__value">
                    <input type="date" value={data.entrada || ""} onChange={setFecha("entrada")} />
                  </div>

                  <div className="date-grid__cell date-grid__label">
                    En proceso{needsDate("fechaEnProceso") && <span style={{ color: "var(--accent)" }}> *</span>}
                  </div>
                  <div className="date-grid__cell date-grid__value">
                    <input type="date" value={data.fechaEnProceso || ""} onChange={setFecha("fechaEnProceso")}
                      style={errorFechaEstado && needsDate("fechaEnProceso") ? { outline: "1.5px solid var(--accent)" } : {}} />
                  </div>

                  <div className="date-grid__cell date-grid__label">
                    Terminado{needsDate("terminado") && <span style={{ color: "var(--accent)" }}> *</span>}
                  </div>
                  <div className="date-grid__cell date-grid__value">
                    <input type="date" value={data.terminado || ""} onChange={setFecha("terminado")}
                      style={errorFechaEstado && needsDate("terminado") ? { outline: "1.5px solid var(--accent)" } : {}} />
                  </div>

                  <div className="date-grid__cell date-grid__label">
                    Entregado{needsDate("entregado") && <span style={{ color: "var(--accent)" }}> *</span>}
                  </div>
                  <div className="date-grid__cell date-grid__value">
                    <input type="date" value={data.entregado || ""} onChange={setFecha("entregado")}
                      style={errorFechaEstado && needsDate("entregado") ? { outline: "1.5px solid var(--accent)" } : {}} />
                  </div>

                  <div className="date-grid__cell date-grid__label">
                    Pagado{needsDate("fechaPagado") && <span style={{ color: "var(--accent)" }}> *</span>}
                  </div>
                  <div className="date-grid__cell date-grid__value">
                    <input type="date" value={data.fechaPagado || ""} onChange={setFecha("fechaPagado")}
                      style={errorFechaEstado && needsDate("fechaPagado") ? { outline: "1.5px solid var(--accent)" } : {}} />
                  </div>
                </div>
                {errorFechaEstado && (
                  <div style={{ color: "var(--accent)", fontSize: 11, marginTop: 6 }}>
                    {(isHistorica || !isNew)
                      ? "Completá todas las fechas marcadas con * para este estado."
                      : { fechaEnProceso: "Completá la fecha de inicio del trabajo.", terminado: "Completá la fecha de finalización.", entregado: "Completá la fecha de entrega.", fechaPagado: "Completá la fecha de pago." }[requiredDateField]
                    }
                  </div>
                )}
              </div>
            </div>

            {/* CLIENTE */}
            <div className="order-sheet__client-grid">
              <div className="field">
                <label className="field__label">Sres.</label>
                <input value={data.cliente} onChange={e => setData(d => ({...d, cliente: e.target.value}))} placeholder="Nombre y apellido" />
              </div>
              <div className="field">
                <label className="field__label">Tel.</label>
                <input value={data.telefono} onChange={e => setData(d => ({...d, telefono: e.target.value}))} placeholder="11-XXXX-XXXX" />
              </div>
              <div className="field order-sheet__client-grid--full">
                <label className="field__label">Dirección</label>
                <input value={data.direccion || ""} onChange={e => setData(d => ({...d, direccion: e.target.value}))} placeholder="Calle, número, localidad" />
              </div>
            </div>

            <div className="vehicle-grid">
              <div className="field">
                <label className="field__label">Marca</label>
                <input value={data.marca} onChange={e => setData(d => ({...d, marca: e.target.value}))} />
              </div>
              <div className="field">
                <label className="field__label">Modelo</label>
                <input value={data.modelo} onChange={e => setData(d => ({...d, modelo: e.target.value}))} />
              </div>
              <div className="field">
                <label className="field__label">Patente</label>
                <input value={data.patente} onChange={e => setData(d => ({...d, patente: e.target.value.toUpperCase()}))} />
              </div>
              <div className="field">
                <label className="field__label">Km</label>
                <input value={data.km} onChange={e => setData(d => ({...d, km: e.target.value}))} />
              </div>
            </div>

            <div className="row mt-12" style={{gap: 24}}>
              <span className="field__label" style={{margin: 0}}>Motor:</span>
              <div className="motor-radio">
                {["diesel", "nafta", "gnc"].map(m => (
                  <label key={m}>
                    <input type="checkbox" checked={data.motor === m} onChange={() => setData(d => ({...d, motor: m}))} />
                    {m}
                  </label>
                ))}
              </div>
            </div>

            <div className="field mt-12">
              <label className="field__label">Descripción general</label>
              <textarea
                value={data.notasGenerales || ""}
                onChange={e => setData(d => ({...d, notasGenerales: e.target.value}))}
                placeholder="Cómo ingresa el vehículo, notas adicionales…"
                rows={3}
                style={{ resize: "vertical", fontFamily: "inherit" }}
              />
            </div>

            <div className="row mt-12" style={{gap: 16, alignItems: "flex-start"}}>
              <div className="field" style={{maxWidth: 300}}>
                <label className="field__label">Técnico asignado *</label>
                <CustomSelect
                  value={data.tecnicoId === "" ? "" : String(data.tecnicoId)}
                  onChange={e => {
                    const v = e.target.value;
                    setData(d => ({ ...d, tecnicoId: v === "" ? "" : Number(v) }));
                    setErrorTecnico(false);
                  }}
                >
                  <option value="">Seleccionar técnico…</option>
                  {tecnicos.filter(t => t.activo).map(t => (
                    <option key={t.id} value={String(t.id)}>{t.nombre}</option>
                  ))}
                </CustomSelect>
                {errorTecnico && (
                  <span style={{color: "var(--accent)", fontSize: 11, marginTop: 4, display: "block"}}>
                    Elegí un técnico para guardar la orden.
                  </span>
                )}
              </div>
            </div>

            {/* DESCRIPCIONES — 3 columnas */}
            <div className="items-3col">
              {renderColMO("Mantenimiento", "mantenimiento", objetivosTrabajo?.mantenimientos)}
              {renderColMO("Reparaciones", "reparaciones", objetivosTrabajo?.reparaciones)}

              {/* Repuestos: compra + venta + proveedor por línea */}
              <div className="items-col items-col--rep">
                <div className="items-col__head">Repuestos</div>
                <div className="items-col__subhead">
                  <span>Descripción</span><span>Compra</span><span>Venta</span><span />
                </div>
                <div className="items-col__body">
                  {data.repuestosItems.length === 0 && <div className="items-col__empty">Sin repuestos</div>}
                  {data.repuestosItems.map((l, i) => (
                    <div className="rep-line-wrap" key={l.id ?? i}>
                      <div className="rep-line">
                        <input value={l.descripcion} placeholder="Repuesto…"
                          onChange={e => updateLine("repuestosItems", i, "descripcion", e.target.value)} />
                        <input className="num" type="number" value={l.compra || ""} placeholder="0"
                          onWheel={e => e.target.blur()}
                          onChange={e => updateLine("repuestosItems", i, "compra", Number(e.target.value))} />
                        <input className="num" type="number" value={l.venta || ""} placeholder="0"
                          onWheel={e => e.target.blur()}
                          onChange={e => updateLine("repuestosItems", i, "venta", Number(e.target.value))} />
                        <button className="line-del" title="Quitar" onClick={() => removeLine("repuestosItems", i)}>✕</button>
                      </div>
                      <CustomSelect
                        value={l.proveedorId == null ? "" : String(l.proveedorId)}
                        onChange={e => updateLine("repuestosItems", i, "proveedorId", e.target.value === "" ? null : Number(e.target.value))}
                        style={{ width: "100%", fontSize: 11 }}
                      >
                        <option value="">Sin proveedor</option>
                        {(proveedores || []).map(p => (
                          <option key={p.id} value={String(p.id)}>{p.nombre}</option>
                        ))}
                      </CustomSelect>
                    </div>
                  ))}
                </div>
                <button className="items-col__add" onClick={() => addLine("repuestosItems", { id: Date.now(), descripcion: "", compra: 0, venta: 0, proveedorId: null })}>+ Agregar</button>
                <div className="items-col__sub">
                  <span>Costo <span className="mono">{fmtMoney(data.repuestosCosto || 0)}</span></span>
                  <span>Venta <span className="mono" style={{ color: "var(--text)" }}>{fmtMoney(data.repuestos || 0)}</span></span>
                </div>
              </div>
            </div>

            {/* TOTALES */}
            <div className="totals-block">
              <div className="totals-card">
                <div className="totals-card__label">Mano de obra</div>
                <div className="totals-card__value">{fmtMoney(data.manoObraTotal)}</div>
              </div>
              <div className="totals-card">
                <div className="totals-card__label">Repuestos (venta)</div>
                <div className="totals-card__value">{fmtMoney(data.repuestos)}</div>
              </div>
              <div className="totals-card">
                <div className="totals-card__label">Costo repuestos</div>
                <div className="totals-card__value" style={{ color: "var(--text-dim)", fontSize: 17 }}>{fmtMoney(data.repuestosCosto || 0)}</div>
              </div>
              <div className="totals-card">
                <div className="totals-card__label">Ganancia repuestos</div>
                <div className="totals-card__value" style={{ color: gananciaRep > 0 ? "var(--ok)" : "var(--text-dim)" }}>
                  {fmtMoney(gananciaRep)}
                </div>
                {markupRep != null && <div className="totals-card__sub" style={{ color: "var(--ok)" }}>+{markupRep}% markup</div>}
              </div>
              <div className="totals-card">
                <div className="totals-card__label">Horas de trabajo</div>
                <div className="totals-card__value" style={{ color: hsTotal > 0 ? "var(--amber)" : "var(--text-dim)" }}>
                  {hsTotal > 0 ? `${hsTotal} hs` : "—"}
                </div>
              </div>
              <div className="totals-card totals-card--total">
                <div className="totals-card__label">Total</div>
                <div className="totals-card__value">{fmtMoney(data.total)}</div>
              </div>
            </div>

            <div className="muted mt-18" style={{fontSize: 11, fontStyle: "italic"}}>
              Nota: Automecánica San Jorge no se responsabiliza por robos, daños, incendio y otras causas fuera de su control.
            </div>
          </div>
        </div>
        <div className="modal__foot">
          {!isNew && (
            <button className="btn btn--ghost" style={{ color: "var(--accent)", marginRight: "auto" }}
              onClick={() => setShowDelete(true)}>
              <Icon.trash /> Eliminar
            </button>
          )}
          <button className="btn" onClick={onClose}>Cancelar</button>
          {!isNew && data.archivado && (
            <button className="btn btn--ghost" onClick={() => onSave({ ...data, archivado: false })} title="Volver al tablero Kanban">
              Desarchivar
            </button>
          )}
          <button className="btn btn--primary" onClick={() => {
            if (numeroDuplicado) return;
            if (!data.tecnicoId) { setErrorTecnico(true); return; }
            if (isHistorica) {
              const missing = requiredDateFields.filter(f => !data[f]);
              if (missing.length > 0) { setErrorFechaEstado(true); return; }
              onSave(data);
            } else if (!isNew) {
              const missing = requiredDateFields.filter(f => !data[f]);
              if (missing.length > 0) { setErrorFechaEstado(true); return; }
              onSave(data);
            } else if (requiredDateField && !data[requiredDateField]) {
              setErrorFechaEstado(true);
            } else if (requiredDateField) {
              const refDate = data[requiredDateField];
              const backfill = {};
              KANBAN_COLS.slice(0, colIdx + 1).forEach(c => {
                if (c.dateField && !data[c.dateField]) backfill[c.dateField] = refDate;
              });
              onSave({ ...data, ...backfill });
            } else {
              onSave(data);
            }
          }}>
            <Icon.check /> {isNew ? "Crear orden" : "Guardar cambios"}
          </button>
        </div>
        {showDelete && (
          <ConfirmDeleteModal
            orden={data}
            onConfirm={onDelete}
            onCancel={() => setShowDelete(false)}
          />
        )}
      </div>
    </div>
  );
}

Object.assign(window, { OrdenesView, OrdenModal });