// src/screen-primer-arranque.jsx — PRIMER ARRANQUE (#744 «Crea tu cuenta» + #807 aviso de privacidad).
//
// El dueño de producto no aprueba textos sueltos: cuenta una situación y la recorre a clics.
//   Tweaks › «Cuenta · simular» › «Simular primer arranque»
//   → /crear-cuenta (correo → código → cédula → verificando → resultado)
//   → /aviso-privacidad («Acepto» / «Ahora no») → Inicio → Ajustes › Privacidad.
//
// Estado compartido: objetos de módulo + CustomEvent 'cta-sim' (mismo patrón que 'eqs-via' y 'exp-sim').
// Sin localStorage. Las pantallas pintan a 16–18 px y botones de 48 px, como pide el lienzo.

// ─── Estado de módulo ───────────────────────────────────────────────────────────────────────
const CTA_HOY = { largo: '12 de octubre de 2026', corto: '12 oct 2026' };

// Lo que el dueño de producto elige en Tweaks.
const CTA_SIM = {
  cnsf: 'confirmada',     // confirmada | no_respondio | vencida
  codigo: 'correcto',     // correcto | incorrecto
  cedula: 'salta',        // salta | obligatoria        (pregunta 1)
  vencida: 'completa',    // completa | limitada        (pregunta 2)
  datos: 'captura',       // captura | cnsf             (pregunta 6)
  d2: 'A',                // A | B                      (privacidad, decisión D2)
  corrida: 0,             // sube con «Simular primer arranque»: remonta el flujo
};

// La cuenta Piixi de este equipo. Por defecto, el agente de la maqueta ya la tiene.
const CTA_CUENTA = {
  creada: true,
  correo: 'miguel@madpanda.mx',
  nombre: 'Miguel Ángel Rivera',
  despacho: 'Rivera Asesores',
  cedula: 'A-0148927',
  licencia: 'valida',            // valida | vencida | sin_cedula
  confirmada: true,              // la CNSF la confirmó
  venceEl: '14 de marzo de 2028',
  avisoLicencia: null,           // 'completa' | 'limitada': un aviso que sale una vez al llegar a Inicio
};

// Decisión sobre el aviso de privacidad.
const CTA_PRIV = {
  avisoVersion: 1,               // versión vigente del aviso
  decision: 'acepto',            // null | acepto | ahora_no
  version: 1,                    // versión sobre la que se decidió
  fecha: '4 oct 2026',
};

// Arranque del flujo de cuenta (para «Capturar mi cédula ahora» desde otras pantallas).
const CTA_FLOW = { inicio: null };

function ctaEmit() { window.dispatchEvent(new CustomEvent('cta-sim')); }
function ctaSim(patch) { Object.assign(CTA_SIM, patch); ctaEmit(); }
function ctaCuentaSet(patch) { Object.assign(CTA_CUENTA, patch); ctaEmit(); }
function ctaPrivSet(patch) { Object.assign(CTA_PRIV, patch); ctaEmit(); }
function useCta() {
  const [, force] = useState(0);
  useEffect(() => {
    const h = () => force((n) => n + 1);
    window.addEventListener('cta-sim', h);
    return () => window.removeEventListener('cta-sim', h);
  }, []);
  return CTA_SIM;
}

// ¿Hay que preguntar (o volver a preguntar) por el aviso?
function ctaAvisoPendiente() {
  return CTA_CUENTA.creada && (!CTA_PRIV.decision || CTA_PRIV.version < CTA_PRIV.avisoVersion);
}
function ctaSiguiente() { return ctaAvisoPendiente() ? '/aviso-privacidad' : '/inicio'; }
function ctaAbrirCedula() {
  CTA_FLOW.inicio = 'cedula';
  ctaSim({ corrida: CTA_SIM.corrida + 1 });
  window.location.hash = '/crear-cuenta';
}
function ctaHoraTxt() {
  try { return new Date().toLocaleTimeString('es-MX', { hour: 'numeric', minute: '2-digit', hour12: true }); }
  catch (e) { return ''; }
}

// ─── Piezas de interfaz (grandes, como pide el lienzo) ─────────────────────────────────────
const PX_H1 = { margin: '4px 0 0', fontFamily: 'var(--font-logo)', fontWeight: 800, fontSize: 30, lineHeight: 1.1, color: 'var(--ax-fg-strong)' };
const PX_SUB = { margin: '8px 0 0', fontSize: 16, lineHeight: 1.5, color: 'var(--ax-fg-muted)' };
const PX_P = { margin: 0, fontSize: 16, lineHeight: 1.5, color: 'var(--ax-fg)' };
const PX_AYUDA = { margin: 0, fontSize: 14, lineHeight: 1.5, color: 'var(--ax-fg-muted)' };

