/* SOLUXIS | Interface. Sem framework: um arquivo de estilo, um de comportamento. */
:root{
  --azul:#0b3d5c; --azul-claro:#12608c; --verde:#1e8e5a; --ambar:#b8860b; --vermelho:#b3261e;
  --tinta:#16202a; --tinta-fraca:#5b6b7a; --linha:#dce3ea; --fundo:#f4f7fa; --papel:#fff;
  /* marca: grafite da faixa lateral e laranja do raio da logo */
  --grafite:#33393f; --grafite-esc:#1e2226; --laranja:#ed9200;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;color:var(--tinta);background:var(--fundo)}
a{color:var(--azul-claro)}
h1,h2,h3{margin:0 0 .6rem;font-weight:600;letter-spacing:-.01em}
h1{font-size:1.35rem}h2{font-size:1.05rem}h3{font-size:.9rem;color:var(--tinta-fraca);text-transform:uppercase;letter-spacing:.06em}

/* ------------------------------------------------------------------ login */
#login{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,var(--grafite),var(--grafite-esc))}
#login form{background:var(--papel);padding:2rem;border-radius:10px;width:340px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
#login .logo{display:block;width:190px;margin-bottom:.5rem}
#login .sub{color:var(--tinta-fraca);font-size:.8rem;margin-bottom:1.4rem}

/* ------------------------------------------------------------------ chrome */
#app{display:none;grid-template-columns:212px 1fr;min-height:100vh}
nav{background:var(--grafite);color:#c8ced4;padding:1rem .6rem;display:flex;flex-direction:column}
nav .logo{display:block;width:calc(100% - 1.4rem);max-width:158px;margin:.35rem .7rem 1.1rem}
nav button{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;padding:.55rem .7rem;
  border-radius:6px;cursor:pointer;font-size:.88rem}
nav button:hover{background:rgba(255,255,255,.09)}
nav button.ativo{background:#fff;color:var(--grafite);font-weight:600;box-shadow:inset 3px 0 0 var(--laranja)}
nav .rodape{margin-top:auto;font-size:.72rem;color:#9aa2a9;padding:.7rem;border-top:1px solid rgba(255,255,255,.14)}
/* 8B.4 — o menu passou a ter areas. O titulo do grupo e' rotulo, nao botao:
 * ele nao recebe hover nem foco, porque nao leva a lugar nenhum. */
nav .menu-grupo{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:#7f8a93;
  padding:.85rem .7rem .3rem;font-weight:600}
nav .menu-grupo:first-child{padding-top:0}
/* O MAIN NÃO É MAIS O ROLADOR HORIZONTAL DA PÁGINA.
 *
 * `overflow-x:auto` aqui era a causa raiz do "layout espremido": qualquer
 * conteúdo largo — uma tabela de dez colunas, uma faixa de onze abas — em vez
 * de ser contido, empurrava o `main` e a PÁGINA INTEIRA ganhava barra
 * horizontal. No celular isso aparece como corte lateral, componente meio
 * invisível e rolagem que ninguém pediu.
 *
 * Agora o largo se resolve DENTRO do componente que o produziu: tabela rola na
 * própria caixa, abas viram seletor. `min-width:0` é o que permite ao main
 * encolher abaixo do conteúdo em vez de ser empurrado por ele. */
main{padding:1.2rem 1.5rem 3rem;min-width:0}
.topo{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
/* `min-width:0` porque o padrão de um filho de flex é `min-width:auto` — ele
 * se recusa a encolher abaixo do próprio conteúdo. Um título longo empurrava a
 * faixa inteira, e com ela a página. */
.topo .cresce{flex:1 1 260px;min-width:0}
.topo .cresce h1{overflow-wrap:break-word}

/* ------------------------------------------------------------------ blocos */
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:8px;padding:1rem;margin-bottom:1rem}
/* A GRADE PEDE UM MÍNIMO QUE A TELA PODE NÃO TER.
 *
 * `minmax(300px,1fr)` é uma exigência: numa tela de 375px, dentro de um cartão
 * com recuo, a coluna de 300px não cabe — e o excesso vazava para fora do
 * viewport. `min(300px,100%)` diz a mesma intenção sem exigir o impossível:
 * trezentos pixels quando houver, a largura toda quando não houver.
 *
 * `.grade>*{min-width:0}` pela mesma razão do `.topo .cresce`: filho de grid
 * nasce `min-width:auto` e não encolhe. É por aí que uma tabela larga dentro de
 * um cartão empurrava a grade, o main e a página. */
.grade{display:grid;gap:.8rem}
.grade>*{min-width:0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(165px,100%),1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
/* A JORNADA — e o defeito que a homologação de desktop encontrou.
 *
 * `.passo-s1` é uma linha flex, desenhada para a jornada de Suprimentos, onde
 * o passo é [círculo numerado][bloco com título e nota]: dois filhos, e o
 * segundo cresce.
 *
 * A jornada do ENCERRAMENTO tem outra marcação — `<b>` e `<div class="nota">`
 * soltos, sem o bloco que os envolve. Como filhos diretos de uma linha flex,
 * eles se dividiam a largura LADO A LADO, e com seis passos numa faixa cada
 * descrição herdava um oitavo da tela. Daí a quebra palavra por palavra num
 * desktop de 1440px, com espaço sobrando.
 *
 * A correção não muda marcação nenhuma: `<b>` filho DIRETO do passo ocupa a
 * linha inteira e empurra a nota para baixo. Na jornada de Suprimentos o `<b>`
 * está aninhado, então a regra não o alcança e a linha continua como era.
 *
 * A base subiu de 150px para 220px: com 150px o navegador espremia seis passos
 * numa faixa só. Com 220px cabem três ou quatro, e cada frase tem onde caber. */
.jornada-s1{display:flex;flex-wrap:wrap;align-items:stretch;gap:.5rem;margin:.6rem 0}
.passo-s1{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.5rem .7rem;
  background:var(--papel);border:1px solid var(--linha);border-radius:8px;
  flex:1 1 220px;min-width:0}
.passo-s1>b{flex:1 1 100%;min-width:0;overflow-wrap:break-word}
.passo-s1>.nota{flex:1 1 100%;min-width:0;overflow-wrap:break-word;line-height:1.45}
.passo-s1>div{min-width:0}
.passo-s1.feito{border-color:var(--verde);box-shadow:inset 3px 0 0 var(--verde)}
.passo-s1-n{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;
  place-items:center;background:var(--linha);color:var(--tinta-fraca);font-weight:600;font-size:.8rem}
.passo-s1.feito .passo-s1-n{background:var(--verde);color:#fff}
.passo-s1-seta{color:var(--tinta-fraca);flex:0 0 auto}
@media(max-width:720px){.passo-s1-seta{display:none}}
.kpi{background:var(--papel);border:1px solid var(--linha);border-left:4px solid var(--azul-claro);
  border-radius:8px;padding:.7rem .9rem}
.kpi .rot{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-fraca)}
.kpi .val{font-size:1.28rem;font-weight:600;margin:.15rem 0}
.kpi .obs{font-size:.74rem;color:var(--tinta-fraca)}
.kpi.ok{border-left-color:var(--verde)} .kpi.at{border-left-color:var(--ambar)} .kpi.rr{border-left-color:var(--vermelho)}

/* ------------------------------------------------------------------ tabela */
table{width:100%;border-collapse:collapse;font-size:.83rem}
th{text-align:left;font-weight:600;color:var(--tinta-fraca);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.05em;padding:.45rem .5rem;border-bottom:2px solid var(--linha);white-space:nowrap;
  position:sticky;top:0;background:var(--papel)}
td{padding:.42rem .5rem;border-bottom:1px solid var(--linha);vertical-align:top}
tbody tr:hover{background:#f0f6fb}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rolagem{max-height:520px;overflow:auto;border:1px solid var(--linha);border-radius:8px;background:var(--papel)}
.vazio{padding:2rem;text-align:center;color:var(--tinta-fraca)}
/* Linha desligada continua legivel e editavel: e' de la que se religa. */
tr.apagado{opacity:.45}

/* --------------------------------------------------------------- controles */
label{display:block;font-size:.74rem;color:var(--tinta-fraca);margin-bottom:.15rem}
input,select,textarea{width:100%;padding:.42rem .55rem;border:1px solid var(--linha);border-radius:6px;
  font:inherit;background:#fff;color:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul-claro);outline-offset:-1px;border-color:transparent}
.campo{margin-bottom:.7rem}
button{font:inherit}
.bt{background:var(--azul);color:#fff;border:0;border-radius:6px;padding:.48rem 1rem;cursor:pointer;font-weight:500}
.bt:hover{background:var(--azul-claro)}
.bt.sec{background:#fff;color:var(--azul);border:1px solid var(--linha)}
.bt.sec:hover{background:#eef4f9}
.bt.mini{padding:.22rem .55rem;font-size:.76rem}
.bt:disabled{opacity:.5;cursor:not-allowed}

/* ------------------------------------------------------------------ sinais */
.tag{display:inline-block;padding:.1rem .45rem;border-radius:10px;font-size:.7rem;font-weight:600;white-space:nowrap}
.tag.ok{background:#e2f4ea;color:#14653b}
.tag.at{background:#fdf3d8;color:#7a5a00}
.tag.rr{background:#fbe3e1;color:#8c1d18}
.tag.n{background:#eaeff4;color:var(--tinta-fraca)}
.neg{color:var(--vermelho)} .pos{color:var(--verde)}

/* ------------------------------------------------------------------ funil */
.funil{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.3rem}
.coluna{min-width:186px;flex:1;background:#eaf0f5;border-radius:8px;padding:.5rem}
.coluna h4{margin:0 0 .1rem;font-size:.78rem}
.coluna .tot{font-size:.7rem;color:var(--tinta-fraca);margin-bottom:.5rem}
.ficha{background:#fff;border:1px solid var(--linha);border-left:3px solid var(--azul-claro);border-radius:6px;
  padding:.45rem .55rem;margin-bottom:.4rem;cursor:pointer;font-size:.78rem}
.ficha:hover{border-left-color:var(--verde)}
.ficha b{display:block;font-size:.8rem}
.ficha span{color:var(--tinta-fraca);font-size:.72rem}

/* ------------------------------------------------------------------ barras */
.barra{height:7px;background:#e6ecf2;border-radius:4px;overflow:hidden;margin-top:.2rem}
.barra i{display:block;height:100%;background:var(--azul-claro)}
.barra i.ok{background:var(--verde)} .barra i.at{background:var(--ambar)} .barra i.rr{background:var(--vermelho)}

/* ------------------------------------------------------------------ modal */
#modal{display:none;position:fixed;inset:0;background:rgba(10,25,38,.55);z-index:20;padding:2rem;overflow:auto}
/* 760px foi a largura de quando todo modal era formulario de meia duzia de
 * campos. O detalhe do pedido traz SETE colunas — item, natureza, EAP, quantidade,
 * preco, total e classificacao —, e "MATERIAIS / [HOMOLOGACAO] Cabo solar 6mm2"
 * nao cabe em coluna espremida. O `min` mantem o respeito a' viewport: em tela
 * estreita a caixa volta a ocupar o espaco disponivel, e nao 920px fixos. */
#modal .caixa{background:#fff;border-radius:10px;max-width:min(920px,100%);margin:0 auto;padding:1.3rem}

/* TABELA DENTRO DE MODAL NAO ESCAPA DA CAIXA — E O CABECALHO NAO QUEBRA A' TOA.
 *
 * A primeira versao desta correcao trocou o `th{white-space:nowrap}` global por
 * `normal` e usou `overflow-wrap:anywhere` nas celulas. O estouro acabou, e
 * apareceu o efeito colateral: `anywhere` entra no calculo da largura MINIMA da
 * coluna, entao o navegador passou a achar que toda coluna podia encolher ate'
 * uma letra. Com as colunas espremidas, "NATUREZA", "EAP / ATIVIDADE" e
 * "VENCIMENTO" quebravam em duas linhas mesmo com espaco de sobra na caixa.
 *
 * `break-word` quebra a palavra que nao cabe sozinha e NAO participa do calculo
 * da largura minima. Com ele, cada coluna volta a pedir a largura da sua maior
 * palavra, o cabecalho cabe numa linha, e o texto longo continua quebrando nos
 * espacos, dentro da celula.
 *
 * Abaixo de 860px o cabecalho volta a poder quebrar: ali a largura ja' e' curta
 * de verdade, e duas linhas de rotulo sao melhores que rolagem lateral. */
#modalCorpo table.tb{width:100%;table-layout:auto}
#modalCorpo table.tb th{white-space:nowrap;vertical-align:bottom}
#modalCorpo table.tb th,#modalCorpo table.tb td{overflow-wrap:break-word}
/* Recuo menor que o da tela cheia: dentro da caixa, cada 0,1rem de folga por
 * celula e' largura que o conteudo deixa de ter. */
#modalCorpo table.tb th,#modalCorpo table.tb td{padding:.4rem .42rem}
#modalCorpo table.tb th:first-child,#modalCorpo table.tb td:first-child{padding-left:0}
#modalCorpo table.tb th:last-child,#modalCorpo table.tb td:last-child{padding-right:0}
#modalCorpo table.tb th.num,#modalCorpo table.tb td.num{white-space:nowrap;width:1%;
  overflow-wrap:normal}
/* A nota da celula (unidade, saldo, apropriado, EAP) e' apoio: nao pode esticar
 * a coluna nem forcar o cabecalho a quebrar por causa dela. */
#modalCorpo table.tb td .nota{overflow-wrap:break-word;font-size:.72rem;line-height:1.3}
@media(max-width:860px){
  #modalCorpo table.tb th{white-space:normal}
}
/* Ultimo recurso, e so' onde a largura ja' nao da': rolagem HORIZONTAL na
 * tabela, e nao na pagina. O modal inteiro nunca rola de lado. */
#modalCorpo .rolagem{max-width:100%;overflow-x:auto}
#modal{overflow-x:hidden}
#aviso{position:fixed;right:1rem;bottom:1rem;z-index:30;display:flex;flex-direction:column;gap:.4rem}
#aviso div{background:var(--tinta);color:#fff;padding:.6rem .9rem;border-radius:6px;font-size:.83rem;
  box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:380px}
#aviso div.erro{background:var(--vermelho)}
#aviso div.ok{background:var(--verde)}
.erro-campo{color:var(--vermelho);font-size:.76rem;margin-top:.3rem}
/* O aviso do login e' a unica pista que a pessoa tem quando o Entrar nao entra.
   Em .76rem, embaixo do botao, ele passava batido — aconteceu em 20/08/2026.
   Aqui ele e' um bloco de leitura, com barra lateral colorida por estado. */
.alerta-login{font-size:.88rem;line-height:1.4;margin:0 0 .9rem;padding:.7rem .8rem .7rem .9rem;
  border-radius:7px;text-align:left;border:1px solid;border-left-width:4px}
.alerta-login[hidden]{display:none}
.alerta-login .titulo{font-weight:600;display:block;margin-bottom:.15rem}
.alerta-login.erro{background:#fdecec;border-color:#f0b6b2;border-left-color:var(--vermelho);color:#7d1a15}
.alerta-login.atencao{background:#fdf6e3;border-color:#ead9a8;border-left-color:var(--ambar);color:#6d5205}
.alerta-login.info{background:#eef4f9;border-color:#c5d8e6;border-left-color:var(--azul-claro);color:#0b3d5c}
#login .bt[aria-busy="true"]{opacity:.75;cursor:progress}
/* Carimbo da versao da pagina: discreto, mas suficiente para descobrir cache
   velho sem abrir ferramenta nenhuma. */
.carimbo-versao{margin-top:.8rem;font-size:.68rem;color:var(--tinta-fraca);text-align:center;letter-spacing:.02em}
.nota{font-size:.76rem;color:var(--tinta-fraca);line-height:1.5}

/* ------------------------------------------------------ cronograma SOLUXIS V1 */
.topo-crono{align-items:flex-end}.seletor-crono{width:min(320px,100%)}
.abas-crono{display:flex;gap:.25rem;margin:-.35rem 0 1rem;border-bottom:1px solid var(--linha)}
.abas-crono button{border:0;background:transparent;color:var(--tinta-fraca);padding:.55rem .85rem;cursor:pointer}
.abas-crono button.ativo{color:var(--azul);font-weight:700;border-bottom:3px solid var(--laranja)}
.faixa-versao{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;background:#eef4f9;border:1px solid #cfdeea;
  border-radius:8px;padding:.65rem .8rem;margin-bottom:.8rem}
.selo-v1{font-size:.65rem;font-weight:800;letter-spacing:.08em;background:var(--azul);color:#fff;border-radius:4px;padding:.2rem .4rem}
.dimensoes-crono{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-bottom:.8rem}
.dimensoes-crono div{background:#fff;border:1px solid var(--linha);border-radius:7px;padding:.55rem .7rem}
.dimensoes-crono div.ativo{border-color:var(--azul-claro);box-shadow:inset 0 3px var(--azul-claro)}
.dimensoes-crono span,.dimensoes-crono b{display:block}.dimensoes-crono span{font-size:.68rem;text-transform:uppercase;color:var(--tinta-fraca)}
.dimensoes-crono b{font-size:.82rem;margin-top:.15rem}.resumo-v1{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:1rem}
.filtros-v1{display:grid;grid-template-columns:minmax(240px,2fr) minmax(140px,1fr) minmax(140px,1fr);gap:.7rem;padding-bottom:.3rem}
.grade-crono-v1{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(560px,2fr);gap:1rem;align-items:start}
.painel-eap,.painel-atividades{min-width:0}.arvore-eap,.arvore-eap ul{list-style:none;margin:0;padding:0}
.nao-disponivel{color:var(--tinta-fraca);font-size:.68rem;font-weight:700}.chips-qualidade{display:flex;flex-wrap:wrap;gap:.45rem}
.chips-qualidade button{border:0;cursor:pointer}.atividade-v1 small{display:block;color:var(--texto-fraco);margin-top:.2rem}
.gantt-v1{overflow:auto}.gantt-cab{display:flex;justify-content:space-between;margin:1rem 0 .4rem 8rem;color:var(--texto-fraco);font-size:.75rem}
.gantt-linha{display:grid;grid-template-columns:7rem minmax(600px,1fr);gap:1rem;align-items:center;min-height:24px;font-size:.75rem}
.gantt-linha>div{height:12px;background:var(--fundo);position:relative;border-radius:6px}.gantt-linha i{position:absolute;height:100%;background:var(--azul);border-radius:5px;min-width:4px}
.gantt-linha i.marco{width:10px!important;height:10px;transform:rotate(45deg);border-radius:1px;background:var(--amarelo)}
.eap-item{display:flex;align-items:center;gap:.35rem;padding:.4rem .3rem .4rem calc(.3rem + var(--nivel) * 1rem);border-bottom:1px solid var(--linha)}
.eap-item:hover{background:#f0f6fb}.eap-expande{width:1.25rem;padding:0;border:0;background:transparent;color:var(--azul);cursor:pointer}
.eap-expande:disabled{cursor:default}.eap-codigo{font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums}
.eap-desc{flex:1;min-width:0}.atividade-nome{display:block;margin-top:.1rem}.tabela-v1{max-height:610px}
.estado-v1{padding:3rem 1.2rem}.estado-v1 h2{margin-top:.7rem}.estado-v1 p{max-width:680px;margin:.6rem auto 1rem}
.acoes-modal{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.6rem}.rodape-v1{padding:.7rem 0 1rem}

/* Workspace V1: uma linha compartilhada por EAP, tabela e Gantt. */
.cabecalho-projeto-v1 h1{font-size:1.65rem;margin:.3rem 0 .15rem}.identidade-projeto{display:flex;align-items:center;gap:.55rem;color:var(--azul)}
.topo.compacto{margin-bottom:.55rem}.qualidade-v1{padding:.75rem .85rem}.filtro-qualidade{display:flex;align-items:center;gap:.45rem;
  border:1px solid var(--linha);border-radius:16px;background:#f7f9fb;color:var(--tinta-fraca);padding:.3rem .55rem;cursor:pointer;font-size:.7rem}
.filtro-qualidade b{background:#e4eaf0;color:var(--tinta);border-radius:10px;padding:.05rem .38rem;font-variant-numeric:tabular-nums}
.filtro-qualidade:hover,.filtro-qualidade.ativo{border-color:var(--laranja);background:#fff7e8;color:#704800}
.filtro-qualidade.ativo b{background:var(--laranja);color:#fff}.workspace-v1{padding:0;overflow:hidden}
.barra-workspace{display:flex;align-items:flex-end;gap:.45rem;padding:.65rem .75rem;border-bottom:1px solid var(--linha);background:#fff}
.busca-eap{width:min(360px,50%)}.barra-workspace .nota{margin-left:auto;padding-bottom:.3rem}.workspace-scroll{height:clamp(420px,62vh,720px);
  overflow:auto;overscroll-behavior:contain;background:#fff}.workspace-conteudo{min-width:1960px}.cab-workspace,.linha-workspace{
  display:grid;grid-template-columns:310px 930px 720px}.cab-workspace{position:sticky;top:0;z-index:8;height:46px;background:#eef3f7;
  border-bottom:2px solid #bac7d2;color:var(--tinta-fraca);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.cab-eap{position:sticky;left:0;z-index:10;background:#e8eef3;padding:.9rem .65rem;border-right:2px solid #bac7d2}
.cab-operacional{display:grid;grid-template-columns:90px 90px 70px 120px 90px 150px 110px 110px 100px;align-items:center}
.cab-operacional span{padding:.3rem .45rem}.cab-gantt{position:relative;border-left:2px solid #bac7d2;padding:.25rem .45rem;overflow:hidden}
.cab-gantt>b{position:absolute;top:.2rem;left:.45rem}.cab-gantt span{position:absolute;bottom:.2rem;transform:translateX(-50%);white-space:nowrap;font-size:.62rem}
.linha-workspace{height:38px;border-bottom:1px solid #e7ebef;font-size:.74rem}.linha-workspace:hover{background:#f5f9fc}
.linha-workspace.oculto-hierarquia,.linha-workspace.oculto-filtro{display:none}.cel-eap{position:sticky;left:0;z-index:4;display:grid;
  grid-template-columns:20px 54px minmax(0,1fr) auto;align-items:center;gap:.25rem;padding:0 .45rem 0 calc(.35rem + var(--nivel) * .72rem);
  background:#fff;border-right:2px solid #d0dae2}.linha-workspace:hover .cel-eap{background:#f5f9fc}.cel-eap>b{color:var(--azul);white-space:nowrap}
.cel-eap>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.linha-workspace.fase .cel-eap{background:#e9f1f7;font-weight:700}
.linha-workspace.agrupador .cel-eap{background:#f3f6f8;font-weight:600}.tipo-eap{font-style:normal;font-size:.56rem;text-transform:uppercase;
  border-radius:8px;padding:.08rem .3rem;background:#e9edf1;color:var(--tinta-fraca)}.tipo-eap.marco{color:#765000;background:#fff0c7}
.cel-operacional{display:grid;grid-template-columns:90px 90px 70px 120px 90px 150px 110px 110px 100px;align-items:center}
.cel-operacional>span{padding:0 .45rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cel-operacional em,.sem-data-gantt{
  color:var(--ambar);font-style:normal;font-size:.66rem;font-weight:700}.cel-gantt{position:relative;border-left:2px solid #d0dae2;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 79px,#edf1f4 80px);overflow:hidden}
.barra-gantt{position:absolute;top:13px;height:12px;min-width:4px;border-radius:4px;background:var(--azul-claro);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.barra-gantt.marco{width:10px!important;height:10px;transform:rotate(45deg);border-radius:1px;background:var(--laranja)}
.linha-hoje{position:absolute;z-index:2;top:0;bottom:0;width:1px;background:var(--vermelho);opacity:.7}.sem-data-gantt{position:absolute;left:.45rem;top:10px}
.legenda-workspace{display:flex;gap:1rem;flex-wrap:wrap;padding:.45rem .75rem;background:#f7f9fb;border-top:1px solid var(--linha);font-size:.68rem;color:var(--tinta-fraca)}
.amostra{display:inline-block;width:18px;height:7px;background:var(--azul-claro);border-radius:3px}.amostra.marco{width:8px;height:8px;background:var(--laranja);transform:rotate(45deg)}
.cab-saneamento{border-bottom:1px solid var(--linha);margin-bottom:1rem}.cab-saneamento h2{margin-top:.4rem}.bloco-original,.bloco-proposta{padding:.8rem;
  border:1px solid var(--linha);border-radius:8px;margin-bottom:.8rem}.bloco-original{background:#f4f6f8}.bloco-original textarea,.bloco-original input{background:#e9edf1}
.mostrar-removidos{display:flex;align-items:center;gap:.3rem;margin:0;font-size:.7rem;white-space:nowrap}.mostrar-removidos input{width:auto}
.linha-workspace.estado-inativo,.linha-workspace.estado-fora_do_escopo,.linha-workspace.estado-nao_aplicavel{opacity:.62}
.linha-workspace.estado-inativo .cel-eap,.linha-workspace.estado-fora_do_escopo .cel-eap,.linha-workspace.estado-nao_aplicavel .cel-eap{background:#f1f2f3;text-decoration:line-through}
.acao-linha{font-size:.68rem;padding:.2rem;width:94px}.previa-relatorio{min-height:110px;border:1px solid var(--linha);border-radius:8px;padding:.8rem;background:#f7f9fb}
.relatorio-mini>span{margin-left:.35rem}.relatorio-mini p{margin:.5rem 0}.mini-atividades{max-height:160px;overflow:auto;background:#fff;padding:.5rem;border-radius:5px}
.previa-gerencial{background:#fff;border:1px solid #cdd9e2;border-radius:8px;overflow:hidden;color:#243746;box-shadow:0 8px 24px rgba(16,47,79,.08)}
.previa-gerencial>header{display:flex;justify-content:space-between;gap:1rem;align-items:center;background:#102f4f;color:#fff;padding:1rem 1.2rem}
.previa-gerencial header small{letter-spacing:.08em;color:#b9d7e7}.previa-gerencial header h3{margin:.2rem 0;font-size:1.15rem}.previa-gerencial header p{margin:0;color:#d8e6ee}
.previa-gerencial header>strong{background:#ef7d22;padding:.5rem .7rem;border-radius:5px;white-space:nowrap;font-size:.75rem}
.avisos-previa{padding:.55rem .8rem 0}
.previa-grid{display:grid;grid-template-columns:minmax(180px,.75fr) minmax(340px,1.8fr);gap:.75rem;padding:.8rem}.previa-grid section{border:1px solid #d5e0e7;border-radius:6px;padding:.7rem}
.previa-gerencial h4{margin:0 0 .55rem;color:#102f4f;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.previa-gerencial dl{margin:0}.previa-gerencial dl div{margin-bottom:.65rem}
.previa-gerencial dt,.indicadores-previa span{font-size:.62rem;text-transform:uppercase;color:#667887}.previa-gerencial dd{margin:.1rem 0;font-weight:700;font-size:.78rem}
.curva-vazia svg{display:block;width:100%;height:145px}.grade-curva path{fill:none;stroke:#d6e0e7;stroke-width:1}.grade-curva text{fill:#667887;font-size:11px}.corte-curva{stroke:#ef7d22;stroke-width:2;stroke-dasharray:5 4}.texto-corte{fill:#ef7d22;font-size:10px;font-weight:700}
.mensagem-curva{fill:#fff;stroke:#cdd9e2}.texto-curva{fill:#667887;text-anchor:middle;font-size:12px;font-weight:700}.legenda-curva{display:flex;gap:.8rem;flex-wrap:wrap;color:#667887;font-size:.62rem}
.indicadores-previa{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;padding:0 .8rem .8rem}.indicadores-previa div{background:#f1f5f8;border:1px solid #d5e0e7;border-radius:5px;padding:.55rem}.indicadores-previa b{display:block;margin-top:.15rem;font-size:.75rem}
.previa-gerencial>footer{display:flex;gap:1rem;flex-wrap:wrap;background:#edf3f7;padding:.55rem .8rem;color:#526775;font-size:.68rem}
@media(max-width:760px){.previa-grid{grid-template-columns:1fr}.indicadores-previa{grid-template-columns:repeat(2,1fr)}.previa-gerencial>header{align-items:flex-start;flex-direction:column}}
.selecao-fotos-relatorio{border:1px solid var(--linha);border-radius:8px;margin:.7rem 0;background:#f7f7f7}.alternador-fotos{display:flex;gap:.65rem;align-items:center;padding:.7rem;cursor:pointer}.alternador-fotos input{width:18px;height:18px;accent-color:var(--laranja)}
.alternador-fotos span{display:flex;flex-direction:column}.alternador-fotos small{color:var(--tinta-fraca);font-size:.68rem;margin-top:.15rem}.fotos-relatorio{border-top:1px solid var(--linha);padding:.7rem}.fotos-relatorio.oculto{display:none}
.cab-fotos-relatorio{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem;font-size:.72rem}.grade-fotos-relatorio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;max-height:340px;overflow:auto}
.foto-opcao{position:relative;border:2px solid transparent;background:#fff;border-radius:7px;padding:.35rem;cursor:pointer}.foto-opcao:has(input:checked){border-color:var(--laranja);box-shadow:0 0 0 2px rgba(239,125,34,.12)}.foto-opcao input{position:absolute;top:.55rem;left:.55rem;accent-color:var(--laranja)}
.foto-opcao img{display:block;width:100%;height:95px;object-fit:cover;border-radius:5px;background:#ddd}.foto-opcao span{display:flex;flex-direction:column;padding:.35rem .15rem 0}.foto-opcao small{color:var(--tinta-fraca);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.grade-fotos-relatorio{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Fluxo RDO V1: separa operação, revisão e efeito sobre avanço. */
.fluxo-rdo-v1{border-left:4px solid var(--azul-claro)}.fluxo-rdo-v1 h2{margin:.25rem 0}
.estados-rdo-v1{display:grid;grid-template-columns:repeat(4,minmax(135px,1fr));gap:.55rem;margin:.8rem 0}
.estados-rdo-v1 div{border:1px solid var(--linha);border-radius:7px;padding:.55rem;background:#f7f9fb}
.estados-rdo-v1 span,.estados-rdo-v1 b{display:block}.estados-rdo-v1 span{font-size:.65rem;text-transform:uppercase;color:var(--tinta-fraca)}
.estados-rdo-v1 b{font-size:.8rem;margin-top:.15rem}.acoes-fluxo-v1{display:flex;gap:.45rem;flex-wrap:wrap;margin:.75rem 0}
.aviso-aprovado-v1{background:#e2f4ea;color:#14653b;border:1px solid #a9d9bd;border-radius:7px;padding:.65rem;margin:.7rem 0;font-weight:600}
/* O que falta configurar antes de alguem esbarrar na recusa. Amarelo de aviso,
   nao vermelho de erro: nada quebrou — falta decidir quem responde. */
.aviso-lacuna-rdo{background:#fdf3e3;color:#7a4a08;border:1px solid #e8cf9f;border-radius:7px;
  padding:.6rem .8rem;margin:.7rem 0;font-weight:600}
.aviso-lacuna-rdo a{color:#7a4a08;text-decoration:underline}
/* A EXCECAO PRECISA PARECER EXCECAO. Um administrador que atravessa a matriz nao
   pode clicar num botao igual ao de quem tem a funcao: e' o que separa
   contingencia declarada de atalho silencioso. */
.acoes-fluxo-v1 .bt.excecao{background:#fdf3e3;color:#7a4a08;border:1px dashed #c98a1e}
.acoes-fluxo-v1 .bt.excecao:hover{background:#f8e8cd}
.matriz-rdo{margin:.6rem 0}
.matriz-rdo summary{cursor:pointer;font-size:.78rem;color:var(--tinta-fraca)}
.matriz-rdo table{margin-top:.5rem}
/* AS ACOES DA LINHA — a progressao do processo, onde ela acontece.
   Cabem varias na mesma celula porque o estado permite mais de um ato: o pedido
   aprovado recebe material E aceita a nota do fornecedor, e escolher por quem
   opera qual dos dois vem primeiro seria decidir a rotina dele. */
.acoes-linha{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end}
.acoes-linha .bt{white-space:nowrap}
/* A ARVORE DA EAP. O recuo por nivel e' o que faz a hierarquia ser lida sem
   desenho: quem olha a coluna de codigo ve' o galho, e nao uma lista plana. */
.eap-arvore td{vertical-align:top}
/* Elemento inativado continua VISIVEL, e apagado. Some-lo esconderia a decisao
   de que aquilo nao se faz nesta obra — e essa decisao e' informacao. */
.eap-arvore tr.eap-inativo{opacity:.5}
.eap-arvore tr.eap-inativo td:nth-child(2){text-decoration:line-through}
/* A LISTA INTEIRA, e nao um "e mais 97". Um template oficial tem cem folhas, e
   cada uma e' trabalho a fazer: cortar a lista em oito esconderia o tamanho da
   tarefa de quem precisa justamente dimensiona-la. */
.lista-materializar{max-height:150px;display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.4rem}
/* PREPARAR EAP. A tabela e' alta de proposito: cento e cinco elementos cabem
   numa rolagem so', e paginar obrigaria a decidir em pedacos o que e' uma
   decisao unica — quais galhos do molde esta obra executa. */
.prep-tabela{max-height:62vh}
.prep-tabela thead th{position:sticky;top:0;background:var(--fundo);z-index:1}
/* A linha marcada precisa se distinguir da inativa: uma e' escolha em curso, a
   outra e' decisao ja' tomada. */
.eap-arvore tr.prep-marcado{background:#eef4fb}
.eap-arvore tr.prep-marcado.eap-inativo{background:#f3f1ea}
.prep-check{cursor:pointer}
/* A VERSAO VIGENTE precisa saltar da lista: numa tabela de Base, R1 e R2, a
   pergunta que se faz primeiro e' "qual delas vale hoje". */
.versao-vigente{background:#eef7f1}
.versao-vigente td:first-child{border-left:3px solid var(--verde)}
/* Enquanto a estrutura versionada nao for a fonte do avanco, o numero que ela
   mostra nao pode ser lido como avanco da obra. O aviso fica acima dos
   indicadores porque e' condicao de leitura deles, nao rodape. */
.aviso-preparacao-v1{background:#fdf3e3;color:#7a4a08;border:1px solid #e8cf9f;border-radius:7px;
  padding:.6rem .8rem;margin:.7rem 0;font-size:.78rem;font-weight:600}
/* ---- conferencia: legado x estrutura versionada ---- */
/* As duas fontes lado a lado, e a oficial precisa ganhar a disputa visual:
   quem bate o olho tem que saber de onde vem o numero da obra. */
/* TRES FONTES, e nao duas: a oficial (contrato), a em preparacao e a
   legada aposentada. Com duas colunas a terceira caia sozinha numa
   linha, e sobrar espaco ao lado dela dava ao legado um destaque que
   ele justamente perdeu. */
.conf-fontes{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:.8rem 0}
.conf-fonte{border:1px solid var(--linha);border-radius:9px;padding:.75rem .9rem;background:#fff}
.conf-fonte.oficial{border-color:#a9d9bd;background:#f4fbf7}
.conf-fonte.preparacao{border-color:#e8cf9f;background:#fdfaf4}
.conf-fonte b{display:block;margin-top:.35rem;font-size:.9rem}
.conf-fonte-num{font-size:1.5rem;font-weight:700;margin:.15rem 0;letter-spacing:-.02em}
.conf-fonte.oficial .conf-fonte-num{color:#14653b}
.conf-fonte.preparacao .conf-fonte-num{color:#7a4a08}
.conf-ausencias-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:.6rem 0}
.conf-ausencias-grade>div{border:1px solid var(--linha);border-radius:7px;padding:.55rem .7rem}
.conf-ausencias-grade span{display:block;font-size:.64rem;text-transform:uppercase;color:var(--tinta-fraca)}
.conf-ausencias-grade b{display:block;font-size:1.25rem;margin:.1rem 0}
.conf-ausencias-grade small{display:block;font-size:.65rem;color:var(--tinta-fraca);line-height:1.35}
/* Divergencia se destaca sem gritar: fundo, nao borda piscante. Ela e' para
   ser lida com calma e decidida por gente. */
.conf-tabela th{font-size:.66rem}
.conf-tabela .conf-sub th{font-weight:500;color:var(--tinta-fraca);text-transform:lowercase}
.conf-desc{display:block;font-size:.72rem;color:var(--tinta-fraca);margin:.1rem 0}
.conf-div{background:#fdeaea;font-weight:700}
.conf-vazio{color:var(--tinta-fraca);font-size:.7rem}
.conf-nao-fonte{font-style:italic}
.conf-motivo td{background:#fdf6f6;font-size:.7rem;color:#8a3232;padding:.35rem .6rem}
.conf-filtro-div{display:flex;align-items:center;gap:.4rem;font-size:.78rem;white-space:nowrap}
.conf-decisao{border:1px solid #e8cf9f;background:#fdfaf4;border-radius:9px;padding:.85rem;margin:.7rem 0}
.conf-decisao-topo{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.conf-problema,.conf-origem{font-size:.78rem;margin:.5rem 0;line-height:1.5}
.conf-pendencias{margin:.4rem 0 .4rem 1.1rem;font-size:.74rem;color:var(--tinta-fraca)}
.conf-alternativas{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.6rem}
.conf-alt{border:1px solid var(--linha);border-radius:7px;padding:.6rem;background:#fff;font-size:.72rem}
.conf-alt.recomendada{border-color:#a9d9bd;background:#f4fbf7}
.conf-alt-topo{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.35rem}
.conf-alt-linha{margin:.25rem 0;line-height:1.45}
.conf-alt-linha span{display:block;font-size:.6rem;text-transform:uppercase;color:var(--tinta-fraca)}
.conf-humano{font-size:.72rem;color:#7a4a08;font-weight:600;margin-top:.6rem}
@media(max-width:860px){.conf-fontes,.conf-alternativas{grid-template-columns:1fr}
  .conf-ausencias-grade{grid-template-columns:repeat(2,1fr)}}
/* ---- curva S compacta ---- */
/* O grafico tem viewBox fixo e height:auto, entao a altura acompanha a largura
   da tela. Limitar por max-height e' o que impede a faixa alta demais em
   monitor largo sem mexer na proporcao interna do desenho. */
.curva-s svg{max-height:170px}
.curva-s.expandida svg{max-height:300px}
.curva-rodape{display:flex;align-items:flex-start;gap:.8rem;margin-top:.4rem}
.curva-estados{display:flex;gap:.9rem;flex-wrap:wrap;flex:1}
.curva-estado{display:flex;flex-direction:column;font-size:.68rem;line-height:1.35;min-width:0}
.curva-estado i{display:block;width:22px;height:0;margin-bottom:.2rem}
.curva-estado b{font-weight:700}
.curva-estado small{color:var(--tinta-fraca);font-size:.62rem}
/* Serie ausente nao ganha linha nem cor: ganha um traco apagado e o motivo.
   Colorir o que nao existe seria fingir que existe. */
.curva-estado.ausente i{border-top:2.2px dotted #c3ccd4}
.curva-estado.ausente b{color:var(--tinta-fraca);font-weight:600}
@media(max-width:760px){.curva-rodape{flex-direction:column}}
/* ---- validacao de classificacao ---- */
/* Sugestao e decisao em colunas separadas e visualmente distintas: quem olha
   precisa enxergar de longe o que e' proposta e o que ja' foi decidido. */
.valc-tabela td{vertical-align:top}
.valc-col-sug,.valc-col-dec{min-width:230px;max-width:340px}
.valc-sugestao{border:1px solid #e8cf9f;background:#fdfaf4;border-radius:7px;padding:.45rem .55rem}
.valc-sug-topo{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font-size:.72rem}
.valc-confianca{font-size:.64rem;font-weight:700;color:#7a4a08;background:#f6e6c8;border-radius:99px;padding:.05rem .4rem}
.valc-sug-quem{font-size:.64rem;color:var(--tinta-fraca);margin:.2rem 0}
.valc-sug-texto{font-size:.7rem;line-height:1.4}
.valc-sug-acoes{display:flex;gap:.35rem;margin-top:.4rem}
.valc-decisao{border-left:3px solid #a9d9bd;padding-left:.5rem}
.valc-decisao.rejeitada{border-left-color:#e0a3a3}
.valc-lote{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.valc-historico{max-height:60vh;overflow:auto}
.valc-hist-item{border-bottom:1px solid var(--linha);padding:.55rem 0}
.valc-hist-item:last-child{border-bottom:0}
/* ---- triagem em quatro grupos ---- */
/* A ordem na tela e' D, C, B, A: comeca pelo que exige gente e termina pelo
   que so' precisa de confirmacao. Quem abre a tela ve primeiro o trabalho
   real, nao a fila de carimbo. */
.valc-triagem{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:.8rem 0}
.valc-grupo-cartao{display:block;text-align:left;border:1px solid var(--linha);border-radius:9px;
  padding:.7rem .8rem;background:#fff;cursor:pointer;font:inherit;transition:box-shadow .15s}
.valc-grupo-cartao:hover{box-shadow:0 1px 6px rgba(0,0,0,.09)}
.valc-grupo-cartao.ativo{box-shadow:0 0 0 2px currentColor inset}
.valc-grupo-letra{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.06em;
  border-radius:99px;padding:.08rem .45rem;margin-bottom:.3rem}
.valc-grupo-cartao b{display:block;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}
.valc-grupo-titulo{display:block;font-size:.72rem;font-weight:600;margin:.1rem 0}
.valc-grupo-cartao small{display:block;font-size:.63rem;color:var(--tinta-fraca);line-height:1.35}
.valc-grupo-cartao.gD{color:#8a3232;border-color:#e0a3a3;background:#fdf6f6}
.valc-grupo-cartao.gC{color:#7a4a08;border-color:#e8cf9f;background:#fdfaf4}
.valc-grupo-cartao.gB{color:#2b5a7a;border-color:#bcd4e4;background:#f6fafd}
.valc-grupo-cartao.gA{color:#14653b;border-color:#a9d9bd;background:#f4fbf7}
.valc-grupo-cartao.gD .valc-grupo-letra{background:#f6dede}
.valc-grupo-cartao.gC .valc-grupo-letra{background:#f6e6c8}
.valc-grupo-cartao.gB .valc-grupo-letra{background:#dceaf4}
.valc-grupo-cartao.gA .valc-grupo-letra{background:#d6efe1}
/* A etiqueta na linha carrega o motivo no title: o agrupamento nao pode ser
   caixa-preta para quem esta' revisando item a item. */
.valc-grupo{display:inline-block;font-size:.6rem;font-weight:700;border-radius:99px;
  padding:.05rem .4rem;margin-left:.25rem;cursor:help}
.valc-grupo.gD{background:#f6dede;color:#8a3232}
.valc-grupo.gC{background:#f6e6c8;color:#7a4a08}
.valc-grupo.gB{background:#dceaf4;color:#2b5a7a}
.valc-grupo.gA{background:#d6efe1;color:#14653b}
@media(max-width:860px){.valc-triagem{grid-template-columns:repeat(2,1fr)}}
/* Fornecimento nao e' um estado ruim nem um alerta: e' outra natureza. Cor
   propria, discreta, sem semantica de erro. */
.tag.forn{background:#ece4f5;color:#54357a;cursor:help}
/* ---- orcamento universal ---- */
/* Receita e documento sao NUMEROS DIFERENTES e a tela mostra os dois lado a
   lado. Colapsa-los numa caixa so' seria repetir no visual o erro que o modelo
   antigo cometia no dado. */
.ou-totais{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;margin:.9rem 0}
.ou-totais>div{border:1px solid var(--linha);border-radius:9px;padding:.65rem .8rem;background:#fff}
.ou-totais span{display:block;font-size:.62rem;text-transform:uppercase;color:var(--tinta-fraca)}
.ou-totais b{display:block;font-size:1.05rem;margin:.15rem 0;letter-spacing:-.01em}
.ou-totais small{display:block;font-size:.62rem;color:var(--tinta-fraca)}
.ou-totais .destaque{border-color:#a9d9bd;background:#f4fbf7}
.ou-totais .destaque b{color:#14653b}
.ou-totais .documento{border-color:#bcd4e4;background:#f6fafd}
.ou-totais .documento b{color:#2b5a7a}
/* Item que nao gera receita fica visivel e apagado: existe no escopo, nao na
   conta da SOLUXIS. */
.ou-sem-receita{background:#fafafa}
.ou-sem-receita td:first-child{opacity:.6}
.ou-mods{font-size:.72rem;color:var(--tinta-fraca)}
.ou-mods-lista{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.ou-chip{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--linha);
  border-radius:99px;padding:.2rem .55rem;font-size:.72rem;cursor:pointer;background:#fff}
.ou-chip:has(input:checked){border-color:#12608c;background:#eef4f9;font-weight:600}
.ou-campos{border-top:1px solid var(--linha);margin-top:.6rem;padding-top:.6rem}
@media(max-width:960px){.ou-totais{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.ou-totais{grid-template-columns:repeat(2,1fr)}}
/* ---- escopo comercial em arvore ---- */
/* Grupo e' totalizador: fundo e peso proprios para separar do item, sem virar
   uma segunda tabela. */
.oe-tab td{vertical-align:top}
.oe-grupo{background:#f4f7fa}
.oe-grupo td{border-top:2px solid var(--linha);padding-top:.55rem}
.oe-comp-bt{border:0;background:none;color:#12608c;font:inherit;font-size:.66rem;
  cursor:pointer;padding:0;margin-left:.4rem;text-decoration:underline}
/* A composicao interna abre embaixo do item, recuada e em fundo distinto:
   e' informacao da SOLUXIS, e a tela deixa isso obvio. */
.oe-componentes td{background:#fbfaf6;padding:.5rem .8rem}
.oe-comp-titulo{font-size:.72rem;font-weight:600;margin-bottom:.35rem}
.oe-comp-titulo .nota{font-weight:400;margin-left:.4rem}
.oe-comp-tab{width:100%;font-size:.72rem}
.oe-comp-tab th{font-size:.62rem;text-transform:uppercase;color:var(--tinta-fraca);text-align:left}
.oe-comp-tab td{padding:.25rem .4rem}
.oe-comp-total td{border-top:1px solid var(--linha);font-weight:600}
.oe-params-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:.5rem}
.oe-acoes{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.9rem 0}
.oe-acoes .bt:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:860px){.oe-params-grade{grid-template-columns:repeat(2,1fr)}}
/* ---- prontidao do cronograma ---- */
/* COMPACTO. Uma faixa, seis numeros, cinco segundos de leitura. Painel grande
   aqui competiria com a informacao que ele deveria destacar. */
.pront-faixa{display:flex;align-items:stretch;gap:.8rem;flex-wrap:wrap;
  border:1px solid var(--linha);border-radius:9px;padding:.7rem .9rem;margin:.8rem 0;background:#fff}
.pront-estado{min-width:150px;border-right:1px solid var(--linha);padding-right:.9rem}
.pront-estado span,.pront-pct span{display:block;font-size:.62rem;text-transform:uppercase;color:var(--tinta-fraca)}
.pront-estado b{display:block;font-size:1rem;line-height:1.2;margin:.15rem 0}
.pront-estado small{font-size:.62rem;color:var(--tinta-fraca)}
.pront-estado.ok b{color:#14653b}.pront-estado.at b{color:#7a4a08}.pront-estado.rr b{color:#8a3232}
.pront-pct{min-width:110px;border-right:1px solid var(--linha);padding-right:.9rem}
.pront-pct b{display:block;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pront-barra{height:4px;border-radius:99px;background:#e6ecf2;margin-top:.3rem;overflow:hidden}
.pront-barra i{display:block;height:100%;background:#12608c;border-radius:99px}
.pront-inds{display:flex;gap:.5rem;flex-wrap:wrap;flex:1;align-items:center}
.pront-ind{border:1px solid var(--linha);border-radius:7px;background:#fff;padding:.4rem .6rem;
  cursor:pointer;font:inherit;text-align:left;min-width:88px}
.pront-ind:hover{box-shadow:0 1px 5px rgba(0,0,0,.08)}
.pront-ind.ativo{box-shadow:0 0 0 2px #12608c inset}
.pront-ind b{display:block;font-size:1.05rem;line-height:1.1}
.pront-ind span{display:block;font-size:.62rem;color:var(--tinta-fraca);margin-top:.1rem}
.pront-ind.ok b{color:#14653b}.pront-ind.at b{color:#7a4a08}.pront-ind.rr b{color:#8a3232}
/* Tabela compacta: fluxo rapido para gestor de obra, sem modal grande. */
.tab-escopo{width:100%;font-size:.78rem}
.tab-escopo th{font-size:.66rem;text-transform:uppercase;color:var(--tinta-fraca)}
.tab-escopo td{padding:.4rem .5rem;vertical-align:top}
.tab-escopo small{color:var(--tinta-fraca);font-weight:400}
.escopo-acoes{display:flex;gap:.3rem;flex-wrap:wrap}
/* Fora do escopo continua na tela, apagado — nao sumiu, saiu da conta. */
.escopo-fora{opacity:.6}
.escopo-fora td:first-child b{text-decoration:line-through}
.pront-caminhos-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:.6rem 0}
.pront-caminho{display:block;text-align:left;border:1px solid var(--linha);border-radius:9px;
  padding:.7rem .8rem;background:#fff;cursor:pointer;font:inherit}
.pront-caminho:hover{box-shadow:0 1px 6px rgba(0,0,0,.09)}
.pront-caminho b{display:block;font-size:.86rem;margin-bottom:.25rem}
.pront-caminho small{display:block;font-size:.68rem;color:var(--tinta-fraca);line-height:1.4;margin-bottom:.4rem}
.pront-promover{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.8rem 0}
.pront-promover .bt:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:860px){.pront-caminhos-grade{grid-template-columns:1fr}
  .pront-estado,.pront-pct{border-right:0}}
.historico-rdo-v1{border-top:1px solid var(--linha);padding-top:.6rem}.historico-rdo-v1 summary{cursor:pointer;font-weight:600;font-size:.78rem}
.historico-rdo-v1>div{padding:.4rem 0;border-bottom:1px solid var(--linha);font-size:.74rem}.historico-rdo-v1 small{display:block;color:var(--tinta-fraca);margin-top:.15rem}
@media(max-width:760px){.estados-rdo-v1{grid-template-columns:repeat(2,1fr)}}

@media(max-width:900px){
  .grade-crono-v1{grid-template-columns:1fr}.painel-eap{max-height:380px;overflow:auto}
  .dimensoes-crono{grid-template-columns:repeat(2,1fr)}.filtros-v1{grid-template-columns:1fr 1fr}.filtros-v1 .campo:first-child{grid-column:1/-1}
  .workspace-scroll{height:58vh}.workspace-conteudo{min-width:1780px}.cab-workspace,.linha-workspace{grid-template-columns:280px 860px 640px}
  .cab-operacional,.cel-operacional{grid-template-columns:82px 82px 64px 110px 82px 140px 100px 105px 95px}.cabecalho-projeto-v1{align-items:flex-start}
}
@media(max-width:600px){
  .topo-crono{align-items:stretch;flex-direction:column}.seletor-crono{width:100%}.dimensoes-crono{grid-template-columns:1fr 1fr}
  .filtros-v1{grid-template-columns:1fr}.filtros-v1 .campo:first-child{grid-column:auto}.faixa-versao{align-items:flex-start}
  .painel-atividades .rolagem{border:0;overflow:visible;max-height:none}.tabela-v1 table,.tabela-v1 tbody{display:block}.tabela-v1 thead{display:none}
  .tabela-v1 tr.atividade-v1{display:grid;grid-template-columns:1fr auto;background:#fff;border:1px solid var(--linha);border-radius:8px;
    padding:.65rem;margin-bottom:.55rem}.tabela-v1 tr.atividade-v1 td{display:block;border:0;padding:.2rem .25rem;grid-column:1/-1}
  .tabela-v1 tr.atividade-v1 td:nth-child(3),.tabela-v1 tr.atividade-v1 td:nth-child(5),.tabela-v1 tr.atividade-v1 td:nth-child(6){display:inline-block;grid-column:auto}
  .tabela-v1 tr.atividade-v1 td:last-child{text-align:right}.resumo-v1{grid-template-columns:1fr 1fr}
  main{padding:.8rem}.cabecalho-projeto-v1 h1{font-size:1.35rem}.dimensoes-crono{grid-template-columns:repeat(2,1fr)}
  .barra-workspace{align-items:stretch;flex-wrap:wrap}.busca-eap{width:100%}.barra-workspace .nota{margin-left:0;width:100%}
  .mostrar-removidos{width:100%}
  .workspace-scroll{height:62vh;overflow-y:auto;overflow-x:hidden}.workspace-conteudo{min-width:0}.cab-workspace{display:none}
  .linha-workspace{display:block;height:auto;margin:.5rem;border:1px solid var(--linha);border-radius:8px;overflow:hidden}
  .cel-eap{position:static;display:grid;grid-template-columns:20px 52px minmax(0,1fr) auto;min-height:42px;border-right:0;border-bottom:1px solid var(--linha)}
  .cel-operacional{display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem;padding:.5rem}.cel-operacional>span{white-space:normal;padding:.15rem}
  .cel-operacional>span:nth-child(3)::before{content:'Duração: '}.cel-operacional>span:nth-child(4)::before{content:'Informado: '}
  .cel-operacional>span:nth-child(5)::before{content:'Peso: '}.cel-operacional>span:nth-child(6)::before{content:'Responsável: '}
  .cel-operacional>span:nth-child(7){display:none}.cel-gantt{display:none}.legenda-workspace{display:none}.tipo-eap{display:none}
}
.trilha-prontidao{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:.7rem;margin-top:1rem;overflow:auto;padding-bottom:.35rem}
.passo-prontidao{min-height:118px;border:1px solid var(--linha);border-radius:10px;padding:.8rem;display:flex;flex-direction:column;gap:.45rem;background:var(--fundo)}
.passo-prontidao.pronto{border-color:#8bc8a4;background:#f2fbf5}.passo-prontidao.bloqueado{border-color:#e2aaa5;background:#fff6f5}
.passo-prontidao b{font-size:.88rem}.passo-prontidao small,.acao-prontidao small,.lista-bloqueios small{color:var(--tinta-fraca)}
.acao-prontidao{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;padding-top:.7rem}
.lista-bloqueios{list-style:none;padding:0;margin:.7rem 0 0;display:grid;gap:.6rem}.lista-bloqueios li{display:flex;gap:.65rem;align-items:flex-start;border-bottom:1px solid var(--linha);padding-bottom:.55rem}.lista-bloqueios li div{display:flex;flex-direction:column;gap:.15rem}
.grade-mapeamento-v1{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(420px,1.5fr);gap:1rem;align-items:start}
.lista-candidatos-v1{display:grid;gap:.45rem}.candidato-v1{display:grid;text-align:left;gap:.2rem;width:100%;padding:.75rem;border:1px solid var(--linha);background:#fff;border-radius:8px;color:var(--tinta);cursor:pointer}
.candidato-v1:hover,.candidato-v1.ativo{border-color:var(--azul);background:#f2f8fc}.candidato-v1 small{color:var(--tinta-fraca)}
.evidencia-v1{display:grid;gap:.25rem;padding:.8rem;margin-bottom:1rem;border-left:4px solid #b8860b;background:#fff9e8}.evidencia-v1 small{color:var(--tinta-fraca)}
.fechar-mapeamento-v1{display:flex;gap:.8rem;align-items:end;margin-top:1rem}.fechar-mapeamento-v1 label{flex:1}
@media(max-width:850px){.grade-mapeamento-v1{grid-template-columns:1fr}.fechar-mapeamento-v1{align-items:stretch;flex-direction:column}}
.parcelas-validacao-v1{display:grid;gap:.55rem}.parcela-validacao-v1{display:flex;justify-content:space-between;align-items:end;gap:1rem;padding:.7rem;border:1px solid var(--linha);border-radius:8px;background:var(--fundo)}
.parcela-validacao-v1 div,.analise-validacao-v1{display:flex;flex-direction:column;gap:.25rem}.parcela-validacao-v1 small{color:var(--tinta-fraca)}.parcela-validacao-v1 label{min-width:150px}
.analise-validacao-v1{margin-top:.8rem;padding:.75rem;border-radius:8px}.analise-validacao-v1.aprovado{background:#e2f4ea;color:#14653b;border:1px solid #a9d9bd}.analise-validacao-v1.bloqueado{background:#fff1f0;color:#8c1d18;border:1px solid #e2aaa5}
@media(max-width:600px){.parcela-validacao-v1{align-items:stretch;flex-direction:column}.parcela-validacao-v1 label{width:100%}}
.divergencias-v1{display:flex;flex-direction:column;gap:.3rem;padding:.75rem;margin:1rem 0;border-radius:8px}.divergencias-v1.aprovado{background:#e2f4ea;color:#14653b;border:1px solid #a9d9bd}.divergencias-v1.bloqueado{background:#fff1f0;color:#8c1d18;border:1px solid #e2aaa5}

/* -------------------------------------- entrada de escopo do cliente (3.6) */
.oi-opcoes{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:.5rem 0 1rem}
.oi-opcao{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;text-align:left;padding:.85rem;
  border:1px solid var(--linha);border-radius:8px;background:var(--papel);cursor:pointer;font:inherit;color:inherit}
.oi-opcao:hover{border-color:var(--azul-claro);box-shadow:0 1px 6px rgba(11,61,92,.12)}
.oi-opcao b{font-size:.95rem}.oi-opcao small{color:var(--tinta-fraca);line-height:1.4}
.oi-opcao.desabilitada{opacity:.6;cursor:not-allowed}
.oi-opcao.desabilitada:hover{border-color:var(--linha);box-shadow:none}

.fe-aviso{padding:.7rem .85rem;border-radius:8px;background:#fff8e6;border:1px solid #e8d09a;color:#6b4e06}
.fe-split{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
@media(max-width:1000px){.fe-split{grid-template-columns:1fr}}
.fe-lado{background:var(--papel);border:1px solid var(--linha);border-radius:10px;padding:1rem;min-width:0}
.fe-ficha,.fe-resumo{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:.8rem}
.fe-ficha div,.fe-resumo div{display:flex;flex-direction:column;gap:.15rem;padding:.5rem;border-radius:6px;background:var(--fundo)}
.fe-ficha span,.fe-resumo span{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-fraca)}
.fe-hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;word-break:break-all}
.fe-doc{margin:.8rem 0 0;max-height:60vh;overflow:auto;background:var(--fundo);border:1px solid var(--linha);
  border-radius:6px;padding:.6rem;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.fe-ln{display:block}
.fe-ln i{display:inline-block;min-width:3.2rem;margin-right:.6rem;color:var(--tinta-fraca);font-style:normal;
  text-align:right;user-select:none}
.fe-doc-vazio{margin-top:.8rem;padding:.8rem;border:1px dashed var(--linha);border-radius:6px}
.fe-campos td:first-child{font-weight:600;width:11rem}
.fe-ausente td{color:var(--tinta-fraca)}
.fe-proc{font-size:.78rem;color:var(--tinta-fraca)}
.fe-itens td{vertical-align:top}
.fe-rejeitado td{opacity:.55;text-decoration:line-through}
.fe-rejeitado .escopo-acoes,.fe-rejeitado .tag{text-decoration:none;opacity:1}
.fe-proced{padding:.7rem;border-radius:8px;background:var(--fundo);border:1px solid var(--linha)}
.of-estado{margin:.6rem 0;padding:.6rem .75rem;border-radius:8px;font-size:.88rem;line-height:1.45}
.of-estado.andando{background:var(--fundo);border:1px solid var(--linha);color:var(--tinta-fraca)}
.of-estado.erro{background:#fff1f0;border:1px solid #e2aaa5;color:#8c1d18}

/* ------------------------------------------ bancada de revisão do escopo */
.fe-ampla{padding:.7rem .85rem;border-radius:8px;background:#eef4fb;border:1px solid #bcd4ea;color:#164b73}
.fe-col{display:inline-block;margin:.15rem .25rem 0 0;padding:.1rem .4rem;border-radius:4px;
  background:var(--papel);border:1px solid var(--linha);font-size:.75rem}
.fe-col.descricao{border-color:var(--verde);color:#14653b}
.fe-col.grupo{border-color:var(--azul-claro);color:var(--azul)}
.fe-vazio{padding:1rem;border:1px dashed var(--linha);border-radius:8px;background:var(--fundo)}
.fe-vazio p{margin:.2rem 0 .6rem}
.fe-bancada-acoes{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0}
.fe-grupo{font-size:.82rem;color:var(--tinta-fraca);max-width:11rem}
.fe-da-bancada td:first-child{box-shadow:inset 3px 0 0 var(--laranja)}
.fe-atributos td{background:var(--fundo)}
.fe-itens .escopo-acoes{white-space:nowrap}

/* ---------------------------------------------- aviso de idioma do documento */
.fe-idioma-aviso{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;margin:.6rem 0;padding:.8rem 1rem;border-radius:8px;
  background:#fff8e6;border:1px solid #e8d09a;color:#6b4e06}
.fe-idioma-acoes{display:flex;gap:.4rem;flex-wrap:wrap}

/* Abas do modal de substituir documento. */
.fe-vista{padding:.3rem .7rem;border:0;background:var(--papel);cursor:pointer;font:inherit;
  font-size:.82rem;color:var(--tinta-fraca);border-right:1px solid var(--linha)}
.fe-vista:last-child{border-right:0}
.fe-vista.ativa{background:var(--azul);color:#fff}

/* ------------------------------------- exclusão e cancelamento de orçamento */
.ou-filtro-fora{display:block;margin:.2rem 0 .8rem;font-size:.88rem;cursor:pointer}
.ou-filtro-fora small{display:block;margin:.1rem 0 0 1.4rem}
.ou-fora{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin:.6rem 0;padding:.8rem 1rem;border-radius:8px;background:#fff1f0;border:1px solid #e2aaa5;color:#8c1d18}
.ou-fora-motivo{margin-top:.3rem;font-style:italic}
.ou-acoes-situacao{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--linha)}
.ou-sem-acao{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--linha)}
.bt.perigo{border-color:var(--vermelho);color:var(--vermelho)}
.bt.perigo:hover{background:var(--vermelho);color:#fff}
.ou-arquivada td{opacity:.7}
.ou-arquivada td:first-child{box-shadow:inset 3px 0 0 var(--tinta-fraca);opacity:1}
.fe-topo-acoes{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-start}
.fe-sub-abas{display:inline-flex;border:1px solid var(--linha);border-radius:6px;overflow:hidden;margin:.4rem 0 .8rem}
.fe-sub-abas .fe-vista{border-right:1px solid var(--linha)}
.fe-sub-abas .fe-vista:last-child{border-right:0}

/* ------------------------------------------- composição interna do item */
.oe-comp-grupo td{background:var(--fundo);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--tinta-fraca);padding-top:.5rem}
.oe-comp-desc{padding-left:1rem}
.fe-ja-convertido{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin:.8rem 0 .6rem;padding:.8rem 1rem;border-radius:8px;
  background:#eef4fb;border:1px solid #bcd4ea;color:#164b73}

/* --------------------------------------- Base de Custos e Composições */
.bs-grupo{border:1px solid var(--linha);border-radius:8px;margin-bottom:.4rem;overflow:hidden}
.bs-grupo-bt{display:block;width:100%;text-align:left;padding:.6rem .8rem;border:0;
  background:var(--papel);cursor:pointer;font:inherit;font-weight:600}
.bs-grupo-bt:hover{background:var(--fundo)}
.bs-itens{border-top:1px solid var(--linha);max-height:40vh;overflow:auto}
.bs-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .8rem;
  border-bottom:1px solid var(--linha);cursor:pointer}
.bs-item:last-child{border-bottom:0}
.bs-item:hover{background:var(--fundo)}

/* ============================================================ 8B.4 — TELA ESTREITA
 *
 * O AMBIENTE DA OBRA TEM DE CABER NO CELULAR DO ENCARREGADO.
 *
 * O `#app` era uma grade de 212px + resto em QUALQUER largura: num telefone de
 * 390px o menu comia mais da metade da tela e o conteudo da obra ficava numa
 * coluna de 178px. Abaixo de 860px o menu passa a ser uma FAIXA HORIZONTAL que
 * rola, e o conteudo fica com a largura inteira.
 *
 * Nao e' redesenho: e' a mesma navegacao, deitada. Os titulos de area viram
 * separadores na faixa, porque uma etiqueta empilhada sobre botoes em linha
 * confundiria em vez de organizar. */
/* A BARRA COMPACTA E A GAVETA — so' no celular.
 *
 * O QUE HAVIA ANTES, E POR QUE SAIU
 *
 * Ate 25/09/2026 o menu do celular era uma FAIXA HORIZONTAL rolavel com tudo
 * dentro: marca, os rotulos dos cinco grupos, todos os botoes de tela e o
 * rodape com nome, perfil, trocar senha e sair. Cabia — rolando de lado — mas
 * comia altura, e altura e' exatamente o que falta num aparelho de 375px
 * segurado na mao. Os prints do iPhone mostraram o cabecalho tomando uma
 * parcela grande da tela antes de qualquer conteudo aparecer.
 *
 * O QUE FICA FIXO AGORA: uma faixa de 44px com tres coisas — botao de menu,
 * marca reduzida e quem esta' logado. Nada mais. O menu inteiro vai para uma
 * gaveta que so' aparece quando alguem pede, e o conteudo ganha a altura que
 * a faixa devolveu.
 *
 * 44px NAO E' NUMERO REDONDO: e' o alvo de toque minimo recomendado. Abaixo
 * disso o botao de menu passa a exigir pontaria. */
@media(max-width:860px){
  /* ====================================================================
   * A CAUSA DA FAIXA ESCURA DE CENTENAS DE PIXELS.
   *
   * `#app` é um grid com `min-height:100vh`. No computador ele tem DUAS
   * COLUNAS — menu de 212px e conteúdo —, e a coluna do menu ocupar a altura
   * toda é o desenho certo.
   *
   * No celular a mesma regra vira UMA coluna, e as duas faixas passam a ser
   * duas LINHAS: `nav` e `main`. Linhas de trilha automática dividem entre si
   * a altura que sobra até os 100vh — e `nav`, que tem 44px de conteúdo,
   * recebia metade do espaço vago. Como ele é pintado de grafite, a sobra
   * aparecia como um bloco escuro vazio antes do conteúdo. Numa tela curta a
   * faixa quase não crescia; numa tela longa ela tomava meia tela — e foi essa
   * a variação que a homologação no aparelho mostrou.
   *
   * `auto 1fr` diz o que se quer: a barra ocupa o que ela é, e o conteúdo
   * recebe todo o resto. `align-content:start` impede qualquer distribuição de
   * sobra entre as linhas.
   *
   * NÃO É MARGEM NEGATIVA. A altura deixa de ser criada; não há nada a
   * esconder depois.
   * ==================================================================== */
  #app{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start}
  /* A barra é do tamanho dos controles dela, e não da viewport. */
  nav{min-height:0;height:auto;flex:none;align-self:start}
  main{min-width:0}

  nav{display:block;flex-direction:column;padding:0;gap:0;overflow:visible;
    position:sticky;top:0;z-index:40}
  nav .logo{display:none}                 /* a marca grande e' da coluna do desktop */

  .nav-barra{display:flex;align-items:center;gap:.7rem;padding:0 .8rem;min-height:44px;
    background:var(--grafite)}
  .logo-mini{display:block;height:17px;width:auto;flex:0 0 auto;opacity:.95}
  .nav-quem{display:flex;flex-direction:column;line-height:1.15;margin-left:auto;
    text-align:right;min-width:0;overflow:hidden}
  .nav-quem b{font-size:.8rem;color:#e8ecef;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-quem span{font-size:.64rem;color:#9aa2a9;letter-spacing:.04em;text-transform:uppercase;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* O botao: tres tracos desenhados em CSS, sem fonte de icone nem imagem. */
  .nav-menu-bt{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
    background:none;border:0;border-radius:7px;cursor:pointer;padding:0;margin-left:-.35rem}
  .nav-menu-bt:active{background:rgba(255,255,255,.12)}
  .nav-menu-traco,.nav-menu-traco::before,.nav-menu-traco::after{display:block;width:19px;height:2px;
    background:#e8ecef;border-radius:2px;content:""}
  .nav-menu-traco{position:relative}
  .nav-menu-traco::before{position:absolute;top:-6px}
  .nav-menu-traco::after{position:absolute;top:6px}

  /* A GAVETA. Fechada por padrao, e fechada e' `display:none` mesmo — nao
     apenas fora da tela — para que o leitor de tela e o Tab nao a percorram. */
  nav #menu,nav .rodape{display:none}
  body.menu-aberto nav #menu,body.menu-aberto nav .rodape{
    display:block;position:fixed;left:0;width:min(282px,82vw);background:var(--grafite);
    z-index:41;box-shadow:2px 0 18px rgba(0,0,0,.34)}
  body.menu-aberto nav #menu{top:44px;bottom:6.2rem;overflow-y:auto;padding:.6rem .5rem}
  body.menu-aberto nav .rodape{bottom:0;height:6.2rem;margin:0;padding:.8rem .9rem;
    border-top:1px solid rgba(255,255,255,.14);border-left:0}
  body.menu-aberto nav button{width:100%;text-align:left;white-space:normal;
    padding:.6rem .7rem;min-height:2.6rem}
  body.menu-aberto nav .menu-grupo{padding:.85rem .7rem .3rem;border:0}

  #veuMenu{position:fixed;inset:44px 0 0 0;background:rgba(0,0,0,.42);z-index:39}
  body.menu-aberto{overflow:hidden}      /* a pagina atras nao rola junto */

  main{padding:.9rem .75rem 3rem}
}

/* No computador a barra compacta e o veu nao existem. */
@media(min-width:861px){ .nav-barra,#veuMenu{display:none} }

/* O CABECALHO DA OBRA NAO PODE SAIR DA TELA.
 *
 * Rolar uma aba longa e perder de vista QUAL obra se esta lendo e' o comeco de
 * lancar producao na obra errada. Ele gruda no topo junto com as abas. */
.obra-topo{position:sticky;top:0;z-index:20;background:var(--fundo);padding-top:.4rem}
/* A rolagem lateral da faixa de abas saiu no hotfix de 25/09: onze abas
 * roladas escondem metade sem dizer que estão ali. A regra que a substitui —
 * quebrar em linhas no tablet, virar seletor no celular — está na seção do
 * envelope responsivo, no fim deste arquivo. */
.obra-subabas{display:flex;gap:.4rem;flex-wrap:wrap;margin:.1rem 0 1rem}
.obra-subabas button{background:none;border:1px solid var(--linha);border-radius:999px;
  padding:.3rem .8rem;font-size:.8rem;cursor:pointer;color:var(--tinta-fraca);white-space:nowrap}
.obra-subabas button:hover{border-color:var(--grafite)}
.obra-subabas button.ativo{background:var(--grafite);border-color:var(--grafite);color:#fff;font-weight:600}
.obra-subabas button.vazia{opacity:.55;font-style:italic}
@media(max-width:860px){
  .obra-topo{position:static}
  .obra-subabas{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.2rem}
}

/* ================================================== 8B.6 — A BM EM PLANILHA
 *
 * A grade cresce para a direita: cada boletim traz duas colunas. Codigo e
 * descricao ficam GRUDADOS a' esquerda, porque rolar ate' a BM07 e perder de
 * vista de qual item se esta' falando e' o mesmo que ler a planilha com a
 * primeira coluna tapada. */
.bm-rolagem{overflow-x:auto;border:1px solid var(--linha);border-radius:8px}
.bm-planilha{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:.82rem}
.bm-planilha th,.bm-planilha td{padding:.32rem .55rem;border-bottom:1px solid var(--linha);white-space:nowrap}
.bm-planilha thead th{position:sticky;top:0;background:var(--papel);z-index:3;
  border-bottom:2px solid var(--linha);font-size:.74rem;line-height:1.15}
.bm-planilha thead th .nota{font-size:.62rem;text-transform:lowercase}
.bm-planilha th.bm-cod,.bm-planilha td.bm-cod{position:sticky;left:0;background:var(--papel);z-index:2;
  font-variant-numeric:tabular-nums;min-width:5.5rem}
.bm-planilha th.bm-desc,.bm-planilha td.bm-desc{position:sticky;left:5.5rem;background:var(--papel);z-index:2;
  min-width:16rem;max-width:22rem;white-space:normal;
  box-shadow:inset -1px 0 0 var(--linha)}
.bm-planilha thead th.bm-cod,.bm-planilha thead th.bm-desc{z-index:4}
.bm-planilha td.num{font-variant-numeric:tabular-nums}
.bm-planilha .bm-periodo{border-left:1px solid var(--linha)}
.bm-planilha .bm-acum{background:rgba(18,96,140,.05)}
/* Grupo e' totalizador: ele soma os filhos, e a tela diz isso pelo peso do
 * traco, nao por um rotulo repetido em cada linha. */
.bm-planilha tr.bm-grupo>td{background:#f1f5f9;font-weight:600}
.bm-planilha tr.bm-grupo>td.bm-cod,.bm-planilha tr.bm-grupo>td.bm-desc{background:#f1f5f9}
.bm-planilha tr.bm-total>td{background:#e8eef4;font-weight:600;border-top:2px solid var(--linha)}
.bm-planilha tr.bm-total>td.bm-cod,.bm-planilha tr.bm-total>td.bm-desc{background:#e8eef4}
.bm-planilha tr.bm-secao>td{background:var(--grafite);color:#fff;font-size:.76rem}
/* FD nao e' producao da SOLUXIS nem caixa dela: a faixa lateral existe para que
 * ninguem some estas linhas com as outras sem perceber. */
.bm-planilha tr.bm-fd>td.bm-cod{box-shadow:inset 3px 0 0 var(--laranja)}
.bm-planilha tr.bm-geral>td{background:#dbe5ee}
.bm-planilha tr.bm-geral>td.bm-cod,.bm-planilha tr.bm-geral>td.bm-desc{background:#dbe5ee}
/* Numero ajustado a' mao: o tracejado diz que ele nao e' o que o sistema
 * calculou, e o title traz a justificativa de quem apresentou. */
.bm-planilha td.bm-ajustado{border-bottom:2px dashed var(--laranja);cursor:help}

/* NO CELULAR NAO SE MOSTRAM TRINTA COLUNAS.
 *
 * A grade continua rolando — a experiencia de desktop nao e' sacrificada —,
 * mas a coluna grudada encolhe para sobrar tela, e a descricao deixa de ser
 * fixa: com 390px de largura, duas colunas presas nao deixam ver numero nenhum. */
@media(max-width:860px){
  .bm-planilha{font-size:.76rem}
  .bm-planilha th.bm-desc,.bm-planilha td.bm-desc{position:static;min-width:11rem;box-shadow:none}
  .bm-planilha th.bm-cod,.bm-planilha td.bm-cod{min-width:4.2rem}
}

/* ================================================ 8B.6 — A BM NO PAPEL (§18)
 *
 * Nao ha' gerador de PDF: a impressao do navegador ja' produz o documento, e um
 * segundo gerador significaria duas versoes do mesmo boletim — uma na tela e
 * outra no arquivo — divergindo na primeira mudanca de layout.
 *
 * O que muda no papel: sai o que nao se le' impresso (menu, botoes, abas), a
 * grade deixa de rolar e aparece inteira, e o cabecalho da tabela se repete a
 * cada pagina — sem isso a terceira folha chega sem dizer de que coluna e' cada
 * numero. */
/* ==================================================================== *
 * HF-FIX-08 — O DIA DE CAMPO NUM CELULAR
 *
 * A adaptacao e' PRIORITARIA na execucao, e nao em todo o ERP: e' aqui que
 * alguem opera de pe', no sol, com luva. O resto do sistema continua sendo
 * usado sentado.
 *
 * Nao ha' segunda aplicacao nem segunda folha: e' a MESMA tela, com as tabelas
 * viradas em cartoes quando nao ha' largura para elas. Duas telas divergiriam
 * na primeira regra nova.
 * ==================================================================== */
.campo-hoje .campo-numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;
  margin:.7rem 0}
.campo-numeros>div{display:flex;flex-direction:column;gap:.1rem}
.campo-num{font-size:1.6rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.campo-num.fraco{color:var(--tinta-fraca);font-weight:600}
.campo-num.neg{color:var(--vermelho,#b3261e)}
.campo-acoes{display:flex;flex-direction:column;gap:.5rem;margin-top:.4rem}
.campo-bt-grande{min-height:3.4rem;font-size:1.05rem;font-weight:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  width:100%;padding:.8rem 1rem}
.campo-bt-sub{font-size:.75rem;font-weight:400;opacity:.85}
.campo-acoes-sec{display:flex;gap:.45rem;flex-wrap:wrap}
.campo-acoes-sec .bt{flex:1 1 8rem;min-height:2.6rem}
.campo-lacuna{border-left:3px solid var(--laranja);padding-left:.6rem;margin-top:.6rem}
.campo-sub{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-fraca);margin:.8rem 0 .3rem}
.campo-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.campo-item{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap;
  border:1px solid var(--linha);border-radius:8px;padding:.55rem .65rem}
.campo-previa{font-size:.72rem;color:var(--tinta-fraca);margin-top:.2rem;line-height:1.3}
.campo-ocor-form{border-top:1px solid var(--linha);margin-top:.8rem;padding-top:.7rem}
.campo-foto-envio{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:.7rem}
.campo-foto-envio .cresce{flex:1 1 12rem}
.campo-foto-arquivo input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0)}
.campo-bt-foto{display:inline-flex;align-items:center;min-height:2.6rem;cursor:pointer}
.campo-fotos{display:flex;gap:.6rem;flex-wrap:wrap}
.campo-foto{margin:0;width:180px}
.campo-foto img{width:100%;border-radius:6px;border:1px solid var(--linha)}
.campo-checklist{list-style:none;margin:.6rem 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.campo-checklist li{display:flex;gap:.6rem;align-items:flex-start;
  border:1px solid var(--linha);border-radius:8px;padding:.5rem .6rem}
.campo-checklist li.ok{border-color:var(--verde)}
.campo-checklist li.bloqueia{border-color:var(--vermelho,#b3261e)}
.campo-check-marca{font-weight:700;width:1.1rem;text-align:center;flex:0 0 auto}
.campo-checklist li.ok .campo-check-marca{color:var(--verde)}
.campo-checklist li.bloqueia .campo-check-marca{color:var(--vermelho,#b3261e)}
.folha-na-obra:empty{display:none}

/* TABLET — as quatro colunas de numero viram duas; a folha continua tabela. */
@media(max-width:768px){
  .campo-hoje .campo-numeros{grid-template-columns:repeat(2,1fr)}
  .campo-foto{width:calc(50% - .3rem)}
  #d_folha .grade.g4{grid-template-columns:repeat(2,1fr)}
  #d_folha .grade.g2{grid-template-columns:1fr}
  /* A folha tem DUAS trilhas nesta faixa. Um campo que pede três faria o
   * navegador criar uma terceira e a linha escaparia da caixa — é a mesma
   * colisão de 375px, numa largura maior. Aqui ele atravessa as duas que
   * existem. */
  #d_folha .campo-largo-3{grid-column:span 2}
}

/* CELULAR — a producao do dia deixa de ser tabela.
 *
 * Uma tabela de oito colunas num aparelho de 390px so' e' operavel rolando de
 * lado enquanto se digita, o que e' o mesmo que nao ser operavel. Cada frente
 * vira um cartao com o rotulo da coluna colado no valor: e' a MESMA linha, com
 * a mesma id, os mesmos eventos e a mesma funcao de gravar. */
/* TELA ESTREITA: a tabela do modal vira cartao, como a producao do dia ja' faz.
 *
 * Sete colunas num aparelho de 390px so' sao legiveis rolando de lado, o que e'
 * o mesmo que nao serem legiveis. Cada linha vira um bloco com o rotulo da
 * coluna colado no valor — os mesmos dados, na mesma ordem, sem corte. O
 * `data-rot` que as tabelas ja' carregam e' o que torna isso possivel sem mexer
 * em marcacao. */
@media(max-width:700px){
  /* A tabela chave/valor do resumo ja' e' duas colunas e nao precisa virar
   * cartao — ela JA' e' um cartao. Transformar `td` em bloco ali deixaria o
   * rotulo `th` sozinho numa linha e o valor noutra, sem ganho nenhum. */
  #modalCorpo table.tb:not(.tb-chave-valor) thead{display:none}
  #modalCorpo table.tb:not(.tb-chave-valor) tbody{display:flex;flex-direction:column;gap:.5rem}
  #modalCorpo table.tb:not(.tb-chave-valor) tr{display:block;border:1px solid var(--linha);border-radius:8px;
    padding:.5rem .6rem}
  #modalCorpo table.tb:not(.tb-chave-valor) td{display:block;border:0;padding:.18rem 0;text-align:left;width:auto}
  #modalCorpo table.tb:not(.tb-chave-valor) td[data-rot]::before{content:attr(data-rot) ": ";
    font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-fraca)}
  #modalCorpo table.tb:not(.tb-chave-valor) td.num{text-align:left;white-space:normal;width:auto}
  #modalCorpo table.tb:not(.tb-chave-valor) td:empty{display:none}
}

@media(max-width:520px){
  /* O FORMULARIO DA FRENTE E' PREENCHIDO NO CELULAR.
     `.g2` ja' colapsa sozinha por auto-fit; o que sobrava era a moldura: 2rem de
     recuo de cada lado num aparelho de 390px comem um sexto da largura util,
     e o formulario ficava espremido sem precisar. */
  #modal{padding:.6rem}
  #modal .caixa{padding:1rem;border-radius:8px}
  #modal .acoes-fluxo-v1{display:flex;flex-direction:column;gap:.4rem}
  #modal .acoes-fluxo-v1 .bt{width:100%;min-height:2.8rem}
  .campo-hoje .campo-numeros{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .campo-num{font-size:1.35rem}
  .campo-acoes-sec .bt{flex:1 1 100%}
  .campo-foto{width:100%}
  .campo-foto-envio{flex-direction:column;align-items:stretch}
  .campo-foto-envio .bt{width:100%;min-height:2.8rem}
  #d_folha .grade.g4,#d_folha .grade.g2{grid-template-columns:1fr}
  #d_folha .rolagem{overflow:visible;max-height:none;border:0}
  #d_folha table.tb{display:block}
  #d_folha table.tb thead{display:none}
  #d_folha table.tb tbody{display:flex;flex-direction:column;gap:.6rem}
  #d_folha table.tb tr{display:block;border:1px solid var(--linha);border-radius:8px;
    padding:.6rem .7rem;background:var(--papel)}
  #d_folha table.tb td{display:block;border:0;padding:.18rem 0;text-align:left}
  #d_folha table.tb td::before{content:attr(data-rot);display:block;font-size:.68rem;
    text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-fraca)}
  /* Celula vazia nao ganha rotulo: no dia ja' validado a coluna de acao nao tem
     botao, e um rotulo solto sobre nada e' ruido. */
  #d_folha table.tb td:empty{display:none}
  #d_folha table.tb td.num{text-align:left}
  #d_folha table.tb input,#d_folha table.tb select{width:100%;min-height:2.6rem;font-size:1rem}
  #d_folha table.tb .bt{min-height:2.6rem;width:100%;margin-top:.35rem}
  .campo-item{flex-direction:column;align-items:stretch}
  .acoes-fluxo-v1{display:flex;flex-direction:column;gap:.4rem}
  .acoes-fluxo-v1 .bt{width:100%;min-height:2.8rem}
  .estados-rdo-v1{grid-template-columns:1fr 1fr}
}

/* ====================================================================== *
 * A CADEIA ECONÔMICA — C-07
 *
 * Contratado → executado → medido → faturado → a receber → recebido, em linha,
 * porque é assim que ela é lida: cada etapa ao lado da seguinte, e a distância
 * entre duas vizinhas é o assunto. Em grade de cartões o olho perde a ordem, e
 * a ordem é metade da informação.
 *
 * No celular ela empilha: seis valores lado a lado em 390px viram seis valores
 * ilegíveis. Empilhada, continua na ordem — que é o que precisa sobreviver.
 * ====================================================================== */
.cadeia-economica{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0}
.cadeia-elo{flex:1 1 150px;min-width:0;border:1px solid var(--borda,#e3e3e3);
  border-radius:6px;padding:.5rem .6rem;background:var(--fundo-cartao,#fff);
  display:flex;flex-direction:column;gap:.1rem}
.cadeia-elo .cadeia-valor{font-weight:600;font-size:1.05rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cadeia-elo .cadeia-rot{font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;
  opacity:.75}
.cadeia-elo .nota{font-size:.75rem}
@media (max-width:640px){
  .cadeia-economica{flex-direction:column}
  .cadeia-elo{flex:1 1 auto}
}

/* A LINHA QUE ABRE A OBRA — C-08.
 *
 * Na carteira, clicar na linha leva à obra no lugar onde está o problema dela.
 * O cursor e o realce existem para dizer isso antes do clique: uma linha que
 * reage é uma linha que se pode acionar, e sem o sinal ninguém tenta. */
tr.linha-clicavel{cursor:pointer}
tr.linha-clicavel:hover>td{background:var(--realce,#f2f6fa)}

@media print{
  nav,.obra-abas,.obra-abas-seletor,.obra-subabas,.bm-controles button,.bt{display:none !important}
  /* O RELATORIO IMPRESSO E' A PROPRIA TELA. Nao ha' um segundo montador de
     documento para divergir do que se ve': o que sai no PDF e' exatamente o
     que estava na tela quando alguem mandou imprimir.
     Rolagem vira altura livre, senao o PDF corta a tabela na metade; a linha
     nao se parte ao meio; e a selecao de fotos some, porque no papel nao ha'
     o que marcar. */
  .rolagem{max-height:none !important;overflow:visible !important}
  .prep-tabela,.lista-materializar{max-height:none !important}
  table{break-inside:auto}
  tr{break-inside:avoid}
  thead{display:table-header-group}
  figure figcaption label{display:none}
  h2,h3{break-after:avoid}
  .grade{break-inside:avoid}
  #app{display:block !important;grid-template-columns:1fr}
  main{padding:0;overflow:visible}
  .cartao{border:0;box-shadow:none;padding:0;margin-bottom:.6rem;break-inside:auto}
  .bm-rolagem{overflow:visible;border:0}
  .bm-planilha{width:100%;font-size:8.5pt}
  .bm-planilha thead{display:table-header-group}
  .bm-planilha tr{break-inside:avoid}
  .bm-planilha thead th,.bm-planilha th.bm-cod,.bm-planilha td.bm-cod,
  .bm-planilha th.bm-desc,.bm-planilha td.bm-desc{position:static;background:#fff !important}
  .bm-planilha tr.bm-grupo>td,.bm-planilha tr.bm-total>td,
  .bm-planilha tr.bm-geral>td{background:#eee !important;-webkit-print-color-adjust:exact;
    print-color-adjust:exact}
  .bm-planilha tr.bm-secao>td{background:#333 !important;color:#fff !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .grade{display:grid !important;grid-template-columns:repeat(4,1fr) !important}
  .kpi{border:1px solid #ccc;padding:.3rem}
  @page{size:A4 landscape;margin:10mm}
}

/* ==========================================================================
 * A PLANILHA DO BOLETIM DE MEDIÇÃO — C-4.
 *
 * Densidade de planilha, e não de cartão: quem fecha o mês compara dezenas de
 * linhas de uma vez. Linha baixa, número tabular, hierarquia pelo recuo, e as
 * três colunas que carregam a decisão — anterior, período e saldo — separadas
 * por régua em vez de por cor forte.
 * ========================================================================== */
.bm-planilha{font-size:.82rem;line-height:1.3}
.bm-planilha th{white-space:nowrap;padding:.32rem .45rem;font-size:.7rem;
  letter-spacing:.02em;position:sticky;top:0;background:var(--papel);z-index:1}
.bm-planilha td{padding:.26rem .45rem;vertical-align:baseline}
.bm-planilha .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bm-planilha .bm-cod{white-space:nowrap;font-variant-numeric:tabular-nums}
.bm-planilha .bm-desc{min-width:13rem}
.bm-planilha .bm-un{white-space:nowrap;opacity:.75}
/* A RÉGUA marca onde o contratado acaba e a medição começa. */
.bm-planilha .bm-sep{border-left:2px solid var(--linha)}
.bm-planilha .bm-periodo{font-weight:600}
.bm-planilha .bm-saldo{opacity:.9}
.bm-planilha .bm-elegivel{font-style:italic}
.bm-planilha .bm-zero{opacity:.35}
/* O AGRUPADOR CONSOLIDA: ele se distingue por peso, e não por fundo gritante —
 * a grade tem muitas linhas, e um fundo por grupo viraria zebra. */
.bm-planilha tr.bm-grupo>td{font-weight:600;border-top:1px solid var(--linha)}
.bm-planilha tr.bm-nao-lancado td:not(.bm-cod):not(.bm-desc):not(.bm-un){opacity:.62}
.bm-planilha tfoot tr.bm-total td{font-weight:700;border-top:2px solid var(--linha);
  padding-top:.4rem}
.bm-abre{background:none;border:1px solid var(--linha);border-radius:2px;cursor:pointer;
  font:inherit;line-height:1;padding:0 .26rem;margin-right:.3rem;color:inherit}
.bm-abre:hover,.bm-abre:focus-visible{border-color:var(--azul);color:var(--azul)}
.bm-alerta,.bm-fd{font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid currentColor;border-radius:2px;padding:0 .22rem;margin-left:.35rem;
  white-space:nowrap}
.bm-alerta{color:var(--ambar)}
.bm-fd{opacity:.8}
.bm-resumo{font-size:.85rem;margin-bottom:.6rem}
/* TABLET: a grade continua uma grade. Ela rola de lado no próprio contêiner —
 * virar cartão aqui destruiria a comparação entre linhas, que é o motivo de a
 * planilha existir. */
@media(max-width:900px){
  .bm-planilha{font-size:.78rem}
  .bm-planilha .bm-desc{min-width:10rem}
}


/* ===================================================================== *
 * TABELAS NO CELULAR — cartao com coluna prioritaria, e nao rolagem lateral
 *
 * Rolar de lado para ler uma lista e' o mesmo que nao conseguir ler: a pessoa
 * perde a primeira coluna — justamente a que identifica a linha — assim que
 * comeca a rolar. O padrao que o modal e a folha do diario ja' usavam sobe
 * para as telas principais, com uma diferenca: nem toda coluna vira linha do
 * cartao. As secundarias somem.
 *
 * O QUE FICA, EM OBRAS: codigo, obra, status, prazo e o dinheiro. O que sai:
 * cliente, local, tipo e escala — informacao util no computador, ruido numa
 * lista de 375px onde se procura UMA obra.
 * ===================================================================== */
@media(max-width:700px){
  main .rolagem{overflow:visible}
  main table.tb-obras{display:block}
  main table.tb-obras thead{display:none}
  main table.tb-obras tbody{display:flex;flex-direction:column;gap:.55rem}
  main table.tb-obras tr{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;
    border:1px solid var(--linha);border-radius:9px;padding:.65rem .75rem;background:var(--papel)}
  main table.tb-obras td{display:block;border:0;padding:.1rem 0;text-align:left;width:auto;
    font-size:.86rem}
  main table.tb-obras td.sec{display:none}          /* cliente, local, tipo, escala */
  main table.tb-obras td[data-rot]::before{content:attr(data-rot) ": ";font-size:.64rem;
    text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-fraca)}

  /* Codigo e obra sao a identidade da linha: ocupam a largura toda, sem rotulo,
     e em corpo maior. Quem varre uma lista procura por eles. */
  main table.tb-obras td[data-rot="Código"],
  main table.tb-obras td[data-rot="Obra"]{grid-column:1 / -1}
  main table.tb-obras td[data-rot="Código"]::before,
  main table.tb-obras td[data-rot="Obra"]::before{content:none}
  main table.tb-obras td[data-rot="Código"] a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.74rem;color:var(--tinta-fraca);text-decoration:none}
  main table.tb-obras td[data-rot="Obra"] a{font-size:1rem;font-weight:600;line-height:1.25}

  main table.tb-obras td.num{text-align:left;white-space:normal;width:auto}
  main table.tb-obras td:empty{display:none}

  /* As acoes vao para o fim do cartao, lado a lado, sem dominar: o cartao
     existe para dizer QUE obra e' aquela, nao para oferecer botao. */
  main table.tb-obras td.acoes{grid-column:1 / -1;display:flex;gap:.4rem;margin-top:.45rem}
  main table.tb-obras td.acoes::before{content:none}
  main table.tb-obras td.acoes .bt{flex:1 1 auto;min-height:2.3rem;font-size:.8rem}

  /* Alvo de toque: botao de lista no celular nao pode ser menor que isto. */
  main .bt.mini{min-height:2.2rem}
  /* O topo da tela usa a largura toda. A densidade dele — altura do titulo e
     largura dos botoes — e' definida UMA VEZ, no bloco do cabecalho de Obras
     mais abaixo. Duas regras para `.topo .bt` com valores diferentes venceriam
     por ordem de arquivo, e quem editasse depois nao saberia qual vale. */
  main .topo{flex-wrap:wrap;gap:.5rem}
}


/* ===================================================================== *
 * O CABECALHO DE OBRAS NO CELULAR
 *
 * Os prints do iPhone mostraram a faixa cinza de Obras ocupando muito mais
 * altura que a das outras telas. A causa: `.topo` empilha titulo e botoes com
 * o espacamento do desktop, e em Obras ha' dois botoes de governanca ao lado
 * de um h1 de 1.6rem — tres linhas antes de qualquer obra aparecer.
 *
 * A densidade passa a ser a de "Meus gastos", que ja' esta' certa: titulo
 * menor, margem curta, e os botoes na mesma faixa em vez de abaixo dela.
 * Nao e' redesenho — e' a mesma identidade, na altura das outras telas.
 * ===================================================================== */
@media(max-width:700px){
  main .topo{margin-bottom:.6rem;align-items:center;row-gap:.35rem}
  main .topo h1{font-size:1.15rem;margin:0;line-height:1.2}
  /* Os botoes do topo deixam de esticar para a largura toda: dois botoes
     ocupando duas linhas inteiras eram metade do espaco util. */
  main .topo .bt{flex:0 1 auto;font-size:.78rem;padding:.4rem .7rem;min-height:2.1rem}
  main .topo .bt.sec{white-space:nowrap}
  /* A nota logo abaixo do topo tambem encolhe: ela explica, nao compete. */
  main .topo + .nota{margin-top:.15rem;font-size:.84rem;padding:.55rem .7rem}
}


/* ===================================================================== *
 * NF / COMPROVANTE — os dois caminhos de envio, no celular
 *
 * "Tirar foto" vem primeiro e ocupa a mesma largura de "Escolher arquivo":
 * em campo, a camera e' o caminho de nove em dez vezes, e um botao menor que
 * o outro faria a pessoa procurar o certo.
 * ===================================================================== */
.cp-envio{display:flex;gap:.5rem;margin:.2rem 0 .8rem;flex-wrap:wrap}
.cp-envio .bt{flex:1 1 9rem;min-height:2.7rem;display:grid;place-items:center;cursor:pointer}

@media(max-width:700px){
  /* A lista de gastos tambem vira cartao: sete colunas num aparelho de 375px
     so' se leem rolando de lado, e rolando perde-se a descricao. */
  main table.tb-gastos{display:block}
  main table.tb-gastos thead{display:none}
  main table.tb-gastos tbody{display:flex;flex-direction:column;gap:.55rem}
  main table.tb-gastos tr{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;
    border:1px solid var(--linha);border-radius:9px;padding:.65rem .75rem;background:var(--papel)}
  main table.tb-gastos td{display:block;border:0;padding:.1rem 0;text-align:left;width:auto;
    font-size:.86rem}
  main table.tb-gastos td.sec{display:none}
  main table.tb-gastos td[data-rot]::before{content:attr(data-rot) ": ";font-size:.64rem;
    text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-fraca)}
  main table.tb-gastos td[data-rot="Descrição"]{grid-column:1 / -1}
  main table.tb-gastos td[data-rot="Descrição"]::before{content:none}
  main table.tb-gastos td[data-rot="Descrição"]{font-size:.98rem;font-weight:600;line-height:1.25}
  main table.tb-gastos td.num{text-align:left;white-space:normal}
  main table.tb-gastos td.acoes{grid-column:1 / -1;margin-top:.4rem}
  main table.tb-gastos td.acoes::before{content:none}
  main table.tb-gastos td.acoes .bt{width:100%;min-height:2.3rem}
  .cp-envio .bt{flex:1 1 100%}
}

/* ==========================================================================
 * OS FATOS DE CAMPO DO DIÁRIO — RDO-1.
 *
 * Seis assuntos no mesmo diário. Abertos ao mesmo tempo eles viram uma tela de
 * rolagem infinita no celular, e é no celular que o diário é preenchido — por
 * isso cada um é um `<details>` fechado, com a contagem no título.
 *
 * NENHUMA TABELA. As listas são linhas empilhadas que quebram sozinhas: no
 * desktop a linha fica numa faixa só; no celular ela vira duas ou três. Rolagem
 * horizontal em tela de campo é o defeito que o bloco anterior corrigiu, e não
 * se reintroduz aqui.
 * ========================================================================== */
.fato-bloco{border:1px solid var(--linha,#e2e8ee);border-radius:8px;margin:.5rem 0;
  background:var(--fundo-cartao,#fff)}
.fato-bloco>summary{cursor:pointer;padding:.7rem .9rem;display:flex;align-items:center;
  gap:.5rem;flex-wrap:wrap;list-style:none;min-height:44px}
.fato-bloco>summary::-webkit-details-marker{display:none}
.fato-bloco>summary::before{content:'▸';color:var(--cinza,#7b8695);font-size:.8rem;
  transition:transform .15s}
.fato-bloco[open]>summary::before{transform:rotate(90deg)}
.fato-bloco[open]>summary{border-bottom:1px solid var(--linha,#e2e8ee)}
.fato-bloco>.nota{padding:.5rem .9rem 0}
.fato-corpo{padding:.7rem .9rem .9rem}

.fato-linhas{display:flex;flex-direction:column;gap:.4rem;margin:.5rem 0}
.fato-linha{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem .6rem;border-radius:6px;background:var(--fundo-suave,#f4f7f9)}
.fato-linha.col{flex-direction:column;align-items:stretch;gap:.25rem}
.fato-linha .cresce{flex:1 1 200px;min-width:0}
.fato-linha .num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Os três botões do checklist ficam do tamanho do dedo e nunca escapam da
 * largura: no celular eles descem para a linha de baixo em vez de espremer a
 * pergunta. */
.chk-botoes{display:flex;gap:.3rem;flex-wrap:wrap}
.chk-botoes .bt{min-width:56px;min-height:38px}
.chk-botoes .bt.ativo{background:var(--azul,#1d4e73);color:#fff;border-color:var(--azul,#1d4e73)}

@media(max-width:700px){
  .fato-bloco>summary{padding:.8rem .7rem}
  .fato-corpo{padding:.6rem .7rem .8rem}
  .fato-linha{align-items:flex-start}
  .fato-linha .num{width:100%}
}

/* ==========================================================================
 * O ENVELOPE RESPONSIVO DA OBRA — hotfix de 25/09/2026.
 *
 * A homologação visual em desktop e celular encontrou conteúdo fora do
 * viewport, corte lateral, cartões espremidos e a faixa de onze abas maior que
 * a tela. Auditadas, as causas eram quatro, e nenhuma delas era da tela de
 * Encerramento:
 *
 *   1. `main` tinha `overflow-x:auto` — a PÁGINA rolava de lado em vez de o
 *      componente largo se conter;
 *   2. filhos de flex e de grid nasciam `min-width:auto` e se recusavam a
 *      encolher, empurrando o pai;
 *   3. `.g2`…`.g5` EXIGIAM 300px, 210px, 165px, 150px de coluna — largura que
 *      um celular dentro de um cartão não tem;
 *   4. as tabelas de `#tela` não tinham rolagem própria (a conversão em cartão
 *      existia, e só dentro do modal).
 *
 * As três primeiras estão corrigidas na origem, acima. Esta seção trata da
 * quarta e do que é específico da obra.
 *
 * ---------------------------------------------------------------------------
 * A ESCALA DE PONTOS DE QUEBRA
 *
 * O arquivo tinha treze larguras diferentes — 520, 600, 620, 640, 700, 720,
 * 760, 768, 850, 860, 900, 960 e 1000 —, cada uma escolhida no dia em que o
 * componente foi escrito. Duas telas irmãs mudavam de forma em larguras
 * distintas, e ninguém conseguia prever onde.
 *
 * A escala passa a ser três números, e é ela que as regras novas usam:
 *
 *   ≤ 640px    CELULAR          uma coluna, navegação por seletor
 *   ≤ 1024px   TABLET           duas colunas, navegação ainda compacta
 *   > 1024px   DESKTOP          a densidade atual, intocada
 *
 * 860px continua existindo e não foi mexido: é o ponto onde a gaveta do menu
 * lateral aparece, homologado no bloco de 24/09. Renumerá-lo mudaria um
 * comportamento aprovado para arrumar a tabela de outro. As demais larguras
 * antigas continuam onde estão, em componentes que este hotfix não toca —
 * normalizá-las todas seria redesenho, e não correção.
 * ========================================================================== */

/* A REDE DE SEGURANÇA. `clip` e não `hidden`: `hidden` transformaria o body num
 * contêiner de rolagem e a faixa de abas, que é `position:sticky`, deixaria de
 * grudar. `clip` corta sem criar rolagem — e só age se alguma coisa escapar,
 * o que depois das correções acima não deve mais acontecer. */
html, body { overflow-x: clip; }

/* -------------------------------------------------- a navegação da obra --- */
/* O SELETOR EXISTE SEMPRE NA MARCAÇÃO, E APARECE SÓ NO CELULAR.
 *
 * Onze abas não cabem em 375px de nenhum jeito: comprimidas ficam ilegíveis, e
 * roladas escondem metade sem dizer que estão ali. No celular a navegação da
 * obra vira um seletor — um toque, a lista inteira, o nome por extenso. */
.obra-abas-seletor { display: none; }
.obra-abas { display: flex; flex-wrap: wrap; overflow-x: visible; }

@media (max-width: 1024px) {
  /* No tablet as abas ainda cabem, mas quebrando em duas linhas em vez de
   * rolarem: o que está fora de vista é o que ninguém encontra. */
  .obra-abas { flex-wrap: wrap; border-bottom: 1px solid var(--linha); }
  .obra-abas button { padding: .5rem .6rem; font-size: .84rem; }
  .obra-subabas { flex-wrap: wrap; overflow-x: visible; }
}

@media (max-width: 640px) {
  .obra-abas { display: none; }
  .obra-abas-seletor {
    display: block; width: 100%; min-width: 0; margin: 0 0 .7rem;
    padding: .7rem .6rem; min-height: 46px; font-size: .95rem; font-weight: 600;
    border: 1px solid var(--linha); border-radius: 8px;
    background: var(--papel); color: var(--tinta);
  }
  .obra-subabas { gap: .3rem; }
  .obra-subabas button { padding: .45rem .7rem; min-height: 38px; font-size: .82rem; }
}

/* ------------------------------------------------- o cabeçalho da obra ---- */
/* O BOTÃO NÃO DISPUTA A LINHA COM O TÍTULO.
 *
 * Em 375px "Voltar às obras" e o código da obra brigavam pela mesma faixa, e o
 * nome da obra saía cortado. Abaixo de 640px o botão desce para a própria
 * linha e ocupa a largura toda — que é também a área de toque que ele deveria
 * ter desde sempre. */
.obra-cabeca h1 { overflow-wrap: break-word; line-height: 1.25; }

@media (max-width: 640px) {
  .obra-cabeca { align-items: flex-start; row-gap: .6rem; }
  .obra-cabeca .cresce { flex: 1 1 100%; }
  .obra-cabeca h1 { font-size: 1.15rem; }
  .obra-cabeca > .bt { flex: 1 1 100%; min-height: 44px; }
}

/* ----------------------------------------------- as tabelas das telas ----- */
/* TABELA LARGA ROLA NA PRÓPRIA CAIXA, E NUNCA NA PÁGINA.
 *
 * `.rolagem` já continha as que estavam dentro dele; o resto vazava. Dar
 * `display:block` mais `overflow-x:auto` à própria tabela a transforma em seu
 * próprio contêiner de rolagem, sem uma linha de marcação nova.
 *
 * `max-height:none` nas `.rolagem` do celular porque duas rolagens aninhadas —
 * a da caixa e a da página — é a pior das navegações com o dedo. */
@media (max-width: 1024px) {
  #tela .rolagem { max-width: 100%; overflow-x: auto; }
  #tela table { min-width: 0; }
}

@media (max-width: 640px) {
  #tela .rolagem { max-height: none; }
  /* A tabela vira seu próprio rolador. A `.tb-chave-valor` fica de fora: ela
   * já é duas colunas e cabe. */
  #tela table:not(.tb-chave-valor) { display: block; max-width: 100%; overflow-x: auto; }
  #tela table:not(.tb-chave-valor) thead th { position: static; }

  /* ONDE A TABELA TRAZ RÓTULO POR CÉLULA, A LINHA VIRA CARTÃO.
   *
   * A CONDIÇÃO É O DADO, e não uma classe que alguém lembra de pôr. `data-rot`
   * é o rótulo da coluna repetido na célula; onde ele existe, o cartão sai
   * legível, e onde não existe sairia uma pilha de valores sem nome — pior que
   * uma tabela que rola. `:has()` deixa o CSS perguntar exatamente isso, e
   * vinte e nove tabelas das telas de obra passam a se adaptar sem uma linha de
   * marcação nova.
   *
   * Navegador sem `:has()` ignora a regra e cai na rolagem interna definida
   * acima: degrada, e não quebra.
   *
   * `.tb-obras` fica de fora porque já tem cartão próprio, desenhado em duas
   * colunas no bloco de 24/09 — reconverter por cima produziria duas regras
   * disputando a mesma linha. */
  #tela table:has(td[data-rot]):not(.tb-obras):not(.tb-chave-valor) {
    display: table; overflow: visible; }
  #tela table:has(td[data-rot]):not(.tb-obras):not(.tb-chave-valor) thead { display: none; }
  #tela table:has(td[data-rot]):not(.tb-obras):not(.tb-chave-valor) tbody {
    display: flex; flex-direction: column; gap: .5rem; }
  #tela table:has(td[data-rot]):not(.tb-obras):not(.tb-chave-valor) tr {
    display: block; border: 1px solid var(--linha); border-radius: 8px;
    padding: .55rem .65rem; }
  #tela table:has(td[data-rot]):not(.tb-obras):not(.tb-chave-valor) td {
    display: block; border: 0; padding: .18rem 0; text-align: left; width: auto;
    white-space: normal; overflow-wrap: break-word; }
  #tela table:has(td[data-rot]):not(.tb-obras):not(.tb-chave-valor) td[data-rot]::before {
    content: attr(data-rot) ": "; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--tinta-fraca); }
  #tela table:has(td[data-rot]):not(.tb-obras):not(.tb-chave-valor) td:empty { display: none; }
}

/* ------------------------------------------------------ cartões e KPIs ---- */
@media (max-width: 640px) {
  /* Uma coluna quando o conteúdo é texto. Duas colunas de 160px produzem a
   * quebra palavra por palavra que o desktop acabou de perder. */
  .cartao { padding: .8rem .75rem; }
  .cartao .grade.g2, .cartao .grade.g3 { grid-template-columns: 1fr; }
  /* Os KPIs continuam em dois: são número curto e rótulo curto, e empilhá-los
   * daria uma tela de rolar sem ler. */
  .grade.g4, .grade.g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jornada-s1 { gap: .4rem; }
  .passo-s1 { flex: 1 1 100%; }
}

/* --------------------------------------------- os blocos do RDO-1 -------- */
/* Os `<details>` do diário já nasceram para o celular no bloco anterior. O que
 * faltava era o par de campos lado a lado: em 375px, dois campos de formulário
 * dividindo a linha deixam cada rótulo com quatro caracteres. */
@media (max-width: 640px) {
  .fato-corpo .grade { grid-template-columns: 1fr; }
  .fato-corpo .campo input, .fato-corpo .campo select { min-height: 42px; }
  .fato-corpo .bt { min-height: 44px; }
}

/* ==========================================================================
 * HOTFIX RESPONSIVO 2 — o que a homologação no aparelho real mostrou.
 *
 * O primeiro hotfix tirou o transbordo horizontal. Restaram três defeitos que
 * só aparecem no telefone de verdade, e as três causas foram achadas:
 *
 *   1. a faixa escura de centenas de pixels — `#app` distribuía a sobra de
 *      `100vh` entre as duas LINHAS do grid, e a do `nav` é grafite.
 *      Corrigido na origem, acima: `grid-template-rows:auto 1fr`.
 *   2. os campos do RDO se sobrepondo — duas colunas de ~160px num formulário,
 *      e um campo com `grid-column:span 3` dentro de um grid de 2 colunas.
 *   3. as tabelas do Encerramento perdendo texto — elas são
 *      `.tb-chave-valor`, e o primeiro hotfix as EXCLUIU do tratamento por
 *      um motivo escrito e errado: "ela já é duas colunas e cabe". São
 *      QUATRO: `th td th td`, dois pares por linha.
 * ========================================================================== */

/* -------------------------------------------- 2 · O CAMPO LARGO ----------- */
/* O ESTILO EM LINHA NÃO SABIA RESPONDER AO TAMANHO DA TELA.
 *
 * O MECANISMO DA COLISÃO, verificado e não suposto. Em 375px a folha do diário
 * já era de UMA coluna — havia regra para isso desde antes. O campo "Motivo da
 * parada" trazia `style="grid-column:span 3"`: atravessar três trilhas num
 * grid que tem uma faz o navegador CRIAR DUAS TRILHAS IMPLÍCITAS. Aquela linha
 * passa a ser três vezes mais larga que o contêiner, escapa da caixa e cai por
 * cima dos campos de baixo. Era o campo largo que colidia com os vizinhos, e
 * não os vizinhos entre si.
 *
 * Virou classe para poder mudar de comportamento por largura — e de quebra o
 * arquivo perdeu quatro estilos em linha. */
.campo-largo{grid-column:span 2}
.campo-largo-3{grid-column:span 3}

/* --------------------------- 3 · O FORMULÁRIO NO CELULAR ------------------ */
@media (max-width: 640px) {
  /* UMA COLUNA, E SEM EXCEÇÃO DE VÃO.
   *
   * Duas colunas num aparelho de 375px dão ~150px por campo: o rótulo "Clima
   * da tarde" quebra, o seletor fica do tamanho de um dedo e meio, e o campo
   * de baixo encosta no de cima. Ler e tocar vêm antes de densidade.
   *
   * O `span` é anulado junto: num grid de uma coluna, atravessar duas é o
   * mesmo erro do `span 3` num de duas. */
  .grade:has(.campo){grid-template-columns:1fr}
  /* A MESMA REGRA SEM `:has()`, para as telas que a homologação apontou.
   *
   * `:has()` é o seletor certo — ele pergunta exatamente "esta grade tem
   * campos de formulário?" —, mas um navegador que não o entenda ignoraria a
   * linha inteira e o RDO voltaria a colidir. A folha do diário e os blocos de
   * fato são nomeados à parte para que a correção não dependa disso. */
  #d_folha .grade,.fato-corpo .grade,#modalCorpo .grade{grid-template-columns:1fr}
  .campo-largo,.campo-largo-3{grid-column:auto}
  /* A REGRA DA FOLHA É MAIS ESPECÍFICA, E POR ISSO PRECISA SER REPETIDA AQUI.
   *
   * `#d_folha .campo-largo-3{span 2}`, lá em cima na faixa de 768px, vale
   * também abaixo de 640 e venceria a linha anterior por especificidade — o
   * campo voltaria a atravessar duas trilhas num grid de uma, que é
   * exatamente a colisão que este hotfix corrige. Com o mesmo prefixo, a
   * ordem decide, e a de baixo é esta. */
  #d_folha .campo-largo,#d_folha .campo-largo-3{grid-column:auto}

  /* O campo é rótulo em cima, controle embaixo — em fluxo, nunca posicionado. */
  .campo{display:block;min-width:0;margin-bottom:.85rem}
  .campo label{display:block;position:static;white-space:normal;
    overflow-wrap:break-word;margin-bottom:.25rem;font-size:.78rem}
  .campo input,.campo select,.campo textarea{
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:42px}
  /* O campo numérico estreito era o que mais invadia o vizinho: sem largura
   * mínima própria, ele encolhia até o rótulo transbordar por cima do de baixo. */
  .campo input[type="number"],.campo input[type="time"],.campo input[type="date"]{width:100%}
}

/* ------------------- 5 · A TABELA CHAVE → VALOR NO CELULAR ---------------- */
/* QUATRO COLUNAS, E NÃO DUAS — o motivo pelo qual ela ficou de fora antes.
 *
 * `<tr><th>Contratado</th><td>R$ …</td><th>Saldo nunca medido</th><td>R$ …</td></tr>`
 * são dois pares por linha. Em 375px isso dá menos de 90px por célula, e o
 * `white-space:nowrap` do cabeçalho corta a frase: "SALDO NUNCA MED…".
 *
 * No celular cada par vira um bloco: a chave numa linha, o valor na de baixo.
 * Nada é escondido e nada rola de lado — é a apresentação que o bloco pediu,
 * e a mesma que o resumo do Encerramento e a Desmobilização precisam. */
/* A REGRA VALE PARA TODA TABELA CHAVE → VALOR, e não só para a que tem a
 * classe. Varridas as telas, são SETE com `.tb-chave-valor` e mais VINTE E
 * NOVE que têm a mesma forma — `<tr><th>rótulo</th><td>valor</td>` — sem a
 * classe. Corrigir só as sete deixaria as outras cortando texto pelo mesmo
 * motivo, que é exatamente o erro que este hotfix veio desfazer.
 *
 * A condição é a ESTRUTURA: `th` como primeira célula de uma linha do corpo é
 * um rótulo, por definição. Cabeçalho de coluna mora em `thead`, e por isso
 * uma tabela comum não é alcançada.
 *
 * `.bm-planilha` fica de fora: ela é a planilha larga do boletim, com colunas
 * grudadas à esquerda de propósito — rolar de lado ali é o desenho, e não o
 * defeito. */
@media (max-width: 640px) {
  #tela table.tb-chave-valor,
  #tela table:has(tbody > tr > th:first-child):not(.bm-planilha)
    {display:block;width:100%;overflow:visible}
  #tela table.tb-chave-valor tbody,
  #tela table:has(tbody > tr > th:first-child):not(.bm-planilha) tbody
    {display:flex;flex-direction:column;gap:.55rem}
  #tela table.tb-chave-valor tr,
  #tela table:has(tbody > tr > th:first-child):not(.bm-planilha) tbody > tr
    {display:grid;grid-template-columns:1fr;gap:0;
     border:1px solid var(--linha);border-radius:8px;padding:.5rem .65rem}
  #tela table.tb-chave-valor th,
  #tela table:has(tbody > tr > th:first-child):not(.bm-planilha) tbody > tr > th
    {display:block;position:static;width:auto;padding:.3rem 0 0;border:0;
     background:none;white-space:normal;overflow-wrap:break-word;font-size:.66rem}
  #tela table.tb-chave-valor th:first-child,
  #tela table:has(tbody > tr > th:first-child):not(.bm-planilha) tbody > tr > th:first-child
    {padding-top:0}
  #tela table.tb-chave-valor td,
  #tela table:has(tbody > tr > th:first-child):not(.bm-planilha) tbody > tr > td
    {display:block;width:auto;padding:.05rem 0 .15rem;border:0;text-align:left;
     white-space:normal;overflow-wrap:break-word;font-size:.92rem}
  /* Uma linha pode trazer dois pares; o traço separa o segundo do primeiro sem
   * transformar cada par num cartão solto. */
  #tela table.tb-chave-valor th:nth-of-type(n+2),
  #tela table:has(tbody > tr > th:first-child):not(.bm-planilha) tbody > tr > th:nth-of-type(n+2)
    {margin-top:.45rem;padding-top:.45rem;border-top:1px dashed var(--linha)}
}

/* ------------------- 6 · NADA DE TRUNCAMENTO ACIDENTAL -------------------- */
/* O CABEÇALHO DE TABELA NASCE `white-space:nowrap`, e no celular isso corta.
 *
 * A regra vale só onde a tabela já virou cartão ou chave→valor: onde a tabela
 * continua tabela — Gantt, planilha de BM — o `nowrap` é deliberado, porque
 * coluna que quebra em três linhas desalinha a leitura inteira. */
@media (max-width: 640px) {
  #tela table:has(td[data-rot]) th,
  #tela table:has(td[data-rot]) td,
  #tela table.tb-chave-valor th,
  #tela table.tb-chave-valor td{white-space:normal;overflow-wrap:break-word}
  /* `overflow-wrap:anywhere` NÃO entra aqui, e a razão é medida.
   *
   * O bloco o autorizou "quando necessário para conteúdo excepcionalmente
   * longo". Nenhum caso desses apareceu na varredura, e a suíte de Suprimentos
   * guarda — com razão — que ele não exista na folha: `anywhere` participa do
   * cálculo da largura mínima, e uma coluna que o use pode encolher até UMA
   * LETRA. Foi um defeito real, corrigido num bloco anterior.
   *
   * `break-word`, que é o que está aplicado acima, quebra a palavra longa sem
   * mexer na largura mínima da coluna. Se um dia aparecer um hash ou um
   * caminho de arquivo que não caiba nem assim, `anywhere` entra NAQUELE
   * elemento, com a guarda estreitada e o motivo escrito. Deixá-lo aqui hoje
   * seria uma porta aberta para um problema que ninguém tem. */
}

/* --------------- 9 · A GAVETA FECHADA NÃO RESERVA ESPAÇO ------------------ */
/* Já era `display:none` — e o véu também. Esta regra existe para que continue
 * sendo: `hidden` no elemento e `display:none` na folha, para que nem o leitor
 * de tela nem o Tab percorram um menu que ninguém abriu. */
#veuMenu[hidden]{display:none}