/* ==========================================================================
   topbar.css — Barra fixa com % do lote preenchido (mesma info da sticky)
   data-urgency=low|medium|high|critical no <header> controla cor do fill.
   ========================================================================== */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  z-index: 100;
  background: linear-gradient(180deg, #15171a 0%, #0e1013 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
}

.topbar__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar__item--scarcity::before {
  content: "🔥";
  font-size: 1rem;
}

.topbar__pct {
  color: var(--color-primary, #e25e3e);
  font-weight: 700;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Barra fina de % no rodapé do topbar */
.topbar__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.topbar__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #fbbf24 0%, #fb923c 100%);
  box-shadow: 0 0 12px rgba(226, 94, 62, 0.5);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.4s ease,
              box-shadow 0.4s ease;
}

/* Urgency progressivo — discreto no topbar (sem chama) */
.topbar[data-urgency="medium"] .topbar__fill {
  background: linear-gradient(90deg, #fb923c 0%, #ea580c 100%);
  box-shadow: 0 0 14px rgba(251, 146, 60, 0.6);
}
.topbar[data-urgency="high"] .topbar__fill {
  background: linear-gradient(90deg, #ea580c 0%, #dc2626 100%);
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.7);
}
.topbar[data-urgency="critical"] .topbar__fill {
  background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #dc2626 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.85);
  animation: topbar-fire-flow 3s linear infinite;
}
.topbar[data-urgency="critical"] .topbar__pct {
  color: #fca5a5;
  text-shadow: 0 0 8px rgba(252, 165, 165, 0.55);
}

@keyframes topbar-fire-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__fill { animation: none !important; transition: width 0.3s ease !important; }
}

/* Mobile */
@media (max-width: 480px) {
  .topbar { height: 44px; }
  .topbar__item {
    font-size: 0.74rem;
    letter-spacing: 0.05em;
  }
  .topbar__item--scarcity::before {
    font-size: 0.95rem;
  }
}

@media (max-width: 360px) {
  .topbar__item {
    font-size: 0.68rem;
    gap: 0.35rem;
  }
}