/* Verigas v0.1 — Capa de animaciones (CSS puro, sin dependencias). */

/* Respeta accesibilidad */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* --- Entrada escalonada de elementos (.reveal activado por JS al entrar en viewport) --- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal-1 { transition-delay: .04s; }
.reveal-2 { transition-delay: .10s; }
.reveal-3 { transition-delay: .16s; }
.reveal-4 { transition-delay: .22s; }
.reveal-5 { transition-delay: .28s; }
.reveal-6 { transition-delay: .34s; }

/* --- Lift en hover para cards e interacciones --- */
.lift { transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s; will-change: transform; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(16,24,40,.10), 0 2px 8px rgba(16,24,40,.06); }

/* KPI: brillo sutil que cruza la card al revelarse */
.card-kpi { position: relative; }
.card-kpi::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radio-card);
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-120%); pointer-events: none;
}
.card-kpi.shine::after { animation: kpiShine 1.1s ease forwards; }
@keyframes kpiShine { to { transform: translateX(120%); } }

/* Punto "en vivo" pulsante */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-500); position: relative; display: inline-block; }
.live-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--verde-500);
  animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } }

/* Icono KPI: pequeño rebote al entrar */
.kpi-icon { transition: transform .25s; }
.card-kpi:hover .kpi-icon { transform: translateY(-2px) rotate(-4deg) scale(1.06); }

/* Avatares: pop-in */
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pop-in { animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both; }

/* Botón primario: empuje al pulsar + halo */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary:active { transform: translateY(1px) scale(.99); }

/* Sidebar: indicador que se desliza en el item activo */
.nav a { position: relative; }
.nav a.active::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px;
  background: var(--verde-500); animation: navIn .3s ease both;
}
@keyframes navIn { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* Skeleton shimmer (estados de carga) */
.skeleton { background: linear-gradient(90deg, var(--gris-100) 25%, var(--gris-200) 37%, var(--gris-100) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Chart: dibujado de líneas */
.draw-path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: drawLine 1.3s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.fade-area { opacity: 0; animation: fadeArea .9s ease .5s forwards; }
@keyframes fadeArea { to { opacity: 1; } }
.pop-pt { opacity: 0; transform: scale(0); transform-origin: center; animation: popPt .3s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes popPt { to { opacity: 1; transform: scale(1); } }

/* Entrada del wizard / modales */
.modal { animation: modalIn .28s cubic-bezier(.22,.61,.36,1) both; }
@keyframes modalIn { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* Anillo de progreso (técnico) */
.ring-progress { transform: rotate(-90deg); }
.ring-progress .bar { transition: stroke-dashoffset 1s cubic-bezier(.5,0,.2,1); }

/* Entrada de tarjetas kanban */
.kcard { animation: cardUp .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes cardUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }