/* Portal de Ibirité, base visual.
 *
 * PALETA. Todas as cores saem do brasão oficial, amostrado do próprio arquivo do logotipo:
 * azul #000090, azul claro #6090fc, verde #30cc90 e ouro #fcc000. Nenhuma outra família entra,
 * e é por isso que não há roxo, ciano nem terracota em lugar nenhum: cada uma delas era uma
 * escolha solta que não vinha do brasão.
 *
 * O único vermelho do portal é o de PERIGO REAL (prazo vencido, falha de envio, exclusão). Ele
 * não vem do brasão porque o brasão não tem vermelho, e mesmo assim precisa existir: gente lê
 * vermelho como "isto vai dar problema", e trocá-lo por ouro apagaria justamente o aviso que
 * tem de gritar. Fora desse papel, ele não aparece.
 *
 * Os tons de texto (sufixo -tx) são versões escurecidas, escolhidas para passar AA sobre branco.
 * Os tons de névoa (sufixo -nevoa) são fundos claros para pílula, aviso e destaque.
 *
 * UMA DECLARAÇÃO POR PAPEL, E ELA É A QUE PINTA. Esta folha cresceu em demãos: cada onda de
 * trabalho acrescentava um bloco no fim repintando seletores que já existiam lá em cima. Sobraram
 * 195 declarações que a folha lia e jogava fora, porque um seletor idêntico mais abaixo dizia
 * outra coisa. Elas saíram todas, uma a uma, conferindo antes e depois o valor VENCEDOR de cada
 * par (seletor, propriedade): a tela não mudou um pixel, e o que se lê aqui passou a ser o que
 * de fato pinta. O perigo que isso desarma é mudo: alguém corrigia a cor na primeira ocorrência,
 * recarregava, não via diferença nenhuma e concluía que o problema era outro.
 *
 * Quem for acrescentar regra: procure o seletor antes. Se ele já existe, mexa nele, e não numa
 * demão nova no fim do arquivo · foi assim que as 195 nasceram. */
:root{
  /* as quatro cores do brasão, como saem do arquivo */
  --i-azul:#1d2c96;
  --i-azul-forte:#141f6e;
  --i-azul-claro:#4f7df0;
  --i-azul-nevoa:#e9ecfb;
  --i-verde:#17a97c;
  --i-verde-tx:#0e6f52;
  --i-verde-nevoa:#e3f7ef;
  --i-ouro:#f0b400;
  --i-ouro-tx:#7a5300;
  --i-ouro-nevoa:#fff6e0;
  /* o único vermelho, e só para perigo */
  --i-perigo:#a3122b;
  --i-perigo-nevoa:#fdecef;
  /* As três bordas de estado (--i-verde-borda, --i-ouro-borda, --i-perigo-borda) NÃO ficam aqui:
   * elas nascem uma vez só, mais abaixo, junto de --i-azul-borda e da razão de contraste medida de
   * cada uma. Estavam declaradas nos dois lugares, e duas delas com um valor DIFERENTE do de
   * baixo: quem lia o topo achava que mandava, mas quem pintava a tela era sempre a segunda
   * cópia. Cor escrita duas vezes é cor que um dia diverge sem ninguém perceber. */

  /* nomes de uso, para a folha inteira falar de papel e não de cor */
  --verde:var(--i-verde); --azul:var(--i-azul-claro); --amarelo:var(--i-ouro);
  --marca:var(--i-azul);
  --marca-forte:var(--i-azul-forte);
  --marca-claro:var(--i-azul-nevoa);
  --azul-link:var(--i-azul);
  --tx:#171a2e; --mut:#5b6180; --fundo:#ffffff; --apoio:#f2f4fb; --linha:#dde1f0;
  --erro:var(--i-perigo); --ok:var(--i-verde-tx);

  /* ===== derivados do brasão, criados porque o painel precisava deles =====
   * Cada um nasceu de uma cor solta que aparecia repetida à mão em vários lugares. Todas as
   * razões de contraste abaixo foram calculadas, não estimadas. */

  /* o ouro do brasão não sobrevive a um traço fino de gráfico sobre cartão branco: #f0b400 dá
   * 1,87:1 e some. Este é o mesmo ouro escurecido até cruzar o 3:1 que a WCAG 1.4.11 exige de
   * objeto gráfico */
  --i-ouro-serie:#a97e00;      /* 3,70:1 sobre --fundo */

  /* extremo frio do mapa de calor. Antes a rampa saía de um cinza neutro e chegava em azul,
   * atravessando uma zona morta acinzentada no meio; com este token os dois extremos são a
   * mesma família e a escala fica monotônica. Não é texto: o critério aqui é a célula de valor
   * zero não sumir dentro do cartão branco */
  --i-azul-bruma:#dfe4fa;      /* 1,26:1 sobre --fundo, contra 1,13:1 do cinza que havia antes */

  /* fundo da aplicação. Havia var(--apoio), #f6f8fc e #f7f9fc, três cinzas frios escritos à mão para
   * o mesmo papel em oito lugares diferentes */
  --i-azul-fundo:var(--apoio);      /* --mut sobre ele: 5,35:1 · --tx sobre ele: 15,17:1 */

  /* estado desligado de controle: o trilho da chave precisa de 3:1 como qualquer componente de
   * interface, e o cinza esverdeado que havia antes reprovava com 1,48:1 */
  --i-azul-controle:#8b93b8;   /* 3,02:1 sobre --fundo */

  /* texto claro sobre azul escuro. Existiam seis valores para o mesmo papel, um deles um branco
   * a 50% que reprovava AA (3,98:1) no rótulo de grupo da barra lateral */
  --sobre-azul:#e8ebff;        /* 9,58:1 sobre --i-azul · 12,24:1 sobre --i-azul-forte */
  --sobre-azul-fraco:#c7cdea;  /* 7,20:1 sobre --i-azul · 9,20:1 sobre --i-azul-forte */

  /* bordas de caixa de estado. Cada uma é a própria cor do estado diluída no papel branco, então
   * deriva do estado em vez de ser mais um verde/ouro/vermelho/azul avulso */
  --i-verde-borda:#a7decd;     /* 1,50:1 sobre --fundo */
  --i-ouro-borda:#f9e094;      /* 1,30:1 sobre --fundo */
  --i-perigo-borda:#e2b3bb;    /* 1,84:1 sobre --fundo */
  --i-azul-borda:#bbc0e0;      /* 1,79:1 sobre --fundo */

  /* sombra e véu numa família só, e ela é a do brasão: havia preto puro em treze lugares e azul
   * escuro em dezesseis, para o mesmo efeito. O triplo cru é para escrever rgba(var(--sombra),α) */
  --sombra:16,24,64;
  --veu:rgba(16,24,64,.5);
}

/* atributo hidden vale mais que qualquer display desta folha: sem isto, todo bloco que ganha
 * display:flex ou grid reaparece vazio na tela, como aconteceu com o balão do gráfico */
[hidden]{display:none !important}
html{font-size:16px}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--tx);background:var(--fundo);line-height:1.6}
.alto-contraste{filter:invert(1) hue-rotate(180deg)}
.alto-contraste img,.alto-contraste video,.alto-contraste iframe{filter:invert(1) hue-rotate(180deg)}
.miolo{max-width:1080px;margin:0 auto;padding:0 18px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pular{position:absolute;left:-9999px;top:0;background:var(--marca-forte);color:var(--fundo);padding:10px 16px;z-index:99;border-radius:0 0 8px 0}
.pular:focus{left:0}
:focus-visible{outline:3px solid var(--marca);outline-offset:2px}

/* faixa com as cores do brasão, a identidade no primeiro pixel */
.faixa-gov{display:flex;height:5px}
.faixa-gov i{flex:1}
.faixa-gov .f1{background:var(--verde)}.faixa-gov .f2{background:var(--amarelo)}.faixa-gov .f3{background:var(--azul)}

.topo-utils{font-size:.78rem;color:var(--mut)}
.a11y{gap:6px}
.a11y button{cursor:pointer}
.a11y button:hover{border-color:var(--marca)}

header{background:var(--fundo)}
.cabeca{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
/* A BUSCA DO CABEÇALHO ESTAVA DESENHADA DUAS VEZES, com nomes diferentes para o mesmo campo.
 * Aqui ela era `#busca ...` (larga, 460px, canto de 6px) e no bloco "menu abas brancas" ela é
 * `#menu #busca ...` (compacta, 250px, canto de 8px, fundo cinza). O formulário só existe dentro
 * do #menu, então o seletor mais específico ganhava sempre e nada desta demão chegava à tela:
 * quem viesse ajustar a largura da busca por aqui mexeria num número que não pinta. */
button{background:var(--marca);color:var(--fundo);border:0;padding:10px 18px;font-size:.95rem;font-weight:600;cursor:pointer}
button:hover{background:var(--marca-forte)}
button.link{background:none;color:var(--erro);padding:0;text-decoration:underline;font-size:inherit;font-weight:500}

/* O item do menu era pintado aqui como aba azul do tema antigo (fundo branco sobre azul, pílula
 * de 8px) e repintado como aba branca lá embaixo, no bloco "menu abas brancas". As duas demãos
 * tinham o MESMO seletor, então cor, recheio, canto, corpo e peso escritos aqui nunca chegavam
 * à tela · quem viesse corrigir a cor do menu por aqui não veria diferença nenhuma. Ficou só o
 * que ninguém repinta depois. */
#menu a{text-decoration:none}

main{padding-top:24px;padding-bottom:56px;min-height:45vh}
h1{font-size:1.65rem;margin:.3em 0 .5em;letter-spacing:-.01em}
h2{font-size:1.18rem;margin:1.1em 0 .4em}
h2 small{color:var(--mut);font-weight:400;font-size:.82rem}
a{color:var(--azul-link)}
/* o realce da busca é o ouro do brasão diluído no papel, mas não a névoa: --i-ouro-nevoa dá
 * 1,08:1 contra o branco e o trecho achado simplesmente não aparece. Este tom, o mesmo das bordas
 * de atenção, dá 1,30:1, mais do que o amarelo solto que havia antes (1,21:1), e o texto por cima
 * fica em 13,17:1 */
mark{background:var(--i-ouro-borda)}
.trilha{font-size:.8rem;color:var(--mut);margin:2px 0 10px}
.trilha a{color:var(--mut)}

/* home
 *
 * A HOME DA PRIMEIRA VERSÃO SAIU DAQUI. Eram sete componentes · .banners e .banner (a grade de
 * banners antes do carrossel), .sec-h (o título de seção com o "ver todos" à direita), .card, e
 * .cartoes com o seu modificador .videos · e nenhum deles existe mais na marcação: a home passou
 * a ser blocos configuráveis (.blh), com carrossel, .cartazes, .fpd e .preciso. Os nomes não
 * aparecem em nenhuma das 83 telas que o portal emite nem em uma linha de PHP, então o que
 * estava aqui era desenho de uma página que ninguém mais abre · e desenho morto é pior do que
 * desenho nenhum, porque quem chega para mexer na home procura primeiro no lugar errado.
 * O bloco de vídeo continua: .video é emitido na página da matéria e no script do YouTube. */
.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:var(--i-azul-forte)}
.video b{display:block;margin-top:8px;font-size:.9rem}
.video.destaque{max-width:760px;margin:10px 0 18px}

/* listagens */
.lista{list-style:none;padding:0}
.total{color:var(--mut);font-size:.88rem}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:end;background:var(--apoio);border:1px solid var(--linha);border-radius:12px;padding:12px 14px;margin:0 0 12px}
.filtros label{display:grid;gap:3px;font-size:.78rem;font-weight:600;color:var(--mut)}
.filtros input,.filtros select{padding:8px 10px;border:1px solid var(--linha);border-radius:8px;font:inherit;background:var(--fundo);min-width:140px}
.pags{display:flex;gap:6px;margin:18px 0;flex-wrap:wrap}
.pags a,.pags b{padding:6px 12px;border:1px solid var(--linha);border-radius:8px;text-decoration:none}
.pags b{background:var(--marca);color:var(--fundo);border-color:var(--marca)}
.botao-arquivo{display:inline-block;background:var(--marca-claro);border:1px solid var(--marca);color:var(--marca-forte);padding:9px 16px;border-radius:10px;text-decoration:none;font-weight:600}

/* tabelas (36.1 e painel): rolagem no proprio quadro */
.tw{overflow-x:auto;border:1px solid var(--linha);border-radius:12px;background:var(--fundo)}
.tw table{min-width:640px}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linha);vertical-align:top}
th{background:var(--apoio);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
th a{color:var(--tx);text-decoration:none}
tr:hover td{background:var(--marca-claro)}

/* formularios e painel */
.form{display:grid}
.form label{display:grid;font-weight:600}
/* textarea e select saíram desta lista: o bloco "campos uniformes", mais abaixo, escreve os dois
 * de novo com as MESMAS cinco propriedades, e é ele que pinta. Repetidos aqui, davam a impressão
 * de que a medida do campo se ajusta neste ponto. */
.form input[type=text],.form input[type=url],.form input[type=email],.form input[type=number],.form input[type=password]{padding:10px;border:1px solid var(--linha);border-radius:8px;font:inherit;background:var(--fundo)}
.form .linha{display:flex;align-items:center;gap:8px}
/* ============================================================================================
   A CAIXA DE BUSCA · o filtro e tudo que fala dele, num quadro só
   ============================================================================================
   O QUE HAVIA: o filtro era uma fileira de controles solta sobre o fundo da página, e em volta
   dela orbitavam quatro coisas que só existem por causa dele · a conferência da definição, a dica
   do atalho de teclado, as pastilhas do que está filtrando e a contagem do resultado. Cada uma
   com a sua margem, nenhuma com fronteira. Numa tela larga isso vira uma faixa de cinco alturas
   de texto onde nada se agrupa, e o olho não sabe onde a área de busca termina e onde a lista
   começa · que é justamente a pergunta que ele faz ao chegar.
   A caixa não acrescenta informação nenhuma: ela só diz, com uma borda, que aquelas cinco coisas
   são o mesmo assunto. É o trabalho mais barato que uma borda faz. */
.cx-busca{background:var(--fundo);border:1px solid var(--linha);border-radius:14px;
  padding:13px 15px 11px;margin:0 0 14px;box-shadow:0 1px 3px rgba(var(--sombra),.06)}
/* dentro da caixa nada precisa de fundo próprio · o filtro perde o dele, senão fica caixa dentro
   de caixa, que é o desenho que faz uma tela parecer um formulário de imposto */
.cx-busca .filtro{margin:0;background:none;border:0;padding:0}
.cx-busca>*:last-child{margin-bottom:0}
/* a conferência da definição abre a caixa, e por isso ela não leva a margem de baixo dela */
.cx-busca .diag-def{margin-bottom:11px}
@media print{.cx-busca{display:none}}

/* AS DUAS FAMÍLIAS DE BARRA DE FILTRO VIRAM UMA.
   O portal tinha .filtros (3 telas), que já era uma caixa com borda e fundo de apoio, e .filtro
   (12 telas), que era uma fileira de controles SOLTA sobre o fundo da página. A mesma pergunta
   ("como recorto esta lista?") tinha duas aparências conforme a tela · e nas doze sem caixa o olho
   não sabia onde a área de busca termina e onde a lista começa, que é a primeira coisa que ele
   procura ao chegar. A caixa não acrescenta informação: ela diz, com uma borda, que aqueles
   controles são o mesmo assunto.
   .filtro continua existindo como nome porque doze telas o escrevem, e trocar o nome em doze
   lugares só para ter um nome é mexer em doze telas sem ninguém ver diferença. */
/* A CAIXA DE BUSCA É BRANCA, e é a mesma em toda tela.
   Ela nasceu em --apoio, o lavanda de fundo, enquanto a caixa da listagem de módulo (.cx-busca)
   nasceu branca · e como a página do painel também é lavanda, o resultado era a mesma caixa
   aparecendo como cartão numa tela e como mancha sem contorno na outra. Branca, ela é cartão nas
   duas, e a página continua sendo o fundo contra o qual os cartões se destacam. */
.filtro{display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  background:var(--fundo);border:1px solid var(--linha);border-radius:14px;padding:13px 15px;margin:0 0 12px;
  box-shadow:0 1px 3px rgba(var(--sombra),.06)}
.filtro input,.filtro select{padding:8px 10px;border:1px solid var(--linha);border-radius:8px;font:inherit;background:var(--fundo)}
/* dentro da caixa o rótulo do campo fica em cima dele, como em .filtros · sem isto, os rótulos que
   algumas telas escrevem soltos ficavam pendurados no meio da fileira, entre dois controles */
.filtro label{display:grid;gap:3px;font-size:.78rem;font-weight:600;color:var(--mut);margin:0}

/* AS ANOTAÇÕES QUE SEGUEM O FILTRO, APERTADAS COMO UM GRUPO.
 *
 * A listagem de módulo e a fila de protocolos ganharam a banda de verdade (.barra-lista), em que as
 * anotações viram células lado a lado. As outras doze telas montam a contagem com muitas cláusulas
 * coladas por concatenação · "mostrando 1 a 25 de 300 · candidatos do bairro X · inscrições feitas
 * de tal a tal" · e reescrevê-las uma a uma para caber numa banda seria mexer em doze telas
 * delicadas por ganho de arrumação, com risco de perder uma cláusula no caminho.
 *
 * O que a folha pode fazer sem tocar nelas é PARAR DE SEPARÁ-LAS: cada uma nascia com a margem
 * cheia de parágrafo, e três anotações seguidas somavam três vãos entre o filtro e a tabela. Com
 * as margens apertadas elas se leem como um bloco, que é o que são · e o dia em que uma delas
 * virar banda de verdade, esta regra simplesmente deixa de alcançá-la. */
.filtro + p.total,.filtros + p.total,.filtro + p.exportar,.filtros + p.exportar,
.filtro + .filtros-pil,.filtros + .filtros-pil{margin-top:-2px}
p.total + p.total,p.total + p.exportar,p.exportar + p.total,
.filtros-pil + p.total,.filtros-pil + p.exportar{margin-top:2px}
/* e o par que se lê junto não pode ter pesos diferentes: .exportar era .82rem e .total .8rem, e a
   linha de baixar saía ligeiramente maior que a contagem que ela acompanha */
p.total,p.exportar{font-size:.8rem;line-height:1.5}
/* a regra que tira o fundo do filtro dentro da caixa de busca mora com a família .cx-busca, mais
   abaixo · duas definições do mesmo seletor é como uma delas passa a parecer que vale e não vale */
/* O CAMPO DE ESCOLHA TEM UM DESENHO SÓ, EM QUALQUER LUGAR.
   A folha desenhava <select> em quatro contêineres · .filtros, .filtro, .form e .menu-arv · e
   nunca como elemento. Dos 77 que o portal renderiza, 72 caíam num deles e CINCO ficavam órfãos,
   saindo no traço do sistema operacional ao lado de botões e campos desenhados pela casa. Um
   deles é o pior tipo de vizinhança: na tela de prazos, o seletor de dentro do formulário sai com
   borda de 1,5px e raio 9, e o de dois centímetros ao lado sai cru · a mesma tela com dois
   desenhos.
   Um órfão é traiçoeiro e vale explicar: a tabela de prazos fica DE PROPÓSITO fora do <form> e se
   liga a ele pelo atributo form="fPrazos". Só que form= liga o campo ao ENVIO, não à árvore do
   documento, e '.form select' é seletor DESCENDENTE · ele nunca alcança o campo que está fora.
   POR QUE ISTO NÃO MEXE NOS OUTROS 72: 'select' é especificidade (0,0,1) e perde para
   '.filtros select', '.filtro select', '.form select', 'table.matriz select.niv' e para as classes
   de estado select.n-*, todas (0,1,1) ou mais. Quem já tem dono continua exatamente como está. */
select{padding:8px 10px;border:1px solid var(--linha);border-radius:8px;font:inherit;background:var(--fundo);color:var(--tx)}
.inline{display:inline}
.erro{color:var(--erro);font-weight:600}
.ok{color:var(--ok);font-weight:600}
.manual{font-size:.78rem;font-weight:600;margin-left:10px;vertical-align:middle}

/* largura do painel antigo removida: quem manda agora e .p-corpo main */

/* entrada antiga substituida pelo cartao centralizado mais abaixo */
.login form{display:grid;gap:12px}
.login label{display:grid;gap:4px;font-weight:600;font-size:.9rem}

/* editor de textos integrado (item 13) */
.ed-area{font:inherit}
.ed-area:focus-visible{outline:3px solid var(--marca);outline-offset:-3px}
.ed-area h2{font-size:1.1rem}.ed-area ul,.ed-area ol{padding-left:22px}

/* O conteúdo rico público (.rico) é definido uma vez só, mais abaixo, junto do resto da
 * tipografia de leitura. Aqui havia uma primeira versão inteira que a de baixo repintava
 * linha por linha · quem ajustasse esta não mudava nada na tela. */

/* rodape estruturado.
 * O único literal que sobra daqui para baixo é branco com alfa, e ele fica de propósito: sobre o
 * azul do brasão um filete ou uma superfície translúcida acompanha o fundo que estiver atrás,
 * coisa que nenhum token chapado faz. É sempre o mesmo branco do papel, só que diluído, então não
 * entra família nova. Texto nunca usa isso: texto sobre azul é --sobre-azul (12,24:1 sobre
 * --i-azul-forte) ou --sobre-azul-fraco (9,20:1). */
footer{border-top:4px solid var(--marca);background:var(--marca-forte);color:var(--sobre-azul);margin-top:30px}
.pe{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;padding-top:28px;padding-bottom:18px}
.pe img{filter:brightness(0) invert(1);opacity:.95}
.pe h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;color:var(--amarelo)}
.pe p{font-size:.85rem;line-height:1.6;margin:8px 0 0}
.pe ul{list-style:none;margin:0;padding:0}
.pe li{margin-bottom:6px}
.pe a{color:var(--sobre-azul);text-decoration:none;font-size:.88rem}
.pe a:hover{text-decoration:underline}
.assina{border-top:1px solid rgba(255,255,255,.18);padding-top:10px;padding-bottom:14px;font-size:.75rem;color:var(--sobre-azul-fraco)}

/* letreiro rolante de avisos, inspiracao da referencia do usuario; para no hover e respeita reducao de movimento */
.letreiro{white-space:nowrap;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.fita{display:inline-block;padding:7px 0;animation:rola 28s linear infinite}
.fita span{margin:0 34px}
.fita span::before{content:"·";margin-right:34px}
.letreiro:hover .fita,.letreiro:focus-within .fita{animation-play-state:paused}
/* a fita traz 15 cópias do mesmo texto, então um ciclo anda 1/15 dela, que é um bloco inteiro:
 * a emenda cai sempre num ponto igual ao anterior e o laço fica invisível */
@keyframes rola{from{transform:translateX(0)}to{transform:translateX(-6.6667%)}}
@media (prefers-reduced-motion: reduce){.fita{animation:none}}

/* FAIXA DE AVISO URGENTE, logo abaixo do letreiro e acima da faixa do brasão.
 *
 *  Ela é o contrário do letreiro em tudo, de propósito: o letreiro é permanente, rola, é discreto
 *  e fala de horário de atendimento; esta é temporária, fica parada, tem contraste alto e fala de
 *  interdição de via e de enchente. Se as duas se parecessem, a emergência viraria mais uma frase
 *  que a pessoa já aprendeu a ignorar no alto da página.
 *
 *  Ouro do brasão, e não vermelho: o único vermelho do portal está reservado a perigo real
 *  (prazo vencido, falha de envio, exclusão), e gastá-lo aqui apagaria justamente o aviso que
 *  precisa gritar quando aparecer. --i-ouro-tx sobre --i-ouro-nevoa passa AA com folga.
 *
 *  O texto NÃO é truncado nem tem altura fixa: aviso de emergência cortado no meio da frase é
 *  pior do que aviso nenhum, e no telefone a frase legítima ocupa três linhas. */
.urgente{background:var(--i-ouro-nevoa);color:var(--i-ouro-tx);border-top:1px solid var(--i-ouro-borda);
  border-bottom:1px solid var(--i-ouro-borda)}
.urgente .miolo{display:flex;align-items:flex-start;gap:12px;padding-top:11px;padding-bottom:11px}
/* o triângulo não encolhe junto com o texto longo, e sobe um fio para alinhar com a primeira linha */
.urgente svg{width:21px;height:21px;flex:none;margin-top:1px}
.urgente p{margin:0;font-size:.9rem;font-weight:700;line-height:1.45}
/* o link herda a cor da faixa e se distingue pelo sublinhado, e não por outra cor: cor nova aqui
 * seria a quinta família na mesma tarja e nenhuma delas viria do brasão */
.urgente a{color:inherit;font-size:.85rem;font-weight:700;white-space:nowrap;margin-left:auto;
  text-decoration:underline;text-underline-offset:3px}
.urgente a:hover{text-decoration-thickness:2px}
/* em coluna estreita o "Ver os detalhes" empurrado para a direita ficava colado na borda e longe
 * da frase a que pertence: passa para baixo do texto, alinhado com ele */
@media (max-width:640px){
  .urgente .miolo{flex-wrap:wrap}
  .urgente p{flex:1 1 100%;order:1}
  .urgente svg{order:0}
  .urgente a{order:2;margin-left:33px}
}

/* A BARRA AZUL DE UTILIDADES E O SELETOR DE IDIOMAS ANTIGO SAÍRAM DAQUI. A régua do topo é a
 * cinza (.topo-utils) desde que o cabeçalho mudou, e a escolha de idioma é o <details class=
 * "idioma"> logo abaixo. Os nomes .barra-azul, .linguas e .fone não aparecem em nenhuma das 83
 * telas que o portal emite, nem em uma linha de PHP: era desenho de uma barra que não existe.
 * O que ficou é o único seletor deste trecho que ainda pinta alguma coisa. */
.btn-painel:hover{filter:brightness(1.06)}

/* marca: a logo com o nome do órgão ao lado, em .orgao, para o brasão nunca aparecer sozinho.
 * O nome por extenso DENTRO da marca (.marca .nome) foi outra tentativa, e não sobrou nada dela
 * na marcação: o nome mora em .orgao, ao lado do brasão, e não dentro do link da logo. */
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.cabeca .a11y{display:flex;gap:6px}

/* menu em grupos com submenu acessivel (details abre por clique e teclado) */
#menu details.grupo{position:relative}
/* mesma história do #menu a logo acima: cor, recheio, canto, corpo e peso do grupo são escritos
 * de novo no bloco "menu abas brancas", com o mesmo seletor. Aqui fica só o que é do <summary>
 * enquanto elemento (tirar a setinha nativa, virar clicável) e ninguém repinta depois. */
#menu summary{list-style:none;cursor:pointer;user-select:none}
#menu summary::-webkit-details-marker{display:none}
#menu .sub{position:absolute;left:0;top:100%;background:var(--fundo);min-width:230px;z-index:50;padding:6px}
#menu .sub a{display:block;color:var(--tx);font-weight:500}
#menu .sub a:hover{background:var(--marca-claro);color:var(--marca-forte)}
@media(max-width:760px){#menu .sub{position:static;box-shadow:none;border-radius:8px;margin:2px 0 6px}}

/* barra cinza sobria absorvendo as utilidades.
 * .utils-esq e .utils-dir eram as duas metades desta régua antes de ela virar um flex com
 * justify-content:space-between; .topo-utils .linguas e .topo-utils .fone são a mesma herança do
 * seletor de idiomas e do telefone que a régua não mostra mais. Nenhum dos quatro aparece na
 * marcação, e a régua que está no ar é a que se lê logo abaixo. */
.topo-utils .atalhos{flex-wrap:wrap}
.topo-utils .btn-painel{color:var(--fundo);font-weight:700;text-decoration:none;padding:4px 13px;font-size:.78rem}
.topo-utils .btn-painel:hover{background:var(--marca-forte)}
.marca img{display:block;height:62px;width:auto}
@media(max-width:820px){.topo-utils .atalhos{display:none}.marca img{height:50px}}

/* tom institucional: cantos discretos, nada de pilula */
button{border-radius:6px}
.letreiro{display:flex;align-items:stretch}
.let-fita{flex:1;white-space:nowrap}
.let-ctl{display:flex;align-items:center;padding:0 14px}
.let-ctl #letPausa{color:var(--fundo);font-size:.7rem;font-weight:700;letter-spacing:.04em}
/* aqui havia um `.let-ctl #letPausa:hover` com fundo transparente e cor de borda: o fundo é
 * repintado pelo bloco "controles do letreiro na familia azul", lá embaixo, e a cor de borda não
 * pinta nada porque o botão perdeu a borda (border:0) no bloco "pausa limpa". Duas demãos para o
 * mesmo hover deixavam a de cima parecendo a que manda.
 *
 * O terceiro desenho do seletor de idiomas ficava aqui (`.let-ctl .linguas ...`), e era o de
 * dentro do letreiro. Também não existe na marcação: quem escolhe idioma no letreiro é o
 * <details class="idioma">, desenhado mais abaixo, e era ele que pintava desde sempre. */

/* atalhos numerados neutros, sem quadradinho amarelo */
.topo-utils .atalhos i{padding:0 5px}
.topo-utils .btn-painel{background:var(--marca-forte);border-radius:6px}

/* a terceira demão da busca do cabeçalho saiu daqui pelo mesmo motivo da primeira: borda, canto
 * e recheio são escritos em `#menu #busca ...`, no bloco "menu abas brancas", e é de lá que vêm */

/* menu: item reto, estado ativo com filete inferior, sem pilula */
#menu .sub a{padding:9px 12px}

/* ===== letreiro claro, texto azul, controles como a referencia ===== */
.letreiro{background:var(--fundo);color:var(--i-azul);border-bottom:1px solid var(--linha)}
.fita{color:var(--i-azul)}
.fita span::before{color:var(--azul)}
.let-ctl{background:transparent;border-left:1px solid var(--linha);gap:16px}
/* O BOTÃO DE PAUSA ESTAVA DESENHADO DUAS VEZES, com nomes diferentes para o mesmo elemento.
 * Este bloco escrevia `#letPausa ...` e o bloco "pausa limpa", mais abaixo, escreve
 * `.let-ctl #letPausa ...` · seletor mais específico, então era sempre o de baixo que pintava.
 * As barrinhas chegaram a divergir (3x12 aqui, 3,5x13 lá) sem ninguém ver, porque só uma das
 * medidas ia para a tela. O botão só existe dentro de .let-ctl, então ficou a versão de baixo,
 * e aqui sobrou apenas o que ela NÃO escreve: o arranjo em linha do par de barrinhas. */
#letPausa{display:inline-flex;gap:4px;align-items:center;justify-content:center}
.idioma{position:relative}
.idioma summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--i-azul);font-weight:700;font-size:.78rem}
.idioma summary::-webkit-details-marker{display:none}
.idioma summary svg{width:15px;height:15px}
.idioma summary b{font-size:.6rem}
/* o hover do seletor de idioma é escrito uma vez só, junto com o do botão de pausa, no bloco
 * "controles do letreiro na familia azul": a demão cinza que existia aqui nunca chegava à tela */