// AxIcon pasa `style` al <svg> como atributos: para el layout (no encoger, margen) va un envoltorio.
function PxIcono({ name, size, color, style }) {
  return <span style={{ display: 'flex', flex: '0 0 auto', color, ...style }}><AxIcon name={name} size={size}/></span>;
}
function PxBtn({ variant = 'secondary', style, ...rest }) {
  // `.ax button { color: inherit }` le gana al color del botón primario: se fija aquí para que se lea.
  return <AxButton variant={variant} style={{ height: 48, fontSize: 16, padding: '0 22px', ...(variant === 'primary' ? { color: '#0A0A0A' } : null), ...style }} {...rest}/>;
}
// Botón de texto subrayado («La capturo después», «Cambiar correo»…).
function PxTexto({ children, style, ...rest }) {
  return (
    <AxButton variant="tertiary" style={{ height: 48, fontSize: 16, padding: '0 14px', color: 'var(--ax-fg)', textDecoration: 'underline', textUnderlineOffset: 3, ...style }} {...rest}>
      {children}
    </AxButton>
  );
}
function PxPill({ tone, children }) {
  return (
    <AxPill tone={tone} style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, letterSpacing: 0, textTransform: 'none', padding: '4px 10px' }}>
      {children}
    </AxPill>
  );
}
function PxCampo({ id, label, opcional, error, ayuda, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <label htmlFor={id} style={{ fontSize: 15, fontWeight: 600, color: 'var(--ax-fg)' }}>
        {label}{opcional ? <span style={{ fontWeight: 400, color: 'var(--ax-fg-muted)' }}> {opcional}</span> : null}
      </label>
      {children}
      {error ? <PxError>{error}</PxError> : ayuda ? <p style={PX_AYUDA}>{ayuda}</p> : null}
    </div>
  );
}
function PxInput({ error, mono, style, ...rest }) {
  return (
    <input className="ax-input" {...rest}
      style={{ height: 56, fontSize: 18, padding: '0 16px', borderRadius: 8, ...(mono ? { fontFamily: 'var(--font-mono)' } : null), ...(error ? { borderColor: 'var(--ax-danger)' } : null), ...style }}/>
  );
}
function PxError({ children }) {
  return (
    <p role="alert" style={{ margin: 0, fontSize: 15, color: '#FF7A7B', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
      <PxIcono name="alert" size={18} style={{ marginTop: 2 }}/>
      <span>{children}</span>
    </p>
  );
}
const PX_TONOS = {
  accent: { c: 'var(--ax-accent)', bg: 'var(--ax-accent-soft)', line: 'var(--ax-accent-line)' },
  warm:   { c: 'var(--ax-warm)',   bg: 'var(--ax-warm-soft)',   line: 'var(--ax-warm-line)' },
  info:   { c: 'var(--ax-info)',   bg: 'var(--ax-info-soft)',   line: 'var(--ax-info-line)' },
  danger: { c: '#FF7A7B',          bg: 'var(--ax-danger-soft)', line: 'rgba(233,76,77,0.40)' },
};
// Caja de aviso (icono + texto).
function PxAviso({ tone = 'info', icon = 'info', children }) {
  const t = PX_TONOS[tone];
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '16px 18px', borderRadius: 10, border: '1px solid ' + t.line, background: t.bg }}>
      <PxIcono name={icon} size={22} color={t.c} style={{ marginTop: 1 }}/>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>{children}</div>
    </div>
  );
}
// Tarjeta grande de licencia (círculo con icono + título + cuerpo).
function PxLic({ tone, icon, spinner, children, role = 'status' }) {
  const t = PX_TONOS[tone];
  return (
    <div role={role} style={{ display: 'flex', gap: 18, alignItems: 'flex-start', padding: 22, borderRadius: 12, border: '1px solid ' + t.line, background: t.bg }}>
      <div style={{ width: 48, height: 48, borderRadius: '50%', flex: '0 0 48px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: t.bg, color: t.c, border: '1px solid ' + t.line }}>
        {spinner ? <span className="ax-spinner" style={{ width: 26, height: 26, borderWidth: 3 }}/> : <AxIcon name={icon} size={26}/>}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0, flex: 1 }}>{children}</div>
    </div>
  );
}
function PxH2({ children }) {
  return <h2 style={{ margin: '0 0 2px', fontFamily: 'var(--font-logo)', fontWeight: 700, fontSize: 22, color: 'var(--ax-fg-strong)' }}>{children}</h2>;
}
function PxTarjeta({ children, gap = 16 }) {
  return <div className="ax-card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap, borderRadius: 10 }}>{children}</div>;
}
function PxFila({ children, style }) {
  return <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', ...style }}>{children}</div>;
}
function PxSep() { return <hr style={{ height: 1, border: 0, margin: 0, background: 'var(--ax-border)' }}/>; }
function PxEyebrow({ children }) {
  return <div className="ax-mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ax-fg-muted)' }}>{children}</div>;
}
// Aviso de «esto abre en el navegador» para los enlaces que en el producto salen de la app.
function PxAbreWeb({ abierto, titulo, onClose }) {
  return (
    <AxModal open={abierto} onClose={onClose} title={titulo}
      footer={<PxBtn variant="primary" onClick={onClose}>Entendido</PxBtn>}>
      <div style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ax-fg)' }}>
        En Piixi, este enlace se abre en tu navegador. En la maqueta no sale de aquí.
      </div>
    </AxModal>
  );
}

function PxCabecera() {
  return (
    <div style={{ height: 56, display: 'flex', alignItems: 'center', padding: '0 28px', borderBottom: '1px solid var(--ax-border)', background: 'var(--ax-bg-1)', flexShrink: 0 }}>
      <AxLogo size={22}/>
    </div>
  );
}

// ─── 1 · CREA TU CUENTA ─────────────────────────────────────────────────────────────────────
function PxPasos({ estado }) {
  const nombres = ['Tu correo', 'El código', 'Tu cédula'];
  return (
    <ol aria-label="Pasos" style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      {nombres.map((n, i) => {
        const e = estado[i];
        return (
          <li key={n} data-estado={e} style={{
            flex: '1 1 160px', display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderRadius: 8, fontSize: 15,
            border: '1px solid ' + (e === 'now' ? 'var(--ax-accent-line)' : 'var(--ax-border-strong)'),
            background: 'var(--ax-bg-2)', color: e === 'now' ? 'var(--ax-fg-strong)' : e === 'done' ? 'var(--ax-fg)' : 'var(--ax-fg-muted)',
            fontWeight: e === 'now' ? 600 : 400,
          }}>
            <b style={{
              width: 28, height: 28, borderRadius: '50%', flex: '0 0 28px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14,
              background: e === 'now' ? 'var(--ax-accent)' : e === 'done' ? 'var(--ax-accent-soft)' : 'var(--ax-bg-4)',
              color: e === 'now' ? '#0A0A0A' : e === 'done' ? 'var(--ax-accent)' : 'var(--ax-fg-muted)',
            }}>{e === 'done' ? '✓' : i + 1}</b>
            {n}
          </li>
        );
      })}
    </ol>
  );
}

const CTA_CORREO_OK = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

function CrearCuentaScreen() {
  useCta();
  return <CrearCuentaFlujo key={CTA_SIM.corrida}/>;
}

