@charset "UTF-8";
/* ==========================================================================
   AG Serviços — Sistema de Gestão de Empréstimos
   Folha de estilo única (sem dependências externas, sem fontes remotas)
   Ordem: 1) Tokens  2) Reset  3) Layout  4) Componentes  5) Utilitários
          6) Responsivo  7) Acessibilidade  8) Impressão
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — paleta, escalas e medidas (tema claro)
   -------------------------------------------------------------------------- */
:root {
  /* Tipografia do sistema — nenhuma fonte remota */
  --fonte-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
    "Roboto Mono", "DejaVu Sans Mono", monospace;

  /* Escala tipográfica.
     Subiu um degrau inteiro em relação à versão compacta original: o corpo
     saiu de 13px para 15px e todos os degraus acompanharam na mesma
     proporção, para as relações entre rótulo, valor e título continuarem
     iguais. Densidade se recupera no espaçamento, não encolhendo a letra —
     texto de 13px em tela de operação cansa a vista ao longo do dia. */
  --ts-xs: 0.75rem;     /* 12px */
  --ts-sm: 0.8125rem;   /* 13px */
  --ts-md: 0.9375rem;   /* 15px — corpo padrão do sistema */
  --ts-lg: 1.0625rem;   /* 17px */
  --ts-xl: 1.1875rem;   /* 19px */
  --ts-2xl: 1.4375rem;  /* 23px */
  --ts-3xl: 1.875rem;   /* 30px — valores de KPI */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;

  --altura-linha: 1.45;
  --altura-linha-densa: 1.25;

  /* Escala de espaçamento (base 4px) */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e7: 32px;
  --e8: 40px;

  /* Raios e bordas */
  --raio-sm: 3px;
  --raio: 5px;
  --raio-lg: 8px;
  --raio-pill: 999px;
  --borda-fina: 1px;

  /* Sombras discretas — nada de brilho */
  --sombra-1: 0 1px 2px rgba(15, 27, 45, 0.06);
  --sombra-2: 0 1px 3px rgba(15, 27, 45, 0.10), 0 1px 2px rgba(15, 27, 45, 0.06);
  --sombra-menu: 0 4px 12px rgba(15, 27, 45, 0.14);

  /* Transições curtas */
  --transicao: 120ms ease;

  /* Medidas de layout — acompanham a escala tipográfica */
  --largura-sidebar: 256px;
  --altura-topo: 58px;

  /* Altura única de todo controle clicável: input, select e botão. É o que
     mantém campo e botão alinhados quando estão lado a lado na mesma linha. */
  --altura-controle: 38px;

  /* ------------------------------------------------------------------
     CORES DA MARCA

     Amostradas da logo da AG Serviços:
       azul institucional  #0E5989   (moldura, seta e a letra "AG")
       dourado             #F4C165   (as barras do gráfico e o descritivo)

     O azul carrega a identidade e conduz a navegação. O dourado é
     reservado à MARCA — logo, item ativo do menu, fio de destaque.
     Nunca vira status: um dourado que às vezes significa "atenção" e às
     vezes "AG Serviços" deixa de comunicar as duas coisas. Por isso o
     tom de alerta foi puxado para o laranja queimado, bem distante dele.
     ------------------------------------------------------------------ */
  --c-marca-azul: #0e5989;
  --c-marca-ouro: #f4c165;

  /* --- Superfícies e texto (claro) --- */
  /* Cinzas levemente azulados, para conversarem com o azul da marca em
     vez de brigarem com ele. */
  --c-fundo: #eef2f7;
  --c-superficie: #ffffff;
  --c-superficie-2: #f6f9fc;
  --c-superficie-3: #e8eef4;
  --c-borda: #d4dee8;
  --c-borda-forte: #adbdcd;
  --c-texto: #10202e;
  --c-texto-suave: #4d5f70;
  --c-texto-fraco: #74879a;
  --c-texto-inverso: #ffffff;

  /* --- Acento: o azul da logo --- */
  --c-acento: #0e5989;
  --c-acento-forte: #0a4568;
  --c-acento-fraco: #e6f0f7;
  --c-acento-borda: #a9c9de;
  --c-acento-texto: #0a4265;

  /* --- Ouro da marca ---
     O dourado da logo tem luminosidade alta demais para texto sobre
     fundo claro (não passa em contraste), então existe uma variante
     escura só para quando ele precisa ser lido. */
  --c-ouro: #f4c165;
  --c-ouro-forte: #e0a83f;
  --c-ouro-legivel: #8a6118;
  --c-ouro-fraco: #fdf4e2;
  --c-ouro-borda: #f0d9a8;

  /* --- Sucesso (verde) --- */
  --c-sucesso: #157347;
  --c-sucesso-forte: #0f5c38;
  --c-sucesso-fraco: #e3f3ea;
  --c-sucesso-borda: #a9d7bf;
  --c-sucesso-texto: #0d5132;

  /* --- Alerta (laranja queimado, afastado do ouro da marca) --- */
  --c-alerta: #b45309;
  --c-alerta-forte: #92400e;
  --c-alerta-fraco: #fdf0e3;
  --c-alerta-borda: #edc79b;
  --c-alerta-texto: #8a3f08;

  /* --- Perigo (vermelho) --- */
  --c-perigo: #b3261e;
  --c-perigo-forte: #931d17;
  --c-perigo-fraco: #fdecea;
  --c-perigo-borda: #f0bdb8;
  --c-perigo-texto: #8c1c15;

  /* --- Neutro --- */
  --c-neutro: #56677a;
  --c-neutro-fraco: #eaeff4;
  --c-neutro-borda: #c6d1dc;
  --c-neutro-texto: #3a4b5c;

  /* --- Info (turquesa, para não se confundir com o azul da marca) --- */
  --c-info: #0e7490;
  --c-info-fraco: #e2f2f7;
  --c-info-borda: #a8d5e3;
  --c-info-texto: #0b5670;

  /* --- Barra lateral: azul profundo da marca, nos dois temas --- */
  --c-sidebar-fundo: #0a2f4a;
  --c-sidebar-fundo-2: #0d3c5e;
  --c-sidebar-borda: #14496f;
  --c-sidebar-texto: #a8c4d8;
  --c-sidebar-texto-forte: #ffffff;
  --c-sidebar-ativo: #14507a;
  --c-sidebar-marca: #f4c165;

  /* --- Tabela --- */
  --c-tabela-cabecalho: #eaf0f6;
  --c-tabela-zebra: #fafcfd;
  --c-tabela-hover: #e8f1f8;
  --c-tabela-borda: #dfe6ee;

  /* --- Foco --- */
  --c-foco: #0e5989;
  --anel-foco: 0 0 0 3px rgba(14, 89, 137, 0.30);
}

/* --------------------------------------------------------------------------
   1b. TEMA ESCURO — mesmos tokens, valores recalibrados para contraste

   Acionado por um atributo no <html>, não por @media, para o usuário poder
   escolher. Um script no <head> define o atributo antes da primeira pintura:
   sem preferência salva, ele segue o sistema operacional; com preferência
   salva, ela vence. Sem JavaScript, cai no tema claro — que é legível em
   qualquer situação.
   -------------------------------------------------------------------------- */
