/* ==========================================================================
   JIA CRM · motion-views.css
   Animaciones a nivel de vista: entrada de página, coreografía (stagger),
   KPIs, barras de progreso, estados vacíos y tarjetas de kanban.

   Reglas:
   - Solo se animan transform y opacity.
   - Ningún estado inicial oculto vive en el CSS "a pelo": todos dependen de
     html.mv-ready y de clases .mv-* que añade static/js/motion-views.js.
     Si el JS no carga o falla, el contenido se ve tal cual.
   - prefers-reduced-motion: reduce → nada se mueve.
   - Las micro-interacciones globales (botones, inputs, menús, modales,
     toasts, foco) viven en motion.css; aquí no se tocan.
   ========================================================================== */

/* Tokens compartidos con motion.css. :where() tiene especificidad 0, así que
   si motion.css ya los define en :root, mandan los suyos (mismos valores). */
:where(:root) {
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 260ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Propios de las vistas */
  --mv-grow-duration: 600ms;
  --mv-lift-shadow: 0 12px 28px -12px rgba(17, 30, 50, .22), 0 2px 6px rgba(17, 30, 50, .06);
  --mv-landed-ring: 0 0 0 2px rgba(233, 89, 14, .55), 0 0 0 6px rgba(233, 89, 14, .12);
}
.dark {
  --mv-lift-shadow: 0 16px 32px -12px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .35);
  --mv-landed-ring: 0 0 0 2px rgba(255, 122, 51, .7), 0 0 0 6px rgba(255, 122, 51, .16);
}

/* ---------- Keyframes (solo transform / opacity) ---------- */
/* Sin "to": cada animación termina en el estilo natural del elemento. */
@keyframes mv-page  { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
@keyframes mv-rise  { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
@keyframes mv-empty { from { opacity: 0; transform: translate3d(0, 4px, 0); } }
@keyframes mv-pop   { from { opacity: 0; transform: scale(.82); } }
@keyframes mv-grow  { from { transform: scaleX(0); } }
@keyframes mv-land  { from { transform: scale(.96); } }
@keyframes mv-ring  { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 1. Entrada de página (una vez por carga) ---------- */
html.mv-ready main.mv-page {
  animation: mv-page var(--motion-slow) var(--ease-out) backwards;
}

/* ---------- 2. Stagger: [data-animate="stagger"] > hijos ---------- */
/* El JS asigna .mv-rise y --mv-delay (30-40 ms por ítem, máx. ~12). */
html.mv-ready .mv-rise {
  animation: mv-rise var(--motion-slow) var(--ease-out) var(--mv-delay, 0ms) backwards;
}

/* ---------- 4. Barras de progreso: [data-progress] ---------- */
html.mv-ready .mv-grow {
  transform-origin: 0 50%;
  animation: mv-grow var(--mv-grow-duration) var(--ease-out) var(--mv-delay, 0ms) backwards;
}

/* ---------- 7. Estados vacíos: [data-animate="empty"] ---------- */
html.mv-ready .mv-empty {
  animation: mv-empty var(--motion-slow) var(--ease-out) var(--mv-delay, 0ms) backwards;
}
html.mv-ready .mv-empty :is(svg, i[data-lucide]) {
  animation: mv-pop 420ms var(--ease-spring) calc(var(--mv-delay, 0ms) + 80ms) backwards;
}

/* Fuera de pantalla: la animación espera en pausa (primer fotograma) hasta que
   IntersectionObserver la libera. */
html.mv-ready .mv-hold,
html.mv-ready .mv-hold :is(svg, i[data-lucide]) {
  animation-play-state: paused;
}

/* ---------- 3. KPIs: [data-countup] ---------- */
/* Cifras tabulares: el conteo no "baila" y el valor final se lee mejor. */
[data-countup] { font-variant-numeric: tabular-nums; }
/* Durante el conteo, el lector de pantalla lee el valor final (texto oculto). */
.mv-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 6. Kanban y tarjetas ---------- */
/* [data-kanban-card]: tarjeta de tablero · [data-lift]: solo elevación. */
:is([data-kanban-card], [data-lift]) { position: relative; }
/* .data-card recorta con overflow:hidden; aquí la sombra/halo deben verse. */
:is([data-kanban-card], [data-lift]).data-card { overflow: visible; }

/* Sombra de elevación en un pseudo-elemento: se anima su opacidad, no box-shadow. */
:is([data-kanban-card], [data-lift])::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: var(--mv-lift-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  :is([data-kanban-card], [data-lift]) {
    transition-property: transform, opacity, color, background-color, border-color, box-shadow;
    transition-duration: var(--motion-base);
    transition-timing-function: var(--ease-out);
  }
  :is([data-kanban-card], [data-lift]):hover { transform: translate3d(0, -2px, 0); }
  :is([data-kanban-card], [data-lift]):hover::after { opacity: 1; }
}

/* Al mover de columna (el formulario recarga la página): la tarjeta "se va". */
:is([data-kanban-card], [data-lift]).mv-leaving {
  opacity: .5;
  transform: scale(.98);
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}
:is([data-kanban-card], [data-lift]).mv-leaving::after { opacity: 0; }

/* Tras recargar: la tarjeta movida "aterriza" en su nueva columna. */
html.mv-ready .mv-landed {
  animation: mv-land 480ms var(--ease-spring) 120ms backwards;
}
html.mv-ready .mv-landed::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: var(--mv-landed-ring);
  opacity: 0;
  pointer-events: none;
  animation: mv-ring 1400ms var(--ease-standard) 120ms both;
}

/* ---------- 8. Accesibilidad e impresión ---------- */
@media (prefers-reduced-motion: reduce) {
  .mv-page, .mv-rise, .mv-grow, .mv-empty, .mv-empty :is(svg, i[data-lucide]),
  .mv-landed, .mv-landed::before {
    animation: none !important;
  }
  :is([data-kanban-card], [data-lift]),
  :is([data-kanban-card], [data-lift])::after {
    transition: none !important;
  }
  :is([data-kanban-card], [data-lift]):hover,
  :is([data-kanban-card], [data-lift]).mv-leaving {
    transform: none !important;
  }
}

@media print {
  .mv-page, .mv-rise, .mv-grow, .mv-empty, .mv-empty :is(svg, i[data-lucide]) {
    animation: none !important;
  }
}