.idioma > div{position:absolute;right:0;top:calc(100% + 4px);background:var(--fundo);border:1px solid var(--linha);box-shadow:0 8px 22px rgba(var(--sombra),.12);z-index:60}
.idioma > div a{display:block;color:var(--tx);padding:8px 12px;border-radius:6px;font-size:.84rem;font-weight:600}
.idioma > div a:hover{background:var(--marca-claro)}

/* A régua de utilidades fina foi absorvida pelo bloco "régua de utilidades" mais abaixo, que
 * já escrevia os mesmos seletores depois destes. */

/* ===== cabeca linha gov.br ===== */
.cabeca{gap:20px}
.orgao{font-size:.82rem;color:var(--mut);border-left:1px solid var(--linha);padding-left:18px;line-height:1.5}
.orgao b{display:block;color:var(--tx);font-size:.95rem}
.cab-dir{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.soc{display:flex;gap:12px}
.soc span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tx);margin-right:2px}
.soc a{color:var(--mut);display:inline-flex}
.soc a:hover{color:var(--marca)}
.btn-painel{border:1.5px solid var(--marca);color:var(--marca);background:transparent;font-weight:700;padding:8px 20px;border-radius:100px;font-size:.86rem;text-decoration:none}
.btn-painel:hover{background:var(--marca-claro)}
.topo-utils .btn-painel{display:none}

/* ===== menu abas brancas com a busca da versao 7 ===== */
#menu{background:var(--fundo);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
#menu .miolo{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding-top:0;padding-bottom:0}
#menu a,#menu summary{color:var(--tx);background:none;border-radius:0;padding:14px 15px;font-size:.92rem;font-weight:600;border-bottom:3px solid transparent}
#menu a:hover,#menu summary:hover{background:none;color:var(--marca)}
#menu a[aria-current="page"]{background:none;box-shadow:none;color:var(--marca);border-bottom-color:var(--marca);font-weight:800}
#menu details[open] summary{background:none;box-shadow:none;color:var(--marca);border-bottom-color:var(--marca)}
#menu summary::after{color:var(--mut)}
#menu .sub{border:1px solid var(--linha);border-radius:0 0 8px 8px;box-shadow:0 10px 24px rgba(var(--sombra),.1)}
#menu #busca{margin-left:auto;flex:1;display:flex;gap:8px;padding:8px 0}
#menu #busca input{flex:1;background:var(--apoio);border:1px solid transparent;border-radius:8px;padding:10px 16px;font-size:.95rem}
#menu #busca input:focus{border-color:var(--marca);background:var(--fundo)}
#menu #busca button{border-radius:8px}
@media(max-width:880px){#menu #busca{margin-left:0;max-width:none;width:100%}}

/* regua de utilidades: atalhos numa ponta, acessibilidade na outra, ambos no tema */
.topo-utils{background:var(--apoio);border-bottom:1px solid var(--linha)}
.topo-utils .miolo{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:5px;padding-bottom:5px;flex-wrap:wrap}
.topo-utils .atalhos{display:flex;gap:4px}
.topo-utils .atalhos a{display:inline-flex;align-items:center;gap:7px;color:var(--mut);font-size:.78rem;font-weight:600;padding:4px 9px;border-radius:6px;text-decoration:none}
.topo-utils .atalhos a:hover{background:var(--fundo);color:var(--marca)}
.topo-utils .atalhos i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border:1.5px solid var(--mut);color:var(--mut);font-weight:800;font-size:.68rem;border-radius:5px;background:var(--fundo)}
.topo-utils .atalhos a:hover i{border-color:var(--marca);color:var(--marca)}
.a11y{display:inline-flex;border:1px solid var(--linha);border-radius:8px;overflow:hidden;background:var(--fundo)}
.a11y button{background:var(--fundo);color:var(--tx);border:0;border-right:1px solid var(--linha);border-radius:0;padding:5px 14px;font-size:.78rem;font-weight:700}
.a11y button:last-child{border-right:0}
.a11y button:hover{background:var(--marca-claro);color:var(--marca-forte)}
/* O CONTRASTE LIGADO PRECISA APARECER NO PRÓPRIO BOTÃO.
 *
 * Ele agora dura mais de uma página, e um interruptor que atravessa a navegação sem dizer que
 * está ligado é pior do que um que se apaga: a pessoa vê o portal diferente na terça e não sabe
 * onde desfazer. O ponto branco antes do rótulo é reforço de FORMA, porque o botão fica dentro
 * do próprio recurso que a pessoa ligou por não distinguir cor. */
.a11y button[aria-pressed="true"]:hover{background:var(--marca-forte);color:var(--fundo)}
.a11y button[aria-pressed="true"]::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--fundo);margin-right:6px;vertical-align:.12em}

/* idiomas em cartao, como a referencia: titulo, subtitulo e o atual destacado */
.idioma > div{min-width:210px;padding:8px;border-radius:14px}
.idioma .opc{display:block;padding:10px 14px;border-radius:10px;text-decoration:none;margin-bottom:2px}
.idioma .opc b{display:block;font-size:.92rem;font-weight:800;color:var(--tx)}
.idioma .opc i{font-style:normal;font-size:.8rem;color:var(--mut)}

/* sem a barra verde herdada sob o cabecalho */
header{border-bottom:0}

/* CORRECAO: o dropdown de idiomas era cortado pelo overflow do letreiro */
.letreiro{overflow:visible}
.let-fita{overflow:hidden}

/* pausa limpa, sem as regras herdadas do tema escuro */
.let-ctl #letPausa{min-width:auto;border:0;padding:7px 10px;border-radius:6px;background:transparent}
.let-ctl #letPausa i{display:block;width:3.5px;height:13px;background:var(--i-azul);border-radius:1px}
.let-ctl #letPausa[aria-pressed="true"] i:first-child{width:0;height:0;background:none;border-left:11px solid var(--i-azul);border-top:7px solid transparent;border-bottom:7px solid transparent}
.let-ctl #letPausa[aria-pressed="true"] i:last-child{display:none}

/* hover perceptivel nos controles do letreiro */
.idioma summary{padding:6px 10px;border-radius:6px}

/* O hover dos controles do letreiro passou pelo verde do tema e voltou para o azul: as duas
 * demãos ficaram escritas uma embaixo da outra, e só a última pintava. Ficou a de baixo. */

/* controles do letreiro na familia azul, como pedido */
.let-ctl #letPausa:hover,.let-ctl #letPausa:focus-visible{background:var(--i-azul-nevoa)}
.idioma summary:hover,.idioma summary:focus-visible{background:var(--i-azul-nevoa)}
.idioma[open] summary{background:var(--i-azul-nevoa);outline:0;border:0;box-shadow:none}
.idioma .opc.atual{background:var(--i-azul-nevoa)}
.idioma .opc.atual b{color:var(--i-azul)}
a.opc:hover{background:var(--apoio)}

/* busca compacta com lupa */
#menu #busca{max-width:250px;min-width:170px}
#menu #busca button{display:inline-flex;align-items:center;justify-content:center;padding:9px 13px}

/* icones sociais alinhados, familia unica */
.soc{align-items:center}
.soc a{width:24px;height:24px;align-items:center;justify-content:center}
.soc svg{width:20px;height:20px;display:block}

/* subgrupo suspenso dentro do submenu */
#menu .sub details.subgrupo summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--tx);padding:9px 12px;border-radius:8px;font-weight:600;font-size:inherit;border-bottom:0}
#menu .sub details.subgrupo summary::-webkit-details-marker{display:none}
#menu .sub details.subgrupo summary::after{content:"▸";font-size:.7rem;color:var(--mut);transition:transform .12s}
#menu .sub details.subgrupo[open] summary::after{transform:rotate(90deg)}
#menu .sub details.subgrupo summary:hover{background:var(--marca-claro);color:var(--marca-forte);box-shadow:none}
#menu .sub details.subgrupo[open] summary{color:var(--marca-forte);background:none;box-shadow:none}
#menu .sub details.subgrupo > div{padding-left:10px}

/* subgrupo abre NA LATERAL no desktop; no celular expande embaixo */
#menu .sub details.subgrupo{position:relative}
#menu .sub details.subgrupo > div{position:absolute;left:calc(100% + 2px);top:-6px;margin:0;padding:6px;border:1px solid var(--linha);border-left:2px solid var(--marca-claro);border-radius:8px;background:var(--fundo);box-shadow:0 10px 24px rgba(var(--sombra),.12);min-width:230px;z-index:70}
@media(max-width:760px){#menu .sub details.subgrupo > div{position:static;box-shadow:none;border:0;border-left:2px solid var(--marca-claro);border-radius:0;margin-left:10px;padding-left:10px}}

/* chevrons desenhados no lugar das setinhas de texto */
#menu summary{display:inline-flex;align-items:center}
#menu summary::after{content:"";border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);transition:transform .15s;font-size:0}
#menu details[open] > summary::after{transform:rotate(225deg)}
#menu .sub details.subgrupo summary::after{transform:rotate(-45deg);margin:0;border-color:var(--mut)}
#menu .sub details.subgrupo[open] > summary::after{transform:rotate(45deg)}
.idioma summary b{display:none}
.idioma summary::after{content:"";border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg);margin-top:-2px;transition:transform .15s}
.idioma[open] summary::after{transform:rotate(225deg);margin-top:2px}

/* estetica final do menu: chevron discreto, submenu sem heranca de aba */
#menu summary{gap:6px}
#menu summary::after{width:5px;height:5px;border-width:0 1.5px 1.5px 0;border-style:solid;border-color:var(--mut);opacity:.85;margin-top:-2px}
#menu details[open] > summary::after{margin-top:2px}
#menu a[aria-current="page"]{border-bottom-width:2px}
#menu .sub a{border-bottom:0;border-radius:8px}
#menu .sub a[aria-current="page"]{background:var(--marca-claro);color:var(--marca-forte);font-weight:700;border-bottom:0;box-shadow:none}
#menu .sub details.subgrupo summary::after{width:5px;height:5px;border-width:0 1.5px 1.5px 0;opacity:.85}
.idioma summary::after{width:5px;height:5px;border-width:0 1.5px 1.5px 0}

/* threads: glifo cheio pesa mais que os icones de traco; encolhe para equilibrar */
.soc a[aria-label*="Threads"] svg{width:16px;height:16px}

/* AS DUAS PRIMEIRAS CHAVES DE ACESSIBILIDADE MORAVAM AQUI, com os nomes .sublinha-links e
 * .mais-espaco. O menu de acessibilidade de hoje liga os ajustes por um mapa escrito no próprio
 * script (contraste, títulos, links, dislexia, espaço, linha, peso, animação, cursor, guia,
 * leitor), e todos eles pintam pelas classes .a-*, mais abaixo nesta folha. Estes dois nomes não
 * estão no mapa nem em lugar nenhum da marcação: quem ligasse "destacar links" e viesse conferir
 * o efeito aqui mexeria numa regra que o navegador nunca aplica. */

.recibo{border:1px solid var(--marca);background:var(--marca-claro);border-radius:14px;padding:18px 20px;margin:14px 0}
.recibo .num{font-size:1.2rem}
.recibo h2{font-size:1rem;margin:14px 0 4px}
.placarzao{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 20px}
.placarzao div{background:var(--fundo);border:1px solid var(--linha);border-radius:12px;padding:16px}
.placarzao b{display:block;font-size:1.8rem;font-variant-numeric:tabular-nums}
.placarzao span{color:var(--mut);font-size:.82rem}
.duascol{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* ===== widgets flutuantes: acessibilidade e cookies =====
   Tudo na identidade da casa (verde da marca), grade uniforme e sem cor emprestada. */
.flutuantes{position:fixed;left:14px;bottom:14px;display:flex;flex-direction:column;gap:10px;z-index:90;align-items:flex-start}
#a11yBtn{width:52px;height:52px;border-radius:50%;background:var(--marca);border:3px solid var(--fundo);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(var(--sombra),.28);padding:0}
#a11yBtn svg{width:30px;height:30px;color:var(--fundo)}
#a11yBtn:hover{background:var(--marca-forte)}
#ckBtn{display:inline-flex;align-items:center;gap:8px;background:var(--fundo);color:var(--tx);border:1px solid var(--linha);border-radius:100px;padding:8px 16px 8px 12px;font-size:.82rem;font-weight:600;box-shadow:0 4px 14px rgba(var(--sombra),.15)}
#ckBtn svg{width:18px;height:18px;color:var(--marca-forte);flex:none}
#ckBtn:hover{background:var(--apoio)}

/* painel de acessibilidade: cabecalho branco com filete da marca, corpo cinza claro e cartoes brancos */
#a11yPainel{position:fixed;left:14px;bottom:14px;z-index:96;background:var(--apoio);border:1px solid var(--linha);border-radius:16px;box-shadow:0 18px 50px rgba(var(--sombra),.3);width:min(400px,calc(100vw - 28px));max-height:min(78vh,660px);display:flex;flex-direction:column;padding:0;overflow:hidden}
#a11yPainel[hidden]{display:none}
#a11yPainel header{display:flex;justify-content:space-between;align-items:center;background:var(--fundo);border-bottom:1px solid var(--linha);border-top:4px solid var(--marca);padding:12px 16px;flex:none}
#a11yPainel header h2{margin:0;font-size:1.02rem}
#a11yPainel header div{display:flex;gap:4px}
#a11yPainel header button{background:none;border:0;padding:7px;border-radius:8px;color:var(--tx);display:grid;place-items:center}
#a11yPainel header button:hover{background:var(--apoio)}
#a11yPainel header svg{width:19px;height:19px;display:block}
.a11y-corpo{overflow-y:auto;padding:14px 16px 16px}
.a11y-corpo h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin:16px 2px 8px;font-weight:700}
.a11y-corpo h3:first-child{margin-top:0}
/* regua de fonte: rotulo a esquerda, passo a direita, botoes redondos iguais */
.a-fonte{background:var(--fundo);border:1px solid var(--linha);border-radius:12px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.a-fonte span{font-weight:600;font-size:.86rem}
.a-fonte div{display:flex;align-items:center;gap:6px;margin:0}
.a-fonte button{width:34px;height:34px;border-radius:50%;background:var(--marca);color:var(--fundo);font-size:1.1rem;line-height:1;padding:0;font-weight:700;display:grid;place-items:center;flex:none}
.a-fonte button:hover{background:var(--marca-forte)}
.a-fonte b{font-variant-numeric:tabular-nums;min-width:52px;text-align:center;font-size:.92rem}
/* grade de recursos: icone em cima, rotulo embaixo, cartoes de altura igual */
.a-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#a11yPainel .a-grade button,#a11yPainel .a-grade .btn-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;width:auto;min-height:92px;background:var(--fundo);border:1px solid var(--linha);border-radius:12px;padding:12px 6px 10px;margin:0;font-size:.74rem;font-weight:600;color:var(--tx);text-align:center;line-height:1.28;text-decoration:none;cursor:pointer}
#a11yPainel .a-grade button:hover,#a11yPainel .a-grade .btn-card:hover{border-color:var(--marca);background:var(--fundo)}
#a11yPainel .a-grade button.on{border-color:var(--marca);box-shadow:inset 0 0 0 1px var(--marca);background:var(--marca-claro)}
.a-grade svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--marca-forte);display:block}
/* efeitos, todos reais */
.a-titulos h1,.a-titulos h2,.a-titulos h3,.a-titulos h4{outline:2px solid var(--marca);outline-offset:3px}
/* realçar links é um recurso de acessibilidade: quem liga isso precisa enxergar o realce, então
 * vale o mesmo ouro diluído da busca (1,30:1 contra o papel) e não a névoa, que some em 1,08:1.
 * O texto continua --tx, 13,17:1 sobre ele */
.a-links a{text-decoration:underline!important;background:var(--i-ouro-borda);color:var(--tx)!important}
.a-dislexia body{font-family:Verdana,Arial,sans-serif;letter-spacing:.03em;word-spacing:.16em}
.a-espaco body{letter-spacing:.12em}
.a-linha body,.a-linha p,.a-linha li{line-height:2.1!important}
.a-peso body{font-weight:700}
.a-cor-escuro{filter:invert(1) hue-rotate(180deg)}
.a-cor-escuro img,.a-cor-escuro video,.a-cor-escuro iframe{filter:invert(1) hue-rotate(180deg)}
.a-cor-claro{filter:brightness(1.15) contrast(1.05)}
.a-cor-alto{filter:contrast(1.5)}
.a-cor-satmais{filter:saturate(2.2)}
.a-cor-satmenos{filter:saturate(.35)}
.a-cor-mono{filter:grayscale(1)}
.a-anim *,.a-anim *::before,.a-anim *::after{animation:none!important;transition:none!important}
/* o cursor grande é a única coisa desta folha que fica em preto e branco puros, e tem de ficar:
 * ele passa por cima de foto, vídeo e texto, então precisa de um contorno claro em volta de um
 * corpo escuro para ser achado sobre qualquer fundo. Pintá-lo com a cor do brasão faria ele
 * desaparecer justamente sobre as áreas azuis do portal, que é onde quem ativou o recurso procura. */
.a-cursor,.a-cursor *{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24"><path d="M5 2l14 12-6 1 3.5 6-2.8 1.4L10 16l-5 4z" fill="black" stroke="white" stroke-width="1.4"/></svg>') 4 2, auto!important}
#a11yGuia{position:fixed;left:0;right:0;height:4px;background:var(--marca);z-index:94;pointer-events:none;top:40%}
.a-leitor p:hover,.a-leitor h1:hover,.a-leitor h2:hover,.a-leitor h3:hover,.a-leitor li:hover,.a-leitor a:hover,.a-leitor td:hover{outline:2px dashed var(--marca);outline-offset:2px;cursor:pointer}

/* ===== gerenciador de cookies: modal central com veu, categorias com chave liga e desliga ===== */
#ckVeu{position:fixed;inset:0;background:var(--veu);z-index:95}
#ckVeu[hidden]{display:none}
#ckPainel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:96;background:var(--apoio);border:1px solid var(--linha);border-radius:18px;box-shadow:0 24px 70px rgba(var(--sombra),.35);width:min(600px,calc(100vw - 28px));max-height:min(86vh,700px);display:flex;flex-direction:column;overflow:hidden;padding:0}
#ckPainel[hidden]{display:none}
#ckPainel header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--linha);border-top:4px solid var(--marca);background:var(--fundo);flex:none}
#ckPainel header .ck-ico{width:38px;height:38px;border-radius:10px;background:var(--marca-claro);display:grid;place-items:center;flex:none}
#ckPainel header .ck-ico svg{width:22px;height:22px;color:var(--marca-forte)}
#ckPainel header h2{margin:0;font-size:1.05rem;flex:1}
#ckPainel header #ckFecha{background:none;border:0;color:var(--tx);padding:7px;border-radius:8px;display:grid;place-items:center}
#ckPainel header #ckFecha:hover{background:var(--apoio)}
#ckPainel header #ckFecha svg{width:19px;height:19px;display:block}
.ck-corpo{overflow-y:auto;padding:14px 18px}
.ck-intro{margin:0 0 12px;font-size:.88rem;color:var(--mut);line-height:1.6}
.ck-intro a{font-weight:600}
.ck-cat{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:start;background:var(--fundo);border:1px solid var(--linha);border-radius:12px;padding:13px 14px;margin-bottom:8px}
.ck-cat .ck-tile{width:38px;height:38px;border-radius:10px;background:var(--apoio);display:grid;place-items:center}
.ck-cat .ck-tile svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--marca-forte)}
.ck-cat b{font-size:.92rem;display:block;margin-top:1px}
.ck-cat p{margin:4px 0 0;font-size:.8rem;color:var(--mut);line-height:1.5}
.ck-trava{font-size:.68rem;font-weight:700;color:var(--marca-forte);background:var(--marca-claro);border-radius:99px;padding:3px 9px;white-space:nowrap;align-self:center}
/* chave liga e desliga */
.ck-sw{position:relative;display:inline-block;width:46px;height:26px;align-self:center}
.ck-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ck-sw i{position:absolute;inset:0;border-radius:99px;background:var(--i-azul-controle);transition:background .15s;pointer-events:none}
.ck-sw i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--fundo);box-shadow:0 1px 3px rgba(var(--sombra),.25);transition:transform .15s}
.ck-sw input:checked+i{background:var(--marca)}
.ck-sw input:checked+i::after{transform:translateX(20px)}
.ck-sw input:focus-visible+i{outline:3px solid var(--marca);outline-offset:2px}
.ck-rodape{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 18px;border-top:1px solid var(--linha);background:var(--fundo);flex:none}
.ck-rodape button{border-radius:9px;padding:10px 16px;font-weight:700;font-size:.85rem}
#ckTodos{background:var(--marca);color:var(--fundo)}
#ckTodos:hover{background:var(--marca-forte)}
#ckEssenciais{background:var(--fundo);color:var(--marca-forte);border:1.5px solid var(--marca)}
#ckEssenciais:hover{background:var(--marca-claro)}
#ckSalvar{background:var(--apoio);color:var(--tx);border:1px solid var(--linha)}
#ckSalvar:hover{background:var(--linha)}
/* trava de midia incorporada (consentimento LGPD de terceiros) */
.yt-trava{aspect-ratio:16/9;border:1.5px dashed var(--linha);border-radius:12px;background:var(--apoio);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center}
.yt-trava p{margin:0;font-size:.85rem;color:var(--mut);max-width:400px}
.yt-trava .linha2{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.yt-trava a{font-size:.85rem}

/* ===== carrossel de banners (home, abaixo do menu) ===== */
.carrossel{position:relative;margin:6px 0 14px;border-radius:16px;overflow:hidden;border:1px solid var(--linha);background:var(--apoio)}
.car-trilho{display:flex;transition:transform .5s ease}
.car-slide{flex:0 0 100%;display:block}
.car-slide img{display:block;width:100%;aspect-ratio:1980/478;object-fit:cover}
/* os controles do carrossel ficam por cima de foto, que pode ser de qualquer cor: o branco com
 * alfa é o que garante a pastilha clara sob a seta seja qual for o banner, e aí a seta azul tem
 * 14,47:1 contra ela. Nos pontos, quem diz qual é o slide atual é a largura (9px contra 22px),
 * não a opacidade, justamente porque sobre uma foto clara o branco translúcido sumiria. */
.car-seta{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--marca-forte);display:grid;place-items:center;padding:0;box-shadow:0 2px 10px rgba(var(--sombra),.25)}
.car-seta:hover{background:var(--fundo)}
.car-seta svg{width:18px;height:18px}
.car-seta.ant{left:10px}
.car-seta.prox{right:10px}
.car-pe{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;align-items:center;gap:10px}
.car-pontos{display:flex;gap:6px;align-items:center}
.car-pontos button{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.55);padding:0;border:0;transition:width .15s}
.car-pontos button[aria-current="true"]{background:var(--fundo);width:22px}
/* cartazes: o trio fixo de quadros abaixo do carrossel */
.cartazes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 0 26px}
.cartaz{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--linha)}
.cartaz img{display:block;width:100%;height:auto}
a.cartaz:hover{border-color:var(--marca)}

/* ===== faixa de informacoes do rodape: endereco, horario e telefone ===== */
.pe-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;padding-top:24px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.18);justify-items:center}
.pe-info>div{display:flex;gap:13px;align-items:flex-start}
.pe-info svg{width:30px;height:30px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--amarelo);margin-top:2px}
.pe-info b{display:block;font-size:.94rem;margin-bottom:3px}
.pe-info span{font-size:.85rem;line-height:1.55;color:var(--sobre-azul)}

@media (max-width:560px){
  .a-grade{grid-template-columns:repeat(2,1fr)}
  .ck-cat{grid-template-columns:1fr auto}
  .ck-cat .ck-tile{display:none}
  .car-seta{width:32px;height:32px}
  .car-slide img{aspect-ratio:1980/620}
}
@media (prefers-reduced-motion:reduce){
  .car-trilho{transition:none}
}

/* ===== bloco "O que eu preciso?": como o portal vigente, cor trocavel no painel ===== */
.preciso{border-radius:16px;padding:26px 26px 22px;margin:26px 0}
/* os dois nomes vêm da opção "cor dos atalhos" do painel e são herança: já não existe verde aqui,
 * a segunda variante é o azul escuro do brasão. O nome da classe não muda enquanto o painel gravar
 * o valor "verde", senão o bloco perde o fundo e o texto branco fica em cima de nada. */
.at-azul{background:var(--i-azul)}
.at-azul-forte,.at-verde{background:var(--marca-forte)}
.atx{margin:0 0 18px;color:var(--fundo);font-size:1.5rem;line-height:1.15;text-transform:uppercase}
.atx span{display:block;font-weight:400;font-size:1rem;letter-spacing:.05em}
.at-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.telha{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:20px 10px;text-decoration:none;min-height:108px}
.telha:hover{background:rgba(255,255,255,.15);border-color:var(--amarelo)}
.telha svg{width:30px;height:30px;color:var(--amarelo)}
.telha span{color:var(--fundo);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:center;line-height:1.3}
.at-mais{margin:16px 0 0;text-align:center}
.at-mais a{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.32);color:var(--amarelo);font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding:11px 26px;border-radius:8px;font-size:.85rem}
.at-mais a:hover{background:var(--amarelo);border-color:var(--amarelo);color:var(--i-azul-forte)}

/* ===== variantes de cor do rodape, escolhidas no painel =====
 * Só existem duas, ouro e azul, e "amarelo" é o nome antigo do ouro do brasão. A terceira opção
 * que o painel oferece, "verde", não tem classe nenhuma: quem escolhe verde cai no rodapé padrão,
 * que é azul escuro. Enquanto o painel não perder essa opção, ela é uma promessa que a tela não
 * cumpre. No ouro, todo o texto é --i-azul-forte: 7,74:1, contra os 4,50:1 do marrom que havia. */
footer.pe-ouro,footer.pe-amarelo{background:var(--amarelo);border-top-color:var(--i-azul-forte);color:var(--i-azul-forte)}
footer.pe-ouro .pe h2,footer.pe-amarelo .pe h2{color:var(--i-azul-forte)}
footer.pe-ouro .pe a,footer.pe-amarelo .pe a,footer.pe-ouro .pe p,footer.pe-amarelo .pe p{color:var(--i-azul-forte)}
footer.pe-ouro .pe img,footer.pe-amarelo .pe img{filter:none}
footer.pe-ouro .pe-info,footer.pe-amarelo .pe-info{border-bottom-color:rgba(var(--sombra),.16)}
footer.pe-ouro .pe-info svg,footer.pe-amarelo .pe-info svg{color:var(--i-azul-forte)}
footer.pe-ouro .pe-info span,footer.pe-amarelo .pe-info span{color:var(--i-azul-forte)}
footer.pe-ouro .assina,footer.pe-amarelo .assina{color:var(--i-azul-forte);border-top-color:rgba(var(--sombra),.16)}
footer.pe-azul{background:var(--i-azul);border-top-color:var(--i-azul-forte)}
footer.pe-azul .assina{color:var(--sobre-azul-fraco)}
footer.pe-azul .pe-info span{color:var(--sobre-azul)}
footer.pe-azul .pe h2{color:var(--amarelo)}
footer.pe-azul .pe-info svg{color:var(--amarelo)}

/* ===== Fique por dentro: destaque com capa + ultimas com data, primeiro bloco da home ===== */
.fpd{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;margin:4px 0 10px}
.fpd-h{display:flex;align-items:center;gap:10px;font-size:1.12rem;margin:0 0 12px}
.fpd-ico{width:34px;height:34px;border-radius:9px;background:var(--marca);display:inline-grid;place-items:center;flex:none}
.fpd-ico svg{width:19px;height:19px;color:var(--fundo)}
.fpd-capa{position:relative;display:block;border-radius:16px;overflow:hidden;border:1px solid var(--linha);background:var(--marca-forte);text-decoration:none}
.fpd-capa img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.fpd-semcapa{position:absolute;inset:0;background:linear-gradient(135deg,var(--marca) 0%,var(--marca-forte) 70%)}
.fpd-sobre{position:relative;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;min-height:300px;padding:18px;background:linear-gradient(180deg,rgba(var(--sombra),0) 32%,rgba(var(--sombra),.85) 80%);color:var(--fundo)}
.fpd-meta{display:flex;gap:8px;align-items:center;font-size:.74rem}
.fpd-meta b{background:var(--amarelo);color:var(--i-azul-forte);border-radius:6px;padding:2px 8px;font-weight:800;font-variant-numeric:tabular-nums}
.fpd-meta i{font-style:normal;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:2px 8px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.66rem}
.fpd-capa strong{font-size:1.22rem;line-height:1.3;font-weight:700}
.fpd-resumo{font-size:.85rem;opacity:.92;line-height:1.5}
.fpd-capa:hover strong{text-decoration:underline}
.fpd-lista{background:var(--fundo);border:1px solid var(--linha);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;height:calc(100% - 46px)}
.fpd-lista>a{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--linha);text-decoration:none;color:var(--tx)}
.fpd-lista>a:hover{background:var(--marca-claro)}
.fpd-dia{flex:none;width:44px;border:1px solid var(--linha);border-radius:9px;text-align:center;padding:4px 0 3px;background:var(--apoio)}
.fpd-dia b{display:block;font-size:1.02rem;line-height:1.1;color:var(--marca);font-variant-numeric:tabular-nums}
.fpd-dia i{font-style:normal;font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);font-weight:700}
.fpd-tx b{display:block;font-size:.87rem;line-height:1.35;font-weight:600}
.fpd-tx i{font-style:normal;font-size:.68rem;color:var(--marca);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.fpd-mais{margin:auto 0 0;padding:12px 14px;text-align:right}
.fpd-mais a{font-weight:700;font-size:.85rem}
@media (max-width:760px){.fpd{grid-template-columns:1fr}.fpd-lista{height:auto}}

/* chamada do guia de servicos no detalhe (34.1) */
.svc-cta{border:1px solid var(--linha);border-left:4px solid var(--marca);background:var(--apoio);border-radius:12px;padding:16px 18px;margin:18px 0;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.svc-cta p{margin:0;font-size:.9rem;color:var(--mut)}
.svc-cta a{display:inline-block;background:var(--marca);color:var(--fundo);font-weight:700;text-decoration:none;padding:11px 20px;border-radius:9px}
.svc-cta a:hover{background:var(--marca-forte)}

/* 37.2: graficos de barras do painel de protocolos */
.grafs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:8px 0 16px}
.graf{background:var(--fundo);border:1px solid var(--linha);border-radius:12px;padding:12px 14px}
.graf h2{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:0 0 10px}
.graf .g{display:grid;grid-template-columns:120px 1fr 30px;gap:8px;align-items:center;margin-bottom:6px;font-size:.78rem}
.graf .g span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.graf .g i{display:block;height:12px;border-radius:99px;background:var(--marca);min-width:4px}
.graf .g b{text-align:right;font-variant-numeric:tabular-nums}

/* ===== pagina de leitura (detalhe de qualquer modulo): materia de verdade ===== */
.materia{max-width:none}
.mat-topo{margin:2px 0 14px}
.mat-topo h1{font-size:1.9rem;line-height:1.22;margin:0 0 6px;letter-spacing:-.015em}
.mat-meta{margin:0;color:var(--mut);font-size:.82rem;border-bottom:2px solid var(--marca-claro);padding-bottom:12px}
.mat-capa{margin:0 0 18px}
.mat-capa img{display:block;max-width:100%;max-height:440px;border-radius:16px;border:1px solid var(--linha)}
.mat-lede{font-size:1.06rem;line-height:1.65;color:var(--mut);margin:0 0 14px}
.mat-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,max-content));gap:8px 26px;background:var(--apoio);border:1px solid var(--linha);border-radius:12px;padding:12px 16px;margin:0 0 18px}
.mat-ficha div{margin:0}
.mat-ficha dt{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.mat-ficha dd{margin:1px 0 0;font-size:.9rem;font-weight:600}
.mat-sec{font-size:1.05rem;margin:22px 0 8px;padding-left:10px;border-left:4px solid var(--marca)}
/* a nota de rodapé de uma ficha · a procedência, o prazo legal, o endereço de onde conferir.
   Ela nasceu na ficha da sanção, onde o dever do art. 161 e a consulta nacional ao Ceis não são
   o assunto da página mas não podem sumir dela. Cor de apoio e corpo menor porque é ressalva, e
   não afirmação: o que a página AFIRMA está no bloco colorido logo acima. */
.mat-nota{margin:-8px 0 18px;color:var(--mut);font-size:.82rem;line-height:1.55}
/* a NORMA de onde o campo sai, na linha do rótulo · ela responde, com o formulário aberto, à
   pergunta que decide se aquele número se discute: é escolha nossa ou é da lei? Fica em pílula
   discreta e não em aviso, porque é procedência e não alerta. */
/* a barra do envio adiantado do anexo · o edital de 12 MB numa conexão de prefeitura leva quase
   um minuto, e sem sinal de vida quem publica acha que travou e clica de novo */
.anexo-prog{margin:8px 0 0}
.anexo-prog-bar{height:6px;border-radius:99px;background:var(--linha);overflow:hidden}
.anexo-prog-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--marca);transition:width .15s}
.anexo-prog span{display:block;margin-top:5px;font-size:.76rem;color:var(--mut)}
.anexo-prog.ok .anexo-prog-bar i{background:var(--i-verde)}
.anexo-prog.ruim .anexo-prog-bar i{background:var(--i-perigo)}
.anexo-prog.ruim span{color:var(--i-perigo);font-weight:600}

