/* ==========================================================================
   REMOTO DESIGN SYSTEM — tokens.
   Fonte única de verdade para cor/tipografia/espaçamento/radius/sombra de
   TODA a plataforma (remoto.app.br, Core, Contabilidade, Financeiro e
   qualquer systems/{slug} futuro). Nenhum módulo deve redefinir uma escala
   paralela (ver docs/design-system.md, seção "Regras") — um valor novo
   sempre entra AQUI, aditivo, nunca duplicado com prefixo de módulo.
   ========================================================================== */
:root {
  /* Marca — azul como cor principal (Remoto Design System, 2026). */
  --rm-primary-50:  #eff6ff;
  --rm-primary-100: #dbeafe;
  --rm-primary-400: #60a5fa;
  --rm-primary-500: #3b82f6;
  --rm-primary-600: #2563eb;
  --rm-primary-700: #1d4ed8;

  --rm-brand-primary: var(--rm-primary-600);
  --rm-brand-primary-hover: var(--rm-primary-700);
  --rm-brand-primary-light: var(--rm-primary-50);
  --rm-brand-primary-dark: var(--rm-primary-700);

  /* Tokens Oficiais e Consolidados do Remoto Design System */
  --color-primary: var(--rm-brand-primary);
  --color-primary-soft: var(--rm-primary-50);
  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-warning: #ea580c;
  --color-warning-soft: #ffedd5;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-info: #0891b2;
  --color-info-soft: #cffafe;
  --color-purple: #9333ea;
  --color-purple-soft: #f3e8ff;

  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-surface-subtle: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-subtle: #edf2f7;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);

  --rm-ink-900: #0b1220;
  --rm-ink-800: #111827;
  --rm-ink-600: #4b5563;
  --rm-ink-400: #9ca3af;

  --rm-bg: var(--color-bg);
  --rm-background: var(--color-bg);
  --rm-surface: var(--color-surface);
  --rm-surface-muted: var(--color-surface-muted);
  --rm-surface-secondary: var(--color-surface-subtle);
  --rm-border: var(--color-border);

  --rm-text-primary: var(--color-text);
  --rm-text-secondary: var(--color-text-secondary);
  --rm-text-muted: var(--color-text-muted);

  --rm-success: var(--color-success);
  --rm-success-light: var(--color-success-soft);
  --rm-danger: var(--color-danger);
  --rm-danger-light: var(--color-danger-soft);

  /* Cores por categoria/ícone — usadas pelos chips de ícone do menu e por
     qualquer indicador que precise de uma cor semântica "de assunto" (não
     de estado sucesso/erro). Nunca usar hex direto num componente quando
     um destes tokens já cobre o caso. */
  --rm-color-blue: #2563eb;    --rm-color-blue-bg: #dbeafe;
  --rm-color-green: #16a34a;   --rm-color-green-bg: #dcfce7;
  --rm-color-orange: #ea580c;  --rm-color-orange-bg: #ffedd5;
  --rm-color-red: #dc2626;     --rm-color-red-bg: #fee2e2;
  --rm-color-purple: #9333ea;  --rm-color-purple-bg: #f3e8ff;
  --rm-color-cyan: #0891b2;    --rm-color-cyan-bg: #cffafe;
  --rm-color-pink: #db2777;    --rm-color-pink-bg: #fce7f3;
  --rm-color-indigo: #4f46e5;  --rm-color-indigo-bg: #e0e7ff;
  --rm-color-yellow: #ca8a04;  --rm-color-yellow-bg: #fef9c3;
  --rm-color-gray: #475569;    --rm-color-gray-bg: #e2e8f0;

  --rm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Realinha o Bootstrap 5 (vendorizado sem customização) com a marca do
     Remoto Design System: Bootstrap define sua PRÓPRIA cor "primary"
     (#0d6efd) via estas mesmas variáveis CSS — sem este bloco, qualquer
     `.btn-primary`/`.text-primary`/`.bg-primary`/link nativo do Bootstrap
     mostraria um azul DIFERENTE do `--rm-brand-primary`. Sobrescrever aqui
     (depois do bootstrap.min.css no <head>, sempre) faz todo componente
     Bootstrap nativo herdar a cor certa automaticamente, sem precisar
     trocar `btn-primary` por `rm-btn-primary` em cada tela uma a uma. */
  --bs-primary: var(--rm-brand-primary);
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--rm-brand-primary);
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: var(--rm-brand-primary-hover);
  --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-primary-text-emphasis: var(--rm-primary-700);
  --bs-primary-bg-subtle: var(--rm-primary-50);
  --bs-primary-border-subtle: var(--rm-primary-100);
  --bs-body-font-family: var(--rm-font);
  --bs-body-bg: var(--color-bg);
}

body {
  font-family: var(--rm-font);
  background: var(--rm-surface-muted);
  color: var(--rm-ink-800);
}

.rm-navbar {
  background: var(--rm-ink-900);
}

.rm-navbar .navbar-brand {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}

.rm-navbar .navbar-brand span {
  color: var(--rm-primary-400);
}

.rm-hero {
  background: radial-gradient(circle at 20% 20%, var(--rm-primary-700) 0%, var(--rm-ink-900) 55%);
  color: #fff;
}

.rm-hero h1 {
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
}

