@import url("fontes.css");

/* Paleta e tipografia conforme o manual da marca Castelapi v1.3.1.
   Mel e terracota puros sao graficos: em texto sobre fundo claro valem so as
   versoes -texto, que passam AA. Mel sobre osso da 2,2:1 e nunca vira texto.

   ------------------------------------------------------------------------
   TEMA CLARO E TEMA ESCURO, E POR QUE SAO TRES ESTADOS E NAO DOIS
   ------------------------------------------------------------------------
   Quem usa este painel responde oficio de policia e de juiz, muitas vezes de
   madrugada e sob prazo. Tela clara em sala escura cansa, e cansaco aqui nao
   produz reclamacao: produz erro de digitacao em endereco, porta ou horario,
   que aponta o assinante errado.

   O sistema operacional da pessoa pode dizer claro, dizer escuro, ou nao
   dizer nada. Sao TRES estados, e a escolha explicita vence o sistema NOS
   DOIS SENTIDOS -- quem trabalha de dia numa maquina configurada em escuro
   precisa conseguir clarear a tela, e nao so escurece-la.

     sem escolha  ->  <html data-tema="sistema">, e `prefers-color-scheme`
                      decide;
     escolha      ->  <html data-tema="claro"> ou "escuro", e o sistema nao
                      tem voto.

   ONDE A ESCOLHA MORA: num cookie proprio, `tema`, lido no servidor e
   carimbado no `<html>` antes do primeiro byte da pagina. O porque completo
   esta em `web/app.py`, em `tema_do_pedido`. Em uma linha: a preferencia
   precisa ser conhecida ANTES da primeira pintura, e a politica de conteudo
   desta aplicacao nao tem `unsafe-inline` para script -- sem o cookie a tela
   piscaria em claro antes de virar escura, ou ficaria clara para sempre com
   javascript desligado.

   ESCURO NAO E INVERTER. O que muda de tema para tema e o PAPEL de cada
   token, nao o seu nome:

     --osso     e sempre o CHAO da pagina   (claro: #F6F3EC | escuro: #15191F)
     --papel    e sempre a SUPERFICIE       (claro: #FFFFFF | escuro: #1D222A)
     --grafite  e sempre a TINTA            (claro: #252B33 | escuro: #E2DDD3)

   Com os papeis trocados de forma consistente, tudo o que ja estava escrito
   em token continua certo sem uma linha a mais: o botao primario (fundo
   grafite, texto osso) vira claro sobre escuro no tema claro e escuro sobre
   claro no tema escuro, que e exatamente o que se quer; a etiqueta `.tag`
   (fundo osso dentro de um cartao papel) continua sendo um degrau abaixo da
   superficie; o bloco de dado cru continua recuado.

   TRES COISAS NAO ACOMPANHAM A TROCA DE PAPEL, e por isso ganharam token
   proprio:

   1. O CABECALHO. Ele ja e uma barra escura no tema claro. Se seguisse
      `--grafite` viraria uma barra CLARA no tema escuro. Tokens `--topo-*`,
      escuros nos dois temas.
   2. A MOLDURA DO QR do autenticador (`--qr-fundo`). Ela precisa continuar
      branca: o QR e desenhado em preto sobre branco e a zona de silencio ao
      redor faz parte da norma. Moldura escura e leitor que nao le, e a pessoa
      fica trancada do lado de fora do proprio segundo fator.
   3. A IMPRESSAO. Papel e branco. Ver `

@media print`, no fim.

   OS NUMEROS DO CONTRASTE (WCAG 2.1, texto normal exige 4,5:1):

     claro   tinta sobre chao 12,87:1   secundario sobre chao  4,55:1
             tinta sobre superficie 14,27:1   secundario sobre superficie 5,05:1
     escuro  tinta sobre chao 13,03:1   secundario sobre chao  6,43:1
             tinta sobre superficie 11,80:1   secundario sobre superficie 5,82:1

   O `--suave` do tema claro era #6B7280 e dava 4,36:1 sobre o chao -- abaixo
   do minimo. Subiu para #696F7B, que passa e e visualmente o mesmo cinza.
   `.opc` era #9aa1ab, 2,61:1, e nao e enfeite: ele carrega "minimo de N
   caracteres", "id_usuario:token", "rede inteira, com mascara". Virou
   `--suave`.

   COR CRUA NAO ENTRA AQUI. Todo valor de cor vive nos blocos de token
   abaixo; fora deles so existe `var(--...)`. Vale tambem para o `<style>`
   dentro de template. Sem essa regra, uma cor esquecida nao da erro nenhum:
   ela simplesmente fica clara no tema escuro, e so aparece olhando.
   `testes/teste_web_tema.py` reprova a suite se alguma voltar. */

:root{
  /* `color-scheme` nao e enfeite: e por ele que o navegador pinta o
     calendario e o relogio dos campos de data e hora, a barra de rolagem e o
     menu do `<select>`. Sem ele, o tema escuro ganha um calendario branco no
     meio da tela -- e e nesse calendario que se escolhe o instante do fato. */
  color-scheme:light;

  /* ------------------------------------------------------- tema claro */
  --grafite:#252B33; --mel:#D9982F; --terracota:#B65C38; --osso:#F6F3EC;
  --mel-texto:#7D5A16; --terracota-texto:#9E4A28;
  --linha:#E3DCCB; --linha-suave:#EFEAE0;
  --papel:#FFFFFF; --suave:#696F7B; --mel-tenue:#FBF2E0; --terracota-tenue:#F8E9E2;
  --ok:#1F6B45; --ok-tenue:#E7F2EC;
  /* bordas das caixas de situacao: mais firmes que --linha, na cor da caixa */
  --mel-borda:#ECD9B4; --terracota-borda:#ECD6CB; --ok-borda:#CFE3D8;
  --campo-fundo:#FFFFFF;
  --botao-hover:#161A20;
  --foco:rgba(217,152,47,.22);
  --veu:rgba(37,43,51,.10);

  /* Cabecalho: barra escura nos DOIS temas. Ver a nota 1 acima. */
  --topo-fundo:#252B33;
  --topo-texto:#F6F3EC;
  --topo-medio:rgba(246,243,236,.72);
  /* .50 dava 4,40:1 sobre a barra, abaixo do minimo, e e aqui que mora o
     "Cole o endereco do oficio" da busca -- instrucao, nao enfeite. .56
     da 5,12:1 no tema claro e 5,87:1 no escuro. */
  --topo-fraco:rgba(246,243,236,.56);
  --topo-borda:rgba(246,243,236,.30);
  --topo-veu:rgba(246,243,236,.10);
  --topo-divisor:rgba(246,243,236,.28);
  --topo-alerta:#E8B9A6;

  /* Moldura do QR. Branca nos dois temas, de proposito. Ver a nota 2. */
  --qr-fundo:#FFFFFF;

  --sora:"Sora",system-ui,sans-serif;
  --archivo:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ------------------------------------------------------ tema escuro
     Os valores do escuro moram AQUI, uma vez so. Os dois blocos que os
     aplicam (o do sistema e o da escolha explicita) so apontam para eles:
     duas listas de valores acabariam divergindo, e a que divergisse seria a
     que quase ninguem abre. */
  --escuro-grafite:#E2DDD3;
  --escuro-mel:#DFA548;
  --escuro-terracota:#CF7B54;
  --escuro-osso:#15191F;
  --escuro-mel-texto:#E7B45E;
  --escuro-terracota-texto:#EE9E79;
  --escuro-linha:#2E353F;
  --escuro-linha-suave:#262C35;
  --escuro-papel:#1D222A;
  --escuro-suave:#949DA9;
  --escuro-mel-tenue:#2C2314;
  --escuro-terracota-tenue:#32211B;
  --escuro-ok:#56CF97;
  --escuro-ok-tenue:#11291E;
  --escuro-mel-borda:#4A3A1D;
  --escuro-terracota-borda:#4C3028;
  --escuro-ok-borda:#1E4534;
  --escuro-campo-fundo:#171C23;
  --escuro-botao-hover:#F1EDE5;
  --escuro-foco:rgba(223,165,72,.32);
  --escuro-veu:rgba(226,221,211,.14);
  --escuro-topo-fundo:#0F1218;
}