/* editar a conta na PRÓPRIA linha da tabela, num dobrável · sem script um modal não abre, e
   corrigir um e-mail digitado errado não pode depender de JavaScript */
.p-edu{display:inline-block;vertical-align:middle}
.p-edu>summary{cursor:pointer;list-style:none;font-size:.78rem;font-weight:600;color:var(--marca);
  padding:3px 9px;border:1px solid var(--linha);border-radius:8px;display:inline-block}
.p-edu>summary::-webkit-details-marker{display:none}
.p-edu>summary:hover{background:var(--marca-claro)}
.p-edu-f{display:grid;gap:8px;margin:9px 0 4px;padding:11px 12px;border:1px solid var(--linha);
  border-radius:10px;background:var(--apoio);min-width:min(300px,70vw)}
.p-edu-f label{display:grid;gap:3px;font-size:.74rem;font-weight:700;color:var(--mut);text-align:left}
.p-edu-f input{font:inherit;font-size:.86rem;color:var(--tx);background:var(--fundo);
  border:1px solid var(--linha);border-radius:8px;padding:7px 9px}
.p-edu-f .total{font-size:.72rem;text-align:left}

.fonte-campo{font-size:.68rem;font-weight:600;letter-spacing:.02em;color:var(--i-azul);
  background:var(--i-azul-nevoa);border-radius:99px;padding:2px 9px;white-space:nowrap}

/* PRORROGAR O PRAZO, dentro do modal de atendimento.
 *
 *  Fechado por padrão e em ouro, e as duas coisas são a mesma decisão: prorrogar é a exceção
 *  prevista em lei, não o trabalho de todo dia. Em azul, com o mesmo peso do "Registrar
 *  atendimento", a tela estaria oferecendo esticar o prazo com a mesma naturalidade com que
 *  oferece responder, que é o contrário do que a Lei 12.527 quer. O ouro é o do brasão, o mesmo
 *  de .aviso.alerta-a, e não o vermelho: prorrogar dentro do prazo é ato regular, não é perigo. */
.mat-prorroga{margin:22px 0 4px;border:1px solid var(--i-ouro-borda);border-radius:12px;
  background:var(--i-ouro-nevoa)}
.mat-prorroga>summary{padding:11px 15px;font-weight:700;font-size:.9rem;color:var(--i-ouro-tx);
  cursor:pointer;border-radius:11px;list-style:none}
/* a seta padrão do navegador muda de desenho em cada um deles; o triângulo próprio gira e é o
 * mesmo em todos, e some do leitor de tela porque o estado já vem do próprio <details> */
.mat-prorroga>summary::-webkit-details-marker{display:none}
.mat-prorroga>summary::before{content:"";display:inline-block;width:0;height:0;margin-right:9px;
  border:5px solid transparent;border-left-color:currentColor;vertical-align:.04em;
  transition:transform .15s}
.mat-prorroga[open]>summary::before{transform:rotate(90deg) translateX(-2px)}
.mat-prorroga>summary:hover{color:var(--tx)}
/* O RESPIRO DOS BLOCOS QUE ABREM, IGUAL EM TODOS.
   Eles davam 15px de margem lateral, e 15px num bloco que ocupa a largura da tela lê como aperto:
   o campo encosta na borda colorida, e a caixa parece ter sido montada sem espaço. Pior, cada
   família tinha o seu número · .mat-prorroga com 15, details.lote com 16, details.novo com nenhum ·
   e três blocos abertos na mesma tela abriam com três recuos diferentes.
   O número é um só, e é o mesmo dos quadros da casa (.quadro usa 16/18). E o ÚLTIMO filho ganha o
   respiro embaixo, que era o que faltava: o botão de gravar encostava na borda inferior. */
.mat-prorroga>*:not(summary),details.novo[open]>*:not(summary){margin-left:17px;margin-right:17px}
.mat-prorroga>*:last-child,details.novo[open]>*:last-child{margin-bottom:16px}
/* details.lote resolve por padding no filho, e não por margem · o cabeçalho dele tem fundo próprio
   e a margem deixaria uma faixa branca entre o cabeçalho e a borda */
details.lote>*:not(summary){padding-left:17px;padding-right:17px}
details.lote>*:not(summary):last-child{padding-bottom:16px}
@media (prefers-reduced-motion: reduce){.mat-prorroga>summary::before{transition:none}}
/* texto rico com respiro de leitura */
.rico{line-height:1.75;font-size:.98rem}
.rico p{margin:0 0 14px}
.rico h2,.rico h3,.rico h4{margin:22px 0 10px;line-height:1.3}
.rico h2{font-size:1.15rem;padding-left:10px;border-left:4px solid var(--marca)}
.rico h3{font-size:1.02rem;color:var(--marca-forte)}
.rico ul,.rico ol{margin:0 0 14px;padding-left:24px}
.rico li{margin-bottom:6px}
.rico blockquote{margin:0 0 14px;padding:10px 16px;border-left:4px solid var(--linha);background:var(--apoio);border-radius:0 10px 10px 0;color:var(--mut)}
.rico a{font-weight:600}

/* veja tambem: o bloco de materias relacionadas, no nosso traco */
.relac{margin:26px 0 6px}
.relac h2{font-size:1.02rem;margin:0 0 10px;padding-left:10px;border-left:4px solid var(--marca)}
.relac>div{background:var(--fundo);border:1px solid var(--linha);border-radius:14px;overflow:hidden}
.relac a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--linha);text-decoration:none;color:var(--tx);font-weight:600;font-size:.9rem}
.relac a:last-child{border-bottom:0}
.relac a:hover{background:var(--marca-claro)}
.relac b{flex:none;background:var(--apoio);border:1px solid var(--linha);border-radius:7px;padding:3px 9px;font-size:.72rem;color:var(--marca-forte);font-variant-numeric:tabular-nums}

/* listagens em lista: chip de data + titulo + complemento */
.lista{border:1px solid var(--linha);border-radius:14px;background:var(--fundo);overflow:hidden}
.lista li{border-bottom:1px solid var(--linha);padding:0}
.lista li:last-child{border-bottom:0}
.lista li>a{display:flex;gap:13px;align-items:center;padding:11px 14px;text-decoration:none;color:var(--tx)}
.lista li>a:hover{background:var(--marca-claro)}
.li-data{flex:none;width:44px;border:1px solid var(--linha);border-radius:9px;text-align:center;padding:4px 0 3px;background:var(--apoio)}
.li-data b{display:block;font-size:1rem;line-height:1.1;color:var(--marca);font-variant-numeric:tabular-nums}
.li-data i{font-style:normal;font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);font-weight:700}
.li-tx b{display:block;font-size:.92rem;font-weight:600;line-height:1.35}
.li-tx i{font-style:normal;font-size:.72rem;color:var(--marca);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.li-res{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.8rem;color:var(--mut);line-height:1.5;margin-top:3px;font-weight:400}

/* ===== paginas de formulario: duas colunas com o guia ao lado, campos uniformes ===== */
.fpage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start;margin-top:8px}
@media(max-width:860px){.fpage{grid-template-columns:1fr}}
.form{background:var(--fundo);border:1px solid var(--linha);border-radius:14px;padding:20px;gap:14px;max-width:none;margin-bottom:12px}
.form label{font-size:.85rem;gap:5px}
.form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.form textarea,.form select{width:100%;padding:11px 12px;border:1.5px solid var(--linha);border-radius:9px;font:inherit;background:var(--fundo);box-sizing:border-box}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--marca);outline:none;box-shadow:0 0 0 3px var(--marca-claro)}
.form textarea{resize:vertical;min-height:96px}
.form ::placeholder{color:var(--mut)}
.fpage .form>button{width:100%;padding:13px 18px;font-size:1rem}
.lado{display:grid;gap:12px}
.lado-carta{background:var(--apoio);border:1px solid var(--linha);border-radius:14px;padding:14px 16px}
.lado-carta h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin:0 0 9px;font-weight:700}
.lado-carta p{margin:0;font-size:.84rem;line-height:1.55}
.passos{margin:0;padding:0;list-style:none;counter-reset:p}
.passos li{counter-increment:p;position:relative;padding-left:34px;margin-bottom:11px;font-size:.83rem;line-height:1.5}
.passos li:last-child{margin-bottom:0}
.passos li::before{content:counter(p);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--marca);color:var(--fundo);font-weight:700;font-size:.78rem;display:grid;place-items:center}
.lado-prazo{font-size:.9rem;color:var(--mut)}
.lado-prazo b{font-size:1.7rem;color:var(--marca);margin-right:6px;font-variant-numeric:tabular-nums}

/* ===== perguntas frequentes: secoes com acordeao ===== */
.faq-cats{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.faq-cats a{text-decoration:none;font-size:.8rem;font-weight:700;color:var(--marca-forte);background:var(--fundo);border:1.5px solid var(--linha);border-radius:99px;padding:6px 14px}
.faq-cats a:hover{border-color:var(--marca)}
.faq-cats a[aria-current="true"]{background:var(--marca);border-color:var(--marca);color:var(--fundo)}
.faq-sec{margin:0 0 22px}
.faq-sec h2{font-size:1.02rem;margin:0 0 10px;padding-left:10px;border-left:4px solid var(--marca)}
.faq-item{background:var(--fundo);border:1px solid var(--linha);border-radius:12px;margin-bottom:8px;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:13px 42px 13px 16px;font-weight:600;font-size:.92rem;position:relative;color:var(--marca-forte)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2.5px solid var(--marca);border-bottom:2.5px solid var(--marca);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-item[open] summary{border-bottom:1px solid var(--linha);background:var(--marca-claro)}
.faq-item summary:hover{background:var(--marca-claro)}
.faq-item>.rico{padding:14px 16px;font-size:.9rem}
/* grupo do menu que contem a pagina atual: marcado no titulo, sem abrir sozinho */
#menu details.grupo>summary.atual{box-shadow:inset 0 -3px 0 var(--marca);color:var(--marca)}

/* central de modulo (licitacoes): cartoes de acesso acima da listagem */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:4px 0 16px}
.hub a{display:block;background:var(--fundo);border:1px solid var(--linha);border-left:4px solid var(--marca);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--tx)}
.hub a:hover{border-color:var(--marca)}
.hub b{display:block;margin-bottom:4px;color:var(--marca-forte)}
.hub span{font-size:.83rem;color:var(--mut);line-height:1.5}

/* ===== entrada do painel com a marca completa ===== */
body.login{min-height:100vh;margin:0;display:grid;place-items:center;background:var(--apoio)}
.login main{width:min(500px,calc(100vw - 32px));margin:16px;padding:30px 32px;border:1px solid var(--linha);border-radius:18px;background:var(--fundo);box-shadow:0 14px 44px rgba(var(--sombra),.08)}
.login h1{font-size:1.3rem;margin:4px 0 16px}
.log-marca{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--linha);margin-bottom:18px}
.log-marca img{display:block;flex:none}
.log-marca>div{border-left:1.5px solid var(--linha);padding-left:16px}
.log-marca b{display:block;font-size:1.02rem;line-height:1.25;white-space:nowrap}
.log-marca span{font-size:.8rem;color:var(--mut);white-space:nowrap}
.login input{padding:11px 12px;border:1.5px solid var(--linha);border-radius:9px;font:inherit;width:100%;box-sizing:border-box}
.login input:focus{border-color:var(--marca);outline:none;box-shadow:0 0 0 3px var(--marca-claro)}
.login button{width:100%;padding:12px;font-size:1rem}
.log-esqueci{margin:12px 0 0;text-align:center;font-size:.85rem}
.log-volta{margin:14px 0 0;text-align:center;font-size:.85rem}
/* importacao em lote e exportacao */
/* O BLOCO QUE ABRE PRECISA DE FRONTEIRA VISÍVEL.
   Ele já tinha fundo de apoio, e mesmo assim derramava sobre a página: o --apoio é um lavanda
   claríssimo (#f2f4fb sobre #ffffff), e a borda era TRACEJADA e da cor da linha comum. Aberto num
   quadro que também é claro, o conjunto perdia o contorno · quem clicava para ler a explicação não
   via onde ela começava nem onde terminava, e um parágrafo técnico no meio da tela passava a
   competir com o número principal em vez de se apresentar como nota daquele quadro.
   Três mudanças, e cada uma resolve uma coisa: o CABEÇALHO ganha o branco do cartão, para o clique
   ter uma superfície própria; a borda vira contínua e mais firme; e o corpo fica no tom de apoio,
   que é o que diz "isto é secundário" sem inventar mais um cinza para alguém manter.
   Tracejado saiu porque ele significa outra coisa na casa · área de soltar arquivo (.anexo-solta),
   e usar o mesmo traço para duas coisas diferentes ensina errado. */
details.lote{border:1px solid var(--i-azul-borda,var(--linha));border-radius:12px;background:var(--apoio);
  margin:0 0 14px;overflow:hidden}
details.lote>summary{cursor:pointer;padding:11px 16px;font-weight:700;font-size:.86rem;color:var(--marca-forte);
  background:var(--fundo);list-style:none;display:flex;align-items:center;gap:8px}
details.lote>summary::-webkit-details-marker{display:none}
/* a seta é desenhada e gira ao abrir · o marcador do sistema muda de desenho entre navegadores, e
   é o tipo de detalhe que faz a mesma tela parecer duas */
details.lote>summary::before{content:"";width:0;height:0;flex:none;
  border-left:6px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
  transition:transform .15s}
details.lote[open]>summary::before{transform:rotate(90deg)}
details.lote[open]>summary{border-bottom:1px solid var(--linha)}
details.lote>summary:hover{background:var(--apoio)}
/* o formulário dentro do bloco herda o respiro da família (a regra de details.lote>*:not(summary)
   mais abaixo), e aqui ele só perde a margem própria · com as duas, o recuo dobrava */
details.lote .form{margin:0}
.exportar{font-size:.82rem;color:var(--mut);margin:0 0 8px}
.exportar a{font-weight:700}

/* ===== painel interno: barra lateral azul flutuante, conteudo claro na largura toda ===== */
body.painel{margin:0;display:grid;grid-template-columns:256px minmax(0,1fr);gap:12px;min-height:100vh;background:var(--i-azul-fundo);padding:12px}
.p-lat{background:linear-gradient(180deg,var(--i-azul) 0%,var(--i-azul-forte) 100%);color:var(--fundo);display:flex;flex-direction:column;position:sticky;top:12px;height:calc(100vh - 24px);overflow:hidden;border-radius:20px;box-shadow:0 10px 30px rgba(var(--sombra),.18)}
/* branco com alfa fica: aqui ele não é cor de marca nenhuma, é a própria luz atravessando o azul
 * da barra, e é o que faz filete e bolha acompanharem o degradê sem virar um segundo tom fixo */
.p-marca{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.14);flex:none}
.p-marca img{display:block;height:auto}
.p-lat nav{flex:1;padding:6px 0 10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
/* o rótulo de grupo era branco a 50%, ou seja 3,98:1 sobre o azul: reprovava AA de corpo.
 * Com --sobre-azul-fraco sobe para 7,20:1 e continua discreto ao lado dos itens */
.p-lat nav b{display:block;font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sobre-azul-fraco);padding:16px 18px 6px}
.p-lat a{display:flex;align-items:center;gap:10px;color:var(--sobre-azul);text-decoration:none;font-size:.85rem;font-weight:600;padding:8px 12px;margin:1px 10px;border-radius:9px;line-height:1.2}
/* O SAIR É <button>, E NÃO <a> · e é por isso que estas quatro regras deixaram de falar só de a.
   A distinção é semântica e está certa: sair ESCREVE (encerra a sessão, com CSRF), e o painel
   inteiro separa ler de escrever por link contra formulário. Só que o dimensionamento do ícone
   morava num seletor que casa com âncora, e o SVG do p_icone() sai sem width nem height · sem
   regra que o alcance, ele assume o tamanho do viewBox esticado pelo flex e ocupa a barra
   lateral inteira. Era o botão de sair desenhado do tamanho de um cartaz, embaixo do menu.
   As regras passam a valer para os dois, e o próximo botão que entrar aqui já nasce certo. */
.p-lat a svg,.p-lat button svg{width:18px;height:18px;flex:none;opacity:.85}
.p-lat a:hover,.p-lat button:hover{background:rgba(255,255,255,.14);color:var(--fundo)}
.p-lat a.on{background:var(--fundo);color:var(--i-azul)}
.p-lat a.on svg{opacity:1}
/* O botão de sair, com a pintura que estava em linha no PHP esperando por esta regra · o
   comentário de lá deixou combinado que a folha assumiria quando pudesse. Ele copia a caixa do
   link vizinho porque é o que ele é para quem olha: mais um item do rodapé da barra. */
.p-lat button.p-sair{display:flex;align-items:center;gap:10px;width:calc(100% - 20px);margin:1px 10px;
  padding:8px 12px;border:0;border-radius:9px;background:none;color:var(--sobre-azul);font:inherit;
  font-size:.85rem;font-weight:600;line-height:1.2;text-align:left;cursor:pointer}
.p-pe{border-top:1px solid rgba(255,255,255,.14);padding:8px 0 12px;flex:none}
.p-user{display:flex;gap:10px;align-items:center;padding:10px 16px 2px}
.p-user i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.95rem;flex:none}
.p-user>div{min-width:0}
.p-user b{display:block;font-size:.82rem;line-height:1.25}
/* branco a 60% no pé da barra, onde o degradê já chegou em --i-azul-forte: 6,00:1, passa AA.
 * Fica em alfa porque precisa acompanhar o degradê, e não o topo dele */
.p-user span{display:block;font-size:.66rem;color:rgba(255,255,255,.6);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-corpo{min-width:0;display:flex;flex-direction:column}
/* A FAIXA PREGADA NO ALTO DA TELA DO PAINEL (.p-topo) NÃO EXISTE NA MARCAÇÃO. Ela desenhava um
 * cabeçalho sticky com o nome da tela e o subtítulo ao lado; o painel de hoje abre cada tela com
 * .cab-tela dentro do próprio <main>, e nenhuma das 83 telas colhidas emite .p-topo. A regra
 * ficava aqui de pé, com um comentário próprio na folha de impressão, dando a entender que
 * existia uma barra a acertar · e mexer nela não mudava um pixel. */
.p-corpo main{padding:20px 26px 48px;max-width:none}
.p-corpo h1{margin:4px 0 14px;font-size:1.3rem}
.p-corpo h2{font-size:1rem;margin:24px 0 10px;padding-left:10px;border-left:4px solid var(--marca)}
.p-corpo .tw{box-shadow:0 1px 3px rgba(var(--sombra),.06);border-radius:14px}
.p-corpo .tw th{background:var(--i-azul-fundo);font-size:.72rem}
.p-corpo .form{box-shadow:0 1px 3px rgba(var(--sombra),.06)}
.p-corpo .filtro input,.p-corpo .filtro select{background:var(--fundo)}
.p-corpo .placarzao div{border-radius:14px;box-shadow:0 1px 3px rgba(var(--sombra),.06);transition:border-color .12s}
.p-corpo .placarzao a:hover div{border-color:var(--marca)}
/* pilulas de situacao */
.pil{display:inline-block;border-radius:99px;padding:3px 10px;font-size:.7rem;font-weight:700;font-style:normal;white-space:nowrap}
.s-recebido{background:var(--i-ouro-nevoa);color:var(--i-ouro-tx)}
.s-em_analise{background:var(--i-azul-nevoa);color:var(--i-azul)}
.s-respondido{background:var(--i-verde-nevoa);color:var(--i-verde-tx)}
.s-encerrado{background:var(--apoio);color:var(--mut)}
.s-venc{background:var(--i-perigo-nevoa);color:var(--i-perigo)}
/* confirmacao em modal, nunca popup do navegador */
.mconf{position:fixed;inset:0;background:var(--veu);z-index:60;display:grid;place-items:center}
.mconf[hidden]{display:none}
.mconf-c{background:var(--fundo);border-radius:16px;box-shadow:0 24px 60px rgba(var(--sombra),.3);padding:22px 24px;width:min(420px,calc(100vw - 40px))}
.mconf-c p{margin:0 0 16px;font-size:.95rem;line-height:1.55}
/* O SELETOR ERA '.mconf-c div', E ALCANÇAVA TUDO.
   Ele existia para alinhar a dupla Confirmar/Cancelar à direita, e pegava QUALQUER <div> dentro do
   diálogo · inclusive a caixa do motivo, que tem rótulo, campo e ajuda. Os três viravam itens de
   um flex em linha: o rótulo "Motivo de tirar do ar" espremido numa palavra por linha, o campo do
   tamanho que sobrou, e a ajuda numa terceira coluna. O diálogo mais usado do painel, o de tirar
   do ar em lote, aparecia quebrado toda vez.
   Seletor de elemento dentro de contêiner é assim: funciona enquanto houver um só, e quebra em
   silêncio no dia em que aparecer o segundo. A régua de botões passa a ter nome próprio. */
.mconf-c .mconf-bt{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* e a caixa de campo dentro do diálogo empilha, que é como formulário se lê */
.mconf-cx{display:block;text-align:left;margin:0 0 14px}
.mconf-cx label{display:block;font-weight:700;font-size:.86rem;margin:0 0 6px}
.mconf-cx textarea,.mconf-cx input{width:100%;padding:10px 12px;border:1.5px solid var(--linha);
  border-radius:9px;font:inherit;background:var(--fundo);color:var(--tx);display:block}
.mconf-cx .total{display:block;margin:6px 0 0}
.mconf-nao{background:var(--fundo);color:var(--tx);border:1.5px solid var(--linha)}
.mconf-nao:hover{background:var(--apoio)}
@media (max-width:920px){
  body.painel{grid-template-columns:1fr;padding:8px;gap:8px}
  .p-lat{position:static;height:auto;border-radius:16px}
  .p-lat nav{display:flex;flex-wrap:wrap;gap:2px;padding:8px}
  .p-lat nav b{width:100%;padding:10px 8px 4px}
  .p-lat a{margin:1px 2px;padding:7px 10px}
  .p-pe{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px}
  .p-user{padding:4px 8px}
}

/* painel: formulario com botao natural, editor em linha e bloco de novo registro */
.p-corpo .form>button{width:auto;justify-self:start;padding:11px 24px}
details.novo{margin-top:16px}
details.novo>summary{list-style:none;cursor:pointer;display:inline-block;background:var(--marca);color:var(--fundo);font-weight:700;font-size:.9rem;padding:11px 20px;border-radius:10px}
details.novo>summary::-webkit-details-marker{display:none}
details.novo>summary:hover{background:var(--marca-forte)}
details.novo[open]>summary{margin-bottom:12px}
.ed{border:1.5px solid var(--linha);border-radius:10px;background:var(--fundo);overflow:hidden}
.ed-bar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--linha);background:var(--apoio)}
.ed-bar button{width:auto;background:var(--fundo);color:var(--tx);border:1px solid var(--linha);border-radius:7px;padding:5px 12px;font-size:.8rem;font-weight:600}
.ed-bar button:hover{border-color:var(--marca);background:var(--fundo);color:var(--marca-forte)}
.ed-area{min-height:180px;padding:12px 14px;outline:none;line-height:1.6}
.ed-area:focus{box-shadow:inset 0 0 0 2px var(--marca-claro)}
/* painel: colunas auxiliares e barra de ações */
.col-data{white-space:nowrap;color:var(--mut);font-size:.8rem;font-variant-numeric:tabular-nums}
/* A COLUNA QUE EMPILHA ANOTAÇÕES precisa de piso de largura. Sem ele o navegador a espreme contra
   as colunas de texto vizinhas e ela sai com uma palavra por linha · uma torre estreita e
   altíssima que estica a altura da linha inteira, e a tabela passa a ter 200px de altura por
   registro. O piso é em ch, e não em px, porque o que se quer garantir é um número de CARACTERES
   por linha: com fonte ampliada pelo menu de acessibilidade, px daria de novo uma palavra por
   linha, que é o defeito que esta regra existe para não deixar voltar. */
.col-situacao{min-width:22ch}
@media (max-width:760px){.col-situacao{min-width:0}}
/* A CÉLULA DEIXA DE PROIBIR A QUEBRA. nowrap aqui era o que forçava as cinco ações numa linha só
   e, com elas, a rolagem lateral da tabela inteira · quem manda na forma agora é a grade de .acoes,
   logo abaixo, e ela já garante a silhueta igual em toda linha. As colunas de DATA continuam com
   nowrap, e ali ele está certo: data quebrada em duas linhas não se lê. */
.col-acoes{white-space:normal}
.col-acoes a{font-size:.82rem;font-weight:600;margin-right:8px}
/* A GRADE MORA NUM ELEMENTO DENTRO DA CÉLULA, E NUNCA NA PRÓPRIA CÉLULA.
   Esta regra já foi escrita errado uma vez, e vale registrar por quê: pôr display:grid no <td>
   parece o caminho curto e TIRA A CÉLULA DO CONTEXTO DE TABELA. Ela deixa de ser table-cell, para
   de participar da repartição de largura das colunas, e os botões vazam para fora da linha ·
   com o realce de hover, o estrago fica visível de imediato, porque o fundo da linha termina antes
   dos botões. Uma célula de tabela é table-cell e ponto; quem vira grade é o que está dentro dela. */
td.col-acoes>.acoes{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:5px;justify-items:start;align-content:start;width:max-content}
/* A COLUNA DE AÇÕES FICA PRESA NA BORDA DIREITA quando a tabela rola de lado.
 *
 * O recolhimento automático de colunas resolve o caso comum, e o link "Mostrar todas as colunas"
 * desliga essa proteção sem pôr nada no lugar: com as 12 colunas de Licitações, 523px ficam fora
 * da tela · e quem sai do campo de visão é sempre a PONTA DIREITA, que é justamente onde moram
 * Situação e Ações. A pessoa rola para ver o dado e perde os botões; rola de volta para clicar e
 * perde o dado que a fez clicar.
 *
 * O separador aponta para a ESQUERDA (-1px) porque esta coluna prende à direita · a matriz de
 * permissões prende a primeira coluna e usa o sinal contrário, e trocar os dois faria a sombra
 * cair por cima do conteúdo em vez de marcar a borda. */
td.col-acoes,th.col-acoes{position:sticky;right:0;background:var(--fundo);z-index:2;box-shadow:-1px 0 0 var(--linha)}
/* o cabeçalho mantém o azul da casa: a regra de th do painel tem especificidade maior e vence o
   branco acima · medido, e é o certo, senão a coluna presa teria cabeçalho de cor diferente */
@media (min-width:1500px){td.col-acoes>.acoes{grid-template-columns:repeat(3,minmax(0,auto))}}
@media (max-width:760px){td.col-acoes>.acoes{width:100%;justify-items:stretch}td.col-acoes .ac{justify-content:center}}
/* na tela de contas cada botão vem no seu próprio <form>, porque cada um é uma escrita com CSRF
   próprio · display:contents faz o botão de cada form participar da grade acima, em vez de o form
   virar um item que empurra os outros para linhas separadas */
.acoes>form.inline{display:contents}
.linha-acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.linha-acoes .inline{display:flex;gap:6px;align-items:center}
.linha-acoes input{padding:9px 11px;border:1.5px solid var(--linha);border-radius:9px;font:inherit;min-width:210px}
.p-corpo .form select,.p-corpo .form input[list]{background:var(--fundo)}

/* ===== Onda A: cabeçalho de tela, modal de registro, anexo próprio, estado vazio ===== */
.cab-tela{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:2px 0 14px}
.cab-tela h1{margin:0 0 2px}
/* AS PASTILHAS DE CONTAGEM DO CABEÇALHO. Elas substituem a frase corrida em que os três números
   tinham o mesmo peso do texto em volta · quem abre a tela para saber quanto falta precisava ler
   a frase inteira para achar o segundo número. Como pastilhas, os números viram alvos.
   As que levam a algum lugar são <a> e ganham o realce de quem pode ser clicado; as que só
   informam são <i> e não o ganham · sem essa diferença, a pessoa tenta clicar no número que não
   abre nada, e uma tentativa frustrada ensina a não tentar mais nenhuma. */
.cab-pils{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 0}
.cab-pils .pil{font-size:.72rem;padding:4px 11px}
.cab-pils a.pil{text-decoration:none;border:1px solid transparent}
.cab-pils a.pil:hover{filter:brightness(.96);border-color:currentColor}
/* O LINK DO MANUAL É PASTILHA, e por isso ele NÃO cola no texto seguinte.
   Como link inline, ele era seguido direto pelo <span> da descrição, sem nada entre as duas
   marcações · a tela mostrava "Manual desta telaOuvidoria, e-SIC, recursos...". Corrigir isso
   escrevendo um espaço em cada um dos dez chamadores seria pedir que dez lugares lembrem de uma
   regra de espaçamento; aqui o elemento assume a própria forma e o problema não pode voltar.
   display:flex + width:max-content dá a ele a linha dele sem esticar até a borda · o mesmo efeito
   de um bloco que encolhe até o conteúdo, sem depender de float nem de <br> na marcação. */
