// src/screen-cumplimiento.jsx — pantalla de Cumplimiento.
// React 18 UMD + Babel standalone. Sin import/export — todo scope global.
// Expone window.CumplimientoScreen.

// ─── Banderita: átomo visual central ─────────────────────────────────────────
function Banderita({ estado, size }) {
  // estado: 'cumplida' | 'pendiente' | 'critica' | 'no_aplica'
  var sz = size || 18;
  if (estado === 'cumplida') {
    return (
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: sz, height: sz, borderRadius: '50%',
        background: 'var(--ax-accent-soft)',
        border: '1.5px solid var(--ax-accent-line)',
        color: 'var(--ax-accent)',
        flexShrink: 0,
      }}>
        <AxIcon name="check" size={sz * 0.55}/>
      </span>
    );
  }
  if (estado === 'pendiente' || estado === 'critica') {
    var col = estado === 'critica' ? 'var(--ax-danger)' : 'var(--ax-warm)';
    var colSoft = estado === 'critica' ? 'var(--ax-danger-soft)' : 'var(--ax-warm-soft)';
    var colLine = estado === 'critica' ? 'rgba(233,76,77,0.25)' : 'var(--ax-warm-line)';
    return (
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: sz, height: sz, borderRadius: '50%',
        background: colSoft,
        border: '1.5px solid ' + colLine,
        color: col,
        flexShrink: 0,
      }}>
        <span style={{ width: sz * 0.33, height: sz * 0.33, borderRadius: '50%', background: col }}/>
      </span>
    );
  }
  // no_aplica
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      width: sz, height: sz, flexShrink: 0,
      color: 'var(--ax-fg-faint)', fontSize: sz * 0.75, lineHeight: 1,
    }}>—</span>
  );
}

// Banderita-resumen para una fila de validaciones (array de estados)
function BanderitaResumen({ estados }) {
  var cumplidas = estados.filter(function (e) { return e === 'cumplida'; }).length;
  var criticas  = estados.filter(function (e) { return e === 'critica'; }).length;
  var pendientes = estados.filter(function (e) { return e === 'pendiente'; }).length;
  var total     = estados.filter(function (e) { return e !== 'no_aplica'; }).length;

  if (total === 0) return <Banderita estado="no_aplica" size={16}/>;
  if (cumplidas === total) return <Banderita estado="cumplida" size={16}/>;
  if (criticas > 0)        return <Banderita estado="critica" size={16}/>;
  return <Banderita estado="pendiente" size={16}/>;
}

// Mini barra de progreso
function MiniProgreso({ cumplidas, total, width }) {
  var pct = total > 0 ? Math.round((cumplidas / total) * 100) : 0;
  var ww = width || 80;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{
        width: ww, height: 4, borderRadius: 2,
        background: 'var(--ax-bg-3)', overflow: 'hidden', flexShrink: 0,
      }}>
        <div style={{
          width: pct + '%', height: '100%', borderRadius: 2,
          background: pct >= 90 ? 'var(--ax-accent)' : pct >= 60 ? 'var(--ax-warm)' : 'var(--ax-danger)',
          transition: 'width 400ms ease',
        }}/>
      </div>
      <span style={{
        fontSize: 11, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)',
        whiteSpace: 'nowrap',
      }}>{cumplidas} de {total}</span>
    </div>
  );
}

// ─── Modal de workflow ────────────────────────────────────────────────────────
function WorkflowModal({ validacion, poliza, contratante, onClose }) {
  var { pushToast } = useAxStore();

  function iniciarPaso(paso) {
    pushToast({
      kind: 'success',
      title: 'Paso iniciado',
      message: paso.label + ' — en curso.',
    });
    onClose();
  }

  return (
    <AxModal title={validacion.label} onClose={onClose}>
      {contratante ? (
        <div style={{
          padding: '10px 14px', marginBottom: 16,
          background: 'var(--ax-bg-3)', borderRadius: 8,
          border: '1px solid var(--ax-border)',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <AxAvatar name={contratante.nombre} size={30}/>
          <div>
            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ax-fg-strong)' }}>
              {contratante.nombre}
            </div>
            {poliza ? (
              <div style={{ fontSize: 11, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)', marginTop: 1 }}>
                {poliza.polizaNumero} · {window.AdmixData.formatDateES(poliza.finVigencia)}
              </div>
            ) : null}
          </div>
        </div>
      ) : null}

      <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)', marginBottom: 16, lineHeight: 1.5 }}>
        {validacion.proposito}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {validacion.workflow.map(function (paso, idx) {
          return (
            <div key={paso.paso} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px', borderRadius: 8,
              background: paso.primario ? 'var(--ax-accent-soft)' : 'var(--ax-bg-2)',
              border: '1px solid ' + (paso.primario ? 'var(--ax-accent-line)' : 'var(--ax-border)'),
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: '50%', flexShrink: 0,
                background: paso.primario ? 'var(--ax-accent)' : 'var(--ax-bg-3)',
                color: paso.primario ? '#000' : 'var(--ax-fg-muted)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 10, fontWeight: 700, fontFamily: 'var(--font-mono)',
              }}>{paso.paso}</div>
              <div style={{ flex: 1 }}>
                <div style={{
                  fontSize: 13, fontWeight: paso.primario ? 500 : 400,
                  color: paso.primario ? 'var(--ax-fg-strong)' : 'var(--ax-fg)',
                }}>{paso.label}</div>
              </div>
              {paso.primario ? (
                <AxButton variant="primary" size="sm" icon={paso.icono} onClick={function () { iniciarPaso(paso); }}>
                  Empezar
                </AxButton>
              ) : (
                <AxIcon name={paso.icono} size={14} style={{ color: 'var(--ax-fg-faint)' }}/>
              )}
            </div>
          );
        })}
      </div>

      {validacion.workflow.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '20px 0', color: 'var(--ax-fg-faint)', fontSize: 13 }}>
          Esta validación se mantiene al día automáticamente.
        </div>
      ) : null}
    </AxModal>
  );
}

