@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; }
.glass { background: rgba(15,15,18,0.98); backdrop-filter: blur(20px); }
.modern-shadow { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
.section-header { font-size: 2.25rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 768px) { .section-header { font-size: 3rem; } }
.nav-active { color: #1E40AF; font-weight: 600; }
.modern-btn { transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); position: relative; overflow: hidden; }
.modern-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgb(30 64 175 / 0.3), 0 4px 6px -4px rgb(30 64 175 / 0.3); }
.credit-badge { animation: credit-pop 0.6s ease-out; }
.qr-container { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.lottie-160 { width: 160px; height: 160px; margin: 0 auto; }
.lottie-120 { width: 120px; height: 120px; margin: 0 auto; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.dashboard-view { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.card-glow-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

/* Left pane: entrada left->right com fade quando o dashboard aparece.
   A animação fica no container (fora do innerHTML re-renderizado), então
   navegação/refresh não a repetem. */
.left-pane-enter { animation: leftPaneIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes leftPaneIn {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Skeleton shimmer para os dados dinâmicos do left pane enquanto o backend responde */
.skeleton-shimmer {
  background: linear-gradient(90deg, #27272a 25%, #3f3f46 40%, #27272a 55%);
  background-size: 400% 100%;
  animation: skeletonSweep 1.4s ease-in-out infinite;
}
@keyframes skeletonSweep {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .left-pane-enter { animation: none; }
  .skeleton-shimmer { animation: none; background: #27272a; }
}

/* ===== Analytics global: mapa de incidência (Leaflet + CartoDB dark) ===== */
.qr-map-tiles { filter: grayscale(0.35) brightness(0.82) contrast(1.05); }
.leaflet-container { background: #09090b; font-family: 'Inter', system-ui, sans-serif; outline: none; }
.leaflet-bar a { background: #18181b; color: #a1a1aa; border-color: #27272a; }
.leaflet-bar a:hover { background: #27272a; color: #f4f4f5; }
.leaflet-control-attribution { background: rgba(9, 9, 11, 0.8); color: #52525b; font-size: 9px; }
.leaflet-control-attribution a { color: #3b82f6; }
.leaflet-tooltip { background: #18181b; color: #f4f4f5; border: 1px solid #3f3f46; border-radius: 1rem; box-shadow: none; font-size: 11px; padding: 4px 10px; }
.leaflet-tooltip-top:before { border-top-color: #3f3f46; }

/* Barras do Top QR Codes: crescimento suave na 1ª renderização */
.rank-bar { transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

@media (prefers-reduced-motion: reduce) { .rank-bar { transition: none; } }