/* ============================================================
   SBA EDGE — WELCOMEHUB
   Camada de aplicação. Depende de ../../../brand/tokens.css.

   Regra desta folha: nenhum hexadecimal literal de marca. Toda
   cor sai de var(--sba-*). Todo espaçamento é múltiplo de 8 —
   a grade de cubos da marca. Todo raio fica entre 2px e 8px.
   ============================================================ */

/* ------------------------------------------------------------
   1. ESTRUTURA DO APP
   ------------------------------------------------------------ */
:root {
  --wh-sidebar: 264px;
  --wh-topbar: 72px;
}

/* tokens.css não traz reset de box-sizing. Sem isto, um campo com
   width:100% e borda estoura o contêiner. Escopado ao hub para não
   alterar o comportamento das outras peças que importam os tokens. */
body.wh-app, body.wh-app *, body.wh-app *::before, body.wh-app *::after,
body.wh-login, body.wh-login *, body.wh-login *::before, body.wh-login *::after {
  box-sizing: border-box;
}

/* ---- [hidden] precisa vencer -----------------------------------
   O `[hidden] { display: none }` da folha do navegador tem
   especificidade de origem do usuário-agente e perde para QUALQUER
   declaração de `display` de autor. Como .wh-grid, .wh-vazio,
   .wh-row e .wh-toolbar definem display, todo bloco escondido por
   `el.hidden = true` continuava renderizando — e os dois estados da
   conta vazavam um no outro (a Home dizia "Nenhum aviso por
   enquanto" em cima de um aviso real de manutenção).

   Conferir `el.hidden` em teste não pega isso: a propriedade fica
   true e o elemento continua na tela. A regressão tem que medir
   `getComputedStyle(el).display`. */
body.wh-app [hidden],
body.wh-login [hidden] { display: none !important; }

/* ---- Superfícies do navegador ----------------------------------
   Seleção, cursor e barra de rolagem vêm com o padrão do sistema e
   não pertencem a design system nenhum. Vestidas com a paleta. */
::selection { background: var(--sba-green); color: var(--sba-text-on-green); }

body.wh-app, body.wh-login { caret-color: var(--sba-navy); }

.wh-content, .wh-table-wrap, .wh-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--sba-light-gray) transparent;
}
.wh-sidebar { scrollbar-width: thin; scrollbar-color: var(--sba-dark-gray) transparent; }

/* Números que se comparam em coluna precisam de largura fixa,
   senão a vírgula dança de linha para linha. */
.wh-table, .wh-stat__value, .wh-progresso__rotulo { font-variant-numeric: tabular-nums; }

body.wh-app {
  display: grid;
  grid-template-columns: var(--wh-sidebar) 1fr;
  min-height: 100vh;
  background: var(--sba-bg-alt);
}

/* ------------------------------------------------------------
   2. SIDEBAR
   Fundo navy com a malha de cubos. O padding do bloco de marca
   preserva a área de proteção do logo (altura do pin).
   ------------------------------------------------------------ */
.wh-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  /* Sem isto o min-content da nav estica a coluna do grid e o
     documento inteiro passa a rolar na horizontal no mobile. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--sba-bg-dark);
  overflow-y: auto;
}

.wh-sidebar__brand {
  padding: var(--sba-space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.wh-sidebar__logo { display: block; height: 32px; width: auto; }
.wh-sidebar__product {
  margin-top: var(--sba-space-2);
  font-family: var(--sba-font-display);
  font-size: var(--sba-fs-subtitle);
  letter-spacing: 0.08em;
  color: var(--sba-green);
  text-transform: uppercase;
}

/* `position: relative` pelo mesmo motivo de .wh-table-wrap: qualquer
   filho absoluto (um .wh-sr, por exemplo) precisa ter esta caixa como
   bloco contêiner. Sem isso ele se ancora no viewport, escapa do
   scroll horizontal da nav no mobile e estica o documento. */
.wh-nav { position: relative; padding: var(--sba-space-3) 0; flex: 1; }
.wh-nav__label {
  padding: var(--sba-space-2) var(--sba-space-4);
  font-size: var(--sba-fs-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sba-light-gray);
}

.wh-nav__item {
  display: flex;
  align-items: center;
  gap: var(--sba-space-3);
  padding: var(--sba-space-3) var(--sba-space-4);
  border-left: 3px solid transparent;
  color: var(--sba-light-gray);
  font-size: var(--sba-fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--sba-dur-fast) var(--sba-ease),
              color var(--sba-dur-fast) var(--sba-ease),
              border-color var(--sba-dur-fast) var(--sba-ease);
}
.wh-nav__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sba-white);
}
.wh-nav__item[aria-current="page"] {
  background: rgba(0, 195, 137, 0.14);
  border-left-color: var(--sba-green);
  color: var(--sba-white);
}
.wh-nav__item:focus-visible { outline: 2px solid var(--sba-green); outline-offset: -2px; }

/* Ícone duotom. O manual pede darkGray + green; sobre o navy da
   sidebar o darkGray não lê, então o traço acompanha o texto
   (lightGray / branco) e o detalhe verde permanece. */
.wh-icon { width: 20px; height: 20px; flex: none; }
.wh-icon__accent { fill: var(--sba-green); }

.wh-sidebar__foot {
  padding: var(--sba-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--sba-fs-caption);
  line-height: var(--sba-lh-caption);
  color: var(--sba-light-gray);
}
.wh-sidebar__foot a { color: var(--sba-green); }
.wh-sidebar__foot a:hover { color: var(--sba-white); }

/* ------------------------------------------------------------
   3. TOPBAR
   ------------------------------------------------------------ */
.wh-main { min-width: 0; display: flex; flex-direction: column; }

.wh-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--sba-space-4);
  min-height: var(--wh-topbar);
  padding: var(--sba-space-2) var(--sba-space-6);
  background: var(--sba-white);
  border-bottom: 1px solid var(--sba-border);
}
.wh-topbar__title {
  font-size: var(--sba-fs-subtitle);
  font-weight: 700;
  color: var(--sba-text-strong);
  margin: 0;
  max-width: none;   /* p herda a medida de 68ch da base */
}
.wh-topbar__spacer { flex: 1; }

.wh-account {
  display: flex;
  align-items: center;
  gap: var(--sba-space-2);
  padding-left: var(--sba-space-4);
  border-left: 1px solid var(--sba-border);
}
.wh-account__meta { text-align: right; line-height: 1.3; }
.wh-account__name { font-size: var(--sba-fs-small); font-weight: 700; color: var(--sba-text-strong); }
.wh-account__org  { font-size: var(--sba-fs-caption); color: var(--sba-text); }
.wh-avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--sba-radius-md);
  background: var(--sba-navy);
  color: var(--sba-white);
  font-size: var(--sba-fs-small);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.wh-logout {
  border: 0; background: none; padding: var(--sba-space-2);
  color: var(--sba-text-strong); font: inherit; font-size: var(--sba-fs-small);
  font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.wh-logout:hover { color: var(--sba-teal); }

/* ------------------------------------------------------------
   4. CONTEÚDO
   ------------------------------------------------------------ */
.wh-content { padding: var(--sba-space-6); flex: 1; }
.wh-wrap { max-width: 1120px; }

/* ---- Ordem da Home por papel -------------------------------------
   Os três papéis veem o mesmo conteúdo; muda o que vem primeiro.
   A ordem é CSS e não markup, para não existirem três Homes que
   depois divergem em manutenção — e para a ordem do DOM continuar
   sendo a ordem de leitura no leitor de tela quando o papel é o
   padrão. Ver README, "Home por papel".

   Cliente Tech opera o ambiente: acessos e avisos primeiro.
   Cliente Server administra a relação: contrato e time primeiro. */
.wh-wrap--ordenavel { display: flex; flex-direction: column; }
.wh-wrap--ordenavel > * { order: 5; }

[data-papel-ativo="cliente-tech"] .wh-wrap--ordenavel > [data-secao="portais"]  { order: 1; }
[data-papel-ativo="cliente-tech"] .wh-wrap--ordenavel > [data-secao="avisos"]   { order: 2; }
[data-papel-ativo="cliente-tech"] .wh-wrap--ordenavel > [data-secao="comecar"]  { order: 3; }
[data-papel-ativo="cliente-tech"] .wh-wrap--ordenavel > [data-secao="contrato"] { order: 4; }
[data-papel-ativo="cliente-tech"] .wh-wrap--ordenavel > [data-secao="time"]     { order: 6; }

[data-papel-ativo="cliente-server"] .wh-wrap--ordenavel > [data-secao="contrato"] { order: 1; }
[data-papel-ativo="cliente-server"] .wh-wrap--ordenavel > [data-secao="avisos"]   { order: 2; }
[data-papel-ativo="cliente-server"] .wh-wrap--ordenavel > [data-secao="time"]     { order: 3; }
[data-papel-ativo="cliente-server"] .wh-wrap--ordenavel > [data-secao="portais"]  { order: 4; }
[data-papel-ativo="cliente-server"] .wh-wrap--ordenavel > [data-secao="comecar"]  { order: 6; }

/* A tira de estado e a faixa de boas-vindas abrem a página em
   qualquer papel: são "onde você está", não conteúdo de seção. */
.wh-wrap--ordenavel > .wh-boasvindas,
.wh-wrap--ordenavel > .wh-estado { order: 0; }

.wh-page-head { margin-bottom: var(--sba-space-6); }

/* Eyebrow em navy: teal a 12px dá 4,1:1 sobre branco e reprova
   em AA. O .sba-eyebrow dos tokens só é seguro sobre fundo escuro. */
.wh-eyebrow {
  font-size: var(--sba-fs-caption);
  line-height: var(--sba-lh-caption);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sba-navy);
  margin: 0 0 var(--sba-space-2);
}
.wh-eyebrow--on-dark { color: var(--sba-green); }

