/* === WeHire · Tema do sistema sobre o Bootstrap 5.3 ======================
   Carregado DEPOIS do Bootstrap e do kit (wehire-kit.css), ANTES do
   custom.css. Trocar uma cor do sistema é mexer aqui, e só aqui.

   Toda cor deste arquivo é da paleta da norma 05 (plugin wehire 1.2.0) ou
   uma cor da paleta em opacidade menor. tests/test_paleta.py confere.

   A referência de interface é o "cromo" do Manual de Marca — a página do
   manual é, ela mesma, uma interface na marca (seção 4 de
   docs/planos/concluidos/frontend-identidade.md). As variáveis --wh-* vêm do kit.

   ------------------------------------------------------------------------ */

/* --- Fontes: servidas pelo sistema, nunca pelo Google --------------------
   Procedência e licença em app/static/PROCEDENCIA.md e fonts/OFL.txt. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Variáveis globais do Bootstrap --------------------------------------
   O Bootstrap lê a mesma cor por dois caminhos: a cor (`--bs-x`) e o trio
   RGB (`--bs-x-rgb`), usado nas utilidades com opacidade. Os dois andam
   juntos — o teste de paleta confere que cada trio bate com a sua cor. */
:root,
[data-bs-theme=light] {
  --bs-body-font-family: var(--wh-font-corpo);

  /* Texto de corpo em Cinza Escuro; secundário é o mesmo cinza a 75%. É o
     que o `text-muted` passa a mostrar. O manual usa 68% (--pg-muted), mas
     68% dá 4,2:1 sobre branco, abaixo dos 4,5:1 de texto pequeno; 75% dá
     5,2:1 (decisão da Heilike em 23/09/2026, divergência consciente). Vale
     para todo texto do tema em Cinza Escuro translúcido. */
  --bs-body-color: #3c3c46;
  --bs-body-color-rgb: 60, 60, 70;
  --bs-secondary-color: rgba(60, 60, 70, .75);
  --bs-secondary-color-rgb: 60, 60, 70;
  --bs-tertiary-color: rgba(60, 60, 70, .5);
  --bs-tertiary-color-rgb: 60, 60, 70;
  --bs-heading-color: var(--wh-azul);

  /* Ação principal e "escuro" em Azul WeHire; secundário em Cinza Escuro. */
  --bs-primary: #011a45;
  --bs-primary-rgb: 1, 26, 69;
  --bs-dark: #011a45;
  --bs-dark-rgb: 1, 26, 69;
  --bs-secondary: #3c3c46;
  --bs-secondary-rgb: 60, 60, 70;

  /* Linhas e bordas: Cinza Claro. */
  --bs-border-color: #d2d2dc;

  /* Link em Azul Claro, sublinhado só no hover. */
  --bs-link-color: #005cfb;
  --bs-link-color-rgb: 0, 92, 251;
  --bs-link-hover-color: #005cfb;
  --bs-link-hover-color-rgb: 0, 92, 251;
  --bs-link-decoration: none;

  /* Anel de foco em Azul Claro. */
  --bs-focus-ring-color: rgba(0, 92, 251, .25);

  /* Estados — mapa da seção 6 do plano, decidido pela Heilike em 23/09/2026.
     A cor do estado é traço (filete, ícone, contorno, chip); o TEXTO de todo
     estado é Azul WeHire, porque rosa e verde não viram cor de texto sobre
     branco (norma 05). Rosa é só o que bloqueia ou falha (erro); aviso que
     não impede nada fica em Azul Claro, como a informação (revisto em
     23/09/2026, na conferência da F5 de candidatos/: na "Escrever relatório",
     "Falta para gerar" e "Avisos — não impedem gerar" ficavam iguais). */
  --bs-danger: #ff005d;
  --bs-danger-rgb: 255, 0, 93;
  --bs-danger-text-emphasis: #011a45;
  --bs-danger-bg-subtle: #ffffff;
  --bs-danger-border-subtle: #d2d2dc;
  --bs-warning: #005cfb;
  --bs-warning-rgb: 0, 92, 251;
  --bs-warning-text-emphasis: #011a45;
  --bs-warning-bg-subtle: #ffffff;
  --bs-warning-border-subtle: #d2d2dc;
  --bs-success: #c1ff72;
  --bs-success-rgb: 193, 255, 114;
  --bs-success-text-emphasis: #011a45;
  --bs-success-bg-subtle: #ffffff;
  --bs-success-border-subtle: #d2d2dc;
  --bs-info: #005cfb;
  --bs-info-rgb: 0, 92, 251;
  --bs-info-text-emphasis: #011a45;
  --bs-info-bg-subtle: #ffffff;
  --bs-info-border-subtle: #d2d2dc;
  --bs-form-invalid-color: #011a45;
  --bs-form-invalid-border-color: #ff005d;
  --bs-form-valid-color: #011a45;
  --bs-form-valid-border-color: #d2d2dc;

  /* Estados das telas de avaliação, lidos pelo custom.css. Mudar a cor de um
     estado é mexer aqui, não lá. */
  --tema-impressao-acima: #011a45;    /* Azul WeHire */
  --tema-impressao-dentro: #005cfb;   /* Azul Claro */
  --tema-impressao-abaixo: #d2d2dc;   /* Cinza Claro (revisto na F3b) */
  --tema-salvo-fundo: #c1ff72;        /* chip de "salvo": verde... */
  --tema-salvo-texto: #011a45;        /* ...com texto Azul WeHire */
  --tema-selecionado-anel: rgba(0, 92, 251, .4);
  --tema-texto-apoio: rgba(60, 60, 70, .75);
  /* Widget de Capacidades: seleção é azul, como o controle "ligado"; o verde
     fica para gente e decisão, e uma tabela tem dezenas de células marcadas. */
  --tema-celula-marcada: rgba(0, 92, 251, .14);
  --tema-celula-marca: #011a45;
  --tema-nivel-esperado: rgba(0, 92, 251, .08);
  --tema-ancora-filete: #005cfb;
  --tema-ancora-fundo: rgba(0, 92, 251, .05);
  --tema-roteiro-filete: #d2d2dc;
  --tema-roteiro-fundo: rgba(210, 210, 220, .22);
  /* Selo de nível de Capacidade, N0 a N4 (seção "Identidade visual" do
     padroes-frontend.md). Escala revista na F4b, em 23/09/2026: baixo em
     contorno, alto em cheio, e vizinhos sempre diferem em cor ou em
     preenchimento. Cada nível tem fundo, contorno e texto; nível de contorno
     tem fundo transparente. */
  --tema-nivel-0-fundo: transparent;
  --tema-nivel-0-contorno: #d2d2dc;             /* Cinza Claro */
  --tema-nivel-0-texto: rgba(60, 60, 70, .75);  /* Cinza Escuro a 75% */
  --tema-nivel-1-fundo: transparent;
  --tema-nivel-1-contorno: #005cfb;             /* Azul Claro */
  --tema-nivel-1-texto: #011a45;
  --tema-nivel-2-fundo: transparent;
  --tema-nivel-2-contorno: #011a45;             /* Azul WeHire */
  --tema-nivel-2-texto: #011a45;
  --tema-nivel-3-fundo: #005cfb;                /* Azul Claro cheio */
  --tema-nivel-3-contorno: #005cfb;
  --tema-nivel-3-texto: #ffffff;
  --tema-nivel-4-fundo: #011a45;                /* Azul WeHire cheio */
  --tema-nivel-4-contorno: #011a45;
  --tema-nivel-4-texto: #ffffff;
  /* Status de projeto (seção "Identidade visual" do padroes-frontend.md,
     decisões de 23/09/2026): nenhum é alerta nem decisão. Traço é o estilo
     do contorno — o Cancelado é tracejado, para não ser igual ao Pausado. */
  --tema-status-waiting-fundo: transparent;     /* Fila de Espera */
  --tema-status-waiting-contorno: #3c3c46;      /* contorno Cinza Escuro */
  --tema-status-waiting-traco: solid;
  --tema-status-waiting-texto: #3c3c46;
  --tema-status-active-fundo: transparent;      /* Ativo */
  --tema-status-active-contorno: #011a45;       /* contorno Azul WeHire */
  --tema-status-active-traco: solid;
  --tema-status-active-texto: #011a45;
  --tema-status-paused-fundo: transparent;      /* Pausado */
  --tema-status-paused-contorno: #d2d2dc;       /* contorno Cinza Claro */
  --tema-status-paused-traco: solid;
  --tema-status-paused-texto: #3c3c46;
  --tema-status-completed-fundo: #011a45;       /* Concluído: Azul WeHire cheio */
  --tema-status-completed-contorno: #011a45;
  --tema-status-completed-traco: solid;
  --tema-status-completed-texto: #ffffff;
  --tema-status-cancelled-fundo: transparent;   /* Cancelado */
  --tema-status-cancelled-contorno: #d2d2dc;    /* tracejado Cinza Claro */
  --tema-status-cancelled-traco: dashed;
  --tema-status-cancelled-texto: rgba(60, 60, 70, .75);

  /* Tabela, como a `table.doc` do cromo do manual (etapa F4). */
  --tema-tabela-cabecalho: #011a45;
  --tema-tabela-cabecalho-texto: #ffffff;
  --tema-tabela-cabecalho-apoio: rgba(255, 255, 255, .62);
  --tema-tabela-zebra: rgba(210, 210, 220, .22);
  /* Neutros das telas, lidos pelo custom.css (etapa F4): Cinza Claro e
     Cinza Escuro em opacidade, no lugar dos cinzas do Bootstrap. */
  --tema-cinza-apagado: rgba(60, 60, 70, .45);   /* alça de arrasto, tracejado */
  --tema-texto-roteiro: rgba(60, 60, 70, .85);   /* pergunta do roteiro */
  --tema-fundo-suave: rgba(210, 210, 220, .35);  /* botão "+" da tag */
  --tema-fundo-hover: rgba(210, 210, 220, .6);   /* hover do botão "+" */
  --tema-celula-hover: rgba(210, 210, 220, .3);  /* hover da célula do widget */
  --tema-sombra-card: rgba(0, 0, 0, .15);        /* hover do card do kanban */
  --tema-fundo-area: rgba(210, 210, 220, .3);    /* área de trabalho (.preview do manual) */

  /* <code> (telas de admin): o Bootstrap o pinta de magenta, fora da paleta. */
  --bs-code-color: #011a45;
}

