/**
 * ROISniper — design system (Brand Guide + Alerts)
 * Fonte única de tokens: --rs-* (canónico) e --ads-* (alias legado).
 */
:root {
  --rs-bg: #0a0a0a;
  --rs-bg-elevated: #0d0d0d;
  --rs-bg-card: #161616;
  --rs-bg-panel: #1e1e1e;
  --rs-bg-input: rgba(22, 22, 22, 0.92);
  --rs-fg: #f5f5f5;
  --rs-fg-inverse: #0a0a0a;
  --rs-muted: #9aa39d;
  --rs-muted-2: #6b7280;
  --rs-green: #00ff87;
  --rs-green-hover: #1bff9b;
  --rs-green-soft: #00c76a;
  --rs-green-border: #16432e;
  --rs-green-glow: rgba(0, 255, 135, 0.16);
  --rs-green-glow-strong: rgba(0, 255, 135, 0.45);
  --rs-orange: #ff8a1e;
  --rs-orange-soft: #ffb020;
  --rs-orange-border: rgba(255, 138, 30, 0.35);
  --rs-orange-glow: rgba(255, 138, 30, 0.2);
  --rs-danger-bg: #2a1215;
  --rs-danger-border: #5c2b2e;
  --rs-danger-fg: #ff8a80;
  --rs-danger-field: #f87171;
  --rs-success-bg: #0d1f17;
  --rs-success-border: #16432e;
  --rs-warning-bg: #241700;
  --rs-warning-border: #4d3a14;
  --rs-radius: 14px;
  --rs-radius-sm: 10px;
  --rs-radius-lg: 16px;
  --rs-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --rs-font-body: "Inter", "Manrope", system-ui, sans-serif;
  --app-premium-radius: 14px;
  --app-premium-shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.28);
  --app-premium-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
  --app-premium-motion: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Alias legado (--ads-*) — manter até remover referências antigas */
  --ads-accent: var(--rs-green);
  --ads-accent-hover: var(--rs-green-hover);
  --ads-orange: var(--rs-orange);
  --ads-cyan: var(--rs-orange);
  --ads-bg: var(--rs-bg);
  --ads-bg-alt: var(--rs-bg-card);
  --ads-text: var(--rs-fg);
  --ads-text-muted: var(--rs-muted);
  --ads-border: var(--rs-green-glow);
  --ads-border-strong: var(--rs-green-glow-strong);
  --ads-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.12);
  --ads-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 24px var(--rs-green-glow);
  --ads-radius: 12px;
  --ads-radius-lg: var(--rs-radius-lg);

  /* ── Escala de espaçamento (base 4px) — Fase Design System (UX/Uma) ── */
  --rs-space-1: 0.25rem;  /* 4px  */
  --rs-space-2: 0.5rem;   /* 8px  */
  --rs-space-3: 0.75rem;  /* 12px */
  --rs-space-4: 1rem;     /* 16px */
  --rs-space-5: 1.5rem;   /* 24px */
  --rs-space-6: 2rem;     /* 32px */
  --rs-space-8: 3rem;     /* 48px */

  /* ── Foco visível (a11y / convenção Astryx) ── */
  --rs-focus: 0 0 0 3px var(--rs-green-glow-strong);
  --rs-focus-ring: var(--rs-green);
  --rs-focus-offset: 2px;

  /* ── Tokens de componente: Botão ── */
  --rs-btn-radius: var(--rs-radius);
  --rs-btn-font: 600 0.95rem/1 var(--rs-font-body);
  --rs-btn-pad-y: 0.6rem;
  --rs-btn-pad-x: 1.1rem;
  --rs-btn-transition: var(--app-premium-motion);
}