.wh-section { margin-top: var(--sba-space-7); }
.wh-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sba-space-4); margin-bottom: var(--sba-space-4);
  border-bottom: 1px solid var(--sba-border); padding-bottom: var(--sba-space-2);
}
.wh-section__head h2 { margin: 0; }

/* ------------------------------------------------------------
   5. GRADES
   ------------------------------------------------------------ */
.wh-grid { display: grid; gap: var(--sba-space-4); }
.wh-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.wh-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wh-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ------------------------------------------------------------
   6. HERÓI DE BOAS-VINDAS
   ------------------------------------------------------------ */
/* .wh-hero foi removido: o herói de marketing da Home madura virou
   .wh-estado (o que mudou desde a última visita) e o do dia 1 já era
   .wh-boasvindas. Nenhum HTML usava mais estas regras. */

/* ------------------------------------------------------------
   6b. ESTADO DA CONTA — o topo de quem volta
   Não é herói: é o que mudou desde a última visita. Compacto de
   propósito, para o conteúdo com data começar acima da dobra.
   ------------------------------------------------------------ */
.wh-estado {
  background-color: var(--sba-bg-dark);
  border-radius: var(--sba-radius-lg);
  padding: var(--sba-space-5) var(--sba-space-6);
  color: var(--sba-text-on-dark);
}
.wh-estado h1 {
  color: var(--sba-white);
  font-size: var(--sba-fs-headline);
  margin-bottom: var(--sba-space-4);
}

.wh-pendencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.wh-pendencias a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sba-space-3);
  align-items: center;
  padding: var(--sba-space-3) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--sba-white);
  text-decoration: none;
  transition: color var(--sba-dur-fast) var(--sba-ease);
}
.wh-pendencias li:last-child a { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.wh-pendencias a:hover { color: var(--sba-green); }
.wh-pendencias a:hover .wh-pendencias__seta { transform: translateX(3px); }
.wh-pendencias a:focus-visible { outline: 2px solid var(--sba-green); outline-offset: 2px; }
.wh-pendencias__texto { font-size: var(--sba-fs-small); }
.wh-pendencias__seta {
  color: var(--sba-green);
  transition: transform var(--sba-dur-fast) var(--sba-ease);
}

/* Contador no menu: sem ele, "1 chamado aguardando você" só existe
   se o cliente abrir a Home. O aviso tem que viver no shell. */
.wh-nav__badge {
  margin-left: auto;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--sba-radius-pill);
  background: var(--sba-yellow); color: var(--sba-navy);
  font-size: var(--sba-fs-caption); font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   7. CARDS ESPECIALIZADOS
   ------------------------------------------------------------ */
.wh-stat {
  background: var(--sba-white); border: 1px solid var(--sba-border);
  border-top: 3px solid var(--sba-green); border-radius: var(--sba-radius-md);
  padding: var(--sba-space-4);
}
.wh-stat__label {
  font-size: var(--sba-fs-caption); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sba-text); margin: 0 0 var(--sba-space-2);
}
.wh-stat__value {
  font-family: var(--sba-font-display); font-size: 2.25rem; line-height: 1;
  color: var(--sba-navy); letter-spacing: 0.01em;
}
/* Para códigos e identificadores longos, que não cabem em 2,25rem
   sem quebrar no meio. */
.wh-stat__value--codigo { font-size: 1.5rem; letter-spacing: 0.04em; }
.wh-stat__note { font-size: var(--sba-fs-small); margin: var(--sba-space-2) 0 0; }

/* Card clicável inteiro: portal, documento, vídeo, download */
.wh-tile {
  display: flex; flex-direction: column; gap: var(--sba-space-2);
  background: var(--sba-white); border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md); padding: var(--sba-space-4);
  text-decoration: none; color: inherit;
  transition: border-color var(--sba-dur-base) var(--sba-ease),
              box-shadow var(--sba-dur-base) var(--sba-ease),
              transform var(--sba-dur-fast) var(--sba-ease);
}
.wh-tile:hover {
  border-color: var(--sba-green); box-shadow: var(--sba-shadow-md);
  transform: translateY(-2px); color: inherit;
}
.wh-tile:focus-visible { outline: 2px solid var(--sba-navy); outline-offset: 2px; }
/* O card é flex column: sem isto a etiqueta estica na largura toda. */
.wh-tile > .sba-tag, .wh-tile > .wh-status { align-self: flex-start; }
.wh-tile__title { font-size: var(--sba-fs-subtitle); font-weight: 700; color: var(--sba-text-strong); }
.wh-tile__desc { font-size: var(--sba-fs-small); margin: 0; }
.wh-tile__meta {
  display: flex; gap: var(--sba-space-2); flex-wrap: wrap; align-items: center;
  margin-top: auto; padding-top: var(--sba-space-3);
  font-size: var(--sba-fs-caption); color: var(--sba-text);
}
.wh-tile__arrow { margin-left: auto; color: var(--sba-navy); font-weight: 800; }

/* Portal é destino externo. A distinção não é decoração: o domínio
   ganha peso porque é o que o cliente confere antes de sair do hub. */
.wh-tile--portal .wh-tile__meta { color: var(--sba-text-strong); font-weight: 700; }

/* ------------------------------------------------------------
   8. PESSOAS DO TIME SBA
   ------------------------------------------------------------ */
.wh-person {
  display: flex; gap: var(--sba-space-3); background: var(--sba-white);
  border: 1px solid var(--sba-border); border-radius: var(--sba-radius-md);
  padding: var(--sba-space-4);
}
.wh-person__avatar {
  width: 56px; height: 56px; flex: none; border-radius: var(--sba-radius-md);
  display: grid; place-items: center; background: var(--sba-grad-velocidade);
  color: var(--sba-white); font-weight: 800; font-size: var(--sba-fs-subtitle);
}
.wh-person__role {
  font-size: var(--sba-fs-caption); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sba-text);
}
.wh-person__name {
  font-size: var(--sba-fs-subtitle); font-weight: 700; color: var(--sba-text-strong);
  margin: 2px 0 var(--sba-space-2);
}
.wh-person__contact { font-size: var(--sba-fs-small); display: grid; gap: 4px; }
.wh-person__contact a { word-break: break-word; }

/* ------------------------------------------------------------
   9. ETAPAS — PRIMEIROS PASSOS
   ------------------------------------------------------------ */
.wh-steps { display: grid; gap: var(--sba-space-4); }
.wh-step {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--sba-space-4);
  background: var(--sba-white); border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md); padding: var(--sba-space-4);
}
/* Cubo verde com o número em navy. Verde sobre branco dá 2,3:1 e
   reprova até no limiar de texto grande; navy sobre verde dá 6,9:1
   e é o par aprovado do manual. */
.wh-step__num {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--sba-green); color: var(--sba-text-on-green);
  border-radius: var(--sba-radius-sm);
  font-family: var(--sba-font-display); font-size: 1.75rem; line-height: 1;
  letter-spacing: 0.02em;
}
.wh-step:not(.wh-step--done):not(.wh-step--now) .wh-step__num {
  background: var(--sba-bg-alt); color: var(--sba-navy);
  box-shadow: inset 0 0 0 1px var(--sba-border);
}
.wh-step--done { border-left: 3px solid var(--sba-green); }
.wh-step--now { border-left: 3px solid var(--sba-teal); box-shadow: var(--sba-shadow-md); }
.wh-step h3 { margin-bottom: var(--sba-space-2); }
/* Marcador quadrado: o cubo da marca no lugar do bullet redondo. */
.wh-step ul { margin: 0 0 var(--sba-space-3); padding-left: var(--sba-space-4);
              font-size: var(--sba-fs-small); list-style: square; }
