/* =====================================================================
   MiniMarket POS - Loading states (barra de progreso, spinners, skeletons)
   Archivo dedicado (no se regenera con Tailwind).
   ===================================================================== */

/* Barra de progreso superior (navegacion / fetch lento) */
.loadbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 9999;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none; background: transparent;
}
.loadbar.on { opacity: 1; }
.loadbar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #4f46e5, #7c3aed, #a855f7);
  box-shadow: 0 0 10px rgba(124, 58, 237, .6);
  transition: width .3s ease;
}

/* Spinner inline (hereda color y tamano del texto) */
.spinner {
  display: inline-block; width: 1.1em; height: 1.1em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 9999px; vertical-align: -.18em;
  animation: ld-spin .6s linear infinite;
}
.spinner-sm { width: .95em; height: .95em; }
.spinner-lg { width: 1.6em; height: 1.6em; border-width: 3px; }
@keyframes ld-spin { to { transform: rotate(360deg); } }

/* Estado de carga en botones */
.is-loading { position: relative; pointer-events: none; opacity: .8; }
.is-loading > .spinner { margin-right: .5rem; }

/* Skeletons (placeholders con shimmer) */
.skeleton {
  position: relative; overflow: hidden;
  background: #e8ecf3; border-radius: .5rem;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: ld-shimmer 1.4s infinite;
}
.skel-line { height: .8rem; border-radius: .4rem; }
.skel-line + .skel-line { margin-top: .55rem; }
.skel-circle { border-radius: 9999px; }
@keyframes ld-shimmer { 100% { transform: translateX(100%); } }

/* Overlay de carga para una seccion/contenedor */
.load-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .65); backdrop-filter: blur(1px);
  color: #6366f1;
}

@media (prefers-reduced-motion: reduce) {
  .loadbar-fill, .skeleton::after, .spinner { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Scrolls invisibles en toda la app (mantienen la funcionalidad de scroll)
   ===================================================================== */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }