@import url("tokens.css");

/* Portal VAIP (teste) — limpo e neutro. So tokens; nenhum valor solto de cor.
   Cor = sentido: verde pode seguir · laranja acao da VAIP · vermelho parado ·
   azul informacao · cinza sem dado. */

@layer componentes {
  :root { --largura: 72rem; --largura-form: 44rem; }
  [hidden] { display: none !important; }   /* classe com display nao pode vencer o hidden */

  body { min-block-size: 100dvh; }
  a { color: var(--brand); text-underline-offset: 2px; }
  a:hover { color: var(--brand-hover); }

  /* ---- topo ------------------------------------------------------------ */
  .topo {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-6);
    background: var(--surface); border-block-end: 1px solid var(--border);
  }
  .marca { font-weight: var(--fw-semibold); letter-spacing: .08em; color: var(--text); text-decoration: none; }
  .marca span { letter-spacing: 0; font-weight: var(--fw-normal); color: var(--text-muted); margin-inline-start: var(--sp-2); }
  .selo-teste {
    font-size: var(--fs-xs); color: var(--warn); background: var(--warn-bg);
    padding: 0 var(--sp-2); border-radius: var(--r-sm);
  }
  .saude { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: var(--sp-3); }
  .saude .off { color: var(--danger); }

  main { max-inline-size: var(--largura); margin-inline: auto; padding: var(--sp-8) var(--sp-6) var(--sp-16); outline: none; }
  .carregando { color: var(--text-muted); }

  /* ---- cabecalho de pagina --------------------------------------------- */
  .trilha { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); color: var(--text-muted); margin-block-end: var(--sp-4); flex-wrap: wrap; }
  .trilha a { color: var(--text-muted); }
  .trilha .atual { color: var(--text); font-weight: var(--fw-medium); }
  .passos { display: flex; gap: var(--sp-6); list-style: none; padding: 0; font-size: var(--fs-sm); color: var(--text-subtle); margin-block-end: var(--sp-6); flex-wrap: wrap; }
  .passos li { display: flex; align-items: center; gap: var(--sp-2); }
  .passos b { inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-items: center; border-radius: var(--r-full); border: 1px solid var(--border-strong); font-weight: var(--fw-medium); font-size: var(--fs-xs); }
  .passos .feito { color: var(--ok); } .passos .feito b { border-color: var(--ok); background: var(--ok-bg); }
  .passos .agora { color: var(--text); font-weight: var(--fw-medium); } .passos .agora b { border-color: var(--brand); color: var(--brand-contrast); background: var(--brand); }

  h1 { margin-block-end: var(--sp-2); }
  .sub { color: var(--text-muted); margin-block-end: var(--sp-6); }
  .resumo { font-size: var(--fs-base); margin-block-end: var(--sp-6); max-inline-size: none; }

  /* ---- caixa ----------------------------------------------------------- */
  .caixa { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-6); }
  .centro { max-inline-size: var(--largura-form); margin-inline: auto; }

  /* ---- upload ---------------------------------------------------------- */
  .soltar {
    display: grid; place-items: center; gap: var(--sp-2); text-align: center;
    padding: var(--sp-12) var(--sp-6); border: 2px dashed var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
  }
  .soltar:hover, .soltar.sobre { border-color: var(--brand); background: var(--brand-bg); }
  .soltar:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
  .soltar strong { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
  .soltar small { color: var(--text-muted); }
  .soltar.ocupado { cursor: progress; opacity: .7; }
  .soltar.mini { padding: var(--sp-6); }
  .soltar.mini strong { font-size: var(--fs-base); }
  .nota { font-size: var(--fs-sm); color: var(--text-muted); margin-block-start: var(--sp-3); text-align: center; max-inline-size: none; }

  /* ---- botoes ---------------------------------------------------------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-block-size: var(--control-h); padding: 0 var(--sp-4); border-radius: var(--r-sm);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    font-weight: var(--fw-medium); cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  }
  .btn:hover { background: var(--surface-2); }
  .btn.primario { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
  .btn.primario:hover { background: var(--brand-hover); }
  .btn.fantasma { border-color: transparent; background: transparent; color: var(--text-muted); }
  .btn.fantasma:hover { color: var(--text); background: var(--surface-2); }
  .btn.acao { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
  .btn.pequeno { min-block-size: 1.75rem; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
  .btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; }
  .acoes { display: flex; justify-content: center; align-items: center; gap: var(--sp-4); margin-block-start: var(--sp-8); flex-wrap: wrap; }
  .acoes .dica { inline-size: 100%; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); max-inline-size: none; }

  /* ---- tabela ---------------------------------------------------------- */
  .tabela-rolagem { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
  table { inline-size: 100%; border-collapse: collapse; }
  th, td { padding: var(--sp-2) var(--sp-4); text-align: left; border-block-end: 1px solid var(--border); vertical-align: middle; }
  th { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); }
  tbody tr:last-child td { border-block-end: 0; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .desc { font-weight: var(--fw-medium); }
  .modelo { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
  td.situacao { inline-size: 12rem; }
  tr.clicavel { cursor: pointer; }
  tr.clicavel:hover td { background: var(--surface-2); }
  tr.detalhe td { background: var(--surface-2); font-size: var(--fs-sm); }
  .detalhe dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--sp-2) var(--sp-6); }
  .detalhe dt { color: var(--text-muted); font-size: var(--fs-xs); }
  .detalhe dd { margin: 0; font-variant-numeric: tabular-nums; }

  /* ---- chips (cor = sentido) ------------------------------------------ */
  .chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; line-height: 1.6; }
  .chip.ok { color: var(--ok); background: var(--ok-bg); }
  .chip.acao { color: var(--warn); background: var(--warn-bg); }
  .chip.parado { color: var(--danger); background: var(--danger-bg); }
  .chip.info { color: var(--info); background: var(--info-bg); }
  .chip.neutro { color: var(--text-muted); background: var(--surface-2); }
  .enviada { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-block-start: var(--sp-1); }

  /* ---- formulario ------------------------------------------------------ */
  .ficha { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-8); align-items: start; }
  .campos { display: grid; gap: var(--sp-6); }
  .campo { display: grid; gap: var(--sp-1); }
  .campo > label, .campo > .rotulo { font-weight: var(--fw-medium); }
  .campo .opcional { font-weight: var(--fw-normal); color: var(--text-subtle); font-size: var(--fs-sm); }
  .campo .ajuda { font-size: var(--fs-xs); color: var(--text-muted); max-inline-size: none; }
  .campo .erro { font-size: var(--fs-xs); color: var(--danger); max-inline-size: none; }
  .campo .erro::before { content: "⚠ "; }
  input[type="text"], input[type="date"], input[type="number"], input[type="email"], input[type="tel"], select, textarea {
    inline-size: 100%; min-block-size: var(--control-h); padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface);
  }
  textarea { min-block-size: 6rem; resize: vertical; line-height: var(--lh-snug); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
  [aria-invalid="true"] { border-color: var(--danger) !important; }
  .curto { max-inline-size: 14rem; }
  .medio { max-inline-size: 24rem; }
  .linha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
  .check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
  .check input { inline-size: 1rem; block-size: 1rem; }
  .contador { font-size: var(--fs-xs); color: var(--text-subtle); text-align: right; max-inline-size: none; }
  .contador.estouro { color: var(--danger); }
  .salvo { font-size: var(--fs-sm); color: var(--text-muted); }
  /* minmax(0,1fr): texto comprido (nome de fornecedor chines) nao alarga a coluna */
  .secao { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .secao + .secao { margin-block-start: var(--sp-8); padding-block-start: var(--sp-8); border-block-start: 1px solid var(--border); }
  .secao h2 { font-size: var(--fs-base); }
  .anexo { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
  .anexo a { font-weight: var(--fw-medium); }
  .anexo.sobre { border-color: var(--brand); background: var(--brand-bg); }   /* soltar para trocar o PDF */
  .anexo p { inline-size: 100%; font-size: var(--fs-sm); color: var(--text-muted); max-inline-size: none; }

  /* ---- painel da IA ---------------------------------------------------- */
  .ia { position: sticky; inset-block-start: var(--sp-6); display: grid; gap: var(--sp-4); font-size: var(--fs-sm); }
  .ia h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: var(--fw-medium); }
  .ia .bloco { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); background: var(--surface); display: grid; gap: var(--sp-2); }
  .ia .bloco p { max-inline-size: none; }
  .ia .texto-sugerido { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--surface-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); }
  .segmentos { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .segmentos span { font-family: var(--font-mono); font-size: var(--fs-xs); padding: 0 var(--sp-1); border-radius: var(--r-sm); background: var(--surface-2); }
  .muted { color: var(--text-muted); }

  /* ---- itens do complemento ------------------------------------------- */
  .preencher { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-muted); }
  .tabela-itens input { min-block-size: 2rem; }
  /* em tela estreita, a grade ROLA (a caixa tem overflow-x) em vez de espremer
     o nome do produto letra a letra */
  .tabela-itens table { min-inline-size: 36rem; }
  .tabela-itens td.entrada { inline-size: 8rem; }
  .tabela-itens details summary { cursor: pointer; font-size: var(--fs-xs); color: var(--text-muted); }
  .tabela-itens details[open] { display: grid; gap: var(--sp-2); padding-block-start: var(--sp-2); }

  /* ---- conferencias da 1a tela (fornecedor + produtos) ---------------- */
  .conferencia { margin-block-end: var(--sp-8); }
  .conferencia-topo { display: flex; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-3); }
  .conferencia-topo h2 { font-size: var(--fs-base); }
  #forn { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-6); display: grid; gap: var(--sp-3); }
  #forn p { max-inline-size: none; }
  #forn-edita { display: grid; gap: var(--sp-4); }
  .acoes-inline { display: flex; justify-content: center; }
  .link { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; }

  /* ---- filial: cartoes de escolha ------------------------------------- */
  .filiais { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-3); }
  .filial { position: relative; display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: var(--fs-sm); }
  .filial:hover { border-color: var(--brand); }
  .filial input { position: absolute; opacity: 0; pointer-events: none; }
  .filial:has(input:checked) { border: 2px solid var(--brand); background: var(--brand-bg); padding: calc(var(--sp-3) - 1px) calc(var(--sp-4) - 1px); }
  .filial:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .filial strong { font-size: var(--fs-md); }
  .filial-grupo { justify-self: start; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .06em; padding: 0 var(--sp-2); border-radius: var(--r-sm); border: 1px solid currentColor; }
  .filial-grupo.trd { color: var(--brand); }
  .filial-grupo.bf { color: var(--info); }

  /* ---- escolha rapida (condicao de pagamento) ------------------------- */
  .chips-escolha { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-2); }
  .escolha { min-block-size: 2rem; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: var(--fs-sm); max-inline-size: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .escolha:hover { border-color: var(--brand); }
  .escolha[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); font-weight: var(--fw-medium); }

  /* ---- preencher todos: dois grupos separados ------------------------- */
  .preencher { gap: var(--sp-8); }
  .grupo-preencher { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .grupo-preencher b { color: var(--text); font-weight: var(--fw-medium); margin-inline-end: var(--sp-1); }

  /* ---- canetinha: o campo e editavel ---------------------------------- */
  .editavel { position: relative; display: block; }
  .editavel input { padding-inline-end: var(--sp-8); }
  .editavel::after { content: "✎"; position: absolute; inset-inline-end: var(--sp-3); inset-block-start: 50%; translate: 0 -50%; color: var(--text-subtle); pointer-events: none; font-size: var(--fs-sm); }
  .editavel:focus-within::after { color: var(--brand); }
  .tabela-itens input[type="number"] { -moz-appearance: textfield; }
  .tabela-itens input[type="number"]::-webkit-inner-spin-button, .tabela-itens input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

  /* ---- confirmacao no lugar do botao ---------------------------------- */
  .confirma { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--danger); }
  .btn.perigo { background: var(--danger); border-color: var(--danger); color: var(--brand-contrast); }
  .btn.perigo:hover { background: var(--danger); filter: brightness(.92); }
  td.acoes-linha { text-align: right; }
  td.acoes-linha .confirma { justify-content: flex-end; }
  /* largura fixa: a coluna precisa caber o botao E a confirmacao (dois botoes),
     senao a tabela cresce e a ultima celula sai da caixa */
  .col-acoes { inline-size: 11rem; }

  /* ---- esqueleto de carregamento -------------------------------------- */
  .esqueleto { display: grid; gap: var(--sp-4); }
  .esqueleto span { display: block; block-size: 2.25rem; border-radius: var(--r-sm); background: var(--surface-2); animation: pulsa 1.4s var(--ease-out) infinite; }
  .esqueleto span:nth-child(2) { inline-size: 70%; } .esqueleto span:nth-child(3) { inline-size: 85%; } .esqueleto span:nth-child(4) { inline-size: 55%; }
  @keyframes pulsa { 50% { opacity: .5; } }

  /* ---- aviso (toast) --------------------------------------------------- */
  .aviso {
    position: fixed; inset-block-end: var(--sp-6); inset-inline-start: 50%; translate: -50% 0;
    max-inline-size: min(36rem, calc(100vw - 2rem)); padding: var(--sp-3) var(--sp-4);
    background: var(--text); color: var(--bg); border-radius: var(--r-md); box-shadow: var(--shadow-3);
    font-size: var(--fs-sm);
  }
  .aviso.erro { background: var(--danger); color: var(--brand-contrast); }

  .erro-caixa { border: 1px solid var(--danger); background: var(--danger-bg); color: var(--text); border-radius: var(--r-md); padding: var(--sp-4); }
  .vazio { text-align: center; color: var(--text-muted); padding: var(--sp-8); }
  .lista-recentes { margin-block-start: var(--sp-12); }
  .lista-recentes h2 { font-size: var(--fs-base); margin-block-end: var(--sp-3); }

  @media (max-width: 64rem) {
    .ficha { grid-template-columns: 1fr; }
    .ia { position: static; }
  }
  @media (max-width: 40rem) {
    main { padding: var(--sp-6) var(--sp-4) var(--sp-16); }
    .topo { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
    .linha { grid-template-columns: 1fr; }
    th, td { padding: var(--sp-2) var(--sp-3); }
    .ocultar-celular { display: none; }
    td.situacao { inline-size: auto; }
  }
}

