/* Movimiento y componentes animados. Todo se apaga con "reducir movimiento" (base.css fuerza
   duraciones casi nulas y una sola iteración). Se carga después de app.css y vistas.css. */

/* ---------- Entrada escalonada de cada pantalla ---------- */
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.entra :is(.pagina-cab, .marca-banda, .escaner, .heroe, .card, .kpis, .prods, .navegador, .feed__item, .lista-docs .tabla-wrap, .filtros, .admin__barra, .paginacion) {
  animation: aparece .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms);
}

/* ---------- Pulsaciones y detalles de interacción ---------- */
.btn:active:not(:disabled), .chip:active, .pag:active:not(:disabled), .ctl:active { transform: scale(.97); }
.prod:active { transform: scale(.995); }
.prod__nombre, .rail__item .ico { transition: transform .2s ease; }
.prod:hover .prod__nombre { transform: translateX(3px); }
.rail__item:hover .ico { transform: translateX(2px); color: var(--ink); }
@keyframes destello { 0% { background: #d4d4d4; } 100% { background: transparent; } }
.prod--pulso { animation: destello .65s ease-out; }
.vuelo { position: fixed; z-index: 96; width: 18px; height: 18px; border-radius: 50%; background: var(--marca); border: 2px solid var(--marca-fuerte); box-shadow: 0 4px 10px rgba(0, 0, 0, .3); pointer-events: none; }
@keyframes linea-entra { from { opacity: 0; transform: translateX(18px); background: #ececec; } to { opacity: 1; transform: none; } }
.linea--nueva { animation: linea-entra .4s cubic-bezier(.2, .7, .2, 1); }
.paso--hecho:last-child .paso__punto { animation: pop .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.paso--error .paso__punto { animation: sacude .45s ease-in-out; }
@keyframes sacude { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* ---------- Medidor de barras ---------- */
@keyframes late-veredicto { 0% { transform: scale(1); } 35% { transform: scale(1.012); box-shadow: 0 0 0 5px rgba(10, 10, 10, .08); } 100% { transform: scale(1); box-shadow: none; } }
.veredicto--cambia { animation: late-veredicto .7s ease-out; }

/* ---------- Actividad en vivo ---------- */
.vivo { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 14px 2px 11px; border: 1px solid var(--hair); border-radius: 18px; background: #fff; color: var(--mid); font: 500 14.5px/1.4 var(--font); cursor: pointer; transition: border-color .15s, color .15s; }
.vivo:hover { border-color: var(--hair-strong); }
.vivo--on { color: var(--ink); border-color: var(--ink); }
.vivo__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--hair-strong); }
.vivo--on .vivo__punto { background: var(--ink); animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(10, 10, 10, .4); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.fila--nueva { animation: fila-nueva 1.8s ease-out; }
@keyframes fila-nueva { 0% { background: rgba(10, 10, 10, .12); transform: translateY(-8px); opacity: .2; } 18% { opacity: 1; transform: none; } 100% { background: transparent; } }

/* ---------- El comprobante sale de la impresora ---------- */
.impresora { position: relative; z-index: 2; max-width: 440px; height: 22px; margin: 12px auto -10px; border-radius: 12px 12px 6px 6px; background: var(--ink); box-shadow: 0 5px 10px -5px rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 14px; }
.impresora::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 5px; border-radius: 4px; background: #000; }
.impresora i { width: 5px; height: 5px; border-radius: 50%; background: #525252; }
.impresora:has(+ .cafe--imprime) i:first-child { animation: parpadeo .26s steps(2) 5; }
@keyframes parpadeo { 50% { background: #fafafa; } }
.impresora + .cafe { margin-top: 0; position: relative; z-index: 1; }
.cafe--imprime { animation: imprime 1.35s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes imprime { 0% { clip-path: inset(0 0 100% 0); transform: translateY(-36px); } 100% { clip-path: inset(-14px -14px -28px -14px); transform: none; } }
.cafe--imprime .sello { animation: sellar .35s cubic-bezier(.2, 1.4, .4, 1) 1.15s both; }
.cafe--imprime .cafe__qr svg { animation: aparece-qr .6s cubic-bezier(.2, .7, .2, 1) .9s both; }
@keyframes aparece-qr { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.inicio__lado .impresora { margin-top: 4px; }

/* ---------- Gráficos ---------- */
.gr-barra { transform-box: fill-box; transform-origin: 50% 100%; animation: crece .75s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media print { #print-root .cafe { animation: none !important; clip-path: none !important; } }

/* ---------- Ajustes de proporción ---------- */
.impresora { width: 100%; }
@media (min-width: 1500px) {
  .prod { grid-template-columns: 92px 1fr 122px 100px 36px; }
  .prod__tasa { white-space: nowrap; }
}
@media (min-width: 1500px) { .prod { grid-template-columns: 74px 1fr 96px 92px 34px; gap: 2px 10px; } }

/* Reducir movimiento: sin retrasos ni contenido oculto esperando su turno */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; }
}