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

        /* FONTE ÚNICA EM TODO O SISTEMA (2026-07-31, pedido do usuário
           "padronize as fontes"). Botão, campo, seletor e área de texto NÃO
           herdam a fonte do body por padrão — o navegador força a fonte de
           formulário dele. Sem esta linha, TODO .btn do sistema saía em Arial
           enquanto o resto da tela estava em Inter; foi assim desde sempre e
           passava despercebido porque as duas são sem serifa. */
        button, input, select, textarea, optgroup { font-family: inherit; }

        /* ===================================================================
           CONTROLES DO NAVEGADOR (item 04 do diagnóstico — 2026-07-31)
           select e input[type=date] vinham com `appearance: auto`, isto é, o
           desenho nativo do navegador: seta cinza do sistema, cantos quadrados,
           altura própria. Desenho diferente em cada navegador e destoando de
           tudo à volta. Aqui eles passam a usar a MESMA borda, raio, altura e
           anel de foco dos nossos campos.
           A seta do select vira SVG embutido (data URI) porque `appearance:
           none` remove a nativa e background-image não aceita currentColor.
           =================================================================== */
        select {
            -webkit-appearance: none; -moz-appearance: none; appearance: none;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7488' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 10px center;
            padding-right: 30px !important; cursor: pointer; }
        select::-ms-expand { display: none; }

        /* Campo de data: some o ícone nativo e o calendário abre clicando no
           campo inteiro (mais alvo, e sem o desenho do sistema no meio). */
        input[type="date"] { -webkit-appearance: none; appearance: none; position: relative; cursor: pointer; }
        input[type="date"]::-webkit-calendar-picker-indicator {
            position: absolute; inset: 0; width: 100%; height: 100%;
            padding: 0; margin: 0; opacity: 0; cursor: pointer; }
        input[type="date"]::-webkit-inner-spin-button,
        input[type="date"]::-webkit-clear-button { display: none; -webkit-appearance: none; }

        /* O seletor de abas do mobile era o único controle que não recebia
           NENHUM estilo — borda cinza do sistema e canto reto. */
        .tabs-select-mobile { border: 1px solid var(--borda); border-radius: var(--raio-2);
            padding: 8px 30px 8px 11px; font-size: 13px; color: var(--tinta-1);
            background-color: var(--sup-1); }
        .obra-col-resize { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 2; }
        .obra-col-resize:hover { background: var(--primaria, #2563eb); opacity: .35; }
        .obra-divider-resize { width: 6px; flex-shrink: 0; cursor: col-resize; background: var(--borda, #e6e8ee); }
        .obra-divider-resize:hover { background: var(--primaria, #2563eb); opacity: .5; }
        /* Ribbon estilo Project/Excel: grupos de comandos com rótulo embaixo,
           separados por divisória — protótipo do padrão que vai pros outros
           módulos (pedido do usuário 2026-07-31). */
        /* Sem setinhas de incremento nos campos numéricos (pedido do usuário
           2026-07-31: "o usuário escreverá à mão") — as setas roubam espaço
           na célula e induzem a clicar em vez de digitar. */
        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        input[type=number] { -moz-appearance: textfield; appearance: textfield; }
        .obra-compacto .tab { padding: 7px 12px; font-size: 13px; }
        .obra-linha-sel { background: var(--marca-tinta) !important; box-shadow: inset 2px 0 0 var(--marca); }

        /* ===================================================================
           CAMADA DE COMPONENTES (2026-07-31)
           Substitui a faixa de comandos "estilo Excel" que tinha rótulo de
           grupo em 8,5px embaixo de botões sem fundo nem borda. Os rótulos
           existiam pra explicar botões que não se explicavam sozinhos — com
           ícone + fundo + estado, não são mais necessários.
           Prefixo cm- (C. Machado) pra não colidir com as ~1900 linhas de CSS
           que já existem neste arquivo.
           =================================================================== */

        /* ---- Barra de comandos ---- */
        .cm-barra                        { display: flex; align-items: center; gap: var(--esp-1); flex-wrap: wrap;
            padding: var(--esp-2) var(--esp-3); background: var(--sup-1);
            border-bottom: 1px solid var(--borda); flex-shrink: 0; }
        .cm-barra-esp                    { flex: 1 1 auto; min-width: var(--esp-2); }
        .cm-sep                          { width: 1px; height: 20px; background: var(--borda); margin: 0 var(--esp-1); flex-shrink: 0; }

        /* ---- Faixa de comandos categorizada (padrão MS Project) ----
           Os grupos rotulados voltaram em 2026-07-31 a pedido do usuário, com
           a referência do Project na mão. Eu os tinha removido por achar que
           só existiam pra explicar botões ilegíveis — errado: numa barra com
           15 comandos, a CATEGORIA é o que deixa achar o comando sem ler um
           por um. O que estava ruim era o acabamento (rótulo de 8,5px, botão
           sem fundo), não a organização.
           Diferença pro Project: o rótulo fica DISCRETO e o grupo é separado
           por espaço + divisória fina, em vez de moldura. */
        .cm-ribbon                       { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap;
            background: var(--sup-1); border-bottom: 1px solid var(--borda);
            padding: 0 var(--esp-2); overflow-x: auto; flex-shrink: 0; }
        .cm-ribbon::-webkit-scrollbar { height: 6px; }
        .cm-ribbon::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 3px; }
        .cm-ribbon-grupo                 { display: flex; flex-direction: column; align-items: center;
            gap: 3px; padding: var(--esp-2) var(--esp-2) 5px; flex-shrink: 0;
            border-right: 1px solid var(--borda); }
        .cm-ribbon-grupo:last-child { border-right: 0; }
        .cm-ribbon-itens                 { display: flex; align-items: center; gap: 3px; flex: 1; }
        .cm-ribbon-itens > * { flex-shrink: 0; }
        .cm-ribbon-rotulo                { font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
            text-transform: uppercase; color: var(--tinta-4); white-space: nowrap;
            line-height: 1; user-select: none; }
        /* ---- Faixa compacta (2026-08-05) ----
           Pedido do usuário: "cabeçalho da EAP pode ser com textos menores
           e/ou apenas ícones, para não precisar de barra de rolagem".
           A barra tinha 8 grupos e ~1.700px; num monitor de 1.440 sobrava
           scroll horizontal, e comando que exige rolar pra ser visto é
           comando que ninguém usa.
           Duas medidas, nesta ordem: encolher (fonte/padding/ícone) e, só
           depois, esconder o TEXTO dos comandos cujo ícone já basta —
           marcados com .cm-rib-txt. Os que criam ou mudam dado de verdade
           (Serviço, Replanejar, Readequar) mantêm o texto: ícone sozinho
           não pergunta nada, e essas ações merecem hesitação. */
        .cm-ribbon--compacto .cm-ribbon-grupo                 { padding: 5px 7px 3px; gap: 2px; }
        .cm-ribbon--compacto .cm-ribbon-itens                 { gap: 2px; }
        .cm-ribbon--compacto .cm-ribbon-rotulo                { font-size: 10px; }
        .cm-ribbon--compacto .cm-btn                          { font-size: 11.5px; padding: 5px 8px; gap: 5px; }
        .cm-ribbon--compacto .cm-btn--icone                   { padding: 5px; }
        .cm-ribbon--compacto .cm-btn .ico { width: 14px; height: 14px; }
        .cm-ribbon--compacto .cm-seg button { font-size: 11px; padding: 4px 8px; gap: 4px; }
        .cm-ribbon--compacto .cm-seg button .ico { width: 12px; height: 12px; }
        .cm-ribbon--compacto .cm-campo                        { font-size: 11.5px; padding: 4px 7px; }
        .cm-ribbon--compacto .cm-rib-txt                      { display: none; }

        /* ---- Botão ---- */
        .cm-btn                          { display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
            /* 600 e não 550: a escala da casa é 400/600/700, e o próprio token
               --peso-enfase se documenta como "rótulo, BOTÃO, cabeçalho de
               coluna". O 550 fazia todo botão do sistema cair meio degrau
               fora da escala, e era a origem de 31 dos pesos estranhos numa
               tela só. */
            font-size: 12.5px; font-weight: var(--peso-enfase); line-height: 1; white-space: nowrap;
            padding: 7px 11px; border-radius: var(--raio-2); border: 1px solid transparent;
            background: transparent; color: var(--tinta-2); cursor: pointer;
            transition: background .12s ease, color .12s ease, border-color .12s ease; }
        .cm-btn:hover:not(:disabled) { background: var(--sup-3); color: var(--tinta-1); }
        .cm-btn:active:not(:disabled) { background: var(--borda); }
        /* Desabilitado: além do tom mais claro, a borda some e o fundo fica
           liso — a diferença deixa de depender só de perceber um cinza. */
        .cm-btn:disabled { color: var(--tinta-4); cursor: default; opacity: .65; }
        .cm-btn--contorno:disabled { border-color: var(--borda); background: transparent; }
        .cm-btn .ico { width: 15px; height: 15px; vertical-align: middle; }
        .cm-btn--contorno                { border-color: var(--borda); background: var(--sup-1); }
        .cm-btn--contorno:hover:not(:disabled) { border-color: var(--borda-forte); background: var(--sup-2); }
        /* Fundo vem de --marca-fundo, nao de --marca: sao papeis diferentes.
           No escuro a marca-tinta clareia pra ser vista sobre carvao, e clarear
           o FUNDO derruba o contraste do texto branco em cima (medido: 3,19:1).
           A marca-fundo escurece no escuro e o branco volta pra 5,64:1. */
        .cm-btn--primario                { background: var(--marca-fundo); color:var(--sobre-marca); font-weight: 600; }
        .cm-btn--primario:hover:not(:disabled) { background: var(--marca); color:var(--sobre-marca); }
        .cm-btn--ativo                   { background: var(--sup-3); color: var(--tinta-1); border-color: var(--borda-forte); }
        .cm-btn--icone                   { padding: 7px; }
        .cm-btn--perigo:hover:not(:disabled) { background: var(--st-critico-tinta); color: var(--st-critico); }

        /* ---- Seletor segmentado: substitui pares de botões que eram, na
               verdade, uma escolha entre opções (Manual/Automática, escala do
               tempo). Mostra a opção vigente sem precisar de cor de estado. ---- */
        .cm-seg                          { display: inline-flex; background: var(--sup-3); border-radius: var(--raio-2);
            padding: 2px; gap: 2px; flex-shrink: 0; }
        .cm-seg button { font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1;
            padding: 5px 10px; border-radius: 8px; border: 0; background: transparent;
            color: var(--tinta-2); cursor: pointer; white-space: nowrap;
            display: inline-flex; align-items: center; gap: 5px; transition: background .12s, color .12s; }
        .cm-seg button:hover { color: var(--tinta-1); }
        .cm-seg button[aria-pressed="true"] { background: var(--sup-1); color: var(--tinta-1);
            box-shadow: var(--sombra-1); }
        .cm-seg button .ico { width: 13px; height: 13px; }

        /* ---- Chip de status ---- */
        .cm-chip                         { display: inline-flex; align-items: center; gap: 5px; font-family: var(--fonte-dado);
            font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
            white-space: nowrap; letter-spacing: .01em; }
        .cm-chip--ok                     { background: var(--st-ok-tinta); color: var(--st-ok); }
        .cm-chip--info                   { background: var(--st-info-tinta); color: var(--st-info); }
        .cm-chip--atencao                { background: var(--st-atencao-tinta); color: var(--st-atencao); }
        .cm-chip--critico                { background: var(--st-critico-tinta); color: var(--st-critico); }
        .cm-chip--neutro                 { background: var(--st-neutro-tinta); color: var(--st-neutro); }

        /* ---- Campo ---- */
        .cm-campo                        { font-family: inherit; font-size: 12.5px; color: var(--tinta-1);
            background: var(--sup-1); border: 1px solid var(--borda); border-radius: var(--raio-1);
            padding: 6px 9px; transition: border-color .12s, box-shadow .12s; }
        .cm-campo:hover { border-color: var(--borda-forte); }
        .cm-campo:focus { outline: none; border-color: var(--marca); box-shadow: var(--anel-foco); }

        /* ---- Rótulo de seção ---- */
        .cm-rotulo                       { font-family: var(--fonte-dado); font-size: 10px; font-weight: 600;
            letter-spacing: .11em; text-transform: uppercase; color: var(--tinta-3); }

        /* ---- Número: toda coluna de valor vira régua ---- */
/* ===================================================================
   NUMERO E MONO NO SISTEMA INTEIRO (03/09/2026)

   O Diretor disse "todo o sistema tem fontes erradas assim", e estava certo.
   Existiam DUAS familias de KPI convivendo: .cm-kpi-val, em mono, e
   .kpi-value, em sans, com 62 usos contra 20. Os mesmos R$ apareciam em
   fontes diferentes conforme o modulo.

   A causa nao era distracao pontual: 57 regras deste arquivo pediam
   `font-family: var(--fonte-num); font-variant-numeric: tabular-nums` e ESQUECIAM a familia. Tabular-nums
   sozinho alinha os digitos DENTRO da fonte que estiver valendo, entao a
   regra parecia cuidada e nao era. Quem escreveu quis alinhar numero; faltou
   dizer em que fonte.

   Todas ganharam `font-family: var(--fonte-num)` de uma vez. Ficaram de fora
   so as que o proprio nome diz serem descricao (.c-item e afins).

   A rede que segura o erro inverso, palavra em area de numero, e o
   scripts/conferir_fonte_numero.js, que roda no hook a cada edicao de tela.
   =================================================================== */
        .cm-num                          { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
        /* O INVERSO de .cm-num, e existe porque a regra da casa é clara e fácil
           de quebrar sem perceber: "--fonte-num é SÓ PRA DÍGITO". Quando uma
           palavra precisa viver DENTRO de uma célula numérica (o dia da semana
           ao lado da data, uma unidade escrita por extenso), ela herda o mono e
           fica larga e estranha. .cm-txt devolve a fonte de texto pra ela.
           Seletor dobrado porque a célula que carrega .cm-num costuma ter mais
           classe que o filho. */
        .cm-txt.cm-txt                   { font-family: var(--fonte-dado); font-variant-numeric: normal; }

        /* ===================================================================
           CLASSES DA RÉGUA (02/09/2026)
           Existem para os 3.310 `style="..."` terem PARA ONDE ir. A Helena foi
           direta ao cortar meu plano original: trocar valor solto por token
           inline seriam 2.549 edições que continuam sendo alguém escolhendo à
           mão em cada linha, e que quebram de novo no próximo innerHTML. O
           alvo é trocar o ATRIBUTO INTEIRO por classe.

           Só três coisas seguem legitimamente inline, e são exceções nomeadas:
             1. largura de coluna calculada em tempo de render;
             2. posição e largura de barra do Gantt;
             3. transform de animação.
           Qualquer outro `style` num arquivo já faxinado é achado de revisão.
           =================================================================== */

        /* ---- tipografia: o que a coisa É, não que tamanho tem ---- */
        .cm-titulo                       { font-size: var(--txt-titulo); font-weight: var(--peso-forte); color: var(--tinta-1); letter-spacing: -.015em; line-height: 1.25; }
        .cm-destaque                     { font-size: var(--txt-destaque); font-weight: var(--peso-enfase); color: var(--tinta-1); line-height: 1.35; }
        .cm-corpo                        { font-size: var(--txt-corpo); font-weight: var(--peso-corpo); color: var(--tinta-1); line-height: 1.45; }
        .cm-sub                          { font-size: var(--txt-corpo); font-weight: var(--peso-corpo); color: var(--tinta-2); line-height: 1.45; }
        .cm-densa                        { font-size: var(--txt-densa); font-weight: var(--peso-corpo); color: var(--tinta-1); line-height: 1.3; }
        /* --tinta-4 dá ~2,6:1 sobre branco e REPROVA em contraste. Ele é
           legítimo só onde a norma isenta: placeholder e desabilitado. Por
           isso o "vazio" tem classe própria, para não virar desculpa. */
        .cm-vazio-txt                    { font-size: var(--txt-corpo); color: var(--tinta-3); font-style: italic; }

        /* ---- valor numérico ---- */
        .cm-val                          { font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
            font-size: var(--txt-densa); font-weight: var(--peso-enfase); text-align: right; white-space: nowrap; }
        /* Desvio nunca vai só na cor (WCAG 1.4.1, e o sol do canteiro):
           peso 700 junto, sempre. Teste: tire a cor no devtools e veja se
           ainda dá pra operar. */
.cm-val--desvio{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-weight: var(--peso-forte); }
.cm-val--critico{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color: var(--st-critico); font-weight: var(--peso-forte); }
.cm-val--atencao{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color: var(--st-atencao); font-weight: var(--peso-forte); }
.cm-val--ok{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color: var(--st-ok); font-weight: var(--peso-forte); }

        /* ---- tabela densa: o formato mais repetido do sistema ---- */
        .cm-tab                          { width: 100%; border-collapse: collapse; font-size: var(--txt-densa); }
        .cm-tab thead th, .cm-tab thead td {
            font-size: var(--txt-rotulo); font-weight: var(--peso-enfase);
            text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3);
            text-align: left; padding: var(--esp-1) var(--pad-compacto);
            border-bottom: 1px solid var(--borda); white-space: nowrap;
        }
        .cm-tab tbody td {
            padding: 0 var(--pad-compacto); height: var(--alt-compacto);
            border-bottom: 1px solid var(--cinza-claro); vertical-align: middle;
        }
        .cm-tab tbody tr:hover { background: var(--sup-2); }
        .cm-tab--zebra tbody tr:nth-child(even) { background: var(--sup-2); }
.cm-tab .num{ text-align: right; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
        /* Linha de agrupamento: é estrutura, não decoração. Fundo próprio e
           peso, sem cor de status, porque agrupar não é um estado. */
        .cm-linha-grupo td {
            background: var(--sup-2); font-weight: var(--peso-enfase);
            font-size: var(--txt-densa); color: var(--tinta-1);
        }

        /* ---- pilha e fileira: substituem margin solto, que colapsa e dobra ---- */
        .cm-pilha-1                      { display: flex; flex-direction: column; gap: var(--esp-1); }
        .cm-pilha-2                      { display: flex; flex-direction: column; gap: var(--esp-2); }
        .cm-pilha-3                      { display: flex; flex-direction: column; gap: var(--esp-3); }
        .cm-pilha-4                      { display: flex; flex-direction: column; gap: var(--esp-4); }
        .cm-lado-1                       { display: flex; align-items: center; gap: var(--esp-1); }
        .cm-lado-2                       { display: flex; align-items: center; gap: var(--esp-2); }
        .cm-lado-3                       { display: flex; align-items: center; gap: var(--esp-3); }
        .cm-lado--fim                    { justify-content: flex-end; }
        .cm-lado--entre                  { justify-content: space-between; }
        .cm-lado--quebra                 { flex-wrap: wrap; }

        /* ---- superfícies, pela regra de elevação ---- */
        .cm-bloco                        { background: var(--branco); border: 1px solid var(--borda);
            border-radius: var(--raio-2); box-shadow: var(--elev-1); padding: var(--esp-4); }
        .cm-bloco--liso                  { box-shadow: var(--elev-0); }
        .cm-flutua                       { background: var(--branco); border: none;
            border-radius: var(--raio-3); box-shadow: var(--elev-2); }

        /* ---- estado vazio: sempre diz o que falta e onde resolver ----
           Alinhado à esquerda de propósito. Centralizar com ícone grande no
           meio é o clichê de tela gerada por IA. */
        .cm-vazio                        { padding: var(--esp-6) var(--esp-4); max-width: 56ch; }
        .cm-vazio h4 { margin: 0 0 var(--esp-2); font-size: var(--txt-destaque);
            font-weight: var(--peso-enfase); color: var(--tinta-1); }
        .cm-vazio p { margin: 0 0 var(--esp-3); font-size: var(--txt-corpo);
            color: var(--tinta-2); line-height: 1.55; }

        /* ---- alturas de controle, para casar botão, campo e chip ---- */
        .cm-h-compacto                   { min-height: var(--alt-compacto); padding: 0 var(--pad-compacto); display: inline-flex; align-items: center; }
        .cm-h-padrao                     { min-height: var(--alt-padrao);   padding: 0 var(--pad-padrao);   display: inline-flex; align-items: center; }
        .cm-h-confortavel                { min-height: var(--alt-confortavel); padding: 0 var(--pad-confort); display: inline-flex; align-items: center; }
        /* No celular (canteiro, dedo, luva) todo controle sobe pro confortável:
           24px de alvo de toque é onde o apontamento erra e vira dado errado. */
        @media (max-width: 640px) {
            .cm-h-compacto, .cm-h-padrao                     { min-height: var(--alt-confortavel); }
        }

        /* ---- Cartão de indicador ---- */
        .cm-kpi                          { background: var(--sup-1); border: 1px solid var(--borda); border-radius: var(--raio-2);
            padding: 15px 16px; display: flex; flex-direction: column; gap: 6px;
            box-shadow: var(--sombra-1); }

        /* ---- Hierarquia de plano (item 01 do diagnóstico) ----
           Dentro do painel do Gantt estava TUDO branco: faixa de comandos,
           cabeçalho de coluna, linha e cartão no mesmo plano, e o olho não
           sabia onde pousar. Agora são três planos declarados: a faixa de
           comandos e a linha do tempo ficam num cinza acima do papel, a tabela
           fica no papel, e o painel inteiro ganha sombra pra descolar do fundo
           da aplicação. */
        #obraGanttOuter { box-shadow: var(--sombra-1); }
        #obraGanttOuter .cm-ribbon                       { background: var(--sup-2); }
        /* O KPI é o número que responde a pergunta da tela, e era o único
           grande que ficava em sans: tinha tabular-nums mas nunca a família.
           Ao lado de uma tabela em mono isso lê como duas tipografias. Peso
           700 porque a escala da casa é 400/600/700, e 500 não existe nela. */
        .cm-kpi-val { font-family: var(--fonte-num); font-size: 28px; font-weight: var(--peso-forte); letter-spacing: -.03em; line-height: 1.05;
            font-variant-numeric: tabular-nums; color: var(--tinta-1); }
        .cm-kpi-un                       { font-size: 15px; font-weight: 600; color: var(--tinta-3); }
        /* .cm-kpi-rot NAO EXISTIA (achado da Helena, 02/09/2026). A fixture da
           casca usava a classe nos quatro KPIs e o rotulo renderizava sem
           estilo, em 16px herdado: ou seja, a captura que eu mostrei ao
           Diretor era de uma tela que nao existe. Classe que a fixture usa e o
           CSS nao tem faz a conferencia visual MENTIR. */
        .cm-kpi-rot                      { font-size: var(--txt-rotulo); font-weight: var(--peso-enfase);
            text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
        .cm-kpi-sub                      { font-size: 11.5px; color: var(--tinta-2); line-height: 1.4; }
        /* Semáforo do cartão de KPI (auditoria 2026-08, ranking #8) — borda
           lateral sinaliza estado sem precisar mudar a cor do número. */
        .cm-kpi--critico                 { border-left: 3px solid var(--st-critico); }
.cm-kpi--critico .cm-kpi-val{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color: var(--st-critico); }
        .cm-kpi--ok                      { border-left: 3px solid var(--st-ok); }
        .cm-kpi--atencao                 { border-left: 3px solid var(--st-atencao); }  /* obra sem RDO recente (13/10/2026) */
        /* Faixa fixa da trava de versão (Helena, 13/10/2026): largura inteira,
           colada abaixo do topo, sem sombra, borda inferior de 1 px, texto à
           esquerda e botão à direita. Não some sozinha. */
        .cm-faixa-fixa                   { position: sticky; top: 0; margin: -20px -24px 16px; z-index: 40;
                                           display: flex; align-items: center; justify-content: space-between; gap: 12px;
                                           padding: 8px 32px; box-sizing: border-box; box-shadow: none;
                                           background: var(--st-atencao-tinta); color: var(--tinta-1);
                                           border-bottom: 1px solid var(--st-atencao); font-size: 13px; line-height: 1.4; }
        .cm-faixa-fixa > span            { flex: 1 1 auto; min-width: 0; text-align: left; }
        .cm-faixa-fixa > .cm-btn         { flex: 0 0 auto; }
        .cm-faixa-fixa--critico          { background: var(--st-critico-tinta); border-bottom-color: var(--st-critico); }
        .cm-faixa-fixa--info             { background: var(--st-info-tinta); border-bottom-color: var(--st-info); }
        @media (max-width: 768px) {
            .cm-faixa-fixa               { margin: -12px -12px 12px; padding: 8px 12px; }
        }

        /* Portfólio, aba Obras: a 390 px cada obra vira cartão e o código
           fica numa linha só (Helena 4, rodada 6) */
        .pf-obras-tab td:first-child     { white-space: nowrap; }
        /* Cabeçalho compacto da obra: a linha do contrato quebra em vez de
           cortar em "Contrato (" a 390 px (Helena 4, rodada 7) */
        #obraCabResumoContrato           { flex-wrap: wrap; white-space: normal !important; min-width: 0; row-gap: 2px; }
        /* a 390 o "·" não pode sobrar no fim da linha: some e o espaço vira gap */
        @media (max-width: 600px) { #obraCabResumoContrato .obra-cab-sep { display: none; } #obraCabResumoContrato { column-gap: 12px !important; } }
        @media (max-width: 600px) {
            .pf-obras-tab thead          { display: none; }
            .pf-obras-tab, .pf-obras-tab tbody, .pf-obras-tab tr, .pf-obras-tab td { display: block; width: 100%; box-sizing: border-box; }
            .pf-obras-tab tr             { padding: 12px 14px; border-bottom: 1px solid var(--borda); }
            .pf-obras-tab td             { padding: 2px 0; border: 0; }
            .pf-obras-tab td:first-child { font-weight: 600; font-size: 15px; }
            .pf-obras-tab td[data-rot]::before { content: attr(data-rot) ": "; color: var(--tinta-3); font-size: 12px; }
        }

        /* ---- Visão Executiva (módulo Portfólio, ranking #8) ---- */
        .pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
        .pf-grid-2 { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; margin-bottom: 22px; }
        @media (max-width: 900px) { .pf-grid-2 { grid-template-columns: 1fr; } }
        .pf-painel { background: var(--sup-1); border: 1px solid var(--borda); border-radius: var(--raio-2); box-shadow: var(--sombra-1); padding: 16px 18px; }
        .pf-painel-titulo { font-family: var(--fonte-dado); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 12px; }
        .pf-alerta { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--borda); cursor: pointer; font-size: 13px; color: var(--tinta-1); }
        .pf-alerta:last-child { border-bottom: none; }
        .pf-alerta:hover { background: var(--sup-2); }
        .pf-alerta-vazio { color: var(--tinta-3); font-size: 13px; padding: 8px 4px; }
        .pf-linha-sessao { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--borda); font-size: 13px; cursor: pointer; }
        .pf-linha-sessao:last-child { border-bottom: none; }
        .pf-linha-sessao:hover { background: var(--sup-2); }
.pf-linha-sessao .cm-num{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; min-width: 42px; font-weight: 700; color: var(--marca); }

        /* ---- Sala de Comando (orquestração dos agentes, dentro de Visão
               Executiva, ranking #64) ---- */
        .pf-alerta--decisao { align-items: flex-start; }
        .sc-agentes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
        .sc-agente-card { border: 1px solid var(--borda); border-radius: var(--raio-1); padding: 12px 14px; background: var(--sup-2); }
        .sc-agente-nome { font-family: var(--fonte-dado); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--marca); margin-bottom: 5px; }
        .sc-agente-acao { font-size: 13px; color: var(--tinta-1); line-height: 1.4; }
        .sc-agente-detalhe { font-size: 11.5px; color: var(--tinta-2); margin-top: 4px; line-height: 1.4; }
        .sc-agente-quando { font-size: 11px; color: var(--tinta-3); margin-top: 7px; }

        /* Resumo do dia por setor (2026-08-11) — antes era um blob único de
           texto; agora 1 card por setor, cada um com sua própria cadência
           (rotina diária vs. semanal) e pendência derivada da Caixa de
           Decisões, sem inventar "concluído" quando a rotina nunca rodou. */
        .sc-resumo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
        .sc-resumo-card { display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--borda); border-left: 3px solid var(--borda); border-radius: var(--raio-1); padding: 13px 15px; background: var(--sup-2); }
        .sc-resumo-card--ok { border-left-color: var(--st-ok); }
        .sc-resumo-card--atencao { border-left-color: var(--st-atencao); }
        .sc-resumo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
        .sc-resumo-setor { font-family: var(--fonte-dado); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-1); }
        .sc-resumo-cadencia { font-size: 10.5px; color: var(--tinta-3); white-space: nowrap; }
        .sc-resumo-origem { font-family: var(--fonte-dado); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-info); background: var(--st-info-tinta); border-radius: 999px; padding: 2px 7px; margin-right: 6px; }
        .sc-resumo-texto { font-size: 13px; line-height: 1.55; color: var(--tinta-1); white-space: pre-line; }
        .sc-resumo-texto--vazio { color: var(--tinta-3); font-style: italic; }
        .sc-resumo-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 2px; }
        .sc-resumo-quando { font-size: 10.5px; color: var(--tinta-3); }

        /* ---- Caixa de Decisões (ticket de 2 vias Diretor↔agentes) ---- */
        .sc-decisao-card { border: 1px solid var(--borda); border-radius: var(--raio-1); padding: 12px 14px; margin-bottom: 10px; background: var(--sup-1); }
        .sc-decisao-card:last-child { margin-bottom: 0; }
        .sc-decisao-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
        .sc-decisao-modulo { font-family: var(--fonte-dado); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
        .sc-decisao-status { font-size: 11px; color: var(--tinta-2); margin-left: auto; }
        .sc-decisao-status--respondida { color: var(--st-info); font-weight: 600; }
        .sc-decisao-titulo { font-size: 14px; font-weight: 700; color: var(--tinta-1); margin-bottom: 4px; }
        .sc-decisao-rotulo { font-weight: var(--peso-enfase); color: var(--tinta-2); }
        .sc-decisao-contexto { font-size: 12.5px; color: var(--tinta-2); line-height: 1.5; margin-bottom: 8px; white-space: pre-line; }
        .sc-decisao-resposta-campo { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-1); resize: vertical; background: var(--sup-1); color: var(--tinta-1); margin-bottom: 8px; }
        .sc-decisao-resposta-campo:focus { outline: none; border-color: var(--marca); box-shadow: var(--anel-foco); }
        .sc-decisao-acoes { display: flex; justify-content: flex-end; }
        .sc-decisao-resposta-lida { font-size: 12.5px; color: var(--tinta-1); background: var(--sup-2); border-radius: var(--raio-1); padding: 8px 10px; line-height: 1.5; }
        .sc-decisao-link { font-size: 12px; color: var(--marca); text-decoration: none; font-weight: 600; white-space: nowrap; }
        .sc-decisao-link:hover { text-decoration: underline; }
        .sc-decisao-urgente-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-2); margin-bottom: 8px; cursor: pointer; }
        .sc-decisao-aguardando { font-size: 12px; color: var(--tinta-3); font-style: italic; }
        /* Card minimizado (RESPONDIDA) — <details> nativo, some o excesso
           de tela até o Diretor querer conferir (pedido 2026-08-10). */
        .sc-decisao-card--minimizada { padding: 0; }
        .sc-decisao-card--minimizada[open] { padding-bottom: 12px; }
        .sc-decisao-resumo-fechado { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; }
        .sc-decisao-resumo-fechado::-webkit-details-marker { display: none; }
        .sc-decisao-resumo-fechado::before { content: '›'; font-weight: 700; color: var(--tinta-3); transition: transform .12s; margin-right: 2px; }
        .sc-decisao-card--minimizada[open] .sc-decisao-resumo-fechado::before { transform: rotate(90deg); }
        .sc-decisao-titulo-fechado { font-size: 13px; font-weight: 600; color: var(--tinta-1); }
        .sc-decisao-corpo-aberto { padding: 0 14px; }
        .sc-decisao-corpo-aberto .sc-decisao-rotulo { font-size: 12px; color: var(--tinta-2); margin-bottom: 6px; }

        /* ---- Mapa de Progresso (trilho de etapas por licitação) ---- */
        .sc-mapa-progresso { display: flex; flex-direction: column; }
        .sc-pipeline-linha { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--borda); cursor: pointer; flex-wrap: wrap; }
        .sc-pipeline-linha:last-child { border-bottom: none; }
        .sc-pipeline-linha:hover { background: var(--sup-2); }
        .sc-pipeline-rotulo { font-size: 13px; color: var(--tinta-1); min-width: 0; flex: 1 1 220px; }
        .sc-pipeline-trilho { display: flex; align-items: center; flex-shrink: 0; }
        .sc-pipeline-etapa { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sup-2); border: 1px solid var(--borda); }
        .sc-pipeline-etapa .ico { width: 13px; height: 13px; }
        .sc-pipeline-etapa--nao_iniciado { color: var(--tinta-3); opacity: .55; }
        .sc-pipeline-etapa--neutro { color: var(--tinta-3); }
        .sc-pipeline-etapa--com_pendencia { color: var(--st-atencao); background: var(--st-atencao-tinta); border-color: transparent; }
        .sc-pipeline-etapa--concluido { color: var(--st-ok); background: var(--st-ok-tinta); border-color: transparent; }
        .sc-pipeline-liga { width: 14px; height: 1px; background: var(--borda); flex-shrink: 0; }

        /* Rosca "Carteira por status" (aba Licitações da Visão Executiva) —
           altura fixa pro Chart.js ter referência mesmo dentro de flex. */
        .pf-chart-doughnut { position: relative; height: 240px; }

        /* ---- Histórico com Agentes (dentro do modal de licitação) ---- */
        .sc-hist-item { border: 1px solid var(--borda); border-radius: var(--raio-1); padding: 12px 14px; margin-bottom: 10px; background: var(--sup-1); }
        .sc-hist-item:last-child { margin-bottom: 0; }
        .sc-hist-data { font-size: 11px; color: var(--tinta-3); margin-left: auto; font-family: var(--fonte-dado); }
        .sc-hist-resolucao { font-size: 12.5px; color: var(--tinta-1); background: var(--st-ok-tinta); border-radius: var(--raio-1); padding: 8px 10px; line-height: 1.5; margin-top: 6px; }

        /* Badge de alertas no header (ranking #8) */
        .alertas-bell-wrap { position: relative; }
        .alertas-badge-contador { font-family: var(--fonte-num); position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--st-atencao); color: #1d2027; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
        .alertas-badge-contador.critico { background: var(--st-critico); color: var(--sobre-marca); }
        .alertas-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 420px; overflow-y: auto; background: var(--sup-1); border: 1px solid var(--borda); border-radius: var(--raio-2); box-shadow: var(--sombra-2, var(--sombra-1)); z-index: 200; padding: 8px; }
        .alertas-dropdown.active { display: block; }
        .alertas-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 6px; border-radius: var(--raio-1); cursor: pointer; }
        .alertas-item:hover { background: var(--sup-2); }
        .alertas-item .ico { width: 15px; height: 15px; margin-top: 1px; flex-shrink: 0; }
        .alertas-item.critico .ico { color: var(--st-critico); }
        .alertas-item.atencao .ico { color: var(--st-atencao); }
        .alertas-item.info .ico { color: var(--st-info); }
        .alertas-item-modulo { display: block; font-family: var(--fonte-dado); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
        .alertas-item-texto { display: block; font-size: 12.5px; color: var(--tinta-1); }
        .alertas-vazio { padding: 14px 8px; color: var(--tinta-3); font-size: 13px; text-align: center; }

        /* ---- Célula editável da EAP ----
           Campo dentro da tabela do Gantt não desenha borda até o mouse chegar
           perto. Era o que fazia a EAP parecer formulário do Access em vez de
           tabela de produto: ~110 caixinhas com borda visível competindo com o
           dado que elas guardam. A borda continua existindo (transparente) pra
           a largura não pular no foco — o pulo seria pior que a borda. */
.cm-celula { font-family: var(--fonte-num); border: 1px solid transparent; border-radius: var(--raio-1);
            background: transparent; padding: 2px 5px; color: var(--tinta-1);
            font-variant-numeric: tabular-nums;
            font-size: 10.5px; text-align: inherit; box-shadow: none;
            transition: background .12s ease, border-color .12s ease; }
        .cm-celula:hover { background: var(--sup-2); border-color: var(--borda); }
        .cm-celula:focus { background: var(--sup-1); border-color: var(--marca);
            box-shadow: var(--anel-foco); outline: none; }
        .obra-altura-resize { height: 8px; flex-shrink: 0; cursor: ns-resize; background: var(--fundo-suave, #f5f6f9); border-top: 1px solid var(--borda, #e6e8ee); display: flex; align-items: center; justify-content: center; }
        .obra-altura-resize span { width: 36px; height: 3px; border-radius: 2px; background: var(--borda-forte, #c3c8d1); }
        .obra-altura-resize:hover span { background: var(--primaria, #2563eb); }
        /* ===================================================================
           DESIGN SYSTEM 2026 — repaginação "startup/tech" pedida pelo usuário
           ("sensação de plataforma altamente tecnológica, moderna,
           sofisticada"). Princípios aplicados no arquivo inteiro:
           - Neutros frios (slate) no lugar dos cinzas quentes; superfícies
             brancas com BORDA sutil de 1px em vez de sombra pesada — sombra
             grande em card é a marca visual de dashboard ~2014.
           - A cor de marca (bordô) foi REFRESCADA (mais viva, legível) e
             rebaixada de "cor de fundo de tudo" pra COR DE AÇÃO/ACENTO —
             cabeçalho e tabelas agora são claros; produto moderno usa cor
             com intenção, não como papel de parede.
           - Raios maiores (10-16px), foco visível (anel), números tabulares
             em valores. Os NOMES antigos das variáveis (--bordao, --ouro...)
             continuam existindo apontando pros tons novos — dezenas de
             estilos inline no HTML/JS os referenciam.
           =================================================================== */
        :root {
            --bordao: #9d1f31;          /* marca refrescada (era #4a0f18, quase preto) */
            --bordao-claro: #bd2a3f;
            --ouro: #d9a83f;
            --ink: #10151d;             /* "quase preto" azulado — sidebar, títulos fortes */
            --cinza-claro: #f4f5f8;
            --cinza: #e5e7ed;
            --texto: #1d2330;
            --texto-claro: #5a6274;   /* alias antigo, alinhado a --tinta-3 */
            --branco: #fff;
            --fundo: #f6f7fa;
            --borda: #e6e8ee;
            --borda-forte: #c3c8d1;
            --primaria: #9d1f31;
            --primaria-suave: #fdf0f1;
            /* Anel de foco na cor de AÇÃO: foco é navegação, não identidade.
               E vinho a 14% sobre campo branco quase não aparecia. */
            --anel-foco: 0 0 0 3px rgba(31, 111, 178, 0.20);
            --sombra-1: 0 1px 2px rgba(16, 21, 29, 0.05);
            --sombra-2: 0 8px 24px rgba(16, 21, 29, 0.09);

            /* ===============================================================
               SISTEMA DE DESIGN (2026-07-31) — token, não tinta.
               Antes disto o módulo tinha 20 hexadecimais fixos no JS e 5
               vermelhos diferentes, sendo que o vinho da MARCA e o vermelho de
               "crítico" eram quase a mesma cor: crítico não gritava porque se
               confundia com o cabeçalho e com o botão.
               Regra que sai daqui e vale pra tudo:
                 - o vinho da marca significa SÓ identidade e ação principal.
                   Nunca status.
                 - status tem família própria, com matiz deliberadamente longe
                   do vinho — por isso crítico é laranja-queimado, não mais um
                   vermelho.
               =============================================================== */

            /* Superfícies: 3 planos distintos. O "tudo no mesmo cinza" era o
               que impedia o olho de saber onde pousar. */
            --sup-fundo: #ffffff;      /* branco puro: a separacao vem do contraste com o cromo escuro, nao de tom de cinza */
            --sup-1: #ffffff;          /* cartão, tabela, painel */
            --sup-2: #f4f5f8;          /* cabeçalho de tabela, agrupamento, linha ativa */
            --sup-3: #eceef3;          /* trilho, estado pressionado */

            /* Tinta */
            /* Escala medida contra --st-neutro-tinta (#eceef3), que é o PIOR
               caso de verdade. A calibragem anterior mirava --sup-2, chamando
               de pior caso a superfície mais clara, quando é o contrário:
               fundo mais claro AJUDA texto escuro. Por isso --tinta-4 passava
               no branco (4,97:1) e reprovava nos cinco fundos de status
               (4,28 a 4,46:1), justo nas linhas que gritam por atenção. */
            --tinta-1: #141922;        /* texto forte        17,6:1 */
            --tinta-2: #3f4859;        /* texto secundário    8,4:1 */
            --tinta-3: #5a6274;        /* rótulo, unidade     5,6:1 */
            --tinta-4: #626A7B;        /* terciário legível   4,68:1 no pior fundo */
            --tinta-desab: #9aa2b4;    /* desabilitado e placeholder: a WCAG
                                          isenta controle desligado, e só ele
                                          pode usar este tom */

            /* Marca — navegação e ação principal, nada mais */
            --marca: #9d1f31;
            --marca-forte: #7d1826;
            --marca-tinta: #f7ebed;

            /* Status — jamais vinho */
            --st-info: #2967d0;        --st-info-tinta: #e8f0fd;   /* planejado / normal */
            --st-ok: #127a56;          --st-ok-tinta: #e6f4ee;     /* concluído / no prazo */
            --st-atencao: #b25107;     --st-atencao-tinta: #fdf1e3;/* risco / folga zero */
            --st-critico: #c03f0a;     --st-critico-tinta: #fdece3;/* crítico / atrasado */
            --st-neutro: #626b7d;      --st-neutro-tinta: #eceef3; /* não iniciado */

            /* FONTE ÚNICA no sistema inteiro (decisão do usuário 2026-07-31:
               "não entendi pq mudamos as fontes, padronize-as"). Eu tinha
               posto uma monoespaçada nas colunas de número pra elas alinharem;
               não é preciso — o Inter tem algarismo de LARGURA FIXA via
               `font-family: var(--fonte-num); font-variant-numeric: tabular-nums`, então a coluna de valor
               alinha dígito com dígito com o mesmo tipo do resto da tela.
               Quem faz a régua é o tabular-nums, não a família da fonte. */
            /* --fonte-dado e a fonte da TABELA (texto de celula, chip, rotulo).
               Ela continua sendo a do corpo: e assim que o sistema inteiro a
               usa, e trocar o VALOR dela por mono virou chip e rotulo em
               monoespacada, deixando a tela com fonte diferente em todo canto.
               Erro meu de escopo, corrigido no mesmo dia. */
            --fonte-dado: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* --fonte-num: A MESMA FAMILIA DO TEXTO, com tabular-nums (03/09/2026).
               Ordem do Diretor: "fonte leve, como do Asana".
               
               Ate hoje isto era uma monoespacada, e a ideia era dar cara de
               ferramenta ao numero. Na pratica deu dois problemas de uma vez.
               O primeiro e visual: mono e larga e pesada, e ao lado do Inter do
               resto da tela parece outra tipografia, nao outro papel. O segundo
               e que ela SO funciona se ninguem errar o escopo, e errar o escopo
               e facil: bastou uma classe cair num container com palavra pra
               tela ficar remendada, e isso aconteceu 58 vezes.
               
               O que o Asana faz, e o que se faz em painel serio, e alinhar o
               digito SEM trocar de familia. Quem alinha coluna de numero e o
               font-variant-numeric: tabular-nums, que trava a largura de todo
               algarismo. A familia continua a mesma do texto.
               
               Com isto, palavra que caia numa area de numero deixa de ser
               defeito visivel: ela ja esta na fonte certa. E o sistema inteiro
               passa a ter UMA tipografia, que era o pedido desde o inicio. */
            --fonte-num: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            /* Escalas — nada de valor solto no meio do código */
            --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px;
            --esp-4: 16px; --esp-6: 24px; --esp-8: 32px;
            --raio-1: 6px; --raio-2: 10px; --raio-3: 14px;
            --linha-alt: 34px;         /* altura de linha da EAP (era 26px) */

            /* ===============================================================
               RÉGUA VISUAL (02/09/2026) — fechada pela Helena Sarmento depois
               de o Diretor comparar o sistema com a Vobi e dizer: "é esse
               acabamento, esse refino que eu preciso, como se um especialista
               tivesse pensado em cada detalhe".

               O diagnóstico que motivou: os tokens acima existiam desde
               31/07 e eram usados ZERO vezes nos js. No lugar deles havia
               3.310 estilos escritos à mão, com 43 tamanhos de fonte e 242
               espaçamentos distintos. Nenhum errado sozinho; é a soma que o
               olho lê como amadorismo sem conseguir apontar o motivo.

               SÃO 12 TOKENS, e a economia é deliberada: cada degrau a mais é
               uma decisão a mais pra alguém errar depois. Regra da Helena, e
               ela fica escrita aqui: não peça o décimo terceiro sem mostrar a
               tela que quebrou sem ele.

               NOME SEMÂNTICO, NÃO TAMANHO. Quem aplica escolhe "o que isto é",
               não "que tamanho eu acho que fica bom". Foi escolher por tamanho
               que produziu 10, 10.5, 11, 11.5, 12, 12.5, 13...
               =============================================================== */

            /* Tipografia. 11px é o PISO da casa: a bancada de Planejamento
               rodava o corpo da tabela em 10,5px e o cabeçalho em 9px, e isso
               não é refino, é dado que se lê errado no notebook às 19h. */
            --txt-rotulo:   10px;    /* SÓ caixa-alta com letter-spacing. Nunca frase */
            --txt-densa:    11px;    /* piso. Célula de planilha, Gantt, chip, valor */
            --txt-corpo:  12.5px;    /* padrão de leitura. Já é o valor de .cm-btn */
            --txt-destaque: 14px;    /* nome do item, título de bloco */
            --txt-titulo:   18px;    /* título de tela e de modal. Um por tela */
            --txt-valor:    26px;    /* o número que responde a pergunta. Só KPI */

            /* Peso: 3, não 5. 500, 550 e 800 saem de circulação. */
            --peso-corpo:   400;
            --peso-medio:   500;     /* botão e controle: 600 em 12px fecha a letra */
            --peso-enfase:  600;     /* rótulo, botão, cabeçalho de coluna */
            --peso-forte:   700;     /* número que decide, título, status */

            /* Altura de controle. A altura vem do token e o padding é só
               horizontal (min-height + align-items:center). Essa regra sozinha
               mata a maior parte dos 242 espaçamentos distintos. */
            --alt-compacto:    24px; /* linha densa, chip, botão de ícone em tabela */
            --alt-padrao:      30px; /* botão de barra, campo, seletor */
            --alt-confortavel: 38px; /* ação principal de modal, e TODO controle no celular */
            /* ONDA 0 DOS COMPONENTES (12/10/2026). Alvo de toque, janela,
               escala de camadas e botão perigoso. A escala de z-index é
               única: janela < diálogo < toast, e o toast fica ACIMA de tudo
               (antes ele ficava atrás das janelas .orcsug, que eram 9000). */
            --alt-toque: 44px;       /* alvo de toque (WCAG 2.5.5), celular e canteiro */
            --escrim: rgba(16, 22, 30, 0.5);   /* fundo atrás de QUALQUER janela */
            --z-janela: 1000; --z-atividade: 1050; --z-dialogo: 1100; --z-toast: 1200;
            --larg-janela-p: 440px; --larg-janela-m: 640px; --larg-janela-g: 960px;
            --dur-rapida: 140ms;
            /* Fundo de botão perigoso (texto branco por cima). Medido:
               #b83a08 dá 5,76:1 com branco; --st-critico puro dava 5,31:1 no
               claro e 2,73:1 no escuro, por isso não serve de fundo. */
            --st-critico-fundo: #b83a08;
            --marca-fundo-hover: #7d1826;   /* hover do primário: escurece nos dois temas */
            /* Botão de IA (Onda 3 de Orçamentos, 13/10/2026): degradê curto entre
               dois tons da cor de AÇÃO (decisão do Diretor de 12/10: identidade de IA,
               sem vinho). Branco: 5,28:1 no tom claro e 7,77:1 no escuro; antes era
               do vinho da marca para o azul de ação. */
            --ia-de: var(--acao-ia); --ia-ate: var(--acao-ia-escuro);
            --cm-loader: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4'/%3E%3Cpath d='m16.2 7.8 2.9-2.9'/%3E%3Cpath d='M18 12h4'/%3E%3Cpath d='m16.2 16.2 2.9 2.9'/%3E%3Cpath d='M12 18v4'/%3E%3Cpath d='m4.9 19.1 2.9-2.9'/%3E%3Cpath d='M2 12h4'/%3E%3Cpath d='m4.9 4.9 2.9 2.9'/%3E%3C/svg%3E");
            --pad-compacto: var(--esp-2);
            --pad-padrao:   var(--esp-3);
            --pad-confort:  var(--esp-4);

            /* Elevação: 3 estados. Sombra é distância do fundo, não enfeite.
               Dentro de painel: elev-0 e separa por linha. Pousado no fundo:
               borda + elev-1. Flutuando: elev-2 SEM borda (a sombra já diz que
               flutua). Sombra junto com borda forte é o que produz o "card de
               IA" que o Diretor detesta. */
            --elev-0: none;
            --elev-1: var(--sombra-1);
            --elev-2: var(--sombra-2);

            /* ===============================================================
               BARRA CLARA E COR DE AÇÃO (02/09/2026)
               Decisão do Diretor depois de comparar o sistema com Asana e
               ClickUp e pedir para "tirar o aspecto de sistema antigo".

               O que datava o sistema era a barra lateral em vinho escuro
               chapado de ponta a ponta: sidebar escura sólida é a assinatura
               de software institucional de 2010 a 2015. Nos dois produtos de
               referência a barra é quase branca e a cor da marca aparece só
               no item ativo e no logo.

               O VINHO NÃO SAI, MUDA DE PAPEL: continua sendo a identidade
               (logo, item ativo, ação principal de marca). O que entra é uma
               cor de AÇÃO separada, porque vinho escuro pesa demais para
               dizer "clique aqui" e competia com o próprio dado da tela.
               =============================================================== */
            /* CROMO ESCURO, CONTEUDO BRANCO (02/09/2026, decisao do Diretor
               olhando o Asana). O carvao e NEUTRO: escuro colorido de marca e
               o que envelhece, escuro neutro e moldura. */
            --barra:       #2a2c2e;   /* barra lateral e topo, medido no Asana */
            --barra-item:  #3a3d40;   /* hover do item */
            --barra-ativo: #45383b;   /* item ativo: vinho misturado ao carvao */
            --barra-tinta: #e8e9ea;   /* texto sobre o cromo escuro */
            --barra-tinta-fraca: #9ea0a2;  /* rotulo de secao no menu */
            --acao:        #1f6fb2;   /* AÇÃO. Nunca é status e nunca é marca */
            --acao-suave:  #e6f0f8;
            /* Dois tons de ação do botão de IA (Onda 3). O primeiro é o --acao do
               tema claro, fixo nos dois temas: o --acao do escuro (#5aa9e6) não dá
               contraste com o texto branco do botão. */
            --acao-ia: #1f6fb2; --acao-ia-escuro: #17558a;
            /* Branco que CONTINUA branco no tema escuro: é o texto que fica
               em cima da marca ou de um status, e esses fundos não mudam de
               claro pra escuro. Sem isto, `color:var(--sobre-marca)` num botão vinho viraria
               texto escuro sobre vinho no tema escuro. */
            --sobre-marca: #ffffff;
            /* Marca como FUNDO de botao (com texto branco por cima). No tema
               claro e a mesma cor; no escuro ela precisa ficar mais ESCURA
               que a marca-tinta, senao o branco em cima nao tem contraste. */
            --marca-fundo: #9d1f31;
            --linha-sutil: #eef0f4;   /* separação de linha de tabela */

            /* Aliases dos nomes antigos que o JS/HTML já usa em estilo inline —
               apontam pros tokens novos pra a troca não quebrar nada. */
            --fundo-suave: var(--sup-2);
            --sucesso: var(--st-ok);
            --erro: var(--st-critico);
            --aviso: var(--st-atencao);
        }

        html, body { height: 100%; }
        body { font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--fundo); color: var(--texto); overflow-x: hidden; display: flex; -webkit-font-smoothing: antialiased; }

        /* Anel de foco visível em qualquer controle — acessível e "de produto" */
        button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--anel-foco); }

        .btn-menu { background: none; border: none; color: var(--texto-claro); cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background 0.2s, color 0.2s; }
        .btn-menu:hover { background: var(--cinza-claro); color: var(--texto); }

        .sidebar { width: 220px; background: var(--barra); color: var(--tinta-2); display: flex; flex-direction: column; overflow-y: auto; transition: margin-left 0.3s ease; flex-shrink: 0; z-index: 100; border-right: 1px solid var(--borda); }
        .sidebar.collapsed { margin-left: -220px; }

        .sidebar-header { height: 52px; padding: 0 14px; border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: var(--esp-2); box-sizing: border-box; position: relative; }
        /* Sobre o carvao da barra, uma caixa branca com borda vira um bloco solto no
           canto. O logo fica direto no fundo, do jeito que o Asana faz. */
        .sidebar-logo { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--raio-1); overflow: hidden; flex-shrink: 0; }
        .sidebar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

        .sidebar-title { flex: 1; min-width: 0; text-align: left; overflow: hidden; }
        .sidebar-title h1 { font-size: var(--txt-destaque); font-weight: var(--peso-forte); line-height: 1.2; color: var(--tinta-1); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sidebar-title p { font-size: var(--txt-densa); color: var(--tinta-3); font-weight: var(--peso-corpo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .sidebar-menu { flex: 1; padding: 20px 0; overflow-y: auto; overflow-x: hidden; }
        .sidebar-menu::-webkit-scrollbar { width: 6px; }
        .sidebar-menu::-webkit-scrollbar-track { background: transparent; }
        .sidebar-menu::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 3px; }

        .menu-section { margin-bottom: var(--esp-6); }
        .menu-section-title { font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); padding: 0 20px; color: var(--tinta-3); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--esp-2); }

        /* Item de menu moderno: pílula arredondada, sem barra lateral nem
           deslocamento no hover (micro-movimento constante cansa) — estado
           ativo é um fundo suave da cor de marca + texto branco cheio. */
        /* Em barra clara o item ativo é o vinho a 8% com o texto na cor da
           marca: identidade sem peso. O ativo em vinho a 35% que existia aqui
           só funcionava sobre fundo escuro. */
        /* CONTROLE NÃO É TEXTO (10/09/2026).
           O Diretor relatou uma barra de escrita piscando ao clicar nos itens
           do menu. Não era contenteditable nem foco em campo: um clique num
           <div> com texto ancora um cursor de seleção no documento
           (getSelection().type vira "Caret"). Normalmente ele é invisível, mas
           com a navegação por cursor do navegador ligada (F7 no Edge e no
           Chrome, fácil de apertar sem querer) ele aparece piscando, e volta a
           cada clique.
           Barra lateral e abas são CONTROLES: ninguém seleciona o texto de um
           menu pra copiar. Tirando a seleção deles, o cursor não tem onde
           ancorar, e de quebra some o realce feio ao clicar duas vezes rápido.
           Não vale pra tabela, KPI e conteúdo: número tem que dar pra copiar. */
        .sidebar, .tabs, .tab, .tabs-select-mobile {
            -webkit-user-select: none; user-select: none;
        }

        .menu-item { padding: 0 14px; min-height: var(--alt-padrao); cursor: pointer; display: flex; align-items: center; gap: var(--esp-3); transition: background .15s ease, color .15s ease; margin: 2px 10px; border-radius: var(--raio-1); color: var(--tinta-2); }
        .menu-item:hover { background: var(--barra-item); color: #ffffff; }
        .menu-item.active { background: var(--barra-ativo); color: #ffffff; font-weight: var(--peso-enfase); }
        
        .menu-item-icon { font-size: 17px; width: 22px; text-align: center; }
        .menu-item-text { font-size: var(--txt-corpo); }

        /* Ícones SVG de linha (sprite no topo do body) — herdam a cor do
           texto via currentColor e escalam com o font-size do elemento pai.
           O vertical-align negativo alinha o traço com a linha de base do
           texto ao lado (mesmo truque do Font Awesome/Lucide). */
        .ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex-shrink: 0; }
        .menu-item-icon .ico { width: 18px; height: 18px; vertical-align: middle; }

        .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        /* Botão de fixar só existe no desktop (ver media query abaixo) — no
           mobile fica sempre escondido, senão aparece sem estilo nenhum. */
        .sidebar-pin-btn { display: none; }

        /* Sidebar compacta com expansão no HOVER (desktop) — pedido do
           usuário 2026-07-16 inspirado no SEOBRA (lá é clique; aqui é hover,
           "funcionalidade equivalente, não cópia literal"), aplicado ao APP
           INTEIRO (#sidebar), não só ao orçamento — orçamento já tem seu
           próprio menu interno (#orcSideMenu) que não mexe aqui.
           Técnica: sidebar sai do fluxo flex (position:fixed) reservando só
           64px fixos pro .main-content (via margin-left) — ao passar o
           mouse ela CRESCE por cima do conteúdo (overlay, z-index alto),
           sem empurrar nada, sem re-flow. Só no breakpoint desktop — no
           mobile (<=768px) o comportamento antigo de show/hide por clique
           no hambúrguer (.sidebar.collapsed) continua intacto, sem hover
           (não faz sentido em touch). */
        @media (min-width: 769px) {
            .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 64px; transition: width 0.16s ease; box-shadow: 2px 0 6px rgba(0,0,0,0.12); }
            .sidebar:hover { width: 220px; box-shadow: 0 0 0 1px var(--borda), 2px 0 8px rgba(0,0,0,.08); }
            body > .main-content { margin-left: 64px; }
            /* Recolhida (64px), o padding/logo originais (14px + 52px) não
               cabem — cortava a logo (achado real do usuário, print 2026-07-16).
               Encolhe padding e logo só no estado recolhido; hover devolve o
               tamanho normal, com transição pra não "saltar". */
            .sidebar-header { overflow: hidden; padding: 0 10px; gap: 8px; transition: padding 0.16s ease; }
            .sidebar-logo { width: 44px; height: 44px; transition: width 0.16s ease, height 0.16s ease; }
            .sidebar:hover .sidebar-header { padding: 0 14px; }
            .sidebar:hover .sidebar-logo { width: 52px; height: 52px; }
            .sidebar-title, .menu-section-title, .menu-item-text { white-space: nowrap; opacity: 0; transition: opacity 0.1s ease; }
            .sidebar:hover .sidebar-title, .sidebar:hover .menu-section-title, .sidebar:hover .menu-item-text { opacity: 1; transition-delay: 0.05s; }
            .menu-item { overflow: hidden; }
            .menu-item-icon { flex-shrink: 0; }

            /* Botão de fixar (pino), igual ao SEOBRA: clique trava a sidebar
               aberta (sem precisar do mouse em cima); clique de novo volta ao
               hover-collapse normal. Só aparece com a sidebar expandida
               (hover OU já fixada) — senão não cabe nos 64px.
               Vive como "medalha" no canto superior DIREITO do cabeçalho
               inteiro (pedido do usuário 2026-07-16, print anotado) —
               position:absolute (fora do fluxo flex, não disputa espaço com
               "C. Machado Engenharia") com top/right positivos, dentro da
               caixa do cabeçalho (que tem overflow:hidden — offset negativo
               cortava o botão e ele ficava inclicável, já testado). */
            .sidebar-pin-btn { display: none; align-items: center; justify-content: center; width: 20px; height: 20px; position: absolute; top: 6px; right: 8px; background: var(--branco); border: 1px solid var(--borda); border-radius: 50%; color: var(--tinta-3); cursor: pointer; opacity: 0; transition: opacity .1s ease, background .15s ease, color .15s ease; }
            .sidebar-pin-btn .ico { width: 10px; height: 10px; }
            .sidebar-pin-btn:hover { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-marca); }
            .sidebar:hover .sidebar-pin-btn, .sidebar.pinned .sidebar-pin-btn { display: flex; opacity: 1; transition-delay: 0.05s; }
            .sidebar.pinned .sidebar-pin-btn { color: var(--primaria); border-color: var(--primaria); }

            /* !important pra garantir que o estado fixado sempre vence,
               mesmo que apareça duplicado/reordenado noutra folha de estilo
               futura — evita qualquer ambiguidade de especificidade (achado
               real do usuário 2026-07-16: clicar no pino não estava
               mantendo aberto). */
            .sidebar.pinned { width: 220px !important; box-shadow: 2px 0 6px rgba(0,0,0,0.12) !important; }
            .sidebar.pinned .sidebar-header { padding: 0 14px !important; }
            .sidebar.pinned .sidebar-logo { width: 52px !important; height: 52px !important; }
            .sidebar.pinned .sidebar-title, .sidebar.pinned .menu-section-title, .sidebar.pinned .menu-item-text { opacity: 1 !important; }
            .sidebar.pinned ~ .main-content { margin-left: 220px !important; }

            /* O botão hambúrguer do cabeçalho (☰) sempre foi só pra mobile
               (toggleSidebar/.collapsed) — nunca tinha sido escondido no
               desktop. Achado real do usuário 2026-07-16: clicar nele fazia
               a sidebar SUMIR (margin-left:-220px somado ao left:0 do
               position:fixed novo joga ela pra fora da tela). No desktop
               quem controla abrir/fixar agora é hover + botão de pino. */
            .btn-menu { display: none; }
            /* Blindagem: .collapsed é lógica de mobile (margin-left:-220px
               pra esconder fora da tela) — se algum caminho de código ainda
               tentar aplicar no desktop, neutraliza aqui (o hover/pino já
               controlam tudo no desktop). */
            .sidebar.collapsed { margin-left: 0; }
        }

        /* Cabeçalho CLARO — a mudança mais visível da repaginação. O blocão
           bordô com borda dourada era o maior sinal de "sistema de 2014";
           produto moderno usa cabeçalho branco fino com borda sutil, e deixa
           a cor pro conteúdo que importa (ações, estados, dados). */
        .header { height: 52px; background: var(--barra); color: var(--barra-tinta); padding: 0 32px; display: flex; align-items: center; border-bottom: 1px solid var(--borda); box-sizing: border-box; z-index: 10; }
        .header-left { display: flex; align-items: center; gap: 14px; }
        /* Sobre o carvão, uma caixa em tom claro vira um bloco solto. O ícone fica
           direto no fundo, um pouco menor, como o Asana faz com o do projeto. */
        .header-logo { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; color: var(--barra-tinta); background: rgba(255,255,255,.08); border-radius: 8px; }
        .header-logo img { width: 100%; height: 100%; object-fit: contain; }
        .header-logo span { font-size: 24px; display: flex; }
        .header-text h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.15; color: var(--ink); }
        .header-text .subtitulo-empresa { font-size: 11.5px; color: var(--texto-claro); font-weight: 400; }
        /* Data como legenda pequena embaixo do título (não mais um bloco à
           parte lá longe, à direita) — dá presença ao nome do módulo e usa
           o espaço com intenção, em vez de deixar uma legenda solta. */
        /* capitalize sobe TODA palavra e produzia "Quarta-Feira, 2 De Setembro
           De 2026". Em português, preposição é minúscula. A data já vem certa
           do toLocaleDateString('pt-BR'), então basta a primeira letra. */
        .header-text .date { font-size: 11px; color: var(--texto-claro); margin-top: 1px; }
        .header-text .date::first-letter { text-transform: uppercase; }

        /* Lado direito do cabeçalho, em 2 linhas empilhadas e alinhadas à
           direita: "Online" no canto, bem acima do botão de sair (pedido
           do usuário — antes ficava ao lado, "perdido" no meio). Avatar/
           e-mail/sair formam a linha de baixo. */
        /* Uma linha só: o empilhamento em duas foi desenhado para um cabeçalho de
           72px, e nos 52px de agora ele espreme "Online" contra a borda de cima. */
        .header-right { margin-left: auto; display: flex; flex-direction: row; align-items: center; gap: var(--esp-3); }
        .status-dot { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: var(--peso-enfase); color: var(--texto-claro); }
        /* Sem bolinha e sem pulso (02/09/2026): verde piscando 24h por dia gasta a
           cor de "no prazo" em informacao que nao e decisao, e a animacao
           infinita puxa o olho pro canto que menos importa. Estado normal e
           texto calado; quem vira selo e a FALHA. */
        .status-dot::before { content: none; }
        .status-dot-texto { white-space: nowrap; }

        /* Indicador do Drive no cabeçalho — mesmo lugar do "Online", pedido
           do usuário ("um botão no cabeçalho, tipo o aviso de online") pra
           substituir o botão "Conectar Drive" que ficava repetido em cada
           toolbar de tabela. Cinza/opaco quando desconectado (chama atenção
           sem ser alarmante — não é um erro, é um estado normal até a
           pessoa conectar), verde quando conectado (mesma linguagem do
           pulso de "Online"). */
        .header-indicadores { display: flex; align-items: center; gap: 12px; }
        .drive-indicador { display: flex; align-items: center; gap: 6px; background: var(--cinza-claro); border: 1px solid var(--borda); color: var(--texto-claro); font-size: 11.5px; font-weight: 600; padding: 4px 10px 4px 8px; border-radius: 999px; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
        .drive-indicador:hover { background: var(--cinza); }
        .drive-indicador.conectado { background: #ecfdf3; border-color: #b5e5c8; color:var(--st-ok); cursor: default; }
        .drive-indicador.conectado:hover { background: #ecfdf3; }
        .drive-indicador-texto { white-space: nowrap; }

        .header-user { display: flex; align-items: center; gap: 10px; }
        .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primaria-suave); color: var(--primaria); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .user-email { font-size: 12.5px; color: var(--texto-claro); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .btn-sair { background: var(--cinza-claro); border: 1px solid var(--borda); color: var(--texto-claro); cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; flex-shrink: 0; }
        .btn-sair:hover { background: var(--cinza); color: var(--texto); }

        .content-wrapper { flex: 1; overflow-y: auto; padding: 20px 24px; }

        .module { display: none; }   /* sem fadeIn: 0,4s de espera a cada troca de modulo era o maior sinal de sistema antigo na interacao */
        .module.active { display: block; }

        /* "overflow: hidden" sozinho aqui (sem -x/-y) cancelava o
           "overflow-x: auto" acima — em telas mais estreitas, com 9+ abas,
           nenhuma rolava e a última (ex: "Config") ficava cortada, sem
           jeito de alcançar. overflow-y: hidden mantém só o clip vertical
           (pros cantos arredondados), sem matar o scroll horizontal —
           é um fallback pra qualquer largura intermediária que escape dos
           breakpoints abaixo. */
        /* ABAS (02/09/2026): eram pílulas vinho dentro de uma caixa com borda
           e sombra, o que dá três camadas de moldura para uma navegação. Viram
           sublinhado, que é como Asana e ClickUp marcam a aba corrente: a linha
           diz "você está aqui" sem competir com o dado da tela.
           O AZUL entra aqui e não no botão: navegação é ação, e o vinho fica
           reservado à identidade e à ação principal de marca. */
        .tabs { display: flex; background: transparent; border: none; border-bottom: 1px solid var(--borda); gap: var(--esp-1); overflow-x: auto; overflow-y: hidden; box-shadow: none; margin-bottom: var(--esp-6); border-radius: 0; padding: 0; }
        /* Seletor único de abas pra celular/tablet — escondido no desktop,
           ligado no breakpoint de tablet (ver @media (max-width: 1024px)
           mais abaixo, que cobre tanto tablet quanto celular). Criado
           dinamicamente por js/shared.js (criarSeletoresAbasMobile). */
        .tabs-select-mobile { display: none; }
        /* Abas em "segmento" (pílula ativa dentro de um trilho claro) —
           padrão dos apps atuais (Linear/Stripe), substitui o degradê
           bordô com barra dourada. */
        /* PESO E TAMANHO SUBIRAM (05/09/2026, pedido do Diretor: "os botoes das
           abas podem ser um pouco mais destacados, algo que mostre que ali
           estao as abas"). Em 12,5px/400 e tinta secundaria a faixa inteira
           lia como legenda, nao como navegacao: so a aba ativa tinha peso, e
           uma barra de navegacao onde so o item atual se ve nao anuncia que ha
           mais para clicar. 13,5px/500 e a tinta primaria resolvem sem
           transformar a faixa em botoeira. */
        .tab { flex: 0 0 auto; min-width: fit-content; padding: 0 var(--pad-padrao); min-height: 40px;
            display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
            cursor: pointer; font-weight: var(--peso-medio); font-size: 13.5px; color: var(--tinta-2);
            letter-spacing: -.005em;
            transition: color .15s ease, border-color .15s ease; white-space: nowrap;
            border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; }
        .tab:hover { color: var(--tinta-1); background: transparent; border-bottom-color: var(--borda-forte, var(--borda)); }
        .tab.active { color: var(--marca); font-weight: var(--peso-enfase); background: transparent; border-bottom-color: var(--marca); border-bottom-width: 2px; }
        .tab .ico { width: 16px; height: 16px; }

        .tab-content { display: none; }   /* idem: trocar de aba e navegacao, nao transicao */
        .tab-content.active { display: block; }

        /* SÓ opacidade — o transform:translateY que existia aqui deixava um
           `transform` no ancestral (.module/.tab-content) e QUEBRAVA o
           position:sticky do cabeçalho fixo do orçamento (topbar) e de
           qualquer cabeçalho grudento. Um transform num ancestral vira o novo
           bloco de contenção do sticky. Achado do usuário 2026-07-17: "travar
           o cabeçalho da linha vermelha ao rolar". */
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 30px; }
        /* KPI moderno: borda 1px + sombra mínima (nada de barra lateral
           colorida grossa), valor em tinta escura com NÚMEROS TABULARES
           (algarismos de largura igual — colunas de valores alinham).
           As variantes coloridas pintam o VALOR, não a moldura. */
        .kpi-card { background: var(--branco); padding: 18px; border-radius: 12px; border: 1px solid var(--borda); box-shadow: var(--sombra-1); transition: box-shadow 0.2s ease, border-color 0.2s ease; }
        .kpi-card:hover { box-shadow: var(--sombra-2); border-color: var(--borda-forte); }
        .kpi-label { font-size: 11px; color: var(--texto-claro); text-transform: uppercase; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 6px; }
.kpi-value{ font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.25; margin-bottom: 4px; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-delta{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--texto-claro); }
        .kpi-tendencia { display: inline-block; font-size: 11px; font-weight: 600; margin-top: 5px; }
        .kpi-tendencia.positivo { color: var(--st-ok); }
        .kpi-tendencia.negativo { color:var(--st-critico); }
        /* sem font-weight aqui: o peso é do componente, o estado é da cor. Com
   500 no neutro, a mesma linha mudava de espessura conforme o número. */
        .kpi-tendencia.neutro { color: var(--texto-claro); }

        /* Ícone (não pill de texto) — já tem orçamento vinculado? Base Mestre e
           Pipeline (renderBadgeOrcamento, js/licitacoes.js). */
        .badge-orcamento { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; transition: transform .15s ease, background .15s ease; }
        .badge-orcamento .ico { width: 13px; height: 13px; }
        .badge-orcamento:hover { transform: scale(1.12); }
        .badge-orcamento.tem { background: var(--st-ok-tinta); color: var(--st-ok); }
        .badge-orcamento.sem { background: var(--sup-2); color: var(--tinta-3); }

.kpi-card.green .kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color: var(--st-ok); }
.kpi-card.blue .kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color: var(--st-info); }
.kpi-card.yellow .kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color:var(--st-atencao); }
.kpi-card.red .kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color:var(--st-critico); }
        .kpi-card.destaque { padding: 22px; border-color: var(--borda-forte); }
        .kpi-card.destaque .kpi-label { font-size: 11.5px; }
.kpi-card.destaque .kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 25px; }

        .alert-box { background: var(--st-atencao-tinta); border: 1px solid var(--borda); padding: 13px 16px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; color: var(--st-atencao); display: flex; align-items: center; gap: 10px; }
        .alert-box.risco { background: var(--st-critico-tinta); color: var(--st-critico); }
        .alert-box.alert-box--info { background: var(--st-info-tinta); color: var(--st-info); }
        .alert-box strong { font-weight: 700; }

        /* Banner "instalar como app" — mostrarBannerInstalarApp() em shared.js */
        .banner-instalar-app { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--ink); color: #e8ebf0; padding: 12px 18px; border-radius: 12px; margin-bottom: 18px; font-size: 13px; }
        .banner-instalar-app strong { font-weight: 700; color:var(--sobre-marca); }
        .banner-instalar-app-acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .banner-instalar-app .btn-primary { background: var(--branco); color: var(--ink); border: none; font-weight: 700; }
        .btn-fechar-banner { background: rgba(255,255,255,0.12); border: none; color: #e8ebf0; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; }
        .btn-fechar-banner:hover { background: rgba(255,255,255,0.25); }

        .mini-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .mini-kpi-grid > * { min-width: 0; }
        .mini-kpi { background: var(--cinza-claro); border-radius: 10px; padding: 14px 16px; border: 1px solid var(--borda); }
.mini-kpi.laranja .mini-kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color:var(--st-atencao); }
.mini-kpi.cinza .mini-kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color: var(--texto-claro); }
        .mini-kpi-label { font-size: 10.5px; color: var(--texto-claro); text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; margin-bottom: 4px; }
.mini-kpi-value{ font-size: 19px; font-weight: 700; color: var(--ink); font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .section-title { font-size: 11.5px; font-weight: 700; color: var(--texto-claro); text-transform: uppercase; letter-spacing: 0.8px; margin: 28px 0 14px; }
        .section-title:first-child { margin-top: 0; }

        .chart-container { background: var(--branco); padding: 24px; border-radius: 12px; border: 1px solid var(--borda); box-shadow: var(--sombra-1); margin-bottom: 30px; }
        .chart-container h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
        .chart-wrapper { position: relative; height: 300px; width: 100%; }

        /* min-width:0 nos filhos é essencial — sem isso, um item de grid
           "1fr" ainda pode ser esticado além da fração justa por conteúdo
           interno com largura mínima própria (aqui, o <canvas> do Chart.js,
           que guarda o próprio tamanho em pixel via atributo width/height).
           Sem essa trava, em telas de tablet o 2º card de gráfico ficava
           cortado silenciosamente — o body tem overflow-x:hidden, então em
           vez de aparecer uma barra de rolagem, o conteúdo excedente
           simplesmente sumia, sem nenhum aviso visual do bug (achado só
           medindo via DOM, não dava pra ver "quebrado" de forma óbvia). */
        .two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
        .two-columns > * { min-width: 0; }

        .table-container { background: var(--branco); border-radius: 12px; border: 1px solid var(--borda); box-shadow: var(--sombra-1); overflow-x: auto; overflow-y: hidden; margin-bottom: 30px;}
        .table-header { padding: 18px 24px; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; align-items: center; }
        .table-header h3 { font-size: 15px; font-weight: 600; color: var(--ink); }

        /* Cabeçalho de tabela CLARO (rotulo pequeno em caixa alta cinza) —
           o degradê bordô nas THs era o outro grande marcador de "2014".
           Valores ganham números tabulares pra alinhar em coluna. */
        .licitacoes-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .licitacoes-table th { background: transparent; color: var(--tinta-3); padding: var(--esp-2) 15px; text-align: left; font-weight: var(--peso-enfase); font-size: var(--txt-rotulo); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--borda); }
        /* Linha quase invisível em vez de borda marcada: é o que separa uma
           tabela de produto de uma planilha do Access. */
        .licitacoes-table td { padding: 13px 15px; border-bottom: 1px solid var(--linha-sutil); }
.licitacoes-table td.col-valor{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
        .licitacoes-table tbody tr:hover { background: var(--sup-2); }
        /* Tabelas com muitas colunas numéricas (Curva ABC, Custo x Preço) —
           fonte/padding padrão fazia cabeçalho tipo "VALOR TOTAL"/"% DO
           ORÇAMENTO" quebrar em 2 linhas e apertar os números (pedido do
           usuário 2026-07-16: "diminuir as fontes, não quero valores
           quebrados"). Cabeçalho e valor sempre numa linha só. */
.orc-tab-abc, .orc-tab-custopreco{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 12px; }
.orc-tab-abc th, .orc-tab-custopreco th{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 10px; padding: 9px 10px; white-space: nowrap; }
.orc-tab-abc td, .orc-tab-custopreco td{ padding: 8px 10px; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
        .orc-tab-abc td:not(:nth-child(4)), .orc-tab-custopreco td:not(:nth-child(3)) { white-space: nowrap; }
        /* Linha inteira da Base Mestre é clicável (abre o painel de
           detalhe) — cursor de mãozinha + destaque um pouco mais forte
           que o hover padrão avisa isso, sem precisar de instrução
           escrita na tela. */
        .linha-clicavel { cursor: pointer; }
        .linha-clicavel:hover { background: #f3f5f8 !important; }
        .linha-clicavel .acoes-cell { cursor: default; }

        .tabela-base-mestre { table-layout: fixed; min-width: 900px; }

        /* ---------------------------------------------------------------
           TRIAGEM DE EDITAIS (01/09/2026)
           A tabela ganhou a coluna de seleção e a de prazo e passou a ter
           SEIS colunas dentro de um modal de 900px: a última era cortada e o
           Diretor viu a tela quebrada. Larguras fixas, com o Objeto sendo o
           único elástico, e rolagem horizontal como rede de segurança em
           janela estreita.
           --------------------------------------------------------------- */
        /* min-width medido no navegador, não chutado: com a janela em 940px sobram
           779px pra tabela depois dos paddings, e qualquer coisa acima disso
           empurrava a coluna de Ações pra trás da rolagem. As fixas somam 552
           (30+196+108+92+126) e sobram 200 pro Objeto, que é o piso pra ele não
           virar uma coluna de duas palavras. */
        .tabela-triagem { table-layout: fixed; width: 100%; min-width: 900px; font-size: 12.5px; }
        .tabela-triagem th, .tabela-triagem td { padding: 9px 10px; vertical-align: top; }
        .tabela-triagem th { padding-top: 8px; padding-bottom: 8px; }
        .tabela-triagem col.tri-sel { width: 30px; }
        .tabela-triagem col.tri-orgao { width: 196px; }
        .tabela-triagem col.tri-valor { width: 136px; }
        .tabela-triagem col.tri-prazo { width: 132px; }
        .tabela-triagem col.tri-acoes { width: 196px; }
        /* Objeto é o elástico e o único que pode quebrar linha; sem o
           break-word, um objeto sem espaços empurra a tabela inteira. */
        .tabela-triagem td.tri-objeto { white-space: normal; overflow-wrap: anywhere; color: var(--tinta-2); line-height: 1.35; }
        .tabela-triagem td.tri-orgao { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.tabela-triagem td.tri-valor{ text-align: right; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-triagem td.tri-prazo{ white-space: nowrap; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
/* 14/10: o selo ("Apertado, em 1 d") quebra linha em vez de ser cortado pela coluna. */
.tabela-triagem td.tri-prazo .tri-prazo-selo, .tabela-triagem td.tri-prazo .tri-prazo-txt { white-space: normal; }
        .tabela-triagem td.tri-sel { text-align: center; padding-top: 11px; }
        /* AÇÕES DA LINHA (redesenhadas em 01/09/2026)
           Antes eram dois blocos de largura total empilhados, um vinho sólido e
           outro com borda rosa: o Diretor chamou de "feios e amadores", e com
           razão. Botão de largura total repetido 154 vezes vira empilhamento de
           barras, e o vinho chapado em cada linha compete com o próprio dado da
           tabela, que é o que ele foi ali ler.
           Agora: dois controles pequenos lado a lado, com a mesma altura da
           linha de texto. Promover é contorno que se preenche no hover (a cor
           chega no momento da decisão, não antes); Descartar é só o ícone, com
           o rótulo no title, porque a palavra não acrescenta nada a uma lixeira
           e ocupa metade da coluna. */
        .tabela-triagem td.tri-acoes { white-space: nowrap; padding-top: 10px; }
        .tabela-triagem .tri-acoes-wrap { display: flex; align-items: center; gap: 5px; }
        .tabela-triagem td.tri-acoes .btn {
            margin: 0; border-radius: 5px; box-shadow: none; font-size: 11px; font-weight: 600;
            letter-spacing: .01em; padding: 0 8px; height: 24px; line-height: 1;
            display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
            transition: background .12s ease, color .12s ease, border-color .12s ease;
        }
        .tabela-triagem td.tri-acoes .btn .ico { width: 12px; height: 12px; }
        /* Promover: a ação que a gente QUER. Contorno vinho, preenche no hover. */
        .tabela-triagem td.tri-acoes .btn.tri-btn-promover {
            flex: 1; justify-content: center;
            background: var(--branco); color: var(--primaria); border: 1px solid var(--primaria);
        }
        .tabela-triagem td.tri-acoes .btn.tri-btn-promover:hover { background: var(--primaria); color: var(--sobre-marca); }
        /* Descartar: só o ícone. Quadrado, cinza, e só vira vermelho quando o
           ponteiro está em cima, que é quando ela está de fato prestes a
           acontecer. Nunca some, mas também nunca grita. */
        .tabela-triagem td.tri-acoes .btn.tri-btn-descartar {
            flex-shrink: 0; width: 24px; padding: 0; justify-content: center;
            background: transparent; color: #9AA4B2; border: 1px solid var(--borda, #e3e6ea);
        }
        .tabela-triagem td.tri-acoes .btn.tri-btn-descartar:hover { background:var(--st-critico); border-color:var(--st-critico); color:var(--sobre-marca); }
        .tabela-triagem tbody tr.tri-vencido { opacity: .58; }
        .tabela-triagem tbody tr.tri-vencido:hover { opacity: 1; }
        /* Rolagem horizontal fica no wrapper, nunca no corpo do modal: o
           corpo rola na vertical e misturar os dois trava o scroll. */
        .tri-tabela-wrap { overflow-x: auto; }
        /* O corpo do painel tem 28px de padding lateral, o que numa janela de
           940px comia 56 dos 800 que a tabela precisa e mandava a coluna de
           Ações pra trás da rolagem. Aqui a lista é o conteúdo: 14px bastam. */
        #modalPreAnalise .painel-corpo { padding-left: 14px; padding-right: 14px; }
        /* .modal-content nasce com width:90%, e 90% de uma janela de 940px são
           810: a tabela de 800 não cabia e a coluna de Ações ficava atrás da
           rolagem. Aqui a janela É a lista, então ela usa a largura toda. */
        #modalPreAnalise .modal-content { width: 98%; }
        /* Barra de ações da triagem: some quando não há seleção pra não
           roubar espaço da lista no uso normal. */
        .tri-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; }
        .tri-barra--lote { border: 1px solid var(--borda-forte); background: var(--sup-2); }
        .tri-barra--filtros { border: 1px solid var(--borda); background: var(--sup-2); }
        .tri-prazo-selo { font-weight: 700; font-size: 11px; }

        /* ---------------------------------------------------------------
           DIÁRIO DE OBRA — lista de dias (01/09/2026)
           A lista deixou de ser "os relatórios que existem" e passou a ser
           "os dias da obra", com os que faltam aparecendo como linha. Ver o
           porquê em js/obradiario.js, obraDiarioEixoDeDias().
           A distinção que o Diretor pediu não vem de enfeite: vem de os dias
           serem de fato diferentes agora.
           --------------------------------------------------------------- */
        .tabela-diario { table-layout: fixed; width: 100%; min-width: 820px; font-size: 12.5px; }
        .tabela-diario th, .tabela-diario td { padding: 8px 10px; vertical-align: middle; }
        .tabela-diario tbody tr:hover { background: var(--sup-2); }
        /* Faixa à esquerda em vez de fundo na linha inteira: obra com 20
           buracos ficaria um bloco vermelho e ninguém leria mais nada. */
        .tabela-diario tr.diario-buraco > td:first-child { box-shadow: inset 3px 0 0 0 var(--st-critico); }
        .tabela-diario tr.diario-buraco { background: var(--st-critico-tinta); }
        .tabela-diario tr.diario-buraco:hover { background: var(--st-critico-tinta); }
        .tabela-diario tr.diario-sem-apont > td:first-child { box-shadow: inset 3px 0 0 0 var(--st-atencao); }
        /* Linha de grupo do mês: âncora de rolagem em 200 linhas. Sticky pra
           não perder a referência do mês no meio da rolagem. */
        .tabela-diario tr.diario-mes { background: var(--sup-2, #f2f4f7); cursor: pointer; }
        .tabela-diario tr.diario-mes:hover { background: var(--cinza-claro, #eceff3); }
        .tabela-diario tr.diario-mes td { border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
        /* O PDF só aparece no hover da linha (e no foco, pra teclado): ele é a
           última ação que alguém faz aqui e não precisa competir com o dado. */
        .tabela-diario .diario-btn-pdf { opacity: 0; transition: opacity .12s ease; }
        .tabela-diario tr:hover .diario-btn-pdf,
        .tabela-diario tr:focus-within .diario-btn-pdf { opacity: 1; }
        /* Barra de dado dentro da célula (o preenchimento condicional do
           Excel, não decoração): faz um dia de 40 pessoas e um de 9 ficarem
           visualmente diferentes a três metros, sem gastar cor de status. */
        .tabela-diario td.diario-efetivo { position: relative; }
        /* Correção 02/09 (vista na tela, não no teste): ocupando a altura
           inteira da linha, a barra lia como CAMPO DE FORMULÁRIO, e o olho
           parava nela achando que dava pra digitar. Vira trilho fino na base,
           que é como planilha e painel moderno mostram proporção sem disputar
           atenção com o número. */
        .cm-barra-celula                 {
            position: absolute; right: 0; bottom: 3px; height: 3px;
            background: var(--acao-suave, #e6f0f8); border-radius: 2px; z-index: 0;
        }
        .tabela-diario tr:hover .cm-barra-celula                 { background: var(--acao, #1f6fb2); opacity: .35; }
        /* HIERARQUIA DOS BOTÕES (achado ao ver a tela renderizada, 01/09):
           com "Descartar" em vermelho sólido em toda linha, uma fila de 154
           editais vira uma parede vermelha, e a ação que a gente QUER que o
           Diretor faça (promover) sumia em cinza. Cor forte marca a ação
           desejada; a destrutiva fica discreta e só se acende no hover, que é
           quando ela realmente está prestes a acontecer.

           As regras acima já dobram a especificidade de propósito: .btn-primary
           e .btn-secondary são declarados mais abaixo neste arquivo e ganhariam
           no desempate por ordem de declaração. */
        /* Tabela de Lançamentos (Financeiro): fonte ÚNICA em todas as
           células de dados (pedido do usuário 2026-08-25: "padronizar
           tamanho das fontes na aba"). Antes, C.Custo e Conta usavam
           <small> (~10px) enquanto o resto ficava em 13px — agora tudo é
           12.5px, um degrau abaixo do padrão pra caber as 10 colunas sem
           quebrar. Badges de status mantêm o tamanho próprio de pill. */
        .tabela-lancamentos td { font-size: 12.5px; }
        .tabela-base-mestre thead th { text-align: center; }
        /* .col-acoes abaixo tem text-align:right (pedido: botões encostados
           na borda direita da coluna, no corpo da tabela) — mas isso também
           tem mais especificidade que a regra de centralizar cabeçalhos, e
           acabava puxando o título "Ações" pra direita junto. Este seletor é
           mais específico ainda (thead th.col-acoes) pra centralizar só o
           título, sem mexer no alinhamento dos botões nas linhas de dados. */
        .tabela-base-mestre thead th.col-acoes { text-align: center; }
        .tabela-base-mestre td.col-status { text-align: left; }
        .tabela-base-mestre td { vertical-align: top; }
        .tabela-base-mestre td.col-objeto { white-space: normal; word-break: break-word; }
        /* Larguras: Data/Valor/Status usam white-space:nowrap (não quebram
           linha sozinhas) — qualquer folga zero já vira estouro visual, o
           texto vaza por cima da coluna vizinha ("embolando" as duas, bug
           real do usuário, reproduzido tanto em tablet quanto em celular —
           a tabela sempre usa a mesma base de min-width:900px acima,
           então o problema e a correção são os MESMOS nas duas telas, não
           precisa de regra separada por breakpoint). Objeto/Órgão usam
           white-space:normal (quebram linha sozinhos), por isso são as
           colunas que cedem espaço — ficar um pouco mais estreitas só
           aumenta a quantidade de linhas, não estoura nada. */
        /* Coluna de checkbox (seleção múltipla) — largura fixa em px, não %,
           é sempre o mesmo tamanho não importa a largura da tabela. Tirei
           1 ponto do Cliente (7%→6%, "DAFLA" é curto, tinha folga) pra abrir
           espaço sem desbalancear Data/Valor/Status de novo. */
        .tabela-base-mestre .col-check { width: 32px; text-align: center; }
        .tabela-base-mestre td.col-check { vertical-align: middle; }
        .tabela-base-mestre .col-cliente { width: 6%; }
        .tabela-base-mestre .col-orgao { width: 15%; }
        .tabela-base-mestre .col-objeto { width: 30%; }
        .tabela-base-mestre .col-data { width: 10%; white-space: nowrap; }
        .tabela-base-mestre .col-valor { width: 13%; white-space: nowrap; }
        .tabela-base-mestre .col-status { width: 15%; white-space: nowrap; }
        /* Ação de linha virou 1 ícone só (era grid de 2-3 botões) — coluna
           bem mais estreita, espaço extra foi pro Objeto acima. Padding
           lateral reduzido só nessa célula (a tabela usa 15px por padrão)
           pra caber o botão de 30px numa coluna ainda mais estreita —
           pedido do usuário: "diminuir um pouco a coluna de ação, já que
           só tem o ícone". */
        .tabela-base-mestre .col-acoes { width: 46px; text-align: right; }
        .tabela-base-mestre td.acoes-cell { padding-left: 8px; padding-right: 8px; }

        /* Tabela de Atestados (2026-07-13, reformulação pedida pelo usuário:
           "organizar as linhas e colunas... pode quebrar os textos e mostrar
           tudo, só não deixe embolar uma na outra"). Ao contrário da
           .celula-1-linha usada antes (corta com "..."), aqui o texto
           QUEBRA em várias linhas — cada coluna tem largura própria
           (soma 100%, table-layout:fixed) e word-break evita que uma
           palavra comprida estoure a célula. A linha inteira é clicável
           (.linha-clicavel, já definida acima) — sem coluna de Ações. */
        .tabela-atestados { table-layout: fixed; min-width: 900px; }
        .tabela-atestados td { vertical-align: top; word-break: break-word; white-space: normal; }
        .tabela-atestados .col-atestado { width: 26%; }
        .tabela-atestados .col-emissora { width: 15%; }
        .tabela-atestados .col-classificacao { width: 16%; }
        .tabela-atestados .col-engenheiro { width: 16%; }
        .tabela-atestados .col-objeto { width: 27%; }
        /* .status-badge é white-space:nowrap por padrão (bom numa coluna
           larga) — mas "Operacional + Profissional" não cabe nos 16% da
           coluna de Classificação aqui, e nowrap faz o texto vazar por
           cima da coluna vizinha (Engenheiro), exatamente o "embolar"
           que o usuário pediu pra evitar. Deixa quebrar em 2 linhas só
           nesta tabela. */
        .tabela-atestados .status-badge { white-space: normal; text-align: center; }
        /* Nota abaixo do badge de status (ex: "Aguardando resultado") — bloco
           próprio com respiro, em vez de <br><small> colado no badge. */
        .status-nota { display: block; white-space: nowrap; font-size: 9.5px; font-weight: 600; margin-top: 12px; line-height: 1.3; letter-spacing: 0.01em; }

        /* Badges com ponto colorido à esquerda (via ::before) — leitura
           mais rápida que só o fundo pastel, e visual de produto atual. */
        .status-badge { padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; }
        .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
        /* Balão de observação (Base Mestre + Pipeline, pedido do usuário
           2026-07-22: "deve ter ícone... e quando eu passar o mouse em cima,
           abrir balão com o texto") — troca o tooltip nativo do navegador
           (lento pra aparecer, sem estilo) por um balão de verdade, sempre
           visível de relance e sem atraso. */
        .obs-tooltip-wrap { position: relative; display: inline-flex; vertical-align: -3px; }
        .obs-tooltip-wrap .obs-tooltip-bubble {
            position: absolute; bottom: calc(100% + 9px); left: 50%;
            transform: translateX(-50%) translateY(4px);
            background: var(--texto); color:var(--sobre-marca); font-size: 12px; font-weight: 400;
            line-height: 1.45; padding: 8px 11px; border-radius: 8px;
            white-space: normal; width: max-content; max-width: 280px;
            box-shadow: 0 8px 20px rgba(0,0,0,.2);
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: opacity .15s ease, transform .15s ease;
            z-index: 60; text-align: left;
        }
        .obs-tooltip-wrap .obs-tooltip-bubble::after {
            content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
            border: 6px solid transparent; border-top-color: var(--texto);
        }
        .obs-tooltip-wrap:hover .obs-tooltip-bubble,
        .obs-tooltip-wrap:focus .obs-tooltip-bubble,
        .obs-tooltip-wrap:focus-within .obs-tooltip-bubble {
            opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
        }
        .status-andamento { background: #fff8e6; color: #955f0c; border-color: #f1e0b0; }
        /* Equivalência discutível: âmbar com borda tracejada (mesma convenção de
           .orcmem-chip.num e .plan-chip.falta), pra não confundir com "Parcial". */
        .status-badge.status-badge--discutivel { background: #fff8e6; color: #955f0c; border: 1px dashed #c98a1a; }
        /* Linha firme: selo neutro e discreto, só pra alinhar a coluna. */
        .status-badge.status-badge--firme { background: transparent; color: var(--texto-claro); border: 1px solid var(--borda); }
        .status-ganha { background: #eafaf0; color:var(--st-ok); border-color: #bfe8cf; }
        .status-analise { background: #eef4ff; color: #1d4ed8; border-color: #c9dbf8; }
        .status-aguardando { background: #eaf0ff; color: #1e40af; border-color: #c3d2f5; }
        .status-perdemos { background: #fef1f2; color: #b42334; border-color: #f5c6cc; }
        .status-desistimos { background: #f1f3f5; color: #5b6472; border-color: #dde1e7; }
        .status-revogada { background: #f5effd; color: #6d3bbf; border-color: #e0d0f5; }

        /* Botões: texto normal (não mais CAIXA ALTA — uppercase em botão é um
           dos sinais mais claros de "software corporativo antigo"; produto de
           tecnologia moderno usa texto normal, peso médio) + canto um pouco
           mais arredondado (8px em vez de 4px, mais "macio"/atual) + transição
           só nas propriedades que mudam (mais leve que "all"). Aplica pra TODO
           botão do app (.btn é usado em todo lugar) — testado depois em
           Licitações e Financeiro, desktop/mobile, pra não quebrar nada. */
        .btn { padding: 9px 16px; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13px; letter-spacing: 0.01em; transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
        .btn:active { transform: scale(0.97); }
        .btn-primary { background: var(--marca-fundo); color: var(--sobre-marca); box-shadow: var(--sombra-1); }
        .btn-primary:hover { background: var(--bordao-claro); }
        .btn-secondary { background: var(--branco); color: var(--texto); border: 1px solid var(--borda); box-shadow: var(--sombra-1); }
        .btn-secondary:hover { background: var(--cinza-claro); border-color: #d3d7df; }
        /* Contorno na cor de marca — destaque intermediário entre o primário
           sólido e o secundário neutro. Criado pro "Buscar Editais (PNCP)"
           na Base Mestre (pedido: destacado, mas sem competir com "Nova
           Licitação"). */
        .btn-outline { background: var(--branco); color: var(--primaria); border: 1px solid #e3b6bd; box-shadow: var(--sombra-1); }
        .btn-outline:hover { background: var(--primaria-suave); border-color: var(--primaria); }
        .btn-danger { background:var(--st-critico); color: var(--sobre-marca); }
        .btn-danger:hover { background: #b02a37; }
        /* Botão pequeno é BOTÃO, não rótulo: --txt-rotulo (10px) só vale em
   caixa-alta espaçada, e este texto é uma palavra normal. */
        .btn-sm { padding: 5px 10px; font-size: var(--txt-densa); border-radius: 8px; }

        /* Botão de ação assistida por IA — pedido do usuário: "deixe um botão
           moderno, informando que é através de IA a análise, isso valoriza o
           sistema". Gradiente marca+roxo (associação comum a "IA" em produtos
           modernos) com um brilho passando devagar — chama atenção sem virar
           gif piscando. Reaproveitado em todo botão que dispara uma chamada de
           IA (Anexar Atestado, Extrair pendentes/linhas, Analisar atestados). */
        /* O desenho do botão de IA agora é UM componente (.cm-btn--ia, bloco
           ONDA 0 no fim do arquivo); .btn-ia e .pw-btn--ia apontam para ele.
           Saiu o brilho infinito de 3,2 s: repouso estático. O keyframe abaixo
           continua porque o selo "Gestão inteligente com IA" do login o usa. */
        @keyframes btn-ia-brilho { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
        .badge-ia { display: inline-flex; align-items: center; background: rgba(255,255,255,.22); color: var(--sobre-marca); font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }

        /* "Pergunte ao Edital" (2026-07-16) — resumo + chat por IA sobre o
           edital anexado, aba nova no painel de detalhe da licitação. */
        .resumo-edital-texto { font-size: 13px; line-height: 1.6; background: var(--fundo-suave,#f7f5f2); border: 1px solid var(--borda,#e5e0d8); border-radius: 8px; padding: 14px 16px; }
        .chat-edital-mensagens { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding: 10px; border: 1px solid var(--borda,#e5e0d8); border-radius: 8px; background: var(--branco,#fff); margin-top: 6px; }
        .chat-edital-msg { font-size: 13px; line-height: 1.5; padding: 8px 10px; border-radius: 8px; max-width: 92%; }
        .chat-edital-msg-usuario { align-self: flex-end; background: var(--primaria); color: var(--sobre-marca); }
        .chat-edital-msg-ia { align-self: flex-start; background: var(--fundo-suave,#f0ecff); }
        .chat-edital-input-row { display: flex; gap: 8px; margin-top: 10px; }
        .chat-edital-input-row input { flex: 1; padding: 8px 10px; border: 1px solid var(--borda,#ccc); border-radius: 6px; font-size: 13px; }

        /* Kanban do Pipeline (2026-07-16) — visualização arrastável por
           status, alternativa à lista já existente (toggle, não substitui). */
        .pipeline-modo-toggle .btn.active { background: var(--primaria); color: var(--sobre-marca); border-color: var(--primaria); }
        .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
        .kanban-coluna { flex: 0 0 240px; background: var(--sup-2); border-radius: 10px; display: flex; flex-direction: column; max-height: 70vh; transition: background-color .15s; }
        .kanban-coluna.kanban-coluna-hover { background: var(--sup-3); box-shadow: var(--anel-foco); }
        .kanban-coluna-head { font-weight: 700; font-size: 12.5px; padding: 10px 12px; border-bottom: 1px solid var(--borda); border-radius: 10px 10px 0 0; background: var(--sup-1); display: flex; justify-content: space-between; align-items: center; }
        .kanban-coluna-contador { font-weight: 600; color: var(--texto-claro); font-size: 11px; background: var(--sup-3); border-radius: 999px; padding: 1px 7px; }
        .kanban-coluna-corpo { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
        .kanban-card { background: var(--sup-1); border: 1px solid var(--borda); border-radius: 8px; padding: 9px 10px; cursor: grab; box-shadow: var(--sombra-1); transition: box-shadow .15s; }
        .kanban-card:hover { box-shadow: var(--sombra-2); }
        .kanban-card:active { cursor: grabbing; }
        .kanban-card-titulo { font-weight: 700; font-size: 12.5px; }
        .kanban-card-processo { font-size: 11.5px; color: var(--texto-claro); margin-top: 1px; }
        .kanban-card-meta { font-size: 11px; color: var(--texto-claro); margin-top: 3px; }
.kanban-card-valor{ font-size: 12px; font-weight: 600; margin-top: 4px; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
        .kanban-card-data { font-size: 10.5px; color: var(--texto-claro); margin-top: 2px; }
        @media (max-width: 900px) { .kanban-coluna { flex-basis: 200px; } }

        /* Catálogo (2026-07-16) — checkboxes de Fonte/Tipo no Listar, geradas
           via JS a partir de FONTES_PRECO/CATALOGO_TIPOS (catalogoMontarFiltros). */
        .catalogo-filtro-checkboxes { display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: 620px; padding: 8px 10px; border: 1px solid var(--borda,#e6e8ee); border-radius: 8px; background:var(--sup-1); }
        .catalogo-filtro-checkboxes label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; white-space: nowrap; }

        /* Cartões de escolha do assistente "Anexar Atestado" (Manual/IA,
           depois Aparelho/Nuvem) — pedido do usuário: "botão de importação
           de atestados pode ser manual ou com IA e dentro de cada uma das
           opções, ter a opção de buscar o arquivo no próprio aparelho ou
           na nuvem". Dois cartões grandes lado a lado, mais fácil de
           acertar no toque (celular/tablet) que um <select>. */
        .btn-escolha-wizard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; width: 100%; padding: 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--branco); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; font-family: inherit; }
        .btn-escolha-wizard:hover:not(:disabled) { border-color: var(--primaria); box-shadow: var(--sombra-1); }
        .btn-escolha-wizard:disabled { cursor: not-allowed; opacity: .5; }
        .btn-escolha-wizard .ico { color: var(--primaria); width: 22px; height: 22px; margin-bottom: 4px; }
        .btn-escolha-wizard strong { font-size: 14px; color: var(--texto); }
        .btn-escolha-wizard small { font-size: 12px; color: var(--texto-claro); font-weight: 400; line-height: 1.4; }

        .table-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--borda); }
        .table-toolbar input[type="text"], .table-toolbar select { padding: 8px 12px; border: 1px solid var(--borda); border-radius: 10px; font-size: 13px; background-color: var(--branco); transition: border-color 0.15s ease; }
        .table-toolbar input[type="text"]:focus, .table-toolbar select:focus { border-color: var(--primaria); }
        .table-toolbar input[type="text"] { flex: 1; min-width: 180px; }
        .table-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        /* NÃO usar display:flex aqui — um <td> com display especificado (flex,
           block etc.) deixa de gerar uma caixa de célula de tabela normal e
           some da participação no cálculo de altura da linha (table-cell),
           então em linhas onde outra coluna quebra em 2 linhas (ex: Descrição
           longa), a célula de Ações fica "curta" (só a altura do conteúdo)
           enquanto as colunas vizinhas (ex: Status) esticam pra altura cheia
           da linha — resultado: badges e botões desalinhados bem no encontro
           dessas duas colunas. vertical-align:middle + espaçamento via margin
           nos filhos preserva o comportamento de table-cell normal.
        */
        /* white-space:nowrap (removido) forçava os botões/ícones (até 4 na
           Base Mestre: 📁📎✏️🗑️) a ficar numa linha só, mesmo sem espaço —
           em telas de tablet a coluna de Ações é estreita demais pra isso e
           os ícones vazavam da célula, desalinhados (bug real do usuário).
           A 1ª tentativa (só tirar o nowrap e deixar os botões quebrarem
           linha como texto normal) resolveu o vazamento, mas o usuário
           reportou que ainda ficavam "desalinhados" — sem grid, o ponto
           de quebra depende só de quanto texto/botão cabe, então as 2
           colunas de ícones não ficavam com bordas verticais alinhadas
           entre si nem entre linhas diferentes da tabela.
           Fix: o <td class="acoes-cell"> continua SEM display próprio
           (preserva a participação normal na altura da linha — comentário
           acima). Quem vira grid é o `<div class="acoes-grid">` DE DENTRO
           dele (a lista de botões precisou ganhar esse wrapper no HTML,
           em js/licitacoes.js e js/financeiro.js) — 2 colunas fixas,
           justify-content:space-between encosta a coluna 1 na borda
           esquerda e a coluna 2 na direita da célula (pedido: "alinhados
           com o início e fim da coluna"), gap dá o mesmo espaçamento
           horizontal E vertical entre os ícones. */
        .acoes-cell { vertical-align: middle; }
        .acoes-grid { display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; gap: 6px 10px; }
        /* Fallback pros .acoes-cell que NÃO usam o wrapper acima (ex: linhas
           da Conciliação Bancária, com botões de texto tipo "⚡ Usar
           sugestão" — grid de 2 colunas alinhadas não faz sentido pra
           botão de largura variável como esses). Sem isso os botões
           ficariam colados um no outro. */
        .acoes-cell > button, .acoes-cell > a { margin: 0 6px 4px 0; }
        .acoes-cell > button:last-child, .acoes-cell > a:last-child { margin-right: 0; }

        /* Ações de linha consolidadas num único ícone "⋯" (pedido do usuário:
           "não precisa estar fora, pode ficar dentro de um botão único, com
           opções dentro" — Base Mestre e Lançamentos). Reaproveita o mesmo
           mecanismo de .filtro-multi/.filtro-multi-painel já usado no menu
           "⋯ Opções" da Base Mestre — só um botão redondo compacto no lugar
           do botão de texto, e o painel abre alinhado à direita (perto da
           borda direita da tabela, abrir pra esquerda evita vazar da tela). */
        .btn-acoes-linha { width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--branco); border: 1px solid var(--borda); color: var(--texto-claro); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
        .btn-acoes-linha:hover { background: var(--cinza-claro); color: var(--texto); }
        .filtro-multi-painel.alinhar-direita { left: auto; right: 0; }
        /* Abre pra cima quando toggleAcoesLinha() (shared.js) detecta que não
           cabe pra baixo (linha perto do fim da tabela — ver comentário lá). */
        .filtro-multi-painel.abrir-cima { top: auto; bottom: calc(100% + 6px); }
        .menu-item-acao.perigo { color:var(--st-critico); }
        .menu-item-acao.perigo:hover { background: #fef2f3; }
        a.menu-item-acao { display: block; text-decoration: none; }

        /* Botão de expandir/recolher detalhamento na DRE (por categoria, e
           dentro de cada categoria, por lançamento individual) */
        /* Linha do Gantt sob o mouse (2026-08-26): tinta translúcida via
           background-image com !important porque as linhas carregam
           background inline (shorthand) que zeraria um background-color de
           classe; o gradient por cima preserva a cor de fundo original. */
        .gantt-linha-hover { background-image: linear-gradient(rgba(31, 42, 60, 0.09), rgba(31, 42, 60, 0.09)) !important; }
        /* Célula ativa da navegação por setas (2026-08-26) — contorno interno
           pra não mexer no layout; outline não participa do box model. */
        .gantt-cel-sel { outline: 2px solid var(--marca); outline-offset: -2px; border-radius: 2px; }
        /* DRE compacto (2026-08-26): as 14 colunas (rótulo + 12 meses + YTD)
           só cabiam com rolagem lateral. Fonte/padding reduzidos + números
           tabulares fazem o ano inteiro caber na largura da página; id na
           frente pra vencer o padding genérico da .licitacoes-table em
           qualquer media query. */
        #tabelaDRE { width: 100%; }
#tabelaDRE th, #tabelaDRE td{ font-size: 10.5px; padding: 6px 5px; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
        #tabelaDRE th:first-child { min-width: 120px; }
        #tabelaDRE td:first-child { white-space: normal; }
        .btn-toggle-dre { background: none; border: none; cursor: pointer; font-size: 10px; color: var(--bordao); margin-right: 6px; padding: 2px 4px; }
        .btn-toggle-dre:hover { color: var(--ouro); }
        .linha-dre-clicavel { cursor: pointer; }
        .linha-dre-clicavel:hover { background: var(--cinza-claro); }

        /* Filtro de múltipla seleção (status) — botão que abre um painel com checkboxes */
        .filtro-multi { position: relative; display: inline-block; }
        .filtro-multi-btn { padding: 8px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--branco); font-size: 13px; cursor: pointer; white-space: nowrap; color: var(--texto); box-shadow: var(--sombra-1); }
        .filtro-multi-btn:hover { background: var(--cinza-claro); border-color: #d3d7df; }
        .filtro-multi-painel { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-2); padding: 8px; z-index: 50; min-width: 195px; }
        .filtro-multi-painel.aberto { display: block; }
        /* .table-container tem overflow-y:hidden (rolagem horizontal da
           tabela) — isso CORTAVA qualquer dropdown .filtro-multi-painel
           aberto dentro dele quando a tabela tinha poucas linhas (relato do
           usuário 2026-08-25: lista de Status cortada ao filtrar). Enquanto
           um painel estiver aberto, o clipping é suspenso; fecha o painel,
           volta a rolagem normal. :has() já é usado em outros pontos. */
        .table-container:has(.filtro-multi-painel.aberto) { overflow: visible; }

        /* Resumo da aba Lançamentos (Efetivado | Saldo em conta | Provisionado):
           3 colunas de largura igual, separadas por linha vertical, cada uma
           com título + mini-indicadores (rótulo em cima, valor embaixo, número
           tabular). Redesenho de 2026-08-25 — a versão anterior (blocos flex
           com margin-left:auto) desalinhava e jogava o Provisionado pra
           segunda linha. Em tela estreita, as colunas empilham. */
        .resumo-lanc-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
        .resumo-lanc-card { padding: 14px 24px; min-width: 0; }
        .resumo-lanc-card + .resumo-lanc-card { border-left: 1px solid var(--borda); }
        .resumo-lanc-titulo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--bordao); margin-bottom: 10px; white-space: nowrap; }
        .resumo-lanc-titulo .qtd { font-weight: 400; font-size: 12px; color: var(--texto-claro); }
        .resumo-lanc-metricas { display: flex; gap: 28px; flex-wrap: wrap; }
        .resumo-lanc-metrica .rotulo { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--texto-claro); margin-bottom: 2px; white-space: nowrap; }
.resumo-lanc-metrica .valor{ font-size: 14.5px; font-weight: 700; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
        .resumo-lanc-vazio { color: var(--texto-claro); margin: 0; padding: 15px 25px; }
        @media (max-width: 1150px) {
            .resumo-lanc-grid { grid-template-columns: 1fr; }
            .resumo-lanc-card + .resumo-lanc-card { border-left: 0; border-top: 1px solid var(--borda); }
        }
        .filtro-multi-painel label { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 13px; cursor: pointer; border-radius: 4px; }
        .filtro-multi-painel label:hover { background: var(--cinza-claro); }
        .filtro-multi-painel input[type="checkbox"] { cursor: pointer; }
        .filtro-multi-acoes { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cinza); }
        .filtro-multi-acoes a { font-size: 11px; color: var(--bordao-claro); cursor: pointer; text-decoration: underline; }
        /* Itens de AÇÃO dentro de um .filtro-multi-painel (reaproveitado como
           menu de opções, não só filtro de checkbox) — "⋯ Opções" da Base
           Mestre. Pedido do usuário: consolidar os botões soltos da toolbar
           num menu só. */
        .menu-item-acao { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 8px; font-size: 13px; cursor: pointer; border-radius: 4px; color: var(--texto); font-family: inherit; }
        .menu-item-acao:hover { background: var(--cinza-claro); }
        /* Barra "N selecionada(s) — Excluir/Cancelar", aparece só quando
           existe pelo menos 1 checkbox marcado na Base Mestre. */
        .barra-selecao { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; background: var(--primaria-suave); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); font-size: 13px; font-weight: 600; color: var(--primaria); }

        .pipeline-item { background: var(--branco); border-radius: 12px; padding: 16px 22px; margin-bottom: 10px; border: 1px solid var(--borda); box-shadow: var(--sombra-1); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; transition: box-shadow 0.2s ease; }
        .pipeline-item:hover { box-shadow: var(--sombra-2); }
        .pipeline-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
        .pipeline-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .pipeline-titulo strong { color: var(--ink); font-size: 14.5px; }
        .pipeline-meta { font-size: 12px; color: var(--texto-claro); }
.pipeline-valor{ font-size: 14px; font-weight: 700; color: var(--ink); font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
        .pipeline-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
        .pipeline-dias { font-weight: 700; font-size: 11px; padding: 6px 14px; border-radius: 20px; white-space: nowrap; text-align: center; }
        .pipeline-dias.aguardando { background: #dbeafe; color: #1e40af; }
        .dias-urgente { background: #f8d7da; color: #721c24; }
        .dias-atencao { background: #fff3cd; color: #856404; }
        .dias-ok { background: #d4edda; color:var(--st-ok); }

        .form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; font-family: inherit; resize: vertical; font-size: 13.5px; transition: border-color 0.15s ease; }
        .form-group textarea:focus { border-color: var(--primaria); }
        .form-section-title { font-size: 11px; font-weight: 700; color: var(--primaria); text-transform: uppercase; letter-spacing: 0.7px; margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--borda); }
        .form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

        /* Passo numerado (2026-07-27) — pipeline "Buscar → Baixar documentos →
           Processar" da Busca PNCP, pra deixar claro que é 1 sequência, não
           botões soltos e independentes. Número + linha vertical conectando
           os passos (menos no último). */
        .pncp-passo { display: flex; gap: 14px; position: relative; padding-bottom: 22px; }
        .pncp-passo:last-child { padding-bottom: 0; }
        .pncp-passo:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 2px; background: var(--borda); }
.pncp-passo-num{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--primaria-suave); color: var(--primaria); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; z-index: 1; }
        .pncp-passo-corpo { flex: 1; min-width: 0; }
        .pncp-passo-titulo { font-weight: 700; font-size: 13.5px; color: var(--texto); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
        .empty-row td { text-align: center; color: var(--texto-claro); padding: 30px; }

        /* Modal Overlay */
        .modal { display: none; position: fixed; z-index: var(--z-janela); left: 0; top: 0; width: 100%; height: 100%; background: var(--escrim); align-items: center; justify-content: center;}
        .modal.active { display: flex; }
        .modal-content { background: var(--branco); padding: 30px; border-radius: 8px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; }

        /* ===================================================================
           PAINEL LATERAL — substitui o modal centralizado antigo. Era só pra
           #modalNovaLicitacao (a princípio), agora é a classe .modal-lateral
           reaproveitável — qualquer modal novo que precisar desse mesmo
           padrão (a Busca PNCP virou o 2º caso, ver comentário na aba PNCP)
           só precisa da classe, não redeclara nada. Os outros modais do
           sistema continuam com .modal/.modal-content normal (centralizado),
           sem a classe. Pedido original do usuário: clicar na LINHA da Base
           Mestre abre o painel da licitação (não mais precisa clicar em
           "editar"), com cabeçalho fixo no topo enquanto o resto rola —
           padrão de app moderno (Notion/Linear/Asana), em vez de "lista +
           ícones + modal solto". Desliza da direita, ocupa a maior parte da
           tela, fundo escurecido continua dando pra fechar clicando fora
           (fecharModalAoClicarFora já existente não precisou mudar, só
           verifica event.target===currentTarget).
           =================================================================== */
        /* CENTRALIZADO (pedido do usuário 2026-07-11: "quando abrimos
           qualquer aba, ela está abrindo do lado direito da tela...
           centralize") — o painel deixou de deslizar da direita e virou um
           diálogo grande centrado, com entrada suave de baixo pra cima.
           A estrutura interna (cabeçalho fixo + corpo rolável + abas)
           continua a mesma. */
        .modal-lateral { align-items: center; justify-content: center; padding: 24px; }
        .modal-lateral .modal-content {
            display: flex; flex-direction: column; padding: 0;
            width: min(860px, 96vw); max-width: 860px; height: min(88vh, 900px); max-height: 92vh; margin: 0;
            border-radius: 16px;
            transform: translateY(14px) scale(0.985); opacity: 0;
            transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
            box-shadow: 0 24px 64px rgba(16, 21, 29, 0.28);
        }
        .modal-lateral.active .modal-content { transform: translateY(0) scale(1); opacity: 1; }
        /* Cabeçalho fica FORA do fluxo que rola (flex-shrink:0, irmão da
           área de rolagem). Superfície CLARA com borda (era o degradê
           bordô) — o título identifica a licitação (processo/órgão/data,
           preenchido pelo JS), as ações ficam na cor de marca. */
        .painel-header-fixo { flex-shrink: 0; background: var(--branco); border-radius: 16px 16px 0 0; border-bottom: 1px solid var(--borda); }
        .painel-header-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 28px 12px; }
        .painel-header-fixo h2 { color: var(--ink); margin-bottom: 2px; font-size: 18px; letter-spacing: -0.2px; }
        .painel-subtitulo { font-size: 12.5px; color: var(--texto-claro); margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
        .painel-subtitulo strong { color: var(--texto); font-weight: 600; }
        .painel-link-pncp { font-size: 12px; }
        .painel-link-pncp a { color: var(--primaria); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
        .painel-link-pncp a:hover { text-decoration: underline; }
        .painel-corpo { flex: 1; overflow-y: auto; padding: 22px 28px 28px; background: var(--branco); border-radius: 0 0 16px 16px; }
        .btn-fechar-painel { background: var(--cinza-claro); border: 1px solid var(--borda); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--texto-claro); flex-shrink: 0; transition: background 0.2s, color 0.2s; }
        .btn-fechar-painel:hover { background: var(--cinza); color: var(--texto); }
        /* Salvar/Cancelar no cabeçalho fixo (pedido do usuário — antes ficavam
           no fim do formulário, precisava rolar tudo pra salvar). Salvar em
           dourado sólido (o acento de marca, não a cor "pesada" bordô de
           novo) — se destaca bem em cima do fundo bordô do cabeçalho.
           Cancelar fica discreto (contorno translúcido), não compete com o
           Salvar. */
        .painel-header-acoes { display: flex; align-items: center; gap: 8px; }
        .btn-painel-salvar { background: var(--primaria); color: var(--sobre-marca); border: none; padding: 8px 18px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; white-space: nowrap; box-shadow: var(--sombra-1); }
        .btn-painel-salvar:hover { background: var(--bordao-claro); }
        .btn-painel-salvar:active { transform: scale(0.97); }
        .btn-painel-cancelar { background: var(--branco); color: var(--texto); border: 1px solid var(--borda); padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; transition: background 0.15s ease; white-space: nowrap; }
        .btn-painel-cancelar:hover { background: var(--cinza-claro); }
        /* Abas internas do painel (Dados / Documentos) — reduz o scroll
           longo de um formulário + 3 blocos de documento tudo empilhado
           num só lugar; pedido geral do usuário de layout "mais limpo".
           justify-content:center — o usuário achou ruim as abas grudadas
           na esquerda, centralizar fica mais equilibrado num painel largo. */
        .painel-abas { display: flex; justify-content: center; gap: 4px; padding: 0 24px; }
        .painel-aba-btn { background: none; border: none; color: var(--texto-claro); font-weight: 600; font-size: 13px; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; }
        .painel-aba-btn:hover { color: var(--texto); }
        .painel-aba-btn.active { color: var(--primaria); border-bottom-color: var(--primaria); }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--texto); }
        .form-group input:not([type="checkbox"]), .form-group select { width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; font-size: 13.5px; background-color: var(--branco); transition: border-color 0.15s ease; }
        .form-group input:not([type="checkbox"]):focus, .form-group select:focus { border-color: var(--primaria); }
        /* Campos de valor em R$ — máscara viva de milhar (js/shared.js,
           mascaraMoedaBR) + números tabulares alinhados à direita. */
.input-moeda{ text-align: right; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
        /* Sem essa exclusão, o checkbox virava uma caixa esticada (width:100%
           + padding:10px + borda) em vez do quadradinho normal — foi assim
           que os checkboxes de "Seções a incluir" (Relatórios) ficaram
           desalinhados/deformados. Rótulo de checkbox mostra o quadradinho
           alinhado à primeira linha do texto mesmo quando o texto quebra
           linha (align-items:flex-start + o input um pouco descido). */
        .form-group label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; cursor: pointer; }
        .form-group input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; accent-color: var(--bordao); cursor: pointer; }

        /* Login / apresentação da empresa — 2026-07-24, 4ª revisão. Feedback
           direto: a versão clara "não tem tecnologia", lê como fraca/rosada,
           e "a primeira opção (escura) era menos pior". Volta pro fundo
           ESCURO, mas corrigindo os erros específicos da 1ª tentativa: sem
           pontinhos de grade, sem elemento decorativo passando por cima do
           texto, gradiente bordô→roxo (não rosa suave) — o MESMO gradiente
           que os botões de IA reais do painel já usam (.btn-ia:
           var(--primaria)→#6d28d9), pra ligar visualmente "fundo tech" com
           "produto com IA de verdade", não uma cor escura genérica. O
           cartão de login e a prévia do painel continuam BRANCOS (claros de
           propósito — contraste forte contra o fundo escuro = "spotlight",
           e o painel real é claro, então a prévia continua honesta). */
        .login-overlay {
            position: fixed; inset: 0; z-index: 1000;
            display: flex; justify-content: center;
            overflow-y: auto; overflow-x: hidden;
            background:
                radial-gradient(ellipse 820px 640px at 82% 20%, rgba(109,40,217,.35), transparent 60%),
                radial-gradient(ellipse 760px 600px at 12% 88%, rgba(157,31,49,.4), transparent 58%),
                linear-gradient(150deg, #12101a 0%, #1a1220 45%, #241422 100%);
        }
        .login-overlay.hidden { display: none; }

        /* margin:auto (não align-items:center) centraliza verticalmente quando
           cabe e "recua" pro topo com segurança quando não cabe — evita o bug
           clássico de flexbox+overflow que cortava o topo do conteúdo. */
        .login-shell {
            position: relative; z-index: 1; width: 100%; max-width: 1160px;
            margin: auto 0;
            padding: 12px 40px; display: grid; grid-template-columns: 1.1fr 400px; gap: 80px; align-items: center;
        }

        /* Coluna institucional (hero) — texto claro sobre o fundo escuro */
        .login-hero { color:var(--sobre-marca); }
        .login-hero-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
        /* Círculo (não quadrado) — a logo em si já é um anel circular; um
           container quadrado "briga" com essa forma e faz a marca parecer
           torta. Circular = mesma forma do .login-logo-ring do cartão. */
        .login-hero-logo-badge {
            flex-shrink: 0; width: 62px; height: 62px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background:var(--sup-1); box-shadow: 0 6px 18px rgba(0,0,0,.35);
        }
        .login-hero-logo-badge img { width: 60px; height: 60px; object-fit: contain; }
        .login-hero-brand strong { display: block; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: .2px; color:var(--sobre-marca); }
        .login-hero-brand > div span { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 2px; }
        /* Selo "Gestão inteligente com IA" — reaproveita o MESMO gradiente e
           brilho animado dos botões de IA reais do painel (.btn-ia /
           @keyframes btn-ia-brilho em painel.css), pra destacar de verdade e
           ligar visualmente a um recurso real do produto. */
        .login-hero-eyebrow {
            display: inline-flex; align-items: center; gap: 7px;
            font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
            color:var(--sobre-marca); margin-bottom: 16px;
            padding: 7px 14px 7px 12px; border-radius: 999px;
            background:linear-gradient(135deg, var(--bordao-claro) 0%, var(--acao) 100%);
            box-shadow: 0 6px 18px -4px rgba(109,40,217,.55);
            position: relative; overflow: hidden;
        }
        .login-hero-eyebrow::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
            transform: translateX(-100%); animation: btn-ia-brilho 3.2s ease-in-out infinite;
        }
        .login-hero-eyebrow .ico { width: 13px; height: 13px; position: relative; z-index: 1; }
        .login-hero-title { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(30px, 3vw, 40px); font-weight: 700; line-height: 1.18; letter-spacing: -.6px; margin-bottom: 18px; max-width: 580px; color:var(--sobre-marca); }
        .login-hero-title em { font-style: normal; color: #d896a8; }
        .login-hero-sub { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.65; max-width: 460px; margin-bottom: 0; }
        .login-features { list-style: none; margin: 28px 0 0; max-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
        .login-features li { padding-left: 16px; border-left: 2px solid rgba(255,255,255,.16); }
        .login-features strong { display: block; font-size: 13px; font-weight: 600; color:var(--sobre-marca); margin-bottom: 4px; letter-spacing: .1px; }
        .login-features span { display: block; font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.55; }

        /* Prévia do painel — janela BRANCA com bordas nítidas (sem esmaecer)
           flutuando sobre o fundo escuro, tipo "spotlight" no produto de
           verdade (o painel real É claro, então isso continua honesto).
           Ícones e cores dos KPIs reaproveitam as classes reais do
           dashboard (.kpi-card.blue/green/yellow/red em painel.css). */
        .login-mockup {
            margin-top: 14px; max-width: 600px;
            background:var(--sup-1); border: 1px solid rgba(0,0,0,.06);
            border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
        }
        .login-mockup-bar { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--cinza-claro); border-bottom: 1px solid var(--borda); }
        .login-mockup-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cinza); }
        .login-mockup-url { margin-left: 8px; font-size: 10.5px; color: var(--texto-claro); font-family: var(--fonte-num); }
        .login-mockup-body { padding: 13px 15px; }
        .login-mockup-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 9px; }
        .login-mockup-kpi { background: var(--branco); border: 1px solid var(--borda); border-left: 3px solid var(--tinta-1)); border-radius: 9px; padding: 10px 11px; }
        .login-mockup-kpi .ico { width: 12px; height: 12px; color: var(--tinta-1)); margin-bottom: 5px; }
        .login-mockup-kpi span { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--texto-claro); margin-bottom: 5px; font-weight: 600; line-height: 1.3; min-height: 22px; }
        /* Valor e selo de tendência EMPILHADOS (não lado a lado) — evita o
           número quebrar no meio ("R$" numa linha, "2,8M" na outra) quando o
           selo "▲15%" não cabe ao lado num tile estreito. */
.login-mockup-kpi strong{ display: block; font-size: 16.5px; color: var(--ink); font-weight: 700; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
        .login-mockup-trend { display: inline-block; font-style: normal; font-size: 9.5px; font-weight: 700; color: #1a7a3d; background: #e8f5ec; padding: 1px 6px; border-radius: 5px; margin-top: 5px; }
        .login-skeleton { display: block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--cinza) 25%, var(--cinza-claro) 50%, var(--cinza) 75%); background-size: 200% 100%; animation: login-skeleton-shimmer 2.2s ease-in-out infinite; }
        @keyframes login-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        .login-mockup-tabela { display: flex; flex-direction: column; gap: 7px; padding: 7px 4px; margin-bottom: 9px; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
        .login-mockup-linha { display: flex; align-items: center; gap: 12px; }
        .login-mockup-linha .login-skeleton { flex-shrink: 0; height: 7px; }
        .login-mockup-status { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; }
        .login-mockup-status-verde { background: #22c55e; }
        .login-mockup-status-amarelo { background: #eab308; }
        .login-mockup-legenda-status { display: flex; gap: 14px; padding-top: 2px; }
        .login-mockup-legenda-status span { display: flex; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 600; color: var(--texto-claro); text-transform: uppercase; letter-spacing: .2px; }
        .login-mockup-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
        .login-mockup-chart-titulo { font-size: 10.5px; font-weight: 700; color: var(--ink); }
        .login-mockup-chart-legenda { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--texto-claro); font-weight: 600; }
        .login-mockup-chart-legenda i { width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(180deg, var(--bordao-claro), var(--bordao)); display: inline-block; }
        .login-mockup-chart { display: flex; align-items: flex-end; gap: 6px; height: 36px; padding: 0 2px; border-bottom: 1px solid var(--borda); }
        .login-mockup-bar-item { position: relative; flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--bordao-claro), var(--bordao)); opacity: .82; animation: login-mockup-grow .9s cubic-bezier(.2,.8,.2,1) both; }
        /* Destaca o mês de pico — mesmo padrão de "melhor resultado" que
           dashboards reais usam, dá mais leitura de dado de verdade ao invés
           de barras genéricas todas iguais. */
        .login-mockup-bar-pico { background: linear-gradient(180deg, #f0c869, var(--ouro)); opacity: 1; }
        .login-mockup-bar-pico em {
            position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
            font-style: normal; font-size: 7.5px; font-weight: 700; color: var(--ouro);
            white-space: nowrap; letter-spacing: .2px;
        }
        .login-mockup-chart-eixo { display: flex; gap: 6px; padding: 4px 2px 0; }
        .login-mockup-chart-eixo span { flex: 1; text-align: center; font-size: 8px; color: var(--texto-claro); font-weight: 600; }
        @media (prefers-reduced-motion: reduce) { .login-skeleton { animation: none; background: var(--cinza); } }
        @keyframes login-mockup-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
        @media (prefers-reduced-motion: reduce) { .login-mockup-bar-item { animation: none; } }

        /* Cartão de acesso — mesmo padrão visual dos cards do painel
           (.kpi-card/.chart-container: branco, borda 1px, sombra 1), pra
           parecer parte do mesmo produto em vez de um cartão "glass" à parte. */
        .login-box {
            position: relative; z-index: 1;
            background: var(--branco);
            border: 1px solid var(--borda);
            border-radius: 14px;
            padding: 34px 32px 22px;
            text-align: center;
            width: 100%;
            box-shadow: 0 32px 70px -18px rgba(0,0,0,.55);
        }
        /* Anel do logo estático (sem giro/gradiente animado — trocado de
           propósito: um anel giratório de gradiente é exatamente o clichê
           visual de "demo gerada por IA" que o usuário pediu pra evitar). */
        .login-logo-ring {
            position: relative; width: 70px; height: 70px; margin: 0 auto 16px;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            background: var(--primaria-suave);
            border: 1.5px solid rgba(157,31,49,.25);
        }
        .login-logo { width: 68px; height: 68px; object-fit: contain; }
        .login-box h1 { color: var(--ink); font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.2px; margin-bottom: 4px; }
        .login-sub { color: var(--texto-claro); font-size: 12px; font-weight: var(--peso-corpo); margin-bottom: 20px; }
        .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--cinza); border-radius: 10px; background: var(--branco); font-size: 13.5px; font-weight: 600; color: var(--texto); cursor: pointer; transition: box-shadow .2s, transform .15s, border-color .2s; }
        .btn-google:hover { box-shadow: 0 8px 22px rgba(16,21,29,.14); border-color: #d7dae2; transform: translateY(-1px); }
        .btn-google:active { transform: translateY(0); }
        .login-divisor { display: flex; align-items: center; gap: 8px; margin: 14px 0; color: var(--texto-claro); font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
        .login-divisor::before, .login-divisor::after { content: ''; flex: 1; height: 1px; background: var(--cinza); }
        .login-divisor-sutil { margin: 10px 0 8px; }

        /* Formulário de e-mail + senha (Firebase Auth real) */
        #loginSenhaForm { display: flex; flex-direction: column; gap: 8px; text-align: left; }
        .login-field { position: relative; display: flex; align-items: center; }
        .login-field-icon { position: absolute; left: 12px; width: 14px; height: 14px; color: var(--texto-claro); pointer-events: none; }
        .input-email-link.input-com-icone { padding-left: 34px; }
        #campoSenha { padding-right: 38px; }
        .login-toggle-senha { position: absolute; right: 5px; background: none; border: none; color: var(--texto-claro); cursor: pointer; padding: 5px; border-radius: 6px; display: flex; transition: background .2s, color .2s; }
        .login-toggle-senha .ico { width: 14px; height: 14px; }
        .login-toggle-senha:hover { color: var(--bordao); background: var(--primaria-suave); }
        .btn-primario-login { width: 100%; padding: 10.5px; border: none; border-radius: 10px; background: var(--bordao); color:var(--sobre-marca); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 8px 20px -6px rgba(157,31,49,.5); margin-top: 2px; }
        .btn-primario-login:hover { background: var(--bordao-claro); transform: translateY(-1px); }
        .login-link-sutil { display: block; text-align: center; font-size: 11px; color: var(--texto-claro); text-decoration: none; margin-top: 2px; }
        .login-link-sutil:hover { color: var(--bordao); text-decoration: underline; }

        .login-link-email { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--texto-claro); text-decoration: none; padding: 9px; border-radius: 9px; border: 1px dashed var(--cinza); transition: color .2s, border-color .2s, background .2s; }
        .login-link-email:hover { color: var(--bordao); border-color: var(--bordao-claro); background: var(--primaria-suave); text-decoration: none; }
        #loginEmailCampos { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
        #loginEmailCampos.hidden { display: none; }
        .input-email-link { width: 100%; padding: 10px 12px; border: 1px solid var(--cinza); border-radius: 9px; font-size: 13.5px; font-family: inherit; transition: border-color .2s, box-shadow .2s; }
        .input-email-link:focus { outline: none; border-color: var(--bordao-claro); box-shadow: var(--anel-foco); }
        .btn-secundario-login { padding: 10px; border: 1px solid var(--bordao); border-radius: 9px; background: var(--branco); color: var(--bordao); font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background .2s, color .2s, transform .15s; }
        .btn-secundario-login:hover { background: var(--bordao); color: var(--sobre-marca); transform: translateY(-1px); }
        .login-erro { color:var(--st-critico); font-size: 11.5px; margin-top: 12px; min-height: 13px; }
        .login-aviso { color: #1a7a3d; font-size: 11.5px; margin-top: 4px; min-height: 13px; }
        .login-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cinza); font-size: 10.5px; color: var(--texto-claro); letter-spacing: .1px; line-height: 1.5; }
        .hidden { display: none !important; }

        /* Telas baixas (notebook com barra de tarefas, janela não-maximizada):
           não comprime tudo pra sempre — só afina o que sobra quando a
           ALTURA real não dá, mantendo a versão normal generosa no resto. */
        @media (max-height: 800px) {
            .login-shell { padding: 20px 40px; gap: 48px; }
            .login-hero-brand { margin-bottom: 14px; }
            .login-hero-eyebrow { margin-bottom: 10px; }
            .login-hero-title { margin-bottom: 8px; }
            .login-features { margin-top: 14px; gap: 10px 24px; }
            .login-mockup { margin-top: 10px; }
            .login-mockup-body { padding: 10px 13px; }
            .login-mockup-kpis { margin-bottom: 7px; }
            .login-mockup-tabela { padding: 6px 4px; margin-bottom: 7px; gap: 6px; }
            .login-mockup-chart-head { margin-bottom: 4px; }
            .login-mockup-chart { height: 30px; }
            .login-mockup-chart-eixo { padding-top: 2px; }
        }
        /* Janela útil bem baixa (barra de tarefas + navegador não maximizado
           — comum no dia a dia, é o caso real testado 2026-07-25): esconde os
           rótulos de mês, que é o que menos faz falta, antes de esconder o
           mockup inteiro. */
        @media (max-height: 780px) {
            .login-mockup-chart-eixo { display: none; }
            .login-features span { display: none; }
        }
        @media (max-height: 680px) {
            .login-mockup { display: none; }
        }
        @media (max-height: 560px) {
            .login-features { display: none; }
        }

        @media (max-width: 980px) {
            .login-shell { grid-template-columns: 1fr; gap: 32px; padding: 32px 20px; max-width: 480px; }
            .login-hero { text-align: center; }
            .login-hero-brand { justify-content: center; }
            .login-hero-title, .login-hero-sub { max-width: 100%; }
            .login-features { grid-template-columns: 1fr; max-width: 100%; text-align: left; }
            .login-mockup { max-width: 100%; }
            .login-mockup-kpis { grid-template-columns: repeat(2,1fr); }
            .login-box { max-width: 420px; margin: 0 auto; }
        }
        @media (max-width: 560px) {
            .login-mockup { display: none; }
        }

        /* Spinner de "carregando dados" — mostrado depois do login, enquanto
           licitações/lançamentos/etc ainda vêm do Firestore (ver iniciarApp()
           em shared.js). */
        .spinner-carregando { width: 36px; height: 36px; border: 3px solid var(--cinza); border-top-color: var(--bordao); border-radius: 50%; margin: 0 auto; animation: girar-spinner 0.8s linear infinite; }
        @keyframes girar-spinner { to { transform: rotate(360deg); } }

        /* Destaca o ícone de opções (⋮) do item na planilha de Orçamentos
           quando o item tem BDI diferenciado ou removido (pedido 2026-07-15) —
           sinal visual rápido sem precisar abrir o modal pra saber. */
        .orc-opcoes-ativo { background: var(--marca) !important; border-color: var(--primaria, #7a1f2b) !important; color: var(--primaria, #7a1f2b) !important; }

        /* Toast — aviso temporário não-bloqueante (substitui alert() nativo, que
           trava a página inteira e atrapalha até ferramentas de depuração). */
        /* Toast (Onda 0, 12/10/2026): container no canto inferior direito,
           acima de tudo (--z-toast). O desenho do toast em si fica no bloco
           ONDA 0 no fim do arquivo: ícone + texto + fechar, sem barra lateral. */
        .toast-container { position: fixed; right: var(--esp-4); bottom: var(--esp-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--esp-2); width: min(380px, calc(100vw - 2 * var(--esp-4))); }
        @media (max-width: 640px) {
            .toast-container { left: var(--esp-2); right: var(--esp-2); bottom: calc(var(--esp-2) + env(safe-area-inset-bottom)); width: auto; }
        }

        /* ===================================================================
           LAYOUT RESPONSIVO (celular/tablet) — o app nasceu 100% desktop;
           esta seção adapta os pontos que realmente quebram em tela estreita,
           sem redesenhar o layout de mesa. Quatro faixas: 1024px (tablet —
           só a barra de abas vira lista, o resto do layout continua "de
           mesa"), 769-1024px (tablet de verdade — KPIs em 3 colunas e
           tabelas largas ganham coluna fixa, sem ir ao extremo do celular),
           768px (celular/tablet deitado — sidebar vira overlay, grids de 2
           colunas empilham) e 480px (celular em pé — aperta ainda mais
           fontes/paddings).
           =================================================================== */
        @media (max-width: 1024px) {
            /* Abas: com 9-10 abas (Licitações/Financeiro), num tablet ainda
               tem espaço "de mesa" mas não largura suficiente pra barra de
               abas inteira — a última (ex: "Config") ficava cortada e sem
               como rolar até ela. Mesma solução do celular: .tabs some, um
               <select> único (criado em js/shared.js,
               criarSeletoresAbasMobile) assume — mesmas opções, mesmo
               clique por baixo (abrirAba), só a forma de escolher que
               muda. Essa faixa é mais larga que o breakpoint de celular
               (768px) de propósito — só a barra de abas muda aqui, o resto
               do cabeçalho/layout continua no tamanho "de mesa". */
            .tabs { display: none; }
            .tabs-select-mobile { display: block; width: 100%; padding: 12px 14px; margin-bottom: 20px; font-size: 14px; font-weight: 600; color: var(--bordao); border: 2px solid var(--bordao); border-radius: 8px; background-color: var(--branco); }
        }
        /* Faixa "tablet de verdade" (iPad e similares, retrato ou paisagem
           mais estreita) — antes disso, essa faixa não tinha NENHUM ajuste
           próprio: ficava com o layout de mesa "cru" (grid de 4 KPIs, fontes
           cheias, tabela sem coluna fixa) porque o breakpoint de celular só
           existe a partir de 768px pra baixo. Resultado: KPIs com número
           grande (ex: "R$ 152.119,91") quebravam linha dentro do card
           (card estreito, fonte de desktop) e tabelas largas como o DRE (14
           colunas) perdiam a coluna de rótulo ao rolar pra direita — o
           usuário via "valores quebrados" no dashboard e tinha que rolar
           demais nos detalhamentos do DRE pra achar o valor. min-width:769
           evita conflito de cascata com o breakpoint de celular logo abaixo
           (768px) — faixas mutuamente exclusivas, não se sobrepõem. */
        @media (min-width: 769px) and (max-width: 1024px) {
            .kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
            .kpi-card { padding: 14px 16px; }
            .kpi-label { font-size: 11px; }
.kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            /* .kpi-card.destaque tem padding:26px e kpi-value:32px fixos (regra
               de desktop, mais específica que ".kpi-card"/".kpi-value" acima —
               não bastava reduzir só os genéricos). Sem isso, o card mais
               importante (ex: o valor em destaque do Resumo) ficava com MENOS
               espaço útil que os cards normais, e valores grandes (ex:
               "R$ 421.981.807,07") quebravam em 2 linhas — bug real do
               usuário. */
            .kpi-card.destaque { padding: 16px 18px; }
.kpi-card.destaque .kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .mini-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

            .licitacoes-table th, .licitacoes-table td { padding: 11px; font-size: 13px; }
            /* Mesma técnica de coluna fixa já usada no breakpoint de celular
               (ver comentário completo logo abaixo) — reaplicada aqui porque
               tabelas largas (DRE: 12 meses + rótulo + YTD) já precisam
               rolar bem antes dos 768px. */
            .licitacoes-table th:first-child, .licitacoes-table td:first-child {
                position: sticky; left: 0; z-index: 2;
                box-shadow: 2px 0 4px rgba(0,0,0,0.1);
            }
            .licitacoes-table th:first-child { background:var(--sup-2); }
            .licitacoes-table td:first-child { background: var(--branco); }
        }
        @media (max-width: 768px) {
            /* Sidebar de 220px fixa comeria a tela útil de um celular — vira
               um overlay por cima do conteúdo (não empurra mais o main-content
               pro lado). Estado inicial "recolhida" é setado via JS em
               iniciarApp() (window.innerWidth <= 768), e abrirModulo() recolhe
               de novo sozinha depois de escolher um módulo.
               Começa ABAIXO do cabeçalho (top: 60px, a altura medida do
               .header compacto do celular — ver logo abaixo), não em
               top:0 — senão o cabeçalho (que fica por cima dela, ver
               z-index logo abaixo) tapava a logo/nome "CME GESTÃO" do
               topo da sidebar quando ela abria (print do usuário). */
            .sidebar { position: fixed; top: 60px; left: 0; bottom: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.4); }
            .sidebar-header { height: 56px; padding: 0 12px; gap: 8px; }
            .sidebar-logo { width: 40px; height: 40px; }
            .sidebar-title h1 { font-size: 13px; }
            .sidebar-title p { font-size: 10px; }

            /* Cabeçalho fica na frente da sidebar (ver .sidebar aqui em cima,
               z-index:100) — sem isso, com a sidebar aberta, ela tapava o
               botão de menu e não dava pra clicar de novo pra fechar. Com a
               sidebar agora começando abaixo do cabeçalho (top:60px acima),
               os dois não se sobrepõem mais de verdade — o z-index aqui é
               só uma garantia a mais, caso a altura do cabeçalho varie. */
            .header { padding: 10px 14px; height: auto; min-height: unset; min-height: 60px; position: relative; z-index: 150; }
            /* Título cresce (identidade do módulo tem mais presença) e a
               data vira legenda pequena embaixo dele. Status/avatar/sair
               ficam num cluster compacto à direita, em 2 linhas (Online
               em cima, avatar+sair embaixo) — é o espaço que antes ficava
               vazio no cabeçalho (print do usuário). */
            .header-text h1 { font-size: 19px; }
            .header-text .date { font-size: 10px; }
            .header-logo { width: 34px; height: 34px; }
            .header-right { gap: 4px; }
            .status-dot-texto { display: none; }
            .header-indicadores { gap: 6px; }
            .drive-indicador { padding: 4px 6px; }
            .drive-indicador-texto { display: none; }
            .user-avatar { width: 26px; height: 26px; font-size: 11px; }
            .user-email { display: none; }
            .btn-sair { width: 26px; height: 26px; }

            .content-wrapper { padding: 12px; }

            /* Painéis (cards de gráfico/tabela) — era o principal motivo da
               "escada": 25px de respiro em cada um, empilhados, vira uma rolagem
               enorme. Aperta padding e a margem entre eles. */
            .chart-container { padding: 14px; margin-bottom: 14px; }
            .chart-container h3 { font-size: 14px; margin-bottom: 12px; padding-bottom: 8px; }
            .table-container { margin-bottom: 14px; }
            .table-header { padding: 12px 14px; }
            .table-header h3 { font-size: 14px; }
            .section-title { font-size: 11px; margin: 16px 0 8px; }

            .two-columns { grid-template-columns: 1fr; gap: 12px; }
            .mini-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
            .mini-kpi { padding: 10px 12px; }
.mini-kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 17px; }

            /* KPIs: fixo em 2 colunas (mais previsível que auto-fit) e bem mais
               compacto — padding, fonte do valor e do rótulo todos reduzidos. */
            .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
            .kpi-card { padding: 10px 12px; }
            .kpi-label { font-size: 9.5px; margin-bottom: 3px; }
            /* nowrap+ellipsis: mesma correção do breakpoint de tablet — sem
               isso, um valor grande de verdade (ex: "R$ 421.981.807,07",
               já visto na base real da empresa) quebra em 2 linhas dentro
               do card (bug real do usuário, reproduzido em 375px). */
.kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 16px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-delta{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 9.5px; line-height: 1.3; }
            .kpi-card.destaque { padding: 12px 14px; }
            .kpi-card.destaque .kpi-label { font-size: 10px; }
.kpi-card.destaque .kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

            .alert-box { padding: 9px 12px; font-size: 11.5px; gap: 6px; margin-bottom: 8px; }
            .banner-instalar-app { flex-direction: column; align-items: flex-start; padding: 10px 14px; font-size: 12px; }
            .banner-instalar-app-acoes { width: 100%; justify-content: space-between; }

            /* Pega qualquer grade de formulário inline (ex: "1fr 1fr 1fr" nos
               modais de cadastro, ou os checkboxes de seção dos Relatórios) e
               empilha em 1 coluna — mais confiável do que caçar e converter
               cada `style="display:grid..."` espalhado pelo HTML em classe. */
            .modal-content [style*="grid-template-columns"],
            .content-wrapper [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

            .modal-content { width: 94%; padding: 16px; }
            /* Painel lateral (licitação, Busca PNCP): no celular vira tela
               cheia, sem canto arredondado (não sobra espaço lateral pra
               "flutuar"). */
            .modal-lateral { padding: 0; }
            .modal-lateral .modal-content { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
            .painel-header-fixo { border-radius: 0; }
            .painel-corpo { border-radius: 0; }
            .painel-header-topo { padding: 16px 16px 12px; }
            .painel-abas { padding: 0 12px; }
            .painel-corpo { padding: 14px 16px 20px; }
            .modal-content h2 { font-size: 17px; }
            .form-group { margin-bottom: 10px; }
            .form-group label { font-size: 11px; }
            .form-group input, .form-group select { padding: 8px; font-size: 13px; box-sizing: border-box; }
            /* Mesmo bug de <select> do Safari/iOS explicado abaixo em
               .table-toolbar select — aplica a mesma correção aqui. */
            .form-group select {
                -webkit-appearance: none; appearance: none;
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23666'/></svg>");
                background-repeat: no-repeat;
                background-position: right 12px center;
                padding-right: 30px;
            }

            .table-toolbar { flex-direction: column; align-items: stretch; padding: 10px 14px; gap: 8px; }
            .table-toolbar input[type="text"] { min-width: 0; }
            /* Bug real em Safari/iOS: <select> não respeita width:100% herdado
               do flex-stretch quando alguma option tem texto longo (ex: nome de
               órgão/cliente) — o controle nativo estoura pra caber a option mais
               larga, ignorando a largura do container. Fix: tira a aparência
               nativa (que É a causa do bug) e desenha uma seta própria, com
               width/max-width/box-sizing explícitos (não é só "herdar do pai"). */
            .table-toolbar select,
            .table-toolbar .filtro-multi,
            .table-toolbar .filtro-multi-btn { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
            .table-toolbar select {
                -webkit-appearance: none; appearance: none;
                background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23666'/></svg>");
                background-repeat: no-repeat;
                background-position: right 12px center;
                padding-right: 30px;
            }
            .table-toolbar .filtro-multi-btn { text-align: left; }
            .table-header { flex-direction: column; align-items: flex-start; gap: 8px; }
            .table-actions { width: 100%; }
            .btn { padding: 7px 12px; font-size: 11px; }
            .btn-sm { padding: 4px 8px; font-size: var(--txt-densa); }

            .licitacoes-table th, .licitacoes-table td { padding: 9px; font-size: 12px; }
            /* Tabelas largas (DRE tem 14 colunas — 12 meses + rótulo + YTD,
               chega a precisar de ~750px de rolagem numa tela de 375px) —
               fixa a 1ª coluna (rótulo da linha/Data/Cliente, dependendo da
               tabela) enquanto o resto rola por baixo, padrão já esperado em
               apps financeiros pra não perder de vista qual linha é qual.
               Sombra sutil separa visualmente da parte que rola. Linhas
               "destaque" do DRE (fundo cinza via style inline) perdem esse
               fundo só na célula fixada — aceitável, o negrito already
               diferencia a linha inteira. */
            .licitacoes-table th:first-child, .licitacoes-table td:first-child {
                position: sticky; left: 0; z-index: 2;
                box-shadow: 2px 0 4px rgba(0,0,0,0.1);
            }
            .licitacoes-table th:first-child { background:var(--sup-2); }
            .licitacoes-table td:first-child { background: var(--branco); }

            .pipeline-item { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; }
            .pipeline-side { align-items: flex-start; flex-direction: row; }
        }
        @media (max-width: 480px) {
            .header-text h1 { font-size: 17px; }
            .header-text .subtitulo-empresa { display: none; }
            .content-wrapper { padding: 10px; }
            .chart-container, .table-container { border-radius: 6px; }
            .chart-container { padding: 12px; }
            .chart-wrapper { height: 220px; }
            .modal-content { padding: 14px; }

            /* Continua em 2 colunas mesmo aqui — 1 card por linha dobraria a
               altura da rolagem, que é justamente o que o usuário pediu pra
               reduzir. Só aperta mais o texto pra caber sem espremer. */
            .kpi-card { padding: 8px 9px; }
            .kpi-label { font-size: 8.7px; }
.kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 15px; }
.kpi-card.destaque .kpi-value{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size: 17px; }

            /* Tabelas (Base Mestre, Lançamentos etc.) — 768px só reduziu até
               12px/9px; aqui aperta mais um degrau. A tabela continua rolando
               na horizontal (table-layout:fixed com largura mínima própria
               de desktop — ver skill de licitações/financeiro), então isto
               só deixa o conteúdo visível de cada célula mais compacto, não
               resolve a rolagem em si. */
            .licitacoes-table th, .licitacoes-table td { padding: 6px 7px; font-size: 11px; }
            .status-badge { padding: 4px 8px; font-size: 9.5px; }
            .acoes-cell .btn-sm { padding: 3px 6px; font-size: 10px; }
        }

/* ===== Módulo Orçamentos — UI (cards, campos, menu) ===== */
.orc-card { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-1); padding: 18px 20px; margin-bottom: 16px; }
.orc-card-head { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; color:var(--texto-claro); text-transform:uppercase; letter-spacing:.7px; margin-bottom:16px; }
.orc-card-head .ico { width:15px; height:15px; color:var(--primaria); }
.orc-card-head .orc-head-actions { margin-left:auto; display:flex; gap:8px; }
.orc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:14px; }
.orc-field { display:flex; flex-direction:column; gap:5px; }
.orc-field > label { font-size:11px; color:var(--texto-claro); font-weight:600; letter-spacing:.2px; }
/* Rótulo em linha com controle à direita (ex.: label + "Alinhamento") —
   mesma tipografia do label padrão, pra não ficar fora de padrão. */
.orc-lblrow { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.orc-lblrow > label { font-size:11px; color:var(--texto-claro); font-weight:600; letter-spacing:.2px; margin:0; }
.orc-inline-lbl { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--texto-claro); font-weight:600; margin:0; }
.orc-inline-lbl select { width:auto; padding:4px 8px; }
/* Sub-cabeçalho de grupo dentro de um card (divide os campos em blocos
   didáticos, largura total do grid). */
.orc-subhead { grid-column:1/-1; display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--texto); margin:10px 0 0; padding-top:15px; border-top:1px solid var(--borda); }
.orc-subhead:first-child { border-top:none; padding-top:2px; margin-top:0; }
.orc-subhead .ico { width:14px; height:14px; color:var(--primaria); flex-shrink:0; }
.orc-subhead small { font-weight:var(--peso-corpo); text-transform:none; letter-spacing:0; color:var(--texto-claro); font-size:11px; }
/* Bloco recolhível pra config de aparência (identidade/assinatura/rodapé/
   proposta) — tira o excesso de campos da frente sem escondê-los. */
.orc-details { border:1px solid var(--borda); border-radius:10px; margin-top:16px; background:var(--fundo-suave,#f7f8fa); }
.orc-details > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:11px 14px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--texto-claro); }
.orc-details > summary::-webkit-details-marker { display:none; }
.orc-details > summary .ico { width:14px; height:14px; color:var(--primaria); }
.orc-details > summary::after { content:"▾"; margin-left:auto; transition:transform .2s ease; color:var(--texto-claro); font-size:12px; }
.orc-details[open] > summary::after { transform:rotate(180deg); }
.orc-details > .orc-grid { padding:2px 14px 16px; }
.orc-details > .orc-grid .orc-subhead:first-child { padding-top:6px; }
/* Celular: os dados do orçamento viram uma coluna só. Com duas trilhas, o
   "span 3" do Cliente criava uma terceira coluna implícita e o campo seguinte
   (Origem dos preços) caía nela, fora da tela (captura de 12/10/2026). */
@media (max-width: 480px) {
    #orcSecDados .orc-grid { grid-template-columns: minmax(0, 1fr); }
    #orcSecDados .orc-grid > * { grid-column: 1 / -1 !important; }
}

/* ===== Painel analítico do orçamento (js/orcpainel.js) ===== */
.orcp-loading { display:flex; align-items:center; gap:10px; padding:40px; justify-content:center; color:var(--texto-claro); font-weight:600; }
.orcp-loading .orcp-ico { width:16px; height:16px; animation:orcp-spin 1s linear infinite; }
@keyframes orcp-spin { to { transform:rotate(360deg); } }
.orcp-empty { color:var(--texto-claro); font-size:12.5px; }
.orcp-ico { width:14px; height:14px; display:inline-block; vertical-align:middle; flex-shrink:0; }
/* Cabeçalho grafite */
/* Onda 3 (13/10/2026): o cabeçalho grafite com degradê (.orcp-head) e o
   resumo escuro (.orcvr-hero) saíram do CSS; não são usados desde a Onda 2. */
/* KPIs */
.orcp-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:11px; margin-top:14px; }
.orcp-kpi { border:1px solid var(--borda); border-radius:11px; padding:12px 14px; background:var(--branco); position:relative; overflow:hidden; }
.orcp-kl { display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--texto-claro); }
.orcp-kl .orcp-ico { color:var(--texto-claro); width:13px; height:13px; }
.orcp-kv{ margin-top:6px; font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--tinta-1); font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orcp-ks { font-size:10px; color:var(--texto-claro); margin-top:1px; }
/* Semáforo do Lucro Esperado (auditoria 2026-08, P1): cor de status só no
   número que tem julgamento, nunca vinho e sem barrinha no cartão (Onda 3). */
.orcp-kpi.k-crit .orcp-kv { color:var(--st-critico); }
.orcp-kpi.k-ok .orcp-kv { color:var(--st-ok); }

/* ===== Resumo executivo da Visão Geral (hero mode-aware) ===== */
.orcvr-wrap { margin-bottom:16px; }
.orcvr-card { display:flex; flex-direction:column; }
.orcvr-empty { border:1px dashed var(--borda); border-radius:14px; padding:22px 20px; color:var(--texto-claro); font-size:13px; background:var(--branco); display:flex; align-items:center; gap:8px; }
.orcvr-kpis { margin-top:12px; }
.orcvr-acoes { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
/* Checklist de prontidão (quality gate) no hero da Visão geral. */
.orcvr-gate { margin-top:14px; padding-top:12px; border-top:1px solid var(--borda); }
.orcvr-gate-h { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; margin-bottom:9px; }
.orcvr-gate-h.ok { color:var(--st-ok); } .orcvr-gate-h.warn { color:var(--st-atencao); }
.orcvr-gate-h .orcp-ico { width:16px; height:16px; }
.orcvr-gate-chips { display:flex; flex-wrap:wrap; gap:6px; }
.orcvr-chk { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; border-radius:999px; padding:4px 11px; border:1px solid; cursor:default; }
.orcvr-chk small { font-weight:var(--peso-corpo); opacity:.85; }
.orcvr-chk.ok { background:var(--st-ok-tinta); border-color:transparent; color:var(--st-ok); }
.orcvr-chk.warn { background:var(--st-atencao-tinta); border-color:transparent; color:var(--st-atencao); cursor:pointer; }
.orcvr-chk.warn:hover { box-shadow:inset 0 0 0 1px var(--st-atencao); }
/* Grid de gráficos */
.orcp-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:1100px){ .orcp-grid2 { grid-template-columns:1fr; } }
.orcp-card { border:1px solid var(--borda); border-radius:12px; background:var(--branco); padding:14px 16px; box-shadow:var(--sombra-1); }
.orcp-card-h { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--texto); margin-bottom:12px; }
.orcp-card-h .orcp-ico { color:var(--tinta-3); }
.orcp-card-hint { margin-left:auto; font-size:10px; font-weight:var(--peso-corpo); letter-spacing:0; text-transform:none; color:var(--texto-claro); }
/* max-width: o SVG tem viewBox de 620 e esticava até a largura da tela; na
   Curva ABC em monitor largo virava letra de 26px (Diretor 16/09/2026).
   Cartão estreito continua encolhendo; tela larga para em ~1,2x. */
.orcp-svg { width:100%; max-width:760px; height:auto; display:block; }
/* Texto dos gráficos SEMPRE em tinta neutra (regra dataviz) */
.orcp-t-lbl { fill:var(--tinta-2); font-size:11.5px; font-weight:600; }
.orcp-t-val{ fill:var(--tinta-1); font-size:11.5px; font-weight:700; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orcp-t-seg { fill:var(--sobre-marca); font-size:11px; font-weight:700; }
.orcp-t-ax { fill:var(--tinta-3); font-size:10px; }
.orcp-leg { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; }
.orcp-leg-i{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--texto); font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orcp-leg-i b { color:var(--tinta-1); }
.orcp-sw { width:11px; height:11px; border-radius:3px; flex-shrink:0; }
/* Saúde / alertas */
.orcp-saude { margin-top:14px; }
.orcp-chips { display:flex; flex-wrap:wrap; gap:8px; }
.orcp-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:8px; border:1px solid transparent; }
.orcp-chip .orcp-ico { width:13px; height:13px; }
.orcp-chip.good { background:var(--st-ok-tinta); color:var(--st-ok); }
.orcp-chip.warn { background:var(--st-atencao-tinta); color:var(--st-atencao); }
.orcp-chip.info { background:var(--st-info-tinta); color:var(--st-info); }

/* ===== Conformidade (js/orcconformidade.js) ===== */
/* Onda 3: o resultado é uma linha de título com o selo à direita, sem a
   faixa escura com degradê; cada checagem diz o estado pelo ícone e pela
   palavra, sem barrinha colorida na lateral. */
.orcc-resumo { display:flex; align-items:center; gap:12px; padding:4px 0 10px; margin-bottom:12px; border-bottom:1px solid var(--borda); }
.orcc-resumo-l { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--tinta-2); }
.orcc-resumo-l .orcp-ico { color:var(--tinta-3); }
.orcc-selo { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:5px 12px; border-radius:8px; }
.orcc-selo .orcp-ico { width:14px; height:14px; }
.orcc-selo.ok { background:var(--st-ok-tinta); color:var(--st-ok); } .orcc-selo.warn { background:var(--st-atencao-tinta); color:var(--st-atencao); } .orcc-selo.crit { background:var(--st-critico-tinta); color:var(--st-critico); }
.orcc-lista { display:flex; flex-direction:column; gap:8px; }
.orcc-check { display:flex; gap:11px; align-items:flex-start; border:1px solid var(--borda); border-radius:10px; padding:11px 14px; background:var(--branco); }
.orcc-ic { flex-shrink:0; margin-top:1px; } .orcc-ic .orcp-ico { width:16px; height:16px; }
.orcc-check.ok .orcc-ic { color:var(--st-ok); } .orcc-check.warn .orcc-ic { color:var(--st-atencao); } .orcc-check.crit .orcc-ic { color:var(--st-critico); } .orcc-check.info .orcc-ic { color:var(--st-info); }
.orcc-tit { font-size:13px; font-weight:700; color:var(--tinta-1); }
.orcc-det { font-size:12px; color:var(--texto-claro); line-height:1.5; margin-top:2px; }

/* ===== Modal do Copiloto (planilha sugerida pelo edital) ===== */
.orcsug-overlay { position:fixed; inset:0; background:var(--escrim); z-index:var(--z-janela); display:flex; align-items:center; justify-content:center; padding:24px; }
.orcsug-modal { background:var(--branco); border-radius:14px; width:min(880px,100%); max-height:88vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 70px rgba(16,22,30,.4); }
.orcsug-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--borda); }
.orcsug-head b { font-size:15px; color:var(--tinta-1); } .orcsug-sub { display:block; font-size:11.5px; color:var(--texto-claro); margin-top:2px; }
.orcsug-body { padding:14px 18px; overflow-y:auto; }
.orcsug-tab { width:100%; border-collapse:collapse; font-size:12px; }
.orcsug-tab thead th { position:sticky; top:0; background:var(--sup-2); color:var(--tinta-2); border-bottom:1px solid var(--borda); font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:7px 8px; text-align:left; }
.orcsug-tab tbody td { padding:5px 8px; border-bottom:1px solid var(--borda); vertical-align:top; color:var(--tinta-1); }
.orcsug-tab td.cod { font-variant-numeric:tabular-nums; color:var(--tinta-2); white-space:nowrap; } .orcsug-tab td.ctr { text-align:center; }.orcsug-tab td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.orcsug-tab tr.orcsug-et td { background:var(--sup-2); font-weight:800; color:var(--tinta-1); font-size:11.5px; text-transform:uppercase; letter-spacing:.02em; padding:7px 8px; }
.orcsug-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid var(--borda); flex-wrap:wrap; }

/* ===== Célula de quantidade + Memória de cálculo (js/orcmemoria.js) ===== */
.orc-qtd-cell { display:inline-flex; align-items:center; gap:4px; }
.orc-qtd { width:58px; text-align:center; padding:4px; border:1px solid var(--borda,#ccc); border-radius:4px; font-size:12px; }
.orcmem-fx { flex-shrink:0; width:22px; height:24px; border:1px solid var(--borda); border-radius:5px; background:var(--branco); color:var(--texto-claro); font-style:italic; font-weight:700; font-size:11px; cursor:pointer; line-height:1; transition:all .12s ease; }
.orcmem-fx:hover { border-color:var(--acao); color:var(--acao); }
.orcmem-fx.tem { background:var(--st-ok-tinta); border-color:var(--st-ok); color:var(--st-ok); }
/* Memória por fórmula (vínculo vivo entre itens, 2026-08-25): botão "f="
   azul pra distinguir do "fx" verde (dimensões), abas do modal e o
   botão de sinal +/− dos termos. */
.orcmem-fx.formula { background:var(--st-info-tinta); border-color:var(--st-info); color:var(--st-info); font-style:normal; }
/* Linha por fórmula na memória (2026-08-26): chips clicáveis de outras
   memórias (com local), operadores + − ×, linhas geradas por local. */
.orcmem-ref td { background:var(--st-info-tinta); }
.orcmem-igual { font-family:var(--fonte-dado); font-weight:700; color:var(--st-info); margin-right:4px; }
.orcmem-chip { display:inline-flex; align-items:center; gap:4px; background:var(--branco); border:1px solid var(--borda-forte); border-radius:999px; padding:2px 8px; font-size:11.5px; margin:2px 0; }
.orcmem-chip.num { border-style:dashed; }
.orcmem-chip-loc { color:var(--texto-claro); font-size:10.5px; }
.orcmem-chip-x { cursor:pointer; color:var(--texto-claro); font-size:10px; padding:0 2px; }
.orcmem-chip-x:hover { color:var(--st-critico); }
.orcmem-ops { display:inline-flex; gap:3px; margin-left:6px; vertical-align:middle; }
.orcmem-ops .btn { padding:1px 8px; font-weight:700; }
.orcmem-gerada td { font-size:11px; color:var(--texto-claro); background:var(--sup-2); border-top:none; padding-top:2px; padding-bottom:2px; }
.orcmem-sel-local td { font-size:11.5px; color:var(--texto-claro); }
/* Memória v2 — planilha livre (2026-08-27): colunas do engenheiro,
   cabeçalho clicável (editor da coluna), célula "=" com chips. */
.orcm2-tab th { cursor:default; }
.orcm2-tab th.orcm2-colh { cursor:pointer; user-select:none; }
.orcm2-tab th.orcm2-colh:hover { background:var(--sup-3); }
.orcm2-tab th.orcm2-colh.qtd { background:var(--st-info-tinta); color:var(--st-info); }
.orcm2-tab th.orcm2-colh.sel { outline:2px solid var(--acao); outline-offset:-2px; }
.orcm2-cel { width:100%; border:none; background:transparent; font:inherit; padding:2px 4px; }
.orcm2-cel:focus { outline:2px solid var(--acao); outline-offset:-2px; border-radius:3px; background:var(--branco); }
.orcm2-cel.num { text-align:right; font-family:var(--fonte-dado); }
.orcm2-cel.calc { color:var(--st-info); }
.orcm2-celref { background:var(--st-info-tinta); cursor:pointer; }
.orcm2-chip { display:inline-flex; align-items:center; gap:3px; background:var(--branco); border:1px solid var(--borda-forte); border-radius:999px; padding:1px 7px; font-size:11px; margin:1px; white-space:nowrap; }
.orcm2-celval { font-family:var(--fonte-dado); font-weight:700; color:var(--st-info); white-space:nowrap; }
.orcm2-total td { border-top:2px solid var(--borda-forte,#c9ccd4); }
.orcm2-totcel.qtd { font-weight:700; background:var(--st-info-tinta); }
.orcm2-coledit { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; padding:8px 10px; background:var(--cinza-claro,#f5f6f9); border:1px solid var(--borda); border-radius:8px; }
/* Agrupamento visual por Local na memória v2 (2026-08-27) — faixas
   alternadas pra linhas consecutivas do mesmo Local lerem como um bloco só;
   "sem local" fica sinalizado à parte (é o caso que virava frente-fantasma). */
.orcm2-td-local.orcm2-grupo-a { background:var(--sup-2); }
.orcm2-td-local.orcm2-grupo-b { background:var(--branco); }
.orcm2-td-local.orcm2-sem-local { background:var(--st-critico-tinta); }
.orcm2-td-local.orcm2-sem-local .orcm2-cel::placeholder { color:var(--st-critico); opacity:.85; }
.orcmem-abas { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.orcmem-aba { padding:5px 14px; border:1px solid var(--borda); border-radius:999px; background:var(--branco); font-size:12px; cursor:pointer; color:var(--texto-claro); transition:all .12s ease; }
.orcmem-aba:hover { border-color:var(--borda-forte); color:var(--tinta-1); }
.orcmem-aba.ativa { background:var(--tinta-1); border-color:var(--tinta-1); color:var(--sup-1); font-weight:600; }
.orcmem-sinal { width:28px; height:28px; border-radius:6px; border:1px solid var(--borda); background:var(--branco); font-size:15px; font-weight:700; cursor:pointer; line-height:1; }
.orcmem-sinal.pos { color:var(--st-ok); border-color:var(--st-ok); background:var(--st-ok-tinta); }
.orcmem-sinal.neg { color:var(--st-critico); border-color:var(--st-critico); background:var(--st-critico-tinta); }

/* Modal Task Information (2026-08-27): pedido do Diretor "diminua as
   letras e aumente a tela" — a aba Planejamento cresceu muito (memória
   embutida + equipe + custo real + locais, tudo na mesma tela) e o modal de
   720px/fonte padrão ficou apertado. Largura já subiu pra 1180px (inline no
   HTML); aqui só a densidade tipográfica, escopada a ESTE modal — não mexe
   em fonte de mais nada no app. */
#modalAtividade .eap-at-aba { font-size:13px; }

/* =====================================================================
   BANCADA DE PLANEJAMENTO (módulo Projetos e Obras, reformulação
   2026-08-26). Diretriz do Diretor: layout moderno com ESCALA
   TIPOGRÁFICA FIXA — nada de font-size avulso por célula. Quatro
   tamanhos e só: título 13px/600, corpo 12px, rótulo 10px maiúsculo,
   número 12px tabular. Fonte: a família padrão do app (herdada).
   Dentro do modal Task Information, esses 4 tamanhos são sobrescritos
   ~1-1,5px pra baixo logo abaixo das 4 regras originais (especificidade de
   classe não herda — precisa de seletor próprio por elemento).
   ===================================================================== */
.plan-lista { border:1px solid var(--borda); border-radius:12px; overflow-x:auto; overflow-y:hidden; background:var(--branco); }
/* Achado ALTA do revisor 2026-08-27: com as colunas extra (Fase 2) o grid
   passa a precisar de mais largura do que cabe em telas de laptop comuns
   — sem overflow-x:auto o excesso simplesmente sumia sem aviso (mesma
   família de bug já documentada linhas acima em .table-container). */
.plan-titulo { font-size:13px; font-weight:600; }
.plan-corpo, .plan-lista { font-size:12px; }
.plan-rotulo { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--texto-claro); }
.plan-num{ font-size:12px; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space:nowrap; }
#modalAtividade .plan-titulo { font-size:12px; }
#modalAtividade .plan-corpo { font-size:11px; }
#modalAtividade .plan-rotulo { font-size:9px; }
#modalAtividade .plan-num{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size:11px; }
.plan-head, .plan-linha { display:grid; grid-template-columns:minmax(0,1fr) 230px 92px 92px 84px 96px; gap:8px; align-items:center; padding:9px 16px; }
/* Colunas extra (Fase 2 da bancada de Planejamento, 2026-08-27) — preço,
   margem e situação de prazo por frente, atrás de um toggle ("Colunas")
   pra não lotar a tela por padrão. Reaproveita os mesmos dados que já
   existem no Gantt (obraPrecoUnidade/obraSituacaoPrazo), só mostrados
   aqui também porque é onde o Diretor pediu pra ver. */
.plan-lista.extra .plan-head, .plan-lista.extra .plan-linha { grid-template-columns:minmax(0,1fr) 230px 92px 92px 84px 96px 96px 100px 100px; }
.plan-head { background:var(--sup-2); border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:3; }
.plan-etapa { padding:7px 16px; background:var(--fundo-suave,#f5f6f9); border-top:1px solid var(--borda); font-size:12px; font-weight:600; color:var(--texto-claro); display:flex; align-items:center; }
.plan-linha { border-top:1px solid var(--cinza-claro); cursor:pointer; transition:background .1s ease; }
.plan-linha:hover { background:#f3f5f8; }
.plan-linha.local { background:var(--fundo-suave,#fbfbfc); }
.plan-linha.local:hover { background:var(--sup-3); }
/* Visão "Por local" (Obras > Visões): preço unitário e valor sem e com BDI
   (pedido do Diretor, 23/10/2026). O nome do serviço corta com reticências
   e o inteiro fica no title. No celular cada linha vira rótulo e valor. */
/* 27/10/2026: o Diretor achou texto encavalado (chip de aplicação longo por
   cima das colunas de número, preço de 4 casas e janela maiores que a
   coluna). Agora o chip quebra linha, as colunas de número cabem o maior
   valor e a janela quebra em duas linhas. Três degraus: tela larga numa
   linha; até 1600px as aplicações descem para baixo do serviço; até
   1100px o serviço ocupa a linha de cima e os números a de baixo. */
.plan-head.vis-local, .plan-linha.vis-local { grid-template-columns:minmax(160px,1.3fr) minmax(160px,1.2fr) 104px 124px 124px 112px 112px 92px 84px; }
.plan-linha.vis-local { align-items:start; }
.plan-linha.vis-local > span { min-width:0; }
.plan-head.vis-local { position:static; }
/* Nome do serviço (27/10/2026): título legível em até 2 linhas e a
   descrição da tabela em letra menor, numa linha, inteira no title. */
.vis-local-serv { min-width:0; display:flex; flex-direction:column; gap:1px; }
.vis-local-tit { font-weight:600; color:var(--texto); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.vis-local-desc { font-size:10.5px; color:var(--texto-claro); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vis-local-serv > .plan-chip { align-self:flex-start; }
/* Avanço em barra: cor pela situação de prazo, texto embaixo. */
.vis-av { display:flex; flex-direction:column; align-items:stretch; gap:3px; width:100%; }
.vis-av-barra { display:block; height:5px; border-radius:999px; background:var(--cinza-claro,#e9ecf1); overflow:hidden; }
.vis-av-barra > span { display:block; height:100%; border-radius:999px; }
.vis-av-txt { font-size:11px; font-weight:600; text-align:right; white-space:nowrap; }
/* Rodapé do local: total alinhado às colunas e peso na obra. */
.plan-linha.vis-local-total { background:var(--fundo-suave,#f7f8fa); border-top:1.5px solid var(--borda); cursor:default; font-weight:600; }
.plan-linha.vis-local-total:hover { background:var(--fundo-suave,#f7f8fa); }
.plan-linha.vis-local-total .vis-local-desc { font-weight:400; white-space:normal; }
.plan-linha.vis-local .plan-chip { display:inline-block; max-width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.35; vertical-align:top; }
.plan-linha.vis-local > span[data-rot="Janela"] { white-space:normal; line-height:1.35; }
@media (min-width: 769px) and (max-width: 1600px) {
    .plan-head.vis-local, .plan-linha.vis-local { grid-template-columns:minmax(0,1fr) 104px 124px 124px 112px 112px 92px 84px; row-gap:4px; }
    .plan-head.vis-local > span:nth-child(2), .plan-linha.vis-local-total > span:nth-child(2) { display:none; }
    .plan-linha.vis-local > span:nth-child(1) { grid-column:1; grid-row:1; }
    .plan-linha.vis-local > span:nth-child(2) { grid-column:1 / -1; grid-row:2; }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .plan-head.vis-local, .plan-linha.vis-local { grid-template-columns:repeat(7, minmax(0,1fr)); }
    .plan-head.vis-local > span:nth-child(1) { grid-column:1 / -1; }
    .plan-linha.vis-local > span:nth-child(1) { grid-column:1 / -1; grid-row:1; white-space:normal; font-weight:600; }
    .plan-linha.vis-local > span:nth-child(2) { grid-column:1 / -1; grid-row:3; }
    .plan-linha.vis-local > .plan-num, .plan-linha.vis-local > .vis-vazio { grid-row:2; white-space:normal; overflow-wrap:anywhere; }
}
@media (max-width: 768px) {
    .plan-head.vis-local { display:none; }
    .plan-linha.vis-local { display:block !important; padding:10px 12px; }
    .plan-linha.vis-local > span { display:flex; justify-content:space-between; align-items:baseline; gap:12px; text-align:right !important; padding:2px 0; }
    .plan-linha.vis-local > .vis-local-serv { display:flex; flex-direction:column; align-items:flex-start; text-align:left !important; margin-bottom:4px; padding:0; }
    .plan-linha.vis-local > .vis-local-serv .vis-local-desc { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
    .plan-linha.vis-local > .vis-vazio { display:none; }
    .plan-linha.vis-local > span[data-rot="Avanço"] .vis-av { width:120px; }
    .plan-linha.vis-local > span[data-rot]::before { content:attr(data-rot); flex:none; color:var(--texto-claro); font-size:11px; font-weight:400; text-align:left; }
    .plan-linha.vis-local > span[data-rot="Aplicações"] > span { min-width:0; text-align:right; }
}
.plan-chips { display:flex; gap:4px; flex-wrap:wrap; }
.plan-chip { font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.plan-chip.ok { background:#E7F3EC; color:#0f7040; }
.plan-chip.formula { background:#E8F0FB; color:#1d4f91; }
.plan-chip.falta { background:var(--branco); color:var(--texto-claro); border:1px dashed var(--borda); font-weight:400; }
.plan-dif-ok { color:var(--st-ok,#0f7040); } .plan-dif-falta { color:var(--st-critico,#b3261e); } .plan-dif-sobra { color:var(--st-info,#1d4f91); }
/* Aba Planejamento dentro do modal Task Information */
.plan-bloco { background:var(--fundo-suave,#f5f6f9); border-radius:8px; padding:10px 14px; margin-bottom:12px; }
.plan-bloco-acoes { display:flex; gap:14px; align-items:center; }
.plan-acao { font-size:12px; color:var(--primaria,#9d1f31); cursor:pointer; background:none; border:none; padding:0; display:inline-flex; align-items:center; gap:4px; }
.plan-acao.perigo { color:#b3261e; }
.plan-acao:hover { text-decoration:underline; }
.plan-locais-tab { width:100%; border-collapse:collapse; font-size:12px; }
.plan-locais-tab td { padding:5px 8px; border-bottom:1px solid var(--cinza-claro); }
.plan-locais-tab input { font-size:12px; padding:3px 6px; border:1px solid var(--borda); border-radius:5px; }
.orcmem-tot { font-size:13px; color:var(--texto); }.orcmem-tot b{ font-size:16px; color:var(--tinta-1); font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orcmem-tab { width:100%; border-collapse:collapse; font-size:12px; }
.orcmem-tab thead th { background:var(--sup-2); color:var(--tinta-2); border-bottom:1px solid var(--borda); font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:6px 6px; text-align:left; }
.orcmem-tab tbody td { padding:4px 6px; border-bottom:1px solid var(--borda); }
.orcmem-tab .orcmem-desc { width:100%; min-width:150px; padding:5px 7px; border:1px solid var(--borda,#ccc); border-radius:5px; font-size:12px; }
.orcmem-tab .orcmem-dim{ width:64px; text-align:center; padding:5px 4px; border:1px solid var(--borda,#ccc); border-radius:5px; font-size:12px; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orcmem-tab td.orcmem-val{ text-align:right; font-weight:700; color:var(--tinta-1); font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space:nowrap; }
.orc-input { padding:9px 11px; border:1px solid var(--borda); border-radius:9px; font-size:13px; color:var(--texto); background-color:var(--branco); font-family:inherit; width:100%; box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease; }
.orc-input:focus { outline:none; border-color:var(--primaria); box-shadow:var(--anel-foco); }
.orc-hint { font-size:11.5px; color:var(--texto-claro); }
.orc-abc-modo-btn.ativo { background: var(--tinta-1); color:var(--sup-1); border-color: var(--tinta-1); }

/* Seletor de tipo em cards (Insumo/Composição/Incidência/Produção de Equipe
   Mecânica) — estilo "Criar Novo" do SEOBRA, 1 card por tipo com ícone,
   título e descrição curta. Usado no modal de novo item próprio e em
   qualquer outro lugar que precise escolher um dos 4 tipos do catálogo. */
.orc-tipo-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.orc-tipo-card { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:12px; border:1.5px solid var(--borda,#e6e8ee); border-radius:10px; background:var(--branco); cursor:pointer; text-align:left; font-family:inherit; transition:border-color .15s ease, background .15s ease; }
.orc-tipo-card:hover { border-color:var(--primaria,#7a1f2b); }
.orc-tipo-card .ico { width:20px; height:20px; color:var(--primaria,#7a1f2b); }
.orc-tipo-card strong { font-size:12.5px; color:var(--texto,#1d2330); }
.orc-tipo-card small { font-size:10.5px; color:var(--texto-claro,#6b7280); line-height:1.35; }
.orc-tipo-card.ativo { border-color:var(--primaria,#7a1f2b); background:color-mix(in srgb, var(--primaria,#7a1f2b) 7%, var(--branco)); box-shadow:var(--anel-foco); }

/* Badge de tipo (Insumo/Composição/Incidência/Equipe Mecânica) com ícone —
   usado nas tabelas de resultado do Catálogo/Insumos & Composições. */
.tipo-badge { display:inline-flex; align-items:center; gap:5px; }
.tipo-badge .ico { width:12px; height:12px; }
.catalogo-filtro-checkboxes .ico { width:13px; height:13px; color:var(--texto-claro,#6b7280); }
/* Fontes fica sempre 1 por linha (empilhada) — sem isso o flex-wrap da
   regra base deixa as primeiras linhas empilhadas mas depois agrupa 2-3
   checkboxes por linha conforme sobra espaço, ficando desorganizado
   (achado do usuário 2026-07-16). */
.catalogo-filtro-empilhado { flex-direction:column; flex-wrap:nowrap; }

/* Menu lateral de ações do editor */
#orcSideMenu { background:var(--branco); border:1px solid var(--borda); border-radius:12px; box-shadow:var(--sombra-1); padding:14px; }
.orc-menu-label { font-size:10px; font-weight:700; color:var(--texto-claro); letter-spacing:.7px; margin:16px 4px 6px; text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.orc-menu-label:first-child { margin-top:2px; }
.orc-menu-step { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:5px; background:var(--primaria,#7a1f2b); color:var(--sobre-marca); font-size:9.5px; font-weight:800; flex-shrink:0; }
/* Navegação guiada entre fases (gates "← anterior / próximo →"). */
.orc-flux-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--borda); flex-wrap:wrap; }
.orc-flux-nav .orc-flux-step { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--texto-claro); font-weight:700; }
.orc-menu-link { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; font-size:13px; cursor:pointer; color:var(--texto); background:none; transition:background .12s ease; user-select:none; }
.orc-menu-link .ico { width:16px; height:16px; color:var(--texto-claro); flex-shrink:0; }
.orc-menu-link:hover { background:var(--cinza-claro); color:var(--texto); }
.orc-menu-link:hover .ico { color:var(--primaria); }

/* Seletor de fontes — grid compacto (várias fontes lado a lado, não 1 por
   linha inteira). Cada card é 2 LINHAS (nome em cima, controles embaixo) —
   assim o nome da fonte nunca fica espremido/cortado pelo toggle+select. */
.orc-fontes-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
.orc-fonte-linha { display:flex; flex-direction:column; gap:6px; padding:8px 10px; border:1px solid var(--borda); border-radius:8px; background:var(--branco); min-width:0; }
.orc-tabelas-expandir { grid-column:1 / -1; width:100%; margin-top:2px; padding:8px 10px; border:1px dashed var(--borda); border-radius:8px; background:transparent; color:var(--acao); font-size:12px; font-weight:600; cursor:pointer; transition:background .12s ease, border-color .12s ease; text-align:center; }
/* Preview do PDF ampliado — quase tela cheia (botão "Ampliar") */
.modal-content.orc-preview-full { width:99vw !important; max-width:99vw !important; height:97vh !important; max-height:97vh !important; border-radius:8px !important; }

/* Desconto por categoria (Mão de obra / Material / Equipamento) */
.orc-catpanel { margin-top:12px; border:1px solid var(--borda,#e3e8ef); border-radius:10px; overflow:hidden; max-width:720px; background:var(--sup-1); box-shadow:0 4px 14px rgba(20,30,48,.06); }
.orc-catpanel-head { background:var(--sup-2); color:var(--tinta-2); border-bottom:1px solid var(--borda); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:9px 14px; display:flex; align-items:center; gap:8px; }
.orc-catpanel-head .ico { width:15px; height:15px; color:var(--tinta-3); }
.orc-catgrid { display:grid; grid-template-columns:1fr 110px 245px; }
.orc-cathdr { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-claro,#5c6675); padding:8px 12px; background:var(--sup-2); border-bottom:1px solid var(--borda,#e3e8ef); }
.orc-catcell { padding:7px 12px; border-bottom:1px solid var(--borda); display:flex; align-items:center; font-size:13px; font-weight:600; color:var(--tinta-1); }
.orc-catgrid > .orc-catcell:nth-last-child(-n+3) { border-bottom:none; }
.orc-catdot { width:10px; height:10px; border-radius:3px; margin-right:8px; flex-shrink:0; display:inline-block; }
.orc-catcell .orc-input { padding:5px 7px; font-size:12.5px; }
.orc-catpanel-nota { font-size:11px; color:var(--texto-claro,#5c6675); padding:9px 14px; background:var(--sup-2); border-top:1px solid var(--borda,#e3e8ef); line-height:1.5; }

/* ===== MODO VISUALIZAR — orçamento com "cara de sistema" na tela ===== */
.orv-doc { --orv-ink:#16202E; display:flex; flex-direction:column; gap:22px; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; color:#1C2430; }
.orv-sheet { background:var(--sup-1); border:1px solid #E3E8EF; border-radius:12px; box-shadow:0 8px 28px rgba(20,30,48,.07); overflow:hidden; }
.orv-pad { padding:20px 22px 24px; }
.orv-head { display:flex; align-items:stretch; gap:16px; background:var(--orv-ink); color:#EAF0F7; padding:15px 20px 17px; position:relative; }
.orv-head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--marca) 0%, var(--marca) 62%, #0E7C86 62%, #0E7C86 100%); }
.orv-logo { flex-shrink:0; width:104px; background:var(--sup-1); border-radius:8px; display:flex; align-items:center; justify-content:center; padding:8px; }
.orv-logo img { max-width:100%; max-height:52px; object-fit:contain; }
.orv-logo-fallback { width:40px; height:40px; border-radius:9px; color:var(--sobre-marca); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; }
.orv-head-title { flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.orv-kicker { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#8FE3DE; }
.orv-head-title h2 { margin:.26em 0 .16em; font-size:18px; color:var(--sobre-marca); letter-spacing:.01em; }
.orv-obra { font-size:11.5px; color:#B9C4D2; line-height:1.4; }
.orv-obra b { color:#E7EDF4; font-weight:600; }
.orv-meta { flex-shrink:0; align-self:center; display:grid; grid-template-columns:auto auto; gap:2px 0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:8px; padding:8px 12px; min-width:170px; }
.orv-meta .k { font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#8B98A9; padding:3px 12px 3px 0; align-self:center; }
.orv-meta .v{ font-size:11px; color:#EAF0F7; font-weight:600; text-align:right; padding:3px 0; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; display:flex; flex-direction:column; align-items:flex-end; }
.orv-meta .v .pill { color:var(--sobre-marca); font-size:10.5px; font-weight:700; border-radius:5px; padding:1px 8px; }

.orv-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.orv-kpi { border:1px solid #E3E8EF; border-radius:9px; padding:10px 13px; position:relative; overflow:hidden; background:var(--sup-1); }
.orv-kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#0E7C86; }
.orv-kpi.kb::before { background:var(--marca); }
.orv-kpi.kt::before { background:#16202E; }
.orv-kpi.kg::before { background:#148F5B; }
.orv-kpi .kl { font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5C6675; }
.orv-kpi .kv{ margin-top:5px; font-size:17px; font-weight:800; letter-spacing:-.02em; color:#16202E; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orv-kpi .ks { font-size:9.5px; color:#8A93A1; margin-top:1px; }

.orv-sec { display:flex; align-items:center; gap:10px; margin:20px 0 11px; }
.orv-sec .pill { display:inline-flex; align-items:center; gap:8px; background:var(--orv-ink); color:var(--sobre-marca); border-radius:7px; padding:6px 13px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.orv-sec .rule { flex:1; height:2px; background:linear-gradient(90deg,var(--marca),transparent); border-radius:2px; }
.orv-sec .count { font-size:10.5px; color:#5C6675; font-weight:600; }

table.orv-plan { width:100%; border-collapse:collapse; font-size:11px; }
table.orv-plan thead th { background:var(--orv-ink); color:#EAF0F7; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:7px 8px; text-align:center; }
table.orv-plan tbody td { padding:6px 8px; border-bottom:1px solid #EEF1F5; vertical-align:top; }
table.orv-plan .num{ text-align:right; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space:nowrap; }
table.orv-plan .ctr { text-align:center; }
table.orv-plan .c-item { color:#8A93A1; font-variant-numeric:tabular-nums; font-weight:600; }
table.orv-plan .c-desc { color:#3A4453; }
.orv-src { display:inline-block; font-size:8.5px; font-weight:700; letter-spacing:.03em; padding:1px 6px; border-radius:4px; background:#EEF2F7; color:#42506A; white-space:nowrap; }
.orv-src.propria { background:#F7EBEE; color:#8A1E2E; }
tr.orv-cat td { background:var(--marca-tinta); border-bottom:1px solid #fff; font-weight:800; color:var(--marca); }
tr.orv-cat .num{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color:var(--marca); }
.orv-cat-ico { display:inline-block; width:13px; height:13px; border-radius:4px; vertical-align:-2px; margin-right:5px; }

.orv-totais { display:flex; justify-content:flex-end; margin-top:14px; }
.orv-totais .card { width:330px; border:1px solid #E3E8EF; border-radius:10px; overflow:hidden; }
.orv-totais .row { display:flex; justify-content:space-between; align-items:center; padding:8px 14px; font-size:11.5px; }
.orv-totais .row .l { color:#5C6675; font-weight:600; }
.orv-totais .row .v{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-weight:700; color:#16202E; }
.orv-totais .row+.row { border-top:1px solid #EEF1F5; }
.orv-totais .row.grand .l { color:#B9C4D2; text-transform:uppercase; font-size:10px; letter-spacing:.08em; }
.orv-totais .row.grand .v { color:var(--sobre-marca); font-size:15px; font-weight:800; }

/* BDI */
.orv-bdi-hero { display:grid; grid-template-columns:280px 1fr; gap:14px; align-items:stretch; }
.orv-bdi-res { color:var(--sobre-marca); border-radius:12px; padding:18px; display:flex; flex-direction:column; justify-content:center; }
.orv-bdi-res .l { font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:#8FE3DE; font-weight:700; }
.orv-bdi-res .big{ font-size:44px; font-weight:800; letter-spacing:-.02em; line-height:1; margin:8px 0 4px; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orv-bdi-res .cap { font-size:10.5px; color:#AEB9C8; }
.orv-bdi-res .cap b { color:var(--sobre-marca); }
.orv-steps { border:1px solid #E3E8EF; border-radius:12px; padding:14px 16px; }
.orv-steps .st { font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#0E7C86; margin-bottom:9px; }
.orv-steps .stp { font-size:11.5px; color:#3A4453; padding:4px 0; }
.orv-steps .stp b { color:#16202E; font-variant-numeric:tabular-nums; }
.orv-bar-wrap { margin-top:16px; }
.orv-bar { display:flex; height:30px; border-radius:8px; overflow:hidden; border:1px solid #E3E8EF; }
.orv-bar span{ display:flex; align-items:center; justify-content:center; color:var(--sobre-marca); font-size:9.5px; font-weight:800; font-variant-numeric:tabular-nums; min-width:0; overflow:hidden; white-space:nowrap; }
.orv-fxmap { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.orv-fxc { border:1px solid #E3E8EF; border-radius:9px; padding:9px 12px; position:relative; overflow:hidden; }
.orv-fxc::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--st-info); }
.orv-fxc .var { font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#5C6675; }
.orv-fxc .var b { color:#16202E; font-size:12px; }
.orv-fxc .pc{ font-size:16px; font-weight:800; color:#16202E; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; margin-top:2px; }
.orv-fxc .ds { font-size:9px; color:#8A93A1; margin-top:1px; }
table.orv-bditab { width:100%; border-collapse:collapse; font-size:11px; margin-top:2px; }
table.orv-bditab thead th { background:var(--orv-ink); color:#EAF0F7; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:7px 8px; text-align:left; }
table.orv-bditab thead th.num { text-align:right; }
table.orv-bditab tbody td { padding:6px 8px; border-bottom:1px solid #EEF1F5; }
table.orv-bditab .num{ text-align:right; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-weight:700; color:#16202E; }
table.orv-bditab .role { text-align:center; font-weight:800; font-size:10px; }
table.orv-bditab .dot { display:inline-block; width:8px; height:8px; border-radius:3px; margin-right:7px; vertical-align:0; }
tr.orv-bsub td { background:#F4F6F9; }
tr.orv-bsub .sl { font-size:9.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#5C6675; }
tr.orv-bsub .num { color:#16202E; }
table.orv-bditab tfoot td { padding:8px; background:#F7EBEE; font-weight:800; color:#8A1E2E; }
table.orv-bditab tfoot .num{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color:#8A1E2E; font-size:12.5px; }

/* Cronograma */
.orv-crono { border:1px solid #E3E8EF; border-radius:10px; overflow-x:auto; }
.orv-crono table { width:100%; border-collapse:collapse; font-size:9.5px; }
.orv-crono th { background:var(--orv-ink); color:#EAF0F7; font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:6px 5px; text-align:center; white-space:nowrap; }
.orv-crono td{ padding:5px; text-align:center; border-bottom:1px solid #EEF1F5; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color:#42506A; }
.orv-crono td.et { text-align:left; color:#2A3342; font-weight:600; white-space:nowrap; }
.orv-crono td.tot { font-weight:800; color:#16202E; border-left:1px solid #EEF1F5; }
.orv-crono td .h { display:inline-flex; flex-direction:column; align-items:center; gap:1px; min-width:64px; border-radius:5px; padding:3px 6px; font-weight:800; font-size:9.5px; line-height:1.15; }
.orv-crono td .h em { font-style:normal; font-weight:600; font-size:8px; opacity:.72; }
.orv-crono tr.mes td { background:#F4F6F9; font-weight:700; color:#2A3342; border-top:1.5px solid #CDD5E0; }
.orv-crono tr.acc td { background:#E4F2F2; font-weight:800; color:#0E7C86; }
.orv-crono tr.mes td em, .orv-crono tr.acc td em { display:block; font-style:normal; font-weight:600; font-size:8px; opacity:.72; }

.orv-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 4px; }
.orv-foot .sys { font-size:10px; color:#8A93A1; font-weight:600; }
.orv-foot .who { font-size:10px; color:#5C6675; font-weight:600; }
@media (max-width:820px){ .orv-kpis{ grid-template-columns:repeat(2,1fr); } .orv-bdi-hero{ grid-template-columns:1fr; } .orv-fxmap{ grid-template-columns:repeat(2,1fr); } .orv-meta{ display:none; } }
.orc-tabelas-expandir:hover { background:var(--primaria-suave,#fbeaec); border-color:var(--primaria,#7a1f2b); }
.orc-fonte-check { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; cursor:pointer; min-width:0; overflow:hidden; }
.orc-fonte-check span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orc-fonte-linha-controles { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.orc-fonte-linha select { padding:5px 6px; border:1px solid var(--borda); border-radius:6px; font-size:11.5px; color:var(--texto); background-color:var(--branco); flex:1 1 auto; min-width:70px; }
.orc-fonte-linha select:disabled { opacity:.5; }
.orc-onerado-toggle { display:inline-flex; border:1px solid var(--borda); border-radius:7px; overflow:hidden; flex-shrink:0; }
.orc-onerado-toggle button { border:none; background:var(--cinza-claro); color:var(--texto-claro); font-size:10.5px; font-weight:600; padding:5px 7px; cursor:pointer; transition:background .12s ease, color .12s ease; }
.orc-onerado-toggle button + button { border-left:1px solid var(--borda); }
.orc-onerado-toggle button.ativo { background:var(--primaria); color:var(--sobre-marca); }
.orc-onerado-toggle button:not(.ativo):hover { background:var(--primaria-suave); color:var(--primaria); }
/* Badge de vigência da base de preços (auditoria 2026-08, P2) — vazio
   quando a base está em dia; some por completo (sem espaço reservado). */
.orc-idade-base:empty { display:none; }
.orc-idade-base { font-size:10.5px; font-weight:600; padding:3px 7px; border-radius:6px; flex-basis:100%; }
.orc-idade-base.atencao { background:var(--st-atencao-tinta); color:var(--st-atencao); }
.orc-idade-base.critico { background:var(--st-critico-tinta); color:var(--st-critico); }

/* Totais (painel de resumo) */
.orc-totais { min-width:280px; border-collapse:collapse; font-size:13px; }
.orc-totais td { padding:6px 0; }
.orc-totais td.lbl { text-align:right; color:var(--texto-claro); padding-right:18px; }
.orc-totais td.val{ text-align:right; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orc-totais tr.total td{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-weight:700; font-size:16px; border-top:1px solid var(--borda); padding-top:10px; }

/* Resumo compacto no fim do card "Dados do orçamento" — mês-base de cada
   fonte marcada + BDI, num relance, sem precisar olhar o card de Tabelas
   ao lado (pedido explícito do usuário, estilo SEOBRA: tudo visível junto). */
.orc-resumo-cabecalho { margin-top:14px; padding-top:12px; border-top:1px solid var(--borda); font-size:12px; color:var(--texto-claro); line-height:1.7; }
.orc-resumo-cabecalho strong { color:var(--texto); font-weight:600; }
.orc-resumo-cabecalho .orc-resumo-vazio { font-style:italic; }

/* Cabeçalho estilo SEOBRA: 3 painéis lado a lado (Dados do orçamento |
   Tabelas & mês-base | Valores) — no SEOBRA esses 3 blocos ficam juntos, no
   topo do orçamento, sempre visíveis; antes cada um era um card cheio
   empilhado. Empilha em 1 coluna só em telas estreitas. */
.orc-cabecalho-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px; align-items:start; }
.orc-cabecalho-grid .orc-card { margin-bottom:0; }
.orc-cabecalho-grid .orc-fontes-grid { grid-template-columns:1fr; }
.orc-cabecalho-grid .orc-totais { min-width:0; width:100%; font-size:12.5px; }
.orc-cabecalho-grid .orc-totais tr.total td{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size:14px; }
@media (max-width:1100px) { .orc-cabecalho-grid { grid-template-columns:1fr; } }

@media (max-width:900px) { #orcSideMenu { display:none !important; } }

/* Editor por SEÇÕES (estilo SEOBRA): o menu lateral troca qual seção está
   visível — uma por vez — em vez da página única rolável com tudo empilhado
   (reorganização visual pedida pelo usuário 2026-07-15). */
.orc-secao { display:none; }
.orc-secao.ativa { display:block; }
.orc-menu-link.ativo { background:var(--cinza-claro); font-weight:600; }
.orc-menu-link.ativo .ico { color:var(--primaria); }

/* Barra fixa do topo do editor: nome do orçamento + total ao vivo + ações
   principais (Salvar/Voltar) — sempre visível em qualquer seção. */
.orc-topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:14px; background:var(--branco); border:1px solid var(--borda); border-radius:12px; box-shadow:var(--sombra-1); padding:10px 16px; margin-bottom:14px; }
.orc-topbar-titulo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; min-width:0; }
.orc-topbar-titulo .ico { width:16px; height:16px; color:var(--primaria); flex-shrink:0; }
.orc-topbar-titulo span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Valores lado a lado na barra do topo (Custo direto / Total com BDI / Valor ofertado,
   quando houver) — estilo SEOBRA, pedido do usuário 2026-07-16: "Mostrar
   valor com BDI, valor sem BDI, valor do BDI e valor com desconto no
   cabeçalho". Separador vertical fino entre os itens (exceto o primeiro). */
.orc-topbar-total{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; margin-left:auto; display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--texto-claro); white-space:nowrap; }
.orc-topbar-total strong{ color:var(--texto); font-size:14px; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orc-topbar-total-item { padding-left:14px; border-left:1px solid var(--borda); }
.orc-topbar-total-item:first-child { padding-left:0; border-left:none; }
.orc-topbar-acoes { display:flex; gap:8px; flex-shrink:0; }
@media (max-width:900px) { .orc-topbar { flex-wrap:wrap; } .orc-topbar-total { margin-left:0; width:100%; order:3; flex-wrap:wrap; row-gap:4px; } }
/* Em telas estreitas o menu lateral some (regra acima) — sem ele não teria
   como trocar de seção, então volta ao empilhado com todas visíveis. */
@media (max-width:900px) { .orc-secao { display:block; } }

/* Scroll INTERNO do editor (pedido do usuário 2026-07-18): a barra do topo
   (nome + totais + Salvar/Duplicar/Novo/Voltar) e o menu lateral ficam
   parados; só o conteúdo rola — assim o cabeçalho não some. Vale pra TODAS as
   seções (é o container comum menu+conteúdo). O offset é afinado pra caber sem
   scroll duplo com o .content-wrapper. */
#orcEditorView { display: flex; flex-direction: column; min-height: 0; }
#orcEditorScroll { flex: 1 1 auto; min-height: 0; overflow: hidden; }
#orcSideMenu { overflow-y: auto; overflow-x: hidden; }
#orcEditorConteudo { overflow-y: auto; overflow-x: hidden; padding-right: 6px; }
#orcSideMenu::-webkit-scrollbar, #orcEditorConteudo::-webkit-scrollbar { width: 10px; }
#orcSideMenu::-webkit-scrollbar-track, #orcEditorConteudo::-webkit-scrollbar-track { background: transparent; }
#orcSideMenu::-webkit-scrollbar-thumb, #orcEditorConteudo::-webkit-scrollbar-thumb { background: var(--borda,#d9dee6); border-radius: 6px; }
#orcSideMenu::-webkit-scrollbar-thumb:hover, #orcEditorConteudo::-webkit-scrollbar-thumb:hover { background: var(--texto-claro,#9aa4b2); }
/* Em telas baixas/estreitas: sem altura fixa, tudo volta ao fluxo normal. */
@media (max-width:900px) { #orcEditorView { display:block; height:auto !important; } #orcEditorScroll { overflow:visible; } #orcSideMenu, #orcEditorConteudo { overflow:visible; } }

/* Planilha: cabeçalho da tabela gruda no topo do scroll interno enquanto se
   rola a lista (item 5/11). Valores não quebram + fonte um tico menor (item 2). */
.orc-tab-planilha { font-size: 12.5px; }
.orc-tab-planilha thead th { position: sticky; top: 0; z-index: 3; }
.orc-tab-planilha td, .orc-tab-planilha th { white-space: nowrap; }
.orc-tab-planilha td.orc-cel-desc, .orc-tab-planilha th.orc-cel-desc,
.orc-tab-planilha td:nth-child(3), .orc-tab-planilha th:nth-child(3) { white-space: normal; }

/* Painel de Relatórios (exportação) — grupos organizados (2026-07-19) */
.orc-rel-grupo { margin-bottom: 12px; padding: 12px 14px; background: var(--fundo-suave,#f7f4ef); border: 1px solid var(--borda,#e6e0d8); border-radius: 10px; }
.orc-rel-grupo-tit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-claro,#8a7f70); margin-bottom: 9px; }
.orc-rel-opt { font-weight: var(--peso-corpo); text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--texto-claro,#9aa4b2); }
.orc-rel-link { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--primaria,#7a1f2b); text-decoration: none; white-space: nowrap; }
.orc-rel-link:hover { text-decoration: underline; }
.orc-rel-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 18px; }
.orc-rel-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 4px 0; }
.orc-rel-chk input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--primaria,#7a1f2b); }
.orc-rel-acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda,#e6e0d8); }
.orc-rel-acoes-locais { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 560px) { .orc-rel-acoes { flex-direction: column; align-items: stretch; } .orc-rel-acoes .btn { width: 100%; justify-content: center; } .orc-rel-acoes-locais { flex-direction: column; } }

/* Visão geral (2ª versão, padrão SEOBRA visto ao vivo 15/07/2026): Dados em
   card de largura cheia no topo (nome/descrição grandes), e embaixo Tabelas
   (compacta) + Valores lado a lado. */
.orc-visao-grid2 { display:grid; grid-template-columns:1fr 1.1fr; gap:16px; align-items:start; }
.orc-visao-grid2 .orc-card { margin-bottom:0; }
.orc-visao-grid2 .orc-fontes-grid { grid-template-columns:1fr; }
.orc-visao-grid2 .orc-totais { min-width:0; width:100%; font-size:12.5px; }
.orc-visao-grid2 .orc-totais tr.total td{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-size:14px; }
@media (max-width:1100px) { .orc-visao-grid2 { grid-template-columns:1fr; } }
/* Card compacto: menos respiro — usado nas Tabelas & mês-base, que depois de
   escolhidas são só consulta/ajuste pontual. */
.orc-card-compacto { padding:12px 14px; }
.orc-card-compacto .orc-card-head { margin-bottom:8px; }
.orc-card-compacto .orc-fonte-linha { padding:5px 8px; }

/* Planilha completa: linha de CATEGORIA (etapa) destacada + focada. */
.orc-cat-row td { background:var(--sup-2); border-top:2px solid var(--borda); padding:7px 10px !important; }
/* Onda 3: categoria em --sup-2, sem rosa nem barra de vinho na focada. */
.orc-cat-row.focada td { background:var(--sup-3); }
/* Cabeçalho da categoria: nº-badge auto + nome + BDI + 1 botão "Inserir ▾". */
.orc-cat-inner { display:flex; flex-direction:column; gap:6px; }
.orc-cat-l1 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.orc-cat-num{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:26px; padding:0 8px; border-radius:7px; background:var(--sup-1); color:var(--tinta-1); box-shadow:inset 0 0 0 1px var(--borda-forte); font-weight:700; font-size:12px; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; letter-spacing:.02em; }
.orc-cat-insbtn { margin-left:auto; }
/* Sub-categoria: indentada e com número-badge mais claro. */
.orc-cat-sub td:first-child { box-shadow:inset 22px 0 0 var(--sup-3); }
.orc-cat-sub .orc-cat-num { background:var(--sup-3); color:var(--tinta-1); box-shadow:inset 0 0 0 1px var(--borda-forte); min-width:44px; font-size:11px; } /* hierarquia neutra (Helena, Onda 2): sem o roxo da IA */
.orc-cat-subarrow { display:inline-flex; color:var(--tinta-3); margin-left:6px; }
.orc-cat-subarrow .ico { width:14px; height:14px; }

/* Menu flutuante único "Inserir" (Serviço/Separador/Sub-categoria/Categoria). */
.orc-ins-menu { position:fixed; z-index:9999; width:236px; background:var(--sup-1); border:1px solid var(--borda); border-radius:12px; box-shadow:0 12px 34px rgba(16,24,40,.18); padding:6px; animation:orcInsMenuIn .12s ease; }
@keyframes orcInsMenuIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.orc-ins-menu-tit { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--texto-claro); font-weight:700; padding:6px 10px 4px; }
.orc-ins-menu-sep { height:1px; background:var(--borda); margin:5px 6px; }
.orc-ins-menu button { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:8px; row-gap:1px; align-items:center; width:100%; text-align:left; border:none; background:none; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; color:var(--tinta-1); transition:background .1s ease; }
.orc-ins-menu button > .ico { grid-row:1 / span 2; width:16px; height:16px; color:var(--tinta-3); }
.orc-ins-menu button > b { font-weight:600; }
.orc-ins-menu button span { grid-column:2; font-size:11px; font-weight:var(--peso-corpo); color:var(--tinta-3); }
.orc-ins-menu button:hover { background:var(--sup-3); }

/* Busca inline por categoria (inserir serviço onde se quer). */
.orc-busca-inline-row td { background:var(--sup-2); padding:8px 10px !important; }
.orcbi-wrap { display:flex; flex-direction:column; gap:8px; }
.orcbi-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.orcbi-input { flex:1; min-width:220px; }
.orcbi-result { max-height:260px; overflow-y:auto; border:1px solid var(--borda); border-radius:9px; background:var(--branco); }
.orcbi-item { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:6px 9px; border-bottom:1px solid var(--borda,#eee); cursor:pointer; transition:background .1s ease; }
.orcbi-item:last-child { border-bottom:none; }
.orcbi-item:hover { background:var(--sup-3); }
/* Número onde o item vai nascer (editável). */
.orcbi-pos { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--tinta-1); }
.orcbi-pos .orcbi-catn { color:var(--tinta-1); font-weight:700; }
.orcbi-num{ width:52px; text-align:center; font-weight:700; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; padding:4px 6px; border:1px solid var(--borda-forte); border-radius:6px; background:var(--sup-1); }
/* Flash verde na linha do item recém-inserido (fica claro ONDE nasceu). */
@keyframes orcRowFlash { 0% { background:var(--st-ok-tinta); } 100% { background:transparent; } }
.orc-row-novo td { animation:orcRowFlash 1.8s ease-out; }

/* Painel de pendências (itens sem preço / sem composição) no topo da Planilha. */
.orc-pend { border:1px solid var(--borda); background:var(--st-atencao-tinta); border-radius:11px; padding:10px 12px; margin-bottom:12px; }
.orc-pend .orcpd-head { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--st-atencao); margin-bottom:8px; }
.orc-pend .orcpd-head .ico { width:16px; height:16px; }
.orcpd-tab { width:100%; border-collapse:collapse; font-size:12px; }
.orcpd-tab td { padding:6px 8px; border-top:1px solid var(--borda); vertical-align:middle; }
.orcpd-tab tr:first-child td { border-top:none; }
.orcpd-num{ font-weight:700; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space:nowrap; color:var(--texto); width:52px; }
.orcpd-cod { font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--texto-claro); }
.orcpd-mot { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; }
.orcpd-mot.erro { background:var(--st-critico-tinta); color:var(--st-critico); }
.orcpd-mot.alerta { background:var(--sup-1); color:var(--st-atencao); }
.orcpd-ac { text-align:right; white-space:nowrap; }
.orcpd-ac .btn-sm { padding:3px 9px; font-size:11px; }

/* Linha persistente "＋ adicionar serviço" no fim da categoria (estilo planilha). */
.orc-addrow-row td { background:var(--sup-2); border-top:1px dashed var(--borda); padding:8px 8px !important; cursor:pointer; transition:background .12s ease, color .12s ease; }
.orc-addrow-row:hover td { background:var(--sup-3); }
.orc-addrow-plus { text-align:center; color:var(--tinta-3); }
.orc-addrow-plus .ico { width:14px; height:14px; vertical-align:middle; }
.orc-addrow-txt { font-size:12px; font-weight:600; color:var(--texto-claro); letter-spacing:.01em; }
.orc-addrow-row:hover .orc-addrow-txt { color:var(--tinta-1); }

/* Versões & Reajuste (lista de snapshots). */
.orc-versoes { display:flex; flex-direction:column; gap:8px; }
.ov-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--borda); border-radius:11px; background:var(--branco); transition:box-shadow .12s ease, border-color .12s ease; }
.ov-item:hover { border-color:var(--borda-forte); box-shadow:var(--sombra-1); }
.ov-l { flex:1; min-width:0; }
.ov-rot { font-weight:700; font-size:13.5px; color:var(--texto,#1d2330); }
.ov-meta { font-size:11px; color:var(--texto-claro); margin-top:2px; }
.ov-val{ font-weight:700; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color:var(--tinta-1); white-space:nowrap; font-size:14px; }
.ov-val .ov-ref{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; display:block; font-size:10px; font-weight:600; color:var(--texto-claro); text-align:right; }
.ov-acoes { display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; }

/* Comparar versão × atual (overlay). */
.orccmp-tot { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 16px; border-radius:12px; background:var(--sup-2); border:1px solid var(--borda); margin-bottom:14px; }
.orccmp-tot > div { display:flex; flex-direction:column; }
.orccmp-tot .l { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--texto-claro); font-weight:700; }
.orccmp-tot .v{ font-size:16px; font-weight:800; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color:var(--texto,#1d2330); }
.orccmp-tot .arw { display:inline-flex; color:var(--tinta-3); }
.orccmp-tot .arw .ico { width:18px; height:18px; }
.orccmp-tot .dlt { margin-left:auto; text-align:right; }
.orccmp-tot .dlt .v small { font-weight:600; font-size:12px; }
.orccmp-up .dlt .v { color:var(--st-critico); } .orccmp-down .dlt .v { color:var(--st-ok); } .orccmp-eq .dlt .v { color:var(--texto-claro); }
.orccmp-sec { margin-bottom:14px; }
.orccmp-sec-h { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--texto); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.orccmp-badge { background:var(--sup-3); color:var(--tinta-1); font-size:10px; font-weight:800; border-radius:8px; padding:1px 7px; }
.orccmp-vazio { font-size:12px; color:var(--texto-claro); margin-bottom:12px; }
.orccmp-tab { width:100%; border-collapse:collapse; font-size:11.5px; }
.orccmp-tab th { text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-claro); font-weight:700; padding:5px 8px; border-bottom:1px solid var(--borda); }
.orccmp-tab td { padding:6px 8px; border-bottom:1px solid var(--borda,#eef0f2); vertical-align:top; }
.orccmp-tab td.d { color:var(--texto); }.orccmp-tab td.n{ text-align:right; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space:nowrap; }
.orccmp-tab .up { color:var(--st-critico); font-weight:700; } .orccmp-tab .down { color:var(--st-ok); font-weight:700; }

/* Separador (subtítulo dentro da categoria). */
.orc-sep-row td { background:var(--sup-2); border-top:1px dashed var(--borda); padding:5px 10px !important; }
.orc-sep-titulo { width:100%; border:none; background:transparent; font-weight:700; font-size:12.5px; letter-spacing:.02em; color:var(--texto,#333); text-transform:uppercase; padding:3px 4px; border-radius:5px; }
.orc-sep-titulo:focus { outline:none; background:var(--branco); box-shadow:0 0 0 2px var(--primaria-suave,#f7ecee); }

/* Sinais visuais por item — badges VIVOS (pedido 2026-07-18: cores chamativas
   pra bater o olho e ver na hora). Pílula com ícone + rótulo curto. */
.orc-flags { display:inline-flex; gap:5px; vertical-align:middle; margin-left:6px; flex-wrap:wrap; }
/* Onda 3: chip chapado de status (ícone do sprite + palavra), sem degradê,
   sem pulso e sem barra lateral na linha. */
.orc-flag { display:inline-flex; align-items:center; gap:4px; height:18px; padding:0 7px 0 5px; border-radius:999px; font-size:9.5px; font-weight:700; letter-spacing:.03em; line-height:1; white-space:nowrap; background:var(--st-neutro-tinta); color:var(--st-neutro); }
.orc-flag .orc-flag-ico { width:11px; height:11px; flex:none; }
.orc-flag-erro    { background:var(--st-critico-tinta); color:var(--st-critico); }
.orc-flag-semcomp { background:var(--st-atencao-tinta); color:var(--st-atencao); }
.orc-flag-precodireto { background:var(--st-neutro-tinta); color:var(--st-neutro); }
.orc-flag-revisao { background:var(--st-atencao-tinta); color:var(--st-atencao); }
.orc-flag-proprio { background:var(--st-neutro-tinta); color:var(--st-neutro); }
.orc-flag-edital  { background:var(--st-info-tinta); color:var(--st-info); }
.orc-flag-mem     { background:var(--st-ok-tinta); color:var(--st-ok); }
.orc-row-erro td { background:var(--st-critico-tinta); }

/* Botão de filtro "Só revisão" no cabeçalho da Planilha + badge de contagem. */
.orc-btn-rev.ativo { background:var(--tinta-1); border-color:var(--tinta-1); color:var(--sup-1); }
.orc-btn-rev .orc-rev-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; margin-left:2px; border-radius:8px; background:var(--st-atencao-tinta); color:var(--st-atencao); font-size:10px; font-weight:700; }
.orc-btn-rev.ativo .orc-rev-badge { background:var(--sup-1); color:var(--tinta-1); }

/* Banner "trocando item" na busca inline. */
.orcbi-troca { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--st-info); background:var(--st-info-tinta); border-radius:8px; padding:7px 10px; margin-bottom:2px; }
.orcbi-troca .ico { width:14px; height:14px; flex:none; }
/* Valor de referência riscado quando há desconto de pregão aplicado. */
.orc-total-super{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; text-decoration:line-through; color:var(--texto-claro); opacity:.7; }
/* Valor no modo "ofertado" (com desconto) — leve destaque na cor da marca. */
.orc-val-ofertado{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color:var(--tinta-1); font-weight:600; } /* valor não é status: nunca vinho (Onda 1) */

/* Chave global "Exibir: Referência | Ofertado" (segmentada). */
.orc-modo-valor-bar { display:inline-flex; }
.orc-modoval { display:inline-flex; align-items:center; gap:6px; }
.orc-modoval-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-claro); font-weight:700; }
.orc-modoval .orc-modoval-btn { border:1px solid var(--borda); background:var(--branco); color:var(--texto,#444); font-size:12px; font-weight:600; padding:5px 12px; cursor:pointer; transition:all .12s ease; }
.orc-modoval .orc-modoval-btn:first-of-type { border-radius:8px 0 0 8px; }
.orc-modoval .orc-modoval-btn:last-of-type { border-radius:0 8px 8px 0; border-left:none; }
.orc-modoval .orc-modoval-btn:hover:not(:disabled):not(.ativo) { background:var(--sup-3); }
/* Onda 3: o modo escolhido em tinta neutra (como o passo ativo do menu), sem vinho. */
.orc-modoval .orc-modoval-btn.ativo { background:var(--tinta-1); border-color:var(--tinta-1); color:var(--sup-1); }
.orc-modoval .orc-modoval-btn:disabled { opacity:.45; cursor:not-allowed; }
/* Banner "composição no preço ofertado" no modal de composição. */
.orc-comp-ofertado { display:flex; align-items:flex-start; gap:6px; font-size:12px; color:var(--st-info); background:var(--st-info-tinta); border-radius:8px; padding:8px 11px; margin-bottom:10px; }
.orc-comp-ofertado .ico { width:14px; height:14px; flex:none; margin-top:1px; }
/* Planilha orçamentária compacta: tudo cabe SEM barra de rolagem horizontal
   — table-layout FIXED com largura explícita por coluna; a Descrição é a
   única coluna elástica (absorve toda a variação de largura da tela) e vem
   JUSTIFICADA; demais colunas centralizadas com nowrap nos valores
   (pedido 2026-07-15). */
/* Escala menor e mais folgada (pedido 2026-07-18: "diminuir as letras, menor e
   mais folgadas nas linhas"). Fonte-base 11px, linhas com respiro. */
.orc-tab-planilha { width:100%; table-layout:fixed; font-size:11px; border-collapse:separate; border-spacing:0; }
/* Cabeçalho moderno: fixo no topo ao rolar, minúsculas->maiúsculas discretas. */
.orc-tab-planilha thead th { position:sticky; top:0; z-index:3; background:var(--sup-2); color:var(--tinta-2); text-align:center; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:10px 6px; border-bottom:2px solid var(--borda); }
.orc-tab-planilha th.th-desc { text-align:left; }
.orc-tab-planilha td { padding:10px 6px; vertical-align:middle; overflow:hidden; border-bottom:1px solid var(--borda,#eef0f2); }
/* Menu "⋯" da linha de categoria (16/09/2026): a célula corta o painel; enquanto aberto, deixa vazar. */
.orc-tab-planilha td:has(.filtro-multi-painel.aberto) { overflow: visible; }
.orc-tab-planilha th:nth-child(1) { width:46px; }
.orc-tab-planilha th:nth-child(2) { width:102px; }
/* 3 = Descrição: sem width → fica com todo o espaço restante */
.orc-tab-planilha th:nth-child(4) { width:40px; }
.orc-tab-planilha th:nth-child(5) { width:108px; }
.orc-tab-planilha th:nth-child(6) { width:100px; }
.orc-tab-planilha th:nth-child(7) { width:112px; }
.orc-tab-planilha th:nth-child(8) { width:50px; }
/* Coluna Qtd com folga real pro botão fx (memória) — nunca corta. */
.orc-tab-planilha td:nth-child(5) { overflow:visible; }
.orc-tab-planilha .status-badge { padding:1px 5px; font-size:9px; }
/* Zebra + hover nas linhas de item (não nas de categoria/separador/busca). */
.orc-tab-planilha tbody tr:not(.orc-cat-row):not(.orc-sep-row):not(.orc-busca-inline-row):not(.orc-addrow-row):nth-child(even) td { background:var(--sup-2); }
.orc-tab-planilha tbody tr:not(.orc-cat-row):not(.orc-sep-row):not(.orc-busca-inline-row):not(.orc-addrow-row):hover td { background:var(--sup-3); }
.orc-tab-planilha tbody td:first-child{ color:var(--texto-claro); font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-weight:600; font-size:10.5px; }
/* Descrição: tinta escura legível (não mais tudo vermelho), vira link no hover. */
.orc-item-desc { font-size:11px; line-height:1.45; text-align:left; hyphens:auto; word-break:break-word; }
.orc-desc-link { cursor:pointer; color:var(--texto,#2b2b2b); border-bottom:1px dotted transparent; transition:color .1s ease, border-color .1s ease; }
.orc-desc-link:hover { color:var(--acao); border-bottom-color:var(--acao); }
/* Código em cima + fonte pequena embaixo, mesma coluna (estilo SEOBRA). */
.orc-tab-planilha tbody td:nth-child(2){ font-weight:600; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orc-item-fonte { font-size:9px; color:var(--texto-claro); font-weight:var(--peso-enfase); margin-top:2px; text-transform:uppercase; letter-spacing:.03em; }
/* Curva ABC — colunas de preço de mercado (ML/Shopee/Leroy Merlin) só
   aparecem na visão "Materiais" (classe adicionada via JS em orcTrocarModoAbc). */
.orc-tab-abc .orc-abc-col-mercado { display:none; }
.orc-tab-abc.orc-abc-mercado-on .orc-abc-col-mercado { display:table-cell; }
/* Célula de qtd + fx com folga (input menor, botao garantidamente visivel). */
.orc-tab-planilha .orc-qtd { width:46px; font-size:11px; padding:3px; }
.orc-tab-planilha .orcmem-fx { width:20px; height:22px; font-size:10px; }

/* Composição do BDI hierárquica (grupos > subitens, estilo demonstrativo
   ION): grupo é um bloco com cabeçalho destacado; subitens indentados. */
.bdi-grupo { border:1px solid var(--borda); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.bdi-grupo-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--cinza-claro); padding:8px 10px; border-bottom:1px solid var(--borda); }
.bdi-grupo-head .orc-input, .bdi-item .orc-input { padding:5px 8px; font-size:12.5px; }
.bdi-grupo-total{ font-weight:700; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space:nowrap; min-width:64px; text-align:right; }
.bdi-item { display:flex; gap:8px; align-items:center; padding:6px 10px 6px 28px; border-bottom:1px dashed var(--cinza-claro); }
.bdi-item:last-child { border-bottom:none; }

/* ==== BANCADA DE PLANEJAMENTO — acordeão na linha (2026-08-28) ====
   Tipografia ÚNICA e compacta (pedido do Diretor: letras bem menores,
   mesmo tipo em tudo, sem quebra de linha — só a Descrição quebra).
   Seleção discreta (sem azul/faixas — reprovadas). */
.bancada-painel { background: var(--sup-1, #fff); border: 1px solid var(--borda, #d9dce3); border-radius: 10px; overflow: auto; min-height: 0; }
.bancada-uma { height: calc(100vh - 235px); min-height: 420px; }
table.bancada-tab { width: 100%; border-collapse: collapse; font-size: 10.5px; font-family: inherit; }
table.bancada-tab thead td { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-claro, #7a8090); padding: 6px 6px 4px; border-bottom: 1px solid var(--borda, #e2e4ea); position: sticky; top: 0; background: var(--sup-1, #fff); z-index: 2; white-space: nowrap; }
table.bancada-tab td { padding: 3px 6px; border-bottom: 1px solid var(--sup-3, #f0f1f5); vertical-align: middle; white-space: nowrap; }
table.bancada-tab td.bancada-desc { white-space: normal; min-width: 200px; }
table.bancada-tab td.num, table.bancada-tab .num{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; text-align: right; }
tr.bancada-etapa td { background: var(--sup-3, #eef0f5); font-weight: 700; font-size: 10.5px; padding: 5px 6px; cursor: pointer; position: sticky; top: 24px; z-index: 1; }
tr.bancada-etapa.avulso td { background: color-mix(in srgb, var(--st-atencao, #b58a1f) 10%, var(--sup-1, #fff)); position: static; }
.bancada-rollup { font-weight: var(--peso-corpo); color: var(--tinta-2); font-size: var(--txt-densa); }
tr.bancada-item { cursor: pointer; }
tr.bancada-item:hover td { background: var(--sup-2, #f7f8fb); }
/* marcação do item ativo (pedido: marcar SIM, mas sem o azul/faixas):
   negrito + fundo suave + seta no número do item */
tr.bancada-item.sel td { background: var(--sup-2, #f4f5f8); font-weight: 600; }
tr.bancada-item.sel td:first-child::before { content: '\25B8  '; color: var(--texto-claro, #7a8090); }
tr.bancada-item.fora td { opacity: .8; }
.bancada-cod { font-family: inherit; font-size: 10.5px; color: var(--texto-claro, #5a6070); }
input.bancada-in { font-family: var(--fonte-num); width: 80px; text-align: right; font-size: 10.5px; border: 1px solid var(--borda, #d9dce3); border-radius: 4px; padding: 1px 5px; font-variant-numeric: tabular-nums; background: var(--sup-1, #fff); color: var(--tinta-1); }
.bancada-tab .plan-chip { font-size: 8.5px; padding: 0 5px; }
/* acordeão: a linha de detalhe herda a largura da tabela */
tr.bancada-det-row > td { background: var(--sup-2, #fafbfd); padding: 0 0 8px; white-space: normal; border-bottom: 2px solid var(--borda, #e2e4ea); }
.bancada-det-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px 6px; border-bottom: 1px dashed var(--borda, #e2e4ea); flex-wrap: wrap; font-size: 11px; }
.bancada-det-rodape { padding: 6px 12px; font-size: 10.5px; border-top: 1px dashed var(--borda, #e2e4ea); color: var(--tinta-1); }

/* ==== .pw- PLANEJAMENTO WORKBENCH (reconstrução, Fase 1 — 2026-08-28)
   CSS DEFINITIVO vindo do mockup aprovado (_rascunhos/mockup_modulo_
   planejamento.html); variáveis mapeadas nos tokens do sistema pra
   seguir o tema. Se a tela divergir do mockup, é bug. ==== */
:root {
  --pw-tinta: var(--tinta-1); --pw-claro: var(--texto-claro, #7a8090);
  --pw-borda: var(--borda, #dcdfe6); --pw-sup1: var(--sup-1, #ffffff);
  --pw-sup2: var(--sup-2, #f7f8fb); --pw-sup3: var(--sup-3, #eef0f5);
  --pw-ok: var(--st-ok, #1c7c3d); --pw-critico: var(--st-critico, #b02a2a);
  --pw-info: var(--st-info, #2b6cb0); --pw-atencao: var(--st-atencao, #9a6b12);
}

/* ==== --setor-* : A FAMILIA DE COR DE SETOR DA MESA DO DIRETOR (30/09/2026)
   Criada aqui porque nao existia: conferido, nenhum `--setor-` nem nenhuma
   classe `.mesa-` existia neste arquivo antes desta data.

   CINCO cores, uma por setor REAL das tarefas (`frentes/{f}/tarefas/{t}`,
   campo `setor`, texto livre): Diretoria, Contabilidade, Engenharia,
   Comercial, Administrativo. Mais um balde CINZA NEUTRO para o que o mapa
   nao conhece. Cor por adivinhacao seria pior que cinza: cinza o Diretor
   sabe ler como "nao sei".

   Saturacao baixa de proposito, e NENHUMA delas e o vinho da marca
   (--marca, que significa acao) nem o laranja de critico (--st-critico, que
   significa atraso real). Cor de setor nunca aparece sozinha: o nome do
   setor esta sempre na tela ou no `title` junto (WCAG 2.2, 1.4.1).

   OS TRES BLOCOS DE TEMA. Estes tokens sao redefinidos em
   :root[data-tema="escuro"] E no @media (prefers-color-scheme: dark).
   Esquecer o terceiro faria a cor sumir para quem usa tema automatico. ==== */
:root {
    --setor-dir:  #41618f;   /* Diretoria       azul aco      */
    --setor-cont: #6a5f95;   /* Contabilidade   violeta cinza */
    --setor-eng:  #8a6d1f;   /* Engenharia      mostarda      */
    --setor-com:  #256f7d;   /* Comercial       ciano escuro  */
    --setor-adm:  #7d5a45;   /* Administrativo  marrom        */
    --setor-nd:   #9aa2b4;   /* nao sei         cinza neutro  */
}
.pw-painel { background: var(--pw-sup1); border: 1px solid var(--pw-borda); border-radius: 10px; overflow: auto; min-height: 0; }
/* ONDA 1 DA RÉGUA (02/09/2026): a bancada rodava com corpo de tabela em
   10,5px, cabeçalho em 9px e chip em 8,5px. A Helena foi direta: "não é
   refino, é dado que ele vai ler errado no notebook às 19h". Piso da casa
   passa a ser --txt-densa (11px), e o rótulo em caixa-alta, --txt-rotulo. */
.pw-toolbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    margin-bottom: var(--esp-1); font-size: var(--txt-corpo); }
/* Altura vem do token e o padding é só horizontal: é essa regra que mata a
   maior parte dos 248 espaçamentos distintos do sistema. */
/* BOTAO DA BANCADA, refeito em 05/09/2026 ("botoes nao modernos, letras tbm").
   O que envelhecia: borda dura em volta de TODOS, peso 600 fechando a letra em
   12px, e icone que era caractere de texto. Agora a borda so aparece no hover,
   o peso e 500, e o icone e SVG do sprite, alinhado pelo centro optico. */
/* COMPACTADO EM 05/09/2026: "diminua o tamanho dos botoes, coloque todos em
   uma unica linha". Nove controles numa barra de planilha nao cabem com altura
   de 30 e padding de 11. Aqui vale a regra da bancada, nao a do resto do
   sistema: 26 de altura, 8 de padding, e quem se explica pelo icone perde o
   rotulo e ganha tooltip. */
.pw-btn { border: 1px solid transparent; background: var(--pw-sup2);
    border-radius: 6px; min-height: 26px; padding: 0 8px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: var(--peso-medio); font-family: inherit;
    letter-spacing: -.004em;
    cursor: pointer; color: var(--pw-tinta); white-space: nowrap;
    transition: background .12s ease, border-color .12s ease; }
/* So icone: quadrado, sem rotulo, com title. Usado no que a barra repete em
   toda tela do sistema (pastas, desfazer) e que ja se le pelo desenho. */
.pw-btn--so { width: 26px; padding: 0; justify-content: center; }
/* O BOTAO DE IA DA BANCADA (05/09/2026, pedido do Diretor: "mais tecnologico,
   como e na aba de licitacoes"). Reaproveita a linguagem que o sistema ja tem
   em .btn-ia (gradiente da marca + brilho que atravessa) e acrescenta duas
   coisas: o icone respira, e o brilho tambem passa por ele. Nada de cor nova:
   IA aqui e a marca em movimento, nao um verde neon que nao existe no sistema. */
/* .pw-btn--ia e .btn-ia: ver .cm-btn--ia no bloco ONDA 0 (fim do arquivo). */
.pw-btn--ia .badge-ia { margin-left: 5px; }
/* contador dentro do botao so-icone (Pleitos): nao pode empurrar a largura */
.pw-btn--so { position: relative; }
.pw-btn-n {
    position: absolute; top: -3px; right: -3px;
    min-width: 14px; height: 14px; padding: 0 3px;
    border-radius: 7px; background: var(--marca-fundo); color: var(--sobre-marca);
    font-size: 9px; font-weight: var(--peso-forte); line-height: 14px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.pw-btn:hover { background: var(--pw-sup3); border-color: var(--pw-borda); }
.pw-btn:focus-visible { outline: 2px solid var(--acao); outline-offset: 0; border-color: var(--acao); box-shadow: none; }
.pw-btn:active { transform: translateY(.5px); }
/* O primario da bancada era quase preto (--pw-tinta, #21242c), enquanto o
   primario do resto do sistema e vinho. Duas linguagens de botao no mesmo
   produto e exatamente o que faz a tela parecer remendo. */
/* Fundo de botao usa --marca-fundo, nunca --marca: no tema escuro a marca
   CLAREIA pra ser vista sobre carvao, e clarear o fundo derruba o branco em
   cima pra 3,19:1. Medido na tela, nao deduzido. */
.pw-btn.pri { background: var(--marca-fundo); color: var(--sobre-marca); border-color: var(--marca-fundo); font-weight: var(--peso-enfase); }
.pw-btn.pri:hover { background: var(--marca-forte); border-color: var(--marca-forte); }
.pw-btn .ico { width: 15px; height: 15px; flex: none; opacity: .7; }
.pw-btn:hover .ico { opacity: .9; }
.pw-btn.pri .ico { opacity: 1; }
.pw-btn.perigo { color: var(--pw-critico); }
.pw-hint { font-size: var(--txt-densa); color: var(--tinta-2); }

/* ---- BANCADA: ESTADO SEPARADO DE ACAO (05/09/2026) ----
   O Diretor: "deixar mais organizado, melhorar letras e tamanho".
   O problema nao era fonte, era mistura. Numa fila unica conviviam a busca,
   nove botoes e o RESUMO da planilha. Resumo e informacao: voce le. Botao e
   acao: voce clica. Estavam com o mesmo peso, na mesma linha, e por isso o
   olho nao tinha onde pousar.
   Agora sao duas faixas: em cima o que a planilha DIZ, embaixo o que voce
   pode FAZER, com os botoes agrupados por natureza e divisor entre grupos. */
.pw-estado {
    display: flex; flex-wrap: wrap; gap: 0;
    border: 1px solid var(--pw-borda); border-radius: var(--raio-1);
    background: var(--pw-sup1);
    margin: 2px 0 var(--esp-2);
    overflow: hidden;
}
.pw-estado-it {
    flex: 1 1 132px; padding: 6px 13px;
    border-right: 1px solid var(--pw-borda);
}
.pw-estado-it:last-child { border-right: 0; }
/* Numero e rotulo na MESMA linha: numa planilha densa, cada pixel de altura
   sai de linha de servico visivel. Empilhado custava 67px; deitado custa 46. */
.pw-estado-t { display: flex; align-items: baseline; gap: 6px; }
.pw-estado-n {
    font-size: 18px; line-height: 1.05; font-weight: var(--peso-forte);
    font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
}
.pw-estado-r {
    font-size: var(--txt-rotulo); letter-spacing: .02em;
    color: var(--tinta-3); font-weight: var(--peso-enfase);
}
.pw-estado-s { margin-top: 1px; font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.35; }
.pw-estado-it.ok    .pw-estado-n { color: var(--pw-ok); }
.pw-estado-it.falta .pw-estado-n { color: var(--pw-critico); }
.pw-estado-it.sobra .pw-estado-n { color: var(--pw-info); }
.pw-estado-it.pend  .pw-estado-n { color: var(--tinta-1); }

/* Grupo de botoes: o que pertence junto anda junto, e o divisor diz isso sem
   precisar de rotulo. */
.pw-grupo { display: inline-flex; align-items: center; gap: var(--esp-1); }
.pw-div {
    width: 1px; align-self: center; height: 16px;
    background: var(--pw-borda); margin: 0 3px;
}
.pw-esp { flex: 1 1 auto; }
/* Undo/redo sao gemeos: mesma largura, colados, longe do resto. */
.pw-btn--icone { padding: 0; width: 26px; justify-content: center; }

/* BUSCA DA BANCADA, versao 2 (31/08/2026, depois do "nao esta bom").
   Barra compacta: lupa e contador DENTRO do campo, setas coladas nele. */
.pw-busca { display: inline-flex; align-items: center; gap: 0; position: relative;
    border: 1px solid var(--pw-borda); border-radius: 7px; background: var(--pw-sup1);
    height: 24px; padding: 0 2px 0 6px; }
.pw-busca:focus-within { border-color: var(--primaria); box-shadow: var(--anel-foco); }
.pw-busca-lupa { width: 12px; height: 12px; flex: none; fill: none;
    stroke: var(--pw-claro); stroke-width: 1.7; stroke-linecap: round; }
.pw-busca-in { border: none; background: transparent; outline: none; font-family: inherit;
    font-size: 10.5px; color: var(--pw-tinta); width: 190px; padding: 0 6px; height: 22px; }
.pw-busca-cont{ font-size: var(--txt-densa); color: var(--tinta-2); font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
    padding: 0 5px; white-space: nowrap; }
.pw-busca-cont[data-vazio] { color: var(--st-critico); font-weight: 700; }
.pw-busca-navs { display: inline-flex; border-left: 1px solid var(--pw-borda); margin-left: 2px; }
.pw-busca-nav { border: none; background: transparent; cursor: pointer; color: var(--pw-tinta);
    font-size: 12px; line-height: 1; width: 20px; height: 22px; border-radius: 4px; font-family: inherit; }
.pw-busca-nav:hover { background: var(--pw-sup3); }

/* A PALAVRA encontrada, nao so a linha. Era o que faltava: o Diretor achava a
   linha e continuava procurando a palavra dentro dela. */
mark.pw-mk { background:color-mix(in srgb, var(--st-atencao) 42%, var(--sup-1)); color: inherit;
    border-radius: 2px; padding: 0 1px; }
tr.pw-hit-atual mark.pw-mk { background: var(--st-atencao); color:var(--sobre-marca); font-weight: 700; }
/* Campo de digitacao NAO aceita <mark> dentro, e a descricao do servico, que
   e justamente o que mais se procura, mora num <input>. Borda fina ali passava
   despercebida. Entao o campo inteiro se acende, com a mesma cor do <mark>:
   quem varre a tela ve a mesma marca amarela nos dois casos. */
.pw-mk-in { background:color-mix(in srgb, var(--st-atencao) 30%, var(--sup-1)) !important;
    border-radius: 3px; padding: 0 3px !important; }
tr.pw-hit-atual .pw-mk-in { background:color-mix(in srgb, var(--st-atencao) 55%, var(--sup-1)) !important;
    font-weight: 600; }

/* Linha: os achados ficam discretos, o ATUAL grita. */
tr.pw-hit > td { background: color-mix(in srgb, var(--st-atencao) 9%, var(--pw-sup1)) !important; }
tr.pw-hit-atual > td { background: color-mix(in srgb, var(--st-atencao) 20%, var(--pw-sup1)) !important; }
tr.pw-hit-atual > td:first-child { box-shadow: inset 3px 0 0 var(--st-atencao); }
/* O resumo carrega contratado, levantado e diferença: é o dinheiro da tela e
   estava espremido no canto em 10,5px, com o mesmo peso do botão ao lado.
   Vira bloco com rótulo em cima e valor embaixo, que é como se lê número. */
.pw-resumo { margin-left: auto; display: flex; gap: var(--esp-4); flex-wrap: wrap;
    font-size: var(--txt-densa); align-items: flex-end; }
/* Cor NUNCA vai sozinha (WCAG 1.4.1, e o sol do canteiro): peso 700 junto,
   sempre. Teste rapido: tire a cor no devtools e veja se ainda da pra operar. */
.pw-res--ok      { color: var(--pw-ok); font-weight: var(--peso-forte); }
.pw-res--falta   { color: var(--pw-critico); font-weight: var(--peso-forte); }
.pw-res--sobra   { color: var(--pw-info); font-weight: var(--peso-forte); }
.pw-res--pend    { color: var(--tinta-2); font-weight: var(--peso-corpo); }
.pw-resumo > span{ display: flex; flex-direction: column; gap: 1px; line-height: 1.15;
    font-family: var(--fonte-dado); font-variant-numeric: tabular-nums;
    font-size: var(--txt-destaque); font-weight: var(--peso-forte); color: var(--tinta-1); }
/* --tinta-2 e não --pw-claro: rótulo em cinza claro sobre fundo cinza dá
   ~4,3:1 e reprova em 10px. */
.pw-rotulo { font-size: var(--txt-rotulo); font-weight: var(--peso-enfase);
    text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
/* 8,5px era menor que a legenda de rodapé de contrato. Sobe pro rótulo. */
.pw-chip { display: inline-flex; align-items: center; font-size: var(--txt-rotulo);
    font-weight: var(--peso-enfase); padding: 1px var(--esp-1); border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.pw-chip.ok { background: color-mix(in srgb, var(--pw-ok) 9%, var(--pw-sup1)); color: color-mix(in srgb, var(--pw-ok) 82%, var(--tinta-1)); }
.pw-chip.falta { background: color-mix(in srgb, var(--pw-critico) 9%, var(--pw-sup1)); color: color-mix(in srgb, var(--pw-critico) 82%, var(--tinta-1)); }
.pw-chip.pend { background: var(--pw-sup3); color: var(--pw-claro); }
.pw-chip.sobra { background: color-mix(in srgb, var(--pw-info) 9%, var(--pw-sup1)); color: color-mix(in srgb, var(--pw-info) 82%, var(--tinta-1)); }
.pw-chip.aviso { background: color-mix(in srgb, var(--pw-atencao) 9%, var(--pw-sup1)); color: color-mix(in srgb, var(--pw-atencao) 82%, var(--tinta-1)); }
table.pw-tab { width: 100%; border-collapse: collapse; font-size: var(--txt-densa); }
table.pw-tab thead td { font-size: var(--txt-rotulo); font-weight: var(--peso-enfase);
    text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2);
    padding: var(--esp-2) var(--esp-2) var(--esp-1); border-bottom: 1px solid var(--borda);
    position: sticky; top: 0; background: var(--pw-sup1); z-index: 2; white-space: nowrap; }
/* 3px de respiro numa planilha de 110 linhas é o que faz o olho perder a
   linha ao correr o dedo pela coluna. A altura vem do token. */
table.pw-tab td { padding: 0 var(--esp-2); height: var(--alt-compacto);
    border-bottom: 1px solid var(--pw-sup3); vertical-align: middle; white-space: nowrap; }
table.pw-tab tbody tr:hover td { background: var(--sup-2); }
table.pw-tab td.desc { white-space: normal; min-width: 200px; }
table.pw-tab td.num, table.pw-tab .num{ font-family: var(--fonte-num); font-variant-numeric: tabular-nums; text-align: right; }
/* A linha de etapa é estrutura, não estado: fundo próprio e peso, sem cor de
   status. O top do sticky acompanha a altura nova do cabeçalho. */
tr.pw-etapa td { background: var(--pw-sup3); font-weight: var(--peso-forte);
    font-size: var(--txt-densa); letter-spacing: .02em; padding: 0 var(--esp-2);
    height: var(--alt-compacto); cursor: pointer; position: sticky; top: 30px; z-index: 1; }
tr.pw-etapa .rollup { font-weight: var(--peso-corpo); color: var(--tinta-2); font-size: var(--txt-densa); }
tr.pw-etapa.avulso td { background: color-mix(in srgb, var(--pw-atencao) 10%, var(--pw-sup1)); position: static; }
tr.pw-item { cursor: pointer; }
tr.pw-item:hover td { background: var(--pw-sup2); }
tr.pw-item.sel td { background: color-mix(in srgb, var(--marca, #7a1f2b) 9%, var(--pw-sup1)); font-weight: 600; }
tr.pw-item.sel td:first-child::before { content: '▸ '; color: var(--marca, #7a1f2b); }
input.pw-in { font-family: var(--fonte-num); width: 78px; text-align: right; font-size: 10.5px; border: 1px solid var(--pw-borda); border-radius: 4px; padding: 1px 5px; font-variant-numeric: tabular-nums; background: var(--pw-sup1); color: var(--pw-tinta); }
input.pw-in.txt { text-align: left; width: 100%; }
select.pw-sel { font-size: 10.5px; font-family: inherit; border: 1px solid var(--pw-borda); border-radius: 4px; padding: 1px 4px; background: var(--pw-sup1); color: var(--pw-tinta); }
/* Aprovar pleito (13/10/2026): trava no topo, totais e rodapé */
.pw-pl-trava { border: 1px solid var(--st-critico); background: var(--st-critico-tinta); color: var(--st-critico); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; }
.pw-pl-trava ul { margin: 4px 0 6px 18px; padding: 0; }
.pw-pl-aviso { border: 1px solid var(--st-atencao); background: var(--st-atencao-tinta); color: var(--st-atencao); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; font-size: 12.5px; }
/* Helena (13/10/2026): resposta verde, linha em conflito, barra contra o teto,
   e um bloco por item abaixo de 600 px */
.pw-pl-pronto { border: 1px solid var(--st-ok); background: var(--st-ok-tinta); color: var(--st-ok); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; }
.pw-pl-linha--conflito > td { background: var(--st-critico-tinta); }
.pw-pl-linha--conflito .cm-chip--critico { border: 1px solid var(--st-critico); }
.pw-pl-barra { display: block; height: 4px; border-radius: 2px; background: var(--pw-sup3, var(--borda)); overflow: hidden; margin: 4px 0 2px; }
.pw-pl-barra > span { display: block; height: 100%; }
.pw-pl-tab .pw-pl-c-resumo { display: none; }
@media (max-width: 600px) {
    .pw-pl-tab thead { display: none; }
    .pw-pl-tab, .pw-pl-tab tbody, .pw-pl-tab tr { display: block; width: 100%; }
    .pw-pl-tab tr.pw-pl-linha { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--pw-borda); }
    .pw-pl-tab tr.pw-pl-linha > td { display: none; border: 0; padding: 0; }
    .pw-pl-tab tr.pw-pl-linha > td.pw-pl-c-item { display: block; grid-row: 1; grid-column: 1; }
    .pw-pl-tab tr.pw-pl-linha > td.pw-pl-c-mud { display: block; grid-row: 1; grid-column: 2; text-align: right; }
    .pw-pl-tab tr.pw-pl-linha > td.pw-pl-c-resumo { display: block; grid-row: 2; grid-column: 1 / -1; text-align: left; margin-top: 2px; }
    .pw-pl-tab tr.pw-pl-linha--conflito { background: var(--st-critico-tinta); }
    .pw-pl-tab tr.pw-pl-linha--conflito > td { background: transparent; }
    .pw-pl-tab tr.pw-pl-linha > td.pw-pl-c-desc { display: block; grid-row: 3; grid-column: 1 / -1; font-size: 11px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
.pw-pl-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 10px; }
.pw-pl-totais > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--pw-borda); border-radius: 8px; }
.pw-pl-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--pw-borda); }
.pw-btn[disabled] { opacity: .5; cursor: not-allowed; }
.pw-overlay { position: fixed; inset: 0; background: var(--escrim); z-index: var(--z-janela); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.pw-modal { width: min(1180px, 100%); background: var(--pw-sup1); border: 1px solid var(--pw-borda); border-radius: 12px; box-shadow: 0 10px 40px rgba(20,24,40,.22); overflow: hidden; }
.pw-modal-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--pw-borda); flex-wrap: wrap; }
.pw-modal-head b { font-size: 12.5px; }
.pw-abas { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--pw-borda); background: var(--pw-sup2); overflow-x: auto; }
.pw-aba { font-size: 10.5px; font-weight: 600; padding: 7px 12px; color: var(--pw-claro); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.pw-aba.on { color: var(--pw-tinta); border-bottom-color: var(--pw-tinta); background: var(--pw-sup1); }
.pw-corpo { padding: 12px 16px; font-size: 11px; }
.pw-grid { display: grid; gap: 10px 14px; }
.pw-campo label { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--pw-claro); margin-bottom: 2px; }
.pw-fixo { font-size: 11px; font-weight: 600; }
.pw-cartoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pw-cartao { flex: 1; min-width: 130px; background: var(--pw-sup2); border: 1px solid var(--pw-sup3); border-radius: 8px; padding: 6px 10px; }
.pw-cartao .v{ font-size: 12.5px; font-weight: 700; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; margin-top: 1px; }
.pw-cartao .s { font-size: 9.5px; color: var(--pw-claro); }
.pw-bloco { border: 1px solid var(--pw-sup3); border-radius: 8px; padding: 8px 10px; margin-top: 10px; }
.pw-formulabar { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 10.5px; background: var(--pw-sup2); border: 1px solid var(--pw-sup3); border-radius: 6px; padding: 4px 8px; flex-wrap: wrap; }
tr.pw-sub td { background: var(--pw-sup2); font-size: 10px; }
tr.pw-sub:hover td { background: var(--pw-sup3); }
tr.pw-sub2 td { background: var(--pw-sup1); font-size: 9.5px; border-bottom-style: dashed; }
tr.pw-sub2:hover td { background: var(--pw-sup2); }
/* Escala de cores por nível da governança (riscado 2026-08-28):
   item = branco · local = azul 8% com filete · aplicação = azul 3,5% */
tr.pw-sub td { background: color-mix(in srgb, var(--pw-info) 8%, var(--pw-sup1)); font-size: 10px; box-shadow: inset 2px 0 0 color-mix(in srgb, var(--pw-info) 45%, transparent); }
tr.pw-sub:hover td { background: color-mix(in srgb, var(--pw-info) 13%, var(--pw-sup1)); }
tr.pw-sub2 td { background: color-mix(in srgb, var(--pw-info) 3.5%, var(--pw-sup1)); font-size: 9.5px; border-bottom-style: dashed; box-shadow: inset 2px 0 0 color-mix(in srgb, var(--pw-info) 22%, transparent); }
tr.pw-sub2:hover td { background: color-mix(in srgb, var(--pw-info) 8%, var(--pw-sup1)); }
.pw-chip.loc { background: color-mix(in srgb, var(--pw-info) 9%, var(--pw-sup1)); color: var(--pw-info); text-transform: none; }
.pw-chip.ap { background: transparent; border: 1px solid color-mix(in srgb, var(--pw-info) 35%, transparent); color: var(--pw-claro); font-weight: 600; text-transform: none; }
/* Governança — REFORMA VISUAL 2026-08-28 (reprovada a versão com filetes
   e fundos azuis): hierarquia por recuo + quadradinho de cor do nível;
   linhas sem destaque de separação. Tags do item abaixo do código, nas
   MESMAS cores dos níveis. */
tr.pw-sub td, tr.pw-sub2 td { background: var(--pw-sup1); box-shadow: none; }
tr.pw-sub:hover td, tr.pw-sub2:hover td { background: var(--pw-sup2); box-shadow: none; }
tr.pw-sub td { font-size: 10px; border-bottom: 1px solid var(--pw-sup3); }
tr.pw-sub2 td { font-size: 9.5px; border-bottom: 1px dashed var(--pw-sup3); }
.pw-nivel { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.pw-nivel.loc { background: var(--pw-info); }
.pw-nivel.ap { background: color-mix(in srgb, var(--pw-info) 40%, var(--pw-sup1)); }
.pw-tagmini { display: inline-block; font-size: 8.5px; font-weight: 700; padding: 0 5px; border-radius: 7px; margin: 1px 3px 0 0; }
.pw-tagmini.loc { background: color-mix(in srgb, var(--pw-info) 9%, var(--pw-sup1)); color: var(--pw-info); }
.pw-tagmini.ap { background: color-mix(in srgb, var(--pw-info) 5%, var(--pw-sup1)); color: color-mix(in srgb, var(--pw-info) 55%, var(--pw-claro)); }
/* Linha do ITEM de serviço em cinza claro (riscado 2026-08-28) — faixa
   âncora de cada bloco: etapa (mais escura) > item (cinza claro) >
   local/aplicação (brancas). Seleção em vinho continua por cima. */
tr.pw-item:not(.pw-sub):not(.pw-sub2) td { background: var(--pw-sup2); }
tr.pw-item:not(.pw-sub):not(.pw-sub2):hover td { background: var(--pw-sup3); }
tr.pw-item.sel:not(.pw-sub):not(.pw-sub2) td { background: color-mix(in srgb, var(--marca, #7a1f2b) 9%, var(--pw-sup1)); }
/* Etapas/categorias um degrau mais escuras (riscado 2026-08-28) */
tr.pw-etapa td { background: color-mix(in srgb, var(--pw-tinta) 8%, var(--pw-sup3)); }

/* ==== Leitura das TRÊS composições do card de Recursos (riscado pelo
   Diretor 2026-08-29: "o quadro de contratado e o realizado podem ter uma
   cor de fundo diferente... só para visualizarmos melhor a diferença").
   Estudo: Contratado = referência selada e imutável → ÂMBAR do sistema
   (dourado terroso #9a6b12 a 6%, não amarelo de aviso: o quadro é grande
   e amarelo saturado cansa e briga com o vinho da marca). Executado =
   fato consumado do campo → VERDE do sistema a 6% (mesma cor de
   "Confere"). PLANEJADO fica NEUTRO de propósito: é a área de trabalho, e
   com os três coloridos nenhum se destacaria — branco no meio faz as duas
   cores virarem âncoras de leitura (referência em cima, realidade
   embaixo). 6% mantém contraste AA do texto e não suja os campos. ==== */
.pw-bloco--ref { background: color-mix(in srgb, var(--pw-atencao) 6%, var(--pw-sup1)); border-color: color-mix(in srgb, var(--pw-atencao) 26%, var(--pw-sup3)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pw-atencao) 45%, transparent); }
.pw-bloco--exec { background: color-mix(in srgb, var(--pw-ok) 6%, var(--pw-sup1)); border-color: color-mix(in srgb, var(--pw-ok) 24%, var(--pw-sup3)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pw-ok) 45%, transparent); }
.pw-bloco--ref > .pw-rotulo { color: color-mix(in srgb, var(--pw-atencao) 78%, var(--pw-tinta)); }
.pw-bloco--exec > .pw-rotulo { color: color-mix(in srgb, var(--pw-ok) 72%, var(--pw-tinta)); }
/* cabeçalho sticky da tabela acompanha o fundo do bloco (senão fica uma
   faixa branca flutuando sobre a cor ao rolar) */
.pw-bloco--ref table.pw-tab thead td { background: color-mix(in srgb, var(--pw-atencao) 10%, var(--pw-sup1)); }
.pw-bloco--exec table.pw-tab thead td { background: color-mix(in srgb, var(--pw-ok) 10%, var(--pw-sup1)); }
/* linha marcada para exclusão em lote */
tr.pw-sel-linha td { background: color-mix(in srgb, var(--pw-critico) 7%, var(--pw-sup1)); }
/* contraste do texto cinza sobre os fundos coloridos (achado do revisor
   2026-08-29: --pw-claro #7a8090 sobre âmbar/verde ficava abaixo de AA
   num texto de 9px maiúsculo) */
.pw-bloco--ref table.pw-tab thead td, .pw-bloco--exec table.pw-tab thead td,
.pw-bloco--ref .pw-hint, .pw-bloco--exec .pw-hint { color: color-mix(in srgb, var(--pw-claro) 45%, var(--pw-tinta)); }
.pw-bloco--ref table.pw-tab td[style*="var(--pw-claro)"], .pw-bloco--exec table.pw-tab td[style*="var(--pw-claro)"] { color: color-mix(in srgb, var(--pw-claro) 45%, var(--pw-tinta)) !important; }

/* ==========================================================================
   UTILITARIAS DA FAXINA (02/09/2026), NO FIM DO ARQUIVO DE PROPOSITO

   Achado do revisor, e ele e sutil: style inline vence de TODAS as regras;
   uma classe de especificidade 0,1,0 nao vence de ninguem. Trocar inline por
   classe sem olhar a cascata reverte silenciosamente a intencao de quem
   escreveu a linha. Aconteceu em 7 lugares: a calculadora voltou a alinhar
   a esquerda, o rotulo do painel de EVM cresceu de 10 para 12,5px.

   Duas coisas resolvem, e as duas sao necessarias:
   1. o bloco fica no FIM, entao ganha o desempate por ordem de tudo que tem
      a mesma especificidade (.plan-corpo, .cm-btn, .orc-hint);
   2. o seletor e DOBRADO (.cm-dir.cm-dir.cm-dir = 0,2,0), entao vence tambem os
      componentes de formulario, que sao elemento + classe (0,1,1).
   Nao usar !important: ele tira do proximo a chance de sobrescrever, e a
   utilitaria precisa continuar perdendo pra quem for MAIS especifico de
   proposito, como um estado :disabled.

   Se algum dia isto virar @layer, a dobra sai e a camada resolve sozinha.
   ========================================================================== */
.cm-fraco.cm-fraco               { color: var(--tinta-3); }
.cm-secundario.cm-secundario     { color: var(--tinta-2); }
.cm-apagado.cm-apagado           { color: var(--tinta-4); }

/* <small> é a única tag do HTML com tamanho RELATIVO e sem regra nossa: o
   navegador aplica `smaller`, que é 0,833x do pai. Em td de 13px isso dava
   10,83px; em td de 12,5px, 10,42px. Como o que vai dentro dela é número de
   processo, CNPJ e secretaria, o identificador da licitação aparecia em três
   tamanhos quebrados diferentes conforme a tabela. Vale para as 31 do sistema;
   as cinco regras `.classe small` que definem tamanho próprio continuam
   vencendo, por especificidade. */
small { font-size: var(--txt-densa); }
.cm-dir.cm-dir.cm-dir            { text-align: right; }
.cm-cen.cm-cen.cm-cen            { text-align: center; }
.cm-esq.cm-esq.cm-esq            { text-align: left; }
.cm-caixa.cm-caixa               { text-transform: uppercase; letter-spacing: .05em; }
.cm-nowrap.cm-nowrap             { white-space: nowrap; }
.cm-normal.cm-normal             { font-weight: var(--peso-corpo); }
.cm-enfase.cm-enfase             { font-weight: var(--peso-enfase); }
.cm-forte.cm-forte               { font-weight: var(--peso-forte); }
.cm-t-rotulo.cm-t-rotulo         { font-size: var(--txt-rotulo); }
.cm-t-densa.cm-t-densa           { font-size: var(--txt-densa); }
.cm-t-corpo.cm-t-corpo           { font-size: var(--txt-corpo); }
.cm-cheio.cm-cheio               { width: 100%; }
.cm-flex1.cm-flex1               { flex: 1; }
.cm-bloco2.cm-bloco2             { display: block; }
.cm-clicavel.cm-clicavel         { cursor: pointer; }

/* Espaco e corte de texto: o que sobrou da faxina de Obras eram margens de
   2, 4, 6 e 14px escritas na linha, cada uma escolhida no olho. Viram degraus
   da escala --esp-*, que ja existe. Nao e so arrumacao: 2px e 4px lado a lado
   nao sao decisao, sao ruido, e quem le a tela sente o desalinhamento sem
   saber nomear.
   O ideal seria gap no elemento pai, mas isso e refatoracao de estrutura;
   utilitaria resolve hoje sem quebrar nada. */
.cm-mt-1                         { margin-top: var(--esp-1); }
.cm-mt-2                         { margin-top: var(--esp-2); }
.cm-mt-3                         { margin-top: var(--esp-3); }
.cm-mt-4                         { margin-top: var(--esp-4); }
.cm-mb-1                         { margin-bottom: var(--esp-1); }
.cm-mb-2                         { margin-bottom: var(--esp-2); }
.cm-mb-3                         { margin-bottom: var(--esp-3); }
.cm-p-chip                       { padding: 1px 6px; }
.cm-p-1                          { padding: var(--esp-1); }
.cm-p-cel                        { padding: 4px 8px; }
/* Corta com reticencia. Precisa de min-width:0 para funcionar dentro de flex,
   o que quase todo mundo esquece e o texto estoura a coluna em silencio. */
.cm-corta                        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ==========================================================================
   TEMA CLARO E ESCURO (02/09/2026)

   Pedido do Diretor com o print do Asana na mao: duas opcoes de cor na
   configuracao, barra lateral escura, e fundo com textura nos paineis.

   E uma correcao que eu devo a ele. De manha eu tirei a barra lateral vinho
   escura argumentando que "barra escura e cara de sistema antigo". O Asana,
   que ele admira, tem barra escura. Eu nao estava certo do jeito que falei:
   o que envelhece nao e o escuro, e o escuro SATURADO DE MARCA. Carvao
   neutro funciona como moldura e deixa a cor do conteudo brilhar; vinho
   chapado colore tudo e briga com o dado. A barra escura volta como TEMA,
   e neutra.

   COMO FUNCIONA, e por que nao e so pintar
   O tema troca os TOKENS, nunca os componentes. Componente que le token
   acompanha de graca; componente com cor escrita na linha fica pra tras e
   aparece como MANCHA CLARA no escuro. Isso e de proposito: o tema escuro e
   o verificador da tokenizacao, o teste que a faxina nao tinha.

   TRES ESTADOS, nao dois. `data-tema` explicito ganha sempre; sem atributo,
   segue o sistema operacional. Quem escolheu claro num computador escuro
   tem que continuar no claro.

   A marca CLAREIA no escuro (#9d1f31 -> #d24d60) porque vinho escuro sobre
   carvao nao tem contraste. E a marca, o vinho, nunca vira status: continua
   valendo a regra da casa.
   ========================================================================== */

:root[data-tema="claro"] { color-scheme: light; }

/* -- a paleta escura, definida uma vez e usada nos dois gatilhos -- */
:root[data-tema="escuro"] {
    color-scheme: dark;
    --sup-fundo: #15171c;  --sup-1: #1d2027;  --sup-2: #24282f;  --sup-3: #2d323b;
    --tinta-1: #e9ebf0;    --tinta-2: #c2c9d6;  --tinta-3: #99a0ae;  --tinta-4: #89909e;  --tinta-desab: #69707e;
        /* --ink pinta KPI, titulo de secao e a tela de login. Sem ele aqui,
           #10151d sobre #1d2027 da 1,1:1 e o numero do KPI desaparece. */
        --ink: #e9ebf0;
    --borda: #2d323b;      --borda-forte: #434a56;  --linha-sutil: #262a31;
    --barra: #191c22;      --barra-item: #262a31;   --barra-ativo: #3a2028;
    --marca: #e26a7b;      --marca-forte: #ef8290;  --marca-tinta: #3a2028;
        --marca-fundo: #b8394a;
    --acao: #5aa9e6;       --acao-suave: #1e3346;
    --st-info: #6aa9f0;    --st-info-tinta: #1b2c42;
    --st-ok: #4cc38a;      --st-ok-tinta: #143028;
    --st-atencao: #e8a33d; --st-atencao-tinta: #3a2c14;
    --st-critico: #f27a52; --st-critico-tinta: #3d2119;
    --st-neutro: #99a0ae;  --st-neutro-tinta: #2d323b;
    /* nomes antigos, que dezenas de estilos inline ainda referenciam */
    --branco: #1d2027;     --fundo: #15171c;    --cinza-claro: #24282f;
    --cinza: #2d323b;      --texto: #e9ebf0;    --texto-claro: #99a0ae;
    --bordao: #e26a7b;     --bordao-claro: #ef8290;  --primaria: #e26a7b;
    --primaria-suave: #3a2028;
    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 4px 12px rgba(0,0,0,.5);
    --elev-1: 0 1px 2px rgba(0,0,0,.4);
    --elev-2: 0 4px 14px rgba(0,0,0,.5);
    --anel-foco: 0 0 0 3px rgba(90, 169, 230, .35);
    /* Onda 0: escrim mais denso no escuro (50% sobre carvão quase não separa);
       fundo perigoso #b83a15 dá 5,75:1 com branco; IA em dois tons de ação, como no claro (Onda 3). */
    --escrim: rgba(0, 0, 0, 0.62);
    --st-critico-fundo: #b83a15;
    --marca-fundo-hover: #9c2d3d;
    --ia-de: var(--acao-ia); --ia-ate: var(--acao-ia-escuro);
    /* --setor-* no escuro: MESMO matiz, luminosidade subida para ler
       no fundo carvao. Nenhuma cor nova, e o balde "nao sei" continua
       cinza neutro (nao pode desaparecer no fundo). */
    --setor-dir:  #7b9bd1;  --setor-cont: #9b90c9;  --setor-eng: #c0a253;
    --setor-com:  #5fa8b8;  --setor-adm:  #b58f7a;  --setor-nd:  #8f97a6;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        color-scheme: dark;
        --sup-fundo: #15171c;  --sup-1: #1d2027;  --sup-2: #24282f;  --sup-3: #2d323b;
        --tinta-1: #e9ebf0;    --tinta-2: #c2c9d6;  --tinta-3: #99a0ae;  --tinta-4: #89909e;  --tinta-desab: #69707e;
        /* --ink pinta KPI, titulo de secao e a tela de login. Sem ele aqui,
           #10151d sobre #1d2027 da 1,1:1 e o numero do KPI desaparece. */
        --ink: #e9ebf0;
        --borda: #2d323b;      --borda-forte: #434a56;  --linha-sutil: #262a31;
        --barra: #191c22;      --barra-item: #262a31;   --barra-ativo: #3a2028;
        --marca: #e26a7b;      --marca-forte: #ef8290;  --marca-tinta: #3a2028;
        --marca-fundo: #b8394a;
        --acao: #5aa9e6;       --acao-suave: #1e3346;
        --st-info: #6aa9f0;    --st-info-tinta: #1b2c42;
        --st-ok: #4cc38a;      --st-ok-tinta: #143028;
        --st-atencao: #e8a33d; --st-atencao-tinta: #3a2c14;
        --st-critico: #f27a52; --st-critico-tinta: #3d2119;
        --st-neutro: #99a0ae;  --st-neutro-tinta: #2d323b;
        --branco: #1d2027;     --fundo: #15171c;    --cinza-claro: #24282f;
        --cinza: #2d323b;      --texto: #e9ebf0;    --texto-claro: #99a0ae;
        --bordao: #e26a7b;     --bordao-claro: #ef8290;  --primaria: #e26a7b;
        --primaria-suave: #3a2028;
        --sombra-1: 0 1px 2px rgba(0,0,0,.4);
        --sombra-2: 0 4px 12px rgba(0,0,0,.5);
        --elev-1: 0 1px 2px rgba(0,0,0,.4);
        --elev-2: 0 4px 14px rgba(0,0,0,.5);
        --anel-foco: 0 0 0 3px rgba(90, 169, 230, .35);
        --escrim: rgba(0, 0, 0, 0.62);
        --st-critico-fundo: #b83a15;
        --marca-fundo-hover: #9c2d3d;
        --ia-de: var(--acao-ia); --ia-ate: var(--acao-ia-escuro);
    /* --setor-* no escuro: MESMO matiz, luminosidade subida para ler
       no fundo carvao. Nenhuma cor nova, e o balde "nao sei" continua
       cinza neutro (nao pode desaparecer no fundo). */
    --setor-dir:  #7b9bd1;  --setor-cont: #9b90c9;  --setor-eng: #c0a253;
    --setor-com:  #5fa8b8;  --setor-adm:  #b58f7a;  --setor-nd:  #8f97a6;
    }
}

/* -- FUNDO COM TEXTURA (o "cinza com desenhos" que ele viu no Asana) --
   Uma grade de pontos de 1px, quase invisivel, que da profundidade ao vazio
   sem virar papel de parede. Ela vive no FUNDO da aplicacao, nunca dentro de
   cartao ou de tabela: textura atras de dado e ruido. */
body {
    /* Sem textura. O Diretor recusou o pontilhado duas vezes, e medindo o
       Asana ficou claro por quê: o fundo deles é branco puro. A profundidade
       vem do contraste entre o cromo escuro e o conteúdo claro, não de padrão
       repetido atrás do dado. */
    background-color: var(--sup-fundo);
}
.painel-conteudo, .conteudo, main { background: transparent; }

/* Trocar de tema nao pode piscar a tela inteira. Transicao curta so no que
   muda de cor, e nada de transicao em transform (que animaria layout). */
body, .sidebar, .card, .cm-bloco, .licitacoes-table, .cm-barra, .cm-ribbon {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
    body, .sidebar, .card, .cm-bloco, .licitacoes-table, .cm-barra, .cm-ribbon {
        transition: none;
    }
}

/* Seletor de tema no rodapé da barra lateral */
.tema-troca {
    display: flex; gap: 2px; margin: var(--esp-2) 10px 0;
    padding: 3px; border-radius: var(--raio-2); background: var(--barra-item);
}
.tema-troca button {
    flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px; border: 0; border-radius: calc(var(--raio-2) - 3px);
    background: transparent; color: var(--tinta-3); cursor: pointer;
    font-family: inherit; font-size: var(--txt-rotulo); font-weight: var(--peso-enfase);
    letter-spacing: .02em; transition: background .15s ease, color .15s ease;
}
.tema-troca button .ico { width: 15px; height: 15px; }
.tema-troca button:hover { color: var(--tinta-1); }
.tema-troca button.ativo { background: var(--sup-1); color: var(--tinta-1); box-shadow: var(--elev-1); }
.tema-troca button:focus-visible { outline: none; box-shadow: var(--anel-foco); }

/* ---------- COMPRAS E CONTRATAÇÕES (02/09/2026) ---------- */
.cmp-tit { font-size: var(--txt-destaque); font-weight: var(--peso-forte); color: var(--tinta-1);
    margin-bottom: var(--esp-1); }
/* A nota explica a RÉGUA antes da tabela. Sem ela, alguém compara compra com
   preço contratado (que tem BDI) e conclui economia onde houve estouro. */
.cmp-nota { font-size: var(--txt-densa); color: var(--tinta-3); margin-bottom: var(--esp-2);
    max-width: 78ch; line-height: 1.45; }
.cmp-tabela td, .cmp-tabela th { padding: var(--esp-2) 12px; }
.cmp-tabela tfoot td { border-top: 2px solid var(--borda-forte); border-bottom: 0; }
/* Estouro nunca se anuncia só por cor: vem com a palavra junto, senão some
   pra quem não distingue vermelho e some no sol do canteiro. */
.cmp-estouro { color: var(--st-critico); font-weight: var(--peso-forte); }

/* Barra de proporção do orçado: realizado cheio, comprometido esmaecido. É a
   diferença entre "já saiu" e "está prometido", que é o que decide caixa. */
.cmp-barra { display: block; height: 4px; margin-top: 5px; border-radius: 2px;
    background: var(--sup-3); overflow: hidden; max-width: 260px; }
.cmp-barra-real, .cmp-barra-comp { display: inline-block; height: 100%; vertical-align: top; }
.cmp-barra-real { background: var(--st-ok); }
.cmp-barra-comp { background: var(--st-atencao); opacity: .55; }

.cmp-aviso, .cmp-alarme { display: flex; align-items: flex-start; gap: var(--esp-2);
    padding: var(--esp-3); border-radius: var(--raio-2); font-size: var(--txt-corpo);
    line-height: 1.5; background: var(--st-info-tinta); color: var(--tinta-1);
    border-left: 3px solid var(--st-info); }
.cmp-aviso.critico, .cmp-alarme.critico { background: var(--st-critico-tinta);
    border-left-color: var(--st-critico); }
.cmp-alarme { margin-bottom: var(--esp-1); background: var(--st-atencao-tinta);
    border-left-color: var(--st-atencao); }
.cmp-alarme:last-child { margin-bottom: 0; }
.cmp-aviso .ico, .cmp-alarme .ico { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; }
.cmp-alarmes { padding: 0; background: transparent; border: 0; box-shadow: none; }
/* Estouro somado NÃO se mistura com o saldo: em obra pública a sobra de uma
   etapa não cobre o furo de outra sem aditivo. */
.cmp-linha-estouro td { border-top: 1px dashed var(--borda-forte); padding-top: var(--esp-2); }
.cmp-linha-estouro td:first-child { color: var(--tinta-2); font-weight: var(--peso-enfase); }
/* Coluna de valor não encolhe até quebrar o número: número partido no meio se
   lê errado de relance, e tabela se lê de relance. */
.cmp-tabela td.cm-num, .cmp-tabela th.cm-dir { white-space: nowrap; width: 1%; }
.cmp-tabela td:first-child, .cmp-tabela th:first-child { width: auto; }
/* Tabela larga rola DENTRO do próprio container. A página nunca rola de lado:
   rolagem horizontal do documento inteiro perde a barra lateral de vista e o
   usuário não acha o caminho de volta. */
.cmp-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
/* Largura mínima só na tabela LARGA (5 colunas). A de destinos tem 2 colunas
   e cabe em qualquer tela: forçar 640 nela criava barra de rolagem à toa, que
   é ruído e ainda escondia o valor. */
.cmp-rolagem--largo > table { min-width: 620px; }
/* min-width:0 é o que falta em 9 de cada 10 rolagens que não rolam: item de
   flex ou grid NÃO encolhe abaixo do próprio conteúdo sem isto, e aí quem
   estica é a página inteira, levando a barra lateral pra fora da tela.
   Aconteceu na primeira versão desta aba: o container marcava 640 de largura
   e 640 de conteúdo, "sem estouro", enquanto o body rolava de lado. */
.cm-bloco { min-width: 0; }
/* Espaço entre os cartões da aba: antes vinha de um `gap` que só existia na
   fixture, o que é o tipo de coisa que fica bonita no teste e desalinhada em
   produção. */
.cmp-cartao + .cmp-cartao { margin-top: var(--esp-4); }
/* NOTA (02/09/2026), pra ninguém reintroduzir isto achando que resolve algo.
   Eu cheguei a adicionar `.tab-content { min-width: 0 }` e o mesmo em
   `.plan-corpo`, diagnosticando um estouro horizontal. O revisor apontou que
   eu tinha medido no DOM ERRADO: a fixture punha a `.tab-content` como filha
   direta do `body` (que é flex), enquanto na produção existe `.main-content`
   no meio, e ela já tem `overflow: hidden`, o que faz o `min-width: auto`
   resolver em zero sozinho.
   Refiz a fixture com a cadeia real e medi em 1280, 900 e 700: as duas regras
   NÃO fazem diferença nenhuma. Foram removidas.
   A lição vale mais que as regras: fixture que não reproduz a cadeia de
   ancestrais da produção não prova bug de layout, prova bug da fixture. */
/* Topo do módulo de Compras: escolher a obra é a primeira decisão da tela. */
.cmp-topo { margin-bottom: var(--esp-4); }
.cmp-topo > select { min-width: 280px; max-width: 460px; }
/* Ficha do compromisso */
.cmp-mt { margin-top: var(--esp-3); }
.cmp-ficha-fundo { position: fixed; inset: 0; background: var(--escrim);
    display: flex; align-items: flex-start; justify-content: center;
    padding: var(--esp-6) var(--esp-4); z-index: var(--z-janela); overflow-y: auto; }
.cmp-ficha { background: var(--sup-1); border-radius: var(--raio-3, 14px);
    box-shadow: var(--elev-2); padding: var(--esp-4); width: 100%; max-width: 620px; }
.cmp-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3);
    margin-top: var(--esp-3); }
.cmp-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-campo > span { font-size: var(--txt-rotulo); font-weight: var(--peso-enfase);
    text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); }
.cmp-campo:first-child { grid-column: 1 / -1; }
.cmp-vinculo { margin-top: var(--esp-4); padding-top: var(--esp-3);
    border-top: 1px solid var(--borda); }
@media (max-width: 620px) { .cmp-form { grid-template-columns: 1fr; } }

/* ---------- CROMO ESCURO: o que vive DENTRO da moldura (02/09/2026) ----------
   Barra lateral e topo passaram a ser #2a2c2e, então tudo que mora neles
   precisa clarear junto. Sem isto seria texto escuro sobre fundo escuro, que é
   exatamente o defeito que o tema escuro me ensinou a caçar, só que aqui em
   produção e no tema CLARO. */
/* O CROMO ESCURO REDEFINE OS TOKENS DE TINTA PRA QUEM MORA DENTRO DELE.
   Listar elemento por elemento foi o meu erro na primeira versão: "Drive
   desconectado", "Central de Alertas" e o contador de alertas ficaram em
   tinta escura sobre o carvão, ilegíveis. É o mesmo defeito que o tema
   escuro me ensinou a caçar, cometido de novo e no tema CLARO.
   Redefinir os tokens no escopo resolve para tudo que já existe E para o que
   for acrescentado depois, que é o ponto. */
.sidebar, .header {
    color: var(--barra-tinta);
    --tinta-1: #ffffff;
    --tinta-2: var(--barra-tinta);
    --tinta-3: var(--barra-tinta-fraca);
    --tinta-4: #7c7e80;
    --texto: var(--barra-tinta);
    --texto-claro: var(--barra-tinta-fraca);
    --ink: #ffffff;
    --borda: rgba(255,255,255,.14);
    --borda-forte: rgba(255,255,255,.24);
    --sup-1: rgba(255,255,255,.06);
    --sup-2: rgba(255,255,255,.09);
    --sup-3: rgba(255,255,255,.12);
    --branco: rgba(255,255,255,.08);
    --cinza-claro: rgba(255,255,255,.08);
    --marca: #e8879a;          /* o vinho clareia pra ser visto sobre carvão */
    --primaria: #e8879a;
    --acao: #7db8ea;
}
.sidebar .menu-item, .header .header-text h1 { color: var(--barra-tinta); }
.sidebar .menu-section-title { color: var(--barra-tinta-fraca); }
.sidebar .sidebar-logo-texto, .sidebar .sidebar-logo-sub { color: var(--barra-tinta); }
.header .header-text .date, .header .status-dot { color: var(--barra-tinta-fraca); }
.sidebar .ico, .header .ico { color: currentColor; }
/* O seletor de tema no rodapé da barra vive sobre o carvão agora. */
.tema-troca { background: rgba(255,255,255,.06); }
.tema-troca button { color: var(--barra-tinta-fraca); }
.tema-troca button:hover { color: #fff; }
.tema-troca button.ativo { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
/* No tema ESCURO o cromo já é escuro por natureza: o carvão da barra fica um
   passo mais escuro que o cartão, senão a moldura some. */
:root[data-tema="escuro"] .sidebar,
:root[data-tema="escuro"] .header {
    /* No tema escuro o cromo já nasce escuro: os tokens do próprio tema
       servem, e forçar os do bloco acima criaria um segundo sistema. */
    --tinta-1: #e9ebf0; --tinta-2: #c2c9d6; --tinta-3: #99a0ae; --tinta-4: #89909e;
    --marca: #e26a7b; --primaria: #e26a7b; --acao: #5aa9e6;
    --borda: rgba(255,255,255,.10);
    color: var(--tinta-1);
}

/* ---------- LINHA SEM GRADE (medido no Asana: borda transparente) ----------
   Grade fechada é o que dá cara de planilha do Access. A lista respira mesmo
   densa quando a separação vem do espaçamento, não de uma régua em cada linha.
   A régua fica só onde ela SEPARA de verdade: cabeçalho e rodapé de total. */
.licitacoes-table tbody tr td { border-bottom-color: transparent; }
.licitacoes-table tbody tr:hover td { background: var(--sup-2); }
.licitacoes-table thead th { border-bottom: 1px solid var(--borda); }
.cmp-tabela tfoot td { border-top: 1px solid var(--borda-forte); }

/* ---------- CABEÇALHO SOBRE O CROMO ESCURO (02/09/2026) ---------- */
/* O e-mail saía em --texto-claro, que sobre o carvão é ilegível. */
.header .user-email { color: var(--barra-tinta-fraca); font-size: 12px; max-width: 200px; }
.header .header-text h1 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
/* "Online" e "Drive" são estado de fundo, não manchete: ficam discretos e só
   chamam atenção quando há problema. */
.header .status-dot { font-size: 11px; font-weight: var(--peso-enfase); }
.header .drive-indicador { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14);
    color: var(--barra-tinta-fraca); font-size: 11px; }
.header .drive-indicador.conectado { background: rgba(76,195,138,.16); border-color: rgba(76,195,138,.32);
    color: #7fe0ab; }
/* Botão de sair e sino: só o ícone, sobre o carvão. */
.header .btn, .header button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14);
    color: var(--barra-tinta); }
.header .btn:hover, .header button:hover { background: rgba(255,255,255,.16); color: #fff; }
/* O contador de alertas herdava a tinta escura do bloco do cromo e ficava
   invisível sobre o próprio âmbar. Ele tem fundo próprio, então precisa da
   sua cor explícita, não da herdada do escopo. */
.header .alertas-badge-contador { color: #1d2027; }
.header .alertas-badge-contador.critico { color: #ffffff; }
/* Visões de fábrica da EAP: Decidir, Executar, Faturar. */
.obra-visoes button { min-width: 62px; }
/* "colunas próprias" é FRASE, não rótulo: --txt-rotulo (10px) só vale em
   caixa-alta espaçada, e esta linha se lê como texto. */
.obra-visao-livre { align-self: center; margin-left: var(--esp-2); font-size: var(--txt-densa);
    color: var(--tinta-3); font-style: italic; white-space: nowrap; }
/* Ícone no cabeçalho de coluna: 13px, igual ao da faixa de grupo acima, e
   opacidade um pouco menor que o dado, porque cabeçalho orienta e não compete
   com o número que a pessoa veio ler. */
[data-col] > svg.ico { width: 13px; height: 13px; flex-shrink: 0; opacity: .7; }

/* FAIXA DE GRUPO DO CABEÇALHO DA EAP (02/09/2026).
   O ícone não pode herdar 1em daqui: a faixa é 10px (rótulo caixa-alta), e
   1em daria um ícone de 10px, menor que o glifo que ele substituiu. Numa
   faixa de 22px o que fica proporcional é 13px. */
.obra-faixa-grupos .ico { width: 13px; height: 13px; flex-shrink: 0; opacity: .75; }
.obra-faixa-grupos > span:last-child { border-right: 0; }

/* Chevron de expandir/recolher: o SVG precisa acompanhar a cor e o tamanho da
   linha, senão ele fica maior que o glifo que substituiu e empurra a coluna. */
.gantt-linha .ico, [data-col="__nome"] .ico { width: 12px; height: 12px; vertical-align: -1px; }
.pw-etapa .ico { width: 12px; height: 12px; vertical-align: -1px; }

/* ===================================================================
   CABEÇALHO DA TABELA DE PLANEJAMENTO (03/09/2026)

   Pedido do Diretor: "está espremido, acho que pode ser sutil e com ícones,
   como é o Project, com botão para abrir as opções, com ícones bem projetados
   e que tudo caiba na página, sem precisar barra de rolagem".

   A causa do espremido não era estilo: a tela abria com 19 das 24 colunas
   ligadas, 1340px de largura fixa num espaço de uns 900. Isso foi resolvido no
   js (a tela passa a abrir na visão Planejar, 346px). O que sobra pro CSS é a
   hierarquia: a faixa de GRUPO é a sutil, e a linha de TÍTULO é a firme. Antes
   as duas competiam, com a faixa em peso 700 e a linha em 600, e duas faixas
   fortes empilhadas é exatamente o que dá a sensação de aperto.
   =================================================================== */

/* A faixa de grupo recua: é orientação, não conteúdo. */
.obra-faixa-grupos {
    font-weight: var(--peso-enfase);
    letter-spacing: .08em;
    color: var(--tinta-4);
}
.obra-faixa-grupos > span {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 6px;
    /* Separador entre grupos mais firme que a grade interna: é ele que faz o
       agrupamento ser lido como agrupamento sem precisar de fundo colorido. */
    border-right: 1px solid var(--borda-forte);
    overflow: hidden;
    white-space: nowrap;
}

/* ---- O painel do botão Colunas ---- */
.obra-colp {
    width: 268px;
    font-family: var(--fonte-dado);
    color: var(--tinta-2);
}
.obra-colp-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--borda);
}
.obra-colp-titulo {
    font-size: var(--txt-densa);
    font-weight: var(--peso-forte, 700);
    letter-spacing: .01em;
}
/* O orçamento de largura. Em dia é discreto; estourado vira atenção, porque é
   ele que explica a barra de rolagem que o Diretor não quer ver. */
.obra-colp-medida {
    font-size: var(--txt-rotulo);
    color: var(--tinta-4);
    white-space: nowrap;
}
.obra-colp-medida.nao-cabe { color: var(--st-atencao); font-weight: var(--peso-enfase); }

.obra-colp-visoes {
    display: flex;
    gap: 3px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--borda);
}
.obra-colp-visao {
    flex: 1;
    padding: 4px 2px;
    border: 1px solid var(--borda);
    border-radius: 5px;
    background: transparent;
    color: var(--tinta-3);
    font-family: inherit;
    font-size: var(--txt-rotulo);
    font-weight: var(--peso-enfase);
    cursor: pointer;
    white-space: nowrap;
}
.obra-colp-visao:hover { background: var(--sup-2); color: var(--tinta-2); }
.obra-colp-visao.ativa {
    background: var(--sup-3);
    border-color: var(--borda-forte);
    color: var(--tinta-1);
}

.obra-colp-caber {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 20px);
    margin: 7px 10px;
    padding: 5px 8px;
    border: 1px solid var(--st-atencao);
    border-radius: 5px;
    background: transparent;
    color: var(--st-atencao);
    font-family: inherit;
    font-size: var(--txt-densa);
    font-weight: var(--peso-enfase);
    cursor: pointer;
}
.obra-colp-caber:hover { background: var(--sup-2); }
.obra-colp-caber .ico { width: 13px; height: 13px; }

.obra-colp-lista { max-height: 300px; overflow-y: auto; padding: 2px 0 6px; }
.obra-colp-grupo + .obra-colp-grupo { border-top: 1px solid var(--borda); }
.obra-colp-cab {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px 4px;
    border: 0;
    background: transparent;
    color: var(--tinta-4);
    font-family: inherit;
    font-size: var(--txt-rotulo);
    font-weight: var(--peso-enfase);
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
}
.obra-colp-cab:hover { color: var(--tinta-2); }
.obra-colp-cab .ico { width: 12px; height: 12px; opacity: .7; }
.obra-colp-cont { margin-left: auto; letter-spacing: 0; text-transform: none; }

.obra-colp-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    font-size: var(--txt-densa);
    line-height: 1.45;
}
.obra-colp-item:hover { background: var(--sup-2); }
.obra-colp-item input { width: 12px; height: 12px; flex-shrink: 0; margin: 0; }
.obra-colp-item .ico { width: 12px; height: 12px; flex-shrink: 0; opacity: .55; }
.obra-colp-item > span:not(.obra-colp-px) {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* A largura de cada coluna em px. Sem isto a pessoa não tem como saber QUAL
   desligar pra caber: ela vira adivinhação de tentativa e erro. */
.obra-colp-px { color: var(--tinta-4); font-size: var(--txt-rotulo); flex-shrink: 0; }

/* ===================================================================
   ABAS DA BARRA DE COMANDOS (03/09/2026)

   O Diretor mandou abrir o MS Project e olhar: "não tem barra de rolagem
   horizontal, tudo cabe na tela, são separados por categoria e mostram os
   ícones, que ao passar o mouse diz o que faz".

   Medido na tela dele: 10 categorias e 30 botões somando 2254px num espaço de
   1230, com rolagem horizontal pra dar conta. O Project resolve com abas, e é
   isso aqui: cada aba segura poucos grupos e cabe inteira, a maior usando
   749px dos 1230.

   A aba ativa se costura na faixa: ela não tem borda embaixo, então o desenho
   diz "esta faixa é a continuação desta aba" sem precisar de seta nem de cor
   forte. É o mesmo truque do Project e do Excel, e é o que faz a barra parecer
   um objeto só em vez de dois empilhados.
   =================================================================== */
.cm-ribbon-caixa {
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--sup-1);
    overflow: hidden;
}

.cm-ribbon-abas {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 4px 8px 0;
    background: var(--sup-2);
    border-bottom: 1px solid var(--borda);
}

.cm-ribbon-aba {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--tinta-3);
    font-family: var(--fonte-dado);
    font-size: var(--txt-densa);
    font-weight: var(--peso-enfase);
    letter-spacing: .01em;
    cursor: pointer;
    white-space: nowrap;
    /* Sobe 1px pra cobrir a borda da faixa quando ativa: é isso que costura a
       aba no conteúdo. */
    margin-bottom: -1px;
}
.cm-ribbon-aba .ico { width: 13px; height: 13px; flex-shrink: 0; opacity: .7; }
.cm-ribbon-aba:hover { color: var(--tinta-1); background: var(--sup-3); }
.cm-ribbon-aba.ativa {
    background: var(--sup-1);
    border-color: var(--borda);
    color: var(--tinta-1);
    /* Tampa a borda de baixo: a aba ativa e a faixa viram um objeto só. */
    box-shadow: 0 1px 0 0 var(--sup-1);
}
.cm-ribbon-aba.ativa .ico { opacity: 1; }
.cm-ribbon-aba:focus-visible { outline: 2px solid var(--st-info); outline-offset: 1px; }

/* A faixa dentro da caixa perde a borda e o canto próprios: quem os tem agora
   é a caixa. Sem isto ficam duas molduras uma dentro da outra. */
.cm-ribbon-caixa .cm-ribbon {
    border: 0;
    border-radius: 0;
    /* Cada aba cabe, então a rolagem horizontal deixa de existir aqui: se
       algum dia voltar a estourar, é bug de aba lotada e tem que aparecer
       como quebra de linha, não escondida atrás de um scroll. */
    overflow-x: visible;
    flex-wrap: wrap;
}

/* ===================================================================
   O RÓTULO DE CATEGORIA (03/09/2026)

   Pedido do Diretor, olhando a barra: "aumentar um pouco a distância vertical
   da escrita da categoria para os ícones. Também acho que o nome das
   categorias podem estar em caixa baixa, não em caixa alta".

   Ele tem razão nos dois. A caixa alta era herança de quando o rótulo
   precisava competir com os botões; com as abas, a hierarquia já está resolvida
   pela aba, e a categoria pode voltar a ser o que é: uma legenda discreta.
   Caixa normal também lê mais rápido, porque a palavra volta a ter silhueta em
   vez de virar um bloco retangular.

   Vale para as DUAS faixas de categoria da tela, a da barra de comandos e a
   dos grupos de coluna: são a mesma coisa em dois lugares, e deixar uma em
   caixa alta e a outra não pareceria descuido.
   =================================================================== */
.cm-ribbon-rotulo,
.cm-ribbon--compacto .cm-ribbon-rotulo {
    text-transform: none;
    /* Sem a caixa alta o entrelinhamento largo vira espaçamento de anúncio:
       volta pro mínimo que ainda separa as palavras. */
    letter-spacing: .02em;
}

/* O respiro entre os ícones e a legenda. Era 2px na faixa compacta, e a
   legenda ficava colada na base dos botões. */
.cm-ribbon-grupo { gap: 5px; }
.cm-ribbon--compacto .cm-ribbon-grupo { gap: 5px; padding: 5px 7px 4px; }

/* A faixa de grupos do cabeçalho da tabela, mesma decisão. */
.obra-faixa-grupos {
    text-transform: none;
    letter-spacing: .02em;
    font-weight: var(--peso-enfase);
}

/* ===================================================================
   TELA DE ABERTURA DE PROJETOS E OBRAS (03/09/2026)

   A tela abria com três cartões de contagem e um cartão de obra cercado por
   70% de vazio. As contagens não decidiam nada: "Em andamento: 1" repetia o
   cartão logo abaixo, e "Concluídas: 0" só sabia dizer zero.

   O desenho segue a hierarquia de quem lê em quinze segundos, de pé, com o
   celular na mão (reordenado em 12/10/2026: resposta, evidência, detalhe):
     1. a faixa de decisão: estado em palavra, causa nomeada e o botão
     2. os quatro números, cada um com a leitura em palavras embaixo
     3. o caminho do dinheiro, o que está pegando e o que espera o Diretor
     4. a lista de obras, com filtro, e as licitações ganhas recolhidas

   Deliberadamente sem cartão colorido de KPI: cor aqui é reservada para
   ESTADO (grave, atenção, ok). Caixa colorida por enfeite gasta o vocabulário
   de cor que o alerta precisa.
   =================================================================== */
.obra-pnl {
    display: flex; flex-direction: column; gap: 22px; margin-bottom: 22px;
    container: obrapnl / inline-size;
}

/* ---- A faixa de decisão (12/10/2026). A primeira coisa, e às vezes a única,
   que se lê. Sem moldura, sem canto arredondado e sem barra colorida na
   lateral: quem carrega o estado é a PALAVRA do chip, escrita primeiro. A cor
   do chip reforça. O botão da ação fecha a faixa. ---- */
.obra-pnl-decisao {
    padding: 2px 0 20px;
    border-bottom: 1px solid var(--borda);
    font-family: var(--fonte-dado);
}
.obra-pnl-decisao-rot { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.obra-pnl-decisao-t {
    margin: 0; max-width: 64ch;
    font-size: var(--txt-titulo); font-weight: var(--peso-enfase);
    line-height: 1.3; letter-spacing: -.01em; color: var(--tinta-1);
}
.obra-pnl-decisao-t b { font-weight: var(--peso-forte); }
.obra-pnl-decisao-s { margin: 6px 0 0; font-size: var(--txt-corpo); color: var(--tinta-3); }
/* A causa. Sem ela o atraso é angústia, não informação. O nome do serviço que
   segura o prazo é longo por natureza ("ARRANCAMENTO DE GRADES, GRADIS ·
   MURETA/GRADIL ENTORNO"): quebra em duas linhas em vez de vazar. */
.obra-pnl-gargalo {
    margin: 8px 0 0;
    font-size: var(--txt-corpo); color: var(--tinta-2); line-height: 1.4;
    overflow-wrap: anywhere;
}
.obra-pnl-decisao-hoje {
    margin: 12px 0 0; font-size: var(--txt-corpo); line-height: 1.4;
    color: var(--tinta-1); font-weight: var(--peso-enfase);
}
.obra-pnl-decisao-hoje-r { color: var(--tinta-3); font-weight: var(--peso-corpo); margin-right: 6px; }
.obra-pnl-decisao-outras { margin: 8px 0 0; font-size: var(--txt-corpo); color: var(--tinta-3); }
.obra-pnl-decisao-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---- Os quatro números: uma faixa com divisória de 1px, não quatro
   cartões. Dois por linha quando falta largura; lista de rótulo e valor no
   celular. ---- */
.obra-pnl-numswrap { container: obrapnl / inline-size; }
.obra-pnl-nums {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
}
.obra-pnl-cel { padding: 14px 18px 14px 0; min-width: 0; }
.obra-pnl-cel:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--borda); }
.obra-pnl-cel:nth-child(n+3) { border-top: 1px solid var(--borda); }
@container obrapnl (min-width: 880px) {
    .obra-pnl-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .obra-pnl-cel, .obra-pnl-cel:nth-child(even), .obra-pnl-cel:nth-child(n+3) { padding: 14px 18px; border-left: 1px solid var(--borda); border-top: 0; }
    .obra-pnl-cel:first-child { padding-left: 0; border-left: 0; }
}
.obra-pnl-rot {
    font-size: var(--txt-densa);
    font-weight: var(--peso-enfase);
    color: var(--tinta-3);
}
.obra-pnl-val {
    margin-top: 4px;
    font-size: var(--txt-valor);
    font-weight: var(--peso-enfase);
    color: var(--tinta-1);
    line-height: 1.15;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}
/* "não consegui ler" não pode ter o peso de um número: ele é a ausência de
   um. Mas também não pode sumir, porque é ele que impede a tela de mostrar
   R$ 0,00 e alguém acreditar. */
.obra-pnl-val.semdado {
    font-size: var(--txt-corpo);
    font-weight: var(--peso-corpo);
    font-style: italic;
    letter-spacing: 0;
    color: var(--tinta-4);
    padding-top: 7px;
}
.obra-pnl-nota { margin-top: 6px; font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.4; }
/* O número não se pinta mais sozinho (WCAG 1.4.1): a palavra vem no selo, ao
   lado. A cor do número fica neutra; só o selo carrega estado. */
/* Os três estados de "sem número" (12/10/2026): escritos, nunca traço nem
   zero. "falhou" pesa mais que os outros dois porque exige ação. */
.obra-pnl-ausente { font-style: italic; color: var(--tinta-4); }
.obra-pnl-ausente--falhou { color: var(--st-critico); font-style: normal; font-weight: var(--peso-enfase); }
.obra-pnl-ausente--lendo { animation: obra-pulso 1.4s ease-in-out infinite; }
/* Selo com a PALAVRA do estado: a cor reforça, a palavra manda. */
.obra-pnl-selo { display: inline-flex; vertical-align: middle; margin-left: 8px; font-size: var(--txt-densa); letter-spacing: 0; }
.obra-pnl-retry { margin-top: 6px; }
/* o único "Tentar de novo" em linha própria, abaixo da frase (Helena) */
.obra-pnl-nota .obra-pnl-retry { display: flex; width: max-content; margin-top: var(--esp-2); }
@keyframes obra-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .obra-pnl-ausente--lendo, .obra-pnl-esq { animation: none; }
}

/* ---- O CAMINHO DO DINHEIRO (funil da obra, 03/09/2026) ----
   Os seis numeros do Diretor sao ANINHADOS, nao paralelos: o contrato contem o
   executado, o executado contem o medido, o medido contem o pago. Por isso uma
   barra unica segmentada, e nao seis caixas soltas: caixa solta deixa cada
   numero parecer independente, e a soma some.
   O rascunho vai hachurado de proposito. Ele ocupa espaco na barra porque
   existe, mas nao pode ter a mesma cor cheia de dinheiro aprovado. */
.obra-funil-barra {
    display: flex;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--sup-2);
    border: 1px solid var(--borda);
}
.obra-funil-seg { height: 100%; min-width: 2px; }
.obra-funil-seg.pago { background: var(--st-ok); }
.obra-funil-seg.apagar { background: var(--acao); }
.obra-funil-seg.amedir { background: var(--st-atencao); }
.obra-funil-seg.rascunho {
    background: repeating-linear-gradient(135deg,
        var(--st-atencao) 0 5px, transparent 5px 10px);
    opacity: .8;
}
/* As seis etapas numa faixa só, com divisória de 1px. As explicações de cada
   uma ficam no <details> logo abaixo (e no title). */
.obra-funil-lista {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    border-top: 1px solid var(--borda);
}
.obra-funil-et { padding: 10px 14px 10px 0; min-width: 0; }
.obra-funil-et + .obra-funil-et { padding-left: 14px; border-left: 1px solid var(--borda); }
.obra-funil-et-r {
    font-size: var(--txt-densa);
    font-weight: var(--peso-enfase);
    color: var(--tinta-3);
    display: flex; align-items: center; gap: 6px;
}
.obra-funil-pino { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.obra-funil-et-v {
    margin-top: 3px;
    font-size: var(--txt-destaque);
    font-weight: var(--peso-enfase);
    color: var(--tinta-1);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.obra-funil-et-v.semdado {
    font-size: var(--txt-corpo); font-weight: var(--peso-corpo);
    font-style: italic; color: var(--tinta-4);
}
.obra-funil-ajuda { margin-top: 8px; font-size: var(--txt-densa); color: var(--tinta-3); }
.obra-funil-ajuda summary { cursor: pointer; padding: 6px 0; font-weight: var(--peso-enfase); }
.obra-funil-ajuda ul { margin: 0 0 4px; padding-left: 18px; line-height: 1.5; }
.obra-funil-aviso {
    margin-top: 10px; display: flex; align-items: flex-start; gap: 10px;
    font-size: var(--txt-corpo); color: var(--tinta-2); line-height: 1.45;
}
.obra-funil-aviso .cm-chip { flex-shrink: 0; margin-top: 1px; }
.obra-funil-nossa {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borda);
}
.obra-funil-nossa-t {
    font-size: var(--txt-densa); font-weight: var(--peso-enfase);
    color: var(--tinta-3); margin-bottom: 4px;
}
@media (max-width: 700px) {
    .obra-funil-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .obra-funil-et:nth-child(odd) { padding-left: 0; border-left: 0; }
    .obra-funil-et:nth-child(n+3) { border-top: 1px solid var(--borda); }
}

/* Cabeca da aba de Pleitos: o titulo e o caminho de volta pra lista. Como
   nao ha mais botao Fechar (aba nao fecha, troca-se de aba), o unico controle
   e o "Todos os pleitos", e so quando ha um pleito aberto. */
.pw-pl-cab {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 0 0 10px; margin-bottom: 10px;
    border-bottom: 1px solid var(--pw-borda, var(--borda));
    flex-wrap: wrap;
}
.pw-pl-cab b { font-size: 13px; letter-spacing: -.01em; }

/* ---- Os blocos de baixo: o que está pegando e o que espera o Diretor.
   Sem caixa: uma linha de 1px em cima e o título. Duas colunas quando cabe;
   no celular a coluna é uma só e "Esperando você" sobe. ---- */
.obra-pnl-blocos { display: grid; grid-template-columns: 1fr; gap: 22px; }
@container obrapnl (min-width: 760px) {
    .obra-pnl-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}
@container obrapnl (max-width: 759px) {
    .obra-pnl-bloco--espera { order: -1; }
}
.obra-pnl-bloco { border-top: 1px solid var(--borda); padding-top: 12px; min-width: 0; }
.obra-pnl-bloco-t {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: var(--txt-corpo);
    font-weight: var(--peso-enfase);
    color: var(--tinta-2);
}
.obra-pnl-bloco-t .ico { width: 14px; height: 14px; opacity: .7; }
.obra-pnl-nada { font-size: var(--txt-corpo); color: var(--tinta-4); }

.obra-pnl-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.obra-pnl-lista li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--txt-corpo);
    color: var(--tinta-2);
}
.obra-pnl-quando { flex-shrink: 0; color: var(--tinta-3); font-size: var(--txt-densa); }
/* A data que já passou não é igual à que vai chegar: o negrito diz, a cor reforça. */
.obra-pnl-quando .venceu { color: var(--st-critico); font-weight: var(--peso-forte); }
.obra-pnl-oque { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obra-pnl-bloco--pegando .obra-pnl-lista li { flex-wrap: wrap; }
.obra-pnl-bloco--pegando .obra-pnl-oque { flex: 1 1 160px; white-space: normal; }
/* Cada item de "esperando você" termina em verbo. Se não dá pra dizer o que a
   pessoa FAZ, o item não é decisão, é aviso, e aviso mora em outro lugar. */
.obra-pnl-lista.travado li { flex-direction: column; align-items: flex-start; gap: 2px; }
.obra-pnl-lista.travado .obra-pnl-oque { white-space: normal; }
.obra-pnl-lista.travado li + li { padding-top: 9px; border-top: 1px solid var(--borda); }
.obra-pnl-acao { font-size: var(--txt-corpo); color: var(--tinta-1); font-weight: var(--peso-enfase); }
.obra-pnl-mais { margin-top: 8px; }
.obra-pnl-mais summary { cursor: pointer; padding: 6px 0; font-size: var(--txt-densa); font-weight: var(--peso-enfase); color: var(--tinta-3); }
.obra-pnl-mais .obra-pnl-lista { margin-top: 6px; }

/* ---- Estados escritos: carregando, vazio, erro ---- */
.obra-pnl-vazio, .obra-pnl-erro {
    padding: 20px 0 18px;
    border-top: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
}
.obra-pnl-vazio-t { font-size: var(--txt-titulo); font-weight: var(--peso-enfase); color: var(--tinta-1); line-height: 1.3; }
.obra-pnl-vazio-t .cm-chip { vertical-align: middle; margin-right: 6px; }
.obra-pnl-vazio-s { margin-top: 6px; font-size: var(--txt-corpo); color: var(--tinta-3); max-width: 64ch; line-height: 1.5; }
.obra-pnl-vazio-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.obra-pnl-carregando { display: flex; flex-direction: column; gap: 14px; }
.obra-pnl-esq { height: 56px; border-radius: 6px; background: var(--sup-3); animation: obra-pulso 1.4s ease-in-out infinite; }
.obra-pnl-esq--faixa { height: 74px; }
.obra-pnl-esq-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.obra-pnl-carregando-t { font-size: var(--txt-corpo); color: var(--tinta-3); }

/* ---- A HOME DE OBRAS EM QUATRO FAIXAS (Helena, 13/10/2026) ----
   A: título com a data de leitura, filtro e "Nova obra" em contorno.
   B: a decisão (obra-pnl-decisao, acima).
   C: quatro totais em faixa de divisória de 1 px; "não somar" entre os dois
      primeiros. No celular fica só "Parado no caminho, nosso".
   D: a lista, uma linha por obra em dois andares: oito colunas em cima, a
      causa e a ação embaixo, o detalhe recolhido. No celular, um cartão.
   Cor só para ESTADO; o vinho da marca não aparece em lugar nenhum daqui. */
.obra-home-cab {
    display: flex; align-items: center; gap: var(--esp-3) var(--esp-4); flex-wrap: wrap;
    margin-bottom: var(--esp-4);
}
.obra-home-cab .section-title { margin: 0; }
.obra-home-data { font-size: var(--txt-densa); color: var(--tinta-3); }
.obra-home-filtro { margin-left: auto; max-width: 100%; }
.obra-filtro { max-width: 100%; overflow-x: auto; }
.obra-home-nova { flex-shrink: 0; }
#obrasGridSecao { container: obralista / inline-size; margin-top: var(--esp-2); }

/* FAIXA C */
.obra-tot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
}
.obra-tot > .obra-pnl-cel { padding: var(--esp-3) var(--esp-4); border-left: 1px solid var(--borda); }
.obra-tot > .obra-pnl-cel:first-child { padding-left: 0; border-left: 0; }
.obra-tot .obra-pnl-val { font-size: 20px; }
.obra-tot-nao {
    align-self: center; padding: 2px var(--esp-2); margin: 0 calc(-1 * var(--esp-1));
    font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); letter-spacing: .06em; text-transform: uppercase;
    color: var(--tinta-4); border: 1px dashed var(--borda-forte); border-radius: var(--raio-1);
    position: relative; z-index: 1; background: var(--sup-1); white-space: nowrap;
}
.obra-tot-nao + .obra-pnl-cel { border-left: 0; }

/* FAIXA D */
.obra-lista { display: block; border-top: 1px solid var(--borda); }
.obra-lista > .orc-hint { padding: var(--esp-3) 0; margin: 0; }
.obra-lin-cab { display: none; }
.obra-lin {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--esp-2) var(--esp-3);
    padding: var(--esp-3) var(--esp-2) var(--esp-3) var(--esp-4);
    border-bottom: 1px solid var(--borda);
}
/* O sinal lateral é de 3 px e é só reforço: a situação está em chip e em frase. */
.obra-lin::before {
    content: ''; position: absolute; left: 0; top: var(--esp-2); bottom: var(--esp-2); width: 3px; border-radius: 2px;
    background: var(--borda-forte);
}
.obra-lin--critico::before { background: var(--st-critico); }
.obra-lin--atencao::before { background: var(--st-atencao); }
.obra-lin--ok::before { background: var(--st-ok); }
.obra-lin--info::before { background: var(--st-info); }
.obra-lin--neutro::before { background: var(--borda-forte); }
.obra-lin > div { min-width: 0; }
.obra-lin-obra { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.obra-lin-proc { font-size: var(--txt-destaque); font-weight: var(--peso-forte); color: var(--tinta-1); overflow-wrap: anywhere; }
.obra-lin-sub { max-width: 100%; font-size: var(--txt-densa); color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obra-lin-objeto { color: var(--tinta-2); }
.obra-lin-selo { margin-top: 3px; }
.obra-selo-tit { font-size: var(--txt-densa); padding: 1px 7px; }
.obra-lin-est { display: flex; align-items: flex-start; }
.obra-lin-est .cm-chip { white-space: nowrap; }
.obra-lin-prazo, .obra-lin-fis, .obra-lin-med, .obra-lin-par, .obra-lin-res {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    font-size: var(--txt-corpo); color: var(--tinta-1);
}
.obra-lin-de { font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.35; }
.obra-lin-dif { font-size: var(--txt-densa); color: var(--tinta-3); }
.obra-lin-dif--mal { color: var(--tinta-1); font-weight: var(--peso-enfase); }
.obra-lin-rasc { color: var(--tinta-4); }
.obra-lin-fisnum { font-weight: var(--peso-enfase); }
/* RDO parado há mais de 7 dias: o último valor fica, esmaecido e datado
   (decisão do Diretor, 13/10/2026, seguindo a Helena). */
.obra-lin-velho .cm-num, .obra-lin-velho .obra-lin-dif--mal { color: var(--tinta-4); font-weight: var(--peso-corpo); }
.obra-lin-velho .obra-trilho { opacity: .45; }
.obra-lin-acoes { display: none; align-items: center; justify-content: flex-end; gap: var(--esp-1); }
.obra-lin-mais { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.obra-lin-causa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.obra-lin-frase { margin: 0; flex: 1 1 320px; min-width: 0; font-size: var(--txt-corpo); color: var(--tinta-2); line-height: 1.45; }
.obra-lin-frase b { color: var(--tinta-1); font-weight: var(--peso-enfase); }
.obra-lin-alertas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); }
.obra-lin-alerta { font-size: var(--txt-densa); padding: 1px 7px; }
.obra-lin-ver { color: var(--tinta-2); }
.obra-lin-ver .ico { transition: transform var(--dur-rapida, 140ms) ease; }
.obra-lin-ver[aria-expanded="true"] .ico { transform: rotate(180deg); }
.obra-lin-movel { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.obra-lin-det {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6);
    padding: var(--esp-3) 0 var(--esp-2); border-top: 1px dashed var(--borda);
}
.obra-lin-det[hidden] { display: none !important; }
.obra-det-bloco { min-width: 0; }
.obra-det-tab { width: 100%; border-collapse: collapse; font-size: var(--txt-densa); }
.obra-det-tab caption {
    text-align: left; padding-bottom: var(--esp-1); font-size: var(--txt-rotulo); font-weight: var(--peso-enfase);
    letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
}
.obra-det-tab th, .obra-det-tab td { padding: 4px 0; border-bottom: 1px solid var(--linha-sutil, var(--borda)); vertical-align: top; }
.obra-det-tab td + td, .obra-det-tab th + td, .obra-det-tab th + th { padding-left: var(--esp-2); }
.obra-det-tab thead th { font-weight: var(--peso-enfase); color: var(--tinta-3); }
.obra-det-tab tbody th { font-weight: var(--peso-corpo); color: var(--tinta-2); text-align: left; }
.obra-det-nota { display: block; color: var(--tinta-4); font-size: var(--txt-densa); }
.obra-det-p { margin: var(--esp-2) 0 0; font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.45; }
.obra-det-t { margin: 0 0 var(--esp-1); font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
/* Trilho do físico: o preenchimento é o real; o traço vertical é o previsto.
   Nenhuma cor por valor, só posição. */
.obra-trilho {
    position: relative; display: inline-block; width: 64px; height: 6px; margin: 4px 0;
    border-radius: 3px; background: var(--sup-3); vertical-align: middle;
}
.obra-trilho-real { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--tinta-2); }
.obra-trilho-prev { position: absolute; left: 0; top: -3px; bottom: -3px; border-right: 2px solid var(--tinta-1); }

/* Cartão (celular, < 600 px de lista): linha 1 processo, selo e estado;
   linha 2 a causa; linha 3 PRAZO, FÍSICO e PARADO; linha 4 os botões. */
.obra-lin-obra { grid-column: 1 / 3; order: 1; }
.obra-lin-est { grid-column: 3; order: 2; justify-content: flex-end; }
.obra-lin-causa { grid-column: 1 / -1; order: 3; }
.obra-lin-prazo { order: 4; } .obra-lin-fis { order: 5; } .obra-lin-par { order: 7; }
.obra-lin-med, .obra-lin-res { display: none; }
.obra-lin-movel { grid-column: 1 / -1; order: 9; }
.obra-lin-det { grid-column: 1 / -1; order: 10; }
.obra-lin-objeto, .obra-lin-ver { display: none; }
.obra-lin-prazo::before, .obra-lin-fis::before, .obra-lin-med::before, .obra-lin-par::before, .obra-lin-res::before {
    content: attr(data-rot);
    font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); letter-spacing: .06em;
    text-transform: uppercase; color: var(--tinta-4);
}
/* os dois botões do cartão com a mesma largura, meio a meio (Helena) */
.obra-lin-movel .cm-btn { min-height: var(--alt-toque, 44px); flex: 1 1 0; min-width: 0; justify-content: center; }
.obra-lin-acessar-m { justify-content: center; }

/* Tablet e notebook estreito: cartão com os cinco números e o detalhe. */
@container obralista (min-width: 600px) {
    .obra-lin { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .obra-lin-obra { grid-column: 1 / 5; }
    .obra-lin-est { grid-column: 5; }
    .obra-lin-med { display: flex; order: 6; } .obra-lin-res { display: flex; order: 8; }
    .obra-lin-objeto, .obra-lin-ver { display: inline-flex; }
    .obra-lin-objeto { display: block; }
    .obra-lin-det { grid-template-columns: minmax(0, 1fr); }
}
/* Desktop: oito colunas, sem rolagem lateral a 1366. */
@container obralista (min-width: 1000px) {
    .obra-lin-cab, .obra-lin {
        grid-template-columns: minmax(170px, 1.5fr) minmax(152px, .95fr) repeat(5, minmax(100px, 1fr)) 156px;
        column-gap: var(--esp-3);
    }
    .obra-lin { align-items: start; row-gap: var(--esp-2); padding: var(--esp-3) var(--esp-2) var(--esp-2) var(--esp-4); }
    .obra-lin-cab {
        display: grid; padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4); border-bottom: 1px solid var(--borda);
        font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); letter-spacing: .06em;
        text-transform: uppercase; color: var(--tinta-4);
    }
    .obra-lin > div { order: 0; grid-column: auto; }
    .obra-lin-est { justify-content: flex-start; }
    .obra-lin-prazo::before, .obra-lin-fis::before, .obra-lin-med::before, .obra-lin-par::before, .obra-lin-res::before { content: none; }
    .obra-lin-acoes { display: flex; }
    .obra-lin > .obra-lin-causa { grid-column: 1 / -1; padding-top: var(--esp-2); border-top: 1px dashed var(--borda); }
    .obra-lin > .obra-lin-movel { display: none; }
    .obra-lin > .obra-lin-det { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Celular: o detalhe e os números de Medido e Resultado ficam fora (Helena). */
@container obralista (max-width: 599px) { .obra-lin > .obra-lin-det { display: none !important; } }
/* Celular: no topo fica só o dinheiro parado (Helena). */
@container obrapnl (max-width: 600px) {
    .obra-tot { grid-template-columns: minmax(0, 1fr); }
    .obra-tot > .obra-pnl-cel, .obra-tot-nao { display: none; }
    .obra-tot > .obra-tot-parado { display: block; padding-left: 0; border-left: 0; }
}

/* Celular (Helena, 13/10/2026): "Nova obra" vira ícone ao lado do título,
   o filtro quebra em duas linhas em vez de rolar escondido, a decisão fica
   curta e o primeiro cartão aparece na dobra. */
@media (max-width: 760px) {
    .obra-home-cab { gap: var(--esp-2); }
    .obra-home-cab .section-title { order: 1; }
    .obra-home-nova { order: 2; margin-left: auto; min-width: 44px; padding: 0 var(--esp-3); }
    .obra-home-nova-txt { display: none; }
    .obra-home-data { order: 3; flex: 1 1 100%; }
    .obra-home-filtro { order: 4; flex: 1 1 100%; margin-left: 0; }
    /* filtro em grade fixa de 3 colunas (Helena, segunda passada) */
    .obra-home-filtro .obra-filtro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    .obra-home-filtro .obra-filtro button { justify-content: center; min-width: 0; }
    .obra-pnl-decisao-s, .obra-pnl-decisao-outras, .obra-pnl-decisao-acoes .cm-btn--contorno { display: none; }
    .obra-pnl-decisao { padding-bottom: var(--esp-3); }
    .obra-pnl { gap: var(--esp-3); margin-bottom: var(--esp-3); }
}
@container obrapnl (max-width: 600px) {
    .obra-tot { border-top: 0; border-bottom: 0; }
    .obra-tot > .obra-tot-parado { display: block; padding: 0; border-top: 0 !important; }
    .obra-tot > .obra-tot-parado .obra-pnl-val { text-align: left; margin-top: var(--esp-1); }
}

/* JANELA DE TITULARIDADE: duas opções escritas, nenhuma marcada de saída. */
.obra-tit-dlg { max-width: 460px; padding: var(--esp-6); }
.obra-tit-t { margin: 0 0 var(--esp-1); font-size: var(--txt-titulo); font-weight: var(--peso-enfase); color: var(--tinta-1); }
.obra-tit-s { margin: 0 0 var(--esp-4); font-size: var(--txt-corpo); color: var(--tinta-3); }
.obra-tit-opcoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); }
.obra-tit-op {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
    padding: var(--esp-3) var(--esp-4) var(--esp-3) calc(var(--esp-4) + 26px); min-height: var(--alt-toque, 44px);
    border: 1px solid var(--borda-forte); border-radius: var(--raio-2); background: var(--sup-1);
    color: var(--tinta-1); font: inherit; cursor: pointer;
}
.obra-tit-op b { font-size: var(--txt-destaque); font-weight: var(--peso-enfase); }
.obra-tit-op span { font-size: var(--txt-densa); color: var(--tinta-3); }
.obra-tit-op:hover { background: var(--sup-2); }
.obra-tit-op[aria-checked="true"] { border-color: var(--acao); box-shadow: inset 0 0 0 1px var(--acao); }
/* O marcador de rádio (Helena): a escolha não depende só da borda. */
.obra-tit-op::before {
    content: ''; position: absolute; left: var(--esp-4); top: calc(var(--esp-3) + 2px);
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borda-forte); box-sizing: border-box; background: var(--sup-1);
}
.obra-tit-op[aria-checked="true"]::before { border-color: var(--acao); background: radial-gradient(circle, var(--acao) 0 4px, var(--sup-1) 5px); }
.obra-tit-op:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.obra-tit-cliente { display: grid; gap: var(--esp-3); margin-top: var(--esp-4); }
.obra-tit-cliente[hidden] { display: none !important; }
.obra-tit-campo { display: flex; flex-direction: column; gap: var(--esp-1); font-size: var(--txt-densa); color: var(--tinta-3); }
.obra-tit-pct { font-variant-numeric: tabular-nums; }
.obra-tit-msg { min-height: 18px; margin: var(--esp-3) 0 0; font-size: var(--txt-densa); color: var(--tinta-3); }
.obra-tit-dlg .cm-dialogo-acoes { display: flex; justify-content: flex-end; gap: var(--esp-2); margin-top: var(--esp-2); }

/* ---- Licitações ganhas esperando início: uma linha recolhida, com a
   contagem. É ação de uma vez por contrato e não disputa a primeira dobra. ---- */
.obra-aguarda { margin: 18px 0 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.obra-aguarda > summary {
    display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
    font-size: var(--txt-corpo); font-weight: var(--peso-enfase); color: var(--tinta-1);
    list-style: none;
}
.obra-aguarda > summary::-webkit-details-marker { display: none; }
.obra-aguarda > summary .ico { width: 14px; height: 14px; transition: transform .15s; }
.obra-aguarda[open] > summary .ico { transform: rotate(180deg); }
.obra-aguarda-rolagem { overflow-x: auto; padding-bottom: 8px; }
.obra-aguarda-obj { max-width: 360px; }

/* ---- Celular (canteiro, em pé, ao sol): alvo de toque de 44px e a faixa de
   decisão com o botão na largura toda. ---- */
@media (max-width: 760px) {
    #obrasListaView .cm-btn, #obrasListaView .cm-seg button, #obrasListaView .btn { min-height: 44px; }
    .obra-pnl-decisao-acoes .cm-btn, .obra-pnl-vazio-acoes .cm-btn { flex: 1 1 100%; justify-content: center; }
    .obra-pnl-cel { padding: 12px 0; border-left: 0 !important; }
    .obra-pnl-cel:nth-child(even) { padding-left: 0; }
    .obra-pnl-nums { grid-template-columns: 1fr; }
    .obra-pnl-cel + .obra-pnl-cel { border-top: 1px solid var(--borda); }
    .obra-pnl-val { font-size: var(--txt-titulo); }
    .obra-pnl-selo { margin-left: 6px; }
    .obra-lin-mais { margin-top: -4px; }
    .obra-pnl-mais > summary, .obra-funil-ajuda > summary { display: flex; align-items: center; min-height: 44px; padding: 0; }
}
@container obrapnl (max-width: 520px) {
    .obra-pnl-cel {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline;
    }
    .obra-pnl-rot { grid-column: 1; }
    .obra-pnl-val { grid-column: 2; margin-top: 0; text-align: right; }
    .obra-pnl-nota { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   VINCULOS DA OBRA (05/09/2026)
   Linha de chaves no cabecalho da obra: planilha do contrato e diario de
   obra. Nao e um botao de acao, e um INTERRUPTOR DE ESTADO, entao o
   desenho tem que dizer em que posicao esta sem precisar de hover: ligado
   e solido com a cor de vinculo, manual e vazado com tracejado (o
   tracejado le como "solto" antes de qualquer texto ser lido).
--------------------------------------------------------------------------- */
.obra-vinc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--borda);
}
.obra-vinc-rot {
    font-size: var(--txt-rotulo);
    font-weight: var(--peso-enfase);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-claro);
}
.obra-vinc-ch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 2px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: var(--txt-corpo);
    font-weight: var(--peso-corpo);
    color: var(--tinta-2);
    line-height: 1;
    white-space: nowrap;
}
.obra-vinc-ch:hover .obra-vinc-nm { color: var(--tinta-1); }
.obra-vinc-ch:focus-visible { outline: 2px solid var(--st-info); outline-offset: 2px; border-radius: var(--raio-1); }
/* O trilho. 26x15 e de proposito pequeno: e um estado, nao uma acao, e nao
   pode competir com o ribbon logo abaixo. */
.obra-vinc-sw {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 15px;
    border-radius: 999px;
    background: var(--borda-forte, var(--borda));
    transition: background .16s ease;
}
.obra-vinc-kn {
    position: absolute;
    top: 2px; left: 2px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
    transition: transform .16s ease;
}
.obra-vinc-ch[aria-checked="true"] .obra-vinc-sw { background: var(--st-info); }
.obra-vinc-ch[aria-checked="true"] .obra-vinc-kn { transform: translateX(11px); }
.obra-vinc-ch[aria-checked="true"] .obra-vinc-nm { color: var(--tinta-1); font-weight: var(--peso-medio); }
/* Desligado NAO some: obra medida na mao continua sendo uma decisao, e uma
   decisao apagada na tela e uma decisao que ninguem revisa. */
.obra-vinc-ch[aria-checked="false"] .obra-vinc-nm::after {
    content: 'manual';
    margin-left: 6px;
    font-size: var(--txt-rotulo);
    font-weight: var(--peso-enfase);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--texto-claro);
}
@media (prefers-reduced-motion: reduce) {
    .obra-vinc-sw, .obra-vinc-kn { transition: none; }
}


/* ---------------------------------------------------------------------------
   BOLINHA DE STATUS (05/09/2026)
   Verde em andamento, vermelho atrasada, amarelo paralisada, azul concluida.
   A cor e o --st-* de sempre: status nunca usa o vinho da marca.
   A bolinha NAO carrega a informacao sozinha — o texto do chip continua ao
   lado, porque cor sozinha exclui quem nao distingue verde de vermelho.
--------------------------------------------------------------------------- */
.obra-ponto {
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: baseline;
    background: var(--st-neutro);
}
/* CORES PROPRIAS, e nao os --st-* do chip, por um motivo medido: --st-critico
   (#c03f0a) e --st-atencao (#b25107) sao os dois laranjas queimados, e a 7px,
   lado a lado num mesmo cartao, ninguem separa um do outro. Chip grande com
   fundo tintado e rotulo por extenso aguenta essa proximidade; bolinha nao.
   O Diretor pediu vermelho para atrasada e amarelo para paralisada, e e isso
   que estas quatro cores entregam, com contraste suficiente sobre branco. */
.obra-ponto--ok       { background: #15a06a; }  /* verde  - em andamento     */
.obra-ponto--critico  { background: #d92d20; }  /* vermelho - atrasada       */
.obra-ponto--atencao  { background: #eab308; }  /* amarelo - paralisada      */
.obra-ponto--info     { background: #2967d0; }  /* azul - concluida          */
/* Chip de status com bolinha fica NEUTRO: quem pinta e a bolinha. Um chip
   inteiro colorido mais uma bolinha colorida e a mesma informacao dita duas
   vezes, e foi assim que o card acumulou dois avisos vermelhos. */
.cm-chip.obra-chip-st {
    display: inline-flex;
    align-items: center;
    background: var(--st-neutro-tinta);
    color: var(--tinta-1);
    border-color: transparent;
}

/* Chave de vinculo no cabecalho FECHADO (05/09/2026): mesma peca, menor, pra
   caber na linha de resumo entre o chip de status e o "Contrato 042/2026".
   Fechado a pergunta e uma so — esta obra e vinculada? — e a resposta e uma
   chave so; o nome de cada vinculo mora no cabecalho aberto, que e onde se
   edita. Resumo que vira formulario deixa de ser resumo. */
.obra-vinc-ch--so { gap: 6px; padding: 0; font-size: var(--txt-densa); }
.obra-vinc-ch--so .obra-vinc-sw { width: 22px; height: 13px; }
.obra-vinc-ch--so .obra-vinc-kn { width: 9px; height: 9px; }
.obra-vinc-ch--so[aria-checked="true"] .obra-vinc-kn { transform: translateX(9px); }
/* Sem o sufixo "manual" aqui: na linha de resumo a posicao da chave ja diz,
   e a palavra repetida ao lado do rotulo "Vinculada" viraria ruido. */
.obra-vinc-ch--so[aria-checked="false"] .obra-vinc-nm::after { content: none; }

/* ---------------------------------------------------------------------------
   PLANILHA EM BRANCO DO PLANEJAMENTO (05/09/2026)
   Densa como planilha de verdade: linha de 28px, celula sem moldura, foco
   marcando a celula ativa. Moldura em toda celula editavel — o "campo de
   formulario dentro da tabela" — dobra o peso visual e faz 200 linhas
   parecerem 200 formularios.
--------------------------------------------------------------------------- */
.pwf-barra { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.pwf-tit { font-size: 13.5px; font-weight: var(--peso-enfase); color: var(--tinta-1); line-height: 1.3; }
.pwf-sub { display: block; font-size: var(--txt-densa); font-weight: var(--peso-corpo); color: var(--texto-claro); margin-top: 2px; }
.pwf-legenda { display: flex; gap: 12px; font-size: var(--txt-rotulo); color: var(--texto-claro); text-transform: uppercase; letter-spacing: .05em; }
.pwf-legenda span { display: inline-flex; align-items: center; gap: 5px; }

.pwf-caixa { border: 1px solid var(--borda); border-radius: var(--raio-1); overflow: auto; max-height: 62vh; }
.pwf-tab { width: 100%; border-collapse: collapse; font-size: var(--txt-densa); }
.pwf-tab thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--fundo-suave);
    text-align: left; font-weight: var(--peso-enfase); color: var(--texto-claro);
    font-size: var(--txt-rotulo); text-transform: uppercase; letter-spacing: .05em;
    padding: 7px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.pwf-tab td { padding: 0 8px; height: 28px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.pwf-c-wbs { width: 62px; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color: var(--texto-claro); white-space: nowrap; }
.pwf-c-desc { min-width: 280px; }
.pwf-c-un { width: 76px; }
.pwf-c-num { width: 110px; text-align: right; }
.pwf-c-dt { width: 96px; white-space: nowrap; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.pwf-c-ac { width: 84px; white-space: nowrap; text-align: right; }
.pwf-fraco { color: var(--texto-claro); }
.pwf-vazia { color: var(--st-atencao); font-weight: var(--peso-medio); }
.pwf-somatorio { color: var(--texto-claro); }

/* A hierarquia se le pelo RECUO e pelo peso, nao por cor de fundo em cada
   nivel: tres faixas coloridas empilhadas viram zebra e cansam em 50 linhas. */
.pwf-recuo { display: inline-block; flex: 0 0 auto; }
.pwf-c-desc { display: flex; align-items: center; gap: 0; }
.pwf-pt { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 2px; margin-right: 8px; }
.pwf-pt--1 { background: var(--marca); border-radius: 1px; }
.pwf-pt--2 { background: var(--st-info); }
.pwf-pt--3 { background: var(--borda-forte); border-radius: 50%; }
.pwf-pt--nova { background: transparent; border: 1px dashed var(--borda-forte); border-radius: 50%; }
.pwf-n1 .pwf-in-nome { font-weight: var(--peso-enfase); color: var(--tinta-1); }
.pwf-n1 td { background: var(--fundo-suave); }
.pwf-n2 .pwf-in-nome { font-weight: var(--peso-medio); }
.pwf-n3 .pwf-in-nome { color: var(--tinta-2); }

.pwf-in {
    width: 100%; min-width: 0; box-sizing: border-box;
    border: 1px solid transparent; background: transparent;
    padding: 3px 5px; border-radius: var(--raio-1);
    font: inherit; color: inherit; line-height: 1.3;
}
.pwf-in::placeholder { color: var(--texto-claro); opacity: .8; }
.pwf-in:hover { border-color: var(--borda); }
.pwf-in:focus { outline: none; border-color: var(--st-info); background: var(--sup-1, #fff); box-shadow: 0 0 0 2px var(--st-info-tinta); }
.pwf-num { text-align: right; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }

/* Acoes so aparecem na linha sob o cursor: tres botoes em cada uma das 200
   linhas seria uma parede de icones concorrendo com o texto. */
.pwf-bt { border: 0; background: transparent; padding: 2px; cursor: pointer; color: var(--texto-claro); opacity: 0; border-radius: var(--raio-1); }
.pwf-tr:hover .pwf-bt, .pwf-bt:focus-visible { opacity: 1; }
.pwf-bt:hover { color: var(--tinta-1); background: var(--fundo-suave); }
.pwf-bt .ico { width: 14px; height: 14px; display: block; }
.pwf-bt--dir .ico { transform: rotate(180deg); }
.pwf-bt--x:hover { color: var(--st-critico); }

.pwf-nova td { background: transparent; border-bottom: 0; }
.pwf-nova .pwf-in-nome { font-style: italic; }
.pwf-nova .pwf-in-nome:focus { font-style: normal; }

.pwf-rodape { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: var(--txt-densa); color: var(--texto-claro); flex-wrap: wrap; }
.pwf-dica kbd {
    font-family: var(--fonte-num); font-size: 10px; padding: 1px 5px; border-radius: 3px;
    border: 1px solid var(--borda); background: var(--fundo-suave); color: var(--tinta-2);
}
@media (prefers-reduced-motion: reduce) { .pwf-bt { transition: none; } }

/* Onda 2 da folha: preco, total e mover. O total e leitura, nunca campo — a
   coluna calculada com cara de editavel e convite pra digitar num lugar que o
   sistema ignora. */
.pwf-total { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; color: var(--tinta-1); font-weight: var(--peso-medio); white-space: nowrap; }
.pwf-n1 .pwf-total { font-weight: var(--peso-enfase); }
.pwf-c-ac { width: 128px; }
.pwf-bt--cima .ico { transform: rotate(180deg); }


/* ===================================================================
   INCORPORAÇÃO E NEGÓCIOS IMOBILIÁRIOS
   Pipeline de sete fases, ficha de oportunidade e painel de resultado.
   Usa os tokens do sistema: nada de cor solta, número é tabular.
   Ver js/incorporacao.js.
   =================================================================== */
.inc-topo { display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--esp-3); margin-bottom: var(--esp-4); flex-wrap: wrap; }
.inc-titulo { margin: 0 0 4px; font-size: var(--txt-titulo); color: var(--tinta-1); }
.inc-ajuda { margin: 0; font-size: var(--txt-apoio); color: var(--tinta-3); max-width: 68ch; }
/* Cota estourada: é regra do produto, não opinião. Cor de alerta, não de marca. */
.inc-alerta-cota { color: var(--st-atencao); font-weight: 600; }
/* Lente da carteira: fica logo acima da tabela, e a nota explica o que
   cada uma responde. Botões na mesma altura do filtro de fase. */
.inc-otica-lista { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin: var(--esp-3) 0 var(--esp-1); }

/* LINHA DO TEMPO DO CRONOGRAMA
   Responde "quando", que a tabela não responde. Barra para baixo é saída,
   para cima é entrada, e a curva é o dinheiro próprio acumulado. Rola na
   horizontal em obra longa: a página nunca rola de lado. */
.inc-tl-caixa { margin: var(--esp-3) 0; }
.inc-tl-rolagem { overflow-x: auto; overflow-y: hidden; }
.inc-tl { display: block; max-width: none; }
.inc-tl-zero { stroke: var(--linha-2); stroke-width: 1; }
.inc-tl-entra { fill: var(--st-ok); opacity: .85; }
.inc-tl-sai { fill: var(--st-critico); opacity: .72; }
.inc-tl-curva { fill: none; stroke: var(--tinta-1); stroke-width: 2; stroke-linejoin: round; }
.inc-tl-pior { fill: var(--st-atencao); opacity: .13; }
.inc-tl-mes { fill: var(--tinta-3); font-size: 11px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.inc-tl-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-3);
    font-size: var(--txt-apoio); color: var(--tinta-3); margin-bottom: var(--esp-2); }
.inc-tl-legenda i { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
    margin-right: 6px; vertical-align: -1px; }
.inc-tl-p-entra { background: var(--st-ok); }
.inc-tl-p-sai { background: var(--st-critico); }
.inc-tl-p-curva { background: var(--tinta-1); }
.inc-tl-p-pior { background: var(--st-atencao); opacity: .45; }
/* Célula com a conta aberta no title: o tracejado avisa que há mais ali. */
.inc-cron2-taxas { border-bottom: 1px dotted var(--linha-2); cursor: help; }

/* EXTRATO DO CRONOGRAMA
   Cada mês é um bloco que se lê de cima para baixo: recebe, paga, sobra.
   A matriz de onze colunas obrigava a pessoa a montar a narrativa do mês
   na cabeça, atravessando colunas quase todas vazias. */
.inc-cron-linha1 { margin: 0 0 var(--esp-3); color: var(--tinta-2); }
.inc-cron-vistas { display: flex; gap: var(--esp-1); margin: var(--esp-3) 0 var(--esp-2); }

.inc-ext { display: flex; flex-direction: column; gap: var(--esp-2); }
.inc-ext-mes { border: 1px solid var(--borda); border-radius: var(--raio-2);
    background: var(--sup-1); overflow: hidden; }
.inc-ext-mes--pior { border-color: var(--st-atencao); box-shadow: 0 0 0 1px var(--st-atencao) inset; }

.inc-ext-cab { display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap;
    padding: var(--esp-2) var(--esp-3); background: var(--sup-2); border-bottom: 1px solid var(--borda); }
.inc-ext-n { font-weight: var(--peso-enfase); color: var(--tinta-1); font-variant-numeric: tabular-nums; }
.inc-ext-fase { color: var(--tinta-3); font-size: var(--txt-apoio); }
.inc-ext-tag { font-size: var(--txt-apoio); color: var(--st-atencao); font-weight: var(--peso-medio); }
.inc-ext-saldo { margin-left: auto; font-size: var(--txt-apoio); color: var(--tinta-3); }
.inc-ext-saldo strong { font-variant-numeric: tabular-nums; font-weight: var(--peso-enfase);
    font-size: var(--txt-corpo); margin-left: 4px; }
.inc-ext-neg { color: var(--st-critico); }
.inc-ext-pos { color: var(--st-ok); }

.inc-ext-corpo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.inc-ext-lado { padding: var(--esp-2) var(--esp-3); }
.inc-ext-lado + .inc-ext-lado { border-left: 1px solid var(--borda); }
.inc-ext-lado h5 { margin: 0 0 6px; font-size: var(--txt-apoio); text-transform: uppercase;
    letter-spacing: .04em; color: var(--tinta-3); font-weight: var(--peso-medio); }
.inc-ext-lado h5 em { font-style: normal; float: right; color: var(--tinta-2);
    font-variant-numeric: tabular-nums; letter-spacing: 0; }
.inc-ext-item { display: flex; justify-content: space-between; gap: var(--esp-2);
    padding: 2px 0; font-size: var(--txt-apoio); }
.inc-ext-item span { color: var(--tinta-2); }
.inc-ext-item strong { font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inc-ext-v-pos { color: var(--st-ok); }
.inc-ext-v-neg { color: var(--tinta-1); }
.inc-ext-nada { font-size: var(--txt-apoio); color: var(--tinta-4); font-style: italic; }

.inc-ext-pe { display: flex; align-items: center; gap: var(--esp-2);
    padding: 6px var(--esp-3); border-top: 1px solid var(--borda); font-size: var(--txt-apoio); }
.inc-ext-pe > span { color: var(--tinta-3); white-space: nowrap; }
.inc-ext-pe > strong { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inc-ext-barra { flex: 1; height: 6px; background: var(--sup-3); border-radius: 3px; overflow: hidden; min-width: 60px; }
.inc-ext-barra i { display: block; height: 100%; }
.inc-ext-b-neg { background: var(--st-critico); }
.inc-ext-b-pos { background: var(--st-ok); }

@media (max-width: 720px) {
    .inc-ext-corpo { grid-template-columns: 1fr; }
    .inc-ext-lado + .inc-ext-lado { border-left: 0; border-top: 1px solid var(--borda); }
    .inc-ext-saldo { margin-left: 0; width: 100%; }
    /* Em tela estreita o rodapé não cabe em uma linha e o valor do
       acumulado era CORTADO. Dinheiro cortado pela metade é pior do que
       dinheiro nenhum: a barra desce para a linha de baixo. */
    .inc-ext-pe { flex-wrap: wrap; }
    .inc-ext-pe > strong { margin-left: auto; }
    .inc-ext-barra { order: 3; flex-basis: 100%; min-width: 0; margin-top: 4px; }
}

/* CABEÇALHO CLICÁVEL DA CARTEIRA
   Cada título ordena a coluna. O alinhamento do título segue o do dado:
   texto à esquerda, número à direita, para o título nascer no início da
   coluna que ele nomeia e a leitura descer reta. */
.inc-tabela th.inc-th { cursor: pointer; user-select: none; white-space: nowrap;
    text-align: left; vertical-align: top; }
.inc-tabela th.inc-th:hover { color: var(--bordao); }
.inc-tabela th.inc-th--ativo { color: var(--bordao); font-weight: var(--peso-enfase); }

/* O título e a seta num invólucro: a seta é decoração e não pode deslocar
   o rótulo, senão ele deixa de bater com o dado da coluna. Em coluna
   numérica o invólucro inverte e a seta vai para a esquerda, deixando o
   texto encostado na direita, na mesma prumada do número. */
.inc-th-in { display: inline-flex; align-items: baseline; gap: 4px; }
.inc-tabela th.inc-th.inc-num { text-align: right; }
.inc-tabela th.inc-th.inc-num .inc-th-in { flex-direction: row-reverse; }
.inc-th-seta { font-size: 10px; color: var(--bordao); line-height: 1; }

.inc-tabela th.inc-th-acoes { text-align: right; white-space: nowrap; }
/* Título e dado começam na mesma altura, ou a linha parece torta. */
.inc-tabela th, .inc-tabela td { vertical-align: top; }

/* Composição do tributo da obra, aberta na tela. */
.inc-trib-nota { margin: var(--esp-2) 0 var(--esp-3); }
.inc-trib { width: 100%; max-width: 420px; border-collapse: collapse; font-size: var(--txt-apoio); }
.inc-trib td { padding: 3px 0; color: var(--tinta-2); }
.inc-trib td.inc-num { font-variant-numeric: tabular-nums; color: var(--tinta-1); }
.inc-trib-total td { border-top: 1px solid var(--borda); padding-top: 5px;
    font-weight: var(--peso-enfase); color: var(--tinta-1); }
.inc-trib-nota .inc-ajuda { margin: 6px 0 0; }

/* Tempo no ar do anúncio. Anúncio parado é preço que ninguém pagou. */
.inc-comp-dias { font-variant-numeric: tabular-nums; cursor: help; }
.inc-comp-dias sup { color: var(--tinta-4); }
.inc-comp-dias--parado { color: var(--st-atencao); font-weight: var(--peso-medio); }
.inc-comp-dias--saiu { color: var(--st-ok); font-weight: var(--peso-medio); }
.inc-otica-lista + .inc-ajuda { margin: 0 0 var(--esp-3); }
.inc-aviso { margin: var(--esp-2) 0 0; font-size: var(--txt-apoio); color: var(--tinta-2);
    border-left: 3px solid var(--atencao, #d9a83f); background: var(--sup-2);
    padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-2); max-width: 78ch; }
.inc-sub { margin: var(--esp-4) 0 var(--esp-2); font-size: var(--txt-destaque);
    color: var(--tinta-1); border-bottom: 1px solid var(--borda); padding-bottom: 4px; }

/* Pipeline: as sete fases lado a lado, clicáveis como filtro. */
.inc-pipeline { display: flex; gap: var(--esp-2); margin: var(--esp-4) 0; overflow-x: auto;
    padding-bottom: 4px; }
.inc-fase { flex: 1 1 0; min-width: 128px; background: var(--sup-1);
    border: 1px solid var(--borda); border-radius: var(--raio-2);
    padding: var(--esp-2) var(--esp-3); cursor: pointer; position: relative;
    transition: border-color .15s, background .15s; }
.inc-fase:hover { border-color: var(--borda-forte); background: var(--sup-2); }
.inc-fase-ativa { border-color: var(--bordao); background: var(--sup-2); }
.inc-fase-topo { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.inc-fase-n { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--sup-3);
    color: var(--tinta-3); font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
    font-size: 11px; font-weight: var(--peso-medio); display: inline-flex;
    align-items: center; justify-content: center; }
.inc-fase-label { font-size: var(--txt-apoio); color: var(--tinta-2); line-height: 1.25; }
.inc-fase-qtd { font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
    font-size: var(--txt-titulo); color: var(--tinta-1); font-weight: var(--peso-enfase);
    display: flex; align-items: baseline; gap: 5px; }
.inc-fase-un { font-family: inherit; font-size: 11px; font-weight: var(--peso-normal);
    color: var(--tinta-4); }
.inc-acoes { white-space: nowrap; }
.inc-acoes .cm-btn { padding: 4px 9px; font-size: var(--txt-apoio); }

/* Ficha: formulário à esquerda, resultado sempre visível à direita. */
.inc-form-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr);
    gap: var(--esp-4); align-items: start; }
.inc-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px; }
.inc-checks { display: flex; gap: var(--esp-3); align-items: center; padding-top: 22px;
    font-size: var(--txt-apoio); color: var(--tinta-2); white-space: nowrap; }
.inc-checks label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.inc-painel-resultado { background: var(--sup-2); border: 1px solid var(--borda);
    border-radius: var(--raio-2); padding: var(--esp-3) var(--esp-4) var(--esp-4);
    position: sticky; top: var(--esp-2); }
.inc-painel-resultado .inc-sub { margin-top: 0; }
.inc-res-linha { display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--esp-3); padding: 5px 0; font-size: var(--txt-apoio); color: var(--tinta-2);
    border-bottom: 1px dotted var(--borda); }
.licitacoes-table th.inc-num, .licitacoes-table td.inc-num { text-align: right;
    font-family: var(--fonte-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inc-res-linha .inc-num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
    color: var(--tinta-1); white-space: nowrap; }
.inc-res-forte { font-weight: var(--peso-medio); color: var(--tinta-1); }
.inc-res-forte .inc-num { font-weight: var(--peso-enfase); }
.inc-veredito { margin-top: var(--esp-3); text-align: center; }
.inc-chip { display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: var(--sup-3); color: var(--tinta-2); font-size: var(--txt-apoio);
    white-space: nowrap; }
.inc-tag-mini { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
    background: var(--sup-3); color: var(--tinta-3); font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; }

@media (max-width: 900px) {
    .inc-form-grid { grid-template-columns: 1fr; }
    .inc-painel-resultado { position: static; }
}

/* Folha: situacao, equipe, mao de obra e o seletor de colunas (05/09/2026).
   O Diretor: "faltam informacoes na aba de planejamento, como toda a situacao
   de cadastro de frente, mao de obra". A grade agora mostra o que esta e o
   que falta, e o duplo clique abre os MESMOS cards da bancada. */
.pwf-c-eq { width: 150px; }
.pwf-c-sit { width: 104px; }
.pwf-num-cel { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
/* "falta" nao e erro: e trabalho pendente. Por isso ambar e nao vermelho —
   vermelho numa planilha que a pessoa acabou de comecar a preencher trata
   normalidade como acidente. */
.pwf-falta { color: var(--st-atencao); font-weight: var(--peso-medio); }
.pwf-derivada { color: var(--tinta-2); border-bottom: 1px dashed var(--st-atencao); }
.pwf-sit {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    font-size: var(--txt-rotulo); font-weight: var(--peso-enfase);
    letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.pwf-sit--ok    { background: var(--st-ok-tinta);      color: var(--st-ok); }
.pwf-sit--aten  { background: var(--st-atencao-tinta); color: var(--st-atencao); }
.pwf-sit--fraca { background: var(--st-neutro-tinta);  color: var(--st-neutro); }

.pwf-cols { position: relative; }
.pwf-cols-bt {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 9px; border-radius: var(--raio-1);
    border: 1px solid var(--borda); background: transparent;
    font-size: var(--txt-densa); font-weight: var(--peso-medio); color: var(--tinta-2); cursor: pointer;
}
.pwf-cols-bt:hover { background: var(--fundo-suave); color: var(--tinta-1); }
.pwf-cols-bt .ico { width: 14px; height: 14px; opacity: .7; }
.pwf-cols-menu {
    position: absolute; right: 0; top: 30px; z-index: 30;
    min-width: 186px; padding: 8px;
    background: var(--sup-1, #fff); border: 1px solid var(--borda);
    border-radius: var(--raio-1); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    display: flex; flex-direction: column; gap: 2px;
}
.pwf-cols-menu label {
    display: flex; align-items: center; gap: 7px; padding: 3px 4px;
    font-size: var(--txt-densa); color: var(--tinta-1); cursor: pointer; border-radius: 4px;
}
.pwf-cols-menu label:hover { background: var(--fundo-suave); }
.pwf-bt--abre { color: var(--st-info); }

/* Mapa do módulo Incorporação: satélite por iframe (Google Embed) e mapa
   com entorno por Leaflet. Altura fixa, porque mapa sem altura declarada
   nasce com zero pixel e o Leaflet mede errado. */
.inc-mapa-barra { display: flex; align-items: center; justify-content: space-between;
    gap: var(--esp-2); margin: var(--esp-3) 0 var(--esp-2); flex-wrap: wrap; }
.inc-mapa-caixa { border: 1px solid var(--borda); border-radius: var(--raio-2);
    overflow: hidden; background: var(--sup-2); }
.inc-mapa-caixa > p { padding: var(--esp-4); margin: 0; }
#incMapaSatelite, #incMapaOsm { height: 320px; width: 100%; }
#incMapaIframe { width: 100%; height: 100%; border: 0; display: block; }
#incMapaOsm { z-index: 0; }
.leaflet-container { font: inherit; }
.inc-topo-acoes { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }

/* Calculadora do CUB: os adicionais ficam em lista de uma linha por item,
   porque cada um deles é uma decisão de quem orça, não um detalhe. */
.inc-adicionais { border: 1px solid var(--borda); border-radius: var(--raio-2);
    padding: var(--esp-2) var(--esp-3); margin-top: var(--esp-2); background: var(--sup-1); }
.inc-adic-titulo { font-size: var(--txt-apoio); font-weight: var(--peso-medio);
    color: var(--tinta-2); margin-bottom: 6px; }
.inc-adic-linha { display: grid; grid-template-columns: 1fr 84px 18px; gap: 8px;
    align-items: center; padding: 3px 0; }
.inc-adic-linha label { margin: 0; font-size: var(--txt-apoio); color: var(--tinta-2); }
.inc-adic-linha input { text-align: right; font-family: var(--fonte-num);
    font-variant-numeric: tabular-nums; padding: 4px 7px; }
.inc-adic-pct { font-size: var(--txt-apoio); color: var(--tinta-4); }

.inc-res-sep { border-top: 1px solid var(--borda); margin: 8px 0 6px; }

.inc-res-bloco { margin: var(--esp-3) 0 6px; padding-top: var(--esp-2);
    border-top: 2px solid var(--bordao); font-size: var(--txt-apoio);
    font-weight: var(--peso-medio); color: var(--bordao); }

.inc-sugestao { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap;
    margin: 6px 0 var(--esp-2); padding: var(--esp-2) var(--esp-3);
    background: var(--sup-2); border-radius: var(--raio-2); }
.inc-comp-resumo { padding: var(--esp-2) var(--esp-3); font-size: var(--txt-apoio);
    color: var(--tinta-2); border-bottom: 1px solid var(--borda); }

/* Chave de ótica: o botão aceso muda a CONTA que está na tela, então o
   estado precisa ser inequívoco. O realce sutil do cm-btn--ativo servia
   para barra de ferramentas, não para uma chave que troca dinheiro. */
/* Chave em largura cheia: as três posições dividem o espaço em partes
   iguais, de borda a borda do painel, e o fundo é o mesmo do cartão. */
.inc-otica { display: flex; width: 100%; margin-bottom: var(--esp-3);
    gap: 2px; padding: 3px; background: var(--branco);
    border: 1px solid var(--borda); border-radius: var(--raio-2); }
.inc-otica .cm-btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center;
    padding: 6px 4px; font-size: 11.5px; letter-spacing: -0.1px;
    color: var(--tinta-3); border-radius: var(--raio-2); font-weight: var(--peso-normal);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-otica .cm-btn:hover:not(.cm-btn--ativo) { color: var(--tinta-1); background: var(--sup-2); }
.inc-otica .cm-btn--ativo,
.inc-otica .cm-btn--ativo:hover,
.inc-otica-lista .cm-btn--ativo,
.inc-otica-lista .cm-btn--ativo:hover {
    background: var(--bordao); color: #fff; border-color: var(--bordao);
    font-weight: var(--peso-enfase); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.inc-otica-nota::before { content: "Mostrando: "; font-weight: var(--peso-enfase);
    color: var(--tinta-2); }
.inc-cmp { width: 100%; border-collapse: collapse; font-size: var(--txt-apoio); }
.inc-cmp th { text-align: right; color: var(--tinta-3); font-weight: var(--peso-medio);
    padding: 4px 0 6px; border-bottom: 1px solid var(--borda); }
.inc-cmp th:first-child { text-align: left; }
.inc-cmp td { padding: 5px 0; border-bottom: 1px dotted var(--borda); color: var(--tinta-2); }
.inc-cmp td.inc-num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
    color: var(--tinta-1); white-space: nowrap; padding-left: var(--esp-3); }
.inc-cmp-forte td { font-weight: var(--peso-medio); color: var(--tinta-1); }

.inc-otica-nota { margin: 0 0 var(--esp-3); font-size: var(--txt-apoio);
    color: var(--tinta-3); line-height: 1.4; }

.inc-inv-lista { display: flex; flex-direction: column; gap: 4px; }
.inc-inv-check { display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: var(--txt-apoio); color: var(--tinta-2); }
.inc-inv-check .inc-ajuda { margin-left: auto; }

/* No tema escuro o bordão vira rosa claro, e texto branco em cima dele
   fica com contraste de 2,9 para 1: baixo demais para texto pequeno.
   Sobre o claro, tinta escura. */
:root[data-tema="escuro"] .inc-otica .cm-btn--ativo,
:root[data-tema="escuro"] .inc-otica .cm-btn--ativo:hover,
:root[data-tema="escuro"] .inc-otica-lista .cm-btn--ativo,
:root[data-tema="escuro"] .inc-otica-lista .cm-btn--ativo:hover { color: #241016; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .inc-otica .cm-btn--ativo,
  :root:not([data-tema="claro"]) .inc-otica .cm-btn--ativo:hover,
  :root:not([data-tema="claro"]) .inc-otica-lista .cm-btn--ativo,
  :root:not([data-tema="claro"]) .inc-otica-lista .cm-btn--ativo:hover { color: #241016; }
}

/* Preço-teto do terreno: a resposta que decide a negociação, então tem
   peso de destaque e cor de veredito. */
.inc-teto { border-left: 3px solid var(--borda); padding: var(--esp-2) var(--esp-3);
    margin: var(--esp-2) 0; background: var(--sup-2); border-radius: var(--raio-2); }
.inc-teto--ok { border-left-color: var(--ok, #2e7d4f); }
.inc-teto--nao { border-left-color: var(--erro, #b3261e); }
.inc-teto-valor { font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
    font-size: var(--txt-destaque); font-weight: var(--peso-enfase); color: var(--tinta-1); }

/* Cronograma de desembolso: tabela larga que rola dentro do painel, e um
   resumo em cima com os quatro números que decidem o pedido ao banco. */
.inc-cron-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--esp-2); margin-bottom: var(--esp-3); }
.inc-cron-resumo > div { background: var(--sup-1); border: 1px solid var(--borda);
    border-radius: var(--raio-2); padding: var(--esp-2) var(--esp-3); display: flex;
    flex-direction: column; gap: 2px; }
.inc-cron-resumo strong { font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
    font-size: var(--txt-destaque); color: var(--tinta-1); }
.inc-cron { width: 100%; border-collapse: collapse; font-size: 11px; }
.inc-cron th { text-align: right; color: var(--tinta-3); font-weight: var(--peso-medio);
    padding: 4px 6px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.inc-cron th:nth-child(2) { text-align: left; }
.inc-cron td { padding: 3px 6px; border-bottom: 1px dotted var(--borda); color: var(--tinta-2); }
.inc-cron td.inc-num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
    text-align: right; white-space: nowrap; }
.inc-cron-neg { color: var(--erro, #b3261e); }

/* Card do cronograma: largura cheia, tabela agrupada por fase. A versão
   antiga vivia no painel lateral de 400px e ninguém conseguia ler. */
.inc-cron-card { max-width: 1180px; width: 96%; }
.inc-cron-cabeca { display: flex; align-items: center; justify-content: space-between;
    gap: var(--esp-3); margin-bottom: var(--esp-4); padding-bottom: var(--esp-2);
    border-bottom: 1px solid var(--borda); }
.inc-cron-cabeca h2 { margin: 0; font-size: var(--txt-titulo); color: var(--bordao); }

.inc-cron-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--esp-2); margin-bottom: var(--esp-4); }
.inc-cron-kpi { background: var(--sup-1); border: 1px solid var(--borda);
    border-left: 3px solid var(--borda-forte); border-radius: var(--raio-2);
    padding: var(--esp-2) var(--esp-3); display: flex; flex-direction: column; gap: 3px; }
.inc-cron-kpi span { font-size: var(--txt-apoio); color: var(--tinta-3); }
.inc-cron-kpi strong { font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
    font-size: var(--txt-titulo); color: var(--tinta-1); line-height: 1.1; }
.inc-cron-kpi small { font-size: 11px; color: var(--tinta-4); }
.inc-cron-kpi--alerta { border-left-color: var(--atencao, #d9a83f); }
.inc-cron-kpi--ok { border-left-color: var(--ok, #2e7d4f); }
.inc-cron-kpi--nao { border-left-color: var(--erro, #b3261e); }

.inc-cron2 { width: 100%; border-collapse: collapse; font-size: 12px; }
.inc-cron2 th { text-align: right; color: var(--tinta-3); font-weight: var(--peso-medio);
    padding: 6px 8px; border-bottom: 1px solid var(--borda-forte); white-space: nowrap;
    position: sticky; top: 0; background: var(--branco); z-index: 1; }
.inc-cron2 th:nth-child(2) { text-align: left; }
.inc-cron2 td { padding: 4px 8px; border-bottom: 1px solid var(--sup-2); color: var(--tinta-2); }
.inc-cron2 td.inc-num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums;
    text-align: right; white-space: nowrap; }
.inc-cron2-mes { width: 42px; color: var(--tinta-4); }
.inc-cron2-fase { color: var(--tinta-3); font-size: 11px; }
.inc-cron2-grupo td { background: var(--sup-2); font-weight: var(--peso-medio);
    color: var(--tinta-1); border-top: 1px solid var(--borda); padding: 6px 8px; }
.inc-cron2-grupo span { font-weight: var(--peso-normal); color: var(--tinta-4); font-size: 11px; }
.inc-cron-entra { color: var(--ok, #2e7d4f); }
.inc-cron-vazio { color: var(--tinta-4); }
.inc-cron-notas { margin-top: var(--esp-4); padding-top: var(--esp-3);
    border-top: 1px solid var(--borda); display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-3); }
.inc-cron-notas p { margin: 0; font-size: var(--txt-apoio); color: var(--tinta-3); line-height: 1.45; }
.inc-cron-notas strong { color: var(--tinta-2); }

.inc-cron-leitura { background: var(--sup-2); border-radius: var(--raio-2);
    padding: var(--esp-2) var(--esp-3); margin-bottom: var(--esp-3);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--esp-3); }
.inc-cron-leitura p { margin: 0; font-size: var(--txt-apoio); color: var(--tinta-2); line-height: 1.5; }
.inc-cron-leitura strong { color: var(--tinta-1); }
.inc-cron-leitura em { font-style: normal; font-weight: var(--peso-medio); color: var(--tinta-1); }

/* ===================================================================
   MESA DO DIRETOR, sub-aba `pf-geral` da Visão Executiva (12/09/2026)

   Desenho: _painel_executivo_design_2026-09-12.md, seção 9 (Helena
   Sarmento). Os nomes `pf-sinal`, `pf-decisao` e `pf-decisao-selo` são
   dela, literais. Os `pf-decisao-*` internos, `pf-fila-*` e `pf-mesa-*`
   são desdobramento da onda 1, e ficam marcados como tal para não
   passarem por especificação dela.

   NENHUM TOKEN DE COR NOVO, nenhuma paleta paralela, nenhuma fonte
   nova (seção 9, último parágrafo). Tudo sai de --st-*, --tinta-*,
   --sup-*, --esp-*, --raio-*, --txt-* que já existem.
   =================================================================== */

/* O sinal: faixa lateral de 3px, TRÊS variantes e nenhuma mais.
   Cor NUNCA é o único portador: a linha crítica também ganha peso no
   título e a coluna de prazo preenchida. Tire a cor no devtools e a
   linha continua operável (WCAG 1.4.1, e o sol do canteiro). */
.pf-sinal { flex: 0 0 3px; align-self: stretch; min-height: 14px;
    border-radius: 2px; background: var(--sup-3); }
.pf-sinal--critico { background: var(--st-critico); }
.pf-sinal--atencao { background: var(--st-atencao); }
.pf-sinal--info    { background: var(--sup-3); }

/* A faixa de decisão. Território das regras do Otávio: teto de cinco.
   --entupida é a tela reclamando do próprio entupimento, em vez de o
   Diretor descobrir travado. Os quatorze cards de 29/08 acumularam
   porque nada na tela tinha obrigação de reclamar. */
.pf-decisao-faixa { margin-bottom: var(--esp-4); }
.pf-decisao-faixa--entupida { border-left: 3px solid var(--st-atencao);
    padding-left: var(--esp-3); }
/* Faixa vazia: a MELHOR notícia da tela, e por isso ela não pode parecer
   erro nem buraco. Sem borda, sem cor de alerta, só respiro. A classe era
   aplicada pelo JS e não existia aqui (achado do revisor em 12/09). */
.pf-decisao-faixa--vazia { opacity: .92; }

/* O bloco da região C: o ÚNICO elemento grande da tela, de propósito.
   O que precisa da mão dele é fisicamente maior que o resto. */
.pf-decisao { border: 1px solid var(--sup-3); border-radius: var(--raio-2);
    background: var(--sup-1); padding: var(--esp-3);
    margin-bottom: var(--esp-2); }
.pf-decisao--precipicio { border-left: 3px solid var(--st-critico); }
.pf-decisao-topo { display: flex; align-items: center; gap: var(--esp-2);
    margin-bottom: 4px; }
.pf-decisao-titulo { font-size: var(--txt-destaque);
    font-weight: var(--peso-forte); color: var(--tinta-1); }
.pf-decisao-quem { display: flex; align-items: center; gap: var(--esp-2);
    font-size: var(--txt-rotulo); color: var(--tinta-3);
    margin-bottom: 6px; }
.pf-decisao-idade { color: var(--tinta-3); }
/* A recomendação escrita não é enfeite: é a regra 2 do FRENTES.md, que
   diz que sobe com recomendação para ele responder sim ou não. */
.pf-decisao-rec { font-size: var(--txt-corpo); color: var(--tinta-2);
    line-height: 1.5; margin-bottom: var(--esp-2); }
.pf-decisao-rec--falta { color: var(--st-atencao); }
.pf-decisao-acoes { display: flex; gap: var(--esp-2); }

/* O selo de consequência. Quatro valores, os da seção 6. */
.pf-decisao-selo { font-size: var(--txt-rotulo); font-weight: var(--peso-forte);
    letter-spacing: .04em; text-transform: uppercase;
    padding: 1px 6px; border-radius: var(--raio-1); white-space: nowrap; }
.pf-decisao-selo--dinheiro { background: var(--st-critico-tinta); color: var(--st-critico); }
.pf-decisao-selo--prazo    { background: var(--st-atencao-tinta); color: var(--st-atencao); }
.pf-decisao-selo--juridico { background: var(--st-info-tinta);    color: var(--st-info); }
.pf-decisao-selo--interno  { background: var(--sup-2);            color: var(--tinta-3); }

/* A fila de prazos (onda 1). Linha de 34px, --linha-alt, o token que já
   existe: duas linhas de 11px cabem nela. */
.pf-fila { border-top: 1px solid var(--sup-3); }
.pf-fila-linha { display: flex; align-items: center; gap: var(--esp-2);
    min-height: var(--linha-alt); padding: 4px var(--esp-2);
    border-bottom: 1px solid var(--sup-3); cursor: pointer; }
.pf-fila-linha:hover { background: var(--sup-2); }
/* A linha que diz que não sabe é ITEM da fila, não aviso no canto: o
   formato tem que competir em atenção com o número. Em 29/08 esta casa
   confundiu consulta quebrada com ausência de problema. */
.pf-fila-linha--semdado { background: var(--st-atencao-tinta); cursor: default; }
.pf-fila-texto { flex: 1 1 auto; font-size: var(--txt-corpo);
    color: var(--tinta-2); min-width: 0; }
.pf-fila-quando { flex: 0 0 auto; font-size: var(--txt-rotulo);
    color: var(--tinta-3); white-space: nowrap; }
.pf-fila-valor { flex: 0 0 auto; min-width: 92px; text-align: right;
    font-size: var(--txt-corpo); color: var(--tinta-2); }

/* Filtros. Pedido do Diretor: por data e por setor. Conveniência POR
   VISUALIZADOR, então vive em localStorage e nunca no banco. */
.pf-mesa-filtros { display: flex; align-items: center; gap: var(--esp-2);
    flex-wrap: wrap; margin-bottom: var(--esp-2); }
.pf-mesa-filtros select { font: inherit; font-size: var(--txt-corpo);
    padding: 2px 6px; border: 1px solid var(--sup-3);
    border-radius: var(--raio-1); background: var(--sup-1);
    color: var(--tinta-1); }
/* Filtro que esconde item crítico sem avisar é a trava que falha
   aberta, versão interface. Esta linha é o aviso. */
.pf-mesa-fora { font-size: var(--txt-rotulo); color: var(--st-atencao);
    margin-bottom: var(--esp-2); }
/* "sem dado" com peso de aviso, nunca traço discreto e nunca zero.
   Zero desenhado como número normal é mentira gráfica. */
.pf-mesa-semdado { font-size: var(--txt-corpo); color: var(--st-atencao);
    background: var(--st-atencao-tinta); border-radius: var(--raio-1);
    padding: var(--esp-2) var(--esp-3); }

/* Celular: no canteiro, em pé, no sol. A fila deixa de ser tabela e
   cada item vira duas linhas empilhadas; o valor sai da direita. */
@media (max-width: 900px) {
    .pf-fila-linha { flex-wrap: wrap; }
    .pf-fila-texto { flex: 1 1 100%; order: 2; }
    .pf-fila-valor { min-width: 0; text-align: left; }
}

/* A linha de estado vive DENTRO de .pf-painel-titulo, que é caixa alta com
   letter-spacing de .1em. Frase inteira em caixa alta espaçada não se lê:
   apareceu na fixture como "ESPERANDO VOCÊ 3 DECISÕES SUAS, A MAIS VELHA
   DE 5 DIA(S)". Este reset é o conserto, e é por isso que a fixture existe. */
.pf-mesa-estado { text-transform: none; letter-spacing: 0;
    font-family: inherit; font-weight: var(--peso-corpo);
    font-size: 11.5px; color: var(--tinta-2); margin-left: var(--esp-2); }

/* -------------------------------------------------------------------
   A AGENDA DA MESA (onda 2, 12/09/2026): a linha de tarefa.

   É o item mais difícil do pedido do Diretor: responsável, função, fase,
   o motivo e o bloqueio numa linha que continue legível. A regra que
   mantém isso de pé, e que vale contra qualquer acréscimo futuro: por
   linha, UMA cor (o sinal), UM chip (a fase) e UM selo (o VOCÊ). Toda
   vez que alguém quiser mais um chip aqui, a resposta é não, e o lugar é
   o painel da frente, atrás do clique.
   ------------------------------------------------------------------- */
.pf-mesa-tarefa { align-items: flex-start; padding: 6px var(--esp-2); cursor: default; }

/* A caixa de marcar feito. Alvo de 16px com área de clique folgada: é
   para ser marcada com o dedo, em pé, no canteiro. */
.pf-mesa-check { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px;
    cursor: pointer; accent-color: var(--st-ok, var(--marca)); }
.pf-mesa-check:disabled { cursor: wait; opacity: .5; }

/* O POR QUÊ, em linha própria. Tarefa sem motivo é tarefa que ele empurra
   pra frente sem saber o custo de empurrar. Fica em corpo menor e tinta
   fraca: está ali para ser lida quando ele hesitar, não para competir
   com o título. */
.pf-mesa-porque { display: block; font-size: var(--txt-rotulo); color: var(--tinta-3);
    line-height: 1.45; margin-top: 2px; }

/* O TRAVAMENTO NÃO FICA ATRÁS DE CLIQUE, e ganha a cor de atenção, porque
   motivo escondido é o que faz frente dormir três semanas. */
.pf-mesa-trava { display: block; font-size: var(--txt-rotulo); color: var(--st-atencao);
    line-height: 1.45; margin-top: 2px; }

/* Nome e função em duas linhas na mesma célula, como a seção 4 do desenho
   da Helena especifica. Sem ícone, sem foto, sem inicial em círculo:
   nove círculos coloridos numa tabela é ruído e não dizem nada que o
   nome não diga. */
.pf-mesa-quem { flex: 0 0 132px; display: flex; flex-direction: column; line-height: 1.25; }
.pf-mesa-nome { font-size: var(--txt-corpo); font-weight: var(--peso-forte); color: var(--tinta-2); }
.pf-mesa-func { font-size: var(--txt-rotulo); color: var(--tinta-3); }

.pf-mesa-caixa { display: flex; align-items: center; gap: 4px; cursor: pointer;
    font-size: var(--txt-rotulo); color: var(--tinta-3); }

/* Celular: a linha deixa de ser linha e vira bloco de duas alturas. Somem
   a função e a idade; ficam a caixa, o título, o motivo e o travamento,
   que é o que se decide de pé. */
@media (max-width: 900px) {
    .pf-mesa-quem { flex: 1 1 100%; flex-direction: row; gap: 6px; order: 3; margin-left: 26px; }
    .pf-mesa-tarefa .pf-fila-quando { display: none; }
}


/* =========================================================================
   .mesa-*  MESA DO DIRETOR, VISTA LISTA (30/09/2026)
   Desenho aprovado: _mockups/mesa_do_diretor_v2.html (v2, 28/09).
   Render: js/mesavistas.js. Conferido antes de escrever: nenhuma classe
   `.mesa-` existia neste arquivo.

   COR COM FUNCAO, e so quatro funcoes:
     cinza    -> estrutura, hierarquia, fase, andamento
     vinho    -> acao (botao, link, foco). Nunca status, nunca setor
     laranja  -> atraso real, e mais nada
     --setor-*-> familia nova, saturacao baixa, so barra de 3px no cabecalho
                 de grupo e ponto de 6px na linha
   ========================================================================= */

/* --- a cor do setor entra por CLASSE, nunca por style inline --- */
.mesa-s-dir  { --mesa-cor: var(--setor-dir);  }
.mesa-s-cont { --mesa-cor: var(--setor-cont); }
.mesa-s-eng  { --mesa-cor: var(--setor-eng);  }
.mesa-s-com  { --mesa-cor: var(--setor-com);  }
.mesa-s-adm  { --mesa-cor: var(--setor-adm);  }
.mesa-s-nd   { --mesa-cor: var(--setor-nd);   }

/* --- cabecalho da tela --- */
.mesa-topo { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.mesa-h1 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
    color: var(--tinta-1); margin: 0; }
.mesa-hoje { font-size: var(--txt-corpo); color: var(--tinta-3); margin: 2px 0 0; }
.mesa-esp { flex: 1 1 auto; }
.mesa-rot { font-size: var(--txt-corpo); color: var(--tinta-4); }

/* --- o sino. Aviso de rotina mora aqui e nao nas tres listas --- */
.mesa-sino-cx { position: relative; flex: 0 0 auto; }
.mesa-sino-bt { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
    border: 1px solid var(--borda-forte); border-radius: var(--raio-1); background: transparent;
    color: var(--tinta-2); font-size: var(--txt-corpo); font-family: inherit; cursor: pointer; }
.mesa-sino-bt:hover { background: var(--sup-2); color: var(--tinta-1); }
.mesa-sino-cont { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--tinta-2); color: var(--sup-1); font-size: var(--txt-rotulo);
    font-weight: 600; line-height: 16px; text-align: center; }
.mesa-sino-cont:empty { display: none; }
.mesa-sino-caixa { position: absolute; top: 34px; right: 0; width: 340px;
    max-width: calc(100vw - 32px); background: var(--sup-1); border: 1px solid var(--borda);
    border-radius: var(--raio-2); box-shadow: var(--sombra-2); padding: 6px 0;
    z-index: 200; display: none; }
.mesa-sino-caixa[data-aberto="1"] { display: block; }
.mesa-sino-tit { font-size: var(--txt-rotulo); font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--tinta-3); padding: 6px 14px 2px; margin: 0; }
.mesa-sino-item { display: flex; align-items: center; gap: 8px; padding: 6px 14px; }
.mesa-sino-item:hover { background: var(--sup-2); }
.mesa-sino-corpo { flex: 1 1 auto; min-width: 0; }
.mesa-sino-mod { display: block; font-size: var(--txt-rotulo); text-transform: uppercase;
    letter-spacing: .06em; color: var(--tinta-4); }
.mesa-sino-item p { font-size: var(--txt-corpo); color: var(--tinta-2); margin: 0; }
.mesa-sino-item[data-critico="1"] p { color: var(--st-critico); font-weight: 600; }
.mesa-sino-pe { font-size: var(--txt-rotulo); color: var(--tinta-4); padding: 6px 14px 2px;
    border-top: 1px solid var(--borda); margin: 4px 0 0; }

/* --- barra de vista e seletores de texto (nao icone) --- */
.mesa-barra-vista { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--borda); }
.mesa-seg { display: inline-flex; gap: 4px; }
.mesa-seg-bt { height: 26px; padding: 0 8px; border: 0; border-radius: var(--raio-1);
    background: transparent; color: var(--tinta-3); cursor: pointer; font-family: inherit;
    font-size: var(--txt-corpo); font-weight: 500; }
.mesa-seg-bt:hover { background: var(--sup-3); color: var(--tinta-1); }
.mesa-seg-bt[aria-pressed="true"] { background: var(--sup-2); color: var(--tinta-1);
    font-weight: 600; box-shadow: inset 0 0 0 1px var(--borda); }

/* --- secao --- */
.mesa-secao { margin-bottom: 28px; }
.mesa-secao-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); }
.mesa-secao-topo h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em;
    color: var(--tinta-1); margin: 0; }
.mesa-cont { font-size: var(--txt-corpo); color: var(--tinta-4); }
.mesa-secao-nota { font-size: var(--txt-corpo); color: var(--tinta-3); margin: 8px 0 4px; }
.mesa-vazio { font-size: var(--txt-corpo); color: var(--tinta-3); padding: 10px 0; margin: 0; }

/* Ausencia de dado e falha de leitura NUNCA desenham como lista vazia:
   vazio e boa noticia, e as duas coisas nao podem parecer iguais. */
.mesa-semdado { font-size: var(--txt-corpo); color: var(--st-atencao); font-weight: 600;
    background: var(--st-atencao-tinta); border-radius: var(--raio-1);
    padding: 8px 10px; margin: 8px 0 0; }
.mesa-falha { font-size: var(--txt-corpo); color: var(--st-critico); font-weight: 600;
    background: var(--st-critico-tinta); border: 1px solid var(--st-critico);
    border-radius: var(--raio-1); padding: 10px 12px; margin: 0 0 14px; }

/* --- A LINHA. Densidade de linha, nao de cartao. --- */
.mesa-linha { display: flex; align-items: center; gap: 12px; min-height: 40px;
    padding: 8px 4px; border-bottom: 1px solid var(--borda); cursor: pointer; }
.mesa-linha:hover { background: var(--sup-2); }
.mesa-linha:last-child { border-bottom: 0; }
.mesa-ponto { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
    background: var(--mesa-cor, var(--setor-nd)); }
.mesa-check { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; cursor: pointer;
    accent-color: var(--marca); }
.mesa-corpo { flex: 1 1 auto; min-width: 0; }
.mesa-titulo { font-size: var(--txt-corpo); font-weight: 500; color: var(--tinta-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-sob { font-size: var(--txt-rotulo); color: var(--tinta-4); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O motivo do travamento NAO fica atras de clique: motivo escondido e o que
   faz frente dormir tres semanas. */
.mesa-trava { font-size: var(--txt-rotulo); color: var(--st-atencao); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-agente { flex: 0 0 132px; min-width: 0; }
.mesa-agente-nome { font-size: var(--txt-corpo); font-weight: 500; color: var(--tinta-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-agente-papel { font-size: var(--txt-rotulo); color: var(--tinta-4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- fase e andamento --- */
/* Fase em cima, andamento embaixo, os dois alinhados a direita. Lado a
   lado em 136px "Esperando voce" quebrava em duas linhas e empurrava a
   linha inteira para 3 alturas. */
.mesa-fase { flex: 0 0 150px; }
.mesa-fase-rot { font-size: var(--txt-rotulo); color: var(--tinta-3); display: flex;
    flex-direction: column; align-items: flex-end; text-align: right; margin-bottom: 3px; }
.mesa-fase[data-espera="1"] .mesa-fase-rot { color: var(--tinta-1); font-weight: 600; }
.mesa-fase-pct { font-variant-numeric: tabular-nums; color: var(--tinta-2); font-weight: 500; }
/* AUSENCIA TEM FORMA PROPRIA. `avanco` e null em todas as tarefas de hoje:
   a barra mostra vazio marcado e a palavra escrita, e NUNCA 0%. Zero
   desenhado como medida le como "nao saiu do lugar", e o que a gente sabe e
   que ninguem informou. */
.mesa-fase-semdado { color: var(--tinta-desab); font-style: italic; white-space: nowrap; }
/* Sem andamento NAO existe trilho: quinze barras vazias empilhadas leem
   como "tudo em zero", que e exatamente a mentira que a palavra evita. */
.mesa-trilho { height: 3px; border-radius: 2px; background: var(--sup-3); overflow: hidden; }
.mesa-trilho i { display: block; height: 100%; background: var(--tinta-3); border-radius: 2px; }

/* --- Precisa de voce --- */
.mesa-ordem { flex: 0 0 auto; width: 16px; font-size: var(--txt-rotulo); font-weight: 600;
    color: var(--tinta-4); font-variant-numeric: tabular-nums; text-align: right; }
.mesa-custo { flex: 0 0 auto; font-size: var(--txt-rotulo); color: var(--tinta-3);
    max-width: 200px; text-align: right; }
.mesa-custo[data-atraso="1"] { color: var(--st-critico); font-weight: 600; }

/* --- acao de linha: vinho, que e a unica cor de acao --- */
.mesa-linha-acoes { flex: 0 0 auto; display: inline-flex; gap: 2px; }
.mesa-linha-acao { height: 24px; padding: 0 8px; border: 0; border-radius: var(--raio-1);
    background: transparent; color: var(--marca); font-family: inherit;
    font-size: var(--txt-rotulo); font-weight: 600; cursor: pointer; }
.mesa-linha-acao:hover { background: var(--marca-tinta); }

/* --- grupo: barra de 3px na cor do setor, so quando o grupo E um setor --- */
.mesa-grupo-cab { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px;
    padding: 4px 0 4px 8px; border-left: 3px solid var(--mesa-cor, var(--borda-forte)); }
.mesa-grupo-cab h3 { font-size: var(--txt-rotulo); font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--tinta-3); margin: 0; }
.mesa-qt { font-size: var(--txt-rotulo); color: var(--tinta-desab);
    font-variant-numeric: tabular-nums; }

/* --- a gaveta. Desliza da direita POR CIMA, nunca troca de tela. --- */
.mesa-veu { position: fixed; inset: 0; background: rgba(16,21,29,.28); opacity: 0;
    pointer-events: none; transition: opacity .18s ease; z-index: var(--z-janela); }
.mesa-veu[data-aberto="1"] { opacity: 1; pointer-events: auto; }
.mesa-gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw);
    background: var(--sup-1); border-left: 1px solid var(--borda); box-shadow: var(--sombra-2);
    transform: translateX(100%); transition: transform .22s cubic-bezier(.32,.72,0,1);
    z-index: calc(var(--z-janela) + 1); display: flex; flex-direction: column; }
.mesa-gaveta[data-aberto="1"] { transform: translateX(0); }
.mesa-gaveta-topo { display: flex; align-items: center; gap: 8px; padding: 12px;
    border-bottom: 1px solid var(--borda); flex-shrink: 0; }
.mesa-gaveta-via { flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
    font-size: var(--txt-rotulo); font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--tinta-3); overflow: hidden; white-space: nowrap; }
.mesa-gaveta-via i { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.mesa-gaveta-x { flex: 0 0 auto; height: 28px; padding: 0 10px; border: 1px solid var(--borda-forte);
    border-radius: var(--raio-1); background: transparent; color: var(--tinta-2);
    font-family: inherit; font-size: var(--txt-corpo); cursor: pointer; }
.mesa-gaveta-x:hover { background: var(--sup-2); color: var(--tinta-1); }
.mesa-gaveta-corpo { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 28px; }
.mesa-gaveta-h2 { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--tinta-1);
    margin: 0 0 14px; }
.mesa-gaveta-pe { flex-shrink: 0; border-top: 1px solid var(--borda); padding: 10px 20px;
    font-size: var(--txt-rotulo); color: var(--tinta-4); margin: 0; }
.mesa-ficha { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px;
    align-items: baseline; margin: 0; }
.mesa-ficha dt { font-size: var(--txt-rotulo); color: var(--tinta-4); text-transform: uppercase;
    letter-spacing: .06em; margin: 0; }
.mesa-ficha dd { font-size: var(--txt-corpo); color: var(--tinta-1); margin: 0; }
.mesa-campo-rot { font-size: var(--txt-rotulo); font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--tinta-3); margin: 16px 0 4px; }
.mesa-nota { font-size: var(--txt-corpo); color: var(--tinta-2); margin: 0; }
.mesa-nota-trava { color: var(--st-atencao); }
.mesa-nota-frouxa { margin-top: 18px; color: var(--tinta-4); }

/* --- 768px e 480px: a linha continua linha, o que sai e a coluna do meio.
       Os mesmos dois cortes que o resto do painel.css usa. --- */
@media (max-width: 768px) {
    .mesa-agente { display: none; }
    .mesa-fase { flex: 0 0 116px; }
    .mesa-custo { display: none; }
    .mesa-gaveta { width: 100vw; }
    .mesa-ficha { grid-template-columns: 1fr; gap: 2px 0; }
    .mesa-ficha dd { margin-bottom: 8px; }
    .mesa-sino-caixa { width: calc(100vw - 48px); right: 0; }
}
@media (max-width: 480px) {
    /* O contador FICA no celular: "9 abertas, 4 dao para fazer agora" e a
       frase que responde "por onde eu comeco", que e a pergunta da tela. */
    /* No celular a barra sai e a PALAVRA fica: a fase e o que ele le no
       canteiro. "andamento nao informado" em 375px empurrava a linha
       inteira para fora da tela, e dado fora da tela e dado que nao
       existe. A ausencia continua declarada na gaveta e no desktop. */
    .mesa-fase { flex: 0 0 82px; }
    .mesa-fase-rot { margin-bottom: 0; }
    .mesa-fase-txt { white-space: normal; }
    .mesa-fase-semdado { display: none; }
    .mesa-trilho { display: none; }
    /* Titulo quebra em vez de cortar: em 375px o corte engolia metade da
       frase e a lista deixava de responder o que a tarefa e. */
    .mesa-titulo, .mesa-trava, .mesa-sob { white-space: normal; }
    /* O motivo do travamento cabe em duas linhas. Inteiro, ele chegava a
       cinco e uma tarefa ocupava meia tela: o texto completo esta no
       `title` e na gaveta, que e onde ha polegar de sobra. */
    .mesa-trava { display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden; }
    .mesa-linha { gap: 8px; align-items: flex-start; }
    .mesa-linha-acao { padding: 0 4px; }
    .mesa-topo { flex-wrap: wrap; }
}

/* ===================================================================
   CRONOGRAMA DA OBRA: HIERARQUIA REVISADA (12/10/2026)

   Direção de design, tela 2. A pergunta única da tela é "a data de entrega
   aguenta? se não, o que segura?". Ordem de leitura agora:
     1. faixa de entrega (resposta em uma frase, fora do viewport)
     2. avisos (recolhidos, abrem sozinhos só com rede circular)
     3. barra de comandos em UMA linha + faixa de leitura sempre à vista
     4. grade e barras, com a altura que sobrar

   Nada aqui cria token novo: tudo sai de --sup-*, --borda, --tinta-* e
   --st-*. O vinho da marca nunca aparece como estado.
   =================================================================== */
.obra-faixa {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--esp-3); flex-wrap: wrap;
    padding: 8px 12px; margin-bottom: 8px;
    background: var(--sup-1); border: 1px solid var(--borda); border-radius: 8px;
}
.obra-faixa-resposta { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 360px; }
.obra-faixa-resposta .cm-chip { flex-shrink: 0; }
.obra-faixa-frase { min-width: 0; line-height: 1.5; color: var(--tinta-1); }
.obra-faixa-frase .cm-btn { margin-left: 6px; vertical-align: middle; }
.obra-faixa-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.obra-chev { display: inline-flex; margin-left: 4px; transition: transform .15s; }
.obra-faixa-avisos[aria-expanded="true"] .obra-chev { transform: rotate(180deg); }

.obra-avisos {
    display: flex; flex-direction: column; gap: 8px;
    padding: 8px; margin-bottom: 8px;
    background: var(--sup-2); border: 1px solid var(--borda); border-radius: 8px;
}
.obra-aviso {
    display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
    padding: 8px 12px; border: 1px solid var(--borda); border-left-width: 3px;
    border-radius: 6px; background: var(--sup-1);
}
.obra-aviso-ico { display: inline-flex; flex-shrink: 0; margin-top: 1px; }
.obra-aviso-txt { flex: 1 1 280px; min-width: 0; line-height: 1.6; color: var(--tinta-1); }
.obra-aviso-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.obra-aviso--critico { border-color: var(--st-critico); background: var(--st-critico-tinta); }
.obra-aviso--critico .obra-aviso-ico { color: var(--st-critico); }
.obra-aviso--atencao { border-color: var(--st-atencao); background: var(--st-atencao-tinta); }
.obra-aviso--atencao .obra-aviso-ico { color: var(--st-atencao); }
.obra-aviso--info { border-left-color: var(--st-info); }
.obra-aviso--info .obra-aviso-ico { color: var(--st-info); }
.obra-aviso-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Ribbon em UMA linha: abas e a faixa da aba ativa lado a lado. O rótulo do
   grupo sai da vista (o grupo segue separado por divisória e cada botão tem
   dica), o que devolve uns 20px de altura pra grade. */
.obra-ribbon-topo { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--sup-2); }
.obra-ribbon-topo .cm-ribbon-abas {
    border-bottom: 0; background: transparent; padding: 4px 6px; align-items: center;
    flex: 0 0 auto;
}
.obra-ribbon-topo .cm-ribbon-aba { margin-bottom: 0; border-bottom: 1px solid transparent; border-radius: 6px; padding: 4px 10px; }
.obra-ribbon-topo .cm-ribbon-aba.ativa { border-color: var(--borda); box-shadow: none; }
.obra-ribbon-topo > [data-faixa] { flex: 1 1 0; min-width: 0; background: transparent; border-left: 1px solid var(--borda); }
.obra-ribbon-1linha .cm-ribbon-rotulo { display: none; }
.obra-ribbon-1linha .cm-ribbon--compacto .cm-ribbon-grupo { padding: 3px 6px; }
.obra-leitura { border-top: 1px solid var(--borda); background: var(--sup-1); }
#obraGanttOuter .obra-leitura { background: var(--sup-1); }
.obra-rot-inline { white-space: nowrap; margin-left: 4px; }

/* Barra de baixo: só leitura. As três formas diferem por forma, não só por
   cor: hachura densa com contorno cheio, tracejado vazado, hachura larga. */
.obra-leg { display: flex; gap: 12px; align-items: center; flex-shrink: 0; margin-right: 14px; min-width: 0; }
.obra-leg-it { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.obra-forma { display: inline-block; width: 16px; height: 9px; border-radius: 2px; box-sizing: border-box; background: var(--st-info); }
.obra-forma--atrasada {
    background-image: repeating-linear-gradient(45deg, var(--st-critico) 0, var(--st-critico) 1.6px, transparent 1.6px, transparent 4px);
    box-shadow: 0 0 0 1.5px var(--st-critico);
}
.obra-forma--parada { background: transparent; border: 1.5px dashed var(--st-atencao); }
.obra-forma--risco {
    background-image: repeating-linear-gradient(45deg, var(--st-atencao) 0, var(--st-atencao) 1.6px, transparent 1.6px, transparent 6px);
}

/* Estados escritos: vazio, erro e carregando. */
.obra-vazio {
    margin: 12px; padding: 16px 18px; border: 1px dashed var(--borda-forte); border-radius: 8px;
    background: var(--sup-1); color: var(--tinta-2);
}
.obra-vazio-titulo { font-weight: var(--peso-forte); color: var(--tinta-1); margin-bottom: 6px; }
.obra-vazio--erro { border-style: solid; border-color: var(--st-critico); background: var(--st-critico-tinta); }
.obra-carregando { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--sup-1); }
.obra-carregando-txt { color: var(--tinta-3); margin-bottom: 8px; }
.obra-carregando-linha {
    height: 16px; margin-bottom: 6px; border-radius: 3px; background: var(--sup-3);
    animation: obra-pulsa 1.2s ease-in-out infinite;
}
@keyframes obra-pulsa { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .obra-carregando-linha { animation: none; } }

/* Celular: a planilha ocupa a tela, o gráfico abre por botão. */
.obra-so-celular { display: none; }
@media (max-width: 640px) {
    .obra-so-celular { display: inline-flex; }
    #obraGanttOuter.obra-ribbon-recolhido #obraRibbon { display: none; }
    .obra-faixa { padding: 8px; }
    .obra-faixa-resposta { flex-wrap: wrap; flex-basis: 100%; }
    .obra-faixa-frase { flex: 1 1 100%; }
    .obra-faixa-acoes { width: 100%; flex-shrink: 1; }
    .obra-ribbon-topo > [data-faixa] { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--borda); }
    #obraGanttOuter.obra-gantt-lista #obraGanttHeaderScroll,
    #obraGanttOuter.obra-gantt-lista #obraGanttBarsScroll,
    #obraGanttOuter.obra-gantt-lista #obraGanttScrollBottom,
    #obraGanttOuter.obra-gantt-lista .obra-divider-resize { display: none; }
    .obra-leg { flex-wrap: wrap; row-gap: 2px; }
}

/* ===================================================================
   PAINEL DA LICITACAO, ABA DADOS PELA DECISAO (12/10/2026)
   Direcao da Helena (TELA 3, _revisao_sistema_2026-10-12), revisada no mesmo
   dia. A tela deixa de ser um formulario na ordem da digitacao e passa a
   responder, no alto, "vale participar, e o que falta?". Nenhum campo saiu;
   nenhum token novo de cor ou de fonte: tudo abaixo e --sup-*, --tinta-*,
   --borda, --st-*, --txt-*, --raio-*, --acao. Prefixo lic- para nao colidir.
   Niveis de leitura: faixa (acima das abas), "O que falta" (lista de verbos),
   grupos Nosso registro / O certame / Comissao e concorrentes / Acompanhamento.
   =================================================================== */
.lic-faixa { padding: 10px 28px 12px; border-top: 1px solid var(--borda); background: var(--sup-2); }
.lic-faixa:empty { display: none; }
.lic-faixa-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.lic-faixa-topo .cm-chip .ico { width: 12px; height: 12px; }
.lic-faixa-nota { font-size: var(--txt-densa); color: var(--tinta-3); }
.lic-faixa-celulas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--sup-1); overflow: hidden; }
.lic-cel { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; cursor: pointer;
    font-family: inherit; color: var(--tinta-1); background: transparent; border: 0; border-left: 1px solid var(--borda);
    padding: 8px 10px; transition: background .12s; }
.lic-cel:first-child { border-left: 0; }
.lic-cel:hover:not(:disabled) { background: var(--sup-3); }
.lic-cel:disabled { cursor: default; opacity: .7; }
.lic-cel:focus-visible { outline: none; box-shadow: inset var(--anel-foco); }
.lic-cel-rot { display: flex; align-items: center; gap: 5px; font-size: var(--txt-rotulo); font-weight: var(--peso-enfase);
    letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Afordancia: a celula leva a algum lugar. Chevron discreto, mais forte no hover/foco. */
.lic-cel-rot .ico { width: 10px; height: 10px; margin-left: auto; flex: none; opacity: .55; transition: opacity .12s, transform .12s; }
.lic-cel:hover:not(:disabled) .lic-cel-rot .ico, .lic-cel:focus-visible .lic-cel-rot .ico { opacity: 1; transform: translateX(1px); }
.lic-cel-val { font-size: 13.5px; font-weight: var(--peso-forte); color: var(--tinta-1); font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lic-cel-sub { font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.3; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* ESTADO POR FORMA, ALEM DA COR E DA PALAVRA DO .lic-cel-sub:
   ok = circulo cheio; atencao = quadrado; critico = losango; neutro = traco;
   vazio/lendo = circulo vazado. Quem nao distingue a cor distingue a forma. */
.lic-cel-ponto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--st-neutro); }
.lic-cel-ponto--ok { background: var(--st-ok); }
.lic-cel-ponto--info { background: var(--st-info); }
/* Onda 3 (Helena): o tracinho parecia travessão; neutro é círculo vazado. */
.lic-cel-ponto--neutro { background: transparent; box-shadow: inset 0 0 0 1.5px var(--st-neutro); }
.lic-cel-ponto--atencao { background: var(--st-atencao); border-radius: 1px; }
.lic-cel-ponto--critico { background: var(--st-critico); border-radius: 1px; width: 6px; height: 6px; transform: rotate(45deg); margin: 0 1px; }
.lic-cel-ponto--vazio, .lic-cel-ponto--carregando { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tinta-3); }
.lic-cel-alerta { flex: none; display: inline-flex; color: var(--st-atencao); }
.lic-cel .lic-cel-rot .lic-cel-alerta .ico { width: 10px; height: 10px; margin: 0; opacity: 1; transform: none; }
.lic-cel--falhou .lic-cel-val { color: var(--st-atencao); }
.lic-cel--vazio .lic-cel-val, .lic-cel--carregando .lic-cel-val { font-weight: var(--peso-enfase); font-style: italic; color: var(--tinta-3); }

/* O que falta: cada linha termina em verbo */
.lic-falta { border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--sup-2); padding: 4px 12px 2px; margin-bottom: 14px; }
.lic-falta[hidden] { display: none; }
.lic-falta-tit { font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); padding: 8px 0 4px; }
.lic-falta-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--borda); }
.lic-falta-tit + .lic-falta-linha { border-top: 0; }
.lic-falta-txt { font-size: var(--txt-corpo); color: var(--tinta-1); min-width: 0; }
.lic-falta-linha .cm-btn { flex: none; }

/* Grupos */
.lic-grupo { border: 1px solid var(--borda); border-radius: var(--raio-3); background: var(--sup-1); padding: 14px 16px 6px; margin-bottom: 14px; }
.lic-grupo--registro { padding: 12px 16px 2px; }
.lic-grupo-cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; }
.lic-grupo-tit { margin: 0; font-size: 15px; font-weight: var(--peso-forte); letter-spacing: -.01em; color: var(--tinta-1); }
.lic-grupo-sub { font-size: var(--txt-densa); color: var(--tinta-3); min-width: 0; }
.lic-grupo-cab .lic-origem, .lic-sub .lic-origem { margin-left: auto; align-self: center; }
/* Chip dentro de rotulo em caixa-alta nao herda a caixa-alta nem o espacamento */
.lic-sub .cm-chip { text-transform: none; letter-spacing: 0; font-weight: var(--peso-enfase); }
.lic-grupo--negocio > summary { cursor: pointer; list-style: none; align-items: center; flex-wrap: nowrap; margin-bottom: 0; padding-bottom: 8px; }
.lic-grupo--negocio > summary::-webkit-details-marker, .lic-recolhe > summary::-webkit-details-marker { display: none; }
.lic-grupo--negocio > summary .lic-grupo-tit { flex: none; }
.lic-grupo--negocio[open] > summary { margin-bottom: 4px; border-bottom: 1px solid var(--borda); }
.lic-grupo--negocio .lic-grupo-sub { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lic-seta { flex: none; width: 14px; height: 14px; color: var(--tinta-3); transition: transform .15s; margin-left: auto; }
details[open] > summary .lic-seta { transform: rotate(180deg); }
.lic-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 9px; padding-top: 12px; border-top: 1px solid var(--borda);
    font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.lic-sub .ico { width: 13px; height: 13px; }
.lic-grupo-cab + .lic-sub, summary + .lic-sub { margin-top: 8px; padding-top: 0; border-top: 0; }
.lic-opcional { font-size: var(--txt-densa); font-weight: var(--peso-corpo); letter-spacing: 0; text-transform: none; color: var(--tinta-3); }
.lic-grupo--plano { padding-bottom: 4px; }
.lic-grupo--plano .lic-grupo-cab { margin-bottom: 10px; }

.lic-grid { display: grid; gap: 0 14px; }
.lic-grid--2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lic-grid--3 { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.lic-grid--par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lic-grid--ident { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lic-grid--local { grid-template-columns: minmax(0, 2fr) 84px minmax(0, 1.2fr); }
#modalNovaLicitacao .lic-grupo .form-group { margin-bottom: 11px; }
#modalNovaLicitacao .lic-grupo .form-group label { font-size: 11.5px; color: var(--tinta-2); font-weight: var(--peso-enfase); }
#modalNovaLicitacao .lic-grupo .form-group input:not([type="checkbox"]),
#modalNovaLicitacao .lic-grupo .form-group select { padding: 8px 10px; border-radius: var(--raio-2); }
#modalNovaLicitacao .lic-grupo .form-group textarea { padding: 8px 10px; overflow-y: hidden; min-height: calc(2 * 1.45em + 18px); }
/* Seletor com a mesma seta em todo navegador e nos dois temas: desenhada com
   gradientes sobre tokens (o sprite nao entra em <select>). So nesta tela. */
#modalNovaLicitacao .lic-grupo .form-group select {
    -webkit-appearance: none; appearance: none; padding-right: 30px;
    background-image: linear-gradient(45deg, transparent 50%, var(--tinta-3) 50%), linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%);
    background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
/* Numero alinha a direita, com algarismo de largura fixa (Inter, tabular-nums) */
#modalNovaLicitacao .lic-num { text-align: right; font-variant-numeric: tabular-nums; }

.lic-dica { font-size: var(--txt-densa); color: var(--tinta-3); margin: -2px 0 11px; line-height: 1.45; }
.lic-dica[hidden] { display: none; }
.lic-dica--aviso { color: var(--st-atencao); background: var(--st-atencao-tinta); padding: 6px 9px; border-radius: var(--raio-1); }
.lic-nota-link { padding-top: 6px; }
.lic-nota-link .lic-dica--aviso { display: inline-block; margin: 0 0 6px; }
.lic-link { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: var(--txt-corpo); font-weight: var(--peso-enfase); color: var(--acao); }
.lic-link .ico { width: 12px; height: 12px; }
.lic-link:hover { text-decoration: underline; }
.lic-nota { margin: 0; font-size: var(--txt-densa); line-height: 1.45; color: var(--tinta-3); }
.lic-nota .ico { width: 12px; height: 12px; vertical-align: -2px; }
.lic-nota--ok .ico { color: var(--st-ok); }
.lic-nota--atencao .ico { color: var(--st-atencao); }
#notaVisitaTecnicaSubstituivel.lic-nota { margin-top: 5px; }

/* Bloco recolhivel dentro de grupo: so linhas, sem cartao dentro de cartao */
.lic-recolhe { border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); margin: 4px 0 10px; }
.lic-recolhe > summary { display: flex; align-items: center; gap: 10px; padding: 9px 0; cursor: pointer; list-style: none; font-size: var(--txt-corpo); }
.lic-recolhe-tit { font-weight: var(--peso-enfase); color: var(--tinta-1); flex: none; }
.lic-recolhe-res { flex: 1; min-width: 0; font-size: var(--txt-densa); color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lic-recolhe > summary + * { margin-top: 4px; }

/* Raio-X: linhas com cabecalho alinhado */
.lic-rx-linha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, 2fr) 32px; gap: 8px; align-items: center; margin-bottom: 6px; }
.lic-rx-cab { margin-bottom: 4px; font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3); }
.lic-rx-cab .lic-rx-num { text-align: right; }
#areaConcorrentesLicitacao input { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid var(--borda); border-radius: var(--raio-1);
    background: var(--sup-1); color: var(--tinta-1); font: inherit; font-size: var(--txt-corpo); }
#areaConcorrentesLicitacao input.lic-rx-num { text-align: right; font-variant-numeric: tabular-nums; }
#areaConcorrentesLicitacao input:focus { outline: none; border-color: var(--borda-forte); box-shadow: var(--anel-foco); }
.lic-rx-del { color: var(--tinta-3); justify-content: center; }
.lic-rx-del:hover:not(:disabled) { color: var(--st-critico); background: var(--st-critico-tinta); }

.lic-sujo { font-size: var(--txt-densa); font-weight: var(--peso-enfase); color: var(--st-atencao); background: var(--st-atencao-tinta);
    padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lic-sujo[hidden] { display: inline-block; visibility: hidden; }   /* reserva o espaco: o cabecalho nao pula */
/* Subtitulo do painel em UMA linha: com o selo de alteracao ele quebrava,
   deixava o separador orfao e empurrava a tela para baixo. */
#modalNovaLicitacao .painel-header-topo > div:first-child { min-width: 0; flex: 1; }
#modalNovaLicitacao .painel-subtitulo { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#modalNovaLicitacao .painel-header-acoes { flex: none; }
/* 4. Selo "IA" da aba: era branco translucido (feito para fundo vinho) e
   sumia no tema claro. Na aba ele usa a tinta de info, visivel nos dois. */
#modalNovaLicitacao .painel-aba-btn .badge-ia { background: var(--st-info-tinta); color: var(--st-info); }
.lic-sujo-m { display: none; }

/* Dialogo nomeado do painel (descartar alteracoes, salvar e excluir pasta) */
.lic-dialogo-fundo { position: fixed; inset: 0; z-index: var(--z-dialogo); display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(16, 21, 29, .45); }
.lic-dialogo { width: min(420px, 100%); background: var(--sup-1); color: var(--tinta-1); border-radius: var(--raio-3);
    box-shadow: var(--sombra-2); padding: 18px 18px 14px; }
.lic-dialogo-tit { font-size: var(--txt-destaque); font-weight: var(--peso-forte); line-height: 1.35; }
.lic-dialogo-txt { margin: 8px 0 0; font-size: var(--txt-corpo); color: var(--tinta-2); line-height: 1.45; }
.lic-dialogo-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.lic-btn-perigo { background: var(--st-critico-fundo); color: var(--sobre-marca); font-weight: var(--peso-enfase); }
.lic-btn-perigo:hover:not(:disabled) { background: var(--st-critico-fundo); color: var(--sobre-marca); filter: brightness(1.08); }

@media (max-width: 700px) {
    /* No celular o painel inteiro rola junto (a faixa nao fica presa no alto,
       comendo a tela). So a linha do titulo, com Salvar e X, fica fixa. O X ja
       fecha, entao o Cancelar sai; o aviso de alteracao fica, em texto curto. */
    #modalNovaLicitacao .modal-content { overflow-y: auto; }
    #modalNovaLicitacao .painel-header-fixo { display: contents; }
    #modalNovaLicitacao .painel-header-topo { position: sticky; top: 0; z-index: 3; background: var(--branco);
        border-bottom: 1px solid var(--borda); padding: 12px 14px 8px; gap: 8px; }
    #modalNovaLicitacao .painel-corpo { flex: none; overflow: visible; }
    /* Sem isto a barra de abas (overflow-x) encolhia ate altura zero e sumia. */
    #modalNovaLicitacao .modal-content > *, #modalNovaLicitacao .painel-abas, #modalNovaLicitacao .lic-faixa { flex-shrink: 0; }
    #modalNovaLicitacao .painel-abas { border-bottom: 1px solid var(--borda); }
    #modalNovaLicitacao .btn-painel-cancelar { display: none; }
    #modalNovaLicitacao .painel-header-fixo h2 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #modalNovaLicitacao .painel-subtitulo { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; }
    #modalNovaLicitacao .painel-link-pncp { display: none; }
    #modalNovaLicitacao .painel-header-acoes { flex: none; gap: 6px; }
    .lic-sujo { padding: 3px 7px; }
    .lic-sujo-d { display: none; }
    .lic-sujo-m { display: inline; }
    .lic-faixa { padding: 8px 14px 10px; }
    .lic-faixa-celulas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 146px; overflow-x: auto; scroll-snap-type: x proximity; }
    .lic-cel { scroll-snap-align: start; }
    #modalNovaLicitacao .painel-abas { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 8px; }
    #modalNovaLicitacao .painel-aba-btn { flex: none; white-space: nowrap; padding: 9px 11px; }
    .lic-grupo { padding: 12px 12px 4px; }
    .lic-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lic-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .lic-grid--exig { grid-template-columns: minmax(0, 1fr); }
    .lic-grid--ident { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lic-grid--ident > .lic-col-cheia-m { grid-column: 1 / -1; }
    .lic-grid--local { grid-template-columns: 84px minmax(0, 1fr); }
    .lic-grid--local .lic-col-orgao { grid-column: 1 / -1; }
    .lic-grupo--negocio > summary { flex-wrap: wrap; }
    .lic-grupo--negocio > summary .lic-grupo-sub { order: 3; flex: 1 1 100%; white-space: normal; overflow: visible; }
    #modalNovaLicitacao #fObjeto { min-height: calc(4 * 1.45em + 18px); }
    .lic-rx-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
    .lic-rx-linha > :nth-child(1) { grid-column: 1 / -1; }
    .lic-rx-linha > :nth-child(4) { grid-column: 1 / 3; }
    .lic-rx-cab { display: none; }
    .lic-falta-linha .cm-btn { min-height: var(--alt-confortavel); }
    #modalNovaLicitacao .form-group input, #modalNovaLicitacao .form-group select { min-height: var(--alt-confortavel); }
}

/* ==========================================================================
   ONDA 0 DOS COMPONENTES: botões, janelas e toast (12/10/2026)
   Especificação: _revisao_sistema_2026-10-12/07_modernizacao_componentes_helena.md
   (seções 2, 4 e 7). Este bloco fica DE PROPÓSITO no fim do arquivo: ele faz
   as famílias antigas (.btn*, .pw-btn*, .btn-painel-*) convergirem para o
   desenho do .cm-btn por cascata, sem mexer em HTML nem em JS de módulo. Cada
   regra aqui vence a anterior pela posição, não por especificidade.
   O que NÃO muda: a altura de cada família (padding próprio) e o HTML.
   ========================================================================== */

/* ---- Foco visível em tudo que parece botão. O anel global de 3px a 20% quase
        não aparecia em a.cm-btn, [role=button] e .cm-seg button. Contorno de
        2px na cor de ação: 5,3:1 no claro e 6,4:1 no escuro. ---- */
.cm-btn:focus-visible, a.cm-btn:focus-visible, [role="button"]:focus-visible,
.cm-seg button:focus-visible, .btn:focus-visible, .pw-btn:focus-visible,
.btn-painel-salvar:focus-visible, .btn-painel-cancelar:focus-visible {
    outline: 2px solid var(--acao); outline-offset: 2px; box-shadow: none;
}
.cm-seg button:focus-visible { outline-offset: 0; }
a.cm-btn { text-decoration: none; }

/* ---- Desenho comum: raio, peso e transição das quatro famílias ---- */
.btn, .btn-painel-salvar, .btn-painel-cancelar, .pw-btn {
    border-radius: var(--raio-2); font-weight: var(--peso-enfase);
    transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease,
                border-color var(--dur-rapida) ease;
}
.cm-btn { transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease,
                      border-color var(--dur-rapida) ease; }
.btn:active, .btn-painel-salvar:active { transform: none; }
.cm-btn:active:not(:disabled), .btn:active:not(:disabled) { transform: none; }
.btn:disabled, .btn[aria-disabled="true"], .pw-btn:disabled,
.btn-painel-salvar:disabled, .btn-painel-cancelar:disabled { cursor: default; opacity: .55; }

/* ---- Primário: um só, --marca-fundo, hover mais escuro nos dois temas.
        (--marca-forte clareia no escuro e derrubava o branco para 3:1.) ---- */
.btn-primary, .btn-painel-salvar, .pw-btn.pri, .cm-btn--primario {
    background: var(--marca-fundo); color: var(--sobre-marca);
    border: 1px solid var(--marca-fundo); box-shadow: none;
}
.btn-primary:hover:not(:disabled), .btn-painel-salvar:hover:not(:disabled),
.pw-btn.pri:hover:not(:disabled), .cm-btn--primario:hover:not(:disabled) {
    background: var(--marca-fundo-hover); border-color: var(--marca-fundo-hover);
    color: var(--sobre-marca);
}
/* ---- Secundário: contorno neutro ---- */
.btn-secondary, .btn-painel-cancelar, .cm-btn--contorno {
    background: var(--sup-1); color: var(--tinta-1);
    border: 1px solid var(--borda); box-shadow: none;
}
.btn-secondary:hover:not(:disabled), .btn-painel-cancelar:hover:not(:disabled),
.cm-btn--contorno:hover:not(:disabled) {
    background: var(--sup-2); border-color: var(--borda-forte); color: var(--tinta-1);
}
.btn-outline { box-shadow: none; }

/* ---- Perigo: VISÍVEL EM REPOUSO (texto e borda --st-critico). O fundo cheio
        só aparece no hover e numa janela de confirmação. Antes, .cm-btn--perigo
        em repouso era idêntico a "Cancelar". Contraste: texto crítico sobre
        branco 5,31:1 (claro) e sobre --sup-1 5,96:1 (escuro); branco sobre
        --st-critico-fundo 5,76:1 em ambos. ---- */
.cm-btn--perigo, .btn-danger, .pw-btn.perigo {
    color: var(--st-critico); border: 1px solid var(--st-critico);
    background: var(--sup-1); box-shadow: none;
}
.cm-btn--perigo:hover:not(:disabled), .btn-danger:hover:not(:disabled),
.pw-btn.perigo:hover:not(:disabled), .cm-btn--perigo-cheio, .cm-dialogo .cm-btn--perigo,
.modal--perigo .cm-btn--perigo, .modal--perigo .btn-danger {
    background: var(--st-critico-fundo); border-color: var(--st-critico-fundo);
    color: var(--sobre-marca);
}
.cm-btn--perigo:disabled, .btn-danger:disabled { border-color: var(--borda); color: var(--tinta-4); background: transparent; }

/* ---- Tamanhos: 24 / 30 (base) / 38. A altura vem do token. ---- */
.cm-btn--sm { min-height: var(--alt-compacto); padding: 0 var(--esp-2); font-size: var(--txt-densa);
    gap: 5px; position: relative; }
.cm-btn--sm .ico { width: 14px; height: 14px; }
/* área clicável ampliada no desktop (WCAG 2.5.8) sem crescer o desenho */
.cm-btn--sm::before { content: ''; position: absolute; inset: -6px; }
.cm-btn--lg { min-height: var(--alt-confortavel); padding: 0 var(--esp-4); font-size: 13px; gap: 8px; }
.cm-btn--lg .ico { width: 16px; height: 16px; }
.cm-btn--icone.cm-btn--sm { width: var(--alt-compacto); padding: 0; }

/* ---- A bancada mantém a altura compacta (26 px) pelo token ---- */
.pw-btn { min-height: calc(var(--alt-compacto) + 2px); }
.pw-btn.pri, .pw-btn.perigo { border-width: 1px; }
.pw-btn--so, .pw-btn--icone { width: calc(var(--alt-compacto) + 2px); }
.pw-btn:active { transform: none; }

/* ---- Carregando: aria-busy, largura preservada (o rótulo continua ocupando o
        espaço, só fica transparente) e spinner no centro. O desenho do
        spinner é o ícone loader do sprite, aplicado como máscara. ---- */
.cm-btn--carregando, .btn--carregando, .cm-btn[aria-busy="true"], .btn[aria-busy="true"],
.pw-btn[aria-busy="true"] {
    position: relative; color: transparent !important; cursor: progress; pointer-events: none;
    --cm-spin: var(--tinta-2);
}
.cm-btn--carregando .ico, .cm-btn[aria-busy="true"] .ico, .btn[aria-busy="true"] .ico,
.pw-btn[aria-busy="true"] .ico, .cm-btn--carregando .badge-ia, .btn[aria-busy="true"] .badge-ia, .pw-btn[aria-busy="true"] .badge-ia { opacity: 0; }
.cm-btn--carregando::after, .btn--carregando::after, .cm-btn[aria-busy="true"]::after,
.btn[aria-busy="true"]::after, .pw-btn[aria-busy="true"]::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
    background: var(--cm-spin);
    -webkit-mask: var(--cm-loader) center / contain no-repeat; mask: var(--cm-loader) center / contain no-repeat;
    animation: cm-gira .9s linear infinite;
}
.cm-btn--primario[aria-busy="true"], .btn-primary[aria-busy="true"], .btn-painel-salvar[aria-busy="true"],
.pw-btn.pri[aria-busy="true"], .cm-btn--carregando.cm-btn--primario, .btn-ia[aria-busy="true"],
.cm-btn--ia[aria-busy="true"], .pw-btn--ia[aria-busy="true"], .cm-btn--ia.cm-btn--carregando { --cm-spin: var(--sobre-marca); }
.cm-btn--perigo[aria-busy="true"], .btn-danger[aria-busy="true"] { --cm-spin: var(--st-critico); }
.cm-btn--carregando:disabled, .btn[aria-busy="true"]:disabled { opacity: 1; }
@keyframes cm-gira { to { transform: rotate(360deg); } }

/* ---- BOTÃO DE IA: um componente só (.cm-btn--ia). .btn-ia e .pw-btn--ia
        apontam para ele. Decisão do Diretor (12/10/2026): continua
        demonstrando IA. Identidade: gradiente curto entre dois tons da cor de
        AÇÃO (--ia-de, --ia-ate), faíscas do sprite e selo "IA" (vêm no HTML).
        Repouso ESTÁTICO. Movimento só em dois momentos: um reflexo único ao
        passar o mouse e um shimmer discreto enquanto pensa. Sem neon, sem
        sombra de brilho, sem respiração. Contraste do branco: 7,5:1 e 5,1:1. ---- */
.cm-btn--ia, .btn-ia, .pw-btn--ia {
    color: var(--sobre-marca); border: 1px solid transparent; box-shadow: none; overflow: hidden;
    background-color: var(--ia-de);
    background-image:
        linear-gradient(105deg, transparent 35%, rgba(255,255,255,.26) 50%, transparent 65%),
        linear-gradient(135deg, var(--ia-de) 0%, var(--ia-ate) 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    background-repeat: no-repeat;
    transition: background-position .6s ease, filter var(--dur-rapida) ease;
}
.cm-btn--ia:hover:not(:disabled), .btn-ia:hover:not(:disabled), .pw-btn--ia:hover:not(:disabled) {
    background-position: -30% 0, 0 0; filter: none; color: var(--sobre-marca);
    border-color: transparent;
}
.cm-btn--ia:disabled, .btn-ia:disabled, .pw-btn--ia:disabled { opacity: .55; cursor: default; }
.cm-btn--ia .ico, .btn-ia .ico, .pw-btn--ia .ico { opacity: 1; animation: none; }
.cm-btn--ia .badge-ia, .btn-ia .badge-ia, .pw-btn--ia .badge-ia { margin-left: 2px; }
/* "pensando": o reflexo corre devagar enquanto a chamada está no ar */
.cm-btn--ia.cm-btn--carregando, .cm-btn--ia[aria-busy="true"], .btn-ia[aria-busy="true"],
.pw-btn--ia[aria-busy="true"] {
    color: transparent !important;
    animation: cm-ia-pensa 1.8s ease-in-out infinite;
}
@keyframes cm-ia-pensa { 0% { background-position: 130% 0, 0 0; } 100% { background-position: -30% 0, 0 0; } }
.btn-ia::after, .pw-btn--ia::after { animation: none; }

/* ---- 44 px no celular e no toque (canteiro) ---- */
@media (max-width: 640px) {
    .cm-btn, .btn, .btn-sm, .pw-btn, .btn-painel-salvar, .btn-painel-cancelar, .cm-seg button {
        min-height: var(--alt-toque);
    }
    .cm-btn--icone, .pw-btn--so, .pw-btn--icone { min-width: var(--alt-toque); }
    .cm-btn--sm::before { display: none; }
}

/* ==========================================================================
   JANELAS: mesmo escrim, z-index em escala, raio, sombra e animação.
   .modal, .modal-lateral .modal-content, .orcsug-* e .pw-* falam a mesma
   língua. O z-index e o fundo de cada overlay estão na própria regra de
   origem (var(--z-janela), var(--escrim)).
   ========================================================================== */
@keyframes cm-janela-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cm-escrim-in { from { opacity: 0; } to { opacity: 1; } }
.modal.active, .orcsug-overlay, .pw-overlay { animation: cm-escrim-in var(--dur-rapida) ease-out; }
.modal-content, .orcsug-modal, .pw-modal {
    border-radius: var(--raio-3); box-shadow: var(--sombra-2); border: 1px solid var(--borda);
}
.modal.active .modal-content, .orcsug-modal, .pw-modal { animation: cm-janela-in var(--dur-rapida) ease-out; }
/* O painel da licitação entrava com scale(.985) e 280 ms: agora é a mesma
   entrada das outras (fade + 8 px, 140 ms, sem scale). */
.modal-lateral .modal-content { transform: none; opacity: 1; transition: none; border-radius: var(--raio-3); }
.modal-lateral.active .modal-content { transform: none; }
.painel-header-fixo { border-radius: var(--raio-3) var(--raio-3) 0 0; }
/* Rodapé coerente: mensagem à esquerda, ações à direita, acima da borda */
.orcsug-foot { background: var(--sup-1); }
.orcsug-head b, .pw-modal-head b { font-weight: var(--peso-enfase); color: var(--tinta-1); }
/* Base da Onda 1 (cmDialogo ainda não existe): .cm-dialogo, .modal--perigo e
   .cm-btn--perigo-cheio já têm desenho para o diálogo de confirmação nascer
   pronto; hoje só a página de teste os usa. */
/* O pwDialogo e o pwVinculo ganham z-index inline (1300) no JS: a escala
   precisa vencer isso, senão o toast fica atrás. Por isso o !important. */
.pw-overlay { z-index: var(--z-janela) !important; }
#pwCadastros.pw-overlay { z-index: calc(var(--z-janela) + 10) !important; }
#pwVinculo.pw-overlay { z-index: calc(var(--z-janela) + 20) !important; }
#pwDialogo.pw-overlay { z-index: var(--z-dialogo) !important; }
.cm-dialogo-overlay { z-index: var(--z-dialogo); }

/* Celular: toda janela vira tela cheia, com rodapé respeitando a área segura.
   !important porque 25 .modal-content trazem largura em style="". */
@media (max-width: 640px) {
    .modal { align-items: stretch; }
    .modal-content, .modal-lateral .modal-content {
        width: 100% !important; max-width: 100% !important; height: 100dvh; max-height: 100dvh !important;
        border-radius: 0; border: 0; margin: 0;
    }
    .modal-content { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .modal-lateral .modal-content { padding-bottom: 0; }
    .painel-header-fixo { border-radius: 0; }
    .orcsug-overlay, .pw-overlay { padding: 0; align-items: stretch; }
    .orcsug-modal, .pw-modal:not(#pwCalc) {
        width: 100% !important; max-width: 100% !important; height: 100dvh; max-height: 100dvh;
        border-radius: 0; border: 0;
    }
    .pw-modal:not(#pwCalc) { overflow-y: auto; }
    .orcsug-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .modal.active, .orcsug-overlay, .pw-overlay, .modal.active .modal-content,
    .orcsug-modal, .pw-modal, .toast, .cm-btn--ia[aria-busy="true"], .btn-ia[aria-busy="true"],
    .pw-btn--ia[aria-busy="true"], .cm-btn--ia.cm-btn--carregando { animation: none; }
    .cm-btn--ia, .btn-ia, .pw-btn--ia { transition: none; }
}

/* ==========================================================================
   TOAST: ícone + texto + fechar. Sem barra lateral colorida, sem --ouro.
   Canto inferior direito no desktop, faixa inferior no celular.
   ========================================================================== */
.toast-container { pointer-events: none; }
.toast {
    pointer-events: auto; position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--esp-2); align-items: start;
    background: var(--sup-1); color: var(--tinta-1);
    border: 1px solid var(--borda); border-radius: var(--raio-2); box-shadow: var(--sombra-2);
    padding: var(--esp-2) var(--esp-1) var(--esp-2) var(--esp-3);
    font-size: var(--txt-corpo); line-height: 1.45;
    animation: cm-toast-in var(--dur-rapida) ease-out;
}
.toast.toast--saindo { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-rapida) ease, transform var(--dur-rapida) ease; }
@keyframes cm-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast .toast-ico { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.toast.sucesso .toast-ico { color: var(--st-ok); }
.toast.info .toast-ico    { color: var(--st-info); }
.toast.aviso .toast-ico   { color: var(--st-atencao); }
.toast.erro .toast-ico    { color: var(--st-critico); }
.toast .toast-txt { overflow-wrap: anywhere; padding: 1px 0; }
.toast .toast-n { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--tinta-3); font-weight: var(--peso-enfase); }
.toast .toast-x {
    width: var(--alt-padrao); height: var(--alt-padrao); margin: 0; align-self: center;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--tinta-3); border-radius: var(--raio-1); cursor: pointer;
}
.toast .toast-x:hover { background: var(--sup-3); color: var(--tinta-1); }
.toast .toast-x:focus-visible { outline: 2px solid var(--acao); outline-offset: 0; box-shadow: none; }
.toast .toast-x .ico { width: 14px; height: 14px; }
@media (max-width: 640px) {
    .toast .toast-x { width: var(--alt-toque); height: var(--alt-toque); margin: 0; }
}

/* ---- ATIVIDADE EM ANDAMENTO (14/10/2026): pílula fixa no topo, acima de
        qualquer tela ou janela, enquanto uma tarefa demorada roda. ---- */
.cm-atividade-area {
    position: fixed; top: var(--esp-3); left: 50%; transform: translateX(-50%);
    z-index: var(--z-atividade); display: flex; flex-direction: column; align-items: center; gap: var(--esp-2);
    pointer-events: none; max-width: calc(100vw - 32px);
}
.cm-atividade {
    pointer-events: auto; display: inline-flex; align-items: center; gap: var(--esp-2);
    max-width: 100%; min-height: var(--alt-padrao); margin: 0;
    padding: var(--esp-1) var(--esp-3); border: 1px solid var(--borda); border-radius: 999px;
    background: var(--sup-1); color: var(--tinta-1); box-shadow: var(--sombra-2);
    font: inherit; font-size: var(--txt-corpo); line-height: 1.3; cursor: default;
    animation: cm-toast-in var(--dur-rapida) ease-out;
}
.cm-atividade--clicavel { cursor: pointer; }
.cm-atividade--clicavel:hover { background: var(--sup-2); }
.cm-atividade:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.cm-atividade-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-atividade-spin {
    flex: none; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--borda); border-top-color: var(--acao);
    animation: cm-gira .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .cm-atividade-spin { animation-duration: 2.4s; } }
/* Botão fora do padrão cm-btn/btn que disparou algo demorado (CM-OCUPADO,
   shared.js): ganha o ícone girando ao lado do rótulo e não aceita 2º clique. */
.cm-ocupado-auto { cursor: progress; pointer-events: none; }
.cm-ocupado-auto::after {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: -2px;
    border-radius: 50%; border: 2px solid var(--borda); border-top-color: var(--acao);
    animation: cm-gira .9s linear infinite;
}
/* Até 768 px (onde a janela lateral vira tela cheia) a pílula desce: no topo
   ela cobria o título. Fica acima da faixa de toasts e das barras de ação. */
@media (max-width: 768px) {
    .cm-atividade-area { top: auto; bottom: calc(var(--alt-toque) + var(--esp-3) * 3 + env(safe-area-inset-bottom, 0px)); }
}
/* Botão do cabeçalho com a busca rodando: continua clicável, ponto girando. */
.lic-busca--rodando > .ico { display: none; }
.lic-busca--rodando::before {
    content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none;
    border: 2px solid var(--borda); border-top-color: var(--acao);
    animation: cm-gira .9s linear infinite;
}
/* Triagem no celular (14/10/2026): cada edital vira um cartão, sem rolagem lateral. */
@media (max-width: 640px) {
    .tri-tabela-wrap { overflow-x: visible; padding-bottom: calc(var(--alt-toque) + var(--alt-padrao) + var(--esp-3) * 4 + env(safe-area-inset-bottom, 0px)); }
    .tabela-triagem { min-width: 0; table-layout: auto; }
    .tabela-triagem colgroup, .tabela-triagem thead { display: none; }
    .tabela-triagem, .tabela-triagem tbody { display: block; width: 100%; }
    .tabela-triagem tbody tr {
        display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: var(--esp-2);
        padding: var(--esp-3) 0; border-bottom: 1px solid var(--borda);
    }
    .tabela-triagem tbody td { display: block; padding: 0; border: 0; }
    .tabela-triagem td.tri-sel { grid-row: 1 / span 4; padding-top: 2px; text-align: left; position: static; box-shadow: none; background: transparent; }
    .tabela-triagem td.tri-orgao { grid-column: 2; }
    .tabela-triagem td.tri-valor { grid-column: 3; grid-row: 1; }
    .tabela-triagem td.tri-objeto { grid-column: 2 / span 2; margin-top: var(--esp-1); }
    .tabela-triagem td.tri-prazo { grid-column: 2 / span 2; margin-top: var(--esp-1); white-space: normal; }
    .tabela-triagem td.tri-prazo br { display: none; }
    .tabela-triagem td.tri-prazo .tri-prazo-selo { margin-left: var(--esp-2); }
    .tabela-triagem td.tri-acoes { grid-column: 2 / span 2; margin-top: var(--esp-2); }
}

/* ---- Ajustes depois da primeira captura (12/10/2026) ---- */
/* O hover genérico do .cm-btn (background: shorthand, especificidade 3) zerava
   a imagem do gradiente da IA: o hover precisa redeclarar o desenho inteiro. */
.cm-btn--ia:hover:not(:disabled), .btn-ia:hover:not(:disabled), .pw-btn--ia:hover:not(:disabled) {
    background-color: var(--ia-de);
    background-image:
        linear-gradient(105deg, transparent 35%, rgba(255,255,255,.26) 50%, transparent 65%),
        linear-gradient(135deg, var(--ia-de) 0%, var(--ia-ate) 100%);
    background-size: 260% 100%, 100% 100%; background-repeat: no-repeat;
    background-position: -30% 0, 0 0;
}
.cm-btn--ia, .btn-ia, .pw-btn--ia { white-space: nowrap; }
/* Compacto usa o raio pequeno: 10 px em 24 px de altura vira pílula */
.cm-btn--sm, .btn-sm, .pw-btn { border-radius: var(--raio-1); }
.cm-btn--primario:disabled, .btn-primary:disabled, .btn-painel-salvar:disabled, .pw-btn.pri:disabled {
    opacity: .55; color: var(--sobre-marca);
}
.btn-painel-salvar[aria-busy="true"], .btn-painel-cancelar[aria-busy="true"] {
    position: relative; color: transparent !important; cursor: progress; pointer-events: none; --cm-spin: var(--tinta-2);
}
.btn-painel-salvar[aria-busy="true"] { --cm-spin: var(--sobre-marca); }
.btn-painel-salvar[aria-busy="true"]::after, .btn-painel-cancelar[aria-busy="true"]::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
    background: var(--cm-spin); -webkit-mask: var(--cm-loader) center / contain no-repeat; mask: var(--cm-loader) center / contain no-repeat;
    animation: cm-gira .9s linear infinite;
}
.toast .toast-n:empty { display: none; }
.modal:focus, .modal:focus-visible, .orcsug-modal:focus, .orcsug-modal:focus-visible,
.pw-modal:focus, .pw-modal:focus-visible { outline: none; box-shadow: none; }
.orcsug-modal:focus-visible, .pw-modal:focus-visible { box-shadow: var(--sombra-2); }

.toast { align-items: center; }
.toast .toast-ico { margin-top: 0; }

/* ==========================================================================
   CORREÇÕES DA REVISÃO VISUAL DA ONDA 0 (Helena, 12/10/2026)
   ========================================================================== */

/* 1) Foco: UMA faixa só. Nos botões com borda o contorno encosta na borda
      (offset 0) e a borda também vira --acao. Nos botões cheios o contorno
      fica a 2 px, senão some contra o fundo. O anel duplo vinha de
      .pw-btn:focus-visible trocando a borda para --primaria (vinho) com o
      contorno azul a 2 px por fora. */
.cm-btn:focus-visible, a.cm-btn:focus-visible, [role="button"]:focus-visible,
.btn-secondary:focus-visible, .btn-outline:focus-visible, .btn-danger:focus-visible,
.btn-painel-cancelar:focus-visible, .pw-btn:focus-visible, .cm-seg button:focus-visible {
    outline: 2px solid var(--acao); outline-offset: 0; border-color: var(--acao); box-shadow: none;
}
.cm-btn--primario:focus-visible, .btn-primary:focus-visible, .btn-painel-salvar:focus-visible,
.pw-btn.pri:focus-visible, .cm-btn--ia:focus-visible, .btn-ia:focus-visible, .pw-btn--ia:focus-visible,
.cm-btn--perigo-cheio:focus-visible, .cm-dialogo .cm-btn--perigo:focus-visible,
.modal--perigo .cm-btn--perigo:focus-visible, .modal--perigo .btn-danger:focus-visible {
    outline: 2px solid var(--acao); outline-offset: 2px; box-shadow: none;
}
.cm-btn--primario:focus-visible, .btn-primary:focus-visible, .btn-painel-salvar:focus-visible,
.pw-btn.pri:focus-visible { border-color: var(--marca-fundo); }
.cm-btn--perigo-cheio:focus-visible, .cm-dialogo .cm-btn--perigo:focus-visible,
.modal--perigo .cm-btn--perigo:focus-visible { border-color: var(--st-critico-fundo); }
.cm-btn--ia:focus-visible, .btn-ia:focus-visible, .pw-btn--ia:focus-visible { border-color: transparent; }

/* 2) IA: hover persistente (escurece 8 %) além do reflexo único. */
.cm-btn--ia:hover:not(:disabled), .btn-ia:hover:not(:disabled), .pw-btn--ia:hover:not(:disabled) {
    filter: brightness(.92);
}
/* IA carregando com rótulo no gerúndio: o chamador põe aria-busy="true" e
   data-carregando="Gerando resumo" (ou usa cmBotaoCarregando do shared.js).
   Spinner à esquerda, gerúndio, selo IA. Sem data-carregando, vale o spinner
   central de largura preservada dos outros botões. */
.btn-ia { --cm-ia-fs: 13px; } .btn-ia.btn-sm, .cm-btn--ia.cm-btn--sm { --cm-ia-fs: var(--txt-densa); }
.pw-btn--ia { --cm-ia-fs: 12px; } .cm-btn--lg.cm-btn--ia { --cm-ia-fs: 13px; }
.cm-btn--ia[aria-busy="true"][data-carregando], .btn-ia[aria-busy="true"][data-carregando],
.pw-btn--ia[aria-busy="true"][data-carregando] {
    color: var(--sobre-marca) !important; font-size: 0 !important; gap: 0;
}
.cm-btn--ia[aria-busy="true"][data-carregando] .ico, .btn-ia[aria-busy="true"][data-carregando] .ico,
.pw-btn--ia[aria-busy="true"][data-carregando] .ico { display: none; }
.cm-btn--ia[aria-busy="true"][data-carregando] .badge-ia, .btn-ia[aria-busy="true"][data-carregando] .badge-ia,
.pw-btn--ia[aria-busy="true"][data-carregando] .badge-ia { opacity: 1; order: 2; margin-left: 6px; }
.cm-btn--ia[aria-busy="true"][data-carregando]::before, .btn-ia[aria-busy="true"][data-carregando]::before,
.pw-btn--ia[aria-busy="true"][data-carregando]::before {
    content: ''; order: 0; position: static; inset: auto; flex: none; width: 14px; height: 14px; margin-right: 6px;
    background: var(--sobre-marca);
    -webkit-mask: var(--cm-loader) center / contain no-repeat; mask: var(--cm-loader) center / contain no-repeat;
    animation: cm-gira .9s linear infinite;
}
.cm-btn--ia[aria-busy="true"][data-carregando]::after, .btn-ia[aria-busy="true"][data-carregando]::after,
.pw-btn--ia[aria-busy="true"][data-carregando]::after {
    content: attr(data-carregando); order: 1; position: static; width: auto; height: auto; margin: 0;
    background: none; -webkit-mask: none; mask: none; animation: none;
    font-size: var(--cm-ia-fs, 12.5px); line-height: 1; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .cm-btn--ia[aria-busy="true"][data-carregando]::before, .btn-ia[aria-busy="true"][data-carregando]::before,
    .pw-btn--ia[aria-busy="true"][data-carregando]::before { animation: none; }
}

/* 3) Desabilitado de botão CHEIO: superfície neutra, sem degradê e sem
      opacidade. Ícone e selo continuam lá, só que apagados. */
.cm-btn--primario:disabled, .btn-primary:disabled, .btn-painel-salvar:disabled, .pw-btn.pri:disabled,
.cm-btn--ia:disabled, .btn-ia:disabled, .pw-btn--ia:disabled,
.cm-btn--perigo-cheio:disabled, .cm-dialogo .cm-btn--perigo:disabled,
.modal--perigo .cm-btn--perigo:disabled, .modal--perigo .btn-danger:disabled {
    background: var(--sup-2); background-image: none; color: var(--tinta-4);
    border-color: var(--borda); opacity: 1; filter: none; cursor: default;
}
.cm-btn--primario:disabled .ico, .btn-primary:disabled .ico, .pw-btn.pri:disabled .ico,
.cm-btn--ia:disabled .ico, .btn-ia:disabled .ico, .pw-btn--ia:disabled .ico { opacity: 1; color: var(--tinta-4); }
.cm-btn--ia:disabled .badge-ia, .btn-ia:disabled .badge-ia, .pw-btn--ia:disabled .badge-ia {
    background: var(--sup-3); color: var(--tinta-3);
}
.pw-btn.perigo:disabled { border-color: var(--borda); color: var(--tinta-4); background: transparent; }

/* 4) Celular. Diálogo (.cm-dialogo e o #pwDialogo da bancada) vira FOLHA
      INFERIOR: largura total, altura do conteúdo, presa embaixo, raio só no
      topo, botões empilhados de 44 px com a ação principal embaixo (perto do
      polegar). Tela cheia fica só para formulário. */
@media (max-width: 640px) {
    /* #pwDialogo em regra propria: navegador sem :has() descartaria a lista inteira */
    #pwDialogo.pw-overlay { align-items: flex-end; justify-content: stretch; padding: 0; }
    .modal:has(> .cm-dialogo), .pw-overlay:has(> .cm-dialogo) {
        align-items: flex-end; justify-content: stretch; padding: 0;
    }
    .modal-content.cm-dialogo, .cm-dialogo, #pwDialogo .pw-modal {
        width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 88dvh !important;
        border-radius: var(--raio-3) var(--raio-3) 0 0 !important; border: 0; margin: 0; overflow-y: auto;
        padding-bottom: calc(var(--esp-4) + env(safe-area-inset-bottom));
    }
    .cm-dialogo-acoes, #pwDialogo .pw-corpo > div:last-child {
        display: flex !important; flex-direction: column !important; align-items: stretch !important;
        justify-content: flex-start !important; gap: var(--esp-2) !important;
    }
    .cm-dialogo-acoes > button, .cm-dialogo-acoes > a, #pwDialogo .pw-corpo > div:last-child > button {
        width: 100%; min-height: var(--alt-toque); justify-content: center;
    }

    /* Formulário em tela cheia: cabeçalho fixo (título em 1 linha com
       reticências e X de 44 px sempre visível) e rodapé fixo com área segura.
       Só onde a estrutura existe: .orcsug-head/.orcsug-body/.orcsug-foot,
       .pw-modal-head e .painel-header-fixo (.modal-lateral). */
    .orcsug-modal { display: flex; flex-direction: column; }
    .orcsug-head, .orcsug-foot { flex-shrink: 0; }
    .orcsug-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .orcsug-head > div:first-child { min-width: 0; flex: 1 1 auto; }
    .orcsug-head b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .orcsug-head > button:last-child { min-width: var(--alt-toque); min-height: var(--alt-toque); flex-shrink: 0; }
    .pw-modal-head { position: sticky; top: 0; z-index: 2; background: var(--pw-sup1); }
    .pw-modal-head b { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .painel-header-topo > div:first-child { min-width: 0; }
    .painel-header-topo h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .btn-fechar-painel { width: var(--alt-toque); height: var(--alt-toque); }
}

/* 5) Toast: o X não sangra para fora (sem margem negativa) e fica centrado;
      com janela aberta no celular, o toast sobe acima do rodapé dela. */
.toast .toast-x { margin: 0; align-self: center; }
@media (max-width: 640px) {
    .toast .toast-x { margin: 0; }
    body:has(.modal.active) .toast-container, body:has(.orcsug-overlay) .toast-container,
    body:has(.pw-overlay) .toast-container {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

/* O degradê da IA cobre também a faixa da borda transparente: sem isso o
   vinho do background-color aparecia como fio na borda direita. */
.cm-btn--ia, .btn-ia, .pw-btn--ia { background-origin: border-box; }

/* ---- Revisão de código de 12/10 ----
   A calculadora da bancada fica ABAIXO do #pwDialogo (correção de 29/08:
   com ela por cima, o Enter da conta confirmava uma exclusão pendente) e
   abaixo dos toasts; acima das janelas comuns. O JS põe 1250 inline. */
#pwCalc { z-index: calc(var(--z-dialogo) - 10) !important; }
/* 44 px no celular, MENOS dentro de tabela: a linha da tabela não pode
   dobrar de altura. Lá o botão mantém o desenho e ganha área de toque
   invisível de 44 px. */
@media (max-width: 640px) {
    td .btn-sm, td .cm-btn--sm, td .pw-btn, td .btn, td .cm-btn { min-height: 0; position: relative; }
    td .pw-btn--so, td .pw-btn--icone, td .cm-btn--icone { min-width: 0; }
    td .btn-sm::after, td .cm-btn--sm::after, td .pw-btn:not([aria-busy])::after, td .cm-btn--icone:not([aria-busy])::after {
        content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, var(--alt-toque)); height: var(--alt-toque);
        transform: translate(-50%, -50%);
    }
}

/* ===================================================================
   LICITACOES, BASE MESTRE PELA DECISAO (12/10/2026)
   Direcao da Helena (TELA 4, _revisao_sistema_2026-10-12). A tabela deixa
   de ser livro de registro e vira fila de prontidao ordenada pela entrega:
   vistas com contagem no alto, prazo em dias com forma e palavra, prontidao
   por linha (as mesmas formas da faixa da aba Dados: .lic-cel-ponto), faixa
   de 3px a esquerda para a urgencia e mudanca de status em lote.
   Nenhum token novo de cor ou fonte. Prefixo lb- para nao colidir com a
   .tabela-base-mestre antiga (que ficou sem uso). No celular a tabela vira
   lista de cartoes, sem rolagem horizontal da pagina.
   =================================================================== */
.lb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lb-cont:has(.filtro-multi-painel.aberto) { overflow: visible; }
.lb-cab { gap: var(--esp-3); flex-wrap: wrap; }
.lb-cab-tit { display: flex; align-items: baseline; gap: var(--esp-3); min-width: 0; }
.lb-cab-n { font-size: var(--txt-densa); color: var(--tinta-3); white-space: nowrap; }
.lb-cab-n .cm-num { font-weight: var(--peso-forte); color: var(--tinta-1); }
.lb-cab-acoes { align-items: center; }
.lb-menu-sep { height: 1px; background: var(--borda); margin: 4px 2px; }

/* Vistas: abas sublinhadas com contagem. Rolam por dentro no celular. */
.lb-vistas { display: flex; align-items: center; gap: var(--esp-3); padding: 0 24px 0 18px; border-bottom: 1px solid var(--borda); min-width: 0; }
.lb-vistas-trilho { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; min-width: 0; flex: 1; scrollbar-width: thin; }
.lb-vista { font-family: inherit; font-size: 13px; font-weight: var(--peso-enfase); color: var(--tinta-2); background: transparent;
    border: 0; border-bottom: 2px solid transparent; padding: 11px 8px 10px; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; transition: color .12s, border-color .12s; }
.lb-vista:hover { color: var(--tinta-1); }
.lb-vista[aria-selected="true"] { color: var(--tinta-1); border-bottom-color: var(--acao); }
.lb-vista:focus-visible { outline: none; box-shadow: inset var(--anel-foco); border-radius: var(--raio-1); }
.lb-vista-n { font-size: 11px; font-weight: var(--peso-enfase); color: var(--tinta-3); background: var(--sup-3);
    border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.lb-vista[aria-selected="true"] .lb-vista-n { background: var(--acao-suave); color: var(--acao); }
/* Contagem que nao mente: "?" quando a leitura falhou. */
.lb-vista-n--falhou, .lb-vista[aria-selected="true"] .lb-vista-n--falhou { background: var(--st-atencao-tinta); color: var(--st-atencao); }
.lb-cab-n .lb-cab-falhou { padding: 1px 8px; font-size: 11px; }
.lb-vistas-sep { width: 1px; margin: 10px 6px; background: var(--borda); flex: none; }
.lb-vista-salva { display: inline-flex; align-items: center; }
.lb-vista-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: -4px;
    border: 0; background: transparent; color: var(--tinta-3); border-radius: var(--raio-1); cursor: pointer; }
.lb-vista-x:hover { background: var(--sup-3); color: var(--tinta-1); }
.lb-vista-x .ico { width: 12px; height: 12px; }
.lb-vista-nova { flex: none; color: var(--tinta-2); }
.lb-vista-form { display: inline-flex; align-items: center; gap: var(--esp-2); flex: none; padding: 6px 0; flex-wrap: wrap; }
.lb-vista-form input { font-family: inherit; font-size: 12.5px; height: var(--alt-padrao); padding: 0 10px; width: 170px;
    border: 1px solid var(--borda-forte); border-radius: var(--raio-1); background: var(--sup-1); color: var(--tinta-1); }
.lb-vista-form input:focus { outline: none; box-shadow: var(--anel-foco); }
.lb-vista-erro { font-size: var(--txt-densa); color: var(--st-atencao); }
.lb-vista-erro[hidden] { display: none; }

/* Busca e ordem */
.lb-barra { gap: var(--esp-3); }
.lb-barra input[type="text"] { height: var(--alt-padrao); padding: 0 12px; }
.lb-ordem { display: inline-flex; align-items: center; gap: var(--esp-2); }
.lb-ordem-rot { font-size: var(--txt-densa); color: var(--tinta-3); white-space: nowrap; }
/* Um seletor so para Ordenar e para o "Mudar para" do lote (revisao da Helena):
   mesma borda, raio, altura e seta nativa; largura do conteudo. */
.lb-sel, .table-toolbar select.lb-sel { font-family: inherit; font-size: 13px; height: var(--alt-padrao); padding: 0 10px; width: auto; max-width: 100%;
    border: 1px solid var(--borda); border-radius: 10px; background-color: var(--sup-1); color: var(--tinta-1); cursor: pointer; }
.lb-sel:focus { outline: none; border-color: var(--acao); box-shadow: var(--anel-foco); }
.lb-aviso { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; padding: 10px 24px; border-bottom: 1px solid var(--borda); background: var(--st-atencao-tinta); }
.lb-aviso[hidden] { display: none; }
.lb-aviso .cm-chip .ico { width: 12px; height: 12px; }
.lb-aviso-txt { font-size: var(--txt-corpo); color: var(--tinta-1); }

/* Lote */
.lb-lote { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; padding: 8px 24px;
    background: var(--acao-suave); border-bottom: 1px solid var(--borda); }
.lb-lote[hidden] { display: none; }
.lb-lote-n { font-size: 13px; font-weight: var(--peso-forte); color: var(--tinta-1); white-space: nowrap; }
.lb-lote-grupo { display: inline-flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.lb-lote-grupo--fim { margin-left: auto; }
.lb-lote-rot { font-size: var(--txt-densa); color: var(--tinta-2); }
.lic-dialogo-lista { margin: 10px 0 0; padding: 8px 10px 8px 26px; max-height: 200px; overflow: auto; background: var(--sup-2);
    border-radius: var(--raio-1); font-size: var(--txt-densa); color: var(--tinta-1); line-height: 1.45; }
.lic-dialogo-mais { list-style: none; margin-left: -16px; color: var(--tinta-3); }

/* Tabela */
.lb-tab { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.lb-tab thead th { font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); text-transform: uppercase; letter-spacing: .06em;
    color: var(--tinta-3); text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-tab td { padding: 10px; vertical-align: top; border-bottom: 1px solid var(--linha-sutil); min-width: 0; color: var(--tinta-1); }
.lb-c-check { width: 3%; } .lb-c-prazo { width: 12%; } .lb-c-lic { width: 19%; } .lb-c-obj { width: 25%; }
.lb-c-valor { width: 11%; } .lb-c-pront { width: 16%; } .lb-c-sit { width: 11%; } .lb-c-mais { width: 3%; }
.lb-tab th.lb-c-check, .lb-tab td.lb-c-check { padding-left: 16px; padding-right: 0; }
.lb-tab td.lb-c-check { vertical-align: top; padding-top: 12px; }
.lb-tab .lb-c-valor { text-align: right; }
.lb-tab .lb-c-mais { text-align: right; padding-left: 0; padding-right: 12px; }
.lb-tab td.lb-c-mais { padding-top: 6px; }
.lb-tab input[type="checkbox"] { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--acao); }
.lb-linha { cursor: pointer; }
.lb-linha td { transition: background .1s; }
.lb-linha:hover td, .lb-linha:focus-visible td { background: var(--sup-2); }
.lb-linha:focus-visible { outline: none; }
.lb-linha:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--acao); }
.lb-linha--sel td, .lb-linha--sel:hover td { background: var(--acao-suave); }
/* Chip cinza sobre o azul da selecao some: na linha marcada ele ganha fundo de superficie. */
.lb-linha--sel .lb-sit .cm-chip { background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--borda); }
/* Sinal de urgencia: faixa de 3px a esquerda (padrao do Diario). Forma, nao fundo. */
.lb-linha--critico td:first-child { box-shadow: inset 3px 0 0 var(--st-critico); }
.lb-linha--atencao td:first-child { box-shadow: inset 3px 0 0 var(--st-atencao); }

.lb-prazo-l1 { font-size: 13.5px; font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-prazo-l1--vazio { font-style: italic; font-weight: var(--peso-enfase); color: var(--tinta-3); }
.lb-prazo-l1--critico { color: var(--st-critico); }
.lb-prazo-sub { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; font-size: var(--txt-densa); color: var(--tinta-3);
    font-variant-numeric: tabular-nums; line-height: 1.3; }
.lb-prazo-sub .lic-cel-ponto { align-self: center; }

.lb-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lb-proc { font-weight: var(--peso-forte); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-proc--sem { font-style: italic; font-weight: var(--peso-enfase); color: var(--tinta-3); }
.lb-fav { display: inline-flex; color: var(--tinta-3); align-self: center; }
.lb-fav .ico { width: 12px; height: 12px; }
.lb-cli { font-size: var(--txt-densa); font-weight: var(--peso-enfase); color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lb-cli--sem { font-style: italic; font-weight: var(--peso-corpo); color: var(--tinta-3); }
.lb-l2 { margin-top: 3px; font-size: var(--txt-densa); color: var(--tinta-2); line-height: 1.35; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lb-local { color: var(--tinta-3); }
.lb-local::before { content: '\00b7'; margin: 0 6px; color: var(--tinta-4); }
/* Objeto inteiro, sem corte (pedido do Diretor, 12/10/2026: e o que ele precisa ler). */
.lb-obj { line-height: 1.4; overflow-wrap: anywhere; color: var(--tinta-1); }
.lb-obs { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: var(--txt-densa); color: var(--tinta-3); }
.lb-obs .ico { width: 12px; height: 12px; }
.lb-vazio { font-style: italic; color: var(--tinta-3); font-size: var(--txt-densa); }
.lb-v1 { font-weight: var(--peso-forte); white-space: nowrap; }
.lb-v2 { margin-top: 3px; font-size: var(--txt-densa); color: var(--tinta-3); white-space: nowrap; }

/* Prontidao: cinco marcadores com letra; o % dos atestados escrito. */
/* Grade de 5 colunas fixas: as letras ficam na mesma vertical de linha a linha. */
.lb-marcas { display: grid; grid-template-columns: 22px 22px calc(30px + 4ch) 22px 22px; column-gap: 6px; align-items: center; }
.lb-marca-v { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.lb-marca { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: var(--peso-enfase); color: var(--tinta-2);
    line-height: 16px; white-space: nowrap; cursor: help; font-variant-numeric: tabular-nums; }
.lb-marca--semdado .lb-marca-l, .lb-marca--na .lb-marca-l, .lb-marca--lendo .lb-marca-l { color: var(--tinta-3); }
.lb-marca-v { color: var(--tinta-1); }
.lb-marca-alerta, .lb-legenda-alerta { display: inline-flex; color: var(--st-atencao); }
.lb-marca-alerta .ico, .lb-legenda-alerta .ico { width: 11px; height: 11px; }
.lb-ver { margin-top: 4px; font-size: var(--txt-densa); font-weight: var(--peso-enfase); }
.lb-ver--ok { color: var(--st-ok); }
.lb-ver--atencao { color: var(--st-atencao); }
.lb-ver--neutro { color: var(--tinta-3); font-style: italic; }
.lb-na { font-size: var(--txt-densa); color: var(--tinta-3); font-style: italic; }
.lb-sit { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.lb-sit .cm-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lb-sit .cm-chip .ico { width: 11px; height: 11px; flex: none; }
.lb-mais-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid transparent;
    border-radius: var(--raio-1); background: transparent; color: var(--tinta-2); cursor: pointer; position: relative; }
.lb-mais-btn:hover { background: var(--sup-3); color: var(--tinta-1); border-color: var(--borda); }
.lb-mais-btn:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.lb-mais-btn .ico { width: 15px; height: 15px; }

/* Grupos por faixa de prazo */
.lb-grupo td { padding: 0; background: var(--sup-2); border-bottom: 1px solid var(--borda); }
.lb-grupo-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 16px; border: 0; background: transparent;
    font-family: inherit; font-size: var(--txt-densa); font-weight: var(--peso-forte); color: var(--tinta-1); cursor: pointer; text-align: left; }
.lb-grupo-btn:focus-visible { outline: none; box-shadow: inset var(--anel-foco); }
.lb-grupo-seta { display: inline-flex; color: var(--tinta-3); }
.lb-grupo-seta .ico { width: 13px; height: 13px; }
.lb-grupo-n { font-size: 11px; font-weight: var(--peso-enfase); color: var(--tinta-2); background: var(--sup-3); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.lb-grupo-dica { font-weight: var(--peso-corpo); color: var(--tinta-3); }
.lb-grupo--vencidas .lb-grupo-btn { color: var(--st-critico); }

/* Estados sem linha */
.lb-sem-linha td { padding: 0; border-bottom: 0; }
.lb-vazio-caixa { padding: var(--esp-6) 24px; }
.lb-vazio-acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.lb-lendo { padding: 12px 24px 4px; font-size: var(--txt-corpo); color: var(--tinta-3); }
.lb-esq td { border-bottom: 1px solid var(--linha-sutil); }
.lb-esq-b { display: block; height: 10px; border-radius: 4px; background: var(--sup-3); margin: 3px 0 7px; }
.lb-esq-b--fina { height: 8px; opacity: .7; margin-bottom: 3px; }
.lb-esq-b--dir { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
    .lb-esq-b { animation: lbEsq 1.4s ease-in-out infinite; }
    @keyframes lbEsq { 50% { opacity: .45; } }
}

/* Legenda no rodape: a tabela se explica sozinha, a legenda ensina as letras. */
.lb-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 24px 12px 16px; border-top: 1px solid var(--borda);
    font-size: var(--txt-densa); color: var(--tinta-3); }
.lb-legenda[hidden] { display: none; }
.lb-legenda > span { display: inline-flex; align-items: center; gap: 5px; }
.lb-legenda-tit { font-weight: var(--peso-forte); color: var(--tinta-2); }
.lb-legenda-sep { width: 1px; height: 12px; background: var(--borda); }

/* Notebook estreito: o objeto continua visivel (o Diretor precisa ler); as outras colunas cedem. */
@media (max-width: 1180px) and (min-width: 641px) {
    .lb-c-lic { width: 21%; } .lb-c-obj { width: 22%; } .lb-c-prazo { width: 11%; } .lb-c-pront { width: 18%; } .lb-c-sit { width: 10%; } .lb-c-valor { width: 12%; }
    .lb-c-check { width: 3%; } .lb-c-mais { width: 3%; }
}

/* Celular: cada licitacao vira um cartao de tres linhas. */
@media (max-width: 640px) {
    .lb-cab { padding: 12px 14px; }
    .lb-cab-acoes { display: grid; grid-template-columns: auto 1fr; gap: 8px; width: 100%; }
    .lb-cab-acoes .cm-btn--primario { grid-column: 1 / -1; justify-content: center; }
    .lb-cab-acoes #btnAbrirBuscaPncp { justify-content: center; }
    .lb-vistas { padding: 0 6px; gap: 6px; }
    .lb-vista { padding: 12px 8px 11px; }
    .lb-vistas:not(:has(.lb-vista-form)) .lb-vista-nova { font-size: 0; gap: 0; width: var(--alt-toque); padding: 0; justify-content: center; }
    .lb-vistas:not(:has(.lb-vista-form)) .lb-vista-nova .ico { width: 16px; height: 16px; }
    .lb-vistas:has(.lb-vista-form) { flex-wrap: wrap; }
    .lb-vista-form { padding: 8px 8px 10px; width: 100%; }
    .lb-vista-form input { flex: 1; min-width: 0; height: var(--alt-toque); }
    .table-toolbar.lb-barra { flex-direction: row; flex-wrap: wrap; }
    .lb-barra input[type="text"] { flex: 1 1 100%; height: var(--alt-toque); }
    .lb-ordem { width: 100%; }
    .table-toolbar .lb-ordem select.lb-sel { flex: 1; height: var(--alt-toque); }
    .lb-lote { padding: 10px 14px; gap: 10px; }
    .lb-lote-grupo { width: 100%; }
    .lb-lote .lb-sel { flex: 1; min-width: 0; height: var(--alt-toque); }
    /* As abas de vista rolam: o esmaecimento na borda direita mostra que ha mais. */
    .lb-vistas-trilho { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 20px; }
    .lb-lote-grupo--fim { margin-left: 0; justify-content: space-between; }
    .lb-aviso { padding: 10px 14px; }

    .lb-tab, .lb-tab tbody { display: block; width: 100%; }
    .lb-tab thead { display: none; }
    .lb-tab tr.lb-linha { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
        grid-template-areas: "check lic prazo" ". obj obj" ". valor sit" ". pront pront";
        column-gap: 10px; row-gap: 8px; padding: 12px 14px 12px 12px; border-bottom: 1px solid var(--borda); }
    .lb-tab tr.lb-linha td { display: block; padding: 0; border: 0; width: auto; background: transparent; }
    .lb-linha:hover td, .lb-linha--sel td, .lb-linha--sel:hover td { background: transparent; }
    .lb-linha--sel { background: var(--acao-suave); }
    .lb-linha--critico { box-shadow: inset 3px 0 0 var(--st-critico); }
    .lb-linha--atencao { box-shadow: inset 3px 0 0 var(--st-atencao); }
    .lb-linha--critico td:first-child, .lb-linha--atencao td:first-child, .lb-linha:focus-visible td:first-child { box-shadow: none; }
    .lb-tab td.lb-c-check { grid-area: check; padding: 1px 0 0; }
    .lb-tab td.lb-c-check input { width: 18px; height: 18px; }
    .lb-tab td.lb-c-lic { grid-area: lic; min-width: 0; }
    .lb-tab td.lb-c-prazo { grid-area: prazo; text-align: right; }
    .lb-prazo-sub { justify-content: flex-end; }
    .lb-tab td.lb-c-valor { grid-area: valor; text-align: left; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .lb-tab td.lb-c-valor .lb-v2 { margin: 0; }
    .lb-tab td.lb-c-sit { grid-area: sit; }
    .lb-sit { align-items: flex-end; }
    .lb-tab td.lb-c-pront { grid-area: pront; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
        padding-top: 8px; border-top: 1px dashed var(--linha-sutil); }
    .lb-tab td.lb-c-pront:empty { display: none; }
    .lb-tab td.lb-c-pront .lb-ver { margin: 0; }
    .lb-tab tr.lb-linha td.lb-c-mais { display: none; }
    /* Objeto em uma linha, abaixo do orgao: identifica sem crescer o cartao. */
    .lb-tab tr.lb-linha td.lb-c-obj { grid-area: obj; min-width: 0; margin-top: -2px; }
    .lb-tab tr.lb-linha td.lb-c-obj .lb-obj { font-size: var(--txt-densa); color: var(--tinta-2); }
    .lb-tab tr.lb-linha td.lb-c-obj .lb-obs { display: none; }
    .lb-l1 { flex-wrap: wrap; row-gap: 2px; }
    .lb-tab tr.lb-grupo, .lb-tab tr.lb-sem-linha, .lb-tab tr.lb-linha--erro { display: block; }
    .lb-tab tr.lb-grupo td, .lb-tab tr.lb-sem-linha td, .lb-tab tr.lb-linha--erro td { display: block; }
    .lb-tab tr.lb-esq { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 12px 14px; border-bottom: 1px solid var(--linha-sutil); }
    .lb-tab tr.lb-esq td { display: block; padding: 0; border: 0; grid-area: auto; text-align: left; width: auto; }
    .lb-tab tr.lb-esq td.lb-c-check, .lb-tab tr.lb-esq td.lb-c-obj, .lb-tab tr.lb-esq td.lb-c-mais, .lb-tab tr.lb-esq td.lb-c-sit { display: none; }
    .lb-grupo-btn { padding: 10px 14px; min-height: var(--alt-toque); }
    .lb-vazio-caixa { padding: var(--esp-6) 14px; }
    .lb-legenda { padding: 10px 14px 12px; gap: 6px 12px; }
}

/* =====================================================================
   ORÇAMENTOS, ONDA 1 (12/10/2026): dinheiro certo e com um nome só.
   Direção 09 da Helena, seções 2, 3, 4.0, 4.3, 4.4 e 4.5. Só tokens: o
   tema escuro sai certo sem regra própria. Valor em --tinta-1 (valor não é
   status); cor só onde há julgamento, sempre com palavra.
   ===================================================================== */
/* Barra do topo: voltar, nome, selo de origem, estado de gravação, 3 valores */
.orc-topbar { background:var(--sup-1); }
.orc-topbar-voltar { flex-shrink:0; }
.orc-topbar-titulo { flex:1 1 auto; min-width:0; flex-direction:column; align-items:flex-start; gap:1px; }
.orc-topbar-l2 { display:flex; align-items:center; gap:8px; min-width:0; max-width:100%; font-size:11.5px; }
.orc-topbar-l2 .orc-topbar-origem .cm-chip { font-size:10px; padding:1px 7px; }
.orc-topbar-titulo #orcTopTitulo { min-width:0; max-width:100%; display:block; }
.orc-topbar-titulo .orc-topbar-l2 { max-width:100%; overflow:hidden; }
.orc-topbar-titulo .orc-gravacao { font-weight:500; }
.orc-topbar-origem:empty { display:none; }
.orc-topbar-origem .cm-chip { font-size:10.5px; padding:2px 8px; }
.orc-gravacao { flex-shrink:0; font-size:11.5px; color:var(--tinta-3); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.orc-gravacao.alterado { color:var(--st-atencao); font-weight:600; }
.orc-gravacao.erro { color:var(--st-critico); font-weight:600; }
.orc-gravacao .ico { width:14px; height:14px; }
.orc-topbar-total { color:var(--tinta-3); flex-shrink:0; }
.orc-topbar-total strong { color:var(--tinta-1); }
.orc-topbar-ofertado strong { font-size:15px; }
.orc-topbar-pct { margin-left:5px; font-size:11.5px; color:var(--tinta-2); }
.orc-topbar-acoes .btn-acoes-linha { height:30px; }
@media (max-width:1366px) { .orc-topbar { gap:10px; padding:8px 12px; } .orc-topbar-total { gap:10px; } .orc-topbar-total-item { padding-left:10px; } }

/* Faixas de estado (desconto desatualizado, planilha do órgão, BDI do edital,
   exportar bloqueado): ícone + texto, tinta do estado. */
.orc-faixa { display:flex; gap:10px; align-items:flex-start; border-radius:var(--raio-2, 10px); padding:10px 13px; margin:0 0 12px; font-size:12.5px; line-height:1.45; color:var(--tinta-1); }
.orc-faixa > .ico { width:16px; height:16px; flex-shrink:0; margin-top:1px; }
.orc-faixa .btn { margin-left:6px; }
.orc-faixa--info { background:var(--st-info-tinta); }
.orc-faixa--info > .ico { color:var(--st-info); }
.orc-faixa--atencao { background:var(--st-atencao-tinta); }
.orc-faixa--atencao > .ico { color:var(--st-atencao); }
.orc-faixa-lista { margin-top:6px; font-size:11.5px; color:var(--tinta-2); }
.orc-export-bloqueio:empty { display:none; }
.orc-export-bloqueio { margin:8px 0 10px; }
.orc-btn-exportar:disabled { opacity:.5; cursor:not-allowed; }

/* Rodapé da planilha com os 5 valores */
.orc-planilha-rodape td { padding:0 !important; border-top:2px solid var(--borda-forte, var(--borda)); background:var(--sup-2); }
.orc-rodape-valores { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); }
.orc-rodape-cel { display:flex; flex-direction:column; gap:2px; padding:10px 12px; box-shadow:inset 1px 0 0 var(--borda); text-align:right; }
.orc-rodape-cel:first-child { box-shadow:none; }
.orc-rodape-rot { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-3); }
.orc-rodape-val { font-size:14px; font-weight:700; color:var(--tinta-1); font-family:var(--fonte-num); font-variant-numeric:tabular-nums; white-space:nowrap; }
.orc-rodape-cel.destaque .orc-rodape-val { font-size:16px; }
.orc-rodape-cel.ausente .orc-rodape-val { font-size:12px; font-weight:600; color:var(--tinta-3); white-space:normal; }
@media (max-width:900px) { .orc-rodape-valores { grid-template-columns:repeat(2, minmax(0,1fr)); } .orc-rodape-cel:nth-child(odd) { box-shadow:none; } }

/* Card Valores da Visão geral */
.orc-totais tr.orc-desatualizado td.val { color:var(--st-atencao); }
.orc-totais td.val { color:var(--tinta-1); }
.orc-input-leitura { border:0 !important; background:transparent !important; padding:0 !important; text-align:right; font-weight:600; color:var(--tinta-1) !important; cursor:default; box-shadow:none !important; }
.orc-bdi-cadeado { display:inline-flex; vertical-align:middle; margin-left:4px; color:var(--tinta-3); }
.orc-bdi-cadeado .ico { width:13px; height:13px; }

/* Resultado do desconto em tabela */
.orc-pregao-resultado { margin-top:12px; font-size:12.5px; color:var(--tinta-1); }
.orc-pregao-resultado:empty { display:none; }
.orc-pregao-tab { border-collapse:collapse; min-width:320px; margin-bottom:8px; }
.orc-pregao-tab th, .orc-pregao-tab td { padding:5px 10px; border-bottom:1px solid var(--borda); text-align:left; font-weight:500; }
.orc-pregao-tab tbody th { color:var(--tinta-2); font-weight:600; }
.orc-pregao-tab thead th { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--tinta-3); }
.orc-pregao-tab td.cm-num, .orc-pregao-tab th.cm-num { text-align:right; font-family:var(--fonte-num); font-variant-numeric:tabular-nums; white-space:nowrap; }
.orc-pregao-tab tr.destaque td { font-weight:700; font-size:14px; }
.orc-pregao-tab tr.acima-teto td { background:var(--st-atencao-tinta); }
.orc-pregao-tab--larga { width:100%; }
.orc-pregao-sub { margin:12px 0 4px; font-weight:700; font-size:12px; color:var(--tinta-1); }

/* Lista e Kanban: Total com BDI e Valor ofertado, dinheiro em --tinta-1 */
.orc-lista-valores { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:4px; }
.orc-lista-valores.compacto { flex-direction:column; gap:2px; }
.orc-lista-valor { color:var(--tinta-1); }
.orc-lista-rot { font-family:var(--fonte-dado); font-size:11px; font-weight:600; color:var(--tinta-3); margin-right:4px; }
.orc-lista-obs { font-family:var(--fonte-dado); font-size:11px; font-weight:500; color:var(--tinta-3); }
.orc-selo-origem { margin-left:6px; vertical-align:middle; }
.orc-selo-origem .ico { width:11px; height:11px; }
.kanban-card .orc-selo-origem { font-size:9.5px; padding:1px 6px; margin-left:4px; }
.kanban-card-valor { color:var(--tinta-1); }

/* Selos na linha da planilha (sem desconto, desatualizado, âncora, corrigido) */
.orc-selo-linha { font-size:9.5px; padding:1px 6px; margin-left:4px; vertical-align:middle; }

/* Curva ABC: classe por forma e tom, nunca vinho */
.orc-abc-classe { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; border-radius:6px; font-size:11px; font-family:var(--fonte-dado); }
.orc-abc-classe--a { font-weight:800; color:var(--st-info); background:var(--st-info-tinta); }
.orc-abc-classe--b { font-weight:700; color:var(--tinta-1); background:var(--sup-3, var(--sup-2)); }
.orc-abc-classe--c { font-weight:500; color:var(--tinta-3); background:transparent; box-shadow:inset 0 0 0 1px var(--borda); }

/* Mês-base: o edital pede (informação) */
.orc-idade-base.info { background:var(--st-info-tinta); color:var(--st-info); }

/* Ausência escrita (nunca R$ 0,00 no lugar de "não se aplica") */
.orcp-ausente { font-size:13px; font-weight:600; color:var(--tinta-3); letter-spacing:0; }

/* Resumo e Painel: os 5 valores do dicionário em 5 células iguais (direção
   09, 4.1 A), o valor nunca quebra em duas linhas; depois Lucro, Itens e Prazo. */
.orcp-kpis { grid-template-columns:repeat(5, minmax(0,1fr)); }
.orcp-kv { white-space:nowrap; font-size:17px; }
@media (max-width:1100px) { .orcp-kpis { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:700px) { .orcp-kpis { grid-template-columns:minmax(0,1fr); } .orcp-kv { font-size:18px; } }
.orc-topbar-origem .orc-selo-origem { margin-left:0; }

/* Celular (direção 09, 4.0, adiantado da Onda 2 para não piorar a barra):
   linha 1 com voltar, nome e ações; linha 2 com o Valor ofertado e o estado. */
@media (max-width:900px) {
    .orc-topbar { flex-wrap:wrap; gap:4px 8px; padding:8px 10px; }
    .orc-topbar-voltar-txt, .orc-topbar-salvar-txt { display:none; }
    .orc-topbar-titulo { order:1; flex:1 1 0; font-size:14px; }
    .orc-topbar-voltar { order:0; }
    .orc-topbar-acoes { order:2; gap:6px; }
    .orc-topbar-total { order:3; width:100%; margin-left:0; gap:8px; font-size:12px; }
    .orc-topbar-total-item:not(.orc-topbar-ofertado) { display:none; }
    .orc-topbar-ofertado { padding-left:0; border:none; }
}

/* Revisão da Onda 1 (Helena): selo de origem não encolhe; selo Desatualizado
   inteiro no celular; BDI do edital em leitura sem cara de campo. */
.orc-selo-origem { flex-shrink:0; }
.orc-topbar-l2 .orc-topbar-origem { flex-shrink:0; }
.orc-bdi-leitura { display:inline-flex; align-items:center; padding:5px 2px; color:var(--tinta-1); font-size:13px; background:transparent; }
.orc-bdi-leitura.cm-num { justify-content:flex-end; font-family:var(--fonte-num); font-variant-numeric:tabular-nums; }
.orc-bdi-leitura--papel { color:var(--tinta-2); }
@media (max-width:900px) {
    .orc-topbar-total { white-space:normal; }
    .orc-topbar-ofertado { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
    .orc-topbar-ofertado .cm-chip { white-space:nowrap; }
}

/* Segunda revisão da Onda 1 (Helena) */
.orc-lista-num { white-space:nowrap; }
.orc-lista-pendente { font-style:italic; font-weight:500; font-size:12px; color:var(--tinta-3); font-family:var(--fonte-dado); }
.orc-bloqueio-lista { margin:4px 0 0; padding-left:18px; }
.orc-bloqueio-lista li { margin:4px 0; }
.orc-bloqueio-lista .btn { margin-left:6px; }
.orc-topbar-titulo { min-width:220px; }
.orc-topbar-l2 { overflow:visible; }
.orc-topbar-titulo .orc-topbar-l2 { overflow:visible; }
.orc-gravacao { flex-shrink:0; white-space:nowrap; }
@media (max-width:1439px) { .orc-topbar-total > .orc-topbar-total-item:first-child { display:none; } }
@media (max-width:599px) {
    .orc-pregao-tab { min-width:0; width:100%; }
    .orc-pregao-tab:not(.orc-pregao-tab--larga) tbody tr { display:grid; grid-template-columns:1fr; }
    .orc-pregao-tab:not(.orc-pregao-tab--larga) tbody th { padding-bottom:0; border-bottom:0; }
    .orc-pregao-tab:not(.orc-pregao-tab--larga) tbody td { white-space:nowrap; text-align:left; }
    #orcPregaoEntrada .orc-field { flex:1 1 100%; min-width:0; }
    #orcModoPregao, #orcPregaoTipoEntrada { width:100% !important; max-width:100%; }
}

/* Terceira passada da Helena (Onda 1) */
.orc-grav-curto { display:none; }
@media (max-width:900px) { .orc-grav-longo { display:none; } .orc-grav-curto { display:inline; } }
.orc-input:disabled, select.orc-input:disabled { cursor:default; opacity:.55; }
.orc-bloqueio-lista li .btn { display:flex; width:max-content; margin:6px 0 2px; }
.cmp-rolagem > .orc-pregao-tab--larga { min-width:560px; }
.ov-val { color:var(--tinta-1); }
@media (max-width:599px) {
    .ov-item { flex-wrap:wrap; align-items:flex-start; gap:8px; }
    .ov-l, .ov-val, .ov-acoes { flex:1 1 100%; min-width:0; }
    .ov-val, .ov-val .ov-ref { text-align:left; white-space:normal; }
}

/* Rodada final da Onda 1 (Helena) */
.orc-sel-acervo { width:230px; max-width:100%; }
.orc-conflito-faixa { position:sticky; top:0; z-index:4; display:flex; gap:10px; align-items:flex-start; margin:-6px 0 14px; padding:12px 14px; border-radius:var(--raio-2, 10px); background:var(--st-critico-tinta); color:var(--tinta-1); box-shadow:inset 0 0 0 1px var(--st-critico); }
.orc-conflito-faixa > .ico { width:18px; height:18px; flex-shrink:0; color:var(--st-critico); margin-top:1px; }
.orc-conflito-txt { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:13px; }
.orc-conflito-txt small { flex:1 1 100%; font-size:11.5px; color:var(--tinta-2); }
@media (max-width:599px) {
    .orc-card-head { flex-wrap:wrap; }
    .orc-head-actions { flex:1 1 100%; margin-left:0; flex-wrap:wrap; }
    .orc-head-actions select, .orc-sel-acervo { flex:1 1 auto; width:auto; min-width:0; }
    .orc-conflito-txt { flex-direction:column; align-items:flex-start; }
    .orcp-head, .orcvr-hero { flex-direction:column; align-items:flex-start; }
    .orcp-head-l, .orcvr-hero-l { display:contents; }
    .orcp-head-tot, .orcvr-hero-tot { text-align:left; order:4; }
    .orcp-head .orc-modo-valor-bar, .orcvr-hero .orc-modo-valor-bar { order:5; }
    .orcp-head-tot .orcp-tl, .orcvr-hero-tot .orcvr-tl { text-align:left; }
}

/* =====================================================================
   ORÇAMENTOS, ONDA 2 (13/10/2026): roteiro e celular.
   Direção 09 da Helena, seção 5 (Onda 2) e 4.0, 4.1, 4.3, 4.7, 4.8, 4.9.
   Menu Resumo + 5 passos; Resumo junta Visão geral e Painel; no celular,
   uma seção por vez com seletor no rodapé, topo de até 56 px, planilha em
   lista, cronograma por etapa e .cm-tab-rola; lista em tabela com estados;
   Kanban legível. Só tokens: o tema escuro sai certo sem regra própria.
   ===================================================================== */
.orc-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Menu lateral: Resumo + 5 passos, número sem vinho, marca por forma */
#orcSideMenu { background:var(--sup-1); }
.orc-menu-step { background:var(--sup-3); color:var(--tinta-2); font-weight:700; }
.orc-menu-link.ativo .orc-menu-step { background:var(--tinta-1); color:var(--sup-1); }
.orc-menu-resumo { font-weight:600; margin-bottom:6px; }
.orc-menu-passo { margin-top:4px; font-weight:600; }
.orc-menu-label[data-passo] { margin:14px 4px 4px 10px; }
.orc-menu-label--hist { margin-top:16px; }
.orc-menu-label .ico { width:12px; height:12px; }
.orc-menu-sub { padding-left:36px; font-size:12.5px; }
.orc-menu-link:focus-visible { outline:2px solid var(--st-info); outline-offset:1px; }
.orc-menu-marca { margin-left:auto; width:14px; height:14px; border-radius:50%; flex-shrink:0; position:relative; }
.orc-menu-marca.falta { box-shadow:inset 0 0 0 1.5px var(--tinta-3); }
.orc-menu-marca.feito { background:var(--st-ok); }
.orc-menu-marca.feito::after { content:""; position:absolute; left:5px; top:2.5px; width:3px; height:6.5px; border:solid var(--sup-1); border-width:0 1.8px 1.8px 0; transform:rotate(45deg); }
.orc-menu-label .orc-menu-marca { margin-right:6px; }

/* ---- Rodapé Anterior / Próximo (mesma sequência do menu) */
.orc-flux-nav .btn { max-width:48%; }
.orc-flux-rot { font-weight:500; opacity:.8; }
.orc-flux-nav .ico { width:14px; height:14px; }

/* ---- Resumo (direção 09, 4.1) */
.orcr .orcp-kpi::before { display:none; }
.orcr .orcp-kpi { background:var(--sup-1); }
.orcr-cab { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; min-width:0; }
.orcr-cab-l { min-width:0; }
.orcr-tit { font-size:var(--txt-titulo); font-weight:700; margin:0; color:var(--tinta-1); }
.orcr-sub { display:block; margin-top:2px; font-size:12.5px; color:var(--tinta-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:760px; }
.orcr-cab-r { flex-shrink:0; }
.orcr-faixa { margin-top:0; }
.orcr-cel .orcp-kl { font-size:10px; }
.orcr-cel.k-total { background:var(--sup-2); border-color:var(--borda-forte); }
.orcr-cel.k-total .orcp-kv { font-size:22px; }
.orcr-cel.k-atencao .orcp-ks { color:var(--st-atencao); font-weight:600; }
.orcr-b { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:11px; margin-top:11px; }
.orcr-b .orcp-kpi { padding:9px 14px; }
.orcr-b .orcp-kv { font-size:15px; margin-top:3px; }
.orcr-antes { margin-top:16px; padding-top:12px; border-top:1px solid var(--borda); }
.orcvr-gate-h.ok { color:var(--st-ok); } .orcvr-gate-h.warn { color:var(--st-atencao); }
.orcr-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.orcr-li { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; background:var(--sup-2); font-size:12.5px; color:var(--tinta-1); line-height:1.4; }
.orcr-li-txt { min-width:0; }
.orcr-li .btn { margin-left:auto; flex-shrink:0; }
.orcr-marca { width:13px; height:13px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 0 0 1.5px var(--st-atencao); }
.orcr-li--bloq .orcr-marca { border-radius:3px; box-shadow:inset 0 0 0 1.5px var(--st-critico); }
.orcr-feitos { display:flex; gap:6px; align-items:flex-start; margin:8px 0 0; font-size:12px; color:var(--tinta-3); }
.orcr-feitos .orcp-ico { width:13px; height:13px; flex-shrink:0; margin-top:2px; color:var(--st-ok); }
.orcr-vazio { display:flex; gap:12px; align-items:center; flex-wrap:wrap; border:1px dashed var(--borda-forte); border-radius:12px; padding:18px; background:var(--sup-1); color:var(--tinta-2); font-size:13px; }
.orcr-vazio > .orcp-ico { width:20px; height:20px; color:var(--tinta-3); }
.orcr-vazio > div:first-of-type { flex:1 1 280px; }
.orcr-vazio-acoes { display:flex; gap:8px; flex-wrap:wrap; }
.orcr-d-cab { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:22px 0 10px; }
.orcr-d-tit { font-size:var(--txt-destaque); font-weight:700; margin:0; color:var(--tinta-1); }
.orcr-d-grade { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; align-items:start; }
.orcr-d-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
@media (max-width:1100px) { .orcr-d-grade { grid-template-columns:minmax(0,1fr); } }
.orcr-bloco { border:1px solid var(--borda); border-radius:12px; background:var(--sup-1); min-width:0; }
.orcr-bloco > summary { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; padding:11px 14px; cursor:pointer; list-style:none; min-height:var(--alt-toque); box-sizing:border-box; }
.orcr-bloco > summary::-webkit-details-marker { display:none; }
.orcr-bloco > summary::after { content:""; margin-left:auto; width:7px; height:7px; border:solid var(--tinta-3); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); align-self:center; }
.orcr-bloco[open] > summary::after { transform:rotate(-135deg); }
.orcr-bloco-tit { font-weight:600; font-size:12.5px; color:var(--tinta-1); }
.orcr-bloco-hint { font-size:11.5px; color:var(--tinta-3); }
.orcr-bloco-corpo { padding:0 14px 12px; overflow-x:auto; }
#orcResumoCurvaS { margin-top:14px; }
.orcr-tab { table-layout:fixed; width:100%; }
.orcr-tab th, .orcr-tab td { padding:6px 8px; }
.orcr-tab th:nth-child(2), .orcr-tab td:nth-child(2) { width:132px; }
.orcr-tab th:nth-child(3), .orcr-tab td:nth-child(3) { width:112px; }
#orcResumoCurvaS .orcp-svg { display:block; max-width:760px; max-height:260px; margin:0 auto; }
.orcr-tab td { color:var(--tinta-1); }
.orcr-tab-rot { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orcr-tab-pct { width:118px; }
.orcr-barra { display:inline-block; width:44px; height:4px; border-radius:2px; background:var(--sup-3); margin-right:8px; vertical-align:middle; overflow:hidden; }
.orcr-barra > span { display:block; height:100%; background:var(--tinta-3); }
#orcPainelConteudo .orcp-loading { padding:22px; font-weight:500; }

/* ---- Estados (lista e Resumo): carregando, erro, vazio, vazio por filtro */
.orc-estado { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border-radius:var(--raio-2, 10px); background:var(--sup-2); color:var(--tinta-1); font-size:13px; margin:0 0 14px; }
.orc-estado > .ico, .orc-estado > .orcp-ico { width:18px; height:18px; flex-shrink:0; color:var(--tinta-3); }
.orc-estado > div:first-of-type { flex:1 1 240px; min-width:0; }
.orc-estado--erro { background:var(--st-critico-tinta); box-shadow:inset 0 0 0 1px var(--st-critico); }
.orc-estado--erro > .ico, .orc-estado--erro > .orcp-ico { color:var(--st-critico); }
.orc-estado--lendo > .ico { animation:orcp-spin 1s linear infinite; }
.orc-estado-det { color:var(--tinta-2); }
.orc-estado-acoes { display:flex; gap:8px; flex-wrap:wrap; }
.orc-lista-estado:empty { display:none; }

/* ---- Lista (direção 09, 4.9): frase de cobertura, filtros, tabela */
.orc-lista-acoes-topo { display:flex; gap:8px; flex-wrap:wrap; }
.orc-lista-seg { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.orc-seg { display:inline-flex; gap:6px; margin:0; }
.orc-btn-filtros { display:none; }
.orc-resposta-cobertura { display:block; margin:0 0 12px; font-size:13px; line-height:1.6; color:var(--tinta-1); }
.orc-resposta-cobertura .btn { margin-left:8px; vertical-align:middle; }
.orc-resposta-cobertura:empty { display:none; }
.orc-resposta-cobertura .ico { width:16px; height:16px; vertical-align:-3px; margin-right:6px; }
.orc-resposta-ok { color:var(--st-ok); }
.orc-resposta-atencao { color:var(--st-atencao); }
.orc-nao-orcadas { border:1px solid var(--borda); border-radius:var(--raio-2, 10px); padding:10px 12px; background:var(--sup-1); margin:0 0 14px; }
.orc-nao-orcadas-tit { font-size:12.5px; font-weight:600; color:var(--tinta-1); margin-bottom:6px; }
.orc-lista-filtros { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:14px; }
.orc-filtro { display:flex; flex-direction:column; gap:3px; min-width:0; }
.orc-filtro > label { font-size:11px; color:var(--tinta-3); }
.orc-filtro--busca { flex:1 1 240px; }
.orc-filtro .orc-input { min-width:0; }
#orcFiltroOrgao { width:220px; max-width:100%; }
.orc-filtro--modo { flex-direction:row; align-items:center; gap:6px; margin-left:auto; }
.orc-lt-rola { overflow-x:auto; border:1px solid var(--borda); border-radius:var(--raio-2, 10px); background:var(--sup-1); }
.orc-lt { min-width:880px; }
.orc-lt thead th { white-space:nowrap; }
.orc-lt td { vertical-align:top; padding-top:9px; padding-bottom:9px; }
.orc-lt tr.orc-lista-linha { cursor:pointer; }
.orc-lt tr.orc-lista-linha--lixeira { cursor:default; }
.orc-lt tr.orc-lista-linha:focus-visible { outline:2px solid var(--st-info); outline-offset:-2px; }
.orc-lt-grupo td { background:var(--sup-2); padding:6px 10px !important; }
.orc-lt-grupo-in { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--tinta-2); }
.orc-lt-grupo-in .ico { width:14px; height:14px; color:var(--tinta-3); }
.orc-lt-grupo-n { font-weight:500; color:var(--tinta-3); font-family:var(--fonte-num); font-variant-numeric:tabular-nums; }
.orc-lt-renomear { width:28px; height:28px; min-height:0 !important; min-width:0 !important; }
.orc-lt-nome { min-width:220px; max-width:380px; }
.orc-lt-nome-txt { font-weight:600; color:var(--tinta-1); }
.orc-lt-obj, .orc-lt-orgao { display:block; font-size:11.5px; color:var(--tinta-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:360px; }
.orc-lt-selo { margin-left:6px; font-size:10px; padding:1px 7px; vertical-align:middle; }
.orc-lt-cliente { max-width:240px; color:var(--tinta-1); }
.orc-lt-ausente { color:var(--tinta-3); }
.orc-lt-origem-cel { display:none; }
.orc-lt .orc-lista-rot { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.orc-lt .num { white-space:nowrap; }
.orc-lt-ofertado .orc-lista-obs, .orc-lt-ofertado .orc-lista-pct { display:block; font-size:11px; color:var(--tinta-3); }
.orc-lt-ofertado .orc-lista-pendente { white-space:normal; display:inline-block; max-width:140px; text-align:right; }
.orc-lt-menu { width:40px; text-align:right; }
.orc-lt-acoes-lix { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.orc-lt--lixeira { min-width:640px; }
.orc-btn-perigo-txt { color:var(--st-critico); }
.orc-tab-naoorc { min-width:560px; }

/* ---- Kanban legível: colunas de 220 px, Particular à esquerda */
#orcKanbanView .kanban-coluna { flex:0 0 220px; background:var(--sup-2); }
.orc-kb .kanban-card { cursor:pointer; }
.orc-kb .kanban-card:focus-visible { outline:2px solid var(--st-info); outline-offset:1px; }
.orc-kb-titulo { font-size:13px; font-weight:600; line-height:1.3; white-space:normal; color:var(--tinta-1); }
.orc-kb-origem { margin:5px 0 3px; }
.orc-kb-origem .orc-selo-origem { margin-left:0; }
.orc-kb-meta { font-size:11.5px; color:var(--tinta-2); }
.orc-kb-vazio { padding:8px; margin:0; font-size:11.5px; color:var(--tinta-3); }

/* ---- Tabela larga: rola de lado com a primeira coluna fixa (direção 09, 4.6) */
.cm-tab-rola { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.cm-tab-rola > table > thead > tr > th:first-child,
.cm-tab-rola > table > tbody > tr > td:first-child { position:sticky; left:0; z-index:1; background:var(--sup-1); box-shadow:1px 0 0 var(--borda); }
.cm-tab-rola > table > thead > tr > th:first-child { background:var(--sup-2); z-index:2; }
.orc-crono-input { width:56px; padding:3px; border:1px solid var(--borda-forte); border-radius:4px; background:var(--sup-1); color:var(--tinta-1); }
.orc-crono-agrupa td { color:var(--tinta-2); font-weight:600; background:var(--sup-2); }
.orc-crono-agrupa-txt { font-weight:400 !important; font-size:11.5px; color:var(--tinta-3) !important; }

/* ---- Barra do topo e rodapé fixo no celular */
.orc-rodape-celular { display:none; }
@media (max-width:900px) {
    /* Só a seção ativa (antes, sem menu, as 12 seções empilhavam: C1). */
    .orc-secao { display:none; }
    .orc-secao.ativa { display:block; }
    /* Topo de até 56 px: linha 1 voltar, nome e menu; linha 2 Valor ofertado e estado. */
    .orc-topbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"voltar nome acoes" "valor valor grav"; align-items:center; gap:1px 8px; padding:5px 8px; max-height:56px; box-sizing:border-box; overflow:hidden; margin-bottom:10px; }
    .orc-topbar-voltar { grid-area:voltar; width:32px; height:30px; min-height:0 !important; min-width:0; padding:0; justify-content:center; }
    .orc-topbar-titulo, .orc-topbar-titulo .orc-topbar-l2 { display:contents; }
    #orcTopTitulo { grid-area:nome; font-size:14px; line-height:28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .orc-topbar-origem { display:none; }
    #orcTopGravacao { grid-area:grav; justify-self:end; font-size:11px; }
    .orc-topbar-total { grid-area:valor; width:auto; min-width:0; overflow:hidden; font-size:12px; white-space:nowrap; }
    .orc-topbar-ofertado { flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
    .orc-topbar-ofertado strong { font-size:14px; }
    .orc-topbar-acoes { grid-area:acoes; }
    .orc-topbar-acoes #orcBtnSalvar { display:none; }
    .orc-topbar-acoes .btn-acoes-linha { height:30px; width:32px; min-height:0 !important; min-width:0; }
    .orc-topbar-total-item, .orc-topbar-total strong { line-height:18px; }
    /* Rodapé fixo: seletor de seção (mesma sequência do menu) e Salvar. */
    .orc-rodape-celular { display:flex; align-items:center; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:30; padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background:var(--sup-1); border-top:1px solid var(--borda); box-shadow:0 -2px 10px rgba(0,0,0,.08); }
    .orc-rodape-celular-sel { flex:1 1 auto; min-width:0; margin:0; }
    #orcSecaoSeletor { width:100%; height:var(--alt-toque); font-size:14px; }
    #orcBtnSalvarRodape { height:var(--alt-toque); flex-shrink:0; }
    #orcEditorView { padding-bottom:76px; }
    #orcEditorConteudo { padding-right:0; }
    .orc-flux-nav .btn { flex:1 1 0; max-width:none; min-width:0; white-space:normal; text-align:left; justify-content:flex-start; min-height:var(--alt-toque); }
    .orc-flux-nav .orc-flux-prox { justify-content:flex-end; text-align:right; }
}

/* ---- Celular estreito (até 700 px) */
@media (max-width:700px) {
    /* Resumo: (A) vira lista de 5 linhas, rótulo à esquerda e valor à direita. */
    .orcr-cab { flex-wrap:wrap; align-items:flex-start; }
    .orcr-faixa { grid-template-columns:minmax(0,1fr) !important; gap:0; border:1px solid var(--borda); border-radius:12px; overflow:hidden; }
    .orcr-faixa .orcp-kpi { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"kl kv" "ks ks"; column-gap:10px; border:0; border-radius:0; border-top:1px solid var(--borda); padding:9px 12px; }
    .orcr-faixa .orcp-kpi:first-child { border-top:0; }
    .orcr-faixa .orcp-kl { grid-area:kl; align-self:center; }
    .orcr-faixa .orcp-kv { grid-area:kv; margin:0; font-size:15px; text-align:right; }
    .orcr-faixa .orcp-ks { grid-area:ks; }
    .orcr-faixa .orcr-cel.k-total .orcp-kv { font-size:19px; }
    .orcr-b { grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; }
    .orcr-b .orcp-kpi { padding:8px 10px; }
    .orcr-b .orcp-ks { display:none; }
    .orcr-li { flex-wrap:wrap; }
    .orcr-li .btn { margin-left:23px; }
    .orcr-tab th:nth-child(2), .orcr-tab td:nth-child(2) { width:118px; }
    .orcr-tab th:nth-child(3), .orcr-tab td:nth-child(3) { width:62px; }
    .orcr-barra { display:none; }

    /* Planilha em lista: 2 linhas por item, a descrição nunca some (C3). */
    .orc-tab-planilha, .orc-tab-planilha tbody, .orc-tab-planilha tfoot { display:block; width:100%; }
    .orc-tab-planilha thead { display:none; }
    .orc-tab-planilha tr { display:block; }
    .orc-tab-planilha tr[data-oe] { display:grid; grid-template-columns:30px auto minmax(0,1fr) auto auto; grid-template-areas:"num desc desc desc menu" "num cod cod un pu" "num qtd qtd tot tot"; column-gap:8px; row-gap:4px; align-items:center; padding:10px 6px; border-bottom:1px solid var(--borda); }
    .orc-tab-planilha tr[data-oe] > td { display:block; padding:0 !important; border:0 !important; width:auto; min-width:0; overflow:visible; text-align:left; background:transparent !important; }
    .orc-tab-planilha tr[data-oe] .cm-chip, .orc-tab-planilha tr[data-oe] .status-badge { white-space:normal; }
    .orc-tab-planilha tr[data-oe] > td:nth-child(1) { grid-area:num; align-self:start; font-size:11px; color:var(--tinta-3); }
    .orc-tab-planilha tr[data-oe] > td:nth-child(2) { grid-area:cod; font-size:11px; white-space:nowrap; color:var(--tinta-3); }
    .orc-tab-planilha tr[data-oe] > td:nth-child(2) .orc-item-fonte { display:inline; margin-left:4px; }
    .orc-tab-planilha tr[data-oe] > td:nth-child(3) { grid-area:desc; font-size:12.5px; line-height:1.35; white-space:normal; color:var(--tinta-1); }
    .orc-tab-planilha tr[data-oe] > td:nth-child(3) input { min-width:0 !important; width:100%; }
    .orc-tab-planilha tr[data-oe] > td:nth-child(4) { grid-area:un; font-size:11px; color:var(--tinta-3); }
    .orc-tab-planilha tr[data-oe] > td:nth-child(5) { grid-area:qtd; }
    .orc-tab-planilha tr[data-oe] > td:nth-child(6) { grid-area:pu; text-align:right; font-size:11px; color:var(--tinta-2); white-space:nowrap; }
    .orc-tab-planilha tr[data-oe] > td:nth-child(4) { text-align:right !important; }
    .orc-tab-planilha tr[data-oe] > td:nth-child(7) { grid-area:tot; text-align:right !important; font-weight:700; font-size:12.5px; }
    .orc-tab-planilha tr[data-oe] > td:nth-child(8) { grid-area:menu; align-self:start; justify-self:end; }
    .orc-tab-planilha tr[data-oe] .orc-qtd { width:54px; height:32px; font-size:12.5px; }
    .orc-tab-planilha tr[data-oe] > td:nth-child(7) { white-space:nowrap; }
    .orc-tab-planilha tr.orc-cat-row { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; padding:8px 6px; }
    .orc-tab-planilha tr.orc-cat-row > td { display:block; padding:0 !important; border:0 !important; }
    .orc-tab-planilha tr.orc-cat-row > td:first-child { flex:1 1 0; min-width:0; overflow:hidden; }
    .orc-tab-planilha tr.orc-cat-row > td:nth-child(2) { flex:0 0 auto; font-size:12.5px; }
    .orc-tab-planilha tr.orc-cat-row > td:nth-child(3) { flex:0 0 auto; }
    .orc-tab-planilha .orc-cat-inner { min-width:0; }
    .orc-tab-planilha tr[data-oe] > td:nth-child(2), .orc-tab-planilha tr[data-oe] > td:nth-child(5) { text-align:left !important; }
    /* No celular o editor confere e ajusta, não monta (decisão 3 do Diretor,
       12/10/2026): sem BDI diferenciado, "Inserir" e linha de adicionar serviço. */
    .orc-tab-planilha .orc-cat-l1 { font-size:0; flex-wrap:nowrap; }
    .orc-tab-planilha .orc-cat-l1 > * { font-size:12.5px; }
    .orc-tab-planilha .orc-cat-l1 > .orc-hint, .orc-tab-planilha .orc-cat-l1 > input.cm-dir, .orc-tab-planilha .orc-cat-l1 > .orc-cat-insbtn { display:none; }
    .orc-tab-planilha tr.orc-addrow-row { display:none !important; }
    .orc-tab-planilha .orc-cat-nome { min-width:0 !important; flex:1 1 auto; width:100%; }
    .orc-tab-planilha tr.orc-addrow-row, .orc-tab-planilha tr.orc-sep-row, .orc-tab-planilha tr.orc-busca-inline-row { display:flex; align-items:center; }
    .orc-tab-planilha tr.orc-addrow-row > td, .orc-tab-planilha tr.orc-sep-row > td { display:block; }
    .orc-tab-planilha tr.orc-addrow-row > td:last-child, .orc-tab-planilha tr.orc-sep-row > td:nth-child(2) { flex:1 1 auto; min-width:0; }
    .orc-tab-planilha tr.orc-busca-inline-row > td { display:block; flex:1 1 auto; min-width:0; }
    .orc-tab-planilha tr.empty-row td { display:block; }
    .orc-tab-planilha tfoot tr, .orc-tab-planilha tfoot td { display:block; width:100%; }
    /* Faixa de totais (inclusive a da planilha do órgão): uma linha por valor. */
    .orc-rodape-valores { grid-template-columns:minmax(0,1fr) !important; }
    .orc-rodape-cel { flex-direction:row; justify-content:space-between; align-items:baseline; gap:10px; text-align:left; box-shadow:none !important; border-top:1px solid var(--borda); padding:8px 10px; }
    .orc-rodape-cel:first-child { border-top:0; }
    .orc-rodape-cel .orc-rodape-val { text-align:right; }
    .orc-rodape-cel.ausente .orc-rodape-val { white-space:normal; }

    /* Cronograma: uma etapa por bloco (direção 09, 4.7). */
    .orc-crono-rola { overflow:visible; }
    .orc-tab-crono { min-width:0 !important; width:100%; display:block; }
    .orc-tab-crono thead { display:none; }
    .orc-tab-crono tbody { display:block; }
    .orc-tab-crono tr { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 12px; padding:12px; margin-bottom:10px; border:1px solid var(--borda); border-radius:10px; background:var(--sup-1) !important; }
    .orc-tab-crono td { display:block; padding:0 !important; border:0 !important; text-align:left !important; position:static !important; box-shadow:none !important; background:transparent !important; }
    .orc-tab-crono td.orc-crono-etapa, .orc-tab-crono tr.orc-crono-agrupa td { grid-column:1 / -1; font-weight:700; color:var(--tinta-1); }
    .orc-tab-crono td[data-rot]::before { content:attr(data-rot); display:block; font-size:10.5px; font-weight:600; color:var(--tinta-3); margin-bottom:2px; }
    .orc-tab-crono td.orc-crono-vazia { display:none; }
    .orc-tab-crono .orc-crono-input { width:72px; height:34px; }

    /* Tabelas largas: rolam de lado dentro do cartão, primeira coluna fixa. */
    .cm-tab-rola > table { min-width:640px; }
    .cm-tab-rola > table.orc-tab-crono { min-width:0; }
    .cm-tab-rola > table.orc-tab-custopreco, .cm-tab-rola > table.orc-tab-abc { min-width:880px; }
    .orc-tab-custopreco td:nth-child(3), .orc-tab-abc td:nth-child(4) { min-width:220px; }

    /* Encargos e BDI a 390: campos encolhem, nada sai da tela (C5). */
    #encargosGruposWrap .orc-input, #bdiGruposWrap .orc-input { min-width:0 !important; }
    #encargosGruposWrap .bdi-grupo-head > .orc-input { flex:1 1 100%; }
    #encargosGruposWrap .bdi-item { display:grid; grid-template-columns:minmax(0,1fr) 68px auto auto; gap:6px; padding-left:12px; }
    #encargosGruposWrap .bdi-item .orc-input.cm-dir { width:68px !important; }
    .orc-card-head .orc-head-actions .btn { white-space:normal; }

    /* Lista: 2 linhas por orçamento; filtros numa folha; Novo orçamento fixo. */
    .orc-btn-novo { position:fixed; right:16px; bottom:16px; z-index:25; height:var(--alt-toque); padding:0 18px; border-radius:22px; box-shadow:0 4px 14px rgba(0,0,0,.18); }
    #orcListaView { padding-bottom:72px; }
    .orc-btn-filtros { display:inline-flex; min-height:36px; }
    .orc-lista-filtros { display:none; }
    .orc-lista-filtros.aberto { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px; border:1px solid var(--borda); border-radius:var(--raio-2, 10px); background:var(--sup-1); }
    .orc-lista-filtros.aberto .orc-filtro--busca, .orc-lista-filtros.aberto .orc-filtro--modo { grid-column:1 / -1; }
    .orc-lista-filtros.aberto .orc-filtro:has(#orcFiltroOrgao) { grid-column:1 / -1; }
    #orcFiltroOrgao { width:100%; }
    .orc-filtro--modo { margin-left:0; justify-content:space-between; }
    .orc-lt-rola { overflow:visible; border:0; background:transparent; }
    .orc-lt, .orc-lt tbody { display:block; min-width:0 !important; width:100%; }
    .orc-lt thead { display:none; }
    .orc-lt tr.orc-lt-grupo, .orc-lt tr.orc-lt-grupo td { display:block; }
    .orc-lt tr.orc-lt-grupo td { border-radius:8px; margin-top:10px; }
    .orc-lt tr.orc-lista-linha { display:grid; grid-template-columns:minmax(0,1fr) auto 36px; grid-template-areas:"nome nome menu" "cliente of of"; gap:4px 8px; align-items:center; padding:10px 6px; border-bottom:1px solid var(--borda); }
    .orc-lt tr.orc-lista-linha > td { display:block; padding:0 !important; border:0 !important; min-width:0; max-width:none; }
    .orc-lt .orc-lt-nome { grid-area:nome; }
    .orc-lt .orc-lt-origem-cel { display:inline-block; margin-left:6px; vertical-align:middle; }
    .orc-lt .orc-lt-origem-cel .orc-selo-origem { margin-left:0; font-size:10.5px; padding:1px 7px; }
    .orc-lt .orc-lt-origem { display:none !important; }
    .orc-lt .orc-lt-menu { grid-area:menu; width:auto; justify-self:end; align-self:start; }
    .orc-lt .orc-lt-cliente { grid-area:cliente; font-size:12px; color:var(--tinta-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .orc-lt .orc-lt-ofertado { grid-area:of; text-align:right; font-size:12.5px; }
    .orc-lt .orc-lt-ofertado .orc-lista-semdesc { display:none !important; }
    .orc-lt .orc-lt-sessao, .orc-lt .orc-lt-total, .orc-lt .orc-lt-atual, .orc-lt .orc-lt-obj, .orc-lt .orc-lt-orgao { display:none !important; }
    .orc-lt .orc-lt-ofertado .orc-lista-rot { position:static; width:auto; height:auto; clip:auto; overflow:visible; font-size:10.5px; }
    .orc-lt .orc-lt-ofertado .orc-lista-obs, .orc-lt .orc-lt-ofertado .orc-lista-pct { display:inline; }
    .orc-lt--lixeira tr.orc-lista-linha { grid-template-areas:"nome nome nome" "cliente atual atual" "acoes acoes acoes"; }
    .orc-lt--lixeira .orc-lt-atual { display:block !important; grid-area:atual; text-align:right; font-size:12px; color:var(--tinta-3); }
    .orc-lt--lixeira .orc-lt-acoes-lix { display:flex !important; grid-area:acoes; justify-content:flex-start; }
}

@media (max-width:480px) { .orc-topbar-pct { display:none; } }
.orcr-antes-host .orcr-antes { margin:0 0 14px; padding:0 0 12px; border-top:0; border-bottom:1px solid var(--borda); }
#orcSecIdentidade { padding:12px 14px; }
#orcSecIdentidade > .orc-details { margin:0; }
/* ==========================================================================
   ONDA 1 DOS COMPONENTES (13/10/2026): cmDialogo, cmModal e cmEstado.
   O JS mora em js/shared.js (bloco CM-ONDA1-COMPONENTES). Só tokens: nada de
   cor nova, gradiente ou sombra de efeito. Entrada 140 ms (fade + 8 px).
   ========================================================================== */
.cm-camada {
    position: fixed; inset: 0; background: var(--escrim);
    display: flex; align-items: center; justify-content: center; padding: var(--esp-4);
    animation: cm-escrim-in var(--dur-rapida) ease-out;
}
.cm-modal-overlay { z-index: var(--z-janela); }
.cm-dialogo-overlay { z-index: var(--z-dialogo); }

/* ---- Diálogo ---- */
.cm-dialogo {
    box-sizing: border-box; width: min(var(--larg-janela-p), 100%); max-height: min(88dvh, 900px); overflow-y: auto;
    background: var(--sup-1); color: var(--tinta-1);
    border: 1px solid var(--borda); border-radius: var(--raio-3); box-shadow: var(--sombra-2);
    padding: var(--esp-6) var(--esp-6) var(--esp-4);
    animation: cm-janela-in var(--dur-rapida) ease-out; outline: none;
}
.cm-dialogo-form { margin: 0; }
.cm-dialogo-tit {
    margin: 0; font-size: 15px; font-weight: var(--peso-enfase); line-height: 1.35; color: var(--tinta-1);
    letter-spacing: 0; text-transform: none;
}
.cm-dialogo-txt { margin-top: var(--esp-2); font-size: 13px; line-height: 1.55; color: var(--tinta-2); overflow-wrap: anywhere; }
.cm-dialogo-txt p { margin: 0 0 var(--esp-2); }
.cm-dialogo-txt p:last-child { margin-bottom: 0; }
.cm-dialogo-lista {
    margin: var(--esp-3) 0 0; padding: 0 0 0 18px;
    font-size: 13px; line-height: 1.55; color: var(--tinta-1);
}
.cm-dialogo-lista li + li { margin-top: 2px; }
.cm-dialogo-lista li::marker { color: var(--tinta-3); }
.cm-dialogo-campo { margin-top: var(--esp-4); display: flex; flex-direction: column; gap: 6px; }
.cm-dialogo-campo label { font-size: var(--txt-densa); font-weight: var(--peso-enfase); color: var(--tinta-2); }
.cm-dialogo-campo .cm-campo { box-sizing: border-box; width: 100%; min-height: var(--alt-confortavel); font-size: 13px; }
.cm-dialogo-campo textarea.cm-campo { min-height: 88px; resize: vertical; line-height: 1.45; }
.cm-dialogo-ajuda { margin: 0; font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.45; }
.cm-dialogo-erro { margin: var(--esp-2) 0 0; font-size: 12px; font-weight: var(--peso-enfase); color: var(--st-critico); line-height: 1.4; }
.cm-dialogo-campo .cm-dialogo-erro { margin-top: 0; }
.cm-campo[aria-invalid="true"], .cm-campo[aria-invalid="true"]:hover,
.cm-dialogo .cm-campo[aria-invalid="true"] { border-color: var(--st-critico); }
.cm-campo[aria-invalid="true"]:focus, .cm-dialogo .cm-campo[aria-invalid="true"]:focus { border-color: var(--st-critico); box-shadow: 0 0 0 3px var(--st-critico-tinta); }
.cm-dialogo-opcoes { margin-top: var(--esp-4); display: flex; flex-direction: column; gap: 6px; }
.cm-dialogo-opcao {
    display: flex; gap: var(--esp-3); align-items: flex-start; cursor: pointer;
    padding: 10px var(--esp-3); border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--sup-1);
    transition: border-color var(--dur-rapida) ease, background-color var(--dur-rapida) ease;
}
.cm-dialogo-opcao:hover { border-color: var(--borda-forte); background: var(--sup-2); }
.cm-dialogo-opcao input[type="radio"] { margin: 2px 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--acao); }
.cm-dialogo-opcao input[type="radio"]:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.cm-dialogo-opcao:has(input:checked) { border-color: var(--acao); background: var(--acao-suave); }
.cm-dialogo-opcao-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-dialogo-opcao-rot { font-size: 13px; color: var(--tinta-1); font-weight: var(--peso-medio); }
.cm-dialogo-opcao-desc { font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.4; }
.cm-dialogo-copia { box-sizing: border-box; display: block; width: 100%; margin-top: var(--esp-3); min-height: 56px; resize: none; line-height: 1.45; background: var(--sup-2); }
.cm-dialogo-detalhe { margin-top: var(--esp-3); font-size: 12px; color: var(--tinta-2); }
.cm-dialogo-detalhe summary { cursor: pointer; color: var(--tinta-3); font-weight: var(--peso-medio); width: max-content; border-radius: var(--raio-1); }
.cm-dialogo-detalhe summary:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }
.cm-dialogo-detalhe pre {
    margin: var(--esp-2) 0; padding: var(--esp-2) var(--esp-3); max-height: 160px; overflow: auto;
    font: inherit; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere;
    background: var(--sup-2); border-radius: var(--raio-1); color: var(--tinta-2);
}
.cm-dialogo-acoes { display: flex; justify-content: flex-end; align-items: center; gap: var(--esp-2); flex-wrap: wrap; margin-top: var(--esp-6); }

/* ---- Janela (cmModal) ---- */
.cm-modal {
    box-sizing: border-box; display: flex; flex-direction: column;
    width: min(var(--larg-janela-m), 100%); max-height: min(88dvh, 900px);
    background: var(--sup-1); color: var(--tinta-1);
    border: 1px solid var(--borda); border-radius: var(--raio-3); box-shadow: var(--sombra-2);
    overflow: hidden; outline: none; animation: cm-janela-in var(--dur-rapida) ease-out;
}
.cm-modal--p { width: min(var(--larg-janela-p), 100%); }
.cm-modal--g { width: min(var(--larg-janela-g), 100%); }
.cm-modal--cheio { width: 100%; height: 100%; max-height: none; }
.cm-modal-cab {
    flex-shrink: 0; display: flex; align-items: flex-start; gap: var(--esp-3);
    padding: var(--esp-4) var(--esp-3) var(--esp-3) var(--esp-6); border-bottom: 1px solid var(--linha-sutil);
}
.cm-modal-tit-bloco { flex: 1 1 auto; min-width: 0; padding-top: 4px; }
.cm-modal-tit { margin: 0; font-size: 15px; font-weight: var(--peso-enfase); line-height: 1.35; color: var(--tinta-1); letter-spacing: 0; text-transform: none; }
.cm-modal-sub { margin: 2px 0 0; font-size: 12px; color: var(--tinta-3); line-height: 1.45; }
.cm-modal-x { flex: none; color: var(--tinta-3); }
.cm-modal-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--esp-4) var(--esp-6); font-size: 13px; line-height: 1.55; color: var(--tinta-1); }
.cm-modal-corpo > p { margin: 0 0 var(--esp-2); }
.cm-modal-rodape {
    flex-shrink: 0; display: flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-4) var(--esp-3) var(--esp-6);
    border-top: 1px solid var(--linha-sutil); background: var(--sup-1);
}
.cm-modal-acoes-esq, .cm-modal-acoes { display: flex; align-items: center; gap: var(--esp-2); flex: none; }
.cm-modal-acoes-esq:empty { display: none; }
.cm-modal-msg { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--tinta-3); line-height: 1.4; }
.cm-modal-msg--erro { color: var(--st-critico); font-weight: var(--peso-enfase); }

/* ---- Estado (cmEstado): reaproveita .cm-vazio, alinhado à esquerda ---- */
.cm-estado--erro h4 { color: var(--st-critico); }
.cm-estado--nao-se-aplica h4, .cm-estado--sem-dado h4 { color: var(--tinta-2); font-weight: var(--peso-medio); }
.cm-estado--carregando { max-width: none; }
.cm-estado-acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.cm-estado .cm-dialogo-detalhe { margin: 0 0 var(--esp-3); }
.cm-esqueleto { display: flex; flex-direction: column; gap: 10px; margin-top: var(--esp-2); max-width: 720px; }
.cm-esqueleto i, .cm-esqueleto-linha {
    display: block; height: 12px; border-radius: var(--raio-1);
    background: linear-gradient(90deg, var(--sup-3) 0%, var(--borda) 50%, var(--sup-3) 100%);
    background-size: 200% 100%; animation: cm-esqueleto 1.4s ease-in-out infinite;
}
.cm-esqueleto-linha:nth-child(3n+2) { width: 84%; }
.cm-esqueleto-linha:nth-child(3n) { width: 62%; }
.cm-esqueleto--tabela { gap: 0; border: 1px solid var(--linha-sutil); border-radius: var(--raio-2); overflow: hidden; }
.cm-esqueleto-tr { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--esp-4); padding: 12px var(--esp-3); }
.cm-esqueleto-tr + .cm-esqueleto-tr { border-top: 1px solid var(--linha-sutil); }
.cm-esqueleto--cartoes { flex-direction: row; flex-wrap: wrap; }
.cm-esqueleto-cartao { flex: 1 1 180px; display: flex; flex-direction: column; gap: 10px; padding: var(--esp-4); border: 1px solid var(--linha-sutil); border-radius: var(--raio-2); }
.cm-esqueleto-cartao i:first-child { width: 50%; }
.cm-esqueleto-cartao i:last-child { height: 22px; width: 76%; }
@keyframes cm-esqueleto { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cm-ausencia { font-style: normal; }
.cm-ausencia--naoLancado {
    color: var(--tinta-2); text-decoration: underline dashed; text-decoration-color: var(--tinta-3);
    text-decoration-thickness: 1px; text-underline-offset: 3px;
}
button.cm-ausencia { font: inherit; line-height: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button.cm-ausencia--naoLancado:hover { color: var(--acao); text-decoration-color: var(--acao); }
button.cm-ausencia:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; border-radius: 2px; }
.cm-ausencia--naoSeAplica { color: var(--tinta-3); font-style: italic; }
.cm-ausencia--falhouAoLer { color: var(--st-critico); font-weight: var(--peso-enfase); display: inline-flex; align-items: center; gap: 4px; vertical-align: bottom; }
.cm-ausencia--falhouAoLer .ico { width: 14px; height: 14px; flex: none; }
/* Falha no diálogo ("Não gravou."): ícone, peso 600 e cor crítica no título */
.cm-dialogo-tit--falha { display: flex; align-items: center; gap: 8px; color: var(--st-critico); font-weight: var(--peso-enfase); }
.cm-dialogo-tit--falha .ico { width: 18px; height: 18px; flex: none; }
/* Excluir no fim do corpo da janela (celular) */
.cm-modal-perigo { margin-top: var(--esp-6); padding-top: var(--esp-4); border-top: 1px solid var(--linha-sutil); display: flex; }
.cm-modal-perigo > button { flex: 1 1 auto; justify-content: center; }

/* ---- Celular: diálogo vira folha inferior (regras-base da Onda 0 em
        .cm-dialogo e .cm-dialogo-acoes); janela vira tela cheia com
        cabeçalho e rodapé fixos e [Cancelar][Primário] em duas colunas. ---- */
@media (max-width: 640px) {
    .cm-dialogo-overlay { align-items: flex-end; justify-content: stretch; padding: 0; }
    .cm-dialogo { padding: var(--esp-6) var(--esp-4) calc(var(--esp-4) + env(safe-area-inset-bottom)); animation-name: cm-folha-in; }
    .cm-dialogo-tit { font-size: 16px; }
    .cm-dialogo-txt, .cm-dialogo-lista, .cm-dialogo-opcao-rot { font-size: 14px; }
    .cm-dialogo-campo .cm-campo, .cm-dialogo-copia { min-height: var(--alt-toque); font-size: 16px; }
    .cm-dialogo-campo textarea.cm-campo { min-height: 104px; }
    .cm-dialogo-opcao { min-height: var(--alt-toque); align-items: center; box-sizing: border-box; }
    .cm-dialogo-acoes { margin-top: var(--esp-4); }

    .cm-modal-overlay { padding: 0; align-items: stretch; }
    .cm-modal, .cm-modal--p, .cm-modal--g, .cm-modal--cheio {
        width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0;
    }
    .cm-modal-cab { padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4); align-items: center; }
    .cm-modal-tit-bloco { padding-top: 0; }
    .cm-modal-tit { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cm-modal-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cm-modal-x { min-width: var(--alt-toque); min-height: var(--alt-toque); }
    .cm-modal-corpo { padding: var(--esp-4); font-size: 14px; }
    .cm-modal-rodape { flex-wrap: wrap; padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom)); }
    .cm-modal-msg { order: -1; flex: 1 1 100%; }
    .cm-modal-msg:empty { display: none; }
    .cm-modal-acoes-esq { flex: 1 1 100%; }
    .cm-modal-acoes-esq > button { flex: 1 1 0; justify-content: center; }
    .cm-modal-acoes { flex: 1 1 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .cm-modal-acoes > button { width: 100%; justify-content: center; }

    body:has(.cm-camada) .toast-container { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@keyframes cm-folha-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .cm-camada, .cm-dialogo, .cm-modal, .cm-esqueleto i, .cm-esqueleto-linha { animation: none; }
}

/* ---- Revisão da Onda 2 de Orçamentos (Helena, 13/10/2026) ---- */
.orc-ausente-txt, .orc-sem-itens { color:var(--tinta-3); font-weight:500; font-style:normal; }
.orc-cat-nome-txt, .orc-cat-bdi-selo, .orc-avulso-desc-txt { display:none; }
.orc-cat-sub-rot { display:block; font-size:10px; font-weight:600; color:var(--tinta-3); letter-spacing:.02em; line-height:1.2; }
.orc-top-lock { display:none; width:13px; height:13px; margin-right:4px; vertical-align:-2px; color:var(--tinta-3); }
/* Planilha do órgão: o topo mostra o Valor estimado do edital com cadeado. */
.orc-topbar--orgao .orc-topbar-ofertado { display:none !important; }
.orc-topbar--orgao .orc-top-lock { display:inline-block; }
.orc-topbar--orgao #orcTopTotalItem strong { font-size:15px; }
.orc-topbar-ofertado .cm-chip { flex-shrink:0; }
#orcSecIdentidade { margin-top:0; }
@media (max-width:900px) {
    .orc-topbar-acoes { justify-self:end; }
    .orc-topbar--orgao #orcTopTotalItem { display:inline-flex !important; align-items:center; gap:4px; padding-left:0; border:0; grid-area:valor; white-space:nowrap; overflow:hidden; }
    #orcTopGravacao { min-width:0; max-width:34vw; overflow:hidden; text-overflow:ellipsis; }
    /* O seletor de abas do módulo sai de dentro do editor. */
    #modulo-orcamentos.orc-editando .tabs-select-mobile { display:none !important; }
    /* Conformidade: o resultado antes dos parâmetros. */
    #orcSecaoConformidade.ativa { display:flex; flex-direction:column; }
    #orcSecaoConformidade #orcConformidadeConteudo { order:-1; margin-bottom:12px; }
    #orcConfValorOrigem .btn { display:flex; width:max-content; margin-top:6px; }
}
@media (max-width:480px) {
    /* Com desconto desatualizado o selo fica; o rótulo sai para caber. */
    .orc-topbar--desat .orc-top-of-rot { display:none; }
    .orc-topbar--desat .orc-topbar-ofertado .cm-chip { font-size:10px; padding:1px 6px; }
}
@media (max-width:700px) {
    /* Categoria: linha própria, nome que quebra, total embaixo à direita. */
    .orc-tab-planilha tr.orc-cat-row { display:grid !important; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"nome menu" "tot tot"; gap:4px 8px; align-items:start; }
    .orc-tab-planilha tr.orc-cat-row > td:first-child { grid-area:nome; overflow:visible; }
    .orc-tab-planilha tr.orc-cat-row > td:nth-child(2) { grid-area:tot; justify-self:end; text-align:right !important; }
    .orc-tab-planilha tr.orc-cat-row > td:nth-child(3) { grid-area:menu; }
    .orc-tab-planilha .orc-cat-l1 { flex-wrap:wrap; align-items:center; gap:6px; }
    .orc-tab-planilha .orc-cat-l1 > .orc-cat-nome { display:none; }
    .orc-tab-planilha .orc-cat-l1 > .orc-cat-nome-txt { display:block; flex:1 1 150px; min-width:0; font-weight:700; font-size:13px; line-height:1.35; color:var(--tinta-1); white-space:normal; overflow-wrap:anywhere; }
    .orc-tab-planilha .orc-cat-l1 > .orc-cat-bdi-selo { display:inline-flex; font-size:10.5px; }
    .orc-tab-planilha .orc-cat-subtotal { white-space:nowrap; }
    /* Descrição do item da planilha do órgão em texto, sem cortar dentro do campo. */
    .orc-tab-planilha tr[data-oe] .orc-avulso-desc { display:none; }
    .orc-tab-planilha tr[data-oe] .orc-avulso-desc-txt { display:inline; white-space:normal; }
    .orc-tab-planilha tr[data-oe] > td:nth-child(2) .orc-ausente-txt { margin-right:4px; }
    /* Lista: selo sem cobrir o cliente, valor alinhado com o aviso, lápis dentro da faixa. */
    .orc-lt tr.orc-lista-linha { row-gap:6px; align-items:start; }
    .orc-lt .orc-lt-nome { line-height:1.5; }
    .orc-lt .orc-lt-origem-cel { display:inline-flex; vertical-align:baseline; margin:2px 0 0 6px; }
    .orc-lt .orc-lt-cliente { align-self:baseline; }
    .orc-lt .orc-lt-ofertado { align-self:baseline; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:baseline; gap:2px 6px; }
    .orc-lt .orc-lt-ofertado .orc-lista-pendente { max-width:none; text-align:right; }
    .orc-lt tr.orc-lt-grupo td { height:auto; padding:6px 10px !important; }
    .orc-lt-grupo-in { min-height:30px; }
    #orcListaView { padding-bottom:72px !important; }
    .orc-resposta-cobertura .btn { display:flex; width:max-content; margin:6px 0 0; }
    /* Antes de entregar: ícone à esquerda, botão abaixo do texto e alinhado com ele. */
    .orcr-li { display:grid; grid-template-columns:13px minmax(0,1fr); column-gap:10px; row-gap:6px; align-items:start; }
    .orcr-li .orcr-marca { margin-top:3px; }
    .orcr-li .btn { grid-column:2; justify-self:start; margin-left:0; }
}
.orc-top-rot-curto { display:none; }
@media (max-width:700px) {
    .orc-tab-planilha tr.orc-cat-row > td { background:transparent !important; box-shadow:none !important; }
}
@media (max-width:480px) {
    #orcTopGravacao { max-width:24vw; }
    .orc-topbar--orgao #orcTopTotalRotulo { display:none; }
    .orc-topbar--orgao .orc-top-rot-curto { display:inline; }
}
@media (max-width:700px) {
    .orc-lt .orc-lt-origem-cel { display:block; width:max-content; max-width:100%; margin:4px 0 0; }
    .orc-lt tr.orc-lista-linha > td.orc-lt-ofertado { max-width:62vw; }
    .orc-lt .orc-lt-ofertado .orc-lista-pendente { white-space:normal; }
}
.orc-lt tbody td, .orc-tab-naoorc tbody td { height:auto; }
@media (max-width:700px) {
    .orc-lt tr.orc-lista-linha > td.orc-lt-ofertado { min-width:0; overflow:hidden; white-space:normal; }
    .orc-lt tr.orc-lista-linha > td.orc-lt-ofertado .orc-lista-pendente { display:block; flex:1 1 100%; width:100%; white-space:normal !important; text-align:right; }
}
/* Segunda revisão da Onda 2 (Helena) */
#orcThPrecoUnit, #orcThTotal { white-space:normal; line-height:1.2; }
@media (max-width:480px) {
    .orc-topbar--orgao #orcTopGravacao .orc-grav-palavra, .orc-topbar--orgao #orcTopGravacao .orc-grav-hora { display:none; }
    .orc-topbar--orgao #orcTopGravacao { margin-left:10px; }
}
@media (max-width:700px) {
    #encargosGruposWrap .bdi-grupo-head > .btn-danger { margin-left:auto; }
}
.orc-faixa .orc-faixa-acao { display:flex; width:max-content; max-width:100%; margin:6px 0 0; } /* botão embaixo do texto da faixa (Helena) */
/* Terceira revisão da Onda 2 (Helena): barra da planilha sem quebrar nomes; campo de BDI da categoria inteiro */
#orcSecPlanilha > .orc-card-head { flex-wrap:wrap; row-gap:8px; white-space:nowrap; }
#orcSecPlanilha > .orc-card-head .orc-head-actions { flex-wrap:wrap; justify-content:flex-end; row-gap:6px; }
#orcSecPlanilha > .orc-card-head .orc-head-actions .btn { white-space:nowrap !important; }
.orc-tab-planilha .orc-cat-l1 > input.cm-dir { width:74px !important; }

/* =====================================================================
   ORÇAMENTOS, ONDA 3 (13/10/2026): acabamento. Direção 09 da Helena,
   seção 5. Sem degradê fora do botão de IA, sem barrinha em cartão, sem
   vinho em número, ícone do sprite no lugar de emoji e glifo.
   ===================================================================== */
/* Assistente do edital: o ".orc-card-head .ico" pintava as faíscas de vinho
   em cima do degradê e o ícone sumia no tema claro. */
.orc-card-head .cm-btn--ia .ico, .orc-card-head .btn-ia .ico { color: currentColor; }
.cm-btn--ia .orc-ia-seta { width: 12px; height: 12px; margin-left: 2px; }
/* Selo "IA" e "Gerado por IA" fora do botão (fundo neutro) */
.orc-ins-menu-tit { display: flex; align-items: center; gap: 6px; }
.orc-ins-menu-tit .badge-ia, .orcsug-head .badge-ia { background: var(--st-info-tinta); color: var(--st-info); margin-left: 0; }
.orcsug-ia { gap: 4px; margin-left: 6px; vertical-align: 2px; font-size: 10.5px; }
.orcsug-ia .ico { width: 12px; height: 12px; }

/* Kanban de Orçamentos: sem a barrinha colorida no topo da coluna */
.orc-kb .kanban-coluna-head { border-top: 1px solid var(--borda); }

/* Seletor de tema na barra recolhida (64 px): só o tema em uso, como ícone.
   Os três cortavam ("Claro" e meio "Escuro"); ao abrir a barra voltam os três. */
@media (min-width: 769px) {
    .sidebar:not(:hover):not(.pinned) .tema-troca { justify-content: center; }
    .sidebar:not(:hover):not(.pinned) .tema-troca button:not(.ativo) { display: none; }
    .sidebar:not(:hover):not(.pinned) .tema-troca button span { display: none; }
    .sidebar:not(:hover):not(.pinned) .tema-troca button { padding: 8px 2px; }
}

/* Textos de estado com cor e palavra (substituem cor escrita direto no JS) */
.orc-txt-ok { color: var(--st-ok); }
.orc-txt-atencao { color: var(--st-atencao); }
.orc-txt-critico { color: var(--st-critico); }
.orc-txt-info { color: var(--st-info); }
.orc-txt-ok .ico, .orc-txt-atencao .ico { width: 14px; height: 14px; vertical-align: -2px; }
.orc-hint-ico { display: flex; align-items: flex-start; gap: 6px; }
.orc-hint-ico .ico { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.orc-gira-180 { transform: rotate(180deg); }
.orc-tabelas-expandir .ico { width: 13px; height: 13px; vertical-align: -2px; }
.orc-seta { width: 12px; height: 12px; vertical-align: -2px; color: var(--tinta-3); }
.orc-ico-sutil { width: 12px; height: 12px; color: var(--tinta-3); vertical-align: -2px; }
.orcbi-add { display: inline-flex; align-items: center; gap: 3px; color: var(--acao); font-weight: 600; }
.orcbi-add .ico { width: 12px; height: 12px; }
.orc-cat-insbtn .ico:last-child { width: 12px; height: 12px; }
.orccmp-tot .dlt .ico { width: 14px; height: 14px; vertical-align: -2px; }

/* Linha clicável de escolha (Puxar itens, Importar de licitação) */
.orc-escolha-linha { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 6px; cursor: pointer; background: var(--sup-1); }
.orc-escolha-linha:hover { background: var(--sup-3); }

/* Vínculo com a licitação: chip de informação, não de marca */
.orc-vinculo-chip { gap: 8px; padding: 5px 6px 5px 12px; font-size: 13px; }
.orc-vinculo-chip .ico { width: 14px; height: 14px; }
.orc-vinculo-trocar { display: inline-flex; align-items: center; border: 0; background: none; color: inherit; padding: 2px 6px; border-radius: var(--raio-1); cursor: pointer; }
.orc-vinculo-trocar:hover { background: var(--sup-1); }

/* Composição: grupos com cabeçalho neutro, sem tinta por grupo nem barra */
.orc-comp-grupo-h { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 0; padding: 6px 10px; border-radius: 7px 7px 0 0; background: var(--sup-2); color: var(--tinta-1); font-weight: 700; font-size: 11.5px; }
.orc-comp-grupo-v { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orc-comp-tbl { margin-top: 0; font-size: 11.5px; }

/* Memória de cálculo: botão de tirar termo e ícones das linhas geradas */
.orcmem-chip-x { display: inline-flex; align-items: center; border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--tinta-3); }
.orcmem-chip-x .ico { width: 11px; height: 11px; }
.orcmem-ger-ico, .orcm2-qtd-ico { width: 12px; height: 12px; vertical-align: -2px; color: var(--tinta-3); }
.orcm2-qtd-ico { color: var(--st-atencao); }

/* Janelas do módulo na anatomia da Onda 0: largura por classe (nada de
   max-width em style=), X padrão, rodapé com perigo à esquerda e o
   primário por último. No celular a regra geral já põe em tela cheia. */
.modal-content.orc-janela--p { max-width: var(--larg-janela-p); width: 92%; }
.modal-content.orc-janela--m { max-width: var(--larg-janela-m); width: 92%; }
.modal-content.orc-janela--g { max-width: var(--larg-janela-g); width: 94%; }
.modal-content.orc-janela--x { max-width: 1180px; width: 96%; }
.orc-janela-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.orc-janela-tit { font-size: 15px; font-weight: var(--peso-enfase); color: var(--tinta-1); margin: 0 0 2px; }
.orc-janela-sub { font-size: 12px; color: var(--tinta-3); margin: 0; }
.orc-janela-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; }
.orc-janela-rodape .orc-janela-perigo { margin-right: auto; }
.painel-corpo + .orc-janela-rodape { margin-top: 0; padding: 12px 28px 16px; background: var(--sup-1); border-radius: 0 0 var(--raio-3) var(--raio-3); }
.orcsug-modal--p { width: min(var(--larg-janela-p), 100%); }
.orcsug-modal--m { width: min(var(--larg-janela-m), 100%); }
.orcsug-modal--g { width: min(var(--larg-janela-g), 100%); }
.orcsug-x { flex: none; }
.orc-log-x { position: absolute; top: 4px; right: 4px; }
@media (max-width: 640px) {
    .orc-janela-rodape { position: sticky; bottom: 0; background: var(--sup-1); padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    .orc-janela-rodape .btn { min-height: var(--alt-toque); }
}

/* Consultar preços (direção 09, 4.10): busca no topo, filtros compactos,
   resultado em .cm-tab e a carga mensal num <details> fechado. */
.orc-consulta-busca { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.orc-consulta-busca .orc-field { margin: 0; }
.orc-consulta-busca .orc-consulta-termo { flex: 1; min-width: 220px; }
.orc-consulta-filtros { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 12px; }
.orc-consulta-fontes { position: relative; }
.orc-consulta-fontes > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tinta-2); border: 1px solid var(--borda); border-radius: var(--raio-1); padding: 5px 10px; background: var(--sup-1); }
.orc-consulta-fontes > summary::-webkit-details-marker { display: none; }
.orc-consulta-fontes > summary .ico { width: 13px; height: 13px; }
.orc-consulta-fontes[open] > summary { border-color: var(--borda-forte); }
.orc-consulta-fontes > .catalogo-filtro-checkboxes { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 300px; box-shadow: var(--sombra-2); background: var(--sup-1); }
.orc-consulta-tipos { font-size: 12px; }
.orc-consulta-emop { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--acao); text-decoration: none; }
.orc-consulta-emop .ico { width: 13px; height: 13px; }
.orc-consulta-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 12px; color: var(--tinta-3); margin-bottom: 6px; min-height: 16px; }
.orc-consulta-info #precoContador { white-space: nowrap; }
.orc-consulta-tab thead th { background: var(--sup-2); }
#cotMercPreview:empty { display: none; }
.orc-consulta-tab .orc-consulta-cod { white-space: nowrap; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orc-carga { margin-top: 18px; }
.orc-carga > summary .orc-carga-estado { margin-left: 8px; font-weight: var(--peso-corpo); text-transform: none; letter-spacing: 0; color: var(--tinta-3); }
.orc-carga-bloco { padding: 4px 14px 14px; }
.orc-carga-bloco + .orc-carga-bloco { border-top: 1px solid var(--borda); padding-top: 12px; }
.orc-carga-bloco h4 { font-size: 12.5px; font-weight: 600; color: var(--tinta-1); margin: 6px 0 4px; }
.orc-carga-bloco p { font-size: 11.5px; color: var(--tinta-3); margin: 0 0 8px; }
.orc-carga-log { position: relative; background: var(--sup-2); border-radius: 6px; padding: 10px 32px 10px 10px; margin-bottom: 8px; font-size: 12.5px; white-space: pre-wrap; }
.orc-carga-campos { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.orc-carga-campos label { display: block; font-size: 11px; color: var(--tinta-3); margin-bottom: 3px; }
.orc-var-sobe { color: var(--st-atencao); } .orc-var-desce { color: var(--st-ok); } .orc-var-igual { color: var(--tinta-3); }
@media (max-width: 640px) {
    .orc-consulta-fontes > .catalogo-filtro-checkboxes { position: static; min-width: 0; box-shadow: none; margin-top: 6px; }
}
/* Revisão da Helena na Onda 3: sem "Pronto." solto; estado real da fonte; seletor de arquivo do design system; tipo só com o ícone */
.orc-carga-log:has(> div:empty) { display: none; }
.orc-carga-ult { font-size: 11.5px; color: var(--tinta-2); margin: 0 0 8px; }
.orc-arquivo { padding: 4px; font-size: 12.5px; color: var(--tinta-2); }
.orc-arquivo::file-selector-button { font: inherit; font-weight: 600; font-size: 12px; color: var(--tinta-1); background: var(--sup-1); border: 1px solid var(--borda-forte); border-radius: var(--raio-1); padding: 5px 12px; margin-right: 10px; cursor: pointer; }
.orc-arquivo::file-selector-button:hover { background: var(--sup-3); }
.tipo-badge::before { display: none; }
/* ===== Orçamentos, Onda 4 (14/10/2026): pacote de entrega e versão enviada =====
   As 6 peças em grade, estado por forma (check = pronta, anel = falta), uma ação
   primária ("Gerar pacote do órgão") e a marcação de versão enviada ao lado. */
.orc-pacote { margin: 0 0 16px; }
.orc-pacote-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.orc-pacote-tit { font-size: 14px; font-weight: 600; color: var(--tinta-1); margin: 0 0 2px; }
.orc-pacote-sub { font-size: 12.5px; color: var(--tinta-3); margin: 0; }
.orc-pacote-sub b { color: var(--tinta-1); font-weight: 600; }
.orc-pacote-pecas { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.orc-pacote-peca { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: 10px; min-height: 52px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--sup-1); }
.orc-pacote-n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; color: var(--tinta-2); background: var(--sup-2); font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.orc-pacote-peca-txt { display: flex; flex-direction: column; min-width: 0; }
.orc-pacote-peca-nome { font-size: 12.5px; font-weight: 600; color: var(--tinta-1); line-height: 1.3; }
.orc-pacote-peca-nota { font-size: 11.5px; color: var(--tinta-3); line-height: 1.3; }
.orc-pacote-marca { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; justify-self: end; }
.orc-pacote-peca.ok .orc-pacote-marca { background: var(--st-ok-tinta); color: var(--st-ok); }
.orc-pacote-peca.ok .orc-pacote-marca .ico { width: 12px; height: 12px; }
.orc-pacote-peca.falta .orc-pacote-marca { box-shadow: inset 0 0 0 1.5px var(--st-atencao); }
.orc-pacote-peca.falta .orc-pacote-peca-nota { color: var(--st-atencao); }
.orc-pacote-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.orc-pacote-acoes .btn[disabled] { cursor: not-allowed; }
.orc-pacote-motivo { font-size: 12px; color: var(--tinta-3); margin: 8px 0 0; }
.orc-pacote-status { font-size: 12px; color: var(--tinta-2); margin: 8px 0 0; min-height: 16px; }
.orc-pacote-status:empty { display: none; }
.orc-pacote-avulso { margin-top: 4px; border-top: 1px solid var(--borda); padding-top: 12px; }
.orc-pacote-avulso > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); list-style-position: inside; }
.orc-pacote-avulso > summary:hover { color: var(--tinta-1); }
.orc-selo-enviada { white-space: nowrap; }
.orc-selo-enviada .ico, .orc-top-enviada .ico { width: 11px; height: 11px; }
.ov-rot .orc-selo-enviada { margin-left: 8px; vertical-align: middle; font-weight: 600; }
.ov-item--enviada { border-color: var(--st-info); }
.orc-top-enviada { margin-left: 6px; }
.orc-enviada-faixa { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: -6px 0 14px; padding: 10px 14px; border-radius: var(--raio-2); background: var(--st-info-tinta); color: var(--tinta-1); font-size: 12.5px; line-height: 1.45; }
.orc-enviada-faixa > .ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--st-info); }
.orc-enviada-txt { flex: 1 1 200px; min-width: 0; }
/* Só leitura: campos de edição apagados fora das seções de consulta. */
.orc-somente-leitura #orcEditorConteudo .orc-secao:not(#orcSecaoResumo):not(#orcSecaoConformidade):not(#orcSecaoCustoPreco):not(#orcSecaoCurvaAbc):not(#orcSecaoRelatorios) :is(input, select, textarea) { cursor: default; background: transparent; border-color: transparent; box-shadow: none; color: var(--tinta-1); -webkit-appearance: none; appearance: none; }
.orc-somente-leitura #orcEditorConteudo .orc-secao:not(#orcSecaoResumo):not(#orcSecaoConformidade):not(#orcSecaoCustoPreco):not(#orcSecaoCurvaAbc):not(#orcSecaoRelatorios) .btn:not([data-leitura-ok]):not(.btn-primary) { opacity: .55; cursor: not-allowed; }
/* Pré-visualização em modo pacote: as 6 peças são fixas. */
.orc-pv-pacote { display: none; font-weight: 600; color: var(--tinta-2); }
#orcPreviewModal[data-pacote] .orc-pv-pacote { display: inline; }
#orcPreviewModal[data-pacote] .orc-pv-incluir { display: none !important; }
@media (max-width: 900px) {
    .orc-pacote-pecas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .orc-pacote-pecas { grid-template-columns: minmax(0, 1fr); }
    .orc-pacote-peca { min-height: 44px; }
    .orc-pacote-acoes { flex-direction: column; align-items: stretch; }
    .orc-pacote-acoes .btn { width: 100%; justify-content: center; min-height: 44px; }
    .orc-pacote-cab { flex-direction: column; }
}
/* Correções da Helena na Onda 4 (14/10/2026). */
/* 7) Marca da pendência por ícone (cadeado bloqueia, alerta confere), nada que pareça caixa de marcar. */
.orcr-li .orcr-marca { width: 14px; height: 14px; border-radius: 0; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; color: var(--st-atencao); }
.orcr-li.orcr-li--bloq .orcr-marca { border-radius: 0; box-shadow: none; color: var(--st-critico); }
.orcr-li .orcr-marca .orcp-ico { width: 14px; height: 14px; }
.orcr-selo-bloq { font-size: 11px; padding: 1px 7px; margin-right: 4px; vertical-align: 1px; }
/* 8) Entregue: título no lugar de "Antes de entregar", lista recolhida. */
.orcr-antes--entregue > summary { cursor: pointer; list-style-position: inside; }
.orcr-antes--entregue[open] > summary { margin-bottom: 9px; }
/* 9) Só leitura: sem "Adicionar serviço"; Inserir, menu de três pontos e fx apagados. */
.orc-somente-leitura #orcEditorConteudo .orc-addrow-row { display: none; }
.orc-somente-leitura #orcEditorConteudo :is(.btn-acoes-linha, [onclick^="orcAbrirOpcoesItem"]) { opacity: .35 !important; cursor: not-allowed; }
/* Helena (14/10, 2ª rodada): o que só serve para editar some de vez. */
.orc-somente-leitura #orcEditorConteudo :is(.orc-cat-insbtn, .orcmem-fx, [onclick^="orcAbrirImportador"], [onclick^="orcNovaEtapa"], #orcBtnCopiloto) { display: none !important; }
/* 10) Botão primário desligado ou barrado pela leitura: cinza, nunca vinho desbotado. */
.orc-somente-leitura #orcEditorConteudo .orc-secao:not(#orcSecaoResumo):not(#orcSecaoConformidade):not(#orcSecaoCustoPreco):not(#orcSecaoCurvaAbc):not(#orcSecaoRelatorios) :is(.btn-primary, .cm-btn--primario, .cm-btn--ia, .btn-ia):not([data-leitura-ok]),
.orc-somente-leitura #orcEditorConteudo .orc-secao .btn-primary:disabled {
    background: var(--sup-2); background-image: none; color: var(--tinta-4); border-color: var(--borda); opacity: 1; filter: none;
}
.orc-somente-leitura #orcEditorConteudo .orc-secao:not(#orcSecaoResumo):not(#orcSecaoConformidade):not(#orcSecaoCustoPreco):not(#orcSecaoCurvaAbc):not(#orcSecaoRelatorios) :is(.btn-primary, .cm-btn--primario, .cm-btn--ia, .btn-ia):not([data-leitura-ok]) .ico { color: var(--tinta-4); }
#modulo-orcamentos .btn-primary:disabled, #modulo-orcamentos .cm-btn--primario:disabled, #orcPreviewModal .btn-primary:disabled {
    background: var(--sup-2); background-image: none; color: var(--tinta-4); border-color: var(--borda); opacity: 1;
}
.orcr-entregue-ver { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--tinta-3); text-decoration: underline; text-underline-offset: 2px; }
.orcr-antes--entregue[open] .orcr-entregue-ver { display: none; }
/* Celular: o valor do item com folga embaixo, para a vírgula nunca ficar cortada. */
.orc-tab-planilha td.orc-val-ofertado { line-height: 1.4; }
/* Só leitura: nenhum campo da planilha parece editável (também o BDI da categoria). */
.orc-somente-leitura #orcSecaoPlanilha :is(input, select, textarea) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }


/* >>> LICITACOES-ONDA1 (14/10/2026): dinheiro e dados certos.
   Resultado lido do PNCP em bloco próprio, transições nomeadas do painel e a
   janela de valores editáveis (comissão e previsão). Só tokens: tema escuro
   sai certo sem regra própria. */
.lic-transicoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lic-transicoes[hidden] { display: none; }
.lic-pncp { border: 1px solid var(--borda); background: var(--sup-2); border-radius: 8px; padding: 10px 12px; margin: 8px 0 12px; color: var(--tinta-1, var(--texto)); }
.lic-pncp-tit { font-weight: var(--peso-enfase, 600); font-size: 13px; }
.lic-pncp-txt { font-size: 12.5px; margin: 4px 0 6px; color: var(--tinta-2, var(--texto-claro)); }
.lic-pncp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lic-pncp-lista li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.lic-pncp-nome { flex: 1 1 200px; min-width: 0; }
.lic-pncp-valor { white-space: nowrap; }
.lic-valores-form { display: flex; flex-direction: column; gap: 10px; }
.lic-valores-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.lic-valores-campo .cm-campo { max-width: 260px; }
.lic-valores-previa { font-size: 12.5px; color: var(--tinta-2, var(--texto-claro)); min-height: 1em; }
/* Desempenho por cliente no celular: as colunas de dinheiro ficam na tela. */
@media (max-width: 480px) {
    table:has(> .lic-desemp-corpo) th:nth-child(2), table:has(> .lic-desemp-corpo) th:nth-child(4),
    .lic-desemp-corpo td:nth-child(2), .lic-desemp-corpo td:nth-child(4) { display: none; }
    .lic-pncp-lista li { display: grid; grid-template-columns: 1fr auto; }
    .lic-pncp-nome { grid-column: 1 / -1; }
}
/* <<< LICITACOES-ONDA1 */

/* >>> LICITACOES-ONDA2 (14/10/2026): roteiro e celular.
   Direção 14 da Helena (seções 4.0 a 4.15) e protótipo aprovado pelo Diretor
   (_revisao_layout_2026-10-12/licitacoes_prototipo/). As classes que nasceram
   só no protótipo (.lic-pede-acao, .lic-quadro, .faixa-resposta) passam a valer
   aqui. Só tokens: o tema escuro sai certo sem regra própria. */

/* ---- Faixa "Pede ação" (4.2 A): uma linha por tipo, sem caixa ---- */
.lic-pede-acao { padding: 10px 24px 12px 24px; border-bottom: 1px solid var(--borda); }
.lic-pede-acao:empty { display: none; }
.lic-pede-acao-tit { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--peso-forte); color: var(--tinta-1); margin-bottom: 4px; }
.lic-pede-acao-dica { font-size: var(--txt-densa); font-weight: var(--peso-corpo); color: var(--tinta-3); }
.lic-pede-linha { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    min-height: 30px; padding: 1px 0; border-top: 1px solid var(--linha-sutil); }
.lic-pede-linha:first-of-type { border-top: 0; }
.lic-pede-tipo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--peso-enfase); color: var(--tinta-2); white-space: nowrap; }
.lic-pede-tipo .lb-legenda-alerta .ico, .lic-pede-resumo .lb-legenda-alerta .ico { width: 12px; height: 12px; }
.lic-pede-txt { font-size: 12.5px; color: var(--tinta-1); line-height: 1.35; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lic-pede-txt b { font-weight: var(--peso-enfase); }
.lic-pede-ir { color: var(--acao); justify-content: flex-end; padding-right: 2px; }
.lic-pede-ir:hover:not(:disabled) { color: var(--acao); background: var(--acao-suave); }
.lic-pede-ir .ico, .lic-pede-mais .ico { width: 13px; height: 13px; }
.lic-pede-acao--curta { padding: 9px 24px; }
.lic-pede-acao--curta .lic-pede-acao-tit { margin: 0; flex-wrap: wrap; }
.lic-pede-resumo { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; margin-left: 8px; font-size: 12.5px; font-weight: var(--peso-corpo); color: var(--tinta-1); }
.lic-pede-resumo > span { display: inline-flex; align-items: center; gap: 6px; }
.lic-pede-acao--curta .lic-pede-ir { margin-left: auto; }
.lic-pede-acao:not(.lic-pede-acao--aberta) .lic-pede-linha--extra { display: none; }
.lic-pede-mais { display: inline-flex; margin-top: 2px; color: var(--acao); padding-left: 0; }
.lic-pede-ok { color: var(--tinta-2); font-weight: var(--peso-corpo); }
.lic-busca .lb-vista-n { margin-left: 4px; }
.lic-busca .lb-vista-n[hidden] { display: none; }

/* ---- Modo Quadro (4.2 B): colunas de 190 px no mínimo, sem barra colorida ---- */
.lic-quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 12px; padding: 14px 16px 16px; overflow-x: auto; }
.lic-quadro-col { display: flex; flex-direction: column; min-width: 0; background: var(--sup-2); border: 1px solid var(--borda); border-radius: var(--raio-2); }
.lic-quadro-col--alvo { border-color: var(--acao); box-shadow: var(--anel-foco); }
.lic-quadro-cab { display: block; width: 100%; text-align: left; padding: 10px 12px 9px; border: 0; border-bottom: 1px solid var(--borda); background: transparent; color: inherit; font: inherit; cursor: default; }
.lic-quadro-tit { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--peso-forte); color: var(--tinta-1); }
.lic-quadro-tit .ico { display: none; width: 14px; height: 14px; color: var(--tinta-3); margin-left: auto; }
.lic-quadro-soma { margin-top: 3px; font-size: var(--txt-densa); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lic-quadro-soma .cm-num { font-weight: var(--peso-enfase); color: var(--tinta-2); }
.lic-quadro-lista { display: flex; flex-direction: column; gap: 8px; padding: 8px; max-height: 560px; overflow-y: auto; }
.lic-quadro-vazio { padding: 6px 4px; font-size: var(--txt-densa); color: var(--tinta-3); font-style: italic; }
.lic-quadro-mais { align-self: flex-start; color: var(--tinta-2); }
.lic-card { position: relative; background: var(--sup-1); border: 1px solid var(--borda); border-radius: var(--raio-1); padding: 9px 10px 10px;
    box-shadow: var(--sombra-1); display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; }
.lic-card[draggable="true"] { cursor: grab; }
.lic-card:hover { border-color: var(--borda-forte); }
.lic-card:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.lic-card-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lic-card-l1 .lb-proc { font-size: 13px; }
.lic-card-l1 .filtro-multi { margin-left: auto; flex: none; }
.lic-card-l1 .lb-mais-btn { width: 28px; height: 28px; }
.lic-card-org { font-size: var(--txt-densa); color: var(--tinta-2); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lic-card-prazo { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--peso-enfase); color: var(--tinta-1); }
.lic-card-prazo--critico { color: var(--st-critico); }
.lic-card-prazo--atencao { color: var(--st-atencao); }
.lic-card-val { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lic-card-val-rot { font-size: var(--txt-densa); color: var(--tinta-3); }
.lic-card-val .lb-v1 { font-size: 13px; }
.lic-card-pront { margin-top: 3px; padding-top: 7px; border-top: 1px dashed var(--linha-sutil); }
.lic-card-pront .lb-ver { margin-top: 3px; }
.lic-card-nossa { font-size: var(--txt-densa); color: var(--tinta-3); display: flex; justify-content: space-between; gap: 8px; }
.lic-card-nossa b { font-weight: var(--peso-enfase); color: var(--tinta-2); }
/* Onda 3: sem barra colorida no cartão; o prazo já diz em palavra e cor. */
.lic-card--critico, .lic-card--atencao { box-shadow: var(--sombra-1); }
.lic-card-selos { display: flex; flex-wrap: wrap; gap: 4px; }
.lic-card-selos .cm-chip { font-size: 10.5px; padding: 1px 7px; }
.lic-card-selos .cm-chip .ico { width: 11px; height: 11px; }
.lic-menu-tit { padding: 6px 12px 4px; font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
#licVistaQuadro .lb-barra input[type="text"] { max-width: 520px; }
#licQuadroEncerradasBtn[aria-pressed="true"] { border-color: var(--acao); color: var(--acao); }

/* ---- Resumo, Hoje e Resultados: 4 células iguais (.faixa-resposta) ---- */
.lic-pergunta { font-size: 15px; font-weight: var(--peso-forte); color: var(--tinta-1); margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lic-pergunta-per { font-size: var(--txt-densa); font-weight: var(--peso-corpo); color: var(--tinta-3); }
.faixa-resposta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--sup-1); border: 1px solid var(--borda);
    border-radius: var(--raio-2); box-shadow: var(--sombra-1); margin-bottom: 14px; }
.faixa-resposta:empty { display: none; }
.faixa-resposta-cel { padding: 16px 20px 15px; border-inline-start: 1px solid var(--borda); min-width: 0; }
.faixa-resposta-cel:first-child { border-inline-start: 0; }
.faixa-resposta-rot { font-size: var(--txt-rotulo); font-weight: var(--peso-enfase); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.faixa-resposta-n { margin-top: 8px; font-size: 24px; font-weight: var(--peso-forte); letter-spacing: -.02em; line-height: 1.1; color: var(--tinta-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.faixa-resposta-n .cm-ausencia { font-size: 15px; letter-spacing: 0; }
.faixa-resposta-n-de { font-size: 13px; font-weight: var(--peso-enfase); color: var(--tinta-3); letter-spacing: 0; margin-left: 4px; }
.faixa-resposta-sub { margin-top: 6px; font-size: 11.5px; color: var(--tinta-2); line-height: 1.4; }
.lic-risco { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font-size: 13px; color: var(--tinta-1); }
.lic-risco[hidden] { display: none; }
.lic-risco b { font-weight: var(--peso-enfase); }
.lic-resumo-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.lic-resumo-grade .table-container { margin-bottom: 16px; }
/* position: o rótulo escondido (lb-sr, absoluto) da última coluna não escapa da rolagem da tabela. */
.lic-tab-rola { overflow-x: auto; position: relative; }
.lic-tab tbody td { height: auto; padding: 10px 12px; font-size: 12.5px; color: var(--tinta-1); vertical-align: top; }
.lic-tab thead th { padding: 9px 12px; }
.lic-tab th.num { text-align: right; }
.lic-tab td.num { font-variant-numeric: tabular-nums; }
.lic-tab tfoot td { padding: 10px 12px; font-size: 12.5px; font-weight: var(--peso-forte); color: var(--tinta-1); border-top: 1px solid var(--borda); background: var(--sup-2); }
.lic-tab b { font-weight: var(--peso-enfase); }
.lic-tab .lic-c-cli { width: 24%; }
.lic-tab--clientes td:first-child { white-space: nowrap; }
.lic-tab .lic-c-acao { width: 1%; white-space: nowrap; text-align: right; }
.lic-tab td.lic-c-acao { text-align: right; }
.lic-n { color: var(--tinta-3); font-weight: var(--peso-corpo); }
.lic-linha-sub { margin-top: 2px; font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.35; }
.lic-linha-fraca td { color: var(--tinta-3) !important; }
.lic-motivos-nota { margin: 0; padding: 10px 16px 14px; font-size: 12px; color: var(--tinta-3); line-height: 1.5; }
.lic-motivos-nota:empty { display: none; }
.table-header .lb-cab-n { margin-left: auto; padding-left: 12px; white-space: normal; text-align: right; }
.lic-detalhes { margin-bottom: 8px; }
.lic-detalhes details { border-top: 1px solid var(--linha-sutil); }
.lic-detalhes details:first-of-type { border-top: 0; }
.lic-detalhes summary { list-style: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 11px 24px; cursor: pointer; font-size: 13px; font-weight: var(--peso-enfase); color: var(--tinta-1); }
.lic-detalhes summary::-webkit-details-marker { display: none; }
.lic-detalhes summary .ico { width: 13px; height: 13px; color: var(--tinta-3); align-self: center; transition: transform .15s; }
.lic-detalhes details[open] summary .ico { transform: rotate(90deg); }
.lic-det-resumo { font-weight: var(--peso-corpo); font-size: 12.5px; color: var(--tinta-3); }
.lic-det-resumo .cm-num { color: var(--tinta-1); font-weight: var(--peso-enfase); }
.lic-det-corpo { padding: 0 24px 12px 47px; font-size: 12.5px; color: var(--tinta-2); line-height: 1.5; }
.lic-det-corpo b { color: var(--tinta-1); }

/* ---- Gráficos (decisão do Diretor, 14/10/2026) ---- */
.lic-graficos { margin-top: 4px; }
.lic-secao-tit { list-style: none; display: flex; align-items: baseline; gap: 10px; cursor: pointer; font-size: 15px; font-weight: var(--peso-forte); color: var(--tinta-1); margin: 4px 0 12px; }
.lic-secao-tit::-webkit-details-marker { display: none; }
.lic-secao-tit .ico { width: 14px; height: 14px; color: var(--tinta-3); align-self: center; transition: transform .15s; }
.lic-graficos:not([open]) .lic-secao-tit .ico { transform: rotate(-90deg); }
.lic-graf-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lic-graf { margin-bottom: 0; overflow: hidden; }
.lic-graf-cab { padding: 14px 20px 4px; }
.lic-graf-cab h3 { margin: 0; font-size: 14px; font-weight: var(--peso-forte); color: var(--tinta-1); }
.lic-graf-n { display: block; margin-top: 3px; font-size: var(--txt-densa); color: var(--tinta-3); }
.lic-graf-corpo { position: relative; height: 230px; padding: 8px 16px 14px 12px; }
.lic-graf-corpo--alto { height: 470px; }
.lic-graf-corpo canvas { width: 100% !important; height: 100% !important; }
.lic-graf-vazio { position: absolute; inset: 8px 16px 14px 12px; display: flex; align-items: center; justify-content: center; text-align: center;
    font-size: 12.5px; color: var(--tinta-3); font-style: italic; background: var(--sup-1); }
.lic-graf-vazio[hidden] { display: none; }
.lic-ver-tabela { border-top: 1px solid var(--linha-sutil); }
.lic-ver-tabela summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 20px; cursor: pointer; font-size: 12.5px; font-weight: var(--peso-enfase); color: var(--acao); }
.lic-ver-tabela summary::-webkit-details-marker { display: none; }
.lic-ver-tabela summary .ico { width: 13px; height: 13px; }
.lic-ver-tabela[open] summary .ico { transform: rotate(90deg); }
.lic-par { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.lic-par .table-container { margin-bottom: 0; }
.lic-par--igual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lic-frase { margin: 0 0 16px; font-size: 13.5px; color: var(--tinta-1); line-height: 1.5; }
.lic-frase:empty { display: none; }
.lic-frase b { font-weight: var(--peso-forte); }
.lic-rodape { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; color: var(--tinta-3); }
.lic-rodape[hidden] { display: none; }
.lic-rodape .ico { width: 13px; height: 13px; }
.lic-mercado-filtros { padding: 0 0 14px 0; border-bottom: none; }

/* ---- Cadastros ---- */
#licCadArquivadosBtn[aria-pressed="true"] { border-color: var(--acao); color: var(--acao); }
.lic-tab--cad tr.lic-arquivado td { color: var(--tinta-3); }

/* ---- CRM: Hoje, Funil, Contas, Prospecção ---- */
.crm-hoje-tab { table-layout: fixed; }
.crm-hoje-tab .crm-c-lead { width: 19%; } .crm-hoje-tab .crm-c-pq { width: 31%; } .crm-hoje-tab .crm-c-sem { width: 9%; }
.crm-hoje-tab .crm-c-frente { width: 13%; } .crm-hoje-tab .crm-c-val { width: 11%; } .crm-hoje-tab .crm-c-acao { width: 17%; }
.crm-hoje-tab .crm-c-org { width: 19%; } .crm-hoje-tab .crm-c-sabe { width: 45%; }
.crm-hoje-tab th:last-child, .crm-hoje-tab td:last-child { padding-right: 20px; }
.crm-hoje-tab th:first-child, .crm-hoje-tab td:first-child { padding-left: 24px; }
.crm-nome { font-weight: var(--peso-enfase); }
.crm-emp, .crm-sub { margin-top: 2px; font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.35; }
.crm-pq { display: flex; align-items: center; gap: 7px; font-weight: var(--peso-enfase); }
.crm-pq--critico { color: var(--st-critico); }
.crm-pq--atencao { color: var(--st-atencao); }
.crm-pq--info { color: var(--tinta-1); }
.crm-acoes { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.crm-acoes a.cm-btn { text-decoration: none; }
.crm-acoes .cm-btn--icone { justify-content: center; padding: 0; }
.crm-hoje-tab td.crm-c-acao { padding-top: 8px; }
.crm-hoje-tab td.crm-c-sem { font-weight: var(--peso-enfase); }
.crm-filtros select { min-width: 0; }
.crm-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; font-size: 12.5px; color: var(--tinta-2); }
.crm-prosp-barra { flex-wrap: wrap; }
.crm-prosp-barra input[type="text"] { flex: 1 1 250px; min-width: 0; }
.crm-prosp-rot { font-size: 12px; color: var(--tinta-3); }
.crm-melhor-pc { display: none; }
.crm-contato-form { display: flex; flex-direction: column; gap: 12px; }
.crm-contato-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tinta-2); }
.crm-contato-form .crm-contato-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- Celular ---- */
@media (max-width: 640px) {
    .lic-pede-acao { padding: 10px 14px 10px; }
    .lic-pede-linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tipo bt" "txt txt"; row-gap: 3px; padding: 8px 0; }
    .lic-pede-tipo { grid-area: tipo; font-weight: var(--peso-forte); color: var(--tinta-1); }
    .lic-pede-txt { grid-area: txt; white-space: normal; overflow-wrap: anywhere; }
    .lic-pede-linha .cm-btn { grid-area: bt; min-height: 36px; min-width: 0; }
    .lic-pede-acao-dica { display: none; }
    .lic-pede-acao--curta .lic-pede-resumo { margin-left: 0; width: 100%; }
    .lb-cab-acoes { grid-template-columns: auto auto 1fr; }
    .lb-cab-acoes .cm-seg { grid-column: 1 / -1; justify-self: start; }
    .lb-cab-acoes .lic-busca { grid-column: 2 / -1; justify-content: center; }
    .faixa-resposta { grid-template-columns: 1fr; }
    .faixa-resposta-cel { border-inline-start: 0; border-top: 1px solid var(--borda); padding: 12px 16px; }
    .faixa-resposta-cel:first-child { border-top: 0; }
    .faixa-resposta-n { font-size: 21px; }
    .lic-resumo-grade, .lic-graf-grade, .lic-par, .lic-par--igual { grid-template-columns: 1fr; }
    .lic-detalhes summary { padding: 11px 14px; }
    .lic-det-corpo { padding: 0 14px 12px 37px; }
    /* Resumo no celular: tabela de cliente em 3 colunas (cliente, taxa, contratado). */
    .lic-tab--clientes th:nth-child(2), .lic-tab--clientes td:nth-child(2), .lic-tab--clientes th:nth-child(3), .lic-tab--clientes td:nth-child(3),
    .lic-tab--clientes th:nth-child(4), .lic-tab--clientes td:nth-child(4), .lic-tab--clientes th:nth-child(7), .lic-tab--clientes td:nth-child(7) { display: none; }
    .lic-tab--clientes td:first-child { white-space: normal; }
    /* Quadro no celular: lista por etapa, recolhida; abre tocando no título. */
    .lic-quadro { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 14px; overflow: visible; }
    .lic-quadro-cab { cursor: pointer; min-height: var(--alt-toque); }
    .lic-quadro-tit .ico { display: inline-block; }
    .lic-quadro-col:not(.lic-quadro-col--aberta) .lic-quadro-lista { display: none; }
    .lic-quadro-col:not(.lic-quadro-col--aberta) .lic-quadro-cab { border-bottom: 0; }
    .lic-quadro-col--aberta .lic-quadro-tit .ico { transform: rotate(180deg); }
    .lic-quadro-lista { max-height: none; }
    .lic-card-l1 .lb-mais-btn { width: var(--alt-toque); height: var(--alt-toque); }
    #licVistaQuadro .lb-barra { flex-wrap: wrap; }
    #licVistaQuadro .lb-barra input[type="text"] { flex: 1 1 100%; height: var(--alt-toque); }
    /* CRM Hoje: lista de ligações, botões de 44 px. */
    .crm-hoje-tab, .crm-hoje-tab tbody { display: block; width: 100%; }
    .crm-hoje-tab thead { display: none; }
    .crm-hoje-tab tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lead val" "pq pq" "acao acao";
        gap: 6px 10px; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
    .crm-hoje-tab td { display: block; padding: 0 !important; border: 0; width: auto !important; }
    .crm-hoje-tab td.crm-c-lead { grid-area: lead; }
    .crm-hoje-tab td.crm-c-pq, .crm-hoje-tab td.crm-c-sabe { grid-area: pq; }
    .crm-hoje-tab td.crm-c-val { grid-area: val; text-align: right; }
    .crm-hoje-tab td.crm-c-sem, .crm-hoje-tab td.crm-c-frente, .crm-hoje-tab td.crm-c-org { display: none; }
    .crm-hoje-tab td.crm-c-acao { grid-area: acao; }
    .crm-acoes { justify-content: flex-start; }
    .crm-acoes .cm-btn { min-height: var(--alt-toque); }
    .crm-acoes .cm-btn--icone { width: var(--alt-toque); }
    .crm-acoes .crm-registrar { flex: 1; justify-content: center; }
    .crm-melhor-pc { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12.5px; color: var(--tinta-3); }
    .crm-melhor-pc .ico { width: 14px; height: 14px; }
    .crm-contato-form .crm-contato-par { grid-template-columns: 1fr; }
    .crm-funil-tab th:nth-child(3), .crm-funil-tab td:nth-child(3), .crm-funil-tab th:nth-child(6), .crm-funil-tab td:nth-child(6) { display: none; }
    .crm-contas-tab th:nth-child(4), .crm-contas-tab td:nth-child(4), .crm-contas-tab th:nth-child(6), .crm-contas-tab td:nth-child(6) { display: none; }
    .lic-tab--cad th:nth-child(4), .lic-tab--cad td:nth-child(4) { display: none; }
    .lic-mercado-filtros { flex-direction: column; align-items: stretch; }
}
/* ---- Buscar editais (4.5), Triagem (4.4), cobertura e conta (Onda 2) ---- */
.lic-busca-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; font-size: 13px; color: var(--tinta-1); line-height: 1.45; }
.lic-busca-estado:empty { display: none; }
.lic-busca-falha { display: inline-flex; align-items: center; gap: 6px; color: var(--st-atencao); font-weight: var(--peso-enfase); }
.lic-busca-falha .ico { width: 14px; height: 14px; }
.lic-busca-agora { margin: 0 0 16px; }
.lic-busca-filtros { border: 1px solid var(--borda); border-radius: var(--raio-2); padding: 0 14px; margin: 0 0 16px; background: var(--sup-1); }
.lic-busca-filtros > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; font-size: 13px; font-weight: var(--peso-enfase); color: var(--tinta-1); }
.lic-busca-filtros > summary::-webkit-details-marker { display: none; }
.lic-busca-filtros > summary .ico { width: 14px; height: 14px; color: var(--tinta-3); }
.lic-busca-filtros[open] { padding-bottom: 14px; }
.tri-prazo-txt { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--peso-enfase); color: var(--tinta-2); }
.tri-prazo-txt--critico { color: var(--st-critico); }
.tri-prazo-txt--atencao { color: var(--st-atencao); }
.tri-dup { cursor: pointer; border: 0; font: inherit; }
.tri-dup .ico { width: 12px; height: 12px; }
.tri-btn-descartar { color: var(--tinta-2); }
.lic-un-aceitas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.lic-un-aceitas input { width: auto; min-width: 140px; font-size: 12px; padding: 2px 6px; }
.crm-det-tit { margin: 14px 0 8px; font-size: 13px; font-weight: var(--peso-forte); color: var(--tinta-1); }
.crm-det-tit:first-child { margin-top: 0; }
@media (max-width: 640px) {
    /* Painel da licitação: transições em barra fixa de 44 px (4.3, celular). */
    .lic-transicoes:not([hidden]) { position: sticky; bottom: 0; z-index: 2; background: var(--sup-1); padding: 8px 0; margin-top: 8px; border-top: 1px solid var(--borda); }
    .lic-transicoes .cm-btn, .lic-transicoes .btn { min-height: var(--alt-toque); flex: 1 1 calc(50% - 8px); justify-content: center; }
    .tri-acoes-wrap .cm-btn { min-height: var(--alt-toque); }
}
/* ---- Licitações no celular: a primeira licitação na primeira dobra (aceite da Onda 2) ---- */
@media (max-width: 640px) {
    #licCont .lb-cab { padding: 10px 14px; gap: 8px; }
    #licCont .lb-cab-acoes { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; }
    #licCont .lb-cab-acoes .cm-seg { flex: none; grid-column: auto; }
    #licCont .lb-cab-acoes .cm-seg button .ico { display: none; }
    #licCont .lb-cab-acoes .cm-btn { min-height: var(--alt-toque); }
    #licCont .lb-cab-acoes .lic-busca { flex: 1 1 auto; min-width: 0; justify-content: center; grid-column: auto; }
    #licCont .lb-cab-acoes .cm-btn { position: relative; }
    #licCont #menuOpcoesBase > .cm-btn .lic-rot, #licCont .lic-busca .lic-rot, #licCont .lic-criar .lic-rot {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    #licCont #menuOpcoesBase > .cm-btn, #licCont .lb-cab-acoes .lic-criar { width: var(--alt-toque); padding: 0; justify-content: center; flex: none; grid-column: auto; }
    #licCont .lic-busca .lb-vista-n { margin-left: 6px; }
    .lic-pede-acao { padding: 8px 14px; }
    .lic-pede-acao-tit { margin-bottom: 2px; }
    .lic-pede-linha { padding: 6px 0; row-gap: 2px; }
    .lic-pede-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; }
    .lic-pede-linha .cm-btn { min-height: 32px; }
    .lic-pede-mais { min-height: 32px; }
    #licVistaLista .lb-barra { flex-wrap: nowrap; gap: 8px; padding: 8px 14px; }
    #licVistaLista .lb-barra input[type="text"] { flex: 1 1 auto; min-width: 0; }
    #licVistaLista .lb-ordem { width: auto; flex: 0 0 40%; }
    #licVistaLista .lb-ordem .lb-ordem-rot { display: none; }
    #licVistaLista .lb-ordem select.lb-sel { width: 100%; }
    .lb-grupo-btn { min-height: 38px; padding: 8px 14px; }
}
/* CRM Hoje no celular: a faixa em 2 por 2 para a lista de ligações subir. */
@media (max-width: 640px) {
    #crmHojeFaixa, #kpisVendas, #prospFaixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #crmHojeFaixa .faixa-resposta-cel, #kpisVendas .faixa-resposta-cel, #prospFaixa .faixa-resposta-cel { padding: 10px 12px; border-top: 1px solid var(--borda); border-inline-start: 1px solid var(--borda); }
    #crmHojeFaixa .faixa-resposta-cel:nth-child(-n+2), #kpisVendas .faixa-resposta-cel:nth-child(-n+2), #prospFaixa .faixa-resposta-cel:nth-child(-n+2) { border-top: 0; }
    #crmHojeFaixa .faixa-resposta-cel:nth-child(odd), #kpisVendas .faixa-resposta-cel:nth-child(odd), #prospFaixa .faixa-resposta-cel:nth-child(odd) { border-inline-start: 0; }
    #crmHojeFaixa .faixa-resposta-n, #kpisVendas .faixa-resposta-n, #prospFaixa .faixa-resposta-n { font-size: 17px; margin-top: 4px; }
    #crmHojeFaixa .faixa-resposta-sub, #kpisVendas .faixa-resposta-sub, #prospFaixa .faixa-resposta-sub { font-size: 11px; margin-top: 3px; }
    .crm-hoje-tab tbody td { border: 0 !important; }
    .crm-acoes .cm-btn--icone { border: 1px solid var(--borda); }
}
/* Revisão da Helena (Onda 2): linha só do celular e Por cliente em 3 colunas a 390. */
.lic-so-celular { display: none; }
@media (max-width: 640px) {
    .lic-so-celular { display: block; }
    .lic-so-computador { display: none; }
    .lic-tab--clientes th:nth-child(6), .lic-tab--clientes td:nth-child(6) { display: none; }
    .lic-tab--clientes th:nth-child(7), .lic-tab--clientes td:nth-child(7) { display: table-cell; }
}
/* <<< LICITACOES-ONDA2 */

/* >>> LICITACOES-ONDA3 (14/10/2026): acabamento. Só tokens, sem barra colorida. */
.lic-chip--discutivel { outline: 1px dashed currentColor; outline-offset: -1px; }
#modalNovaLicitacao .cm-chip, .tabela-atestados .cm-chip { white-space: normal; text-align: left; }
.lic-at-vistas { margin-right: 4px; }
.lic-at-vistas .lb-vista-n { margin-left: 2px; }
.lic-at-vistas button[aria-pressed="true"] .lb-vista-n { background: var(--acao-suave); color: var(--acao); }
.tabela-atestados .lic-at-linhas { color: var(--tinta-3); }
.tabela-atestados .lic-at-linhas--revisar { color: var(--st-atencao); }
.tabela-atestados .lic-at-cat { color: var(--st-ok); font-weight: var(--peso-enfase); }
.tabela-atestados .lic-at-cat--sem { color: var(--st-atencao); }
#aba-atestados .table-header h3 { display: flex; align-items: center; gap: 8px; }
.tabela-atestados .col-atestado a { color: var(--tinta-1); text-decoration: none; }
.tabela-atestados .col-atestado a:hover { color: var(--acao); text-decoration: underline; }
/* Celular (Helena, 14/10): vistas numa linha com rolagem lateral; a tabela
   vira lista de cartões (título, número, selos e emissora). */
@media (max-width: 600px) {
    .lic-at-vistas { display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
    .lic-at-vistas button { min-height: var(--alt-toque); flex: none; }
    #aba-atestados .tabela-atestados, #aba-atestados .tabela-atestados tbody { display: block; width: 100%; }
    #aba-atestados .tabela-atestados thead { display: none; }
    #aba-atestados .tabela-atestados tr.linha-clicavel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
    #aba-atestados .tabela-atestados tr.linha-clicavel td { display: block; padding: 0; border: 0; width: auto; max-width: 100%; background: transparent; box-shadow: none; }
    #aba-atestados .tabela-atestados td.col-atestado { flex: 1 1 100%; }
    #aba-atestados .tabela-atestados td.col-emissora { font-size: var(--txt-densa); color: var(--tinta-2); }
    #aba-atestados .tabela-atestados td.col-classificacao .cm-chip { font-size: 10.5px; padding: 1px 7px; }
    #aba-atestados .tabela-atestados td.col-engenheiro { font-size: var(--txt-densa); color: var(--tinta-3); }
    #aba-atestados .tabela-atestados td.col-engenheiro br { display: none; }
    #aba-atestados .tabela-atestados td.col-engenheiro .lic-at-cat { margin-left: 4px; }
    #aba-atestados .tabela-atestados td.col-objeto { flex: 1 1 100%; font-size: var(--txt-densa); color: var(--tinta-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    #aba-atestados .tabela-atestados tr.empty-row td { display: block; }
}
/* Prospecção (engenheiro B): "ver mapa" e "Virar lead" lado a lado no desktop. */
.lic-tab td.lic-c-acao .crm-acoes { flex-wrap: nowrap; }
/* Mercado: grade única de 2 colunas; a coluna empilha (sem buraco). */
.lic-mercado-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.lic-mercado-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lic-mercado-col > .table-container { margin-bottom: 0; }
.lic-graf-frase { padding: 18px 20px 22px; font-size: 14px; color: var(--tinta-2); line-height: 1.5; }
.lic-graf-frase b { color: var(--tinta-1); font-weight: var(--peso-forte); }
@media (max-width: 900px) { .lic-mercado-grade { grid-template-columns: minmax(0, 1fr); } }
/* <<< LICITACOES-ONDA3 */


/* >>> FINANCEIRO-ONDA2 (16/10/2026): 5 abas, Visão geral, DRE que abre,
   Painel do ano, conciliação com fila e celular. Protótipo aprovado pelo
   Diretor em 14/10 (_revisao_layout_2026-10-12/financeiro_prototipo/), com as
   classes proto-* renomeadas para fin-*. Só tokens: o tema escuro sai certo
   sem regra própria; o vinho da marca não aparece como status. */

/* ---- Barra de abas: 5 abas e o Mais ---- */
#modulo-financeiro { position: relative; }
#modulo-financeiro .fin-abas { padding-right: 96px; }
#modulo-financeiro .fin-aba-oculta { display: none; }
.fin-aba-mais { position: absolute; right: 0; top: 0; height: 40px; display: flex; align-items: center; z-index: 5; }
.fin-aba-mais-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; background: none; border-radius: var(--raio-1);
    font: inherit; font-size: var(--txt-corpo); font-weight: var(--peso-enfase); color: var(--tinta-2); cursor: pointer; }
.fin-aba-mais-btn:hover { background: var(--sup-2); color: var(--tinta-1); }
.fin-aba-mais-btn .ico { width: 14px; height: 14px; }
.fin-aba-mais-btn .ico:last-child { width: 12px; height: 12px; color: var(--tinta-3); }
.fin-abas:has(.fin-aba-oculta.active) + .fin-aba-mais .fin-aba-mais-btn { color: var(--acao); }
.fin-menu-mais { right: 0; left: auto; top: 38px; min-width: 300px; }
.fin-menu-mais .menu-item-acao, .fin-tab-lanc .filtro-multi-painel .menu-item-acao { display: flex; align-items: center; gap: 10px; width: 100%; }
.fin-menu-sep { height: 1px; margin: 6px 4px; background: var(--borda); }
.fin-menu-perigo { color: var(--st-critico) !important; }

/* ---- Pergunta da aba, frase e lastro ---- */
.fin-pergunta { font-size: var(--txt-destaque); font-weight: var(--peso-forte); color: var(--tinta-1); margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; line-height: 1.35; }
.fin-pergunta-per { font-size: var(--txt-densa); font-weight: var(--peso-corpo); color: var(--tinta-3); }
.fin-frase { background: var(--sup-1); border: 1px solid var(--borda); border-radius: var(--raio-2); box-shadow: var(--sombra-1); padding: 14px 20px 12px; margin-bottom: 12px; }
.fin-frase:empty { display: none; }
.fin-frase-txt { margin: 0; font-size: var(--txt-destaque); line-height: 1.5; color: var(--tinta-1); }
.fin-veredito { font-weight: var(--peso-forte); }
.fin-veredito--apertada { color: var(--st-critico); }
.fin-veredito--folgada { color: var(--st-ok); }
.fin-frase-base { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.45; }
.fin-frase-base .ico { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.fin-frase-regra { margin-top: 6px; }
.fin-frase-regra summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--txt-densa); font-weight: var(--peso-enfase); color: var(--acao); }
.fin-frase-regra summary::-webkit-details-marker { display: none; }
.fin-frase-regra summary .ico { width: 13px; height: 13px; }
.fin-frase-regra ul { margin: 8px 0 2px; padding-left: 18px; font-size: var(--txt-corpo); color: var(--tinta-2); line-height: 1.5; }
.fin-frase-regra b { color: var(--tinta-1); }

/* ---- 4 números: o número nunca corta. Quem cede é a grade: 4 colunas,
   2 por 2 abaixo de 960 px, 1 coluna abaixo de 360 px. ---- */
#modulo-financeiro .faixa-resposta-n { font-size: var(--txt-titulo); overflow: visible; text-overflow: clip; white-space: nowrap; letter-spacing: -.01em; }
#modulo-financeiro .faixa-resposta-n .cm-txt { font-family: inherit; }
#modulo-financeiro .faixa-resposta-sub { font-size: var(--txt-densa); }
@media (max-width: 960px) {
    .fin-quatro { grid-template-columns: 1fr 1fr; }
    .fin-quatro .faixa-resposta-cel { border-top: 1px solid var(--borda); border-inline-start: 1px solid var(--borda); padding: 12px 14px; }
    .fin-quatro .faixa-resposta-cel:nth-child(-n+2) { border-top: 0; }
    .fin-quatro .faixa-resposta-cel:nth-child(odd) { border-inline-start: 0; }
}
@media (max-width: 360px) {
    .fin-quatro { grid-template-columns: 1fr; }
    .fin-quatro .faixa-resposta-cel { border-inline-start: 0 !important; border-top: 1px solid var(--borda) !important; }
    .fin-quatro .faixa-resposta-cel:first-child { border-top: 0 !important; }
}

/* ---- Pede ação (nome neutro, para os três módulos) ---- */
.cm-pede-acao { background: var(--sup-1); border: 1px solid var(--borda); border-radius: var(--raio-2); box-shadow: var(--sombra-1); padding: 10px 20px 10px; margin-bottom: 16px; }
.cm-pede-acao:empty { display: none; }
.cm-pede-acao-tit { display: flex; align-items: center; gap: 8px; font-size: var(--txt-destaque); font-weight: var(--peso-forte); color: var(--tinta-1); margin-bottom: 4px; flex-wrap: wrap; }
.cm-pede-acao-dica { font-size: var(--txt-densa); font-weight: var(--peso-corpo); color: var(--tinta-3); }
.cm-pede-linha { display: grid; grid-template-columns: 112px minmax(0, 1fr) 150px 190px; align-items: center; gap: 14px; min-height: 32px; padding: 2px 0; border-top: 1px solid var(--linha-sutil); }
.cm-pede-acao-tit + .cm-pede-linha { border-top: 0; }
.cm-pede-tipo { display: inline-flex; align-items: center; gap: 8px; font-size: var(--txt-corpo); font-weight: var(--peso-enfase); color: var(--tinta-2); white-space: nowrap; }
.cm-pede-txt { font-size: var(--txt-corpo); color: var(--tinta-1); line-height: 1.35; min-width: 0; }
.cm-pede-dono { font-size: var(--txt-densa); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-pede-ir { color: var(--acao); justify-content: flex-end; padding-right: 2px; background: none; border-color: transparent; }
.cm-pede-ir:hover:not(:disabled) { color: var(--acao); background: var(--acao-suave); }
.cm-pede-ir .ico, .cm-pede-mais .ico { width: 13px; height: 13px; }
.cm-pede-linha--extra { display: none; }
.cm-pede-acao.aberta .cm-pede-linha--extra { display: grid; }
.cm-pede-mais { display: inline-flex; margin-top: 2px; color: var(--acao); padding-left: 0; background: none; border-color: transparent; }
.cm-pede-acao.aberta .cm-pede-mais { display: none; }
.cm-pede-vazio { margin: 4px 0 2px; font-size: var(--txt-corpo); color: var(--tinta-2); }
@media (max-width: 1100px) { .cm-pede-linha { grid-template-columns: 104px minmax(0, 1fr) 190px; } .cm-pede-dono { display: none; } }

/* ---- Blocos, resumo e tabelas do módulo ---- */
#modulo-financeiro .table-header { gap: 12px; flex-wrap: wrap; }
#modulo-financeiro .table-header h3 { display: flex; align-items: center; gap: 8px; font-size: var(--txt-destaque); }
#modulo-financeiro .table-header h3 .ico { width: 15px; height: 15px; color: var(--tinta-3); }
.fin-cab-tit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.fin-cab-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.fin-sel { min-height: var(--alt-padrao); max-width: 260px; }
.fin-barra { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--linha-sutil); flex-wrap: wrap; }
.fin-seg-n { margin-left: 6px; font-weight: var(--peso-corpo); color: var(--tinta-3); }
.cm-seg button[aria-pressed="true"] .fin-seg-n { color: var(--tinta-2); }
.fin-resumo { margin: 0; padding: 10px 20px; font-size: var(--txt-corpo); color: var(--tinta-2); border-bottom: 1px solid var(--linha-sutil); line-height: 1.5; }
.fin-resumo b { color: var(--tinta-1); font-weight: var(--peso-enfase); }
.fin-resumo--pe { border-bottom: 0; border-top: 1px solid var(--linha-sutil); color: var(--tinta-3); font-size: var(--txt-densa); }
.fin-resumo--pe:empty { display: none; }
.fin-sep { margin: 0 8px; color: var(--tinta-4); }
.fin-sub { margin-top: 2px; font-size: var(--txt-densa); color: var(--tinta-3); line-height: 1.4; font-weight: var(--peso-corpo); }
.fin-l1 { font-weight: var(--peso-enfase); color: var(--tinta-1); }
.fin-n { color: var(--tinta-3); font-weight: var(--peso-corpo); }
.fin-zero { color: var(--tinta-4); }
.fin-data { font-weight: var(--peso-enfase); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-c-data { width: 84px; }
.fin-c-mais { width: 44px; text-align: right; }
.fin-c-acao { text-align: right; white-space: nowrap; }
.fin-acoes { display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.fin-grupo { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--peso-enfase); }
.fin-grupo-tot { margin-left: 4px; font-weight: var(--peso-corpo); color: var(--tinta-2); }
.fin-tab { width: 100%; }
.fin-tab tbody td { padding: 9px 12px; font-size: var(--txt-corpo); color: var(--tinta-1); vertical-align: top; }
.fin-tab thead th { padding: 9px 12px; }
.fin-tab th.num, .fin-tab td.num { text-align: right; white-space: nowrap; }
.fin-tab th:first-child, .fin-tab td:first-child { padding-left: 20px; }
.fin-tab th:last-child, .fin-tab td:last-child { padding-right: 20px; }
.fin-tab .cm-chip, .fin-tab .cm-ausencia { vertical-align: middle; white-space: nowrap; }
.fin-tab tr.linha-clicavel { cursor: pointer; }
.fin-tab tr.linha-clicavel:hover td { background: var(--sup-2); }
.fin-linha-vazia td { padding-top: 12px !important; padding-bottom: 12px !important; color: var(--tinta-2); }
.fin-linha-total td { font-weight: var(--peso-forte); background: var(--sup-2); border-top: 1px solid var(--borda); }
.fin-tab-lanc .fin-ent, .fin-tab-lanc .fin-sai { width: 120px; }
.fin-tab-lanc .filtro-multi-painel { min-width: 210px; }
.fin-c-barra { width: 26%; }
.fin-minibarra { height: 8px; border-radius: 999px; background: var(--sup-3); overflow: hidden; }
.fin-minibarra i { display: block; height: 100%; background: var(--tinta-3); border-radius: 999px; }
.fin-bloco-tit { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 20px 6px; border-top: 1px solid var(--borda); }
.fin-bloco-tit h4 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: var(--txt-destaque); font-weight: var(--peso-forte); color: var(--tinta-1); }
.fin-bloco-tit h4 .ico { width: 14px; height: 14px; color: var(--tinta-3); }
.fin-tab-pag, .fin-tab-rec { border-top: 1px solid var(--borda); }
.fin-tab-aging td:first-child { white-space: nowrap; }
.fin-rot-cel { display: none; }
.fin-so-cel { display: none; }
.fin-nota-cel { display: none; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--txt-corpo); color: var(--tinta-3); }
.fin-nota-cel .ico { width: 14px; height: 14px; flex: none; }
.fin-so-cel-inline { display: none; }

/* ---- Visão geral: fluxo, o ano, painel e posição ---- */
.fin-par { display: grid; gap: 0; }
.fin-par--fluxo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.fin-par--fluxo > .fin-graf-bloco { border-right: 1px solid var(--linha-sutil); }
.fin-par--ano { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.fin-par--ano > div:first-child { border-right: 1px solid var(--linha-sutil); }
.fin-graf-cab { padding: 14px 20px 4px; }
.fin-graf-cab h3 { margin: 0; font-size: var(--txt-destaque); font-weight: var(--peso-forte); color: var(--tinta-1); }
.fin-graf-n { display: block; margin-top: 3px; font-size: var(--txt-densa); color: var(--tinta-3); }
.fin-graf-corpo { position: relative; height: 240px; padding: 8px 16px 14px 12px; }
.fin-graf-corpo--fluxo { height: 300px; padding-top: 14px; }
.fin-graf-corpo--painel { height: 230px; }
.fin-graf-corpo--cc { height: 280px; }
.fin-graf-corpo canvas { width: 100% !important; height: 100% !important; }
.fin-notas { margin: 0; padding: 4px 20px 16px 36px; font-size: var(--txt-corpo); color: var(--tinta-2); line-height: 1.5; }
.fin-notas li + li { margin-top: 3px; }
.fin-notas li:empty { display: none; }
.fin-tab-alta { overflow-x: auto; }
.fin-tab-fluxo tbody td { padding-top: 6px; padding-bottom: 6px; white-space: nowrap; }
.fin-tab-fluxo td:first-child, .fin-tab-fluxo th:first-child { padding-left: 16px; }
.fin-linha-falta td { box-shadow: inset 0 2px 0 var(--st-critico); }
.fin-linha-falta td:first-child { color: var(--st-critico); font-weight: var(--peso-enfase); }
.fin-tab-ano td { padding-top: 10px !important; padding-bottom: 10px !important; }
.fin-tab-ano td:first-child { color: var(--tinta-2); }
.fin-tab-ano td.num { white-space: normal; }
.fin-rodape-bloco { padding: 8px 14px 12px; }
.fin-painel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin-painel-cel { min-width: 0; border-top: 1px solid var(--linha-sutil); }
.fin-painel-cel:nth-child(-n+2) { border-top: 0; }
.fin-painel-cel:nth-child(odd) { border-right: 1px solid var(--linha-sutil); }
.fin-caixa-corpo { padding: 14px 20px 18px; }
.fin-caixa-corpo .kpi-grid { margin-bottom: 12px; }
.fin-caixa-corpo .mini-kpi-grid { margin-bottom: 12px; }
#modulo-financeiro .kpi-value, #modulo-financeiro .mini-kpi-value { font-size: var(--txt-titulo); white-space: nowrap; overflow: visible; text-overflow: clip; }

/* ---- Detalhes recolhidos ---- */
.fin-detalhes details > summary { list-style: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 12px 20px; cursor: pointer; font-size: var(--txt-corpo); font-weight: var(--peso-enfase); color: var(--tinta-1); }
.fin-detalhes details > summary::-webkit-details-marker { display: none; }
.fin-detalhes details > summary .ico { width: 13px; height: 13px; color: var(--tinta-3); align-self: center; transition: transform .12s; }
.fin-detalhes details[open] > summary .ico { transform: rotate(90deg); }
.fin-det-resumo { font-weight: var(--peso-corpo); color: var(--tinta-3); }
.fin-det-corpo { padding: 0 20px 14px 43px; font-size: var(--txt-corpo); color: var(--tinta-2); }
.fin-det-p { margin: 0 0 10px; line-height: 1.5; }
.fin-det-p .ico { width: 13px; height: 13px; }
.fin-det-linha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 5px 0; border-top: 1px solid var(--linha-sutil); }
.fin-form-linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 10px; }
.fin-form-col { display: flex; flex-direction: column; gap: 4px; }
.fin-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: var(--txt-densa); font-weight: var(--peso-enfase); color: var(--tinta-2); }
.fin-campo .cm-campo { min-height: var(--alt-padrao); box-sizing: border-box; font-weight: var(--peso-corpo); }
.fin-campo small { font-size: var(--txt-densa); font-weight: var(--peso-corpo); color: var(--tinta-3); }
.fin-mapeamento { margin-top: 8px; padding: 12px; border: 1px dashed var(--borda-forte); border-radius: var(--raio-1); }

/* ---- A pagar: malote como bloco ---- */
.fin-malote { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--borda); background: var(--sup-2); }
.fin-malote-txt { flex: 1 1 auto; font-size: var(--txt-corpo); color: var(--tinta-1); line-height: 1.45; min-width: 0; }
.fin-malote-txt b { font-weight: var(--peso-forte); }
.fin-malote-alerta { color: var(--st-atencao); font-weight: var(--peso-enfase); }
.fin-malote .cm-btn { flex: none; }
.fin-malote--vazio { background: transparent; }
.fin-malote-hist > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 20px; cursor: pointer; font-size: var(--txt-corpo); font-weight: var(--peso-enfase); color: var(--tinta-2); border-top: 1px solid var(--linha-sutil); }
.fin-malote-hist > summary::-webkit-details-marker { display: none; }
.fin-malote-hist > summary .ico { width: 13px; height: 13px; }
.fin-malote-hist[open] > summary .ico { transform: rotate(90deg); }

/* ---- Conciliação ---- */
.fin-extrato { font-weight: var(--peso-medio); letter-spacing: .01em; }
.fin-prop { display: flex; gap: 6px; align-items: flex-start; color: var(--tinta-2); line-height: 1.4; max-width: 460px; }
.fin-prop b { color: var(--tinta-1); }
.fin-prop .fin-sub { display: block; }
.fin-prop-ok { color: var(--st-ok); flex: none; }
.fin-prop-ok .ico { width: 14px; height: 14px; margin-top: 1px; }
.fin-confere { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--st-ok); font-weight: var(--peso-enfase); }
.fin-confere .ico { width: 13px; height: 13px; flex: none; }
.fin-tab-check { margin: 8px 0 4px; }
.fin-tab-check td:first-child, .fin-tab-check th:first-child { padding-left: 4px !important; width: 32px; }
.fin-tab-check input { accent-color: var(--acao); width: 16px; height: 16px; }

/* ---- Resultado: DRE que abre ---- */
.fin-res-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fin-res-cab .fin-res-explica { margin-left: auto; }
.fin-dre-rola { overflow-x: auto; }
.fin-tab-dre { min-width: 0; width: 100%; }
.fin-tab-dre tbody td { padding-top: 7px; padding-bottom: 7px; white-space: nowrap; font-size: var(--txt-corpo); }
.fin-tab-dre thead th { font-size: var(--txt-densa); }
.fin-tab-dre td:first-child, .fin-tab-dre th:first-child { position: sticky; left: 0; z-index: 1; background: var(--sup-1); min-width: 270px; }
.fin-dre--menos td { color: var(--tinta-2); }
.fin-dre--forte td { font-weight: var(--peso-forte); background: var(--sup-2); }
.fin-dre--forte td:first-child { background: var(--sup-2); }
.fin-dre--info td { color: var(--tinta-3); font-style: italic; }
.fin-dre-ano { font-weight: var(--peso-enfase); }
.fin-dre-clicavel { cursor: pointer; }
.fin-dre-clicavel:hover td { background: var(--sup-2); }
.fin-dre-abre { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.fin-dre-abre .ico { width: 13px; height: 13px; color: var(--acao); transition: transform .12s; }
.fin-dre-abre[aria-expanded="true"] .ico { transform: rotate(90deg); }
.fin-tab-dre tr.fin-dre-det > td { padding: 0 !important; background: var(--sup-2); white-space: normal; }
.fin-tab-dre tr.fin-dre-det > td:first-child { position: static; }
.fin-dre-det-corpo { max-width: 780px; padding: 10px 20px 14px 38px; position: sticky; left: 0; }
.fin-dre-det-cab { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 2px 0 8px; color: var(--tinta-3); font-size: var(--txt-corpo); }
.fin-dre-det-cab b { color: var(--tinta-1); }
.fin-dre-cat, .fin-dre-quem { background: var(--sup-1); border: 1px solid var(--borda); border-radius: var(--raio-1); margin-bottom: 6px; }
.fin-dre-quem { margin: 0 10px 6px 26px; }
.fin-dre-cat > summary, .fin-dre-quem > summary { list-style: none; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 130px; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: var(--txt-corpo); }
.fin-dre-cat > summary::-webkit-details-marker, .fin-dre-quem > summary::-webkit-details-marker { display: none; }
.fin-dre-cat > summary > .ico, .fin-dre-quem > summary > .ico { width: 13px; height: 13px; color: var(--acao); transition: transform .12s; }
.fin-dre-cat[open] > summary > .ico, .fin-dre-quem[open] > summary > .ico { transform: rotate(90deg); }
.fin-dre-nome { font-weight: var(--peso-enfase); color: var(--tinta-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-dre-n { color: var(--tinta-3); font-size: var(--txt-densa); }
.fin-dre-v { text-align: right; font-weight: var(--peso-enfase); color: var(--tinta-1); white-space: nowrap; }
.fin-dre-lancs { margin: 0 12px 8px 38px; border-top: 1px solid var(--linha-sutil); }
.fin-dre-lanc { display: grid; grid-template-columns: 76px minmax(0, 1fr) 130px; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--linha-sutil); font-size: var(--txt-corpo); }
.fin-dre-lanc > .cm-num { text-align: right; white-space: nowrap; }
.fin-dre-data { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.fin-dre-cc { margin-left: 8px; color: var(--tinta-3); font-size: var(--txt-densa); }
.fin-explica-corpo { font-size: var(--txt-corpo); color: var(--tinta-2); line-height: 1.55; }
.fin-explica-corpo p { margin: 0 0 10px; }
.fin-explica-corpo b { color: var(--tinta-1); }

/* ---- Escala única de 4 tamanhos no módulo (pedido do Diretor, 14/10):
   corpo --txt-corpo, rótulo --txt-densa, título de seção --txt-destaque,
   número dos cartões --txt-titulo. Nada de letra crescendo e diminuindo. ---- */
#modulo-financeiro :where(p, li, td, label, summary, input, select, textarea) { font-size: var(--txt-corpo); }
#modulo-financeiro :where(th, small) { font-size: var(--txt-densa); }
#modulo-financeiro .section-title, #modulo-financeiro .chart-container h3 { font-size: var(--txt-destaque); }
#modulo-financeiro .kpi-label, #modulo-financeiro .mini-kpi-label, #modulo-financeiro .kpi-delta { font-size: var(--txt-densa); }
#modulo-financeiro .cm-chip { font-size: var(--txt-densa); }
#modulo-financeiro .btn, #modulo-financeiro .filtro-multi-btn, #modulo-financeiro .cm-seg button, #modulo-financeiro .cm-btn { font-size: var(--txt-corpo); }
#modulo-financeiro .cm-btn--sm, #modulo-financeiro .btn-sm { font-size: var(--txt-densa); }
#modulo-financeiro table th, #modulo-financeiro .faixa-resposta-rot { font-size: var(--txt-densa); }
#modulo-financeiro .fin-tab-dre tbody td { font-size: var(--txt-corpo); }

/* ---- Tablet e celular ---- */
@media (max-width: 1100px) {
    .fin-par--fluxo, .fin-par--ano { grid-template-columns: 1fr; }
    .fin-par--fluxo > .fin-graf-bloco, .fin-par--ano > div:first-child { border-right: 0; border-bottom: 1px solid var(--linha-sutil); }
    .fin-painel { grid-template-columns: 1fr; }
    .fin-painel-cel { border-right: 0 !important; border-top: 1px solid var(--linha-sutil) !important; }
    .fin-painel-cel:first-child { border-top: 0 !important; }
    /* Listas viram cartões de 2 linhas: tabela larga não cabe. */
    .tab-m thead { display: none; }
    .tab-m, .tab-m tbody { display: block; width: 100%; }
    .tab-m tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a b" "c d" "e e"; gap: 3px 12px; padding: 10px 14px; border-bottom: 1px solid var(--linha-sutil); }
    .tab-m td { display: block; padding: 0 !important; height: auto !important; border: 0 !important; min-width: 0; background: transparent !important; box-shadow: none !important; }
    .tab-m td.m-a { grid-area: a; }
    .tab-m td.m-b { grid-area: b; text-align: right; font-weight: var(--peso-enfase); }
    .tab-m td.m-b:empty { display: none; }
    .tab-m td.m-c { grid-area: c; display: flex; gap: 6px; align-items: baseline; color: var(--tinta-2); flex-wrap: wrap; }
    .tab-m td.m-c .fin-sub { margin: 0; }
    .tab-m td.m-d { grid-area: d; text-align: right; }
    .tab-m td.m-e { grid-area: e; text-align: left; margin-top: 4px; }
    .tab-m td.m-e .fin-acoes { justify-content: flex-start; }
    .tab-m td.m-e .cm-btn { min-height: 36px; }
    .tab-m td.m-x { display: none; }
    .tab-m tr.cm-linha-grupo, .tab-m tr.fin-linha-vazia { display: block; padding: 0; }
    .tab-m tr.cm-linha-grupo td, .tab-m tr.fin-linha-vazia td { display: block; padding: 8px 14px !important; }
    .tab-m td.fin-c-data { width: auto; }
    .fin-tab-para .fin-ent:empty, .fin-tab-para .fin-sai:empty, .fin-tab-lanc .fin-ent:empty, .fin-tab-lanc .fin-sai:empty { display: none; }
    .fin-tab-contas tr { grid-template-areas: "a d" "c b"; }
    .fin-tab-contas td.m-c { display: block; }
    .fin-rot-cel { display: inline; font-weight: var(--peso-corpo); color: var(--tinta-3); font-size: var(--txt-densa); }
    .fin-so-cel-inline { display: block; }
    .tab-m .fin-c-mais { display: none; }
    .fin-tab-lanc tr.linha-clicavel { cursor: pointer; }
}
/* Até 1024 px a barra de abas vira o seletor (painel.css, ~1987), que já
   lista os itens do Mais; o botão Mais sairia por cima do seletor. */
@media (max-width: 1024px) {
    .fin-aba-mais { display: none; }
    #modulo-financeiro .fin-abas { padding-right: 0; }
}
@media (max-width: 640px) {
    .fin-so-pc, .fin-so-pc-bloco { display: none !important; }
    .fin-so-cel { display: block; }
    .fin-nota-cel.fin-so-cel { display: flex; }
    .fin-pergunta { margin-bottom: 8px; }
    .fin-pergunta-per { display: none; }
    .fin-frase { padding: 10px 14px 10px; margin-bottom: 10px; }
    .fin-frase-regra { display: none; }
    .fin-quatro { margin-bottom: 10px; }
    .cm-pede-acao { padding: 8px 14px 8px; }
    .cm-pede-acao-dica { display: none; }
    .cm-pede-linha { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tipo bt" "txt txt" "dono dono"; row-gap: 2px; padding: 7px 0; }
    .cm-pede-tipo { grid-area: tipo; font-weight: var(--peso-forte); color: var(--tinta-1); }
    .cm-pede-txt { grid-area: txt; }
    .cm-pede-dono { grid-area: dono; display: block; }
    .cm-pede-linha .cm-btn { grid-area: bt; min-height: 36px; min-width: 0; }
    #modulo-financeiro .table-header { padding: 12px 14px; }
    .fin-cab-acoes { margin-left: 0; width: 100%; }
    .fin-barra { padding: 10px 14px; }
    .fin-resumo { padding: 10px 14px; }
    .fin-seg-pr { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .fin-seg-pr button { flex-direction: column; align-items: flex-start; height: auto; padding: 6px 10px; line-height: 1.3; }
    .fin-seg-pr .fin-seg-n { margin-left: 0; }
    .fin-malote { flex-direction: column; align-items: stretch; padding: 12px 14px; }
    .fin-malote .cm-btn { min-height: var(--alt-toque); justify-content: center; }
    .fin-bloco-tit { padding: 12px 14px 6px; }
    .fin-res-cab .fin-res-explica { margin-left: 0; }
    .fin-det-corpo { padding: 0 14px 12px; }
    .fin-det-linha { grid-template-columns: 1fr 1fr; }
    .fin-dre-det-corpo { padding: 10px 12px; }
    .fin-dre-quem { margin-left: 10px; }
    .fin-dre-lancs { margin-left: 12px; }
    .fin-dre-cat > summary, .fin-dre-quem > summary { grid-template-columns: 16px minmax(0, 1fr) auto; }
    .fin-dre-cat > summary .fin-dre-n, .fin-dre-quem > summary .fin-dre-n { display: none; }
    .fin-dre-lanc { grid-template-columns: 1fr auto; }
    .fin-dre-lanc .fin-dre-data { grid-column: 1 / -1; }
    .fin-caixa-corpo { padding: 12px 14px; }
    /* Quem me deve, por idade: cada cliente vira cartão; só as faixas com
       valor aparecem, com o nome escrito. Nada rola para o lado. */
    .fin-tab-aging thead, .fin-tab-cartao thead { display: none; }
    .fin-tab-aging, .fin-tab-aging tbody, .fin-tab-cartao, .fin-tab-cartao tbody { display: block; width: 100%; }
    .fin-tab-aging tbody tr, .fin-tab-cartao tbody tr { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--linha-sutil); }
    .fin-tab-aging td, .fin-tab-cartao td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 !important; border: 0 !important; background: transparent !important; position: static !important; text-align: right; }
    .fin-tab-cartao td.fin-c-barra, .fin-tab-cartao td.fin-cel-vazia { display: none; }
    .fin-tab-aging td:first-child, .fin-tab-cartao td:first-child { display: block; padding: 0 !important; font-weight: var(--peso-enfase); text-align: left; }
    .fin-tab-aging td[data-rot]::before, .fin-tab-cartao td[data-rot]::before { content: attr(data-rot); color: var(--tinta-2); text-align: left; font-size: var(--txt-densa); font-weight: var(--peso-corpo); }
    .fin-tab-aging td.fin-aging-zero { display: none; }
    #aba-fin-contas .cm-tab-rola:has(.fin-tab-aging) { overflow: visible; }
    .cm-tab-rola > table.fin-tab-aging { min-width: 0; }
    .cm-tab-rola > table.fin-tab-aging > tbody > tr > td:first-child { position: static; box-shadow: none; background: transparent; }
    /* Lançamentos no celular: busca e "Mais filtros"; o resto abre no toque. */
    #aba-fin-lancamentos .table-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    #aba-fin-lancamentos .table-actions #btnAbrirPastaMes, #aba-fin-lancamentos .table-actions .btn-secondary { display: none; }
    #aba-fin-lancamentos .table-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
}
/* ---- Revisão da Helena, Beatriz e Lauro (16/10/2026, mesmo ciclo) ---- */
/* 1 e 11. DRE cabe a 1366: células compactas; abaixo disso rola com a
   primeira coluna fixa. Rótulos à esquerda, sem quebra, um recuo por nível. */
#modulo-financeiro .fin-tab-dre th, #modulo-financeiro .fin-tab-dre td { padding-left: 5px; padding-right: 5px; }
/* Rótulo com largura fixa: quebra, se precisar, alinhado à esquerda (nunca centralizado). */
#modulo-financeiro .fin-tab-dre td.fin-dre-rot, #modulo-financeiro .fin-tab-dre th.fin-dre-rot { text-align: left; white-space: normal; min-width: 200px; width: 215px; max-width: 215px; }
#modulo-financeiro .fin-tab-dre .fin-dre-abre { display: inline-flex; align-items: flex-start; }
#modulo-financeiro .fin-tab-dre .fin-dre-abre .ico { margin-top: 3px; flex: none; }
#modulo-financeiro .fin-tab-dre .fin-dre-n0 td.fin-dre-rot { padding-left: 12px; }
#modulo-financeiro .fin-tab-dre .fin-dre-n1 td.fin-dre-rot { padding-left: 28px; }
#modulo-financeiro .fin-tab-dre .fin-dre-n2 td.fin-dre-rot { padding-left: 44px; }
#modulo-financeiro .fin-tab-dre th:last-child, #modulo-financeiro .fin-tab-dre td:last-child { padding-right: 14px; }
.fin-dre-sem-seta { display: inline-block; width: 19px; flex: none; }
.fin-dre-abre { text-align: left; }
.fin-dre-futuro { min-width: 34px; }
/* 2. O quadro do detalhe mede a largura visível (finAjustarDetalheDRE). */
.fin-dre-det-corpo { box-sizing: border-box; max-width: none; padding: 10px 16px 14px 28px; }
/* 3. Conciliação no celular: cada coisa na sua linha; os botões por último. */
@media (max-width: 1100px) {
    .tab-m.fin-tab-para tbody tr { grid-template-areas: "a b" "c c" "d d" "e e"; }
    .tab-m.fin-tab-para td.m-d { grid-area: d; text-align: left; }
    .tab-m.fin-tab-para td.m-e { grid-area: e; }
}
/* Saldo no banco na lista de 2 linhas: o rótulo fica cinza, o valor em --tinta-1 (Helena). */
@media (max-width: 1100px) { .tab-m.fin-tab-contas td.m-c { color: var(--tinta-1); } }
/* 5. Sinal escrito na lista de 2 linhas. */
.fin-sinal-lista { display: none; }
@media (max-width: 1100px) { .fin-sinal-lista { display: inline; } }
/* 8. Lançamentos: busca, período e situação numa linha; o resto no painel. */
.fin-busca { flex: 1 1 280px; min-width: 240px; }
.fin-periodo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--txt-corpo); color: var(--tinta-2); }
.fin-periodo .cm-campo { min-height: var(--alt-padrao); padding: 0 8px; box-sizing: border-box; }
.fin-mais-filtros-painel { background: var(--sup-2); }
.fin-mais-filtros-painel[hidden] { display: none; }
.fin-mais-filtros[aria-expanded="true"] { background: var(--sup-2); }
@media (max-width: 640px) {
    .fin-busca { flex-basis: 100%; min-width: 0; }
    .fin-periodo { flex: 1 1 40%; }
    .fin-periodo .cm-campo { flex: 1 1 auto; min-width: 0; }
    .fin-seg-lanc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; box-sizing: border-box; }
    .fin-seg-lanc button { flex-direction: column; align-items: center; justify-content: center; height: auto; min-height: 40px; padding: 4px 2px; line-height: 1.25; min-width: 0; }
    .fin-seg-lanc .fin-seg-n { margin-left: 0; }
    .fin-mais-filtros { width: 100%; justify-content: center; }
    .fin-mais-filtros-painel .cm-campo, .fin-mais-filtros-painel .filtro-multi { flex: 1 1 100%; max-width: none; }
}
/* 4. Detalhes da Visão geral: uma linha por item, valor em --tinta-1. */
.fin-det-linha b { color: var(--tinta-1); font-weight: var(--peso-enfase); }
.fin-det-linha .cm-num { color: var(--tinta-1); }
.fin-det-linha--2 { grid-template-columns: minmax(0, 1fr) auto; }
.fin-det-total { font-weight: var(--peso-enfase); }
@media (max-width: 640px) { .fin-det-linha--2 { grid-template-columns: minmax(0, 1fr) auto; } }
/* 12. Resultado no celular: as três linhas do ano; o mês a mês fica no computador. */
.fin-res-cel .fin-nota-cel { display: flex; }
@media (max-width: 640px) { #finResMes .fin-dre-bloco { display: none; } }
/* 15. Pede ação: dono e prazo alinhados; no celular, subtítulos à esquerda. */
.cm-pede-linha .cm-pede-ir { justify-self: end; }
@media (max-width: 640px) {
    #modulo-financeiro .table-header { flex-direction: column; align-items: flex-start; }
    #modulo-financeiro .table-header .lb-cab-n, #modulo-financeiro .fin-graf-n { text-align: left; white-space: normal; margin-left: 0; padding-left: 0; }
    .cm-pede-linha .cm-pede-ir { justify-self: end; }
}
/* <<< FINANCEIRO-ONDA2 */

/* >>> MEDICAO-ANALITICA (19/10/2026, js/obramedanalitica.js)
   Planilha analítica de medição (item > frente > local > aplicação) e a meta
   de medição. Só tokens; o recuo do nível vem de --man-nivel na célula. */
.man-vistas { display: flex; justify-content: flex-start; margin-bottom: var(--esp-3); }
.man-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-3); }
.man-cab-txt { flex: 1 1 420px; min-width: 0; }
.man-tit { font-size: var(--txt-destaque); color: var(--tinta-1); margin-bottom: 2px; }
.man-cab-acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
.man-kpis { padding: 14px 16px; margin-bottom: var(--esp-3); display: flex; gap: 22px; flex-wrap: wrap; }
.man-nota { display: flex; align-items: flex-start; gap: var(--esp-2); padding: 8px 12px; margin-bottom: var(--esp-3);
    border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--sup-1); box-shadow: inset 3px 0 0 var(--borda-forte);
    font-size: var(--txt-corpo); color: var(--tinta-2); line-height: 1.45; }
.man-nota > .ico { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.man-nota span .ico { width: 12px; height: 12px; vertical-align: -1px; }
.man-nota--ok { box-shadow: inset 3px 0 0 var(--st-ok); } .man-nota--ok > .ico { color: var(--st-ok); }
.man-nota--atencao { box-shadow: inset 3px 0 0 var(--st-atencao); } .man-nota--atencao > .ico { color: var(--st-atencao); }
.man-nota--info { box-shadow: inset 3px 0 0 var(--st-info); } .man-nota--info > .ico { color: var(--st-info); }
.man-nota-lista { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.man-nota-item { position: relative; padding-left: 12px; }
.man-nota-item::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--tinta-4); }
.man-nota-item--atencao::before { background: var(--st-atencao); }
.man-nota-item--ok::before { background: var(--st-ok); }
.man-nota-item--info::before { background: var(--st-info); }
.man-salvas { display: flex; align-items: center; gap: var(--esp-2) var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-3); }
.man-salvas-lista { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; min-width: 0; }
.man-meta-salva { display: inline-flex; align-items: center; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--sup-1); max-width: 100%; }
.man-meta-salva--aberta { border-color: var(--st-info); box-shadow: 0 0 0 2px var(--st-info-tinta); }
.man-meta-abrir { display: inline-flex; align-items: center; gap: 6px; padding: 5px 4px 5px 10px; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: var(--txt-densa); color: var(--tinta-1); min-width: 0; text-align: left; }
.man-meta-abrir b { font-weight: var(--peso-enfase); overflow-wrap: anywhere; }
.man-meta-abrir .cm-num { color: var(--tinta-3); white-space: nowrap; }
.man-meta-abrir .ico { width: 13px; height: 13px; color: var(--tinta-3); flex: none; }
.man-meta-arq { margin-right: 2px; }
.man-filtros { display: flex; align-items: flex-end; gap: var(--esp-2) var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-2); }
.man-busca { position: relative; flex: 1 1 260px; min-width: 200px; }
.man-busca > .ico { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--tinta-3); pointer-events: none; }
.man-busca .cm-campo { width: 100%; box-sizing: border-box; padding-left: 30px; min-height: var(--alt-padrao); }
.man-sel { display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 0 1 200px; }
.man-sel .cm-campo { min-height: var(--alt-padrao); width: 100%; box-sizing: border-box; }
.man-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--txt-corpo); color: var(--tinta-2); min-height: var(--alt-padrao); white-space: nowrap; cursor: pointer; }
.man-filtros-acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin-left: auto; }
.man-tab-wrap { border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--sup-1); max-height: 68vh; overflow: auto; }
.man-tab { min-width: 1180px; }
.man-tab thead th { position: sticky; top: 0; z-index: 2; background: var(--sup-2); padding-top: 7px; padding-bottom: 7px; }
.man-tab thead th.man-c1 { z-index: 3; }
.man-tab tbody td { height: auto; padding-top: 5px; padding-bottom: 5px; }
.man-tab .man-c1 { min-width: 340px; max-width: 460px; }
.man-tab tfoot td { background: var(--sup-2); border-top: 1px solid var(--borda-forte); padding: 7px var(--pad-compacto); }
.man-l--total td { font-weight: var(--peso-enfase); color: var(--tinta-1); }
.man-tab-wrap > table > tfoot > tr > td:first-child, .man-pv .cm-tab-rola > table > tfoot > tr > td:first-child { position: sticky; left: 0; z-index: 1; background: var(--sup-2); box-shadow: 1px 0 0 var(--borda); }
.man-l--etapa td { background: var(--sup-3); color: var(--tinta-2); font-size: var(--txt-rotulo); font-weight: var(--peso-enfase);
    text-transform: uppercase; letter-spacing: .06em; padding: 6px var(--pad-compacto); }
.man-tab-wrap > table > tbody > tr.man-l--etapa > td:first-child { background: var(--sup-3); }
.man-l--item > td { border-top: 1px solid var(--borda); }
.man-l--item .man-nome { font-weight: var(--peso-enfase); color: var(--tinta-1); }
.man-l--frente .man-nome { color: var(--tinta-1); }
.man-l--aplic .man-nome, .man-l--local .man-nome { color: var(--tinta-2); }
.man-l--aplic > td, .man-l--info > td { background: var(--sup-2); }
.man-tab-wrap > table > tbody > tr.man-l--aplic > td:first-child, .man-tab-wrap > table > tbody > tr.man-l--info > td:first-child { background: var(--sup-2); }
.man-l--meta > td.man-c-meta, .man-l--meta > td:last-child { background: var(--st-info-tinta); }
.man-serv { display: flex; align-items: flex-start; gap: 6px; padding-left: calc(var(--man-nivel, 0) * 18px); min-width: 0; }
.man-caret, .man-esp { flex: none; width: 22px; height: 22px; }
.man-caret { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--raio-1); background: transparent; color: var(--tinta-3); cursor: pointer; padding: 0; }
.man-caret:hover { background: var(--sup-3); color: var(--tinta-1); }
.man-caret:focus-visible { outline: 2px solid var(--acao); outline-offset: 1px; }
.man-caret .ico { width: 14px; height: 14px; }
.man-chk-no { flex: none; margin: 4px 2px 0 0; width: 15px; height: 15px; cursor: pointer; accent-color: var(--st-info); }
.man-rot { min-width: 0; flex: 1; padding-top: 2px; }
.man-rot-l1 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; line-height: 1.4; }
.man-rot-l1 .cm-chip { font-size: var(--txt-rotulo); padding: 1px 6px; white-space: nowrap; }
.man-rot-l1 .cm-chip .ico { width: 10px; height: 10px; vertical-align: -1px; margin-right: 2px; }
.man-cod { color: var(--tinta-3); font-weight: var(--peso-enfase); white-space: nowrap; }
.man-nome { overflow-wrap: anywhere; }
.man-nome--curto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.man-sub { font-size: var(--txt-densa); color: var(--tinta-3); margin-top: 1px; overflow-wrap: anywhere; }
.man-pct { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 64px; }
.man-pct-b { display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--sup-3); overflow: hidden; }
.man-pct-b i { display: block; height: 100%; background: var(--st-info); border-radius: 2px; }
.man-pct-b i.man-pct--ok { background: var(--st-ok); }
.man-pct-b i.man-pct--acima { background: var(--st-critico); }
.man-c-meta { min-width: 112px; }
.man-meta-inp { width: 100px; box-sizing: border-box; text-align: right; }
.man-meta-inp--cheio { border-color: var(--st-info); font-weight: var(--peso-enfase); }
.man-meta-vazio { font-size: var(--txt-densa); white-space: nowrap; }
.man-info-txt { font-size: var(--txt-densa); font-style: italic; }
.man-barra-meta { position: sticky; bottom: 0; z-index: 4; margin-top: var(--esp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap;
    padding: 10px 14px; border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--sup-1); box-shadow: 0 -4px 14px rgba(0, 0, 0, .06); }
.man-barra-txt { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--txt-corpo); color: var(--tinta-2); min-width: 0; flex: 1 1 320px; }
.man-barra-txt .ico { flex: none; width: 16px; height: 16px; color: var(--st-info); }
.man-barra-txt b { color: var(--tinta-1); font-weight: var(--peso-enfase); }
.man-barra-acoes { display: flex; gap: var(--esp-2); flex-wrap: wrap; }
/* prévia */
.man-pv-campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--esp-3); align-items: end; margin-bottom: var(--esp-3); }
.man-pv-rs { grid-column: 1 / -1; }
.man-pv-kpis { display: flex; gap: 22px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-1); background: var(--sup-2); margin-bottom: var(--esp-2); }
.man-pv-sec { margin: var(--esp-4) 0 var(--esp-1); }
.man-pv-tab { min-width: 520px; }
.man-pv-tab tbody td { height: auto; padding-top: 5px; padding-bottom: 5px; }
.man-pv-item td { font-weight: var(--peso-enfase); color: var(--tinta-1); border-top: 1px solid var(--borda); }
.man-pv-frente td:first-child { padding-left: 22px; }
.man-pv-aplic td { color: var(--tinta-3); font-size: var(--txt-densa); }
.man-pv-aplic td:first-child { padding-left: 40px; }
.man-pv-obs { margin-top: 4px; font-weight: var(--peso-corpo); font-size: var(--txt-densa); color: var(--st-critico); }
.man-pv-obs .cm-chip .ico { width: 10px; height: 10px; vertical-align: -1px; margin-right: 2px; }
.man-pv-tab tfoot td { padding: 7px var(--pad-compacto); border-top: 1px solid var(--borda-forte); }
@media (max-width: 760px) {
    .man-tab { min-width: 760px; }
    .man-tab .man-larga { display: none; }
    .man-tab .man-c1 { min-width: 230px; max-width: 260px; }
    .man-tab-wrap { max-height: none; }
    .man-filtros-acoes { margin-left: 0; }
    .man-sel { flex: 1 1 140px; }
    .man-pv-campos { grid-template-columns: 1fr; }
    .man-meta-inp { width: 84px; min-height: 36px; font-size: 16px; }
    .man-chk-no { width: 20px; height: 20px; }
    .man-caret { width: 30px; height: 30px; }
    .man-barra-acoes { width: 100%; }
    .man-barra-acoes .cm-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}
.man-so-cel { display: none; }
/* celular (cmCelular, 640 px): fica Serviço, Saldo e Meta; as outras colunas saem do HTML; previsto, medido e R$ descem para dentro das células */
@media (max-width: 640px) {
    .cm-tab-rola > table.man-tab { min-width: 0; width: 100%; }
    .man-tab { table-layout: fixed; }
    .man-tab thead th.num { width: 86px; }
    .man-tab thead th.man-c-meta { width: 88px; }
    .man-tab .man-cel-x { display: none; }
    .man-tab .man-so-cel { display: block; }
    .man-tab .man-c1 { min-width: 0; max-width: none; width: auto; }
    .man-tab td.num, .man-tab th.num { padding-left: 4px; padding-right: 4px; }
    .man-tab th { white-space: normal; }
    .man-serv { padding-left: calc(var(--man-nivel, 0) * 10px); gap: 4px; }
    .man-pct { min-width: 44px; } .man-pct-b { width: 44px; }
    .man-c-meta { min-width: 0; }
    .man-meta-inp { width: 76px; }
    .man-nome--curto { -webkit-line-clamp: 3; }
    .man-kpis { gap: 14px; }
    .man-pv .cm-tab-rola > table.man-pv-tab { min-width: 0; width: 100%; }
    .man-pv-tab .man-cel-x { display: none; }
    .man-pv-tab .man-so-cel { display: block; }
    .man-pv-tab th, .man-pv-tab td { white-space: normal; overflow-wrap: anywhere; }
    .man-pv-tab .cm-chip { white-space: nowrap; display: inline-block; margin-top: 2px; }
    .man-pv-frente td:first-child { padding-left: 14px; } .man-pv-aplic td:first-child { padding-left: 24px; }
}
/* <<< MEDICAO-ANALITICA */