/* ======================================================================
   23/09/2026 — TRADE/BFC, fornecedor em tela propria, area da Tradestar
   ====================================================================== */
@layer componentes {
  /* ---- TRADE ou BFC: cada botao no centro da sua metade (G-003) ------- */
  .escolha-empresa { text-align: center; }
  .escolha-empresa .sub { margin-inline: auto; }
  .empresas { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: var(--sp-6); margin-block: var(--sp-8) var(--sp-6); }
  .empresa {
    inline-size: min(100%, 16rem); display: grid; gap: var(--sp-1); place-items: center;
    padding: var(--sp-8) var(--sp-6); border: 1px solid var(--border-strong); border-radius: var(--r-md);
    background: var(--surface); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
  }
  .empresa strong { font-size: var(--fs-2xl); letter-spacing: .06em; font-weight: var(--fw-semibold); }
  .empresa span { font-size: var(--fs-sm); color: var(--text-muted); }
  .empresa:hover { border-color: var(--brand); }
  .empresa:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .empresa[aria-pressed="true"] { border: 2px solid var(--brand); background: var(--brand-bg); padding: calc(var(--sp-8) - 1px) calc(var(--sp-6) - 1px); }
  .empresa[disabled] { opacity: .5; cursor: not-allowed; }
  .leitura { color: var(--text-muted); font-size: var(--fs-sm); min-block-size: 1.5em; margin-inline: auto; max-inline-size: none; }
  .ok-txt { color: var(--ok); }
  .girando { display: inline-block; inline-size: .9em; block-size: .9em; border: 2px solid var(--border-strong); border-block-start-color: var(--brand); border-radius: var(--r-full); vertical-align: -.1em; animation: gira .8s linear infinite; }
  @keyframes gira { to { rotate: 1turn; } }

  /* ---- fornecedor: busca (combobox) ------------------------------------ */
  .combo { position: relative; max-inline-size: 36rem; }
  .combo ul {
    position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--sp-1)); z-index: 5;
    list-style: none; margin: 0; padding: var(--sp-1); max-block-size: 20rem; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-2);
  }
  .combo li[role="option"] { display: grid; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; }
  .combo li[role="option"] small { color: var(--text-muted); font-size: var(--fs-xs); }
  .combo li[role="option"]:hover, .combo li[aria-selected="true"] { background: var(--brand-bg); }
  .combo li.nada { padding: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }
  .secao .acoes-inline { margin-block-start: var(--sp-2); }
  .ou { display: flex; align-items: center; gap: var(--sp-4); margin-block: var(--sp-6); color: var(--text-subtle); font-size: var(--fs-sm); }
  .ou::before, .ou::after { content: ""; flex: 1; border-block-start: 1px solid var(--border); }
  /* align-items:start: a mensagem de erro de um campo nao estica os vizinhos da linha */
  .grade-forn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
  .largura-toda { grid-column: 1 / -1; }
  .enviada.devolvido { color: var(--warn); }
  .devolvido-caixa { border-color: var(--warn); background: var(--warn-bg); margin-block-end: var(--sp-6); }
  a.enviada { color: var(--brand); }

  /* ---- area Tradestar: abas com contador de novos ---------------------- */
  .abas { display: flex; gap: var(--sp-2); padding: 0 var(--sp-6); background: var(--surface); border-block-end: 1px solid var(--border); overflow-x: auto; }
  .abas a { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); color: var(--text-muted); text-decoration: none; border-block-end: 2px solid transparent; font-weight: var(--fw-medium); white-space: nowrap; }
  .abas a:hover { color: var(--text); }
  .abas a[aria-current="page"] { color: var(--text); border-block-end-color: var(--brand); }
  .contador-novo { min-inline-size: 1.4rem; padding: 0 var(--sp-1); border-radius: var(--r-full); background: var(--info); color: var(--brand-contrast); font-size: var(--fs-xs); text-align: center; font-variant-numeric: tabular-nums; }
  .selo-novo { margin-inline-start: var(--sp-2); padding: 0 var(--sp-1); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--info); border: 1px solid currentColor; vertical-align: .1em; }
  tr.linha-nova td:first-child a { font-weight: var(--fw-semibold); }
  .titulo-linha { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .titulo-linha h1 { margin-block-end: 0; }
  .titulo-linha + .sub { margin-block-start: var(--sp-2); }
  .titulo-secao { font-size: var(--fs-base); margin-block: var(--sp-8) var(--sp-3); }
  .tabela-larga { min-inline-size: 48rem; }
  a.chip { text-decoration: none; }

  /* ---- decisao: aprovar / recusar / copiar, no centro ------------------ */
  .decisao { display: grid; gap: var(--sp-3); justify-items: center; text-align: center; margin-block: var(--sp-2) var(--sp-8); }
  .decisao .dica { color: var(--text-muted); font-size: var(--fs-sm); max-inline-size: 44rem; }
  .decisao .acoes-inline { gap: var(--sp-3); flex-wrap: wrap; }
  #recusa { inline-size: min(100%, 36rem); text-align: start; display: grid; gap: var(--sp-3); }
  .bloqueios { border: 1px solid var(--warn); background: var(--warn-bg); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); text-align: start; font-size: var(--fs-sm); margin-block-end: var(--sp-4); }
  .bloqueios ul { margin: var(--sp-1) 0 0; padding-inline-start: var(--sp-6); }
  .previa { inline-size: min(100%, 52rem); text-align: start; }
  .previa summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
  .previa pre { margin-block-start: var(--sp-2); padding: var(--sp-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 24rem; overflow-y: auto; }

  /* ---- campos so de leitura -------------------------------------------- */
  .campos-ver { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sp-4) var(--sp-6); margin: 0; }
  .campos-ver dt { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
  .campos-ver dd { margin: 0; overflow-wrap: anywhere; }

  @media (max-width: 64rem) {
    .grade-forn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 40rem) {
    .empresas { grid-template-columns: 1fr; }
    .grade-forn { grid-template-columns: 1fr; }
    .abas { padding: 0 var(--sp-2); }
  }
}