.rm-hero .lead {
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   LANDING PAGE / HOME MODERNA (Visual Remoto 2.0)
   ========================================================================== */

.rm-landing-body {
  background-color: #050b18;
  color: #fff;
  min-height: 100vh;
}

.rm-landing-body .rm-navbar {
  background: #050b18;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 0.9rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(16px);
}

.rm-nav-links .rm-nav-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.rm-nav-links .rm-nav-link:hover,
.rm-nav-link:hover {
  color: #ffffff;
}

.rm-nav-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.rm-theme-toggle {
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.rm-theme-toggle:hover {
  opacity: 1;
  transform: rotate(15deg);
}

/* Hero Container */
.rm-hero-modern {
  position: relative;
  background: radial-gradient(circle at 18% 38%, rgba(30, 64, 175, 0.45) 0%, rgba(10, 24, 58, 0.95) 45%, #050b18 100%), #050b18;
  color: #fff;
  overflow: hidden;
  min-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rm-hero-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}

/* Tag Capsule */
.rm-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
}

.rm-hero-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  display: inline-block;
}

/* Titles */
.rm-hero-title {
  font-size: clamp(3rem, 5.5vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #ffffff;
  line-height: 1;
}

.rm-hero-title span {
  color: #3b82f6;
}

.rm-hero-subtitle {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.25;
}

.rm-hero-highlight {
  color: #38bdf8;
  background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rm-hero-lead {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 520px;
}

/* Buttons */
.rm-btn-hero-primary {
  background: #0d6efd;
  background: linear-gradient(180deg, #1d6fee 0%, #0d6efd 100%);
  border: 1px solid #2563eb;
  color: #fff;
  border-radius: 8px;
  padding: 0.65rem 1.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.4);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.rm-btn-hero-primary:hover {
  background: #0b5ed7;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.5);
}

.rm-btn-hero-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 8px;
  padding: 0.65rem 1.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.rm-btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* Checklist */
.rm-hero-checklist {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.rm-hero-check-item {
  display: inline-flex;
  align-items: center;
}

/* Annotation Above Tablet */
.rm-hero-annotation {
  position: absolute;
  top: -46px;
  right: 28px;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.rm-hero-annotation-text {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.1;
  text-align: right;
  transform: rotate(-6deg);
}

.rm-hero-annotation-arrow {
  margin-bottom: -18px;
  margin-left: 4px;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
}

/* Ambient Blue Glow */
.rm-hero-glow {
  position: absolute;
  top: 15%;
  right: 10%;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.45) 0%, rgba(29, 78, 216, 0.2) 45%, transparent 70%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}

/* Tablet Mockup Frame */
.rm-tablet-mockup {
  position: relative;
  z-index: 1;
  background: #0d1527;
  border: 7px solid #1e293b;
  border-radius: 22px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.85), 0 0 80px rgba(37, 99, 235, 0.35);
  padding: 10px;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  transform: perspective(1200px) rotateY(-8deg) rotateX(4deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.rm-tablet-mockup:hover {
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg) translateY(-4px);
  box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.95), 0 0 100px rgba(37, 99, 235, 0.45);
}

@media (max-width: 991.98px) {
  .rm-tablet-mockup {
    transform: none !important;
    max-width: 100%;
  }
  .rm-hero-annotation {
    display: none !important;
  }
}

.rm-tablet-camera {
  width: 6px;
  height: 6px;
  background: #334155;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}

.rm-tablet-screen {
  background: #f8fafc;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  min-height: 330px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Mockup Sidebar */
.rm-mockup-sidebar {
  width: 135px;
  background: #0f172a;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.rm-mockup-brand {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  text-align: left;
  padding-left: 4px;
}

.rm-mockup-brand span {
  color: #3b82f6;
}

.rm-mockup-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rm-mockup-nav-item {
  font-size: 0.62rem;
  color: #94a3b8;
  padding: 4px 6px;
  border-radius: 5px;
  text-align: left;
  white-space: nowrap;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.rm-mockup-nav-item.is-active {
  background: #2563eb;
  color: #fff;
  font-weight: 600;
}

/* Mockup Main */
.rm-mockup-main {
  flex: 1;
  background: #f8fafc;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rm-mockup-topbar {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}

.rm-mockup-search {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.62rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  width: 130px;
}

.rm-mockup-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 0.45rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.rm-mockup-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0284c7;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rm-mockup-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.rm-mockup-card-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.rm-icon--green {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.rm-icon--blue {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.rm-icon--purple {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.rm-mockup-badge {
  font-size: 0.52rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
}

.rm-badge--success {
  background: #dcfce7;
  color: #15803d;
}

.rm-badge--cyan {
  background: #ccfbf1;
  color: #0f766e;
}

.rm-badge--amber {
  background: #fef3c7;
  color: #b45309;
}

.rm-mockup-arrow {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.rm-mockup-banner {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Bottom Features Bar */
.rm-hero-footer-bar {
  background: rgba(5, 11, 24, 0.85);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 0;
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.rm-footer-icon {
  font-size: 1.85rem;
  color: #3b82f6;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

.rm-landing-body .rm-footer {
  background: #030712;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

/* ==========================================================================
   PÁGINAS PÚBLICAS / AUTENTICAÇÃO / CATÁLOGO / CONTRATAÇÃO (Visual Remoto 2.0)
   ========================================================================== */

.rm-public-body {
  background-color: #f8fafc;
  background-image: 
    radial-gradient(circle at 10% 15%, rgba(219, 234, 254, 0.45) 0%, transparent 45%),
    radial-gradient(circle at 90% 75%, rgba(224, 242, 254, 0.45) 0%, transparent 45%);
  background-attachment: fixed;
  color: #0f172a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.rm-public-body .rm-navbar {
  background: #050b18;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rm-public-body .rm-footer {
  margin-top: auto;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 0.85rem;
}

/* Pills & Tags */
.rm-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 9999px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #2563eb;
  text-transform: uppercase;
}

.rm-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 6px #2563eb;
  display: inline-block;
}

/* Feature Icon Box (Soft blue rounded square) */
.rm-feature-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Script / Handwritten Annotation */
.rm-script-annotation {
  font-family: 'Caveat', cursive, sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: #2563eb;
  line-height: 1.15;
  transform: rotate(-3deg);
  display: inline-block;
}

/* Modern Auth Card */
.rm-auth-card-modern {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.07);
  padding: 2.5rem;
}

@media (max-width: 575.98px) {
  .rm-auth-card-modern {
    padding: 1.75rem;
  }
}

/* Soft Green/Blue Alert Box */
.rm-alert-info-soft {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Form Input with Icon */
.rm-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.rm-input-icon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  font-size: 1.05rem;
  pointer-events: none;
  z-index: 4;
}

.rm-form-input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px !important;
  padding: 0.65rem 1rem 0.65rem 2.65rem;
  font-size: 0.92rem;
  color: #0f172a;
  transition: all 0.15s ease;
  width: 100%;
}

.rm-form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  outline: none;
}

.rm-input-action {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 4px;
  z-index: 4;
}

.rm-input-action:hover {
  color: #475569;
}

/* Submit Buttons */
.rm-btn-submit {
  background: #1d6fee;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  border: 1px solid #1d4ed8;
  color: #ffffff;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.rm-btn-submit:hover {
  background: #1e40af;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.rm-btn-google {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 10px;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  text-decoration: none;
}

.rm-btn-google:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

/* Catalog Cards */
.rm-catalog-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: all 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rm-catalog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -5px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

.rm-catalog-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.rm-catalog-icon--blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.rm-catalog-icon--green {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.rm-catalog-icon--purple {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.rm-promo-card {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f7ff 100%);
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Plan Card in Show */
.rm-plan-card-large {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.rm-plan-badge {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

/* Company Selection Radio Card */
.rm-company-radio-card {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rm-company-radio-card:hover {
  border-color: #93c5fd;
  background: #f8fafc;
}

.rm-company-radio-card.is-selected,
.rm-company-radio-card:has(input:checked) {
  border-color: #3b82f6;
  background: #f0f7ff;
  box-shadow: 0 0 0 1px #3b82f6;
}

.rm-company-radio-input {
  margin-right: 1rem;
  width: 1.2rem;
  height: 1.2rem;
  accent-color: #2563eb;
}

/* Stepper Component */
.rm-stepper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
}

.rm-step-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
}

.rm-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rm-step-item.is-active .rm-step-circle {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.rm-step-line {
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: -15px;
  width: 2px;
  background: #e2e8f0;
}

/* Help Box */
.rm-help-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem;
}

.rm-btn-primary {
  background: var(--rm-brand-primary);
  border-color: var(--rm-brand-primary);
  color: #fff;
  font-weight: 600;
}

.rm-btn-primary:hover {
  background: var(--rm-primary-600);
  border-color: var(--rm-primary-600);
  color: #fff;
}

.rm-card {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.rm-auth-card {
  max-width: 420px;
  margin: 4rem auto;
}

.rm-badge-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.rm-badge-status.is-active {
  background: #dcfce7;
  color: var(--rm-success);
}

.rm-badge-status.is-inactive {
  background: #fee2e2;
  color: var(--rm-danger);
}

.rm-badge-status.is-deleted {
  background: #e5e7eb;
  color: #4b5563;
}

.rm-footer {
  color: var(--rm-ink-400);
  font-size: 0.85rem;
}

/* ==========================================================================
   Sistema visual global (Etapa 20) — tokens e componentes ADITIVOS, nunca
   renomeando/removendo nada acima: todo o resto do app (admin, portal,
   Sistema Contábil) já consome estas variáveis via var(--rm-*) ou já usa
   .rm-card/.rm-btn-primary/.rm-badge-status, então os refinamentos abaixo
   se propagam sozinhos pra toda a aplicação, sem precisar tocar em cada
   tela/módulo individualmente.
   ========================================================================== */

:root {
  /* Cores semanticas que faltavam (so existiam sucesso/erro) */
  --rm-warning: #d97706;
  --rm-warning-light: #fef3c7;
  --rm-info: var(--rm-primary-600);
  --rm-info-light: var(--rm-primary-50);

  /* Escala de raio — usar em vez de valores soltos (0.5rem, 0.75rem...) */
  --rm-radius-sm: 0.5rem;
  --rm-radius: 0.75rem;
  --rm-radius-lg: 1rem;
  --rm-radius-xl: 1.25rem;
  --rm-radius-full: 999px;

  /* Sobrescrita do Bootstrap NATIVO (mesmo mecanismo/motivo do bloco de
     cor --bs-primary logo abaixo, agora para arredondamento): .btn/.btn-sm/
     .btn-lg, .form-control, .form-select, .card, .modal-content, .dropdown-menu,
     .alert etc. usam --bs-border-radius(-sm|-lg|-xl) internamente
     (--bs-btn-border-radius: var(--bs-border-radius), por exemplo). Sem
     isto, qualquer botão/componente Bootstrap NATIVO (sem uma classe
     .rm-*) fica com o radius padrão do Bootstrap (~6px/0.375rem) —
     visualmente "quadrado" e inconsistente com o resto do Remoto Design
     System, mesmo já usando a cor da marca corretamente. Isto é
     ADITIVO: nunca redefine --rm-radius-*, só ensina o Bootstrap a usá-los.
  */
  --bs-border-radius: var(--rm-radius);
  --bs-border-radius-sm: var(--rm-radius-sm);
  --bs-border-radius-lg: var(--rm-radius-lg);
  --bs-border-radius-xl: var(--rm-radius-xl);
  --bs-border-radius-xxl: var(--rm-radius-xl);

  /* Escala de espaçamento — nomes xs..3xl (Remoto Design System) além dos
     nomes sm/(sem sufixo)/lg já em uso, mantidos como alias por
     compatibilidade (dezenas de arquivos já consomem --rm-space-sm/--rm-space/--rm-space-lg). */
  --rm-space-xs: 0.25rem;
  --rm-space-sm: 0.5rem;
  --rm-space-md: 1rem;
  --rm-space: var(--rm-space-md);
  --rm-space-lg: 1.75rem;
  --rm-space-xl: 2.5rem;
  --rm-space-2xl: 3.5rem;
  --rm-space-3xl: 5rem;

  /* Escala de sombra */
  --rm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --rm-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  --rm-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);

  /* Escala de espacamento */
  --rm-space-sm: 0.5rem;
  --rm-space: 1rem;
  --rm-space-lg: 1.75rem;
}

/* Bootstrap compila .btn-primary/.btn-outline-primary/.form-check-input:checked/
   .page-link com o azul PRÓPRIO dele fixo por classe (não referencia
   var(--bs-primary) em tempo real, ao contrário de .text-primary/.bg-primary/
   .border-primary, já realinhados pela sobrescrita de --bs-primary acima) —
   por isso estes precisam de uma sobrescrita própria, aditiva, pra herdar
   a marca do Remoto Design System em qualquer tela que use o componente
   nativo do Bootstrap em vez do equivalente rm-*. */
.btn-primary {
  --bs-btn-bg: var(--rm-brand-primary);
  --bs-btn-border-color: var(--rm-brand-primary);
  --bs-btn-hover-bg: var(--rm-brand-primary-hover);
  --bs-btn-hover-border-color: var(--rm-brand-primary-hover);
  --bs-btn-active-bg: var(--rm-brand-primary-dark);
  --bs-btn-active-border-color: var(--rm-brand-primary-dark);
  --bs-btn-disabled-bg: var(--rm-brand-primary);
  --bs-btn-disabled-border-color: var(--rm-brand-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--rm-brand-primary);
  --bs-btn-border-color: var(--rm-brand-primary);
  --bs-btn-hover-bg: var(--rm-brand-primary);
  --bs-btn-hover-border-color: var(--rm-brand-primary);
  --bs-btn-active-bg: var(--rm-brand-primary);
  --bs-btn-active-border-color: var(--rm-brand-primary);
  --bs-btn-disabled-color: var(--rm-brand-primary);
  --bs-btn-disabled-border-color: var(--rm-brand-primary);
}

.form-check-input:checked {
  background-color: var(--rm-brand-primary);
  border-color: var(--rm-brand-primary);
}

.page-link {
  color: var(--rm-brand-primary);
}

.page-item.active .page-link {
  background-color: var(--rm-brand-primary);
  border-color: var(--rm-brand-primary);
}

/* Estado de foco consistente (acessibilidade — secao 2/18 do escopo de
   UX): mesmo anel de foco em qualquer elemento interativo, em vez do
   azul padrao do navegador ou nenhum indicador. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible,
.rm-shell-nav-link:focus-visible {
  outline: 2px solid var(--rm-primary-500);
  outline-offset: 2px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--rm-primary-500);
  box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
}

/* Transicao suave global (hover/foco) — nunca anima layout, so cor/sombra,
   e respeita quem pediu menos movimento. */
.btn, .form-control, .form-select, .nav-link, .rm-card, a {
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .form-control, .form-select, .nav-link, .rm-card, a {
    transition: none;
  }
}

/* Cabecalho de tabela consistente em toda a aplicacao (secao 11 do
   escopo) — nao muda nenhuma classe existente, so a tipografia do <th>
   dentro de qualquer .table já usada hoje. */
.table > thead > th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rm-ink-600);
  font-weight: 600;
  border-bottom-width: 1px;
}

/* Badges de status semanticos que faltavam (so existia active/inactive) */
.rm-badge-status.is-warning {
  background: #fef3c7;
  color: var(--rm-warning);
}

.rm-badge-status.is-info {
  background: var(--rm-primary-50);
  color: var(--rm-info);
}

/* Estado vazio reutilizavel — generico (nunca prefixado por sistema),
   disponivel pra qualquer tela (CRUDs do admin, portal, Sistema
   Contabilidade) adotar aos poucos, sem duplicar o mesmo padrao em cada
   modulo (secao 15 do escopo de UX). */
.rm-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--rm-ink-600);
}

.rm-empty-state i {
  font-size: 2.5rem;
  color: var(--rm-ink-400);
  margin-bottom: var(--rm-space-sm);
  display: block;
}

.rm-empty-state h6 {
  color: var(--rm-ink-800);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* Cartao "interativo" opcional (opt-in, nunca aplicado a .rm-card por
   padrao — um card estatico de informacao nao deveria "levantar" no
   hover) — usar rm-card rm-card--hover em cards clicaveis/links. */
.rm-card--hover:hover {
  box-shadow: var(--rm-shadow);
  border-color: var(--rm-primary-100);
}

/* Botoes compactos, so com icone, pra acoes secundarias em tabelas
   (secao 5/11 do escopo de UX) — tamanho e alinhamento consistentes em
   qualquer tabela da aplicacao. */
.rm-btn-icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ícones coloridos por SIGNIFICADO da ação (nunca por sistema/tela) — mesma
   paleta categórica já usada nos ícones dos cards do dashboard
   (--rm-color-*). Uso: <i class="bi bi-pencil rm-icon-blue"></i> dentro de
   um botão outline/neutro (btn-outline-secondary) — o botão continua
   neutro (borda/fundo cinza), só o ícone ganha cor, pro efeito ficar leve
   em listas com muitas linhas em vez de colorir a borda inteira do botão.
   Nunca usar dentro de um botão de fundo SÓLIDO (rm-btn-primary/btn-danger
   etc.): lá o ícone já é branco por contraste — sobrescrever quebraria a
   legibilidade. Convenção adotada (documentar ao reutilizar em telas novas):
     azul   -> editar, consultar, atualizar/sincronizar, visualizar, buscar
     verde  -> ativar, baixar/download, confirmar, sucesso
     laranja-> desativar, alerta, arquivar
     vermelho-> excluir, remover, negar
     roxo   -> certificados, documentos, segurança
     ciano  -> localização/CEP, diagnóstico
     cinza  -> neutro/secundário (cancelar, fechar) — deliberadamente o
               mesmo cinza que o botão já tinha, existe só por completude. */
.rm-icon-blue   { color: var(--rm-color-blue); }
.rm-icon-green  { color: var(--rm-color-green); }
.rm-icon-orange { color: var(--rm-color-orange); }
.rm-icon-red    { color: var(--rm-color-red); }
.rm-icon-purple { color: var(--rm-color-purple); }
.rm-icon-cyan   { color: var(--rm-color-cyan); }
.rm-icon-gray   { color: var(--rm-color-gray); }

/* ==========================================================================
   REMOTO DESIGN SYSTEM — SHELL ÚNICO (sidebar + topbar + conteúdo).
   Substitui admin.css + os shells reimplementados em Contabilidade/
   Financeiro (ver auditoria do Design System) — usado por
   platform/resources/views/layouts/shell.php, o ÚNICO HTML de shell da
   plataforma. Claro/branco (referência visual do Design System), nunca
   mais escuro/navy — se algum sistema precisar de uma variação, o ajuste
   é feito AQUI, nunca copiando este bloco pra um CSS por módulo.
   ========================================================================== */
.rm-shell {
  display: flex;
  min-height: 100vh;
  background: var(--rm-background);
}

.rm-shell-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid var(--color-border);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.85rem;
}

@media (min-width: 992px) {
  .rm-shell-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background-color: #ffffff !important;
  }
}

.rm-shell-brand {
  color: var(--color-text);
  text-decoration: none;
  padding: 0.25rem 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rm-shell-brand-icon {
  width: 2.25rem;
  height: 2.25rem;
  background: #2563eb;
  color: #ffffff;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.rm-shell-brand-text {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #0f172a;
}

.rm-shell-brand-dot {
  color: var(--rm-brand-primary);
}

.rm-shell-brand-text small {
  display: block;
  font-weight: 700;
  font-size: 0.68rem;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.1rem;
}

.rm-shell-brand-logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.rm-shell-brand-logo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.1rem;
}

.rm-shell-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.rm-shell-nav-group {
  margin: 1.2rem 0.6rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #94a3b8;
}

.rm-shell-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  color: #475569;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: all 0.15s ease-in-out;
}

.rm-shell-nav-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.rm-shell-nav-link.active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

/* Chip de ícone colorido */
.rm-shell-nav-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.rm-shell-nav-link.active .rm-shell-nav-icon {
  background: transparent;
  color: #1d4ed8;
}

.rm-shell-nav-icon--blue    { background: var(--rm-color-blue-bg);    color: var(--rm-color-blue); }
.rm-shell-nav-icon--green   { background: var(--rm-color-green-bg);   color: var(--rm-color-green); }
.rm-shell-nav-icon--orange  { background: var(--rm-color-orange-bg);  color: var(--rm-color-orange); }
.rm-shell-nav-icon--red     { background: var(--rm-color-red-bg);     color: var(--rm-color-red); }
.rm-shell-nav-icon--purple  { background: var(--rm-color-purple-bg);  color: var(--rm-color-purple); }
.rm-shell-nav-icon--cyan    { background: var(--rm-color-cyan-bg);    color: var(--rm-color-cyan); }
.rm-shell-nav-icon--pink    { background: var(--rm-color-pink-bg);    color: var(--rm-color-pink); }
.rm-shell-nav-icon--indigo  { background: var(--rm-color-indigo-bg);  color: var(--rm-color-indigo); }
.rm-shell-nav-icon--yellow  { background: var(--rm-color-yellow-bg);  color: var(--rm-color-yellow); }
.rm-shell-nav-icon--gray    { background: var(--rm-color-gray-bg);    color: var(--rm-color-gray); }

/* Card de suporte na sidebar (referência visual) */
.rm-sidebar-support-card {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
  margin-bottom: 0.75rem;
}

.rm-sidebar-support-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.rm-sidebar-support-text {
  font-size: 0.78rem;
  line-height: 1.25;
}

.rm-sidebar-support-text strong {
  display: block;
  color: #0f172a;
  font-weight: 600;
}

.rm-sidebar-support-text a {
  color: #2563eb;
  text-decoration: none;
  font-size: 0.73rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.rm-sidebar-support-text a:hover {
  text-decoration: underline;
}

.rm-shell-footer {
  border-top: 1px solid var(--color-border);
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rm-shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

.rm-shell-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.75rem;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.rm-shell-topbar-left,
.rm-shell-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

/* Widgets da Topbar (Data, Notificações, Avatar) */
.rm-topbar-date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  color: #475569;
}

.rm-topbar-date i {
  color: #64748b;
  font-size: 0.95rem;
}

.rm-topbar-date-text {
  line-height: 1.15;
}

.rm-topbar-date-text strong {
  display: block;
  font-weight: 600;
  color: #0f172a;
}

.rm-topbar-date-text small {
  display: block;
  font-size: 0.7rem;
  color: #94a3b8;
}

.rm-notification-btn {
  position: relative;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.6rem;
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all 0.15s ease;
}

.rm-notification-btn:hover {
  background: #f8fafc;
  color: #0f172a;
}

.rm-notification-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 1rem;
  height: 1rem;
  line-height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  text-align: center;
  border: 2px solid #ffffff;
}

.rm-notification-dropdown {
  width: 360px;
  max-width: 90vw;
  border-radius: 0.75rem;
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1060;
}

.rm-notification-dropdown-header {
  background: #ffffff;
}

.rm-notification-dropdown-header .rm-mark-all-btn {
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 500;
}

.rm-notification-dropdown-header .rm-mark-all-btn:hover {
  color: var(--color-primary-hover, #0284c7);
  text-decoration: underline !important;
}

.rm-notification-dropdown-body {
  max-height: 380px;
  overflow-y: auto;
}

.rm-dropdown-notification-item {
  transition: background-color 0.15s ease;
  cursor: pointer;
  display: flex;
}

.rm-dropdown-notification-item.is-unread {
  background-color: #f8fafc;
}

.rm-dropdown-notification-item.is-unread:hover {
  background-color: #f1f5f9;
}

.rm-dropdown-notification-item.is-read {
  background-color: #ffffff;
}

.rm-dropdown-notification-item.is-read:hover {
  background-color: #f8fafc;
}

.rm-dropdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary, #0284c7);
  display: inline-block;
  margin-top: 4px;
}

.rm-dropdown-dot.is-empty {
  visibility: hidden;
}

.rm-notification-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary, #0284c7);
  display: inline-block;
  flex-shrink: 0;
}

.rm-notification-icon-box {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border: 1px solid transparent;
}

.rm-notification-item.is-unread {
  background-color: #f8fafc;
  border-left: 3px solid var(--color-primary, #0284c7) !important;
}

.rm-notification-item.is-read {
  background-color: #ffffff;
  border-left: 3px solid transparent !important;
}

@media (max-width: 576px) {
  .rm-notification-dropdown {
    width: 320px;
  }
}

.rm-user-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  padding: 0.2rem;
  text-decoration: none;
  cursor: pointer;
}

.rm-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #0284c7;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.rm-avatar--sm {
  width: 1.85rem;
  height: 1.85rem;
  font-size: 0.75rem;
}

.rm-avatar--lg {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
}

.rm-avatar--soft-blue {
  background: #e0f2fe;
  color: #0369a1;
}

.rm-user-dropdown-info {
  text-align: left;
  line-height: 1.2;
}

.rm-user-dropdown-info strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
}

.rm-user-dropdown-info small {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
}

.rm-shell-content {
  flex: 1;
  padding: 1.5rem 1.75rem;
}

@media (max-width: 991.98px) {
  .rm-shell-content {
    padding: 1rem;
  }

  .rm-shell-sidebar .btn-close {
    filter: none;
  }
}

/* ==========================================================================
   Novo Design System: Cards de Métrica, Gráficos Vetoriais e Listagens
   ========================================================================== */

/* Card de métrica topo (exatamente na estética da referência) */
.rm-metric-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rm-metric-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.05);
}

.rm-metric-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.rm-metric-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.rm-metric-icon--blue   { background: #eff6ff; color: #2563eb; }
.rm-metric-icon--red    { background: #fef2f2; color: #dc2626; }
.rm-metric-icon--orange { background: #fff7ed; color: #ea580c; }
.rm-metric-icon--yellow { background: #fefce8; color: #ca8a04; }
.rm-metric-icon--purple { background: #faf5ff; color: #9333ea; }
.rm-metric-icon--green  { background: #f0fdf4; color: #16a34a; }

.rm-metric-title {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0.2rem;
}

.rm-metric-body {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.rm-metric-value {
  font-size: 1.65rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}

.rm-metric-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

.rm-metric-badge--success {
  background: #dcfce7;
  color: #15803d;
}

.rm-metric-badge--neutral {
  background: #f1f5f9;
  color: #475569;
}

.rm-metric-badge--danger {
  background: #fee2e2;
  color: #b91c1c;
}

.rm-metric-badge--warning {
  background: #fef3c7;
  color: #b45309;
}

.rm-metric-footer {
  margin-top: 0.35rem;
  font-size: 0.73rem;
  color: #94a3b8;
}

/* Gráfico Donut/Rosca em SVG puro */
.rm-chart-donut-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}

.rm-chart-donut-wrap svg {
  transform: rotate(-90deg);
  border-radius: 50%;
}

.rm-chart-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.rm-chart-donut-center small {
  display: block;
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1;
}

.rm-chart-donut-center strong {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.15;
}

.rm-chart-donut-center span {
  display: block;
  font-size: 0.68rem;
  color: #94a3b8;
}

/* Legenda de Gráfico */
.rm-chart-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.78rem;
}

.rm-chart-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.22rem 0;
}

.rm-chart-legend-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #475569;
}

.rm-chart-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Mini gráfico de linha em SVG */
.rm-sparkline-svg {
  width: 100%;
  height: 120px;
  overflow: visible;
}

/* Banner de incentivo/produtividade */
.rm-insight-banner {
  background: #eff6ff;
  border-radius: 0.6rem;
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rm-insight-banner-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #dbeafe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.rm-insight-banner-text {
  font-size: 0.78rem;
  line-height: 1.25;
}

.rm-insight-banner-text strong {
  display: block;
  color: #1e3a8a;
  font-weight: 600;
}

.rm-insight-banner-text span {
  color: #3b82f6;
}

/* Timeline de Atividades Recentes */
.rm-activity-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.rm-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.45rem 0;
  font-size: 0.78rem;
  border-bottom: 1px solid #f1f5f9;
}

.rm-activity-item:last-child {
  border-bottom: none;
}

.rm-activity-badge {
  background: #f1f5f9;
  color: #475569;
  border-radius: 0.35rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.rm-activity-desc {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.rm-activity-desc strong {
  color: #0f172a;
  font-weight: 600;
}

.rm-activity-desc span {
  color: #64748b;
}

/* Card de Lista com cabeçalho limpo */
.rm-clean-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  padding: 1.15rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rm-clean-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.rm-clean-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.rm-clean-card-action {
  font-size: 0.78rem;
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.rm-clean-card-action:hover {
  text-decoration: underline;
}

/* Empty State Moderno de Agenda */
.rm-clean-empty-state {
  text-align: center;
  padding: 1.75rem 1rem;
  margin: auto 0;
}

.rm-clean-empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #f1f5f9;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
}

.rm-clean-empty-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.25rem;
}

.rm-clean-empty-desc {
  font-size: 0.75rem;
  color: #64748b;
  max-width: 240px;
  margin: 0 auto 0.85rem;
}

/* ==========================================================================
   Componentes de dashboard/listagem compartilhados (Remoto Design System).
   Extraídos das implementações antes duplicadas em Contabilidade/
   Financeiro — cada sistema para de ter seu próprio CSS de card de
   estatística/cabeçalho de página/breadcrumb.
   ========================================================================== */
.rm-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-sm);
  margin-bottom: var(--rm-space-lg);
}

.rm-page-header h2 {
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.rm-page-header p {
  color: var(--rm-text-secondary);
  margin-bottom: 0;
}

.rm-breadcrumb {
  font-size: 0.85rem;
  color: var(--rm-text-muted);
  margin-bottom: var(--rm-space-sm);
}

.rm-breadcrumb a {
  color: var(--rm-text-secondary);
  text-decoration: none;
}

.rm-breadcrumb a:hover {
  color: var(--rm-brand-primary);
}

.rm-stat-card {
  display: flex;
  align-items: center;
  gap: var(--rm-space-sm);
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  box-shadow: var(--rm-shadow-sm);
  padding: var(--rm-space-md);
}

.rm-stat-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rm-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Variante compacta — cabeçalho de card de lista, badge inline etc. */
.rm-stat-icon--sm {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--rm-radius-sm);
  font-size: 0.9rem;
}

.rm-stat-icon.is-success { background: var(--rm-success-light); color: var(--rm-success); }
.rm-stat-icon.is-danger  { background: var(--rm-danger-light);  color: var(--rm-danger); }
.rm-stat-icon.is-warning { background: var(--rm-warning-light); color: var(--rm-warning); }
.rm-stat-icon.is-info    { background: var(--rm-info-light);    color: var(--rm-info); }

/* Variantes por categoria — mesmos tokens dos chips do menu
   (.rm-shell-nav-icon--*), reutilizados aqui pra indicador de dashboard
   cujo "assunto" (não estado sucesso/erro) já tem uma cor semântica. */
.rm-stat-icon--blue    { background: var(--rm-color-blue-bg);    color: var(--rm-color-blue); }
.rm-stat-icon--green   { background: var(--rm-color-green-bg);   color: var(--rm-color-green); }
.rm-stat-icon--orange  { background: var(--rm-color-orange-bg);  color: var(--rm-color-orange); }
.rm-stat-icon--red     { background: var(--rm-color-red-bg);     color: var(--rm-color-red); }
.rm-stat-icon--purple  { background: var(--rm-color-purple-bg);  color: var(--rm-color-purple); }
.rm-stat-icon--cyan    { background: var(--rm-color-cyan-bg);    color: var(--rm-color-cyan); }
.rm-stat-icon--pink    { background: var(--rm-color-pink-bg);    color: var(--rm-color-pink); }
.rm-stat-icon--indigo  { background: var(--rm-color-indigo-bg);  color: var(--rm-color-indigo); }
.rm-stat-icon--yellow  { background: var(--rm-color-yellow-bg);  color: var(--rm-color-yellow); }
.rm-stat-icon--gray    { background: var(--rm-color-gray-bg);    color: var(--rm-color-gray); }

/* Card clicável (stat-card usado como link) — nunca sublinha, só levanta
   levemente a sombra no hover, mesmo espírito de .rm-card--hover. */
a > .rm-stat-card {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

a:hover > .rm-stat-card {
  box-shadow: var(--rm-shadow);
  border-color: var(--rm-primary-100);
}

/* Botão de ação rápida (dashboard) — pill colorido com ícone, mesmo
   espírito dos chips do menu, em tamanho de botão. Cor por token de
   categoria (rm-quick-action--{cor}), nunca hex direto no PHP. */
.rm-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: var(--rm-radius);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--rm-text-primary);
  background: var(--rm-surface-secondary);
}

.rm-quick-action:hover {
  filter: brightness(0.97);
  color: var(--rm-text-primary);
}

.rm-quick-action i {
  font-size: 1rem;
}

.rm-quick-action--blue   { background: var(--rm-color-blue-bg);   color: var(--rm-color-blue); }
.rm-quick-action--green  { background: var(--rm-color-green-bg);  color: var(--rm-color-green); }
.rm-quick-action--purple { background: var(--rm-color-purple-bg); color: var(--rm-color-purple); }
.rm-quick-action--orange { background: var(--rm-color-orange-bg); color: var(--rm-color-orange); }
.rm-quick-action--gray   { background: var(--rm-surface-secondary); color: var(--rm-text-secondary); }

/* Cabeçalho de card de lista (título com ícone + ação "ver todas") —
   substitui o "strong + span" solto que cada painel repetia à mão. */
.rm-list-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rm-space-sm);
  padding: var(--rm-space-md);
  border-bottom: 1px solid var(--rm-border);
}

.rm-list-card-header strong {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Alternância segmentada (ex.: "Eu / Todos", "Competência / 3 meses") —
   substitui o btn-group cru (rm-btn-primary vs. btn-outline-secondary
   escolhido na mão em cada tela) por UM componente, em qualquer sistema. */
.rm-toggle {
  display: inline-flex;
  background: var(--rm-surface-secondary);
  border-radius: var(--rm-radius);
  padding: 0.2rem;
  gap: 0.15rem;
}

.rm-toggle-item {
  border: none;
  background: none;
  padding: 0.35rem 0.85rem;
  border-radius: var(--rm-radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rm-text-secondary);
  text-decoration: none;
  line-height: 1.2;
}

.rm-toggle-item:hover {
  color: var(--rm-text-primary);
}

.rm-toggle-item.active {
  background: var(--rm-surface);
  color: var(--rm-brand-primary-dark);
  box-shadow: var(--rm-shadow-sm);
}

.rm-stat-label {
  font-size: 0.8rem;
  color: var(--rm-text-secondary);
  margin-bottom: 0.1rem;
}

.rm-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--rm-text-primary);
}