/* --- Tipografia ----------------------------------------------------------
   Archivo nos títulos, em Azul WeHire; Inter no corpo (acima). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--wh-font-display);
  font-weight: 700;
}

/* --- Tabela --------------------------------------------------------------
   Como a `table.doc` do cromo do manual: cabeçalho Azul WeHire em Archivo
   600, filetes Cinza Claro (o --bs-border-color, acima), zebra leve a 22% do
   Cinza Claro e números tabulares. Sem trocar classe em template: tudo entra
   pelas variáveis com que o Bootstrap pinta cada célula, e o `table-light`
   dos cabeçalhos deixa de valer. O texto das células fica no Cinza Escuro do
   corpo, e não no preto do Bootstrap, também no hover.

   O widget de Capacidades (`.mark-table`) fica de fora: tem cabeçalho e
   fundos próprios, com a coluna do nível esperado e as células marcadas. */
.table {
  font-variant-numeric: tabular-nums;
  --bs-table-color: var(--bs-body-color);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-active-color: var(--bs-body-color);
}
.table:not(.mark-table) > thead > tr > th {
  --bs-table-bg: var(--tema-tabela-cabecalho);
  --bs-table-color: var(--tema-tabela-cabecalho-texto);
  border-color: var(--tema-tabela-cabecalho);
  font-family: var(--wh-font-display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .4px;
}
/* O ícone de ordenação do table-sort.js e qualquer texto de apoio no
   cabeçalho: o `text-muted` sumiria sobre o azul. */
.table:not(.mark-table) > thead .text-muted {
  color: var(--tema-tabela-cabecalho-apoio) !important;
}
.table:not(.mark-table) > tbody > tr:nth-child(even) > * {
  --bs-table-bg-type: var(--tema-tabela-zebra);
}

/* --- Links ---------------------------------------------------------------
   O Bootstrap põe `text-decoration: underline` fixo no `a`. O hover vai com
   `:where()` para ficar com a especificidade de um elemento só: assim ele
   vence o `a` do Bootstrap, mas perde para qualquer classe de componente
   (.btn, .nav-link, .dropdown-item, .page-link), que continuam sem traço. */
a {
  text-decoration: var(--bs-link-decoration);
}
a:where(:hover) {
  text-decoration: underline;
}

/* --- Botões --------------------------------------------------------------
   O Bootstrap 5.3 fixa as cores de cada variante na própria classe; mudar
   --bs-primary não alcança o botão. Por isso cada variante é reescrita. */

/* Ação principal. As telas usam `btn-dark` para isso; `btn-primary` fica
   igual, para quem escrever tela nova. O hover é a mesma cor em opacidade
   menor — a norma não aceita inventar um azul mais claro. */
.btn-primary,
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #011a45;
  --bs-btn-border-color: #011a45;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(1, 26, 69, .86);
  --bs-btn-hover-border-color: rgba(1, 26, 69, .86);
  --bs-btn-focus-shadow-rgb: 0, 92, 251;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #011a45;
  --bs-btn-active-border-color: #011a45;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #011a45;
  --bs-btn-disabled-border-color: #011a45;
}

