:root { --sol: #FFC20E; --laranja: #F07818; --laranja-escuro: #D95E0D; --laranja-sobre-azul: #FFBE78; /* laranja legível sobre --azul (contraste medido 4,80:1; #F07818 puro dá 2,8:1) */ --azul: #1D4FA1; --azul-noite: #0E2A5C; --azul-noite-2: #143570; --areia: #FDF6E9; --areia-escura: #F0E3C8; --terra: #6B3410; --azul-suave: #40507a; --branco: #FFFFFF; --telha: #B23A2A; --erro: #B23A2A; /* ── Convidado (pedido do dono, 2026-08-13) ─────────────────────────────────────────────────── Marcação PARALELA ao veredito da triagem: a pessoa mantém o status dela (a avaliar / entrevista / aprovado / em espera / reprovado) E pode estar convidada ao mesmo tempo — os dois sinais convivem no mesmo cartão. Por isso o convite precisa de cor PRÓPRIA, e não de um tom de algo que já fala na tela: azul é núcleo fixo, laranja/sol é "selecionado" (e o selo EQUIPE FIXA), telha é reprovado/erro, verde é veterano, rosa é feminino. Sobrou o roxo — e ele ainda lê como "convidado de honra", que é exatamente o que a marcação diz. --roxo sobre branco dá 7,4:1; branco sobre --roxo, 7,4:1; --roxo-escuro sobre --roxo-claro, 11,3:1 — todos acima de AA em texto pequeno. */ --roxo: #6B3FA0; --roxo-escuro: #4B2A73; --roxo-claro: #F3EDFB; /* Altura da barra superior (§Barra superior). Vive aqui como token porque três lugares dependem dela ao mesmo tempo: a própria barra, o `top`/`height` da .madrugada grudada logo abaixo e o deslocamento do menu suspenso. */ /* 64px (era 56): o mote voltou para debaixo do nome e as duas linhas precisam de ar. O dono autorizou ("se precisar deixar a barra um pouco maior pode fazer"). */ --altura-barra: 64px; } * { margin: 0; padding: 0; box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } body { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; background: var(--areia); color: var(--azul-noite); line-height: 1.5; } /* telas alternadas via JS — !important garante que nenhuma outra regra de display (grid/flex nas telas de conteúdo) sobreponha a ocultação. */ .tela-oculta { display: none !important; } /* ── Telas de autenticação (login / troca de senha) ─────────── */ .tela-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1.6px 1.6px at 18% 12%, #FDF6E9 99%, transparent), radial-gradient(1.4px 1.4px at 72% 8%, #FDF6E9 99%, transparent), radial-gradient(1.2px 1.2px at 44% 22%, #FDF6E9cc 99%, transparent), radial-gradient(1.6px 1.6px at 84% 30%, #FDF6E9 99%, transparent), radial-gradient(1.2px 1.2px at 26% 58%, #FDF6E9aa 99%, transparent), linear-gradient(180deg, var(--azul-noite) 0%, var(--azul-noite-2) 100%); } .auth-cartao { width: 100%; max-width: 400px; background: var(--branco); border-radius: 20px; box-shadow: 0 3px 0 var(--areia-escura), 0 20px 44px rgba(14, 42, 92, .28); padding: clamp(24px, 5vw, 38px); } .auth-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .auth-marca svg { flex: none; } .auth-marca strong { display: block; font-size: 15px; color: var(--azul-noite); line-height: 1.25; } .auth-marca small { display: block; font-family: 'Caveat', cursive; font-size: 17px; color: var(--laranja-escuro); } .auth-cartao h1 { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 24px; color: var(--azul); margin-bottom: 6px; } .auth-cartao > p.apoio { font-size: 14.5px; color: var(--azul-suave); margin-bottom: 18px; } .campo { margin-top: 16px; } .campo label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; } .campo input[type="text"], .campo input[type="email"], .campo input[type="password"] { width: 100%; font: inherit; color: inherit; padding: 11px 14px; border: 2px solid var(--areia-escura); border-radius: 12px; background: var(--areia); } .campo input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; } .mensagem-erro { color: var(--erro); font-size: 13.5px; font-weight: 700; margin-top: 12px; } .botao-sol { width: 100%; margin-top: 20px; font-family: inherit; font-size: 16.5px; font-weight: 700; color: var(--azul-noite); border: none; cursor: pointer; background: linear-gradient(135deg, var(--sol), var(--laranja)); padding: 13px 20px; border-radius: 999px; box-shadow: 0 5px 0 var(--laranja-escuro); transition: transform .12s ease, box-shadow .12s ease; } .botao-sol:hover { transform: translateY(-1px); box-shadow: 0 6px 0 var(--laranja-escuro); } .botao-sol:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--laranja-escuro); } .botao-sol:disabled { opacity: .65; cursor: not-allowed; transform: none; box-shadow: 0 5px 0 var(--laranja-escuro); } /* ── Shell do painel (mockup-gestao) ─────────────────────────── */ /* `grid-template-rows: auto 1fr` NÃO é decoração (armadilha registrada em 2026-08-12, ver §Celular): com min-height:100vh e as duas linhas em `auto`, o navegador REPARTE a sobra de altura entre elas — a barra de 56px chegou a receber ~266px e empurrar o conteúdo para 322px do topo. Dizer que a segunda linha absorve a sobra prende a barra na altura dela. Desde 2026-08-13 a barra existe em TODAS as larguras (antes só no celular), então a trava mora aqui na regra base, não na media. */ .shell-painel { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; } /* Véu da gaveta: só existe no celular (ver §Celular). */ .veu-menu { display: none; } .madrugada { background: radial-gradient(1.6px 1.6px at 18% 12%, #FDF6E9 99%, transparent), radial-gradient(1.4px 1.4px at 72% 8%, #FDF6E9 99%, transparent), radial-gradient(1.2px 1.2px at 44% 22%, #FDF6E9cc 99%, transparent), radial-gradient(1.6px 1.6px at 84% 30%, #FDF6E9 99%, transparent), radial-gradient(1.2px 1.2px at 26% 38%, #FDF6E9aa 99%, transparent), radial-gradient(1.6px 1.6px at 62% 46%, #FDF6E9cc 99%, transparent), radial-gradient(1.2px 1.2px at 12% 58%, #FDF6E9aa 99%, transparent), linear-gradient(180deg, var(--azul-noite) 0%, var(--azul-noite-2) 100%); /* Gruda LOGO ABAIXO da barra superior, que agora atravessa a largura inteira por cima desta coluna — daí o `top` e a altura descontada (era `top: 0; height: 100vh`, de quando a lateral começava no topo da janela e a emenda com o creme do conteúdo ficava à mostra). */ color: var(--areia); padding: 14px 0 26px; position: sticky; top: var(--altura-barra); height: calc(100vh - var(--altura-barra)); display: flex; flex-direction: column; } /* Topo da lateral: o mote (a marca subiu para a barra) e o botão de recolher, na mesma linha. */ .lateral-topo { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 10px 0 22px; min-height: 26px; } /* 15.5px e não os 16/17px do resto: nos 240px da coluna sobram ~180px depois do padding e do botão de recolher, e a frase inteira ("a caravana começa aqui") precisa caber — cortada em "aqu" ela deixa de ser um mote e vira um defeito. Medido na captura, não no olho. */ /* Mesma aparência que o mote tinha na lateral (Caveat, cor sol) — ele mudou de lugar, não de identidade. `nowrap` porque quebrar "a caravana começa / aqui" em duas linhas mataria a frase. */ .barra-mote { font-family: 'Caveat', cursive; font-size: 15px; line-height: 1.05; color: var(--sol); white-space: nowrap; } .nav { display: flex; flex-direction: column; margin-top: 14px; } .nav a { color: var(--areia); text-decoration: none; font-weight: 700; font-size: 15px; padding: 13px 22px; border-left: 4px solid transparent; display: flex; gap: 12px; align-items: center; } .nav a svg { flex: none; } .nav a:hover { background: rgba(253, 246, 233, .07); } .nav a.ativo { border-left-color: var(--sol); background: rgba(253, 246, 233, .1); color: var(--sol); } .nav a[aria-disabled="true"] { opacity: .55; cursor: default; } /* Achado no E2E de permissões (Task 8): `.nav a { display:flex }` acima tem especificidade maior que o `[hidden] { display:none }` do user-agent, então o link "Usuários" (que nasce `hidden` no HTML e só é revelado para gestor via app.js) aparecia visualmente para QUALQUER conta logada, independente da chavinha de gestor — só o roteamento (router.js) de fato barrava o acesso à tela. Este seletor devolve a prioridade ao atributo `hidden`. */ .nav a[hidden] { display: none; } /* ── Recolher a barra lateral (desktop, 2026-08-12) ────────────────────────────────────────────── Um botão reduz a .madrugada a uma trilha só de ícones — para quem já decorou os quatro itens e quer mais espaço para a mesa de equipes. A classe `.menu-recolhido` entra no MESMO elemento que a gaveta do celular usa para `.menu-aberto` (#tela-painel/.shell-painel, ver §Celular), mas todo o efeito visual mora dentro de `@media (min-width: 861px)` logo abaixo: mesmo que a classe sobreviva a um redimensionamento para o celular (nada aqui a limpa nessa hora — a escolha não persiste em localStorage de propósito, ver js/navegacao-lateral.js, e não precisa sobreviver a isso), ela não pinta NADA abaixo de 861px — não há como interferir na gaveta, que é outra classe, outro elemento, outro breakpoint. O botão em si é escondido no celular dentro do bloco `@media (max-width: 860px)` já existente, junto dos outros ajustes daquela faixa. */ .botao-recolher { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border-radius: 8px; background: transparent; border: none; cursor: pointer; color: var(--areia); opacity: .7; } .botao-recolher[hidden] { display: none; } .botao-recolher:hover { opacity: 1; } .botao-recolher:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; border-radius: 6px; } .botao-recolher svg { transition: transform .18s ease; flex: none; } @media (min-width: 861px) { /* 88px cabe os ícones da nav (18px) com folga de alvo de clique. Era o valor escolhido quando o logo (32px) ainda morava aqui; com a marca na barra superior sobra ainda mais folga. */ .shell-painel.menu-recolhido { grid-template-columns: 88px 1fr; } .menu-recolhido .lateral-topo { padding: 0; justify-content: center; } .menu-recolhido .botao-recolher svg { transform: rotate(180deg); } /* O divisor da barra mira a borda direita da lateral; recolhida, essa borda vai para 88px e não há mais o que mirar — a marca volta à largura do próprio texto e o divisor encosta nela, como separador de blocos. Sem isto ele fica pairando a 240px de um layout que mudou embaixo dele. */ .menu-recolhido .barra-marca-texto { min-width: 0; } /* Rótulos somem, ícones ficam — o texto continua descrevendo o item por `title`/`aria-label` (adicionados nos próprios , ver index.html), porque `display:none` tira o `.rotulo` tanto da tela quanto da árvore de acessibilidade. Sem o aria-label próprio, o nome do item sumiria dos dois lugares ao mesmo tempo. */ .menu-recolhido .nav a { justify-content: center; padding: 13px 0; gap: 0; } .menu-recolhido .nav a .rotulo { display: none; } } /* ══ §Barra superior (2026-08-13) ══════════════════════════════════════════════════════════════ Uma barra só, do celular ao desktop, atravessando a largura inteira — inclusive por cima da coluna da .madrugada (`grid-column: 1 / -1`), que é o que faz a emenda entre o azul da lateral e o creme do conteúdo sumir do topo da janela. Ela guarda TRÊS coisas, nesta ordem: a marca (sol + "Gestão de Viagens"), a distribuição corrente como SELETOR (não texto morto) e o perfil com o Sair. Nada mais — as abas continuam sendo do sistema, dentro do conteúdo. O filete de 3px em laranja→amarelo é a assinatura AdB que o PDF das equipes desenha no rodapé do header (`desenharHeader` em apps/backend/src/pdfEquipes.ts: `faixa.stop(0, laranja).stop(1, amarelo)` num retângulo de 3 no fim da faixa azul). Aqui ele é `::after` DENTRO da barra, pelo mesmo motivo que lá: a barra continua medindo 56px cravados, sem o filete somar altura. Orçamento vertical: a barra come 56px de uma tela onde a mesa de equipes já é densa. O que saiu devolve boa parte — breadcrumb (~30px), `padding-top` do conteúdo (30→24px) e margem da subnav (24→18px) —, então o custo líquido é de 15px, MEDIDOS em 1440×900 na aba Equipes: o topo da mesa foi de 817px para 832px, e continua dentro da primeira dobra (900px). Quem mexer nesta seção mede de novo; a conta é apertada por natureza. */ .barra-topo { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: var(--altura-barra); padding: 0 16px 3px 22px; color: var(--areia); background: /* brilho amarelo no canto direito: o mesmo gesto do header do PDF (`radialGradient` em pdfEquipes.ts), na intensidade que o texto branco por cima ainda aguenta */ radial-gradient(190px 90px at calc(100% - 40px) 10%, rgba(255, 194, 14, .17), transparent 72%), linear-gradient(180deg, var(--azul-noite) 0%, var(--azul-noite-2) 100%); } .barra-topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--laranja) 0%, var(--sol) 100%); } /* Hambúrguer: só no celular (ver §Celular) — no desktop a lateral está sempre presente. */ .botao-menu { display: none; } .botao-menu[hidden] { display: none; } .barra-marca { display: flex; align-items: center; gap: 10px; flex: none; } .barra-marca-texto-bloco { display: flex; flex-direction: column; justify-content: center; gap: 1px; } .barra-marca svg { flex: none; } /* min-width igual à coluna da lateral (240px, contando o padding-left de 22px da barra): o divisor cai EXATAMENTE sobre a borda direita da .madrugada, e a barra deixa de parecer colada por cima de um layout que ela ignora. Recolhida a lateral, o divisor fica onde está — não há mais nenhuma linha embaixo dele para desalinhar. */ .barra-marca-texto { font-size: 15.5px; line-height: 1.15; white-space: nowrap; min-width: 168px; } .barra-divisor { flex: none; width: 1px; height: 26px; background: rgba(253, 246, 233, .24); } /* ── Seletor da distribuição corrente ────────────────────────────────────────────────────────── `min-width: 0` nos TRÊS níveis (o item flex da barra, o botão e o texto) não é redundância: `.seletor-nome` tem `white-space: nowrap`, então o min-content dele é o nome INTEIRO, e esse mínimo sobe pela cadeia — sem zerá-lo em cada nível, o botão simplesmente não encolhe e a linha da barra estoura. Foi assim que este defeito apareceu, medido em 390px: com a webfont já carregada o nome ficava ~4px mais largo que na fonte de fallback, a barra passava a ter scrollWidth 393 num viewport de 390 e o teste do resumo geral (e2e/mobile.spec.ts) falhava — intermitente porque dependia de a fonte chegar antes ou depois da medição. Estouro de largura nesta página não é só feio: o Chromium mobile passa a desenhar tudo num viewport de layout maior que o real e QUALQUER clique erra o alvo (ver o comentário longo da `.equipes-barra` em §Celular). */ /* O `max-width` é a trava que de fato segura a linha: medido, o `flex-shrink` NÃO absorveu o estouro nesse instante do carregamento (o item ficou com a largura cheia mesmo com `min-width:0` e `flex-shrink:1` — a linha da barra saiu 3px maior que o espaço dela), então a largura do seletor não pode depender só de encolhimento. Um teto explícito resolve na origem e ainda cobre o caso de um nome de distribuição bem mais comprido que "Sertão · Setembro 2026". */ .seletor-dist { position: relative; min-width: 0; max-width: min(38vw, 460px); } .seletor-dist[hidden] { display: none; } .seletor-botao { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-width: 0; height: 36px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--areia); background: rgba(253, 246, 233, .08); border: 1px solid rgba(253, 246, 233, .26); border-radius: 999px; padding: 0 12px 0 15px; } .seletor-botao:hover { background: rgba(253, 246, 233, .18); } .seletor-botao[aria-expanded="true"] { background: rgba(253, 246, 233, .2); border-color: rgba(253, 246, 233, .5); } .seletor-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barra-seta { flex: none; opacity: .8; transition: transform .16s ease; } [aria-expanded="true"] > .barra-seta { transform: rotate(180deg); } /* ── Perfil ──────────────────────────────────────────────────────────────────────────────────── */ .perfil { position: relative; margin-left: auto; flex: none; } .perfil-botao { display: inline-flex; align-items: center; gap: 9px; height: 36px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--areia); background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 0 10px 0 3px; } .perfil-botao:hover { background: rgba(253, 246, 233, .12); } .perfil-botao[aria-expanded="true"] { background: rgba(253, 246, 233, .18); border-color: rgba(253, 246, 233, .4); } .perfil-nome { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* O avatar era `.usuario .avatar` (rodapé da lateral) e `.topo-movel .avatar` (barra do celular); com um lugar só, a classe fica solta — 30px cabem centrados nos 53px úteis da barra. */ .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--sol), var(--laranja)); color: var(--azul-noite); font-weight: 800; font-size: 12px; letter-spacing: .02em; display: grid; place-items: center; } .seletor-botao:focus-visible, .perfil-botao:focus-visible, .botao-menu:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; } /* ── Menus suspensos (perfil e seletor) ────────────────────────────────────────────────────────── `top: calc(100% + 12px)`: os dois gatilhos têm 36px de altura dentro dos 53px úteis da barra (56 menos o filete), então sobram 8,5px abaixo deles + 3px de filete — o menu abre rente à borda de baixo da barra, seja qual for o gatilho. Mexer na altura de um dos dois desalinha o outro. O par `[hidden]` é obrigatório: `.menu-suspenso` tem `display`, e sem ele o atributo `hidden` do navegador perde a disputa de especificidade (mesma armadilha de `.nav a[hidden]` e `.filtro-periodo[hidden]` neste arquivo). */ .menu-suspenso { position: absolute; top: calc(100% + 12px); z-index: 60; display: flex; flex-direction: column; gap: 2px; min-width: 232px; max-width: min(84vw, 340px); padding: 8px; background: var(--branco); color: var(--azul-noite); border: 1px solid var(--areia-escura); border-radius: 14px; box-shadow: 0 3px 0 var(--areia-escura), 0 18px 40px rgba(14, 42, 92, .26); } .menu-suspenso[hidden] { display: none; } .menu-perfil { right: 0; } .menu-seletor { left: 0; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: inherit; background: transparent; border: none; border-radius: 10px; padding: 8px 10px; } .menu-item:hover { background: var(--areia); } .menu-item:focus-visible { outline: 3px solid var(--laranja); outline-offset: -3px; } .menu-item-texto { display: flex; flex-direction: column; min-width: 0; } .menu-item-texto strong { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-item-texto small { font-size: 12px; color: var(--terra); } /* A distribuição em que se está: fundo azul-claro + o visto à esquerda. O visto ocupa o mesmo espaço nos itens não escolhidos (`visibility`), senão os nomes dançariam 24px na vertical. */ .menu-item[aria-current="true"] { background: #EDF2FC; } .menu-item-visto { flex: none; color: var(--laranja-escuro); } .menu-item:not([aria-current="true"]) .menu-item-visto { visibility: hidden; } .menu-vazio { font-size: 13.5px; color: var(--terra); padding: 8px 10px; } .menu-perfil-nome { font-weight: 800; font-size: 14.5px; padding: 6px 10px 0; } .menu-perfil-papel { font-size: 12.5px; color: var(--terra); padding: 2px 10px 8px; } .menu-separador { height: 1px; background: var(--areia-escura); margin: 2px 6px 6px; } /* "Sair" era um botão-fantasma sobre o azul da lateral; agora vive num cartão branco e adota a linguagem de botão claro do design-system (branco, borda 2px azul), em tamanho de menu. */ .botao-sair { font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; width: 100%; color: var(--azul); background: var(--branco); border: 2px solid var(--azul); border-radius: 999px; padding: 8px 14px; } .botao-sair:hover { background: #EDF2FC; } .botao-sair:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; } /* ── Conteúdo ──────────────────────────────── */ .conteudo { padding: 24px clamp(18px, 3.4vw, 44px) 60px; min-width: 0; } .cabecalho { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .cabecalho h1 { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 30px; color: var(--azul); } .sync { margin-left: auto; font-size: 13px; color: var(--terra); } .sync:not(:empty)::before { content: '⟳ '; color: var(--laranja-escuro); } /* ── Cadastro manual — botão no cabeçalho da Triagem (Task 9, spec 2026-08-14) ──────────────────── Lugar definitivo decidido por MEDIÇÃO, não por preferência (ver o orçamento de espaço no bloco de comentário acima de `.filtros`, mais abaixo): o botão (~197px de largura renderizada) não coube na folga de ~21px que sobrava em `.filtros-linha` depois do chip "Convidados" — quebrava para uma segunda linha. Aqui no cabeçalho ele só precisa de `align-self: flex-start` (não `margin-left: auto`, que só fazia sentido dentro de `.filtros-linha`): `.cabecalho` já empurra tudo depois do h1 para a direita via `.sync { margin-left: auto }`, e o `align-self` corrige só o eixo vertical — sem ele o botão seguiria o `align-items: baseline` de `.cabecalho` e ficaria descolado do topo do `

` (que é bem maior). */ .botao-cadastro-manual { font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; color: var(--branco); background: var(--azul); border: 2px solid var(--azul); border-radius: 999px; padding: 7px 14px; align-self: flex-start; } .botao-cadastro-manual:hover { background: var(--azul-noite); border-color: var(--azul-noite); } .botao-cadastro-manual:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; } /* "Lista de inscritos" — segundo botão do cabeçalho da Triagem (2026-08-28, pedido das secretárias). Reaproveita `.botao-claro` (branco com borda azul, do design system) só encolhido para a MEDIDA DESTA LINHA: o `.botao-claro` cru nasceu na barra da mesa de equipes com 14.5px/padding 10-20 e, ao lado do `.botao-cadastro-manual` (13.5px/padding 7-14), ficava visivelmente mais alto — dois botões de tamanhos diferentes na mesma linha leem como hierarquia que não existe. `.cabecalho` tem `flex-wrap`, então em tela estreita o par desce inteiro em vez de espremer o

. */ .botao-cabecalho-menu { font-size: 13.5px; padding: 7px 14px; white-space: nowrap; } /* Menu alinhado pela DIREITA do gatilho. `.menu-ancora` ancora à esquerda por padrão (nasceu numa barra que começa à esquerda da tela); este menu nasce no fim do cabeçalho, e com `left: 0` os 232px de `min-width` do `.menu-suspenso` saíam pela borda direita da janela. */ .menu-ancora .menu-suspenso.menu-fim { left: auto; right: 0; } .contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 22px 0; } .contador { background: var(--branco); border-radius: 14px; padding: 14px 16px 12px; border-top: 6px solid var(--azul); box-shadow: 0 2px 0 var(--areia-escura); } .contador b { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 26px; color: var(--azul-noite); display: block; } .contador span { font-size: 13px; font-weight: 700; color: var(--terra); } .contador.aprovados { border-top-color: var(--sol); } .contador.espera { border-top-color: var(--laranja); } .contador.reprovados { border-top-color: var(--telha); } .contador.pendentes { border-top-color: var(--areia-escura); } /* Busca por nome na triagem — mesmo vocabulário visual dos inputs de auth (borda areia, foco laranja), largura contida no desktop e fluida no celular. */ .busca-nome { margin-bottom: 12px; } .busca-nome input { width: 100%; max-width: 380px; font: inherit; font-size: 14.5px; color: inherit; padding: 10px 14px; border: 2px solid var(--areia-escura); border-radius: 999px; background: var(--branco); } .busca-nome input:focus-visible { outline: 3px solid var(--laranja); outline-offset: 1px; } /* gap 4px (era 8px) e padding do chip 7px 8px (era 7px 14px) — revisão da Task 4 (spec 2026-08-07): o chip "Equipe fixa" + divisor engordaram #filtros em ~121px e derrubaram a folga antes do #filtro-periodo quebrar de linha em 1280px (medida como boundingBox(.filtros-linha).width menos a soma de #filtros + gap + #filtro-periodo) de ~124px para ~3px — a "linha única" da spec 2026-07-28 sobrevivia por um triz, sensível a qualquer jitter de métrica de fonte. Este corte devolve ~119px de folga (quase o valor original) sem tirar nenhum chip nem encolher o texto. ORÇAMENTO GASTO (2026-08-13): o chip "Convidados", pedido pelo dono para ficar ao lado de "Equipe fixa", consumiu ~98px dessa folga. Medido em 1280px com os dois períodos revelando o seletor: linha 953 − (chips 702 + gap 6 + período 224) = ~21px. A linha única da spec 2026-07-28 CONTINUA valendo em 1280 e em 1440 (é o teste "Período fica na mesma linha dos chips de status"), mas o ponto em que ela quebra subiu de ~1180px para ~1260px. Quem for acrescentar o PRÓXIMO chip aqui precisa comprar espaço antes — não cabe mais nada de graça. ORÇAMENTO TESTADO E PERDIDO (2026-08-14, Task 9): o botão "+ Cadastrar manualmente" foi a próxima coisa a pedir espaço aqui. Medido em 1280px, mesmas condições acima (dois períodos revelando o seletor): a folga continuava ~21px (20,77px exatos), e o botão renderizado media ~197px de largura — quase 10× o que sobrava. Colocado dentro de `.filtros-linha`, ele não quebrava a MEDIDA da linha (boundingBox de `.filtros-linha` não muda com o conteúdo, é um bloco cheio da largura do pai), mas quebrava PARA UMA SEGUNDA LINHA (flex-wrap): `boundingBox(#btn-cadastro-manual).y` saía ~44px abaixo de `boundingBox(#filtros).y`, deixando de estar "na mesma linha dos filtros" — o que a spec exige que ele NÃO pareça (é ação, não filtro). Perdeu. O botão foi para `.cabecalho` (ver `.botao-cadastro-manual` acima de `.contadores`, logo depois de `.sync`), que sobra a barra inteira. Esta linha (`.filtros-linha`) não ganhou nenhum elemento novo — o orçamento de ~21px continua o mesmo para quem vier depois. */ .filtros { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; } .filtro { font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--azul); background: var(--branco); border: 2px solid var(--areia-escura); border-radius: 999px; padding: 7px 8px; } .filtro.ligado { border-color: var(--laranja-escuro); background: linear-gradient(135deg, var(--sol), var(--laranja)); color: var(--azul-noite); } /* Divisor entre os chips de STATUS e o chip de EQUIPE FIXA (spec 2026-08-07): eles são eixos diferentes — um é exclusivo, o outro soma — e a linha é o que evita que o chip da direita seja lido como "mais um status". */ .filtros-divisor { width: 2px; align-self: stretch; background: var(--areia-escura); border-radius: 2px; } .lista-vazia { color: var(--terra); font-size: 14.5px; padding: 18px 4px; } .fila { display: flex; flex-direction: column; gap: 14px; } .voluntario { background: var(--branco); border-radius: 16px; padding: 18px 20px; box-shadow: 0 2px 0 var(--areia-escura); display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; position: relative; /* o cartão inteiro abre a ficha ao clicar — a mãozinha sinaliza que é clicável. Controles e foto mantêm o cursor próprio (ver resets abaixo). */ cursor: pointer; } .voluntario input, .voluntario textarea { cursor: text; } .voluntario .foto:not(.foto-ampliavel) { cursor: default; } .foto { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; background: linear-gradient(135deg, var(--sol), var(--laranja)); color: var(--azul-noite); font-weight: 700; font-size: 20px; position: relative; border: 3px solid var(--areia-escura); } .foto .foto-iniciais { position: absolute; inset: 0; display: grid; place-items: center; } .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; } .foto.com-foto .foto-iniciais { display: none; } .foto.com-foto img { display: block; } .voluntario h3 { font-size: 17px; color: var(--azul-noite); } .meta { font-size: 13.5px; color: #55648c; margin: 2px 0 8px; } .selos { display: flex; flex-wrap: wrap; gap: 6px; } .selo { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; border: 2px solid var(--azul); color: var(--azul); background: var(--branco); } .selo.info { border-color: var(--laranja-escuro); color: var(--laranja-escuro); background: #FFF3DC; } .selo.alerta { border-color: var(--laranja-escuro); color: var(--branco); background: var(--laranja-escuro); } .selo.bloqueio { border-color: var(--telha); color: var(--branco); background: var(--telha); } .selo.placeholder { border-color: var(--areia-escura); color: var(--terra); background: var(--areia); font-weight: 700; } /* Conflito é mais grave que alerta: dado errado (pessoas diferentes com um CPF só), não escolha de operação — por isso não reusa .selo.alerta nem .selo.bloqueio (essa já é o vermelho sólido do "reprovar"; um selo informativo não devia se confundir com um veredito). */ .selo.conflito { background: #fdecec; color: #8c1c1c; border-color: #e0a3a3; } /* Convidado (2026-08-13): sólido, não contornado como `.selo.info` — é o selo que se procura na fila, e ele precisa se separar à primeira vista do "equipe fixa" laranja que pode estar ao lado (a mesma pessoa pode ser fixa E convidada). O carimbo de status continua onde sempre esteve, no canto do cartão (`.carimbo`, position:absolute): este selo mora no fluxo, junto dos demais, e não disputa aquele espaço. `border-radius` QUADRADO, único selo desta família que não é pílula: é a mesma convenção do PDF das equipes (2026-08-13), onde o marcador do núcleo fixo é REDONDO e o do convidado é QUADRADO. A forma distingue antes de a palavra ser lida e sobrevive ao que a cor não sobrevive — impressão em preto e branco, daltonismo — e é justamente lado a lado com o selo "equipe fixa" (pílula laranja) que a diferença precisa aparecer. Papel e tela circulam na mesma reunião. */ .selo.convidado { background: var(--roxo); color: var(--branco); border-color: var(--roxo); border-radius: 5px; } /* Linha extra do resumo (última viagem · custo): mesma família visual da .meta, um pouco mais apagada, porque é contexto de apoio e não identificação. */ .meta-extra { margin-top: -6px; } /* Nota da avaliação da viagem anterior: verde discreto — é um sinal positivo de histórico, não um alerta. Fica na leitura rápida do cartão, sem competir com o nome. */ .meta-avaliacao { color: #2E5F22; font-weight: 700; margin-top: -4px; } /* ── Dados do ERP, editáveis à mão ───────────────────────────────────────────────────────────── Enquanto a integração com o ERP não existe, Horas do Bem e vínculo chegam vazios e são preenchidos aqui. Visual deliberadamente discreto e "de formulário": precisa parecer editável (ao contrário dos selos, que são leitura) sem competir com o nome nem com a decisão. */ .erp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; background: var(--areia); border: 1px dashed var(--areia-escura); border-radius: 10px; } .erp-titulo { font-size: 11px; font-weight: 800; color: var(--terra); text-transform: uppercase; letter-spacing: .04em; } /* Frases inteiras, uma por linha (2026-07-29: os pares "6m: 21" soltos ficavam crípticos): flex-basis 100% faz cada linha ocupar a largura do bloco dentro do flex do .erp. */ .erp-linha { flex: 1 0 100%; margin: 0; font-size: 13px; font-weight: 700; color: var(--azul-noite); } .erp-campo { display: inline-flex; align-items: center; gap: 6px; } .erp-campo label { font-size: 12.5px; font-weight: 700; color: var(--azul-noite); } .erp-input { font: inherit; font-size: 13px; font-weight: 800; width: 74px; text-align: center; color: var(--azul-noite); background: var(--branco); border: 2px solid var(--areia-escura); border-radius: 8px; padding: 3px 6px; } .erp-input:focus-visible { outline: 3px solid var(--laranja); outline-offset: 1px; border-color: var(--laranja); } /* some com as setinhas do number: o campo é estreito e elas roubam o espaço do próprio número */ .erp-input::-webkit-outer-spin-button, .erp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .erp-input { -moz-appearance: textfield; appearance: textfield; } .erp-vinculo { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 4px 12px; border: 2px solid transparent; } .erp-vinculo-ok { border-color: var(--azul); color: var(--azul); background: var(--branco); } .erp-vinculo-alerta { border-color: var(--laranja-escuro); color: var(--laranja-escuro); background: #FFF3DC; } /* "não sei" precisa parecer diferente de "inativo" — um vazio a preencher, não um veredito. */ .erp-vinculo-vazio { border-style: dashed; border-color: var(--areia-escura); color: var(--terra); background: var(--branco); } .erp-vinculo:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; } .erp-erro { font-size: 12px; font-weight: 700; color: var(--erro); } /* ── Ação de decisão (triagem) ────────────────────────────────── */ .decisao { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--areia-escura); } .decisao-nota-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--terra); margin-bottom: 6px; } .decisao-nota { width: 100%; font: inherit; font-size: 13.5px; color: inherit; padding: 9px 12px; border: 2px solid var(--areia-escura); border-radius: 12px; background: var(--areia); resize: vertical; } .decisao-nota:focus-visible { outline: 3px solid var(--laranja); outline-offset: 1px; } /* Linha ÚNICA sempre (pedido do Mickael 2026-07-29: no monitor dele os botões quebravam): grid-auto-flow em coluna dá N colunas iguais para N botões — 4 na triagem (com Entrevistar), 3 no "Mudar status" da ficha — sem depender da largura do cartão. */ .decisao-botoes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 10px; } .botao-decisao { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 8px 6px; border: 2px solid transparent; text-align: center; white-space: nowrap; transition: transform .12s ease; } .botao-decisao:hover { transform: translateY(-1px); } .botao-decisao:disabled { opacity: .6; cursor: not-allowed; transform: none; } .botao-decisao:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; } .botao-decisao.aprovar { background: linear-gradient(135deg, var(--sol), var(--laranja)); color: var(--azul-noite); } .botao-decisao.espera { background: var(--branco); border-color: var(--laranja-escuro); color: var(--laranja-escuro); } .botao-decisao.reprovar { background: var(--branco); border-color: var(--telha); color: var(--telha); } .decisao-erro { color: var(--erro); font-size: 12.5px; font-weight: 700; margin-top: 8px; } /* "Entrevistar" na mesma fileira dos vereditos (2026-07-29); o contorno azul segue dizendo que não é um veredito — é adiar a decisão até conversar. */ .botao-decisao.entrevistar { background: var(--branco); border-color: var(--azul); color: var(--azul); } .botao-decisao.entrevistar:hover { background: #EDF2FC; } /* ── Módulo de entrevista ────────────────────────────────────────────────────────────────────── Passo intermediário da triagem: quem tria marca a conversa, alguém entrevista, e o PARECER aplica a decisão. Visualmente destacado do bloco de decisão (fundo e borda azuis) porque é outro momento do processo — e fica acima dele, já que quando existe parecer é ele que decide. */ .entrevista { margin-top: 14px; padding: 12px 14px; background: #EDF2FC; border: 2px solid var(--azul); border-radius: 12px; } .entrevista-titulo { display: block; font-size: 11px; font-weight: 800; color: var(--azul); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } .entrevista-resumo { font-size: 13.5px; font-weight: 700; color: var(--azul-noite); } .entrevista-obs-anterior { font-size: 13px; color: var(--azul-suave); margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--areia-escura); white-space: pre-wrap; } .entrevista-registrador { font-size: 12px; color: var(--terra); margin-top: 6px; } .entrevista-rotulo { display: block; font-size: 12.5px; font-weight: 700; color: var(--azul-noite); margin: 10px 0 5px; } .entrevista-quem, .entrevista-obs { width: 100%; font: inherit; font-size: 13.5px; color: inherit; padding: 9px 12px; border: 2px solid var(--areia-escura); border-radius: 10px; background: var(--branco); } .entrevista-obs { resize: vertical; } .entrevista-quem:focus-visible, .entrevista-obs:focus-visible { outline: 3px solid var(--laranja); outline-offset: 1px; } .entrevista-erro { color: var(--erro); font-size: 12.5px; font-weight: 700; margin-top: 8px; } /* Pareceres em linha única sempre — mesma técnica dos vereditos (2026-07-29: "Reprovado" caía na linha de baixo no monitor do Mickael). */ .entrevista-botoes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; } /* Dica no cartão da Triagem quando a entrevista está pendente: o registro vive na guia Entrevistas — aqui só se marca. */ .entrevista-dica { font-size: 12.5px; font-weight: 700; color: var(--azul); margin-top: 4px; } /* Guia Entrevistas (Task 11, js/entrevistas.js): grade de cartões próprios ("Aguardando" · "Já entrevistadas"), distintos dos cartões `.voluntario` da Triagem — mais enxutos, porque aqui o que importa é achar rápido quem falta e abrir a ficha/registrar o parecer. `.entrevista` (singular, acima) continua sendo o bloco compartilhado que vive DENTRO do cartão `.entrevista- cartao` (plural), com o formulário ou o resumo do parecer. */ .entrevistas-titulo { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 18px; color: var(--azul); margin: 18px 0 8px; } /* Filtros da guia (2026-07-29): chips de situação + busca por nome, acima dos contadores. Mesma família visual dos chips de status da triagem, versão enxuta. */ .entrevistas-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; } .chip-filtro { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 6px 14px; background: var(--branco); border: 2px solid var(--areia-escura); color: var(--azul-noite); } .chip-filtro:hover { border-color: var(--azul); } .chip-filtro.ativo { background: var(--azul); border-color: var(--azul); color: var(--branco); } .chip-filtro:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; } .entrevistas-busca { font: inherit; font-size: 13.5px; padding: 6px 12px; min-width: 220px; border: 2px solid var(--areia-escura); border-radius: 999px; background: var(--branco); color: var(--azul-noite); } .entrevistas-busca:focus-visible { outline: 3px solid var(--laranja); outline-offset: 1px; border-color: var(--laranja); } .entrevistas-lista { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .entrevista-cartao { background: var(--branco); border: 2px solid var(--areia-escura); border-radius: 12px; padding: 14px; } .entrevista-cartao.aguardando { border-color: var(--laranja); } .entrevista-nome { font-weight: 700; color: var(--azul); background: none; border: 0; padding: 0; cursor: pointer; font-size: 16px; } .entrevista-meta { font-size: 13px; color: var(--azul-suave); margin: 4px 0 8px; } /* O contador de entrevista usa o azul da marca — é etapa de processo, não alerta. Classe no PLURAL de propósito: `.entrevista` (singular) é o MÓDULO da caixa azul dentro do cartão (acima), com `border: 2px` em todos os lados. Se o contador também fosse `.entrevista`, herdaria essa borda de 2px e perderia a barrinha de 6px do topo que os outros contadores têm — era exatamente esse o bug. */ .contador.entrevistas { border-top-color: var(--azul); } .carimbo-entrevista { color: var(--azul); } .decisao-info { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--azul); } /* Carimbo de decisão: burocracia afetiva de caderneta de viagem — rotacionado, borda tracejada, sobreposto ao canto do cartão depois que a decisão é registrada. */ .carimbo { position: absolute; top: 16px; right: 20px; border: 3px dashed currentColor; border-radius: 10px; padding: 5px 14px; background: var(--branco); font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 15px; letter-spacing: .04em; transform: rotate(-8deg); pointer-events: none; } .carimbo-aprovado { color: var(--azul); } .carimbo-espera { color: var(--laranja-escuro); } .carimbo-reprovado { color: var(--telha); } /* ── Mesa de equipes (Tarefa 8) ───────────────────────────────── */ .painel-aba { min-width: 0; } /* `flex-wrap` também no DESKTOP (2026-08-19): até aqui a barra tinha três controles e um botão, e sem quebra os itens só ENCOLHIAM — o que, num botão, significa quebrar o rótulo por dentro. Ao entrar o segundo botão de PDF ("PDF para secretárias"), os três botões da barra passaram a sair com o texto partido em duas linhas ("Baixar PDF das / equipes"), cada um com altura diferente do vizinho. Achado olhando a tela, não em teste. Com `wrap` + `nowrap` nos botões, o que falta espaço ganha uma linha nova em vez de espremer: em tela larga continua tudo numa linha só, como sempre foi. É a mesma correção que o celular já tinha (ver §Celular), agora valendo para todas as larguras — o estouro que ela evita lá é o mesmo aperto que aparece aqui. */ .equipes-barra { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; } /* O rótulo do botão é a unidade indivisível: melhor a barra ganhar uma segunda linha do que um botão virar duas. `.busca-limpar` fica de fora porque é o "×" — não tem o que quebrar. */ .equipes-barra button:not(.busca-limpar) { white-space: nowrap; } /* Busca da mesa (Task 12) — destaca sem esconder: a coluna precisa continuar legível para responder "onde a pessoa está", que é o motivo de existir da busca. Tokens reusados do resto do arquivo (--areia-escura para borda de input, --azul-suave para texto secundário — não existe --linha/--tinta-* neste arquivo, são tokens do impressao.css, de outro namespace). */ .busca-equipes { min-width: 220px; padding: 6px 10px; border: 1px solid var(--areia-escura); border-radius: 6px; font: inherit; } .busca-limpar { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--azul-suave); } .busca-resultado { font-size: 13px; color: var(--azul-suave); } .estado li.busca-achou { outline: 2px solid var(--laranja); background: #FFF7EC; } .estado li.busca-apagado { opacity: 0.35; } .botao-sugerir { font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; color: var(--azul-noite); border: none; border-radius: 999px; padding: 10px 20px; background: linear-gradient(135deg, var(--sol), var(--laranja)); box-shadow: 0 4px 0 var(--laranja-escuro); transition: transform .12s ease, box-shadow .12s ease; } .botao-sugerir:hover { transform: translateY(-1px); } .botao-sugerir:disabled { opacity: .65; cursor: not-allowed; transform: none; } .botao-sugerir:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; } .equipes-erro { color: var(--erro); font-size: 13.5px; font-weight: 700; margin-bottom: 12px; } /* Resultado normal da ação (quantas pessoas entraram, ou por que ninguém entrou) — informa sem alarmar: vermelho é para falha, não para "a sugestão não tinha o que distribuir". */ .equipes-erro.aviso { color: var(--terra); background: var(--areia); border-left: 4px solid var(--sol); padding: 8px 12px; border-radius: 0 8px 8px 0; font-weight: 600; } .equipes-pool { background: var(--branco); border-radius: 16px; padding: 14px 18px 16px; box-shadow: 0 2px 0 var(--areia-escura); margin-bottom: 18px; } .equipes-pool h2 { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 16px; color: var(--azul); margin-bottom: 10px; } .pool-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .mesa { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } /* ── Cor por unidade (decisão do Mickael 2026-07-29): Alagoas azul · Catimbau amarelo · Ceará verde · Inajá laranja. Cada classe define o quarteto de variáveis que o cabeçalho, a assinatura da coluna e o pop-up de resumo consomem: --u-forte fundo do cabeçalho e assinatura da coluna --u-texto texto legível sobre o forte (Catimbau é claro → texto ESCURO) --u-realce cor de destaque sobre o forte (passagens, função incompleta) Contrastes conferidos para texto pequeno (AA): areia sobre #1D4FA1 6,9:1 · sobre #206A38 6,1:1 · sobre #B84E06 5,0:1 · #4A2E00 sobre #FFC20E 8,8:1. Equipe com outro nome cai num ciclo pelas quatro cores, na ordem das colunas. */ .estado { /* fallback = visual clássico azul, para qualquer contexto sem classe de unidade */ --u-forte: var(--azul); --u-texto: var(--areia); --u-realce: var(--laranja-sobre-azul); background: var(--branco); border-radius: 16px; box-shadow: 0 3px 0 var(--u-forte); overflow: hidden; /* Borda leve na cor da unidade (pedido 2026-08-12, "leve" duas vezes — errar para o sutil): as colunas ficam lado a lado e, sem nada entre elas, o branco de uma encosta direto no branco da vizinha, sem contraste nenhum. `color-mix` dilui `--u-forte` a 30% sobre o branco do cartão em vez de um `border-color` cheio, que pesaria como moldura — token de cor de sempre, só a intensidade muda. Mesmo patamar de suporte de navegador que `:has()` (já usado mais abaixo, ".voluntario:has(.carimbo)"), então não é feature nova para este projeto. `outline` (não border) é quem sinaliza arraste — .sobre-drag e .arraste-ativo continuam intocados, outline desenha numa camada própria, por cima desta borda, sem disputar espaço com ela. */ border: 1px solid color-mix(in srgb, var(--u-forte) 30%, var(--branco)); } /* As classes de unidade vêm DEPOIS do fallback do .estado de propósito: mesma especificidade — se ficassem antes, o fallback venceria e todas as colunas voltariam ao azul. Texto dos cabeçalhos: BRANCO PURO (pedido do Mickael 2026-07-29 — os tons areia com opacidade liam como cinza); no Catimbau (fundo claro) o texto é um marrom bem escuro, pelo mesmo motivo. */ .unidade-azul { --u-forte: #1D4FA1; --u-texto: #FFFFFF; --u-realce: #FFBE78; } .unidade-verde { --u-forte: #206A38; --u-texto: #FFFFFF; --u-realce: #FFC98F; } .unidade-laranja { --u-forte: #B84E06; --u-texto: #FFFFFF; --u-realce: #FFE3A8; } .unidade-amarela { --u-forte: #FFC20E; --u-texto: #3A2300; --u-realce: #B23A2A; } .estado header { background: var(--u-forte); color: var(--u-texto); padding: 14px 16px 12px; } .estado header h4 { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 19px; letter-spacing: .01em; } /* sem opacidade no texto do cabeçalho: sobre as cores fortes, qualquer véu lia como cinza */ .estado header small { display: block; font-size: 12px; margin-top: 8px; line-height: 1.55; } /* Estouro de vagas: anel telha na coluna inteira (o header não muda mais de cor — a cor agora é a identidade da unidade; pintar de laranja apagaria o Inajá e mentiria nos demais). */ .estado.alerta-vagas header { background: var(--u-forte); } .estado.alerta-vagas { box-shadow: inset 0 0 0 3px var(--telha), 0 3px 0 var(--telha); } .estado.sobre-drag { outline: 3px dashed var(--laranja-escuro); outline-offset: -3px; } .estado ul, .pool-lista { list-style: none; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; } .pool-lista { padding: 0; flex-direction: row; } /* Cartão compacto: o conteúdo estava estourando a borda da coluna porque o nome não truncava e os controles internos ocupavam largura fixa. Agora o nome encolhe (min-width:0 + ellipsis) e tudo o mais é `flex: none`, então o cartão sempre cabe. Só o essencial de leitura fica visível. */ /* Cartão em DUAS linhas sempre (2026-07-29: nomes viviam cortados — o Mickael quer ler no mínimo nome e sobrenome): .pilula-topo (mini + nome inteiro) em cima, .pilula-acoes (selos/pastilhas) embaixo. No pool os itens só têm o topo + selos, mesma anatomia. */ .estado li, .pool-lista li { display: block; font-size: 12.5px; font-weight: 700; background: var(--areia); border: 2px solid var(--areia-escura); border-radius: 14px; padding: 6px 8px; cursor: grab; max-width: 100%; min-width: 0; overflow: hidden; } .pilula-topo { display: flex; align-items: center; gap: 6px; } .pilula-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 5px; } .estado li:active, .pool-lista li:active { cursor: grabbing; } .estado li .mini, .pool-lista li .mini { width: 24px; height: 24px; border-radius: 50%; flex: none; font-size: 10.5px; background: linear-gradient(135deg, var(--sol), var(--laranja)); color: var(--azul-noite); display: grid; place-items: center; } /* O nome aparece INTEIRO: quebra linha em vez de cortar com reticências (2026-07-29 — pedido de ler ao menos nome e sobrenome). O overflow-wrap cobre sobrenome quilométrico sem estourar. */ .pilula-nome { white-space: normal; overflow-wrap: anywhere; min-width: 0; flex: 1 1 auto; line-height: 1.25; } .pilula-selos, .estado li .passagem, .pool-lista li .passagem { flex: none; } /* Selos de composição (F/M · 1ª/vet · fixo): leitura rápida de quem é quem na mesa, sem abrir cadastro. Discretos de propósito — informam sem competir com o nome, que é o que se lê primeiro. */ .pilula-selos { display: inline-flex; gap: 4px; align-items: center; } .selo-mini { font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .02em; padding: 3px 5px; border-radius: 5px; border: 1px solid transparent; white-space: nowrap; } .selo-f { background: #FBE4EF; border-color: #E9A9CB; color: #8C2E63; } .selo-m { background: #E2ECFB; border-color: #A9C4E9; color: #1D4FA1; } .selo-vet { background: #E7F1E4; border-color: #A9CBA0; color: #2E5F22; } .selo-novato { background: #FFF1D6; border-color: #F0C97A; color: #8A5A08; } .selo-fixo { background: #EDF2FC; border-color: var(--azul); color: var(--azul); } /* Fixo: continua visualmente distinto, mas agora arrasta como todo mundo — cursor de "pegável" em vez de `default`, senão a pílula diz "não me mova" e contradiz o comportamento. O pool "Fixos sem equipe" (2026-07-29) usa a mesma marca — fixo é fixo, alocado ou disponível. */ .estado .fixo, .pool-lista .fixo { border-style: solid; border-color: var(--azul); background: #EDF2FC; } /* Convidado na mesa (pedido do dono, 2026-08-13: "também tem uma cor diferente lá nas equipes, assim como fixos tem uma cor diferente"). Roxo — ver o comentário do token em :root para por que não podia ser nenhuma das cores já faladas aqui. Os dois eixos são independentes — alguém pode ser do núcleo fixo E convidado ao mesmo tempo —, então cada um fica com uma PROPRIEDADE só sua, e as duas se compõem sem uma apagar a outra: FUNDO = a vaga areia (rotativo) · azul (núcleo fixo) BORDA = o convite areia-escura (sem convite) · roxa (convidado) Lê-se: pílula roxa inteira = convidado rotativo; azul com anel roxo = fixo E convidado; azul com anel azul = fixo e mais nada. (A primeira versão desta regra marcava o convite com uma faixa lateral em `box-shadow: inset` — que o `border-radius: 14px` da pílula transformava numa lasquinha de dois ou três pixels, invisível no tamanho real. Só apareceu ampliando a captura em 3x; o anel inteiro é o mesmo sinal, sem depender de zoom.) */ .estado li.convidado, .pool-lista li.convidado { border-style: solid; border-color: var(--roxo); background: var(--roxo-claro); } /* Fixo E convidado: o FUNDO volta ao azul do fixo; a BORDA roxa da regra acima é o que fica, e é ela que carrega o convite. Precisa vir DEPOIS de `.estado .fixo` (que também pinta o fundo) — a especificidade já resolveria, mas a ordem deixa a intenção legível para quem editar. */ .estado li.fixo.convidado, .pool-lista li.fixo.convidado { background: #EDF2FC; } /* Raio-X da equipe (2026-07-29): o cabeçalho da coluna abre um overlay de leitura. O cursor sinaliza o clique; os chips de composição continuam só filtrando (guard no JS, não CSS). */ .cabecalho-abrivel { cursor: pointer; } .equipe-resumo-titulo { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 24px; color: var(--u-forte, var(--azul)); margin: 4px 0 2px; border-bottom: 4px solid var(--u-forte, var(--azul)); padding-bottom: 6px; display: inline-block; } /* O amarelo do Catimbau não segura um título legível — o texto usa o marrom da unidade e a linha embaixo fica com o amarelo, que é quem carrega a identidade. */ .equipe-resumo.unidade-amarela .equipe-resumo-titulo { color: #4A2E00; } .equipe-resumo-membros { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .equipe-resumo-membros li { background: var(--areia); border: 2px solid var(--areia-escura); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; } .equipe-resumo-membros li.fixo { border-color: var(--azul); background: #EDF2FC; } /* Mesma gramática da mesa (ver .estado li.convidado): fundo diz a vaga, borda diz o convite — o raio-X é leitura da MESMA coluna e não pode ler diferente dela. */ .equipe-resumo-membros li.convidado { border-color: var(--roxo); background: var(--roxo-claro); } .equipe-resumo-membros li.fixo.convidado { background: #EDF2FC; } .equipe-resumo-membros li b { color: var(--azul-noite); } .equipe-resumo-membros li span { color: var(--terra); font-weight: 600; } /* Função essencial sem ninguém escalado num posto necessário — o único caso da lista que exige ação de quem está montando a equipe. */ .equipe-resumo .funcao-zerada { color: #B87A0E; font-weight: 600; } /* Enquanto arrasta, o cartão que segue o cursor é o próprio cartão, sólido (setDragImage no JS). O que fica para trás é só a MARCA do lugar de origem — contorno tracejado e um leve esmaecimento, não um cartão fantasma. Antes o original ia a opacity .45 já no dragstart, e como o navegador tira o retrato do elemento nesse exato momento, o cartão arrastado saía apagado: parecia que a pessoa tinha sumido em vez de estar sendo levada para a outra coluna. */ .estado li.arrastando, .pool-lista li.arrastando { opacity: .9; border-style: dashed; border-color: var(--laranja); background: var(--areia-escura); } /* Durante o arraste, o miolo das pílulas para de receber ponteiro: os com opções longas como "Função (escalados primeiro)", e os dois botões) não encolhem abaixo do próprio conteúdo, a barra INTEIRA estourava a largura da tela — não só visualmente: o `` ficava com scrollWidth > clientWidth, o que faz o Chromium mobile tratar a página como "não responsiva" e desenhá-la num viewport de layout maior que o real (visualViewport continuava 390×844, mas window.innerWidth/innerHeight inflavam ~1,76×). Isso descasa as coordenadas que o toque usa (baseadas no viewport real) das que o layout usa (o viewport inflado), e QUALQUER clique na tela passa a errar o alvo — foi assim que auditoria.spec.ts flagrou isto: o toque para devolver alguém da equipe ao pool nunca acertava o cartão, por 30s de retries. Sem `flex-wrap: wrap` aqui a barra nunca quebra — precisa impedir o estouro na origem, não só encolher os botões. */ .equipes-barra { flex-wrap: wrap; } /* O vai escondido pelo atributo `hidden` no JS. */ .ficha-foto-acoes { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .ficha-trocar-foto { border: 1px solid var(--areia-escura); background: var(--areia); color: var(--azul-noite); border-radius: 999px; padding: 4px 12px; font-size: .82rem; cursor: pointer; } .ficha-trocar-foto:hover:not(:disabled) { background: var(--areia-escura); } .ficha-trocar-foto:disabled { opacity: .6; cursor: progress; } .ficha-foto-erro { color: var(--erro); font-size: .82rem; } /* ── Status da triagem na ficha (2026-07-29) ───────────────────────────────────────────────────── Informação + único lugar de troca depois de decidido: pastilha com o status atual (e "por Fulano") ao lado do botão "Mudar status", que abre os vereditos + confirmação em duas etapas (classes .decisao-botoes/.confirmar-decisao reusadas da triagem). As cores por status espelham as dos carimbos, em versão pastilha. */ .ficha-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .ficha-status-rotulo { color: var(--terra); font-weight: 700; font-size: .92rem; } .ficha-status-atual { padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: .88rem; border: 2px solid var(--areia-escura); color: var(--azul-noite); background: var(--branco); } .ficha-status-atual.st-aprovado { border-color: var(--laranja); color: var(--laranja-escuro); background: #FFF3DC; } .ficha-status-atual.st-espera { border-color: var(--laranja-escuro); color: var(--laranja-escuro); } .ficha-status-atual.st-reprovado { border-color: var(--telha); color: var(--telha); } .ficha-status-atual.st-entrevista { border-color: var(--azul); color: var(--azul); } .ficha-status-trocar { white-space: nowrap; } /* ── Convidado na ficha (pedido do dono, 2026-08-13: "ao entrar no card eu posso marcar um botão de convidado") ──────────────────────────────────────────────────────────────────────────────── Fica na MESMA linha do status, logo depois da pastilha do veredito, porque é isso que a marcação é: um segundo eixo que convive com o primeiro, não um substituto dele. Duas aparências, um botão só — apagado (contorno) quando não é convidado, roxo cheio quando é —, no mesmo idioma de "ligado/desligado" das pastilhas de passagem e função logo ao lado. */ .ficha-convidado { display: inline-flex; align-items: center; gap: 6px; } .ficha-convidado-pastilha { font: inherit; font-size: .88rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--areia-escura); background: var(--branco); color: var(--terra); } button.ficha-convidado-pastilha { cursor: pointer; } .ficha-convidado-pastilha.ligado { border-color: var(--roxo); background: var(--roxo); color: var(--branco); } .ficha-convidado-pastilha:focus-visible { outline: 3px solid var(--roxo); outline-offset: 2px; } .ficha-convidado-pastilha[disabled] { opacity: .6; cursor: progress; } /* O erro do convite é curto e mora ao lado da pastilha (não embaixo, como o de decisão): ele fala de UM clique que não passou, e a pessoa precisa lê-lo sem perder de vista o controle que voltou ao estado anterior. Par `[hidden]` obrigatório — a classe tem `display`. */ .ficha-convidado-erro { font-size: .8rem; font-weight: 700; color: var(--erro); display: inline-block; } .ficha-convidado-erro[hidden] { display: none; } /* Função da alocação (pedido 2026-08-12): "lá onde tem Mudar status, encostado à direita da borda". `margin-left:auto` empurra o bloco para a ponta direita da MESMA linha flex de status/atual/"Mudar status" — o respiro em relação à borda do CARTÃO já vem do padding do `.ficha-cartao` (28px, ver mais abaixo); não precisa de mais nada aqui para "não colado". */ .ficha-status-funcao { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .ficha-status-area { width: 100%; } .ficha-status-area .decisao-botoes { margin-top: 0; } .ficha-status-area .confirmar-decisao { margin-top: 8px; } .ficha-secao { border-top: 1px solid var(--areia-escura); padding-top: 14px; margin-top: 14px; } .ficha-secao h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--laranja-escuro); margin-bottom: 8px; } .ficha-linha { font-size: .95rem; margin-bottom: 4px; } .ficha-rotulo { color: var(--terra); font-weight: 700; } .ficha-valor { color: var(--azul-noite); } .ficha-motivo { font-size: .95rem; color: var(--azul-noite); white-space: pre-wrap; } /* (Saíram daqui os estilos do seletor "Tipo de passagem" da ficha — .ficha-tipo-passagem, .ficha-tipo-passagem-select, .ficha-valor-auto e .ficha-tipo-passagem-erro. O controle viveu algumas horas em 2026-08-13 e foi retirado por decisão do dono: era um segundo lugar decidindo a mesma coisa que a pastilha de passagem da alocação. Ver o comentário em js/ficha.js.) */ /* Bloco de inscrições irmãs (CPF repetido/conflito) + a barra de confirmação de arquivar/restaurar. `.ficha-repetida` virou flex (revisão final C1) para acomodar o botão Restaurar por IRMÃ ao lado do texto do protocolo — `.ficha-confirmacao` força quebra de linha própria (flex-basis:100%) quando aparece, em vez de espremer ao lado do texto. */ .ficha-repetida { padding: 6px 0; border-bottom: 1px solid var(--areia-escura); font-size: .95rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .ficha-repetida:last-of-type { border-bottom: 0; } .ficha-nota { margin: 0 0 10px; font-size: .9rem; color: var(--terra); line-height: 1.45; } .ficha-confirmacao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; flex-basis: 100%; } /* Campos de ERP dentro da ficha (total / 6m / 12m + vínculo) */ .ficha-erp-campo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: .95rem; color: var(--terra); font-weight: 700; } .ficha-erp-campo .erp-input { width: 96px; padding: 6px 8px; border: 1px solid var(--areia-escura); border-radius: 8px; font: inherit; text-align: right; } .ficha-erp .erp-vinculo { display: inline-block; margin-top: 6px; padding: 5px 12px; border: none; border-radius: 999px; font: inherit; font-size: .88rem; cursor: pointer; } .ficha-erp .erp-vinculo-ok { background: #E4F3E6; color: #256B2E; } .ficha-erp .erp-vinculo-alerta { background: #FBE6E2; color: var(--telha); } .ficha-erp .erp-vinculo-vazio { background: var(--areia); color: var(--terra); border: 1px dashed var(--areia-escura); } .ficha-erp .erp-erro { display: block; margin-top: 6px; color: var(--erro); font-size: .85rem; } .erp-sincronizado { font-size: 12.5px; color: var(--azul-suave); margin: 4px 0 8px; } /* Bloco de viagem (ficha aberta pelas equipes). O respiro e a largura da pastilha por extenso moram em .passagem-longa (perto de .passagem, lá em cima) — a regra duplicada que existia aqui saiu para não haver dois lugares decidindo a mesma margem. */ /* Nome do membro clicável (abre a ficha) + ⓘ que só aparece no toque */ .pilula-nome-abrivel { cursor: pointer; } .pilula-info { display: none; margin-left: auto; border: none; background: transparent; color: var(--azul); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 2px 4px; } @media (max-width: 860px), (hover: none) and (pointer: coarse) { .pilula-info { display: inline-flex; } } /* Overlay do formulário — mesmo padrão de .ficha-overlay/.ficha-cartao (div com role="dialog", fecha no Escape/clique fora, foco no primeiro controle), com classes próprias porque o conteúdo é um FORMULÁRIO, não uma leitura. Reusa .campo/.mensagem-erro (mesmas regras do login) para os campos ficarem consistentes com o resto do painel, e .ficha-fechar/.botao-sol para o × e o botão de ação — sem inventar um segundo vocabulário visual para a mesma coisa. */ .cadastro-manual-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; background: rgba(14, 42, 92, .55); } .cadastro-manual-cartao { position: relative; width: 100%; max-width: 480px; background: var(--branco); border-radius: 18px; padding: 28px; box-shadow: 0 16px 56px rgba(14, 42, 92, .38); } .cadastro-manual-titulo { font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 22px; color: var(--azul); margin-bottom: 4px; padding-right: 36px; } .cadastro-manual-cartao .apoio-usuarios { margin: 0 0 4px; font-size: 13.5px; } /* Opcionais visivelmente secundários (spec §2: "abaixo e visivelmente secundários") — fieldset próprio, separado por uma linha, rótulo discreto em caixa baixa de intenção, campos com o mesmo controle mas rótulo mais leve — para não competir visualmente com nome/CPF/nascimento. */ .cadastro-manual-opcionais { margin-top: 20px; padding: 16px 0 0; border: none; border-top: 2px solid var(--areia-escura); } .cadastro-manual-opcionais legend { padding: 0; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--azul-suave); } .cadastro-manual-opcionais .campo { margin-top: 12px; } .cadastro-manual-opcionais .campo label { font-weight: 600; font-size: 13.5px; color: var(--azul-suave); } .campo select { width: 100%; font: inherit; color: inherit; padding: 11px 14px; border: 2px solid var(--areia-escura); border-radius: 12px; background: var(--areia); } .campo .mensagem-erro { margin-top: 6px; font-size: 12.5px; } .campo-checkbox { display: flex; align-items: center; gap: 8px; } .campo-checkbox input[type="checkbox"] { width: 18px; height: 18px; flex: none; } .campo-checkbox label { margin-bottom: 0; font-weight: 600; font-size: 13.5px; } /* Atalho "Abrir ficha" do 409 de CPF duplicado (spec §4) — vive DENTRO do

do CPF (ver anexarAtalhoFicha em js/cadastro-manual.js), então herda a cor de erro por padrão; aqui ele vira link em --azul, sublinhado, para não ler como mais uma frase de erro. */ .mensagem-erro-acao { display: block; margin-top: 4px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--azul); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; } .mensagem-erro-acao:hover, .mensagem-erro-acao:focus-visible { color: var(--azul-noite); } /* Aviso de CPF repetido AO SAIR DO CAMPO (Task 8) — parágrafo PRÓPRIO, não o .mensagem-erro do CPF (que segue reservado para "CPF inválido"/o 409 do envio). Mesma cara âmbar/informativa do aviso em .equipes-erro.aviso (js/equipes.js): informa sem alarmar — quem barra de verdade é o POST. */ .aviso-cpf { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--terra); background: var(--areia); border-left: 4px solid var(--sol); padding: 8px 12px; border-radius: 0 8px 8px 0; } .cadastro-manual-cartao .botao-sol { margin-top: 22px; } /* ── Confirmação de decisão em duas etapas (triagem) ─────────── */ .confirmar-decisao { margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--areia); border: 1px solid var(--areia-escura); } .confirmar-pergunta { font-weight: 700; color: var(--azul-noite); margin-bottom: 8px; } .confirmar-obs-label { display: block; font-size: .82rem; color: var(--terra); margin-bottom: 4px; } .confirmar-obs { width: 100%; padding: 8px; border: 1px solid var(--areia-escura); border-radius: 8px; font: inherit; resize: vertical; } .confirmar-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } /* ── Resumo de passagens (total geral da mesa, abaixo de todas as colunas) ──── */ /* ── Chips de composição no cabeçalho da coluna (spec 2026-08-12) ──────────────────────────────── Substituem três linhas de números soltos (F/M · veteranos/novatos · reserva/standby/a definir · funções escaladas) por uma grade de botões que informa E filtra a mesa inteira — ver construirChipsComposicao/alternarFiltroComposicao em js/equipes.js. `flex-wrap:wrap` é o que evita estourar a largura da coluna (mesma lição da barra de busca/ordenação corrigida hoje: uma grade que não quebra sozinha incha `html.scrollWidth` além do viewport e desalinha todo clique da página no Chromium mobile). Borda em `currentColor` (não uma cor nova): o texto (`--u-texto`) já tem contraste AA conferido contra o fundo de cada unidade (ver comentário no topo de `.estado`) — herdar a MESMA cor para a borda garante o mesmo contraste, sem inventar paleta. */ .chips-composicao { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .chip-composicao { display: inline-flex; align-items: baseline; gap: 4px; font: inherit; border-radius: 999px; padding: 5px 10px; min-height: 30px; background: transparent; border: 1.5px solid currentColor; color: var(--u-texto, var(--areia)); } .chip-composicao .chip-numero { font-weight: 800; font-size: 13px; } .chip-composicao .chip-rotulo { font-weight: 600; font-size: 10.5px; opacity: .9; } button.chip-composicao { cursor: pointer; } button.chip-composicao:hover { background: rgba(255, 255, 255, .16); } .chip-composicao:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; } /* foco amarelo (--sol) some sobre o cabeçalho amarelo do Catimbau — mesmo ajuste que os campos de vaga/função tinham antes de sair (ver git blame), ali o anel vira azul. */ .unidade-amarela .chip-composicao:focus-visible { outline-color: var(--azul); } /* Aceso: mesma linguagem visual de "selecionado" usada em todo o painel (.filtro.ligado, .aval-chip.ligado, .botao-sol) — gradiente sol→laranja com texto azul-noite. Opaco de propósito: não depende do contraste calculado contra o fundo da unidade por baixo. */ .chip-composicao.ligado { background: linear-gradient(135deg, var(--sol), var(--laranja)); border-color: var(--laranja-escuro); color: var(--azul-noite); } /* Zero pessoas nesta categoria: apagado e sem cursor de clique — filtrar por algo que não existe na equipe só esvaziaria a coluna (mesma ideia de opacidade reduzida de .estado li.busca-apagado). */ .chip-composicao.chip-zero { opacity: .5; border-style: dashed; } @media (max-width: 860px), (hover: none) and (pointer: coarse) { /* Alvo confortável no dedo — mesmo espírito do ajuste de .estado li/.passagem em §Celular. */ .chip-composicao { padding: 7px 12px; min-height: 34px; } } /* ── Chips em DESTAQUE (pedido 2026-08-12: "22 rotativos"/"6 em vaga fixa" clicáveis, em cima, em destaque) ───────────────────────────────────────────────────────────────────────────────── Mesma classe base `.chip-composicao` acima — `.chip-destaque` só reforça o peso visual: número maior (17px vs 13px) e borda mais grossa (2px vs 1.5px), sem trocar cor nenhuma (seguem herdando `--u-texto`/o gradiente sol→laranja quando aceso, tokens de sempre). É a informação mais estruturante da coluna — quantas pessoas, de que natureza — por isso pesa mais que os 10 chips de composição. Grade PRÓPRIA (`.chips-destaque`, não entra em `.chips-composicao`) para garantir a posição "em cima" sem depender da ordem de wrap. Seletor composto `.chip-composicao.chip-destaque` (não só `.chip-destaque`) de propósito: as duas classes vivem no MESMO elemento (ver criarChip em equipes.js), e um seletor de uma classe só (especificidade 0,1,0) empata com `.chip-composicao { border; padding }` acima — a ordem no arquivo decidiria quem vence, um jeito frágil de qualquer futura reordenação quebrar isto em silêncio. Composto (especificidade 0,2,0) vence sempre, sem depender de ficar depois no arquivo. */ .chips-destaque { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .chip-composicao.chip-destaque { border-width: 2px; padding: 6px 12px; } .chip-composicao.chip-destaque .chip-numero { font-size: 17px; } .chip-composicao.chip-destaque .chip-rotulo { font-size: 11.5px; } @media (max-width: 860px), (hover: none) and (pointer: coarse) { .chip-composicao.chip-destaque { padding: 9px 15px; } } /* ── Resumo geral das equipes (pedido do dono, 2026-08-13) ────────────────────────────────────── A planilha "RESUMO EQUIPE" dentro do painel: uma linha por unidade + TOTAL, no topo da aba, antes das colunas da mesa (ver construirResumoGeral em js/equipes.js). ENXUTO é requisito, não gosto: a mesa é a tela mais usada do painel e este bloco entra ACIMA dela — 12px de fonte e células de 4px/8px cabem as 12 colunas em ~700px, e as ~5 linhas somam ~150px, o que mantém a mesa na primeira dobra em desktop. `.resumo-rolagem` é quem rola na horizontal, NUNCA a página: 12 colunas não cabem em 390px, e uma tabela larga solta no fluxo infla `html.scrollWidth` além do viewport — o mesmo defeito que a `.equipes-barra` sem flex-wrap causou em 2026-08-12 (ver o comentário longo em §Celular), que faz o Chromium mobile desenhar a página num viewport de layout maior que o real e desalinhar TODO clique da tela. `border-collapse: separate` (não `collapse`) porque a primeira coluna é sticky: com bordas colapsadas, as bordas das células fixas ficam para trás na rolagem em vários navegadores. As linhas horizontais vêm de `border-bottom` por célula, que acompanha o sticky sem truque. */ .equipes-resumo { margin: 0 0 14px; } .resumo-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--branco); border-radius: 16px; box-shadow: 0 2px 0 var(--areia-escura); } .resumo-rolagem:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; } /* width:100% enche a largura no desktop; no celular o conteúdo (nowrap) manda e a tabela estoura o container, que é exatamente o que faz `.resumo-rolagem` rolar. */ .tabela-resumo { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; } .tabela-resumo caption { text-align: left; padding: 9px 14px 5px; font-family: 'Alfa Slab One', serif; font-weight: 400; font-size: 14px; color: var(--azul); } .tabela-resumo th, .tabela-resumo td { padding: 3px 9px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--areia-escura); } .tabela-resumo thead th { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--terra); background: var(--areia); } /* "Unidade" alinha com os NOMES que encabeçam as linhas (à esquerda) — os números é que vão à direita. Um cabeçalho à direita sobre uma coluna de texto à esquerda lê como coluna torta. */ .tabela-resumo thead th:first-child { text-align: left; } .tabela-resumo tbody td { font-variant-numeric: tabular-nums; color: var(--azul-noite); font-weight: 600; } /* Nome da unidade: à esquerda, com a faixa na cor da própria unidade (as mesmas variáveis que a coluna da mesa consome — ver §Cor por unidade). O fallback azul cobre a linha TOTAL, que não pertence a unidade nenhuma (e é sobrescrito logo abaixo). */ .tabela-resumo th[scope="row"] { text-align: left; font-weight: 800; color: var(--azul-noite); background: var(--branco); border-left: 4px solid var(--u-forte, var(--azul)); } /* Coluna da unidade fixa durante a rolagem horizontal: sem isto, no celular a pessoa rola até "Coordenador" e perde de vista de QUAL equipe é a linha que está lendo. */ .tabela-resumo thead th:first-child, .tabela-resumo th[scope="row"] { position: sticky; left: 0; z-index: 1; } .tabela-resumo thead th:first-child { background: var(--areia); } .tabela-resumo tbody tr:last-child th, .tabela-resumo tbody tr:last-child td { border-bottom: none; } .tabela-resumo tfoot th, .tabela-resumo tfoot td { background: var(--areia); color: var(--azul-noite); font-weight: 800; border-bottom: none; border-top: 2px solid var(--areia-escura); } /* Precisa repetir `[scope="row"]` (e não só `tfoot th`): o seletor da célula de nome lá em cima é `.tabela-resumo th[scope="row"]`, com um atributo a mais na conta de especificidade — sem isto, o fundo BRANCO dele vence o creme do rodapé e a célula "TOTAL" fica de outra cor que o resto da própria linha. Achado OLHANDO a tabela renderizada; nenhuma asserção de teste pegaria. */ .tabela-resumo tfoot th[scope="row"] { background: var(--areia); border-left-color: var(--azul-noite); } /* Aviso da LACUNA (no lugar da linha CHECK da planilha): discreto — informa, não alarma —, com a mesma faixa amarela à esquerda de `.equipes-erro.aviso`. Botão porque é clicável: liga o filtro de passagem "a definir" que a mesa já tem, e acende igual aos chips do cabeçalho (mesmo gradiente sol→laranja de `.chip-composicao.ligado`, a linguagem de "selecionado" do painel). */ .resumo-lacuna { display: inline-block; margin-top: 9px; text-align: left; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--terra); background: var(--areia); border: 1px solid var(--areia-escura); border-left: 4px solid var(--sol); border-radius: 0 8px 8px 0; padding: 7px 12px; } .resumo-lacuna:hover { background: var(--areia-escura); } .resumo-lacuna.ligado { background: linear-gradient(135deg, var(--sol), var(--laranja)); border-color: var(--laranja-escuro); border-left-color: var(--laranja-escuro); color: var(--azul-noite); } .resumo-lacuna:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; } @media (max-width: 860px), (hover: none) and (pointer: coarse) { /* Um ponto menor no celular (a tabela rola de qualquer jeito) e alvo confortável no aviso, mesmo espírito do ajuste de .chip-composicao logo acima. */ .tabela-resumo { font-size: 11.5px; } .tabela-resumo caption { font-size: 14px; padding: 10px 12px 6px; } .resumo-lacuna { padding: 9px 13px; min-height: 40px; } } @media (max-width: 640px) { .ficha-overlay { padding: 0; } .ficha-cartao { max-width: none; min-height: 100dvh; border-radius: 0; } .ficha-cabecalho { flex-direction: column; text-align: center; padding-right: 0; } } /* Aprovação herdada da reconvocação (2026-09-24). Reusa .decisao-info — é o mesmo rodapé do cartão, no mesmo lugar — e só muda a cor: o texto não nomeia ninguém, então não deve parecer o carimbo de uma pessoa. As regras de .reconvocacao-* saíram junto com a caixa da Visão geral. */ .decisao-automatica { color: #5A6472; font-style: italic; } /* Datas da viagem e edição das datas do período (2026-09-14). Os dois editores da aba Formulários usam a mesma caixa; o que os distingue é o RÓTULO de cada campo — "inscrições" e "viagem" nunca aparecem sem dizer qual é qual, que era a confusão original. */ .viagem-datas-bloco { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--branco); border: 2px solid var(--areia-escura); border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; } .viagem-datas-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; } .viagem-datas-texto strong { font-size: 13px; color: var(--terra); text-transform: uppercase; letter-spacing: .04em; } .viagem-datas-texto span { font-size: 15px; font-weight: 700; color: var(--azul-noite); } .viagem-datas-bloco > div[hidden] { display: none; } .viagem-datas-bloco .datas-editor { flex: 1 1 100%; } .datas-editor { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; } .datas-editor-acoes { display: flex; gap: 8px; } .datas-editor .erro-estado { flex: 1 1 100%; margin: 0; } .periodo-editor { border-top: 1px dashed var(--areia-escura); margin-top: 10px; } .periodo-acoes { display: flex; gap: 8px; flex-wrap: wrap; } .periodo-acoes button { width: auto; } /* Renda estimada na ficha (2026-09-30). Sem cor de alerta: o bloco INFORMA. A estimativa é de base externa, erra, e pintá-la de vermelho faria a triagem ler como veredito — que é o oposto do que a spec decidiu. O selo na fila já chama atenção; aqui o trabalho é ser lido com calma. */ .ficha-renda .ficha-valor { font-variant-numeric: tabular-nums; } .ficha-renda .ficha-nota { font-style: italic; } /* Escala de renda (2026-09-30, cinco degraus). Verde para os dois degraus que CONFIRMAM a declaração, e o vermelho só no topo. Os dois primeiros existem de propósito e não são enfeite: sem eles a tela só mostraria suspeita, e quem declarou precisar e de fato precisa ficaria indistinguível de quem nunca foi consultado. Confirmar é informação tanto quanto alertar. Mesmo no degrau mais alto o texto diz "indica que consegue", não "mentiu": a estimativa é de base externa, e a própria Zoox devolveu faixas diferentes em campos diferentes para o mesmo CPF. */ .ficha-renda-alerta { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: .92rem; font-weight: 600; color: var(--azul-noite); line-height: 1.4; border-left: 4px solid; } .ficha-renda-alerta.nivel-ok { background: #EAF6EC; border-left-color: #2E7D46; } .ficha-renda-alerta.nivel-media { background: #FFFBE6; border-left-color: #C9A227; } .ficha-renda-alerta.nivel-atencao { background: #FFF4E0; border-left-color: #E8A33D; } .ficha-renda-alerta.nivel-forte { background: #FDECEC; border-left-color: #B3261E; } /* Verde do degrau mais baixo no cartão. Os outros reusam .selo.info (âmbar vazado), .selo.alerta (âmbar sólido) e .selo.bloqueio (telha), que já existiam — não vale inventar paleta para isto. */ .selo.ok { border-color: #2E7D46; color: #1B5E33; background: #EAF6EC; } /* Renda no cartão (2026-09-30). Mesma família visual das Horas do Bem — é dado de fora que informa a decisão, não um veredito — com tabular-nums para as faixas alinharem na coluna. */ .erp-renda { font-variant-numeric: tabular-nums; }