.rm-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rm-text-secondary);
  border-bottom-width: 1px;
  white-space: nowrap;
}

.rm-table td {
  vertical-align: middle;
}

.rm-table-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

/* ==========================================================================
   DESIGN SYSTEM GLOBAL — COMPONENTES DE LISTAGEM E CADASTRO (CRUD)
   Compatível com Contábil, Admin, Portal, Financeiro, Demo e futuros módulos.
   ========================================================================== */

/* Page Header & Actions */
.rm-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.rm-page-header h2,
.rm-page-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.rm-page-header p,
.rm-page-subtitle {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-bottom: 0;
}

.rm-page-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Botões Globais do Design System */
.rm-btn-default,
.btn-outline-secondary.rm-btn-outline {
  background: #ffffff;
  border: 1px solid var(--color-border);
  color: #475569;
  font-weight: 500;
  font-size: 0.84rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  transition: all 0.15s ease;
}

.rm-btn-default:hover,
.btn-outline-secondary.rm-btn-outline:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.rm-btn-primary {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #ffffff;
  font-weight: 500;
  font-size: 0.84rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  transition: all 0.15s ease;
}

.rm-btn-primary:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

/* 4 Cards de Métricas Contextuais (.rm-metric-card) */
.rm-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 1199.98px) {
  .rm-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575.98px) {
  .rm-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.rm-metric-card-horizontal {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rm-metric-card-horizontal:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow-sm);
}