/* Botão de controle, como o `.labbtn` do manual: borda Cinza Claro e texto
   Azul WeHire; no hover, borda Azul Claro; ligado (`.active`, `btn-check`
   marcado), Azul WeHire cheio. */
.btn-outline-secondary {
  --bs-btn-color: #011a45;
  --bs-btn-border-color: #d2d2dc;
  --bs-btn-hover-color: #011a45;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #005cfb;
  --bs-btn-focus-shadow-rgb: 0, 92, 251;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #011a45;
  --bs-btn-active-border-color: #011a45;
  --bs-btn-disabled-color: rgba(60, 60, 70, .75);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #d2d2dc;
}

/* O mesmo controle com contorno forte, em Azul WeHire — mantém a diferença
   que as telas já faziam entre `outline-dark` e `outline-secondary`. */
.btn-outline-primary,
.btn-outline-dark {
  --bs-btn-color: #011a45;
  --bs-btn-border-color: #011a45;
  --bs-btn-hover-color: #011a45;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #005cfb;
  --bs-btn-focus-shadow-rgb: 0, 92, 251;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #011a45;
  --bs-btn-active-border-color: #011a45;
  --bs-btn-disabled-color: rgba(1, 26, 69, .68);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgba(1, 26, 69, .68);
}

/* Botão com cara de link: mesma regra do link — sem traço, traço no hover. */
.btn-link {
  --bs-btn-disabled-color: rgba(60, 60, 70, .75);
  --bs-btn-focus-shadow-rgb: 0, 92, 251;
  text-decoration: none;
}
.btn-link:hover {
  text-decoration: underline;
}

