/* Identidade do ENLACE. O verde e o grafite (#00B399 e #212620) nasceram do
   logo da ENBASE e ficam: o CLAUDE.md pediu marca propria, nao cor nova, e
   trocar cor sem motivo quebraria a unica coisa ja estavel.

   A TELA E 100% DO ENLACE - simbolo, cor e letra. Nenhum logo de cliente em
   lugar nenhum da interface, e nem o de quem desenvolve: quem trabalha aqui ja
   sabe onde trabalha, e o que a tela precisa responder e qual FERRAMENTA e
   esta. Isso e seguro porque e um banco e uma instalacao por empresa.
   Se um dia uma instalacao atender mais de uma empresa, o nome da empresa
   precisa aparecer na barra - e so ai.

   Papel de cada cor, para nao virar decoracao:
     tinta   - estrutura: menu, cabecalho de tabela, titulos
     acento  - acao e posicao: botao, item ativo, foco
     alerta  - so o que exige decisao de alguem
*/
:root{
  /* OS TOKENS APONTAM PARA O KIT, e nao repetem os hex dele. Duas paletas
     com os mesmos nomes divergem na primeira correcao feita num lado so - e
     ninguem descobre, porque as duas continuam funcionando. O kit vive em
     static/enlace.css e e carregado antes deste arquivo. */
  --tinta:var(--enlace-grafite); --tinta-suave:#3A423A; --tinta-lavada:#E8EBE8;
  --acento:var(--enlace-verde);
  --acento-escuro:var(--enlace-verde-escuro);   /* #007A66: o verde puro NAO
                                                   tem contraste sobre branco */
  --acento-lavado:var(--enlace-verde-fundo);
  --cinza:var(--enlace-cinza); --grafite:#2B302B;
  --fundo:var(--enlace-fundo); --superficie:var(--enlace-branco);
  --linha:var(--enlace-linha);
  --alerta:var(--enlace-terra);                 /* terra, complementar do
                                                   verde - nao um vermelho de
                                                   fora da paleta */
  --alerta-fundo:#FBEFE9; --ok:var(--enlace-verde-escuro);
  --aviso:#B07800; --aviso-fundo:#FFF3D4;
  /* A ESTRUTURA E O GRAFITE DO KIT, e nao um teal inventado aqui.
     Ate 10/09/2026 esta linha dizia #113E38 - "o verde da marca escurecido" -,
     uma cor que NAO esta entre os tokens da marca. O enlace.css sempre disse
     que o chrome e grafite: esta escrito la, na regra .topo, desde que o
     arquivo nasceu. Dois arquivos discordando sobre a identidade, e o mais
     novo vencendo calado.

     Com a lateral em grafite o verde volta a ser o UNICO verde da tela - e
     por isso volta a ser visto. Antes, o que o olho registrava era "barra
     lateral verde-escura", que e o visual de metade dos ERPs, e o acento da
     marca sumia dentro dela. */
  --estrutura:var(--enlace-grafite);

  /* O menu inteiro sai destes nove valores. Trocar entre escuro e claro e
     trocar so este bloco - nenhuma regra abaixo conhece cor literal.

     MENU CLARO desde 20/10/2026, escolhido pelo Basso na pagina de ajustes do
     kit de identidade (kit-identidade/modelo/ajustes.html), olhando os dois
     lado a lado. O item ativo fica no verde-escuro sobre o verde lavado:
     contraste 4,9, dentro da norma. O verde puro da marca continua no botao de
     foco e na barrinha do item ativo. */
  --lat-fundo:#FFFFFF;  --lat-borda:#E2E7E4;  --lat-titulo:#212620;
  --lat-texto:#3B443F;  --lat-texto-suave:#7C877F;  --lat-hover:#F2F5F3;
  --lat-ativo-fundo:var(--acento-lavado);  --lat-ativo-texto:var(--acento-escuro);
  --lat-ativo-barra:var(--acento);
  --lat-inicial-fundo:var(--acento-lavado); --lat-inicial-texto:var(--acento-escuro);

  /* MENU ESCURO (grafite, o de 10/09 a 20/10/2026) - para voltar, troque o
     bloco acima por este, e o simbolo da regua em base.html volta a "branco".
     Nele o item ativo (verde sobre o grafite clareado) mede 4,1, abaixo dos
     4,5 da norma; o #3FD8BF no --lat-ativo-texto o leva a 6,1.
  --lat-fundo:var(--estrutura);  --lat-borda:rgba(255,255,255,.10);
  --lat-titulo:#FFFFFF;
  --lat-texto:rgba(255,255,255,.84); --lat-texto-suave:rgba(255,255,255,.55);
  --lat-hover:rgba(255,255,255,.08);
  --lat-ativo-fundo:rgba(255,255,255,.11);
  --lat-ativo-texto:var(--acento);
  --lat-ativo-barra:var(--acento);
  --lat-inicial-fundo:rgba(255,255,255,.18); --lat-inicial-texto:#FFFFFF;
  */
  --lat-larga:288px; --lat-estreita:62px;
}
*{box-sizing:border-box}

