// src/screen-entrega.jsx — MACHOTES 0.3.2, segunda mitad (2026-10-12).
//
//   #1219 · Ajustes › Documentos: el despacho le pone nombre a cada documento propio.
//   #1225 · …y elige en qué avisos y para qué ramo o producto viaja cada uno.
//   #1221 · La tarjeta de entrega: lo que declara el machote viaja INCLUIDO, sin casillas.
//   Tweaks «Machotes · simular».
//
// Estado vivo: el mismo objeto MACH de screen-machotes.jsx. Lo que haces en Ajustes se ve en la tarjeta.

// ═══════════════════════════════════════════════════════════════════════════
// #1219 + #1225 · AJUSTES › DOCUMENTOS
// ═══════════════════════════════════════════════════════════════════════════
const MX_EJEMPLOS_PDF = [
  { archivo: 'condiciones_rc_profesional.pdf', kb: 380, detalle: '380 KB · para el recorrido de RC Profesional', archivos: [{ archivo: 'condiciones_rc_profesional.pdf', kb: 380 }] },
  { archivo: 'carta_bienvenida.pdf', kb: 140, detalle: '140 KB', archivos: [{ archivo: 'carta_bienvenida.pdf', kb: 140 }] },
  { etiqueta: 'Tres archivos a la vez', detalle: 'carta_bienvenida.pdf, tabla_deducibles.pdf, guia_reclamos.pdf', archivos: [{ archivo: 'carta_bienvenida.pdf', kb: 140 }, { archivo: 'tabla_deducibles.pdf', kb: 92 }, { archivo: 'guia_reclamos.pdf', kb: 410 }] },
];