.manual{display:flex;width:max-content;align-items:center;gap:6px;margin:6px 0 8px;padding:5px 11px;
  border:1px solid var(--linha);border-radius:8px;background:var(--fundo);
  font-size:.76rem;font-weight:600;color:var(--mut);text-decoration:none}
.manual svg{width:14px;height:14px;flex:none}
.manual:hover{border-color:var(--marca);color:var(--marca)}
/* NO CABEÇALHO ELE É AÇÃO, e ação mora no canto direito, com o peso das outras.
   Ele nasceu como pastilha miúda embaixo do título, à esquerda · e ficou assim em 21 telas
   escritas à mão, enquanto a listagem de módulo já o tratava como botão neutro ao lado da ação
   principal. Duas linguagens para a mesma porta, na mesma barra lateral. Agora ele é irmão de
   .bt-neutro: mesma altura, mesmo raio, mesma borda · o que muda é só o rótulo. */
.cab-tela .manual{margin:0;padding:10px 18px;font-size:.88rem;font-weight:600;color:var(--tx);
  border:1.5px solid var(--linha);border-radius:9px;background:var(--fundo)}
.cab-tela .manual svg{width:16px;height:16px}
.cab-tela .manual:hover{background:var(--apoio);border-color:var(--linha);color:var(--tx)}
/* A COLUNA DO TÍTULO EMPURRA O RESTO PARA A DIREITA, e é isto que faz o manual chegar ao canto.
   .cab-tela é flex com justify-content:space-between, e com DOIS filhos (título e ação) isso
   basta. Com TRÊS · título, manual e a caixa de ações · o space-between distribui os vãos por
   igual e o manual pousa no MEIO da barra, que é pior do que onde ele estava. Dando à coluna do
   título o direito de crescer, ela ocupa o vão sozinha e os outros dois encostam na direita,
   juntos, na ordem em que foram escritos: neutro e depois a ação de marca. Vale para as duas
   formas · a tela que tem .mat-acoes e a que só tem o botão solto. */
.cab-tela>div:first-child{flex:1 1 320px;min-width:0}
.cab-tela>.manual{align-self:flex-start;flex:none}
@media print{.manual{display:none}}
/* Cabeçalho com DUAS ações irmãs (o índice do manual imprime o índice e abre o maço completo):
 * elas vão juntas numa .mat-acoes, a caixa de botões que o painel já usa e que a folha de
 * impressão conhece. Aqui a barra só perde a margem de baixo dela · quem afasta o cabeçalho do
 * conteúdo é a margem do próprio .cab-tela, e somar as duas abriria um vão embaixo dos botões. */
.cab-tela .mat-acoes{margin:0}
/* rótulo de ação não quebra em duas linhas dentro do cabeçalho: uma quebra deixaria um botão do
 * par mais alto que o outro, que é exatamente o desencontro que a barra veio resolver */
.cab-tela .mat-acoes .bt-neutro{white-space:nowrap}
.btn-novo{display:inline-flex;align-items:center;gap:8px;background:var(--marca);color:var(--fundo);text-decoration:none;font-weight:700;font-size:.88rem;padding:11px 20px;border-radius:10px;flex:none}
.btn-novo:hover{background:var(--marca-forte)}
.btn-novo svg{width:17px;height:17px}
.aviso{border-radius:10px;padding:11px 15px;font-size:.88rem;font-weight:600;margin:0 0 12px}
.ok-a{background:var(--i-verde-nevoa);color:var(--i-verde-tx);border:1px solid var(--i-verde-borda)}
.erro-a{background:var(--i-perigo-nevoa);color:var(--i-perigo);border:1px solid var(--i-perigo-borda)}
/* modal de registro */
.mdl{position:fixed;inset:0;background:var(--veu);z-index:50;display:grid;place-items:center;padding:20px}
.mdl[hidden]{display:none}
.mdl-c{background:var(--fundo);border-radius:18px;box-shadow:0 30px 70px rgba(var(--sombra),.32);width:min(760px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden}
.mdl-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--linha);background:var(--fundo)}
.mdl-topo b{font-size:1rem}
.mdl-x{color:var(--tx);padding:6px;border-radius:8px;display:grid;place-items:center;text-decoration:none}
.mdl-x:hover{background:var(--apoio)}
.mdl-x svg{width:18px;height:18px;display:block}
.mdl-corpo{overflow-y:auto;padding:18px 20px 22px;background:var(--i-azul-fundo)}
.mdl-corpo .form{margin:0;border:0;background:transparent;padding:0;box-shadow:none}
.mdl-pe{display:flex;gap:10px;align-items:center;padding-top:16px}
.bt-neutro{display:inline-block;background:var(--fundo);color:var(--tx);border:1.5px solid var(--linha);border-radius:9px;padding:10px 18px;font-weight:600;font-size:.88rem;text-decoration:none}
.bt-neutro:hover{background:var(--apoio)}
.rot-solto{font-weight:600;font-size:.85rem;margin-bottom:-6px}

/* A EXPLICAÇÃO DO CAMPO · 21 usos, e nenhuma regra na folha até agora.
   Sem regra, <span class="ajuda"> herda o tamanho e o peso do <label> que a contém: a explicação
   saía do MESMO corpo e do MESMO negrito do rótulo que ela explica, e a ficha lia como se cada
   campo tivesse dois títulos. Quem varre o formulário procurando o nome do campo tropeça na frase
   de ajuda achando que é o nome do próximo.
   display:block porque ela vem depois do campo dentro do mesmo <label> e precisa da linha dela;
   margem só em cima, e pequena, porque ela pertence ao campo acima · margem embaixo a descolaria
   do campo dela para colá-la no campo seguinte, que é o erro clássico deste elemento. */
.ajuda{display:block;margin:5px 0 0;font-size:.76rem;font-weight:400;line-height:1.45;color:var(--mut)}
.ajuda b,.ajuda strong{font-weight:700;color:var(--tx)}
.ajuda code{font-size:.95em}

/* A CAIXA DE MARCAÇÃO DENTRO DO FORMULÁRIO · .ck e .cx, três usos e nenhuma regra.
   Sem regra o <label> herdava o desenho de rótulo do formulário (display:grid, gap), e a caixa
   virava um retângulo alto com o texto embaixo em vez de uma marcação com a frase ao lado · o
   controle deixava de parecer o que é. Aqui ele é linha: marca, depois texto, alinhados pelo
   topo, porque a frase pode ocupar duas linhas e a caixa tem de ficar na primeira. */
.ck,.cx{display:flex!important;align-items:flex-start;gap:8px;font-size:.85rem;font-weight:500;
  line-height:1.4;margin:0;padding:2px 0;cursor:pointer}
.ck>input,.cx>input{margin:2px 0 0;flex:none;width:auto}
.ck>input[type=hidden],.cx>input[type=hidden]{display:none}
/* o invólucro do campo de marcação · ele é quem ocupa a linha inteira da grade, porque a ajuda
   dele fica FORA do rótulo (clicar na explicação não pode marcar a caixa) e sem invólucro os dois
   viravam duas células separadas, com a ajuda ao lado da opção que ela explica */
.cx-campo{display:block}
.p-corpo .form>.cx-campo,.p-corpo .form>fieldset.cx{grid-column:1 / -1}
fieldset.cx{border:1px solid var(--linha);border-radius:10px;padding:10px 14px 12px;margin:0}
fieldset.cx>legend{font-weight:700;font-size:.85rem;padding:0 6px}



/* ============================================================================================
   A FAIXA DA LISTA · cinco linhas soltas viram uma banda só
   ============================================================================================
   O QUE HAVIA. Entre o filtro e a tabela, a listagem de módulo empilhava cinco parágrafos
   independentes, cada um com a sua margem: quantos registros, onde baixar, quantas colunas
   couberam, em que modo a lista está, e o que fazer com as linhas marcadas. Nenhum deles é
   assunto principal · são todos ANOTAÇÕES SOBRE A LISTA · e mesmo assim ocupavam mais altura de
   tela do que as primeiras linhas da tabela. Quem abre a tela para ver os registros rola cinco
   linhas de texto antes de encontrar o primeiro.

   A REGRA É "UMA BANDA, MUITAS CÉLULAS". As anotações entram lado a lado, separadas por ponto
   médio, e quebram sozinhas quando a tela é estreita · ninguém precisa decidir a quebra. O que
   era cinco linhas em tela larga vira uma, e em tela pequena vira duas ou três, na ordem em que
   foram escritas. A ordem importa: primeiro QUANTOS (o número que a pessoa veio conferir), depois
   o que dá para LEVAR, e por último o que está ESCONDIDO da tabela.

   POR QUE NÃO É UMA TABELA NEM UMA LISTA. Semanticamente isto é um parágrafo de anotações sobre a
   lista que vem a seguir, e leitor de tela deve lê-lo como texto corrido. O contador continua
   sendo o único elemento com role=status, porque é ele que precisa ser anunciado quando o filtro
   pega · dar voz aos cinco faria a tela falar cinco vezes a cada Filtrar. */
.barra-lista{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  margin:0 0 12px;padding:9px 13px;background:var(--apoio);border:1px solid var(--linha);border-radius:10px;
  font-size:.82rem;color:var(--mut);line-height:1.45}
.barra-lista>*{margin:0}
/* o número que a pessoa veio conferir tem peso, e o resto é anotação · sem esta diferença a
   banda vira uma fileira cinza em que nada se acha */
.barra-lista .b-tot{font-weight:700;color:var(--tx);font-size:.86rem}
/* o separador é desenhado pela folha, e não escrito no PHP: escrito, ele sobra ou falta toda vez
   que uma anotação deixa de existir por causa de um filtro */
.barra-lista>*+*::before{content:"·";color:var(--linha-forte,var(--linha));margin-right:12px;font-weight:700}
.barra-lista a{color:var(--marca);font-weight:600}
.barra-lista a:hover{text-decoration:underline}
@media print{.barra-lista{display:none}}

/* A BARRA DAS LINHAS MARCADAS aparece só quando há marcação, e por isso ela é a ÚNICA da tela
   com fundo de destaque: ela é ação pendente, e não anotação. Ela mora colada na tabela, embaixo
   da faixa de anotações, porque o que ela opera está logo abaixo dela. */
.barra-marcadas{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px;
  padding:10px 14px;background:var(--i-azul-nevoa);border:1px solid var(--i-azul-borda);border-radius:10px;
  font-size:.84rem;font-weight:600;color:var(--i-azul)}
.barra-marcadas button,.barra-marcadas .bt-neutro{font-size:.82rem;padding:7px 14px}
/* [hidden] precisa vencer o display:flex da própria regra · sem isto, o atributo não esconde nada
   e a barra continuaria na tela depois que o script a recolhesse */
.barra-marcadas[hidden]{display:none}
@media print{.barra-marcadas{display:none}}

/* A CONFERÊNCIA DA DEFINIÇÃO é diagnóstico de quem MONTA o módulo, e não recado para quem usa a
   tela todo dia. Ela abria como parágrafo em destaque, acima do filtro, com três linhas de texto
   técnico sobre chaves de configuração · a primeira coisa que o administrador lia ao abrir
   Licitações era um aviso sobre o próprio cadastro do módulo. Fechada, ela continua a um clique
   de quem precisa dela e some do caminho de quem não precisa. */
/* a conferência da definição fala a MESMA língua do bloco que abre · ela herda details.lote e só
   ajusta o corpo, porque um terceiro desenho de "clique para ler mais" faria a mesma tela ter três
   maneiras de dizer a mesma coisa */
.diag-def{font-size:.8rem;color:var(--mut)}
.diag-def>summary svg{width:14px;height:14px;flex:none}
.diag-def p{margin:0;line-height:1.5}
@media print{.diag-def{display:none}}
/* anexo */
.anexo{display:grid;gap:10px}
.anexo-atual{display:flex;gap:12px;align-items:center;background:var(--fundo);border:1px solid var(--linha);border-radius:12px;padding:10px 12px}
.anexo-atual img{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--linha);flex:none}
.anexo-ico{width:64px;height:64px;border-radius:9px;background:var(--marca-claro);color:var(--marca-forte);display:grid;place-items:center;font-weight:800;font-size:.72rem;flex:none}
.anexo-ico svg{width:26px;height:26px}
.anexo-atual b{display:block;font-size:.88rem;word-break:break-all}
.anexo-atual span{font-size:.76rem;color:var(--mut)}
.anexo-x{margin-left:auto;background:var(--fundo);color:var(--erro);border:1.5px solid var(--i-perigo-borda);border-radius:8px;padding:7px 14px;font-size:.8rem;font-weight:700;flex:none}
.anexo-x:hover{background:var(--i-perigo-nevoa)}
.anexo-solta{position:relative;border:1.5px dashed var(--linha);border-radius:12px;background:var(--fundo);padding:20px 16px;text-align:center;display:grid;justify-items:center;gap:4px;transition:border-color .12s,background .12s}
.anexo-solta.sobre{border-color:var(--marca);background:var(--marca-claro)}
.anexo-solta svg{width:26px;height:26px;color:var(--marca)}
.anexo-solta b{font-size:.88rem}
.anexo-solta span{font-size:.78rem;color:var(--mut)}
/* A CAIXA DE ARQUIVO OCUPA A LINHA INTEIRA e o rótulo dela fica em cima, como em qualquer campo.
   campo_arquivo() emite três irmãos soltos na grade · o rótulo, a caixa e a ajuda · e sem isto
   cada um viraria uma coluna: rótulo numa, caixa na seguinte, ajuda na terceira, que é o mesmo
   embaralhamento que a ajuda irmã do rótulo causava nos outros campos. */
.p-corpo .form>.anexo-solta,.p-corpo .form>.anexo-atual,.form>.anexo-solta,.form>.anexo-atual{grid-column:1 / -1}
.p-corpo .form>label.rot-solto+.anexo-solta,.form>label.rot-solto+.anexo-solta{margin-top:-4px}
.anexo-solta+.ajuda{margin-top:7px}
/* o que já existe, quando existe, encosta na caixa de envio de propósito: eles são o par
   "isto está aqui / envie outro para substituir", e separá-los faz o segundo parecer um campo novo */
.anexo-atual{display:flex;gap:11px;align-items:center;border:1px solid var(--linha);border-radius:12px;
  background:var(--fundo);padding:11px 13px;margin:0 0 8px}
.anexo-atual b{display:block;font-size:.86rem}
.anexo-atual span{font-size:.78rem;color:var(--mut)}
.anexo-atual .anexo-ico{width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:var(--i-azul-nevoa);border-radius:10px;color:var(--marca)}
.anexo-atual .anexo-ico svg{width:22px;height:22px}
.anexo-atual img{width:44px;height:44px;object-fit:cover;border-radius:10px;flex:none}
.anexo-solta input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.anexo-solta:focus-within{border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-claro)}
/* estado vazio */
.vazio{display:grid;justify-items:center;gap:6px;text-align:center;background:var(--fundo);border:1px dashed var(--linha);border-radius:14px;padding:34px 20px;margin-top:-1px}
.vazio svg{width:34px;height:34px;color:var(--mut);opacity:.65}
.vazio b{font-size:.98rem}
.vazio span{font-size:.85rem;color:var(--mut);max-width:420px}
.vazio .bt-neutro{margin-top:8px}

/* foco visível na barra lateral azul: o outline da marca desaparecia no fundo escuro.
 * O ouro do brasão resolve sozinho, 6,06:1 sobre --i-azul, sem precisar de um amarelo à parte */
.p-lat a:focus-visible,.p-marca a:focus-visible{outline:3px solid var(--i-ouro);outline-offset:2px;border-radius:9px}
.mconf-c:focus{outline:none}
/* saúde do sistema */
.saude{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin:0 0 18px}
.saude>div{display:flex;gap:11px;align-items:center;background:var(--fundo);border:1px solid var(--linha);border-radius:12px;padding:11px 14px}
.saude i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
.saude i svg{width:17px;height:17px}
.saude .sim i{background:var(--i-verde-nevoa);color:var(--i-verde-tx)}
/* "não" aqui é pendência de configuração, não falha: por isso ouro e não vermelho */
.saude .nao i{background:var(--i-ouro-nevoa);color:var(--i-ouro-tx)}
.saude b{display:block;font-size:.86rem}
.saude span{font-size:.74rem;color:var(--mut);line-height:1.4}
.saude u{margin-left:auto;text-decoration:none;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.saude .sim u{color:var(--i-verde-tx)}
.saude .nao u{color:var(--i-ouro-tx)}

/* ===== gerenciador do menu do site: árvore à esquerda, prévia do site à direita ===== */
.menu-tela{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,42%);gap:16px;align-items:start}
@media (max-width:1100px){.menu-tela{grid-template-columns:1fr}}
.menu-arv{background:var(--fundo);border:1px solid var(--linha);border-radius:14px;padding:10px;display:block;box-shadow:0 1px 3px rgba(var(--sombra),.06)}
.mi{display:grid;grid-template-columns:22px minmax(90px,1fr) auto 72px 150px auto auto;gap:8px;align-items:center;
  padding:8px 10px;border:1px solid transparent;border-radius:10px;background:var(--fundo);cursor:grab}
.mi:hover{background:var(--apoio);border-color:var(--linha)}
.mi:focus-visible{outline:2px solid var(--marca);outline-offset:1px}
.mi.arrastando{opacity:.5;border-style:dashed;border-color:var(--marca)}
.mi.n1{margin-left:22px}
.mi.n2{margin-left:44px}
.mi-pega{color:var(--mut);display:grid;place-items:center}
.mi-pega svg{width:16px;height:16px}
.mi b{font-size:.86rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-tipo{font-style:normal;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--mut);background:var(--apoio);border-radius:99px;padding:2px 9px;white-space:nowrap}
.mi-ord input{width:100%;padding:5px 7px;border:1px solid var(--linha);border-radius:7px;font:inherit;font-size:.8rem;text-align:center}
/* o seletor de grupo (.mi-pai) saiu da linha do menu: o pai viaja num <input type="hidden"> e a
 * escolha à mão vive no campo "Dentro de", dentro de editar. O painel já não emite o rótulo, e
 * uma regra para um <select> que ninguém desenha mais só serviria para alguém ajustar a largura
 * de um campo inexistente */
.mi-ver{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--mut);white-space:nowrap}
.mi-ed{font-size:.78rem;font-weight:600;white-space:nowrap}
.menu-pe{display:flex;gap:10px;align-items:center;padding:12px 4px 4px;border-top:1px solid var(--linha);margin-top:8px}
.menu-previa{position:sticky;top:12px;background:var(--fundo);border:1px solid var(--linha);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(var(--sombra),.06)}
.mp-barra{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.mp-barra b{font-size:.82rem}
.mp-barra a{margin-left:auto;font-size:.78rem;font-weight:600}
.mp-larg{display:flex;gap:3px}
.mp-larg button{background:var(--fundo);color:var(--mut);border:1px solid var(--linha);border-radius:7px;padding:4px 10px;font-size:.72rem;font-weight:600}
.mp-larg button.on{background:var(--marca);border-color:var(--marca);color:var(--fundo)}
.mp-quadro{background:var(--apoio);padding:8px;display:grid;place-items:start center;max-height:560px;overflow:auto}
.mp-quadro iframe{width:100%;height:540px;border:1px solid var(--linha);border-radius:9px;background:var(--fundo);display:block}
.menu-previa>.total{padding:8px 12px 10px;margin:0;font-size:.74rem}
@media (max-width:760px){
  .mi{grid-template-columns:22px 1fr auto;row-gap:6px}
  .mi-ord,.mi-ver,.mi-ed{grid-column:2 / -1}
}
/* blocos da página inicial */
.bloco{grid-template-columns:22px minmax(150px,1fr) auto auto 72px auto}
.bl-tx b{display:block;font-size:.88rem}
.bl-tx span{font-size:.74rem;color:var(--mut);line-height:1.35}
/* bloco sem conteúdo é pendência de edição, não erro: ouro, e o vermelho fica reservado */
.mi-tipo.vazio{background:var(--i-ouro-nevoa);color:var(--i-ouro-tx)}
.menu-arv h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin:20px 4px 8px;
  padding:0;border:0}
.menu-arv label{display:grid;gap:4px;font-size:.82rem;font-weight:600;margin:0 4px 12px}
.menu-arv label textarea,.menu-arv label input[type=text],.menu-arv label select{padding:9px 11px;border:1.5px solid var(--linha);
  border-radius:9px;font:inherit;font-weight:400;background:var(--fundo);width:100%;box-sizing:border-box}
.cores{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 12px}
.menu-arv .mi-ord,.menu-arv .mi-ver{margin:0}

/* fila de atendimento: faixas de risco, linha do tempo e modelos */
tr.faixa td{background:var(--apoio);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mut);padding:7px 13px}
/* só a faixa f0 é vermelha porque só ela é prazo vencido, ou seja, perigo real.
 * f1 é prazo apertado, que é atenção, e f4 é folga, que não é sinal nenhum */
tr.faixa.f0 td{background:var(--i-perigo-nevoa);color:var(--i-perigo)}
tr.faixa.f1 td,tr.faixa.f2 td{background:var(--i-ouro-nevoa);color:var(--i-ouro-tx)}
tr.faixa.f4 td{background:var(--i-azul-fundo);color:var(--mut)}
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;white-space:nowrap}
.mdl-c.larga{width:min(860px,100%)}
.tempo{display:grid;gap:8px;margin:0 0 16px}
.tempo>div{border:1px solid var(--linha);border-radius:12px;padding:11px 14px;background:var(--fundo)}
.tempo .mv-int{background:var(--i-ouro-nevoa);border-color:var(--i-ouro-borda);border-style:dashed}
.tempo b{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--marca-forte)}
.tempo .mv-int b{color:var(--i-ouro-tx)}
.tempo i{font-style:normal;font-size:.72rem;color:var(--mut);margin-left:8px}
.tempo p{margin:6px 0 0;font-size:.88rem;line-height:1.55}
.modelos{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.modelos span{font-size:.74rem;color:var(--mut);font-weight:600}
.modelos button{background:var(--fundo);color:var(--marca-forte);border:1px solid var(--linha);border-radius:99px;
  padding:5px 13px;font-size:.78rem;font-weight:600;width:auto}
.modelos button:hover{border-color:var(--marca);background:var(--marca-claro)}
.destino{display:grid;gap:4px;background:var(--apoio);border:1px solid var(--linha);border-radius:10px;padding:10px 12px}
.destino .linha{font-weight:500;font-size:.86rem}
/* prévia do letreiro dentro do painel */
.let-demo{background:var(--fundo);border:1px solid var(--linha);border-radius:9px;padding:9px 13px;margin:0 4px 10px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.let-demo span{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--marca)}

/* ===== aba de textos do site ===== */
.txts{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:14px;align-items:start}
.tx-bloco{background:var(--fundo);border:1px solid var(--linha);border-radius:14px;padding:16px 18px;box-shadow:0 1px 3px rgba(var(--sombra),.06)}
.tx-bloco h2{font-size:.95rem;margin:0 0 4px;padding-left:10px;border-left:4px solid var(--marca)}
.tx-bloco>.total{margin:0 0 12px}
.tx-bloco label{display:grid;gap:4px;font-size:.82rem;font-weight:600;margin-bottom:10px}
.tx-bloco input,.tx-bloco textarea{padding:10px 12px;border:1.5px solid var(--linha);border-radius:9px;font:inherit;
  font-weight:400;background:var(--fundo);width:100%;box-sizing:border-box}
.tx-bloco input:focus,.tx-bloco textarea:focus{border-color:var(--marca);outline:none;box-shadow:0 0 0 3px var(--marca-claro)}
.tx-dois{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 14px}
.tx-previa{border:1px dashed var(--linha);border-radius:11px;padding:12px;margin:0 0 14px;background:var(--apoio)}
.tx-let{background:var(--fundo);border-radius:7px;padding:8px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tx-let span{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--marca)}
.tx-cab{display:flex;align-items:center;gap:14px;background:var(--fundo);border-radius:7px;padding:10px 12px}
.tx-cab b{display:block;font-size:.95rem}
.tx-cab span{font-size:.78rem;color:var(--mut)}
.tx-pe{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;background:var(--i-azul);border-radius:7px;padding:12px 14px}
.tx-pe b{display:block;color:var(--fundo);font-size:.8rem;margin-bottom:2px}
.tx-pe span{color:var(--sobre-azul);font-size:.74rem;line-height:1.4}
.tx-pe-form{display:flex;gap:10px;align-items:center}

/* rodapé do modal sempre visível, mesmo com formulário longo */
.mdl-corpo{position:relative}
.mdl-pe{position:sticky;bottom:-18px;background:var(--i-azul-fundo);padding:14px 0 6px;margin-top:12px;
  border-top:1px solid var(--linha);box-shadow:0 -8px 12px -8px rgba(var(--sombra),.18);z-index:2}
/* AS AÇÕES DA LINHA, EM DUAS COLUNAS QUE QUEBRAM SOZINHAS.
 *
 * O QUE HAVIA: inline-flex numa linha só, com white-space:nowrap na célula. Com duas ações isso é
 * perfeito; com cinco · Editar, Relacionar, Ver no site, Copiar link, Tirar do ar, que é o que a
 * listagem de licitações traz · a coluna passava de 600px e empurrava as outras, e a tabela
 * inteira virava rolagem lateral. Em computador de tela pequena, que é o parque real de uma
 * prefeitura, a última ação simplesmente não aparecia sem rolar.
 *
 * DUAS POR LINHA, E NÃO "QUEBRA LIVRE": com flex-wrap solto, o número de colunas muda de linha
 * para linha conforme o rótulo de cada botão · uma linha com "Editar/Relacionar", a seguinte com
 * "Ver no site" sozinho, e o olho perde a coluna. A grade de duas colunas dá a MESMA silhueta em
 * toda linha da tabela, que é o que faz uma coluna de ações ser varrida de cima a baixo sem
 * releitura. Com uma ação só, minmax deixa o botão no tamanho dele e não estica.
 *
 * A ORDEM CONTINUA SENDO A DO CÓDIGO, e ela é significativa: a ação principal (Editar) nasce
 * primeiro e cai no canto superior esquerdo, que é onde o olho começa.
 *
 * justify-items:start impede o botão de esticar para preencher a célula da grade · botão largo
 * demais para o próprio rótulo parece campo de formulário, e o par ficaria com dois tamanhos
 * diferentes quando um rótulo fosse mais longo que o outro. */
.acoes{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:5px;justify-items:start;align-items:center;width:max-content}
/* três ou menos continuam cabendo numa linha só quando a tela é larga: quebrar um par de botões
   curtos em duas linhas gastaria altura sem ganhar nada */
@media (min-width:1500px){.acoes{grid-template-columns:repeat(3,minmax(0,auto))}}
/* na tela empilhada de telefone a coluna vira uma faixa embaixo do registro, e ali a largura toda
   está disponível: duas colunas continuam, mas o botão pode ocupar a sua metade inteira */
@media (max-width:760px){.acoes{width:100%;justify-items:stretch}.acoes .ac{justify-content:center}}
.ac{display:inline-flex;align-items:center;gap:5px;background:var(--fundo);color:var(--tx);border:1px solid var(--linha);
  border-radius:8px;padding:5px 9px;font-size:.75rem;font-weight:600;text-decoration:none;white-space:nowrap;width:auto}
.ac svg{width:14px;height:14px;flex:none}
.ac:hover{border-color:var(--marca);color:var(--marca-forte);background:var(--marca-claro)}
.ac-ed{border-color:var(--marca);color:var(--marca-forte)}
.ac-off{color:var(--i-perigo)}
.ac-off:hover{border-color:var(--i-perigo-borda);background:var(--i-perigo-nevoa);color:var(--i-perigo)}
.ac-on{color:var(--i-verde-tx);border-color:var(--i-verde-borda);background:var(--i-verde-nevoa)}
.ac-on:hover{background:var(--i-verde-nevoa);border-color:var(--i-verde-tx);color:var(--i-verde-tx)}
@media (max-width:1000px){.ac span{display:none}.ac{padding:6px 8px}}

/* ===== Visão geral: cartões, mapa de calor, série e barras ===== */
.painel-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin:0 0 14px}
.quadro{background:var(--fundo);border:1px solid var(--linha);border-radius:14px;padding:16px 18px;box-shadow:0 1px 3px rgba(var(--sombra),.06);margin:0 0 14px}
.painel-2col .quadro{margin:0}
.q-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.q-topo h2{font-size:.95rem;margin:0;padding:0;border:0}
.q-topo span,.q-topo a{font-size:.74rem;color:var(--mut)}
.q-topo a{font-weight:600;color:var(--marca)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin:0 0 14px}
.card-m{display:block;background:var(--fundo);border:1px solid var(--linha);border-radius:14px;padding:15px 17px;text-decoration:none;
  color:var(--tx);box-shadow:0 1px 3px rgba(var(--sombra),.06);position:relative;overflow:hidden}
a.card-m:hover{border-color:var(--marca)}
.card-m.destaque{border-left:5px solid var(--marca)}
.card-m .ct{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.card-m b{display:block;font-size:2.1rem;line-height:1.1;margin:4px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.card-m .cs{display:block;font-size:.76rem;color:var(--mut);line-height:1.4}
.card-m i{display:inline-block;font-style:normal;font-size:.7rem;font-weight:700;border-radius:99px;padding:2px 9px;margin-top:8px}
.card-m .sobe{background:var(--i-verde-nevoa);color:var(--i-verde-tx)}
/* queda de um número não é falha, é informação: era vermelho e gastava o alarme que a tela
 * precisa guardar para prazo vencido. Ouro em vez de neutro só para não ficar igual a .igual */
.card-m .desce{background:var(--i-ouro-nevoa);color:var(--i-ouro-tx)}
.card-m .igual{background:var(--apoio);color:var(--mut)}
.card-m .alerta{background:var(--i-perigo-nevoa);color:var(--i-perigo)}
.card-m .ok-i{background:var(--i-verde-nevoa);color:var(--i-verde-tx)}
.card-m .spark{display:block;width:100%;height:30px;margin-top:8px}
.card-m b u{font-size:1.05rem;text-decoration:none;color:var(--mut);margin-left:2px;letter-spacing:0}
/* faixa de período da visão geral */
.periodo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--fundo);border:1px solid var(--linha);
  border-radius:14px;padding:9px 13px;margin:0 0 14px;box-shadow:0 1px 3px rgba(var(--sombra),.05)}
.periodo>span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.per-op{display:flex;gap:4px;flex-wrap:wrap;background:var(--apoio);border-radius:99px;padding:3px}
.per-op a{font-size:.78rem;font-weight:600;color:var(--mut);text-decoration:none;padding:6px 14px;border-radius:99px;
  line-height:1.2;transition:background .12s,color .12s,transform .08s;position:relative}
