// === Escena 03 — "El registro y los totales derivados" ===
// El editor de nómina de María José (marzo): cabecera con 4 campos que resaltan al
// nombrarlos, 5 líneas concepto+importe en cascada con su naturaleza heredada (candados),
// click en Guardar → panel de TOTALES DERIVADOS: 1.650 / 303 / 1.347 / 2.160 y el
// reparto por organismo (TGSS 615 · AEAT 198). Puente: un PDF asoma por la esquina.
// LOCUCIÓN (audio/escena-03.mp3): 45s — ver tabla de beats en plan.md.
function EscenaNO03({ t }){
  const T = {
    entra:0.0,        // "La nómina de María José" → editor entra (BrowserChrome)
    marzo:1.7,        // "Marzo" → periodo en cabecera
    empleado:2.7,     // "Empleado" → campo empleado resalta
    periodo:3.7,      // "periodo" → campos Desde/Hasta resaltan
    tipo:4.5,         // "tipo de nómina" → dropdown tipo
    estado:5.7,       // "y estado" → dropdown estado
    lineas:7.6,       // "concepto e importe" → líneas entran en cascada
    positivo:9.6,     // "En positivo" → badge importes en positivo
    candados:13.4,    // "Nada se decide dos veces" → candados en naturalezas heredadas
    guardar:15.0,     // "Al guardar" → botón Guardar + click
    panel:16.4,       // "deriva los totales" → panel de totales se abre
    devengado:18.6,   // "mil seiscientos cincuenta" → contador 1.650
    retenciones:22.5, // "trescientos tres" → contador 303
    liquido:24.6,     // "mil trescientos cuarenta y siete" → contador 1.347 (verde)
    coste:28.6,       // "dos mil ciento sesenta" → contador 2.160 (azul)
    reparto:30.7,     // "reparto por organismo" → bloque reparto
    tgss:33.7,        // "Seiscientos quince" → chip TGSS 615
    aeat:36.9,        // "ciento noventa y ocho a Hacienda" → chip AEAT 198
    pdf:40.7,         // "en PDF de la gestoría" → mini-PDF asoma (puente)
    salida:42.9,      // "También está resuelto" → salida
  };

  const fmt = (n)=> n.toLocaleString('es-ES') + ' €';

  // Envolvente de resalte de campo: sube en 0.25s y se apaga antes del siguiente beat
  // (beats de cabecera a ~0.9s: nunca hay dos campos a intensidad plena a la vez)
  const hl = (s)=> t < s ? 0 : Math.min(clamp((t-s)/0.25,0,1), clamp((s+0.9-t)/0.35,0,1));

  // Entrada de la ventana (cortina)
  const winP = clamp((t-0.1)/0.9, 0, 1), winE = Easing.easeOutCubic(winP);

  // Naturalezas (colores del contrato del deck)
  const NAT = {
    devengo:  { label:'Devengo',       bg:'linear-gradient(180deg,#34D399,#10B981)', sh:'rgba(16,185,129,0.28)' },
    retencion:{ label:'Retención',     bg:'linear-gradient(180deg,#FBBF6B,#FB8C00)', sh:'rgba(251,140,0,0.28)' },
    coste:    { label:'Coste empresa', bg:'linear-gradient(180deg,#38BDF8,#0085FF)', sh:'rgba(0,133,255,0.28)' },
  };
  const LINEAS = [
    { c:'Salario base',            nat:'devengo',   imp:1500 },
    { c:'Plus de asistencia',      nat:'devengo',   imp:150 },
    { c:'Retención IRPF',          nat:'retencion', imp:198 },
    { c:'Seg. Social trabajador',  nat:'retencion', imp:105 },
    { c:'Seg. Social empresa',     nat:'coste',     imp:510 },
  ];

  // Contadores (arrancan 1.1s antes del beat y ATERRIZAN justo cuando la voz dice el número)
  const vDev  = useCountUp(0, 1650, T.devengado-1.1,   1.1, t);
  const vRet  = useCountUp(0, 303,  T.retenciones-1.1, 1.1, t);
  const vLiq  = useCountUp(0, 1347, T.liquido-1.1,     1.1, t);
  const vCos  = useCountUp(0, 2160, T.coste-1.1,       1.1, t);
  const vTgss = useCountUp(0, 615,  T.tgss-1.1,        1.1, t);
  const vAeat = useCountUp(0, 198,  T.aeat-1.1,        1.1, t);

  // Remates: UN pulse tras aterrizar el dato clave
  const pulseLiq = t >= T.liquido+0.35 ? Math.sin(clamp((t-(T.liquido+0.35))/1.1,0,1)*Math.PI) : 0;
  const pulseCos = t >= T.coste+0.35   ? Math.sin(clamp((t-(T.coste+0.35))/1.1,0,1)*Math.PI)   : 0;

  // Botón Guardar
  const pressed = t >= T.guardar && t < T.guardar+0.3;
  const saved   = t >= T.guardar+0.4;

  // Panel de totales (cortina lateral: el editor se comprime)
  const panelP = clamp((t-T.panel)/1.1, 0, 1);
  const panelW = 560 * Easing.easeInOutCubic(panelP);

  // Salida: la ventana se apaga, el PDF (puente) queda vivo
  const dimP = clamp((t-T.salida)/0.5, 0, 1);

  // PDF puente
  const pdfP = clamp((t-T.pdf)/0.7, 0, 1), pdfE = Easing.easeOutCubic(pdfP);
  const pill1P = clamp((t-(T.pdf+0.15))/0.4, 0, 1);
  const pill2P = clamp((t-T.salida)/0.4, 0, 1), pill2E = Easing.easeOutBack(pill2P);

  // Fila KPI del panel: etiqueta entra 1.2s antes del beat (anticipación)
  const rowIn = (beat)=> Easing.easeOutCubic(clamp((t-(beat-1.2))/0.5, 0, 1));

  const lockSvg = (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none">
      <rect x="5" y="10" width="14" height="10" rx="2.5" fill="#fff" opacity="0.95"/>
      <path d="M8 10 V7 a4 4 0 0 1 8 0 v3" stroke="#fff" strokeWidth="2.6" fill="none"/>
    </svg>
  );
  const orgIcon = (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path d="M4 21 V6 l8-3.5 8 3.5 v15" stroke="#475569" strokeWidth="1.8" strokeLinejoin="round"/>
      <path d="M9.5 21 v-4.5 h5 V21 M8.5 9.5 h.01 M12 9.5 h.01 M15.5 9.5 h.01 M8.5 13 h.01 M12 13 h.01 M15.5 13 h.01" stroke="#475569" strokeWidth="1.8" strokeLinecap="round"/>
    </svg>
  );

  // Estilo de caja de campo de cabecera con resalte
  const fieldBox = (s)=>{
    const h = hl(s);
    return {
      display:'flex', alignItems:'center', gap:10, height:46, padding:'0 14px',
      background:`rgba(0,133,255,${0.05*h})`, borderRadius:10,
      border:`1.5px solid ${h > 0.05 ? '#0085FF' : '#E2E8F0'}`,
      boxShadow:`0 0 0 ${3*h}px rgba(0,133,255,${0.14*h})`,
      transform:`scale(${1+0.02*h})`, transition:'border-color 200ms',
      backgroundColor: h > 0.05 ? undefined : '#FBFCFE',
    };
  };
  const fieldLabel = { fontSize:11, fontWeight:700, letterSpacing:'1.5px', color:'#94A3B8', marginBottom:6 };

  // Pill "Marzo 2026" de la cabecera (beat 1.7)
  const hlMarzo = hl(T.marzo);

  return (
    <SlideCanvas variant="light-soft">
      {/* Todo lo que se apaga en la salida va dentro de este wrapper */}
      <div style={{position:'absolute', inset:0, opacity:lerp(1, 0.42, dimP), filter:`saturate(${lerp(1, 0.55, dimP)})`}}>
        <DemoHeader t={t} eyebrow="PYMES · NÓMINAS" title={<span>Tú registras. Dinaup <span className="grad-text">deriva los totales</span></span>}/>

        {/* Ventana del navegador con el editor */}
        <div style={{position:'absolute', left:80, top:186, width:1760, opacity:clamp(winP*1.3,0,1), transform:`translateY(${(1-winE)*28}px)`}}>
          <div style={{background:'#fff', borderRadius:16, border:'1px solid #E2E8F0', boxShadow:'0 30px 80px rgba(15,23,42,0.10)', overflow:'hidden'}}>
            <BrowserChrome url="play.dinaup.com/App/Pymes/Payroll" title="Nóminas — Dinaup"/>
            <DinaupAppHeader breadcrumb={['Pymes','Nóminas']} company="Clínica Sonrisa, S.L." initials="MJ"/>

            {/* Cuerpo: editor (se comprime) + panel de totales (cortina) */}
            <div style={{display:'flex', height:590, position:'relative'}}>

              {/* ==================== EDITOR ==================== */}
              <div style={{flex:1, minWidth:0, padding:'22px 44px 20px 44px', display:'flex', flexDirection:'column'}}>
                {/* Título con el periodo (beat 1.7) */}
                <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:16}}>
                  <div className="f-plex" style={{fontSize:24, fontWeight:800, color:'#0F172A', letterSpacing:'-0.02em'}}>Nómina</div>
                  <span className="f-mono" style={{
                    fontSize:14, fontWeight:700, padding:'4px 12px', borderRadius:8,
                    color: hlMarzo > 0.05 ? '#0066CC' : '#475569',
                    background: hlMarzo > 0.05 ? '#DBEAFE' : '#F1F5F9',
                    border:`1px solid ${hlMarzo > 0.05 ? '#93C5FD' : '#E2E8F0'}`,
                    transform:`scale(${1+0.05*hlMarzo})`,
                  }}>Marzo 2026</span>
                </div>

                {/* Cabecera: Empleado · Desde · Hasta · Tipo · Estado (1060 + 4×12 = 1108 ≤ ancho del editor comprimido) */}
                <div style={{display:'flex', gap:12, marginBottom:22}}>
                  <div style={{width:310}}>
                    <div className="f-mono" style={fieldLabel}>EMPLEADO</div>
                    <div style={fieldBox(T.empleado)}>
                      <div style={{width:26, height:26, borderRadius:100, background:'linear-gradient(135deg,#0085FF,#56E16A)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:700, fontFamily:"'IBM Plex Sans',sans-serif", flexShrink:0}}>MJ</div>
                      <span className="f-plex" style={{fontSize:16, fontWeight:600, color:'#0F172A', whiteSpace:'nowrap'}}>María José García</span>
                      <span style={{marginLeft:'auto', color:'#CBD5E1', fontSize:12}}>▾</span>
                    </div>
                  </div>
                  <div style={{width:180}}>
                    <div className="f-mono" style={fieldLabel}>DESDE</div>
                    <div style={fieldBox(T.periodo)}>
                      <span className="f-mono" style={{fontSize:15, fontWeight:600, color:'#0F172A'}}>01/03/2026</span>
                    </div>
                  </div>
                  <div style={{width:180}}>
                    <div className="f-mono" style={fieldLabel}>HASTA</div>
                    <div style={fieldBox(T.periodo)}>
                      <span className="f-mono" style={{fontSize:15, fontWeight:600, color:'#0F172A'}}>31/03/2026</span>
                    </div>
                  </div>
                  <div style={{width:190}}>
                    <div className="f-mono" style={fieldLabel}>TIPO</div>
                    <div style={fieldBox(T.tipo)}>
                      <span className="f-plex" style={{fontSize:15, fontWeight:600, color:'#0F172A'}}>Mensual</span>
                      <span style={{marginLeft:'auto', color:'#CBD5E1', fontSize:12}}>▾</span>
                    </div>
                  </div>
                  <div style={{width:200}}>
                    <div className="f-mono" style={fieldLabel}>ESTADO</div>
                    <div style={fieldBox(T.estado)}>
                      <span style={{display:'inline-flex', alignItems:'center', gap:6, padding:'3px 10px', borderRadius:100, background:'rgba(245,158,11,0.12)', border:'1px solid rgba(245,158,11,0.3)'}}>
                        <span style={{width:6, height:6, borderRadius:100, background:'#F59E0B'}}/>
                        <span className="f-plex" style={{fontSize:13, fontWeight:600, color:'#D97706'}}>Pendiente</span>
                      </span>
                      <span style={{marginLeft:'auto', color:'#CBD5E1', fontSize:12}}>▾</span>
                    </div>
                  </div>
                </div>

                {/* Cabecera del grid + badge "importes en positivo" (beat 9.6) */}
                <div className="f-mono" style={{display:'flex', alignItems:'center', height:30, marginBottom:8, padding:'0 18px', fontSize:11, fontWeight:700, letterSpacing:'2px', color:'#94A3B8'}}>
                  <span style={{width:520}}>CONCEPTO</span>
                  <span style={{width:300}}>NATURALEZA</span>
                  <span style={{flex:1, display:'flex', justifyContent:'flex-end', paddingRight:18}}>
                    {t >= T.positivo && <StatusChip label="Importes en positivo" color="success" icon="+" start={T.positivo} t={t}/>}
                  </span>
                  <span style={{width:170, textAlign:'right'}}>IMPORTE</span>
                </div>

                {/* Grid de líneas (altura fija: el footer no salta) */}
                <div style={{position:'relative', height:292}}>
                  {/* Estado vacío antes de la cascada */}
                  <div style={{position:'absolute', inset:0, border:'1.5px dashed #E2E8F0', borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center', opacity:(1-clamp((t-(T.lineas-0.3))/0.3,0,1))*0.9}}>
                    <span className="f-mono" style={{fontSize:13, color:'#CBD5E1', letterSpacing:'1px'}}>conceptos de la nómina</span>
                  </div>

                  {LINEAS.map((l,i)=>{
                    const lp = clamp((t-(T.lineas+i*0.3))/0.55, 0, 1), le = Easing.easeOutCubic(lp);
                    if (lp <= 0) return null;
                    const n = NAT[l.nat];
                    const lockP = clamp((t-(T.candados+i*0.12))/0.35, 0, 1), lockE = Easing.easeOutCubic(lockP); // sin rebote: son secundarios en cascada
                    return (
                      <div key={i} style={{position:'absolute', left:0, right:0, top:i*60, height:52, display:'flex', alignItems:'center', padding:'0 18px', background:'#fff', border:'1px solid #EEF2F7', borderRadius:12, boxShadow:'0 2px 8px rgba(15,23,42,0.03)', opacity:clamp(lp*1.3,0,1), transform:`translateY(${(1-le)*14}px)`}}>
                        <span className="f-plex" style={{width:520, fontSize:17, fontWeight:600, color:'#0F172A'}}>{l.c}</span>
                        <span style={{width:300}}>
                          <span style={{display:'inline-flex', alignItems:'center', gap:7, padding:'5px 12px', borderRadius:12, background:n.bg, boxShadow:`0 6px 14px ${n.sh}`}}>
                            <span className="f-plex" style={{fontSize:12.5, fontWeight:700, color:'#fff', letterSpacing:'0.3px'}}>{n.label}</span>
                            {lockP > 0 && (
                              <span style={{display:'inline-flex', transform:`scale(${lerp(0.3,1,lockE)})`, opacity:clamp(lockP*1.3,0,1)}}>{lockSvg}</span>
                            )}
                          </span>
                        </span>
                        <span style={{flex:1}}/>
                        <span className="f-mono" style={{width:170, textAlign:'right', fontSize:19, fontWeight:700, color:'#0F172A'}}>{fmt(l.imp)}</span>
                      </div>
                    );
                  })}
                </div>

                {/* Footer: botón Guardar (click 15.0, centro ≈ 1721,852 en canvas) */}
                <div style={{display:'flex', justifyContent:'flex-end', marginTop:16}}>
                  <div className="f-plex" style={{
                    display:'inline-flex', alignItems:'center', gap:10, height:46, padding:'0 30px', borderRadius:12,
                    background: saved ? 'linear-gradient(180deg,#34D399,#10B981)' : pressed ? '#0066CC' : 'linear-gradient(180deg,#0085FF,#0066CC)',
                    boxShadow: pressed ? '0 3px 10px rgba(0,133,255,0.4)' : saved ? '0 10px 26px rgba(16,185,129,0.35)' : '0 10px 26px rgba(0,133,255,0.35)',
                    transform:`translateY(${pressed ? 3 : 0}px)`, transition:'all 140ms',
                    fontSize:17, fontWeight:700, color:'#fff',
                  }}>
                    {saved
                      ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 12 L10 18 L20 6" stroke="#fff" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      : <svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M5 3 H16 L21 8 V19 a2 2 0 0 1-2 2 H5 a2 2 0 0 1-2-2 V5 a2 2 0 0 1 2-2 Z M8 3 V8 H15 V3 M7 21 V14 H17 V21" stroke="#fff" strokeWidth="1.8" strokeLinejoin="round"/></svg>}
                    {saved ? 'Guardado' : 'Guardar'}
                  </div>
                </div>
              </div>

              {/* ==================== PANEL DE TOTALES DERIVADOS ==================== */}
              <div style={{width:panelW, overflow:'hidden', position:'relative', background:'#FBFCFE', borderLeft: panelW > 1 ? '1px solid #E2E8F0' : 'none'}}>
                <div style={{position:'absolute', top:0, right:0, width:560, height:'100%', padding:'24px 30px'}}>
                  {/* Cabecera del panel */}
                  <div style={{display:'flex', alignItems:'baseline', gap:10, marginBottom:16, opacity:panelP}}>
                    <span className="f-mono" style={{fontSize:12, fontWeight:700, letterSpacing:'2.5px', color:'#0085FF'}}>TOTALES DERIVADOS</span>
                    <span className="f-mono" style={{fontSize:10, color:'#94A3B8', letterSpacing:'1px'}}>al guardar</span>
                  </div>

                  {/* Devengado (18.6) */}
                  <div style={{display:'flex', alignItems:'center', height:48, padding:'0 16px', background:'#fff', border:'1px solid #E2E8F0', borderRadius:12, marginBottom:10, opacity:rowIn(T.devengado), transform:`translateY(${(1-rowIn(T.devengado))*10}px)`}}>
                    <span style={{width:9, height:9, borderRadius:100, background:'linear-gradient(180deg,#34D399,#10B981)', marginRight:10}}/>
                    <span className="f-plex" style={{fontSize:16, fontWeight:600, color:'#475569'}}>Devengado</span>
                    <span className="f-mono" style={{marginLeft:'auto', fontSize:25, fontWeight:700, color:'#0F172A'}}>{t >= T.devengado-1.2 ? fmt(vDev) : ''}</span>
                  </div>

                  {/* Retenciones (22.5) */}
                  <div style={{display:'flex', alignItems:'center', height:48, padding:'0 16px', background:'#fff', border:'1px solid #E2E8F0', borderRadius:12, marginBottom:12, opacity:rowIn(T.retenciones), transform:`translateY(${(1-rowIn(T.retenciones))*10}px)`}}>
                    <span style={{width:9, height:9, borderRadius:100, background:'linear-gradient(180deg,#FBBF6B,#FB8C00)', marginRight:10}}/>
                    <span className="f-plex" style={{fontSize:16, fontWeight:600, color:'#475569'}}>Retenciones</span>
                    <span className="f-mono" style={{marginLeft:'auto', fontSize:25, fontWeight:700, color:'#0F172A'}}>{t >= T.retenciones-1.2 ? fmt(vRet) : ''}</span>
                  </div>

                  {/* Líquido a percibir (24.6, verde, protagonista) */}
                  <div style={{display:'flex', alignItems:'center', height:76, padding:'0 18px', background:'#ECFDF5', border:'1.5px solid rgba(16,185,129,0.45)', borderRadius:14, marginBottom:12,
                    boxShadow:`0 ${10+pulseLiq*10}px ${28+pulseLiq*16}px rgba(16,185,129,${0.12+0.16*pulseLiq})`,
                    opacity:rowIn(T.liquido), transform:`translateY(${(1-rowIn(T.liquido))*10}px) scale(${1+0.022*pulseLiq})`}}>
                    <div>
                      <div className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'2px', color:'#059669'}}>LÍQUIDO A PERCIBIR</div>
                      <div className="f-plex" style={{fontSize:13, color:'#64748B', marginTop:2}}>devengos − retenciones</div>
                    </div>
                    <span className="f-mono" style={{marginLeft:'auto', fontSize:36, fontWeight:800, color:'#059669'}}>{t >= T.liquido-1.2 ? fmt(vLiq) : ''}</span>
                  </div>

                  {/* Coste de empresa (28.6, azul) */}
                  <div style={{display:'flex', alignItems:'center', height:76, padding:'0 18px', background:'rgba(0,133,255,0.06)', border:'1.5px solid rgba(0,133,255,0.35)', borderRadius:14, marginBottom:14,
                    boxShadow:`0 ${10+pulseCos*10}px ${28+pulseCos*16}px rgba(0,133,255,${0.10+0.16*pulseCos})`,
                    opacity:rowIn(T.coste), transform:`translateY(${(1-rowIn(T.coste))*10}px) scale(${1+0.022*pulseCos})`}}>
                    <div>
                      <div className="f-mono" style={{fontSize:10, fontWeight:700, letterSpacing:'2px', color:'#0085FF'}}>COSTE DE EMPRESA</div>
                      <div className="f-plex" style={{fontSize:13, color:'#64748B', marginTop:2}}>devengos + cuota patronal</div>
                    </div>
                    <span className="f-mono" style={{marginLeft:'auto', fontSize:36, fontWeight:800, color:'#0085FF'}}>{t >= T.coste-1.2 ? fmt(vCos) : ''}</span>
                  </div>

                  {/* Reparto por organismo (30.7) */}
                  <div style={{opacity:clamp((t-T.reparto)/0.6,0,1)}}>
                    <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:10}}>
                      <span className="f-mono" style={{fontSize:11, fontWeight:700, letterSpacing:'2.5px', color:'#64748B', whiteSpace:'nowrap'}}>REPARTO POR ORGANISMO</span>
                      <span style={{flex:1, height:1, background:'#E2E8F0', transform:`scaleX(${Easing.easeOutCubic(clamp((t-T.reparto)/0.8,0,1))})`, transformOrigin:'left'}}/>
                    </div>

                    {/* TGSS (33.7) */}
                    <div style={{display:'flex', alignItems:'center', gap:12, height:58, padding:'0 14px', background:'#fff', border:'1px solid #E2E8F0', borderRadius:12, marginBottom:10, opacity:rowIn(T.tgss), transform:`translateY(${(1-rowIn(T.tgss))*10}px)`}}>
                      <div style={{width:34, height:34, borderRadius:8, background:'#F1F5F9', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>{orgIcon}</div>
                      <div>
                        <div className="f-plex" style={{fontSize:15, fontWeight:700, color:'#0F172A'}}>Seguridad Social</div>
                        <div className="f-mono" style={{fontSize:11, color:'#94A3B8'}}>cta. 476 · 105 + 510</div>
                      </div>
                      <span className="f-mono" style={{marginLeft:'auto', fontSize:23, fontWeight:700, color:'#0F172A'}}>{t >= T.tgss-1.2 ? fmt(vTgss) : ''}</span>
                    </div>

                    {/* AEAT (36.9) */}
                    <div style={{display:'flex', alignItems:'center', gap:12, height:58, padding:'0 14px', background:'#fff', border:'1px solid #E2E8F0', borderRadius:12, opacity:rowIn(T.aeat), transform:`translateY(${(1-rowIn(T.aeat))*10}px)`}}>
                      <div style={{width:34, height:34, borderRadius:8, background:'#F1F5F9', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>{orgIcon}</div>
                      <div>
                        <div className="f-plex" style={{fontSize:15, fontWeight:700, color:'#0F172A'}}>Hacienda</div>
                        <div className="f-mono" style={{fontSize:11, color:'#94A3B8'}}>cta. 4751 · IRPF retenido</div>
                      </div>
                      <span className="f-mono" style={{marginLeft:'auto', fontSize:23, fontWeight:700, color:'#0F172A'}}>{t >= T.aeat-1.2 ? fmt(vAeat) : ''}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Caption "Nada se decide dos veces." (13.4 → se disuelve antes del panel) */}
      {t >= T.candados && t < 17.0 && (
        <div style={{opacity:clamp((16.9-t)/0.4,0,1)}}>
          <Caption t={t} start={T.candados}>
            Nada se decide <span style={{fontWeight:700, color:'#0F172A'}}>dos veces</span>.
          </Caption>
        </div>
      )}

      {/* Cursor: entra con fade, pulsa Guardar (15.0) y se retira con fade */}
      {t >= 13.2 && t < 17.7 && (
        <div style={{position:'absolute', inset:0, pointerEvents:'none', opacity:Math.min(clamp((t-13.2)/0.4,0,1), clamp((17.7-t)/0.5,0,1))}}>
          <ScriptedCursor t={t} clickTimes={[T.guardar]} frames={[
            { t:13.5,  x:1560, y:1015, arc:60 },
            { t:14.75, x:1721, y:852 },
            { t:15.7,  x:1721, y:852 },
            { t:16.7,  x:1810, y:1045 },
          ]}/>
        </div>
      )}

      {/* Mini-PDF que asoma por la esquina (40.7, puente a la escena 4) */}
      {pdfP > 0 && (
        <div style={{position:'absolute', left:1580, top:890, width:210, height:280, zIndex:40, transform:`translateY(${(1-pdfE)*180}px) rotate(-7deg)`, opacity:clamp(pdfP*1.5,0,1)}}>
          <div style={{position:'absolute', inset:0, background:'#fff', border:'1px solid #E2E8F0', borderRadius:14, boxShadow:'0 -14px 44px rgba(15,23,42,0.18)', padding:'16px 18px'}}>
            <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:12}}>
              <span className="f-mono" style={{fontSize:10, fontWeight:800, color:'#fff', background:'#334155', borderRadius:6, padding:'3px 7px', letterSpacing:'1px'}}>PDF</span>
              <span className="f-mono" style={{fontSize:10, color:'#64748B'}}>nomina_marzo.pdf</span>
            </div>
            <div style={{height:8, width:'72%', background:'#E2E8F0', borderRadius:100, marginBottom:8}}/>
            <div style={{height:8, width:'88%', background:'#EEF2F7', borderRadius:100, marginBottom:8}}/>
            <div style={{height:8, width:'60%', background:'#EEF2F7', borderRadius:100, marginBottom:14}}/>
            <div style={{border:'1px solid #EEF2F7', borderRadius:8, padding:'8px 10px'}}>
              {[0,1,2,3].map((i)=>(
                <div key={i} style={{display:'flex', justifyContent:'space-between', marginBottom:i<3?7:0}}>
                  <span style={{height:6, width:70, background:'#EEF2F7', borderRadius:100}}/>
                  <span style={{height:6, width:34, background:'#E2E8F0', borderRadius:100}}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Pills del puente: pregunta (40.85) + respuesta (42.9) */}
      {pill1P > 0 && (
        <div style={{position:'absolute', right:370, top:920, zIndex:41, opacity:pill1P, transform:`translateY(${(1-Easing.easeOutCubic(pill1P))*14}px)`}}>
          <span className="f-plex" style={{display:'inline-flex', alignItems:'center', padding:'11px 24px', background:'rgba(15,23,42,0.92)', color:'#fff', borderRadius:100, fontSize:21, fontWeight:700, letterSpacing:'-0.01em', boxShadow:'0 12px 34px rgba(15,23,42,0.3)'}}>
            ¿Y si llegan en PDF?
          </span>
        </div>
      )}
      {pill2P > 0 && (
        <div style={{position:'absolute', right:370, top:978, zIndex:41, opacity:clamp(pill2P*1.3,0,1), transform:`scale(${lerp(0.7,1,pill2E)})`, transformOrigin:'right center'}}>
          <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:8, padding:'9px 20px', background:'#ECFDF5', border:'1px solid #A7F3D0', color:'#059669', borderRadius:100, fontSize:18, fontWeight:800}}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M4 12 L10 18 L20 6" stroke="#059669" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
            También está resuelto
          </span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaNO03 });