/* O sistema pede escuro e a pessoa NAO escolheu claro. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    color-scheme:dark;
    --grafite:var(--escuro-grafite); --mel:var(--escuro-mel);
    --terracota:var(--escuro-terracota); --osso:var(--escuro-osso);
    --mel-texto:var(--escuro-mel-texto);
    --terracota-texto:var(--escuro-terracota-texto);
    --linha:var(--escuro-linha); --linha-suave:var(--escuro-linha-suave);
    --papel:var(--escuro-papel); --suave:var(--escuro-suave);
    --mel-tenue:var(--escuro-mel-tenue);
    --terracota-tenue:var(--escuro-terracota-tenue);
    --ok:var(--escuro-ok); --ok-tenue:var(--escuro-ok-tenue);
    --mel-borda:var(--escuro-mel-borda);
    --terracota-borda:var(--escuro-terracota-borda);
    --ok-borda:var(--escuro-ok-borda);
    --campo-fundo:var(--escuro-campo-fundo);
    --botao-hover:var(--escuro-botao-hover);
    --foco:var(--escuro-foco); --veu:var(--escuro-veu);
    --topo-fundo:var(--escuro-topo-fundo);
  }
}

/* A pessoa escolheu escuro. Vence o sistema, inclusive quando o sistema diz
   claro -- e o outro sentido da regra dos tres estados. */
:root[data-tema="escuro"]{
  color-scheme:dark;
  --grafite:var(--escuro-grafite); --mel:var(--escuro-mel);
  --terracota:var(--escuro-terracota); --osso:var(--escuro-osso);
  --mel-texto:var(--escuro-mel-texto);
  --terracota-texto:var(--escuro-terracota-texto);
  --linha:var(--escuro-linha); --linha-suave:var(--escuro-linha-suave);
  --papel:var(--escuro-papel); --suave:var(--escuro-suave);
  --mel-tenue:var(--escuro-mel-tenue);
  --terracota-tenue:var(--escuro-terracota-tenue);
  --ok:var(--escuro-ok); --ok-tenue:var(--escuro-ok-tenue);
  --mel-borda:var(--escuro-mel-borda);
  --terracota-borda:var(--escuro-terracota-borda);
  --ok-borda:var(--escuro-ok-borda);
  --campo-fundo:var(--escuro-campo-fundo);
  --botao-hover:var(--escuro-botao-hover);
  --foco:var(--escuro-foco); --veu:var(--escuro-veu);
  --topo-fundo:var(--escuro-topo-fundo);
}

*{box-sizing:border-box}
body{margin:0;background:var(--osso);color:var(--grafite);
  font:400 14px/1.55 var(--archivo);-webkit-font-smoothing:antialiased}
a{color:var(--mel-texto)}
a:hover{color:var(--grafite)}

/* ---------------------------------------------------------------- cabecalho */
.topo{display:flex;align-items:center;gap:26px;background:var(--topo-fundo);
  padding:0 22px;height:56px;position:sticky;top:0;z-index:5}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.marca img{height:26px;width:auto;display:block}       /* > 120px de largura */
.marca .divisor{width:1px;height:22px;background:var(--topo-divisor)}
.marca .produto{font:600 14px/1 var(--sora);color:var(--topo-texto);letter-spacing:-.2px}
.topo nav{display:flex;gap:20px;flex:1}
.topo nav a{text-decoration:none;color:var(--topo-medio);font-size:13.5px;
  padding:4px 0;border-bottom:2px solid transparent}
.topo nav a:hover{color:var(--topo-texto);border-bottom-color:var(--mel)}
/* `.quem` saiu em 12/09/2026 (item 29): o nome, a senha e o sair viraram o
   menu da pessoa, em `.pessoa`/`.gaveta`, dentro de base.html. */
.faixa-alerta{background:var(--terracota-tenue);color:var(--terracota-texto);
  padding:10px 22px;font-size:13px;border-bottom:1px solid var(--terracota-borda)}
.faixa-alerta a{color:var(--terracota-texto);font-weight:600}
/* Idade da copia das contas, so na maquina que le a copia (item 32). Neutra no
   modo normal; na cor do alerta quando a autoridade nao confirma contato. */
.faixa-contas{background:var(--osso);color:var(--grafite);padding:6px 22px;
  font-size:12px;border-bottom:1px solid var(--linha)}
.faixa-contas[data-modo="degradado"]{background:var(--terracota-tenue);
  color:var(--terracota-texto);border-bottom-color:var(--terracota-borda)}

main{max-width:1020px;margin:24px auto 8px;padding:0 18px}
main.estreito{max-width:430px;margin-top:7vh}

/* ------------------------------------------------------------------ cartoes */
.cartao{background:var(--papel);border:1px solid var(--linha);border-radius:10px;
  padding:22px 24px;margin-bottom:18px}
.cartao.acesso{padding:30px}
h1{font:600 19px/1.3 var(--sora);margin:0 0 5px;letter-spacing:-.3px}
h2{font:600 14.5px/1.3 var(--sora);margin:20px 0 9px;letter-spacing:-.2px}
.cartao>h2:first-child{margin-top:0}
.legenda{color:var(--suave);font-size:13px;margin:0 0 17px;max-width:64ch}
.nota{color:var(--suave);font-size:12.5px;margin:13px 0 0;max-width:72ch;
  border-left:2px solid var(--mel);padding-left:11px}

