/* Papel e terminal.
 *
 * Dois materiais se encontram neste fluxo. De um lado o documento: um
 * protocolo, um razao de lancamentos, um carimbo. Do outro a maquina: o SIAFI e
 * um mainframe 3270 de tela verde onde o robo digita, e todo valor do pedido e
 * um codigo destinado a ela. Dai o fundo verde palido, que e o papel de razao
 * contabil e tambem o fosforo da tela, e dai o roxo de carimbo como unica cor
 * de acao.
 *
 * A regra que segura o resto: prosa em Atkinson, valor de maquina em mono. O
 * mono nunca aparece como maneirismo de rotulo pequeno, so grande e so onde o
 * conteudo e codigo.
 */

:root {
  color-scheme: light;

  --fundo: #ECF0E8;
  --papel: #FFFFFF;
  --campo: #F7F9F5;
  --tinta: #1B2A20;
  --tinta-fraca: #5C6B60;
  /* Dois tracos, e a diferenca e de acessibilidade e nao de gosto: contorno de
     campo de formulario precisa de 3:1 contra o papel, e o cinza anterior dava
     1,8:1. O fraco so risca linha de tabela, onde nada depende dele. */
  --traco: #7D8E7D;
  --traco-fraco: #D5DFD0;

  /* A rampa da tinta, para o que assenta SOBRE ela. Existe porque a barra
     lateral nasceu com oito verdes escritos a mao, fora da paleta: a folha
     tinha seis cores nomeadas e ganhou oito sem nome, e foi isso que fez o
     escuro brigar com o claro. Sao tons da MESMA tinta, e nao hue nova. */
  --tinta-alta: #26362C;
  --tinta-linha: #33473A;
  --sobre-tinta: #D4E0D7;
  --sobre-tinta-fraca: #8AA091;

  /* A cor de acao sai da MESMA familia do resto, e nao de uma segunda.
     Ate 23/09/2026 ela era um roxo de carimbo, #4A2E8F, herdado do desenho
     original: 28 usos de uma cor que nao conversava com o verde de papel e
     tinta. O Bruno leu como azul e disse duas vezes que nao combinava, e ele
     estava descrevendo o que a tela mostra, nao uma preferencia.

     Com a acao na propria tinta, a interface fica monocromatica em verde e a
     cor volta a significar so uma coisa: estado. Ambar avisa, vermelho recusa,
     verde confirma. E a barra lateral passa a ser a mesma cor do botao
     principal, que e o que amarra o escuro ao claro.

     Link continua se distinguindo pelo sublinhado, que o projeto ja usa. */
  --acao: #21382B;
  --acao-forte: #12211A;
  --acao-fraca: #DCE7DE;
  --atencao: #8A5200;
  --recusa: #9B2226;
  --feito: #10684F;
  /* Os fundos dos tres estados, para quando a cor precisa preencher a celula e
     nao so o texto: texto colorido em fundo claro nao para o olho numa coluna
     que se varre de cima a baixo. */
  --feito-fundo: #E4F0E9;
  --recusa-fundo: #F8E7E7;
  --atencao-fundo: #F6EDDF;

  --sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Seis degraus, e nao dezessete tamanhos. A folha tinha sete medidas entre
     0.8rem e 1.07rem, indistinguiveis entre si e diferentes o bastante para o
     olho sentir que a tela foi montada aos pedacos sem saber por que. */
  --t1: 0.75rem;     /* rotulo miudo: trilha, assinatura */
  --t2: 0.875rem;    /* apoio: meta, aviso, rotulo de campo */
  --t3: 1rem;        /* corpo, e todo campo de formulario */
  --t4: 1.125rem;    /* subtitulo */
  --t5: 1.5rem;      /* titulo de secao */
  --t6: 2rem;        /* o numero do pedido, unico tratamento grande */

  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2.5rem;
  --raio: 4px;
  /* Caixa e radio desenhados pelo navegador vinham no azul padrao dele, que e a
     unica cor da interface que nao saiu desta paleta. Aparecia em todo
     formulario, e ficou obvio na lista de caixas do vinculo. */
  accent-color: #21382B;
  /* Linha de prosa abaixo de 80 caracteres, que e onde o olho volta sem se
     perder. O .folha e largo por causa da pilha de itens, nao do texto. */
  --prosa: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  -webkit-text-size-adjust: 100%;
}

.folha {
  max-width: 58rem;
  margin: 0 auto;
  padding: var(--e5) var(--e4) var(--e6);
}

/* O ritmo vertical mora aqui, e nao em margem de cada elemento: os templates
   empilham blocos irmaos direto no conteudo, e sem uma regra de fluxo cada tela
   inventava o proprio espacamento. */
main > * + * { margin-top: var(--e5); }
h1, h2, h3, p, ul { margin: 0; }
p + p { margin-top: var(--e3); }

h1 {
  font-size: var(--t5);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h2 {
  font-size: var(--t4);
  font-weight: 700;
  letter-spacing: -0.01em;
}
main p { max-width: var(--prosa); }
/* A lista de passos le como prosa e para na mesma largura. No Como usar de
   29/09/2026 os paragrafos paravam aqui e as listas iam quase ao dobro, na
   mesma secao. A barra de etapas fica de fora de proposito: ela e horizontal. */
main ol.passos,
main .tarefa ul { max-width: var(--prosa); }

a { color: var(--acao); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--acao-forte); }

:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
  border-radius: 2px;
}

/* O primeiro tab leva ao conteudo, porque a barra de cima tem quatro links e
   quem navega por teclado passaria por eles em toda tela. */
.pular {
  position: absolute;
  left: -9999px;
  background: var(--acao);
  color: var(--papel);
  padding: var(--e2) var(--e3);
  border-radius: var(--raio);
}
.pular:focus {
  left: var(--e4);
  top: var(--e2);
  color: var(--papel);
  z-index: 2;
}

/* A barra de cima. O bloco da conta existe por causa da issue #1: sem dizer
   qual conta esta aberta e o que ela alcanca, duas contas de coordenacao ficam
   indistinguiveis, porque as duas enxergam tudo por desenho. */
.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e5);
  padding-bottom: var(--e4);
  margin-bottom: var(--e6);
  border-bottom: 1px solid var(--traco-fraco);
}
.marca {
  font-family: var(--mono);
  font-size: var(--t3);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
  padding-left: var(--e3);
  border-left: 3px solid var(--acao);
}
.marca:hover { color: var(--acao); }
.menu { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); }
.menu a {
  color: var(--tinta-fraca);
  text-decoration: none;
  padding: var(--e1) 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--acao); }
/* A tela aberta fica marcada, porque quatro links sem marca obrigam a ler o
   titulo para saber onde se esta. */
.menu a[aria-current="page"] {
  color: var(--tinta);
  font-weight: 700;
  border-bottom-color: var(--acao);
}
.conta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e3);
}
.quem {
  color: var(--tinta-fraca);
  font-size: var(--t2);
  line-height: 1.35;
  text-align: right;
}
.quem b { color: var(--tinta); font-weight: 700; display: block; }

/* O cabecalho de tela: titulo e, embaixo, a linha que diz de que recorte a
   pagina fala. */
.cabecalho { display: flex; flex-direction: column; gap: var(--e2); }
.cabecalho .meta { color: var(--tinta-fraca); font-size: var(--t2); }

/* O numero do pedido e o heroi da tela: e o que as duas pontas falam em voz
   alta no telefone hoje. E o unico lugar com tratamento grande, e o resto da
   pagina fica quieto de proposito. */
.cabecalho-pedido {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2) var(--e4);
}
.numero {
  font-family: var(--mono);
  font-size: var(--t6);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cabecalho-pedido .sigla { color: var(--tinta-fraca); font-size: var(--t3); }

/* Estado como rua de cor a esquerda, e nao pilula: a cor significa estado, e o
   desenho reserva cor para isso e para o alerta. E a mesma espinha da marca,
   do alerta e do aviso, que e o unico motivo grafico da interface. */
.estado {
  display: inline-block;
  font-size: var(--t2);
  font-weight: 700;
  /* Sem text-transform. O capitalize vinha de quando a tela mostrava o codigo
     do banco cru, "rascunho", e a folha dava a maiuscula. O nome_bonito passou a
     fazer isso, e o capitalize ficou capitalizando CADA palavra: "Na fila do
     SIAFI" saia "Na Fila Do SIAFI", e "esperando envio", "Esperando Envio". A
     maiuscula mora no texto, e a folha nao reescreve o que a tela diz. */
  /* Etiqueta com fundo, desde 25/09/2026, e nao so cor de texto com uma regua
     ao lado: numa lista de trinta pedidos a regua fina nao parava o olho, e o
     recusado passava como qualquer outro. As cores sao as tres de estado que a
     paleta ja tinha, cada uma com o fundo dela, e nenhuma nova. */
  line-height: 1.4;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--campo);
  color: var(--tinta-fraca);
  box-shadow: inset 0 0 0 1px var(--traco-fraco);
}
.estado.enviado, .estado.aprovado {
  background: var(--acao-fraca); color: var(--acao); box-shadow: none; }