/* --- Formulários ---------------------------------------------------------
   Foco e marcação vêm com o azul do Bootstrap fixo na regra. Os estados de
   validação (.is-invalid, .is-valid) ficam com a F3. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: rgba(0, 92, 251, .5);
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
.form-check-input:checked {
  background-color: #011a45;
  border-color: #011a45;
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23005cfb' fill-opacity='.5'/%3e%3c/svg%3e");
}

/* --- Cartão, como o `.note` do manual: branco, filete Cinza Claro, raio 12 */
.card {
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: 12px;
  --bs-card-inner-border-radius: calc(12px - var(--bs-border-width));
}

/* --- Item ativo de menu, lista e paginação: Azul WeHire ------------------ */
.dropdown-menu {
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #011a45;
}
.list-group {
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: #011a45;
  --bs-list-group-active-border-color: #011a45;
}
.pagination {
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #011a45;
  --bs-pagination-active-border-color: #011a45;
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

/* === Estados (etapa F3) ==================================================
   Mapa da seção 6 do plano. As variáveis estão no :root, acima; aqui ficam
   as regras que o Bootstrap escreve com cor fixa ou com o texto na cor do
   estado. */

/* Texto de estado em Azul WeHire. O Bootstrap pinta `text-danger` e
   `text-success` com a cor do estado, e rosa e verde sobre branco não passam
   em contraste de texto nem na norma 05. Nenhum template usa `text-danger`
   desde a última F5 (um teste trava); a regra fica para o que o próprio
   Bootstrap escrever com essas classes. Erro é `form_error` ou `.estado-erro`. */
.text-danger,
.text-warning,
.text-success,
.text-info {
  color: #011a45 !important;
}

/* Selo de status ("Ativo", "Atual", "configurada", "conferido") é chip de
   contorno Azul WeHire, sem verde (decisão da Heilike em 23/09/2026, F3b):
   status não é gente nem decisão, e em lista o verde passaria de 2 por
   tela. O verde de sucesso fica só no chip passageiro de "salvo".
   Os chips de contorno têm o formato de pílula do kit, e o contorno vai como
   sombra interna para o badge não mudar de tamanho. */
.badge.bg-success,
.badge.text-bg-success {
  color: #011a45 !important;
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px #011a45;
  border-radius: 999px;
}
/* Badge de erro é o `.wh-chip-alerta` do kit: contorno rosa, texto azul, sem
   preenchimento. Badge de aviso ("Não conferido", "não aprovada", "Há
   anotação nova") tem o mesmo formato com contorno Azul Claro: aviso não
   impede nada, e o rosa fica para o que bloqueia ou falha (23/09/2026). */
.badge.bg-danger,
.badge.bg-warning,
.badge.text-bg-danger,
.badge.text-bg-warning {
  color: #011a45 !important;
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1.5px #ff005d;
  border-radius: 999px;
}
.badge.bg-warning,
.badge.text-bg-warning {
  box-shadow: inset 0 0 0 1.5px #005cfb;
}
/* Selo de impressão (Acima / Dentro / Abaixo das Expectativas), dos macros
   rating_badge e key_experience_rating_badge: a mesma escala do filete do
   card — escuro, vivo, claro —, e nenhum dos três é alerta. Antes ele usava
   success / primary / warning, e o Abaixo virava chip de alerta rosa. */
.badge.selo-acima {
  color: #fff;
  background-color: var(--tema-impressao-acima);
}
.badge.selo-dentro {
  color: #fff;
  background-color: var(--tema-impressao-dentro);
}
.badge.selo-abaixo {
  color: #011a45;
  background-color: var(--tema-impressao-abaixo);
}

/* Selo de nível de Capacidade (macro capability_level_badge). Todo nível tem
   a mesma forma — fundo, contorno por sombra interna e texto, em pílula —, e
   só as variáveis --tema-nivel-* dizem se ele é contorno ou cheio. Mudar a
   escala é mexer nelas, não aqui. */
.badge.selo-nivel {
  border-radius: 999px;
}
.badge.selo-n0 {
  color: var(--tema-nivel-0-texto);
  background-color: var(--tema-nivel-0-fundo);
  box-shadow: inset 0 0 0 1.5px var(--tema-nivel-0-contorno);
}
.badge.selo-n1 {
  color: var(--tema-nivel-1-texto);
  background-color: var(--tema-nivel-1-fundo);
  box-shadow: inset 0 0 0 1.5px var(--tema-nivel-1-contorno);
}
.badge.selo-n2 {
  color: var(--tema-nivel-2-texto);
  background-color: var(--tema-nivel-2-fundo);
  box-shadow: inset 0 0 0 1.5px var(--tema-nivel-2-contorno);
}
.badge.selo-n3 {
  color: var(--tema-nivel-3-texto);
  background-color: var(--tema-nivel-3-fundo);
  box-shadow: inset 0 0 0 1.5px var(--tema-nivel-3-contorno);
}
.badge.selo-n4 {
  color: var(--tema-nivel-4-texto);
  background-color: var(--tema-nivel-4-fundo);
  box-shadow: inset 0 0 0 1.5px var(--tema-nivel-4-contorno);
}

/* Selo de status de projeto (macro project_status_badge). O contorno é
   `outline` para comportar o tracejado sem mudar o tamanho do selo. */
.badge.selo-status {
  border-radius: 999px;
  outline-width: 1.5px;
  outline-offset: -1.5px;
}
.badge.selo-status-waiting {
  color: var(--tema-status-waiting-texto);
  background-color: var(--tema-status-waiting-fundo);
  outline-color: var(--tema-status-waiting-contorno);
  outline-style: var(--tema-status-waiting-traco);
}
.badge.selo-status-active {
  color: var(--tema-status-active-texto);
  background-color: var(--tema-status-active-fundo);
  outline-color: var(--tema-status-active-contorno);
  outline-style: var(--tema-status-active-traco);
}
.badge.selo-status-paused {
  color: var(--tema-status-paused-texto);
  background-color: var(--tema-status-paused-fundo);
  outline-color: var(--tema-status-paused-contorno);
  outline-style: var(--tema-status-paused-traco);
}
.badge.selo-status-completed {
  color: var(--tema-status-completed-texto);
  background-color: var(--tema-status-completed-fundo);
  outline-color: var(--tema-status-completed-contorno);
  outline-style: var(--tema-status-completed-traco);
}
.badge.selo-status-cancelled {
  color: var(--tema-status-cancelled-texto);
  background-color: var(--tema-status-cancelled-fundo);
  outline-color: var(--tema-status-cancelled-contorno);
  outline-style: var(--tema-status-cancelled-traco);
}

/* Botão de excluir, como o `.wh-chip-alerta` do kit: contorno rosa, fundo
   branco, texto Azul WeHire (decisão da Heilike em 23/09/2026, F3b). Rosa
   cheio é o "fill grande" que a norma 05 proíbe, então nem o hover nem o foco
   preenchem: no hover o contorno engrossa (sombra interna, para o botão não
   mudar de tamanho), e o foco é o anel translúcido de sempre. Vale para
   `btn-danger` e `btn-outline-danger`, que as telas usam para a mesma ação. */
.btn-danger,
.btn-outline-danger {
  --bs-btn-color: #011a45;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ff005d;
  --bs-btn-hover-color: #011a45;
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: #ff005d;
  --bs-btn-focus-shadow-rgb: 255, 0, 93;
  --bs-btn-active-color: #011a45;
  --bs-btn-active-bg: #ffffff;
  --bs-btn-active-border-color: #ff005d;
  --bs-btn-disabled-color: rgba(1, 26, 69, .68);
  --bs-btn-disabled-bg: #ffffff;
  --bs-btn-disabled-border-color: rgba(255, 0, 93, .5);
}
.btn-danger:hover,
.btn-outline-danger:hover {
  box-shadow: inset 0 0 0 1px #ff005d;
}

/* Alerta como o `.note` do manual: branco, filete Cinza Claro, raio 12, e o
   filete de 4px à esquerda na cor do estado — rosa para erro, o que bloqueia
   ou falha (o `.note.warn`), verde para sucesso (o `.note.rule`), Azul Claro
   para aviso e informação. Aviso saiu do rosa em 23/09/2026: só se distinguia
   do bloqueio pelo texto. */
.alert {
  --bs-alert-border-radius: 12px;
}
.alert-danger {
  border-left: 4px solid #ff005d;
}
.alert-success {
  border-left: 4px solid #c1ff72;
}
.alert-warning,
.alert-info {
  border-left: 4px solid #005cfb;
}

/* Campo com erro: o filete (a borda) e o ícone em rosa. O Bootstrap desenha
   o ícone num SVG com o vermelho dele dentro; aqui vai o mesmo desenho em
   rosa. */
.was-validated .form-control:invalid,
.form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff005d'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff005d' stroke='none'/%3e%3c/svg%3e");
}
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff005d'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff005d' stroke='none'/%3e%3c/svg%3e");
}