:root[data-tema="escuro"] {
    /* Pretos puxados para o azul da marca, não cinza neutro. */
    --c-fundo: #0b141c;
    --c-superficie: #121e29;
    --c-superficie-2: #16242f;
    --c-superficie-3: #1c2c38;
    --c-borda: #24384a;
    --c-borda-forte: #375068;
    --c-texto: #e3ecf3;
    --c-texto-suave: #a2b5c5;
    --c-texto-fraco: #7f95a8;
    --c-texto-inverso: #0b141c;

    /* O azul da logo é escuro demais para fundo escuro; aqui ele sobe
       de luminosidade mantendo a mesma matiz. */
    --c-acento: #4ba3d8;
    --c-acento-forte: #74bce6;
    --c-acento-fraco: #102f45;
    --c-acento-borda: #1f4d6e;
    --c-acento-texto: #8fcbeb;

    /* No escuro o dourado já tem contraste de sobra — é o mesmo da logo. */
    --c-ouro: #f4c165;
    --c-ouro-forte: #ffd489;
    --c-ouro-legivel: #f4c165;
    --c-ouro-fraco: #33280f;
    --c-ouro-borda: #6b5320;

    --c-sucesso: #4fbe86;
    --c-sucesso-forte: #74d4a2;
    --c-sucesso-fraco: #122c1e;
    --c-sucesso-borda: #275640;
    --c-sucesso-texto: #8adab0;

    --c-alerta: #e08c3c;
    --c-alerta-forte: #f0a65e;
    --c-alerta-fraco: #33210e;
    --c-alerta-borda: #6a451c;
    --c-alerta-texto: #f0ab6b;

    --c-perigo: #ef7a70;
    --c-perigo-forte: #f79a92;
    --c-perigo-fraco: #351a18;
    --c-perigo-borda: #6d302b;
    --c-perigo-texto: #f6a49d;

    --c-neutro: #93a6b8;
    --c-neutro-fraco: #1e2b37;
    --c-neutro-borda: #35485a;
    --c-neutro-texto: #bccbd9;

    --c-info: #4fb6d4;
    --c-info-fraco: #102c36;
    --c-info-borda: #275668;
    --c-info-texto: #8ad2e7;

    --c-sidebar-fundo: #071f33;
    --c-sidebar-fundo-2: #0a2c47;
    --c-sidebar-borda: #103f61;
    --c-sidebar-texto: #9fbdd3;
    --c-sidebar-texto-forte: #ffffff;
    --c-sidebar-ativo: #10486f;
    --c-sidebar-marca: #f4c165;

    --c-tabela-cabecalho: #1a2937;
    --c-tabela-zebra: #14212c;
    --c-tabela-hover: #1c3a4f;
    --c-tabela-borda: #24333f;

    --c-foco: #6cb8e4;
    --anel-foco: 0 0 0 3px rgba(108, 184, 228, 0.34);

    --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --sombra-2: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.35);
    --sombra-menu: 0 4px 14px rgba(0, 0, 0, 0.55);

    /* Controles nativos (setas de select, calendário, barra de rolagem)
       seguem o tema */
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte-base);
  font-size: var(--ts-md);
  line-height: var(--altura-linha);
  color: var(--c-texto);
  background-color: var(--c-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--e3);
  font-weight: var(--peso-semi);
  line-height: var(--altura-linha-densa);
  color: var(--c-texto);
}

h1 { font-size: var(--ts-2xl); }
h2 { font-size: var(--ts-xl); }
h3 { font-size: var(--ts-lg); }
h4, h5, h6 { font-size: var(--ts-md); }

p { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-acento);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

hr {
  border: 0;
  border-top: var(--borda-fina) solid var(--c-borda);
  margin: var(--e5) 0;
}

small { font-size: var(--ts-sm); }

code, kbd, pre, samp {
  font-family: var(--fonte-mono);
  font-size: 0.95em;
}

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

ul, ol { margin: 0 0 var(--e3); padding-left: var(--e5); }

/* --------------------------------------------------------------------------
   3. LAYOUT — aplicação, barra lateral, conteúdo e topo
   -------------------------------------------------------------------------- */

/* Grade geral: sidebar fixa de 240px + área de conteúdo */
.app {
  display: grid;
  grid-template-columns: var(--largura-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Barra lateral --- */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  width: var(--largura-sidebar);
  height: 100vh;
  overflow-y: auto;
  background-color: var(--c-sidebar-fundo);
  border-right: var(--borda-fina) solid var(--c-sidebar-borda);
  color: var(--c-sidebar-texto);
}

.sidebar__marca {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--altura-topo);
  padding: var(--e4);
  font-size: var(--ts-lg);
  font-weight: var(--peso-semi);
  letter-spacing: 0.02em;
  color: var(--c-sidebar-texto-forte);
  background-color: var(--c-sidebar-fundo-2);
  border-bottom: var(--borda-fina) solid var(--c-sidebar-borda);
}

.sidebar__marca a {
  color: inherit;
  text-decoration: none;
}

.sidebar__nav {
  flex: 1 1 auto;
  padding: var(--e3) var(--e2);
  overflow-y: auto;
}

/* Títulos de grupo dentro do menu (ex.: <p>, <span> soltos) */
.sidebar__nav > p,
.sidebar__nav > span,
.sidebar__nav h2,
.sidebar__nav h3 {
  margin: var(--e4) var(--e3) var(--e2);
  font-size: var(--ts-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #7c8ba1;
}

.sidebar__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  margin-bottom: 2px;
  border-radius: var(--raio);
  border-left: 3px solid transparent;
  font-size: var(--ts-md);
  line-height: 1.3;
  color: var(--c-sidebar-texto);
  text-decoration: none;
  transition: background-color var(--transicao), color var(--transicao);
}

.sidebar__nav a:hover,
.sidebar__nav a:focus-visible {
  background-color: var(--c-sidebar-fundo-2);
  color: var(--c-sidebar-texto-forte);
  text-decoration: none;
}

/* Item ativo da navegação */
.sidebar__nav a[aria-current="page"] {
  background-color: var(--c-sidebar-ativo);
  border-left-color: #6da3e8;
  color: #ffffff;
  font-weight: var(--peso-semi);
}

.sidebar__rodape {
  padding: var(--e3) var(--e4);
  border-top: var(--borda-fina) solid var(--c-sidebar-borda);
  font-size: var(--ts-sm);
  line-height: 1.4;
  color: #8593a6;
}

.sidebar__rodape a {
  color: #a9bdd8;
}

/* --- Área de conteúdo --- */
.conteudo {
  min-width: 0;
  padding: var(--e5) var(--e6) var(--e8);
}

/* --- Barra superior --- */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: var(--altura-topo);
  margin: calc(var(--e5) * -1) calc(var(--e6) * -1) var(--e5);
  padding: var(--e2) var(--e6);
  background-color: var(--c-superficie);
  border-bottom: var(--borda-fina) solid var(--c-borda);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topo__titulo {
  margin: 0;
  font-size: var(--ts-lg);
  font-weight: var(--peso-semi);
  color: var(--c-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-shrink: 0;
}

.pagina-titulo {
  margin: 0 0 var(--e4);
  font-size: var(--ts-2xl);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  color: var(--c-texto);
}

/* --------------------------------------------------------------------------
   4. COMPONENTES
   -------------------------------------------------------------------------- */

/* --- Cartão --- */
.cartao {
  background-color: var(--c-superficie);
  border: var(--borda-fina) solid var(--c-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  margin-bottom: var(--e5);
  overflow: hidden;
}

.cartao__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin: 0;
  padding: var(--e3) var(--e4);
  font-size: var(--ts-lg);
  font-weight: var(--peso-semi);
  color: var(--c-texto);
  background-color: var(--c-superficie-2);
  border-bottom: var(--borda-fina) solid var(--c-borda);
}

.cartao__corpo {
  padding: var(--e4);
}

/* Tabela encostada na borda do cartão */
.cartao__corpo > .tabela:only-child,
.cartao__corpo--tabela {
  margin: 0;
}

.cartao__rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e2);
  flex-wrap: wrap;
  padding: var(--e3) var(--e4);
  background-color: var(--c-superficie-2);
  border-top: var(--borda-fina) solid var(--c-borda);
  font-size: var(--ts-sm);
  color: var(--c-texto-suave);
}

