/* LOOMB.SM, o portal: o CSS do Balcão (versão 1792091523-1d72), igual, num arquivo à parte
   (a política de segurança da página só aceita estilo do próprio site, sem estilo embutido).
   No fim, o que o portal acrescenta: botão em link, quatro quantidades e as classes que
   substituem os style="" do Balcão. */
/* Layout: coluna única de balcão (até 760px), cabeçalho fixo com abas que rolam no celular;
   cartão só onde há um objeto (pedido, peça, pessoa). Tema único escuro, por escolha: é a cara do LOOMB. */
:root{
  color-scheme:dark;
  --f:#07090C;      /* fundo */
  --c:#0D1115;      /* cartão */
  --c2:#121820;     /* cartão alto */
  --campo:#090C0F;  /* campos */
  --t:#E7EDEA;      /* texto */
  --m:#8F9D98;      /* texto apagado */
  --l:#1C242B;      /* linha */
  --l2:#26313A;     /* linha forte */
  --a:#099268;      /* verde LOOMB */
  --a2:#0BAA7A;     /* verde claro */
  --bt:#087C59;     /* botão (verde LOOMB mais fundo, para o texto branco ler bem) */
  --ok:#3ECF8E; --al:#E3AA52; --er:#F2705F; --in:#74ADF5;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",Consolas,"SF Mono",monospace;
}
*{box-sizing:border-box}
html{background:var(--f)}
body{margin:0;background:var(--f);color:var(--t);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 380px at 50% -160px,rgba(9,146,104,.15),transparent 70%);background-repeat:no-repeat;min-height:100%}
a{color:var(--a2);text-decoration:none}
a:hover{color:#2fd29f}
:focus-visible{outline:2px solid var(--a2);outline-offset:2px}

.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(7,9,12,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--l)}
.barra{max-width:760px;margin:0 auto;padding:12px 16px 6px;display:flex;align-items:center;gap:12px;justify-content:space-between}
.marca{display:flex;align-items:center;gap:10px;color:var(--t);flex:none}
.marca:hover{color:var(--t)}
.marca svg{width:24px;height:24px;filter:drop-shadow(0 0 8px rgba(9,146,104,.55));flex:none}
.marca b{font-weight:500;letter-spacing:.32em;font-size:14px}
.marca small{font:500 11px var(--mono);color:var(--a2);letter-spacing:.2em;border:1px solid rgba(9,146,104,.45);border-radius:5px;padding:1px 6px}
.quem{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--m);min-width:0}
.quem span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abas{max-width:760px;margin:0 auto;padding:0 12px 8px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas a{flex:none;color:var(--m);font-size:14px;padding:7px 12px;border-radius:9px;display:flex;align-items:center;gap:7px}
.abas a:hover{color:var(--t);background:var(--c2)}
.abas a.on{color:var(--t);background:var(--c2);box-shadow:inset 0 0 0 1px var(--l2)}
.abas a i{font:500 11px var(--mono);font-style:normal;background:var(--al);color:#1a1206;border-radius:99px;padding:0 6px;line-height:17px}

main{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:22px 64px;display:flex;flex-direction:column;gap:14px}
h1{font-size:24px;font-weight:500;letter-spacing:-.01em;margin:4px 0 0;text-wrap:balance;overflow-wrap:anywhere}
h2{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--m);margin:18px 0 0}
p{margin:0}
.muted{color:var(--m);font-size:13.5px}
.card{background:linear-gradient(180deg,var(--c2),var(--c));border:1px solid var(--l);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.vazio{border:1px dashed var(--l2);border-radius:14px;padding:16px;color:var(--m);font-size:14px;display:flex;flex-direction:column;gap:6px}
.vazio b{color:var(--t);font-weight:500}
.linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.entre{justify-content:space-between}
.pilha{display:flex;flex-direction:column;gap:10px}

.st{display:inline-flex;align-items:center;gap:7px;padding:2px 10px;border-radius:99px;font:500 11px var(--mono);letter-spacing:.05em;
  background:rgba(255,255,255,.05);color:#B7C2BD;white-space:nowrap;border:1px solid rgba(255,255,255,.08);max-width:100%;overflow:hidden}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st.ok{background:rgba(62,207,142,.08);color:var(--ok);border-color:rgba(62,207,142,.24)}
.st.al{background:rgba(227,170,82,.08);color:var(--al);border-color:rgba(227,170,82,.24)}
.st.er{background:rgba(242,112,95,.08);color:var(--er);border-color:rgba(242,112,95,.24)}
.st.in{background:rgba(116,173,245,.08);color:var(--in);border-color:rgba(116,173,245,.26)}

.pedido{display:flex;flex-direction:column;gap:4px;background:var(--c);border:1px solid var(--l);border-radius:12px;padding:12px 14px;color:var(--t);min-width:0}
.pedido:hover{border-color:var(--l2);color:var(--t);background:#10161c}
.pedido .linha b{font-weight:500}
.num{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

button,.bt{font:500 14px var(--sans);border:0;border-radius:10px;padding:9px 15px;cursor:pointer;background:var(--bt);color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 6px 18px rgba(9,146,104,.18);transition:background .15s}
button:hover,.bt:hover{background:var(--a);color:#fff}
button:disabled{opacity:.45;cursor:default;box-shadow:none}
button.sec,.bt.sec{background:transparent;color:var(--t);box-shadow:inset 0 0 0 1px var(--l2)}
button.sec:hover,.bt.sec:hover{background:var(--c2)}
button.perigo{background:#9c3f31}
button.perigo:hover{background:#b44a3a}
button.peq,.bt.peq{padding:6px 11px;font-size:13px}
.acoes{display:flex;gap:8px;flex-wrap:wrap}

label{display:block;font-weight:500;font-size:13.5px;color:#CDD6D2;margin-bottom:6px}
.campo{display:flex;flex-direction:column;min-width:0}
input[type=text],input[type=number],input[type=search],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--l2);border-radius:10px;
  font:inherit;font-size:16px;background:var(--campo);color:var(--t);outline:0}
input:focus,select:focus,textarea:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(9,146,104,.2)}
textarea{min-height:88px;resize:vertical}
input[type=checkbox]{accent-color:var(--a);width:17px;height:17px}
input[type=file]{font-size:14px;color:var(--m);max-width:100%}
.qtd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.qtd input{font-family:var(--mono);text-align:center}
.marcar{display:flex;gap:8px;align-items:center;font-weight:400;margin:0;color:var(--t);font-size:14px}
.ajuda{font-size:12.5px;color:var(--m);margin-top:6px}

.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.foto{position:relative;background:var(--campo);border:1px solid var(--l);border-radius:10px;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:var(--m);font-size:11px;text-align:center;padding:4px}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto button{position:absolute;top:4px;right:4px;padding:2px 8px;font-size:12px;background:rgba(7,9,12,.8);box-shadow:none}
.foto .rot{position:absolute;left:0;right:0;bottom:0;background:rgba(7,9,12,.78);padding:3px 5px;font:10.5px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.trilha{display:flex;list-style:none;margin:6px 0 0;padding:0;overflow-x:auto}
.trilha li{flex:1 0 64px;position:relative;padding-top:20px;font:500 9.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#56635E;text-align:center}
.trilha li::before{content:"";position:absolute;top:5px;left:-50%;right:50%;height:2px;background:var(--l2)}
.trilha li:first-child::before{display:none}
.trilha li i{position:absolute;top:0;left:50%;margin-left:-6px;width:12px;height:12px;border-radius:50%;background:var(--f);border:2px solid var(--l2);z-index:1}
.trilha li.feito{color:#A9B7B1}
.trilha li.feito::before{background:var(--a)}
.trilha li.feito i{background:var(--a);border-color:var(--a)}
.trilha li.agora{color:var(--t)}
.trilha li.agora::before{background:var(--a)}
.trilha li.agora i{border-color:var(--a2);box-shadow:0 0 0 4px rgba(9,146,104,.22),0 0 12px var(--a2)}
.trilha li.agora.al i{border-color:var(--al);box-shadow:0 0 0 4px rgba(227,170,82,.2)}
.trilha li.agora.er i{border-color:var(--er);box-shadow:0 0 0 4px rgba(242,112,95,.2)}

.slides{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.slides img{flex:none;height:300px;width:auto;max-width:85%;object-fit:contain;border-radius:10px;scroll-snap-align:start;background:var(--campo)}
.midia video{display:block;width:100%;max-height:520px;border-radius:10px;background:#000}
.sem-previa{background:var(--campo);border:1px dashed var(--l2);border-radius:10px;padding:18px;color:var(--m);font-size:13px;text-align:center}
pre{white-space:pre-wrap;word-break:break-word;font:13px/1.55 var(--mono);background:var(--campo);border:1px solid var(--l);padding:12px;border-radius:10px;color:#CBD5D0;margin:0}
details summary{cursor:pointer;color:var(--a2);font-size:14px}
details[open] summary{margin-bottom:8px}
.hist{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--l);padding-top:10px}
.hist div{font-size:13.5px}
.citacao{color:#CBD5D0;overflow-wrap:anywhere}
.grupo{border-top:1px solid var(--l);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.lista-links{margin:0;padding-left:18px;font-size:14px;word-break:break-all}
.clientes-marcar{display:flex;flex-wrap:wrap;gap:8px 16px}
.contador{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.contador a{display:flex;flex-direction:column;gap:2px;background:var(--c);border:1px solid var(--l);border-radius:12px;padding:12px 14px;color:var(--t)}
.contador a:hover{border-color:var(--l2);color:var(--t)}
.contador b{font:300 30px var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.contador b.al{color:var(--al)}
.contador small{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--m)}
.toast{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:520px;margin:0 auto;z-index:9;
  background:#0f1d18;border:1px solid rgba(9,146,104,.45);color:var(--t);padding:12px 14px;border-radius:12px;font-size:14px;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.toast.er{background:#21120f;border-color:rgba(242,112,95,.45)}
.voltar{font-size:14px;align-self:flex-start}

/* o que o portal acrescenta */
[hidden]{display:none!important}
.bt{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.qtd.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}
.decisao{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.qtd.decisao input{font-family:inherit;text-align:left}
.nome-sigla{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:10px}
.junta{gap:6px}
.sem-margem{margin:0}
.link-novo{font-family:var(--mono);font-size:13px}
.contador.tres{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.card.alerta{border-color:rgba(227,170,82,.45)}
/* a trilha: as etapas que faltam com contraste de leitura (cerca de 5:1) e letra maior que a do Balcão */
.trilha li{flex-basis:74px;font-size:10.5px;letter-spacing:.03em;color:#7F8D88}
/* o nome do cliente no topo acaba em reticências */
.quem .st{max-width:min(46vw,190px)}
.quem .st .tx{min-width:0}
/* o quadrinho do arquivo que não subiu: borda vermelha e o Tentar de novo no meio */
.foto.falhou{border-color:rgba(242,112,95,.5)}
.foto button.denovo{position:relative;z-index:1;padding:7px 9px;font-size:12px;background:var(--bt);box-shadow:none}
/* o aviso embaixo é só texto: o toque passa por ele e chega ao botão que estiver atrás */
.toast{pointer-events:none}
/* abas que não cabem: degradê na borda, para a pessoa ver que há mais para o lado */
.abas.mais{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.abas.antes{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.abas.antes.mais{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
/* no celular (tela estreita ou toque), botão e link com alvo de dedo de 40 px ou mais */
@media (max-width:639px),(pointer:coarse){
  button.peq,.bt.peq{min-height:40px;padding:9px 14px}
  .acoes{gap:10px}
  .abas a{padding:10px 12px}
  .voltar,.ir{display:inline-block;padding:10px 0}
  details summary{padding:10px 0}
  .foto button{padding:7px 10px;font-size:12.5px}
  .decisao{grid-template-columns:minmax(0,1fr)}
}

@media (min-width:640px){
  .barra{padding-top:14px}
  h1{font-size:28px}
  .slides img{height:380px}
  .contador{grid-template-columns:repeat(4,minmax(0,1fr))}
  .contador.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qtd.quatro{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}