function CrearCuentaFlujo() {
  const { navigate } = useHashRoute();
  const { pushToast } = useAxStore();
  const sim = useCta();

  const arranque = useRef(CTA_FLOW.inicio);
  CTA_FLOW.inicio = null;
  const desdeCuenta = arranque.current === 'cedula';

  const [paso, setPaso] = useState(desdeCuenta ? 'cedula' : 'correo');   // correo | codigo | cedula | verificando | resultado
  const [correo, setCorreo] = useState(desdeCuenta ? CTA_CUENTA.correo : '');
  const [errCorreo, setErrCorreo] = useState('');
  const [mandando, setMandando] = useState(false);
  const [cod, setCod] = useState(['', '', '', '', '', '']);
  const [errCod, setErrCod] = useState('');           // '' | 'mal' | 'vencio'
  const [confirmando, setConfirmando] = useState(false);
  const [enviadoEn, setEnviadoEn] = useState(Date.now());
  const [ahora, setAhora] = useState(Date.now());
  const [reenviado, setReenviado] = useState(false);
  const [nombre, setNombre] = useState(desdeCuenta ? (CTA_CUENTA.nombre || '') : '');
  const [despacho, setDespacho] = useState(desdeCuenta ? (CTA_CUENTA.despacho || '') : '');
  const [cedula, setCedula] = useState('');
  const [errCed, setErrCed] = useState({});
  const [res, setRes] = useState(null);               // confirmada | no_respondio | vencida | sin_cedula
  const [devuelto, setDevuelto] = useState(false);    // la CNSF devolvió nombre y despacho
  const [corrigiendo, setCorrigiendo] = useState(false);
  const [prog, setProg] = useState(0);
  const [corrida, setCorrida] = useState(0);          // «Volver a revisar»
  const [hora, setHora] = useState('');
  const [modal, setModal] = useState(null);
  const otpRefs = useRef([]);

  const vivo = useRef({});
  vivo.current = { nombre, despacho, cedula, correo, datos: sim.datos };

  // Cuenta regresiva del reenvío (60 s) y vida del código (10 min).
  useEffect(() => {
    if (paso !== 'codigo') return undefined;
    const iv = setInterval(() => setAhora(Date.now()), 500);
    return () => clearInterval(iv);
  }, [paso]);
  const seg = Math.max(0, 60 - Math.floor((ahora - enviadoEn) / 1000));
  const codigoVencido = ahora - enviadoEn > 10 * 60 * 1000;

  useEffect(() => {
    if (paso === 'codigo' && otpRefs.current[0]) otpRefs.current[0].focus();
  }, [paso]);

  // «Verificando»: la barra avanza y, al llegar, la CNSF contesta lo que se eligió en Tweaks.
  useEffect(() => {
    if (paso !== 'verificando') return undefined;
    const t0 = Date.now(); const DUR = 3200;
    setProg(0);
    const iv = setInterval(() => {
      const p = Math.min(100, ((Date.now() - t0) / DUR) * 100);
      setProg(p);
      if (p >= 100) { clearInterval(iv); terminarVerificacion(); }
    }, 120);
    return () => clearInterval(iv);
  }, [paso, corrida]);

  function terminarVerificacion() {
    const v = vivo.current;
    const r = CTA_SIM.cnsf === 'no_respondio' ? 'no_respondio' : CTA_SIM.cnsf === 'vencida' ? 'vencida' : 'confirmada';
    const regresa = r !== 'no_respondio';               // si la CNSF no contesta, tampoco devuelve datos
    let nom = v.nombre, desp = v.despacho;
    if (v.datos === 'cnsf' && regresa) { nom = 'Laura Ramírez Ortega'; desp = 'Ramírez Seguros'; setNombre(nom); setDespacho(desp); }
    setDevuelto(v.datos === 'cnsf' && regresa);
    const h = ctaHoraTxt(); setHora(h);
    ctaCuentaSet({
      correo: v.correo, nombre: nom, despacho: desp, cedula: v.cedula,
      licencia: r === 'vencida' ? 'vencida' : 'valida',
      confirmada: r === 'confirmada',
      venceEl: r === 'vencida' ? '2 de agosto de 2026' : '14 de marzo de 2028',
    });
    setRes(r); setPaso('resultado');
  }

  // ── Paso 1 · correo
  function mandarCodigo(e) {
    if (e) e.preventDefault();
    if (!CTA_CORREO_OK.test(correo.trim())) { setErrCorreo('Revisa tu correo: parece que le falta algo, como el @ o el punto.'); return; }
    setErrCorreo(''); setMandando(true);
    setTimeout(() => {
      setMandando(false); setCod(['', '', '', '', '', '']); setErrCod(''); setReenviado(false);
      setEnviadoEn(Date.now()); setAhora(Date.now()); setPaso('codigo');
    }, 600);
  }

  // ── Paso 2 · código
  const completo = cod.every((d) => d !== '');
  function setDigito(i, v) {
    const d = v.replace(/\D/g, '').slice(-1);
    setErrCod('');
    setCod((c) => c.map((x, k) => (k === i ? d : x)));
    if (d && i < 5 && otpRefs.current[i + 1]) otpRefs.current[i + 1].focus();
  }
  function teclaOtp(i, e) {
    if (e.key === 'Backspace' && !cod[i] && i > 0) {
      setCod((c) => c.map((x, k) => (k === i - 1 ? '' : x)));
      if (otpRefs.current[i - 1]) otpRefs.current[i - 1].focus();
    }
  }
  function pegarOtp(e) {
    const t = (e.clipboardData.getData('text') || '').replace(/\D/g, '').slice(0, 6);
    if (!t) return;
    e.preventDefault();
    setErrCod('');
    setCod(Array.from({ length: 6 }, (_, k) => t[k] || ''));
    const f = otpRefs.current[Math.min(t.length, 5)]; if (f) f.focus();
  }
  function confirmarCodigo(e) {
    if (e) e.preventDefault();
    if (!completo || confirmando) return;
    setConfirmando(true);
    setTimeout(() => {
      setConfirmando(false);
      if (codigoVencido) { setErrCod('vencio'); return; }
      if (CTA_SIM.codigo === 'incorrecto') { setErrCod('mal'); return; }
      setPaso('cedula');
    }, 600);
  }
  function otroCodigo() {
    setCod(['', '', '', '', '', '']); setErrCod(''); setReenviado(true);
    setEnviadoEn(Date.now()); setAhora(Date.now());
    if (otpRefs.current[0]) otpRefs.current[0].focus();
  }

  // ── Paso 3 · cédula
  function revisarCedula(e) {
    if (e) e.preventDefault();
    const er = {};
    if (!cedula.trim()) er.cedula = 'Escribe tu número de cédula.';
    if (sim.datos === 'captura' && !nombre.trim()) er.nombre = 'Escribe tu nombre completo.';
    setErrCed(er);
    if (Object.keys(er).length) return;
    setPaso('verificando'); setCorrida((n) => n + 1);
  }
  function capturoDespues() {
    setErrCed({});
    ctaCuentaSet({ correo, nombre, despacho, cedula: '', licencia: 'sin_cedula', confirmada: false, venceEl: '' });
    setRes('sin_cedula'); setDevuelto(false); setPaso('resultado');
  }

  // ── Salida: guarda lo capturado, deja la cuenta creada y sigue al aviso (o a Inicio).
  function terminar() {
    const v = vivo.current;
    ctaCuentaSet({
      creada: true, correo: v.correo, nombre: v.nombre.trim() || v.correo, despacho: v.despacho.trim(),
      avisoLicencia: CTA_CUENTA.licencia === 'vencida' ? CTA_SIM.vencida : null,
    });
    navigate(ctaSiguiente());
  }

  const obligatoria = sim.cedula === 'obligatoria';

  // ── Pasos (estado de la fila de arriba)
  let pasos = ['now', 'pending', 'pending'];
  if (paso === 'codigo') pasos = ['done', 'now', 'pending'];
  if (paso === 'cedula' || paso === 'verificando') pasos = ['done', 'done', 'now'];
  if (paso === 'resultado') pasos = res === 'vencida' ? ['done', 'done', 'now'] : res === 'sin_cedula' ? ['done', 'done', 'pending'] : ['done', 'done', 'done'];
  if (desdeCuenta && paso === 'cedula') pasos = ['done', 'done', 'now'];

  const contenido = (() => {
    // ——— 1 · correo
    if (paso === 'correo') return (
      <>
        <div>
          <PxEyebrow>Tu cuenta Piixi</PxEyebrow>
          <h1 style={PX_H1}>Crea tu cuenta</h1>
          <p style={PX_SUB}>Con tu cuenta, Piixi sabe quién eres y que tienes cédula para vender seguros. Son tres pasos y no necesitas contraseña.</p>
        </div>
        <form onSubmit={mandarCodigo} noValidate>
          <PxTarjeta>
            <PxCampo id="cta-correo" label="Tu correo electrónico" error={errCorreo}
              ayuda="Te mandaremos un código de 6 dígitos a este correo para confirmar que es tuyo.">
              <PxInput id="cta-correo" type="email" autoFocus autoComplete="off" placeholder="nombre@tucorreo.com"
                value={correo} error={!!errCorreo} onChange={(e) => { setCorreo(e.target.value); setErrCorreo(''); }}/>
            </PxCampo>
            <PxFila><PxBtn variant="primary" type="submit" loading={mandando}>Mandarme el código</PxBtn></PxFila>
          </PxTarjeta>
        </form>
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--ax-fg-muted)', borderTop: '1px solid var(--ax-border)', paddingTop: 16 }}>
          <PxIcono name="shield" size={18} color="var(--ax-accent)" style={{ marginTop: 2 }}/>
          <span>Tu cuenta guarda sólo tu nombre, tu correo y tu número de cédula. Las pólizas y los datos de tus clientes se quedan en esta computadora.</span>
        </div>
      </>
    );

    // ——— 2 · código (y código incorrecto)
    if (paso === 'codigo') {
      const mal = !!errCod;
      return (
        <>
          <div>
            <PxEyebrow>Paso 2 de 3</PxEyebrow>
            <h1 style={PX_H1}>Escribe el código que te mandamos</h1>
            <p style={PX_SUB}>
              Lo mandamos a <strong style={{ color: 'var(--ax-fg-strong)' }}>{correo.trim()}</strong>.
              {mal ? '' : ' Si no lo ves en unos minutos, revisa la carpeta de correo no deseado.'}
            </p>
          </div>
          <form onSubmit={confirmarCodigo}>
            <PxTarjeta>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <label htmlFor="cta-d1" style={{ fontSize: 15, fontWeight: 600, color: 'var(--ax-fg)' }}>Código de 6 dígitos</label>
                <div style={{ display: 'flex', gap: 10 }} onPaste={pegarOtp}>
                  {cod.map((d, i) => (
                    <input key={i} id={i === 0 ? 'cta-d1' : undefined} ref={(el) => { otpRefs.current[i] = el; }}
                      className="ax-input" inputMode="numeric" autoComplete="off" aria-label={'Dígito ' + (i + 1)}
                      value={d} onChange={(e) => setDigito(i, e.target.value)} onKeyDown={(e) => teclaOtp(i, e)}
                      style={{
                        width: 60, height: 72, padding: 0, textAlign: 'center', borderRadius: 10,
                        fontFamily: 'var(--font-mono)', fontSize: 30, fontWeight: 700,
                        ...(mal ? { borderColor: 'var(--ax-danger)', color: '#FF9A9B' } : null),
                      }}/>
                  ))}
                </div>
                {mal
                  ? <PxError>{errCod === 'vencio'
                      ? 'Ese código ya venció. Pide uno nuevo.'
                      : 'Ese código no es correcto. Revisa los números en tu correo y vuelve a escribirlos, o pide uno nuevo.'}</PxError>
                  : <p style={PX_AYUDA}>{reenviado ? 'Te mandamos otro código. ' : ''}El código sirve por 10 minutos.</p>}
              </div>
              {mal ? (
                <>
                  <PxFila>
                    <PxBtn variant="primary" onClick={() => { setCod(['', '', '', '', '', '']); setErrCod(''); if (otpRefs.current[0]) otpRefs.current[0].focus(); }}>Volver a intentar</PxBtn>
                    <PxBtn onClick={otroCodigo}>Mandarme otro código</PxBtn>
                  </PxFila>
                  <PxSep/>
                  <p style={{ margin: 0, fontSize: 14, color: 'var(--ax-fg-muted)' }}>
                    Tu correo se queda como lo escribiste. Si lo escribiste mal,{' '}
                    <button type="button" onClick={() => setPaso('correo')} style={{ appearance: 'none', background: 'none', border: 0, padding: 0, color: 'var(--ax-accent)', textDecoration: 'underline', fontSize: 14 }}>cámbialo aquí</button>.
                  </p>
                </>
              ) : (
                <>
                  <PxFila>
                    <PxBtn variant="primary" type="submit" disabled={!completo} loading={confirmando}>Confirmar código</PxBtn>
                    <PxTexto onClick={() => setPaso('correo')}>Cambiar correo</PxTexto>
                  </PxFila>
                  <PxSep/>
                  <PxFila style={{ justifyContent: 'space-between' }}>
                    <span style={{ fontSize: 14, color: 'var(--ax-fg-muted)' }}>¿No te llegó?</span>
                    <PxBtn disabled={seg > 0} onClick={otroCodigo} style={{ height: 44, fontSize: 15, padding: '0 16px' }}>
                      {seg > 0 ? 'Mandar otro código en ' + Math.floor(seg / 60) + ':' + String(seg % 60).padStart(2, '0') : 'Mandar otro código'}
                    </PxBtn>
                  </PxFila>
                </>
              )}
            </PxTarjeta>
          </form>
        </>
      );
    }

    // ——— 3 · cédula
    if (paso === 'cedula') {
      const capt = sim.datos === 'captura';
      return (
        <>
          <div>
            <PxEyebrow>Paso 3 de 3</PxEyebrow>
            <h1 style={PX_H1}>¿Cuál es tu número de cédula?</h1>
            <p style={PX_SUB}>Es la cédula de agente que te dio la CNSF. Piixi la revisa en la página de la CNSF para confirmar que está vigente.</p>
          </div>
          <form onSubmit={revisarCedula}>
            <PxTarjeta>
              {capt ? (
                <>
                  <PxCampo id="cta-nombre" label="Tu nombre completo" error={errCed.nombre}>
                    <PxInput id="cta-nombre" autoComplete="off" placeholder="Laura Ramírez Ortega" value={nombre} error={!!errCed.nombre}
                      onChange={(e) => { setNombre(e.target.value); setErrCed({ ...errCed, nombre: '' }); }}/>
                  </PxCampo>
                  <PxCampo id="cta-despacho" label="Nombre de tu despacho" opcional="(si tienes)">
                    <PxInput id="cta-despacho" autoComplete="off" placeholder="Ramírez Seguros" value={despacho} onChange={(e) => setDespacho(e.target.value)}/>
                  </PxCampo>
                </>
              ) : null}
              <PxCampo id="cta-cedula" label="Número de cédula" error={errCed.cedula}
                ayuda="Lo encuentras en tu cédula impresa o en el PDF que te mandó la CNSF.">
                <PxInput id="cta-cedula" mono autoFocus autoComplete="off" placeholder="A1-485120" value={cedula} error={!!errCed.cedula}
                  onChange={(e) => { setCedula(e.target.value); setErrCed({ ...errCed, cedula: '' }); }}/>
              </PxCampo>
              <PxFila>
                <PxBtn variant="primary" type="submit">Revisar mi cédula</PxBtn>
                <PxTexto onClick={capturoDespues}>La capturo después</PxTexto>
              </PxFila>
              {obligatoria ? <p style={PX_AYUDA}>Para terminar tu cuenta se necesita tu número de cédula.</p> : null}
            </PxTarjeta>
          </form>
        </>
      );
    }

    // ——— Verificando
    if (paso === 'verificando') {
      const msg = prog < 35 ? 'Abriendo la página de la CNSF…' : prog < 70 ? 'Buscando tu número de cédula…' : 'Leyendo la vigencia…';
      return (
        <>
          <div>
            <PxEyebrow>Paso 3 de 3</PxEyebrow>
            <h1 style={PX_H1}>Revisando tu cédula…</h1>
          </div>
          <PxLic tone="warm" spinner>
            <PxH2>Estamos preguntando a la CNSF</PxH2>
            <p style={PX_P}>Cédula <span className="ax-mono">{cedula.trim()}</span>{sim.datos === 'captura' && nombre.trim() ? ' · ' + nombre.trim() : ''}</p>
            <div aria-label="Avance" style={{ height: 8, borderRadius: 4, background: 'var(--ax-bg-4)', overflow: 'hidden', marginTop: 4 }}>
              <div data-progreso={Math.round(prog)} style={{ height: '100%', width: prog + '%', background: 'var(--ax-warm)', transition: 'width 120ms linear' }}/>
            </div>
            <p style={{ ...PX_AYUDA, marginTop: 4 }}>{msg} Puede tardar hasta un minuto. No cierres esta ventana.</p>
          </PxLic>
          <PxFila><PxBtn disabled>Continuar</PxBtn></PxFila>
        </>
      );
    }

    // ——— Resultado
    const mom = 'hoy, 12 de octubre' + (hora ? ', ' + hora : '');
    const datosCnsf = sim.datos === 'cnsf' ? (
      <PxTarjeta gap={14}>
        <p style={{ ...PX_P, fontWeight: 600 }}>{devuelto ? 'Esto devolvió la CNSF' : 'La CNSF no devolvió tus datos. Escríbelos para terminar.'}</p>
        {(devuelto && !corrigiendo) ? (
          <PxFila style={{ justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
              <div><PxEyebrow>Nombre</PxEyebrow><p style={{ ...PX_P, marginTop: 4 }}>{nombre}</p></div>
              <div><PxEyebrow>Despacho</PxEyebrow><p style={{ ...PX_P, marginTop: 4 }}>{despacho || '—'}</p></div>
            </div>
            <PxBtn onClick={() => setCorrigiendo(true)} style={{ height: 44, fontSize: 15 }}>Corregir</PxBtn>
          </PxFila>
        ) : (
          <>
            <PxCampo id="cta-nombre" label="Tu nombre completo">
              <PxInput id="cta-nombre" autoComplete="off" placeholder="Laura Ramírez Ortega" value={nombre} onChange={(e) => setNombre(e.target.value)}/>
            </PxCampo>
            <PxCampo id="cta-despacho" label="Nombre de tu despacho" opcional="(si tienes)">
              <PxInput id="cta-despacho" autoComplete="off" placeholder="Ramírez Seguros" value={despacho} onChange={(e) => setDespacho(e.target.value)}/>
            </PxCampo>
          </>
        )}
      </PxTarjeta>
    ) : null;

    if (res === 'confirmada' || res === 'no_respondio') return (
      <>
        <div><PxEyebrow>Listo</PxEyebrow><h1 style={PX_H1}>Tu cuenta está creada</h1></div>
        <PxLic tone="accent" icon="check">
          <PxH2>{res === 'confirmada' ? 'Tu cédula está vigente' : 'Tu cédula es válida'}</PxH2>
          <p style={PX_P}>Cédula <span className="ax-mono">{cedula.trim()}</span> · vigente hasta el <strong>14 de marzo de 2028</strong>.</p>
          <PxFila style={{ gap: 10 }}>
            <PxPill tone="accent">Válida</PxPill>
            {res === 'confirmada'
              ? <span style={{ fontSize: 13, color: 'var(--ax-fg-muted)' }}>Confirmada con la CNSF {mom}</span>
              : <PxPill tone="ghost">Sin confirmar con la CNSF</PxPill>}
          </PxFila>
        </PxLic>
        {res === 'confirmada'
          ? <p style={{ ...PX_P, color: 'var(--ax-fg-muted)' }}>Piixi volverá a revisar tu cédula cada mes y te avisará 60, 30 y 7 días antes de que venza.</p>
          : (
            <PxAviso tone="info" icon="info">
              <p style={PX_P}><strong>La página de la CNSF no respondió en este momento.</strong> No es un problema con tu cédula y no tienes que hacer nada.</p>
              <p style={PX_AYUDA}>Piixi lo volverá a intentar sola la próxima vez que abras el programa.</p>
            </PxAviso>
          )}
        {datosCnsf}
        <PxFila><PxBtn variant="primary" onClick={terminar}>Continuar con la bienvenida</PxBtn></PxFila>
      </>
    );

    if (res === 'vencida') {
      const limitada = sim.vencida === 'limitada';
      return (
        <>
          <div><PxEyebrow>Paso 3 de 3</PxEyebrow><h1 style={PX_H1}>Tu cédula no está vigente</h1></div>
          <PxLic tone="danger" icon="alert" role="alert">
            <PxH2>La cédula {cedula.trim()} venció el 2 de agosto de 2026</PxH2>
            <p style={PX_P}>Así aparece en la página de la CNSF. Puede ser que la renovación todavía no aparezca, o que el número tenga un error.</p>
            <PxFila style={{ gap: 10 }}>
              <PxPill tone="danger">Vencida</PxPill>
              <span style={{ fontSize: 13, color: 'var(--ax-fg-muted)' }}>Revisada con la CNSF {hora ? 'hoy, ' + hora : 'hoy'}</span>
            </PxFila>
          </PxLic>
          <PxTarjeta gap={12}>
            <p style={PX_P}><strong>¿Qué puedes hacer?</strong></p>
            <p style={{ ...PX_P, color: 'var(--ax-fg-muted)' }}>
              {limitada
                ? 'Si ya la renovaste, espera unos días a que la CNSF la publique y vuelve a revisarla. Tu cuenta ya existe y puedes seguir usando Piixi, con una limitación mientras tanto.'
                : 'Si ya la renovaste, espera unos días a que la CNSF la publique y vuelve a revisarla. Tu cuenta ya existe y puedes seguir usando Piixi mientras tanto.'}
            </p>
            {limitada ? (
              <PxAviso tone="warm" icon="alert">
                <p style={PX_P}><strong>Qué se limita:</strong> mientras tu cédula no esté vigente, Piixi no redacta avisos nuevos de renovación ni de cobranza.</p>
                <p style={PX_AYUDA}>Ver tu cartera, importar y revisar pólizas sigue igual.</p>
              </PxAviso>
            ) : null}
            <PxFila>
              <PxBtn onClick={() => setPaso('cedula')}>Corregir el número</PxBtn>
              <PxBtn onClick={() => { setPaso('verificando'); setCorrida((n) => n + 1); }}>Volver a revisar</PxBtn>
              <PxTexto onClick={() => setModal('renovar')}>Cómo renovar tu cédula</PxTexto>
            </PxFila>
          </PxTarjeta>
          {datosCnsf}
          <PxFila>
            {obligatoria
              ? <p style={PX_AYUDA}>Para terminar tu cuenta se necesita una cédula vigente.</p>
              : <PxTexto onClick={terminar}>Seguir sin cédula por ahora</PxTexto>}
          </PxFila>
        </>
      );
    }

    // sin cédula («La capturo después»)
    return (
      <>
        <div>
          <PxEyebrow>{obligatoria ? 'Falta un paso' : 'Casi listo'}</PxEyebrow>
          <h1 style={PX_H1}>{obligatoria ? 'Tu cuenta aún no está lista' : 'Tu cuenta está creada'}</h1>
        </div>
        <PxLic tone="warm" icon="user">
          <PxH2>Falta tu número de cédula</PxH2>
          <p style={PX_P}>
            {obligatoria
              ? 'Para terminar tu cuenta necesitamos tu número de cédula. Tenlo a la mano y captúralo para seguir.'
              : <>Puedes usar Piixi desde ya. Cuando tengas tu cédula a la mano, captúrala en <strong>Ajustes › Tu cuenta</strong>.</>}
          </p>
          <PxFila><PxPill tone="warm">Sin cédula</PxPill></PxFila>
        </PxLic>
        {obligatoria ? null : (
          <p style={{ ...PX_P, color: 'var(--ax-fg-muted)' }}>Mientras no la captures, el primer paso de la bienvenida se queda pendiente y Piixi no puede avisarte cuando tu cédula esté por vencer.</p>
        )}
        {datosCnsf}
        <PxFila>
          <PxBtn variant="primary" onClick={() => { setPaso('cedula'); }}>Capturar mi cédula ahora</PxBtn>
          {obligatoria ? null : <PxBtn onClick={terminar}>Ir a Inicio</PxBtn>}
        </PxFila>
      </>
    );
  })();

  return (
    <div className="ax" style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', background: 'var(--ax-bg-1)' }}>
      <PxCabecera/>
      <div style={{ flex: 1, padding: '28px 36px 48px' }}>
        <div className="ax-fade-in" key={paso + (res || '') + (errCod ? 'e' : '')} style={{ maxWidth: 620, width: '100%', margin: '8px auto 0', display: 'flex', flexDirection: 'column', gap: 24 }}>
          <PxPasos estado={pasos}/>
          {contenido}
        </div>
      </div>
      <PxAbreWeb abierto={modal === 'renovar'} titulo="Cómo renovar tu cédula" onClose={() => setModal(null)}/>
    </div>
  );
}

// ─── 2 · AVISO DE PRIVACIDAD (primer arranque y «aviso actualizado») ────────────────────────
const PRIV_V1 = {
  si: [
    'Cuántas veces usas cada pantalla y botón, sin nombres ni números de póliza.',
    'Los errores del programa: qué parte falló y qué versión de Piixi tienes.',
    'Los reportes de problema que tú decidas mandarnos.',
    'Tu correo de la cuenta, para saber de quién es cada dato.',
  ],
  no: [
    'Los datos de tus clientes: nombres, RFC, CURP, domicilios, teléfonos, correos o datos de salud.',
    'Tus pólizas, recibos, documentos o expedientes.',
    'Tus contraseñas y las claves de los portales de las aseguradoras.',
  ],
};
const PRIV_V2 = {
  si: [
    'Cuántas veces usas cada pantalla y botón.',
    'Los errores del programa y tu versión de Piixi.',
    'Los reportes de problema que tú mandes.',
    { nuevo: true, t: 'Tus conversaciones con soporte, por 12 meses.' },
  ],
  no: [
    'Los datos de tus clientes.',
    'Tus pólizas, recibos, documentos o expedientes.',
    'Tus contraseñas y claves de portales.',
  ],
};

function PrivLista({ titulo, icono, tone, items, bullet }) {
  const t = PX_TONOS[tone];
  return (
    <section className="ax-card" style={{ borderRadius: 12, padding: 22, display: 'flex', flexDirection: 'column', gap: 14, background: 'var(--ax-bg-2)' }}>
      <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: 'var(--ax-fg-strong)', display: 'flex', gap: 10, alignItems: 'center' }}>
        <AxIcon name={icono} size={22} style={{ color: t.c }}/>{titulo}
      </h2>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((it, i) => (
          <li key={i} style={{ display: 'flex', gap: 10, fontSize: 16, lineHeight: 1.45, color: 'var(--ax-fg)' }}>
            {bullet === 'punto'
              ? <span style={{ flex: '0 0 20px', height: 20, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><span style={{ width: 8, height: 8, borderRadius: '50%', background: t.c }}/></span>
              : <PxIcono name="check" size={20} color={t.c} style={{ marginTop: 2 }}/>}
            {typeof it === 'string' ? it : <span><AxPill tone="info" style={{ marginRight: 8 }}>Nuevo</AxPill>{it.t}</span>}
          </li>
        ))}
      </ul>
    </section>
  );
}