function MachotesDocumentos() {
  const { pushToast } = useAxStore();
  const { navigate } = useHashRoute();
  useMach();
  const [nombre, setNombre] = useState('');
  const [ren, setRen] = useState(null);          // { id, valor, error }
  const [viajaId, setViajaId] = useState(null);
  const [quitarId, setQuitarId] = useState(null);

  // Un documento recién subido abre su «Dónde viaja»: ahí se elige, no con casillas en cada envío.
  useEffect(() => { if (MACH.abrirViaja && MACH.docs.some((d) => d.id === MACH.abrirViaja)) { setViajaId(MACH.abrirViaja); MACH.abrirViaja = null; } });

  const subiendo = MACH.subiendo;
  const iniciar = (lista) => {
    machSet({ subiendo: lista, nombresPendientes: null, avisoSubida: null });
    setNombre('');
    machJob('subida', 1700, () => {
      lista.forEach((a) => machAgregarDoc(a.nombre, a.archivo, a.kb));
      if (lista.length > 1) MACH.abrirViaja = null;
      MACH.subiendo = null;
      MACH.avisoSubida = lista.length > 1 ? 'Se subieron ' + lista.length + ' documentos. Abre «Dónde viaja» en cada uno para elegir sus avisos.' : null;
    });
  };
  const sinPdf = (s) => s.replace(/\.pdf$/i, '');
  const elegir = (o) => {
    const archivos = o.archivos;
    if (archivos.length === 1) { iniciar([{ ...archivos[0], nombre: nombre.trim() || sinPdf(archivos[0].archivo) }]); return; }
    if (MACH.q1 === 'A') iniciar(archivos.map((a) => ({ ...a, nombre: sinPdf(a.archivo) })));
    else machSet({ nombresPendientes: archivos.map((a) => ({ ...a, nombre: '', error: false })), avisoSubida: null });
  };
  const pend = MACH.nombresPendientes;
  const guardarPendientes = () => {
    const rev = pend.map((a) => ({ ...a, error: !a.nombre.trim() }));
    if (rev.some((a) => a.error)) { machSet({ nombresPendientes: rev }); return; }
    iniciar(rev.map((a) => ({ archivo: a.archivo, kb: a.kb, nombre: a.nombre.trim() })));
  };

  const guardarNombre = () => {
    const v = ren.valor.trim();
    if (!v) { setRen({ ...ren, error: true }); return; }
    machSet({ docs: MACH.docs.map((d) => (d.id === ren.id ? { ...d, nombre: v } : d)) });
    pushToast({ kind: 'success', message: 'Listo. Ahora se ve como «' + v + '» en esta lista y en cada envío.' });
    setRen(null);
  };

  return (
    <MxPagina crumbs={[{ label: 'Ajustes', to: '/ajustes' }, { label: 'Machotes', to: '/ajustes/machotes' }, { label: 'Documentos' }]}
      titulo="Documentos que van en toda entrega"
      subtitulo="Los PDF de tu despacho que acompañan tus avisos. Cada uno se lista por el nombre que tú le pongas. Elige en qué avisos viaja cada documento: los que elijas van incluidos, sin marcarlos a mano.">
      {MACH.avisoSubida ? <MxNota tono="ok">{MACH.avisoSubida}</MxNota> : null}
      {MACH.docs.length === 0 && !subiendo ? (
        <MxNota tono="info">Todavía no has subido documentos. Sube el primero y ponle el nombre con el que lo reconoces.</MxNota>
      ) : null}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {MACH.docs.map((d) => {
          if (ren && ren.id === d.id) {
            return (
              <div key={d.id} className="ax-card" style={{ padding: '14px 16px', display: 'flex', gap: 14, alignItems: 'flex-start', flexWrap: 'wrap', borderColor: 'var(--ax-accent-line)' }}>
                <div style={{ flex: '1 1 320px', minWidth: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <MxCampo label="Nombre del documento">
                    <AxInput autoFocus value={ren.valor} placeholder="Escribe un nombre" aria-label="Nombre del documento"
                      onChange={(e) => setRen({ ...ren, valor: e.target.value, error: false })}
                      onKeyDown={(e) => { if (e.key === 'Enter') guardarNombre(); }}
                      style={ren.error ? { borderColor: 'var(--ax-danger)' } : undefined}/>
                    {ren.error
                      ? <MxError>El nombre no puede quedar vacío. Escribe cómo quieres ver este documento en la lista.</MxError>
                      : <div className="ax-field-helper">Así se verá en esta lista y en cada envío.</div>}
                  </MxCampo>
                  <span className="ax-mono" style={{ fontSize: 11.5, color: 'var(--ax-fg-muted)' }}>{d.archivo} · {machTam(d.kb)}</span>
                  {ren.error ? <span style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>Si cancelas, se queda el nombre anterior: «{d.nombre}».</span> : null}
                </div>
                <div style={{ display: 'flex', gap: 8, paddingTop: 22 }}>
                  <AxButton size="sm" variant="primary" onClick={guardarNombre}>Guardar</AxButton>
                  <AxButton size="sm" variant="tertiary" onClick={() => setRen(null)}>Cancelar</AxButton>
                </div>
              </div>
            );
          }
          if (viajaId === d.id) return <MxViajaEditor key={d.id} doc={d} onCerrar={() => setViajaId(null)}/>;
          return (
            <div key={d.id} data-doc={d.id} className="ax-card" style={{ padding: '14px 16px', display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', borderColor: d.ausente ? 'var(--ax-warm-line)' : undefined }}>
              <div style={{ flex: '1 1 300px', minWidth: 0, display: 'flex', flexDirection: 'column', gap: 3 }}>
                <span style={{ fontSize: 15, color: 'var(--ax-fg-strong)', fontWeight: 600 }}>{d.nombre}</span>
                <span className="ax-mono" style={{ fontSize: 11.5, color: 'var(--ax-fg-muted)' }}>{d.archivo}{d.ausente ? '' : ' · ' + machTam(d.kb)} · subido {d.fecha}</span>
                {d.ausente ? <span style={{ fontSize: 12.5, color: 'var(--ax-warm)' }}>Ya no está en esta computadora: vuelve a subirlo.</span> : null}
                <span style={{ fontSize: 12.5, color: 'var(--ax-fg-muted)' }}>Viaja en: <b style={{ color: 'var(--ax-fg)', fontWeight: 500 }}>{machResumenViaja(d.viaja)}</b></span>
              </div>
              {quitarId === d.id ? (
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
                  <span style={{ fontSize: 12.5, color: 'var(--ax-fg)' }}>¿Quitar «{d.nombre}»? Dejará de viajar en tus avisos.</span>
                  <AxButton size="sm" variant="danger" onClick={() => { machQuitarDoc(d.id); setQuitarId(null); pushToast({ kind: 'info', message: 'Quitaste «' + d.nombre + '». Ya no viaja en ningún aviso.' }); }}>Quitar</AxButton>
                  <AxButton size="sm" variant="tertiary" onClick={() => setQuitarId(null)}>Cancelar</AxButton>
                </div>
              ) : (
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {d.ausente ? <AxButton size="sm" variant="secondary" onClick={() => { machSet({ docs: MACH.docs.map((x) => (x.id === d.id ? { ...x, ausente: false, kb: x.kb || 640 } : x)) }); pushToast({ kind: 'success', message: 'Volviste a subir «' + d.nombre + '».' }); }}>Volver a subir</AxButton> : null}
                  <AxButton size="sm" variant="secondary" onClick={() => { setViajaId(d.id); setRen(null); }}>Dónde viaja</AxButton>
                  <AxButton size="sm" variant="secondary" onClick={() => { setRen({ id: d.id, valor: d.nombre, error: false }); setViajaId(null); }}>Cambiar nombre</AxButton>
                  <AxButton size="sm" variant="danger" onClick={() => setQuitarId(d.id)}>Quitar</AxButton>
                </div>
              )}
            </div>
          );
        })}
        {(subiendo || []).map((a, i) => (
          <div key={'s' + i} className="ax-card" style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
            <span style={{ fontSize: 15, color: 'var(--ax-fg-strong)', fontWeight: 600 }}>{a.nombre}</span>
            <span className="ax-mono" style={{ fontSize: 11.5, color: 'var(--ax-fg-muted)' }}>{a.archivo} · cifrando…</span>
            <MxBarra valor={machProgreso('subida')}/>
          </div>
        ))}
      </div>

      {pend ? (
        <MxTarjeta titulo="Ponle nombre a cada archivo" nota="Elegiste varios PDF a la vez. Escribe cómo quieres ver cada uno en la lista.">
          {pend.map((a, i) => (
            <MxCampo key={i} label={'Nombre de ' + a.archivo}>
              <AxInput value={a.nombre} placeholder={sinPdf(a.archivo)} aria-label={'Nombre de ' + a.archivo}
                onChange={(e) => machSet({ nombresPendientes: pend.map((x, j) => (j === i ? { ...x, nombre: e.target.value, error: false } : x)) })}
                style={a.error ? { borderColor: 'var(--ax-danger)' } : undefined}/>
              {a.error ? <MxError>El nombre no puede quedar vacío.</MxError> : null}
            </MxCampo>
          ))}
          <div style={{ display: 'flex', gap: 8 }}>
            <AxButton size="sm" variant="primary" onClick={guardarPendientes}>Guardar los {pend.length}</AxButton>
            <AxButton size="sm" variant="tertiary" onClick={() => machSet({ nombresPendientes: null })}>Cancelar</AxButton>
          </div>
        </MxTarjeta>
      ) : null}

      <MxTarjeta titulo="Subir un documento">
        <MxCampo label="Nombre del documento (opcional)">
          <AxInput value={nombre} onChange={(e) => setNombre(e.target.value)} placeholder="Ej. Cuestionario de responsabilidad civil" disabled={!!subiendo}/>
          <div className="ax-field-helper">
            Si lo dejas vacío usamos el nombre del archivo sin «.pdf».{' '}
            {MACH.q1 === 'A' ? 'Si subes varios a la vez, cada archivo toma su propio nombre.' : 'Si subes varios a la vez, Piixi te pide un nombre por cada archivo.'}
          </div>
        </MxCampo>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          {subiendo ? <AxButton size="sm" variant="secondary" disabled>Guardando…</AxButton>
            : <MxPicker etiqueta="Subir PDF" icono="upload" variante="primary" opciones={MX_EJEMPLOS_PDF} onElegir={elegir}/>}
          <span style={{ fontSize: 12.5, color: 'var(--ax-fg-muted)' }}>Sólo PDF. Se guardan cifrados en esta computadora.</span>
        </div>
      </MxTarjeta>
    </MxPagina>
  );
}

// Dónde viaja un documento (#1225)
function MxFiltro({ valor, onChange, disabled, etiqueta }) {
  const nodos = machArbol();
  const productos = [];
  nodos.filter((n) => n.nivel === 'producto').forEach((n) => { if (!productos.some((p) => p.nombre === n.producto)) productos.push({ nombre: n.producto, ramo: n.ramo }); });
  productos.sort((a, b) => a.nombre.localeCompare(b.nombre));
  if (MACH.q3 === 'A') {
    const v = valor.producto ? 'P:' + valor.producto : valor.ramo ? 'R:' + valor.ramo : '';
    return (
      <AxSelect value={v} disabled={disabled} aria-label={'Ramo o producto de ' + etiqueta} style={{ minWidth: 220 }}
        onChange={(e) => {
          const s = e.target.value;
          if (!s) onChange({ ramo: null, producto: null });
          else if (s[0] === 'R') onChange({ ramo: s.slice(2), producto: null });
          else { const p = productos.find((x) => x.nombre === s.slice(2)); onChange({ ramo: p ? p.ramo : null, producto: s.slice(2) }); }
        }}>
        <option value="">Todos los ramos</option>
        <optgroup label="Ramo">{MACH_RAMO_ORDEN.map((r) => <option key={r} value={'R:' + r}>Ramo: {MACH_RAMO[r]}</option>)}</optgroup>
        <optgroup label="Producto">{productos.map((p) => <option key={p.nombre} value={'P:' + p.nombre}>Producto: {p.nombre}</option>)}</optgroup>
      </AxSelect>
    );
  }
  const delRamo = productos.filter((p) => p.ramo === valor.ramo);
  return (
    <span style={{ display: 'inline-flex', gap: 8, flexWrap: 'wrap' }}>
      <AxSelect value={valor.ramo || ''} disabled={disabled} aria-label={'Ramo de ' + etiqueta}
        onChange={(e) => onChange({ ramo: e.target.value || null, producto: null })}>
        <option value="">Todos los ramos</option>
        {MACH_RAMO_ORDEN.map((r) => <option key={r} value={r}>{MACH_RAMO[r]}</option>)}
      </AxSelect>
      <AxSelect value={valor.producto || ''} disabled={disabled || !valor.ramo} aria-label={'Producto de ' + etiqueta}
        onChange={(e) => onChange({ ramo: valor.ramo, producto: e.target.value || null })}>
        <option value="">Todos los productos</option>
        {delRamo.map((p) => <option key={p.nombre} value={p.nombre}>{p.nombre}</option>)}
      </AxSelect>
    </span>
  );
}
function MxViajaEditor({ doc, onCerrar }) {
  const { pushToast } = useAxStore();
  const [d, setD] = useState(() => JSON.parse(JSON.stringify(doc.viaja)));
  const [error, setError] = useState(false);
  const avisoDe = (id) => d.avisos[id] || { on: false, ramo: null, producto: null };
  const poner = (id, patch) => setD({ ...d, avisos: { ...d.avisos, [id]: { ...avisoDe(id), ...patch } } });
  const guardar = () => {
    if (MACH.errorViaja) { setError(true); return; }
    machGuardarViaja(doc.id, d);
    pushToast({ kind: 'success', message: 'Listo. «' + doc.nombre + '» viaja en: ' + machResumenViaja(d) + '.' });
    onCerrar();
  };
  const radio = { display: 'flex', gap: 8, alignItems: 'center', fontSize: 14, color: 'var(--ax-fg)' };
  return (
    <div className="ax-card" style={{ padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 14, borderColor: 'var(--ax-accent-line)' }}>
      <div>
        <div style={{ fontSize: 15, color: 'var(--ax-fg-strong)', fontWeight: 600 }}>{doc.nombre}</div>
        <div className="ax-mono" style={{ fontSize: 11.5, color: 'var(--ax-fg-muted)' }}>{doc.archivo}</div>
      </div>
      <fieldset style={{ border: 0, margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <legend className="ax-eyebrow" style={{ padding: 0, marginBottom: 8, color: 'var(--ax-fg-muted)' }}>Viaja en</legend>
        <label style={radio}><input type="radio" name={'vj' + doc.id} checked={d.modo === 'todos'} onChange={() => setD({ ...d, modo: 'todos' })} style={{ accentColor: 'var(--ax-accent)' }}/> Toda entrega de póliza</label>
        <label style={radio}><input type="radio" name={'vj' + doc.id} checked={d.modo === 'estos'} onChange={() => setD({ ...d, modo: 'estos' })} style={{ accentColor: 'var(--ax-accent)' }}/> Sólo en estos avisos</label>
      </fieldset>
      {d.modo === 'estos' ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, paddingLeft: 4 }}>
          {MACH_AVISOS.map((a) => {
            const v = avisoDe(a.id);
            return (
              <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
                <label style={{ ...radio, width: 190 }}>
                  <input type="checkbox" checked={v.on} aria-label={a.nombre} onChange={(e) => poner(a.id, { on: e.target.checked })} style={{ accentColor: 'var(--ax-accent)', width: 16, height: 16 }}/>
                  {a.nombre}
                </label>
                <MxFiltro valor={v} disabled={!v.on} etiqueta={a.nombre} onChange={(f) => poner(a.id, f)}/>
              </div>
            );
          })}
        </div>
      ) : (
        <div className="ax-field-helper">Se comporta como hoy: incluido en la entrega de póliza de cualquier ramo. En los demás avisos no viaja.</div>
      )}
      {error ? <MxError>No se pudo guardar dónde viaja este documento. Sigue como estaba. Intenta de nuevo.</MxError> : null}
      <div style={{ display: 'flex', gap: 8 }}>
        <AxButton size="sm" variant="primary" onClick={guardar}>Guardar</AxButton>
        <AxButton size="sm" variant="tertiary" onClick={onCerrar}>Cancelar</AxButton>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// #1221 · LA TARJETA DE ENTREGA — lo que declara el machote viaja incluido
// ═══════════════════════════════════════════════════════════════════════════
const MX_CARATULA_KB = 1126;
const MX_CONDICIONES_KB = 3482;
const MX_LIMITE_MB = 10;

function MxFilaAdjunto({ icono = 'check', titulo, linea, pill, tam, tono }) {
  const col = tono === 'bad' ? 'var(--ax-danger)' : tono === 'warm' ? 'var(--ax-warm)' : tono === 'tenue' ? 'var(--ax-fg-faint)' : 'var(--ax-accent)';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', borderRadius: 8, flexWrap: 'wrap',
      border: '1px solid ' + (tono === 'bad' ? 'rgba(233,76,77,0.45)' : tono === 'warm' ? 'var(--ax-warm-line)' : 'var(--ax-border)'),
      background: 'var(--ax-bg-2)', opacity: tono === 'tenue' ? 0.7 : 1,
    }}>
      <AxIcon name={icono} size={15} style={{ color: col, flexShrink: 0 }}/>
      <div style={{ flex: '1 1 240px', minWidth: 0 }}>
        <div style={{ fontSize: 14, color: 'var(--ax-fg-strong)', fontWeight: 600, textDecoration: tono === 'tenue' ? 'line-through' : 'none' }}>{titulo}</div>
        <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)', marginTop: 2 }}>{linea}</div>
      </div>
      {pill}
      {tam ? <span className="ax-mono" style={{ fontSize: 11.5, color: 'var(--ax-fg-muted)' }}>{tam}</span> : null}
    </div>
  );
}

const MX_GMAIL = 'miguel@madpanda.mx';

function EntregaTarjeta({ p, onCerrar }) {
  const { navigate } = useHashRoute();
  useMach();
  const [aprobado, setAprobado] = useState(false);
  const datos = machDatos(p);
  const r = machVarianteDe('entrega', p);
  const texto = r.v ? r.v.texto : MACHOTE_TEXTO_PIIXI.entrega;
  const c = AdmixData.contratanteById(p.contratante);
  const a = machDocsDeAviso('entrega', p);
  const irA = (ruta) => { onCerrar(); navigate(ruta); };
  const kbTotal = a.incluidos.reduce((s, d) => s + d.kb, 0) + (a.caratula ? MX_CARATULA_KB : 0);
  const nTotal = a.incluidos.length + (a.caratula ? 1 : 0);
  const nombreV = r.v ? r.v.archivo : null;
  const pillDesp = <AxPill tone="ghost">Del despacho</AxPill>;
  const pillPol = <AxPill tone="info">De la póliza</AxPill>;
  return (
    <div role="dialog" aria-label="Entrega de póliza" onClick={onCerrar} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.62)', backdropFilter: 'blur(2px)', overflow: 'auto', padding: '40px 20px' }}>
      <div onClick={(e) => e.stopPropagation()} className="ax-fade-in" style={{ width: 780, maxWidth: '100%', margin: '0 auto', background: 'var(--ax-bg-1)', border: '1px solid var(--ax-border-strong)', borderRadius: 12, padding: '22px 26px 26px', display: 'flex', flexDirection: 'column', gap: 16, boxShadow: '0 24px 80px rgba(0,0,0,0.6)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'flex-start' }}>
          <div>
            <div className="ax-eyebrow" style={{ color: 'var(--ax-fg-muted)' }}>Pólizas › {p.polizaNumero}</div>
            <h1 style={{ margin: '6px 0 0', fontSize: 24, fontWeight: 600, color: 'var(--ax-fg-strong)', letterSpacing: '-0.01em' }}>Entrega de póliza</h1>
            <div style={{ marginTop: 4, fontSize: 13, color: 'var(--ax-fg-muted)' }}>Aviso al contratante · lo apruebas tú antes de que salga</div>
          </div>
          <AxButton size="sm" variant="tertiary" icon="x" onClick={onCerrar} title="Cerrar"/>
        </div>

        <MxTarjeta titulo="Mensaje">
          <div style={{ border: '1px solid var(--ax-border-strong)', borderRadius: 10, background: 'var(--ax-bg-3)', padding: 18, display: 'flex', flexDirection: 'column', gap: 9, fontSize: 14 }}>
            <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>Para: <b style={{ color: 'var(--ax-fg)', fontWeight: 500 }}>{c ? c.email : 'contratante@ejemplo.com'}</b></div>
            <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>Asunto: <b style={{ color: 'var(--ax-fg)', fontWeight: 500 }}><MxTexto texto={MACHOTE_ASUNTO.entrega} datos={datos}/></b></div>
            <div style={{ lineHeight: 1.65, whiteSpace: 'pre-line', borderTop: '1px solid var(--ax-border)', paddingTop: 11 }}><MxTexto texto={texto} datos={datos}/></div>
          </div>
          <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>
            {nombreV ? <>Texto tuyo: <span className="ax-mono">{nombreV}</span> (de {machNodo(r.key).path.join(' › ')}).</> : 'Texto de Piixi: no hay uno tuyo para este producto.'}
          </div>
        </MxTarjeta>

        <MxTarjeta>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <h2 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: 'var(--ax-fg-strong)' }}>Adjuntos</h2>
            {a.declara ? <AxPill tone="accent" dot>El machote incluyó {nTotal}</AxPill> : null}
          </div>
          {a.declara ? (
            <p style={{ margin: 0, fontSize: 12.5, color: 'var(--ax-fg-muted)' }}>
              Lo que declara el machote viaja incluido: no hay nada que marcar. Para cambiar qué viaja, ve a{' '}
              <button onClick={() => irA('/ajustes/machotes/documentos')} style={{ appearance: 'none', border: 0, background: 'transparent', color: 'var(--ax-accent)', padding: 0, cursor: 'default', fontSize: 12.5 }}>Ajustes › Documentos</button>.
            </p>
          ) : (
            <MxNota tono="info">
              Este machote no declara adjuntos, así que el aviso saldrá sin documentos. Si quieres que viaje alguno, indícalo en Ajustes › Documentos.
              {' '}<button onClick={() => irA('/ajustes/machotes/documentos')} style={{ appearance: 'none', border: 0, background: 'transparent', color: 'var(--ax-accent)', padding: 0, cursor: 'default', fontSize: 13 }}>Ir a Documentos</button>
            </MxNota>
          )}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {a.incluidos.map((d) => <MxFilaAdjunto key={d.id} titulo={d.nombre} linea="Incluido por el machote" pill={pillDesp} tam={machTam(d.kb)}/>)}
            {a.caratula ? <MxFilaAdjunto titulo="Carátula de la póliza" linea="Incluido por el machote" pill={pillPol} tam={machTam(MX_CARATULA_KB)}/> : null}
            {a.quitados.map((q) => (
              <MxFilaAdjunto key={q.docId + q.aviso} icono="x" tono="tenue" titulo={q.nombre} linea="Lo quitaste de este aviso en Ajustes: no saldrá en este envío." pill={pillDesp}/>
            ))}
            {a.declara ? <MxFilaAdjunto icono="dots" tono="tenue" titulo="Condiciones generales" linea="El machote no lo pide: no sale en este aviso." pill={pillPol} tam={machTam(MX_CONDICIONES_KB)}/> : null}
            {a.ausentes.map((d) => (
              <div key={d.id} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <MxFilaAdjunto icono="alert" tono="bad" titulo={d.nombre} linea="Archivo ausente: ya no está en esta computadora. No se enviará hasta que lo subas otra vez." pill={pillDesp}/>
                <div><AxButton size="sm" variant="secondary" onClick={() => irA('/ajustes/machotes/documentos')}>Subir de nuevo en Ajustes</AxButton></div>
              </div>
            ))}
            {a.faltan.map((n) => (
              <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', borderRadius: 8, border: '1px solid var(--ax-warm-line)', background: 'var(--ax-warm-soft)', flexWrap: 'wrap' }}>
                <AxIcon name="alert" size={15} style={{ color: 'var(--ax-warm)', flexShrink: 0 }}/>
                <div style={{ flex: '1 1 260px' }}>
                  <div style={{ fontSize: 14, color: 'var(--ax-fg-strong)', fontWeight: 600 }}>Falta: {n}</div>
                  <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)', marginTop: 2 }}>El machote lo pide pero no hay documento. Súbelo en Ajustes › Documentos. Lo demás sí se puede enviar.</div>
                </div>
                <AxButton size="sm" variant="secondary" onClick={() => irA('/ajustes/machotes/documentos')}>Ir a Documentos</AxButton>
              </div>
            ))}
          </div>
          <div className="ax-mono" style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>
            {nTotal === 1 ? 'Se enviará 1 archivo' : 'Se enviarán ' + nTotal + ' archivos'}{nTotal ? ' · ' + machTam(kbTotal) + ' de ' + MX_LIMITE_MB + ' MB permitidos' : ''}
          </div>
        </MxTarjeta>

        {/* #615 (2026-09-22): los flujos ENVÍAN. Con Gmail conectado el correo sale desde la dirección
            del agente; sin Gmail, degrada a que el agente lo entregue y lo marque «Ya lo envié». */}
        {aprobado === 'enviado' ? (
          <MxNota tono="ok">
            Enviado desde tu Gmail ({MX_GMAIL}) a {c ? c.email : 'el contratante'}, con {nTotal === 1 ? 'el archivo' : 'los ' + nTotal + ' archivos'}. Queda anotado en la póliza.
            {' '}<button onClick={onCerrar} style={{ appearance: 'none', border: 0, background: 'transparent', color: 'var(--ax-accent)', padding: 0, cursor: 'default', fontSize: 13 }}>Cerrar</button>
          </MxNota>
        ) : aprobado === 'marcado' ? (
          <MxNota tono="ok">
            Listo: quedó anotado que tú lo entregaste.
            {' '}<button onClick={onCerrar} style={{ appearance: 'none', border: 0, background: 'transparent', color: 'var(--ax-accent)', padding: 0, cursor: 'default', fontSize: 13 }}>Cerrar</button>
          </MxNota>
        ) : aprobado === 'pendiente' ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <MxNota>
              Gmail no está conectado, así que Piixi no puede mandarlo por ti. El correo y {nTotal === 1 ? 'el archivo quedaron listos' : 'los ' + nTotal + ' archivos quedaron listos'}: entrégalo tú y márcalo aquí.
            </MxNota>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <AxButton variant="primary" onClick={() => setAprobado('marcado')}>Ya lo envié</AxButton>
              <AxButton variant="secondary" onClick={() => irA('/ajustes')}>Conectar Gmail en Ajustes</AxButton>
            </div>
          </div>
        ) : (
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
            <AxButton variant="primary" onClick={() => setAprobado(MACH.gmail === 'no' ? 'pendiente' : 'enviado')}>Aprobar y enviar</AxButton>
            <AxButton variant="tertiary" onClick={onCerrar}>No enviar</AxButton>
            <span style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>{MACH.gmail === 'no' ? 'Gmail sin conectar: lo entregarás tú.' : 'Sale desde tu Gmail: ' + MX_GMAIL}</span>
          </div>
        )}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// TWEAKS · «Machotes · simular»
