/* =============================================================================
   fixes.css — ajustes do backlog de UI/UX (2026-09-11), Painel do Gestor.

   Carregado por ULTIMO no layout.js, depois das folhas por breakpoint
   (styles*.css) e do header-perfil.css: as regras aqui vencem as equivalentes
   daquelas folhas por ordem de cascata, sem !important. Cada bloco leva o
   numero do item do backlog e a medicao que o motivou. Os @media ficam dentro
   do proprio arquivo.
   ============================================================================= */

/* ---- (17) Exportar / Cancelar / Comparar com a MESMA altura visual em
            <=768px.

   Medido a 600px na aba Comparar: "Exportar" com 44px (min-height da folha
   768) e fonte 13,2px, acima de um "Cancelar" com 37px e fonte 14,4px. Na
   visao principal, "Exportar" 39px contra "Comparar" 35px. Aqui os tres
   passam a compartilhar fonte, padding vertical e lateral e centralizacao —
   a altura sai do padding (11px) e do icone do Exportar reduzido a 16px, a
   mesma altura da linha do texto, e nao de um height fixo. */
@media screen and (max-width: 768px) {
    .export-btn,
    .export-minimizado .export-btn,
    .comparar-btn,
    .cancelar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-height: 0;
        height: auto;
        padding: 11px 16px;
        font-size: 13.6px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }

    /* Na aba Comparar os dois ocupam a linha inteira (ja empilhados pela
       folha 768/468); na visao principal Exportar e Comparar mantem a largura
       natural que tinham lado a lado entre 469 e 768px. */
    .export-minimizado .export-btn,
    .cancelar-btn {
        width: 100%;
    }

    /* O Cancelar tem borda de 1px e os outros nao: 1px a menos de padding
       vertical deixa as tres caixas com os mesmos 38,3px. */
    .cancelar-btn {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .export-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
}

/* ---- (18) Icone do calendario a ESQUERDA do dia selecionado.

   O ::-webkit-calendar-picker-indicator e desenhado pelo navegador sempre
   DEPOIS dos campos do input, sem como reordena-lo. Entao o desenho e o
   botao se separam: o mesmo svg (lucide "calendar") vira background do input,
   encostado na esquerda, o indicador nativo some e quem abre o calendario e
   o script.js, com input.showPicker() no clique sobre a faixa do icone. Os
   campos dd/mm/aaaa continuam editaveis por clique como antes. O espaco que
   o icone ocupava na direita (14px + 4px de margem) vira o padding-left de
   18px: a largura total do componente nao muda. (Firefox ignora o
   pseudo-elemento: la o botao nativo segue a direita, alem do desenho.) */
.selecao-data-range input[type="date"] {
    position: relative;
    padding-left: 18px;
    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: 0 center;
    background-size: 14px 14px;
}

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

.selecao-data-range input[type="date"]:hover {
    /* o hover que antes clareava o indicador, agora no desenho */
    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='%23c5c8cf' 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");
}

/* ---- (19) Seletor de periodo da visao principal: largura toda SO em
            <=768px.

   Revisao do QA de 2026-09-12: a regra anterior fazia o inverso (100% a
   partir de 768px, com Comparar/Exportar descendo de linha). O desejado e:
   acima de 768px o seletor tem a largura natural (320px) na mesma linha dos
   botoes, como sempre foi; em <=768px, quando Comparar e Exportar ja
   quebram para a linha de baixo (folhas 768/468), o seletor ocupa a linha
   inteira. Acima de 768px nada e sobrescrito aqui — valem as regras de
   styles.css (order/margins do @media 993px). */
@media screen and (max-width: 768px) {
    .selecao-data-range#selecao-periodo-principal {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }
}

/* ---- (20) Seta entre as duas datas centralizada na altura do texto.

   A caixa do span ja estava centrada (align-items: center no wrapper), mas o
   glifo "→" da Inter fica na altura x, enquanto os digitos ocupam a altura
   de caixa alta: o centro visual da seta ficava ~1px abaixo do centro das
   datas. Sobe 1px; line-height 1 tira a folga vertical da caixa. */
.selecao-data-range .data-separador {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transform: translateY(-1px);
}

/* ---- (21) Texto auxiliar do periodo ("Selecione um periodo para
            visualizar...") em 10px abaixo de 468px.
   A folha 468 o subia para 13,6px, e o paragrafo ocupava tres linhas
   (61px) logo abaixo dos botoes; a 10px cabe em duas. */
