// === Escena 04 — "Estancadas" ===  [CLÍMAX]
// La imagen-momento son DOS VENTANAS diciendo el mismo hecho: la fila «Sin cambios hace 23 días»
// del panel y el «Estancada 23 días» de la tarjeta del tablero. Cada una escribe el importe con
// SU formato real: el panel `ToString("N0")` -> 18.400 € (Dashboard:118); la tarjeta `DnzSpanMoney`
// -> `ToString("C2")` -> 18.400,00 € (Tarjeta:39,42 → RegionService:122). Y el precio que paga la
// tarjeta por avisar: mientras está estancada oculta su fecha estimada de cierre (Tarjeta:68).
function EscenaPN04({ t }){
  // LOCUCIÓN (audio/escena-04.mp3): oportunidades estancadas → más de quince días → desde que
  // alguien le cambió el estado o la fase → pausa → se ordena sola → lo dice en naranja →
  // veintitrés → ese quince no es un ajuste → en configuración no hay dónde cambiarlo → abre el
  // tablero → franja naranja → el mismo aviso → dos pantallas → paga un precio → LA ÚNICA COSA.
  const T = {
    estancadas:0.3,  // "Oportunidades estancadas" -> la tarjeta entra; velo 0.22 sobre lo demás
    quince:3.3,      // "Más de quince días" -> el 15 se dibuja grande
    rotulo:4.8,      // "alguien le cambió el estado o la fase" -> el 15 se apaga a rótulo fijo
    ordena:7.9,      // "La lista se ordena sola" -> las 5 filas se recolocan por días parados
    naranja:12.0,    // "lo dice en naranja" -> los avisos #e65100 encienden en cascada
    avisoStep:0.12,   // (incremento de la cascada de avisos)
    veintitres:15.6, // "Veintitrés, en esta" -> la fila de Envases Duero sube al frente
    ajuste:17.3,     // "Ese quince no es un ajuste" -> el 15 vuelve, ahora con candado
    config:21.9,     // "en configuración no hay dónde cambiarlo" -> Configuración, ya abierta
    entradaStep:0.09, // (incremento del tachado de las ocho entradas)
    tablero:25.2,    // "abre el tablero" -> la ventana del tablero entra desde la derecha
    franja:28.5,     // "Franja naranja en el borde" -> MOMENTO 1: la franja se dibuja
    aviso:30.7,      // "el mismo aviso, con los mismos días" -> «Estancada 23 días» aterriza
    dosPantallas:33.5,// "Dos pantallas distintas" -> MOMENTO 2: el conector entre los dos «23»
    precio:38.2,     // "paga un precio por avisar" -> se abre el hueco donde iría la fecha
    fecha:42.2,      // "su fecha de cierre desaparece" -> la fecha entra fantasma y se disuelve
    unica1:46.0,     // "dos traen lista" -> ÚNICA COSA mitad 1 (prueba)
    unica2:47.5,     // "Esa lista es el trabajo de hoy" -> ÚNICA COSA mitad 2
    salida:49.7,     // "ese trabajo lo lleva alguien" -> salida hacia el reparto por comercial
  };

  // Orden final (más parada arriba, Dashboard:232) y el desorden del que parte la recolocación
  const FILAS = [
    { tit:'Suministro anual - Envases Duero',       dias:23, imp:'18.400 €', ini:1 },
    { tit:'Segunda línea - Áridos Sil',             dias:21, imp:'26.000 €', ini:3 },
    { tit:'Mantenimiento anual - Cerámicas Vall',   dias:19, imp:'4.900 €',  ini:0 },
    { tit:'Cambio de compresores - Talleres Ordás', dias:17, imp:'7.200 €',  ini:4 },
    { tit:'Repuesto de bomba - Metalúrgica Bierzo', dias:16, imp:'3.100 €',  ini:2 },
  ];
  // Las ocho entradas de Configuración del CRM (Config:6-24). Ninguna toca los días
  const CONFIG = [
    { g:'Oportunidades', e:['Tipos','Estados'] },
    { g:'Flujos',        e:['Procesos','Fases'] },
    { g:'Eventos',       e:['Tipos','Estados'] },
    { g:'Pérdidas',      e:['Motivos','Tipos de Motivos'] },
  ];
  const PX = [110, 475, 840, 1066, 1358, 1594];
  const PW = [345, 345, 206,  272,  216,  216];
  const PILLS = [
    { k:'payments',       tit:'Pipeline Total',  col:'#2e7d32', val:'231.700 €' },
    { k:'balance',        tit:'Ponderado',       col:'#1565c0', val:'103.400 €' },
    { k:'handshake',      tit:'Abiertas',        col:'#6a1b9a', val:'31' },
    { k:'event_upcoming', tit:'Cierre Este Mes', col:'#e65100', val:'7' },
    { k:'warning',        tit:'Estancadas',      col:'#bf360c', val:'9' },
    { k:'event_busy',     tit:'Sin evento',      col:'#ff6f00', val:'12' },
  ];

  const Ico = ({ n, s=24, c='#0F172A', w=2 })=>{
    const P = {
      warning:<><path d="M12 3.6 L21.4 19.6 H2.6 Z"/><path d="M12 9.6 V14"/><circle cx="12" cy="16.9" r="0.9" fill={c} stroke="none"/></>,
      event_upcoming:<><rect x="3" y="5" width="18" height="16" rx="2.5"/><path d="M3 10 H21"/><path d="M8 3 V7 M16 3 V7"/><path d="M12 18.5 V13 M9.6 15.2 L12 12.8 L14.4 15.2"/></>,
      event_busy:<><rect x="3" y="5" width="18" height="16" rx="2.5"/><path d="M3 10 H21"/><path d="M8 3 V7 M16 3 V7"/><path d="M9.5 13.5 L14.5 18.5 M14.5 13.5 L9.5 18.5"/></>,
      payments:<><rect x="2.2" y="7.6" width="15.6" height="10.8" rx="2"/><circle cx="10" cy="13" r="2.5"/><path d="M6 5.2 H19.8 A2 2 0 0 1 21.8 7.2 V15.4"/></>,
      balance:<><path d="M12 4 V20 M6.5 20 H17.5 M3.6 8.4 H20.4"/><path d="M3.6 8.4 L1.2 14.4 H6 Z"/><path d="M20.4 8.4 L18 14.4 H22.8 Z"/></>,
      handshake:<><path d="M12.4 9.2 L9.6 6.4 A2 2 0 0 0 6.8 6.4 L2.6 10.6 A2 2 0 0 0 2.6 13.4 L4.6 15.4"/><path d="M11.6 9.2 L14.4 6.4 A2 2 0 0 1 17.2 6.4 L21.4 10.6 A2 2 0 0 1 21.4 13.4 L19.4 15.4"/><path d="M7.6 12.6 L11 16 A1.8 1.8 0 0 0 13.6 16 L16.6 12.8"/></>,
      lock:<><rect x="4.5" y="10.5" width="15" height="9.5" rx="2.2"/><path d="M8 10.5 V7.6 A4 4 0 0 1 16 7.6 V10.5"/></>,
      settings:<><circle cx="12" cy="12" r="3.2"/><path d="M12 2.6 V5 M12 19 V21.4 M21.4 12 H19 M5 12 H2.6 M18.6 5.4 L16.9 7.1 M7.1 16.9 L5.4 18.6 M18.6 18.6 L16.9 16.9 M7.1 7.1 L5.4 5.4"/></>,
      sticky:<><path d="M4.5 4.5 H19.5 V14 L14 19.5 H4.5 Z"/><path d="M19.5 14 H14 V19.5"/></>,
      plus:<><path d="M12 5 V19 M5 12 H19"/></>,
      chevron:<><path d="M9 5 L16 12 L9 19"/></>,
    };
    return <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={w} strokeLinecap="round" strokeLinejoin="round">{P[n]}</svg>;
  };

  // ── Progresos ──
  const esP = clamp((t-T.estancadas)/0.8,0,1), esE = Easing.easeOutBack(esP);
  const q15In  = clamp((t-T.quince)/0.6,0,1);
  const q15Peq = clamp((t-T.rotulo)/0.6,0,1);
  const q15Vuelve = clamp((t-T.ajuste)/0.55,0,1);
  const q15Sale = clamp((t-T.config)/0.5,0,1);
  const q15Op = clamp(q15In - q15Sale, 0, 1) * lerp(lerp(1, 0.42, q15Peq), 1, q15Vuelve);
  const q15Sc = lerp(lerp(1, 0.46, Easing.easeOutCubic(q15Peq)), 1, Easing.easeOutBack(q15Vuelve));
  const rotIn  = clamp((t-T.rotulo)/0.6,0,1);
  const rotOut = clamp((t-T.config+0.3)/0.5,0,1);
  const rot = clamp(rotIn - rotOut, 0, 1);
  const cfgIn  = clamp((t-T.config)/0.65,0,1), cfgE = Easing.easeOutBack(cfgIn);
  const cfgOut = clamp((t-T.tablero)/0.5,0,1);
  const cfg = clamp(cfgIn - cfgOut, 0, 1);
  const ordena = Easing.easeInOutCubic(clamp((t-T.ordena)/1.15,0,1));
  const v23 = clamp((t-T.veintitres)/0.55,0,1), v23E = Easing.easeOutBack(v23);
  const tbP = clamp((t-T.tablero)/0.9,0,1), tbE = Easing.easeOutCubic(tbP);
  const frDraw = Easing.easeInOutCubic(clamp((t-T.franja)/1.0,0,1));
  const avP = clamp((t-T.aviso)/0.5,0,1), avE = Easing.easeOutBack(avP);
  const conDraw = Easing.easeInOutCubic(clamp((t-T.dosPantallas)/1.2,0,1));
  const slotP = clamp((t-T.precio)/0.6,0,1), slotE = Easing.easeOutCubic(slotP);
  const slotCierra = clamp((t-T.fecha-1.9)/0.7,0,1);
  const slotH = 46 * slotE * (1-slotCierra);
  const ghost = clamp(clamp((t-T.fecha)/0.5,0,1) - clamp((t-T.fecha-1.4)/0.9,0,1), 0, 1);
  const precioGlow = t >= T.precio && t < T.precio+1.6 ? Math.sin((t-T.precio)/1.6*Math.PI) : 0;

  const veloOp = t < T.unica1 ? 0 : clamp((t-T.unica1)/0.7,0,1)*0.94;
  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);
  const saP = clamp((t-T.salida)/0.7,0,1);
  const opCab = (1 - clamp((t-T.tablero)/0.6,0,1)*0.75) * (1 - veloOp/0.94);
  const conOp = (1 - clamp((t-T.precio+0.7)/0.5,0,1)) * (1 - veloOp/0.94);

  return (
    <SlideCanvas variant="light">
      <div style={{opacity:opCab}}>
        <DemoHeader t={t} eyebrow="LA SEGUNDA LISTA" title={<span>Lo que lleva parado, y desde cuándo</span>}/>
      </div>

      {/* ─────────── El panel, detrás y al 0.22 ─────────── */}
      <div style={{position:'absolute', left:80, top:150, width:1760, height:866,
                   borderRadius:18, border:'1px solid #E2E8F0', background:'#F6F8FB',
                   boxShadow:'0 30px 70px rgba(15,23,42,0.10)', overflow:'hidden',
                   opacity:0.22*(1-veloOp/0.94)}}>
        <BrowserChrome url="play.dinaup.com/App/CRM" title="CRM — Dinaup"/>
        <DinaupAppHeader breadcrumb={["CRM","Inicio"]} company="Suministros del Norte, S.L." initials="NP"/>
        {PILLS.map((p,i)=>(
          <div key={p.tit} style={{position:'absolute', left:PX[i]-80, top:164, width:PW[i], height:120,
                                   display:'flex', alignItems:'center', gap:14, padding:'0 20px', boxSizing:'border-box',
                                   background:'#fff', border:'1px solid #E2E8F0', borderRadius:14}}>
            <Ico n={p.k} s={54} c={p.col} w={1.7}/>
            <div style={{lineHeight:1.1}}>
              <div className="f-plex" style={{fontSize:48, fontWeight:800, color:p.col, whiteSpace:'nowrap'}}>{p.val}</div>
              <div className="f-plex" style={{fontSize:22, color:'#64748B', marginTop:7, whiteSpace:'nowrap'}}>{p.tit}</div>
            </div>
          </div>
        ))}
        {[['Cierre Este Mes','event_upcoming','#e65100',30],['Oportunidades Estancadas','warning','#bf360c',892]].map(c=>(
          <div key={c[0]} style={{position:'absolute', left:c[3], top:306, width:838, height:550,
                                  background:'#fff', border:'1px solid #E2E8F0', borderRadius:16}}>
            <div style={{display:'flex', alignItems:'center', gap:13, padding:'21px 26px', borderBottom:'1px solid #EEF2F6'}}>
              <Ico n={c[1]} s={27} c={c[2]} w={2}/>
              <span className="f-plex" style={{fontSize:29, fontWeight:700, color:'#0F172A'}}>{c[0]}</span>
            </div>
          </div>
        ))}
      </div>

      {/* ─────────── La tarjeta «Oportunidades Estancadas», al frente ─────────── */}
      {esP > 0 && (
        <div style={{position:'absolute', left:130, top:240, width:838,
                     background:'#fff', borderRadius:16, border:'1px solid #E2E8F0', overflow:'hidden',
                     boxShadow:'0 40px 96px rgba(15,23,42,0.28)',
                     opacity:esP*(1-veloOp/0.94), transform:`translateY(${(1-esE)*26}px)`}}>
          <div style={{display:'flex', alignItems:'center', gap:13, padding:'21px 26px', borderBottom:'1px solid #EEF2F6'}}>
            <Ico n="warning" s={27} c="#bf360c" w={2}/>
            <span className="f-plex" style={{fontSize:29, fontWeight:700, color:'#0F172A'}}>Oportunidades Estancadas</span>
          </div>
          <div style={{position:'relative', height:440}}>
            {FILAS.map((r,i)=>{
              const ent = clamp((t-T.estancadas-0.25-r.ini*0.1)/0.45,0,1);
              const y = lerp(r.ini*88, i*88, ordena);
              const av = clamp((t-T.naranja-i*T.avisoStep)/0.5,0,1);
              const frente = i === 0 ? v23 : 0;
              return (
                <div key={r.tit} style={{position:'absolute', left:0, right:0, top:y, height:88,
                                         display:'flex', alignItems:'center', gap:16, padding:'0 26px', boxSizing:'border-box',
                                         borderBottom:'1px solid #F1F5F9',
                                         background:0 < frente ? `rgba(191,54,12,${frente*0.06})` : 'transparent',
                                         opacity:clamp(ent*1.3,0,1),
                                         transform:`translateX(${(1-Easing.easeOutCubic(ent))*-18}px) scale(${lerp(1,1.015,Easing.easeOutBack(frente))})`}}>
                  <div style={{flex:1, minWidth:0, lineHeight:1.25}}>
                    <div className="f-plex" style={{fontSize:27, fontWeight:600, color:'#0F172A', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{r.tit}</div>
                    <span className="f-plex" style={{display:'inline-block', fontSize:20, color:'#e65100', marginTop:5,
                                                     padding:'2px 8px', marginLeft:-8, borderRadius:6,
                                                     background:`rgba(230,81,0,${av*0.13})`}}>
                      Sin cambios hace {r.dias} días
                    </span>
                  </div>
                  <span className="f-plex" style={{fontSize:28, fontWeight:700, color:'#2e7d32', whiteSpace:'nowrap'}}>{r.imp}</span>
                </div>
              );
            })}
            {/* El halo sobre el «23» del panel */}
            {v23 > 0.02 && (
              <div style={{position:'absolute', left:156, top:44, width:64, height:36, borderRadius:99,
                           border:'3px solid #e65100', opacity:clamp(v23*1.2,0,1)*(1-clamp((t-T.precio)/0.6,0,1)*0.5),
                           transform:`scale(${lerp(1.5,1,v23E)})`}}/>
            )}
          </div>
          <div style={{display:'flex', alignItems:'center', justifyContent:'center', gap:10, height:56, borderTop:'1px solid #F1F5F9'}}>
            <span className="f-plex" style={{fontSize:21, color:'#94A3B8'}}>‹</span>
            <span className="f-plex" style={{fontSize:21, fontWeight:700, color:'#fff', background:'#94A3B8', borderRadius:6, padding:'2px 10px'}}>1</span>
            <span className="f-plex" style={{fontSize:21, color:'#94A3B8'}}>2</span>
            <span className="f-plex" style={{fontSize:21, color:'#94A3B8'}}>›</span>
          </div>
        </div>
      )}

      {/* ─────────── El quince: viene puesto y no se configura ─────────── */}
      {q15Op > 0.01 && (
        <div style={{position:'absolute', left:1030, top:468, width:810, textAlign:'center',
                     opacity:q15Op*(1-veloOp/0.94), transform:`scale(${q15Sc})`}}>
          <div style={{display:'inline-flex', alignItems:'center', gap:22}}>
            {q15Vuelve > 0.02 && (
              <span style={{transform:`scale(${lerp(0.4,1,Easing.easeOutBack(q15Vuelve))})`, opacity:q15Vuelve}}>
                <Ico n="lock" s={78} c="#bf360c" w={1.7}/>
              </span>
            )}
            <span className="f-plex" style={{fontSize:126, fontWeight:800, color:'#bf360c', lineHeight:1, letterSpacing:'-0.04em'}}>15</span>
            <span className="f-plex" style={{fontSize:40, fontWeight:600, color:'#64748B'}}>días</span>
          </div>
        </div>
      )}

      {/* Rótulo fijo: solo cuenta desde un cambio */}
      {rot > 0.01 && (
        <div style={{position:'absolute', left:1030, top:684, width:810, opacity:rot*(1-veloOp/0.94),
                     transform:`translateY(${(1-Easing.easeOutCubic(rot))*14}px)`}}>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0', borderLeft:'6px solid #bf360c',
                       boxShadow:'0 26px 62px rgba(15,23,42,0.16)', padding:'36px 40px'}}>
            <div className="f-plex" style={{fontSize:33, color:'#0F172A', fontWeight:700, lineHeight:1.3}}>
              Solo cuenta desde un cambio.
            </div>
            <div className="f-plex" style={{fontSize:28, color:'#64748B', lineHeight:1.4, marginTop:14}}>
              Lo que nadie ha tocado nunca no entra en esta lista.
            </div>
          </div>
        </div>
      )}

      {/* Configuración del CRM, ya abierta: ocho entradas y ninguna toca los días */}
      {cfg > 0.01 && (
        <div style={{position:'absolute', left:1030, top:462, width:810, opacity:cfg,
                     transform:`scale(${lerp(0.94,1,cfgE)}) translateY(${(1-cfgE)*16}px)`}}>
          <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                       boxShadow:'0 34px 80px rgba(15,23,42,0.26)', overflow:'hidden'}}>
            <div style={{display:'flex', alignItems:'center', gap:13, padding:'20px 26px', borderBottom:'1px solid #EEF2F6', background:'#FBFCFE'}}>
              <Ico n="settings" s={26} c="#64748B" w={1.9}/>
              <span className="f-plex" style={{fontSize:27, fontWeight:700, color:'#0F172A'}}>Configuración</span>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, padding:'22px 26px'}}>
              {CONFIG.map((g,gi)=>(
                <div key={g.g} style={{border:'1px solid #E2E8F0', borderRadius:12, padding:'16px 18px'}}>
                  <div className="f-plex" style={{fontSize:22, fontWeight:700, letterSpacing:'1.4px', color:'#94A3B8'}}>{g.g.toUpperCase()}</div>
                  {g.e.map((e,ei)=>{
                    const k = gi*2+ei;
                    const tach = Easing.easeInOutCubic(clamp((t-T.config-0.45-k*T.entradaStep)/0.45,0,1));
                    return (
                      <div key={e} style={{position:'relative', display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:12}}>
                        <span className="f-plex" style={{fontSize:25, color:'#334155'}}>{e}</span>
                        <Ico n="chevron" s={20} c="#CBD5E1" w={2.2}/>
                        <span style={{position:'absolute', left:-4, right:30, top:'52%', height:3, borderRadius:2, background:'#EF4444',
                                      transform:`scaleX(${tach})`, transformOrigin:'left'}}/>
                      </div>
                    );
                  })}
                </div>
              ))}
            </div>
            <div style={{padding:'0 26px 22px'}}>
              <span className="f-plex" style={{fontSize:26, fontWeight:600, color:'#0F172A'}}>Ocho entradas. Ninguna es de días.</span>
            </div>
          </div>
        </div>
      )}

      {/* ─────────── El tablero, con la misma oportunidad ─────────── */}
      {tbP > 0 && (
        <div style={{position:'absolute', left:1030, top:240, width:780, height:760,
                     borderRadius:18, border:'1px solid #E2E8F0', background:'#F1F5F9', overflow:'hidden',
                     boxShadow:'0 40px 96px rgba(15,23,42,0.28)',
                     opacity:tbE*(1-veloOp/0.94), transform:`translateX(${(1-tbE)*180}px)`}}>
          <BrowserChrome url="play.dinaup.com/App/CRM/Oportunidades" title="Oportunidades — Dinaup"/>
          <DinaupAppHeader breadcrumb={["CRM","Oportunidades"]} company="Suministros del Norte, S.L." initials="NP"/>

          <div style={{position:'absolute', left:20, top:160, width:560}}>
            <div style={{display:'flex', alignItems:'center', gap:10, padding:'0 4px 14px'}}>
              <span className="f-plex" style={{fontSize:24, fontWeight:700, letterSpacing:'1.6px', color:'#64748B'}}>NEGOCIACIÓN</span>
            </div>

            {/* La tarjeta del tablero (Tarjeta:27-138) */}
            <div style={{position:'relative', width:520, background:'#fff', borderRadius:10,
                         borderLeft:'4px solid #0288d1',
                         boxShadow:'0 10px 30px rgba(15,23,42,0.14)', padding:'18px 20px', overflow:'hidden'}}>
              {/* Franja derecha #e65100 de 3 px + el degradado que solo tiñe el último 5 % */}
              <div style={{position:'absolute', right:0, top:0, width:3, height:`${frDraw*100}%`, background:'#e65100'}}/>
              <div style={{position:'absolute', right:0, top:0, bottom:0, width:'5%',
                           background:'linear-gradient(90deg, rgba(230,81,0,0), rgba(230,81,0,0.16))', opacity:frDraw}}/>

              <div style={{display:'flex', alignItems:'flex-start', gap:14}}>
                <span className="f-plex" style={{flex:1, fontSize:25, fontWeight:700, color:'#0F172A', lineHeight:1.25}}>
                  Suministro anual - Envases Duero
                </span>
                <span style={{width:44, height:44, borderRadius:99, flexShrink:0,
                              background:'linear-gradient(135deg,#0085FF,#56E16A)', color:'#fff',
                              display:'flex', alignItems:'center', justifyContent:'center', fontSize:17, fontWeight:700}}
                      className="f-plex">NP</span>
              </div>

              <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginTop:16}}>
                <span className="f-plex" style={{fontSize:28, fontWeight:700, color:'#2e7d32'}}>18.400,00 €</span>
                <span className="f-plex" style={{fontSize:22, color:'#666'}}>11.040,00 € ponderado</span>
              </div>

              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:14}}>
                <span className="f-plex" style={{fontSize:20, fontWeight:700, color:'#1565c0',
                                                 border:'1.4px solid rgba(21,101,192,0.45)', borderRadius:99, padding:'3px 12px'}}>60%</span>
                <span className="f-plex" style={{fontSize:20, fontWeight:600, color:'#64748B',
                                                 background:'#F1F5F9', borderRadius:99, padding:'4px 14px'}}>Propuesta</span>
              </div>

              {/* El hueco donde iría la fecha estimada de cierre: no se pinta si está estancada */}
              <div style={{height:slotH, overflow:'hidden', marginTop:slotH > 1 ? 12 : 0,
                           border:slotH > 1 ? '2px dashed #CBD5E1' : 'none', borderRadius:8,
                           display:'flex', alignItems:'center', paddingLeft:12,
                           boxShadow:0 < precioGlow ? `0 0 ${precioGlow*26}px rgba(0,133,255,0.45)` : 'none'}}>
                <span className="f-plex" style={{fontSize:22, color:'#94A3B8', opacity:ghost*0.9, whiteSpace:'nowrap'}}>
                  Cierre estimado: 04/09/2026
                </span>
              </div>

              <div style={{display:'flex', alignItems:'center', gap:9, marginTop:14,
                           opacity:clamp(avP*1.3,0,1), transform:`translateY(${(1-avE)*8}px)`}}>
                <Ico n="warning" s={22} c="#e65100" w={2.2}/>
                <span className="f-plex" style={{fontSize:23, fontWeight:700, color:'#e65100'}}>Estancada 23 días</span>
              </div>

              <div style={{height:1, background:'#EEF2F6', margin:'16px 0 0'}}/>
              <div style={{display:'flex', alignItems:'center', gap:10, marginTop:14}}>
                <Ico n="sticky" s={22} c="#94A3B8" w={1.9}/>
                <span className="f-plex" style={{flex:1, fontSize:21, color:'#94A3B8', fontStyle:'italic'}}>Nota rápida...</span>
                <span style={{width:32, height:32, borderRadius:8, border:'1.4px solid #E2E8F0',
                              display:'flex', alignItems:'center', justifyContent:'center'}}>
                  <Ico n="plus" s={18} c="#94A3B8" w={2.2}/>
                </span>
              </div>
            </div>

            {/* Otra tarjeta de la columna, en penumbra */}
            <div style={{width:520, height:120, background:'#fff', borderRadius:10, borderLeft:'4px solid #7cb342',
                         marginTop:18, opacity:0.45, padding:'18px 20px'}}>
              <div style={{width:300, height:20, borderRadius:5, background:'#EEF2F6'}}/>
              <div style={{width:180, height:16, borderRadius:5, background:'#F1F5F9', marginTop:14}}/>
            </div>
          </div>

          {/* El asomo de la siguiente columna */}
          <div style={{position:'absolute', left:600, top:160, width:150, bottom:20,
                       background:'rgba(255,255,255,0.5)', borderRadius:12, opacity:0.7}}/>
        </div>
      )}

      {/* ─────────── EL MOMENTO: las dos ventanas diciendo el mismo hecho ─────────── */}
      {conDraw > 0 && conOp > 0.01 && (
        <svg width="1920" height="1080" viewBox="0 0 1920 1080" style={{position:'absolute', inset:0, pointerEvents:'none'}}>
          <path d="M330 381 C 620 300, 930 450, 1244 642" stroke="#e65100" strokeWidth="4" fill="none" strokeLinecap="round"
                strokeDasharray="1220" strokeDashoffset={1220*(1-conDraw)} opacity={0.85*conOp}/>
          <circle cx="1244" cy="642" r={lerp(6,30,clamp((conDraw-0.85)/0.15,0,1))} fill="none" stroke="#e65100" strokeWidth="3.4"
                  opacity={clamp((conDraw-0.85)/0.15,0,1)*conOp}/>
        </svg>
      )}

      {/* ─────────── 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:378, textAlign:'center', fontSize:72, fontWeight:800,
                                        letterSpacing:'-0.03em', color:'#0F172A', opacity:u1E, transform:`translateY(${(1-u1E)*18}px)`}}>
          De los seis números, dos traen lista.
        </div>
      )}
      {u2P > 0 && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:490, textAlign:'center', fontSize:72, fontWeight:800,
                                        letterSpacing:'-0.03em', opacity:u2E, transform:`translateY(${(1-u2E)*18}px)`}}>
          <span className="grad-text">Esa lista es el trabajo de hoy.</span>
        </div>
      )}
      {saP > 0 && (
        <div style={{position:'absolute', left:0, right:0, top:700, display:'flex', justifyContent:'center', gap:26, opacity:saP}}>
          {[['SL','Sergio Lamas'],['NP','Nuria Peláez'],['IC','Iván Castro']].map((c,i)=>{
            const e = Easing.easeOutBack(clamp((t-T.salida-i*0.12)/0.5,0,1));
            return (
              <span key={c[0]} style={{display:'inline-flex', alignItems:'center', gap:14, padding:'14px 24px',
                                       background:'#fff', border:'1px solid #E2E8F0', borderRadius:99,
                                       boxShadow:'0 12px 30px rgba(15,23,42,0.10)',
                                       transform:`scale(${lerp(0.7,1,e)})`, opacity:clamp(e*1.3,0,1)}}>
                <span className="f-plex" style={{width:46, height:46, borderRadius:99, background:'linear-gradient(135deg,#0085FF,#56E16A)',
                                                 color:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
                                                 fontSize:18, fontWeight:700}}>{c[0]}</span>
                <span className="f-plex" style={{fontSize:28, fontWeight:600, color:'#0F172A'}}>{c[1]}</span>
              </span>
            );
          })}
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaPN04 });