/*
  base.css — Propensiq: reset + layout estrutural (sidebar + área de
  conteúdo), compartilhado por todas as telas 4.7.1-4.7.8.
  Consome tokens.css — não redefine cor/fonte/dimensão aqui.

  Sidebar usa position: sticky (não fixed com left/top absolutos) para
  não travar acima de 1280px de largura — ver ADR-050/TASKS.md 4.7.0.
*/

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

html,
body {
  margin: 0;
  padding: 0;
  min-width: var(--grid-min-width);
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: 1.5;
}

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

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

h1, h2, h3, h4, p {
  margin: 0;
}

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  min-width: var(--grid-min-width);
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-navy);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  /* Achado de teste manual (01/09/2026, continuação da 7.15) -
     salvaguarda depois de identificada e corrigida a causa raiz
     (.sidebar__logo-icon + .sidebar__toggle não cabiam lado a lado
     nos ~40px de largura colapsada, medido via scrollWidth real) -
     overflow-y:auto sozinho já fazia o navegador computar overflow-x
     como auto (nunca "visible" junto de um eixo não-visible, regra do
     spec de CSS), por isso 1px real de estouro virava barra de
     rolagem horizontal visível. */
  overflow-x: hidden;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar__logo-icon {
  flex-shrink: 0;
}

/* Logo clicável -> Visão Geral (clicar no logo volta pro início). Só o
   comportamento de link: cor/tamanho herdados do ícone + wordmark, sem
   sublinhado nem hover próprio. Refaz o flex/gap que era do
   `.sidebar__logo` (agora entre ícone e wordmark, dentro do link). */
.sidebar__logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar__wordmark {
  font-size: 19px;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  letter-spacing: -0.01em;
}

.sidebar__wordmark .sidebar__wordmark-accent {
  color: var(--color-teal);
}

.sidebar__section {
  margin-top: 20px;
}

.sidebar__section-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  color: var(--color-light-slate);
  padding: 0 12px;
  margin: 0 0 8px;
}

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

.sidebar__link {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.85);
  border-left: 3px solid transparent;
}

.sidebar__link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
}

.sidebar__link.is-active {
  background: rgba(20, 184, 166, 0.14);
  border-left-color: var(--color-teal);
  color: var(--color-white);
}

.sidebar__footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar__link--ghost {
  color: var(--color-light-slate);
  font-size: 13px;
}

.content {
  flex: 1;
  min-width: 0;
  padding: 32px 40px;
}

/*
  Componentes de página (tarefa 4.7.2) — compartilhados por
  dashboard.html e projetos_lista.html, ambos estendendo base.html.
  Regra de cor do design system (tokens.css): Navy estrutura, Teal
  ação/seleção, neutros informação.
*/

.page-header {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}

.page-header__title {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-slate);
}

.select,
.text-input {
  font-family: var(--font-family-base);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  border-radius: 6px;
  padding: 0 18px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}

.button--primary {
  background: var(--color-teal);
  color: var(--color-white);
}

.button--primary:hover {
  filter: brightness(0.94);
}

.button--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.button--secondary {
  background: var(--color-white);
  color: var(--color-navy);
  border: 1px solid var(--color-border);
}

.button--secondary:hover {
  background: var(--color-background);
}

.button--danger {
  /* ADR-073 (tarefa 7.16) - mesmo vermelho ja usado em
     .card-menu__item--danger, borda no estilo de .button--secondary
     (nao preenchido, para nao competir visualmente com o primario
     teal da tela). */
  background: var(--color-white);
  color: #B42318;
  border: 1px solid #B42318;
}

.button--danger:hover {
  background: rgba(180, 35, 24, 0.06);
}

.file-input {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.file-input__nome {
  font-size: 14px;
  color: var(--color-slate);
}

.filters-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.filters-panel__group {
  border: none;
  padding: 0;
  margin: 0;
}

.filters-panel__group legend {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: 8px;
  padding: 0;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text);
  margin-right: 16px;
  margin-bottom: 6px;
}

.localizacao-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--color-text);
}

.tag__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-slate);
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.filters-panel__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.form-message {
  font-size: 13px;
  color: #B42318;
}

.legend-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.legend-box h2 {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  margin: 0 0 8px;
}

.table-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow-x: auto;
}

/* Barra de rolagem duplicada no topo da tabela de ranking (achado de
   teste manual, 27/08/2026) - fina, só serve pra rolar horizontalmente
   sem precisar descer até a barra real embaixo da tabela. Sincronizada
   por JS (dashboard.html) com o scroll de .table-wrap nos dois
   sentidos. */
.table-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  margin-bottom: 6px;
}

#table-scroll-top-inner {
  height: 1px;
}

/* Achado real (Alexandre, 02/09/2026, tarefa de ajuste visual de
   /referencias): sem altura explícita, um <div> vazio com largura
   grande mas altura 0 não é considerado overflow de verdade pelo
   navegador - o .scrollWidth do container pai continha igual ao
   .clientWidth, sem disparar rolagem, mesmo com o filho medindo a
   largura certa via getBoundingClientRect(). Mesma causa raiz e mesma
   correção já documentada em #table-scroll-top-inner acima - página
   nova, id próprio, precisa da mesma regra. */
#referencias-scroll-top-inner {
  height: 1px;
}

/* Indicador de carregamento do botão "Gerar análise"/"Atualizar
   análise" (achado de teste manual, 27/08/2026) - reaproveita só a
   "mira" do ícone da logo (_icons.html, macro 'mira'), girando via
   CSS enquanto o fetch de POST /treino está em andamento. */
.spinner-icon {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 6px;
  animation: spin 0.8s linear infinite;
}

/* [hidden] do HTML normalmente vira display:none via UA stylesheet,
   mas com especificidade igual à de ".spinner-icon" acima - sem esta
   regra explícita, o "display: inline-flex" da classe ganha do
   atributo (ordem de declaração no CSS do autor vence o UA
   stylesheet), fazendo o ícone aparecer mesmo com hidden presente
   (achado real durante a validação desta tarefa, 27/08/2026). */
.spinner-icon[hidden] {
  display: none;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ranking-table th,
.ranking-table td {
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.ranking-table th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ranking-table a {
  color: var(--color-teal);
  font-weight: var(--font-weight-medium);
}

.ranking-table a:hover {
  text-decoration: underline;
}

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

.pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-slate);
}

.pager a {
  color: var(--color-teal);
  font-weight: var(--font-weight-medium);
}

.empty-state {
  color: var(--color-slate);
  font-size: 14px;
  padding: 24px 0;
}

/* O `a { color: inherit }` global deixava o link do vazio invisível (mesmo
   cinza do texto) — "Criar o primeiro projeto", "Ver todos os pedidos…"
   (revisão no navegador de 23/09/2026). */
.empty-state a {
  color: var(--color-teal);
  font-weight: var(--font-weight-medium);
}

.empty-state a:hover {
  text-decoration: underline;
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  flex-wrap: wrap;
}

.project-list__link {
  display: flex;
  flex: 1;
  min-width: 240px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}

.project-list__nome {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.project-list__meta {
  font-size: 12px;
  color: var(--color-slate);
  white-space: nowrap;
}

.project-list__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 20px 12px 0;
}

.project-edit summary {
  list-style: none;
  cursor: pointer;
}

.project-edit summary::-webkit-details-marker {
  display: none;
}

.project-edit[open] {
  flex-basis: 100%;
}

.project-edit[open] summary {
  margin-bottom: 8px;
}

.project-edit__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.project-edit__form .text-input {
  flex: 1 1 200px;
  min-width: 160px;
}

/*
  Detalhe da Empresa (tarefa 4.7.3) — tela contextual de leitura de
  uma única candidata, sem tabela densa (dados em destaque).
*/

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-slate);
  margin-bottom: 16px;
}

.back-link:hover {
  color: var(--color-navy);
}

.detail-header {
  margin-bottom: 24px;
}

.detail-header__title {
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 4px;
}

.detail-header__subtitle {
  font-size: 13px;
  color: var(--color-slate);
}

.detail-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
}

.detail-card__title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 16px;
}

/* Subtítulo de subseção dentro de um card (h3) - usado no cabeçalho
   com o ícone ⓘ "Saiba mais" das subseções de "Minha Empresa" ("Tipos
   de empresa" / "Situações especiais"). */
.detail-card__title--sub {
  font-size: 13px;
}

/* Cabeçalho de subseção (card_header_h3 em _saibamais.html) - respiro
   acima pra separar da subseção anterior. */
.detail-card__header--sub {
  margin-top: 20px;
}

/* Título + ícone ⓘ "Saiba mais" agrupados à esquerda do cabeçalho do
   card (11/09/2026): o ícone fica colado no título, não mais um botão
   de texto competindo com as ações à direita. Quando o card tem ações
   (`.detail-card__header-actions`), o pai leva `--split` e este grupo
   ocupa a esquerda sozinho. */
.detail-card__header-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-card__header-title .detail-card__title {
  margin: 0;
}

/* O ícone ⓘ é um affordance secundário - light-slate (mais apagado que
   o slate cheio dos ícones de ação lápis/lixeira), escurece no hover
   junto com o fundo herdado de `.icon-button:hover`. */
.saibamais-info {
  color: var(--color-light-slate);
}

.saibamais-info:hover {
  color: var(--color-slate);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 20px;
}

.detail-item__label {
  display: block;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: 4px;
}

.detail-item__value {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.detail-item__code {
  font-size: 11px;
  font-weight: var(--font-weight-regular);
  color: var(--color-slate);
}

.score-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 20px;
}

.score-panel__item {
  background: var(--color-background);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}

.score-panel__value {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-teal);
}

.score-panel__label {
  font-size: 12px;
  color: var(--color-slate);
  margin-top: 4px;
}

.context-note {
  font-size: 13px;
  color: var(--color-slate);
  line-height: 1.6;
  background: var(--color-background);
  border-radius: 6px;
  padding: 14px 16px;
  margin-top: 16px;
}

/*
  Clientes de Referência (tarefa 4.7.5) — formulário de adição em
  linha (campos + botão lado a lado, quebrando em telas estreitas).
*/

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.filters-panel__hint {
  font-size: 12px;
  margin: -4px 0 8px;
}