/* Ação de excluir em link ou item de menu (o "×" de uma lista, o "Inativar"
   do card): ícone rosa, texto Azul WeHire. Derivada das linhas "botão de
   excluir" e "erro" do mapa de estados (F5 de projetos/). Substitui o
   `text-danger` nesses lugares: é ação, não erro. As variáveis do botão vêm
   junto, para o hover do `btn-link` não voltar ao azul do link. */
.acao-excluir {
  --bs-btn-color: #011a45;
  --bs-btn-hover-color: #011a45;
  --bs-btn-active-color: #011a45;
  color: #011a45;
}
.acao-excluir .bi {
  color: #ff005d;
}

/* Mensagem de erro de campo, da macro `form_error`: ícone rosa, texto azul. */
.form-erro {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-top: .25rem;
  font-size: .875em;
  color: #011a45;
}
.form-erro .bi {
  color: #ff005d;
}

/* Estado de erro escrito por script: o mesmo visual da `form_error` (ícone
   rosa, texto Azul WeHire), mas com o ícone por ::before, porque o script
   troca o texto por textContent e apagaria um ícone de verdade. É a classe
   que o script põe no lugar de `text-danger` (F5 de candidatos/, passo 0),
   e a de toda caixa de erro que o script preenche. */
.estado-erro {
  color: #011a45;
}
.estado-erro:not(:empty)::before {
  content: "\f332";
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  line-height: 1;
  vertical-align: -.125em;
  margin-right: .35em;
  color: #ff005d;
}

