// Sección Técnicos — perfiles, ficha individual e historial mensual con bono congelado por mes

const MESES_TEC = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];

// "terminado o posterior" → la orden ya generó trabajo cobrable para el técnico
const ESTADOS_CON_MO = ["terminado", "entregado", "pagados"];

// Fecha de referencia para acreditar trabajo: `terminado` en el flujo normal;
// `fechaPagado` como fallback para órdenes históricas cargadas directo como pagadas.
function mesRefTecnico(o) {
  return (o.terminado || o.fechaPagado || "").slice(0, 7);
}

// Órdenes acreditadas a un técnico en un mes (YYYY-MM)
function ordenesDeTecnicoEnMes(ordenes, tecnicoId, mesKey) {
  return ordenes.filter(o =>
    o.tecnicoId === tecnicoId &&
    ESTADOS_CON_MO.includes(o.estado) &&
    mesRefTecnico(o) === mesKey
  );
}

// Mano de obra acreditada a un técnico en un mes (suma líneas en tiempo real, no el campo cacheado)
function manoObraTecnicoMes(ordenes, tecnicoId, mesKey) {
  return ordenesDeTecnicoEnMes(ordenes, tecnicoId, mesKey)
    .reduce((s, o) => s + [...(o.mantenimiento || []), ...(o.reparaciones || [])]
      .reduce((a, l) => a + (Number(l.importe) || 0), 0), 0);
}

// Cantidad de órdenes terminadas por un técnico en un mes
function ordenesTecnicoMes(ordenes, tecnicoId, mesKey) {
  return ordenesDeTecnicoEnMes(ordenes, tecnicoId, mesKey).length;
}

// Horas totales de líneas de una orden
function horasDeOrden(o) {
  return [...(o.mantenimiento || []), ...(o.reparaciones || [])]
    .reduce((s, l) => s + (Number(l.hs) || 0), 0);
}

const ESTADOS_CON_HS = ["en_proceso", "terminado", "entregado", "pagados"];

// Horas de un técnico en un mes (usando fechaEnProceso como referencia)
function horasTecnicoMes(ordenes, tecnicoId, mesKey) {
  return ordenes
    .filter(o =>
      o.tecnicoId === tecnicoId &&
      ESTADOS_CON_HS.includes(o.estado) &&
      (o.fechaEnProceso || "").slice(0, 7) === mesKey
    )
    .reduce((s, o) => s + horasDeOrden(o), 0);
}

// Semana ISO (lunes-domingo) que contiene hoy
function semanaISO() {
  const hoy = new Date();
  const dow = hoy.getDay();
  const diffToMon = dow === 0 ? -6 : 1 - dow;
  const lun = new Date(hoy); lun.setDate(hoy.getDate() + diffToMon);
  const dom = new Date(lun); dom.setDate(lun.getDate() + 6);
  const fmt = d => d.toISOString().slice(0, 10);
  return { desde: fmt(lun), hasta: fmt(dom) };
}

// Horas de un técnico en la semana en curso
function horasTecnicoSemana(ordenes, tecnicoId) {
  const { desde, hasta } = semanaISO();
  return ordenes
    .filter(o =>
      o.tecnicoId === tecnicoId &&
      ESTADOS_CON_HS.includes(o.estado) &&
      (o.fechaEnProceso || "") >= desde &&
      (o.fechaEnProceso || "") <= hasta
    )
    .reduce((s, o) => s + horasDeOrden(o), 0);
}

// ── % de bono congelado por mes ──
// El historial guarda los tramos { desde: "YYYY-MM", pct }. Para un mes dado se usa
// el tramo vigente más reciente (desde <= mes). Cambiar el % solo afecta de ese mes en adelante.
function bonoPctEnMes(t, mesKey) {
  const hist = t.bonoHistory;
  if (!hist || !hist.length) return Number(t.bonoPct) || 0;
  let pct = hist[0].pct;
  for (const h of hist) { if (h.desde <= mesKey) pct = h.pct; else break; }
  return Number(pct) || 0;
}