/* ADR-076 (emenda Fase B2, tarefa 7.23) - tabela central de
   Referências comerciais. */
/* Emenda de UX (11/09/2026): quando `/referencias?projeto=<id>` está
   ativo, um chip proeminente deixa claro que a lista está filtrada -
   sem isso, resultado vazio parecia bug (achado que motivou a emenda). */
.referencias-filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--color-text);
}

.referencias-filtro-chip__remover {
  color: var(--color-slate);
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
}

.referencias-filtros-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.referencias-filtros-linha + .referencias-filtros-linha {
  margin-top: 14px;
}

/* Achado de teste manual (Alexandre, 02/09/2026, comparação contra o
   mockup): razão social + CNPJ empilhados (display: block) forçavam
   TODA linha da tabela a 2 linhas de altura, não só a coluna CNAE
   (única que deveria poder crescer) - corrigido pra inline, mesma
   linha, CNPJ como texto secundário ao lado do nome, não embaixo.
   Correção seguinte (mesmo dia): "nowrap" tinha ido longe demais -
   nome real longo (ex: a razão social de uma
   empresa pública municipal, com 70+ caracteres) não tinha NENHUMA
   forma de quebrar, esticando a linha inteira. "white-space: normal"
   com largura razoável deixa nome curto + CNPJ numa linha só (a
   maioria real dos casos) e só quebra quando o nome sozinho já ocupa
   a largura da coluna - mesma especificidade reforçada do ADR-078
   (".ranking-table td" sozinho vence uma classe isolada). */
/* Reversão da tarefa 7.24 (Alexandre, 02/09/2026, revisão contra o
   mockup) - "inline quando cabe" foi substituído por SEMPRE empilhado
   (nome numa linha, CNPJ embaixo), consistente em toda linha
   independente do nome ser curto ou longo. Sem max-width restritivo -
   "sem limite artificial de caracteres" (o nome quebra sozinho, por
   palavra, se for comprido; min-width só dá uma largura de coluna
   razoável, não um teto). */
.ranking-table td.referencias-empresa-cell {
  white-space: normal;
  min-width: 220px;
  max-width: 320px;
}

/* Achado de teste manual (Alexandre, 02/09/2026, revisão da tarefa
   7.26): empilhado sozinho não bastava - um nome comprido ainda
   quebrava em várias linhas dentro do próprio span, deixando a linha
   da tabela desproporcionalmente alta (ex: 4 linhas). Truncado com
   reticências dentro da largura já definida em
   .ranking-table td.referencias-empresa-cell (min/max-width) - exatas
   2 linhas sempre (nome + CNPJ), nome comprido perde caracteres
   visíveis mas o nome completo continua disponível via title="" no
   próprio elemento (tooltip nativo do navegador, sem JS/CSS novo -
   ver o atributo no template). */
.referencias-empresa__nome {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.referencias-empresa__cnpj {
  display: block;
  font-size: 12px;
  color: var(--color-slate);
}

/* Achado de teste manual (Alexandre, 02/09/2026, item 4): "Ver empresa"
   sai do menu ⋮ e vira o próprio nome clicável (mesmo modal de sempre,
   GET /referencias/<id>/detalhe) - reset de chrome de <button> pra
   parecer texto de tabela, cor teal + sublinhado no hover marca que é
   clicável (mesmo token de cor de .aside-link). */
.referencias-empresa__nome-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.referencias-empresa__nome-link .referencias-empresa__nome {
  color: var(--color-teal);
}

.referencias-empresa__nome-link:hover .referencias-empresa__nome {
  text-decoration: underline;
}

/* Mesmo achado - única coluna que PODE crescer além de 1 linha (até
   ~3, código CNAE + descrição). Especificidade
   ".ranking-table td.referencias-cnae-cell" (não só a classe sozinha)
   de propósito - mesmo achado real já documentado no ADR-078/tarefa
   7.21 (".ranking-table td" tinha especificidade maior que uma classe
   sozinha, nowrap vencia mesmo declarado depois no arquivo). */
.ranking-table td.referencias-cnae-cell {
  /* Achado real (Alexandre, 02/09/2026): só max-width não bastava -
     table-layout auto espreme uma coluna que PODE quebrar linha pra
     dar espaço às colunas nowrap vizinhas (largura real medida caía
     pra ~144px, bem menos que os 520px de max-width, forçando textos
     curtos a quebrar em 5+ linhas). min-width força o navegador a
     reservar espaço de verdade pra esta coluna. ADR-132 decisão 4: mais
     estreita (era 400–480 px) — quebra em até 3 linhas em vez de alargar a
     tabela em 1024 px. */
  white-space: normal;
  min-width: 240px;
  max-width: 320px;
}

/* ADR-084 (tarefa 7.33.3) - separa o cadastro individual do upload de
   planilha dentro do mesmo card "Cadastrar empresa nova". */
.referencias-cadastro-sep {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 20px 0 14px;
}

/* ADR-085 (tarefa 7.34.4) - busca por nome ao lado do campo de CNPJ. */
.referencias-cadastro__ou {
  align-self: center;
  padding-bottom: 8px;
  font-size: 12px;
  color: var(--color-slate);
}

.referencias-busca-nome {
  position: relative;
}

.referencias-busca-nome__campo {
  position: relative;
  display: flex;
  align-items: center;
}

.referencias-busca-nome__campo .text-input {
  min-width: 240px;
}

.referencias-busca-nome__campo--selecionado {
  background: var(--color-background);
  padding-right: 26px;
}

.referencias-busca-nome__limpar {
  position: absolute;
  right: 8px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  color: var(--color-slate);
}

.referencias-busca-nome__resultados {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  width: 340px;
  max-width: 90vw;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(13, 27, 42, 0.12);
}

.referencias-busca-nome__resultados li {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.referencias-busca-nome__resultados li:hover {
  background: var(--color-background);
}

.referencias-busca-nome__cnpj {
  display: block;
  font-size: 11px;
  color: var(--color-slate);
}

.referencias-busca-nome__aviso {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--color-slate);
  cursor: default;
}

.referencias-selecao-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 16px 0;
  font-size: 13px;
  color: var(--color-text);
}

/* Mesmo achado já documentado em .spinner-icon[hidden] acima -
   "display: flex" da classe ganha do UA stylesheet do atributo
   [hidden] sem esta regra explícita. */
.referencias-selecao-bar[hidden] {
  display: none;
}

.badge--excluida_ranking {
  /* Cinza neutro deliberado (ADR-076) - não é um estado de erro,
     não usa o vermelho de .button--danger/.card-menu__item--danger. */
  background: var(--color-background);
  border: 1px solid var(--color-border);
  color: var(--color-slate);
}

.filters-panel__hint a {
  color: var(--color-teal);
  font-weight: var(--font-weight-medium);
}

/*
  Histórico de Análises (tarefa 4.7.6) — faixa de "rodada histórica"
  no dashboard e cabeçalho de cada rodada na tela de histórico. Usa só
  cores já existentes no design system (navy/teal) — não introduz uma
  cor de "aviso" nova fora da paleta aprovada.
*/

.historical-banner {
  background: var(--color-navy);
  color: var(--color-white);
  border-left: 4px solid var(--color-teal);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}

.rodada-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.rodada-header__title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 4px;
}

.rodada-header__meta {
  font-size: 12px;
  color: var(--color-slate);
  margin: 0;
}

/*
  Faixa "Projeto/Gerado em/Motor/Descrição" + exclusão de rodada no
  dashboard (ADR-073, tarefa 7.16). Confirmação do "Excluir" é
  progressive disclosure via <details> (mesmo padrão zero-JS de
  .project-edit, _project_card.html) - nunca confirm() nativo do
  navegador.
*/

.rodada-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-background);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
}

.rodada-meta__info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.rodada-meta__item {
  font-size: 13px;
  color: var(--color-text);
}

.rodada-meta__item strong {
  font-weight: var(--font-weight-semibold);
}

/* Cluster de ações da tela de resultado (ADR-086 item 7, tarefa
   7.35.6): "Novo ranking" / "Exportar CSV" / "Excluir ranking". */
.resultado-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.ranking-delete summary {
  list-style: none;
  cursor: pointer;
}

.ranking-delete summary::-webkit-details-marker {
  display: none;
}

.ranking-delete[open] {
  flex-basis: 100%;
}

.ranking-delete__confirm {
  margin-top: 10px;
  padding: 12px;
  background: rgba(180, 35, 24, 0.06);
  border: 1px solid rgba(180, 35, 24, 0.25);
  border-radius: 6px;
}

.ranking-delete__warning {
  font-size: 13px;
  color: var(--color-text);
  margin: 0 0 10px;
}

/*
  Visão Geral (ADR-059) — redesenho da tela inicial (GET /projetos):
  layout de duas colunas (conteúdo principal + painel lateral
  "Sobre"/"Como funciona"), cards de estatística, cards de projeto com
  menu "⋮" (via <details>, mesmo padrão zero-JS já usado em
  project-edit) e rodapé de segurança.
*/

.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.overview-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-subtitle {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 24px 0 16px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 18px 20px;
}

.stat-card__value {
  font-size: 26px;
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
}

.stat-card__value-suffix {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-slate);
}

.stat-card__label {
  font-size: 12px;
  color: var(--color-slate);
  margin-top: 4px;
}

.explainer-block {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 8px;
}

.explainer-block__title {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 8px;
}

.explainer-block__text {
  font-size: 13px;
  color: var(--color-slate);
  line-height: 1.6;
}

.project-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px 20px;
}

.project-card__main {
  /* Achado de teste manual (01/09/2026, tarefa 7.14) - sem isto, a
     linha de ações so ficava alinhada entre os cards por acaso (por
     ela quebrar para uma linha nova, flex-start); num layout de uma
     linha so (janela mais larga), o ponto de partida das acoes
     dependeria da largura de nome+meta de cada card, que varia por
     projeto. flex:1 garante que .project-card__actions sempre fique
     encostada na borda direita do card, independente do texto. */
  flex: 1 1 auto;
  min-width: 0;
}

