/* Design system do site. Cores em oklch, iguais as de src/styles.css --
   trocar aqui sem trocar la faz o painel e o site divergirem na frente do cliente. */
:root{
  --bg:oklch(0.17 0.008 250);        /* graphite-deep / background */
  --painel:oklch(0.225 0.008 250);   /* graphite / card            */
  --painel2:oklch(0.28 0.008 250);   /* secondary / muted          */
  --linha:oklch(0.32 0.01 250);      /* border                     */
  --txt:oklch(0.965 0.005 250);      /* foreground                 */
  --fraco:oklch(0.7 0.012 250);      /* muted-foreground           */
  --tenue:oklch(0.56 0.012 250);
  --acento:oklch(0.76 0.17 63);      /* amber / primary            */
  --acento-txt:oklch(0.17 0.02 60);  /* primary-foreground         */
  --ok:oklch(0.74 0.16 148);
  --erro:oklch(0.62 0.22 25);        /* destructive                */
  --alerta:oklch(0.86 0.17 92);      /* hazard                     */
  --neutro:oklch(0.76 0.17 63);      /* atestacao usa o ambar, como no site */
  /* Cantos (10/10/2026, pedido do Tiago: "ar mais moderno"): 2px era o
     --radius do site e deixava tudo quadrado demais. Controles 8, cartoes 12.
     O site (baliza-site) ainda usa 0.125rem -- acertar la tambem. */
  --r:8px;
  --r-card:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);
     font:15px/1.55 "Archivo","Helvetica Neue",system-ui,sans-serif;
     -webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.02em}

/* Barra de progresso global (topo da pagina) -- fica visivel enquanto
   qualquer api() estiver em voo, ver comum.js. Indeterminada de proposito:
   as chamadas daqui nao tem tamanho conhecido de antemao (uma leitura RFID
   pode levar segundos), entao um trecho deslizante e mais honesto que uma
   barra que finge saber a porcentagem. */
#barraCarregamento{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;
  overflow:hidden;opacity:0;transition:opacity .2s;pointer-events:none}
#barraCarregamento.ativa{opacity:1}
#barraCarregamento::after{content:"";position:absolute;top:0;left:-35%;height:100%;width:35%;
  background:var(--acento);box-shadow:0 0 8px oklch(0.76 0.17 63/.7)}
#barraCarregamento.ativa::after{animation:deslizaCarga 1.1s ease-in-out infinite}
@keyframes deslizaCarga{0%{left:-35%}100%{left:100%}}

/* micro-rotulo: a assinatura do site (label-mono) */
.nota,.rot,.sel,.r,.col h3,.tot span,table.hist th,.cracha .r{
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fraco);font-weight:400}

header{padding:0;border-bottom:1px solid var(--linha);background:var(--painel);
       display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;color:var(--acento);padding:18px 26px;
       border-right:1px solid var(--linha);text-decoration:none}
.marca svg{width:22px;height:22px;fill:currentColor}
/* Lockup "! BALIZA !" (comum.js, marcaBaliza): o nome em cor de texto, os
   postes e o traco em ambar. Vence o `.marca svg` de 22x22 do simbolo antigo. */
.marca svg.marca-baliza{width:auto;height:28px;fill:none;color:var(--txt);display:block}
.marca .wordmark{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--txt)}
.titulo{padding:18px 26px;display:flex;flex-direction:column;justify-content:center}
header h1{font-size:15px;font-weight:600}
header .sub{color:var(--fraco);font-size:12.5px;margin-top:2px}
.ambiente{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
          letter-spacing:.1em;text-transform:uppercase;color:var(--fraco);display:flex;
          align-items:center;gap:9px;padding:18px 26px;border-left:1px solid var(--linha)}
.ambiente{position:relative;text-transform:none;letter-spacing:0;font-size:12.5px}
.ambiente .cd-ativo{color:var(--txt);font-family:"Archivo",sans-serif;font-weight:600;font-size:13px}
.ambiente .usuario-desk{background:transparent;color:var(--fraco);border:1px solid var(--linha);
  padding:6px 10px;margin-left:8px;text-transform:none;letter-spacing:0;font-size:12.5px}
.ambiente .usuario-desk:hover{color:var(--txt);border-color:var(--fraco);opacity:1}
.ambiente .menu-desk{position:absolute;right:16px;top:calc(100% - 6px);z-index:30;min-width:170px;
  background:var(--painel2);border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:0 10px 30px oklch(0 0 0 / .45);display:flex;flex-direction:column}