// ─── Modal de detalle de cliente ──────────────────────────────────────────────
function ClienteModal({ dato, onClose }) {
  var [workflowModal, setWorkflowModal] = React.useState(null);

  var cont = dato.contratante;
  var polizas = dato.polizas;
  var validaciones = window.AdmixCumplimiento.VALIDACIONES;

  function abrirWorkflow(val, poliza) {
    if (val.workflow && val.workflow.length > 0) {
      setWorkflowModal({ validacion: val, poliza: poliza, contratante: cont });
    }
  }

  if (workflowModal) {
    return (
      <WorkflowModal
        validacion={workflowModal.validacion}
        poliza={workflowModal.poliza}
        contratante={workflowModal.contratante}
        onClose={function () { setWorkflowModal(null); }}
      />
    );
  }

  return (
    <AxModal title={cont.nombre} onClose={onClose}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
        <AxAvatar name={cont.nombre} size={40}/>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ax-fg-strong)' }}>{cont.nombre}</div>
          <div style={{ fontSize: 11, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>
            {cont.rfc} · {cont.email}
          </div>
          <div style={{ marginTop: 6 }}>
            <AxPill tone={dato.saludTone} dot>{dato.salud}</AxPill>
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {polizas.map(function (pd) {
          var pol = pd.poliza;
          var carrier = window.AdmixData.carrierById(pol.carrier);
          return (
            <div key={pol.id} style={{
              borderRadius: 8, border: '1px solid var(--ax-border)',
              overflow: 'hidden',
            }}>
              <div style={{
                padding: '10px 14px', background: 'var(--ax-bg-2)',
                display: 'flex', alignItems: 'center', gap: 10,
                borderBottom: '1px solid var(--ax-border)',
              }}>
                <AxCarrierAvatar id={pol.carrier} size={20}/>
                <div style={{ flex: 1 }}>
                  <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--ax-fg-strong)' }}>
                    {pol.polizaNumero}
                  </span>
                  <span style={{
                    marginLeft: 8, fontSize: 11, color: 'var(--ax-fg-faint)',
                    fontFamily: 'var(--font-mono)',
                  }}>{pol.ramo} · vence {window.AdmixData.formatDateES(pol.finVigencia)}</span>
                </div>
                <span style={{ fontSize: 11, color: 'var(--ax-fg-muted)' }}>
                  {pd.cumplidas}/{pd.total} validaciones
                </span>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {pd.validaciones.map(function (ve, vei) {
                  var valDef = null;
                  for (var ii = 0; ii < validaciones.length; ii++) {
                    if (validaciones[ii].id === ve.id) { valDef = validaciones[ii]; break; }
                  }
                  var esInteractivo = !ve.cumplida && valDef && valDef.workflow && valDef.workflow.length > 0;
                  return (
                    <div
                      key={ve.id}
                      onClick={esInteractivo ? function (v, p) { return function () { abrirWorkflow(v, p); }; }(valDef, pol) : undefined}
                      style={{
                        padding: '8px 14px',
                        display: 'flex', alignItems: 'center', gap: 10,
                        borderTop: vei > 0 ? '1px solid var(--ax-border)' : 'none',
                        cursor: esInteractivo ? 'pointer' : 'default',
                        transition: 'background 100ms',
                      }}
                      onMouseEnter={esInteractivo ? function (e) { e.currentTarget.style.background = 'var(--ax-bg-3)'; } : undefined}
                      onMouseLeave={esInteractivo ? function (e) { e.currentTarget.style.background = ''; } : undefined}
                    >
                      <Banderita estado={ve.estado} size={16}/>
                      <span style={{ flex: 1, fontSize: 12, color: 'var(--ax-fg)' }}>{ve.label}</span>
                      {esInteractivo ? (
                        <span style={{ fontSize: 11, color: 'var(--ax-accent)', fontFamily: 'var(--font-mono)' }}>
                          Iniciar →
                        </span>
                      ) : null}
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </AxModal>
  );
}

// ─── Franja de rebanadas del pastel ──────────────────────────────────────────
function FranjaRebanadas() {
  var rebanadas = window.AdmixCumplimiento.REBANADAS;
  var validaciones = window.AdmixCumplimiento.VALIDACIONES;

  function conteoRebanada(id) {
    return validaciones.filter(function (v) { return v.rebanada === id; }).length;
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 28 }}>
      <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--ax-fg-muted)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>
        Fuentes de validación
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        {rebanadas.map(function (reb) {
          var cnt = conteoRebanada(reb.id);
          var activa = reb.activa;
          return (
            <div key={reb.id} style={{
              flex: 1, borderRadius: 8, padding: '12px 14px',
              background: activa ? 'var(--ax-bg-2)' : 'var(--ax-bg-1)',
              border: '1px solid ' + (activa ? 'var(--ax-accent-line)' : 'var(--ax-border)'),
              opacity: activa ? 1 : 0.55,
              position: 'relative', overflow: 'hidden',
            }}>
              {activa ? (
                <div style={{
                  position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                  background: 'var(--ax-accent)',
                }}/>
              ) : null}
              <div style={{ fontSize: 12, fontWeight: 500, color: activa ? 'var(--ax-fg-strong)' : 'var(--ax-fg-muted)' }}>
                {reb.label}
              </div>
              <div style={{ fontSize: 10, color: 'var(--ax-fg-faint)', marginTop: 2 }}>
                {reb.descripcion}
              </div>
              {activa ? (
                <div style={{
                  marginTop: 8, display: 'inline-flex', alignItems: 'center', gap: 4,
                  background: 'var(--ax-accent-soft)', border: '1px solid var(--ax-accent-line)',
                  borderRadius: 4, padding: '2px 7px',
                  fontSize: 10, color: 'var(--ax-accent)', fontFamily: 'var(--font-mono)',
                }}>
                  {cnt} {cnt === 1 ? 'validación' : 'validaciones'}
                </div>
              ) : (
                <div style={{
                  marginTop: 8,
                  fontSize: 10, color: 'var(--ax-fg-faint)', fontStyle: 'italic',
                }}>Próximamente</div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Hero de transición (compañero no juez) ───────────────────────────────────
function HeroTransicion() {
  var pct = window.AdmixCumplimiento.progresoCartera;
  var cedula = window.AdmixCumplimiento.cedula;

  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16, marginBottom: 28,
    }}>
      {/* Tarjeta principal: compañero */}
      <div style={{
        borderRadius: 12, padding: '28px 32px',
        background: 'linear-gradient(160deg, rgba(0,255,136,0.06) 0%, rgba(0,255,136,0.01) 100%)',
        border: '1px solid var(--ax-accent-line)',
        position: 'relative', overflow: 'hidden',
      }}>
        <div aria-hidden style={{
          position: 'absolute', right: -20, bottom: -60,
          fontSize: 160, color: 'rgba(0,255,136,0.04)',
          fontWeight: 800, lineHeight: 0.85, pointerEvents: 'none',
          fontFamily: 'var(--font-mono)',
        }}>38%</div>
        <AxEyebrow style={{ color: 'var(--ax-accent)', marginBottom: 10 }}>
          Recolección de evidencia · en progreso
        </AxEyebrow>
        <h2 style={{ margin: '0 0 6px', fontSize: 20, fontWeight: 600, color: 'var(--ax-fg-strong)', lineHeight: 1.25 }}>
          Vamos recolectando la evidencia<br/>de tu cartera juntos
        </h2>
        <p style={{ margin: '0 0 22px', fontSize: 13, color: 'var(--ax-fg-muted)', lineHeight: 1.55 }}>
          Cada acción que completas acerca tu cartera al cumplimiento total. Sin presiones — paso a paso.
        </p>

        {/* Barra de progreso */}
        <div style={{ marginBottom: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 7 }}>
            <span style={{ fontSize: 13, color: 'var(--ax-fg-muted)' }}>Progreso de cartera</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 11, color: 'var(--ax-accent)', fontFamily: 'var(--font-mono)' }}>↑ 6% esta semana</span>
              <span style={{
                fontSize: 22, fontWeight: 700, fontFamily: 'var(--font-mono)',
                color: 'var(--ax-accent)',
              }}>{pct}%</span>
            </div>
          </div>
          <div style={{ height: 8, borderRadius: 4, background: 'var(--ax-bg-3)', overflow: 'hidden' }}>
            <div style={{
              width: pct + '%', height: '100%', borderRadius: 4,
              background: 'linear-gradient(90deg, var(--ax-accent), rgba(0,255,136,0.6))',
              transition: 'width 600ms ease',
            }}/>
          </div>
        </div>
      </div>

      {/* Tarjeta nivel agente: cédula */}
      <div style={{
        borderRadius: 12, padding: '24px',
        background: 'var(--ax-bg-2)',
        border: '1px solid var(--ax-border)',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10, flexShrink: 0,
            background: 'var(--ax-accent-soft)',
            border: '1px solid var(--ax-accent-line)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--ax-accent)',
          }}>
            <AxIcon name="shield" size={20}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--ax-fg-faint)', marginBottom: 4, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              Tu cédula · nivel agente
            </div>
            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ax-fg-strong)', lineHeight: 1.3 }}>
              Cédula {cedula.numero}
            </div>
            <div style={{ fontSize: 11, color: 'var(--ax-fg-muted)', marginTop: 3, fontFamily: 'var(--font-mono)' }}>
              vigente hasta {cedula.vigenciaLabel}
            </div>
          </div>
        </div>

        <div style={{
          padding: '10px 12px', borderRadius: 8,
          background: 'var(--ax-accent-soft)',
          border: '1px solid var(--ax-accent-line)',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <Banderita estado="cumplida" size={18}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--ax-fg-strong)' }}>Cédula CNSF</div>
            <div style={{ fontSize: 11, color: 'var(--ax-fg-muted)' }}>Activa y vigente</div>
          </div>
          <AxPill tone="accent" dot>Al día</AxPill>
        </div>

        <div style={{ fontSize: 11, color: 'var(--ax-fg-faint)', lineHeight: 1.5 }}>
          La cédula te habilita para intermediar seguros. Se valida directamente contra el registro CNSF.
        </div>
      </div>
    </div>
  );
}

// ─── FlujoDetalle: pantalla completa de una validación ───────────────────────
function FlujoDetalle({ id }) {
  var val = null;
  (window.AdmixCumplimiento.VALIDACIONES || []).forEach(function (v) { if (v.id === id) val = v; });
  var { navigate } = useHashRoute();
  var [modalPol, setModalPol] = React.useState(null); // { validacion, poliza, contratante }

  if (!val) {
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <AxEmpty
          icon="shield"
          title="Validación no encontrada"
          body={'No existe una validación con id: ' + id}
          action={
            <AxButton variant="secondary" onClick={function () { navigate('/cumplimiento'); }}>
              Volver a Cumplimiento
            </AxButton>
          }
        />
      </div>
    );
  }

  // "Aplica a" label local (mirrors the function below, defined before it)
  var aplicaLabel = val.nivelAgente ? 'Nivel agente'
    : val.soloCarrier === 'gnp' ? 'Pólizas GNP'
    : val.soloRenovacion ? 'Pólizas por renovar'
    : 'Toda la cartera';

  var reb = null;
  var rebanadas = window.AdmixCumplimiento.REBANADAS || [];
  for (var ri = 0; ri < rebanadas.length; ri++) {
    if (rebanadas[ri].id === val.rebanada) { reb = rebanadas[ri]; break; }
  }
  var rebLabel = reb ? reb.label : val.rebanada;

  // Build pólizas list (only those with a non-null/undefined estado for this val)
  var estadosPorPoliza = window.AdmixCumplimiento.estadosPorPoliza || {};
  var todasPolizas = window.AdmixData.POLICIES || [];
  var polRows = [];
  if (!val.nivelAgente) {
    todasPolizas.forEach(function (pol) {
      var pEst = estadosPorPoliza[pol.id];
      if (pEst && pEst[id] !== null && pEst[id] !== undefined) {
        polRows.push({ pol: pol, cumplida: pEst[id] });
      }
    });
    // Sort: pendiente first, then cumplida
    polRows.sort(function (a, b) { return (a.cumplida === b.cumplida) ? 0 : a.cumplida ? 1 : -1; });
  }

  var CAP = 30;
  var extra = polRows.length > CAP ? polRows.length - CAP : 0;
  var visibles = polRows.slice(0, CAP);

  // Avance por póliza: cuántas actividades del flujo lleva cada una (determinista,
  // de demo). cumplida → todas; pendiente → 0..N-1 según su id, y la siguiente es
  // val.workflow[hechos]. Mapea al motor real: cada póliza es un run con estado por paso.
  var Nact = (val.workflow && val.workflow.length) || 0;
  function pasosHechosDe(pol, cumplida) {
    if (Nact === 0) return 0;
    if (cumplida) return Nact;
    var h = 0, s = String(pol.id);
    for (var i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) % 997;
    return h % Nact;
  }
  var pct = val.total > 0 ? Math.round((val.cumplidas / val.total) * 100) : 0;
  var barColor = pct >= 90 ? 'var(--ax-accent)' : pct >= 60 ? 'var(--ax-warm)' : 'var(--ax-danger)';

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {modalPol ? (
        <WorkflowModal
          validacion={modalPol.validacion}
          poliza={modalPol.poliza}
          contratante={modalPol.contratante}
          onClose={function () { setModalPol(null); }}
        />
      ) : null}

      <AxPageHeader
        breadcrumb={<AxCrumb items={[{ label: 'Cumplimiento', to: '/cumplimiento' }, { label: val.label }]}/>}
        title={val.label}
        subtitle={val.proposito}
        actions={
          <AxButton variant="secondary" icon="arrow-right" onClick={function () { navigate('/cumplimiento'); }}>
            Volver
          </AxButton>
        }
      />

      <div style={{ flex: 1, overflow: 'auto', padding: '24px 32px 48px' }}>

        {/* Bloque de progreso */}
        <div style={{
          background: 'var(--ax-bg-2)', border: '1px solid var(--ax-border)',
          borderRadius: 12, padding: '24px 28px', marginBottom: 28,
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 24, marginBottom: 16, flexWrap: 'wrap' }}>
            <div>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 40, fontWeight: 700,
                color: 'var(--ax-accent)', lineHeight: 1,
              }}>{val.cumplidas}</span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 20, color: 'var(--ax-fg-muted)',
                marginLeft: 6,
              }}>de {val.total}</span>
              <div style={{ fontSize: 12, color: 'var(--ax-fg-faint)', marginTop: 4 }}>pólizas al día</div>
            </div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', paddingBottom: 4 }}>
              <AxPill tone="ghost">{rebLabel}</AxPill>
              <AxPill tone="ghost">{aplicaLabel}</AxPill>
            </div>
          </div>
          <MiniProgreso cumplidas={val.cumplidas} total={val.total} width={360}/>
        </div>

        {/* Actividades del flujo */}
        <div style={{ marginBottom: 28 }}>
          <h2 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 500, color: 'var(--ax-fg-strong)' }}>
            Actividades del flujo
          </h2>
          {(!val.workflow || val.workflow.length === 0) ? (
            <div style={{
              padding: '18px 20px', borderRadius: 8,
              background: 'var(--ax-bg-2)', border: '1px solid var(--ax-border)',
              fontSize: 13, color: 'var(--ax-fg-faint)', fontStyle: 'italic',
            }}>
              Esta validación se mantiene al día automáticamente.
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {val.workflow.map(function (paso, idx) {
                return (
                  <div key={paso.paso} style={{
                    display: 'flex', alignItems: 'center', gap: 12,
                    padding: '12px 14px', borderRadius: 8,
                    background: paso.primario ? 'var(--ax-accent-soft)' : 'var(--ax-bg-2)',
                    border: '1px solid ' + (paso.primario ? 'var(--ax-accent-line)' : 'var(--ax-border)'),
                  }}>
                    <div style={{
                      width: 22, height: 22, borderRadius: '50%', flexShrink: 0,
                      background: paso.primario ? 'var(--ax-accent)' : 'var(--ax-bg-3)',
                      color: paso.primario ? '#000' : 'var(--ax-fg-muted)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 10, fontWeight: 700, fontFamily: 'var(--font-mono)',
                    }}>{paso.paso}</div>
                    <div style={{ flex: 1 }}>
                      <div style={{
                        fontSize: 13, fontWeight: paso.primario ? 500 : 400,
                        color: paso.primario ? 'var(--ax-fg-strong)' : 'var(--ax-fg)',
                      }}>{paso.label}</div>
                    </div>
                    {paso.primario ? (
                      <AxIcon name={paso.icono || 'play'} size={14} style={{ color: 'var(--ax-accent)' }}/>
                    ) : (
                      <AxIcon name={paso.icono || 'chevron-right'} size={14} style={{ color: 'var(--ax-fg-faint)' }}/>
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Pólizas */}
        <div>
          <h2 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 500, color: 'var(--ax-fg-strong)' }}>
            Pólizas
          </h2>

          {val.nivelAgente ? (
            /* Nivel agente: tarjeta única */
            <div style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '14px 18px', borderRadius: 8,
              background: 'var(--ax-accent-soft)', border: '1px solid var(--ax-accent-line)',
            }}>
              <Banderita estado="cumplida" size={20}/>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ax-fg-strong)' }}>Tu cédula — al día</div>
                <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)', marginTop: 2 }}>
                  Validación a nivel agente, no por póliza individual.
                </div>
              </div>
              <div style={{ marginLeft: 'auto' }}>
                <AxPill tone="accent" dot>Al día</AxPill>
              </div>
            </div>
          ) : visibles.length === 0 ? (
            <AxEmpty
              icon="search"
              title="Sin pólizas aplicables"
              body="Ninguna póliza de la cartera entra en el alcance de esta validación."
            />
          ) : (
            <div style={{ borderRadius: 8, border: '1px solid var(--ax-border)', overflow: 'hidden', background: 'var(--ax-bg-2)' }}>
              {visibles.map(function (row, idx) {
                var pol = row.pol;
                var contratante = window.AdmixData.contratanteById(pol.contratante);
                var nombre = contratante ? contratante.nombre : '—';
                var estadoStr = row.cumplida ? 'cumplida' : 'pendiente';
                var hechos = pasosHechosDe(pol, row.cumplida);
                var siguiente = (!row.cumplida && Nact > 0) ? val.workflow[hechos] : null;
                return (
                  <div
                    key={pol.id}
                    style={{
                      display: 'flex', alignItems: 'center', gap: 12,
                      padding: '10px 16px',
                      borderTop: idx > 0 ? '1px solid var(--ax-border)' : 'none',
                    }}
                  >
                    <Banderita estado={estadoStr} size={16}/>
                    <AxCarrierAvatar id={pol.carrier} size={26}/>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{
                        fontSize: 13, fontWeight: 500, color: 'var(--ax-fg-strong)',
                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                      }}>{nombre}</div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2, flexWrap: 'wrap' }}>
                        <span style={{ fontSize: 11, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)' }}>
                          {pol.polizaNumero}
                        </span>
                        <span style={{ color: 'var(--ax-border-strong)', fontSize: 11 }}>·</span>
                        <span style={{ fontSize: 11, color: 'var(--ax-fg-muted)' }}>{pol.ramo}</span>
                        <span style={{ color: 'var(--ax-border-strong)', fontSize: 11 }}>·</span>
                        <span style={{ fontSize: 11, color: 'var(--ax-fg-muted)', fontFamily: 'var(--font-mono)' }}>
                          vence {window.AdmixData.formatDateES(pol.finVigencia)}
                        </span>
                      </div>
                      {Nact > 0 ? (
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 7 }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                            {val.workflow.map(function (paso, k) {
                              var done = k < hechos;
                              var esNext = k === hechos && !row.cumplida;
                              return (
                                <span key={k} title={paso.label} style={{
                                  width: 15, height: 15, borderRadius: '50%', flexShrink: 0,
                                  display: 'grid', placeItems: 'center',
                                  background: done ? 'var(--ax-accent-soft)' : esNext ? 'var(--ax-warm-soft)' : 'var(--ax-bg-3)',
                                  border: '1px solid ' + (done ? 'var(--ax-accent-line)' : esNext ? 'var(--ax-warm-line)' : 'var(--ax-border)'),
                                  color: done ? 'var(--ax-accent)' : esNext ? 'var(--ax-warm)' : 'var(--ax-fg-faint)',
                                }}>
                                  {done ? <AxIcon name="check" size={8}/> : <span style={{ fontSize: 8, fontFamily: 'var(--font-mono)' }}>{k + 1}</span>}
                                </span>
                              );
                            })}
                          </div>
                          <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: row.cumplida ? 'var(--ax-fg-faint)' : 'var(--ax-warm)' }}>
                            {row.cumplida
                              ? (Nact + ' de ' + Nact + ' · completo')
                              : (hechos + ' de ' + Nact + ' · falta: ' + (siguiente ? siguiente.label : ''))}
                          </span>
                        </div>
                      ) : null}
                    </div>
                    {row.cumplida ? (
                      <span style={{
                        fontSize: 11, color: 'var(--ax-accent)', fontFamily: 'var(--font-mono)',
                        whiteSpace: 'nowrap',
                      }}>Al día ✓</span>
                    ) : (
                      <AxButton
                        size="sm"
                        variant="primary"
                        onClick={function (p, c) {
                          return function () {
                            setModalPol({ validacion: val, poliza: p, contratante: c });
                          };
                        }(pol, contratante)}
                      >
                        Gestionar
                      </AxButton>
                    )}
                  </div>
                );
              })}
              {extra > 0 ? (
                <div style={{
                  borderTop: '1px solid var(--ax-border)',
                  padding: '10px 16px',
                  fontSize: 12, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)',
                  textAlign: 'center',
                }}>+{extra} más</div>
              ) : null}
            </div>
          )}
        </div>

      </div>
    </div>
  );
}

