// === Escena 05 — "Tu parte: Aceptar" · audio real 34.90s ===
// LOCUCIÓN: "Esta es la pantalla de verdad. A la izquierda, los datos ya colocados: proveedor,
//   concepto, importes. A la derecha, la factura original, tal cual llegó. Lo repasas de un
//   vistazo... todo bien... y abajo, el botón: Aceptar. Siguiente. Aceptar. Siguiente. Aceptar.
//   Contabilizada y lista para el IVA del trimestre. Los días de teclear se convierten en un
//   rato de revisar. Y eso es solo la factura de hoy... mira lo que pasa con el mes entero."
// UI: recreación del diálogo REAL "Factura Recibida" (captura validada): selects arriba,
//   badge ✓ 6/6, SELECCIONADOS, visor PDF a la derecha, ✓ ACEPTAR verde abajo.
// BEATS: highlights por palabra · match visual importe↔importe · 3 clicks encadenando el stack.
function Escena07({ t }){
  const T = {
    win:      0.3,   // "Esta es la pantalla de verdad"        → ventana
    hlProv:   5.1,   // "proveedor"                            → resalta proveedor
    hlConc:   6.0,   // "concepto"                             → resalta concepto
    hlImp:    7.0,   // "importes"                             → resalta importes
    glow:     9.4,   // "la factura original"                  → glow del original
    match1:  12.0,   // "Lo repasas de un vistazo"             → match
    match2:  13.8,   // "todo bien"                            → match
    cur0:    15.9,                                           // (apoyo) cursor
    cur1:    17.2,                                           // (apoyo) cursor
    click:   [17.9, 20.0, 21.8],                             // (apoyo) los tres Aceptar
    swapDur: 0.45,                                           // (duración, no instante)
    chips:   23.0,   // "Contabilizada y lista"                → chips
    chips2:  24.4,   // "el IVA del trimestre"                 → chip IVA
    remate:  26.1,   // "Los días de teclear se convierten"    → remate
    dim:     32.5,   // "mira lo que pasa con el mes entero"   → atenúa
  };
  const FACT = [
    { prov:'Endesa',   fis:'Endesa Energía S.A.', cat:'Suministros', num:'END-887421',     fecha:'04/11/2025', conc:'Electricidad noviembre · CUPS ES0031…', und:'1', precio:'238,40 €', sub:'238,40 €', iva:'50,07 €', total:'288,47 €', dir:'ENDESA · Ribera del Loira 60, 28042 Madrid', icon:'⚡' },
    { prov:'Vodafone', fis:'Vodafone España S.A.U.', cat:'Telecom', num:'VF-2025-11-002',  fecha:'05/11/2025', conc:'Fibra 600Mb + 4 líneas móvil empresa',   und:'1', precio:'99,17 €',  sub:'99,17 €',  iva:'20,83 €', total:'120,00 €', dir:'VODAFONE · Av. América 115, 28042 Madrid', icon:'📶' },
    { prov:'Movistar', fis:'Telefónica de España S.A.', cat:'Telecom', num:'FM-112334',    fecha:'06/11/2025', conc:'Fusión Empresas · noviembre',            und:'1', precio:'66,11 €',  sub:'66,11 €',  iva:'13,88 €', total:'79,99 €',  dir:'TELEFÓNICA · Gran Vía 28, 28013 Madrid', icon:'📱' },
  ];
  // Factura visible según clicks consumados
  const idx = Math.min(2, T.click.filter(c => t >= c + T.swapDur).length);
  const f = FACT[idx];
  const swapping = T.click.some(c => t >= c+0.1 && t < c + T.swapDur);
  const swapP = swapping ? clamp((t - (T.click.find(c => t >= c+0.1 && t < c+T.swapDur)+0.1))/(T.swapDur-0.1), 0, 1) : 0;
  const nDone = T.click.filter(c => t >= c + 0.15).length;

  const winP = clamp((t-T.win)/0.6, 0, 1), winE = Easing.easeOutCubic(winP);
  const hl = (at)=> idx===0 && t >= at && t < at+0.85;
  const glowOn = idx===0 && t >= T.glow && t < T.glow+1.6;
  const zoomP = idx===0 ? clamp((t-T.glow-0.4)/1.0, 0, 1) : 0;
  const match1 = idx===0 && t >= T.match1 && t < T.match1+1.05;
  const match2 = idx===0 && t >= T.match2 && t < T.match2+1.05;

  // Cursor al botón ACEPTAR (1445, 905) — tras el 1er click apenas se mueve
  const curP = clamp((t-T.cur0)/(T.cur1-T.cur0), 0, 1);
  const curE = Easing.easeInOutCubic(Math.pow(curP, 0.85));
  const A = {x:1730, y:1010}, B = {x:1445, y:905};
  const len = Math.hypot(B.x-A.x, B.y-A.y) || 1;
  const C = { x:(A.x+B.x)/2 - (B.y-A.y)/len*-90, y:(A.y+B.y)/2 + (B.x-A.x)/len*-90 };
  const v = 1-curE;
  const cur = { x: v*v*A.x + 2*v*curE*C.x + curE*curE*B.x, y: v*v*A.y + 2*v*curE*C.y + curE*curE*B.y };
  const clicking = T.click.some(c => t >= c && t < c+0.2);
  const lastClick = [...T.click].reverse().find(c => t >= c);
  const ringP = lastClick != null ? clamp((t-lastClick)/0.45, 0, 1) : 1;

  const chip1 = clamp((t-T.chips)/0.4, 0, 1), chip2 = clamp((t-T.chips2)/0.4, 0, 1);
  const remP = clamp((t-T.remate)/0.55, 0, 1), remE = Easing.easeOutBack(remP);
  const dimP = clamp((t-T.dim)/0.8, 0, 1);
  const swapSin = swapP === 0 ? 0 : Math.sin(swapP*Math.PI);
  // Time-lapse de la barra en el remate: "un rato de revisar" hecho visible
  const tlP = clamp((t-(T.remate+1.2))/3.0, 0, 1);
  const nRev = tlP > 0 ? Math.round(lerp(1+nDone, 145, Easing.easeInOutCubic(tlP))) : 1 + nDone;
  const tlDone = tlP >= 1;

  const matchStyle = (on)=> on ? {boxShadow:'0 0 0 3px rgba(16,185,129,0.6)', background:'rgba(16,185,129,0.12)', borderRadius:5} : {};
  const selBox = (k, val, wide, hlOn)=>(
    <div style={{flex: wide?1.5:1, background:'#fff', border:`1.5px solid ${hlOn?'#0085FF':'#E2E8F0'}`, borderRadius:9, padding:'7px 12px', boxShadow: hlOn?'0 0 0 4px rgba(0,133,255,0.14)':'none', minWidth:0}}>
      <div className="f-mono" style={{fontSize:8.5, letterSpacing:'1px', color:'#94A3B8', textTransform:'uppercase', marginBottom:2}}>{k}</div>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:6}}>
        <span className="f-plex" style={{fontSize:13, fontWeight:600, color:'#0F172A', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{val}</span>
        <span style={{fontSize:8, color:'#94A3B8'}}>▾</span>
      </div>
    </div>
  );

  return (
    <SlideCanvas variant="light-soft">
      <div style={{position:'absolute', left:210, top:96, width:1500, height:890, opacity:(winP)*(1-dimP*0.6)*(1-swapSin*0.45), transform:`translateY(${(1-winE)*26 - swapSin*18}px) scale(${lerp(0.975,1,winE) * lerp(1, 0.94, swapSin)})`}}>
        <div style={{position:'absolute', inset:0, background:'#F6F8FB', borderRadius:14, overflow:'hidden', border:'1px solid #E2E8F0', boxShadow:'0 46px 110px rgba(15,23,42,0.20)'}}>
          {/* Barra de título del diálogo */}
          <div style={{height:44, background:'#fff', borderBottom:'1px solid #EEF2F7', display:'flex', alignItems:'center', padding:'0 18px', gap:10}}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#475569" strokeWidth="2"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 7h8M8 11h8M8 15h5"/></svg>
            <span className="f-plex" style={{fontSize:13.5, fontWeight:700, color:'#0F172A'}}>Factura Recibida</span>
            <div style={{flex:1}}/>
            {/* Progreso de la revisión del buzón (x de 145) */}
            <div style={{display:'flex', alignItems:'center', gap:10, marginRight:12}}>
              <span className="f-mono" style={{fontSize:11, fontWeight:700, color: tlDone?'#059669':'#475569'}}>{tlDone ? '✓ 145 de 145 — revisadas' : `Revisando ${nRev} de 145`}</span>
              <div style={{width:190, height:7, background:'#EEF2F7', borderRadius:100, overflow:'hidden'}}>
                <div style={{width:`${(nRev/145)*100}%`, height:'100%', background: tlDone?'linear-gradient(90deg,#10B981,#34D399)':'linear-gradient(90deg,#0085FF,#00C6FF)', borderRadius:100}}/>
              </div>
            </div>
            {['—','□','×'].map((c,i)=><span key={i} className="f-mono" style={{fontSize:12, color:'#94A3B8', marginLeft:8}}>{c}</span>)}
          </div>

          {/* Fila de selects (la cabecera real) */}
          <div style={{display:'flex', gap:10, padding:'14px 18px 4px', alignItems:'stretch'}}>
            {selBox('Proveedor', f.prov, false, hl(T.hlProv))}
            {selBox('Datos fiscales', f.fis, true, hl(T.hlProv))}
            {selBox('Categoría', f.cat, false, hl(T.hlConc))}
            {selBox('Estado', 'Abierta', false, false)}
            {selBox('Número', f.num, false, false)}
            {selBox('Fecha', f.fecha, false, false)}
            <div className="f-mono" style={{alignSelf:'center', fontSize:12, fontWeight:800, color:'#059669', background:'rgba(16,185,129,0.10)', border:'1.5px solid rgba(16,185,129,0.5)', borderRadius:100, padding:'5px 13px', flexShrink:0}}>✓ 6/6</div>
          </div>
          <div className="f-mono" style={{padding:'4px 22px 8px', fontSize:9.5, color:'#94A3B8'}}>{f.dir}</div>

          <div style={{display:'grid', gridTemplateColumns:'1fr 620px', gap:14, padding:'2px 18px 0', height:614}}>
            {/* Columna izquierda: SELECCIONADOS */}
            <div style={{background:'#fff', border:'1px solid #E2E8F0', borderRadius:12, padding:'14px 18px', position:'relative'}}>
              <div className="f-mono" style={{fontSize:9.5, letterSpacing:'1.5px', color:'#94A3B8', marginBottom:12}}>SELECCIONADOS</div>
              <div style={{border:`1.5px solid ${hl(T.hlConc)?'#0085FF':'#EEF2F7'}`, borderRadius:11, padding:'12px 16px', boxShadow: hl(T.hlConc)?'0 0 0 4px rgba(0,133,255,0.12)':'0 3px 10px rgba(15,23,42,0.04)'}}>
                <div style={{display:'flex', alignItems:'center', gap:10}}>
                  <div style={{width:30, height:30, background:'rgba(0,133,255,0.08)', borderRadius:7, display:'flex', alignItems:'center', justifyContent:'center'}}><span style={{fontSize:13}}>{f.icon}</span></div>
                  <span className="f-plex" style={{fontSize:14.5, fontWeight:600, color:'#0F172A', flex:1}}>{f.conc}</span>
                  <span style={{color:'#0085FF', fontSize:12}}>✎</span>
                  <span style={{color:'#EF4444', fontSize:12}}>⊗</span>
                </div>
                <div style={{display:'flex', alignItems:'flex-end', gap:14, marginTop:12}}>
                  {[['Und', f.und],['Precio', f.precio]].map((c,i)=>(
                    <div key={i} style={{border:'1px solid #E2E8F0', borderRadius:8, padding:'5px 12px'}}>
                      <div className="f-mono" style={{fontSize:8, color:'#94A3B8', textTransform:'uppercase'}}>{c[0]}</div>
                      <div className="f-mono" style={{fontSize:13, fontWeight:600, color:'#0F172A'}}>{c[1]}</div>
                    </div>
                  ))}
                  <div style={{flex:1}}/>
                  <div style={{textAlign:'right'}}>
                    <span className="f-mono" style={{fontSize:10, color:'#94A3B8', marginRight:8}}>Subtotal {f.sub} · Impuestos 21%</span>
                    <span className="f-mono" style={{fontSize:15, fontWeight:800, color:'#0085FF', background:'rgba(0,133,255,0.08)', borderRadius:7, padding:'4px 10px', ...matchStyle(match1)}}>{f.total}</span>
                  </div>
                </div>
              </div>

              {/* Pie de totales */}
              <div style={{position:'absolute', left:18, right:18, bottom:14, display:'flex', alignItems:'center', gap:14, borderTop:'1px solid #EEF2F7', paddingTop:12}}>
                <span className="f-mono" style={{fontSize:10.5, color:'#64748B'}}>🇪🇸 ES · EUR</span>
                <span className="f-mono" style={{fontSize:10.5, color:'#B45309', background:'#FEF3C7', borderRadius:100, padding:'2px 10px'}}>● Pago 0/{f.total.replace(' €','')}</span>
                <div style={{flex:1}}/>
                <span className="f-mono" style={{fontSize:11.5, color:'#64748B'}}>Sub. <b style={{color:'#0F172A'}}>{f.sub}</b></span>
                <span className="f-mono" style={{fontSize:11.5, color:'#64748B'}}>IVA <b style={{color:'#0F172A'}}>{f.iva}</b></span>
                <span className="f-mono" style={{fontSize:13.5, fontWeight:800, color:'#0085FF'}}>Total {f.total}</span>
              </div>
            </div>

            {/* Columna derecha: pestañas + visor PDF */}
            <div style={{display:'flex', flexDirection:'column', gap:0}}>
              <div style={{display:'flex', gap:20, padding:'2px 6px 10px'}}>
                {['+ AGREGAR','ARCHIVO','PARÁMETROS','NOTAS'].map((p,i)=>(
                  <span key={p} className="f-plex" style={{fontSize:11.5, fontWeight:700, color:i===1?'#0085FF':'#94A3B8', borderBottom:i===1?'2.5px solid #0085FF':'2.5px solid transparent', paddingBottom:5}}>{p}</span>
                ))}
              </div>
              <div style={{flex:1, background:'#252B36', borderRadius:12, padding:'16px 20px', overflow:'hidden', boxShadow: glowOn?'0 0 0 3.5px rgba(0,133,255,0.55)':'none'}}>
                <div className="f-mono" style={{fontSize:9.5, color:'#8A94A6', marginBottom:10}}>≡ {f.num.toLowerCase()}-original.pdf</div>
                <div style={{background:'#fff', borderRadius:5, height:'calc(100% - 26px)', padding:'20px 24px', position:'relative', transform:`scale(${lerp(1, 1.035, Easing.easeInOutQuad(zoomP))})`, transformOrigin:'50% 30%'}}>
                  <div style={{display:'flex', justifyContent:'space-between'}}>
                    <div>
                      <div className="f-plex" style={{fontSize:16, fontWeight:800, color:'#0F172A'}}>{f.prov.toUpperCase()}</div>
                      <div className="f-mono" style={{fontSize:8.5, color:'#94A3B8'}}>{f.dir}</div>
                    </div>
                    <div className="f-mono" style={{fontSize:9.5, color:'#64748B', textAlign:'right'}}>
                      <div style={{padding:'1px 5px', ...matchStyle(match2)}}>Nº {f.num}</div>
                      <div>{f.fecha}</div>
                    </div>
                  </div>
                  <div style={{height:1, background:'#E2E8F0', margin:'12px 0'}}/>
                  {[92,74,86,58,66].map((w,i)=><div key={i} style={{height:5, width:`${w}%`, background:'#EEF2F7', borderRadius:3, marginTop:8}}/>)}
                  <div style={{position:'absolute', left:24, right:24, bottom:18}}>
                    <div style={{height:1, background:'#E2E8F0', marginBottom:9}}/>
                    <div style={{display:'flex', justifyContent:'space-between'}}>
                      <span style={{fontSize:11, color:'#64748B'}}>TOTAL</span>
                      <span className="f-mono" style={{fontSize:14, fontWeight:800, color:'#0F172A', padding:'1px 6px', ...matchStyle(match1)}}>{f.total}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Barra inferior: FLUJO · ACEPTAR · CERRAR */}
          <div style={{position:'absolute', left:0, right:0, bottom:0, height:64, background:'#fff', borderTop:'1px solid #EEF2F7', display:'flex', alignItems:'center', padding:'0 22px', gap:14}}>
            <span className="f-mono" style={{fontSize:11.5, fontWeight:700, color:'#64748B'}}>⧉ FLUJO</span>
            <div style={{flex:1}}/>
            {chip1 > 0 && <span className="f-mono" style={{fontSize:11, fontWeight:800, color:'#059669', background:'rgba(16,185,129,0.10)', border:'1px solid rgba(16,185,129,0.4)', borderRadius:100, padding:'4px 12px', opacity:clamp(chip1*1.3,0,1), transform:`scale(${lerp(0.7,1,Easing.easeOutBack(chip1))})`}}>✓ Contabilizada</span>}
            {chip2 > 0 && <span className="f-mono" style={{fontSize:11, fontWeight:800, color:'#059669', background:'rgba(16,185,129,0.10)', border:'1px solid rgba(16,185,129,0.4)', borderRadius:100, padding:'4px 12px', opacity:clamp(chip2*1.3,0,1), transform:`scale(${lerp(0.7,1,Easing.easeOutBack(chip2))})`}}>✓ IVA del trimestre: al día</span>}
            <div style={{position:'relative', display:'flex', alignItems:'center', gap:8, background:'linear-gradient(180deg,#10B981,#059669)', color:'#fff', borderRadius:100, padding:'11px 26px', boxShadow: clicking?'0 3px 8px rgba(16,185,129,0.4)':'0 8px 22px rgba(16,185,129,0.4)', transform: clicking?'scale(0.93)':'scale(1)'}}>
              <span style={{fontWeight:800, fontSize:13}}>✓</span>
              <span className="f-plex" style={{fontSize:14.5, fontWeight:700}}>ACEPTAR</span>
              {ringP < 1 && <div style={{position:'absolute', inset:-7, borderRadius:100, border:'3px solid rgba(0,133,255,0.7)', opacity:1-ringP, transform:`scale(${lerp(0.85,1.45,Easing.easeOutCubic(ringP))})`}}/>}
            </div>
            <div style={{display:'flex', alignItems:'center', gap:7, color:'#EF4444', border:'1.5px solid rgba(239,68,68,0.35)', borderRadius:100, padding:'10px 20px'}}>
              <span style={{fontWeight:800, fontSize:12}}>✕</span>
              <span className="f-plex" style={{fontSize:13.5, fontWeight:700}}>CERRAR</span>
            </div>
          </div>
        </div>
      </div>

      {/* Remate tipográfico (arriba: la franja libre sobre el diálogo) */}
      {remP > 0 && (
        <div style={{position:'absolute', top:26, left:0, right:0, textAlign:'center', zIndex:15, opacity:clamp(remP*1.3,0,1)*(1-dimP), transform:`translateY(${(1-remE)*-20}px)`}}>
          <span className="f-plex" style={{fontSize:26, fontWeight:600, color:'#64748B', position:'relative'}}>
            Días de teclear
            <span style={{position:'absolute', left:-4, right:-4, top:'54%', height:3.5, background:'#EF4444', borderRadius:3, transform:`scaleX(${clamp((t-T.remate-0.3)/0.4,0,1)})`, transformOrigin:'0 50%'}}/>
          </span>
          <span className="f-plex" style={{fontSize:26, fontWeight:800, color:'#059669', marginLeft:22}}>→ un rato de revisar</span>
        </div>
      )}

      {curP > 0 && <CineCursor x={cur.x} y={cur.y} clicking={clicking}/>}

    </SlideCanvas>
  );
}
Object.assign(window, { Escena07 });