/* RECEBIMENTO BK — interface base.
   Mobile first, botoes grandes, alto contraste para uso no pátio. */

:root{
  --tinta:#16161a; --tinta-2:#474751; --tinta-3:#74747f;
  --fundo:#f4f4f6; --papel:#ffffff; --linha:#dededf;
  --acao:#c8102e; --acao-escura:#9d0c24;   /* vermelho operacional */
  --ok:#0f7b42; --ok-fraco:#e6f4ec;
  --alerta:#b23c00; --alerta-fraco:#fdeee6;
  --raio:12px; --sombra:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
  --toque:52px;
}
@media (prefers-color-scheme: dark){
  :root{ --tinta:#f2f2f4; --tinta-2:#b8b8c0; --tinta-3:#8a8a94;
         --fundo:#121215; --papel:#1c1c21; --linha:#33333a;
         --ok-fraco:#12291e; --alerta-fraco:#2a1a11; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------- topo ---------- */
.topo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; background:var(--papel); border-bottom:1px solid var(--linha);
  position:sticky; top:0; z-index:20;
}
.marca{font-weight:800; letter-spacing:-.4px; text-decoration:none; color:var(--tinta); font-size:15px}
.marca span{color:var(--acao)}
.topo-dir{display:flex; align-items:center; gap:12px}
.unidade{font-size:12px; color:var(--tinta-3); display:none}
@media(min-width:520px){ .unidade{display:inline} }
.menu{position:relative}
.menu summary{
  list-style:none; cursor:pointer; padding:8px 12px; border:1px solid var(--linha);
  border-radius:99px; font-size:14px; font-weight:600; min-height:40px;
  display:flex; align-items:center;
}
.menu summary::-webkit-details-marker{display:none}
.menu-caixa{
  position:absolute; right:0; top:calc(100% + 8px); background:var(--papel);
  border:1px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra);
  min-width:220px; padding:8px; z-index:30;
}
.menu-caixa a,.link-sair{
  display:block; width:100%; text-align:left; padding:12px; border-radius:8px;
  color:var(--tinta); text-decoration:none; font-size:15px; border:0; background:none;
  cursor:pointer; font-family:inherit; min-height:var(--toque);
}
.menu-caixa a:hover,.link-sair:hover{background:var(--fundo)}
.link-sair{color:var(--acao); font-weight:600; border-top:1px solid var(--linha); border-radius:0; margin-top:6px}
.menu-usuario{margin:4px 8px 10px; font-size:14px; font-weight:600; color:var(--tinta)}
.menu-usuario small{font-weight:400; color:var(--tinta-3)}

/* ---------- conteudo ---------- */
.conteudo{max-width:820px; margin:0 auto; padding:20px 16px 48px}
.titulo{font-size:24px; font-weight:750; letter-spacing:-.3px; margin:0 0 2px}
.subtitulo{margin:0 0 20px; color:var(--tinta-3); font-size:14px}
.rodape{text-align:center; color:var(--tinta-3); font-size:12px; padding:0 16px 28px}

/* ---------- avisos ---------- */
.aviso{padding:14px 16px; border-radius:var(--raio); margin-bottom:18px; font-size:15px}
.aviso-ok{background:var(--ok-fraco); color:var(--ok); border:1px solid rgba(15,123,66,.25)}
.aviso-neutro{background:var(--fundo); color:var(--tinta); border:1px solid var(--linha)}
.aviso-erro{background:var(--alerta-fraco); color:var(--alerta); border:1px solid rgba(178,60,0,.25)}

/* ---------- login ---------- */
.tela-login{display:flex; align-items:center; min-height:100dvh}
.tela-login .conteudo{width:100%}
.cartao-login{
  background:var(--papel); border:1px solid var(--linha); border-radius:16px;
  padding:32px 24px; box-shadow:var(--sombra); max-width:400px; margin:0 auto;
}
.marca-grande{font-size:26px; font-weight:800; letter-spacing:-.6px; margin:0; text-align:center}
.marca-grande span{color:var(--acao)}
.unidade-login{text-align:center; color:var(--tinta-3); font-size:13px; margin:6px 0 26px}

/* ---------- formularios ---------- */
.formulario{display:flex; flex-direction:column; gap:6px}
label{font-size:13px; font-weight:600; color:var(--tinta-2); margin-top:10px}
input,select{
  font:16px/1.4 inherit; color:var(--tinta); background:var(--papel);
  padding:13px 14px; border:1px solid var(--linha); border-radius:10px;
  min-height:var(--toque); width:100%;
}
input:focus,select:focus{outline:2px solid var(--acao); outline-offset:1px; border-color:transparent}
.botao{
  font:600 16px inherit; min-height:var(--toque); padding:14px 20px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; margin-top:18px; width:100%;
}
a.botao:not(.botao-pequeno){display:block; box-sizing:border-box; text-align:center; text-decoration:none}
.qtd-resumo{display:block; margin-top:6px; font-size:13px; color:var(--tinta-2); line-height:1.4}
.botao-principal{background:var(--acao); color:#fff; letter-spacing:.4px}
.botao-principal:hover{background:var(--acao-escura)}
.botao-secundario{background:var(--papel); color:var(--tinta); border-color:var(--linha)}
.botao-pequeno{width:auto; min-height:44px; padding:10px 16px; margin:0; font-size:14px;
  background:var(--papel); color:var(--tinta); border-color:var(--linha)}

/* ---------- lista de acoes (inicio) ---------- */
.lista-acoes{display:flex; flex-direction:column; gap:10px}
.acao{
  display:flex; flex-direction:column; gap:3px; text-decoration:none; color:var(--tinta);
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px; min-height:var(--toque); position:relative;
}
.acao:hover{border-color:var(--acao)}
.acao-titulo{font-weight:650; font-size:16px}
.acao-desc{font-size:13px; color:var(--tinta-3)}
.acao-futura{opacity:.55}
.acao-futura:hover{border-color:var(--linha)}
.etiqueta{
  position:absolute; top:14px; right:14px; font-size:11px; font-weight:600;
  color:var(--tinta-3); border:1px solid var(--linha); border-radius:99px; padding:3px 9px;
}

/* ---------- parametros ---------- */
.grupo{margin-bottom:28px}
.grupo h2{font-size:13px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--tinta-3); margin:0 0 10px}
.linha-param{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px; margin-bottom:10px;
}
.linha-param label{margin:0; font-size:15px; font-weight:650; color:var(--tinta)}
.ajuda{font-size:13px; color:var(--tinta-3); margin:4px 0 12px}
.param-campo{display:flex; gap:8px; align-items:center}
.param-campo input,.param-campo select{flex:1; min-width:0}
.param-rodape{font-size:12px; color:var(--tinta-3); margin:10px 0 0}