/* ----------------------------------------------------------------- formularios */
label{display:block;font-size:12.5px;color:var(--suave);margin-bottom:13px}
/* Nao e enfeite: aqui moram "minimo de N caracteres" e "rede inteira, com
   mascara". Texto que muda o que a pessoa digita le-se como texto. */
.opc{color:var(--suave);font-weight:400}
input,select,textarea{display:block;width:100%;margin-top:5px;padding:9px 11px;
  border:1px solid var(--linha);border-radius:6px;font:400 13.5px var(--archivo);
  background:var(--campo-fundo);color:var(--grafite)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mel);
  box-shadow:0 0 0 3px var(--foco)}
textarea{resize:vertical}
input[name="ip_publico"],input[name="porta"],input[name="hora"],
input[name="smtp_host"],input[name="smtp_porta"]{font-family:var(--mono)}
input.codigo{font:500 23px/1 var(--mono);letter-spacing:.42em;text-align:center;
  padding:13px 13px 13px 22px}
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:0 15px}
.grade .c2{grid-column:span 2}
/* Alocar e desalocar, na ficha da empresa: um cartao por gesto, lado a lado.
   Dentro, tres colunas: faixa e uso na primeira linha, data, hora e fuso na
   segunda. O botao desce para o pe do cartao, e os dois botoes ficam na mesma
   altura mesmo quando um cartao tem menos campos. `minmax(0,...)` e
   `min-width:0` deixam campo de data encolher em vez de estourar a coluna. */
.gestos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.gesto{display:flex;flex-direction:column}
.gesto form{display:flex;flex-direction:column;flex:1}
.gesto .acoes{margin-top:auto}
.grade-gesto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
.grade-gesto input,.grade-gesto select{min-width:0}
.grade-gesto .g-faixa{grid-column:span 2}
.grade-gesto .g-inteira{grid-column:1/-1}
/* Marca da empresa, na ficha: a imagem guardada e o quadro de recorte. O fundo
   e o do papel IMPRESSO (`--qr-fundo`, branco nos dois temas), e nao o do tema:
   a marca vai para um documento em papel branco, e logo de fundo transparente
   conferido sobre fundo escuro esconde exatamente o defeito que importa. */
img.marca-empresa,.recorte-marca canvas{display:block;max-width:100%;height:auto;
  background:var(--qr-fundo);border:1px solid var(--linha);border-radius:6px;
  margin:5px 0 13px}
.recorte-marca canvas{width:480px;cursor:grab;touch-action:none}
.recorte-marca input[type="range"]{padding:0;accent-color:var(--mel)}
.marca-caixa{display:flex;align-items:center;gap:9px;color:var(--grafite);font-size:13px}
.marca-caixa input{width:auto;margin:0;accent-color:var(--mel)}
/* Grade de concessoes (admin_grade_concessoes.html): Empresa e uma coluna por
   papel. Em tela estreita a tabela rola dentro da caixa e a pagina nao estoura;
   o rotulo ocupa a celula, para o toque nao precisar acertar a caixinha. */
.grade-papeis-caixa{overflow-x:auto;max-width:100%}
table.grade-papeis th.papel-coluna,table.grade-papeis td.papel-celula{text-align:center;width:1%}
table.grade-papeis td.papel-celula{padding:0}
.papel-marca{display:block;padding:8px 14px;cursor:pointer}
.papel-marca input{display:inline-block;width:auto;margin:0;accent-color:var(--mel)}
.acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px}
button{padding:9px 20px;border:1px solid var(--grafite);background:var(--grafite);
  color:var(--osso);border-radius:6px;font:500 13.5px var(--archivo);cursor:pointer}
button:hover{background:var(--botao-hover);border-color:var(--botao-hover)}
button.secundario{background:var(--papel);color:var(--grafite)}
button.secundario:hover{background:var(--osso)}
button.mini{padding:3px 10px;font-size:11.5px;background:var(--papel);
  color:var(--suave);border-color:var(--linha)}
button.mini:hover{background:var(--osso);color:var(--grafite)}
.cartao.acesso button{width:100%;padding:11px}
.rodape-cartao{margin:17px 0 0;font-size:12.5px;color:var(--suave);text-align:center}
.aviso{padding:11px 14px;border-radius:7px;margin-bottom:15px;font-size:13px}
.aviso.erro{background:var(--terracota-tenue);color:var(--terracota-texto)}
.aviso.ok{background:var(--ok-tenue);color:var(--ok)}
/* Recado para quem opera (alerta, pendencia de cadastro), que NAO vai ao
   documento. Caixa diferente da advertencia, que vai (achado 2.33). */
.aviso.operacao{background:var(--mel-tenue);color:var(--grafite);
  border:1px solid var(--mel-borda)}
.cobertura{font:400 12.5px var(--mono);color:var(--suave);margin:15px 0 0;
  padding-top:13px;border-top:1px solid var(--linha-suave)}
/* Previa do modelo de documento (achado 2.31). Era `style=` no template, que
   a CSP sem `unsafe-inline` ignora: linha de ate ~600 caracteres estourava o
   cartao, sem teto de altura. */
pre.previa{white-space:pre-wrap;overflow-x:auto;max-height:32em}

/* ----------------------------------------------------------------- resultado */
.veredito{background:var(--mel-tenue);border:1px solid var(--mel-borda);border-radius:9px;
  padding:17px 19px;margin-bottom:17px}
.veredito.atencao{background:var(--terracota-tenue);border-color:var(--terracota-borda)}
.veredito .rotulo{font:500 11px/1 var(--mono);text-transform:uppercase;
  letter-spacing:.09em;color:var(--mel-texto)}
.veredito.atencao .rotulo{color:var(--terracota-texto)}
.veredito .valor{font:600 27px/1.2 var(--mono);margin:7px 0 6px;
  color:var(--grafite);letter-spacing:-.5px}
.veredito .detalhe{font-size:13px;color:var(--grafite)}

table.dados{width:100%;border-collapse:collapse;font-size:13px;margin-top:7px}
table.dados th{text-align:left;font:500 10.5px/1.4 var(--mono);color:var(--suave);
  text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--linha);
  padding:8px 9px;white-space:nowrap}
table.dados td{padding:8px 9px;border-bottom:1px solid var(--linha-suave);vertical-align:top}
table.dados tr:last-child td{border-bottom:none}
tr.cru td{padding-top:0;border-bottom:1px solid var(--linha)}
tr.cru code{display:block;font:400 11.5px/1.5 var(--mono);color:var(--grafite);
  background:var(--osso);padding:7px 9px;border-radius:5px;word-break:break-all;
  border-left:2px solid var(--mel)}