.project-card__heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-card__nome {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.project-card__status {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-teal);
  background: rgba(20, 184, 166, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
}

.project-card__meta {
  font-size: 12px;
  color: var(--color-slate);
  margin-top: 4px;
}

.project-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.card-menu {
  position: relative;
}

.card-menu__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

.card-menu__trigger::-webkit-details-marker {
  display: none;
}

.card-menu__trigger:hover {
  background: var(--color-background);
}

.card-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(13, 27, 42, 0.12);
}

.card-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.card-menu__item::-webkit-details-marker {
  display: none;
}

.card-menu__item:hover {
  background: var(--color-background);
}

.card-menu__item--danger {
  color: #B42318;
}

.card-menu__panel .project-edit__form {
  padding: 6px 10px 2px;
}

/*
  Acabamento visual da Visão Geral (ADR-059, complemento) - fidelidade
  ao mockup da Visão Geral (26/08/2026; fora do repositório desde 05/10/2026): ícones, badges de cor, ilustração
  decorativa, card de "criar projeto", ordenação, banner de segurança
  full-width e reestruturação do painel lateral/rodapé da sidebar.
  Nenhuma rota/dado/lógica de backend muda aqui - só CSS/HTML/Jinja.
*/

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.icon-badge--teal {
  background: rgba(20, 184, 166, 0.12);
  color: var(--color-teal);
}

.icon-badge--navy {
  background: rgba(13, 27, 42, 0.08);
  color: var(--color-navy);
}

.icon-badge--purple {
  background: rgba(124, 58, 237, 0.12);
  color: var(--color-purple);
}

.icon-badge--sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

/* ADR-062: badge de tipo_referencia (Cliente/Proposta/Lead) em
   templates/referencias.html - texto, nao icone, entao classe propria
   em vez de reaproveitar .icon-badge. */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.badge--cliente {
  background: rgba(20, 184, 166, 0.12);
  color: var(--color-teal);
}

.badge--proposta {
  background: rgba(124, 58, 237, 0.12);
  color: var(--color-purple);
}

.badge--lead {
  background: rgba(100, 116, 139, 0.12);
  color: var(--color-slate);
}

/* ADR-099 item b: alerta de provisionamento incompleto (tenant sem
   nenhuma linha em tenant_categoria_elegibilidade) na lista de
   Clientes - reaproveita os tokens de aviso ja existentes (mesma
   paleta da faixa "MODO ADMINISTRADOR", ADR-089), nao uma cor nova. */
.badge--alerta {
  background: var(--color-warning-bg);
  color: var(--color-warning-icon);
  border: 1px solid var(--color-warning-border);
  margin-left: 8px;
}

.page-header__subtitle {
  font-size: 13px;
  color: var(--color-slate);
  margin-top: 2px;
}

.page-header__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-header__wave {
  font-size: 18px;
  margin-left: 2px;
}

.button__icon {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 6px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 18px 20px;
}

.stat-card__body {
  display: flex;
  flex-direction: column;
}

.stat-card__value {
  font-size: 22px;
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
  line-height: 1.2;
}

.stat-card__value-suffix {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-slate);
}

.stat-card__label {
  font-size: 12px;
  color: var(--color-slate);
}

.explainer-block {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.explainer-block__body {
  flex: 1;
  min-width: 0;
}

.explainer-block__title {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 6px;
}

.explainer-block__text {
  font-size: 13px;
  color: var(--color-slate);
  line-height: 1.6;
}

.explainer-block__illustration {
  flex-shrink: 0;
  width: 150px;
  height: 92px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 16px;
}

.section-header .section-subtitle {
  margin: 0;
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-control__label {
  font-size: 13px;
  color: var(--color-slate);
  white-space: nowrap;
}

.sort-control__select {
  padding: 6px 10px;
  font-size: 13px;
}

.project-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(20, 184, 166, 0.12);
  color: var(--color-teal);
}

.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 4px;
}

.project-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-slate);
}

.create-project-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1.5px dashed var(--color-border);
  border-radius: 8px;
  padding: 18px 20px;
  margin-top: 10px;
  background: var(--color-white);
}

.create-project-card:hover {
  border-color: var(--color-teal);
  background: var(--color-background);
}

.create-project-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.14);
  color: var(--color-teal);
}

.create-project-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.create-project-card__title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-teal);
}

.create-project-card__subtitle {
  font-size: 12px;
  color: var(--color-slate);
}

.security-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 18px 24px;
  margin-top: 20px;
}

.security-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(13, 27, 42, 0.08);
  color: var(--color-navy);
}

.security-banner__body {
  flex: 1;
  min-width: 0;
}

.security-banner__title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.security-banner__text {
  font-size: 12px;
  color: var(--color-slate);
  margin-top: 2px;
}

.icon-inline {
  display: inline-flex;
  align-items: center;
  vertical-align: -3px;
}

.detail-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.detail-card__header .detail-card__title {
  margin: 0;
}

.detail-card__header .icon-inline {
  color: var(--color-teal);
}

.how-it-works {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.how-it-works__step {
  display: flex;
  gap: 12px;
}

.how-it-works__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}

.how-it-works__body {
  min-width: 0;
}

.how-it-works__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 2px;
}

.how-it-works__title .icon-inline {
  color: var(--color-teal);
}

.how-it-works__text {
  font-size: 12px;
  color: var(--color-slate);
  line-height: 1.5;
}

/* Quebra de linha equilibrada SÓ nos blocos da Visão Geral trocados na 11.3.16 área 2 (adenda de 05/10/2026 ao
   ADR-059): sem palavra sozinha na última linha. Restrito a .overview-layout (como_funciona.html usa as mesmas
   classes) e fora do bloco de segurança. Fonte, tamanho e cor não mudam. */
.overview-layout .explainer-block__title,
.overview-layout .how-it-works__title {
  text-wrap: balance;
}

.overview-layout .explainer-block__text,
.overview-layout #sobre-propensiq .context-note,
.overview-layout .how-it-works__text {
  text-wrap: pretty;
}

.aside-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-teal);
}

.aside-link:hover {
  text-decoration: underline;
}

/* Sidebar (ADR-059, complemento) - ícones nos itens de navegação
   (currentColor herda a cor do link, inclusive no estado is-active),
   avatar/menu de conta e linha de versão no rodapé. */

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar__link-icon {
  display: flex;
  flex-shrink: 0;
}

.sidebar__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 4px 0;
}

.sidebar__account {
  position: relative;
}

.sidebar__account-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
}

.sidebar__account-summary::-webkit-details-marker {
  display: none;
}

.sidebar__account-summary:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar__account-summary .sidebar__link-icon {
  margin-left: auto;
  color: var(--color-light-slate);
}

.sidebar__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.sidebar__account-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}