/* --- Grade responsiva --- */
.grade {
  display: grid;
  gap: var(--e4);
  margin-bottom: var(--e5);
}

.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grade > .cartao { margin-bottom: 0; }

/* --- Indicador (KPI) --- */
.indicador {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e4);
  background-color: var(--c-superficie);
  border: var(--borda-fina) solid var(--c-borda);
  border-left: 3px solid var(--c-borda-forte);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
}

.indicador__rotulo {
  font-size: var(--ts-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-texto-fraco);
}

.indicador__valor {
  font-size: var(--ts-3xl);
  font-weight: var(--peso-semi);
  line-height: 1.15;
  color: var(--c-texto);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.indicador__nota {
  font-size: var(--ts-sm);
  color: var(--c-texto-suave);
  font-variant-numeric: tabular-nums;
}

.indicador--sucesso { border-left-color: var(--c-sucesso); }
.indicador--sucesso .indicador__valor { color: var(--c-sucesso-texto); }

.indicador--alerta { border-left-color: var(--c-alerta); }
.indicador--alerta .indicador__valor { color: var(--c-alerta-texto); }

.indicador--perigo { border-left-color: var(--c-perigo); }
.indicador--perigo .indicador__valor { color: var(--c-perigo-texto); }

/* --- Tabela de dados --- */
.tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--c-superficie);
  font-size: var(--ts-md);
  color: var(--c-texto);
}

.tabela caption {
  padding: var(--e2) var(--e3);
  text-align: left;
  font-size: var(--ts-sm);
  font-weight: var(--peso-semi);
  color: var(--c-texto-suave);
}

.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--e2) var(--e3);
  text-align: left;
  font-size: var(--ts-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-texto-suave);
  background-color: var(--c-tabela-cabecalho);
  border-bottom: var(--borda-fina) solid var(--c-borda-forte);
}

/* Cabeçalho clicável para ordenação */
.tabela thead th a {
  color: inherit;
  text-decoration: none;
}
.tabela thead th a:hover { color: var(--c-acento); text-decoration: underline; }

.tabela tbody td {
  padding: var(--e2) var(--e3);
  border-bottom: var(--borda-fina) solid var(--c-tabela-borda);
  vertical-align: middle;
  line-height: 1.35;
}

/* Zebra sutil */
.tabela tbody tr:nth-child(even) {
  background-color: var(--c-tabela-zebra);
}

/* Destaque da linha sob o cursor */
.tabela tbody tr:hover {
  background-color: var(--c-tabela-hover);
}

.tabela tbody tr:last-child td { border-bottom: 0; }

.tabela tfoot td,
.tabela tfoot th {
  padding: var(--e2) var(--e3);
  font-weight: var(--peso-semi);
  background-color: var(--c-superficie-2);
  border-top: var(--borda-fina) solid var(--c-borda-forte);
  color: var(--c-texto);
}

/* Variante compacta — mais linhas visíveis por tela */
.tabela--compacta thead th,
.tabela--compacta tbody td,
.tabela--compacta tfoot td,
.tabela--compacta tfoot th {
  padding: 3px var(--e2);
  font-size: var(--ts-sm);
  line-height: 1.25;
}

/* Células numéricas — dinheiro alinhado pela vírgula */
.num,
.tabela .num,
td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.tabela thead th.num { text-align: right; }

/* Coluna de ações no fim da linha */
.tabela .acoes,
.tabela td:last-child.acoes {
  text-align: right;
  white-space: nowrap;
}

/* Estado vazio */
.tabela__vazia,
.tabela .tabela__vazia td,
td.tabela__vazia {
  padding: var(--e7) var(--e4);
  text-align: center;
  color: var(--c-texto-fraco);
  font-size: var(--ts-md);
  font-style: italic;
  background-color: var(--c-superficie);
}

.tabela__vazia strong {
  display: block;
  margin-bottom: var(--e1);
  font-style: normal;
  font-weight: var(--peso-semi);
  color: var(--c-texto-suave);
}

/* Rolagem horizontal quando a tabela não cabe */
.tabela-rolagem {
  width: 100%;
  overflow-x: auto;
  max-height: 70vh;
  overflow-y: auto;
  border: var(--borda-fina) solid var(--c-borda);
  border-radius: var(--raio);
}

/* --- Etiqueta (badge de status) --- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 2px var(--e2);
  border: var(--borda-fina) solid var(--c-neutro-borda);
  border-radius: var(--raio-pill);
  background-color: var(--c-neutro-fraco);
  color: var(--c-neutro-texto);
  font-size: var(--ts-xs);
  font-weight: var(--peso-semi);
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: baseline;
}

.etiqueta--sucesso {
  background-color: var(--c-sucesso-fraco);
  border-color: var(--c-sucesso-borda);
  color: var(--c-sucesso-texto);
}

.etiqueta--alerta {
  background-color: var(--c-alerta-fraco);
  border-color: var(--c-alerta-borda);
  color: var(--c-alerta-texto);
}

.etiqueta--perigo {
  background-color: var(--c-perigo-fraco);
  border-color: var(--c-perigo-borda);
  color: var(--c-perigo-texto);
}

.etiqueta--neutro {
  background-color: var(--c-neutro-fraco);
  border-color: var(--c-neutro-borda);
  color: var(--c-neutro-texto);
}

.etiqueta--info {
  background-color: var(--c-info-fraco);
  border-color: var(--c-info-borda);
  color: var(--c-info-texto);
}

/* --- Botões --- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 7px var(--e4);
  min-height: var(--altura-controle);
  font-family: inherit;
  font-size: var(--ts-md);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: var(--borda-fina) solid var(--c-borda-forte);
  border-radius: var(--raio);
  background-color: var(--c-superficie);
  color: var(--c-texto);
  box-shadow: var(--sombra-1);
  transition: background-color var(--transicao), border-color var(--transicao),
    color var(--transicao);
  -webkit-appearance: none;
  appearance: none;
}

.botao:hover {
  background-color: var(--c-superficie-3);
  text-decoration: none;
}

.botao:active { transform: translateY(1px); }

.botao:disabled,
.botao[aria-disabled="true"],
.botao.desabilitado {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* Primário — ação principal da tela */
.botao--primario {
  background-color: var(--c-acento);
  border-color: var(--c-acento);
  color: #ffffff;
}
.botao--primario:hover {
  background-color: var(--c-acento-forte);
  border-color: var(--c-acento-forte);
  color: #ffffff;
}

/* Secundário — ação de apoio */
.botao--secundario {
  background-color: var(--c-superficie);
  border-color: var(--c-acento-borda);
  color: var(--c-acento-texto);
}
.botao--secundario:hover {
  background-color: var(--c-acento-fraco);
  border-color: var(--c-acento);
}

/* Perigo — exclusão, estorno, cancelamento */
.botao--perigo {
  background-color: var(--c-perigo);
  border-color: var(--c-perigo);
  color: #ffffff;
}
.botao--perigo:hover {
  background-color: var(--c-perigo-forte);
  border-color: var(--c-perigo-forte);
  color: #ffffff;
}

/* Fantasma — sem preenchimento nem borda */
.botao--fantasma {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--c-texto-suave);
}
.botao--fantasma:hover {
  background-color: var(--c-superficie-3);
  color: var(--c-texto);
}

/* Tamanhos */
.botao--pequeno {
  padding: 2px var(--e2);
  min-height: 24px;
  font-size: var(--ts-sm);
  border-radius: var(--raio-sm);
}

.botao--bloco {
  display: flex;
  width: 100%;
}

/* Grupo de botões lado a lado */
.botoes {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
}