tr.cru .proc{display:block;font:400 11px var(--mono);color:var(--suave);margin-top:5px}
.mono{font-family:var(--mono)}
.forte{font-weight:600}
.peq{font-size:11.5px}
.quebra{word-break:break-word;max-width:420px}
.aberto{color:var(--terracota-texto)}
.tag,.ok-tag,.off-tag{display:inline-block;font:400 10.5px var(--mono);padding:2px 8px;
  border-radius:11px;background:var(--osso);color:var(--suave)}
.ok-tag{background:var(--ok-tenue);color:var(--ok)}
.off-tag{background:var(--terracota-tenue);color:var(--terracota-texto)}
.linha-acoes{display:flex;gap:6px}
form.inline{display:inline}
form.busca{display:flex;gap:8px;margin-bottom:13px}
form.busca input{margin:0}
.painel-num{display:flex;gap:30px;margin:6px 0 20px;flex-wrap:wrap}
.painel-num div{display:flex;flex-direction:column}
.painel-num .n{font:600 26px/1.2 var(--sora);letter-spacing:-.5px}
.painel-num .r{font-size:11.5px;color:var(--suave);max-width:21ch;margin-top:2px}
.link{font-size:12px;text-decoration:none}

/* ------------------------------------------------------------- auditoria
   Dono, 14/09/2026, com print: "contraste ruim na tela de auditoria".

   CAUSA DO FILTRO APAGADO. O formulario usava `class="busca"`, que era a
   classe da caixa de busca do cabecalho. As regras `.busca input` e `.busca
   button` pintavam com os tokens `--topo-*` -- osso com transparencia, feitos
   para a barra escura --, e ganhavam de `input` e `button` desta folha por ter
   classe. Sobre o cartao claro: valor, placeholder, borda e texto do botao em
   osso sobre branco (1,1:1). Nenhum erro na tela. O filtro ganhou classe
   propria e volta ao estilo dos formularios da pagina.

   A cor do campo esta declarada aqui mesmo, e nao so herdada de `input`, para
   `teste_web_tema.py` medir o que de fato pinta o campo nos dois temas.

   Borda em `--suave`, e nao em `--linha`: o fundo do campo e o do cartao sao o
   mesmo branco, a borda e o unico contorno do campo, e `--linha` sobre papel da
   1,3:1 (a WCAG pede 3:1 para contorno de controle). */
form.filtro-auditoria{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 13px}
form.filtro-auditoria input{margin:0;width:auto;min-width:0;flex:1 1 9.5rem;
  background:var(--campo-fundo);color:var(--grafite);border-color:var(--suave)}
form.filtro-auditoria input::placeholder{color:var(--suave);opacity:1}
form.filtro-auditoria input:focus{border-color:var(--mel)}
/* Mesmo motivo de `.linha-consulta`: o calendario do iPhone tem largura minima
   propria e passava da borda do cartao. */
form.filtro-auditoria input[type="date"]{-webkit-appearance:none;appearance:none}
form.filtro-auditoria input[name="acao"]{flex:2 1 14rem}
form.filtro-auditoria input[name="limite"]{flex:0 0 5.5rem;font-family:var(--mono)}
form.filtro-auditoria button{flex:0 0 auto}

/* TABELA DA TRILHA. Em layout automatico, `.quebra` (word-break:break-word)
   deixava o Detalhe encolher ate uma letra por linha, enquanto o IPv6 e a
   etiqueta da acao, que nao quebravam, tomavam a largura e a tabela passava da
   borda do cartao. Agora: layout fixo, largura dada as colunas curtas, e o
   Detalhe fica com o resto, quebrando por palavra (`anywhere` so parte token
   que nao cabe na linha). O template poe `<wbr>` depois de cada `:` do IPv6;
   a etiqueta da acao quebra por `anywhere` quando nao cabe.
   Abaixo da largura minima quem rola e a caixa da tabela, nao a pagina. */
.trilha-rolagem{overflow-x:auto;max-width:100%}
table.trilha{table-layout:fixed;min-width:52rem}
table.trilha .t-quando{width:6.75rem}
table.trilha .t-quem{width:8rem}
table.trilha .t-empresa{width:6.5rem}
table.trilha .t-acao{width:9.5rem}
table.trilha .t-origem{width:8.5rem}
table.trilha td{word-break:normal;overflow-wrap:anywhere}
table.trilha td.t-origem{font-size:10.5px}
table.trilha .t-acao .tag{max-width:100%}

/* ------------------------------------------------------------- tema da tela
   Tres botoes, porque sao tres estados: seguir o sistema, claro, escuro. Um
   botao unico que so escurece nao devolve a tela clara a quem trabalha de dia
   numa maquina configurada em escuro.

   E controle, nao assunto da tela: sem rotulo ao lado, sem frase de ajuda. O
   estado atual aparece no proprio botao marcado (`aria-pressed`), que e onde
   a pessoa vai olhar.

   Fica FORA do `<main>` nos dois lugares em que aparece -- no menu da pessoa
   para quem entrou, no rodape para quem ainda nao entrou --, entao nao gasta o
   orcamento de palavras visiveis de tela nenhuma. */
.tema{display:flex;align-items:center;margin:0;flex-shrink:0}
.tema button{padding:3px 9px;font:400 11px var(--mono);border-radius:0;
  border:1px solid var(--linha);background:var(--papel);color:var(--suave)}
.tema button+button{border-left-width:0}
.tema button:first-of-type{border-radius:6px 0 0 6px}
.tema button:last-of-type{border-radius:0 6px 6px 0}
.tema button:hover{background:var(--osso);color:var(--grafite)}
.tema button[aria-pressed="true"]{background:var(--grafite);color:var(--osso);
  border-color:var(--grafite)}
/* NAO existe mais variante do controle para a barra escura, e isso e
   proposital. Desde o item 29 o tema mora dentro do menu da pessoa
   (`.gaveta`), que e uma superficie da PAGINA caindo sobre a barra, e no
   rodape, que tambem e pagina. Uma regra `.topo .tema` sobreviveria ali dentro
   e pintaria o controle com a tinta clara do cabecalho sobre o fundo claro da
   gaveta -- texto branco no branco, sem erro nenhum na tela. */

/* A marca horizontal comum some em fundo escuro, e a negativa some em fundo
   claro. As duas vao no HTML e QUEM ESCOLHE E A FOLHA: o servidor sabe a
   escolha explicita, mas nao sabe o que o sistema da pessoa pede quando a
   escolha e "seguir o sistema" -- so o navegador sabe. Uma imagem escondida
   por `display:none` tambem sai da arvore de acessibilidade, entao o leitor
   de tela anuncia a marca uma vez so. */
