// === escena-05 — La serie del ejercicio: no es una cuenta, y lo rompe todo ===
function EscenaCU05({ t }){

  const T = {
    nocuenta:  0.75,   // "que no es una cuenta"
    campo:     7.25,   // "qué serie numera los asientos"
    creanigual:11.53,  // "se crean igual"
    sinnumero:13.62,   // "no tienen número"
    nolove:   20.14,   // "el libro no lo ve"
    rojo:     22.81,   // "te lo dice en rojo"
    remate:   30.12,   // "el que más disgustos evita"
    salida:   32.39,   // "Recojamos el mapa entero"
  };
  const ap = (x, d=0.55, e=Easing.easeOutCubic) => e(clamp((t - x) / d, 0, 1));

  const vacia = t >= T.campo && t < T.rojo;   // el campo, vacío, durante todo el bloque del fallo

  return (
    <SlideCanvas variant={t >= T.rojo ? 'problem' : 'light-soft'}>
      <DemoHeader t={t} eyebrow="NO ES UNA CUENTA" title="Pero lo rompe todo si falta" />

      {/* La ficha del ejercicio y su campo */}
      <div style={{position:'absolute', left:150, top:270, width:760, opacity: ap(T.nocuenta, 0.6)}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 20px 50px rgba(15,23,42,0.08)', padding:'26px 30px'}}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>FICHA DEL EJERCICIO</div>
          <div className="f-plex" style={{fontSize:36, fontWeight:600, color:'#0F172A', marginTop:6}}>Ejercicio 2026</div>

          {[
            { l:'Inicio del ejercicio', v:'01/01/2026', beat:T.nocuenta + 0.6 },
            { l:'Fin del ejercicio',    v:'31/12/2026', beat:T.nocuenta + 0.9 },
          ].map(c=>(
            <div key={c.l} style={{
              display:'grid', gridTemplateColumns:'1fr 220px', gap:12, alignItems:'center',
              padding:'14px', marginTop:8, borderRadius:10, background:'#F8FAFC', border:'1px solid #EEF2F7',
              opacity: ap(c.beat, 0.4),
            }}>
              <span style={{fontSize:20, color:'#64748B'}}>{c.l}</span>
              <span className="f-mono" style={{fontSize:20, color:'#0F172A', textAlign:'right'}}>{c.v}</span>
            </div>
          ))}

          {/* EL campo */}
          <div style={{
            display:'grid', gridTemplateColumns:'1fr 220px', gap:12, alignItems:'center',
            padding:'16px 14px', marginTop:10, borderRadius:10,
            background: vacia ? 'rgba(239,68,68,0.08)' : 'rgba(16,185,129,0.08)',
            border:`2px solid ${vacia ? 'rgba(239,68,68,0.5)' : 'rgba(16,185,129,0.5)'}`,
            opacity: ap(T.campo, 0.5),
            transform:`scale(${1 + 0.03*Math.sin(clamp((t-T.campo)/0.6,0,1)*Math.PI)})`,
          }}>
            <span style={{fontSize:21, color:'#0F172A', fontWeight:600}}>Serie que numera los asientos</span>
            <span className="f-mono" style={{
              fontSize:20, textAlign:'right', color: vacia ? '#EF4444':'#10B981',
            }}>{vacia ? '(vacío)' : 'Asientos 2026'}</span>
          </div>
        </div>
      </div>

      {/* El asiento que nace sin número */}
      <div style={{position:'absolute', left:980, top:270, width:800, opacity: ap(T.creanigual, 0.6)}}>
        <div style={{background:'#fff', borderRadius:18, border:'1px solid #E2E8F0',
                     boxShadow:'0 20px 50px rgba(15,23,42,0.08)', padding:'26px 30px'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
            <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>ASIENTO CREADO</div>
            <div className="f-mono" style={{
              fontSize:26, color:'#EF4444', fontWeight:700, opacity: ap(T.sinnumero, 0.5),
            }}>nº — </div>
          </div>

          {[['430 Clientes','1.210,00',''],['700 Ventas','','1.000,00'],['477 iva','','210,00']].map((r,i)=>(
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'1fr 130px 130px', gap:12,
              padding:'12px 0', borderTop: i ? '1px solid #F1F5F9':'none', fontSize:20, color:'#0F172A',
              opacity: ap(T.creanigual + 0.3 + i*0.14, 0.4),
            }}>
              <span>{r[0]}</span>
              <span className="f-mono" style={{textAlign:'right'}}>{r[1]}</span>
              <span className="f-mono" style={{textAlign:'right'}}>{r[2]}</span>
            </div>
          ))}

          <div style={{
            marginTop:14, fontSize:20, color:'#10B981', opacity: ap(T.creanigual + 0.9, 0.5),
          }}>Cuadra perfectamente.</div>
        </div>

        {/* El Libro Diario, sin esa fila */}
        <div style={{
          marginTop:22, background:'#fff', borderRadius:18, border:'1px solid rgba(239,68,68,0.4)',
          boxShadow:'0 20px 50px rgba(239,68,68,0.12)', padding:'22px 26px',
          opacity: ap(T.nolove, 0.6), transform:`translateY(${(1-ap(T.nolove,0.6))*16}px)`,
        }}>
          <div className="f-mono" style={{fontSize:15, color:'#64748B', letterSpacing:'.08em'}}>LIBRO DIARIO</div>
          {['1.282 · Venta FC-35801','1.283 · Compra Endesa','1.285 · Venta FC-35816'].map((l,i)=>(
            <div key={l} style={{padding:'10px 0', borderTop: i?'1px solid #F1F5F9':'none',
                                 fontSize:20, color:'#0F172A', opacity: ap(T.nolove+0.3+i*0.12, 0.35)}}>{l}</div>
          ))}
          <div className="f-plex" style={{
            marginTop:12, fontSize:24, fontWeight:700, color:'#EF4444', opacity: ap(T.nolove+0.9, 0.5),
          }}>Existe, cuadra, y el libro no lo ve.</div>
        </div>
      </div>

      {/* El panel avisándolo en rojo, arriba del todo */}
      {t >= T.rojo - 0.4 && (
        <div style={{
          position:'absolute', left:'50%', top:830, transform:'translateX(-50%)', width:1200,
          padding:'20px 26px', borderRadius:14,
          background:'rgba(239,68,68,0.08)', border:'1px solid rgba(239,68,68,0.45)',
          display:'flex', alignItems:'center', gap:16,
          opacity: ap(T.rojo, 0.6),
        }}>
          <span className="f-plex" style={{fontSize:26, fontWeight:700, color:'#EF4444'}}>
            El ejercicio no numera los asientos
          </span>
          <span style={{fontSize:21, color:'#64748B'}}>· el panel te lo dice antes de contabilizar nada</span>
        </div>
      )}

      <div style={{
        position:'absolute', left:0, right:0, top:960, textAlign:'center',
        fontSize:26, color:'#0F172A', opacity: ap(T.remate, 0.6),
      }}>Un campo, una vez. Y es el que más disgustos evita.</div>

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