.rm-metric-card-horizontal .rm-metric-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.rm-metric-card-horizontal .rm-metric-content {
  flex: 1;
  min-width: 0;
}

/* Barra de Busca e Filtros Global (.rm-filter-bar) */
.rm-filter-bar {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0.55rem 0.75rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}

.rm-filter-search {
  flex: 1 1 320px;
  position: relative;
  display: flex;
  align-items: center;
}

.rm-filter-search i {
  position: absolute;
  left: 0.85rem;
  color: #94a3b8;
  font-size: 0.95rem;
  pointer-events: none;
}

.rm-filter-search-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-md);
  padding: 0.45rem 0.85rem 0.45rem 2.35rem;
  font-size: 0.86rem;
  color: #0f172a;
  outline: none;
  transition: all 0.15s ease;
}

.rm-filter-search-input::placeholder {
  color: #94a3b8;
  font-size: 0.85rem;
}

.rm-filter-search-input:focus {
  background: #ffffff;
  border-color: var(--color-border);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.rm-filter-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.rm-filter-select {
  border: 1px solid var(--color-border-subtle);
  background-color: #f8fafc;
  color: #334155;
  font-size: 0.83rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 11px 9px;
  appearance: none;
}

.rm-filter-select:hover {
  background-color: #ffffff;
  border-color: #cbd5e1;
}

.rm-filter-select:focus {
  background-color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.rm-filter-clear-btn {
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.rm-filter-clear-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Container de Tabela e Tabela (.rm-data-table) */
.rm-data-table-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.rm-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}

.rm-data-table thead th {
  background: #ffffff;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  vertical-align: middle;
}

.rm-data-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  color: #334155;
  font-size: 0.86rem;
  vertical-align: middle;
}

.rm-data-table tbody tr:last-child td {
  border-bottom: none;
}

.rm-data-table tbody tr {
  transition: background-color 0.15s ease;
}

.rm-data-table tbody tr:hover {
  background-color: #f8fafc;
}

.rm-table-check-col {
  width: 44px;
  text-align: center;
  padding-left: 1rem !important;
  padding-right: 0.4rem !important;
}

.rm-table-checkbox {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: var(--radius-sm);
  border: 1px solid #cbd5e1;
  cursor: pointer;
}

.rm-table-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Célula de Entidade / Cliente */
.rm-entity-cell {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.rm-entity-info {
  min-width: 0;
}

.rm-entity-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.88rem;
  line-height: 1.3;
  margin-bottom: 0.15rem;
  text-decoration: none;
  display: block;
}

.rm-entity-title:hover {
  color: var(--color-primary);
}

.rm-entity-subtitle {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.3;
}

.rm-entity-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 0.2rem;
}