.wh-step li { margin-bottom: 4px; }
.wh-step li::marker { color: var(--sba-navy); }
.wh-step p { font-size: var(--sba-fs-small); }

/* ------------------------------------------------------------
   10. TABELAS — CHAMADOS E DOWNLOADS
   ------------------------------------------------------------ */
.wh-table-wrap {
  /* `position: relative` não é decoração: a <caption class="wh-sr"> é
     absoluta e, sem um ancestral posicionado, seu bloco contêiner vira
     o viewport. Ela então escapa desta caixa de rolagem — parada na
     largura da tabela, bem à direita — e estica o documento inteiro na
     horizontal no mobile. Ancorada aqui, fica presa ao scroll da tabela. */
  position: relative;
  overflow-x: auto; border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md); background: var(--sba-white);
}
.wh-table { width: 100%; border-collapse: collapse; font-size: var(--sba-fs-small); }
.wh-table th {
  text-align: left; padding: var(--sba-space-3) var(--sba-space-4);
  background: var(--sba-bg-alt); border-bottom: 1px solid var(--sba-border);
  font-size: var(--sba-fs-caption); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sba-text-strong); white-space: nowrap;
}
.wh-table td {
  padding: var(--sba-space-3) var(--sba-space-4);
  border-bottom: 1px solid var(--sba-border); vertical-align: top;
}
.wh-table tr:last-child td { border-bottom: 0; }
.wh-table tbody tr:hover { background: var(--sba-bg-alt); }
.wh-table__id { font-weight: 700; color: var(--sba-text-strong); white-space: nowrap; }

/* A severidade é a dimensão pela qual se triam chamados, e estava em
   cinza de 14px enquanto "Situação" ganhava etiqueta colorida. Ganha
   peso — sem virar uma segunda etiqueta competindo com a primeira. */
.wh-table td[data-rotulo="Severidade"] {
  font-weight: 800;
  font-size: var(--sba-fs-body);
  color: var(--sba-text-strong);
  white-space: nowrap;
}

/* Etiquetas de estado. Todas com texto navy — nunca branco sobre verde. */
.wh-status {
  display: inline-block; padding: 4px var(--sba-space-2);
  border-radius: var(--sba-radius-sm); font-size: var(--sba-fs-caption);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; color: var(--sba-navy); background: var(--sba-bg-alt);
  border: 1px solid var(--sba-border);
}
.wh-status--resolvido { background: var(--sba-green); border-color: var(--sba-green); }
.wh-status--voce { background: var(--sba-yellow); border-color: var(--sba-yellow); }
.wh-status--andamento {
  background: var(--sba-white); border-color: var(--sba-teal);
  box-shadow: inset 3px 0 0 var(--sba-teal);
}
.wh-status--fechado { background: var(--sba-white); border-color: var(--sba-border); color: var(--sba-text); }

/* ------------------------------------------------------------
   11. FILTROS E BUSCA
   ------------------------------------------------------------ */
.wh-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sba-space-3);
  align-items: center; margin-bottom: var(--sba-space-4);
}
.wh-search { flex: 1; min-width: 240px; }
.wh-field {
  width: 100%; padding: 12px var(--sba-space-3);
  border: 1px solid var(--sba-border); border-radius: var(--sba-radius-md);
  background: var(--sba-white); color: var(--sba-text-strong);
  font: inherit; font-size: var(--sba-fs-body);
  transition: border-color var(--sba-dur-fast) var(--sba-ease);
}
.wh-field::placeholder { color: var(--sba-text); }
.wh-field:focus { outline: 2px solid var(--sba-navy); outline-offset: 1px; border-color: var(--sba-navy); }
.wh-field[aria-invalid="true"] { border-color: var(--sba-navy); box-shadow: inset 0 0 0 1px var(--sba-navy); }

.wh-chips { display: flex; flex-wrap: wrap; gap: var(--sba-space-2); }
.wh-chip {
  padding: 8px var(--sba-space-3); border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-sm); background: var(--sba-white);
  color: var(--sba-text-strong); font: inherit; font-size: var(--sba-fs-small);
  font-weight: 700; cursor: pointer;
  transition: background var(--sba-dur-fast) var(--sba-ease),
              border-color var(--sba-dur-fast) var(--sba-ease);
}
.wh-chip:hover { border-color: var(--sba-navy); }
.wh-chip[aria-pressed="true"] {
  background: var(--sba-green); border-color: var(--sba-green);
  color: var(--sba-text-on-green);
}
.wh-chip:focus-visible { outline: 2px solid var(--sba-navy); outline-offset: 2px; }

.wh-empty {
  padding: var(--sba-space-6); text-align: center; color: var(--sba-text);
  border: 1px dashed var(--sba-border); border-radius: var(--sba-radius-md);
}
/* Centralizado, mas com medida: sem isto a linha ia a 900px no
   desktop, justamente num bloco feito para ser lido de relance. */
.wh-empty p { max-width: 56ch; margin-inline: auto; }

/* ------------------------------------------------------------
   12. VÍDEOS
   ------------------------------------------------------------ */
.wh-video__thumb {
  position: relative; aspect-ratio: 16 / 9;
  margin: calc(-1 * var(--sba-space-4)) calc(-1 * var(--sba-space-4)) var(--sba-space-3);
  border-radius: var(--sba-radius-md) var(--sba-radius-md) 0 0;
}
.wh-video__play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.wh-video__play span {
  display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--sba-green); color: var(--sba-navy);
  border-radius: var(--sba-radius-md);
}
.wh-video__time {
  position: absolute; right: var(--sba-space-2); bottom: var(--sba-space-2); z-index: 2;
  background: var(--sba-navy); color: var(--sba-white);
  padding: 2px var(--sba-space-2); border-radius: var(--sba-radius-sm);
  font-size: var(--sba-fs-caption); font-weight: 700;
}
.wh-video__featured {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sba-space-6);
  align-items: center; background: var(--sba-bg-dark);
  border-radius: var(--sba-radius-lg); padding: var(--sba-space-6);
}
.wh-video__featured h2, .wh-video__featured h3 { color: var(--sba-white); }
.wh-video__featured p { color: var(--sba-light-gray); }
.wh-video__capa {
  display: block; position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--sba-radius-md); overflow: hidden;
  transition: box-shadow var(--sba-dur-base) var(--sba-ease);
}
.wh-video__capa:hover { box-shadow: 0 0 0 3px var(--sba-green); }
.wh-video__capa:focus-visible { outline: 2px solid var(--sba-green); outline-offset: 3px; }

/* ------------------------------------------------------------
   13. ARTIGO — O PDF VIRADO EM PÁGINA
   ------------------------------------------------------------ */
.wh-article { display: grid; grid-template-columns: 1fr 240px; gap: var(--sba-space-7); align-items: start; }
/* O mínimo automático de um item de grid é o min-content dele, e o
   min-content das tabelas (cabeçalho com white-space: nowrap) estava
   esticando a coluna para 592px numa viewport de 360. */
.wh-article__body { min-width: 0; }
.wh-article__body > * { max-width: min(var(--sba-measure), 100%); }
.wh-article__body h2 { margin-top: var(--sba-space-6); scroll-margin-top: 96px; }
.wh-article__body h3 { margin-top: var(--sba-space-5); }
.wh-article__body ul, .wh-article__body ol { max-width: var(--sba-measure); padding-left: var(--sba-space-4); }
.wh-article__body ul { list-style: square; }
.wh-article__body li { margin-bottom: var(--sba-space-2); }
.wh-article__body li::marker { color: var(--sba-navy); }

.wh-toc {
  position: sticky; top: calc(var(--wh-topbar) + var(--sba-space-4));
  border-left: 2px solid var(--sba-border); padding-left: var(--sba-space-3);
}
.wh-toc__label {
  font-size: var(--sba-fs-caption); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sba-text); margin-bottom: var(--sba-space-2);
}
.wh-toc a { display: block; padding: 6px 0; font-size: var(--sba-fs-small); text-decoration: none; color: var(--sba-text); }
.wh-toc a:hover { color: var(--sba-navy); text-decoration: underline; }

.wh-callout {
  border-left: 3px solid var(--sba-teal); background: var(--sba-bg-alt);
  padding: var(--sba-space-4); border-radius: 0 var(--sba-radius-md) var(--sba-radius-md) 0;
  margin: var(--sba-space-5) 0; max-width: var(--sba-measure);
}
.wh-callout--alerta { border-left-color: var(--sba-navy); background: var(--sba-yellow); }
.wh-callout--alerta p, .wh-callout--alerta strong { color: var(--sba-navy); }
.wh-callout p:last-child { margin-bottom: 0; }