html[data-bs-theme="light"] {
  --rs-bg: #f5f5f5;
  --rs-bg-elevated: #ffffff;
  --rs-bg-card: #ffffff;
  --rs-bg-panel: #edeeec;
  --rs-bg-input: #ffffff;
  --rs-fg: #0a0a0a;
  --rs-fg-inverse: #f5f5f5;
  --rs-muted: #6b7280;
  --rs-muted-2: #9aa39d;
  --rs-green: #007a44;
  --rs-green-hover: #00a855;
  --rs-green-soft: #00a855;
  --rs-green-border: rgba(0, 122, 68, 0.28);
  --rs-green-glow: rgba(0, 168, 85, 0.12);
  --rs-green-glow-strong: rgba(0, 122, 68, 0.38);
  --rs-orange: #d8530f;
  --rs-orange-soft: #ff8a1e;
  --rs-orange-border: rgba(255, 138, 30, 0.35);
  --rs-orange-glow: rgba(255, 138, 30, 0.15);
  --rs-danger-bg: #fff1f0;
  --rs-danger-border: #ffc9c4;
  --rs-danger-fg: #a82505;
  --rs-danger-field: #dc2626;
  --rs-success-bg: #ecfdf3;
  --rs-success-border: rgba(0, 122, 68, 0.28);
  --rs-warning-bg: #fff8eb;
  --rs-warning-border: rgba(255, 138, 30, 0.35);
  --app-premium-shadow-soft: 0 6px 22px rgba(10, 10, 10, 0.06);
  --app-premium-shadow: 0 12px 32px rgba(10, 10, 10, 0.1);
}

html[data-bs-theme] body.apex-body,
html[data-bs-theme] body.portal-body,
html[data-bs-theme] body.auth-body {
  font-family: var(--rs-font-body);
}

html[data-bs-theme] body.apex-body h1,
html[data-bs-theme] body.apex-body h2,
html[data-bs-theme] body.apex-body h3,
html[data-bs-theme] body.apex-body h4,
html[data-bs-theme] body.apex-body h5,
html[data-bs-theme] body.apex-body .h1,
html[data-bs-theme] body.apex-body .h2,
html[data-bs-theme] body.apex-body .h3,
html[data-bs-theme] body.apex-body .h4,
html[data-bs-theme] body.apex-body .h5,
html[data-bs-theme] body.apex-body .display-6,
html[data-bs-theme] body.apex-body .app-hero-title,
html[data-bs-theme] body.portal-body .hero-title,
html[data-bs-theme] body.auth-body .auth-brand-title {
  font-family: var(--rs-font-display);
  letter-spacing: -0.02em;
}

html[data-bs-theme] .sidebar-header .sidebar-text,
html[data-bs-theme] .navbar-brand {
  font-family: var(--rs-font-display);
  letter-spacing: -0.01em;
}

/* Alertas ROISniper (Alerts guide) */
.rs-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--rs-radius-sm);
  border: 1px solid var(--rs-green-border);
  background: var(--rs-success-bg);
  color: var(--rs-fg);
}

.rs-alert__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  margin-top: 0.35rem;
  flex-shrink: 0;
  background: var(--rs-green);
  box-shadow: 0 0 12px var(--rs-green-glow);
}

.rs-alert--success {
  background: var(--rs-success-bg);
  border-color: var(--rs-success-border);
}

.rs-alert--warning {
  background: var(--rs-warning-bg);
  border-color: var(--rs-warning-border);
}

.rs-alert--warning .rs-alert__dot {
  background: var(--rs-orange-soft);
  box-shadow: 0 0 10px rgba(255, 176, 32, 0.35);
}

.rs-alert--danger,
html[data-bs-theme] .alert-danger {
  background: var(--rs-danger-bg) !important;
  border-color: var(--rs-danger-border) !important;
  color: var(--rs-danger-fg) !important;
}

html[data-bs-theme="dark"] .alert-success {
  background: var(--rs-success-bg) !important;
  border-color: var(--rs-success-border) !important;
  color: var(--rs-fg) !important;
}

html[data-bs-theme="dark"] .alert-warning {
  background: var(--rs-warning-bg) !important;
  border-color: var(--rs-warning-border) !important;
  color: #f5f5f5 !important;
}

html[data-bs-theme="light"] .alert-success {
  background: var(--rs-success-bg) !important;
  border-color: var(--rs-success-border) !important;
  color: #0a0a0a !important;
}

html[data-bs-theme="light"] .alert-warning {
  background: var(--rs-warning-bg) !important;
  border-color: var(--rs-warning-border) !important;
  color: #241700 !important;
}

html[data-bs-theme] .badge.bg-success,
html[data-bs-theme] .badge.text-bg-success {
  background: var(--rs-green-soft) !important;
  color: #0a0a0a !important;
}

