/* ════════════════════════════════════════════════════════════════════════
   Shimmer / skeleton estándar — mientras carga la información
   Un solo efecto para toda la app (claro y oscuro). Uso:
     <span class="vt-shimmer" style="width:120px"></span>            (bloque genérico)
     .vt-shimmer--circle | --line | --lg                             (variantes)
     [data-loading] .usr-kpi__n …  →  ver reglas .vt-loading-text
   Unifica los skeletons que cada pantalla definía por su cuenta (.vt-sk, .sk, .ud-sk, .vt-skeleton).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --vt-shimmer-base: #e8edf3;
  --vt-shimmer-glow: #f6f8fb;
}
[data-vehitotal-theme="dark"] {
  --vt-shimmer-base: rgba(255, 255, 255, .06);
  --vt-shimmer-glow: rgba(255, 255, 255, .13);
}

.vt-shimmer, .vt-sk, .sk, .ud-sk, .vt-skeleton {
  display: inline-block;
  min-height: .875rem;
  border-radius: 6px;
  background: linear-gradient(100deg, var(--vt-shimmer-base) 30%, var(--vt-shimmer-glow) 50%, var(--vt-shimmer-base) 70%) !important;
  background-size: 250% 100% !important;
  animation: vtShimmer 1.4s ease-in-out infinite !important;
}
.vt-shimmer--circle { border-radius: 50%; }
.vt-shimmer--line   { display: block; height: .75rem; }
.vt-shimmer--lg     { display: block; height: 1.75rem; border-radius: 8px; }
@keyframes vtShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* Texto/cifra que aún no llega: se ve como una barra brillante en vez de "—" */
.vt-loading-text {
  color: transparent !important;
  border-radius: 6px;
  background: linear-gradient(100deg, var(--vt-shimmer-base) 30%, var(--vt-shimmer-glow) 50%, var(--vt-shimmer-base) 70%);
  background-size: 250% 100%;
  animation: vtShimmer 1.4s ease-in-out infinite;
  user-select: none;
}
.vt-loading-text * { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .vt-shimmer, .vt-sk, .sk, .ud-sk, .vt-skeleton, .vt-loading-text { animation: none !important; }
}