function AvisoPrivacidadScreen() {
  useCta();
  const { navigate } = useHashRoute();
  const [modal, setModal] = useState(false);
  const v = CTA_PRIV.avisoVersion;
  const aviso = v >= 2 ? PRIV_V2 : PRIV_V1;
  const actualiza = !!CTA_PRIV.decision && CTA_PRIV.version < v;
  const antes = CTA_PRIV.decision === 'acepto' ? 'Acepto' : 'Ahora no';

  const decidir = (d) => {
    ctaPrivSet({ decision: d, version: v, fecha: CTA_HOY.corto });
    navigate('/inicio');
  };

  return (
    <div className="ax" style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', background: 'var(--ax-bg-1)' }}>
      <PxCabecera/>
      <div className="ax-fade-in" style={{ maxWidth: 860, width: '100%', margin: '0 auto', padding: '40px 24px 48px', display: 'flex', flexDirection: 'column', gap: 24 }}>
        {actualiza ? (
          <PxAviso tone="info" icon="info">
            <p style={PX_P}><strong>Actualizamos el aviso de privacidad.</strong> Antes elegiste «{antes}» (versión {CTA_PRIV.version}). Como el texto cambió, te lo volvemos a preguntar.</p>
            <p style={PX_AYUDA}>Lo nuevo: ahora también recibimos las conversaciones de soporte que tengas con nosotros por WhatsApp o correo, y las guardamos 12 meses.</p>
          </PxAviso>
        ) : null}
        <div>
          <PxEyebrow>{actualiza ? 'Aviso actualizado · versión ' + v : 'Antes de empezar'}</PxEyebrow>
          <h1 style={PX_H1}>{actualiza ? '¿Nos sigues ayudando a mejorar Piixi?' : '¿Nos ayudas a mejorar Piixi?'}</h1>
          {actualiza ? (
            <p style={{ ...PX_SUB, fontSize: 18, marginTop: 10 }}>Lo mismo de antes, con un cambio. <strong style={{ color: 'var(--ax-fg-strong)' }}>Tu cartera nunca sale de esta computadora.</strong></p>
          ) : (
            <p style={{ ...PX_SUB, fontSize: 18, marginTop: 10 }}>Nos gustaría saber qué pantallas usas y cuándo algo falla, para arreglarlo rápido. Esa información va ligada a tu cuenta Piixi, para poder ayudarte si tienes un problema. <strong style={{ color: 'var(--ax-fg-strong)' }}>Tu cartera nunca sale de esta computadora.</strong></p>
          )}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(320px, 100%), 1fr))', gap: 16 }}>
          <PrivLista titulo="Lo que sí nos llega" icono="arrow-right" tone="info" items={aviso.si} bullet="punto"/>
          <PrivLista titulo="Lo que nunca sale de aquí" icono="shield" tone="accent" items={aviso.no}/>
        </div>
        <p style={PX_P}>
          <button type="button" onClick={() => setModal(true)} style={{ appearance: 'none', background: 'none', border: 0, padding: 0, color: 'var(--ax-accent)', textDecoration: 'underline', fontSize: 16 }}>Leer el aviso de privacidad completo</button>
          {' '}<span style={{ color: 'var(--ax-fg-muted)' }}>· {v >= 2 ? 'versión 2' : 'versión 1, octubre 2026'}</span>
        </p>
        {/* «Acepto» y «Ahora no» miden lo mismo a propósito: que ninguna opción empuje a la otra. */}
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <PxBtn variant="primary" onClick={() => decidir('acepto')} style={{ flex: '1 1 220px', height: 56, fontSize: 17 }}>Acepto</PxBtn>
          <PxBtn variant="secondary" onClick={() => decidir('ahora_no')} style={{ flex: '1 1 220px', height: 56, fontSize: 17 }}>Ahora no</PxBtn>
        </div>
        {actualiza ? null : (
          <p style={{ ...PX_AYUDA, fontSize: 15 }}>
            Si eliges «Ahora no», Piixi funciona exactamente igual y no manda nada. Puedes cambiar de opinión cuando quieras en <strong style={{ color: 'var(--ax-fg)' }}>Ajustes › Privacidad</strong>.
          </p>
        )}
      </div>
      <PxAbreWeb abierto={modal} titulo="Aviso de privacidad completo" onClose={() => setModal(false)}/>
    </div>
  );
}