html[data-bs-theme] .badge.bg-warning,
html[data-bs-theme] .badge.text-bg-warning {
  background: var(--rs-orange-soft) !important;
  color: #0a0a0a !important;
}

html[data-bs-theme] .text-success {
  color: var(--rs-green-soft) !important;
}

html[data-bs-theme="light"] .text-success {
  color: var(--rs-green) !important;
}

html[data-bs-theme] .text-warning {
  color: var(--rs-orange-soft) !important;
}

html[data-bs-theme] .border-success {
  border-color: var(--rs-green-border) !important;
}

/* Botões primários — verde marca + texto escuro */
html[data-bs-theme] .btn-primary,
html[data-bs-theme] .btn-warning,
html[data-bs-theme] .btn-primary-custom {
  background-image: linear-gradient(135deg, var(--rs-green) 0%, var(--rs-green-soft) 100%) !important;
  border-color: rgba(0, 255, 135, 0.45) !important;
  color: #0a0a0a !important;
  box-shadow: 0 8px 22px rgba(0, 255, 135, 0.22);
}

html[data-bs-theme="light"] .btn-primary,
html[data-bs-theme="light"] .btn-warning,
html[data-bs-theme="light"] .btn-primary-custom {
  background-image: linear-gradient(135deg, #00c76a 0%, #00ff87 100%) !important;
  border-color: rgba(0, 122, 68, 0.35) !important;
}

html[data-bs-theme] .btn-outline-primary,
html[data-bs-theme] .btn-outline-custom {
  border-color: var(--rs-green) !important;
  color: var(--rs-green) !important;
}

html[data-bs-theme="light"] .btn-outline-primary,
html[data-bs-theme="light"] .btn-outline-custom {
  border-color: var(--rs-green) !important;
  color: var(--rs-green) !important;
}

html[data-bs-theme] .btn-outline-primary:hover,
html[data-bs-theme] .btn-outline-custom:hover {
  background: var(--rs-green-glow) !important;
  color: var(--rs-green) !important;
}

/* ========== Logotipo ROISniper (Brand Guide) ========== */
.rs-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  max-width: 100%;
}

.rs-logo--stacked {
  flex-direction: column;
  gap: 0.55rem;
  text-align: center;
}

.rs-logo--symbol {
  gap: 0;
}