.wh-def {
  border: 1px solid var(--sba-border); border-radius: var(--sba-radius-md);
  overflow: hidden; margin: var(--sba-space-4) 0; max-width: var(--sba-measure);
}
.wh-def summary {
  padding: var(--sba-space-3) var(--sba-space-4); background: var(--sba-bg-alt);
  font-weight: 700; color: var(--sba-text-strong); cursor: pointer;
}
.wh-def[open] summary { border-bottom: 1px solid var(--sba-border); }
.wh-def__body { padding: var(--sba-space-4); }
.wh-def__body p:last-child { margin-bottom: 0; }
.wh-def__body p { max-width: none; }

.wh-origem {
  display: flex; flex-wrap: wrap; gap: var(--sba-space-3); align-items: center;
  justify-content: space-between; border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md); background: var(--sba-bg-alt);
  padding: var(--sba-space-3) var(--sba-space-4); margin-bottom: var(--sba-space-6);
  font-size: var(--sba-fs-small); max-width: none;
}

/* ------------------------------------------------------------
   14. LOGIN
   ------------------------------------------------------------ */
body.wh-login { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100vh; }

/* ---- Fundo de destaque: assets/keyvisuais/background-clean.png ----
   Navy com aurora verde subindo e malha de cubos embutida.

   REGRA DE USO — a metade de baixo não sustenta texto.
   Medido no arquivo, pior caso de branco sobre o fundo, por faixa
   horizontal: 0–50% fica entre 10,0:1 e 5,4:1 (passa em AA);
   50–60% cai para 2,8:1; da linha 60% para baixo vai a 1,3:1 no
   pico do brilho. Por isso todo texto vive na METADE DE CIMA e a
   parte inferior fica livre para o brilho aparecer.

   O arquivo já traz a própria malha de cubos — não some .sba-cubes
   por cima, as duas grades brigam. */
.wh-destaque {
  background-color: var(--sba-bg-dark);
  background-image: url('../vendor/background-clean.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.wh-login__aside {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sba-space-6);
  padding: var(--sba-space-7);
  overflow: hidden;
}
.wh-login__band { align-self: flex-start; }
.wh-login__logo { display: block; height: 36px; width: auto; }
/* Trava o bloco de texto na metade de cima, onde o fundo passa em AA. */
.wh-login__copy { max-width: 34ch; }
.wh-login__copy { position: relative; z-index: 1; }
.wh-login__claim {
  font-family: var(--sba-font-display); font-size: var(--sba-fs-display);
  line-height: var(--sba-lh-display); letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--sba-white); margin: 0 0 var(--sba-space-3);
}
.wh-login__sub { color: var(--sba-white); font-size: var(--sba-fs-subtitle); max-width: 40ch; margin: 0; }
.wh-login__foot {
  color: var(--sba-white); font-size: var(--sba-fs-small);
  margin: var(--sba-space-5) 0 0; max-width: 40ch;
}

.wh-login__panel { display: grid; place-items: center; padding: var(--sba-space-7); background: var(--sba-bg); }
.wh-form { width: 100%; max-width: 400px; }
.wh-form__group { margin-bottom: var(--sba-space-4); }
.wh-label { display: block; font-size: var(--sba-fs-small); font-weight: 700; color: var(--sba-text-strong); margin-bottom: var(--sba-space-2); }
.wh-hint { font-size: var(--sba-fs-small); margin: var(--sba-space-2) 0 0; }
.wh-form .sba-btn { width: 100%; justify-content: center; }

.wh-alert {
  display: none; border-left: 3px solid var(--sba-navy); background: var(--sba-yellow);
  color: var(--sba-navy); padding: var(--sba-space-3) var(--sba-space-4);
  border-radius: 0 var(--sba-radius-md) var(--sba-radius-md) 0;
  font-size: var(--sba-fs-small); margin-bottom: var(--sba-space-4);
}
.wh-alert[data-visivel="true"] { display: block; }
.wh-alert p { margin: 0; color: var(--sba-navy); max-width: none; }
.wh-alert p + p { margin-top: var(--sba-space-2); }
.wh-alert strong { color: var(--sba-navy); }

/* Aviso de protótipo — precisa ser impossível de confundir com produção.
   Na topbar ele carrega junto o seletor de estado da conta, para que
   o andaime fique todo dentro do mesmo bloco amarelo em vez de se
   misturar com controles reais. */
.wh-demo {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--sba-radius-sm);
  background: var(--sba-yellow);
}
.wh-demo__tag {
  padding: 2px var(--sba-space-2);
  color: var(--sba-navy);
  font-size: var(--sba-fs-caption); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.wh-demo__sel {
  border: 0; border-radius: var(--sba-radius-sm);
  background: var(--sba-navy); color: var(--sba-white);
  font: inherit; font-size: var(--sba-fs-caption); font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px var(--sba-space-2);
  cursor: pointer;
}
.wh-demo__sel:focus-visible { outline: 2px solid var(--sba-navy); outline-offset: 2px; }

/* Barra de contexto do time SBA. Precisa ser impossível confundir
   com a conta própria: quem está aqui está vendo o hub de OUTRA
   empresa e qualquer ação sua tem consequência para ela. */
.wh-contexto {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sba-space-3);
  padding: var(--sba-space-3) var(--sba-space-6);
  background: var(--sba-navy); color: var(--sba-white);
  border-bottom: 3px solid var(--sba-green);
}
.wh-contexto__rotulo {
  font-size: var(--sba-fs-caption); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sba-green);
}
.wh-contexto__cliente { font-size: var(--sba-fs-subtitle); font-weight: 700; }
.wh-contexto__sel {
  border: 1px solid var(--sba-light-gray); border-radius: var(--sba-radius-sm);
  background: transparent; color: var(--sba-white);
  font: inherit; font-size: var(--sba-fs-small); font-weight: 700;
  padding: 6px var(--sba-space-2); cursor: pointer;
}
.wh-contexto__sel option { color: var(--sba-navy); }
.wh-contexto__sel:focus-visible { outline: 2px solid var(--sba-green); outline-offset: 2px; }
.wh-contexto__nota { margin-left: auto; font-size: var(--sba-fs-small); color: var(--sba-light-gray); }

/* ------------------------------------------------------------
   15. PRIMEIRO ACESSO E ESTADOS VAZIOS

   O hub é um produto de boas-vindas: para todo cliente, a primeira
   tela é uma conta sem histórico nenhum. Estas classes desenham
   esse dia 1 em vez de deixar buraco onde depois haverá dado.
   ------------------------------------------------------------ */

.wh-icon--sm { width: 16px; height: 16px; }
.wh-icon--lg { width: 24px; height: 24px; }

/* ---- Faixa de boas-vindas -------------------------------------
   Dispensável e não modal: onboarding não bloqueia o produto. */