img.marca-escuro{display:none}
:root[data-tema="escuro"] img.marca-claro{display:none}
:root[data-tema="escuro"] img.marca-escuro{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) img.marca-claro{display:none}
  :root:not([data-tema="claro"]) img.marca-escuro{display:block}
}

/* -------------------------------------------------------------------- rodape */
.rodape{max-width:1020px;margin:0 auto;padding:18px 18px 30px;display:flex;
  align-items:center;gap:10px;color:var(--suave);font-size:12px;
  border-top:1px solid var(--linha);margin-top:6px}
.rodape .tema{margin-left:auto}

/* Consulta em linhas (dono, 13/09/2026): uma linha por endereco, com "+". */
.linhas-consulta{display:flex;flex-direction:column;gap:4px}
.linha-consulta{display:grid;gap:0 10px;align-items:end;
  grid-template-columns:18px minmax(0,2.2fr) minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.7fr) 40px}
.linha-num{font-size:12px;color:var(--suave);padding-bottom:13px;text-align:right}
.linha-consulta button.linha-menos{padding:9px 0;width:40px;margin-bottom:12px}
.linha-consulta button.linha-menos[hidden]{display:inline-block;visibility:hidden}
/* Campo que encolhe com a coluna. O calendario do iPhone tem largura minima
   propria e, sem isto, passava da borda do cartao (dono, 13/09/2026, print). */
