/* WeHire custom styles */

/* Texto pequeno das telas, por papel — no lugar de font-size inline (F5 do
   plano de front). Largura, altura e posição podem continuar inline;
   tipografia e cor, não. */
.texto-legenda   { font-size: .72rem; line-height: 1.35; }  /* legenda, ajuda de campo */
.texto-descricao { font-size: .78rem; }                     /* descrição de item */
.texto-controle  { font-size: .8rem; }                      /* controle compacto */
.texto-menu      { font-size: .82rem; }                     /* menu suspenso compacto */
.icone-mini      { font-size: .7rem; line-height: 1; }      /* ícone de ação miúdo */
.icone-acao      { font-size: .9rem; line-height: 1; }      /* ícone de menu de ações */

/* Fundo de área de trabalho, atrás dos cartões (colunas do kanban, formulário
   recolhido): o `.preview` do Manual de Marca, Cinza Claro a 30%. Substitui o
   `bg-light` do Bootstrap, que é um cinza de fora da paleta. */
.fundo-area { background-color: var(--tema-fundo-area); }

/* Pipeline card */
.pipeline-col {
    min-width: 220px;
}

/* Coluna de On-Hold (K5 de `docs/planos/concluidos/reporte-semanal.md`): a mesma etapa
   com a marca, e não etapa nova. O contorno tracejado a separa da coluna da
   etapa, ao lado, sem cor nova. */
.pipeline-col-hold > .fundo-area {
    outline: 1px dashed var(--bs-border-color);
    outline-offset: -1px;
}

/* A coluna precisa de altura para receber o cartão solto nela vazia. */
.pipeline-dropzone {
    min-height: 3rem;
}

.candidate-card {
    font-size: 0.875rem;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.candidate-card:hover {
    box-shadow: 0 4px 12px var(--tema-sombra-card);
}

/* Interview notes textarea */
#interview-notes {
    min-height: 60vh;
    resize: vertical;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Motivação, Mobilidade e Pontos de Atenção (etapa 1 do bloco C): mais curtos
   que as Anotações Gerais, e crescem à mão. */
.anotacao-do-momento {
    min-height: 6.5rem;
    resize: vertical;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Evaluation cards. As cores de cada impressão moram no wehire-tema.css
   (--tema-impressao-*), no mapa de estados da seção 6 do plano de front.
   Sem impressão, o card não tem filete: fica só a borda do cartão. O recuo de
   3px guarda o lugar do filete, para o conteúdo não pular quando a impressão
   chega (o filete tem 4px; a borda, 1px). */
.eval-card {
    padding-left: 3px;
}

/* Experiência Chave e Competência Técnica — mesma escala desde a etapa 3.
   Escala ordinal em tons da base — escuro, vivo, claro —, e nenhum dos três é
   alerta (revisto na F3b: Abaixo em Cinza Escuro ficava igual a Acima). */
.eval-card.rated-ABOVE_EXPECTATIONS,
.eval-card.rated-WITHIN_EXPECTATIONS,
.eval-card.rated-BELOW_EXPECTATIONS  { border-left-width: 4px; padding-left: 0; }
.eval-card.rated-ABOVE_EXPECTATIONS  { border-left-color: var(--tema-impressao-acima); }
.eval-card.rated-WITHIN_EXPECTATIONS { border-left-color: var(--tema-impressao-dentro); }
.eval-card.rated-BELOW_EXPECTATIONS  { border-left-color: var(--tema-impressao-abaixo); }

/* Salvamento de avaliação: quando a marcação chega ao servidor, o "Salvo" do
   card aparece como chip verde com texto Azul WeHire e some em 1,2s (seção 6
   do plano de front). O script reinicia a classe `saved-flash` a cada
   salvamento, o que reinicia o chip. A falha não vira chip nem some: o script
   troca a classe do status para `.estado-erro`, e ela fica escrita no card
   até o próximo salvamento. */
@keyframes eval-salvo-chip {
    0%, 70% { opacity: 1; }
    100%    { opacity: 0; }
}
.eval-card.saved-flash .eval-status.text-success {
    background-color: var(--tema-salvo-fundo);
    color: var(--tema-salvo-texto) !important;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 1px 8px;
    border-radius: 999px;
    animation: eval-salvo-chip 1.2s ease-out forwards;
}
.eval-status {
    font-size: 0.68rem;
    font-weight: normal;
    white-space: nowrap;
}

/* Level selector buttons */
.level-btn {
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
    font-weight: bold;
    /* O padding padrão do .btn deixa menos de 20px úteis nos 40px do botão, e
       "N0" quebrava em duas linhas. Sem padding e com o rótulo centralizado no
       flex, o texto ocupa a largura toda. */
    padding: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.level-btn.active {
    box-shadow: 0 0 0 3px var(--tema-selecionado-anel);
}

/* Save indicator */
#save-indicator {
    font-size: 0.8rem;
    color: var(--tema-texto-apoio);
}

.sortable-ghost {
    opacity: 0.4;
}

/* Candidate card outer wrapper (contém bookmarks + card) */
.candidate-card-outer {
    position: relative;
    margin-top: 16px;
}

/* Faixa de bookmarks posicionada acima do card */
.card-bookmarks {
    position: absolute;
    top: -14px;
    left: 8px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    z-index: 1;
}

/* Cada bookmark: retângulo colorido que "sai" pelo topo do card */
.card-bookmark {
    display: inline-block;
    width: 11px;
    height: 18px;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    transition: height 0.1s ease;
}

.card-bookmark:hover {
    height: 22px;
    opacity: 0.85;
}

/* Botão '+' para adicionar tag */
.card-bookmark-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 18px;
    border-radius: 3px 3px 0 0;
    background: var(--tema-fundo-suave);
    border: 1px dashed var(--tema-cinza-apagado);
    color: var(--tema-texto-apoio);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: background 0.1s;
}

.card-bookmark-add:hover {
    background: var(--tema-fundo-hover);
    color: var(--bs-body-color);
}

/* Pílula de tag na legenda do projeto: branca, com o ponto na cor da tag.
   A cor é dado do usuário e pode ser clara; o texto fica sempre legível. */
.tag-pilula {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--bs-primary);
    background-color: var(--bs-body-bg);
    box-shadow: inset 0 0 0 1px var(--bs-border-color);
    font-weight: 500;
    font-size: .78rem;
}
/* Ponto na cor da tag (legenda e menu de adicionar tag do card). */
.tag-cor {
    display: inline-block;
    flex-shrink: 0;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
}

