/* Animações, toast, medidores, badges e estado vazio. */

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 20px; height: 20px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite;
}
.loading-overlay {
  position: fixed; inset: 0; background: var(--bg); z-index: 2000;
  display: none; align-items: center; justify-content: center; flex-direction: column; gap: 16px;
}
.loading-overlay.active {
  display: flex;
}
.loading-text { font-size: 14px; color: var(--text2); }

/* ─── TOAST ─── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 12px 20px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow); animation: toastIn 0.3s ease;
  display: flex; align-items: center; gap: 10px; min-width: 240px;
}
.toast.success { background: rgba(34,197,94,0.15); border: 1px solid var(--green); color: var(--green); }
.toast.error { background: rgba(239,68,68,0.15); border: 1px solid var(--red); color: var(--red); }
.toast.info { background: rgba(59,130,246,0.15); border: 1px solid var(--info); color: var(--info); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ─── PERFORMANCE METER ─── */
.perf-meter { display: flex; align-items: center; gap: 12px; }
.perf-bar { flex: 1; height: 12px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.perf-fill { height: 100%; border-radius: 6px; transition: width 0.8s ease; }
.perf-label { font-size: 12px; color: var(--text2); min-width: 40px; text-align: right; }

/* ─── PROJECTION BADGE ─── */
.projection-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
}
.projection-badge.positive { background: rgba(34,197,94,0.1); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.projection-badge.negative { background: rgba(239,68,68,0.1); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }

/* ─── EMPTY STATE ─── */
.empty-state {
  text-align: center; padding: 60px 20px; color: var(--text3);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.empty-state p { font-size: 14px; }