.rs-logo__symbol-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.rs-logo__symbol {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

html:not([data-bs-theme="light"]) .rs-logo__symbol--light {
  display: none !important;
}

html:not([data-bs-theme="light"]) .rs-logo__symbol--dark {
  display: block !important;
}

html[data-bs-theme="dark"] .rs-logo__symbol--light,
html[data-bs-theme="light"] .rs-logo__symbol--dark {
  display: none !important;
}

html[data-bs-theme="dark"] .rs-logo__symbol--dark,
html[data-bs-theme="light"] .rs-logo__symbol--light {
  display: block !important;
}

.rs-logo--xs .rs-logo__symbol-wrap { height: 32px; }
.rs-logo--sm .rs-logo__symbol-wrap { height: 42px; }
.rs-logo--md .rs-logo__symbol-wrap { height: 64px; }
.rs-logo--lg .rs-logo__symbol-wrap { height: 112px; }
.rs-logo--xl .rs-logo__symbol-wrap { height: 138px; }
.rs-logo--hero .rs-logo__symbol-wrap { height: 128px; }

.rs-logo__wordmark {
  font-family: var(--rs-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  font-size: var(--rs-logo-word-size, 1.25rem);
  white-space: nowrap;
}

html[data-bs-theme="dark"] .rs-logo__roi { color: #00ff87; }
html[data-bs-theme="dark"] .rs-logo__sniper { color: #f5f5f5; }
html[data-bs-theme="light"] .rs-logo__roi { color: #00a855; }
html[data-bs-theme="light"] .rs-logo__sniper { color: #0a0a0a; }

.sidebar.collapsed .rs-logo__wordmark {
  display: none !important;
}

.sidebar.collapsed .rs-logo {
  justify-content: center;
  width: 100%;
}

.sidebar.collapsed .rs-logo--md .rs-logo__symbol-wrap,
.sidebar.collapsed .rs-logo--lg .rs-logo__symbol-wrap {
  height: 48px;
}

.sidebar-header .rs-logo:hover .rs-logo__symbol-wrap {
  transform: scale(1.04);
  transition: transform 0.25s ease;
}

.app-mobile-brand .rs-logo {
  gap: 0.45rem;
}

.app-mobile-brand .rs-logo__symbol-wrap {
  height: 26px;
}

.app-mobile-brand .rs-logo__wordmark {
  font-size: 0.95rem !important;
}

.dash-topbar-brand .rs-logo {
  gap: 0.5rem;
  min-width: 0;
}

.dash-topbar-brand .rs-logo__wordmark {
  font-size: 1rem !important;
}

@media (max-width: 640px) {
  .dash-topbar-brand .rs-logo__wordmark {
    display: none;
  }
}

.landing-rs-logo.rs-logo--horizontal .rs-logo__symbol-wrap {
  height: 56px;
}

@media (min-width: 640px) {
  .landing-rs-logo.rs-logo--horizontal .rs-logo__symbol-wrap { height: 64px; }
}

@media (min-width: 768px) {
  .landing-rs-logo.rs-logo--horizontal .rs-logo__symbol-wrap { height: 72px; }
}

.landing-rs-logo.rs-logo--stacked .rs-logo__symbol-wrap {
  height: 112px;
}

/* Accent secundário laranja (CTA alternativo / warn) */
.rs-btn-orange {
  background: linear-gradient(135deg, var(--rs-orange) 0%, var(--rs-orange-soft) 100%) !important;
  border: 1px solid rgba(255, 138, 30, 0.45) !important;
  color: var(--rs-fg-inverse) !important;
}

/* ========== Utilitários de superfície / texto ========== */
.rs-text-muted { color: var(--rs-muted) !important; }
.rs-text-secondary { color: var(--rs-muted) !important; }
.rs-text-accent { color: var(--rs-green) !important; }
.rs-icon-muted { color: var(--rs-muted); }

.rs-input-surface,
.rs-select-surface {
  background: var(--rs-bg-input) !important;
  border: 1px solid var(--rs-orange-border) !important;
  color: var(--rs-fg) !important;
  border-radius: var(--rs-radius-sm);
}

.rs-input-surface option,
.rs-select-surface option {
  background-color: var(--rs-bg-panel);
  color: var(--rs-fg);
}

.rs-surface-panel {
  background: var(--rs-bg-panel);
  border: 1px solid var(--rs-green-border);
  border-radius: var(--rs-radius);
}

.rs-highlight-green {
  background: var(--rs-green-glow);
  border: 1px solid var(--rs-green-glow-strong);
}

.rs-border-orange { border-color: var(--rs-orange-border) !important; }
.rs-border-green { border-color: var(--rs-green-border) !important; }

/* =========================================================================
   COMPONENTE ATÔMICO: Botão (.rs-btn) — camada de design system (UX/Uma)
   Substitui as ~113 combinações ad-hoc de `btn btn-*`. Use a macro Jinja
   `partials/ui/button.html`. Variantes + tamanhos + foco visível (a11y).
   ========================================================================= */
.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rs-space-2);
  font: var(--rs-btn-font);
  padding: var(--rs-btn-pad-y) var(--rs-btn-pad-x);
  border-radius: var(--rs-btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--rs-btn-transition), box-shadow var(--rs-btn-transition),
    background var(--rs-btn-transition), border-color var(--rs-btn-transition);
}
.rs-btn:hover { transform: translateY(-1px); }
.rs-btn:active { transform: translateY(0); }
.rs-btn:focus-visible {
  outline: 2px solid var(--rs-focus-ring);
  outline-offset: var(--rs-focus-offset);
  box-shadow: var(--rs-focus);
}
.rs-btn[disabled], .rs-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Variantes — contraste AA nos dois temas; hover sempre com mudança visível */
.rs-btn--primary {
  background: linear-gradient(135deg, var(--rs-green) 0%, var(--rs-green-hover) 100%);
  color: var(--rs-fg-inverse);
  border-color: var(--rs-green);
}
.rs-btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px var(--rs-green-glow-strong);
  color: var(--rs-fg-inverse);
}

.rs-btn--secondary {
  background: var(--rs-bg-panel);
  border-color: var(--rs-muted-2);
  color: var(--rs-fg);
}
.rs-btn--secondary:hover {
  background: var(--rs-bg-card);
  border-color: var(--rs-green);
  color: var(--rs-fg);
}

.rs-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--rs-fg);
}
.rs-btn--ghost:hover {
  background: var(--rs-bg-panel);
  border-color: var(--rs-muted-2);
  color: var(--rs-fg);
}

.rs-btn--outline {
  background: transparent;
  border-color: var(--rs-green);
  color: var(--rs-green);
}
.rs-btn--outline:hover {
  background: var(--rs-green);
  border-color: var(--rs-green);
  color: var(--rs-fg-inverse);
}

.rs-btn--danger {
  background: var(--rs-danger-bg);
  border-color: var(--rs-danger-field);
  color: var(--rs-danger-fg);
}
.rs-btn--danger:hover {
  background: var(--rs-danger-field);
  border-color: var(--rs-danger-field);
  color: #ffffff;
}

/* Tamanhos */
.rs-btn--sm { padding: 0.4rem 0.75rem; font-size: 0.82rem; }
.rs-btn--lg { padding: 0.85rem 1.5rem; font-size: 1.05rem; }
.rs-btn--block { display: flex; width: 100%; }

/* Ícone-only (exige aria-label — ver macro) */
.rs-btn--icon { padding: 0.5rem; aspect-ratio: 1; }

@media (prefers-reduced-motion: reduce) {
  .rs-btn { transition: none; }
  .rs-btn:hover, .rs-btn:active { transform: none; }
}

/* =========================================================================
   FORM CONTROLS temáticos por token — substitui os ~226 overrides ad-hoc
   `bg-black text-white border-secondary` espalhados. Superfície + foco a11y
   aplicados a todo input/select/textarea. Theme-aware (dark/light via tokens).
   ========================================================================= */
.form-control,
.form-select,
textarea.form-control,
.rs-field {
  background-color: var(--rs-bg-input);
  border: 1px solid var(--rs-green-border);
  color: var(--rs-fg);
  border-radius: var(--rs-radius-sm);
}
.form-control::placeholder,
.rs-field::placeholder { color: var(--rs-muted); opacity: 1; }
.form-control:focus,
.form-select:focus,
.rs-field:focus {
  background-color: var(--rs-bg-input);
  border-color: var(--rs-focus-ring);
  color: var(--rs-fg);
  box-shadow: var(--rs-focus);
  outline: none;
}
.form-control:disabled,
.form-select:disabled { opacity: 0.55; }
/* Seta clara do <select> para fundo escuro (some no tema dark do Bootstrap) */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239aa39d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
html[data-bs-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
/* Checkbox/radio na cor da marca */
.form-check-input:checked {
  background-color: var(--rs-green);
  border-color: var(--rs-green);
}
.form-check-input:focus { box-shadow: var(--rs-focus); border-color: var(--rs-focus-ring); }

/* =========================================================================
   BADGES de status alinhados à marca (re-skin contido de .text-bg-*).
   Substitui as cores padrão do Bootstrap pelos tokens ROISniper.
   ========================================================================= */
.badge.text-bg-success,
.badge.bg-success { background-color: var(--rs-green) !important; color: var(--rs-fg-inverse) !important; }
.badge.text-bg-primary,
.badge.bg-primary { background-color: var(--rs-green) !important; color: var(--rs-fg-inverse) !important; }
.badge.text-bg-danger,
.badge.bg-danger { background-color: var(--rs-danger-field) !important; color: #fff !important; }
.badge.text-bg-warning,
.badge.bg-warning { background-color: var(--rs-orange) !important; color: var(--rs-fg-inverse) !important; }
.badge.text-bg-info,
.badge.bg-info { background-color: var(--rs-orange-soft) !important; color: var(--rs-fg-inverse) !important; }
.badge.text-bg-secondary,
.badge.bg-secondary { background-color: var(--rs-bg-panel) !important; color: var(--rs-fg) !important; }
.badge.text-bg-dark,
.badge.bg-dark { background-color: var(--rs-bg-card) !important; color: var(--rs-fg) !important; }

/* =========================================================================
   COMPONENTE ATÔMICO: KPI card (.rs-kpi) — stat card por token, theme-aware.
   Use a macro Jinja partials/ui/kpi_card.html. Tons: success/warn/danger/accent.
   ========================================================================= */
.rs-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--rs-space-2);
  height: 100%;
  background: var(--rs-bg-card);
  border: 1px solid var(--rs-green-border);
  border-radius: var(--rs-radius);
  padding: var(--rs-space-5);
  box-shadow: var(--app-premium-shadow-soft);
  transition: transform var(--app-premium-motion), box-shadow var(--app-premium-motion);
}
.rs-kpi:hover { transform: translateY(-2px); box-shadow: var(--app-premium-shadow); }
.rs-kpi__label {
  color: var(--rs-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rs-kpi__value {
  font-family: var(--rs-font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.05;
  color: var(--rs-fg);
}
.rs-kpi__hint { color: var(--rs-muted); font-size: 0.8rem; margin-top: auto; }
.rs-kpi--success .rs-kpi__value,
.rs-kpi--accent .rs-kpi__value { color: var(--rs-green); }
.rs-kpi--warn .rs-kpi__value { color: var(--rs-orange); }
.rs-kpi--danger .rs-kpi__value { color: var(--rs-danger-field); }
@media (prefers-reduced-motion: reduce) {
  .rs-kpi { transition: none; }
  .rs-kpi:hover { transform: none; }
}

/* =========================================================================
   COMPONENTE ATÔMICO: Badge/pill (.rs-badge) — status "soft" por token.
   Use a macro Jinja partials/ui/badge.html. Tons: success/danger/warn/accent/neutral.
   ========================================================================= */
.rs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--rs-muted-2);
  background: var(--rs-bg-panel);
  color: var(--rs-fg);
}
.rs-badge--neutral { border-color: var(--rs-muted-2); background: var(--rs-bg-panel); color: var(--rs-fg); }
.rs-badge--success { border-color: var(--rs-green-border); background: var(--rs-success-bg); color: var(--rs-green); }
.rs-badge--accent  { border-color: var(--rs-green-border); background: var(--rs-green-glow); color: var(--rs-green); }
.rs-badge--danger  { border-color: var(--rs-danger-border); background: var(--rs-danger-bg); color: var(--rs-danger-fg); }
.rs-badge--warn    { border-color: var(--rs-warning-border); background: var(--rs-warning-bg); color: var(--rs-orange-soft); }
.rs-badge__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
/* Aliases dos nomes de variante do Bootstrap (migração de .text-bg-*/.bg-*) */
.rs-badge--warning { border-color: var(--rs-warning-border); background: var(--rs-warning-bg); color: var(--rs-orange-soft); }
.rs-badge--primary { border-color: var(--rs-green-border); background: var(--rs-green-glow); color: var(--rs-green); }
.rs-badge--secondary,
.rs-badge--dark,
.rs-badge--light,
.rs-badge--info { border-color: var(--rs-muted-2); background: var(--rs-bg-panel); color: var(--rs-fg); }

/* =========================================================================
   COMPONENTE ATÔMICO: Card (.rs-card) — superfície tematizada por token.
   Funciona junto do .card do Bootstrap (mantém .card-body/.card-header).
   Substitui os combos `card bg-dark border-0 …`. Macro: partials/ui/card.html.
   ========================================================================= */
.rs-card {
  background: var(--rs-bg-card);
  border: 1px solid var(--rs-green-border);
  border-radius: var(--rs-radius);
  color: var(--rs-fg);
  box-shadow: var(--app-premium-shadow-soft);
}
.rs-card > .card-header,
.rs-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--rs-green-border);
  color: var(--rs-fg);
}
.rs-card > .card-footer,
.rs-card .card-footer {
  background: transparent;
  border-top: 1px solid var(--rs-green-border);
}
.rs-card--interactive {
  transition: transform var(--app-premium-motion), box-shadow var(--app-premium-motion);
}
.rs-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--app-premium-shadow); }
.rs-card__title { color: var(--rs-fg); font-weight: 700; margin-bottom: var(--rs-space-3); }
@media (prefers-reduced-motion: reduce) {
  .rs-card--interactive { transition: none; }
  .rs-card--interactive:hover { transform: none; }
}