/* Visual do protótipo do Buzela (docs/prototipo/esboco.html, guia em web/DESIGN.md): barra branca com o bloco azul-marinho
   da Oculare, menu em gaveta, fundo névoa, cartões brancos de canto 12px, tabelas sem linhas verticais, verde-água nos detalhes */
:root{
  --bg:#f3f6f9; --surface:#ffffff; --surface-2:#f3f6f9; --th:#fafbfc; --line:#e2e8ef; --line-2:#edf1f5; --field:#7d8fa4;
  --fg:#0a2540; --body:#0a2540; --muted:#4d5f73;
  --marinho:#003169; --marca:#003169; --on-marca:#ffffff;
  --accent:#003169; --accent-deep:#00244f; --accent-soft:#e8eef6; --accent-tint:#f3faf9; --on-accent:#ffffff;
  --agua:#6eb9af; --agua-esc:#2a756c; --agua-clara:#e6f4f2;
  --info:#003169; --info-soft:#e8eef6;
  --good:#2d7a52; --good-soft:#e5f4ec; --warn:#a85a12; --warn-soft:#fdf1e3; --warn-line:#f1c999;
  --bad:#b03a36; --bad-soft:#fbeaea;
  /* classes do estudo dos produtos: rampas de um tom só, validadas (ordinal, contra a superfície) */
  --abc-a:#003169; --abc-b:#456f9f; --abc-c:#8eaacb; --xyz-x:#1d5a53; --xyz-y:#3f8f85; --xyz-z:#7dbdb3; --on-forte:#ffffff;
  --shadow:0 1px 2px rgba(10,37,64,.05),0 1px 1px rgba(10,37,64,.03); --shadow-barra:0 2px 8px -7px rgba(0,0,0,1);
  --shadow-botao:0 4px 4px rgba(0,0,0,.18); --shadow-gaveta:0 4px 18px rgba(10,37,64,.16); --anel:0 0 0 3px rgba(110,185,175,.3); --veu:rgba(10,37,64,.3);
  --f-body:"Lexend",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-num:"Plus Jakarta Sans","Lexend",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0d1724; --surface:#142235; --surface-2:#1a2b40; --th:#18283c; --line:#263a52; --line-2:#1f3147; --field:#5a7899;
  --fg:#e6edf5; --body:#d3dde8; --muted:#9fb0c3;
  --marinho:#a9c4e8; --marca:#0a2a55; --on-marca:#ffffff;
  --accent:#6eb9af; --accent-deep:#8fcdc4; --accent-soft:#17344a; --accent-tint:#15283a; --on-accent:#08202a;
  --agua:#6eb9af; --agua-esc:#7fcbc0; --agua-clara:#173a3a;
  --info:#9fc3ee; --info-soft:#17304d;
  --good:#6fcf97; --good-soft:#133126; --warn:#f0b46a; --warn-soft:#3a2a14; --warn-line:#6b4a1f;
  --abc-a:#a9c4e8; --abc-b:#6d8fbb; --abc-c:#3e5878; --xyz-x:#8fd3c8; --xyz-y:#55a197; --xyz-z:#33665f; --on-forte:#0d1724;
  --bad:#f28b86; --bad-soft:#3d1c1c; --shadow:none; --anel:0 0 0 3px rgba(110,185,175,.35); --veu:rgba(0,0,0,.45); color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--f-body);font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--agua-esc)}
a:hover{color:var(--marinho)}
/* moldura: barra branca, bloco da marca, botão redondo do menu encavalado na borda dele, trilha, Pergunte e perfil */
.topbar{height:56px;background:var(--surface);box-shadow:var(--shadow-barra);display:flex;align-items:center;position:sticky;top:0;z-index:20}
.logo{height:100%;width:260px;background:var(--marca);display:flex;align-items:center;padding-left:24px;flex:none}
.logo img,.entrar-marca img{height:32px;width:auto;display:block}  /* a logo é branca: fica sempre sobre o bloco da marca */
.menu{position:relative;margin-left:-20px;flex:none}
.menu summary{list-style:none;cursor:pointer;width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--field);box-shadow:var(--shadow-botao);display:flex;flex-direction:column;align-items:center;justify-content:center}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{border-color:var(--agua)}
.menu summary span{display:block;width:18px;height:2.5px;border-radius:20px;background:var(--marinho);margin:2px 0}
.menu[open] summary span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu[open] summary span:nth-child(2){opacity:0}
.menu[open] summary span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu nav{position:fixed;top:56px;left:0;bottom:0;width:300px;max-width:100vw;overflow-y:auto;background:var(--surface);box-shadow:var(--shadow-gaveta);padding:16px 12px 32px}
.menu-grupo{margin:14px 12px 6px;font-size:12px;font-weight:600;color:var(--muted)}
.menu-grupo:first-child{margin-top:4px}
.menu nav a,.menu nav button{display:block;width:100%;text-align:left;font:inherit;border:0;border-left:3px solid transparent;border-radius:0 8px 8px 0;background:none;cursor:pointer;padding:10px 14px;color:var(--fg);text-decoration:none;font-size:13px}
.menu nav form{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}
.menu nav a:hover,.menu nav button:hover{background:var(--accent-tint);color:var(--marinho)}
.menu nav a[aria-current=page]{color:var(--marinho);font-weight:600;background:var(--accent-soft);border-left-color:var(--agua)}
.modulo{flex:1;color:var(--muted);margin-left:16px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.modulo b{color:var(--marinho);font-weight:600}
.perfil{display:flex;align-items:center;gap:8px;height:40px;max-width:200px;border:1px solid var(--line);border-radius:32px;padding:0 12px 0 4px;margin-right:20px;flex:none;color:var(--fg)}
.iniciais{width:30px;height:30px;border-radius:50%;background:var(--marca);color:var(--on-marca);font-size:11px;font-weight:600;letter-spacing:.02em;display:grid;place-items:center;flex:none}
.perfil-txt{min-width:0;line-height:1.2}
.perfil-txt b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perfil-txt small{display:block;font-size:11px;color:var(--muted)}
main{padding:22px 28px 60px}
/* cabeçalho da tela */
.phead{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.backc{width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--marinho);display:grid;place-items:center;flex:none;text-decoration:none;font-size:20px;margin-top:-4px}
.backc:hover{background:var(--accent-soft);color:var(--marinho)}
h1{font-family:var(--f-num);font-size:23px;line-height:30px;font-weight:700;letter-spacing:-.01em;color:var(--fg);margin:0}
.sub{margin:4px 0 0;font-size:13px;color:var(--muted)}
h2{font-size:14px;margin:0 0 10px;color:var(--marinho);font-weight:600}
.stack{display:flex;flex-direction:column;gap:16px}
.stack>.toolbar{margin-bottom:0}
.grid{display:grid;gap:16px}
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* cartões */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0;box-shadow:var(--shadow)}
.panel>h2:first-child{margin:-14px -16px 12px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.panel>h2:only-child{margin-bottom:-14px;border-bottom:0}   /* o painel que é só o título (pronto para mandar) */
.panel.tbl{padding:0;overflow-x:auto}
.rola{overflow-x:auto}
.panel.tbl>h2:first-child{margin:0}
.panel.tbl>p,.panel.tbl>form>p,.panel.tbl>details>p{margin:10px 16px}
/* tabelas: cabeçalho em cinza e caixa normal, sem linhas verticais */
table{border-collapse:collapse;width:100%;font-size:12.5px}
th{text-align:left;color:var(--muted);background:var(--th);font-size:12px;font-weight:600;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td:not(.cel){background:var(--accent-tint)}   /* a célula da matriz mantém o tom */
td a{color:var(--marinho);font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}
.num{text-align:right;white-space:nowrap;font-family:var(--f-num);font-variant-numeric:tabular-nums}
th.num{font-family:var(--f-body)}
/* etiquetas em pílula */
.pill{display:inline-block;font-family:var(--f-body);font-size:11px;line-height:16px;padding:3px 9px;border-radius:999px;font-weight:600;white-space:nowrap}
.p-good{background:var(--good-soft);color:var(--good)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-bad{background:var(--bad-soft);color:var(--bad)}
.p-info{background:var(--info-soft);color:var(--info)}
.p-mute{background:var(--surface-2);color:var(--muted)}
/* campos e botões */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
input[type=search],input[type=text],input[type=password],input[type=date],input[type=month],input[type=time],input[type=email],input[type=tel],select{font:inherit;font-size:13px;padding:0 10px;height:34px;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--fg)}
input:not([type=checkbox],[type=radio],[type=file]):focus,select:focus,textarea:focus{outline:none;border-color:var(--agua-esc);box-shadow:var(--anel)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input[type=search],.toolbar input[type=text]{flex:1 1 240px;min-width:0}
label.chk{display:inline-flex;gap:6px;align-items:center;font-size:13px}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
input[type=file]{font:inherit;font-size:12.5px;color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:500;height:32px;padding:0 14px;margin-right:10px;border:1px solid var(--accent);border-radius:8px;background:var(--surface);color:var(--accent);cursor:pointer}
.btn{font:inherit;font-size:13px;font-weight:500;height:34px;padding:0 16px;border-radius:8px;border:1px solid var(--accent);background:var(--surface);color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--accent-soft);color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--on-accent)}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.btn.perigo{border-color:var(--bad);color:var(--bad)}
.btn.perigo:hover{background:var(--bad-soft);color:var(--bad)}
:focus-visible{outline:2px solid var(--agua-esc);outline-offset:2px}
.muted{color:var(--muted)}
.so-leitor{position:absolute;top:0;left:0;margin:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.small{font-size:12px}
.nowrap{white-space:nowrap}
.bloco{display:block;margin-top:2px}
.note{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.paginas{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px}
.envio{display:flex;flex-direction:column;gap:12px;font-size:13px}
.envio label{display:flex;flex-direction:column;gap:4px}
.envio input{font:inherit;max-width:100%}
textarea,.envio textarea{font:inherit;font-size:13px;line-height:1.5;padding:8px 12px;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--fg);max-width:100%;resize:vertical}
fieldset{border:0;padding:0;margin:0;min-width:0}
.aviso{color:var(--bad);margin:0}
/* O que vence logo (certificado A1, notas só em resumo), no topo das telas do Administrador */
.avisos{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.avisos p{margin:0;background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line);border-radius:8px;padding:9px 12px}
.avisos a{color:inherit;font-weight:600}
.cert-chave{word-break:break-all}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0;font-size:13px}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0;color:var(--fg)}
.entrar{max-width:380px;margin:48px auto 0}
.entrar label,.form-usuario label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
.entrar form{display:flex;flex-direction:column;gap:14px}
.entrar .btn{justify-content:center}
.erro,.ok{color:var(--bad);background:var(--bad-soft);border-radius:8px;padding:9px 12px;margin:0 0 12px}
.ok{color:var(--good);background:var(--good-soft)}
.form-usuario{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.form-usuario input{min-width:0}
/* abas: a ativa em azul-marinho com o traço verde-água */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.abas a{position:relative;display:flex;align-items:center;height:44px;padding:0 14px;color:var(--muted);text-decoration:none;font-size:13px;white-space:nowrap}
.abas a:hover{color:var(--marinho)}
.abas a[aria-current=page]{color:var(--marinho);font-weight:600}
.abas a[aria-current=page]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--agua)}
.abas .apagada{display:flex;align-items:center;height:44px;padding:0 14px;color:var(--muted);opacity:.55;font-size:13px;white-space:nowrap;cursor:default}
.abas .n{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:6px;border-radius:50%;font-family:var(--f-num);font-size:11px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--field)}
.abas a[aria-current=page] .n{background:var(--accent);color:var(--on-accent);box-shadow:none}
.chart svg{width:100%;max-width:720px;height:auto;display:block}
.chart text{fill:var(--muted);font-size:11px}
.btn.pergunte{margin:0 10px 0 12px;flex:none;height:32px;padding:0 14px;border-radius:999px;border-color:var(--agua);background:var(--accent-tint);color:var(--agua-esc);font-size:12.5px}
.btn.pergunte:hover{background:var(--agua-clara);color:var(--marinho)}
.resposta{font-family:var(--f-num);font-size:28px;font-weight:700;color:var(--fg);margin:0}
details.panel>summary{cursor:pointer;font-weight:600;color:var(--marinho)}
.exemplos{display:grid;gap:8px}
.exemplos button{font:inherit;font-size:13px;color:var(--marinho);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;cursor:pointer;text-align:left}
.exemplos button:hover{background:var(--accent-tint);border-color:var(--agua)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;margin:10px 0 0}
.codigos{margin:0;padding:0;list-style:none}
.codigos li+li{margin-top:2px}
/* filtros num cartão, faixa de informação e números da importação (no protótipo: cl-filtros, co-info e at-nums) */
.filtros{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.faixa,.numeros{margin:0;display:grid}
.faixa{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.7fr);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.faixa>div{padding:14px 18px;border-left:1px solid var(--line-2);min-width:0}
.faixa>div:first-child{border-left:0}
.faixa dt{font-size:12px;font-weight:600;color:var(--muted)}
.faixa dd,.numeros dd{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.faixa b,.numeros b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:19px;font-weight:700;color:var(--fg)}
.minimo{display:flex;gap:8px;margin-top:6px}
.minimo input{flex:1 1 120px;min-width:0}
.numeros{grid-template-columns:repeat(4,minmax(0,1fr));margin:-1px 0 0 -1px}
.numeros>div{padding:14px 16px;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);min-width:0}
.numeros dt{font-size:12px;font-weight:500;color:var(--muted)}
.numeros b{display:block;font-size:24px}
.numeros b.alerta{color:var(--warn)}
.numeros b.ruim{color:var(--bad)}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.slots.um{grid-template-columns:minmax(0,1fr)}  /* uma caixa só, como a de Receber a proposta */
p.frete{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px}  /* o frete da proposta, numa linha */
p.frete label{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:500}
.envio .slots label{gap:10px;padding:18px 16px;border:1.5px dashed var(--field);border-radius:12px;background:var(--surface-2);font-weight:500;color:var(--fg)}
.envio .slots label:focus-within{border-color:var(--agua-esc)}
.envio .slots label.arrastando{border-color:var(--agua-esc);border-style:solid;background:var(--agua-clara)}  /* arquivo arrastado sobre a caixa */
/* fornecedores em linhas de cartão (no protótipo: fo-linha) */
.fo-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fo-linha{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,.9fr);gap:10px 18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 18px;box-shadow:var(--shadow);font-size:12.5px;line-height:1.55;color:var(--muted)}
.fo-linha:hover{border-color:var(--agua)}
.fo-linha b{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:700;color:var(--fg)}
.fo-cel{min-width:0}
.fo-nome{font-weight:600;font-size:13px;color:var(--marinho);text-decoration:none}
.fo-nome:hover{text-decoration:underline}
/* coleta: situação com ponto, passos, referências do item e tabela de ofertas (no protótipo: sit, passos, refs-item,
   table.ofertas e pd-cab) */