/* --- Alertas / mensagens de sistema --- */
.alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  border: var(--borda-fina) solid var(--c-neutro-borda);
  border-left: 3px solid var(--c-neutro);
  border-radius: var(--raio);
  background-color: var(--c-neutro-fraco);
  color: var(--c-neutro-texto);
  font-size: var(--ts-md);
}

.alerta strong { font-weight: var(--peso-semi); }
.alerta p:last-child { margin-bottom: 0; }

.alerta--sucesso {
  background-color: var(--c-sucesso-fraco);
  border-color: var(--c-sucesso-borda);
  border-left-color: var(--c-sucesso);
  color: var(--c-sucesso-texto);
}

.alerta--erro {
  background-color: var(--c-perigo-fraco);
  border-color: var(--c-perigo-borda);
  border-left-color: var(--c-perigo);
  color: var(--c-perigo-texto);
}

.alerta--aviso {
  background-color: var(--c-alerta-fraco);
  border-color: var(--c-alerta-borda);
  border-left-color: var(--c-alerta);
  color: var(--c-alerta-texto);
}

.alerta--info {
  background-color: var(--c-info-fraco);
  border-color: var(--c-info-borda);
  border-left-color: var(--c-info);
  color: var(--c-info-texto);
}

/* --- Formulários --- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  margin-bottom: var(--e4);
  min-width: 0;
}

.campo label {
  font-size: var(--ts-sm);
  font-weight: var(--peso-semi);
  color: var(--c-texto-suave);
}

.campo label .obrigatorio,
.campo label abbr[title] {
  color: var(--c-perigo);
  text-decoration: none;
  margin-left: 2px;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 7px var(--e3);
  min-height: var(--altura-controle);
  font-family: inherit;
  font-size: var(--ts-md);
  line-height: 1.3;
  color: var(--c-texto);
  background-color: var(--c-superficie);
  border: var(--borda-fina) solid var(--c-borda-forte);
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao);
  -webkit-appearance: none;
  appearance: none;
}

.campo select {
  /* Espaço para a seta nativa do sistema */
  -webkit-appearance: auto;
  appearance: auto;
  padding-right: var(--e2);
}

.campo textarea {
  min-height: 88px;
  resize: vertical;
  line-height: var(--altura-linha);
}

.campo input[type="checkbox"],
.campo input[type="radio"] {
  width: auto;
  min-height: 0;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: var(--c-acento);
}

/* Valores monetários e numéricos digitados */
.campo input[type="number"],
.campo input[inputmode="decimal"],
.campo input[inputmode="numeric"],
.campo input.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: var(--c-acento-borda);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--c-acento);
  box-shadow: var(--anel-foco);
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--c-texto-fraco);
  opacity: 1;
}

.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled,
.campo input[readonly],
.campo textarea[readonly] {
  background-color: var(--c-superficie-3);
  color: var(--c-texto-suave);
  cursor: not-allowed;
}

/* Texto auxiliar */
.campo__ajuda {
  font-size: var(--ts-sm);
  color: var(--c-texto-fraco);
  line-height: 1.35;
}

/* Mensagem de validação */
.campo__erro {
  font-size: var(--ts-sm);
  font-weight: var(--peso-medio);
  color: var(--c-perigo);
  line-height: 1.35;
}

/* Estado inválido */
.campo--invalido label { color: var(--c-perigo-texto); }

.campo--invalido input,
.campo--invalido select,
.campo--invalido textarea {
  border-color: var(--c-perigo);
  background-color: var(--c-perigo-fraco);
}

.campo--invalido input:focus,
.campo--invalido select:focus,
.campo--invalido textarea:focus {
  border-color: var(--c-perigo);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.24);
}

/* Linha de formulário com campos lado a lado */
/* --------------------------------------------------------------------------
   ALINHAMENTO DOS CAMPOS EM LINHA

   O problema que isto resolve: "Taxa de desconto (% a.m.)" não cabia na
   largura antiga de 130px, quebrava em duas linhas, e como os campos
   alinhavam pelo topo o input descia enquanto os vizinhos ficavam em cima.

   São três mecanismos, nesta ordem:

   1. Largura base maior — o rótulo típico passa a caber numa linha só.
   2. Campos esticados à mesma altura e controle colado na base, para que
      um rótulo que ainda assim quebre não desalinhe a linha inteira.
   3. O texto de ajuda sai do fluxo e a linha toda reserva o mesmo espaço
      para ele, senão o campo que tem ajuda empurraria seu próprio input
      para cima e desalinharia de novo.
   -------------------------------------------------------------------------- */
.formulario-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e4);
  align-items: stretch;
}

.formulario-linha > .campo {
  flex: 1 1 240px;
  min-width: 0;
  position: relative;
}

/* Larguras base generosas o bastante para o rótulo não quebrar. */
.formulario-linha > .campo--curto { flex: 0 1 200px; }
.formulario-linha > .campo--medio { flex: 1 1 280px; }
.formulario-linha > .campo--longo { flex: 2 1 380px; }

/* Onde houver subgrid — hoje, todo navegador atual — a linha inteira passa
   a compartilhar as MESMAS três faixas: rótulo, controle e ajuda. Um rótulo
   que quebre em duas linhas engorda a faixa de rótulo de todos os campos ao
   mesmo tempo, então os controles continuam alinhados sem truque nenhum, e
   o texto de ajuda fica na sua própria faixa em vez de invadir o vizinho.

   Sem subgrid o layout cai no flex acima, que é exatamente o comportamento
   que o sistema já tinha — degrada para o conhecido, não para o quebrado. */
@supports (grid-template-rows: subgrid) {
  .formulario-linha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    grid-template-rows: auto auto auto;
    align-items: start;
  }

  .formulario-linha > .campo {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-items: start;
  }

  /* Campo largo ocupa duas colunas da mesma grade. */
  .formulario-linha > .campo--longo { grid-column: span 2; }
}

/* Campo cujo rótulo existe só para ocupar o lugar (botão Remover, por
   exemplo) não precisa de leitor de tela nem de altura de texto. */
.campo__rotulo-vazio {
  visibility: hidden;
}

fieldset {
  margin: 0 0 var(--e5);
  padding: var(--e4);
  border: var(--borda-fina) solid var(--c-borda);
  border-radius: var(--raio);
}

legend {
  padding: 0 var(--e2);
  font-size: var(--ts-sm);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-texto-suave);
}

/* --- Barra de busca / filtros --- */
.barra-busca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e2) var(--e3);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  background-color: var(--c-superficie);
  border: var(--borda-fina) solid var(--c-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
}

.barra-busca .campo {
  margin-bottom: 0;
  flex: 1 1 180px;
}

.barra-busca input,
.barra-busca select {
  width: 100%;
  padding: 6px var(--e2);
  min-height: 32px;
  font-family: inherit;
  font-size: var(--ts-md);
  color: var(--c-texto);
  background-color: var(--c-superficie);
  border: var(--borda-fina) solid var(--c-borda-forte);
  border-radius: var(--raio);
}

.barra-busca input:focus,
.barra-busca select:focus {
  outline: none;
  border-color: var(--c-acento);
  box-shadow: var(--anel-foco);
}

.barra-busca .botao { flex: 0 0 auto; }

/* --- Paginação --- */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e1);
  margin: var(--e4) 0;
  font-size: var(--ts-md);
  font-variant-numeric: tabular-nums;
}

.paginacao a,
.paginacao .atual,
.paginacao span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--e2);
  border: var(--borda-fina) solid var(--c-borda);
  border-radius: var(--raio);
  background-color: var(--c-superficie);
  color: var(--c-acento);
  text-decoration: none;
}

.paginacao a:hover {
  background-color: var(--c-acento-fraco);
  border-color: var(--c-acento-borda);
  text-decoration: none;
}

.paginacao .atual {
  background-color: var(--c-acento);
  border-color: var(--c-acento);
  color: #ffffff;
  font-weight: var(--peso-semi);
  cursor: default;
}

