/* Ajustes do HERA sobre o design system. Só o que o kit ainda não cobre —
   nenhuma cor solta: tudo referencia token de hold-tokens.css. */

/* O kit estiliza .btn para <button>; aqui há links de navegação que precisam
   parecer botão (imprimir etiqueta, receber mercadoria). */
a.btn{text-decoration:none}

/* O kit marca campo inválido com `:invalid:not(:placeholder-shown)`, que dá
   falso positivo em campo obrigatório sem placeholder — ele nasce vermelho.
   `:user-invalid` só acusa depois que a pessoa mexeu no campo. */
input:invalid:not(:placeholder-shown){border-color:var(--line-strong)}
input:user-invalid{border-color:var(--danger)}

/* Número do pallet: mesma leitura do chip de placa, em tamanho de destaque. */
.pallet-num{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:800;letter-spacing:2px}
.pallet-num--gg{font-size:56px;line-height:1;letter-spacing:-1px}

/* QR da ficha: fundo branco fixo, senão o leitor não enxerga no tema escuro. */
.qr-box{background:#fff;padding:10px;border-radius:var(--r-sm);
  box-shadow:var(--shadow-1);flex:0 0 auto}

/* Lista de NFs do pallet. */
.nf-lista{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.nf-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:7px 11px;
  font-family:var(--mono);font-size:13px;font-weight:600}
.nf-chip button{background:none;border:0;color:var(--text-dim);cursor:pointer;
  font-size:16px;line-height:1;padding:0}
.nf-chip button:hover{color:var(--danger)}

/* Leitor de QR pela câmera. */
#leitor{width:100%;max-width:420px;margin:0 auto;border-radius:var(--r);overflow:hidden}

/* Conversa do assistente. */
.fala{border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;
  margin-bottom:12px;white-space:pre-wrap}
.fala--eu{background:var(--surface-2)}
.fala b{display:block;font-size:11px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:5px}

/* Cartão de leitura da NF na tela de recebimento. */
.nf-card{border:1px solid var(--line);border-radius:var(--r);padding:14px;
  background:var(--surface-2);margin-bottom:12px}
.nf-card__top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.nf-card__top strong{font-size:16px}
.nf-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px}
.nf-card dt{color:var(--text-soft)}
.nf-card dd{margin:0;text-align:right;font-weight:600}

@media print{.sidebar,.topbar,.page-head__actions,.toasts{display:none!important}}

/* ---------------------------------------------------------------- entrar --
   Tela de acesso: fora do shell, sem barra lateral nem barra superior. */
.entrada{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.entrada__caixa{width:100%;max-width:420px}
.entrada__marca{text-align:center;margin-bottom:22px}
.entrada__logo{width:170px;height:auto;color:var(--primary);display:block;margin:0 auto 10px}
[data-theme="dark"] .entrada__logo{color:var(--text)}
.entrada__marca p{margin:0;color:var(--text-soft);font-size:13px;letter-spacing:.4px}
.entrada__pe{text-align:center;color:var(--text-dim);font-size:12.5px;margin-top:18px}
.campo-codigo{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:12px;
  text-align:center;padding:14px 10px}

/* Nota sem XML: fica recolhida para não poluir a ficha de quem já está completa. */
.nota-pendente{border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);margin-bottom:10px}
.nota-pendente>summary{cursor:pointer;padding:11px 14px;display:flex;gap:10px;
  align-items:baseline;flex-wrap:wrap;font-family:var(--mono)}
.nota-pendente>summary::-webkit-details-marker{display:none}
.nota-pendente>summary::before{content:"▸";color:var(--text-dim);font-family:var(--font)}
.nota-pendente[open]>summary::before{content:"▾"}
.nota-pendente__corpo{padding:0 14px 14px;border-top:1px solid var(--line)}

/* Nota sem XML: o "!" precisa saltar na lista sem depender de cor sozinha. */
.falta{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--danger);color:#fff;font-weight:800;font-size:13px;margin-right:6px;
  vertical-align:middle}

/* ------------------------------------------------- assistente no topo ----
   Barra fina entre a barra superior e o conteúdo, presente em toda tela. */