.ambiente .menu-desk[hidden]{display:none}
.ambiente .menu-desk a{padding:11px 14px;color:var(--txt);text-decoration:none;font-family:"Archivo",sans-serif;
  font-size:13.5px;letter-spacing:0}
.ambiente .menu-desk a:hover{background:var(--painel)}
.ambiente .menu-desk a + a{border-top:1px solid var(--linha)}
.ambiente .menu-desk a.sair{color:var(--erro)}
.pulso{width:6px;height:6px;background:var(--ok);box-shadow:0 0 0 0 oklch(0.74 0.16 148/.6);
       animation:p 2s infinite}
@keyframes p{70%{box-shadow:0 0 0 7px oklch(0.74 0.16 148/0)}100%{box-shadow:0 0 0 0 oklch(0.74 0.16 148/0)}}

main{max-width:1120px;margin:0 auto;padding:30px 26px 90px}

.passo{background:var(--painel);border:1px solid var(--linha);border-radius:var(--r-card);
       box-shadow:0 1px 2px oklch(0 0 0 / .25);
       margin-bottom:14px;overflow:hidden;transition:opacity .3s,border-color .3s}
.passo.inerte{opacity:.4;pointer-events:none}
.passo.feito{border-color:oklch(0.74 0.16 148/.35)}
.cab{display:flex;align-items:center;gap:14px;padding:15px 22px;border-bottom:1px solid transparent}
.passo.aberto .cab{border-bottom-color:var(--linha)}
.num{width:24px;height:24px;background:var(--painel2);color:var(--fraco);
     display:grid;place-items:center;flex:none;border:1px solid var(--linha);
     font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;transition:all .3s}
.passo.feito .num{background:oklch(0.74 0.16 148/.14);color:var(--ok);border-color:oklch(0.74 0.16 148/.4)}
.cab h2{font-size:14.5px;font-weight:600}
.cab .nota{margin-left:auto;text-align:right;font-family:"Archivo",sans-serif;font-size:13px;
  letter-spacing:0;text-transform:none;color:var(--tenue)}
.corpo{padding:19px 22px 23px}

.linha{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Botao em texto normal (10/10/2026): o mono em CAIXA ALTA espacada era a
   maior "cara de prototipo" da auditoria. O mono fica so nos micro-rotulos. */
button{background:var(--acento);color:var(--acento-txt);border:0;border-radius:var(--r);
       padding:10px 18px;cursor:pointer;transition:opacity .15s;
       font-family:"Archivo",sans-serif;font-size:14px;font-weight:600;
       letter-spacing:0;text-transform:none}
button:hover:not(:disabled){opacity:.88}
/* Desabilitado = "ainda nao", nao "quebrado": cinza neutro em vez do ambar
   apagado (que virava marrom sobre o grafite). */
button:disabled,button.sec:disabled{background:var(--painel2);color:var(--tenue);border-color:transparent;
       opacity:1;cursor:not-allowed}
button.sec{background:transparent;color:var(--txt);border:1px solid var(--linha)}
button.sec:hover:not(:disabled){border-color:var(--acento);color:var(--acento);opacity:1}
label.campo{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fraco)}
input,select,textarea{background:var(--bg);border:1px solid var(--linha);color:var(--txt);
      border-radius:var(--r);padding:9px 12px;font-size:14px;font-family:inherit}
input{width:104px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acento)}

.kv{display:flex;gap:12px;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--linha)}
.kv:last-child{border-bottom:0}
.kv b{color:var(--fraco);font-weight:400;min-width:180px}
.kv span{font-variant-numeric:tabular-nums}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:12.5px}

/* ZPL e texto de maquina: rola sozinho em vez de esticar a pagina. Etiqueta
   larga ou serie longa nao podem empurrar o layout do painel inteiro. */
pre.zpl{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:11.5px;
        line-height:1.55;margin:12px 0 0;padding:13px 15px;border-radius:var(--r);
        background:oklch(0.19 0.012 250);border:1px solid var(--borda);
        color:var(--fraco);overflow-x:auto;white-space:pre}

.selo{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:var(--r);
      font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em}