/* Reticências e itens desabilitados */
.paginacao .desabilitado,
.paginacao .reticencias {
  color: var(--c-texto-fraco);
  background-color: transparent;
  border-color: transparent;
  cursor: default;
}

.paginacao .info {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--c-texto-suave);
  font-size: var(--ts-sm);
}

/* --- Abas --- */
.abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin-bottom: var(--e4);
  padding: 0;
  list-style: none;
  border-bottom: var(--borda-fina) solid var(--c-borda);
}

.abas a {
  display: inline-block;
  padding: var(--e2) var(--e4);
  margin-bottom: -1px;
  border: var(--borda-fina) solid transparent;
  border-bottom: 0;
  border-radius: var(--raio) var(--raio) 0 0;
  font-size: var(--ts-md);
  font-weight: var(--peso-medio);
  color: var(--c-texto-suave);
  text-decoration: none;
  transition: background-color var(--transicao), color var(--transicao);
}

.abas a:hover {
  background-color: var(--c-superficie-3);
  color: var(--c-texto);
  text-decoration: none;
}

.abas a.ativa {
  background-color: var(--c-superficie);
  border-color: var(--c-borda);
  border-bottom: var(--borda-fina) solid var(--c-superficie);
  color: var(--c-acento-texto);
  font-weight: var(--peso-semi);
  box-shadow: inset 0 2px 0 var(--c-acento);
}

/* --- Lista de descrição (dados de um registro) --- */
.lista-descricao {
  display: grid;
  grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
  gap: 0;
  margin: 0;
  font-size: var(--ts-md);
}

.lista-descricao dt {
  padding: var(--e2) var(--e3) var(--e2) 0;
  font-size: var(--ts-sm);
  font-weight: var(--peso-semi);
  color: var(--c-texto-fraco);
  border-bottom: var(--borda-fina) solid var(--c-tabela-borda);
  white-space: nowrap;
}

.lista-descricao dd {
  margin: 0;
  padding: var(--e2) 0;
  color: var(--c-texto);
  border-bottom: var(--borda-fina) solid var(--c-tabela-borda);
  overflow-wrap: anywhere;
}

.lista-descricao dd.num {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.lista-descricao dt:last-of-type,
.lista-descricao dd:last-of-type {
  border-bottom: 0;
}

/* Variante em duas colunas de pares (telas largas) */
.lista-descricao--dupla {
  grid-template-columns:
    minmax(130px, max-content) minmax(0, 1fr)
    minmax(130px, max-content) minmax(0, 1fr);
  column-gap: var(--e5);
}

/* --------------------------------------------------------------------------
   5. UTILITÁRIOS
   -------------------------------------------------------------------------- */
.texto-direita { text-align: right; }
.texto-centro  { text-align: center; }
.texto-suave   { color: var(--c-texto-suave); }
.texto-fraco   { color: var(--c-texto-fraco); }
.texto-sucesso { color: var(--c-sucesso-texto); }
.texto-alerta  { color: var(--c-alerta-texto); }
.texto-perigo  { color: var(--c-perigo-texto); }
.texto-pequeno { font-size: var(--ts-sm); }
.negrito       { font-weight: var(--peso-semi); }
.sem-margem    { margin: 0 !important; }
.mono          { font-family: var(--fonte-mono); }

/* Conteúdo exclusivo da versão impressa: oculto na tela */
.somente-impressao { display: none !important; }

/* Apenas para leitores de tela */
.sr-apenas {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link para pular a navegação */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--e2) var(--e4);
  background-color: var(--c-acento);
  color: #ffffff;
  border-radius: 0 0 var(--raio) 0;
}
.pular-para-conteudo:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   6. RESPONSIVO — o sistema é de desktop, mas degrada com dignidade
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Abaixo de 900px todas as grades viram uma coluna */
@media (max-width: 900px) {
  .grade--2,
  .grade--3,
  .grade--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: var(--borda-fina) solid var(--c-sidebar-borda);
  }

  .sidebar__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e1);
  }

  .conteudo { padding: var(--e4) var(--e4) var(--e7); }

  .topo {
    margin: calc(var(--e4) * -1) calc(var(--e4) * -1) var(--e4);
    padding: var(--e2) var(--e4);
    flex-wrap: wrap;
  }

  .lista-descricao,
  .lista-descricao--dupla {
    grid-template-columns: minmax(0, 1fr);
  }

  .lista-descricao dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   7. ACESSIBILIDADE — foco visível e movimento reduzido
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

a:focus-visible,
button:focus-visible,
.botao:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.abas a:focus-visible,
.paginacao a:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 2px;
  box-shadow: var(--anel-foco);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 1px;
}

/* Foco dentro da barra lateral escura precisa de contraste próprio */
.sidebar a:focus-visible,
.sidebar__nav a:focus-visible {
  outline: 2px solid #9cc4f5;
  outline-offset: -2px;
  box-shadow: none;
}

/* Linha da tabela selecionada por teclado */
.tabela tbody tr:focus-within {
  background-color: var(--c-tabela-hover);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .botao:active { transform: none; }
}

/* Alto contraste do sistema */
@media (forced-colors: active) {
  .botao,
  .etiqueta,
  .cartao,
  .indicador {
    border: 1px solid ButtonBorder;
  }
}