.per-op a:hover{color:var(--marca);background:var(--fundo)}
/* o escolhido tem de ser reconhecível de longe e sem depender só da cor: pílula cheia, texto
 * branco, peso maior e um ponto na frente, para quem enxerga pouco contraste também ver.
 * O filete interno é branco com alfa de propósito: ele é o brilho da própria pílula e tem de
 * acompanhar qualquer fundo que ela receba, em vez de virar mais um tom fixo */
.per-op a.on{background:var(--marca);color:var(--fundo);font-weight:700;
  box-shadow:0 2px 8px color-mix(in srgb, var(--i-azul) 32%, transparent),inset 0 0 0 1px rgba(255,255,255,.16)}
.per-op a.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--fundo);margin-right:7px;vertical-align:.12em}
/* o clique dá resposta imediata, antes de a página recarregar */
.per-op a:active{transform:scale(.96)}
.per-op a:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.periodo label{margin:0}
.periodo input[type=date]{font:inherit;font-size:.78rem;padding:6px 9px;border:1px solid var(--linha);border-radius:9px;
  background:var(--fundo);color:var(--tx)}
.bt-per{font:inherit;font-size:.78rem;font-weight:600;padding:6px 15px;border:0;border-radius:9px;background:var(--marca);
  color:var(--fundo);cursor:pointer}
.bt-per:hover{filter:brightness(1.08)}
.per-res{margin-left:auto;font-style:normal;font-size:.72rem;color:var(--mut);font-variant-numeric:tabular-nums}
@media (max-width:700px){.per-res{margin-left:0;width:100%}}
/* filtros em pílula, usados na fila de e-mail */
.filtros-pil{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 12px}
.filtros-pil a{font-size:.76rem;font-weight:600;color:var(--mut);text-decoration:none;padding:5px 13px;
  border:1px solid var(--linha);border-radius:99px;line-height:1.2}
.filtros-pil a:hover{border-color:var(--marca);color:var(--marca)}
.filtros-pil a.on{background:var(--marca);border-color:var(--marca);color:var(--fundo)}
.filtros-pil a:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.td-vazio{color:var(--mut);font-size:.82rem;padding:18px 12px;text-align:center}
.mi-alerta{font-style:normal;font-size:.68rem;font-weight:700;background:var(--i-ouro-nevoa);color:var(--i-ouro-tx);
  border:1px solid var(--i-ouro-borda);border-radius:99px;padding:2px 9px;white-space:nowrap}
.aviso.alerta-a{background:var(--i-ouro-nevoa);border-color:var(--i-ouro-borda);color:var(--i-ouro-tx)}
/* recusa de acesso no painel */
.cartao-nega{background:var(--fundo);border:1px solid var(--linha);border-radius:16px;padding:30px 32px;max-width:520px;
  box-shadow:0 6px 22px rgba(var(--sombra),.10)}
.cartao-nega h1{font-size:1.25rem;margin:0 0 10px;line-height:1.25}
.cartao-nega p{margin:0 0 10px;font-size:.92rem;line-height:1.55;color:var(--tx)}
.cartao-nega .total{font-size:.78rem}
.bt-voltar{display:inline-block;margin-top:8px;background:var(--marca);color:var(--fundo);text-decoration:none;
  font-weight:600;font-size:.88rem;padding:10px 20px;border-radius:10px}
.bt-voltar:hover{filter:brightness(1.08)}
.bt-voltar:focus-visible{outline:2px solid var(--marca);outline-offset:3px}
/* mapa do site */
.mapa-site{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;align-items:start;margin-top:22px}
.mapa-site section{break-inside:avoid}
.mapa-site h2{font-size:1rem;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--marca)}
.mapa-site ul{list-style:none;margin:0;padding:0}
.mapa-site ul ul{margin:4px 0 8px 14px;padding-left:12px;border-left:1px solid var(--linha)}
.mapa-site li{margin:0 0 5px;line-height:1.45}
.mapa-site a{color:var(--tx);text-decoration:none}
.mapa-site a:hover,.mapa-site a:focus-visible{color:var(--marca);text-decoration:underline}
.mapa-site>section>ul>li>a,.mapa-site>section>ul>li>b{font-weight:600}
.mapa-site b{color:var(--mut);font-weight:600}
.mapa-cont i{font-style:normal;font-size:.78rem;color:var(--mut)}
/* mapa de calor.
 *
 * A largura do rótulo da linha vive num token porque a linha do mapa começa por ele, e o número
 * já esteve escrito à mão em dois lugares (38px aqui, 44px na régua de horas), o que desalinhava
 * a régua em silêncio quando alguém mexia num só.
 *
 * A RÉGUA DE HORAS E A FAIXA DE CÉLULAS EM HTML (.calor-horas e .calor-cels) SAÍRAM. O mapa da
 * Visão geral virou um SVG desenhado à mão (.calor-svg, no fim desta folha), com cada célula
 * focável, <title> próprio e a mesma matriz em tabela dentro de <details class="g-alt">: era a
 * única forma de o mapa existir para quem navega por teclado. Depois da troca, nenhuma das 83
 * telas emite .calor-horas ou .calor-cels · o que sobrou aqui é o que o SVG não cobre: a moldura
 * (.calor), a linha de barras por tipo (.calor-linha) e o rodapé da legenda (.calor-pe). */
.calor{display:grid;gap:3px;--rot:44px}
.calor-linha{display:grid;grid-template-columns:var(--rot) 1fr;gap:6px;align-items:center}
/* o mapa deixou de desenhar sempre dia da semana: em janela de até quatorze dias cada linha é um
 * dia real e o rótulo passa a ser "Sex 08/08", que não cabe numa coluna de três letras. Em vez de
 * roubar largura das células, que já são estreitas, o rótulo quebra na própria lacuna e ocupa duas
 * linhas; "Seg" e "13/08" continuam cabendo numa só. O anywhere é a rede: rótulo inesperado encolhe
 * dentro da coluna em vez de invadir a faixa de células e desalinhar o mapa inteiro. */
.calor-linha b{font-size:.66rem;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  line-height:1.15;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
/* o fator 80% da rampa continua valendo, e agora mora na célula do SVG (.calor-svg) e na do
 * calendário: a escala é de quantil, com cinco degraus, e o painel manda o degrau em --i como
 * 0,34 · 0,56 · 0,78 · 1,00 · 1,22. Multiplicado por 100%, o degrau mais alto pedia 122% de azul,
 * fora da faixa que color-mix aceita, e o mapa que promete cinco degraus mostrava quatro,
 * justamente perdendo a hora de maior movimento. Com 80% os cinco caem em 27, 45, 62, 80 e 98 por
 * cento de azul: dentro da faixa e distinguíveis. É a mesma conta da legenda logo abaixo. */
.calor-pe{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.7rem;color:var(--mut)}
/* a legenda repete os mesmos cinco tons das células, em blocos, e não uma rampa contínua: a escala
 * é de quantil, tem degrau, e rampa lisa mentiria dizendo que existe tom intermediário. Quem confere
 * o desenho compara o bloco com a célula e com a faixa de valores impressa no rodapé */
.calor-pe .grad{flex:1;max-width:130px;height:9px;border-radius:99px;background:linear-gradient(90deg,
  color-mix(in srgb, var(--i-azul) 27%, var(--i-azul-bruma)) 0% 20%,
  color-mix(in srgb, var(--i-azul) 45%, var(--i-azul-bruma)) 20% 40%,
  color-mix(in srgb, var(--i-azul) 62%, var(--i-azul-bruma)) 40% 60%,
  color-mix(in srgb, var(--i-azul) 80%, var(--i-azul-bruma)) 60% 80%,
  color-mix(in srgb, var(--i-azul) 98%, var(--i-azul-bruma)) 80% 100%)}
.calor-pe b{margin-left:auto;font-weight:700;color:var(--tx)}
/* ===== gráficos desenhados à mão ===== */
/* a moldura é HTML de altura fixa; só a linha e a área são SVG esticado */
.g-linha-quadro{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:1fr 20px;
  height:230px;margin:0 0 2px}
.g-y{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  padding-right:9px;font-size:.7rem;color:var(--mut);font-variant-numeric:tabular-nums;line-height:1}
.g-y span{transform:translateY(-50%)}
.g-y span:first-child{transform:translateY(0)}
.g-y span:last-child{transform:translateY(-100%)}
.g-area{position:relative;border-left:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.g-grade{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.g-grade i{display:block;height:1px;background:var(--linha);opacity:.7}
.g-tracado{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.g-pontos{position:absolute;inset:0}
.g-ponto{position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(-50%,50%);
  border:1.5px solid var(--card,var(--fundo));box-sizing:content-box;transition:transform .12s;cursor:default}
.g-ponto:hover{transform:translate(-50%,50%) scale(1.5)}
.g-guia{position:absolute;top:0;bottom:0;width:1px;background:var(--mut);opacity:.35;pointer-events:none}
.g-ponto.on{transform:translate(-50%,50%) scale(1.6);box-shadow:0 0 0 4px color-mix(in srgb, var(--i-azul) 13%, transparent)}
.g-dica{position:absolute;top:6px;z-index:5;background:var(--card,var(--fundo));border:1px solid var(--linha);
  border-radius:12px;box-shadow:0 6px 22px rgba(var(--sombra),.16);padding:11px 14px;pointer-events:none;
  min-width:170px;display:flex;flex-direction:column;gap:6px}
.g-dica>b{font-size:.84rem;font-weight:700}
.g-dica span{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--mut);white-space:nowrap}
.g-dica span i{width:10px;height:10px;border-radius:50%;flex:none}
.g-dica span b{margin-left:auto;color:var(--tx);font-variant-numeric:tabular-nums;font-weight:700}
.card-m b.b-txt{font-size:1.15rem;line-height:1.25;word-break:break-all;letter-spacing:0;margin-top:6px}
.g-x{grid-column:2;position:relative;font-size:.7rem;color:var(--mut)}
.g-x span{position:absolute;top:4px;transform:translateX(-50%);white-space:nowrap}
.g-x span:first-child{transform:translateX(0)}
.g-x span:last-child{transform:translateX(-100%)}
.g-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px}
.g-legenda span{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--mut);font-weight:600}
.g-legenda i{width:10px;height:10px;border-radius:50%;flex:none}
.g-legenda.vert{flex-direction:column;gap:9px;margin:0;min-width:150px;flex:1}
.g-legenda.vert span{width:100%}
.g-legenda.vert b{margin-left:auto;color:var(--tx);font-variant-numeric:tabular-nums;font-size:.86rem}
/* rosca */
.g-rosca-linha{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.g-rosca{width:140px;height:140px;flex:none;font-family:inherit}
.g-rosca-num{text-anchor:middle;font-size:26px;font-weight:700;fill:var(--tx);font-variant-numeric:tabular-nums}
.g-rosca-rot{text-anchor:middle;font-size:10px;fill:var(--mut)}
.g-rosca path,.g-rosca circle{transition:opacity .12s}
.g-rosca:hover path,.g-rosca:hover circle{opacity:.5}
.g-rosca path:hover,.g-rosca circle:hover{opacity:1}
.g-nota{margin:14px 0 0;font-size:.8rem;color:var(--mut);line-height:1.5;border-top:1px solid var(--linha);padding-top:11px}
.g-nota b{font-weight:700}
.g-bom{color:var(--i-verde-tx)}
/* a nota só fica vermelha quando o que ela conta é prazo vencido, que é perigo de verdade */
.g-mau{color:var(--i-perigo)}
/* prazos por canal, dentro do cartão de demanda */
.g-prazos{display:flex;flex-direction:column;gap:9px;margin-top:16px;padding-top:13px;border-top:1px solid var(--linha)}
.g-prazos div{display:flex;flex-direction:column;gap:2px}
.g-prazos b{font-size:.8rem;font-weight:700}
.g-prazos span{font-size:.75rem;color:var(--mut);line-height:1.4}
.g-prazos i{font-style:normal;font-weight:700}
/* acervo do portal */
.acervo{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1px;background:var(--linha);
  border:1px solid var(--linha);border-radius:12px;overflow:hidden}
.acervo div{background:var(--fundo);padding:14px 16px}
.acervo b{display:block;font-size:1.7rem;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.acervo span{display:block;margin-top:3px;font-size:.76rem;font-weight:600}
.acervo i{display:block;margin-top:3px;font-style:normal;font-size:.71rem;color:var(--mut);line-height:1.35}
/* números embaixo do gráfico de linha */
.area-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--linha)}
.area-num b{display:block;font-size:1.25rem;font-variant-numeric:tabular-nums;line-height:1.1}
.area-num span{font-size:.7rem;color:var(--mut)}
@media (min-width:1400px){.g-linha-quadro{height:260px}}
/* barras de páginas */
.barras{display:grid;gap:6px}
.barras a{display:grid;grid-template-columns:minmax(90px,1fr) 2fr 34px;gap:9px;align-items:center;text-decoration:none;
  color:var(--tx);font-size:.78rem;padding:3px 0}
.barras a:hover span{color:var(--marca);text-decoration:underline}
.barras a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barras a i{display:block;height:11px;border-radius:99px;background:var(--marca);min-width:5px}
.barras a b{text-align:right;font-variant-numeric:tabular-nums;font-size:.8rem}
/* conteúdo por módulo */
.conts{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.conts a{display:block;background:var(--apoio);border:1px solid var(--linha);border-radius:11px;padding:10px 11px;
  text-decoration:none;color:var(--tx)}
.conts a:hover{border-color:var(--marca);background:var(--fundo)}
.conts b{display:block;font-size:1.3rem;line-height:1.1;font-variant-numeric:tabular-nums}
.conts span{display:block;font-size:.7rem;color:var(--mut);line-height:1.3;margin-top:2px}
/* módulo sem conteúdo publicado é pendência de redação, não falha do sistema: ouro, não vermelho */
.conts i{display:inline-block;font-style:normal;font-size:.62rem;color:var(--i-ouro-tx);background:var(--i-ouro-nevoa);border-radius:99px;
  padding:1px 7px;margin-top:4px}
/* coluna de documento e e-mail encoberto */
.col-doc a{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;text-decoration:none;
  color:var(--marca-forte);background:var(--marca-claro);border-radius:7px;padding:3px 8px;white-space:nowrap}
.col-doc a:hover{background:var(--marca);color:var(--fundo)}
.col-doc svg{width:13px;height:13px}
.col-doc i{font-style:normal;font-weight:500;opacity:.8}
.sem-doc{font-size:.72rem;color:var(--mut)}
.col-mail{font-size:.78rem;color:var(--mut);white-space:nowrap}

/* ===== padrão de largura das telas do painel: tudo ocupa o espaço ===== */
.p-corpo main>*{max-width:none}
.tela-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px;align-items:start;margin:0 0 14px}
.tela-2col>.quadro{margin:0}
.tela-2col .form{margin:0;box-shadow:none;border:0;padding:0;background:transparent}
.quadro>h2{font-size:.95rem;margin:0 0 12px;padding-left:10px;border-left:4px solid var(--marca)}
/* formulário do painel em duas colunas quando há espaço, campo longo ocupa a linha toda */
.p-corpo .form{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.p-corpo .form>label{min-width:0}
/* A LISTA BRANCA VIRA REGRA · e esta é a correção que fecha oito defeitos de uma vez.
 *
 * O QUE HAVIA: a folha resolvia por LISTA DE NOMES o que é regra. Quem atravessa a linha inteira
 * estava escrito à mão · label com textarea, .ed, .anexo, .rot-solto, .linha, .mdl-pe, button,
 * datalist · e toda tela nova que inventasse um bloco nascia como célula solta, da largura de um
 * campo, ao lado de campos. O painel inventou sete depois dessa lista (.destino, .tw,
 * .painel-2col, .tx-pe-form, .mat-sec, .cx, .lista-simples), e ninguém volta na folha para
 * acrescentar nome. Medido: 20 dos 44 formulários do painel emitem pelo menos um bloco fora da
 * lista. Era ali que os dois botões do Modelo do selo se perdiam numa coluna com 98% de vazio, e
 * era ali que os títulos de seção do Novo cargo caíam na terceira coluna, ao lado de um campo.
 *
 * A REGRA INVERTE O PADRÃO, e é a inversão que resolve: dentro de um formulário do painel, SÓ UM
 * CAMPO divide linha. Tudo o mais ocupa a faixa. Assim o bloco que ainda não existe nasce certo,
 * em vez de nascer errado e esperar alguém notar · que é a diferença entre uma folha que envelhece
 * e uma que não.
 *
 * AS DUAS LINHAS SEGUINTES NÃO SÃO REDUNDANTES. .rot-solto e .linha chegam como <label> em várias
 * telas, e sem elas a exceção do label as devolveria à largura de campo. */
.p-corpo .form>*{grid-column:1 / -1}
/* align-content:start porque o <label> é ele mesmo uma grade (rótulo em cima, campo embaixo,
   ajuda no fim) e ela é esticada até a altura da linha do formulário · a linha tem a altura do
   campo MAIS ALTO dela, e sem isto o conteúdo dos campos baixos se espalhava pelo vão, deixando o
   rótulo longe do campo que ele nomeia. Com start, cada campo se agrupa no topo da célula e a
   linha inteira fica alinhada pelo rótulo, que é por onde o olho a percorre. */
.p-corpo .form>label{grid-column:auto;min-width:0;align-content:start}
.p-corpo .form>label:has(textarea),.p-corpo .form>label:has(.ed),
.p-corpo .form>label.rot-solto,.p-corpo .form>label.linha{grid-column:1 / -1}
/* a régua de botões alinha pelo começo, e não pelo meio da altura da linha · com center, no dia
 * em que ela voltar a dividir linha com alguém, o botão flutua no vão */
.p-corpo .form>.tx-pe-form{align-items:flex-start}
.mdl-corpo .form{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.txts .tx-bloco{margin:0}

/* ===== telas largas usam mais colunas: nada de meia tela vazia ===== */
@media (min-width:1400px){
  .cards{grid-template-columns:repeat(4,1fr)}
  .painel-2col{grid-template-columns:repeat(2,1fr)}
  .conts{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .saude{grid-template-columns:repeat(3,1fr)}
  .grafs{grid-template-columns:repeat(3,1fr)}
  .txts{grid-template-columns:repeat(2,1fr)}
  .tela-2col{grid-template-columns:minmax(340px,1fr) 2fr}
  .menu-tela{grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr)}
}
@media (min-width:1750px){
  .cards{grid-template-columns:repeat(4,1fr)}
  .conts{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .p-corpo main{padding-left:34px;padding-right:34px}
}
/* o quadro da visão geral que merece largura inteira */
.quadro.largo{grid-column:1 / -1}

/* o painel ocupa a largura toda: nenhuma herança do layout público estreita a tela */
body.painel .p-corpo main{max-width:none;margin:0;padding:20px 26px 48px}
body.painel .p-corpo .form{max-width:none}

/* O QUADRO GANHA A MESMA ELEVAÇÃO DOS VIZINHOS, e só isso.
   Cheguei aqui achando que .quadro não tinha fundo e era lavanda sobre lavanda · estava errado: a
   regra que eu li era a do @media print, e a de tela já dá background:var(--fundo). Fica o registro
   porque o engano é fácil de repetir: há duas definições de .quadro na folha, e a segunda, que só
   vale no papel, aparece primeiro em qualquer busca de baixo para cima.
   O que ELE de fato não tinha é a sombra que .form e .placarzao já têm nesta mesma tela · três
   cartões brancos lado a lado, dois deles levantados do fundo e um deles colado nele. */
body.painel .p-corpo .quadro{box-shadow:0 1px 3px rgba(var(--sombra),.06)}
/* A TABELA SOLTA NA PÁGINA, essa sim, não tinha superfície. Dentro de um quadro ela está sobre
   branco e nada muda; fora dele · e há telas que põem .tw direto no corpo · ela ficava com o
   cabeçalho azul-claro e o corpo transparente sobre o lavanda da página, sem contorno nenhum. */
body.painel .p-corpo>main>.tw,body.painel .p-corpo main>.tw{background:var(--fundo);border:1px solid var(--linha)}
/* papéis e matriz de acesso */
/* AS OITO FUNÇÕES CABEM EM DUAS COLUNAS · e já cabiam, no papel: auto-fit com minmax(140px,1fr)
   promete duas colunas a partir de 290px. O que faltava era a CÉLULA ter esses 290px. Numa tabela,
   o navegador reparte a largura pelo conteúdo, e a coluna das funções ficava espremida entre o
   e-mail e o último acesso · com menos de 290px, auto-fit devolve UMA coluna, as oito funções
   empilham, e cada linha da tabela passa de 400px de altura. Três contas enchiam a tela.
   O piso vai na célula (td.col-papeis, logo abaixo) e não aqui, porque quem estava errado era a
   largura disponível, e não a grade.
   align-items:flex-start porque "Gestor de conteúdo (todos os módulos)" ocupa duas linhas, e com
   center a caixa de marcação flutuava no meio delas, longe do começo do rótulo que ela marca. */
.papeis-cx{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:3px 14px;margin-bottom:8px}
.papeis-cx label{display:flex;align-items:flex-start;gap:6px;font-size:.72rem;font-weight:500;margin:0;line-height:1.3}
.papeis-cx input{margin:1px 0 0;flex:none}
/* o piso é em ch e não em px pelo mesmo motivo da coluna de situação: com a fonte ampliada pelo
   menu de acessibilidade, um piso em px voltaria a dar uma coluna só, que é o defeito que esta
   regra existe para não deixar voltar */
td.col-papeis{min-width:38ch}
@media (max-width:760px){td.col-papeis{min-width:0}}
.fpapeis .ac{margin-top:2px}
table.matriz th{position:sticky;top:0;background:var(--i-azul-fundo);z-index:1}
table.matriz td{padding:6px 10px}
table.matriz select.niv{padding:4px 6px;border:1px solid var(--linha);border-radius:7px;font:inherit;font-size:.74rem;background:var(--fundo);width:100%}
select.n-publicar{border-color:var(--i-verde-borda);background:var(--i-verde-nevoa);color:var(--i-verde-tx);font-weight:600}
select.n-escrever{border-color:var(--i-azul-borda);background:var(--i-azul-nevoa);color:var(--i-azul);font-weight:600}
select.n-ler{background:var(--fundo);color:var(--mut)}
/* "nenhum" era um cinza de 2,61:1, que reprovava AA e escondia justamente a permissão que mais
 * importa conferir numa matriz de acesso */
select.n-nenhum{color:var(--mut)}

/* ===== assinatura: selo no documento e página de verificação ===== */
.selos{margin:22px 0 6px}
.selos h2{font-size:1.02rem;margin:0 0 10px;padding-left:10px;border-left:4px solid var(--marca)}
.selo{display:flex;gap:13px;align-items:center;flex-wrap:wrap;background:var(--fundo);border:1px solid var(--linha);
  border-left:4px solid var(--marca);border-radius:12px;padding:12px 15px;margin-bottom:8px}
.selo-ico{width:38px;height:38px;border-radius:10px;background:var(--marca-claro);color:var(--marca-forte);
  display:grid;place-items:center;flex:none}
.selo-ico svg{width:21px;height:21px}
.selo b{display:block;font-size:.92rem}
.selo>div span{font-size:.76rem;color:var(--mut)}
.selo>a{margin-left:auto;display:grid;font-size:.8rem;font-weight:700;text-align:right;text-decoration:none}
.selo>a i{font-style:normal;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;color:var(--mut);font-weight:500}
.verif{border-radius:12px;padding:14px 16px;margin:0 0 16px;border:1px solid}
.verif b{display:block;font-size:1rem;margin-bottom:3px}
.verif p{margin:0;font-size:.88rem;line-height:1.55}
/* o resultado da conferência é lido pelo texto, não pela cor: a cor só reforça. Verde é a
 * assinatura conferida, ouro é o documento que saiu do ar, e vermelho aparece aqui porque é
 * perigo de verdade, o documento não confere com o que foi assinado */
.verif.bom{background:var(--i-verde-nevoa);border-color:var(--i-verde-borda);color:var(--i-verde-tx)}      /* 5,51:1 */
.verif.ruim{background:var(--i-perigo-nevoa);border-color:var(--i-perigo-borda);color:var(--i-perigo)}     /* 6,88:1 */
.verif.atencao{background:var(--i-ouro-nevoa);border-color:var(--i-ouro-borda);color:var(--i-ouro-tx)}     /* 6,37:1 */
.hash{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;word-break:break-all;background:var(--apoio);
  border:1px solid var(--linha);border-radius:9px;padding:11px 13px;margin:0 0 8px}
/* células do painel alinhadas ao centro vertical: texto e botões na mesma linha de base visual */
.p-corpo table td{vertical-align:middle}
.p-corpo table th{vertical-align:middle}
/* col-acoes saiu daqui pela razão escrita na sua própria regra: era este nowrap que sobrevivia e
   forçava as cinco ações numa linha. col-doc fica · nome de arquivo com tamanho ao lado ("PDF
   708 KB") quebrado no meio vira duas linhas que não se leem como uma coisa só. */
.p-corpo table td.col-doc{white-space:nowrap}

/* ===== consertos da área pública: carrossel com controle, paginação em janela, veredito da
 * conferência como título e a nota de privacidade do VLibras =====
 *
 * Bloco novo, no fim da folha de propósito: o resto do arquivo está sendo mexido por outras
 * mãos ao mesmo tempo, e nada aqui redefine regra que já existe acima. */

/* pausa do carrossel: a mesma linguagem do botão do letreiro (duas barrinhas que viram um
 * triângulo quando está pausado), só que sobre foto. O branco com alfa é o que garante a
 * pastilha clara seja qual for o banner, como já acontece com .car-seta logo acima. */
.carrossel #carPausa{display:inline-flex;gap:4px;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:rgba(255,255,255,.92);padding:0;border:0;flex:none}
.carrossel #carPausa i{display:block;width:3px;height:11px;background:var(--marca-forte);border-radius:1px}
.carrossel #carPausa[aria-pressed="true"] i:first-child{width:0;height:0;background:none;
  border-left:9px solid var(--marca-forte);border-top:6px solid transparent;border-bottom:6px solid transparent}
.carrossel #carPausa[aria-pressed="true"] i:last-child{display:none}
.carrossel #carPausa:hover{background:var(--fundo)}

/* paginação em janela: o vão de reticências não é link e não pode parecer um */
.pags .pag-passo{font-weight:700}
.pags .pag-vao{padding:6px 4px;color:var(--mut);align-self:center}

/* o veredito da conferência virou <h2> para existir na navegação por títulos; a aparência é a
 * mesma que o <b> tinha, então nada muda para quem enxerga */
.verif h2{display:block;font-size:1rem;margin:0 0 3px;line-height:1.35}
.verif:focus-visible{outline:3px solid var(--marca);outline-offset:3px}

/* nota de privacidade do VLibras, dentro do menu de acessibilidade */
.a-nota{margin:10px 2px 0;font-size:.74rem;line-height:1.5;color:var(--mut)}
.a-nota:empty{display:none}

/* ===== o texto de apoio do campo =====
 *
 * Bloco novo, no fim da folha de propósito: o arquivo está sendo mexido por outras mãos ao mesmo
 * tempo e nenhuma linha acima foi editada. O que precisava mudar de comportamento está redeclarado
 * aqui embaixo, com a mesma especificidade, valendo por ser o último a falar.
 *
 * A RÉGUA DE HORAS EM HTML QUE MORAVA AQUI SAIU JUNTO COM .calor-horas: o mapa virou SVG e agora
 * é o próprio SVG que escreve 00h, 03h, 06h nas suas coordenadas (.calor-svg .eixo-f).
 *
 * E A CLASSE .dica TAMBÉM SAIU, pelo motivo oposto ao dela: ela era o desenho de um elemento que
 * o painel nunca chegou a emitir. O texto de apoio do campo chega em <span class="total"> dentro
 * do <label>, que é o caso tratado logo abaixo · manter as duas escritas era prometer que existe
 * uma classe própria para a explicação do campo, e quem a usasse não veria efeito nenhum.
 *
 * O texto de apoio, então: menor que o rótulo e em --mut (#5b6180 sobre o papel branco dá 6,06:1,
 * folgado para AA), sem itálico, porque bloco inteiro em itálico é justamente o que cansa quem tem
 * dislexia. A classe .total nasceu para a contagem da listagem ("12 registro(s)") e só define cor
 * e tamanho .88rem, então dentro do <label> o peso vinha por herança do rótulo (600) e a
 * explicação ficava MAIOR e mais forte que o rótulo que ela explica · a ficha lia como se cada
 * campo tivesse dois títulos. Aqui ela recebe o tratamento de nota de apoio, mas SEM margem
 * própria: o afastamento já vem do gap da grade (ou do flex, no campo de marcar) do próprio
 * rótulo, e somar margem descolaria a explicação do campo dela para colá-la no campo seguinte. */
.form label>.total{display:block;font-size:.78rem;font-weight:400;font-style:normal;line-height:1.45;color:var(--mut)}

/* ===== folha de impressão =====
 *
 * A comissão imprime, e o secretário anexa o número ao ofício. Até aqui a única saída era mandar
 * imprimir a tela: saía a barra lateral inteira em azul chapado, os mapas de calor em branco
 * (o navegador descarta fundo ao imprimir, por padrão) e nenhuma linha dizendo de que período
 * eram aqueles números. Papel sem período não é evidência, é folha solta.
 *
 * O que a data e a hora da impressão diz é o cabeçalho do próprio navegador, que sai por padrão;
 * o que ele não sabe é a janela apurada, e essa fica embaixo, na faixa de período. */
@media print{
  /* navegação, ação e enfeite não existem no papel: ninguém clica numa folha */
  .p-lat,.btn-novo,.ac,.col-acoes,.filtro,.pags,.pular,#menu,.topo-utils,.letreiro,
  .per-op,.periodo label,.periodo .bt-per,.car-seta,.carrossel #carPausa,
  #a11yBtn,#a11yPainel{display:none}
  body.painel .p-corpo main{padding:0}
  .p-corpo{display:block}
  /* a faixa de período perde os botões e vira a legenda do relatório: .per-res já traz a janela
   * apurada por extenso e o período de comparação, que é a primeira coisa que se pergunta ao ler
   * um número solto */
  .periodo{display:block;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0 0 12px}
  .periodo>span{display:inline;margin-right:6px}
  .per-res{display:inline;margin-left:0;font-size:.82rem;color:var(--tx)}
  /* nada de meia folha vazia: em coluna única cada quadro usa a largura do papel */
  .painel-2col,.tela-2col,.grafs,.txts,.saude,.menu-tela{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  /* quadro partido entre duas folhas é quadro que ninguém consegue conferir */
  .quadro,.card-m,.calor,.calor-linha,.g-linha-quadro,.tw,.selo,.verif{break-inside:avoid}
  .quadro{box-shadow:none;border:1px solid var(--linha)}
  /* sem isto o mapa de calor, a rosca e as barras saem em branco: o navegador só imprime fundo
   * quando a folha pede na cara dura */
  body.painel,.calor-pe .grad,.card-m .spark,svg{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* a rampa das células do mapa era refeita AQUI sem color-mix, porque as células eram <i> com
   * fundo de folha. Elas viraram <rect> de SVG e o tom vai escrito no próprio atributo style, que
   * ganha de qualquer regra desta folha: a rampa da impressão passou a ser assunto de quem emite o
   * rect, e uma regra fantasma aqui só faria alguém ajustar um valor que a tela nunca lê */
  /* a legenda em blocos volta a ser rampa de dois tons no papel: ela é desenhada com color-mix,
   * que é justamente o que não sobrevive à impressão, e o valor de cada degrau já sai escrito por
   * extenso na linha de baixo do mapa */
  .calor-pe .grad{background:linear-gradient(90deg,var(--i-azul-bruma),var(--i-azul))}
  /* modal aberto na hora de imprimir cobria a folha inteira com o véu, e saía uma página cinza
   * com um retângulo no meio; no papel ele é um bloco comum, depois do conteúdo */
  .mdl{position:static;display:block;background:none;padding:0}
  .mdl-c{max-height:none;box-shadow:none;border:1px solid var(--linha);width:100%}
  /* tabela larga rola na tela; no papel não há para onde rolar */
  .tw{overflow:visible;box-shadow:none}
  .tw table{min-width:0}
}

/* ---------------------------------------------------------------------------------------------
 *  Fechamento · o botão que parecia link
 *
 *  Imprimir estava escrito quatro vezes como <a href="#" onclick="...">. Virou <button>, que é o
 *  que ele sempre foi, e estas duas regras existem só para a troca não mudar nada na tela: o
 *  navegador dá ao botão fundo cinza, borda e a sua própria fonte, e sem isto a barra de
 *  exportação ganharia um caixote no meio da frase.
 * ------------------------------------------------------------------------------------------- */
.lk{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;color:var(--marca);text-decoration:underline;cursor:pointer}
.lk:hover{color:var(--marca-forte)}
button.btn-novo{border:0;font-family:inherit;cursor:pointer}

/* ---------------------------------------------------------------------------------------------
 *  Caixas de e-mail · a barra de uso de cada caixa
 *
 *  Uma barra só, desenhada à mão com os tokens do brasão, porque o gráfico de barras da casa
 *  (.graf .g) é um bloco de três colunas e não cabe dentro de uma célula de tabela ao lado do
 *  texto. Ela é decorativa de propósito, e por isso vai marcada com aria-hidden: o mesmo número
 *  está escrito por extenso ao lado, então quem usa leitor de tela não perde nada, e quem lê a
 *  tela de longe enxerga a caixa cheia sem precisar comparar dois tamanhos.
 *
 *  O trilho riscado é a parte que não podia faltar. Caixa cujo uso ninguém mediu NÃO ganha uma
 *  barra em zero: barra vazia é uma afirmação, e diria que a caixa está vazia quando na verdade
 *  ninguém perguntou nada a servidor nenhum. O risco quer dizer "sem medição", que é a verdade.
 *
 *  Ouro a partir de 90% e vermelho a partir de 100%: o vermelho continua reservado para perigo
 *  real, e cota estourada é uma caixa que já está recusando correspondência do cidadão.
 * ------------------------------------------------------------------------------------------- */
.uso-b{display:block;width:150px;max-width:100%;height:8px;margin:0 0 4px;border:1px solid var(--linha);
  border-radius:99px;background:var(--apoio);overflow:hidden}
.uso-b i{display:block;height:100%;border-radius:99px;background:var(--marca)}
.uso-b.perto i{background:var(--i-ouro)}
.uso-b.estourada i{background:var(--i-perigo)}
.uso-b.sem-medida{background:repeating-linear-gradient(135deg,var(--apoio) 0 4px,var(--fundo) 4px 8px)}
/* Imprimir a folha é um <button>, como todo Imprimir da casa desde que .lk existe. O navegador dá
 * ao botão a sua própria família de fonte, e sem esta linha ele sairia num tipo diferente do resto
 * da linha de ações. Mesmo motivo, e mesma forma, do button.btn-novo logo acima. */
button.bt-neutro{font-family:inherit;cursor:pointer}

/* ---------------------------------------------------------------------------------------------
 *  Gráfico em SVG que se percorre pelo teclado, e a tabela que diz a mesma coisa em palavras
 *
 *  O mapa de calor é o bloco mais rico da Visão geral e era o menos acessível: as células são
 *  <i> com title, que não recebe foco, não é anunciado por leitor de tela e não existe para quem
 *  navega por teclado. A saída é o mapa virar um SVG desenhado à mão, com cada célula focável e
 *  com <title> próprio, e logo abaixo a mesma matriz em <table> dentro de um <details>, que é a
 *  alternativa textual que o leitor de tela percorre linha a linha.
 *
 *  A marcação é do painel; o que mora aqui é a metade visual dela, e vale para todo gráfico novo
 *  daquela tela: svg com a classe .calor-svg, célula <rect tabindex="0"> com <title> dentro, e a
 *  tabela em <details class="g-alt">.
 * ------------------------------------------------------------------------------------------- */
.calor-svg{display:block;width:100%;height:auto;font-family:inherit}
/* o eixo é texto de gráfico, não texto de leitura: 10px na cor de apoio, e os números alinhados
 * em coluna para a régua de horas não dançar */
.calor-svg text{font-size:10px;fill:var(--mut);font-variant-numeric:tabular-nums}
.calor-svg .eixo-f{font-weight:700}
/* O anel de foco é desenhado PARA DENTRO da célula, e não em volta dela. Dois motivos, e os dois
 * já custaram tela errada: num SVG quem vem depois no documento pinta por cima, então anel para
 * fora seria comido pelas células vizinhas e apareceria cortado em dois lados; e a célula do pico
 * é do mesmo azul do anel, de modo que um anel azul colado nela desapareceria justamente na hora
 * mais movimentada. Entre a borda e o anel fica um filete da própria célula, que separa os dois. */
.calor-svg rect:focus-visible{outline:2px solid var(--marca);outline-offset:-5px;stroke:var(--fundo);stroke-width:3}
/* a célula responde ao mouse também, senão o cursor não sugere que ali há informação */
.calor-svg rect{cursor:default}

/* A tabela alternativa. Fechada ela é uma linha de texto, para não empurrar o gráfico para fora
 * da tela; aberta ela é a tabela da casa, com a rolagem no próprio quadro (.tw) e cabeçalho nas
 * duas direções. O chevron é o mesmo do menu: seta desenhada com borda, nunca caractere solto. */
details.g-alt{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--linha)}
details.g-alt>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:700;color:var(--marca);padding:4px 8px 4px 2px;border-radius:6px}
details.g-alt>summary::-webkit-details-marker{display:none}
details.g-alt>summary::after{content:"";width:5px;height:5px;border-style:solid;border-width:0 1.5px 1.5px 0;
  border-color:currentColor;transform:rotate(45deg);margin-top:-2px;transition:transform .15s}
details.g-alt[open]>summary::after{transform:rotate(225deg);margin-top:2px}
details.g-alt>summary:hover{background:var(--marca-claro)}
details.g-alt .tw{margin-top:10px}
details.g-alt table{font-size:.78rem}
details.g-alt th{font-size:.66rem}
/* a primeira coluna é o rótulo da linha, e ela é cabeçalho: fica presa na rolagem horizontal,
 * senão quem arrasta a tabela larga perde de vista de que dia é a linha que está lendo */
details.g-alt tbody th{position:sticky;left:0;background:var(--apoio);text-transform:none;
  font-size:.72rem;white-space:nowrap}

/* =============================================================================================
 *  ONDA 2 · bloco novo no fim da folha, de propósito
 *
 *  O arquivo está sendo mexido por outras mãos ao mesmo tempo, então nenhuma linha acima foi
 *  editada: o que precisava mudar de comportamento está redeclarado aqui embaixo, com a mesma
 *  especificidade, valendo por ser o último a falar.
 *
 *  Cada seção é a METADE VISUAL de um item do lote. A marcação é do PHP, e o nome de classe que
 *  ela espera vem escrito no comentário justamente para que quem escrever o HTML não invente um
 *  segundo nome para a mesma coisa, que é como uma folha ganha três estilos de pílula.
 * ========================================================================================== */

/* ---------------------------------------------------------------------------------------------
 *  1 · Dinheiro na tela · SAIU DA FOLHA, e o motivo é o mesmo que a fez nascer
 *
 *  Este bloco desenhava a coluna de moeda (.moeda), a pílula da economia calculada (.eco,
 *  .eco-abaixo, .eco-acima) e a pílula de orçamento sigiloso (.sigilo). Nenhuma das três chegou a
 *  ser emitida: o PHP nunca marcou a célula de valor, e a varredura das 83 telas do portal não
 *  encontra um só .moeda, .eco ou .sigilo · nem o nome aparece dentro de um class= em uma linha
 *  de PHP.
 *
 *  Meia promessa numa folha de estilo é pior do que promessa nenhuma. Quem lesse este bloco
 *  concluiria que a tabela de licitações já alinha valor à direita e já sabe dizer "sigiloso por
 *  lei", e essas duas coisas a tela não faz. A metade que era minha saiu; a outra metade, a
 *  marcação, está descrita na entrega para quem for dono do arquivo do painel · ligar as duas ao
 *  mesmo tempo é uma decisão de quem tem os dois lados na mão.
 * ------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------
 *  2 · Imprimir em qualquer página, e o papel sem menu nem barra de acessibilidade
 *
 *  A folha de impressão que já existe acima cuida do painel. Do lado público sobravam a faixa do
 *  brasão, a régua de utilidades, o botão redondo de acessibilidade, o de cookies e o widget do
 *  VLibras, todos em position:fixed: no papel eles não saem do lugar, carimbam a primeira folha e
 *  ainda empurram o texto. Fora isso, o rodapé é azul chapado com links brancos, e navegador
 *  descarta fundo ao imprimir por padrão, ou seja: sairiam três colunas de nada.
 *
 *  O que fica no papel é o que se lê: trilha, título, ficha, texto, tabela, endereço e telefone da
 *  Prefeitura. O que sai é o que só serve para clicar.
 *
 *  Marcação esperada no cabeçalho do detalhe: <div class="mat-acoes">, com o botão de bt_imprimir()
 *  na classe bt-neutro. Ele é o primeiro a sumir na impressão: botão impresso é tinta gasta.
 * ------------------------------------------------------------------------------------------- */
.mat-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
/* O BOTÃO NÃO ENCOSTA NA RÉGUA. .mat-meta ("Publicado em ...") fecha com uma linha de 2px e
   padding embaixo, e .mat-acoes nascia com margem superior zero · o botão de imprimir ficava
   grudado nessa linha, como se fizesse parte dela. O seletor é de IRMÃO ADJACENTE de propósito:
   só o caso em que a régua existe ganha o respiro, e a caixa de botões continua sem margem em
   todo lugar onde ela abre um bloco (inclusive dentro de .cab-tela, que zera a margem logo
   acima e continua mandando por vir depois na folha). */
.mat-meta + .mat-acoes{margin-top:18px}
.mat-acoes .bt-neutro{display:inline-flex;align-items:center;gap:8px}
.mat-acoes svg{width:16px;height:16px;flex:none}

/* ---------------------------------------------------------------------------------------------
 *  3 e 4 · O carrossel de dicas e o calendário anual de acessos · SAÍRAM DA FOLHA
 *
 *  O primeiro desenhava a tira de "Você sabia" (.carrossel.dicas, .car-dica) e o segundo a tira de
 *  53 semanas por 7 dias da Visão geral (.cal-rolo, .cal-ano, .cal-pe, com o dia em rect.d e o mês
 *  em text.mes). Os dois estavam completos e nenhum tinha marcação: nem uma linha de PHP escreve
 *  esses nomes, e as 83 telas colhidas não trazem nenhum deles.
 *
 *  Ficaram aqui como duas telas que a folha jurava saber desenhar. É o tipo de dívida que só se
 *  descobre no dia da demonstração, quando alguém procura o calendário no painel e ele não existe
 *  · e é justamente na Visão geral, que é a tela que a comissão abre. Enquanto o calendário não
 *  tiver quem o emita, é melhor a folha não ter opinião sobre ele.
 * ------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------
 *  5 · Origem e dispositivo do acesso, duas roscas lado a lado
 *
 *  A rosca em si já tem estilo nesta folha (.g-rosca, .g-rosca-linha, .g-legenda.vert), desenhada
 *  para o painel de protocolos. O que faltava era o par: duas roscas no mesmo quadro, cada uma com
 *  a sua legenda, sem que a segunda caia meio fora em tela estreita. Em telas apertadas elas viram
 *  uma embaixo da outra, e a legenda continua ao lado de cada uma, que é como se lê percentual.
 *
 *  A frase de que nada disso identifica pessoa é do PHP e vai em <p class="g-nota">, que já existe.
 * ------------------------------------------------------------------------------------------- */
.g-duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px 24px;align-items:start}
.g-duas>div{min-width:0}
.g-duas h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:0 0 8px;font-weight:700}

/* ---------------------------------------------------------------------------------------------
 *  7 · Acessibilidade no painel · a régua no pé da barra lateral não existe
 *
 *  A ideia era reaproveitar os MESMOS botões da régua do site (.a11y) no pé da barra lateral azul,
 *  para quem usa o painel oito horas por dia ter contraste e tamanho de letra ali. O painel nunca
 *  os emitiu: não há .a11y-rot em lugar nenhum, e o .p-pe do painel traz só "Ver o site", "Sair" e
 *  a ficha da pessoa. As regras com escopo .p-pe saíram por isso.
 *
 *  O QUE FICA é a linha seguinte, e ela não é desta onda: o botão de contraste da régua do SITE
 *  anuncia o próprio estado em aria-pressed, e é esta regra que o pinta quando está ligado. Sem
 *  ela, o interruptor que atravessa a navegação não teria como dizer que está ligado. */
.a11y button[aria-pressed="true"]{background:var(--marca);color:var(--fundo)}

/* ---------------------------------------------------------------------------------------------
 *  8 e 9 · Endereços conferidos e as ações sensíveis do histórico · SAÍRAM DA FOLHA
 *
 *  O item 8 desenhava o veredito de cada endereço cadastrado (.s-quebrado, .s-checar, .s-inteiro)
 *  e a coluna que o mostra (.col-url); o item 9 marcava no histórico as linhas de acesso e
 *  segurança (.s-seg, tr.log-seg). Os dois dependiam de uma conferência e de uma classificação que
 *  o PHP faria, e nenhuma das duas chegou: as cinco classes não aparecem em uma linha de PHP nem
 *  em nenhuma das 83 telas.
 *
 *  O item 8 é o mais perigoso de deixar meio pronto, e por isso ele é o exemplo: a folha pintava
 *  de VERMELHO uma pílula chamada "quebrado" que ninguém nunca calculou. No dia em que alguém
 *  escrevesse a marcação sem escrever a conferência, a tela passaria a acusar link quebrado sem
 *  ter conferido link nenhum · que é exatamente a mentira que o vermelho desta casa não pode
 *  contar. Sem a metade que decide, a metade que pinta não deve existir. */

/* =============================================================================================
 *  Folha de impressão da ÁREA PÚBLICA (item 2), separada da folha do painel de propósito
 *
 *  A regra @media print que já existe acima nasceu para a Visão geral e continua valendo: nada
 *  aqui a desfaz. Este bloco cuida do que só existe do lado do cidadão.
 * ========================================================================================== */
@media print{
  /* tudo que só serve para clicar, e tudo que é fixo na tela: fixo no papel vira carimbo na
   * primeira folha, por cima do texto. A grade de banners antiga (.banners) saiu desta lista
   * junto com o desenho dela: quem faz o papel do banner na home é .carrossel, logo ao lado */
  .faixa-gov,.flutuantes,#ckBtn,#ckPainel,#ckVeu,#a11yGuia,div[vw],
  .mat-acoes,.a11y,.cab-dir,#busca,.carrossel,.cartazes,.preciso,
  .relac,.svc-cta,.faq-cats,.pe,.yt-trava{display:none}
  /* o botão de baixar o anexo FICA, e vira etiqueta: ele não serve para clicar no papel, mas é a
   * única linha que diz que aquele processo tem edital anexado. Escondê-lo apagaria a existência
   * do documento, e não só o botão */
  .botao-arquivo{background:none;color:var(--tx);border:1px solid var(--linha);padding:5px 11px}
  /* a página inteira usa a largura do papel: margem de tela em folha impressa é margem dobrada */
  .miolo{max-width:none;padding:0}
  main{padding:0;min-height:0}
  .cabeca{padding-top:0;padding-bottom:8px}
  /* o filete da marca embaixo do brasão separa cabeçalho de conteúdo, que é o papel que o menu
   * fazia na tela */
  header{border-bottom:2px solid var(--marca)}
  .marca img{height:44px}
  /* o rodapé perde o azul chapado, que o navegador descarta ao imprimir e deixaria texto branco
   * sobre branco, e vira o que importa no papel: endereço, horário e telefone da Prefeitura */
  footer{background:none;border-top:1px solid var(--linha);margin-top:16px}
  .pe-info{border-bottom:0;padding:10px 0 0;justify-items:start;gap:12px}
  .pe-info b,.pe-info span,.assina{color:var(--tx)}
  .pe-info svg{color:var(--marca);width:20px;height:20px}
  .assina{border-top:1px solid var(--linha)}
  /* endereço de link externo por extenso: no papel ninguém clica, e link sem endereço impresso é
   * referência que a pessoa não consegue seguir */
  .rico a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:var(--mut);word-break:break-all}
  /* bloco de leitura não pode partir no meio: quem confere precisa ver a ficha inteira numa folha */
  .mat-ficha,.mat-topo,.recibo,.lista li,.hub a{break-inside:avoid}
  .mat-capa img{max-height:110mm}
}