.estado.reprovado { background: var(--recusa-fundo); color: var(--recusa); box-shadow: none; }
.estado.entregue, .estado.executado {
  background: var(--feito-fundo); color: var(--feito); box-shadow: none; }
/* O executado em parte e o que nada executou, desde 26/09/2026. Antes os dois
   saiam no verde do executado, e um em cada quatro retornos de 2026 teve linha
   que o SIAFI nao executou. Ambar avisa e vermelho diz que falhou, as mesmas
   cores do aviso retido e do aviso que falhou, e nenhuma nova. */
.estado.executado-em-parte {
  background: var(--atencao-fundo); color: var(--atencao); box-shadow: none; }
.estado.nao-executado {
  background: var(--recusa-fundo); color: var(--recusa); box-shadow: none; }
.parcial { font-size: var(--t2); color: var(--tinta-fraca); white-space: nowrap; }

/* A pilha de itens e uma folha sobre a mesa: borda, e nunca sombra. As reguas
   internas carregam a memoria da grade da planilha, e so existem aqui. */
.itens {
  background: var(--papel);
  border: 1px solid var(--traco-fraco);
  border-radius: var(--raio);
  overflow: hidden;
}
.item {
  display: grid;
  grid-template-columns: 1.25rem minmax(7.5rem, auto) 1fr;
  gap: 0 var(--e3);
  padding: var(--e3) var(--e4);
  border-top: 1px solid var(--traco-fraco);
  align-items: baseline;
  color: inherit;
  text-decoration: none;
}
.itens .item:first-child { border-top: none; }
/* A linha inteira e alvo de toque quando ela leva a algum lugar. Mirar o numero
   com o polegar numa reuniao e o caminho estreito que o desenho promete evitar. */
a.item .dinheiro { color: var(--acao); }
a.item:hover { background: var(--acao-fraca); }
a.item:hover .dinheiro { text-decoration: underline; text-underline-offset: 0.15em; }

/* Anular e aprovar sem cor: sinal e coluna carregam a direcao, como a
   contabilidade ja faz. Vermelho diria erro, e anular nao e erro. */
.sinal {
  font-family: var(--mono);
  font-size: var(--t3);
  color: var(--tinta-fraca);
  text-align: center;
}
.dinheiro {
  font-family: var(--mono);
  font-size: var(--t3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
}
.codigos {
  font-family: var(--mono);
  font-size: var(--t2);
  color: var(--tinta-fraca);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e1) var(--e3);
}
.codigos b { font-weight: 500; color: var(--tinta); }
/* O rotulo do codigo e prosa, e o codigo e maquina: a mistura das duas fontes
   na mesma linha e o que deixa o valor saltar sem precisar de cor. */
.codigos span { font-family: var(--sans); }
.codigos b { font-family: var(--mono); }
/* Nome de pessoa nao e valor de maquina, e em mono ele ficava com cara de
   codigo de sistema numa tela cujo assunto e gente. */
.dinheiro.nome {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t3);
  text-align: left;
}

/* Botao dentro da linha, como o Desativar da tela de usuarios: cabe na grade a
   partir da segunda coluna, porque na primeira ele cairia sob o sinal. */
.item > form { grid-column: 2 / -1; justify-self: start; margin-top: var(--e2); }
.item > form button { font-size: var(--t2); padding: var(--e1) var(--e3); }
/* Depois da regra acima de proposito: as duas tem a mesma especificidade, e
   escrita antes esta perdia o grid-column para ela, jogando o botao por cima do
   nome e do email. */
.item-conta { grid-template-columns: 1.25rem minmax(9rem, auto) 1fr auto; }
.item-conta > form {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin-top: 0;
}

/* O alerta mora sob o proprio item: quem le precisa saber de qual linha ele
   fala, e uma caixa separada no topo perde essa ligacao. */
.alerta-item {
  grid-column: 2 / -1;
  font-size: var(--t2);
  color: var(--atencao);
  margin-top: var(--e2);
  padding-left: var(--e2);
  border-left: 3px solid var(--atencao);
  max-width: var(--prosa);
}

button {
  font-family: var(--sans);
  font-size: var(--t3);
  font-weight: 700;
  line-height: 1.3;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--acao);
  border-radius: var(--raio);
  background: var(--acao);
  color: var(--papel);
  cursor: pointer;
}
button:hover { background: var(--acao-forte); border-color: var(--acao-forte); }
button.secundario {
  background: var(--papel);
  color: var(--acao);
  border-color: var(--traco);
}
button.secundario:hover { background: var(--acao-fraca); border-color: var(--acao); }
/* Recusar e descartar sao a mesma familia de ato e precisam parecer isso.
   Antes dividiam a classe secundario com o Sair, que nao desfaz nada. */
button.perigo {
  background: var(--papel);
  color: var(--recusa);
  border-color: var(--recusa);
}
button.perigo:hover { background: var(--recusa); color: var(--papel); }

/* O formulario tambem e folha, e nao caixa cinza: e onde a pessoa escreve. */
.painel {
  background: var(--papel);
  border: 1px solid var(--traco-fraco);
  border-radius: var(--raio);
  padding: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.painel > h2 { margin-bottom: calc(var(--e2) * -1); }
.painel > button { align-self: start; margin-top: 0; }
/* O painel ja separa os campos pelo gap, e a margem de formulario somava em
   cima dela: dois espacos diferentes entre campos na mesma tela. */
.painel > label + label { margin-top: 0; }

select, textarea,
/* search entra junto: sem ele a busca de Unidades, de Usuarios e da lista
   de pedidos saia com a aparencia padrao do navegador, menor e sem
   contorno, ao lado de campos que tem os dois. */
input[type="text"], input[type="password"], input[type="email"],
input[type="search"], input[type="file"], input[type="date"] {
  font-family: var(--sans);
  font-size: var(--t3);
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--tinta);
  min-width: 0;
}
/* Mono so onde o valor e codigo. Nome de pessoa e motivo de recusa sao prosa, e
   em mono eles pareciam campo de terminal. */
input.codigo { font-family: var(--mono); letter-spacing: 0.02em; }
select[multiple] { padding: var(--e1); }
select[multiple] option { padding: var(--e1) var(--e2); font-family: var(--mono); }
/* O gradiente nao e enfeite: o Chrome ignora background-color em option:checked
   e so obedece a imagem de fundo. Sem ele, a UO escolhida ficava com o cinza do
   sistema, que nesta tela le como desabilitada e nao como marcada, bem no campo
   que decide quem enxerga pedido de quem. */
select[multiple] option:checked {
  background: var(--acao-fraca) linear-gradient(0deg, var(--acao-fraca), var(--acao-fraca));
  color: var(--tinta);
  font-weight: 500;
}
input[type="file"] { background: var(--campo); }

.erro {
  color: var(--recusa);
  font-weight: 700;
  padding-left: var(--e2);
  border-left: 3px solid var(--recusa);
  max-width: var(--prosa);
}
/* A confirmacao de um ato que deu certo, na mesma espinha do erro e do alerta:
   a cor diz o estado e a regua a esquerda diz que aquilo e anotacao, e nao
   conteudo da tela. Verde porque e a cor que o resto do sistema ja usa para
   entregue e executado. */
.feito {
  color: var(--feito);
  font-weight: 700;
  padding-left: var(--e2);
  border-left: 3px solid var(--feito);
  max-width: var(--prosa);
}
/* Texto de apoio, e nao aviso. Estava em ambar junto com o alerta de saldo, e
   com quase toda tela carregando um, o ambar tinha parado de significar
   alguma coisa. O alerta de verdade continua sendo o .alerta-item. */
.aviso-dado {
  color: var(--tinta-fraca);
  font-size: var(--t2);
  max-width: var(--prosa);
}

fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: var(--e2); }
/* Inline-flex, e nao um container flex: com display flex no fieldset o legend
   deixa de ser o rotulo do grupo e vira item da linha, e o rotulo cai ao lado
   das opcoes em vez de acima delas. */
fieldset label { display: inline-flex; align-items: center; gap: var(--e2); }
fieldset label + label { margin-top: 0; margin-left: var(--e5); }

/* Reposicao do que o CSS provisorio do base.html tinha e saiu com ele. Os
   templates de login escrevem <label>Texto <input></label> contando com o
   rotulo em cima e o campo embaixo: sem o display block, os dois saem na mesma
   linha, e o botao encosta no campo de cima. Nenhum teste de pytest renderiza
   layout, entao isso quebrou em silencio quando o style embutido foi removido. */
label { display: block; }
label + label, form > button { margin-top: var(--e4); }
/* Botao que mora numa barra ou numa linha ja recebe o espaco do container, e a
   margem de formulario acima o empurrava para fora do alinhamento. */
.topo form > button, .acoes form > button, .item > form > button { margin-top: 0; }
/* O rotulo e a pergunta, e o campo e a resposta: separa-los do texto seguinte
   e o que faz o formulario ler como uma conversa e nao como uma grade. */
label > input, label > select { margin-top: var(--e1); }
input[type="text"], input[type="password"], input[type="email"],
input[type="search"] { width: 100%; }
select, select[multiple], input[type="file"] { width: 100%; }
.painel > label:first-of-type { margin-top: 0; }

/* Escolha de radio fica em linha, porque ali o rotulo pertence ao controle em
   vez de encima-lo. Sobrepoe o display block acima de proposito. */