.selo.ok{background:oklch(0.74 0.16 148/.14);color:var(--ok)}
.selo.erro{background:oklch(0.62 0.22 25/.16);color:var(--erro)}
.selo.alerta{background:oklch(0.86 0.17 92/.16);color:var(--alerta)}

/* separador de 1px feito com gap sobre o fundo da borda -- idioma do site */
.fila,.cen{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);
           margin-bottom:6px}
.fila{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
/* 200px para os cinco cenarios caberem numa linha so: com 4 colunas sobrava
   uma celula vazia pintada da cor da borda, que parecia defeito. */
.cen{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fila button,.cen button,.fila a,.cen a{text-align:left;background:var(--painel);color:var(--txt);border:0;
             border-radius:0;padding:14px 16px;line-height:1.5;text-decoration:none;
             font-family:"Archivo",sans-serif;font-size:14px;font-weight:500;
             letter-spacing:normal;text-transform:none}
.fila button:hover:not(:disabled),.cen button:hover:not(:disabled),
.fila a:hover,.cen a:hover{background:var(--painel2);opacity:1}
.fila button.ativo{background:oklch(0.76 0.17 63/.12);box-shadow:inset 2px 0 0 var(--acento)}
.fila .nfl{font-size:14px;font-weight:700;display:block;margin-bottom:2px}
.fila .det{font-size:12px;color:var(--fraco);display:block}
.fila .sem{font-size:11px;color:var(--tenue);display:block;margin-top:4px}
.cen b{display:block;font-size:14px;font-weight:700;margin-bottom:4px;text-transform:capitalize}
/* Rotulo com preposicao ("Base do cliente") nao pode passar pelo capitalize
   acima -- foi pensado pra rotulo de uma palavra so, como os cenarios da
   demo, e capitaliza "do" junto. */
.cen.paginas b{text-transform:none}
.cen span{font-size:12.5px;color:var(--fraco);display:block;line-height:1.45}

.fita{display:flex;align-items:center;gap:16px;background:var(--painel2);border-radius:var(--r);
      padding:16px 20px;margin-bottom:16px;border:1px solid var(--linha);flex-wrap:wrap}
.fita .grande{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:26px;
              font-variant-numeric:tabular-nums;line-height:1}
.fita .rot{margin-top:5px}
.seta{color:var(--tenue);font-size:17px}
.fita .expl{margin-left:auto;font-size:12.5px;color:var(--fraco);max-width:330px;
            text-align:right;line-height:1.5}

.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linha);
       border:1px solid var(--linha)}
@media(max-width:820px){.grade{grid-template-columns:repeat(2,1fr)}}
.col{background:var(--painel);padding:14px 15px;border-top:2px solid var(--linha)}
.col.ok{border-top-color:var(--ok)} .col.erro{border-top-color:var(--erro)}
.col.alerta{border-top-color:var(--alerta)} .col.neutro{border-top-color:var(--neutro)}
.col h3{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.col .cont{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:16px;
           font-variant-numeric:tabular-nums;letter-spacing:normal}
.col.ok .cont{color:var(--ok)} .col.erro .cont{color:var(--erro)}
.col.alerta .cont{color:var(--alerta)} .col.neutro .cont{color:var(--neutro)}
.col .item{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;padding:4px 8px;
           background:var(--painel2);border-radius:var(--r);margin-bottom:3px}
.col .nada{font-size:12px;color:var(--tenue);padding:4px 0}

table.hist{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:4px}
table.hist th{text-align:left;padding:7px 9px;border-bottom:1px solid var(--linha)}
table.hist td{padding:7px 9px;border-bottom:1px solid var(--linha);font-variant-numeric:tabular-nums}
table.hist tr:last-child td{border-bottom:0}
table.hist .ep{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--fraco)}
.tot{display:flex;gap:1px;margin-bottom:14px;flex-wrap:wrap;background:var(--linha);
     border:1px solid var(--linha)}
.tot div{background:var(--painel);padding:12px 20px;flex:1 1 auto}
.tot div b{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:22px;
           font-weight:400;font-variant-numeric:tabular-nums;margin-bottom:5px}

.obs{font-size:12.5px;color:var(--fraco);margin-top:14px;line-height:1.65;
     padding-left:13px;border-left:1px solid var(--linha)}
.obs b{color:var(--txt);font-weight:600}