/* --------------------------------------------------------------------------
   8. IMPRESSÃO — carnê de parcelas e proposta ao cliente (A4)
   -------------------------------------------------------------------------- */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 10mm;
  }

  /* Tudo em preto sobre branco, sem economizar tinta em bordas de tabela */
  html,
  body {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10pt;
    line-height: 1.35;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Elementos de interface que não vão para o papel */
  .sidebar,
  .topo__acoes,
  .botao,
  .botoes,
  .barra-busca,
  .paginacao,
  .abas,
  .nao-imprimir,
  .pular-para-conteudo {
    display: none !important;
  }

  /* Conteúdo exclusivo da impressão (cabeçalho do carnê, vias, assinaturas) */
  .somente-impressao {
    display: block !important;
  }

  tr.somente-impressao { display: table-row !important; }
  td.somente-impressao,
  th.somente-impressao { display: table-cell !important; }
  span.somente-impressao,
  a.somente-impressao { display: inline !important; }

  /* Layout linear, ocupando a folha inteira */
  .app {
    display: block !important;
    min-height: 0;
  }

  .conteudo {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
  }

  .topo {
    position: static !important;
    display: block;
    margin: 0 0 6mm;
    padding: 0 0 3mm;
    background: transparent !important;
    border-bottom: 1pt solid #000000;
  }

  .topo__titulo,
  .pagina-titulo {
    font-size: 14pt;
    color: #000000 !important;
  }

  /* Cartões viram blocos simples */
  .cartao {
    background: #ffffff !important;
    border: 1pt solid #666666 !important;
    border-radius: 0;
    margin: 0 0 5mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .cartao__titulo,
  .cartao__rodape {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #666666 !important;
    font-size: 10pt;
  }

  .cartao__corpo { padding: 3mm; }

  .grade,
  .grade--2,
  .grade--3,
  .grade--4 {
    display: block !important;
  }

  .grade > * { margin-bottom: 4mm; }

  .indicador {
    border: 1pt solid #666666 !important;
    border-left-width: 1pt !important;
    background: #ffffff !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .indicador__valor,
  .indicador__rotulo,
  .indicador__nota {
    color: #000000 !important;
  }

  .indicador__valor { font-size: 14pt; }

  /* Tabelas com bordas visíveis em papel */
  .tabela {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
    font-size: 9pt;
    page-break-inside: auto;
  }

  .tabela thead {
    display: table-header-group; /* repete o cabeçalho a cada página */
  }

  .tabela tfoot { display: table-footer-group; }

  .tabela thead th {
    position: static !important;
    background: #e8e8e8 !important;
    color: #000000 !important;
    border: 0.75pt solid #000000 !important;
    padding: 1.5mm 2mm;
    font-size: 8.5pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .tabela tbody td,
  .tabela tfoot td,
  .tabela tfoot th {
    border: 0.5pt solid #555555 !important;
    padding: 1.5mm 2mm;
    color: #000000 !important;
    background: #ffffff !important;
  }

  .tabela tbody tr,
  .tabela tbody tr:nth-child(even),
  .tabela tbody tr:hover {
    background: #ffffff !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .tabela--compacta tbody td { padding: 1mm 1.5mm; }

  /* Valores monetários continuam alinhados à direita no papel */
  .num,
  td.num,
  th.num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
  }

  /* Etiquetas de status legíveis em preto e branco */
  .etiqueta {
    border: 0.5pt solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
    border-radius: 2pt;
    padding: 0 1mm;
    font-size: 8pt;
  }

  .alerta {
    border: 0.5pt solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
    break-inside: avoid;
  }

  .lista-descricao {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .lista-descricao dt,
  .lista-descricao dd {
    border-bottom: 0.5pt solid #999999 !important;
    color: #000000 !important;
    padding: 1mm 2mm 1mm 0;
  }

  /* Campos de formulário impressos como linhas preenchíveis */
  .campo input,
  .campo select,
  .campo textarea {
    border: 0.5pt solid #000000 !important;
    background: #ffffff !important;
    color: #000000 !important;
  }

  .campo__ajuda,
  .campo__erro { color: #000000 !important; }

  /* Quebras de página controladas (uma via/carnê por folha) */
  .quebra-pagina {
    break-before: page;
    page-break-before: always;
  }

  .quebra-pagina:first-child {
    break-before: auto;
    page-break-before: auto;
  }

  .evitar-quebra {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Órfãs e viúvas */
  p, h1, h2, h3, .cartao__titulo {
    orphans: 3;
    widows: 3;
  }

  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Links: sem cor de tela; URLs não são expandidas para não poluir o carnê */
  a,
  a:visited {
    color: #000000 !important;
    text-decoration: none !important;
  }
}

/* ==========================================================================
   Telas sem sidebar — login, instalador e impressão
   ========================================================================== */

.tela-limpa {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--e4);
    background: var(--c-superficie-2);
}

.caixa-central {
    width: 100%;
    max-width: 26rem;
}

.caixa-central--larga {
    max-width: 52rem;
}

.tela-impressao {
    padding: var(--e4);
    background: var(--c-fundo);
}

.barra-impressao {
    display: flex;
    gap: var(--e2);
    justify-content: flex-end;
    margin-bottom: var(--e4);
}

/* ==========================================================================
   Cronograma — linhas de carência
   ========================================================================== */

/* Período de carência não gera cobrança. O tom mais fraco evita que o
   operador leia a linha como parcela esquecida de lançar. */
.linha-carencia {
    color: var(--c-texto-suave);
    font-style: italic;
}

.linha-carencia .num {
    font-style: normal;
}

/* Escolha do sistema no comparativo */
.escolha-sistema {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    cursor: pointer;
    font-weight: 600;
}

.escolha-sistema input {
    accent-color: var(--c-acento);
}

/* ==========================================================================
   Carnê de pagamento
   ========================================================================== */

.carne-cabecalho {
    margin-bottom: var(--e4);
    padding-bottom: var(--e3);
    border-bottom: 2px solid var(--c-borda-forte);
}

.carne-cabecalho h1 {
    margin: 0;
    font-size: var(--ts-2xl);
}

.carne-cabecalho h2 {
    margin: var(--e3) 0 var(--e1);
    font-size: var(--ts-lg);
}

.carne-cabecalho p {
    margin: 0;
    color: var(--c-texto-suave);
    font-size: var(--ts-sm);
}

.carne-via {
    margin-bottom: var(--e3);
    padding: var(--e3);
    border: 1px dashed var(--c-borda-forte);
    border-radius: var(--raio);
}

.carne-via__topo {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--e3);
    padding-bottom: var(--e2);
    border-bottom: 1px solid var(--c-borda);
    font-size: var(--ts-xs);
}

.carne-via__empresa {
    font-weight: 700;
}

.carne-via__corpo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--e3);
}

.carne-via__campo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.carne-via__rotulo {
    color: var(--c-texto-suave);
    font-size: var(--ts-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.carne-via__rodape {
    display: flex;
    justify-content: space-between;
    margin-top: var(--e4);
    padding-top: var(--e2);
    border-top: 1px solid var(--c-borda);
    color: var(--c-texto-suave);
    font-size: var(--ts-xs);
}

@media (max-width: 700px) {
    .carne-via__corpo {
        grid-template-columns: repeat(2, 1fr);
    }

    .carne-via__rodape {
        flex-direction: column;
        gap: var(--e2);
    }
}

@media print {
    .tela-impressao {
        padding: 0;
    }

    /* Borda contínua no papel: a tracejada da tela serve para indicar recorte,
       mas no carnê impresso é exatamente onde se corta. */
    .carne-via {
        border: 1px dashed #000;
        break-inside: avoid;
    }

    .carne-cabecalho {
        border-bottom-color: #000;
    }

    .linha-carencia {
        color: #555;
    }
}

/* ==========================================================================
   Atributo hidden
   ========================================================================== */

/* Componentes como .alerta declaram display próprio, que vence o atributo
   [hidden] do HTML — o resultado era uma tarja de erro vazia sempre visível
   no simulador. Esta regra devolve ao [hidden] a última palavra. */
[hidden] {
    display: none !important;
}

/* O valor a contratar não precisa ocupar a linha inteira; ao lado dos demais
   campos ele fica com largura coerente com o que se digita nele. */
.formulario-linha > .campo--valor {
    flex: 0 1 18rem;
}

/* ==========================================================================
   IDENTIDADE VISUAL — AG Serviços
   ==========================================================================
   O símbolo é SVG inline (parciais/marca.php), então recebe cor por variável
   e acompanha o contexto: azul sobre fundo claro, branco sobre a barra
   lateral azul. As barras ficam sempre douradas — é o que identifica a marca.
   ========================================================================== */

:root {
  --marca-traco: var(--c-acento);
  --marca-ouro: var(--c-marca-ouro);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  text-decoration: none;
  color: inherit;
}

.marca__simbolo {
  flex: none;
  width: 2rem;
  height: 2rem;
}

.marca__moldura,
.marca__seta {
  fill: none;
  stroke: var(--marca-traco);
  stroke-width: 5;
  stroke-linecap: round;
}

.marca__barras rect {
  fill: var(--marca-ouro);
}

.marca__ponta {
  fill: var(--marca-traco);
}

.marca__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.marca__nome {
  font-size: var(--ts-xl);
  font-weight: var(--peso-forte);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--marca-traco);
}

.marca__descritivo {
  font-size: 0.5625rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--c-ouro-legivel);
}

/* --- Marca dentro da barra lateral azul --- */

.sidebar__marca {
  --marca-traco: var(--c-sidebar-texto-forte);
  padding: var(--e4) var(--e4) var(--e4);
  min-height: auto;
}

.sidebar__marca .marca__nome {
  color: var(--c-sidebar-texto-forte);
}

.sidebar__marca .marca__descritivo {
  color: var(--c-sidebar-marca);
}

.sidebar__marca .marca__simbolo {
  width: 2.25rem;
  height: 2.25rem;
}

/* --- Menu agrupado ---
   Onze itens numa lista corrida obrigam a ler tudo para achar um. Separados
   por natureza da tarefa, o olho vai direto ao grupo certo. */

.sidebar__grupo {
  margin: var(--e4) var(--e3) var(--e1);
  font-size: var(--ts-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #6f93ae;
}

.sidebar__grupo:first-child {
  margin-top: var(--e2);
}

/* O item ativo ganha um fio dourado: é a única cor da marca que não aparece
   em mais nenhum lugar da navegação, então não compete com nada. */
.sidebar__nav a[aria-current="page"] {
  background-color: var(--c-sidebar-ativo);
  border-left-color: var(--c-sidebar-marca);
  color: var(--c-sidebar-texto-forte);
  font-weight: var(--peso-semi);
}

.sidebar__rodape {
  border-top: var(--borda-fina) solid var(--c-sidebar-borda);
  background-color: var(--c-sidebar-fundo-2);
}

/* ==========================================================================
   TELA DE ENTRADA
   ========================================================================== */

.tela-limpa {
  background:
    radial-gradient(1200px 600px at 50% -10%, #0d3c5e 0%, transparent 60%),
    linear-gradient(160deg, #0a2f4a 0%, #071f33 100%);
}

.caixa-central .marca {
  justify-content: center;
  margin-bottom: var(--e5);
}

.caixa-central .cartao {
  box-shadow: var(--sombra-menu);
}

/* Sobre o azul profundo do login, o símbolo vira branco e dourado. */
.tela-limpa .marca {
  --marca-traco: #ffffff;
}

.tela-limpa .marca__nome {
  color: #ffffff;
  font-size: var(--ts-2xl);
}

.tela-limpa .marca__descritivo {
  color: var(--c-marca-ouro);
}

.tela-limpa .marca__simbolo {
  width: 2.75rem;
  height: 2.75rem;
}

.login-rodape {
  margin-top: var(--e4);
  text-align: center;
  font-size: var(--ts-sm);
  color: #7ba3c0;
}

/* ==========================================================================
   REFINOS DE LEITURA
   ========================================================================== */

/* O primeiro indicador da linha é o número que resume o dia; os demais são
   contexto. Um pouco mais de peso nele evita que a linha vire um borrão. */
.indicador__valor {
  letter-spacing: -0.015em;
}

/* Fio da marca no topo do cartão de indicador principal */
.indicador--marca {
  border-top: 3px solid var(--c-marca-ouro);
}

/* Cabeçalho de tabela: mais contraste com o corpo, para a régua de colunas
   não se perder em listagens longas. */
.tabela thead th {
  border-bottom: 2px solid var(--c-borda-forte);
}

/* ==========================================================================
   IMPRESSÃO — a marca vai para o papel
   ========================================================================== */

@media print {
  .marca {
    --marca-traco: #0e5989;
    --marca-ouro: #d9a441;
  }

  .marca__nome {
    color: #0e5989;
  }

  .marca__descritivo {
    color: #8a6118;
  }
}

/* A marca da barra lateral virou link para o painel — sem sublinhado, e com
   alvo de clique cobrindo o bloco inteiro. */
a.sidebar__marca {
  text-decoration: none;
  color: inherit;
}

a.sidebar__marca:hover {
  background-color: var(--c-sidebar-ativo);
}

a.sidebar__marca:focus-visible {
  outline: 2px solid var(--c-sidebar-marca);
  outline-offset: -2px;
}

/* No carnê a assinatura vem antes do nome da empresa, com respiro. */
.carne-cabecalho .marca {
  margin-bottom: var(--e3);
}

/* ==========================================================================
   RODAPÉ DA BARRA LATERAL — usuário, tema e saída
   ========================================================================== */

.sidebar__usuario {
  display: block;
  padding: var(--e3) var(--e4) var(--e2);
  font-size: var(--ts-md);
  font-weight: var(--peso-semi);
  color: var(--c-sidebar-texto-forte);
  text-decoration: none;
}

.sidebar__usuario:hover {
  text-decoration: underline;
}

.sidebar__acoes {
  display: flex;
  gap: var(--e2);
  padding: 0 var(--e4) var(--e4);
}

.sidebar__acoes > form {
  flex: 1 1 auto;
  margin: 0;
}

.sidebar__acoes .botao {
  width: 100%;
  color: var(--c-sidebar-texto);
  border-color: var(--c-sidebar-borda);
}

.sidebar__acoes .botao:hover {
  background-color: var(--c-sidebar-ativo);
  color: var(--c-sidebar-texto-forte);
}

.sidebar__acoes > [data-alternar-tema] {
  flex: 1 1 auto;
}

/* ==========================================================================
   ENTRADA — assinatura empilhada e centralizada
   ========================================================================== */

.tela-limpa .marca {
  flex-direction: column;
  gap: var(--e3);
  text-align: center;
}

.tela-limpa .marca__simbolo {
  width: 3.75rem;
  height: 3.75rem;
}

.tela-limpa .marca__texto {
  align-items: center;
}

.tela-limpa .marca__nome {
  font-size: var(--ts-3xl);
  letter-spacing: 0.08em;
}

.tela-limpa .marca__descritivo {
  font-size: var(--ts-xs);
  letter-spacing: 0.16em;
}

/* Fio dourado no topo do cartão, amarrando com a marca acima. */
.caixa-central .cartao {
  border-top: 3px solid var(--c-marca-ouro);
}

/* ==========================================================================
   IMPRESSÃO — o papel ignora o tema escolhido na tela
   ========================================================================== */

@media print {
  :root,
  :root[data-tema="escuro"] {
    --c-fundo: #ffffff;
    --c-superficie: #ffffff;
    --c-superficie-2: #ffffff;
    --c-superficie-3: #f2f2f2;
    --c-texto: #000000;
    --c-texto-suave: #333333;
    --c-texto-fraco: #555555;
    --c-borda: #999999;
    --c-borda-forte: #666666;
    --c-tabela-cabecalho: #eeeeee;
    --c-tabela-zebra: #ffffff;
    --c-tabela-borda: #999999;
    color-scheme: light;
  }
}

/* ==========================================================================
   CABEÇALHO DO CARNÊ — papel timbrado
   ========================================================================== */

.carne-cabecalho__timbre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  flex-wrap: wrap;
  margin-bottom: var(--e4);
}

/* No papel a marca precisa ter presença: a 2rem as barras douradas somem
   sobre branco. */
.carne-cabecalho .marca__simbolo {
  width: 3.25rem;
  height: 3.25rem;
}

.carne-cabecalho .marca {
  margin-bottom: 0;
}

.carne-cabecalho__contato {
  margin: 0;
  text-align: right;
  font-size: var(--ts-sm);
  line-height: 1.5;
  color: var(--c-texto-suave);
}

.carne-cabecalho__contato strong {
  color: var(--c-texto);
}

.carne-cabecalho h1 {
  margin: 0 0 var(--e3);
  font-size: var(--ts-xl);
  letter-spacing: 0.01em;
}

.carne-cabecalho__dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e1) var(--e3);
  margin: 0;
  font-size: var(--ts-sm);
}

.carne-cabecalho__dados dt {
  color: var(--c-texto-suave);
  text-transform: uppercase;
  font-size: var(--ts-xs);
  letter-spacing: 0.06em;
  align-self: center;
}

.carne-cabecalho__dados dd {
  margin: 0;
  font-weight: var(--peso-semi);
}

@media (max-width: 600px) {
  .carne-cabecalho__contato {
    text-align: left;
  }
}

/* ==========================================================================
   ÍCONES — SVG embutido, discreto, herdando a cor do texto
   ========================================================================== */

/* O ícone acompanha o texto: alinha pela linha de base ótica e nunca
   encolhe quando o rótulo ao lado é comprido. */
.icone {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  stroke-width: 1.75;
  /* Discreto de propósito: o ícone orienta, o texto informa. Contraste
     cheio nos dois faria os dois competirem pela atenção. */
  opacity: 0.75;
}

/* Dentro de botão e link o ícone assume cor quase cheia — ali ele faz
   parte da ação, não é enfeite de rótulo. */
.botao .icone,
a .icone {
  opacity: 0.9;
}

.cartao__titulo .icone,
.indicador__rotulo .icone {
  color: var(--c-texto-fraco);
}

/* Cada estado leva o ícone na sua própria cor. */
.indicador--sucesso .indicador__rotulo .icone { color: var(--c-sucesso); }
.indicador--alerta  .indicador__rotulo .icone { color: var(--c-alerta); }
.indicador--perigo  .indicador__rotulo .icone { color: var(--c-perigo); }
.indicador--marca   .indicador__rotulo .icone { color: var(--c-ouro-legivel); }

.indicador__rotulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

/* O título de cartão nasceu com justify-content: space-between, para poder
   empurrar uma ação para a direita. Nenhum dos 37 títulos usa isso, e com
   um ícone dentro o space-between jogava o texto para a outra ponta —
   então aqui ele volta a encostar tudo à esquerda. */
.cartao__titulo {
  justify-content: flex-start;
  gap: var(--e2);
}

/* ==========================================================================
   ABAS — alternância dentro de um cartão
   ========================================================================== */

.abas {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background-color: var(--c-superficie-3);
  border-radius: var(--raio);
}

.abas__botao {
  padding: 5px var(--e3);
  font-family: inherit;
  font-size: var(--ts-sm);
  font-weight: var(--peso-medio);
  color: var(--c-texto-suave);
  background: none;
  border: 0;
  border-radius: var(--raio-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transicao), color var(--transicao);
}

.abas__botao:hover { color: var(--c-texto); }

.abas__botao--ativo {
  color: var(--c-texto);
  background-color: var(--c-superficie);
  box-shadow: var(--sombra-1);
}

.abas__botao:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
}

/* ==========================================================================
   GRÁFICO COMPARATIVO — carteira × Selic

   Duas séries, com as cores validadas contra as superfícies reais dos dois
   temas: ΔE 35,3 no claro e 28,8 no escuro para visão normal; 21,8 e 23,0
   sob protanopia. O cinza neutro do sistema foi testado antes e reprovou —
   contra o azul da marca dava ΔE 9,0, duas linhas que ninguém separa.
   ========================================================================== */

.grafico__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e4) var(--e5) 0;
}