.sit{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-family:var(--f-body);font-size:11.5px;font-weight:600;letter-spacing:0;line-height:16px;white-space:nowrap;vertical-align:middle}
.sit::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.sit-aberta,.sit-cancelada{background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.sit-enviada{background:var(--info-soft);color:var(--info)}
.sit-analise{background:var(--warn-soft);color:var(--warn)}
.sit-decidida{background:var(--agua-clara);color:var(--agua-esc)}
.sit-gerado{background:var(--surface);color:var(--marinho);box-shadow:inset 0 0 0 1px var(--marinho)}
.sit-conciliada{background:var(--good-soft);color:var(--good)}
.phead{flex-wrap:wrap}
.phead>div{flex:1 1 240px;min-width:0}
/* lista de coletas: os dois botões de criar no cabeçalho, o quadro da cotação vazia, os prazos em duas colunas, a barra
   das atrasadas e urgentes, o bloco das encerradas e, no celular, o cartão de 3 ou 4 linhas */
.phead>.acoes-nova{flex:none;margin-left:auto;display:flex;gap:8px;align-items:flex-start;position:relative}
.cab-lista{align-items:center}
.acoes-nova form{margin:0}
.acoes-nova .note{margin:4px 0 0;font-size:12px}
.btn.arquivo{position:relative;overflow:hidden}
.btn.arquivo input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.btn.arquivo:focus-within{outline:2px solid var(--agua-esc);outline-offset:2px}
details.vazia>summary{list-style:none}
details.vazia>summary::-webkit-details-marker{display:none}
details.vazia>summary::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:-3px 0 0 4px}
details.vazia[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
/* a fila dos pedidos do Smart enviados à lista: uma linha por arquivo, que quebra no celular */
.fila-pedidos{list-style:none;margin:0 0 16px;padding:0}
.fila-pedidos[hidden]{display:none}
.fila-pedidos li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 16px;border-top:1px solid var(--line-2)}
.fila-pedidos li:first-child{border-top:0}
.fila-pedidos form{margin:0}
.fila-arquivo{font-weight:600;overflow-wrap:anywhere}
.fila-estado{flex:1 1 220px;color:var(--muted)}
.fila-pronto .fila-estado::before{content:"✓ ";color:var(--good)}
.fila-problema .fila-estado{color:var(--bad)}
.fila-lendo .fila-estado{font-style:italic}
/* arquivo arrastado sobre a lista: a página inteira vira o lugar de soltar */
.soltar{position:fixed;inset:12px;z-index:50;display:grid;place-items:center;border:2px dashed var(--agua-esc);border-radius:12px;background:var(--agua-clara);color:var(--fg);font-size:18px;font-weight:600;pointer-events:none;opacity:.95}
.soltar[hidden]{display:none}
.form-vazia{position:absolute;right:0;top:42px;z-index:5;width:340px;display:grid;gap:12px;box-shadow:var(--shadow-gaveta)}
.form-vazia label{display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.form-vazia .prazo{display:grid;grid-template-columns:1fr 110px;gap:8px}
.form-vazia .btn{justify-self:start}
.lista-coletas td{vertical-align:middle}
.lista-coletas td.comprar-ate,.lista-coletas td.resp-ate{white-space:nowrap;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.lista-coletas td.resp-ate .bloco{white-space:normal}
.lista-coletas .aviso{color:var(--warn);font-family:var(--f-body);font-size:12px}
.lista-coletas tr.vence td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.lista-coletas td.criada{white-space:nowrap}
.lista-coletas .so-celular,.lista-coletas.fechada .comprar-ate,.lista-coletas.fechada .resp-ate{display:none}
details.encerradas>summary{display:flex;gap:8px;padding:12px 16px;color:var(--marinho);font-weight:600}
details.encerradas[open]>summary{border-bottom:1px solid var(--line-2)}
@media (max-width:820px){
  .cab-lista{align-items:flex-start}
  .phead>.acoes-nova{flex:1 1 100%;margin-left:0;position:static}
  .acoes-nova>form,.acoes-nova>details{flex:1}
  .acoes-nova .btn{width:100%;justify-content:center}
  .phead.cab-lista{position:relative}
  .form-vazia{left:0;right:0;width:auto;top:auto;margin-top:8px}
  table.cartoes.lista-coletas tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;padding:12px 16px}
  table.cartoes.lista-coletas td{display:block;padding:0}
  table.cartoes.lista-coletas td.item{flex:1 1 0;min-width:0}
  table.cartoes.lista-coletas td.etapa{flex:none;margin-left:auto}
  /* a linha nova depois da pílula, também no cartão sem prazo (encerradas, enviar pedidos): itens e quem criou nunca
     sobem para a linha do nome */
  table.cartoes.lista-coletas tr::before{content:"";order:2;flex-basis:100%;height:0;margin-top:-4px}
  table.cartoes.lista-coletas td.item,table.cartoes.lista-coletas td.etapa{order:1}
  table.cartoes.lista-coletas td:not(.item,.etapa){order:3}
  table.cartoes.lista-coletas td.comprar-ate,table.cartoes.lista-coletas td.resp-ate{flex:1 0 100%;font-size:12.5px}
  table.cartoes.lista-coletas td.resp-ate .bloco{display:inline;margin-left:4px}
  table.cartoes.lista-coletas td.vazio{display:none}
  table.cartoes.lista-coletas td.comprar-ate::before{content:"Comprar até ";color:var(--muted);font-family:var(--f-body)}
  table.cartoes.lista-coletas td.resp-ate::before{content:"Respostas até ";color:var(--muted);font-family:var(--f-body)}
  table.cartoes.lista-coletas td.qtd,table.cartoes.lista-coletas td.criada{flex:none;font-size:12px;color:var(--muted);text-align:left}
  .lista-coletas .so-celular{display:inline}
  .lista-coletas tr.vence td:first-child{box-shadow:none}
  .lista-coletas tr.vence{box-shadow:inset 3px 0 0 var(--bad)}
}
.passos{list-style:none;margin:0 0 0 auto;padding:0;display:flex;align-items:flex-start}
.passos li{position:relative;display:grid;justify-items:center;gap:5px;width:78px;text-align:center}
.passos li::before{content:"";position:absolute;top:12px;right:50%;width:100%;height:2px;background:var(--field)}
.passos li:first-child::before{display:none}
.passos .bola{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-num);font-size:12px;font-weight:700;background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--field)}
.passos small{font-size:10.5px;line-height:1.2;color:var(--muted)}
.passos .feito .bola,.passos .atual .bola{background:var(--accent);color:var(--on-accent);box-shadow:none}
.passos .feito::before,.passos .atual::before{background:var(--accent)}
.passos .atual .bola{box-shadow:var(--anel)}
.passos .atual small{color:var(--marinho);font-weight:600}
.num-item{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--marinho);font-family:var(--f-num);font-size:11.5px;font-weight:700;margin-right:8px;vertical-align:1px}
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 16px 14px}
.refs p{margin:0;background:var(--surface-2);border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.5;color:var(--muted)}
.refs b{font-family:var(--f-num);font-size:13px;color:var(--fg)}
.rot{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
table.ofertas th{background:var(--marca);color:var(--on-marca);border-bottom:0}
table.ofertas tr[data-menor] td{background:var(--good-soft)}
table.ofertas th,table.ofertas td{padding-left:10px;padding-right:10px}
td.etiquetas{white-space:normal;min-width:130px}
td.etiquetas .pill{white-space:normal;margin:0 2px 3px 0;border-radius:10px}
table.ofertas tr[data-menor] .p-good{background:var(--surface)}
.pedido>h2:first-child{background:var(--marca);color:var(--on-marca);border-bottom:0}
/* aba Pedidos: o total e a situação na faixa, as condições numa linha, o envio e os links em ordem, o cancelado cinza */
.ped-cab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ped-cab .total{margin-left:auto;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.pedido>h2 .a-enviar{background:var(--surface);color:var(--marinho)}
.panel.tbl>p.condicoes{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding:10px 16px;border-bottom:1px solid var(--line-2);font-size:12.5px;color:var(--muted)}
.condicoes b{color:var(--fg);font-weight:500}
.sub-linha{display:block;font-size:11.5px;font-weight:400;color:var(--muted);white-space:normal}
table.linhas tfoot td{font-weight:600;color:var(--fg)}
table.a-gerar tfoot td{font-weight:600;color:var(--fg);border-top:1px solid var(--line)}
table.a-gerar form{margin-top:6px}
.link-btn{font:inherit;background:none;border:0;padding:0;color:var(--agua-esc);text-decoration:underline;cursor:pointer}
.gerar-pe{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;justify-content:space-between;padding:4px 16px 12px}
.gerar-pe form{margin:0}
.gerar-form{flex:1 1 420px}
.campos-faltam{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:4px 12px;padding-top:12px}
.campos-faltam label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
.campos-faltam p{grid-column:1/-1;margin:0}
.dados-pedido{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px;margin:0}
.dados-pedido dt{font-size:12px;font-weight:500;color:var(--muted)}
.dados-pedido dd{margin:2px 0 0;color:var(--fg)}
details.editar{margin-top:8px}
details.editar>summary,.ped-pe summary{cursor:pointer;color:var(--agua-esc);text-decoration:underline;list-style:none}
details.editar>summary::-webkit-details-marker,.ped-pe summary::-webkit-details-marker{display:none}
details.editar form{margin-top:8px}
.ped-envio{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start;padding:14px 16px;border-top:1px solid var(--line-2)}
.ped-envio>form,.ped-envio>p{margin:0}
/* os botões na altura do campo da AF, que tem o rótulo em cima; a data e o canal, abertos, vão na linha de baixo */
.ped-envio .botoes{align-items:center}
.ped-envio>[data-salva]~.botoes,.ped-envio>[data-salva]~p{margin-top:22px}
.ped-envio .outro[open]{flex-basis:100%}
.ped-envio .outro>label{display:inline-flex;margin:6px 12px 0 0}
.ped-pe{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;padding:10px 16px 12px;font-size:12.5px;border-top:1px solid var(--line-2)}
.ped-pe details[open]{flex-basis:100%}
.ped-pe details form{margin-top:8px}
.ped-pe .cancelar{margin-left:auto}
.ped-pe .cancelar>summary{color:var(--bad)}
.ped-pe .cancelar[open]{margin-left:0}
.ped-pe textarea{width:100%;margin-top:8px}
details.itens>summary{cursor:pointer;padding:10px 16px;font-size:12.5px;color:var(--agua-esc)}
.nota-linha{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.nota-linha p,.nota-linha form{margin:0}
.panel.pedido-cancelado>h2:first-child{font-size:13px;margin:-14px -16px 0;padding:12px 16px 4px;border-bottom:0}
.pedido-cancelado p{margin:0}
@media (max-width:640px){
  .panel.tbl table.linhas,.panel.tbl table.a-gerar{min-width:0}
  table.linhas,table.linhas tbody{display:block}
  table.linhas thead{display:none}
  table.linhas tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 16px;border-bottom:1px solid var(--line-2)}
  table.linhas tbody td{display:block;border:0;padding:0}
  table.linhas td.item,table.linhas td.mc,table.linhas td.pz{grid-column:1/-1}
  table.linhas td.mc,table.linhas td.pz{font-size:12px;color:var(--muted)}
  table.linhas td.q{text-align:left;white-space:normal}
  table.linhas td.pu{display:none}
  table.linhas tfoot{display:table;width:100%}
  table.linhas tfoot td.vazio{display:none}
  table.a-gerar .col-sub,table.a-gerar .col-frete{display:none}
  table.a-gerar td{white-space:normal}
  table.a-gerar td.num{white-space:nowrap}
  .dados-pedido,.campos-faltam{grid-template-columns:minmax(0,1fr)}
  .ped-envio .botoes>.btn{flex:1 1 100%;justify-content:center}
  .ped-envio>[data-salva]~.botoes,.ped-envio>[data-salva]~p{margin-top:0}
  .ped-cab .total{margin-left:0;width:100%}
}
.metricas{display:flex;flex-wrap:wrap;gap:8px 32px;margin:0;background:var(--surface-2);border-radius:8px;padding:10px 14px}
.metricas dt{font-size:12px;color:var(--muted)}
.metricas dd{margin:2px 0 0;font-family:var(--f-num);font-size:15px;font-weight:600;color:var(--fg)}
.metricas dd span{font-family:var(--f-body);font-weight:400}
/* montar a cotação: filtro por caminho em fichas, botões segmentados do caminho, marca na linha e itens em cartões no
   celular (no protótipo da cotação nova: chips, seg e a tabela que vira cartões) */
.massa{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font-size:12.5px;text-decoration:none}
.chip:hover{border-color:var(--agua);color:var(--marinho)}
.chip b{font-family:var(--f-num);font-weight:600;color:var(--muted)}
.chip[aria-current]{background:var(--agua-clara);border-color:var(--agua);color:var(--agua-esc);font-weight:600}
td.marcar{width:1%}
table.cartoes td.item{min-width:220px}
table.cartoes th{white-space:normal}
td.qtd{text-align:right}
html:not(.js) .so-js{display:none}
@media (max-width:820px){
  .panel.tbl table.cartoes{min-width:0}
  table.cartoes thead{display:none}
  table.cartoes tr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;padding:12px 16px;border-bottom:1px solid var(--line-2)}
  table.cartoes td{display:block;border:0;padding:0;grid-column:2;text-align:left}
  table.cartoes td.marcar{grid-column:1;grid-row:1}
  table.cartoes td.item{min-width:0}
  table.cartoes td.qtd{text-align:left}
  table.cartoes td.igual{display:none}  /* o pedido do Smart casou pelo código: o nome na base repetiria o do pedido */
  table.cartoes tbody tr:hover td{background:none}
  /* o rótulo curto à esquerda e o valor à direita, também na 2ª linha dele (recuo do valor, rótulo flutuando no recuo) */
  table.cartoes td.curta[data-l]{display:flow-root;padding-left:130px}
  table.cartoes td.curta[data-l]::before{float:left;width:120px;margin:0 0 0 -130px}
  table.cartoes td[data-l]::before{content:attr(data-l);display:block;font-family:var(--f-body);font-size:11.5px;font-weight:600;white-space:normal;color:var(--muted);margin-bottom:2px}
}
@media (pointer:coarse){.seg button{height:44px}.chip{height:40px}}
/* convites da cotação nova: a lista "Antes de mandar", os convidados de cada item em etiquetas com o × e o "+ convidar" */
.falta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px 18px}
.falta li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;font-size:12.5px;line-height:1.4}
.falta li>span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px}
.falta li.nao>span{background:var(--bad-soft);color:var(--bad)}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--fg)}
.tag.sem{background:var(--warn-soft);border-color:var(--warn-line)}
.tag form{display:inline;margin:0}
.tag button{font:inherit;border:0;background:none;color:var(--muted);cursor:pointer;width:22px;height:22px;border-radius:50%}
.tag button:hover{background:var(--bad-soft);color:var(--bad)}
form.add{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
form.add select{flex:1 1 160px;min-width:0;max-width:280px}
.form-usuario label.largo{flex:1 1 280px}
.btn:disabled{opacity:.45;cursor:not-allowed}
@media (pointer:coarse),(max-width:520px){.tag button{width:44px;height:44px}}
/* filtros das listas (web/templates/filtros.html): rótulo junto do select, marcas numa linha, Filtrar só sem JavaScript */
.campo{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted)}
.marcas{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;flex-basis:100%}
.rot-suspeita{font-size:12.5px;font-weight:600;color:var(--warn);margin-left:6px}
html.js .sem-js{display:none}
/* De e Até do período Personalizado (Economia): com JavaScript, só com ele escolhido; escondidos, ficam fora do filtro */
html.js .filtros:not(:has(option[value=personalizado]:checked)) .personalizado{display:none}
/* filtros da gestão: o mês com as setas (só com "Um mês"), o fornecedor com lista e o painel Mais controle */
html.js .filtros:not(:has(option[value=mes]:checked)) .so-mes{display:none}
.so-mes{gap:4px}
.passo{width:30px;height:34px;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--marinho);font:inherit;font-size:17px;line-height:1;cursor:pointer}
.passo:hover{background:var(--accent-soft)}
.campo-fornecedor{flex:1 1 260px}
.filtros-gestao .campo-fornecedor input{flex:1 1 auto;min-width:0}
.mais-filtros{flex-basis:100%;border-top:1px solid var(--line-2);padding-top:9px}
.mais-filtros>summary{cursor:pointer;width:max-content;color:var(--agua-esc);font-weight:500;font-size:12.5px}
.mais-filtros[open]>summary{margin-bottom:10px}
.mais-filtros .linha{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center}
.filtros input[type=number]{font:inherit;font-size:13px;width:64px;height:34px;padding:0 8px;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--fg);text-align:right}
.filtros input[type=number]:focus{outline:none;border-color:var(--agua-esc);box-shadow:var(--anel)}
@media (pointer:coarse){.passo,.filtros input[type=number]{height:44px}.passo{width:40px}}
.limpar{font-size:12.5px}
[data-atualiza][aria-busy=true]{opacity:.55;transition:opacity .15s}
/* linha inteira clicável: tr[data-href] pelo telas.js; o cartão do fornecedor, pelo link esticado sobre ele */
tr[data-href]{cursor:pointer}
.fo-linha{position:relative}
.fo-nome::after{content:"";position:absolute;inset:0;border-radius:12px}
.fo-cnpj{position:relative}  /* por cima do link esticado: o CNPJ dá para selecionar e copiar */
.fo-nome:focus-visible{outline:0}
.fo-linha:has(.fo-nome:focus-visible){outline:2px solid var(--agua-esc);outline-offset:2px}
/* menu aberto: fundo escurecido, que fecha ao clicar */
.menu[open]::before{content:"";position:fixed;inset:56px 0 0;background:var(--veu)}
/* economia e pergunte (no protótipo: ec-secao, leitura, bandas da tabela por mês e pg-ia) */
.leitura{margin:10px 16px;padding:10px 12px;border-left:3px solid var(--agua);border-radius:0 8px 8px 0;background:var(--accent-tint);font-size:13px;color:var(--fg)}
th.banda-cot,th.banda-rea{text-align:center}
th.banda-cot{background:var(--marca);color:var(--on-marca)}
th.banda-rea{background:var(--agua-clara);color:var(--agua-esc)}
.ruim{color:var(--bad)}
.panel>h2 small{font-size:11.5px;font-weight:400;margin-left:6px}
.leitura.alerta{border-left-color:var(--warn);background:var(--warn-soft)}
/* Alertas do dia no topo da Gestão: uma linha por alerta, os casos abrem embaixo */
.alertas>details,.alertas>p{margin:0;padding:7px 0;border-top:1px solid var(--line-2)}
.alertas>h2+details,.alertas>h2+p{border-top:0}
.alertas>details>summary{cursor:pointer}
.alertas ul{margin:6px 0 0;padding-left:18px}
.alertas li{overflow-wrap:anywhere}
.alerta-destaque{color:var(--warn);font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kpi{display:grid;gap:6px;align-content:start}
.kpi>h2:first-child{margin:0;padding:0;border:0;font-size:12.5px;font-weight:500;color:var(--muted)}
.kpi h2 small{display:block;margin:0}
.kpi .resposta{font-size:24px}
.kpi .resposta a{color:inherit;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--agua)}
.kpi-tipo{display:flex;flex-wrap:wrap;gap:4px 14px;margin:2px 0 0;padding-top:7px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--muted)}
.kpi-tipo b{font-family:var(--f-num);font-weight:600;color:var(--fg)}
/* barras por mês: a tabela logo abaixo traz os mesmos números */
.barras{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;height:180px;margin:6px 16px 0;border-bottom:1px solid var(--line)}
.barras .mes{display:grid;grid-template-rows:1fr auto;min-width:0}
.barras .par{display:flex;align-items:flex-end;justify-content:center;gap:3px}
.barras .b,.legenda i{width:min(16px,40%);border-radius:4px 4px 0 0;background:var(--marinho)}
.barras .rea,.legenda i.rea{background:var(--agua)}
.barras .neg,.legenda i.neg{background:var(--bad)}
.rot-mes{text-align:center;font-family:var(--f-num);font-size:10.5px;color:var(--muted);padding:6px 0 4px}
.legenda{display:flex;gap:16px;flex-wrap:wrap;margin:10px 16px;font-size:12px;color:var(--muted)}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
tr.total-linha td{font-weight:700;background:var(--surface-2)}
/* gestão: a fila das decisões (cada uma abre o porquê) e os blocos que explicam a fila */
/* os quatro números da gestão numa faixa só, separados por linha fina, e não em quatro cartões soltos */
.kpis.quatro{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.kpis.quatro>.kpi{border:0;border-left:1px solid var(--line-2);border-radius:0;box-shadow:none}
.kpis.quatro>.kpi:first-child{border-left:0}
.bom{color:var(--good)}
/* a fila é uma planilha: cada decisão numa linha com as mesmas colunas do cabeçalho; aberta, o porquê à esquerda,
   alinhado com o título, e a escolha à direita */
.dec-cab,.dec>summary{display:grid;grid-template-columns:140px minmax(0,1fr) 110px 140px 12px;grid-template-areas:"tipo tit area valor seta";gap:0 14px;align-items:center;padding:9px 16px}
.sinais .dec-cab,.sinais .dec>summary{grid-template-columns:minmax(0,1fr) 110px 140px 12px;grid-template-areas:"tit area valor seta"}
.dec-cab{padding-top:8px;padding-bottom:8px;background:var(--th);border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}
.dec-tipo{grid-area:tipo;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dec-tit{grid-area:tit;min-width:0;color:var(--fg);font-weight:600}
.dec>summary .dec-tit{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dec-area{grid-area:area;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dec-valor{grid-area:valor;text-align:right;min-width:0}
.dec-valor b{display:block;font-size:14px;color:var(--fg)}
.dec-valor small{display:block;font-size:11px;line-height:1.3;color:var(--muted);white-space:normal}
.dec{border-top:1px solid var(--line-2)}
.dec-cab+.dec{border-top:0}
.sinais .dec-tipo{display:none}
.dec>summary,.mais>summary{list-style:none;cursor:pointer}
.dec>summary::-webkit-details-marker,.mais>summary::-webkit-details-marker{display:none}
.dec>summary::after{content:"›";grid-area:seta;font-size:18px;line-height:1;color:var(--muted);transition:transform .15s}
.dec[open]>summary::after{transform:rotate(90deg);color:var(--marinho)}
.dec>summary:hover,.dec[open]>summary{background:var(--accent-tint)}
.dec[open]>summary .dec-tit{white-space:normal}   /* aberta, o título aparece inteiro */
.dec-pq{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.dec-corpo{display:grid;gap:14px 28px;padding:12px 16px 18px 170px}   /* 170px: o porquê começa na coluna do título */
.dec-corpo.com-escolha{grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr);align-items:start}
.dec-ler>.dec-pq{margin:0 0 6px;color:var(--fg);font-size:13px}
.dec-ler>p.small{margin:0 0 6px}
.dec-corpo ul{margin:0 0 8px;padding-left:18px}
.dec-corpo .leitura{margin:8px 0}
.escolha{display:grid;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.escolha fieldset{display:grid;gap:6px}
.escolha legend{font-weight:600;color:var(--marinho);margin-bottom:4px}
.opcao-dec{display:flex;gap:8px;align-items:baseline;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}
.opcao-dec:has(:checked){border-color:var(--accent);background:var(--accent-soft)}   /* as opções em cartão, a escolhida com a borda da marca */
.dec-escolha{color:var(--fg);font-weight:600}
.decidida .btn{height:30px;padding:0 12px;border-color:var(--line);color:var(--muted)}   /* desfazer é a exceção: discreto */
.escolha textarea{width:100%;font:inherit}
.escolha .btn{justify-self:start}
.decidida{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:start;padding:12px 16px;border-top:1px solid var(--line-2);overflow-wrap:anywhere}
.decidida>div{display:grid;gap:4px}
.decidida .dec-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.mais{border-top:1px solid var(--line-2)}
.mais>summary{padding:12px 16px;color:var(--agua-esc);font-weight:500}
.areas{display:grid;gap:10px;margin:14px 16px}
.area-linha{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,2fr) auto;gap:10px;align-items:center;font-size:12.5px}
.trilho{height:10px;border-radius:5px;background:var(--surface-2)}
.trilho i{display:block;height:100%;border-radius:5px;background:var(--marinho)}
.barras .prev,.legenda i.prev{background:var(--agua)}
.note.pad{margin:10px 16px 14px}
.ok.pad{margin:10px 16px}
html{scroll-padding-top:72px}   /* a âncora (#decidir, a decisão com erro) não fica embaixo do topo fixo */
.dec-como{margin-top:12px;border-top:1px solid var(--line-2);padding-top:8px}
.dec-como>summary{cursor:pointer;color:var(--agua-esc);font-weight:500;font-size:12.5px}
.stack>.dec-como:first-child{margin-top:0;border-top:0;padding-top:0}   /* no topo da aba, sem a linha de cima */
.dec-como>ul{margin-top:8px}
.panel>.dec-como{margin:0 16px 14px}
.escolha:not(:has([data-motivo]:checked)) .campo-motivo{display:none}   /* o motivo só quando a opção pede */
.opcao-dec input{accent-color:var(--marinho);width:18px;height:18px;flex:none;align-self:center}
@media (max-width:1060px){
  .kpis.quatro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis.quatro>.kpi:nth-child(3){border-left:0}
  .kpis.quatro>.kpi:nth-child(n+3){border-top:1px solid var(--line-2)}
  .dec-corpo{padding-left:16px}
}
/* no celular a linha vira duas: tipo, área, confiança e valor em cima; o título embaixo, em até duas linhas */
@media (max-width:760px){
  .dec-cab{display:none}
  .dec>summary,.sinais .dec>summary{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"tipo area valor" "tit tit tit";gap:4px 10px;padding:10px 16px}
  .sinais .dec>summary{grid-template-areas:"area area valor" "tit tit tit"}
  .dec>summary::after{display:none}
  .dec>summary .dec-tit{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .dec-tipo:empty,.dec-area:empty{display:none}
  .dec-corpo.com-escolha{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .kpis.quatro .kpi{padding:10px 12px}
  .kpis.quatro .resposta{font-size:20px}
  .decidida{grid-template-columns:minmax(0,1fr)}
  .area-linha{grid-template-columns:minmax(0,1fr) auto}
  .area-linha .trilho{grid-column:1 / -1;order:3}
  .panel.tbl table.curta{min-width:0}
  .panel.tbl table.curta td.num .small{white-space:normal}
}
/* gestão: o estudo dos produtos. Curva ABC em SVG, classes em barra-tabela (número fora da barra), matriz ABC x XYZ
   com o tom pela parte do gasto e a tabela da classe A com "ver todos" sem JavaScript */
.phead>.btn{align-self:center}
.topo-decisoes,.topo-estudo{align-items:start}   /* o número das firmes não estica até a altura da tabela ao lado */
.abc-a{background:var(--abc-a);fill:var(--abc-a)}
.abc-b{background:var(--abc-b);fill:var(--abc-b)}
.abc-c{background:var(--abc-c);fill:var(--abc-c)}
.xyz-x{background:var(--xyz-x);fill:var(--xyz-x)}
.xyz-y{background:var(--xyz-y);fill:var(--xyz-y)}
.xyz-z{background:var(--xyz-z);fill:var(--xyz-z)}
.pareto{margin:12px 16px 4px}
.pareto svg{display:block;width:100%;height:auto}
.pareto .faixa{opacity:.14}
.pareto .grade{stroke:var(--line);stroke-width:1}
.pareto .eixo{fill:var(--muted);font-size:11px;font-family:var(--f-num)}
.pareto .rot-faixa{fill:var(--muted);font-size:13px;font-weight:600}
.pareto .linha{fill:none;stroke:var(--marinho);stroke-width:2;stroke-linejoin:round}
.pareto .marco{fill:var(--marinho);stroke:var(--surface);stroke-width:2}
.pareto .rot-marco{fill:var(--fg);font-size:12px;font-weight:600}
table.classes th[scope=row]{font-size:12.5px;color:var(--fg);background:none;white-space:nowrap}
table.classes td{white-space:nowrap}
.barra-tab{display:inline-block;width:min(110px,40%);height:8px;border-radius:4px;background:var(--surface-2);margin-right:8px;vertical-align:1px;overflow:hidden}
.barra-tab i{display:block;height:100%;border-radius:0 4px 4px 0;min-width:2px}
.amostra{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:0}
.matriz-grade{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr);gap:8px 24px;align-items:start;padding:14px 16px 6px}
table.matriz{border-collapse:separate;border-spacing:3px;font-size:12.5px}
table.matriz th{background:none;border:0;text-align:center;padding:6px 4px;color:var(--muted)}
table.matriz th[scope=row]{font-size:15px;font-weight:700;color:var(--fg);width:44px}
table.matriz td{border:0;padding:0}
.cel{text-align:center;border-radius:8px;padding:12px 6px !important;background:var(--surface-2);color:var(--fg)}
.cel b{display:block;font-family:var(--f-num);font-size:18px;font-weight:700}
.cel small{display:block;font-size:11.5px;color:inherit}  /* sem transparência: o tom da célula já tira contraste */
.cel.h0{color:var(--muted)}
.cel.h1{background:color-mix(in srgb,var(--marinho) 10%,var(--surface))}
.cel.h2{background:color-mix(in srgb,var(--marinho) 22%,var(--surface))}
.cel.h3{background:color-mix(in srgb,var(--marinho) 40%,var(--surface))}
.cel.h4{background:color-mix(in srgb,var(--marinho) 70%,var(--surface));color:var(--on-forte)}
.cel.h5{background:color-mix(in srgb,var(--marinho) 92%,var(--surface));color:var(--on-forte)}
.cel.tot{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.matriz-leitura .leitura{margin:8px 0}
.escala{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:4px 0 10px;font-size:11.5px;color:var(--muted)}
.escala i{display:inline-block;width:14px;height:14px;padding:0 !important;border-radius:3px;margin-left:6px}
/* a lista do estudo: o recorte aberto (data-sel), a busca, a ordem pelo cabeçalho e o "Ver os N" */
.lista-topo{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line-2)}
.lista-topo h2{flex:1 1 320px;margin:0}
.lista-topo h2:focus{outline:none}
.lista-topo input[type=search]{flex:0 1 240px;height:32px}
.lista-estudo td a{font-weight:600}
.lista-estudo tr.fora{display:none}
#produtos:not(:has(#ver-todos:checked)) tr.extra{display:none}
.ver-todos{display:flex;gap:8px;align-items:center;padding:10px 16px 12px;border-top:1px solid var(--line-2);color:var(--agua-esc);font-weight:500;cursor:pointer}
.ver-todos[hidden]{display:none}
.ordenar{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
.ordenar:hover{color:var(--marinho)}
th[aria-sort] .ordenar{color:var(--marinho)}
th[aria-sort=descending] .ordenar::after{content:" ↓"}
th[aria-sort=ascending] .ordenar::after{content:" ↑"}
/* o que abre um recorte: a linha da classe, o quadro da matriz e a faixa da curva; o aberto fica marcado */
tr.sel-linha{cursor:pointer}
tr.sel-linha th a{color:var(--fg);text-decoration:none}
tr.sel-linha:hover th a{text-decoration:underline}
tr.sel-linha[aria-current=true]>*{background:var(--accent-tint)}
tr.sel-linha[aria-current=true] th a{font-weight:700}
.cel:has(.cel-a){padding:0 !important}
.cel-a{display:block;padding:12px 6px;border-radius:8px;color:inherit;text-decoration:none}
.cel-a:hover{box-shadow:inset 0 0 0 2px var(--agua-esc)}
.cel-a[aria-current=true]{box-shadow:inset 0 0 0 3px var(--agua-esc)}
.cel.tot .cel-a[aria-current=true]{background:var(--accent-tint)}
.matriz-leitura a{color:inherit;text-decoration-color:var(--agua-esc);text-underline-offset:3px}
.pareto a .faixa{transition:opacity .15s}
.pareto a:hover .faixa,.pareto a:focus-visible .faixa,.pareto a[aria-current=true] .faixa{opacity:.3}
.pareto a:focus-visible{outline:none}
.pareto a:focus-visible .faixa{stroke:var(--agua-esc);stroke-width:2}
.pareto .guia{stroke:var(--muted);stroke-width:1}
.pareto .guia-ponto{fill:var(--surface);stroke:var(--marinho);stroke-width:2.5}
/* gasto por mês: o mês sob o mouse fica cheio e os outros esmaecem; a área vira link para o filtro */
.barras .mes{cursor:default}
.barras:hover .mes:not(:hover) .b{opacity:.4}
a.area-linha{color:inherit;text-decoration:none;border-radius:8px;margin:-4px -8px;padding:4px 8px}
a.area-linha[href]:hover{background:var(--accent-tint)}
a.area-linha[href]:hover>span:first-child{color:var(--marinho);text-decoration:underline}
/* a dica que segue o mouse (telas.js) */
#dica{position:fixed;z-index:60;max-width:320px;padding:7px 11px;border-radius:8px;background:var(--fg);color:var(--surface);font-size:12.5px;line-height:1.4;box-shadow:var(--shadow-gaveta);pointer-events:none}
#dica[hidden]{display:none}
@media (prefers-reduced-motion: reduce){.pareto a .faixa{transition:none}}
@media (max-width:820px){.matriz-grade{grid-template-columns:minmax(0,1fr)}}
/* no celular: a curva com letra maior (o SVG encolhe junto), as classes sem a barra e a matriz na largura da tela */
@media (max-width:520px){
  .pareto .eixo{font-size:14px}
  .pareto .rot-marco{font-size:19px}
  .pareto .rot-faixa{font-size:18px}
  .barra-tab{display:none}
  table.classes th[scope=row]{white-space:normal}
  .matriz-grade{padding:12px 8px 4px}
  table.matriz{width:100%;table-layout:fixed;border-spacing:2px}
  table.matriz th[scope=row]{width:34px;font-size:13px}
  table.matriz thead th{font-size:11px;padding:4px 2px}
  table.matriz thead th .muted{display:block}
  .cel{padding:9px 2px !important}
  .cel-a{padding:9px 5px}  /* a borda da célula marcada (3px) não passa por cima do número */
  .lista-topo input[type=search]{flex:1 1 100%}
  .cel b{font-size:14px}
  .cel small{font-size:11px;line-height:1.2}  /* "21 produtos" quebra em duas linhas, mas não some */
}
/* pergunte: a pergunta e os exemplos à esquerda, a resposta da IA à direita, o que a base devolveu embaixo */
.pg-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
.pg-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.pg-form label{flex:1 1 240px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
.pg-form input[type=search]{flex:none}
.pg-ex-tit{margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--muted)}
.pg-ia{border-color:var(--agua)}
.pg-q{margin:0 0 10px;padding-left:10px;border-left:3px solid var(--agua);color:var(--muted);overflow-wrap:anywhere}
.pg-consulta{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:9px 12px}
.pg-consulta summary{cursor:pointer;font-weight:500;color:var(--marinho)}
.pg-faixa{margin:14px 0 0;padding:7px 10px;border-radius:6px;background:var(--warn-soft);color:var(--warn);font-size:12px}
.pg-numero .resposta{font-size:36px;color:var(--marinho)}
/* usuários: novo usuário em Informações e Permissionamento, situação e perfil em pílula */
.us-novo{display:grid;gap:14px}
.us-novo>h2:first-child{margin-bottom:0}
.us-cartao{display:grid;gap:8px;align-content:start;border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.us-cartao h3,.us-cartao legend{margin:0;padding:0;font-size:12px;font-weight:600;color:var(--muted)}
.us-cartao legend{float:left;width:100%;margin-bottom:8px}
.us-cartao label:not(.opcao){display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
.us-cartao small{font-size:11.5px;margin-top:-4px}
.opcao{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:12.5px;color:var(--muted)}
.opcao:hover{border-color:var(--agua)}
.opcao:has(input:checked){border-color:var(--marinho);box-shadow:0 0 0 1px var(--marinho)}
.opcao input{grid-row:span 2;margin:2px 0 0;accent-color:var(--accent)}
.opcao b{color:var(--fg);font-size:13px}
.us-login{font-family:var(--f-num);color:var(--muted)}
tr.us-inativo td{color:var(--muted)}
.us-ativo{display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin:-5px 0;cursor:pointer}  /* alvo de toque da caixa Ativo, alinhado aos campos de 34px */
.us-tabela{position:relative}  /* o "Salvar" só para leitor de tela fica dentro da rolagem, sem alargar a página */
/* taxa de desconto: o passo do Editar política, texto à esquerda, linha com o ícone e o campo à direita */
.tx-passo{display:grid;grid-template-columns:minmax(0,.9fr) 64px minmax(0,1.1fr);padding:24px 26px}
.tx-esq{text-align:right;display:grid;gap:10px;align-content:start}
.tx-esq h2{margin:0;font-size:13.5px;color:var(--fg)}
.tx-esq h2 small{display:block;margin:4px 0 0;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--agua-esc)}
.tx-esq p{margin:0;line-height:1.6;color:var(--muted)}
.tx-linha{position:relative;display:flex;justify-content:center}
.tx-linha::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--agua-clara)}
.tx-linha span{position:relative;width:36px;height:36px;border-radius:50%;background:var(--agua-esc);color:var(--surface);display:grid;place-items:center;font-family:var(--f-num);font-weight:800;font-size:15px}
.tx-dir{display:grid;gap:10px;align-content:start}
.tx-dir p{margin:0}
.tx-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.tx-form>label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
.tx-campo{display:flex;align-items:center;border:1px solid var(--field);border-radius:8px;background:var(--surface);overflow:hidden}
.tx-campo:focus-within{border-color:var(--agua-esc);box-shadow:var(--anel)}
.tx-campo input[type=text]{border:0;border-radius:0;box-shadow:none;width:110px;font-family:var(--f-num);font-weight:600}
.tx-campo input[type=text]:focus{box-shadow:none}
.tx-campo>span{padding:0 10px;align-self:stretch;display:grid;place-items:center;font-size:12px;color:var(--muted);background:var(--surface-2);border-left:1px solid var(--line-2)}
.tx-campo:has([aria-invalid=true]){border-color:var(--bad)}
.tx-dir .erro{margin:0}
.tx-exemplo{line-height:1.6;color:var(--muted)}
.tx-exemplo b,.tx-dir b{font-family:var(--f-num);color:var(--fg)}
/* entrar: o cartão com a logo no topo */
.entrar-marca{margin:-14px -16px 18px;padding:18px 20px;border-radius:12px 12px 0 0;background:var(--marca)}
.entrar>h1{margin:0;font-size:20px}
.entrar>.sub{margin:4px 0 16px}
@media (max-width:1060px){.pg-grade{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .kpis{grid-template-columns:minmax(0,1fr)}
  .barras{gap:3px}
  .barras .mes:nth-child(even) .rot-mes{visibility:hidden}  /* no celular, um rótulo sim, outro não, para não encavalar */
  .tx-passo{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px 16px}
  .tx-esq{text-align:left}
  .tx-linha{display:none}
}
@media (max-width:1180px){
  .faixa{grid-template-columns:repeat(3,minmax(0,1fr))}
  .faixa>div:last-child{grid-column:1 / -1;border-left:0;border-top:1px solid var(--line-2)}
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-linha{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .refs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .logo{width:auto;padding:0 36px 0 16px}.logo img{height:26px}
  .modulo{margin-left:12px}
  main{padding:16px 16px 40px}
  .two,.faixa,.slots,.fo-linha{grid-template-columns:minmax(0,1fr)}
  .faixa>div{border-left:0;border-top:1px solid var(--line-2)}
  .faixa>div:first-child{border-top:0}
  .passos{width:100%;margin:0}
  .passos li{width:auto;flex:1 1 0;min-width:0}
  .passos small{font-size:10px;overflow-wrap:anywhere}
  .panel.tbl table{min-width:640px}  /* a tabela rola dentro do cartão em vez de espremer as colunas */
  .panel.tbl table.classes,.panel.tbl table.matriz{min-width:0}   /* as do estudo cabem na tela */
}
/* tela de toque: alvos de pelo menos 44px */
@media (pointer:coarse){
  .btn,input[type=search],input[type=text],input[type=password],input[type=date],input[type=month],input[type=time],input[type=email],input[type=tel],select{height:44px}
  label.chk{min-height:44px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  .menu summary,.backc{width:44px;height:44px}
  .menu nav a,.menu nav button{padding-block:13px}
  .btn.pergunte{height:40px}
}
/* no celular, a tabela larga (table.fixa) rola com a primeira coluna presa à esquerda */
@media (max-width:820px){
  table.fixa :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line-2)}
  table.fixa th:first-child{background:var(--th)}
  .panel.tbl table.fixa{min-width:820px}
  table.fixa tbody tr:hover td:first-child{background:var(--accent-tint)}
}
/* no celular, a barra fica com a marca, o menu, o Pergunte à base e as iniciais */
@media (max-width:520px){.filtros>select,.filtros>.campo{flex:1 1 100%;min-width:0}.campo select{flex:1;min-width:0}}
@media (max-width:520px){.modulo,.perfil-txt{display:none}.perfil{padding:0 4px;margin-right:12px}.btn.pergunte{margin:0 8px 0 auto}}
/* Pedido (F2.11): imprimir ou salvar em PDF só o documento, sem a barra nem os botões */
@media print{.topbar,.no-print{display:none}body,.panel,th{background:#fff;color:#000;box-shadow:none}main{padding:0}}
/* revisão de UX da cotação nova: a barra do próximo passo, o botão de texto (remover, retirar), a lista "Antes de
   mandar" que fecha quando está pronta, o caminho de vários só com itens marcados e alvos de toque maiores */
.barra-passo,.barra-escolha{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--shadow-barra);padding:10px 16px;margin:12px -4px 0;border-radius:10px 10px 0 0}
.btn-texto{font:inherit;font-size:12px;border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:6px 4px;min-height:28px}
.btn-texto:hover{color:var(--bad)}
table.cartoes tr:target>td{background:var(--accent-tint)}  /* a linha que acabou de gravar ao sair do campo */
details.panel>summary,details.mais>summary{list-style:none;cursor:pointer}
details.panel>summary::-webkit-details-marker,details.mais>summary::-webkit-details-marker{display:none}
details.panel>summary h2::after,details.mais>summary h2::after{content:"▾";margin-left:8px;color:var(--muted);font-size:12px}
details.panel:not([open])>summary h2::after,details.mais:not([open])>summary h2::after{content:"▸"}
details.mais>summary:not(:has(h2))::after{content:"▾";margin-left:8px;color:var(--muted);font-size:12px}
details.mais:not([open])>summary:not(:has(h2))::after{content:"▸"}
details.panel.tbl>summary{padding:13px 16px}  /* o painel recolhível de tabela não tem o recuo do cartão */
details.panel>summary h2{margin:0}
details.outro{margin-top:4px}
details>summary{min-height:28px;display:flex;align-items:center;cursor:pointer}
.uma-linha{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
td.marcar input,th input[data-todos]{width:20px;height:20px}
@media (max-width:640px){.passos{display:none}}
/* tela de toque, depois das regras de 28px acima: os details que abrem (Texto do pedido, Cancelar, mudar o contato), o
   botão de texto (remover, descartar), o botão do arquivo, os links da gaveta e as fichas também com 44px */
@media (pointer:coarse){
  details>summary,.btn-texto,.menu nav a,.menu nav button{min-height:44px}
  input[type=file]::file-selector-button{height:44px}
  .chip{height:44px}
}
/* tabela mais larga que o cartão: o aviso que o telas.js põe antes dela, preso à esquerda, até chegar ao fim */
:is(.panel.tbl,.rola) .aviso-rola{position:sticky;left:0;margin:0;padding:7px 16px;font-size:12px;font-weight:500;color:var(--agua-esc);background:var(--accent-tint);border-bottom:1px solid var(--line-2)}
.aviso-rola[hidden]{display:none}
/* na impressão (o PDF do pedido), a tabela sai inteira na página, sem rolagem nem coluna presa */
@media print{
  .panel.tbl,.rola{overflow:visible}
  .panel.tbl table,.panel.tbl table.fixa{min-width:0}
  table.fixa :is(th,td):first-child{position:static;box-shadow:none}
}
/* página de erro (erro.html): o que houve, se algo foi gravado e o caminho de volta */
.pagina-erro{max-width:560px;margin:32px auto 0;font-size:14px;color:var(--fg)}
.pagina-erro h1{margin-bottom:10px}
.pagina-erro p{margin:0 0 10px}
.pagina-erro .toolbar{margin:16px 0 4px}
/* Escolha: quem sugere numa linha; o lote pronto no topo; uma tabela só (table.cmp), um tbody por item, com as colunas
   alinhadas de item a item, a sugerida com o fundo e o fio verde-água e o motivo logo abaixo dela. No celular, cada
   proposta vira um bloco de três linhas: fornecedor e preço, os números em sequência e o botão */
.escolha-topo .massa{border-bottom:0;justify-content:flex-start}
.escolha-topo .massa h2{margin:0}
.escolha-topo .escolha-links{margin:0 0 0 auto}
.pronto{border-color:var(--agua);background:var(--accent-tint)}
.pronto-linha{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
#aceite-lote h2{margin:0}
#aceite-lote .pronto-linha p{margin:2px 0 0}
#aceite-lote>details{margin-top:8px}
.panel.tbl>.tit{padding:14px 16px 6px;margin:0}
.panel.tbl table.cmp{min-width:0}
.cmp thead th{white-space:nowrap}
.cmp td{vertical-align:top}
.cmp .num,.linha-hist b{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.cmp tr.cab th{text-align:left;font-weight:400;white-space:normal;padding:14px 10px 6px;background:var(--surface);border-bottom:1px solid var(--line);border-top:8px solid var(--bg)}
.cmp tbody:first-of-type tr.cab th{border-top:0}
.cab-linha{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.cab-nome{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.cab-nome>b{color:var(--fg);font-size:13.5px}
.linha-hist,.linha-hist li{display:inline;margin:0;padding:0}
.linha-hist li:nth-child(2)::before{content:" · "}
.linha-hist li+li+li::before{content:", "}
.cab-links{margin-left:auto;display:flex;gap:12px}
.cmp tr.sug td{background:var(--accent-tint)}
.cmp tr.sug td:first-child{box-shadow:inset 3px 0 0 var(--agua)}
.cmp tr.fora td{color:var(--muted)}
.cmp td.forn{min-width:220px;overflow-wrap:anywhere}
.cmp td.forn b{font-weight:600;color:var(--fg)}
.cmp .quem{font-size:11.5px;font-weight:600;color:var(--agua-esc);margin-top:2px}
.cmp td.preco{font-weight:700;color:var(--fg);font-size:13.5px}
.cmp .dif{font-size:11.5px;color:var(--muted)}
.cmp .abaixo{color:var(--good)}
.cmp .a-confirmar{color:var(--warn)}
.cmp td.entrega,.cmp td.frete{white-space:nowrap}
.cmp .pill{white-space:normal;border-radius:8px}
.cmp tr.motivo{margin:0}
.cmp tr.motivo td{background:var(--accent-tint);color:var(--fg);font-size:12px;padding:0 10px 8px 23px}
.cmp tr.sug:has(+tr.motivo) td{border-bottom:0}
.cmp tr.vazio td{color:var(--muted);font-size:12px}
.cmp td.acao{width:170px;text-align:right}
.cmp .aceita{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:0}
.cmp .aceita form{margin:0}
.cmp .aceita .btn-texto{color:var(--agua-esc)}
.cmp .aceita .btn-texto:hover{color:var(--marinho)}
.cmp details.escolher-esta>summary{margin-left:auto}
.cmp td.acao form.escolher-esta{justify-content:flex-end}
.barra-escolha .falta-itens a{white-space:nowrap}
.escolhidos tr.outras td{padding-top:0}
.outras-props{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.outras-props li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
@media (max-width:820px){
  .escolha-topo .escolha-links{margin-left:0;flex-basis:100%}
  .barra-escolha .falta-itens{display:none}
  .cmp,.cmp tbody,.cmp tr.cab,.cmp tr.cab th,.cmp tr.motivo,.cmp tr.vazio,.cmp tr.motivo td,.cmp tr.vazio td{display:block}
  .cmp thead{display:none}
  .cmp tr.cab th{padding:12px 12px 8px}
  .cab-links{margin-left:0}
  .cmp tr.prop{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:10px 12px;border-bottom:1px solid var(--line-2)}
  .cmp tr.prop td{display:block;padding:0;border:0;background:none;min-width:0;width:auto;box-shadow:none}
  .cmp tr.sug{background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--agua)}
  .cmp tr.prop td.forn{flex:1 1 60%;order:1}
  .cmp tr.prop td.preco{order:2;margin-left:auto}
  .cmp tr.prop td[data-l]{order:3;font-size:12px;text-align:left}
  .cmp tr.prop td[data-l]:not([data-l=""])::before{content:attr(data-l) " ";color:var(--muted)}
  .cmp tr.prop td .dif,.cmp tr.prop td .small{display:inline;margin-left:4px}
  .cmp tr.prop td.acao{order:4;flex-basis:100%;text-align:left;margin-top:6px}
  .cmp tr.prop td.acao:empty{display:none}
  .cmp .aceita{flex-direction:row;align-items:center;gap:14px}
  .cmp details.escolher-esta>summary{margin-left:0}
  .cmp td.acao form.escolher-esta{justify-content:flex-start}
  .cmp tr.motivo td,.cmp tr.vazio td{padding:0 12px 10px}
}
/* Escolha: os atalhos e o "Como funciona" numa linha quieta; aberto, a explicação ocupa a largura toda */
.escolha-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-top:8px}
.escolha-links>.dec-como{margin:0;border:0;padding:0}
.escolha-links>.dec-como[open]{flex-basis:100%}
.escolha-links>.dec-como>ul{margin:6px 0 0;padding-left:18px;max-width:75ch}
.escolha-links>.dec-como li+li{margin-top:4px}
/* As marcas do lote no celular: uma pergunta por bloco, sem rolar a tabela para o lado */
@media (max-width:640px){
  table.marcas-lote,table.marcas-lote tbody,table.marcas-lote tr,table.marcas-lote th,table.marcas-lote td{display:block;width:auto}
  table.marcas-lote thead{display:none}
  table.marcas-lote tr{padding:12px 0;border-bottom:1px solid var(--line-2)}
  table.marcas-lote th,table.marcas-lote td{padding:2px 0;border:0}
  table.marcas-lote td[data-l]::before{content:attr(data-l) ": ";color:var(--muted)}
}
/* Escolher ou trocar na linha: o resumo como link, e o formulário (marca, motivo e botão) quebrando no celular */
.escolher-esta{margin-top:4px}
details.escolher-esta>summary{cursor:pointer;width:max-content;font-size:12.5px;font-weight:600;color:var(--agua-esc)}
form.escolher-esta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 0}
form.escolher-esta input[type=text]{flex:1 1 180px;min-width:0;height:32px}
form.escolher-esta select{max-width:100%}
html:has(.barra-escolha,.barra-passo){scroll-padding-bottom:84px}
@media (max-width:520px){.abas{gap:0;justify-content:space-between}.abas a,.abas .apagada{padding:0 4px;letter-spacing:0;font-size:11px}.abas a[aria-current=page]::after{left:4px;right:4px}}  /* as 5 abas cabem em 360 px */
.barra-escolha .acoes{display:flex;flex-wrap:wrap;gap:8px}
/* Filtros de Produtos: busca larga e fornecedor com nome inteiro; Categoria, Situação e Governo são caixas como a do
   Comprado em, que abrem a lista para marcar mais de uma (a contagem de cada opção fica dentro da lista) */
input.busca-produto{min-width:260px}
.campo input.campo-fornecedor{flex:1 1 280px;min-width:280px}
.linha-filtros{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;flex-basis:100%}
.multi{position:relative}
.multi > summary{list-style:none;cursor:pointer}
.multi > summary::-webkit-details-marker{display:none}
.valor-multi{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 10px;min-width:150px;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--fg);font-size:13px;white-space:nowrap}
.valor-multi::after{content:'';width:6px;height:6px;margin:-3px 2px 0 auto;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
.multi[open] .valor-multi,.multi > summary:focus-visible .valor-multi{border-color:var(--agua-esc);box-shadow:var(--anel)}
.multi > summary:focus-visible{outline:none}
.painel-multi{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:min(360px,90vw);padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-gaveta)}
.op-multi{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--fg);cursor:pointer}
.op-multi:hover{background:var(--surface-2)}
.op-multi small{font-size:11.5px;color:var(--muted)}
.op-multi .conta{margin-left:auto;padding-left:14px;font-family:var(--f-num);font-size:12px;font-weight:700;color:var(--muted)}
.contagem-topo{margin:-4px 0 10px;font-size:13px;color:var(--muted)}
.lista-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-4px 0 10px}
.lista-cab .contagem-topo{margin:0}
html:not(.js) .so-js{display:none}
.painel-direita{left:auto;right:0}
.painel-multi .padrao-colunas{display:block;margin:4px 10px 4px;padding:0;border:0;background:none;font:inherit;font-size:12.5px;color:var(--agua-esc);text-decoration:underline;cursor:pointer}
/* Colunas da lista de Produtos: as extras ficam escondidas até alguém marcar no botão Colunas (telas.js) */
.tab-produtos .extra{display:none}
.tab-produtos .sub-th{display:block;font-size:10px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.tab-produtos td.c-forn{min-width:170px}
.contagem-topo b{color:var(--fg)}
.aviso-filtro{color:var(--warn)}
@media (max-width:760px){input.busca-produto,.campo input.campo-fornecedor{min-width:0;width:100%}.valor-multi{height:44px}.op-multi{min-height:40px}}
/* Produtos: a lista vai até o fim da página. A caixa estica até a margem de baixo (com muitas linhas, a página rola), com
   a contagem e as páginas no rodapé dela */
main:has(.lista-card){display:flex;flex-direction:column;min-height:calc(100vh - 56px);padding-bottom:28px}
.lista-card{flex:1;display:flex;flex-direction:column;padding:0;overflow:hidden}
.lista-card > .panel.tbl{flex:1;border:0;border-radius:0;box-shadow:none}
.lista-card > .paginas{margin:0;padding:10px 16px;border-top:1px solid var(--line-2)}

/* frente A: coletas e Montar. O título longo sem espaço quebra em vez de empurrar as colunas; o aviso do pedido lido
   e a linha da conferência que não entrou se destacam; enquanto a conferência está à vista, a barra dela (Pôr os
   marcados) fica por cima da barra do Montar, que também gruda no pé da tela */
.barra-passo.barra-conferencia{z-index:6}
.titulo-coleta,.phead h1{overflow-wrap:anywhere}
.aviso-pedido{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:8px 12px}
table.cartoes tr.com-erro>td{background:var(--bad-soft)}

/* frente C: convites e rodada de negociação. No celular, a célula sem oferta some do cartão do item; a célula com
   o preço-alvo errado fica marcada */
@media (max-width:820px){table.cartoes td.vazia{display:none}}
table.rodada input[aria-invalid=true]{border-color:var(--bad);box-shadow:var(--anel)}

/* frente E: escolha da vencedora no celular. Mapa, Cesta e decidir viram cartões; a etiqueta quebra a linha dentro
   do cartão; o rádio de escolher a vencedora tem alvo de 44 px */
table.cartoes .pill{white-space:normal;overflow-wrap:anywhere}
td.marcar label.alvo{display:inline-grid;place-items:center;min-width:44px;min-height:44px;cursor:pointer}
@media (max-width:820px){
  table.ofertas.cartoes tr[data-menor]{background:var(--good-soft)}
  table.ofertas.cartoes tr[data-menor] td{background:none}
  table.ofertas.cartoes td.etiquetas{min-width:0}
}

/* frente F: pedidos e conciliação. No celular, os itens do pedido e da conciliação viram cartões (table.cartoes); na
   impressão, a tabela volta inteira, sem rolagem, em qualquer largura de página */
table.cartoes tfoot td{font-weight:600}
@media print{
  .panel.tbl{overflow:visible}
  .panel.tbl table,.panel.tbl table.cartoes{min-width:0;font-size:10.5px}
  table.cartoes thead{display:table-header-group}
  table.cartoes tr{display:table-row}
  table.cartoes th{padding:5px 6px}
  table.cartoes td{display:table-cell;padding:5px 6px;border-bottom:1px solid var(--line-2)}
  table.cartoes td.num{text-align:right}
  table.cartoes td.item{min-width:0}
  table.cartoes td[data-l]::before{content:none}
}

/* frente D: propostas. No celular, cada oferta é um cartão com os campos em duas colunas e o item em cima */
@media (max-width:820px){
  table.grade tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  table.grade td{grid-column:auto}
  table.grade td.item{grid-column:1/-1}
  table.grade input:not([type=checkbox]),table.grade select{width:100%}
  table.grade td[data-testid=conversao]:empty{display:none}
}
table.grade td label{display:flex;gap:4px;align-items:center;margin-top:4px;white-space:nowrap}  /* o "não cota" embaixo do preço */

/* reteste celular: na tela estreita, os alvos de toque com 44 px, como no pointer:coarse acima (há celular e navegador
   que não dizem que o toque é grosso), sem mudar o computador. Os links de texto da Escolha ("decidir outra · não
   comprar") e do cabeçalho da coleta ("Cancelar a coleta") ganham altura e espaço dos lados, para não pegar o vizinho */
@media (max-width:520px){
  .btn,.decidida .btn,input[type=search],.lista-topo input[type=search],input[type=text],input[type=password],input[type=date],input[type=month],input[type=time],input[type=email],input[type=tel],select,.filtros input[type=number],.passo,.seg button,.chip,.valor-multi{height:44px}
  .passo{width:40px}
  .btn.pergunte{height:44px}
  details>summary,.btn-texto,label.chk{min-height:44px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  input[type=file]::file-selector-button{height:44px}
  .menu summary,.backc{width:44px;height:44px}
  .menu nav a,.menu nav button{min-height:44px;padding-block:13px}
  td[data-l="Situação"]>div>a,.sub>a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
  /* os links soltos: nomes nas tabelas e listas, Voltar, "Não comprar este item", a contagem da Economia; a caixa de
     seleção do Montar tem a célula de alvo, pelo label em volta (a caixa continua com 20 px) */
  main td a:not(.btn,.cel-a),main dd>a,.resposta>a,a.alvo{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
  td.marcar>label{display:inline-grid;place-items:center;min-width:44px;min-height:44px;cursor:pointer}
  /* o título do details fica numa linha, e a explicação ao lado desce para a de baixo (Dados do pedido) */
  main details>summary{flex-wrap:wrap;column-gap:6px}
}

/* reteste montar: as notas das Entradas/mês ("... se a suspeita de dobro se confirmar") quebram a linha, e a tabela
   cabe a 1366 px; no celular, a lista de variantes da busca não passa do cartão; o Desfazer do "remover" ocupa a
   linha inteira do cartão, no lugar do item que saiu */
@media (max-width:820px){
  table.cartoes td select{max-width:100%}
  table.cartoes tr.removido td{grid-column:1/-1}
}

/* reteste propostas: os botões do lote da Escolha (a resposta da marca) quebram a linha no celular */
.barra-escolha .acoes .btn,#aceite-lote .acoes .btn{white-space:normal;height:auto;min-height:34px;padding-top:6px;padding-bottom:6px;text-align:left}

/* catálogo (Produtos e fichas). No celular: a lista de Produtos vira cartão (o nome em cima e os números em duas
   colunas), os filtros recolhem atrás do botão Filtros (telas.js; recolhidos, só saem da vista e continuam no
   formulário), o gráfico do preço por mês usa o desenho estreito, com letra de 12 px na tela, e o nome na 1ª coluna das
   tabelas fica no alto da célula, como as outras */
.mais-produtos{display:contents}
.so-estreito{display:none}
.chart .grafico-estreito{display:none}
.valores-mes{margin-top:8px;font-size:12.5px}
.valores-mes>summary{cursor:pointer;width:max-content;color:var(--agua-esc)}
.valores-mes table{margin-top:6px}
@media (max-width:820px){
  html.js .so-estreito{display:inline-flex}
  .filtros[data-recolhido] .mais-produtos{display:block;position:absolute;width:1px;height:1px;overflow:hidden;visibility:hidden}
  table.cartoes.tab-produtos tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  table.cartoes.tab-produtos td{grid-column:auto}
  table.cartoes.tab-produtos td.c-nome{grid-column:1/-1}
  table.cartoes.tab-produtos td:empty{display:none}
  table.cartoes.tab-produtos td[data-l]::before{font-family:var(--f-body)}
  .tab-produtos td.c-forn{min-width:0}
}
@media (max-width:560px){
  .chart .grafico-largo{display:none}
  .chart .grafico-estreito{display:block}
  .chart .grafico-estreito text{font-size:13px}
}
@media (max-width:520px){
  .mais-produtos>.campo{flex:1 1 100%;min-width:0}
  .valores-mes>summary{display:flex;align-items:center}
  .panel.tbl table.fixa td:first-child>a:not(.btn){align-items:flex-start}
}

/* teste de 22/10, celular e compras. O h1 do pedido para imprimir fica no lugar do título do cartão */
.panel>h1.doc{font-size:16px;line-height:1.35;margin:0;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.envio select{max-width:100%}
/* Escolha: o aceite em lote no fim da lista, com a lista das marcas e as respostas */
#aceite-lote .acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lista-marcas{list-style:none;margin:8px 0 0;padding:0}
.lista-marcas label{display:flex;gap:8px;align-items:center;padding:4px 0;cursor:pointer}
.lista-marcas input{flex:none}
.resposta-marca{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.resposta-marca label{display:inline-flex;gap:6px;align-items:center;cursor:pointer;white-space:nowrap}
/* "Marcar todas": nos cartões do celular o cabeçalho some, menos a caixa de marcar todas, com o rótulo à vista */
.so-estreito{display:none}
label.todos{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.barra-passo .toolbar{margin:0}
@media (max-width:820px){.barra-passo #massa{order:1;margin-left:0}}   /* no celular, o total e o Próximo numa linha, o caminho na de baixo */
/* a conferência do pedido: a barra baixa, e o campo em foco para acima dela */
html:has(.barra-conferencia){scroll-padding-bottom:120px}
/* o aviso do Mapa (caixa e unidade misturadas) quebra a linha dentro do cartão */
.refs .pill,.panel>p .pill{white-space:normal;border-radius:10px}
/* no celular, o cabeçalho escondido dos cartões volta quando traz um controle: o "marcar todas" e o "negociar" da rodada,
   um fornecedor por linha (só na tela: na impressão, o cabeçalho é o da tabela) */
@media screen and (max-width:820px){
  html.js table.cartoes thead:has([data-todos],[data-na-rodada]){display:block}
  table.cartoes thead:has([data-todos],[data-na-rodada]) tr{display:block;padding:0 16px;border-bottom:1px solid var(--line-2)}
  table.cartoes thead:has([data-todos]) th{display:none}
  table.cartoes thead:has([data-todos]) th:first-child{display:block;padding:0;border:0;background:none}
  table.rodada thead th{display:block;position:relative;min-height:52px;padding:8px 112px 8px 0;border:0;background:none}
  table.rodada thead th label.chk{position:absolute;right:0;top:4px}
  table.rodada thead th:first-child{display:none}
}
@media (max-width:820px){
  .so-estreito{display:inline}
  label.todos{min-height:44px;font-size:13px;font-weight:500;color:var(--fg)}
  table.cartoes .uma-linha{white-space:normal;max-width:none}   /* a última compra inteira: o toque não mostra o title */
}
@media (max-width:520px){
  /* os dois botões lado a lado, com o texto em duas linhas; o resumo já está no topo da conferência */
  .barra-conferencia>span:first-child{display:none}
  .barra-conferencia .toolbar{flex-wrap:nowrap;width:100%}
  .barra-conferencia .btn{flex:1 1 0;white-space:normal;height:auto;min-height:44px;padding-block:4px;justify-content:center;text-align:center}
  /* o link no meio da frase não vira bloco de 44 px (abria um vão no texto): o alvo cresce pelo recuo, sem mexer na linha */
  main td :is(span,p,li) a:not(.btn){display:inline;min-width:0;min-height:0;padding-block:14px}
}
/* alvos de toque que sobraram: o "não cota", as marcas do lote, Limpar filtros e a matriz e a ordem da Gestão */
@media (pointer:coarse),(max-width:520px){
  table.grade td label,.lista-marcas label{min-height:44px}
  .limpar,.ordenar,.lista-topo>a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  /* a classe da tabela em bloco de linha, e não flex: o espaço de "X regular" fica e o texto vai no topo, como os
     números ao lado */
  tr.sel-linha th a{display:inline-block;min-height:44px}
  /* o link no meio do texto cresce pelo recuo, sem mexer na linha: o AX/AZ/CZ da matriz também para os lados, o "ver
     todas" das notas e o "ver todo o histórico" da contagem para cima e para baixo */
  .matriz-leitura a{padding:15px 13px;margin-inline:-13px}
  h2 small a,.muted.small>a:not(.btn){padding-block:15px}
}
/* rodada de negociação: a grade rola dentro do cartão, com o nome do fornecedor e o item presos ao rolar */
@media screen and (min-width:821px){
  .grade-rodada{max-height:calc(100vh - 96px);overflow:auto}
  table.rodada thead th{position:sticky;top:0;z-index:2}
  table.rodada :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line-2)}
  table.rodada thead th:first-child{z-index:3;background:var(--th)}
}
table.rodada th label.chk{display:flex;font-weight:500;color:var(--fg)}
table.rodada input:is(:disabled,[aria-disabled]){background:var(--surface-2);color:var(--muted);border-color:var(--line)}   /* fora desta rodada */
/* impressão: só a informação, sem botões, barras e abas; a etiqueta inteira na coluna dela */
@media print{
  button,.btn,.btn-texto,.backc,input[type=file],.barra-passo,.barra-escolha,.abas,.aviso-rola,.so-js,details:not([open]):not(.panel){display:none}
  .pedido>h2:first-child{background:none;color:#000}
  table.cartoes .pill{overflow-wrap:normal}
  table.cartoes td.etiquetas{min-width:90px}
  table.cartoes td.curta[data-l]{display:table-cell;padding-left:6px}
  /* o que é informação dentro de um botão sai como texto: o cabeçalho que ordena e o caminho escolhido no Montar */
  th button.ordenar,.seg button[aria-pressed=true]{display:inline;border:0;background:none;padding:0;color:#000;font:inherit;height:auto;min-height:0}
}
/* pouca altura (zoom de 200%, celular deitado): o topo e as barras do pé não ficam presos e deixam a tela ao conteúdo */
@media (max-height:500px){
  .topbar,.barra-passo,.barra-escolha{position:static}
  .passos{display:none}   /* a situação já está na etiqueta ao lado do título, como no celular */
  html{scroll-padding-top:8px}
  html:has(.barra-escolha,.barra-passo),html:has(.barra-conferencia){scroll-padding-bottom:0}
}
/* Convites: o que falta para marcar o envio, logo abaixo do botão travado */
.falta-envio{display:block;margin-top:6px;flex-basis:100%}
/* Conferência do pedido: a linha "confira se é o mesmo" entra pela confirmação ao lado do motivo */
.confirma{display:flex;gap:6px;align-items:center;margin:4px 0}
/* Convites: o texto do "Convidar fornecedor novo" numa linha própria, acima dos campos */
.form-usuario > .linha-toda{flex-basis:100%;margin:0}
/* Conferência do pedido: a linha fora do cadastro do Smart pode ser cadastrada e posta na coleta ali mesmo */
.cadastrar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
/* O nome do arquivo escolhido aparece inteiro, e não "Nenhum ar...ivo escolhido" */
input[type=file]{min-width:min(100%,320px)}

/* Pedido direto, aba Fornecedores: um cartão por item, com quem cotar, o preço confirmado e o histórico. A cor fica
   no fornecedor de quem o pedido sai e na barra da troca de fornecedor, no histórico; o resto é neutro */
.cotar-item>h2 small{font-weight:400}
.cotar-item .resumo{margin:12px 16px;font-size:13px;line-height:1.6}
.cotar-item table.cotar tr.escolhido>td{background:var(--good-soft)}
.cotar-item .sai-deste{font-size:12px;font-weight:600;color:var(--good)}
.cotar-item form.confirma{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0}
.cotar-item form.confirma label{display:inline-flex;gap:4px;align-items:center;font-size:12px;color:var(--muted)}
.cotar-item form.confirma input,.anotar-fornecedor input,.cotar-item input.preco{height:32px;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.cotar-item input.preco{width:96px;text-align:right}
.cotar-item input.pagamento{width:88px}
.cotar-item input.dias{width:48px;text-align:right}
.cotar-item form.tirar{margin:4px 0 0}
.cotar-item form.tirar .btn-texto{padding-left:0;min-height:24px}
.cotar-item .mais-fornecedores{margin:12px 16px}
.cotar-item .mais-fornecedores ul.tags{list-style:none;padding:0;margin:4px 0 8px}
.cotar-item .busca-outro{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cotar-item .busca-outro label{font-size:12px;color:var(--muted)}
.cotar-item .busca-outro input[type=search]{flex:0 1 280px;height:32px}
.cotar-item>.historico{margin:0 16px 16px}
/* Quem cotar: os marcados do item como botões (o ✓ tira), cada um com a última venda embaixo; o do filtro em destaque */
.cotar-item ul.quem{list-style:none;display:flex;flex-wrap:wrap;gap:10px 16px;margin:12px 16px;padding:0}
.cotar-item ul.quem>li{min-width:0;max-width:100%}
.cotar-item ul.quem form{margin:0 0 2px}
.cotar-item ul.quem .btn{max-width:100%;white-space:normal;text-align:left}
.cotar-item ul.quem>li.filtrado .btn{box-shadow:var(--anel)}
.cotar-item .sugeridos{margin:0 16px 8px}
.cotar-item details.mais-fornecedores>summary{cursor:pointer;font-weight:600;font-size:13px}
.filtros select[name=f]{max-width:min(100%,420px)}
.historico h3{font-size:12.5px;font-weight:600;margin:12px 0 4px}
.linha-do-tempo{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--line-2);font-size:12.5px;font-variant-numeric:tabular-nums}
.linha-do-tempo>li{padding:4px 0}
.linha-do-tempo>li.troca{border-left:2px solid var(--info);margin-left:-14px;padding-left:12px}
.linha-do-tempo .troca-motivo{color:var(--info)}
@media (max-width:820px){.cotar-item table.cartoes td.pedir::before{display:none}}

/* Nova coleta: os dois jeitos de criar lado a lado, um embaixo do outro no celular */

/* Pedido direto por fornecedor: pagamento e entrega uma vez, o preço de cada item, e o botão no pé do cartão */
.anotar-fornecedor .toolbar{margin:10px 16px;gap:8px 16px}
.anotar-fornecedor label.campo{white-space:nowrap}
.barra-fornecedor{display:flex;justify-content:flex-end;padding:10px 16px 14px}
.solos>summary{cursor:pointer;font-weight:600;padding:8px 0}
.solos>.stack{margin-top:8px}
/* Convites: o filtro de fornecedor acima dos itens, e a última venda dentro da etiqueta do convidado */
.filtro-convidado{margin:8px 16px}
.filtro-convidado select{max-width:min(100%,420px)}
.tag .ultima-venda{font-weight:400}
.tags .tag{max-width:100%;flex-wrap:wrap}

/* Montar (31/10/2026). A quantidade em três partes, iguais em toda linha: a embalagem abreviada à esquerda ("50 PCT
   c/100 ="), o número e a unidade por extenso, de largura fixa, para os números ficarem um embaixo do outro. O título
   da lista com as ações na mesma linha. Na conferência, o que diverge entre o pedido e o cadastro marcado nos dois
   nomes, e o "Trocar" abre ali mesmo, com os parecidos do cadastro e a busca */
.qtd-linha{display:inline-grid;grid-template-columns:auto 84px 8em;align-items:center;gap:8px;text-align:left;white-space:nowrap}
.qtd-linha .pacote{color:var(--muted);font-size:12px;text-align:right}
.qtd-linha input,.qtd-linha .valor{grid-column:2;width:100%;text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.qtd-linha input{height:30px}
.qtd-linha .un{grid-column:3;white-space:normal}   /* "caixas c/5.000" quebra na coluna, sem invadir a vizinha */
td.qtd form{display:block;margin:0}
td.qtd,td.remover{padding-top:5px;padding-bottom:5px}   /* o campo de 30 px no meio da 1ª linha do nome */
td.remover{width:1%;white-space:nowrap;padding-left:0}
.panel>.cabeca:first-child{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--line-2)}
.panel>.cabeca h2{margin:0}
.panel>.cabeca .toolbar{margin:0;gap:4px 12px}
table.cartoes mark{background:var(--warn-soft);color:var(--warn);border-radius:3px;padding:0 2px}
table.cartoes td.igual{color:var(--muted)}
.motivo{margin:6px 0 0;color:var(--warn);font-size:12px}
.motivo .pill{margin-right:4px}
td .toolbar.confirma{margin:8px 0 0;gap:8px 12px}
details.trocar>summary{list-style:none}
details.trocar>summary::-webkit-details-marker{display:none}
details.trocar[open]{flex:1 1 100%}
.trocar-corpo{margin-top:6px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.opcoes{list-style:none;margin:0 0 8px;padding:0}
.opcoes li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line-2)}
.opcoes .btn{height:28px;padding:0 10px;font-size:12px}
.trocar-corpo .toolbar{margin:0}
.erro-campo{margin:4px 0 0;color:var(--bad);font-size:12px;text-align:right}
td.qtd input[aria-invalid=true]{border-color:var(--bad)}
#adicionar .note[role=status]{margin:12px 0 0;padding:8px 12px;border-radius:8px;background:var(--good-soft);color:var(--good)}
#adicionar>.erro{margin:12px 0 0}
#adicionar tr.com-erro .erro{margin:6px 0 0;padding:0;background:none}
.motivo-urgencia{display:flex;align-items:center;gap:8px;flex:1 1 320px}
.motivo-urgencia input{flex:1;min-width:0}
#urgencia{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
#urgencia>h2,#urgencia>.note,#urgencia>p{flex-basis:100%;margin-bottom:0}
.mudar-prazo{margin:8px 0 0;padding:8px 12px;border:1px solid var(--warn-line);background:var(--warn-soft);border-radius:8px;gap:8px 12px;width:fit-content;max-width:100%}
.mudar-prazo>span{flex-basis:100%;color:var(--warn);font-weight:500}
.mudar-prazo label{font-size:13px}
@media (max-width:820px){
  table.cartoes td.remover{grid-column:2;padding:0}
  .qtd-linha{grid-template-columns:auto 84px auto}
  .erro-campo{text-align:left}
  .motivo-urgencia{flex-direction:column;align-items:stretch}
  .motivo-urgencia input{flex:none}
}

/* Prazo e entrega no alto da coleta: uma linha que abre o formulário (aberta enquanto falta algo) */

/* Convites: o caminho do item numa escolha pequena, na linha de quantidade dele (saiu do Montar em 01/11/2026) */
.caminho-item{display:inline}
.caminho-item select{height:26px;font-size:12px;padding:0 6px;color:var(--fg)}
/* Propostas: a caixa Receber com o arquivo e o texto lado a lado, e fechada numa linha depois da resposta */
.receber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px}
.envio .receber .slots label{height:100%;justify-content:center}
.acoes-receber{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0}
.acoes-receber .note{margin:0}
.receber-fechado>summary{cursor:pointer;color:var(--agua-esc);font-weight:500}
.receber-fechado[open]>summary{margin-bottom:12px}
.receber-fechado[open]{display:flex;flex-direction:column;gap:12px}
h2 .contagem,summary .trocar{font-weight:400;margin-left:6px}
summary .trocar{color:var(--agua-esc)}
.conferir-ofertas{background:var(--warn-soft);border-color:var(--warn-line);color:var(--fg)}
.conferir-ofertas p,.conferir-ofertas ul{margin:0}
.conferir-ofertas ul{padding-left:18px;margin-top:6px}
html.js tr.outra-marca{display:none}
/* Conferência: as condições uma vez, a referência embaixo do item e a conta por unidade */
.condicoes{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;padding:12px 16px;background:var(--accent-tint);border-bottom:1px solid var(--line-2);font-size:13px}
.condicoes .cond-tit{flex-basis:100%;margin:0;color:var(--marinho)}
.condicoes label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.ref-item{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.cond-linha{margin-top:6px;font-size:12px}
.cond-linha>summary{cursor:pointer;color:var(--agua-esc)}
.cond-linha label{display:inline-flex;flex-direction:column;gap:2px;margin:6px 10px 0 0;color:var(--muted)}
.por-unidade{white-space:nowrap}
.por-unidade .pill,.por-unidade .ref-item{display:table;margin:4px 0 0 auto}
p.faltam{margin:0;padding:12px 16px;border-top:1px solid var(--line-2)}
p.de-quem{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:820px){
  .receber{grid-template-columns:minmax(0,1fr)}
  .por-unidade .pill,.por-unidade .ref-item{margin-left:0}
}
.nc-nota{display:block;margin-top:4px;text-align:left}

/* Cabeçalho da coleta: a situação na régua de passos (a etiqueta só onde a régua some), o tipo em texto, o prazo de
   resposta em destaque e, menor, quem criou */
@media (min-width:641px) and (min-height:501px){   /* fora da vista, mas o leitor de tela ainda ouve no título */
  .phead:has(.passos) h1 .sit:not(.sit-gerado){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0}}
.tipo-coleta{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--muted);vertical-align:middle;margin-left:4px}
.phead .prazo-resposta{color:var(--fg);font-weight:600}
.phead .sub-quem{margin:2px 0 0;font-size:12px;color:var(--muted)}

/* Convites (01/11/2026): na chegada, a ação no alto; convidados em lista; o convite na ordem do trabalho */
.proximo-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.proximo-linha h2{margin:0 0 2px;padding:0;border:0}
.proximo-linha p{margin:0}
.proximo-linha form{margin:0}
.proximo .falta{margin-top:14px}
.sem-ct{display:inline-block;font-size:11px;font-weight:600;line-height:16px;color:var(--warn);background:var(--warn-soft);border-radius:4px;padding:0 6px;white-space:nowrap}
td[data-l=Convidados] .tags{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
td[data-l=Convidados] .tag{background:none;border:0;padding:0;border-radius:6px;font-size:12.5px;font-weight:500;gap:4px 8px;flex-wrap:nowrap;max-width:none}
td[data-l=Convidados] .tag .ultima-venda{font-weight:400;font-variant-numeric:tabular-nums}
td[data-l=Convidados] .tag .mais-recente{color:var(--agua-esc)}
td[data-l=Convidados] .tag button{margin-left:-4px}
.resumo-grade{font-weight:400;font-size:12.5px;color:var(--muted);margin-left:8px}
.acoes-convite{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px}
td[data-l=Pedido] details .acoes-convite{margin:6px 0}
form.na-linha{display:inline;margin:0}
form.na-linha .btn-texto{padding:0 2px;min-height:0}
.contato-linha{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end}
.contato-linha input{width:100%}
form.marcar-envio{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
form.marcar-envio details.outro label{margin-top:4px}
.estado-envio{font-size:12.5px;color:var(--good)}
.estado-envio b{font-weight:600}
@media (max-width:520px){
  .filtro-convidado .campo{display:flex;width:100%}
  .filtro-convidado select{flex:1;min-width:0;max-width:none}
  td[data-l=Convidados] .tags{gap:0;width:100%}
  td[data-l=Convidados] .tag{display:grid;grid-template-columns:minmax(0,1fr) 44px;width:100%;align-items:center;column-gap:4px;border-bottom:1px solid var(--line-2);padding:2px 0}
  td[data-l=Convidados] .tag>:not(form){grid-column:1;justify-self:start}
  td[data-l=Convidados] .tag form{grid-column:2;grid-row:1/span 3;justify-self:end}
  td[data-l=Convidados] .tag button{margin:0}
  .contato-linha{grid-template-columns:1fr}
}
/* aprovações (web/telas/aprovacoes.py): a Gestão aprova numa caixa de entrada, a lista e o pedido aberto; a compradora
   acompanha os pedidos dela em grupos */
.cab-simples{margin-bottom:18px}
.cab-simples .sub b{font-family:var(--f-num);color:var(--fg);font-weight:600}
.caixa{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}
.lista-apr{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.lista-apr a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 16px;border-top:1px solid var(--line-2);text-decoration:none;color:var(--fg)}
.lista-apr a:first-child{border-top:0}
.lista-apr a:hover{background:var(--accent-tint)}
.lista-apr a[aria-current]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--agua)}
.lista-apr .forn{font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-apr .val{font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums}
.lista-apr .meta{grid-column:1/-1;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.lista-apr .sep{border-top:1px solid var(--line);padding:10px 16px 6px;font-size:12px;font-weight:600;color:var(--muted);background:var(--th)}
.lista-apr a.apagado .forn,.lista-apr a.apagado .val{color:var(--muted)}
.tag-urg{font-size:11px;font-weight:600;color:var(--bad);background:var(--bad-soft);border-radius:999px;padding:1px 8px}
.detalhe{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.det-topo{padding:20px 24px 16px;border-bottom:1px solid var(--line-2)}
.det-topo h2{margin:0;font-size:17px;color:var(--fg)}
.det-topo .valor-grande{font-family:var(--f-num);font-size:28px;font-weight:700;color:var(--fg);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.det-topo p{margin:0;color:var(--muted);font-size:12.5px}
.olhar{padding:14px 24px;border-bottom:1px solid var(--line-2);display:grid;gap:6px}
.olhar p{margin:0;font-size:13px;color:var(--fg);display:flex;gap:8px;align-items:baseline}
.olhar p::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--warn);transform:translateY(-1px)}
.olhar p.calmo::before{background:var(--good)}
.itens-det{width:100%}
.itens-det td{padding:12px 24px;border-bottom:1px solid var(--line-2)}
.itens-det td small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.itens-det td.num{width:1%}
.itens-det .acima{color:var(--warn)}
.acoes-apr{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px 24px;background:var(--th);border-top:1px solid var(--line)}
.acoes-apr .btn{height:40px;padding:0 22px}
.acoes-apr form{margin:0}
p.acoes-apr{margin:0;font-size:13px}
.linha-apr .forn a{color:inherit;text-decoration:none}
.linha-apr .forn a:hover{text-decoration:underline}
.acoes-apr .ver{margin-left:auto;font-size:12.5px}
.devolver[open]{flex-basis:100%}
.devolver summary{list-style:none;display:inline-flex}
.devolver summary::-webkit-details-marker{display:none}
.devolver-form{display:grid;gap:8px;max-width:560px}
.obs{display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--fg)}
.aviso-aprovacao{margin:0 0 16px}
.devolver-form textarea{font:inherit;border:1px solid var(--field);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--fg)}
.rodape-apr{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.rodape-apr summary{cursor:pointer;color:var(--agua-esc);font-weight:500}
.decididos{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.decididos b{color:var(--fg);font-weight:600}
.rodape-apr form{margin-top:10px}
/* compradora */
.grupo-apr{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.grupo-apr h2{margin:0;padding:13px 18px;border-bottom:1px solid var(--line-2);display:flex;gap:8px;align-items:baseline}
.grupo-apr h2 small{font-weight:400;color:var(--muted);font-size:12px}
.linha-apr{display:grid;grid-template-columns:minmax(0,1fr) 130px 190px;gap:4px 18px;align-items:center;padding:14px 18px;border-top:1px solid var(--line-2)}
.grupo-apr h2+.linha-apr{border-top:0}
.linha-apr .forn{font-weight:600;color:var(--fg)}
.linha-apr .forn small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.linha-apr .val{font-family:var(--f-num);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.linha-apr .acao{justify-self:end;text-align:right;font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center}
.linha-apr a.acao{color:var(--agua-esc)}
.linha-apr a.acao.btn{color:var(--on-accent)}
.estreito{max-width:880px}
.motivo-dev{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;color:var(--fg);padding:8px 12px;background:var(--warn-soft);border-radius:8px}
.motivo-dev b{font-weight:600}
.passinhos{display:inline-flex;gap:4px;vertical-align:middle;margin-right:6px}
.passinhos i{display:block;width:18px;height:6px;border-radius:3px;background:var(--line)}
.passinhos i.feito{background:var(--agua)}
/* aba Pedidos: a alçada numa linha, abaixo dos itens */
.espera-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;margin:0;font-size:13px;color:var(--fg)}
.espera-linha .muted{font-size:12.5px}
.espera-linha .relogio{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
@media (max-width:820px){
  .caixa{grid-template-columns:minmax(0,1fr)}
  .det-topo,.olhar,.acoes-apr{padding-left:16px;padding-right:16px}
  .itens-det td{padding:10px 16px}
  .acoes-apr .btn{flex:1;justify-content:center}
  .acoes-apr .ver{margin-left:0}
  .linha-apr{grid-template-columns:minmax(0,1fr) auto}
  .linha-apr .acao{grid-column:1/-1;justify-self:start;text-align:left}
}
/* Histórico (historico.html e historico_cotacao.html): as ações, o tempo nas aprovações e as etapas da cotação */
table.historico td.quando{white-space:nowrap;color:var(--muted)}
table.historico td.item{min-width:260px}
.filtros input.curto{width:96px}
details.mudou{margin-top:4px;font-size:12px}
details.mudou summary{cursor:pointer;color:var(--agua-esc)}
details.mudou dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 12px;margin:6px 0 0;padding:8px 10px;background:var(--surface-2);border-radius:8px}
details.mudou dt{color:var(--muted)}
details.mudou dd{margin:0;overflow-wrap:anywhere}
details.mudou s{color:var(--muted)}
.total-tempo{margin-left:auto;text-align:right;line-height:1.2}
.total-tempo b{display:block;text-align:inherit;font-family:var(--f-num);font-size:24px;color:var(--marinho)}
.total-tempo small{color:var(--muted);font-size:12px}
.etapas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0}
.etapas li{position:relative;display:grid;gap:2px;align-content:start;padding:14px 12px 4px 0;border-top:3px solid var(--agua);font-size:12.5px}
.etapas li::before{content:"";position:absolute;top:-8px;left:0;width:13px;height:13px;border-radius:50%;background:var(--agua);box-shadow:0 0 0 3px var(--surface)}
.etapas li.falta{border-top-color:var(--line)}
.etapas li.falta::before{background:var(--surface);box-shadow:inset 0 0 0 2px var(--line),0 0 0 3px var(--surface)}
.etapas li b{font-weight:600;color:var(--fg)}
.etapas li .num{text-align:left}
.etapas li small{color:var(--agua-esc);font-weight:600}
@media (max-width:820px){
  table.historico td.item{min-width:0}
  .total-tempo{margin-left:0;text-align:left;flex:1 1 100%}
  .etapas{grid-template-columns:minmax(0,1fr)}
  .etapas li{border-top:0;border-left:3px solid var(--agua);padding:0 0 14px 16px}
  .etapas li.falta{border-left-color:var(--line)}
  .etapas li::before{top:0;left:-8px}
}