/* Tres desfechos, nas mesmas cores do site: ok / destructive / primary. */
.atesta{background:oklch(0.76 0.17 63/.07);border:1px solid oklch(0.76 0.17 63/.32);
        border-radius:var(--r);padding:15px 17px;margin-bottom:14px}
.atesta h4{font-size:13px;color:var(--acento);font-weight:700;margin-bottom:7px}
.atesta ul{margin:0 0 4px 17px;font-size:13px;line-height:1.7}
.atesta label{display:flex;gap:9px;align-items:flex-start;margin-top:11px;font-size:13px;
              cursor:pointer;color:var(--txt)}
.atesta input[type=checkbox]{width:auto;margin-top:2px;accent-color:var(--acento);cursor:pointer}
.bloqueio{background:oklch(0.62 0.22 25/.08);border:1px solid oklch(0.62 0.22 25/.32);
          border-radius:var(--r);padding:15px 17px;margin-bottom:14px;position:relative}
/* hazard-rule do site: a listra diagonal que marca area interditada */
.bloqueio::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background-image:repeating-linear-gradient(-45deg,var(--alerta) 0 8px,transparent 8px 16px)}
.bloqueio h4{font-size:13px;color:var(--erro);font-weight:700;margin-bottom:7px;
             display:flex;align-items:center;gap:7px}
.bloqueio ul{margin:0 0 4px 17px;font-size:13px;color:var(--txt);line-height:1.7}
.bloqueio .como{font-size:12.5px;color:var(--fraco);margin-top:8px}
.aviso-erro{background:oklch(0.62 0.22 25/.1);border:1px solid oklch(0.62 0.22 25/.3);
            color:var(--erro);padding:12px 14px;border-radius:var(--r);font-size:13.5px}
.aviso{background:oklch(0.86 0.17 92/.08);border:1px solid oklch(0.86 0.17 92/.3);
       border-radius:var(--r);padding:11px 13px;font-size:12.5px;color:var(--txt);margin-top:12px}

/* Saldo da conferencia: uma NF grande fecha em varias passagens, e o operador
   precisa ver quanto ainda vem antes de decidir qualquer coisa. */
.saldo{background:var(--painel2);border:1px solid var(--linha);border-radius:var(--r);
       padding:13px 15px;margin-bottom:15px}
.saldo .top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.saldo .qtd{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:19px;letter-spacing:-.01em}
.saldo .qtd i{font-style:normal;color:var(--tenue)}
.saldo .txt{font-size:12.5px;color:var(--fraco);margin-left:auto;text-align:right}
.saldo .trilho{height:6px;background:var(--bg);border-radius:var(--r);overflow:hidden;
               display:flex;align-items:stretch}
.saldo .trilho div{height:100%;transition:width .35s ease}
.saldo .t-feito{background:var(--ok)}
.saldo .t-agora{background:var(--acento)}
.saldo.completo .qtd{color:var(--ok)}
.parcial{background:oklch(0.76 0.17 63/.07);border:1px solid oklch(0.76 0.17 63/.32);
         border-radius:var(--r);padding:13px 15px;margin-bottom:14px}
.parcial h4{font-size:13px;color:var(--acento);font-weight:700;margin-bottom:6px}
.parcial .como{font-size:12.5px;color:var(--fraco);line-height:1.6}
table.abertas{width:100%;border-collapse:collapse;font-size:12.5px}
table.abertas th{text-align:left;color:var(--fraco);font-weight:400;padding:7px 10px;
                 border-bottom:1px solid var(--linha)}
table.abertas td{padding:7px 10px;border-bottom:1px solid var(--linha);
                 font-variant-numeric:tabular-nums}
table.abertas td.velha{color:var(--alerta)}

/* Controle de SIMULACAO, nunca de operacao. Precisa parecer diferente de um
   campo que o conferente preenche -- ver o comentario no passo 2. */