/* =============================================================================================
 *  ONDA 3 · bloco novo no fim da folha, de propósito
 *
 *  Mesma disciplina das ondas anteriores: nenhuma linha acima foi editada. O que precisa mudar de
 *  comportamento está redeclarado aqui embaixo e vale por ser o último a falar, com a
 *  especificidade escrita na mão para não atropelar quem já usa a mesma classe em outra tela.
 *
 *  Cada seção é a METADE VISUAL de um item do lote. A metade de marcação é do PHP, e o nome de
 *  classe que ela espera vem escrito no comentário justamente para que quem escrever o HTML não
 *  invente um segundo nome para a mesma coisa. Enquanto o PHP não emitir a classe, nenhuma regra
 *  daqui pega em nada: todas são condicionadas ao elemento novo existir.
 * ========================================================================================== */

/* ---------------------------------------------------------------------------------------------
 *  2 · A linha do menu sem o select de grupo dentro dela
 *
 *  Cada linha imprimia um <select> com TODOS os grupos. Com 45 itens e 8 grupos são 360 nós de
 *  option numa tela de configuração, e o select ainda disputava o espaço horizontal com a pega de
 *  arrastar: a linha ficava sem lugar para dizer PARA ONDE o item leva, que é a única coisa que
 *  não dá para descobrir olhando. A troca de grupo passa a ser explícita, no campo "Dentro de" do
 *  modal de edição, e o pai viaja no envio como <input type="hidden" name="pai[ID]">, escrito
 *  pelo arrasto e pelo teclado. Campo escondido não é item de grade, então some da conta sozinho.
 *
 *  A ESPERA ACABOU: o painel já não emite o <label class="mi-pai">, e a cerca :not(:has(.mi-pai))
 *  que estas regras carregavam virou um trecho de seletor sempre verdadeiro · quem lesse tomaria
 *  a folha por indecisa entre dois desenhos que não coexistem mais. A regra de baixo continua
 *  escrita porque ela é a que vale para a linha SEM endereço, e a de cima é a que pinta hoje.
 *
 *  .bloco fica de fora à força: a tela de blocos da página inicial reaproveita .mi, nunca teve
 *  select de grupo nenhum e tem grade própria, que uma regra descuidada aqui desmontaria.
 *
 *  Marcação de hoje: a linha .mi com o endereço resolvido em <i class="mi-end">/licitacoes</i>
 *  logo depois do tipo, e o pai num <input type="hidden" class="mi-grupo">. */
/* o mínimo de largura é obrigatório: abaixo de 760px a linha já vira pilha de três colunas mais
 * acima nesta folha, e uma regra de grade sem cerca aqui embaixo, mais específica que aquela,
 * remontaria a linha larga justamente no celular, que é onde ela não cabe */
@media (min-width:761px){
  .mi:not(.bloco){grid-template-columns:22px minmax(90px,1fr) auto 72px auto auto}
  /* o endereço é a informação que a coluna liberada estava devendo. Ele encolhe antes de todo mundo
   * (minmax com piso zero) porque é apoio: entre cortar o nome do item e cortar o endereço, corta o
   * endereço, que ainda aparece inteiro no title e na prévia ao lado */
  .mi:not(.bloco):has(.mi-end){grid-template-columns:22px minmax(90px,1fr) auto minmax(0,.9fr) 72px auto auto}
}
.mi-end{font-style:normal;font-size:.72rem;color:var(--mut);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0;font-variant-numeric:tabular-nums}
/* Item que não leva a lugar nenhum, o grupo, não mostra endereço: vazio já não desenha nada.
 * O que ele NÃO pode fazer é sair da grade. Em tela larga a linha do grupo continua sendo a de
 * sete colunas, porque o seletor que a escolhe é :has(.mi-end) e o elemento existe mesmo vazio;
 * um display:none aqui tirava o quarto item da fila e empurrava todo mundo uma coluna para trás,
 * jogando o campo de ordem (que é width:100%) dentro da faixa larga do endereço e espremendo o
 * "no ar" nos 72px que sobravam. A célula fica reservada e vazia, que é o certo: a linha do grupo
 * mantém ordem, situação e editar exatamente onde estão nas linhas de baixo. */
@media (max-width:760px){
  .mi-end{grid-column:2 / -1}
  /* empilhada no celular não há coluna para guardar: a célula vazia viraria uma linha em branco
   * de altura inteira no meio do cartão, então aí sim ela sai da folha */
  .mi-end:empty{display:none}
}

/* ---------------------------------------------------------------------------------------------
 *  3 · Prévia do bloco de redes sociais, com os ícones de verdade
 *
 *  Era o único bloco da tela de textos sem prévia, e o de regra mais sutil: rede sem endereço
 *  simplesmente NÃO aparece no site. Quem apagava um campo não via efeito nenhum e ficava sem
 *  saber se tinha desligado o ícone ou quebrado o cabeçalho.
 *
 *  A prévia usa a classe .soc do próprio site, com os mesmos SVG do cabeçalho: desenho repetido é
 *  desenho que dessincroniza, e prévia que não é igual ao site não prova nada. O que mora aqui é
 *  só a moldura branca dentro da .tx-previa, igual à que .tx-let e .tx-cab já ganham, e a altura
 *  mínima, para o quadro não pular de tamanho quando o último ícone some.
 *
 *  Esconder o ícone de campo vazio é do cliente, com o atributo hidden, que [hidden] no alto desta
 *  folha já resolve sem regra nova.
 *
 *  Marcação esperada: <div class="tx-previa"><div class="soc"><span>Siga-nos</span>
 *  <a hidden ...><svg/></a> ... <i class="soc-nada">nenhuma rede no ar</i></div></div> */
/* só a moldura, e nada mais: cor, tamanho de ícone, peso do rótulo e hover já vêm de .soc, que é
 * a mesma regra que pinta o cabeçalho do site. Repetir qualquer um deles aqui seria criar a
 * segunda verdade que a prévia existe justamente para não ter */
.tx-previa .soc{background:var(--fundo);border-radius:7px;padding:11px 12px;flex-wrap:wrap;min-height:44px}
/* a frase do vazio é a mesma informação do aviso ouro que já existe acima do bloco, dita no lugar
 * onde a pessoa está olhando; por isso é apoio discreto e não um segundo alarme */
.soc-nada{font-style:normal;font-size:.76rem;color:var(--mut)}
.tx-previa .soc:has(a:not([hidden])) .soc-nada{display:none}

/* ---------------------------------------------------------------------------------------------
 *  4 · Contagem de palavras no pé do campo rico · SAIU DA FOLHA
 *
 *  A faixa .ed-conta era a última linha dentro da moldura do editor, com "142 palavras · cerca de
 *  1 minuto de leitura". O editor é montado por script (.ed, .ed-bar e .ed-area nascem em
 *  document.createElement), e nenhum deles cria a faixa: o nome .ed-conta não existe fora desta
 *  folha. Enquanto o contador não for escrito, a regra é só uma faixa que ninguém desenha. */

/* ---------------------------------------------------------------------------------------------
 *  5 · Prévia com fonte ampliada e com alto contraste
 *
 *  O site tem A mais, A menos e alto contraste na régua de acessibilidade, e a página inicial é a
 *  que mais tem elemento posicionado. Não havia como conferir no painel se ela aguenta zoom de
 *  200 por cento, que é critério objetivo da WCAG e é o primeiro que fiscalização de portal
 *  público cobra. A prévia é do mesmo domínio, então o painel alcança o documento de dentro do
 *  quadro e liga lá o que a régua do site liga: o tamanho no elemento raiz e a classe .a-cor-alto,
 *  que já moram nesta folha e são exatamente as que o cidadão recebe.
 *
 *  Estes dois botões são interruptores, não escolha entre opções como a largura: ficam num grupo
 *  próprio, separado por um filete, e o estado vive em aria-pressed, que é o que o leitor de tela
 *  anuncia. O ponto branco na frente do rótulo é o reforço de forma, o mesmo de .per-op a.on: o
 *  estado ligado não pode depender só da cor de fundo.
 *
 *  A regra vale para os dois grupos porque a barra tem duas telas com prévia e uma delas pode
 *  hospedar os interruptores dentro do próprio .mp-larg.
 *
 *  Marcação esperada: <span class="mp-sim"><button type="button" aria-pressed="false">Fonte 200%
 *  </button><button type="button" aria-pressed="false">Alto contraste</button></span>, ao lado do
 *  .mp-larg que já existe. */
.mp-sim{display:flex;gap:3px;padding-left:10px;border-left:1px solid var(--linha)}
.mp-sim button{background:var(--fundo);color:var(--mut);border:1px solid var(--linha);border-radius:7px;
  padding:4px 10px;font-size:.72rem;font-weight:600}
/* o :not é o que impede o hover de apagar o estado ligado: sem ele, passar o mouse por cima do
 * botão escolhido o devolvia ao fundo branco e a barra dizia que nada estava selecionado.
 * A largura escolhida usa .on, herdada da tela antiga; o interruptor usa aria-pressed */
.mp-sim button:not([aria-pressed="true"]):hover,
.mp-larg button:not(.on):not([aria-pressed="true"]):hover{border-color:var(--marca);color:var(--marca);background:var(--fundo)}
.mp-larg button[aria-pressed="true"],.mp-sim button[aria-pressed="true"]{background:var(--marca);
  border-color:var(--marca);color:var(--fundo)}
.mp-larg button[aria-pressed="true"]:hover,.mp-sim button[aria-pressed="true"]:hover{background:var(--marca-forte);
  border-color:var(--marca-forte);color:var(--fundo)}
.mp-larg button[aria-pressed="true"]::before,.mp-sim button[aria-pressed="true"]::before{content:"";
  display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--fundo);
  margin-right:6px;vertical-align:.12em}
/* em coluna estreita a barra já quebra em duas linhas; o filete separando os grupos vira uma linha
 * pendurada no começo da linha de baixo, então ele sai e a separação fica no espaço */
@media (max-width:560px){.mp-sim{padding-left:0;border-left:0}}

/* =============================================================================================
 *  ONDA 4 · bloco novo no fim da folha, de propósito
 *
 *  Mesma disciplina das anteriores: nenhuma linha acima foi editada por causa deste bloco. O que
 *  ele faz é ATENDER marcação que já está no ar · e não anunciar marcação que alguém talvez venha
 *  a escrever, que foi o defeito que esvaziou meia folha nesta mesma passada.
 * ========================================================================================== */

/* ---------------------------------------------------------------------------------------------
 *  1 · A LINHA DA TABELA VIRA CARTÃO NO CELULAR, e a coluna Ações volta para o campo de visão
 *
 *  O painel carimba o rótulo da coluna em CADA célula, em data-rot, desde que a tabela genérica
 *  existe · na medição desta entrega são mais de duas mil células, em 24 telas do painel, contadas
 *  no HTML que ele emite. O rótulo sai do mesmo array que monta o cabeçalho, justamente para
 *  módulo novo nascer com a linha certa. E a folha nunca usou nenhum deles: não havia um só
 *  attr(data-rot) aqui dentro.
 *
 *  O que isso custava está escrito no pedido de quem usa: "dar pra ve tudo sem ter q fica rolando
 *  pra lateral". A tabela do painel tem largura mínima de 640px e rola dentro de .tw; no telefone
 *  a última coluna é Ações, então editar, publicar e tirar do ar ficavam fora da tela, atrás de um
 *  arrasto horizontal que ninguém adivinha. Publicar do celular era, na prática, impossível.
 *
 *  COMO FICA: abaixo de 760px cada linha vira um cartão e cada célula vira uma dupla "rótulo ·
 *  valor", com o rótulo saindo de data-rot. Não há rolagem lateral, e Ações é a última dupla do
 *  cartão, visível como todas as outras.
 *
 *  A CERCA É :has(td[data-rot]), e ela não é enfeite. Só a tabela genérica dos módulos carimba o
 *  rótulo; a fila de protocolos, o histórico, os papéis e as tabelas do site NÃO carimbam, e
 *  virar cartão sem rótulo produziria uma pilha de valores sem dizer o que é cada um · pior do
 *  que a rolagem que se está tirando. Navegador sem :has simplesmente não entra na regra e
 *  continua com a tabela rolando, que é o comportamento de hoje.
 *
 *  O QUE SE PERDE, dito na cara: mudar o display de <tr> e <td> tira do navegador a leitura de
 *  "tabela, linha 3 de 20, coluna Situação". A troca é consciente e só vale porque o rótulo passa
 *  a viajar DENTRO da célula, em texto ('Situação: publicado'), que é o que o cabeçalho fazia · e
 *  o conteúdo de ::before entra na árvore de acessibilidade dos três navegadores. A legenda da
 *  tabela (<caption>), que diz quantos registros são e por qual coluna estão ordenados, continua
 *  inteira, e o cabeçalho não é apagado com display:none: vai para o estado de leitor de tela,
 *  como .sr faz no resto da folha. */
