:root {
    --bg-color: #1a1a24;
    --card-bg: #252533;
    --primary: #7264EA;
    --text-main: #ffffff;
    --text-muted: #a0a0b8;
    --danger: #ff4d4d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

html,
body {
    overflow-x: clip;
}

body {
    display: flex;
    font-family: 'Inter', sans-serif;
    /* Reduzido de 16px para ~11px */
    font-size: 12.8px;
    color: white;
    background-color: black;
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- Cores Utilitárias --- */
.green { color: #34d399; }
.blue { color: #4a90e2; }
.purple { color: #7264EA; }
.orange { color: #F5A623; }
.red { color: rgb(239, 68, 68); }
.almost-red { color: rgb(249, 115, 22); }
.gray { color: #c5c4c4; }
.display-none { display: none !important; }

/* --- Header / Sidebar --- */

.svg-logo {
    /* 48px -> 32px */
    width: 38.4px;
    height: 38.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(166, 144, 16);
    background-color: rgb(22, 19, 32);
    /* 1rem -> 0.67rem */
    padding: 0.804rem;
    position: relative;
    border-radius: 7.2px;
    border: 1px solid rgba(134, 98, 255, 0.2);
    box-shadow: 0 0 1px rgba(238, 255, 5, 0.4), inset 0 0 2px rgba(238, 255, 5, 0.2);
}

.svg-logo svg {
    position: absolute;
    /* 24px -> 16px */
    width: 19.2px;
    height: 19.2px;
}

.text-logo {
    /* 25px -> 17px */
    font-size: 20.4px;
    font-weight: 700;
}

/* Animação Hamburger */

/* Ajuste fino na translação */

/* --- Sidebar colapsável no desktop (mini-sidebar) ---------------------------
   .nav-mini é o estado "só ícones", alternado por .toggle-nav-desktop e
   persistido em localStorage (script.js). É deliberadamente separado de
   .clicado (hamburguer mobile, <=992px): os dois estados nunca coexistem
   porque o botão some nos breakpoints mobile, onde o hamburguer já resolve.
   Como styles.css também é servido sem media query, os arquivos de <=992px
   precisam neutralizar .nav-mini — veja o bloco correspondente lá. */
/* Vive dentro do .logo, ao lado da imagem (mesmo lugar do .abrir-header): o
   .logo-content tem width:100%, então empurra o botão para a direita do header.
   flex-shrink: 0 impede que ele seja espremido quando a faixa encolhe. */

/* Expandido a seta aponta ← ("recolher"); colapsado ela gira para → ("abrir"). */

/* O .logo continua no lugar (ele hospeda a seta), só perde a imagem — que é um
   wordmark largo e ilegível a 72px. Centraliza a seta na faixa. */

/* --- Sumiço dos labels -------------------------------------------------------
   Os textos não podem usar display:none (não é animável): eles somem com fade
   e colapsam a própria caixa. Tudo — fade, colapso, largura do header e giro
   da seta — usa a MESMA curva e o MESMO tempo, sem delay, começando junto, nos
   dois sentidos. O overflow/nowrap fica declarado nos dois estados para não
   haver mudança discreta no meio do caminho. A visibility acompanha a mesma
   duração (vira discreta no fim do fade), só para o texto colapsado não ser
   lido por leitor de tela. */

/* Ícones centralizados na faixa estreita. */

/* O chevron do Reports sai do fluxo quando a faixa fecha.
   Ele é irmão do .nav-item que carrega o ícone e, mesmo colapsado por
   max-width: 0, continuava ocupando ~16px na linha flex — o ícone era
   centralizado no espaço que sobrava e ficava 8.31px à esquerda do centro,
   desalinhado dos outros. Fora do fluxo, o ícone centraliza na faixa inteira.
   Absoluto (em vez de display: none) preserva o fade junto com os labels. */

/* --- Navegação --- */

/* Submenu "Reports" (Gestão de Reports / Treinamento Compliance / FAQ) —
   mesmo padrão visual usado nos painéis avulso/user para Exercícios/Pausa
   Mental/etc. (.tem-sub-lista / .sub-lista / .li-subitem). */

/* --- Perfil --- */

/* --- Main Content --- */
.site-content {
    width: 100%;
    background-color: #161320;
    /*
      Grows to fill the remaining space inside the body flex container
      (which is row on desktop, column on mobile). On desktop this is a
      no-op cosmetically since align-items: stretch already filled it;
      on mobile, this is what prevents the "black area" below the
      content when the active section is empty (e.g. Reports with no
      tickets).
    */
    flex: 1;
}

.content-header {
    /* 2.1rem 4rem -> 1.4rem 2.68rem */
    padding: 1.68rem 3.2rem;
    background-color: rgb(31 29 43 / 0.5);
    border-bottom: 2px solid rgb(255 255 255 / 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sistema {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 0.6rem -> 0.4rem */
    gap: 0.48rem;
    color: #34d399;
    border-radius: 80.4px;
    /* 10px 15px -> 7px 10px */
    padding: 8.4px 12px;
    border: 1px solid rgb(52 211 153 / 0.3);
    background-color: rgb(52 211 153 / 0.1);
}

.sistema svg {
    /* 12px -> 8px */
    width: 9.6px;
    height: 9.6px;
    fill: #34d399;
}

/* --- Container e Sub-Header --- */
.container-1700 {
    margin: 0 auto;
    width: 100%;
    /* 1700px -> 1140px (67%) */
    max-width: 1360px;
    padding: 1.6rem 3.2rem;
    display: flex;
    flex-direction: column;
    /* 40px -> 27px */
    gap: 32px;
}

.sub-header {
    /* 2rem -> 1.34rem */
    padding: 0 0 1.6rem 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid rgb(255 255 255 / 0.1);
}

.sub-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.sub-header-text h2 { font-size: 38.4px; }
.sub-header-text p { font-size: 16px; }

.close-btn-section {
    /* 32px -> 21px */
    width: 25.2px;
    height: 25.2px;
    color: #c5c4c4;
    transition: color 0.1s ease;
}

.close-btn-section:hover {
    color: white;
    cursor: pointer;
}

/* Gaps ajustados */
.gap-32 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* 32px -> 21px */
    gap: 25.6px;
}

.gap-48 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* 48px -> 32px */
    gap: 38.4px;
}

.periodos-navegacao {
    position: relative;
    z-index: 2;
    width: 100%;
    /* 24px -> 16px */
    padding: 19.2px;
    background-color: rgb(31, 29, 43);
    border-radius: 9.6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.space-btw {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Seletor de data da Visão Principal (Hoje/Semana/Mês foram substituídos
   por isso): sem o wrapper .selecionar-prazo que a aba Comparar usa, ele
   herdaria width: 100% do flex e ocuparia todo o espaço entre si e
   Exportar/Comparar, esparramando os dois inputs nas pontas com um vão
   vazio enorme no meio. */
#selecao-periodo-principal {
    max-width: 320px;
    flex-shrink: 0;
}

/* "Indícios de humor (entusiasmo, neutro, raiva, tristeza)": a lista entre
   parênteses é longa demais para o mesmo peso do título — fica como
   legenda, na mesma linha quando cabe e quebrando abaixo quando não cabe. */
.humor-subtitulo {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 500;
    color: rgb(156, 163, 175);
}

.periodos {
    width: fit-content;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    /* 24px -> 16px */
    gap: 19.2px;
}

.periodos li {
    white-space: nowrap;
    /* 12px 20px -> 8px 13px */
    padding: 9.6px 15.6px;
    /* 18px -> 12px */
    font-size: 14.4px;
    color: rgb(156, 163, 175);
    font-weight: 700;
    border-radius: 9.6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.periodo.ativo {
    background-color: rgb(52, 211, 153);
    color: rgb(31, 29, 43);
}

/*
  Month picker chip.

  This <li> contains a self-styled .selecao dropdown so we strip the
  default .periodos li chrome (padding, font-size, hover background)
  and let the inner .selecao define its own appearance. It only renders
  when the "Esse Mês" period is the active one (controlled by
  manager-dashboard.js via the display-none class).
*/
.periodos li.periodo-mes-picker {
    padding: 0;
    background: transparent;
    border: none;
    cursor: default;
    /* Match the visual height of sibling chips so the row stays balanced */
    min-width: 168px;
}
.periodos li.periodo-mes-picker .selecao {
    margin: 0;
    /* fit-content keeps the chip from forcing the whole row wider than it needs */
    width: 100%;
}
.periodos li.periodo-mes-picker .selecao .selecionado {
    cursor: pointer;
}
.periodos li.periodo-mes-picker .selecao .selecionado h3 {
    font-size: 13.2px;
    font-weight: 700;
}
.periodos li.periodo-mes-picker .prazos-selecoes-suspenso {
    /*
      Float the dropdown over the surrounding chips so opening it doesn't
      push the periodo navigation taller. Anchor to the chip's own box.
    */
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 168px;
    background-color: rgb(22, 19, 32);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8.4px;
    z-index: 20;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
    padding: 8.4px;
    max-height: 280px;
    overflow-y: auto;
}
.periodos li.periodo-mes-picker {
    position: relative;
}

.comparar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 18px -> 12px */
    font-size: 14.4px;
    background-color: rgb(74, 144, 226);
    /* 12px 20px -> 8px 13px */
    padding: 9.6px 15.6px;
    color: white;
    font-weight: 700;
    border-radius: 9.6px;
    border: none;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.comparar-btn:hover {
    background-color: rgb(21, 129, 252);
}

/* ---------------------------------------------------------------------------
   Dica (i) do botão "Comparar"

   O ícone mora DENTRO do <button id="comparar">, então todo clique nele
   dispara também a troca para a aba Comparar — quem impede isso é o
   stopPropagation/preventDefault no handler em script.js. Aqui a única
   responsabilidade do CSS é o balão.

   Desktop (ponteiro fino, com hover real): abre no :hover/:focus-visible.
   Touch: `hover: hover` não casa, então o balão só abre via classe .aberto,
   colocada pelo mesmo handler, e fecha no clique fora.
   ------------------------------------------------------------------------- */
.comparar-btn {
    /* âncora do balão + espaço entre o rótulo e o (i) */
    position: relative;
    gap: 6px;
}

/* SEM position: relative aqui de propósito. Se o (i) virasse bloco contentor,
   o balão ancoraria nos 18px do ícone e o `right: 0` do mobile o jogaria para
   fora da tela pela esquerda. Ancorado no .comparar-btn ele tem a largura do
   botão inteiro para se apoiar. */
.info-dica {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* alvo de toque maior que o desenho de 14px, sem alargar o botão */
    margin: -6px -2px -6px 0;
    padding: 6px 2px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: color 0.15s ease;
}

.info-dica:hover,
.info-dica:focus-visible,
.info-dica.aberto {
    color: rgb(255, 255, 255);
    outline: none;
}

.info-dica-balao {
    position: absolute;
    /* Ancorado no .comparar-btn (o único ancestral posicionado) e alinhado
       pela DIREITA dele, crescendo para a esquerda.

       Centralizar sob o botão seria mais bonito, mas o Comparar muda de lugar
       em cada faixa — de 769 a 992px o `space-between` joga o bloco de ações
       para a borda direita do card e um balão centrado vazava da tela; abaixo
       de 500px o botão é full-width e o balão nascia colado nas duas bordas.
       Alinhado à direita ele cresce sempre para dentro do card, que é mais
       largo que os 240px do balão em qualquer breakpoint. */
    top: calc(100% + 8px);
    right: 0;
    transform: translateY(-4px);
    z-index: 20;
    width: max-content;
    max-width: min(240px, calc(100vw - 64px));
    padding: 8px 10px;
    border-radius: 8.4px;
    background-color: rgb(22, 19, 32);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.info-dica.aberto .info-dica-balao {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Só onde existe hover de verdade — em touch o :hover "gruda" depois do
   toque e o balão ficaria aberto sozinho, brigando com a classe .aberto. */
@media (hover: hover) and (pointer: fine) {
    .info-dica:hover .info-dica-balao,
    .info-dica:focus-visible .info-dica-balao {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------------------------
   Texto de apoio da visão padrão

   Vive dentro de .periodo-com-ajuda, um wrapper que existe só para colar o
   helper na barra de períodos: como filho direto do .gap-48 ele herdaria os
   38.4px de gap e flutuaria no meio do nada. O respiro para os cards de baixo
   continua vindo do gap do .gap-48, com um empurrãozinho do margin-bottom.

   O wrapper NÃO cria stacking context (sem position/z-index/transform), então
   o `z-index: 2` do .periodos-navegacao continua valendo contra a lista de
   insights e o dropdown de Exportar segue por cima dos cards.
   ------------------------------------------------------------------------- */
.periodo-com-ajuda {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 9.6px;
    margin-bottom: 4.8px;
}

.periodo-helper-text {
    width: 100%;
    padding: 0 2.4px;
    color: rgba(156, 163, 175, 0.75);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.lista-insights {
    width: 100%;
}

.insight {
    width: 100%;
    /* 32px -> 21px */
    padding: 25.2px;
    background-color: rgb(31, 29, 43);
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* 20px -> 13px */
    border-radius: 15.6px;
}

.insight h2 {
    /* 26px -> 17.5px */
    font-size: 21px;
    font-weight: 700;
}

.gap-24 {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    /* 24px -> 16px */
    gap: 19.2px;
}

.periodo, .periodoTextContainer {
    /* 12px -> 8px */
    padding: 9.6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    /* 12px -> 8px */
    font-size: 9.6px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-radius: 7.2px;
}

.gap-16 {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    /* 16px -> 11px */
    gap: 12.8px;
}

.especificidades {
    list-style: none;
    width: 100%;
}

.especificidades li {
    width: 100%;
    /* 12px -> 8px */
    padding-bottom: 9.6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Garante respiro entre o nome (Excelente/Entusiasmo/...) e a barra de
       porcentagem mesmo quando o espaço aperta — sem isso, space-between
       deixa a barra crescer até colar no texto em telas estreitas. */
    gap: 12px;
}

.especificidades li h3 {
    color: rgba(209, 213, 219, 0.74);
    font-weight: 700;
}

.especificidades li p {
    /* 18px -> 12px */
    font-size: 14.4px;
}

.barra {
    overflow: hidden;
    position: relative;
    width: 100%;
    /* 18px -> 12px */
    height: 14.4px;
    border-radius: 7.2px;
    background-color: rgb(55, 65, 81);
}

.barra-porcentagem {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 8.4px era pouco para a barra não colar no texto da porcentagem em
       telas estreitas */
    gap: 12px;
    width: 100%;
    /* 220px -> 147px */
    max-width: 176.4px;
    font-weight: 700;
}

.barra-preenchida {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
}

.barra-porcentagem p {
    /* 18px -> 12px */
    font-size: 14.4px;
    font-weight: 700;
}

#excelende-bar-preenchida, #alegria-bar-preenchida {
    background-color: #34D399;
}

#boa-bar-preenchida {
    background-color: rgb(245, 158, 11);
}

#ruim-bar-preenchida, #raiva-bar-preenchida {
    background-color: rgb(249, 115, 22);
}

#critico-bar-preenchida, #tristeza-bar-preenchida {
    background-color: rgb(239, 68, 68);
}

.color-excelente {
    color: #34D399;
}

.color-boa {
    color: rgb(245, 158, 11);
}

.color-ruim {
    color: rgb(249, 115, 22);
}

.color-critico {
    color: rgb(239, 68, 68);
}

.color-azul {
    color: rgb(74, 144, 226);
}

.color-roxo {
    color: rgb(114, 100, 234);
}

.color-vermelho {
    color: rgb(239, 68, 68);
}

.classificacao-status {
    color: rgba(255, 255, 255, 0.4);
    /* 18px -> 12px */
    font-size: 14.4px;
    font-weight: 700;
}

#neutro-bar-preenchida {
    background-color: rgb(74, 144, 226);;
}

.h2-svg {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 10px -> 7px */
    gap: 8.4px;
}

.degrade-roxo {
    background: linear-gradient(to right, rgb(114, 100, 234), rgb(74, 144, 226));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#abrir-periodos-mob {
    cursor: pointer;
    transition: color 0.3s ease;
}

#abrir-periodos-mob:hover {
    color: #b8b8b8;;
}

.periodos-invisiveis {
    width: calc(100% + 1px);
    flex-direction: column;
    position: absolute;
    z-index: 0;
    left:-0.5px;
    top: 100%;
    border-radius: 0 0 9.6px 9.6px;
    background-color: #1F1D2B;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    /* 1.5rem -> 1rem */
    padding-bottom: 1.2rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.noBorderBottom {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.wid100 {
    width: 100%;
}

.lista-comparar {
    width: 100%;
}

.linha-comparacao {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    /* 20px -> 13px */
    gap: 15.6px;
}

.linha-horizontal {
    /* 300px -> 200px */
    height: 240px;
    /* 2px -> 1.5px */
    width: 1.5px;
    background-color: rgba(255, 255, 255, 0.1);
}

.prazosDiv {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 40px -> 27px */
    gap: 32.4px;
}

.gap-8 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /* 8px -> 5px */
    gap: 6.4px;
}

.selecionar-prazo {
    width: 100%;
    /* 500px -> 335px */
    max-width: 402px;
}

.selecionar-prazo p {
    color: rgb(156, 163, 175);
    /* 14px -> 10px */
    font-size: 12px;
    font-weight: 700;
    line-height: 140%;
}

.selecao {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    /* 12px 16px -> 8px 11px */
    padding: 9.6px 13.2px;
    /* 14px -> 10px */
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    background-color: rgb(22, 19, 32);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8.4px;
}

.selecionado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#selecao-a-abrir, #selecao-b-abrir {
    cursor: pointer;
}

.prazos-selecoes-suspenso {
    width: 100%;
    /* 20px -> 13px */
    padding-top: 15.6px;
    /* 10px -> 7px */
    padding-bottom: 8.4px;
}

.prazos-selecoes-suspenso li {
    width: 100%;
    cursor: pointer;
    /* 8px -> 5px */
    padding: 6px;
    border-radius: 6px;
    /* 16px -> 11px */
    font-size: 13.2px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    transition: background-color 0.3s ease;
}

.prazos-selecoes-suspenso li:hover {
    background-color: rgb(35, 29, 53);
}

.cancelar-btn {
    /* 18px -> 12px */
    font-size: 14.4px;
    /* 12px 20px -> 8px 13px */
    padding: 9.6px 15.6px;
    color: rgb(156, 163, 175);
    font-weight: 700;
    border-radius: 9.6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.2s ease;
    background-color: transparent;
    cursor: pointer;
}

.cancelar-btn:hover:hover {
    background-color: #161320;
}

.prazos-selecoes-suspenso li.ativo {
    display: none !important;
}

/* Date range picker (aba Comparar): substitui o dropdown fixo de
   Hoje/Semana/Mês por dois inputs de data reais (início e fim). */
.selecao-data-range {
    display: flex;
    align-items: center;
    gap: 8px;
    /* o único filho hoje é .input-data-wrapper (o ícone decorativo saiu);
       min-width: 0 evita que os inputs estourem o card em telas estreitas */
    min-width: 0;
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgb(22, 19, 32);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8.4px;
}

.selecao-data-range .input-data-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.selecao-data-range input[type="date"] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color-scheme: dark;
}

/* Indicador do date picker: o ícone de calendário decorativo que ficava à
   esquerda do range foi removido e o MESMO desenho (lucide "calendar") passou
   a ser o botão que realmente abre o calendário, em cada um dos 6 inputs.
   `appearance: none` derruba o desenho nativo do Chrome (a setinha/relógio) e
   o background-image entra no lugar; o stroke vai fixo em #9ca3af porque
   `currentColor` não resolve dentro de um data URI. Sem `filter: invert()`,
   que existia só para clarear o ícone nativo. */
.selecao-data-range input[type="date"]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0 0 0 4px;
    opacity: 0.85;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    transition: opacity 0.15s ease;
}

.selecao-data-range input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Firefox não expõe o pseudo-elemento acima; lá o input continua com o
   botão nativo do próprio navegador (color-scheme: dark já o deixa claro). */

.selecao-data-range .data-separador {
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.space-btw.gapl-30 {
    align-items: stretch;
    /* 30px -> 20px */
    gap: 24px;
}

.classificacao-reports {
    background-color: #1F1D2B;
    /* 24px -> 16px */
    padding: 19.2px;
    width: 100%;
    border-radius: 13.2px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.classificacao-reports-header {
    /* (100% + 48px) -> +32px */
    width: calc(100% + 38.4px);
    /* -24px -> -16px */
    margin-left: -19.2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* 24px -> 16px */
    padding: 19.2px;
    padding-top: 0;
    /* 16px -> 11px */
    font-size: 13.2px;
    font-weight: 600;
}

.lista-reports {
    /* 24px -> 16px */
    padding-top: 19.2px;
}

.lista-reports li {
    width: 100%;
    /* 16px -> 11px */
    padding: 13.2px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 9.6px;
    align-items: flex-end !important;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.lista-reports li:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.reports-info {
    color: rgb(107, 114, 128);
    /* 12px -> 8px */
    font-size: 9.6px;
    font-weight: 500;
    line-height: 13.2px;
    /* Sem gap, a data ("Há 23h") cola direto no título quando ele é longo
       e quebra linha — o space-between (herdado de .space-btw) só separa
       os extremos, não garante respiro mínimo entre eles. */
    gap: 12px;
}

.reports-info h4 {
    /* Some o título quebra em 2+ linhas; a data não deve encolher pra
       abrir espaço — ela é curta e sempre cabe no fim da primeira linha. */
    flex: 1;
    min-width: 0;
}

.reports-info p {
    flex-shrink: 0;
    white-space: nowrap;
}

.report-description {
    width: 100%;
    text-align: left;
    /* 16px -> 11px */
    font-size: 13.2px;
    color: rgb(209, 213, 219);
}

/* Indicador de tag/categoria do Report na listagem do gestor:
   bolinha colorida + label curto, para não competir por espaço com o
   título/data (que já têm regras delicadas de quebra de linha). */
.report-tag-indicador {
    display: flex;
    align-items: center;
    gap: 4.8px;
    font-size: 9.6px;
    font-weight: 700;
    white-space: nowrap;
}

.report-tag-indicador .bolinha {
    width: 6.4px;
    height: 6.4px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: rgb(52, 211, 153); /* operational (default) */
}

.report-tag-indicador.tag-hr_management .bolinha {
    background-color: #F5A623;
}

.report-tag-indicador.tag-legal .bolinha {
    background-color: rgb(239, 68, 68);
}

.report-tag-indicador.tag-hr_management {
    color: #F5A623;
}

.report-tag-indicador.tag-legal {
    color: rgb(239, 68, 68);
}

.report-tag-indicador:not(.tag-hr_management):not(.tag-legal) {
    color: rgb(52, 211, 153);
}

/* Seletor de tag no modal de detalhes (mesmo padrão visual do
   seletor de status já existente: chips clicáveis). */
.tag-opcao {
    width: 100%;
    padding: 14.4px 9.6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9.6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8.4px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.tag-opcao:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.tag-opcao.operational {
    background-color: rgb(52, 211, 153);
    color: black;
}

.tag-opcao.hr_management {
    background-color: #F5A623;
    color: black;
}

.tag-opcao.legal {
    background-color: rgb(239, 68, 68);
    color: black;
}

.abrir-detalhes-report {
    /* 10px 18px -> 7px 12px */
    padding: 8.4px 14.4px;
    border-radius: 3.6px;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    /* 14px -> 10px */
    font-size: 12px;
    color: white;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.abrir-detalhes-report:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* =========================
   Treinamento Compliance (FAQ de Reports)
   ========================= */

.lista-compliance {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 40px -> 27px */
    gap: 32px;
    padding-top: 19.2px;
}

.compliance-categoria {
    width: 100%;
    padding: 25.2px;
    background-color: rgb(31, 29, 43);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15.6px;
}

.compliance-categoria > h2 {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 16px;
}

.compliance-lista-itens {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compliance-item {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.compliance-item:last-child {
    border-bottom: none;
}

.compliance-item-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14.4px 0;
    cursor: pointer;
}

.compliance-item-header h3 {
    font-size: 15.2px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.compliance-item-header.red { color: rgb(239, 68, 68); }
.compliance-item-header.orange { color: #F5A623; }
.compliance-item-header.blue { color: #4a90e2; }
.compliance-item-header.green { color: #34D399; }
.compliance-item-header.purple { color: #7264EA; }

.abrir-compliance-details {
    flex-shrink: 0;
    width: 20.8px;
    height: 20.8px;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.abrir-compliance-details.compliance-details-aberto {
    transform: rotate(180deg);
}

.compliance-item-resposta {
    font-size: 14.4px;
    line-height: 1.6;
    color: rgb(156, 163, 175);
    padding-bottom: 16px;
    padding-right: 36px;
    white-space: pre-line;
}

/* =========================
   FAQ (Painel do Gestor) — mesmo padrão visual do Treinamento
   Compliance acima, com classes próprias para não colidir.
   ========================= */

.lista-faq {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 19.2px;
}

.faq-categoria {
    width: 100%;
    padding: 25.2px;
    background-color: rgb(31, 29, 43);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15.6px;
}

.faq-categoria > h2 {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 16px;
}

.faq-lista-itens {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14.4px 0;
    cursor: pointer;
}

.faq-item-header h3 {
    font-size: 15.2px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.faq-item-header.red { color: rgb(239, 68, 68); }
.faq-item-header.orange { color: #F5A623; }
.faq-item-header.blue { color: #4a90e2; }
.faq-item-header.green { color: #34D399; }
.faq-item-header.purple { color: #7264EA; }

.abrir-faq-details {
    flex-shrink: 0;
    width: 20.8px;
    height: 20.8px;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.abrir-faq-details.faq-details-aberto {
    transform: rotate(180deg);
}

/* As quebras do JSON viram <br> na renderização (faq.js), então aqui o
   white-space volta a ser normal — com pre-line cada \n contaria duas
   vezes e a resposta ficaria com o dobro de espaçamento. */
.faq-item-resposta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.4px;
    line-height: 1.6;
    color: rgb(156, 163, 175);
    padding-bottom: 16px;
    padding-right: 36px;
    white-space: normal;
}

.faq-item-texto {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.faq-copiar-feedback {
    flex-shrink: 0;
    padding: 8px 14.4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Inter', sans-serif;
    font-size: 12.8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.faq-copiar-feedback:hover {
    background-color: rgba(114, 100, 234, 0.15);
    border-color: rgba(114, 100, 234, 0.4);
    color: #ffffff;
}

.faq-copiar-feedback.faq-copiar-erro {
    border-color: rgba(239, 68, 68, 0.4);
    color: rgb(239, 68, 68);
}

/* Barra de busca do FAQ — mesmo formato da busca de Colaboradores. */
.faq-search-header {
    display: flex;
    align-items: center;
    gap: 15.6px;
    width: 100%;
    margin-top: 19.2px;
    padding: 21.6px 26.4px;
    background-color: rgb(31, 29, 43);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14.4px;
}

.faq-search-header input {
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    font-size: 16.2px;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.faq-search-header input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.faq-sem-resultados {
    width: 100%;
    padding-top: 19.2px;
    font-size: 14.4px;
}

.pop-ups {
    position: fixed;
    backdrop-filter: blur(8px);
    background-color: #1a1a24a6;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pop-up {
    width: 100%;
    /* 1000px -> 670px */
    max-width: 804px;
    /* 48px -> 32px */
    padding: 38.4px;
    background-color: #1F1D2B;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 13.2px;
}

.title-close {
    /* 24px -> 16px */
    padding-bottom: 19.2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.title-close h2 {
    color: white;
    /* 32px -> 21.5px */
    font-size: 25.8px;
    font-weight: 700;
}

.title-close svg {
    color: rgb(156, 163, 175);
    /* 28px -> 19px */
    width: 22.8px;
    height: 22.8px;
    cursor: pointer;
}

.conversa {
    /* 20px -> 13px */
    padding: 15.6px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 9.6px;
}

.conversa-message {
    color: rgb(209, 213, 219);
    /* 16px -> 11px */
    font-size: 13.2px;
    /* 28px -> 19px */
    line-height: 22.8px;
}

.report-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 12px -> 8px */
    gap: 9.6px;
    /* 14px -> 10px */
    font-size: 12px;
    font-weight: 700;
    color: rgb(107, 114, 128);
}

.message-space {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    /* 15px -> 10px */
    gap: 12px;
    flex-direction: column;
}

.message-space h3 {
    width: 100%;
    /* 16px -> 11px */
    font-size: 13.2px;
    color: rgb(156, 163, 175);
    font-weight: 600;
}

.message-space textarea {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 9.6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* 150px -> 100px */
    min-height: 120px;
    /* 20px -> 13px */
    padding: 15.6px;
    /* 20px -> 13.5px */
    font-size: 16.2px;
    color: white;
    transition: border-color 0.2s ease;
    resize: none;
    font-family: 'Inter', sans-serif;
}

.message-space textarea::placeholder {
    font-size: 16.2px;
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.7);
}

.message-space textarea:focus {
    border-color: #4a90e2;
    outline: none;
}

.status {
    /* 12px -> 8px */
    gap: 9.6px;
}

.status-opcao {
    width: 100%;
    /* 18px 12px -> 12px 8px */
    padding: 14.4px 9.6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9.6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8.4px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.status-opcao:hover {
    background-color: rgba(255, 255, 255, 0.1);;
}

.buttons-options {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 9.6px;
}

.buttons-options button {
    width: 100%;
    /* 20px -> 13px */
    padding: 15.6px;
    background-color: transparent;
    border: none;
    color: white;
    /* 18px -> 12px */
    font-size: 14.4px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 9.6px;
}

.btn-enviar {
    background-color: rgb(52, 211, 153) !important;
    color: black !important;
}

.status-opcao.concluido {
    background-color: rgb(52, 211, 153);
    color: black;
}

.status-opcao.andamento {
    background-color: #F5A623;
    color: black;
}

.status-opcao.aberto {
    background-color: rgb(239, 68, 68);
    color: black;
}

.mensagem {
    width: 100%;
    /* 24px 16px -> 16px 11px */
    padding: 19.2px 13.2px;
    background-color: #1F1D2B;
    border-radius: 9.6px;
}

.mensagem h4 {
    /* 17px -> 11.5px */
    font-size: 13.8px;
    font-weight: 700;
}

.mensagem p {
    /* 16px -> 11px */
    font-size: 13.2px;
    color: rgb(209, 213, 219);
}

.mensagem-gestor {
    color: #4a90e2;
    border-left: 2px solid #4a90e2;;
}

.mensagem-cliente {
    align-items: flex-end;
    justify-content: flex-end;
    color: rgb(52, 211, 153);
    border-right: 2px solid rgb(52, 211, 153);
}

.conversas {
    list-style: none;
    width: 100%;
}

/* ====== Comparação em 2 colunas ====== */
.comparacao-duas-colunas {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* 20px -> 13px */
    gap: 15.6px;
    width: 100%;
}

.coluna-comparacao {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 32px -> 21px */
    gap: 25.2px;
}

/* ====== Barras por classe (sem IDs duplicados) ====== */
.bar-excelente { background-color: #34D399; }
.bar-boa       { background-color: rgb(245, 158, 11); }
.bar-ruim      { background-color: rgb(249, 115, 22); }
.bar-critico   { background-color: rgb(239, 68, 68); }
.bar-neutro    { background-color: rgb(74, 144, 226); }

.img {
    width: 100%;
}


.modais {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.71);
    backdrop-filter: blur(8px);
    z-index: 999;
}

/* @media 1700 -> ajustado para 1140 */
@media (max-width: 1140px) {
  .space-btw.gapl-30 {
    flex-direction: column;
    align-items: stretch;
    /* 24px -> 16px */
    gap: 19.2px;
  }

  .classificacao-reports {
    width: 100%;
  }
}

/* --- Botão Exportar e Dropdown --- */
/*
  Actions wrapper (Export + Compare). Previously this had inline
  `display: flex; gap: 12px; align-items: center` on the JSX
  element; moved here so the gap and child sizing can respond to
  viewport width without inline-style specificity getting in the way.
*/
.actions-wrapper {
    display: flex;
    align-items: center;
    gap: 14.4px;
}

.export-container {
    position: relative;
    z-index: 10;
}

.export-btn {
    display: flex;
    align-items: center;
    /* 8px -> 5px */
    gap: 6px;
    /* 16px -> 11px */
    font-size: 13.2px;
    background-color: rgb(114, 100, 234);
    /* 12px 18px -> 8px 12px */
    padding: 9.6px 14.4px;
    color: white;
    font-weight: 700;
    border-radius: 9.6px;
    border: none;
    transition: background-color 0.2s ease, transform 0.1s;
    cursor: pointer;
}

.export-btn:hover {
    background-color: rgb(113, 14, 200);
}

.export-btn:active {
    transform: translateY(2px);
}

/* -----------------------------------------------------------------------------
   "Exportar" na aba Comparar: ícone sozinho, rótulo abrindo no hover.

   Ao entrar na comparação o script.js move este mesmo botão para o header de
   lá e marca o container com .export-minimizado. O espaço ali é do PERIODO A
   + PERIODO B, então o botão encolhe até o ícone em vez de sumir.

   Mesmo mecanismo dos botões do rodapé do Detox Mental: o rótulo NÃO usa
   `display: none` — ele continua no fluxo, com a largura limitada a zero,
   porque só assim dá para animar a abertura. O `gap` entra na conta junto:
   fechado ele deixaria uma sobra entre o ícone e um rótulo invisível, e o
   botão não ficaria redondo em volta do ícone.
   -------------------------------------------------------------------------- */
.export-minimizado .export-btn {
    gap: 0;
    transition: background-color 0.2s ease, transform 0.1s,
                gap 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.export-minimizado .export-btn-rotulo {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease 0.04s;
}

.export-minimizado .export-btn:hover,
.export-minimizado .export-btn:focus-visible {
    gap: 6px;
}

.export-minimizado .export-btn:hover .export-btn-rotulo,
.export-minimizado .export-btn:focus-visible .export-btn-rotulo {
    max-width: 8rem;
    opacity: 1;
}

/* O dropdown é ancorado à direita (right: 0) no container, que encolheu junto
   com o botão. Sem isto ele abriria alinhado a um container de ~40px e
   escaparia da tela pela esquerda. */
.export-minimizado .export-dropdown {
    right: auto;
    left: 0;
}

/* Sem mouse não existe hover: no toque o rótulo fica sempre aberto, senão o
   botão viraria um ícone sem nome que ninguém sabe o que faz. Vale para
   qualquer largura — um tablet de 1024px também cai aqui. */
@media (hover: none) {
    .export-minimizado .export-btn {
        gap: 6px;
    }

    .export-minimizado .export-btn-rotulo {
        max-width: 8rem;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .export-minimizado .export-btn,
    .export-minimizado .export-btn-rotulo {
        transition-duration: 0.01ms;
    }
}

/* ------------------------------------------------------------------
   Reordenação visual a partir de 993px (cobre desktop puro >1140px E
   a faixa tablet 993-1140px, que usa o mesmo layout em linha — só o
   empilhamento vertical de fato começa em <=768px, em styles-768.css).

   Pedido: [calendário] [Comparar] ---- espaço máximo ---- [Exportar]

   Por que isso é feito só em CSS, sem mudar o DOM/JSX:
   No breakpoint <=468px (styles-468.css), o botão Comparar PRECISA
   continuar dentro de .actions-wrapper, porque a regra de empilhamento
   mobile (.actions-wrapper { order:1; flex-direction:column; ... })
   depende de Comparar e Exportar serem filhos desse wrapper para
   ficarem um abaixo do outro corretamente. Mover Comparar para fora
   do wrapper no DOM quebraria esse empilhamento.

   A solução é "soltar" os filhos do wrapper apenas visualmente nessa
   faixa: display:contents remove a caixa do .actions-wrapper sem
   remover seus filhos do DOM, fazendo export-container e comparar-btn
   participarem do flex de .periodos-navegacao como se fossem filhos
   diretos dela — daí o `order` de cada um decide a posição final.
   Suporte: todos os navegadores modernos (Chrome/Firefox/Safari/Edge
   desde 2017+). Em um navegador hipotético sem suporte, o pior caso é
   manter o visual atual (sem quebrar nada).

   Confirmado sem conflito: nem styles-1500.css, nem styles-1200.css,
   nem styles-992.css tocam display/order de .actions-wrapper,
   .comparar-btn ou .export-container — só ajustam flex-wrap/gap do
   .periodos-navegacao, que continua coexistindo normalmente.
   ------------------------------------------------------------------ */
@media (min-width: 993px) {
    .periodos-navegacao.space-btw {
        justify-content: flex-start;
    }

    .selecao-data-range {
        order: 1;
    }

    .actions-wrapper {
        display: contents;
    }

    .comparar-btn {
        order: 2;
        margin-left: 14.4px;
    }

    .export-container {
        order: 3;
        margin-left: auto;
    }
}

/* Header da COMPARAÇÃO: o "Exportar" (minimizado) fica à ESQUERDA do
   "Cancelar", e os dois viajam juntos para a ponta direita. Sem isto, de 769 a
   992px o `space-between` espalhava os três filhos e deixava um vão enorme
   entre os botões. A regra genérica .export-container (order: 3 +
   margin-left: auto, no @media de 993px) continua servindo ao header
   principal, onde o Exportar é o último; aqui os dois seletores de classe
   ganham dela por especificidade, em qualquer ordem no arquivo. */
@media (min-width: 769px) {
    .export-container.export-minimizado {
        order: 2;
        margin-left: auto;
    }

    .cancelar-btn {
        order: 3;
    }
}

/* Acima de 1200px a barra é uma linha só e NÃO tem `gap` próprio — de 769 a
   1200 ela ganha `flex-wrap: wrap` e `gap: 12px` (styles-1200 e styles-992),
   que já cuidam do respiro. Por isso as margens vivem só aqui: aplicá-las nas
   outras faixas somava ao gap (12 + 14.4 = 26px entre os botões) e o
   margin-right ainda descontava da .prazosDiv, que tem width: 100% e deixava
   de alcançar a borda do padding. */
@media (min-width: 1201px) {
    .prazosDiv {
        margin-right: 14.4px;
    }

    .cancelar-btn {
        margin-left: 14.4px;
    }
}

/* Dropdown Menu */
.export-dropdown {
    position: absolute;
    /* +8px -> +5px */
    top: calc(100% + 6px);
    right: 0;
    /* 160px -> 107px */
    width: 128.4px;
    background-color: #252533;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9.6px;
    /* sombra ajustada */
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    list-style: none;
    flex-direction: column;
    /* 6px -> 4px */
    padding: 4.8px;
    display: flex;
}

.export-dropdown.display-none {
    display: none;
}

.export-dropdown li {
    /* 10px 12px -> 7px 8px */
    padding: 8.4px 9.6px;
    display: flex;
    align-items: center;
    /* 10px -> 7px */
    gap: 8.4px;
    color: rgba(255, 255, 255, 0.8);
    /* 14px -> 9.5px */
    font-size: 11.4px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.export-dropdown li:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.export-dropdown li svg {
    opacity: 0.8;
}

.collaborators-utils {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 19.2px;
}

.collaborators-info {
    width: 100%;
    padding: 1.8rem;
    background-color: #1F1D2B;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 19.2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.collaborators-info-text.gap-16 {
    gap: 6px;
}


.collaborators-info-text h3 {
    font-size: 21px;
}

.collaborators-info-text p {
    font-size: 16.8px;
    color: rgb(156, 163, 175);
}

.collaborators-info-quantity.gap-16 {
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 6px;
}

.collaborators-info-quantity h3{
    text-align: center;
    font-size: 43.2px;
    color: rgb(74, 144, 226);
}

.collaborators-info-quantity h3.licenca-cheia {
    color: rgb(239, 68, 68);
}

.collaborators-info-quantity h3.licenca-alerta {
    color: rgb(245, 158, 11);
}

.collaborators-info-quantity p{
    font-family: 'Roboto', sans-serif;
    font-size: 14.4px;
    font-weight: 500;
    color: #6B7280;
    white-space: nowrap;

}

/* Indicador de vagas de licença: mesma estrutura do bloco "VIDAS ATIVAS",
   mas reduzido — não deve competir visualmente com o número principal. */
.collaborators-info-quantity-small {
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 2px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.collaborators-info-quantity-small h3 {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: rgb(74, 144, 226);
}

.collaborators-info-quantity-small h3.licenca-cheia {
    color: rgb(239, 68, 68);
}

.collaborators-info-quantity-small h3.licenca-alerta {
    color: rgb(245, 158, 11);
}

.collaborators-info-quantity-small p {
    font-family: 'Roboto', sans-serif;
    font-size: 9.6px;
    font-weight: 500;
    color: #6B7280;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.collaborators-action {
    width: 100%;
    max-width: 396px;
    background-color: #4A90E2;
    border-radius: 19.2px;
    padding: 1.8rem;
    transition: background-color 0.2s ease;
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.4);
    cursor: pointer;
}

.collaborators-action:hover {
    background-color: #4281c9;
}

.collaborators-action svg {
    width: 33.6px;
    height: 33.6px;
}

.collaborators-action p {
    font-size: 18px;
    font-weight: 700;
}

.collaborators-action.gap-8 {
    align-items: center;
    justify-content: center;
    gap: 12px;
}


/* ==========================================================================
   Colaboradores - Lista e Ações (Atualizado +10%)
   ========================================================================== */

.action-bar-selection {
    background-color: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 9.6px;
    padding: 15.6px 26.4px;
    align-items: center;
    transition: all 0.3s ease;
}

.btn-action-bar {
    display: flex;
    align-items: center;
    gap: 10.8px;
    padding: 10.8px 21.6px;
    border-radius: 7.2px;
    font-size: 14.4px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    color: white;
    transition: background-color 0.2s;
}

.btn-excluir {
    background-color: rgb(239, 68, 68);
}

.btn-excluir:hover {
    background-color: rgb(220, 38, 38);
}

.btn-desfazer {
    background-color: rgb(16, 185, 129);
}

.btn-desfazer:hover {
    background-color: rgb(5, 150, 105);
}

.colab-table-container {
    background-color: rgb(31, 29, 43);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14.4px;
    width: 100%;
    overflow: hidden;
}

.colab-search-header {
    display: flex;
    align-items: center;
    gap: 15.6px;
    padding: 21.6px 26.4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.colab-search-header input {
    background: transparent;
    border: none;
    color: white;
    width: 100%;
    font-size: 16.2px;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.colab-search-header input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.colab-list-header {
    padding: 16.8px 26.4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: rgba(0, 0, 0, 0.1);
}

.colab-list {
    list-style: none;
    max-height: 336px; /* Aumentado para acomodar os novos espaçamentos de 5 itens */
    overflow-y: auto;
}

/* Scrollbar personalizada para a lista */
.colab-list::-webkit-scrollbar {
    width: 7.2px;
}
.colab-list::-webkit-scrollbar-track {
    background: transparent;
}
.colab-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}
.colab-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.colab-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 21.6px 26.4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s;
}

.colab-item:last-child {
    border-bottom: none;
}

.colab-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.colab-item.selected {
    background-color: rgba(74, 144, 226, 0.05);
}

.colab-status {
    padding: 6px 12px;
    border-radius: 6.4px;
    font-weight: 700;
    font-size: 11.2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.colab-status.status-ativo {
    background-color: rgba(52, 211, 153, 0.1);
    color: #34D399;
}

.colab-status.status-inativo {
    background-color: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
}

/* Filtro de status (Todos / Ativos / Inativos) */
.colab-filtros {
    display: flex;
    gap: 8px;
}

.colab-filtro-btn {
    padding: 6.4px 14.4px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: transparent;
    color: #9CA3AF;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.colab-filtro-btn:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.colab-filtro-btn.ativo {
    background-color: rgba(74, 144, 226, 0.12);
    border-color: rgba(74, 144, 226, 0.4);
    color: #4a90e2;
}

/* Custom Checkbox */
.colab-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 21.6px;
    height: 21.6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4.8px;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.colab-checkbox:checked {
    background-color: #4A90E2;
    border-color: #4A90E2;
}

.colab-checkbox:checked::after {
    content: '✔';
    color: white;
    font-size: 13.2px;
}


/* ==========================================================================
   Modal Adicionar Colaboradores (Atualizado +10%)
   ========================================================================== */

.modal-add-colab {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content-colab {
    background-color: #1F1D2B; /* Fundo da modal */
    border: 1px solid rgba(255, 255, 255, 0.05); /* Bordas mantidas iguais */
    border-radius: 14.4px;
    width: 100%;
    max-width: 660px; /* 500px -> 550px */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.modal-header-colab {
    padding: 31.2px; /* 24px -> 26px */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.modal-header-colab h2 {
    font-size: 26.4px; /* 20px -> 22px */
    color: white;
}

.close-icon {
    color: rgb(156, 163, 175);
    cursor: pointer;
    transition: color 0.2s;
}

.close-icon:hover {
    color: white;
}

.modal-tabs-colab {
    display: flex;
    padding: 0 31.2px; /* 24px -> 26px */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 31.2px; /* 24px -> 26px */
}

.tab-btn-colab {
    background: transparent;
    border: none;
    color: rgb(156, 163, 175);
    font-size: 16.2px; /* 12px -> 13.5px */
    font-weight: 600;
    padding: 21.6px 0; /* 16px -> 18px */
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tab-btn-colab:hover {
    color: white;
}

.tab-btn-colab.active {
    color: #4A90E2;
    border-bottom: 2px solid #4A90E2; /* Bordas mantidas iguais */
}

.modal-body-colab {
    padding: 31.2px; /* 24px -> 26px */
    min-height: 198px; /* 150px -> 165px */
}

.label-colab {
    font-size: 13.2px; /* 10px -> 11px */
    font-weight: 700;
    color: rgb(156, 163, 175);
    letter-spacing: 0.5px;
}

.input-colab, .textarea-colab {
    width: 100%;
    background-color: #161320;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Bordas mantidas iguais */
    border-radius: 9.6px;
    padding: 18px 21.6px; /* 14px 16px -> 15px 18px */
    color: white;
    font-size: 18px; /* 13.5px -> 15px */
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.input-colab::placeholder, .textarea-colab::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.input-colab:focus, .textarea-colab:focus {
    border-color: #4A90E2;
}

.textarea-colab {
    resize: none;
    height: 132px; /* 100px -> 110px */
}

.csv-dropzone {
    width: 100%;
    border: 1px dashed rgba(255, 255, 255, 0.2); /* Bordas mantidas iguais */
    border-radius: 9.6px;
    padding: 42px; /* 32px -> 35px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    background-color: rgba(255, 255, 255, 0.02);
}

.csv-dropzone:hover {
    background-color: rgba(74, 144, 226, 0.05);
    border-color: rgba(74, 144, 226, 0.5);
}

.modal-footer-colab {
    padding: 31.2px; /* 24px -> 26px */
    display: flex;
    gap: 21.6px; /* 16px -> 18px */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancelar-colab, .btn-importar-colab {
    width: 100%;
    padding: 16.2px; /* 12px -> 13.5px */
    border-radius: 9.6px;
    font-size: 18px; /* 13.5px -> 15px */
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancelar-colab {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-cancelar-colab:hover {
    background: rgba(255, 255, 255, 0.05);
}

.btn-importar-colab {
    background-color: #4A90E2;
    border: none;
    color: white;
}

.btn-importar-colab:hover {
    background-color: #357ABD;
}


/* ==========================================================================
   Modal Adicionar Colaboradores - Animações e Ajustes Finais
   ========================================================================== */

/* Animação suave de entrada (Scale e Fade) */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-15px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-add-colab {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Aciona a animação apenas quando a modal perde o display-none */
.modal-add-colab:not(.display-none) .modal-content-colab {
    animation: modalFadeIn 0.3s ease-out forwards;
}

.modal-content-colab {
    background-color: #1F1D2B;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14.4px;
    width: 100%;
    max-width: 660px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

/* ... mantenha .modal-header-colab, .modal-tabs-colab ... */

.tab-content-colab {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Gap aumentado (+2px) */
}

.label-colab {
    font-size: 15.6px; /* Aumentado 2px (era 11px) */
    font-weight: 700;
    color: rgb(156, 163, 175);
    letter-spacing: 0.5px;
}

/* ... mantenha o restante das classes de inputs e dropzone ... */

.btn-importar-colab {
    background-color: #4A90E2;
    border: none;
    color: white;
    transition: all 0.2s;
}

.btn-importar-colab:hover:not(:disabled) {
    background-color: #357ABD;
}

/* Estado visual para botão desabilitado */
.btn-importar-colab:disabled {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
}


/* Ajuste mobile — vira coluna abaixo de 500px */
@media (max-width: 500px) {
    /* Tudo em coluna: Exportar → Comparar → Hoje */
    .periodos-navegacao.space-btw {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .actions-wrapper {
        order: 1;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }

    .export-container {
        width: 100%;
    }

    .export-btn,
    .comparar-btn {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
        font-size: 13.6px;
    }

    /* Botões + chip "Hoje" com altura idêntica na coluna */
    .export-btn,
    .comparar-btn,
    .periodos .periodo {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 13.6px;
        line-height: 1.2;
    }

    /* Chip ativo abaixo dos botões, mesma largura */
    .periodos {
        order: 2;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .periodos .periodo {
        width: 100%;
        text-align: center;
        border-radius: 9.6px;
    }

    /* Dropdown sem shadow acima */
    .export-dropdown {
        box-shadow: none;
        border-top: none;
        border-radius: 0 0 9.6px 9.6px;
    }

    /* Painel de comparação: cancelar fica full width na coluna */
    .cancelar-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   RESPONSIVIDADE - SEÇÃO DE COLABORADORES E MODAL
   ========================================================================== */

/* Ajustes para Tablets e telas médias (Até 992px) */
@media (max-width: 992px) {
    .collaborators-utils {
        flex-direction: column;
    }

    .collaborators-action {
        max-width: 100%;
    }
}

/* Ajustes para Mobile (Até 768px) */
@media (max-width: 768px) {
    
    /* Barra de ações (seleção de itens) */
    .action-bar-selection {
        flex-direction: column;
        align-items: flex-start;
        gap: 19.2px;
        padding: 19.2px;
    }

    .action-bar-selection > div {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    .btn-action-bar {
        width: 100%;
        justify-content: center;
        padding: 14.4px;
    }

    /* Lista de Colaboradores */
    .colab-search-header, 
    .colab-list-header, 
    .colab-item {
        padding: 19.2px;
    }

    /* Busca do FAQ — mesmo respiro reduzido da busca de Colaboradores */
    .faq-search-header {
        padding: 19.2px;
    }

    .faq-search-header input {
        font-size: 14.4px;
    }

    /* Sem a coluna extra da seta, a resposta ganha a largura toda */
    .faq-item-resposta {
        padding-right: 0;
    }

    /* Proteção para e-mails muito grandes não quebrarem o layout */
    .colab-item p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 240px; /* Ajuste flexível */
    }

    .colab-item > div {
        width: 100%;
    }

    /* Modal de Perfil — menor no mobile (reduzido proporcionalmente) */
    .modais {
        padding: 16px;
    }

    /* Modal de Adicionar Colaboradores — menor no mobile (reduzido proporcionalmente) */
    .modal-add-colab {
        padding: 12px;
    }

    .modal-content-colab {
        max-height: 88vh;
        overflow-y: auto;
        max-width: 400px;
    }

    .modal-header-colab,
    .modal-tabs-colab,
    .modal-body-colab,
    .modal-footer-colab {
        padding: 14px;
    }

    .modal-header-colab h2 {
        font-size: 19px;
    }

    .modal-header-colab p {
        font-size: 12.5px !important;
    }

    .modal-body-colab {
        min-height: 150px;
    }

    .label-colab {
        font-size: 11.5px;
    }

    .input-colab,
    .textarea-colab {
        padding: 12px 14px;
        font-size: 14px;
    }

    .textarea-colab {
        height: 110px;
    }

    .modal-tabs-colab {
        gap: 16px;
        justify-content: space-between;
    }

    .tab-btn-colab {
        font-size: 13px;
        padding: 14px 0;
    }

    .csv-dropzone {
        padding: 24px 16px;
        text-align: center;
    }

    .btn-cancelar-colab,
    .btn-importar-colab {
        padding: 13px;
        font-size: 14px;
    }

    .modal-footer-colab {
        flex-direction: column-reverse; /* Botão principal (Importar) fica em cima */
        gap: 12px;
    }
}

/* Ajustes extras para celulares menores (Até 468px) */
@media (max-width: 468px) {
    .collaborators-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 19.2px;
    }

    .collaborators-info-quantity.gap-16 {
        width: 100%;
        justify-content: flex-start;
    }

    .collaborators-info-quantity-small {
        border-left: none;
        padding-left: 0;
        justify-content: flex-start;
    }

    .colab-item p {
        max-width: 180px; /* Reduz ainda mais a área do texto */
    }

    .tab-btn-colab {
        font-size: 13.2px;
    }
}
/* ---- Sidebar fixa: override para mobile (hamburger overlay) ---- */
@media screen and (max-width: 992px) {

    /* Quando o menu mobile está aberto, previne scroll do body */
}
/* Links legais (Termos / Privacidade) no modal de perfil */


/* ====================================================================
   ESTABILIDADE HORIZONTAL DO LAYOUT (sem "layout shift" lateral)

   Sintoma: filtrar uma lista até zero resultados (a busca do FAQ é o
   caso relatado) encurta a página, a barra de rolagem vertical some e a
   viewport ganha ~15px de largura. Como o header tem largura fixa, os
   15px caem inteiros na .site-content: ela salta de 1125px para 1140px
   e o conteúdo centralizado dentro dela anda ~7px para a direita.

   [1] Calha da barra sempre reservada. `overflow-y: scroll` é a base
       que qualquer navegador entende, mas deixa a barra desenhada mesmo
       sem ter o que rolar; onde `scrollbar-gutter: stable` existe ele
       reserva o mesmo espaço sem a barra permanente, então assume — e
       nele o overflow-y volta a `visible` de propósito: declarar `auto`
       aqui faria o `overflow-x: clip` que já existe no topo do arquivo
       degradar para `hidden` (regra de pareamento dos dois eixos),
       tornando o html um container de rolagem e trocando a semântica de
       clip por uma que aceita rolagem horizontal programática.

   [2] .site-content ocupa o que sobra de forma estável. `flex-grow: 1`
       (e não o atalho `flex: 1`, que zeraria a flex-basis e mudaria a
       altura no mobile, onde o body vira coluna) amarra a largura a "o
       que sobrou do header" em vez de deixá-la a cargo do encolhimento.
       `min-width: 0` remove o piso de min-content automático dos itens
       flex — sem ele um conteúdo largo trava o encolhimento e a largura
       volta a depender do que está na tela, que é justamente o que muda
       quando a lista esvazia.

   O seletor é `body .site-content` de propósito, e por duas razões:
   os arquivos de breakpoint redeclaram `.site-content` e alguns carregam
   depois deste, então a especificidade a mais garante a regra em todas
   as faixas; e ele precisa ser DESCENDENTE, não filho (`>`), porque em
   user/avulso o markup legado entra por um wrapper `display: contents`
   (LegacyMarkup) — a .site-content continua sendo item flex do body para
   o layout, mas no DOM o pai dela é a div do wrapper, e `body > ...` não
   casaria. No gestor o markup é JSX direto no body e casa dos dois jeitos.
   ==================================================================== */
html {
    overflow-y: scroll;
}

@supports (scrollbar-gutter: stable) {
    html {
        overflow-y: visible;
        scrollbar-gutter: stable;
    }
}

body .site-content {
    flex-grow: 1;
    min-width: 0;
}

/* ---- (R6) Auditoria de responsividade da estrutura global (sidebar + topo).
            Três defeitos que valiam em TODAS as larguras, nos três painéis. */

/* R6#1 — O wordmark do logo vinha cortado 32px à esquerda em qualquer largura.
   CAUSA: `.logo-image` é puxada para fora da caixa do pai por
   `margin-left: -32px` (compensa o padding transparente do PNG 500x500). O
   colapso da mini-sidebar (R3) deu `overflow: hidden` ao `header .logo-content`
   para animar o `max-width` até 0 — e esse clip passou a comer justamente os
   32px que a imagem ocupa fora da caixa. Acima de 1500px sobrava respiro e só
   o transparente era cortado; de 1500px para baixo o header cai para 250px e o
   corte chega no glifo: o logo virava "tamFlow".
   CORREÇÃO: `overflow: clip` + `overflow-clip-margin` deixa a imagem PINTAR
   fora da caixa sem alterar geometria nenhuma — o colapso continua clipando o
   layout e o estado .nav-mini fica pixel-idêntico. Navegador sem suporte a
   overflow-clip-margin cai no clip de hoje, nunca em algo pior. */

/* R6#2 — De 469px a 992px o hamburguer parava no meio da barra em vez de ir
   para a borda direita (a 900px ficava 530px longe da borda).
   CAUSA: `.logo-content` é o espaçador `width: 100%` que empurra o botão para
   a direita, mas o mesmo bloco do R3 lhe deu `max-width: 320px` FORA de media
   query. O bloco de <=992px neutraliza os tamanhos do .nav-mini, só que não
   esse teto — então o espaçador travava em 320px e o botão junto com ele.
   Abaixo de ~420px a tela é mais estreita que o teto e o bug some sozinho, o
   que explica ele não aparecer nos testes de celular pequeno. */

/* R6#3 — Barra do topo (.content-header) sem folga nem escape.
   Era `justify-content: space-between` com `flex-wrap: nowrap` e SEM gap em
   toda a faixa >=469px: título e bloco da direita (sino + pílula de status)
   só não colidiam porque os rótulos atuais são curtos. Com um nome de seção
   longo ("StamFlow University", "Compliance Training") a 360px o título
   quebrava em duas linhas E a pílula quebrava dentro dela mesma.
   CORREÇÃO fluida: gap real que acompanha a viewport, `flex-wrap` como rede de
   segurança (só entra quando não cabe mesmo), `min-width: 0` para o título
   poder encolher em vez de empurrar, e nowrap na pílula para ela nunca
   quebrar no meio. Nos rótulos reais nada muda: a altura da barra medida é
   idêntica à de antes em todas as larguras de 360px a 1600px. */
.content-header {
    flex-wrap: wrap;
    gap: clamp(0.5rem, 2vw, 1.5rem);
    row-gap: 0.5rem;
}

#section-name {
    min-width: 0;
}

.content-header-right {
    flex-shrink: 0;
}

.sistema {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- (R15) Auditoria das abas internas do GESTOR.
             As fases intermediarias cobriram so user e avulso; do gestor,
             so o Dashboard (Statistics) tinha sido medido na fase 2. Aqui
             entram Reports, Compliance, FAQ, Colaboradores e o modal de
             adicionar colaborador, nas 8 larguras.

             Reports e Compliance passaram limpos, sem uma unica correcao.
             Nao ha <table> em nenhuma aba do gestor — as listas sao <ul> de
             cards —, entao a questao do wrapper com overflow-x: auto nao se
             aplica; nada precisa rolar horizontalmente. */

/* R15#1 — O cartao de topo dos Colaboradores estourava a tela a 480px.
   `.collaborators-info` e um flex de tres blocos (texto, "VIDAS ATIVAS" e
   "VAGAS DE COLABORADOR") com `justify-content: space-between` e SEM
   flex-wrap: a 480px o terceiro bloco ia parar em x=518 numa viewport de
   465 — 53px para fora, cortados em silencio. Com wrap, ele desce. */
.collaborators-info {
    flex-wrap: wrap;
}

/* R15#2 — O campo de busca ficava esmagado a ponto de mostrar so "Bu".
   `.colab-search-header` poe lupa + input + os tres botoes de filtro na
   mesma linha sem wrap. Os botoes tem largura de conteudo e nao cedem, o
   input tem `width: 100%` e cede tudo: medidos 21px de campo a 360px e
   136px a 480px. Agora os filtros descem para a propria linha e o input
   tem uma base minima. Medido: 21 -> 245px a 360 e 136 -> 365px a 480. */
@media screen and (max-width: 768px) {
    .colab-search-header {
        flex-wrap: wrap;
    }

    .colab-search-header input {
        flex: 1 1 160px;
        min-width: 0;
    }

    .colab-filtros {
        flex-wrap: wrap;
    }
}

/* R15#3 — Alvos de toque abaixo de 44px, mesma regra das fases anteriores:
   filtros Todos/Ativos/Inativos com 29px de altura, "Copiar feedback" do FAQ
   com 33px e "Importar" do modal de colaboradores com 42px. Escopo <=768px
   pelo mesmo criterio do R9#1 — acima disso passam no minimo AA de 24px da
   WCAG 2.5.8, o input e mouse, e mexer quebraria o layout shift zero. */
@media screen and (max-width: 768px) {
    .colab-filtro-btn {
        min-height: 44px;
    }

    .faq-copiar-feedback {
        min-height: 44px;
    }

    #btn-importar-colab {
        min-height: 44px;
    }
}

/* R15#4 — Os checkboxes da lista (o de selecionar tudo e o de cada linha)
   medem 21.6px. Como sao <input> com `appearance: none`, o ::after ja esta
   ocupado pelo "✔" do estado :checked — entao a area de toque vai no
   ::before, que nao participa do layout: a caixa visivel continua com os
   mesmos 21.6px e o desktop nao se mexe.
   Medido com elementFromPoint numa area de 44x44: 1/5 -> 5/5, sem roubar
   clique de nenhum outro controle. */
.colab-checkbox {
    position: relative;
}

.colab-checkbox::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* ---- (R16) Revisao absoluta — superficie residual do gestor.
             Os modais do Detox e o onboarding nao existem neste painel;
             o que se aplica aqui sao os sub-itens do menu lateral. */

/* R16#4 — Sub-itens do menu lateral (Modo Foco, Exercicios, Pausa Mental,
   StamFlow University) medem 20px de altura: falham o minimo AA de 24px mesmo
   no desktop, com mouse. Por isso o piso de 24px vale em qualquer largura — um
   acrescimo de 4px por item — e os 44px de toque entram so onde o menu vira
   overlay. */