.escolhas label { display: inline-flex; align-items: center; gap: 0.375rem; }
label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  max-width: var(--prosa);
}
label:has(> input[type="checkbox"]) > input { margin-top: 0.3em; }

/* A conferencia de uma linha cabe dentro da celula: radio, campo e botao numa
   fila so. Sem isto o display block dos rotulos empilhava tres controles por
   linha da tabela e a grade ficava com altura de formulario. */
.conferir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.conferir label { display: inline-flex; align-items: center; gap: var(--e1); margin: 0; }
.conferir input[type="text"] { width: auto; min-width: 10rem; flex: 1 1 10rem; }
.conferir button { margin-top: 0; font-size: 0.875rem; padding: var(--e1) var(--e3); }

/* A lista de caixas do campo de alcance. Rola por dentro porque sao 115 linhas
   e o formulario inteiro nao pode ter essa altura, e as marcadas vem no topo
   para o estado atual caber na primeira olhada, sem rolar. */
.lista-marcavel {
  max-height: 20rem;
  overflow-y: auto;
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  background: var(--papel);
  padding: var(--e2);
}
/* Especificidade acima do "fieldset label" de cima de proposito: la o rotulo
   fica em linha, porque pertence a um par de radio, e aqui cada caixa e uma
   linha propria. */
fieldset .lista-marcavel label {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  margin: 0;
  padding: var(--e1) var(--e2);
  border-radius: 2px;
}
fieldset .lista-marcavel label:hover { background: var(--campo); }
/* A marcada se le sem precisar mirar a caixinha, que era metade da reclamacao:
   o campo nao mostrava o estado sem rolar. Navegador sem :has() perde o fundo e
   mantem a caixa marcada, entao degrada em vez de quebrar. */
fieldset .lista-marcavel label:has(input:checked) {
  background: var(--acao-fraca);
  font-weight: 700;
}
.lista-marcavel .digitos {
  font-family: var(--mono);
  font-size: var(--t2);
  color: var(--tinta-fraca);
}
.lista-marcavel label:has(input:checked) .digitos { color: var(--tinta); }
/* O campo que vem logo depois da caixa, como a Equipe de destino em Equipes e o
   "nos dois sentidos" em Unidades, ficava colado na borda dela e parecia mais
   uma linha da lista. O label + label de cima nao o alcanca, porque o vizinho e
   o fieldset. */
fieldset:has(.lista-marcavel) + label { margin-top: var(--e4); }

/* Tela de uma coluna curta, para entrar e trocar senha. O .folha tem 58rem
   porque a pilha de itens precisa de largura; campo de senha com 58rem fica
   estranho e dificulta mirar. */
.estreito {
  max-width: 26rem;
  margin: var(--e6) auto 0;
  background: var(--papel);
  border: 1px solid var(--traco-fraco);
  border-radius: var(--raio);
  padding: var(--e6) var(--e5);
}
/* A mesma espinha da marca, para quem entra reconhecer a barra de cima
   depois de logar. */
.estreito h1 {
  font-size: var(--t5);
  padding-left: var(--e3);
  border-left: 3px solid var(--acao);
}
.estreito > * + * { margin-top: var(--e4); }
.estreito form + form { margin-top: var(--e5); padding-top: var(--e5);
                        border-top: 1px solid var(--traco-fraco); }

/* Os filtros da fila sao links, e nao formulario, porque sao leitura. Recorte
   e origem sao dois eixos independentes, e numa fila unica os dois apareciam
   marcados ao mesmo tempo, com cara de defeito. */
.filtros { display: flex; flex-direction: column; gap: var(--e2); font-size: var(--t2); }
.filtros > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e4); }
.filtros .eixo { color: var(--tinta-fraca); min-width: 4.5rem; }
.filtros a {
  color: var(--tinta-fraca);
  text-decoration: none;
  padding: var(--e1) 0;
  border-bottom: 2px solid transparent;
}
.filtros a:hover { color: var(--acao); }
.filtros a[aria-current="page"] {
  color: var(--tinta);
  font-weight: 700;
  border-bottom-color: var(--acao);
}

/* Resumo do pedido antes do botao, que e requisito do desenho: aprovar pelo
   celular numa reuniao e quando se olha menos, e a aprovacao libera execucao no
   SIAFI em minutos. Ele e bloco proprio, e nao mais uma linha de codigos. */