// ─── Tabla de validaciones activas ───────────────────────────────────────────
// "Aplica a" — a qué entidades aplica el flujo/validación (visible desde la fila).
function aplicaALabel(val) {
  if (val.nivelAgente) return 'Nivel agente';
  if (val.soloCarrier === 'gnp') return 'Pólizas GNP';
  if (val.soloRenovacion) return 'Pólizas por renovar';
  return 'Toda la cartera';
}

// Toggle de encendido/apagado del flujo. Los regulatorios quedan bloqueados en ON.
function FlujoToggle({ on, locked, onToggle }) {
  return (
    <button
      onClick={locked ? undefined : onToggle}
      title={locked ? 'Regulatorio · no se puede desactivar' : (on ? 'Activo' : 'Inactivo')}
      style={{
        appearance: 'none', border: 0, padding: 0, cursor: 'default',
        width: 36, height: 20, borderRadius: 999, position: 'relative', flexShrink: 0,
        background: on ? 'var(--ax-accent-soft)' : 'var(--ax-bg-3)',
        boxShadow: on ? 'inset 0 0 0 1px var(--ax-accent-line)' : 'inset 0 0 0 1px var(--ax-border-strong)',
        opacity: locked ? 0.85 : 1,
      }}>
      <span style={{
        position: 'absolute', top: 2, left: on ? 18 : 2, width: 16, height: 16, borderRadius: '50%',
        background: on ? 'var(--ax-accent)' : 'var(--ax-fg-faint)',
        transition: 'left 140ms', display: 'grid', placeItems: 'center',
      }}>
        {locked ? <AxIcon name="shield" size={9} style={{ color: '#000' }}/> : null}
      </span>
    </button>
  );
}