/* Badges em Pílula (.rm-pill-badge) */
.rm-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.rm-pill-badge--success {
  background-color: #dcfce7;
  color: #15803d;
}

.rm-pill-badge--danger {
  background-color: #fee2e2;
  color: #b91c1c;
}

.rm-pill-badge--warning {
  background-color: #fef3c7;
  color: #b45309;
}

.rm-pill-badge--info {
  background-color: #eff6ff;
  color: #1d4ed8;
}

.rm-pill-badge--neutral {
  background-color: #f1f5f9;
  color: #475569;
}

/* Variantes de Avatar com cores pastel */
.rm-avatar--soft-blue   { background: #e0f2fe; color: #0369a1; }
.rm-avatar--soft-cyan   { background: #cffafe; color: #0e7490; }
.rm-avatar--soft-indigo { background: #e0e7ff; color: #4338ca; }
.rm-avatar--soft-purple { background: #f3e8ff; color: #7e22ce; }
.rm-avatar--soft-green  { background: #dcfce7; color: #15803d; }
.rm-avatar--soft-emerald{ background: #d1fae5; color: #047857; }
.rm-avatar--soft-amber  { background: #fef3c7; color: #b45309; }

/* Ações de Linha (.rm-row-actions) */
.rm-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.rm-action-btn {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  text-decoration: none;
}

.rm-action-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.rm-action-btn--primary:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-soft);
  background: var(--color-primary-soft);
}

.rm-action-dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.35rem;
  min-width: 175px;
}

.rm-action-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: #334155;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.rm-action-dropdown-item:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.rm-action-dropdown-item--danger {
  color: var(--color-danger);
}

.rm-action-dropdown-item--danger:hover {
  background-color: #fee2e2;
  color: #991b1b;
}

.rm-action-dropdown-divider {
  margin: 0.35rem 0;
  border-top: 1px solid var(--color-border-subtle);
}

/* Paginação Global (.rm-pagination-bar) */
.rm-pagination-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--color-border);
  background: #ffffff;
}

.rm-pagination-info {
  font-size: 0.82rem;
  color: #64748b;
}

.rm-pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rm-page-btn {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rm-page-btn:hover:not(.disabled):not(.active) {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.rm-page-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  font-weight: 600;
}

.rm-page-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.rm-per-page-select {
  border: 1px solid var(--color-border);
  background-color: #ffffff;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: 0.35rem 1.75rem 0.35rem 0.65rem;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 10px 8px;
  appearance: none;
}

/* ==========================================================================
   DESIGN SYSTEM GLOBAL — MODAIS E FORMULÁRIOS
   Compatível com Contábil, Admin, Portal, Financeiro, Demo e futuros módulos.
   ========================================================================== */

/* Modal Container e Estrutura */
.rm-modal-dialog {
  max-width: 920px;
  margin: 1.75rem auto;
  height: calc(100% - 3.5rem);
}

@media (max-width: 575.98px) {
  .rm-modal-dialog {
    margin: 0.75rem auto;
    height: calc(100% - 1.5rem);
  }
}

.rm-modal-content {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  height: 100%;
}

/* O form precisa ser flex column e ocupar a altura do modal-content para permitir scroll no body */
.rm-modal-content > form,
.rm-modal-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
}

.rm-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
  background: #ffffff;
  z-index: 2;
}