.sidebar__account-name {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__account-email {
  font-size: 11px;
  color: var(--color-light-slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ADR-141: o aviso do período de teste, junto do usuário logado; no menu recolhido, a forma curta ("3 d", "Hoje") */
.sidebar__teste {
  margin: 0 0 6px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  color: var(--color-danger-on-navy);
}
.sidebar__teste-curto { display: none; }
html.sidebar-collapsed .sidebar__teste { padding: 0; text-align: center; font-size: 11px; }
html.sidebar-collapsed .sidebar__teste-texto { display: none; }
html.sidebar-collapsed .sidebar__teste-curto { display: inline; }

.sidebar__account-logout {
  margin-left: 12px;
}

/* ADR-147 item 7: "Sair" e "Sair do modo de visualização" alteram estado e viraram
   formulários POST; o <button> herda a aparência exata do link que substituiu
   (sem mudança visual) e o <form> não ocupa espaço nem muda o fluxo. */
.form-inline-link {
  display: contents;
}

button.sidebar__link,
button.admin-viewing-banner__sair {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

button.admin-viewing-banner__sair {
  border-left: 0;
  width: auto;
  padding: 0;
  text-decoration: underline;
}

/* ADR-147: o 403 do CSRF numa chamada fetch — aviso no topo da página, nunca alert() */
.aviso-csrf {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.sidebar__version {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1.5;
  padding: 8px 12px 0;
}

/*
  Sidebar colapsável (ADR-072, 01/09/2026) - a classe é aplicada em
  <html>, não em .sidebar: o script anti-flash em base.html precisa
  aplicar o estado salvo (localStorage) antes do <nav> existir no DOM,
  então <html> (já disponível no início do parse de <body>) é o único
  elemento em que dá pra fazer isso de forma síncrona.
*/

.sidebar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  flex-shrink: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.sidebar__toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}

.sidebar__toggle-icon {
  display: flex;
  transition: transform 0.15s ease;
}

html.sidebar-collapsed .sidebar__toggle-icon {
  transform: rotate(180deg);
}

html.sidebar-collapsed .sidebar {
  width: var(--sidebar-width-collapsed);
}

html.sidebar-collapsed .sidebar__logo {
  /* Causa raiz medida (scrollWidth real): .sidebar__logo mantinha
     padding: 0 8px próprio + .sidebar__logo-icon com largura fixa de
     44px (flex-shrink:0, herdado do estado expandido) - ícone (44px)
     + gap + botão de toggle (24px) não cabiam nos ~40px de largura
     disponível lado a lado. Empilhar verticalmente e remover o
     padding horizontal próprio resolve sem precisar competir pelo
     mesmo eixo. */
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding-left: 0;
  padding-right: 0;
}

html.sidebar-collapsed .sidebar__logo-icon {
  width: 28px;
  height: 17px;
}

html.sidebar-collapsed .sidebar__wordmark,
html.sidebar-collapsed .sidebar__section-label,
html.sidebar-collapsed .sidebar__link-text,
html.sidebar-collapsed .sidebar__account-text,
html.sidebar-collapsed .sidebar__version,
html.sidebar-collapsed .sidebar__account-summary .sidebar__link-icon {
  display: none;
}

html.sidebar-collapsed .sidebar__link,
html.sidebar-collapsed .sidebar__account-summary {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/*
  Páginas estáticas "Como funciona o Propensiq" e "Segurança e
  privacidade no Propensiq" (ADR-059, fidelidade aos mockups docs/
  mockup saiba mais.png e docs/mockup seguranca.png) - reaproveitam
  icon-badge/detail-card/context-note/aside-link/overview-layout já
  existentes; componentes novos abaixo são específicos dessas duas
  páginas de conteúdo estático (sem dado dinâmico do banco).
*/

.icon-badge--circle {
  border-radius: 999px;
}

.icon-badge--lg {
  width: 56px;
  height: 56px;
}

.icon-badge--warning {
  background: rgba(234, 88, 12, 0.12);
  color: var(--color-warning-icon);
}

.section-description {
  font-size: 13px;
  color: var(--color-slate);
  margin: -8px 0 16px;
}

.process-steps {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 24px;
}

.process-step {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.process-step__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.process-step__title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.process-step__text {
  font-size: 12px;
  color: var(--color-slate);
  line-height: 1.55;
}

.process-steps__arrow {
  flex-shrink: 0;
  align-self: center;
  color: var(--color-light-slate);
}

.flow-diagram {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.flow-diagram__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.flow-diagram__label {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.flow-diagram__text {
  font-size: 11px;
  color: var(--color-slate);
  line-height: 1.5;
}

.flow-diagram__arrow {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 22px;
  color: var(--color-light-slate);
}

.highlight-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 22px 24px;
  margin-bottom: 16px;
}

.highlight-card__title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 6px;
}

.highlight-card__title .highlight-word {
  color: var(--color-teal);
}

.highlight-card__text {
  font-size: 13px;
  color: var(--color-slate);
  line-height: 1.6;
}

.info-card-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

.info-card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-card-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.info-card-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.info-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-card__title {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.info-card__text {
  font-size: 12px;
  color: var(--color-slate);
  line-height: 1.55;
}

.warning-banner {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: 8px;
  padding: 22px 24px;
  margin: 20px 0;
}

.warning-banner__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.warning-banner__title {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.warning-banner__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}

.warning-banner__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
}

.warning-banner__item .icon-inline {
  color: var(--color-warning-icon);
  margin-top: 1px;
}

.aside-block {
  display: flex;
  gap: 12px;
}

.aside-block + .aside-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.aside-block__title {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 4px;
}

.aside-block__text {
  font-size: 12px;
  color: var(--color-slate);
  line-height: 1.5;
}

/* ADR-078 (tela de Rankings): coluna "Critérios utilizados" pode ter
   texto mais longo que as demais colunas da tabela (ex: "Porte:
   Grande | UF: SP, RJ") - .ranking-table td por padrão é nowrap
   (linha 439 acima), o que forçaria rolagem horizontal só por causa
   desta coluna. Wrap normal + largura máxima, só nesta célula.
   Seletor `.ranking-table td.criterios-cell` (não só `.criterios-cell`)
   de propósito - achado real durante a validação desta tarefa: com
   só a classe, a especificidade (0,1,0) perdia de ".ranking-table td"
   (0,1,1) já existente, e o nowrap continuava vencendo mesmo com esta
   regra declarada depois no arquivo (empate de especificidade é que
   resolve por ordem, não quando uma regra já é mais específica). */
.ranking-table td.criterios-cell,
.ranking-table td.descricao-cell {
  white-space: normal;
  max-width: 280px;
}

/* A célula de ações continua CÉLULA de tabela (ADR-131, conferência em
   produção da 11.3.8): com `display: flex` no próprio <td> ela saía do
   layout da tabela — altura própria (as bordas desalinhavam quando outra
   coluna quebrava linha) e largura fora da conta, e com "Pedido" (d.3) a
   lixeira ficou além da borda, só visível rolando para o lado. O espaço
   entre as ações vem da margem, não do `gap`. */
.ranking-table__acoes > * + * {
  margin-left: 14px;
}

.ranking-table__acoes .icon-button {
  vertical-align: middle;
}

/* Botão de ícone (ADR-078) - primeiro uso no app de uma ação em linha
   de tabela que não é link de navegação (abre modal, ver abaixo). */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--color-slate);
  cursor: pointer;
}

.icon-button:hover {
  background: var(--color-background);
}

.icon-button--danger:hover {
  background: rgba(180, 35, 24, 0.08);
  color: #B42318;
}

/* Ação positiva em linha de tabela (ex: reativar um item desativado) -
   verde, contraponto neutro do vermelho da lixeira (nunca vermelho:
   essa cor fica reservada pra ação de risco). */
.icon-button--ok {
  color: var(--color-success-text);
}

.icon-button--ok:hover {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

/* Catálogos da tela Administração → Parâmetros (reformulação visual,
   ADR-097): as 3 listas (CNAEs ignorados, Categorias de elegibilidade,
   Categorias CNAE) viraram tabela aberta com ícones de ação por linha
   (lápis = editar, lixeira = desativar - NUNCA delete físico), no lugar
   de accordion + botões de texto. */
.catalogo-secao {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 22px 0 6px;
}

.catalogo-secao:first-of-type {
  margin-top: 8px;
}

/* ".ranking-table td" é nowrap por padrão (ver comentário mais abaixo) -
   descrição oficial e motivo precisam quebrar linha. */
.ranking-table td.catalogo-cell-wrap {
  white-space: normal;
  min-width: 180px;
}

.ranking-table td.catalogo-acoes {
  white-space: nowrap;
  vertical-align: top;
}

/* Lápis + lixeira/reativar sempre lado a lado na célula de ações. O
   formulário de edição não fica aqui - abre numa linha própria da
   tabela logo abaixo (.catalogo-edit-row), togglada por JS. */
.catalogo-acoes__row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}

.catalogo-acoes__row form {
  margin: 0;
  display: inline-flex;
}

/* Linha de edição (aparece abaixo da linha do item quando o lápis é
   clicado). Fundo levemente destacado pra separar visualmente. */
.catalogo-edit-row > td {
  background: var(--color-background);
  padding: 12px 16px 16px;
}

.catalogo-edit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.catalogo-edit-form .text-input {
  flex: 0 1 240px;
}

.catalogo-edit-form .text-input--curto {
  flex: 0 0 90px;
}

.catalogo-edit-form .context-note {
  flex-basis: 100%;
  margin: 0;
}

.catalogo-status {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-background);
  color: var(--color-slate);
  white-space: nowrap;
}

.catalogo-status--inativo {
  background: rgba(180, 35, 24, 0.08);
  color: #B42318;
}

/* Checkbox "Padrão para novos clientes" (elegibilidade) - salva na hora,
   sem confirmação (ADR-097 / decisão de 09/09/2026). Form mínimo dentro
   da célula. */
.catalogo-inline-form {
  margin: 0;
}

/* Modal real (ADR-078) - primeira vez que o app usa <dialog> nativo em
   vez de progressive disclosure (<details>, ver .ranking-delete
   acima). Escolhido por já vir com foco automático, fechar via Esc e
   ::backdrop prontos, sem reimplementar nada disso. Classe genérica
   (.modal), não escopada à tela de Rankings - reaproveitável por
   qualquer tela futura que precise de confirmação modal. */
.modal {
  border: none;
  border-radius: 8px;
  padding: 24px;
  max-width: 420px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.modal::backdrop {
  background: rgba(13, 27, 42, 0.5);
}

.modal__title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 8px;
}

.modal__texto {
  font-size: 13px;
  color: var(--color-slate);
  margin: 0 0 20px;
}

.modal__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.form-message--success {
  color: var(--color-success-text);
}

.page-footnote {
  font-size: 12px;
  color: var(--color-slate);
  line-height: 1.6;
  margin: 4px 0 20px;
}

/* Achado de teste manual (Alexandre, 02/09/2026, ADR-079): o <select>
   nativo de Cidade não tem width fixo (herda só .select, sem width) -
   medido via DevTools que ele redimensiona pelo município mais longo
   já carregado (82px com só "Todos" -> 276px depois de popular com um
   estado grande), estourando a largura da linha de filtros e
   empurrando Cidade + Por página pra linha de baixo junto,
   inconsistente a cada UF escolhida. min-width fixo aqui garante
   espaço estável de verdade pra nomes de município longos,
   independente de quantas opções o combo carregar. */
.referencias-filtro-cidade {
  min-width: 320px;
}

/* ADR-080 - Detalhe do Projeto reformulado. */
.detail-card__header--split {
  justify-content: space-between;
}

.detail-card__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.projeto-rodada-linha {
  cursor: pointer;
}

.projeto-rodada-linha:hover {
  background: var(--color-background);
}

/* ADR-086 (tarefa 7.35.4/7.35.5) - wizard de criação de ranking. */
.wizard-header {
  margin-bottom: 20px;
}

.wizard-header__voltar {
  display: inline-block;
  font-size: 13px;
  color: var(--color-teal);
  text-decoration: none;
  margin-bottom: 8px;
}

.wizard-header__title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 12px;
}

.wizard-stepper {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wizard-stepper__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-slate);
}

.wizard-stepper__step--ativo {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.wizard-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  font-size: 11px;
}

.wizard-stepper__step--ativo .wizard-stepper__num {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
}

.wizard-stepper__step--feito .wizard-stepper__num {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
}

.wizard-etapa-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin: 0 0 4px;
}

/* Emenda de UX (11/09/2026): o cabeçalho da etapa saiu do card do
   campo "Descrição" (item 1). Bloco solto acima dos cards. */
.wizard-etapa-intro {
  margin-bottom: 20px;
}

.wizard-etapa-titulo {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0 0 4px;
}

.wizard-semente-contagem {
  font-size: 13px;
  color: var(--color-slate);
}

.wizard-link {
  color: var(--color-teal);
  text-decoration: none;
}

/* Emenda de UX (11/09/2026): alternador "Vinculadas ao projeto" /
   "Todas as referências" no bloco de referências (item 2/3). */
.wizard-abas {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  border-bottom: 1px solid var(--color-border);
}

.wizard-aba {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--color-slate);
  cursor: pointer;
}

.wizard-aba--ativa {
  color: var(--color-teal);
  border-bottom-color: var(--color-teal);
  font-weight: var(--font-weight-semibold);
}

.wizard-semente-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0;
}

/* Tarefa 11.3.13 (adenda de 30/09/2026 ao ADR-132): filtro de referências no
   card 2 do wizard — chips de categoria (o componente da Localização), busca e
   as duas ações sobre as filtradas. Quebra em linhas: nada de largura fixa
   (janela de 1024 px sem rolagem horizontal, ADR-132 d.1). */