.wh-boasvindas {
  position: relative;
  background-color: var(--sba-bg-dark);
  border-radius: var(--sba-radius-lg);
  padding: var(--sba-space-6);
  color: var(--sba-text-on-dark);
  /* Corpo e foto lado a lado; as trilhas atravessam os dois. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    "corpo   foto"
    "trilhas trilhas";
  column-gap: var(--sba-space-6);
  overflow: hidden;
}
.wh-boasvindas__corpo { grid-area: corpo; min-width: 0; }
.wh-boasvindas h1 { color: var(--sba-white); margin-bottom: var(--sba-space-3); }
.wh-boasvindas__corpo > p { color: var(--sba-light-gray); max-width: var(--sba-measure); }

/* Corte reto vertical: a foto sangra até as bordas do painel em vez de
   flutuar como um card dentro dele. É o que faz o key visual funcionar —
   o corte é reto, não arredondado por dentro. */
.wh-boasvindas__foto {
  grid-area: foto;
  margin: calc(-1 * var(--sba-space-6)) calc(-1 * var(--sba-space-6))
          calc(-1 * var(--sba-space-6)) 0;
  min-height: 260px;
}

/* Fica no fluxo, no fim do bloco. Absoluto no canto superior direito
   cairia em cima da foto, e texto claro sobre a área clara do duotone
   não sustenta contraste. */
.wh-dispensar {
  justify-self: start; margin-top: var(--sba-space-5);
  border: 0; background: transparent; color: var(--sba-light-gray);
  font: inherit; font-size: var(--sba-fs-small); font-weight: 700;
  padding: var(--sba-space-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.wh-dispensar:hover { color: var(--sba-white); }
.wh-dispensar:focus-visible { outline: 2px solid var(--sba-green); outline-offset: 2px; }

/* ---- Onde você está -------------------------------------------
   A resposta que o primeiro acesso precisa dar. O trilho segmentado
   dá a posição num relance; o rótulo dá o nome da etapa. */
.wh-progresso { margin: var(--sba-space-5) 0; max-width: 560px; }
.wh-progresso__rotulo {
  font-size: var(--sba-fs-small); font-weight: 700; color: var(--sba-white);
  margin: 0 0 var(--sba-space-2); max-width: none;
}
.wh-progresso__trilho { display: flex; gap: var(--sba-space-2); }
.wh-progresso__seg {
  flex: 1; height: 10px; border-radius: var(--sba-radius-sm);
  background: rgba(255, 255, 255, 0.22);
}
.wh-progresso__seg--feito { background: var(--sba-green); }
.wh-progresso__seg--agora {
  background: var(--sba-white);
  box-shadow: 0 0 0 3px rgba(0, 195, 137, 0.45);
}
.wh-progresso__nota {
  margin: var(--sba-space-3) 0 0; color: var(--sba-light-gray);
  font-size: var(--sba-fs-small); max-width: var(--sba-measure);
}

/* ---- Bifurcação por papel -------------------------------------
   Entram um técnico e um gestor, com necessidades opostas. Duas
   portas reais, não um assistente de passos. */
.wh-trilhas {
  grid-area: trilhas;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sba-space-3); margin-top: var(--sba-space-6);
}
.wh-trilha {
  display: flex; flex-direction: column; gap: var(--sba-space-2);
  padding: var(--sba-space-4);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--sba-radius-md);
  text-decoration: none; color: var(--sba-white);
  transition: border-color var(--sba-dur-base) var(--sba-ease),
              background var(--sba-dur-base) var(--sba-ease),
              transform var(--sba-dur-fast) var(--sba-ease);
}
.wh-trilha:hover {
  border-color: var(--sba-green); background: rgba(0, 195, 137, 0.12);
  color: var(--sba-white); transform: translateY(-2px);
}
.wh-trilha:focus-visible { outline: 2px solid var(--sba-green); outline-offset: 2px; }
.wh-trilha__titulo {
  display: flex; align-items: center; gap: var(--sba-space-2);
  font-size: var(--sba-fs-subtitle); font-weight: 700; color: var(--sba-white);
}
.wh-trilha__titulo .wh-icon { margin-left: auto; color: var(--sba-green); }
.wh-trilha p {
  margin: 0; color: var(--sba-light-gray); font-size: var(--sba-fs-small);
  max-width: none;
}

/* ---- Primeiro uso ---------------------------------------------
   Distinto do "a busca não achou nada" (.wh-empty, tracejado):
   aqui não existe nada ainda, e isso é normal. Diz o que vai
   aparecer, por que importa, e o que fazer agora. */
.wh-vazio {
  display: grid; justify-items: start; gap: var(--sba-space-3);
  background: var(--sba-white);
  border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md);
  padding: var(--sba-space-7) var(--sba-space-6);
}
.wh-vazio__marca {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--sba-bg-alt); border-radius: var(--sba-radius-sm);
  color: var(--sba-dark-gray);
}
.wh-vazio__marca .wh-icon { width: 28px; height: 28px; }
.wh-vazio h3 { margin: 0; }
.wh-vazio p { margin: 0; max-width: 56ch; }
.wh-vazio__acoes {
  display: flex; flex-wrap: wrap; gap: var(--sba-space-3);
  margin-top: var(--sba-space-2);
}
.wh-vazio__ajuda {
  margin-top: var(--sba-space-3); padding-top: var(--sba-space-3);
  border-top: 1px solid var(--sba-border);
  font-size: var(--sba-fs-small); color: var(--sba-text);
  width: 100%; max-width: none;
}

/* Quando ainda não há dado, o painel de números viraria uma fileira
   de zeros. Melhor dizer o que vai medir e a partir de quando. */
.wh-previsto {
  border: 1px dashed var(--sba-border);
  border-radius: var(--sba-radius-md);
  padding: var(--sba-space-4);
  background: transparent;
}
.wh-previsto__label {
  font-size: var(--sba-fs-caption); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sba-text); margin: 0 0 var(--sba-space-2);
}
.wh-previsto__valor {
  font-family: var(--sba-font-display); font-size: 1.5rem; line-height: 1;
  color: var(--sba-dark-gray); letter-spacing: 0.02em;
}
.wh-previsto__nota { font-size: var(--sba-fs-small); margin: var(--sba-space-2) 0 0; }

/* ------------------------------------------------------------
   16. BARRA DE PLANTÃO (mobile)
   O produto repete quatro vezes que "produção parada é telefone".
   Esconder o telefone no aparelho em que a pessoa está durante o
   incidente custa minutos de SLA. Fica fixa na zona do polegar.
   ------------------------------------------------------------ */
.wh-plantao { display: none; }

@media (max-width: 900px) {
  .wh-plantao {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: center; justify-content: center;
    gap: var(--sba-space-2); flex-wrap: wrap;
    min-height: 56px;
    padding: var(--sba-space-2) var(--sba-space-4);
    padding-bottom: max(var(--sba-space-2), env(safe-area-inset-bottom));
    background: var(--sba-green);
    color: var(--sba-text-on-green);
    text-decoration: none;
    box-shadow: 0 -2px 12px rgba(0, 32, 80, 0.18);
  }
  .wh-plantao:hover { color: var(--sba-text-on-green); }
  .wh-plantao:focus-visible { outline: 2px solid var(--sba-navy); outline-offset: -4px; }
  .wh-plantao__rotulo {
    font-size: var(--sba-fs-caption); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .wh-plantao__numero { font-size: var(--sba-fs-body); font-weight: 800; }

  /* Espaço para a barra não cobrir o fim do conteúdo. */
  .wh-content { padding-bottom: calc(56px + var(--sba-space-6)); }
}

/* ------------------------------------------------------------
   17. UTILITÁRIOS
   ------------------------------------------------------------ */
.wh-muted { color: var(--sba-text); }
.wh-strong { color: var(--sba-text-strong); }
.wh-small { font-size: var(--sba-fs-small); }
.wh-flow > * + * { margin-top: var(--sba-space-3); }
.wh-row { display: flex; flex-wrap: wrap; gap: var(--sba-space-3); align-items: center; }
.wh-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wh-skip {
  position: absolute; left: var(--sba-space-3); top: -64px; z-index: 20;
  background: var(--sba-green); color: var(--sba-text-on-green);
  padding: var(--sba-space-2) var(--sba-space-3); border-radius: var(--sba-radius-md);
  font-weight: 700; text-decoration: none;
}
.wh-skip:focus { top: var(--sba-space-3); }

/* ------------------------------------------------------------
   18. RESPONSIVO E IMPRESSÃO
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .wh-article { grid-template-columns: 1fr; }
  .wh-toc { position: static; }
  .wh-video__featured { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  body.wh-app { grid-template-columns: 1fr; }
  .wh-sidebar { position: static; height: auto; }
  .wh-nav { display: flex; overflow-x: auto; padding: 0; min-width: 0; }
  .wh-nav__label { display: none; }
  .wh-nav__item { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .wh-nav__item[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--sba-green); }
  .wh-sidebar__foot { display: none; }
  .wh-content { padding: var(--sba-space-4); }

  /* ---- Dieta de cromo ----------------------------------------
     Numa tela de 812px, marca + nav + topbar comiam ~670px antes
     do conteúdo. Aqui tudo que é redundante encolhe ou sai: o
     título da topbar repete o item ativo da nav, que está logo
     acima; o logo não precisa de 32px; e o seletor de protótipo é
     andaime, não conteúdo. */
  .wh-sidebar__brand {
    display: flex; align-items: center; gap: var(--sba-space-3);
    padding: var(--sba-space-3) var(--sba-space-4);
  }
  .wh-sidebar__logo { height: 22px; }
  .wh-sidebar__product { margin-top: 0; font-size: var(--sba-fs-small); }

  .wh-topbar {
    flex-wrap: wrap; gap: var(--sba-space-2);
    min-height: 0;
    padding: var(--sba-space-2) var(--sba-space-4);
  }
  .wh-topbar__title { display: none; }
  .wh-topbar__spacer { flex: 1; }
  .wh-account { border-left: 0; padding-left: 0; }
  .wh-account__meta { display: none; }
  .wh-avatar { width: 32px; height: 32px; }
  /* O aviso de protótipo fica: é o que impede confundir o ambiente
     com produção. Encolhe, não some. */
  /* Os dois select somados não cabem numa linha de 312px úteis:
     o grupo quebra dentro da própria faixa amarela. */
  .wh-demo { padding: 2px; flex-wrap: wrap; max-width: 100%; }
  .wh-demo__tag { padding: 2px var(--sba-space-2); }
  .wh-demo__sel { min-width: 0; max-width: 100%; }
  .wh-nav__item { padding: var(--sba-space-3); }
  /* No estreito o corte reto vira horizontal: a foto sobe para uma
     faixa no topo, como na tela de entrada. */
  .wh-boasvindas {
    padding: var(--sba-space-5);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "foto" "corpo" "trilhas";
  }
  .wh-boasvindas__foto {
    min-height: 0; height: 160px;
    margin: calc(-1 * var(--sba-space-5)) calc(-1 * var(--sba-space-5))
            var(--sba-space-5) calc(-1 * var(--sba-space-5));
  }
  .wh-dispensar { display: block; margin-top: var(--sba-space-4); padding-left: 0; }
  .wh-vazio { padding: var(--sba-space-6) var(--sba-space-4); }
  body.wh-login { grid-template-columns: 1fr; }
  .wh-login__aside { padding: var(--sba-space-5); gap: var(--sba-space-5); }
  /* No estreito o painel fica baixo (~460px) e o texto cairia em cima
     do brilho: medido, o subtítulo dava 2,4:1 e o rodapé 1,6:1.
     `auto 200%` mostra só a METADE DE CIMA da arte — a faixa que
     passa em AA — e deixa o brilho fora de quadro. O gradiente é
     tratamento de tela larga. */
  .wh-destaque { background-size: auto 200%; background-position: center top; }
  .wh-login__panel { padding: var(--sba-space-5); }
  .wh-step { grid-template-columns: 48px 1fr; gap: var(--sba-space-3); }
  .wh-step__num { width: 48px; height: 48px; font-size: 1.5rem; }
}
/* ---- Ponteiro grosso: alvos de toque -----------------------------
   A consulta é de ponteiro, não de largura: um notebook com tela
   sensível ao toque precisa dos mesmos 44px que um celular, e um
   desktop estreito não precisa. Aqui só cresce a área clicável;
   nada muda de tamanho de texto ou de cor. */
