/* =============================================================================
   SuperRico Workspace — casca da aplicação (ESPEC §5.2).
   Nenhuma cor literal: tudo sai dos tokens de tokens.css.
   ============================================================================= */

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

body {
  min-block-size: 100vh;
  background-color: var(--fundo);
  color: var(--preto);
  font-size: clamp(.9375rem, .9rem + .2vw, 1rem);
}

/* --- foco visível em tudo que é navegável por teclado (DoD §11.4 item 3) ------ */
:focus-visible {
  outline: 3px solid var(--verdeMedio);
  outline-offset: 2px;
  border-radius: .25rem;
}

/* --- pular para o conteúdo ---------------------------------------------------- */
.sr-pular {
  position: absolute;
  inset-inline-start: .5rem;
  inset-block-start: -3rem;
  z-index: 1080;
  padding: .5rem .75rem;
  background-color: var(--verdeEscuro);
  color: #fff;
  border-radius: var(--sr-raio);
  transition: top .15s ease;
}

.sr-pular:focus { inset-block-start: .5rem; }

/* --- alvos de toque ≥ 44px ---------------------------------------------------- */
.sr-toque,
.sr-sidebar .nav-link,
.sr-sidebar .btn-close,
.sr-topbar .btn,
.sr-widget-botao {
  min-block-size: var(--sr-toque-min);
  min-inline-size: var(--sr-toque-min);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.sr-sidebar .btn-close {
  justify-content: center;
  background-position: center;
}

/* =============================================================================
   Topbar
   ============================================================================= */
.sr-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 1030;
  block-size: var(--sr-topbar-altura);
  background-color: #fff;
  border-block-end: 1px solid var(--linha);
}

.sr-marca {
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--verde-900);
  text-decoration: none;
}

/* =============================================================================
   Sidebar — 296px fixa em ≥lg, offcanvas abaixo disso
   ============================================================================= */
.sr-sidebar {
  inline-size: var(--sr-sidebar-largura);
  background-color: #fff;
  border-inline-end: 1px solid var(--linha);
}

/* A folga do protótipo: 22px no topo, 16px nas laterais, 18px embaixo. Vem daqui e não de um
   utilitário no `.cshtml` porque `.sr-sidebar .offcanvas-body` (0,2,0) vence `.p-2` (0,1,0) por
   especificidade — trocar a classe no Razor obrigaria a mexer no markup para ajustar desenho. */
.sr-sidebar .offcanvas-body {
  padding: 1.375rem 1rem 1.125rem;
}

/* ⚠️ ALTURA CHEIA A PARTIR DE 07/09/2026, e o `overflow` MUDOU DE ELEMENTO.
   Até 06/09 a coluna começava abaixo da topbar (`top: var(--sr-topbar-altura)`) e rolava
   inteira. Com a topbar fora do desktop, o `top` vira 0 — senão sobraria uma faixa vazia de
   56px no alto de toda tela, exatamente da altura de uma barra que não existe mais.

   E o `overflow-y` desceu da coluna para o CORPO dela, o que não é detalhe: com a coluna
   inteira rolando, o `dropdown` da conta no rodapé seria RECORTADO pelo próprio contêiner.
   Topo fixo, meio que rola, rodapé fixo — a estrutura do `.sidebar` do `Workspace.html`. */
@media (min-width: 992px) {
  .sr-sidebar {
    position: sticky;
    inset-block-start: 0;
    block-size: 100vh;
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--sr-sidebar-largura);
  }

  .sr-sidebar > .offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-block-size: 0;
  }
}

/* Medidas do protótipo: 13px, peso 600, raio 9px, folga de 10px entre ícone e rótulo. O que
   muda em relação ao anterior é discreto e soma: a lista fica mais densa sem ficar apertada, que
   é o que permite quinze itens caberem sem rolagem em tela de notebook. */
.sr-sidebar .nav-link {
  color: var(--tinta);
  /* ⚠️ `flex` E NÃO `inline-flex` (02/09/2026). A regra de alvo de toque lá em cima põe
     `display: inline-flex` em tudo que precisa dos 44px — e `inline-flex` encolhe até o
     conteúdo. Resultado: a caixa do `:hover` e a do item ativo terminavam onde o rótulo
     terminava, e não na borda do menu; "Início" e "Tutorial" ganhavam pílulas de larguras
     diferentes. No protótipo o `.nav a` é `display:flex` de nível de bloco e ocupa a linha
     inteira. Achado pelo Igor, comparando as duas telas. */
  display: flex;
  border-radius: .5625rem;
  padding: .5rem .6875rem;
  font-size: .8125rem;
  font-weight: 600;
  gap: .625rem;
  border: 1px solid transparent;
}

.sr-sidebar .nav-link:hover {
  background-color: var(--verde-050);
  color: var(--verde-900);
}

/* ⚠️ O ITEM ATIVO É UM DEGRADÊ, e não um fundo claro — desenho do protótipo, 02/09/2026.
   Antes era `--verde-050` com texto verde: o mesmo fundo do :hover, e num menu de quinze itens
   ficava difícil dizer, de relance, onde se está. O degradê com sombra separa os dois estados
   sem depender de o olho comparar dois tons de verde-claro vizinhos. */
.sr-sidebar .nav-link.active {
  background: linear-gradient(135deg, var(--verdeEscuro), var(--verdeMedio));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px -6px rgb(14 124 123 / .55);
}

/* ⚠️ O ÍCONE NÃO É MAIS `--verdeEscuro` CRU (02/09/2026). No protótipo o ícone do menu usa
   `currentColor` — ele é da mesma cor do rótulo, e é isso que faz a coluna parecer uma lista e
   não um mostruário. Verde cru ao lado de texto escuro dava à nossa tela um contraste interno
   que o exemplo não tem, e foi parte do "as cores estão diferentes".

   `--tinta-icone` é o meio-termo: teal o bastante para o ícone continuar sendo da marca, perto
   o bastante do rótulo para os dois lerem como uma coisa só. */
.sr-sidebar .nav-link > i {
  color: var(--tinta-icone);
}

/* No item ativo o ícone acompanha o rótulo. Desde que o ativo virou degradê verde (02/09/2026),
   isso deixou de ser estética e passou a ser legibilidade: o `--verdeEscuro` do ícone sobre o
   degradê verde é o mesmo verde-sobre-verde que apagou o ícone do FAB do widget em 01/09. */
.sr-sidebar .nav-link.active > i {
  color: #fff;
}

/* ⚠️ O TRAÇO ANTES DO NOME é o do protótipo, e ele faz trabalho: numa coluna de quinze itens,
   um rótulo em caixa alta e cinza se confunde com mais um item da lista. O traço curto diz
   "isto é um cabeçalho, não um destino" antes de a palavra ser lida. */
.sr-grupo-titulo,
.sr-cat-cabeca {
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* ⚠️ `--tinta-suave`, e NÃO `--verde-900` (02/09/2026). O verde-900 mede 8:1 sobre branco:
     um rótulo de 10px em caixa alta com esse peso de cor compete com os próprios itens do menu,
     que é exatamente o que o protótipo evita ao usar um cinza-verde. A trava de contraste
     continua de pé — `--tinta-suave` foi calibrado em 4,60:1, acima do 4,5 da WCAG AA, e é por
     isso que ele não é o `#6b7d7c` do protótipo (esse mede 4,33:1 e reprovaria). */
  color: var(--tinta-suave);
  /* ⚠️ MEDIDO NA TELA EM 15/09/2026, e o número mudou por isso. Era `.5rem .625rem .3125rem` —
     o 8px/10px/5px do protótipo, escolhido quando o rótulo era um `<h2>` que só nomeava o grupo
     abaixo. Depois que ele virou BOTÃO, essa herança deixava a "Projetos Financeiros" com **31px**
     de altura no meio de uma coluna em que todo o resto — cabeçalho de grupo e item de menu —
     tem 44px, e com 1px a menos de recuo lateral: ela não alinhava com nada. Foi o que o Igor
     viu ("em projetos financeiros ficou diferente").

     ⚠️ E ERA TAMBÉM UM DEFEITO DE ALVO DE TOQUE. 31px está abaixo dos 44px que o §5.2 exige, e
     isto é um `<button>` desde 02/09/2026 — o alvo estava pequeno havia duas semanas, sem ninguém
     reclamar, porque no mouse ele funciona.

     Os três valores agora são os mesmos do `.nav-link` ao lado: mesma altura, mesmo recuo. */
  padding: .5rem .6875rem;
  min-block-size: var(--sr-toque-min);
  display: flex;
  align-items: center;
  gap: .4375rem;
}

.sr-grupo-titulo::before,
.sr-cat-cabeca::before {
  content: "";
  inline-size: 14px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--verde-400);
  flex: none;
}

.sr-objetivo-pct {
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  color: var(--tinta-suave);
}

/* =============================================================================
   Conteúdo
   ============================================================================= */
.sr-conteudo {
  inline-size: 100%;
  max-inline-size: var(--sr-conteudo-max);
  margin-inline: auto;
  padding: clamp(1rem, .5rem + 1.5vw, 2rem);
}

.card { border-color: var(--linha); }

/* --- tabelas largas: indicador de rolagem (§5.2) ------------------------------ */
.table-responsive { position: relative; }

.table-responsive::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 1.5rem;
  pointer-events: none;
  background: linear-gradient(to left, var(--fundo), transparent);
}

/* =============================================================================
   Aviso de conflito (HTTP 409) — quadro e ficha do CRM
   ============================================================================= */
/* GRUDA LOGO ABAIXO DA TOPBAR, e é o que faz o aviso existir para quem o provocou.
   A caixa é o primeiro elemento do conteúdo; num quadro de trezentos clientes o planejador
   está mil e tantos pixels abaixo quando arrasta um cartão, e revelar um alerta no topo do
   documento é revelá-lo fora da tela. As duas alternativas foram descartadas: mover o foco
   interrompe a fala do leitor de tela e rouba a digitação em curso, e `scrollIntoView` arranca
   do lugar quem está no meio de um formulário. Grudar não faz nem uma coisa nem outra.
   `z-index` MENOR que o 1030 da topbar: o aviso acompanha a rolagem, não passa por cima da
   navegação. Achado de revisão adversarial de 20/08/2026. */
.sr-conflito {
  position: sticky;
  inset-block-start: var(--sr-topbar-altura);
  z-index: 1029;
}

/* No desktop não há topbar (07/09/2026): o deslocamento tem de ser 0, senão o aviso gruda a
   56px do topo, num degrau que não corresponde a nada na tela. */
@media (min-width: 992px) {
  .sr-conflito { inset-block-start: 0; }
}

/* =============================================================================
   Botão flutuante "Meu Planejador" — presente em todas as telas (§5.2 e §7.5)
   ============================================================================= */
/* ⚠️ CÍRCULO COM O ÍCONE, SEM RÓTULO — o `.plan-fab` do `Workspace.html`, pedido do Igor em
   01/09/2026. Os 60px do modelo passam folgado no alvo de toque de 44px do §5.4, e o nome do
   botão continua existindo no `title` e no `visually-hidden` do markup. */
.sr-widget-botao {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 1040;
  inline-size: 3.75rem;
  block-size: 3.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--verdeEscuro);
  background-image: linear-gradient(135deg, var(--verdeMedio), var(--verde-900));
  color: #fff;
  box-shadow: 0 .5rem 1.5rem -.375rem rgb(10 40 38 / .5);
  display: grid;
  place-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}

.sr-widget-botao .bi {
  font-size: 1.6rem;
  line-height: 1;
}

.sr-widget-botao:hover,
.sr-widget-botao:focus-visible {
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 .75rem 1.875rem -.375rem rgb(10 40 38 / .6);
}

/* O contador de pendências, que era o único texto restante do botão. Vermelho da marca, e não
   o laranja do modelo: a paleta não tem laranja, e inventar um token de cor para um selo seria
   decidir a identidade visual num arquivo de CSS. A borda branca é o que o separa do degradê. */
.sr-widget-selo {
  position: absolute;
  inset-block-start: -.125rem;
  inset-inline-end: -.125rem;
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: 0 .3rem;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 800;
  background-color: var(--vermelho);
  color: #fff;
  border: 2px solid #fff;
}

/* --- painel das 8 áreas (§7.5, E24) ------------------------------------------
   CARTÃO FLUTUANTE no canto, no desenho do `.plan-panel` do `Workspace.html` —
   pedido do Igor em 01/09/2026, com uma captura de tela. 420 × 640, cantos de
   16px, sombra aberta, subindo de baixo.

   ⚠️ CONTINUA SENDO O OFFCANVAS DO BOOTSTRAP POR DENTRO, e isso é decisão, não
   preguiça: foco preso, ESC, `data-bs-dismiss`, trava de rolagem e o backdrop
   vêm de graça e testados. O que muda aqui é ONDE ele aparece e COMO — nenhuma
   linha de comportamento foi reescrita à mão.
   ----------------------------------------------------------------------------- */
.sr-widget-painel.offcanvas-end {
  inset: auto 1.5rem 1.5rem auto;
  inline-size: min(26.25rem, calc(100vw - 3rem));
  block-size: min(40rem, 92vh);
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 -.5rem 2.5rem -.5rem rgb(0 0 0 / .4);
  overflow: hidden;

  /* Entra SUBINDO, e não deslizando da direita: o cartão nasce do botão, que
     está embaixo. O `.offcanvas-end` do Bootstrap manda `translateX(100%)`. */
  transform: translateY(110%);
}

.sr-widget-painel.offcanvas.showing,
.sr-widget-painel.offcanvas.show:not(.hiding) { transform: none; }

/* No celular vira folha de baixo, largura cheia — como o modelo abaixo de 520px. */
@media (max-width: 33rem) {
  .sr-widget-painel.offcanvas-end {
    inset: auto 0 0 0;
    inline-size: 100%;
    block-size: min(40rem, 88vh);
    border-radius: 1rem 1rem 0 0;
  }
}

/* ⚠️ O BLUR ATRÁS, pedido junto com o cartão — o `.plan-scrim` do modelo.
   `:has()` limita ao painel do widget: a sidebar em offcanvas do celular também
   usa `.offcanvas-backdrop`, e desfocar a tela ao abrir o MENU seria efeito
   colateral que ninguém pediu. Navegador sem `:has()` fica com o véu escuro de
   sempre, que é degradação e não quebra. */
body:has(.sr-widget-painel.show) .offcanvas-backdrop.show,
body:has(.sr-widget-painel.showing) .offcanvas-backdrop.show {
  --bs-backdrop-opacity: 1;
  background-color: rgb(10 40 38 / .4);
  backdrop-filter: blur(3px);
}

/* --- cabeçalho do painel (o `.plan-head` do modelo) --------------------------- */
.sr-widget-cabecalho {
  flex: none;
  padding: 1rem 1.125rem;
  background-image: linear-gradient(135deg, var(--verde-900), var(--verdeMedio));
  color: #fff;
}

.sr-widget-identidade { display: flex; align-items: center; gap: .75rem; }

/* A variante com FOTO (02/09/2026). O `.sr-widget-avatar` sozinho é o círculo translúcido
   com o ícone; quando há foto, o mesmo círculo recebe a imagem. `object-fit` e a borda branca
   translúcida: no degradê verde do cabeçalho, o verde-médio das listas sumiria. */
.sr-widget-avatar-foto {
  object-fit: cover;
  border: 2px solid rgb(255 255 255 / .55);
  background-color: transparent;
}

.sr-widget-avatar {
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background-color: rgb(255 255 255 / .2);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
}

.sr-widget-nome { flex: 1; min-inline-size: 0; }

.sr-widget-titulo {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: -.0125em;
  margin: 0;

  /* Nome longo não pode empurrar o botão de fechar para fora do cartão. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-widget-papel { font-size: .72rem; opacity: .9; margin: .0625rem 0 0; }

.sr-widget-fechar {
  flex: none;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  border: 0;
  border-radius: .5rem;
  background-color: rgb(255 255 255 / .18);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .8rem;
  transition: background-color .15s ease;
}

.sr-widget-fechar:hover,
.sr-widget-fechar:focus-visible { background-color: rgb(255 255 255 / .3); color: #fff; }

/* --- corpo: a tira de abas fixa e só o conteúdo rolando ----------------------- */
.sr-widget-painel .offcanvas-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sr-widget-painel .offcanvas-body > .alert { margin: 1rem; }

/* A tira de abas do modelo: ícone em cima, rótulo miúdo embaixo, linha sob a ativa. */
.sr-widget-abas {
  flex: none;
  display: flex;
  background-color: #fff;
  border-block-end: 1px solid var(--linha);
}

.sr-widget-abas .nav-item { flex: 1; display: flex; }

/* ⚠️ HOJE SÓ O "CHAT" APARECE — a lista das oito é filtrada no `Default.cshtml` por decisão do
   Igor de 31/08/2026. Uma tira de abas com uma aba só, esticada de ponta a ponta, parece defeito;
   centrada, parece um rótulo. Quando as outras sete voltarem, esta regra deixa de casar sozinha. */
.sr-widget-abas .nav-item:only-child { flex: 0 1 10rem; margin-inline: auto; }

.sr-widget-abas .nav-link {
  flex: 1;
  min-block-size: var(--sr-toque-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1875rem;
  padding: .5rem .1875rem;
  border: 0;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  background: none;
  font-size: .625rem;
  font-weight: 700;
  color: var(--verde-900);
  opacity: .65;
}

.sr-widget-abas .nav-link .bi { font-size: 1.0625rem; }

/* Abaixo de ~480px as oito não cabem sem cortar "Histórico" e "Avaliação" pela metade. A tira
   passa a rolar na horizontal — DENTRO dela, então a página continua sem rolagem lateral, que é
   o que o DoD §11.4 cobra. Cortar rótulo seria pior: o ícone sozinho não diz "Avaliação". */
@media (max-width: 30rem) {
  .sr-widget-abas { overflow-x: auto; scrollbar-width: thin; }
  .sr-widget-abas .nav-item { flex: 0 0 3.5rem; }
}

.sr-widget-abas .nav-link:hover { opacity: 1; background-color: var(--verde-050); }

.sr-widget-abas .nav-link.active {
  opacity: 1;
  color: var(--verde-900);
  background: none;
  border-block-end-color: var(--verdeMedio);
}

.sr-widget-painel .tab-content { flex: 1; min-block-size: 0; display: flex; }

.sr-widget-painel .tab-content > .tab-pane.active {
  flex: 1;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  overflow-y: auto;
  background-color: var(--fundo);
}

/* O chat é o único que NÃO rola inteiro: quem rola é a conversa, para o campo de
   resposta ficar preso embaixo, como no modelo. */
.sr-widget-painel .tab-content > [data-sr-area="chat"].active { overflow: hidden; padding: 0; }

.sr-widget-conversa {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* --- o campo de resposta (o rodapé do modelo) --------------------------------- */
.sr-widget-escrever {
  flex: none;
  display: flex;
  align-items: end;
  gap: .5rem;
  padding: .75rem;
  border-block-start: 1px solid var(--linha);
  background-color: #fff;
}

.sr-widget-campo {
  flex: 1;
  resize: none;
  border-radius: 1.375rem;
  padding: .625rem 1rem;
  font-size: .875rem;
  min-block-size: 2.75rem;
  max-block-size: 7rem;
}

.sr-widget-enviar {
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--verdeMedio), var(--verde-900));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
}

.sr-widget-enviar:hover,
.sr-widget-enviar:focus-visible { color: #fff; filter: brightness(1.08); }

/* O ícone dentro dos dois botões coloridos herda o branco — mesma exceção do FAB. */
.sr-widget-enviar .bi,
.sr-widget-fechar .bi { color: inherit; }

.sr-widget-msg {
  align-self: flex-start;
  max-inline-size: 85%;
  padding: .5rem .75rem;
  border-radius: var(--sr-raio);
  background-color: var(--fundo);
}

.sr-widget-msg-minha {
  align-self: flex-end;
  background-color: var(--verde-050);
}

/* --- área "Avaliação" do widget e vitrine (§7.7, E26) -------------------------
   ⚠️ SEM HEX SOLTO (§5.1): as estrelas usam a escala derivada dos cinco tokens
   contratuais — estrela dourada exigiria uma cor nova fora da identidade.
   E quem distingue cheia de vazia é o GLIFO (★ × ☆), escrito pelo Razor e pelo
   `sr-widget.js`; a cor só reforça. Cor sozinha não basta (WCAG 1.4.1), e a
   primeira versão desta folha afirmava o contrário no comentário enquanto
   desenhava o mesmo ★ duas vezes. */
.sr-aval-estrelas { display: inline-flex; gap: .125rem; line-height: 1; }

.sr-aval-estrela {
  font-size: 1.5rem;
  color: var(--linha);
  background: none;
  border: 0;
  padding: 0 .125rem;
}

.sr-aval-estrela.on { color: var(--verdeEscuro); }

/* Alvo de toque de 44px nas estrelas e nos onze botões de NPS: são os controles
   mais apertados do produto, e ficam num painel usado no celular. */
.sr-aval-editavel .sr-aval-estrela {
  min-inline-size: var(--sr-toque-min);
  min-block-size: var(--sr-toque-min);
  cursor: pointer;
}

.sr-aval-nps { display: flex; flex-wrap: wrap; gap: .25rem; }

.sr-aval-nps .btn {
  min-inline-size: 2.5rem;
  min-block-size: var(--sr-toque-min);
}

.sr-aval-nota { font-size: 1.75rem; font-weight: 700; color: var(--verde-900); }

/* --- vitrine "Escolha seu planejador" (§7.7, E26) ---------------------------- */
.sr-vitrine {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.sr-vitrine-cartao { block-size: 100%; }

/* O cartão do planejador conectado se distingue por BORDA, e não só por cor de
   fundo — e o selo "✓ Seu planejador" continua escrito ao lado (WCAG 1.4.1). */
.sr-vitrine-cartao.sr-conectado { border-color: var(--verdeEscuro); border-width: 2px; }

.sr-vitrine-etiquetas { display: flex; flex-wrap: wrap; gap: .25rem; }

/* --- aviso de processamento (§4.2) -------------------------------------------
   ⚠️ SUBSTITUIU O `.sr-status-salvamento` DA TOPBAR em 01/09/2026, a pedido do
   Igor. Aquele texto ficava ao lado do nome da conta — a metros de onde os olhos
   estão quando se preenche um formulário longo. Este aparece no canto inferior
   direito, com spinner: há movimento, e ele acontece perto da mão.
   ----------------------------------------------------------------------------- */
.sr-toast-processo {
  background-color: var(--verde-900);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;

  /* PÍLULA, e não a caixa de 350 px do Bootstrap — é o desenho do `.save-indicator` do
     `Workspace.html` (raio 999px, ~12,5px, sombra aberta). A caixa cheia dava a um aviso
     de dois segundos o mesmo peso visual de um erro; a pílula ocupa o que o texto pede e
     fica na visão periférica de quem está digitando, que é para quem ela fala. */
  inline-size: max-content;
  max-inline-size: 100%;
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}

.sr-toast-processo .toast-body {
  padding: .5rem .9rem;
}

.sr-toast-processo .spinner-border {
  inline-size: .8rem;
  block-size: .8rem;
  border-width: .15em;
}

/* Resolvido: o spinner PARA e sai da caixa. Deixá-lo girando sob "Salvo ✓" seria
   dizer duas coisas contrárias ao mesmo tempo. */
.sr-toast-processo.sr-toast-resolvido .spinner-border {
  display: none;
}

.sr-toast-processo.sr-toast-resolvido {
  background-color: var(--verdeEscuro);
}

/* --- utilitário: indicador de origem de campo calculado (§1.1 princípio 3) ---- */
.sr-origem {
  border-block-end: 1px dotted var(--verde-900);
  cursor: help;
}

/* --- a barra de progresso -----------------------------------------------------
   ⚠️ ELA NUNCA PREENCHEU — E A CULPA ERA DE UMA LINHA SÓ, DE ESPECIFICIDADE.
   As duas classes existiam desde sempre (no `animations.css`, onde nasceram com a
   sidebar), e a regra do preenchimento era:

       .barra-progresso > .barra-progresso-valor { inline-size: 0 }

   Dois seletores de classe — (0,2,0) — contra o `.pct-45` logo abaixo, que tem
   um só — (0,1,0). A largura calculada dava ZERO em toda barra do sistema: a do
   menu lateral, a das trilhas, a dos cartões de objetivo do Início e a dos 4
   Ciclos. Nada no código parecia errado, e por isso ninguém achou olhando: o
   Razor escrevia `pct-45` direitinho e o navegador descartava.

   Achado em 14/09/2026, com o Igor comparando a tela com o `Workspace.html`.

   O conserto é morar AQUI, coladas nas `.pct-*`: mesma especificidade, e a ordem
   decide — base primeiro, largura depois. Ficam neste arquivo, e não no
   `animations.css`, porque barra de progresso é componente, não animação; o que
   sobrou lá é só a regra de movimento reduzido.

   O desenho é o do modelo (`.cvf-ciclo-bar`): trilho lavado, cantos arredondados,
   preenchimento em gradiente. Quem precisa de outra tinta troca `--sr-barra-cor`
   no contexto — é o que os 4 Ciclos fazem, faixa por faixa. */
.barra-progresso {
  display: block;
  inline-size: 100%;
  block-size: .4375rem;
  border-radius: .25rem;
  background-color: var(--verde-050);
  overflow: hidden;
}

.barra-progresso-valor {
  display: block;
  inline-size: 0;
  block-size: 100%;
  border-radius: .25rem;
  background-image: var(--sr-barra-cor,
    linear-gradient(90deg, var(--verdeEscuro), var(--verdeMedio)));
  transition: inline-size .5s ease;
}

/* A largura é informação, e não enfeite: ela chega instantânea para quem pediu
   menos movimento, mas continua chegando. */
@media (prefers-reduced-motion: reduce) {
  .barra-progresso-valor { transition: none; }
}

/* --- larguras de barra em passos de 5% (evita style inline; CSP §8.5) --------- */
.pct-0   { inline-size: 0; }
.pct-5   { inline-size: 5%; }
.pct-10  { inline-size: 10%; }
.pct-15  { inline-size: 15%; }
.pct-20  { inline-size: 20%; }
.pct-25  { inline-size: 25%; }
.pct-30  { inline-size: 30%; }
.pct-35  { inline-size: 35%; }
.pct-40  { inline-size: 40%; }
.pct-45  { inline-size: 45%; }
.pct-50  { inline-size: 50%; }
.pct-55  { inline-size: 55%; }
.pct-60  { inline-size: 60%; }
.pct-65  { inline-size: 65%; }
.pct-70  { inline-size: 70%; }
.pct-75  { inline-size: 75%; }
.pct-80  { inline-size: 80%; }
.pct-85  { inline-size: 85%; }
.pct-90  { inline-size: 90%; }
.pct-95  { inline-size: 95%; }
.pct-100 { inline-size: 100%; }

/* ---------------------------------------------------------------- E11a: patrimônio não confirmado
   Estado que NÃO é "inválido" e NÃO é "salvo": a requisição saiu com `keepalive` e a resposta se
   perdeu (rede caída, timeout, 500). O servidor PODE ter gravado. Reverter o campo seria mentir;
   pintá-lo de vermelho também — vermelho é `.is-invalid`, e quer dizer "o servidor recusou".

   Sem cor nova: usa o token de marca e distingue pelo TRAÇO. Borda tracejada é a convenção de
   "provisório", contrasta com a sólida do inválido, e sobrevive a quem não distingue cores — que
   é o que o §5.2 pede e o que uma borda âmbar sobre branco (1,6:1) não entregaria.

   Sem `!important`: `.form-control.sr-nao-confirmado` tem a mesma especificidade de
   `.form-control:focus` e vence por ordem, já que este arquivo carrega depois do Bootstrap.
   Ver `clientes.js`. */
.form-control.sr-nao-confirmado,
.sr-nao-confirmado {
  /* Sem mexer na ESPESSURA: 2px empurrariam a linha da tabela dois pixels toda vez que a marca
     aparecesse ou sumisse. O traço e o fundo bastam para distinguir sem mover nada de lugar. */
  border-style: dashed;
  border-color: var(--verde-900);
  background-color: var(--verde-050);
  background-image: none;
}

.form-control.sr-nao-confirmado:focus {
  border-color: var(--verde-900);
  box-shadow: 0 0 0 .2rem var(--verde-300);
}

/* ---------------------------------------------------------------------------- E11b: kanban do CRM
   ESPEC §7.3. Seis colunas que rolam na horizontal quando não cabem — e não seis colunas que
   encolhem até o cartão ficar ilegível, que é o que `flex-wrap` faria numa tela de 360px.
   Nenhuma cor literal: tudo sai dos tokens (§5.1). */
.sr-kanban {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-block-end: .5rem;
  scroll-snap-type: x proximity;
}

/* O container tem `tabindex="0"` porque rola na horizontal (WCAG 2.1.1 — ver o comentário na
   view). Container focável precisa de foco VISÍVEL, senão o teclado navega às cegas. */
.sr-kanban:focus-visible {
  outline: 3px solid var(--verde-900);
  outline-offset: 2px;
}

.sr-kanban-coluna {
  flex: 0 0 clamp(15rem, 80vw, 18rem);
  scroll-snap-align: start;
  background-color: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--sr-raio);
  display: flex;
  flex-direction: column;
  min-block-size: 8rem;
}

.sr-kanban-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .75rem;
  border-block-end: 1px solid var(--linha);
  position: sticky;
  inset-block-start: 0;
  background-color: var(--fundo);
  border-start-start-radius: var(--sr-raio);
  border-start-end-radius: var(--sr-raio);
  z-index: 1;
}

.sr-kanban-cartoes {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem;
  flex-grow: 1;
  /* A zona de soltar tem de existir mesmo vazia: sem altura mínima, uma coluna sem cartões não
     tem onde receber o arrasto. */
  min-block-size: 4rem;
}

.sr-kanban-cartao {
  cursor: grab;
}

.sr-kanban-cartao[draggable="false"] {
  cursor: default;
}

/* O cartão em trânsito continua visível — some-lo faria o usuário perder a referência do que
   está carregando. */
.sr-kanban-cartao.sr-arrastando {
  opacity: .5;
}

/* A coluna sob o cursor. O alvo é a COLUNA inteira — cabeçalho incluído —, e não só a pilha de
   cartões: o cabeçalho é sticky e é onde o olho mira. Traço, e não só cor: o alvo do arrasto
   precisa se distinguir para quem não separa tons (§5.2). */
.sr-kanban-coluna.sr-alvo {
  outline: 2px dashed var(--verde-900);
  outline-offset: -4px;
  background-color: var(--verde-050);
}

.sr-kanban-coluna.sr-alvo .sr-kanban-topo {
  background-color: var(--verde-050);
}

/* Enquanto uma requisição do quadro está em voo. */
body.sr-ocupado .sr-kanban-cartao {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .sr-kanban { scroll-behavior: auto; }
}

/* ====================================================================== ferramentas (§1, E16d)
   A vitrine usa a cor que o Anexo A dá a cada ferramenta. Ela chega em duas variáveis inline no
   próprio cartão (`--sr-ferr-cor`), porque é dado de catálogo e não de tema: cor nova no Anexo A
   aparece na tela sem tocar em CSS. */
.sr-ferramenta-card {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--sr-ferr-cor, #0E7C7B), var(--sr-ferr-cor2, #1CAF9C)) 1;
  transition: box-shadow .15s ease, transform .15s ease;
}

.sr-ferramenta-card:hover,
.sr-ferramenta-card:focus-within {
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .35);
  transform: translateY(-2px);
}

/* Quem pediu menos movimento não recebe o deslocamento (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .sr-ferramenta-card {
    transition: none;
  }

  .sr-ferramenta-card:hover,
  .sr-ferramenta-card:focus-within {
    transform: none;
  }
}

.sr-ferramenta-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

/* O espelho do controle deslizante. Largura fixa para o número não empurrar o controle a cada
   passo do arrasto. */
.sr-espelho {
  min-width: 5.5rem;
  text-align: right;
}

/* ====================================================================== módulos (§1.4, E15a)
   O cartão do painel do Raio-X. A cor de topo é DADO — vem do veredito do diagnóstico, e por isso
   chega numa variável inline em vez de sair do tema. */
/* ⚠️ 4px E COR DA MARCA NO PADRÃO (03/09/2026). Eram 3px e `--bs-border-color` — o cinza do
   Bootstrap. O kit base da E31a pôs um traço de 4px em verde no topo de todo cartão de
   indicador; com 3px cinza aqui, o Raio-X ficava com um cartão que quase combina com os das
   outras abas, e "quase" lê como desalinho, não como escala. O modelo usa 4px. */
.sr-kpi {
  border-top: 4px solid var(--sr-kpi-cor, var(--verdeMedio));
}

/* O nível "Alerta" dos 4 Ciclos (`laranja` no sistema de referência). O Bootstrap tem amarelo e
   vermelho e não tem laranja, e Atenção/Alerta/Crítico são três níveis distintos: sem esta classe
   dois deles colapsam na mesma cor e a escala perde um degrau.
   Contraste conferido: #7a3e00 sobre #ffe0b2 ≈ 8,4:1 (AAA). */
.sr-badge-alerta {
  background-color: #ffe0b2;
  color: #7a3e00;
}

/* =============================================================================
   Sidebar recolhida — só ícones, com dica no hover (§5.2)
   -----------------------------------------------------------------------------
   ⚠️ ESTE ESTADO NÃO EXISTE NO `Workspace.html`. Lá a sidebar é fixa em 296px e
   vira gaveta no celular; o recolher é desenho novo, pedido do Igor em
   31/08/2026 — está escrito para ninguém tratar como divergência do modelo.

   A classe mora no `<body>` e quem a escreve no primeiro paint é o SERVIDOR,
   pela variável de sessão do §8.2.4. O JS só a alterna no clique. Sem isso a
   tela pularia a cada navegação para quem prefere o menu fechado.

   Só vale em ≥ lg: abaixo disso a sidebar já é offcanvas, e recolher uma gaveta
   não quer dizer nada.
   ============================================================================= */
@media (min-width: 992px) {
  .sr-menu-recolhido {
    --sr-sidebar-largura: 4.25rem;
  }

  /* O rótulo some, o ícone fica. `.visually-hidden` do próprio Bootstrap não serve
     aqui: ele mantém o texto no fluxo do leitor de tela — que é o que queremos —,
     mas o item precisa ENCOLHER, e para isso o span tem de sair da caixa. O nome
     continua anunciado pelo `data-bs-title` que o `sr-menu.js` põe. */
  .sr-menu-recolhido .sr-sidebar .nav-link > span:not(.sr-objetivo-pct),
  .sr-menu-recolhido .sr-sidebar .sr-grupo-titulo,
  .sr-menu-recolhido .sr-sidebar .barra-progresso,
  .sr-menu-recolhido .sr-sidebar .sr-objetivo-pct {
    display: none;
  }

  .sr-menu-recolhido .sr-sidebar .nav-link {
    justify-content: center;
    padding-inline: .5rem;
  }

  .sr-menu-recolhido .sr-sidebar .nav-link > i {
    font-size: 1.15rem;
  }

  /* Sem o título do grupo, "Gestão" e "Administração" viram um bloco só. A linha
     devolve a separação que o rótulo dava — é a mesma leitura, com menos tinta. */
  .sr-menu-recolhido .sr-sidebar .nav + .nav,
  .sr-menu-recolhido .sr-sidebar ul + ul {
    border-block-start: 1px solid var(--linha);
    margin-block-start: .5rem;
    padding-block-start: .5rem;
  }

  /* A transição é da LARGURA, e só. Animar `display` não funciona, e animar o
     conteúdo faria o texto escorrer para dentro do ícone. */
  .sr-sidebar {
    transition: inline-size .18s ease;
  }
}

/* Quem prefere menos movimento não recebe a transição — §11.4 pede respeito a
   `prefers-reduced-motion`, e o resto do `animations.css` já o respeita. */
@media (prefers-reduced-motion: reduce) {
  .sr-sidebar {
    transition: none;
  }
}

/* A marca da topbar virou imagem: o logo do modelo, com teto de altura para não
   empurrar a barra. `width: auto` preserva a proporção em qualquer arquivo que
   o Igor troque depois. */
.sr-marca-logo {
  block-size: 2rem;
  inline-size: auto;
  max-inline-size: 11rem;
  object-fit: contain;
}


/* =============================================================================
   O botão de recolher/expandir — dentro do menu (§5.2)
   -----------------------------------------------------------------------------
   ⚠️ QUAL SETA APARECE É DECIDIDO PELO CSS, a partir da classe que o SERVIDOR
   escreve no `<body>`. Os dois ícones estão no HTML e um deles é escondido. A
   alternativa — o JS trocar a classe do ícone — poria no navegador uma decisão
   que já está resolvida no primeiro paint, e a seta piscaria invertida a cada
   navegação enquanto o módulo não acordasse.
   ============================================================================= */
/* ⚠️ AQUI FICA SÓ A TROCA DE SETA. O desenho do botão (sem moldura, discreto) mora na seção da
   casca, junto do `.sr-sidebar-topo` — e mora lá por um motivo mecânico, não de arrumação: o
   kit redefine `.btn { padding: .625rem 1rem }` mais abaixo neste arquivo, e regra de mesma
   especificidade escrita ANTES perde. Ver "o botão de recolher: DISCRETO", no `@media (min-width: 992px)`.

   Ele já morou na topbar (02/09 a 07/09/2026) desenhado como `btn-outline-secondary`, irmão do
   hamburger. Voltou para o topo do menu com a casca da E31b, e a moldura veio junto por inércia
   até o Igor pedir discrição. */

/* Expandido: a seta que RECOLHE. */
.sr-menu-alternar .sr-menu-ic-expandir { display: none; }

/* Recolhido: a seta que EXPANDE. Quem decide é a classe no `<body>`, escrita pelo servidor. */
.sr-menu-recolhido .sr-menu-alternar .sr-menu-ic-expandir { display: inline-block; }
.sr-menu-recolhido .sr-menu-alternar .sr-menu-ic-recolher { display: none; }

/* =============================================================================
   A PORTA — login, criar conta e esqueci minha senha (§8.5.1)
   -----------------------------------------------------------------------------
   O desenho é o `.conta-gate` do `Workspace.html`. As cores NÃO foram copiadas
   de lá: o `--sr-teal-800` do modelo e o `--verdeEscuro` do §5.1 são o mesmo
   #0e7c7b, e o §5.1 diz que os cinco tokens contratuais são normativos. Toda a
   escala aqui é derivada deles, como o resto do arquivo.

   As três telas continuam abrindo com `<div class="card">` — o que muda é a
   moldura em volta. Ver a nota no `_LayoutPublico.cshtml`.
   ============================================================================= */
.sr-gate {
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(1200px 500px at 50% -10%, var(--verde-050), transparent),
    linear-gradient(180deg, color-mix(in srgb, var(--verdeClaro) 14%, white), var(--fundo));
}

.sr-gate-corpo {
  inline-size: 100%;
  max-inline-size: 30rem;
  text-align: center;
}

.sr-gate-logo {
  block-size: 2.6rem;
  inline-size: auto;
  margin-block-end: 1.15rem;
}

/* O cartão: mais redondo e com sombra bem mais aberta que o `.card` do resto do
   sistema — é a única tela do produto que aparece sozinha numa página vazia, e o
   peso visual é o que a faz parecer uma porta em vez de um formulário solto. */
.sr-gate .card {
  border-radius: 1.25rem;
  border-color: var(--linha);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--verde-900) 40%, transparent);
}

.sr-gate .card-body {
  padding: 2.1rem 2rem 1.75rem;
}

/* ============================================================ E66c — a porta sem rolagem
   (Igor, 05/10/2026: "queria tudo na mesma tela, sem que o usuario precise rolar")

   A tela de criar conta é a mais alta da porta: duas abas, três campos, as CINCO regras de senha
   e a comunidade. Empilhadas, só as regras custavam ~110px — e eram elas que empurravam o botão
   "Criar conta" para baixo da dobra num monitor de 1080. Rolar para achar o botão de concluir é
   atrito que se paga em cadastro abandonado.

   ⚠️ AS DUAS REGRAS SÃO ESCOPADAS, de propósito. O Login e o "Esqueci minha senha" cabem de sobra
   e continuam com o respiro de antes: apertar a porta inteira para resolver o problema de uma das
   telas estragaria as outras duas em nome de nenhuma. */
.sr-gate .sr-gate-apertado .card-body {
  padding: 1.6rem 1.75rem 1.35rem;
}

/* 3rem a mais de largura, e só nesta tela: é o que dá ao par "Nome | E-mail" lado a lado uma
   coluna de ~230px em vez de ~210px — a diferença entre um campo de e-mail confortável e um
   apertado. O `:has()` é o que mantém isso aqui: a largura do cartão é do layout, e o Login não
   tem por que crescer junto. Navegador sem `:has()` ignora a regra e vê a porta de sempre, com
   as colunas um pouco mais estreitas.

   ⚠️ MEDIDO, E NÃO ESTIMADO (Chromium, 1366×768): com a lista de regras empilhada e o
   espaçamento antigo, o cartão tinha 881px e nascia com rolagem; com as regras em linha, os
   espaçamentos justos e os dois campos lado a lado, ficou em 598px. */
.sr-gate-corpo:has(.sr-gate-apertado) {
  max-inline-size: 33rem;
}

/* Campos um pouco mais baixos — 42px viram ~36px. Seis pixels por campo não se notam um a um;
   somados nos três campos e no botão da comunidade, são 24px que saem da altura total. */
.sr-gate .sr-gate-apertado .form-control,
.sr-gate .sr-gate-apertado .form-select,
.sr-gate .sr-gate-apertado #btn-comunidade {
  padding-block: .45rem;
}

/* ============================================================ E66b — os chips da descoberta
   (Igor, 05/10/2026: "ao selecionar um item não está ficando marcado")

   ⚠️⚠️ O ESTADO É O `aria-pressed`, E A APARÊNCIA SEGUE ELE. O JavaScript marca o chip pelo
   atributo — que é o que o leitor de tela anuncia — e o Bootstrap não desenha nada para
   `aria-pressed`: ele só conhece `.active`. Resultado: o chip marcado ficava igual ao não
   marcado, e a única pista era a recomendação mudando lá embaixo.

   A alternativa seria o JS ligar `.active` TAMBÉM, e aí o estado passaria a viver em dois
   lugares: no dia em que um deles fosse esquecido, a tela diria uma coisa e o leitor de tela
   diria outra. Com o seletor de atributo, há um estado só.

   ⚠️ E NADA DE HEX AQUI: a paleta do §5.1 tem cinco tokens, e o `KitBaseTests` reprova cor
   escrita à mão nesta folha. */
.sr-cq-chip[aria-pressed="true"] {
  background-color: var(--verde-700);
  border-color: var(--verde-700);
  color: white;
}

/* O `:hover` do Bootstrap para `btn-outline-secondary` escureceria o chip marcado para o cinza
   dele — o que faria o marcado parecer desmarcado justo quando o ponteiro passa por cima. */
.sr-cq-chip[aria-pressed="true"]:hover,
.sr-cq-chip[aria-pressed="true"]:focus {
  background-color: var(--verde-900);
  border-color: var(--verde-900);
  color: white;
}

/* As regras de senha em DUAS COLUNAS ALINHADAS (Igor, 05/10/2026: "deixe alinhado... em duas
   colunas"). O conteúdo é o mesmo da lista empilhada do primeiro acesso e da redefinição — e o
   `sr-senha-regras.js` não sabe a diferença: ele procura `[data-sr-regra]` e acende o `<i>` de
   dentro, aqui como lá.

   ⚠️ GRID, E NÃO `flex-wrap`. A primeira versão era flexível e quebrava por largura de texto: a
   segunda fileira começava embaixo do meio da primeira, e a terceira em outro lugar ainda — três
   margens diferentes numa lista de cinco itens. Com `1fr 1fr`, a coluna da direita começa sempre
   no mesmo ponto, independentemente do tamanho de cada regra.

   ⚠️ E UMA COLUNA NO CELULAR: a 480px, duas colunas espremeriam "Um símbolo, como ! # @ ou -" em
   duas linhas, e aí o alinhamento que esta regra existe para dar se perderia de novo. */
.sr-regras-linha {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
  row-gap: .1rem;
}

@media (min-width: 576px) {
  .sr-regras-linha {
    grid-template-columns: 1fr 1fr;
  }
}

/* O título na família de display, como todo H1 do modelo. */
.sr-gate .card h1 {
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: -.02em;
  color: var(--verde-900);
  margin-block-end: .35rem;
}

/* Rótulos e campos alinhados à esquerda dentro de um cartão centrado: o texto
   corrido é centrado, o formulário nunca — campo centrado é ilegível de digitar.

   ⚠️ E O MODAL TAMBÉM (Igor, 05/10/2026: "deixa as perguntas à esquerda"). A caixa de "Descubra a
   sua comunidade" é desenhada dentro do `.sr-gate-corpo`, que centra o texto para o título e o
   logo — e as perguntas dos grupos herdavam esse centro, ficando penduradas no meio enquanto os
   chips começavam na margem. Um formulário em pergunta-resposta se lê pela coluna da esquerda. */
.sr-gate form,
.sr-gate .alert,
.sr-gate .modal-content {
  text-align: start;
}

.sr-gate .form-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--preto);
  margin-block-end: .3rem;
}

.sr-gate .form-control {
  border-width: 1.5px;
  border-radius: .625rem;
  padding: .65rem .8rem;
}

.sr-gate .form-control:focus {
  border-color: var(--verdeMedio);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--verdeMedio) 22%, transparent);
}

/* O botão principal: o degradê do modelo, entre os dois verdes contratuais. */
.sr-gate .btn-primary {
  background: linear-gradient(135deg, var(--verdeEscuro), var(--verdeMedio));
  border: 0;
  border-radius: .75rem;
  padding-block: .8rem;
  font-weight: 700;
}

.sr-gate .btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Quem pediu menos movimento não recebe o empurrão do hover. */
@media (prefers-reduced-motion: reduce) {
  .sr-gate .btn-primary:hover {
    transform: none;
  }
}

.sr-gate a {
  color: var(--verde-900);
  font-weight: 600;
  font-size: .875rem;
}

/* =============================================================================
   Cabeça de página e Tutorial (§1.2 item 2)
   -----------------------------------------------------------------------------
   O desenho vem do `Workspace.html` (`.page-head`, `.eyebrow`, `.tut-*`). As
   cores continuam derivadas dos cinco tokens contratuais do §5.1 — o teal do
   modelo e o `--verdeEscuro` daqui são o mesmo #0e7c7b.
   ============================================================================= */
.sr-pagina-cabeca h1 {
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.15rem);
  color: var(--verde-900);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-block: .7rem 0;
}

.sr-pagina-cabeca p {
  color: var(--preto);
  opacity: .78;
  max-inline-size: 42rem;
  margin-block-start: .5rem;
}

.sr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--verdeEscuro);
  background-color: var(--verde-050);
  border: 1px solid color-mix(in srgb, var(--verdeMedio) 25%, white);
  padding: .3rem .75rem;
  border-radius: 1.25rem;
}

.sr-tut-selo {
  font-size: .75rem;
  font-weight: 700;
  color: var(--verde-900);
  background-color: var(--verde-050);
  border: 1px solid color-mix(in srgb, var(--verdeMedio) 25%, white);
  padding: .3rem .75rem;
  border-radius: 999px;
}

/* `auto-fill` com mínimo de 21rem: em telas largas o guia vira três colunas, e
   num celular vira uma — sem media query e sem número mágico de colunas. */
.sr-tut-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: .9rem;
}

.sr-tut-card {
  border-radius: .9rem;
}

.sr-tut-ic {
  font-size: 1.4rem;
  flex: none;
  line-height: 1;
}

.sr-tut-desc {
  font-size: .875rem;
  color: var(--preto);
  opacity: .82;
  line-height: 1.55;
  margin-block-end: 0;
}

/* A seta é do CSS e não do texto: um "→" digitado em cada passo seria lido em voz
   alta pelo leitor de tela, item por item. */
.sr-tut-passos {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.sr-tut-passos li {
  font-size: .8125rem;
  padding-inline-start: 1.5rem;
  position: relative;
  line-height: 1.45;
}

.sr-tut-passos li::before {
  content: "→";
  position: absolute;
  inset-inline-start: 0;
  color: var(--verdeEscuro);
  font-weight: 800;
}

.sr-tut-rodape {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: linear-gradient(140deg, #fff, var(--verde-050));
  border: 1px solid color-mix(in srgb, var(--verdeMedio) 25%, white);
  border-radius: .9rem;
  padding: 1rem 1.1rem;
  font-size: .875rem;
  line-height: 1.55;
}

/* =============================================================================
   Início — a faixa de cliente, o hero, as áreas e os cartões (§1.2 item 1)
   -----------------------------------------------------------------------------
   ⚠️ ESTE BLOCO FOI REESCRITO EM 08/09/2026 PARA CASAR COM O `Workspace.html`.
   O que havia antes desenhava a mesma informação em outra forma: cabeçalho em
   texto sobre o fundo da página, uma segunda caixa verde com os quatro números,
   áreas com um `<h5>` solto e cartões de Bootstrap sem tile de ícone nem tag.
   Eram DUAS aberturas para uma tela só, e nenhuma delas era a do modelo.

   As medidas vêm do modelo, convertidas para `rem` e para os tokens da nossa
   paleta — nada de hex solto (regra do topo do `tokens.css`).
   ============================================================================= */
.sr-pagina-cabeca h1 em {
  font-style: italic;
  color: var(--verdeMedio);
}

/* --- a faixa de contexto do planejador (`.plan-client-banner` do modelo) ------ */
.sr-faixa-cliente {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .875rem 1.125rem;
  margin-block-end: 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background-color: #fff;
}

.sr-faixa-cliente.conectada {
  background-image: linear-gradient(120deg, var(--verde-050), #fff 60%);
}

/* Tracejada quando não há ninguém: a borda diz "falta preencher" antes de a
   frase ser lida. É a mesma linguagem do `.cat-vazio` do modelo. */
.sr-faixa-cliente.vazia { border-style: dashed; }

.sr-faixa-avatar {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--linha);
}

/* ⚠️ A PASTILHA DO ÍCONE ACOMPANHA O ESTADO DA FAIXA, e não é sempre verde. Com
   cliente conectado ela é o verde da marca (o workspace está carregado); sem
   ninguém, ela é o mesmo laranja do botão ao lado — ícone e convite falando a
   mesma língua, como no `.plan-client-banner` do modelo. */
.sr-faixa-avatar-vazio {
  display: grid;
  place-items: center;
  background-color: var(--verde-050);
  border-color: transparent;
}

.sr-faixa-avatar-vazio .bi {
  font-size: 1.3rem;
  color: var(--verdeEscuro);
}

.sr-faixa-cliente.vazia .sr-faixa-avatar-vazio {
  background-color: var(--laranja-050);
  border: 1px solid var(--laranja-linha);
}

.sr-faixa-cliente.vazia .sr-faixa-avatar-vazio .bi { color: var(--laranja-tinta); }

/* `min-inline-size: 0` autoriza o filho a encolher dentro do flex; sem ele um
   e-mail longo empurra o botão para fora da faixa em vez de ser truncado. */
.sr-faixa-texto {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1 1 14rem;
  line-height: 1.2;
}

.sr-faixa-rotulo {
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--tinta-suave);
}

/* A serifa é de quem identifica — e aqui quem identifica é o nome do cliente. */
.sr-faixa-nome {
  font-family: var(--sr-ff-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--verde-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-faixa-email {
  font-size: .78rem;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-faixa-acoes {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: none;
  margin-inline-start: auto;
}

.sr-faixa-status {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--verdeEscuro);
}

.sr-faixa-ponto {
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background-color: var(--verdeMedio);
}

/* --- o botão da faixa (o `.pcb-btn` do modelo) ---------------------------------
   ⚠️ CLASSE PRÓPRIA, E NÃO `.btn-outline-secondary`. O botão de trocar cliente era
   cinza-vazado: a ação mais usada da faixa com a aparência de ação secundária. No
   modelo ele é sólido, no verde da marca — e o de "Selecionar cliente", quando não
   há ninguém, é LARANJA, porque ali ele não é uma ação entre outras: é a única
   coisa a fazer na tela. */
.sr-faixa-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  background-color: var(--verdeEscuro);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.sr-faixa-btn:hover { background-color: var(--verde-900); color: #fff; }

.sr-faixa-btn:focus-visible {
  outline: 2px solid var(--verde-900);
  outline-offset: 2px;
}

/* O convite. Ver o `remarks` do `--laranja` nos tokens para a razão de a tinta ser
   escura sobre ele e não branca. */
.sr-faixa-btn-convite {
  background-color: var(--laranja);
  color: var(--laranja-tinta);
}

.sr-faixa-btn-convite:hover {
  background-color: color-mix(in srgb, var(--laranja) 88%, black);
  color: var(--preto);
}

.sr-faixa-btn-convite:focus-visible { outline-color: var(--laranja-tinta); }

/* Num telefone o "Workspace carregado" sai: ele confirma o que o nome logo acima
   já diz, e é o que sobra para o botão caber sem quebrar a faixa em três linhas. */
@media (max-width: 575.98px) {
  .sr-faixa-status { display: none; }

  .sr-faixa-acoes { margin-inline-start: 0; }
}

/* --- o hero (`.home-hero` do modelo) ----------------------------------------- */
.sr-home-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.125rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.375rem) clamp(1.25rem, .75rem + 2vw, 2.5rem);
  margin-block-end: 1.5rem;
  color: #fff;
  background-color: var(--verde-900);
  background-image: linear-gradient(135deg, var(--verde-900), var(--verdeEscuro) 55%, var(--verdeMedio));
  box-shadow: var(--sombra-lg);
}

/* O brilho do canto superior direito do modelo. Decorativo e `pointer-events:
   none` — ele cobre o cartão inteiro e sem isso engoliria o clique de tudo. */
.sr-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(35rem 17.5rem at 95% -10%, rgb(255 255 255 / .18), transparent 70%);
  pointer-events: none;
}

.sr-home-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .7rem;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 999px;
  background-color: rgb(255 255 255 / .16);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sr-home-ponto {
  inline-size: .375rem;
  block-size: .375rem;
  border-radius: 50%;
  background-color: var(--verdeClaro);
}

/* ⚠️ ESTE `<h1>` ESCAPA DA REGRA `.sr-conteudo > h1` POR ANINHAMENTO — ele mora
   dentro do hero, e não como filho direto do conteúdo. É o mesmo caso do
   `.uni-hero h1` e do `.sr-gate .card h1`, e a regra da tipografia (a serifa é de
   quem identifica) não admite exceção nascida de um detalhe de marcação.
   O `KitBaseTests.A_serifa_de_display_e_de_quem_identifica` guarda os três. */
.sr-home-hero h1 {
  position: relative;
  z-index: 1;
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: #fff;
  margin-block: .875rem 0;
  max-inline-size: 47.5rem;
}

/* O trecho em destaque do modelo. `font-style: normal` desfaz o itálico que o
   `<em>` traz de fábrica: aqui o realce é a COR, não a inclinação. */
.sr-home-hero h1 em {
  font-style: normal;
  color: var(--verdeClaro);
}

.sr-home-sub {
  position: relative;
  z-index: 1;
  margin-block: .75rem 0;
  max-inline-size: 42.5rem;
  font-size: 1rem;
  color: rgb(255 255 255 / .86);
}

/* Quatro indicadores que viram dois e depois um, sem media query. */
.sr-home-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: .875rem;
  margin-block-start: 1.5rem;
}

.sr-home-stat {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .875rem 1rem;
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: var(--raio-md);
  background-color: rgb(255 255 255 / .12);
}

.sr-home-stat .l {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgb(255 255 255 / .8);
}

.sr-home-stat .v {
  font-family: var(--sr-ff-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.sr-home-stat .s {
  font-size: .72rem;
  color: rgb(255 255 255 / .8);
}

/* ⚠️ O déficit não é dito SÓ pela cor. O rótulo abaixo do número escreve "em
   déficit", e é ele que serve a quem não distingue as duas — a cor é reforço,
   nunca a informação. */
.sr-home-stat.negativo .v { color: #ffd0c8; }

/* --- as áreas (`.cat-block` do modelo) --------------------------------------- */
.sr-area { margin-block-end: 2rem; }

.sr-area-cabeca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-end: .875rem;
  padding-block-end: .7rem;
  border-block-end: 1px dashed var(--linha);
}

.sr-area-num {
  inline-size: 1.875rem;
  block-size: 1.875rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-xs);
  background-image: linear-gradient(135deg, var(--verde-900), var(--verdeMedio));
  color: #fff;
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: .95rem;
}

.sr-area-cabeca h2 {
  margin: 0;
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -.005em;
  color: var(--verde-900);
}

.sr-area-desc {
  margin-inline-start: auto;
  font-size: .78rem;
  font-style: italic;
  color: var(--tinta-suave);
  text-align: end;
}

/* Abaixo de sm a contagem passa para a linha de baixo, alinhada à esquerda: com
   `margin-inline-start: auto` e pouca largura ela espremeria o título. */
@media (max-width: 575.98px) {
  .sr-area-desc {
    margin-inline-start: 0;
    text-align: start;
    flex-basis: 100%;
  }
}

.sr-area-intro {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-block: -.125rem 1rem;
  padding: .75rem .95rem;
  border: 1px solid var(--verde-300);
  border-radius: var(--raio-md);
  background-image: linear-gradient(180deg, var(--verde-050), #fff);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--tinta);
}

.sr-area-intro-ic {
  font-size: 1.15rem;
  line-height: 1.2;
  flex: none;
}

.sr-area-intro b { color: var(--verde-900); }

.sr-area-intro-cta {
  display: block;
  margin-block-start: .2rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--verdeEscuro);
}

/* --- o botão de adicionar e a área vazia (§1.3) ------------------------------- */
.sr-area-add {
  margin-inline-start: auto;
  min-block-size: var(--sr-toque-min);
  padding: .4rem .9rem;
  border: 0;
  border-radius: var(--raio-sm);
  background-color: var(--verdeEscuro);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background-color .15s ease;
}

.sr-area-add:hover,
.sr-area-add:focus-visible { background-color: var(--verde-900); }

/* Com o botão presente, a contagem perde o `margin-inline-start: auto` para os dois
   não brigarem pela mesma folga — quem empurra para a direita passa a ser o botão. */
.sr-area-cabeca:has(.sr-area-add) .sr-area-desc { margin-inline-start: 0; }

.sr-area-vazia {
  margin: 0;
  padding: 1rem 1.125rem;
  border: 1px dashed var(--verde-300);
  border-radius: var(--raio-md);
  background-color: var(--verde-050);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--tinta);
}

/* --- os cartões de objetivo (`.sol-card` do modelo) -------------------------- */
/* A caixa existe só para ancorar o "✕": ele não pode morar DENTRO do `<a>` (link
   dentro de link é HTML inválido e o teclado não alcança o de dentro), então os
   dois são irmãos e a caixa é o `position: relative` de ambos. */
.sr-sol-caixa { position: relative; display: flex; }

.sr-sol-caixa > .sr-sol-card { flex: 1 1 auto; }

.sr-sol-remover {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-end: .5rem;
  z-index: 2;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background-color: #fff;
  color: var(--vermelho);
  font-size: .7rem;
  line-height: 1;

  /* ⚠️ INVISÍVEL ATÉ O HOVER, MAS **NÃO** ATÉ O FOCO. O modelo usa `opacity: 0` e
     pronto — o que deixa o botão inalcançável para quem navega por teclado, que
     nunca provoca `:hover`. O `:focus-visible` do próprio botão o traz de volta. */
  opacity: 0;
  transition: opacity .15s ease;
}

.sr-sol-caixa:hover .sr-sol-remover,
.sr-sol-remover:focus-visible { opacity: 1; }

.sr-sol-remover:hover {
  background-color: #fdecea;
  border-color: #f0b5ad;
}

/* O ícone herda o vermelho do botão; sem isto a regra global `.bi` o pintaria de
   verde dentro de um controle que significa "remover". */
.sr-sol-remover .bi { color: inherit; }

/* --- o modal de adicionar objetivo -------------------------------------------- */
.sr-obj-lista { margin-block: 0; }

.sr-obj-item {
  inline-size: 100%;
  min-block-size: var(--sr-toque-min);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border: 0;
  background: none;
  text-align: start;
  color: inherit;
  transition: background-color .15s ease;
}

.sr-obj-item:hover:not(:disabled) { background-color: var(--verde-050); }

.sr-obj-item:disabled { opacity: .55; }

.sr-obj-item-ic {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-sm);
  background-image: linear-gradient(135deg, var(--verde-900), var(--verdeMedio));
  color: #fff;
}

.sr-obj-item-texto {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1 1 auto;
  line-height: 1.3;
}

.sr-obj-item-titulo { font-weight: 600; color: var(--verde-900); }

.sr-obj-item-desc {
  font-size: .75rem;
  color: var(--tinta-suave);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sr-obj-item-mais { flex: none; color: var(--verdeEscuro); }

/* --- as duas abas da caixa e o formulário de criar --------------------------- */
.sr-obj-abas {
  display: inline-flex;
  padding: .2rem;
  margin-block-end: .875rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background-color: var(--cinza-050);
}

.sr-obj-abas button {
  min-block-size: 2rem;
  padding: .3rem .85rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--tinta-suave);
  font-size: .78rem;
  font-weight: 700;
}

.sr-obj-abas button.ativa {
  background-color: #fff;
  color: var(--verde-900);
  box-shadow: var(--sombra-sm);
}

.sr-obj-icones {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

.sr-obj-icone {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}

.sr-obj-icone:hover { border-color: var(--verdeMedio); }

.sr-obj-icone.ativo {
  border-color: var(--verdeEscuro);
  background-color: var(--verde-050);
}

/* Duas colunas de caixas de seleção: onze abas numa coluna só dariam uma lista
   mais alta que o modal, e o botão "Criar objetivo" sairia da vista. */
.sr-obj-abas-escolha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: .1rem .875rem;
}

.sr-obj-abas-escolha .form-check-label {
  font-size: .8125rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

.sr-obj-dica {
  padding: .6rem .75rem;
  margin-block-end: .875rem;
  border: 1px solid var(--verde-300);
  border-radius: var(--raio-sm);
  background-color: var(--verde-050);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--tinta);
}


.sr-sol-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: .875rem;
}

.sr-sol-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.125rem 1.2rem 1.05rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background-color: #fff;
  box-shadow: var(--sombra-sm);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.sr-sol-card:hover,
.sr-sol-card:focus-visible {
  color: inherit;
  border-color: var(--verde-300);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

.sr-sol-cabeca {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.sr-sol-ic {
  inline-size: 2.375rem;
  block-size: 2.375rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-sm);
  background-image: linear-gradient(135deg, var(--verde-900), var(--verdeMedio));
  color: #fff;
}

/* O ícone dentro do tile herda o branco do tile — é a exceção descrita no bloco
   "BOTÕES E ÍCONES" logo abaixo, e o seletor está lá, na lista. */
.sr-sol-ic .bi { font-size: 1.05rem; }

.sr-sol-titulo {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: -.005em;
  color: var(--verde-900);
}

.sr-sol-seta {
  flex: none;
  color: var(--verdeMedio);
  transition: transform .2s ease;
}

.sr-sol-card:hover .sr-sol-seta,
.sr-sol-card:focus-visible .sr-sol-seta {
  transform: translateX(3px);
}

/* Duas linhas e reticências: os textos do Anexo A variam muito de tamanho, e sem
   teto os cartões de uma linha ficam com metade da altura dos de quatro. */
.sr-sol-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* Mais fina que a barra do menu: aqui ela é um detalhe do cartão, e não o dado
   principal. O `--linha-2` é a segunda linha, mais clara, do `tokens.css`. */
.sr-sol-barra {
  block-size: .25rem;
  background-color: var(--linha-2);
}

/* `margin-block-start: auto` gruda o rodapé no fim do cartão: numa grade em que
   as descrições têm alturas diferentes, é o que alinha as tags entre si. */
.sr-sol-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block-start: auto;
  padding-block-start: .6rem;
  border-block-start: 1px solid var(--linha-2);
}

.sr-sol-tag {
  padding: .18rem .5rem;
  border: 1px solid var(--verde-300);
  border-radius: var(--raio-xs);
  background-color: var(--verde-050);
  color: var(--verde-900);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sr-sol-pct {
  margin-inline-start: auto;
  font-size: .66rem;
  font-weight: 700;
  color: var(--tinta-suave);
}

@media (prefers-reduced-motion: reduce) {
  .sr-sol-card:hover,
  .sr-sol-card:focus-visible { transform: none; }

  .sr-sol-card:hover .sr-sol-seta,
  .sr-sol-card:focus-visible .sr-sol-seta { transform: none; }
}

/* =============================================================================
   BOTÕES E ÍCONES — o conserto da ponte do Bootstrap (§5.1)
   -----------------------------------------------------------------------------
   ⚠️ POR QUE ISTO EXISTE. O `tokens.css` define `--bs-primary`, e isso NÃO pinta
   os botões: o Bootstrap 5.3 compila as cores dentro da própria regra
   (`.btn-primary { --bs-btn-bg: #0d6efd; ... }`). A ponte servia aos utilitários
   e parava ali — então todo botão do sistema foi AZUL desde a F1, com o comentário
   de lá afirmando o contrário.

   Quem pinta botão no Bootstrap 5.3 são as variáveis `--bs-btn-*`, e é sobre elas
   que se escreve aqui. O padrão é o da porta (`.sr-gate`): degradê entre os dois
   verdes contratuais.
   ============================================================================= */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--verdeEscuro);
  --bs-btn-border-color: var(--verdeEscuro);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--verde-700);
  --bs-btn-hover-border-color: var(--verde-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--verde-900);
  --bs-btn-active-border-color: var(--verde-900);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--verde-300);
  --bs-btn-disabled-border-color: var(--verde-300);

  background-image: linear-gradient(135deg, var(--verdeEscuro), var(--verdeMedio));
  border: 0;
  font-weight: 600;
}

/* O degradê é imagem, e imagem vence cor de fundo: sem apagá-lo, o estado
   pressionado ficaria idêntico ao normal e o botão pareceria travado. */
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary:active,
.btn-primary.disabled,
.btn-primary:disabled { background-image: none; }

.btn-outline-primary {
  --bs-btn-color: var(--verdeEscuro);
  --bs-btn-border-color: var(--verdeEscuro);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--verdeEscuro);
  --bs-btn-hover-border-color: var(--verdeEscuro);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--verde-900);
  --bs-btn-active-border-color: var(--verde-900);
}

/* O "secundário" do Bootstrap é cinza-azulado. Aqui ele é o verde discreto —
   é o botão de "Cancelar" e o da topbar, e eles não podem destoar do resto. */
.btn-outline-secondary {
  --bs-btn-color: var(--verde-900);
  --bs-btn-border-color: var(--linha);
  --bs-btn-hover-color: var(--verde-900);
  --bs-btn-hover-bg: var(--verde-050);
  --bs-btn-hover-border-color: var(--verdeMedio);
  --bs-btn-active-color: var(--verde-900);
  --bs-btn-active-bg: var(--verde-050);
  --bs-btn-active-border-color: var(--verdeMedio);
}

.btn-link {
  --bs-btn-color: var(--verdeEscuro);
  --bs-btn-hover-color: var(--verde-900);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--verdeMedio);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--verdeMedio) 22%, transparent);
}

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

/* -----------------------------------------------------------------------------
   ÍCONES — verde SuperRico em toda parte, exceto onde a cor já foi decidida.
   -----------------------------------------------------------------------------
   ⚠️ A EXCEÇÃO É O QUE FAZ A REGRA FUNCIONAR. Pintar TODO `.bi` de verde deixaria
   branco-sobre-verde virar verde-sobre-verde: o ícone dentro de um botão primário,
   do item de menu ativo, do hero do Início e de um alerta vermelho sumiriam. Nesses
   contextos o ícone herda a cor do texto ao redor, que é quem já resolveu o
   contraste.
   ----------------------------------------------------------------------------- */
.bi {
  color: var(--verdeEscuro);
}

.btn .bi,
.alert .bi,
.badge .bi,
.nav-link.active .bi,
.sr-home-hero .bi,
/* ⚠️ OS TRÊS BOTÕES DE RELATÓRIO DA CURVA são `<a>` vestidos de botão — não são
   `.btn`, e por isso escapavam desta lista: o ícone sairia em `--verdeEscuro`
   sobre o degradê verde do botão, verde sobre verde. É exatamente o defeito que o
   FAB do widget teve em 01/09, na mesma armadilha. */
.sr-cvf-rel-btn .bi,
/* O ícone do cartão de projeto na curva tem pastilha própria e contraste já
   resolvido nela; repintá-lo de verde apagaria o âmbar do projeto pendente, que é
   a informação do cartão. (Era `.sr-cvf-projeto-marca` até 14/09/2026, quando a
   lista de leitura virou cartão com controles.) */
.sr-cvf-proj-ic .bi,
/* ⚠️ O TILE DE ÍCONE DO CARTÃO DE OBJETIVO entra pela mesma razão que os outros:
   ele é um quadrado com degradê verde, e o `.bi` pintado de `--verdeEscuro`
   sairia verde sobre verde ali dentro. Quem já resolveu o contraste é o tile. */
.sr-sol-ic .bi,
/* O ladrilho do objetivo no modal de "+ Adicionar" tem o mesmo degradê verde do
   cartão — e o mesmo motivo para o ícone não ser repintado de verde. */
.sr-obj-item-ic .bi,
.sr-tut-rodape .bi,
.dropdown-item .bi,
.btn-close,
/* ⚠️ O FAB do §7.5 NÃO é um `.btn` — é um `<button class="sr-widget-botao">` e nada mais —, e
   por isso escapava desta lista: o ícone de chat saía em `--verdeEscuro` sobre o degradê verde
   do círculo, verde sobre verde, que é exatamente o que o comentário acima descreve. Relatado
   pelo Igor em 01/09/2026, no dia em que o botão virou só o ícone e o problema deixou de ter
   um rótulo branco ao lado para disfarçá-lo. */
.sr-widget-botao .bi,
/* ⚠️ O BOTÃO DA FAIXA DE CLIENTE ATIVO, pela QUARTA vez a mesma armadilha (relatado pelo Igor
   em 24/09/2026: "o ícone no botão deveria ser branco"). O `.sr-faixa-btn` é um `<button>` com
   classe própria — não é `.btn` —, tem fundo `--verdeEscuro` e texto branco, e o `.bi` saía em
   `--verdeEscuro` sobre ele: o ícone existia e ninguém via. A variante `-convite`, de fundo
   laranja com tinta escura, herda a tinta dela pela mesma linha. */
.sr-faixa-btn .bi,
/* ⚠️ AS UTILITÁRIAS DE COR, UMA A UMA — e não `[class*="text-"]`, que era o que estava aqui.
   O curinga parecia elegante e casava com metade do Bootstrap: `text-center`, `text-start`,
   `text-end`, `text-truncate`, `text-nowrap`, `text-uppercase`, `text-decoration-none` e as
   variantes responsivas (`text-md-center`…) são ALINHAMENTO E TIPOGRAFIA — nenhuma delas define
   `color`. O ícone dentro de qualquer uma herdava a cor do texto ao redor e perdia o verde da
   marca, em silêncio, no produto inteiro.
   Relatado pelo Igor em 02/09/2026 no check da troca de senha, que sai preto: ele mora num
   `<div class="modal-body text-center">`, e `[class*="text-"] .bi` (0,2,0) derrotava o
   `.sr-senha-check` (0,1,0) — a própria regra escrita para pintá-lo de verde.
   A lista abaixo é maior, mas é a lista das utilitárias que REALMENTE mexem em `color`, que é a
   única razão pela qual esta exceção existe. */
.text-primary .bi, .text-primary-emphasis .bi,
.text-secondary .bi, .text-secondary-emphasis .bi,
.text-success .bi, .text-success-emphasis .bi,
.text-danger .bi, .text-danger-emphasis .bi,
.text-warning .bi, .text-warning-emphasis .bi,
.text-info .bi, .text-info-emphasis .bi,
.text-light .bi, .text-light-emphasis .bi,
.text-dark .bi, .text-dark-emphasis .bi,
.text-body .bi, .text-body-emphasis .bi,
.text-body-secondary .bi, .text-body-tertiary .bi,
.text-muted .bi, .text-reset .bi,
.text-white .bi, .text-white-50 .bi,
.text-black .bi, .text-black-50 .bi,
[class*="text-bg-"] .bi {
  color: inherit;
}

/* O toast de sucesso no verde da marca — o `text-bg-success` do Bootstrap é outro verde, e
   esta caixa aparece dezenas de vezes por sessão. */
.sr-toast-sucesso {
  background-color: var(--verdeEscuro);
  color: #fff;
}

.sr-toast-sucesso .btn-close { filter: brightness(0) invert(1); }

/* O check da troca de senha bem-sucedida (§8.1). Tamanho no CSS, e não uma classe
   utilitária de tipografia no markup: `display-5` num `<i>` do Bootstrap Icons
   carrega junto o `line-height` de título e desalinha o ícone dentro do modal. */
.sr-senha-check {
  font-size: 3rem;
  line-height: 1;

  /* Declarada AQUI, e não com `text-success` no markup. A regra `.bi { color: ... }` deste
     mesmo arquivo carrega depois do Bootstrap e tem a mesma especificidade da utilitária —
     ou seja, o verde do markup perderia por ordem de cascade, em silêncio. O verde é o da
     marca de qualquer forma; o que muda é que agora está escrito. */
  color: var(--verdeEscuro);
}

/* O botão não pode encolher e crescer a cada envio: o spinner entra ao lado do rótulo, e sem
   uma largura mínima o "Cancelar" desliza para o lado e volta. Largura de "Salvar senha" com
   folga para o spinner e para "Salvando…". */
.sr-senha-salvar {
  min-width: 11rem;
}

/* --- véu de carregamento da porta (§8.1) -------------------------------------
   Cobre o cartão inteiro enquanto a credencial é conferida. Sólido de propósito:
   o formulário precisa SUMIR, senão continua parecendo clicável e a pessoa clica
   de novo. Ver o comentário do `Login.cshtml` para a medição que motivou isto.
   ----------------------------------------------------------------------------- */
/* ⚠️ TELA CHEIA DESDE 22/09/2026, a pedido do Igor. Ele era `position: absolute`
   dentro do cartão: cobria o formulário e deixava à volta a página de login, com a
   marca, o rodapé e a borda do cartão desenhada em torno de um véu verde — parecia
   uma caixa de diálogo, e não a passagem para a tela seguinte.

   `fixed` e não `absolute`: tem de cobrir também o que estiver fora do cartão, e o
   cartão pode rolar. O `z-index` fica ABAIXO dos avisos (1090, ver a pilha lá
   embaixo) de propósito: numa falha de credencial o véu é desfeito e o aviso
   aparece, mas se a ordem se invertesse um dia, o aviso ficaria escondido atrás do
   verde e a pessoa não saberia por que não entrou. */
.sr-gate-carregando {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1.5rem;
  text-align: center;
  background-color: var(--verde-900);
  color: #fff;
}

/* A marca em negativo, sobre o verde. `clamp` porque o véu agora ocupa a tela
   inteira: num celular em pé ela não pode empurrar a curva para fora. */
.sr-gate-carregando-logo {
  inline-size: clamp(9rem, 26vw, 14rem);
  block-size: auto;
}

/* --- a Curva de Vitalidade que carrega a porta (19/09/2026) -------------------
   ⚠️ A REGRA DO `.spinner-border` SAIU DAQUI, e a saída é a mudança: o véu
   mostrava o circulozinho de fábrica do Bootstrap, o mesmo de qualquer site.
   Agora desenha a própria Curva de Vitalidade Financeira® — o gráfico que abre a
   tela seguinte — subindo barra a barra. O SVG vem montado do servidor
   (`DesenhoDoCarregamento`); aqui ficam só tamanho e cor.

   ⚠️⚠️ AS DUAS SÉRIES INVERTEM O BRILHO EM RELAÇÃO AO DASHBOARD, e isso é
   contraste, não gosto. Lá o fundo é branco: o Valor Necessário é a barra clara
   e larga atrás, o Valor Guardado é a escura na frente. Aqui o fundo é o
   `--verde-900` do véu, e a escura do dashboard (`#1B4A47`) mede 1,6:1 sobre ele
   — ou seja, metade da curva simplesmente desapareceria dentro do fundo. Sobre
   verde escuro quem fica na frente é o tom CLARO: o `--verdeClaro` mede 5,2:1 e
   é o Valor Guardado; o Necessário recua para um véu do `--verde-300`. A relação
   figura/fundo é a mesma — atrás o que recua, na frente o que salta.

   Nenhum hex solto: os dois saem dos tokens da marca, como manda o cabeçalho do
   `tokens.css`. */
.sr-carregando-svg {
  inline-size: min(22rem, 100%);
  block-size: auto;
  display: block;
  overflow: visible;
}

.sr-carregando-vida {
  fill: color-mix(in srgb, var(--verde-300) 30%, transparent);
}

.sr-carregando-renda {
  fill: var(--verdeClaro);
}

/* ⚠️ A REGRA `.sr-gate-carregando-texto` SAIU EM 19/09/2026: a frase deixou de ser
   desenhada na tela (o véu mostra só a curva) e passou a viver na `.visually-hidden`
   do Bootstrap, para o leitor de tela. Sem texto visível, não há tipografia a definir. */

/* --- onde a pilha de avisos mora (§4.2) --------------------------------------
   ⚠️ CENTRO INFERIOR, e não um canto — `bottom: 24px; left: 50%`, que é o `.toast`
   do `Workspace.html`. Decidido pelo Igor em 01/09/2026.

   O canto inferior direito foi tentado e não funcionou: é onde vive o
   `.sr-widget-botao`, e os dois são pills verde-escuros arredondados com texto
   branco. Medido numa reprodução com este CSS: o retângulo do aviso cabia INTEIRO
   dentro do retângulo do botão. O aviso ganhava a pilha (z-index 1090 contra 1040)
   e era desenhado por cima — o que se via era o botão trocando de rótulo, não algo
   surgindo. No centro não há canto para disputar.

   Não usar as utilitárias de posição do Bootstrap é deliberado: elas são
   `!important` e nenhuma regra nossa conseguiria mover a pilha.
   ----------------------------------------------------------------------------- */
.sr-toasts {
  inset-block-end: 1.5rem;
  inset-inline-start: 50%;
  inset-inline-end: auto;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  max-inline-size: calc(100vw - 2rem);
}

/* Em tela estreita o aviso centrado é quase tão largo quanto a tela, e volta a
   encostar no botão flutuante. Sobe acima dele — é o mesmo desvio que o
   `Workspace.html` faz no `.save-indicator` abaixo de 640px. */
@media (max-width: 575.98px) {
  .sr-toasts { inset-block-end: 5.5rem; }
}

/* =============================================================================
   ABAS E PROGRESSO DA ANAMNESE (§1.4) — o `.subtabs` e o cartão de percentual do
   `Workspace.html`. Pedido do Igor em 01/09/2026, com uma captura de tela.

   ⚠️ A PALAVRA DO ESTÁGIO ("iniciando", "em andamento", "quase lá", "completa")
   NÃO É DECIDIDA AQUI nem no Razor: ela vem do `Progresso.Estagio`, em C#, porte
   literal da escada do modelo. Aqui só se desenha o que o servidor mandou.
   ============================================================================= */
.sr-abas {
  margin-block-end: 1.25rem;

  /* Rola na horizontal quando as linguetas não cabem — cortar o nome de uma aba
     seria pior, e a rolagem fica DENTRO da tira, então a página não ganha barra
     lateral (DoD §11.4 item 3). */
  overflow-x: auto;
  scrollbar-width: thin;
}

.sr-abas-lista {
  display: flex;
  gap: .1875rem;
  margin: 0;
  padding: .3125rem;
  list-style: none;
  inline-size: max-content;
  min-inline-size: 100%;
  background-color: #fff;
  border: 1px solid var(--linha);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgb(14 124 123 / .06);
}

.sr-aba {
  display: flex;
  align-items: center;
  gap: .4375rem;
  padding: .5625rem .875rem;
  border-radius: .5rem;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;

  /* Lingueta parada é TEXTO, não link verde: no modelo o verde é o que marca a
     aba aberta, e pintar as quatro de verde tira dela justamente esse trabalho. */
  color: var(--bs-body-color);
  transition: background-color .18s ease, color .18s ease;
}

.sr-aba:hover { background-color: var(--verde-050); color: var(--verde-900); }

.sr-aba.ativa {
  background-image: linear-gradient(135deg, var(--verde-900), var(--verdeMedio));
  color: #fff;
  box-shadow: 0 4px 10px -4px rgb(14 124 123 / .4);
}

/* O ícone herda a cor da lingueta — mesma exceção do FAB e do botão de enviar:
   a regra `.bi { color: var(--verdeEscuro) }` deixaria verde sobre o degradê. */
.sr-aba .bi { color: inherit; font-size: .95rem; }

.sr-aba-pct {
  min-inline-size: 2rem;
  padding: .0625rem .375rem;
  border-radius: .25rem;
  background-color: var(--linha);
  color: var(--bs-secondary-color);
  font-size: .625rem;
  font-weight: 700;
  text-align: center;
}

.sr-aba.ativa .sr-aba-pct { background-color: rgb(255 255 255 / .22); color: #fff; }

/* --- o cartão do percentual --------------------------------------------------- */
.sr-progresso {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: 1.5rem;
  padding: 1rem 1.25rem;
  background-color: #fff;
  border: 1px solid var(--linha);
  border-radius: .75rem;
}

.sr-progresso-num {
  flex: none;
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  color: var(--verdeEscuro);
  font-variant-numeric: tabular-nums;
}

.sr-progresso-nome { flex: none; display: flex; flex-direction: column; line-height: 1.25; }

.sr-progresso-aba {
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde-700);
}

.sr-progresso-estagio { font-size: .8125rem; font-weight: 600; color: var(--verde-900); }

.sr-progresso-barra {
  flex: 1;
  min-inline-size: 6rem;
  block-size: .5rem;
  border-radius: 999px;
  background-color: var(--verde-050);
}

.sr-progresso-barra .progress-bar {
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--verdeMedio), var(--verde-900));
}

/* Em tela estreita o número e o rótulo ficam em cima e a barra embaixo, largura
   cheia — a barra é o que se lê de relance, e espremê-la em 3rem a torna enfeite. */
@media (max-width: 34rem) {
  .sr-progresso { flex-wrap: wrap; gap: .5rem 1rem; }
  .sr-progresso-barra { flex: 1 0 100%; }
}

/* --- código de seis dígitos do segundo fator (§8.1) ---------------------------
   Seis caixas, no desenho que o Igor mandou em 01/09/2026. Elas herdam borda,
   foco e estado inválido do `.form-control` — o que muda é o tamanho, o centro
   e o corpo do número, que precisa ser grande porque é o que se confere de
   relance contra a tela do celular.
   ----------------------------------------------------------------------------- */
.sr-codigo {
  display: flex;
  gap: .5rem;
  justify-content: center;
}

.sr-codigo-digito {
  inline-size: 3rem;
  block-size: 3.5rem;
  padding: 0;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;

  /* Sem isto o "1" é mais estreito que o "8" e as seis caixas parecem desalinhadas
     enquanto se digita. */
  font-variant-numeric: tabular-nums;
  border-radius: .625rem;
}

/* Em tela bem estreita seis caixas de 3rem mais os vãos passam de 320px. */
@media (max-width: 25rem) {
  .sr-codigo { gap: .3rem; }

  .sr-codigo-digito {
    inline-size: 2.5rem;
    block-size: 3rem;
    font-size: 1.25rem;
  }
}

/* O spinner do aviso de envio do Cofre (§8.7) — corpo maior que o do rodapé, porque
   aqui ele é o assunto da caixa e não um detalhe ao lado de uma frase. */
.sr-aguardar-spinner {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-width: .2em;
  color: var(--verdeEscuro);
}

/* --- topbar em três áreas, com o logo no CENTRO DA TELA (§5.2) -----------------
   Pedido do Igor em 01/09/2026. `1fr auto 1fr` é o que prende o meio no meio: as
   duas pontas dividem o que sobra em partes iguais, então o logo não anda quando
   o hamburger aparece abaixo de lg. Um `d-flex` com `me-auto` daria "centro do
   que sobrou", que é outra coisa e balança.

   (Até 02/09/2026 a ponta esquerda também trazia o indicador de salvamento, e era
   a largura variável dele — "Salvando…" contra "Salvo ✓" — que tornava a grade
   indispensável. O indicador saiu; a grade fica, porque o hamburger continua
   entrando e saindo conforme a largura da tela.) */
.sr-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.sr-topbar-esquerda {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-inline-size: 0;
}

/* A conta fica colada na direita — sem isto ela ficaria no início da sua coluna. */
.sr-topbar > .dropdown { justify-self: end; }

.sr-marca { justify-self: center; }

/* --- avatar (02/09/2026) ------------------------------------------------------
   Pedido do Igor: círculo com uma câmera no meio; clicar escolhe a foto.

   ⚠️ O `.sr-avatar-vazio` e o `.sr-avatar-camera` são ÍCONES DENTRO DE UM BOTÃO, e
   por isso herdam a cor do texto pela exceção `.btn .bi` — só que este botão não é
   um `.btn`. É o mesmo buraco que deixou o FAB do widget verde-sobre-verde em
   01/09; aqui as duas cores são declaradas, e não herdadas de ninguém. */
.sr-avatar-botao {
  position: relative;
  inline-size: 7rem;
  block-size: 7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--verdeEscuro) 12%, #fff);
  display: inline-grid;
  place-items: center;
  overflow: visible;
  cursor: pointer;
}

.sr-avatar-botao:focus-visible {
  outline: 3px solid var(--verdeEscuro);
  outline-offset: 3px;
}

.sr-avatar-foto {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* A foto é servida quadrada pelo servidor; o `object-fit` é o cinto para o dia em
     que uma chegar por outro caminho. */

  /* Borda no verde médio, pedido do Igor em 02/09/2026. Ela cresce para DENTRO — o
     `box-sizing: border-box` do Bootstrap vale aqui —, então o círculo não muda de
     tamanho e nada ao redor se desloca quando a foto entra no lugar do ícone. */
  border: 3px solid var(--verdeMedio);
}

.sr-avatar-vazio {
  font-size: 3.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--verdeEscuro) 45%, #fff);
}

/* A câmera fica na borda, e não no centro do círculo, quando já existe foto: no
   meio ela cobriria o rosto. Canto inferior direito é onde as pessoas esperam. */
.sr-avatar-camera {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--verdeEscuro);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgb(0 0 0 / .25);
}

.sr-avatar-camera .bi {
  color: #fff;
  font-size: 1.0625rem;
}

/* O avatar de LISTA — CRM, carteira, chat. Sem botão e sem câmera: só a foto, ou o
   ícone padrão quando não há. */
.sr-avatar-mini {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--verdeEscuro) 12%, #fff);
  flex: none;

  /* Mesma borda do avatar grande, proporcional: 3px num círculo de 40px comeria a
     foto. */
  border: 2px solid var(--verdeMedio);
}

/* A foto no botão de conta da topbar (02/09/2026). O tamanho acompanha o ícone que ela
   substitui — `bi-person-circle` a 1rem —, para o botão não mudar de altura conforme a
   pessoa tenha ou não foto. A borda é a mesma da marca, fina porque o círculo é pequeno. */
.sr-topbar-avatar {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--verdeMedio);
  display: block;
}

/* --- lista de conversas do chat (02/09/2026) -----------------------------------
   Cada linha é um `<button>`: teclado, foco e leitor de tela vêm de graça, e o alvo
   inteiro é clicável — não só o nome. */
.sr-widget-conversas { display: flex; flex-direction: column; }

.sr-widget-conversa-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  inline-size: 100%;
  padding: .625rem .5rem;
  border: 0;
  border-block-end: 1px solid var(--bs-border-color);
  background: none;
  text-align: start;
  cursor: pointer;
}

.sr-widget-conversa-item:hover { background-color: var(--verde-050); }

.sr-widget-conversa-sem-foto {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--verdeEscuro) 45%, #fff);
}

/* `min-inline-size: 0` é o que permite ao filho encolher e reticenciar: sem ele o
   flex usa a largura do CONTEÚDO como mínimo, a prévia empurra o selo para fora e a
   linha estoura. */
.sr-widget-conversa-texto {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.sr-widget-conversa-nome { font-weight: 600; }

.sr-widget-conversa-previa {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-widget-conversa-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  flex: none;
}

.sr-widget-conversa-selo {
  min-inline-size: 1.375rem;
  padding: 0 .375rem;
  border-radius: 999px;
  background-color: var(--verdeEscuro);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}

.sr-widget-voltar { align-self: flex-start; margin-block-end: .5rem; }

/* --- Curva de Vitalidade na tela inicial ---------------------------------------
   ⚠️ REESCRITO EM 08/09/2026. Até então este bloco vestia um cartão com cabeçalho,
   gráfico e legenda — um sexto do `renderCurvaVitalidadeDashboard` do
   `Workspace.html`. Faltavam a barra de relatórios, a nota dos dois ciclos, o juro
   real, os projetos na curva, os oito cartões do Resumo e os 4 Ciclos.

   O SVG continua vindo do servidor (`DesenhoDaCurva`) e continua chamando-se
   `.sr-curva-svg` — é o C# que escreve essa classe, e renomeá-la aqui deixaria o
   gráfico sem estilo em silêncio.

   A seção inteira é UMA superfície branca com blocos internos, e não seis cartões
   soltos: no modelo ela é um `.cvf-block` só, e a leitura de cima a baixo é a
   história (onde estou → para onde vai → o que muda o rumo). */
.sr-cvf {
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background-color: #fff;
  box-shadow: var(--sombra-sm);
  padding: clamp(1rem, .6rem + 1.4vw, 1.5rem);
}

.sr-cvf-cabeca {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block-end: 1rem;
}

.sr-cvf-icone {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--raio-md);
  background-image: linear-gradient(135deg, var(--verdeEscuro), var(--verdeMedio));
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 1.35rem;
}

/* A regra `.bi { color: var(--verdeEscuro) }` pintaria o ícone de verde sobre o
   degradê verde — o mesmo defeito do FAB do widget em 01/09. */
.sr-cvf-icone .bi { color: #fff; }

.sr-cvf-cabeca-texto {
  flex: 1 1 16rem;
  min-inline-size: 0;
}

.sr-cvf-cabeca-texto h2 {
  margin: 0 0 .25rem;
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--verde-900);
}

.sr-cvf-cabeca-texto p {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.sr-cvf-reg {
  font-size: .55em;
  vertical-align: super;
  margin-inline-start: 1px;
  font-weight: 700;
}

.sr-cvf-status {
  flex: none;
  text-align: end;
  min-inline-size: 7rem;
}

.sr-cvf-status-lab {
  display: block;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--tinta-suave);
}

.sr-cvf-status-val {
  display: block;
  font-family: var(--sr-ff-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sr-cvf-status-sub {
  display: block;
  font-size: .78rem;
  font-weight: 600;
}

/* --- a barra de relatórios ---------------------------------------------------- */
.sr-cvf-relatorios {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .625rem;
  padding: .875rem 1rem;
  margin-block-end: 1rem;
  border: 1px solid var(--verde-300);
  border-radius: var(--raio-md);
  background-image: linear-gradient(120deg, var(--verde-050), #fff 70%);
}

.sr-cvf-rel-lab {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--verde-900);
  margin-inline-end: .25rem;
}

/* Um `<a>` vestido de botão: o destino é uma página, e um `<button>` que navega
   perde o "abrir em nova aba" do meio do clique — que é justamente o que alguém
   faz com um relatório antes de apresentá-lo. */
.sr-cvf-rel-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-block-size: var(--sr-toque-min);
  padding: .5rem .9rem;
  border-radius: var(--raio-sm);
  background-image: linear-gradient(135deg, var(--verdeEscuro), var(--verde-700));
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}

.sr-cvf-rel-btn:hover,
.sr-cvf-rel-btn:focus-visible {
  color: #fff;
  filter: brightness(1.08);
}

.sr-cvf-rel-dica {
  margin-inline-start: auto;
  font-size: .72rem;
  color: var(--tinta-suave);
}

/* Num telefone a dica desce sozinha e os botões ocupam a linha inteira: três
   botões truncados lado a lado não são três botões. */
@media (max-width: 575.98px) {
  .sr-cvf-rel-btn { flex: 1 1 100%; justify-content: center; }

  .sr-cvf-rel-dica { margin-inline-start: 0; }
}

/* --- o gráfico ---------------------------------------------------------------- */
.sr-cvf-grafico { margin-block-end: 1rem; }

.sr-cvf-grafico-cabeca {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-block-end: .5rem;
}

.sr-cvf-grafico-cabeca h3 {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  color: var(--verde-900);
}

.sr-cvf-grafico-direita {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .875rem;
}

.sr-cvf-selo {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border: 1px solid var(--verde-300);
  border-radius: 999px;
  background-color: var(--verde-050);
  color: var(--verde-900);
  font-size: .68rem;
  font-weight: 700;
}

.sr-cvf-legenda {
  display: flex;
  gap: .875rem;
  flex-wrap: wrap;
  font-size: .72rem;
  color: var(--tinta-suave);
}

.sr-cvf-legenda .sw {
  display: inline-block;
  inline-size: 14px;
  block-size: 3px;
  border-radius: 2px;
  margin-inline-end: .25rem;
  vertical-align: middle;
}

.sr-cvf-legenda .sw-tracejada {
  background: none;
  block-size: 0;
  border-block-start: 2px dashed;
}

/* `overflow-x: auto` porque o SVG tem largura mínima útil: numa curva de cinquenta
   anos em tela estreita, encolher até caber tornaria os rótulos ilegíveis. Rolar
   dentro do quadro é melhor que espremer — e o `<body>` nunca rola na horizontal. */
.sr-cvf-quadro {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  padding: .5rem;
  background-color: #fff;
}

/* --- a legenda de hover do gráfico -------------------------------------------
   Ela é posicionada pelo `sr-curva.js` (duas propriedades de posição, e só isso).
   `pointer-events: none` é o que impede a caixa de entrar na frente do próprio
   ponto e fazer o `mouseleave` disparar debaixo do ponteiro — piscada infinita. */
.sr-cvf-tip {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-inline-size: 11rem;
  padding: .5rem .625rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: #fff;
  box-shadow: var(--sombra);
  font-size: .72rem;
  pointer-events: none;
}

.sr-cvf-tip-ano {
  font-size: .78rem;
  font-weight: 700;
  color: var(--verde-900);
}

.sr-cvf-tip-fase {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
}

.sr-cvf-tip-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .875rem;
}

.sr-cvf-tip-k { font-weight: 600; color: var(--tinta-secundaria); }

/* As três tintas são as do gráfico: quem lê a caixinha reconhece a linha de que ela
   fala sem procurar na legenda. Elas são texto pequeno, então vêm das versões
   escurecidas — o `#A7D3CB` da barra clara não seria legível como texto. */
.sr-cvf-tip-k.nec { color: #40756c; }
.sr-cvf-tip-k.gua { color: #1B4A47; }
.sr-cvf-tip-k.meta { color: #8a5a08; }

.sr-cvf-tip-v {
  font-weight: 700;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* O alvo do mouse é a faixa do ano inteiro; o ponto só cresce um pouco para
   confirmar qual ano está sendo lido. */
.sr-curva-ponto { transition: r .12s ease; }

.sr-curva-faixa:hover ~ .sr-curva-ponto { pointer-events: none; }

.sr-curva-ponto:hover { r: 4; }

@media (prefers-reduced-motion: reduce) {
  .sr-curva-ponto { transition: none; }
}

/* ⚠️ A CLASSE DO SVG É ESCRITA PELO `DesenhoDaCurva`, em C#. Ela não segue o
   prefixo `sr-cvf-` do resto deste bloco de propósito: renomeá-la aqui exigiria
   mexer no C# junto, e um esquecimento deixaria o gráfico sem estilo sem que nada
   acusasse. */
.sr-curva-svg { display: block; min-inline-size: 34rem; }

/* A nota que traduz as duas linhas do gráfico numa frase. */
.sr-cvf-nota {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-block-start: .625rem;
  padding: .7rem .8rem;
  border: 1px solid var(--verde-300);
  border-radius: var(--raio-sm);
  background-color: var(--verde-050);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--tinta);
}

.sr-cvf-nota-ic { font-size: 1rem; flex: none; line-height: 1.2; }

.sr-cvf-nota b { color: var(--verde-900); }

/* As duas linhas nomeadas ganham a cor da linha correspondente no gráfico — é o
   que liga a frase ao desenho sem obrigar a decorar a legenda. */
.sr-cvf-ciclo-vida { color: #b8860b; }

.sr-cvf-ciclo-renda { color: #1b4a47; }

/* --- o juro real utilizado ---------------------------------------------------- */
.sr-cvf-juro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  padding: .8rem 1rem;
  margin-block-end: 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  background-color: var(--cinza-050);
}

.sr-cvf-juro-esq {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}

.sr-cvf-juro-lab {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--tinta-suave);
}

/* A serifa é de quem identifica, e aqui a taxa é o número que a projeção inteira
   depende — o mesmo estatuto de um indicador. */
.sr-cvf-juro-val {
  font-family: var(--sr-ff-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}

.sr-cvf-juro-calc {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-block-size: var(--sr-toque-min);
  padding: .35rem .7rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: #fff;
  color: var(--verdeEscuro);
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
}

.sr-cvf-juro-calc:hover,
.sr-cvf-juro-calc:focus-visible {
  border-color: var(--verdeMedio);
  background-color: var(--verde-050);
  color: var(--verde-900);
}

.sr-cvf-juro-nota {
  flex: 1 1 18rem;
  margin: 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* --- os projetos na curva ----------------------------------------------------- */
.sr-cvf-projetos {
  padding: .875rem 1rem;
  margin-block-end: 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
}

.sr-cvf-projetos-cabeca {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin-block-end: .625rem;
}

.sr-cvf-projetos-cabeca h3 {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  color: var(--verde-900);
}

.sr-cvf-projetos-cabeca span {
  font-size: .68rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

.sr-cvf-vazio {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* --- os cartões de projeto na curva (o `.cvf-proj-card` do modelo) ------------
   ⚠️ ERA UMA LISTA DE LEITURA até 14/09/2026: `<ul>` com uma linha por projeto e
   nada para clicar além do link. Agora cada projeto é um cartão com controles —
   o interruptor "na curva", e, para imóvel e veículo, comprar × vender com ano e
   valor da venda. O estado "fora" continua VISÍVEL, lavado: projeto que some da
   tela ensina que ele não existe; projeto apagado ensina que ele está fora. */
.sr-cvf-projetos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: .625rem;
}

.sr-cvf-proj {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.sr-cvf-proj:hover { box-shadow: var(--sombra-sm); }

/* Fora da curva: o cartão continua legível — não é um item desativado, é uma
   escolha que se pode desfazer no mesmo lugar. O tracejado diz "não conta". */
.sr-cvf-proj.fora {
  border-style: dashed;
  background-color: var(--cinza-050);
}

.sr-cvf-proj.fora .sr-cvf-proj-val,
.sr-cvf-proj.fora .sr-cvf-proj-nome { color: var(--tinta-secundaria); }

/* O projeto que a curva não conseguiu posicionar: nem dentro, nem fora — falta
   dado. A tinta âmbar é a mesma do capital-meta e do "aguardando". */
.sr-cvf-proj.pendente {
  border-style: dashed;
  border-color: var(--laranja-linha);
  background-color: var(--laranja-050);
}

.sr-cvf-proj.pendente .sr-cvf-proj-ic { color: var(--laranja-tinta); }

.sr-cvf-proj-topo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .625rem;
  padding: .625rem .75rem;
  text-decoration: none;
  color: inherit;
}

.sr-cvf-proj-topo:hover .sr-cvf-proj-nome { text-decoration: underline; }

.sr-cvf-proj-topo:focus-visible {
  outline: 2px solid var(--verdeEscuro);
  outline-offset: -2px;
}

.sr-cvf-proj-ic {
  inline-size: 2.125rem;
  block-size: 2.125rem;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--linha);
  border-radius: var(--raio-xs);
  background-color: #fff;
  color: var(--verde-700);
  font-size: 1rem;
}

.sr-cvf-proj-id {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  line-height: 1.25;
}

.sr-cvf-proj-nome {
  font-size: .8rem;
  font-weight: 700;
  color: var(--verde-900);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-cvf-proj-sub {
  font-size: .68rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

.sr-cvf-proj-val {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* O sinal tem cor: o que ENTRA na curva é verde, o que SAI é âmbar. São as duas
   tintas que o modelo usa nos marcadores do gráfico, e é bom que sejam as mesmas
   — o cartão e o degrau na curva falam do mesmo evento. */
.sr-cvf-proj-val.pos { color: #1d6b44; }
.sr-cvf-proj-val.neg { color: #91450f; }

.sr-cvf-proj-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem .75rem;
  border-block-start: 1px solid var(--linha-2);
  background-color: var(--cinza-050);
}

.sr-cvf-proj-switch {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--tinta-secundaria);
  cursor: pointer;
}

.sr-cvf-proj-switch input { accent-color: var(--verdeEscuro); cursor: pointer; }

.sr-cvf-proj.dentro .sr-cvf-proj-switch { color: var(--verde-900); }

.sr-cvf-proj-modo {
  display: inline-flex;
  border: 1px solid var(--linha);
  border-radius: var(--raio-xs);
  overflow: hidden;
}

.sr-cvf-proj-md {
  padding: .2rem .5rem;
  border: 0;
  background-color: #fff;
  font-size: .66rem;
  font-weight: 700;
  color: var(--tinta-secundaria);
  cursor: pointer;
}

.sr-cvf-proj-md + .sr-cvf-proj-md { border-inline-start: 1px solid var(--linha); }

.sr-cvf-proj-md:hover { background-color: var(--verde-050); }

.sr-cvf-proj-md.sel {
  background-color: var(--verdeEscuro);
  color: #fff;
}

.sr-cvf-proj-md:focus-visible {
  outline: 2px solid var(--verde-900);
  outline-offset: -2px;
}

.sr-cvf-proj-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.sr-cvf-proj-venda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .5rem;
  padding: .5rem .75rem .625rem;
  border-block-start: 1px dashed var(--linha);
  background-color: var(--cinza-050);
}

.sr-cvf-proj-venda label {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .64rem;
  font-weight: 700;
  color: var(--tinta-secundaria);
}

.sr-cvf-proj-venda input {
  inline-size: 100%;
  padding: .25rem .4rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-xs);
  background-color: #fff;
  font: inherit;
  font-size: .75rem;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}

.sr-cvf-proj-venda input:focus-visible {
  outline: 2px solid var(--verdeEscuro);
  outline-offset: -1px;
}

@media (prefers-reduced-motion: reduce) {
  .sr-cvf-proj { transition: none; }
}

/* --- o Resumo (a réplica dos cartões da planilha) ------------------------------ */
.sr-rcv {
  padding: 1rem;
  margin-block-end: 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
}

.sr-rcv-titulo {
  margin: 0 0 .5rem;
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--verde-900);
}

.sr-rcv-nota {
  padding: .6rem .75rem;
  margin-block-end: .875rem;
  border: 1px solid var(--linha-2);
  border-radius: var(--raio-sm);
  background-color: var(--cinza-050);
  font-size: .75rem;
  color: var(--tinta-suave);
}

/* Quatro por linha viram dois e depois um, sem media query.
   -----------------------------------------------------------------------------
   ⚠️⚠️ O COMENTÁRIO ACIMA DIZIA "QUATRO POR LINHA" E O CÓDIGO NÃO GARANTIA NENHUM
   NÚMERO. `auto-fit` com piso de 11rem empacota QUANTOS COUBEREM: numa tela larga
   dava cinco, e os oito cartões do resumo quebravam em 5 + 3 — que foi o que o Igor
   viu em 16/09/2026. O comentário descrevia a intenção e passava por descrição.

   O teto de quatro vem do próprio piso da faixa: cada coluna vale, no mínimo, um
   quarto da linha (descontados os três vãos). Com esse piso, uma quinta não cabe —
   e a queda para 2 e para 1 continua acontecendo sozinha, porque abaixo de
   4 × 11rem o `max()` passa a devolver as 11rem.

   O `min(100%, …)` de fora é o que impede o estouro numa tela mais estreita que
   11rem: sem ele o cartão sairia da caixa em vez de encolher. */
.sr-rcv-grade {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, max(11rem, (100% - 2.25rem) / 4)), 1fr));
  gap: .75rem;
}

.sr-rcv-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .875rem .9rem;
  border-radius: var(--raio-md);
  text-align: center;
  text-decoration: none;
}

/* Os quatro da ACUMULAÇÃO: fundo escuro, como na planilha. Os quatro da
   desacumulação são claros. A divisão é a mesma que a curva desenha. */
.sr-rcv-card.escuro {
  background-image: linear-gradient(160deg, var(--verde-900), var(--verdeEscuro));
  color: #fff;
}

.sr-rcv-card.claro {
  background-color: var(--verde-050);
  color: var(--verde-900);
}

.sr-rcv-data {
  font-size: .7rem;
  font-weight: 600;
  opacity: .78;
  min-block-size: 1rem;
}

.sr-rcv-rotulo {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
}

/* A serifa: o número do cartão é um indicador, e indicador identifica. */
.sr-rcv-valor {
  font-family: var(--sr-ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin-block: .1rem;
}

.sr-rcv-origem {
  font-size: .66rem;
  line-height: 1.3;
  opacity: .85;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sr-rcv-card.clicavel { transition: transform .15s ease, box-shadow .15s ease; }

.sr-rcv-card.clicavel:hover,
.sr-rcv-card.clicavel:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

.sr-rcv-card.escuro:hover,
.sr-rcv-card.escuro:focus-visible { color: #fff; }

.sr-rcv-card.claro:hover,
.sr-rcv-card.claro:focus-visible { color: var(--verde-900); }

.sr-rcv-rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-block-start: .875rem;
  padding-block-start: .75rem;
  border-block-start: 1px dashed var(--linha);
  font-size: .8125rem;
  color: var(--tinta);
}

.sr-rcv-rodape b { color: var(--verdeEscuro); }

/* --- os 4 Ciclos da Saúde Financeira ------------------------------------------ */
.sr-cvf-ciclos h3 {
  margin: 0 0 .25rem;
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--verde-900);
}

.sr-cvf-ciclos-sub {
  margin: 0 0 .875rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.sr-cvf-ciclos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: .75rem;
}

/* ⚠️ O CICLO É UM BOTÃO, e o desenho segue o `.cvf-ciclo-btn` do modelo: borda da
   esquerda na cor do ciclo (`--sr-ciclo-cor`, dado do `ciclos.json`), ícone em
   pastilha da mesma cor, barra tingida pela FAIXA. A cor do ciclo diz QUAL é; a da
   barra e a do selo dizem COMO está. São duas informações diferentes, e é por isso
   que são duas tintas. */
.sr-cvf-ciclo {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  inline-size: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--linha);
  border-inline-start: 4px solid var(--sr-ciclo-cor, var(--linha));
  border-radius: var(--raio-md);
  background-color: #fff;
  box-shadow: var(--sombra-sm);
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sr-cvf-ciclo:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
  border-color: var(--sr-ciclo-cor, var(--linha));
}

/* O foco é do teclado e não pode depender do hover — o cartão é um alvo grande, e o
   anel precisa contornar o cartão inteiro. */
.sr-cvf-ciclo:focus-visible {
  outline: 2px solid var(--verdeEscuro);
  outline-offset: 2px;
}

.sr-cvf-ciclo-ic {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-sm);
  background-image: linear-gradient(135deg,
    var(--sr-ciclo-cor, var(--verde-700)),
    color-mix(in srgb, var(--sr-ciclo-cor, var(--verde-700)) 82%, black));
  box-shadow: var(--sombra-sm);
  font-size: 1.4rem;
  line-height: 1;
}

.sr-cvf-ciclo-corpo {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-inline-size: 0;
  flex: 1 1 auto;
}

.sr-cvf-ciclo-titulo {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.15;
  color: var(--verde-900);
}

.sr-cvf-ciclo-sub {
  font-size: .72rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

.sr-cvf-ciclo-barra { margin-block: .5rem .3rem; }

.sr-cvf-ciclo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.sr-cvf-ciclo-selo {
  padding: .1rem .45rem;
  border-radius: var(--raio-xs);
  background-color: var(--cinza-050);
  color: var(--tinta-secundaria);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- as quatro faixas: barra e selo -------------------------------------------
   As tintas são as do modelo (`.cvf-ciclo-btn.verde|amarelo|laranja|vermelho`). Os
   pares fundo/texto do selo foram escolhidos para passar 4,5:1 — o do modelo já
   passa nos quatro, e por isso foram mantidos literais. */
.sr-cvf-ciclo.verde,
.sr-ciclo-score.verde,
.sr-ciclo-ind.verde { --sr-barra-cor: linear-gradient(90deg, #2fa86a, #5fc88d); }

.sr-cvf-ciclo.amarelo,
.sr-ciclo-score.amarelo,
.sr-ciclo-ind.amarelo { --sr-barra-cor: linear-gradient(90deg, #e8a93b, #f3c264); }

.sr-cvf-ciclo.laranja,
.sr-ciclo-score.laranja,
.sr-ciclo-ind.laranja { --sr-barra-cor: linear-gradient(90deg, #e07a2c, #ec9a55); }

.sr-cvf-ciclo.vermelho,
.sr-ciclo-score.vermelho,
.sr-ciclo-ind.vermelho { --sr-barra-cor: linear-gradient(90deg, #c93333, #e25555); }

.sr-cvf-ciclo.nd,
.sr-ciclo-score.nd,
.sr-ciclo-ind.nd { --sr-barra-cor: linear-gradient(90deg, #cfdad9, #cfdad9); }

.sr-cvf-ciclo.verde .sr-cvf-ciclo-selo,
.sr-ciclo-score.verde .sr-ciclo-score-selo,
.sr-ciclo-ind.verde .sr-ciclo-ind-selo { background-color: #daf3e4; color: #1d6b44; }

.sr-cvf-ciclo.amarelo .sr-cvf-ciclo-selo,
.sr-ciclo-score.amarelo .sr-ciclo-score-selo,
.sr-ciclo-ind.amarelo .sr-ciclo-ind-selo { background-color: #fdf2d7; color: #7a5c0e; }

.sr-cvf-ciclo.laranja .sr-cvf-ciclo-selo,
.sr-ciclo-score.laranja .sr-ciclo-score-selo,
.sr-ciclo-ind.laranja .sr-ciclo-ind-selo { background-color: #fde6d2; color: #91450f; }

.sr-cvf-ciclo.vermelho .sr-cvf-ciclo-selo,
.sr-ciclo-score.vermelho .sr-ciclo-score-selo,
.sr-ciclo-ind.vermelho .sr-ciclo-ind-selo { background-color: #fce0e0; color: #972d2d; }

.sr-cvf-ciclo.nd .sr-cvf-ciclo-selo,
.sr-ciclo-score.nd .sr-ciclo-score-selo,
.sr-ciclo-ind.nd .sr-ciclo-ind-selo { background-color: #eef1f1; color: var(--tinta-secundaria); }

/* --- o detalhe do ciclo (a caixa que o cartão abre) --------------------------- */
.sr-ciclo-cabeca {
  align-items: center;
  gap: .85rem;
  border-block-end: 0;
  background-image: linear-gradient(135deg,
    var(--sr-ciclo-cor, var(--verde-900)),
    color-mix(in srgb, var(--sr-ciclo-cor, var(--verde-900)) 80%, black));
  color: #fff;
}

.sr-ciclo-cabeca-ic {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-sm);
  background-color: rgb(255 255 255 / 18%);
  font-size: 1.4rem;
  line-height: 1;
}

.sr-ciclo-cabeca-texto {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-inline-size: 0;
}

.sr-ciclo-cabeca-rotulo {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

.sr-ciclo-cabeca .modal-title { color: #fff; }

.sr-ciclo-explica {
  margin-block-end: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: var(--verde-050);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--tinta);
}

.sr-ciclo-explica strong { color: var(--verde-900); }

.sr-ciclo-score {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .7rem .9rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: var(--cinza-050);
}

.sr-ciclo-score-num {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}

.sr-ciclo-score-num small {
  font-size: .8rem;
  font-weight: 500;
  color: var(--tinta-suave);
}

.sr-ciclo-score-barra { block-size: .625rem; border-radius: .3125rem; }

.sr-ciclo-score-barra .barra-progresso-valor { border-radius: .3125rem; }

.sr-ciclo-score-selo {
  padding: .25rem .7rem;
  border-radius: var(--raio-xs);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sr-ciclo-parcial {
  margin-block: .5rem 0;
  font-size: .72rem;
  color: var(--tinta-secundaria);
}

.sr-ciclo-inds-titulo {
  margin-block: 1.125rem .625rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
}

.sr-ciclo-inds {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5625rem;
}

.sr-ciclo-ind {
  padding: .7rem .8rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: #fff;
}

.sr-ciclo-ind-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-block-end: .45rem;
}

.sr-ciclo-ind-nome {
  font-size: .82rem;
  font-weight: 700;
  color: var(--verde-900);
}

.sr-ciclo-ind-selo {
  padding: .1rem .45rem;
  border-radius: var(--raio-xs);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sr-ciclo-ind-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-block-start: .4rem;
}

.sr-ciclo-ind-val {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}

.sr-ciclo-ind-nota {
  font-size: .68rem;
  font-weight: 700;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.sr-ciclo-ind-desc {
  margin-block: .35rem 0;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--tinta-secundaria);
}

.sr-cvf-lacunas {
  margin-block: .875rem 0;
  font-size: .78rem;
  color: var(--tinta-suave);
}

@media (prefers-reduced-motion: reduce) {
  .sr-rcv-card.clicavel:hover,
  .sr-rcv-card.clicavel:focus-visible { transform: none; }
}


/* =============================================================================
   UNIVERSIDADE E BIBLIOTECA (§7.4) — desenho do `Workspace.html`, 02/09/2026.

   ⚠️ AS CORES VÊM DOS TOKENS DA MARCA, e não dos literais do protótipo. Ele
   escreve `#0E7C7B` e `#1CAF9C` à mão; aqui são `--verdeEscuro` e `--verdeMedio`,
   que são os mesmos valores. A diferença aparece no dia em que a marca mudar de
   tom: lá seriam duzentas substituições, aqui é uma linha do `tokens.css`.
   ============================================================================= */

.uni-hero { padding-block-end: 1.125rem; border-block-end: 1px solid var(--bs-border-color); margin-block-end: 1.25rem; }
/* ⚠️ `--sr-ff-display` acrescentado em 03/09: este era o ÚNICO título de página do produto fora
   da serifa. Ele escapa da regra `.sr-conteudo > h1` porque mora dentro do `.uni-hero`, e não
   como filho direto do conteúdo — o `>` que protege o `<h1>` de dentro de um cartão também o
   deixava de fora. A regra da tipografia (serifa é de quem identifica) não admite uma exceção
   que nasceu de um detalhe de aninhamento. */
.uni-hero h1 {
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--verde-900);
  letter-spacing: -.5px;
  margin-block-end: .375rem;
}
.uni-hero p { font-size: .875rem; color: var(--bs-secondary-color); max-inline-size: 42rem; line-height: 1.55; margin-block-end: 0; }

.uni-stats { display: flex; gap: 1.125rem; margin-block-start: .875rem; flex-wrap: wrap; }
.uni-stat b { font-size: 1.125rem; color: var(--verdeEscuro); font-weight: 700; }
.uni-stat span { font-size: .6875rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; display: block; }

/* --- painel "Meu Aprendizado" --- */
.uni-painel { background: #fff; border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.375rem 1.5rem; margin-block-end: 1.375rem; }
.uni-painel-tit { font-size: 1.25rem; font-weight: 700; color: var(--verde-900); }
.uni-painel-sub { font-size: .78rem; color: var(--bs-secondary-color); font-weight: 600; margin-block-end: 1rem; }
.uni-painel-prog { display: flex; align-items: center; gap: 1.625rem; flex-wrap: wrap; }

/* O anel é `conic-gradient` — sem SVG e sem JavaScript, como no protótipo. O furo
   do meio é um `::before` com o fundo do cartão, e não um segundo elemento. */
.uni-painel-ring {
  --pct: 0;
  inline-size: 6.5rem;
  block-size: 6.5rem;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--verdeMedio) calc(var(--pct) * 1%), #e8efed 0);
  position: relative;
}

.uni-painel-ring::before { content: ''; position: absolute; inset: .6875rem; border-radius: 50%; background: #fff; }
.uni-painel-ring span { position: relative; z-index: 2; font-size: 1.5rem; font-weight: 800; color: var(--verdeEscuro); }

.uni-painel-mets { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .875rem 1.375rem; flex: 1; min-inline-size: 15rem; }
.uni-met b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--verde-900); line-height: 1; }
.uni-met span { font-size: .72rem; color: var(--bs-secondary-color); font-weight: 600; }

.uni-painel-actions { display: flex; gap: .625rem; flex-wrap: wrap; margin-block-start: 1.125rem; }

.uni-continuar {
  flex: 1;
  min-inline-size: 15rem;
  background: linear-gradient(135deg, var(--verdeEscuro), var(--verdeMedio));
  color: #fff;
  border-radius: .6875rem;
  padding: .8125rem 1.125rem;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
}

.uni-continuar:hover { filter: brightness(1.06); color: #fff; }

/* --- banner da Biblioteca --- */
.uni-bib-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.125rem;
  align-items: center;
  background: linear-gradient(135deg, var(--verde-900), var(--verdeMedio));
  color: #fff;
  padding: 1.125rem 1.375rem;
  border-radius: .875rem;
  text-decoration: none;
  margin-block-end: 1.5rem;
  box-shadow: 0 8px 24px -10px rgb(10 40 38 / .35);
  transition: transform .18s, box-shadow .18s;
}

.uni-bib-banner:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px rgb(10 40 38 / .45); color: #fff; }
.uni-bib-ic { font-size: 1.75rem; inline-size: 4rem; block-size: 4rem; display: grid; place-items: center; background: rgb(255 255 255 / .18); border-radius: .75rem; }
.uni-bib-tit { display: block; font-weight: 700; font-size: 1.1875rem; line-height: 1.15; margin-block-end: .25rem; }
.uni-bib-sub { display: block; font-size: .78rem; opacity: .92; line-height: 1.45; }
.uni-bib-arrow { font-size: 1.25rem; opacity: .7; transition: transform .2s; }
.uni-bib-banner:hover .uni-bib-arrow { transform: translateX(4px); opacity: 1; }

/* Os três ícones vivem sobre o degradê verde: a regra `.bi { color: var(--verdeEscuro) }`
   os deixaria verde sobre verde — o defeito do FAB do widget, de novo. */
.uni-bib-banner .bi { color: #fff; }

/* --- categorias e cartão de trilha --- */
.uni-cat { font-size: .8125rem; font-weight: 700; color: var(--verdeEscuro); letter-spacing: .05em; text-transform: uppercase; margin: 1.5rem 0 .625rem; padding-block-end: .5rem; border-block-end: 1px solid var(--bs-border-color); }
.uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: .875rem; margin-block-end: .875rem; }

.uni-trilha-card {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-inline-start: 4px solid var(--tcol, var(--verdeMedio));
  border-radius: .875rem;
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  min-block-size: 10rem;
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.uni-trilha-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px -12px rgb(10 40 38 / .28); border-color: var(--tcol, var(--verdeMedio)); color: inherit; }
.uni-trilha-card.completa { background: linear-gradient(180deg, #fff, var(--verde-050, #f3fbf9)); }

.uni-trilha-topo { display: flex; align-items: center; gap: .625rem; }
.uni-trilha-icone { font-size: 1.5rem; inline-size: 2.875rem; block-size: 2.875rem; display: grid; place-items: center; background: var(--tcol, var(--verdeMedio)); color: #fff; border-radius: .6875rem; flex: none; }
.uni-trilha-titulo { font-weight: 700; font-size: .97rem; color: var(--verde-900); line-height: 1.2; }
.uni-trilha-desc { font-size: .72rem; color: var(--bs-secondary-color); line-height: 1.45; flex: 1; }
.uni-trilha-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .6875rem; color: var(--verdeEscuro); font-weight: 700; }
.uni-trilha-meta .min { font-weight: 700; color: var(--verdeEscuro); }

.uni-card-track { display: block; block-size: 6px; border-radius: 99px; background: #e8efed; overflow: hidden; }
.uni-card-track i { display: block; block-size: 100%; border-radius: 99px; background: var(--tcol, var(--verdeMedio)); }

.uni-aprovado { display: inline-flex; align-items: center; gap: .375rem; background: #eafaf1; color: #1a6b42; border: 1px solid #b6e6cb; border-radius: 20px; padding: .1875rem .6875rem; font-size: .6875rem; font-weight: 800; }

/* Usado pela Universidade E pela Biblioteca — por isso mora aqui, e não numa
   das duas. No protótipo ele é definido só no CSS da Universidade e usado na
   Biblioteca, que só funciona porque as duas telas compartilham um `<style>`. */
.uni-back { display: inline-flex; align-items: center; gap: .375rem; font-size: .78rem; color: var(--verdeEscuro); font-weight: 700; text-decoration: none; }
.uni-back:hover { color: var(--verde-900); }

/* --- Biblioteca --- */
.bib-hero { padding-block-end: 1.125rem; border-block-end: 1px solid var(--bs-border-color); margin-block-end: 1.375rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bib-hero h1 { font-size: 1.75rem; color: var(--verde-900); letter-spacing: -.5px; margin-block-end: .375rem; }
.bib-hero p { font-size: .875rem; color: var(--bs-secondary-color); max-inline-size: 42rem; line-height: 1.55; margin-block-end: 0; }

.bib-sec-title { font-size: .8125rem; font-weight: 700; color: var(--verdeEscuro); letter-spacing: .05em; text-transform: uppercase; margin: 1.5rem 0 .875rem; padding-block-end: .5rem; border-block-end: 1px solid var(--bs-border-color); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bib-sec-title .badge { font-size: .625rem; font-weight: 800; background: var(--verde-050, #f1f8f7); color: var(--verdeEscuro); padding: .1875rem .5625rem; border-radius: .5625rem; letter-spacing: .04em; text-transform: none; }

.bib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 1.125rem; margin-block-end: .875rem; }
.bib-card { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .875rem; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.bib-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -12px rgb(10 40 38 / .25); }

/* A capa é 3/4 como no protótipo, mas a cor vem da CATEGORIA — ver o comentário
   no topo da `Biblioteca/Index.cshtml`. */
.bib-capa { aspect-ratio: 3 / 4; color: #fff; display: grid; place-items: center; position: relative; padding: 1.125rem; }
.bib-capa-livro { background: linear-gradient(135deg, var(--verde-900), var(--verdeEscuro)); }
.bib-capa-ebook { background: linear-gradient(135deg, var(--verdeEscuro), var(--verdeMedio)); }
.bib-capa-artigo { background: linear-gradient(135deg, #1B3A5C, var(--verdeEscuro)); }

.bib-capa-ic { font-size: 3rem; line-height: 1; opacity: .95; color: #fff; }
.bib-capa-pages { position: absolute; inset-block-end: .625rem; inset-inline-end: .75rem; font-size: .65rem; font-weight: 700; background: rgb(0 0 0 / .25); padding: .1875rem .5625rem; border-radius: .6875rem; }
.bib-capa-tipo { position: absolute; inset-block-start: .625rem; inset-inline-start: .75rem; font-size: .6rem; font-weight: 800; background: rgb(255 255 255 / .22); padding: .1875rem .5625rem; border-radius: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.bib-capa-destaque { position: absolute; inset-block-start: .625rem; inset-inline-end: .75rem; font-size: .6rem; font-weight: 800; background: #fde6a5; color: #7a4a12; padding: .1875rem .5625rem; border-radius: .6875rem; letter-spacing: .06em; text-transform: uppercase; }

.bib-info { padding: .875rem 1rem 1rem; display: flex; flex-direction: column; gap: .375rem; flex: 1; }
.bib-titulo { font-weight: 700; font-size: .95rem; color: var(--verde-900); line-height: 1.2; margin: 0; }
.bib-autor { font-size: .6875rem; color: var(--bs-secondary-color); font-weight: 700; line-height: 1.3; margin: 0; }
.bib-desc { font-size: .72rem; color: var(--bs-body-color); line-height: 1.5; flex: 1; margin: 0; }
.bib-tags { display: flex; gap: .25rem; flex-wrap: wrap; margin: .5rem 0 0; }
.bib-tag { font-size: .6rem; font-weight: 700; color: var(--verdeEscuro); background: var(--verde-050, #f1f8f7); padding: .125rem .4375rem; border-radius: .5rem; }
.bib-actions { display: flex; gap: .375rem; align-items: center; margin-block-start: .75rem; flex-wrap: wrap; }

.bib-btn { padding: .5rem .75rem; border-radius: .4375rem; font-size: .72rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .3125rem; }
.bib-btn.primary { background: linear-gradient(135deg, var(--verdeEscuro), var(--verde-900)); color: #fff; flex: 1; }
.bib-btn.primary:hover { color: #fff; filter: brightness(1.08); }
.bib-fonte { font-size: .65rem; color: var(--bs-secondary-color); font-weight: 600; }

/* --- submenus por categoria na sidebar (§5.2, 02/09/2026) ----------------------
   Fundamentos · Projetos Financeiros · Transições · Estágios da Vida.
   O cabeçalho é um `<button>` do `collapse` do Bootstrap: teclado e leitor de tela
   vêm de graça, e a seta gira por CSS a partir do `.collapsed` que ele mantém. */
.sr-cat { margin-block-end: .25rem; }

/* `gap: 1px` é do protótipo: os itens de um mesmo grupo ficam colados, e o respiro entre grupos
   vem do `.sr-cat`. Sem isso, quinze itens com folga individual empurram os últimos para fora
   da tela num notebook. */
.sr-cat .nav { gap: 1px; }

/* A linha entre grupos, como no protótipo — ela substitui o espaço em branco que separaria os
   blocos, e ocupa um pixel em vez de dez. */
/* ⚠️ `--linha` E NÃO `--bs-border-color`. O cinza do Bootstrap (#dee2e6) é neutro-azulado e
   destoa de toda borda do produto, que é o verde lavado do §5.1 — parte do "as bordas estão
   diferentes" de 02/09/2026. */
.sr-cat + .sr-cat { border-block-start: 1px solid var(--linha); padding-block-start: .25rem; }

/* ⚠️ SÓ O QUE É DE BOTÃO. A tipografia, a cor e o traço vêm da regra que este cabeçalho
   COMPARTILHA com o `.sr-grupo-titulo` (lá em cima, junto do resto do menu) — repeti-las aqui
   criaria dois donos do mesmo desenho, e a segunda venceria a primeira em silêncio no dia em que
   alguém mexesse só numa delas. Aqui fica o que existe por ser `<button>` e não `<h2>`. */
.sr-cat-cabeca {
  inline-size: 100%;
  border: 0;
  background: none;
  /* ⚠️ SEM `padding` PRÓPRIO. Ele vinha daqui (`padding-block: .375rem`) e vencia, por ser a
     regra mais abaixo, o `padding` que o `.sr-grupo-titulo` traz — os cabeçalhos de grupo e os
     de categoria ficavam com folgas diferentes numa mesma coluna. Continua valendo: a folga e a
     altura mínima são de lá, e de lá só. */
  /* `.5625rem` = os 9px do `.nav-link`, e não os 8px de antes. A categoria mora DENTRO da caixa
     de um grupo, empilhada com itens de menu — um raio próprio a fazia destoar dos vizinhos
     imediatos. Medido na tela em 15/09/2026. */
  border-radius: .5625rem;
}

.sr-cat-cabeca:hover { background-color: var(--verde-050); }
.sr-cat-nome { flex: 1; text-align: start; }

/* A seta aponta para BAIXO quando aberto e para a direita quando fechado — o
   Bootstrap põe `.collapsed` no botão enquanto o painel está fechado. */
.sr-cat-seta { transition: transform .18s; font-size: .75rem; }
.sr-cat-cabeca.collapsed .sr-cat-seta { transform: rotate(-90deg); }

/* O ícone herda a cor do cabeçalho: sem isto a regra `.bi { color: var(--verdeEscuro) }`
   valeria por acaso — e deixaria de valer no dia em que o cabeçalho mudar de cor. */
.sr-cat-cabeca .bi { color: inherit; }

.sr-cat-item { display: flex; align-items: center; gap: .5rem; }

/* O selo do protótipo. O fundo é `--cinza-050` — o mesmo cinza-verde lavado, derivado da
   `--tinta-suave` em vez de escrito à mão, para acompanhar o dia em que a escala mudar. */
.sr-cat-pct {
  flex: none;
  /* 10,5px do protótipo. */
  font-size: .65625rem;
  font-weight: 700;
  color: var(--tinta-suave);
  background: var(--cinza-050);
  padding: .125rem .375rem;
  border-radius: .3125rem;
}

/* No item ATIVO o selo precisa de contraste próprio: o fundo do `.nav-link.active`
   é escuro, e o cinza padrão do selo sumiria dentro dele. */
.sr-cat-item.active .sr-cat-pct { background: rgb(255 255 255 / .22); color: #fff; }

/* ⚠️ DENTRO DO MESMO `@media` DAS OUTRAS REGRAS DE RECOLHIDO, e não solto.
   A classe `.sr-menu-recolhido` mora no `<body>` em qualquer largura; abaixo de lg
   a sidebar não é uma coluna estreita, é uma GAVETA que abre inteira. Sem a média,
   estas três linhas esconderiam os cabeçalhos de categoria no celular — onde há
   espaço de sobra — e a pessoa veria uma lista de quinze módulos sem divisão. */
@media (min-width: 992px) {
  /* Com o menu recolhido só o ícone cabe: o cabeçalho da categoria sai, e o grupo
     fica sempre aberto — recolhido, os grupos fechados esconderiam os ícones e o
     menu viraria uma coluna vazia. */
  .sr-menu-recolhido .sr-cat-cabeca { display: none; }

  /* ⚠️⚠️ TODO `.collapse` DO CORPO DO MENU, e não só o de dentro do `.sr-cat`. Era
     `.sr-cat .collapse`, e isso bastava enquanto os três grupos ("Gestão",
     "Administração", "Meu planejamento") eram rótulos que não fechavam. Desde
     15/09/2026 eles são sanfonas, e os painéis deles NÃO estão dentro de um
     `.sr-cat` — o de "Meu planejamento" CONTÉM os `.sr-cat`.

     Sem esta linha havia um beco sem saída de verdade: fechar "Gestão" e em seguida
     recolher o menu escondia Clientes, CRM, Financeiro e Alertas — e o cabeçalho que
     os reabriria acabara de virar `display: none` pela regra acima. O jeito de sair
     seria expandir o menu de novo, adivinhando que era isso.

     O `.offcanvas-body` recorta o alcance: o rodapé da conta é IRMÃO do corpo (ver o
     `_Sidebar.cshtml`) e tem `dropdown`, não `collapse` — mas escrever o escopo agora
     é mais barato que descobrir, um dia, que uma gaveta de lá nasce aberta por causa
     desta linha. */
  .sr-menu-recolhido .sr-sidebar .offcanvas-body .collapse { display: block !important; }
}

/* --- guias da Loja (§7.4, 02/09/2026) ------------------------------------------
   As guias do Bootstrap com a cor da marca. `flex-wrap` porque são seis categorias:
   em 360px elas quebram em linhas em vez de sumirem para fora da tela. */
/* ⚠️ ESTE BLOCO FOI PODADO EM 03/09/2026, E A PODA É O CONSERTO. Ele desenhava a guia da Loja
   como ABA DE PASTA (raio só em cima, sublinhado no ativo) — o desenho que o Bootstrap traz e que
   o modelo não usa. Quando o kit base da E31a deu ao `.nav-tabs` a TIRA branca com a pílula em
   degradê, os dois passaram a disputar: `.sr-conteudo .nav-tabs .nav-link` (0,3,0) vence
   `.sr-loja-guias .nav-link` (0,2,0) na cor, no corpo e no raio, mas `.sr-loja-guias` (0,1,0)
   perdia o `flex-wrap` para a regra do kit (0,2,0). Resultado: metade de cada desenho, que é pior
   que qualquer um dos dois inteiro.
   Ficou só o que é da Loja e não da tira: o espaço entre as guias e o ícone ao lado do nome. */
.sr-loja-guias .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

/* A contagem por categoria. Fundo próprio para não se confundir com o nome — e
   contraste próprio na guia ativa, onde o cinza padrão ficaria fraco. */
.sr-loja-conta {
  font-size: .6875rem;
  font-weight: 700;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  padding: .0625rem .375rem;
  border-radius: .375rem;
}

.sr-loja-guias .nav-link.active .sr-loja-conta {
  background: var(--verde-050);
  color: var(--verdeEscuro);
}

/* --- aviso de navegação (§5.4, 02/09/2026) --------------------------------------
   A caixa de "Carregando…" que aparece entre uma página e a próxima. Desenho do Igor,
   com as cores vindas dos tokens do §5.1 — o original citava `--color-verde-medio` e
   `--color-verde-escuro`, que não existem nesta folha.

   ⚠️ `z-index: 1085` NÃO É NÚMERO SOLTO. Ele fica acima do modal do Bootstrap (1055) e do
   offcanvas (1045), porque um clique dentro de um modal ou da gaveta do menu também navega e
   a caixa precisa ser vista; e ABAIXO dos toasts (1090), para um erro nunca ficar escondido
   atrás de um aviso de espera. */
#sr-carregando {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  min-inline-size: 13.125rem;
  min-block-size: 4.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .875rem;
  padding: .875rem;
  background-color: #fff;
  border: 2px solid var(--verdeMedio);
  border-radius: .5rem;
  box-shadow: 0 0 10px rgb(0 0 0 / .35);
  z-index: 1085;
}

#sr-carregando .spinner-border {
  inline-size: 2.1875rem;
  block-size: 2.1875rem;
  color: var(--verdeEscuro);
  flex: none;
}

.sr-carregando-texto {
  font-size: 1rem;
  font-weight: 500;
  color: var(--verdeEscuro);
}

/* --- Cofre de Documentos (§8.7, 02/09/2026) -------------------------------------
   O desenho do `Workspace.html`: trilha em pílulas, três números, grade de cartões e
   um estado vazio desenhado. As cores saem dos tokens do §5.1 — o protótipo usa
   `--ink-1`, `--muted` e `#fff6e9`, que não existem nesta folha. */
.sr-cofre-cabeca { margin-block-end: 1rem; }

.sr-cofre-sobrancelha {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-block-end: .25rem;
}

.sr-cofre-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .875rem;
  flex-wrap: wrap;
  margin-block-end: .875rem;
}

/* A trilha do modelo: pílulas, e não o `breadcrumb` do Bootstrap. O separador vem do
   `::before`, e não de um `<li>` com "›" dentro — um item de lista que não é item. */
.sr-cofre-trilha {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .8125rem;
}

.sr-cofre-trilha li { display: flex; align-items: center; gap: .25rem; }

.sr-cofre-trilha li + li::before {
  content: "›";
  color: var(--tinta-suave);
  font-weight: 700;
}

.sr-cofre-degrau {
  display: inline-block;
  padding: .3125rem .5625rem;
  border-radius: .5rem;
  color: var(--verde-700);
  font-weight: 700;
  text-decoration: none;
}

.sr-cofre-degrau:hover { background-color: var(--verde-050); color: var(--verde-900); }
.sr-cofre-degrau.atual { color: var(--verde-900); background-color: var(--verde-050); }

.sr-cofre-botoes { display: flex; gap: .5625rem; flex-wrap: wrap; align-items: center; }
.sr-cofre-busca-inline { display: flex; gap: .375rem; align-items: center; }
.sr-cofre-busca-inline .form-control { inline-size: 12rem; }
.sr-cofre-busca { margin-block-end: 1rem; }

/* Os dois botões do modelo. Não são `.btn` do Bootstrap porque o desenho é outro —
   raio de 10px, peso 700 e o degradê da marca no primário. */
.sr-cofre-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: .8125rem;
  padding: .625rem 1rem;
  border-radius: .625rem;
  min-block-size: var(--sr-toque-min);
  transition: filter .15s, background-color .15s;
}

.sr-cofre-btn.principal {
  background: linear-gradient(135deg, var(--verdeEscuro), var(--verdeMedio));
  color: #fff;
  box-shadow: 0 6px 16px -8px rgb(14 124 123 / .6);
}

.sr-cofre-btn.principal:hover { filter: brightness(1.07); }
.sr-cofre-btn.principal .bi { color: #fff; }

.sr-cofre-btn.fantasma {
  background-color: #fff;
  color: var(--verdeEscuro);
  border: 1.5px solid var(--verde-300);
}

.sr-cofre-btn.fantasma:hover { background-color: var(--verde-050); }

/* Os painéis que os dois botões abrem — os mesmos formulários de sempre, agora no topo. */
.sr-cofre-painel {
  background-color: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--sr-raio);
  padding: 1rem;
  margin-block-end: .875rem;
}

.sr-cofre-numeros { display: flex; gap: .75rem; flex-wrap: wrap; margin-block-end: 1rem; }

.sr-cofre-numero {
  background-color: #fff;
  border: 1px solid var(--linha);
  border-radius: .6875rem;
  padding: .625rem 1rem;
  min-inline-size: 6rem;
}

.sr-cofre-numero b {
  display: block;
  font-family: var(--sr-ff-display, inherit);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--verde-900);
  line-height: 1;
}

.sr-cofre-numero span { font-size: .6875rem; color: var(--tinta-suave); font-weight: 600; }

/* `auto-fill` com piso de 260px é o do modelo: em telas largas a grade enche, e num
   celular ela vira uma coluna sem nenhuma media query. */
.sr-cofre-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
  gap: .75rem;
}

.sr-cofre-cartao {
  display: flex;
  align-items: center;
  gap: .75rem;
  background-color: #fff;
  border: 1px solid var(--linha);
  border-radius: .75rem;
  padding: .8125rem .875rem;
  transition: box-shadow .15s, border-color .15s;
}

.sr-cofre-cartao:hover {
  box-shadow: 0 8px 22px -14px rgb(0 0 0 / .25);
  border-color: var(--verde-300);
}

/* ⚠️ O ÍCONE DA PASTA É VERDE-CLARO E O DO ARQUIVO É CINZA, e a diferença faz trabalho:
   numa grade em que pasta e arquivo têm a mesma forma, a cor do quadradinho é o que diz,
   antes de ler o nome, se aquilo abre ou baixa. O modelo usa âmbar na pasta; âmbar não é
   token desta identidade, e o verde-claro cumpre o mesmo papel. */
.sr-cofre-icone {
  flex: none;
  inline-size: 2.625rem;
  block-size: 2.625rem;
  display: grid;
  place-items: center;
  border-radius: .625rem;
  font-size: 1.25rem;
  background-color: var(--cinza-050);
}

.sr-cofre-icone .bi { color: var(--tinta-icone); }
.sr-cofre-icone.pasta { background-color: var(--verdeClaro); }
.sr-cofre-icone.pasta .bi { color: var(--verde-900); }

.sr-cofre-corpo {
  flex: 1;
  min-inline-size: 0;
  display: block;
  text-decoration: none;
  color: inherit;
}

.sr-cofre-nome {
  display: block;
  font-size: .84375rem;
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-cofre-corpo:hover .sr-cofre-nome { color: var(--verde-900); text-decoration: underline; }

.sr-cofre-meta {
  display: block;
  font-size: .6875rem;
  color: var(--tinta-suave);
  font-weight: 600;
  margin-block-start: .125rem;
}

.sr-cofre-acoes { display: flex; gap: .25rem; flex: none; }
.sr-cofre-acoes form { margin: 0; }

/* ⚠️ 32px, E NÃO OS 44px DO §5.2 — e a exceção é consciente. Três botões de 44px ao lado
   de um nome de arquivo não cabem num cartão de 260px, e o cartão inteiro já é um alvo
   grande para a ação principal (abrir a pasta, baixar o arquivo). Renomear e excluir são
   ações secundárias, e no celular a grade vira coluna, o que devolve o espaço. */
.sr-cofre-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 0;
  border-radius: .4375rem;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  opacity: .7;
  transition: opacity .15s, background-color .15s;
}

.sr-cofre-acao:hover { opacity: 1; background-color: var(--verde-050); }
.sr-cofre-acao .bi { color: inherit; }
.sr-cofre-acao.perigo:hover { background-color: color-mix(in srgb, var(--vermelho) 10%, white); color: var(--vermelho); }

.sr-cofre-renomear {
  display: flex;
  gap: .375rem;
  padding: .625rem .875rem;
  border: 1px solid var(--linha);
  border-radius: .75rem;
  margin-block-start: .25rem;
  background-color: var(--fundo);
}

/* `1 / -1` faz o vazio ocupar a grade inteira, e não uma célula de 260px com o texto
   espremido no canto. */
.sr-cofre-vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1.25rem;
  color: var(--tinta-suave);
}

.sr-cofre-vazio-ic { font-size: 2.75rem; opacity: .5; color: var(--verde-300); }
.sr-cofre-vazio-t { font-size: .9375rem; font-weight: 700; color: var(--tinta); margin-block: .625rem 0; }
.sr-cofre-vazio-d { font-size: .78125rem; margin-block-start: .25rem; }

/* =============================================================================
   KIT BASE — os primitivos do Bootstrap falando a língua do modelo
   Etapa E31, bloco 0 · 03/09/2026 · ESPEC §5.2
   =============================================================================
   ⚠️ POR QUE ESTA SEÇÃO EXISTE, E POR QUE ELA É A DE MAIOR ALCANCE DA E31.
   Medido em 03/09/2026: **45 dos 82 arquivos `.cshtml` não têm uma única classe própria** —
   desenham inteiramente em `.card`, `.btn`, `.table`, `.form-control`, `.nav-tabs`, `.badge`,
   `.list-group`, `.accordion` e `.modal`. E, até esta seção, o `site.css` tocava `.card` em UMA
   linha (`border-color`) e não tocava nenhum dos outros. Ou seja: a casca (menu, topbar, widget)
   já falava a língua do modelo e o miolo de 45 telas continuava Bootstrap de fábrica — raio
   único, sem sombra, cabeçalho de tabela cinza, campo branco.

   A alternativa era reescrever tela por tela. Esta seção troca o vocabulário compartilhado uma
   vez só: nenhum `.cshtml` muda, e as 45 telas mudam juntas. É por isso que ela vem antes dos
   blocos por tela — o que sobrar depois dela é diferença REAL de estrutura, não de aparência.

   Regra da casa mantida: nenhuma cor literal aqui. Tudo sai de `tokens.css`.
   ============================================================================= */

/* --- a folha de papel: o `.group` do modelo ---------------------------------
   #fff · borda `--linha` · raio 14px · sombra baixa · 22px 24px de respiro. */
.card {
  border-color: var(--linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  background-color: #fff;
}

.card-body { padding: 1.375rem 1.5rem; }

/* O cabeçalho do modelo não é uma faixa cinza: é um título com um traço embaixo. O cinza do
   Bootstrap (`--bs-tertiary-bg`) cortava o cartão em dois blocos de peso igual. */
.card-header {
  background-color: transparent;
  border-block-end: 1px solid var(--linha-2);
  padding: 1.125rem 1.5rem .875rem;
  font-weight: 800;
  font-size: .875rem;
  color: var(--verde-900);
}

.card-header .bi { color: var(--verdeMedio); }

.card-footer {
  background-color: transparent;
  border-block-start: 1px solid var(--linha-2);
  padding: .875rem 1.5rem;
}

/* ⚠️ O PONTO VERDE ANTES DO TÍTULO DO CARTÃO FOI REMOVIDO EM 24/09/2026, a pedido do Igor:
   "retira também essa bolinha de todos os lugares que encontrar... não gosto dessa bolinha
   solta". Ele vinha do modelo, que repete a marca em toda seção.

   Era UMA regra só, e é por isso que sai em uma linha: `.card-header:not(.d-flex)::before` e o
   irmão no `.card-title`. Nenhuma view escrevia o ponto à mão — quem quiser trazê-lo de volta
   reabre este trecho no histórico do arquivo.

   A história do `:not(.d-flex)` fica registrada porque explica um defeito real, e não o enfeite:
   em cabeçalho `d-flex justify-content-between` o pseudo-elemento entrava como primeiro item de
   flex, e o `between` distribuía TRÊS itens — o ponto colava na borda e o título ia para o meio.
   Qualquer `::before` decorativo que alguém acrescente ali no futuro cai na mesma armadilha. */

.card-title {
  font-weight: 800;
  font-size: .875rem;
  color: var(--verde-900);
}

/* --- botões: o degradê e o raio de 10px ------------------------------------
   As cores já vinham da ponte `--bs-btn-*` (conserto de 01/09). O que faltava era a FORMA:
   o modelo usa 13px/700 num retângulo de 10px de raio, e o primário é um degradê com sombra
   projetada — não um bloco chapado. */
.btn {
  --bs-btn-border-radius: var(--raio-sm);
  font-weight: 700;
  font-size: .8125rem;
  padding: .625rem 1rem;
}

.btn-sm {
  --bs-btn-border-radius: var(--raio-xs);
  font-size: .75rem;
  padding: .4375rem .75rem;
}

.btn-primary {
  background-image: linear-gradient(135deg, var(--verdeEscuro), var(--verdeMedio));
  border-color: var(--verdeEscuro);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--verdeEscuro) 60%, transparent);
}

/* `filter` em vez de trocar as paradas do degradê: uma linha, e o degradê continua sendo o
   mesmo objeto — sem risco de as duas versões divergirem. */
.btn-primary:hover,
.btn-primary:focus-visible { filter: brightness(1.07); }

.btn-primary:active { filter: brightness(.94); }

.btn-outline-primary,
.btn-outline-secondary { border-width: 1.5px; }

/* --- campos: o par "você digita" × "o sistema calculou" ---------------------
   ⚠️ ESTE PAR NÃO É O DO MODELO, E FOI DECIDIDO ASSIM. O `Workspace.html` pinta o campo
   editável de creme (#fffdf3) com borda âmbar (#ead9a0) e texto azul (#1d4ed8). Propus copiar;
   **o Igor disse não em 03/09/2026**, e a §5.1 continua valendo inteira: âmbar e azul são outro
   matiz e não saem dos cinco tokens contratuais.

   O que a distinção precisava fazer continua sendo feito, com a paleta da casa: o campo editável
   é BRANCO com borda de 1,5px em verde claro — sobre o `--fundo` levemente esverdeado da página
   ele avança, que é o papel que o creme cumpria no modelo —, e o calculado recai no cinza-verde
   `--cinza-050` com texto pesado, que é o `#eef4f3` do modelo e ESSE é derivável. A lei 7 (campo
   calculado exibe origem) ganha o reforço de cor que ela só tinha em texto.

   O que se perde em relação ao exemplo: o campo do modelo tem uma temperatura quente que o nosso
   não tem. É a diferença consciente entre copiar o desenho e manter a identidade. */
.form-control,
.form-select {
  background-color: #fff;
  border: 1.5px solid var(--verde-300);
  color: var(--preto);
  border-radius: var(--raio-xs);
  font-size: .8125rem;
  font-weight: 600;
  padding: .5rem .6875rem;
}

.form-control::placeholder { color: var(--tinta-suave); font-weight: 500; }

/* Busca, filtro e caixa de comando NÃO são campo de dado do cliente: o realce verde ali promete
   um dado que não existe. Elas ficam com a borda neutra do produto. */
.sr-campo-neutro,
.form-control[type="search"] {
  border-color: var(--linha);
}

/* O campo que o sistema preencheu: cinza-verde, mais pesado, sem convite a digitar. */
.form-control[readonly],
.form-control:disabled,
.form-select:disabled,
.form-control-plaintext {
  background-color: var(--cinza-050);
  border-color: var(--linha);
  color: var(--verde-900);
  font-weight: 700;
}

.form-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--tinta);
  margin-block-end: .3125rem;
}

.form-text { font-size: .6875rem; color: var(--tinta-suave); }

/* O rótulo de uma opção (caixa ou botão de escolha) é texto de formulário, não de leitura: no
   modelo ele tem 12,5px e peso 600, e vem no mesmo tom dos rótulos de campo. Sem esta regra ele
   herda 1rem do corpo e fica maior que o rótulo do campo que o encima — visto na cobaia, no
   grupo "Objetivos declarados" da Anamnese. */
.form-check-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--tinta);
}

.input-group-text {
  background-color: var(--verde-050);
  border: 1.5px solid var(--verde-300);
  color: var(--verdeEscuro);
  font-weight: 700;
  font-size: .8125rem;
}

/* ⚠️ O BOTÃO DENTRO DE UM GRUPO É AFIXO DE CAMPO, E NÃO BOTÃO. O `.btn` traz 1px de borda e o
   `.form-control` do kit tem 1,5px: encostados num `.input-group`, os dois desenham uma costura
   com degrau — a borda muda de espessura no meio da caixa. Aparece no olho da senha do Login, que
   é a primeira tela que qualquer um vê. Visto na cobaia em 03/09. Aqui ele adota a borda do campo
   ao lado; a cor de texto e de fundo continuam sendo as do próprio botão. */
.input-group > .btn {
  border-width: 1.5px;
  border-color: var(--verde-300);
}

/* --- tabelas: a moldura do modelo ------------------------------------------
   No modelo a tabela mora dentro de uma caixa branca com borda e raio (`.table-wrap`), cabeçalho
   em degradê claro e totais em faixa verde. Aqui a moldura entra no `.table-responsive`, que já
   é o invólucro que TODAS as telas usam (§5.2) — nenhum `.cshtml` precisa mudar. */
.table-responsive {
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  background-color: #fff;
  overflow-x: auto;
}

.table-responsive > .table { margin-block-end: 0; }

.table {
  font-size: .78125rem;
  --bs-table-border-color: var(--linha-2);
}

.table > thead {
  background-image: linear-gradient(180deg, var(--verde-050), #fff);
}

.table > thead th {
  font-size: .71875rem;
  font-weight: 700;
  color: var(--verdeEscuro);
  border-block-end: 1px solid var(--linha);
  padding: .5625rem .625rem;
  white-space: nowrap;
}

.table > tbody td {
  padding: .3125rem .5rem;
  vertical-align: middle;
}

.table > tbody tr:last-child td { border-block-end: 0; }

/* Números alinhados à direita com dígitos de largura fixa: sem isso a coluna de dinheiro
   "dança" a cada linha, que é o defeito que mais denuncia tabela de sistema. */
/* ⚠️ `nowrap` faz parte do alinhamento, e não é capricho. Sem ele, "R$ 4.200,00" numa coluna
   estreita quebra em "R$" / "4.200,00" — duas linhas para um número só, e a linha da tabela
   cresce. Quem paga a conta é a rolagem horizontal do `.table-responsive`, que já existe (§5.2) e
   é o que o modelo faz: a tabela rola, o número não se parte. Visto na cobaia em 03/09, na coluna
   "Média" do fluxo. */
.table .num,
.table td.text-end,
.table th.text-end {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table > tfoot td,
.table tr.sr-totais td {
  font-weight: 800;
  background-color: var(--verde-050);
  color: var(--verde-900);
  border-block-start: 2px solid var(--verde-400);
}

/* O campo DENTRO da tabela é mais miúdo que o campo de formulário: no modelo ele tem 1px de
   borda e metade do respiro, porque numa grade de 9 colunas o campo de formulário empilha altura
   e a linha vira um bloco. Mesma linguagem, uma escala abaixo. */
.table .form-control,
.table .form-select {
  border-width: 1px;
  padding: .3125rem .4375rem;
  font-size: .78125rem;
}

/* --- abas: a barra branca com a pílula em degradê --------------------------
   O `.nav-tabs` do Bootstrap é a aba de pasta com borda embaixo; o modelo usa uma barra branca
   com raio, e a aba ativa é uma pílula em degradê. As duas variantes recebem o mesmo desenho
   porque as telas usam ora uma, ora outra. */
/* ⚠️ ESCOPADO NO `.sr-conteudo`, E ESTA É A PARTE IMPORTANTE. O `_Sidebar.cshtml` também é um
   `.nav.nav-pills.flex-column` — sem o escopo, estas regras embrulhariam o MENU numa caixa branca
   com sombra e trocariam o item ativo recém-acertado em 02/09 pela pílula de aba. O menu mora
   fora do `.sr-conteudo`; as abas de página moram dentro. */
.sr-conteudo .nav-tabs,
.sr-conteudo .nav-pills {
  display: flex;
  /* ⚠️ `nowrap` + rolagem, e NÃO a quebra de linha do Bootstrap. Medido a 360px em 03/09: com
     `flex-wrap: wrap` (o padrão de `.nav-tabs`) as cinco abas do Financeiro viravam duas linhas
     e a tira deixava de ser uma tira. O modelo mantém uma linha e rola — e é o mesmo desenho que
     o `.sr-abas` da Anamnese já usa aqui desde a E8. Uma tira, dois nomes de classe: quem escreve
     `.nav-tabs` do Bootstrap e quem escreve `.sr-abas` chega no mesmo lugar. */
  flex-wrap: nowrap;
  gap: .1875rem;
  padding: .3125rem;
  background-color: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-sm);
  margin-block-end: 1.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.sr-conteudo .nav-tabs .nav-link,
.sr-conteudo .nav-pills .nav-link {
  flex: none;
  border: 0;
  border-radius: var(--raio-xs);
  padding: .5625rem .875rem;
  font-size: .78125rem;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}

.sr-conteudo .nav-tabs .nav-link:hover,
.sr-conteudo .nav-pills .nav-link:hover {
  background-color: var(--verde-050);
  color: var(--verde-900);
}

.sr-conteudo .nav-tabs .nav-link.active,
.sr-conteudo .nav-pills .nav-link.active {
  background-image: linear-gradient(135deg, var(--verdeEscuro), var(--verdeMedio));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--verdeEscuro) 55%, transparent);
}

.sr-conteudo .nav-tabs .nav-link.active .bi,
.sr-conteudo .nav-pills .nav-link.active .bi { color: #fff; }

/* --- selos ------------------------------------------------------------------ */
.badge {
  font-size: .6875rem;
  font-weight: 700;
  padding: .1875rem .625rem;
  border-radius: 1.25rem;
}

/* O selo neutro do modelo é uma pílula verde-clara com borda, não um retângulo cinza. */
.badge.text-bg-light,
.badge.text-bg-secondary {
  background-color: var(--verde-050) !important;
  color: var(--verdeEscuro) !important;
  border: 1px solid color-mix(in srgb, var(--verdeMedio) 25%, white);
}

/* --- avisos: as quatro `.note` do modelo ------------------------------------ */
.alert {
  border-radius: var(--raio-sm);
  padding: .8125rem 1rem;
  font-size: .8125rem;
  border-width: 1px;
}

.alert-info,
.alert-secondary {
  background-color: var(--verde-050);
  border-color: color-mix(in srgb, var(--verdeMedio) 25%, white);
  color: var(--verde-900);
}

/* --- listas, sanfona, modal, progresso, menu ------------------------------- */
.list-group { border-radius: var(--raio-md); }

.list-group-item {
  border-color: var(--linha-2);
  padding: .75rem 1rem;
  font-size: .8125rem;
}

.list-group-item-action:hover { background-color: var(--verde-050); }

.accordion {
  --bs-accordion-border-color: var(--linha);
  --bs-accordion-border-radius: var(--raio-md);
  --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-button {
  font-weight: 700;
  font-size: .875rem;
  color: var(--verde-900);
  background-color: #fff;
}

.accordion-button:not(.collapsed) {
  background-color: var(--verde-050);
  color: var(--verde-900);
  box-shadow: inset 0 -1px 0 var(--linha);
}

.modal-content {
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg);
}

.modal-header {
  border-block-end: 1px solid var(--linha-2);
  padding: 1.125rem 1.5rem;
}

.modal-title { font-weight: 800; font-size: .9375rem; color: var(--verde-900); }

.modal-body { padding: 1.25rem 1.5rem; }

.modal-footer { border-block-start: 1px solid var(--linha-2); padding: .875rem 1.5rem; }

.progress {
  block-size: .375rem;
  border-radius: .25rem;
  background-color: var(--cinza-050);
}

.progress-bar { background-image: linear-gradient(90deg, var(--verdeEscuro), var(--verdeMedio)); }

.dropdown-menu {
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra);
  padding: .375rem;
}

.dropdown-item {
  border-radius: var(--raio-xs);
  font-size: .8125rem;
  font-weight: 600;
  padding: .5rem .625rem;
}

.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--verde-050); color: var(--verde-900); }

.breadcrumb { font-size: .8125rem; font-weight: 600; }

.breadcrumb-item a { color: var(--verdeEscuro); }

/* --- respiro do rodapé ------------------------------------------------------
   O FAB "Meu Planejador" (§7.5) mora no canto inferior direito e flutua sobre a página. Sem esta
   folga ele cobre a última linha de toda tela que rola até o fim — o modelo reserva 110px. */
.sr-conteudo { padding-block-end: 7rem; }

/* =============================================================================
   KIT BASE, parte 2 — o TÍTULO da página e o CARTÃO DE INDICADOR
   Etapa E31a · 03/09/2026 · ESPEC §5.2
   =============================================================================
   Duas diferenças que aparecem em TODA tela e que nenhuma delas pode consertar sozinha.

   1) O TÍTULO. O modelo dá a cada página um título de 34px na Fraunces. Nós temos 45 páginas com
      `<h1>`, e **29 delas escrevem `class="h4"`** — ou seja, o título da tela sai menor que o
      título de um cartão. Só o Início e o Tutorial montam o `.sr-pagina-cabeca` completo. Em vez
      de editar 45 arquivos, o `h1` filho direto do conteúdo passa a ter o desenho do modelo, e o
      `.h4`/`.h3` do Bootstrap perde por especificidade (0,1,1 contra 0,1,0).

      ⚠️ `>` E NÃO DESCENDENTE, de propósito: um `<h1>` dentro de um cartão, de um modal ou de um
      relatório impresso não é título de página e não pode crescer para 34px. Filho direto do
      `.sr-conteudo` é exatamente o que o `@RenderBody()` produz — o título da tela, e só ele.

   2) O CARTÃO DE INDICADOR. Os módulos repetem o mesmo bloco 30 vezes: `.card > .card-body` com
      um rótulo pequeno, o número e uma legenda. No modelo esse cartão tem um traço verde no topo
      e o número na Fraunces; aqui ele saía como texto de corpo em cartão branco. O gancho não é
      utilitário — é o `data-sr-indicador` que o autosave já usa (§4.4) — com as duas variantes de
      tamanho que as parciais usam onde o atributo não existe.
   ============================================================================= */

.sr-conteudo > h1 {
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.15rem);
  color: var(--verde-900);
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* A linha de apoio logo abaixo do título: no modelo ela é cinza-tinta, um pouco maior que o corpo
   e com medida limitada — texto de 90 caracteres por linha cansa antes de informar. */
.sr-conteudo > h1 + p {
  color: var(--tinta);
  font-size: .9375rem;
  max-inline-size: 42rem;
  margin-block-start: .5rem;
}

/* ⚠️ ESCOPADO NO CONTEÚDO, e é isso que o torna seguro. O modelo escreve TODO título de seção
   no verde escuro — `.group-title`, `.page-head h1`, o nome do grupo do fluxo. O Bootstrap 5.3
   deixa `--bs-heading-color: inherit`, então os nossos `h3.h6`, `h5` e `h6` (mais de 60 no
   produto) saíam em `--preto`, e o cartão inteiro ficava sem hierarquia de cor. Declarar isto no
   `:root` pintaria também o título dentro do menu, do widget e de qualquer superfície escura, onde
   o texto é branco — verde sobre verde. No `.sr-conteudo`, não existe superfície escura. */
.sr-conteudo {
  --bs-heading-color: var(--verde-900);
}

.sr-conteudo > h2 {
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--verde-900);
  margin-block: 1.5rem .75rem;
}

/* --- o número do indicador -------------------------------------------------
   `tabular-nums` importa mais do que parece: sem ele, uma coluna de cartões com R$ 1.111,11 e
   R$ 8.888,88 fica com larguras diferentes, e o olho lê como se os valores fossem de grandezas
   diferentes. A cor vermelha do `.text-danger` continua ganhando — as utilitárias de cor do
   Bootstrap são `!important`, e o saldo negativo do fluxo depende disso. */
/* ⚠️ `.card-body >`, E NÃO `[data-sr-indicador]` SOLTO — conferido nas parciais em 03/09 antes
   de virar defeito. O atributo marca 30 lugares, e só 12 deles são o número grande do cartão: os
   outros são a célula "Média" de uma tabela (`<td>`), o resumo "média X · meta Y" no cabeçalho do
   grupo e frases inteiras dentro de `<p>`. Pintar todos de Fraunces poria a serifa de display
   dentro de tabela e de texto corrido, que é o oposto do que o modelo faz. Filho direto do
   `.card-body` é exatamente o cartão de indicador, e nada mais. */
.sr-conteudo .card-body > [data-sr-indicador],
.sr-conteudo .card-body > .fs-5.fw-semibold,
.sr-conteudo .card-body > .fs-4.fw-semibold {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* --- o traço verde no topo do cartão de indicador ---------------------------
   ⚠️ `:has()` É ENFEITE, E ESTÁ AQUI SÓ POR ISSO. Ele evita editar as seis parciais de módulo
   para acrescentar uma classe; num navegador que não o suporte, o cartão perde o traço e nada
   mais — o número, o rótulo e a legenda continuam iguais. Se um dia esta regra precisar carregar
   algo que não seja decoração, ela vira classe no Razor. */
.sr-conteudo .card:has(.card-body > [data-sr-indicador]),
.sr-conteudo .card:has(.card-body > .fs-5.fw-semibold),
.sr-conteudo .card:has(.card-body > .fs-4.fw-semibold) {
  border-block-start: 4px solid var(--verdeMedio);
}

/* =============================================================================
   BLOCO DE GESTÃO — o funil do CRM
   Etapa E31a · 03/09/2026 · ESPEC §7.2
   =============================================================================
   O kanban já tinha estrutura (E11b). O que faltava era a LINGUAGEM do modelo, e ela é feita de
   três coisas: a cor do estágio sob o cabeçalho da coluna, o cartão mais miúdo com um traço
   vertical, e o nome do cliente na serifa de display.

   ⚠️ NENHUM `.cshtml` MUDA AQUI TAMBÉM. A coluna já carrega `data-sr-coluna="@((int)Estagio)"`
   desde a E11b — o atributo existia para o arrasto, e serve de gancho para a cor sem inventar
   marcação nova. Os valores são os do enum `EstagioCrm`, que começa em **1** e não em 0.
   ============================================================================= */

.sr-kanban-coluna[data-sr-coluna="1"] .sr-kanban-topo { border-block-end-color: var(--estagio-1); }
.sr-kanban-coluna[data-sr-coluna="2"] .sr-kanban-topo { border-block-end-color: var(--estagio-2); }
.sr-kanban-coluna[data-sr-coluna="3"] .sr-kanban-topo { border-block-end-color: var(--estagio-3); }
.sr-kanban-coluna[data-sr-coluna="4"] .sr-kanban-topo { border-block-end-color: var(--estagio-4); }
.sr-kanban-coluna[data-sr-coluna="5"] .sr-kanban-topo { border-block-end-color: var(--estagio-5); }
.sr-kanban-coluna[data-sr-coluna="6"] .sr-kanban-topo { border-block-end-color: var(--estagio-6); }
.sr-kanban-coluna[data-sr-coluna="7"] .sr-kanban-topo { border-block-end-color: var(--estagio-7); }

/* 2px, como no modelo: com 1px o traço colorido lê como sombra da borda, e a progressão do funil
   — que é a informação — se perde. */
.sr-kanban-topo { border-block-end-width: 2px; }

/* --- o cartão do funil -----------------------------------------------------
   ⚠️ ELE É UM `.card`, E O KIT BASE O DEIXOU GRANDE DEMAIS. O cartão do kanban recebeu os 14px
   de raio e a sombra que servem à folha de papel de uma seção inteira; numa coluna de 18rem com
   seis deles empilhados, isso vira uma pilha de caixas gordas. No modelo ele tem 9px de raio,
   nenhuma sombra e um traço vertical de 3px — o traço é o que faz a pilha ler como lista. */
.sr-kanban-cartao {
  border-radius: .5625rem;
  box-shadow: none;
  border-inline-start: 3px solid var(--verde-300);
}

.sr-kanban-cartao:hover {
  border-inline-start-color: var(--verdeMedio);
  box-shadow: var(--sombra-sm);
}

/* O cliente ativo já vinha com `.border-primary` do Bootstrap; aqui ele engrossa o traço em vez
   de trocar as quatro bordas — a coluna inteira fica com a mesma silhueta. */
.sr-kanban-cartao.border-primary {
  border-inline-start-color: var(--verdeEscuro);
  border-inline-start-width: 5px;
}

/* O nome do cliente é o que se lê primeiro numa coluna de seis cartões: no modelo ele sai na
   Fraunces, em verde escuro. É o mesmo tratamento do número do indicador — display para o que
   identifica, sans para o resto. */
.sr-kanban-cartao .fw-semibold {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  color: var(--verde-900);
}

/* =============================================================================
   O RELATÓRIO DO CLIENTE — tela e PAPEL
   Etapa E31a · 03/09/2026 · ESPEC §9
   =============================================================================
   ⚠️ DUAS COISAS QUE ESTA SEÇÃO CONSERTA, E A SEGUNDA NÃO É ESTILO.

   1) O `.sr-relatorio` não tinha **uma linha** de CSS. O documento que vai para o cliente —
      capa, seções, tabelas, conclusões — saía em Bootstrap de fábrica, enquanto o PDF gerado
      pelo QuestPDF ao lado dele segue o desenho do modelo. Dois canais, o mesmo conteúdo,
      aparências diferentes.

   2) **NÃO EXISTIA FOLHA DE IMPRESSÃO**, e a tela tem um botão "Imprimir HTML" que chama
      `window.print()` (ver `Relatorios/Modulo.cshtml`). Ou seja: quem clicava nele levava para o
      papel o menu lateral de 296px, a topbar e o botão flutuante do Meu Planejador, impressos em
      volta do relatório do cliente. Isso não é diferença de layout — é um documento errado
      saindo pela impressora, e ninguém tinha visto porque a passagem a pé nunca foi feita.
   ============================================================================= */

.sr-relatorio {
  max-inline-size: 48rem;
  color: var(--tinta);
}

/* A capa: a faixa de identificação, o título grande e os três dados de quem é, quem fez e quando.
   No modelo ela é o único bloco que respira 80px; na tela ela vira o cabeçalho do documento. */
.sr-relatorio-capa {
  padding-block-end: 1.25rem;
  border-block-end: 2px solid var(--verde-300);
}

.sr-relatorio-capa h1 {
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  color: var(--verde-900);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.sr-relatorio-capa small { color: var(--tinta-secundaria); font-size: .6875rem; }

/* Os títulos de seção do documento: serifa de display, como todo título do modelo. O
   `page-break-after: avoid` é o que impede um título ficar sozinho no pé da página. */
.sr-relatorio h2 {
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--verde-900);
  margin-block: 2rem .875rem;
  break-after: avoid;
}

.sr-relatorio h3 {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--verde-700);
  margin-block: 1.375rem .5rem;
  break-after: avoid;
}

/* Texto de leitura corrida, e não de interface: 13,5px justificado, como no modelo. Um relatório
   é lido em parágrafo, não em rótulo. */
.sr-relatorio p,
.sr-relatorio li {
  font-size: .84375rem;
  line-height: 1.55;
}

.sr-relatorio p { text-align: justify; margin-block-end: .75rem; }

/* A tabela do documento é MAIS FORTE que a da tela: cabeçalho em verde chapado com texto branco,
   linhas alternadas. Numa tela o cabeçalho claro basta porque há moldura em volta; no papel,
   sem moldura, ele some. */
.sr-relatorio table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: .875rem;
  font-size: .78125rem;
  break-inside: avoid;
}

.sr-relatorio th {
  background-color: var(--verde-900);
  color: #fff;
  padding: .5rem .625rem;
  text-align: start;
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.sr-relatorio td {
  padding: .5rem .625rem;
  border-block-end: 1px solid var(--linha);
}

.sr-relatorio tbody tr:nth-child(even) td { background-color: var(--fundo); }

/* =============================================================================
   @media print — o que vai para o papel
   =============================================================================
   ⚠️ ESTAS REGRAS VALEM PARA O PRODUTO INTEIRO, e não só para o relatório: qualquer tela que
   alguém mandar imprimir passa por aqui. A casca da aplicação não é documento.
   ============================================================================= */
@page {
  size: A4;
  margin: 18mm 16mm;
}

@media print {
  /* A casca sai: menu, topbar, o botão flutuante e o painel do Meu Planejador, a tarja de
     jornada, o atalho de pular, o aviso de carregamento e os avisos de canto.

     ⚠️ Conferido um a um em 03/09: `.sr-widget-scrim` e `.sr-tarja-jornada` NÃO EXISTEM — eu os
     tinha escrito de memória. O véu do widget é o `.offcanvas-backdrop` do Bootstrap (ver a regra
     do `:has()` lá em cima) e a tarja de jornada é um `.alert.alert-info` sem classe própria, que
     não dá para esconder daqui sem esconder todo aviso da tela. Ela ganhou `d-print-none` na
     própria marcação, que é o idioma que este projeto já usa nos botões do relatório.
     Seletor que não casa com nada é pior que regra faltando: parece resolvido. */
  .sr-sidebar,
  .sr-topbar,
  .sr-widget-botao,
  .sr-widget-painel,
  /* A barra de cliente ativo (§7.2) entra pela mesma razão dos dois acima: é casca flutuante,
     e no papel ela cairia por cima do conteúdo — `position: fixed` na impressão gruda o
     elemento na primeira página. Quem está sendo atendido já aparece no cabeçalho do que se
     imprime. Acrescentada em 08/09/2026, no dia em que a barra nasceu. */
  .sr-cliente-barra,
  .sr-pular,
  .sr-toasts,
  #sr-carregando,
  .offcanvas-backdrop { display: none !important; }

  /* Sem a barra lateral, o conteúdo ocupa a folha inteira. */
  .sr-conteudo {
    max-inline-size: none;
    padding: 0;
  }

  /* ⚠️ O `!important` AQUI NÃO É PREGUIÇA — é ordem de cascata. A folga de 6,5rem que o
     `body:has(.sr-cliente-barra)` reserva para a barra flutuante está DEPOIS deste bloco na
     folha, e tem a mesma especificidade: sem o `!important`, ela venceria por posição e toda
     página impressa sairia com um rodapé de 6,5rem em branco reservado para um elemento que
     o `display: none` acima acabou de tirar do papel. */
  body:has(.sr-cliente-barra) .sr-conteudo { padding-block-end: 0 !important; }

  body { background: #fff; }

  .sr-relatorio { max-inline-size: none; }

  /* Cartão no papel é moldura, não superfície: sombra vira borrão cinza na impressora e o fundo
     colorido gasta tinta sem informar. */
  .card {
    box-shadow: none;
    break-inside: avoid;
  }

  .table-responsive {
    overflow-x: visible;
    border: 0;
  }

  /* Um título não fica sozinho no pé da página, e uma seção não parte no meio se couber inteira. */
  h1, h2, h3, h4 { break-after: avoid; }

  .sr-relatorio section,
  .sr-relatorio table,
  .alert { break-inside: avoid; }

  /* O endereço de um link só serve em papel quando ele não é âncora interna nem `javascript:`. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .6875rem;
    color: var(--tinta-secundaria);
  }
}

/* =============================================================================
   FERRAMENTAS — a vitrine e o veredito
   Etapa E31a · 03/09/2026 · ESPEC §6
   =============================================================================
   ⚠️ A REGRA QUE ESTA SEÇÃO FECHA, e que vale para o produto inteiro:

       **A serifa de display é de quem IDENTIFICA. O resto é sem serifa.**

   Ela já estava aplicada, uma decisão de cada vez, em quatro lugares: o título da página, o
   número do cartão de indicador, o nome do cliente no funil e o título do relatório. Faltavam os
   dois desta tela — o nome da ferramenta na vitrine e o VEREDITO, que é a frase pela qual a
   calculadora existe. Escrever a regra aqui é o que impede a próxima sessão de decidir de novo,
   caso a caso, e chegar a outro lugar.

   O que NÃO leva serifa: rótulo, legenda, corpo de texto, célula de tabela, botão, aviso. Serifa
   em texto de interface cansa; em número e em nome, ancora.
   ============================================================================= */

.sr-ferramenta-card h3 {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  color: var(--verde-900);
}

/* O veredito é a resposta da ferramenta — "sim, cabe no seu orçamento", "não, faltam 14 meses".
   Ele vem do servidor pronto (§5.6) e é a única frase da tela que merece o corpo de um título. */
[data-t="veredito"] {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  color: var(--verde-900);
  line-height: 1.25;
}

/* Os números que sustentam o veredito, nas caixinhas ao lado. `tabular-nums` pela mesma razão de
   sempre: coluna de dinheiro com dígitos de larguras diferentes lê como grandezas diferentes. */
[data-t="valor"] {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}

/* A caixinha de cada número: o `.border.rounded` do Bootstrap já pega a `--linha` pela ponte
   neutra; o que falta é o respiro do modelo e o raio da escala. */
.sr-conteudo [data-t="rotulo"] {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

/* =============================================================================
   AS UTILITÁRIAS DE FUNDO — a ponte que a variável não alcança
   Etapa E31a · 03/09/2026
   =============================================================================
   ⚠️⚠️ ESTE É O MESMO DEFEITO QUE DEIXOU TODO BOTÃO AZUL POR QUATRO SEMANAS, em outra roupa.

   O `tokens.css` liga `--bs-tertiary-bg` e `--bs-secondary-bg` à paleta, e isso parece resolver
   as utilitárias de fundo. **Não resolve.** O Bootstrap 5.3 escreve:

       .bg-body-tertiary { background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)); }

   — ele lê a variante **`-rgb`**, um TRIO DE NÚMEROS, e não a variável de cor. A ponte que
   escrevemos nunca é consultada, e o fundo continua saindo no cinza-azulado de fábrica. Foi assim
   que o `.bg-body-tertiary` da Importação Inteligente ficou cinza ao lado de uma tela inteira
   verde — visto na cobaia em 03/09.

   Por que a correção é uma REGRA e não uma variável: `--bs-tertiary-bg-rgb` exige `238, 251, 241`
   escrito à mão. Seria o mesmo tom, copiado do gerador do build, e passaria a divergir dele no
   primeiro dia em que alguém mexesse nos cinco tokens. A regra usa o token e não duplica nada.

   Regra prática para a próxima vez: **utilitária de COR DE FUNDO do Bootstrap 5.3 lê `-rgb`;
   utilitária de texto e de borda lê a variável direta.** `.text-body-secondary` e `.border` estão
   corretas pela ponte — conferidas no `bootstrap.min.css`, uma a uma, em 03/09.
   ============================================================================= */

.bg-body-tertiary { background-color: var(--verde-050) !important; }
.bg-body-secondary { background-color: var(--cinza-050) !important; }
.bg-white { background-color: #fff !important; }

/* O rótulo em caixa alta — "5 PASSOS", "RELATÓRIO ANALÍTICO", "PREPARADO PARA". No modelo ele é o
   `eyebrow`: 10,5px, entressoletrado e pesado. Sem isto ele herda o `.small` (14px) e compete com
   o título que ele apenas apresenta. O idioma `small text-uppercase` já é o que o produto usa em
   seis telas; a regra só lhe dá o corpo certo. */
.sr-conteudo .small.text-uppercase,
.sr-relatorio .small.text-uppercase {
  font-size: .6875rem;
  letter-spacing: .06em;
  font-weight: 700;
}

/* =============================================================================
   A COLUNA DA ESQUERDA — marca no topo, conta no rodapé
   Etapa E31b · 07/09/2026 · ESPEC §5.2
   =============================================================================
   Pedido do Igor em 07/09: "no exemplo não temos a barra no topo, e o menu fica todo na
   esquerda; o logo fica um pouco maior e precisamos manter a opção de expandir e encolher".

   É o desenho do `Workspace.html`: lá a `.topbar` nasce com `display:none` e só aparece abaixo
   de 920px; no desktop a coluna carrega marca, navegação e conta. A nossa passa a fazer o mesmo,
   com uma diferença que o modelo não tem — o estado recolhido, que é desenho nosso desde 31/08.

   ⚠️ O QUE **NÃO** MUDOU: a topbar continua existindo abaixo de lg. Ela não foi removida, foi
   escopada. A sidebar é `offcanvas-lg`: no celular ela é uma gaveta, e o hamburger da topbar é o
   único jeito de abri-la. Ver o cabeçalho do `_Topbar.cshtml`.
   ============================================================================= */

@media (min-width: 992px) {

  /* --- o topo: a marca ------------------------------------------------------
     No modelo é o `.sb-logo`: 74px de altura com o logo centrado, primeira coisa da coluna.
     Numa barra de 56px o logo não passaria de 32px — foi a barra sair que o deixou crescer.

     ⚠️⚠️ SEM BORDA E SEM CANTO, e isto é um CONSERTO (pedido do Igor, 15/09/2026: *"o logo
     está dentro de uma caixa, muito ruim"*). Ele estava certo, e o modelo também: lá o
     `.sb-logo` tem `background:#fff` DENTRO de uma `.sidebar` que também é `background:#fff`,
     e nenhuma borda — ou seja, a "caixa" do modelo é INVISÍVEL. Ela existe no CSS só para
     reservar os 74px de altura e centrar a imagem.

     Aqui a mesma caixa tinha ganhado `border: 1px solid var(--linha)` e um raio, e aí o branco
     sobre branco vira um retângulo desenhado em volta da marca — uma moldura no logotipo, que é
     a única coisa da tela que não deveria ter uma. O que fica é o que faz trabalho: a altura, a
     centragem e a folga. */
  .sr-sidebar-topo {
    align-items: center;
    justify-content: center;
    padding: .75rem;
    margin: .5rem .5rem 0;
    min-block-size: 4.625rem;
  }

  /* ⚠️ O BOTÃO DE RECOLHER SAIU EM 22/09/2026 e a marca ficou sozinha na caixa. As três
     propriedades continuam: `flex: 1 1 auto` mais `justify-content: center` é o que a centra
     na coluna inteira agora, e `min-inline-size: 0` segue deixando o link encolher em vez de
     usar a largura natural da imagem como piso. */
  .sr-sidebar-topo .sr-marca {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-inline-size: 0;
  }

  .sr-sidebar-topo .sr-marca-logo {
    block-size: 3.75rem;
    max-inline-size: 100%;
  }

  /* --- o botão de recolher: DISCRETO ----------------------------------------
     ⚠️ ELE ERA UM `btn-outline-secondary` ATÉ 07/09/2026, e o Igor pediu discrição depois de ver
     a coluna montada. O desenho vinha da topbar, onde estava certo: lá ele era irmão do
     hamburger, e o hamburger é o único jeito de abrir o menu no celular. Aqui, no topo da
     coluna e dentro da caixa branca da marca, a mesma moldura lhe dá peso de item de navegação —
     e ele não é isso: é ajuste de preferência de quem já está dentro.

     ⚠️ SAI A MOLDURA, FICA O ALVO DE 44px do §5.2. Discrição é tinta, não tamanho: encolher a
     área clicável trocaria um problema de peso visual por um de acerto, que é pior. O fundo
     volta no hover e no foco, que é exatamente quando ele precisa dizer que é clicável.

     As variáveis `--bs-btn-*` são o caminho do Bootstrap 5.3 para revestir um `.btn` sem
     variante. Escrever `color`/`background-color` na mão aqui deixaria o `:hover` do próprio
     framework — que lê essas variáveis — voltando ao cinza no primeiro passar do mouse. */
  .sr-menu-alternar {
    --bs-btn-color: var(--tinta-secundaria);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--verde-900);
    --bs-btn-hover-bg: var(--verde-050);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--verde-900);
    --bs-btn-active-bg: var(--verdeClaro);
    --bs-btn-active-border-color: transparent;
    padding: .25rem;
    border-radius: var(--raio-sm);
    opacity: .75;
    transition: opacity .15s ease, background-color .15s ease;
  }

  .sr-menu-alternar:hover,
  .sr-menu-alternar:focus-visible { opacity: 1; }

  /* A seta desce de 1rem para .8125rem. É o menor tamanho em que a ponta do chevron continua
     legível a 100% de zoom — medido na cobaia, não escolhido no olho. */
  .sr-menu-alternar .bi { font-size: .8125rem; }

  /* --- o rodapé: a conta ---------------------------------------------------- */
  .sr-sidebar-conta {
    padding: .625rem .5rem .75rem;
    border-block-start: 1px solid var(--linha);
    margin-inline: .5rem;
  }

  /* O `.nav-conta` do modelo: caixa verde-clara com borda, o nome em peso alto. Aqui ela é um
     BOTÃO, porque abre o menu de conta — e por isso herda o alvo de toque de 44px do §5.2. */
  .sr-conta-botao {
    display: flex;
    align-items: center;
    gap: .625rem;
    inline-size: 100%;
    min-block-size: var(--sr-toque-min);
    padding: .5rem .6875rem;
    border: 1px solid var(--linha);
    border-radius: var(--raio-sm);
    background-color: var(--verde-050);
    color: var(--verde-900);
    font-weight: 800;
    font-size: .8125rem;
    text-align: start;
    transition: background-color .15s ease, border-color .15s ease;
  }

  .sr-conta-botao:hover,
  .sr-conta-botao:focus-visible {
    background-color: color-mix(in srgb, var(--verdeMedio) 14%, white);
    border-color: var(--verde-300);
  }

  .sr-conta-botao .bi { font-size: 1.5rem; color: var(--verdeEscuro); }

  /* Um nome longo trunca em vez de quebrar a caixa em duas linhas — o rodapé tem altura fixa e
     "Maria Fernanda de Albuquerque" não pode empurrar o menu para cima. */
  .sr-conta-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
  }

  /* =============================================================================
     O ESTADO RECOLHIDO — 68px de coluna
     =============================================================================
     ⚠️ ESTA PARTE NÃO EXISTE NO MODELO, e é bom dizer por quê: o `Workspace.html` não tem menu
     recolhível. Como a marca, o botão e a conta se comportam em 68px é desenho nosso, decidido
     com o Igor em 07/09 — o nome some, o ROSTO fica. É o que mantém "Sair" a um clique nos dois
     estados; escondê-lo obrigaria a expandir o menu para poder sair. */
  /* ⚠️ A MARCA SOME NO RECOLHIDO, e a primeira tentativa foi encolhê-la. Não deu: a nossa marca
     é a palavra por extenso com a assinatura embaixo ("SuperRico / saúde financeira"), e numa
     coluna de 68px ela vira um borrão de 28px que ninguém lê — visto na cobaia em 07/09. Não há
     monograma no `wwwroot/img` para pôr no lugar, e inventar um seria desenhar marca, que não é
     desta etapa. Marca ilegível é pior que marca nenhuma: quem recolheu o menu sabe em que
     produto está, e o item "Início" continua a um clique logo abaixo.
     Sem a marca, sobra o botão, que é o que resta para fazer. */
  /* ⚠️ `background-color` e `border-color` SAÍRAM daqui em 15/09/2026, junto com a moldura que
     o `.sr-sidebar-topo` tinha: eram a desmontagem de uma caixa que não existe mais. */
  .sr-menu-recolhido .sr-sidebar-topo {
    justify-content: center;
    padding: .5rem .25rem;
    margin-inline: .25rem;
    min-block-size: 0;
  }

  .sr-menu-recolhido .sr-sidebar-topo .sr-marca { display: none; }

  /* ⚠️ NO RECOLHIDO ELE VOLTA A 100%, e não é contradição com a discrição pedida: expandido, ele
     divide o topo com a marca e a discrição é sobre não competir com ela; recolhido, a marca
     saiu e ele é a ÚNICA coisa no topo — e a única saída do estado recolhido. Botão apagado que
     é o único caminho de volta não é discreto, é escondido. */
  .sr-menu-recolhido .sr-menu-alternar { opacity: 1; }

  .sr-menu-recolhido .sr-conta-nome { display: none; }

  .sr-menu-recolhido .sr-conta-botao {
    justify-content: center;
    padding-inline: .25rem;
  }
}

/* =============================================================================
   Cliente ativo — a barra flutuante e a caixa de seleção (§7.2, 08/09/2026)
   -----------------------------------------------------------------------------
   ⚠️ ESTE COMPONENTE NÃO EXISTE NO `Workspace.html`. Lá, a única confirmação de
   QUEM está sendo atendido é a faixa `.plan-client-banner` no topo do Início —
   e ela some assim que o planejador navega para qualquer outra tela. O elemento
   flutuante é desenho novo, pedido do Igor em 08/09/2026, e está escrito aqui
   para ninguém o tratar como divergência do modelo. A tinta, o raio e a sombra
   são os do modelo; só o lugar é nosso.

   ⚠️ ELA É FIXA E ANDA COM A SIDEBAR. `inset-inline-start` lê o mesmo
   `--sr-sidebar-largura` que a coluna usa — e que o estado recolhido redefine
   para 4,25rem. Um valor literal aqui deixaria a barra por baixo do menu (ou
   flutuando no vazio) para quem recolhe, e ninguém veria isso num teste.
   ============================================================================= */
.sr-cliente-barra {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-start: 1rem;

  /* ⚠️ A FOLGA DA DIREITA É O FAB DO §7.5: 3,75rem de círculo + 1,5rem de recuo +
     1rem de respiro. Sem ela a barra passa POR BAIXO do botão de chat em telas
     estreitas, e o "Trocar cliente" fica inalcançável — o círculo tem z-index
     1040 e está por cima. */
  inset-inline-end: 7.25rem;
  z-index: 1035;

  display: flex;
  align-items: center;
  gap: .75rem;

  padding: .625rem .75rem;

  /* ⚠️ BORDA LARANJA (26/09/2026, pedido do Igor: "precisa ter um pouco mais de contraste").
     A barra verde-clara sobre o fundo verde-claro da página sumia. O laranja é o da marca —
     o mesmo do "Selecionar cliente" do Início —, e quer dizer a mesma coisa: "é deste cliente
     que você está falando". A sombra mais funda a descola do conteúdo que rola por baixo. */
  border: 2px solid var(--laranja);
  border-radius: var(--raio-lg);
  background-color: #fff;
  background-image: linear-gradient(120deg, var(--laranja-050), #fff 55%);
  box-shadow:
    0 12px 28px -12px color-mix(in srgb, var(--preto) 40%, transparent),
    var(--sombra);
}

@media (min-width: 992px) {
  .sr-cliente-barra {
    /* A coluna do menu + o recuo. Ver o aviso do cabeçalho. */
    inset-inline-start: calc(var(--sr-sidebar-largura) + 1rem);
  }
}

.sr-cliente-avatar {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid var(--laranja-linha);
}

.sr-cliente-avatar-vazio {
  display: grid;
  place-items: center;
  background-color: var(--verde-050);
}

.sr-cliente-avatar-vazio .bi {
  font-size: 1.15rem;
  color: var(--verdeEscuro);
}

/* `min-inline-size: 0` é o que autoriza o filho a encolher dentro do flex — sem
   ele, um e-mail longo empurra o botão "Trocar cliente" para fora da barra em
   vez de ser truncado. É a armadilha clássica do `flex`, e ela só aparece com
   dado real. */
.sr-cliente-texto {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1 1 auto;
  line-height: 1.2;
}

.sr-cliente-nome,
.sr-cliente-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A serifa é de quem IDENTIFICA — a mesma regra do resto do produto, e o
   `.pcb-nome` do modelo a segue. */
.sr-cliente-nome {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--verde-900);
}

.sr-cliente-email {
  font-size: .75rem;
  color: var(--tinta-suave);
}

.sr-cliente-trocar { flex: none; }

/* ⚠️ NO CELULAR O RÓTULO SAI DA TELA E FICA NO BOTÃO. `visually-hidden` do
   Bootstrap mantém a palavra para o leitor de tela — um botão com só uma seta e
   nenhum nome acessível é exatamente o que o DoD §11.4 proíbe. */
@media (max-width: 575.98px) {
  .sr-cliente-barra {
    /* O FAB continua embaixo, à direita: aqui a barra SOBE acima dele em vez de
       encolher, porque a largura de um telefone não comporta as duas coisas lado
       a lado sem truncar o nome a três letras. */
    inset-inline: .75rem;
    inset-block-end: 5.75rem;
    padding: .5rem .625rem;
    gap: .5rem;
  }

  .sr-cliente-trocar-texto {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ⚠️ A BARRA É FLUTUANTE, ENTÃO ELA COBRE O FIM DA PÁGINA. Sem esta folga, o
   último parágrafo (ou o último botão) de toda tela do planejador fica embaixo
   dela — e num formulário longo isso significa um campo que não dá para clicar.

   O `:has()` é o que faz a folga existir SÓ quando a barra existe: o Início não
   a desenha, as telas públicas não a desenham, e nenhuma delas paga a folga.
   Navegador sem `:has()` simplesmente não aplica a regra — a barra volta a
   encostar no fim do conteúdo, que é degradação e não quebra. */
body:has(.sr-cliente-barra) .sr-conteudo {
  padding-block-end: 6.5rem;
}

/* --- a caixa de seleção ------------------------------------------------------- */
.sr-cliente-lista { margin-block: 0; }

/* O item é um `<button>` de largura cheia: a linha inteira é o alvo, e não só o
   nome. `text-align: start` desfaz a centralização que o botão traz de fábrica. */
.sr-cliente-item {
  inline-size: 100%;
  min-block-size: var(--sr-toque-min);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border: 0;
  background: none;
  text-align: start;
  color: inherit;
  transition: background-color .15s ease;
}

.sr-cliente-item:hover:not(:disabled) { background-color: var(--verde-050); }

.sr-cliente-item:disabled { opacity: .55; }

/* A linha do cliente da sessão. A cor é reforço: quem a nomeia é o selo "Ativo"
   ao lado e o `aria-current` que o JS escreve. */
.sr-cliente-item-ativo { background-color: var(--verde-050); }

.sr-cliente-avatar-lista {
  inline-size: 2.25rem;
  block-size: 2.25rem;
}

.sr-cliente-item-texto {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1 1 auto;
  line-height: 1.25;
}

.sr-cliente-item-nome {
  font-weight: 600;
  color: var(--verde-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-cliente-item-email {
  font-size: .75rem;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-cliente-estagio,
.sr-cliente-selo { flex: none; }

/* Num telefone não cabem nome, e-mail, estágio e selo na mesma linha: o estágio
   é o que menos decide a escolha, então é ele que sai. O selo "Ativo" fica. */
@media (max-width: 575.98px) {
  .sr-cliente-estagio { display: none; }
}

/* --- cabeçalho de uma ferramenta (§1) — o `.tool-page` do modelo, 08/09/2026 ---
   Ele substituiu a migalha de pão de duas linhas: uma ferramenta tem um lugar de
   origem só, e "voltar" é o que alguém no meio de uma calculadora procura. */
.sr-ferr-voltar {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-block-size: var(--sr-toque-min);
  font-size: .78rem;
  font-weight: 700;
  color: var(--verdeEscuro);
  text-decoration: none;
}

.sr-ferr-voltar:hover,
.sr-ferr-voltar:focus-visible {
  color: var(--verde-900);
  text-decoration: underline;
}

.sr-ferr-cabeca {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-block: .25rem 1.5rem;
  padding-block-end: 1.125rem;
  border-block-end: 1px solid var(--linha);
}

.sr-ferr-icone {
  inline-size: 3.375rem;
  block-size: 3.375rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--raio-md);
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
}

/* ⚠️ ESTE `<h1>` ESCAPA DA REGRA `.sr-conteudo > h1` POR ANINHAMENTO — ele mora
   dentro do cabeçalho da ferramenta. Mesmo caso do `.uni-hero h1`, do
   `.sr-gate .card h1` e do `.sr-home-hero h1`: a regra da tipografia (a serifa é
   de quem identifica) não admite exceção nascida de um detalhe de marcação.
   O `KitBaseTests.A_serifa_de_display_e_de_quem_identifica` guarda os quatro. */
.sr-ferr-cabeca h1 {
  margin: 0;
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--verde-900);
}

.sr-ferr-cabeca p {
  margin-block: .25rem 0;
  max-inline-size: 37.5rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* =============================================================================
   Calculadora de Juro Real (§1, Anexo B grupo L) — 08/09/2026
   -----------------------------------------------------------------------------
   A tela do `TOOL_RENDERERS.juroreal` do `Workspace.html`, em Razor. Ela era um
   aviso de "em construção" — o motor existia desde a E13a, com testes, e o link
   "Alterar na calculadora" do dashboard da Curva levava a ele.

   As CINCO cores da barra de alocação NÃO estão aqui: elas são dado de catálogo
   (classe de ativo), vêm em C# e entram no `style` de cada fatia, junto com a
   largura. Ver o `remarks` de `CalculadoraDeJuroReal.Classes`.
   ============================================================================= */
.sr-jr-intro { max-inline-size: 44rem; }

.sr-jr {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Duas colunas em ≥ lg; empilha antes disso. A saída vem PRIMEIRO no empilhado?
   Não: a ordem do documento é entrada → saída, e mexer nela com `order` faria o
   foco do teclado saltar. Quem rola o telefone lê o que mexeu e depois o
   resultado, que é a mesma ordem de quem usa a tela. */
.sr-jr-calc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 992px) {
  .sr-jr-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
}

.sr-jr-entrada,
.sr-jr-saida {
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: 1.125rem 1.25rem;
  background-color: #fff;
  box-shadow: var(--sombra-sm);
}

.sr-jr-rotulo {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--tinta-suave);
  margin-block: 0 .6rem;
}

.sr-jr-rotulo:not(:first-child) { margin-block-start: 1.5rem; }

/* --- chips de horizonte -------------------------------------------------------- */
.sr-jr-chips {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.sr-jr-chip {
  flex: 1 1 6rem;
  min-block-size: var(--sr-toque-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: .5rem .6rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: #fff;
  color: var(--tinta);
  transition: border-color .15s ease, background-color .15s ease;
}

.sr-jr-chip .ct { font-weight: 700; font-size: .8125rem; }

.sr-jr-chip .cs { font-size: .68rem; color: var(--tinta-suave); }

.sr-jr-chip:hover { border-color: var(--verdeMedio); }

.sr-jr-chip.ativo {
  border-color: var(--verdeEscuro);
  background-color: var(--verde-050);
}

.sr-jr-chip.ativo .ct { color: var(--verde-900); }

/* --- passo e deslizante -------------------------------------------------------- */
.sr-jr-passo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-block-start: 1rem;
}

.sr-jr-passo button {
  inline-size: var(--sr-toque-min);
  block-size: var(--sr-toque-min);
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: #fff;
  color: var(--verde-900);
  font-size: 1.25rem;
  line-height: 1;
  justify-content: center;
}

.sr-jr-passo button:hover {
  border-color: var(--verdeMedio);
  background-color: var(--verde-050);
}

/* A serifa: o horizonte é um número que identifica o cenário inteiro. */
.sr-jr-passo input {
  inline-size: 5.5rem;
  padding: .35rem .5rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  font-family: var(--sr-ff-display);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--verde-900);
}

.sr-jr-passo-nota,
.sr-jr-dica {
  margin-block: .35rem 0;
  font-size: .75rem;
  color: var(--tinta-suave);
  text-align: center;
}

.sr-jr-dica { text-align: start; margin-block-start: .875rem; }

.sr-jr-deslizante { margin-block-start: .875rem; }

.sr-jr-deslizante input { inline-size: 100%; accent-color: var(--verdeEscuro); }

.sr-jr-escala {
  display: flex;
  justify-content: space-between;
  font-size: .66rem;
  color: var(--tinta-suave);
}

/* --- perfis -------------------------------------------------------------------- */
.sr-jr-perfis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  gap: .5rem;
}

.sr-jr-perfil {
  min-block-size: var(--sr-toque-min);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding: .55rem .7rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: #fff;
  color: var(--tinta);
  font-size: .8125rem;
  font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease;
}

.sr-jr-perfil small { font-size: .68rem; font-weight: 600; color: var(--tinta-suave); }

.sr-jr-perfil:hover { border-color: var(--verdeMedio); }

.sr-jr-perfil.ativo {
  border-color: var(--verdeEscuro);
  background-color: var(--verde-050);
  color: var(--verde-900);
}

/* O ponto de cor de cada perfil. Estes quatro SÃO da nossa paleta — eles marcam
   uma escala de risco crescente, e a escala de teal serve exatamente para isso.
   As cinco cores da barra de alocação são outra coisa: lá são classes de ativo,
   que precisam ser distinguíveis entre si e não ordenadas. */
.sr-jr-perfil .pd {
  inline-size: .625rem;
  block-size: .625rem;
  border-radius: 50%;
  display: inline-block;
}

.sr-jr-perfil .pd.neutro { background-color: var(--tinta-suave); }
.sr-jr-perfil .pd.conservador { background-color: var(--verde-300); }
.sr-jr-perfil .pd.moderado { background-color: var(--verdeMedio); }
.sr-jr-perfil .pd.agressivo { background-color: var(--verdeEscuro); }

/* --- alocação ------------------------------------------------------------------ */
.sr-jr-aloc { margin-block-start: .875rem; }

.sr-jr-aloc-nota {
  margin: 0;
  font-size: .75rem;
  color: var(--tinta-suave);
  line-height: 1.5;
}

.sr-jr-barra {
  display: flex;
  block-size: .625rem;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--linha-2);
}

/* `flex-grow: 0` e `flex-shrink: 0`: a largura é o `flex-basis` que o servidor
   manda, e nada além dele pode esticar ou encolher a fatia. */
.sr-jr-fatia { flex: 0 0 auto; }

.sr-jr-aloc-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .875rem;
  margin-block-start: .5rem;
  font-size: .7rem;
  color: var(--tinta-suave);
}

.sr-jr-aloc-legenda i {
  display: inline-block;
  inline-size: .625rem;
  block-size: .625rem;
  border-radius: 2px;
  margin-inline-end: .3rem;
  vertical-align: middle;
}

/* --- a saída ------------------------------------------------------------------- */
.sr-jr-saida-lab {
  display: block;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--tinta-suave);
}

.sr-jr-taxa {
  margin-block: .25rem 0;
  font-family: var(--sr-ff-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}

.sr-jr-taxa .sufixo {
  font-size: .875rem;
  font-weight: 600;
  color: var(--tinta-suave);
  font-family: var(--sr-ff-sans);
}

.sr-jr-taxa-sub {
  margin-block: .3rem 1rem;
  font-size: .78rem;
  color: var(--tinta-suave);
}

.sr-jr-conta {
  border-block-start: 1px dashed var(--linha);
  padding-block-start: .75rem;
  font-size: .8125rem;
}

.sr-jr-conta .linha {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding-block: .25rem;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

.sr-jr-conta .linha em { font-style: normal; color: var(--tinta-suave); }

.sr-jr-conta .mais::before { content: "+ "; }

.sr-jr-conta .total {
  margin-block-start: .3rem;
  padding-block-start: .5rem;
  border-block-start: 1px solid var(--linha);
  font-weight: 700;
  color: var(--verde-900);
}

/* A etiqueta do regime. As três cores são as do status da Curva — mesma família,
   mesmo significado (curto/médio/longo é confiança crescente na fonte). */
.sr-jr-regime {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-block: .875rem 0;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid currentcolor;
}

.sr-jr-regime .ponto {
  inline-size: .4rem;
  block-size: .4rem;
  border-radius: 50%;
  background-color: currentcolor;
}

.sr-jr-regime.curto { color: #b07d1a; }
.sr-jr-regime.medio { color: var(--verdeMedio); }
.sr-jr-regime.longo { color: var(--verdeEscuro); }

.sr-jr-fonte {
  display: grid;
  gap: .5rem;
  margin-block: .875rem 0;
  font-size: .72rem;
}

.sr-jr-fonte dt {
  color: var(--tinta-suave);
  font-weight: 600;
}

.sr-jr-fonte dd {
  margin: 0;
  color: var(--verde-900);
  font-weight: 700;
}

.sr-jr-manual {
  margin-block-start: 1rem;
  padding-block-start: .875rem;
  border-block-start: 1px dashed var(--linha);
}

.sr-jr-manual .form-check-label { font-size: .78rem; }

.sr-jr-manual-campo { margin-block-start: .5rem; }

.sr-jr-manual-nota {
  margin-block: .35rem 0;
  font-size: .7rem;
  color: var(--tinta-suave);
}

.sr-jr-aplicar {
  inline-size: 100%;
  margin-block-start: 1rem;
  font-size: .8125rem;
}

.sr-jr-sem-cliente {
  margin-block: 1rem 0;
  font-size: .75rem;
  color: var(--tinta-suave);
}

/* --- exemplo de aplicação ------------------------------------------------------- */
.sr-jr-exemplo,
.sr-jr-ref {
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: 1.125rem 1.25rem;
  background-color: #fff;
  box-shadow: var(--sombra-sm);
}

.sr-jr-exemplo h2,
.sr-jr-ref h2 {
  margin: 0 0 .25rem;
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--verde-900);
}

.sr-jr-exemplo-sub {
  margin: 0 0 1rem;
  font-size: .78rem;
  color: var(--tinta-suave);
}

.sr-jr-exemplo-corpo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 768px) {
  .sr-jr-exemplo-corpo { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
}

.sr-jr-alternar {
  display: inline-flex;
  padding: .2rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background-color: var(--cinza-050);
  margin-block-end: .75rem;
}

.sr-jr-alternar button {
  min-block-size: 2rem;
  padding: .3rem .8rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--tinta-suave);
  font-size: .75rem;
  font-weight: 700;
}

.sr-jr-alternar button.ativo {
  background-color: #fff;
  color: var(--verde-900);
  box-shadow: var(--sombra-sm);
}

.sr-jr-exemplo-campo label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--tinta-suave);
  margin-block-end: .25rem;
}

.sr-jr-exemplo-resultado {
  text-align: center;
  padding: 1rem;
  border-radius: var(--raio-md);
  background-image: linear-gradient(160deg, var(--verde-050), #fff);
  border: 1px solid var(--verde-300);
}

.sr-jr-exemplo-resultado .seta {
  margin: 0;
  font-size: .72rem;
  color: var(--tinta-suave);
}

.sr-jr-exemplo-resultado .valor {
  margin: .2rem 0 0;
  font-family: var(--sr-ff-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}

.sr-jr-exemplo-resultado .sub {
  margin: 0;
  font-size: .7rem;
  color: var(--tinta-suave);
}

.sr-jr-exemplo-resultado .ganho {
  margin: .35rem 0 0;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--verdeEscuro);
}

.sr-jr-exemplo-nota {
  margin-block: 1rem 0;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

/* --- referência por prazo ------------------------------------------------------- */
.sr-jr-ref-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: .75rem;
  margin-block-start: .875rem;
}

.sr-jr-ref-card {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .875rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  background-color: #fff;
  text-align: start;
  transition: border-color .15s ease, transform .15s ease;
}

.sr-jr-ref-card:hover,
.sr-jr-ref-card:focus-visible {
  border-color: var(--verdeMedio);
  transform: translateY(-2px);
}

.sr-jr-ref-card .titulo {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--tinta-suave);
}

.sr-jr-ref-card .taxa {
  font-family: var(--sr-ff-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}

.sr-jr-ref-card .taxa .sufixo {
  font-family: var(--sr-ff-sans);
  font-size: .7rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

.sr-jr-ref-card .fonte { font-size: .7rem; color: var(--tinta-suave); }

.sr-jr-rodape {
  font-size: .7rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  max-inline-size: 48rem;
}

@media (prefers-reduced-motion: reduce) {
  .sr-jr-ref-card:hover,
  .sr-jr-ref-card:focus-visible { transform: none; }
}

/* =============================================================================
   PIRÂMIDE DE MASLOW FINANCEIRA — aba `fluxo` (§1.4, Anexo B)
   -----------------------------------------------------------------------------
   O desenho é o `.fx-piramide` do `Workspace.html`: um painel em degradê, três
   barras que estreitam do topo para a base e, ao lado de cada uma, o campo da
   meta com o percentual lido em cor.

   ⚠️ AS CORES NÃO SÃO AS DO MODELO, e isto é regra deste arquivo, não descuido.
   O `tokens.css` diz em letras grandes que os cinco tokens são normativos e que
   NENHUM hex solto entra aqui — toda a escala se deriva deles. O modelo pinta as
   três camadas em #0E7C7B (= --verdeEscuro), #1CAF9C (= --verdeMedio) e #1B3A5C,
   um azul-marinho que não existe na nossa paleta e para o qual não há mistura
   possível dos cinco tokens (ele é AZUL; a nossa família é teal). A base leva
   `--verde-900`, que é o tom mais escuro da escala: o que a cor comunica ali é
   "esta é a camada mais pesada", e isso se preserva.

   ⚠️ O ÂMBAR É O DOS 4 CICLOS (#d8a72a), e não o #e8a93b do modelo. O produto já
   tinha um amarelo de "atenção" — o do `.sr-cvf-ciclo.amarelo` —, e duas telas do
   mesmo sistema dizendo "atenção" em dois amarelos diferentes é pior que ficar
   três pontos longe do protótipo. Pelo mesmo motivo o verde é `--verdeMedio` e o
   vermelho é `--vermelho`, os contratuais.
   ============================================================================= */
.sr-fxp {
  background-image: linear-gradient(150deg, #fff, var(--verde-050));
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: 1.15rem 1.25rem;
  margin-block-end: 1.15rem;
}

.sr-fxp-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .875rem;
  flex-wrap: wrap;
  margin-block-end: .875rem;
}

.sr-fxp-cabeca {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--tinta);
  flex: 1;
  min-inline-size: 15rem;
}

.sr-fxp-cabeca b {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--verde-900);
}

.sr-fxp-filtro {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
}

.sr-fxp-filtro label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.sr-fxp-filtro select {
  border: 1px solid var(--verde-300);
  border-radius: var(--raio-xs);
  padding: .375rem .625rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--verde-900);
  background-color: #fff;
}

.sr-fxp-filtro select:focus {
  outline: none;
  border-color: var(--verdeMedio);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--verdeMedio) 22%, transparent);
}

.sr-fxp-linha {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-end: .575rem;
}

/* A barra é centrada no trilho: é o que faz as três, de larguras diferentes,
   desenharem uma pirâmide em vez de uma escada encostada na esquerda. */
.sr-fxp-barra-caixa {
  flex: 1;
  display: flex;
  justify-content: center;
  min-inline-size: 0;
}

.sr-fxp-barra {
  block-size: 2.625rem;
  border-radius: var(--raio-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
  gap: .75rem;
  min-inline-size: 12.5rem;
  box-shadow: var(--sombra);
  transition: inline-size .6s cubic-bezier(.16, 1, .3, 1);
}

/* A cor de cada camada. O número é o do `GrupoFluxo` do §13.4 — 2 Essenciais,
   3 Sociais, 4 Autorrealização. Receitas (1) não é camada da pirâmide. */
.sr-fxp-barra-g2 { background-color: var(--verde-900); }
.sr-fxp-barra-g3 { background-color: var(--verdeMedio); }
.sr-fxp-barra-g4 { background-color: var(--verdeEscuro); }

/* Só o "fora do alvo" realça a barra — é o que o modelo faz, e é o que impede o
   painel de gritar nas três camadas ao mesmo tempo. */
.sr-fxp-barra-fora {
  box-shadow: 0 0 0 2px #d8a72a, var(--sombra);
}

.sr-fxp-barra-rot {
  color: #fff;
  font-weight: 800;
  font-size: .845rem;
  white-space: nowrap;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--preto) 30%, transparent);
}

.sr-fxp-barra-val {
  font-family: var(--sr-ff-display);
  color: #fff;
  font-weight: 600;
  font-size: .9375rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--preto) 30%, transparent);
}

.sr-fxp-meta-caixa {
  inline-size: 11rem;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.sr-fxp-meta-rot {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0;
}

.sr-fxp-meta-dinheiro {
  display: flex;
  align-items: center;
  gap: .375rem;
  border: 1px solid var(--verde-300);
  border-radius: var(--raio-xs);
  padding-inline: .625rem;
  background-color: #fff;
}

.sr-fxp-meta-dinheiro:focus-within {
  border-color: var(--verdeMedio);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--verdeMedio) 22%, transparent);
}

.sr-fxp-meta-dinheiro > span {
  font-size: .75rem;
  font-weight: 700;
  color: var(--tinta-suave);
  flex: none;
}

.sr-fxp-meta-in {
  inline-size: 100%;
  border: 0;
  padding-block: .375rem;
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: end;
  background-color: transparent;
  color: var(--preto);
}

.sr-fxp-meta-in:focus { outline: none; }

.sr-fxp-pct {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .69rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sr-fxp-pct-sem { color: var(--tinta-suave); font-weight: 600; }
.sr-fxp-pct-verde { color: var(--verde-900); }
/* ⚠️ O ÂMBAR SAIU EM 22/09/2026, e o azul entrou no lugar. O Igor padronizou o farol:
   abaixo da meta verde, NA meta azul, acima da meta vermelho. O azul é o único tom
   deste produto fora da paleta verde/vermelho/preto do §5.1, e ele existe porque a
   leitura pede três estados e o terceiro não pode ser um verde ou um vermelho mais
   claro — seriam dois "quase iguais" um ao lado do outro.
   #1d4ed8 sobre o fundo claro mede 8,0:1; a bolinha usa um tom mais vivo porque
   bolinha não é texto e não precisa passar no contraste de leitura. */
.sr-fxp-pct-azul { color: #1d4ed8; }
.sr-fxp-pct-vermelho { color: var(--vermelho); }

/* A bolinha RAG. ⚠️ ELA É REDUNDANTE DE PROPÓSITO: o texto ao lado já diz "112%
   da meta", e a cor sozinha nunca carrega informação — quem não distingue verde
   de vermelho lê o número. Por isso ela sai do leitor de tela (`aria-hidden`). */
.sr-fxp-rag {
  inline-size: .5625rem;
  block-size: .5625rem;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}

/* Sem meta não há leitura, e sem leitura não há bolinha. */
.sr-fxp-rag-sem { display: none; }

.sr-fxp-rag-verde {
  background-color: var(--verdeMedio);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verdeMedio) 18%, transparent);
}

.sr-fxp-rag-azul {
  background-color: #2563eb;
  box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 18%, transparent);
}

.sr-fxp-rag-vermelho {
  background-color: var(--vermelho);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermelho) 18%, transparent);
}

.sr-fxp-nota {
  font-size: .72rem;
  color: var(--tinta);
  margin-block: .75rem 0;
  line-height: 1.5;
  border-block-start: 1px dashed var(--linha);
  padding-block-start: .625rem;
}

.sr-fxp-nota + .sr-fxp-nota {
  border-block-start: 0;
  padding-block-start: 0;
  margin-block-start: .35rem;
  color: var(--tinta-suave);
}

/* No celular a meta desce para baixo da barra: 11rem ao lado de uma barra de
   12,5rem não cabe em 400px, e o que quebraria seria a barra. */
@media (max-width: 38.75rem) {
  .sr-fxp-linha { flex-wrap: wrap; }
  .sr-fxp-meta-caixa { inline-size: 100%; }
  .sr-fxp-barra { min-inline-size: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sr-fxp-barra { transition: none; }
}

/* ===================================================================== caminho de pão

   A trilha de TODAS as telas (14/09/2026). O desenho é o mesmo da trilha de pastas do Cofre
   (`.sr-cofre-trilha`, acima) de propósito: eram dois caminhos de pão no mesmo produto com duas
   aparências diferentes, e quem navega não tem por que aprender as duas. A diferença é só de
   papel — aquela anda DENTRO do Cofre, esta anda ENTRE as páginas. */

.sr-trilha {
  margin-block-end: 1rem;
}

.sr-trilha-lista {
  display: flex;
  align-items: center;
  gap: .125rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .8125rem;
}

.sr-trilha-item {
  display: flex;
  align-items: center;
  gap: .125rem;
}

.sr-trilha-sep {
  color: var(--tinta-suave);
  font-weight: 700;
  padding-inline: .125rem;
}

.sr-trilha-degrau {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: .5rem;
  color: var(--verde-700);
  font-weight: 700;
  text-decoration: none;
}

a.sr-trilha-degrau:hover,
a.sr-trilha-degrau:focus-visible {
  background-color: var(--verde-050);
  color: var(--verde-900);
}

/* O degrau atual é `<span>`, e não link: ele não pode parecer clicável. Sem cor de fundo, para
   que o olho ache os que SÃO. */
.sr-trilha-degrau.atual {
  color: var(--tinta-suave);
  font-weight: 600;
}

/* --- a SEGUNDA lista dos projetos na curva: bens do balanço (14/09/2026) ------
   O cartão reaproveita tudo do `.sr-cvf-proj`; o que muda são três coisas: o
   título que separa as duas listas, o topo que NÃO é link (uma linha de balanço
   não tem página própria) e a etiqueta verde de "entra na curva". */

.sr-cvf-proj-sechead {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 800;
  color: var(--verdeEscuro);
  letter-spacing: .02em;
  margin-block: 1.25rem .75rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--linha);
}

/* Sem cursor de link e sem sublinhado no hover: ele não leva a lugar nenhum. */
.sr-cvf-proj-topo.estatico { cursor: default; }
.sr-cvf-proj-topo.estatico:hover .sr-cvf-proj-nome { text-decoration: none; }

/* A mesma tinta do valor positivo — o que entra na curva fala com uma cor só. */
.sr-cvf-proj-tag.pos { color: #1d6b44; }

/* --- a simulação avulsa da Curva (ferramenta `curva`, 14/09/2026) --------------
   O gráfico, a legenda e a nota dos dois ciclos reaproveitam as classes
   `.sr-cvf-*` do Início — é o mesmo desenho, e duas folhas de estilo para a
   mesma figura divergem na primeira correção. O que é só desta tela é o painel
   dos sete deslizantes e o bloco do veredito. */

.sr-curva-campos { display: flex; flex-direction: column; gap: 1rem; }

.sr-curva-campo .form-label { margin-block-end: .25rem; }

/* O espelho do valor. Largura mínima para o painel não "pular" a cada
   recálculo, quando `R$ 2.500` vira `R$ 12.500`. */
.sr-curva-campo .sr-espelho {
  min-inline-size: 5.5rem;
  text-align: end;
  color: var(--verde-900);
}

.sr-curva-veredito {
  background: linear-gradient(160deg, #ffffff 0%, var(--verde-050) 100%);
  border: 1px solid var(--linha);
  border-radius: 1rem;
  padding: 1.25rem 1.375rem;
}

.sr-curva-kicker {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verdeEscuro);
  margin-block-end: .5rem;
}

.sr-curva-veredito h2 {
  font-family: var(--sr-ff-display), serif;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--verde-900);
  margin-block-end: .625rem;
}

.sr-curva-win { color: var(--verdeMedio); }

.sr-curva-sub {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--tinta-secundaria);
  margin-block-end: 1rem;
}

.sr-curva-sub b { color: var(--verde-900); }

.sr-curva-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  padding-block-start: .875rem;
  border-block-start: 1px solid var(--linha);
}

.sr-curva-stats .n {
  font-family: var(--sr-ff-display), serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--verde-900);
  line-height: 1.2;
}

.sr-curva-stats .l {
  font-size: .6875rem;
  color: var(--tinta-suave);
  line-height: 1.35;
  margin-block-start: .1875rem;
}

.sr-curva-avulsa-nota {
  font-size: .75rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  margin-block: .75rem 0;
}

/* No celular os três números empilham: 1,06rem de dinheiro em três colunas de
   ~110px quebra no meio do valor. */
@media (max-width: 38.75rem) {
  .sr-curva-stats { grid-template-columns: 1fr; }
}

/* =============================================================================
   CRM — o alto da tela, os avisos e a densidade do funil (E36, 15/09/2026)
   -----------------------------------------------------------------------------
   ⚠️ O PEDIDO ERA "DENSIDADE E HIERARQUIA", e quase tudo aqui é hierarquia: o que
   muda a tela não é cor nova, é o que está grande e o que está pequeno. O rótulo
   do número encolheu e virou versalete; o número cresceu; a análise do funil,
   que ocupava o topo, virou um `<details>` fechado.

   NENHUMA COR NOVA. Os tiles usam `.sr-kpi` com `--sr-kpi-cor`, que já existia
   para o Raio-X e para a Curva — é literalmente o `.crm-metric` do modelo, um
   cartão branco com um traço colorido de um lado. As seis cores do funil já
   estavam em `--estagio-1..6` desde a E31a.
   ============================================================================= */

/* --- o alto da tela --------------------------------------------------------- */
.sr-crm-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 1.125rem;
  border-block-end: 1px solid var(--bs-border-color);
  margin-block-end: 1.25rem;
}

/* ⚠️ O QUINTO `<h1>` QUE ESCAPA DE `.sr-conteudo > h1` POR ANINHAMENTO — ele mora
   dentro do hero, e não como filho direto do conteúdo. É o mesmo caso do
   `.uni-hero h1`, do `.sr-gate .card h1`, do `.sr-home-hero h1` e do
   `.sr-ferr-cabeca h1`. A regra da tipografia (a serifa é de quem identifica) não
   admite exceção nascida de um detalhe de marcação, e o
   `KitBaseTests.A_serifa_de_display_e_de_quem_identifica` guarda os cinco. */
.sr-crm-hero h1 {
  font-family: var(--sr-ff-display);
  font-weight: 500;
  font-size: 1.75rem;
  color: var(--verde-900);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-block-end: .375rem;
}

/* O subtítulo é prosa, e prosa larga demais não se lê. 35rem é a mesma medida que
   o modelo usa (560px) para este parágrafo. */
.sr-crm-hero-texto p { font-size: .875rem; line-height: 1.55; max-inline-size: 35rem; }

.sr-crm-hero-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

/* --- os quatro números ------------------------------------------------------ */
.sr-crm-numero-rotulo {
  font-size: .65625rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 800;
  line-height: 1.2;
  margin-block-end: .3125rem;
}

.sr-crm-numero-valor {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.05;
  color: var(--verde-900);
  margin-block-end: .125rem;
}

.sr-crm-numero-nota {
  font-size: .65625rem;
  color: var(--tinta-suave);
  font-weight: 600;
  margin-block-end: 0;
}

/* O corpo do tile é apertado de propósito: são quatro lado a lado, e o padding
   padrão do `.card-body` os faria altos o bastante para empurrar o funil. */
.sr-crm-numeros .card-body { padding: .875rem 1rem; }

/* --- indicações e alertas --------------------------------------------------- */
/* O traço lateral é o do modelo (`.crm-aviso-bloco`): estes dois blocos são listas
   de gente esperando, e o traço é o que os separa dos cartões de conteúdo. */
.sr-crm-aviso { border-inline-start: 4px solid var(--verdeMedio); }
.sr-crm-aviso-alerta { border-inline-start-color: var(--laranja); }

/* --- a análise recolhida ---------------------------------------------------- */
/* ⚠️⚠️ `display: block` DESFAZENDO O `.card`, E ISTO É UM CONSERTO, NÃO ESTILO.
   O `.card` do Bootstrap é `display: flex`, e um `<details>` com `display: flex`
   PARA DE FECHAR nos motores Blink e WebKit: o navegador passa a tratar os filhos
   como itens de flex e os desenha todos, com `open` ou sem. A caixa nasceria aberta
   e o triângulo não faria nada — e o defeito não aparece em captura de tela nenhuma
   tirada com ela aberta, que é o estado em que qualquer um a fotografaria. */
.sr-crm-analise {
  display: block;
}

/* ⚠️ E O `summary` FICA `list-item`, PELO MESMO MOTIVO NA OUTRA PONTA: `display: flex`
   num `<summary>` apaga o `::marker` no Chromium — some o triângulo, que é o ÚNICO
   sinal de que a caixa abre. Sem ele o bloco vira um título morto que ninguém clica.
   Os dois textos ficam lado a lado por serem inline, sem precisar de flex. */
.sr-crm-analise > summary {
  display: list-item;
  cursor: pointer;
  padding-block: .75rem;
}

.sr-crm-analise > summary .sr-crm-analise-periodo {
  margin-inline-start: .5rem;
}

.sr-crm-analise > summary:focus-visible {
  outline: 2px solid var(--verdeEscuro);
  outline-offset: -2px;
}

/* --- o funil, mais denso ---------------------------------------------------- */
/* O ícone do estágio. `em`, e não `rem`: ele acompanha o título da coluna. */
.sr-kanban-icone { font-size: 1em; margin-inline-end: .125rem; }

.sr-kanban-desc {
  font-size: .65625rem;
  line-height: 1.4;
  color: var(--tinta-suave);
  margin: .375rem 0 .25rem;
}

.sr-kanban-valor {
  font-size: .75rem;
  font-weight: 700;
  color: var(--verdeEscuro);
  margin-block-end: .5rem;
}

/* --- o próximo passo no cartão ---------------------------------------------- */
/* A caixinha do modelo (`.crm-card-task`): fundo claro e o "quando" em negrito à
   frente do texto. É o que faz a data ser lida ANTES da tarefa — que é a ordem em
   que a pergunta se faz. */
.sr-kanban-passo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem;
  font-size: .6875rem;
  line-height: 1.35;
  color: var(--tinta);
  background: var(--verde-050, var(--bs-tertiary-bg));
  border-radius: .375rem;
  padding: .375rem .5rem;
  margin-block: .375rem 0;
}

.sr-kanban-passo-quando {
  font-weight: 700;
  text-transform: lowercase;
  white-space: nowrap;
}

/* ⚠️ COR NÃO É O ÚNICO SINAL (WCAG 1.4.1). O atrasado e o urgente também mudam o
   fundo da caixa, e o TEXTO já diz "há 3 dias" ou "hoje" por extenso — a cor
   confirma o que está escrito, em vez de ser a única forma de saber. */
.sr-kanban-passo.sr-urgencia-atrasado {
  background: color-mix(in srgb, var(--vermelho) 10%, white);
  color: var(--bs-danger-text-emphasis);
}

.sr-kanban-passo.sr-urgencia-atrasado .sr-kanban-passo-quando { color: var(--vermelho); }

.sr-kanban-passo.sr-urgencia-urgente {
  background: color-mix(in srgb, var(--laranja) 12%, white);
}

.sr-kanban-passo.sr-urgencia-urgente .sr-kanban-passo-quando { color: var(--laranja-tinta); }

/* --- o rodapé de ações do cartão -------------------------------------------- */
.sr-kanban-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  margin-block: .5rem 0;
}

/* Os botões do cartão são pequenos, mas o alvo de toque não é: `.sr-toque` garante
   os 44px do §5.2. Aqui só se corta o padding horizontal, que numa coluna de 18rem
   com dois botões lado a lado é o que estoura a linha. */
.sr-kanban-rodape .btn-sm { padding-inline: .5rem; font-size: .6875rem; }

/* --- registrar contato no próprio cartão ------------------------------------ */
.sr-kanban-contato {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-block-start: .5rem;
  padding-block-start: .5rem;
  border-block-start: 1px dashed var(--bs-border-color);
}

.sr-kanban-contato .form-select-sm,
.sr-kanban-contato .form-control-sm { font-size: .75rem; }

/* `.d-none` do Bootstrap é `display:none !important`, e o `display:flex` acima
   perderia para ele — mas a ordem importa para quem leia: o estado fechado vem do
   HTML, e é o JS que tira a classe. Nada aqui tenta vencer o `!important`. */

/* =============================================================================
   CRM — cores e bordas do modelo (E36, segunda passada, 15/09/2026)
   -----------------------------------------------------------------------------
   Pedido do Igor: *"consegue deixar o layout mais parecido com o HTML, cores e
   bordas?"*. Esta seção fecha as sete diferenças que sobraram da primeira passada.

   ⚠️ TRÊS DELAS NÃO PUDERAM SER COPIADAS AO PÉ DA LETRA, e é por contraste, não por
   gosto. O modelo pinta as pílulas com BRANCO SOBRE A COR CHEIA, e isso reprova na
   WCAG AA em quatro dos seis estágios (2,12:1 no Lead, 2,26 no Descoberta, 3,02 no
   Anamnese, 4,19 no Diagnóstico) e nos três tiers (3,73 / 3,21 / 2,56). Aqui a
   pílula é TOM CLARO com TINTA ESCURA DA MESMA COR — 5,46:1 a 10,94:1 nos estágios,
   7 a 8,5:1 nos tiers. A cor continua sendo a informação; o que muda é de que lado
   do contraste ela fica. É o mesmo par que a `.sr-badge-alerta` já usava.
   ============================================================================= */

/* --- a cor da etapa vira variável da coluna -------------------------------------
   Os seis `border-block-end-color` da E31a continuam onde estavam; o que se
   acrescenta é o MESMO valor numa variável, para o badge e o que mais vier usarem
   sem repetir seis regras a cada elemento novo. */
.sr-kanban-coluna[data-sr-coluna="1"] { --sr-estagio: var(--estagio-1); }
.sr-kanban-coluna[data-sr-coluna="2"] { --sr-estagio: var(--estagio-2); }
.sr-kanban-coluna[data-sr-coluna="3"] { --sr-estagio: var(--estagio-3); }
.sr-kanban-coluna[data-sr-coluna="4"] { --sr-estagio: var(--estagio-4); }
.sr-kanban-coluna[data-sr-coluna="5"] { --sr-estagio: var(--estagio-5); }
.sr-kanban-coluna[data-sr-coluna="6"] { --sr-estagio: var(--estagio-6); }
.sr-kanban-coluna[data-sr-coluna="7"] { --sr-estagio: var(--estagio-7); }

/* --- o badge da coluna, na cor da etapa -----------------------------------------
   Era `.text-bg-secondary` — cinza do Bootstrap, igual nas seis colunas. No modelo
   ele é o único elemento além do traço que carrega a cor da etapa, e é o que faz o
   funil ler como progressão em vez de seis caixas iguais. */
/* ⚠️ `contagem`, E NÃO `conta` — O NOME É O CONSERTO. Ela nasceu `.sr-kanban-conta`,
   que é PREFIXO de `.sr-kanban-contato` (o formulário de registrar contato, algumas
   regras acima e escrito no mesmo dia). Duas classes a uma letra de distância para
   coisas sem relação nenhuma já era ruim de ler; e o `KitBaseTests.RegraDe` acha a
   regra por `IndexOf` do seletor, então ele leu o `.sr-kanban-contato` e foi procurar
   um `color-mix` numa regra que não tem nenhum. O teste estava certo. */
.sr-kanban-contagem {
  /* `display` e `line-height` explícitos: estes dois deixaram de ser `.badge` do
     Bootstrap, e era de lá que vinham. Sem eles a pílula fica sem altura própria e o
     padding vertical vaza por cima do texto vizinho. */
  display: inline-block;
  line-height: 1.4;
  background-color: color-mix(in srgb, var(--sr-estagio, var(--verdeMedio)) 16%, white);
  color: color-mix(in srgb, var(--sr-estagio, var(--verdeMedio)) 55%, black);
  font-size: .65625rem;
  font-weight: 800;
  border-radius: .6875rem;
  padding: .125rem .5rem;
  flex: none;
}

/* --- o cartão: o traço na cor do TIER --------------------------------------------
   `.sr-kanban-cartao` já tinha um traço de 3px à esquerda, mas em `--verde-300` fixo
   nos seiscentos cartões. No modelo ele é a cor do tier (`--tc`) — é o que diz, sem
   ler nada, que aquele cartão é um cliente Premium. O `data-sr-tier` é o gancho, e
   o valor cai no padrão quando o cliente não tem patrimônio e por isso não tem tier. */
.sr-kanban-cartao[data-sr-tier="A"] { --sr-tier: var(--tier-a); }
.sr-kanban-cartao[data-sr-tier="B"] { --sr-tier: var(--tier-b); }
.sr-kanban-cartao[data-sr-tier="C"] { --sr-tier: var(--tier-c); }

/* ⚠️ O `var()` LEVA FALLBACK, e não é zelo: `var(--sr-tier)` com a variável indefinida
   invalida a declaração inteira no tempo de valor computado — a borda não cairia no
   valor anterior, cairia em `unset`. O Razor omite o atributo quando o cliente não tem
   tier, mas um cartão com `data-sr-tier=""` (que é o que qualquer futura marcação a mais
   produziria) bateria exatamente nesse caso. */
.sr-kanban-cartao[data-sr-tier] {
  border-inline-start-color: var(--sr-tier, var(--verde-300));
}

/* No modelo o hover troca a borda inteira para a cor do tier e levanta o cartão. O
   `translateY` fica de fora: o cartão é arrastável, e um cartão que se mexe sozinho
   ao passar o mouse compete com o feedback do arrasto. */
.sr-kanban-cartao[data-sr-tier]:hover {
  border-color: var(--sr-tier, var(--verdeMedio));
  border-inline-start-color: var(--sr-tier, var(--verdeMedio));
}

/* --- a pílula do tier -------------------------------------------------------------
   Era texto secundário cinza, solto numa linha com o patrimônio. */
.sr-tier-pilula {
  display: inline-block;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .125rem .5rem;
  border-radius: .5625rem;
  background-color: color-mix(in srgb, var(--sr-tier, var(--tinta-suave)) 16%, white);
  color: color-mix(in srgb, var(--sr-tier, var(--tinta-suave)) 55%, black);
}

/* --- o patrimônio do cartão -------------------------------------------------------
   Serifa e verde escuro, como todo número que identifica no produto (é a mesma regra
   que o `KitBaseTests.A_serifa_de_display_e_de_quem_identifica` guarda no nome do
   cliente, três linhas acima dentro do mesmo cartão). */
.sr-kanban-cartao .sr-kanban-aum {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  font-size: .8125rem;
  color: var(--verdeEscuro);
}

.sr-kanban-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .375rem;
  margin-block: .375rem 0;
}

/* --- o "quando" do próximo passo ---------------------------------------------------
   Versalete com espaçamento, como o `.crm-card-task .when` do modelo: ele é etiqueta,
   e a etiqueta em caixa alta se distingue do título da tarefa sem precisar de cor. */
.sr-kanban-passo-quando {
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .625rem;
}

/* --- os quatro números: o traço vai para a ESQUERDA ---------------------------------
   ⚠️ SAIU DO `.sr-kpi`, e não é inconsistência com o kit. O modelo usa os DOIS: 4px no
   topo no cartão de indicador de módulo (`.sr-kpi`, que o Raio-X e a Curva usam) e 3px
   à esquerda no tile do CRM (`.crm-metric`). Aqui embaixo, os dois blocos de aviso já
   têm traço à esquerda — com o traço no topo, a coluna de cima e a de baixo ficavam
   "quase iguais", que lê como desalinho e não como escala. */
.sr-crm-numero {
  border-inline-start: 3px solid var(--sr-crm-cor, var(--verdeMedio));
}

/* --- os dois blocos de aviso --------------------------------------------------------
   O contador era `.text-bg-warning`, o amarelo do Bootstrap, que não é da marca e nem
   passa em contraste com branco. Vira o par laranja da casa. */
.sr-crm-aviso-n {
  display: inline-block;
  line-height: 1.5;
  font-size: .65625rem;
  font-weight: 800;
  border-radius: .625rem;
  padding: .0625rem .5rem;
  background-color: var(--verde-900);
  color: #fff;
}

.sr-crm-aviso-alerta .sr-crm-aviso-n {
  background-color: var(--laranja-linha);
  color: var(--laranja-tinta);
}

/* =============================================================================
   Menu — cada grupo é uma CAIXA, e o espaçamento tem um dono só (E37, 15/09/2026)
   -----------------------------------------------------------------------------
   Pedido do Igor: *"a distância entre os itens não está igual… queria deixar cada
   sanfona como uma caixa (menos as sanfonas dentro de outra sanfona), como no botão
   que aparece o avatar e nome do planejador"*.

   ⚠️ O ESPAÇAMENTO DESIGUAL TINHA CAUSA, e era invisível numa tela parada: o ritmo
   vinha de TRÊS lugares somados — o `mt-2` do cabeçalho, o `mb-2` da lista e as
   margens do `.sr-cat`. O do meio só existe com a sanfona ABERTA: `display: none`
   não ocupa espaço nem carrega margem. Ou seja, a distância entre dois grupos
   MUDAVA conforme o de cima estivesse aberto ou fechado — e como a página nasce com
   os três abertos e o Igor os fechou para ver, ele viu três distâncias diferentes.
   As utilitárias saíram da marcação; quem afasta agora é o `.sr-grupo`, e só ele.
   ============================================================================= */

.sr-grupo {
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background-color: #fff;
  margin-block-end: .5rem;
}

/* ⚠️ SEM `overflow: hidden`, que seria o jeito óbvio de o canto recortar o cabeçalho.
   Ele recortaria também a sombra do item ativo (`0 6px 16px -6px` no `.nav-link.active`),
   e o brilho do item em que a pessoa está sairia cortado reto na borda da caixa. Em vez
   disso o próprio cabeçalho arredonda os cantos de cima — e os de baixo também, quando
   está fechado, porque aí ele É a caixa inteira. É o `.collapsed` que o Bootstrap põe no
   botão que diz qual dos dois casos. */
/* Só o que é DA CAIXA. A altura e a folga vêm da regra que este cabeçalho compartilha com o
   `.sr-cat-cabeca`, lá em cima — repeti-las aqui criaria dois donos do mesmo número, e a segunda
   venceria a primeira em silêncio no dia em que alguém mexesse só numa delas. É a mesma razão
   pela qual o `.sr-cat-cabeca` não tem padding próprio. */
.sr-grupo > .sr-grupo-titulo {
  background-color: var(--verde-050);
  border-start-start-radius: var(--raio-sm);
  border-start-end-radius: var(--raio-sm);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  transition: background-color .15s ease;
}

.sr-grupo > .sr-grupo-titulo.collapsed {
  border-end-start-radius: var(--raio-sm);
  border-end-end-radius: var(--raio-sm);
}

/* O mesmo hover do `.sr-conta-botao`, para as duas caixas responderem igual ao mouse. */
.sr-grupo > .sr-grupo-titulo:hover,
.sr-grupo > .sr-grupo-titulo:focus-visible {
  background-color: color-mix(in srgb, var(--verdeMedio) 14%, white);
}

/* A folga de dentro da caixa. `.25rem` porque os itens já têm o próprio `padding` do
   `.nav-link` — mais do que isto e a caixa engorda sem caber mais nada. */
.sr-grupo-corpo {
  padding: .25rem;
}

/* ⚠️ A PRIMEIRA CATEGORIA NÃO LEVA MARGEM DE TOPO dentro da caixa. O `.sr-cat` tem
   `margin-block-end`, e o `.sr-cat + .sr-cat` acrescenta borda e folga entre irmãs —
   isso continua valendo, é o ritmo INTERNO. O que não pode é a última delas empurrar o
   fundo da caixa. */
.sr-grupo-corpo > .sr-cat:last-child { margin-block-end: 0; }

/* =============================================================================
   O grupo-caixa no menu RECOLHIDO
   -----------------------------------------------------------------------------
   Numa coluna de 68px sem cabeçalho (ele é `display: none`), a caixa viraria uma
   moldura em volta de uma pilha de ícones — o contrário do que ela significa, que é
   "este cabeçalho manda nestes itens".
   ============================================================================= */
@media (min-width: 992px) {
  .sr-menu-recolhido .sr-grupo {
    border: 0;
    margin-block-end: .25rem;
  }

  .sr-menu-recolhido .sr-grupo-corpo { padding: 0; }
}

/* =============================================================================
   Menu — o item "em validação" e o terceiro nível (E38, 16/09/2026)
   -----------------------------------------------------------------------------
   Quatro itens que o Igor desenhou e o sistema ainda não tem. Eles parecem itens
   de menu porque SÃO itens de menu — o que muda é o sinal de alerta à direita e o
   fato de abrirem um aviso em vez de navegar.
   ============================================================================= */

/* ⚠️ ELE É UM `<button>` NUM `<ul>` DE `.nav-link`, e o Bootstrap desenha `.nav-link`
   contando com um `<a>`. `inline-size: 100%` e `text-align: start` devolvem o que o
   `<button>` tira: sem eles o item encolhe até o texto e o rótulo fica centrado,
   destoando dos vizinhos na mesma lista. */
.sr-menu-validacao {
  inline-size: 100%;
  text-align: start;
  border: 0;
  background: none;
}

/* O sinal fica CINZA, e não âmbar. Âmbar aqui competiria com os alertas de verdade do
   produto (as tarefas vencidas, o aviso de concorrência) — e "ainda não abre" não é
   um problema do usuário, é um aviso sobre o produto. A cor forte fica no cabeçalho
   do modal, onde é a mensagem inteira. */
.sr-menu-validacao-sinal {
  font-size: .75rem;
  color: var(--tinta-suave);
  flex: none;
}

/* ⚠️ O TERCEIRO NÍVEL RECUA, E SÓ ELE. Sem isto, "CRM" (dentro de Gestão, dentro de
   Planejador) alinha com "Tutorial Planejador", que está um nível acima — e a coluna
   deixa de contar a hierarquia que a estrutura tem. O recuo é pequeno de propósito:
   numa coluna de 296px, um degrau grande come a largura do rótulo. */
.sr-grupo-corpo .sr-cat .nav-link {
  padding-inline-start: 1.375rem;
}

/* =============================================================================
   O menu de conta do rodapé — largura e destaque (E38b, 16/09/2026)
   -----------------------------------------------------------------------------
   Pedido do Igor: *"precisa ser da mesma largura sempre… ocupar o espaço total
   quando o menu é aberto e um espaço fixo quando fechado… também precisamos dar
   mais destaque para ele, por exemplo escurecendo o que não é ele. Veja se isso é
   bom ou então aplique uma solução melhor"*.

   ⚠️⚠️ O ESCURECIMENTO AQUI É DA SIDEBAR, E NÃO DA TELA INTEIRA — e a diferença é
   de VOCABULÁRIO, não de gosto:

   (a) Escurecer a tela toda é a linguagem do MODAL: diz "o aplicativo está parado
       até você resolver isto". Este é um menu de quatro itens que se fecha clicando
       em qualquer lugar, e nada está parado.

   (b) O produto JÁ USA esse recurso, para modais de verdade (`_ModaisDaConta`,
       `_ConfirmarAcao`). Gastá-lo num dropdown apaga a distinção — e "Trocar senha",
       que é um item DESTE menu, abre um modal: seriam duas cortinas empilhadas.

   (c) Custaria JS novo, uma escada de z-index contra o FAB, a topbar e o offcanvas,
       e o fechamento por ESC e por clique fora. Escurecer só a coluna é CSS puro.

   O destaque de verdade vem de três coisas que custam uma regra cada: a mesma
   largura do botão (o painel lê como o botão crescendo, e não como uma caixa que
   caiu ali), o botão marcado como ABERTO, e uma sombra mais alta que a dos cartões.
   O escurecimento da coluna entra por último, como reforço.
   ============================================================================= */

/* --- a largura: igual à do botão, sempre ------------------------------------
   O `.dropdown-menu` do Bootstrap não tem largura: ele cresce até o item mais
   longo, e por isso o painel ficava mais estreito que o botão e desalinhado dele.
   `100%` aqui é a largura do `.sr-conta`, que é o contêiner do dropdown e tem a
   largura do botão — então o painel acompanha a coluna sem ninguém repetir o
   número `--sr-sidebar-largura` num segundo lugar. */
.sr-conta .dropdown-menu {
  inline-size: 100%;
  /* O `min-width: 10rem` de fábrica venceria o `inline-size` numa coluna estreita
     e é justamente o que se está desfazendo. */
  min-inline-size: 0;
  /* A sombra ALTA do kit (a mesma dos modais), e não a dos cartões: este painel
     flutua sobre um menu inteiro, e a elevação é metade do destaque pedido. */
  box-shadow: var(--sombra-lg);

  /* ⚠️ A MESMA BORDA DO BOTÃO ABERTO (pedido do Igor, 16/09/2026). O `.dropdown-menu`
     do kit vem com `var(--linha)` — o verde lavado de toda borda do produto —, e ao
     lado de um botão que acabou de ficar com a borda em `--verdeMedio` isso lia como
     duas peças de origens diferentes coladas. São uma coisa só: o botão e o painel
     que ele abriu. */
  border-color: var(--verdeMedio);
}

/* --- o botão, enquanto o menu está aberto -----------------------------------
   ⚠️ `[aria-expanded="true"]`, e NÃO uma classe que o JS acrescente. O atributo é
   escrito pelo próprio Bootstrap e é o MESMO que o leitor de tela anuncia — quem
   enxerga e quem escuta passam a receber o mesmo fato, da mesma fonte. Uma classe
   paralela seria um segundo estado para manter em dia. */
.sr-conta-botao[aria-expanded="true"] {
  background-color: color-mix(in srgb, var(--verdeMedio) 22%, white);
  border-color: var(--verdeMedio);
}

/* --- o resto da coluna recua ------------------------------------------------
   ⚠️ `:has()` — sem JS. O seletor pergunta "esta sidebar contém um menu de conta
   aberto?" e recua o que não é ele.

   Sobre o suporte, o que importa não é a data: é o que acontece SEM ele. Se o
   `:has` não valer, o recuo simplesmente não acontece — a largura e o botão
   marcado como aberto, que são o grosso do destaque, continuam de pé. O recurso
   se degrada sozinho, e por isso não precisa de rede.

   (Os dois são "amplamente disponíveis" hoje. Não é verdade que o `:has` seja
   mais antigo que o `color-mix` em toda parte: no Chrome e no Safari é, no
   Firefox o `color-mix` chegou uns sete meses ANTES. Está escrito porque eu
   afirmei o contrário ao escrever esta regra, e a afirmação estava errada.)

   ⚠️ SÓ `opacity`, e nada de `pointer-events: none`. Bloquear o clique mudaria o
   comportamento do dropdown: hoje clicar em qualquer lugar fecha o menu, e clicar
   num item do menu por baixo fecha E navega — que é o que qualquer um espera. */
.sr-sidebar:has(.sr-conta .dropdown-menu.show) .offcanvas-body,
.sr-sidebar:has(.sr-conta .dropdown-menu.show) .sr-sidebar-topo {
  opacity: .45;
  transition: opacity .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sr-sidebar:has(.sr-conta .dropdown-menu.show) .offcanvas-body,
  .sr-sidebar:has(.sr-conta .dropdown-menu.show) .sr-sidebar-topo {
    transition: none;
  }
}

/* --- a largura no menu recolhido -------------------------------------------- */
@media (min-width: 992px) {
  /* ⚠️ LARGURA FIXA, e não `100%`: no recolhido o botão tem 68px, e um painel de
     68px não escreve "Trocar senha" em lugar nenhum. 15rem é a medida do painel
     aberto na coluna de 296px menos a folga — ou seja, o menu tem o MESMO tamanho
     nos dois estados, que é o que o pedido diz. O que muda é de onde ele nasce. */
  .sr-menu-recolhido .sr-conta .dropdown-menu {
    inline-size: 15rem;
  }
}

/* =============================================================================
   E41 — FLUXO DE CAIXA: a janela de dezesseis meses
   -----------------------------------------------------------------------------
   Três meses de histórico, o mês corrente e doze de planejamento, numa tabela que
   rola na horizontal com Item e Meio grudados à esquerda. O desenho é o do
   `Workspace.html` (`.fx-*`); as CORES não são as dele.

   ⚠️ OS HEXES DO MODELO NÃO ENTRAM AQUI. Ele escreve `#eef4f3`, `#fff7e8` e
   `#fffdf8` crus; nós temos kit, e o `KitBaseTests` cobra isso. O mapa:

     modelo            aqui                 por quê
     ---------------   ------------------   --------------------------------------
     #eef4f3 (hist)    --cinza-050          o cinza lavado do kit
     teal-100 (atual)  --verde-050          o mesmo verde do cabeçalho de tabela
     #fff7e8 (futuro)  --laranja-050        o âmbar do kit, 14% sobre branco
     #9a7415 (texto)   --laranja-tinta      8,9:1 — o do modelo não passa na AA

   ⚠️ E O ÂMBAR NÃO É DECORAÇÃO. Ele separa o que ACONTECEU do que está sendo
   PLANEJADO — duas naturezas de número na mesma linha, e a única pista de que a
   coluna da direita é uma intenção e não um extrato. A legenda existe para dizer
   isso em palavras, porque cor sozinha não é informação acessível.
   ----------------------------------------------------------------------------- */

/* --- a legenda --------------------------------------------------------------- */
.fx-legenda {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 .125rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

.fx-legenda .fx-lg-item { display: flex; align-items: center; gap: .3125rem; }

.fx-legenda .fx-dot {
  inline-size: .6875rem;
  block-size: .6875rem;
  border-radius: .1875rem;
  display: inline-block;
}

.fx-legenda .fx-dot.hist  { background: var(--cinza-050);   border: 1px solid var(--linha); }
.fx-legenda .fx-dot.atual { background: var(--verde-050);   border: 1px solid var(--verde-300); }
.fx-legenda .fx-dot.fut   { background: var(--laranja-050); border: 1px solid var(--laranja-linha); }

/* ⚠️ `margin-inline-start: auto` e não `float`: a dica vai para a ponta oposta e
   QUEBRA para a linha de baixo no celular, em vez de espremer os três rótulos. */
.fx-legenda .fx-lg-hint {
  margin-inline-start: auto;
  color: var(--tinta-suave);
  font-style: italic;
  font-weight: 500;
}

/* --- a tabela ---------------------------------------------------------------- */
.fx-scroll {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: #fff;
  scrollbar-width: thin;
}

.fx-scroll::-webkit-scrollbar { block-size: .5rem; }
.fx-scroll::-webkit-scrollbar-thumb { background: var(--verde-050); border-radius: .25rem; }

/* `separate` é exigência do `position: sticky` em célula: com `collapse` a borda
   pertence à tabela, e a célula grudada viaja sem ela. */
.fx-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .8125rem;
  min-inline-size: 100%;
  margin: 0;
}

.fx-table th,
.fx-table td {
  padding: 0;
  border-block-end: 1px solid var(--linha-2);
  white-space: nowrap;
}

.fx-table thead th {
  background: var(--fundo);
  font-size: .6875rem;
  font-weight: 800;
  color: var(--verde-900);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .5rem;
  text-align: end;
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}

.fx-table th.fx-item,
.fx-table th.fx-meio,
.fx-table th.fx-inst { text-align: start; }

/* ⚠️ AS DUAS PRIMEIRAS COLUNAS SÃO GRUDADAS, e a segunda depende da largura da
   primeira estar FIXA (min = max = 11.25rem). Sem travar as duas medidas, o
   `inset-inline-start: 11.25rem` da coluna Meio erra o encosto assim que um item
   tiver nome mais longo, e as duas se sobrepõem no meio da rolagem. */
.fx-table .fx-item {
  position: sticky;
  inset-inline-start: 0;
  z-index: 3;
  background: #fff;
  min-inline-size: 11.25rem;
  max-inline-size: 11.25rem;
}

.fx-table .fx-meio {
  position: sticky;
  inset-inline-start: 11.25rem;
  z-index: 3;
  background: #fff;
  min-inline-size: 8.125rem;
}

/* O cabeçalho grudado precisa vencer a célula grudada: ele fica por cima nos DOIS
   eixos ao mesmo tempo, que é o único ponto onde os dois sticky se cruzam. */
.fx-table thead .fx-item,
.fx-table thead .fx-meio { z-index: 4; background: var(--fundo); }

.fx-table .fx-inst { min-inline-size: 7.5rem; }
.fx-table .fx-mes  { min-inline-size: 6rem; }
.fx-table .fx-del  { min-inline-size: 3rem; text-align: center; }

/* --- as três faixas ---------------------------------------------------------- */
.fx-th-hist  { background: var(--cinza-050) !important; }
.fx-th-atual { background: var(--verde-050) !important; color: var(--verde-900) !important; }
.fx-th-fut   { background: var(--laranja-050) !important; color: var(--laranja-tinta) !important; }

.fx-cel.fx-c-atual { background: var(--fundo); }
.fx-cel.fx-c-fut   { background: var(--laranja-050); }

/* --- os campos --------------------------------------------------------------- */
/* A célula não tem moldura: a tabela inteira já é uma grade, e dezesseis caixinhas
   por linha viram ruído. A borda volta no foco, que é quando ela informa. */
.fx-table .form-control,
.fx-table .form-select {
  border: 0;
  background: transparent;
  border-radius: var(--raio-xs);
  font-size: .8125rem;
  font-weight: 600;
  padding: .5rem;
  box-shadow: none;
}

.fx-table .form-control:focus,
.fx-table .form-select:focus {
  background: var(--verde-050);
  box-shadow: inset 0 0 0 2px var(--verde-300);
}

.fx-table .fx-item .form-control { text-align: start; color: var(--verde-900); }
.fx-table .fx-meio .form-select,
.fx-table .fx-inst .form-control { text-align: start; font-weight: 500; }

/* ⚠️ O HOVER REPINTA TAMBÉM AS GRUDADAS. Elas têm fundo próprio (senão as colunas
   de mês passariam por baixo delas na rolagem), e sem esta regra a linha inteira
   acendia menos os dois primeiros campos — como se fossem de outra linha. */
.fx-table tbody tr:hover td,
.fx-table tbody tr:hover .fx-item,
.fx-table tbody tr:hover .fx-meio { background: var(--cinza-050); }

/* --- a linha de totais ------------------------------------------------------- */
.fx-tot,
.fx-tot-l {
  font-weight: 800;
  color: var(--verde-900);
  background: var(--fundo) !important;
  padding: .5rem;
  font-variant-numeric: tabular-nums;
}

.fx-tot { text-align: end; }

/* =============================================================================
   As setas de rolagem horizontal (`core/sr-rolagem.js`)
   -----------------------------------------------------------------------------
   ⚠️ A SETA SÓ APARECE QUANDO HÁ PARA ONDE IR. Uma seta permanentemente visível e
   às vezes inerte ensina que clicar nela não faz nada — e aí ela deixa de ser
   clicada quando funciona. Quem liga e desliga é o módulo, pelas classes
   `tem-esq` / `tem-dir`.
   ----------------------------------------------------------------------------- */
.sr-rolagem { position: relative; }

.sr-rolagem .sr-rolagem-seta {
  position: absolute;
  inset-block: 0;
  inline-size: 2.875rem;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 5;
}

.sr-rolagem .sr-rolagem-seta.esq {
  inset-inline-start: 0;
  justify-content: flex-start;
  padding-inline-start: .25rem;
  background: linear-gradient(to right, rgb(255 255 255 / 96%), transparent);
}

.sr-rolagem .sr-rolagem-seta.dir {
  inset-inline-end: 0;
  justify-content: flex-end;
  padding-inline-end: .25rem;
  background: linear-gradient(to left, rgb(255 255 255 / 96%), transparent);
}

.sr-rolagem.tem-esq .sr-rolagem-seta.esq,
.sr-rolagem.tem-dir .sr-rolagem-seta.dir { opacity: 1; }

/* ⚠️ 44px É O ALVO MÍNIMO DE TOQUE (§5.2), e o modelo usa 30px. A seta é o único
   jeito de chegar ao mês 12 num celular — é o último lugar onde caberia encolher
   o alvo por elegância. */
.sr-rolagem .sr-rolagem-seta button {
  pointer-events: auto;
  inline-size: var(--sr-toque-min, 44px);
  block-size: var(--sr-toque-min, 44px);
  border-radius: 50%;
  border: 1px solid var(--verde-300);
  background: #fff;
  color: var(--verdeEscuro);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--sombra-sm);
  transition: background-color .15s ease, color .15s ease;
}

.sr-rolagem .sr-rolagem-seta button:hover {
  background: var(--verdeEscuro);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .sr-rolagem .sr-rolagem-seta,
  .sr-rolagem .sr-rolagem-seta button { transition: none; }
}

/* --- a mesma seta, sobre uma BARRA DE ABA (05/10/2026) ----------------------- */
/* ⚠️ O QUE MUDA É A MOLDURA, E NÃO O ALVO DE TOQUE. A tira de abas é mais baixa que
   uma tabela e tem canto arredondado: o degradê retangular da tabela apareceria por
   fora da borda, nos quatro cantos. O botão continua com os 44px do §5.2 — é o
   último lugar onde caberia encolher o alvo por elegância, e numa tira de ~46px ele
   cabe. */
.sr-rolagem-abas .sr-rolagem-seta {
  inline-size: 2.5rem;
  border-radius: var(--raio-md);
}

.sr-rolagem-abas .sr-rolagem-seta.esq {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.sr-rolagem-abas .sr-rolagem-seta.dir {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* A tira já tem borda e sombra próprias; a seta sobre ela fica mais discreta, só com
   a borda, senão são duas sombras empilhadas no mesmo centímetro. */
.sr-rolagem-abas .sr-rolagem-seta button {
  inline-size: 2rem;
  block-size: 2rem;
  font-size: .9375rem;
  box-shadow: none;
}

/* ⚠️ O ALVO DE TOQUE CONTINUA 44px, por área invisível — e não por tamanho visível.
   É o que o §5.2 pede sem obrigar a desenhar um botão do tamanho da tira inteira. */
.sr-rolagem-abas .sr-rolagem-seta button::after {
  content: "";
  position: absolute;
  inline-size: var(--sr-toque-min, 44px);
  block-size: var(--sr-toque-min, 44px);
}

.sr-rolagem-abas .sr-rolagem-seta button { position: relative; }

/* --- o pulso da linha recém-criada (`pages/modulos.js`) ---------------------- */
/* ⚠️ PULSO, E NÃO ESTADO. Ele responde "a linha caiu aqui" e sai — marcar a linha
   como nova de forma permanente exigiria saber quando ela deixa de ser nova, que é
   pergunta sem resposta. Dois segundos e meio é o que o `destacarLinhaNova` conta. */
.sr-linha-nova > td,
.sr-linha-nova > td.fx-item,
.sr-linha-nova > td.fx-meio {
  background: var(--verde-050);
  transition: background-color .9s ease-out;
}

/* A borda esquerda é o que sobrevive ao fundo sumindo: em tabela larga, um fundo
   levemente verde numa linha some entre as outras. */
.sr-linha-nova > td:first-child {
  box-shadow: inset .1875rem 0 0 0 var(--verdeMedio);
}

@media (prefers-reduced-motion: reduce) {
  .sr-linha-nova > td { transition: none; }
}

/* =============================================================================
   E51 — FLUXO DE CAIXA POR CATEGORIA (modelo de 26/09/2026, `fluxo_categorias.js`)
   -----------------------------------------------------------------------------
   Categoria como linha-mãe que soma as suas descrições, a data da compra com a
   fatura do cartão, parcelas, "Cartão a classificar", filtro por meio e os
   compromissos além da janela. O desenho é o do modelo; as CORES são do kit
   (mesmo mapa da E41, logo acima): teal → `--verde-*`, âmbar → `--laranja-*`.
   ----------------------------------------------------------------------------- */

/* --- a troca Planilha × Dashboard ------------------------------------------- */
.fxd-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: .6875rem;
  background: var(--cinza-050);
  border: 1px solid var(--linha);
  margin: .125rem 0 .875rem;
  max-inline-size: 100%;
}

.fxd-switch a {
  padding: .5rem .875rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: .8125rem;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}

.fxd-switch a.on {
  background: #fff;
  color: var(--verde-900);
  box-shadow: var(--sombra-sm);
}

.fxd-switch a:focus-visible { outline: 2px solid var(--verdeMedio); outline-offset: 2px; }

@media (max-width: 720px) {
  .fxd-switch { display: flex; }
  .fxd-switch a { flex: 1; text-align: center; padding: .5rem; }
  .fxd-switch .lg { display: none; }
}

/* --- a planilha: a primeira coluna é mais larga, e só ela gruda ------------- */
.fx-planilha th,
.fx-planilha td { border-inline-end: 1px solid var(--linha-2); }

.fx-planilha .fx-cel .form-control { font-variant-numeric: tabular-nums; }

.fx-planilha .fx-item {
  min-inline-size: 14.375rem;
  max-inline-size: 14.375rem;
}

/* ⚠️ O MEIO DEIXA DE GRUDAR aqui (literal ao modelo). Com a primeira coluna mais
   larga, duas grudadas comeriam metade de uma tela de notebook. */
.fx-planilha .fx-meio {
  position: static;
  inset-inline-start: auto;
  min-inline-size: 7.5rem;
}

.fx-planilha thead .fx-meio { z-index: 2; }

.fx-planilha .fx-data { min-inline-size: 8.25rem; text-align: start; }
.fx-planilha thead .fx-data { text-align: start; }

/* A linha-mãe: a categoria, com o subtotal de cada mês. */
.fx-n1 > td {
  background: var(--verde-050);
  border-block-end: 1px solid var(--verde-300);
}

.fx-n1 > .fx-item {
  background: var(--verde-050);
  padding: .4375rem .5rem;
  font-weight: 800;
  color: var(--verde-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-n1 .fx-sub1 {
  padding: .4375rem .5rem;
  text-align: end;
  font-weight: 800;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
}

/* ⚠️ O MEIO TEM FUNDO BRANCO PRÓPRIO (`.fx-table .fx-meio`, da época em que ele grudava) e
   vencia o verde da linha-mãe: a coluna aparecia branca no meio da faixa (visto pelo Igor,
   28/09/2026). Aqui a linha-mãe repinta o meio também. */
.fx-planilha .fx-n1 > td.fx-meio { background: var(--verde-050); }
.fx-planilha.fx-table-fut .fx-n1 > td.fx-meio,
.fx-table-fut .fx-planilha .fx-n1 > td.fx-meio { background: var(--laranja-050); }

.fx-planilha tbody tr.fx-n1:hover td,
.fx-planilha tbody tr.fx-n1:hover .fx-item { background: var(--verde-050); }

.fx-n2 > .fx-item { background: #fff; }
.fx-n2 .fx-item .form-control { padding-inline-start: 1.25rem; }

.fx-n1-nome {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: text;
  border-block-end: 1px dashed transparent;
  max-inline-size: 11.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.fx-n1-nome:hover { border-block-end-color: var(--verde-300); }
.fx-n1-fixo { cursor: default; }

.fx-tog {
  border: 1px solid var(--verde-300);
  background: #fff;
  border-radius: .25rem;
  cursor: pointer;
  color: var(--verde-700);
  font-weight: 800;
  font-size: .6875rem;
  line-height: 1;
  inline-size: 1rem;
  block-size: 1rem;
  padding: 0;
  margin-inline-end: .4375rem;
  vertical-align: 1px;
}

.fx-tog:hover { background: var(--verde-050); }

.fx-editcat {
  font-weight: 700;
  color: var(--verde-900);
  border: 1px solid var(--verde-300) !important;
  background: #fff !important;
}

.fx-novacat > td { background: var(--verde-050); }

.fx-addrow td { padding: .3125rem .5rem; background: #fff; }
.fx-addrow .fx-mini { padding-inline-start: 1.25rem; }

/* Botões-texto do modelo: "+ adicionar descrição", "parcelar", "classificar". */
.fx-mini {
  border: 0;
  background: none;
  color: var(--verde-700);
  font-weight: 700;
  font-size: .6875rem;
  cursor: pointer;
  padding: 0;
}

.fx-mini:hover { text-decoration: underline; }
.fx-mini:focus-visible { outline: 2px solid var(--verdeMedio); outline-offset: 2px; }

.fx-del-btn {
  border: 0;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  font-size: .8125rem;
  padding: .25rem .375rem;
  border-radius: var(--raio-xs);
}

.fx-del-btn:hover { color: var(--vermelho); background: var(--cinza-050); }

.fx-confirma {
  color: var(--vermelho) !important;
  font-weight: 800;
  font-size: .65625rem;
  white-space: nowrap;
}

.fx-add {
  margin-block-start: .625rem;
  border: 1px dashed var(--verde-300);
  background: #fff;
  color: var(--verde-700);
  font-weight: 700;
  font-size: .8125rem;
  border-radius: var(--raio-sm);
  padding: .4375rem .875rem;
  cursor: pointer;
}

.fx-add:hover,
.fx-add.on { background: var(--verde-700); color: #fff; border-color: var(--verde-700); }

.fx-vazio { padding: .75rem; color: var(--tinta-suave); font-style: italic; }
.fx-meta { color: var(--tinta-suave); font-size: .6875rem; padding: .25rem .5rem; }

/* --- a linha do filtro e o painel de cartões -------------------------------- */
.fx-outline {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .71875rem;
  margin: 0 0 .5rem;
  flex-wrap: wrap;
}

.fx-filtro-l { font-weight: 700; color: var(--verde-900); margin: 0; }

.fx-filtro {
  inline-size: auto;
  min-inline-size: 10rem;
  font-size: .75rem;
}

/* A busca por descrição, ao lado do filtro de meio (a caixa que a tabela antiga tinha). */
.fx-busca {
  inline-size: 14rem;
  max-inline-size: 100%;
  font-size: .75rem;
}

.fx-busca-status:empty { display: none; }

.fx-planilha tr.fx-busca-oculta { display: none; }

.fx-cartoes {
  border: 1px solid var(--verde-300);
  border-radius: var(--raio-sm);
  padding: .625rem .75rem;
  margin: 0 0 .625rem;
  background: var(--verde-050);
}

.fx-cartoes-h { font-size: .71875rem; font-weight: 700; color: var(--verde-900); margin-block-end: .5rem; }

.fx-cartao-l {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-block-end: .375rem;
  flex-wrap: wrap;
}

.fx-cartao-l .form-control { inline-size: auto; }
.fx-cartao-l input[type="text"] { min-inline-size: 11.25rem; }
.fx-cartao-l label { font-size: .71875rem; color: var(--tinta); display: flex; align-items: center; gap: .3125rem; margin: 0; }
.fx-dia { inline-size: 3.5rem !important; text-align: center; }

.fx-confer {
  border: 1px solid var(--verde-300);
  border-radius: var(--raio-sm);
  padding: .5625rem .75rem;
  margin: 0 0 .625rem;
  background: var(--verde-050);
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1.125rem;
  align-items: center;
  font-size: .71875rem;
  color: var(--verde-900);
}

.fx-conf-item { font-weight: 600; }
.fx-conf-item b { font-weight: 800; }
.fx-conf-nota { font-weight: 500; color: var(--tinta); flex-basis: 100%; }

/* --- "Cartão a classificar": a pendência é âmbar, como o planejamento ------- */
.fx-pendencia {
  border: 1px solid var(--laranja-linha);
  background: var(--laranja-050);
  border-radius: var(--raio-sm);
  padding: .5rem .75rem;
  margin: 0 0 .625rem;
  font-size: .71875rem;
  color: var(--laranja-tinta);
}

.fx-pendencia b { color: var(--laranja-tinta); }
.fx-pend-nota { display: block; font-weight: 500; margin-block-start: .125rem; }
.fx-pend > .fx-item { background: var(--laranja-050); }

/* --- a data da compra e a fatura -------------------------------------------- */
.fx-fat {
  font-size: .65625rem;
  color: var(--verde-700);
  font-weight: 700;
  padding: 0 .5rem .25rem;
  white-space: nowrap;
  display: flex;
  gap: .25rem;
  align-items: center;
}

/* --- os painéis que abrem debaixo da linha ---------------------------------- */
.fx-parc-box {
  padding: .5rem .625rem !important;
  background: var(--verde-050);
  font-size: .71875rem;
  color: var(--verde-900);
}

.fx-parc-box > * { margin-inline-end: .875rem; vertical-align: middle; }
.fx-parc-box label { display: inline-flex; align-items: center; gap: .3125rem; color: var(--tinta); margin-block: .25rem; }
.fx-pre { font-weight: 700; color: var(--tinta-suave); }

.fx-pin {
  inline-size: 7.5rem !important;
  display: inline-block;
  border: 1px solid var(--verde-300) !important;
  background: #fff !important;
  text-align: start !important;
}

.fx-pin-sm { inline-size: 4rem !important; text-align: center !important; }
.fx-classif select.fx-pin { inline-size: auto !important; min-inline-size: 13rem; }

/* --- a meta do grupo --------------------------------------------------------- */
.fx-grp-meta {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  margin-block-end: .75rem;
  padding-block-end: .75rem;
  border-block-end: 1px dashed var(--linha);
}

.fx-grp-meta-lab { font-size: .75rem; font-weight: 700; color: var(--verde-900); margin: 0; }
.fx-grp-meta-in { inline-size: 9rem; text-align: end; }
.fx-grp-meta-stat { font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-grp-meta-stat.ok { color: var(--verde-700); }
.fx-grp-meta-stat.over { color: var(--vermelho); }

/* --- compromissos além da janela --------------------------------------------- */
.fx-futuro {
  margin-block-start: 1rem;
  border: 1px dashed var(--laranja-linha);
  border-radius: var(--raio-md);
  padding: .625rem .75rem;
  background: var(--laranja-050);
}

.fx-futuro-h { font-size: .71875rem; font-weight: 800; color: var(--laranja-tinta); margin-block-end: .5rem; }
.fx-futuro-h .fx-meta { display: block; font-weight: 500; color: var(--laranja-tinta); padding: .125rem 0 0; }
.fx-table-fut thead th { background: var(--laranja-050); color: var(--laranja-tinta); }
.fx-table-fut .fx-n1 > td,
.fx-table-fut .fx-n1 > .fx-item { background: var(--laranja-050); color: var(--laranja-tinta); }
.fx-fut-desc { display: block; padding: .375rem .5rem .375rem 1.25rem; font-size: .8125rem; color: var(--tinta); }

.fx-fut-badge {
  font-size: .65625rem;
  font-weight: 800;
  color: var(--laranja-tinta);
  background: var(--laranja-050);
  border: 1px solid var(--laranja-linha);
  border-radius: 999px;
  padding: 0 .4375rem;
  margin-inline-start: .375rem;
}

@media (max-width: 760px) {
  .fx-planilha .fx-item { min-inline-size: 11.875rem; max-inline-size: 11.875rem; }
  .fx-planilha .fx-data { min-inline-size: 7.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-grupo * { scroll-behavior: auto !important; }
}

/* =============================================================================
   A aba Carteira de Investimentos (§1.4, tipo `carteira`) — 19/09/2026.

   ⚠️ ESTE BLOCO REPRODUZ O `renderCarteira` DO `_fonte/Workspace.html`, por pedido
   do Igor: "nosso sistema precisa ficar exatamente igual o HTML... layout, cores e
   formas". O que está aqui é a folha dele traduzida para os nossos tokens, com as
   divergências declaradas no ponto exato em que acontecem.

   ⚠️⚠️ AS CORES DAS SÉRIES NÃO ESTÃO AQUI. As onze da paleta categórica e as três
   do gráfico de evolução chegam por `style` inline, escritas pelo C#
   (`DesenhoDaCarteira`) — elas são DADO da fatia, não estilo do componente, e
   precisam do mesmo valor no SVG e na legenda ao lado. O que esta folha define é
   a forma: tamanho, espaço, borda e tipografia.
   ============================================================================= */

/* --- títulos de seção — o `group-title` da fonte, com o ponto verde ------------ */
.sr-cart-grupo-box { margin-block-start: 1.25rem; }

.sr-cart-titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block-end: .75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--verde-900);
}

.sr-cart-ponto {
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background-color: var(--verdeMedio);
  flex: 0 0 auto;
}

/* --- o portão da CVM 30 -------------------------------------------------------
   Ele é a PRIMEIRA coisa que o planejador vê na aba enquanto o perfil não estiver
   apurado, e por isso não é um aviso de canto: ocupa a largura toda e traz o
   próximo passo dentro. */
.sr-cart-portao {
  padding: 1.25rem;
  border: 1px solid var(--linha);
  border-inline-start: 4px solid var(--verdeMedio);
  border-radius: var(--sr-raio);
  background-color: var(--verde-050);
}

.sr-cart-portao-cabeca { display: flex; gap: .875rem; align-items: flex-start; }
.sr-cart-portao-ic { font-size: 1.75rem; line-height: 1; flex: 0 0 auto; }
.sr-cart-portao-tit { margin: 0 0 .375rem; font-size: 1rem; font-weight: 700; color: var(--verde-900); }
.sr-cart-portao-sub { margin: 0; font-size: .875rem; color: var(--tinta); }

.sr-cart-portao-prog {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block: 1rem .875rem;
  font-size: .8125rem;
  color: var(--tinta-suave);
}

.sr-cart-portao-barra {
  flex: 1 1 auto;
  block-size: .5rem;
  border-radius: 999px;
  background-color: var(--linha);
  overflow: hidden;
}

.sr-cart-portao-barra > i {
  display: block;
  block-size: 100%;
  background-color: var(--verdeMedio);
  transition: inline-size .3s ease;
}

.sr-cart-portao-btn {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: var(--sr-raio);
  background-color: var(--verdeEscuro);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.sr-cart-portao-btn:hover, .sr-cart-portao-btn:focus-visible { background-color: var(--verde-900); color: #fff; }

/* --- as duas faixas que ainda não têm destino ---------------------------------
   ⚠️ ELAS FICAM DESABILITADAS, por decisão do Igor (19/09/2026), e o `.sr-cart-aviso`
   abaixo de cada uma diz por quê. O layout é o da fonte; o que não existe não
   finge existir (lei 7). */
.sr-cart-of {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--sr-raio);
  background-color: var(--cinza-050);
}

.sr-cart-of-txt { display: flex; gap: .75rem; align-items: center; }
.sr-cart-of-ic { font-size: 1.5rem; line-height: 1; }
.sr-cart-of-t { font-weight: 700; color: var(--verde-900); }
.sr-cart-of-d { font-size: .8125rem; color: var(--tinta-suave); }

.sr-cart-of-btn, .sr-cart-rel-btn {
  padding: .5rem .875rem;
  border: 1px solid var(--linha);
  border-radius: var(--sr-raio);
  background-color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--verde-900);
}

.sr-cart-rel-btn.primary { background-color: var(--verdeEscuro); border-color: var(--verdeEscuro); color: #fff; }

/* Os dois primeiros viraram `<a>` em 23/09/2026 (eles navegam, e link que navega é link — o
   meio do botão perde "abrir em nova aba" e o teclado do navegador). O desenho é o mesmo, e o
   que o `<a>` traz de fábrica sai daqui. */
a.sr-cart-rel-btn { display: inline-block; text-decoration: none; }
a.sr-cart-rel-btn:hover, a.sr-cart-rel-btn:focus-visible { background-color: var(--verde-050); }
a.sr-cart-rel-btn.primary:hover, a.sr-cart-rel-btn.primary:focus-visible { background-color: var(--verde-900); color: #fff; }

.sr-cart-of-btn:disabled, .sr-cart-rel-btn:disabled { opacity: .55; cursor: not-allowed; }

/* --- Open Finance na Carteira (23/09/2026) -------------------------------------
   A faixa ganhou destino; embaixo dela vem a mesma tabela de conexões do Fluxo
   (`_OpenFinanceConexoes`), com Desconectar. */
.sr-cart-of-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.sr-cart-of-btn:not(:disabled):hover,
.sr-cart-of-btn:not(:disabled):focus-visible { background-color: var(--verde-050); }
.sr-cart-of-btn.primary { background-color: var(--verdeEscuro); border-color: var(--verdeEscuro); color: #fff; }
.sr-cart-of-btn.primary:not(:disabled):hover,
.sr-cart-of-btn.primary:not(:disabled):focus-visible { background-color: var(--verde-900); }


/* A marca de origem da linha — lei 7: o que veio de outro sistema diz de onde veio. */
.sr-cart-origem {
  display: inline-block;
  margin-inline-start: .375rem;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background-color: var(--verde-050);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--verde-900);
  white-space: nowrap;
  vertical-align: middle;
}

/* A célula que a Pluggy escreve: texto, não campo. Mesmo recuo e altura do
   `form-control-sm`, para a linha não pular quando uma travada fica ao lado de uma
   editável. */
.sr-cel-travada {
  display: block;
  padding: .25rem .5rem;
  min-block-size: calc(1.5em + .5rem + 2px);
  color: var(--tinta);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}

.sr-cart-relatorios { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .875rem; }

.sr-cart-aviso {
  margin: .375rem 0 0;
  font-size: .75rem;
  font-style: italic;
  color: var(--tinta-suave);
}

/* --- os quatro cartões derivados ---------------------------------------------- */
.sr-cart-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
  margin-block-start: 1rem;
}

.sr-cart-kpi {
  padding: .875rem;
  border: 1px solid var(--linha);
  border-radius: var(--sr-raio);
  background-color: #fff;
}

.sr-cart-kpi-l { font-size: .75rem; color: var(--tinta-suave); }
.sr-cart-kpi-v { font-size: 1.375rem; font-weight: 700; color: var(--verde-900); line-height: 1.2; }
.sr-cart-kpi-s { font-size: .75rem; color: var(--tinta-suave); }

/* --- a rosca e a legenda ------------------------------------------------------ */
.sr-cart-aloc {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--sr-raio);
  background-color: #fff;
}

.sr-cart-aloc-rosca { flex: 0 0 auto; }
.sr-cart-rosca { display: block; }

/* O furo da rosca acompanha o cartão. Na fonte ele é `#fff` literal; aqui sai do
   token, senão num cartão que não for branco o furo aparece como uma moeda clara. */
.sr-cart-rosca-furo { fill: #fff; }
.sr-cart-rosca-n { font-size: 11px; font-weight: 800; fill: var(--verde-900); }
.sr-cart-rosca-lab { font-size: 8px; fill: var(--tinta-suave); }

.sr-cart-legenda { flex: 1 1 14rem; display: flex; flex-direction: column; gap: .375rem; }

.sr-cart-leg-item { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; }
.sr-cart-leg-nome { flex: 1 1 auto; color: var(--tinta); }
.sr-cart-leg-val { color: var(--verde-900); font-weight: 600; white-space: nowrap; }

.sr-cart-leg-dot {
  inline-size: .625rem;
  block-size: .625rem;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
}

.sr-cart-vazio { margin: 0; font-size: .875rem; color: var(--tinta-suave); max-inline-size: 18rem; }

/* --- os cartões por grupo de objetivo ----------------------------------------- */
.sr-cart-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
}

.sr-cart-grupo {
  padding: .875rem;
  border: 1px solid var(--linha);
  border-inline-start: 4px solid var(--sr-gc, var(--verdeMedio));
  border-radius: var(--sr-raio);
  background-color: #fff;
}

.sr-cart-grupo-nome { font-size: .8125rem; color: var(--tinta-suave); }
.sr-cart-grupo-val { font-size: 1.125rem; font-weight: 700; color: var(--verde-900); }
.sr-cart-grupo-pct { font-size: .75rem; color: var(--tinta-suave); }

.sr-cart-grupo-bar {
  block-size: .375rem;
  margin-block: .5rem .375rem;
  border-radius: 999px;
  background-color: var(--linha);
  overflow: hidden;
}

.sr-cart-grupo-bar > i { display: block; block-size: 100%; background-color: var(--sr-gc, var(--verdeMedio)); }

.sr-cart-grupo-nota { margin: .75rem 0 0; font-size: .75rem; color: var(--tinta-suave); }

/* --- a nota de análise --------------------------------------------------------- */
.sr-cart-nota {
  display: flex;
  gap: .75rem;
  padding: .875rem 1rem;
  margin-block-start: 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--sr-raio);
  font-size: .875rem;
  background-color: var(--verde-050);
}

.sr-cart-nota.atencao { background-color: var(--laranja-050); border-color: var(--laranja-linha); }
.sr-cart-nota-ic { flex: 0 0 auto; }

/* --- a evolução de 12 meses ----------------------------------------------------- */
.sr-cart-evc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
}

.sr-cart-evc-kpi {
  padding: .75rem;
  border: 1px solid var(--linha);
  border-block-start: 3px solid var(--sr-ec, var(--verdeMedio));
  border-radius: var(--sr-raio);
  background-color: #fff;
}

.sr-cart-evc-kpi .l { font-size: .75rem; color: var(--tinta-suave); }
.sr-cart-evc-kpi .v { font-size: 1.125rem; font-weight: 700; color: var(--sr-ec, var(--verde-900)); }
.sr-cart-evc-kpi .s { font-size: .6875rem; color: var(--tinta-suave); min-block-size: 1em; }

.sr-cart-evc-grafico {
  margin-block-start: .875rem;
  padding: .75rem;
  border: 1px solid var(--linha);
  border-radius: var(--sr-raio);
  background-color: #fff;
}

.sr-cart-grade { stroke: var(--linha-2); stroke-width: 1; }
.sr-cart-eixo { font-size: 9px; fill: var(--tinta-suave); }

.sr-cart-evc-legenda { display: flex; gap: 1rem; margin-block-start: .5rem; font-size: .75rem; color: var(--tinta); }
.sr-cart-evc-legenda i { display: inline-block; inline-size: .625rem; block-size: .625rem; border-radius: 50%; margin-inline-end: .375rem; }

.sr-cart-evc-nota { margin: .75rem 0 0; font-size: .75rem; color: var(--tinta-suave); }

/* --- o cartão de dica dos gráficos (core/sr-dica.js) ---------------------------
   O `#srChartTip` da fonte. As cores são literais pelo mesmo motivo das paletas do
   `DesenhoDaCarteira`: o cartão é escuro de propósito, sobre qualquer fundo, e não
   deriva dos tokens do cartão claro. `position: fixed` porque ele segue o ponteiro
   e não pode ser cortado por um `overflow` de quem o contém; `pointer-events: none`
   impede que ele entre na frente do alvo e o esconda — piscada infinita. */
.sr-dica-quadro { display: contents; }

.sr-dica {
  position: fixed;
  z-index: 1080;
  min-inline-size: 10rem;
  max-inline-size: 16.25rem;
  padding: .625rem .75rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background-color: #0f2e2c;
  color: #fff;
  box-shadow: 0 12px 34px -8px rgba(0, 0, 0, .5);
  font-size: .75rem;
  line-height: 1.45;
  text-align: start;
  pointer-events: none;
}

.sr-dica-t {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-block-end: .2rem;
  font-size: .8125rem;
  font-weight: 800;
}

.sr-dica-sw { flex: none; inline-size: .625rem; block-size: .625rem; border-radius: 3px; }

.sr-dica-l {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: .125rem;
  color: #cfe8e3;
}

/* O `display: flex` acima venceria o `[hidden]` do navegador: sem esta linha, a "Valor"
   de uma fatia sem reais continuaria na caixa, vazia. */
.sr-dica [hidden] { display: none; }

.sr-dica-l > b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sr-dica-pt {
  display: inline-block;
  inline-size: .5625rem;
  block-size: .5625rem;
  margin-inline-end: .5rem;
  border-radius: 50%;
}

.sr-dica-guia { stroke: #0a5f5e; stroke-width: 1; stroke-dasharray: 3 3; opacity: .4; pointer-events: none; }

/* O realce da fatia sob o ponteiro — o `svg [data-tip]:hover` da fonte. */
.sr-dica-fatia { cursor: default; transition: opacity .12s, filter .12s; }
.sr-dica-fatia:hover { opacity: .92; filter: brightness(1.06); }

@media (prefers-reduced-motion: reduce) {
  .sr-dica-fatia { transition: none; }
}

/* --- o bloco do suitability ------------------------------------------------------ */
.sr-cart-suit {
  padding: 1rem;
  border: 1px solid var(--sr-pc, var(--linha));
  border-radius: var(--sr-raio);
  background-color: #fff;
}

.sr-cart-suit-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.sr-cart-suit-lab { font-size: .75rem; color: var(--tinta-suave); }
.sr-cart-suit-perfil { font-size: 1.5rem; font-weight: 800; color: var(--sr-pc, var(--verde-900)); }
.sr-cart-suit-desc { margin: .5rem 0 .875rem; font-size: .875rem; color: var(--tinta); }

.sr-cart-suit-selo {
  padding: .25rem .625rem;
  border-radius: 999px;
  background-color: var(--sr-pc, var(--verdeEscuro));
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.sr-cart-enq {
  padding: .75rem .875rem;
  border-radius: var(--sr-raio);
  font-size: .8125rem;
  background-color: var(--verde-050);
}

.sr-cart-enq.atencao { background-color: var(--laranja-050); }

.sr-cart-rec { margin-block-start: 1rem; }
.sr-cart-rec-tit { font-weight: 700; color: var(--verde-900); margin-block-end: .75rem; }

/* E65 (05/10/2026) — o título da recomendação é o botão que abre a tela do Arquétipo
   ("A tela do Arquétipo deverá ser aberta quando clicável aqui na carteira"). O `<details>` faz
   isso sem uma linha de JavaScript: fechado, é o título de sempre; aberto, a tela inteira.  */
.sr-cart-rec-aq > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  cursor: pointer;
  border-radius: var(--raio-xs);
}

/* O marcador padrão some e volta como seta nossa, do mesmo verde do título. */
.sr-cart-rec-aq > summary::-webkit-details-marker { display: none; }
.sr-cart-rec-aq > summary { list-style: none; }

.sr-cart-rec-aq > summary::after {
  content: "▸";
  color: var(--tinta-suave);
  transition: transform .15s ease;
}

.sr-cart-rec-aq[open] > summary::after { transform: rotate(90deg); }

/* ⚠️ `transition` só fora do `prefers-reduced-motion` (DoD §11.4). */
@media (prefers-reduced-motion: reduce) {
  .sr-cart-rec-aq > summary::after { transition: none; }
}

.sr-cart-rec-abrir { font-weight: 400; color: var(--tinta-suave); font-size: .75rem; }

.sr-cart-rec-aq-corpo {
  margin-block: .75rem 1rem;
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--linha);
}

.sr-cart-rec-roscas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }
.sr-cart-rec-col { text-align: center; }
.sr-cart-rec-lbl { font-size: .75rem; color: var(--tinta-suave); margin-block-end: .375rem; }
.sr-cart-rec-seta { font-size: 1.5rem; color: var(--tinta-suave); }
.sr-cart-rec-nota { margin: .5rem 0 1rem; font-size: .75rem; color: var(--tinta-suave); }

.sr-cart-ajuste { margin-block-start: 1rem; font-size: .8125rem; }
.sr-cart-ajuste .sr-cart-leg-dot { margin-inline-end: .375rem; }

/* =============================================================================
   O histórico mensal do fluxo (§7.8) — o painel que fecha a aba de Fluxo de
   Caixa no `_fonte/Workspace.html`, com o `sparkline` do saldo.

   ⚠️ AS DUAS CORES DO DESENHO NÃO ESTÃO AQUI. O verde da linha e o vermelho do
   tracejado do zero chegam por atributo, escritos pelo `DesenhoDoHistorico`:
   eles são parte do desenho, e a linha e a área precisam do mesmo valor. O que
   esta folha define é forma, espaço e a tipografia dos eixos.
   ============================================================================= */
.sr-hist-box {
  margin-block-start: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--linha);
  border-radius: var(--sr-raio);
  background-color: #fff;
}

.sr-hist-cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.sr-hist-tit { margin: 0; font-size: 1rem; font-weight: 700; color: var(--verde-900); }
.sr-hist-sub { margin: .25rem 0 0; font-size: .8125rem; color: var(--tinta-suave); }

.sr-hist-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .75rem;
  margin-block-start: 1rem;
}

.sr-hist-kpi {
  padding: .75rem;
  border: 1px solid var(--linha);
  border-radius: var(--sr-raio);
  background-color: var(--verde-050);
}

.sr-hist-l { font-size: .75rem; color: var(--tinta-suave); }
.sr-hist-v { font-size: 1.125rem; font-weight: 700; color: var(--verde-900); line-height: 1.2; }

.sr-hist-grafico { margin-block-start: 1rem; }
.sr-hist-spark { display: block; }
.sr-hist-grade { stroke: var(--linha-2); stroke-width: 1; }
.sr-hist-eixo { font-size: 9px; fill: var(--tinta-suave); }

/* ==========================================================================
   A busca que filtra linhas de tabela (22/09/2026)

   ⚠️ ELA ESCONDE LINHAS, E SÓ. Os totais do rodapé continuam somando todas —
   ver o `remarks` do `FiltroDeTabelaVm`. A própria caixa diz isso no contador,
   e é por causa dessa frase que a faixa precisa caber em duas linhas no
   celular sem empurrar a tabela.
   ========================================================================== */
.sr-filtro {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--linha);
}

.sr-filtro input[type="search"] {
    max-width: 22rem;
    flex: 1 1 12rem;
}

/* O contador só ocupa espaço quando tem o que dizer. */
.sr-filtro [data-sr-filtro-status]:empty {
    display: none;
}

/* ==========================================================================
   ZERO DÍVIDAS — a folha do `ZeroDividasHTML.html` que o Igor enviou (23/09/2026)

   ⚠️ TUDO ESCOPADO EM `.zd`. A fonte é uma página inteira com `:root`, `body` e
   seletores de elemento (`h3`, `ul li`, `footer`); solta aqui, ela repintaria o
   produto inteiro. Cada regra abaixo nasce de uma da fonte, prefixada.

   ⚠️ AS CORES E AS FONTES SÃO AS DO SISTEMA, e isso não é adaptação: a fonte usa
   `#0E7C7B`, `#1CAF9C`, `#C81D25`, Fraunces e Plus Jakarta Sans — exatamente o
   `--verdeEscuro`, `--verdeMedio`, `--vermelho`, `--sr-ff-display` e
   `--sr-ff-sans` do §5.1, que o `fontes.css` já serve do próprio wwwroot (a
   CSP não deixa buscar no Google Fonts — ver o cabeçalho daquele arquivo).
   Onde a fonte tem um tom que o token não cobre, ele está escrito à mão e
   marcado.

   ⚠️ NÃO HÁ HERO. O HTML abre com um cabeçalho de capa (logo, "Zero Dívidas",
   as três estatísticas); a aba mora dentro do layout do produto, que já tem
   topo e título — pedido do Igor, 23/09/2026: "não precisa dos cabeçalhos,
   basta encaixar tudo no layout de hoje".
   ========================================================================== */
.zd {
    --zd-teal: var(--verdeEscuro);
    --zd-teal-deep: #0A5A59;
    --zd-teal-bright: var(--verdeMedio);
    --zd-mint-soft: #EEFAF2;
    --zd-navy: #0E3B3B;
    --zd-muted: #5B7184;
    --zd-line: #DDE6EA;
    --zd-ink: #12302F;
    --zd-bad: var(--vermelho);
    --zd-bad-soft: #FBE9EB;
    --zd-good-soft: #D4F4DD;
    --zd-warn-soft: #FDEFF0;
    --zd-borda-boa: #BFE7CF;
    --zd-sombra: 0 1px 2px rgba(14, 124, 123, .05), 0 8px 28px rgba(14, 124, 123, .09);

    color: var(--zd-ink);
    font-family: var(--sr-ff-sans);
    line-height: 1.55;
}

.zd h3,
.zd h4.zd-serif {
    font-family: var(--sr-ff-display);
}

/* --------------------------------------------------------------- rótulo de seção */
.zd-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 34px 4px 16px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--zd-teal);
}

.zd-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--zd-line);
}

/* --------------------------------------------------------------- painel */
.zd-panel {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--zd-sombra);
    border: 1px solid var(--zd-line);
    overflow: hidden;
}

.zd-panel + .zd-panel {
    margin-top: 22px;
}

.zd-panel-head {
    padding: 26px 30px;
    border-bottom: 1px solid var(--zd-line);
}

.zd-panel-head h2 {
    font-family: var(--sr-ff-display);
    font-size: 1.45rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.zd-step-num {
    background: var(--zd-teal);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-grid;
    place-items: center;
    font-family: var(--sr-ff-sans);
    font-size: .95rem;
    font-weight: 700;
    flex: none;
}

.zd-panel-head p {
    color: var(--zd-muted);
    font-size: .92rem;
    margin: 4px 0 0;
}

.zd-panel-body {
    padding: 30px;
}

/* --------------------------------------------------------------- lista de dívidas */
.zd-debt-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zd-debt-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1.5px solid var(--zd-line);
    border-radius: 14px;
    background: #FBFDFC;
}

.zd-debt-flag {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    flex: none;
}

.zd-debt-flag.bad  { background: var(--zd-bad-soft); }
.zd-debt-flag.warn { background: var(--zd-warn-soft); }
.zd-debt-flag.good { background: var(--zd-good-soft); }

.zd-debt-info .name {
    font-weight: 700;
    font-size: .97rem;
}

.zd-debt-info .meta {
    font-size: .8rem;
    color: var(--zd-muted);
    margin-top: 2px;
}

.zd-debt-tag {
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.zd-debt-tag.bad  { background: var(--zd-bad-soft);  color: var(--zd-bad); }
.zd-debt-tag.warn { background: var(--zd-warn-soft); color: #A21A22; }
.zd-debt-tag.good { background: var(--zd-good-soft); color: var(--zd-teal); }

.zd-debt-amount {
    text-align: right;
    font-weight: 700;
    font-family: var(--sr-ff-display);
    font-size: 1.1rem;
    color: var(--zd-navy);
}

.zd-debt-amount small {
    display: block;
    font-family: var(--sr-ff-sans);
    font-weight: 500;
    font-size: .72rem;
    color: var(--zd-muted);
}

.zd-totals-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding: 16px 18px;
    background: var(--zd-mint-soft);
    border-radius: 14px;
    border: 1px solid var(--zd-borda-boa);
}

.zd-totals-bar .t-amt {
    font-family: var(--sr-ff-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--zd-navy);
}

.zd-totals-bar .t-lbl {
    font-size: .82rem;
    color: var(--zd-muted);
}

.zd-empty {
    text-align: center;
    padding: 34px 20px;
    color: var(--zd-muted);
}

.zd-empty .ico {
    font-size: 2.2rem;
    opacity: .4;
    margin-bottom: 8px;
}

/* --------------------------------------------------------------- diagnóstico */
.zd-diag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.zd-diag-card {
    background: #fff;
    border: 1px solid var(--zd-line);
    border-radius: 15px;
    padding: 20px;
    box-shadow: var(--zd-sombra);
}

.zd-diag-card .lbl {
    font-size: .8rem;
    color: var(--zd-muted);
    font-weight: 600;
}

.zd-diag-card .val {
    font-family: var(--sr-ff-display);
    font-size: 1.85rem;
    font-weight: 600;
    margin-top: 6px;
    color: var(--zd-navy);
}

.zd-diag-card .val.danger { color: var(--zd-bad); }

.zd-diag-card .sub {
    font-size: .78rem;
    color: var(--zd-muted);
    margin-top: 4px;
}

.zd-diag-card.accent {
    background: linear-gradient(150deg, var(--zd-navy), #0B4F4E);
    border: none;
}

.zd-diag-card.accent .lbl,
.zd-diag-card.accent .sub { color: #A8CFC9; }
.zd-diag-card.accent .val { color: #fff; }

/* --------------------------------------------------------------- barra principal × juros */
.zd-split {
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--zd-line);
    border-radius: 15px;
    padding: 22px;
    box-shadow: var(--zd-sombra);
}

.zd-split h4 {
    font-family: var(--sr-ff-sans);
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--zd-navy);
}

.zd-split-bar {
    height: 34px;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    font-size: .74rem;
    font-weight: 700;
    color: #fff;
}

.zd-split-bar .princ { background: var(--zd-teal); }
.zd-split-bar .juros { background: var(--zd-bad); }

.zd-split-bar span {
    display: grid;
    place-items: center;
    min-width: fit-content;
    padding: 0 8px;
}

.zd-split-legend {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.zd-split-legend div {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .84rem;
    color: var(--zd-muted);
}

.zd-lg-dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

/* --------------------------------------------------------------- simulador */
.zd-sim {
    background: #fff;
    border: 1px solid var(--zd-line);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--zd-sombra);
    margin-top: 18px;
}

.zd-sim h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.zd-sim > p {
    font-size: .88rem;
    color: var(--zd-muted);
    margin-bottom: 18px;
}

.zd-sim-control {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: #F6FBF9;
    border: 1px solid var(--zd-borda-boa);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.zd-sim-control label {
    font-size: .86rem;
    font-weight: 700;
    color: var(--zd-navy);
    margin: 0;
}

.zd-sim-control input[type="range"] {
    flex: 1;
    min-width: 160px;
    accent-color: var(--zd-teal);
    touch-action: none;
    height: 24px;
}

.zd-pay-edit {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1.5px solid var(--zd-teal-bright);
    background: #fff;
    border-radius: 10px;
    padding: 6px 12px;
    min-width: 140px;
}

.zd-pay-edit:focus-within {
    box-shadow: 0 0 0 3px rgba(28, 175, 156, .15);
}

.zd-pay-prefix {
    font-size: .9rem;
    font-weight: 700;
    color: var(--zd-muted);
}

.zd-pay-edit input {
    border: none;
    outline: none;
    font-family: var(--sr-ff-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--zd-teal);
    width: 100%;
    min-width: 50px;
    background: transparent;
    text-align: right;
}

.zd-pay-suffix {
    font-size: .82rem;
    color: var(--zd-muted);
    white-space: nowrap;
}

.zd-sim-sobra {
    font-size: .82rem;
    color: var(--zd-teal);
    background: var(--zd-good-soft);
    border: 1px solid var(--zd-borda-boa);
    border-radius: 10px;
    padding: 9px 13px;
    margin-bottom: 18px;
}

.zd-sim-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.zd-sim-card {
    border: 1.5px solid var(--zd-line);
    border-radius: 14px;
    padding: 18px;
    position: relative;
}

.zd-sim-card.win {
    border-color: var(--zd-teal-bright);
    background: linear-gradient(160deg, var(--zd-mint-soft), #fff);
    box-shadow: 0 6px 20px rgba(28, 175, 156, .13);
}

.zd-sim-card .scn {
    font-size: .82rem;
    font-weight: 700;
    color: var(--zd-navy);
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.zd-sim-card .win-tag {
    position: absolute;
    top: -10px;
    right: 14px;
    background: var(--zd-teal);
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.zd-sim-row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .85rem;
    padding: 5px 0;
    border-bottom: 1px dashed var(--zd-line);
}

.zd-sim-row:last-child { border-bottom: none; }
.zd-sim-row .k { color: var(--zd-muted); }
.zd-sim-row .v { font-weight: 700; color: var(--zd-navy); text-align: right; }
.zd-sim-row .v.free { color: var(--zd-teal); font-family: var(--sr-ff-display); }
.zd-sim-row .v.danger { color: var(--zd-bad); }

.zd-sim-note {
    font-size: .78rem;
    color: var(--zd-muted);
    margin: 14px 0 0;
    line-height: 1.55;
}

/* --------------------------------------------------------------- lei 14.181 */
.zd-law {
    border-radius: 16px;
    padding: 24px 26px;
    margin-top: 18px;
    border: 1px solid;
}

.zd-law.eligible {
    background: linear-gradient(150deg, #FDEFF0, #FEF7F7);
    border-color: #F0C2C5;
}

.zd-law.info {
    background: #F3F9F7;
    border-color: #CDE7E1;
}

.zd-law-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.zd-law-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    flex: none;
}

.zd-law.eligible .zd-law-ico { background: #F6D5D7; }
.zd-law.info .zd-law-ico { background: #DCEFEA; }

.zd-law-head h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.zd-law p {
    font-size: .91rem;
    color: #46605F;
    margin-bottom: 8px;
}

.zd-law .crit {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .88rem;
    padding: 5px 0;
    color: #3D5D5C;
}

.zd-law .crit .ck {
    flex: none;
    font-weight: 800;
}

.zd-law .crit.yes .ck { color: var(--zd-teal); }
.zd-law .crit.no .ck { color: var(--zd-bad); }

.zd-law-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.zd-law-channels span {
    background: rgba(255, 255, 255, .7);
    border: 1px solid #EFC9CB;
    font-size: .78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    color: #A21A22;
}

.zd-law.info .zd-law-channels span {
    border-color: #CFE7E2;
    color: var(--zd-teal);
}

/* --------------------------------------------------------------- recomendações */
.zd-rec {
    background: #fff;
    border: 1px solid var(--zd-line);
    border-left: 4px solid var(--zd-teal);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 14px;
    box-shadow: var(--zd-sombra);
}

.zd-rec.priority {
    background: linear-gradient(100deg, #FDEFF0, #fff 40%);
}

.zd-rec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.zd-rec-ico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--zd-good-soft);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    flex: none;
}

.zd-rec.priority .zd-rec-ico { background: var(--zd-warn-soft); }

.zd-rec-head h3 {
    font-size: 1.12rem;
    font-weight: 600;
    margin: 0;
}

.zd-rec-badge {
    font-size: .68rem;
    font-weight: 800;
    background: var(--zd-teal);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.zd-rec p {
    font-size: .93rem;
    color: #46605F;
    margin-bottom: 6px;
}

.zd-rec .save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--zd-good-soft);
    color: var(--zd-teal);
    font-weight: 700;
    font-size: .9rem;
    padding: 8px 14px;
    border-radius: 10px;
    margin-top: 8px;
}

.zd-rec ul {
    margin: 8px 0 0 2px;
    list-style: none;
    padding: 0;
}

.zd-rec ul li {
    font-size: .89rem;
    color: #46605F;
    padding: 4px 0 4px 22px;
    position: relative;
}

.zd-rec ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--zd-teal-bright);
    font-weight: 700;
}

/* --------------------------------------------------------------- plano de ação */
.zd-plano {
    background: linear-gradient(155deg, #07403F, #0B4F4E);
    border-radius: 18px;
    padding: 30px;
    color: #fff;
    margin-top: 8px;
}

.zd-plano h3 {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.zd-plano > p {
    color: #A8CFC9;
    font-size: .9rem;
    margin-bottom: 20px;
}

.zd-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zd-pstep {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.zd-pstep:last-child { border-bottom: none; }

.zd-pstep .pn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--zd-teal);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .9rem;
    flex: none;
}

.zd-pstep .pc h5 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.zd-pstep .pc p {
    font-size: .86rem;
    color: #B7D6D1;
    margin: 0;
}

/* --------------------------------------------------------------- reserva */
.zd-reserva {
    background: var(--zd-good-soft);
    border: 1px solid var(--zd-borda-boa);
    border-radius: 16px;
    padding: 24px;
    margin-top: 18px;
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.zd-reserva .ri {
    font-size: 2rem;
    flex: none;
}

.zd-reserva .rt {
    flex: 1;
    min-width: 240px;
}

.zd-reserva h4 {
    font-family: var(--sr-ff-display);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--zd-teal);
    margin-bottom: 4px;
}

.zd-reserva p {
    font-size: .88rem;
    color: #0A5A59;
    margin: 0;
}

.zd-reserva .ramt {
    font-family: var(--sr-ff-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--zd-teal);
}

/* --------------------------------------------------------------- dívida boa × ruim */
.zd-edu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.zd-edu {
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--zd-line);
}

.zd-edu.bad  { background: var(--zd-bad-soft);  border-color: #F0C2C5; }
.zd-edu.good { background: var(--zd-good-soft); border-color: var(--zd-borda-boa); }

.zd-edu h4 {
    font-family: var(--sr-ff-display);
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.zd-edu.bad h4  { color: var(--zd-bad); }
.zd-edu.good h4 { color: var(--zd-teal); }

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

.zd-edu li {
    font-size: .88rem;
    padding: 6px 0 6px 24px;
    position: relative;
    color: #3D5D5C;
}

.zd-edu.bad li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: var(--zd-bad);
    font-weight: 700;
}

.zd-edu.good li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--zd-teal);
    font-weight: 700;
}

/* --------------------------------------------------------------- score */
.zd-score-box {
    background: #fff;
    border: 1px solid var(--zd-line);
    border-radius: 18px;
    padding: 26px;
    box-shadow: var(--zd-sombra);
}

.zd-score-intro h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.zd-score-intro p {
    font-size: .92rem;
    color: #46605F;
    margin-bottom: 20px;
}

.zd-score-est {
    background: linear-gradient(150deg, #F7FBFA, #fff);
    border: 1px solid var(--zd-line);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 20px;
}

.zd-score-est-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.zd-se-lbl {
    font-size: .8rem;
    font-weight: 600;
    color: var(--zd-muted);
}

.zd-se-num {
    font-family: var(--sr-ff-display);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    margin: 4px 0;
}

.zd-se-num span {
    font-size: 1rem;
    color: var(--zd-muted);
    font-family: var(--sr-ff-sans);
}

.zd-se-faixa {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 7px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.zd-se-msg {
    font-size: .88rem;
    color: #46605F;
    max-width: 300px;
    text-align: right;
    padding-top: 6px;
}

.zd-se-bar {
    position: relative;
    height: 14px;
    border-radius: 8px;
    background: #E4EEEC;
    margin: 20px 0 8px;
    overflow: visible;
}

.zd-se-bar-fill {
    height: 100%;
    border-radius: 8px;
}

.zd-se-marker {
    position: absolute;
    top: -5px;
    width: 2px;
    height: 24px;
    background: var(--zd-navy);
    transform: translateX(-50%);
}

.zd-se-marker::after {
    content: "média";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .62rem;
    font-weight: 700;
    color: var(--zd-navy);
    white-space: nowrap;
}

.zd-se-disc {
    font-size: .78rem;
    color: var(--zd-muted);
    margin-top: 14px;
    line-height: 1.55;
    background: #fff;
    border: 1px solid var(--zd-line);
    border-radius: 10px;
    padding: 11px 13px;
}

.zd-score-track {
    display: flex;
    gap: 6px;
    position: relative;
    margin: 34px 0 22px;
}

.zd-score-seg {
    flex: 1;
    border-radius: 10px;
    padding: 12px 12px 14px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zd-score-seg span { font-size: .74rem; font-weight: 700; opacity: .92; }
.zd-score-seg b { font-size: .96rem; font-weight: 800; }
.zd-score-seg small { font-size: .72rem; opacity: .92; line-height: 1.3; }

.zd-score-seg.sbad  { background: #C81D25; }
.zd-score-seg.sreg  { background: #E2565C; }
.zd-score-seg.sgood { background: #1CAF9C; }
.zd-score-seg.sexc  { background: #0E7C7B; }

.zd-score-avg {
    position: absolute;
    top: -22px;
    left: 48.8%;
    transform: translateX(-50%);
    font-size: .72rem;
    font-weight: 800;
    color: var(--zd-navy);
    white-space: nowrap;
}

.zd-score-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 6px;
}

.zd-score-card {
    background: #F7FBFA;
    border: 1px solid var(--zd-line);
    border-radius: 14px;
    padding: 20px;
}

.zd-score-card h4 {
    font-family: var(--sr-ff-sans);
    font-size: .98rem;
    font-weight: 700;
    color: var(--zd-navy);
    margin-bottom: 10px;
}

.zd-score-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.zd-score-card li {
    font-size: .86rem;
    color: #46605F;
    padding: 6px 0 6px 22px;
    position: relative;
    line-height: 1.45;
}

.zd-score-card li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: var(--zd-teal-bright);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.1;
}

.zd-score-note {
    font-size: .8rem;
    color: var(--zd-muted);
    margin-top: 16px;
    line-height: 1.55;
}

/* --------------------------------------------------------------- depois de quitar */
.zd-tips {
    background: linear-gradient(150deg, var(--zd-navy), #0B3332);
    border-radius: 18px;
    padding: 30px;
    color: #fff;
    margin-top: 16px;
}

.zd-tips h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.zd-tips > p {
    color: #A8CFC9;
    font-size: .92rem;
    margin-bottom: 20px;
}

.zd-tip-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.zd-tip {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    padding: 18px;
}

.zd-tip .n {
    font-family: var(--sr-ff-display);
    font-size: 1.1rem;
    color: var(--zd-teal-bright);
    font-weight: 600;
}

.zd-tip h5 {
    font-size: .98rem;
    font-weight: 700;
    margin: 6px 0 5px;
}

.zd-tip p {
    font-size: .84rem;
    color: #B7D6D1;
    margin: 0;
}

/* --------------------------------------------------------------- rodapé da aba */
.zd-disclaimer {
    margin-top: 22px;
    font-size: .78rem;
    color: var(--zd-muted);
    background: #fff;
    border: 1px solid var(--zd-line);
    border-radius: 13px;
    padding: 16px 18px;
    line-height: 1.6;
}

.zd-disclaimer b { color: var(--zd-navy); }

/* --------------------------------------------------------------- estreito */
@media (max-width: 720px) {
    .zd-debt-item { grid-template-columns: auto 1fr auto; gap: 10px; }
    .zd-debt-item .zd-debt-tag { display: none; }
    .zd-edu-grid,
    .zd-score-cols { grid-template-columns: 1fr; }
    .zd-score-track { flex-direction: column; }
    .zd-score-avg { display: none; }
    .zd-panel-body { padding: 22px 18px; }
    .zd-panel-head { padding: 22px 18px; }
    .zd-se-msg { text-align: left; max-width: none; }
}

/* --------------------------------------------------------------- Zero Dívidas: atalhos
   Os `preset-chips` da fonte. Aqui cada chip é um `<button type=submit>` de um formulário
   só, e não um `<div onclick>`: a CSP não tem `'unsafe-inline'` em `script-src`, e o chip
   precisa funcionar sem JavaScript (§5.6). */
.zd-preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.zd-chip {
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    background: var(--zd-mint-soft);
    color: var(--zd-teal);
    border: 1px solid var(--zd-borda-boa);
    padding: 7px 13px;
    border-radius: 100px;
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zd-chip:hover,
.zd-chip:focus-visible {
    background: var(--zd-teal);
    color: #fff;
    border-color: var(--zd-teal);
}

.zd-chip .rate {
    opacity: .7;
    font-weight: 500;
    font-size: .74rem;
}

.zd-chip:hover .rate,
.zd-chip:focus-visible .rate { opacity: .85; }

/* --------------------------------------------------------------- Zero Dívidas: editar */
.zd-editar > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: .9rem;
    color: var(--zd-navy);
    padding: 10px 14px;
    border: 1.5px dashed var(--zd-line);
    border-radius: 12px;
    list-style: none;
}

.zd-editar > summary::-webkit-details-marker { display: none; }

.zd-editar > summary::after {
    content: " ▾";
    color: var(--zd-muted);
}

.zd-editar[open] > summary::after { content: " ▴"; }

.zd-editar > summary:hover {
    border-color: var(--zd-teal-bright);
    color: var(--zd-teal);
}

/* --------------------------------------------------------------- Zero Dívidas: relatório */
.zd-download-box {
    margin-top: 18px;
    background: linear-gradient(135deg, #07403F, #0B4F4E);
    border-radius: 18px;
    padding: 26px 28px;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    color: #fff;
}

.zd-download-box .dl-ico {
    font-size: 2.4rem;
    flex: none;
}

.zd-download-box .dl-txt {
    flex: 1;
    min-width: 240px;
}

.zd-download-box .dl-txt h3 {
    font-family: var(--sr-ff-display);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.zd-download-box .dl-txt p {
    font-size: .9rem;
    color: #B7D6D1;
    line-height: 1.5;
    margin: 0;
}

.zd-dl-btn {
    white-space: nowrap;
    border: none;
    font-weight: 700;
    border-radius: 11px;
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--zd-teal-bright), var(--zd-teal));
    box-shadow: 0 6px 18px rgba(28, 175, 156, .32);
}

.zd-dl-btn:hover {
    color: #fff;
    box-shadow: 0 10px 26px rgba(28, 175, 156, .42);
}

@media (max-width: 720px) {
    .zd-download-box { flex-direction: column; text-align: center; }
    .zd-dl-btn { width: 100%; }
}

/* --------------------------------------------------------------- Zero Dívidas: os 3 campos
   O `add-row` da fonte. Três campos e um botão; no estreito, o nome ocupa a linha inteira e o
   botão vira largura cheia — como no original. */
.zd-add-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 20px;
}

.zd-field label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--zd-navy);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.zd-field input {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--zd-line);
    border-radius: 11px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--zd-ink);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.zd-field input:focus {
    outline: none;
    border-color: var(--zd-teal-bright);
    box-shadow: 0 0 0 3px rgba(28, 175, 156, .13);
}

.zd-field .hint {
    font-size: .72rem;
    color: var(--zd-muted);
    margin-top: 4px;
}

.zd-btn-add {
    background: var(--zd-teal);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 11px;
    padding: 11px 20px;
    white-space: nowrap;
    min-height: var(--sr-toque-min);
    margin-bottom: 20px;
}

.zd-btn-add:hover {
    background: var(--zd-teal-deep);
    color: #fff;
}

/* --------------------------------------------------------------- Zero Dívidas: remover */
.zd-debt-fim {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zd-del {
    background: none;
    border: none;
    cursor: pointer;
    color: #C2D6D2;
    font-size: 1.3rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 8px;
    transition: color .14s, background .14s;
}

.zd-del:hover,
.zd-del:focus-visible {
    color: var(--zd-bad);
    background: var(--zd-bad-soft);
}

@media (max-width: 720px) {
    .zd-add-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .zd-add-row .zd-field:first-of-type { grid-column: 1 / -1; }
    .zd-btn-add { grid-column: 1 / -1; width: 100%; margin-bottom: 0; }
}

/* --------------------------------------------------------------- Zero Dívidas: score informado */
.zd-se-vs {
    font-size: .84rem;
    color: var(--zd-muted);
    margin: 10px 0 0;
}

.zd-score-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--zd-line);
}

.zd-score-form label {
    font-size: .84rem;
    font-weight: 700;
    color: var(--zd-navy);
    margin: 0;
}

.zd-score-form input[type="number"] {
    width: 7.5rem;
    padding: 9px 12px;
    border: 1.5px solid var(--zd-line);
    border-radius: 11px;
    font-family: var(--sr-ff-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--zd-teal);
    text-align: right;
    background: #fff;
}

.zd-score-form input[type="number"]:focus {
    outline: none;
    border-color: var(--zd-teal-bright);
    box-shadow: 0 0 0 3px rgba(28, 175, 156, .13);
}

.zd-dl-ver {
    color: #B7D6D1;
    font-size: .85rem;
    text-decoration: underline;
    white-space: nowrap;
    align-self: center;
}

.zd-dl-ver:hover { color: #fff; }

@media (max-width: 720px) {
    .zd-dl-ver { width: 100%; text-align: center; }
}

/* ==========================================================================
   CABEÇALHO DE PROGRESSO DO MÓDULO — o `.mod-progress` do `Universal.html`
   (pedido do Igor, 24/09/2026, com uma captura da fonte).

   ⚠️ Não é o `.sr-progresso` da Anamnese: aquele mede UMA aba e mostra o
   estágio em palavra; este mede o MÓDULO inteiro e diz quantas abas ele tem.
   Compartilhar a classe faria um herdar a medida do outro no primeiro ajuste.
   ========================================================================== */
.sr-mod-progresso {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  padding: 1rem 1.25rem;
  margin-block-end: 1rem;
  background-color: var(--branco, #fff);
  border: 1px solid var(--linha);
  border-radius: 1rem;
  box-shadow: var(--sombra);
}

.sr-mod-pct {
  font-family: var(--sr-ff-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--verdeEscuro);
  flex: none;
}

.sr-mod-rotulo {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  flex: none;
}

.sr-mod-rotulo .l {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fria, var(--verde-900));
}

.sr-mod-rotulo .s {
  font-size: .8rem;
  color: var(--tinta-icone);
}

.sr-mod-barra {
  flex: 1;
  min-inline-size: 8rem;
  block-size: .625rem;
  border-radius: 999px;
  background-color: var(--verde-050);
  overflow: hidden;
}

/* O `<i>` é o preenchimento — mesma forma do `.sr-progresso-barra`, que usa
   `.progress-bar`. Aqui o elemento é um `<i>` porque a fonte usa `<i>`, e o
   Bootstrap não exige a classe para o filho direto de `.progress`. */
.sr-mod-barra > i {
  display: block;
  block-size: 100%;
  border-radius: 999px;
  background-image: linear-gradient(90deg, var(--verdeMedio), var(--verde-900));
}

@media (max-width: 34rem) {
  .sr-mod-barra { flex: 1 0 100%; }
}

/* --------------------------------------------------------------- avatar na vitrine
   O círculo do cartão de planejador (24/09/2026). Mesmo desenho do `.sr-avatar-*`
   da "Minha conta", em tamanho de lista: a foto preenche cortando pelo centro, e
   sem foto fica o ícone sobre o verde claro. */
.sr-vitrine-avatar {
  inline-size: 3rem;
  block-size: 3rem;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: var(--verde-050);
  color: var(--tinta-icone);
  font-size: 1.5rem;
  line-height: 1;
}

.sr-vitrine-avatar-foto {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------- totais da fila do Open Finance
   Os dois cartões acima da fila (24/09/2026): quanto de gasto e quanto de
   recebimento ainda não entraram no orçamento. A cor segue a do valor na
   própria linha da tabela — vermelho sai, verde entra. */
/* A grade dos dois: recuo igual ao do `.card-header` (1rem) para eles não
   encostarem nas bordas, e um vão de 1rem entre si. `auto-fit` empilha sozinho
   quando não couberem lado a lado. */
.sr-of-totais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  padding-inline: 1rem;
  padding-block: 1rem 0;
  margin-block-end: 1rem;
}

.sr-of-total {
  padding: .75rem 1rem;
  border: 1px solid var(--linha);
  border-inline-start-width: 4px;
  border-radius: var(--sr-raio);
  background-color: var(--branco, #fff);
  block-size: 100%;
}

.sr-of-total.saida   { border-inline-start-color: var(--vermelho); }
.sr-of-total.entrada { border-inline-start-color: var(--verdeMedio); }

.sr-of-total .rotulo {
  font-size: .8rem;
  color: var(--tinta-icone);
}

.sr-of-total .valor {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  margin-block-start: .125rem;
}

.sr-of-total.saida   .valor { color: var(--vermelho); }
.sr-of-total.entrada .valor { color: var(--verdeEscuro); }

.sr-of-total .sub {
  font-size: .78rem;
  color: var(--tinta-icone);
}

/* ==========================================================================
   EFICIÊNCIA TRIBUTÁRIA — a folha do `PGBL.html` que o Igor enviou (24/09/2026)

   ⚠️ TUDO ESCOPADO EM `.et`, pela mesma razão do bloco ZERO DÍVIDAS acima: a
   fonte é uma página inteira, com `:root`, `body` e seletores de elemento
   (`h1`, `select`, `table`); solta aqui, ela repintaria o produto.

   ⚠️ AS CORES SÃO AS DO SISTEMA. A fonte usa `#0E7C7B`, `#1CAF9C`, `#C81D25`,
   Fraunces e Plus Jakarta Sans — que são o `--verdeEscuro`, `--verdeMedio`,
   `--vermelho`, `--sr-ff-display` e `--sr-ff-sans` do §5.1. Onde ela tem um tom
   que nenhum token cobre, ele está escrito à mão e marcado.

   ⚠️ NÃO HÁ HERO NEM BARRA MÓVEL. O `PGBL.html` abre com logo e capa e tem uma
   `.mbar` fixa no rodapé em telas pequenas; a aba mora dentro do módulo, que já
   tem topo, título e rodapé próprios — uma barra fixa nossa cobriria os dele.
   Mesma decisão do Zero Dívidas (pedido do Igor, 23/09/2026).
   ========================================================================== */
.et {
    --et-teal: var(--verdeEscuro);
    --et-teal-deep: #0A5A59;
    --et-teal-bright: var(--verdeMedio);
    --et-mint: #D4F4DD;
    --et-mint-50: #EEFAF2;
    --et-red: var(--vermelho);
    --et-red-50: #FDEFF0;
    --et-red-ink: #8A1F26;
    --et-ink: #1B3A5C;
    --et-ink-2: #4A6177;
    --et-ink-3: #7A8C9C;
    --et-line: #DDE6EA;
    --et-line-2: #EDF2F4;
    --et-apagado: #C3CED6;

    color: var(--et-ink);
    font-family: var(--sr-ff-sans);
    line-height: 1.5;
}

.et h3,
.et h4 {
    font-family: var(--sr-ff-display);
    font-weight: 600;
    color: var(--et-ink);
}

/* ---------- capa curta ---------- */
.et-intro {
    max-width: 660px;
    margin-block-end: 18px;
}

.et-intro h2 {
    font-family: var(--sr-ff-display);
    font-weight: 600;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--et-teal-deep);
}

.et-intro p {
    margin: 0;
    color: var(--et-ink-2);
    font-size: 15px;
}

/* ---------- layout: dados à esquerda, resultado grudado à direita ---------- */
.et-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
}

.et-layout > * {
    grid-column: 1 / -1;
}

.et-layout > .et-dados {
    grid-column: 1;
    grid-row: 1;
}

.et-layout > .et-side {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
}

.et-side > .et-result {
    position: sticky;
    inset-block-start: 16px;
}

.et-card {
    background: #fff;
    border: 1px solid var(--et-line);
    border-radius: 16px;
    padding: 22px;
}

.et-step-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 4px;
}

.et-step-num {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: var(--et-teal);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: grid;
    place-items: center;
    flex: none;
}

.et-card h3 {
    font-size: 19px;
    margin: 0 0 4px;
}

.et-sub {
    margin: 4px 0 18px;
    color: var(--et-ink-2);
    font-size: 14px;
}

.et-step-body {
    padding-inline-start: 40px;
}

/* ---------- formulário ---------- */
.et-sec-lbl {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--et-ink-3);
    margin: 22px 0 10px;
}

.et-step-body .et-sec-lbl:first-of-type {
    margin-block-start: 0;
}

.et-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.et-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.et-grid-espaco {
    margin-block-start: 16px;
}

.et-lbl {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--et-ink-2);
    margin-block-end: 6px;
}

.et-field {
    display: flex;
    align-items: center;
    border: 1px solid var(--et-line);
    border-radius: 10px;
    background: #fff;
    min-inline-size: 0;
    transition: border-color .15s, box-shadow .15s;
}

.et-field:focus-within {
    border-color: var(--et-teal-bright);
    box-shadow: 0 0 0 3px rgba(28, 175, 156, .18);
}

.et-field .pre,
.et-field .suf {
    font-size: 13px;
    color: var(--et-ink-3);
    font-weight: 600;
    white-space: nowrap;
    padding-inline: 11px 0;
}

.et-field .suf {
    padding-inline: 0 11px;
}

.et-field input {
    border: 0;
    outline: 0;
    background: transparent;
    inline-size: 100%;
    min-inline-size: 0;
    padding: 9px 11px;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 600;
    color: var(--et-ink);
}

.et-field input::placeholder {
    color: #B5C2CB;
    font-weight: 500;
}

.et-hint {
    font-size: 12.5px;
    color: var(--et-ink-3);
    margin-block-start: 6px;
}

.et-ck {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--et-ink-2);
    cursor: pointer;
    line-height: 1.45;
    margin-block-start: 10px;
}

.et-ck input {
    inline-size: 18px;
    block-size: 18px;
    margin-block-start: 2px;
    accent-color: var(--et-teal);
    flex: none;
}

.et-ck b {
    color: var(--et-ink);
}

.et-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-block-start: 18px;
}

.et-grow {
    flex: 1;
}

.et-btn {
    border: 1px solid var(--et-teal);
    background: var(--et-teal);
    color: #fff;
    border-radius: 10px;
    padding: 9px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.et-btn:hover {
    background: var(--et-teal-deep);
}

.et-btn.ghost {
    background: #fff;
    color: var(--et-teal);
}

.et-btn.ghost:hover {
    background: var(--et-mint-50);
}

.et-btn.link {
    border: 0;
    background: none;
    color: var(--et-teal);
    padding: 6px 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.et-btn.link:hover {
    background: none;
    color: var(--et-teal-deep);
}

/* ⚠️ O QUE SÓ EXISTE SEM JAVASCRIPT (25/09/2026). O `sr-pgbl.js` marca a caixa
   `.et` com `data-sr-et-js` assim que liga; daí em diante o botão "Calcular"
   some, porque o envio passou a ser automático ao sair de cada campo. Ele não é
   apagado do HTML de propósito: sem JavaScript, um formulário de oito campos sem
   botão de envio não tem como ser enviado (o Enter só submete sozinho com um
   único campo de texto), e a aba ficaria quebrada para quem depende da §5.6. */
.et[data-sr-et-js="true"] .et-so-sem-js { display: none; }

.et-helper {
    font-size: 12.5px;
    color: var(--et-ink-3);
    margin: 10px 0 0;
}

/* ---------- cartão de resultado ---------- */
.et-result {
    padding: 0;
    overflow: hidden;
}

.et-res-top {
    padding: 22px 22px 18px;
}

.et-verdict {
    font-family: var(--sr-ff-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    margin: 2px 0 8px;
    color: var(--et-ink);
}

.et-res-label {
    font-size: 14px;
    color: var(--et-ink-2);
    margin: 10px 0 2px;
}

.et-res-num {
    font-family: var(--sr-ff-display);
    font-weight: 600;
    font-size: clamp(38px, 5vw, 50px);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--et-teal);
    font-variant-numeric: tabular-nums;
}

.et-res-num.none {
    color: var(--et-apagado);
}

.et-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    background: var(--et-line-2);
    color: var(--et-ink-2);
}

.et-chip.dn {
    background: var(--et-mint-50);
    color: var(--et-teal);
}

.et-kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-block-start: 16px;
}

.et-kv div {
    font-size: 12.5px;
    color: var(--et-ink-3);
}

.et-kv b {
    display: block;
    font-size: 17px;
    color: var(--et-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.et-res-read {
    background: var(--et-mint-50);
    padding: 18px 22px;
    border-block-start: 1px solid var(--et-line);
}

.et-res-read.up {
    background: var(--et-red-50);
}

.et-res-read h4 {
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 6px;
}

.et-res-read p {
    margin: 0;
    color: var(--et-ink-2);
    font-size: 14px;
}

.et-res-foot {
    padding: 12px 22px 16px;
    font-size: 12.5px;
    color: var(--et-ink-3);
    border-block-start: 1px solid var(--et-line);
}

/* ---------- cenários ---------- */
.et-empty {
    padding: 16px;
    border: 1px dashed var(--et-line);
    border-radius: 12px;
    color: var(--et-ink-2);
    font-size: 14px;
}

.et-cenarios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.et-cen {
    border: 1px solid var(--et-line);
    border-radius: 14px;
    padding: 16px;
    background: #fff;
}

.et-cen.best {
    border-color: var(--et-teal-bright);
    box-shadow: inset 0 0 0 1px var(--et-teal-bright);
    background: var(--et-mint-50);
}

.et-cen h4 {
    font-family: var(--sr-ff-sans);
    font-size: 13px;
    font-weight: 700;
    color: var(--et-ink-2);
    margin: 0 0 8px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.et-cen h4 em {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: var(--et-teal);
}

.et-cen .v {
    font-family: var(--sr-ff-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--et-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.et-cen .k {
    font-size: 12.5px;
    color: var(--et-ink-3);
    margin-block-start: 2px;
}

.et-cen .eco {
    margin-block-start: 10px;
    font-size: 13.5px;
    color: var(--et-ink-2);
}

.et-cen .eco b {
    color: var(--et-teal);
    font-size: 15px;
}

.et-cen .eco .na {
    color: var(--et-ink-3);
}

/* ---------- avisos ---------- */
.et-alert {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-block-start: 14px;
}

.et-alert.ok {
    background: var(--et-mint-50);
    color: var(--et-ink-2);
}

.et-alert.warn {
    background: var(--et-red-50);
    color: var(--et-red-ink);
}

/* ---------- tabela de comparação ---------- */
.et-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.et-cmp {
    inline-size: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 14.5px;
}

.et-cmp th {
    font-size: 12.5px;
    color: var(--et-ink-3);
    font-weight: 600;
    text-align: end;
    padding: 8px 10px;
    border-block-end: 1px solid var(--et-line);
    white-space: nowrap;
}

.et-cmp th:first-child {
    text-align: start;
}

.et-cmp td {
    padding: 10px;
    border-block-end: 1px solid var(--et-line-2);
    text-align: end;
}

.et-cmp td:first-child {
    text-align: start;
}

.et-cmp td small {
    display: block;
    font-size: 12px;
    color: var(--et-ink-3);
    margin-block-start: 2px;
}

.et-cmp tr.win td {
    background: var(--et-mint-50);
    font-weight: 700;
}

.et-cmp tr.win td:first-child::after {
    content: "escolhido";
    font-size: 11px;
    font-weight: 700;
    color: var(--et-teal);
    background: var(--et-mint);
    border-radius: 999px;
    padding: 2px 8px;
    margin-inline-start: 8px;
    vertical-align: 1px;
}

.et-cmp tfoot td {
    border-block-end: 0;
    border-block-start: 2px solid var(--et-line);
    font-weight: 700;
    padding-block-start: 12px;
}

/* ---------- passos e resgate ---------- */
.et-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-block-start: 6px;
}

.et-steps div {
    background: var(--et-line-2);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--et-ink-2);
    line-height: 1.35;
}

.et-steps b {
    display: block;
    font-size: 15px;
    color: var(--et-ink);
    font-variant-numeric: tabular-nums;
}

/* ---------- blocos recolhidos ---------- */
.et-adv summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.et-adv summary::-webkit-details-marker {
    display: none;
}

.et-adv summary h3 {
    margin: 0;
}

.et-adv summary::after {
    content: "+";
    font-size: 22px;
    color: var(--et-teal);
    font-weight: 500;
    line-height: 1;
}

.et-adv[open] summary::after {
    content: "–";
}

.et-adv-body {
    margin-block-start: 14px;
}

.et-ref {
    font-size: 13px;
    color: var(--et-ink-2);
}

.et-ref b {
    color: var(--et-ink);
}

.et-nota {
    margin-block-start: 12px;
}

.et-metodo {
    max-inline-size: 720px;
    color: var(--et-ink-2);
    font-size: 14.5px;
}

.et-metodo p {
    margin: 12px 0;
}

.et-metodo .formula {
    font-family: var(--sr-ff-display);
    font-size: 16.5px;
    color: var(--et-ink);
    background: var(--et-line-2);
    border-radius: 10px;
    padding: 10px 14px;
    display: inline-block;
}

/* ---------- telas estreitas ---------- */
@media (max-width: 900px) {
    .et-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .et-layout > .et-dados,
    .et-layout > .et-side {
        grid-column: 1;
        grid-row: auto;
    }

    .et-side > .et-result {
        position: static;
    }
}

@media (max-width: 760px) {
    .et-grid2,
    .et-grid3,
    .et-cenarios,
    .et-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .et-card {
        padding: 18px 16px;
    }

    .et-step-body {
        padding-inline-start: 0;
    }

    .et-res-top {
        padding: 20px 18px 16px;
    }

    .et-res-read,
    .et-res-foot {
        padding-inline: 18px;
    }

    .et-cmp.stack thead {
        display: none;
    }

    .et-cmp.stack tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
        padding: 12px 0;
        border-block-end: 1px solid var(--et-line-2);
    }

    .et-cmp.stack td {
        border: 0;
        padding: 0;
        text-align: start;
    }

    .et-cmp.stack td:first-child {
        grid-column: 1 / -1;
        margin-block-end: 2px;
        font-weight: 600;
    }

    .et-cmp.stack td[data-l]::before {
        content: attr(data-l);
        display: block;
        font-size: 11.5px;
        color: var(--et-ink-3);
    }

    .et-cmp.stack tfoot td {
        border: 0;
    }

    .et-steps {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   ARQUÉTIPO DO INVESTIDOR — a folha do `Arquetipo_Aba.html` (25/09/2026)

   ⚠️ TUDO ESCOPADO EM `.aq`, pela mesma razão dos blocos ZERO DÍVIDAS e
   EFICIÊNCIA TRIBUTÁRIA acima: a fonte é uma página inteira, com `:root`,
   `body` e seletores de elemento.

   ⚠️ AS CORES SÃO AS DO SISTEMA (§5.1). Onde a fonte tem um tom que nenhum
   token cobre, ele está escrito à mão e marcado.

   ⚠️ NÃO HÁ HERO NEM BARRA MÓVEL, como nas outras duas abas portadas.
   ========================================================================== */
.aq {
    --aq-teal: var(--verdeEscuro);
    --aq-teal-deep: #0A5A59;
    --aq-teal-bright: var(--verdeMedio);
    --aq-mint-50: #EEFAF2;
    --aq-red-50: #FDEFF0;
    --aq-red-ink: #8A1F26;
    --aq-ink: #1B3A5C;
    --aq-ink-2: #4A6177;
    --aq-ink-3: #7A8C9C;
    --aq-line: #DDE6EA;
    --aq-line-2: #EDF2F4;

    color: var(--aq-ink);
    font-family: var(--sr-ff-sans);
    line-height: 1.5;
}

.aq h3,
.aq h4 {
    font-family: var(--sr-ff-display);
    font-weight: 600;
    color: var(--aq-ink);
}

.aq-intro { max-inline-size: 660px; margin-block-end: 18px; }

.aq-intro h2 {
    font-family: var(--sr-ff-display);
    font-weight: 600;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--aq-teal-deep);
}

.aq-intro p { margin: 0; color: var(--aq-ink-2); font-size: 15px; }

.aq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 22px;
    align-items: start;
}

.aq-layout > * { grid-column: 1 / -1; }
.aq-layout > .aq-origem-card { grid-column: 1; grid-row: 1; }
.aq-layout > .aq-side { grid-column: 2; grid-row: 1; align-self: stretch; }
.aq-side > .aq-result { position: sticky; inset-block-start: 16px; }

.aq-card {
    background: #fff;
    border: 1px solid var(--aq-line);
    border-radius: 16px;
    padding: 22px;
}

.aq-step-head { display: flex; align-items: center; gap: 12px; margin-block-end: 4px; }

.aq-step-num {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: var(--aq-teal);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: grid;
    place-items: center;
    flex: none;
}

.aq-card h3 { font-size: 19px; margin: 0 0 4px; }
.aq-sub { margin: 4px 0 18px; color: var(--aq-ink-2); font-size: 14px; }
.aq-step-body { padding-inline-start: 40px; }
.aq-hint { font-size: 12.5px; color: var(--aq-ink-3); }

.aq-sec-lbl {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--aq-ink-3);
    margin: 22px 0 10px;
}

/* ---------- quadro de origem ---------- */
.aq-sinais { display: grid; gap: 2px; }

.aq-sin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 150px;
    gap: 14px;
    align-items: baseline;
    padding: 10px 0;
    border-block-end: 1px solid var(--aq-line-2);
}

.aq-sin:last-child { border-block-end: 0; }
.aq-sin .r { font-size: 14px; color: var(--aq-ink-2); }
.aq-sin .v { font-weight: 600; font-size: 14.5px; }
.aq-sin .o { font-size: 12px; color: var(--aq-ink-3); text-align: end; }

/* ---------- cartão de resultado ---------- */
.aq-result { padding: 0; overflow: hidden; }
.aq-res-top { padding: 22px 22px 18px; }

.aq-perfil {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aq-teal);
    margin-block-start: 8px;
}

.aq-nome {
    font-family: var(--sr-ff-display);
    font-weight: 600;
    font-size: clamp(22px, 3vw, 27px);
    line-height: 1.15;
    margin-block-start: 4px;
    color: var(--aq-ink);
}

.aq-postura { margin: 8px 0 0; color: var(--aq-ink-2); font-size: 14px; }

.aq-gauge-rotulo { font-size: 13px; color: var(--aq-ink-2); margin-block-start: 16px; }

.aq-gauge {
    block-size: 10px;
    border-radius: 5px;
    background: var(--aq-line-2);
    overflow: hidden;
    margin-block-start: 6px;
}

.aq-gauge b {
    display: block;
    block-size: 100%;
    background: linear-gradient(90deg, var(--aq-teal), var(--aq-teal-bright));
    border-radius: 5px;
}

.aq-faixas {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--aq-ink-3);
    margin-block-start: 5px;
}

.aq-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block-start: 16px; }
.aq-kv div { font-size: 12.5px; color: var(--aq-ink-3); }

.aq-kv b {
    display: block;
    font-size: 17px;
    color: var(--aq-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.aq-res-read {
    background: var(--aq-mint-50);
    padding: 18px 22px;
    border-block-start: 1px solid var(--aq-line);
}

.aq-res-read h4 { font-size: 17px; line-height: 1.3; margin: 0 0 6px; }
.aq-res-read p { margin: 0; color: var(--aq-ink-2); font-size: 14px; }

.aq-res-foot {
    padding: 12px 22px 16px;
    font-size: 12.5px;
    color: var(--aq-ink-3);
    border-block-start: 1px solid var(--aq-line);
}

/* ---------- tabela da pontuação ---------- */
.aq-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.aq-tbl {
    inline-size: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 14.5px;
}

.aq-tbl th {
    font-size: 12.5px;
    color: var(--aq-ink-3);
    font-weight: 600;
    text-align: end;
    padding: 8px 10px;
    border-block-end: 1px solid var(--aq-line);
    white-space: nowrap;
}

.aq-tbl th:first-child { text-align: start; }
.aq-tbl td { padding: 10px; border-block-end: 1px solid var(--aq-line-2); text-align: end; }
.aq-tbl td:first-child { text-align: start; }

.aq-tbl td small {
    display: block;
    font-size: 12px;
    color: var(--aq-ink-3);
    margin-block-start: 2px;
}

/* Resposta em branco: apagada, e não escondida — ela conta como ausência. */
.aq-tbl tr.vazia { opacity: .55; }

.aq-tbl tfoot td {
    border-block-end: 0;
    border-block-start: 2px solid var(--aq-line);
    font-weight: 700;
    padding-block-start: 12px;
}

/* ---------- avisos ---------- */
.aq-alert {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-block-start: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.aq-alert.ok { background: var(--aq-mint-50); color: var(--aq-ink-2); }
.aq-alert.neutro { background: var(--aq-line-2); color: var(--aq-ink-2); }
.aq-alert.warn { background: var(--aq-red-50); color: var(--aq-red-ink); }

/* ---------- controles ---------- */
.aq-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-block-start: 18px;
}

.aq-lbl { font-size: 13px; font-weight: 600; color: var(--aq-ink-2); margin: 0; }

.aq-select {
    border: 1px solid var(--aq-line);
    border-radius: 10px;
    padding: 9px 11px;
    background: #fff;
    font-size: 14px;
    min-inline-size: 280px;
    max-inline-size: 100%;
}

.aq-select:focus-visible {
    outline: 0;
    border-color: var(--aq-teal-bright);
    box-shadow: 0 0 0 3px rgba(28, 175, 156, .18);
}

.aq-btn {
    border: 1px solid var(--aq-teal);
    background: var(--aq-teal);
    color: #fff;
    border-radius: 10px;
    padding: 9px 16px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
}

.aq-btn:hover { background: var(--aq-teal-deep); color: #fff; }
.aq-btn.ghost { background: #fff; color: var(--aq-teal); }
.aq-btn.ghost:hover { background: var(--aq-mint-50); color: var(--aq-teal-deep); }

/* O mesmo contrato do `.et-so-sem-js`: o botão fica no HTML e some quando o
   JavaScript liga. Ver o comentário daquele bloco — sem ele, um `select` que
   envia sozinho deixaria a aba sem caminho para quem não tem JavaScript. */
.aq[data-sr-aq-js="true"] .aq-so-sem-js { display: none; }

/* ---------- alocação ---------- */
.aq-barra {
    display: flex;
    block-size: 28px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--aq-line-2);
}

.aq-barra i:nth-child(1) { background: var(--aq-teal); }
.aq-barra i:nth-child(2) { background: #12908A; }
.aq-barra i:nth-child(3) { background: var(--aq-teal-bright); }
.aq-barra i:nth-child(4) { background: #3D5B78; }
.aq-barra i:nth-child(5) { background: #A87D2C; }
.aq-barra i:nth-child(6) { background: #C8A24A; }
.aq-barra i:nth-child(7) { background: #8A6A20; }
.aq-barra i:nth-child(8) { background: #F39200; }
.aq-barra i:nth-child(9) { background: #F6B955; }
.aq-barra i:nth-child(10) { background: #6FBDB6; }

.aq-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-block-start: 12px;
    font-size: 12.5px;
    color: var(--aq-ink-2);
}

.aq-legenda em { font-style: normal; }
.aq-legenda b { color: var(--aq-ink); font-variant-numeric: tabular-nums; }

/* ---------- os nove ---------- */
.aq-nove { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.aq-nv {
    border: 1px solid var(--aq-line);
    border-radius: 14px;
    padding: 16px;
    background: #fff;
}

.aq-nv.on {
    border-color: var(--aq-teal-bright);
    box-shadow: inset 0 0 0 1px var(--aq-teal-bright);
    background: var(--aq-mint-50);
}

.aq-nv .p {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--aq-ink-3);
}

.aq-nv h4 { font-size: 16px; margin: 6px 0 6px; line-height: 1.25; }
.aq-nv p { margin: 0; font-size: 13px; color: var(--aq-ink-2); line-height: 1.45; }

/* ---------- metodologia ---------- */
.aq-adv summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.aq-adv summary::-webkit-details-marker { display: none; }
.aq-adv summary h3 { margin: 0; }

.aq-adv summary::after {
    content: "+";
    font-size: 22px;
    color: var(--aq-teal);
    font-weight: 500;
    line-height: 1;
}

.aq-adv[open] summary::after { content: "–"; }
.aq-adv-body { margin-block-start: 14px; }

.aq-metodo { max-inline-size: 720px; color: var(--aq-ink-2); font-size: 14.5px; }
.aq-metodo p { margin: 12px 0; }

.aq-metodo .formula {
    font-family: var(--sr-ff-display);
    font-size: 16.5px;
    color: var(--aq-ink);
    background: var(--aq-line-2);
    border-radius: 10px;
    padding: 10px 14px;
    display: inline-block;
}

/* ---------- telas estreitas ---------- */
@media (max-width: 900px) {
    .aq-layout { grid-template-columns: minmax(0, 1fr); }

    .aq-layout > .aq-origem-card,
    .aq-layout > .aq-side { grid-column: 1; grid-row: auto; }

    .aq-side > .aq-result { position: static; }
}

@media (max-width: 760px) {
    .aq-nove { grid-template-columns: 1fr; }
    .aq-sin { grid-template-columns: 1fr; gap: 2px; }
    .aq-sin .o { text-align: start; }
}

@media (max-width: 640px) {
    .aq-card { padding: 18px 16px; }
    .aq-step-body { padding-inline-start: 0; }
    .aq-res-top { padding: 20px 18px 16px; }
    .aq-res-read, .aq-res-foot { padding-inline: 18px; }

    .aq-tbl.stack thead { display: none; }

    .aq-tbl.stack tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
        padding: 12px 0;
        border-block-end: 1px solid var(--aq-line-2);
    }

    .aq-tbl.stack td { border: 0; padding: 0; text-align: start; }

    .aq-tbl.stack td:first-child {
        grid-column: 1 / -1;
        margin-block-end: 2px;
        font-weight: 600;
    }

    .aq-tbl.stack td[data-l]::before {
        content: attr(data-l);
        display: block;
        font-size: 11.5px;
        color: var(--aq-ink-3);
    }

    .aq-tbl.stack tfoot td { border: 0; }
    .aq-select { min-inline-size: 0; inline-size: 100%; }
}

/* A grade e os campos numéricos da `/Admin/Arquetipos`. Ficam no bloco `.aq`
   porque a tela de administração veste a mesma folha da aba — é a mesma
   ferramenta, vista do outro lado. */
.aq-adm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.aq-num {
    border: 1px solid var(--aq-line);
    border-radius: 10px;
    padding: 9px 11px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: end;
    font-variant-numeric: tabular-nums;
    inline-size: 100%;
    max-inline-size: 110px;
    color: var(--aq-ink);
}

.aq-num:focus-visible {
    outline: 0;
    border-color: var(--aq-teal-bright);
    box-shadow: 0 0 0 3px rgba(28, 175, 156, .18);
}

.aq-ck { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--aq-ink-2); cursor: pointer; }
.aq-ck input { inline-size: 18px; block-size: 18px; margin-block-start: 2px; accent-color: var(--aq-teal); flex: none; }
.aq-ck b { color: var(--aq-ink); }
.aq-ck-col { display: flex; align-items: flex-end; }

@media (max-width: 900px) {
    .aq-adm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .aq-adm-grid { grid-template-columns: 1fr; }
    .aq-num { max-inline-size: none; }
}

/* =============================================================================
   Grupo SEM sanfona (26/09/2026, pedido do Igor) — o "Cliente" do menu do cliente
   -----------------------------------------------------------------------------
   Os itens soltos no topo da coluna, sem a caixa do `.sr-grupo`. Mantém a folga de
   baixo da caixa para o "Meus Objetivos" não encostar.
   ============================================================================= */
.sr-grupo-solto {
  padding: 0;
  margin-block-end: .5rem;
}


/* ==========================================================================
   E51 — DASHBOARD DE ANÁLISE DO FLUXO (fxd-*)
   Literal ao CSS que o fluxo_dashboard.js do modelo de 26/09/2026 injeta (id "fxd-css").
   Duas mudanças: a troca de visão (.fxd-switch) é de links e está na seção acima; e o
   formulário de filtros é um <form> de verdade, com o "Aplicar" que só aparece sem JS.
   ========================================================================== */
.fxd button:focus-visible,.fxd select:focus-visible{outline:2px solid #1CAF9C;outline-offset:2px}
.fxd{display:flex;flex-direction:column;gap:14px;min-width:0;max-width:100%;margin-bottom:18px;font-family:var(--ff-sans,"Plus Jakarta Sans",sans-serif);color:var(--ink,#13202b)}
.fxd *{box-sizing:border-box}
.fxd h3{font-family:var(--ff-display,Fraunces,Georgia,serif);font-weight:600;font-size:17px;color:var(--sr-teal-900,#0a5f5e);margin:0;line-height:1.25;letter-spacing:-.005em}
.fxd-filtros{background:#fff;border:1px solid var(--line,#dfe9e8);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;min-width:0}
.fxd-frow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.fxd-fl{font-size:12px;font-weight:700;color:var(--ink-2,#3a4a5a);min-width:132px}
.fxd-sp{flex:1}
.fxd-chips{display:flex;flex-wrap:wrap;gap:6px}
.fxd-chip{border:1px solid var(--line,#dfe9e8);background:#fff;border-radius:999px;padding:5px 11px;font:600 12px var(--ff-sans,sans-serif);color:var(--ink-2,#3a4a5a);cursor:pointer;line-height:1.3}
.fxd-chip:hover{border-color:#a9ddd3}
.fxd-chip.on{background:var(--sr-teal-800,#0E7C7B);border-color:var(--sr-teal-800,#0E7C7B);color:#fff}
.fxd-chip-g i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gc);margin-right:6px;vertical-align:0}
.fxd-chip-g.on{background:#fff;color:var(--ink,#13202b);border-color:var(--gc);box-shadow:inset 0 0 0 1px var(--gc)}
.fxd-chip-g:not(.on){opacity:.55;text-decoration:line-through}
.fxd select{border:1px solid var(--line,#dfe9e8);border-radius:8px;padding:5px 8px;font:500 12.5px var(--ff-sans,sans-serif);background:#fff;color:var(--ink,#13202b);max-width:100%}
.fxd-range{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2,#3a4a5a)}
.fxd-seg{display:inline-flex;border:1px solid var(--line,#dfe9e8);border-radius:9px;overflow:hidden;background:#fff}
.fxd-seg button{border:0;background:none;padding:6px 11px;font:600 12px var(--ff-sans,sans-serif);color:var(--ink-2,#3a4a5a);cursor:pointer}
.fxd-seg button+button{border-left:1px solid var(--line,#dfe9e8)}
.fxd-seg button.on{background:var(--sr-teal-050,#eefaf6);color:var(--sr-teal-900,#0a5f5e)}
.fxd-seg.sm button{padding:4px 9px;font-size:11.5px}
.fxd-link{border:0;background:none;color:var(--sr-teal-700,#118a87);font:700 12px var(--ff-sans,sans-serif);cursor:pointer;padding:4px 2px;text-decoration:underline;text-underline-offset:3px}
.fxd-toggle{border:1px solid var(--line,#dfe9e8);background:#fff;border-radius:8px;padding:5px 10px;font:600 11.5px var(--ff-sans,sans-serif);color:var(--ink-2,#3a4a5a);cursor:pointer}
.fxd-toggle.on{border-color:#0a5f5e;color:#0a5f5e;background:var(--sr-teal-050,#eefaf6)}
.fxd-ctx{margin:-4px 2px 0;font-size:12.5px;color:var(--ink-2,#3a4a5a);line-height:1.55}
.fxd-ctx b{color:var(--ink,#13202b)}
.fxd-ctx-av{display:block;color:#8A5300;margin-top:2px}
.fxd-ctx-cc{display:block;color:var(--muted,#6b7d7c);margin-top:4px;font-size:12px}
.fxd-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media(max-width:1180px){.fxd-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.fxd-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.fxd-kpi{background:#fff;border:1px solid var(--line,#dfe9e8);border-radius:12px;padding:11px 12px 9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.fxd-kpi.neg{border-color:#f1c4c4;background:#fffafa}
.fxd-kpi .l{font-size:11.5px;font-weight:700;color:var(--muted,#6b7d7c)}
.fxd-kpi .v{font-family:var(--ff-display,Fraunces,Georgia,serif);font-weight:600;font-size:22px;color:var(--sr-teal-900,#0a5f5e);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fxd-kpi .s{font-size:10.5px;color:var(--muted,#6b7d7c);line-height:1.35}
.fxd-kpi .dl{margin-top:3px;min-height:18px}
.fxd-spark{width:100%;height:26px;margin-top:4px;display:block}
.fxd-gauge{position:relative;display:block;height:6px;border-radius:3px;background:#edf3f2;margin-top:8px}
.fxd-gauge i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.fxd-gauge b{position:absolute;top:-3px;bottom:-3px;width:2px;background:#13202b;border-radius:1px}
.fxd-d{display:inline-flex;gap:3px;align-items:center;font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;white-space:nowrap;line-height:1.5}
.fxd-d i{font-style:normal;font-weight:500;opacity:.8}
.fxd-d-ok{background:#e6f5ec;color:#1e7a4b}.fxd-d-bad{background:#fdecec;color:#b53030}.fxd-d-n{background:var(--bg-2,#eaf2f0);color:var(--ink-2,#3a4a5a)}
.fxd-card{background:#fff;border:1px solid var(--line,#dfe9e8);border-radius:14px;padding:14px 16px;min-width:0}
.fxd-hero{padding:16px 18px 14px;border-color:#cfe4e1}
.fxd-hero h3{font-size:20px}
.fxd-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.fxd-h p{font-size:12px;color:var(--muted,#6b7d7c);margin:3px 0 0;max-width:64ch;line-height:1.45}
.fxd-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fxd-col{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(max-width:980px){.fxd-grid2{grid-template-columns:1fr}}
.fxd svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--ff-sans,"Plus Jakarta Sans",sans-serif)}
.fxd .fxd-hit{cursor:pointer}
.fxd .fxd-tm:hover rect{opacity:.85}
.fxd-leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--ink-2,#3a4a5a);margin-top:8px}
.fxd-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.fxd-leg i.ln{height:3px;width:16px;border-radius:2px;vertical-align:3px}
.fxd-leg i.dash{height:0;border-top:2px dashed;background:none;border-radius:0}
.fxd-leg i.hatch{background:repeating-linear-gradient(45deg,rgba(27,58,92,.16) 0 3px,transparent 3px 6px);border:1px solid #dfe9e8}
.fxd-note{font-size:12px;color:var(--ink-2,#3a4a5a);margin:8px 0 0;line-height:1.5}
.fxd-empty{font-size:12.5px;color:var(--muted,#6b7d7c);margin:6px 0;padding:14px;background:var(--bg,#f4f8f7);border-radius:10px}
.fxd-ins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:760px){.fxd-ins{grid-template-columns:1fr}}
.fxd-in{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--bg,#f4f8f7);border-left:3px solid #9fb3b1}
.fxd-in .ic{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;background:#9fb3b1}
.fxd-in .t{display:block;font-size:13px;color:var(--ink,#13202b);line-height:1.35}
.fxd-in .d{display:block;font-size:12px;color:var(--ink-2,#3a4a5a);margin-top:2px;line-height:1.45}
.fxd-in .fxd-link{margin-top:2px;padding-left:0}
.fxd-in-bad{border-left-color:#D64545;background:#fff6f6}.fxd-in-bad .ic{background:#D64545}
.fxd-in-warn{border-left-color:#E89C2C;background:#fffaf0}.fxd-in-warn .ic{background:#E89C2C}
.fxd-in-info{border-left-color:#2d7fb5;background:#f3f8fc}.fxd-in-info .ic{background:#2d7fb5}
.fxd-in-ok{border-left-color:#2FA86A;background:#f2faf5}.fxd-in-ok .ic{background:#2FA86A}
.fxd-card{container-type:inline-size}
.fxd-donut{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center}
.fxd-donut svg{max-width:200px;margin:0 auto}
.fxd-dleg{font-size:12px;min-width:0}
.fxd-dleg>div{display:grid;grid-template-columns:minmax(0,1fr) 38px 38px 64px;gap:6px;align-items:center;padding:6px 0;border-top:1px solid var(--line-2,#edf3f2);text-align:right;font-variant-numeric:tabular-nums}
.fxd-dleg>div.hd{border-top:0;padding:0 0 3px;font-size:10.5px;color:var(--muted,#6b7d7c);font-weight:700}
.fxd-dleg .nm,.fxd-dleg .hd span:first-child{text-align:left;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fxd-dleg .bad{color:#b53030;font-weight:800}
.fxd-dleg i,.fxd-rleg i,.fxd-mlist i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.fxd-rleg,.fxd-mlist{list-style:none;margin:0;padding:0;font-size:12px}
.fxd-rleg li{display:flex;align-items:center;gap:4px;padding:5px 0;border-top:1px solid var(--line-2,#edf3f2)}
.fxd-rleg li span{flex:1;min-width:0}
.fxd-rleg li b,.fxd-mlist b{font-variant-numeric:tabular-nums}
.fxd-rank{list-style:none;margin:0;padding:0}
.fxd-rank li+li{border-top:1px solid var(--line-2,#edf3f2)}
.fxd-rank button{display:grid;grid-template-columns:22px minmax(0,1fr) 118px;grid-template-areas:"p n v" "p b d";gap:0 10px;align-items:center;width:100%;border:0;background:none;padding:7px 2px;text-align:left;cursor:pointer;font-family:inherit;color:inherit}
.fxd-rank button:hover{background:var(--bg,#f4f8f7)}
.fxd-rank .pos{grid-area:p;font-family:var(--ff-display,Fraunces,serif);font-weight:600;color:var(--muted,#6b7d7c);font-size:14px;text-align:center}
.fxd-rank .nm{grid-area:n;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxd-rank .nm small{display:block;font-size:10.5px;font-weight:500;color:var(--muted,#6b7d7c)}
.fxd-rank .bar{grid-area:b;height:8px;background:#edf3f2;border-radius:4px;overflow:hidden;margin-top:5px}
.fxd-rank .bar i{display:block;height:100%;border-radius:4px}
.fxd-rank .val{grid-area:v;font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.fxd-rank .dv{grid-area:d;text-align:right}
.fxd-var{list-style:none;margin:0;padding:0}
.fxd-var button{display:grid;grid-template-columns:minmax(0,1fr) 124px;grid-template-areas:"n n" "a v";gap:3px 10px;align-items:center;width:100%;border:0;background:none;padding:6px 2px;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.fxd-var button:hover{background:var(--bg,#f4f8f7)}
.fxd-var .nm{grid-area:n;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxd-var .axis{grid-area:a}.fxd-var .val{grid-area:v}
.fxd-var .nm i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.fxd-var .axis{position:relative;height:12px}
.fxd-var .axis:before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:#9fb3b1}
.fxd-var .axis i{position:absolute;top:0;bottom:0;border-radius:3px}
.fxd-var .axis i.ok{background:#2FA86A}.fxd-var .axis i.bad{background:#D64545}
.fxd-var .val{font-size:12px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fxd-var .val small{font-weight:600;opacity:.8}
.fxd-var .val.ok{color:#1e7a4b}.fxd-var .val.bad{color:#b53030}
.fxd-var .axis i.neu{background:#0E7C7B}.fxd-var .val.neu{color:#0a5f5e}
.fxd-bul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fxd-bul .hd{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;margin-bottom:4px;gap:8px}
.fxd-bul .hd i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.fxd-bul .hd b{font-size:11.5px}
.fxd-bul .trk{position:relative;height:12px;background:#edf3f2;border-radius:6px;cursor:default}
.fxd-bul .trk i{position:absolute;left:0;top:0;bottom:0;border-radius:6px}
.fxd-bul .trk b{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:#13202b;border-radius:2px}
.fxd-bul .ft{display:flex;justify-content:space-between;font-size:11px;color:var(--muted,#6b7d7c);margin-top:4px;font-variant-numeric:tabular-nums}
.fxd-stack{display:flex;height:16px;border-radius:8px;overflow:hidden;background:#edf3f2;margin-bottom:10px}
.fxd-stack i{display:block;height:100%}
.fxd-stack i+i{box-shadow:inset 1px 0 0 #fff}
.fxd-mlist li{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;padding:5px 0;border-top:1px solid var(--line-2,#edf3f2)}
.fxd-mlist em{font-style:normal;color:var(--muted,#6b7d7c);font-size:11.5px;min-width:74px;text-align:right}
.fxd-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fxd-heat{border-collapse:separate;border-spacing:2px;font-size:11px;min-width:100%}
.fxd-heat th{font-weight:600;color:var(--muted,#6b7d7c);padding:3px 4px;white-space:nowrap;font-size:10.5px}
.fxd-heat thead th.a{color:#0a5f5e;font-weight:800;border-bottom:2px solid #0E7C7B}
.fxd-heat thead th.f{font-style:italic}
.fxd-heat thead th.h{text-decoration:underline}
.fxd-heat tbody th{position:sticky;left:0;background:#fff;text-align:left;z-index:1}
.fxd-heat tbody th button{border:0;background:none;font:600 11.5px var(--ff-sans,sans-serif);color:var(--ink,#13202b);cursor:pointer;padding:0;white-space:nowrap}
.fxd-heat tbody th i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.fxd-heat td{min-width:44px;height:26px;text-align:center;border-radius:4px;background:#f6f9f9;font-variant-numeric:tabular-nums;font-weight:600;cursor:default}
.fxd-heat td.a{outline:1px solid rgba(14,124,123,.25)}
.fxd-heat td.hot{box-shadow:inset 0 0 0 2px #D64545}
.fxd-heat td sup{font-size:8px;margin-left:1px}
.fxd-tab{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px}
.fxd-tab th{font-size:11px;font-weight:700;color:var(--muted,#6b7d7c);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line,#dfe9e8);white-space:nowrap}
.fxd-tab th button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0}
.fxd-tab th.n,.fxd-tab td.n{text-align:right}
.fxd-tab td{padding:6px 8px;border-bottom:1px solid var(--line-2,#edf3f2);font-variant-numeric:tabular-nums;vertical-align:middle}
.fxd-tab td.nm button{border:0;background:none;font:600 12.5px var(--ff-sans,sans-serif);color:var(--ink,#13202b);cursor:pointer;padding:0;text-align:left}
.fxd-tab td.nm button:hover{color:#0E7C7B;text-decoration:underline}
.fxd-tab td.nm i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
.fxd-tab td.g{color:var(--muted,#6b7d7c);font-size:11.5px}
.fxd-tab td.ok{color:#1e7a4b;font-weight:700}.fxd-tab td.bad{color:#b53030;font-weight:700}
.fxd-tab td.sp{width:110px;min-width:90px}
.fxd-tab td.sp .fxd-spark{margin:0;height:22px}
.fxd-tab-sm{min-width:480px;font-size:12px}
.fxd-foco{border:1px solid #bfe3de;box-shadow:0 6px 24px -14px rgba(14,124,123,.5)}
.fxd-tag{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:var(--gc);border-radius:999px;padding:1px 8px;margin-bottom:4px}
.fxd-foco-bt{display:flex;align-items:center;gap:6px}
.fxd-x{border:1px solid var(--line,#dfe9e8);background:#fff;border-radius:8px;width:30px;height:30px;font-size:18px;line-height:1;cursor:pointer;color:var(--ink-2,#3a4a5a)}
.fxd-fk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
@media(max-width:560px){.fxd-fk{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fxd-fk>div{background:var(--bg,#f4f8f7);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.fxd-fk span{font-size:10.5px;color:var(--muted,#6b7d7c);font-weight:700}
.fxd-fk b{font-family:var(--ff-display,Fraunces,serif);font-weight:600;font-size:17px;color:var(--sr-teal-900,#0a5f5e)}
.fxd-foco-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:980px){.fxd-foco-g{grid-template-columns:1fr}}
.fxd-vazio{background:#fff;border:1px dashed #bfe3de;border-radius:14px;padding:26px 22px;text-align:center}
.fxd-vazio p{font-size:13px;color:var(--ink-2,#3a4a5a);max-width:56ch;margin:6px auto 12px}
.fxd-btn{border:0;background:var(--sr-teal-800,#0E7C7B);color:#fff;border-radius:9px;padding:9px 16px;font:700 13px var(--ff-sans,sans-serif);cursor:pointer}
.fxd-rodape{font-size:11px;color:var(--muted,#6b7d7c);margin:0 2px;line-height:1.5;max-width:110ch}
.fxd-tip{position:fixed;z-index:99999;pointer-events:none;background:#0f2e2c;color:#fff;border-radius:10px;padding:9px 11px;font:12px/1.5 var(--ff-sans,"Plus Jakarta Sans",sans-serif);box-shadow:0 12px 34px -8px rgba(0,0,0,.5);max-width:260px;display:none}
@media(max-width:720px){
  .fxd-fl{min-width:0;width:100%}
  .fxd-chips{flex-wrap:nowrap;overflow-x:auto;width:100%;min-width:0;max-width:100%;padding-bottom:3px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fxd-chips .fxd-chip{flex:0 0 auto}
  .fxd-card{padding:12px 12px}
  .fxd-hero h3{font-size:18px}
  .fxd-kpi .v{font-size:19px}
  .fxd-rank button{grid-template-columns:20px minmax(0,1fr) 112px;grid-template-areas:"p n v" "p b d"}
  .fxd-var button{grid-template-columns:minmax(0,1fr) 104px;gap:3px 8px}
  .fxd-rank .bar{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.fxd *{scroll-behavior:auto!important}}
.fxd-filtros [data-fx-sem-js][hidden]{display:none}


/* ==========================================================================
   E51 — CABEÇALHO GRUDADO E SETAS COM CONTRASTE (pedido do Igor, 28/09/2026)
   "O título da tabela fica não visível quando temos muitos registros; o mesmo
   aparece para as setas. Preciso dar mais contraste para as setas e para o título."
   ========================================================================== */

/* A planilha rola nos dois eixos dentro de uma altura teto: o cabeçalho (`sticky`
   em `.fx-table thead th`) passa a grudar no topo DO CONTÊINER, que é quem rola, e
   as setas (centradas na altura do contêiner) ficam sempre no meio do que se vê. */
.fx-scroll.fx-scroll-alta {
  overflow: auto;
  max-block-size: min(72vh, 48rem);
  overscroll-behavior: contain;
}

.fx-scroll.fx-scroll-alta::-webkit-scrollbar { inline-size: .5rem; block-size: .5rem; }
.fx-scroll.fx-scroll-alta::-webkit-scrollbar-thumb { background: var(--verde-300); }
.fx-scroll.fx-scroll-alta { scrollbar-color: var(--verde-300) transparent; }

/* O cabeçalho: fundo de faixa (e não o quase-branco do fundo da página), letra maior
   e uma linha forte embaixo, para separar dos dados que passam por baixo dele. */
.fx-planilha thead th {
  background: color-mix(in srgb, var(--verdeMedio) 20%, white);
  color: var(--verde-900);
  font-size: .75rem;
  border-block-end: 2px solid var(--verde-700);
  box-shadow: 0 1px 0 var(--verde-700);
}

.fx-planilha thead th.fx-th-hist  { background: color-mix(in srgb, var(--tinta-suave) 22%, white) !important; color: var(--tinta) !important; }
.fx-planilha thead th.fx-th-atual { background: color-mix(in srgb, var(--verdeMedio) 34%, white) !important; color: var(--verde-900) !important; }
.fx-planilha thead th.fx-th-fut   { background: color-mix(in srgb, var(--laranja) 26%, white) !important; color: var(--laranja-tinta) !important; }

/* O canto (cabeçalho da coluna Categoria) fica por cima das duas rolagens. */
.fx-planilha thead th.fx-item { z-index: 6; background: color-mix(in srgb, var(--verdeMedio) 20%, white); }

/* ⚠️ O MEIO TEM `position: static` NA PLANILHA (`.fx-planilha .fx-meio`, para não grudar
   na horizontal), e a regra valia também para o CABEÇALHO: o título "Meio" rolava para
   cima com as linhas e a célula de uma categoria aparecia no lugar (visto pelo Igor,
   28/09/2026). No cabeçalho ele gruda no topo como os outros. */
.fx-planilha thead th.fx-meio {
  position: sticky;
  inset-block-start: 0;
  inset-inline-start: auto;
  z-index: 3;
  background: color-mix(in srgb, var(--verdeMedio) 20%, white);
}

/* As setas: botão cheio, verde-escuro com o glifo branco, e o degradê atrás
   só sugere a borda — antes ele era quase branco e apagava o cabeçalho e os
   números que passavam por baixo. */
.sr-rolagem .sr-rolagem-seta.esq { background: linear-gradient(to right, rgb(255 255 255 / 55%), transparent); }
.sr-rolagem .sr-rolagem-seta.dir { background: linear-gradient(to left, rgb(255 255 255 / 55%), transparent); }

.sr-rolagem .sr-rolagem-seta button {
  background: var(--verdeEscuro);
  border-color: var(--verdeEscuro);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
}

.sr-rolagem .sr-rolagem-seta button:hover,
.sr-rolagem .sr-rolagem-seta button:focus-visible {
  background: var(--verde-900);
  color: #fff;
  outline: 2px solid var(--laranja);
  outline-offset: 2px;
}

/* O rodapé de totais gruda embaixo, pelo mesmo motivo: com muitas linhas, o total do mês
   continua à vista enquanto se preenche. */
.fx-scroll-alta .fx-planilha tfoot td {
  position: sticky;
  inset-block-end: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--verdeMedio) 14%, white) !important;
  border-block-start: 2px solid var(--verde-700);
}

.fx-scroll-alta .fx-planilha tfoot td.fx-item { z-index: 6; }
.fx-scroll-alta .fx-planilha tfoot td.fx-meio { position: sticky; inset-block-end: 0; z-index: 3; }


/* A seta desenhada em CSS, e não o glifo ‹ › da fonte: o glifo fica fora do centro do
   círculo (a linha de base e o desenho de cada fonte o empurram), visto pelo Igor em
   28/09/2026. O texto continua no botão para leitor de tela via `aria-label`. */
.sr-rolagem .sr-rolagem-seta button span {
  display: block;
  font-size: 0;
  inline-size: .625rem;
  block-size: .625rem;
  border-block-start: 3px solid currentColor;
  border-inline-start: 3px solid currentColor;
  border-radius: 1px;
}

/* O "V" deitado tem o vértice num canto do quadrado: o deslocamento traz o desenho
   (e não o quadrado) para o centro do círculo. */
.sr-rolagem .sr-rolagem-seta.esq button span { transform: translateX(.125rem) rotate(-45deg); }
.sr-rolagem .sr-rolagem-seta.dir button span { transform: translateX(-.125rem) rotate(135deg); }

/* ⚠️ A SETA DA ESQUERDA FICAVA EM CIMA DO "+/−" das categorias: a coluna Categoria gruda na
   esquerda, e a seta, centrada na altura, cobria o botão da linha do meio — "às vezes o + não
   funciona" (Igor, 29/09/2026). Na planilha ela nasce depois da coluna grudada. */
.sr-rolagem:has(.fx-planilha) .sr-rolagem-seta.esq { inset-inline-start: 14.375rem; }
@media (max-width: 760px) {
  .sr-rolagem:has(.fx-planilha) .sr-rolagem-seta.esq { inset-inline-start: 11.875rem; }
}

/* ==========================================================================
   O Diagnóstico 360° no Painel (Igor, 29/09/2026): fixo, gratuito, texto inteiro,
   e travado até a Anamnese liberar.
   ========================================================================== */
.sr-sol-desc.sr-sol-desc-inteira {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.sr-sol-nota {
  display: block;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}

.sr-sol-nota b { display: block; color: var(--verde-900); margin-block-end: .125rem; }

/* ⚠️ GRATUITO É VERDE, E A ETIQUETA DE VALOR É AMARELA (Igor, 02/10/2026) — as duas trocaram
   de cor. O amarelo passou a significar UMA COISA SÓ no cartão: "custa dinheiro" (ver
   `.sr-sol-preco`). "Gratuito" e "Liberado" dizem a mesma coisa para quem olha — você já tem
   acesso —, e por isso usam o mesmo verde: duas cores para o mesmo estado é o que faz a pessoa
   procurar uma diferença que não existe. */
.sr-sol-tag.sr-sol-gratis {
  background: color-mix(in srgb, #2fa86a 14%, white);
  border-color: color-mix(in srgb, #2fa86a 45%, white);
  color: #1e7a4b;
}
.sr-sol-fixo .sr-sol-meta { flex-wrap: wrap; }

/* O rodapé do cartão (Igor, 29/09/2026): a barra e o percentual colados no pé, acima das
   etiquetas. O `margin-block-start: auto` que antes estava nas etiquetas passa para cá. */
.sr-sol-progresso {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-block-start: auto;
  padding-block-start: .5rem;
}

.sr-sol-progresso .sr-sol-barra { flex: 1 1 auto; margin: 0; }

.sr-sol-progresso .sr-sol-pct {
  margin: 0;
  font-size: .8rem;
  font-weight: 800;
  color: var(--verde-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sr-sol-card .sr-sol-meta { margin-block-start: 0; }

/* ==========================================================================
   E52 — O MOTOR DE DASHBOARDS DOS MÓDULOS (sdx-*) — o Raio-X do Diagnóstico 360°
   Literal ao que o `SRDash.css()` do modelo de 26/09/2026 injeta (id "sdx-css"): o CSS do
   dashboard do fluxo com fxd→sdx, mais as regras próprias do motor. Acréscimos: a nota da
   tabela e a descrição do indicador (que no modelo são `style` inline e aqui viram classe)
   e a impressão do botão "Relatório".
   ========================================================================== */
.sdx button:focus-visible,.sdx select:focus-visible{outline:2px solid #1CAF9C;outline-offset:2px}
.sdx{display:flex;flex-direction:column;gap:14px;min-width:0;max-width:100%;margin-bottom:18px;font-family:var(--ff-sans,"Plus Jakarta Sans",sans-serif);color:var(--ink,#13202b)}
.sdx *{box-sizing:border-box}
.sdx h3{font-family:var(--ff-display,Fraunces,Georgia,serif);font-weight:600;font-size:17px;color:var(--sr-teal-900,#0a5f5e);margin:0;line-height:1.25;letter-spacing:-.005em}
.sdx-filtros{background:#fff;border:1px solid var(--line,#dfe9e8);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;min-width:0}
.sdx-frow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.sdx-fl{font-size:12px;font-weight:700;color:var(--ink-2,#3a4a5a);min-width:132px}
.sdx-sp{flex:1}
.sdx-chips{display:flex;flex-wrap:wrap;gap:6px}
.sdx-chip{border:1px solid var(--line,#dfe9e8);background:#fff;border-radius:999px;padding:5px 11px;font:600 12px var(--ff-sans,sans-serif);color:var(--ink-2,#3a4a5a);cursor:pointer;line-height:1.3}
.sdx-chip:hover{border-color:#a9ddd3}
.sdx-chip.on{background:var(--sr-teal-800,#0E7C7B);border-color:var(--sr-teal-800,#0E7C7B);color:#fff}
.sdx-chip-g i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gc);margin-right:6px;vertical-align:0}
.sdx-chip-g.on{background:#fff;color:var(--ink,#13202b);border-color:var(--gc);box-shadow:inset 0 0 0 1px var(--gc)}
.sdx-chip-g:not(.on){opacity:.55;text-decoration:line-through}
.sdx select{border:1px solid var(--line,#dfe9e8);border-radius:8px;padding:5px 8px;font:500 12.5px var(--ff-sans,sans-serif);background:#fff;color:var(--ink,#13202b);max-width:100%}
.sdx-range{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2,#3a4a5a)}
.sdx-seg{display:inline-flex;border:1px solid var(--line,#dfe9e8);border-radius:9px;overflow:hidden;background:#fff}
.sdx-seg button{border:0;background:none;padding:6px 11px;font:600 12px var(--ff-sans,sans-serif);color:var(--ink-2,#3a4a5a);cursor:pointer}
.sdx-seg button+button{border-left:1px solid var(--line,#dfe9e8)}
.sdx-seg button.on{background:var(--sr-teal-050,#eefaf6);color:var(--sr-teal-900,#0a5f5e)}
.sdx-seg.sm button{padding:4px 9px;font-size:11.5px}
.sdx-link{border:0;background:none;color:var(--sr-teal-700,#118a87);font:700 12px var(--ff-sans,sans-serif);cursor:pointer;padding:4px 2px;text-decoration:underline;text-underline-offset:3px}
.sdx-toggle{border:1px solid var(--line,#dfe9e8);background:#fff;border-radius:8px;padding:5px 10px;font:600 11.5px var(--ff-sans,sans-serif);color:var(--ink-2,#3a4a5a);cursor:pointer}
.sdx-toggle.on{border-color:#0a5f5e;color:#0a5f5e;background:var(--sr-teal-050,#eefaf6)}
.sdx-ctx{margin:-4px 2px 0;font-size:12.5px;color:var(--ink-2,#3a4a5a);line-height:1.55}
.sdx-ctx b{color:var(--ink,#13202b)}
.sdx-ctx-av{display:block;color:#8A5300;margin-top:2px}
.sdx-ctx-cc{display:block;color:var(--muted,#6b7d7c);margin-top:4px;font-size:12px}
.sdx-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media(max-width:1180px){.sdx-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.sdx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.sdx-kpi{background:#fff;border:1px solid var(--line,#dfe9e8);border-radius:12px;padding:11px 12px 9px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sdx-kpi.neg{border-color:#f1c4c4;background:#fffafa}
.sdx-kpi .l{font-size:11.5px;font-weight:700;color:var(--muted,#6b7d7c)}
.sdx-kpi .v{font-family:var(--ff-display,Fraunces,Georgia,serif);font-weight:600;font-size:22px;color:var(--sr-teal-900,#0a5f5e);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdx-kpi .s{font-size:10.5px;color:var(--muted,#6b7d7c);line-height:1.35}
.sdx-kpi .dl{margin-top:3px;min-height:18px}
.sdx-spark{width:100%;height:26px;margin-top:4px;display:block}
.sdx-gauge{position:relative;display:block;height:6px;border-radius:3px;background:#edf3f2;margin-top:8px}
.sdx-gauge i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.sdx-gauge b{position:absolute;top:-3px;bottom:-3px;width:2px;background:#13202b;border-radius:1px}
.sdx-d{display:inline-flex;gap:3px;align-items:center;font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;white-space:nowrap;line-height:1.5}
.sdx-d i{font-style:normal;font-weight:500;opacity:.8}
.sdx-d-ok{background:#e6f5ec;color:#1e7a4b}.sdx-d-bad{background:#fdecec;color:#b53030}.sdx-d-n{background:var(--bg-2,#eaf2f0);color:var(--ink-2,#3a4a5a)}
.sdx-card{background:#fff;border:1px solid var(--line,#dfe9e8);border-radius:14px;padding:14px 16px;min-width:0}
.sdx-hero{padding:16px 18px 14px;border-color:#cfe4e1}
.sdx-hero h3{font-size:20px}
.sdx-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sdx-h p{font-size:12px;color:var(--muted,#6b7d7c);margin:3px 0 0;max-width:64ch;line-height:1.45}
.sdx-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sdx-col{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(max-width:980px){.sdx-grid2{grid-template-columns:1fr}}
.sdx svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--ff-sans,"Plus Jakarta Sans",sans-serif)}
.sdx .sdx-hit{cursor:pointer}
.sdx .sdx-tm:hover rect{opacity:.85}
.sdx-leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--ink-2,#3a4a5a);margin-top:8px}
.sdx-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.sdx-leg i.ln{height:3px;width:16px;border-radius:2px;vertical-align:3px}
.sdx-leg i.dash{height:0;border-top:2px dashed;background:none;border-radius:0}
.sdx-leg i.hatch{background:repeating-linear-gradient(45deg,rgba(27,58,92,.16) 0 3px,transparent 3px 6px);border:1px solid #dfe9e8}
.sdx-note{font-size:12px;color:var(--ink-2,#3a4a5a);margin:8px 0 0;line-height:1.5}
.sdx-empty{font-size:12.5px;color:var(--muted,#6b7d7c);margin:6px 0;padding:14px;background:var(--bg,#f4f8f7);border-radius:10px}
.sdx-ins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:760px){.sdx-ins{grid-template-columns:1fr}}
.sdx-in{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--bg,#f4f8f7);border-left:3px solid #9fb3b1}
.sdx-in .ic{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;background:#9fb3b1}
.sdx-in .t{display:block;font-size:13px;color:var(--ink,#13202b);line-height:1.35}
.sdx-in .d{display:block;font-size:12px;color:var(--ink-2,#3a4a5a);margin-top:2px;line-height:1.45}
.sdx-in .sdx-link{margin-top:2px;padding-left:0}
.sdx-in-bad{border-left-color:#D64545;background:#fff6f6}.sdx-in-bad .ic{background:#D64545}
.sdx-in-warn{border-left-color:#E89C2C;background:#fffaf0}.sdx-in-warn .ic{background:#E89C2C}
.sdx-in-info{border-left-color:#2d7fb5;background:#f3f8fc}.sdx-in-info .ic{background:#2d7fb5}
.sdx-in-ok{border-left-color:#2FA86A;background:#f2faf5}.sdx-in-ok .ic{background:#2FA86A}
.sdx-card{container-type:inline-size}
.sdx-donut{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center}
.sdx-donut svg{max-width:200px;margin:0 auto}
.sdx-dleg{font-size:12px;min-width:0}
.sdx-dleg>div{display:grid;grid-template-columns:minmax(0,1fr) 38px 38px 64px;gap:6px;align-items:center;padding:6px 0;border-top:1px solid var(--line-2,#edf3f2);text-align:right;font-variant-numeric:tabular-nums}
.sdx-dleg>div.hd{border-top:0;padding:0 0 3px;font-size:10.5px;color:var(--muted,#6b7d7c);font-weight:700}
.sdx-dleg .nm,.sdx-dleg .hd span:first-child{text-align:left;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdx-dleg .bad{color:#b53030;font-weight:800}
.sdx-dleg i,.sdx-rleg i,.sdx-mlist i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.sdx-rleg,.sdx-mlist{list-style:none;margin:0;padding:0;font-size:12px}
.sdx-rleg li{display:flex;align-items:center;gap:4px;padding:5px 0;border-top:1px solid var(--line-2,#edf3f2)}
.sdx-rleg li span{flex:1;min-width:0}
.sdx-rleg li b,.sdx-mlist b{font-variant-numeric:tabular-nums}
.sdx-rank{list-style:none;margin:0;padding:0}
.sdx-rank li+li{border-top:1px solid var(--line-2,#edf3f2)}
.sdx-rank button{display:grid;grid-template-columns:22px minmax(0,1fr) 118px;grid-template-areas:"p n v" "p b d";gap:0 10px;align-items:center;width:100%;border:0;background:none;padding:7px 2px;text-align:left;cursor:pointer;font-family:inherit;color:inherit}
.sdx-rank button:hover{background:var(--bg,#f4f8f7)}
.sdx-rank .pos{grid-area:p;font-family:var(--ff-display,Fraunces,serif);font-weight:600;color:var(--muted,#6b7d7c);font-size:14px;text-align:center}
.sdx-rank .nm{grid-area:n;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdx-rank .nm small{display:block;font-size:10.5px;font-weight:500;color:var(--muted,#6b7d7c)}
.sdx-rank .bar{grid-area:b;height:8px;background:#edf3f2;border-radius:4px;overflow:hidden;margin-top:5px}
.sdx-rank .bar i{display:block;height:100%;border-radius:4px}
.sdx-rank .val{grid-area:v;font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.sdx-rank .dv{grid-area:d;text-align:right}
.sdx-var{list-style:none;margin:0;padding:0}
.sdx-var button{display:grid;grid-template-columns:minmax(0,1fr) 124px;grid-template-areas:"n n" "a v";gap:3px 10px;align-items:center;width:100%;border:0;background:none;padding:6px 2px;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.sdx-var button:hover{background:var(--bg,#f4f8f7)}
.sdx-var .nm{grid-area:n;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdx-var .axis{grid-area:a}.sdx-var .val{grid-area:v}
.sdx-var .nm i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.sdx-var .axis{position:relative;height:12px}
.sdx-var .axis:before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:#9fb3b1}
.sdx-var .axis i{position:absolute;top:0;bottom:0;border-radius:3px}
.sdx-var .axis i.ok{background:#2FA86A}.sdx-var .axis i.bad{background:#D64545}
.sdx-var .val{font-size:12px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sdx-var .val small{font-weight:600;opacity:.8}
.sdx-var .val.ok{color:#1e7a4b}.sdx-var .val.bad{color:#b53030}
.sdx-var .axis i.neu{background:#0E7C7B}.sdx-var .val.neu{color:#0a5f5e}
.sdx-bul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sdx-bul .hd{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;margin-bottom:4px;gap:8px}
.sdx-bul .hd i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.sdx-bul .hd b{font-size:11.5px}
.sdx-bul .trk{position:relative;height:12px;background:#edf3f2;border-radius:6px;cursor:default}
.sdx-bul .trk i{position:absolute;left:0;top:0;bottom:0;border-radius:6px}
.sdx-bul .trk b{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:#13202b;border-radius:2px}
.sdx-bul .ft{display:flex;justify-content:space-between;font-size:11px;color:var(--muted,#6b7d7c);margin-top:4px;font-variant-numeric:tabular-nums}
.sdx-stack{display:flex;height:16px;border-radius:8px;overflow:hidden;background:#edf3f2;margin-bottom:10px}
.sdx-stack i{display:block;height:100%}
.sdx-stack i+i{box-shadow:inset 1px 0 0 #fff}
.sdx-mlist li{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;padding:5px 0;border-top:1px solid var(--line-2,#edf3f2)}
.sdx-mlist em{font-style:normal;color:var(--muted,#6b7d7c);font-size:11.5px;min-width:74px;text-align:right}
.sdx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sdx-heat{border-collapse:separate;border-spacing:2px;font-size:11px;min-width:100%}
.sdx-heat th{font-weight:600;color:var(--muted,#6b7d7c);padding:3px 4px;white-space:nowrap;font-size:10.5px}
.sdx-heat thead th.a{color:#0a5f5e;font-weight:800;border-bottom:2px solid #0E7C7B}
.sdx-heat thead th.f{font-style:italic}
.sdx-heat thead th.h{text-decoration:underline}
.sdx-heat tbody th{position:sticky;left:0;background:#fff;text-align:left;z-index:1}
.sdx-heat tbody th button{border:0;background:none;font:600 11.5px var(--ff-sans,sans-serif);color:var(--ink,#13202b);cursor:pointer;padding:0;white-space:nowrap}
.sdx-heat tbody th i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.sdx-heat td{min-width:44px;height:26px;text-align:center;border-radius:4px;background:#f6f9f9;font-variant-numeric:tabular-nums;font-weight:600;cursor:default}
.sdx-heat td.a{outline:1px solid rgba(14,124,123,.25)}
.sdx-heat td.hot{box-shadow:inset 0 0 0 2px #D64545}
.sdx-heat td sup{font-size:8px;margin-left:1px}
.sdx-tab{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px}
.sdx-tab th{font-size:11px;font-weight:700;color:var(--muted,#6b7d7c);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line,#dfe9e8);white-space:nowrap}
.sdx-tab th button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0}
.sdx-tab th.n,.sdx-tab td.n{text-align:right}
.sdx-tab td{padding:6px 8px;border-bottom:1px solid var(--line-2,#edf3f2);font-variant-numeric:tabular-nums;vertical-align:middle}
.sdx-tab td.nm button{border:0;background:none;font:600 12.5px var(--ff-sans,sans-serif);color:var(--ink,#13202b);cursor:pointer;padding:0;text-align:left}
.sdx-tab td.nm button:hover{color:#0E7C7B;text-decoration:underline}
.sdx-tab td.nm i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}
.sdx-tab td.g{color:var(--muted,#6b7d7c);font-size:11.5px}
.sdx-tab td.ok{color:#1e7a4b;font-weight:700}.sdx-tab td.bad{color:#b53030;font-weight:700}
.sdx-tab td.sp{width:110px;min-width:90px}
.sdx-tab td.sp .sdx-spark{margin:0;height:22px}
.sdx-tab-sm{min-width:480px;font-size:12px}
.sdx-foco{border:1px solid #bfe3de;box-shadow:0 6px 24px -14px rgba(14,124,123,.5)}
.sdx-tag{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:var(--gc);border-radius:999px;padding:1px 8px;margin-bottom:4px}
.sdx-foco-bt{display:flex;align-items:center;gap:6px}
.sdx-x{border:1px solid var(--line,#dfe9e8);background:#fff;border-radius:8px;width:30px;height:30px;font-size:18px;line-height:1;cursor:pointer;color:var(--ink-2,#3a4a5a)}
.sdx-fk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
@media(max-width:560px){.sdx-fk{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sdx-fk>div{background:var(--bg,#f4f8f7);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sdx-fk span{font-size:10.5px;color:var(--muted,#6b7d7c);font-weight:700}
.sdx-fk b{font-family:var(--ff-display,Fraunces,serif);font-weight:600;font-size:17px;color:var(--sr-teal-900,#0a5f5e)}
.sdx-foco-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:980px){.sdx-foco-g{grid-template-columns:1fr}}
.sdx-vazio{background:#fff;border:1px dashed #bfe3de;border-radius:14px;padding:26px 22px;text-align:center}
.sdx-vazio p{font-size:13px;color:var(--ink-2,#3a4a5a);max-width:56ch;margin:6px auto 12px}
.sdx-btn{border:0;background:var(--sr-teal-800,#0E7C7B);color:#fff;border-radius:9px;padding:9px 16px;font:700 13px var(--ff-sans,sans-serif);cursor:pointer}
.sdx-rodape{font-size:11px;color:var(--muted,#6b7d7c);margin:0 2px;line-height:1.5;max-width:110ch}
.sdx-tip{position:fixed;z-index:99999;pointer-events:none;background:#0f2e2c;color:#fff;border-radius:10px;padding:9px 11px;font:12px/1.5 var(--ff-sans,"Plus Jakarta Sans",sans-serif);box-shadow:0 12px 34px -8px rgba(0,0,0,.5);max-width:260px;display:none}
@media(max-width:720px){
  .sdx-fl{min-width:0;width:100%}
  .sdx-chips{flex-wrap:nowrap;overflow-x:auto;width:100%;min-width:0;max-width:100%;padding-bottom:3px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sdx-chips .sdx-chip{flex:0 0 auto}
  .sdx-card{padding:12px 12px}
  .sdx-hero h3{font-size:18px}
  .sdx-kpi .v{font-size:19px}
  .sdx-rank button{grid-template-columns:20px minmax(0,1fr) 112px;grid-template-areas:"p n v" "p b d"}
  .sdx-var button{grid-template-columns:minmax(0,1fr) 104px;gap:3px 8px}
  .sdx-rank .bar{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.sdx *{scroll-behavior:auto!important}}
.sdx-filtros [data-fx-sem-js][hidden]{display:none}

.sdx-hb{list-style:none;margin:0;padding:0}
.sdx-tab td.n{white-space:nowrap}
.sdx-hb li{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(50px,1fr) 96px;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line-2,#edf3f2);font-size:12.5px}
.sdx-hb .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdx-hb .nm small{display:block;font-size:10.5px;font-weight:500;color:var(--muted,#6b7d7c)}
.sdx-hb .bar{position:relative;height:10px;background:#edf3f2;border-radius:5px}
.sdx-hb .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.sdx-hb .bar b{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:1px}
.sdx-hb .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.sdx-rl{display:grid;gap:0;font-size:12px;min-width:0}
.sdx-rl>div{display:grid;grid-template-columns:12px minmax(0,1fr) 44px 74px;gap:6px;align-items:center;padding:5px 0;border-top:1px solid var(--line-2,#edf3f2)}
.sdx-rl i{width:10px;height:10px;border-radius:3px;display:block}
.sdx-rl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdx-rl b,.sdx-rl em{text-align:right;font-variant-numeric:tabular-nums}.sdx-rl em{font-style:normal;color:var(--muted,#6b7d7c)}
.sdx-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.sdx-cmp .op{border:1px solid var(--line,#dfe9e8);border-radius:12px;padding:10px 12px;background:#fff}
.sdx-cmp .op.on{border-color:#0E7C7B;box-shadow:inset 0 0 0 1px #0E7C7B;background:#f5fbfa}
.sdx-cmp .t{font-family:var(--ff-display,Fraunces,serif);font-weight:600;font-size:15px;color:var(--sr-teal-900,#0a5f5e);margin-bottom:6px;display:flex;justify-content:space-between;gap:6px;align-items:center}
.sdx-cmp .t span{font:800 10px var(--ff-sans,sans-serif);color:#fff;background:#0E7C7B;border-radius:999px;padding:2px 7px}
.sdx-cmp .l{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:4px 0;border-top:1px solid var(--line-2,#edf3f2)}
.sdx-cmp .l b{font-variant-numeric:tabular-nums;text-align:right}
.sdx-cmp p{font-size:11.5px;color:var(--muted,#6b7d7c);margin:6px 0 0}
.sdx-gg{text-align:center}.sdx-gg svg{max-width:260px;margin:0 auto}.sdx-rd svg{max-width:420px;margin:0 auto}
.sdx-gauge-b{position:relative;display:block;height:6px;border-radius:3px;background:#edf3f2;margin-top:8px}
.sdx-gauge-b i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}.sdx-gauge-b b{position:absolute;top:-3px;bottom:-3px;width:2px;background:#13202b}
.sdx-chk{list-style:none;margin:0;padding:0}
.sdx-chk li{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line-2,#edf3f2);font-size:12.5px}
.sdx-chk .ic{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:11px;color:#fff;background:#9fb3b1}
.sdx-chk li.ok .ic{background:#2FA86A}.sdx-chk li.bad .ic{background:#E89C2C}
.sdx-chk span{display:block;color:var(--ink-2,#3a4a5a);font-size:12px}
.sdx-leg i.tr{height:0;border-top:2px dashed;background:none;width:16px;vertical-align:3px}
.sdx-cvf{padding:18px}.sdx-cvf-h h2{font-family:var(--ff-display,Fraunces,serif);font-weight:500;font-size:24px;color:var(--sr-teal-900,#0a5f5e);margin:0}.sdx-cvf-h p{font-size:13px;color:var(--ink-2,#3a4a5a);margin:4px 0 14px}
.sdx-filtros .sdx-seg{max-width:100%;overflow-x:auto;scrollbar-width:none}.sdx-filtros .sdx-seg button{flex:0 0 auto}
@media(max-width:720px){.sdx-hb li{grid-template-columns:minmax(0,1fr) 90px;grid-template-areas:"n v" "b b"}.sdx-hb .nm{grid-area:n}.sdx-hb .v{grid-area:v}.sdx-hb .bar{grid-area:b}.sdx-cvf{padding:12px}}
.sdx-tab-desc{color:#6b7d7c}
.sdx-nota{display:inline-flex;align-items:center;gap:6px}
.sdx-nota-trk{display:inline-block;width:54px;height:7px;border-radius:4px;background:#edf3f2;position:relative;overflow:hidden}
.sdx-nota-trk i{position:absolute;left:0;top:0;bottom:0}
.sdx-vazio{background:#fff;border:1px dashed var(--line,#dfe9e8);border-radius:14px;padding:22px 18px;text-align:center}
.sdx-vazio p{font-size:13px;color:var(--ink-2,#3a4a5a);margin:6px 0 0}

/* O "Relatório" imprime SÓ a área do botão (Igor, 29 e 30/09/2026) — o Raio-X ou o dashboard
   do fluxo. A cópia da área, em #sr-impressao, é posta pelo `sr-imprimir.js`. */
@media print {
  body.sr-imprimindo > :not(#sr-impressao) { display: none !important; }
  #sr-impressao :is(.sdx-filtros, .fxd-filtros, .fxd-switch) { display: none !important; }
  .sdx-card, .sdx-kpi, .sdx-in, .fxd-card, .fxd-kpi, .fxd-in { break-inside: avoid; }
  .sdx, .fxd { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
#sr-impressao { display: none; }
@media print { body.sr-imprimindo #sr-impressao { display: block; } }

/* ==========================================================================
   O texto inteiro de um campo de tabela (sr-dica-campo.js, 30/09/2026)
   Só aparece quando o texto não cabe na coluna. O `max-inline-size` quebra frases longas em
   linhas em vez de atravessar a tela.
   ========================================================================== */
.sr-dica-campo {
  position: fixed;
  z-index: 1085;
  max-inline-size: min(28rem, calc(100vw - 16px));
  padding: .45rem .65rem;
  border-radius: .5rem;
  background: #0f2e2c;
  color: #fff;
  font-size: .8125rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.sr-dica-campo[hidden] { display: none; }
.sr-dica-campo-extra { display: block; margin-block-start: .3rem; font-size: .75rem; color: #b9d6d2; }
@media print { .sr-dica-campo { display: none !important; } }

/* ==========================================================================
   Plano de Ação — campos sempre alinhados (Igor, 30/09/2026)
   A linha se alinha pela BASE: a marca "sugerida" fica em cima do campo e cresce para cima,
   e os campos das outras colunas continuam na mesma linha que o dela.
   ========================================================================== */
.sr-plano-tabela > tbody > tr > td { vertical-align: bottom; }
.sr-plano-tabela .sr-plano-marca { display: inline-block; margin-block-end: .25rem; }

/* ==========================================================================
   E54 — objetivos à venda no Painel (Igor, 30/09/2026)
   O cartão bloqueado continua legível (a pessoa precisa saber o que está comprando), só mais
   discreto; a etiqueta de valor tem cadeado. A tela de pagamento é um modal de tela cheia.
   ========================================================================== */
.sr-sol-meta { flex-wrap: wrap; }
.sr-sol-card.sr-sol-bloqueado { background-color: color-mix(in srgb, var(--bs-body-bg) 92%, #94a3b8); }
.sr-sol-card.sr-sol-bloqueado .sr-sol-ic { filter: grayscale(.6); opacity: .8; }
/* ⚠️ A ETIQUETA DE VALOR É AMARELA (Igor, 02/10/2026). Era cinza, e cinza no rodapé de um
   cartão lê-se como "desligado", não como "à venda" — o preço é a única etiqueta que pede uma
   ação da pessoa, e é a única que destoa do verde do resto. É o mesmo âmbar que o "Gratuito"
   usava até hoje; os dois trocaram de lugar, de propósito, para que a cor queira dizer
   "custa dinheiro" e nada mais. O contraste de `--laranja-tinta` sobre o fundo a 16% é o
   mesmo que já passava no AA desde a E54 — só mudou qual etiqueta o veste. */
.sr-sol-tag.sr-sol-preco {
  background: var(--laranja-050);
  border-color: var(--laranja-linha);
  color: var(--laranja-tinta);
  font-weight: 800;
}
.sr-sol-tag.sr-sol-liberado {
  background: color-mix(in srgb, #2fa86a 14%, white);
  border-color: color-mix(in srgb, #2fa86a 45%, white);
  color: #1e7a4b;
}
.sr-pagamento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: center;
  padding: 2rem 1rem;
}
.sr-pagamento-ic { font-size: 4.5rem; color: #e89c2c; line-height: 1; }
.sr-pagamento-titulo { font-size: 1.5rem; margin: 0; }
.sr-pagamento-resumo, .sr-pagamento-libera { margin: 0; max-inline-size: 36rem; }

/* E55 — a caixa da assinatura; desde 01/10/2026 dentro da área Fundamentos (libera só ela). */
.sr-assinatura {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--laranja) 45%, white);
  border-radius: var(--raio-md, .75rem);
  background: color-mix(in srgb, var(--laranja) 10%, white);
}
.sr-assinatura.ativa {
  border-color: color-mix(in srgb, #2fa86a 45%, white);
  background: color-mix(in srgb, #2fa86a 10%, white);
}
.sr-assinatura-ic { font-size: 1.75rem; color: var(--laranja-tinta); line-height: 1; }
.sr-assinatura.ativa .sr-assinatura-ic { color: #1e7a4b; }
.sr-assinatura-texto { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.sr-assinatura-texto span { font-size: .875rem; color: var(--bs-secondary-color); }
.sr-assinatura-botao { white-space: nowrap; }
@media (max-width: 575.98px) {
  .sr-assinatura { flex-wrap: wrap; }
  .sr-assinatura-botao { inline-size: 100%; }
}

/* E56 — Meu Financeiro (só o desenho, 30/09/2026). */
.sr-mf .card-header i { color: var(--verde-700); }
.sr-mf fieldset[disabled] .form-control,
.sr-mf fieldset[disabled] .form-select { background-color: var(--cinza-050, #f1f5f9); }
.sr-mf-assinatura {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--laranja) 45%, white);
  border-radius: var(--raio-sm, .5rem);
  background: color-mix(in srgb, var(--laranja) 10%, white);
  font-size: .875rem;
}
.sr-mf-assinatura.ativa {
  border-color: color-mix(in srgb, #2fa86a 45%, white);
  background: color-mix(in srgb, #2fa86a 10%, white);
}
.sr-mf-assinatura span { color: var(--bs-secondary-color); }

/* E56 — as tabelas das ferramentas no desenho do fluxo de caixa (30/09/2026). A `fx-table`
   nasceu para células com campo (padding 0); aqui as células de resultado são texto. */
.sr-ferr-tabela th,
.sr-ferr-tabela td { padding: .5rem .75rem; text-align: start; }
.sr-ferr-tabela thead th { text-align: start; }
.sr-ferr-tabela tbody th { font-weight: 700; color: var(--verde-900); background: #fff; }
.sr-ferr-tabela tbody tr:hover td,
.sr-ferr-tabela tbody tr:hover th { background: var(--verde-050); }
.sr-ferr-tabela tr.sr-ferr-destaque td,
.sr-ferr-tabela tr.sr-ferr-destaque th {
  background: color-mix(in srgb, var(--verdeMedio) 18%, white);
  font-weight: 700;
}
.sr-ferr-entrada td { padding: .25rem .375rem; }
.sr-ferr-entrada td.fx-del { text-align: center; }

/* E57 — o deslizante e, ao lado, o campo editável com máscara (todas as ferramentas).

   ⚠️ E64 (05/10/2026, Igor: "em algumas ferramentas os slider ficaram comprimidos, impedindo a
   utilização"). MEDIDO antes de mexer, num Chromium, com a marcação real desta tela: num campo de
   MEIA COLUNA (`col-sm-6` dentro do `col-lg-5` do cartão) sobravam **62px** para o deslizante,
   contra 152px fixos do campo de valor ao lado. 62px para percorrer, por exemplo, 57 passos de
   "prazo em meses" não é um controle apertado: é um controle que não dá para usar. Nos campos
   LARGOS (`wide` no catálogo) sobravam 299px, e por isso o defeito aparecia "em algumas".

   A regra agora: os dois podem QUEBRAR em duas linhas, e quem decide é a largura do próprio par
   (`container-type: inline-size`), não a da janela — o mesmo campo aparece em cartões de larguras
   diferentes, e uma `@media` erraria em metade deles. Abaixo de 20rem o campo de valor sobe para
   a primeira linha (ele é o controle de verdade desde a E57; o deslizante é o atalho) e o
   deslizante fica com a linha inteira. Acima disso nada muda — o campo largo continua como estava. */
.sr-ferr-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; container-type: inline-size; }
.sr-ferr-faixa .form-range { flex: 1 1 9rem; min-width: 0; }
.sr-ferr-faixa .sr-ferr-valor { flex: 0 0 9.5rem; width: 9.5rem; }

/* ⚠️ `flex-basis` JUNTO COM `width`: com `flex: 0 0 9.5rem` acima, mexer só na `width` não mudaria
   nada — a base manda. A Curva avulsa continua com o campo de 8.5rem que a E57 lhe deu ENQUANTO
   os dois couberem lado a lado; empilhados (celular estreito), vale o `max-width: 12rem` da regra
   do contêiner, porque `@container` não soma especificidade e esta regra, com três classes,
   continua vencendo no `flex-basis`. */
.sr-curva-campo .sr-ferr-faixa .sr-ferr-valor { flex-basis: 8.5rem; width: 8.5rem; }

@container (max-width: 20rem) {
  .sr-ferr-faixa .sr-ferr-valor { order: -1; flex: 1 1 100%; width: 100%; max-width: 12rem; }
  .sr-ferr-faixa .form-range { flex: 1 1 100%; }
}

/* E57 — o seletor "Curva de Vitalidade® | Dashboard de análise" no lugar da barra de relatórios. */
.sr-cvf-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 999px; background: #edf3f2; border: 1px solid #d9e6e4; }
.sr-cvf-switch a { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #0a5f5e; text-decoration: none; }
.sr-cvf-switch a.on { background: #0E7C7B; color: #fff; box-shadow: 0 4px 10px -4px rgba(14,124,123,.5); }
.sr-cvf-switch a:focus-visible { outline: 2px solid #0E7C7B; outline-offset: 2px; }
@media (max-width: 575.98px) { .sr-cvf-switch .lg { display: none; } }

/* =============================================================================
   E62 (Igor, 01/10/2026) — Fluxo de Caixa: os combos de classe e categoria de cada linha,
   e o sinal e a cor da classe nos valores.
   ============================================================================= */

/* --- Classe · Categoria: dois combos lado a lado, na coluna depois da descrição --- */
.fx-planilha .fx-mover { min-inline-size: 17rem; }
.fx-mover-box { display: flex; gap: .25rem; align-items: center; }
.fx-mover-box .form-select {
  flex: 1 1 0;
  min-inline-size: 0;
  font-size: .75rem;
  font-weight: 500;
  text-overflow: ellipsis;
}
.fx-planilha .fx-n1 > td.fx-mover { background: var(--verde-050); }

/* --- o sinal fica fora do campo: o campo continua recebendo o número positivo --- */
.fx-cel-val { display: flex; align-items: center; }
.fx-cel-val > .form-control { flex: 1 1 auto; min-inline-size: 0; }
.fx-sinal {
  padding-inline-start: .375rem;
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Campo vazio (o "0" do placeholder à vista): sem sinal — a ausência é o dado (E41). */
.fx-cel-val:has(> .form-control:placeholder-shown) > .fx-sinal { visibility: hidden; }

/* --- a cor da classe: verde mais forte da paleta em Receitas, vermelho nas despesas --- */
.fx-receita .fx-sinal,
.fx-receita .fx-cel .form-control,
.fx-receita .fx-sub1,
.fx-receita .fx-tot { color: var(--verde-900); }

.fx-despesa .fx-sinal,
.fx-despesa .fx-cel .form-control,
.fx-despesa .fx-sub1,
.fx-despesa .fx-tot { color: var(--vermelho); }

/* ==========================================================================
   CLASSIFICAR PELO TÍTULO DA COLUNA (Igor, 02/10/2026) — ver `core/sr-ordenar.js`.
   O botão ocupa o `<th>` inteiro para que o alvo de clique seja o título, e não um ícone de
   12px ao lado dele. Ele herda tudo do cabeçalho (fonte, peso, cor, alinhamento): o que a
   pessoa vê continua sendo o título da coluna — o que mudou é que agora ele responde.
   ⚠️ A SETA SÓ APARECE NO HOVER/FOCO E NA COLUNA ORDENADA — um ícone aceso em cada uma das
   colunas viraria ruído. Mas ela é escondida por `opacity`, e NÃO por largura zero: o espaço
   dela fica reservado o tempo todo, de propósito. Tirá-la do fluxo faria o cabeçalho inteiro
   saltar a cada passagem do mouse, e o salto é pior que os ~14px.
   ========================================================================== */
.sr-ord {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* `text-end` no `<th>` manda o conteúdo para a direita; o botão precisa acompanhar, senão a
   coluna de dinheiro fica com o rótulo colado à esquerda. */
th.text-end > .sr-ord { justify-content: flex-end; }
th.text-center > .sr-ord { justify-content: center; }

.sr-ord:hover { color: var(--verde-900); }
.sr-ord:focus-visible { outline: 2px solid var(--verdeMedio); outline-offset: 2px; border-radius: var(--raio-xs); }

.sr-ord-ic {
  flex: none;
  font-size: .75em;
  line-height: 1;
  opacity: 0;
  transition: opacity .12s ease-in-out;
}

/* Bootstrap Icons: a seta dupla convida, e a de letras diz em que sentido está. */
.sr-ord-ic::before { content: "\f127"; }                   /* bi-arrow-down-up       */
.sr-ord-asc .sr-ord-ic::before { content: "\f571"; }       /* bi-sort-alpha-down     */
.sr-ord-desc .sr-ord-ic::before { content: "\f570"; }      /* bi-sort-alpha-down-alt */
.sr-ord-asc .sr-ord-ic,
.sr-ord-desc .sr-ord-ic { opacity: 1; color: var(--verdeEscuro); }

.sr-ord:hover .sr-ord-ic,
.sr-ord:focus-visible .sr-ord-ic { opacity: .55; }
.sr-ord-asc:hover .sr-ord-ic,
.sr-ord-desc:hover .sr-ord-ic { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sr-ord-ic { transition: none; }
}

/* A marca de campo obrigatório (Igor, 02/10/2026) — ver `_MarcaDeObrigatorio.cshtml`.
   ⚠️ NÃO É VERMELHA. Vermelho na nossa folha é erro (`--vermelho`), e um formulário que nasce
   com quinze asteriscos vermelhos lê como quinze campos errados antes de a pessoa digitar
   qualquer coisa. O laranja é o mesmo "repare nisto" das etiquetas de valor. */
.sr-obrigatorio {
  margin-inline-start: .15rem;
  color: var(--laranja-tinta);
  font-weight: 700;
}

/* =============================================================================
   ABA COMPOSTA — E65 (05/10/2026)
   -----------------------------------------------------------------------------
   O `Workspace_Homologacao_V3.html` desenha a aba Objetivo da Aposentadoria como uma pilha de
   cartões (`.hm-comp` / `.hm-part` / `.hm-part-h`), fechada pela caixa da retirada
   (`.hm-ret-v` / `.hm-nota`). Isto é aquilo nos nossos tokens:

       --line     → --linha          --line-2  → --linha-2
       --muted    → --tinta-suave    --sr-teal-900 → --verde-900
       --ff-display → --sr-ff-display

   ⚠️ 14px DE RAIO É O `--raio-lg` (.875rem), e não um literal: o modelo e a nossa folha já
   concordam nesse número, e escrevê-lo de novo seria a primeira divergência no dia em que o
   token mudasse.
   ============================================================================= */

/* O parágrafo de abertura da aba (`AjustesDeApresentacao.AberturasDeAba`). */
.sr-abertura {
  margin-block-end: 1rem;
  color: var(--tinta);
}

.sr-composta {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.sr-parte {
  background-color: white;
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: .875rem 1rem;
}

.sr-parte-cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  margin-block-end: .625rem;
  padding-block-end: .5rem;
  border-block-end: 1px solid var(--linha-2);
}

.sr-parte-cabeca b {
  font-family: var(--sr-ff-display);
  font-size: 1.0625rem;
  color: var(--verde-900);
}

/* --- a caixa "Retirada na Curva de Vitalidade Financeira®" (o `calcRetirada`) -- */

/* ⚠️ MESMA MOLDURA DAS PARTES, de propósito: no modelo ela é uma `.hm-part` como as outras, e
   só o corpo muda. Ela fecha a pilha — é a leitura do que se acabou de preencher. */
.sr-retirada {
  background-color: white;
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: .875rem 1rem;
}

.sr-retirada-cabeca {
  margin-block-end: .625rem;
  padding-block-end: .5rem;
  border-block-end: 1px solid var(--linha-2);
}

.sr-retirada-cabeca b {
  font-family: var(--sr-ff-display);
  font-size: 1.0625rem;
  color: var(--verde-900);
}

.sr-retirada-valor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .375rem;
  margin: 0;
}

.sr-retirada-valor b {
  font-family: var(--sr-ff-display);
  font-size: 1.875rem;
  color: var(--verde-900);
}

.sr-retirada-valor span { color: var(--tinta-suave); }

.sr-nota {
  margin: .5rem 0 0;
  font-size: .78125rem;
  color: var(--tinta-suave);
}

/* ===========================================================================
   JORNADA GUIADA (05/10/2026) — a tela de seis etapas do planejador, em
   `/Tutorial`, e a de cinco do cliente, no topo de `/Jornadas`.

   ⚠️ O protótipo injetava este CSS por JavaScript, num `<style>` criado em
   tempo de execução. Aqui ele é folha de estilo normal: o navegador cacheia,
   o CSP não precisa de exceção e a tela não pisca sem estilo antes do script
   rodar — que é o que acontecia quando o `guia.js` demorava.
   =========================================================================== */

.sr-jg {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-end: 1.375rem;
}

.sr-jg h1,
.sr-jg h2 {
  font-family: var(--sr-ff-display);
  font-weight: 600;
  margin: 0;
}

/* ------------------------------------------------------------------ topo */
.sr-jg-hero {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-radius: 1.375rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #1B3A5C, var(--verde-700));
  color: #fff;
}

.sr-jg-hero-tx { flex: 1; min-inline-size: 16rem; }

.sr-jg-hero small {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #bfe6e1;
}

.sr-jg-hero h1 {
  font-family: var(--sr-ff-display);
  font-size: 1.75rem;
  color: #fff;
  margin-block: .375rem .5rem;
  line-height: 1.2;
}
.sr-jg-hero p { margin-block-end: .875rem; font-size: .875rem; color: #e2f4f0; max-inline-size: 39rem; line-height: 1.5; }

.sr-jg-anel-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  font-size: .78125rem;
  font-weight: 700;
  color: #e2f4f0;
}

.sr-jg-anel { inline-size: 7.5rem; block-size: 7.5rem; font-family: var(--sr-ff-display); }
.sr-jg-fim { font-weight: 800; font-size: .9375rem; }

/* ---------------------------------------------------------------- botões */
.sr-jg-btn {
  display: inline-block;
  border: 0;
  background: var(--verde-700);
  color: #fff;
  border-radius: .6875rem;
  padding: .6875rem 1rem;
  font-weight: 800;
  font-size: .875rem;
  text-decoration: none;
  cursor: pointer;
}

.sr-jg-btn:hover,
.sr-jg-btn:focus-visible { color: #fff; filter: brightness(1.08); }

.sr-jg-btn-leve {
  background: #fff;
  color: var(--verde-900);
  border: 1px solid var(--linha);
}

.sr-jg-btn-leve:hover,
.sr-jg-btn-leve:focus-visible { color: var(--verde-900); }

.sr-jg-hero .sr-jg-btn-destaque {
  background: #FFD166;
  color: #3a2a00;
  font-size: .9375rem;
  padding: .8125rem 1.125rem;
}

.sr-jg-hero .sr-jg-btn-destaque:hover,
.sr-jg-hero .sr-jg-btn-destaque:focus-visible { color: #3a2a00; }

/* ------------------------------------------------------- mapa das etapas */
.sr-jg-mapa { display: flex; align-items: center; gap: .375rem; overflow-x: auto; padding-block: .25rem; }

.sr-jg-mapa-i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-inline-size: 4.625rem;
  text-decoration: none;
}

.sr-jg-mapa-i span {
  inline-size: 2.125rem;
  block-size: 2.125rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: #fff;
  border: 2px solid var(--linha);
  color: var(--tinta-suave);
}

.sr-jg-mapa-i b { font-size: .71875rem; color: var(--tinta); white-space: nowrap; }
.sr-jg-mapa-i.ok span { background: var(--verde); border-color: var(--verde); color: #fff; }
.sr-jg-mapa-i.atual span { border-color: var(--verde-700); color: var(--verde-700); box-shadow: 0 0 0 .25rem rgba(14, 124, 123, .15); }
.sr-jg-mapa-i.atual b { color: var(--verde-900); }

/* ---------------------------------------------------------------- etapas */
.sr-jg-etapa { display: grid; grid-template-columns: 2.875rem minmax(0, 1fr); gap: .75rem; }
.sr-jg-etapa-n { display: flex; flex-direction: column; align-items: center; }

.sr-jg-etapa-n span {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1rem;
  background: #fff;
  border: 2px solid var(--linha);
  color: var(--tinta-suave);
  position: relative;
  z-index: 1;
}

.sr-jg-etapa-n::after {
  content: "";
  flex: 1;
  inline-size: 3px;
  background: var(--linha);
  margin-block-start: .25rem;
  border-radius: 2px;
}

.sr-jg-etapa:last-of-type .sr-jg-etapa-n::after { display: none; }
.sr-jg-etapa.ok .sr-jg-etapa-n span { background: var(--verde); border-color: var(--verde); color: #fff; }
.sr-jg-etapa.atual .sr-jg-etapa-n span { border-color: var(--verde-700); color: var(--verde-700); box-shadow: 0 0 0 .3125rem rgba(14, 124, 123, .14); }

.sr-jg-etapa-c {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 1.125rem;
  padding: 1.125rem 1.25rem;
  margin-block-end: .375rem;
  min-inline-size: 0;
}

.sr-jg-etapa.atual .sr-jg-etapa-c { border-color: var(--verde-700); box-shadow: 0 .625rem 1.625rem -1.125rem rgba(14, 124, 123, .6); }

.sr-jg-etapa-h { display: flex; gap: .75rem; align-items: center; }
.sr-jg-ic { font-size: 1.875rem; line-height: 1; }
.sr-jg-etapa-h .sr-jg-ic { font-size: 1.875rem; }

.sr-jg-etapa-h small {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.sr-jg-etapa.atual .sr-jg-etapa-h small { color: var(--verde-700); }
.sr-jg-etapa.ok .sr-jg-etapa-h small { color: #1e7a4b; }
.sr-jg-etapa-h h2 { font-size: 1.3125rem; color: var(--verde-900); }

.sr-jg-txt { margin-block: .625rem .75rem; font-size: .90625rem; line-height: 1.6; color: var(--tinta); }
.sr-jg-sub { display: block; font-size: .75rem; color: var(--tinta-suave); margin-block-start: .25rem; }
.sr-jg-acoes { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: .75rem; }

/* -------------------------------------------------------- caixas duplas */
.sr-jg-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

.sr-jg-op {
  border: 1px solid var(--linha);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: #fbfdfc;
}

.sr-jg-op > b { font-size: 1rem; }
.sr-jg-op p { margin: 0; font-size: .84375rem; color: var(--tinta); line-height: 1.5; }

/* ------------------------------------------------------------------ KPIs */
.sr-jg-kpis { display: flex; gap: .625rem; flex-wrap: wrap; margin-block-start: .75rem; }

.sr-jg-kpis div {
  background: #f6faf9;
  border-radius: .75rem;
  padding: .625rem .875rem;
  min-inline-size: 6.875rem;
}

.sr-jg-kpis b { display: block; font-family: var(--sr-ff-display); font-size: 1.625rem; color: var(--verde-900); }
.sr-jg-kpis span { font-size: .75rem; color: var(--tinta); }

/* ----------------------------------------------------------------- funil */
.sr-jg-funil {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 93.75rem) { .sr-jg-funil { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 35rem) { .sr-jg-funil { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sr-jg-fase {
  min-inline-size: 0;
  border: 1px solid var(--linha);
  border-radius: .875rem;
  padding: .625rem;
  background: #fbfdfc;
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  position: relative;
}

.sr-jg-fase .sr-jg-ic { font-size: 1.375rem; }
.sr-jg-fase b { font-size: .8125rem; }

.sr-jg-fase em {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-end: .5rem;
  font-style: normal;
  font-weight: 800;
  font-size: .8125rem;
  background: var(--verde-700);
  color: #fff;
  border-radius: 999px;
  min-inline-size: 1.5rem;
  text-align: center;
  padding: .0625rem .4375rem;
}

.sr-jg-fase small { font-size: .71875rem; color: var(--tinta); line-height: 1.4; }
.sr-jg-fase.ativa { border-color: #1B4A47; background: #eef7f5; }
.sr-jg-fase.ativa em { background: #1B4A47; }

.sr-jg-fn {
  display: inline-grid;
  place-items: center;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 50%;
  background: #e4ecea;
  color: var(--tinta);
  font-size: .65625rem;
  margin-inline-end: .3125rem;
}

/* ----------------------------------------------------------------- fluxo */
.sr-jg-fluxo { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }

.sr-jg-fluxo span {
  background: #f1f8f7;
  border: 1px solid #cfe5e1;
  border-radius: 999px;
  padding: .375rem .75rem;
  font-weight: 700;
  font-size: .8125rem;
}

.sr-jg-fluxo i { font-style: normal; color: var(--tinta-suave); font-weight: 800; }

/* --------------------------------------------------------------- trilhas */
.sr-jg-trilhas { display: flex; flex-direction: column; gap: .5rem; }

.sr-jg-trilha {
  border: 1px solid var(--linha);
  border-inline-start: .375rem solid var(--sr-jg-cor);
  border-radius: 1rem;
  padding: .875rem;
  display: grid;
  grid-template-columns: minmax(13.75rem, .85fr) minmax(0, 1.6fr);
  grid-template-areas: "h m" "p m" "s m";
  column-gap: 1rem;
  row-gap: .375rem;
  background: #fff;
  min-inline-size: 0;
}

.sr-jg-trilha-h { grid-area: h; display: flex; gap: .5rem; align-items: center; }
.sr-jg-trilha > p { grid-area: p; margin: 0; font-size: .78125rem; line-height: 1.5; color: var(--tinta); }
.sr-jg-trilha > .sr-jg-sub { grid-area: s; margin: 0; }

.sr-jg-trilha-n {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--sr-jg-cor);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .75rem;
  flex: 0 0 1.5rem;
}

.sr-jg-trilha-h .sr-jg-ic { font-size: 1.5rem; }
.sr-jg-trilha-h b { display: block; font-size: .9375rem; }

.sr-jg-trilha-h small {
  font-size: .6875rem;
  font-weight: 800;
  color: var(--sr-jg-cor);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sr-jg-mods {
  grid-area: m;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: .375rem;
  align-content: start;
}

.sr-jg-mod { display: flex; gap: .25rem; }

.sr-jg-mod-a {
  flex: 1;
  min-inline-size: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .375rem;
  row-gap: .1875rem;
  align-items: center;
  border: 1px solid var(--linha-2);
  background: #fbfdfc;
  border-radius: .625rem;
  padding: .375rem .5rem;
  text-decoration: none;
}

.sr-jg-mod-a > span { grid-row: 1 / 3; font-size: 1rem; }
.sr-jg-mod-a b { font-size: .75rem; color: var(--tinta); line-height: 1.25; }
.sr-jg-mod-a i { display: block; block-size: .25rem; background: var(--linha-2); border-radius: 3px; overflow: hidden; }
.sr-jg-mod-a i u { display: block; block-size: 100%; background: #E8A93B; }
.sr-jg-mod-a i.ok u { background: var(--verde); }
.sr-jg-mod-a:hover { border-color: var(--sr-jg-cor); }

.sr-jg-uni {
  border: 1px solid var(--linha-2);
  background: #fff;
  border-radius: .625rem;
  inline-size: 2.125rem;
  display: grid;
  place-items: center;
  font-size: .9375rem;
  text-decoration: none;
}

.sr-jg-uni:hover { border-color: var(--sr-jg-cor); }

/* -------------------------------------------------------- avisos e pé */
.sr-jg-trava {
  background: #f4f6f5;
  border: 1px dashed #c6d3d1;
  color: var(--tinta);
  border-radius: .625rem;
  padding: .625rem .75rem;
  font-size: .84375rem;
  margin-block-end: .75rem;
}

.sr-jg-dica { margin-block-start: .75rem; font-size: .8125rem; color: var(--tinta); background: #fff8ec; border-radius: .625rem; padding: .5625rem .75rem; }

.sr-jg-uni-r { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.sr-jg-uni-r > div { background: #f6faf9; border-radius: .75rem; padding: .625rem .875rem; }
.sr-jg-uni-r b { font-family: var(--sr-ff-display); font-size: 1.625rem; color: var(--verde-900); margin-inline-end: .375rem; }
.sr-jg-uni-r span { font-size: .8125rem; color: var(--tinta); }

.sr-jg-pe {
  display: flex;
  gap: .875rem;
  align-items: center;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 1.125rem;
  padding: 1rem 1.125rem;
}

.sr-jg-pe > span { font-size: 1.875rem; }
.sr-jg-pe > div { flex: 1; min-inline-size: 15rem; }
.sr-jg-pe b { font-size: .9375rem; }
.sr-jg-pe p { margin-block-start: .25rem; margin-block-end: 0; font-size: .84375rem; color: var(--tinta); line-height: 1.5; }

/* ------------------------------------------------------------ telas pequenas */
@media (max-width: 53.75rem) {
  .sr-jg-trilha { grid-template-columns: 1fr; grid-template-areas: "h" "p" "m" "s"; }
}

@media (max-width: 43.75rem) {
  .sr-jg-2 { grid-template-columns: 1fr; }
  .sr-jg-etapa { grid-template-columns: 2.125rem minmax(0, 1fr); gap: .5rem; }
  .sr-jg-etapa-n span { inline-size: 2rem; block-size: 2rem; font-size: .875rem; }
  .sr-jg-etapa-c { padding: .875rem; }
  .sr-jg-hero { padding: 1.125rem; }
  .sr-jg-hero h1 { font-size: 1.4375rem; }
  .sr-jg-anel-area { flex-direction: row; gap: .625rem; }
  .sr-jg-anel { inline-size: 5.25rem; block-size: 5.25rem; }
}

/* --------------------------------------------- jornada guiada: só do cliente */
.sr-jg-hero-cliente { background: linear-gradient(135deg, var(--verde-900), var(--verde)); }

.sr-jg-barra { block-size: .625rem; background: var(--linha-2); border-radius: .375rem; overflow: hidden; }
.sr-jg-barra i { display: block; block-size: 100%; background: linear-gradient(90deg, var(--verde), var(--verde-700)); border-radius: .375rem; }

.sr-jg-ok {
  background: var(--verde-050);
  border: 1px solid var(--verde-300);
  color: var(--verde-900);
  border-radius: .625rem;
  padding: .5625rem .75rem;
  font-size: .84375rem;
  font-weight: 700;
}

.sr-jg-ferr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }

.sr-jg-ferr a {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .5rem;
  border: 1px solid var(--linha);
  background: #fff;
  border-radius: .75rem;
  padding: .5625rem .625rem;
  text-decoration: none;
}

.sr-jg-ferr a > span { grid-row: 1 / 3; font-size: 1.375rem; align-self: center; }
.sr-jg-ferr b { font-size: .8125rem; color: var(--tinta); }
.sr-jg-ferr small { font-size: .6875rem; color: var(--tinta-suave); }
.sr-jg-ferr a:hover { border-color: var(--verde-700); }

.sr-jg-divisor {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  flex-wrap: wrap;
  border-block-start: 2px solid var(--linha);
  padding-block-start: 1rem;
  margin-block: .25rem .75rem;
}

.sr-jg-divisor h2 {
  font-family: var(--sr-ff-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--verde-900);
  margin: 0;
}

.sr-jg-divisor small { font-size: .78125rem; color: var(--tinta-suave); }

@media (max-width: 26.25rem) {
  .sr-jg-ferr { grid-template-columns: 1fr; }
}

/* Rodapé da porta: "Esqueci minha senha | Criar conta", centralizado (05/10/2026). */
.sr-gate-links {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .625rem;
  flex-wrap: wrap;
}

.sr-gate-links > span { color: var(--linha); }

/* A linha de apoio da faixa do cliente: frase inteira, que QUEBRA. Não reaproveita
   `.sr-faixa-email`, que tem `nowrap` e reticências — ali é um e-mail numa linha, aqui é uma
   frase de duas. (05/10/2026) */
.sr-faixa-apoio {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

/* O convite é um <a> quando leva para a /Clientes e um <button> quando abre o modal; o kit
   precisa desenhar os dois igual. */
a.sr-faixa-btn { display: inline-flex; align-items: center; gap: .375rem; text-decoration: none; }