.resumo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4) var(--e6);
  background: var(--papel);
  border: 1px solid var(--traco-fraco);
  border-radius: var(--raio);
  padding: var(--e4) var(--e5);
}
.resumo div { display: flex; flex-direction: column; gap: var(--e1); }
.resumo dt, .resumo .rotulo { font-size: var(--t2); color: var(--tinta-fraca); }
.resumo .valor {
  font-family: var(--mono);
  font-size: var(--t4);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.resumo .valor.alerta { color: var(--atencao); }

/* A fila de acoes no pe da tela, para os botoes nao se empilharem colados. */
.acoes { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.acoes form { margin: 0; }

/* Dois campos que so valem em certa escolha, escondidos pela MESMA forma:
   elemento e item so no tipo amarrado, e UO financiadora so no IPU 2. As duas
   regras leem option marcada, e nao valor digitado, que e o que permite fazer
   isso sem script. Navegador sem :has() mostra os dois campos, e o regras.py
   continua sendo quem recusa: degrada, nao quebra.

   Esconde por visibility, e nao por display, porque numa celula de tabela o
   display none colapsaria a coluna e a grade dancaria a cada escolha. */
.linha-nova:not(:has(select[name="tipo"] option[value="amarrado"]:checked)) .campo-amarrado,
.linha-nova:not(:has(select[name="ipu"] option[value="2"]:checked)) .campo-financiadora {
  visibility: hidden;
}

/* E a COLUNA inteira sai quando ninguem na grade precisa dela, desde
   25/09/2026. A regra acima escondia so o campo, para a grade nao dancar, e a
   coluna vazia custava 190 px em toda linha: medido, a grade tinha 1229 px num
   espaco de 1008, e a maioria das linhas e global e de IPU 1.

   A troca e consciente. A coluna aparece quando a pessoa escolhe Amarrado ou
   IPU 2, logo ao lado da escolha, que e onde ela vai digitar em seguida: e o
   movimento respondendo ao gesto, e nao a grade mexendo sozinha. O que ja esta
   gravado com elemento ou financiadora marca a tabela pelo servidor, e a coluna
   fica.

   Escrita como :not(), escondendo o que nao se aplica: navegador sem :has()
   descarta a regra inteira e mostra as duas colunas, como antes. */
.linha-de-digitar:not(.com-elemento):not(:has(select[name="tipo"] option[value="amarrado"]:checked)) .col-elemento,
.linha-de-digitar:not(.com-financiadora):not(:has(select[name="ipu"] option[value="2"]:checked)) .col-financiadora {
  display: none;
}

/* Os dois caminhos do cadastro de conta. A regra ESCONDE o bloco que a escolha
   nao pede, e nao mostra o escolhido, e essa ordem importa: navegador sem
   :has() ignora as duas regras e mostra os dois blocos, com o servidor
   recusando a combinacao invalida igual. Escrita ao contrario, o mesmo
   navegador esconderia os dois e o formulario ficaria inutilizavel. */
.painel:has([name="tipo_de_conta"][value="orgao"]:checked) .bloco-dcmefo,
.painel:has([name="tipo_de_conta"][value="dcmefo"]:checked) .bloco-orgao {
  display: none;
}
/* Sem escolha nenhuma, nenhum dos dois aparece: no cadastro quem preenche
   decide antes, em vez de criar conta de orgao por inercia. */
.painel:has(.caminho):not(:has([name="tipo_de_conta"]:checked)) .bloco-orgao,
.painel:has(.caminho):not(:has([name="tipo_de_conta"]:checked)) .bloco-dcmefo {
  display: none;
}
.bloco-orgao, .bloco-dcmefo { display: flex; flex-direction: column; gap: var(--e4); }
/* O terceiro tipo de conta, desde 28/09/2026. A regra ESCONDE o que a escolha
   nao pede, pelo mesmo motivo das de cima: navegador sem :has() ignora as
   regras e mostra todos os blocos, e o servidor forca papel, equipe e origens da
   conta do IAG 1 igual. */
.painel:has([name="tipo_de_conta"][value="iag1"]:checked) .bloco-orgao,
.painel:has([name="tipo_de_conta"][value="iag1"]:checked) .bloco-dcmefo,
.painel:has([name="tipo_de_conta"][value="iag1"]:checked) .bloco-origens,
.painel:has([name="tipo_de_conta"][value="orgao"]:checked) .bloco-iag1,
.painel:has([name="tipo_de_conta"][value="dcmefo"]:checked) .bloco-iag1,
.painel:has(.caminho):not(:has([name="tipo_de_conta"]:checked)) .bloco-iag1 {
  display: none;
}
.bloco-iag1, .bloco-origens { display: flex; flex-direction: column; gap: var(--e4); }

/* O celular: mesmo HTML, outra forma. A tabela empilha, nunca rola na
   horizontal, que e requisito do desenho. */
@media (max-width: 640px) {
  .folha { padding: var(--e4) 0.875rem var(--e6); }
  .topo { gap: var(--e3); margin-bottom: var(--e5); }
  .numero { font-size: var(--t5); }
  h1 { font-size: var(--t5); }
  .painel, .resumo, .estreito { padding: var(--e4); }
  .item { grid-template-columns: 1.25rem 1fr; padding: var(--e3) var(--e3); }
  .dinheiro { text-align: left; }
  .codigos, .alerta-item { grid-column: 2; margin-top: 0.1875rem; }
  .resumo { gap: var(--e3) var(--e5); }
  button { width: 100%; }
  .item > form button { width: auto; }
  .item-conta { grid-template-columns: 1.25rem 1fr; }
  .item-conta > form { grid-column: 2; grid-row: auto; justify-self: start;
                       align-self: start; margin-top: var(--e2); }
  .acoes { flex-direction: column; align-items: stretch; }
  /* O bloco da conta cai para a linha inteira em vez de brigar por espaco com
     os links, e o Sair volta a ter largura propria: com button de 100% dentro
     do flex, ele ocupava a barra toda e empurrava a identidade para fora. */
  .conta { margin-left: 0; flex-basis: 100%; justify-content: space-between; }
  .conta button { width: auto; }
  .quem { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Grade de cadastro: 116 unidades, e um dia mais de cem contas. Tabela e nao
   cartao empilhado, porque a tarefa aqui e percorrer uma coluna com o olho ate
   achar uma linha, e cartao gasta altura para caber meia duzia. O mesmo motivo
   que faz o setorialista preferir a planilha. */
.grade {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
  border: 1px solid var(--traco-fraco);
  border-radius: var(--raio);
}
.grade th,
.grade td {
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--traco-fraco);
  text-align: left;
  vertical-align: baseline;
}
.grade tbody tr:last-child td { border-bottom: 0; }
.grade th {
  font-size: var(--t2);
  font-weight: 700;
  color: var(--tinta-fraca);
  border-bottom-color: var(--traco);
}
/* Codigo e valor de maquina, entao mono e alinhado a direita: e o que faz os
   digitos baterem coluna com coluna e o olho descer reto. Mesma regra que o
   resto do sistema ja segue.

   Classe propria, e nao a .numero: aquela e o tratamento grande reservado ao
   numero do pedido, de 2rem, e reusar o nome trouxe o tamanho junto. O sintoma
   foi o codigo da UO saindo gigante no meio de uma celula de tabela, em todas
   as telas de lista. Nome reusado e nome que um dia significa duas coisas. */
.grade .digitos {
  font-family: var(--mono);
  font-size: inherit;
  text-align: right;
  white-space: nowrap;
}
.grade tbody tr:hover { background: var(--campo); }
/* O cabecalho e prosa, mesmo em cima de coluna de numero: a .digitos acima
   punha mono tambem nele, e "Valor", "Aprovar" e "Itens" saiam numa letra
   enquanto "Acao" e "UO" saiam noutra, em todas as tabelas. Visto no
   levantamento de 25/09/2026. */
.grade th.digitos { font-family: var(--sans); }

/* A busca fica acima da grade, na largura do conteudo, e nao dentro de um
   painel: ela pertence a lista, nao e um formulario a parte. */
.busca {
  display: flex;
  gap: var(--e3);
  align-items: flex-end;
  flex-wrap: wrap;
}
.busca label { flex: 1 1 18rem; }
.busca a { padding-bottom: var(--e2); }

/* O codigo ao lado do nome no titulo de quem esta sendo editado. Menor que a
   sigla porque a sigla e o nome, e o codigo e a confirmacao. */
.codigo-grande {
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--tinta-fraca);
}

/* Os itens na disposicao da planilha. Largura cheia e fonte menor: a tarefa e
   ler a linha inteira de uma vez, como no Excel, e nao ler campo a campo. */
.grade.itens { font-size: var(--t2); }
.grade.itens th { white-space: nowrap; }
/* Anular em vermelho, como na planilha que a equipe ja usa: e por essa cor que
   o setorialista distingue corte de acrescimo sem ler o cabecalho. */
.grade.itens .anular { color: var(--recusa); }
/* O x de GLOBAL centralizado, porque ali a marca e a informacao e a posicao
   dela na celula e o que o olho pega descendo a coluna. A classe nao e .marca,
   que e o logotipo do topo: com o mesmo nome a celula herdava a borda verde, o
   peso e o recuo dele. */
.grade.itens .sinal-global { text-align: center; font-family: var(--mono); }
/* A linha de detalhe pertence a de cima: sem borda entre as duas, e recuada. */
.grade.itens tr:not(.detalhe) td { border-bottom: 0; }
.grade.itens tr.detalhe td { padding-top: 0; }
.grade.itens tr.detalhe .alerta-item,
.grade.itens tr.detalhe .resultado { display: block; }
/* O elemento/item pelo modulo, desde 13/10/2026: a frase em cima e os botoes
   embaixo, quebrando linha no celular em vez de espremer. */
.grade.itens tr.detalhe .modulo form { display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .4rem; }

/* Campo que carrega valor de maquina digitado a mao, como a senha provisoria.
   Mono porque ela e ditada por telefone, e a mono distingue o que a proporcional
   confunde. Nao e a .digitos das tabelas: aqui e campo de formulario, e alinhar
   a direita atrapalharia quem digita. */
.digitos-livres { font-family: var(--mono); }

/* A barra lateral, e a area de conteudo ao lado dela.
 *
 * Pedida no documento de ajustes de 22/09/2026. No topo, o menu cresce para a
 * direita e acaba; na lateral ele cresce para baixo, que e para onde sempre ha
 * espaco, e e o que permite "cada perfil com seu menu" sem contar itens.
 *
 * O escuro e a tinta da propria paleta, que ja era a cor do texto de todas as
 * telas: a maquete veio azul, e o documento diz "nao se apegue as cores". */
.tela {
  display: grid;
  /* 13rem, e nao 15: a 15 a barra comia quase metade de uma janela estreita,
     que e como o sistema e usado em tela dividida com a planilha ao lado. */
  grid-template-columns: 13rem 1fr;
  min-height: 100vh;
}

.lateral {
  background: var(--tinta);
  color: var(--fundo);
  padding: var(--e5) var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e5);
  /* Altura da janela inteira, e nao a do conteudo: com align-self start ela
     parava na metade da pagina e deixava uma faixa clara embaixo, que se lia
     como defeito de renderizacao. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* "Portal Orcamentario" com maiuscula e no tipo do titulo da entrada, pedido do
   Bruno em 29/09/2026: o mono minusculo quebrava em "portal / orcamentario" e
   nao se lia como o nome que a pessoa acabou de ver na entrada. */
.lateral .marca {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t3);
  white-space: nowrap;
  color: var(--fundo);
  text-decoration: none;
  border-left: 3px solid var(--fundo);
  padding-left: var(--e3);
  line-height: 1.2;
}

.lateral .quem {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: var(--t2);
  color: var(--sobre-tinta-fraca);
  border-top: 1px solid var(--tinta-linha);
  border-bottom: 1px solid var(--tinta-linha);
  padding: var(--e3) 0;
}
.lateral .quem b { color: var(--papel); font-size: var(--t3); }

.secoes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.secoes a {
  display: block;
  padding: var(--e2) var(--e3);
  color: var(--sobre-tinta);
  text-decoration: none;
  border-radius: var(--raio);
  border-left: 3px solid transparent;
  font-size: var(--t3);
}
.secoes a:hover { background: var(--tinta-alta); color: var(--papel); }
/* A secao aberta fica marcada: com seis itens sem marca, saber onde se esta
   dependia de ler o titulo da pagina. */
.secoes a[aria-current="page"] {
  background: var(--tinta-alta);
  border-left-color: var(--fundo);
  color: var(--papel);
  font-weight: 700;
}

.rodape-lateral { margin-top: auto; display: grid; gap: var(--e3); }
.assinatura {
  font-size: var(--t1);
  color: var(--sobre-tinta-fraca);
  border-top: 1px solid var(--tinta-linha);
  padding-top: var(--e3);
  margin: 0;
}
.assinatura b { color: var(--sobre-tinta); }
button.sair {
  background: transparent;
  color: var(--sobre-tinta);
  border: 1px solid var(--tinta-linha);
  margin-top: 0;
  width: 100%;
}
button.sair:hover { background: var(--tinta-alta); border-color: var(--sobre-tinta-fraca); color: var(--papel); }

.area {
  padding: var(--e6) var(--e6) var(--e6);
  max-width: 68rem;
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}

/* A trilha diz onde a pessoa esta dentro da secao, que com a lista e o painel
   de edicao na MESMA rota nao se lia do menu. */
.trilha {
  font-size: var(--t2);
  color: var(--tinta-fraca);
  margin: 0;
}
.trilha a { color: var(--tinta-fraca); }
.trilha span { margin: 0 var(--e2); }

/* Link que age como botao, para "Comecar um pedido" sair da lista sem virar um
   formulario de uma linha so. */
a.botao {
  display: inline-block;
  background: var(--acao);
  color: var(--papel);
  text-decoration: none;
  padding: var(--e2) var(--e4);
  border-radius: var(--raio);
  font-weight: 700;
}
a.botao:hover { background: var(--acao-forte); }
.acoes-secao { margin: 0; }

/* No celular a lateral vira uma faixa no topo, e o menu rola na horizontal.
   Empilhar seis itens verticalmente empurraria o conteudo para fora da tela. */
/* Cai mais cedo do que o resto do sistema, a 900 e nao a 720: a barra e larga
   em absoluto, entao numa janela de 800 ela ja pesa demais mesmo cabendo. */
@media (max-width: 900px) {
  .tela { grid-template-columns: 1fr; }
  .lateral {
    position: static;
    height: auto;
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e4);
  }
  .lateral .quem { border-bottom: none; padding-bottom: 0; }
  /* A fileira que rolava para o lado saiu em 25/09/2026: cortava Usuarios e
     Sobre para fora da tela, sem nada dizendo que havia mais. O menu agora e
     lista em pe, fechada, aberta pelo botao Menu. */
  .botao-menu { display: inline-flex; }
  .menu-corpo { display: none; }
  .abrir-menu:checked ~ .menu-corpo { display: block; }
  .abrir-menu:checked + .botao-menu { background: var(--tinta-alta); color: var(--papel); }
  .rodape-lateral { margin-top: var(--e2); grid-auto-flow: column; align-items: center; }
  .assinatura { border-top: none; padding-top: 0; }
  button.sair { width: auto; }
  .area { padding: var(--e4); gap: var(--e4); }
}