// ─── 3 · AJUSTES › PRIVACIDAD Y DATOS DE USO (reemplaza la fila «Telemetría anónima») ───────
function PrivacidadTarjeta() {
  const sim = useCta();
  const { navigate } = useHashRoute();
  const { pushToast } = useAxStore();
  const [modal, setModal] = useState(false);
  const d = CTA_PRIV.decision;
  const pendiente = !!d && CTA_PRIV.version < CTA_PRIV.avisoVersion;
  const cambiar = (nueva) => {
    ctaPrivSet({ decision: nueva, version: CTA_PRIV.avisoVersion, fecha: CTA_HOY.corto });
    pushToast({ kind: 'success', message: nueva === 'acepto' ? 'Listo: ahora compartes datos de uso.' : 'Listo: dejaste de compartir datos de uso. Piixi sigue funcionando igual.' });
  };
  const verAviso = (
    <span>Versión {CTA_PRIV.version} · <button type="button" onClick={() => setModal(true)} style={{ appearance: 'none', background: 'none', border: 0, padding: 0, color: 'var(--ax-accent)', textDecoration: 'underline', fontSize: 16 }}>leerlo completo</button></span>
  );
  const dato = (k, v) => (
    <div><div className="ax-mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ax-fg-muted)', marginBottom: 4 }}>{k}</div><div style={{ fontSize: 16, color: 'var(--ax-fg-strong)' }}>{v}</div></div>
  );
  return (
    <section className="ax-card" data-privacidad-tarjeta aria-labelledby="priv-t" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16, borderRadius: 10 }}>
      <PxFila style={{ justifyContent: 'space-between' }}>
        <h2 id="priv-t" style={{ margin: 0, fontFamily: 'var(--font-logo)', fontWeight: 700, fontSize: 20, color: 'var(--ax-fg-strong)' }}>Privacidad y datos de uso</h2>
        {d === 'acepto' ? <PxPill tone="accent">Compartiendo</PxPill> : d === 'ahora_no' ? <PxPill tone="ghost">No compartes</PxPill> : <PxPill tone="warm">Sin decidir</PxPill>}
      </PxFila>

      {pendiente ? (
        <PxAviso tone="info" icon="info">
          <p style={PX_P}><strong>Hay un aviso actualizado (versión {CTA_PRIV.avisoVersion}).</strong> Lo verás al volver a Inicio, o revísalo ahora.</p>
          <div><PxBtn onClick={() => navigate('/aviso-privacidad')} style={{ height: 44, fontSize: 15 }}>Revisar el aviso</PxBtn></div>
        </PxAviso>
      ) : null}

      {d === 'acepto' ? (
        <>
          <p style={PX_P}>Nos mandas conteos de uso, errores del programa y los reportes que tú decidas. Van ligados a tu cuenta ({CTA_CUENTA.correo}). Tu cartera nunca sale de esta computadora.</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(220px, 100%), 1fr))', gap: '18px 24px' }}>
            {dato('Tu decisión', 'Acepto · ' + CTA_PRIV.fecha)}
            {dato('Aviso', verAviso)}
          </div>
          <PxSep/>
          <PxFila style={{ justifyContent: 'space-between' }}>
            <p style={{ ...PX_AYUDA, flex: '1 1 320px' }}>Si dejas de compartir, Piixi funciona igual. No te cuesta nada.</p>
            <PxBtn onClick={() => cambiar('ahora_no')}>Dejar de compartir</PxBtn>
          </PxFila>
        </>
      ) : d === 'ahora_no' ? (
        <>
          <p style={PX_P}>Elegiste «Ahora no». Piixi no nos manda nada.</p>
          {sim.d2 === 'B' ? (
            <PxAviso tone="info" icon="info">
              <p style={PX_P}>Aun así puedes mandarnos un reporte de problema cuando tú quieras: al picar «Enviar» se manda sólo ese reporte, nada más.</p>
              <p style={PX_AYUDA}>Los avisos del equipo de soporte también te llegan.</p>
            </PxAviso>
          ) : (
            <PxAviso tone="warm" icon="info">
              <p style={PX_P}>Mientras no aceptes, tampoco puedes mandar reportes de problema desde Piixi ni ver los avisos del equipo de soporte.</p>
              <p style={PX_AYUDA}>Si necesitas ayuda, escríbenos a ayudapiixi@madpanda.mx.</p>
            </PxAviso>
          )}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(220px, 100%), 1fr))', gap: '18px 24px' }}>
            {dato('Tu decisión', 'Ahora no · ' + CTA_PRIV.fecha)}
            {dato('Aviso', verAviso)}
          </div>
          <PxSep/>
          <PxFila style={{ justifyContent: 'flex-end' }}>
            <PxBtn variant="primary" onClick={() => cambiar('acepto')}>Aceptar y compartir</PxBtn>
          </PxFila>
        </>
      ) : (
        <>
          <p style={PX_P}>Todavía no has elegido si compartes datos de uso, errores y reportes con Piixi. Mientras tanto, Piixi no manda nada.</p>
          <PxFila style={{ justifyContent: 'flex-end' }}><PxBtn variant="primary" onClick={() => navigate('/aviso-privacidad')}>Ver el aviso y elegir</PxBtn></PxFila>
        </>
      )}
      <PxAbreWeb abierto={modal} titulo="Aviso de privacidad completo" onClose={() => setModal(false)}/>
    </section>
  );
}