/* ======================================================================
   23/09/2026 — area Tradestar: quadro de 3 colunas (fornecedor -> produto -> pedido)
   ====================================================================== */
@layer componentes {
  main:has(.quadro) { max-inline-size: 90rem; }
  .quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
  .coluna { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); min-block-size: 12rem; align-content: start; }
  .coluna-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .coluna-topo h2 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); }
  .passo { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--r-full); background: var(--brand); color: var(--brand-contrast); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
  .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .card {
    display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); color: var(--text); text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--info); border-radius: var(--r-sm);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }
  .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); color: var(--text); }
  .card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  /* a faixa da esquerda repete a cor da situacao: de quem e a vez, lida de longe */
  .card.situ-aguardando { border-inline-start-color: var(--info); }
  .card.situ-devolvido { border-inline-start-color: var(--warn); }
  .card.situ-cadastrado, .card.situ-aprovado { border-inline-start-color: var(--ok); }   /* no Conexos / documento aprovado */
  /* documentos depois do pedido (tela da VAIP) */
  .lista-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
  .lista-docs > li { display: grid; gap: var(--sp-1); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
  .form-doc { display: grid; gap: var(--sp-3); margin-block-start: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border); }
  .form-doc fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-1); }
  .form-doc .opcao { display: flex; align-items: center; gap: var(--sp-2); font-weight: normal; }
  .card-titulo { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
  .card-titulo .selo-novo { margin-inline-start: var(--sp-2); font-weight: var(--fw-semibold); }
  .card-linha { font-size: var(--fs-sm); color: var(--text-muted); overflow-wrap: anywhere; }
  .card-linha.mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
  .card-pe { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-block-start: var(--sp-1); font-size: var(--fs-xs); }
  .vazio-coluna { color: var(--text-muted); font-size: var(--fs-sm); text-align: center; padding: var(--sp-6) var(--sp-2); }
  .nota-coluna { font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); max-inline-size: none; }
  .aprovados summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-muted); padding-block: var(--sp-1); }
  .aprovados[open] summary { margin-block-end: var(--sp-2); }

  @media (max-width: 80rem) {
    .quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 56rem) {
    .quadro { grid-template-columns: 1fr; }
    .coluna { min-block-size: 0; }
  }
}