/* A grade de digitar do rascunho: as linhas ja acrescentadas e, embaixo, a
   linha nova, como a proxima linha da planilha que o orgao usa hoje.
   Pedida pelo Bruno em 23/09/2026. */
.linha-de-digitar { table-layout: auto; }
.linha-de-digitar th { white-space: nowrap; }
.linha-de-digitar td { vertical-align: middle; }
.linha-de-digitar select,
.linha-de-digitar input {
  width: 100%;
  margin: 0;
  padding: var(--e1) var(--e2);
  font-family: var(--mono);
  font-size: var(--t3);
}
/* Largura por conteudo, e nao um minimo unico para todos. Com 4rem para todo
   campo, a acao de quatro digitos e o "amarrado" do tipo saiam cortados, que o
   Bruno viu em 23/09/2026. O select ainda gasta a seta do navegador por cima do
   texto, entao cada um pede o seu. */
.linha-de-digitar select[name="acao"], .linha-de-digitar input[name="acao"] { min-width: 5.25rem; }
.linha-de-digitar select[name="fonte"], .linha-de-digitar input[name="fonte"] { min-width: 4.25rem; }
.linha-de-digitar select[name="grupo"],
.linha-de-digitar select[name="iag"],
.linha-de-digitar select[name="ipu"] { min-width: 3.5rem; }
.linha-de-digitar select[name="tipo"] { min-width: 7.25rem; }
.linha-de-digitar select[name="solicitacao"] { min-width: 6.5rem; }
.linha-de-digitar input[name="elemento_item"],
.linha-de-digitar input[name="uo_financiadora"] { min-width: 4.75rem; }
.linha-de-digitar input[name="valor"] { min-width: 6rem; }

/* Numero em celula de tabela nunca quebra nem e cortado. O Bruno pediu para
   olhar as outras telas junto: a regra vale para toda .grade, e nao so para
   esta, porque o sintoma aparece em qualquer coluna estreita. */
.grade .digitos, .grade th { white-space: nowrap; }

/* Cabecalho alinhado com a propria coluna. A .digitos alinhava a direita so na
   celula, e o titulo ficava a esquerda em cima do numero a direita: e o
   desalinhamento que o Bruno viu em 23/09/2026. */
.grade th.digitos { text-align: right; }

/* Linha separando linha, e nao so o cabecalho. Sem ela, numa tabela de seis
   itens com valores parecidos o olho perde a linha no meio do caminho de volta.
   O Bruno pediu olhando o retorno do SIAFI, que e onde a leitura e por linha e
   nao por coluna. */
.grade tbody tr + tr { border-top: 1px solid var(--traco-fraco); }
.grade tbody tr.detalhe { border-top: 0; }

/* Na grade de digitar, os codigos ficam a ESQUERDA, e nao a direita como nas
   tabelas de leitura. O motivo e a linha nova: o texto dentro de um select fica
   a esquerda e nao ha como alinhar a direita de forma confiavel, entao a coluna
   so le como coluna se as linhas gravadas acompanharem. Dinheiro segue a
   direita nas duas, que e o que deixa o olho comparar valor. */
.linha-de-digitar td.digitos, .linha-de-digitar th { text-align: left; }
.linha-de-digitar td.digitos.saldo,
.linha-de-digitar th.digitos,
.linha-de-digitar td:nth-last-child(2) { text-align: right; }
.linha-de-digitar .linha-nova input[name="valor"] { text-align: right; }

/* O total das colunas de dinheiro, no rodape da grade, que e onde a planilha
   tambem soma. Pedido pelo Bruno em 23/09/2026: "qual total de anular e o total
   de aprovar".

   .grade tfoot e nao .linha-de-digitar tfoot: desde 25/09/2026 a tabela de
   leitura tambem soma, e a regra com o nome da outra tabela a deixaria sem o
   traco e sem o negrito, com cara de linha comum. */
.grade tfoot td {
  border-top: 2px solid var(--traco);
  font-weight: 700;
  background: transparent;
}
.grade tfoot .rotulo-total {
  text-align: right;
  font-weight: 400;
  color: var(--tinta-fraca);
}
/* A linha nova se distingue das gravadas sem ganhar cor propria: fundo de
   campo, que e o mesmo tom que todo formulario do sistema usa. */
.linha-de-digitar .linha-nova > td { background: var(--campo); }
.linha-de-digitar .saldo { color: var(--tinta-fraca); white-space: nowrap; }
.linha-de-digitar .quantas { font-family: var(--sans); font-size: var(--t2); }

/* O card de filtros, com os campos em linha. Desenho do documento de ajustes de
   22/09/2026. Quebra em duas linhas no celular, e nao rola na horizontal. */
.filtros-card > h2 { margin-bottom: var(--e2); }
.linha-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
}
.linha-filtros label {
  flex: 1 1 11rem;
  min-width: 9rem;
  margin-top: 0;
  font-size: var(--t2);
  color: var(--tinta-fraca);
}
.linha-filtros select, .linha-filtros input { width: 100%; }
.acoes-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4);
  margin-top: var(--e4);
}
.acoes-filtro button { margin-top: 0; }

/* O resultado do SIAFI numa coluna, colorida, como na planilha de conferencia
   que o orgao ja recebe por email. Antes descia numa linha propria por item,
   com "resultado Ok" repetido em todas: dobrava a altura e a palavra parava de
   ser lida.

   Leitura binaria, medida em 23/09/2026 sobre os arquivos ja realizados: o robo
   escreve "ok" ou "Ok" quando executou, e todo o resto significa que a linha
   nao passou, de "Saldo zerado na conta" a "IAG 1 - Nao realizado". Cor de
   fundo e nao so de texto, porque o que esta coluna precisa dar e a varredura
   de cima a baixo, e texto colorido em cinza claro nao para o olho. */
.grade .resultado { white-space: normal; min-width: 12rem; }
.grade .resultado.executou {
  background: var(--feito-fundo);
  color: var(--feito);
  font-weight: 700;
}
.grade .resultado.falhou {
  background: var(--recusa-fundo);
  color: var(--recusa);
  font-weight: 700;
}

/* No celular a tabela de itens EMPILHA, e nao rola na horizontal. E requisito
   escrito no CLAUDE.md, e as duas tabelas de item nasceram sem ele: com onze
   colunas, a grade de digitar e a de leitura estouravam a largura da tela.

   O Bruno descreveu em 23/09/2026 o caso que isto atende: "seria para fazer um
   pedido rapido pelo celular". E o mesmo motivo do contrapeso da aprovacao, que
   tambem acontece no telefone, numa reuniao.

   O significado que na tabela mora na POSICAO da coluna passa a morar no rotulo
   de cada celula, que vem do data-rotulo. Celula vazia some inteira, com rotulo
   e tudo: linha global nao tem elemento e item, e desenhar o rotulo de um campo
   vazio gastaria altura dizendo que ali nao tem nada. */