.cartao__titulo--solto {
  padding: 0;
  border: 0;
  margin: 0;
}

.grafico__legenda-texto {
  margin: 2px 0 0;
  font-size: var(--ts-sm);
  color: var(--c-texto-fraco);
}

.grafico__fonte {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin: var(--e3) 0 0;
  font-size: var(--ts-sm);
  color: var(--c-texto-fraco);
}

.grafico__fonte .icone { margin-top: 0.15em; }

/* --- Cores das séries --- */
.grafico {
  --serie-carteira: #0e5989;
  --serie-selic: #eb6834;
}

:root[data-tema="escuro"] .grafico {
  --serie-carteira: #4098d0;
  --serie-selic: #d95926;
}

/* --- Legenda: identidade nunca depende só da cor da linha --- */
.g-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin-bottom: var(--e2);
  font-size: var(--ts-sm);
  color: var(--c-texto-suave);
}

.g-legenda__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}

.g-legenda__marca {
  width: 14px;
  height: 3px;
  border-radius: 2px;
}

.g-legenda__marca--carteira { background-color: var(--serie-carteira); }

/* O tracejado da legenda repete o da linha — o mesmo segundo canal. */
.g-legenda__marca--selic {
  background-image: linear-gradient(
    to right,
    var(--serie-selic) 0 6px,
    transparent 6px 10px,
    var(--serie-selic) 10px 14px
  );
}