.encenado{border:1px dashed var(--linha);border-radius:var(--r);padding:11px 14px;
          margin-top:13px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* Variante em bloco: quando o que se encena nao cabe numa linha -- a fila de
   paletes e os botoes de cenario, por exemplo. O contorno tracejado e o mesmo de
   proposito: o cliente aprende UMA convencao ("tracejado = nao existe na doca")
   e ela vale na tela inteira. */
.encenado.bloco{display:block}
.encenado.bloco > .et{display:block;margin-bottom:10px}
.encenado.bloco .dica{display:block;margin:11px 0 0}
.encenado .cen{margin-top:11px}
/* primeiro filho do corpo ja tem o respiro do proprio cartao */
.corpo > .encenado:first-child{margin-top:0}
.encenado .et{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
              letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}
.encenado .campo{color:var(--fraco)}
.encenado input{width:64px}
.encenado .dica{font-size:12px;color:var(--tenue);flex:1 1 300px;line-height:1.55}

.carregando{color:var(--fraco);font-size:13.5px;display:flex;align-items:center;gap:9px}
.girando{width:12px;height:12px;border:2px solid var(--linha);border-top-color:var(--acento);
         border-radius:50%;animation:g .7s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}
.nf{display:inline-block;background:oklch(0.76 0.17 63/.14);color:var(--acento);padding:2px 9px;
    border-radius:var(--r);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px}

.ident{border-radius:var(--r);padding:16px 18px;margin-bottom:16px;border:1px solid var(--linha);
       background:var(--painel2)}
.ident .top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ident .doc{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:20px;letter-spacing:-.01em}
.ident .frase{font-size:13px;color:var(--fraco);margin-top:8px;line-height:1.6}
.ident .prova{margin-top:10px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.ident .chip{background:var(--painel);border:1px solid var(--linha);border-radius:var(--r);
             padding:3px 9px;font-family:"IBM Plex Mono",ui-monospace,monospace;
             font-size:11px;color:var(--fraco)}
.ident.bom{border-color:oklch(0.74 0.16 148/.36);background:oklch(0.74 0.16 148/.06)}
.ident.bom .doc{color:var(--ok)}
.ident.ruim{border-color:oklch(0.62 0.22 25/.36);background:oklch(0.62 0.22 25/.07)}
.ident.ruim .doc{color:var(--erro)}
.ident.mudo{border-color:oklch(0.86 0.17 92/.32);background:oklch(0.86 0.17 92/.06)}
.ident.mudo .doc{color:var(--alerta)}

/* passo 1: configuracao da base */
.cfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:13px;margin-top:15px}
.cfg label{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
           letter-spacing:.16em;text-transform:uppercase;color:var(--fraco);margin-bottom:6px}
.cfg select,.cfg input{width:100%;padding:9px 11px;font-size:13.5px}
.cfg .dica{font-size:11.5px;color:var(--tenue);margin-top:5px;line-height:1.45}
textarea#token{width:100%;min-height:82px;padding:12px 13px;font-size:12px;
               font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;resize:vertical}
.cracha{display:flex;gap:1px;flex-wrap:wrap;background:var(--linha);
        border:1px solid var(--linha);margin-top:15px}
.cracha .campo2{display:flex;flex-direction:column;gap:4px;background:var(--painel2);
                padding:12px 16px;flex:1 1 auto}
.cracha .v{font-size:13.5px;font-weight:600}
.cracha.viva{border-color:oklch(0.74 0.16 148/.32)}
.cracha.viva .campo2{background:oklch(0.74 0.16 148/.05)}
.barra{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
       background:oklch(0.74 0.16 148/.06);border:1px solid oklch(0.74 0.16 148/.32);
       border-radius:var(--r);padding:14px 17px}
.barra .nome{font-size:15px;font-weight:700}
.barra .det{font-size:12.5px;color:var(--fraco);margin-top:2px}
.barra .dir{margin-left:auto;display:flex;gap:8px}

/* a etiqueta que a impressora gravaria */
.tag{display:grid;grid-template-columns:auto 1fr;gap:1px;background:var(--linha);
     border:1px solid var(--linha);margin-top:15px;max-width:620px}
.tag dt{background:var(--painel2);padding:10px 14px;
        font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
        letter-spacing:.16em;text-transform:uppercase;color:var(--fraco);white-space:nowrap}
.tag dd{background:var(--painel);padding:10px 14px;
        font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;
        word-break:break-all}
.tag dd.destaque{color:var(--acento)}
.trilha{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);
        margin-top:15px}
.trilha div{background:var(--painel);padding:11px 15px;display:flex;gap:14px;
            align-items:baseline;font-size:13.5px}
.trilha .et{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
            letter-spacing:.14em;text-transform:uppercase;color:var(--acento);
            min-width:150px}
.trilha .dt{color:var(--fraco)}

/* Menu: a tela unica virou quatro paginas. O rotulo de baixo diz o que a pagina
   FAZ, nao como ela se chama -- "Comissionamento / recebimento" evita a pergunta
   "isso e a entrada ou a saida?" toda vez. */