/* Tag legend items na seção de setup */
.tag-legend-item {
    align-items: center;
}

.tag-edit-btn {
    opacity: 0;
    transition: opacity 0.15s;
}

.tag-legend-item:hover .tag-edit-btn {
    opacity: 1;
}

/* Details nativo para a seção de tags — remove seta padrão do browser */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* Rotaciona o chevron quando o details está aberto */
details[open] summary .bi-chevron-down {
    transform: rotate(180deg);
}
summary .bi-chevron-down {
    transition: transform 0.2s ease;
    display: inline-block;
}

/* Widget de Capacidades: tabela critério × nível. A célula inteira é o alvo do
   clique — marcar não pode ser mais lento que ouvir. */
.mark-table { font-size: 0.72rem; table-layout: fixed; }
.mark-table th { font-weight: 600; vertical-align: top; }
.mark-criterion-head, .mark-criterion { width: 24%; }
.mark-table th.mark-expected { background-color: var(--tema-nivel-esperado); }
/* A célula cresce com o conteúdo do botão, e o clique vale na célula inteira
   pela camada `::after` do botão, posicionada pela célula (A12, 23/10/2026).
   Antes era `height: 1px` na célula e `height: 100%` no botão: no Firefox a
   linha ficava na altura mínima do botão, e o texto da verificação era cortado
   e cobria o clique da linha de baixo. */
.mark-cell { position: relative; padding: 0 !important; vertical-align: top; }
.mark-btn {
    display: block; width: 100%; min-height: 3.5rem;
    border: 0; background: transparent; text-align: left;
    padding: 0.3rem 1rem 0.3rem 0.35rem; line-height: 1.25; color: inherit;
}
.mark-btn::after { content: ""; position: absolute; inset: 0; }
.mark-cell:has(> button):hover { background-color: var(--tema-celula-hover); }
.mark-table .mark-cell.is-marked { background-color: var(--tema-celula-marcada); }
/* Na página "Escrever relatório" a tabela é só leitura (etapa 5). */
.mark-readonly { cursor: default; min-height: 2.5rem; }
.mark-cell.is-marked .mark-btn::before {
    content: "\2713  "; font-weight: bold; color: var(--tema-celula-marca);
}
.mark-verif { display: none; margin-top: 0.25rem; color: var(--tema-texto-apoio); font-style: italic; }
.cap-marks-wrap.show-verif .mark-verif { display: block; }
/* Cada pergunta de verificação numa linha própria (A13). */
.mark-verif-pergunta { display: block; }
.mark-verif-pergunta + .mark-verif-pergunta { margin-top: .15rem; }
.mark-trace {
    position: absolute; top: 2px; right: 3px; z-index: 1;
    font-size: 0.65rem; color: var(--tema-texto-apoio); cursor: help;
}
.mark-status { font-size: 0.68rem; }

/* Perguntas do roteiro (etapa 4). A âncora abre a conversa e fica em destaque;
   Sondagem e Aprofundamento ficam em duas listas logo abaixo dela, fora da
   tabela e sempre à vista (A11, opção A, 23/10/2026): o nível ou o critério
   como subtítulo, e as perguntas embaixo, com o filete do roteiro. Em tela
   estreita, uma coluna só, a Sondagem primeiro. */