/* Asterisco de campo obrigatório: Azul WeHire, não vermelho. */
.campo-obrigatorio {
  color: #011a45;
  font-weight: 600;
}

/* === Componentes (etapa F4) ===============================================
   As macros de macros.html usam as classes do kit (.wh-eyebrow, .wh-titulo,
   .wh-pessoa, .wh-alerta, .wh-marca-texto); aqui fica só o que o kit não
   traz. */

/* Abas (`nav-tabs`, as quatro da tela de entrevista): a ativa em Azul
   WeHire, as outras em texto secundário, e Azul Claro no hover — como a
   navegação do manual, e para a aba inativa não parecer link solto. Só cor:
   nem a largura da aba muda ao trocar, e o hover não desenha a borda que o
   Bootstrap põe na aba inativa (A18); a ativa mantém a dela. */
.nav-tabs {
  --bs-nav-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--bs-link-color);
  --bs-nav-tabs-link-active-color: var(--bs-primary);
  --bs-nav-tabs-link-hover-border-color: transparent;
}

/* Rótulo da macro `decisao`, antes do valor em marca-texto — como o rótulo
   do KPI do kit. */
.decisao-rotulo {
  color: var(--bs-secondary-color);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-right: .35rem;
}

/* === Casca: navbar, capa do login, páginas de erro (etapa F2) ============ */