.linha-consulta input,.linha-consulta select{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.linha-consulta input[type="date"]{-webkit-appearance:none;appearance:none}
/* Modelo do documento, na ficha da empresa: a edicao por TIPO DE SOLICITACAO
   (dono, 22/09/2026). Os tipos sao uma fileira que QUEBRA, e nao uma barra com
   rolagem lateral: em 400px cabem dois por linha e nenhum deles fica escondido
   atras de um gesto que a pessoa precise descobrir. */
.tipos-modelo{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 15px}
.tipo-modelo{padding:6px 11px;border:1px solid var(--linha);border-radius:999px;
  font-size:12.5px;color:var(--suave);text-decoration:none}
.tipo-modelo:hover{border-color:var(--mel)}
.tipo-modelo.escolhido{border-color:var(--mel);background:var(--campo-fundo);
  color:var(--grafite);font-weight:600}
/* Uma caixa por secao. O nome da secao fica no rotulo, em mono: e o nome que
   aparece no arquivo e nas mensagens de recusa, e a pessoa precisa reconhecer
   um no outro. */
.secao-modelo>.mono{font-size:12.5px;color:var(--grafite)}
.secao-modelo textarea{font:400 13.5px/1.5 var(--archivo)}
/* A edicao do texto inteiro, guardada. Fica fechada por padrao e abre sozinha
   quando foi ELA que acabou de ser recusada. */
.avancado{margin-top:20px;border-top:1px solid var(--linha);padding-top:15px}
.avancado summary{cursor:pointer;font-weight:600;font-size:13px}
.dados-oficio{margin-top:16px}
.dados-oficio summary{cursor:pointer;font-weight:600;margin-bottom:10px}
.envio-padrao{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:720px){
  /* Celular: endereco, data e fuso na largura inteira; porta e hora dividem
     uma linha. O "-" escondido nao ocupa lugar, e o traco separa linhas, em
     vez de sublinhar a unica. */
  .linha-consulta{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:row dense}
  .linha-consulta + .linha-consulta{border-top:1px solid var(--linha);padding-top:10px}
  .linha-num{display:none}
  .linha-consulta label:nth-of-type(1),.linha-consulta label:nth-of-type(3),
  .linha-consulta label:nth-of-type(5){grid-column:span 2}
  .linha-consulta button.linha-menos{grid-column:span 2;width:100%}
  .linha-consulta button.linha-menos[hidden]{display:none}
  .grade{grid-template-columns:1fr 1fr}.grade .c2{grid-column:span 2}
  /* Os dois gestos, um embaixo do outro. Dentro, duas colunas: faixa, uso e
     data na largura inteira; hora e fuso dividem uma linha. */
  .gestos{grid-template-columns:minmax(0,1fr)}
  .grade-gesto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grade-gesto .g-faixa,.grade-gesto .g-uso,.grade-gesto .g-data{grid-column:1/-1}
  .topo{flex-wrap:wrap;height:auto;padding:10px 14px;gap:12px}
  main{padding:0 12px}.rodape{flex-wrap:wrap;padding:16px 12px 26px}
  .rodape .tema{margin-left:0}
}

/* assinatura no cartao de acesso — largura acima do minimo de 120px do manual */
.marca-acesso{height:30px;width:auto;display:block;margin:0 0 20px}

/* -------------------------------------------------------------- impressao
   O documento do oficio sai por outro caminho (`relatorio.py`, .docx), mas a
   TELA de resposta e impressa as vezes, e papel e branco. Sem este bloco, uma
   pessoa no tema escuro imprime uma pagina de fundo #15191F: ou o navegador
   descarta o fundo e sobra texto quase branco em papel branco, ou a impressora
   gasta um cartucho para produzir uma folha ilegivel.

   Os tokens voltam ao preto sobre branco, com os fundos de situacao virando
   branco e a distincao passando para a borda -- caixa colorida em impressora
   monocromatica e um cinza que nao diz nada. */
/* --------------------------------------------------------------------------
   Oficio com varios itens

   Um oficio traz uma relacao de enderecos, e a resposta e UMA peca com uma
   secao por item. A tela precisa mostrar item por item, na ordem da autoridade,
   sem que a lista vire um paredao ilegivel de dez blocos iguais.

   `.item-oficio` e o bloco de um item: separado do vizinho por uma divisoria,
   e nao por cartao proprio. Cartao dentro de cartao daria dez caixas com
   sombra numa pagina so, e a pagina deixaria de ter hierarquia -- cada item
   pareceria um assunto separado, quando todos sao partes da MESMA resposta.
   -------------------------------------------------------------------------- */
.item-oficio{padding:16px 0;border-top:1px solid var(--linha)}
.item-oficio:first-of-type{border-top:none;padding-top:8px}
.item-oficio .veredito{margin:10px 0}
.item-oficio .dados{margin-top:10px}

/* Cabecalho do item: o que a autoridade perguntou, numa linha so. Quebra em
   varias linhas no telefone em vez de estourar a largura. */
.item-topo{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* O numero do item e o mesmo do oficio, e NUNCA e recalculado. Quem recebe a
   resposta confere contra a lista que mandou, entao ele precisa saltar aos
   olhos: e a chave dessa conferencia. */
.item-num{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 6px;border-radius:13px;
  background:var(--grafite);color:var(--osso);
  font-family:var(--mono);font-size:12px;font-weight:600}

/* A caixa de colar a relacao. Monoespacada porque o que se cola sao enderecos
   e horarios, e em fonte proporcional um 1 e um l colados passam despercebidos. */
textarea.bloco{min-height:190px;line-height:1.7;white-space:pre;overflow-x:auto}

/* ------------------------------------------------------------ DNS (vistas_dns)
   UM SISTEMA PEQUENO PARA O MODULO INTEIRO (dono, 29/09/2026: "parece
   remendado"). Toda tela do DNS usa so as pecas abaixo; tela nova tambem.
   O ritmo e o do resto do painel (Coletores, Responder oficio): cartao de
   estilo.css, h2 em Sora 14,5, rotulo de dado em mono maiusculo como o
   cabecalho de `table.dados`, valor em Sora. So tokens: o tema troca sozinho.

   1. Cartao: `.cartao` + `.dns-cab` (h2, `.dns-sub` opcional, acoes a
      direita). Um assunto por cartao; entre cartoes, os 18px do `.cartao`.
   2. Indicador: `.dns-inds` > `.dns-ind` (`.dns-ind-rotulo` em cima,
      `.dns-ind-valor` embaixo, `.dns-ind-nota` opcional). Grade de colunas
      iguais; no telefone, duas.
   3. Pilula de estado: `.dns-pilula` + p-ok | p-atualiza | p-problema |
      p-neutro | p-suave. Mesma altura, raio, fonte e bolinha em todas as
      telas; a palavra diz o estado, a cor so reforca. Nunca dentro de frase.
   4. Tabela: `table.dados.dns-tab` com colgroup (largura fixa, nada quebra,
      reticencias + title), linha de 40px, numero a direita, acoes a direita
      em `.dns-fim` com `.dns-mini`.
   5. Formulario: `.grade` de estilo.css; o que quase ninguem mexe fica em
      `details.avancado`; `.acoes` com o botao primario e `.dns-sec`
      (secundario, mesmo tamanho) para Cancelar/Voltar.
   6. Vazio: `.dns-vazio`, uma frase curta, sem caixa. */

/* 1. Cartao */
.dns-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px}
.dns-cab h2{margin:0;flex:0 1 auto}
.dns-cab .dns-sub{color:var(--suave);font-size:12.5px}
.dns-cab .dns-cab-acoes{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dns-cab form.busca{margin:0}
.dns-cab form.busca input{width:16rem;max-width:100%}
.cartao h3.dns-grupo{font:600 13px/1.3 var(--sora);margin:18px 0 2px;color:var(--grafite)}
.cartao .dns-cab+h3.dns-grupo{margin-top:4px}

/* 2. Indicador (faixa de situacao, trafego) */
.dns-inds{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:14px 22px;margin:0}
.dns-ind{display:flex;flex-direction:column;gap:5px;min-width:0;
  border-left:2px solid var(--linha);padding-left:12px}
.dns-ind-rotulo{font:500 10.5px/1.4 var(--mono);color:var(--suave);
  text-transform:uppercase;letter-spacing:.07em}
.dns-ind-valor{font:600 17px/1.3 var(--sora);color:var(--grafite);letter-spacing:-.2px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:24px}
.dns-ind-valor.v-ok .dns-marca{color:var(--ok)}
.dns-ind-valor.v-problema{color:var(--terracota-texto)}
.dns-ind-nota{font-size:12px;color:var(--suave)}
/* Compatibilidade com o bloco de trafego (parcial de outra frente): mesma grade. */
.dns-numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 22px;margin:0 0 14px}
.dns-numeros>div{display:flex;flex-direction:column;gap:5px;min-width:0;
  border-left:2px solid var(--linha);padding-left:12px}
.dns-rotulo{font:500 10.5px/1.4 var(--mono);color:var(--suave);
  text-transform:uppercase;letter-spacing:.07em}
.dns-valor{font:600 17px/1.3 var(--sora);color:var(--grafite)}

/* 3. Pilula de estado */
.dns-pilula{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px 0 8px;
  border-radius:11px;border:1px solid var(--linha);background:var(--osso);color:var(--suave);
  font:500 12px/1 var(--archivo);white-space:nowrap;text-decoration:none;vertical-align:middle}
.dns-pilula::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
a.dns-pilula:hover{border-color:currentColor;color:inherit}
.dns-pilula.p-ok{background:var(--ok-tenue);color:var(--ok);border-color:var(--ok-borda)}
.dns-pilula.p-atualiza{background:var(--mel-tenue);color:var(--mel-texto);border-color:var(--mel-borda)}
.dns-pilula.p-problema{background:var(--terracota-tenue);color:var(--terracota-texto);border-color:var(--terracota-borda)}
.dns-pilula.p-neutro{background:var(--osso);color:var(--suave);border-color:var(--linha)}
.dns-pilula.p-suave{background:var(--papel);color:var(--mel-texto);border-color:var(--mel-borda)}
a.dns-pilula.p-ok:hover{color:var(--ok)}
a.dns-pilula.p-atualiza:hover,a.dns-pilula.p-suave:hover{color:var(--mel-texto)}
a.dns-pilula.p-problema:hover{color:var(--terracota-texto)}
.dns-motivo-curto{color:var(--terracota-texto);font-size:12.5px;margin-left:6px}
.dns-motivo-curto.suave{color:var(--suave)}
.dns-motivo-curto:empty{display:none}

/* 4. Tabela (29/09/2026, pedido do dono): nada quebra no meio. Largura de
   coluna fixa (colgroup com as classes d-*), celula numa linha so; o que nao
   cabe corta com reticencias e aparece inteiro no `title`. */
table.dns-tab{table-layout:fixed;margin-top:0}
table.dns-tab th,table.dns-tab td{white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;vertical-align:middle}
table.dns-tab td{height:40px;padding-top:6px;padding-bottom:6px}
table.dns-tab td.num,table.dns-tab th.num{text-align:right;font-variant-numeric:tabular-nums}
table.dns-tab td.dns-fim,table.dns-tab th.dns-fim{text-align:right;overflow:visible}
table.dns-tab th[scope="row"]{font:500 10.5px/1.4 var(--mono);color:var(--suave);
  text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--linha-suave)}