// Devuelve el técnico con un nuevo % vigente desde `mesKey` (congela lo anterior)
function tecnicoConBono(t, mesKey, newPct) {
  const hist = t.bonoHistory && t.bonoHistory.length
    ? [...t.bonoHistory]
    : [{ desde: "0000-01", pct: Number(t.bonoPct) || 0 }];
  const i = hist.findIndex(h => h.desde === mesKey);
  if (i >= 0) hist[i] = { desde: mesKey, pct: newPct };
  else hist.push({ desde: mesKey, pct: newPct });
  hist.sort((a, b) => a.desde.localeCompare(b.desde));
  return { ...t, bonoPct: newPct, bonoHistory: hist };
}

function bonoTecnicoMes(ordenes, t, mesKey) {
  const mo = manoObraTecnicoMes(ordenes, t.id, mesKey);
  return Math.round(mo * bonoPctEnMes(t, mesKey) / 100);
}

// Últimos 12 meses desde hoy, como { key: "2026-05", label: "Mayo 2026" }
function ultimosMeses(n = 12) {
  const out = [];
  const now = new Date();
  for (let i = 0; i < n; i++) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
    out.push({ key, label: `${MESES_TEC[d.getMonth()]} ${d.getFullYear()}` });
  }
  return out;
}

const labelDeMes = (mesKey) => {
  const [y, m] = mesKey.split("-");
  return `${MESES_TEC[Number(m) - 1]} ${y}`;
};

function TecnicoModal({ item, onClose, onSave }) {
  const [form, setForm] = React.useState({
    nombre:       item?.nombre       || "",
    especialidad: item?.especialidad || "",
    telefono:     item?.telefono     || "",
    bonoPct:      item?.bonoPct ?? 10,
  });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const valid = form.nombre.trim().length > 0;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 440 }}>
        <div className="modal__head">
          <div className="modal__title">{item ? "Editar técnico" : "Nuevo técnico"}</div>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>
        <div className="modal__body">
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div className="field">
              <label className="field__label">Nombre *</label>
              <input value={form.nombre} onChange={set("nombre")} autoFocus placeholder="Nombre y apellido" />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="field">
                <label className="field__label">Especialidad</label>
                <input value={form.especialidad} onChange={set("especialidad")} placeholder="Ej: Mecánica general" />
              </div>
              <div className="field">
                <label className="field__label">Teléfono</label>
                <input value={form.telefono} onChange={set("telefono")} placeholder="11-XXXX-XXXX" />
              </div>
            </div>
            <div className="field" style={{ maxWidth: 160 }}>
              <label className="field__label">% de bono</label>
              <input type="number" min="0" max="100" value={form.bonoPct} onWheel={e => e.target.blur()} onChange={set("bonoPct")}
                style={{ fontFamily: "var(--font-mono)" }} />
              {item && (
                <span className="muted" style={{ fontSize: 11, marginTop: 5, display: "block" }}>
                  Se aplica desde este mes en adelante. Los meses anteriores conservan su %.
                </span>
              )}
            </div>
          </div>
        </div>
        <div className="modal__foot">
          <button className="btn btn--ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn--primary"
            onClick={() => valid && onSave({ ...form, bonoPct: Number(form.bonoPct) || 0 })}
            disabled={!valid} style={{ opacity: valid ? 1 : 0.45 }}>
            <Icon.check /> {item ? "Guardar cambios" : "Agregar técnico"}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Ficha individual del técnico (vista completa) ──
