// === Escena 04 — "La cola de digitalización" (VALLE: sobrio, sin cuentas contables) ===
// Los PDF de la gestoría caen en la cola → Analizar → la IA extrae (DNI, periodo,
// conceptos con importe) → matching contra el catálogo con checks verdes → revisión
// en split con el PDF original al lado → "Plus de idiomas" sin match → botón + crea
// el tipo de concepto al vuelo con la naturaleza ya propuesta → avisos IA en tarjetas
// → remate: "Nada se guarda sin tu revisión." → cue de anticipación al clímax (asiento).
// LOCUCIÓN (audio/escena-04.mp3): 35.3s. Cada beat de T lleva su frase exacta.
function EscenaNO04({ t }){
  const T = {
    cola:0.0,       // "La cola de digitalización" → BrowserChrome + tab Archivos + cola vacía
    pdfs:2.0,       // "Sube los PDF"              → 5 PDFs caen en cascada
    analizar:4.4,   // "pulsa Analizar"            → el botón Analizar entra
    click:4.9,      //   (click del cursor sobre Analizar)
    scan:6.3,       // "La IA extrae"              → scan line sobre el primer PDF
    dni:7.9,        // "por su DNI"                → chip DNI + avatar MJ
    periodo:8.8,    // "el periodo"                → chip Marzo 2026
    conceptos:10.1, // "cada concepto con su importe" → filas de conceptos en cascada
    matching:12.2,  // "lo casa con tu catálogo"   → checks verdes concepto a concepto
    split:16.2,     // "con el PDF original al lado" → cortina 0.9s: PDF izda / editor dcha
    hueco:19.3,     // "que no existía"            → "Plus de idiomas" sin match (hueco naranja)
    boton:20.7,     // "Un botón"                  → botón + entra
    clickMas:21.4,  //   (click del cursor sobre +)
    form:22.1,      // "queda creado sin salir"    → mini-form de nuevo tipo de concepto
    natur:23.9,     // "naturaleza ya propuesta"   → chip Devengo premarcado
    creado:25.3,    //   (estado Creado; la línea se resuelve en verde)
    aviso1:26.5,    // "no es una nómina"          → tarjeta de aviso 1
    aviso2:28.1,    // "dos trabajadores"          → tarjeta de aviso 2
    pulso:29.4,     // "te lo avisa"               → el badge danger pulsa UNA vez
    remate:31.6,    // "sin tu revisión"           → frase remate bajo el navegador
    salida:34.0,    // "el asiento"                → cue de anticipación al clímax ↓
  };

  // ---- Geometría del mockup (1920×1080) ----
  const BX = 180, BY = 165, BW = 1560;   // ventana del navegador
  const CY = BY + 76 + 67;               // top del área de contenido (chrome + app header)
  const CH = 548;                        // alto del área de contenido

  // ---- Colores por naturaleza (contrato visual del deck) ----
  const VERDE   = 'linear-gradient(180deg,#34D399,#10B981)';
  const NARANJA = 'linear-gradient(180deg,#FBBF6B,#FB8C00)';
  const AZUL    = 'linear-gradient(180deg,#38BDF8,#0085FF)';

  // ---- Datos de mockup ----
  const DOCS = [
    { name:'nomina_MJ_marzo.pdf',  size:'182 KB' },
    { name:'nomina_LRG_marzo.pdf', size:'176 KB' },
    { name:'nomina_JSR_marzo.pdf', size:'179 KB' },
    { name:'adjunto_02.pdf',       size:'94 KB'  },
    { name:'nominas_lote.pdf',     size:'412 KB' },
  ];
  const CONC = [
    { n:'Salario base',           imp:'1.500 €', nat:'Devengo',   grad:VERDE,   sh:'rgba(16,185,129,0.28)' },
    { n:'Plus de transporte',     imp:'150 €',   nat:'Devengo',   grad:VERDE,   sh:'rgba(16,185,129,0.28)' },
    { n:'Retención IRPF',         imp:'198 €',   nat:'Retención', grad:NARANJA, sh:'rgba(251,140,0,0.28)'  },
    { n:'Seg. Social trabajador', imp:'105 €',   nat:'Retención', grad:NARANJA, sh:'rgba(251,140,0,0.28)'  },
  ];

  // ---- Progresos base ----
  const winP   = clamp(t/0.7, 0, 1), winE = Easing.easeOutCubic(winP);
  const scanP  = clamp((t-T.scan)/1.6, 0, 1);
  const splitP = clamp((t-T.split)/0.9, 0, 1), splitE = Easing.easeInOutCubic(splitP);
  const huecoP = clamp((t-T.hueco)/0.5, 0, 1), huecoE = Easing.easeOutBack(huecoP);
  const resolP = clamp((t-(T.creado+0.4))/0.4, 0, 1);
  const creadoFade = clamp((t-T.creado)/0.4, 0, 1);   // funde "Sin match" y botón + antes de resolver
  const remP   = clamp((t-T.remate)/0.7, 0, 1), remE = Easing.easeOutCubic(remP);
  const cueP   = clamp((t-T.salida)/0.5, 0, 1), cueE = Easing.easeOutBack(cueP);
  // Anticipación del remate: el mockup baja medio punto 0.5s antes
  const dimAvisos = clamp((t-T.aviso1)/0.5, 0, 1);
  const dimRemate = clamp((t-(T.remate-0.5))/0.5, 0, 1);
  // Pulso ÚNICO del badge danger (Math.sin una sola vez, clampeado)
  const pulsoP = clamp((t-T.pulso)/1.1, 0, 1);
  const pulso  = 1 + 0.16 * Math.sin(pulsoP * Math.PI);

  // ---- Cursor guionado: park → Analizar (click 4.9) → park → botón + (click 21.4) → park ----
  const CUR = [
    { t:0.0,   x:1760, y:1008 },
    { t:4.10,  x:1760, y:1008, arc:30 },
    { t:4.80,  x:772,  y:402  },
    { t:6.10,  x:772,  y:402,  arc:22 },
    { t:7.10,  x:1760, y:1008 },
    { t:20.50, x:1760, y:1008, arc:26 },
    { t:21.30, x:1665, y:762  },
    { t:22.40, x:1665, y:762,  arc:18 },
    { t:23.40, x:1760, y:1008 },
  ];

  // ---- Micro-componentes ----
  const ChipEstado = ({ kind })=>{
    const s = {
      pendiente: { bg:'#F1F5F9', bd:'#E2E8F0', fg:'#64748B', txt:'Pendiente' },
      analizando:{ bg:'rgba(0,133,255,0.10)', bd:'rgba(0,133,255,0.30)', fg:'#0085FF', txt:'Analizando…' },
      extraido:  { bg:'rgba(16,185,129,0.10)', bd:'rgba(16,185,129,0.30)', fg:'#059669', txt:'Extraído' },
    }[kind];
    return (
      <span className="f-plex" style={{padding:'3px 10px', borderRadius:100, background:s.bg, border:`1px solid ${s.bd}`, color:s.fg, fontSize:11, fontWeight:600, whiteSpace:'nowrap'}}>{s.txt}</span>
    );
  };
  const IconPdf = ()=>(
    <div style={{width:36, height:36, borderRadius:9, background:'#EEF2F7', border:'1px solid #E2E8F0', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
      <span className="f-mono" style={{fontSize:9.5, fontWeight:700, color:'#475569', letterSpacing:'0.5px'}}>PDF</span>
    </div>
  );
  const CheckVerde = ({ p, size=20 })=>(
    <svg width={size} height={size} viewBox="0 0 20 20" style={{transform:`scale(${lerp(0.4,1,Easing.easeOutCubic(p))})`, opacity:clamp(p*1.4,0,1), flexShrink:0}}>
      <circle cx="10" cy="10" r="9" fill="rgba(16,185,129,0.14)" stroke="#10B981" strokeWidth="1.5"/>
      <path d="M6 10.2 L8.8 13 L14 7.4" stroke="#059669" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  const IconAviso = ()=>(
    <div style={{width:38, height:38, borderRadius:10, background:'#FEF2F2', border:'1px solid #FECACA', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
      <svg width="19" height="19" viewBox="0 0 24 24" fill="none">
        <path d="M12 3.5 L21.5 20 H2.5 Z" stroke="#DC2626" strokeWidth="1.8" strokeLinejoin="round"/>
        <path d="M12 10 V14.4" stroke="#DC2626" strokeWidth="1.8" strokeLinecap="round"/>
        <circle cx="12" cy="17" r="1.1" fill="#DC2626"/>
      </svg>
    </div>
  );

  // Estado del primer PDF de la cola
  const row1Estado = t < T.click + 0.3 ? 'pendiente' : (t < T.dni ? 'analizando' : 'extraido');

  return (
    <SlideCanvas variant="light-soft">
      <DemoHeader t={t} eyebrow="NÓMINAS · DIGITALIZACIÓN" title={<span>La <span className="grad-text">cola de digitalización</span></span>}/>

      {/* ===== Ventana del navegador ===== */}
      <div style={{position:'absolute', left:BX, top:BY, width:BW, borderRadius:14, overflow:'hidden', border:'1px solid #D9DEE7', boxShadow:'0 30px 70px rgba(15,23,42,0.14)', background:'#F6F8FB', opacity:winE, transform:`translateY(${(1-winE)*16}px)`, filter:`saturate(${1 - 0.18*dimAvisos - 0.1*dimRemate})`}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes/Nominas/Archivos" title="Dinaup — Nóminas"/>
        <DinaupAppHeader breadcrumb={['Pymes','Nóminas','Archivos']} company="Clínica Sonrisa, S.L." initials="MJ"/>

        <div style={{position:'relative', height:CH, background:'#F6F8FB', opacity:1 - 0.12*dimAvisos - 0.14*dimRemate}}>

          {/* ---- Tabs: Nóminas | Archivos (activo) ---- */}
          <div style={{position:'absolute', left:24, top:12, display:'flex', gap:22}} className="f-plex">
            <span style={{fontSize:13.5, fontWeight:500, color:'#94A3B8', padding:'6px 2px'}}>Nóminas</span>
            <span style={{fontSize:13.5, fontWeight:700, color:'#0085FF', padding:'6px 2px', borderBottom:'2.5px solid #0085FF'}}>Archivos</span>
          </div>

          {/* ================= FASE A — Cola + extracción + matching ================= */}
          {t < T.split + 1.0 && (
            <div style={{position:'absolute', inset:0, opacity:clamp(1-(t-T.split)/0.35, 0, 1)}}>

              {/* --- Panel cola (izquierda) --- */}
              <div style={{position:'absolute', left:24, top:64, width:640, height:452, background:'#fff', borderRadius:14, border:'1px solid #E2E8F0', boxShadow:'0 8px 24px rgba(15,23,42,0.05)'}}>
                <div className="f-plex" style={{position:'absolute', left:20, top:18, fontSize:15.5, fontWeight:700, color:'#0F172A'}}>Cola de digitalización</div>

                {/* Botón Analizar — protagonista en 4.4, pulsado en 4.9 */}
                {t >= T.analizar && (()=>{
                  const bp = clamp((t-T.analizar)/0.5, 0, 1), be = Easing.easeOutBack(bp);
                  const pressed = t >= T.click && t < T.click + 0.3;
                  return (
                    <div className="f-plex" style={{position:'absolute', right:16, top:12, height:36, padding:'0 20px', display:'flex', alignItems:'center', gap:8, borderRadius:10, background:AZUL, color:'#fff', fontSize:13.5, fontWeight:700, boxShadow:'0 8px 20px rgba(0,133,255,0.32)', opacity:clamp(bp*1.3,0,1), transform:`translateY(${(1-be)*-32}px) scale(${pressed ? 0.93 : lerp(0.7,1,be)})`}}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 3 L13.8 8.6 L19.5 9 L15 12.6 L16.6 18.2 L12 15 L7.4 18.2 L9 12.6 L4.5 9 L10.2 8.6 Z" fill="#fff"/></svg>
                      Analizar
                    </div>
                  );
                })()}

                {/* Cola vacía (0.0 → 2.0) */}
                {t < T.pdfs + 0.5 && (
                  <div style={{position:'absolute', left:20, top:64, right:20, bottom:20, border:'1.5px dashed #CBD5E1', borderRadius:12, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:10, opacity:Math.min(clamp((t-0.5)/0.5,0,1), clamp((T.pdfs+0.4-t)/0.4,0,1))}}>
                    <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M4 13 H8 L10 16 H14 L16 13 H20 M4 13 V18 C4 19 5 20 6 20 H18 C19 20 20 19 20 18 V13 M4 13 L6.5 5.8 C6.7 5.3 7.2 5 7.7 5 H16.3 C16.8 5 17.3 5.3 17.5 5.8 L20 13" stroke="#94A3B8" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    <span className="f-mono" style={{fontSize:12, fontWeight:600, letterSpacing:'2px', color:'#94A3B8'}}>COLA VACÍA</span>
                  </div>
                )}

                {/* PDFs cayendo en cascada (2.0) */}
                {DOCS.map((d,i)=>{
                  const dp = clamp((t-(T.pdfs+i*0.16))/0.55, 0, 1), de = Easing.easeOutCubic(dp);
                  if (dp <= 0) return null;
                  const isRow1 = i === 0;
                  const scanning = isRow1 && t >= T.scan && t < T.dni;
                  return (
                    <div key={i} style={{position:'absolute', left:16, top:58 + i*70, width:608, height:60, background: scanning ? 'rgba(0,133,255,0.045)' : '#fff', border:`1px solid ${scanning ? 'rgba(0,133,255,0.35)' : '#EDF1F6'}`, borderRadius:12, display:'flex', alignItems:'center', gap:12, padding:'0 14px', boxShadow:'0 3px 10px rgba(15,23,42,0.04)', opacity:clamp(dp*1.3,0,1), transform:`translateY(${(1-de)*-26}px)`}}>
                      <IconPdf/>
                      <div style={{flex:1, minWidth:0}}>
                        <div className="f-mono" style={{fontSize:12.5, fontWeight:600, color:'#0F172A', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{d.name}</div>
                        <div className="f-mono" style={{fontSize:10, color:'#94A3B8', marginTop:2}}>{d.size}</div>
                      </div>
                      <ChipEstado kind={isRow1 ? row1Estado : 'pendiente'}/>
                    </div>
                  );
                })}

                {/* ScanLine sobre el primer PDF (6.3 → 7.9) */}
                {scanP > 0 && scanP < 1 && (
                  <div style={{position:'absolute', left:16, top:58, width:608, height:60, borderRadius:12, overflow:'hidden', pointerEvents:'none'}}>
                    <ScanLine y={0} height={60} progress={scanP} width={608}/>
                  </div>
                )}
              </div>

              {/* --- Panel extracción (derecha) --- */}
              {t >= T.dni - 0.3 && (()=>{
                const cardP = clamp((t-(T.dni-0.3))/0.5, 0, 1), cardE = Easing.easeOutCubic(cardP);
                const dniP = clamp((t-T.dni)/0.5, 0, 1), dniE = Easing.easeOutBack(dniP);
                const perP = clamp((t-T.periodo)/0.45, 0, 1), perE = Easing.easeOutCubic(perP);
                const catP = clamp((t-T.matching)/0.5, 0, 1);
                return (
                  <div style={{position:'absolute', left:688, top:64, width:848, height:452, background:'#fff', borderRadius:14, border:'1px solid #E2E8F0', boxShadow:'0 8px 24px rgba(15,23,42,0.05)', padding:20, opacity:cardE, transform:`translateY(${(1-cardE)*14}px)`}}>
                    <div style={{display:'flex', alignItems:'baseline', gap:12}}>
                      <span className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'2.5px', color:'#0085FF'}}>EXTRAÍDO</span>
                      <span className="f-mono" style={{fontSize:11.5, color:'#94A3B8'}}>nomina_MJ_marzo.pdf</span>
                    </div>

                    {/* DNI + empleada (7.9) — protagonista */}
                    {dniP > 0 && (
                      <div style={{position:'absolute', left:20, top:52, display:'flex', alignItems:'center', gap:14, opacity:clamp(dniP*1.3,0,1), transform:`translateY(${(1-dniE)*-32}px)`}}>
                        <div style={{width:42, height:42, borderRadius:100, background:'linear-gradient(135deg,#0085FF,#56E16A)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:15, fontFamily:"'IBM Plex Sans',sans-serif", boxShadow:'0 6px 16px rgba(0,133,255,0.28)'}}>MJ</div>
                        <div>
                          <div className="f-plex" style={{fontSize:16.5, fontWeight:700, color:'#0F172A', lineHeight:1.15}}>María José</div>
                          <div className="f-mono" style={{fontSize:12, color:'#64748B', marginTop:2}}>DNI 45.678.123-M</div>
                        </div>
                        <CheckVerde p={clamp((t-(T.dni+0.35))/0.35,0,1)}/>
                      </div>
                    )}

                    {/* Periodo (8.8) — secundario */}
                    {perP > 0 && (
                      <div style={{position:'absolute', left:20, top:112, display:'flex', alignItems:'center', gap:12, opacity:perE, transform:`translateY(${(1-perE)*-10}px)`}}>
                        <span className="f-mono" style={{fontSize:9.5, fontWeight:700, letterSpacing:'2px', color:'#94A3B8'}}>PERIODO</span>
                        <span className="f-mono" style={{fontSize:14, fontWeight:700, color:'#0F172A', padding:'4px 12px', background:'#F1F5F9', border:'1px solid #E2E8F0', borderRadius:12}}>Marzo 2026</span>
                        <CheckVerde p={clamp((t-(T.periodo+0.4))/0.35,0,1)} size={18}/>
                      </div>
                    )}

                    {/* Cabecera de columnas de conceptos */}
                    {t >= T.conceptos && (
                      <div style={{position:'absolute', left:20, top:164, right:20, display:'flex', opacity:clamp((t-T.conceptos)/0.4,0,1)}}>
                        <span className="f-mono" style={{fontSize:9.5, fontWeight:700, letterSpacing:'2px', color:'#94A3B8', width:300}}>CONCEPTO</span>
                        <span className="f-mono" style={{fontSize:9.5, fontWeight:700, letterSpacing:'2px', color:'#94A3B8', width:120, textAlign:'right'}}>IMPORTE</span>
                        {catP > 0 && <span className="f-mono" style={{fontSize:9.5, fontWeight:700, letterSpacing:'2px', color:'#059669', marginLeft:'auto', opacity:catP}}>TU CATÁLOGO</span>}
                      </div>
                    )}

                    {/* Conceptos con importe (10.1) + matching (12.4 + i·0.8) */}
                    {CONC.map((c,i)=>{
                      const cp = clamp((t-(T.conceptos+i*0.18))/0.5, 0, 1), ce = Easing.easeOutCubic(cp);
                      if (cp <= 0) return null;
                      const mt = 12.4 + i*0.8;
                      const conP  = clamp((t-mt)/0.35, 0, 1);                    // conector se dibuja
                      const pillP = clamp((t-(mt+0.18))/0.4, 0, 1), pillE = Easing.easeOutBack(pillP);
                      const chkP  = clamp((t-(mt+0.42))/0.35, 0, 1);
                      return (
                        <div key={i} style={{position:'absolute', left:20, top:188 + i*56, right:20, height:48, display:'flex', alignItems:'center', borderBottom:'1px solid #F1F5F9', opacity:clamp(cp*1.3,0,1), transform:`translateY(${(1-ce)*-12}px)`}}>
                          <span className="f-plex" style={{fontSize:14.5, fontWeight:600, color:'#0F172A', width:300}}>{c.n}</span>
                          <span className="f-mono" style={{fontSize:14.5, fontWeight:700, color:'#0F172A', width:120, textAlign:'right'}}>{c.imp}</span>
                          {/* Conector que se DIBUJA hacia el catálogo */}
                          <svg width="84" height="10" style={{margin:'0 12px 0 20px', flexShrink:0}}>
                            <line x1="0" y1="5" x2="82" y2="5" stroke="#A7F3D0" strokeWidth="2" strokeDasharray="84" strokeDashoffset={84*(1-Easing.easeOutCubic(conP))} strokeLinecap="round"/>
                          </svg>
                          {pillP > 0 && (
                            <span className="f-plex" style={{padding:'5px 14px', borderRadius:12, background:c.grad, color:'#fff', fontSize:12, fontWeight:700, boxShadow:`0 6px 14px ${c.sh}`, whiteSpace:'nowrap', opacity:clamp(pillP*1.3,0,1), transform:`scale(${lerp(0.6,1,pillE)})`}}>{c.nat}</span>
                          )}
                          <div style={{marginLeft:'auto'}}><CheckVerde p={chkP}/></div>
                        </div>
                      );
                    })}
                  </div>
                );
              })()}
            </div>
          )}

          {/* ================= FASE B — Split PDF | editor (cortina 0.9s en 16.2) ================= */}
          {splitP > 0 && (
            <div style={{position:'absolute', left:0, top:52, right:0, bottom:0, background:'#F6F8FB', clipPath:`inset(0 ${(1-splitE)*100}% 0 0)`}}>

              {/* --- PDF original (izquierda) --- */}
              <div style={{position:'absolute', left:24, top:12, width:710, height:472, background:'#E8EDF4', borderRadius:12, border:'1px solid #DDE3EC', overflow:'hidden'}}>
                <div className="f-mono" style={{position:'absolute', left:16, top:12, fontSize:11, color:'#64748B'}}>nomina_MJ_marzo.pdf</div>
                {/* Página */}
                <div style={{position:'absolute', left:75, top:40, width:560, height:420, background:'#fff', borderRadius:6, boxShadow:'0 14px 34px rgba(15,23,42,0.14)', padding:'22px 28px'}}>
                  <div className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'1.5px', color:'#64748B'}}>NÓMINA · MARZO 2026</div>
                  <div style={{height:1, background:'#E2E8F0', margin:'12px 0 14px'}}/>
                  {/* Bloque empresa/empleada (abstracción en barras) */}
                  <div style={{display:'flex', gap:30}}>
                    <div>
                      <div style={{width:150, height:9, borderRadius:4, background:'#E2E8F0'}}/>
                      <div style={{width:110, height:9, borderRadius:4, background:'#EDF1F6', marginTop:7}}/>
                    </div>
                    <div>
                      <div className="f-plex" style={{fontSize:12.5, fontWeight:700, color:'#334155'}}>María José</div>
                      <div className="f-mono" style={{fontSize:10.5, color:'#94A3B8', marginTop:3}}>45.678.123-M</div>
                    </div>
                  </div>
                  <div style={{height:1, background:'#E2E8F0', margin:'16px 0 10px'}}/>
                  <div style={{display:'flex', justifyContent:'space-between'}}>
                    <span className="f-mono" style={{fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#94A3B8'}}>CONCEPTO</span>
                    <span className="f-mono" style={{fontSize:9, fontWeight:700, letterSpacing:'1.5px', color:'#94A3B8'}}>IMPORTE</span>
                  </div>
                  {['Salario base','Plus de transporte','Retención IRPF','Seg. Social trabajador','Plus de idiomas'].map((n,i)=>{
                    const esHueco = i === 4 && huecoP > 0 && resolP < 1;
                    return (
                      <div key={i} style={{display:'flex', alignItems:'center', justifyContent:'space-between', height:38, marginTop:6, padding:'0 10px', borderRadius:8, background: esHueco ? '#FFF7ED' : 'transparent', border: esHueco ? '1.5px solid #FDBA74' : '1.5px solid transparent'}}>
                        <span className="f-plex" style={{fontSize:12.5, fontWeight:600, color: esHueco ? '#C2410C' : '#334155'}}>{n}</span>
                        <div style={{width:[86,62,58,64,68][i], height:8, borderRadius:4, background: esHueco ? '#FED7AA' : '#E9EDF3'}}/>
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* --- Editor (derecha) --- */}
              <div style={{position:'absolute', left:758, top:12, width:778, height:472, background:'#fff', borderRadius:12, border:'1px solid #E2E8F0', boxShadow:'0 8px 24px rgba(15,23,42,0.05)', padding:16}}>
                <div style={{display:'flex', alignItems:'center', gap:12, height:36}}>
                  <span className="f-plex" style={{fontSize:15.5, fontWeight:700, color:'#0F172A'}}>Líneas de la nómina</span>
                  <span className="f-mono" style={{fontSize:11, color:'#94A3B8'}}>María José · Marzo 2026</span>
                </div>

                {/* 4 líneas ya casadas */}
                {CONC.map((c,i)=>{
                  const ep = clamp((t-(16.9+i*0.13))/0.5, 0, 1), ee = Easing.easeOutCubic(ep);
                  if (ep <= 0) return null;
                  return (
                    <div key={i} style={{position:'absolute', left:16, top:62 + i*74, width:746, height:64, background:'#FBFCFE', border:'1px solid #EDF1F6', borderRadius:12, display:'flex', alignItems:'center', gap:14, padding:'0 16px', opacity:clamp(ep*1.3,0,1), transform:`translateY(${(1-ee)*-12}px)`}}>
                      <span className="f-plex" style={{fontSize:14.5, fontWeight:600, color:'#0F172A', width:280}}>{c.n}</span>
                      <span className="f-mono" style={{fontSize:15, fontWeight:700, color:'#0F172A', width:110, textAlign:'right'}}>{c.imp}</span>
                      <span className="f-plex" style={{marginLeft:18, padding:'5px 14px', borderRadius:12, background:c.grad, color:'#fff', fontSize:12, fontWeight:700, boxShadow:`0 6px 14px ${c.sh}`}}>{c.nat}</span>
                      <div style={{marginLeft:'auto'}}><CheckVerde p={clamp((t-(17.1+i*0.13))/0.4,0,1)}/></div>
                    </div>
                  );
                })}

                {/* Línea 5 — "Plus de idiomas": hueco naranja (19.3) → resuelta (25.7) */}
                {(()=>{
                  const ep = clamp((t-(16.9+4*0.13))/0.5, 0, 1), ee = Easing.easeOutCubic(ep);
                  if (ep <= 0) return null;
                  const enHueco = huecoP > 0 && resolP <= 0;
                  const bg  = resolP > 0 ? '#FBFCFE' : (enHueco ? '#FFF7ED' : '#FBFCFE');
                  const bd  = resolP > 0 ? '1.5px solid rgba(16,185,129,0.4)' : (enHueco ? '1.5px solid #FDBA74' : '1px solid #EDF1F6');
                  return (
                    <div style={{position:'absolute', left:16, top:62 + 4*74, width:746, height:64, background:bg, border:bd, borderRadius:12, display:'flex', alignItems:'center', gap:14, padding:'0 16px', opacity:clamp(ep*1.3,0,1), transform:`translateY(${(1-ee)*-12}px) scale(${enHueco ? lerp(0.96,1,huecoE) : 1})`, boxShadow: enHueco ? '0 10px 26px rgba(251,140,0,0.16)' : 'none'}}>
                      <span className="f-plex" style={{fontSize:14.5, fontWeight:600, color: enHueco ? '#C2410C' : '#0F172A', width:280}}>Plus de idiomas</span>
                      <span className="f-mono" style={{fontSize:15, fontWeight:700, color:'#94A3B8', width:110, textAlign:'right'}}>···</span>
                      {/* Chip hueco "Sin match" → chip Devengo al resolverse (crossfade 0.4s) */}
                      {huecoP > 0 && creadoFade < 1 && (
                        <span className="f-plex" style={{marginLeft:18, padding:'5px 14px', borderRadius:12, background:'#FFF7ED', border:'1.5px solid #FDBA74', color:'#C2410C', fontSize:12, fontWeight:700, opacity:Math.min(clamp(huecoP*1.3,0,1), 1-creadoFade), transform:`scale(${lerp(0.6,1,huecoE)})`}}>Sin match</span>
                      )}
                      {resolP > 0 && (
                        <span className="f-plex" style={{marginLeft:18, padding:'5px 14px', borderRadius:12, background:VERDE, color:'#fff', fontSize:12, fontWeight:700, boxShadow:'0 6px 14px rgba(16,185,129,0.28)', opacity:clamp(resolP*1.3,0,1), transform:`scale(${lerp(0.6,1,Easing.easeOutBack(resolP))})`}}>Devengo</span>
                      )}
                      {resolP > 0 && <div style={{marginLeft:'auto'}}><CheckVerde p={resolP}/></div>}
                      {/* Botón + (20.7), pulsado en 21.4, se funde al resolver (25.3→25.7) */}
                      {t >= T.boton && creadoFade < 1 && (()=>{
                        const bp = clamp((t-T.boton)/0.5, 0, 1), be = Easing.easeOutBack(bp);
                        const pressed = t >= T.clickMas && t < T.clickMas + 0.3;
                        return (
                          <div style={{marginLeft:'auto', width:38, height:38, borderRadius:100, background:AZUL, boxShadow:'0 8px 20px rgba(0,133,255,0.34)', display:'flex', alignItems:'center', justifyContent:'center', opacity:Math.min(clamp(bp*1.3,0,1), 1-creadoFade), transform:`scale(${pressed ? 0.9 : lerp(0.5,1,be)})`}}>
                            <svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 2.5 V13.5 M2.5 8 H13.5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/></svg>
                          </div>
                        );
                      })()}
                    </div>
                  );
                })()}
              </div>

              {/* --- Mini-form: crea el tipo de concepto sin salir (22.1 → 26.5) --- */}
              {t >= T.form && t < 26.5 && (()=>{
                const fp = clamp((t-T.form)/0.5, 0, 1), fe = Easing.easeOutBack(fp);
                const fadeOut = clamp((26.5-t)/0.3, 0, 1);
                const natP = clamp((t-T.natur)/0.5, 0, 1), natE = Easing.easeOutBack(natP);
                const creado = t >= T.creado;
                return (
                  <div style={{position:'absolute', left:840, top:130, width:470, background:'#fff', borderRadius:16, border:'1px solid #E2E8F0', boxShadow:'0 30px 70px rgba(15,23,42,0.22)', padding:'20px 22px', zIndex:35, opacity:Math.min(clamp(fp*1.3,0,1), fadeOut), transform:`translateY(${(1-fe)*18}px) scale(${lerp(0.92,1,fe)})`}}>
                    <div className="f-plex" style={{fontSize:16, fontWeight:700, color:'#0F172A'}}>Nuevo tipo de concepto</div>
                    <div className="f-mono" style={{fontSize:9.5, fontWeight:700, letterSpacing:'2px', color:'#94A3B8', marginTop:16}}>NOMBRE</div>
                    <div style={{marginTop:6, border:'1px solid #E2E8F0', borderRadius:10, padding:'9px 14px', background:'#FBFCFE'}}>
                      <Typewriter text="Plus de idiomas" start={T.form+0.3} cps={26} t={t} style={{fontFamily:"'IBM Plex Sans',sans-serif", fontSize:14.5, fontWeight:600, color:'#0F172A'}}/>
                    </div>
                    <div className="f-mono" style={{fontSize:9.5, fontWeight:700, letterSpacing:'2px', color:'#94A3B8', marginTop:14}}>NATURALEZA</div>
                    <div style={{display:'flex', gap:8, marginTop:8, flexWrap:'wrap'}}>
                      {/* Devengo — premarcado por la IA (23.9), protagonista */}
                      {natP > 0 ? (
                        <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:6, padding:'6px 14px', borderRadius:12, background:VERDE, color:'#fff', fontSize:12.5, fontWeight:700, boxShadow:'0 8px 18px rgba(16,185,129,0.32)', opacity:clamp(natP*1.3,0,1), transform:`translateY(${(1-natE)*-30}px) scale(${lerp(0.7,1,natE)})`}}>
                          <svg width="12" height="12" viewBox="0 0 20 20"><path d="M4 10.5 L8.2 14.5 L16 6" stroke="#fff" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                          Devengo
                        </span>
                      ) : (
                        <span className="f-plex" style={{padding:'6px 14px', borderRadius:12, border:'1px solid #E2E8F0', color:'#64748B', fontSize:12.5, fontWeight:600}}>Devengo</span>
                      )}
                      {['Deducción','Retención','Coste de empresa'].map((n,i)=>(
                        <span key={i} className="f-plex" style={{padding:'6px 14px', borderRadius:12, border:'1px solid #E2E8F0', color:'#94A3B8', fontSize:12.5, fontWeight:600, opacity: natP > 0 ? 0.55 : 1}}>{n}</span>
                      ))}
                    </div>
                    <div style={{display:'flex', justifyContent:'flex-end', marginTop:18}}>
                      {creado ? (
                        <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:8, padding:'8px 20px', borderRadius:10, background:VERDE, color:'#fff', fontSize:13.5, fontWeight:700, boxShadow:'0 8px 18px rgba(16,185,129,0.3)', transform:`scale(${lerp(0.85,1,Easing.easeOutBack(clamp((t-T.creado)/0.4,0,1)))})`}}>
                          <svg width="13" height="13" viewBox="0 0 20 20"><path d="M4 10.5 L8.2 14.5 L16 6" stroke="#fff" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                          Creado
                        </span>
                      ) : (
                        <span className="f-plex" style={{padding:'8px 22px', borderRadius:10, background:AZUL, color:'#fff', fontSize:13.5, fontWeight:700, boxShadow:'0 8px 18px rgba(0,133,255,0.3)'}}>Crear</span>
                      )}
                    </div>
                  </div>
                );
              })()}

              {/* --- Avisos de la IA (26.5 y 28.1), badge pulsa UNA vez (29.4) --- */}
              {[
                { st:T.aviso1, titulo:'No parece una nómina',    file:'adjunto_02.pdf' },
                { st:T.aviso2, titulo:'2 trabajadores en el PDF', file:'nominas_lote.pdf' },
              ].map((a,i)=>{
                const ap = clamp((t-a.st)/0.55, 0, 1), ae = Easing.easeOutCubic(ap);
                if (ap <= 0) return null;
                return (
                  <div key={i} style={{position:'absolute', left:1146, top:24 + i*110, width:390, background:'#fff', borderRadius:14, border:'1px solid #FECACA', boxShadow:'0 18px 44px rgba(239,68,68,0.14)', padding:'16px 18px', display:'flex', alignItems:'center', gap:14, zIndex:40, opacity:clamp(ap*1.3,0,1), transform:`translateX(${(1-ae)*36}px)`}}>
                    <IconAviso/>
                    <div style={{flex:1, minWidth:0}}>
                      <div className="f-plex" style={{fontSize:14.5, fontWeight:700, color:'#0F172A', lineHeight:1.2}}>{a.titulo}</div>
                      <div className="f-mono" style={{fontSize:10.5, color:'#94A3B8', marginTop:3}}>{a.file}</div>
                    </div>
                    <span style={{display:'inline-block', transform:`scale(${pulso})`}}>
                      <StatusChip label="Revisar" color="danger" start={a.st+0.25} t={t} icon="!"/>
                    </span>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      {/* ===== Remate (31.6): nada se guarda sin revisión ===== */}
      {remP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:892, textAlign:'center', opacity:remE, transform:`translateY(${(1-remE)*14}px)`}}>
          <div className="f-plex" style={{fontSize:34, fontWeight:800, letterSpacing:'-0.025em', color:'#0F172A'}}>
            Nada se guarda <span style={{color:'#0085FF'}}>sin tu revisión.</span>
          </div>
        </div>
      )}

      {/* ===== Cue de salida (34.0): anticipación del clímax — el asiento ===== */}
      {cueP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:972, textAlign:'center', opacity:clamp(cueP*1.3,0,1), transform:`scale(${lerp(0.8,1,cueE)})`}}>
          <span style={{display:'inline-flex', alignItems:'center', gap:10, padding:'10px 24px', background:'#fff', border:'1.5px solid rgba(0,133,255,0.35)', borderRadius:100, boxShadow:'0 12px 30px rgba(0,133,255,0.16)'}}>
            <span className="f-mono" style={{fontSize:13, fontWeight:700, letterSpacing:'2.5px', color:'#0085FF'}}>EL ASIENTO</span>
            <svg width="14" height="16" viewBox="0 0 14 16"><path d="M7 1 V13 M2 9 L7 14 L12 9" stroke="#0085FF" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
        </div>
      )}

      {/* Cursor guionado: Analizar (4.9) y botón + (21.4) */}
      <ScriptedCursor frames={CUR} t={t} clickTimes={[T.click, T.clickMas]}/>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaNO04 });