table.dns-tab .d-ip{width:22%}
table.dns-tab .d-nome{width:34%}
table.dns-tab .d-obs{width:20%}
table.dns-tab .d-quando{width:13em}
table.dns-tab .d-acoes{width:10.5em}
table.dns-tab .d-serial{width:8.5em}
table.dns-tab .d-est{width:10em}
table.dns-tab .d-curta{width:6em}
table.dns-tab .d-ttl{width:7em}
table.dns-tab .d-as{width:6.5em}
table.dns-tab .d-blocos{width:30%}
table.dns-tab .d-bloco{width:34%}
table.dns-tab .d-internet{width:15rem}
table.dns-tab tr.cru td{white-space:normal;height:auto}
table.dns-tab .suave{color:var(--suave)}
.dns-lista-blocos span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.dns-mini,button.dns-mini{display:inline-flex;align-items:center;height:26px;padding:0 10px;
  font:500 12px var(--archivo);border:1px solid var(--linha);border-radius:6px;
  background:var(--papel);color:var(--grafite);text-decoration:none;white-space:nowrap}
a.dns-mini:hover,button.dns-mini:hover{background:var(--osso);color:var(--grafite)}
a.dns-mini+a.dns-mini{margin-left:4px}

/* 5. Formulario e botoes: o primario e o `button` de estilo.css; o
   secundario tem a mesma medida, em papel. */
a.dns-botao,a.dns-sec{display:inline-flex;align-items:center;padding:9px 20px;border-radius:6px;
  white-space:nowrap;font:500 13.5px var(--archivo);text-decoration:none;
  border:1px solid var(--grafite)}
a.dns-botao{background:var(--grafite);color:var(--osso)}
a.dns-botao:hover{background:var(--botao-hover);border-color:var(--botao-hover);color:var(--osso)}
a.dns-sec{background:var(--papel);color:var(--grafite)}
a.dns-sec:hover{background:var(--osso);color:var(--grafite)}
.cartao .avancado{margin-top:4px;padding-top:13px}
.cartao .acoes{margin-top:14px}
.dns-confirma{display:flex;align-items:center;gap:9px;color:var(--grafite);font-size:13px}
.dns-confirma input{width:auto;margin:0;accent-color:var(--mel)}

/* 6. Vazio e frases curtas */
.dns-vazio{color:var(--suave);font-size:13px;margin:4px 0 0}
table.dns-tab td.dns-vazio{white-space:normal}

/* Visao geral: faixa de situacao, lista de alertas, zonas */
.dns-alertas{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--linha-suave);
  display:flex;flex-direction:column;gap:6px}
.dns-alertas li{font-size:13px;color:var(--terracota-texto);display:flex;gap:8px;align-items:baseline}
.dns-alertas li::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  flex:none;transform:translateY(-1px)}
.dns-alertas:empty{display:none}
.dns-aviso-faixa{margin:16px 0 0}
.dns-inds-pe{margin-top:18px;padding-top:14px;border-top:1px solid var(--linha-suave)}
.dns-confirma+.grade{margin-top:12px}
.dns-detalhes{margin-top:18px;border-top:1px solid var(--linha);padding-top:13px}
.dns-detalhes summary{cursor:pointer;font-weight:600;font-size:13px}
.dns-detalhes[open] summary{margin-bottom:8px}
.dns-detalhes ul{margin:8px 0 0;padding-left:18px}

/* Publicar: previa legivel, linha que entra (+) e que sai (-) */
.dns-previa{font:400 11.5px/1.55 var(--mono);background:var(--osso);
  border:1px solid var(--linha-suave);border-radius:6px;padding:8px 10px;
  overflow-x:auto;max-height:28em;margin:6px 0 16px}
.dns-previa div{white-space:pre-wrap;word-break:break-all}
.dns-mais{color:var(--ok)}
.dns-menos{color:var(--terracota-texto)}
.dns-previa-zona{display:flex;gap:8px;align-items:center;margin:12px 0 0;
  font:500 12.5px var(--mono);white-space:nowrap}
.dns-motivo{max-width:32em}
.nowrap{white-space:nowrap}

/* Trafego e protecao. Grafico de 24 h em SVG sem script: a linha e o mel, o
   limite e tracejado em terracota, e "sob ataque" pinta a borda do cartao. */