.rm-modal-header-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.rm-modal-header-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: #eff6ff;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.rm-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
  line-height: 1.25;
}

.rm-modal-subtitle {
  font-size: 0.84rem;
  color: #64748b;
  margin: 0;
}

.rm-modal-close {
  background: transparent;
  border: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 1.15rem;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.rm-modal-close:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.rm-modal-body {
  flex: 1 1 auto;
  overflow-y: auto !important;
  min-height: 0;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.rm-modal-footer {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border-subtle);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  box-shadow: 0 -4px 6px -1px rgba(15, 23, 42, 0.03);
  z-index: 2;
}

/* Seções de Formulário (.rm-form-section) */
.rm-form-section {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
  margin-bottom: 0;
}

.rm-form-section-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.rm-form-section-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #eff6ff;
  color: #2563eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.rm-form-section-icon--purple { background: #f3e8ff; color: #9333ea; }
.rm-form-section-icon--green  { background: #f0fdf4; color: #16a34a; }
.rm-form-section-icon--yellow { background: #fefce8; color: #ca8a04; }

.rm-form-section-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.1rem;
  line-height: 1.25;
}

.rm-form-section-desc {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
  line-height: 1.35;
}

/* Seletor de Tipo Segmentado (.rm-type-selector) */
.rm-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 575.98px) {
  .rm-type-selector {
    grid-template-columns: 1fr;
  }
}

.rm-type-option {
  position: relative;
  display: block;
  margin: 0;
}

.rm-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rm-type-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #ffffff;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: #475569;
  transition: all 0.15s ease;
  user-select: none;
}