/* --- Navbar ---------------------------------------------------------------
   Azul WeHire (vem de --bs-dark, acima), como a barra lateral do manual:
   link em branco a 62%, branco cheio no hover. O nome de quem está logado
   usa `.navbar-text`, que lê a mesma cor.

   Fixa no topo ao rolar (`sticky-top` em base.html, P6 do bloco A,
   16/10/2026). A altura é a da barra fechada, com o monograma de 36 px; âncora
   e scrollIntoView param abaixo dela, com folga, e não escondidos atrás. */
:root {
  --navbar-altura: 56px;
}
html {
  scroll-padding-top: calc(var(--navbar-altura) + .75rem);
}
.navbar-dark {
  --bs-navbar-color: rgba(255, 255, 255, .62);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, .22);
}

/* Item ativo como o `.toc a.active` do manual, adaptado para barra no topo:
   filete verde de 3px EMBAIXO do item e fundo verde a 7%. O filete é sombra
   interna, para não mexer na altura do item. Texto nunca verde: sobre azul,
   o verde é traço e fundo, e o texto fica branco. */
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
  background-color: rgba(193, 255, 114, .07);
  box-shadow: inset 0 -3px 0 #c1ff72;
}
/* Com o menu recolhido (abaixo de lg, o que inclui o tablet de 768px), os
   itens ficam empilhados e o filete volta para a esquerda, como no manual. */
@media (max-width: 991.98px) {
  .navbar-dark .navbar-nav .nav-link {
    padding-left: .75rem;
    padding-right: .75rem;
  }
  .navbar-dark .navbar-nav .nav-link.active {
    box-shadow: inset 3px 0 0 #c1ff72;
  }
}

/* Papel de quem está logado: chip translúcido, não o cinza do Bootstrap. */
.navbar .navbar-papel {
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 600;
  letter-spacing: .5px;
}

/* Botão "Sair", como o botão "Copiar" do manual sobre Azul WeHire: contorno
   branco a 22%, texto a 85%. */
.navbar .btn-outline-light {
  --bs-btn-color: rgba(255, 255, 255, .85);
  --bs-btn-border-color: rgba(255, 255, 255, .22);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .08);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
  --bs-btn-active-color: #011a45;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}