@media (max-width: 720px) {
  /* .grade e nao duas classes escolhidas a dedo. Ate 25/09/2026 a regra
     nomeava .linha-de-digitar e .grade.itens, e as outras cinco tabelas do
     sistema, entre elas a Fila, rolavam na horizontal no polegar. Como as duas
     classes antigas sempre vem acompanhadas de grade, o seletor unico cobre
     todas e as listas duplicadas somem. */
  .grade, .grade tbody, .grade tfoot,
  .grade tr, .grade td { display: block; width: auto; }
  .grade thead { display: none; }

  .grade tbody tr {
    border-bottom: 1px solid var(--traco-fraco);
    padding: var(--e3) 0;
  }
  .grade tbody tr:last-child { border-bottom: 0; }
  .grade td {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    align-items: center;
    gap: var(--e3);
    border: 0;
    padding: var(--e1) var(--e3);
    text-align: left;
  }
  .grade td::before {
    content: attr(data-rotulo);
    color: var(--tinta-fraca);
    font-size: var(--t2);
  }
  /* Celula sem rotulo proprio ocupa a largura, em vez de gastar a coluna do
     rotulo com nada: e o caso da celula de botao no fim da linha. */
  .grade td[data-rotulo=""] { grid-template-columns: 1fr; }
  .grade td:empty { display: none; }
  .grade td.digitos { text-align: left; }
  /* O saldo da grade do rascunho alinha a direita com tres classes, e vencia a
     regra acima: empilhado, o rotulo saia recuado e o valor encostado na borda,
     fora da coluna das outras linhas. Visto em 27/09/2026. */
  .linha-de-digitar td.digitos.saldo { text-align: left; }
  /* Editar e Remover, ou Salvar e Cancelar, um embaixo do outro na coluna do
     conteudo. Sem isto o segundo caia na coluna do rotulo, embaixo de "Linha".
     O botao com cara de link fica do tamanho do texto: a regra que alarga todo
     botao no celular, para o polegar, o centralizava no meio da coluna. */
  .grade td.acoes-linha > * { grid-column: 2; justify-self: start; }
  .grade td.acoes-linha button.como-link { width: auto; }
  /* O centro do x de GLOBAL vence a regra acima por ter mais classes, e
     empilhado ele recuava o rotulo e tirava o x da coluna dos valores. */
  .grade.itens td.sinal-global { text-align: left; }
  /* A linha de alerta e a de total nao tem rotulo proprio: ocupam a largura. */
  .grade .detalhe td, .grade tfoot td { grid-template-columns: 1fr; }
  .grade .detalhe td::before, .grade tfoot td::before { content: none; }
  .grade tfoot .rotulo-total { text-align: left; }
  /* A tabela de leitura soma Anular e Aprovar na mesma linha, e empilhada sem
     rotulo mostrava "Total", "R$ 1,00" e "R$ 1,00" sem dizer qual era qual.
     Visto no 1401-2026-0003 em 27/09/2026. A grade do rascunho escreve o nome
     do total na propria linha e nao usa data-rotulo no rodape, entao fica como
     estava. */
  .grade tfoot td[data-rotulo] { grid-template-columns: 8.5rem 1fr; }
  .grade tfoot td[data-rotulo]::before {
    content: attr(data-rotulo);
    font-weight: 400;
  }
  /* Um traco por linha de total, e nao um por celula: empilhadas, as celulas
     viram linhas, e o traco de cada uma cortava o total em tres pedacos. */
  .grade tfoot td { border-top: 0; }
  .grade tfoot tr { border-top: 2px solid var(--traco); }
  .linha-de-digitar .linha-nova > td { background: transparent; }
  .linha-de-digitar .linha-nova { background: var(--campo); border-radius: var(--raio); }
  .linha-de-digitar select, .linha-de-digitar input { min-width: 0; }
}

/* Editar e remover a linha, pedidos pelo Guilherme em 23/09/2026: ate entao,
   errando uma linha o unico caminho era descartar o pedido inteiro. */
.acoes-linha { white-space: nowrap; }
.acoes-linha button { margin-top: 0; padding: var(--e1) var(--e2); font-size: var(--t2); }
.acoes-linha a { font-size: var(--t2); margin-right: var(--e2); }
.fora-da-vista {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Os indicadores da tela inicial.
 *
 * Medido em 24/09/2026: a tela mostrava 67% do que o banco guarda, e o terco
 * calado era o rastro de quem fez o que e quando. Isto e a parte que passa a
 * ser dita em forma de numero.
 *
 * O numero grande em mono e o rotulo pequeno em Atkinson seguem a regra que a
 * folha ja tem: valor de maquina em mono, prosa em Atkinson. O mono aqui nao e
 * maneirismo de rotulo pequeno, e o conteudo em si.
 *
 * E a COR SO ENTRA quando o numero pede alguma coisa de quem esta lendo. Um
 * painel onde tudo tem cor e um painel onde nada chama, que e o mesmo defeito
 * do alerta que dispara toda hora e para de ser lido. */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e3);
}
.indicador {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e4);
  background: var(--papel);
  border: 1px solid var(--traco-fraco);
  border-left: 3px solid var(--traco-fraco);
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--tinta);
}
a.indicador:hover { border-color: var(--traco); background: var(--campo); }
.numero-indicador {
  font-family: var(--mono);
  font-size: var(--t6);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.rotulo-indicador { font-size: var(--t2); color: var(--tinta-fraca); }
/* Tres estados, e nenhum deles e decoracao: pede diz que ha trabalho parado em
   voce, atrasa diz que ele ja passou do tempo, feito diz que acabou bem. */
.indicador.pede { border-left-color: var(--acao); }
.indicador.atrasa { border-left-color: var(--atencao); }
.indicador.atrasa .numero-indicador { color: var(--atencao); }
/* "terminou" e nao "feito": .feito e a mensagem verde de confirmacao, e a
   regra dela vazava para o cartao, que saia em negrito e com regua a mais. */
.indicador.terminou { border-left-color: var(--feito); }

.esperando-demais { color: var(--atencao); font-weight: 700; }

/* O rastro do pedido: quem fez o que, e quando.
 *
 * Linha do tempo e nao tabela, porque aqui a leitura e de cima para baixo, uma
 * historia, e nao a comparacao de coluna que a tabela serve. A marca a esquerda
 * e a mesma espinha da marca do sistema e da coluna de estado. */
.rastro { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.rastro li {
  display: grid;
  grid-template-columns: 11rem 1fr auto;
  gap: var(--e2) var(--e4);
  align-items: baseline;
  border-left: 2px solid var(--traco-fraco);
  padding: 0 0 0 var(--e4);
}
.rastro-quando { font-family: var(--mono); font-size: var(--t2); color: var(--tinta-fraca); }
.rastro-quem { color: var(--tinta-fraca); font-size: var(--t2); }
.rastro-motivo {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--tinta);
  border-left: 2px solid var(--atencao);
  padding-left: var(--e3);
}

@media (max-width: 720px) {
  .rastro li { grid-template-columns: 1fr; gap: var(--e1); }
  .rastro-motivo { grid-column: 1; }
}

/* Os avisos ao orgao.
 *
 * A tela reusa .painel, .grade, .estado e .indicador, e ganha so o que nao
 * existia: a situacao do aviso na coluna de estado, e o texto do email.
 *
 * "Esperando envio" fica na cor neutra de proposito, e nao em ambar. Quando o
 * envio esta ligado, pendente e o estado normal de um aviso de dois minutos de
 * idade, e ambar em estado normal e o alerta que dispara sempre e para de ser
 * lido. O que pede atencao e falhou e venceu. */
.estado.enviada { background: var(--feito-fundo); color: var(--feito); box-shadow: none; }
.estado.falhou, .estado.vencida {
  background: var(--recusa-fundo); color: var(--recusa); box-shadow: none; }
/* Retido e decisao, e nao falha: ambar, que e a cor de "espera alguem olhar". */
.estado.retida { background: var(--atencao-fundo); color: var(--atencao); box-shadow: none; }
/* O segredo do aplicativo perto de vencer. Ambar na borda, e nao a caixa
   vermelha da falha: o envio ainda funciona, e o que se pede e uma
   providencia com a TI. */
.painel.atencao { border-left: 3px solid var(--atencao); }

/* O texto do email inteiro, para copiar e mandar pelo Outlook enquanto nao ha
   relay configurado. Mono porque e o conteudo literal de uma mensagem, e nao
   prosa da interface: o que se ve aqui e byte por byte o que o orgao recebe. */
.texto-do-aviso {
  font-family: var(--mono);
  font-size: var(--t2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: var(--e2) 0 0;
  padding: var(--e3);
  background: var(--campo);
  border-left: 2px solid var(--traco-fraco);
  max-width: var(--prosa);
}
.grade td > details > summary { cursor: pointer; color: var(--tinta-fraca); font-size: var(--t2); }

/* As UOs para as quais nenhum aviso chega a ser gravado. Lista em colunas
   porque sao siglas curtas e podem ser muitas: empilhadas, empurrariam o resto
   da tela para fora da primeira dobra. */
.sem-contato {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 12rem;
  column-gap: var(--e5);
}
.sem-contato li { break-inside: avoid; padding: var(--e1) 0; }
.uo-sem-contato .aviso-dado { font-family: var(--mono); margin-left: var(--e2); }

/* O numero do pedido nunca quebra. Ele e um token so, "1401-2026-0008", e
   quebrado em tres linhas pelos hifens deixa de ser lido como numero: foi o que
   a tela de avisos mostrou quando a coluna ficou estreita ao lado da coluna de
   email. Vale em toda lista, porque a mesma coluna existe em quase todas. */
.grade .pedido { white-space: nowrap; }

/* A linha de detalhe pertence a linha acima, e nao e um registro proprio. Sem
   isto a regua de baixo da linha principal corta as duas ao meio e a tabela
   parece ter o dobro de registros que tem. */
.grade tbody tr:has(+ tr.detalhe) td { border-bottom: 0; }


/* ---------------------------------------------------------------------------
   Revisao das telas, 25/09/2026, aprovada pelo Bruno antes da Fase 2.
   Levantamento: 16 telas, com cada perfil, a 1440 px e a 390 px.
   --------------------------------------------------------------------------- */

/* A coluna do conteudo nao cresce com a tabela mais larga. Sem o min-width, o
   1fr da grade da tela aceitava o minimo da tabela de digitar, e a PAGINA
   inteira rolava para o lado. */
.area { min-width: 0; }
.rolagem { overflow-x: auto; }

/* Os formularios de remover e de salvar, um por linha, nao desenham nada: os
   botoes chegam a eles pelo atributo form. Soltos no fluxo, cada um levava o
   espaco de 1,5rem entre blocos. */
.formularios-da-grade { display: none; }

/* A grade de digitar, mais justa. O cabecalho quebra em duas linhas, "Saldo a /
   aprovar", em vez de alargar a coluna inteira pela frase. */
.grade.linha-de-digitar th { white-space: normal; }
.grade.linha-de-digitar th,
.grade.linha-de-digitar td { padding: var(--e2) var(--e2); }
.grade.linha-de-digitar td:first-child,
.grade.linha-de-digitar th:first-child { padding-left: var(--e3); }

/* Remover como texto, e nao botao de borda em toda linha: seis botoes iguais
   empilhados pesavam mais que os proprios valores. Vermelho porque desfaz. */
.acoes-linha button.como-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--recusa);
  font-weight: 400;
  font-size: var(--t2);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.acoes-linha button.como-link:hover { background: none; color: var(--recusa);
  text-decoration-thickness: 2px; }

/* A acao principal no cabecalho do pedido, empurrada para a direita, onde o olho
   termina a linha do numero. */
.cabecalho-pedido { align-items: center; }
.cabecalho-pedido .acao-principal { margin: 0 0 0 auto; }
.cabecalho-pedido .acao-principal button { margin: 0; }

/* A faixa do recusado: e a primeira coisa da tela porque e o que o orgao veio
   ler. Fundo da recusa, e nao so a borda: nesta tela ela e o conteudo, e nao
   uma anotacao sobre ele. */
.faixa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  background: var(--papel);
  border-left: 4px solid var(--traco);
  border-radius: var(--raio);
}
.faixa-recusa { background: var(--recusa-fundo); border-left-color: var(--recusa); }
.faixa-recusa > h2 { color: var(--recusa); }
.faixa-motivo { font-size: var(--t4); max-width: var(--prosa); }
.faixa form { margin: 0; }
.faixa button { margin: 0; }