.wizard-filtro-ref {
  margin-top: 12px;
}

.wizard-filtro-ref .localizacao-input {
  flex-wrap: wrap;
}

.wizard-filtro-ref__busca {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
}

.wizard-filtro-ref__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
}

/* `display: flex` acima sobreporia o atributo `hidden` (sem filtro, as ações
   ficam escondidas) */
.wizard-filtro-ref__acoes[hidden] {
  display: none;
}

.wizard-filtro-ref__resumo {
  font-size: 13px;
  color: var(--color-slate);
}

.wizard-semente-pager {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.wizard-semente-pager__btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--color-text);
  cursor: pointer;
}

.wizard-semente-pager__btn:disabled {
  color: var(--color-slate);
  cursor: default;
  opacity: 0.5;
}

.wizard-semente-pager__info {
  font-size: 12px;
  color: var(--color-slate);
}

.wizard-semente-lista {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-top: 10px;
}

.wizard-semente-lista .ranking-table {
  margin: 0;
}

.wizard-semente-lista .ranking-table th {
  position: sticky;
  top: 0;
  background: var(--color-white);
}

.wizard-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

/* Etapa 2 do wizard de ranking (ADR-086, tarefa 7.35.5): botões nas
   duas pontas ("← Voltar e ajustar" / "Gerar ranking"). */
.wizard-acoes--split {
  justify-content: space-between;
}

.button--small {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* Resumo da configuração (Etapa 2): 4 colunas com ícone/rótulo/valor. */
.wizard-resumo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 16px;
}

@media (max-width: 720px) {
  .wizard-resumo {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wizard-resumo__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wizard-resumo__icone {
  color: var(--color-teal);
  margin-bottom: 4px;
}

.wizard-resumo__rotulo {
  font-size: 12px;
  color: var(--color-slate);
}

.wizard-resumo__valor {
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
}

.wizard-resumo__ver {
  margin-top: 4px;
  font-size: 13px;
}

.wizard-resumo__ver summary {
  color: var(--color-teal);
  cursor: pointer;
}

.wizard-resumo__ver ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-slate);
}

/* Painel de administrador (ADR-089, tarefa 8.3.5) - linha de nome/
   e-mail/remover no formulario de cadastro de usuarios do tenant. */
.admin-usuario-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-usuario-row .field {
  flex: 1;
}

/*
  Faixa de "modo administrador" (ADR-089, adenda "Opcao B" - troca de
  tenant, tarefa 8.3.6). Cores de aviso ja existentes (--color-warning-*,
  ADR-059), nao uma cor nova - mesmo raciocinio ja documentado em
  tokens.css: "cor de estado, nao decorativa". `position: fixed` (nao
  sticky) e deliberado: a sidebar ja usa `position: sticky; top: 0;
  height: 100vh` (base.css, tarefa 4.7.0) - dois elementos `sticky`
  com o mesmo `top: 0` competiriam pelo mesmo espaco/empilhamento;
  `fixed` desacopla a faixa do fluxo de documento por completo, sempre
  ancorada no topo real da viewport, sem depender de nenhum calculo de
  sticky-stacking. Altura fixa (44px) para o calculo exato do offset
  da sidebar abaixo (`html.admin-viewing .sidebar`).
*/
.admin-viewing-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: var(--color-warning-bg);
  border-bottom: 1px solid var(--color-warning-border);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.admin-viewing-banner__texto {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-viewing-banner__icon {
  color: var(--color-warning-icon);
  flex-shrink: 0;
}

.admin-viewing-banner__sair {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  white-space: nowrap;
}

/* Compensacao de layout: a faixa fixa ocupa 44px reais no topo da
   viewport, fora do fluxo normal do documento - sem isso, o topo da
   pagina (sidebar/conteudo) ficaria escondido atras dela. A sidebar
   (position: sticky; top: 0; height: 100vh) precisa do MESMO ajuste
   nos seus proprios `top`/`height`, senao ela colaria em top:0 da
   viewport por baixo da faixa, sobrepondo-a visualmente ao rolar a
   pagina. */
html.admin-viewing body {
  padding-top: 44px;
}

html.admin-viewing .sidebar {
  top: 44px;
  height: calc(100vh - 44px);
}

/* O painel "Saiba mais" (.drawer, z-index 950) começa ABAIXO da faixa
   (z-index 1000): em top:0 o ✕ ficava debaixo do link "Sair do modo de
   visualização" e o clique saía da visualização (revisão de produto da
   11.3.7, 23/09/2026). */
html.admin-viewing .drawer {
  top: 44px;
  height: calc(100vh - 44px);
}

/* Painel lateral "Saiba mais" da tela de Parâmetros (09/09/2026).
   Diferente do .modal (<dialog>, ADR-078): NÃO cobre o conteúdo - é um
   drawer que desliza da direita, o card com os campos continua legível
   à esquerda enquanto o painel está aberto (requisito explícito). Sem
   ::backdrop, sem trava de foco - o resto da página segue interativo.
   Classe genérica, reaproveitável por qualquer tela futura que precise
   de um painel de contexto lado a lado. */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 380px;
  max-width: calc(100vw - 32px);
  z-index: 950;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 28px rgba(15, 23, 42, 0.14);
  transform: translateX(100%);
  transition: transform 0.18s ease-out;
}

.drawer--aberto {
  transform: translateX(0);
}

/* Enquanto o drawer está aberto, o conteúdo principal ganha um recuo à
   direita do tamanho do painel - assim o card com os campos NÃO fica
   coberto, só espremido pra esquerda: dá pra ler os campos e a
   explicação ao mesmo tempo (requisito). Volta ao normal ao fechar. */
.content {
  transition: padding-right 0.18s ease-out;
}

html.drawer-aberto .content {
  padding-right: 412px;
}

.drawer__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.drawer__title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.drawer__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--color-slate);
  font-size: 16px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
}

.drawer__close:hover {
  background: var(--color-background);
  color: var(--color-text);
}

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px 24px;
}

.drawer__nota {
  margin: 0 0 16px;
  padding: 12px;
  background: var(--color-background);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-slate);
}

/* Painel "Saiba mais" de UM texto corrido (cards que explicam um
   conceito único) - mesmo tratamento de corpo de texto do <dd> da
   lista, sem os rótulos. */
.drawer__texto {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-slate);
}

/* Painel "Saiba mais" com mais de um parágrafo (ex: "Produtos e
   serviços" / "Situações especiais" em Minha Empresa, addendum ADR-090):
   o macro emite um <p class="drawer__texto"> por parágrafo - espaço
   entre eles. */
.drawer__texto + .drawer__texto {
  margin-top: 12px;
}

.drawer__dl {
  margin: 0;
}

.drawer__dl dt {
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-top: 16px;
}

.drawer__dl dt:first-child {
  margin-top: 0;
}

.drawer__dl dd {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-slate);
  /* `pre-line`: um `\n` na copy vira quebra de linha real (campos que
     listam opções, ex: "Tipo de referência" / "Importar planilha" em
     referencias_ui.py); runs de espaço continuam colapsados, então a
     indentação da string Python é irrelevante. Sem efeito nos painéis
     cujo texto não tem `\n` (Parâmetros). */
  white-space: pre-line;
}


/* ------------------------------------------------------------------
   Pedido de ranking pela fila (ADR-126): faixa no topo, página do
   pedido, barra de progresso, linhas "em andamento".
   ------------------------------------------------------------------ */
.faixa-pedido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-teal);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-text);
}
.faixa-pedido--pronto { border-left-color: var(--color-success-text); background: var(--color-success-bg); }
.faixa-pedido--falhou { border-left-color: var(--color-warning-icon); background: var(--color-warning-bg); }
.faixa-pedido__detalhe { color: var(--color-slate); }
.faixa-pedido__link { font-weight: 600; white-space: nowrap; color: var(--color-text); text-decoration: underline; }

.pedido-progresso {
  height: 10px;
  margin: 16px 0 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.pedido-progresso__barra {
  height: 100%;
  width: 0;
  background: var(--color-teal);
  transition: width 0.6s ease;
}
.pedido-progresso--indeterminado .pedido-progresso__barra { width: 30%; opacity: 0.5; }
.pedido-etapa { color: var(--color-slate); margin: 0 0 12px; }
.pedido-aviso {
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--color-warning-border);
  border-radius: 8px;
  background: var(--color-warning-bg);
}
.pedido-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pedido-resumo { color: var(--color-slate); margin-top: 8px; }
.linha-em-andamento td { background: var(--color-background); font-style: italic; }
.admin-fila-alerta {
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--color-warning-border);
  border-radius: 8px;
  background: var(--color-warning-bg);
}
.admin-fila-tabela td, .admin-fila-tabela th { font-size: 13px; vertical-align: top; }
.admin-fila-tecnico { font-family: monospace; font-size: 12px; color: var(--color-slate); white-space: pre-wrap; }
/* Indicador de rolagem horizontal (revisão de 23/09/2026): sombra na borda
   onde há conteúdo cortado. As duas primeiras camadas (brancas) rolam COM o
   conteúdo (`local`) e cobrem a sombra quando se chega àquela ponta; as duas
   sombras ficam fixas (`scroll`). Só CSS; células da `.ranking-table` são
   transparentes, então a sombra aparece por baixo delas. */
.table-wrap--rolagem {
  background:
    linear-gradient(to right, var(--color-white) 30%, rgba(255, 255, 255, 0)) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--color-white) 30%, rgba(255, 255, 255, 0)) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0)) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0)) right center / 16px 100% no-repeat scroll,
    var(--color-white);
}

/*
  11.3.10 (ADR-128) — tela de resultado para o diretor comercial:
  filtros de segmento/UF/município num formulário só; selo de situação
  especial (#14); "Excluir este ranking" no rodapé, longe de "Exportar
  CSV" (#16); a linha de explicação das semelhanças no detalhe (#12).
*/
.filtros-ranking {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.filtros-ranking .field {
  min-width: 180px;
  max-width: 420px;
  margin-bottom: 0;
}

.badge--situacao {
  margin-left: 6px;
  background: rgba(180, 83, 9, 0.12);
  color: #92400E;
}

/* ADR-135: selo "Revisar" dos ramos de atividade genéricos (rankings.revisar) — neutro, como o
   .badge--excluida_ranking: é um convite a conferir, não um estado de erro. */
.badge--revisar {
  margin-left: 6px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  color: var(--color-slate);
  cursor: help;
}

/* o motivo do selo, escrito no Detalhe da Empresa */
.aviso-revisar {
  display: block;
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--color-slate);
  background: var(--color-background);
  border-left: 3px solid var(--color-border);
  border-radius: 4px;
}