.rm-type-card i {
  font-size: 1.15rem;
  color: #64748b;
  transition: color 0.15s ease;
}

.rm-type-card:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.rm-type-option input[type="radio"]:checked + .rm-type-card {
  border-color: #3b82f6;
  background-color: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
  box-shadow: 0 0 0 1px #3b82f6;
}

.rm-type-option input[type="radio"]:checked + .rm-type-card i {
  color: #2563eb;
}

.rm-type-option input[type="radio"]:disabled + .rm-type-card {
  cursor: not-allowed;
  opacity: 0.8;
}

/* Labels e Campos de Formulário */
.rm-form-label {
  font-size: 0.81rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.35rem;
  display: block;
}

.rm-form-label .rm-required {
  color: #dc2626;
  margin-left: 0.15rem;
  font-weight: 700;
}

.rm-form-control,
.form-control.rm-input {
  height: 40px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  background-color: #ffffff;
  padding: 0.5rem 0.85rem;
  font-size: 0.86rem;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.rm-form-control::placeholder,
.form-control.rm-input::placeholder {
  color: #94a3b8;
  font-size: 0.85rem;
}

.rm-form-control:focus,
.form-control.rm-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  outline: none;
  background-color: #ffffff;
}

.rm-form-control[readonly],
.form-control.rm-input[readonly],
.rm-form-control:disabled,
.form-control.rm-input:disabled {
  background-color: #f8fafc;
  color: #334155;
  border-color: #e2e8f0;
  cursor: not-allowed;
}

.rm-form-select,
.form-select.rm-select {
  height: 40px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  background-color: #ffffff;
  padding: 0.5rem 2.25rem 0.5rem 0.85rem;
  font-size: 0.86rem;
  color: #0f172a;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 11px 9px;
  width: 100%;
}