.assist{border-bottom:1px solid var(--line);background:var(--surface);
  padding:10px 30px;position:sticky;top:var(--topbar-h);z-index:5}
.assist__barra{display:flex;align-items:center;gap:10px;max-width:var(--content-max);margin:0 auto}
.assist__barra>svg{width:18px;height:18px;fill:currentColor;color:var(--text-dim);flex:none}
.assist__barra input{flex:1;border:1px solid var(--line);background:var(--surface-2);
  padding:9px 13px;border-radius:var(--r-sm);font-size:14px}
.assist__barra input:disabled{color:var(--text-dim);cursor:not-allowed}
.assist__resposta{max-width:var(--content-max);margin:10px auto 2px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:14px;
  white-space:pre-wrap;max-height:340px;overflow-y:auto}
.assist__resposta b{display:block;font-size:11px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:6px}
.assist__resposta .assist__passos{display:block;margin-top:8px;font-size:12px;color:var(--text-dim)}
.assist__fechar{float:right;background:none;border:0;color:var(--text-dim);cursor:pointer;
  font-size:17px;line-height:1;padding:0 2px}
.assist__fechar:hover{color:var(--danger)}
@media(max-width:900px){.assist{padding:10px 18px;position:static}}
@media print{.assist{display:none}}

/* Dias em armazém: a cor sozinha não basta, o número é o dado. */
.dias{display:inline-grid;place-items:center;min-width:38px;padding:3px 8px;border-radius:var(--r-xs);
  font-family:var(--mono);font-weight:800;font-variant-numeric:tabular-nums}
.dias--critico{background:var(--danger-soft);color:var(--danger)}
.dias--atencao{background:var(--warning-soft);color:var(--warning)}
.dias--ok{background:var(--surface-3);color:var(--text-soft)}

/* ------------------------------------------------------- mapa do pátio ----
   Colunas por obra, cartão por pallet. Rola na horizontal no computador e
   empilha no celular. */
.patio{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.patio__col{flex:0 0 288px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);display:flex;flex-direction:column;max-height:calc(100vh - 300px)}
.patio__cab{display:flex;gap:10px;align-items:flex-start;padding:14px 15px 12px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface-2);
  border-radius:var(--r) var(--r) 0 0;z-index:1}
.patio__cab h2{margin:0;font-size:15px;font-weight:700;line-height:1.25}
.patio__cab p{margin:3px 0 0;font-size:12px;color:var(--text-soft)}
.patio__cab .dias{margin-left:auto;flex:none;font-size:12px}
.patio__lista{padding:12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}

.pcard{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 13px;text-decoration:none;color:inherit;
  box-shadow:var(--shadow-1);transition:transform var(--ease),box-shadow var(--ease)}
.pcard:hover{transform:translateY(-1px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.pcard--velho{border-left:3px solid var(--danger)}
.pcard--solta{border-style:dashed}
.pcard__topo{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pcard__num{font-family:var(--mono);font-weight:800;font-size:16px;letter-spacing:1px}
.pcard__topo .dias{margin-left:auto;min-width:0;padding:2px 7px;font-size:11px}
.pcard__meio{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pcard__meio strong{font-size:14px}
.pcard__local{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-soft);
  margin-bottom:4px}
.pcard__local svg{width:13px;height:13px;fill:currentColor}
.pcard__nfs{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:900px){
  .patio{flex-direction:column;overflow-x:visible}
  .patio__col{flex:1 1 auto;width:100%;max-height:none}
}

/* ------------------------------------------------------------ celular ----
   O aparelho é usado em pé, no pátio, muitas vezes com uma mão só. Alvo de
   toque grande e o que importa ao alcance do polegar. */
.instalar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r);padding:12px 14px;
  box-shadow:var(--shadow-3);font-size:13.5px}
.instalar span{flex:1;min-width:150px}

@media(max-width:900px){
  /* dedo, não cursor: nada de alvo com menos de 44px */
  .btn{min-height:44px;padding:12px 18px}
  .btn--sm{min-height:38px}
  input,select,textarea{min-height:46px;font-size:16px}  /* 16px evita o zoom do iOS */
  .icon-btn{width:44px;height:44px}
  main.content{padding-bottom:80px}

  /* a bipagem é a tela mais usada em pé: campo grande e fixo no alto */
  .bip-campo input{font-size:19px;min-height:56px;font-family:var(--mono)}

  /* tabela larga vira lista legível, sem rolagem lateral */
  .tabela-cartao thead{display:none}
  .tabela-cartao tr{display:block;border:1px solid var(--line);border-radius:var(--r-sm);
    margin-bottom:10px;padding:10px 12px;background:var(--surface)}
  .tabela-cartao td{display:flex;justify-content:space-between;gap:12px;border:0;
    padding:5px 0;text-align:right}
  .tabela-cartao td::before{content:attr(data-rotulo);color:var(--text-soft);
    font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:700;
    text-align:left;flex:none}
  .tabela-cartao td:empty{display:none}
}

/* barra de atalhos do polegar, só no app instalado no celular */
.atalhos{display:none}
@media(max-width:900px){
  .atalhos{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--surface);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .atalhos a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 2px;color:var(--text-dim);text-decoration:none;font-size:10.5px;
    font-weight:600;border-radius:var(--r-xs)}
  .atalhos a svg{width:21px;height:21px;fill:currentColor}
  .atalhos a[aria-current=page]{color:var(--primary)}
  .atalhos a:active{background:var(--surface-2)}
}

