:root {
  /* Paleta da identidade visual (única fonte das cores) */
  --paleta-marinho: #102d59;
  --paleta-marinho-claro: #1a4382;
  --paleta-ciano: #38bdf8;
  --paleta-ciano-escuro: #0ea5e9;
  --paleta-azul: #3b82f6;
  --paleta-esmeralda: #10b981;
  --paleta-prata: #cbd5e1;
  --paleta-branco: #ffffff;
  --paleta-gelo: #f8fafc;
  --paleta-texto: #0f172a;
  --paleta-texto-suave: #64748b;
  --paleta-vermelho: #ef4444;
  --paleta-ambar: #f59e0b;

  /* Tokens semânticos usados pelos componentes */
  --cor-fundo: var(--paleta-branco);
  --cor-superficie: var(--paleta-branco);
  --cor-superficie-alt: #f8fafc;
  --cor-borda: #e5e9f0;
  --cor-texto: var(--paleta-texto);
  --cor-texto-suave: var(--paleta-texto-suave);
  --cor-primaria: var(--paleta-ciano);
  --cor-primaria-hover: var(--paleta-ciano-escuro);
  --cor-primaria-suave: rgba(56, 189, 248, 0.16);
  --cor-primaria-texto: #0369a1;
  --cor-sobre-primaria: var(--paleta-texto);
  --cor-link: #2563eb;
  --cor-foco: var(--paleta-azul);
  --cor-info: #1d4ed8;
  --cor-info-suave: rgba(59, 130, 246, 0.14);
  --cor-sucesso: #047857;
  --cor-sucesso-suave: rgba(16, 185, 129, 0.14);
  --cor-alerta: #b45309;
  --cor-alerta-suave: rgba(245, 158, 11, 0.18);
  --cor-perigo: #dc2626;
  --cor-perigo-suave: rgba(239, 68, 68, 0.12);
  --cor-neutra-suave: #e2e8f0;

  /* Cards de cobrança: fundos alternados e borda discreta */
  --cor-card-a: #f1f5f9;
  --cor-card-b: #eff6ff;
  --cor-card-borda: #dbe3ee;
  --cor-card-hover: #e2ebf8;

  /* Situação financeira (cor do indicador, texto escuro e fundo opaco do selo).
     Verde = só pagamento confirmado; vermelho = em atraso; azul = pendente ou em aberto;
     roxo = recorrência ativa. */
  --status-pago: #059669;
  --status-pago-texto: #065f46;
  --status-pago-fundo: #d1fae5;
  --status-atraso: #dc2626;
  --status-atraso-texto: #991b1b;
  --status-atraso-fundo: #fee2e2;
  --status-aberto: #2563eb;
  --status-aberto-texto: #1e40af;
  --status-aberto-fundo: #dbeafe;
  --status-recorrencia: #7c3aed;
  --status-recorrencia-texto: #5b21b6;
  --status-recorrencia-fundo: #ede9fe;
  --status-pausada: #d97706;
  --status-neutra: #94a3b8;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.05);
  --sombra-forte: 0 12px 32px rgba(15, 23, 42, 0.22);
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --largura-menu: 240px;
  --largura-conteudo: 1280px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--cor-fundo);
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
  font-weight: 650;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.15rem;
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0;
}

a {
  color: var(--cor-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

.texto-suave {
  color: var(--cor-texto-suave);
}

.texto-direita {
  text-align: right;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}