/*
--------------------------------------------------------------------------
Plugin globalhumanr — identidade visual GlobalSys
--------------------------------------------------------------------------
Copyright (c) 2026 GlobalSys Ltda.
Licença Comercial - Todos os direitos reservados
--------------------------------------------------------------------------
O CulturaEGente (módulo antecessor) não tinha nenhum CSS próprio — 100%
Tabler/Bootstrap genérico do core. Este arquivo é o que dá ao módulo uma cara
própria (cores GlobalSys), sem reescrever componentes do core: os elementos
continuam sendo `.card`, `.btn`, `.badge`, `.datagrid` nativos, só com tokens
de cor aplicados por cima.
--------------------------------------------------------------------------
*/

:root {
    --gh-primary: #3b276b;
    --gh-primary-rgb: 59, 39, 107;
    --gh-accent: #e95119;
    --gh-accent-rgb: 233, 81, 25;
}

/* 10/09/2026, achado ao vivo ("colocou vermelho a cor da fonte"): as caixas de "modo leitura"
   (ver templates/macros/readonly.html.twig e sensitive.html.twig) originalmente usavam a
   classe NATIVA `.form-control.disabled` do Tabler só pra herdar o visual de caixa (borda,
   padding, altura) — mas essa classe pinta o texto com `var(--tblr-secondary)`, que MUDA
   conforme a paleta de cores escolhida no perfil do usuário (ver public/css_compiled/
   css_core_palettes.min.css) — numa das paletas esse tom é avermelhado (#d6665a), fazendo o
   texto parecer erro/aviso. Classe própria abaixo: MESMO box model de `.form-control` (pra
   continuar "do mesmo tamanho" do modo edição), mas cor de texto normal (`--tblr-body-color`),
   nunca dependente de paleta.
*/
.gh-readonly-box {
    display: block;
    width: 100%;
    min-height: calc(1.25rem + 2 * 0.5625rem + 2px);
    padding: 0.5625rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.03));
    border: var(--tblr-border-width, 1px) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius, 4px);
}

/* Botão primário do módulo */
.gh-btn-primary {
    background-color: var(--gh-primary);
    border-color: var(--gh-primary);
    color: #fff;
}
.gh-btn-primary:hover,
.gh-btn-primary:focus {
    background-color: color-mix(in srgb, var(--gh-primary) 85%, black);
    border-color: color-mix(in srgb, var(--gh-primary) 85%, black);
    color: #fff;
}

/* 11/09/2026: ícone do título passou a ficar branco (ver regra do fundo em degradê do
   `.gh-header`, mais abaixo no arquivo) — antes era colorido porque o fundo era branco. */

/* Badge de filtro ativo (busca aplicada) */
.gh-badge-filter {
    background-color: rgba(var(--gh-accent-rgb), 0.12);
    color: var(--gh-accent);
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
}

/* Realce do input de busca */
.gh-search .form-control:focus,
.gh-search:focus-within .input-group-text {
    border-color: var(--gh-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--gh-primary-rgb), 0.15);
}

/* Barra de filtros (busca + Cargo + Departamento) — o core do GLPI usa uma fonte MENOR pra
   select2 multi-select (.select2-selection--multiple) do que pra input de texto comum, então
   lado a lado na mesma linha os dois pareciam "fontes diferentes". Aqui igualamos só nesta
   barra, sem mexer no tamanho padrão dos multi-select em qualquer outro lugar do plugin. */
.gh-filter-toolbar .select2-selection--multiple,
.gh-filter-toolbar .select2-selection__rendered {
    font-size: var(--tblr-body-font-size);
}

/* 15/09/2026, achado ao vivo (print do usuário: "Cargo"/"Departamento" aparecendo cortados,
   "Car"/"Dep", mesmo depois de alargar o `<div>` wrapper em templates/talent/list.html.twig) —
   o GLPI calcula a largura do select2 via `width: calc(100% - ...)` e grava INLINE por JS
   (setupAjaxDropdown), que resolve pra um valor bem menor que o esperado dentro do layout flex
   desta barra de filtros. `!important` é necessário pra vencer esse `style="width: calc(...)"`
   que o próprio GLPI já grava inline no elemento. */
.gh-filter-toolbar .select2-container {
    min-width: 200px !important;
}

/* 15/09/2026, achado ao vivo (print do usuário: botão "Buscar" caindo pra linha de baixo do
   campo de busca em telas como Treinamentos, mesmo com espaço de sobra na linha) — a causa era
   outra: `.input-group` do próprio Bootstrap tem `width: 100%` fixo, então o campo (que fica
   FORA de um `input-group` com o botão, por pedido explícito do usuário) tomava a linha
   inteira sozinho, sem deixar espaço nenhum pro botão ao lado — `flex-grow-1` não resolvia
   porque a largura já tinha sido travada em 100% antes da conta de grow/shrink. Solta esse
   `width: 100%` só dentro das nossas barras de filtro, deixando o próprio flex (`flex-grow-1`
   já presente no elemento) decidir a largura de verdade, dividindo a linha com o botão. */