@media (pointer: coarse) {
  .wh-person__contact a,
  .wh-sidebar__foot a,
  .wh-vazio__ajuda a,
  .wh-toc a,
  .wh-section__head a,
  .wh-hint a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
  .wh-toc a { padding-block: 0; }
  .wh-chip { min-height: 44px; }
  .wh-baixar { min-height: 44px; padding-block: 0; }
  .wh-logout { min-height: 44px; min-width: 44px; }
  .wh-demo__opt { min-height: 44px; }
  .wh-dispensar { min-height: 44px; }
  .wh-field { min-height: 44px; }
  /* Sem hover confiável no toque: o realce vira o estado ativo. */
  .wh-tile:hover, .wh-trilha:hover { transform: none; }
  .wh-tile:active { border-color: var(--sba-green); }
}

/* ---- Tabela vira lista de cards no estreito ---------------------
   Rolagem horizontal escondia justamente as colunas que carregam a
   decisão: o botão "Baixar" em Downloads e Sev./Situação/Prazo em
   Chamados ficavam fora da tela. Cada linha vira um card e cada
   célula ganha seu rótulo de volta via data-rotulo. */
@media (max-width: 900px) {
  .wh-table--cards { display: block; }
  .wh-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wh-table--cards tbody,
  .wh-table--cards tr,
  .wh-table--cards td { display: block; width: 100%; }
  .wh-table--cards tr {
    padding: var(--sba-space-3) 0;
    border-bottom: 1px solid var(--sba-border);
  }
  .wh-table--cards tr:last-child { border-bottom: 0; }
  .wh-table--cards tbody tr:hover { background: transparent; }
  .wh-table--cards td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--sba-space-3);
    align-items: baseline;
    padding: var(--sba-space-2) var(--sba-space-4);
    border-bottom: 0;
    white-space: normal;
  }
  .wh-table--cards td::before {
    content: attr(data-rotulo);
    font-size: var(--sba-fs-caption); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--sba-text);
  }
  /* A célula-título do card não precisa repetir o rótulo. */
  .wh-table--cards td[data-rotulo=""] { grid-template-columns: minmax(0, 1fr); }
  .wh-table--cards td[data-rotulo=""]::before { content: none; }
  /* Sem isto, um selo curto (o "PDF") estica pela coluna inteira e
     passa a parecer botão. */
  .wh-table--cards td > * { justify-self: start; }
  /* A ação principal é a exceção: largura total, na zona do polegar. */
  .wh-table--cards .wh-baixar {
    justify-self: stretch; width: 100%; justify-content: center;
  }
  /* O contêiner deixa de rolar: não há mais nada fora da tela. */
  .wh-table--cards { min-width: 0; }
}

@media print {
  .wh-sidebar, .wh-topbar, .wh-toolbar, .wh-toc, .wh-skip, .wh-plantao { display: none; }
  body.wh-app { display: block; background: var(--sba-white); }
  .wh-content { padding: 0; }
  .wh-article { grid-template-columns: 1fr; }
}

/* ============================================================
   19. TRILHA DE ROTINAS

   Os seis documentos que a SBA entrega ao cliente viraram páginas
   numa sequência: portal -> usuários -> rotina do serviço -> o que
   fazer quando algo dá errado. A trilha é o que transforma seis
   páginas soltas num percurso: o cliente sempre sabe em que
   documento está, quantos faltam e qual é o próximo.
   ============================================================ */

/* Diagramas e mapas precisam da largura toda; o corpo do artigo
   limita tudo à medida de leitura por padrão, e com razão. */
.wh-article__body > .wh-largo,
.wh-largo { max-width: none; }

/* ---- Cabeçalho da trilha --------------------------------------
   Posição na sequência mais o passo seguinte, antes do conteúdo. */
.wh-percurso {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sba-space-3) var(--sba-space-4);
  padding: var(--sba-space-3) var(--sba-space-4);
  background: var(--sba-bg-alt);
  border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md);
  margin-bottom: var(--sba-space-5);
}
.wh-percurso__pos {
  font-size: var(--sba-fs-caption); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sba-text-strong); white-space: nowrap;
}
.wh-percurso__trilho { display: flex; gap: 4px; flex: 1; min-width: 120px; }
.wh-percurso__seg {
  flex: 1; height: 6px; border-radius: var(--sba-radius-sm);
  background: var(--sba-light-gray);
}
.wh-percurso__seg--feito { background: var(--sba-green); }
.wh-percurso__seg--agora { background: var(--sba-navy); }
.wh-percurso__links {
  display: flex; gap: var(--sba-space-4);
  font-size: var(--sba-fs-small); font-weight: 700;
}

/* ---- Rodapé da trilha ------------------------------------------
   Anterior e próximo como destinos de verdade, com o nome do
   documento, não duas setas sem contexto. */
.wh-adiante {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sba-space-4);
  margin-top: var(--sba-space-7);
  padding-top: var(--sba-space-5);
  border-top: 2px solid var(--sba-navy);
}
.wh-adiante__item {
  display: flex; flex-direction: column; gap: var(--sba-space-1);
  padding: var(--sba-space-4);
  border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md);
  background: var(--sba-white);
  text-decoration: none;
  transition: border-color var(--sba-dur-base) var(--sba-ease),
              box-shadow var(--sba-dur-base) var(--sba-ease);
}
.wh-adiante__item:hover { border-color: var(--sba-navy); box-shadow: var(--sba-shadow-md); }
.wh-adiante__item:focus-visible { outline: 2px solid var(--sba-navy); outline-offset: 2px; }
.wh-adiante__rotulo {
  font-size: var(--sba-fs-caption); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sba-text);
}
.wh-adiante__titulo {
  font-size: var(--sba-fs-subtitle); font-weight: 700; color: var(--sba-text-strong);
}
.wh-adiante__desc { font-size: var(--sba-fs-small); margin: 0; }
.wh-adiante__item--fim { background: var(--sba-bg-alt); }

/* ---- Índice da trilha (página Documentação) --------------------
   Numerada porque a ordem carrega informação: é a sequência em que
   o cliente aprende. Etapas agrupam o percurso em três blocos com
   sentidos diferentes. */
.wh-etapa { margin-top: var(--sba-space-6); }
.wh-etapa__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sba-space-3); margin-bottom: var(--sba-space-4);
  padding-bottom: var(--sba-space-2);
  border-bottom: 2px solid var(--sba-navy);
}
.wh-etapa__num {
  font-family: var(--sba-font-display); font-size: 1.5rem; line-height: 1;
  color: var(--sba-navy); letter-spacing: 0.04em;
}
.wh-etapa__nome { margin: 0; font-size: var(--sba-fs-headline); }
.wh-etapa__nota { margin: 0 0 0 auto; font-size: var(--sba-fs-small); color: var(--sba-text); }