// ─── Compuerta: al volver a Inicio, si el aviso cambió (o falta decidir), se pregunta ───────
function AvisoGate() {
  useCta();
  const { path, navigate } = useHashRoute();
  const { pushToast } = useAxStore();
  useEffect(() => {
    const enInicio = path === '/' || path === '' || path.split('?')[0] === '/inicio';
    if (!enInicio) return;
    if (ctaAvisoPendiente()) { navigate('/aviso-privacidad'); return; }
    if (CTA_CUENTA.avisoLicencia) {
      const modo = CTA_CUENTA.avisoLicencia;
      CTA_CUENTA.avisoLicencia = null;
      pushToast({
        kind: 'warn', timeout: 9000,
        message: modo === 'limitada'
          ? 'Tu cédula no está vigente: Piixi no redacta avisos nuevos hasta que la renueves. Ver y revisar tu cartera sigue igual.'
          : 'Tu cédula no está vigente. Piixi sigue funcionando completo; el primer paso de la bienvenida queda pendiente.',
      });
    }
  });
  return null;
}

// ─── Tweaks › «Cuenta · simular» ───────────────────────────────────────────────────────────
function CtaAccion({ onClick, children }) {
  return (
    <button data-cta-tweak onClick={onClick} style={{
      appearance: 'none', background: 'rgba(255,255,255,0.7)', border: '1px solid rgba(0,0,0,0.06)',
      borderRadius: 6, padding: '6px 8px', fontSize: 11, color: '#29261b', cursor: 'default', textAlign: 'left',
    }}>{children}</button>
  );
}