/* --- Capa (login) ---------------------------------------------------------
   Fundo Azul WeHire, logo branco e o globo cortado na borda a 20%, como a
   capa do manual. O globo mora numa camada fixa do tamanho da janela, que
   corta o que passa da borda, e fica atrás do conteúdo.

   **O globo nunca fica atrás do formulário** (norma 05: "nunca atrás de
   texto"). A conta: o cartão do login ocupa até 71% da largura a partir da
   esquerda (col-md-5 centrada); o globo tem 40% da largura e sai 14% pela
   direita, então começa em 74%. Abaixo de 768px o cartão alarga e o globo
   some. */
body.wh-capa {
  background-color: #011a45;
}
body.wh-capa > .container-fluid {
  position: relative;
  z-index: 1;
}
.wh-capa-fundo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.wh-capa-fundo .globo {
  position: absolute;
  right: -14vw;
  bottom: -14vw;
  width: 40vw;
  max-width: 620px;
  height: auto;
  opacity: .2;
}
@media (max-width: 767.98px) {
  .wh-capa-fundo {
    display: none;
  }
}
.wh-capa-logo {
  width: 230px;
  max-width: 70%;
  height: auto;
}

/* --- Página de erro -------------------------------------------------------
   Cabeçalho com `.wh-eyebrow` + `.wh-titulo` do kit; o título tem o contraste
   de peso da marca (`.leve`). */
.wh-erro .wh-titulo {
  margin-bottom: .75rem;
}

/* Relatório de candidato em HTML (etapa 3 de docs/planos/concluidos/redesenho-geracao-de-documentos.md).
   O .pptx da casa tinha cores fora da paleta: o cinza-azulado das chaves de
   leitura e das opções não marcadas e o fundo do selo de avaliação viram tons da
   paleta em opacidade menor, como manda o Manual de Marca ("tons mais claros = a
   mesma cor em opacidade menor") — decisão da Heilike em 01/10/2026 de seguir o
   Manual onde ele e o .pptx divergem. As doze cores das Capacidades ficam, logo
   abaixo, como exceção consciente. */
:root {
  --relatorio-mesa: rgba(210, 210, 220, .35);        /* fundo atrás das páginas, só na tela */
  --relatorio-sombra: rgba(1, 26, 69, .12);          /* sombra da página, só na tela */
  --relatorio-apoio: rgba(60, 60, 70, .6);           /* opções não marcadas, chaves de leitura */
  --relatorio-selo-fundo: rgba(210, 210, 220, .5);   /* selo da avaliação, Competências Técnicas */
  --relatorio-coluna: rgba(210, 210, 220, .2);       /* coluna das perguntas-guia, relatório de referências */
}

/* As doze cores das Capacidades Pessoais, no círculo da sigla de cada página de
   Capacidade do relatório. **Exceção consciente à paleta**, decidida pela Heilike
   em 01/10/2026: são as cores da roda das Capacidades, e o círculo da sigla
   repete a cor da fatia. Vêm do .pptx aprovado, uma por Capacidade, e só valem
   aqui: tests/test_paleta.py aceita estas doze neste arquivo e em nenhum outro,
   e confere que são as do .pptx. */
:root {
  --capacidade-problem-solving: #e0c88d;
  --capacidade-strategy-building: #934167;
  --capacidade-courage-resilience: #ffd939;
  --capacidade-crisis-management: #5e4d3f;
  --capacidade-adaptive-communication: #90e3d4;
  --capacidade-leadership-engagement: #0e4cd9;
  --capacidade-continuous-growth: #6abcae;
  --capacidade-team-management: #355a78;
  --capacidade-client-focus: #bca76c;
  --capacidade-resource-balance: #6c1e46;
  --capacidade-creation-innovation: #e5be00;
  --capacidade-change-management: #442b1d;
  /* Duas fatias da roda nas cores da roda dos modelos e da teia, e não nas das
     siglas do relatório, que não mudam (decisão 3 da etapa 2c do bloco D,
     Heilike, 19/10/2026): com a cor da sigla, Liderança ficava quase da cor do
     anel Pessoas. */
  --roda-leadership-engagement: #0e4c89;
  --roda-team-management: #023056;
}