@media screen and (max-width: 468px) {
    .periodo-helper-text {
        font-size: 10px;
    }
}

/* ---- (22, 27) Faixa PRETA a direita nas abas sem rolagem (Gestao de Reports
            com poucos tickets, Equipe com poucos colaboradores).

   O html reserva a calha da barra de rolagem de proposito
   (`scrollbar-gutter: stable`, ver styles.css: sem ela o conteudo salta
   ~7px quando uma lista esvazia). Quando a pagina nao rola, a calha fica
   vazia e mostra o fundo do CANVAS — que e o preto do body. A calha fica
   (o salto que ela evita continua evitado); o que muda e a cor pintada
   atras dela: o html recebe o mesmo fundo da .site-content (#161320), entao
   a faixa continua a area de conteudo em vez de cortar em preto. Medido a
   1440px: faixa de 15px em rgb(0,0,0) -> rgb(22,19,32), igual ao vizinho.
   O body mantem o preto proprio (ele nao cobre a calha), e nenhum elemento
   de conteudo dependia do canvas ser preto. */
html {
    background-color: #161320;
}

/* ---- (23) Botoes de CATEGORIA do "Detalhes do Report" com o mesmo padrao dos
            tres de status logo acima.

   Os tres de status vivem num `.space-btw.status` com `gap: 9.6px` e empilham
   em coluna em <=768px (folhas 768/468). Os de categoria (`.space-btw.tag`)
   tinham a mesma caixa (.tag-opcao == .status-opcao) mas SEM gap — colados,
   e a 390px o terceiro saia do cartao — e sem a regra de empilhar. */
.space-btw.tag {
    gap: 9.6px;
}

@media screen and (max-width: 768px) {
    .space-btw.tag {
        flex-direction: column;
    }
}

/* ---- (24) "Detalhes do Report": margem do viewport nos quatro lados, em
            TODAS as larguras, e o cartao rolando por dentro.

   Como estava: o overlay `.pop-ups` e fixed com 100% x 100% e so a faixa
   769-992 dava padding ao overlay e teto de altura ao cartao. Fora dela o
   cartao ia de borda a borda (a 390px: 100vw, 1106px de altura num viewport
   de 900, centralizado pelo flex — cabecalho em -85px e botoes fora da
   tela, inalcancaveis). Agora o overlay tem padding em qualquer largura
   (16px; 12px em <=468) e o cartao tem teto de 100% dessa area util com
   rolagem propria e a barra fina do resto da aplicacao. */
.pop-ups {
    padding: 16px;
    box-sizing: border-box;
}

.pop-up {
    width: 100%;
    max-width: 804px;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pop-up::-webkit-scrollbar {
    width: 5px;
}

.pop-up::-webkit-scrollbar-track {
    background: transparent;
}

.pop-up::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

@media screen and (max-width: 468px) {
    .pop-ups {
        padding: 12px;
    }
}

/* ---- (25) Textos dos reports um pouco menores em <=768px.

   Medido: a descricao do card minimizado (.report-description) subia para
   18px (16,8 em <=468) e a caixa de resposta + placeholder para 19,2px —
   maiores que no desktop (13,2 e 16,2). Reducao sutil, mantendo-os acima do
   desktop: minimizado 16px (15 em <=468), mensagem no card maximizado
   (.mensagem p) 12,8px, textarea e placeholder 16px (15 em <=468). */
@media screen and (max-width: 768px) {
    .report-description {
        font-size: 16px;
    }

    .pop-up .mensagem p {
        font-size: 12.8px;
    }

    .message-space textarea,
    .message-space textarea::placeholder {
        font-size: 16px;
    }
}

@media screen and (max-width: 468px) {
    .report-description {
        font-size: 15px;
    }

    .message-space textarea,
    .message-space textarea::placeholder {
        font-size: 15px;
    }
}

/* ---- (26) "Detalhes do Report" em <=468px: tudo um degrau menor.

   Em tela estreita o cartao usava os tamanhos do desktop (ou maiores: titulo
   26,4px contra 25,8 no desktop; botoes com 15,6px de padding; opcoes com
   14,4px; caixa de resposta de 144px). Aqui cada elemento desce um degrau —
   titulo e X, espacamentos (.gap-*) dentro do cartao, conversa, textarea,
   opcoes de status/categoria (icone de 24 para 18px) e botoes Salvar/Enviar
   — no mesmo espirito do pop-up de perfil compacto do user (R28#7). */
@media screen and (max-width: 468px) {
    .pop-up {
        padding: 14px;
        border-radius: 14px;
    }

    .pop-up .gap-48 { gap: 24px; }
    .pop-up .gap-32 { gap: 18px; }
    .pop-up .gap-24 { gap: 14px; }
    .pop-up .gap-16 { gap: 10px; }

    .title-close {
        padding-bottom: 12px;
    }

    .title-close h2 {
        font-size: 19px;
    }

    .title-close svg {
        width: 20px;
        height: 20px;
    }

    .pop-up .conversa {
        padding: 12px;
    }

    #maximizado-assunto {
        font-size: 13.6px;
    }

    .pop-up .mensagem {
        padding: 12px 10px;
    }

    .pop-up .mensagem h4 {
        font-size: 12.5px;
    }

    .pop-up .report-info p {
        font-size: 11.5px;
    }

    .message-space {
        gap: 8px;
    }

    .message-space h3 {
        font-size: 12px;
    }

    .message-space textarea {
        min-height: 110px;
        padding: 12px;
    }

    .space-btw.status,
    .space-btw.tag {
        gap: 8px;
    }

    .status-opcao,
    .tag-opcao {
        padding: 10px 8px;
        font-size: 12px;
        gap: 6px;
    }

    .status-opcao svg,
    .tag-opcao svg {
        width: 18px;
        height: 18px;
    }

    .buttons-options {
        gap: 8px;
    }

    .buttons-options button {
        padding: 12px;
        font-size: 13.6px;
    }
}