#menu{display:flex;gap:0;background:var(--painel);border-bottom:1px solid var(--linha)}
#menu a{border-right:1px solid var(--linha)}
#menu a.direita{border-right:0;border-left:1px solid var(--linha)}
#menu a{flex:0 1 auto;background:var(--painel);padding:11px 22px;text-decoration:none;
        color:var(--fraco);border-top:2px solid transparent;transition:background .15s}
#menu a:hover{background:var(--painel2)}
#menu a b{display:block;font-size:13.5px;font-weight:600;color:var(--txt)}
#menu a span{display:none;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
             letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}
#menu a.aqui{border-top-color:var(--acento);background:var(--bg)}
#menu a.aqui b{color:var(--acento)}
#menu a b{display:inline}
#menu a.primeira-direita{margin-left:auto}
#menu a .conta{display:inline-block;margin-left:8px;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;
  border-radius:10px;background:var(--erro);color:#fff;font-style:normal;font-size:11.5px;font-weight:700;
  line-height:20px;text-align:center;vertical-align:1px}
#menu a .conta[hidden]{display:none}
@media (max-width:760px){ #menu{flex-wrap:wrap} #menu a{flex:1 1 45%} #menu a.primeira-direita{margin-left:0} }

/* Sub-menu de "Configurações": um nivel abaixo do #menu, mais discreto —
   mono minusculo em vez do rotulo em duas linhas do nivel principal, pra não
   parecer um segundo menu principal. So existe nas 4 paginas do grupo. */
#submenu{display:flex;gap:1px;background:var(--linha);border-bottom:1px solid var(--linha)}
#submenu a{background:var(--painel);padding:9px 18px;text-decoration:none;color:var(--fraco);
        font-family:"Archivo",sans-serif;font-size:13px;font-weight:500;
        letter-spacing:0;text-transform:none;transition:background .15s}
#submenu a:hover{background:var(--painel2)}
#submenu a.aqui{color:var(--acento);background:var(--bg)}

/* Pagina de um assunto so nao tem numero de passo -- sem o `.num` o titulo
   encostava na borda esquerda do cartao. */
.cab > h2:first-child{margin-left:2px}

/* Selo de sentido: o portal atende as duas docas, e a primeira coisa que o
   operador precisa ver e para que lado esta carga vai. Verde entra, ambar sai --
   as mesmas cores que ok/acento ja usam no resto da tela. */
.sentido{display:inline-block;padding:2px 10px;border-radius:var(--r);margin-right:8px;
         font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
         letter-spacing:.14em;font-weight:600}
.sentido.entra{background:oklch(0.74 0.16 148/.16);color:var(--ok)}
.sentido.sai{background:oklch(0.76 0.17 63/.16);color:var(--acento)}
.fila .fl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
          letter-spacing:.14em;display:block;margin-bottom:3px}
.fila .fl.entra{color:var(--ok)} .fila .fl.sai{color:var(--acento)}

/* Login e troca de senha: unicas telas sem header/nav -- cartao centralizado
   na pagina inteira, ninguem esta autenticado ainda pra ver o resto. */
.tela-login{min-height:100vh;display:grid;place-items:center;padding:24px}
.tela-login .cartao{width:100%;max-width:380px;background:var(--painel);
  border:1px solid var(--linha);border-radius:var(--r);overflow:hidden}
.tela-login .marca{display:flex;align-items:center;gap:10px;padding:28px 28px 0;color:var(--acento)}
.tela-login .marca svg{width:22px;height:22px;fill:currentColor}
.tela-login .marca svg.marca-baliza{width:auto;height:40px;fill:none}
.tela-login .marca b{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--txt)}
.tela-login form{padding:16px 28px 28px;display:flex;flex-direction:column;gap:14px}
.tela-login label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--fraco)}
.tela-login input{width:100%}
.tela-login button{width:100%;margin-top:4px}

/* Senha gerada na criacao de usuario: aparece uma vez so, precisa ser copiada
   -- verde (mesma cor de "concluido" no resto do painel), mono pra nao
   confundir 0/O, l/1 na hora de repassar pro operador. */
.senha-gerada{background:oklch(0.74 0.16 148/.1);border:1px solid oklch(0.74 0.16 148/.35);
  border-radius:var(--r);padding:13px 15px;margin-bottom:14px}