/* ---------- tabelas ---------- */
.tabela{width:100%; border-collapse:collapse; background:var(--papel);
  border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden; font-size:14px}
.tabela th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--tinta-3); padding:12px; border-bottom:1px solid var(--linha); font-weight:700;
}
.tabela td{padding:12px; border-bottom:1px solid var(--linha); vertical-align:top}
.tabela tr:last-child td{border-bottom:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px}
.nowrap{white-space:nowrap}
.detalhe{color:var(--tinta-2); font-size:13px}
.pilula{display:inline-block; font-size:11px; font-weight:600; padding:3px 9px;
  border-radius:99px; border:1px solid var(--linha); color:var(--tinta-3)}
.pilula-ok{color:var(--ok); border-color:rgba(15,123,66,.35); background:var(--ok-fraco)}
.bloco-novo{margin-top:20px}
.bloco-novo summary{list-style:none; display:inline-flex; align-items:center; justify-content:center}
.bloco-novo summary::-webkit-details-marker{display:none}
.bloco-novo[open] summary{margin-bottom:8px}

@media(max-width:520px){
  .tabela{display:block; overflow-x:auto; white-space:nowrap}
  .param-campo{flex-direction:column; align-items:stretch}
  .param-campo .botao-pequeno{width:100%}
}

/* ---------- Etapa 1 — Cadastro ---------- */
.barra-busca{display:flex; gap:8px; margin-bottom:12px}
.barra-busca input{flex:1; min-width:0}
.filtros{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.filtro{
  text-decoration:none; color:var(--tinta-2); background:var(--papel);
  border:1px solid var(--linha); border-radius:99px; padding:9px 16px;
  font-size:14px; font-weight:600; min-height:40px; display:inline-flex; align-items:center;
}
.filtro-ativo{background:var(--tinta); color:var(--fundo); border-color:var(--tinta)}
.filtro-acao{color:var(--acao); border-color:var(--acao); margin-left:auto}
.nota-discreta{font-size:12px; color:var(--tinta-3); margin:0 0 14px}
.tabela-cadastro tr{cursor:pointer}
.tabela-cadastro tbody tr:hover{background:var(--fundo)}
.dir{text-align:right}
.vazio{color:var(--tinta-3)}
.pilula-alerta{color:var(--alerta); border-color:rgba(178,60,0,.35); background:var(--alerta-fraco)}
.aviso-alerta{background:var(--alerta-fraco); color:var(--alerta); border:1px solid rgba(178,60,0,.25)}
.voltar{margin:0 0 10px}
.voltar a{color:var(--tinta-3); text-decoration:none; font-size:14px}
.ficha{display:grid; gap:0; margin:0 0 22px; background:var(--papel);
  border:1px solid var(--linha); border-radius:var(--raio); overflow:hidden}
.ficha > div{display:flex; justify-content:space-between; gap:16px; padding:12px 16px;
  border-bottom:1px solid var(--linha)}
.ficha > div:last-child{border-bottom:0}
.ficha dt{font-size:13px; color:var(--tinta-3); margin:0}
.ficha dd{margin:0; font-size:15px; font-weight:600; text-align:right}
.bloco{background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:18px; margin-bottom:18px}
.bloco h2, .sub{font-size:13px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--tinta-3); margin:0 0 12px}
.valor-destaque{font-size:30px; font-weight:750; margin:0; letter-spacing:-.5px}
.linha-inline{display:flex; gap:8px; align-items:center; margin-top:14px}
.linha-inline input{flex:1; min-width:0}
.linha-inline select{width:auto; min-width:100px}
.cartao-upload{background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio); padding:20px; margin-bottom:26px}
.cartao-upload input[type=file]{padding:10px; margin-bottom:4px}

/* A lista do Cadastro precisa caber na tela do celular sem rolagem lateral:
   a descrição encolhe, as quatro colunas continuam visíveis. */