.wh-doc {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--sba-space-4);
  align-items: start;
  padding: var(--sba-space-4);
  border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md);
  background: var(--sba-white);
  text-decoration: none;
  transition: border-color var(--sba-dur-base) var(--sba-ease),
              box-shadow var(--sba-dur-base) var(--sba-ease),
              transform var(--sba-dur-fast) var(--sba-ease);
}
.wh-doc:hover {
  border-color: var(--sba-navy); box-shadow: var(--sba-shadow-md);
  transform: translateY(-2px);
}
.wh-doc:focus-visible { outline: 2px solid var(--sba-navy); outline-offset: 2px; }
/* O cubo da marca como numeral: verde com número navy é o par
   aprovado (6,9:1). Verde com branco reprova e está banido. */
.wh-doc__num {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--sba-green); color: var(--sba-text-on-green);
  font-family: var(--sba-font-display); font-size: 1.75rem; line-height: 1;
  border-radius: var(--sba-radius-sm);
}
.wh-doc__titulo {
  display: block; font-size: var(--sba-fs-subtitle); font-weight: 700;
  color: var(--sba-text-strong); margin-bottom: var(--sba-space-2);
}
.wh-doc__desc { font-size: var(--sba-fs-small); margin: 0 0 var(--sba-space-3); }
.wh-doc__meta {
  display: flex; flex-wrap: wrap; gap: var(--sba-space-2) var(--sba-space-3);
  font-size: var(--sba-fs-caption); color: var(--sba-text);
  align-items: center;
}
.wh-doc__meta .wh-tile__arrow { margin-left: auto; }
.wh-doc__origem {
  font-family: var(--sba-font-docs); letter-spacing: 0;
  color: var(--sba-text); word-break: break-word;
}

/* ============================================================
   20. RECRIAÇÕES DE TELA E DIAGRAMAS

   Os PDFs originais são feitos de captura de tela. Captura de tela
   envelhece, não escala no celular, não é legível por leitor de
   tela e não é da marca. Aqui cada uma virou desenho: mesma
   informação, malha de 8px, cores de tokens.json, texto que é
   texto de verdade.
   ============================================================ */

/* ---- Moldura de tela ------------------------------------------- */
.wh-tela {
  border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md);
  background: var(--sba-white);
  overflow: hidden;
  box-shadow: var(--sba-shadow-sm);
}
.wh-tela__barra {
  display: flex; align-items: center; gap: var(--sba-space-2);
  padding: var(--sba-space-2) var(--sba-space-3);
  background: var(--sba-navy);
  border-bottom: 3px solid var(--sba-green);
}
.wh-tela__url {
  font-family: var(--sba-font-docs); font-size: var(--sba-fs-caption);
  color: var(--sba-white); word-break: break-all;
}
.wh-tela__legenda {
  padding: var(--sba-space-2) var(--sba-space-3);
  border-top: 1px solid var(--sba-border);
  background: var(--sba-bg-alt);
  font-size: var(--sba-fs-caption); color: var(--sba-text);
  margin: 0; max-width: none;
}

/* ---- Mapa do portal --------------------------------------------
   As 22 lâminas do PDF diziam, uma por vez, "na aba X você faz Y".
   Aqui as abas ficam todas à vista e a explicação troca no lugar:
   o cliente vê o menu inteiro de uma vez e explora na ordem que
   quiser. */
.wh-mapa {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md);
  overflow: hidden;
  background: var(--sba-white);
}
.wh-mapa__menu {
  background: var(--sba-navy);
  padding: var(--sba-space-3) 0;
  display: flex; flex-direction: column;
}
.wh-mapa__marca {
  padding: 0 var(--sba-space-3) var(--sba-space-3);
  margin-bottom: var(--sba-space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.wh-mapa__marca img { display: block; height: 20px; width: auto; }
.wh-mapa__quem {
  font-size: var(--sba-fs-caption); color: var(--sba-light-gray);
  margin: var(--sba-space-2) 0 0; max-width: none;
}
.wh-mapa__quem strong { color: var(--sba-white); display: block; }
.wh-mapa__grupo {
  font-size: var(--sba-fs-caption); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sba-green);
  padding: var(--sba-space-3) var(--sba-space-3) var(--sba-space-2);
  margin: 0; max-width: none;
}
.wh-mapa__aba {
  display: block; width: 100%; text-align: left;
  border: 0; border-left: 3px solid transparent;
  background: transparent; color: var(--sba-light-gray);
  font: inherit; font-size: var(--sba-fs-small);
  padding: var(--sba-space-2) var(--sba-space-3);
  cursor: pointer;
}
.wh-mapa__aba:hover { background: rgba(255, 255, 255, 0.07); color: var(--sba-white); }
.wh-mapa__aba:focus-visible { outline: 2px solid var(--sba-green); outline-offset: -2px; }
.wh-mapa__aba[aria-selected="true"] {
  background: rgba(0, 195, 137, 0.16);
  border-left-color: var(--sba-green);
  color: var(--sba-white); font-weight: 700;
}
.wh-mapa__painel { padding: var(--sba-space-5); }
.wh-mapa__painel h3 { margin: 0 0 var(--sba-space-2); }
.wh-mapa__painel p { max-width: 60ch; }
.wh-mapa__painel p:last-child { margin-bottom: 0; }
.wh-mapa__nivel {
  display: inline-block; margin-bottom: var(--sba-space-3);
  padding: 2px var(--sba-space-2);
  background: var(--sba-yellow); color: var(--sba-navy);
  font-size: var(--sba-fs-caption); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--sba-radius-sm);
}

/* ---- Matriz de comparação (N1 x N2) ----------------------------- */
.wh-matriz {
  display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md);
  overflow: hidden;
}
.wh-matriz__cel {
  padding: var(--sba-space-3);
  border-bottom: 1px solid var(--sba-border);
  font-size: var(--sba-fs-small);
  display: flex; align-items: center; gap: var(--sba-space-2);
}
.wh-matriz__cel:nth-child(3n) { border-right: 0; }
.wh-matriz__cel:not(:nth-child(3n)) { border-right: 1px solid var(--sba-border); }
.wh-matriz__cabeca {
  background: var(--sba-navy); color: var(--sba-white);
  font-weight: 700; border-bottom: 3px solid var(--sba-green);
  display: block;
}
.wh-matriz__cabeca small {
  display: block; font-weight: 400; color: var(--sba-light-gray);
  font-size: var(--sba-fs-caption);
}
.wh-matriz__cel--rotulo { font-weight: 700; color: var(--sba-text-strong); background: var(--sba-bg-alt); }
/* Sim e não desenhados, não glifo de fonte: quadrado verde cheio para
   "pode", contorno cinza para "não pode". Nunca cor sozinha: cada
   marca leva texto ao lado. */
.wh-marca {
  display: grid; place-items: center;
  width: 20px; height: 20px; flex: none;
  border-radius: var(--sba-radius-sm);
}
.wh-marca--sim { background: var(--sba-green); }
.wh-marca--nao { border: 2px solid var(--sba-light-gray); }
.wh-marca svg { width: 12px; height: 12px; }

/* ---- Campos de formulário --------------------------------------
   O que preencher, em texto, no lugar da captura do formulário. */
.wh-campos {
  display: grid; gap: 1px; background: var(--sba-border);
  border: 1px solid var(--sba-border); border-radius: var(--sba-radius-md);
  overflow: hidden;
}
.wh-campo {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sba-space-3);
  padding: var(--sba-space-3);
  background: var(--sba-white);
  font-size: var(--sba-fs-small);
}
.wh-campo__nome {
  font-weight: 700; color: var(--sba-text-strong);
  display: flex; align-items: baseline; gap: var(--sba-space-2); flex-wrap: wrap;
}
.wh-campo__obr {
  font-size: var(--sba-fs-caption); font-weight: 700;
  color: var(--sba-navy); background: var(--sba-yellow);
  padding: 1px 6px; border-radius: var(--sba-radius-sm);
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.wh-campo__ajuda { margin: 0; max-width: none; }

/* ---- Fluxo numerado --------------------------------------------
   Sequência com ordem obrigatória. Diferente de .wh-steps, que é a
   implantação; este é curto e cabe dentro de um artigo. */
.wh-fluxo { display: grid; gap: var(--sba-space-3); counter-reset: fluxo; }
.wh-fluxo__passo {
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--sba-space-3); align-items: start;
  padding: var(--sba-space-3) var(--sba-space-4) var(--sba-space-3) var(--sba-space-3);
  background: var(--sba-white);
  border: 1px solid var(--sba-border);
  border-left: 3px solid var(--sba-navy);
  border-radius: var(--sba-radius-md);
}
.wh-fluxo__passo::before {
  counter-increment: fluxo; content: counter(fluxo);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: var(--sba-navy); color: var(--sba-white);
  font-family: var(--sba-font-display); font-size: 1.25rem; line-height: 1;
  border-radius: var(--sba-radius-sm);
}
.wh-fluxo__corpo > :last-child { margin-bottom: 0; }
.wh-fluxo__corpo strong { color: var(--sba-text-strong); }
.wh-fluxo__corpo p { font-size: var(--sba-fs-small); max-width: 60ch; }