.cap-anchor {
    border-left: 3px solid var(--tema-ancora-filete); background-color: var(--tema-ancora-fundo);
    padding: 0.35rem 0.5rem; margin-bottom: 0.5rem; font-size: 0.82rem; font-weight: 500;
}
.cap-profile-question { font-weight: normal; font-size: 0.76rem; margin-top: 0.25rem; }
.roteiro-listas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin-bottom: .5rem; }
@media (max-width: 991.98px) { .roteiro-listas { grid-template-columns: 1fr; } }
.roteiro-titulo {
    font-size: .66rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--bs-secondary-color); margin-bottom: .2rem;
}
.roteiro-grupo + .roteiro-grupo { margin-top: .35rem; }
.roteiro-subtitulo { font-size: .72rem; font-weight: 600; }
.roteiro-pergunta {
    font-size: .74rem; font-style: italic; color: var(--tema-texto-roteiro);
    margin-top: .15rem; padding-left: .5rem; border-left: 2px solid var(--tema-roteiro-filete);
}

/* Linha de tabela que abre um registro (`<tr data-href>`, clique delegado em
   `tabela-filtravel.js`; etapa 3 do bloco B). */
tr[data-href] { cursor: pointer; }

/* Texto de várias linhas mostrado como foi escrito, com as quebras (os textos
   da Descrição e do Alinhamento da Posição, bloco D). */
.texto-com-quebra { white-space: pre-line; }

/* Tela de um prompt no Admin (bloco F, etapa 3): o texto pronto e a diferença
   entre versões. Linha acrescentada em verde claro, linha tirada em rosa claro
   e riscada, as duas com o texto em Azul WeHire. */
.prompt-texto,
.prompt-diferenca {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 32rem;
  overflow-y: auto;
  background: var(--bs-tertiary-bg);
  padding: .5rem .75rem;
  border-radius: .25rem;
}
.prompt-diferenca span {
  display: block;
}
.prompt-diferenca .diff-mais {
  background: rgba(var(--bs-success-rgb), .35);
}
.prompt-diferenca .diff-menos {
  background: rgba(var(--bs-danger-rgb), .1);
  text-decoration: line-through;
}
.prompt-diferenca .diff-trecho {
  color: var(--bs-secondary-color);
  margin-top: .5rem;
}

/* Painéis recolhíveis dos editores de PDF (A05, etapa 7 de
   `docs/planos/achados-lotes-1-a-3.md`). Um componente só para os sete
   editores: o título do painel é o cabeçalho, e o resto é o corpo, recolhido
   por padrão; `construcao_relatorio.js` abre e fecha. Recolhido, o painel que
   traz aviso (falta, transbordo, `painel-alerta`) mostra a marca no cabeçalho,
   como o `.wh-chip-alerta` do kit: recolher não esconde o que impede o PDF. */
.lateral > .painel > .painel-titulo {
  display: flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  user-select: none;
}
.lateral > .painel > .painel-titulo::before {
  font-family: bootstrap-icons;
  content: "\f285";
  font-size: .7rem;
  font-weight: 400;
}
.lateral > .painel.aberto > .painel-titulo::before { content: "\f282"; }
.lateral > .painel:not(.aberto) > .painel-titulo { margin-bottom: 0; }
.lateral > .painel:not(.aberto) > :not(.painel-titulo) { display: none !important; }
.lateral > .painel:not(.aberto).painel-alerta > .painel-titulo::after,
.lateral > .painel:not(.aberto).com-aviso > .painel-titulo::after {
  content: "aviso";
  margin-left: auto;
  border: 1.5px solid var(--wh-rosa);
  color: var(--wh-azul);
  border-radius: 999px;
  padding: 0 .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .3px;
}
.lateral > .painel > .painel-titulo:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* A barra do rodapé da página de editar do projeto (P4 de
   docs/planos/editar-do-projeto.md): sempre à vista, com "Salvar", "Voltar ao
   projeto" e o "Sem salvar", que é aviso (Azul Claro), não erro. O espaço no fim
   da página impede que ela cubra o último cartão. */
.barra-de-salvar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: .6rem 0;
}
.espaco-da-barra { height: 4.5rem; }
.barra-de-salvar-estado { color: var(--bs-info); font-size: .85rem; font-weight: 600; }
.barra-de-salvar-estado .bi { font-size: .5rem; vertical-align: middle; }

/* As Capacidades em três grupos na página de editar do projeto (A04, etapa 3 de
   docs/planos/editar-do-projeto.md): o título com o nível do grupo, e a lista,
   que recebe a Capacidade arrastada mesmo vazia. */
.grupo-de-capacidades-titulo { padding: .25rem 0 .35rem; border-bottom: 1px solid var(--bs-border-color); margin-bottom: .35rem; }
.lista-de-capacidades { min-height: 2.4rem; border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius); }
.lista-de-capacidades .alca-capacidade { cursor: grab; }

/* Texto livre numa célula de tabela (o motivo de um pedido de exclusão de
   documento, E6): respeita a quebra de linha e não estoura a coluna. */
.texto-quebra {
  white-space: pre-wrap;
  word-break: break-word;
}