/* ===================================================================== REPOSITÓRIO EXCLUSIVEBEE — folha única de estilo Gerado em 2026-08-29, a partir do mockup v5 aprovado. TODA cor mora aqui, em variável. Nenhuma cor solta em arquivo de tela. O Portal Colmeia terminou com 372 cores cravadas em 31 arquivos, e trocar a paleta virou um trabalho de semanas. Aqui é um arquivo. Contraste conferido em 2026-08-29 — 14 pares, 14 aprovados: ink/card 15.97 mut/card 6.07 melTxt/card 6.92 ok/card 7.87 erro/card 6.54 branco/ink 15.97 ink/mel 8.62 foco/card 5.13 linha-campo/card 3.50 (componente de interface, mínimo 3:1) --linha (1.33) é DECORATIVA. Nunca use para borda de campo. ===================================================================== */ :root{ --ink:#14213D; --mut:#56637A; --bg:#F5F7FA; --card:#FFFFFF; --linha:#D9E0E8; --linha-campo:#7E8A9C; --mel:#F5B301; --mel-txt:#7A5200; --mel-fraco:#FFF6E0; --ok:#1B5E20; --ok-fraco:#E8F3E9; --erro:#B3261E; --erro-fraco:#FCEBEA; --foco:#0B5FFF; --r:10px; --sombra:0 1px 2px rgba(20,33,61,.08), 0 4px 12px rgba(20,33,61,.06); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink); font:15px/1.55 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif} h1,h2,h3{margin:0 0 4px;line-height:1.25} h1{font-size:22px} h2{font-size:17px} h3{font-size:14px} p{margin:0 0 10px} a{color:var(--mel-txt)} code{background:#F0F3F7;padding:2px 6px;border-radius:5px;font-size:.92em} /* Foco visível em tudo. Nunca use outline:none neste projeto. */ :focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* Pular para o conteúdo: primeiro item do foco, em toda tela. */ .pular{position:absolute;left:-9999px;top:0;background:var(--mel);color:var(--ink); padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;z-index:100} .pular:focus{left:0} /* --------------------- casca: EXATAMENTE 2 filhos --------------------- */ .app{display:grid;grid-template-columns:236px 1fr;min-height:100vh} .side{background:var(--ink);color:#E6EBF5;padding:16px 12px;min-width:0} .conteudo{padding:22px 26px 60px;min-width:0} /* A MARCA DO MENU LATERAL. [ERRO 2026-09-03] Esta classe se chamava `.marca`, e o modificador do botão primário se chama `.btn.marca`. Nome igual para duas coisas diferentes: os 40 botões amarelos do sistema herdavam daqui um `margin-bottom:14px` e um `border-bottom` do menu escuro. Resultado visível: em toda tela, o botão primário do cabeçalho ficava 14px mais alto que o botão ao lado, e o Anderson viu isso como "os botões estão desalinhados". Estavam mesmo, e a causa não era o alinhamento do cabeçalho: era colisão de nome de classe. `.marca b` e `.marca span` também vazavam para dentro de qualquer botão primário com ou dentro, pintando o texto de branco ou cinza claro sobre amarelo — contraste que nunca foi conferido. O nome novo é único no projeto. O verificador reprova quem reintroduzir um seletor de classe que também é modificador de botão. */ .marca-side{display:flex;gap:9px;align-items:center;padding:0 6px 16px; border-bottom:1px solid #2A3A5C;margin-bottom:14px} .marca-side .hex{width:26px;height:26px;background:var(--mel);border-radius:7px;flex:0 0 auto} .marca-side b{font-size:14px;color:#fff;display:block} .marca-side span{font-size:11.5px;color:#A9B6D0} /* seletor de empresa (pacote 006): so aparece para quem tem mais de uma. Fica ACIMA do menu, colado na marca, porque ele muda o significado de tudo que vem abaixo. */ /* [ERRO 2026-08-31] Aqui tinha 'margin:-6px' para encostar o seletor na marca. O proprio verificador reprovou, com a regra que ele carrega desde o E-232: margem negativa vira sobreposicao quando o vizinho muda de altura — e o vizinho aqui e o nome da empresa, que muda de tamanho conforme a empresa. Nao abri excecao. */ .troca-empresa{display:flex;gap:6px;align-items:center;margin:0 6px 14px} .troca-empresa select{flex:1 1 auto;min-width:0;font-size:12.5px;padding:7px 8px; border-radius:8px;border:1px solid #2A3A5C;background:#16223C;color:#E6EBF5; min-height:38px} .troca-empresa select:focus-visible{outline:2px solid var(--mel);outline-offset:1px} .troca-empresa .btn{flex:0 0 auto;min-height:38px;padding:7px 10px;font-size:12.5px} .side nav ul{list-style:none;margin:0;padding:0} .side nav a{display:flex;gap:9px;align-items:center;padding:9px 10px; border-radius:8px;color:#D5DEEE;text-decoration:none;font-size:14px;margin-bottom:2px;min-height:44px} .side nav a:hover{background:#22314F;color:#fff} .side nav a[aria-current="page"]{background:var(--mel);color:var(--ink);font-weight:600} /* PACOTE 012 — setor fechado saiu do menu. No lugar da lista cinza (.bloq, apagada aqui junto), a única coisa que aparece quando não há setor liberado é esta frase, que manda a pessoa para onde tem saída. */ .side-vazio{color:#93A1BC;font-size:12.5px;line-height:1.5;padding:2px 10px 6px;margin:0} .side-vazio b{color:#D5DEEE} .side .grupo{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#93A1BC; padding:14px 10px 6px;margin:0} .rodape-side{margin-top:20px;padding:10px;border-top:1px solid #2A3A5C;font-size:11.5px;color:#93A1BC} .rodape-side a{color:#C9D2E4} /* Botão da gaveta do celular. Fica escondido no computador, mas nunca com display:none em cima do