/* O caminho alternativo, recolhido. O resumo parece link porque e isso que ele
   faz: abre alguma coisa. */
details.recolhido {
  border-top: 1px solid var(--traco-fraco);
  padding-top: var(--e3);
}
details.recolhido > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--acao);
}
details.recolhido > summary:hover { text-decoration: underline; }
details.recolhido[open] > summary { margin-bottom: var(--e3); }
details.recolhido > * + * { margin-top: var(--e3); }

/* Aprovar e recusar lado a lado: as duas respostas a mesma pergunta. A regua de
   cima e a cor do ato, e nao enfeite. */
.decisao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e4);
  align-items: start;
}
.decisao > div {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  background: var(--papel);
  border: 1px solid var(--traco-fraco);
  border-top: 3px solid var(--acao);
  border-radius: var(--raio);
  padding: var(--e5);
}
.decisao > .decisao-recusar { border-top-color: var(--recusa); }
.decisao form { display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--e3); margin: 0; }
.decisao form label { width: 100%; }
.decisao button { margin: 0; }
/* O lado do IAG 1 dado pela coordenacao, desde 28/09/2026: separado do botao de
   cima por uma regua, porque e um segundo ato, e nao a continuacao do primeiro.
   Com o form no seletor, senao o margin 0 do .decisao form ganharia. */
.decisao form.outro-lado {
  margin-top: var(--e3);
  padding-top: var(--e4);
  border-top: 1px solid var(--traco-fraco);
}

/* Os lados da aprovacao, no alto da tela de decisao. */
.lados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--traco-fraco);
  border-radius: var(--raio);
  background: var(--papel);
}
.lados p { margin: 0; }

/* A linha que nao e do lado de quem ve. O IAG 1 le as linhas de IAG 0 do pedido
   misto e nao decide por elas, decisao de 28/09/2026. Esmaecida, e nao
   escondida: ele precisa do contexto inteiro para aprovar o seu. */
.itens tr.fora-do-lado td { color: var(--tinta-fraca); }

/* A linha aberta no painel de alterar ou remover, que fica embaixo da tabela,
   desde 08/10/2026. Num pedido de trezentas linhas, sem a marca, nao se ve de
   qual delas o painel fala. */
.itens tr.em-edicao td { background: var(--acao-fraca); }
.alterar-linha .painel p a { margin-left: var(--e3); }

@media (max-width: 720px) {
  .decisao { grid-template-columns: 1fr; }
  .cabecalho-pedido .acao-principal { margin-left: 0; width: 100%; }
  .cabecalho-pedido .acao-principal button { width: 100%; }
}

/* O texto invisivel do cabecalho "Linha" tem posicao absoluta: sem a caixa que
   rola como referencia, ele escapava dela e alargava a pagina em 1 px, o
   bastante para a tela inteira rolar para o lado numa janela de 1366. */
.rolagem { position: relative; }

/* Palavra em Atkinson, codigo em mono, que e a regra da casa: "Aprovar" e
   "Global" sao palavras, e no mono largo cada uma dessas duas listas custava
   mais que as de grupo, IAG e IPU juntas. */
.linha-de-digitar select[name="solicitacao"],
.linha-de-digitar select[name="tipo"] { font-family: var(--sans); }
.linha-de-digitar select[name="solicitacao"] { min-width: 5.75rem; }
.linha-de-digitar select[name="tipo"] { min-width: 6.75rem; }
/* O saldo e o numero de apoio da linha: menor e mais claro que o valor pedido,
   que e o numero da pessoa. */
.linha-de-digitar td.saldo { font-size: var(--t2); }
/* Editar e remover um em cima do outro: lado a lado custavam 119 px de coluna
   em toda linha. */
.linha-de-digitar td.acoes-linha a,
.linha-de-digitar td.acoes-linha button { display: block; margin: 0; }
.linha-de-digitar td.acoes-linha > * + * { margin-top: var(--e1); }

/* Em janela de notebook a area perde parte da margem: 2,5rem de cada lado era
   espaco de monitor grande, e em 1366 px era a diferenca entre a grade caber
   ou rolar. */
@media (max-width: 1500px) {
  .area { padding-left: var(--e5); padding-right: var(--e5); }
}


/* ---------------------------------------------------------------------------
   Bloco 3 da revisao: o que deixa a ferramenta atual.
   --------------------------------------------------------------------------- */

/* A lateral: o botao de criar no alto, os grupos separados, e quanto espera.

   Criar pedido e a acao, e nao um lugar, e por isso sai da lista e vira botao.
   Claro sobre o escuro, que e o unico elemento da lateral que pede clique. */
.menu-corpo { display: flex; flex-direction: column; gap: var(--e4); }
.novo-pedido {
  display: block;
  text-align: center;
  background: var(--fundo);
  color: var(--tinta);
  font-weight: 700;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio);
  text-decoration: none;
}
.novo-pedido:hover { background: var(--papel); color: var(--tinta); }
.novo-pedido[aria-current="page"] { box-shadow: 0 0 0 2px var(--sobre-tinta); }
.secoes li.novo-grupo {
  margin-top: var(--e2);
  padding-top: var(--e2);
  border-top: 1px solid var(--tinta-linha);
}
.secoes a { display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2); }
/* O numero do que espera: mono porque e contagem, claro porque precisa ser
   visto no escuro, e so aparece quando nao e zero. */
.contador {
  font-family: var(--mono);
  font-size: var(--t1);
  font-weight: 500;
  line-height: 1.5;
  min-width: 1.6em;
  padding: 0 0.4em;
  text-align: center;
  border-radius: 999px;
  background: var(--fundo);
  color: var(--tinta);
}
/* O botao Menu so existe no celular. A caixa de marcar fica fora da vista, mas
   ainda alcancavel pelo teclado, e o foco dela aparece no botao. */
.abrir-menu { position: absolute; opacity: 0; width: 1px; height: 1px; }
.botao-menu {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tinta-linha);
  border-radius: var(--raio);
  color: var(--sobre-tinta);
  font-weight: 700;
  padding: var(--e2) var(--e4);
  cursor: pointer;
}
.abrir-menu:focus-visible + .botao-menu { outline: 2px solid var(--fundo); outline-offset: 2px; }


/* A barra de etapas: onde o pedido esta no caminho ate o SIAFI.

   E o elemento marcante da ferramenta, e o unico lugar onde ela ousa: uma
   regua que se preenche da esquerda para a direita, como o pedido anda. O resto
   da tela fica quieto em volta dela. Feita e regua media; a atual e regua cheia
   e numero em bloco, na cor do estado; a futura e tracejada. */