// ═══════════════════════════════════════════════════════════════════════════
function MxTwkBtn({ onClick, children, tono }) {
  return (
    <button onClick={onClick} data-mx-tweak="1" style={{
      appearance: 'none', background: tono === 'p' ? 'rgba(0,0,0,0.78)' : 'rgba(255,255,255,0.7)', border: '1px solid rgba(0,0,0,0.08)',
      borderRadius: 6, padding: '6px 8px', fontSize: 11, color: tono === 'p' ? '#fff' : '#29261b', cursor: 'default', textAlign: 'left',
    }}>{children}</button>
  );
}
function MxTwkNota({ children }) { return <div style={{ fontSize: 10, color: 'rgba(41,38,27,0.55)', lineHeight: 1.45 }}>{children}</div>; }

function MachotesTweaks({ navigate }) {
  const m = useMach();
  const exp = typeof useExp === 'function' ? useExp() : { machote: 'instalado' };
  const rcId = window.__machRcId;
  const cuest = m.docs.find((d) => d.id === 'd1');
  const set = (patch) => machSet(patch);
  return (
    <>
      <TweakSection label="Machotes · simular"/>
      <MxTwkNota>
        Machotes 0.3.2 (#1219 #1221 #1223 #1225 #1226 #1228): el texto se sube como archivo, lo que declara el machote viaja incluido. Recorrido: Documentos → Dónde viaja → Textos → Por producto → Probar → ficha de la póliza › Enviar póliza.
      </MxTwkNota>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 2 }}>
        <MxTwkBtn tono="p" onClick={() => navigate('/ajustes/machotes/entrega')}>→ Ir a Ajustes › Machotes (Entrega de póliza)</MxTwkBtn>
        <MxTwkBtn tono="p" onClick={() => navigate('/ajustes/machotes/documentos')}>→ Ir a Ajustes › Documentos</MxTwkBtn>
        <MxTwkBtn tono="p" onClick={() => { if (rcId) navigate('/polizas/' + rcId); }}>→ Ir a una póliza de RC Profesional</MxTwkBtn>
        <MxTwkBtn onClick={() => { if (rcId) { set({ compuesto: null }); navigate('/ajustes/machotes/entrega/probar?poliza=' + rcId); } }}>→ Probar el machote con la póliza de RC Profesional</MxTwkBtn>
        <MxTwkBtn onClick={() => { if (rcId) navigate('/polizas/' + rcId + '?abrir=enviar'); }}>→ Abrir la tarjeta de entrega de esa póliza</MxTwkBtn>
        <MxTwkBtn onClick={() => { expSet({ machote: 'sin' }); navigate('/clientes/' + AdmixPersonas.EXP_SEED_ID + '?tab=documentos'); }}>→ Ficha de cliente SIN el machote «Pedir documentos» (su enlace aterriza en Alta de personas)</MxTwkBtn>
        <MxTwkBtn onClick={() => { machEscenarioListo(); }}>→ Dejar el recorrido ya hecho (RC Profesional con documento y texto propios)</MxTwkBtn>
        <MxTwkBtn onClick={() => { machReiniciar(); if (exp.machote === 'sin') expSet({ machote: 'instalado' }); }}>→ Volver a sembrar (documentos, textos y avisos de fábrica)</MxTwkBtn>
        <MxTwkBtn onClick={() => set({ docs: [], quitados: [], subiendo: null, nombresPendientes: null })}>→ Vaciar la lista de documentos (estado vacío)</MxTwkBtn>
      </div>

      <MxTwkNota>Estados raros — cada uno se enciende y se apaga:</MxTwkNota>
      <TweakToggle label="Dejar la subida en «Cifrando…»" value={m.detenerSubida} onChange={(v) => set({ detenerSubida: v })}/>
      <TweakToggle label="Dejar la revisión del texto en «Revisando…»" value={m.detenerRevision} onChange={(v) => set({ detenerRevision: v })}/>
      <TweakToggle label="Dejar la prueba en «Componiendo…»" value={m.detenerComposicion} onChange={(v) => { set({ detenerComposicion: v }); }}/>
      <TweakToggle label="El archivo de texto que subas trae errores" value={m.textoConErrores} onChange={(v) => set({ textoConErrores: v })}/>
      <TweakToggle label="Error al guardar dónde viaja un documento" value={m.errorViaja} onChange={(v) => set({ errorViaja: v })}/>
      <TweakToggle label="Error al leer el árbol por producto" value={m.errorArbol} onChange={(v) => set({ errorArbol: v })}/>
      <TweakToggle label="Cartera sin productos (árbol vacío)" value={m.carteraVacia} onChange={(v) => set({ carteraVacia: v })}/>
      <TweakToggle label="El Cuestionario de RC ya no está en esta computadora" value={!!(cuest && cuest.ausente)} onChange={(v) => set({ docs: m.docs.map((d) => (d.id === 'd1' ? { ...d, ausente: v } : d)) })}/>
      <TweakToggle label="Completar teléfono y firma del despacho" value={m.datosDespacho} onChange={(v) => set({ datosDespacho: v })}/>
      <TweakRadio label="Gmail del despacho" value={m.gmail === 'no' ? 'no' : 'si'}
        options={[{ value: 'si', label: 'Conectado' }, { value: 'no', label: 'Sin conectar' }]}
        onChange={(v) => set({ gmail: v })}/>
      <TweakRadio label="Machote de la entrega" value={m.entregaDeclara ? 'si' : 'no'}
        options={[{ value: 'si', label: 'Declara documentos' }, { value: 'no', label: 'No declara ninguno' }]}
        onChange={(v) => set({ entregaDeclara: v === 'si' })}/>
      <MxTwkNota>Estados que salen a clics sin Tweaks: documento recién subido, nombre vacío al renombrar, «quitaste uno» (quita el documento de la entrega en Ajustes y vuelve a la tarjeta), nodo abierto, número de póliza que no existe.</MxTwkNota>

    </>
  );
}

Object.assign(window, { MachotesDocumentos, EntregaTarjeta, MachotesTweaks });