function TablaValidaciones() {
  var validaciones = window.AdmixCumplimiento.VALIDACIONES;
  var rebanadas = window.AdmixCumplimiento.REBANADAS;
  var { pushToast } = useAxStore();
  var { navigate } = useHashRoute();
  var [apagados, setApagados] = React.useState({});

  function rebanandaLabel(id) {
    for (var i = 0; i < rebanadas.length; i++) {
      if (rebanadas[i].id === id) return rebanadas[i].label;
    }
    return id;
  }

  function estadoBanderita(val) {
    if (val.nivelAgente) return 'cumplida';
    var pct = val.total > 0 ? val.cumplidas / val.total : 0;
    if (pct >= 0.85) return 'cumplida';
    if (val.criticidad === 'critica') return 'critica';
    return 'pendiente';
  }

  return (
    <div style={{ marginBottom: 28 }}>
      <h2 style={{ margin: '0 0 12px', fontSize: 14, fontWeight: 500, color: 'var(--ax-fg-strong)' }}>
        Validaciones activas
        <span style={{ marginLeft: 8, fontSize: 12, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)', fontWeight: 400 }}>
          {validaciones.length}
        </span>
      </h2>

      <div style={{
        borderRadius: 8, border: '1px solid var(--ax-border)', overflow: 'hidden',
        background: 'var(--ax-bg-2)',
      }}>
        {/* Encabezado */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '34px 1.3fr 116px 132px 172px 58px',
          gap: 12, padding: '9px 16px',
          background: 'var(--ax-bg-1)',
          borderBottom: '1px solid var(--ax-border)',
        }}>
          {['', 'Validación', 'Fuente', 'Aplica a', 'Progreso', 'Activo'].map(function (h, i) {
            return (
              <span key={i} style={{
                fontSize: 10, fontWeight: 500, color: 'var(--ax-fg-faint)',
                letterSpacing: '0.07em', textTransform: 'uppercase',
              }}>{h}</span>
            );
          })}
        </div>

        {validaciones.map(function (val, idx) {
          var est = estadoBanderita(val);
          var reb = null;
          for (var ri = 0; ri < rebanadas.length; ri++) {
            if (rebanadas[ri].id === val.rebanada) { reb = rebanadas[ri]; break; }
          }

          return (
            <div
              key={val.id}
              onClick={function (v) { return function () { navigate('/cumplimiento/flujo/' + encodeURIComponent(v.id)); }; }(val)}
              style={{
                display: 'grid',
                gridTemplateColumns: '34px 1.3fr 116px 132px 172px 58px',
                gap: 12, padding: '12px 16px',
                borderTop: idx > 0 ? '1px solid var(--ax-border)' : 'none',
                alignItems: 'center',
                cursor: 'pointer',
                transition: 'background 100ms',
              }}
              onMouseEnter={function (e) { e.currentTarget.style.background = 'var(--ax-bg-3)'; }}
              onMouseLeave={function (e) { e.currentTarget.style.background = ''; }}
            >
              <Banderita estado={est} size={18}/>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ax-fg-strong)', marginBottom: 2 }}>
                  {val.label}
                  {val.nivelAgente ? <span style={{ marginLeft: 6, fontSize: 10, color: 'var(--ax-fg-faint)' }}>· agente</span> : null}
                </div>
                <div style={{
                  fontSize: 11, color: 'var(--ax-fg-faint)', lineHeight: 1.4,
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>{val.proposito}</div>
              </div>
              <div>
                <AxPill tone="ghost">
                  {val.soloCarrier ? 'Aseguradora · GNP' : rebanandaLabel(val.rebanada)}
                </AxPill>
              </div>
              <span style={{
                fontSize: 11, color: 'var(--ax-fg-muted)', fontFamily: 'var(--font-mono)',
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }}>
                {aplicaALabel(val)}
              </span>
              <MiniProgreso cumplidas={val.cumplidas} total={val.total} width={72}/>
              <span onClick={function (e) { e.stopPropagation(); }} style={{ display: 'flex', justifyContent: 'flex-end' }}>
                {(function () {
                  var locked = val.rebanada === 'regulatoria';
                  var on = locked || !apagados[val.id];
                  return (
                    <FlujoToggle
                      on={on}
                      locked={locked}
                      onToggle={function () {
                        setApagados(function (prev) { var n = Object.assign({}, prev); n[val.id] = !n[val.id]; return n; });
                        pushToast({ kind: on ? 'warn' : 'success', title: on ? 'Flujo desactivado' : 'Flujo activado', message: val.label });
                      }}
                    />
                  );
                })()}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── Tabla de clientes (vista estrella) ──────────────────────────────────────
function TablaClientes() {
  var [clienteModal, setClienteModal] = React.useState(null);
  var datos = React.useMemo(function () {
    return window.AdmixCumplimiento.porCliente().slice(0, 10);
  }, []);

  // Mini-banderitas inline para pólizas en regla
  function MiniBanderitas({ dato }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
        {dato.polizas.slice(0, 4).map(function (pd) {
          var est = pd.enRegla ? 'cumplida'
            : (pd.validaciones.some(function (v) { return v.estado === 'no_aplica' ? false : !v.cumplida; }) ? 'pendiente' : 'cumplida');
          return <Banderita key={pd.poliza.id} estado={est} size={14}/>;
        })}
        {dato.polizas.length > 4 ? (
          <span style={{ fontSize: 10, color: 'var(--ax-fg-faint)', marginLeft: 2 }}>
            +{dato.polizas.length - 4}
          </span>
        ) : null}
      </div>
    );
  }

  return (
    <>
      {clienteModal ? (
        <ClienteModal dato={clienteModal} onClose={function () { setClienteModal(null); }}/>
      ) : null}

      <div style={{ marginBottom: 28 }}>
        <h2 style={{ margin: '0 0 12px', fontSize: 14, fontWeight: 500, color: 'var(--ax-fg-strong)' }}>
          Por cliente
          <span style={{ marginLeft: 8, fontSize: 11, color: 'var(--ax-fg-faint)', fontWeight: 400 }}>
            Clic en una fila para ver el detalle de pólizas
          </span>
        </h2>

        <div style={{ borderRadius: 8, border: '1px solid var(--ax-border)', overflow: 'hidden', background: 'var(--ax-bg-2)' }}>
          {/* Encabezado */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 130px 110px 1fr 32px',
            gap: 0, padding: '9px 16px',
            background: 'var(--ax-bg-1)', borderBottom: '1px solid var(--ax-border)',
          }}>
            {['Cliente', 'Pólizas', 'Salud', 'Comportamiento', ''].map(function (h, i) {
              return (
                <span key={i} style={{
                  fontSize: 10, fontWeight: 500, color: 'var(--ax-fg-faint)',
                  letterSpacing: '0.07em', textTransform: 'uppercase',
                }}>{h}</span>
              );
            })}
          </div>

          {datos.map(function (dato, idx) {
            return (
              <div
                key={dato.contratante.id}
                onClick={function (d) { return function () { setClienteModal(d); }; }(dato)}
                style={{
                  display: 'grid', gridTemplateColumns: '1fr 130px 110px 1fr 32px',
                  gap: 0, padding: '12px 16px',
                  borderTop: idx > 0 ? '1px solid var(--ax-border)' : 'none',
                  alignItems: 'center',
                  cursor: 'pointer', transition: 'background 100ms',
                }}
                onMouseEnter={function (e) { e.currentTarget.style.background = 'var(--ax-bg-3)'; }}
                onMouseLeave={function (e) { e.currentTarget.style.background = ''; }}
              >
                {/* Cliente */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                  <AxAvatar name={dato.contratante.nombre} size={28}/>
                  <div style={{ minWidth: 0 }}>
                    <div style={{
                      fontSize: 13, fontWeight: 500, color: 'var(--ax-fg-strong)',
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    }}>{dato.contratante.nombre}</div>
                    <div style={{ fontSize: 10, color: 'var(--ax-fg-faint)', fontFamily: 'var(--font-mono)', marginTop: 1 }}>
                      {dato.contratante.rfc}
                    </div>
                  </div>
                </div>

                {/* Pólizas */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <span style={{ fontSize: 12, color: 'var(--ax-fg)' }}>
                    {dato.polizasEnRegla} de {dato.totalPolizas}
                  </span>
                  <MiniBanderitas dato={dato}/>
                </div>

                {/* Salud */}
                <div>
                  <AxPill tone={dato.saludTone} dot>{dato.salud}</AxPill>
                </div>

                {/* Comportamiento */}
                <div style={{
                  fontSize: 11, color: 'var(--ax-fg-faint)',
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  fontStyle: 'italic',
                }}>{dato.perfil}</div>

                {/* Chevron */}
                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                  <AxIcon name="chevron-right" size={14} style={{ color: 'var(--ax-fg-faint)' }}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

// ─── Lista de siguiente mejor acción ─────────────────────────────────────────
function SiguienteMejorAccion() {
  var acciones = React.useMemo(function () {
    return window.AdmixCumplimiento.siguienteAccion();
  }, []);
  var validaciones = window.AdmixCumplimiento.VALIDACIONES;
  var { pushToast } = useAxStore();
  var [workflowAbierto, setWorkflowAbierto] = React.useState(null);

  function getIconoVal(valId) {
    var iconos = {
      entrega_paquete: 'mail',
      contratante_identificado: 'user',
      renovacion_en_ventana: 'cal',
      cedula_vigente: 'shield',
      prestacion_gnp: 'arrow-right',
    };
    return iconos[valId] || 'check';
  }

  function empezar(acc) {
    var valDef = null;
    for (var i = 0; i < validaciones.length; i++) {
      if (validaciones[i].id === acc.validacionId) { valDef = validaciones[i]; break; }
    }
    if (valDef && valDef.workflow && valDef.workflow.length > 0) {
      setWorkflowAbierto({ validacion: valDef, poliza: acc.poliza, contratante: acc.contratante });
    } else {
      pushToast({ kind: 'success', title: 'Tarea iniciada', message: acc.label });
    }
  }

  if (acciones.length === 0) return null;

  return (
    <>
      {workflowAbierto ? (
        <WorkflowModal
          validacion={workflowAbierto.validacion}
          poliza={workflowAbierto.poliza}
          contratante={workflowAbierto.contratante}
          onClose={function () { setWorkflowAbierto(null); }}
        />
      ) : null}

      <div style={{ marginBottom: 28 }}>
        <h2 style={{ margin: '0 0 12px', fontSize: 14, fontWeight: 500, color: 'var(--ax-fg-strong)' }}>
          Acciones rápidas por póliza
          <span style={{ marginLeft: 8, fontSize: 11, color: 'var(--ax-fg-faint)', fontWeight: 400 }}>
            Una por una, cuando no hay palanca de varias pólizas
          </span>
        </h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {acciones.map(function (acc, idx) {
            return (
              <div key={acc.id} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '12px 16px', borderRadius: 8,
                background: 'var(--ax-bg-2)',
                border: '1px solid var(--ax-border)',
                transition: 'border-color 120ms',
              }}
              onMouseEnter={function (e) { e.currentTarget.style.borderColor = 'var(--ax-border-strong)'; }}
              onMouseLeave={function (e) { e.currentTarget.style.borderColor = 'var(--ax-border)'; }}
              >
                {/* Número */}
                <div style={{
                  width: 24, height: 24, borderRadius: '50%', flexShrink: 0,
                  background: 'var(--ax-bg-3)', border: '1px solid var(--ax-border-strong)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 10, fontWeight: 700, color: 'var(--ax-fg-muted)', fontFamily: 'var(--font-mono)',
                }}>{idx + 1}</div>

                {/* Icono validación */}
                <div style={{
                  width: 32, height: 32, borderRadius: 8, flexShrink: 0,
                  background: 'var(--ax-bg-3)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--ax-fg-muted)',
                }}>
                  <AxIcon name={getIconoVal(acc.validacionId)} size={15}/>
                </div>

                {/* Descripción */}
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 13, color: 'var(--ax-fg-strong)', fontWeight: 500,
                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  }}>{acc.label}</div>
                  <div style={{ marginTop: 4 }}>
                    <AxPill tone="ghost">{acc.rebanandaLabel}</AxPill>
                  </div>
                </div>

                {/* Impacto */}
                <div style={{
                  fontSize: 13, fontWeight: 700, color: 'var(--ax-accent)',
                  fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap', flexShrink: 0,
                }}>{acc.impacto}</div>

                {/* Botón */}
                <AxButton
                  variant="secondary"
                  size="sm"
                  onClick={function (a) { return function () { empezar(a); }; }(acc)}
                >
                  Empezar
                </AxButton>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

// ─── Jugada de mayor palanca ─────────────────────────────────────────────────
// La acción de MÁS alto apalancamiento: una sola jugada que pone al día varias
// pólizas del mismo cliente a la vez. Es lo que promete el puente desde Pendientes.
function JugadaMayorPalanca() {
  var plays = React.useMemo(function () { return window.AdmixCumplimiento.jugadaMayorPalanca(); }, []);
  var [wf, setWf] = React.useState(null);
  if (!plays || plays.length === 0) return null;
  var hero = plays[0];
  var resto = plays.slice(1, 4);

  function empezar(play) {
    var pol = (play.polizasIds && play.polizasIds[0]) ? window.AdmixData.policyById(play.polizasIds[0]) : null;
    setWf({ validacion: play.validacion, poliza: pol, contratante: play.contratante });
  }

  return (
    <>
      {wf ? (
        <WorkflowModal
          validacion={wf.validacion}
          poliza={wf.poliza}
          contratante={wf.contratante}
          onClose={function () { setWf(null); }}
        />
      ) : null}

      <div style={{ marginBottom: 28 }}>
        <h2 style={{ margin: '0 0 12px', fontSize: 14, fontWeight: 500, color: 'var(--ax-fg-strong)' }}>
          Siguiente mejor acción
          <span style={{ marginLeft: 8, fontSize: 11, color: 'var(--ax-fg-faint)', fontWeight: 400 }}>
            Tu jugada de mayor palanca — una acción, varias pólizas al día
          </span>
        </h2>

        {/* HERO — la jugada #1 */}
        <div style={{
          borderRadius: 12, padding: '22px 24px',
          background: 'linear-gradient(160deg, rgba(0,255,136,0.08) 0%, rgba(0,255,136,0.01) 100%)',
          border: '1px solid var(--ax-accent-line)',
          display: 'flex', alignItems: 'center', gap: 22,
        }}>
          <div style={{ textAlign: 'center', flexShrink: 0, minWidth: 92 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 52, fontWeight: 700, color: 'var(--ax-accent)', lineHeight: 1 }}>
              {hero.polizasImpactadas}
            </div>
            <div style={{ fontSize: 11, color: 'var(--ax-fg-muted)', marginTop: 4, lineHeight: 1.35 }}>
              pólizas al día<br/>de una sola vez
            </div>
          </div>
          <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--ax-accent-line)' }}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <AxEyebrow style={{ color: 'var(--ax-accent)', marginBottom: 8 }}>Tu jugada de mayor palanca</AxEyebrow>
            <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--ax-fg-strong)', lineHeight: 1.3 }}>{hero.label}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10, flexWrap: 'wrap' }}>
              <AxAvatar name={hero.contratante.nombre} size={24}/>
              <span style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>{hero.contratante.nombre}</span>
              <AxPill tone="ghost">{hero.rebanandaLabel}</AxPill>
              <span style={{ fontSize: 12, color: 'var(--ax-accent)', fontFamily: 'var(--font-mono)' }}>+{hero.impacto}% cartera</span>
            </div>
          </div>
          <AxButton variant="primary" icon="arrow-up" onClick={function () { empezar(hero); }}>Empezar</AxButton>
        </div>

        {/* resto de jugadas de alta palanca */}
        {resto.length > 0 ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 10 }}>
            {resto.map(function (play) {
              return (
                <div key={play.id} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '11px 16px', borderRadius: 8,
                  background: 'var(--ax-bg-2)', border: '1px solid var(--ax-border)',
                }}>
                  <div style={{ width: 40, textAlign: 'center', flexShrink: 0 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 20, fontWeight: 700, color: 'var(--ax-accent)' }}>{play.polizasImpactadas}</span>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, color: 'var(--ax-fg-strong)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{play.label}</div>
                    <div style={{ marginTop: 3, display: 'flex', gap: 8, alignItems: 'center' }}>
                      <AxPill tone="ghost">{play.rebanandaLabel}</AxPill>
                      <span style={{ fontSize: 11, color: 'var(--ax-fg-muted)', fontFamily: 'var(--font-mono)' }}>+{play.impacto}% · {play.polizasImpactadas} pólizas</span>
                    </div>
                  </div>
                  <AxButton variant="secondary" size="sm" onClick={function (p) { return function () { empezar(p); }; }(play)}>Empezar</AxButton>
                </div>
              );
            })}
          </div>
        ) : null}
      </div>
    </>
  );
}

// ─── Modal de cédula ─────────────────────────────────────────────────────────
function CedulaModal({ onClose }) {
  var cedula = window.AdmixCumplimiento.cedula;
  return (
    <AxModal title="Tu cédula CNSF" onClose={onClose}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{
          padding: '18px 20px', borderRadius: 8,
          background: 'var(--ax-accent-soft)', border: '1px solid var(--ax-accent-line)',
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            width: 48, height: 48, borderRadius: 12,
            background: 'rgba(0,255,136,0.15)', border: '1px solid var(--ax-accent-line)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--ax-accent)',
          }}>
            <AxIcon name="shield" size={24}/>
          </div>
          <div>
            <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--ax-fg-strong)', fontFamily: 'var(--font-mono)' }}>
              {cedula.numero}
            </div>
            <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)', marginTop: 3 }}>
              Cédula de Agente de Seguros · CNSF
            </div>
          </div>
          <div style={{ marginLeft: 'auto' }}>
            <AxPill tone="accent" dot>Al día</AxPill>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {[
            { label: 'Número de cédula', valor: cedula.numero },
            { label: 'Vigente hasta', valor: cedula.vigenciaLabel },
            { label: 'Tipo', valor: 'Agente de Seguros' },
            { label: 'Registro', valor: 'CNSF · activo' },
          ].map(function (item, i) {
            return (
              <div key={i} style={{
                padding: '12px 14px', borderRadius: 6,
                background: 'var(--ax-bg-3)', border: '1px solid var(--ax-border)',
              }}>
                <div style={{ fontSize: 10, color: 'var(--ax-fg-faint)', marginBottom: 4, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                  {item.label}
                </div>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ax-fg-strong)', fontFamily: 'var(--font-mono)' }}>
                  {item.valor}
                </div>
              </div>
            );
          })}
        </div>

        <p style={{ margin: 0, fontSize: 12, color: 'var(--ax-fg-faint)', lineHeight: 1.55 }}>
          La cédula te habilita para intermediar seguros ante la CNSF.
          Piixi verifica automáticamente su vigencia; recibirás un aviso 90 días antes de que venza.
        </p>
      </div>
    </AxModal>
  );
}

// ─── Pantalla principal ───────────────────────────────────────────────────────
function CumplimientoScreen() {
  var [cedulaModal, setCedulaModal] = React.useState(false);
  var fechaHoy = '12 jun 2026';
  var hashRoute = useHashRoute();
  var path = hashRoute ? hashRoute.path : '';
  var match = hashRoute ? hashRoute.match : null;

  // Detect detail route: /cumplimiento/flujo/:id
  var flujoId = null;
  if (match) {
    var m = match('/cumplimiento/flujo/:id');
    if (m && m.params && m.params.id) {
      flujoId = m.params.id;
    }
  }
  if (!flujoId) {
    var parts = (path || '').split('/');
    if (parts[1] === 'cumplimiento' && parts[2] === 'flujo' && parts[3]) {
      flujoId = decodeURIComponent(parts[3]);
    }
  }
  if (flujoId) {
    var __vAg = null; (window.AdmixCumplimiento.VALIDACIONES || []).forEach(function (v){ if (v.id === flujoId) __vAg = v; });
    if (__vAg && __vAg.nivelAgente && window.FlujoCedulaScreen) return <FlujoCedulaScreen/>;
    return <FlujoDetalle id={flujoId}/>;
  }

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {cedulaModal ? <CedulaModal onClose={function () { setCedulaModal(false); }}/> : null}

      <AxPageHeader
        eyebrow="INSPECTORES DE CUMPLIMIENTO · PROVISIONAL"
        title="Cumplimiento"
        subtitle={'Evidencia de tu cartera al ' + fechaHoy + ' — te acompañamos en cada paso.'}
        actions={
          <AxButton
            variant="secondary"
            icon="shield"
            onClick={function () { setCedulaModal(true); }}
          >
            Ver mi cédula
          </AxButton>
        }
      />

      <div style={{ flex: 1, overflow: 'auto', padding: '24px 32px 48px' }}>
        <HeroTransicion/>
        <JugadaMayorPalanca/>
        <FranjaRebanadas/>
        <TablaValidaciones/>
        <TablaClientes/>
        <SiguienteMejorAccion/>
      </div>
    </div>
  );
}

window.CumplimientoScreen = CumplimientoScreen;