/* "Minha Empresa", ramos de atividade (ADR-135): o que o selo significa e quantas referências o cliente tem no ramo */
.ramo-nota {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-slate);
}

.ranking-rodape {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.ranking-rodape__excluir {
  display: inline-block;
  font-size: 13px;
  color: #B42318;
  text-decoration: underline;
}

.score-panel__explicacao {
  font-size: 12px;
  color: var(--color-slate);
  margin-top: 6px;
  line-height: 1.4;
}

/* ADR-130: /admin/parametros — "Servidor web: configurado × aplicado".
   Reaproveita os tokens de aviso existentes (sem cor nova fora da paleta). */
.infra-web { margin-bottom: 20px; }
.infra-web__difere td { background: var(--color-warning-bg); }
.infra-web__aviso {
  background: var(--color-warning-bg);
  color: var(--color-warning-icon);
  border: 1px solid var(--color-warning-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 12px;
}

/* ADR-131 decisão 2 (#5): avisos do wizard — pedido em andamento e ranking
   idêntico. Cores de estado de aviso (tokens --color-warning-*). */
.aviso-wizard {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-left: 4px solid var(--color-warning-icon);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 12px 0 20px;
  font-size: 13px;
}
.aviso-wizard p { margin: 0; }
.aviso-wizard__acoes { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

/* =====================================================================
   ADR-132 (tarefa 11.3.11) — layout a partir de 1024 px
   ===================================================================== */

/* Decisão 4: tabelas largas rolam SÓ por dentro (.table-wrap), com as colunas
   de identificação fixas à esquerda; nenhuma coluna escondida. A classe vai na
   <table>: `tabela-fixa` fixa a 1ª coluna; `tabela-fixa tabela-fixa--2` fixa as
   duas primeiras, com a largura da 1ª em `--fixa-1` (no `style` da tabela).
   Filhos diretos (`>`) para não pegar tabelas aninhadas (a de tentativas da
   /admin/fila). */
.tabela-fixa > thead > tr > :first-child,
.tabela-fixa > tbody > tr > :first-child,
.tabela-fixa--2 > thead > tr > :nth-child(2),
.tabela-fixa--2 > tbody > tr > :nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-white);
}

.tabela-fixa--2 > thead > tr > :first-child,
.tabela-fixa--2 > tbody > tr > :first-child {
  width: var(--fixa-1);
  min-width: var(--fixa-1);
  max-width: var(--fixa-1);
}

.tabela-fixa--2 > thead > tr > :nth-child(2),
.tabela-fixa--2 > tbody > tr > :nth-child(2) {
  left: var(--fixa-1);
}

/* a borda à direita da última coluna fixa marca onde a rolagem começa */
.tabela-fixa:not(.tabela-fixa--2) > thead > tr > :first-child,
.tabela-fixa:not(.tabela-fixa--2) > tbody > tr > :first-child,
.tabela-fixa--2 > thead > tr > :nth-child(2),
.tabela-fixa--2 > tbody > tr > :nth-child(2) {
  box-shadow: inset -1px 0 0 var(--color-border);
}

/* colunas de texto longo que quebram linha em vez de alargar a tabela */
.ranking-table td.col-texto,
.ranking-table th.col-texto {
  white-space: normal;
  min-width: 180px;
  max-width: 280px;
}

/* Decisão 3: barra de ações fixa no pé das duas etapas do wizard. */
.wizard-barra {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px -40px -32px;
  padding: 12px 40px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
}

.wizard-barra__resumo {
  min-width: 0;
  font-size: 13px;
  color: var(--color-slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-barra__resumo strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.wizard-barra__acoes {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
}

/* Decisão 7: aviso no bloco de referências e confirmação dos vínculos. */
.wizard-semente-aviso {
  margin-top: 10px;
  font-size: 13px;
  color: #B42318; /* o tom de erro de .form-message */
}

.aviso-wizard--confirmar {
  margin-top: 12px;
}

/* Porte-alvo na horizontal, "Todas" primeiro; em tela estreita quebra linha (pedido de 07/10/2026). As definições
   de cada porte ficam na ajuda do bloco (ADR-132 decisão 5). */
.porte-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 8px;
}

.porte-opcoes .checkbox {
  white-space: nowrap;
}

/* Decisão 8: descrição na Etapa 2, linha inteira acima do resumo. */
.wizard-resumo__descricao {
  margin-top: 12px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.wizard-resumo__descricao-vazia {
  color: var(--color-slate);
}

/* Decisão 6: paginação numerada. */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-slate);
}

.paginacao__numeros {
  display: flex;
  align-items: center;
  gap: 4px;
}

.paginacao__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}

a.paginacao__item:hover {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

.paginacao__item--atual {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

.paginacao__item--inativo {
  color: var(--color-light-slate);
  cursor: default;
}

.paginacao__reticencias {
  padding: 0 2px;
}

.paginacao__ir {
  display: flex;
  align-items: center;
  gap: 6px;
}

.paginacao__ir input {
  width: 64px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}

.paginacao__por-pagina {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Decisão 9: detalhe da referência como lista rotulada (layout F4). */
.detalhe-ref__nome {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
}

.detalhe-ref {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}

.detalhe-ref dt {
  color: var(--color-slate);
  font-size: 12px;
  padding-top: 1px;
}

.detalhe-ref dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.detalhe-ref__sep {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-border);
  margin: 4px 0;
}

.detalhe-ref__nota {
  display: block;
  font-size: 12px;
  color: var(--color-slate);
}

/* ADR-133 decisão 9: aviso do CNPJ (matriz não ativa, mais de uma matriz ou nenhuma) — no detalhe
   da referência e no Detalhe da Empresa. Cor de aviso, não de nota: o vendedor não pode ligar para um
   CNPJ morto achando que é o ativo. */
.aviso-cnpj {
  display: block;
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: #92400E;
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning-icon);
  border-radius: 4px;
}
/* o `display: block` acima venceria o atributo `hidden` (a faixa vazia aparecia no cadastro de cliente) */
.aviso-cnpj[hidden] { display: none; }
/* o estabelecimento ativo quando a matriz não está ativa (decisão de 30/09/2026): numa linha própria */
.aviso-cnpj .cnpj-ativo,
.detalhe-ref__nota.cnpj-ativo { display: block; font-weight: 600; }
/* a linha do CNPJ abaixo da razão social, na tabela do resultado (decisão de 30/09/2026) — nunca quebra */
.cnpj-linha {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-slate);
  white-space: nowrap;
}
/* Coluna RECOMENDAÇÃO da tabela do resultado (decisão de Alexandre de 30/09/2026; adenda ao ADR-132): larga o
   bastante para a razão social de um resultado real com 49 caracteres caber em UMA linha — MEDIDO no Chrome com
   a fonte do link da coluna (500 13px Inter): 410,9 px de texto + 16 + 16 de padding = 443 px → 444 px. Nomes
   mais longos quebram para a linha de baixo. Seletor com `td`/`th` (a especificidade de `.ranking-table td`). */
