;
return (
{label}
);
};
const Flecha = ({ start })=>{
const p = clamp((t-start)/0.45, 0, 1), e = Easing.easeInOutCubic(p);
return (
);
};
const iconRecap = (kind, color)=>{
if (kind === 'catalogo') return (
);
if (kind === 'nomina') return (
);
return (
D
H
);
};
const RECAP = [
{ kind:'catalogo', color:'#0085FF', tag:'UNA VEZ', name:'El catálogo', desc:'Naturaleza, destino y dos cuentas.', in:21.15, check:T.check1 },
{ kind:'nomina', color:'#10B981', tag:'HEREDA Y DERIVA', name:'La nómina', desc:'Totales y reparto, derivados.', in:21.75, check:T.check2 },
{ kind:'asiento', color:'#0F172A', tag:'SALE SOLO', name:'El asiento', desc:'Cuadrado al céntimo.', in:22.35, check:T.check3 },
];
return (
{/* Header (se retira con el recap, antes del eco) */}
{headerOut > 0 && (
Cierre de mes: una pantalla}/>
)}
{/* ============ FASE A — pantalla Contabilidad automática ============ */}
{t < 21.15 && (
{/* Mockup navegador */}
{/* Título del panel + subrayado al nombrarlo */}
Contabilidad automática
Nóminas de marzo · sin asiento
{/* Chip resultado tras procesar */}
{t >= 10.3 && (
)}
{/* Botón Procesar */}
{/* Barra de progreso corta */}
{t >= T.click + 0.05 && pgOut > 0 && (
)}
{/* Cabecera de la tabla */}
EMPLEADO
PERIODO
ASIENTO
{/* Filas: 4 nóminas del periodo */}
{ROWS.map((r,i)=>{
const inP = clamp((t-(2.3+i*0.3))/0.5, 0, 1), inE = Easing.easeOutCubic(inP);
if (inP <= 0) return null;
const marcado = t >= CLICKS[i];
const saP = clamp((t-(T.sinAsiento+i*0.12))/0.4, 0, 1); // chip "Sin asiento"
const saOut = 1 - clamp((t-(chkAsiento(i)-0.25))/0.25, 0, 1); // se disuelve justo antes de llegar el asiento
const okP = clamp((t-chkAsiento(i))/0.5, 0, 1), okE = Easing.easeOutBack(okP);
return (
{r.ini}
{r.name}
01/03 – 31/03
{/* Antes: sin asiento */}
{saP > 0 && saOut > 0 && okP <= 0 && (
Sin asiento
)}
{/* Después: check verde + nº de asiento */}
{okP > 0 && (
{r.asiento}
)}
);
})}
{/* Tarjeta: el estado sigue el ciclo */}
{t >= T.ciclo && (
ESTADO DE LA NÓMINA
El estado sigue el ciclo
)}
{/* Banner vigía: Ponerse al día */}
{t >= T.vigia && (()=>{
const vp = clamp((t-T.vigia)/0.6, 0, 1), ve = Easing.easeOutBack(vp);
const PEND = [ {ini:'LM', name:'Laura Medina'}, {ini:'DC', name:'David Costa'} ];
return (
Ponerse al día
Vigila lo que falta
{t >= T.avatares && (
2
)}
{/* Dos empleados sin nómina este mes */}
{PEND.map((p,i)=>{
const ap = clamp((t-(T.avatares+i*0.3))/0.5, 0, 1), ae = Easing.easeOutCubic(ap);
if (ap <= 0) return null;
return (
{p.ini}
{p.name}
Sin nómina este mes
);
})}
);
})()}
{/* Cursor guionizado: marca las 4 y pulsa Procesar */}
{RECAP.map((c,i)=>{
const cp = clamp((t-c.in)/0.6, 0, 1), ce = Easing.easeOutBack(cp);
if (cp <= 0) return
;
const pulso = c.kind==='nomina' ? 1 + 0.025*Math.sin(clamp((t-T.hereda)/0.9,0,1)*Math.PI) : 1;
const okP = clamp((t-c.check)/0.45, 0, 1), okE = Easing.easeOutBack(okP);
return (
{iconRecap(c.kind, c.color)}
{c.desc}
{/* Check de cada idea, en su beat */}
{okP > 0 && (
)}
);
})}
)}
{/* ============ FASE C — ECO + cierre ============ */}
{ecoP > 0 && (
El concepto lleva el asiento dentro.
{cierreP > 0 && (
Eso es llevar nóminas en Dinaup.
)}
)}
);
}
Object.assign(window, { EscenaNO06 });