/* Vários códigos de processo na mesma viagem: campo + botão na mesma linha. */
.codigo-linha{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.codigo-linha input{flex:1}
.codigo-linha .btn{flex:0 0 auto;min-width:46px;padding:11px 14px;font-size:17px;line-height:1}

/* ------------------------------------------------- leitor de QR no campo ----
   Botão de câmera colado no campo de bipagem, e o leitor por cima da tela. */
.campo-camera{display:flex;gap:8px;align-items:stretch}
.campo-camera input{flex:1;min-width:0}
.campo-camera__bt{flex:0 0 auto;padding:0 15px;display:grid;place-items:center}
.campo-camera__bt svg{width:22px;height:22px;fill:currentColor}

.leitor-sobre{position:fixed;inset:0;z-index:80;background:rgba(8,12,18,.72);
  display:grid;place-items:center;padding:18px}
.leitor-sobre__caixa{background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r);width:100%;max-width:400px;padding:16px;box-shadow:var(--shadow-3)}
.leitor-sobre__topo{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.leitor-sobre__topo strong{font-size:15px}
.leitor-sobre__topo .btn{margin-left:auto}
#leitorSobre{border-radius:var(--r-sm);overflow:hidden;background:var(--surface-3);min-height:200px}
.leitor-sobre__aviso{font-size:13px;color:var(--text-soft);margin:10px 0 0;text-align:center}
.leitor-sobre__pe{display:flex;gap:8px;justify-content:space-between;margin-top:12px;flex-wrap:wrap}

/* Documento primeiro: é o campo que preenche todos os outros. */
.doc-linha{display:flex;gap:8px;align-items:stretch;margin-bottom:4px}
.doc-linha input{flex:1;min-width:0;font-family:var(--mono);font-size:15px}
.doc-linha .btn{flex:0 0 auto;white-space:nowrap}
.doc-linha .btn svg{width:16px;height:16px;fill:currentColor}

/* ------------------------------------------------------- área do cliente ----
   Tela única, sem barra lateral: o cliente não navega pela operação. */
.cliente{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.cliente__topo{display:flex;align-items:center;gap:16px;padding:14px 24px;
  background:var(--sidebar-bg);border-bottom:1px solid var(--sidebar-line);flex-wrap:wrap}
.cliente__marca{width:118px;height:auto;color:#fff;flex:none}
.cliente__eu{margin-left:auto;text-align:right;color:#fff;line-height:1.3}
.cliente__eu strong{display:block;font-size:14px}
.cliente__eu small{display:block;font-size:11.5px;color:var(--sidebar-dim)}
.cliente__topo .btn{color:#fff;border-color:rgba(255,255,255,.28)}
.cliente__corpo{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:26px 24px 60px}
.cliente__pe{margin-top:22px;font-size:13px;color:var(--text-dim);text-align:center}
@media(max-width:640px){
  .cliente__topo{padding:12px 16px;gap:11px}
  .cliente__marca{width:92px}
  .cliente__corpo{padding:18px 16px 48px}
}

/* Acessos agrupados por empresa: a mesma empresa costuma ter várias pessoas. */
.grupo + .grupo{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.grupo__topo{margin-bottom:8px}
.grupo__topo .hint{display:block;font-family:var(--mono);font-size:12px}
.person__acoes{display:flex;gap:6px;flex-wrap:wrap;flex:none}
@media(max-width:560px){
  .person{flex-wrap:wrap}
  .person__acoes{width:100%;padding-left:0}
}

/* Divergência: encerrar sem sair da lista. */
.linha-resolver{display:flex;gap:6px;align-items:center}
.linha-resolver input{min-width:170px}

/* Fotos da doca — miniatura clicável. */
.fotos{display:flex;flex-wrap:wrap;gap:10px}
.foto{position:relative;width:104px}
.foto img{width:104px;height:104px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line);display:block}
.foto__marca{position:absolute;top:5px;left:5px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;padding:2px 6px;border-radius:99px;background:var(--danger);color:#fff}
.foto__pe{display:flex;justify-content:space-between;align-items:center;gap:4px;
  font-size:11px;color:var(--text-dim);margin-top:3px}
.foto__pe button{border:0;background:none;color:var(--danger);cursor:pointer;font-size:14px;
  line-height:1;padding:0 2px}
.envio-foto{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}

/* Quem entregou no pátio — obrigatório, então destacado do resto do formulário. */
.bloco-entregador{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px 4px;margin:14px 0}
.bloco-entregador legend{font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-dim);padding:0 6px}

/* A caixa alta também na aparência, para não piscar ao digitar. */
input[type=text]:not([data-minusculo]), input:not([type]):not([data-minusculo]),
textarea:not([data-minusculo]){text-transform:uppercase}
input[type=email], input[type=password], input[name*=cpf], input[name*=cnpj],
input[name*=chave], input[name*=codigo], input[name*=email]{text-transform:none}

/* Copiar a chave da nota — some no meio da tabela até você precisar dele. */
.btn-copiar{border:1px solid var(--line);background:var(--surface-2);color:var(--text-dim);
  border-radius:var(--r-sm);cursor:pointer;font-size:12px;line-height:1;padding:3px 6px;
  margin-left:6px;vertical-align:middle}
.btn-copiar:hover{border-color:var(--primary);color:var(--primary)}
.btn-copiar--feito{border-color:var(--ok,var(--primary));color:var(--primary)}

/* No celular a tabela de cadastros escondia os botões do lado direito, e não
   havia como excluir nada. As colunas de apoio somem para as ações caberem. */
@media(max-width:760px){
  .col-larga{display:none}
  .table-wrap td .btn--sm{margin-bottom:4px}
}

/* Cadastro pela metade: fica no alto até alguém completar. Vermelho porque é
   alerta, não ação — a regra da marca. */
.pendencia{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  background:color-mix(in srgb, var(--danger) 12%, transparent);
  color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius:99px;padding:5px 11px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pendencia:hover{background:color-mix(in srgb, var(--danger) 20%, transparent)}
.pendencia svg{width:15px;height:15px}
@media(max-width:900px){.pendencia span{display:none}.pendencia{padding:6px}}

/* Tabela estreita: o nome fica preso à esquerda para não sumir na rolagem. */
.table-wrap table td:first-child, .table-wrap table th:first-child{
  position:sticky;left:0;background:var(--surface);z-index:1}

/* Atalhos do histórico: a pergunta primeiro, o filtro fino depois. */
.vistas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}

/* Ao clicar em "Ver foto", o card se anuncia por um instante. */
#fotos{scroll-margin-top:84px}
#fotos:target{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r)}

/* Ficha da nota: chave e nomes longos quebravam para fora do card. */
.nf-card dd{min-width:0;overflow-wrap:anywhere;text-align:right}
.nf-card dl{grid-template-columns:minmax(90px,auto) minmax(0,1fr)}