/* ==========================================================
   WoClock - app only
   (NO afecta index ni /blog)
   ========================================================== */

/* 🔒 Fix 1: el corporativo pinta a, span en muted (gris/azul).
   Aquí forzamos el sidebar a blanco. */
#sidebar,
#sidebar a,
#sidebar a span,
#sidebar .sidebar-label {
  color: #fff !important;
}

/* Lucide usa stroke=currentColor → forzamos blanco */
#sidebar svg {
  stroke: #fff !important;
}

/* Fix 2: avatar topbar y avatar grande (texto blanco) */
#btnUserMenu,
#btnUserMenu span,
#userAvatarFallback,
#userAvatarFallback span,
#topAvatarText,
#topAvatarText2 {
  color: #fff !important;
}

/* Fix 3: círculo grande flotante (ya tiene class="floaty" en tu HTML) */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}


/* Fix 3 (forzado): círculo grande */
#viewDashboard .floaty{
  animation: floaty 4.5s ease-in-out infinite !important;

  /* 🔥 elevación + sombra */
  transform: translateY(0);
  transition: transform .3s ease, box-shadow .3s ease;

  box-shadow:
    0 12px 28px rgba(15,23,42,.18),
    0 4px 10px rgba(45,190,130,.15);

  will-change: transform;
}

#viewDashboard .floaty:hover{
  transform: translateY(-10px);
  box-shadow:
    0 18px 40px rgba(15,23,42,.22),
    0 8px 18px rgba(45,190,130,.25);
}


/* @media (prefers-reduced-motion: reduce) {
  .floaty { animation: none !important; }
} */

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .floaty { animation: none !important; }
}

#dashGrid {
  align-content: start;
}

/* cuando estés en modo editar, le pondremos un estilo (luego con JS) */
.dash-editing #dashGrid article {
  outline: 2px dashed rgba(74,144,226,.35);
  cursor: move;
}

/* ===== Dashboard widgets (solo visual) ===== */
.dash-card {
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.kpi-value {
  font-variant-numeric: tabular-nums;
}

.dash-card{
  border: 1px solid rgba(148,163,184,0.25);
}

.dash-card .echart-mount{
  border: 1px dashed rgba(148,163,184,0.35);
  border-radius: 12px;
  padding: 8px;
  background: #fff;
}

.scale-in-hor-right {
  animation: scale-in-hor-right 0.5s cubic-bezier(0.250,0.460,0.450,0.940) both;
}

@keyframes scale-in-hor-right {
  0% {
    transform: scaleX(0);
    transform-origin: 100% 50%;
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 100% 50%;
    opacity: 1;
  }
}

.mp-step-tab {
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              margin-left .35s cubic-bezier(.22,1,.36,1),
              opacity .3s ease;
}

.scale-in-tl {
  animation: scale-in-tl 0.5s cubic-bezier(0.250,0.460,0.450,0.940) both;
}

@keyframes scale-in-tl {
  0% {
    transform: scale(0);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scale(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}