.senha-gerada .rot{color:var(--ok)}
.senha-gerada .valor{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:16px;
  color:var(--ok);word-break:break-all;margin-top:4px}

/* ===== Padrao de cadastro (10/10/2026, referencia: WMS da TOTVS / PO UI) =====
   Trilha + titulo + acao principal; grade com barra de ferramentas, tabela,
   menu "..." por linha e selo de situacao; formulario em painel lateral com
   rotulo em cima do campo e ajuda embaixo. Nas nossas cores. */
.pagina-cab{display:flex;align-items:flex-end;gap:16px;margin:0 0 18px}
.pagina-cab .trilha-nav{font-size:12.5px;color:var(--tenue);margin-bottom:6px}
.pagina-cab .trilha-nav a{color:var(--fraco);text-decoration:none}
.pagina-cab .trilha-nav a:hover{color:var(--acento)}
.pagina-cab .trilha-nav span + span::before{content:"\203A";margin:0 8px;color:var(--tenue)}
.pagina-cab h1{font-size:26px;font-weight:600;letter-spacing:-.01em;margin:0}
.pagina-cab .acoes{margin-left:auto;display:flex;gap:8px}

.cadastro{background:var(--painel);border:1px solid var(--linha);border-radius:var(--r-card);margin-bottom:18px;
  box-shadow:0 1px 2px oklch(0 0 0 / .25)}
.grade-barra{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linha);
  flex-wrap:wrap}
.grade-barra h2{font-size:15px;font-weight:600;margin:0}
.grade-barra .ferramentas{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;
  color:var(--tenue)}
.grade-barra .ferramentas select{padding:7px 10px}
.icone-btn{background:transparent;border:1px solid transparent;color:var(--fraco);padding:6px 8px;
  line-height:0;border-radius:var(--r)}
.icone-btn:hover:not(:disabled){border-color:var(--linha);color:var(--acento);opacity:1}
.grade-acoes{padding:12px 16px;display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--linha)}
.grade-rodape{padding:10px 16px;font-size:12px;color:var(--tenue);border-top:1px solid var(--linha)}
.grade-vazia{padding:28px 16px;text-align:center;color:var(--fraco);font-size:14px}

table.tabela{width:100%;border-collapse:collapse;font-size:14px}
table.tabela th{text-align:left;font-weight:600;color:var(--acento);font-size:13px;padding:10px 12px;
  border-bottom:2px solid var(--linha);white-space:nowrap}
table.tabela td{padding:11px 12px;border-bottom:1px solid var(--linha);vertical-align:middle}
table.tabela tr:last-child td{border-bottom:0}
table.tabela tbody tr:hover{background:oklch(1 0 0 / .025)}
table.tabela td.menu-linha{width:44px;padding:4px 6px;position:relative}
table.tabela .tenue{color:var(--tenue)}

.situacao{display:inline-block;min-width:76px;text-align:center;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.situacao.ativo{background:oklch(0.74 0.16 148/.18);color:var(--ok)}
.situacao.padrao{background:oklch(0.76 0.17 63/.18);color:var(--acento)}
.situacao.neutro{background:var(--painel2);color:var(--fraco)}

.menu-pop{position:absolute;left:40px;top:6px;z-index:40;min-width:170px;background:var(--painel2);
  border:1px solid var(--linha);border-radius:var(--r);box-shadow:0 10px 30px oklch(0 0 0 / .45);
  display:flex;flex-direction:column}
.menu-pop[hidden]{display:none}
.menu-pop button{background:transparent;color:var(--txt);text-align:left;padding:10px 14px;border-radius:0;
  font-weight:500}
.menu-pop button:hover:not(:disabled){background:var(--painel);opacity:1}
.menu-pop button + button{border-top:1px solid var(--linha)}
.menu-pop button.perigo{color:var(--erro)}

/* Painel lateral de formulario */
.gaveta-fundo{position:fixed;inset:0;background:oklch(0 0 0 / .5);z-index:50}
.gaveta{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);z-index:51;background:var(--painel);
  border-left:1px solid var(--linha);display:flex;flex-direction:column;box-shadow:-20px 0 40px oklch(0 0 0 / .4)}