function CuentaTweaks({ navigate }) {
  const s = useCta();
  const nota = { fontSize: 10, color: 'rgba(41,38,27,0.55)', lineHeight: 1.45 };
  const primerArranque = () => {
    CTA_FLOW.inicio = null;
    Object.assign(CTA_CUENTA, { creada: false, correo: '', nombre: '', despacho: '', cedula: '', licencia: 'sin_cedula', confirmada: false, venceEl: '', avisoLicencia: null });
    Object.assign(CTA_PRIV, { avisoVersion: 1, decision: null, version: 0, fecha: '' });
    ctaSim({ corrida: CTA_SIM.corrida + 1 });
    navigate('/crear-cuenta');
  };
  const restaurar = () => {
    Object.assign(CTA_CUENTA, { creada: true, correo: 'miguel@madpanda.mx', nombre: 'Miguel Ángel Rivera', despacho: 'Rivera Asesores', cedula: 'A-0148927', licencia: 'valida', confirmada: true, venceEl: '14 de marzo de 2028', avisoLicencia: null });
    Object.assign(CTA_PRIV, { avisoVersion: 1, decision: 'acepto', version: 1, fecha: '4 oct 2026' });
    ctaEmit(); navigate('/inicio');
  };
  return (
    <>
      <TweakSection label="Cuenta · simular"/>
      <div style={nota}>
        Primer arranque de punta a punta: Crea tu cuenta (#744) y el aviso de privacidad (#807). Elige cómo responde la CNSF y el código, y arranca:
      </div>
      <TweakRadio label="Respuesta de la CNSF" value={s.cnsf}
        options={[{ value: 'confirmada', label: 'confirmada' }, { value: 'no_respondio', label: 'no respondió' }, { value: 'vencida', label: 'vencida' }]}
        onChange={(v) => ctaSim({ cnsf: v })}/>
      <TweakRadio label="Código" value={s.codigo}
        options={[{ value: 'correcto', label: 'correcto' }, { value: 'incorrecto', label: 'incorrecto' }]}
        onChange={(v) => ctaSim({ codigo: v })}/>
      <div style={nota}>Con «correcto» sirve cualquier código de 6 dígitos; con «incorrecto», ninguno.</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 4 }}>
        <CtaAccion onClick={primerArranque}>→ Simular primer arranque (sin cuenta, sin decisión de privacidad)</CtaAccion>
        <CtaAccion onClick={() => { ctaPrivSet({ avisoVersion: 2 }); navigate('/inicio'); }}>→ Simular aviso versión 2 (al volver a Inicio se vuelve a preguntar)</CtaAccion>
        <CtaAccion onClick={() => navigate('/ajustes')}>→ Ajustes › Privacidad y datos de uso</CtaAccion>
        <CtaAccion onClick={() => navigate('/cuenta')}>→ Tu cuenta (cédula)</CtaAccion>
        <CtaAccion onClick={restaurar}>→ Restaurar: cuenta hecha, aviso versión 1 aceptado</CtaAccion>
      </div>

    </>
  );
}

Object.assign(window, {
  CrearCuentaScreen, AvisoPrivacidadScreen, PrivacidadTarjeta, AvisoGate, CuentaTweaks,
  CTA_SIM, CTA_CUENTA, CTA_PRIV, CTA_FLOW, ctaSim, ctaCuentaSet, ctaPrivSet, useCta, ctaAbrirCedula, ctaAvisoPendiente,
  PxBtn, PxPill, PxAviso,
});