/* ---- Escada de escalonamento ------------------------------------
   Seis níveis, e a ordem é a informação: começa no NOC e sobe. */
.wh-escada {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sba-space-3);
}
.wh-degrau {
  display: flex; flex-direction: column; gap: var(--sba-space-2);
  padding: var(--sba-space-4);
  background: var(--sba-white);
  border: 1px solid var(--sba-border);
  border-top: 4px solid var(--sba-green);
  border-radius: var(--sba-radius-md);
}
.wh-degrau--noc { border-top-color: var(--sba-navy); background: var(--sba-bg-alt); }
.wh-degrau__nivel {
  align-self: flex-start;
  padding: 2px var(--sba-space-2);
  background: var(--sba-green); color: var(--sba-text-on-green);
  font-size: var(--sba-fs-caption); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--sba-radius-sm);
}
.wh-degrau--noc .wh-degrau__nivel { background: var(--sba-navy); color: var(--sba-white); }
.wh-degrau__topo { display: flex; align-items: center; gap: var(--sba-space-3); }
/* Iniciais no lugar da foto: as fotos do PDF são de pessoas reais e
   a marca tem um jeito próprio de representar time. Ver README. */
.wh-degrau__iniciais {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: none;
  background: var(--sba-navy); color: var(--sba-white);
  font-family: var(--sba-font-display); font-size: 1.25rem; line-height: 1;
  letter-spacing: 0.06em;
  border-radius: var(--sba-radius-sm);
}
.wh-degrau--noc .wh-degrau__iniciais { background: var(--sba-green); color: var(--sba-text-on-green); }
.wh-degrau__nome {
  font-size: var(--sba-fs-subtitle); font-weight: 700; color: var(--sba-text-strong);
  line-height: 1.2;
}
.wh-degrau__cargo { font-size: var(--sba-fs-caption); color: var(--sba-text); margin: 2px 0 0; max-width: none; }
.wh-degrau__contato { display: grid; gap: 2px; font-size: var(--sba-fs-small); }
.wh-degrau__contato a { word-break: break-word; }

/* ---- Lista de conferência --------------------------------------- */
.wh-conferir { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sba-space-2); }
.wh-conferir li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--sba-space-3); align-items: start;
  font-size: var(--sba-fs-small);
}
.wh-conferir li::before {
  content: ""; width: 20px; height: 20px; margin-top: 2px;
  border: 2px solid var(--sba-navy); border-radius: var(--sba-radius-sm);
}
.wh-conferir strong { color: var(--sba-text-strong); }

/* ---- Par de opções lado a lado ---------------------------------- */
.wh-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sba-space-4); }
.wh-par__lado {
  padding: var(--sba-space-4);
  border: 1px solid var(--sba-border);
  border-radius: var(--sba-radius-md);
  background: var(--sba-white);
}
.wh-par__lado h3 { margin: 0 0 var(--sba-space-2); font-size: var(--sba-fs-subtitle); }
.wh-par__lado p { font-size: var(--sba-fs-small); max-width: none; }
.wh-par__lado p:last-child { margin-bottom: 0; }
.wh-par__lado--seguro { border-left: 3px solid var(--sba-green); }
.wh-par__lado--risco { border-left: 3px solid var(--sba-yellow); }
.wh-par__quando {
  display: block; font-size: var(--sba-fs-caption); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sba-text);
  margin-bottom: var(--sba-space-1);
}

/* ---- Faixa de gradiente da marca --------------------------------
   Substitui a foto no topo do primeiro acesso e na capa de vídeo.
   É o key visual novo: azul profundo com o pico verde. */
.wh-gradiente {
  background-image: url('../vendor/background-clean.png');
  background-size: cover;
  background-position: center;
  background-color: var(--sba-navy);
}

@media (max-width: 1080px) {
  .wh-mapa { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .wh-campo { grid-template-columns: minmax(0, 1fr); gap: var(--sba-space-1); }
  .wh-matriz { grid-template-columns: minmax(0, 1fr); }
  .wh-matriz__cel:not(:nth-child(3n)) { border-right: 0; }
  /* Sem as colunas, cada célula precisa dizer de qual nível é. */
  .wh-matriz__cel[data-nivel]::before {
    content: attr(data-nivel);
    font-weight: 700; color: var(--sba-text-strong);
    font-size: var(--sba-fs-caption); letter-spacing: 0.08em;
    text-transform: uppercase; min-width: 68px; flex: none;
  }
  .wh-matriz__cabeca:not(:first-child) { display: none; }
  .wh-doc { grid-template-columns: 44px minmax(0, 1fr); gap: var(--sba-space-3); }
  .wh-doc__num { width: 44px; height: 44px; font-size: 1.375rem; }
  .wh-etapa__nota { margin-left: 0; }
  .wh-percurso { gap: var(--sba-space-2) var(--sba-space-3); }
  .wh-percurso__trilho { order: 3; flex-basis: 100%; }
}

@media print {
  .wh-percurso, .wh-adiante { display: none; }
  .wh-mapa { grid-template-columns: 1fr; }
}

/* Cor dos glifos das marcas de sim/não da matriz. Definida aqui para
   que o SVG use currentColor em vez de hex solto no HTML. */
.wh-marca--sim { color: var(--sba-navy); }
.wh-marca--nao { color: var(--sba-dark-gray); }

/* ---- Costura entre o key visual e o navy da marca ----------------
   O arquivo background-clean.png foi entregue com o navy ANTIGO
   (#002d73) e um verde acima da paleta (#00fe95) — medido no
   próprio PNG. Na tela de entrada isso não aparece, porque o
   vizinho é o painel branco do formulário. No painel de primeiro
   acesso, não: o key visual encosta direto no --sba-navy (#002050)
   e os dois azuis leem como erro de cor, não como composição.

   A borda verde resolve pelo vocabulário que a peça já usa em
   .wh-tela__barra, .wh-contexto e .wh-degrau: verde é a aresta que
   marca uma superfície da marca. Enquanto a divergência de cor do
   arquivo não for decidida com o cliente, é ela que segura a
   emenda. Ver "Pendências" no README. */
.wh-boasvindas__foto.wh-gradiente { border-left: 4px solid var(--sba-green); }

@media (max-width: 900px) {
  /* No estreito o key visual vira faixa no topo: o corte reto gira
     junto e passa a ser a aresta de baixo. */
  .wh-boasvindas__foto.wh-gradiente {
    border-left: 0; border-bottom: 4px solid var(--sba-green);
  }
}

/* ---- Diálogo de destino fora do protótipo ------------------------
   As 54 âncoras que não levam a lugar nenhum (#console, #ch-0932,
   #v1, #dl-anexo2) passam por aqui. Clique que não faz nada numa
   sessão de aprovação vira conversa sobre bug em vez de conversa
   sobre desenho. Sai inteiro quando os destinos forem reais. */
.wh-futuro {
  width: min(520px, calc(100vw - var(--sba-space-6)));
  padding: var(--sba-space-6);
  border: 0;
  border-top: 4px solid var(--sba-green);
  border-radius: var(--sba-radius-lg);
  background: var(--sba-white);
  color: var(--sba-text);
  box-shadow: var(--sba-shadow-lg);
}
.wh-futuro::backdrop { background: rgba(0, 32, 80, 0.55); }
.wh-futuro__tag {
  display: inline-block; margin: 0 0 var(--sba-space-3);
  padding: 2px var(--sba-space-2);
  background: var(--sba-yellow); color: var(--sba-navy);
  font-size: var(--sba-fs-caption); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--sba-radius-sm);
}
.wh-futuro__titulo {
  margin: 0 0 var(--sba-space-3);
  font-size: var(--sba-fs-headline); color: var(--sba-text-strong);
}
.wh-futuro__texto { margin: 0 0 var(--sba-space-3); max-width: none; }
.wh-futuro__nota {
  margin: 0; padding-top: var(--sba-space-3);
  border-top: 1px solid var(--sba-border);
  font-size: var(--sba-fs-small); color: var(--sba-text); max-width: none;
}
.wh-futuro__acoes { margin-top: var(--sba-space-5); }
.wh-futuro__acoes .sba-btn { width: 100%; justify-content: center; }

/* ============================================================
   21. PESO DO ARQUIVO NO BOTÃO DE DOWNLOAD
   ============================================================ */

/* Vive aqui, e não no <style> de downloads.html, porque as páginas da
   trilha também oferecem o PDF original. Antes de clicar em "Baixar"
   num celular, o peso é a informação que decide se a pessoa clica
   agora ou espera chegar no escritório. */
.wh-peso {
  font-weight: 600;
  opacity: 0.75;
  font-size: var(--sba-fs-caption);
  white-space: nowrap;
}