// === Escena 06 — Si no cuadra, cerrar, y recapitulación + eco ===
// CierreDeCajaDialog: contado menor → banner rojo «Faltan 5,00 € en el cajón»; «Volver a calcular» rehace
// el arqueo; «Cerrar caja» con descuadre pregunta «Cerrar con descuadre» («Cerrar igualmente» /
// «Vuelvo a contar»); al guardar, aviso «Caja cerrada · Queda guardado el arqueo del día.», la insignia
// pasa a «Cerrada» y el botón a «Guardar corrección».
function EscenaTPV06({ t }){
  const G = window.GUION[5];
  const T = {
    menos:      B(G, "Si cuentas de menos"),          // "Si cuentas de menos"
    rojo:       B(G, "sale en rojo"),                 // "sale en rojo"
    faltan:     B(G, "faltan cinco"),                 // "faltan cinco euros en el cajón"
    otraVez:    B(G, "Cuenta otra vez"),              // "Cuenta otra vez antes de cerrar"
    seguido:    B(G, "¿Has seguido"),                 // "¿Has seguido cobrando mientras contabas?"
    recalc:     B(G, "Pulsa volver"),                 // "Pulsa volver a calcular"
    vuelve:     B(G, "Si vuelve a faltar"),           // "Si vuelve a faltar"
    igualmente: B(G, "cerrar igualmente"),            // "puedes cerrar igualmente"
    registrado: B(G, "el descuadre queda"),           // "y el descuadre queda registrado"
    bien:       B(G, "Cuando esté bien"),             // "Cuando esté bien"
    cerrar:     B(G, "pulsa cerrar caja"),            // "pulsa cerrar caja"
    guardado:   B(G, "El arqueo del día"),            // "El arqueo del día queda guardado"
    resumen:    B(G, "En resumen"),                   // "En resumen"
    ticket:     B(G, "llenas el ticket"),             // "llenas el ticket"
    cobras:     B(G, "cobras, y"),                    // "cobras"
    finalizas:  B(G, "y finalizas"),                  // "y finalizas"
    eco1:       B(G, "Cada cobro se apunta"),         // "Cada cobro se apunta solo"
    eco2:       B(G, "Al cerrar, tú solo"),           // "Al cerrar, tú solo cuentas el cajón"
  };
  const clicRecalc = T.recalc + 0.6;
  const clicCerrar1 = T.vuelve + 0.4, clicVuelvo = T.registrado + 1.3;
  const clicCerrar2 = T.cerrar + 0.6;

  const menos = t >= T.menos + 0.6 && t < T.bien + 0.2;
  const contado = menos ? '522,80 €' : '527,80 €';
  const cerrada = t >= clicCerrar2 + 0.5;
  const banner = menos ? (t >= T.rojo ? 'faltan' : null) : 'cuadra';
  const bannerP = menos ? ent(t, T.rojo, 0.6) : (t < T.menos + 0.6 ? 1 : ent(t, T.bien + 0.4, 0.6));
  const d = { contado, banner, bannerP, cerrada };
  const r = {
    contado: Math.max(foco(t, T.menos, T.faltan), foco(t, T.otraVez, T.seguido), foco(t, T.bien, T.cerrar)),
    recalc:  foco(t, T.recalc, T.vuelve),
    cerrar:  Math.max(foco(t, T.vuelve, clicCerrar1 + 0.3), foco(t, T.cerrar, clicCerrar2 + 0.6)),
    b3:      1,
  };
  const confP = ent(t, clicCerrar1 + 0.3, 0.6) * sal(t, clicVuelvo + 0.2, 0.5);
  const winP = sal(t, T.resumen - 0.3, 0.8);
  const avisoP = ent(t, T.guardado - 0.2, 0.7);

  // ── Recapitulación ──
  const recP = ent(t, T.resumen, 0.8);
  const PASOS = [[T.ticket, 'receipt_long', 'Llenas el ticket'], [T.cobras, 'payments', 'Cobras'], [T.finalizas, 'check', 'Finalizas']];

  return (
    <Fondo>
      {winP > 0 && (<div style={{ position:'absolute', inset:0, opacity:winP }}>
        <Rotulo t={t} s={0} paso="PASO 5 · CERRAR LA CAJA" titulo={t < T.bien ? 'Si no cuadra' : 'Cerrar la caja'}/>
        <Ventana url="play.dinaup.com/App/TPV/CashClosing">
          <AppTPV activo="cierres"/>
          <Mascara op={1}/>
          <DialogoCierre p={1} d={d} r={r}/>
          {confP > 0 && (
            <div style={{ position:'absolute', inset:0 }}>
              <Mascara op={confP * 0.6}/>
              <div style={{ position:'absolute', left:530, top:280, width:640, height:270, background:'#fff', borderRadius:12, boxShadow:'0 24px 60px rgba(15,23,42,0.3)',
                opacity:confP, transform:`translateY(${(1 - confP) * 16}px)`, padding:'22px 26px', boxSizing:'border-box', fontFamily:ROBOTO }}>
                <div style={{ display:'flex', alignItems:'center', gap:12 }}><Ico n="warning" s={30} c={C.ambar}/><span style={{ fontSize:22, fontWeight:700, color:C.tinta }}>Cerrar con descuadre</span></div>
                <div style={{ fontSize:18, color:C.texto, marginTop:16, lineHeight:1.45 }}>Faltan 5,00 € en el cajón. ¿Cerrar la caja igualmente y dejar el descuadre registrado?</div>
                <div style={{ position:'absolute', right:26, bottom:22, display:'flex', gap:12 }}>
                  <Btn txt="Vuelvo a contar" variante="outlined" tipo="light" h={46} fs={17}/>
                  <Btn txt="Cerrar igualmente" tipo="warning" h={46} fs={17} a={foco(t, T.igualmente, T.registrado + 0.9)}/>
                </div>
              </div>
            </div>
          )}
          {avisoP > 0 && <Aviso p={avisoP} x={1250} y={20} titulo="Caja cerrada" texto="Queda guardado el arqueo del día."/>}
          <Cursor t={t} op={sal(t, T.guardado)}
            kf={[[T.seguido, 900, 300], [clicRecalc - 0.1, 1339, 408], [T.vuelve - 0.3, 1339, 408], [clicCerrar1 - 0.1, 1345, 547], [T.registrado, 1345, 547],
                 [clicVuelvo - 0.1, 880, 503], [T.cerrar - 0.2, 880, 503], [clicCerrar2 - 0.1, 1345, 547]]}
            clics={[clicRecalc, clicCerrar1, clicVuelvo, clicCerrar2]}/>
        </Ventana>
      </div>)}

      {recP > 0 && (
        <div style={{ position:'absolute', inset:0, opacity:recP }}>
          <div className="f-mono" style={{ position:'absolute', left:0, right:0, top:150, textAlign:'center', fontSize:16, fontWeight:600, letterSpacing:'2px', color:C.azul }}>EN RESUMEN</div>
          <div style={{ position:'absolute', left:0, right:0, top:220, display:'flex', justifyContent:'center', gap:28 }}>
            {PASOS.map(([s, ico, txt], i) => {
              const p = ent(t, s - 0.1, 0.7);
              return (
                <div key={txt} style={{ width:330, height:190, background:'#fff', borderRadius:16, border:`1px solid ${C.borde}`, boxShadow:'0 10px 26px rgba(15,23,42,0.06)',
                  display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:14, opacity:p, transform:`translateY(${(1 - p) * 14}px)` }}>
                  <div className="f-mono" style={{ fontSize:15, color:C.grisC }}>{i + 1}</div>
                  <Ico n={ico} s={48} c={C.azul}/>
                  <div className="f-plex" style={{ fontSize:28, fontWeight:700, color:C.tinta }}>{txt}</div>
                </div>
              );
            })}
          </div>
          <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:530, textAlign:'center', fontSize:46, fontWeight:600, color:C.tinta, opacity:ent(t, T.eco1, 0.8) }}>Cada cobro se apunta solo.</div>
          <div className="f-plex" style={{ position:'absolute', left:0, right:0, top:606, textAlign:'center', fontSize:46, fontWeight:600, color:C.verde, opacity:ent(t, T.eco2, 0.8) }}>Al cerrar, tú solo cuentas el cajón.</div>
          <div style={{ position:'absolute', left:0, right:0, top:820, display:'flex', flexDirection:'column', alignItems:'center', gap:14, opacity:ent(t, T.eco2 + 1.6, 0.9) }}>
            <DinaupLogo size={34}/>
            <div className="f-mono" style={{ fontSize:18, color:C.gris }}>play.dinaup.com · TPV</div>
          </div>
        </div>
      )}
    </Fondo>
  );
}
Object.assign(window, { EscenaTPV06 });