/* ─────────────────────────────────────────────────────────────
   styles-motion.css — Capa de animaciones mayores (aditiva).
   Cargada DESPUÉS de styles-polish.css: transición de pantallas,
   modales, drawer, sidebar, skeletons, chat, scan y celebraciones.
   Respeta el toggle de Tweaks (data-animations / .anim-off) y
   prefers-reduced-motion. Para revertir: quitar el <link>.
   ───────────────────────────────────────────────────────────── */

/* ── Transición de pantallas: salida rápida antes del swap ──
   app.jsx agrega .is-leaving al <main> 150ms antes de cambiar la key.
   La entrada la sigue haciendo cb-screen-in (styles-polish.css). */
@keyframes cb-screen-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px) scale(.996); }
}
.cb-content.is-leaving {
  animation: cb-screen-out .15s var(--cb-ease) both;
  pointer-events: none;
}

/* ── Modales: backdrop fade + cuerpo con scale/slide (cubre TODOS los
   modales: usan .cb-modal__wrap + .cb-modal en todas las pantallas) ── */
@keyframes cb-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cb-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
.cb-modal__wrap { animation: cb-overlay-in .22s var(--cb-ease) both; }
.cb-modal       { animation: cb-modal-in .32s cubic-bezier(.22, 1, .36, 1) both; }

/* ── NotifDrawer: backdrop fade + slide desde la derecha ── */
@keyframes cb-drawer-in {
  from { opacity: 0; transform: translateX(56px); }
  to   { opacity: 1; transform: none; }
}
.cb-drawer__wrap { animation: cb-overlay-in .2s var(--cb-ease) both; }
.cb-drawer       { animation: cb-drawer-in .32s cubic-bezier(.22, 1, .36, 1) both; }
/* Las notificaciones del drawer entran escalonadas (cap a 8) */
.cb-drawer__list > .cb-notif { animation: cb-fade-up .34s var(--cb-ease) both; }
.cb-drawer__list > .cb-notif:nth-child(1) { animation-delay: .05s; }
.cb-drawer__list > .cb-notif:nth-child(2) { animation-delay: .09s; }
.cb-drawer__list > .cb-notif:nth-child(3) { animation-delay: .13s; }
.cb-drawer__list > .cb-notif:nth-child(4) { animation-delay: .17s; }
.cb-drawer__list > .cb-notif:nth-child(5) { animation-delay: .21s; }
.cb-drawer__list > .cb-notif:nth-child(6) { animation-delay: .25s; }
.cb-drawer__list > .cb-notif:nth-child(7) { animation-delay: .29s; }
.cb-drawer__list > .cb-notif:nth-child(8) { animation-delay: .33s; }
.cb-drawer__list > .cb-notif:nth-child(n+9) { animation-delay: .36s; }

/* ── Sidebar: plegado/expandido animado (grid-template-columns es animable
   en Chromium moderno; si el browser no lo soporta, el cambio es instantáneo
   como antes — degradación segura) ── */
.cb-app { transition: grid-template-columns .28s var(--cb-ease); }
.cb-side__label, .cb-side__glabel, .cb-side__name { white-space: nowrap; }

/* ── Skeleton loading (shimmer): reemplaza los "Cargando…" planos ── */
.cb-skel {
  position: relative; overflow: hidden; border-radius: 7px;
  background: color-mix(in oklch, var(--cb-text) 7%, transparent);
}
@keyframes cb-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.cb-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
    color-mix(in oklch, var(--cb-text) 8%, transparent), transparent);
  animation: cb-shimmer 1.3s ease-in-out infinite;
}
.cb-skel-rows { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }

/* ── Chat IA: caret de streaming + puntos de "pensando" ── */
@keyframes cb-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.cb-chat-caret {
  display: inline-block; width: 7px; height: 13px; margin-left: 3px;
  vertical-align: -2px; border-radius: 1.5px;
  background: var(--cb-accent);
  animation: cb-caret-blink .9s steps(1) infinite;
}
@keyframes cb-dot-bounce {
  0%, 60%, 100% { transform: none; opacity: .45; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
.cb-typing-dots { display: inline-flex; gap: 3px; margin-left: 2px; vertical-align: 1px; }
.cb-typing-dots i {
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
  animation: cb-dot-bounce 1.1s ease-in-out infinite;
}
.cb-typing-dots i:nth-child(2) { animation-delay: .15s; }
.cb-typing-dots i:nth-child(3) { animation-delay: .3s; }
/* el chip de tool ejecutada entra con el mismo fade-up del resto de la UI */
.cb-chatmsg--tools { animation: cb-fade-up .3s var(--cb-ease) both; }

/* ── Scan CiDi: brillo que recorre la barra mientras el job corre ── */
.cb-scan-panel__bar { position: relative; overflow: hidden; }
.cb-scan-panel__bar.is-running::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: cb-shimmer 1.4s ease-in-out infinite;
}

/* ── Check de éxito que se dibuja (pathLength=1, mismo truco que el sparkline) ── */
@keyframes cb-stroke-draw { to { stroke-dashoffset: 0; } }
.cb-checkdraw__circle {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: cb-stroke-draw .5s var(--cb-ease) forwards;
}
.cb-checkdraw__tick {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: cb-stroke-draw .35s var(--cb-ease) .42s forwards;
}

/* ── Celebración global (window.cbCelebrate): overlay efímero no bloqueante ── */
@keyframes cb-celebrate-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes cb-celebrate-out { to { opacity: 0; transform: scale(.96); } }
.cb-celebrate__wrap {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; pointer-events: none;
}
.cb-celebrate {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 34px; border-radius: 16px;
  background: color-mix(in oklch, var(--cb-bg-2, #12141a) 90%, transparent);
  border: 1px solid var(--cb-line-strong);
  box-shadow: var(--cb-shadow-2), 0 0 36px -12px color-mix(in oklch, var(--cb-good, #4ade80) 55%, transparent);
  backdrop-filter: blur(8px);
  animation: cb-celebrate-in .34s cubic-bezier(.22, 1, .36, 1) both,
             cb-celebrate-out .3s ease 1.3s both;
}
.cb-celebrate__msg { font-size: 13.5px; font-weight: 600; color: var(--cb-text); }

/* ── Panel CiDi: las KPI cards entran escalonadas al cargar el panel ──
   Las barras (semanal/categoría) ya se animan en styles-polish.css; acá solo
   sumamos la cascada de entrada de los recuadros KPI, que aparecían secos. */
@keyframes cb-stat-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cb-grid--stat-in > .cb-stat { animation: cb-stat-rise .5s var(--cb-ease) both; }
.cb-grid--stat-in > .cb-stat:nth-child(1) { animation-delay: .04s; }
.cb-grid--stat-in > .cb-stat:nth-child(2) { animation-delay: .10s; }
.cb-grid--stat-in > .cb-stat:nth-child(3) { animation-delay: .16s; }
.cb-grid--stat-in > .cb-stat:nth-child(4) { animation-delay: .22s; }

/* ── Mapa de Obras Interactivo: aparicion de pines + transicion de zoom ── */
.cb-mapa-pines circle {
  animation: cb-pin-pop .25s ease-out;
  transition: transform .2s ease;
}
@keyframes cb-pin-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.cb-mapa-provincias path {
  transition: fill .3s ease, stroke .2s ease;
}

/* ── Spinner de Button (prop loading) — reusa la keyframe cb-spin ── */
.cb-btn__spin {
  width: 13px; height: 13px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  border: 2px solid color-mix(in oklch, currentColor 28%, transparent);
  border-top-color: currentColor;
  animation: cb-spin 0.7s linear infinite;
}

/* ── Toast global (window.cbToast) — slide-in desde abajo + auto-dismiss ── */
.cb-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 200; padding: 11px 18px; border-radius: 10px;
  background: var(--cb-surf-2); border: 1px solid var(--cb-line-strong);
  color: var(--cb-text); box-shadow: var(--cb-shadow-lg);
  font-size: 13px; font-weight: 500; max-width: 90vw; text-align: center;
  animation: cb-toast-in .26s cubic-bezier(.22,1,.36,1);
}
.cb-toast--good   { border-color: color-mix(in oklch, var(--cb-good) 50%, var(--cb-line-strong)); }
.cb-toast--warn   { border-color: color-mix(in oklch, var(--cb-warn) 50%, var(--cb-line-strong)); }
.cb-toast--danger { border-color: color-mix(in oklch, var(--cb-danger) 50%, var(--cb-line-strong)); }
.cb-toast.is-out  { animation: cb-toast-out .24s ease forwards; }
@keyframes cb-toast-in  { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cb-toast-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 10px); } }

/* ── Apagado total: toggle "Animaciones" de Tweaks (.anim-off) ── */
.cb-app.anim-off .cb-content.is-leaving,
.cb-app.anim-off .cb-modal__wrap, .cb-app.anim-off .cb-modal,
.cb-app.anim-off .cb-drawer__wrap, .cb-app.anim-off .cb-drawer,
.cb-app.anim-off .cb-drawer__list > .cb-notif,
.cb-app.anim-off .cb-skel::after,
.cb-app.anim-off .cb-chat-caret, .cb-app.anim-off .cb-typing-dots i,
.cb-app.anim-off .cb-chatmsg--tools,
.cb-app.anim-off .cb-scan-panel__bar.is-running::after,
.cb-app.anim-off .cb-show__halo,
.cb-app.anim-off .cb-show__pilar,
.cb-app.anim-off .cb-mapa-pines circle,
.cb-app.anim-off .cb-btn__spin, .cb-app.anim-off .cb-toast, .cb-app.anim-off .cb-toast.is-out,
.cb-app.anim-off .cb-drawer { animation: none !important; }
.cb-app.anim-off { transition: none !important; }
/* el check dibujado quedaría invisible con animation:none (dashoffset 1) → mostrarlo entero */
.cb-app.anim-off .cb-checkdraw__circle, .cb-app.anim-off .cb-checkdraw__tick {
  animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
}
/* los pilares quedarían invisibles con animation:none (opacity:0 inicial) → forzar visibles */
.cb-app.anim-off .cb-show__pilar { opacity: 1 !important; transform: none !important; }
/* idem las KPI cards del Panel CiDi (opacity:0 inicial) → forzar visibles */
.cb-app.anim-off .cb-grid--stat-in > .cb-stat { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ── Respeto total a prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .cb-content.is-leaving, .cb-modal__wrap, .cb-modal,
  .cb-drawer__wrap, .cb-drawer, .cb-drawer__list > .cb-notif,
  .cb-skel::after, .cb-chat-caret, .cb-typing-dots i, .cb-chatmsg--tools,
  .cb-scan-panel__bar.is-running::after,
  .cb-celebrate,
  .cb-show__halo,
  .cb-btn__spin, .cb-toast, .cb-toast.is-out,
  .cb-mapa-pines circle { animation: none !important; }
  .cb-app { transition: none !important; }
  .cb-checkdraw__circle, .cb-checkdraw__tick {
    animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  }
  /* la celebración sin animación no aporta: ocultarla del todo */
  .cb-celebrate__wrap { display: none !important; }
  /* los pilares quedarían invisibles con opacity:0 inicial → forzar visibles */
  .cb-show__pilar { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* idem las KPI cards del Panel CiDi */
  .cb-grid--stat-in > .cb-stat { animation: none !important; opacity: 1 !important; transform: none !important; }
}