/* ---- (28) Botao "Adicionar Colaboradores" em <=768px: menor, com o "+" ao
            lado do texto.
   Medido: 124px de altura, padding de 28,8px, icone de 34px empilhado em
   cima de um texto de 18px. Vira uma linha (icone + texto), padding 16px,
   icone 22px e texto 15px — ainda um alvo de toque folgado (~54px). */
@media screen and (max-width: 768px) {
    .collaborators-action.gap-8 {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 20px;
        border-radius: 14px;
    }

    .collaborators-action svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .collaborators-action p {
        font-size: 15px;
    }
}

/* ---- (29) Aba Equipe em <=468px: "X VIDAS ATIVAS" e "VAGAS DE COLABORADOR"
            lado a lado, com pesos equilibrados.

   O cartao empilhava tudo em coluna: o numero de vidas em 43,2px num bloco
   sozinho, e as vagas embaixo com 16px/9,6px. Agora o texto de apresentacao
   fica na primeira linha (largura toda) e as duas metricas dividem a linha
   de baixo, cada uma com metade da largura; o numero de vidas cai para 32px
   e o de vagas sobe para 22px (rotulo 11px), para as duas colunas terem o
   mesmo peso visual. A borda esquerda das vagas continua como separador. */
@media screen and (max-width: 468px) {
    .collaborators-info {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 16px;
    }

    .collaborators-info-text.gap-16 {
        flex: 1 1 100%;
    }

    .collaborators-info-quantity.gap-16,
    .collaborators-info-quantity-small {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .collaborators-info-quantity h3 {
        font-size: 32px;
    }

    .collaborators-info-quantity p {
        font-size: 12px;
    }

    .collaborators-info-quantity-small {
        padding-left: 16px;
        gap: 4px;
    }

    .collaborators-info-quantity-small h3 {
        font-size: 22px;
    }

    .collaborators-info-quantity-small p {
        font-size: 11px;
        white-space: normal;
        text-align: center;
    }
}

/* ---- (31) O "X" de voltar a Estatisticas em TODAS as abas secundarias
            (Treinamento Compliance, FAQ e Colaboradores ganharam o mesmo
            .close-btn-section que a Gestao de Reports ja tinha; o handler em
            script.js liga todos). Cabecalho no padrao "titulo a esquerda, X a
            direita" do user (item 8): pai com a largura toda e space-between,
            titulo com min-width 0 e X de 25,2px que nao encolhe; em <=768px a
            area de toque cresce para 44px sem mover o desenho. */
.sub-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sub-header > .sub-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.close-btn-section {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25.2px;
    height: 25.2px;
    cursor: pointer;
}

.close-btn-section svg {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px) {
    .close-btn-section {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 9.4px;
        margin-right: -9.4px;
    }
}

/* ---- (G1) Header da sessao (.content-header) com a "casca" do Painel User.

   Medido lado a lado (so o desenho; o conteudo do gestor — apenas o titulo
   da aba — fica como esta). Diferencas que existiam: padding vertical
   22,72px contra 18,72 do user (1201-1500), borda inferior de 2px contra
   1,6px, e no mobile 52,9px de altura contra 59,9 — no user a barra e mais
   alta porque leva o sino e a pilula de status; aqui o min-height reproduz a
   mesma altura sem eles. Valores por faixa, copiados do globals.css do
   user: >=1501: 1,68rem 3,2rem (86,75px); 1201-1500: 1,17rem 2rem (70,44);
   993-1200: 1,17rem 1,2rem (70,44); <=992: 0,84rem 0,8rem (59,88).
   A fonte do titulo (19,2px) ja era igual. */
.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 1.68rem 3.2rem;
    min-height: 86.75px;
    background-color: rgb(31 29 43 / 0.5);
    border-bottom: 1.6px solid rgb(255 255 255 / 0.05);
}