/* QUEM PEDIU MENOS MOVIMENTO RECEBE MENOS. Sao tres transicoes no sistema
   inteiro - o painel que abre, a seta que gira -, e nenhuma delas carrega
   informacao que a ausencia apague. Respeitar a preferencia do sistema custa
   tres linhas e e piso, nao enfeite. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{margin:0;background:var(--fundo);color:var(--grafite);
  font-family:var(--enlace-fonte);font-size:15px;line-height:1.5}
a{color:var(--tinta)}

/* ------------------------------------------------------------ menu lateral
   Claro. O fundo do menu e BRANCO e o da pagina e cinza levissimo: a separacao
   vem da diferenca entre os dois mais uma linha de 1px, e nao de um bloco de
   cor pesado. Por isso o menu nao pode repetir o cinza da pagina - se
   repetisse, sumiria a fronteira e a navegacao pareceria flutuar no conteudo.

   Fixo, para nao rolar junto com a tabela de trechos - que e longa e onde a
   pessoa mais precisa trocar de tela.

   A LARGURA E A UNICA COISA QUE MUDA ao recolher: o painel inteiro sai e a
   regua fica. O conteudo se aproxima junto - o painel OCUPA LUGAR, nao
   flutua por cima.

   Isto foi conferido no Sienge em 09/09/2026, com o Basso mostrando a tela.
   Eu tinha feito o painel flutuar por cima do conteudo, imaginando ser isso o
   que ele queria; nao era. No Sienge, recolher devolve a largura ao conteudo,
   que reflui. Ver a coisa funcionando custou dez minutos e evitou uma tela
   inteira construida em cima de um palpite meu. */
.lateral{position:fixed;top:0;bottom:0;left:0;width:var(--lat-larga);z-index:10;
  background:var(--lat-fundo);color:var(--lat-texto);
  border-right:1px solid var(--lat-borda);
  /* LINHA, e nao coluna: a regua de modulos e o painel ficam LADO A LADO
     desde 05/09/2026. Era column quando a lateral tinha uma camada so. */
  display:flex;flex-direction:row;overflow:hidden;transition:width .18s ease}
html.painel-fechado .lateral{width:var(--lat-estreita)}

.area{margin-left:var(--lat-larga);transition:margin-left .18s ease}
html.painel-fechado .area{margin-left:var(--lat-estreita)}
.area.solta{margin-left:0}

.lat-topo{display:flex;align-items:center;gap:10px;min-height:58px;
  padding:14px 12px 14px 16px;border-bottom:1px solid var(--lat-borda)}
.lat-marca{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  color:var(--lat-titulo);text-decoration:none;font-weight:700;letter-spacing:-.01em}
.lat-sigla{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center}
.lat-sigla svg{width:30px;height:30px}
.lat-marca .lat-texto{font-size:16px;white-space:nowrap}

.lat-nav{flex:1;overflow-y:auto;padding:10px 0}
/* SAIRAM .lat-secao e .lat-objeto: nenhum template as usa desde que os modulos
   foram para a regua e a arvore perdeu o nivel de secao. Eram tambem os dois
   ultimos rotulos em caixa alta rastreada do sistema. Regra que nao casa com
   nada e como codigo que ninguem chama: nao esta certa, esta calada. */

/* ---- a arvore -----------------------------------------------------------
   O recuo cresce com o nivel e e a UNICA pista de hierarquia: cor ou tamanho
   por nivel deixariam o menu parecendo quatro menus diferentes.
   A seta e um botao separado do link: clicar na seta abre o grupo, clicar no
   rotulo navega. Juntos, abrir um grupo obrigaria a sair da tela atual. */
.lat-item{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 16px;font-size:14px;
  font-weight:500;color:var(--lat-texto);text-decoration:none;
  border-left:3px solid transparent}
/* O rotulo QUEBRA em ate duas linhas em vez de ser cortado. Com a arvore
   inteira aberta, os itens de nivel 3 e 4 comecam a 34 e 48px da borda: com
   nowrap, "Memoria de calculo da medicao" simplesmente sumia pela direita
   sem nenhum sinal de que havia mais texto. Menu e indice - nao adianta um
   indice cujo verbete voce nao consegue ler ate o fim. */
/* QUEBRA ENTRE PALAVRAS, e nao no meio delas. Ate 01/10/2026 estava
   `overflow-wrap:anywhere`, que deixa o navegador partir a palavra em
   qualquer letra: "Responsabilida / de tecnica". Agora quebra no espaco, e
   uma palavra que sozinha nao cabe se hifeniza pelas regras do portugues
   (o <html lang="pt-BR"> e que diz qual dicionario usar). */