.gh-filter-toolbar .gh-search {
    width: auto;
}

/* Tira de indicadores (KPIs) da landing do módulo */
.gh-kpi {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--tblr-border-radius, 6px);
    background: var(--tblr-card-bg, #fff);
    border: 1px solid var(--tblr-border-color, rgba(0, 0, 0, 0.08));
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
a.gh-kpi:hover {
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.08);
    border-color: var(--gh-primary);
}
.gh-kpi-current {
    border-color: var(--gh-primary);
    box-shadow: inset 0 0 0 1px var(--gh-primary);
}

.gh-kpi-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.gh-kpi-count {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.1;
}

.gh-kpi-label {
    font-size: 0.8rem;
    color: var(--tblr-secondary-color, #6c757d);
}

.gh-kpi-green .gh-kpi-icon   { background: rgba(46, 184, 92, 0.15); color: #2eb85c; }
.gh-kpi-secondary .gh-kpi-icon { background: rgba(108, 117, 125, 0.15); color: #6c757d; }
.gh-kpi-orange .gh-kpi-icon  { background: rgba(var(--gh-accent-rgb), 0.15); color: var(--gh-accent); }
.gh-kpi-blue .gh-kpi-icon    { background: rgba(var(--gh-primary-rgb), 0.15); color: var(--gh-primary); }

/* Header dos modais do plugin (08/09/2026, pedido explícito do usuário) — lê a cor primária
   OFICIAL da marca (`--main-primary-color`, definida na Customização de IU da Entidade,
   Configurar > Entidades > id 0), com fallback pro roxo próprio do plugin (`--gh-primary`)
   pra uma instalação que não tenha essa customização configurada. Escopado em `.gh-modal`
   (classe própria em CADA modal do plugin — ver templates) de propósito: `.modal-header` sozinho
   recolore QUALQUER modal do GLPI inteiro (nativo ou de outro plugin), não só os nossos.
   `--main-primary-color-text` é a mesma variável que a Customização de IU já usa pro texto dos
   botões primários — reaproveitada aqui pra manter as DUAS pinturas (botão e header) coerentes
   entre si sempre que a cor da marca mudar. */
.gh-modal .modal-header {
    background: var(--main-primary-color, var(--gh-primary));
    color: var(--main-primary-color-text, #fff);
    border-bottom: none;
}
.gh-modal .modal-header .modal-title {
    color: inherit;
}
.gh-modal .modal-header .btn-close {
    /* O ícone do botão de fechar do Bootstrap é um SVG escuro fixo — não tem variável de cor
       própria. `invert(1)` deixa branco sobre o fundo colorido; `brightness(2)` compensa o preto
       não virar 100% branco puro nesse tipo de ícone com anti-aliasing. */
    filter: invert(1) grayscale(100%) brightness(2);
}

/* Cabeçalho dos cards do módulo (título + ícone) — mesmo padrão de cor do .gh-modal acima
   (08/09/2026, pedido explícito do usuário: "somente a parte de trás das palavras e do ícone",
   usando o header do modal "Editar Talento" como referência visual). Marcado com `.gh-card-header`
   (nunca `.card-header` sem escopo — essa classe é nativa do Tabler/Bootstrap e aparece em telas
   de fora do módulo também). */
.gh-card-header {
    background: var(--main-primary-color, var(--gh-primary));
    color: var(--main-primary-color-text, #fff);
    border-bottom: none;
}
.gh-card-header .card-title {
    color: inherit;
}

/* 11/09/2026, pedido explícito do usuário: modal "Novo item — Cargo" (aba "Cargo e Lotação",
   ícone "+" do dropdown `job_titles_id`) menor de COMPRIMENTO (altura, não largura — 1ª
   tentativa foi largura, corrigido pelo usuário).

   ACHADO AO VIVO (2ª correção, mesmo dia): um `height: 368px` simples aqui não bastava —
   `Ajax::createIframeModalWindow()` (JS nativo, mesma função) reajusta o `<iframe>` sozinho a
   cada carregamento (`$("#iframe...").height(doc.scrollHeight)`, SEM limite), pra caber o
   conteúdo inteiro sem scroll PRÓPRIO do iframe — isso grava um `style="height: ...px"` INLINE,
   que sempre vence uma regra externa de `height` comum (só `!important` bateria isso, gambiarra
   frágil). Como agora os 2 campos viraram richtext (TinyMCE, editor + toolbar cada), o conteúdo
   real ficou bem mais alto, e o JS inflava o modal até isso tudo — daí o scroll da PÁGINA
   inteira que o usuário reportou, feio e sem padrão.

   `max-height` em vez de `height`: essa propriedade SEMPRE limita o elemento, mesmo por cima de
   um `height` inline maior gravado por JS — nenhum "aposta de especificidade" aqui. O conteúdo
   que sobra fica com scroll PRÓPRIO do iframe (todo `<iframe>` já rola sozinho quando o
   documento de dentro é maior que a caixa) — mesmo efeito visual de `modal-dialog-scrollable`,
   já usado em todo modal PRÓPRIO do plugin, só que aplicado aqui ao iframe (`vh`, não px fixo,
   pra caber bem em qualquer tamanho de tela). */
[id^="add_dropdown_job_titles_id"] iframe {
    max-height: 65vh;
}

/* 10/09/2026 — a correção visual do Convite de Cadastro (front/onboarding.php: fundo, logo,
   centralização) mudou pra public/css/onboarding.css, carregada só naquela página via
   `custom_header_tags` (um <link> no <head>, ANTES do primeiro paint do body) — a abordagem
   anterior aqui (marcar `body.gh-onboarding-page` por JS) causava um "pisca": a página inteira
   desenhava sem a correção, e só reajustava depois que o script rodava, no fim do body. */

/* 11/09/2026, pedido explícito do usuário: fundo em degradê com as cores oficiais da marca
   (Manual da Marca GlobalSys) no cabeçalho DE CADA TELA do módulo ("a sessão de Treinamentos") —
   `.gh-header` (ícone + título + subtítulo + botões) é a MESMA classe reaproveitada em toda tela
   do módulo — Treinamentos, Talentos, Meus Treinamentos, hub self-service etc. — então o degradê
   aqui vale pra todas elas de uma vez, dando uma cara consistente ao módulo inteiro. (Uma
   tentativa anterior aplicou isso na barra NATIVA do GLPI — `<header data-testid="main-header">`,
   topo de toda a instalação — mas não era isso que o usuário pediu; removida.) */
.gh-header {
    background: linear-gradient(90deg, #1d1ddb 0%, #0000aa 100%);
    color: #fff;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
}

.gh-header h2,
.gh-header h2 i {
    color: #fff;
}

.gh-header .text-secondary {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Botões dentro do `.gh-header` invertem (fundo branco, texto na cor da marca) — o
   `.gh-btn-primary` roxo antigo e o `.btn-outline-secondary` cinza nativo ficavam ilegíveis
   sobre o degradê escuro. */
.gh-header .btn-outline-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background-color: transparent;
}
.gh-header .btn-outline-secondary:hover,
.gh-header .btn-outline-secondary:focus {
    color: #0000aa;
    background-color: #fff;
    border-color: #fff;
}

.gh-header .gh-btn-primary {
    background-color: #fff;
    border-color: #fff;
    color: #0000aa;
}
.gh-header .gh-btn-primary:hover,
.gh-header .gh-btn-primary:focus {
    background-color: color-mix(in srgb, #fff 85%, #0000aa);
    border-color: color-mix(in srgb, #fff 85%, #0000aa);
    color: #0000aa;
}

/* 11/09/2026, pedido explícito do usuário ("Meu Talento" self-service — "unifique essa parte
   de baixo com a parte de cima"): `.gh-header` também é usado como `.card-header` de VERDADE
   (dentro de um `.card`, unificando com o corpo abaixo num bloco só) — o `border-radius: 0.5rem`
   acima (pensado pro uso solto, banner de página) arredondaria os 4 cantos também aqui,
   destacando a base do cabeçalho do corpo do card logo abaixo. Só os cantos de CIMA arredondam
   nesse caso — o de baixo encosta reto no `card-body`. */
.card > .card-header.gh-header {
    border-radius: 0.5rem 0.5rem 0 0;
}

/* 11/09/2026, revisão de UX (2ª rodada, feedback de design sobre a tela de Feedback —
   "Gerenciar feedback" + polimento geral) — tudo escopado em `.gh-feedback-screen`
   (templates/feedback/selfservice.html.twig), nunca em `.card`/`.table`/`.form-label` crus, que
   são classes NATIVAS usadas em toda página do GLPI (inclusive fora do plugin). */

/* 16/09/2026, achado ao vivo (pedido do usuário: "coloca uma distância aí do final da página...
   chego no fim e tá grudado") — a página não tinha respiro nenhum embaixo, o rodapé de
   paginação de "Feedbacks realizados" encostava direto na borda da janela. */
.gh-feedback-screen {
    padding-bottom: 2rem;
}

/* Bordas suaves + sombra leve nos cards desta tela, no lugar da borda mais forte padrão do
   Tabler. */
.gh-feedback-screen .card {
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Respiro do container principal (card-body) e das linhas da tabela — pedido explícito:
   "padding: 24px" no container, "height: 52px mínima" nas linhas (via padding da célula, mais
   confiável entre navegadores do que `min-height` em `<tr>`). */
.gh-feedback-screen .card-body {
    padding: 1.5rem;
}
.gh-feedback-screen .table td,
.gh-feedback-screen .table th {
    padding: 0.9rem 1rem;
}

/* Separação clara entre o bloco de filtros e o resultado da tabela. */
.gh-feedback-filters {
    margin-bottom: 1.5rem;
}

/* Labels dos filtros ("Colaborador", "Direção", "De", "Até") — estavam muito apagados com a
   cor padrão `--tblr-secondary`. */
.gh-feedback-filters .form-label {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

/* Altura/borda uniformes entre o `<select>` comum, o select2 (Colaborador/Direção) e os campos
   de data — antes ficavam levemente diferentes lado a lado. */
.gh-feedback-filters .form-control,
.gh-feedback-filters .form-select,
.gh-feedback-filters .select2-selection {
    height: 40px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
.gh-feedback-filters .select2-selection__rendered {
    line-height: 38px;
}
.gh-feedback-filters .select2-selection__arrow {
    height: 38px;
}

/* Trunca título/nomes longos com reticências em vez de quebrar a linha da tabela (o conteúdo
   do feedback, abaixo do título, já truncava — só o título em si e os nomes não). */
.gh-feedback-screen .gh-truncate-cell {
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.gh-feedback-screen td .text-truncate {
    min-width: 0;
}

/* Botão de "Ocultar" (ícone de olho) na tabela — ícone limpo, sem o outline vermelho direto na
   linha (o aviso de verdade já é o modal de confirmação, que continua vermelho). */
.gh-feedback-screen .gh-icon-btn {
    background: transparent;
    border-color: transparent;
    color: #64748b;
}
.gh-feedback-screen .gh-icon-btn:hover,
.gh-feedback-screen .gh-icon-btn:focus {
    background: transparent;
    border-color: transparent;
    color: #1e293b;
}

/* 29/09/2026, pedido explícito do usuário ("o layout eu achei muito pobre") — a resposta única
   ao feedback (25/09/2026) virou um mini-cartão recuado, no lugar do texto corrido com link azul
   sublinhado: fundo destacado (mesmo token de .gh-readonly-box) + borda esquerda na cor primária
   do módulo, pra ler como "uma resposta dentro do card" e não texto solto. Botões Editar/Ocultar
   passam a ser .gh-icon-btn (mesmo ícone-só já usado no "Ocultar" de Feedbacks realizados), em
   vez de btn-link. */
.gh-feedback-reply {
    background-color: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.03));
    border-left: 3px solid var(--ghv-primary, var(--gh-primary));
    border-radius: 0 var(--tblr-border-radius, 4px) var(--tblr-border-radius, 4px) 0;
    padding: 0.625rem 0.875rem;
}
.gh-feedback-reply .gh-icon-btn {
    width: 1.75rem;
    height: 1.75rem;
}
.gh-feedback-reply-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* 29/09/2026, pedido explícito do usuário ("as questões estão muito distante das respostas") —
   as perguntas/respostas de template (ex.: grupo "Acordo" do SCI) usavam `dl.row` com
   `dt.col-5`/`dd.col-7`: grid do Bootstrap que reserva sempre 41,6% da largura pro rótulo, não
   importa o tamanho do texto — rótulo curto deixava um vão enorme antes da resposta. Grid próprio
   com coluna de rótulo do tamanho do CONTEÚDO (max-content), não uma fração fixa do card. */
.gh-answer-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.375rem;
}
.gh-answer-list dt {
    grid-column: 1;
    margin: 0;
    font-weight: 600;
    color: var(--tblr-secondary-color, #6c757d);
}
.gh-answer-list dd {
    grid-column: 2;
    margin: 0;
}
@media (max-width: 480px) {
    .gh-answer-list {
        grid-template-columns: 1fr;
        row-gap: 0.125rem;
    }
    .gh-answer-list dd {
        grid-column: 1;
        margin-bottom: 0.375rem;
    }
}

/* 11/09/2026, pedido explícito do usuário: "Meus rascunhos" virou carrossel (Bootstrap nativo,
   ver templates/feedback/selfservice.html.twig) em vez de lista — bolinhas de navegação PRÓPRIAS
   (o `.carousel-indicators` nativo do Bootstrap é feito pra ficar flutuando POR CIMA de uma
   imagem, fundo escuro/translúcido; aqui é dentro de um card branco comum). */
.gh-feedback-screen .gh-drafts-carousel-indicators button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #cbd5e1;
    opacity: 1;
    text-indent: -9999px;
}
.gh-feedback-screen .gh-drafts-carousel-indicators button.active {
    background-color: var(--gh-primary);
}

/* 16/09/2026, pedido explícito do usuário: "Feedbacks recebidos"/"Feedbacks realizados" (as
   duas listas paginadas por 3, ver front/feedback.php) ficavam com contraste visual feio ao
   trocar de página — 1 resultado numa página, 3 na outra, o card encolhia/crescia de forma
   brusca. Uma altura MÍNIMA (nunca máxima — conteúdo maior que isso continua crescendo normal)
   estabiliza o bloco. "Meus talentos" fica DE FORA de propósito (pedido explícito: só essa pode
   ir crescendo livre conforme o número, sem essa trava) — por isso é uma classe própria
   (`gh-paginated-list`), nunca um seletor genérico tipo `.list-group-flush`.

   16/09/2026, achado ao vivo (2ª rodada, pedido do usuário: "o tamanho não tá ficando
   compatível") — 15rem era pequeno demais pra bater com uma página cheia de linhas com
   resposta de template (2 perguntas + rótulos, várias linhas de texto cada); subido pra 24rem.
   Ainda é uma ESTIMATIVA (não há como medir a altura real da página 1 em CSS puro), mas junto
   da troca de card via AJAX agora (ghPaginateFeedbackFragment(), sem reload da página inteira)
   e da transição suave abaixo, o contraste que sobrar fica bem menos brusco. */
.gh-feedback-screen .gh-paginated-list {
    min-height: 24rem;
    transition: min-height 0.15s ease;
}

/* 12/09/2026, pedido explícito do usuário ("o modal ficou muito pequeno, precisa ser
   responsivo pra caber todas as informações"): popup de inscrição em Treinamento na Central
   (templates/central/popup.html.twig, o que os usuários realmente veem) E sua pré-visualização
   (templates/training/main_tab.html.twig, aba "Inscrição na Central" do RH) — as duas
   compartilham essa classe, mesmo `max-width` fixo (520px) que deixava a imagem de capa e o
   título espremidos. `min()` cresce até 700px em telas largas mas nunca passa de
   `calc(100% - 1rem)` — mesma margem de segurança que o `.modal-dialog` nativo já usa sozinho
   em telas pequenas, então continua cabendo em qualquer largura sem precisar de media query. */
.gh-training-popup-dialog {
    max-width: min(700px, calc(100% - 1rem));
}

/* 15/09/2026, pedido explícito do usuário ("trazer o layout semelhante ao que lhe passei") —
   layout "Canvas" dos Formulários de Feedback (PluginGlobalhumanrFeedbackTemplate::LAYOUT_CANVAS,
   ver templates/feedbacktemplate/_canvas.html.twig), reproduzindo a paleta do material de
   referência da Joicy (SCI/Calibragem) — cores PRÓPRIAS desta grade, não `--gh-primary`/
   `--gh-accent` (a identidade visual Globalsys unificada é item separado do backlog, T4).
   `auto-fit`/`minmax` em vez de `repeat(3, 1fr)` fixo: a Calibragem tem 6 caixas do MESMO
   tamanho (grade 3x2 natural), a SCI tem 3 caixas claras + 2 escuras mais largas — como a lista
   de perguntas é editável pelo RH (ordem/quantidade podem mudar), uma grade fixa quebraria fácil;
   `auto-fit` reflui sozinho pra qualquer contagem, sem position hardcoded por índice. */
.gh-canvas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* 15/09/2026, MESMO dia — 2ª rodada, pedido explícito do usuário ("nas caixas eu queria uma
   interação... quando interagir ele gira"): cada caixa é um FLIP CARD em CSS puro (`rotateY`),
   nunca um popup — decisão explícita do usuário depois de eu avisar do risco de reintroduzir o
   "modal dentro de modal" já corrigido em template_picker.html.twig.

   3ª rodada, MESMO dia, pedido explícito do usuário ("diminuir um pouco, ficou gigante... deixar
   um tamanho fixo, pra ter simetria entre as caixas"): a 1ª versão dava `display:grid` com FRENTE
   e VERSO na MESMA `grid-area`, crescendo pro maior dos dois lados — parecia simétrico à toa
   (cada caixa com um tamanho diferente, dependendo de ter 1 campo ou os 4 do Acordo/Plano de
   ação). Agora é altura FIXA (`--gh-canvas-box-h`) igual pra TODAS, frente e verso absolutamente
   posicionados um sobre o outro (técnica clássica de flip-card) — o verso ganha rolagem própria
   quando o conteúdo (ex.: os 4 campos agrupados) não cabe na altura fixa, em vez de esticar a
   caixa. */
.gh-canvas-box-flip {
    --gh-canvas-box-h: 200px;
    perspective: 1400px;
    height: var(--gh-canvas-box-h);
}
.gh-canvas-box-inner {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}
.gh-canvas-box-flip.is-flipped .gh-canvas-box-inner {
    transform: rotateY(180deg);
}
.gh-canvas-box-front,
.gh-canvas-box-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
}
.gh-canvas-box-front {
    background: #f1f2f6;
    cursor: pointer;
}
.gh-canvas-box-front:focus-visible {
    outline: 2px solid var(--gh-primary);
    outline-offset: 2px;
}
.gh-canvas-box-back {
    background: #fff;
    border: 1px solid #e4e6ef;
    transform: rotateY(180deg);
}
.gh-canvas-box-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
    color: #1a1a2e;
}
.gh-canvas-box-check {
    color: #2f9e44;
    margin-left: 0.35rem;
    font-size: 1rem;
    vertical-align: middle;
}
.gh-canvas-box-guidance {
    color: #6c757d;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gh-canvas-box-preview {
    color: #343a40;
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gh-canvas-box-cta {
    color: #6c757d;
    font-size: 0.8rem;
    margin-top: 0.35rem;
}
.gh-canvas-box-fields .form-field:last-child {
    margin-bottom: 0 !important;
}
/* 15/09/2026, pedido explícito do usuário ("aumente a distância 8%", depois "diminui pra 4%") —
   4% da altura fixa da caixa (`--gh-canvas-box-h: 200px`, ver acima) = 8px. */
.gh-canvas-box-actions {
    margin-top: 8px;
}
/* Caixa em destaque (fundo escuro) — "Pausa e escuta"/"Acordo" no material de referência da SCI.
   Cores do próprio material (navy/ciano Globalsys), não as tokens gerais do plugin. Sempre na
   FRENTE só — o verso (edição) fica sempre neutro/claro, pra não brigar com a legibilidade dos
   campos de formulário. */
.gh-canvas-box-front.gh-canvas-box-dark {
    background: #000a1e;
}
.gh-canvas-box-front.gh-canvas-box-dark .gh-canvas-box-title {
    color: #00f3ff;
}
.gh-canvas-box-front.gh-canvas-box-dark .gh-canvas-box-guidance,
.gh-canvas-box-front.gh-canvas-box-dark .gh-canvas-box-preview,
.gh-canvas-box-front.gh-canvas-box-dark .gh-canvas-box-cta {
    color: rgba(255, 255, 255, 0.75);
}
.gh-canvas-box-front.gh-canvas-box-dark .gh-canvas-box-check {
    color: #00f3ff;
}
/* Cor do título por tipo de caixa (material de referência da Calibragem: verde = manter/somar,
   vermelho = reduzir/parar, azul = começar, laranja = plano de ação/CTA). */
.gh-canvas-box-front.gh-canvas-box-green .gh-canvas-box-title  { color: #2f9e44; }
.gh-canvas-box-front.gh-canvas-box-red .gh-canvas-box-title    { color: #e03131; }
.gh-canvas-box-front.gh-canvas-box-blue .gh-canvas-box-title   { color: #1d1ddb; }
.gh-canvas-box-front.gh-canvas-box-orange .gh-canvas-box-title { color: #f77308; }

/* 15/09/2026, pedido explícito do usuário (achado ao vivo, print mostrando o card de "Meus
   Treinamentos" estourando a tela — Objetivo/Conteúdo programático podem ser um richtext bem
   longo) — corpo do card com altura LIMITADA + esmaecido no final, "Ver mais" (ver
   templates/mytrainings/index.html.twig) abre o conteúdo INTEIRO num modal. `mask-image` (com
   fallback `-webkit-` pro Safari) esmaece só o texto cortado, sem precisar de um elemento extra
   sobreposto. */
.gh-mytraining-card-body {
    max-height: 260px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* 17/09/2026, pedido explícito do usuário ("quero melhorar esta parte para ser assim mais
   bonito", com print do slider do Sólides como referência): a tabela crua dos 24 pares
   comportamentais (Descritivo consolidado do Cargo) vira uma lista de linhas em formato slider
   — percentuais nas pontas, características flanqueando uma barra com um marcador na posição
   da dosagem, e a "leitura" (Predomina/Equilíbrio/Exclusivamente) como legenda abaixo dela. É
   um resumo SÓ LEITURA (o valor já foi respondido no formulário do gestor) — nunca um slider
   arrastável de verdade, por isso sem input/thumb interativo.
*/
.gh-dosage-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--tblr-border-color);
}
.gh-dosage-row:last-child {
    border-bottom: none;
}
.gh-dosage-percent {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--gh-primary);
    font-variant-numeric: tabular-nums;
}
.gh-dosage-percent--a { text-align: right; }
.gh-dosage-percent--b { text-align: left; }
.gh-dosage-label {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--tblr-body-color);
}
.gh-dosage-label--a { text-align: right; }
.gh-dosage-label--b { text-align: left; }
.gh-dosage-track-wrap {
    flex: 1 1 220px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.gh-dosage-track {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--tblr-border-color);
}
.gh-dosage-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--gh-primary);
}
.gh-dosage-dot {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gh-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gh-primary) 16%, transparent);
    transform: translate(-50%, -50%);
}
.gh-dosage-dot--empty {
    background: var(--tblr-secondary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tblr-secondary) 14%, transparent);
}
.gh-dosage-leitura {
    font-size: 0.72rem;
    color: var(--tblr-secondary);
    white-space: nowrap;
}

/* ==========================================================================
   Visual v2 — piloto na tela Talentos (24/09/2026, pedido explícito do usuário)
   --------------------------------------------------------------------------
   Mesmo desenho aprovado no plugin Financeiro (globalfinance): faixa de
   cabeçalho com brilho/textura, indicadores sobrepostos, cartões e tabela.
   Classes NOVAS (gh-page, gh-hero, gh-stat…): nenhuma regra acima foi
   alterada, então as telas que usam `.gh-header`/`.gh-kpi` ficam iguais até
   a aprovação. Cores da Customização de IU (CSS da entidade raiz) com valor
   de reserva; superfícies do Tabler para o tema escuro.
   ========================================================================== */
.gh-page {
    --ghv-primary: var(--main-primary-color, #1d1ddb);
    --ghv-secondary: var(--main-secondary-color, #000a1e);
    --ghv-secondary-2: var(--main-secondary-color-hover, #1e3d79);
    --ghv-accent: var(--gs-accent, #f77308);
    --ghv-active: var(--gs-active, #478ece);
    --ghv-radius: calc(var(--gs-radius, 6px) * 2);
    --ghv-shadow-sm: var(--gs-shadow-sm, 0 1px 3px rgba(0, 10, 30, .08));
    --ghv-shadow-md: var(--gs-shadow-md, 0 4px 16px rgba(0, 10, 30, .12));
    --ghv-ease: var(--gs-transition, .18s ease-out);
    --ghv-surface: var(--tblr-bg-surface, #fff);
    --ghv-border: var(--tblr-border-color, rgba(30, 61, 121, .16));
    --ghv-muted: var(--tblr-secondary, #5b6380);
    padding-bottom: 2rem;
}

/* ---- Faixa ---- */
.gh-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem 3.25rem;
    border-radius: var(--ghv-radius);
    color: #fff;
    background:
        radial-gradient(38rem 16rem at 100% 0%, rgba(0, 243, 255, .22), transparent 60%),
        radial-gradient(22rem 12rem at 0% 120%, rgba(247, 115, 8, .18), transparent 70%),
        linear-gradient(120deg, var(--ghv-primary) 0%, var(--ghv-secondary-2) 55%, var(--ghv-secondary) 100%);
    box-shadow: var(--ghv-shadow-md);
}
.gh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
    pointer-events: none;
}
.gh-hero__art {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    font-size: 11rem;
    line-height: 1;
    color: rgba(255, 255, 255, .07);
    pointer-events: none;
}
.gh-hero__body { position: relative; min-width: 0; }
.gh-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .55rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}
.gh-hero__eyebrow::before {
    content: "";
    width: 1.4rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ghv-accent);
}
.gh-hero__title {
    margin: 0;
    font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.05rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
}
.gh-hero__subtitle { margin: .45rem 0 0; font-size: .95rem; color: rgba(255, 255, 255, .82); }
.gh-hero__actions { position: relative; display: flex; flex-wrap: wrap; gap: .6rem; flex-shrink: 0; }
.gh-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    transition: background-color var(--ghv-ease), transform var(--ghv-ease);
}
.gh-hero-btn i { font-size: 1.1rem; }
.gh-hero-btn:hover,
.gh-hero-btn:focus-visible { color: #fff; background: rgba(255, 255, 255, .22); transform: translateY(-1px); }

/* Ação principal da tela (onde antes havia `gh-btn-primary`): laranja da marca */
.gh-hero-btn--primary {
    background: var(--ghv-accent);
    border-color: var(--ghv-accent);
    box-shadow: 0 6px 18px rgba(247, 115, 8, .35);
}
.gh-hero-btn--primary:hover,
.gh-hero-btn--primary:focus-visible {
    background: var(--ghv-accent);
    box-shadow: 0 10px 24px rgba(247, 115, 8, .45);
    transform: translateY(-2px);
}

/* Faixa compacta: telas sem indicadores logo abaixo (autoatendimento, pendências) */
.gh-hero--compact {
    align-items: center;
    padding: 1.25rem 1.75rem;
    margin-bottom: 1.25rem;
}
.gh-hero--compact .gh-hero__art { font-size: 7.5rem; }
.gh-hero--compact .gh-hero__title { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); }

/* ---- Indicadores ---- */
.gh-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
    margin: -2rem 1.25rem 1.25rem;
}
.gh-stat {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--ghv-border);
    border-radius: var(--ghv-radius);
    background: var(--ghv-surface);
    box-shadow: var(--ghv-shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform var(--ghv-ease), box-shadow var(--ghv-ease), border-color var(--ghv-ease);
}
a.gh-stat:hover,
a.gh-stat:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--ghv-shadow-md);
    border-color: var(--ghv-tone);
    color: inherit;
}
.gh-stat.is-active {
    border-color: var(--ghv-tone);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ghv-tone) 18%, transparent);
}
.gh-stat--green     { --ghv-tone: #15803d; }
.gh-stat--secondary { --ghv-tone: #94a3b8; }
.gh-stat--orange    { --ghv-tone: var(--ghv-accent); }
.gh-stat--blue      { --ghv-tone: var(--ghv-primary); }
.gh-stat--red       { --ghv-tone: #c92a2a; }
.gh-stat--yellow    { --ghv-tone: var(--tblr-yellow, #f59f00); }
.gh-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gh-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gh-stat__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: calc(var(--ghv-radius) - 2px);
    background: color-mix(in srgb, var(--ghv-tone) 13%, transparent);
    color: var(--ghv-tone);
    font-size: 1.35rem;
}
.gh-stat__text { display: flex; flex-direction: column; min-width: 0; }
.gh-stat__value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gh-stat__label { font-weight: 600; font-size: .86rem; }
.gh-stat__go {
    margin-left: auto;
    color: var(--ghv-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--ghv-ease), transform var(--ghv-ease);
}
a.gh-stat:hover .gh-stat__go,
a.gh-stat:focus-visible .gh-stat__go { opacity: 1; transform: none; }

/* ---- Cartões, tabela e estado vazio ---- */
.gh-page .gh-tabs { margin-bottom: 1rem; }
.gh-card {
    overflow: hidden;
    border: 1px solid var(--ghv-border);
    border-radius: var(--ghv-radius);
    background: var(--ghv-surface);
    box-shadow: var(--ghv-shadow-sm);
}
.gh-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--ghv-border);
}
.gh-card__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .98rem; font-weight: 700; }
.gh-count {
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--ghv-primary) 12%, transparent);
    color: var(--ghv-primary);
}
.gh-table thead th {
    padding-top: .7rem;
    padding-bottom: .7rem;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ghv-muted);
    background: color-mix(in srgb, var(--ghv-primary) 4%, var(--ghv-surface));
    border-bottom: 1px solid var(--ghv-border);
}
.gh-table tbody tr { transition: background-color var(--ghv-ease); }
.gh-table tbody tr:hover { background: color-mix(in srgb, var(--ghv-primary) 5%, transparent); }
.gh-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--ghv-accent); }
.gh-table tbody td a:not(.gh-icon-btn) { font-weight: 600; text-decoration: none; }
/* Lista de Talentos: férias vencidas / a vencer em até 30 dias (29/09/2026). */
.gh-table tbody tr.gh-row-alert-overdue { background: color-mix(in srgb, #c92a2a 6%, transparent); }
.gh-table tbody tr.gh-row-alert-overdue td:first-child { box-shadow: inset 3px 0 0 #c92a2a; }
.gh-table tbody tr.gh-row-alert-soon { background: color-mix(in srgb, var(--ghv-accent) 7%, transparent); }
.gh-table tbody tr.gh-row-alert-soon td:first-child { box-shadow: inset 3px 0 0 var(--ghv-accent); }
.gh-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--ghv-border);
    color: var(--ghv-primary);
    text-decoration: none;
    transition: background-color var(--ghv-ease), color var(--ghv-ease), border-color var(--ghv-ease);
}
.gh-icon-btn:hover,
.gh-icon-btn:focus-visible { background: var(--ghv-primary); border-color: var(--ghv-primary); color: #fff; }
.gh-empty { border-style: dashed; }
.gh-empty__icon {
    display: inline-grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    font-size: 2rem;
    color: var(--ghv-primary);
    background: color-mix(in srgb, var(--ghv-primary) 10%, transparent);
}

/* ---- Telas menores e movimento reduzido ---- */
@media (max-width: 991.98px) {
    .gh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: .5rem; }
}
@media (max-width: 575.98px) {
    .gh-hero { flex-direction: column; align-items: flex-start; padding: 1.35rem 1.25rem 3rem; }
    .gh-hero__art { font-size: 7rem; right: -.5rem; }
    .gh-stats { gap: .6rem; margin-inline: 0; }
    .gh-stat { padding: .8rem; gap: .6rem; }
    .gh-stat__icon { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
    .gh-stat__value { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .gh-page *, .gh-page *::before { transition: none !important; animation: none !important; }
}