// === Escena 04 — "No queda nada" ===  [CLÍMAX, al 62-66 % de la pieza]
// El identificador vacío (Guid.Empty, InlineYudo.razor:84) y los cuatro candados que apaga, uno a
// uno, con la frase literal del prompt en medio (DiaAgentService.Awaken.cs:199-202).
// LA IMAGEN-MOMENTO: la ficha de sesión del propio panel SUSTITUYE al chat, pestaña «Recuerdos»
// (la cuarta) con los siete contadores a cero — cinco dicen «0» y dos dicen «0 B» — y el buscador
// «Buscar en los recuerdos...» debajo. Después la ventana se cierra y solo queda el gasto:
// la mini-barra del header avanza y su ayuda es un title nativo del navegador.
function EscenaYV04({ t }){
  // LOCUCIÓN (audio/escena-04.mp3): nace sin identificador → apaga cuatro cosas → memoria →
  // personalidad y recuerdos → «no guardas ni recuperas nada» → la sesión no se guarda → ni
  // habilidades → (pausa) → el propio panel lo enseña: los recuerdos a cero → cierras la ventana →
  // no queda una línea → salvo una cosa: el precio.
  const T = {
    nace:0.8,        // "nace sin identificador" → el identificador, vacío, en mono
    cuatro:3.9,      // "apaga cuatro cosas a la vez" → cuatro candados en fila, todavía cerrados
    c1:6.4,          // "No se crean las herramientas de memoria" → candado 1 se apaga
    c2:10.4,         // "no le inyectan ni personalidad ni recuerdos" → candado 2 se apaga
    frase:12.8,      // "y le escriben una frase" → la cita del prompt entra, grande y sola
    literal:16.1,    // "no guardas ni recuperas nada" → se subraya esa parte de la cita
    c3:18.5,         // "La sesión no se guarda" → candado 3 se apaga
    c4:20.9,         // "no se carga ninguna habilidad" → candado 4 se apaga
    pausa:23.2,      // (pausa 0.6 s) valle: los cuatro quedan apagados y quietos
    panel:24.0,      // "El propio panel lo enseña" → nos acercamos al panel; dos toques
    cero:25.7,       // "abres su ficha de sesión y los recuerdos están a cero" → EL MOMENTO
    cierra:29.3,     // "Cierras la ventana" → el diálogo se cierra; el panel se va hacia la derecha
    selleva:30.7,    // "y la conversación se va con ella" → las burbujas se desintegran
    nada:33.3,       // "No queda una línea" → una línea se dibuja y se borra sola
    precio:35.3,     // "Salvo una cosa: el precio" → el header y su mini-barra, que avanza un tramo
    posa:36.9,       // (el cursor se posa encima de la mini-barra)
    llamada:38.1,    // "Porque la llamada al proveedor" → sale el title nativo del navegador
    remate:39.9,     // (remate del clímax)
    salida:41.2,     // "Quedan tres detalles de pantalla" → salida
    lockStep:0.13,   // incremento de entrada entre los cuatro candados
    contStep:0.09,   // incremento de la cascada de los siete contadores
    tapDelay:0.55,   // separación entre los dos toques (información de sesión → «Recuerdos»)
  };

  const CANDADOS = [
    { n:'Herramientas de memoria', k:'AITools.Memory.cs', off:T.c1 },
    { n:'Personalidad y recuerdos', k:'DiaAgentService.Awaken.cs', off:T.c2 },
    { n:'Guardar la sesión',        k:'DiaAgentService.ChatHistory.cs', off:T.c3 },
    { n:'Habilidades',              k:'DiaAgentService.Awaken.cs', off:T.c4 },
  ];

  const RECUERDOS = [
    { n:'Skills',        v:'0'   },
    { n:'Conocimiento',  v:'0'   },
    { n:'Diarios',       v:'0'   },
    { n:'Personas',      v:'0'   },
    { n:'Consciente',    v:'0 B' },
    { n:'Chunks',        v:'0'   },
    { n:'Subconsciente', v:'0 B' },
  ];

  // ── Geometría de la ventana y del acercamiento al panel ──
  const WX = 110, WY = 96, WW = 1700, WH = 894;
  const BARRA = 80, CUERPO = 736, PIE = 78, PANEL = 680;
  const IZQ = WW - PANEL;

  // Acto A → aguanta quieto todo el valle y cede el sitio justo cuando llega el panel
  const aOut = clamp((t-T.panel+0.35)/0.55,0,1);
  const naP = clamp((t-T.nace)/0.6,0,1), naE = Easing.easeOutBack(naP);
  const frP = clamp((t-T.frase)/0.6,0,1), frE = Easing.easeOutCubic(frP);
  const liP = clamp((t-T.literal)/0.5,0,1);
  const liGlow = t >= T.literal && t < T.literal+1.5 ? Math.sin((t-T.literal)/1.5*Math.PI) : 0;

  // Acto B → la ventana entra y nos acercamos al panel
  const winP = clamp((t-T.panel)/0.5,0,1), winE = Easing.easeOutCubic(winP);
  const zoom = Easing.easeInOutCubic(clamp((t-T.panel)/0.75,0,1));
  const desZoom = clamp((t-T.cierra)/0.45,0,1);                   // deshace el acercamiento
  const k = zoom * (1-Easing.easeInOutCubic(desZoom));
  const s = lerp(1, 1.42, k);

  const tap1 = T.panel + 0.9, tap2 = tap1 + T.tapDelay;
  const infoP = clamp((t-tap1)/0.3,0,1);                          // la ficha de sesión sustituye al chat
  const tabP  = clamp((t-tap2)/0.3,0,1);                          // y salta a la cuarta pestaña
  const buscP = clamp((t-T.cero-0.7)/0.45,0,1);

  // El cierre de la ventana
  const cierreP = clamp((t-T.cierra-0.35)/1.0,0,1), cierreE = Easing.easeInCubic(cierreP);
  const panelFuera = clamp((t-T.cierra-0.2)/0.8,0,1);
  const burbFuera = clamp((t-T.selleva)/0.7,0,1);
  // La conversación se va con la ventana: las burbujas se desprenden y se disuelven
  const selP = clamp((t-T.selleva)/0.4,0,1);
  const selOut = clamp((t-T.selleva-0.5)/1.2,0,1);

  // «No queda una línea»: una línea que se dibuja y se borra sola
  const lnDraw = Easing.easeInOutCubic(clamp((t-T.nada)/0.55,0,1));
  const lnGone = clamp((t-T.nada-0.95)/0.7,0,1);

  // Acto D · el gasto
  const hdP = clamp((t-T.precio)/0.6,0,1), hdE = Easing.easeOutCubic(hdP);
  const avance = Easing.easeOutCubic(clamp((t-T.precio-0.75)/0.9,0,1));
  const pctVal = lerp(31, 34, avance);
  const tipP = clamp((t-T.llamada-0.4)/0.28,0,1);                 // los title nativos salen tarde y secos
  const reP = clamp((t-T.remate)/0.6,0,1), reE = Easing.easeOutCubic(reP);
  const saP = clamp((t-T.salida)/0.6,0,1), saE = Easing.easeOutCubic(saP);

  const IconBot = ({ s2=26, c='#0085FF' })=>(
    <svg width={s2} height={s2} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8">
      <rect x="3.5" y="8" width="17" height="12" rx="3.4"/>
      <path d="M12 4.6 V8" strokeLinecap="round"/>
      <circle cx="12" cy="3.4" r="1.5" fill={c} stroke="none"/>
      <circle cx="9" cy="13.6" r="1.5" fill={c} stroke="none"/>
      <circle cx="15" cy="13.6" r="1.5" fill={c} stroke="none"/>
      <path d="M1.6 12.6 V15.6 M22.4 12.6 V15.6" strokeLinecap="round"/>
    </svg>
  );

  // ── Un candado ──
  const Candado = ({ c, i })=>{
    const p = clamp((t-T.cuatro-i*T.lockStep)/0.45,0,1), e = Easing.easeOutBack(p);
    const off = clamp((t-c.off)/0.5,0,1);
    const flash = t >= c.off && t < c.off+1.0 ? Math.sin((t-c.off)/1.0*Math.PI) : 0;
    const col = lerp(1,0,off) > 0.5 ? '#334155' : '#94A3B8';
    return (
      <div style={{width:380, height:400, borderRadius:16, padding:'28px 26px', position:'relative',
                   background:lerp(1,0,off) > 0.5 ? '#fff' : '#F4F6F9',
                   border:`1px solid ${0 < off ? '#E2E8F0' : '#DCE4EE'}`,
                   boxShadow:0 < flash ? `0 0 ${flash*36}px rgba(239,68,68,0.30)` : '0 14px 34px rgba(15,23,42,0.07)',
                   opacity:clamp(p*1.3,0,1)*lerp(1,0.72,off),
                   transform:`translateY(${(1-e)*14}px) scale(${lerp(0.94,1,e)})`,
                   display:'flex', flexDirection:'column', gap:20}}>
        <div style={{position:'relative', width:112, height:112}}>
          <svg width="112" height="112" viewBox="0 0 24 24" fill="none" stroke={col} strokeWidth="1.6">
            <rect x="4" y="10.5" width="16" height="11" rx="2.4"/>
            <path d="M7.6 10.5 V7.6 A4.4 4.4 0 0 1 16.4 7.6 V10.5"/>
            <circle cx="12" cy="16" r="1.6" fill={col} stroke="none"/>
          </svg>
          {0 < off && (
            <svg width="112" height="112" viewBox="0 0 24 24" style={{position:'absolute', left:0, top:0}}>
              <path d="M4 20 L20 4" pathLength="100" stroke="#EF4444" strokeWidth="2" fill="none" strokeLinecap="round"
                    strokeDasharray="100" strokeDashoffset={100*(1-off)}/>
            </svg>
          )}
        </div>
        <div className="f-plex" style={{fontSize:29, fontWeight:700, color:0 < off ? '#94A3B8' : '#0F172A', lineHeight:1.2}}>{c.n}</div>
        <div style={{flex:1}}/>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:10}}>
          <span className="f-mono" style={{fontSize:14, color:'#B6C0CD', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{c.k}</span>
          {0.3 < off && (
            <span className="f-plex" style={{fontSize:16, fontWeight:700, color:'#94A3B8', background:'#EEF2F6',
                          borderRadius:99, padding:'3px 12px', opacity:clamp((off-0.3)/0.5,0,1)}}>apagado</span>
          )}
        </div>
      </div>
    );
  };

  const cursorOn = 23.7 < t && t < 28.2;
  const cursor = { frames:[
    { t:23.7, x:1770, y:1010 },
    { t:tap1-0.12, x:1272, y:145 },
    { t:tap2-0.12, x:1302, y:307 },
    { t:tap2+0.55, x:1302, y:307 },
    { t:28.2, x:1800, y:1030 },
  ], clicks:[tap1, tap2] };

  return (
    <SlideCanvas variant="light">
      {/* ═══════ ACTO A · el identificador vacío y los cuatro candados ═══════ */}
      {aOut < 1 && (
        <div style={{position:'absolute', inset:0, opacity:1-aOut, transform:`translateY(${aOut*-22}px)`}}>
          <div className="f-plex" style={{position:'absolute', top:44, left:0, right:0, textAlign:'center',
                                          fontSize:19, fontWeight:700, letterSpacing:'3.4px', color:'#94A3B8'}}>
            EL AGENTE EFÍMERO · QUÉ SE LLEVA CUANDO CIERRAS
          </div>

          {/* El identificador, vacío */}
          <div style={{position:'absolute', left:460, top:126, width:1000, padding:'28px 34px', borderRadius:18,
                       background:'#fff', border:'1px solid #E2E8F0', boxShadow:'0 22px 54px rgba(15,23,42,0.10)',
                       opacity:clamp(naP*1.3,0,1), transform:`scale(${lerp(0.94,1,naE)})`}}>
            <div className="f-plex" style={{fontSize:19, fontWeight:700, letterSpacing:'2.2px', color:'#94A3B8'}}>
              EL IDENTIFICADOR DE ESTE AGENTE
            </div>
            <div style={{display:'flex', alignItems:'center', gap:20, marginTop:14}}>
              <span className="f-mono" style={{fontSize:32, fontWeight:700, color:'#94A3B8', letterSpacing:'-0.01em'}}>
                00000000-0000-0000-0000-000000000000
              </span>
              <span className="f-plex" style={{fontSize:19, fontWeight:700, color:'#B45309', background:'rgba(251,140,0,0.12)',
                            border:'1px solid rgba(251,140,0,0.32)', borderRadius:99, padding:'5px 16px'}}>vacío</span>
            </div>
          </div>

          {/* Los cuatro candados */}
          <div style={{position:'absolute', left:128, top:346, display:'flex', gap:48}}>
            {CANDADOS.map((c,i)=> <Candado key={c.n} c={c} i={i}/>)}
          </div>

          {/* La frase literal del prompt */}
          {0 < frP && (
            <div style={{position:'absolute', left:250, top:794, width:1420, padding:'30px 40px', borderRadius:18,
                         background:'#0F172A', boxShadow:'0 30px 70px rgba(15,23,42,0.34)',
                         opacity:clamp(frP*1.3,0,1), transform:`translateY(${(1-frE)*16}px)`}}>
              <div className="f-plex" style={{fontSize:17, fontWeight:700, letterSpacing:'2.4px', color:'#64748B'}}>
                LO QUE SUS INSTRUCCIONES LE ESCRIBEN
              </div>
              <div className="f-plex" style={{fontSize:40, fontWeight:600, color:'#E2E8F0', lineHeight:1.35, marginTop:16}}>
                «Esta es una sesión puntual:{' '}
                <span style={{position:'relative', display:'inline-block', color:0 < liP ? '#fff' : '#E2E8F0', fontWeight:0 < liP ? 800 : 600}}>
                  <span style={{position:'absolute', left:-8, right:-8, top:2, bottom:2, borderRadius:8,
                                background:'rgba(251,140,0,0.28)', transform:`scaleX(${Easing.easeOutCubic(liP)})`,
                                transformOrigin:'left', boxShadow:0 < liGlow ? `0 0 ${liGlow*34}px rgba(251,140,0,0.6)` : 'none'}}/>
                  <span style={{position:'relative'}}>no guardas ni recuperas nada</span>
                </span>
                {' '}entre conversaciones.»
              </div>
            </div>
          )}
        </div>
      )}

      {/* ═══════ ACTO B · EL MOMENTO: la ficha de sesión, con los recuerdos a cero ═══════ */}
      {0 < winP && cierreP < 1 && (
        <div style={{position:'absolute', left:WX, top:WY, width:WW, height:WH,
                     transformOrigin:'1360px 448px',
                     transform:`translate(${-510*k}px, ${-4*k}px) scale(${s*lerp(1,0.94,cierreE)})`,
                     opacity:winE*(1-cierreE),
                     background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 34px 84px rgba(15,23,42,0.16)', overflow:'hidden'}}>

          {/* Barra de título */}
          <div style={{height:BARRA, display:'flex', alignItems:'center', padding:'0 30px',
                       borderBottom:'1px solid #E8EDF3', background:'#FBFCFE', opacity:lerp(1,0.3,k)}}>
            <span className="f-plex" style={{fontSize:29, fontWeight:700, color:'#0F172A'}}>Editar Entidad</span>
            <div style={{flex:1}}/>
            <IconBot s2={26}/>
            <span className="f-plex" style={{fontSize:23, fontWeight:700, color:'#0F172A', marginLeft:14}}>Yudo</span>
            <div style={{position:'relative', width:56, height:30, borderRadius:99, background:'#0085FF', marginLeft:14}}>
              <div style={{position:'absolute', top:3, left:29, width:24, height:24, borderRadius:99, background:'#fff'}}/>
            </div>
          </div>

          <div style={{display:'flex', height:CUERPO}}>
            {/* La ficha, bajo el velo del clímax */}
            <div style={{width:IZQ, flexShrink:0, padding:'32px 40px', opacity:lerp(1,0.28,k)}}>
              <div style={{display:'flex', alignItems:'center', gap:26, height:62, marginBottom:26}}>
                <div style={{display:'flex', border:'1px solid #D9E1EC', borderRadius:10, overflow:'hidden'}}>
                  <span className="f-plex" style={{padding:'13px 26px', fontSize:22, color:'#94A3B8', background:'#F8FAFC'}}>Personal</span>
                  <span className="f-plex" style={{padding:'13px 26px', fontSize:22, fontWeight:700, color:'#fff', background:'#0085FF'}}>Empresa</span>
                </div>
                <div style={{flex:1}}/>
                <div style={{display:'flex', alignItems:'center', gap:10}}>
                  <div style={{width:46, height:26, borderRadius:99, background:'#10B981', position:'relative'}}>
                    <div style={{position:'absolute', top:3, left:23, width:20, height:20, borderRadius:99, background:'#fff'}}/>
                  </div>
                  <span className="f-plex" style={{fontSize:20, color:'#334155'}}>Es Cliente</span>
                </div>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'26px 34px'}}>
                {[['Razón social','Talleres Marbán, S.L.'],['ID Fiscal','B98314207'],
                  ['Email','compras@talleresmarban.es'],['Teléfono','961 244 180']].map(f=>(
                  <div key={f[0]}>
                    <div className="f-plex" style={{fontSize:21, fontWeight:600, color:'#64748B', marginBottom:9}}>{f[0]}</div>
                    <div style={{height:62, borderRadius:10, border:'1px solid #D9E1EC', background:'#fff',
                                 display:'flex', alignItems:'center', padding:'0 18px'}}>
                      <span className="f-plex" style={{fontSize:26, color:'#0F172A', whiteSpace:'nowrap',
                                    overflow:'hidden', textOverflow:'ellipsis'}}>{f[1]}</span>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{marginTop:26, padding:22, borderRadius:14, border:'1px solid #E8EDF3', background:'#F8FAFC', height:212}}>
                <div className="f-plex" style={{fontSize:19, fontWeight:700, letterSpacing:'1.6px', color:'#64748B', marginBottom:18}}>CONFIGURACIÓN CLIENTE</div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'18px 22px'}}>
                  {[['Tipo Venta','Factura'],['Impuesto','IVA 21 %'],
                    ['Tipo de Cliente','Nacional'],['Cuenta contable (430)','43000012']].map(f=>(
                    <div key={f[0]} style={{minWidth:0}}>
                      <div className="f-plex" style={{fontSize:16, fontWeight:600, color:'#94A3B8', marginBottom:6}}>{f[0]}</div>
                      <div style={{height:46, borderRadius:8, border:'1px solid #D9E1EC', background:'#fff',
                                   display:'flex', alignItems:'center', padding:'0 12px'}}>
                        <span className="f-plex" style={{fontSize:20, color:'#334155', whiteSpace:'nowrap',
                                      overflow:'hidden', textOverflow:'ellipsis'}}>{f[1]}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* El panel */}
            <div style={{width:PANEL, flexShrink:0, borderLeft:'1px solid #E2E8F0', background:'#FCFDFF',
                         display:'flex', flexDirection:'column',
                         transform:`translateX(${panelFuera*220}px)`, opacity:1-panelFuera}}>

              {/* CABECERA 1 */}
              <div style={{height:64, flexShrink:0, display:'flex', alignItems:'center', gap:12, padding:'0 18px',
                           borderBottom:'1px solid #E8EDF3', background:'#fff'}}>
                <IconBot s2={24}/>
                <span className="f-plex" style={{fontSize:25, fontWeight:700, color:'#0F172A'}}>Yudo - Entidad</span>
                <span className="f-mono" style={{fontSize:16, fontWeight:700, color:'#0085FF', padding:'2px 9px',
                              borderRadius:99, background:'rgba(0,133,255,0.12)', border:'1px solid rgba(0,133,255,0.30)'}}>IA</span>
                <div style={{flex:1}}/>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2.1">
                  <path d="M5 5 L19 19 M19 5 L5 19" strokeLinecap="round"/>
                </svg>
              </div>

              {/* CABECERA 2 */}
              <div style={{flexShrink:0, height:98, padding:'12px 18px 14px', borderBottom:'1px solid #E8EDF3', background:'#fff'}}>
                <div style={{display:'flex', alignItems:'center', gap:10}}>
                  <span className="f-plex" style={{fontSize:22, fontWeight:600, color:'#334155'}}>Yudo - Entidad</span>
                  <div style={{flex:1}}/>
                  <span className="f-plex" style={{fontSize:16, color:'#64748B'}}>Historial</span>
                  <span className="f-plex" style={{fontSize:16, fontWeight:0 < infoP ? 700 : 400,
                                color:0 < infoP ? '#0085FF' : '#64748B'}}>Información de sesión</span>
                  <span className="f-plex" style={{fontSize:16, color:'#64748B'}}>Limpiar chat</span>
                </div>
                <div style={{display:'flex', gap:9, marginTop:12}}>
                  {['Rápido','Equilibrado','Razonador'].map(p=>(
                    <span key={p} className="f-plex" style={{padding:'6px 14px', borderRadius:99, fontSize:17,
                                  fontWeight:p === 'Equilibrado' ? 700 : 500,
                                  background:p === 'Equilibrado' ? 'rgba(0,133,255,0.12)' : '#F1F5F9',
                                  border:`1px solid ${p === 'Equilibrado' ? 'rgba(0,133,255,0.35)' : '#E2E8F0'}`,
                                  color:p === 'Equilibrado' ? '#0085FF' : '#94A3B8'}}>{p}</span>
                  ))}
                </div>
              </div>

              {/* CUERPO — la ficha de sesión SUSTITUYE al chat */}
              <div style={{flex:1, minHeight:0, position:'relative', overflow:'hidden'}}>
                {/* La conversación, detrás */}
                <div style={{position:'absolute', inset:0, padding:'16px 18px', display:'flex', flexDirection:'column',
                             gap:14, opacity:(1-infoP)*(1-burbFuera), transform:`translateX(${burbFuera*140}px)`}}>
                  <div style={{alignSelf:'flex-end', maxWidth:480, padding:'13px 17px', borderRadius:'14px 14px 4px 14px', background:'#0085FF'}}>
                    <span className="f-plex" style={{fontSize:20, color:'#fff'}}>Cambia el correo a compras@talleresmarban.es</span>
                  </div>
                  <div style={{alignSelf:'flex-start', maxWidth:480, padding:'13px 17px', borderRadius:'14px 14px 14px 4px',
                               background:'#F1F5F9', border:'1px solid #E2E8F0'}}>
                    <span className="f-plex" style={{fontSize:20, color:'#334155'}}>Hecho. El correo queda en la ficha.</span>
                  </div>
                </div>

                {/* La ficha de sesión */}
                {0 < infoP && (
                  <div style={{position:'absolute', inset:0, background:'#fff', padding:'16px 18px', opacity:infoP}}>
                    {/* La tira de pestañas: la cuarta, activa */}
                    <div style={{display:'flex', borderBottom:'1px solid #E8EDF3'}}>
                      {['Uso','Mensajes','Agente','Recuerdos'].map((tab,i)=>{
                        const act = i === 3 ? 0.5 < tabP : (i === 0 && tabP < 0.5);
                        return (
                          <div key={tab} style={{flex:1, textAlign:'center', paddingBottom:11,
                                       borderBottom:`3px solid ${act ? '#0085FF' : 'transparent'}`, marginBottom:-1}}>
                            <span className="f-plex" style={{fontSize:19, fontWeight:act ? 700 : 500, color:act ? '#0085FF' : '#94A3B8'}}>{tab}</span>
                          </div>
                        );
                      })}
                    </div>

                    {/* Los siete contadores */}
                    {0.5 < tabP && (
                      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:'16px 12px', marginTop:22}}>
                        {RECUERDOS.map((r,i)=>{
                          const p = clamp((t-T.cero-i*T.contStep)/0.4,0,1), e = Easing.easeOutBack(p);
                          return (
                            <div key={r.n} style={{textAlign:'center', padding:'10px 4px', borderRadius:10, background:'#F8FAFC',
                                         border:'1px solid #EEF2F6', opacity:clamp(p*1.3,0,1),
                                         transform:`translateY(${(1-e)*10}px) scale(${lerp(0.9,1,e)})`}}>
                              <div className="f-mono" style={{fontSize:46, fontWeight:700, color:'#0F172A', lineHeight:1.1}}>{r.v}</div>
                              <div className="f-plex" style={{fontSize:13, fontWeight:700, letterSpacing:'1.4px',
                                           color:'#94A3B8', textTransform:'uppercase', marginTop:6}}>{r.n}</div>
                            </div>
                          );
                        })}
                      </div>
                    )}

                    {/* El buscador, siempre presente */}
                    {0 < buscP && (
                      <div style={{marginTop:20, height:52, borderRadius:10, border:'1px solid #D9E1EC', background:'#fff',
                                   display:'flex', alignItems:'center', gap:10, padding:'0 14px', opacity:buscP}}>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" strokeWidth="2">
                          <circle cx="11" cy="11" r="7"/><path d="M16.2 16.2 L21 21" strokeLinecap="round"/>
                        </svg>
                        <span className="f-plex" style={{fontSize:19, color:'#94A3B8'}}>Buscar en los recuerdos...</span>
                      </div>
                    )}
                  </div>
                )}
              </div>

              {/* Área de escribir */}
              <div style={{flexShrink:0, padding:'0 18px 18px'}}>
                <div style={{display:'flex', alignItems:'center', gap:12, height:62, padding:'0 14px',
                             borderRadius:12, border:'1px solid #D9E1EC', background:'#fff'}}>
                  <span className="f-plex" style={{flex:1, fontSize:20, color:'#94A3B8'}}>Escribe aqui...</span>
                  <span style={{width:40, height:40, borderRadius:10, background:'#0085FF', display:'flex',
                                alignItems:'center', justifyContent:'center'}}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2">
                      <path d="M3.5 12 L20.5 12 M13.5 5 L20.5 12 L13.5 19" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* Pie — con «Guardar», porque el correo cambió y sigue sin guardarse */}
          <div style={{height:PIE, display:'flex', alignItems:'center', padding:'0 30px', gap:16,
                       borderTop:'1px solid #E8EDF3', background:'#FBFCFE', opacity:lerp(1,0.3,k)}}>
            <span className="f-plex" style={{fontSize:21, fontWeight:600, color:'#0085FF'}}>Ver ficha completa</span>
            <div style={{flex:1}}/>
            <span style={{display:'inline-flex', alignItems:'center', justifyContent:'center', minWidth:168, height:52,
                          borderRadius:9, background:'#0085FF'}}>
              <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#fff'}}>Guardar</span>
            </span>
            <span className="f-plex" style={{fontSize:21, fontWeight:600, color:'#64748B', padding:'12px 26px',
                          borderRadius:9, border:'1px solid #D9E1EC', background:'#fff'}}>Cerrar</span>
          </div>
        </div>
      )}

      {/* La conversación se va con la ventana */}
      {0 < selP && selOut < 1 && (
        <div style={{position:'absolute', left:1150, top:372, width:660, display:'flex', flexDirection:'column', gap:16,
                     opacity:clamp(selP*1.3,0,1)*(1-selOut),
                     transform:`translate(${selOut*300}px, ${selOut*-46}px) scale(${lerp(1,0.84,selOut)})`,
                     filter:`blur(${selOut*5}px)`}}>
          <div style={{alignSelf:'flex-end', maxWidth:480, padding:'13px 17px', borderRadius:'14px 14px 4px 14px', background:'#0085FF'}}>
            <span className="f-plex" style={{fontSize:20, color:'#fff'}}>Cambia el correo a compras@talleresmarban.es</span>
          </div>
          <div style={{alignSelf:'flex-start', maxWidth:480, padding:'13px 17px', borderRadius:'14px 14px 14px 4px',
                       background:'#F1F5F9', border:'1px solid #E2E8F0'}}>
            <span className="f-plex" style={{fontSize:20, color:'#334155'}}>Hecho. El correo queda en la ficha.</span>
          </div>
          <div style={{alignSelf:'flex-end', maxWidth:480, padding:'13px 17px', borderRadius:'14px 14px 4px 14px', background:'#0085FF'}}>
            <span className="f-plex" style={{fontSize:20, color:'#fff'}}>¿Y qué tipo de cliente tiene puesto?</span>
          </div>
        </div>
      )}

      {/* «No queda una línea» */}
      {0 < lnDraw && lnGone < 1 && (
        <svg style={{position:'absolute', left:0, top:0, pointerEvents:'none', opacity:1-lnGone}}
             width="1920" height="1080" viewBox="0 0 1920 1080">
          <path d="M660 540 H1260" pathLength="100" stroke="#CBD5E1" strokeWidth="3" fill="none" strokeLinecap="round"
                strokeDasharray="100" strokeDashoffset={100*(1-lnDraw)}/>
        </svg>
      )}

      {/* ═══════ ACTO D · lo único que queda: el gasto ═══════ */}
      {/* Cerrado el diálogo, debajo estaba la aplicación. Su cuerpo va en trazo de maqueta —
          no es una captura y no afirma nada—; lo real es el header y su mini-barra. */}
      {0 < hdP && (
        <div style={{position:'absolute', inset:0, opacity:hdE}}>
          <div className="f-plex" style={{position:'absolute', top:118, left:0, right:0, textAlign:'center',
                                          fontSize:19, fontWeight:700, letterSpacing:'3.4px', color:'#94A3B8'}}>
            LO ÚNICO QUE SE QUEDA
          </div>

          <div style={{position:'absolute', left:110, top:176, width:1700, height:820, borderRadius:18,
                       background:'#fff', border:'1px solid #E2E8F0', boxShadow:'0 30px 72px rgba(15,23,42,0.13)',
                       overflow:'hidden', transform:`translateY(${(1-hdE)*-22}px)`}}>

            {/* El header real, con su mini-barra de gasto */}
            <div style={{height:132, display:'flex', alignItems:'center', padding:'0 40px', gap:28,
                         borderBottom:'1px solid #E8EDF3', background:'#fff'}}>
              <DinaupLogo size={32}/>
              <div style={{display:'flex', alignItems:'center', gap:12}}>
                <span className="f-plex" style={{fontSize:22, color:'#CBD5E1'}}>/</span>
                <span className="f-plex" style={{fontSize:22, color:'#64748B'}}>Pymes</span>
                <span className="f-plex" style={{fontSize:22, color:'#CBD5E1'}}>/</span>
                <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#0F172A'}}>Entidades</span>
              </div>
              <div style={{flex:1}}/>
              {/* La mini-barra: icono + barra. Sin texto propio: el porcentaje vive en el title del navegador. */}
              <div style={{display:'flex', alignItems:'center', gap:14, padding:'12px 18px', borderRadius:12,
                           background:0.02 < avance ? 'rgba(0,133,255,0.06)' : 'transparent'}}>
                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#0085FF" strokeWidth="1.9">
                  <path d="M12 2.6 L14.4 9 L20.8 11.4 L14.4 13.8 L12 20.2 L9.6 13.8 L3.2 11.4 L9.6 9 Z" strokeLinejoin="round"/>
                </svg>
                <div style={{width:320, height:16, borderRadius:99, background:'#EEF2F6', overflow:'hidden'}}>
                  <div style={{height:'100%', width:`${pctVal}%`, borderRadius:99,
                               background:'linear-gradient(90deg,#0085FF,#56E16A)'}}/>
                </div>
              </div>
              <span className="f-plex" style={{fontSize:20, color:'#64748B'}}>Talleres Marbán, S.L.</span>
              <div style={{width:46, height:46, borderRadius:99, background:'linear-gradient(135deg,#0085FF,#56E16A)',
                           color:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
                           fontFamily:"'IBM Plex Sans',sans-serif", fontWeight:700, fontSize:18}}>MJ</div>
            </div>
            <RuedaDivider/>

            {/* El cuerpo de la aplicación: maqueta, sin datos que afirmar */}
            <div style={{padding:'32px 40px', opacity:0.30}}>
              <div style={{display:'flex', alignItems:'center', gap:18, marginBottom:26}}>
                <div style={{width:280, height:22, borderRadius:99, background:'#E2E8F0'}}/>
                <div style={{flex:1}}/>
                <div style={{width:180, height:44, borderRadius:9, background:'#E2E8F0'}}/>
              </div>
              {[0,1,2,3,4,5,6].map(i=>(
                <div key={i} style={{display:'flex', alignItems:'center', gap:22, height:66,
                             borderBottom:'1px solid #EEF2F6'}}>
                  <div style={{width:40, height:40, borderRadius:99, background:'#EEF2F6'}}/>
                  <div style={{width:380, height:16, borderRadius:99, background:'#E8EDF3'}}/>
                  <div style={{width:220, height:16, borderRadius:99, background:'#EEF2F6'}}/>
                  <div style={{flex:1}}/>
                  <div style={{width:150, height:16, borderRadius:99, background:'#E8EDF3'}}/>
                </div>
              ))}
            </div>
          </div>

          {/* El title nativo del navegador: tarda en salir y no tiene estilo propio */}
          {0 < tipP && (
            <div style={{position:'absolute', left:1258, top:272, opacity:tipP,
                         background:'#FFFFFF', border:'1px solid #A9A9A9', borderRadius:3, padding:'7px 11px',
                         boxShadow:'0 2px 5px rgba(0,0,0,0.18)'}}>
              <span style={{fontFamily:'Segoe UI, system-ui, sans-serif', fontSize:17, color:'#1F1F1F'}}>
                IA: 34 % usado · 1,70 € de 5,00 € esta semana
              </span>
            </div>
          )}

          {/* El remate del clímax: velo sobre la aplicación, la frase encima */}
          {0 < reP && <div style={{position:'absolute', inset:0, background:'#fff', opacity:reE*0.88}}/>}
          {0 < reP && (
            <div className="f-plex" style={{position:'absolute', top:404, left:0, right:0, textAlign:'center',
                                            fontSize:62, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A',
                                            opacity:reE, transform:`translateY(${(1-reE)*16}px)`}}>
              La conversación, no. <span style={{color:'#B45309'}}>El gasto, sí.</span>
            </div>
          )}
          {0 < saP && (
            <div className="f-plex" style={{position:'absolute', top:560, left:0, right:0, textAlign:'center',
                                            fontSize:32, fontWeight:500, color:'#64748B',
                                            opacity:saE, transform:`translateY(${(1-saE)*12}px)`}}>
              Quedan tres detalles de pantalla que se pagan caros.
            </div>
          )}
        </div>
      )}

      {cursorOn && <ScriptedCursor frames={cursor.frames} t={t} clickTimes={cursor.clicks}/>}
      {T.posa < t && t < T.remate && (
        <CineCursor x={1250} y={236} clicking={false}/>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaYV04 });