.lat-item span{min-width:0;overflow-wrap:normal;hyphens:auto;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lat-item:hover{background:var(--lat-hover);color:var(--lat-titulo)}
.lat-item.ativo{background:var(--lat-ativo-fundo);color:var(--lat-ativo-texto);
  font-weight:600;border-left-color:var(--lat-ativo-barra)}
.lat-item svg{flex:0 0 19px;width:19px;height:19px}

.lat-linha{display:flex;align-items:center}
.lat-linha .lat-item{flex:1;min-width:0}
.lat-seta{flex:0 0 22px;width:22px;height:26px;padding:0;margin-left:13px;border:none;
  border-radius:var(--enlace-r-campo);background:transparent;color:var(--lat-texto-suave);cursor:pointer;
  display:grid;place-items:center}
.lat-seta:hover{background:var(--lat-hover);color:var(--lat-titulo)}
.lat-seta svg{width:14px;height:14px;transition:transform .15s ease}
.lat-seta.aberta svg{transform:rotate(90deg)}
/* o espaco onde a seta estaria, para as folhas alinharem com os nos */
.lat-vazio{flex:0 0 22px;margin-left:13px}
.lat-cabeca{padding-left:6px}
.lat-so-titulo{cursor:default}
.lat-so-titulo:hover{background:transparent;color:var(--lat-texto)}

/* recuo por nivel */
.lat-linha.n1 .lat-item, .lat-item.n1{padding-left:6px}
.lat-linha.n2 .lat-item, .lat-item.n2{padding-left:20px}
.lat-linha.n2 .lat-seta{margin-left:27px}
.lat-linha.n3 .lat-item, .lat-item.n3{padding-left:30px}
.lat-linha.n3 .lat-seta{margin-left:37px}
.lat-item.n2 .lat-vazio{margin-left:9px}
.lat-item.n3 .lat-vazio{margin-left:23px}
.lat-linha.n4 .lat-item, .lat-item.n4{padding-left:42px}
.lat-item.n4 .lat-vazio{margin-left:31px}
.lat-item.n3,.lat-item.n4{font-size:13.5px}

/* dois jeitos de estar inerte, e eles NAO sao a mesma coisa:
   .falta = a tela ainda nao existe (ponto ao lado)
   .sem   = a tela existe, mas precisa de um contrato ou obra aberta */
.lat-item.falta,.lat-item.sem{opacity:.36;cursor:default}
.lat-item.falta:hover,.lat-item.sem:hover{background:transparent;color:var(--lat-texto)}
.lat-ponto{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:currentColor;margin-left:7px;vertical-align:middle;opacity:.7}

.lat-pe{border-top:1px solid var(--lat-borda);padding:10px 0 12px}
.lat-usuario{display:flex;align-items:center;gap:10px;padding:8px 16px;overflow:hidden}
.lat-inicial{flex:0 0 28px;height:28px;border-radius:50%;
  background:var(--lat-inicial-fundo);color:var(--lat-inicial-texto);
  display:grid;place-items:center;font-size:12.5px;font-weight:700}
.lat-usuario .lat-texto{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.lat-usuario b{font-size:13px;font-weight:600;color:var(--lat-titulo);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lat-usuario small{font-size:11px;color:var(--lat-texto-suave)}
.lat-sair{font-size:13.5px;color:var(--lat-texto-suave)}

/* SAIRAM AQUI as vinte e tantas regras do antigo "menu-fechado", que
   encolhiam o painel a uma coluna de icones sem rotulo. Elas resolviam um
   problema que nao existe mais: quando o painel tinha lugar proprio, recolher
   era escolher entre 288 px de arvore e 62 px de simbolos parecidos. Agora o
   painel sai INTEIRO da frente e volta INTEIRO quando chamado - meio caminho,
   icone sem texto ocupando largura, era o pior dos dois lados. */

/* TELA ESTREITA: o painel nao cabe. Abaixo de 840 px, 288 px comem um terco
   da largura util, entao a lateral fica so na regua doa a quem doer - a
   preferencia de quem abriu continua guardada e volta sozinha na tela
   grande. */
@media (max-width:840px){
  .lateral{width:var(--lat-estreita)}
  .lat-painel{display:none}
  .area{margin-left:var(--lat-estreita)}
  .area.solta{margin-left:0}
  main{max-width:none}
}
@media print{
  .lateral{display:none}
  .area{margin-left:0}
}

/* SEM TETO. O teto de 1180 px existia para a linha de texto nao ficar longa
   demais - mas custava caro: numa tela de 1920 sobravam 332 px de cada lado
   enquanto a tabela da EAP, que precisa de 1590, tinha 1070 e rolava de lado.
   A pagina desperdicava 664 px e a tabela passava fome de 520.

   O teto foi para onde ele de fato importa: os PARAGRAFOS de explicacao,
   logo abaixo. Tabela e formulario usam a largura que houver; texto corrido
   para de crescer aos 100 caracteres, que e onde a leitura cansa. Limitar o
   recipiente para proteger o texto punia justamente quem tem tela grande. */
main{max-width:none;margin:0 auto;padding:24px}
/* A ENTRADA OCUPA A JANELA INTEIRA: o padding do main e o do conteudo das
   telas de trabalho, e ali ele deixaria uma moldura cinza em volta do desenho. */
main:has(> .entrada){padding:0}

/* Texto corrido para de crescer; o resto nao. */
/* TEXTO CORRIDO PARA DE CRESCER AOS 72 CARACTERES. Estava em 100ch, e a linha
   de 100 caracteres obriga o olho a percorrer meio metro de tela para achar o
   comeco da proxima - a leitura tropeca sozinha. Tabela e formulario continuam
   usando a largura que houver. */
.sub,
.cartao > p{max-width:72ch}
/* O TITULO TEM MEDIDA DE TITULO. Ele nao tinha nenhuma: numa tela de 1440 px o
   nome de uma obra saia numa linha unica de quase um metro, e um objeto de
   edital ocupava tres linhas de 24px no alto de tudo. `balance` reparte as
   linhas por igual em vez de deixar uma palavra sozinha na ultima, e
   `break-word` segura o codigo comprido sem separador que uma tabela SINAPI
   sempre tem. Quem encurta o TEXTO e o filtro `titulo`; isto aqui cuida da
   FORMA de quem ja chegou curto. */
h1{font-size:24px;margin:0 0 4px;color:var(--tinta);letter-spacing:-.015em;
  max-width:44ch;line-height:1.22;text-wrap:balance;overflow-wrap:break-word}
h2{font-size:18px;margin:28px 0 8px;color:var(--tinta)}
/* TITULO DE BLOCO DENTRO DE UM CARTAO. Nasceu na tela de Empresa, em
   17/09/2026: nove campos numa grade unica nao dizem que identificacao,
   endereco e contato sao tres perguntas diferentes, e quem confere o cabecalho
   de um boletim confere uma de cada vez.

   E MENOR que o h2 solto e leva uma regua em cima, porque aqui ele NAO abre
   uma secao da pagina - reparte o miolo de uma caixa que ja tem titulo. O
   primeiro do cartao dispensa a regua e a folga: ele encosta no cabecalho da
   caixa, e uma linha logo abaixo de outra linha e ruido. */
.bloco{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza);margin:26px 0 10px;padding-top:14px;
  border-top:1px solid var(--linha)}
.bloco:first-of-type{margin-top:10px;padding-top:0;border-top:0}
.sub{color:var(--cinza);margin:0 0 20px;font-size:14px}
/* O CARTAO USA O RAIO DE CAIXA, e nao o de campo: raio diz o TAMANHO da peca.
   Uma caixa que contem outras coisas nao pode ter o mesmo canto do botao que
   mora dentro dela. */
.cartao{background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--enlace-r-caixa);
  padding:20px 22px;margin-bottom:18px}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
/* CABECALHO CLARO, como o kit sempre disse. A faixa escura de antes punha um
   bloco pesado no alto de cada tabela - e sao muitas, alem das faixas de grupo
   logo abaixo. Com o cabecalho claro e uma regua grafite embaixo dele, o peso
   da tela vai para o DADO, que e o que se veio ler. O texto continua em caixa
   alta aqui, e so aqui: em cabecalho de coluna e convencao de planilha, nao
   enfeite - o engenheiro le a mesma coisa no Excel. */
/* A TABELA COMPACTA (20/10/2026, Basso, na pagina de ajustes): sistema de
   planilha e medicao - cabe mais linha sem rolar. Era 9px 11px e 8px 11px. */
th{background:#F7F8F6;color:var(--cinza);text-align:left;padding:6px 8px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;border-bottom:2px solid var(--estrutura)}
td{padding:5px 8px;border-bottom:1px solid #EDF0F4;vertical-align:top}
tr:hover td{background:#FAFBFD}
/* GRUPO E SUBGRUPO por PESO, e nao por dois blocos de cor cheia. Eram duas
   faixas solidas - grafite e verde-escuro - repetindo-se a cada tres linhas: a
   tabela ficava listrada de blocos e o dado, que e o que importa, virava o
   fundo. Agora o grupo e uma faixa clara com regua grafite a esquerda, e o
   subgrupo so uma linha mais forte. A hierarquia continua legivel e o verde
   deixa de ser usado como cor de fundo - ele volta a ser sinal. */
tr.grupo td{background:#EDEFEC;color:var(--tinta);font-weight:700;
  border-top:1px solid var(--linha);box-shadow:inset 3px 0 0 var(--estrutura)}
tr.sub td{background:#F5F6F4;color:var(--tinta);font-weight:600;font-size:13px;
  box-shadow:inset 3px 0 0 var(--cinza)}
tr.desativado td{background:var(--alerta-fundo)}
tr.desativado td:nth-child(2),tr.desativado td:nth-child(3){color:var(--alerta);font-weight:600}
.num{text-align:right}
label{display:block;font-size:13px;font-weight:600;color:var(--tinta);margin:12px 0 3px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--linha);
  border-radius:var(--enlace-r-campo);font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acento);outline-offset:-1px}
.grade{display:grid;gap:0 18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* O ENDERECO NAO USA A `.grade`, e a razao e de leitura e nao de gosto.
   A `.grade` e auto-fit: o numero de colunas muda com a largura da janela, e
   com ele muda a ORDEM VISUAL dos campos - os mesmos sete caem em lugares
   diferentes em cada monitor. Num formulario qualquer isso e indiferente; num
   ENDERECO nao e, porque endereco tem uma ordem que todo mundo ja sabe ler.

   Em 17/09/2026 o Basso olhou a tela e disse que faltava o Complemento. Ele
   estava la, quarto campo do bloco - so tinha caido num lugar onde a vista
   nao o procura. Campo que existe e ninguem acha e campo que nao existe.

   Tres linhas, sempre as mesmas: CEP e rua e numero / complemento e bairro /
   municipio e UF. Estreito, empilha na mesma ordem. */
.endereco{display:grid;gap:0 18px;
  grid-template-columns:minmax(120px,160px) minmax(200px,1fr) minmax(90px,130px);
  grid-template-areas:
    "cep logradouro numero"
    "complemento bairro bairro"
    "municipio municipio uf"}
.endereco>.cep{grid-area:cep}
.endereco>.logradouro{grid-area:logradouro}
.endereco>.numero{grid-area:numero}
.endereco>.complemento{grid-area:complemento}
.endereco>.bairro{grid-area:bairro}
.endereco>.municipio{grid-area:municipio}
.endereco>.uf{grid-area:uf}
@media (max-width:700px){
  .endereco{grid-template-columns:1fr;
    grid-template-areas:"cep" "logradouro" "numero" "complemento" "bairro"
                        "municipio" "uf"}
}
/* O BOTAO NAO E PILULA. Raio 20px num botao de 38px de altura e forma de
   aplicativo de consumo; isto e ferramenta de trabalho, e a forma dele agora
   sai do sistema de raios do kit, como campo e etiqueta. */
/* O BOTAO E VERDE-ESCURO, e nao o verde da marca (20/10/2026). Texto branco
   sobre o #00B399 mede 2,7 de contraste - o "Gravar" de todas as telas abaixo
   dos 4,5 da norma; sobre o #007A66, 5,3. Medido na pagina de ajustes do kit. */
button,.botao{background:var(--acento-escuro);color:#fff;border:none;
  border-radius:var(--enlace-r-campo);
  padding:9px 22px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  display:inline-block}
button:hover,.botao:hover{background:var(--tinta)}
.botao.simples{background:#fff;color:var(--tinta);border:1.5px solid var(--tinta)}
/* depois da regra base, senao a cor branca do .simples apagaria o hover */
.botao.simples:hover{background:var(--acento-lavado);color:var(--tinta)}
.acoes{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.aviso{background:var(--aviso-fundo);border-left:4px solid var(--aviso);
  padding:11px 15px;border-radius:0 3px 3px 0;margin:14px 0;font-size:14px}
.erro{background:var(--alerta-fundo);border-left:4px solid var(--alerta);
  padding:11px 15px;border-radius:0 3px 3px 0;margin:14px 0;font-size:14px;color:var(--alerta)}
.ok{background:var(--acento-lavado);border-left:4px solid var(--ok);padding:11px 15px;
  border-radius:0 3px 3px 0;margin:14px 0;font-size:14px}
.etiqueta{display:inline-block;padding:2px 9px;
  border-radius:var(--enlace-r-campo);font-size:11.5px;
  font-weight:600;background:var(--tinta-lavada);color:var(--tinta)}
.etiqueta.contrato{background:var(--acento-lavado);color:var(--acento-escuro)}
/* width:100% na tabela impedia o transbordo: as colunas se espremiam ate
   ficarem ilegiveis e a barra de rolagem nunca aparecia, porque nao havia
   nada fora da area visivel. Dentro de .rolagem a tabela passa a ter
   largura natural com piso de 100%, e ai sim ela transborda e rola. */
.rolagem{overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid var(--linha);border-radius:var(--enlace-r-campo);background:var(--superficie)}
.rolagem table{width:auto;min-width:100%;border-radius:0}
.rolagem table.larga{min-width:1320px}
.rolagem::-webkit-scrollbar{height:12px}
.rolagem::-webkit-scrollbar-track{background:var(--fundo);border-radius:var(--enlace-r-campo)}
.rolagem::-webkit-scrollbar-thumb{background:#C2CCC8;border-radius:var(--enlace-r-campo);
  border:3px solid var(--superficie)}
.rolagem::-webkit-scrollbar-thumb:hover{background:var(--acento)}
/* cabecalho fixo: numa EAP de 294 linhas, rolar para baixo sem cabecalho
   e ler numeros sem saber de que coluna sao. */
.rolagem.alta{max-height:70vh;overflow-y:auto}
/* O fundo tem de ser REPETIDO aqui porque sticky precisa de fundo opaco: sem
   ele as linhas passam por tras do cabecalho ao rolar. Mas repetir e perigoso -
   estava var(--fundo), o cinza da PAGINA, enquanto o color:#fff da regra de
   cima continuava valendo. Dava branco sobre cinza claro: contraste 1,09, o
   cabecalho inteiro da EAP ilegivel. A cor certa e a mesma do th normal.
   Se um dia a cor do th mudar, esta linha tem de mudar junto - o teste
   testes/test_telas.py confere que as duas nao se separam de novo. */
/* O CABECALHO FIXO USA A MESMA COR DO NORMAL. Parece obvio e nao e: sao duas
   regras em lugares diferentes do arquivo, e ao clarear o cabecalho em
   10/09/2026 eu clareei so uma - o cabecalho mudava de cor ao grudar no alto.
   Ha guarda de teste para isso desde antes, e foi ela que me pegou. */
.rolagem.alta thead th{position:sticky;top:0;z-index:2;background:#F7F8F6}
/* ------------------------------------------------------------- a entrada
   DUAS METADES: o desenho e o formulario. A esquerda, a secao da vala em traco
   sobre o grafite da marca - o assunto do sistema, antes de qualquer palavra.
   A direita, o campo, em branco, onde a mao vai.

   Era um cartao de 340px centralizado no cinza: a entrada de qualquer
   software. O que mudou nao foi o enfeite - foi a tela passar a dizer do que
   ela trata. 10/09/2026.

   Em tela estreita as duas viram uma coluna e o desenho encolhe, mas nao some:
   ele e a unica coisa da entrada que nao se repete em nenhuma outra tela. */
.entrada{display:grid;grid-template-columns:1.15fr 1fr;min-height:100vh}
.entrada-desenho{background:var(--estrutura);color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  gap:26px;padding:6vh 6vw}
.entrada-marca{color:#fff}
.entrada-marca svg{max-width:100%;height:auto}
/* O DESENHO HERDA A COR por currentColor - aqui ele e o verde da marca sobre o
   grafite, que e o unico lugar do sistema onde os dois se encontram em cheio. */
.entrada-secao{color:var(--acento);max-width:100%}
.entrada-secao svg{max-width:100%;height:auto}
.entrada-legenda{margin:0;max-width:46ch;font-size:13.5px;line-height:1.55;
  color:rgba(255,255,255,.72)}
.entrada-forma{display:flex;flex-direction:column;justify-content:center;
  padding:6vh 5vw;background:var(--superficie);max-width:520px}
.entrada-forma h1{margin-bottom:6px}
.entrada-forma .sub{max-width:38ch;margin-bottom:26px}
.entrada-forma .acoes{margin-top:22px}

@media (max-width:860px){
  .entrada{grid-template-columns:1fr;min-height:0}
  .entrada-desenho{padding:5vh 7vw;gap:18px}
  .entrada-secao svg{max-width:300px}
  .entrada-forma{max-width:none;padding:5vh 7vw}
}
.fonte{font-size:11.5px;color:var(--cinza);line-height:1.35}
.nivel{display:inline-block;width:19px;height:19px;line-height:19px;text-align:center;
  border-radius:50%;background:var(--tinta-lavada);color:var(--tinta);
  font-size:11px;font-weight:700}

/* ---- a EAP ---------------------------------------------------------------
   O campo de composicao guarda SO o codigo: largura de codigo, maiuscula
   automatica e fonte monoespacada, para CDS000046 e CDS000146 nao se
   parecerem. A descricao fica na coluna de descricao - nao dentro do campo. */
/* 168 px e nao 112: a LISTA SUSPENSA do datalist herda a largura do campo, e
   com 112 px o navegador cortava a linha antes de mostrar o codigo - que e a
   unica coisa que interessa ali, ja que a descricao esta na coluna ao lado.
   Campo estreito nao economizava espaco, escondia a resposta. */
.cod{width:168px;font-family:"IBM Plex Mono",Consolas,monospace;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.02em}
.cifra{width:104px;text-align:right;font-variant-numeric:tabular-nums}
.rolagem td.desc{min-width:300px;max-width:440px;white-space:normal;line-height:1.35}
.rolagem th,.rolagem td{white-space:nowrap}
details.cartao summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;
  gap:10px;flex-wrap:wrap}
details.cartao summary::-webkit-details-marker{display:none}
details.cartao summary::before{content:"+";display:inline-grid;place-items:center;
  width:22px;height:22px;flex:0 0 22px;border-radius:var(--enlace-r-campo);background:var(--acento);
  color:#fff;font-weight:700;line-height:1}
details.cartao[open] summary::before{content:"\2212"}

/* O somatorio fica GRUDADO no rodape da area de rolagem: numa EAP de 294
   linhas, um total que so aparece depois de rolar ate o fim nao e um total -
   e um numero escondido. */
.rolagem.alta tfoot td{position:sticky;bottom:0;z-index:2;background:var(--fundo);
  border-top:2px solid var(--acento);font-weight:600}
tfoot td.rot{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
td.total{font-weight:600;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------- a ficha
   OS FATOS DO CABECALHO, cada um com o seu nome. Eram uma linha so, colada com
   pontos no meio: "Contrato 238 - cliente DMAE - base CLOACAL-DMAE - por
   demanda - publico - assinado". Seis fatos de pesos diferentes na mesma
   frase, sem hierarquia, e o leitor tem de separa-los sozinho toda vez.

   Agora cada um e um par rotulo/valor, na mesma linha mas separados por
   espaco - a mesma forma que o corpo da tela ja usa nos cartoes. O ponto do
   meio some junto: emendar fatos com separador e o tique de cabecalho gerado
   por maquina, e some com a informacao de o que cada coisa e. */
.ficha{display:flex;flex-wrap:wrap;gap:2px 30px;margin:6px 0 22px;padding:0}
.ficha > div{min-width:0}
.ficha dt,.ficha .rot{font-size:11.5px;color:var(--cinza);margin:0 0 1px}
.ficha dd,.ficha .val{margin:0;font-size:14px;font-weight:600;color:var(--tinta)}

/* ------------------------------------------------------ a secao do trecho
   O DESENHO AO LADO DOS NUMEROS, e nao embaixo: os dois dizem a mesma coisa em
   linguagens diferentes, e quem confere olha de um para o outro. Em tela
   estreita viram uma coluna, com o desenho primeiro - ele e o que se le de
   relance. */
.secao-trecho{display:grid;grid-template-columns:minmax(220px,1fr) auto;
  gap:26px 34px;align-items:start}
.secao-desenho{color:var(--tinta);min-width:0;max-width:100%}
.secao-numeros{display:flex;flex-wrap:wrap;gap:2px 28px;margin:14px 0 0}
.secao-numeros > div{min-width:0}
.secao-numeros dt{font-size:11.5px;color:var(--cinza)}
.secao-numeros dd{margin:0;font-family:var(--enlace-mono);font-size:16px;
  font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .secao-trecho{grid-template-columns:1fr}
  .secao-desenho{order:-1}
}

/* ------------------------------------------------------- o numero que importa
   GASTAR A OUSADIA NUM LUGAR SO. Numa tela de levantamento tudo compete: doze
   colunas, faixas de grupo, campos editaveis em cada celula. O que a pessoa
   veio ver, e o que ela confere com o papel do orgao, e UM numero - o total da
   planilha, o valor da medicao, a soma do aditivo.

   Ele ganha a monoespacada em corpo grande, grafite, com a regua verde
   embaixo: e a unica coisa da tela que tem esse tratamento, e por isso o olho
   vai nele antes de tudo. O verde entra como SINAL de conferido, que e o papel
   que a marca declarou para ele. */
.destaque{display:inline-block;font-family:var(--enlace-mono);
  font-variant-numeric:tabular-nums;font-size:27px;line-height:1.15;
  font-weight:600;color:var(--tinta);letter-spacing:-.01em;
  border-bottom:3px solid var(--acento);padding-bottom:2px}
.destaque-rot{display:block;font-size:12.5px;color:var(--cinza);margin-bottom:2px}
.destaque-ao-lado{font-size:13px;color:var(--cinza);margin-left:10px}

/* Composicao do preco: uma barra em vez de tres numeros soltos. A proporcao
   entre mao-de-obra, equipamento e material se le de relance; a mesma
   informacao em tres celulas exige o leitor fazer a divisao de cabeca. */
.barra-comp{display:flex;height:26px;border-radius:var(--enlace-r-campo);overflow:hidden;
  border:1px solid var(--linha)}
.barra-comp span{display:block;height:100%}
.chave{display:inline-block;width:10px;height:10px;border-radius:var(--enlace-r-campo);margin-right:6px;
  vertical-align:baseline}
.p-mo{background:#00937E}
.p-equip{background:#5FB0A4}
.p-mat{background:#BFD9D3}

/* O preco do orgao e referencia, nao decisao: fica em tom mais fraco para o
   olho pousar na coluna que a EMPRESA controla - a que usa o
   sistema, seja ela qual for. */
.cifra.orgao{color:var(--cinza);background:var(--fundo)}

.rolagem.alta tfoot tr.tot-orgao td{bottom:38px;border-top:1px solid var(--linha);
  font-weight:500;color:var(--cinza)}

/* ------------------------------------------------- modulos do lancamento
   O trecho tem 35 campos. Numa grade unica eles viram uma fila em que
   ninguem acha nada - foi por isso que a planilha ganhou cartoes agrupados
   no formulario.py, e a tela estava devendo a mesma coisa.

   Fieldset e legend de proposito: o agrupamento vira ESTRUTURA do documento,
   e nao so um risco desenhado. Quem navega por teclado ou leitor de tela
   ouve o nome do modulo ao entrar nele. */
.modulo{border:1px solid var(--linha); border-radius:var(--enlace-r-caixa);
  padding:6px 16px 16px; margin:0 0 16px; background:var(--superficie)}
/* A LEGENDA DEIXOU DE SER CAIXA ALTA VERDE. "Identificacao", "Localizacao",
   "Rede" estavam em versalete rastreado e no verde da marca - e sao apenas
   NOMES DE GRUPO, nao acoes nem estados. Gastar o acento neles contraria a
   regra escrita no alto deste arquivo ("acento - acao e posicao"), e caixa
   alta em rotulo e o tique mais comum de tela gerada por maquina.
   Nome proprio se escreve como nome proprio. 10/09/2026. */
.modulo > legend{padding:0 8px; margin-left:4px;
  font-size:13.5px; font-weight:600; color:var(--tinta)}

/* Acao secundaria - "tirar", "remover". Tem de ser clicavel sem parecer o
   botao principal: quem le a tela precisa enxergar UMA acao obvia, e tirar
   uma linha por engano custa mais caro do que nao achar o botao de primeira. */
button.discreto{background:none;border:1px solid var(--linha);color:var(--tinta-fraca,#5A6B66);
  padding:3px 10px;font-size:12px;border-radius:var(--enlace-r-campo);cursor:pointer}
button.discreto:hover{border-color:var(--alerta);color:var(--alerta)}

/* A MARCA NA PORTA DE ENTRADA. Era o logo da ENBASE em imagem de 230 px - a
   primeira coisa que alguem via dizia o nome de quem fez, e nao o nome da
   ferramenta. O simbolo herda a cor por currentColor, entao basta pintar o
   container. */
.marca-entrada{display:flex;justify-content:center;margin:10px auto 14px}
.marca-entrada img{max-width:100%;height:auto}

/* ===================================================== o menu em duas camadas
   A forma do SIENGE, olhada na tela do Basso em 05/09/2026: uma REGUA fina de
   icones sempre visivel, com os modulos, e ao lado um PAINEL com a arvore de
   UM modulo so.

   O QUE ISSO RESOLVE: a arvore antiga mostrava tudo de uma vez, em quatro
   niveis - Portfolio > Contratos > Obra/filhotes > item. O primeiro nunca
   ajudou ninguem, porque "Portfolio" nao e um lugar aonde se vai, e um
   cabecalho. Com os modulos na regua aquele nivel some, e o item mais fundo do
   sistema sobe uma linha.

   A REGUA NAO RECOLHE. Recolher as duas camadas deixaria a tela sem caminho de
   volta; assim, mesmo com o painel fechado, os modulos continuam a um clique.
   As larguras somam a mesma coisa de antes (62 + 226 = 288), entao nenhuma
   tela precisou ser remedida. */
.lat-regua{flex:0 0 var(--lat-estreita);width:var(--lat-estreita);
  /* o fundo do MENU, e nao a estrutura: com o menu claro a regua grafite
     ficaria uma faixa escura solta ao lado do painel branco */
  background:var(--lat-fundo);border-right:1px solid var(--lat-borda);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 0;overflow:visible}
.lat-modulo{width:40px;height:40px;border-radius:var(--enlace-r-campo);display:grid;
  place-items:center;color:var(--lat-texto-suave);text-decoration:none;
  position:relative;flex:0 0 40px}
.lat-modulo svg{width:22px;height:22px}
.lat-modulo:hover{background:var(--lat-hover);color:var(--lat-titulo)}
.lat-modulo.ativo{background:var(--lat-ativo-fundo);color:var(--lat-ativo-texto)}
/* a barrinha de posicao repete a do item ativo da arvore: e o mesmo sinal
   dizendo a mesma coisa em duas escalas */
.lat-modulo.ativo::before{content:"";position:absolute;left:-11px;top:9px;
  bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--lat-ativo-barra)}
.lat-marca-regua{color:var(--acento);margin-bottom:8px}
.lat-marca-regua:hover{background:transparent;color:var(--acento)}

.lat-painel{flex:1;min-width:0;display:flex;flex-direction:column;
  background:var(--lat-fundo)}
.lat-modulo-nome{flex:1;min-width:0;color:var(--lat-titulo);font-weight:700;
  font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.lat-modulo-nome small{display:block;font-weight:500;font-size:11.5px;
  color:var(--lat-texto-suave);letter-spacing:.02em}

/* A BUSCA DO PAINEL SAIU em 09/09/2026, a pedido do Basso. Ela existia quando
   a arvore tinha 25 folhas numa coluna so; com os modulos na regua o painel
   mostra de sete a quinze itens de UM modulo, e procurar num punhado de linhas
   custa mais atencao do que ler. A busca que ficou e a das TELAS de orcamento
   e de contrato, que e onde ha muito o que procurar. */

/* A SETA DE RECOLHER, AO LADO DO NOME DO MODULO - como no Sienge. Ela estava
   no rodape da regua, longe de tudo, e o Basso nem a achou: "ele abre o menu
   com uma seta que esta embaixo". O controle de fechar o painel pertence ao
   painel, na altura do olho de quem acabou de ler o nome do modulo.

   Fechado, o painel some inteiro - e com ele esta seta. Quem reabre e o
   ICONE DO MODULO na regua, que nunca sai: e por isso que a tela nao fica
   sem caminho de volta, apesar de o unico botao de fechar morar no que se
   fecha. */
.lat-recolher{flex:0 0 26px;width:26px;height:26px;padding:0;border:none;
  border-radius:var(--enlace-r-campo);background:transparent;color:var(--lat-texto-suave);
  cursor:pointer;display:grid;place-items:center}
.lat-recolher:hover{background:var(--lat-hover);color:var(--lat-titulo)}
.lat-recolher svg{width:17px;height:17px}

/* TODO NUMERO EM COLUNA usa a monoespacada. Antes so a classe .cod usava, e as
   colunas de valor ficavam com digito de largura variavel - o que faz duas
   quantias parecidas parecerem iguais e uma divergencia de centavo passar
   despercebida numa planilha de 250 linhas. */
.num, td.num, th.num, .mono{font-family:var(--enlace-mono);
  font-variant-numeric:tabular-nums}


/* VCA OU MND: A PERGUNTA QUE VEM ANTES DE TODAS. Duas escolhas grandes lado a
   lado, e nao uma lista - e a decisao que diz se existe vala, e metade do
   formulario abaixo so vale se existir. Nenhuma nasce marcada (ver o banco:
   metodo_construtivo e obrigatorio e sem padrao). A sigla vai na mono porque
   e assim que ela aparece em toda tabela do sistema. */
.metodo{grid-column:1/-1;display:grid;gap:12px;margin:2px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.metodo-opcao{position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:2px 14px;align-items:baseline;padding:14px 16px;cursor:pointer;
  border:1.5px solid var(--linha);border-radius:var(--enlace-r-caixa);
  background:var(--superficie)}
.metodo-opcao input{position:absolute;opacity:0;width:1px;height:1px}
.metodo-sigla{grid-row:1/3;font-family:var(--enlace-mono);font-size:26px;
  font-weight:600;letter-spacing:.02em;color:var(--tinta)}
.metodo-nome{font-weight:600;font-size:15px}
.metodo-diz{font-size:12.5px;line-height:1.4;color:var(--cinza)}
.metodo-opcao:hover{border-color:var(--acento)}
.metodo-opcao:has(input:checked){border-color:var(--acento);
  background:var(--acento-lavado)}
.metodo-opcao:has(input:checked) .metodo-sigla{color:var(--acento-escuro)}
.metodo-opcao:focus-within{outline:2px solid var(--acento-escuro);outline-offset:2px}

/* A MEDICAO NO CELULAR (05/10/2026). As tabelas da medicao rolavam para o
   lado, e o que sumia da tela eram justamente os numeros - na diferenca
   contra a copia da fiscalizacao, o Gestor via o item e nao via o que mudou.
   Abaixo de 700px a tabela .vira-ficha vira uma ficha por linha: a descricao em
   cima, cada numero numa linha com o nome ao lado (data-rotulo no td). */
@media (max-width:700px){
  .rolagem:has(> table.vira-ficha){overflow-x:visible}
  table.vira-ficha thead{display:none}
  table.vira-ficha,table.vira-ficha tbody,table.vira-ficha tfoot{display:block;width:100%;min-width:0}
  table.vira-ficha tr{display:block;padding:10px 12px;border-bottom:1px solid var(--linha)}
  table.vira-ficha td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:3px 0;border:0;white-space:normal}
  table.vira-ficha td::before{content:attr(data-rotulo);color:var(--cinza);font-size:12px;
    font-weight:400;font-family:var(--enlace-fonte);white-space:nowrap;flex:0 0 auto}
  table.vira-ficha td.ficha-titulo{display:block;min-width:0;max-width:none;font-weight:600;padding-bottom:6px;color:var(--tinta)}
  table.vira-ficha td.ficha-titulo::before{content:none}
  table.vira-ficha tfoot td[colspan]{display:none}
}

/* A vez de quem esta na tela, no alto da medicao: as acoes moram no fim. */
.sua-vez{margin:12px 0 0;padding:9px 13px;background:var(--acento-lavado);
  border-left:4px solid var(--acento);border-radius:var(--enlace-r-campo);
  font-weight:600;color:var(--tinta)}
.sua-vez a{color:var(--acento-escuro);margin-left:6px}

/* O que se abre com um toque, dentro de um cartao: as linhas da copia, as
   notas da segunda em diante, a devolucao. */
details.recolhe{margin:12px 0}
details.recolhe > summary{cursor:pointer;color:var(--acento-escuro);font-weight:600;
  font-size:14px;padding:6px 0}
details.recolhe.devolver{border-top:1px solid var(--linha);margin-top:22px;padding-top:12px}
details.recolhe.devolver > summary{color:var(--tinta)}
form.acao{margin-top:14px}
form.acao > button,details.recolhe.devolver button{margin-top:12px}

/* A nota fiscal em bloco, e nao em linha de tabela: no celular, Valor e
   De que ficavam fora da tela e o Numero virava um quadradinho. */
fieldset.nota{border:1px solid var(--linha);border-radius:var(--enlace-r-campo);
  padding:4px 14px 12px;margin:0 0 12px;min-width:0}
fieldset.nota legend{font-size:13px;font-weight:600;color:var(--tinta);padding:0 4px}
.nota-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 14px}
.nota-campos label{margin-top:8px}
input.num{text-align:right}
@media (max-width:700px){
  .nota-campos input{min-height:44px}
}