.gaveta[hidden],.gaveta-fundo[hidden]{display:none}
.gaveta-cab{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--linha)}
.gaveta-cab h2{font-size:18px;font-weight:600;margin:0}
.gaveta-cab .icone-btn{margin-left:auto}
.gaveta-corpo{flex:1;overflow:auto;padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.gaveta-rodape{padding:14px 22px;border-top:1px solid var(--linha);display:flex;gap:10px;justify-content:flex-end}
.fld{display:flex;flex-direction:column;gap:6px}
.fld > span{font-size:13px;font-weight:600;color:var(--txt)}
.fld > small{font-size:12px;color:var(--tenue);line-height:1.45}
.fld input:not([type=checkbox]),.fld select{width:100%;box-sizing:border-box;padding:10px 12px;font-size:14px}
.fld-linha{display:flex;gap:12px}.fld-linha > .fld{flex:1}
.fld-check{display:flex;align-items:center;gap:10px;font-size:14px}
.fld-check input{width:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* Assistente em passos (ex.: Novo modelo de etiqueta), como o do WMS */
.assistente{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start}
.assistente-corpo{background:var(--painel);border:1px solid var(--linha);border-radius:var(--r-card);
  padding:24px 26px;display:flex;flex-direction:column;gap:18px;box-shadow:0 1px 2px oklch(0 0 0 / .25)}
.assistente-corpo > section{display:flex;flex-direction:column;gap:18px}
.assistente-corpo > section[hidden]{display:none}
.assistente-corpo h2{font-size:20px;font-weight:600;margin:0}
.passos{list-style:none;margin:0;padding:0;counter-reset:p}
.passos li{counter-increment:p;position:relative;padding:4px 0 34px 44px;font-size:14px;color:var(--tenue);
  font-weight:600;line-height:1.35}
.passos li::before{content:counter(p);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  border:2px solid var(--linha);display:flex;align-items:center;justify-content:center;font-size:13px;
  background:var(--bg);color:var(--tenue);box-sizing:border-box}
.passos li:not(:last-child)::after{content:"";position:absolute;left:13px;top:32px;bottom:2px;width:2px;
  background:var(--linha)}
.passos li.atual{color:var(--acento)}
.passos li.atual::before{border-color:var(--acento);color:var(--acento)}
.passos li.feito{color:var(--txt)}
.passos li.feito::before{content:"\2713";border-color:var(--acento);background:var(--acento);color:var(--acento-txt)}
.passos li.feito::after{background:var(--acento)}
.info-linha{font-size:13px;color:var(--fraco);line-height:1.6;padding-left:14px;border-left:2px solid var(--acento)}
.solta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:230px;
  border:2px dashed var(--linha);border-radius:var(--r-card);color:var(--fraco);cursor:pointer;
  text-align:center;transition:border-color .15s,background .15s}
.solta b{font-size:18px;font-weight:600;color:var(--txt)}
.solta .link{color:var(--acento);font-weight:600}
.solta .escolhido{margin-top:6px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;color:var(--ok)}
.solta:hover,.solta.sobre{border-color:var(--acento);background:oklch(0.76 0.17 63 / .06)}
.previa{padding:16px;background:var(--bg);border:1px solid var(--linha);border-radius:var(--r);text-align:center}
@media (max-width:820px){ .assistente{grid-template-columns:1fr} .passos{display:flex;gap:16px}
  .passos li{padding:4px 0 4px 36px} .passos li::after{display:none} }

/* Secao recolhida (ex.: Avancado / Demonstracao na Base do cliente) */
details.recolhido{margin-top:14px;border:1px solid var(--linha);border-radius:var(--r);background:var(--bg)}
details.recolhido > summary{cursor:pointer;padding:11px 14px;font-weight:600;font-size:13.5px;list-style:none}
details.recolhido > summary::-webkit-details-marker{display:none}
details.recolhido > summary::before{content:"\25B8";display:inline-block;width:16px;color:var(--fraco)}
details.recolhido[open] > summary::before{content:"\25BE"}
details.recolhido > summary span{font-weight:400;color:var(--tenue);font-size:12.5px}
details.recolhido > .cfg{padding:4px 14px 14px}

/* Campo salvo e travado: le-se o valor, mas fica claro que nao e para mexer
   ate clicar em Editar (10/10/2026). */
select:disabled,input:disabled,textarea:disabled{background:var(--painel);color:var(--fraco);
  border-color:transparent;cursor:not-allowed;opacity:1}