/* web/frontend/css/style.css — estilos base del gemelo HTML.
   Tailwind (CDN) hace el grueso del trabajo; acá van solo ajustes
   puntuales que no conviene resolver con clases utilitarias. */

html,
body {
  height: 100%;
  margin: 0;
}

/* Submenús del menú lateral (ítems navegables). */
.submenu-item {
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.submenu-item.active {
  background-color: #334155; /* slate-700 */
  border-left-color: #38bdf8; /* sky-400 */
  color: #fff;
}

/* Spinner para acciones en curso (ej: refrescar stock). */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1; /* slate-300 */
  border-top-color: #0284c7; /* sky-600 */
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}