/* 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:14px}
.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}

.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}
.lote-row td{background:#F7F8F6;padding:8px 12px 10px 160px}
@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}
  .lote-row td{padding-left:10px}
}

/* ------------------------------------------------------------------ */
/* 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)}

/* 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}
}

.lotes{display:flex;flex-direction:column;gap:10px}
.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}
/* Sem lote nenhum, a lista não ocupa espaço (Pacote 1A: área compacta). */
.lotes:empty{display:none}
/* Título e `+ Adicionar lote` na mesma linha (Pacote 1A). */
.lotes-cabecalho{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.lotes-cabecalho label{margin: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}

/* 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}

/* 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}

/* 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. */
.listagem a.lote-link,.listagem a.lote-link:visited,.listagem a.lote-link:active{
  font-family:var(--mono);font-weight:600;color:var(--amber);text-decoration:none}
.listagem a.lote-link:hover{color:#a8690f;text-decoration:none}
.listagem a.lote-link:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.listagem .secundaria{font-size:10.5px;color:var(--steel);margin-top:1px}
.listagem .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}
.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:10;overflow:hidden}
/* `white-space:nowrap` (pacote de responsividade): o menu é posicionado por
   `absolute` dentro de uma célula de 56px, então sua largura é "encolher para
   caber" limitada pela célula — 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. */
.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}
/* O contêiner que rola na horizontal também recorta na vertical: na última
   linha o menu abre para cima, em vez de ficar escondido pela borda. */
.listagem tr:last-child .menu-de-acoes{top:auto;bottom:calc(100% + 2px)}

.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}

.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}
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
   originou um desdobramento) 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. */
body.pagina-detalhe-of .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{font-size:17px;font-weight:600}
body.pagina-detalhe-of .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. */
body.pagina-detalhe-of .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{content:none}
body.pagina-detalhe-of .menu-de-acoes-locais>summary.dots:hover{background:#F3F4F1;color:var(--ink)}
body.pagina-detalhe-of .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{left:auto;right:0;min-width:230px}
body.pagina-detalhe-of .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{color:var(--red)}

/* 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. */
body.pagina-detalhe-of .secao-recolhivel{background:var(--card);border:1px solid var(--line);
  border-radius:6px;margin-bottom:16px}
body.pagina-detalhe-of .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{display:none}
body.pagina-detalhe-of .secao-recolhivel>summary::before{content:"▸";font-size:11px;color:var(--steel)}
body.pagina-detalhe-of .secao-recolhivel[open]>summary::before{content:"▾"}
body.pagina-detalhe-of .secao-recolhivel[open]>summary{border-bottom:1px solid var(--line)}
body.pagina-detalhe-of .secao-recolhivel>summary:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
body.pagina-detalhe-of .secao-recolhivel .resumo{font-weight:400;color:var(--steel)}
body.pagina-detalhe-of .secao-recolhivel>.body{padding:12px 14px}
body.pagina-detalhe-of .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{gap: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}

  /* --- 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`): a gaveta
   existe **somente** abaixo de 1040px. Acima disso a topbar de seis rotas
   diretas continua exatamente como foi homologada — nenhum dropdown
   guarda-chuva entra no desktop.

   Por que 1040px: as seis rotas somam ~710px de texto e, com a marca (~160px) e
   o bloco do usuário (~150px), a linha precisa de ~1040px para caber. Reusar o
   corte de 820px que já existe foi considerado e recusado por Augusto: entre
   1040 e 820 a navegação volta a quebrar em duas linhas e a barra volta a comer
   altura — o problema que este pacote veio resolver, só numa faixa mais estreita
   de larguras (é o estado `1g` do handoff, desenhado a 900px).

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

   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 de 1040px 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:1040px){
  /* Casca desktop homologada: a gaveta e o seu véu não existem. */
  header>details.gaveta,header>.veu-da-gaveta{display:none}
}

@media(max-width:1039px){

  /* --- 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}
  header>a.brand{flex:1;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}
}

/* ------------------------------------------------------------------ */
/* 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}
body.pagina-cadastros .cadastros.pessoas{--colunas:34px 90px minmax(220px,1fr) 170px 200px 180px 140px;
  min-width:1080px}

.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}

/* --- 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}
.filtros-de-desenho>.linha{padding:18px}
.filtros-de-desenho .f.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.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}
}

/* ------------------------------------------------------------------ */
/* 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}
}