@media (max-width:760px){
  /* sem largura mínima não há o que rolar, e a moldura para de ter barra */
  .tw:has(td[data-rot]){overflow-x:visible}
  .tw:has(td[data-rot]) table{min-width:0}
  /* o cabeçalho some da vista e fica para quem ouve · display:none o apagaria também de lá */
  .tw:has(td[data-rot]) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tw:has(td[data-rot]) tr{display:block;border-bottom:2px solid var(--linha);padding:4px 0 7px}
  .tw:has(td[data-rot]) tbody tr:last-child{border-bottom:0}
  /* rótulo à esquerda, valor à direita: a coluna do rótulo é curta e cede antes do valor, porque
   * é o valor que a pessoa veio ler */
  .tw:has(td[data-rot]) td{display:grid;grid-template-columns:minmax(88px,34%) 1fr;gap:2px 12px;
    align-items:baseline;border-bottom:0;padding:5px 13px}
  /* o rótulo só nasce onde ele existe: em célula sem data-rot isto renderia uma caixa vazia */
  .tw:has(td[data-rot]) td[data-rot]::before{content:attr(data-rot);font-size:.68rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;color:var(--mut);line-height:1.4}
  /* célula sem rótulo (a linha de "nenhum registro", que é um colspan) ocupa o cartão inteiro */
  .tw:has(td[data-rot]) td:not([data-rot]){display:block}
  /* as ações são a razão de o cartão existir: elas quebram em duas linhas em vez de esticar a
   * célula, e o rótulo de cada botão VOLTA a aparecer · a regra que o esconde abaixo de 1000px
   * existe para caber numa coluna estreita de tabela, e aqui não há mais coluna nenhuma */
  .tw:has(td[data-rot]) td.col-acoes{white-space:normal}
  .tw:has(td[data-rot]) .acoes{display:flex;flex-wrap:wrap;gap:5px}
  .tw:has(td[data-rot]) .ac span{display:inline}
}

/* ---------------------------------------------------------------------------------------------
 *  2 · O NÍVEL DA ASSINATURA GANHA COR PRÓPRIA, em vez de emprestar a da situação do protocolo
 *
 *  A pílula do nível saía com duas classes: o nome do nível (n-simples, n-avancada, n-qualificada)
 *  e uma classe de apoio que era situação de PROTOCOLO (s-encerrado, s-em_analise, s-respondido),
 *  porque as três primeiras nunca existiram nesta folha e sem a segunda a pílula nasceria sem
 *  fundo. Na mesma tabela, a coluna Nível e a coluna Conferência falavam a mesma língua visual sem
 *  ter relação nenhuma, e mexer no azul de "em análise" repintava "assinatura avançada" · defeito
 *  que ninguém rastreia, porque a causa está em outra tela.
 *
 *  Agora o nível tem as três regras dele. A ESCADA É DE FORÇA, e a cor acompanha: simples no cinza
 *  de apoio (--mut sobre --apoio dá 5,35:1), avançada no azul do brasão e qualificada no verde,
 *  que é o nível com fé pública. Nenhum vermelho: assinatura simples não é perigo, é a escolha
 *  certa para a maior parte dos documentos.
 *
 *  Os tons são exatamente os que o painel usa hoje no atributo style da pílula · igualdade
 *  proposital, para o dia em que ele largar o estilo em linha a tela não mudar um pixel. Enquanto
 *  o estilo em linha existir, é ele que pinta (atributo ganha de folha), e estas regras esperam
 *  em silêncio. O que elas já fazem é tirar da folha a dependência entre nível e protocolo. */
.n-simples{background:var(--apoio);color:var(--mut)}
.n-avancada{background:var(--i-azul-nevoa);color:var(--i-azul-forte)}
.n-qualificada{background:var(--i-verde-nevoa);color:var(--i-verde-tx)}

/* ---------------------------------------------------------------------------------------------
 *  3 · A coluna do "Fique por dentro" que a folha não conhecia
 *
 *  A home passou a envolver cada metade do bloco num <div class="fpd-col">, e a folha não tinha
 *  uma linha sobre ele: as duas metades viraram itens da grade sem a guarda que todo item de grade
 *  precisa. Sem min-width:0 o item nunca encolhe abaixo do conteúdo dele, então uma manchete longa
 *  sem espaço (nome de arquivo, endereço colado) empurra a coluna para fora da faixa e desalinha o
 *  bloco inteiro · é a mesma guarda que .g-duas>div já tem, e por isso não há visual novo aqui. */
.fpd-col{min-width:0}

/* =============================================================================================
 *  ONDA 5 · a aba E-mails, e em especial a FILA DE ENVIO
 *
 *  Bloco novo no fim da folha, pela mesma disciplina das ondas anteriores: nenhuma linha acima foi
 *  editada por causa dele, porque .filtro, .tw, .col-data e .col-mail são de outras vinte telas e
 *  reescrever regra compartilhada para consertar uma tela é como se quebram as outras dezenove.
 *
 *  O QUE ESTAVA ERRADO estava no HTML e já foi corrigido lá: a fila era o terceiro filho da grade
 *  .tela-2col e caía na coluna de 340px desenhada para o formulário de SMTP. O que sobra para a
 *  folha é dar à seção a forma que ela nunca teve: uma barra de filtros que é uma linha só, e uma
 *  tabela que recolhe a coluna secundária em vez de empurrar o assunto para fora da tela.
 * ========================================================================================== */

/* ---------------------------------------------------------------------------------------------
 *  1 · A SEÇÃO DA FILA
 *
 *  min-width:0 é a guarda de sempre: a seção é filha de um main em grade, e sem ela a tabela
 *  interna (que tem largura mínima de 640px) empurraria a seção para fora da faixa em vez de
 *  rolar dentro da própria moldura .tw, que é onde a rolagem deve ficar. */
.fila-envio{min-width:0}
.fila-envio>.tw{margin-top:2px}

/* ---------------------------------------------------------------------------------------------
 *  2 · A BARRA DE FILTROS EM UMA LINHA COERENTE
 *
 *  align-items:end alinha o campo de busca (sem rótulo visível) com os dois campos de data (que
 *  têm rótulo ao lado) pela BASE, e não pelo topo: sem isso a busca flutua acima das datas.
 *
 *  A busca é o único item que cresce, porque é o único cujo conteúdo é livre; o texto de exemplo
 *  "Destinatário, assunto ou motivo" pede uns 260px para caber inteiro, e é esse o piso. As datas
 *  e o botão têm tamanho fixo e não disputam espaço com ela.
 *
 *  flex-wrap continua ligado, herdado de .filtro: em janela estreita a barra ainda embrulha, mas
 *  agora ela embrulha em DOIS pedaços inteiros (a busca, e o grupo datas-mais-botão), e não em
 *  cinco cacos com o Procurar sozinho numa terceira linha. */
.filtro-fila{align-items:end;gap:10px}
.filtro-fila>label{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--mut)}
.filtro-fila .f-busca{flex:1 1 260px;min-width:260px}
.filtro-fila .f-busca input[type=search]{width:100%;min-width:260px}
/* o grupo das datas nunca se parte no meio: "De" numa linha e "Até" na seguinte é o desalinho
 * que se veio consertar, e é por isso que ele é um flex próprio com wrap desligado ao crescer */
.filtro-fila .f-datas{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.filtro-fila .f-datas>label{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--mut)}
.filtro-fila .f-datas input[type=date]{min-width:150px}
/* botão e link de limpar ficam da mesma altura dos campos, senão a linha fica dentada */
.filtro-fila button,.filtro-fila .bt-neutro{white-space:nowrap;align-self:end}

/* ---------------------------------------------------------------------------------------------
 *  3 · A TABELA QUE NÃO CORTA COLUNA
 *
 *  table-layout:fixed é o coração desta parte, e não enfeite. Na medida automática, a largura de
 *  cada coluna é decidida pelo CONTEÚDO: um endereço de servidor público com sessenta caracteres
 *  e um assunto com oitenta disputavam a mesma faixa, cada um puxando para o seu lado, e a última
 *  coluna era empurrada para fora da moldura. Foi assim que o Assunto virou "Recuper..." atrás de
 *  uma rolagem lateral. Na medida fixa quem manda é a primeira linha, aqui embaixo, e nenhuma
 *  célula pode mais esticar a tabela · o texto que não couber é cortado com reticências, e o
 *  inteiro continua no title que o painel carimba em cada célula.
 *
 *  AS TRÊS PRIMEIRAS LARGURAS SÃO O QUE O CONTEÚDO PEDE, MEDIDO NO NAVEGADOR, e a primeira conta
 *  saiu errada: com 120 / 296 / 250 a fila ainda cortava DUAS colunas numa janela de 1440px, que é
 *  a do usuário. A régua tirada da tela (scrollWidth contra clientWidth de cada célula, e a frase
 *  mais longa de cada coluna medida na fonte dela) foi esta:
 *
 *    Situação  "pendente", mais o contador de tentativas                              ~ 96px
 *    Quando    "15/08/2026 02:48 · esperando na fila há 2 dia(s)"                       308px
 *    Para      "maria.aparecida.dos.santos.oliveira@servidor.ibirite.mg.gov.br"         385px
 *    Assunto   "Painel de acesso · resposta ao protocolo 2026-000481 da Ouvidoria"      452px
 *
 *  Somam 1241px, e a moldura da tabela mede a janela menos 384px (a barra lateral do painel mais
 *  os respiros), quer dizer, 1056px numa janela de 1440. As quatro NÃO cabem, e fingir que cabem é
 *  o que produzia "última tentativa há 5 hora" e "Painel de acesso · resp...".
 *
 *  Então a decisão é de PRIORIDADE, e não de aperto igual para todos: Situação e Quando recebem
 *  exatamente o que a frase deles pede (110 e 310), o Assunto fica com TODO o resto porque é a
 *  coluna pela qual a pessoa reconhece a mensagem que veio procurar, e o Para, que é o secundário,
 *  se recolhe e reaparece por extenso embaixo do assunto (bloco 4, aqui abaixo). Com o Para
 *  recolhido sobram 636px para o Assunto em 1440, e nada é cortado nessa janela.
 *
 *  A MEDIDA VAI NO <col>, E NÃO NO <th>, E ISSO TAMBÉM SAIU DE UMA MEDIÇÃO QUE DESMENTIU A PRIMEIRA
 *  ESCRITA. Com as larguras no cabeçalho, esconder a coluna Para (display:none no th e no td) NÃO
 *  desfazia a coluna: a tabela continua tendo quatro, porque a linha do motivo do erro tem
 *  colspan="4" e é ela quem define o total. A coluna escondida virava uma FAIXA MORTA que ficava
 *  com o espaço sobrando · na régua, 318px de nada à direita, com o Assunto espremido nos mesmos
 *  318px ao lado dela. A largura pertence à COLUNA, então é no <col> que ela tem de ser escrita:
 *  aí, ao recolher, a largura muda de dono sem que nenhuma célula precise ser medida.
 *
 *  O quarto <col> fica SEM largura de propósito. Na medida fixa, coluna sem largura declarada é a
 *  que recebe o que sobrou, e é exatamente esse o papel do Assunto. */
.fila-envio table{table-layout:fixed}
.fila-envio col:nth-child(1){width:110px}
/* 336px, e o numero saiu de medicao, nao de gosto: em 1440px a linha mais longa desta coluna
 * ("16/08/2026 21:48 · esperando na fila ha N dia(s)") pede 317px, e com 310 ela era cortada com
 * reticencias · o unico texto que ainda cortava depois do ajuste da aba. A folga de 19px cobre a
 * idade de dois digitos, que aparece quando a fila fica parada mais de nove dias, exatamente a
 * situacao em que alguem precisa ler a frase inteira. Vale a mesma regra da coluna do endereco,
 * logo abaixo: ou cabe por completo, ou nao fica. */
.fila-envio col:nth-child(2){width:336px}
/* 390px é o endereço mais longo da fila INTEIRO, e não um pedaço dele. A regra desta coluna é
 * simples de dizer e por isso fácil de manter: ou ela cabe por completo, ou ela não fica · abaixo
 * de 1800px de janela ela se recolhe e o endereço aparece por extenso na linha de baixo. Coluna de
 * e-mail cortada em "ouvidoria.geral.secre..." não identifica ninguém, que é a razão de existir. */
.fila-envio col:nth-child(3){width:390px}
/* .col-situacao é UMA linha, e a pílula dentro dela não quebra: era ela que, junto com a idade em
 * bloco, fazia a linha da fila gastar três alturas para dizer uma frase */
.fila-envio .col-situacao{white-space:nowrap;overflow:hidden}
.fila-envio .col-situacao .pil{white-space:nowrap}
/* a data e a idade numa linha só · nowrap vem de .col-data, o corte é a rede de segurança */
.fila-envio .col-data{overflow:hidden;text-overflow:ellipsis}
.fila-envio .col-data .total{font-size:.76rem}
.fila-envio .col-mail{overflow:hidden;text-overflow:ellipsis}
/* o link do assunto é bloco para o corte agir sobre ele, e não sobre a célula: assim as
 * reticências ficam DENTRO do alvo de clique, e o eco do destinatário desce para a linha seguinte.
 *
 * position:relative NÃO é enfeite, e custou uma medição para aparecer. Dentro do link há um
 * <span class="sr"> com o " · Ver o conteúdo desta mensagem" que só o leitor de tela lê, e .sr é
 * position:absolute SEM deslocamento: ele fica na posição estática, quer dizer, no fim da linha.
 * Com o link em nowrap, esse fim de linha passou a cair muito além da coluna, e como o link era
 * position:static ele não era bloco de contenção de ninguém · o span escapava do overflow:hidden
 * e empurrava a PÁGINA INTEIRA 144px para o lado, criando uma rolagem horizontal no corpo que não
 * existia antes. Com relative, o link vira o bloco de contenção, o span cai dentro dele e o
 * overflow:hidden o corta. O texto continua na árvore de acessibilidade, porque recorte não
 * apaga conteúdo · é o mesmo princípio do clip do próprio .sr. */