.rm-form-select:focus,
.form-select.rm-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Grupo de Input com Botão de Ação (ex: CEP) */
.rm-input-action-group {
  display: flex;
  width: 100%;
  position: relative;
}

.rm-input-action-group .rm-form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.rm-input-action-btn {
  height: 40px;
  border: 1px solid #e2e8f0;
  border-left: none;
  background: #ffffff;
  color: #64748b;
  padding: 0 0.85rem;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rm-input-action-btn:hover {
  background: #f8fafc;
  color: #0f172a;
}

/* Textos de Ajuda e Erro */
.rm-field-help {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.35rem;
  line-height: 1.35;
}

.rm-field-error {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 0.35rem;
}

/* Botões do Modal */
.rm-btn-cancel {
  background: #ffffff;
  border: 1px solid var(--color-border);
  color: #475569;
  font-weight: 500;
  font-size: 0.86rem;
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
  cursor: pointer;
}

.rm-btn-cancel:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.rm-btn-save {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: #ffffff;
  font-weight: 500;
  font-size: 0.86rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
  transition: all 0.15s ease;
  cursor: pointer;
}

.rm-btn-save:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

/* Loading e Skeletons (.rm-skeleton) */
.rm-skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: rm-skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes rm-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   DASHBOARD SAAS & "MEUS SISTEMAS" — Componentes Globais Reutilizáveis
   ========================================================================== */

/* Campo de Busca Global da Topbar */
.rm-topbar-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.75rem;
  min-width: 240px;
  max-width: 320px;
  transition: all 0.15s ease;
}

.rm-topbar-search:focus-within {
  background: #ffffff;
  border-color: var(--rm-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.rm-topbar-search i {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.rm-topbar-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.82rem;
  color: var(--color-text);
  width: 100%;
}

.rm-topbar-search input::placeholder {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

/* Identificação da Empresa na Topbar */
.rm-topbar-company-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.rm-topbar-user-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.rm-topbar-company-sub {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

/* Page Header de Dashboard (.rm-dashboard-header) */
.rm-dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.rm-dashboard-header-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.025em;
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.rm-dashboard-header-subtitle {
  font-size: 0.92rem;
  color: #64748b;
  margin: 0;
}

.rm-dashboard-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.rm-btn-header-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  color: #334155;
  font-weight: 600;
  font-size: 0.84rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
}

.rm-btn-header-outline:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.rm-btn-header-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--rm-brand-primary);
  border: 1px solid var(--rm-brand-primary);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.84rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
  transition: all 0.15s ease;
}

.rm-btn-header-primary:hover {
  background: var(--rm-brand-primary-hover);
  border-color: var(--rm-brand-primary-hover);
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.35);
}

/* System Card (.rm-system-card) */
.rm-system-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.rm-system-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

.rm-system-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.rm-system-card-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.rm-system-card-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  background: #f1f5f9;
  color: #475569;
}

.rm-system-card-icon--green {
  background: #dcfce7;
  color: #16a34a;
}

.rm-system-card-icon--blue {
  background: #dbeafe;
  color: #2563eb;
}

.rm-system-card-icon--purple {
  background: #f3e8ff;
  color: #9333ea;
}

.rm-system-card-icon--orange {
  background: #ffedd5;
  color: #ea580c;
}

.rm-system-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.rm-system-card-plan {
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
  margin-top: 0.15rem;
}

/* Badges de Status do Sistema */
.rm-system-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.rm-system-status-badge.is-ready {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.rm-system-status-badge.is-pending {
  background: #fefce8;
  color: #a16207;
  border: 1px solid #fef08a;
}

.rm-system-status-badge.is-suspended {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.rm-system-status-badge.is-failed {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* Descrição do Sistema */
.rm-system-card-desc {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.45;
  min-height: 2.75rem;
  margin-bottom: 1rem;
}

/* Grid de Recursos Principais */
.rm-system-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 1.25rem;
}

.rm-system-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}

.rm-system-feature-icon {
  font-size: 1rem;
  color: #64748b;
}

.rm-system-feature-text {
  font-size: 0.72rem;
  font-weight: 500;
  color: #475569;
  line-height: 1.2;
}

/* Rodapé do Card de Sistema */
.rm-system-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.rm-system-btn-details {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2563eb;
  background: transparent;
  border: none;
  padding: 0.45rem 0.25rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.rm-system-btn-details:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.rm-system-btn-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--rm-brand-primary);
  border: 1px solid var(--rm-brand-primary);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
  cursor: pointer;
}

.rm-system-btn-enter:hover:not(:disabled) {
  background: var(--rm-brand-primary-hover);
  border-color: var(--rm-brand-primary-hover);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.35);
}

.rm-system-btn-enter:disabled,
.rm-system-btn-enter.is-disabled {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}

/* Indicador de Subdomínio e SSL */
.rm-system-ssl-indicator {
  width: 100%;
  text-align: center;
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 0.75rem;
  padding-top: 0.4rem;
  word-break: break-all;
}

.rm-system-ssl-indicator i {
  color: #16a34a;
  margin-right: 0.2rem;
}

/* Bloco Inferior — 3 Cards Modernos */
.rm-dashboard-bottom-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
}

.rm-dashboard-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.rm-dashboard-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.rm-dashboard-card-icon--blue {
  background: #eff6ff;
  color: #2563eb;
}

.rm-dashboard-card-icon--purple {
  background: #f3e8ff;
  color: #9333ea;
}

.rm-dashboard-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.rm-dashboard-card-subtitle {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0.1rem 0 0 0;
}

/* Resumo da sua conta — Grid de 4 Caixas */
.rm-summary-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  margin-top: auto;
}

@media (max-width: 767.98px) {
  .rm-summary-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rm-summary-metric-box {
  border-radius: 0.65rem;
  padding: 0.75rem 0.65rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.15s ease;
}

.rm-summary-metric-box.is-green {
  background: #f0fdf4;
  color: #16a34a;
}

.rm-summary-metric-box.is-blue {
  background: #eff6ff;
  color: #2563eb;
}

.rm-summary-metric-box.is-amber {
  background: #fefce8;
  color: #ca8a04;
}

.rm-summary-metric-box.is-purple {
  background: #faf5ff;
  color: #9333ea;
}

.rm-summary-metric-box i {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.rm-summary-metric-box .metric-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.rm-summary-metric-box .metric-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
  margin-top: 0.25rem;
}

/* Precisa de Ajuda — Ações e Links */
.rm-support-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 575.98px) {
  .rm-support-actions-grid {
    grid-template-columns: 1fr;
  }
}

.rm-btn-support-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-xs);
}

.rm-btn-support-action:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.rm-support-tutorials-link {
  text-align: center;
  margin-top: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.rm-support-tutorials-link:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

/* Expanda seus Negócios — Promo CTA Card */
.rm-dashboard-promo-card {
  background: linear-gradient(145deg, #f8faff 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}

.rm-dashboard-promo-bg-art {
  position: absolute;
  right: -10px;
  bottom: -15px;
  opacity: 0.65;
  pointer-events: none;
  z-index: 1;
}

.rm-promo-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md);
  font-size: 0.84rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  margin-top: auto;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-xs);
  z-index: 2;
  position: relative;
}

.rm-promo-cta-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  box-shadow: var(--shadow-sm);
}