// === Escena 06 — "Límites + eco" ===
// Tres límites dichos en alto. Las teclas van en el orden exacto F1, F7, F5: las dos primeras se
// capturan y su método está vacío (js.js:276-279 y :296-299; RCS.razor:298-302 y :376-380); la
// tercera NO está en el switch del escuchador (js.js:275-300), así que el navegador se la queda y
// recarga. Las observaciones se leen (RCS.razor:121). El alta descarta el identificador que
// devuelve (RCS.razor:30), así que el buscador se queda vacío; el rótulo del diálogo es «Agregar
// Entidad» (EntidadDialog.razor:11-15), no su nombre interno. Y la tarjeta de error es una RAMA
// EXCLUYENTE (RCS.razor:37/47/55): cuando se pinta, de la ficha solo queda «Acceso rápido».
function EscenaFC06({ t }){
  // LOCUCIÓN (audio/escena-06.mp3): tres cosas dichas en alto → tres teclas que aquí no hacen nada
  // → dos se capturan y se callan → la tercera ni se captura, recarga el navegador → no las pulses
  // esperando algo → las observaciones se leen → el alta no deja el cliente elegido → si la ficha
  // no se puede traer, lo dice y ofrece reintentar → ECO.
  const T = {
    tres:0.3,       // "Tres cosas, dichas en alto"
    teclas:3.8,     // "tres teclas de función que aquí no hacen nada"
    capturan:7.2,   // "Dos se capturan"
    tercera:10.9,   // "La tercera ni se captura"
    remate:15.3,    // "No las pulses esperando algo"
    obs:17.9,       // "Las observaciones se leen"
    alta:23.9,      // "al cerrar no queda elegido"
    error:31.7,     // "ofrece reintentar"
    eco1:35.3,      // "Con el cliente en pantalla"
    eco2:37.9,      // "sin soltar el teclado"
    teclaStep:0.14,  // cascada de entrada de las tres teclas grises
  };

  const HUECOS = [
    { n:'1', y:206, h:294, fill:T.teclas },
    { n:'2', y:516, h:160, fill:T.obs },
    { n:'3', y:692, h:238, fill:T.alta },
  ];

  const trP = clamp((t-T.tres)/0.5,0,1);
  const caP = clamp((t-T.capturan)/0.4,0,1);
  const teP = clamp((t-T.tercera)/0.4,0,1);
  const recarga = t >= T.tercera && t < T.tercera+0.4 ? Math.sin((t-T.tercera)/0.4*Math.PI) : 0;
  const reP = clamp((t-T.remate)/0.5,0,1), reE = Easing.easeOutCubic(reP);
  const obP = clamp((t-T.obs)/0.5,0,1), obE = Easing.easeOutCubic(obP);

  // El alta: el diálogo entra, se cierra, y el buscador sigue vacío
  const dlgIn  = clamp((t-(T.obs+3.2))/0.5,0,1), dlgE = Easing.easeOutCubic(dlgIn);
  const dlgOut = clamp((t-T.alta)/0.45,0,1);
  const vacio  = clamp((t-T.alta)/0.4,0,1);
  const vaPulse = t >= T.alta+0.8 && t < T.alta+1.9 ? Math.sin((t-T.alta-0.8)/1.1*Math.PI) : 0;

  // La ficha se DESMONTA (es otra rama del if) y entra la tarjeta de error
  const desmonta = clamp((t-T.error)/0.3,0,1);
  const erP = clamp((t-T.error-0.15)/0.5,0,1), erE = Easing.easeOutBack(erP);
  const anP = clamp((t-T.error-0.9)/0.5,0,1), anE = Easing.easeOutCubic(anP);

  // ECO
  const veloOp = t < T.eco1 ? 0 : clamp((t-T.eco1)/0.7,0,1)*0.94;
  const e1P = clamp((t-T.eco1)/0.6,0,1), e1E = Easing.easeOutCubic(e1P);
  const e2P = clamp((t-T.eco2)/0.6,0,1), e2E = Easing.easeOutCubic(e2P);

  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"/></>,
      add:     <><path d="M12 5.2 V18.8 M5.2 12 H18.8"/></>,
      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"/></>,
      lock:    <><rect x="5" y="10.6" width="14" height="9.6" rx="2"/><path d="M8.2 10.6V7.7a3.8 3.8 0 0 1 7.6 0v2.9"/></>,
      refresh: <><path d="M20 12a8 8 0 1 1-2.4-5.7"/><path d="M20 3.6V8.4h-4.8"/></>,
      check:   <><circle cx="12" cy="12" r="9"/><path d="M7.6 12.4 L10.8 15.6 L16.4 9.4"/></>,
    }[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>;
  };

  const Controles = ({ s=20 })=> (
    <div style={{display:'flex', alignItems:'center', gap:14, marginLeft:'auto'}}>
      <svg width={s} height={s} viewBox="0 0 24 24"><path d="M5 12 H19" stroke="#94A3B8" strokeWidth="2" strokeLinecap="round"/></svg>
      <svg width={s} height={s} viewBox="0 0 24 24"><path d="M6 6 L18 18 M18 6 L6 18" stroke="#94A3B8" strokeWidth="2" strokeLinecap="round"/></svg>
    </div>
  );

  const MUERTAS = [
    { k:'F1', x:300, cap:'capturada, sin efecto', ico:'lock',    start:T.capturan },
    { k:'F7', x:480, cap:'capturada, sin efecto', ico:'lock',    start:T.capturan+0.18 },
    { k:'F5', x:660, cap:'recarga el navegador',  ico:'refresh', start:T.tercera },
  ];

  return (
    <SlideCanvas variant="light">
      <DemoHeader t={t} eyebrow="LO QUE NO HACE" title={<span>Tres cosas, dichas en alto</span>}/>

      {/* ═══════ Los tres huecos, que se van llenando ═══════ */}
      <div style={{position:'absolute', inset:0, opacity:1-desmonta}}>
        {HUECOS.map((h,i)=>{
          const ent = clamp((t-T.tres-i*0.18)/0.5,0,1), entE = Easing.easeOutBack(ent);
          const fill = clamp((t-h.fill)/0.5,0,1);
          return (
            <div key={h.n}>
              <div style={{position:'absolute', left:132, top:h.y+16, width:56, height:56, borderRadius:99,
                     background: 0.5 < fill ? '#0085FF' : '#E7EDF4', display:'flex', alignItems:'center', justifyContent:'center',
                     opacity:clamp(ent*1.3,0,1), transform:`scale(${lerp(0.6,1,entE)})`}}>
                <span className="f-mono" style={{fontSize:26, fontWeight:700, color: 0.5 < fill ? '#fff' : '#94A3B8'}}>{h.n}</span>
              </div>
              <svg style={{position:'absolute', left:230, top:h.y, pointerEvents:'none'}} width="1560" height={h.h}
                   opacity={clamp(ent*1.3,0,1)*(1-fill)*0.7}>
                <rect x="2" y="2" width="1556" height={h.h-4} rx="16" fill="none" stroke="#C7D3E1" strokeWidth="3"
                      strokeDasharray="14 12"/>
              </svg>
            </div>
          );
        })}

        {/* ── Hueco 1 · las tres teclas muertas, en su orden exacto ── */}
        {/* El parpadeo de la página recargándose, detrás de la tercera */}
        {0 < recarga && (
          <div style={{position:'absolute', left:628, top:222, width:184, height:158, borderRadius:12,
                       background:'#fff', border:'1px solid #E2E8F0', overflow:'hidden', opacity:recarga*0.9}}>
            <div style={{height:6, background:'#0085FF', width:`${recarga*100}%`}}/>
            {[0,1,2,3].map(i=>(
              <div key={i} style={{height:10, borderRadius:4, background:'#EDF1F6', margin:'18px 16px 0', width:`${80-i*14}%`}}/>
            ))}
          </div>
        )}
        {MUERTAS.map((m,i)=>{
          const ent = clamp((t-T.teclas-i*T.teclaStep)/0.5,0,1), entE = Easing.easeOutCubic(ent);
          const bg = clamp((t-m.start)/0.4,0,1);
          return (
            <div key={m.k} style={{position:'absolute', left:m.x, top:240, opacity:clamp(ent*1.3,0,1),
                   transform:`translateY(${(1-entE)*16}px)`}}>
              <div style={{filter:'grayscale(1) saturate(0.35)', opacity:0.62}}>
                <KeyCap t={t} label={m.k} start={T.teclas+i*T.teclaStep} size={120}/>
              </div>
              {bg > 0 && (
                <div style={{position:'absolute', left:88, top:-14, width:48, height:48, borderRadius:99,
                       background:'#fff', border:'1px solid #DDE4EC', display:'flex', alignItems:'center', justifyContent:'center',
                       boxShadow:'0 6px 16px rgba(15,23,42,0.10)',
                       opacity:clamp(bg*1.4,0,1), transform:`scale(${lerp(0.6,1,Easing.easeOutBack(bg))})`}}>
                  <Ico n={m.ico} s={26} c={m.ico === 'refresh' ? '#B45309' : '#8494A8'} w={2.1}/>
                </div>
              )}
              <div className="f-mono" style={{position:'absolute', left:-30, top:136, width:180, textAlign:'center',
                     fontSize:16, color:'#94A3B8', opacity:clamp(bg*1.3,0,1)}}>{m.cap}</div>
            </div>
          );
        })}
        {reP > 0 && (
          <div className="f-plex" style={{position:'absolute', left:900, top:262, width:880, fontSize:44, fontWeight:800,
                 letterSpacing:'-0.02em', lineHeight:1.2, color:'#DC2626', opacity:reE,
                 transform:`translateY(${(1-reE)*12}px)`}}>
            No las pulses esperando algo.
          </div>
        )}

        {/* ── Hueco 2 · las observaciones se leen, no se escriben aquí ── */}
        {obP > 0 && (
          <div style={{position:'absolute', left:300, top:530, width:1020, opacity:clamp(obP*1.3,0,1),
                       transform:`translateY(${(1-obE)*14}px)`}}>
            <div className="f-plex" style={{fontSize:20, fontWeight:600, color:'#94A3B8'}}>Observaciones:</div>
            <div style={{height:110, marginTop:8, borderRadius:8, border:'1px dashed #CBD5E1', background:'#F1F5F9',
                         padding:'16px 20px', filter:'saturate(0.55)'}}>
              <div className="f-plex" style={{fontSize:21, color:'#64748B', lineHeight:1.5}}>
                Entrega solo por las mañanas.<br/>Albarán firmado obligatorio.
              </div>
            </div>
          </div>
        )}
        {obP > 0 && (
          <div style={{position:'absolute', left:1360, top:576, width:56, height:56, borderRadius:12,
                 background:'#EEF2F6', border:'1px solid #DDE4EC', display:'flex', alignItems:'center', justifyContent:'center',
                 opacity:clamp(obP*1.3,0,1), transform:`scale(${lerp(0.7,1,Easing.easeOutBack(obP))})`}}>
            <Ico n="lock" s={30} c="#8494A8" w={2}/>
          </div>
        )}

        {/* ── Hueco 3 · el alta se cierra y el buscador sigue vacío ── */}
        {/* El hueco que deja el diálogo al cerrarse: de ahí sale la flecha */}
        {dlgOut > 0 && (
          <svg style={{position:'absolute', left:300, top:716, pointerEvents:'none'}} width="440" height="190"
               opacity={dlgOut*0.45}>
            <rect x="2" y="2" width="436" height="186" rx="12" fill="none" stroke="#C7D3E1" strokeWidth="3"
                  strokeDasharray="14 12"/>
          </svg>
        )}
        {dlgIn > 0 && dlgOut < 1 && (
          <div style={{position:'absolute', left:300, top:716, width:440, height:190,
                 opacity:clamp(dlgIn*1.3,0,1)*(1-dlgOut),
                 transform:`scale(${lerp(0.9,1,dlgE)*lerp(1,0.86,dlgOut)}) translateY(${(1-dlgE)*14}px)`}}>
            <div style={{height:'100%', background:'#fff', borderRadius:12, overflow:'hidden',
                         boxShadow:'0 26px 62px rgba(15,23,42,0.26)', border:'1px solid #E2E8F0'}}>
              <div style={{display:'flex', alignItems:'center', gap:10, padding:'14px 18px', borderBottom:'1px solid #EEF2F6'}}>
                <Ico n="badge" s={22} c="#0085FF" w={2.2}/>
                <span className="f-plex" style={{fontSize:23, fontWeight:800, color:'#0F172A'}}>Agregar Entidad</span>
                <Controles/>
              </div>
              <div style={{padding:'18px', display:'flex', flexWrap:'wrap', gap:'14px 16px'}}>
                {[180,180,120,240].map((w,i)=>(
                  <div key={i} style={{width:w}}>
                    <div style={{height:10, width:'50%', borderRadius:4, background:'#EDF1F6'}}/>
                    <div style={{height:30, marginTop:5, borderRadius:7, border:'1px solid #E7ECF2', background:'#FBFCFE'}}/>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
        {dlgIn > 0 && (
          <svg style={{position:'absolute', left:756, top:790, pointerEvents:'none'}} width="60" height="40"
               opacity={clamp(dlgIn*1.3,0,1)*0.55}>
            <path d="M4 20 H46" stroke="#94A3B8" strokeWidth="3" strokeLinecap="round" strokeDasharray="7 7"/>
            <path d="M38 12 L48 20 L38 28" stroke="#94A3B8" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
          </svg>
        )}
        {dlgIn > 0 && (
          <div style={{position:'absolute', left:830, top:756, width:660, opacity:clamp(dlgIn*1.3,0,1)}}>
            <div className="f-plex" style={{fontSize:19, fontWeight:600, color:'#94A3B8'}}>Cliente</div>
            <div style={{display:'flex', alignItems:'center', gap:16, marginTop:8}}>
              <div style={{flex:'1 1 auto', height:70, borderRadius:10, background:'#fff',
                           border:`2px solid ${0 < vacio ? '#CBD5E1' : '#E2E8F0'}`,
                           display:'flex', alignItems:'center', padding:'0 18px',
                           boxShadow: 0 < vaPulse ? `0 0 ${vaPulse*30}px rgba(148,163,184,0.75)` : 'none'}}>
                <span className="f-plex" style={{flex:1, fontSize:24, color:'#A6B2C2'}}>Selecciona un cliente para empezar.</span>
                <span style={{color:'#94A3B8', fontSize:18}}>▾</span>
              </div>
              <div style={{width:70, height:70, borderRadius:12, background:'#10B981', display:'flex',
                           alignItems:'center', justifyContent:'center'}}>
                <Ico n="add" s={34} c="#fff" w={2.8}/>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* ═══════ Y una que sí hace bien: si la ficha no se puede traer, lo dice ═══════ */}
      {erP > 0 && (
        <div style={{position:'absolute', inset:0, opacity:clamp(erP*1.4,0,1)*(1-veloOp/0.94*0.9)}}>
          {/* Lo único que sobrevive a esa rama del if: la tarjeta «Acceso rápido» */}
          <div style={{position:'absolute', left:410, top:240, width:1100, height:140, background:'#fff',
                       border:'1px solid #E2E8F0', borderRadius:14, boxShadow:'0 10px 26px rgba(15,23,42,0.06)',
                       display:'flex', alignItems:'center', gap:20, padding:'0 26px'}}>
            <Ico n="search" s={26} c="#0085FF" w={2.2}/>
            <span className="f-plex" style={{fontSize:24, fontWeight:700, color:'#0F172A'}}>Acceso rápido</span>
            <div style={{flex:'1 1 auto', height:64, borderRadius:10, border:'1px solid #CBD5E1',
                         display:'flex', alignItems:'center', padding:'0 18px'}}>
              <span className="f-plex" style={{fontSize:23, fontWeight:600, color:'#0F172A'}}>Talleres Marbán, S.L.</span>
            </div>
            <div style={{width:64, height:64, borderRadius:11, background:'#10B981', display:'flex',
                         alignItems:'center', justifyContent:'center'}}>
              <Ico n="add" s={30} c="#fff" w={2.8}/>
            </div>
          </div>

          {/* EmptyListAddButtomCardU: ilustración, título, el texto crudo de la excepción y Reintentar */}
          <div style={{position:'absolute', left:410, top:410, width:1100, height:490,
                       transform:`translateY(${(1-erE)*40}px)`}}>
            <div style={{height:'100%', background:'#fff', border:'1px solid #E2E8F0', borderRadius:16,
                         boxShadow:'0 26px 66px rgba(15,23,42,0.12)', position:'relative'}}>
              <div style={{position:'absolute', left:490, top:60, width:120, height:120, borderRadius:16,
                           background:'#F4F7FA', border:'1px solid #E7ECF2', display:'flex', flexDirection:'column',
                           alignItems:'center', justifyContent:'center', gap:9}}>
                {[64,44,54].map((w,i)=>(
                  <div key={i} style={{width:w, height:9, borderRadius:4, background:'#D7E0EA'}}/>
                ))}
              </div>
              <div className="f-plex" style={{position:'absolute', left:0, right:0, top:210, textAlign:'center',
                     fontSize:34, fontWeight:800, color:'#0F172A'}}>
                No se pudo cargar la ficha del cliente
              </div>
              <div className="f-mono" style={{position:'absolute', left:0, right:0, top:266, textAlign:'center',
                     fontSize:20, color:'#94A3B8'}}>
                Se agotó el tiempo de espera de la operación.
              </div>
              <div style={{position:'absolute', left:430, top:316, width:240, height:64, borderRadius:10,
                           background:'#0085FF', boxShadow:'0 10px 26px rgba(0,133,255,0.30)',
                           display:'flex', alignItems:'center', justifyContent:'center', gap:12}}>
                <Ico n="refresh" s={26} c="#fff" w={2.4}/>
                <span className="f-plex" style={{fontSize:24, fontWeight:700, color:'#fff'}}>Reintentar</span>
              </div>
            </div>
          </div>

          {/* Capa de anotación (aquí sí, verde): lo dice en vez de quedarse en blanco */}
          {anP > 0 && (
            <div style={{position:'absolute', left:1550, top:560, width:330, opacity:anE,
                         transform:`translateX(${(1-anE)*14}px)`}}>
              <div style={{display:'flex', alignItems:'flex-start', gap:12}}>
                <Ico n="check" s={30} c="#10B981" w={2.2}/>
                <span className="f-plex" style={{fontSize:23, fontWeight:600, color:'#059669', lineHeight:1.35}}>
                  Lo dice, y deja reintentar.
                </span>
              </div>
            </div>
          )}
        </div>
      )}

      {/* ═══════ ECO · pantalla fija hasta el corte ═══════ */}
      {veloOp > 0 && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {e1P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:392, textAlign:'center',
               fontSize:74, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A',
               opacity:e1E, transform:`translateY(${(1-e1E)*18}px)`}}>
          Con el cliente en pantalla,
        </div>
      )}
      {e2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:502, textAlign:'center',
               fontSize:74, fontWeight:800, letterSpacing:'-0.03em',
               opacity:e2E, transform:`translateY(${(1-e2E)*18}px)`}}>
          <span className="grad-text">el pedido sale sin soltar el teclado.</span>
        </div>
      )}
      {e2P > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:672, display:'flex', justifyContent:'center',
                     opacity:e2E*0.7}}>
          <DinaupLogo size={40}/>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaFC06 });
