:root {
  /* Paleta propria do Remoto: azul-petroleo/ciano tecnologico, distinto do
     azul/roxo do Memorizza — transmite "acesso remoto" e infraestrutura. */
  --rm-primary-50:  #ecfeff;
  --rm-primary-100: #cffafe;
  --rm-primary-400: #22d3ee;
  --rm-primary-500: #06b6d4;
  --rm-primary-600: #0891b2;
  --rm-primary-700: #0e7490;

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

  --rm-bg: #0b1220;
  --rm-surface: #ffffff;
  --rm-surface-muted: #f8fafc;
  --rm-border: #e2e8f0;

  --rm-success: #16a34a;
  --rm-danger: #dc2626;

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

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);
}

.rm-btn-primary {
  background: var(--rm-primary-500);
  border-color: var(--rm-primary-500);
  color: #05202a;
  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-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-info: var(--rm-primary-600);

  /* 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;

  /* 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);

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

/* 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-contabil-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(6, 182, 212, 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
   Contabil) 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;
}