/* Base visual do CR Hub — o CSS do mockup aprovado (decisão 11.8).
   O que foi acrescentado ao mockup está na última seção: estados de erro,
   caixa de pesquisa e avisos consolidados, que a tela real precisa e a
   referência visual não tinha. */

:root{
  --ink:#16191C; --paper:#F1F2EF; --card:#FFFFFF; --steel:#6B7580;
  --line:#DCDFDA; --amber:#C97D14; --red:#B33A32; --green:#2E7D4F;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45}

header{background:var(--ink);color:#fff;padding:12px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.brand span{color:var(--amber)}
/* A marca é um link para a home (RA-77); o reset abaixo é o mesmo padrão já
   usado em `.btn` para `<a>` não herdar azul, sublinhado nem `:visited` do
   navegador. */
a.brand,a.brand:visited,a.brand:hover,a.brand:active{color:#fff;text-decoration:none}
a.brand:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:2px}
/* A navegação fica ao lado da marca; quem vai para a direita é o menu do
   usuário (`.usuario`, na seção da casca). */
nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
nav a{color:#9AA3AB;padding:8px 14px;border-radius:3px;text-decoration:none}
nav a.on{background:#2A2F34;color:#fff}
nav a:hover{color:#fff}
nav a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

main{max-width:1180px;margin:0 auto;padding:24px 20px 80px}

h1{font-size:22px;font-weight:600;letter-spacing:-.01em}
.sub{color:var(--steel);font-size:13px;margin-top:2px;margin-bottom:20px}

/* Trilha contextual (decisão 11.54): única convenção para o rastro textual de
   operação secundária/revisão com contexto pai identificável. Renderizada
   pelo include único `producao/blocos/_trilha.html`; substitui as antigas
   `.caminho` e `.crumbs`, que não coexistem mais. */
.trilha{color:var(--steel);font-size:12px;margin:0 0 4px}

.card{background:var(--card);border:1px solid var(--line);border-radius:6px;margin-bottom:16px}
.card > h2{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--steel);
  padding:12px 18px;border-bottom:1px solid var(--line);font-weight:600}
/* Cabeçalho escuro de card, sob classe própria (decisão 11.44): a tinta do
   sistema, `--ink`, com texto branco em negrito forte. Marca o bloco que
   ancora a tela — a meta global da redução, a identificação do movimento de
   material — sem transformar em escuro todo card da aplicação: vale só onde a
   classe é pedida, e `.card > h2` continua claro em toda parte. */
.card.titulo-escuro > h2{background:var(--ink);color:#fff;font-weight:700;
  border-bottom-color:var(--ink);border-radius:5px 5px 0 0}
.body{padding:18px}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--vao-grid,14px)}
/* Card Identificacao da OF de Equipamento (criacao e correcao estrutural):
   uma regua vertical so. Cada `.grid` do card fica da faixa de serie -- e da
   linha anterior -- a mesma distancia que separa as linhas dentro do proprio
   `.grid`. Antes eram 18px inline entre os blocos contra 14px dentro deles:
   dois ritmos na mesma coluna, o maior deles herdado das notas removidas.
   Classe compartilhada em vez de estilo inline, e a distancia acompanha
   sozinha o `gap` reduzido da viewport estreita. */
.identificacao-em-linhas>.grid{margin-top:var(--vao-grid,14px)}
/* O aviso do atalho por codigo nasce vazio e so recebe texto pelo
   JavaScript. Vazio ele nao ocupa altura, mas ainda contava um vao de
   `.f` -- 5px que ficaram sobrando na coluna quando as notas vizinhas
   sairam. Escondido enquanto vazio, o elemento continua no DOM e volta
   sozinho assim que o JavaScript escreve nele. */
.identificacao-em-linhas .note:empty{display:none}
.f{display:flex;flex-direction:column;gap:5px}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c12{grid-column:span 12}
@media(max-width:820px){.c2,.c3,.c4,.c5,.c6{grid-column:span 12}}

label{font-size:12px;color:var(--steel);font-weight:500}
label .req{color:var(--red);margin-left:2px}
.auto{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--amber);
  border:1px solid var(--amber);border-radius:2px;padding:0 4px;margin-left:6px}
.opt{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel);margin-left:6px}

input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:4px;
  background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--amber);outline-offset:-1px}
input[readonly]{background:#F6F7F5;color:var(--steel);font-family:var(--mono)}
.mono{font-family:var(--mono)}

.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;cursor:pointer}
.chk input{width:auto}

/* faixa de série — elemento assinatura */
.faixa{display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;border-radius:5px;padding:14px 18px}
.faixa .n{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em}
.faixa .bar{flex:1;height:3px;background:linear-gradient(90deg,var(--amber),#3A4046);border-radius:2px;position:relative}
.faixa .qt{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#9AA3AB}
/* Série inicial e Quantidade: mesmo alinhamento central, sem os controles
   nativos de incremento — os dois campos passaram a ser `<input type=text>`
   com `inputmode=numeric` (Pacote 1A). */
.faixa input{background:#2A2F34;border-color:#3A4046;color:#fff;margin-top:6px;text-align:center}
.faixa .campo{min-width:110px}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel);
  font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:8px 10px;border-bottom:1px solid #EFF0ED}
tr:last-child td{border-bottom:0}
td select,td input{padding:6px 8px}

/* `.btn` também veste `<a>` (RA-72.1): sem o reset explícito de cor e
   sublinhado, o navegador aplica a folha padrão de link — azul, sublinhado,
   roxo em `:visited` —, que nenhuma das outras regras de `.btn` sobrescrevia.
   `inline-flex` alinha o texto verticalmente do mesmo jeito em `<a>` e
   `<button>`, que têm caixas padrão diferentes. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-weight:600;line-height:1.2;padding:9px 16px;border-radius:4px;
  cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);
  text-decoration:none;white-space:nowrap}
a.btn,a.btn:visited,a.btn:hover,a.btn:active{color:var(--ink);text-decoration:none}
.btn:hover{border-color:#B7BCB5}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.btn.pri,a.btn.pri,a.btn.pri:visited{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.pri:hover{background:#2A2F34;border-color:#2A2F34}
.btn.mini{padding:5px 10px;font-size:12px;font-weight:500}
.btn.del,a.btn.del,a.btn.del:visited{color:var(--red);border-color:#E8D3D1}
.btn.del:hover{background:#FBEBEA}
.btn[disabled]{opacity:.6;cursor:progress}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}

.tag{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  padding:3px 8px;border-radius:3px}
.t-nova{background:#EAF1F7;color:#2C5A80}
.t-parc{background:#FBF0DC;color:#8A5A0B}
.t-fech{background:#E4F0E9;color:var(--green)}
.t-fim{background:#ECECEA;color:var(--steel)}
/* Inutilizada tem cor própria desde a referência do Pacote 1B: cinza a
   confundia com "cancelada pela redução", que é outro fim de linha e outra
   causa. O mapa de classes é um só (`CLASSE_DO_STATUS`), então busca e detalhe
   mostram o mesmo badge. */
.t-inut{background:#F3E7E6;color:#8A3F37}
/* `Conciliada com ressalva` na fila de NFs do cliente (D3-5R-C2): inteiramente
   explicada, com a exceção à vista — o âmbar claro da família de atenção
   (`.btn.atencao`), sem valor de cor novo. */
.t-ressalva{background:#FDF3E2;color:#7A5510}

.alert{display:flex;gap:12px;align-items:flex-start;border-radius:5px;padding:12px 14px;font-size:13px;margin-bottom:14px}
.alert.warn{background:#FDF3E2;border:1px solid #EBD5A8;color:#7A5510}
.alert.stop{background:#FBEBEA;border:1px solid #E8CBC8;color:#8A2F28}
.alert b{display:block;margin-bottom:2px}
.alert ul{margin:6px 0 0 18px}

.painel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:5px;overflow:hidden}
.painel div{background:#fff;padding:7px 10px}
.painel .k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel)}
.painel .v{font-size:13px;font-weight:600;margin-top:2px}
.painel .v.mono{font-family:var(--mono);font-size:15px}

.note{font-size:12px;color:var(--steel);margin-top:8px}
.success{background:#E7F2EB;border:1px solid #BDD8C7;color:#235F3C;border-radius:5px;
  padding:12px 14px;margin-bottom:16px}
.toolbar{display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .group{display:flex;gap:8px;flex-wrap:wrap}
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.detail-grid > div{padding:12px 14px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.detail-grid > div:nth-child(4n){border-right:0}
.detail-grid .wide{grid-column:span 2}
.detail-grid .k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel)}
.detail-grid .v{font-size:14px;font-weight:600;margin-top:3px}
.review-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.review-list > div{background:#fff;padding:11px 14px}
.review-list .k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel)}
.review-list .v{font-weight:600;margin-top:2px}
/* --- Componentes da configuracao: a tabela editavel do formset ------- */
/* Compactacao escopada (complementacao visual de 20/08/2026). A tabela
   nascia com o ritmo das tabelas de leitura, mas cada linha aqui ja e alta
   por conta dos proprios controles; o recuo global de `th`/`td` continua
   valendo em todas as outras tabelas do sistema.

   `QTD. POR EQUIPAMENTO` mede 148px em Segoe UI Semibold 11px com o
   `letter-spacing` de .08em, e nao cabia nos 150px do `<th>`, que ainda
   descontam 20px de recuo -- por isso quebrava em duas linhas. A coluna vai
   a 176px e os 8px vem da coluna de acao, que nao tem titulo e so precisa
   caber o botao `Remover`: 47px de texto em 12px, mais 20 de recuo e 2 de borda
   -- 69px de botao, 89px com o recuo da celula. 92px deixa a largura declarada
   valer de fato; 88px teria ficado 1px curta e a coluna cresceria sozinha.

   O `nowrap` vale so acima do corte de 820px: entre 561 e 820px a tabela
   ainda e lado a lado e forcar uma linha so aumentaria a largura minima
   dela; abaixo de 560px o `<thead>` nem existe, porque as celulas
   empilham. */
/* Segunda passada de compactacao (mesma data): o corpo do card ainda tinha
   quatro respiros de tamanhos diferentes -- 18px acima do cabecalho, 10px
   entre cabecalho e campos, 18px ate o botao e 18px abaixo dele. Agora e um
   respiro so, de 8px, nos quatro pontos: o recuo vertical do corpo, o par
   `th`/`td` que separa cabecalho e campos, e a distancia ate o botao
   `Adicionar componente`. O recuo horizontal do corpo continua em 18px --
   nenhuma largura muda -- e `.body` global fica como esta em todo o resto do
   sistema. Abaixo de 560px as celulas empilham e o bloco estreito adiante
   redefine os proprios recuos, entao nada disto o alcanca. */
.corpo-de-componentes{padding:8px 18px}
.corpo-de-componentes .acoes-de-componente{margin-top:3px}
.tabela-componentes th{padding:2px 10px 3px}
.tabela-componentes td{padding:4px 10px}
.tabela-componentes td select,.tabela-componentes td input{padding:5px 8px}
.tabela-componentes col.col-tipo{width:170px}
.tabela-componentes col.col-quantidade{width:176px}
.tabela-componentes col.col-acao{width:92px}
@media(min-width:821px){.tabela-componentes th.qtd{white-space:nowrap}}
/* Pacote A das melhorias de interação (decisão 11.95, item 1): o bloco de
   lotes deixa de ser uma seção à parte. Somem a faixa cinza e o recuo de 160px
   que o alinhava sob a coluna `Componente` — o vínculo com o Transformador já
   vem da posição (a linha imediatamente acima) e da borda de `td` que fecha o
   par. O recuo horizontal passa a ser o mesmo das demais células da tabela, e
   por isso o corte de 820px não precisa mais corrigi-lo. */
.lote-row td{padding:6px 10px 8px}
@media(max-width:820px){
  .detail-grid,.review-list{grid-template-columns:1fr}
  .detail-grid .wide{grid-column:span 1}
  .detail-grid > div{border-right:0}
}

/* ------------------------------------------------------------------ */
/* Acréscimos da tela real                                            */
/* ------------------------------------------------------------------ */

/* Erro por campo: a mensagem fica colada ao controle que a produziu. */
.erro{color:var(--red);font-size:12px}
.erro ul{list-style:none}
input.invalido,select.invalido,textarea.invalido{border-color:var(--red)}

/* Pesquisa: caixa de texto + resultados do endpoint, com o identificador
   num campo oculto. O catálogo nunca é renderizado no HTML. */
.busca{position:relative}
.busca .resultados{position:absolute;z-index:20;top:100%;left:0;right:0;background:#fff;
  border:1px solid var(--line);border-radius:0 0 4px 4px;max-height:280px;overflow:auto;
  box-shadow:0 6px 18px rgba(22,25,28,.12)}
.busca .resultados:empty{display:none}
.busca .resultados button{display:block;width:100%;text-align:left;background:#fff;border:0;
  border-bottom:1px solid #EFF0ED;padding:8px 10px;font:inherit;cursor:pointer}
.busca .resultados button:last-child{border-bottom:0}
.busca .resultados button.ativo,.busca .resultados button:hover{background:#F6F7F5}
.busca .escolhido{font-size:12px;color:var(--green);margin-top:4px}
.busca .escolhido.vazio{color:var(--steel)}

/* Recusa da busca (sessão/capacidade/entrada, ou falha de rede) — nunca
   "nenhum resultado", que é `.busca-sem-resultados` dentro de `.resultados`
   (achado de homologação sobre `b26b5df`). Cor de erro, para ficar
   claramente distinta do texto neutro/itálico da lista vazia. */
.busca-erro{margin-top:4px;font-size:12px;color:var(--red)}

/* Busca com seta (Marco 10, Pacote 10B, decisão 11.55): mesma composição do
   input-group de data (`.data-com-calendario`) — texto + botão formando um
   único controle, sem gap entre eles. Só existe onde a busca aceita termo
   vazio sobre um catálogo já restrito e pequeno (hoje, só o Transformador da
   criação de OF de Componente); as demais buscas não ganham este wrapper. */
.busca-com-seta{display:flex;align-items:stretch}
.busca-com-seta .pesquisa{flex:1;border-top-right-radius:0;border-bottom-right-radius:0;
  border-right:0}
.busca-com-seta [data-seta]{border-top-left-radius:0;border-bottom-left-radius:0}

/* Prévia do desenho técnico (Marco 10, Pacote 10C-3, decisões 11.56 e 11.58).

   Funcional e responsiva, sem refinamento especializado: a revisão visual das
   telas de OF de Componente é um pacote transversal depois do Marco 15
   (decisão 11.57), e antecipá-la aqui produziria retrabalho.

   Quem manda na visibilidade é `data-estado`, escrito pelo JavaScript. Assim o
   script não decide estilo e o HTML nasce coerente: sem JavaScript o bloco fica
   em `sem_selecao`, mostrando só a instrução — cartão e folha continuam
   escondidos, e a criação da OF segue igual. */
.desenho{border:1px solid var(--line);border-radius:5px;padding:12px 14px;
  background:#FAFBFA}
.desenho [data-desenho-mensagem]{margin-top:0}
/* `flex-wrap` é o que resolve o estreito aqui, sem precisar de um corte novo: o
   botão desce para a própria linha quando a identificação não deixa espaço. O
   corte de 560px continua sendo um bloco único, no fim da folha, do pacote de
   responsividade transversal. */
.desenho-cartao{display:none;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line)}
/* Sem mensagem acima para separar (detalhe: `of.desenho_tecnico` já existe e o
   cartão nasce como único filho), a divisória fica órfã — nada há para
   dividir. */
.desenho-cartao:first-child{margin-top:0;padding-top:0;border-top:none}
.desenho-identificacao{display:flex;flex-direction:column;gap:2px;min-width:0}
.desenho-identificacao .note{margin-top:0}
.desenho-folha{display:none;margin-top:12px}
/* A folha nasce com a proporção A4 (210 × 297) e um teto de altura, para não
   empurrar o botão `Revisar OF` para fora da tela numa janela baixa.
   `width:100%` sem `max-width` fixo: a folha ocupa a largura inteira do card
   (RA-126, homologação — o corte antigo de 620px deixava um vão vazio à
   direita em cards mais largos). A altura continua vindo só do
   `aspect-ratio`, com o mesmo teto de `max-height`. */
.desenho-folha object{display:block;width:100%;
  aspect-ratio:210/297;max-height:70vh;border:1px solid var(--line);
  border-radius:4px;background:#fff}
.desenho-folha object p{padding:12px 14px}
.desenho[data-estado="com_desenho"] .desenho-cartao{display:flex}
.desenho[data-estado="erro"]{border-color:#E8CBC8;background:#FBEBEA}

/* A folha incorporada é exclusiva da tela ampla — o mesmo corte que o
   JavaScript consulta em `matchMedia` antes de criar o `<object>`. Abaixo dele
   fica o cartão com versão e `Abrir desenho`: uma folha A4 reduzida a 390px não
   é legível, e o link abre o PDF no visualizador do próprio aparelho. */
@media(min-width:900px){
  .desenho[data-estado="com_desenho"] .desenho-folha{display:block}
}

/* `.lote` é a linha compartilhada de lote/quantidade/ação: ela veste tanto as
   alocações da configuração (dentro de `.lotes`) quanto os formulários de
   `Gerenciar lotes` e de material do detalhe da OF, que não são deste pacote.
   Por isso o que muda no Pacote A entra escopado por `.lotes .lote`, e estas
   regras base continuam exatamente como estavam. */
.lote{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.lote .f{flex:1;min-width:240px}
.lote .qtd{max-width:150px}
/* `Remover lote`: cabe ao texto, sem reservar uma coluna inteira (correção
   visual do Pacote 1A). */
.lote .f.compacta{flex:0 0 auto;min-width:0}
.escondido{display:none}

/* --- Vinculação de lote da configuração (Pacote A, decisão 11.95) ---- */
/* Lotes como linhas compactas sob um rótulo só: a altura do bloco cresce pelo
   número de lotes, não por cabeçalho repetido. */
.lotes{display:flex;flex-direction:column;gap:6px}
/* Sem lote nenhum, a lista não ocupa espaço (Pacote 1A: área compacta). */
.lotes:empty{display:none}
/* Rótulo único do grupo e `+ Adicionar lote` na mesma linha. Ele é o único
   cabeçalho do bloco e não se repete por lote; o Transformador já está nomeado
   na linha de componente acima, e a opcionalidade é dita uma vez só. */
.lotes-cabecalho{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.lotes-rotulo{font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--steel)}
.lotes-rotulo .opcional{text-transform:none;letter-spacing:0;font-weight:400;
  color:#9AA3AB;margin-left:4px}
/* `flex-start` e não `flex-end`: com os rótulos fora da tela, os três
   controles nascem na mesma linha de topo, e a mensagem de erro de um deles
   cresce para baixo sem deslocar os vizinhos — o estado inválido muda o
   estado, não o arranjo. */
.lotes .lote{gap:8px;align-items:flex-start}
/* A quantidade é um número curto: largura fixa, em vez de metade da linha. */
.lotes .lote .qtd{flex:0 0 96px;min-width:0;max-width:none}
/* `Remover lote` vira glifo na mesma linha do lote e da quantidade. O rótulo
   visível é curto e o nome acessível carrega o contexto — o mesmo contrato da
   decisão 11.52. O quadrado mínimo impede que o alvo encolha com o texto. */
.lotes .lote .remover-lote{padding:5px 9px;font-size:15px;line-height:1.2;min-width:32px}
/* O rótulo de cada campo sai da tela, não do documento: o leitor de tela
   continua lendo `Lote de abastecimento` e `Quantidade alocada`, e sem
   JavaScript nada disto muda. A regra é declarada acima do corte estreito, em
   vez de ser desfeita dentro dele: abaixo de 560px a linha empilha e o rótulo
   único do grupo deixa de dizer qual dos dois campos é a quantidade — lá o
   rótulo simplesmente continua visível, como nasce. */
@media(min-width:561px){
  .lotes .lote .rotulo-do-campo{position:absolute;width:1px;height:1px;margin:-1px;
    padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

/* Data de entrega: campo digitável + botão que abre o calendário nativo, os
   dois formando um único controle (input-group), sem espaço entre eles —
   o botão encosta na borda direita do campo, compartilhando uma borda só
   (correção visual do Pacote 1A). O `<input type=date>` que o calendário
   controla fica fora da tela, mas ainda "renderizado" — só assim
   `showPicker()` funciona. */
.data-com-calendario{display:flex;align-items:stretch}
.data-com-calendario input[type="text"]{flex:1;border-top-right-radius:0;
  border-bottom-right-radius:0;border-right:0}
.data-com-calendario [data-abrir-calendario]{border-top-left-radius:0;
  border-bottom-left-radius:0}
.data-com-calendario [data-calendario-nativo]{position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none;overflow:hidden}
/* Ícone de calendário (correção do pacote D3C, achado de Augusto em
   12/08/2026): `📅` variava de traço e cor entre sistemas operacionais e
   fontes. `display:block` evita a folga inline que um `<svg>` deixa abaixo da
   linha de base dentro de `.btn` — sem isso o botão cresceria alguns pixels a
   mais que os outros `.btn.mini` da mesma tela. */
.icone-calendario{display:block}
/* Mesma razão para o ícone da ação de copiar do Fiscal (RA-158, quinta
   rodada): sem `display:block` o `<svg>` deixa a folga da linha de base e o
   `.btn.mini` que o envolve cresce alguns pixels a mais que os vizinhos. */
.icone-copiar{display:block}

/* Cliente/Finalidade: o seletor tem só duas opções e não deve competir por
   espaço com o controle efetivo (busca de cliente ou finalidade), que é quem
   precisa da largura da linha (Ajustes visuais do primeiro teste). */
[data-destino] select{flex:0 0 150px;width:150px}

/* Cada sub-OF é um contêiner visual único: cabeçalho, andamento, configuração,
   componentes, correção de estrutura e histórico ficam dentro do mesmo bloco,
   e fica evidente onde uma sub-OF termina e a seguinte começa (Ajustes visuais
   do primeiro teste). */
.sub-of{border:1px solid var(--line);border-radius:8px;margin-bottom:24px;overflow:hidden;background:#FAFAF8}
.sub-of>.cabecalho{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--ink);color:#fff;flex-wrap:wrap}
.sub-of>.cabecalho .letra{font-size:15px;font-weight:700;letter-spacing:.02em}
.sub-of>.cabecalho .serie{font-size:12px;color:#9AA3AB;font-family:var(--mono)}
.sub-of>.corpo{padding:14px 16px 18px}
.sub-of>.corpo>.card:last-child{margin-bottom:0}

/* Densidade dos cards internos da sub-OF (RA-72.2), na escala do mockup. O
   card de Identificação fica fora de `.sub-of` e não é afetado — mantém a
   hierarquia atual (não é o alvo desta compactação). */
.sub-of .card{margin-bottom:12px}
.sub-of .card>h2{padding:8px 14px;font-size:10.5px;letter-spacing:.1em}
.sub-of .body{padding:10px 14px}
.sub-of .detail-grid>div{padding:7px 10px}
.sub-of .detail-grid .k{font-size:10px}
.sub-of .detail-grid .v{font-size:13px}

/* Auditoria legível: inclusão, remoção e mudança de quantidade de componente,
   nunca o par bruto de identificadores (Ajustes visuais do primeiro teste). */
.diff-novo{color:var(--green)}
.diff-removido{color:var(--red);text-decoration:line-through}

/* ------------------------------------------------------------------ */
/* Busca e listagem de OFs de Equipamento (Pacote 1B, decisão 11.37)  */
/* ------------------------------------------------------------------ */

/* `main` mais largo só nesta página (achado do navegador real em Full HD):
   1180px sobrava espaço vazio nas laterais e espremia as nove colunas em
   rolagem horizontal desnecessária. `body.pagina-listagem-of` é a única
   página que declara essa classe (mesmo padrão de `body.entrada` acima); o
   `main{max-width:1180px}` global, usado por toda outra página, não muda —
   `main` aqui só sobrescreve `max-width`, herdando margem e padding de lá.
   Em telas menores que 1600px de largura útil, `main` continua ocupando todo
   o espaço disponível (comportamento normal de bloco), só limitado pelo teto;
   é a tabela — não o `main` — quem rola na horizontal quando a viewport é
   menor que a largura mínima das nove colunas (min-width acima). */
body.pagina-listagem-of main{max-width:1600px}
body.pagina-listagem-apontamentos main{max-width:1600px}
/* As consultas do Fiscal entram no mesmo padrão (homologação de 06/09/2026).
   Era esta a causa de os filtros do Fiscal parecerem menores e mais apertados
   que os da Produção: o markup e as classes sempre foram os mesmos
   (`.card.filtros`, `.linha`, `.f`, `.f.ampla`), mas o `main` de 1180px
   espremia os mesmos campos — o texto da pesquisa, que é `flex:1`, ficava com
   uma fração da largura que tem lá, e a segunda linha de filtros quebrava. Com
   o mesmo teto, a mesma composição produz o mesmo resultado, e não há um
   segundo padrão de formulário. */
body.pagina-pedidos main,body.pagina-notas main{max-width:1600px}

/* Abas de `Consultar OFs` (Marco 10, Pacote 10D, decisão 11.55): navegação
   simples entre as duas consultas, sem JavaScript — cada aba é uma rota `GET`
   própria. Funcional e acessível (foco visível, `aria-current`), sem
   antecipar a revisão visual especializada posterior ao Marco 15. */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.abas a,.abas a:visited{padding:8px 14px;font-size:13px;font-weight:600;
  color:var(--steel);text-decoration:none;border-bottom:2px solid transparent;
  margin-bottom:-1px}
.abas a:hover{color:var(--ink)}
.abas a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--amber)}
.abas a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* A aba que existe na estrutura e ainda não tem conteúdo — `NF de remessa` em
   `Notas fiscais` (D3-5R-C2; handoff D3, 1.5): cinza, sem sublinhado, sem hover
   e sem cursor de clique. É `<span>`, não link, e por isso nunca recebe foco. */
.abas .aba-desabilitada{padding:8px 14px;font-size:13px;font-weight:600;
  color:var(--steel);opacity:.55;border-bottom:2px solid transparent;
  margin-bottom:-1px;cursor:default}

/* Card de filtros: mais compacto que `.body`, com uma linha por grupo e
   separador entre elas. `.f` (rótulo acima do controle) é o mesmo do resto
   do sistema. */
.card.filtros{padding:14px 16px}
.filtros .linha{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
/* Causa real do "Mais filtros sempre aberto" (achado da homologação visual):
   `[hidden]` é estilo do navegador (origem UA), e uma regra de autor sempre
   vence a UA na mesma importância, **qualquer que seja a especificidade** —
   `display:flex` acima bastava para anular `[hidden]{display:none}` mesmo com
   o atributo presente e `aria-expanded="false"` corretos. Esta regra de
   autor, mais específica que a de cima, devolve o comportamento nativo. */
.filtros .linha[hidden]{display:none}
.filtros .linha+.linha:not([hidden]){margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.filtros .f{min-width:150px}
.filtros .f.tipo-busca{min-width:130px}
.filtros .f.ampla{flex:1;min-width:320px}
.filtros .f.referencia{min-width:160px}
/* RA-89: com o botão de calendário (`.data-com-calendario`), a caixa de
   período soma o próprio campo (`dd/mm/aaaa`, ~90px de conteúdo) e o botão
   `.btn.mini` (~36px) lado a lado, sem gap entre eles — 130px encostaria os
   dois na borda; 160px dá a mesma folga confortável de `.referencia`. */
.filtros .f.periodo{min-width:160px}
.filtros .f.equipamento{min-width:220px}
.filtros .chk-atraso{display:flex;align-items:center;gap:8px;font-size:13px;padding:8px 10px;
  color:var(--ink);font-weight:400;cursor:pointer}
.filtros .chk-atraso input{width:auto}
.filtros .btn.mini{padding:8px 14px;font-size:12.5px}

/* Estado inicial e busca sem resultado: nenhum dos dois é erro, e nenhum
   ocupa o espaço de uma tabela. */
.orientacao{text-align:center;color:var(--steel);font-size:13px;padding:36px 0}
.sem-resultados{background:var(--card);border:1px dashed var(--line);border-radius:6px;
  padding:32px;text-align:center;margin-bottom:16px}
.sem-resultados p{font-size:13px;color:var(--steel);margin-bottom:10px}

.resultados-de-of{background:var(--card);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;margin-bottom:16px}
/* Abaixo da largura mínima da tabela, rola na horizontal em vez de espremer
   Equipamento e Destino. O rodapé fica fora do contêiner que rola. */
.tabela-rolavel{overflow-x:auto}
/* RA-88: classes de coluna exclusivas com prefixo `col-`, nunca um nome
   genérico — `<col class="lote">` colidia com `.lote{display:flex}` (o
   contêiner de lote de Transformador, em `_linha_alocacao.html`); o `<col>`
   herdava `display:flex`, parava de participar do modelo de colunas e
   deslocava a largura de toda coluna seguinte. Nenhuma delas reaproveita um
   nome de componente já usado em outro lugar do arquivo. Distribuição
   redesenhada após a homologação visual e novamente após o ajuste de largura
   da página (achado do navegador real): Equipamento e Destino — as colunas
   de texto — continuam com a largura que Lote e Ações não precisam;
   Qtd./Meta e Entrega ganharam folga própria para o cabeçalho de uma não
   encostar no da outra, e Setor manteve o espaço para não parecer colado. */
table.listagem{min-width:1190px;table-layout:fixed}
table.listagem th{padding:9px 12px}
table.listagem td{padding:8px 12px;vertical-align:middle}
table.listagem col.col-lote{width:60px}
table.listagem col.col-serie{width:84px}
table.listagem col.col-equipamento{width:340px}
table.listagem col.col-destino{width:260px}
table.listagem col.col-qtd{width:84px}
table.listagem col.col-entrega{width:104px}
table.listagem col.col-setor{width:90px}
table.listagem col.col-status{width:112px}
table.listagem col.col-acoes{width:56px}

/* O lote é o atalho principal para o detalhe (decisão 11.37): âmbar, mono e
   sem sublinhado em nenhum estado — o foco de teclado continua visível.
   `lote-link`, não `lote` (RA-88): o mesmo motivo do `<col>` acima.

   O escopo alcança também `body.fiscal` (Pacote D1-10): o número do pedido é o
   atalho principal para o detalhe do pedido pela mesma razão, e o §5.8 do guia
   descreve o componente como do sistema, não da tabela de OFs. A tabela do
   Fiscal não é `table.listagem` — ela não tem `table-layout:fixed` nem as
   larguras por `<col>` da listagem de OFs —, então herdar pelo nome do
   contêiner deixaria o link azul e sublinhado do navegador em produção. */
.listagem a.lote-link,.listagem a.lote-link:visited,.listagem a.lote-link:active,
body.fiscal a.lote-link,body.fiscal a.lote-link:visited,body.fiscal a.lote-link:active{
  font-family:var(--mono);font-weight:600;color:var(--amber);text-decoration:none}
.listagem a.lote-link:hover,body.fiscal a.lote-link:hover{color:#a8690f;text-decoration:none}
.listagem a.lote-link:focus-visible,body.fiscal a.lote-link:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px}
.listagem .secundaria,body.fiscal .secundaria{font-size:10.5px;color:var(--steel);margin-top:1px}
.listagem .secundaria.mono,body.fiscal .secundaria.mono{font-family:var(--mono)}
/* Faixa de séries alinhada à esquerda — cabeçalho e valores — na
   apresentação aprovada após a homologação visual. */
.listagem th.faixa-serie,.listagem td.faixa-serie{text-align:left}
.listagem td.faixa-serie{font-family:var(--mono);font-size:12px;line-height:1.35}
/* `max-width:1px` com `table-layout:fixed` é o que faz o truncamento valer: a
   célula passa a respeitar a largura da coluna, e o texto inteiro continua
   disponível no `title`. */
.listagem td.trunca{max-width:1px}
.listagem .truncada{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listagem th.qtd,.listagem td.qtd{text-align:center}
.listagem td.qtd{font-family:var(--mono)}
.listagem td.atrasada{color:var(--red);font-weight:600}
.listagem th:last-child,.listagem td.acoes{white-space:nowrap}
/* Ações estreita e alinhada à direita — cabeçalho e botão — na apresentação
   aprovada após a homologação visual. */
.listagem th.acoes,.listagem td.acoes{text-align:right}

.listagem td.acoes{position:relative}
.acoes-de-of{font:inherit;width:28px;height:28px;padding:0;line-height:1;border-radius:4px;
  cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--steel)}
.acoes-de-of:hover{background:#F3F4F1}
.acoes-de-of:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
/* Só a caixa mora aqui; quem posiciona é `posicionarMenu()`, que ao abrir
   troca para `position:fixed` com `top`/`left` calculados. Os valores abaixo
   são a posição de partida usada para medir a caixa antes do cálculo — e o
   que sobra caso o menu apareça sem o JavaScript, que é o único capaz de
   tirar o `hidden`. `z-index` alto porque, sendo `fixed`, o menu concorre no
   contexto de empilhamento da raiz com a `.ofbar` sticky do detalhe
   (`z-index:60`), sob a qual o mini-histórico o deixava passar. */
.menu-de-acoes{position:absolute;right:8px;top:calc(100% + 2px);background:#fff;
  border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 20px rgba(22,25,28,.14);
  min-width:130px;z-index:70;overflow:hidden}
/* `white-space:nowrap` (pacote de responsividade): a largura do menu é
   "encolher para caber", e o `min-width` acima é o único piso. Com uma ação só
   (`Visualizar`) 130px bastava; com `Registrar apontamento` no menu (emenda de
   12/08/2026 à decisão 11.37) o rótulo quebrava em duas linhas. Sem quebra, a
   largura preferida passa a ser a do item mais longo e o menu cresce até ela,
   em qualquer viewport. Desde o corretivo do posicionamento o teto dessa
   largura é o viewport — bloco contêiner do `fixed` —, não mais a célula de
   56px; é medindo essa largura final que `posicionarMenu()` decide o lado. */
.menu-de-acoes a,.menu-de-acoes a:visited{display:block;font:inherit;font-size:12.5px;
  padding:8px 12px;color:var(--ink);text-decoration:none;white-space:nowrap}
.menu-de-acoes a:hover{background:#F3F4F1}
.menu-de-acoes a:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
/* Não existe regra de lado por posição de linha. `tr:last-child` mandava o
   menu abrir para cima sempre, e com um único resultado a última linha é
   também a primeira: o menu subia sobre o cabeçalho da tabela e era recortado
   por `.tabela-rolavel` (`overflow-x:auto` recorta os dois eixos) e por
   `.resultados-de-of` (`overflow:hidden`). Quem decide o lado é
   `posicionarMenu()`, pelo espaço livre no viewport, e o `fixed` que ela
   aplica é o que escapa dos dois recortes. */

.rodape-da-listagem{display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--steel);
  flex-wrap:wrap;gap:10px}
.rodape-da-listagem .exibir{display:flex;align-items:center;gap:8px}
.rodape-da-listagem label{font-size:12px}
.rodape-da-listagem select{width:auto;padding:4px 8px;font-size:12px}
.rodape-da-listagem .paginas{display:flex;gap:6px}
.rodape-da-listagem .btn.mini{padding:5px 10px;font-weight:600}
.rodape-da-listagem .btn.mini[aria-disabled="true"]{opacity:.5;cursor:default}

/* ------------------------------------------------------------------ */
/* Busca e listagem de OFs de Transformador (Marco 10, Pacote 10D)     */
/* ------------------------------------------------------------------ */
/* Seis colunas, mais estreitas que as nove da aba Equipamentos — mesmo
   princípio de `table.listagem-apontamentos`: classe própria com seu
   `min-width` e seus `col-*`, reaproveitando `.listagem` (lote, secundária,
   truncamento, ações) por herdar as duas classes no `<table>`. */
table.listagem-componente{min-width:940px}
table.listagem-componente col.col-lote{width:70px}
table.listagem-componente col.col-transformador{width:380px}
table.listagem-componente col.col-qtd{width:100px}
table.listagem-componente col.col-entrega{width:110px}
table.listagem-componente col.col-criacao{width:110px}
table.listagem-componente col.col-acoes{width:56px}

/* ------------------------------------------------------------------ */
/* Consulta e mini-histórico de apontamentos (Marco 2, Pacote 2B)      */
/* ------------------------------------------------------------------ */

.filtros-apontamentos .f.usuario{min-width:190px}

table.listagem-apontamentos{min-width:1120px}
table.listagem-apontamentos col.col-data{width:130px}
table.listagem-apontamentos col.col-lote{width:88px}
table.listagem-apontamentos col.col-sub-of{width:126px}
table.listagem-apontamentos col.col-equipamento{width:260px}
table.listagem-apontamentos col.col-setor{width:150px}
table.listagem-apontamentos col.col-qtd{width:64px}
table.listagem-apontamentos col.col-usuario{width:130px}
table.listagem-apontamentos col.col-situacao{width:112px}
table.listagem-apontamentos col.col-acoes{width:60px}
.listagem-apontamentos .data-apontamento{white-space:nowrap}

.tag.ap-ativo{background:#EAF1F7;color:#2C5A80}
.tag.ap-cancelado{background:#F3E7E6;color:#8A3F37}
/* Atenua somente os dados. Aplicar `opacity` ao `<tr>` criava um contexto de
   empilhamento que prendia o menu `fixed` atrás dos botões das linhas seguintes. */
tr.apontamento-cancelado > td:not(.acoes){opacity:.65}
tr.apontamento-cancelado .data-apontamento,
tr.apontamento-cancelado td.qtd{text-decoration:line-through}

/* A forma genérica da mesma regra (Pacote D1-7): a listagem de pedidos precisa
   do mesmo tratamento de linha cancelada do §5.14 — visível, atenuada e fora dos
   totais — e `apontamento-cancelado` é nome de outro domínio. A regra acima não
   foi tocada para não mexer no que já está homologado. */
tr.linha-cancelada > td:not(.acoes){opacity:.65}

.titulo-mini-historico{font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--steel);margin:14px 0 8px}
.mini-historico-rolavel{overflow-x:auto;border:1px solid var(--line);border-radius:5px}
table.mini-historico{min-width:680px;background:#fff}
table.mini-historico th{padding:7px 10px}
table.mini-historico td{padding:8px 10px;vertical-align:middle}
table.mini-historico th:nth-child(3),table.mini-historico td:nth-child(3){text-align:center}
table.mini-historico th.acoes,table.mini-historico td.acoes{width:60px;text-align:right}
/* A célula é a âncora sem JavaScript e durante a abertura. O JavaScript promove
   o menu a `position:fixed`, pois `overflow-x:auto` também recorta o eixo
   vertical e nenhuma direção absoluta cabe numa tabela curta. */
table.mini-historico td.acoes{position:relative}

/* ------------------------------------------------------------------ */
/* Cancelamento de apontamento (Marco 2, Pacote 2C)                   */
/* ------------------------------------------------------------------ */

body.pagina-cancelamento-apontamento main{max-width:920px}
.resumo-cancelamento{margin-top:16px}
.grade-cancelamento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.grade-cancelamento>div{display:flex;flex-direction:column;gap:2px}
.grade-cancelamento .linha-inteira{grid-column:1/-1}
.rotulo-cancelamento{display:block;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--steel);margin-bottom:4px}
.campo-motivo-cancelamento{margin-top:16px}
.aviso-cancelamento{display:block}
.btn.perigo{color:var(--red);border-color:var(--red)}
.btn.perigo:hover{background:#FBEBEA}
.duas-acoes-cancelamento{align-items:center}
.duas-acoes-cancelamento form{margin:0}
.resultado-cancelamento{max-width:600px;margin:20px auto 0;text-align:center}
.icone-resultado-cancelamento{width:52px;height:52px;border-radius:50%;background:var(--ink);
  color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin:0 auto 16px}
.icone-resultado-cancelamento.indisponivel{background:#FBF0DC;color:#8A5A0B;font-size:24px}
.detalhes-cancelamento{margin-top:18px;text-align:left}
.detalhes-cancelamento p{font-size:13.5px;line-height:1.7}
.actions-centralizadas{justify-content:center;flex-wrap:wrap}
@media(max-width:720px){
  .grade-cancelamento{grid-template-columns:1fr}
  .grade-cancelamento .linha-inteira{grid-column:auto}
}

/* ------------------------------------------------------------------ */
/* Casca superior e entrada (Marco 0, decisão 11.36)                  */
/* ------------------------------------------------------------------ */

/* Menus do cabeçalho. A abertura é do <details>: sem JavaScript o menu
   continua funcionando e o teclado continua alcançando cada item. */
details.menu{position:relative}
details.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  color:#9AA3AB;padding:8px 14px;border-radius:3px}
details.menu>summary::-webkit-details-marker{display:none}
details.menu>summary::after{content:"▾";font-size:10px;line-height:1}
details.menu>summary:hover{color:#fff}
details.menu>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
details.menu>summary.on,details.menu[open]>summary{background:#2A2F34;color:#fff}

/* O menu precisa ficar acima da `.ofbar` sticky dos detalhes (`z-index:60`).
   Caso contrário, a barra local atravessa o dropdown do usuário quando ambos
   ocupam a mesma faixa vertical. */
details.menu>.suspenso{position:absolute;z-index:80;top:calc(100% + 6px);left:0;min-width:210px;
  background:#fff;border:1px solid var(--line);border-radius:5px;padding:4px;
  box-shadow:0 8px 22px rgba(22,25,28,.24)}
details.menu>.suspenso a,details.menu>.suspenso button{display:block;width:100%;text-align:left;
  font:inherit;color:var(--ink);text-decoration:none;background:none;border:0;border-radius:3px;
  padding:9px 12px;cursor:pointer}
details.menu>.suspenso a:hover,details.menu>.suspenso button:hover{background:var(--paper)}
details.menu>.suspenso a:focus-visible,details.menu>.suspenso button:focus-visible{
  outline:2px solid var(--amber);outline-offset:-2px}

/* Nome e avatar abrem o menu do usuário, na ponta direita do cabeçalho
   (decisão 11.69, Pacote 15-V.C, handoff `menu usuario.pdf`). Sem seta nem
   divisória vertical: o avatar já sinaliza que o bloco é clicável. */
details.usuario{margin-left:auto}
details.usuario>summary.conta{gap:10px;padding:4px 6px;border-radius:5px;background:transparent}
details.usuario>summary.conta::after{content:none}
details.usuario>summary.conta:hover{background:#2A2F34}
details.usuario>summary.conta .nome-conta{font-size:12.5px;font-weight:500;color:#D5DADE;
  max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.usuario[open]>summary.conta{background:#2A2F34}
details.usuario[open]>summary.conta .nome-conta{color:#E8A94A}

/* Avatar: círculo âmbar com o glifo em tinta escura — o que o usuário escolheu
   em `Meu perfil` (Marco 16, Pacote 16A-Conta) ou o Raio, enquanto ele não
   escolher. O anel de 2px some transparente fechado e aparece âmbar aberto,
   sem deslocar o layout. */
details.usuario .avatar-usuario{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--amber);color:var(--ink);border:2px solid transparent}
/* O SVG vem do ativo versionado com `width/height` de 24; quem manda no tamanho
   é esta folha, como manda na cor por `currentColor`. Os dois escudos são
   imagens: preenchem o círculo por `cover`, sem deformar. */
details.usuario .avatar-usuario svg{width:17px;height:17px}
details.usuario .avatar-usuario img{width:100%;height:100%;object-fit:cover}
details.usuario[open]>summary.conta .avatar-usuario{
  border-color:#E8A94A;box-shadow:0 0 0 3px rgba(201,125,20,.18)}

/* Painel: cabeçalho de identidade separado das ações por borda; itens mais
   compactos que o menu genérico; `Sair` isolado por divisória, em vermelho,
   como as demais ações irreversíveis do sistema. */
details.usuario>.suspenso{left:auto;right:0;width:200px;min-width:0;
  border-radius:6px;padding:5px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
details.usuario>.suspenso .cabecalho-conta{padding:7px 10px 9px;
  border-bottom:1px solid var(--line);margin-bottom:4px}
details.usuario>.suspenso .cabecalho-conta b{display:block;font-size:12.5px;
  font-weight:600;color:var(--ink)}
details.usuario>.suspenso .cabecalho-conta span{display:block;font-size:11px;
  color:var(--steel);margin-top:1px}
/* G4 (plano da v1.6.0, seção 10): a versão em execução, só para o Admin ativo,
   é uma terceira linha de leitura do cabeçalho — não um item: sem link, sem
   foco, sem hover. Monoespaçada, como todo identificador de versão e SHA do
   sistema, para `Pré-release · abc1234` não se confundir com o perfil. */
details.usuario>.suspenso .cabecalho-conta .versao-em-execucao{
  font-family:var(--mono);font-size:11px;color:var(--steel);margin-top:3px;
  overflow-wrap:anywhere}
details.usuario>.suspenso a,details.usuario>.suspenso button{padding:7px 10px;font-size:12.5px}
details.usuario>.suspenso a:hover,details.usuario>.suspenso button:hover{background:#F4F5F2}
details.usuario>.suspenso hr{border:0;border-top:1px solid var(--line);margin:4px 0}
details.usuario>.suspenso .sair{color:var(--red)}
details.usuario>.suspenso .sair:hover{background:#FBEBEA}

/* Entrada (RA-76, correção de homologação): fundo geral no mesmo tom escuro do
   painel — sem borda clara entre o `body` e o `main` —, e o card branco do
   formulário centralizado dentro dele. `main` já é o único contêiner de
   conteúdo da página (a entrada zera o bloco `casca`), por isso vira o próprio
   painel escuro em vez de precisar de mais um nível de div. */
body.entrada{background:var(--ink);display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:28px}
body.entrada main{background:var(--ink);border-radius:20px;width:100%;max-width:1200px;
  min-height:min(560px,calc(100vh - 56px));display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:40px}
body.entrada main>.alert{width:100%;max-width:380px}
body.entrada .card{max-width:380px;width:100%;margin:0}
body.entrada .marca{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:15px;
  color:var(--ink)}
body.entrada .marca span{color:var(--amber)}
body.entrada .lema{color:var(--steel);font-size:12px;margin:4px 0 20px}
body.entrada .lema.recuperar{margin:16px 0 0;text-align:center}
body.entrada .actions{margin-top:16px}
body.entrada .btn.pri{width:100%}
@media(max-width:820px){
  body.entrada{padding:16px}
  body.entrada main{padding:22px;border-radius:14px;min-height:calc(100vh - 32px)}
}

/* ------------------------------------------------------------------ */
/* Detalhe da OF de Equipamento — ajuste visual da homologação (Pacote 1C) */
/* ------------------------------------------------------------------ */

/* Restrito a `body.pagina-detalhe-of`: só o detalhe da OF de Equipamento
   declara essa classe (mesmo padrão de `body.pagina-listagem-of` e
   `body.entrada` acima). Criação, revisão e edição reaproveitam os mesmos
   blocos `_identificacao.html`, `_configuracao.html` e `_componentes.html`
   — inclusive em `modo="leitura"`, quando a edição mostra a definição física
   travada pelos blocos do detalhe (RA-65) — mas sem essa classe no `body`,
   e por isso continuam com a tipografia e densidade de antes.

   Direção aprovada (homologação do Pacote 1B, achado no Pacote 1C):
   aumentar fonte em 2–4px nos valores e rótulos mais lidos, compensando com
   menos padding vertical onde já sobrava espaço, sem mudar o desenho nem a
   `.faixa` de série. */

/* Identificação da OF: valores principais 14px → 16px. O `.detail-grid` das
   sub-OFs (Andamento) já tem densidade própria (`.sub-of .detail-grid`,
   RA-72.2) e é reafirmado abaixo, sem mudar. */
body.pagina-detalhe-of .detail-grid > div{padding:10px 12px}
body.pagina-detalhe-of .detail-grid .k{font-size:11px}
body.pagina-detalhe-of .detail-grid .v{font-size:16px}
body.pagina-detalhe-of .sub-of .detail-grid > div{padding:7px 10px}
body.pagina-detalhe-of .sub-of .detail-grid .k{font-size:11px}
body.pagina-detalhe-of .sub-of .detail-grid .v{font-size:15px}

/* Painéis de Andamento (totais por etapa) e Configuração: 13px → 15px,
   rótulos 10px → 11px, com um pouco menos de padding vertical. */
body.pagina-detalhe-of .painel div{padding:6px 10px}
body.pagina-detalhe-of .painel .k{font-size:11px}
body.pagina-detalhe-of .painel .v{font-size:15px}

/* Título da sub-OF, na faixa escura do cabeçalho — só a fonte da letra;
   cor e padding do cabeçalho não mudam. */
body.pagina-detalhe-of .sub-of>.cabecalho .letra{font-size:16px}

/* Tabelas de componentes e histórico: dado maior, cabeçalho só o suficiente
   para acompanhar (nunca mais forte que os valores), e menos padding
   vertical por linha. */
body.pagina-detalhe-of table{font-size:15px}
body.pagina-detalhe-of th{font-size:12px;padding:6.5px 10px}
body.pagina-detalhe-of td{padding:6.5px 10px}

/* Corpo e título dos cards de cada sub-OF: só o padding vertical que ainda
   sobrava (RA-72.2 já havia comprimido uma vez; este é só mais um passo). */
body.pagina-detalhe-of .sub-of .card>h2{padding:7px 14px}
body.pagina-detalhe-of .sub-of .body{padding:8px 14px}

/* Bloqueio definitivo do ciclo de vida normal da OF (ex.: sub-OF que já
   recebeu apontamento) não é erro operacional: aparece neutro, nunca
   vermelho (achado da homologação do Pacote 1B).

   `.alert.bloqueio-estrutura` é o bloqueio **reversível** da Correção de
   estrutura (saldo de material com a produção, liberação vigente). Na
   homologação do Pacote 6E o âmbar foi reprovado: a seção também é consultada
   por quem não veio corrigir nada, e o tom dava aparência de erro a uma
   situação normal. Divide a mesma declaração de `.alert.info` — o tom é
   definido uma vez só — mas mantém classe própria, para que o HTML continue
   distinguindo definitivo de reversível. Restrita ao detalhe: nenhum aviso de
   outra tela muda de cor. */
body.pagina-detalhe-of{--tom-info-fundo:#EAF1F7;--tom-info-borda:#C7D6E3;--tom-info-texto:#2C5A80}
body.pagina-detalhe-of .alert.info{background:var(--tom-info-fundo);border:1px solid var(--tom-info-borda);color:var(--tom-info-texto)}
body.pagina-detalhe-of .alert.bloqueio-estrutura{background:var(--tom-info-fundo);border:1px solid var(--tom-info-borda);color:var(--tom-info-texto)}

/* Potência: número e unidade nunca se separam, e a única quebra permitida
   fica depois da barra — nunca deixando "W" sozinho numa linha (achado da
   homologação do Pacote 1C). A regra não depende de `@media print`: vale
   também na impressão provisória. */
body.pagina-detalhe-of .valor-unidade{white-space:nowrap}

/* Configuração: a coluna Fusíveis aceita valores curtos ("6/10", "2 x 10 A")
   e sempre sobrou espaço nela; a folga vai para Potência, que é quem mais
   precisa (achado da homologação do Pacote 1C). Só estas duas colunas mudam
   de fração — as outras cinco continuam em `1fr`, como antes. Abaixo de
   820px cai para uma coluna por linha, no mesmo padrão de
   `.detail-grid`/`.review-list`. */
body.pagina-detalhe-of .painel-configuracao{
  grid-template-columns:1fr 1fr 1.4fr 1fr 1fr .7fr 1fr;
}
@media(max-width:820px){
  body.pagina-detalhe-of .painel-configuracao{grid-template-columns:1fr}
}

/* Totais por etapa (Montagem/Teste/Expedição): só o valor numérico
   centraliza — o rótulo continua alinhado como em qualquer outro `.painel`,
   inclusive o de Configuração acima (achado da homologação do Pacote 1C). */
body.pagina-detalhe-of .painel-etapas .v{text-align:center}

/* Retirada e devolução de material (Pacote 6D; ajustes da homologação do 6E).

   `saldos-material`: os quatro indicadores (retirado, devolvido, saldo,
   disponível) centralizam só o valor, exatamente como `painel-etapas` acima.
   O alinhamento fica preso a este grid — `.detail-grid` continua igual em
   todo o resto da tela. */
body.pagina-detalhe-of .saldos-material .v{text-align:center}

/* `movimentos-material`: retirada à esquerda, devolução à direita quando há
   largura; uma coluna só quando não há. Os dois continuam sendo formulários
   independentes (rota, POST e CSRF próprios) — isto é só arranjo visual.
   `flex:1 1 260px` resolve os três casos com uma regra: dois formulários
   dividem a linha, um sozinho a ocupa inteira (sem lacuna), e abaixo de
   ~540px o `wrap` empilha. `min-width:0` impede que o conteúdo estoure a
   coluna. */
body.pagina-detalhe-of .movimentos-material{display:flex;flex-wrap:wrap;gap:10px 18px}
body.pagina-detalhe-of .movimentos-material>form{flex:1 1 260px;min-width:0;margin:0}

/* Devolução: bordô discreto **no texto**, sobre o mesmo botão secundário de
   sempre (fundo branco, borda neutra). Não é `.alert.stop` nem botão
   destrutivo — é só a distinção pedida na homologação do 6E entre os dois
   verbos. Contraste conferido sobre `#FFF`. */
body.pagina-detalhe-of .btn.btn-devolucao{color:#7A2E33}

/* ------------------------------------------------------------------ */
/* Detalhe da OF — hierarquia visual do handoff D3C (decisões 11.52 e 11.53) */
/* ------------------------------------------------------------------ */

/* Tudo nesta seção continua preso a `body.pagina-detalhe-of`: os mesmos
   blocos compartilhados (`_identificacao.html`, `_configuracao.html`,
   `_componentes.html`) são usados por criação, revisão e edição, e nenhuma
   regra daqui pode alcançá-las. */

/* Cabeçalho local único da OF: visível desde o início e sticky durante toda a
   rolagem, no lugar do antigo título solto + barra de ações. `top:0` basta
   porque a barra superior do sistema rola normalmente — quem fica é este
   cabeçalho, que é o contexto que se perde ao descer a página. */
/* O escopo alcança `body.fiscal` desde o Pacote D1-10: o detalhe do pedido tem
   o mesmo cabeçalho local único do §5.10 — identidade, estado e ações —, e sem
   isto o `<h1>`, a badge e os botões caíam empilhados como blocos soltos. */
body.pagina-detalhe-of .ofbar,body.fiscal .ofbar{position:sticky;top:0;z-index:60;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:6px;padding:8px 14px;
  margin-bottom:16px;box-shadow:0 3px 10px rgba(22,25,28,.08)}
body.pagina-detalhe-of .ofbar h1.titulo,body.fiscal .ofbar h1.titulo{font-size:17px;font-weight:600}
body.pagina-detalhe-of .ofbar .acoes-da-of,body.fiscal .ofbar .acoes-da-of{margin-left:auto;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}

/* Retorno ao topo: ícone discreto com aparência de botão. Continua sendo um
   `<a href="#topo">` de verdade — o reset de cor e sublinhado é o mesmo padrão
   de `.btn` (RA-72.1), para o navegador não pintar de azul um controle que não
   é texto de link. */
body.pagina-detalhe-of .subir,
body.pagina-detalhe-of a.subir:visited,
body.pagina-detalhe-of a.subir:hover,
body.pagina-detalhe-of a.subir:active{display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;border:1px solid var(--line);
  border-radius:4px;background:#fff;color:var(--steel);font-size:15px;
  font-weight:700;text-decoration:none;line-height:1}
body.pagina-detalhe-of a.subir:hover{background:#F3F4F1;color:var(--ink)}
body.pagina-detalhe-of a.subir:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Menu de três pontos da OF e de cada sub-OF. Reaproveita `details.menu` da
   casca — mesma abertura nativa, mesmo fechamento por Esc e clique fora
   (`core/casca.js`) — trocando só a aparência do `summary`: ícone quadrado,
   sem a seta `▾` do menu da barra superior. */
/* O escopo alcança `body.fiscal` desde o Pacote D1-10: a consulta de pedidos
   usa o mesmo menu de ações por linha do §5.9. Preso ao detalhe da OF, o `⋯`
   herdava o `summary` do menu da barra escura — cinza claro sobre branco, com a
   seta `▾` que este componente não tem. */
body.pagina-detalhe-of .menu-de-acoes-locais>summary.dots,
body.fiscal .menu-de-acoes-locais>summary.dots{display:inline-flex;
  align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border:1px solid var(--line);border-radius:4px;background:#fff;
  color:var(--steel);font-size:16px;font-weight:700;line-height:1}
body.pagina-detalhe-of .menu-de-acoes-locais>summary.dots::after,
body.fiscal .menu-de-acoes-locais>summary.dots::after{content:none}
body.pagina-detalhe-of .menu-de-acoes-locais>summary.dots:hover,
body.fiscal .menu-de-acoes-locais>summary.dots:hover{background:#F3F4F1;color:var(--ink)}
body.pagina-detalhe-of .menu-de-acoes-locais[open]>summary.dots,
body.fiscal .menu-de-acoes-locais[open]>summary.dots{background:#F3F4F1;color:var(--ink)}
/* Ancorado à direita: o menu nasce na ponta direita da barra e do cabeçalho da
   sub-OF, e abrir para a esquerda o jogaria para fora da tela. */
body.pagina-detalhe-of .menu-de-acoes-locais>.suspenso,
body.fiscal .menu-de-acoes-locais>.suspenso{left:auto;right:0;min-width:230px}
body.pagina-detalhe-of .menu-de-acoes-locais>.suspenso hr,
body.fiscal .menu-de-acoes-locais>.suspenso hr{border:0;
  border-top:1px solid var(--line);margin:4px 8px}
/* Irreversível em bordô, sempre por último no menu (decisão 11.52). É só a
   cor: a confirmação e o aviso continuam na tela seguinte, não no rótulo. */
body.pagina-detalhe-of .menu-de-acoes-locais>.suspenso a.perigosa,
body.pagina-detalhe-of .menu-de-acoes-locais>.suspenso a.perigosa:visited,
body.fiscal .menu-de-acoes-locais>.suspenso a.perigosa,
body.fiscal .menu-de-acoes-locais>.suspenso a.perigosa:visited{color:var(--red)}
/* Um `POST` dentro do menu (o download do XML na NF do cliente, corretivo
   visual do D3-7): o `<form>` não ocupa espaço, e o botão veste o item do menu. */
body.fiscal .menu-de-acoes-locais>.suspenso form{margin:0}
body.fiscal .menu-de-acoes-locais>.suspenso form>button{display:block;width:100%;
  text-align:left;font:inherit;color:var(--ink);background:none;border:0;
  border-radius:3px;padding:9px 12px;cursor:pointer}
body.fiscal .menu-de-acoes-locais>.suspenso form>button:hover{background:var(--paper)}
body.fiscal .menu-de-acoes-locais>.suspenso form>button:focus-visible{
  outline:2px solid var(--amber);outline-offset:-2px}

/* Variante escura: no cabeçalho da sub-OF o fundo é `--ink`, e o botão claro
   ficaria um bloco branco no meio da faixa. */
body.pagina-detalhe-of .menu-de-acoes-locais.escura>summary.dots{background:transparent;
  border-color:rgba(255,255,255,.35);color:#fff;width:30px;height:28px;font-size:15px}
body.pagina-detalhe-of .menu-de-acoes-locais.escura>summary.dots:hover,
body.pagina-detalhe-of .menu-de-acoes-locais.escura[open]>summary.dots{background:rgba(255,255,255,.12);color:#fff}

/* Ação bloqueada dentro do menu: sinal compacto `⊘` e explicação que abre por
   clique **ou** por teclado — `<details>` nativo, nunca dependente de hover
   (decisão 11.52). Os avisos de dentro continuam sendo os mesmos
   `.alert.info` / `.alert.bloqueio-estrutura` de antes, com as mensagens
   canônicas de `consultas.bloqueios_da_correcao_estrutural()`. */
body.pagina-detalhe-of .item-bloqueado>summary{display:flex;align-items:center;gap:6px;
  padding:9px 12px;border-radius:3px;cursor:pointer;color:var(--steel);
  list-style:none;font-size:13px}
body.pagina-detalhe-of .item-bloqueado>summary::-webkit-details-marker{display:none}
body.pagina-detalhe-of .item-bloqueado>summary:hover{background:var(--paper)}
body.pagina-detalhe-of .item-bloqueado>summary:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
body.pagina-detalhe-of .item-bloqueado .sinal{font-weight:700}
body.pagina-detalhe-of .item-bloqueado .explicacao{padding:2px 10px 8px;max-width:340px}
body.pagina-detalhe-of .item-bloqueado .explicacao .alert{font-size:12.5px;padding:9px 11px}

/* Recolhimento progressivo (decisão 11.52): histórico da OF, histórico da
   sub-OF, movimentos e apontamentos nascem fechados, com o resumo no título.
   Também é `<details>` nativo — abre sem JavaScript e responde ao teclado. */
/* O escopo alcança `body.fiscal` desde o Pacote D1-10: o histórico do pedido é
   o mesmo recolhimento progressivo, e preso ao detalhe da OF ele saía como um
   `<details>` cru — marcador do navegador, sem moldura e sem foco visível. */
body.pagina-detalhe-of .secao-recolhivel,
body.fiscal .secao-recolhivel{background:var(--card);border:1px solid var(--line);
  border-radius:6px;margin-bottom:16px}
body.pagina-detalhe-of .secao-recolhivel>summary,
body.fiscal .secao-recolhivel>summary{display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;padding:10px 16px;cursor:pointer;list-style:none;
  font-size:13px;font-weight:600;color:var(--ink)}
body.pagina-detalhe-of .secao-recolhivel>summary::-webkit-details-marker,
body.fiscal .secao-recolhivel>summary::-webkit-details-marker{display:none}
body.pagina-detalhe-of .secao-recolhivel>summary::before,
body.fiscal .secao-recolhivel>summary::before{content:"▸";font-size:11px;color:var(--steel)}
body.pagina-detalhe-of .secao-recolhivel[open]>summary::before,
body.fiscal .secao-recolhivel[open]>summary::before{content:"▾"}
body.pagina-detalhe-of .secao-recolhivel[open]>summary,
body.fiscal .secao-recolhivel[open]>summary{border-bottom:1px solid var(--line)}
body.pagina-detalhe-of .secao-recolhivel>summary:focus-visible,
body.fiscal .secao-recolhivel>summary:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
body.pagina-detalhe-of .secao-recolhivel .resumo,
body.fiscal .secao-recolhivel .resumo{font-weight:400;color:var(--steel)}
body.pagina-detalhe-of .secao-recolhivel>.body,
body.fiscal .secao-recolhivel>.body{padding:12px 14px}
body.pagina-detalhe-of .secao-recolhivel>.body>.card:last-child,
body.fiscal .secao-recolhivel>.body>.card:last-child{margin-bottom:0}
/* Dentro de um card (Movimentos, no bloco Material) a seção não repete a
   moldura do card que já a envolve. */
body.pagina-detalhe-of .secao-recolhivel.interna{margin:14px 0 0}
body.pagina-detalhe-of .secao-recolhivel.interna>summary{padding:8px 12px;margin:0}
body.pagina-detalhe-of .sub-of>.corpo>.secao-recolhivel:last-child{margin-bottom:0}

/* O menu da sub-OF abre para dentro do bloco, e `.sub-of{overflow:hidden}` —
   que existia só para recortar os cantos do cabeçalho escuro — o cortaria numa
   sub-OF baixa, como uma cancelada por redução, que só tem o Andamento. O
   recorte volta como raio próprio do cabeçalho (7px: 8px do bloco menos 1px de
   borda) e o bloco passa a deixar o menu transbordar. Restrito ao detalhe:
   nenhuma outra tela usa `.sub-of`. */
body.pagina-detalhe-of .sub-of{overflow:visible}
body.pagina-detalhe-of .sub-of>.cabecalho{border-radius:7px 7px 0 0}

/* Cabeçalho da sub-OF: o atalho de apontamento e o menu de três pontos formam
   um grupo só na ponta direita. Antes o `margin-left:auto` era do próprio
   atalho; agora é do grupo, para que o menu continue à direita mesmo quando a
   sub-OF não é elegível para apontar. */
body.pagina-detalhe-of .sub-of>.cabecalho .acoes-da-sub-of{margin-left:auto;
  display:flex;align-items:center;gap:8px}
body.pagina-detalhe-of .sub-of>.cabecalho .acoes-da-sub-of .btn-apontar{margin-left:0}

/* Linha de liberação, no topo do bloco Material. */
body.pagina-detalhe-of .liberacao{display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;font-size:13px;margin-bottom:12px}
body.pagina-detalhe-of .liberacao form{margin:0}

/* Impressão do detalhe (Pacote 5A): mesmos dados e blocos da tela, sem
   consulta nem estado paralelo — só o que a folha de estilo de impressão
   esconde ou realça. */
@media print{
  .no-imprimir{display:none!important}
  header{display:none}
  /* O cabeçalho local vira uma linha comum no papel: `sticky` não tem sentido
     numa folha, e a sombra só gasta tinta. O caminho canônico de impressão é o
     PDF do Marco 9 — isto é só higiene para quem imprimir a tela. */
  .ofbar{position:static;box-shadow:none;border-color:#BEC2BC}
  body{background:#fff}
  main{max-width:100%;padding:0;margin:0}
  .card{border-color:#BEC2BC;break-inside:avoid;page-break-inside:avoid;margin-bottom:10px}
  /* O cabeçalho escuro volta ao branco no papel: fundo chapado não ajuda a ler
     impresso e gasta toner. */
  .card.titulo-escuro > h2{background:#fff;color:var(--steel);font-weight:600;
    border-bottom-color:var(--line)}
  a{color:inherit;text-decoration:none}
  .faixa{background:#fff;color:var(--ink);border:1px solid var(--line)}
  .faixa .qt{color:var(--steel)}
  .faixa .bar{background:var(--line)}
  .sub-of{background:#fff;border-color:#BEC2BC;break-inside:avoid;page-break-inside:avoid}
  .sub-of>.cabecalho{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
  .sub-of>.cabecalho .serie{color:var(--steel)}
  .transformador .cab{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
  .transformador .cab .rotulo-transformador,
  .transformador .cab .nome .cod,
  .transformador .cab .metricas .k{color:var(--steel)}
}

/* ------------------------------------------------------------------ */
/* Registrar apontamento (Pacote 2A.2, telas 1 a 9; abas e Transformador */
/* na aba própria desde o Pacote 12B, decisão 11.63)                  */
/* ------------------------------------------------------------------ */

.rotulo-secao{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--steel);
  font-weight:600;margin:0 0 10px}
a.link,a.link:visited{font-size:12.5px;text-decoration:underline}

/* OF travada: a mesma barra escura da faixa da criação (identidade já
   aprovada), sem a barra de progresso — aqui ela só identifica a OF escolhida
   e oferece "Trocar OF". */
.of-travada{display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;
  border-radius:5px;padding:12px 18px;margin-bottom:20px;flex-wrap:wrap}
.of-travada .lote{font-family:var(--mono);font-weight:700;font-size:18px}
.of-travada .equip{font-size:13px;color:#D9DDE1}
.of-travada .trocar{margin-left:auto}
.of-travada .trocar a,.of-travada .trocar a:visited{color:#D9DDE1;font-size:12.5px;text-decoration:underline}
.of-travada .trocar a:hover{color:#fff}

/* Busca compacta da tela 1: caixa de pesquisa e lista de resultados. */
.busca-apontamento{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.busca-apontamento .campo{display:flex;flex-direction:column;gap:5px}
.busca-apontamento .campo.metodo{flex:0 0 170px}
.busca-apontamento .campo.termo{flex:1;min-width:260px}
.resultados-apontamento{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.resultados-apontamento a.resultado{display:flex;align-items:center;gap:16px;padding:12px 16px;
  border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.resultados-apontamento a.resultado:last-child{border-bottom:0}
.resultados-apontamento a.resultado:hover,.resultados-apontamento a.resultado:focus-visible{background:#FAFAF8}
.resultados-apontamento a.resultado:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.resultados-apontamento .lote-col{min-width:70px}
.resultados-apontamento .lote-col .n{font-family:var(--mono);font-weight:700;font-size:16px}
.resultados-apontamento .lote-col .r{font-size:10.5px;color:var(--steel)}
.resultados-apontamento .desc{flex:2;min-width:0}
.resultados-apontamento .desc .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resultados-apontamento .desc .s{font-size:11.5px;color:var(--steel);font-family:var(--mono)}
.resultados-apontamento .setor-col{min-width:110px;font-size:12.5px;color:var(--steel)}
.resultados-apontamento .seta{color:var(--steel);margin-left:auto}

/* Escolha da sub-OF (tela 2): cartões clicáveis, um por sub-OF elegível. */
.cartoes-sub-of{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.cartoes-sub-of a.cartao,.cartoes-sub-of a.cartao:visited{display:block;border:1px solid var(--line);
  border-radius:6px;background:#fff;overflow:hidden;color:var(--ink);text-decoration:none}
.cartoes-sub-of a.cartao:hover{border-color:var(--amber)}
.cartoes-sub-of a.cartao:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.cartoes-sub-of .cab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#FAFAF8;border-bottom:1px solid var(--line)}
.cartoes-sub-of .cab .letra{font-size:14px;font-weight:700}
.cartoes-sub-of .cab .serie{font-size:11.5px;color:var(--steel);font-family:var(--mono)}
.cartoes-sub-of .cab .tag{margin-left:auto}
.cartoes-sub-of .corpo{padding:12px 14px}
.cartoes-sub-of .meta{font-size:12px;color:var(--steel);margin-bottom:8px}
.cartoes-sub-of .meta b{color:var(--ink);font-family:var(--mono)}

/* Cabeçalhos travados de OF e sub-OF no formulário (tela 3). */
.identificacao-apontamento{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.identificacao-apontamento .campo-lido{flex:1;min-width:220px;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:10px 14px}
.identificacao-apontamento .campo-lido.escura{background:var(--ink);border-color:var(--ink)}
.identificacao-apontamento .campo-lido .k{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--steel)}
.identificacao-apontamento .campo-lido.escura .k{color:var(--amber)}
.identificacao-apontamento .campo-lido .v{font-size:14px;font-weight:600;margin-top:2px}
.identificacao-apontamento .campo-lido.escura .v{color:#fff}

/* Grade dos campos do apontamento (tela 3), com rótulos acima do controle. */
.campos-apontamento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.campos-apontamento .f{display:flex;flex-direction:column;gap:5px}
.campos-apontamento .f-setor{grid-column:1 / span 4;grid-row:1}
.campos-apontamento .f-qtd{grid-column:5 / span 2;grid-row:1}
.campos-apontamento .f-data{grid-column:7 / span 4;grid-row:1}
.campos-apontamento .f-hora{grid-column:11 / span 2;grid-row:1}
.campos-apontamento .f-obs{grid-column:1 / span 12;grid-row:3}
.campos-apontamento .erro{color:var(--red);font-size:11.5px}
.resumo-etapa{grid-column:1 / span 6;grid-row:2;display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#FAFAF8}
.resumo-etapa[hidden]{display:none}
.resumo-etapa div{display:flex;flex-direction:column;gap:2px}
.resumo-etapa span{font-size:10.5px;color:var(--steel)}
.resumo-etapa strong{font-size:15px;color:var(--ink)}
/* Grade sem Setor (Pacote 12B, aba Transformadores): a OF de Componente tem
   um único setor histórico, que não é campo do formulário (decisão 11.15) —
   quantidade, data e hora numa linha, observação abaixo. */
.campos-apontamento.sem-setor .f-qtd{grid-column:1 / span 3;grid-row:1}
.campos-apontamento.sem-setor .f-data{grid-column:4 / span 5;grid-row:1}
.campos-apontamento.sem-setor .f-hora{grid-column:9 / span 2;grid-row:1}
.campos-apontamento.sem-setor .f-obs{grid-column:1 / span 12;grid-row:2}

@media (max-width:720px){
  .campos-apontamento{grid-template-columns:1fr}
  .campos-apontamento .f-setor,.campos-apontamento .f-qtd,
  .campos-apontamento .f-data,.campos-apontamento .f-hora,.campos-apontamento .f-obs,
  .resumo-etapa{grid-column:1;grid-row:auto}
  .resumo-etapa{grid-template-columns:1fr}
  /* A1: `.campos-apontamento.sem-setor .f-*` (três classes) tem mais
     especificidade que o reset acima (duas classes) e vencia a cascata mesmo
     dentro desta media query, empilhando Quantidade/Data/Hora na mesma linha
     e deixando Quantidade ilegível no apontamento de Transformador. Repetir o
     reset com a mesma especificidade do `.sem-setor` resolve sem tocar na
     grade base nem na espécie Equipamento, que não usa esta classe. */
  .campos-apontamento.sem-setor .f-qtd,.campos-apontamento.sem-setor .f-data,
  .campos-apontamento.sem-setor .f-hora,.campos-apontamento.sem-setor .f-obs{
    grid-column:1;grid-row:auto}
}

/* Atalho "Registrar apontamento" no cabeçalho da sub-OF do detalhe (tela 7). */
.sub-of>.cabecalho .btn-apontar{margin-left:auto;font-size:12.5px;padding:6px 12px;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff}
.sub-of>.cabecalho .btn-apontar:visited{color:#fff}
.sub-of>.cabecalho .btn-apontar:hover{background:rgba(255,255,255,.12)}
/* Quando o atalho ocupa a direita, o status deixa de empurrar por `margin-left`. */
.sub-of>.cabecalho .btn-apontar~*{margin-left:0}

/* Sucesso do registro (tela 6). */
.sucesso-apontamento{max-width:520px;margin:20px auto 0;text-align:center}
.sucesso-apontamento .marca{width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;
  font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.sucesso-apontamento .resumo{background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:16px 20px;margin:18px 0;text-align:left;line-height:1.7}
.sucesso-apontamento .acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ------------------------------------------------------------------ */
/* Gerenciar lotes por sub-OF (Marco 5, Pacotes 5B-5C)                */
/* ------------------------------------------------------------------ */

/* Reaproveita `.card`, `.body`, `.painel`, `.detail-grid`, `.tag`, `.alert`,
   `.btn`, `.busca` e `.lote` da linguagem visual já homologada. O que segue são
   só os poucos acréscimos próprios desta tela. */

.secao-lotes{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--steel);
  font-weight:600;margin:22px 0 10px;border:0;padding:0}

/* Estado vazio compacto: sem nenhum Transformador na configuração da sub-OF. */
.vazio-compacto{text-align:center;padding:14px;color:var(--steel);font-size:12.5px;
  background:#FAFAF8;border:1px dashed var(--line);border-radius:5px;margin-top:10px}

/* A ação `Gerenciar lotes` na seção da sub-OF do detalhe. */
.acao-da-sub-of{margin-top:12px}

/* Bloco único de Identificação + Transformadores (ajuste visual do handoff
   `referencias_visuais`): antes eram dois blocos soltos sobre o fundo cinza
   da página; agora um único cartão os reúne, e o rótulo de cada seção interna
   é texto simples, sem faixa de cor de fundo. */
.bloco-lotes{background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:20px;margin-bottom:18px}
.bloco-lotes .rotulo-bloco{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--steel);font-weight:600;margin-bottom:10px}

/* Linha de identificação em colunas de largura fixa, na ordem aprovada: OF de
   Equipamento → Série inicial → Sub-OF → Equipamento (o
   campo mais largo) → Meta vigente. Substitui o `.detail-grid` genérico nesta
   tela — o campo "Situação do material" saiu da exibição aqui. */
.linha-identificacao{display:flex;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;margin-bottom:22px}
.linha-identificacao>div{padding:8px 14px;border-right:1px solid var(--line)}
.linha-identificacao>div:last-child{border-right:0}
.linha-identificacao .k{font-size:9px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--steel);white-space:nowrap}
.linha-identificacao .v{font-size:13px;font-weight:600;margin-top:3px}
.linha-identificacao .c-of{width:125px}
.linha-identificacao .c-serie{width:100px}
.linha-identificacao .c-subof{width:90px}
.linha-identificacao .c-equip{flex:1}
.linha-identificacao .c-meta{width:105px}
@media(max-width:820px){
  .linha-identificacao{flex-wrap:wrap}
  .linha-identificacao>div{width:auto!important;flex:1 1 45%;border-right:0;border-bottom:1px solid var(--line)}
  .linha-identificacao>div:last-child{border-bottom:0}
}

/* Card de transformador: faixa escura própria com o rótulo "TRANSFORMADOR",
   nome/código/quantidade e as métricas (demanda, alocado, lotes, diferença) —
   resolve a ambiguidade anterior entre informação da OF e informação do lote.

   RA-137: o `overflow:hidden` que existia aqui só para recortar os cantos do
   card (6px) nos dois blocos internos de fundo sólido também recortava a
   lista suspensa da busca de lote — `.busca .resultados` (linha ~174) é
   `position:absolute` e some tarde na árvore de `.area-lotes`, então o card
   sempre a cortava no seu limite inferior, com o card ocupando toda a altura
   e o vínculo real (Pacote 5B/5C) não deixando o `<details>` de "Adicionar
   lote" transbordar por conta própria. O mesmo problema e a mesma solução já
   existem no card de sub-OF do detalhe (acima, `.sub-of`): o raio migra para
   os dois blocos que tocam as bordas do card — 5px, o raio do card (6px)
   menos 1px de borda, para as curvas ficarem concêntricas —, e o `overflow`
   deixa de existir aqui. Nenhum outro card usa esta classe (única inclusão:
   `_card_transformador.html`, na tela `Gerenciar lotes`). */
.card.transformador{margin-bottom:14px}
.transformador .cab{background:var(--ink);color:#fff;padding:12px 16px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  border-radius:5px 5px 0 0}
.transformador .cab .topo{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.transformador .cab .rotulo-transformador{font-size:9px;text-transform:uppercase;
  letter-spacing:.1em;color:#B9C0C6}
.transformador .cab .nome{font-weight:600;font-size:14.5px}
.transformador .cab .nome .cod{font-weight:400;color:#9AA3AB;font-family:var(--mono);font-size:11px}
.transformador .cab .metricas{display:flex;gap:20px;align-items:center;text-align:right}
.transformador .cab .metricas .k{font-size:9px;text-transform:uppercase;color:#9AA3AB}
.transformador .cab .metricas .v{font-family:var(--mono);font-weight:600;font-size:14px}

/* Área de lotes vinculados: fundo levemente diferente e borda esquerda âmbar,
   sinalizando "isto pertence ao transformador acima". É o último bloco do
   card, então fecha os cantos inferiores (mesmo raio de 5px do cabeçalho,
   pela mesma conta) agora que `.card.transformador` não recorta mais. */
.area-lotes{background:#FBFBF9;border-left:3px solid var(--amber);padding:12px 16px;
  border-radius:0 0 5px 5px}
.lotes-vinculados{font-size:12.5px}
.lotes-vinculados th{font-size:10px;padding:5px 8px}
.lotes-vinculados td{padding:7px 8px}

/* Estado "sem lote", sem permissão de incluir: uma linha só, sem caixa nem
   borda pontilhada. */
.sem-lote-linha{padding:6px 2px;font-size:12.5px;color:var(--steel)}

/* Lote inutilizado permanece visível e apagado, sem ação de alterar — só
   `Remover` continua ativo (decisão 11.11, RA-41). */
.lotes-vinculados tr.inutilizado td{opacity:.6}
.lotes-vinculados td.acoes{white-space:nowrap}
.steel{color:var(--steel)}

/* `Lote vinculado (novo)` no resumo `antes → depois` da inclusão. */
.novo{color:var(--green)}

/* Inclusão inline por Transformador: disclosure nativo, sem JavaScript próprio —
   o mesmo padrão do `<details>` da casca. Sem lote nenhum, o próprio `summary`
   é a linha "Nenhum lote vinculado — + Adicionar lote" (`.add-lote-vazio`);
   com lote(s), o botão fica sozinho abaixo da tabela (`.com-tabela`). Nos dois
   casos, o formulário que abre por baixo é o mesmo `<form>`, só o resumo muda. */
.add-lote{margin-top:0}
.add-lote.com-tabela{margin-top:10px}
.add-lote>summary{display:inline-flex;align-items:center;font:inherit;font-weight:500;
  font-size:12px;padding:6px 11px;border:1px solid var(--line);border-radius:4px;
  background:#fff;color:var(--ink);cursor:pointer;list-style:none;user-select:none}
.add-lote>summary::-webkit-details-marker{display:none}
.add-lote>summary::before{content:"+ "}
.add-lote[open]>summary::before{content:"− "}
.add-lote>summary:hover{border-color:#B7BCB5}
.add-lote>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.add-lote>form{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.add-lote .lote .qtd input{width:120px}

.add-lote-vazio>summary{display:flex;align-items:center;gap:8px;padding:6px 2px;
  border:0;background:none;font-weight:400;color:var(--steel)}
.add-lote-vazio>summary::before{content:none}
.add-lote-vazio .rotulo-botao{display:inline-flex;align-items:center;font-weight:500;
  font-size:12px;padding:6px 11px;border:1px solid var(--line);border-radius:4px;
  background:#fff;color:var(--ink)}

/* Alteração inline por lote (Pacote 5C): mesmo disclosure nativo do
   `Adicionar lote`, compacto para caber na coluna `Ações` da tabela de lotes
   vinculados, ao lado do botão `Remover`. */
.alterar-lote{display:inline-block;margin-right:6px}
.alterar-lote>summary{display:inline-flex;align-items:center;font:inherit;font-weight:500;
  font-size:11.5px;padding:5px 9px;border:1px solid var(--line);border-radius:4px;
  background:#fff;color:var(--ink);cursor:pointer;list-style:none;user-select:none}
.alterar-lote>summary::-webkit-details-marker{display:none}
.alterar-lote>summary:hover{border-color:#B7BCB5}
.alterar-lote>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.alterar-lote>form{display:flex;align-items:flex-end;gap:8px;margin-top:8px;flex-wrap:wrap}
.alterar-lote .f{min-width:0}
.alterar-lote .f input{width:90px}

/* ------------------------------------------------------------------ */
/* Reduzir OF de Equipamento (Marco 7, Pacote 7B; decisão 11.44)       */
/* ------------------------------------------------------------------ */

/* Resumo calculado da meta global: meta vigente, redução informada e nova meta.
   Nenhum campo — são resultados, e o JavaScript só reescreve os dois últimos
   enquanto se digita (decisão 11.44). Mesma caixa do `.resumo-etapa` do
   apontamento, para não inventar um segundo bloco de leitura. */
.resumo-global{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#FAFAF8}
.resumo-global > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.resumo-global .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--steel)}
.resumo-global strong{font-size:18px;color:var(--ink)}
@media(max-width:720px){.resumo-global{grid-template-columns:1fr}}

/* Coluna da redução por sub-OF. O campo desabilitado precisa parecer
   indisponível, não apagado: fundo neutro, borda tracejada e cursor de recusa,
   com a causa na coluna `Situação`. Desabilitar é orientação — o serviço
   canônico recusa de novo um POST forjado. */
.campo-de-reducao{max-width:120px}
/* `Sub-OF A` não quebra em duas linhas quando a coluna `Situação` cresce. */
.nome-da-sub-of{white-space:nowrap}
.campo-de-reducao input:disabled{background:#EFEFEC;color:var(--steel);
  border-style:dashed;cursor:not-allowed}
tr.impedida > td{color:var(--steel)}

@media print{
  .resumo-global{background:#fff;border-color:#BEC2BC;break-inside:avoid}
}

/* ------------------------------------------------------------------ */
/* Responsividade móvel transversal                                   */
/* (PLANO_PACOTE_RESPONSIVIDADE_MOBILE.md, autorizado em 12/08/2026)  */
/* ------------------------------------------------------------------ */

/* Alvo: ~390–430px de viewport, a faixa dos telefones em uso. Duas regras de
   construção mantêm o desktop homologado intacto:

   1. **Tudo aqui vive dentro de `@media`.** Nenhuma declaração desta seção
      alcança 1366×768 ou 1920×1200 — a composição aprovada nas homologações
      anteriores não depende de nada que esteja escrito abaixo.
   2. **Nada some.** Coluna, dado e ação continuam existindo; o que muda é
      onde eles quebram, quanto respiram e o que rola. A única exceção é a
      barra decorativa da faixa de série (`.faixa .bar`), que é um gradiente
      sem informação e está anotada no lugar.

   O corte é 560px — acima da faixa alvo e abaixo do menor tablet em retrato —,
   somando-se aos cortes de 820px e 720px que já existiam nesta folha e
   continuam valendo. */

@media(max-width:560px){

  /* --- Casca superior ------------------------------------------------- */
  /* A queixa concreta era altura: com 14px e `padding:8px 14px`, os cinco
     itens caíam um por linha e o cabeçalho passava de 190px. Compactando o
     item, os mesmos cinco cabem em duas linhas. `flex:1 0 100%` dá à navegação
     a própria faixa: sem isso o primeiro item sobe para o lado da marca e o
     resto quebra desalinhado — a "quebra desordenada" que o plano proíbe.
     Continua sendo a mesma navegação direta, sem sidebar, sem sanduíche e sem
     esconder rota nenhuma. */
  header{padding:10px 14px;gap:8px 12px}
  .brand{font-size:12px;letter-spacing:.1em}
  nav{flex:1 0 100%;gap:2px 4px}
  nav a{padding:6px 9px;font-size:12.5px}

  /* O menu do usuário deixa de ser empurrado para a ponta direita: sozinho
     numa terceira linha, `margin-left:auto` só criava um vão. */
  details.usuario{margin-left:0}
  /* Sem a borda esquerda nem a seta do desenho antigo, não há mais nada aqui
     para desmontar — só o nome, que já trunca com reticências (regra de
     desktop) em vez de forçar rolagem horizontal. */
  /* Ancorado à esquerda: com `margin-left:auto` desligado, o acionador fica
     perto da borda esquerda; um painel `right:0` alinharia sua ponta direita
     à do acionador e sairia da tela à esquerda. O painel mantém os 200px de
     largura fixa (regra de desktop): cabem com folga a partir de ~228px de
     viewport. */
  details.usuario>.suspenso{left:0;right:auto}

  /* --- Página --------------------------------------------------------- */
  /* Menos moldura devolve 12px de largura útil a cada lado e corta o vão
     acima do título. */
  main{padding:16px 14px 56px}
  h1{font-size:19px}
  .toolbar{margin-bottom:12px}

  /* --- Botões e ações ------------------------------------------------- */
  /* `.actions` nasceu sem `flex-wrap`: com dois ou três botões `nowrap` a
     linha estourava a viewport em vez de quebrar. O alinhamento à direita
     continua o mesmo quando cabem. */
  .actions{flex-wrap:wrap}
  /* Alvo de toque: 28px é confortável com mouse, apertado com o polegar. */
  .btn{padding:10px 14px}
  .btn.mini{padding:7px 11px}

  /* --- Campos --------------------------------------------------------- */
  /* 16px é o piso que impede o Safari do iOS de dar zoom sozinho ao focar um
     campo — o zoom desloca a página inteira e é lido como "a tela quebrou".
     Vale só aqui; em desktop o campo continua herdando os 14px do corpo. */
  input,select,textarea{font-size:16px}
  .grid{--vao-grid:12px}

  /* --- Faixa de série -------------------------------------------------- */
  /* Três valores de ~110px mais duas barras e quatro vãos passam de 380px e
     não cabem em ~318px de conteúdo. As barras são gradiente decorativo, sem
     nenhum dado: são elas que saem, e os três valores — série original,
     quantidade e série final — continuam todos visíveis, agora quebrando em
     duas linhas quando preciso. Vale para leitura, edição e criação. */
  .faixa{flex-wrap:wrap;gap:10px 16px;padding:12px 14px}
  .faixa .bar{display:none}
  .faixa .n{font-size:21px}
  .faixa .campo{min-width:0;flex:1 1 130px}
  .faixa>div{min-width:0}

  /* --- Filtros (Consultar OFs e Consultar apontamentos) ---------------- */
  /* `.f.ampla{min-width:320px}` era mais largo que a área de conteúdo e
     empurrava o documento inteiro para a rolagem horizontal. Aqui os campos
     passam a repartir a linha por base flexível, e os dois que precisam da
     largura inteira a pedem explicitamente. Nenhum filtro é removido. */
  .card.filtros{padding:12px}
  .filtros .linha{gap:8px}
  .filtros .f,.filtros .f.tipo-busca,.filtros .f.referencia,
  .filtros .f.periodo,.filtros .f.equipamento,.filtros-apontamentos .f.usuario{
    min-width:0;flex:1 1 140px}
  .filtros .f.ampla{min-width:0;flex:1 1 100%}
  .filtros .f.equipamento{flex-basis:100%}
  .filtros .linha>.btn{flex:1 1 auto}

  /* --- Listagens ------------------------------------------------------- */
  /* As tabelas densas continuam com a largura mínima que preserva as colunas
     e rolam **dentro** de `.tabela-rolavel`, nunca no documento (o contêiner
     já existe nas duas listagens). Nada é escondido para caber. O botão de
     três pontos ganha alvo de toque maior, e o painel que ele abre passa a ter
     teto de largura para não vazar da viewport. */
  .acoes-de-of{width:34px;height:34px}
  .menu-de-acoes{min-width:0;max-width:calc(100vw - 40px)}
  .rodape-da-listagem{padding:10px}
  .rodape-da-listagem .paginas{flex-wrap:wrap}

  /* --- Componentes: tabela somente leitura ----------------------------- */
  /* Seis colunas roláveis dentro do próprio contêiner (o `<div>` foi para o
     bloco compartilhado). A largura mínima mantém as colunas legíveis em vez
     de espremer cada uma numa palavra por linha. */
  .card .body>.tabela-rolavel>table{min-width:560px}

  /* --- Componentes: formset editável ----------------------------------- */
  /* Esta é a única tabela que **não** pode rolar: a caixa `Componente` abre
     uma lista de resultados `absolute`, e qualquer `overflow` no caminho a
     recortaria — quem estivesse na última linha não conseguiria escolher o
     componente. Então ela empilha: cada célula ocupa a linha inteira, o
     cabeçalho da tabela sai (as colunas deixaram de existir lado a lado) e o
     rótulo volta ao lado de cada controle, lido de `data-rotulo`, que o
     template escreve. Nenhum campo, rótulo ou ação desaparece. */
  table[data-tabela-componentes]{display:block}
  table[data-tabela-componentes]>thead{display:none}
  table[data-tabela-componentes]>tbody{display:block}
  table[data-tabela-componentes]>tbody>tr[data-linha="componente"]{display:block;
    border:1px solid var(--line);border-radius:6px;padding:10px 12px 12px;
    margin-bottom:10px;background:#fff}
  table[data-tabela-componentes]>tbody>tr[data-linha="componente"]>td{display:block;
    width:auto;border:0;padding:0;margin-bottom:10px}
  table[data-tabela-componentes]>tbody>tr[data-linha="componente"]>td:last-child{
    margin-bottom:0}
  table[data-tabela-componentes]>tbody>tr>td[data-rotulo]::before{
    content:attr(data-rotulo);display:block;font-size:11px;font-weight:600;
    text-transform:uppercase;letter-spacing:.08em;color:var(--steel);
    margin-bottom:4px}
  /* A linha de lotes do Transformador é `colspan=4` e já ocupava a largura
     inteira; empilhada, ela só perde o recuo que a alinhava sob a coluna
     `Componente`. */
  table[data-tabela-componentes]>tbody>tr.lote-row{display:block}
  table[data-tabela-componentes]>tbody>tr.lote-row>td{display:block;width:auto;
    padding:10px 0 0}
  table[data-tabela-componentes]>tbody>tr.lote-row.escondido{display:none}
  .lote .f{min-width:0;flex:1 1 100%}
  .lote .qtd{max-width:none}
  .lote .f.compacta{flex:0 0 auto}
  /* Empilhada, a quantidade da linha de lote recupera a largura inteira. Os
     rótulos de campo voltam sozinhos: quem os escondia era o `@media` de
     561px acima, que aqui não vale. */
  .lotes .lote .qtd{flex:1 1 100%}
  /* Alvo de toque do glifo de remoção, no mesmo piso das demais ações
     móveis. */
  .lotes .lote .remover-lote{min-width:44px;min-height:44px;padding:8px;font-size:17px}

  /* --- Registrar apontamento ------------------------------------------- */
  /* Os campos do formulário já empilham em 720px. O que falta é a lista de
     resultados da busca, cujas cinco colunas somam mais que a viewport. */
  .busca-apontamento .campo.metodo{flex:1 1 130px}
  .busca-apontamento .campo.termo{min-width:0;flex:1 1 100%}
  .resultados-apontamento a.resultado{flex-wrap:wrap;gap:4px 12px;padding:12px 14px}
  .resultados-apontamento .desc{flex:1 1 100%;order:2}
  .resultados-apontamento .lote-col{min-width:0;order:1}
  .resultados-apontamento .setor-col{min-width:0;order:3}
  .resultados-apontamento .tag{order:4}
  .resultados-apontamento .seta{order:5}
  .cartoes-sub-of{grid-template-columns:1fr}
  .of-travada{gap:6px 14px;padding:10px 14px}
  .of-travada .trocar{margin-left:0;flex:1 1 100%}
  .identificacao-apontamento .campo-lido{min-width:0;flex:1 1 100%}

  /* --- Gerenciar lotes -------------------------------------------------- */
  .bloco-lotes{padding:14px}
  .transformador .cab{padding:10px 14px}
  .transformador .cab .metricas{flex-wrap:wrap;gap:8px 16px;text-align:left}
  .area-lotes{padding:10px 12px}
  .area-lotes>.tabela-rolavel>table{min-width:620px}

  /* --- Detalhe da OF (D3C) ---------------------------------------------- */
  /* O cabeçalho local continua único, sticky e com as mesmas quatro ações na
     mesma ordem (decisão 11.53). O que muda: as ações passam a ocupar a linha
     inteira abaixo do título em vez de disputá-la com ele, que é o que
     produzia sobreposição e corte. Duas linhas curtas, sem esconder controle
     nenhum. */
  body.pagina-detalhe-of .ofbar{gap:6px 10px;padding:8px 10px;margin-bottom:12px}
  body.pagina-detalhe-of .ofbar h1.titulo{font-size:15px}
  body.pagina-detalhe-of .ofbar .acoes-da-of{margin-left:0;flex:1 0 100%;
    gap:6px;justify-content:flex-end}
  body.pagina-detalhe-of .ofbar .btn{padding:7px 11px;font-size:13px}
  body.pagina-detalhe-of .subir,
  body.pagina-detalhe-of .menu-de-acoes-locais>summary.dots{width:32px;height:32px}

  /* Os menus locais abrem ancorados à direita do próprio botão; o teto de
     largura impede que um painel de 230px vaze pela borda numa viewport
     estreita. Continuam acionáveis por toque e por teclado, e o `<details>`
     nativo não depende de hover. */
  body.pagina-detalhe-of .menu-de-acoes-locais>.suspenso{min-width:0;
    width:max-content;max-width:calc(100vw - 40px)}
  body.pagina-detalhe-of .item-bloqueado .explicacao{max-width:none}

  body.pagina-detalhe-of .sub-of>.cabecalho{padding:8px 12px;gap:6px 10px}
  body.pagina-detalhe-of .sub-of>.corpo{padding:10px 12px 14px}
  body.pagina-detalhe-of .sub-of>.cabecalho .acoes-da-sub-of{gap:6px}
  body.pagina-detalhe-of .sub-of .body{padding:8px 10px}
  body.pagina-detalhe-of .secao-recolhivel>summary{padding:10px 12px}
  body.pagina-detalhe-of .secao-recolhivel>.body{padding:10px}
}

/* ------------------------------------------------------------------ */
/* Casca mobile — topbar de uma linha e gaveta (Marco 16, Pacote 16F) */
/* ------------------------------------------------------------------ */

/* Emenda de 17/08/2026 às decisões 11.36, 11.52 e 11.53, sobre o handoff
   `referencias_visuais/casca_mobile/handoff/` (estados `1a`–`1g`): abaixo do
   corte, a navegação e o menu do usuário passam a viver numa gaveta; acima, a
   topbar direta continua sendo a homologada, sem nenhum dropdown guarda-chuva.

   **O corte mudou de 1040px para 820px em 27/08/2026, pela decisão 11.93
   (Pacote 17C.4), aprovada por Augusto.** O 16F havia fixado 1040px e
   **recusado** reusar 820px, porque entre 1040 e 820 a navegação voltava a
   quebrar em duas linhas — o estado `1g` do handoff, desenhado a 900px. A
   medição do 17C.4 mostrou que o problema era real mas maior do que o estimado
   (as seis rotas somam ~805px de texto, não ~710px) e que ele não se resolvia
   pelo lado da identidade: mesmo com o avatar sozinho a linha precisava de
   ~1096px, então o próprio corte de 1040px já entregava uma faixa quebrada.

   Augusto decidiu adotar o `1g` como composição aprovada em vez de recusá-lo: de
   820 a 1219px a navegação **continua direta**, em duas linhas **deliberadas e
   explícitas** — não pelo wrap acidental do flex —, e a gaveta passa a começar em
   819px. A montagem dessas duas linhas está na seção `Identidade responsiva da
   topbar`, adiante; o que fica aqui é a gaveta, inalterada a não ser pelo corte.

   A transição é declarada nos dois lados, sem vão e sem sobreposição:
   `min-width:820px` desliga a gaveta; `max-width:819px` monta a topbar de uma
   linha e veste a gaveta. 820px pertence à topbar direta; 819px, à gaveta.

   O corte de 819px é **vizinho**, e não igual, ao `@media(max-width:820px)` que
   já existia na folha: aquele é o colapso genérico de grade herdado do mockup e
   não declara nenhuma regra de casca (nenhum `header`, `nav`, `.brand`,
   `details.usuario`, `.gaveta` ou véu), então os dois não disputam nada em
   largura nenhuma — inclusive nos 820px exatos, onde manda a topbar direta.

   Esta seção fica **depois** do bloco móvel transversal de propósito. As seis
   declarações de casca daquele bloco (`header`, `.brand`, `nav`, `nav a`,
   `details.usuario` e o painel ancorado à esquerda) descrevem a topbar compacta
   de duas linhas que a gaveta substitui: abaixo do corte quem manda passa a ser
   o que está aqui, que vem depois e sobrescreve. Elas não foram removidas —
   continuam sendo o registro executável do desenho homologado em 12/08/2026 —, e
   o bloco transversal continua sendo o primeiro `@media(max-width:560px)` da
   folha, que é o que os testes de responsividade fiscalizam.

   Nada é escondido para caber, e nenhuma das ocultações daqui é de conteúdo: as
   **cópias de topbar** da navegação e do menu do usuário, cujos itens reaparecem
   todos na gaveta — pelo mesmo include (`core/blocos/_navegacao_da_casca.html` e
   `core/blocos/_itens_do_menu_do_usuario.html`), então não há como divergirem —,
   e o estado **fechado** do véu, que é decorativo e acende junto com a gaveta. */

@media(min-width:820px){
  /* Casca desktop e intermediária: a gaveta e o seu véu não existem. */
  header>details.gaveta,header>.veu-da-gaveta{display:none}
}

@media(max-width:819px){

  /* --- Topbar de uma linha -------------------------------------------- */
  /* 52px fixos, o mesmo `--ink` de sempre, marca à esquerda (link para a home,
     RA-77) e acionador à direita. Nada mais: o bloco do usuário desce para o
     rodapé da gaveta. */
  header{height:52px;padding:0 8px 0 14px;gap:12px;flex-wrap:nowrap}
  .brand{font-size:11.5px;letter-spacing:.14em}
  /* Quem ocupa a faixa livre é o bloco `marca + módulo` (decisão 11.97, D1-2),
     e não a marca sozinha: os dois são uma unidade de identidade, e o módulo
     precisa continuar visível no corte estreito. Quem trunca continua sendo a
     marca — o nome do módulo é curto e não pode virar reticências. */
  header>.marca-e-modulo{flex:1;min-width:0}
  header>.marca-e-modulo>a.brand{min-width:0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  /* As cópias de topbar saem; os mesmos itens continuam existindo na gaveta. */
  header>nav,header>details.usuario{display:none}

  /* --- Acionador ------------------------------------------------------- */
  /* 44×44px, três barras de 20×2px desenhadas em CSS (o handoff recusa o
     caractere `☰`, cujo traço varia por fonte). Herda de `details.menu` o
     cursor e o `list-style:none`; o que precisa cair é o `▾`, o `padding` e o
     fundo escuro do estado aberto — um acionador de ícone não é um rótulo de
     menu. */
  details.gaveta{position:static;flex:0 0 auto}
  details.gaveta>summary.abrir-menu{width:44px;height:44px;padding:0;
    border-radius:4px;display:flex;align-items:center;justify-content:center;
    gap:0;background:none;color:#fff}
  details.gaveta>summary.abrir-menu::after{content:none}
  details.gaveta[open]>summary.abrir-menu{background:none;color:#fff}
  details.gaveta>summary.abrir-menu:focus-visible{outline:2px solid var(--amber);
    outline-offset:2px}
  .barras{display:flex;flex-direction:column;gap:5px}
  .barras>span{display:block;width:20px;height:2px;border-radius:1px;
    background:#fff}
  /* Aberta, as barras esmaecem para o cinza-sobre-escuro da topbar (estados
     `1c`–`1e` do handoff): o acionador continua ali, dizendo que é ele que
     desfaz o que fez. É reforço do `aria-expanded`, não substituto dele. */
  details.gaveta[open] .barras>span{background:#9AA3AB}

  /* --- Gaveta ---------------------------------------------------------- */
  /* Corretivo de 17/08/2026, aprovado por Augusto. A primeira versão cobria a
     viewport inteira (`inset:0`), e isso engolia a topbar: o acionador ficava
     debaixo do painel, não havia como fechar por ele — nem sem JavaScript — e o
     clique-fora não tinha superfície nenhuma. Agora o painel começa **abaixo**
     da topbar, que permanece visível e clicável, como o handoff desenhou nos
     estados `1c`–`1e`.

     A altura segue o conteúdo, limitada ao espaço que resta da viewport
     (`max-height`): é o que faz a gaveta encolher com quatro itens — "a gaveta
     encolhe e o card do usuário sobe", diz o handoff — e o que deixa véu de
     verdade para clicar embaixo dela. Onde o conteúdo passa do limite, a
     navegação e o rodapé rolam dentro de si (ver abaixo), e o painel para no fim
     da tela. Isso substitui a "altura total" do README do handoff, que era
     incompatível com um véu clicável e com um acionador alcançável.

     O limite é `calc(100% - 52px)`, e não `calc(100vh - 52px)`: num elemento
     `fixed` a porcentagem se resolve contra a viewport, a mesma referência do
     `bottom:0` do véu, enquanto `100vh` no telefone inclui a faixa da barra de
     endereço e deixaria o card do usuário abaixo do que se vê.

     O véu é um elemento real, irmão da gaveta (`base.html` explica por quê):
     clicar nele cai no clique-fora genérico do `core/casca.js`, que fecha todo
     `details.menu[open]` clicado por fora. Ele também não cobre a topbar. */
  .veu-da-gaveta{display:none;position:fixed;top:52px;left:0;right:0;bottom:0;
    z-index:85;background:rgba(22,25,28,.45)}
  details.gaveta[open]~.veu-da-gaveta{display:block}
  details.gaveta>.painel-da-gaveta{position:fixed;top:52px;left:0;right:0;
    z-index:90;max-height:calc(100% - 52px);display:flex;flex-direction:column;
    background:var(--card);color:var(--ink)}
  /* Enquanto a gaveta cobre a tela, o corpo não rola atrás dela. É `overflow-y`,
     nunca `overflow-x`: esconder o eixo horizontal mascararia estouro de largura
     e quebraria o `sticky` do cabeçalho local (§7.3). A classe mora dentro deste
     corte, então alargar a janela com a gaveta aberta devolve a rolagem. */
  body.gaveta-aberta{overflow-y:hidden}

  /* Cabeçalho: espelha a topbar em altura e recuo, com a marca escura sobre
     branco e o fechar à direita. */
  .cabecalho-da-gaveta{display:flex;align-items:center;gap:12px;height:52px;
    flex:0 0 auto;padding:0 8px 0 14px;border-bottom:1px solid var(--line)}
  .marca-da-gaveta{flex:1;min-width:0;color:var(--ink);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .marca-da-gaveta .sufixo{color:var(--steel)}
  .fechar-gaveta{width:44px;height:44px;flex:0 0 auto;padding:0;border:0;
    border-radius:4px;background:none;color:var(--steel);font-size:20px;
    line-height:1;cursor:pointer}
  .fechar-gaveta:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

  /* Navegação: a mesma lista da topbar, agora em linhas de toque. Cresce para
     ocupar o meio e rola dentro de si quando o perfil tem itens demais para a
     altura da tela — o rodapé do usuário continua ancorado no fim. */
  .painel-da-gaveta>nav{display:block;flex:1 1 auto;min-height:0;
    overflow-y:auto;padding:8px 10px}
  .painel-da-gaveta>nav>a{display:flex;align-items:center;min-height:52px;
    padding:0 14px;border-radius:5px;margin-bottom:2px;font-size:15px;
    color:var(--ink);background:none}
  .painel-da-gaveta>nav>a:hover{background:#F6F7F5;color:var(--ink)}
  .painel-da-gaveta>nav>a:focus-visible{outline:2px solid var(--amber);
    outline-offset:-2px}
  /* Item ativo: o mesmo recurso que a topbar usa para marcar rota (`nav a.on`),
     na tinta do sistema. `aria-current="page"` vem do HTML — o escuro não é o
     único portador da informação. */
  .painel-da-gaveta>nav>a.on{background:var(--ink);color:#fff;font-weight:600}

  /* --- Card do usuário, no rodapé da gaveta ---------------------------- */
  /* Ancorado por `flex`, não por posição fixa: com quatro itens de navegação a
     lista encolhe e o card sobe. `column-reverse` é o que faz o painel abrir
     **para cima**, empurrando a navegação, em vez de flutuar sobre ela — é o
     mesmo `<details class="menu usuario">` do 15-V.C, não um componente novo.

     `flex:0 1 auto`: o rodapé não cresce — é a navegação que ocupa a sobra, e é
     isso que o mantém no fim —, mas pode encolher e rolar dentro de si quando o
     menu aberto de um admin (oito itens) não couber numa tela curta. Sem isso o
     painel fixo cortaria o último item em vez de deixá-lo alcançável. */
  .rodape-da-gaveta{flex:0 1 auto;overflow-y:auto;
    border-top:1px solid var(--line);padding:10px}
  .rodape-da-gaveta details.usuario{margin-left:0;display:flex;
    flex-direction:column-reverse}
  .rodape-da-gaveta details.usuario>summary.conta{display:flex;
    align-items:center;gap:12px;min-height:56px;padding:0 12px;border-radius:5px;
    background:#FAFAF8;border:1px solid var(--line)}
  .rodape-da-gaveta details.usuario>summary.conta:hover{background:#F6F7F5}
  .rodape-da-gaveta details.usuario[open]>summary.conta{background:#FAFAF8}
  .rodape-da-gaveta details.usuario>summary.conta::after{content:"▾";
    color:var(--steel);font-size:11px;flex:0 0 auto}
  .rodape-da-gaveta details.usuario[open]>summary.conta::after{content:"▴";
    color:var(--amber);font-weight:700}
  /* Os seletores abaixo repetem `details.usuario` porque as regras de desktop
     que eles substituem são mais específicas do que `.rodape-da-gaveta` sozinho
     (`details.usuario .avatar-usuario`,
     `details.usuario>summary.conta .nome-conta`): sem isso o avatar continuaria
     com 30px e o nome ficaria cinza-claro sobre o card branco. */
  .rodape-da-gaveta details.usuario .avatar-usuario{width:36px;height:36px}
  .rodape-da-gaveta details.usuario .avatar-usuario svg{width:20px;height:20px}
  .rodape-da-gaveta .identidade-na-gaveta{flex:1;min-width:0;display:flex;
    flex-direction:column}
  .rodape-da-gaveta details.usuario>summary.conta .nome-conta{max-width:none;
    font-size:14px;font-weight:600;color:var(--ink)}
  .rodape-da-gaveta details.usuario[open]>summary.conta .nome-conta{
    color:var(--ink)}
  .rodape-da-gaveta .perfil-conta{font-size:11.5px;color:var(--steel);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Painel do menu: estático, na largura do card, acima dele. `overflow:hidden`
     recorta os cantos dos itens no raio do bloco — aqui é seguro, porque nada
     dentro do menu do usuário é posicionado por fora (a armadilha da RA-137 vale
     para listas de busca `absolute`, que este painel não tem). */
  .rodape-da-gaveta details.usuario>.suspenso{position:static;width:auto;
    min-width:0;padding:0;margin-bottom:6px;border:1px solid var(--line);
    border-radius:5px;overflow:hidden;box-shadow:none}
  .rodape-da-gaveta details.usuario>.suspenso a,
  .rodape-da-gaveta details.usuario>.suspenso button{display:flex;
    align-items:center;min-height:48px;padding:0 14px;font-size:14.5px;
    border-radius:0}
  .rodape-da-gaveta details.usuario>.suspenso a+a{
    border-top:1px solid var(--line)}
  .rodape-da-gaveta details.usuario>.suspenso hr{margin:0}
  /* A versão em execução abre o painel na gaveta (G4), numa linha própria — o
     cabeçalho de identidade da topbar não se repete aqui (16F) —, no recuo
     dos itens e com a mesma divisória deles. */
  .rodape-da-gaveta details.usuario>.suspenso .versao-na-gaveta{
    padding:10px 14px;border-bottom:1px solid var(--line)}
  .rodape-da-gaveta details.usuario>.suspenso .versao-em-execucao{
    display:block;font-family:var(--mono);font-size:12px;color:var(--steel);
    overflow-wrap:anywhere}
}

/* ------------------------------------------------------------------ */
/* Identidade responsiva da topbar (Marco 17, Pacote 17C.4)           */
/* ------------------------------------------------------------------ */

/* Decisão 11.93, na forma aprovada por Augusto em 27/08/2026. Ela **emenda o
   corte do 16F de 1040px para 820px** — a seção anterior explica o porquê pelo
   lado da gaveta; esta monta o que passa a existir acima dela.

   O acionador do menu do usuário mostra nome **e** avatar desde o 15-V.C
   (decisão 11.69), e o nome cabia porque as contas de desenvolvimento tinham
   nomes curtos. Com os nomes reais fixados na matriz da decisão 11.91 ele
   deixou de caber: com `Augusto Ivan Bordin` o bloco do usuário mede 168px e a
   topbar de seis rotas quebrava em **duas linhas de 122px** de 1040px a
   ~1222px — não por desenho, mas pelo `flex-wrap` do `header`, que é a pior
   forma de ganhar altura: imprevisível, sem alinhamento e diferente a cada
   nome.

   --- As quatro faixas ---------------------------------------------------

     ≥ 1280px       uma linha; **nome completo** ao lado do avatar
     1220–1279px    uma linha; **primeiro nome** ao lado do avatar
     820–1219px     **duas linhas deliberadas** (alternativa `1g` do handoff do
                    16F): marca e identidade na primeira, navegação inteira na
                    segunda; o nome continua sendo o primeiro nome
     ≤ 819px        topbar estreita, acionador de três barras e gaveta (16F)

   **Não existe estágio "somente avatar".** A identidade fica visível em toda
   largura acima da gaveta: o que muda é a grafia do nome e o número de linhas.

   **O nome visível nunca volta atrás.** Estreitar a tela pode encurtar o nome
   (completo → primeiro), nunca alongá-lo: por isso o primeiro nome é o
   **padrão** declarado a partir de 820px, e o nome completo é o que a faixa
   larga acrescenta por cima. Não há como uma faixa mais estreita reacender o
   nome completo, porque nenhuma delas o liga.

   --- De onde saem 1220 e 1280 -------------------------------------------

   Medição em navegador (Chromium, `system-ui`), casca autenticada com a
   navegação de **seis** rotas, que é a mais larga que a régua permite (admin,
   PCP e Planejador; Operador e Almoxarife veem quatro e sobram ~270px):

     padding do header  40,0   (20 + 20)
     marca             161,8
     gap                24,0
     navegação         804,6   (61 + 114 + 78 + 191 + 170 + 180 + 5 gaps de 2)
     gap                24,0
     ----------------------------------
     casca fixa       1054,4px

   O bloco do usuário custa `12 (padding) + nome + 10 (gap) + 30 (avatar)`, ou
   seja `52 + nome`. Para a linha única não quebrar:

     nome ≤ largura − 1054,4 − 52  =  largura − 1106,4

   Daí o teto comum das duas faixas de uma linha, `calc(100vw - 1147px)`: são os
   1106,4 arredondados mais ~40px de folga, que cobrem a variação de métrica de
   fonte entre sistemas e o fato de `100vw` incluir a barra de rolagem que o
   `header` não tem. O teto é do **componente** e vale para qualquer nome — não
   há largura calibrada no nome de ninguém, e nome mais longo que o teto
   continua truncando com reticências, como já truncava.

   Os dois cortes são esse teto resolvido para o pior caso de cada faixa:

     1280px  nome completo — teto `min(220px, calc(...))`; em 1280 sobram 133px,
             e o `220px` da regra homologada volta inteiro a partir de ~1367px
     1220px  primeiro nome — teto `min(110px, calc(...))`; em 1220 sobram 73px,
             que comportam a maioria dos primeiros nomes sem truncar

   Abaixo de 1220px a linha única acabou: mesmo com o avatar sozinho ela
   precisaria de 1096,4px, e um estágio que apagasse o nome compraria pouco mais
   de 100px de largura ao preço de esconder a identidade. É onde entra o `1g`.

   --- A faixa de duas linhas (820–1219px) --------------------------------

   Aqui a segunda linha é **estrutura, não acidente**. O `header` deixa de ser
   `flex` e vira `grid` de duas colunas e **duas linhas nomeadas**: a marca e a
   identidade dividem a primeira; a navegação ocupa a segunda inteira, pelo
   `grid-area`. Três coisas seguem disso, e são o motivo de ser grid e não
   `flex-wrap` com `flex-basis:100%`:

   1. **Uma terceira linha é impossível.** Só existem duas áreas declaradas e
      três filhos visíveis; não há nada que possa transbordar para uma linha
      nova, com qualquer nome e qualquer perfil.
   2. **A altura é declarada, não medida.** As linhas são fixas (38px para o
      acionador do usuário, 28px para a navegação) e o conteúdo é centrado
      dentro delas. O resultado é sempre 92px — contra os 122px erráticos do
      wrap —, e não muda com o nome.
   3. **Os alinhamentos são explícitos.** A marca ancora à esquerda (`1fr`), a
      identidade à direita (coluna `auto`), e a navegação começa à esquerda da
      segunda linha, alinhada com a marca pelo mesmo `padding` do `header`.

   As medidas compactas são as do `1g`: `padding:10px 16px`, `row-gap:6px`,
   marca e navegação a 11.5px, itens de navegação com `padding:5px 8px`. A única
   divergência deliberada do desenho é o avatar, que fica nos **30px** de sempre
   em vez dos 28px do esboço: manter um só tamanho de avatar na topbar vale mais
   do que dois pixels, e o bloco de identidade passa a ser literalmente o mesmo
   das faixas de uma linha.

   A navegação não quebra por dentro (`flex-wrap:nowrap`, itens `nowrap`): com
   as medidas compactas as seis rotas somam ~621px e a linha oferece 788px em
   820px, a largura mais apertada da faixa. */

/* Nome acessível do acionador do usuário da topbar direta. A regra entrega o
   nome **inteiro** a esse acionador nas **três** faixas em que ele existe — a
   partir de 820px —, inclusive naquela em que o texto visível é só o primeiro
   nome.

   Até 819px ela não alcança ninguém: o corte estreito esconde o acionador e o
   `<details>` que o contém (`header>nav,header>details.usuario{display:none}`),
   e o acionador visível da topbar passa a ser o da **gaveta**, cujo nome
   acessível é `Abrir menu`. O nome completo do usuário aparece então no card
   **separado** do rodapé da gaveta, junto do perfil — outro elemento, não este.

   Fica fora de `@media` por simplicidade estrutural, e não porque valha em toda
   largura: declarar o recorte uma vez evita repeti-lo nos dois lados do corte.
   Estar fora do `@media` não torna acessível nem observável um acionador que o
   CSS escondeu.

   `position:absolute` tira o texto exclusivo de leitores do fluxo visual — e,
   com ele, do fluxo do flex, por isso ele não consome o `gap` de 10px do
   acionador. Mesmo recorte já usado no `<thead>` empilhado do histórico de
   desenhos. */
header>details.usuario>summary.conta .nome-para-leitores{position:absolute;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- Comum às três faixas acima da gaveta ---------------------------- */
/* O primeiro nome é o padrão: é a grafia que vale de 820px a 1279px, e a única
   que uma faixa mais estreita pode mostrar. O bloco do usuário não estica com o
   nome e o seu conteúdo não quebra. */
@media(min-width:820px){
  header>details.usuario{flex:0 0 auto}
  header>details.usuario>summary.conta{flex-wrap:nowrap;white-space:nowrap}
  header>details.usuario>summary.conta .nome-conta{min-width:0}
  header>details.usuario>summary.conta .nome-conta>span{display:none;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header>details.usuario>summary.conta .nome-conta>.nome-abreviado{display:block}
}

/* --- 820–1219px: duas linhas deliberadas (alternativa `1g`) ----------- */
@media(min-width:820px) and (max-width:1219px){
  /* Duas colunas, duas linhas, três áreas. A altura sai daqui, não do
     conteúdo: 10 + 38 + 6 + 28 + 10 = 92px, sempre. */
  header{display:grid;grid-template-columns:1fr auto;
    grid-template-rows:38px 28px;
    grid-template-areas:"marca identidade" "navegacao navegacao";
    align-items:center;gap:6px 12px;padding:10px 16px;height:auto}
  header>.marca-e-modulo{grid-area:marca;min-width:0}
  header>.marca-e-modulo>a.brand{font-size:11.5px;
    letter-spacing:.14em;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  header>details.usuario{grid-area:identidade}
  /* A navegação ocupa a segunda linha inteira e não quebra por dentro. */
  header>nav{grid-area:navegacao;flex-wrap:nowrap;gap:2px}
  header>nav>a{padding:5px 8px;font-size:11.5px;white-space:nowrap}
  /* O teto do nome aqui é o `max-width:220px` da regra homologada, que a linha
     comporta com folga: a primeira linha tem só marca e identidade. */

  /* O painel do menu desce do **cabeçalho inteiro**, não do acionador. Ancorado
     ao acionador — que agora vive na primeira linha — ele começaria 6px abaixo
     dela e cobriria a navegação da segunda, escondendo rota enquanto o menu
     está aberto. `position:static` no `<details>` devolve a âncora ao `header`
     (o único `relative` aqui), e o `right` acompanha o `padding` de 16px, para
     o painel continuar alinhado com o bloco de identidade. */
  header{position:relative}
  header>details.usuario{position:static}
  header>details.usuario>.suspenso{top:calc(100% + 6px);right:16px;left:auto}
}

/* --- 1220–1279px: uma linha, primeiro nome --------------------------- */
@media(min-width:1220px) and (max-width:1279px){
  header>nav{flex:0 1 auto;min-width:0}
  header>details.usuario>summary.conta .nome-conta{
    max-width:min(110px,calc(100vw - 1147px))}
}

/* --- ≥1280px: uma linha, nome completo ------------------------------- */
/* A faixa larga é a única que acende o nome completo, e apaga o primeiro nome
   ao fazê-lo — as duas grafias nunca aparecem juntas. */
@media(min-width:1280px){
  header>nav{flex:0 1 auto;min-width:0}
  header>details.usuario>summary.conta .nome-conta{
    max-width:min(220px,calc(100vw - 1147px))}
  header>details.usuario>summary.conta .nome-conta>.nome-completo{display:block}
  header>details.usuario>summary.conta .nome-conta>.nome-abreviado{display:none}
}

/* ------------------------------------------------------------------ */
/* Meu perfil (Marco 16, Pacote 16A-Conta; handoff 16A, variante 1c)   */
/* ------------------------------------------------------------------ */

/* Esta seção fica depois da responsividade móvel transversal de propósito: a
   tela nasceu com o seu próprio corte de 560px, e o bloco transversal precisa
   continuar sendo o **primeiro** `@media(max-width:560px)` da folha — é por ele
   que `producao/tests/test_responsividade_mobile.bloco_movel()` acha o que
   fiscaliza. O que é só desta tela mora aqui, escopado por
   `body.pagina-meu-perfil`, e não alcança nenhuma outra. */

/* Coluna estreita de formulário curto, a mesma referência do 10B-V. */
body.pagina-meu-perfil main{max-width:760px}

/* Identificação: avatar atual à esquerda, nome e usuário à direita, selos
   abaixo. É grade, e não flex, porque o corte estreito precisa mover os selos
   para uma faixa própria de largura inteira sem mudar a ordem do HTML. */
.identidade-conta{display:grid;grid-template-columns:auto 1fr;gap:0 18px;
  align-items:center;padding:18px;border-bottom:1px solid var(--line)}
/* `span 3` são as três linhas da coluna da direita — nome/usuário, selos e a
   nota de leitura. Linha negativa não serviria: a grade não declara linhas
   explícitas, e `-1` cairia de volta na primeira. */
.identidade-conta .avatar-atual{grid-row:span 3;width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--amber);color:var(--ink)}
.identidade-conta .avatar-atual svg{width:34px;height:34px}
.identidade-conta .avatar-atual img{width:100%;height:100%;object-fit:cover}
.identidade-conta .nome{font-size:17px;font-weight:600;letter-spacing:-.01em}
.identidade-conta .usuario{font-size:12.5px;color:var(--steel)}
.identidade-conta .note{margin-top:8px}

/* Perfil e setores como metadado, não como campo: micro-rótulo + selo, com uma
   divisória de 1px separando os dois grupos. O selo de setor é o cinza de fim
   de linha (`.t-fim`), mas escrito como o setor se chama — caixa alta
   transformaria "Linha 1" num rótulo de estado, que ele não é. */
.selos-identidade{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.selos-identidade .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--steel)}
.selos-identidade .divisor{width:1px;height:14px;background:var(--line)}
.selos-identidade .tag.t-fim{text-transform:none;letter-spacing:normal}
.selos-identidade .sem-setores{font-size:12px;color:var(--steel)}

.rotulo-avatares{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--steel);font-weight:600;margin-bottom:12px}

/* Grade de escolha: seis colunas, cada opção um `submit`. O selecionado é
   borda âmbar cheia mais halo; o foco de teclado é o contorno âmbar externo de
   sempre (§5.14) — os dois coexistem sem se anular.

   O estado vem de `aria-pressed`, não de `aria-current`: escolher avatar não é
   navegar, é acionar a opção que está valendo. `aria-current` marca onde o
   usuário **está** dentro de um conjunto de destinos (é o que a aba faz, com
   `page`); aqui o que se comunica é qual botão está acionado. */
.grade-avatares{display:grid;grid-template-columns:repeat(6,1fr);gap:12px 10px}
.opcao-avatar{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 4px;border-radius:6px;cursor:pointer;font:inherit;
  background:#fff;border:2px solid var(--line)}
.opcao-avatar:hover{border-color:#B7BCB5}
.opcao-avatar:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.opcao-avatar[aria-pressed="true"]{border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(201,125,20,.15)}
.opcao-avatar .glifo{width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--amber);color:var(--ink)}
.opcao-avatar .glifo svg{width:21px;height:21px}
.opcao-avatar .glifo img{width:100%;height:100%;object-fit:cover}
.opcao-avatar .rotulo{font-size:9.5px;color:var(--steel);text-align:center}

/* `Senha atual` ocupa meia linha sozinha, como no handoff: o vão ao lado dela é
   só espaço, e desaparece quando a grade de 12 colunas já virou coluna única. */
.campos-senha input{font-family:var(--mono)}
@media(max-width:820px){.campos-senha .espaco{display:none}}

@media(max-width:560px){
  /* Quatro colunas em vez de seis; nenhum avatar deixa de ser oferecido. */
  body.pagina-meu-perfil .grade-avatares{grid-template-columns:repeat(4,1fr);gap:12px 8px}

  /* A faixa de identidade reflui: avatar e nome na primeira linha, selos numa
     faixa própria abaixo, separada por borda. */
  body.pagina-meu-perfil .identidade-conta{padding:14px}
  body.pagina-meu-perfil .identidade-conta .avatar-atual{grid-row:auto;
    width:48px;height:48px}
  body.pagina-meu-perfil .identidade-conta .avatar-atual svg{width:26px;height:26px}
  body.pagina-meu-perfil .identidade-conta .nome{font-size:16px}
  body.pagina-meu-perfil .identidade-conta .selos-identidade,
  body.pagina-meu-perfil .identidade-conta .note{grid-column:1 / -1}
  body.pagina-meu-perfil .identidade-conta .selos-identidade{margin-top:12px;
    padding-top:10px;border-top:1px solid var(--line)}

  /* 16px é o piso anti-zoom do iOS; o primário ocupa a linha inteira, com o
     alvo de toque do pacote móvel. */
  body.pagina-meu-perfil .campos-senha input{font-size:16px;padding:9px 10px}
  body.pagina-meu-perfil .actions .btn{width:100%;padding:10px 14px}
}

/* ------------------------------------------------------------------ */
/* Administração de usuários (Marco 16, Pacote 16A-Admin; handoff 16A) */
/* ------------------------------------------------------------------ */

/* Como a seção de `Meu perfil` acima, esta fica **depois** da responsividade
   móvel transversal: aquele bloco precisa continuar sendo o primeiro
   `@media(max-width:560px)` da folha — é por ele que
   `producao/tests/test_responsividade_mobile.bloco_movel()` acha o que
   fiscaliza. O corte estreito desta tela mora no fim deste arquivo, escopado
   por `body.administracao`, e não alcança nenhuma outra.

   Nenhum valor novo de cor: as famílias de estado, os alertas e os botões são
   os já homologados. O que existe aqui é composição. */

/* `.alert.info` só tinha definição dentro de `body.pagina-detalhe-of`; fora de
   lá a classe existe no HTML e não pinta nada. Estas telas precisam do tom
   informativo (primeiro dia, usuário inativo), e o tom é declarado aqui com o
   mesmo escopo restrito — mudar a regra global mexeria na aparência de telas
   já homologadas que também usam a classe. A lacuna está registrada na
   passagem do pacote. */
body.administracao .alert.info{background:#EAF1F7;border:1px solid #C7D6E3;color:#2C5A80}

/* Coluna estreita nas telas de um usuário só; a lista usa a largura padrão. */
body.pagina-usuario main{max-width:880px}
body.pagina-resultado-usuario main{max-width:680px}

/* Título com selo à direita, dentro da `.toolbar` de sempre: o selo pertence
   ao título, e não ao lado oposto da barra. */
.titulo-com-selo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Selo escrito como a coisa se chama: "Bobinagem" em caixa alta viraria
   rótulo de estado, que não é (mesma correção de `.selos-identidade` em
   `Meu perfil`). */
.selo-setor{text-transform:none;letter-spacing:normal;font-weight:500}

/* Uma recusa de senha traz **uma regra violada por item** (handoff 1e), e as
   mensagens canônicas do Django chegam como `<ul class="errorlist">`. Sem
   isto a lista herdaria o recuo de 40px do navegador. Escopado a estas telas:
   `Meu perfil` está homologado como está, e promover a regra a global mexeria
   nela sem que ninguém tenha pedido. */
body.administracao .erro ul{margin:4px 0 0;padding-left:18px;line-height:1.5}
body.administracao .erro ul li+li{margin-top:2px}

/* --- Lista (1a) ------------------------------------------------------- */

.filtros-usuarios .f.perfil{min-width:170px}
.filtros-usuarios .f.situacao{min-width:150px}

/* Seis colunas; abaixo de 860px a tabela rola **dentro** de
   `.tabela-rolavel`, nunca no documento. Cada coluna é o motivo da visita —
   espremer nome e setores destruiria a conferência. */
table.usuarios{min-width:860px;table-layout:fixed}
table.usuarios th{padding:9px 14px}
table.usuarios td{padding:10px 14px;vertical-align:middle}
table.usuarios col.col-usuario{width:150px}
table.usuarios col.col-perfil{width:170px}
table.usuarios col.col-setores{width:200px}
table.usuarios col.col-situacao{width:100px}
table.usuarios col.col-abrir{width:110px}
table.usuarios td.usuario{font-weight:600;color:var(--amber)}
table.usuarios td.perfil .tag+.tag{margin-left:4px}
table.usuarios td.setores .tag{margin:1px 2px 1px 0}
table.usuarios .todos-os-setores{font-size:12px;color:var(--steel)}
table.usuarios th.abrir,table.usuarios td.abrir{text-align:right}
/* Linha inativa atenua os **dados**, célula por célula; `opacity` no `<tr>`
   criaria contexto de empilhamento e apagaria também o badge, que é
   justamente o que informa a situação (mesma escolha de
   `tr.apontamento-cancelado`). */
table.usuarios tr.usuario-inativo td.usuario,
table.usuarios tr.usuario-inativo td.nome{color:var(--steel)}
.sem-resultados .note{margin-top:12px}

/* --- Blocos do detalhe (1g/1h) ---------------------------------------- */

/* Bloco unificado do Marco 5: identificação e edição dentro de uma moldura
   só, com o card de ações administrativas separado abaixo. */
.bloco-do-usuario{background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:20px;margin-bottom:16px}
.rotulo-de-bloco{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--steel);font-weight:600;margin-bottom:10px}
.identificacao-do-usuario{margin-bottom:20px}
.editor-de-acesso,.acesso-em-leitura{border:1px solid var(--line);border-radius:6px;
  overflow:hidden}
.acesso-em-leitura{background:#FAFAF8}
.editor-de-acesso>.corpo,.acesso-em-leitura>.corpo{padding:16px}
.editor-de-acesso>.corpo+.corpo{border-top:1px solid var(--line)}
.acesso-em-leitura .selos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.acesso-em-leitura .selos:last-child{margin-bottom:0}
/* Rodapé do formulário: a nota de que a pessoa não altera isso em `Meu
   perfil` fica ao lado do próprio botão que ela explica. */
.rodape-do-editor{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--line);background:#FAFAF8}
.rodape-do-editor .note{margin-top:0;flex:1;min-width:200px}

/* --- Caixas de perfil, exceção e setores (1d/1g/1i) -------------------- */

.rotulo-de-grupo{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--steel);font-weight:600;margin-bottom:4px}
.rotulo-de-grupo .req{color:var(--red);margin-left:2px}
/* Duas colunas, o mesmo controle para perfil e setores. O rótulo inteiro é
   clicável porque o `<label>` envolve o `<input>`, e a linha tem 40px de alvo
   de toque no desktop. */
.opcoes-marcaveis{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.opcao-marcavel{display:flex;align-items:center;gap:10px;min-height:40px;
  padding:0 8px;border-radius:4px;font-size:13.5px;color:var(--ink);
  font-weight:400;cursor:pointer}
.opcao-marcavel:hover{background:#F6F7F5}
.opcao-marcavel input{width:17px;height:17px;padding:0;accent-color:var(--amber)}
/* Foco visível independentemente de a caixa estar marcada (§8.2). */
.opcao-marcavel:focus-within{outline:2px solid var(--amber);outline-offset:-2px}
.opcao-marcavel .inativo{color:var(--steel);font-size:12px}
/* Grupo recusado: a borda vermelha é do contêiner das caixas, e a mensagem
   canônica vem colada abaixo dele. */
.grupo-marcavel.invalido{border:2px solid var(--red);border-radius:4px;padding:4px 8px}

/* A exceção da decisão 11.28 tem casa própria: separada do perfil por linha
   tracejada, em âmbar, para que ninguém a confunda com mais um perfil. */
.excecao-ao-perfil{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.excecao-ao-perfil>.rotulo{font-size:9.5px;text-transform:uppercase;
  letter-spacing:.08em;color:#8A5510;font-weight:700;margin-bottom:6px}
.excecao-ao-perfil .opcao-marcavel{align-items:flex-start;border:1px solid var(--amber);
  border-radius:5px;background:#FDF8F0;padding:12px 14px}
.excecao-ao-perfil .opcao-marcavel:hover{background:#FCF4E8}
.excecao-ao-perfil .opcao-marcavel input{margin-top:2px}
.excecao-ao-perfil .explicacao{display:block;font-size:11.5px;color:#7A5510;margin-top:2px}

/* --- Ações administrativas (1g/1h) ------------------------------------ */

.acao-administrativa{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid #EFF0ED}
.acao-administrativa:last-child{border-bottom:0}
.acao-administrativa .descricao{flex:1;min-width:240px}
.acao-administrativa .titulo{font-size:13px;font-weight:600}
.acao-administrativa .note{margin-top:2px}
.acao-administrativa form{margin:0}

/* --- Revisão da inativação (1k) e redefinição (1l) --------------------- */

.dado-lido .k{font-size:9px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--steel)}
.dado-lido .v{font-size:13px;font-weight:600;margin-top:3px}
table.antes-e-depois th{padding:9px 18px}
table.antes-e-depois td{padding:10px 18px}
table.antes-e-depois td.destaque{font-weight:600}
table.antes-e-depois td.neutro{color:var(--steel)}
/* A frase de ação fica à esquerda dos botões e diz exatamente o que o clique
   faz — o padrão das confirmações do sistema. */
.actions.duas-acoes{align-items:center}
.frase-de-acao{font-size:12px;color:var(--steel);flex:1;min-width:200px;
  text-align:left}
.actions.actions-a-esquerda{justify-content:flex-start}
.cabecalho-com-identidade{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cabecalho-com-identidade .identidade{font-size:11px;font-weight:400;
  text-transform:none;letter-spacing:normal;color:var(--steel)}
.regras-de-senha{margin-top:16px}
.regras-de-senha ul{margin:0;padding-left:18px;font-size:12px;color:var(--steel);
  line-height:1.6}

/* --- Resultado (1f/1m) ------------------------------------------------- */

.resultado-de-usuario{text-align:center}
.resultado-de-usuario .icone-do-resultado{width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:#fff;font-size:21px;display:flex;align-items:center;
  justify-content:center;margin:20px auto 14px}
.resultado-de-usuario .sub{margin-bottom:20px}
.resultado-de-usuario .card{text-align:left}
.resultado-de-usuario .body{padding:6px 18px 14px}
.resultado-de-usuario .par{display:flex;justify-content:space-between;
  align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #EFF0ED;
  font-size:13px}
.resultado-de-usuario .par:last-child{border-bottom:0}
.resultado-de-usuario .par .k{color:var(--steel)}
.resultado-de-usuario .par .v{font-weight:600;text-align:right}
.resultado-de-usuario .par .v.neutro,
.resultado-de-usuario .par .pelo-perfil{color:var(--steel);font-weight:400}

/* --- Corte estreito ---------------------------------------------------- */

@media(max-width:560px){
  /* A rolagem lateral deixa de ser aceitável para conferir a equipe: cada
     linha vira cartão. **Nenhuma informação sai** — muda a forma, não o
     conteúdo. O cabeçalho da tabela sai porque as colunas deixaram de existir
     lado a lado, exatamente como no formset de componentes do pacote móvel. */
  body.pagina-usuarios .tabela-rolavel{overflow-x:visible}
  body.pagina-usuarios table.usuarios{min-width:0;display:block;table-layout:auto}
  body.pagina-usuarios table.usuarios>colgroup,
  body.pagina-usuarios table.usuarios>thead{display:none}
  body.pagina-usuarios table.usuarios>tbody{display:block}
  body.pagina-usuarios table.usuarios>tbody>tr{display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"usuario situacao" "nome nome" "perfil perfil"
                        "setores setores" "abrir abrir";
    gap:4px 10px;border:1px solid var(--line);border-radius:6px;
    padding:12px 14px;margin-bottom:10px;background:#fff}
  body.pagina-usuarios table.usuarios>tbody>tr>td{display:block;border:0;padding:0}
  body.pagina-usuarios table.usuarios td.usuario{grid-area:usuario;font-size:13.5px}
  body.pagina-usuarios table.usuarios td.nome{grid-area:nome;font-size:14px;font-weight:600}
  body.pagina-usuarios table.usuarios td.perfil{grid-area:perfil}
  body.pagina-usuarios table.usuarios td.setores{grid-area:setores}
  body.pagina-usuarios table.usuarios td.situacao{grid-area:situacao;text-align:right}
  body.pagina-usuarios table.usuarios td.abrir{grid-area:abrir;margin-top:6px}
  body.pagina-usuarios table.usuarios td.abrir .btn{width:100%;padding:11px 14px;
    font-size:14px}
  body.pagina-usuarios .resultados-de-of{background:transparent;border:0}
  body.pagina-usuarios .rodape-da-listagem{border-top:0;padding:0}

  /* Caixas com 48px de altura e alvo de toque maior; os campos a 16px, o piso
     anti-zoom do iOS. Nenhuma opção deixa de ser oferecida. */
  body.administracao .opcoes-marcaveis{grid-template-columns:1fr}
  body.administracao .opcao-marcavel{min-height:48px;gap:12px;font-size:15px}
  body.administracao .opcao-marcavel input{width:20px;height:20px}
  body.administracao .bloco-do-usuario{padding:14px}
  body.administracao .editor-de-acesso>.corpo,
  body.administracao .acesso-em-leitura>.corpo{padding:14px}
  /* A identificação não precisa de regra: `.detail-grid` já cai para uma
     coluna por linha desde os 820px. */
  /* Botões em largura total, empilhados. O primário fica por último sem
     inverter nada: é a ordem em que os templates já o escrevem. */
  body.administracao .actions{flex-direction:column;align-items:stretch}
  body.administracao .actions .btn{width:100%;padding:12px 16px}
  body.administracao .frase-de-acao{margin-bottom:4px}
  body.administracao .rodape-do-editor .btn{width:100%}
}

/* ------------------------------------------------------------------ */
/* Listas curadas e Cadastros (Marco 16, Pacote 16B; handoff 16B)      */
/* ------------------------------------------------------------------ */

/* Como as seções de `Meu perfil` e da administração de usuários, esta fica
   depois da responsividade móvel transversal: o bloco transversal precisa
   continuar sendo o **primeiro** `@media(max-width:560px)` da folha, porque é
   por ele que `test_responsividade_mobile.bloco_movel()` acha o que fiscaliza.
   O que é só destas telas mora aqui, escopado por `body.pagina-listas` e
   `body.pagina-cadastros`, e não alcança nenhuma outra.

   Nenhum valor novo de cor: as famílias de estado (`.t-fech`, `.t-fim`,
   `.t-parc`), o alerta `.warn` e os botões são os já homologados. O que existe
   aqui é composição. */

/* Rótulo abreviado das abas: existe no HTML das duas telas e só aparece no
   corte estreito (handoff 1n). Fora dele, quem fala é o rótulo inteiro. A regra
   é do componente `.abas`, e não de uma das telas, porque o `<span>` só existe
   onde o bloco `_abas.html` o escreve. */
.abas .rotulo-curto{display:none}

/* --- Listas curadas (1a) ---------------------------------------------- */

/* Coluna de leitura: cinco listas curtas não pedem a largura de uma listagem
   de OFs, e um card de 980px com quatro colunas de conteúdo ficaria vazio. */
body.pagina-listas main{max-width:980px}

/* Título do card à esquerda e o selo informativo à direita, dentro do mesmo
   cabeçalho de sempre: o selo pertence ao título. `.card > h2` já dá tipografia,
   caixa alta e borda; aqui só se acrescenta a distribuição. */
.cabecalho-de-lista{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap}
/* O selo é a regra da decisão 11.24 dita em uma linha, então não herda a caixa
   alta nem o espaçamento de letra do título do card. */
.cabecalho-de-lista .tag{text-transform:none;letter-spacing:normal;font-weight:600}

table.sugestoes{min-width:520px;table-layout:fixed}
table.sugestoes th{padding:8px 12px}
table.sugestoes td{padding:8px 12px;vertical-align:middle}
table.sugestoes col.col-alca{width:38px}
table.sugestoes col.col-ordem{width:64px}
table.sugestoes col.col-estado{width:110px}
table.sugestoes col.col-acoes{width:120px}
table.sugestoes td.ordem{color:var(--steel)}
table.sugestoes th.acoes,table.sugestoes td.acoes{text-align:right;white-space:nowrap}
table.sugestoes td.acoes form{margin:0}
table.sugestoes td.alca{padding-right:0}

/* A alça de arraste. `grab`/`grabbing` são o sinal de que a linha se move — o
   único sinal, porque a operação não tem caminho por teclado (decisão de
   Augusto de 16/08/2026, registrada no handoff 1e). */
.pegador{display:inline-block;color:var(--steel);cursor:grab;font-size:13px;
  line-height:1;user-select:none}
.pegador:active{cursor:grabbing}

/* Estado do item arrastado, exatamente o do handoff: fundo `#F6F7F5` e barra
   âmbar de 3px à esquerda. A barra é `box-shadow` interno na primeira célula, e
   não `border-left` no `<tr>`: borda em linha de tabela com `border-collapse`
   não é pintada de forma previsível entre navegadores. */
table.sugestoes tr.arrastando>td{background:#F6F7F5}
table.sugestoes tr.arrastando>td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
table.sugestoes tr.arrastando .pegador{color:var(--amber);cursor:grabbing}

/* Sugestão inativa: **continua visível** na curadoria (decisão 11.24) e atenua
   os dados **por célula**. `opacity` no `<tr>` criaria contexto de empilhamento
   e apagaria também o badge, que é justamente o que informa o estado — mesma
   escolha de `tr.apontamento-cancelado` e de `tr.usuario-inativo`. */
table.sugestoes tr.sugestao-inativa td.ordem,
table.sugestoes tr.sugestao-inativa td.valor{opacity:.65}

/* Inclusão: campo e botão na mesma linha, o botão alinhado ao fim do campo. */
.inclusao-de-sugestao{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.inclusao-de-sugestao .f{flex:1;min-width:240px;max-width:360px}
/* Sobe o botão à linha do controle, deixando a altura do rótulo acima dele. */
.inclusao-de-sugestao .btn{margin-top:22px}

/* --- Cadastros: lista com disclosure na própria linha (1i, 1j, 1l) ----- */

/* A "tabela" destas duas telas é uma grade, e não um `<table>`, por um motivo
   estrutural: o detalhe aprovado (variante 1l) é `<details>` nativo, sem
   JavaScript, e um `<details>` não pode envolver duas `<tr>` — o modelo de
   tabela do HTML não admite outro elemento entre `<tbody>` e `<tr>`. Revelar
   uma linha irmã exigiria `:has()` (e o dado sumiria onde ele faltasse) ou
   JavaScript novo, que o handoff pede para evitar.

   Com `display:grid` e um único `grid-template-columns` compartilhado pelo
   cabeçalho e por cada `<summary>`, as colunas continuam alinhadas, a densidade
   continua a de tabela compacta de 13px e o detalhe nasce naturalmente com a
   largura toda, logo abaixo da linha que o abriu. */
body.pagina-cadastros .cadastros{font-size:13px}
body.pagina-cadastros .cadastros.itens{--colunas:34px 130px minmax(240px,1fr) 200px 170px 120px;
  min-width:940px}
/* O mínimo de Pessoas é a soma real da linha — 1034px de colunas, 6 × 12px de
   espaço e 24px de padding. Com 1080px as células transbordavam do próprio
   `details`, e o detalhe, preso à largura dele, não alcançava a área rolada
   (P3 da decisão 13.54). */
body.pagina-cadastros .cadastros.pessoas{--colunas:34px 90px minmax(220px,1fr) 170px 200px 180px 140px;
  min-width:1130px}

.cabecalho-de-cadastros,
details.cadastro>summary{display:grid;grid-template-columns:var(--colunas);
  gap:0 12px;align-items:center}

.cabecalho-de-cadastros{padding:9px 12px;border-bottom:1px solid var(--line);
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--steel);
  font-weight:600}

details.cadastro>summary{padding:9px 12px;border-bottom:1px solid #EFF0ED;
  cursor:pointer;list-style:none}
/* Marcador próprio: o nativo é retirado nos dois motores, porque a coluna de
   34px do handoff já é o lugar dele e ele precisa girar com o estado. */
details.cadastro>summary::-webkit-details-marker{display:none}
details.cadastro>summary::marker{content:""}
details.cadastro>summary:hover{background:#FAFAF8}
/* O `<summary>` é o controle, e seu nome acessível é a linha inteira — é isso
   que dá nome ao marcador, que é puramente visual. */
details.cadastro>summary:focus-visible{outline:2px solid var(--amber);
  outline-offset:-2px}
details.cadastro>summary .marcador{color:var(--steel);text-align:center;
  font-size:11px;line-height:1}
details.cadastro>summary .marcador::before{content:"▸"}
details.cadastro[open]>summary .marcador::before{content:"▾"}
details.cadastro[open]>summary{background:#FAFAF8}
details.cadastro[open]>summary .marcador{color:var(--amber);font-weight:700}

/* Cada célula da linha. `min-width:0` é o que faz o truncamento valer numa
   grade: sem ele a coluna cresce até caber o texto inteiro e desalinha o
   restante. O texto completo continua disponível ao abrir o detalhe, que
   mostra descrição e razão social sem corte. */
details.cadastro>summary>span{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
details.cadastro>summary .codigo{color:var(--amber);font-weight:600}
details.cadastro>summary .setor .papel,
details.cadastro>summary .ausente{color:var(--steel)}
details.cadastro>summary .setor .papel{display:block;font-size:10px;
  text-transform:lowercase}
/* Funções e situação carregam selos, que não podem ser cortados pelo `hidden`
   da regra acima quando cabem inteiros. */
details.cadastro>summary .funcoes .tag{margin-right:4px}
.selo-funcao{text-transform:none;letter-spacing:normal;font-weight:600}

/* O detalhe ocupa a largura toda e recua ao conteúdo, alinhado à coluna do
   código — o mesmo recuo do handoff. */
.detalhe-do-cadastro{background:#FAFAF8;border-top:1px solid var(--line);
  border-bottom:1px solid #EFF0ED;padding:14px 18px 14px 46px}
.detalhe-do-cadastro .alert{margin-bottom:12px}
.grade-do-detalhe{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 18px}
.grade-do-detalhe .larga{grid-column:span 2}
.grade-do-detalhe .k{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--steel)}
.grade-do-detalhe .v{font-size:13px;font-weight:600;margin-top:2px}
.grade-do-detalhe .v.selos{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.grade-do-detalhe .ausente{color:var(--steel);font-weight:400}
/* E-mail e segmento do Methos (decisão 13.54, P3): o campo inteiro, sem corte.
   Uma lista de endereços sem espaço não pode esticar a grade — a célula aceita
   encolher (`min-width:0`) e o texto quebra onde precisar; `pre-wrap` mostra
   espaços e quebras como vieram. */
.grade-do-detalhe>div{min-width:0}
.grade-do-detalhe .v.texto-integral{white-space:pre-wrap;overflow-wrap:anywhere}
.situacoes-por-funcao{list-style:none;margin:3px 0 0;padding:0;display:grid;gap:4px}
.situacoes-por-funcao li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.situacoes-por-funcao .funcao{min-width:104px}
.situacoes-por-funcao .nota-da-funcao{flex-basis:100%;font-size:12px;font-weight:400;
  color:var(--steel)}
/* Em Pessoas, o detalhe cabe na parte **visível** da tabela. A grade das linhas
   tem largura mínima e rola dentro do contêiner (§5.16); sem isto o detalhe
   herdava essa largura, e um e-mail longo ficava com metade atrás da rolagem.
   `100cqw` é a largura visível do contêiner, e `sticky` o mantém à vista quando
   a tabela rola para o lado. A tabela resumida não muda. */
.tabela-rolavel.com-detalhe-visivel{container-type:inline-size}
.com-detalhe-visivel .detalhe-do-cadastro{position:sticky;left:0;
  box-sizing:border-box;max-width:100cqw}

/* --- Filtros e filtro rápido de curadoria (acréscimo aprovado) --------- */

.filtros-de-cadastro .f.classificacao{min-width:210px}
.filtros-de-cadastro .f.atividade{min-width:150px}

/* Família âmbar de atenção do handoff, aplicada a um botão-link. Âmbar e nunca
   vermelho: pendência de curadoria não é erro, é trabalho a fazer. `.ligado`
   marca o filtro em uso, e `aria-current` no HTML diz a mesma coisa a quem não
   vê a cor. */
.btn.atencao,a.btn.atencao,a.btn.atencao:visited{
  background:#FDF3E2;border-color:#EBD5A8;color:#7A5510}
.btn.atencao:hover,a.btn.atencao:hover{background:#FCF4E8;border-color:#DFC28A;
  color:#7A5510}
.btn.atencao.ligado{border-color:#C98F2E;box-shadow:inset 0 0 0 1px #C98F2E}
.btn.atencao .mono{font-weight:700;margin-left:2px}

/* --- Corte estreito ---------------------------------------------------- */

@media(max-width:560px){
  /* As cinco abas de `Listas` refluem em duas linhas com o rótulo abreviado
     (handoff 1n). O nome acessível do link continua sendo o rótulo inteiro, e
     nenhuma aba deixa de ser oferecida.

     A troca de rótulo é escrita sobre os dois `<span>` que só o bloco
     `core/blocos/_abas.html` produz, então ela não alcança as abas de
     `Consultar OFs`, que usam o bloco próprio da Produção. O reflow e a
     compactação, esses, ficam escopados às duas telas novas — mexer neles
     globalmente alteraria uma composição já homologada. */
  .abas .rotulo-longo{display:none}
  .abas .rotulo-curto{display:inline}
  body.pagina-listas .abas,body.pagina-cadastros .abas{flex-wrap:wrap;gap:2px}
  body.pagina-listas .abas a,body.pagina-listas .abas a:visited,
  body.pagina-cadastros .abas a,body.pagina-cadastros .abas a:visited{
    padding:8px 10px;font-size:12.5px}

  /* A tabela de sugestões continua sendo tabela e rola **dentro** de
     `.tabela-rolavel`, sem esconder coluna nenhuma; o botão de estado ganha
     alvo de toque maior. Empilhar em cartão tiraria a alça da posição em que o
     arraste faz sentido, e a operação já não tem caminho alternativo. */
  body.pagina-listas table.sugestoes{min-width:460px}
  body.pagina-listas table.sugestoes td.acoes .btn{padding:8px 12px}
  body.pagina-listas .inclusao-de-sugestao .f{max-width:none;flex:1 1 100%}
  body.pagina-listas .inclusao-de-sugestao .btn{margin-top:0;width:100%;
    padding:10px 14px}

  /* Cadastros: densa e somente leitura, então **confina rolagem** em vez de
     empilhar (§7.2). Espremer documento e razão social destruiria a
     conferência, que é a razão da tela. O rodapé de paginação fica fora do
     contêiner que rola, como no desktop. */
  body.pagina-cadastros .filtros-de-cadastro .f.classificacao,
  body.pagina-cadastros .filtros-de-cadastro .f.atividade{min-width:0;flex:1 1 140px}
  body.pagina-cadastros .filtros-de-cadastro .linha>.btn{flex:1 1 auto}
  /* O detalhe é o único bloco que empilha: quatro colunas de pares
     rótulo/valor em ~318px seriam ilegíveis, e ele não participa do
     alinhamento da grade das linhas. */
  body.pagina-cadastros .grade-do-detalhe{grid-template-columns:1fr}
  body.pagina-cadastros .grade-do-detalhe .larga{grid-column:span 1}
  body.pagina-cadastros .detalhe-do-cadastro{padding:12px 14px}
}

/* ------------------------------------------------------------------ */
/* Desenhos técnicos (Marco 16, Pacote 16C; handoff 16C)               */
/* ------------------------------------------------------------------ */

/* Como as seções de `Meu perfil`, da administração de usuários e do 16B, esta
   fica **depois** da responsividade móvel transversal: aquele bloco precisa
   continuar sendo o **primeiro** `@media(max-width:560px)` da folha, porque é
   por ele que `test_responsividade_mobile.bloco_movel()` acha o que fiscaliza.
   O que é só destas duas telas mora aqui, escopado por
   `body.pagina-desenhos-tecnicos` e `body.pagina-desenho-tecnico`, e não alcança
   nenhuma outra.

   Nenhum valor novo de cor: as famílias de estado (`.t-fech`, `.t-fim`,
   `.t-parc`, `.t-nova`), os alertas, os botões e os tons derivados (`#FDF8F0`,
   `#FAFAF8`, `#FDF6F5`, `#E8D9BE`, `#EFF0ED`) já estão homologados nesta folha.
   O que existe aqui é composição. */

/* `.alert.info` só tinha definição dentro de `body.pagina-detalhe-of` e de
   `body.administracao`; fora de lá a classe existe no HTML e não pinta nada. O
   bloqueio "não é Transformador" precisa do tom informativo — não houve erro
   nem tentativa, a tela apenas não se aplica —, e ele é declarado aqui com o
   mesmo escopo restrito, pelo mesmo motivo já registrado no 16A-Admin: mudar a
   regra global mexeria na aparência de telas já homologadas. */
body.pagina-desenho-tecnico .alert.info{background:#EAF1F7;border:1px solid #C7D6E3;
  color:#2C5A80}

/* Título de card com selo à direita, dentro do cabeçalho de sempre: o selo
   pertence ao título. `.card > h2` já dá tipografia, caixa alta e borda; aqui só
   se acrescenta a distribuição. O selo não herda a caixa alta — ele é uma frase
   ("Só Transformadores têm desenho", "Nada foi gravado"), não um rótulo de
   estado; mesma correção já feita em `.cabecalho-de-lista`. */
.cabecalho-de-desenhos{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cabecalho-de-desenhos .tag{text-transform:none;letter-spacing:normal;font-weight:600}
.cabecalho-de-desenhos .selo-contrato{font-family:var(--mono)}

/* --- Localizar Transformador (1a) ------------------------------------- */

/* O card de filtros ganha cabeçalho, então o recuo sai do card e vai para a
   linha: com os dois, a borda inferior do `<h2>` não encostaria nas laterais. */
body.pagina-desenhos-tecnicos .card.filtros.filtros-de-desenho{padding:0}
/* A linha era alta por dois motivos somados: o recuo de 18px e a moldura
   que o filtro `Desenho` herdava sem querer da classe global `.desenho`
   (fundo, borda e 12px de recuo proprio). Sem a moldura, `Desenho` e
   `Codigo ou descricao` sao dois campos iguais, alinhados pela mesma base,
   e o recuo do card volta ao padrao dos demais filtros. */
.filtros-de-desenho>.linha{padding:14px 16px}
.filtros-de-desenho .f.filtro-desenho{min-width:180px;flex:0 0 180px}

/* Cinco colunas; abaixo de ~820px a tabela rola **dentro** de `.tabela-rolavel`,
   nunca no documento. Espremer código e descrição destruiria a conferência em
   lote, que é a razão da tela. */
table.listagem.listagem-desenhos{min-width:820px}
table.listagem.listagem-desenhos col.col-codigo{width:110px}
table.listagem.listagem-desenhos col.col-desenho{width:190px}
table.listagem.listagem-desenhos col.col-situacao{width:120px}
table.listagem.listagem-desenhos col.col-abrir{width:110px}
/* Mesmo tratamento do lote na listagem de OFs — o código é o identificador que
   se procura —, sem ser link: o destino aqui é a ação `Abrir` da linha. */
.listagem-desenhos td.codigo{color:var(--amber);font-weight:600}
.listagem-desenhos .versao{font-size:12px;font-weight:600}
.listagem-desenhos .secundaria-inline{color:var(--steel);font-size:12px}

/* --- Tela do Transformador: título e identificação (1b, 1c, 1i) ------- */

body.pagina-desenho-tecnico main{max-width:1000px}
.titulo-com-volta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.titulo-com-volta a{font-size:12.5px}

/* A régua de uma linha do 15-V.C, com as larguras do handoff. */
.identificacao-do-desenho{margin-bottom:20px}
.linha-identificacao .c-codigo{width:110px}
.linha-identificacao .c-nome{flex:1;min-width:0}
.linha-identificacao .c-tipo{width:170px}
.linha-identificacao .c-situacao{width:110px}

/* Vazio sem tom de erro (§5.13): não ter desenho ainda não é falha. */
.vazio-compacto.sem-desenho{padding:20px;margin-top:0}
.vazio-compacto.sem-desenho .titulo{font-size:13.5px;font-weight:600;color:var(--ink);
  margin-bottom:3px}

/* --- Faixa da versão vigente (1c) ------------------------------------- */

/* O mesmo tratamento do lote selecionado no Marco 5: borda âmbar, barra
   esquerda de 3px e fundo `#FDF8F0`. A vigente é o que a grande maioria das
   visitas procura, e por isso é a única coisa da tela com leitura de relance. */
.faixa-da-vigente{border:1px solid var(--amber);border-left:3px solid var(--amber);
  border-radius:5px;background:#FDF8F0;padding:16px 18px;display:flex;align-items:center;
  gap:20px;flex-wrap:wrap}
/* Componente inativo: a versão não deixou de existir, mas não há mais o que
   suceder — a faixa perde o âmbar e o badge vira `Última`. */
.faixa-da-vigente.encerrada{border-color:var(--line);border-left-color:var(--line);
  background:#FAFAF8}
.faixa-da-vigente .numero{display:flex;align-items:baseline;gap:10px}
.faixa-da-vigente .n{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1}
.faixa-da-vigente.encerrada .n{font-size:22px;color:var(--steel)}
.faixa-da-vigente .divisor{width:1px;align-self:stretch;background:#E8D9BE}
.faixa-da-vigente.encerrada .divisor{background:var(--line)}
.faixa-da-vigente .metadados{display:flex;gap:26px;flex-wrap:wrap;flex:1;min-width:0}
.faixa-da-vigente .metadados .arquivo{min-width:0}
.faixa-da-vigente .k{font-size:9px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--steel)}
.faixa-da-vigente .v{font-size:13px;font-weight:600;margin-top:3px;overflow-wrap:anywhere}
.faixa-da-vigente .abrir{flex:0 0 auto}
.faixa-da-vigente+.note{margin-top:8px;font-size:11.5px}

/* --- Histórico sempre aberto (1c) ------------------------------------- */

.cabecalho-do-historico .contagem{font-size:12px;color:var(--steel);
  text-transform:none;letter-spacing:normal;font-weight:400}
.cabecalho-do-historico .somente-leitura{margin-left:auto;font-size:11.5px;
  color:var(--steel);text-transform:none;letter-spacing:normal;font-weight:400}

table.listagem.listagem-historico-desenho{min-width:720px;font-size:12.5px}
table.listagem.listagem-historico-desenho col.col-versao{width:130px}
table.listagem.listagem-historico-desenho col.col-data{width:150px}
table.listagem.listagem-historico-desenho col.col-autor{width:120px}
table.listagem.listagem-historico-desenho col.col-tamanho{width:90px}
table.listagem.listagem-historico-desenho col.col-abrir{width:150px}
.listagem-historico-desenho td{padding:9px 14px}
.listagem-historico-desenho tr.versao-vigente>td{background:#FDF8F0}
.listagem-historico-desenho td.versao{font-weight:600}
.listagem-historico-desenho td.versao .tag{margin-left:4px}
/* Atenuar é **por célula**, nunca no `<tr>`: `opacity` na linha criaria contexto
   de empilhamento e apagaria também o badge, que é o que informa o estado —
   mesma escolha de `tr.apontamento-cancelado` e `tr.usuario-inativo`. A vigente
   é a única em `--ink`. */
.listagem-historico-desenho tr.versao-anterior>td:not(.acoes){color:var(--steel)}
.rodape-do-historico{padding:10px 18px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--steel)}

/* --- Prévia que não grava (1f, 1g) ------------------------------------ */

/* A caixa neutra do arquivo já conferido, com `Trocar arquivo` à direita. */
.arquivo-conferido{border:1px solid var(--line);border-radius:5px;background:#FAFAF8;
  padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:14px}
.arquivo-conferido .identificacao{flex:1;min-width:200px;overflow-wrap:anywhere}
.arquivo-conferido .nome{font-size:13.5px;font-weight:600}
.arquivo-conferido .tamanho{font-size:11.5px;color:var(--steel)}
.arquivo-conferido form{margin:0}

/* O painel do §5.2 com as células do handoff: um pouco mais largas e mais
   arejadas, porque cada uma carrega rótulo, valor e às vezes uma terceira
   linha. */
.painel-da-previa{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border:1px solid var(--line);border-radius:5px;overflow:hidden}
.painel-da-previa>div{padding:12px 14px}
.painel-da-previa .k{font-size:9.5px;font-weight:600}
.painel-da-previa .v{font-size:13.5px;margin-top:4px}
.painel-da-previa .v.mono{font-size:13.5px}
.painel-da-previa .conferido{color:var(--green);font-weight:700}
.painel-da-previa .dimensoes{font-size:10.5px;color:var(--steel);margin-top:2px;
  padding:0}
/* O hash é o valor mais longo do painel; ele ganha a linha inteira quando a
   grade quebra, e o valor completo sai também em texto — `title` sozinho não
   alcança leitor de tela (§8.2). */
.painel-da-previa .celula-do-hash .v{overflow-wrap:anywhere;font-size:12px}
.hash-completo{margin-top:4px;padding:0}
.hash-completo>summary{font-size:10.5px;color:var(--steel);cursor:pointer}
.hash-completo>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.hash-completo .valor{font-size:11px;margin-top:3px;overflow-wrap:anywhere;
  color:var(--ink);padding:0}

/* Antes → depois no padrão das revisões do Marco 5. O antigo em `--steel`
   tachado — e não em vermelho: substituir é operação normal, e vermelho aqui
   fica reservado à recusa. */
table.listagem.antes-e-depois{min-width:0;table-layout:auto;font-size:12.5px;
  border:1px solid var(--line);border-radius:5px;overflow:hidden;margin-bottom:4px}
.antes-e-depois th{padding:8px 14px;background:#FAFAF8}
.antes-e-depois td{padding:9px 14px}
.antes-e-depois td.campo{font-weight:600}
.antes-e-depois td.diff-removido{color:var(--steel)}
.antes-e-depois td.diff-novo{font-weight:600}

.rodape-da-previa{border-top:1px dashed var(--line);margin-top:16px;padding-top:14px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.rodape-da-previa form{margin:0}
.rodape-da-previa .frase-de-acao{flex:1;min-width:240px;margin:0}

/* --- Inclusão e recusa (1b, 1e, 1h) ----------------------------------- */

.formulario-de-desenho .escolha-de-arquivo{border:1px dashed var(--line);
  border-radius:5px;background:#FAFAF8;padding:18px}
.formulario-de-desenho .escolha-de-arquivo input[type="file"]{width:100%;
  font-size:13px;margin-top:5px;padding:8px 10px;border:1px solid var(--line);
  border-radius:4px;background:#fff}
.formulario-de-desenho .escolha-de-arquivo input[type="file"]:focus-visible{
  outline:2px solid var(--amber);outline-offset:-1px}
/* A caixa âmbar do arquivo escolhido, criada por `desenho_tecnico.js`. Nasce
   `hidden`, e sem JavaScript nunca aparece — o campo nativo continua dizendo o
   nome do arquivo. */
.arquivo-escolhido{border:1px solid var(--amber);border-radius:5px;background:#FDF8F0;
  padding:12px 14px;margin-top:12px}
.arquivo-escolhido .nome{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.arquivo-escolhido .tamanho{font-size:11px;color:var(--steel);margin-top:2px}
/* O arquivo recusado, no vermelho de recusa e com o motivo na segunda linha. */
.arquivo-recusado{border:1px solid var(--red);border-radius:5px;background:#FDF6F5;
  padding:14px 16px;margin-bottom:14px}
.arquivo-recusado .nome{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.arquivo-recusado .motivo{font-size:11px;color:var(--steel);margin-top:2px}
/* O fecho invariável do handoff fica na mesma linha da causa. */
.formulario-de-desenho .alert.stop .fecho{display:inline}

.acao-de-substituir{margin-top:0}

/* --- Corte de 820px --------------------------------------------------- */

@media(max-width:820px){
  /* A identificação reflui em duas linhas — `.linha-identificacao` já faz isso
     desde os 720px; aqui só se garante que a descrição do transformador possa
     ocupar a linha inteira em vez de ser comprimida. */
  body.pagina-desenho-tecnico .linha-identificacao{flex-wrap:wrap}
  body.pagina-desenho-tecnico .linha-identificacao>div{width:auto;flex:1 1 45%;
    border-right:0;border-bottom:1px solid var(--line)}
  body.pagina-desenho-tecnico .linha-identificacao>div:last-child{border-bottom:0}
  body.pagina-desenho-tecnico .linha-identificacao .c-nome{flex:1 1 100%}
  /* A faixa da vigente mantém o âmbar; os metadados vão a duas colunas e o
     primário desce para a própria linha. */
  .faixa-da-vigente .metadados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 20px}
  .faixa-da-vigente .abrir{flex:1 1 100%}
}

/* --- Corte estreito --------------------------------------------------- */

@media(max-width:560px){
  /* Busca: o filtro e os botões ocupam a linha, e a tabela continua rolando
     **dentro** do card — nenhuma coluna sai. */
  body.pagina-desenhos-tecnicos .filtros-de-desenho .f.filtro-desenho{
    min-width:0;flex:1 1 140px}
  body.pagina-desenhos-tecnicos .filtros-de-desenho>.linha{padding:12px}
  body.pagina-desenhos-tecnicos .filtros-de-desenho .linha>.btn{flex:1 1 auto}

  /* Identificação empilha em pares, com a descrição livre para quebrar. */
  body.pagina-desenho-tecnico .linha-identificacao>div{flex:1 1 100%}
  body.pagina-desenho-tecnico .linha-identificacao .c-tipo,
  body.pagina-desenho-tecnico .linha-identificacao .c-situacao{flex:1 1 45%}

  /* Vigente: metadados em duas colunas, o arquivo ocupando as duas, e
     `Abrir desenho` em largura total com alvo de toque maior. */
  body.pagina-desenho-tecnico .faixa-da-vigente{padding:14px}
  body.pagina-desenho-tecnico .faixa-da-vigente .divisor{display:none}
  body.pagina-desenho-tecnico .faixa-da-vigente .metadados .arquivo{grid-column:span 2}
  body.pagina-desenho-tecnico .faixa-da-vigente .abrir{width:100%;padding:11px 14px}

  /* O histórico deixa de ser tabela e vira cartões por versão: nesta largura,
     empilhar preserva o sentido melhor que rolar lateralmente. **Nenhum dado
     sai** — cada célula recupera, por `data-rotulo`, o rótulo que o `<th>`
     dava, exatamente como a tabela de componentes da criação já faz. */
  body.pagina-desenho-tecnico .listagem-historico-desenho{min-width:0;
    table-layout:auto;display:block}
  body.pagina-desenho-tecnico .listagem-historico-desenho>colgroup{display:none}
  body.pagina-desenho-tecnico .listagem-historico-desenho>thead{position:absolute;
    width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.pagina-desenho-tecnico .listagem-historico-desenho>tbody{display:block}
  body.pagina-desenho-tecnico .listagem-historico-desenho>tbody>tr{display:block;
    border-bottom:1px solid var(--line);padding:12px 14px}
  body.pagina-desenho-tecnico .listagem-historico-desenho>tbody>tr>td{display:block;
    padding:2px 0;border:0;max-width:none}
  body.pagina-desenho-tecnico .listagem-historico-desenho td.versao{font-size:16px;
    margin-bottom:6px}
  body.pagina-desenho-tecnico .listagem-historico-desenho td[data-rotulo]::before{
    content:attr(data-rotulo);display:block;font-size:9.5px;text-transform:uppercase;
    letter-spacing:.08em;color:var(--steel);font-weight:600}
  body.pagina-desenho-tecnico .listagem-historico-desenho td.acoes{text-align:left;
    margin-top:8px}
  body.pagina-desenho-tecnico .listagem-historico-desenho td.acoes .btn{width:100%;
    padding:11px 14px}
  body.pagina-desenho-tecnico .listagem-historico-desenho .truncada{white-space:normal;
    overflow:visible;text-overflow:clip}

  /* Prévia: o painel cai para duas colunas e o hash ocupa as duas, porque é o
     valor mais longo. As ações empilham em largura total, primário por último —
     que é a ordem em que o template já as escreve. */
  body.pagina-desenho-tecnico .painel-da-previa{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.pagina-desenho-tecnico .painel-da-previa .celula-do-hash{grid-column:span 2}
  body.pagina-desenho-tecnico .rodape-da-previa{flex-direction:column;
    align-items:stretch}
  body.pagina-desenho-tecnico .rodape-da-previa form{width:100%}
  body.pagina-desenho-tecnico .rodape-da-previa .btn{width:100%;padding:12px 16px}
  body.pagina-desenho-tecnico .antes-e-depois th,
  body.pagina-desenho-tecnico .antes-e-depois td{padding:8px 10px}
  body.pagina-desenho-tecnico .acao-de-substituir .btn{width:100%;padding:12px 16px}
  body.pagina-desenho-tecnico .formulario-de-desenho .actions{flex-direction:column;
    align-items:stretch}
  body.pagina-desenho-tecnico .formulario-de-desenho .actions .btn{width:100%;
    padding:12px 16px}
}

/* ------------------------------------------------------------------ */
/* Importador do Methos (Marco 16, Pacote 16D; handoff 16D)            */
/* ------------------------------------------------------------------ */

/* Como as seções do 16A, do 16B e do 16C, esta fica **depois** da
   responsividade móvel transversal: aquele bloco precisa continuar sendo o
   **primeiro** `@media(max-width:560px)` da folha, porque é por ele que
   `test_responsividade_mobile.bloco_movel()` acha o que fiscaliza. O que é só
   desta tela mora aqui, escopado por `body.pagina-importacao`, e não alcança
   nenhuma outra.

   Nenhum valor novo de cor: as famílias de estado (`.t-nova`, `.t-fim`), os
   alertas, os botões e os tons derivados (`#FDF3E2`, `#F3E7E6`, `#FAFAF8`,
   `#F6F7F5`, `#EFF0ED`, `#8A5510`, `#7A5510`, `#8A3F37`) já estão homologados
   nesta folha. O que existe aqui é composição. */

/* `.alert.info` só tinha definição dentro de `body.pagina-detalhe-of`, de
   `body.administracao` e de `body.pagina-desenho-tecnico`; fora de lá a classe
   existe no HTML e não pinta nada. O estado `Nada a fazer` precisa do tom
   informativo — não houve erro nem operação —, e ele é declarado aqui com o
   mesmo escopo restrito, pelo motivo já registrado nos dois pacotes anteriores:
   promover a regra a global mexeria em telas já homologadas. */
body.pagina-importacao .alert.info{background:#EAF1F7;border:1px solid #C7D6E3;
  color:#2C5A80}

/* A operação é de leitura densa; a coluna de 1180px do padrão daria linhas
   longas demais para uma tela de dois cards. */
body.pagina-importacao main{max-width:1000px}

/* Título de card com selo à direita, no mesmo desenho de `.cabecalho-de-desenhos`
   do 16C. O selo não herda a caixa alta: ele é um contrato (`TXT · windows-1252
   · separador ;`) e uma frase ("Nada foi gravado"), não um rótulo de estado. */
.cabecalho-da-importacao{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cabecalho-da-importacao .tag{text-transform:none;letter-spacing:normal;
  font-weight:600}
.cabecalho-da-importacao .selo-contrato{font-family:var(--mono)}

/* --- Escolha e conferência do arquivo (`1a`, `1b`, `1e`, `1h`) -------- */

/* Mesma moldura tracejada do 16C, com o campo nativo visível dentro dela. */
body.pagina-importacao .escolha-de-arquivo{border:1px dashed var(--line);
  border-radius:5px;background:#FAFAF8;padding:18px}
body.pagina-importacao .escolha-de-arquivo input[type="file"]{width:100%;
  font-size:13px;margin-top:5px;padding:8px 10px;border:1px solid var(--line);
  border-radius:4px;background:#fff}
body.pagina-importacao .escolha-de-arquivo input[type="file"]:focus-visible{
  outline:2px solid var(--amber);outline-offset:-1px}
body.pagina-importacao .escolha-de-arquivo .note{margin-top:8px}
body.pagina-importacao .arquivo-conferido{margin-bottom:0}
body.pagina-importacao .arquivo-conferido .identificacao{display:flex;
  flex-direction:column;gap:2px}
body.pagina-importacao .alert.stop .fecho{margin-top:8px}

/* --- Última importação (acréscimo aprovado do handoff `1a`) ----------- */

.ultima-importacao>.body{display:flex;gap:28px;align-items:baseline;
  flex-wrap:wrap;font-size:13px;padding:14px 18px}
.ultima-importacao .k{font-size:9.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--steel);display:block}
.ultima-importacao .v{font-weight:600}
.ultima-importacao .v.arquivo{overflow-wrap:anywhere}
/* O único número com cor: é o que gera trabalho depois da carga. */
.ultima-importacao .v.marcados{color:#8A5510}

/* --- Indicadores da prévia (variante `1c`) ---------------------------- */

/* `Registros lidos` sozinho, numa faixa própria: é o total de referência do
   arquivo, e não um dos grupos. */
.faixa-de-lidos{display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 16px;border:1px solid var(--line);border-radius:5px;
  background:#FAFAF8;margin-bottom:12px}
.faixa-de-lidos .k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--steel);font-weight:600}
.faixa-de-lidos .n{font-size:22px;font-weight:600;letter-spacing:-.02em}

/* Cinco células no `.painel` do §5.2, com números maiores. Só duas carregam
   cor — âmbar em `marcados p/ revisão`, bordô em `recusados` —, e `sem mudança`
   fica em `--steel`: presente, sem peso visual. A alternativa com barras de
   proporção (`1d`) foi recusada no handoff. */
.painel-da-importacao{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  margin-bottom:16px}
.painel-da-importacao>div{padding:12px 14px}
.painel-da-importacao .k{font-size:10px;font-weight:600}
.painel-da-importacao .v.mono{font-size:20px;font-weight:600;margin-top:2px}
.painel-da-importacao .neutra .v{color:var(--steel)}
.painel-da-importacao .atencao{background:#FDF3E2}
.painel-da-importacao .atencao .k{color:#7A5510}
.painel-da-importacao .atencao .v{color:#8A5510}
.painel-da-importacao .recusa{background:#F3E7E6}
.painel-da-importacao .recusa .k,.painel-da-importacao .recusa .v{color:#8A3F37}

/* --- Amostras por grupo (`1e`, `1g`) ---------------------------------- */

/* Um contêiner só, com os grupos empilhados dentro; cada um é um `<details>`
   nativo, fechado por padrão e operável por teclado sem JavaScript (§8.2). */
.amostras{border:1px solid var(--line);border-radius:5px;overflow:hidden;
  margin-bottom:16px}
.amostras>.grupo+.grupo{border-top:1px solid var(--line)}
.amostras>.grupo>summary,.amostras>.grupo.resumo{display:flex;align-items:center;
  gap:10px;padding:10px 14px;background:#FAFAF8;cursor:pointer;font-size:12.5px}
.amostras>.grupo.resumo{cursor:default}
.amostras>.grupo>summary::-webkit-details-marker{display:none}
.amostras>.grupo>summary{list-style:none}
.amostras>.grupo>summary:focus-visible{outline:2px solid var(--amber);
  outline-offset:-2px}
/* O `▸`/`▾` é decorativo: o nome acessível do disclosure é o texto do summary. */
.amostras>.grupo>summary .marcador::before{content:"▸";color:var(--steel);
  font-size:12px}
.amostras>.grupo[open]>summary .marcador::before{content:"▾";color:var(--amber);
  font-weight:700}
.amostras>.grupo .nome{font-weight:600}
.amostras>.grupo .contagem{font-size:12px;color:var(--steel)}
.amostras>.grupo .nota{margin-left:auto;font-size:11px;color:var(--steel)}
.amostras>.grupo[open]>summary{background:#F6F7F5}
.amostras>.grupo>.corpo{padding:12px 14px;border-top:1px solid var(--line)}
/* Resumo sem disclosure: se não há o que ver, não se abre nada. */
.amostras>.grupo.resumo .marcador{color:#C9CEC8}
.amostras>.grupo.resumo .nome{font-weight:400;color:var(--steel)}
/* Os dois grupos com cor própria, no mesmo par de tons do painel. */
.amostras>.grupo.marcados>summary{background:#FDF3E2}
.amostras>.grupo.marcados>summary .nome{color:#7A5510}
.amostras>.grupo.marcados>summary .contagem,
.amostras>.grupo.marcados>summary .nota{color:#8A5510}
.amostras>.grupo.marcados>summary .marcador::before{color:#8A5510}
.amostras>.grupo.recusados>summary{background:#F3E7E6}
.amostras>.grupo.recusados>summary .nome,
.amostras>.grupo.recusados>summary .contagem,
.amostras>.grupo.recusados>summary .nota{color:#8A3F37}
.amostras>.grupo.recusados>summary .marcador::before{color:#8A3F37}

table.amostra-da-importacao{width:100%;border-collapse:collapse;font-size:12.5px;
  min-width:560px}
table.amostra-da-importacao th{text-align:left;font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--steel);
  font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line);
  white-space:nowrap}
table.amostra-da-importacao td{padding:7px 8px;border-bottom:1px solid #EFF0ED;
  vertical-align:top}
table.amostra-da-importacao tr:last-child td{border-bottom:0}
table.amostra-da-importacao th.col-codigo{width:110px}
table.amostra-da-importacao th.col-linha{width:70px}
table.amostra-da-importacao th.col-digitos{width:70px}
table.amostra-da-importacao th.col-documento{width:190px}
table.amostra-da-importacao th.col-nota{width:170px}
table.amostra-da-importacao th.col-muda{width:340px}
/* Mesmo tratamento do lote na listagem de OFs: o código é o identificador que
   se procura. */
table.amostra-da-importacao td.codigo{color:var(--amber);font-weight:600}
table.amostra-da-importacao td.digitos{color:#8A5510;font-weight:600}
.nota-do-grupo{font-size:11.5px;color:var(--steel);margin:10px 0 0}

/* `antes → depois` na própria célula, no padrão das revisões: o antigo em
   `--steel` tachado — nunca em vermelho, porque atualizar é operação normal. */
.o-que-muda .mudanca{display:block}
.o-que-muda .mudanca+.mudanca{margin-top:3px}
.o-que-muda .campo{font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--steel);margin-right:4px}
.o-que-muda .antes{color:var(--steel);text-decoration:line-through}
.o-que-muda .seta{color:var(--steel);margin:0 3px}
.o-que-muda .depois{color:var(--green)}

/* --- Resultado (`1i`) ------------------------------------------------- */

body.pagina-resultado-importacao main{max-width:680px}
.resultado-da-importacao{text-align:center}
.resultado-da-importacao .icone-do-resultado{width:44px;height:44px;
  border-radius:50%;background:var(--ink);color:#fff;font-size:21px;display:flex;
  align-items:center;justify-content:center;margin:20px auto 14px}
.resultado-da-importacao .sub{font-size:12.5px;color:var(--steel);
  margin:0 0 20px;overflow-wrap:anywhere}
.resultado-da-importacao .card{text-align:left}
.grade-do-resultado{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line)}
.grade-do-resultado>div{background:#fff;padding:12px 18px}
.grade-do-resultado .larga{grid-column:span 2}
.grade-do-resultado .k{font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--steel);font-weight:600}
.grade-do-resultado .v.mono{font-size:20px;font-weight:600;margin-top:2px}
.grade-do-resultado .neutra .v{color:var(--steel)}
.grade-do-resultado .atencao{background:#FDF3E2}
.grade-do-resultado .atencao .k{color:#7A5510}
.grade-do-resultado .atencao .v{color:#8A5510}
.grade-do-resultado .recusa{background:#F3E7E6}
.grade-do-resultado .recusa .k,.grade-do-resultado .recusa .v{color:#8A3F37}
.rodape-do-resultado{padding:10px 18px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--steel)}

/* --- Corte estreito --------------------------------------------------- */

@media(max-width:560px){
  /* Indicadores em duas colunas, com `Recusados` ocupando as duas — a ordem do
     handoff `1j`. **Nada é escondido para caber.** */
  body.pagina-importacao .painel-da-importacao{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  body.pagina-importacao .painel-da-importacao>div:last-child{grid-column:span 2}
  body.pagina-importacao .painel-da-importacao .v.mono{font-size:18px}
  body.pagina-importacao .faixa-de-lidos .n{font-size:20px}

  /* As amostras **confinam rolagem** dentro do próprio grupo: a coluna
     "O que muda" não sobrevive a ser espremida, e a alternativa seria esconder
     dado. O rodapé de cada grupo fica fora do contêiner que rola. */
  body.pagina-importacao .amostras>.grupo .nota{margin-left:0;flex:1 0 100%}
  body.pagina-importacao .amostras>.grupo>.corpo{padding:10px 12px}

  /* Ações empilham em largura total, primário por último — que é a ordem em que
     o template já as escreve. */
  body.pagina-importacao .rodape-da-previa{flex-direction:column;
    align-items:stretch}
  body.pagina-importacao .rodape-da-previa form{width:100%}
  body.pagina-importacao .rodape-da-previa .btn{width:100%;padding:12px 16px}
  body.pagina-importacao .arquivo-conferido{align-items:stretch}
  body.pagina-importacao .arquivo-conferido form,
  body.pagina-importacao .arquivo-conferido .btn{width:100%;padding:10px 14px}
  body.pagina-importacao .escolha-de-arquivo{padding:14px}
  body.pagina-importacao .actions{flex-direction:column;align-items:stretch}
  body.pagina-importacao .actions .btn{width:100%;padding:12px 16px}
  body.pagina-importacao .ultima-importacao>.body{gap:12px 20px}

  /* Resultado: os números empilham em uma coluna, sem perder nenhuma célula. */
  body.pagina-resultado-importacao .grade-do-resultado{grid-template-columns:1fr}
  body.pagina-resultado-importacao .grade-do-resultado .larga{grid-column:span 1}
}

/* ------------------------------------------------------------------ */
/* Casca modular e home global (D1-2, decisão 11.97)                  */
/* ------------------------------------------------------------------ */

/* Handoff `fiscal_pedidos/handoff/Navegacao Modular - Casca.dc.html`, estados
   1–7, e §5.1 do guia visual. A marca deixou de carregar `Produção`: a topbar
   passou a ser `CR HUB · [MÓDULO ▾]`, o seletor troca integralmente a navegação
   contextual e a marca leva à home global.

   Esta seção fica no fim da folha de propósito. Ela **sobrescreve** composições
   das seções anteriores (16F e 17C.4) em pontos escolhidos — o bloco de
   identidade no corte estreito e na composição de duas linhas —, e reescrever
   aquelas seções apagaria a explicação do que elas resolveram. O que precisou
   mudar lá dentro mudou lá, e está anotado no lugar. */

/* --- Marca e módulo: um bloco de identidade -------------------------- */
/* O `gap` de 10px é o do mockup, e é menor que os 24px do `header` de
   propósito: `CR HUB · FISCAL` se lê como uma coisa só, não como dois itens
   vizinhos da barra. */
.marca-e-modulo{display:flex;align-items:center;gap:10px;flex:none;min-width:0}
.ponto-do-modulo{color:#6B7580}

/* --- Módulo único: texto, não controle ------------------------------- */
/* Decisão 11.97: "seu nome continua visível sem precisar aparentar uma escolha
   que não existe". Sem fundo, sem seta, sem foco — é um rótulo. O `padding`
   vertical acompanha o do seletor para as duas apresentações ocuparem a mesma
   altura de linha. */
.modulo-atual{font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:11.5px;color:#fff;padding:6px 2px;white-space:nowrap}

/* --- Seletor de módulo ------------------------------------------------ */
/* Bloco escuro de identidade, colado à marca: lê-se como contexto, e não como
   mais um item de navegação — o mesmo tratamento que a casca já dá ao acionador
   do menu do usuário. Herda de `details.menu` o cursor, o `list-style:none`, o
   `▾` do `::after`, o foco âmbar e o fechamento por `Esc` e clique fora. */
details.seletor-de-modulo{flex:none}
details.seletor-de-modulo>summary{font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-size:11px;color:#fff;background:#2A2F34;
  border-radius:4px;padding:8px 10px;min-height:36px;white-space:nowrap}
/* A seta é âmbar, como no handoff: é o que distingue o bloco escuro do seletor
   do bloco escuro do item ativo da navegação, que não abre nada. */
details.seletor-de-modulo>summary::after{color:var(--amber)}
details.seletor-de-modulo[open]>summary{background:#3A4046}

/* --- Painel dos módulos ----------------------------------------------- */
/* Ancorado abaixo do nome do módulo. Largura maior que a do menu do usuário
   porque cada linha traz o nome **e** a entrada canônica para onde leva. */
details.seletor-de-modulo>.painel-de-modulos{min-width:236px;padding:4px}
.painel-de-modulos .titulo-do-painel{font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--steel);font-weight:600;padding:8px 10px 6px}
.painel-de-modulos a{padding:8px 10px;border-radius:4px}
.painel-de-modulos a .nome{display:block;font-size:13px;font-weight:600}
.painel-de-modulos a .apoio{display:block;font-size:11.5px;color:var(--steel)}
/* O módulo atual é marcado por barra âmbar **e** por `aria-current` no HTML: a
   cor nunca é a única portadora da informação (§2 do guia). */
.painel-de-modulos a.atual{background:#FDF8F0;
  box-shadow:inset 3px 0 0 0 var(--amber)}
.painel-de-modulos .rodape-do-painel{font-size:11px;color:var(--steel);
  padding:8px 10px 6px;border-top:1px solid var(--line);margin-top:4px}

/* --- Sufixo da gaveta ------------------------------------------------- */
/* Na gaveta o sufixo da marca é o módulo ativo, e some quando não há módulo. */
.marca-da-gaveta .sufixo{color:#9AA3AB}

/* --- Home global ------------------------------------------------------ */
/* Mínima por decisão: sem indicador, sem pendência e sem repetir a navegação
   dos módulos. Cada acesso é um cartão com nome, uma linha de apoio e o nome da
   entrada canônica para onde leva. `flex` com base de 300px: dois cartões lado
   a lado no desktop, empilhados quando não couberem. */
body.pagina-home-global main{max-width:820px}
.acessos-de-modulo{display:flex;gap:14px;flex-wrap:wrap}
a.acesso-de-modulo{flex:1 1 300px;background:var(--card);
  border:1px solid var(--line);border-radius:6px;padding:18px 20px;
  color:var(--ink);text-decoration:none}
a.acesso-de-modulo:hover{border-color:#C6CAC3;background:#FAFBF9}
a.acesso-de-modulo:focus-visible{outline:2px solid var(--amber);
  outline-offset:2px}
a.acesso-de-modulo .nome{display:block;font-size:15px;font-weight:600;
  margin-bottom:3px}
a.acesso-de-modulo .apoio{display:block;font-size:12.5px;color:var(--steel)}
a.acesso-de-modulo .destino{display:block;font-size:11px;color:var(--steel);
  margin-top:8px;font-family:var(--mono)}

/* --- Guard de saída --------------------------------------------------- */
/* Estado 6 do handoff. Só existe em formulário Fiscal de criação ou correção
   com alteração não revisada; consulta, revisão, detalhe, Produção e home
   global não recebem aviso nenhum. É um `<dialog>` nativo, escondido enquanto
   não for aberto, e sem JavaScript ele nunca aparece — a página continua
   navegável, apenas sem a proteção que só o navegador pode dar. */
/* `margin:auto` explícito: o `*{margin:0}` do topo da folha alcança o
   `<dialog>` e mata a centralização que o `showModal()` traz de fábrica — sem
   esta linha o modal encosta no canto superior esquerdo. Foi o que a inspeção
   em navegador do corretivo da RA-151 encontrou. */
dialog.guard-de-saida{border:1px solid var(--line);border-radius:6px;
  padding:0;max-width:440px;width:calc(100% - 32px);color:var(--ink);
  background:var(--card);margin:auto}
dialog.guard-de-saida::backdrop{background:rgba(22,25,28,.42)}
dialog.guard-de-saida .body{padding:18px 20px}
dialog.guard-de-saida h2{font-size:15px;font-weight:600;margin-bottom:10px}
dialog.guard-de-saida .actions{display:flex;gap:10px;flex-wrap:wrap;
  justify-content:flex-end;padding:0 20px 18px}
/* Nada de botão novo: `Continuar nesta tela` é o `.btn.pri` de sempre e
   `Descartar` é o `.btn.del`, o vermelho que a folha já reserva para a ação que
   perde algo. A ação primária é justamente **ficar**.

   O aviso é o `.alert.warn` âmbar exigido pelo handoff, e não um `.alert.stop`:
   nada quebrou, nada foi recusado — a pessoa está sendo avisada antes de
   decidir.

   --- Telas do Fiscal --------------------------------------------------- */
/* `.alert.info` só tinha definição dentro de `body.pagina-detalhe-of` e das
   demais telas que a declararam; o Fiscal precisa da mesma, com os mesmos
   valores. */
body.fiscal .alert.info{background:#EAF1F7;border:1px solid #C7D6E3;
  color:#2C5A80}

/* --- Corte estreito --------------------------------------------------- */
@media(max-width:819px){
  /* Marca, módulo e acesso à gaveta continuam visíveis (decisão 11.97). O
     acionador vai para a ponta direita sozinho, já que a faixa livre agora é do
     bloco de identidade. */
  header>details.gaveta{margin-left:auto}
  /* Alvo de toque de 36px no seletor estreito, como pede o handoff. */
  details.seletor-de-modulo>summary{min-height:36px;padding:8px}
  /* O painel deixa de ser um suspenso ancorado à esquerda do acionador: em
     390px ele sairia da tela. Fica preso às duas bordas da topbar, com a
     largura da viewport menos as margens. `position:static` no `<details>`
     devolve a âncora ao `header`, que precisa ser o `relative` mais próximo —
     é o mesmo recurso já usado pelo menu do usuário na faixa de 820–1219px. */
  header{position:relative}
  details.seletor-de-modulo{position:static}
  details.seletor-de-modulo>.painel-de-modulos{left:8px;right:8px;
    min-width:0;top:calc(100% + 4px)}
}

/* --- Corte móvel transversal ------------------------------------------ */
@media(max-width:560px){
  /* Um cartão por linha: dois de 300px não cabem, e meio cartão cortado seria
     pior do que a pilha. */
  a.acesso-de-modulo{flex:1 1 100%}
}

/* ------------------------------------------------------------------ */
/* Telas do Fiscal — integração do percurso do pedido (Pacote D1-10)   */
/* ------------------------------------------------------------------ */

/* Esta seção é o acabamento que o confronto do executável com o handoff
   (`referencias_visuais/fiscal_pedidos/handoff/`) mostrou faltar. Ela fica
   **depois** do `@media(max-width:560px)` transversal — que precisa continuar
   sendo o primeiro corte estreito do arquivo, porque é por ele que
   `test_responsividade_mobile.bloco_movel()` acha o que fiscaliza — e **antes**
   da seção da home, que é a última do arquivo por contrato:
   `test_home.secao_da_home()` lê do marcador dela até o fim e cobra que tudo
   ali esteja escopado a `body.pagina-home`. Seção nova entra aqui, não depois
   dela.

   Nenhum valor novo foi inventado: cores, raios, espaçamentos e famílias já
   estão homologados acima. O que existe aqui é composição, e cada regra
   corresponde a um defeito observado em navegador nas seis larguras. O que era
   componente do sistema preso a outro escopo — `.ofbar`, `menu-de-acoes-locais`,
   `secao-recolhivel`, `lote-link`, `.secundaria` — não foi recopiado: o escopo
   daquelas regras foi estendido no lugar em que elas moram. */

/* --- Escolhas em linha (tipo de faturamento, frete embutido, remover) - */
/* `input,select,textarea{width:100%}`, lá no topo da folha, alcança também
   `radio` e `checkbox`: a bolinha ia para o meio de uma caixa da largura da
   coluna e o rótulo caía na linha de baixo. A Produção resolve isso dentro de
   `.chk`; o Fiscal usa o `RadioSelect` cru do Django e a caixa `DELETE` dos
   formsets, que não têm contêiner com classe. */
body.fiscal input[type=radio],body.fiscal input[type=checkbox]{width:auto;flex:none}
/* O `RadioSelect` do Django rende `<div id=…><div><label><input>texto</label>`:
   o `<label>` é neto do campo. Alinhar aqui evita marcação nova só para vestir. */
body.fiscal .f>div>div>label{display:flex;align-items:center;gap:8px;
  padding:5px 0;font-size:13px;font-weight:400;color:var(--ink);cursor:pointer}

/* --- Linhas repetíveis dos formsets ----------------------------------- */
/* Sem moldura, quatro itens viravam um bloco contínuo e a remoção de um parecia
   pertencer ao produto seguinte. O corpo da linha fica **sem fundo próprio**
   (homologação de 02/09/2026): dentro dela, só a faixa da memória calculada é
   pintada, e é esse contraste que separa o que se digita do que o motor
   respondeu. */
body.fiscal .linha-de-item{border:1px solid var(--line);border-radius:5px;
  padding:12px 14px;margin-bottom:10px}

/* --- Resumo em pares: o ímpar final ocupa a linha inteira -------------- */
/* `.review-list` é uma grade de duas colunas com `gap:1px` sobre `--line`: com
   número ímpar de pares — o resumo financeiro do detalhe tem cinco — a célula
   que sobra aparecia como um retângulo cinza vazio no canto. */
body.fiscal .review-list>div:last-child:nth-child(odd){grid-column:1/-1}
/* Dois resumos seguidos no mesmo card (revisão da criação: identificação e, logo
   abaixo, lotes e pedidos do cliente) precisam do mesmo vão das linhas do
   `.grid`. Estava em `style=` no template. */
body.fiscal .review-list+.review-list{margin-top:14px}

/* --- Contagem no cabeçalho do card ------------------------------------ */
/* Handoff, rodada estética: "cabeçalhos de card com contagem à direita". Ela
   existia no HTML desde o D1-7 e não pintava nada — saía colada ao título, no
   mesmo tamanho do micro-rótulo. */
body.fiscal .card>h2{display:flex;align-items:center;gap:10px}
body.fiscal .card>h2 .contagem{margin-left:auto;font-family:var(--mono);
  font-size:12px;letter-spacing:0;background:#FCFCFB;border:1px solid var(--line);
  border-radius:3px;padding:1px 7px;color:var(--steel)}
body.fiscal .card.titulo-escuro>h2 .contagem{background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.3);color:#fff}

/* --- Números tabulares ------------------------------------------------ */
/* Handoff, rodada estética: colunas monetárias alinham dígito a dígito nas
   listas, itens e resumos. Vale onde o valor já é mono, que é onde o pedido
   põe dinheiro, quantidade e alíquota. */
body.fiscal .mono{font-variant-numeric:tabular-nums}

/* --- Tabelas largas: rolar, nunca espremer ---------------------------- */
/* `.tabela-rolavel` confina a rolagem, mas sem largura mínima a tabela encolhe
   até caber: em 390px a razão social quebrava em cinco linhas e a coluna de
   ações ficava na borda. É a mesma régua de `table.listagem`, com a largura que
   cada tabela precisa para manter uma linha por registro. */
/* O seletor acompanha o do pacote móvel transversal
   (`.card .body>.tabela-rolavel>table{min-width:560px}`), que é mais específico
   que `table.pedidos` e venceria abaixo de 560px — justamente a largura em que
   espremer dói. Mesma forma, mais uma classe: a largura mínima do Fiscal vale
   nas seis larguras. */
body.fiscal .card .body>.tabela-rolavel>table.pedidos{min-width:920px}
body.fiscal .card .body>.tabela-rolavel>table.itens-do-pedido{min-width:940px}

/* --- Menu de ações por linha: sobreposto, nunca empurrando ------------- */
/* A folga que existia aqui — um preenchimento no rodapé da tabela enquanto
   houvesse menu aberto — resolvia o recorte pelo
   caminho errado, e a homologação de 06/09/2026 acusou o efeito: abrir um menu
   **crescia a tabela** e empurrava tudo abaixo dela. A causa do recorte era
   outra — `.tabela-rolavel` tem `overflow-x:auto`, que recorta também o eixo
   vertical (§5.8) —, e a Produção já a resolvia há tempos promovendo o painel a
   `fixed` por JavaScript (`busca_of_equipamento.js`, `posicionarMenu`), porque
   `fixed` sai de todo contexto de `overflow`: o bloco contêiner passa a ser o
   viewport.

   `fiscal/acoes_locais.js` aplica exatamente essa estratégia ao `<details>` que
   o Fiscal usa — e continua sendo `<details>` porque é ele que dá teclado, foco
   e abertura sem JavaScript, coisas que a versão da Produção não tem. O painel
   segue `absolute` no repouso (é o `.suspenso` de sempre); ao abrir, o script
   troca para `fixed` e o posiciona pelo espaço real do viewport.

   Sem JavaScript o painel continua abrindo, sobreposto, sem empurrar linha
   nenhuma — e pode ser recortado nas últimas linhas de uma tabela rolável. É
   degradação, nunca perda de percurso: as mesmas ações estão no detalhe,
   alcançável pelo número na primeira coluna. */
body.fiscal details.menu-de-acoes-locais>.suspenso{max-height:none}
/* Enquanto um menu está aberto, a célula não pode ser o contexto de
   empilhamento que prenderia o painel atrás das linhas seguintes no fallback
   sem script. */
body.fiscal td.acoes{position:relative}

/* --- Histórico do pedido ---------------------------------------------- */
/* Separação entre registros, que estava em `style=` no template. */
body.fiscal .registro-do-historico+.registro-do-historico{margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}

/* --- Faixas da identificação do detalhe ------------------------------- */
/* Handoff: "cinco faixas nomeadas, separadas por hairlines, com Relações em
   fundo `#FAFAF8`". A primeira faixa não repete a margem superior, que o
   cabeçalho do card já dá. */
body.fiscal .faixa-da-identificacao:first-of-type{margin-top:0}
body.fiscal .detail-grid.relacoes>div{background:#FAFAF8}

/* --- Texto só para leitores de tela ------------------------------------ */
/* A técnica já era usada no rótulo do lote (`@media(min-width:561px)`); aqui
   ela vira classe porque o `×` da remoção precisa de um nome acessível e o
   glifo não é nome nenhum. Não é `display:none`: isso a tiraria também de quem
   lê por áudio. */
body.fiscal .somente-para-leitores{position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  border:0}

/* --- Busca com acionador em seta -------------------------------------- */
/* Handoff, tela `Criar`: cliente, condição, transportadora e produto trazem um
   `▾` colado ao campo, e ele é um **botão** — `width:30px`, borda da folha,
   fundo branco, cantos direitos arredondados. A primeira rodada da RA-158 o fez
   decorativo, para não prometer uma lista sem termo; a segunda homologação
   decidiu o contrário, e o endpoint passou a responder a seleção inicial. Os
   valores abaixo são os do handoff. */
body.fiscal .campo-de-busca{display:flex;align-items:stretch}
body.fiscal .campo-de-busca .pesquisa{flex:1;min-width:0;
  border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}
body.fiscal .seta-da-busca{flex:none;display:flex;align-items:center;
  justify-content:center;width:30px;border:1px solid var(--line);
  border-radius:0 4px 4px 0;background:#fff;color:var(--steel);font-size:11px;
  line-height:1;cursor:pointer;padding:0}
body.fiscal .seta-da-busca:hover{background:#F6F7F5;color:var(--ink)}
body.fiscal .seta-da-busca:focus-visible{outline:2px solid var(--amber);
  outline-offset:-2px;position:relative;z-index:1}
/* O foco continua sendo do campo, e o contorno âmbar precisa passar por cima da
   seta vizinha — sem isto o `outline:-1px` some sob a borda dela. */
body.fiscal .campo-de-busca .pesquisa:focus{position:relative;z-index:1}
/* Resposta legítima e vazia (revisão de 02/09/2026). Antes o painel ficava
   `:empty` e sumia, e a seta parecia inerte: quem clicava não sabia se a busca
   tinha falhado, se o catálogo estava vazio ou se o botão não fazia nada. A
   frase é do servidor, nomeia a espécie e **não é opção**: não tem `role`,
   `Enter` e as setas a ignoram, e nenhum clique a escolhe.

   Nome próprio, e não a `.sem-resultados` do §5.2: aquela é o vazio de uma
   **tela de consulta** — caixa tracejada, centralizada, com ação de saída —, e
   reusá-la dentro de uma lista suspensa de 280px traria a moldura inteira para
   dentro do painel. */
body.fiscal .busca .resultados .busca-sem-resultados{padding:10px 12px;
  font-size:12.5px;color:var(--steel);font-style:italic;background:#fff}

/* --- Controle segmentado ---------------------------------------------- */
/* Faturamento `100%`/`50%` e frete `Com`/`Sem` (decisões 13.6 e 13.12, precisão
   visual de 02/09/2026). Os `<input type=radio>` continuam sendo o controle:
   ficam sob o rótulo, focáveis e navegáveis por setas, e o que muda é a
   moldura. `:has()` pinta o segmento escolhido; onde ele não existir, o radio
   volta a aparecer — degradação, não perda de controle. */
body.fiscal .segmentado{display:inline-flex;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;background:#fff;width:fit-content;
  max-width:100%;flex-wrap:wrap}
body.fiscal .segmento{display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;min-height:36px;font-size:13px;font-weight:600;
  color:var(--steel);cursor:pointer;white-space:nowrap}
body.fiscal .segmento+.segmento{border-left:1px solid var(--line)}
body.fiscal .segmento:hover{background:#F6F7F5}
body.fiscal .segmento .rotulo-do-segmento{font-weight:600}
body.fiscal .segmentado:has(input:checked) .segmento:has(input:checked){
  background:var(--ink);color:#fff}
body.fiscal .segmento:has(input:focus-visible){outline:2px solid var(--amber);
  outline-offset:-2px}
/* O radio some da vista **em todos os estados**, nunca do documento: continua
   focável, anunciado e submetido, e o segmento é o que se vê (decisão 13.12,
   precisão de 02/09/2026). Antes a regra dependia de `:has(input:checked)`, e
   por isso o círculo aparecia justamente no estado inicial — o primeiro que se
   vê ao abrir a tela.

   O `@supports` é o **fallback real** (revisão de 02/09/2026). Quem pinta o
   segmento escolhido e o segmento focado é `:has()`; esconder o radio onde
   `:has()` não existe deixaria a pessoa sem nenhuma indicação de qual opção
   está marcada nem de onde está o foco — operável e cego. A consulta é de
   **capacidade**, não de estado: onde `:has()` funciona, o desenho é o
   homologado, sem círculos; onde não funciona, o controle nativo volta inteiro,
   dentro da mesma moldura. */
@supports selector(:has(*)){
  body.fiscal .segmentado input[type=radio]{position:absolute;width:1px;
    height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
}

/* --- Condições globais ------------------------------------------------- */
/* Elas não têm card próprio: moram ao fim de `Identificação`, depois de
   condição de pagamento e transportadora e antes dos lotes (decisão 13.3,
   terceira precisão visual de 02/09/2026). O `border-top` é o divisor neutro
   que separa os dois assuntos dentro do mesmo card — a mesma linha do resto da
   folha, e não uma régua nova. */
body.fiscal .condicoes-globais{display:flex;gap:24px;flex-wrap:wrap;
  align-items:flex-start;border-top:1px solid var(--line);
  padding-top:14px;margin-top:14px}

/* --- Multisseleção em tags -------------------------------------------- */
/* Handoff: lotes de OF e pedidos do cliente vivem numa caixa só, cada seleção
   como tag removível e o campo de entrada ao fim. Por trás continua sendo o
   formset, e cada tag é uma linha dele. */
body.fiscal .caixa-de-tags{display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;border:1px solid var(--line);border-radius:4px;
  padding:6px 8px;background:#fff;min-height:38px}
body.fiscal .caixa-de-tags .selecao-em-tag{display:contents}
body.fiscal .tag-removivel{display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;background:var(--paper);border:1px solid var(--line);
  border-radius:4px;padding:4px 4px 4px 9px;font-size:12.5px}
body.fiscal .entrada-da-tag{flex:1 1 200px;min-width:160px}
/* Dentro da caixa, o campo perde a moldura: quem tem borda é a caixa. */
body.fiscal .entrada-da-tag .busca .pesquisa,
body.fiscal .entrada-da-tag .codigo-do-cliente{border:0;padding:5px 2px;
  background:transparent}
body.fiscal .entrada-da-tag .codigo-do-cliente{font-family:var(--mono)}
body.fiscal .entrada-da-tag .seta-da-busca{border:0;background:transparent}
body.fiscal .entrada-da-tag .busca .pesquisa:focus{outline-offset:0}
body.fiscal .campo-de-tags{gap:5px}

/* --- `×` de remoção ---------------------------------------------------- */
/* O `×` é o `<label>` do checkbox `DELETE`; o checkbox some da vista e continua
   focável e submetido. Marcado, a linha fica atenuada e o aviso aparece —
   remover no envio não é sumir da tela, e quem marcou por engano precisa poder
   desfazer. */
body.fiscal .marca-de-remocao{display:inline-flex;align-items:center;gap:6px}
body.fiscal .marca-de-remocao input[type=checkbox]{position:absolute;width:1px;
  height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
/* Dois tamanhos, os dois do handoff: dentro da tag o `×` é um glifo de 20px sem
   moldura, e na linha de item é o **botão quadrado de 34px** com a borda da
   folha e fundo branco, alinhado à altura dos campos ao lado. A segunda
   homologação pediu essa moldura: sem ela o `×` da linha não se lia como alvo,
   e era o único comando da linha sem contorno. */
body.fiscal .x-de-remocao{display:inline-flex;align-items:center;
  justify-content:center;width:20px;height:20px;border-radius:3px;
  color:var(--steel);cursor:pointer;font-size:15px;line-height:1;margin:0}
body.fiscal .linha-de-item .x-de-remocao{width:34px;height:34px;
  border:1px solid var(--line);border-radius:4px;background:#fff;font-size:16px}
body.fiscal .x-de-remocao:hover{background:#F3F4F1;color:var(--ink)}
body.fiscal .marca-de-remocao:has(input:focus-visible) .x-de-remocao{
  outline:2px solid var(--amber);outline-offset:1px}
body.fiscal .aviso-de-remocao{display:none;font-size:11px;color:var(--red)}
body.fiscal .marca-de-remocao:has(input:checked) .x-de-remocao{color:var(--red)}
body.fiscal .marca-de-remocao:has(input:checked) .aviso-de-remocao{display:inline}
/* A linha marcada fica atenuada inteira, menos a própria marca — é por ela que
   se desfaz. */
body.fiscal .linha-de-item:has(.marca-de-remocao input:checked)>*{opacity:.55}
body.fiscal .linha-de-item:has(.marca-de-remocao input:checked) .marca-de-remocao{
  opacity:1}
body.fiscal .tag-removivel:has(input:checked){opacity:.55;
  text-decoration:line-through}
body.fiscal .tag-removivel:has(input:checked) .marca-de-remocao{opacity:1;
  text-decoration:none}

/* --- Linha de item ----------------------------------------------------- */
/* A grade do handoff: produto largo, quantidade e preço estreitos, IPI com o
   sufixo `%` e o `×` fechando a linha. */
body.fiscal .campos-da-linha{display:flex;gap:10px;flex-wrap:wrap;
  align-items:flex-start}
body.fiscal .campos-da-linha .campo-produto{flex:3 1 260px;min-width:0}
body.fiscal .campos-da-linha .campo-quantidade{flex:1 1 100px}
body.fiscal .campos-da-linha .campo-preco{flex:1 1 150px}
body.fiscal .campos-da-linha .campo-ipi{flex:1 1 130px}
body.fiscal .campos-da-linha .campo-remover{flex:0 0 auto}
/* O rótulo vazio alinha o `×` à base dos campos, como no handoff, sem inventar
   um texto que os leitores de tela teriam de ouvir. */
body.fiscal .rotulo-vazio{display:block;height:17px}
body.fiscal .ipi-com-sufixo{display:flex;align-items:center;gap:6px}
body.fiscal .ipi-com-sufixo input{min-width:0}
body.fiscal .sufixo-do-campo{font-family:var(--mono);color:var(--steel)}

/* --- Memória da linha -------------------------------------------------- */
/* O que o motor do D1-4 produziu para aquela linha. Fica na linha porque é ali
   que a pessoa confere de que preço e de que alíquota o unitário saiu. */
body.fiscal .memoria-da-linha{display:flex;flex-wrap:wrap;gap:8px 22px;
  margin-top:10px;padding:8px 10px;background:#FAFAF8;
  border:1px solid var(--line);border-radius:5px}
body.fiscal .memoria-da-linha .k{display:block;font-size:10px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--steel)}
body.fiscal .memoria-da-linha .v{display:block;font-size:13px;font-weight:600}

/* --- Ação no cabeçalho do card ---------------------------------------- */
/* `+ Adicionar item` à direita do título (aprovado por Augusto na homologação
   do D1-10). A ação existe **uma vez**: a do rodapé da lista saiu. */
body.fiscal .card>h2 .acao-do-cabecalho{margin-left:auto;display:inline-flex;
  align-items:center;gap:8px}
body.fiscal .card>h2 .acao-do-cabecalho .btn{text-transform:none;
  letter-spacing:normal}
/* O retorno da ação de copiar (`Copiado`, `Não foi possível copiar`). Ele vive
   no cabeçalho, ao lado do botão, e por isso precisa desfazer a caixa alta e o
   espaçamento do título: é frase, não rótulo de seção. Vazio não ocupa nada — o
   `role="status"` anuncia quando o texto aparece, e some com ele. */
body.fiscal .card>h2 .retorno-da-copia{text-transform:none;letter-spacing:normal;
  font-weight:500;font-size:11.5px;color:var(--steel)}

/* --- Resumo financeiro ------------------------------------------------- */
/* O acento âmbar do handoff, à esquerda do cabeçalho escuro. Fica escopado ao
   Fiscal: `.card.titulo-escuro` é componente do sistema (§5.2) e a Produção o
   usa sem acento em telas já homologadas. */
body.fiscal .card.titulo-escuro>h2{box-shadow:inset 3px 0 0 var(--amber)}
/* Os cartões vêm **depois** da decomposição (homologação de 02/09/2026): as
   parcelas somam até o número que a NF leva, e é essa a ordem de leitura. */
body.fiscal .destaques-do-resumo{display:flex;gap:14px;flex-wrap:wrap;
  margin-top:14px}
body.fiscal .destaques-do-resumo .destaque{flex:1 1 220px;
  border:1px solid var(--line);border-radius:5px;padding:12px 14px;
  background:#FAFAF8}
/* A parcela faturada é o número que muda com a escolha de 100%/50%, e o
   handoff a destaca do valor comercial. */
body.fiscal .destaques-do-resumo .destaque.parcela{background:#FDF8F0;
  border-color:#EBD5A8}
body.fiscal .destaques-do-resumo .destaque .k{font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--steel)}
body.fiscal .destaques-do-resumo .destaque .v{font-size:20px;font-weight:600;
  margin-top:3px}
/* `Total da NF` é o número que vai para a nota, e fecha o card com o mesmo par
   do cabeçalho escuro — fundo `--ink` e o acento âmbar à esquerda. O rótulo e o
   `R$` clareiam para manter o contraste sobre o escuro; quem se lê é o número. */
body.fiscal .destaques-do-resumo .destaque.total-da-nf{background:var(--ink);
  border-color:var(--ink);color:#fff;box-shadow:inset 3px 0 0 var(--amber)}
body.fiscal .destaques-do-resumo .destaque.total-da-nf .k{color:#C3C9D0}
body.fiscal .destaques-do-resumo .destaque.total-da-nf .cifrao{color:#98A2AC}
body.fiscal .destaques-do-resumo .apoio-do-destaque{font-size:11px;
  color:#98A2AC;margin-top:4px}
body.fiscal .linhas-do-resumo{display:flex;flex-direction:column;gap:8px;
  font-size:13px}
body.fiscal .linhas-do-resumo>div{display:flex;justify-content:space-between;
  gap:10px}
body.fiscal .linhas-do-resumo .k{color:var(--steel)}

/* --- O `R$` do rótulo -------------------------------------------------- */
/* `formatar_moeda()` devolve o número sem símbolo desde o D1-6, porque o `R$` é
   do rótulo da tela e não do valor. Ele fica num elemento próprio, fora do
   `[data-total]` que o JavaScript reescreve, e um pouco mais discreto que o
   número — que é o que se lê. */
body.fiscal .cifrao{color:var(--steel);font-weight:500}
body.fiscal .destaques-do-resumo .destaque .cifrao{font-size:14px}

/* --- Campo calculado --------------------------------------------------- */
/* `Frete total embutido` é leitura: sai do motor, não da digitação. O `readonly`
   já o tira do envio de valor útil — ele nem tem `name` —, e o cinza diz que
   não é campo de entrada. */
body.fiscal input[readonly][data-total-campo]{background:#F6F7F5;
  color:var(--steel)}

/* --- Cabeçalhos de seção das telas do pedido --------------------------- */
/* Homologação de 02/09/2026: em `Criar`, `Revisar`, `Detalhe` e `Corrigir` o
   cabeçalho de seção ganha o fundo neutro `#F8F7F7`. É separação, não destaque
   — o âmbar continua reservado ao que precisa ser notado, e é por isso que o
   `.card.titulo-escuro` do resumo fica de fora por escrito: ele tem fundo,
   texto e acento próprios (§5.2).

   O escopo é a página, e não `body.fiscal`: a consulta e as telas de
   confirmação não entraram nesta rodada, e pintá-las junto seria homologar por
   tabela o que ninguém abriu. */
body.pagina-criar-pedido .card:not(.titulo-escuro)>h2,
body.pagina-revisar-pedido .card:not(.titulo-escuro)>h2,
body.pagina-detalhe-pedido .card:not(.titulo-escuro)>h2,
body.pagina-corrigir-pedido .card:not(.titulo-escuro)>h2{background:#F8F7F7}

/* --- Ação irreversível no menu de ações -------------------------------- */
/* §5.9, decisão 11.52: no menu por linha, a ação irreversível é bordô e vem
   sempre por último. `Cancelar` já era a última; a cor vinha de uma regra presa
   ao detalhe da OF. É só a cor — a confirmação e o aviso continuam na tela
   seguinte, não no rótulo. */
body.fiscal .menu-de-acoes-locais>.suspenso a.perigosa,
body.fiscal .menu-de-acoes-locais>.suspenso a.perigosa:visited{color:var(--red)}

/* --- Escondido continua escondido ------------------------------------- */
/* Fica no **fim** da seção, e a posição é o que a faz valer: `[hidden]` do
   navegador perde para qualquer regra de autor que declare `display`, e a
   genérica daqui empata em especificidade com as dos componentes acima —
   quem vem depois ganha.

   Mesma causa já registrada em `.filtros .linha[hidden]` e `.resumo-etapa`.
   Sem ela o aviso de recusa da prévia aparecia **vazio**, o "os totais
   aparecem quando…" ficava na tela junto dos totais já calculados (D1-10) e
   as tags ainda vazias mostravam um `×` sozinho ao lado do campo de busca
   (RA-158). É genérica, e não por componente, porque cada componente novo
   que alterne por `hidden` cairia na mesma armadilha. */
body.fiscal [hidden]{display:none}
/* A tag da multisseleção precisa da sua própria: `.selecao-em-tag` é
   `display:contents` sob três classes, e vence a genérica acima por
   especificidade — sem esta regra, o `×` da quinta rodada marcaria o `DELETE`
   e a tag continuaria na tela, que é exatamente o defeito que ele foi corrigir.
   */
body.fiscal .caixa-de-tags .selecao-em-tag[hidden]{display:none}


/* --- Corte estreito ---------------------------------------------------- */
@media(max-width:560px){
  /* O cabeçalho local do pedido segue a composição que o pacote móvel deu ao
     detalhe da OF: as ações passam a ocupar a linha inteira abaixo do título
     em vez de disputá-la com ele. Mesmos valores, mesma razão — o que muda é a
     tela que os recebe. */
  body.fiscal .ofbar{gap:6px 10px;padding:8px 10px;margin-bottom:12px}
  body.fiscal .ofbar h1.titulo{font-size:15px}
  body.fiscal .ofbar .acoes-da-of{margin-left:0;flex:1 0 100%;
    gap:6px;justify-content:flex-end}
  body.fiscal .ofbar .btn{padding:7px 11px;font-size:13px}
  body.fiscal .menu-de-acoes-locais>summary.dots{width:32px;height:32px}
  body.fiscal .menu-de-acoes-locais>.suspenso{min-width:0;
    max-width:calc(100vw - 40px)}
  /* O histórico do pedido encolhe o respiro como o histórico da OF. */
  body.fiscal .secao-recolhivel>summary{padding:10px 12px}
  body.fiscal .secao-recolhivel>.body{padding:10px}
  /* Uma linha por escolha, e o rótulo inteiro é o alvo: 36px de altura, o
     mínimo que o handoff da casca pede para toque. */
  body.fiscal .f>div>div>label{padding:9px 0}
}

/* ------------------------------------------------------------------ */
/* Home — ponto de partida operacional (Marco 16, Pacote 16E)          */
/* ------------------------------------------------------------------ */

/* Como as seções do 16A a 16D, esta fica **depois** da responsividade móvel
   transversal: aquele bloco precisa continuar sendo o **primeiro**
   `@media(max-width:560px)` da folha, porque é por ele que
   `test_responsividade_mobile.bloco_movel()` acha o que fiscaliza. O que é só
   desta tela mora aqui, escopado por `body.pagina-home`, e não alcança
   nenhuma outra.

   Nenhum valor novo: as cores, as famílias de estado (`.t-nova`, `.t-parc`),
   o cabeçalho escuro de card (§5.2), os raios e os espaçamentos já estão
   homologados nesta folha. O que existe aqui é composição. */

/* `.alert.info` só tinha definição dentro de `body.pagina-detalhe-of`, de
   `body.administracao`, de `body.pagina-desenho-tecnico` e de
   `body.pagina-importacao`; fora de lá a classe existe no HTML e não pinta
   nada. O primeiro dia da virada precisa do tom informativo — não houve erro
   nem bloqueio —, e ele é declarado aqui com o mesmo escopo restrito, pelo
   motivo já registrado nos pacotes anteriores: promover a regra a global
   mexeria em telas já homologadas. */
body.pagina-home .alert.info{background:#EAF1F7;border:1px solid #C7D6E3;
  color:#2C5A80}

/* A saudação usa a `.sub` de sempre; só o nome do perfil ganha peso. */
body.pagina-home .saudacao b{color:var(--ink);font-weight:600}

/* --- Card 1 — `Começar por` ------------------------------------------ */

/* Acréscimo à linguagem aprovado no handoff: estes cartões são maiores que
   qualquer `.btn` e têm linha de apoio. Ficam **escopados à home** — não
   generalizar para outras telas sem decisão própria. */
body.pagina-home .atalhos{display:flex;gap:12px;flex-wrap:wrap}
body.pagina-home a.atalho,body.pagina-home a.atalho:visited{
  display:block;padding:14px 18px;min-width:210px;border-radius:5px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  text-decoration:none}
body.pagina-home a.atalho:hover{background:#F6F7F5}
body.pagina-home a.atalho:focus-visible{outline:2px solid var(--amber);
  outline-offset:2px}
body.pagina-home a.atalho .rotulo{display:block;font-size:14.5px;font-weight:600}
body.pagina-home a.atalho .apoio{display:block;font-size:11.5px;margin-top:2px;
  color:var(--steel)}
/* Exatamente um atalho é o escuro, e ele marca o primeiro passo sugerido do
   perfil — por isso muda de posição, e não é sempre o primeiro da linha. */
body.pagina-home a.atalho.escuro,body.pagina-home a.atalho.escuro:visited{
  background:var(--ink);border-color:var(--ink);color:#fff}
body.pagina-home a.atalho.escuro:hover{background:#2A2F34}
body.pagina-home a.atalho.escuro .apoio{color:#9AA3AB}
/* O rótulo mais longo pede mais respiro que os demais (handoff, `3b`). */
body.pagina-home a.atalho.escuro{min-width:230px}

/* --- Card 2 — `Em aberto` -------------------------------------------- */

body.pagina-home table.contagens-em-aberto{width:100%;border-collapse:collapse;
  font-size:13px}
body.pagina-home table.contagens-em-aberto th.estado{font-size:10px;
  letter-spacing:.1em;padding:8px 18px;width:200px}
body.pagina-home table.contagens-em-aberto th.especie{border-bottom:1px solid var(--line)}
body.pagina-home table.contagens-em-aberto tbody th.especie{
  text-align:left;font-size:13px;text-transform:none;letter-spacing:normal;
  color:var(--ink);font-weight:600;padding:12px 18px;
  border-bottom:1px solid #EFF0ED}
body.pagina-home table.contagens-em-aberto td{padding:12px 18px}
body.pagina-home table.contagens-em-aberto tbody tr:last-child th.especie,
body.pagina-home table.contagens-em-aberto tbody tr:last-child td{border-bottom:0}
/* A célula inteira é a afordância de clique; o número fica em `--ink`, não em
   âmbar — testado em âmbar e recusado por Augusto, porque com as badges
   coloridas ao lado a linha ficava carregada demais (handoff). */
body.pagina-home .contagem{display:inline-flex;align-items:baseline;gap:8px;
  text-decoration:none;color:var(--ink)}
body.pagina-home a.contagem:visited{color:var(--ink)}
body.pagina-home a.contagem:hover .numero{color:#2A2F34}
body.pagina-home a.contagem:focus-visible{outline:2px solid var(--amber);
  outline-offset:2px;border-radius:3px}
body.pagina-home .contagem .numero{font-family:var(--mono);font-size:22px;
  font-weight:600;color:var(--ink)}
/* Primeiro dia: sem OF nenhuma não há destino útil, e o número fica quieto —
   sem link e sem a tinta forte de um dado acionável. */
body.pagina-home .contagem.sem-destino .numero{color:var(--steel)}

/* --- Card 3 — `Entregas atrasadas` ----------------------------------- */

/* O cabeçalho escuro é o `.card.titulo-escuro` do §5.2, em **todos** os
   estados: ele é âncora da página, não alarme. O que muda é o selo colado ao
   título. */
body.pagina-home .entregas-atrasadas>h2{display:flex;align-items:center;gap:10px}
body.pagina-home .selo-de-atraso{font-family:var(--mono);font-size:11px;
  font-weight:700;letter-spacing:0;padding:2px 8px;border-radius:3px;
  background:var(--red);color:#fff}
/* Vermelho com zero é falso alarme (decisão de Augusto no handoff): o estado
   sem atraso traz a **palavra**, no verde discreto de `.t-fech`, e não um `0`
   em mono que ainda pediria leitura de número onde não há o que agir. */
body.pagina-home .selo-em-dia{font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;padding:2px 8px;
  border-radius:3px;background:#E4F0E9;color:#235F3C}
body.pagina-home .atrasos{display:grid;grid-template-columns:1fr 1fr}
body.pagina-home .atrasos>a,body.pagina-home .atrasos>a:visited{
  display:flex;align-items:baseline;gap:14px;padding:16px 18px;
  text-decoration:none;color:inherit}
body.pagina-home .atrasos>a:first-child{border-right:1px solid var(--line)}
body.pagina-home .atrasos>a:hover{background:#FAFAF8}
body.pagina-home .atrasos>a:focus-visible{outline:2px solid var(--amber);
  outline-offset:-2px}
/* O vermelho fica só no número: a versão com o bloco inteiro em `#FBEBEA` foi
   recusada por agressiva. */
body.pagina-home .atrasos .numero{font-family:var(--mono);font-size:34px;
  font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--red)}
body.pagina-home .atrasos .rotulo{display:block;font-size:13px;font-weight:600}
body.pagina-home .atrasos .apoio{display:block;font-size:11.5px;color:var(--steel)}
/* O bloco não some e não comemora: encolhe porque não há nada para agir. */
body.pagina-home .sem-atraso{padding:16px 18px;font-size:13px;color:var(--steel)}

/* --- Corte estreito --------------------------------------------------- */

@media(max-width:560px){
  body.pagina-home h1{font-size:19px}

  /* A única coisa que sai no estreito é o complemento em prosa da linha do
     perfil — "— ele define o que você pode registrar" —, na versão curta que o
     próprio handoff define. Não é dado, contagem, ação nem coluna: o perfil,
     que é a informação, continua à vista, e nenhum dos três cards perde nada.
     É o mesmo tipo de troca já aceito no pacote móvel transversal, onde o que
     sai é decorativo e está nomeado. */
  body.pagina-home .complemento-do-perfil{display:none}

  /* `Começar por`: atalhos em largura total, um por linha — alvo de toque
     maior. O escuro continua sendo o primeiro passo do perfil. */
  body.pagina-home .atalhos{flex-direction:column;gap:10px}
  body.pagina-home a.atalho,body.pagina-home a.atalho.escuro{min-width:0;
    padding:13px 16px}

  /* `Em aberto` vira pares empilhados por espécie: micro-rótulo da espécie e,
     abaixo, os dois estados lado a lado, cada um com o número sobre a badge.
     Empilhar preserva o sentido melhor que rolar, e **nada é escondido para
     caber**: o cabeçalho de coluna sai porque cada célula já carrega a sua
     própria badge com o mesmo texto (`Aberta` / `Em produção`) — é o mesmo
     recurso do `thead` da tabela de componentes no pacote móvel, onde o rótulo
     volta junto do dado em vez de sumir. */
  body.pagina-home table.contagens-em-aberto,
  body.pagina-home table.contagens-em-aberto tbody{display:block}
  body.pagina-home table.contagens-em-aberto thead{display:none}
  body.pagina-home table.contagens-em-aberto tr{display:flex;flex-wrap:wrap;
    gap:10px;padding:12px 14px}
  body.pagina-home table.contagens-em-aberto tbody tr+tr{
    border-top:1px solid #EFF0ED}
  body.pagina-home table.contagens-em-aberto tbody th.especie{flex:1 0 100%;
    padding:0;border-bottom:0;font-size:10px;text-transform:uppercase;
    letter-spacing:.1em;color:var(--steel);font-weight:600}
  body.pagina-home table.contagens-em-aberto td{flex:1;min-width:0;padding:0}
  body.pagina-home table.contagens-em-aberto .contagem{display:block;
    border:1px solid var(--line);border-radius:5px;padding:10px 12px}
  body.pagina-home table.contagens-em-aberto a.contagem:hover{background:#F6F7F5}
  body.pagina-home table.contagens-em-aberto .contagem .numero{display:block;
    font-size:20px}
  body.pagina-home table.contagens-em-aberto .contagem .tag{padding:2px 7px}

  /* `Entregas atrasadas`: uma coluna, com a divisória entre os dois números. */
  body.pagina-home .atrasos{grid-template-columns:1fr}
  body.pagina-home .atrasos>a{padding:12px 14px;gap:12px}
  body.pagina-home .atrasos>a:first-child{border-right:0;
    border-bottom:1px solid var(--line)}
  body.pagina-home .atrasos .numero{font-size:30px}
  body.pagina-home .atrasos .rotulo{font-size:12.5px}
  body.pagina-home .atrasos .apoio{font-size:11px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Importação de NF de venda — telas 2a, 2b e 3 do handoff D2 (Pacote D2-6)

   RA-170 (terceiro corretivo) trouxe as regras que **não existiam**: o D2-6
   escrevera o markup das três telas com 64 classes sem uma linha de CSS. O
   quarto corretivo (RA-174 a RA-177) refaz a parte que ainda não reproduzia a
   composição aprovada, depois da segunda homologação de Augusto:

   · o pop-up do descarte e o detalhe da NF eram `position:absolute` dentro de
     um `.tabela-rolavel` — recortavam e abriam estreitos. Agora os dois vivem
     no fluxo: o detalhe é a `<tr>` seguinte, em `colspan`, e a confirmação do
     descarte abre dentro do bloco da importação;
   · os candidatos eram cartões em grade, que esticam todos à altura do maior.
     Agora são linhas compactas, cada uma com a sua altura;
   · a revisão foi reconstruída na composição da tela 3 do mockup;
   · os cabeçalhos da revisão são **cinza-claro** (RA-177, decisão de Augusto
     em 06/09/2026), e a hierarquia vem do acento âmbar dos blocos-âncora, não
     de barras pretas.

   Nada aqui é um segundo sistema: tokens (`--ink`, `--steel`, `--line`,
   `--amber`, `--red`, `--green`), `.card`/`.body`, a família `.tag`/`.t-*` e o
   acento `inset 3px 0 0 var(--amber)` são todos os que a folha já tinha.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Esconder sem tirar do fluxo de acessibilidade: o `<input type="file">` é a
   porta real do upload (o `<label class="btn">` só o aciona), então ele não
   pode sumir com `display:none` — teclado e leitor de tela precisam alcançá-lo.
   Serve também ao alternador do detalhe e aos rótulos dos selects de par. */
.visualmente-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Mensagem de sucesso: faltava o par verde de `.alert.warn`/`.stop`/`.info`.
   Verde só para confirmação, como o handoff fixa. */
.alert.ok{background:#E9F3ED;border:1px solid #BFD9CB;color:#256B43}

/* Rótulo/valor/apoio: o trio que as três telas repetem. `.k` e `.v` já
   existiam dentro de `.review-list`; aqui valem soltos, no mesmo desenho. */
body.fiscal .campos-do-documento .k,body.fiscal .campos-do-pedido .k,
body.fiscal .detalhe-da-nota .k,body.fiscal .cartao-de-total .k,
body.fiscal .campo-do-pedido .k{display:block;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--steel);font-weight:600}
body.fiscal .campos-do-documento .v,body.fiscal .campos-do-pedido .v{display:block;
  font-size:14px;font-weight:600;margin-top:2px}
body.fiscal .campos-do-documento .v.destaque{font-size:15px}
body.fiscal .apoio{display:block;font-size:11.5px;color:var(--steel);
  font-weight:400;margin-top:2px}

/* ── Tela 2a — importar ─────────────────────────────────────────────────── */

body.fiscal .zona-de-arraste{border:1px dashed var(--line);border-radius:6px;
  background:#FCFCFB;padding:34px 20px;text-align:center;
  transition:background .12s,border-color .12s}
body.fiscal .zona-de-arraste.arrastando{border-color:var(--amber);background:#FDF8F0}
body.fiscal .zona-de-arraste__conteudo{display:flex;flex-direction:column;
  align-items:center;gap:8px}
body.fiscal .zona-de-arraste .instrucao{font-size:15px;font-weight:600}
body.fiscal .zona-de-arraste .sub{margin:0;font-size:12.5px}
body.fiscal .zona-de-arraste label.btn{cursor:pointer;margin-top:2px}
body.fiscal .nota-tecnica{font-size:11.5px;color:var(--steel);margin-top:12px}
body.fiscal .zona-de-arraste .nota-tecnica{max-width:52ch;margin-top:4px}
body.fiscal .lista-de-arquivos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
body.fiscal .lista-de-arquivos .sub{flex:1 0 100%;margin:0 0 2px;font-size:12px}
body.fiscal .lista-de-arquivos .tag{background:var(--paper);color:var(--ink);
  text-transform:none;letter-spacing:normal;font-weight:500}

/* Importações não confirmadas: lista, como na captura `d2-01-consultar.png`.
   Foi tabela dentro de `.tabela-rolavel` até a RA-174, e era esse contêiner
   que recortava a confirmação do descarte. */
body.fiscal .importacoes-em-andamento{list-style:none;margin:0;padding:0;
  border:1px solid var(--line);border-radius:6px}
body.fiscal .importacao-em-andamento{display:flex;gap:14px;flex-wrap:wrap;
  align-items:flex-start;justify-content:space-between;padding:13px 16px}
body.fiscal .importacao-em-andamento + .importacao-em-andamento{
  border-top:1px solid var(--line)}
body.fiscal .importacao-em-andamento__identidade{flex:1 1 260px;min-width:0}
body.fiscal .importacao-em-andamento__identidade b{display:block;font-size:13.5px}
body.fiscal .importacao-em-andamento .secundaria{display:block;margin-top:2px}
body.fiscal .acoes-da-retomada{display:flex;gap:8px;flex-wrap:wrap;
  align-items:flex-start}
body.fiscal .acoes-da-retomada form{display:inline-flex;margin:0}

/* Descarte em dois passos, sem JavaScript (RA-173), **sem recorte** (RA-174) e
   **sem empurrar a linha** (RA-178, item 1).

   As três exigências são compatíveis, e o que as concilia é onde o popover
   mora. No terceiro corretivo ele era `position:absolute` dentro de um
   `.tabela-rolavel` (`overflow-x:auto`), e um descendente posicionado não
   escapa do contexto de rolagem do ancestral — daí o recorte. O quarto o
   trouxe para o fluxo, e aí ele passou a empurrar todo o conteúdo abaixo,
   crescendo a lista inteira a cada abertura.

   Agora ele volta a flutuar, mas sobre um ancestral que **não corta**: a lista
   de importações é um `<ul>` sem `overflow`, dentro de `.card`/`.body`, que
   também não têm — e as duas regras abaixo tornam isso explícito, para que uma
   mudança futura em `.card` não reabra o recorte em silêncio. `z-index` é o
   mínimo que sobrepõe as linhas seguintes, e nada além disso: o problema da
   RA-174 nunca foi empilhamento, foi contexto de rolagem. */
body.pagina-importar-notas .card,
body.pagina-importar-notas .card > .body,
body.fiscal .importacoes-em-andamento{overflow:visible}
body.fiscal .importacao-em-andamento{position:relative}
body.fiscal .descarte-do-lote{display:block;position:relative}
body.fiscal .descarte-do-lote > summary{list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
body.fiscal .descarte-do-lote > summary::-webkit-details-marker{display:none}
body.fiscal .descarte-do-lote > summary:focus-visible{outline:2px solid var(--amber);
  outline-offset:2px}
body.fiscal .descarte-do-lote[open] > summary{background:#FBEBEA}
body.fiscal .descarte-do-lote__confirmacao{position:absolute;top:calc(100% + 6px);
  right:0;z-index:20;width:270px;padding:12px 14px;text-align:left;background:#fff;
  border:1px solid #E8CBC8;border-radius:6px;
  box-shadow:0 8px 20px rgba(22,25,28,.16)}
body.fiscal .descarte-do-lote__confirmacao p{font-size:12.5px;color:var(--steel);
  margin-bottom:10px;overflow-wrap:anywhere}
body.fiscal .descarte-do-lote__confirmacao form{margin:0}

/* Nas revisões de arquivo temporário (decisão 13.18; homologação do
   D3-5R-A2.1) — classificação, NF de venda e cancelamento —, `Descartar
   arquivo` é a ação secundária de um card próprio, sem lista abaixo para
   sobrepor: a confirmação fica no fluxo do card, com a largura dele. */
body.fiscal .descarte-do-lote--card .descarte-do-lote__confirmacao{position:static;
  width:auto;margin-top:8px;box-shadow:none}

/* Na linha do resultado do lote o descarte mora na célula `Ação`, dentro do
   `.tabela-rolavel`, que corta o que flutua dentro dele (RA-174). No desktop a
   confirmação flutua mesmo assim, sobre as linhas seguintes, sem empurrar a
   tabela (ajuste final da homologação do D3-5R-A2.1): o `<details>` da linha
   não é posicionado, e o bloco de contenção do popover passa a ser o card da
   tabela, fora do contêiner rolável — o recorte só alcança o que tem o bloco
   de contenção dentro dele. `top:auto` mantém a posição natural, logo abaixo
   do gatilho, e `right:14px` alinha à direita da célula, com o respiro dela.
   Abaixo de 1040px, na grade, a confirmação volta ao fluxo do bloco da linha.
   Desde o último corretivo visual da homologação
   do D3-5R-A2.1 ele é, em toda linha, o mesmo link vermelho discreto: com uma
   ação principal (`Revisar`, `Classificar`, `Conciliar`, `Ver`), logo abaixo
   dela; sem nenhuma — o CT-e —, sozinho no mesmo lugar, nunca promovido a
   botão. */
body.fiscal td.col-acoes .descarte-do-lote--linha:not(:first-child){margin-top:6px}
body.pagina-resultado-lote .card{position:relative}
body.fiscal .descarte-do-lote--linha{position:static}
body.fiscal .descarte-do-lote--linha .descarte-do-lote__confirmacao{top:auto;right:14px;
  margin-top:6px;white-space:normal}
body.fiscal .descarte-do-lote > summary.descarte-do-lote__link{padding:2px 0;
  color:var(--red);font-size:12px;font-weight:500;text-decoration:underline;
  text-underline-offset:2px}
body.fiscal .descarte-do-lote[open] > summary.descarte-do-lote__link{background:none}

/* ── Tela 2b — resultado do lote ────────────────────────────────────────── */

body.fiscal .card--destaque > h2{box-shadow:inset 3px 0 0 var(--amber)}
body.fiscal .body.sem-padding{padding:0}
body.fiscal .resumo-do-lote{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
body.fiscal .resumo-do-lote__contagens{display:grid;flex:1 1 420px;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
body.fiscal .contagem{border:1px solid var(--line);border-radius:5px;padding:10px 12px;
  background:#fff}
body.fiscal .contagem__rotulo{display:block;font-size:10px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--steel);font-weight:600}
body.fiscal .contagem__numero{display:block;font-size:22px;font-weight:600;
  line-height:1.2;margin-bottom:2px}
body.fiscal .contagem--ok .contagem__numero{color:var(--green)}
body.fiscal .contagem--warn .contagem__numero{color:#8A5A0B}
body.fiscal .contagem--stop .contagem__numero{color:var(--red)}
body.fiscal .resumo-do-lote__acao{margin-left:auto}
body.fiscal p.resumo-do-lote__acao{margin:0;max-width:38ch;font-size:12.5px;color:var(--steel)}

body.fiscal .filtros-de-situacao{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
body.fiscal .btn-filtro,body.fiscal a.btn-filtro:visited{display:inline-flex;
  align-items:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:4px;padding:6px 11px;font-size:12.5px;text-decoration:none}
body.fiscal a.btn-filtro:hover{background:#F6F7F5}
body.fiscal a.btn-filtro:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
body.fiscal .btn-filtro.on,body.fiscal a.btn-filtro.on:visited{background:var(--ink);
  color:#fff;border-color:var(--ink)}
body.fiscal .contagem-inline{font-family:var(--mono);font-size:11px;color:var(--steel);
  background:var(--paper);border-radius:3px;padding:1px 6px}
body.fiscal .btn-filtro.on .contagem-inline{background:#2A2F34;color:#fff}

body.fiscal table.tabela-lote{width:100%;border-collapse:collapse}
body.fiscal table.tabela-lote th{padding:10px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap}
body.fiscal table.tabela-lote td{padding:11px 14px;vertical-align:top;
  border-bottom:1px solid #EFF0ED}
body.fiscal table.tabela-lote tr:last-child td{border-bottom:0}
body.fiscal table.tabela-lote td.num,body.fiscal table.tabela-lote th.num{
  text-align:right;font-family:var(--mono)}
body.fiscal table.tabela-lote td.col-detalhes,
body.fiscal table.tabela-lote th.col-detalhes{width:44px;text-align:center}
body.fiscal table.tabela-lote td.col-acoes,
body.fiscal table.tabela-lote th.col-acoes{width:1%;text-align:right;white-space:nowrap}

/* Homologação de 20/09/2026 — a coluna `Cliente` empurrava a `Ação` para fora.
   Razão social longa (`INSTITUTO DE PREVIDENCIA DOS SERVIDORES DO MUNICIPIO
   DE MONT`) não tinha teto: a coluna crescia até a largura do nome, a linha do
   lote passava da área visível e alcançar o seletor de preparação e o botão
   `Vincular` exigia rolagem horizontal dentro de `.tabela-rolavel`.

   O teto é de largura, **não de conteúdo**: o nome continua inteiro e o CNPJ
   embaixo dele; o que muda é que o nome quebra em mais linhas em vez de
   alargar a coluna. Nada é truncado nem escondido. */
body.fiscal table.tabela-lote td.col-cliente{max-width:32ch}
body.fiscal table.tabela-lote td.col-cliente > span{overflow-wrap:break-word}

/* A ação de vincular é a mais larga da tela — rótulo, seletor de preparação e
   botão —, e `width:1%` no `td` a espremia. A medida mínima fica no próprio
   `form`, e não na célula: assim ela vale só para a linha que tem o vínculo, e
   as linhas de NF de venda e de NF do cliente, cujo `Ver`/`Revisar` é um botão
   só, continuam na largura mínima de sempre.

   O rótulo ocupa a linha inteira e os dois controles ficam lado a lado abaixo
   dele: é o que cabe em 1280px sem comprimir a coluna `Cliente`. */
body.fiscal table.tabela-lote td.col-acoes > form{display:flex;flex-wrap:wrap;
  align-items:center;justify-content:flex-end;gap:6px;min-width:18rem;
  white-space:normal}
body.fiscal table.tabela-lote td.col-acoes > form > label{flex:1 0 100%;
  text-align:right;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel)}
body.fiscal table.tabela-lote td.col-acoes > form > select{max-width:10rem}
body.fiscal .linha-lote:hover>td{background:#FAFAF8}

/* Alternador do detalhe: `<input type="checkbox">` escondido + `<label>` com
   cara de botão. É nativo — foco, Espaço e leitor de tela funcionam sem
   JavaScript —, e é o que permite ao conteúdo morar na `<tr>` seguinte, que
   `<details>` não conseguiria por não poder envolver duas linhas. */
body.fiscal .alternador-de-detalhes__botao{display:inline-flex;align-items:center;
  justify-content:center;width:26px;height:26px;cursor:pointer;color:var(--steel);
  border:1px solid var(--line);border-radius:4px;font-size:11px;background:#fff}
body.fiscal .alternador-de-detalhes__botao:hover{background:#F6F7F5;color:var(--ink)}
body.fiscal .alternador-de-detalhes:focus-visible + .alternador-de-detalhes__botao{
  outline:2px solid var(--amber);outline-offset:2px}
body.fiscal .alternador-de-detalhes:checked + .alternador-de-detalhes__botao{
  background:var(--ink);color:#fff;border-color:var(--ink)}

/* A linha do detalhe ocupa a largura inteira da tabela, logo abaixo da sua NF.
   Fechada, não ocupa espaço. Sem `:has()` o navegador mostra todos os
   detalhes abertos — informação visível, que é o fallback honesto: nada fica
   escondido sem que exista a régua para escondê-lo. */
@supports selector(:has(*)){
  body.fiscal tr.linha-lote:has(.alternador-de-detalhes:not(:checked))
    + tr.linha-do-detalhe{display:none}
}
body.fiscal tr.linha-do-detalhe > td{padding:0 14px 14px;border-bottom:1px solid #EFF0ED}
body.fiscal .detalhe-da-nota{background:#FAFAF8;border:1px solid var(--line);
  border-radius:5px;padding:14px 16px;font-size:12.5px;display:grid;gap:10px}
body.fiscal .detalhe-da-nota__campos{display:grid;gap:10px 18px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
body.fiscal .detalhe-da-nota ul{margin:4px 0 0 16px}
body.fiscal .detalhe-da-nota li{margin-bottom:2px}
body.fiscal .detalhe-da-nota .motivo{color:#7A5510;background:#FDF3E2;
  border:1px solid #EBD5A8;border-radius:4px;padding:8px 11px}
body.fiscal .chave-abreviada{font-size:11.5px;color:var(--steel)}
/* O nome do arquivo sem identidade fiscal lida (último corretivo visual da
   homologação do D3-5R-A2.1) não alarga a coluna `NF`: trunca com
   reticências, e o inteiro fica no `title` e no detalhe, onde quebra em
   qualquer ponto em vez de empurrar a tabela. */
body.fiscal .nome-do-arquivo-truncado{display:inline-block;max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
body.fiscal .nome-do-arquivo{font-size:11.5px;color:var(--steel);overflow-wrap:anywhere}
body.fiscal .detalhe-da-nota__campos > div{min-width:0}
body.fiscal .btn-copiar{border:1px solid var(--line);background:#fff;border-radius:3px;
  color:var(--steel);font-size:11px;padding:2px 8px;cursor:pointer;margin-left:4px}
body.fiscal .btn-copiar:hover{background:#F6F7F5;color:var(--ink)}
body.fiscal .btn-copiar:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
body.fiscal .candidatos .secundaria,
body.fiscal .nao-elegiveis .secundaria{font-size:11.5px}

/* ── Tela 3 — revisar ───────────────────────────────────────────────────── */

/* Cabeçalhos da revisão: cinza-claro no geral (RA-177) e **uma** âncora escura
   (RA-178, itens 3 e 4).

   O terceiro corretivo pusera as duas âncoras em barra preta, como o mockup; o
   quarto clareou as duas. A homologação fechou o meio-termo: `Documento fiscal`
   fica claro com o acento âmbar, e `Conferência monetária` — que é o desfecho
   da tela e o único ponto onde o número decide — recebe o escuro do sistema,
   pelo `.titulo-escuro` que a folha já tinha. A regra precisa da classe extra
   no seletor porque a regra da página é mais específica que
   `.card.titulo-escuro > h2`. */
/* O padrão vale para **todas** as telas do D2, e não só para a revisão
   (homologação de 06/09/2026): o cabeçalho secundário é a barra cinza-clara do
   mockup com o rótulo em `--steel` (#6B7580), e a âncora é a exceção declarada
   por `.titulo-escuro`. `Itens fiscais e produtos-base`, no detalhe da NF,
   estava sem a barra — herdava o `h2` branco do card comum e destoava dos
   demais cabeçalhos da mesma tela. */
body.pagina-revisar-nota .card > h2,
body.pagina-nota .card > h2,
body.pagina-corrigir-vinculo .card > h2,
body.pagina-encerrar-inconsistencia .card > h2,
body.pagina-cancelamento-da-nota .card > h2{background:#F8F7F7;color:var(--steel);
  border-radius:5px 5px 0 0}
body.pagina-revisar-nota .card--ancora > h2{box-shadow:inset 3px 0 0 var(--amber)}
body.pagina-revisar-nota .card.titulo-escuro > h2,
body.pagina-nota .card.titulo-escuro > h2,
body.pagina-corrigir-vinculo .card.titulo-escuro > h2,
body.pagina-encerrar-inconsistencia .card.titulo-escuro > h2,
body.pagina-cancelamento-da-nota .card.titulo-escuro > h2{background:var(--ink);
  color:#fff;font-weight:700;border-bottom-color:var(--ink);
  box-shadow:inset 3px 0 0 var(--amber)}
body.pagina-revisar-nota .card--excecao{border-color:#EBD5A8}
body.pagina-revisar-nota .card--excecao > h2{background:#FDF3E2;color:#7A5510;
  border-bottom-color:#EBD5A8;box-shadow:inset 3px 0 0 var(--amber)}
body.fiscal .cabecalho-com-acao{display:flex;justify-content:space-between;
  align-items:baseline;gap:10px;flex-wrap:wrap}
body.fiscal .cabecalho-com-acao a,body.fiscal .cabecalho-com-acao .apoio{
  font-weight:400;text-transform:none;letter-spacing:0;font-size:12px;margin:0}
/* O link do cabeçalho é atalho de identidade como qualquer outro (§5.8): âmbar,
   sem sublinhado, com `:visited` coberto. Sem esta regra ele caía no azul e no
   púrpura da folha padrão do navegador — as duas cores de link que o CR Hub não
   usa em lugar nenhum. */
body.fiscal .cabecalho-com-acao a,body.fiscal .cabecalho-com-acao a:visited,
body.fiscal .cabecalho-com-acao a:active{color:var(--amber);text-decoration:none}
body.fiscal .cabecalho-com-acao a:hover{color:#a8690f}
body.fiscal .cabecalho-com-acao a:focus-visible{outline:2px solid var(--amber);
  outline-offset:2px}

/* Documento e pedido lado a lado; o pareamento e o par conferências/monetária
   usam o mesmo contêiner. */
body.fiscal .blocos-da-revisao{display:flex;gap:16px;flex-wrap:wrap;
  align-items:flex-start}
body.fiscal .blocos-da-revisao > .card{flex:1 1 340px;min-width:300px}

body.fiscal .campos-do-documento,body.fiscal .campos-do-pedido{display:grid;
  gap:12px 18px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
body.fiscal .campos-do-documento__chave{grid-column:1/-1;padding-top:10px;
  border-top:1px solid var(--line)}
body.fiscal .chave-com-copia{display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;margin-top:3px;font-size:12.5px}
body.fiscal .tags-do-documento{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line)}
body.fiscal .card--stop{border-color:#E8CBC8}
body.fiscal .destaque-stop{color:#8A2F28}

/* Seletor compacto do pedido: parece campo, é link — a troca continua
   funcionando sem JavaScript e continua sendo escolha humana. */
body.fiscal .campo-do-pedido{margin-bottom:14px}
body.fiscal a.seletor-de-pedido,body.fiscal a.seletor-de-pedido:visited{
  display:flex;gap:8px;align-items:center;border:1px solid var(--line);
  border-radius:4px;padding:8px 10px;background:#fff;color:var(--ink);
  text-decoration:none;margin-top:4px}
body.fiscal a.seletor-de-pedido:hover{border-color:var(--steel);background:#FAFAF8}
body.fiscal a.seletor-de-pedido:focus-visible{outline:2px solid var(--amber);
  outline-offset:2px}
body.fiscal .seletor-de-pedido__valor{flex:1;font-size:13px;min-width:0}
body.fiscal .seletor-de-pedido__seta{color:var(--steel);font-size:11px}

/* Pareamento: grade do mockup, um card por par — não uma tabela genérica. */
body.fiscal .grade-de-pares,body.fiscal .grade-de-pares__cabecalho{display:grid;
  gap:8px;grid-template-columns:minmax(140px,1.5fr) 56px 56px 104px minmax(140px,1.5fr) 104px 116px;
  align-items:start}
body.fiscal .grade-de-pares--manual{
  grid-template-columns:minmax(140px,1.5fr) 56px 56px 104px minmax(220px,2fr)}
body.fiscal .grade-de-pares__cabecalho{padding:0 12px 8px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--steel);font-weight:600}
body.fiscal .grade-de-pares__cabecalho .num,body.fiscal .grade-de-pares .num{text-align:right}
body.fiscal .pares{display:flex;flex-direction:column;gap:8px}
body.fiscal .par{border:1px solid var(--line);border-radius:5px;background:#fff;
  padding:11px 12px;font-size:13px}
body.fiscal .par--sem-par{background:#FDFBF6;border-color:#EBD5A8}
body.fiscal .par__lado{min-width:0}
body.fiscal .par .mono{font-size:12px}
body.fiscal .par__lado .apoio{font-size:11px}
body.fiscal .select-pareamento{width:100%}
body.fiscal .sub-secao{font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--steel);font-weight:600;margin:18px 0 8px}
body.fiscal .linhas-sem-par{margin-top:14px;font-size:12.5px}
body.fiscal .linhas-sem-par ul{margin:4px 0 0 18px;color:var(--steel)}
body.fiscal .vazio{color:var(--steel)}

/* Critérios e avisos: ✓ / ! / ✕ separando sucesso, aviso e bloqueio. */
body.fiscal .conferencias{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px}
body.fiscal .conferencia{display:flex;gap:9px;align-items:baseline;font-size:12.5px}
/* A pendência marcada como atendida some de verdade: `display:flex` acima
   venceria o `hidden` do HTML, e a linha continuaria na tela (13.35). */
body.fiscal .conferencia[hidden]{display:none}
body.fiscal .conferencia__icone{flex:none;width:16px;font-weight:700}
body.fiscal .conferencia--ok .conferencia__icone{color:var(--green)}
body.fiscal .conferencia--aviso .conferencia__icone{color:#8A5A0B}
body.fiscal .conferencia--aviso{color:#7A5510}
body.fiscal .conferencia--bloqueio .conferencia__icone{color:var(--red)}
body.fiscal .conferencia--bloqueio{color:#8A2F28}
body.fiscal .conferencia--pendencia .conferencia__icone{color:var(--steel)}
body.fiscal .conferencia--pendencia{color:var(--steel)}

/* Conferência monetária: extrato curto e os dois cartões de fechamento, com o
   `vNF` como o número grande — é o fato fiscal. */
body.fiscal .memoria-monetaria{display:flex;flex-direction:column;gap:8px;
  font-size:13px;margin-bottom:16px}
body.fiscal .memoria-monetaria > div{display:flex;justify-content:space-between;gap:10px}
body.fiscal .memoria-monetaria span:first-child{color:var(--steel)}
body.fiscal .fechamento-monetario{display:flex;gap:12px;flex-wrap:wrap}
body.fiscal .cartao-de-total{flex:1 1 180px;border:1px solid var(--line);
  border-radius:5px;padding:12px 14px;background:#FAFAF8}
body.fiscal .cartao-de-total__valor{display:block;font-size:19px;font-weight:600;margin-top:3px}
body.fiscal .cartao-de-total--fato{background:var(--ink);border-color:var(--ink);color:#fff;
  box-shadow:inset 3px 0 0 var(--amber)}
body.fiscal .cartao-de-total--fato .k,body.fiscal .cartao-de-total--fato .apoio{color:#9AA3AB}
body.fiscal .cartao-de-total--fato .cartao-de-total__valor{font-size:24px;font-weight:700}
body.fiscal .cartao-de-total--stop{background:#7A2A24;border-color:#7A2A24;
  box-shadow:inset 3px 0 0 var(--red)}
body.fiscal .cartao-de-total--stop .k,body.fiscal .cartao-de-total--stop .apoio{color:#F0C9C5}

body.fiscal .label-checkbox{display:flex;align-items:flex-start;gap:10px;font-size:13px;
  color:var(--ink);cursor:pointer}
body.fiscal .label-checkbox input{margin-top:3px;width:17px;height:17px;flex:none}
body.fiscal .campo-erro{display:block;color:var(--red);font-size:11.5px;margin-top:4px}
body.fiscal .obrigatorio{color:var(--red)}

body.fiscal .acoes-da-revisao{display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
body.fiscal .acoes-da-revisao__nota{font-size:12.5px;color:var(--steel);max-width:460px;margin:0}
body.fiscal .acoes-da-revisao__botoes{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
body.fiscal .acoes-da-revisao--confirmar{justify-content:flex-end}

/* Candidatos: lista compacta, cada linha com a sua altura (RA-176). Os
   cartões em grade que vieram antes esticavam o candidato de uma razão à
   altura do de cinco. Verde nunca entra aqui — escolher não é confirmar. */
body.fiscal .candidatos-elegiveis{list-style:none;margin:0;padding:0;
  border:1px solid var(--line);border-radius:6px}
body.fiscal .candidatos-elegiveis > li + li{border-top:1px solid var(--line)}
body.fiscal a.candidato,body.fiscal a.candidato:visited{display:flex;gap:12px;
  align-items:baseline;flex-wrap:wrap;padding:11px 14px;color:var(--ink);
  text-decoration:none}
body.fiscal a.candidato:hover{background:#FAFAF8}
body.fiscal a.candidato:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
body.fiscal .candidato__pedido{flex:0 0 auto;font-size:13.5px}
body.fiscal .candidato__cliente{color:var(--steel);margin-left:8px;font-size:12.5px}
body.fiscal .candidato__razoes{flex:1 1 220px;display:flex;flex-wrap:wrap;gap:4px 10px;
  min-width:0}
body.fiscal .candidato__razao{font-size:11.5px;color:var(--steel)}
body.fiscal .candidato__razao::before{content:"· "}
body.fiscal .candidato__seta{color:var(--steel);margin-left:auto}
body.fiscal .nao-elegiveis-selecao{margin-top:16px;font-size:12.5px}
body.fiscal .nao-elegiveis-selecao summary{cursor:pointer;color:var(--steel)}
body.fiscal .nao-elegiveis-selecao ul{margin:8px 0 0 18px;color:var(--steel)}

/* ── 1366 px, 1920 px e corte estreito ──────────────────────────────────────
   Acima de 1040px o pareamento e a seleção usam a largura do `main` (1180px),
   que é a mesma das capturas em 1366 e 1920; o resultado do lote passou à
   largura das consultas de notas fiscais (1600px, por `pagina-notas`) na
   decisão 13.37, quando perdeu duas colunas e as quatro restantes ficaram
   apertadas no meio da tela. Abaixo de 1040px a linha do lote e o
   pareamento viram blocos verticais, na ordem que o handoff fixa, com o
   rótulo voltando junto do dado (`data-rotulo`) em vez de sumir com o
   cabeçalho da coluna. O detalhe continua sendo a linha seguinte — ou seja,
   continua sendo parte do bloco daquela NF. */
@media(max-width:1040px){
  /* A largura mínima de 560px é do modo tabela, e a linha do lote não está
     mais nele: aqui ela é grade de blocos, e qualquer mínimo maior que a tela
     faz o seletor de preparação empurrar a página para fora (decisão 13.37,
     com o lote em seis colunas). Zerá-lo devolve o refluxo — e o seletor
     continua inteiro, porque `.col-acoes` ocupa a linha toda. */
  body.fiscal .card .body>.tabela-rolavel>table.tabela-lote{min-width:0}
  body.fiscal table.tabela-lote,body.fiscal table.tabela-lote tbody{display:block}
  body.fiscal table.tabela-lote thead{display:none}
  body.fiscal table.tabela-lote tr.linha-lote{display:grid;gap:6px;padding:12px 14px;
    grid-template-columns:1fr auto;border-bottom:1px solid var(--line)}
  body.fiscal table.tabela-lote tr.linha-lote td{display:block;padding:0;border:0}
  body.fiscal table.tabela-lote td.num{text-align:left}
  body.fiscal table.tabela-lote td[data-rotulo]::before{content:attr(data-rotulo) " ";
    font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--steel);
    font-weight:600}
  body.fiscal table.tabela-lote td.col-detalhes{grid-row:1;grid-column:2;text-align:right}
  body.fiscal table.tabela-lote td.col-acoes{grid-column:1 / -1;text-align:left;margin-top:4px}
  /* A célula `Ação` ocupa a linha inteira da grade: o `width:1%` da tabela a
     deixava com 5px, e a confirmação do descarte quebrava palavra a palavra. */
  body.fiscal table.tabela-lote td.col-acoes{width:auto}
  /* A linha da grade herda a largura mínima da tabela e passa da tela; a
     confirmação fica dentro da parte visível do card. */
  body.fiscal .descarte-do-lote--linha .descarte-do-lote__confirmacao{position:static;
    width:auto;max-width:min(320px, calc(100vw - 64px));margin:8px 0 0;box-shadow:none}
  body.fiscal table.tabela-lote tr.linha-do-detalhe{display:block}
  body.fiscal tr.linha-do-detalhe > td{display:block;padding:0 14px 14px}

  body.fiscal .grade-de-pares,body.fiscal .grade-de-pares--manual{
    grid-template-columns:1fr 1fr;gap:8px 12px}
  body.fiscal .grade-de-pares__cabecalho{display:none}
  body.fiscal .grade-de-pares .num{text-align:left}
  body.fiscal .grade-de-pares > div[data-rotulo]::before{content:attr(data-rotulo) " ";
    display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
    color:var(--steel);font-weight:600}
  body.fiscal .par__lado,body.fiscal .par__escolha{grid-column:1 / -1}
}
@media(max-width:560px){
  body.fiscal .zona-de-arraste{padding:24px 14px}
  body.fiscal .resumo-do-lote__contagens{grid-template-columns:repeat(2,1fr)}
  body.fiscal .resumo-do-lote__acao{margin-left:0;width:100%}
  body.fiscal .resumo-do-lote__acao .btn{width:100%}
  body.fiscal .filtros-de-situacao{gap:5px}
  body.fiscal .btn-filtro{padding:7px 10px}
  body.fiscal .grade-de-pares,body.fiscal .grade-de-pares--manual{grid-template-columns:1fr}
  body.fiscal .descarte-do-lote__confirmacao{max-width:none}
  body.fiscal .acoes-da-revisao__botoes{margin-left:0;width:100%}
  body.fiscal .acoes-da-revisao__botoes .btn{flex:1}
  body.fiscal a.candidato{gap:6px}
  body.fiscal .candidato__seta{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Consulta, detalhe e comandos da NF — telas 1, 4, 5, 6 e 7 do handoff D2
   (Pacote D2-7)

   A lição da RA-170 está aplicada desde a primeira linha destas telas: nenhuma
   classe nova nasce sem regra, e quase nenhuma classe nova nasce. A consulta
   reusa a composição já homologada da consulta de pedidos (`.filtros`,
   `.linha`, `.f`, `.tabela-rolavel`, `.rodape-da-listagem`, `.orientacao`,
   `.sem-resultados`, `details.menu`/`.suspenso`), o detalhe reusa a do detalhe
   do pedido (`.ofbar`, `.card.titulo-escuro`, `.detail-grid`,
   `.secao-recolhivel`, `.registro-do-historico`) e as telas de comando reusam
   os blocos que o D2-6 desenhou (`.conferencias`, `.cartao-de-total`,
   `.memoria-monetaria`, `.acoes-da-revisao`, `.candidatos-elegiveis`).

   O que sobra — e é só isto — são larguras mínimas de tabela, a lista de NFs do
   pedido, o riscado do antes/depois e a variante em `<button>` do candidato.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Larguras mínimas: rolar, nunca espremer. Mesma régua e mesmo seletor de
   `table.pedidos` (§ "Tabelas largas"), porque é ele que vence o mínimo de
   560px do pacote móvel transversal. */
body.fiscal .card .body>.tabela-rolavel>table.notas{min-width:920px}
body.fiscal .card .body>.tabela-rolavel>table.itens-fiscais{min-width:820px}

body.fiscal table.itens-fiscais td.num,
body.fiscal table.itens-fiscais th.num{text-align:right;font-family:var(--mono)}
body.fiscal table.itens-fiscais td{vertical-align:top}
body.fiscal table.notas td{vertical-align:middle}

/* Itens fiscais do detalhe: **uma** seção, em blocos, como o mockup
   (`d2-04-detalhe.png`).

   Até o corretivo consolidado eram duas tabelas — `Itens fiscais e
   produtos-base` e `Pareamento confirmado com o pedido` — repetindo as mesmas
   linhas com colunas diferentes. O mockup nunca teve duas: tem uma grade de
   cabeçalho e, abaixo, um bloco por item, com o produto à esquerda e os
   números à direita. O pareamento vive **dentro** do bloco do seu item, que é
   onde ele descreve alguma coisa.

   Mesma anatomia da `.grade-de-pares` do D2-6, e de propósito: é o mesmo
   desenho aprovado, com outras colunas. */
body.fiscal .grade-de-itens,
body.fiscal .grade-de-itens__cabecalho{display:grid;gap:9px;
  grid-template-columns:minmax(170px,1.6fr) 74px 118px 112px 52px;
  align-items:center}
body.fiscal .grade-de-itens__cabecalho{padding:0 12px 8px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--steel);font-weight:600}
body.fiscal .grade-de-itens__cabecalho .num,body.fiscal .grade-de-itens .num{
  text-align:right;font-family:var(--mono)}
body.fiscal .itens-fiscais{display:flex;flex-direction:column;gap:6px}
/* A mesma classe nomeia `<table class="itens-fiscais">` (equivalências,
   divergência, cancelamento, revisões): a tabela continua tabela, para que
   cabeçalho e linhas dividam as colunas; o corte estreito a reflui em blocos. */
body.fiscal table.itens-fiscais{display:table}
body.fiscal .item-fiscal{border:1px solid var(--line);border-radius:5px;
  background:#fff;padding:10px 12px;font-size:13px}
body.fiscal .item-fiscal__produto{min-width:0}
body.fiscal .item-fiscal__produto b{display:block;font-size:13px;font-weight:600}
body.fiscal .item-fiscal__produto .apoio{margin-top:3px}
body.fiscal .item-fiscal__codigos{font-family:var(--mono);font-size:12px;
  color:var(--steel);min-width:0;overflow-wrap:anywhere}
/* O pareamento ocupa a largura inteira do bloco, abaixo dos números: é
   informação sobre **aquele** item, e não uma sexta coluna. */
body.fiscal .item-fiscal__pareamento{grid-column:1 / -1;margin-top:2px;
  padding-top:8px;border-top:1px dashed var(--line);font-size:11.5px;
  color:var(--steel)}
body.fiscal .item-fiscal__pareamento b{color:var(--ink);font-weight:600}
body.fiscal .item-fiscal--sem-par .item-fiscal__pareamento{color:#7A5510}
body.fiscal .item-fiscal__pareamento .item-fiscal__codigos{display:block;margin-bottom:4px}

/* Corretivo da homologação visual do D3-7: o pareamento e o `código XML → base`
   saem da apresentação padrão para a linha expansível do item. O acionador é
   um `<details>` nativo só com o `summary` — clique, Enter e Espaço sem
   JavaScript, estado aberto anunciado pelo próprio elemento —, e o painel é o
   bloco de largura inteira logo abaixo. O recolhimento depende de `:has()`:
   onde o navegador não o reconhece, a regra inteira é descartada e o painel
   fica à vista, que é a degradação segura para uma auditoria. */
body.fiscal .acoes-do-item{display:flex;justify-content:flex-end}
body.fiscal .detalhe-do-item>summary{list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--steel);
  font-size:13px;line-height:1;transition:transform .12s}
body.fiscal .detalhe-do-item>summary::-webkit-details-marker{display:none}
body.fiscal .detalhe-do-item>summary:hover{background:#F3F4F1;color:var(--ink)}
body.fiscal .detalhe-do-item>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
body.fiscal .detalhe-do-item[open]>summary{transform:rotate(180deg);background:#F3F4F1;color:var(--ink)}
body.fiscal .item-fiscal:not(:has(.detalhe-do-item[open])) .item-fiscal__pareamento{display:none}

/* O antes do antes/depois: riscado e atenuado, como na revisão da correção do
   pedido (D1-8) e na captura `d2-06-correcao.png`. */
body.fiscal .antes-riscado{text-decoration:line-through;color:var(--steel)}

/* Texto de orientação abaixo do título, no fluxo — o `.orientacao` do §5.2 é
   centralizado e existe para o estado vazio, que é outra coisa. */
body.fiscal .orientacao-inline{color:var(--steel);font-size:13px;margin:-6px 0 14px}

/* `Baixar XML original` é `POST`, então é um `<form>` dentro da barra de ações.
   Sem isto ele quebraria a linha e empurraria os demais botões. */
body.fiscal .acoes-da-of form.acao-em-post{display:inline-flex;margin:0}

/* A seção real de NF de venda no detalhe do pedido (D2-7). Lista, e não tabela:
   são uma vigente e as canceladas, quase sempre uma ou duas linhas — a mesma
   escolha de composição que a RA-174 fez para as importações em andamento. */
body.fiscal .notas-do-pedido{list-style:none;margin:0;padding:0;
  border:1px solid var(--line);border-radius:6px}
body.fiscal .nota-do-pedido{display:flex;gap:14px;flex-wrap:wrap;
  align-items:center;padding:12px 14px}
body.fiscal .nota-do-pedido + .nota-do-pedido{border-top:1px solid var(--line)}
body.fiscal .nota-do-pedido__identidade{flex:1 1 200px;min-width:0}
body.fiscal .nota-do-pedido__identidade a{font-size:13.5px;font-weight:600}
body.fiscal .nota-do-pedido__identidade .secundaria{display:block;margin-top:2px}
body.fiscal .nota-do-pedido__valor{flex:none}
body.fiscal .nota-do-pedido__situacao{flex:none;display:flex;gap:6px;flex-wrap:wrap}
/* Cancelada permanece visível e **atenuada** (§5.14 do guia, decisão 13.16). A
   atenuação é do conteúdo, não da linha inteira: a ação continua legível. */
body.fiscal .nota-do-pedido--cancelada .nota-do-pedido__identidade,
body.fiscal .nota-do-pedido--cancelada .nota-do-pedido__valor{opacity:.65}

/* O candidato da correção de vínculo é um `<button>` de formulário, e não um
   link: escolher o pedido **envia** a escolha junto do motivo, e continua
   funcionando sem JavaScript. Veste a mesma lista compacta da RA-176. */
body.fiscal .candidato--botao{width:100%;border:0;background:none;font:inherit;
  text-align:left;cursor:pointer}
body.fiscal .candidato--botao:hover{background:#FAFAF8}
body.fiscal .candidato--botao:focus-visible{outline:2px solid var(--amber);
  outline-offset:-2px}

/* ── Corte estreito ────────────────────────────────────────────────────────
   Abaixo de 1040px as duas tabelas novas viram blocos verticais, na mesma
   forma que a linha do lote já usa: o cabeçalho de coluna some e o rótulo
   volta junto do dado (`data-rotulo`). Nenhuma causa, valor ou ação é
   ocultada, e não há rolagem horizontal global. */
@media(max-width:1040px){
  /* Itens fiscais: o cabeçalho de coluna some e cada bloco vira uma faixa
     que embrulha, com o rótulo voltando junto do dado — a mesma troca que a
     linha do lote faz, e a mesma que o mockup mostra no corte estreito. */
  body.fiscal .grade-de-itens__cabecalho{display:none}
  body.fiscal .grade-de-itens{display:flex;flex-wrap:wrap;align-items:baseline;
    gap:6px 16px;padding:12px 14px}
  body.fiscal .grade-de-itens .num{text-align:left}
  body.fiscal .item-fiscal__produto{flex:1 0 100%}
  body.fiscal .acoes-do-item{margin-left:auto}
  body.fiscal .grade-de-itens > div[data-rotulo]::before{
    content:attr(data-rotulo) " ";font-size:10px;text-transform:uppercase;
    letter-spacing:.08em;color:var(--steel);font-weight:600}
  body.fiscal .item-fiscal__produto[data-rotulo]::before,
  body.fiscal .item-fiscal__pareamento[data-rotulo]::before{content:none}
  body.fiscal .item-fiscal__pareamento{flex:1 0 100%}

  body.fiscal table.itens-fiscais,
  body.fiscal table.itens-fiscais tbody{display:block}
  body.fiscal table.itens-fiscais thead{display:none}
  body.fiscal table.itens-fiscais tbody tr{display:grid;gap:6px;padding:12px 14px;
    border-bottom:1px solid var(--line)}
  body.fiscal table.itens-fiscais tbody tr:last-child{border-bottom:0}
  body.fiscal table.itens-fiscais td{display:block;padding:0;border:0}
  body.fiscal table.itens-fiscais td.num{text-align:left}
  body.fiscal table.itens-fiscais td[data-rotulo]::before{
    content:attr(data-rotulo) " ";font-size:10px;text-transform:uppercase;
    letter-spacing:.08em;color:var(--steel);font-weight:600}
  body.fiscal .card .body>.tabela-rolavel>table.itens-fiscais{min-width:0}
}
@media(max-width:560px){
  body.fiscal .nota-do-pedido{gap:8px}
  body.fiscal .nota-do-pedido__situacao,
  body.fiscal .nota-do-pedido__valor{flex:1 0 100%}
  /* O popover do descarte não pode sair da tela num aparelho estreito: nesta
     faixa ele ocupa a largura do próprio bloco da importação. */
  body.fiscal .descarte-do-lote{position:static}
  body.fiscal .descarte-do-lote__confirmacao{width:auto;left:0;right:0}
}

/* Mensagens do sistema no Fiscal — renderizadas **uma vez só** (RA-178, item 2).

   A casca (`core/base.html`) já renderiza `messages` para toda tela do sistema.
   As três telas do D2-6 renderizavam de novo, com a moldura de `.alert`, e o
   resultado era a mesma frase duas vezes — uma sem estilo, outra com. A causa
   foi removida do lado certo: os blocos locais saíram, a casca continua sendo o
   único renderizador, e é aqui que as classes de tag dela recebem a mesma
   paleta de `.alert` — sem tocar em nenhum outro módulo, porque a Produção usa
   as suas próprias e `.success` global continua como está. */
body.fiscal main > .error,
body.fiscal main > .warning,
body.fiscal main > .info,
body.fiscal main > .debug,
body.fiscal main > .success{display:block;border-radius:5px;padding:12px 14px;
  font-size:13px;margin-bottom:16px}
body.fiscal main > .error{background:#FBEBEA;border:1px solid #E8CBC8;color:#8A2F28}
body.fiscal main > .warning{background:#FDF3E2;border:1px solid #EBD5A8;color:#7A5510}
body.fiscal main > .info,
body.fiscal main > .debug{background:#EAF1F7;border:1px solid #C7D6E3;color:#2C5A80}
body.fiscal main > .success{background:#E9F3ED;border:1px solid #BFD9CB;color:#256B43}

/* Conciliação e classificação da NF do cliente (D3-5, decisão 13.17).

   Reusa `.card`, `.tag`, `.review-list`, `.tabela-rolavel`, `.excecao-ao-perfil`,
   `.secao-recolhivel`, `.btn-copiar` e `.actions` já declarados acima; só as
   classes próprias da conciliação entram aqui. Desde a RA-223 a tela segue a
   hierarquia do mockup homologado: a faixa escura da NF do cliente, a candidata
   em destaque, uma "Venda utilizada" por item, o apoio recolhido em `<details>`
   nativo e o fechamento junto das ações. */
body.pagina-conciliar-nota .introducao-da-conciliacao{margin:0 0 14px;max-width:80ch}
.cabecalho-da-nota-do-cliente>h2,
.candidatas-da-nota>h2,
.itens-da-conciliacao>h2{display:flex;justify-content:space-between;
  align-items:center;gap:6px 12px;flex-wrap:wrap}
.estado-da-conciliacao{font-size:10.5px;letter-spacing:.08em;padding:2px 8px;
  border-radius:3px;background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.observacao-do-titulo{font-weight:400;text-transform:none;letter-spacing:0;
  font-size:12px;color:var(--steel)}
.campos-da-nota{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px 18px}
.campos-da-nota>div{display:flex;flex-direction:column;gap:2px;min-width:0;
  overflow-wrap:anywhere}
.campos-da-nota .k,.chave-da-nota .k,.item-numero .k,
.numero-do-fechamento .k{font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--steel)}
.campos-da-nota .v{font-weight:600}
.campos-da-nota .opt,.numero-do-fechamento .opt{margin-left:0}
.chave-da-nota{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;min-width:0}
.chave-da-nota .chave{overflow-wrap:anywhere;font-size:12.5px}

.candidata{border:1px solid var(--line);border-radius:5px;padding:12px 14px;
  margin-bottom:10px;background:#FAFAF8}
.candidata p{margin:4px 0 8px;font-size:13px}
.candidata--sugerida{border-color:#BFD9CB;background:#F3FAF6;display:flex;gap:16px;
  flex-wrap:wrap;align-items:flex-start}
/* Combinações exatas concorrentes: neutras, nenhuma com o verde da sugerida. */
.candidata--neutra{background:#fff;display:flex;gap:16px;flex-wrap:wrap;
  align-items:flex-start}
.candidata-corpo{flex:1 1 360px;min-width:0}
.candidata-titulo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.candidata-acao{flex:0 1 230px;display:flex;flex-direction:column;gap:6px}
.candidata-acao .btn{align-self:flex-start}
.candidata-acao p.sub{margin:0;font-size:12px}
.linhas-da-candidata{list-style:none;margin:8px 0 0;padding:0}
.linhas-da-candidata li{display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;border-top:1px dashed var(--line);font-size:12.5px}
.linhas-da-candidata .produto{display:flex;flex-direction:column;min-width:0;
  overflow-wrap:anywhere}
.linhas-da-candidata .quantidade{white-space:nowrap;font-weight:600}
.sem-candidata{border:1px dashed var(--line);border-radius:5px;padding:12px 14px;
  font-size:13px;color:var(--steel)}
.sem-candidata b{display:block;color:var(--ink);margin-bottom:2px}

.filtro-de-itens{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;
  margin-bottom:14px}
.itens-da-conciliacao>.filtro-de-itens{padding:12px 16px 0;margin:0}
.campo-do-filtro{display:flex;flex-direction:column;flex:1 1 200px;min-width:0}
.campo-do-filtro label{font-size:12px;color:var(--steel);font-weight:500;margin-bottom:4px}
.filtro-de-itens p.sub{flex-basis:100%;margin:0}
.filtro-de-itens input[type="text"],
.filtro-de-itens select{font:inherit;padding:8px 10px;
  border:1px solid var(--line);border-radius:4px}

.item-da-nota{border:1px solid var(--line);border-radius:5px;padding:12px 14px;
  margin-bottom:12px}
.item-cabecalho{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:flex-start}
.item-produto{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px}
.item-produto h3{margin:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.item-numero{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  min-width:110px}
.item-numero .v{font-weight:600}
.explicacao-do-item{margin:10px 0 0;padding:8px 10px;border-left:3px solid var(--amber);
  background:#FDF8F0;font-size:12.5px}
.equivalencia-vigente{margin:8px 0 0}

/* Uma "Venda utilizada" por padrão: rótulo visível, a venda à esquerda e a
   quantidade vinculada ao lado; em largura estreita as duas empilham. */
.vendas-do-item{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.venda-utilizada{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px 10px;
  align-items:end}
.venda-utilizada label{display:block;font-size:12px;color:var(--steel);
  font-weight:500;margin-bottom:4px}
.venda-utilizada select,
.venda-utilizada input{font:inherit;padding:7px 9px;border:1px solid var(--line);
  border-radius:4px;width:100%;max-width:100%}
.btn-dividir{align-self:flex-start}

/* Equivalência e ressalva: opções do item, em segundo plano, num disclosure
   nativo com o mesmo marcador ▸/▾ da `.secao-recolhivel`. */
.opcao-do-item{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.opcao-do-item>summary{cursor:pointer;font-size:12.5px;font-weight:600;
  color:var(--ink);list-style:none;display:flex;gap:6px;align-items:baseline;
  flex-wrap:wrap}
.opcao-do-item>summary::-webkit-details-marker{display:none}
.opcao-do-item>summary::before{content:"▸";font-size:11px;color:var(--steel)}
.opcao-do-item[open]>summary::before{content:"▾"}
.opcao-do-item>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.opcao-do-item .resumo{font-weight:400;color:var(--steel)}
.opcao-equivalencia .equivalencia-slot{margin-top:8px;padding:10px 12px;
  border:1px solid #C9D8E6;border-radius:5px;background:#F4F8FB}
.equivalencia-slot .campo-da-venda{flex:1 1 280px;min-width:0}
.equivalencia-slot .campo-da-quantidade{flex:0 1 150px}
.opcao-ressalva .excecao-ao-perfil{margin-top:8px}
.opcao-ressalva .excecao-ao-perfil>label[for]{display:block;font-size:12px;
  color:var(--steel);font-weight:500;margin:8px 0 4px}
.marcar-ressalva{display:flex;gap:8px;align-items:center;font-size:13px}
.marcar-ressalva input{width:auto}

/* A carteira é apoio: recolhida por padrão, a tabela rola dentro dela. */
.carteira-de-vendas{margin-bottom:12px}
.carteira-de-vendas .tabela-rolavel{margin-top:6px}

/* "Incluir venda de outro CNPJ": no estado inicial só o botão; aberto, o bloco
   âmbar da exceção, explícita e auditada. */
.excecao-de-outro-cnpj{margin:0 0 16px}
.excecao-de-outro-cnpj>summary{list-style:none;display:inline-flex;align-items:center}
.excecao-de-outro-cnpj>summary::-webkit-details-marker{display:none}
.excecao-de-outro-cnpj>summary::before{content:"+";margin-right:6px;
  color:var(--amber);font-weight:700}
.excecao-de-outro-cnpj[open]>summary::before{content:"−"}
.corpo-da-excecao{margin-top:10px;border:1px solid var(--amber);
  border-left:3px solid var(--amber);background:#FDF8F0;border-radius:5px;
  padding:10px 12px}
.corpo-da-excecao>p.sub{margin:0}
.excecao-slot .campo-da-venda{flex:1 1 240px;min-width:0}
.excecao-slot .campo-da-venda input{width:100%}

/* O fechamento: os dois números em destaque, a frase de operação e as ações
   logo abaixo — "Revisar conciliação" é a principal. */
.numeros-do-fechamento{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px}
.numero-do-fechamento{border:1px solid var(--line);border-radius:5px;padding:12px 14px;
  display:flex;flex-direction:column;gap:4px;min-width:0}
.numero-do-fechamento .valor{font-size:22px;font-weight:700;color:var(--ink);
  overflow-wrap:anywhere}
.numero-do-fechamento.destaque{box-shadow:inset 3px 0 0 var(--amber)}
.numero-do-fechamento.fecha{border-color:#BFD9CB;background:#F3FAF6;
  box-shadow:inset 3px 0 0 var(--green)}
.situacao-do-fechamento{font-size:13px;font-weight:600;color:#8A5A0B}
.numero-do-fechamento.fecha .situacao-do-fechamento{color:var(--green)}
/* A quantidade excluída por ressalva: âmbar da exceção, à parte do vinculado. */
.numero-do-fechamento.ressalvado{border-color:#EBD5A8;background:#FDF8F0}

/* Números sem as setas nativas (homologação do D3-5R-A1): o campo continua
   `type="number"` — `min`, `step`, validação e teclado —, só a aparência do
   incremento some. */
body.pagina-conciliar-nota input[type="number"]{-moz-appearance:textfield;appearance:textfield}
body.pagina-conciliar-nota input[type="number"]::-webkit-outer-spin-button,
body.pagina-conciliar-nota input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.observacao-do-rascunho{margin-top:12px;font-size:13px}
.observacao-do-rascunho>summary{cursor:pointer;color:var(--steel)}
.observacao-do-rascunho>summary:focus-visible{outline:2px solid var(--amber);
  outline-offset:2px}
.observacao-do-rascunho textarea{margin-top:6px}
.acoes-do-fechamento{margin-top:14px}
/* A causa de a distribuição desenhada ainda não fechar (D3-5R-B), logo abaixo
   das ações, no âmbar da explicação do item. Desde a homologação do D3-5R-C1 é
   informação, não trava: `Revisar conciliação` fica sempre disponível e
   confere o que estiver na tela no momento do clique. */
.causa-do-primario{margin:10px 0 0;padding:8px 10px;border-left:3px solid var(--amber);
  background:#FDF8F0;font-size:12.5px;max-width:80ch}

/* O estado de leitura da nota conciliada (D3-5R-B, handoff 4.5): a mesma faixa
   da NF do cliente, a confirmação, as parcelas vigentes, as ressalvas com as
   duas pessoas e as equivalências criadas — sem formulário. */
.leitura-da-conciliacao .tabela-parcelas .tag{margin-left:4px}
.ressalva-confirmada:first-child{margin-top:0;padding-top:0;border-top:0}
.ressalva-confirmada p{margin:4px 0 0}
.ressalva-confirmada+.ressalva-confirmada{margin-top:10px}

@media (max-width:560px){
  .venda-utilizada{grid-template-columns:1fr}
  .candidata-acao{flex-basis:100%}
  .numero-do-fechamento .valor{font-size:19px}
  .acoes-do-fechamento{flex-direction:column-reverse;align-items:stretch}
  .acoes-do-fechamento .btn{width:100%;justify-content:center}
}

.tabela-carteira th,.tabela-parcelas th{font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--steel);text-align:left;padding:6px 8px;
  border-bottom:1px solid var(--line)}
.tabela-carteira td,.tabela-parcelas td{padding:7px 8px;
  border-bottom:1px solid var(--line);font-size:12.5px}
.tabela-carteira th.num,.tabela-carteira td.num,
.tabela-parcelas th.num,.tabela-parcelas td.num{text-align:right}

/* ═══════════════════════════════════════════════════════════════════════════
   Detalhe canônico da NF do cliente — Pacote D3-6A (handoff D3, telas 5.1 a 5.7)

   Reusa `.ofbar`, `.card.titulo-escuro`, `.detail-grid`, `.chave-com-copia`,
   `.item-fiscal`, `.excecao-ao-perfil`, `.memoria-monetaria`,
   `.secao-recolhivel` e `.registro-do-historico`. O que é novo é só isto: o
   item da nota com as parcelas aninhadas, onde cada item foi alocado. Nenhuma
   cor nova: as famílias `.t-*`, o âmbar de exceção (`#EBD5A8`/`#FDF8F0`) e o
   bordô de bloqueio (`#E8CBC8`) já existem. Tudo reflui por `flex-wrap`, sem
   cabeçalho de coluna a esconder e sem rolagem horizontal.

   A composição dos cinco saldos saiu deste detalhe no corretivo de homologação
   (RA-227), e com ela `.cinco-valores`, `.linha-de-saldo` e
   `.composicao-da-linha`: os cinco valores respondem à venda da CR, e a visão
   inversa é do D3-6D.
   ═══════════════════════════════════════════════════════════════════════════ */
body.fiscal .detalhe-da-nota-do-cliente{display:block}
/* A nota cancelada permanece inteira e **atenuada** (§5.14, mockup 5.5). O
   atenuado é dos blocos de conteúdo: a causa, no topo, e as ações do
   cabeçalho, fora deste contêiner, continuam em cor plena. */
body.fiscal .detalhe-da-nota-do-cliente--cancelada>.card,
body.fiscal .detalhe-da-nota-do-cliente--cancelada>.secao-recolhivel{opacity:.72}

body.fiscal .item-do-cliente{display:flex;flex-direction:column;gap:8px}
body.fiscal .item-do-cliente__cabeca{display:flex;flex-wrap:wrap;gap:6px 16px;
  align-items:baseline}
body.fiscal .item-do-cliente__cabeca .item-fiscal__produto{flex:1 1 260px}
body.fiscal .item-do-cliente__quantidade{flex:none;font-size:13px}
body.fiscal .item-do-cliente--ressalva{border-color:#EBD5A8}
body.fiscal .item-do-cliente--sem-cobertura{border-color:#E8CBC8}
body.fiscal .item-do-cliente .excecao-ao-perfil{margin-top:0}

body.fiscal .parcelas-do-item{list-style:none;margin:0;padding:10px;
  background:#FAFAF8;border:1px solid var(--line);border-radius:4px;
  display:flex;flex-direction:column;gap:6px}
body.fiscal .parcela-do-item{display:flex;flex-wrap:wrap;gap:4px 12px;
  align-items:baseline;background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:7px 10px;font-size:12.5px}
body.fiscal .parcela-do-item__origem{flex:1 1 260px;min-width:0}
body.fiscal .parcela-do-item__origem .secundaria{display:block;margin-top:2px}
body.fiscal .parcela-do-item .tag{flex:none}

body.fiscal .nota-do-item{margin:0;padding:8px 10px;font-size:12px;
  border-top:1px dashed var(--line);color:#7A5510;background:#FDF8F0}
body.fiscal .nota-do-item--indicio{color:var(--steel);background:#FAFAF8}

/* ═══════════════════════════════════════════════════════════════════════════
   Acabamento da consulta da NF do cliente — Pacote D3-6B (handoff D3, telas
   1.6 a 1.8 e 5.8)

   Reusa `.secao-recolhivel` (o bloco de rascunhos e as informações
   complementares), `.btn.mini`, `.tag`, `.secundaria` e `.alert.info`. O que é
   novo é só isto, sem cor nova: a referência da NF de venda na coluna da fila —
   o selo mono do handoff, que é link — e o texto livre do XML, que preserva as
   quebras de linha. Tudo reflui por `flex-wrap`.
   ═══════════════════════════════════════════════════════════════════════════ */
body.fiscal .refs-de-venda{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
body.fiscal a.ref-da-venda{font-family:var(--mono);font-size:11.5px;line-height:1.4;
  background:var(--paper);border:1px solid var(--line);border-radius:3px;
  padding:2px 6px;white-space:nowrap;text-decoration:none;color:var(--ink)}
body.fiscal a.ref-da-venda:hover{border-color:var(--steel)}
body.fiscal a.ref-da-venda:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
body.fiscal a.ref-da-venda--mais{font-weight:600;color:var(--steel);background:var(--card)}

body.fiscal .rascunhos-da-conciliacao>.body{display:flex;flex-direction:column;gap:10px}
body.fiscal .rascunho-em-aberto{display:flex;gap:6px 12px;align-items:center;
  flex-wrap:wrap;font-size:13px}
body.fiscal .rascunho-em-aberto__nota{flex:1 1 300px;min-width:0}
body.fiscal .rascunho-em-aberto__nota .secundaria{display:block;font-size:11.5px;margin-top:2px}
body.fiscal .rascunho-em-aberto>.btn{flex:none}
body.fiscal .rodape-dos-rascunhos{display:flex;justify-content:space-between;gap:6px 12px;
  flex-wrap:wrap;align-items:center;padding-top:4px;font-size:11.5px;color:var(--steel)}
body.fiscal .rodape-dos-rascunhos>span{flex:1 1 300px;min-width:0}

body.fiscal .texto-livre-do-xml{white-space:pre-wrap;overflow-wrap:anywhere;
  font-size:13px;line-height:1.5}

/* ═══════════════════════════════════════════════════════════════════════════
   Telas dos comandos do D3-4 — Pacote D3-6C (handoff D3, telas 5.9, 6.1–6.5 e
   8.1–8.5)

   A correção reusa a marcação da conciliação (`.vendas-do-item`,
   `.venda-utilizada`, `.excecao-ao-perfil`, `.marcar-ressalva`) e as revisões
   reusam as do D2-7 (`.itens-fiscais` com `.antes-riscado`, `.conferencias`,
   `.acoes-da-revisao`). O que é novo é só isto, sem cor nova: a escolha do
   resultado do encerramento, que o handoff desenha como cartão com a
   explicação, e o endereço da confirmação que o responsável fiscal encaminha.
   ═══════════════════════════════════════════════════════════════════════════ */
body.fiscal .escolhas-do-resultado{border:0;margin:0 0 14px;padding:0;
  display:flex;flex-direction:column;gap:8px;min-width:0}
body.fiscal .escolhas-do-resultado legend{font-size:12px;color:var(--steel);
  font-weight:500;margin-bottom:6px;padding:0}
body.fiscal .escolha-do-resultado{display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--line);border-radius:5px;padding:11px 13px;font-size:13px;
  cursor:pointer}
body.fiscal .escolha-do-resultado input{width:auto;flex:none;margin-top:3px}
body.fiscal .escolha-do-resultado .secundaria{display:block;margin-top:2px}
body.fiscal .endereco-da-proposta{width:100%;font-family:var(--mono);font-size:12px;
  padding:7px 9px;border:1px solid var(--line);border-radius:4px;
  background:var(--paper);color:var(--ink)}
/* Corretivo da revisão cruzada do D3-6C: os números da correção — quantidade
   vinculada, "Por" e "Equivale a" — sem as setas nativas, como os da
   conciliação (homologação do D3-5R-A1). O campo continua `type="number"`, com
   `min`, `step` e o Enter seguro da casca; só a aparência do incremento some. */
body.pagina-corrigir-conciliacao input[type="number"]{-moz-appearance:textfield;appearance:textfield}
body.pagina-corrigir-conciliacao input[type="number"]::-webkit-outer-spin-button,
body.pagina-corrigir-conciliacao input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Visão inversa da conciliação — Pacote D3-6D (handoff D3, telas 7.1–7.3).
   O pedido reusa a lista das NFs de venda (`.notas-do-pedido`), e o saldo da NF
   de venda reusa a tabela da carteira da conciliação (`.tabela-carteira`), com os
   mesmos cinco valores. Novo é só o respiro da linha de consumo, que pertence à
   linha de venda logo acima e por isso não tem borda própria. */
body.fiscal .saldo-por-linha .consumo-da-linha td{padding-top:0;font-size:12px;
  color:var(--steel);border-top:0}

/* Equivalências de produtos — Pacote D3-6E (handoff D3, telas 9.1–9.8).
   A lista e o histórico reusam `table.itens-fiscais`, que abaixo de 880px já
   reflui em blocos com o rótulo de cada valor; o antes/depois reusa a mesma
   tabela e as conferências. Novos são só as ações da linha lado a lado, a grade
   dos quatro campos da correção e a transição `ativa hoje → nova ao confirmar`. */
body.fiscal .acoes-da-equivalencia{display:flex;gap:6px;flex-wrap:wrap}
body.fiscal .campos-da-equivalencia{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
body.fiscal .transicao-de-versao{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
body.fiscal .transicao-de-versao__lado{flex:1 1 220px;border:1px solid var(--line);
  border-radius:5px;padding:10px 12px}
body.fiscal .transicao-de-versao__lado .k{font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--steel);font-weight:600}
body.fiscal .transicao-de-versao__lado .v{font-size:15px;font-weight:600;margin:4px 0}
body.fiscal .transicao-de-versao__seta{font-size:18px;color:var(--steel)}

.excecao-slot{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;
  margin-top:10px}
.excecao-slot label{display:block;font-size:12px;color:var(--steel);
  font-weight:500;margin-bottom:4px}
.excecao-slot input{font:inherit;padding:7px 9px;border:1px solid var(--line);
  border-radius:4px}

/* A faixa âmbar de "outro CNPJ incluído" (achado 2, RA-204): mesma paleta de
   `.alert.warn`, só com espaçamento próprio entre as vendas listadas. */
.faixa-excecao-cnpj p.sub{margin:4px 0}

/* Cada venda já incluída (achado residual, percurso explícito de "Incluir
   venda de outro CNPJ"): a linha e o botão "Remover a inclusão" lado a lado. */
.excecao-incluida{display:flex;gap:10px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;margin:6px 0}
.excecao-incluida p.sub{margin:0;flex:1 1 auto}

/* O bloco de nova equivalência dentro de cada item (achado 3, RA-205): mesmo
   ritmo de rótulo/campo do `.excecao-slot`. Desde a RA-221 o produto e a
   unidade da CR são uma escolha entre as linhas de venda da carteira, num
   `<select>` com o mesmo acabamento dos campos numéricos. */
.equivalencia-slot{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.equivalencia-slot h3{flex-basis:100%;margin:0;font-size:12.5px}
.equivalencia-slot>p.sub{flex-basis:100%;margin:0 0 4px}
.equivalencia-slot label{display:block;font-size:12px;color:var(--steel);
  font-weight:500;margin-bottom:4px}
.equivalencia-slot select,
.equivalencia-slot input[type="text"],
.equivalencia-slot input[type="number"]{font:inherit;padding:7px 9px;
  border:1px solid var(--line);border-radius:4px}
.equivalencia-slot input[type="number"]{width:80px}

/* O alcance da escolha (decisão 13.52): `Usar somente neste item` ou `Usar
   neste item e atualizar a equivalência padrão`. Ocupa a linha inteira porque
   é uma decisão, não um campo ao lado dos outros; rádio nativo, sem cor nova.
   `.aviso-da-troca` diz, em texto, o que a confirmação fará com o padrão —
   abaixo de tudo, para ser a última coisa lida antes de revisar. */
.escopo-do-destino{flex-basis:100%;margin:4px 0 0;padding:10px 12px;border:1px
  solid var(--line);border-radius:6px;background:var(--card)}
.escopo-do-destino legend{padding:0 6px;font-size:12px;color:var(--steel);
  font-weight:600}
.escopo-do-destino .escolha-do-escopo{display:flex;gap:8px;align-items:center;
  font-size:12.5px;margin-bottom:4px}
.escopo-do-destino .escolha-do-escopo input[type="radio"]{margin:0}
.escopo-do-destino>p.sub{margin:4px 0 0}
.equivalencia-slot .aviso-da-troca{flex-basis:100%;margin:8px 0 0;
  font-size:12.5px;line-height:1.5}

.colunas-de-revisao{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lista-de-conferencia{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:6px;font-size:12.5px}
.lista-de-conferencia li::before{content:"✓ ";color:#256B43;font-weight:700}

@media (max-width:820px){
  .colunas-de-revisao{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACERVO HISTÓRICO DE PEDIDOS — consulta e detalhe (Pacote H3)
   Decisões 13.27 e 13.28; §5.25 do guia visual; handoff
   `fiscal_pedidos_historicos/handoff/`.

   Sem componente novo: as duas telas vestem `body.fiscal` e reusam a casca
   modular, o cabeçalho local sticky, os cards sequenciais, as famílias de
   `.tag` e os alertas já aprovados. O que entra aqui é o que só existe no
   acervo — o selo de proveniência, o bloco por linha, a moldura do texto
   original e a tabela de resultados própria.
   ═══════════════════════════════════════════════════════════════════════════ */

/* O selo cinza de proveniência (`--steel` sobre `#ECECEA`, a família `.t-fim`
   já homologada). Cinza porque é proveniência, e não destaque nem erro; sem
   quebra de linha porque ele fica colado ao título, no fim de uma frase. */
.selo-do-acervo{white-space:nowrap}

/* `.alert.info` nasceu dentro de `body.pagina-detalhe-of` e foi repetida a cada
   tela que precisou dela. Aqui vale o mesmo: escopo nas duas páginas do acervo,
   e nenhum valor de cor novo — é o par `#2C5A80` sobre `#EAF1F7` do guia. As
   duas telas da manutenção (H4) entraram na mesma regra. */
body.pagina-pedidos-historicos .alert.info,
body.pagina-pedido-historico .alert.info,
body.pagina-manter-linha-historica .alert.info,
body.pagina-revisar-manutencao-historica .alert.info{background:#EAF1F7;
  border:1px solid #C7D6E3;color:#2C5A80}

/* --- Consulta ---------------------------------------------------------- */

/* A mesma largura das duas listagens do Fiscal: oito colunas não cabem em
   1180px sem espremer razão social e estado. */
body.pagina-pedidos-historicos main{max-width:1600px}

/* O selo fica ao lado do título, na linha da `.toolbar`. */
body.pagina-pedidos-historicos .toolbar h1{display:flex;align-items:center;
  gap:10px;flex-wrap:wrap}

/* Rolar, nunca espremer (§7.2): oito colunas precisam desta largura para manter
   uma linha por pedido. O seletor acompanha o do pacote móvel transversal, que
   é mais específico que `table.pedidos-historicos` sozinho. */
body.fiscal .card .body>.tabela-rolavel>table.pedidos-historicos{min-width:1020px}
body.pagina-pedidos-historicos td.acoes{white-space:nowrap;text-align:right}

/* --- Detalhe ----------------------------------------------------------- */

/* Os dois cartões de valor usam a anatomia dos somatórios do pedido e da NF
   (`.destaques-do-resumo > .destaque`), e não mais um grid próprio — corretivo
   de homologação de 20/09/2026. Lá o bloco vem **depois** da decomposição e por
   isso abre com margem; aqui ele é o primeiro do corpo, e a margem viraria um
   degrau sob o cabeçalho do card. Mesma correção de `faixa-da-identificacao`. */
body.pagina-pedido-historico .body>.destaques-do-resumo:first-child{margin-top:0}
/* A ressalva fecha o card em texto secundário, não em caixa âmbar. */
body.pagina-pedido-historico .ressalva-dos-valores{margin:12px 0 0}

/* Uma linha da planilha é um bloco, e não uma linha de tabela: ela carrega
   produto, valores, documentos, remessas, texto original e observação, e
   espremer isso em colunas seria ilegível em qualquer largura. */
body.pagina-pedido-historico .linha-historica{border:1px solid var(--line);
  border-radius:6px;padding:12px 14px;margin-bottom:12px;background:#fff}
body.pagina-pedido-historico .linha-historica:last-child{margin-bottom:0}
body.pagina-pedido-historico .linha-historica__topo{display:flex;gap:12px;
  align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid #EFF0ED;margin-bottom:10px}
body.pagina-pedido-historico .linha-historica__produto .v{font-weight:600}
body.pagina-pedido-historico .linha-historica__situacao{text-align:right}
body.pagina-pedido-historico .linha-historica .k{font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--steel);
  font-weight:600}
body.pagina-pedido-historico .linha-historica .detail-grid{margin-bottom:10px}

body.pagina-pedido-historico .remessas-da-linha{margin-bottom:10px}
body.pagina-pedido-historico .lista-de-remessas{list-style:none;margin:4px 0 0;
  padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
body.pagina-pedido-historico .lista-de-remessas li{display:flex;gap:6px;
  align-items:baseline}
body.pagina-pedido-historico .cobertura{display:flex;gap:8px;align-items:center;
  flex-wrap:wrap;margin-top:8px}

/* Moldura tracejada e mono: o texto livre da planilha é preservado **como
   texto**, e a moldura é o que diz isso à vista. */
body.pagina-pedido-historico .texto-original,
body.pagina-acao-excepcional-historica .texto-original{border:1px dashed var(--line);
  border-radius:5px;background:#FCFCFB;padding:8px 10px;margin-bottom:10px}
body.pagina-acao-excepcional-historica .texto-original .k{font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--steel)}
body.pagina-pedido-historico .texto-original .mono,
body.pagina-acao-excepcional-historica .texto-original .mono{font-size:12px;
  white-space:pre-wrap;margin-top:2px}

body.pagina-pedido-historico .origem-da-linha{border-top:1px solid #EFF0ED;
  padding-top:8px}

/* --- Corte estreito: a tabela de resultados vira cartões ---------------- */
/* Handoff: "a tabela de resultados vira cartões, um por pedido, com rótulo
   visível em cada valor e `Abrir pedido` de 44px". É a mesma troca que as
   tabelas do D2 e do D3 já fazem — `thead` some e o rótulo volta junto do dado
   por `data-rotulo` (§7.3: a única ocultação admitida é o cabeçalho, cujo texto
   reaparece em cada célula). Nenhum dado, coluna ou ação sai. */
@media(max-width:560px){
  body.pagina-pedidos-historicos .card .body>.tabela-rolavel>table.pedidos-historicos{
    min-width:0}
  body.pagina-pedidos-historicos table.pedidos-historicos,
  body.pagina-pedidos-historicos table.pedidos-historicos tbody{display:block}
  body.pagina-pedidos-historicos table.pedidos-historicos thead{display:none}
  body.pagina-pedidos-historicos table.pedidos-historicos tbody tr{display:block;
    border:1px solid var(--line);border-radius:6px;padding:12px 14px;
    margin-bottom:10px}
  body.pagina-pedidos-historicos table.pedidos-historicos tbody tr:last-child{
    margin-bottom:0}
  body.pagina-pedidos-historicos table.pedidos-historicos td{display:block;
    padding:0 0 8px;border:0}
  body.pagina-pedidos-historicos table.pedidos-historicos td[data-rotulo]::before{
    content:attr(data-rotulo);display:block;font-size:10px;
    text-transform:uppercase;letter-spacing:.08em;color:var(--steel);
    font-weight:600}
  body.pagina-pedidos-historicos table.pedidos-historicos td[data-rotulo=""]::before{
    content:none}
  body.pagina-pedidos-historicos td.acoes{text-align:left;padding-bottom:0}
  /* Alvo de toque do corte estreito (§7.3). */
  body.pagina-pedidos-historicos .abrir-pedido{display:block;min-height:44px;
    line-height:26px;text-align:center}

  body.pagina-pedido-historico .linha-historica__situacao{text-align:left}
}

/* === Acervo histórico — manutenção da linha (Pacote H4) ==================== */
/* Capturas 05 e 06 do handoff `fiscal_pedidos_historicos`, sobre os mesmos
   componentes: cards sequenciais com um cabeçalho escuro por tela, campos
   `.f` na grade de 12, controle segmentado do Fiscal e alertas já aprovados.
   Nada aqui é componente novo — é arranjo, escopado nas duas páginas. */

/* No detalhe: a origem da linha ganha, à direita, `Manter esta linha` para
   quem mantém o acervo. */
body.pagina-pedido-historico .origem-da-linha{display:flex;align-items:center;
  justify-content:space-between;gap:8px;flex-wrap:wrap}

body.pagina-manter-linha-historica .titulo-da-manutencao,
body.pagina-revisar-manutencao-historica .titulo-da-manutencao{display:flex;
  align-items:center;gap:10px;flex-wrap:wrap}

/* Nota ao lado do campo, alinhada à base dele como na captura 05. */
body.pagina-manter-linha-historica .nota-do-campo{align-self:end;margin:0}
body.pagina-manter-linha-historica .campo-do-embarque,
body.pagina-manter-linha-historica .campo-do-motivo{margin-top:14px}

/* Cada remessa numa moldura própria: número, quantidade e `×`. */
body.pagina-manter-linha-historica .remessa-editavel{display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:10px;
  align-items:end;border:1px solid var(--line);border-radius:6px;
  padding:10px 12px;margin-bottom:10px}
body.pagina-manter-linha-historica .remessa-editavel__remover{min-width:36px;
  min-height:36px;padding:0 10px;font-size:16px;line-height:1}
body.pagina-manter-linha-historica .card .body>.note{margin:4px 0 10px}

/* Revisão: rótulo pequeno em caixa alta, antes riscado, depois em verde. */
body.pagina-revisar-manutencao-historica .quadro-da-manutencao{padding:0}
body.pagina-revisar-manutencao-historica .mudanca-da-linha{padding:12px 18px;
  border-bottom:1px solid #EFF0ED}
body.pagina-revisar-manutencao-historica .mudanca-da-linha:last-child{
  border-bottom:0}
body.pagina-revisar-manutencao-historica .mudanca-da-linha .k{font-size:10px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--steel);
  margin-bottom:4px}
body.pagina-revisar-manutencao-historica .mudanca-da-linha .v{display:flex;
  flex-wrap:wrap;gap:6px;align-items:baseline;overflow-wrap:anywhere}
body.pagina-revisar-manutencao-historica .mudanca-da-linha .antes{
  color:var(--steel);text-decoration:line-through}
body.pagina-revisar-manutencao-historica .mudanca-da-linha .seta{
  color:var(--steel)}
body.pagina-revisar-manutencao-historica .mudanca-da-linha .depois{
  color:var(--green);font-weight:600}
body.pagina-revisar-manutencao-historica .actions form{margin:0}

@media(max-width:560px){
  /* Corte estreito: a remessa empilha, e os alvos de toque têm 44px (§7.3). */
  body.pagina-manter-linha-historica .remessa-editavel{
    grid-template-columns:minmax(0,1fr) auto}
  body.pagina-manter-linha-historica .remessa-editavel__numero{
    grid-column:1 / -1}
  body.pagina-manter-linha-historica .remessa-editavel__remover,
  body.pagina-manter-linha-historica .actions .btn,
  body.pagina-revisar-manutencao-historica .actions .btn,
  body.pagina-pedido-historico .manter-linha{min-height:44px;min-width:44px}
  body.pagina-manter-linha-historica .nota-do-campo{align-self:start}
  body.pagina-revisar-manutencao-historica .mudanca-da-linha{padding:12px 14px}
}

/* === Acervo histórico — encerramentos (Pacote H5) ======================= */
/* Captura 07 e as decisões posteriores a ela. As duas telas da ação
   excepcional herdam as classes de página da manutenção (formulário e
   revisão), e o que está aqui é só o que é próprio: o bordô da exceção, as
   ações ao pé da linha e o bloco de consequência. Nenhuma cor nova — o bordô
   `#8A3F37` é o do handoff e já está homologado (§5.25). */

/* `Encerrar sem embarque` parece exceção: texto bordô sobre o botão comum. */
body.fiscal .btn.excepcional,body.fiscal .btn.excepcional:visited{
  color:#8A3F37;border-color:#D9C3C0;background:#fff}
body.fiscal .btn.excepcional:hover{background:#F3E7E6}

/* Até três ações ao pé da linha, sem empurrar a origem para fora. */
body.pagina-pedido-historico .acoes-da-linha{display:flex;flex-wrap:wrap;
  gap:8px;justify-content:flex-end}

/* Consequência: rótulo à esquerda, antes → depois à direita (captura 07). */
body.fiscal .consequencia__linha{display:flex;gap:12px;align-items:baseline;
  flex-wrap:wrap;padding:8px 0;border-bottom:1px solid #EFF0ED}
body.fiscal .consequencia__linha:last-of-type{border-bottom:0}
body.fiscal .consequencia__linha .k{min-width:170px;color:var(--steel)}
body.fiscal .consequencia__linha .v{display:flex;gap:6px;flex-wrap:wrap;
  align-items:baseline;overflow-wrap:anywhere}
body.fiscal .consequencia__linha .antes{color:var(--steel);
  text-decoration:line-through}
body.fiscal .consequencia__linha .seta{color:var(--steel)}
body.fiscal .consequencia__linha .depois{font-weight:600}
body.fiscal .consequencia>.note{margin-top:8px}

/* Motivo em branco: borda vermelha e mensagem colada ao campo (estado 4.2). */
body.pagina-acao-excepcional-historica .f.com-erro textarea{
  border-color:var(--red)}

@media(max-width:560px){
  body.pagina-pedido-historico .acoes-da-linha{justify-content:flex-start;
    width:100%}
  body.fiscal .consequencia__linha .k{min-width:0;width:100%}
}

/* ======================================================================= */
/* D4-4 · Preparação da remessa (decisões 13.20 e 13.23)                   */
/* ======================================================================= */
/* Nenhum valor de cor, raio, borda ou família nova: tudo abaixo usa as
   variáveis e os componentes que D1–D3 homologaram. O cabeçalho escuro com o
   acento âmbar é o `.card.titulo-escuro` de sempre, sem variante — o que estas
   regras acrescentam são arranjos de grade que as sete seções do handoff pedem,
   e nada mais.

   Desktop-first, como o resto do sistema: a leitura confortável começa em
   1180px, e os cortes abaixo garantem que nada quebre em 820 e em 390 — as
   grades refluem em coluna única e as tabelas largas rolam por
   `.tabela-rolavel`, que já existe. */

/* A faixa de identidade, comum às telas da preparação. `P-AAAA-NNNN` é
   identificador **visual** e vai em monoespaçada como todo dado fiscal. */
body.fiscal .identidade-da-preparacao{display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;margin-bottom:14px;font-size:12.5px}
body.fiscal .identidade-da-preparacao .identificador{font-size:15px;
  font-weight:600}

/* Card 1 · as quatro partes, cada uma com rótulo, nome e procedência. Quatro
   colunas em desktop; duas em 820; uma em 390. */
body.fiscal .partes-da-remessa{display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:5px;overflow:hidden}
body.fiscal .partes-da-remessa .parte{background:#fff;padding:10px 12px}
body.fiscal .partes-da-remessa .k{display:block;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--steel);
  font-weight:600}
body.fiscal .partes-da-remessa .v{display:block;font-size:14px;font-weight:600;
  margin-top:2px}
body.fiscal .partes-da-remessa .procedencia{font-size:11.5px;color:var(--steel);
  margin-top:3px}
body.fiscal .card.titulo-escuro .partes-da-remessa{border-color:var(--line)}

/* Os dois campos pesquisáveis do card 1, lado a lado a partir da largura de
   leitura confortável (handoff D4, card 1) e empilhados abaixo dela. `.f.ampla`
   sozinho ocuparia a linha inteira, e o handoff os desenha em par. */
body.fiscal .par-pesquisavel{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}

/* A faixa de metadados: contexto, fora da hierarquia das partes. */
body.fiscal .metadados-da-remessa{display:flex;gap:16px;flex-wrap:wrap;
  margin-top:12px;padding:8px 12px;background:#FAFAF8;
  border:1px solid var(--line);border-radius:5px;font-size:12px;
  color:var(--steel)}

/* A natureza de cada campo, dita no próprio rótulo: `derivado`, `corrigível`,
   `somente leitura`. É legenda, não valor — por isso o tom secundário. */
body.fiscal .natureza{font-weight:500;text-transform:none;letter-spacing:normal;
  font-size:11px;color:var(--steel)}
body.fiscal .card>h2 .natureza{color:#C3C9D0}

/* O valor que não se edita, com o mesmo acabamento do campo que se edita, para
   a leitura não tropeçar entre um e outro. */
body.fiscal .valor-derivado{padding:7px 9px;border:1px solid var(--line);
  border-radius:4px;background:#FAFAF8;font-size:13px;min-height:34px}

/* As duas grades de campos dos cards 1 e 6. */
body.fiscal .grade-dos-padroes,
body.fiscal .grade-dos-complementos{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;
  margin-top:12px}
body.fiscal .grade-dos-padroes .f input+input{margin-top:6px}

/* O infCpl original: integral e somente leitura (decisão 13.25). Preserva as
   quebras do texto do cliente, que é como ele chegou. */
body.fiscal .infcpl-original{padding:9px 11px;border:1px solid var(--line);
  border-radius:4px;background:#FAFAF8;font-size:12.5px;white-space:pre-wrap;
  max-height:220px;overflow:auto}

/* O texto final é uma **única linha lógica** (decisão 13.20): o campo e o
   derivado quebram por largura, nunca por conteúdo. `white-space:pre-wrap` seria
   errado aqui — não há quebra a preservar, e sugeri-la convidaria ao `Enter`. */
body.fiscal input.texto-final{font-family:var(--mono);font-size:12.5px}
body.fiscal .texto-final-derivado{margin-top:8px;padding:9px 11px;
  border:1px dashed var(--line);border-radius:4px;background:#FAFAF8;
  font-size:12px;color:var(--steel);overflow-wrap:anywhere}

/* Campos numéricos curtos dos itens e das parcelas. */
body.fiscal input.curto{width:110px}

/* A coluna de escolha da tela `Criar remessa`. */
body.fiscal table.notas th.escolha,
body.fiscal table.notas td.escolha{width:36px;text-align:center}

/* A caixa com rótulo na mesma linha — correção de padrões e divisão. */
body.fiscal .escolha-inline{display:inline-flex;gap:8px;align-items:center;
  font-size:12.5px;margin:6px 0}

/* Cada NF do cliente da composição, com o seu modo e as suas parcelas. */
/* `min-width:0`: o `fieldset` nasce com a largura mínima do conteúdo e
   cresceria com a tabela das parcelas, em vez de deixá-la rolar (13.34). */
body.fiscal .nota-da-composicao{border:1px solid var(--line);border-radius:5px;
  padding:10px 12px;margin-top:12px;min-width:0}
body.fiscal .nota-da-composicao>legend{font-size:12.5px;font-weight:600;
  padding:0 6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* O rastro dos fatos: uma linha por evento, com autor e instante. */
body.fiscal .rastro-da-preparacao{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:8px;font-size:12.5px}
body.fiscal .rastro-da-preparacao li{display:flex;gap:10px;flex-wrap:wrap;
  align-items:baseline;padding-left:12px;box-shadow:inset 2px 0 0 var(--line)}
body.fiscal .rastro-da-preparacao .rastro-rotulo{font-weight:600}
body.fiscal .rastro-da-preparacao .rastro-detalhe{color:var(--steel)}

/* A lista simples das NFs escolhidas, na leitura sem derivado. */
body.fiscal .lista-simples{margin:0 0 10px 18px;font-size:13px}

/* O e-mail do Cliente da CR, logo abaixo do nome (decisões 13.50, 1d, e 13.54).
   É o campo integral do Methos — vários endereços, vírgulas e, às vezes,
   quebras —, e por isso quebra em qualquer ponto em vez de esticar a parte. */
body.fiscal .email-do-cliente-da-cr{margin-top:3px;font-size:12.5px;
  overflow-wrap:anywhere;min-width:0}
body.fiscal .email-do-cliente-da-cr .rotulo-do-email{font-size:10.5px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--steel);
  font-weight:600;margin-right:6px}
body.fiscal .email-do-cliente-da-cr .ausencia-do-email{color:var(--steel)}

/* A prévia registra cinco partes: o Cliente da CR ocupa a linha inteira
   quando a grade cai para duas colunas, para não sobrar célula vazia. */
body.fiscal .partes-da-remessa.cinco-partes{grid-template-columns:repeat(5,minmax(0,1fr))}

/* O conflito de rascunho (decisão 13.55, item 6), dentro da NF que ele afeta. */
body.fiscal .alert.conflito-da-nota{margin:8px 0;display:block;font-size:12.5px}
body.fiscal .lista-simples .alert.conflito-da-nota{margin:6px 0 10px}

/* A NF que já está em outro rascunho, na tela `Criar remessa`. */
body.fiscal .nf-ocupada{font-size:12px;color:var(--steel);margin-top:3px}

/* A coluna `NFs do cliente` da fila: uma NF por linha, cada uma com o link. */
body.fiscal .lista-de-nfs{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:3px}
body.fiscal .lista-de-nfs .conflito-na-fila{display:block;font-size:11.5px;
  color:var(--steel)}

/* As ações no fim de uma tela de formulário. */
body.fiscal .acoes-da-tela{display:flex;gap:8px;flex-wrap:wrap;
  align-items:center;margin-top:16px}

/* A previa da preparacao termina num botao so, alinhado a direita (decisao
   13.37): o card `Confirmar` saiu, e com ele a caixa que dava a borda. */
body.fiscal .acoes-da-tela.acoes-da-previa{justify-content:flex-end}

/* Uma acao que grava e um `<form>`, e o item flexivel passa a ser ele, e nao
   o botao dentro dele (decisao 13.39). Sem isto, a exclusao no corte estreito
   nao acompanhava `Cancelar` na largura inteira: a regra de 640px alcanca
   `.btn` filho direto, e o botao ali e neto. */
body.fiscal .acoes-da-tela>form{display:flex;margin:0}

/* A chave de acesso na tabela de referenciados: 44 dígitos que não podem
   esticar a tabela — quebram dentro da célula, como no detalhe da NF. */
body.fiscal table.notas td.chave{overflow-wrap:anywhere;max-width:26ch}

@media (max-width:1180px){
  body.fiscal .partes-da-remessa{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.fiscal .partes-da-remessa.cinco-partes{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.fiscal .partes-da-remessa.cinco-partes .parte-do-cliente{grid-column:1/-1}
  body.fiscal .par-pesquisavel{grid-template-columns:1fr}
}
@media (max-width:640px){
  body.fiscal .partes-da-remessa{grid-template-columns:1fr}
  body.fiscal .partes-da-remessa.cinco-partes{grid-template-columns:1fr}
  body.fiscal .grade-dos-padroes,
  body.fiscal .grade-dos-complementos{grid-template-columns:1fr}
  body.fiscal input.curto{width:100%}
  body.fiscal .acoes-da-tela .btn{flex:1 1 100%;text-align:center}
  body.fiscal .acoes-da-tela>form{flex:1 1 100%}
}

/* ======================================================================= */
/* D4-8 · As regras que faltavam aos ganchos da preparação (decisão 13.32)  */
/* ======================================================================= */
/* O D4-4 escreveu nos gabaritos dez nomes de bloco que a folha não conhecia —
   eles herdavam tudo de `.secao-recolhivel`, `table.notas` e `.alert`, e o
   contrato de `test_integracao_visual` os acusava como classes sem regra.
   Nenhuma regra abaixo redesenha: cada uma fixa, no próprio gancho, o
   espaçamento, o alinhamento ou a largura que o bloco já devia ter, com as
   variáveis e os valores que D1–D4 homologaram. */

/* As três seções recolhíveis que moram **dentro** de um card (padrões do
   Methos, divisão da composição e sugestões do infCpl): separadas do conteúdo
   de cima, sem somar ao fundo do card a margem de seção solta. */
body.fiscal .card .padroes-do-methos,
body.fiscal .card .divisao-da-remessa,
body.fiscal .card .sugestoes-do-infcpl{margin:12px 0 0}

/* Os referenciados ficam num `<details>`, fora do `.card .body` que dá a
   `table.notas` a largura mínima: sem esta regra a tabela era espremida em
   390px em vez de rolar. Mesma régua e mesmo mínimo das tabelas do Fiscal. */
body.fiscal .referenciados-da-remessa .tabela-rolavel>table.notas{min-width:920px}

/* A composição: a quantidade é a última coluna e não quebra. */
body.fiscal table.composicao-da-remessa td:last-child{white-space:nowrap}

/* Os itens da remessa: campos e justificativa crescem para baixo, e a linha
   alinha pelo topo para a descrição não flutuar no meio. */
body.fiscal table.itens-da-remessa td{vertical-align:top}

/* `Editar preparação` é escrita e vai por `POST`: o formulário fica na barra
   de ações, em linha com os botões, sem espaço próprio (decisão 13.35). */
body.fiscal .acao-em-linha{display:inline-flex;margin:0}

/* A tabela de itens da preparação rola dentro de si: os rótulos acessíveis
   (`.visualmente-oculto`, em posição absoluta) tinham o documento como bloco de
   contenção e escapavam do recorte, estourando a página em 390px (achado da
   inspeção do corretivo da homologação, decisão 13.34, já presente antes dele).
   Posicionar o contêiner rolável os prende a ele. Só nesta tela. */
body.pagina-preparacao .tabela-rolavel{position:relative}

/* D4-9 · O aviso do destinatário ainda não vinculado (decisão 13.50).
   `.alert` é `display:flex`, então cada filho vira coluna: o texto fica num
   bloco só — sem isso, a frase se reparte em colunas, como a homologação de
   `bf1d9a4` mostrou — e a ação, quando existe, é o segundo filho. Abaixo de
   720px o botão desce para a linha seguinte, alinhado à esquerda do texto,
   em vez de espremer a frase. */
body.pagina-preparacao .alert.aviso-do-destinatario{flex-wrap:wrap;column-gap:16px}
body.pagina-preparacao .alert.aviso-do-destinatario>div{flex:1 1 320px;min-width:0}
body.pagina-preparacao .alert.aviso-do-destinatario>form{flex:0 0 auto;margin:0;align-self:center}
@media (max-width:720px){
  body.pagina-preparacao .alert.aviso-do-destinatario>form{align-self:flex-start;margin-top:4px}
}

/* A confirmação excepcional da revisão: a caixa de confirmar fica na própria
   linha, abaixo do texto que ela confirma. */
body.fiscal .confirmacao-excepcional .escolha-inline{display:flex}

/* `Registrar embarque` (decisão 13.36): os componentes de `Registrar
   apontamento`, com a grade própria desta tela — data e transportadora lado a
   lado, observação na linha inteira. A mesma grade de 12 colunas de
   `.campos-apontamento`, e o mesmo colapso para uma coluna no corte estreito,
   que é onde `.data-com-calendario` e a caixa pesquisável deixariam de caber
   uma ao lado da outra. */
.campos-do-embarque{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.campos-do-embarque .f{display:flex;flex-direction:column;gap:5px;min-width:0}
.campos-do-embarque .f-saida{grid-column:1 / span 4}
.campos-do-embarque .f-transportadora{grid-column:5 / span 8}
.campos-do-embarque .f-observacao{grid-column:1 / span 12}
.campos-do-embarque .erro{color:var(--red);font-size:11.5px}
.campos-do-embarque textarea{width:100%}
@media (max-width:720px){
  .campos-do-embarque{grid-template-columns:1fr}
  .campos-do-embarque .f-saida,.campos-do-embarque .f-transportadora,
  .campos-do-embarque .f-observacao{grid-column:1}
}

/* A data da correcao do embarque (decisao 13.37): o mesmo campo compacto de
   `Registrar embarque`, que la ganha a medida da grade de 12 colunas e aqui,
   num card de campo unico, precisa dela por escrito - sem isto o `dd/mm/aaaa`
   ocuparia a largura inteira do card. */
.f-data-compacta{max-width:220px}
.f-data-compacta .data-com-calendario{width:100%}