/* ---- ficha de produto: escolhas obrigatorias e trocas de caractere (23/09/2026) ---- */
@layer componentes {
  .opcoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .opcao { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: var(--fs-sm); }
  .opcao:has(input:checked) { border-color: var(--brand); background: var(--brand-bg); font-weight: var(--fw-medium); }
  .opcao:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
  .campo:has(> .opcoes) [aria-invalid="true"], .campo[data-campo] .opcoes:has([aria-invalid="true"]) .opcao { border-color: var(--danger); }
  .condicional { margin-block-start: calc(var(--sp-4) * -1); padding-inline-start: var(--sp-4); border-inline-start: 2px solid var(--border); }
  .erro-grupo { margin-block-start: calc(var(--sp-4) * -1); font-size: var(--fs-xs); color: var(--danger); }
  .erro-grupo::before { content: "⚠ "; }
  .trocas { font-size: var(--fs-xs); color: var(--warn); background: var(--warn-bg); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); max-inline-size: none; }
  .sub-campo { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }
  #gtin { margin-block-start: var(--sp-2); }
}

/* ---- conferir no Conexos (23/09/2026) ---- */
@layer componentes {
  #conferencia { inline-size: min(100%, 36rem); text-align: start; display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
  #conferencia p { max-inline-size: none; }
  .linha-codigo { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
}

/* ---- recusado pela Tradestar: botao que abre o motivo (23/09/2026) ---- */
@layer componentes {
  details.recusado > summary { list-style: none; cursor: pointer; display: inline-flex; }
  details.recusado > summary::-webkit-details-marker { display: none; }
  details.recusado > summary::after { content: "▾"; margin-inline-start: var(--sp-1); }
  details.recusado[open] > summary::after { content: "▴"; }
  .recusado-caixa { margin-block-start: var(--sp-2); padding: var(--sp-3); display: grid; gap: var(--sp-2); justify-items: start;
    border: 1px solid var(--danger); border-radius: var(--r-md); background: var(--surface); max-inline-size: 22rem; }
  .recusado-caixa p { margin: 0; }
}

/* ---- condicao de pagamento diferente da planilha (24/09/2026) ---- */
@layer componentes {
  .aviso-pg { margin-block-start: var(--sp-2); padding: var(--sp-3); display: grid; gap: var(--sp-2); justify-items: start;
    border: 1px solid var(--warn); border-radius: var(--r-md); background: var(--warn-bg); }
  .aviso-pg p { margin: 0; }
}

/* ---- campo de busca com cara de busca: lupa + seta (24/09/2026) ---- */
@layer componentes {
  .combo.busca { max-inline-size: none; }
  .combo.busca input { padding-inline: 2.4rem 2.6rem; background: var(--surface); }
  .combo.busca input:hover { border-color: var(--brand); }
  .combo.busca .lupa { position: absolute; inset-inline-start: .8rem; inset-block-start: 50%; translate: 0 -50%; inline-size: 1.05rem; block-size: 1.05rem;
    fill: none; stroke: var(--text-muted); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
  .combo.busca .abrir { position: absolute; inset-inline-end: .25rem; inset-block-start: 50%; translate: 0 -50%; inline-size: 2.2rem; block-size: 2rem;
    border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 1rem; }
  .combo.busca .abrir:hover { background: var(--brand-bg); color: var(--brand); }
  .combo.busca ul { max-block-size: 22rem; }
  #pg-origem:empty { display: none; }
}

/* ---- justificativa da compra (24/09/2026) ---- */
@layer componentes {
  .tipos-just { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-block: var(--sp-4); }
  .achados-antigo { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-block-start: var(--sp-1); font-size: var(--fs-sm); }
  @media (max-width: 1000px) { .tipos-just { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .tipo-just { display: grid; gap: var(--sp-1); align-content: start; text-align: start; padding: var(--sp-4);
    border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; color: var(--text); font: inherit; }
  .tipo-just:hover { border-color: var(--brand); }
  .tipo-just span { font-size: var(--fs-sm); color: var(--text-muted); }
  .tipo-just[aria-checked="true"] { border: 2px solid var(--brand); background: var(--brand-bg); padding: calc(var(--sp-4) - 1px); }
  .tipo-just:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .ok-caixa { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--ok, #2e7d32); border-radius: var(--r-md); background: var(--ok-bg, #eef7ee); margin-block: var(--sp-3); }
  #painel-just .tabela input.curto { inline-size: 7rem; text-align: end; }
  @media (max-width: 720px) { .tipos-just { grid-template-columns: minmax(0, 1fr); } }
}

/* ---- justificativa por produto: uma linha por produto (02/10/2026) ---- */
@layer componentes {
  .just-lote { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-block: var(--sp-4) var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
  .just-lote label { font-weight: var(--fw-semibold); }
  .just-lote select, #just #prazo { inline-size: auto; min-inline-size: 16rem; max-inline-size: 100%; }
  .tabela-just td { vertical-align: top; }
  /* o que vale para varios produtos fica separado da tabela: outro assunto (Lucas, 05/10/2026) */
  .just-bloco { margin-block-start: var(--sp-8); }
  .tabela-just select { min-inline-size: 15rem; }
  .tabela-just input.curto { inline-size: 7rem; text-align: end; }
  .tabela-just .gira { font-size: var(--fs-sm); white-space: nowrap; }
  .tabela-just .aposta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-block-end: var(--sp-2); }
  .tabela-just .aposta-linha select { min-inline-size: 0; inline-size: auto; }
  .tabela-just textarea { inline-size: 100%; min-inline-size: 16rem; font: inherit; }
  .tabela-just [data-copiar] { margin-block-start: var(--sp-1); }
  .tabela-just .erro { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--danger); }
  .tabela-just .cel-situ { min-inline-size: 11rem; }
  .tabela-just .cel-situ .enviada { display: block; margin-block-start: var(--sp-1); }
  .det-hist { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); margin-block: var(--sp-2); }
  .det-hist > summary { cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-semibold); }
  .det-hist > .card-hist { border: 0; border-block-start: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); }
}

/* ---- passo feito vira link (24/09/2026) ---- */
@layer componentes {
  .passos a { display: flex; align-items: center; gap: var(--sp-2); color: inherit; text-decoration: none; }
  .passos a:hover { text-decoration: underline; }
}

/* ---- pedidos de que a VAIP desistiu: fora da lista, recolhidos (25/09/2026) ---- */
@layer componentes {
  .desistidos { margin-block-start: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
  .desistidos summary { cursor: pointer; }
  .desistidos ul { margin-block: var(--sp-2) 0; padding-inline-start: var(--sp-5); }
}

/* ---- log do processo (25/09/2026) ---- */
@layer componentes {
  .log-dia h2 { font-size: var(--fs-sm); text-transform: capitalize; color: var(--text-muted); margin-block: var(--sp-6) var(--sp-2); }
  .log { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
  .log li { display: grid; grid-template-columns: 3.5rem 6.5rem minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-4); }
  .log li + li { border-block-start: 1px solid var(--border); }
  .log time { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--fs-sm); }
  .log .chip { justify-self: start; }
  @media (max-width: 560px) { .log li { grid-template-columns: 3.5rem minmax(0, 1fr); } .log .log-texto { grid-column: 1 / -1; } }
}

/* ---- justificativa por historico: cartao por produto com grafico (25/09/2026) ---- */
@layer componentes {
  :root { --serie-vaip: #eb6834; --serie-conexos: #2a78d6; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --serie-vaip: #d95926; --serie-conexos: #3987e5; } }
  :root[data-theme="dark"] { --serie-vaip: #d95926; --serie-conexos: #3987e5; }
  .cards-hist { display: grid; gap: var(--sp-4); margin-block: var(--sp-4); }
  .card-hist { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
  .card-hist header { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: start; }
  .card-hist header .modelo { display: block; }
  .kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
  .a-caminho { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
  .kpis dt { font-size: var(--fs-xs); color: var(--text-muted); }
  .kpis dd { margin: 0; font-size: var(--fs-lg, 1.125rem); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
  .grafico svg { inline-size: 100%; max-inline-size: 44rem; block-size: auto; display: block; }
  .g-titulo { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }
  .g-linha { fill: none; stroke: var(--serie-conexos); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .g-ponto { fill: var(--serie-conexos); stroke: var(--surface); stroke-width: 2; }
  .g-alvo { fill: transparent; }
  .g-alvo:hover { fill: color-mix(in oklab, var(--serie-conexos) 8%, transparent); }
  .g-rotulo { fill: var(--text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .g-legenda { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); margin-block-end: var(--sp-1); }
  .g-legenda span { display: inline-flex; align-items: center; gap: var(--sp-1); }
  .sw { inline-size: .7rem; block-size: .7rem; border-radius: 2px; display: inline-block; }
  .sw.g-vaip { background: var(--serie-vaip); } .sw.g-conexos { background: var(--serie-conexos); }
  .sw-linha { inline-size: 1rem; border-block-start: 2px dashed var(--text-muted); display: inline-block; }
  svg .g-vaip { fill: var(--serie-vaip); } svg .g-conexos { fill: var(--serie-conexos); }
  svg path:hover { opacity: .8; }
  .g-base { stroke: var(--border-strong); stroke-width: 1; }
  .g-media { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
  .g-eixo { fill: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
  .medidor { display: grid; gap: var(--sp-1); }
  .m-trilho { position: relative; block-size: .6rem; border-radius: 99px; background: var(--surface-2); }
  .m-barra { block-size: 100%; border-radius: 99px; }
  .m-barra.ok { background: var(--ok); } .m-barra.estoura { background: var(--danger); }
  .m-limite { position: absolute; inset-block: -.25rem; inline-size: 2px; background: var(--text); }
  .m-texto { font-size: var(--fs-sm); color: var(--text-muted); }
  .m-texto strong { color: var(--text); }
  @media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}

/* ---- prazos: transit time e cambio estimado (25/09/2026) ---- */
@layer componentes {
  .prazos { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-3); }
  .prazo-linha { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
  .prazos p { margin: 0; }
}

/* ---- "mais informações" nas linhas de produto e fornecedor (25/09/2026) ---- */
@layer componentes {
  .mais-info { margin-block-start: var(--sp-1); font-size: var(--fs-sm); }
  .mais-info summary { cursor: pointer; color: var(--brand); inline-size: fit-content; }
  .info-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sp-2) var(--sp-4); margin: var(--sp-2) 0 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
  .info-lista dt { font-size: var(--fs-xs); color: var(--text-muted); }
  .info-lista dd { margin: 0; overflow-wrap: anywhere; }
}

/* ======================================================================
   09/10/2026 — identidade Tradestar (brand book 2026): preto e branco,
   Lato, muito respiro, cor SO para sentido (ok / atencao / parado).
   Fica por ultimo: vence as regras de cima com a mesma especificidade.
   ====================================================================== */
@layer componentes {
  body { letter-spacing: .005em; }
  h1 { font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: -.01em; margin-block-end: var(--sp-3); }
  h2, .secao h2, .titulo-secao, .lista-recentes h2, .conferencia-topo h2 { font-weight: var(--fw-semibold); letter-spacing: .01em; }
  .sub { color: var(--text-muted); font-size: var(--fs-md); margin-block-end: var(--sp-8); }
  a { color: var(--text); text-decoration-color: var(--border-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: var(--text); text-decoration-color: currentColor; }
  main { padding-block-start: var(--sp-12); }

  /* ---- topo: assinatura oficial, linha fina, nada mais ---------------- */
  .topo { padding: var(--sp-4) var(--sp-8); gap: var(--sp-6); background: var(--surface); border-block-end: 1px solid var(--border); }
  .marca { display: flex; align-items: center; gap: var(--sp-4); letter-spacing: 0; }
  .marca img { block-size: 1.9rem; inline-size: auto; }
  .marca span { margin: 0; padding-inline-start: var(--sp-4); border-inline-start: 1px solid var(--border-strong);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
  .selo-teste { color: var(--text-muted); background: none; border: 1px solid var(--border-strong); font-size: var(--fs-xs);
    letter-spacing: .12em; text-transform: uppercase; padding: 0 var(--sp-2); }
  /* saude: so aparece quando algo esta FORA (menos informacao na tela) */
  .saude span:not(.off) { display: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marca img { filter: invert(1); } }
  :root[data-theme="dark"] .marca img { filter: invert(1); }

  /* ---- botoes: preto solido ou contorno -------------------------------- */
  .btn { border-radius: var(--r-sm); letter-spacing: .02em; }
  .btn.primario { padding-inline: var(--sp-6); }
  .btn.acao { border-color: var(--text); color: var(--text); background: var(--surface); }
  .btn.acao:hover { background: var(--surface-2); }
  .link, .mais-info summary, a.enviada { color: var(--text); }

  /* ---- chips: texto neutro + um ponto de cor (a cor so diz o sentido) - */
  .chip, .chip.ok, .chip.acao, .chip.parado, .chip.info, .chip.neutro {
    background: none; color: var(--text); padding: 0; gap: var(--sp-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  }
  .chip::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: var(--r-full); background: var(--text-subtle); flex: none; }
  .chip.ok::before { background: var(--ok); }
  .chip.acao::before { background: var(--warn); }
  .chip.parado::before { background: var(--danger); }
  .chip.info::before { background: var(--text); }
  .chip.neutro { color: var(--text-muted); font-weight: var(--fw-normal); }

  /* ---- passos ----------------------------------------------------------- */
  .passos { gap: var(--sp-8); }
  .passos b { border-color: var(--border-strong); }
  .passos .feito { color: var(--text-muted); }
  .passos .feito b { border-color: var(--text); background: none; color: var(--text); }
  .passos .agora b { background: var(--text); border-color: var(--text); color: var(--bg); }
  .passo { background: var(--text); color: var(--bg); }

  /* ---- caixas e tabelas: linha fina, sem fundo cinza -------------------- */
  .caixa, .tabela-rolagem, #forn, .log, .card-hist, .det-hist, #conferencia { border-color: var(--border); border-radius: var(--r-md); }
  .caixa { padding: var(--sp-8); }
  th { background: none; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .1em;
    border-block-end: 1px solid var(--border-strong); padding-block: var(--sp-3); }
  td { padding-block: var(--sp-3); }
  tr.clicavel:hover td, tr.detalhe td { background: var(--n-50); }
  .modelo, .card-linha.mono, .segmentos span, .ia .texto-sugerido { font-family: var(--font-ui); letter-spacing: .02em; }

  /* ---- upload ----------------------------------------------------------- */
  .soltar { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding-block: var(--sp-16); }
  .soltar:hover, .soltar.sobre { border-color: var(--text); background: var(--n-50); }
  .soltar strong { font-weight: var(--fw-black); font-size: var(--fs-xl); }

  /* ---- avisos: fundo branco, um fio de cor a esquerda ------------------- */
  .bloqueios, .aviso-pg, .devolvido-caixa, .trocas, .ok-caixa, .erro-caixa, .recusado-caixa {
    background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--warn); border-radius: var(--r-sm); color: var(--text);
  }
  .ok-caixa { border-inline-start-color: var(--ok); }
  .erro-caixa, .recusado-caixa { border-inline-start-color: var(--danger); }
  .enviada.devolvido { color: var(--text); }

  /* ---- escolhas (empresa, filial, tipo de justificativa, opcoes) -------- */
  .empresa strong { font-weight: var(--fw-black); letter-spacing: .12em; }
  .empresa[aria-pressed="true"], .filial:has(input:checked), .tipo-just[aria-checked="true"] { border-color: var(--text); background: var(--n-50); }
  .opcao:has(input:checked) { border-color: var(--text); background: var(--n-50); }
  .filial-grupo.trd, .filial-grupo.bf { color: var(--text); }
  .combo li[role="option"]:hover, .combo li[aria-selected="true"] { background: var(--n-100); }
  .combo.busca input:hover { border-color: var(--text); }

  /* ---- quadro da area Tradestar ----------------------------------------- */
  .coluna { background: none; border: 0; border-block-start: 2px solid var(--text); border-radius: 0; padding: var(--sp-4) 0 0; }
  .card { border-color: var(--border); border-inline-start: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-4); }
  .card:hover { border-color: var(--text); box-shadow: none; }
  .card.situ-aguardando, .card.situ-cadastrado { border-inline-start-color: var(--border); }
  .card.situ-devolvido { border-inline-start: 3px solid var(--warn); }
  .contador-novo { background: var(--text); color: var(--bg); }
  .selo-novo { color: var(--text); }
  .abas a[aria-current="page"] { border-block-end-color: var(--text); }
  .nota-coluna { border-style: solid; border-color: var(--border); }

  /* ---- grafico e medidor: uma tinta so --------------------------------- */
  :root { --serie-vaip: var(--text-muted); --serie-conexos: var(--text); }
  .m-barra.ok { background: var(--text); }

  /* ---- aviso (toast) ---------------------------------------------------- */
  .aviso { border-radius: var(--r-sm); box-shadow: var(--shadow-2); }
}
@layer componentes {
  /* sem faixa cinza cheia: so linha fina (09/10/2026) */
  .just-lote, .prazo-linha, .anexo, .info-lista { background: none; border-color: var(--border); }
}
@layer componentes {
  /* fundo cinza Tradestar (09/10/2026): topo no mesmo cinza, conteudo em branco por cima */
  .topo { background: var(--bg); border-block-end-color: var(--border-strong); }
  .soltar, .coluna .card, .card, .empresa, .filial, .tipo-just, .opcao, .escolha { background: var(--surface); }
  .soltar:hover, .soltar.sobre { background: var(--surface); }
  .coluna .vazio-coluna { background: none; }
}
@layer componentes {
  /* linhas alternadas (zebra) para separar uma linha da outra (Lucas, 09/10/2026) */
  tbody tr:nth-child(even):not(.detalhe) > td { background: var(--n-100); }
  tr.clicavel:hover > td { background: var(--n-200); }
}
@layer componentes {
  /* zebra NAO pode ser o cinza do fundo da pagina: a tabela "sumia" no fundo (Lucas, 09/10/2026).
     Listra quase branca + caixa da tabela com contorno nitido e sombra leve. */
  .tabela-rolagem { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
  tbody tr:nth-child(even):not(.detalhe) > td { background: oklch(.985 0 0); }
  tr.clicavel:hover > td { background: var(--n-100); }
}
@layer componentes {
  /* tabela tem que LER como tabela, e a linha clicavel como botao (Lucas, 09/10/2026):
     cabecalho preto, listra cinza visivel, seta no fim da linha e barra preta no hover */
  .tabela-rolagem { border: 1px solid var(--text); box-shadow: var(--shadow-2); }
  thead th { background: var(--text); color: var(--bg); border-block-end: 0; }
  tbody tr:nth-child(even):not(.detalhe) > td { background: var(--n-100); }
  tbody tr:not(:last-child) > td { border-block-end-color: var(--n-200); }
  tr.clicavel > td:first-child a { font-weight: var(--fw-semibold); text-decoration: none; }
  tr.clicavel > td:last-child::after { content: "›"; margin-inline-start: var(--sp-3); font-size: var(--fs-xl); line-height: 1; color: var(--text-subtle); vertical-align: middle; }
  tr.clicavel:hover > td { background: var(--n-200); }
  tr.clicavel:hover > td:first-child { box-shadow: inset 3px 0 0 var(--text); }
  tr.clicavel:hover > td:last-child::after { color: var(--text); }
}
@layer componentes {
  tr.clicavel > td.acoes-linha { white-space: nowrap; }   /* so a celula dos botoes: texto (ex.: Motivo) quebra linha */
  tr.clicavel .col-acoes, tr.clicavel ~ * .col-acoes, table:has(tr.clicavel) .col-acoes { inline-size: 13rem; }
}

@layer componentes {
  /* Completar (Luiz, 09/10/2026): ETD/ETA calculados, cobertura 4/5/6M por item, total do pedido */
  input.so-leitura { background: var(--surface-2); color: var(--text-muted); cursor: default; }
  .opcoes[aria-invalid="true"] .opcao { border-color: var(--danger); }
  .tabela-itens .opcoes { flex-wrap: nowrap; gap: var(--sp-1); }
  .tabela-itens .opcao { padding: var(--sp-1) var(--sp-2); }
  tfoot td { font-weight: var(--fw-semibold); border-block-start: 1px solid var(--border-strong); background: var(--surface); }
}

@layer componentes {
  /* anexo da justificativa por produto (09/10/2026) */
  .anexo-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); margin: var(--sp-1) 0 0; max-inline-size: none; }
  .anexar-item { margin-block-start: var(--sp-1); }
}

@layer componentes {
  /* capa do pedido (Luiz, 09/10/2026): referencia, prontidao, quantidade e total no topo */
  .capa { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-8);
    padding: var(--sp-4) var(--sp-6); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); }
  .capa dt { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; }
  .capa dd { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
}

@layer componentes {
  /* devolucao por produto (09/10/2026) */
  .dev-item { display: block; margin-block-start: var(--sp-1); color: var(--danger); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
  .dev-lista { display: grid; gap: var(--sp-2); }
  .dev-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
  @media (max-width: 40rem) { .dev-linha { grid-template-columns: 1fr; } }
}

@layer componentes {
  /* anexo do item: caixa de arrastar ou clicar (Lucas, 09/10/2026) */
  .soltar-item { display: grid; gap: 2px; justify-items: center; text-align: center; padding: var(--sp-3) var(--sp-4); margin-block-start: var(--sp-1);
    border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; max-inline-size: 22rem; }
  .soltar-item strong { font-size: var(--fs-sm); }
  .soltar-item small { font-size: var(--fs-xs); color: var(--text-muted); }
  .soltar-item:hover, .soltar-item.sobre { border-color: var(--text); background: var(--n-50); }
  .soltar-item:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
}
@layer componentes {
  /* resultado: o motivo quebra linha dentro da tabela, sem rolagem lateral (Lucas, 09/10/2026) */
  td.motivo { min-inline-size: 18rem; white-space: normal; overflow-wrap: anywhere; font-size: var(--fs-sm); color: var(--text-muted); }
}

/* aprovar/recusar por produto (Tradestar, 09/10/2026) */
td.decisao-item { min-inline-size: 10rem; }
td.decisao-item .chip { margin-inline-end: var(--sp-2); }
td.decisao-item .link { font-size: var(--fs-sm); }
.decidir { display: flex; gap: var(--sp-2); flex-wrap: nowrap; }
.recusa-item { display: grid; gap: var(--sp-2); min-inline-size: 14rem; }
.recusa-item input { inline-size: 100%; }
.recusa-item .anexo-recusa { display: grid; gap: var(--sp-1); font-size: .85em; }
.dec-ok { display: block; margin-block-start: var(--sp-1); color: var(--ok); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.placar { display: block; margin-block-start: var(--sp-1); font-size: var(--fs-sm); color: var(--text-muted); }
.placar b { color: var(--danger); font-weight: var(--fw-semibold); }

/* "nao aceito" e conversa por produto (09/10/2026) */
a.nao-aceito { display: inline-block; margin-block-start: var(--sp-1); color: var(--danger); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
a.dec-espera { display: block; margin-block-start: var(--sp-1); color: var(--text-muted); font-size: var(--fs-sm); }
.conversa { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.conversa li { border-inline-start: 3px solid var(--border-strong); padding: var(--sp-2) var(--sp-3); background: var(--surface); }
.conversa li.conv-recusa { border-color: var(--danger); }
.conversa li.conv-aprovacao { border-color: var(--ok); }
.conversa li.conv-justificativa { border-color: var(--text); }
.conv-cab { margin: 0; font-size: var(--fs-sm); }
.conv-cab time { color: var(--text-muted); margin-inline-start: var(--sp-2); }
.conv-texto { margin: var(--sp-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
td .conv-texto { font-size: var(--fs-sm); }
.conv-anexo { display: inline-block; margin-block-start: var(--sp-1); font-size: var(--fs-sm); }
.conv-mini { margin-block-start: var(--sp-2); font-size: var(--fs-sm); }
.conv-mini summary { cursor: pointer; color: var(--text-muted); }
.conv-mini .conversa { margin-block-start: var(--sp-2); gap: var(--sp-2); }
td.decisao-item .decidir { margin-block-start: var(--sp-2); }
.card-alerta { color: var(--warn); font-weight: var(--fw-semibold); }
.log-pedido .log { margin: 0; }
.log-pedido .log li { grid-template-columns: 8.5rem 6.5rem minmax(0, 1fr); }
@media (max-width: 560px) { .log-pedido .log li { grid-template-columns: 8.5rem minmax(0, 1fr); } }
.ver-conv { display: block; margin-block-start: var(--sp-1); font-size: var(--fs-sm); }
td.decisao-item .btn.primario + .enviada { margin-block-start: var(--sp-1); }
/* alertas da analise (preco e cadastro), feedback TS0168 */
.alerta-item { display: block; margin-block-start: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--warn); }
.alerta-item.preco { color: var(--danger); }
.conv-qtd { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.campo-curto { max-inline-size: 10rem; }
.mudancas { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); margin: 0 0 var(--sp-3); }
.mudancas legend { font-weight: var(--fw-semibold); padding: 0 4px; }
.mud-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sp-2) var(--sp-3); }
.mud-grade .campo { margin: 0; }
.mud-grade small { display: block; margin-top: 2px; }
.prontidao .titulo-linha h2 { margin: 0; }
.proposta-pront { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--warn-bg); border: 1px solid var(--warn); }
.proposta-pront h3 { margin: 0 0 var(--sp-2); }
.de-para { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-2); }
.de-para dt { font-size: var(--fs-sm); color: var(--text-muted); }
.de-para dd { margin: 0; }
.proposta-pront .campo { margin-top: var(--sp-3); }
.conversa li.conv-troca { border-color: var(--warn); }
.saude .quem { display: inline; color: var(--text); }
.login { max-inline-size: 26rem; margin: var(--sp-8) auto; }
.login h1 { margin-block-start: 0; }
/* inicio so com o botao; "Cadastrar pedido": uma area para o pedido e a proforma (15/10/2026) */
.topo-lista { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-6); }
.topo-lista h1 { margin: 0; }
.docs-escolhidos { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-2); }
.docs-escolhidos li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.docs-escolhidos .nome-arq { flex: 1 1 12rem; min-inline-size: 0; overflow-wrap: anywhere; }
.acoes-centro { display: flex; justify-content: center; gap: var(--sp-3); margin-block-start: var(--sp-4); }
/* tela inicial: uma linha por pedido; criado no Conexos fica verde (15/10/2026) */
.lista-pedidos td .muted { font-size: var(--fs-sm); }
.lista-pedidos tr.criado > td, .lista-recentes .lista-pedidos tbody tr.criado:nth-child(even) > td { background: var(--ok-bg); }
.lista-pedidos tr.criado > td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
/* margem e cobertura digitadas */
.com-unidade { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.com-unidade input { inline-size: 4.5rem; text-align: end; }
.com-unidade input[aria-invalid="true"] { border-color: var(--danger); }
.com-unidade span { font-size: var(--fs-sm); color: var(--text-muted); }
/* resultado: codigos */
td.cod { font-family: var(--font-mono); font-size: var(--fs-sm); white-space: nowrap; }
/* resultado com codigo e SKU sem rolagem lateral no computador (o motivo quebra linha) */
.tabela-resultado td:nth-child(2) { min-inline-size: 12rem; }
.tabela-resultado td.motivo { min-inline-size: 12rem; }
.tabela-resultado td.cod { white-space: normal; overflow-wrap: anywhere; max-inline-size: 10rem; }
/* planilha do pedido x sistema: compativel (verde, sem acao) e nao compativel (amarelo, clica para atualizar) */
@layer componentes {
  .btn.nao-compativel { color: var(--text); border-color: var(--warn); background: var(--warn-bg); }
  .btn.nao-compativel:hover { background: color-mix(in oklch, var(--warn-bg), var(--warn) 18%); }
}
/* codigo do Conexos: e por ele que a Tradestar e a VAIP se acham (primeira coluna, em destaque) */
@layer componentes {
  .cod-conexos { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; }
  td.cod-conexos { font-size: var(--fs-sm); }
}
/* aba Aging da mesa (aging.js): so existe no mesa.html */
@layer componentes {
  .abas { display: flex; gap: var(--sp-1); margin-inline-start: var(--sp-6); }
  .abas a { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); color: var(--text-muted); text-decoration: none; font-weight: var(--fw-medium); }
  .abas a:hover { background: var(--surface-2); color: var(--text); }
  .abas a[aria-current="page"] { color: var(--text); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--brand); }
  .filtro-aging { display: flex; gap: var(--sp-4); align-items: end; flex-wrap: wrap; margin-block-end: var(--sp-6); }
  .kpis-aging { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sp-4); margin-block-end: var(--sp-6); }
  .kpis-aging .caixa { display: grid; gap: var(--sp-1); padding: var(--sp-4); }
  .kpis-aging strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
  .grade-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-4); align-items: end; margin-block-end: var(--sp-6); }
  .grade-form .acoes-inline { grid-column: 1 / -1; justify-content: start; }
  ul.nota-coluna { padding-inline-start: var(--sp-6); display: grid; gap: var(--sp-1); margin-block-end: var(--sp-4); }
  .tabela-rolagem caption { text-align: start; padding: var(--sp-2) var(--sp-3); }
}