/* app.css — complementos ao Tailwind */

/* Skeleton de carregamento */
@keyframes jc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.jc-skeleton {
  animation: jc-pulse 1.4s ease-in-out infinite;
  background: #e2e8f0;
  border-radius: .5rem;
}

/* Cartão de produto */
.jc-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.jc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 37, 64, .12);
}

/* Imagem com proporção fixa */
.jc-thumb {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f1f5f9;
}

/* Badge de estoque */
.jc-badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .2rem .55rem;
  border-radius: 9999px;
  text-transform: uppercase;
}
.jc-badge-ok  { background: #dcfce7; color: #166534; }
.jc-badge-off { background: #fee2e2; color: #991b1b; }

/* Sugestões da busca */
#sugestoes li {
  cursor: pointer;
}
#sugestoes li:hover,
#sugestoes li.ativo {
  background: #eff6ff;
}

/* Atalhos visíveis no modo vendedor */
kbd {
  background: #1e293b;
  color: #f8fafc;
  border-radius: .25rem;
  padding: .05rem .35rem;
  font-size: .7rem;
}