.ranking-table td.col-recomendacao,
.ranking-table th.col-recomendacao {
  white-space: normal;
  width: 444px;
  min-width: 444px;
  max-width: 444px;
}
/* PP e Porte: a largura do título curto e do valor */
.ranking-table td.col-estreita,
.ranking-table th.col-estreita {
  width: 1%;
  white-space: nowrap;
}
.ranking-table td.col-estreita abbr { text-decoration: none; cursor: help; }
.cnpj-linha__situacao { color: #92400E; }
.cnpj-linha__ativo { display: block; color: #92400E; font-weight: 600; }
/* idem para os dois passos da oferta "Usar o CNPJ da matriz" (o `display: flex` de .aviso-wizard__acoes) */
.aviso-wizard__acoes[hidden] { display: none; }

/* cabeçalho das tabelas fixas acima das células fixas ao rolar (d.4) */
.tabela-fixa > thead > tr > :first-child,
.tabela-fixa--2 > thead > tr > :nth-child(2) {
  z-index: 3;
}

.wizard-semente-lista .ranking-table th {
  z-index: 2;
}

/* Visão Geral: os 4 cartões de números ficam em 2 colunas abaixo de 1440 px —
   com a coluna lateral de 300 px, em 1024 (menu recolhido) e 1280 (menu aberto)
   cada cartão teria ~135 px e o rótulo era cortado (portão da 11.3.11, ADR-132 d.1). */
@media (max-width: 1439.98px) {
  .stat-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 11.3.16 área 8: Visão Geral e Segurança (as duas únicas telas com `.overview-layout`) abaixo de 1280 px com o menu
   lateral ABERTO — a coluna lateral de 300 px deixava a principal com ~333 px em 1024 (na Visão Geral, o texto do
   bloco central com ~53 px, uma palavra por linha). Ali a coluna lateral desce para baixo do conteúdo, com os cartões
   lado a lado em duas colunas; menu recolhido, 1280 e 1536 não mudam. */
@media (max-width: 1279.98px) {
  html:not(.sidebar-collapsed) .overview-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(.sidebar-collapsed) .overview-layout > .overview-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* 11.3.16 área 8 (Segurança): as fileiras de cartões (5 no topo, 3 na infraestrutura) ficavam com o texto de 50–171 px
   em 1024 e 1280. Pela largura MEDIDA da coluna principal (container query só nesta tela, que é a única com
   `.info-card-grid--5`): abaixo de 1264 px a fileira de 5 passa para 3 colunas (5 colunas só com o texto de cada
   cartão ≥ ~200 px: 5 × 240 + 4 × 16); abaixo de 752 px, as duas fileiras passam para 2 colunas. */
.overview-main:has(> .info-card-grid--5) {
  container-type: inline-size;
  container-name: seguranca-principal;
}

@container seguranca-principal (max-width: 1263.98px) {
  .info-card-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container seguranca-principal (max-width: 751.98px) {
  .info-card-grid--5,
  .info-card-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 11.3.14 (ADR-134 d.6/d.9): nas listas de usuários, as linhas de acesso, último
   envio e senha temporária ficam numa faixa de largura inteira ABAIXO do nome e
   dos botões, e quebram (o `.project-list__meta` comum é uma linha só, ao lado do
   nome; ao lado dos botões o texto ficava espremido em 4–7 linhas — portão). */
.usuario-acesso-faixa {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 20px 14px;
}

.usuario-acesso {
  white-space: normal;
}

/* A linha "e-mail · papel · último acesso" das listas de usuários também quebra:
   com `nowrap` (o padrão do `.project-list__meta`) ela passava POR BAIXO dos
   botões em 1024 px — achado no portão da 11.3.14 (a régua de rolagem não pega:
   o texto não passa da borda da página). */
.project-list__link--usuario {
  flex-wrap: wrap;
}

.project-list__link--usuario .project-list__meta {
  white-space: normal;
}

/* 11.3.17 (ADR-138): Análise Profunda. O botão tem cor própria — o roxo dos tokens
   (--color-purple), porque o teal já é o botão primário: ele gasta crédito e não
   pode ser confundido com o "seguir" comum de cada tela. */
.button--analise {
  background: var(--color-purple);
  color: var(--color-white);
}

.button--analise:hover {
  filter: brightness(0.94);
}

.button--analise:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.analise-botao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.analise-botao__form {
  margin: 0;
}

/* no detalhe da referência (modal), o botão não encosta na lista "Projetos" */
.detalhe-ref + .analise-botao {
  margin-top: 16px;
}

.analise-botao__nota,
.analise-botao__ver {
  font-size: 13px;
  color: var(--color-slate);
}

.analise-sub {
  color: var(--color-slate);
  margin: 0 0 12px;
}

.analise-cabecalho {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.analise-etapas {
  color: var(--color-slate);
  font-size: 13px;
  margin: 0 0 8px;
  padding-left: 20px;
}

.analise-itens {
  list-style: none;
  margin: 0;
  padding: 0;
}

.analise-itens li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  overflow-wrap: anywhere;
}

.analise-itens li:last-child {
  border-bottom: 0;
}

.analise-item__detalhe,
.analise-item__meta {
  font-size: 13px;
  color: var(--color-slate);
}

.analise-selo {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid var(--color-border);
}

.analise-selo--confirmado {
  color: var(--color-teal);
  border-color: var(--color-teal);
}

.analise-selo--provavel {
  color: var(--color-navy);
}

.analise-selo--nao_confirmado {
  color: #B42318;
  border-color: #B42318;
}

.analise-fontes {
  overflow-wrap: anywhere;
  font-size: 13px;
}

/* 11.3.17, adenda (4) de 07/10/2026 ao ADR-138: a tela nova da Análise Profunda (prévia aprovada em
   scratchpad/analise_layout/). Só cores dos tokens; os fundos claros são tons dos próprios tokens (mistura com o
   branco); o âmbar de aviso também em "Pontos a confirmar" e "não confirmado" (decisão 8). */
:root {
  --ap-tint-teal: color-mix(in srgb, var(--color-teal) 12%, var(--color-white));
  --ap-tint-roxo: color-mix(in srgb, var(--color-purple) 10%, var(--color-white));
  --ap-tint-slate: color-mix(in srgb, var(--color-light-slate) 18%, var(--color-white));
}

.ap-voltar { display: inline-block; color: var(--color-slate); font-size: 14px; margin-bottom: 12px; }

.ap-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.ap-cab__texto { min-width: 0; }
.ap-olho { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 4px; }
.ap-olho--roxo { color: var(--color-purple); }
.ap-cab__nome { font-size: 30px; line-height: 1.15; color: var(--color-navy); margin: 0 0 6px; text-wrap: balance; }
.ap-cab__ident { color: var(--color-slate); font-size: 14px; margin: 0; }
.ap-cab__acoes { flex: 0 0 auto; }

.ap-ramos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 4px 0 0; }
.ap-ramo { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; padding: 12px 16px; }
.ap-ramo__olho { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
                 letter-spacing: .05em; text-transform: uppercase; color: var(--color-slate); margin: 0 0 4px; }
.ap-ramo__texto { margin: 0 0 4px; }

.ap-indice { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 20px; padding-bottom: 14px;
             border-bottom: 1px solid var(--color-border); }
.ap-indice a { font-size: 13px; color: var(--color-navy); background: var(--color-white);
               border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 12px; }
.ap-indice a:hover { border-color: var(--color-teal); color: var(--color-teal); }

.ap-secao { margin-bottom: 32px; scroll-margin-top: 16px; }
.ap-h2 { font-size: 20px; color: var(--color-navy); margin: 22px 0 10px; }
.ap-secao > .ap-h2:first-child { margin-top: 0; }
.ap-h3 { font-size: 16px; color: var(--color-navy); margin: 0 0 10px; }
.ap-intro { color: var(--color-slate); margin: -4px 0 14px; max-width: 80ch; }
.ap-nota { color: var(--color-slate); font-size: 13px; margin: 12px 0 0; }
.ap-data { color: var(--color-slate); font-size: 12.5px; }

.ap-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 6px;
           white-space: nowrap; }
.ap-chip--confirmado { color: var(--color-teal); background: var(--ap-tint-teal); }
.ap-chip--provavel { color: var(--color-slate); background: var(--ap-tint-slate); }
.ap-chip--nao_confirmado { color: var(--color-warning-icon); background: var(--color-warning-bg); }
.ap-chip--ia { color: var(--color-purple); background: var(--ap-tint-roxo); }
.ap-chip--historico { color: var(--color-slate); background: var(--color-background);
                      border: 1px dashed var(--color-light-slate); }

.ap-fontes a { color: var(--color-teal); text-decoration: underline; margin-right: 6px; font-size: 12.5px;
               overflow-wrap: anywhere; }

.ap-visao { background: var(--color-navy); color: var(--color-white); border-radius: 10px; padding: 20px 24px 16px; }
.ap-visao__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.ap-visao__olho { color: var(--color-teal); font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.ap-visao__texto { font-size: 18px; line-height: 1.5; margin: 0 0 10px; max-width: 90ch; }
.ap-visao__nota { color: var(--color-light-slate); font-size: 12.5px; margin: 0; }

.ap-sinais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ap-sinal { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px;
            padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ap-sinal__titulo { font-weight: 700; color: var(--color-navy); }
.ap-sinal__frase { margin: 0; }

.ap-duas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin-top: 16px; }
.ap-cartao { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; padding: 16px 18px; }
.ap-canais { list-style: none; margin: 0 0 8px; padding: 0; }
.ap-canais li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 5px 0;
                border-bottom: 1px solid var(--color-border); }
.ap-canais li:last-child { border-bottom: 0; }
.ap-canais__rot { color: var(--color-slate); font-size: 13px; min-width: 72px; }
.ap-canais a:not(.ap-fontes a) { color: var(--color-teal); text-decoration: underline; font-size: 15px;
                                 overflow-wrap: anywhere; }
.ap-faixa { background: var(--ap-tint-teal); border-radius: 8px; padding: 16px 18px; }
.ap-faixa__olho { color: var(--color-teal); font-size: 12px; font-weight: 700; letter-spacing: .05em; margin: 0 0 6px; }
.ap-faixa p { margin: 0 0 10px; }
.ap-faixa a { color: var(--color-navy); font-weight: 600; font-size: 14px; }

.ap-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ap-produto { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px;
              padding: 16px 18px; }
.ap-produto__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ap-produto__n { background: var(--ap-tint-teal); color: var(--color-teal); font-weight: 700; font-size: 12px;
                 border-radius: 5px; padding: 2px 7px; }
.ap-produto__nome { font-weight: 700; color: var(--color-navy); font-size: 16px; }
.ap-produto__pitch { margin: 0 0 10px; }
.ap-porque__olho { color: var(--color-teal); font-size: 11px; font-weight: 700; letter-spacing: .05em; margin: 0 0 2px; }
.ap-porque { color: var(--color-slate); font-size: 13.5px; margin: 0; }

.ap-pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ap-pessoa { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px;
             padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ap-pessoa a { color: var(--color-teal); text-decoration: underline; overflow-wrap: anywhere; }
.ap-pessoa__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ap-pessoa__nome { font-weight: 700; color: var(--color-navy); }
.ap-pessoa__area { color: var(--color-slate); }
.ap-pessoa--historico { background: var(--color-background); }
.ap-historico { margin-top: 12px; }
.ap-historico > summary { cursor: pointer; color: var(--color-slate); font-size: 14px; margin-bottom: 10px; }

.ap-recolhivel > summary { cursor: pointer; list-style: none; }
.ap-recolhivel > summary::-webkit-details-marker { display: none; }
.ap-recolhivel > summary .ap-h2 { display: inline-flex; align-items: center; gap: 10px; margin-top: 0; }
.ap-recolhivel > summary .ap-h2::before { content: "▸"; color: var(--color-slate); font-size: 14px; }
.ap-recolhivel[open] > summary .ap-h2::before { content: "▾"; }
.ap-contagem { color: var(--color-slate); font-size: 13px; font-weight: 400; }

.ap-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; align-items: start; }
.ap-tema { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; padding: 14px 16px; }
.ap-tema__titulo { font-weight: 700; color: var(--color-navy); margin: 0 0 6px; }
.ap-tema__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 0;
                 border-top: 1px solid var(--color-border); }
.ap-tema__item:first-of-type { border-top: 0; padding-top: 0; }
.ap-tema__item p { margin: 0; }
.ap-tema__meta { grid-column: 1 / -1; }
.ap-tema__item .ap-chip, .ap-pessoa__cab .ap-chip { align-self: start; }
.ap-pontos { background: var(--color-warning-bg); border-radius: 8px; padding: 14px 18px; margin-top: 12px; }
.ap-pontos__titulo { font-weight: 700; color: var(--color-navy); margin: 0 0 6px; }
.ap-pontos p { margin: 0 0 4px; }

.ap-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--color-slate); font-size: 13px; margin-bottom: 12px; }
.ap-lista-fontes { list-style: none; margin: 0; padding: 0; background: var(--color-white);
                   border: 1px solid var(--color-border); border-radius: 8px; }
.ap-lista-fontes li { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 7px 12px;
                      border-bottom: 1px solid var(--color-border); }
.ap-lista-fontes li:last-child { border-bottom: 0; }
.ap-lista-fontes li > span:last-child { display: flex; flex-direction: column; }
.ap-lista-fontes a { color: var(--color-teal); text-decoration: underline; overflow-wrap: anywhere; }
.ap-lista-fontes__n { color: var(--color-slate); font-weight: 700; font-size: 13px; }

@media (max-width: 1099.98px) {
  .ap-duas { grid-template-columns: minmax(0, 1fr); }
}

/* Decisão de Alexandre de 08/10/2026 (adenda (6) ao ADR-138): a análise que o cliente já tem não vence — a data de
   geração no cabeçalho e o "Refazer", com o custo e o saldo antes da confirmação (painel que abre sob o botão). */
.ap-cab__gerada { color: var(--color-slate); font-size: 13px; margin: 4px 0 0; }
.ap-cab__acoes { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.ap-refazer { position: relative; }
.ap-refazer > summary { list-style: none; cursor: pointer; }
.ap-refazer > summary::-webkit-details-marker { display: none; }
.ap-refazer__painel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 320px;
                      background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px;
                      box-shadow: 0 8px 24px rgba(13, 27, 42, .12); padding: 14px 16px; }
.ap-refazer__painel p { margin: 0 0 8px; }
.ap-refazer__painel .analise-botao__form { margin-top: 4px; }

/* Pedido do cliente de 08/10/2026 (adenda ao ADR-132): no ranking, as empresas que JÁ TÊM Análise Profunda pronta
   para este cliente com outro fundo (o roxo claro da Análise Profunda), com a legenda acima da tabela. O seletor vence
   o fundo branco das colunas fixas (`.tabela-fixa`). */
.ranking-table tbody tr.linha--com-analise > td { background: var(--color-purple-bg); }
.legenda-analise { display: flex; align-items: center; gap: 8px; color: var(--color-slate); font-size: 13px;
                   margin: 0 0 8px; }
.legenda-analise__amostra { display: inline-block; width: 22px; height: 14px; border-radius: 3px;
                            background: var(--color-purple-bg); border: 1px solid var(--color-purple); }

/* A tela "Análises Profundas" do cliente (decisão de Alexandre de 08/10/2026, adenda (6) ao ADR-138). */
.analises-busca { align-items: flex-end; }
.analises-busca__limpar { color: var(--color-slate); font-size: 13px; align-self: flex-end; padding-bottom: 10px; }
.analises-fantasia { display: block; color: var(--color-slate); font-size: 12px; }
.analises-tabela td { vertical-align: top; }
.ranking-table td.analises-contatos { white-space: normal; min-width: 200px; max-width: 280px; }
.analises-contatos a, .analises-contatos span { display: block; overflow-wrap: anywhere; }
.analises-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.analises-acoes__form { margin: 0; }
.analises-vazio { margin: 0; }
.analises-busca .text-input { width: 340px; max-width: 100%; }

/* Os dados da Receita (ADR-140, pedido do cliente de 08/10/2026): os contatos que a Receita publica na tabela do
   resultado e na lista de referências (colunas que rolam com a tabela, ADR-132), os blocos do Detalhe da Empresa e
   da referência, e a ficha da busca de referência. */
.ranking-table td.col-contato { white-space: nowrap; }
.ranking-table td.col-email { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ranking-table td.col-contato[title], .ranking-table td.col-email[title] { text-decoration: underline dotted;
                                                                          text-underline-offset: 3px; }
.detail-header__fantasia { font-size: 14px; color: var(--color-text); margin: 0 0 4px; }
.detail-item--largo { grid-column: 1 / -1; }
.detail-item--largo .detail-item__value { font-size: 14px; font-weight: var(--font-weight-regular, 400); }
.aviso-contato-filial { margin: 0 0 12px; padding: 4px 8px; font-size: 12px; color: var(--color-slate);
                        background: var(--color-background); border-left: 3px solid var(--color-teal);
                        border-radius: 4px; }
.nota-receita { margin: 12px 0 0; font-size: 12px; color: var(--color-slate); }
.detail-item__value a { overflow-wrap: anywhere; }
/* a lista da busca de empresa (razão social OU nome fantasia) e a ficha antes de cadastrar (ADR-140) */
.busca-empresa__item { display: flex; flex-direction: column; gap: 2px; }
.busca-empresa__nome { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.busca-empresa__fantasia { font-size: 12px; color: var(--color-text); }
.busca-empresa__dados { font-size: 12px; color: var(--color-slate); }
/* sem estabelecimento ativo: no fim da lista e marcada (adenda de 09/10/2026 ao ADR-085) */
.busca-empresa__item--inativa { border-left: 3px solid var(--color-warning-border); padding-left: 8px; }
.busca-empresa__item--inativa .busca-empresa__nome { color: var(--color-slate); }
.ficha-empresa { margin-top: 16px; padding: 16px; border: 1px solid var(--color-border); border-radius: 8px;
                 background: var(--color-background); }
.ficha-empresa[hidden] { display: none; }
.detalhe-ref__bloco { font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--color-text);
                      margin: 16px 0 8px; }
/* os sócios e administradores (ADR-140): a coluna da tabela (uma linha, todos no título) e a tabela do Detalhe */
.ranking-table td.col-socios { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.tabela-socios-wrap { overflow-x: auto; }
.tabela-socios { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-socios th, .tabela-socios td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-border);
                                       vertical-align: top; }
.tabela-socios th { color: var(--color-slate); font-weight: var(--font-weight-semibold); font-size: 12px; }

/* Análise Profunda — formato 3 (adenda (7) de 12/10/2026 ao ADR-138): o mesmo corpo do PDF, na tela */
.a3-preparada { color: var(--color-purple); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px; }
.a3-ident { color: var(--color-slate); font-size: 14px; margin: 0 0 12px; }
.a3-secao { margin-bottom: 32px; scroll-margin-top: 16px; }
.a3-titulo { font-size: 20px; color: var(--color-navy); margin: 22px 0 10px; }
.a3-titulo--meio { margin-top: 28px; }
.a3-sec { font-size: 15px; color: var(--color-navy); margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1.5px solid var(--color-navy); }
table.a3-lista { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
table.a3-lista th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-slate); padding: 2px 12px 6px 0; }
table.a3-lista td { padding: 7px 12px 7px 0; border-bottom: 1px solid var(--color-border); vertical-align: top; overflow-wrap: anywhere; }
.a3-nome { font-weight: 700; color: var(--color-navy); }
.a3-sub { color: var(--color-slate); font-size: 12.5px; display: block; margin-top: 2px; }
.a3-alerta { color: var(--color-warning-icon); font-size: 12px; font-weight: 600; display: block; margin-top: 2px; }
.a3-ref { color: var(--color-light-slate); font-size: 11px; white-space: nowrap; margin-left: 4px; }
.a3-ref a { color: var(--color-light-slate); text-decoration: none; }
.a3-pend { display: inline-block; width: 7px; height: 7px; border: 1px solid var(--color-light-slate); border-radius: 50%; margin-left: 5px; vertical-align: 1px; }
.a3-pend--legenda { margin: 0 6px 0 0; }
.a3-vazio { color: var(--color-light-slate); }
.a3-canal1 { font-size: 15px; margin: 4px 0; }
.a3-canal1__v { margin-right: 18px; font-weight: 600; white-space: nowrap; display: inline-block; }
.a3-canal1__u { font-weight: 400; color: var(--color-slate); font-size: 12.5px; }
.a3-sub-inline { color: var(--color-slate); font-size: 12.5px; }
.a3-prod1 { display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.a3-prod1__n, .a3-prod__n { color: var(--color-teal); font-weight: 700; font-size: 13px; padding-top: 1px; }
.a3-prod1__nome { font-weight: 700; color: var(--color-navy); }
.a3-prod1__frase { grid-column: 2; margin: 0; }
.a3-sinal { border-left: 3px solid var(--color-teal); padding: 2px 0 2px 12px; margin: 4px 0 0; }
.a3-sinal__titulo { font-weight: 700; color: var(--color-navy); margin: 0 0 2px; }
.a3-sinal p { margin: 0; }
.a3-visao { font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
.a3-prod { display: grid; grid-template-columns: 30px 1fr; gap: 0 8px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.a3-prod__nome { font-weight: 700; color: var(--color-navy); font-size: 16px; margin: 0 0 4px; }
.a3-prod__pitch, .a3-prod__pergunta, .a3-prod__agora { margin: 0 0 6px; line-height: 1.5; }
.a3-prod__pergunta { font-style: italic; color: var(--color-navy); }
.a3-prod__agora { font-size: 13.5px; margin: 0; }
.a3-prod__agora strong { color: var(--color-teal); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; margin-right: 6px; }
.a3-itens { list-style: none; margin: 0; padding: 0; }
.a3-itens li { padding: 7px 0; border-bottom: 1px solid var(--color-border); }
.a3-noticia { padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.a3-noticia__titulo { font-weight: 700; color: var(--color-navy); margin: 0; }
.a3-noticia__meta { color: var(--color-slate); font-size: 12px; margin: 0 0 2px; }
.a3-noticia p { margin: 0; }
.a3-legenda { color: var(--color-slate); font-size: 13px; margin: 0 0 10px; }
.a3-fontes { list-style: none; margin: 0; padding: 0; }
.a3-fontes li { display: grid; grid-template-columns: 30px 1fr; padding: 6px 0; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.a3-fontes__n { color: var(--color-slate); font-weight: 700; font-size: 12px; padding-top: 1px; }
.a3-fontes__meta { color: var(--color-slate); font-size: 12px; }
.a3-lgpd { color: var(--color-slate); font-size: 12px; margin-top: 14px; }
.a3-vazio-bloco { border: 1px dashed var(--color-light-slate); border-radius: 7px; padding: 14px; color: var(--color-slate); }