// === Escena 04 — "Las teclas" ===  [CLÍMAX, al 61 % de la pieza]
// Cuatro teclas, cuatro resultados. F2 solo ABRE el desplegable del selector (RCS.razor:313 →
// DnzRowSelector.razor:84-87): elegir la fila sigue siendo un clic (DnzReportView.razor:63,564),
// y el cursor vuelve medio segundo para enseñarlo. F3 abre el diálogo de entidad de Pymes, cuyo
// rótulo EN PANTALLA es «Editar Entidad» (EntidadDialog.razor:11-15; ShowTitle=false en
// UpDialogServices.Tools.cs:128). F4 levanta el punto de venta como VENTANA del gestor titulada
// «Pedido rápido» (Pymes.cs:41-76, :448) con el cliente ya escrito en la casilla «Cliente» de su
// cabecera (TPVBuilder.cs:585-594 → TPVHeaderBarU.razor:12 → TPVBuilder.Utilities.cs:36). F6 lo
// mismo con «Venta rápida» (Pymes.cs:461). Al abrirse la ventana sale la barra de tareas del
// gestor (DnzWindowHost.razor:20-23).
function EscenaFC04({ t }){
  // LOCUCIÓN (audio/escena-04.mp3): quita el ratón → la de buscar abre el selector → aunque elegir
  // de la lista siga pidiendo el ratón → la de la ficha abre la ficha completa → la del pedido es
  // la buena → (pausa) → levanta el punto de venta, titulada Pedido rápido → el cliente ya está
  // puesto en su casilla → nadie lo ha tecleado, llegó con la tecla → la de la venta, igual →
  // LA ÚNICA COSA como prueba → ahora, cuándo la tecla no responde.
  const T = {
    banda:0.3,      // "Quita el ratón"
    buscar:2.0,     // "La de buscar"
    raton:6.1,      // "siga pidiendo el ratón"
    ficha:8.1,      // "La de la ficha abre"
    pedido:14.7,    // "La del pedido es la buena"
    pausa:17.1,     // (el valle: cero cambios en pantalla)
    momento:19.6,   // "titulada Pedido rápido"
    nombre:23.2,    // "ya está puesto en su casilla"
    conector:27.4,  // "llegó con la tecla"
    venta:29.4,     // "La de la venta"
    unica1:32.6,    // "Con el cliente en pantalla"
    unica2:35.0,    // "sin soltar el teclado"
    teclaStep:0.10,  // cascada de entrada de las cuatro teclas
  };

  // ── Geometría ──
  const WX = 260, WY = 150, WW = 1400, WH = 732;   // ventana del navegador
  const SBW = 280;
  const KY = 906;                                   // banda de teclas
  const KX = [618, 806, 994, 1182];                 // KeyCap size=120
  const KC = KX.map(x => x+60);                     // centros

  // Estados de cada tecla: encendida en su tramo, apagada fuera
  const RANGO = [[T.buscar-0.15, T.ficha], [T.ficha-0.15, T.pedido], [T.pedido, T.venta], [T.venta-0.15, T.unica1]];
  const lit = (i)=> clamp((t-RANGO[i][0])/0.3,0,1) * (1-clamp((t-RANGO[i][1])/0.4,0,1));
  const PRESS = [T.buscar, T.ficha, T.momento, T.venta];
  const pressing = (i)=> t >= PRESS[i] && t < PRESS[i]+0.35;

  // Desplegable del selector
  const drP  = clamp((t-T.buscar)/0.3,0,1), drE = Easing.easeOutCubic(drP);
  const drOut = clamp((t-T.raton-0.55)/0.25,0,1);

  // «Editar Entidad»
  const edP = clamp((t-T.ficha)/0.45,0,1), edE = Easing.easeOutCubic(edP);
  const edDim = lerp(1, 0.35, clamp((t-T.ficha-0.9)/0.5,0,1));

  // El momento
  const veloMom = clamp((t-T.momento)/0.5,0,1)*0.28;
  const pvP = clamp((t-T.momento)/0.6,0,1), pvE = Easing.easeOutBack(pvP);
  const shrink = lerp(1, 0.7, Easing.easeInOutCubic(clamp((t-T.venta)/0.6,0,1)));
  const mkOut = clamp((t-T.nombre)/0.25,0,1);                       // el marcador se desvanece
  const nbP = clamp((t-T.nombre)/0.4,0,1), nbE = Easing.easeOutBack(nbP);
  const draw = Easing.easeInOutCubic(clamp((t-T.conector)/0.5,0,1));
  const conOp = draw * (1-clamp((t-T.venta)/0.4,0,1));
  const cnPulse = t >= T.conector && t < T.conector+1.1 ? Math.sin((t-T.conector)/1.1*Math.PI) : 0;
  const vrP = clamp((t-T.venta)/0.5,0,1), vrE = Easing.easeOutBack(vrP);
  const tbP = clamp((t-T.momento)/0.5,0,1), tbE = Easing.easeOutCubic(tbP);

  // La ficha de fondo se retira cuando la del pedido toma el mando
  const dimBase = lerp(1, 0.2, clamp((t-T.pedido)/0.5,0,1));

  // La Única Cosa como PRUEBA
  const veloOp = t < T.unica1 ? 0 : clamp((t-T.unica1)/0.7,0,1)*0.93;
  const u1P = clamp((t-T.unica1)/0.6,0,1), u1E = Easing.easeOutCubic(u1P);
  const u2P = clamp((t-T.unica2)/0.6,0,1), u2E = Easing.easeOutCubic(u2P);

  // El cursor vuelve UNA sola vez, medio segundo, en la única tecla que lo necesita
  const curOp = clamp((t-T.raton+0.3)/0.25,0,1) * (1-clamp((t-T.raton-0.55)/0.3,0,1));

  const Ico = ({ n, s=22, c='#64748B', w=1.9 })=>{
    const g = {
      search:       <><circle cx="11" cy="11" r="7"/><path d="M16.4 16.4 L21 21"/></>,
      person_search:<><circle cx="9.5" cy="8" r="3.4"/><path d="M3.2 19c0-3.2 2.8-5.3 6.3-5.3.8 0 1.6.1 2.3.3"/><circle cx="16.8" cy="15.8" r="3"/><path d="M19 18 L21.5 20.6"/></>,
      handshake:    <><path d="M2.5 10.5 L6.5 6.5 L11.5 8.5 L16.5 6.5 L21.5 10.5"/><path d="M6.5 12.5 L9.8 15.8 L12 13.8 L14.6 16.4 L16.8 14.2"/></>,
      badge:        <><rect x="3.4" y="5" width="17.2" height="14" rx="2"/><circle cx="9" cy="10.6" r="2.2"/><path d="M5.8 16.2c.6-1.6 1.8-2.4 3.2-2.4s2.6.8 3.2 2.4"/><path d="M14.6 9.6h4 M14.6 13.6h4"/></>,
      add:          <><path d="M12 5.2 V18.8 M5.2 12 H18.8"/></>,
      open_in_new:  <><path d="M14 3.6h6.4V10"/><path d="M20.4 3.6 L11 13"/><path d="M18 13.6v5.4a1.6 1.6 0 0 1-1.6 1.6H5.2A1.6 1.6 0 0 1 3.6 19V7.8a1.6 1.6 0 0 1 1.6-1.6h5.4"/></>,
      shopping_cart:<><circle cx="9.6" cy="19.4" r="1.5"/><circle cx="17.2" cy="19.4" r="1.5"/><path d="M2.4 3.6h2.5l2.7 11.2h10.2l2-7.7H6.6"/></>,
      point_of_sale:<><rect x="3.4" y="9.2" width="17.2" height="10.8" rx="2"/><path d="M7 9.2V5.6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3.6"/><path d="M8 14h8"/></>,
    }[n];
    return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={w}
                strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>{g}</svg>;
  };

  // Controles de la barra de título del gestor de ventanas (DnzWindow.razor:38-46)
  const Controles = ()=> (
    <div style={{display:'flex', alignItems:'center', gap:22, marginLeft:'auto'}}>
      <svg width="26" height="26" viewBox="0 0 24 24"><path d="M5 12 H19" stroke="#64748B" strokeWidth="2" strokeLinecap="round"/></svg>
      <svg width="26" height="26" viewBox="0 0 24 24"><rect x="5.5" y="5.5" width="13" height="13" rx="1.5" fill="none" stroke="#64748B" strokeWidth="2"/></svg>
      <svg width="26" height="26" viewBox="0 0 24 24"><path d="M6 6 L18 18 M18 6 L6 18" stroke="#64748B" strokeWidth="2" strokeLinecap="round"/></svg>
    </div>
  );

  // Una casilla vecina de la cabecera del punto de venta (atrezzo, al 0.45)
  const Vecina = ({ x, y, w, lab })=>(
    <div style={{position:'absolute', left:x, top:y, width:w, height:62, opacity:0.45}}>
      <div className="f-plex" style={{fontSize:15, fontWeight:600, color:'#94A3B8'}}>{lab}</div>
      <div style={{height:40, marginTop:4, borderRadius:8, border:'1px solid #DDE4EC', background:'#F8FAFC'}}/>
    </div>
  );

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="SIN SOLTAR EL TECLADO" title={<span>Cuatro teclas, cuatro resultados</span>}/>

      {/* ═══════ La ficha, de fondo ═══════ */}
      <div style={{position:'absolute', left:WX, top:WY, width:WW, height:WH, borderRadius:18, overflow:'hidden',
                   background:'#fff', border:'1px solid #E2E8F0', boxShadow:'0 30px 76px rgba(15,23,42,0.12)',
                   opacity:dimBase}}>
        <BrowserChrome url="play.dinaup.com/App/CRM/ClienteLookup" title="Dinaup — CRM"/>
        <DinaupAppHeader breadcrumb={['CRM','Ficha de Cliente']} company="Suministros Ebro, S.L." initials="AM"/>
        <div style={{position:'absolute', left:0, top:140, width:SBW, bottom:0, background:'#F8FAFC', borderRight:'1px solid #E9EEF4'}}/>
        <div className="dot-grid-bg" style={{position:'absolute', left:SBW, top:140, right:0, bottom:0, opacity:0.2}}/>

        {/* «Acceso rápido», con el cliente elegido */}
        <div style={{position:'absolute', left:SBW+30, top:156, right:40, height:98, background:'#fff',
                     border:'1px solid #E2E8F0', borderRadius:14, padding:'14px 22px'}}>
          <div className="f-plex" style={{fontSize:17, fontWeight:600, color:'#94A3B8'}}>Cliente</div>
          <div style={{width:520, height:56, marginTop:4, borderRadius:10, border:'1px solid #CBD5E1',
                       display:'flex', alignItems:'center', padding:'0 16px', gap:12}}>
            <span className="f-plex" style={{flex:1, fontSize:23, fontWeight:600, color:'#0F172A'}}>Talleres Marbán, S.L.</span>
            <span style={{color:'#94A3B8', fontSize:18}}>▾</span>
          </div>
        </div>

        {/* La fila de tres botones */}
        <div style={{position:'absolute', left:SBW+30, top:268, right:40, height:114, background:'#fff',
                     border:'1px solid #E2E8F0', borderRadius:14, display:'flex', alignItems:'center', gap:16, padding:'0 22px'}}>
          {[['open_in_new','Ver ficha','F3','#0085FF'], ['add','Pedido','F4','#10B981'], ['add','Venta','F6','#10B981']].map(b=>(
            <div key={b[1]} style={{height:86, borderRadius:10, background:b[3], display:'flex', alignItems:'center',
                                    gap:14, padding:'0 22px'}}>
              <Ico n={b[0]} s={28} c="#fff" w={2.4}/>
              <span className="f-plex" style={{fontSize:25, fontWeight:700, color:'#fff'}}>{b[1]}</span>
              <span style={{display:'inline-flex', alignItems:'center', justifyContent:'center', width:60, height:42,
                            borderRadius:8, background:'rgba(255,255,255,0.92)'}}>
                <span className="f-mono" style={{fontSize:24, fontWeight:700, color:'#0F172A'}}>{b[2]}</span>
              </span>
            </div>
          ))}
        </div>

        {/* Lo de abajo, en contexto */}
        <div style={{position:'absolute', left:SBW+30, top:396, right:40, height:114, background:'#fff',
                     border:'1px solid #E2E8F0', borderRadius:14, padding:'0 22px'}}>
          <div style={{display:'flex', alignItems:'center', gap:12, height:44}}>
            <Ico n="badge" s={22} c="#0085FF" w={2.1}/>
            <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#0F172A'}}>Información del Cliente</span>
          </div>
          <div style={{display:'flex', gap:60}}>
            <div><div className="f-plex" style={{fontSize:15, color:'#94A3B8'}}>Nombre:</div>
                 <div className="f-plex" style={{fontSize:21, fontWeight:600, color:'#0F172A'}}>Talleres Marbán, S.L.</div></div>
            <div><div className="f-plex" style={{fontSize:15, color:'#94A3B8'}}>Tipo de Cliente:</div>
                 <div className="f-plex" style={{fontSize:21, fontWeight:600, color:'#0F172A'}}>Mayorista</div></div>
          </div>
        </div>
        {['Oportunidades','Pedidos'].map((tt,i)=>(
          <div key={tt} style={{position:'absolute', left:SBW+30, top:524+i*64, right:40, height:52, background:'#fff',
                                border:'1px solid #E2E8F0', borderRadius:12, display:'flex', alignItems:'center', gap:12, padding:'0 22px'}}>
            <Ico n={i===0?'handshake':'shopping_cart'} s={20} c="#0085FF" w={2.1}/>
            <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#0F172A'}}>{tt}</span>
          </div>
        ))}

        {/* El desplegable del selector: buscador + lista. La tecla ABRE; elegir es un clic. */}
        {drP > 0 && drOut < 1 && (
          <div style={{position:'absolute', left:SBW+60, top:250, width:560, background:'#fff',
                       border:'1px solid #CBD5E1', borderRadius:12, boxShadow:'0 26px 60px rgba(15,23,42,0.20)',
                       padding:10, opacity:clamp(drP*1.3,0,1)*(1-drOut),
                       transform:`scale(${lerp(0.9,1,drE)})`, transformOrigin:'0 0'}}>
            <div style={{height:52, borderRadius:8, border:'1px solid #E2E8F0', background:'#F8FAFC',
                         display:'flex', alignItems:'center', gap:10, padding:'0 14px'}}>
              <Ico n="search" s={20} c="#94A3B8" w={2}/>
              <span className="f-plex" style={{fontSize:19, color:'#A6B2C2'}}>Buscar</span>
            </div>
            {['Talleres Marbán, S.L.','Recambios Aragón, S.A.','Neumáticos del Ebro, S.L.','Transportes Villar, S.L.'].map((r,i)=>(
              <div key={r} style={{height:50, display:'flex', alignItems:'center', padding:'0 14px',
                                   borderTop: i===0 ? '1px solid #F1F5F9' : '1px solid #F6F9FB',
                                   marginTop: i===0 ? 8 : 0,
                                   background: i===0 && t >= T.raton+0.15 ? 'rgba(0,133,255,0.10)' : 'transparent'}}>
                <span className="f-plex" style={{fontSize:20, color:'#334155'}}>{r}</span>
              </div>
            ))}
          </div>
        )}

      </div>

      {/* Barra de tareas del gestor: aparece con la primera ventana y se queda (DnzWindowHost) */}
      {tbP > 0 && (
        <div style={{position:'absolute', left:WX+1, top:WY+WH-64, width:WW-2, height:64, background:'#0F172A',
                     borderRadius:'0 0 17px 17px', overflow:'hidden',
                     display:'flex', alignItems:'center', gap:14, padding:'0 20px',
                     opacity:clamp(tbP*1.3,0,1), transform:`translateY(${(1-tbE)*64}px)`}}>
          <span style={{display:'inline-flex', alignItems:'center', gap:10, padding:'8px 18px', borderRadius:9,
                        background:'rgba(255,255,255,0.14)', border:'1px solid rgba(255,255,255,0.16)'}}>
            <Ico n="shopping_cart" s={20} c="#fff" w={2.1}/>
            <span className="f-plex" style={{fontSize:19, fontWeight:600, color:'#fff'}}>Pedido rápido</span>
          </span>
          {vrP > 0 && (
            <span style={{display:'inline-flex', alignItems:'center', gap:10, padding:'8px 18px', borderRadius:9,
                          background:'rgba(255,255,255,0.14)', border:'1px solid rgba(255,255,255,0.16)',
                          opacity:clamp(vrP*1.4,0,1)}}>
              <Ico n="point_of_sale" s={20} c="#fff" w={2.1}/>
              <span className="f-plex" style={{fontSize:19, fontWeight:600, color:'#fff'}}>Venta rápida</span>
            </span>
          )}
        </div>
      )}

      {/* ═══════ La ficha completa: rótulo «Editar Entidad», y ni un campo suyo ═══════ */}
      {edP > 0 && (
        <div style={{position:'absolute', left:490, top:300, width:940, height:430,
                     opacity:clamp(edP*1.3,0,1)*edDim*(1-clamp((t-T.pedido)/0.5,0,1)*0.6),
                     transform:`scale(${lerp(0.85,1,edE)})`, transformOrigin:'376px 606px'}}>
          <div style={{background:'#fff', borderRadius:16, boxShadow:'0 36px 90px rgba(15,23,42,0.34)', overflow:'hidden', height:'100%'}}>
            <div style={{display:'flex', alignItems:'center', gap:14, padding:'20px 28px', borderBottom:'1px solid #EEF2F6'}}>
              <Ico n="badge" s={28} c="#0085FF" w={2.2}/>
              <span className="f-plex" style={{fontSize:30, fontWeight:800, color:'#0F172A'}}>Editar Entidad</span>
              <Controles/>
            </div>
            <div style={{display:'flex', gap:12, padding:'0 28px', borderBottom:'1px solid #EEF2F6'}}>
              {['General','Contacto','Comercial','Documentos'].map((tb,i)=>(
                <div key={tb} style={{padding:'14px 12px', borderBottom:`3px solid ${i===0?'#0085FF':'transparent'}`}}>
                  <span className="f-plex" style={{fontSize:20, fontWeight:i===0?700:500, color:i===0?'#0085FF':'#94A3B8'}}>{tb}</span>
                </div>
              ))}
            </div>
            <div style={{padding:'26px 28px', display:'flex', flexWrap:'wrap', gap:'18px 24px'}}>
              {[420,300,300,180,220,420,260,300].map((w,i)=>(
                <div key={i} style={{width:w}}>
                  <div style={{height:12, width:'46%', borderRadius:4, background:'#EDF1F6'}}/>
                  <div style={{height:38, marginTop:7, borderRadius:8, border:'1px solid #E7ECF2', background:'#FBFCFE'}}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* ═══════ Velo del momento ═══════ */}
      {veloMom > 0 && <div style={{position:'absolute', inset:0, background:'#0F172A', opacity:veloMom}}/>}

      {/* ═══════ LA IMAGEN-MOMENTO · la ventana «Pedido rápido» ═══════ */}
      {pvP > 0 && (
        <div style={{position:'absolute', left:320, top:178, width:1280, height:622,
                     transform:`scale(${shrink})`, transformOrigin:'0 0'}}>
          <div style={{width:'100%', height:'100%', opacity:clamp(pvP*1.3,0,1),
                       transform:`scale(${lerp(0.72,1,pvE)})`, transformOrigin:'734px 728px'}}>
            <div style={{height:'100%', background:'#fff', borderRadius:14, overflow:'hidden',
                         border:'1px solid #D6DEE8', boxShadow:'0 48px 120px rgba(15,23,42,0.42)'}}>
              {/* Barra de título del gestor de ventanas */}
              <div style={{height:56, display:'flex', alignItems:'center', gap:14, padding:'0 22px',
                           background:'#F4F7FA', borderBottom:'1px solid #E2E8F0'}}>
                <Ico n="shopping_cart" s={26} c="#0F172A" w={2.1}/>
                <span className="f-plex" style={{fontSize:28, fontWeight:700, color:'#0F172A'}}>Pedido rápido</span>
                <Controles/>
              </div>

              {/* Cabecera del punto de venta: la casilla «Cliente» y sus vecinas */}
              <div style={{position:'relative', height:230, borderBottom:'1px solid #EEF2F6'}}>
                <div style={{position:'absolute', left:40, top:22}}>
                  <div className="f-plex" style={{fontSize:20, fontWeight:600, color:'#64748B'}}>Cliente</div>
                  <div style={{width:520, height:78, marginTop:8, borderRadius:10,
                               border:`2px solid ${0 < nbP ? '#0085FF' : '#CBD5E1'}`, background:'#fff',
                               display:'flex', alignItems:'center', padding:'0 20px', gap:12, position:'relative',
                               boxShadow: 0 < nbP ? `0 0 ${18+cnPulse*30}px rgba(0,133,255,${0.32+cnPulse*0.35})` : 'none'}}>
                    <span className="f-plex" style={{position:'absolute', left:20, fontSize:30, color:'#A6B2C2', opacity:1-mkOut}}>
                      Selecciona un Cliente
                    </span>
                    {nbP > 0 && (
                      <span className="f-plex" style={{fontSize:38, fontWeight:700, color:'#0F172A',
                             opacity:clamp(nbP*1.4,0,1), transform:`translateY(${(1-nbE)*-18}px)`}}>
                        Talleres Marbán, S.L.
                      </span>
                    )}
                    <span style={{marginLeft:'auto', color:'#94A3B8', fontSize:20}}>▾</span>
                  </div>
                </div>
                <Vecina x={600}  y={44}  w={230} lab="Datos fiscales"/>
                <Vecina x={850}  y={44}  w={190} lab="Estado"/>
                <Vecina x={1060} y={44}  w={190} lab="Tipo Venta"/>
                <Vecina x={600}  y={132} w={190} lab="Categoría"/>
                <Vecina x={810}  y={132} w={190} lab="Envío"/>
                <Vecina x={1020} y={132} w={190} lab="Almacén"/>
                <Vecina x={40}   y={148} w={190} lab="Número"/>
              </div>

              {/* Cuerpo del punto de venta: atrezzo, muy tenue */}
              <div style={{padding:'20px 40px', opacity:0.35}}>
                {[0,1,2,3].map(i=>(
                  <div key={i} style={{display:'flex', alignItems:'center', gap:22, height:56, borderBottom:'1px solid #F1F5F9'}}>
                    <div style={{width:280, height:12, borderRadius:4, background:'#EDF1F6'}}/>
                    <div style={{width:120, height:12, borderRadius:4, background:'#EDF1F6'}}/>
                    <div style={{width:160, height:12, borderRadius:4, background:'#EDF1F6', marginLeft:'auto'}}/>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ═══════ «Venta rápida», en miniatura al lado ═══════ */}
      {vrP > 0 && (
        <div style={{position:'absolute', left:1250, top:300, width:380, height:250,
                     opacity:clamp(vrP*1.3,0,1), transform:`scale(${lerp(0.8,1,vrE)})`, transformOrigin:'-8px 606px'}}>
          <div style={{height:'100%', background:'#fff', borderRadius:12, overflow:'hidden',
                       border:'1px solid #D6DEE8', boxShadow:'0 30px 70px rgba(15,23,42,0.30)'}}>
            <div style={{height:44, display:'flex', alignItems:'center', gap:10, padding:'0 14px',
                         background:'#F4F7FA', borderBottom:'1px solid #E2E8F0'}}>
              <Ico n="point_of_sale" s={20} c="#0F172A" w={2.1}/>
              <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#0F172A'}}>Venta rápida</span>
            </div>
            <div style={{padding:'14px 16px'}}>
              <div className="f-plex" style={{fontSize:15, fontWeight:600, color:'#94A3B8'}}>Cliente</div>
              <div style={{height:46, marginTop:5, borderRadius:8, border:'2px solid #0085FF', display:'flex',
                           alignItems:'center', padding:'0 12px'}}>
                <span className="f-plex" style={{fontSize:19, fontWeight:700, color:'#0F172A'}}>Talleres Marbán, S.L.</span>
              </div>
              {[0,1,2].map(i=>(
                <div key={i} style={{height:12, borderRadius:4, background:'#EDF1F6', marginTop:14, width:`${90-i*18}%`}}/>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* ═══════ «Llegó con la tecla»: el conector se dibuja de la tecla a la casilla ═══════ */}
      {conOp > 0 && (
        <svg style={{position:'absolute', left:0, top:0, pointerEvents:'none'}} width="1920" height="1080" opacity={conOp}>
          <path d="M1054 898 C 1054 760, 720 660, 622 386" fill="none" stroke="#0085FF" strokeWidth="5"
                strokeLinecap="round" pathLength="100" strokeDasharray="100" strokeDashoffset={100*(1-draw)}/>
          <path d="M610 400 L622 376 L636 396" fill="none" stroke="#0085FF" strokeWidth="5"
                strokeLinecap="round" strokeLinejoin="round" opacity={clamp((draw-0.8)/0.2,0,1)}/>
        </svg>
      )}

      {/* ═══════ La banda de teclas ═══════ */}
      {['F2','F3','F4','F6'].map((k,i)=>{
        const ent = clamp((t-T.banda-i*T.teclaStep)/0.5,0,1), entE = Easing.easeOutCubic(ent);
        const L = lit(i);
        const sc = pressing(i) ? 1.25 : lerp(1, 1.06, L);
        return (
          <div key={k} style={{position:'absolute', left:KX[i], top:KY, width:120,
                 opacity:clamp(ent*1.3,0,1)*lerp(0.45,1,L),
                 transform:`translateY(${(1-entE)*70}px) scale(${sc})`, transformOrigin:'50% 50%',
                 filter: 0.2 < L ? `drop-shadow(0 0 ${L*26}px rgba(0,133,255,${L*0.55}))` : 'none'}}>
            <KeyCap t={t} label={k} start={T.banda+i*T.teclaStep} pressT={PRESS[i]} size={120}/>
          </div>
        );
      })}
      {['buscar','ficha','pedido','venta'].map((c,i)=>{
        const ent = clamp((t-T.banda-i*T.teclaStep)/0.5,0,1);
        return (
          <div key={c} className="f-mono" style={{position:'absolute', left:KX[i]-30, top:1040, width:180, textAlign:'center',
                 fontSize:18, letterSpacing:'1.6px', color: 0.2 < lit(i) ? '#0085FF' : '#94A3B8', opacity:clamp(ent*1.3,0,1)*0.95}}>
            {c}
          </div>
        );
      })}

      {/* ═══════ El cursor: una sola vez, medio segundo, en la única tecla que lo necesita ═══════ */}
      {curOp > 0 && (
        <div style={{opacity:curOp}}>
          <ScriptedCursor t={t} clickTimes={[T.raton+0.15]} frames={[
            { t:T.raton-0.35, x:1180, y:760 },
            { t:T.raton+0.15, x:700,  y:497 },
            { t:T.raton+0.85, x:700,  y:497 },
          ]}/>
        </div>
      )}

      {/* ═══════ LA ÚNICA COSA · prueba ═══════ */}
      {veloOp > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {u1P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:410, textAlign:'center',
               fontSize:72, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A',
               opacity:u1E, transform:`translateY(${(1-u1E)*18}px)`}}>
          Con el cliente en pantalla,
        </div>
      )}
      {u2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:518, textAlign:'center',
               fontSize:72, fontWeight:800, letterSpacing:'-0.03em',
               opacity:u2E, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">el pedido sale sin soltar el teclado.</span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaFC04 });