.fila-envio .col-assunto>a{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a linha do motivo do erro e a de "nenhuma mensagem" ocupam a faixa toda e não se cortam: é
 * texto corrido, e frase de servidor de e-mail cortada em reticências não conserta envio nenhum */
.fila-envio td[colspan]{overflow:visible;text-overflow:clip;white-space:normal}

/* ---------------------------------------------------------------------------------------------
 *  4 · A COLUNA SECUNDÁRIA SE RECOLHE, E DIZ O NOME DO QUE FICOU DE FORA
 *
 *  O DESTINATÁRIO NÃO SOME: ELE MUDA DE LUGAR. Onde as quatro colunas cabem, .rec-dentro fica
 *  fora do desenho E fora da árvore de acessibilidade (display:none tira dos dois), então o
 *  endereço é lido uma vez só, na coluna dele. Onde não cabem, a coluna Para sai inteira,
 *  cabeçalho junto, e o mesmo endereço reaparece dentro da célula do assunto com o rótulo "Para"
 *  ao lado · de novo, lido uma vez só, e agora por extenso, porque a linha de baixo é larga.
 *
 *  1800px É O PONTO, E ELE VEIO DA RÉGUA DO BLOCO 3, não de palpite. A moldura da tabela mede a
 *  janela menos 384px, e as quatro colunas só param de se atropelar quando cada uma tem a frase
 *  mais longa dela INTEIRA:
 *
 *    110 (Situação) + 310 (Quando) + 390 (Para) = 810px carimbados,
 *    e o Assunto fica com o resto · em 1800 de janela isso dá 606px, medidos.
 *
 *  606 e não 452, que é o assunto mais longo desta base, porque assunto de e-mail cresce com o
 *  uso: a folga é o que impede que a primeira mensagem com um título comprido devolva a tela ao
 *  estado de que o usuário reclamou.
 *
 *  O ponto anterior era 1000px, e foi medido errado: em 1440px, que é a janela do usuário, a fila
 *  ficava com as quatro colunas de pé e DUAS delas cortadas. Recolher cedo demais não custa nada,
 *  porque o que se recolhe reaparece por extenso; recolher tarde demais custa a coluna que a
 *  pessoa abriu a tela para ler.
 *
 *  A troca é consciente: quem estava ordenando por Para perde o cabeçalho ao estreitar a janela.
 *  Perder o cabeçalho de ordenação de uma coluna é muito menos grave do que perder a coluna do
 *  ASSUNTO atrás de uma rolagem lateral que ninguém adivinha, que era o estado anterior. */
.rec-dentro{display:none}
@media (max-width:1799px){
  .fila-envio .col-recolhe{display:none}
  /* A INVERSÃO DE QUEM FICA COM O RESTO, E ELA NÃO É ONDE A INTUIÇÃO DIZ QUE É.
   *
   * display:none em célula de tabela não esconde a coluna: ele TIRA a célula da linha. Com a do
   * Para fora, sobram três células, e elas se encaixam nas colunas 1, 2 e 3 · o Assunto escorrega
   * uma casa para a esquerda e cai na coluna que foi medida para o endereço. A quarta coluna
   * continua existindo, porque a linha do motivo do erro tem colspan="4" e é ela quem define o
   * total, e fica sem célula nenhuma: é a FAIXA MORTA. Na régua, o Assunto com 0px e 636px de
   * nada à direita dele · zerar a terceira coluna, que parece o certo, produz exatamente isso.
   *
   * Então quem se zera é a ÚLTIMA, e quem passa a receber o resto é a terceira. */
  .fila-envio col:nth-child(3){width:auto}
  .fila-envio col:nth-child(4){width:0}
  .fila-envio .rec-dentro{display:block;font-size:.76rem;color:var(--mut);margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fila-envio .rec-dentro b{font-weight:700;color:var(--mut)}
}
/* MAIS ABAIXO AINDA, A COLUNA "QUANDO" DEVOLVE ESPAÇO AO ASSUNTO, e isto também foi medido: com
 * os 310px que ela tem na tela larga, o Assunto sobrava com 188px numa janela de 900px, quer
 * dizer, a coluna que a pessoa veio ler virava a mais estreita da tabela. Encolhendo o Quando e
 * deixando a frase dele QUEBRAR em duas linhas, o Assunto passa dos 280px · a linha já tem duas
 * alturas nesta faixa, porque é onde o destinatário reaparece embaixo do assunto, então a segunda
 * linha do Quando não custa altura nenhuma. */
@media (max-width:1000px){
  .fila-envio col:nth-child(2){width:190px}
  .fila-envio .col-data{white-space:normal;overflow:visible;text-overflow:clip}
  /* E AQUI O CORTE COM RETICÊNCIAS DEIXA DE VALER A PENA, e é a única faixa em que ele deixa.
   * Nas larguras de cima o assunto cabe inteiro numa linha e o corte nunca chega a acontecer;
   * aqui embaixo não cabe de jeito nenhum, e a escolha passa a ser entre "Painel de acesso ·
   * resp..." e duas linhas de texto lido por completo. A linha já tem duas alturas nesta faixa,
   * porque é onde o destinatário reaparece embaixo do assunto, então quebrar não desalinha nada.
   * overflow-wrap:anywhere é para o endereço, que é uma palavra só de sessenta caracteres e, sem
   * ele, estouraria a célula em vez de quebrar. */
  .fila-envio .col-assunto>a,.fila-envio .rec-dentro{
    white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
}
/* IMPRESSO NÃO TEM JANELA ESTREITA NEM ROLAGEM, e por isso desfaz tudo o que existe por causa
 * delas: a coluna Para volta (e o eco dentro do assunto sai, senão o endereço sairia duas vezes
 * no papel), a medida da tabela volta a ser automática e nada é cortado com reticências · uma
 * folha impressa com "Recuper..." não serve de comprovante para ninguém. */
@media print{
  .fila-envio .col-recolhe{display:table-cell}
  .fila-envio .rec-dentro{display:none}
  .fila-envio table{table-layout:auto}
  .fila-envio col{width:auto}
  .fila-envio .col-situacao,.fila-envio .col-data,.fila-envio .col-mail{overflow:visible;text-overflow:clip}
  .fila-envio .col-assunto>a{white-space:normal;overflow:visible;text-overflow:clip}
  .fila-envio .col-data,.fila-envio .col-mail{white-space:normal}
}

/* ---------------------------------------------------------------------------------------------
 *  5 · UM GRÁFICO SOZINHO NÃO É UM TERÇO DE TELA
 *
 *  .grafs é uma grade de três colunas acima de 1400px, e isso é o certo quando há três quadros.
 *  Quando há UM só (a saída por dia da aba E-mails), o quadro ficava num terço da faixa, com dois
 *  terços de branco ao lado e a barra de cada dia encolhida ao ponto de dois dias diferentes
 *  parecerem iguais · que é o contrário do que um gráfico serve para fazer.
 *
 *  É modificador de classe, e por isso vence a regra de 1400px por especificidade (0,2,0 contra
 *  0,1,0), sem que nenhuma linha daquele bloco precise ser tocada e sem mexer nos outros .grafs
 *  do portal, que têm dois ou três quadros e continuam como estão. */
.grafs.uma{grid-template-columns:1fr}

/* ---------------------------------------------------------------------------------------------
 *  6 · A LINHA DAS AÇÕES DA ABA E-MAILS
 *
 *  Os três formulários da barra ("Processar a fila agora", "Reenviar as que deram erro" e o teste
 *  com o campo de destino) ficam lado a lado e podem embrulhar. O campo de e-mail de teste tem
 *  min-width de 210px vindo de .linha-acoes e, embrulhando, encostava no botão da linha de cima.
 *  align-items:center já existe lá; o que faltava era respiro vertical quando a linha quebra. */
.p-corpo .linha-acoes{row-gap:10px}

/* ---------------------------------------------------------------------------------------------
 *  7 · O QUADRO DO SMTP ESTOURANDO A TELA NO CELULAR
 *
 *  Varrendo a aba inteira atrás de campo estourando, sobrou este, e ele não é da fila: em 390px de
 *  janela o quadro "Servidor de envio" media 380px numa faixa de 356px e empurrava a PÁGINA para o
 *  lado, com rolagem horizontal no corpo · o formulário inteiro passava por baixo da borda direita.
 *  A causa é o piso de .tela-2col, que é `minmax(380px,1fr)`: em grade, o piso do minmax não cede,
 *  e abaixo de 380px de faixa a coluna estoura em vez de encolher.
 *
 *  A correção é uma faixa de janela só, e por isso não reescreve a regra de .tela-2col, que outras
 *  telas usam: acima de 520px o auto-fit já entrega uma coluna sozinha (duas de 380 mais o vão
 *  pedem 774px), então declarar 1fr aqui embaixo não muda desenho nenhum · só desfaz o piso
 *  justamente onde ele não cabe. E fica fora do alcance da regra de 1400px, que é de outra faixa. */
@media (max-width:520px){
  .tela-2col{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------------------------
 *  8 · O CABEÇALHO QUE ORDENA ESTAVA EMPURRANDO A PÁGINA PARA O LADO
 *
 *  Mesma armadilha do link do assunto (bloco 3), no outro lugar em que ela mora, e este alcança o
 *  painel inteiro. Todo cabeçalho ordenável carrega um <span class="sr"> dizendo o que o próximo
 *  clique faz. .sr é position:absolute SEM deslocamento, então ele fica na posição estática · e,
 *  como o <a> do cabeçalho é static, quem lhe serve de bloco de contenção é a página, e não a
 *  moldura .tw que rola de lado. Resultado medido em 380px de janela: a página inteira com 427px
 *  de largura e uma rolagem horizontal no corpo que nada explicava, porque nenhum bloco visível
 *  estourava · era um texto de leitor de tela, invisível, ancorado 47px fora da tela.
 *
 *  position:relative no <a> resolve sem mexer em pixel nenhum: o elemento não sai do lugar (não há
 *  deslocamento declarado), ele só passa a ser o bloco de contenção do próprio rótulo falado, que
 *  volta para dentro da moldura rolante. Vale para .tw inteiro, e não só para a fila, porque a
 *  ordenação por cabeçalho é a mesma função (p_th_ord) em toda tabela do painel. */
.tw th a{position:relative}

/* ---------------------------------------------------------------------------------------------
 *  9 · A ÁRVORE DO MENU DO SITE, EM QUE NÃO DAVA PARA VER A DIVISÃO
 *
 *  A hierarquia inteira era contada por 22px de recuo, e mais nada. "Município" com os seus dez
 *  filhos, "Gestores" dentro dele e mais dois dentro de "Gestores" saíam como treze linhas
 *  IGUAIS, uma embaixo da outra: quem administra não via onde um ramo terminava e o outro
 *  começava, nem lia o grupo como cabeçalho do que vinha abaixo · lia como mais uma linha.
 *
 *  Quatro coisas resolvem, e nenhuma delas encosta na marcação da linha:
 *    · a linha-guia vertical, que liga cada filho ao pai e some quando o ramo acaba;
 *    · o recuo maior por nível, com o cotovelo que entra da guia até a pega de arrastar;
 *    · o descanso entre ramos de primeiro nível, com um fio separando um do outro;
 *    · o grupo pintado como cabeçalho, com a etiqueta GRUPO em azul cheio.
 *
 *  TUDO É PSEUDO-ELEMENTO POSICIONADO, e isso não é capricho de desenho: .mi é uma grade de
 *  colunas contadas (pega, nome, tipo, endereço, ordem, "no ar", editar), e um filho a mais no
 *  fluxo empurraria ordem, situação e editar para fora do alinhamento em todas as linhas de
 *  baixo · é a mesma armadilha que o comentário do bloco 2 desta folha já descreve. Elemento
 *  absoluto não é item de grade e não entra nessa conta.
 *
 *  A CERCA .mi-lista É OBRIGATÓRIA: a tela de blocos da página inicial reaproveita .mi, é toda
 *  de n0 e mora fora desta caixa. Sem a cerca, o separador de ramo apareceria entre cada bloco
 *  daquela tela, e o recuo novo mexeria numa lista que não tem hierarquia nenhuma.
 *
 *  As classes n0, n1 e n2 continuam sendo o único lugar que guarda o nível, porque é o que o
 *  script de arrastar reescreve a cada movimento (reindenta() troca a classe e o aria-level):
 *  todo o desenho daqui pendura nelas, então ele acompanha o arrasto e o Alt com as setas sem
 *  precisar de uma segunda regra no script. */
.mi-lista .mi{position:relative}
/* recuo maior: 22px não separavam nada, e é sobre eles que a guia é desenhada */
.mi-lista .mi.n1{margin-left:28px}
.mi-lista .mi.n2{margin-left:56px}
/* A GUIA CORRE DE TOPO A BASE DA LINHA, e é isso que a faz virar um traço contínuo: as linhas
 * são irmãs coladas, sem vão entre elas, então os pedaços se emendam sozinhos. Ela nasce e morre
 * com o ramo, porque só existe em n1 e n2 · a primeira linha de primeiro nível depois do último
 * filho já não desenha nada, e o ramo se fecha ali. */
.mi-lista .mi.n1::before,.mi-lista .mi.n2::before{content:"";position:absolute;top:0;bottom:0;
  left:-16px;width:0;border-left:2px solid var(--i-azul-borda);pointer-events:none}
/* o neto precisa das DUAS guias: a do próprio pai e a do avô, que continua correndo mais à
 * esquerda enquanto houver ramo. A de dentro é ::before e a de fora é ::after, e n0 nunca é n2,
 * então o separador de ramo lá embaixo pode usar o mesmo ::after sem disputa */
.mi-lista .mi.n2::after{content:"";position:absolute;top:0;bottom:0;left:-44px;width:0;
  border-left:2px solid var(--i-azul-borda);pointer-events:none}
/* o cotovelo entra da guia até a pega de arrastar, que é a primeira célula da grade. Ele mora na
 * pega, e não na linha, porque a linha já gastou os dois pseudo-elementos dela com as guias */
.mi-lista .mi.n1>.mi-pega,.mi-lista .mi.n2>.mi-pega{position:relative}
.mi-lista .mi.n1>.mi-pega::before,.mi-lista .mi.n2>.mi-pega::before{content:"";position:absolute;
  left:-26px;top:50%;width:20px;border-top:2px solid var(--i-azul-borda);pointer-events:none}
/* DESCANSO ENTRE RAMOS DE PRIMEIRO NÍVEL: sem ele, o último neto de "Município" encosta em
 * "Transparência" e os dois ramos viram um só borrão. O fio vai em pseudo-elemento, e não na
 * borda da linha, porque .mi usa a borda para o realce de foco e de arrasto */
.mi-lista .mi.n0:not(:first-child){margin-top:20px}
.mi-lista .mi.n0:not(:first-child)::after{content:"";position:absolute;left:0;right:0;top:-11px;
  border-top:1px solid var(--linha);pointer-events:none}
/* O GRUPO LIDO COMO CABEÇALHO, e não como mais uma linha. A cor de fundo é a névoa do azul do
 * brasão, e o realce continua existindo no hover pela borda, que muda de tom · pintar o fundo de
 * novo no hover apagaria a leitura de "isto aqui é um cabeçalho". */
.mi-lista .mi[data-tipo="grupo"]{background:var(--i-azul-nevoa);border-color:var(--i-azul-borda)}
.mi-lista .mi[data-tipo="grupo"]:hover{border-color:var(--i-azul-claro)}
.mi-lista .mi[data-tipo="grupo"] .mi-nome{font-size:.92rem;color:var(--i-azul-forte)}
.mi-lista .mi[data-tipo="grupo"] .mi-tipo{background:var(--i-azul);color:var(--fundo)}
/* O CAMINHO FINAL, EM LINHA PRÓPRIA ACIMA DO NOME: "Município › Gestores › Prefeito" é o trajeto
 * que o cidadão vai percorrer no site, e era a única leitura que a tela não dava.
 *
 * A LINHA PRÓPRIA É O QUE PRESERVA A GRADE. Ao lado do nome, o caminho obrigaria a alargar a
 * coluna do nome, e o que ela tomasse sairia do endereço resolvido, que divide a mesma faixa ·
 * a tela ganharia uma leitura e perderia outra. Assim a grade de colunas do bloco 2 continua
 * exatamente como está, e só a altura da linha aninhada cresce.
 *
 * Os dois são blocos com reticências PRÓPRIAS, e por isso o botão de recolher grupo mora dentro
 * de .mi-nome: solto entre os dois blocos ele viraria uma terceira linha sozinho. */
.mi-lista .mi b{display:block;min-width:0}
.mi-cam{display:block;font-weight:600;font-size:.66rem;color:var(--mut);letter-spacing:.01em;
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mi-cam i{font-style:normal;padding:0 3px}
.mi-nome{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "NOVO AQUI DENTRO" DEIXOU DE CAIR NA MARGEM. A linha do grupo tem um controle a mais que as
 * outras, e a grade tem sete colunas contadas: o oitavo filho já embrulhava para uma segunda
 * faixa, encostado na margem esquerda, debaixo da pega de arrastar · parecia um link solto no
 * meio da árvore, e agora que o grupo é um bloco pintado a folga ficava dentro dele. Aqui ele
 * passa a começar na coluna do nome, que é onde o olho já está. Só o SEGUNDO .mi-ed é atingido,
 * então a linha comum, que tem só "editar", não muda em nada. */
.mi-lista .mi .mi-ed+.mi-ed{grid-column:2 / -1;justify-self:start;margin-top:2px}
/* quantos itens o grupo reúne, na célula que estava reservada e vazia: é o que faz a linha do
 * grupo prometer alguma coisa em vez de só existir */
.mi-conta{color:var(--i-azul-forte);font-weight:600;font-variant-numeric:normal}
/* no celular a linha vira pilha de três colunas e o recuo tem de caber em 390px: as guias e o
 * cotovelo andam junto com o recuo menor, senão desenhariam no vazio */
@media (max-width:760px){
  .mi-lista .mi.n1{margin-left:18px}
  .mi-lista .mi.n2{margin-left:36px}
  .mi-lista .mi.n1::before,.mi-lista .mi.n2::before{left:-10px}
  .mi-lista .mi.n2::after{left:-28px}
  .mi-lista .mi.n1>.mi-pega::before,.mi-lista .mi.n2>.mi-pega::before{left:-20px;width:16px}
}

/* ---------------------------------------------------------------------------------------------
 *  Cobertura do edital · o que falta, e o que não vai para o papel
 *
 *  Duas regras, e as duas nasceram da mesma tela. Ela deixou de ser um placar só de acertos e
 *  passou a mostrar a outra metade (o que abre vazio, o que está preso no ambiente, o que depende
 *  de quem contrata), e essa metade precisa ser vista sem ser lida.
 *
 *  .placarzao .falta é o ouro do brasão, e NÃO o vermelho: aqui não há defeito do sistema, há
 *  trabalho por fazer e dependência de fora · é a mesma leitura da faixa de providências da Visão
 *  geral, e o vermelho da paleta fica reservado ao perigo de verdade. A classe só é escrita quando
 *  o número é maior que zero: alarme aceso sobre zero pendência ensina a pessoa a ignorar a cor.
 *
 *  .so-tela sai do papel. Esta folha vira anexo de defesa, e as colunas de ação ("Abrir o
 *  módulo", "Ver no site", "Curar") são só cliques · a regra de impressão que já existe esconde
 *  .ac desde sempre, então no papel elas viravam uma coluna EM BRANCO no meio do relatório, que
 *  se lê como defeito da tabela. O que a comissão precisa ler impresso é o número do item, a
 *  exigência, o módulo e a contagem, e esses ficam todos.
 *
 *  O bloco @media print é novo em vez de acrescentar um seletor ao que já existe lá em cima:
 *  aquela regra é lida por todas as telas do painel, e mexer nela para atender uma só é o tipo de
 *  edição que quebra tela que ninguém abriu hoje.
 * ------------------------------------------------------------------------------------------- */
.p-corpo .placarzao .falta{background:var(--i-ouro-nevoa);border-color:var(--i-ouro-borda)}
.p-corpo .placarzao .falta b{color:var(--i-ouro-tx)}
.p-corpo .placarzao .falta span{color:var(--i-ouro-tx)}
@media print{
  .so-tela{display:none}
  /* A BARRA LATERAL SAÍA, E O BURACO DELA FICAVA.
   *
   * Isto apareceu conferindo a Cobertura do edital no papel, que é a folha que vira anexo de
   * defesa. O corpo do painel é uma grade de duas colunas (body.painel, lá em cima: 256px para a
   * barra e o resto para o conteúdo), e a folha de impressão escondia .p-lat sem desfazer a
   * grade · a coluna de 256px continuava reservada, e o relatório inteiro saía espremido dentro
   * dela, com dois terços da página em branco à direita. Tabela de cinco colunas em 256 pixels é
   * folha ilegível, e o defeito valia para TODA tela do painel que alguém mandasse imprimir.
   *
   * Uma linha desfaz a grade e devolve a largura do papel ao conteúdo. Ela vem depois da regra
   * que esconde .p-lat, e não no lugar dela: a barra continua saindo do papel pelo mesmo motivo
   * de sempre (ninguém clica numa folha), e aqui só se recupera o espaço que ela deixou. */
  body.painel{display:block;padding:0}
}

/* ---------------------------------------------------------------------------------------------
 *  O PAPEL NÃO É UM CELULAR, e o navegador acha que é.
 *
 *  A folha de impressão é aplicada numa caixa de mais ou menos 741px de largura (papel Letter com
 *  margem padrão), e 741 é menor que 760 · então a regra de celular acima DISPARA na impressão. O
 *  resultado, medido mandando a Cobertura do edital para o papel de verdade, foram 23 páginas:
 *  toda tabela explodida em um cartão por linha, com o rótulo da coluna repetido em cada célula,
 *  e as páginas 2, 5, 14 e 16 saindo quase em branco. Esta é a folha que vira anexo de defesa.
 *
 *  Este bloco desfaz o cartão SÓ no papel. Ele mora no fim do arquivo de propósito: o bloco de
 *  impressão que existe lá em cima vem ANTES da regra de celular, e por isso perderia dela na
 *  ordem da cascata, que é exatamente o que estava acontecendo.
 *
 *  A especificidade também foi medida, não estimada: `.so-tela{display:none}` é 0,1,0 e perdia
 *  para `.tw:has(td[data-rot]) td{display:grid}`, que é 0,2,2 · a coluna de ação continuava sendo
 *  desenhada e imprimia o rótulo órfão ("ONDE RESOLVER", "PROVA AO VIVO") com o valor vazio ao
 *  lado. Aqui ela é declarada com o mesmo peso do seletor que a vencia. */
@media print{
  .tw:has(td[data-rot]){overflow-x:visible}
  .tw:has(td[data-rot]) table{min-width:0;table-layout:auto}
  /* o cabeçalho volta a ser cabeçalho, e se repete no alto de cada folha da tabela */
  .tw:has(td[data-rot]) thead{position:static;width:auto;height:auto;overflow:visible;
    clip:auto;display:table-header-group}
  .tw:has(td[data-rot]) tr{display:table-row;border-bottom:0;padding:0}
  .tw:has(td[data-rot]) td{display:table-cell;border-bottom:1px solid var(--linha);padding:5px 8px}
  /* o rótulo repetido em cada célula era a marca do cartão: no papel o cabeçalho já diz isso */
  .tw:has(td[data-rot]) td[data-rot]::before{content:none}
  .tw:has(td[data-rot]) td:not([data-rot]){display:table-cell}
  /* coluna que só serve para clicar sai do papel, agora com peso para valer */
  .tw:has(td[data-rot]) td.so-tela,.tw:has(td[data-rot]) th.so-tela{display:none}
  /* linha de tabela partida entre duas folhas não se confere */
  .tw:has(td[data-rot]) tr{break-inside:avoid}
}

/* ================================ WEBMAIL (wm-) =========================================
 *
 * A tela de quem tem endereço na Prefeitura. Ela é APLICAÇÃO, e não página: ocupa a janela
 * inteira, tem três painéis e não repete o menu nem o rodapé do site · quem está lendo
 * correspondência não navega no portal ao mesmo tempo.
 *
 * NENHUMA COR ESCRITA À MÃO. Tudo sai dos tokens do brasão, como o resto desta folha, e é isso
 * que faz a identidade visual do Município aparecer aqui de graça · foi a razão de desenhar as
 * telas em vez de vestir um webmail de prateleira, que traria a paleta dele junto.
 *
 * A GRADE DE TRÊS COLUNAS VIRA UMA SÓ no telefone, e a ordem muda: lendo uma mensagem, o que
 * importa é a mensagem, então a lista sai da tela em vez de virar uma faixa espremida. */
.wm{--wm-rail:236px;--wm-lista:min(400px,38vw)}
.wm-app{min-height:100vh;display:flex;flex-direction:column;background:var(--apoio)}

/* --- a barra de cima: marca, busca e conta --- */
.wm-topo{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--fundo);
  border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.wm-marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx);flex:none}
.wm-marca img{display:block;height:34px;width:auto}
.wm-marca b{font-size:.95rem;line-height:1.15;display:block}
.wm-marca span{font-size:.72rem;color:var(--mut);display:block}
.wm-busca{flex:1 1 260px;min-width:0;display:flex;gap:0;align-items:stretch;
  background:var(--apoio);border:1px solid var(--linha);border-radius:11px;overflow:hidden}
.wm-busca:focus-within{border-color:var(--marca);box-shadow:0 0 0 3px var(--i-azul-nevoa)}
.wm-busca input{flex:1;min-width:0;border:0;background:transparent;padding:9px 12px;font:inherit;font-size:.9rem;color:var(--tx)}
.wm-busca input:focus{outline:none}
.wm-busca button{border:0;background:transparent;color:var(--mut);padding:0 12px;cursor:pointer;display:grid;place-items:center}
.wm-busca button:hover{color:var(--marca)}
.wm-busca svg{width:17px;height:17px}
.wm-conta{display:flex;align-items:center;gap:9px;flex:none}
.wm-conta select{font:inherit;font-size:.84rem;padding:7px 10px;border:1px solid var(--linha);
  border-radius:9px;background:var(--fundo);color:var(--tx);max-width:230px}

/* --- o aviso de demonstração, que não pode ser confundido com uma mensagem --- */
.wm-demo{background:var(--i-ouro-nevoa);color:var(--i-ouro-tx);border-bottom:1px solid var(--i-ouro-borda);
  padding:8px 16px;font-size:.82rem;font-weight:600;display:flex;gap:9px;align-items:flex-start}
.wm-demo svg{width:16px;height:16px;flex:none;margin-top:1px}

.wm-corpo{flex:1;display:grid;grid-template-columns:var(--wm-rail) 1fr;align-items:start;min-height:0}

/* --- a coluna das pastas --- */
.wm-rail{padding:14px 10px 24px;position:sticky;top:57px;align-self:start;max-height:calc(100vh - 57px);overflow:auto}
.wm-escrever{display:flex;align-items:center;gap:9px;width:100%;justify-content:center;
  background:var(--marca);color:var(--fundo);border:0;border-radius:12px;padding:12px 16px;
  font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;text-decoration:none;margin:0 0 14px;
  box-shadow:0 2px 8px rgba(var(--sombra),.14)}
.wm-escrever:hover{background:var(--marca-forte)}
.wm-escrever svg{width:17px;height:17px}
.wm-grupo{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--mut);padding:14px 12px 6px;margin:0}
.wm-past{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:0 99px 99px 0;
  color:var(--tx);text-decoration:none;font-size:.87rem;font-weight:500}
.wm-past:hover{background:var(--marca-claro)}
.wm-past[aria-current]{background:var(--i-azul-nevoa);color:var(--marca-forte);font-weight:700}
.wm-past svg{width:17px;height:17px;flex:none;color:var(--mut)}
.wm-past[aria-current] svg{color:var(--marca)}
.wm-past b{margin-left:auto;font-size:.76rem;font-variant-numeric:tabular-nums}
.wm-ponto{width:9px;height:9px;border-radius:99px;flex:none}

/* --- o limite de armazenamento, no pé da coluna --- */
.wm-arm{margin:16px 8px 0;padding:12px 12px 4px;border-top:1px solid var(--linha)}
.wm-arm-bar{height:6px;border-radius:99px;background:var(--linha);overflow:hidden;margin:0 0 7px}
.wm-arm-bar i{display:block;height:100%;border-radius:99px;transition:width .2s}
.wm-arm b{display:block;font-size:.76rem;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums}
.wm-arm details{margin:6px 0 0}
.wm-arm summary{font-size:.72rem;color:var(--mut);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px}
.wm-arm summary::-webkit-details-marker{display:none}
.wm-arm summary::before{content:"";width:0;height:0;border:4px solid transparent;border-left-color:currentColor;transition:transform .12s}
.wm-arm details[open] summary::before{transform:rotate(90deg) translateX(-1px)}
.wm-arm summary:hover{color:var(--marca)}
.wm-arm p{margin:7px 0 8px;font-size:.74rem;line-height:1.5;color:var(--mut)}

/* --- a lista --- */
.wm-painel{min-width:0;padding:0 14px 24px 4px;display:grid;gap:12px;
  grid-template-columns:minmax(0,1fr)}
.wm-painel.lendo{grid-template-columns:var(--wm-lista) minmax(0,1fr)}
/* LENDO, A LISTA VIRA ÍNDICE. Ela cai para 400px e com o avatar e o endereço dentro sobra
   espaço para "Vit…" no lugar do nome · truncar o nome do remetente é perder a única coisa que
   a lista precisa dizer nesse estado. Os dois saem, e o que fica é nome, assunto e hora. */
.wm-painel.lendo .wm-lin{grid-template-columns:auto auto minmax(0,1fr) auto;gap:9px;padding:9px 11px}
.wm-painel.lendo .wm-lin .wm-av{display:none}
.wm-painel.lendo .wm-de span{display:none}
/* SÓ AS AÇÕES SECUNDÁRIAS PERDEM O RÓTULO. A barra da leitura tinha oito botões e quebrava em
   três linhas; esconder o texto de TODOS resolveu a quebra e criou outro problema · uma fileira
   de ícones sem palavra nenhuma não se aprende, e "arquivar" e "lixeira" desenhados pequeno se
   confundem. Voltar, Responder e Encaminhar ficam com a palavra, que são os três gestos que a
   pessoa procura; o resto vira ícone com title, e o texto continua lá para quem ouve a tela. */
.wm-painel.lendo .wm-bt.wm-so-ico span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wm-painel.lendo .wm-bt.wm-so-ico{padding:6px 9px}
.wm-painel.lendo .wm-barra select{max-width:150px}
.wm-painel.lendo .wm-barra h1{font-size:.88rem}
.wm-cx{background:var(--fundo);border:1px solid var(--linha);border-radius:16px;overflow:hidden;min-width:0}
/* A BARRA NÃO É STICKY, e a tentativa custou uma tarde de tela quebrada.
 *
 * O cartão que a contém tem overflow:hidden (para as bordas arredondadas cortarem as linhas), e
 * overflow:hidden faz o cartão virar o CONTÊINER de rolagem do sticky. Com top:57px, a barra
 * passava a se posicionar 57px abaixo do topo do CARTÃO · e ficava por cima do assunto da
 * mensagem, que sumia embaixo dela sem nenhum aviso. O cartão não rola, então o sticky também
 * não entregava nada em troca. Quem gruda é a barra de cima da janela, que está fora de
 * qualquer overflow e por isso funciona. */
.wm-barra{display:flex;align-items:center;gap:6px;padding:9px 11px;border-bottom:1px solid var(--linha);
  flex-wrap:wrap;background:var(--fundo)}
.wm-barra h1{font-size:.95rem;margin:0 8px 0 2px;font-weight:700}
.wm-bt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linha);background:var(--fundo);
  color:var(--tx);border-radius:9px;padding:6px 11px;font:inherit;font-size:.8rem;font-weight:600;
  cursor:pointer;text-decoration:none}
.wm-bt:hover{background:var(--apoio);border-color:var(--linha-forte,var(--linha))}
.wm-bt svg{width:15px;height:15px}
.wm-bt[disabled]{opacity:.45;cursor:not-allowed}
.wm-bt-perigo:hover{background:var(--i-perigo-nevoa);border-color:var(--i-perigo-borda);color:var(--i-perigo)}
.wm-conta-lin{margin-left:auto;font-size:.78rem;color:var(--mut);font-variant-numeric:tabular-nums}

.wm-lin{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;align-items:center;
  gap:11px;padding:11px 14px;border-bottom:1px solid var(--linha);color:var(--tx)}
.wm-lin:last-child{border-bottom:0}
.wm-lin:hover{background:var(--marca-claro)}
.wm-lin.nao-lida{background:var(--fundo)}
.wm-lin.lida{background:var(--apoio)}
.wm-lin.aberta{background:var(--i-azul-nevoa);box-shadow:inset 3px 0 0 var(--marca)}
.wm-lin input[type=checkbox]{width:16px;height:16px;accent-color:var(--marca);flex:none;margin:0}
.wm-estrela{display:grid;place-items:center;border:0;background:transparent;cursor:pointer;padding:2px;color:var(--linha-forte,#c8c8d0)}
.wm-estrela svg{width:17px;height:17px}
.wm-estrela.on{color:var(--i-ouro)}
.wm-av{width:30px;height:30px;border-radius:99px;display:grid;place-items:center;flex:none;
  color:var(--fundo);font-size:.72rem;font-weight:700;letter-spacing:.02em}
/* a linha inteira é um caminho para a mensagem, mas ela não pode PARECER um link: sublinhado em
   vinte e cinco linhas seguidas vira uma cerca visual, e o que se lê numa caixa de entrada é o
   assunto, não o fato de ele ser clicável. O estado de foco continua desenhado, porque quem
   navega pelo teclado precisa saber onde está. */
/* display:block É O QUE FAZ O CORTE FUNCIONAR. A âncora é inline por padrão, e elemento inline
   não contém os filhos: o assunto com white-space:nowrap crescia até 1468px numa janela de
   1280, atravessando a coluna da direita e saindo pela borda · e nem aparecia como rolagem
   horizontal, porque quem cortava era o cartão, lá fora. As reticências só existem quando o
   bloco tem largura, e ele só tem largura sendo bloco. */
.wm-txt{display:block;min-width:0;max-width:100%;overflow:hidden;text-decoration:none;color:inherit;padding:2px 0}
.wm-txt:hover .wm-as i,.wm-txt:hover .wm-de b{text-decoration:underline;text-underline-offset:2px}
.wm-txt:focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:6px}
.wm-de{display:flex;align-items:baseline;gap:7px;min-width:0;max-width:100%}
.wm-de b{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wm-lin.nao-lida .wm-de b{font-weight:800}
.wm-de span{font-size:.72rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* display:block outra vez, e pelo mesmo motivo: text-overflow:ellipsis só existe em caixa de
   bloco. Como <span>, este elemento media 1113px dentro de uma coluna de 754 e o texto era
   cortado pela borda do cartão, sem as reticências que avisam que há mais. */
.wm-as{display:block;font-size:.85rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.wm-as i{font-style:normal;color:var(--tx)}
.wm-lin.nao-lida .wm-as i{font-weight:700}
.wm-dir{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:nowrap;color:var(--mut);min-height:30px}
.wm-dir svg{width:15px;height:15px}
.wm-data{font-size:.74rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.wm-lin.nao-lida .wm-data{font-weight:700;color:var(--tx)}
.wm-tag{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 8px;border-radius:99px;background:var(--apoio);white-space:nowrap}

/* --- a leitura --- */
.wm-ler{padding:18px 22px 26px}
.wm-ler h2{font-size:1.25rem;line-height:1.3;margin:0 0 14px;font-weight:700}
.wm-cab{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--linha);margin-bottom:16px}
.wm-cab .wm-av{width:40px;height:40px;font-size:.84rem}
.wm-cab-tx{min-width:0;flex:1}
.wm-cab-tx b{display:block;font-size:.92rem}
.wm-cab-tx span{display:block;font-size:.79rem;color:var(--mut);word-break:break-word}
.wm-cab time{font-size:.78rem;color:var(--mut);white-space:nowrap;flex:none}
.wm-msg{font-size:.94rem;line-height:1.68;white-space:pre-wrap;word-wrap:break-word}
.wm-anx{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--linha)}
.wm-anx a{display:flex;align-items:center;gap:9px;border:1px solid var(--linha);border-radius:11px;
  padding:9px 13px;text-decoration:none;color:var(--tx);background:var(--apoio);font-size:.82rem}
.wm-anx a:hover{border-color:var(--marca);background:var(--marca-claro)}
.wm-anx svg{width:17px;height:17px;color:var(--mut);flex:none}
.wm-anx span{display:block;font-size:.72rem;color:var(--mut)}
.wm-fio{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--linha)}
.wm-fio h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin:0 0 10px}
.wm-fio a{display:block;padding:9px 12px;border:1px solid var(--linha);border-radius:11px;
  margin-bottom:7px;text-decoration:none;color:var(--tx)}
.wm-fio a:hover{background:var(--marca-claro);border-color:var(--marca)}
.wm-fio b{font-size:.84rem;display:block}
.wm-fio span{font-size:.77rem;color:var(--mut)}

/* --- escrever --- */
.wm-form{display:grid;gap:0}
.wm-form label{display:grid;gap:3px;padding:10px 20px;border-bottom:1px solid var(--linha)}
.wm-form label span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.wm-form input,.wm-form select,.wm-form textarea{border:0;background:transparent;font:inherit;
  font-size:.92rem;color:var(--tx);padding:2px 0;width:100%}
.wm-form input:focus,.wm-form textarea:focus,.wm-form select:focus{outline:2px solid var(--marca);outline-offset:3px;border-radius:4px}
.wm-form textarea{min-height:260px;resize:vertical;line-height:1.6}
.wm-form .wm-pe{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:14px 20px;border-bottom:0}
.wm-enviar{background:var(--marca);color:var(--fundo);border:0;border-radius:11px;padding:11px 22px;
  font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}
.wm-enviar:hover{background:var(--marca-forte)}

/* --- vazio, e ele explica --- */
.wm-vazio{padding:56px 26px;text-align:center;color:var(--mut)}
.wm-vazio svg{width:44px;height:44px;color:var(--linha-forte,var(--linha));margin-bottom:12px}
.wm-vazio b{display:block;color:var(--tx);font-size:1rem;margin-bottom:6px}
.wm-vazio p{margin:0 auto;max-width:44ch;font-size:.87rem;line-height:1.6}

.wm-pags{display:flex;gap:8px;align-items:center;justify-content:center;padding:12px;border-top:1px solid var(--linha)}

/* --- o que a volta do Gmail acrescentou --- */
.wm-busca-x{display:grid;place-items:center;padding:0 6px;color:var(--mut);text-decoration:none}
.wm-busca-x:hover{color:var(--i-perigo)}
.wm-busca-x svg{width:15px;height:15px}
.wm-aviso{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 0;
  padding:10px 15px;border-radius:10px;background:var(--i-verde-nevoa);color:var(--i-verde-tx);
  border:1px solid var(--i-verde-borda);font-size:.86rem;font-weight:600}
.wm-aviso form{margin:0}
.wm-desfaz{display:inline-flex;align-items:center;gap:6px;border:1px solid currentColor;background:transparent;
  color:inherit;border-radius:8px;padding:5px 12px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.wm-desfaz:hover{background:var(--fundo)}
.wm-desfaz svg{width:14px;height:14px}
.wm-todos{display:grid;place-items:center;padding:0 4px}
.wm-todos input{width:16px;height:16px;accent-color:var(--marca);margin:0}
.wm-recorte{margin:0;padding:8px 14px;border-bottom:1px solid var(--linha);background:var(--i-azul-nevoa);
  font-size:.8rem;color:var(--marca-forte);font-weight:600}
.wm-recorte a{color:inherit}
.wm-fio-n{font-style:normal;font-size:.68rem;font-weight:700;color:var(--mut);
  background:var(--apoio);border:1px solid var(--linha);border-radius:99px;padding:0 6px;flex:none}
.wm-lin.nao-lida .wm-fio-n{color:var(--tx)}
.wm-esvazia{margin:0;padding:12px 14px;border-top:1px solid var(--linha)}
.wm-esvazia summary{cursor:pointer;font-size:.82rem;font-weight:700;color:var(--i-perigo);list-style:none;
  display:inline-flex;align-items:center;gap:6px}
.wm-esvazia summary::-webkit-details-marker{display:none}
.wm-esvazia summary::before{content:"";width:0;height:0;border:4px solid transparent;border-left-color:currentColor}
.wm-esvazia details[open] summary::before,.wm-esvazia[open] summary::before{transform:rotate(90deg)}
.wm-esvazia p{margin:9px 0;font-size:.84rem;color:var(--tx)}

/* AS AÇÕES RÁPIDAS DA LINHA · aparecem no hover E no foco de teclado. Só no hover elas seriam
   invisíveis para quem navega por Tab, que é justamente quem mais precisa de atalho. Elas ocupam
   o lugar da hora, e não um espaço próprio: coluna reservada para botão que quase nunca aparece
   é largura tirada do assunto em toda linha. */
.wm-rapidas{display:none;align-items:center;gap:3px;flex:none}
.wm-lin:hover .wm-rapidas,.wm-lin:focus-within .wm-rapidas{display:flex}
/* AS AÇÕES OCUPAM O LUGAR DA HORA E DA ETIQUETA, e não um espaço a mais · elas cabiam ao lado, e
   o resultado era a etiqueta descendo para uma segunda linha: a linha inteira crescia debaixo do
   cursor, empurrando as de baixo, no exato instante em que a pessoa vai clicar. Trocar no mesmo
   lugar mantém a altura, que é o que permite mirar. */
.wm-lin:hover .wm-dir>.wm-data,.wm-lin:focus-within .wm-dir>.wm-data,
.wm-lin:hover .wm-dir>.wm-tag,.wm-lin:focus-within .wm-dir>.wm-tag,
.wm-lin:hover .wm-dir>svg,.wm-lin:focus-within .wm-dir>svg{display:none}
.wm-rap{display:grid;place-items:center;border:0;background:transparent;color:var(--mut);
  border-radius:8px;padding:5px;cursor:pointer}
.wm-rap:hover{background:var(--fundo);color:var(--marca);box-shadow:0 1px 3px rgba(var(--sombra),.16)}
.wm-rap:focus-visible{outline:2px solid var(--marca);outline-offset:1px}
.wm-rap svg{width:16px;height:16px;display:block}

/* a lista de atalhos, atrás da tecla ? · atalho que não se descobre é atalho que não existe */
.wm-ajuda{border:0;border-radius:16px;padding:0;max-width:min(440px,92vw);
  box-shadow:0 24px 60px rgba(var(--sombra),.3);color:var(--tx);background:var(--fundo)}
.wm-ajuda::backdrop{background:rgba(var(--sombra),.42)}
.wm-ajuda form{padding:22px 24px 20px}
.wm-ajuda h2{margin:0 0 14px;font-size:1.05rem}
.wm-ajuda dl{margin:0;display:grid;gap:7px}
.wm-ajuda dl div{display:flex;align-items:baseline;gap:12px}
.wm-ajuda dt{flex:none;min-width:34px;text-align:center;font-weight:700;font-size:.82rem;
  background:var(--apoio);border:1px solid var(--linha);border-radius:7px;padding:2px 7px;font-variant-numeric:tabular-nums}
.wm-ajuda dd{margin:0;font-size:.86rem;color:var(--mut)}
.wm-ajuda p{margin:14px 0 16px;font-size:.8rem;color:var(--mut);line-height:1.5}
.wm-ajuda-bt{position:fixed;right:16px;bottom:16px;z-index:30;width:34px;height:34px;border-radius:99px;
  border:1px solid var(--linha);background:var(--fundo);color:var(--mut);font-weight:800;font-size:.95rem;
  cursor:pointer;box-shadow:0 3px 10px rgba(var(--sombra),.16)}
.wm-ajuda-bt:hover{color:var(--marca);border-color:var(--marca)}
@media(max-width:820px){.wm-ajuda-bt{display:none}}

/* a lista COMPACTA, para quem prefere caber mais na tela · uma linha, e não duas */
.wm-compacta .wm-lin{padding:6px 14px;gap:10px}
.wm-compacta .wm-txt{display:flex;align-items:baseline;gap:12px}
.wm-compacta .wm-de{flex:0 0 auto;max-width:34%}
.wm-compacta .wm-as{margin-top:0;flex:1}
.wm-compacta .wm-de span{display:none}
.wm-compacta .wm-av{width:24px;height:24px;font-size:.64rem}

/* --- as configurações --- */
.wm-conf{padding:6px 0 0}
.wm-conf fieldset{border:0;border-bottom:1px solid var(--linha);margin:0;padding:16px 22px 20px}
.wm-conf legend{font-size:.95rem;font-weight:700;padding:0;margin:0 0 4px;color:var(--tx)}
.wm-conf label{display:grid;gap:4px;margin:12px 0 0}
.wm-conf label>span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.wm-conf input[type=text],.wm-conf input[type=email],.wm-conf input[type=date],
.wm-conf select,.wm-conf textarea{font:inherit;font-size:.9rem;color:var(--tx);background:var(--fundo);
  border:1px solid var(--linha);border-radius:9px;padding:9px 11px;width:100%;max-width:520px}
.wm-conf textarea{line-height:1.55;resize:vertical}
.wm-conf .wm-ck{display:flex;align-items:center;gap:9px;font-size:.88rem;margin:12px 0 0}
.wm-conf .wm-ck input{width:16px;height:16px;accent-color:var(--marca);margin:0;flex:none}
.wm-conf .wm-duo{display:flex;gap:14px;flex-wrap:wrap}
.wm-conf .wm-duo label{flex:1 1 160px;max-width:220px}
/* o que VALE e o que é PEDIDO se distinguem pela cor, e não só pela palavra · quem lê rápido lê
   a cor primeiro, e é justamente quem vai sair de férias confiando no aviso */
.wm-vale{margin:2px 0 0;padding:8px 12px;border-radius:9px;font-size:.82rem;line-height:1.5;
  background:var(--i-verde-nevoa);color:var(--i-verde-tx);border:1px solid var(--i-verde-borda)}
.wm-pedido{margin:2px 0 0;padding:9px 13px;border-radius:9px;font-size:.82rem;line-height:1.55;
  background:var(--i-ouro-nevoa);color:var(--i-ouro-tx);border:1px solid var(--i-ouro-borda)}
.wm-estado{margin:12px 0 0;font-size:.8rem;color:var(--mut)}

@media(max-width:1100px){
  .wm-painel.lendo{grid-template-columns:minmax(0,1fr)}
  /* lendo uma mensagem, a lista SAI da tela em vez de virar faixa espremida · a pergunta na
     tela estreita é a mensagem, e uma lista de 130px não responde nem a ela nem à lista */
  .wm-painel.lendo .wm-cx-lista{display:none}
}
@media(max-width:820px){
  .wm-corpo{grid-template-columns:minmax(0,1fr)}
  /* a coluna das pastas vira uma FILEIRA que rola de lado · num telefone, uma barra lateral de
     236px come dois terços da tela, e o que se veio fazer aqui é ler a lista */
  .wm-rail{position:static;max-height:none;padding:0 10px 12px;
    display:flex;gap:6px;overflow-x:auto;align-items:center;scrollbar-width:thin}
  .wm-rail .wm-grupo{display:none}
  .wm-escrever{margin:0;width:auto;flex:none;padding:11px 18px}
  .wm-past{border-radius:99px;white-space:nowrap;flex:none;border:1px solid var(--linha);background:var(--fundo)}
  .wm-painel{padding:0 10px 20px}
  /* O QUE SAI DA LINHA NUM TELEFONE, e por quê. Com avatar, endereço, marcador e hora dentro de
     375px, sobrava espaço para "Vitó…" no lugar do nome de quem mandou · a linha inteira parava
     de informar para caber. Ficam nome, assunto e hora, que são as três perguntas da lista; o
     endereço e o marcador continuam na ficha, a um toque. */
  .wm-lin{grid-template-columns:auto auto minmax(0,1fr) auto;gap:9px;padding:11px 10px}
  .wm-lin .wm-av,.wm-lin .wm-de span,.wm-lin .wm-tag{display:none}
  .wm-as{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  /* e a barra de ações vira ícone: cinco botões com palavra quebravam em quatro linhas e
     empurravam a primeira mensagem para fora da tela */
  .wm-barra .wm-bt.wm-so-ico span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .wm-barra .wm-bt.wm-so-ico{padding:7px 10px}
  .wm-topo{gap:10px;padding:9px 12px}
  .wm-marca img{height:28px}
  .wm-demo{font-size:.78rem;padding:8px 12px}
}
@media print{
  .wm-topo,.wm-rail,.wm-barra,.wm-demo,.wm-cx-lista,.wm-pags{display:none!important}
  .wm-app,.wm-corpo,.wm-painel,.wm-painel.lendo{display:block;background:#fff}
  .wm-cx{border:0;border-radius:0}
}