@media(max-width:520px){
  /* No celular a tabela vira lista: descrição inteira, sem rolagem lateral. */
  .tabela-cadastro{display:block; white-space:normal}
  .tabela-cadastro thead{display:none}
  .tabela-cadastro tbody,.tabela-cadastro tr,.tabela-cadastro td{display:block; width:auto}
  .tabela-cadastro tr{padding:13px 16px; border-bottom:1px solid var(--linha)}
  .tabela-cadastro tr:last-child{border-bottom:0}
  .tabela-cadastro td{padding:0; border:0; text-align:left}
  .tabela-cadastro td:nth-child(1){font-size:12px; color:var(--tinta-3)}
  .tabela-cadastro td:nth-child(2){font-size:15px; font-weight:600; line-height:1.35;
    margin:1px 0 3px}
  .tabela-cadastro td:nth-child(3),.tabela-cadastro td:nth-child(4){
    display:inline-block; font-size:12px; color:var(--tinta-3)}
  .tabela-cadastro td:nth-child(3)::after{content:"·"; margin:0 6px; color:var(--linha)}
  .filtro-acao{margin-left:0; width:100%; justify-content:center}
}

/* ---------- pendências ---------- */
.pendencia{border-top:1px solid var(--linha); padding:16px 0}
.pendencia:first-of-type{border-top:0; padding-top:4px}
.pendencia-produto{margin:0 0 10px; font-weight:650; font-size:15px}
.pendencia-produto a{color:var(--tinta); text-decoration:none}
.pendencia-produto .mono{display:block; font-weight:400; font-size:12px; color:var(--tinta-3)}
.tabela-mini{width:100%; border-collapse:collapse; font-size:14px}
.tabela-mini td{padding:5px 0; color:var(--tinta-2)}
.tabela-mini td.dir{text-align:right; font-weight:600; color:var(--tinta)}
.pendencia-acoes{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.pendencia-acoes form{flex:1; min-width:150px}
.pendencia-acoes .botao{width:100%}

/* A quantidade do item do pedido é informação principal: no celular ela
   aparece junto do código, não escondida numa coluna cortada. */
@media(max-width:520px){
  .tabela-cadastro td:nth-child(3){font-weight:600; color:var(--tinta-2)}
  .tabela-cadastro td:nth-child(4){color:var(--tinta-3)}
  .tabela-cadastro td:nth-child(3)::before{content:"qtd "; font-weight:400;
    color:var(--tinta-3)}
}

/* A tabela de itens da NF tem 6 colunas. Empilhada, as duas últimas
   precisam de rótulo — senão viram números soltos sob o produto. */
@media(max-width:520px){
  .tabela-nf td:nth-child(5),.tabela-nf td:nth-child(6){
    display:inline-block; font-size:12px; color:var(--tinta-3)}
  .tabela-nf td:nth-child(4)::after{content:"·"; margin:0 6px; color:var(--linha)}
  .tabela-nf td:nth-child(5)::before{content:"unit. R$ "; color:var(--tinta-3)}
  .tabela-nf td:nth-child(5)::after{content:"·"; margin:0 6px; color:var(--linha)}
  .tabela-nf td:nth-child(6)::before{content:"peso "; color:var(--tinta-3)}
  .tabela-nf td:nth-child(6) .vazio{font-size:12px}
}

/* ---------- ocorrências ---------- */
.ocorrencia{border-top:1px solid var(--linha); padding:14px 0}
.ocorrencia:first-of-type{border-top:0; padding-top:2px}
.ocorrencia-titulo{margin:0 0 8px; font-weight:650; font-size:15px}
.ocorrencia-texto{margin:0 0 10px; font-size:14px; color:var(--tinta-2); line-height:1.5}
label.caixa{display:flex; align-items:center; gap:10px; font-weight:500;
  min-height:52px; cursor:pointer}
label.caixa input{width:22px; height:22px; margin:0}
.erro-texto{color:var(--erro-tinta, #b42318)}
.ok{color:var(--ok-tinta, #1a7f37)}

/* A tabela de medições tem 5 colunas: a 5ª precisa de rótulo no celular. */
@media(max-width:520px){
  .tabela-temp td:nth-child(3),.tabela-temp td:nth-child(4),
  .tabela-temp td:nth-child(5){display:inline-block; font-size:12px;
    color:var(--tinta-3)}
  .tabela-temp td:nth-child(3)::before{content:"faixa "; color:var(--tinta-3)}
  .tabela-temp td:nth-child(3)::after{content:"·"; margin:0 6px; color:var(--linha)}
  .tabela-temp td:nth-child(4)::after{content:""; margin:0}
  .tabela-temp td:nth-child(5)::before{content:"foto: "; color:var(--tinta-3)}
  .tabela-temp td:nth-child(4){display:block; margin-top:4px}
}

/* Medição sem foto é EXCEÇÃO documentada, não erro: cor própria, para
   destacar sem parecer bloqueio. */
.pilula-excecao{background:#fff4e5; color:#8a4b00; border:1px solid #f0c48a}
@media(prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .pilula-excecao{
    background:#3a2a10; color:#f5c98a; border-color:#6b4a18}
}

/* Histórico da tarifa: 6 colunas. Empilhado, as três últimas precisam
   de rótulo — são números soltos sem eles. */
@media(max-width:520px){
  /* a regra genérica prefixa a 3ª coluna com "qtd" e sufixa com "·";
     aqui a 3ª é o Fornecedor, então ambos são zerados. */
  .tabela-tarifa td:nth-child(3){display:block; font-size:12px;
    color:var(--tinta-3); font-weight:400}
  .tabela-tarifa td:nth-child(3)::before{content:""}
  .tabela-tarifa td:nth-child(3)::after{content:""; margin:0}
  .tabela-tarifa td:nth-child(4),.tabela-tarifa td:nth-child(5),
  .tabela-tarifa td:nth-child(6){display:inline-block; font-size:12px;
    color:var(--tinta-3)}
  .tabela-tarifa td:nth-child(4)::before{content:"peso "; color:var(--tinta-3)}
  .tabela-tarifa td:nth-child(4)::after{content:"·"; margin:0 6px; color:var(--linha)}
  .tabela-tarifa td:nth-child(5)::before{content:"frete "; color:var(--tinta-3)}
  .tabela-tarifa td:nth-child(5)::after{content:"·"; margin:0 6px; color:var(--linha)}
  .tabela-tarifa td:nth-child(6)::before{content:"R$/kg "; color:var(--tinta-3)}
}

/* ---------- conferência: um cartão por item ---------- */
.item-conf{border:1px solid var(--linha); border-radius:12px; padding:14px;
  margin:12px 0; background:var(--fundo-cartao, #fff)}
.item-conf.item-ok{border-color:#a8d5b5}
.item-conf.item-div{border-color:#e9a8a8}
.item-cabeca{margin:0 0 4px; display:flex; align-items:center; gap:8px;
  flex-wrap:wrap}
.item-nome{margin:0 0 8px; font-weight:650; font-size:15px; line-height:1.35}
.item-qtd{margin:0 0 10px; display:flex; align-items:baseline; gap:8px;
  flex-wrap:wrap}
.qtd-numero{font-size:30px; font-weight:700; line-height:1}
.qtd-un{font-size:13px; color:var(--tinta-3)}
.qtd-recebido{font-size:13px; font-weight:650; color:#b42318}
.divergencia-linha{margin:8px 0; font-size:13px; color:var(--tinta-2);
  line-height:1.5}
.abrir-item{margin-top:8px}
.abrir-item .botao{width:100%}
.grupo-radio{border:0; padding:0; margin:0 0 8px}
.grupo-radio legend{font-weight:650; font-size:14px; margin-bottom:4px}
@media(prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .item-conf{background:transparent}
}

/* A tabela de divergências tem 5 colunas. */
@media(max-width:520px){
  .tabela-div td:nth-child(3),.tabela-div td:nth-child(4),
  .tabela-div td:nth-child(5){display:inline-block; font-size:12px;
    color:var(--tinta-3)}
  .tabela-div td:nth-child(3)::before{content:""}
  .tabela-div td:nth-child(3)::after{content:"·"; margin:0 6px; color:var(--linha)}
  .tabela-div td:nth-child(5){display:block; margin-top:4px}
}

/* ---------------------------------------------------------------------
   REP — Registro de Entregas Platlog (Etapa 5-B)
   Tela de doca: o questionario e seis toques, nao seis campos de texto.
   --------------------------------------------------------------------- */
.rep-nfs{font-size:17px; font-weight:650; line-height:1.6; margin:0}
.par-horario{display:flex; gap:12px}
.par-horario>div{flex:1; min-width:0}
.par-horario input{width:100%}
.fora{color:#b42318}

.pergunta{border:1px solid var(--linha); border-radius:10px; padding:12px;
  margin:10px 0}
.pergunta-sim{border-color:#a8d5b5}
.pergunta-nao{border-color:#e9a8a8}
.pergunta-texto{margin:0 0 10px; font-size:14px; line-height:1.4;
  font-weight:600}
.pergunta-resposta{margin:0}
.pergunta-botoes{display:flex; gap:10px}
.pergunta-botoes .botao{flex:1; margin:0}

/* A tabela da Secao III tem 5 colunas: NF, codigo, qtd, produto, motivo. */
@media(max-width:520px){
  .tabela-rep{display:block; white-space:normal}
  .tabela-rep thead{display:none}
  .tabela-rep tbody,.tabela-rep tr,.tabela-rep td{display:block; width:auto}
  .tabela-rep tr{padding:12px 0; border-bottom:1px solid var(--linha)}
  .tabela-rep tr:last-child{border-bottom:0}
  .tabela-rep td{padding:0; border:0; text-align:left}
  .tabela-rep td:nth-child(1),.tabela-rep td:nth-child(2),
  .tabela-rep td:nth-child(3){display:inline-block; font-size:12px;
    color:var(--tinta-3)}
  .tabela-rep td:nth-child(1)::after,.tabela-rep td:nth-child(2)::after{
    content:"·"; margin:0 6px; color:var(--linha)}
  .tabela-rep td:nth-child(4){font-size:15px; font-weight:600;
    line-height:1.35; margin:2px 0}
  .tabela-rep td:nth-child(5){font-size:13px; color:var(--tinta-2)}
}

/* ---------------------------------------------------------------------
   ETAPA 6 — revisao do gerente e encaminhamento ao financeiro
   Tela de leitura atenta, no computador da gerencia — nao e tela de doca.
   --------------------------------------------------------------------- */

/* Faixa de XML pendente. A cor e o tamanho crescem com o prazo, porque o
   prazo e real: no dia 28 ainda da tempo; no dia 30 nao da. */
.faixa-xml{margin:0 0 14px; border-radius:10px; padding:11px 14px;
  font-size:13px; line-height:1.45}
.faixa-xml a{color:inherit; text-decoration:none; display:block}
.faixa-discreta{background:#eef2f7; color:var(--tinta-2);
  border:1px solid var(--linha)}
.faixa-alerta{background:#fff4e5; color:#8a4b08; border:1px solid #f0c9a0;
  font-weight:600}
.faixa-critica{background:#fde8e6; color:#8f1d15; border:1px solid #e9a8a8;
  font-weight:700; font-size:14px}
.faixa-nenhuma{background:#eef2f7; color:var(--tinta-2);
  border:1px solid var(--linha)}

.valor-nf{margin:0 0 14px; font-size:26px; font-weight:700; line-height:1.15}
.valor-nf .detalhe{display:block; font-size:12px; font-weight:400;
  margin-top:2px}

/* Blocos da revisao: fechados quando OK, abertos quando pedem atencao. */
.revisao-bloco{border:1px solid var(--linha); border-radius:10px;
  padding:10px 12px; margin:8px 0; background:var(--fundo-cartao, #fff)}
.revisao-bloco summary{display:flex; justify-content:space-between;
  align-items:baseline; gap:10px; cursor:pointer; list-style:none}
.revisao-bloco summary::-webkit-details-marker{display:none}
.rb-titulo{font-weight:650; font-size:14px}
.rb-resumo{font-size:13px; color:var(--tinta-2); text-align:right}
.rb-ok{border-color:#a8d5b5}
.rb-atencao{border-color:#f0c9a0}
.rb-impede{border-color:#e9a8a8}
.rb-impede .rb-resumo{color:#b42318; font-weight:650}
.rb-vazio{opacity:.72}
.rb-detalhes{margin:8px 0 0; padding-left:18px; font-size:13px;
  color:var(--tinta-2); line-height:1.6}

.lista-erro{margin:6px 0 0; padding-left:18px; line-height:1.6}
.obrig{font-size:11px; color:#b42318; font-weight:650; text-transform:uppercase}

/* PEDIDO x NF x RECEBIDO. As tres colunas nunca viram uma so. */
.tabela-tres td:first-child{line-height:1.35}
.linha-diverge{background:#fff8f7}
.tabela-tres tfoot td,.tabela-impacto tfoot td{font-weight:650;
  border-top:2px solid var(--linha)}

.enc{border-left:3px solid var(--linha); padding:8px 0 8px 12px; margin:12px 0}
.enc-retif{border-left-color:#f0c9a0}
.enc-cabeca{margin:0 0 6px; font-size:13px; line-height:1.7}
.resumo-enc{white-space:pre-wrap; font-size:12px; line-height:1.55;
  background:var(--fundo); padding:10px; border-radius:8px; overflow-x:auto}

.bloco-decisao{border:2px solid var(--linha)}

.cartao{display:block; border:1px solid var(--linha); border-radius:10px;
  padding:12px 14px; margin:8px 0; text-decoration:none; color:inherit}
.cartao-titulo{display:block; font-weight:650; font-size:15px}
.cartao-detalhe{display:block; font-size:12px; color:var(--tinta-3);
  line-height:1.5; margin-top:3px}
.cartao-alerta{border-color:#f0c9a0}

.contadores{display:flex; gap:10px}
.contador{flex:1; min-width:0; border:1px solid var(--linha);
  border-radius:10px; padding:12px 8px; text-align:center;
  text-decoration:none; color:inherit}
.contador-numero{display:block; font-size:26px; font-weight:700;
  line-height:1.1}
.contador-rotulo{display:block; font-size:11px; color:var(--tinta-3);
  line-height:1.35; margin-top:4px}
.contador-alerta{border-color:#f0c9a0}

@media(max-width:520px){
  .tabela-impacto td:nth-child(2){font-size:12px}
}
@media(prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .revisao-bloco,
  :root:not([data-tema="claro"]) .cartao{background:transparent}
  :root:not([data-tema="claro"]) .linha-diverge{background:transparent}
}

/* As duas tabelas da revisao em tela de 390 px. Sem isto as colunas da
   direita — justamente as que importam — saem da tela. */
@media(max-width:520px){
  .tabela-tres{display:block; white-space:normal}
  .tabela-tres thead{display:none}
  .tabela-tres tbody,.tabela-tres tr,.tabela-tres td{display:block; width:auto}
  .tabela-tres tr{padding:11px 0; border-bottom:1px solid var(--linha)}
  .tabela-tres tr:last-child{border-bottom:0}
  .tabela-tres td{padding:0; border:0; text-align:left}
  .tabela-tres td:nth-child(1){font-size:14px; line-height:1.35;
    margin-bottom:5px}
  .tabela-tres td:nth-child(2),.tabela-tres td:nth-child(3),
  .tabela-tres td:nth-child(4){display:inline-block; font-size:13px;
    min-width:31%}
  .tabela-tres td:nth-child(2)::before{content:"pedido "}
  .tabela-tres td:nth-child(3)::before{content:"NF "}
  .tabela-tres td:nth-child(4)::before{content:"recebido "}
  .tabela-tres td:nth-child(2)::before,.tabela-tres td:nth-child(3)::before,
  .tabela-tres td:nth-child(4)::before{font-size:11px; color:var(--tinta-3);
    font-family:inherit}

  .tabela-impacto{display:block; white-space:normal}
  .tabela-impacto thead{display:none}
  .tabela-impacto tbody,.tabela-impacto tfoot,.tabela-impacto tr,
  .tabela-impacto td{display:block; width:auto}
  .tabela-impacto tr{padding:11px 0; border-bottom:1px solid var(--linha)}
  .tabela-impacto td{padding:0; border:0; text-align:left}
  .tabela-impacto td:nth-child(1){font-size:12px; color:var(--tinta-3)}
  .tabela-impacto td:nth-child(2){font-size:14px; line-height:1.4;
    margin:2px 0 5px}
  .tabela-impacto td:nth-child(3),.tabela-impacto td:nth-child(4),
  .tabela-impacto td:nth-child(5){display:inline-block; font-size:13px;
    min-width:31%}
  .tabela-impacto td:nth-child(3)::before{content:"dif. "}
  .tabela-impacto td:nth-child(4)::before{content:"unit. R$ "}
  .tabela-impacto td:nth-child(5)::before{content:"valor R$ "}
  .tabela-impacto td:nth-child(3)::before,
  .tabela-impacto td:nth-child(4)::before,
  .tabela-impacto td:nth-child(5)::before{font-size:11px;
    color:var(--tinta-3); font-family:inherit}
  .tabela-impacto tfoot td{display:block; min-width:0}
  .tabela-impacto tfoot td::before{content:""}
}

/* Tela de infraestrutura: backup e aviso diario. */
.tabela-infra{margin-top:12px}
@media(max-width:520px){
  /* a tabela de backups cabe na tela: sem rolagem lateral, texto quebra */
  .tabela.tabela-infra{display:table; white-space:normal}
  .tabela-infra th,.tabela-infra td{padding:8px 6px}
  .tabela-infra td:nth-child(3){font-size:12px}
}

.sinais{display:flex; gap:10px; margin:10px 0; flex-wrap:wrap}
.sinais form{flex:1 1 140px}
.sinais form{flex:1; min-width:0}
.sinais .botao{width:100%; margin:0}

/* Senha temporaria: aparece uma vez, entao precisa ser legivel */
.destaque-senha{font-size:22px; font-weight:700; letter-spacing:.06em;
  padding:6px 12px; border-radius:8px; background:var(--alerta-fraco,#f4f0e8);
  display:inline-block; margin:4px 0; user-select:all}

/* Bloco E — revisão da entrega */
.nf-cabeca{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.nf-numero{font-size:20px; font-weight:700; letter-spacing:.2px}
.nf-sub{margin:2px 0 10px}
.nf-resumo td{padding:6px 0; border-bottom:1px solid var(--linha); overflow-wrap:anywhere}
.nf-resumo tr:last-child td{border-bottom:0}
.nf-resumo td.dir{padding-left:12px}
.nf-links{font-size:14px; margin:10px 0 12px}
.segurar-linha{margin-top:26px; padding-top:16px; border-top:1px solid var(--linha)}
.segurar-campos{display:flex; gap:8px; flex-wrap:wrap}
.segurar-campos input{flex:1 1 220px; min-width:0}
.segurar-campos .botao{flex:0 0 auto; width:auto; padding-left:22px; padding-right:22px}
.botao[disabled]{opacity:.55; cursor:not-allowed}
.segurar-campos{align-items:stretch}
.segurar-campos input,.segurar-campos .botao{margin:0}
@media (max-width:520px){ .segurar-campos .botao{flex:1 1 100%} }

/* 01/10 — documentos e preenchimento manual */
.lista-docs{list-style:none; padding:0; margin:0 0 12px}
.lista-docs li{padding:8px 0; border-bottom:1px solid var(--linha)}
.campos-lado{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.campos-lado label{display:flex; flex-direction:column; gap:4px; min-width:0}
.campos-lado input{min-width:0}
.manual-itens{list-style:none; padding:0; margin:0 0 14px}
.manual-itens li{padding:10px 0; border-bottom:1px solid var(--linha)}
.mi-topo{display:flex; gap:10px; align-items:baseline}
.mi-topo .mono{flex:0 0 auto; color:var(--tinta-2)}
.mi-desc{flex:1 1 auto; min-width:0}
.mi-base{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-top:4px; font-size:14px; color:var(--tinta-2); flex-wrap:wrap}
.botao-link{background:none; border:0; color:var(--acao); text-decoration:underline; padding:0; cursor:pointer; font:inherit}
#manual h3{margin:18px 0 8px; font-size:15px}
.mi-acoes{display:flex; gap:14px; align-items:baseline}
.mi-acoes form{display:inline; margin:0}
.check{display:flex; gap:8px; align-items:center; font-size:14px; margin:6px 0}
.tabela-drive a{word-break:break-all}
@media (max-width:600px){
  .tabela-drive, .tabela-drive tbody, .tabela-drive tr, .tabela-drive td{display:block; width:auto}
  .tabela-drive tr{padding:6px 0; border-bottom:1px solid var(--linha, #e5e7eb)}
  .tabela-drive td:first-child{font-size:13px; color:var(--tinta-2); padding-bottom:2px}
}

/* Emenda 29 — confirmação por página, textarea, alvos de toque */
.confirmacao p{margin:0 0 12px; line-height:1.5}
.confirmacao-resumo{margin:0 0 14px; padding-left:20px}
.confirmacao-destaque{padding:10px 12px; border-radius:8px; background:var(--alerta-fraco,#f4f0e8)}
.confirmacao-botoes{display:flex; flex-direction:column; gap:12px; margin-top:8px}
.confirmacao-botoes .botao{margin:0}
.confirmacao-botoes form{margin:0}
textarea{font:16px/1.4 inherit; color:var(--tinta); background:var(--papel);
  padding:13px 14px; border:1px solid var(--linha); border-radius:10px;
  width:100%; box-sizing:border-box; min-height:calc(var(--toque) * 1.6); resize:vertical}
textarea:focus{outline:2px solid var(--acao); outline-offset:1px; border-color:transparent}
.botao-link{min-height:44px; display:inline-flex; align-items:center}
.separador-acoes{margin-top:22px; padding-top:14px; border-top:1px solid var(--linha)}
.aviso-neutro-resumo{margin:0 0 10px; font-size:14px; color:var(--tinta-2)}
.faixa-desfazer{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.faixa-desfazer form{margin:0}
.reaberto{font-size:12px; font-weight:700; letter-spacing:.3px; color:var(--acao)}

/* Emenda 29 — lista "marcadas recentemente": quebra de linha no celular */
.recentes{display:flex;flex-direction:column;gap:10px}
.recente{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--borda,#d9d9de);border-radius:12px;padding:10px 12px}
.recente-texto{margin:0;min-width:0;flex:1 1 200px;overflow-wrap:anywhere}
.recente-motivo{flex:1 1 100%}

/* =====================================================================
   Rodada de correções de 11/10/2026 — diretriz de interface
   (registrada em docs/DIRETRIZ-INTERFACE.md; vale para o Recebimento).
   ===================================================================== */
:root{ --link:#0b4fb3; --foco:#0b57d0; }
@media (prefers-color-scheme: dark){
  :root{ --link:#8ab4f8; --foco:#8ab4f8; }
}

/* 1. LINKS: texto que navega é azul e sublinhado — sem depender de hover.
      Ações são botões (.botao); cartões e atalhos têm borda própria. */
.conteudo a:not(.botao):not(.acao):not(.cartao):not(.filtro):not(.contador):not(.botao-link):not(.link-faixa){
  color:var(--link); text-decoration:underline;
  text-decoration-thickness:1.5px; text-underline-offset:3px;
}
.conteudo a:not(.botao):not(.acao):not(.cartao):not(.filtro):not(.contador):not(.botao-link):not(.link-faixa):hover{
  text-decoration-thickness:2.5px;
}
.link-faixa{color:inherit; text-decoration:underline;
  text-underline-offset:3px; display:block}
.menu-caixa a{text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px}
.botao-link{color:var(--link)}
.cartao-titulo,.acao-titulo{text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px}

/* 2. FOCO visível por teclado em tudo o que se aciona. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--foco); outline-offset:2px;
}

/* 3. MENU: não passa da altura da tela; rola por dentro. */
.menu-caixa{
  max-height:calc(100vh - 84px); max-height:calc(100dvh - 84px);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* 4. Caixas de marcar e opções de rádio: o controle tem tamanho de
      controle (não herda a largura total dos campos de texto) e fica ao
      lado do seu texto, com área de toque de pelo menos 44 px. */
input[type=checkbox],input[type=radio]{
  width:24px; height:24px; min-height:0; padding:0; margin:0;
  flex:0 0 auto; accent-color:var(--acao);
}
.check,.linha-check,label.caixa{
  display:flex; align-items:center; gap:12px; min-height:44px;
  font-size:15px; font-weight:500; color:var(--tinta);
  margin:4px 0; cursor:pointer;
}
label.caixa{min-height:52px}

/* 5. Quantidade pedida: informação principal, legível no computador e
      no celular. */
.tabela-itens-pedido td.dir{font-size:16px; font-weight:700;
  color:var(--tinta)}
.tabela-itens-pedido td.dir.mono{font-size:16px}
@media(max-width:520px){
  .tabela-itens-pedido td:nth-child(3){display:inline-block; font-size:18px;
    font-weight:700; color:var(--tinta); text-align:left}
  .tabela-itens-pedido td:nth-child(3)::before{content:"pedido: ";
    font-size:12px; font-weight:400; color:var(--tinta-3)}
  .tabela-itens-pedido td:nth-child(3)::after{content:""; margin:0}
  .tabela-itens-pedido td:nth-child(4){display:inline-block; font-size:14px;
    color:var(--tinta-2); margin-left:6px}
}
.ajuda{font-size:14px}
.mi-base{font-size:15px}
.manual-itens .mi-topo{font-size:15px}

/* 6. Seção recolhida (details/summary) que ABRE dados — nunca confundida
      com o botão que conclui: seta no fim, contorno em vez de preenchimento. */
summary.botao{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  list-style:none; cursor:pointer; text-align:left;
}
summary.botao::-webkit-details-marker{display:none}
summary.botao::after{content:"▾"; font-size:15px; flex:0 0 auto}
details[open]>summary.botao::after{content:"▴"}
.botao-abrir{background:var(--papel); color:var(--acao);
  border:2px solid var(--acao); font-weight:700}

/* 7. Botão indisponível: com o motivo escrito logo abaixo (a cor sozinha
      não informa). */
.botao[disabled]{border-style:dashed}

/* 8. Alvos de toque: mínimo 44 px nos filtros e rádios. */
.filtro{min-height:44px}

/* =====================================================================
   Revisão visual de Flavio — 14/10/2026 (lista única de 28 apontamentos).
   Tipografia e hierarquia: rótulos, valores e instruções maiores; dados
   de registro (chave de acesso) discretos; descrições de produto mantidas.
   Vermelho continua sendo a AÇÃO PRINCIPAL da etapa, nunca sinal de erro.
   ===================================================================== */
.titulo{font-size:26px}
@media(min-width:720px){ .titulo{font-size:28px} }
.subtitulo{font-size:15px; color:var(--tinta-2)}
label{font-size:15px}
.ajuda{font-size:15px; line-height:1.5}
.detalhe{font-size:14px}
.aviso{font-size:16px; line-height:1.5}
.bloco h2,.sub{font-size:14px}
.pilula{font-size:12px}
.tabela th{font-size:12px}
.ficha dt{font-size:15px}
.ficha dd{font-size:17px}
.unidade{font-size:13px}
.rodape{font-size:13px}

/* Chave de acesso: dado de registro — menor, ainda legível e copiável. */
.ficha dd.chave-discreta{font-size:13px; font-weight:500; color:var(--tinta-2);
  letter-spacing:.02em; word-break:break-all; user-select:all}
.ficha div.linha-discreta dt{font-size:13px}

/* Menu superior: o botão mostra que abre um menu. */
.menu summary{gap:8px; padding:8px 14px}
.menu-seta{font-size:13px; color:var(--tinta-3); transition:transform .15s}
.menu[open] .menu-seta{transform:rotate(180deg)}

/* Cartões do início: passar o mouse não parece seleção (antes a borda
   ficava vermelha); o foco por teclado continua visível (regra 2). */
.acao:hover{border-color:var(--tinta-3); background:var(--fundo)}
.acao-titulo{font-size:17px}
.acao-desc{font-size:14px; color:var(--tinta-2)}

/* Seletor de arquivo em português. Sem JavaScript, o controle nativo
   aparece; com ele, o nativo fica acessível (foco, teclado, obrigatório)
   mas visualmente coberto pelo botão em português. */
.seletor-arquivo{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin:6px 0 4px; position:relative}
.seletor-botao,.seletor-nome{display:none}
.js .seletor-input{position:absolute; left:0; top:0; width:1px; height:1px;
  opacity:0; overflow:hidden; min-height:0; padding:0; border:0}
.js .seletor-botao{display:inline-flex; align-items:center; justify-content:center;
  width:auto; margin:0; min-height:var(--toque); cursor:pointer; font-weight:600}
.js .seletor-nome{display:inline; font-size:15px; color:var(--tinta-2);
  overflow-wrap:anywhere}
.js .seletor-input:focus-visible + .seletor-botao{outline:3px solid var(--foco);
  outline-offset:2px}
.seletor-previa{display:block; flex-basis:100%; max-width:240px; max-height:240px;
  object-fit:contain; border:1px solid var(--linha); border-radius:10px}
.seletor-previa[hidden],.seletor-pendente[hidden]{display:none}
.seletor-pendente{flex-basis:100%; font-size:14px; color:var(--alerta)}
@media(max-width:520px){ .js .seletor-botao{width:100%} }

/* Temperatura: verde dentro da faixa, rosa fora — sempre com o texto. */
.pilula-temp-ok{color:#0b6b3a; background:#e3f5ea; border-color:#9fd3b4}
.pilula-temp-fora{color:#9b1650; background:#fde7f1; border-color:#f3a6c8}
.temp-ok{color:#0b6b3a}
.temp-fora{color:#9b1650; font-weight:650}
@media(prefers-color-scheme:dark){
  :root:not([data-tema="claro"]) .pilula-temp-ok{color:#9be3b8; background:#12301f; border-color:#2f6b47}
  :root:not([data-tema="claro"]) .pilula-temp-fora{color:#ffb3d4; background:#3a1226; border-color:#7a2b52}
  :root:not([data-tema="claro"]) .temp-ok{color:#9be3b8}
  :root:not([data-tema="claro"]) .temp-fora{color:#ffb3d4}
}
/* pilula-erro era usada nos templates sem estilo próprio (aparecia neutra). */
.pilula-erro{color:var(--alerta); border-color:rgba(178,60,0,.35); background:var(--alerta-fraco)}

/* Conferência: código do produto legível. */
.item-cabeca .codigo-produto{font-size:17px; font-weight:700; color:var(--tinta);
  letter-spacing:.03em}
.item-nome{font-size:16px}

/* Confirmações e conclusões: leitura atenta, letras maiores. */
.confirmacao p,.confirmacao li{font-size:17px; line-height:1.55}
.confirmacao-destaque{font-size:17px}
.confirmacao-botoes .botao{font-size:17px}
.aviso-conclusao{font-size:18px}
.aviso-conclusao strong{font-size:19px}

/* Horários do recebimento: rótulo + valor. */
.horarios{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px 16px; margin:0}
.horarios div{display:flex; flex-direction:column}
.horarios dt{font-size:13px; color:var(--tinta-3); margin:0}
.horarios dd{margin:0; font-size:17px; font-weight:650}

/* Histórico da importação: Status e Resultado separados; no celular vira
   lista, sem rolagem lateral e sem cortar o texto. */
.tabela-importacao td{font-size:15px}
@media(max-width:520px){
  .tabela.tabela-importacao{display:block; white-space:normal}
  .tabela-importacao thead{display:none}
  .tabela-importacao tbody,.tabela-importacao tr,.tabela-importacao td{display:block; width:auto}
  .tabela-importacao tr{padding:12px 14px; border-bottom:1px solid var(--linha)}
  .tabela-importacao tr:last-child{border-bottom:0}
  .tabela-importacao td{padding:2px 0; border:0}
  .tabela-importacao td[data-rotulo]::before{content:attr(data-rotulo) ": ";
    font-size:12px; color:var(--tinta-3)}
}

/* Comparativo da revisão: quatro colunas (Pedido × NF × Apresentado × Aceito). */
@media(max-width:520px){
  .tabela-tres td:nth-child(2),.tabela-tres td:nth-child(3),
  .tabela-tres td:nth-child(4),.tabela-tres td:nth-child(5){display:inline-block;
    font-size:13px; min-width:23%}
  .tabela-tres td:nth-child(4)::before{content:"apresentado "}
  .tabela-tres td:nth-child(5)::before{content:"aceito "}
  .tabela-tres td:nth-child(5)::before{font-size:11px; color:var(--tinta-3);
    font-family:inherit}
}
.pilula{white-space:nowrap}
.tabela-tres .detalhe{white-space:nowrap}
a.botao + section.bloco,a.botao + .bloco{margin-top:18px}