/* --- Área do desenho --- */
.g-area { position: relative; }

/* A altura do viewBox já inclui a faixa do eixo X. Cartão com altura fixa
   que corta os rótulos gera aquela rolagem vertical minúscula dentro do
   card, que é pior do que gráfico nenhum. */
.g-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Grade e eixos: fio de 1px, cheio, um passo fora da superfície.
   Tracejado em grade lê como meta ou projeção — aqui é só grade. */
.g-grade {
  stroke: var(--c-borda);
  stroke-width: 1;
}

.g-eixo {
  fill: var(--c-texto-fraco);
  font-family: var(--fonte-base);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.g-eixo--y { text-anchor: end; }
.g-eixo--x { text-anchor: middle; }

/* Linhas de 2px, junta e ponta arredondadas. */
.g-linha {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.g-linha--carteira { stroke: var(--serie-carteira); }
.g-linha--selic    { stroke: var(--serie-selic); }

/* A Selic é referência externa, não resultado da operação: o tracejado diz
   isso sem gastar mais uma cor, e ainda vira segundo canal de identidade
   para quem não distingue as duas matizes. */
.g-linha--selic {
  stroke-dasharray: 6 4;
}

.g-ponto--carteira, .g-ponta--carteira { fill: var(--serie-carteira); }
.g-ponto--selic,    .g-ponta--selic    { fill: var(--serie-selic); }

/* Anel na cor da superfície: o marcador continua legível onde as duas
   linhas se cruzam. Contorno colorido ali seria tinta sem dado. */
.g-ponta {
  stroke: var(--c-superficie);
  stroke-width: 2;
}

/* Valor da ponta em tinta neutra — texto nunca veste a cor da série. */
.g-fim {
  fill: var(--c-texto-suave);
  font-family: var(--fonte-base);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Alvos de mouse largos: ninguém acerta um ponto de 8px de propósito. */
.g-alvo {
  fill: transparent;
  cursor: crosshair;
}

.g-guia {
  stroke: var(--c-borda-forte);
  stroke-width: 1;
  pointer-events: none;
}

/* --- Faixa de leitura --- */
.g-dica {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  align-items: center;
  padding: var(--e2) var(--e3);
  margin-top: var(--e2);
  font-size: var(--ts-sm);
  background-color: var(--c-superficie-2);
  border: var(--borda-fina) solid var(--c-borda);
  border-radius: var(--raio);
}

.g-dica__mes {
  font-weight: var(--peso-semi);
  color: var(--c-texto);
}

.g-dica__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--c-texto-suave);
  font-variant-numeric: tabular-nums;
}

.g-dica__valor {
  font-weight: var(--peso-semi);
  color: var(--c-texto);
}

/* --- Tabela equivalente: todo valor do gráfico também existe em texto --- */
.g-tabela {
  margin-top: var(--e3);
  border-top: var(--borda-fina) solid var(--c-borda);
  padding-top: var(--e3);
}

.g-tabela > summary {
  font-size: var(--ts-sm);
  font-weight: var(--peso-medio);
  color: var(--c-acento-texto);
  cursor: pointer;
}

.g-tabela > summary:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
  border-radius: var(--raio-sm);
}

.g-tabela .tabela { margin-top: var(--e3); }

/* Em tela estreita o SVG encolhe junto com o cartão; os textos internos
   sobem de tamanho para continuarem legíveis depois da redução. */
@media (max-width: 700px) {
  .grafico__topo { padding: var(--e3) var(--e4) 0; }
  .g-eixo { font-size: 16px; }
  .g-fim  { font-size: 16px; }
}

/* No papel e no alto contraste o tracejado é o que resta para separar as
   séries — ali a cor pode simplesmente não existir. */
@media print {
  .abas, .g-dica { display: none; }
  .grafico { --serie-carteira: #000000; --serie-selic: #666666; }
}

@media (forced-colors: active) {
  .g-linha--carteira { stroke: CanvasText; }
  .g-linha--selic    { stroke: GrayText; }
  .g-grade           { stroke: GrayText; }
}