.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.etapa {
  flex: 1 1 7.5rem;
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  padding: var(--e2) var(--e3) var(--e3) 0;
  border-bottom: 3px solid var(--traco-fraco);
  color: var(--tinta-fraca);
  font-size: var(--t2);
}
.etapa-numero {
  font-family: var(--mono);
  font-size: var(--t2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.etapa.feita { border-bottom-color: var(--traco); color: var(--tinta); }
.etapa.futura { border-bottom-style: dashed; }
.etapa.atual { border-bottom-color: var(--tinta); color: var(--tinta); font-weight: 700; }
.etapa.atual .etapa-numero {
  background: var(--tinta);
  color: var(--papel);
  padding: 0 0.4em;
  border-radius: 2px;
}
.etapa.atual.recusa { border-bottom-color: var(--recusa); color: var(--recusa); }
.etapa.atual.recusa .etapa-numero { background: var(--recusa); }
.etapa.atual.feito { border-bottom-color: var(--feito); color: var(--feito); }
.etapa.atual.feito .etapa-numero { background: var(--feito); }
.etapa.atual.atencao { border-bottom-color: var(--atencao); color: var(--atencao); }
.etapa.atual.atencao .etapa-numero { background: var(--atencao); }


/* Bloco de leitura, sem moldura. Quase tudo era cartao branco de borda, e as
   paginas ficavam longas e tudo com o mesmo peso. Cartao ficou para o que se
   preenche ou se decide; o que so se le fica solto no fundo. */
.bloco { display: flex; flex-direction: column; gap: var(--e3); }
.bloco + .bloco { border-top: 1px solid var(--traco-fraco); padding-top: var(--e5); }

/* Quem desenvolveu, no Sobre: uma linha por nivel da estrutura, cada uma
   recuada um degrau a mais que a de cima, e a DCMEFO marcada por ser a que
   fez. A sigla tem largura fixa para os nomes comecarem na mesma coluna. */
.estrutura {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--traco-fraco);
  border-radius: var(--raio);
  background: var(--papel);
  max-width: 44rem;
}
.estrutura li {
  display: flex;
  gap: var(--e3);
  align-items: baseline;
  padding: var(--e2) var(--e3);
  font-size: var(--t2);
}
.estrutura li + li { border-top: 1px solid var(--traco-fraco); }
.estrutura li:nth-child(2) { padding-left: calc(var(--e3) + 1 * var(--e4)); }
.estrutura li:nth-child(3) { padding-left: calc(var(--e3) + 2 * var(--e4)); }
.estrutura li:nth-child(4) { padding-left: calc(var(--e3) + 3 * var(--e4)); }
.estrutura li > b { flex: 0 0 5.5em; }
.estrutura li.autora { background: var(--acao-fraca); }

a.botao.secundario {
  background: var(--papel);
  color: var(--acao);
  box-shadow: inset 0 0 0 1px var(--traco);
}
a.botao.secundario:hover { background: var(--acao-fraca); }


/* O que fazer, na tela inicial do orgao: uma linha por pedido, com o numero, a
   situacao e o caminho. O motivo da recusa desce para baixo do numero, onde se
   le como frase, e nao espremido numa coluna. */
.afazeres { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--traco-fraco); }
.afazer {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--e2) var(--e4);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--traco-fraco);
}
.afazer-numero { font-family: var(--mono); font-weight: 500; font-size: var(--t4); }
.afazer-itens { color: var(--tinta-fraca); font-size: var(--t2); }
.afazer > .botao { grid-column: 4; grid-row: 1; justify-self: end; }
.afazer-motivo {
  grid-column: 1 / 4;
  grid-row: 2;
  margin: 0;
  padding-left: var(--e3);
  border-left: 2px solid var(--recusa);
  max-width: var(--prosa);
}
@media (max-width: 720px) {
  .afazer { grid-template-columns: 1fr auto; }
  .afazer > .estado { grid-column: 2; grid-row: 1; justify-self: end; }
  .afazer-itens { grid-column: 1; grid-row: 2; }
  .afazer-motivo { grid-column: 1 / -1; grid-row: 2; }
  .afazer > .botao { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; text-align: center; }
}


/* A tela de entrada: o cartao simples, no meio da janela. Ate 25/09/2026 ele
   grudava no alto com metade da tela vazia embaixo. A versao dividida, com
   painel escuro, saiu no mesmo dia: o Bruno preferiu esta. */
.entrada {
  min-height: calc(100vh - 2 * var(--e6));
  display: flex;
  align-items: center;
  justify-content: center;
}
.entrada .estreito { margin: 0; width: 100%; }
/* De quem e a ferramenta, no pe do cartao: e a tela que todo orgao ve. */
.assinatura-entrada {
  font-size: var(--t1);
  color: var(--tinta-fraca);
  border-top: 1px solid var(--traco-fraco);
  padding-top: var(--e3);
}

/* A tela da grade de digitar cresce ate 84rem. Com elemento e item e UO
   financiadora na tela, a grade pede 1152 px, e os 68rem da area deixavam 1008:
   no pedido da PMMG de 29/09/2026, num monitor de 1920, a tabela rolava para o
   lado com 600 px vazios a direita. So nesta tela, porque nas outras o que ocupa
   a largura e texto e cartao, e esticar piora a leitura. */
.area:has(.linha-de-digitar) { max-width: 84rem; }
/* O arquivo e a justificativa nao acompanham: esticados a 1264 px, o campo de
   arquivo virava uma barra vazia e a caixa de texto, uma linha longa demais
   para ler o que se escreve. Ficam na largura do texto acima deles. O limite e
   no formulario, e nao no campo: no campo, ele subia para o lado do rotulo. */
.area:has(.linha-de-digitar) details.recolhido form,
.area:has(.linha-de-digitar) #justificativa { max-width: var(--prosa); }

/* No notebook de 1366, a mesma grade ainda passava 42 px, e o que ficava atras
   da rolagem era a coluna de Editar e Remover. A area perde mais um degrau de
   margem e a celula, um quarto do respiro, so nesta tela e so nessa faixa. Acima
   de 720, porque abaixo a grade vira cartao e as celulas tem o respiro delas. */
@media (min-width: 721px) and (max-width: 1500px) {
  .area:has(.linha-de-digitar) { padding-left: var(--e4); padding-right: var(--e4); }
  .grade.linha-de-digitar th,
  .grade.linha-de-digitar td { padding-left: calc(var(--e2) * 0.75);
    padding-right: calc(var(--e2) * 0.75); }
  .grade.linha-de-digitar td:first-child,
  .grade.linha-de-digitar th:first-child { padding-left: var(--e3); }
}

/* O celular, no FIM da folha de proposito. Estas regras disputam com as de
   cima pela mesma especificidade, e no CSS ganha a ultima: escritas antes, a
   regra geral do .menu-corpo vinha depois e o menu abria sozinho, sem o botao
   Menu. Visto na foto de 25/09/2026. */
@media (max-width: 900px) {
  .botao-menu { display: inline-flex; }
  .menu-corpo { display: none; }
  .abrir-menu:checked ~ .menu-corpo { display: flex; }
  /* A assinatura e o Sair entram no Menu. Fora dele tomavam duas linhas no
     topo de toda tela, e o topo passava de um terco do celular: no pedido, o
     numero so aparecia no meio da tela. Visto em 27/09/2026. */
  .rodape-lateral { display: none; }
  .abrir-menu:checked ~ .rodape-lateral { display: grid; }
}
@media (max-width: 720px) {
  /* A barra de etapas numa linha: so os numeros, e o nome apenas na etapa
     atual, que e a unica que a pessoa precisa ler ali. Com os cinco nomes ela
     quebrava em tres linhas e o "Executado" ficava sozinho embaixo. */
  .etapa { flex: 1 1 0; min-width: 0; padding-right: var(--e2); }
  .etapa.atual { flex-grow: 3; }
  .etapa:not(.atual) .etapa-nome { display: none; }

  /* Quem desenvolveu: recuo de meio degrau, e a sigla em cima do nome. Com a
     sigla ao lado e o recuo inteiro, o nome da DCMEFO ficava numa coluna de
     quatro palavras por linha. */
  .estrutura li { flex-direction: column; gap: 0; }
  .estrutura li > b { flex: none; }
  .estrutura li:nth-child(2) { padding-left: calc(var(--e3) + 1 * var(--e2)); }
  .estrutura li:nth-child(3) { padding-left: calc(var(--e3) + 2 * var(--e2)); }
  .estrutura li:nth-child(4) { padding-left: calc(var(--e3) + 3 * var(--e2)); }
}

/* Comunicados, desde 08/10/2026. O texto e prosa escrita numa tela e lida por todos
   os orgaos: as quebras de linha que a pessoa digitou sao a unica formatacao que
   ele tem, e pre-wrap preserva as quebras e o recuo como o email de texto simples
   os mantem, sem abrir porta para HTML. Sem overflow-wrap, um link longo no texto fazia a pagina
   inteira rolar para o lado no celular de todo mundo que recebeu. */
.texto-do-comunicado { white-space: pre-wrap; overflow-wrap: anywhere; max-width: var(--prosa); margin: 0; }
.painel textarea { width: 100%; margin-top: var(--e1); }
.faixa-comunicado { background: var(--acao-fraca); border-left-color: var(--acao); }