@media screen and (max-width: 1500px) {
    .content-header {
        padding: 1.17rem 2rem;
        min-height: 70.44px;
    }
}

@media screen and (max-width: 1200px) {
    .content-header {
        padding: 1.17rem 1.2rem;
    }
}

@media screen and (max-width: 992px) {
    .content-header {
        padding: 0.84rem 0.8rem;
        min-height: 59.88px;
        gap: 8px 16px;
    }
}

/* ---- (G3) Cursor de mao sobre o icone do calendario.
   O icone (item 18) e um background na faixa esquerda do input, e o clique
   nela abre o calendario pelo script.js. O cursor acompanha: pointer ao
   passar sobre a faixa (o resto do campo segue com o cursor de texto).
   Um pseudo-elemento nao serve dentro de <input>, entao o pointer vale
   para o input inteiro no :hover — e o proprio script decide o que o
   clique faz. Cobre os 6 inputs (principal, A e B). */
.selecao-data-range input[type="date"]:hover {
    cursor: pointer;
}

.selecao-data-range input[type="date"]:focus {
    cursor: text;
}

/* ---- (G4) Conteudo ate a borda direita: a calha da barra de rolagem deixa
            de ser reservada.

   Os itens 22/27 pintaram a calha com o fundo do .site-content, mas ela
   continuava reservada (`scrollbar-gutter: stable` + `overflow-y: scroll`
   de fallback, no styles.css): em abas sem rolagem (Reports, Equipe) o
   .content-header, sua borda e o conteudo paravam 15-17px antes da borda —
   um "corte" invisivel. A calha passa a existir so quando ha barra real. O
   preco e o salto de ~15px ao trocar de uma aba que rola para uma que nao
   rola (era o que o `stable` evitava); com o fundo do html igual ao do
   .site-content ele e discreto. Mesma decisao do R58 no Painel User. */
html {
    overflow-y: auto;
}

@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: auto;
    }
}

/* ---- (G5) "Detalhes do Report" mais curto abaixo de 992px.
   Com o item 24 o cartao podia ir ate 100% da area util do overlay (868px
   num viewport de 900): ocupava a tela inteira na altura. Abaixo de 992px o
   teto passa a 80% da viewport (dvh onde existe, para descontar a barra do
   navegador no celular), centralizado pelo flex do overlay, e o miolo segue
   rolando por dentro (overflow-y: auto do item 24) com a barra fina. */
@media screen and (max-width: 992px) {
    .pop-up {
        max-height: min(100%, 80vh);
        max-height: min(100%, 80dvh);
    }
}

/* ---- (G6) REMOVIDO — era remendo preventivo, nao correcao.

   O bloco daqui pintava `body` de #161320 para que nenhuma folga aberta com um
   pop-up mostrasse o preto da base. Ele veio junto com o R62 do Painel User,
   que tinha o mesmo desenho. No User a causa do vao ja esta corrigida na
   origem (R64: `overflow: clip` no lugar de `hidden`, que nao quebra o sticky
   do header nem clampeia a rolagem) e o R62 saiu.

   O gestor nunca teve o problema: ele nao tem trava de rolagem, nao poe
   `overflow: hidden` no html e o header dele nao e sticky — nada aqui move o
   fundo quando um pop-up abre. Entao esta regra so escondia um sintoma que
   nao existe, e sai junto. A calha da barra de rolagem continua coberta pelo
   fundo do html (itens 22/27), que e o caso real que o gestor tem. */