.dns-graf-titulo{color:var(--suave);font-size:12px;margin:14px 0 4px}
.dns-graf{display:block;width:100%;height:110px;background:var(--osso);border-radius:6px}
.dns-graf-linha{fill:none;stroke:var(--mel);stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.dns-graf-area{fill:var(--mel-tenue);stroke:none}
.dns-graf-limite{stroke:var(--terracota);stroke-width:1;stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke}
.dns-graf-base{stroke:var(--linha);stroke-width:1;vector-effect:non-scaling-stroke}
.dns-graf-alvo{fill:transparent;stroke:none}
.dns-graf-alvo:hover{fill:var(--veu)}
.dns-graf-eixo{display:flex;justify-content:space-between;color:var(--suave);
  font:400 11px var(--mono);margin:2px 0 8px}
.cartao.dns-sob-ataque{border:2px solid var(--terracota)}
.dns-ataque strong{color:var(--terracota-texto)}
@media (max-width:700px){
  .dns-numeros,.dns-inds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dns-cab .dns-cab-acoes{margin-left:0;width:100%}
  .dns-cab form.busca{flex:1}
  .dns-cab form.busca input{width:100%}
  table.dns-tab .d-internet{width:9.5rem}
}

@media print{
  /* `:root:root` repetido de proposito: os dois blocos de tema escuro pesam
     (0,2,0) -- `:root[data-tema="escuro"]` e `:root:not([data-tema="claro"])`
     --, e um `:root` sozinho pesa (0,1,0) e PERDERIA deles na hora de
     imprimir, justo quando o escuro precisa sair de cena. Repetido, empata em
     peso e ganha por vir depois. */
  :root:root{
    color-scheme:light;
    --grafite:#000000; --osso:#FFFFFF; --papel:#FFFFFF; --campo-fundo:#FFFFFF;
    --suave:#3A3A3A; --linha:#9A9A9A; --linha-suave:#C8C8C8;
    --mel:#6A6A6A; --terracota:#6A6A6A;
    --mel-texto:#000000; --terracota-texto:#000000; --ok:#000000;
    --mel-tenue:#FFFFFF; --terracota-tenue:#FFFFFF; --ok-tenue:#FFFFFF;
    --mel-borda:#6A6A6A; --terracota-borda:#6A6A6A; --ok-borda:#6A6A6A;
    --botao-hover:#000000; --foco:transparent; --veu:#C8C8C8;
    --topo-fundo:#FFFFFF; --topo-texto:#000000; --topo-medio:#3A3A3A;
    --topo-fraco:#6A6A6A; --topo-borda:#9A9A9A; --topo-veu:transparent;
    --topo-divisor:#9A9A9A; --topo-alerta:#000000;
  }
  /* Navegacao, busca e botao nao existem em papel. A marca fica: e ela que
     diz de qual sistema saiu a folha que alguem anexa a um processo. */
  .topo,.sub-nav,.acoes,.acoes-topo,.tema,.faixa-alerta,.faixa-contas,button{display:none}
  :root:root img.marca-escuro{display:none}
  :root:root img.marca-claro{display:block}
  body{background:var(--papel);color:var(--grafite)}
  main{max-width:none;margin:0;padding:0}
  main.estreito{max-width:none;margin-top:0}
  a{color:var(--grafite);text-decoration:underline}
  .cartao{border:1px solid var(--linha);break-inside:avoid;page-break-inside:avoid}
  .veredito{break-inside:avoid;page-break-inside:avoid}
  tr.cru code{background:var(--papel);border-left:2px solid var(--mel)}
  .tag,.ok-tag,.off-tag,.dns-pilula{border:1px solid var(--mel)}
  /* Sem fundo colorido o aviso deixaria de ser uma caixa e viraria um
     paragrafo solto no meio da folha. A borda devolve a moldura; o que
     distingue erro de confirmacao passa a ser o texto, que e o que uma
     impressora monocromatica consegue entregar de qualquer jeito. */
  .aviso{border:1px solid var(--linha)}
  .rodape{border-top:1px solid var(--linha)}
}

/* ---- DNS: tráfego por período (leva 265; antes em dns-trafego.css) ---- */
/* Trafego do DNS por periodo (templates/dns_trafego_bloco.html).
   Folha propria, carregada pelo parcial, para juntar ao sistema de desenho
   do modulo DNS sem conflito: toda regra aqui tem o prefixo .dns-trafego- e
   so usa tokens (CONTRATO3: cor crua reprova a suite). */
.dns-trafego-barra{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;
  justify-content:space-between;margin:0 0 12px}
.dns-trafego-periodo{position:relative;min-width:0}
.dns-trafego-periodo>summary{cursor:pointer;list-style:none;display:inline-flex;gap:8px;
  align-items:baseline;padding:6px 12px;border:1px solid var(--linha);border-radius:6px;
  background:var(--papel);color:var(--grafite);font-size:13px;font-weight:600}
.dns-trafego-periodo>summary::-webkit-details-marker{display:none}
.dns-trafego-periodo>summary::after{content:"\25BE";color:var(--suave);font-weight:400}
.dns-trafego-periodo[open]>summary{border-color:var(--mel)}
.dns-trafego-painel{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:14px 22px;
  margin-top:8px;padding:12px 14px;border:1px solid var(--linha);border-radius:8px;
  background:var(--papel)}
.dns-trafego-atalhos{list-style:none;margin:0;padding:0;font-size:13px}
.dns-trafego-atalhos li{margin:0 0 3px}
.dns-trafego-atalhos a{color:var(--grafite);text-decoration:none}
.dns-trafego-atalhos a:hover{text-decoration:underline}
.dns-trafego-atalhos a.atual{color:var(--mel-texto);font-weight:600}
.dns-trafego-livre{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.dns-trafego-livre label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--suave)}
.dns-trafego-livre input{padding:5px 8px;font-size:12.5px}
.dns-trafego-livre button{align-self:flex-start;padding:6px 14px;font-size:12.5px}
.dns-trafego-servidores{display:inline-flex;border:1px solid var(--linha);border-radius:6px;overflow:hidden}
.dns-trafego-servidores a{padding:6px 12px;font-size:13px;color:var(--grafite);text-decoration:none;
  background:var(--papel)}
.dns-trafego-servidores a+a{border-left:1px solid var(--linha)}
.dns-trafego-servidores a.atual{background:var(--mel-tenue);color:var(--mel-texto);font-weight:600}
.dns-trafego-aviso{margin:0 0 10px;padding:6px 10px;border-left:3px solid var(--terracota);
  background:var(--terracota-tenue);color:var(--grafite);font-size:13px}
/* indicador: rotulo pequeno em cima, valor embaixo */
.dns-trafego-numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px}
.dns-trafego-ind{display:flex;flex-direction:column;gap:2px;min-width:0}
.dns-trafego-rotulo{color:var(--suave);font-size:12px;font-weight:400;margin:0}
.dns-trafego-valor{font:600 20px var(--sora);color:var(--grafite)}
.dns-trafego-nota{color:var(--suave);font-size:12px;overflow-wrap:anywhere}
/* graficos */
.dns-trafego-fig{margin:12px 0 0}
.dns-trafego-titulo{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;
  color:var(--suave);font-size:12px;margin:0 0 4px}
.dns-trafego-legenda{display:inline-flex;flex-wrap:wrap;gap:4px 12px;color:var(--grafite)}
.dns-trafego-legenda>span{display:inline-flex;align-items:center;gap:5px}
.dns-trafego-chave{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--mel)}
.dns-trafego-graf{display:block;width:100%;overflow:visible}
.dns-trafego-grade{stroke:var(--linha-suave);stroke-width:1}
.dns-trafego-marca{stroke:var(--linha-suave);stroke-width:1}
.dns-trafego-base{stroke:var(--linha);stroke-width:1}
.dns-trafego-ytexto,.dns-trafego-xtexto{fill:var(--suave);font:400 11px var(--mono);pointer-events:none}
.dns-trafego-linha{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.dns-trafego-area{stroke:none}
.dns-trafego-alvo{fill:transparent;stroke:none}
.dns-trafego-alvo:hover{fill:var(--veu)}
/* series: cor pela entidade, nunca pela ordem de chegada */
.dns-trafego-linha.dns-trafego-s-total{stroke:var(--mel)}
.dns-trafego-area.dns-trafego-s-total{fill:var(--mel-tenue)}
.dns-trafego-chave.dns-trafego-s-total{background:var(--mel)}
.dns-trafego-linha.dns-trafego-s-ns1{stroke:var(--grafite);stroke-width:1.5}
.dns-trafego-chave.dns-trafego-s-ns1{background:var(--grafite)}
.dns-trafego-linha.dns-trafego-s-ns2{stroke:var(--suave);stroke-width:1.5;stroke-dasharray:4 3}
.dns-trafego-chave.dns-trafego-s-ns2{background:var(--suave)}
.dns-trafego-linha.dns-trafego-s-nsd{stroke:var(--terracota)}
.dns-trafego-chave.dns-trafego-s-nsd{background:var(--terracota)}
.dns-trafego-linha.dns-trafego-s-fw{stroke:var(--grafite);stroke-width:1.5}
.dns-trafego-chave.dns-trafego-s-fw{background:var(--grafite)}
@media (max-width:700px){
  .dns-trafego-numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dns-trafego-painel{grid-template-columns:minmax(0,1fr)}
}