function TecnicoDetalle({ tecnico, ordenes, currentMesKey, onBack, onEdit, onDelete, onSelectOrden }) {
  const meses = React.useMemo(() => ultimosMeses(12), []);
  const [mesKey, setMesKey] = React.useState(currentMesKey);

  const idx     = meses.findIndex(m => m.key === mesKey);
  const safeIdx = idx < 0 ? 0 : idx;
  const ords    = ordenesDeTecnicoEnMes(ordenes, tecnico.id, mesKey)
    .sort((a, b) => new Date(b.terminado || b.fechaPagado) - new Date(a.terminado || a.fechaPagado));
  const mo      = ords.reduce((s, o) => s + Number(o.manoObraTotal || 0), 0);
  const pct     = bonoPctEnMes(tecnico, mesKey);
  const bono    = Math.round(mo * pct / 100);
  const hsMes   = horasTecnicoMes(ordenes, tecnico.id, mesKey);
  const hsSemana = horasTecnicoSemana(ordenes, tecnico.id);

  const [hiddenKpis,    setHiddenKpis]    = React.useState(new Set());
  const [showHistorial, setShowHistorial] = React.useState(true);

  const isHidden  = id => hiddenKpis.has(id);
  const toggleKpi = id => setHiddenKpis(prev => {
    const next = new Set(prev);
    next.has(id) ? next.delete(id) : next.add(id);
    return next;
  });
  const eyeBtn = (id, pos = { top: 8, right: 8 }) => (
    <button onClick={() => toggleKpi(id)} title={isHidden(id) ? "Mostrar" : "Ocultar"}
      style={{ position: "absolute", background: "none", border: "none", cursor: "pointer", color: "var(--text-mute)", padding: 2, lineHeight: 0, ...pos }}>
      {isHidden(id) ? <Icon.eye width="12" height="12" /> : <Icon.eyeOff width="12" height="12" />}
    </button>
  );
  const kpiVal = (id, node) => isHidden(id)
    ? <div className="kpi__value" style={{ color: "var(--text-mute)", letterSpacing: 6 }}>• • •</div>
    : node;

  const goOlder = () => { if (safeIdx < meses.length - 1) setMesKey(meses[safeIdx + 1].key); };
  const goNewer = () => { if (safeIdx > 0) setMesKey(meses[safeIdx - 1].key); };

  return (
    <>
      <div className="tec-detail__head">
        <button className="btn btn--ghost btn--sm tec-back" onClick={onBack}>← Volver</button>
        <span className="avatar-initials avatar-initials--lg">{initials(tecnico.nombre)}</span>
        <div className="tec-detail__id">
          <div className="tec-detail__name">{tecnico.nombre}</div>
          <div className="tec-detail__meta">
            {tecnico.especialidad || "Sin especialidad"}
            {tecnico.telefono ? <span className="mono"> · {tecnico.telefono}</span> : null}
          </div>
        </div>
        <span className={`pill pill--${tecnico.activo ? "terminado" : "entregado"}`} style={{ marginLeft: 8 }}>
          <span className="pill__dot" />{tecnico.activo ? "Activo" : "Baja"}
        </span>
        <div style={{ flex: 1 }} />
        <button className="btn btn--ghost btn--sm" onClick={onEdit}><Icon.edit /> Editar</button>
        <button className="btn btn--ghost btn--sm" onClick={onDelete} style={{ color: "var(--text-mute)" }} title="Eliminar técnico"><Icon.trash /></button>
      </div>

      {/* Navegador de mes */}
      <div className="month-nav">
        <button className="month-nav__btn" onClick={goOlder} disabled={safeIdx >= meses.length - 1} title="Mes anterior">
          <span style={{ transform: "rotate(180deg)", display: "inline-flex" }}><Icon.chevronRight /></span>
        </button>
        <div className="month-nav__current">{labelDeMes(mesKey)}</div>
        <button className="month-nav__btn" onClick={goNewer} disabled={safeIdx <= 0} title="Mes siguiente">
          <Icon.chevronRight />
        </button>
      </div>

      {/* KPIs financieros */}
      <div className="section-title" style={{ marginTop: 0 }}>Resumen financiero</div>
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
        <div className="kpi" style={{ position: "relative" }}>
          {eyeBtn("ordenes")}
          <div className="kpi__bar" style={{ background: "var(--info)" }} />
          <div className="kpi__label">Órdenes del mes</div>
          {kpiVal("ordenes", <><div className="kpi__value mono">{ords.length}</div><div className="kpi__sub muted">acreditadas</div></>)}
        </div>
        <div className="kpi" style={{ position: "relative" }}>
          {eyeBtn("mo")}
          <div className="kpi__bar" style={{ background: "var(--brand)" }} />
          <div className="kpi__label">Mano de obra</div>
          {kpiVal("mo", <><div className="kpi__value mono" style={{ color: "var(--brand)" }}>{fmtMoneyShort(mo)}</div><div className="kpi__sub muted">{labelDeMes(mesKey)}</div></>)}
        </div>
        <div className="kpi" style={{ position: "relative" }}>
          {eyeBtn("bonoPct")}
          <div className="kpi__bar" style={{ background: "var(--text-dim)" }} />
          <div className="kpi__label">% de bono</div>
          {kpiVal("bonoPct", <><div className="kpi__value mono">{pct}%</div><div className="kpi__sub muted">vigente este mes</div></>)}
        </div>
        <div className="kpi" style={{ position: "relative" }}>
          {eyeBtn("bono")}
          <div className="kpi__bar" style={{ background: "var(--ok)" }} />
          <div className="kpi__label">Bono del mes</div>
          {kpiVal("bono", <><div className="kpi__value mono" style={{ color: "var(--ok)" }}>{fmtMoneyShort(bono)}</div><div className="kpi__sub muted">{fmtMoney(mo)} × {pct}%</div></>)}
        </div>
      </div>

      {/* KPIs de horas */}
      <div className="section-title">Horas trabajadas</div>
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(2,1fr)" }}>
        <div className="kpi" style={{ position: "relative" }}>
          {eyeBtn("hsMes", { bottom: 10, right: 8 })}
          <div className="kpi__bar" style={{ background: "var(--amber)" }} />
          <div className="kpi__icon" style={{ background: "rgba(255,180,0,.12)", color: "var(--amber)" }}>
            <Icon.clock width="16" height="16" />
          </div>
          <div className="kpi__label">Horas trabajadas — mes</div>
          {kpiVal("hsMes", <><div className="kpi__value mono">{hsMes > 0 ? `${hsMes} hs` : "—"}</div><div className="kpi__sub muted">{labelDeMes(mesKey)}</div></>)}
        </div>
        <div className="kpi" style={{ position: "relative" }}>
          {eyeBtn("hsSemana", { bottom: 10, right: 8 })}
          <div className="kpi__bar" style={{ background: "var(--amber)" }} />
          <div className="kpi__icon" style={{ background: "rgba(255,180,0,.12)", color: "var(--amber)" }}>
            <Icon.clock width="16" height="16" />
          </div>
          <div className="kpi__label">Horas trabajadas — semana</div>
          {kpiVal("hsSemana", <><div className="kpi__value mono">{hsSemana > 0 ? `${hsSemana} hs` : "—"}</div><div className="kpi__sub muted">semana en curso</div></>)}
        </div>
      </div>

      {/* Órdenes acreditadas en el mes */}
      <div className="section-title" style={{ marginTop: 24 }}>
        Historial — {labelDeMes(mesKey)}
        <button className="btn btn--ghost btn--sm" style={{ marginLeft: "auto", gap: 5, fontSize: 11 }}
          onClick={() => setShowHistorial(v => !v)}>
          {showHistorial ? <><Icon.eyeOff width="13" height="13" /> Ocultar</> : <><Icon.eye width="13" height="13" /> Mostrar</>}
        </button>
      </div>
      {showHistorial && (
        <div className="card">
          {ords.length === 0 ? (
            <div className="card__body muted">Sin órdenes acreditadas en este mes.</div>
          ) : (
            <div className="timeline">
              {ords.map(o => (
                <div className="timeline-item" key={o.numero}>
                  <div className="timeline-dot">{o.numero.slice(-2)}</div>
                  <div style={{ flex: 1, cursor: onSelectOrden ? "pointer" : "default" }}
                       onClick={() => onSelectOrden && onSelectOrden(o)}>
                    <div className="row" style={{ justifyContent: "space-between" }}>
                      <div>
                        <span className="mono" style={{ color: "var(--brand)", fontWeight: 600, marginRight: 10 }}>#{o.numero}</span>
                        <b className="mono" style={{ letterSpacing: 0.5 }}>{o.patente}</b>
                        <span className="muted" style={{ fontSize: 12, marginLeft: 8 }}>{o.cliente}</span>
                      </div>
                      <span className={`pill pill--${estadoPill[o.estado]}`}><span className="pill__dot" />{estadoLabel[o.estado]}</span>
                    </div>
                    <div className="row mt-12" style={{ gap: 18, fontSize: 12 }}>
                      <span className="muted">Fecha <span className="mono" style={{ color: "var(--text)" }}>{fmtDate(o.terminado || o.fechaPagado)}</span></span>
                      <span className="muted">M.O. <span className="mono" style={{ color: "var(--brand)", fontWeight: 600 }}>{fmtMoney(o.manoObraTotal)}</span></span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </>
  );
}

function TecnicosView({ data, setData, onSelectOrden, mes }) {
  const currentMesKey = mes;
  const mesLabel = labelDeMes(currentMesKey);

  const [selectedId, setSelectedId] = React.useState(null);
  const [showModal, setShowModal]   = React.useState(false);
  const [editItem,  setEditItem]    = React.useState(null);

  const tecnicos = data.tecnicos || [];

  const openNew  = () => { setEditItem(null); setShowModal(true); };
  const openEdit = (t) => { setEditItem(t); setShowModal(true); };

  const handleSave = (form) => {
    if (editItem) {
      setData(d => ({
        ...d,
        tecnicos: d.tecnicos.map(t => {
          if (t.id !== editItem.id) return t;
          const base = { ...t, nombre: form.nombre, especialidad: form.especialidad, telefono: form.telefono };
          // Si cambió el %, congelar lo anterior y aplicar desde el mes actual
          return Number(form.bonoPct) !== (Number(t.bonoPct) || 0)
            ? tecnicoConBono(base, currentMesKey, Number(form.bonoPct) || 0)
            : base;
        }),
      }));
    } else {
      setData(d => ({
        ...d,
        tecnicos: [...(d.tecnicos || []), {
          ...form, id: Date.now(), activo: true,
          bonoHistory: [{ desde: currentMesKey, pct: Number(form.bonoPct) || 0 }],
        }],
      }));
    }
    setShowModal(false);
    setEditItem(null);
  };

  const toggleActivo = (id) =>
    setData(d => ({ ...d, tecnicos: d.tecnicos.map(t => t.id === id ? { ...t, activo: !t.activo } : t) }));

  const handleDelete = (id) => {
    setData(d => ({ ...d, tecnicos: d.tecnicos.filter(t => t.id !== id) }));
    setSelectedId(null);
  };

  const selected = tecnicos.find(t => t.id === selectedId) || null;

  // ── Ficha individual ──
  if (selected) {
    return (
      <>
        <TecnicoDetalle
          tecnico={selected}
          ordenes={data.ordenes}
          currentMesKey={currentMesKey}
          onBack={() => setSelectedId(null)}
          onEdit={() => openEdit(selected)}
          onDelete={() => { if (window.confirm(`¿Eliminar a ${selected.nombre}? Esta acción no se puede deshacer.`)) handleDelete(selected.id); }}
          onSelectOrden={onSelectOrden}
        />
        {showModal && (
          <TecnicoModal item={editItem} onClose={() => { setShowModal(false); setEditItem(null); }} onSave={handleSave} />
        )}
      </>
    );
  }

  // ── Lista maestra: grilla de tarjetas ──
  const tarjetas = tecnicos.map(t => ({
    t,
    mo:       manoObraTecnicoMes(data.ordenes, t.id, currentMesKey),
    ords:     ordenesTecnicoMes(data.ordenes, t.id, currentMesKey),
    bono:     bonoTecnicoMes(data.ordenes, t, currentMesKey),
    hsMes:    horasTecnicoMes(data.ordenes, t.id, currentMesKey),
    hsSemana: horasTecnicoSemana(data.ordenes, t.id),
  }));
  const totalMO   = tarjetas.reduce((s, f) => s + f.mo, 0);
  const totalBono = tarjetas.reduce((s, f) => s + f.bono, 0);

  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--brand)" }} />
          <div className="kpi__icon" style={{ background: "var(--brand-soft)", color: "var(--brand)" }}>
            <Icon.wrench width="16" height="16" />
          </div>
          <div className="kpi__label">Mano de obra del mes</div>
          <div className="kpi__value mono" style={{ color: "var(--brand)" }}>{fmtMoneyShort(totalMO)}</div>
          <div className="kpi__sub muted">{mesLabel}</div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--ok)" }} />
          <div className="kpi__icon" style={{ background: "var(--ok-soft)", color: "var(--ok)" }}>
            <Icon.cash width="16" height="16" />
          </div>
          <div className="kpi__label">Total bonos del mes</div>
          <div className="kpi__value mono" style={{ color: "var(--ok)" }}>{fmtMoneyShort(totalBono)}</div>
          <div className="kpi__sub muted">{tecnicos.filter(t => t.activo).length} técnicos activos</div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--info)" }} />
          <div className="kpi__icon" style={{ background: "var(--info-soft)", color: "var(--info)" }}>
            <Icon.calendar width="16" height="16" />
          </div>
          <div className="kpi__label">Mes en curso</div>
          <div className="kpi__value" style={{ fontSize: 18 }}>{mesLabel}</div>
          <div className="kpi__sub muted">por fecha de terminado</div>
        </div>
      </div>

      <div className="filter-bar">
        <div className="muted" style={{ fontSize: 12, fontFamily: "var(--font-mono)" }}>
          {tecnicos.length} {tecnicos.length === 1 ? "técnico" : "técnicos"}
        </div>
        <div style={{ flex: 1 }} />
        <button className="btn btn--primary" onClick={openNew}>
          <Icon.plus /> Agregar técnico
        </button>
      </div>

      {tecnicos.length === 0 ? (
        <div className="card">
          <div className="card__body" style={{ textAlign: "center", padding: "52px 24px" }}>
            <div className="muted" style={{ fontSize: 14 }}>No hay técnicos cargados.</div>
            <button className="btn btn--primary" style={{ marginTop: 18 }} onClick={openNew}>
              <Icon.plus /> Agregar primer técnico
            </button>
          </div>
        </div>
      ) : (
        <div className="tec-grid">
          {tarjetas.map(({ t, mo, ords, bono, hsMes, hsSemana }) => (
            <div key={t.id} className={`tec-card${t.activo ? "" : " tec-card--off"}`} onClick={() => setSelectedId(t.id)}>
              <div className="tec-card__top">
                <span className="avatar-initials avatar-initials--lg">{initials(t.nombre)}</span>
                <div className="tec-card__id">
                  <div className="tec-card__name">{t.nombre}</div>
                  <div className="tec-card__spec muted">{t.especialidad || "—"}</div>
                </div>
                <span className={`pill pill--${t.activo ? "terminado" : "entregado"}`}
                  onClick={e => { e.stopPropagation(); toggleActivo(t.id); }}
                  style={{ cursor: "pointer", userSelect: "none" }}
                  title={t.activo ? "Click para dar de baja" : "Click para reactivar"}>
                  <span className="pill__dot" />{t.activo ? "Activo" : "Baja"}
                </span>
              </div>
              <div className="tec-card__stats">
                <div className="tec-card__stat">
                  <div className="tec-card__stat-label">Órdenes</div>
                  <div className="tec-card__stat-value mono">{ords}</div>
                </div>
                <div className="tec-card__stat">
                  <div className="tec-card__stat-label">Mano de obra</div>
                  <div className="tec-card__stat-value mono" style={{ color: "var(--brand)" }}>{fmtMoneyShort(mo)}</div>
                </div>
                <div className="tec-card__stat">
                  <div className="tec-card__stat-label">Bono</div>
                  <div className="tec-card__stat-value mono" style={{ color: "var(--ok)" }}>{fmtMoneyShort(bono)}</div>
                </div>
                <div className="tec-card__stat">
                  <div className="tec-card__stat-label">Hs. mes</div>
                  <div className="tec-card__stat-value mono" style={{ color: "var(--amber)" }}>{hsMes > 0 ? `${hsMes}hs` : "—"}</div>
                </div>
                <div className="tec-card__stat">
                  <div className="tec-card__stat-label">Hs. semana</div>
                  <div className="tec-card__stat-value mono" style={{ color: "var(--amber)" }}>{hsSemana > 0 ? `${hsSemana}hs` : "—"}</div>
                </div>
              </div>
              <div className="tec-card__foot">
                <span className="muted" style={{ fontSize: 11 }}>{mesLabel}</span>
                <span className="tec-card__link">Ver ficha <Icon.chevronRight width="14" height="14" /></span>
              </div>
            </div>
          ))}
        </div>
      )}

      {showModal && (
        <TecnicoModal item={editItem} onClose={() => { setShowModal(false); setEditItem(null); }} onSave={handleSave} />
      )}
    </>
  );
}

Object.assign(window, { TecnicosView });