/* 1.64.1: NEGOCIAÇÕES E CANCELAMENTOS (web/negociacoes.js). Folha de vidro no padrão das telas da 1.64.0 (Atualizações,
   Usuários): tokens do Hub com valor reserva em todo var(), claro e escuro pelos mesmos tokens (body.dark), alvos de 44 px,
   foco visível. Computador largo (a partir de 1100 px): lista e ficha lado a lado. Mais estreito: a ficha desliza por cima
   da lista (a lista guarda a rolagem). iPhone (até 640 px): folha em tela cheia com a área segura. Respeita Reduzir
   Transparência, Aumentar Contraste e Reduzir Movimento. */

/* 1.64.3: A CENTRAL É UMA TELA DO HUB (#view-neg), em tela cheia, e a FICHA DO CASO é uma folha de 95% da altura
   (#neg-folha-raiz) que sobe com a mola do iOS e fecha só puxando para baixo (web/folha.js). A subida e a descida
   animam só transform (a folha) e opacity (o véu); will-change só enquanto anima (.animando) ou arrasta (inline). */
#neg-raiz.neg-tela{box-sizing:border-box;width:100%;padding:14px 18px 28px;color:var(--label,#3A2A1E)}
#neg-raiz .neg-topo{padding:4px 0 12px;border-bottom:0}
#neg-raiz .neg-topo h2{outline:none}
/* os casos: uma coluna no celular, grade que usa a largura toda no computador */
#neg-raiz .neg-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:12px;align-items:start}
#neg-raiz .neg-lista>.neg-vazio{grid-column:1/-1}
@media (min-width:1100px){
  #neg-raiz .neg-resumo{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr);gap:10px;align-items:stretch}
  #neg-raiz .neg-resumo>.neg-tiles{margin:0}
  #neg-raiz .neg-resumo>.neg-nota{grid-column:1/-1}
  #neg-raiz .neg-tiles.contas{grid-template-columns:repeat(5,minmax(0,1fr))}
  #neg-raiz .neg-filtros{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(260px,360px);gap:10px;align-items:start}
  #neg-raiz .neg-filtros>.neg-datas{grid-column:1/-1}
}
#neg-raiz .neg-abas{position:static;margin:0 0 12px;padding:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0}
@media (min-width:900px){#neg-raiz .neg-abas{max-width:720px}}

/* ---------- a ficha: folha de 95% ---------- */
#neg-folha-raiz{position:fixed;inset:0;z-index:1260}
body.neg-folha-aberta{overflow:hidden}
#neg-folha-raiz[hidden]{display:none}
.neg-folha-veu{position:absolute;inset:0;background:rgba(20,15,10,.46);opacity:0;transition:opacity var(--dur-folha,.38s) ease}
body.dark .neg-folha-veu{background:rgba(0,0,0,.6)}
#neg-folha-raiz.aberta .neg-folha-veu{opacity:var(--veu,1)}
.neg-folha{--folha-topo:max(5dvh, calc(var(--app-status,env(safe-area-inset-top,0px)) + 8px));
  position:absolute;left:0;right:0;bottom:0;margin:0 auto;top:var(--folha-topo);width:min(1180px,100%);box-sizing:border-box;
  display:flex;flex-direction:column;overflow:hidden;border-radius:22px 22px 0 0;
  background:var(--vidro-solido,#FBF8F4);color:var(--label,#3A2A1E);box-shadow:0 -10px 44px rgba(0,0,0,.22);
  transform:translate3d(0,100%,0);transition:transform var(--dur-folha,.38s) var(--curva-folha,cubic-bezier(.32,.72,0,1));
  touch-action:pan-y;-webkit-backface-visibility:hidden;backface-visibility:hidden}
body.dark .neg-folha{background:var(--vidro-solido,#1C1916)}
#neg-folha-raiz.aberta .neg-folha{transform:translate3d(0,0,0)}
#neg-folha-raiz.animando .neg-folha{will-change:transform}
#neg-folha-raiz.animando .neg-folha-veu{will-change:opacity}
#neg-folha-raiz.hub-folha-arrastando .neg-folha-veu{transition:none}
.neg-folha-alca{flex:none;display:flex;justify-content:center;align-items:center;height:22px;cursor:grab;touch-action:none}
.neg-folha-alca span{width:40px;height:5px;border-radius:3px;background:var(--folha-alca,rgba(60,60,67,.3))}
.neg-folha .neg-ficha-topo{cursor:grab;user-select:none;-webkit-user-select:none;padding-top:2px}
#neg-folha-raiz.hub-folha-arrastando .neg-folha-alca,#neg-folha-raiz.hub-folha-arrastando .neg-ficha-topo{cursor:grabbing}
.neg-folha-conteudo{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.neg-folha .neg-ficha-corpo{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.neg-folha .neg-ficha-rodape{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
/* o botão de fechar que só o leitor de tela anuncia (VoiceOver, TalkBack) e o teclado alcança; ninguém vê */
.neg-so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* folha larga: a conversa e o pedido lado a lado */
@media (min-width:1000px){
  .neg-folha .neg-ficha-corpo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:22px;align-content:start}
  .neg-folha .neg-ficha-corpo>.neg-marca,.neg-folha .neg-ficha-corpo>.neg-faixa,.neg-folha .neg-ficha-corpo>.neg-carregando,.neg-folha .neg-ficha-corpo>.neg-vazio{grid-column:1/-1}
}

/* ---------- topo, rolagem, rodapé ---------- */
.neg-topo,.neg-ficha-topo{flex:none;display:flex;align-items:flex-start;gap:4px;padding:14px 8px 10px 18px;border-bottom:.5px solid var(--sep,rgba(58,42,30,.14))}
.neg-ficha-topo{padding-left:8px}
.neg-titulos{flex:1;min-width:0}
.neg-topo h2{margin:2px 0 0;font-size:calc(22px * var(--dt,1));font-weight:700;letter-spacing:-.01em;line-height:1.2}
.neg-ficha-topo h3{margin:2px 0 0;font-size:calc(19px * var(--dt,1));font-weight:700;letter-spacing:-.01em;line-height:1.25;outline:none}
.neg-sub{margin:3px 0 0;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(11px, calc(13px * var(--dt,1))));line-height:1.35}
.neg-icone{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--label2,#6B5A4C);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-rapida,.12s),transform var(--dur-rapida,.12s)}
.neg-icone svg,.neg-voltar svg,.neg-busca-icone svg,.neg-ficha-vazia svg,.neg-chip.icone svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.neg-icone:hover,.neg-voltar:hover{background:var(--fill,rgba(90,65,45,.08))}}
.neg-icone:active,.neg-voltar:active,.neg-botao:active,.neg-card-botao:active{transform:scale(var(--apertado-escala,.97))}
.neg-icone.girando svg{animation:neg-gira .8s linear infinite}
.neg-voltar{flex:none;display:inline-flex;align-items:center;gap:2px;min-height:44px;min-width:44px;padding:0 10px 0 4px;border:0;border-radius:var(--r-pill,999px);background:transparent;color:var(--ink-blue,#0066CC);font-weight:600;font-size:calc(16px * var(--dt,1));cursor:pointer}
#neg-raiz button:focus-visible,#neg-raiz select:focus-visible,#neg-raiz input:focus-visible,#neg-raiz [tabindex]:focus-visible,#neg-folha-raiz button:focus-visible,#neg-folha-raiz [tabindex]:focus-visible{outline:var(--foco-largura,3px) solid var(--foco-cor,#2F7CF6);outline-offset:2px}
.neg-rolagem,.neg-ficha-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 14px 16px}
.neg-ficha-rodape{flex:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:10px 14px 14px;border-top:.5px solid var(--sep,rgba(58,42,30,.14))}
.neg-botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-pill,999px);background:var(--fill,rgba(90,65,45,.08));color:var(--label,#3A2A1E);font-weight:600;font-size:calc(15px * var(--dt,1));cursor:pointer;transition:transform var(--dur-rapida,.12s),filter var(--dur-rapida,.12s)}
.neg-botao.primario{background:var(--sys-red,#D92D20);color:#fff}
@media (hover:hover){.neg-botao.primario:hover{filter:brightness(.95)}}

/* ---------- avisos, resumo ---------- */
.neg-alerta{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--sys-orange,#FF8D28) 16%,transparent);font-size:calc(14px * var(--dt,1));line-height:1.4}
.neg-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:8px}
.neg-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:10px 12px;border:0;border-radius:var(--r-card,14px);background:var(--surface,#fff);box-shadow:inset 0 0 0 .5px var(--sep,rgba(58,42,30,.14));color:var(--label,#3A2A1E);text-align:left;font:inherit;min-width:0}
button.neg-tile{cursor:pointer;transition:transform var(--dur-rapida,.12s)}
button.neg-tile:active{transform:scale(var(--apertado-escala,.97))}
.neg-tile-rotulo{font-size:var(--f-footnote,max(11px, calc(13px * var(--dt,1))));font-weight:600;color:var(--label2,#6B5A4C)}
.neg-tile strong{font-size:calc(24px * var(--dt,1));font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;max-width:100%;overflow-wrap:anywhere}
.neg-tiles.dinheiro strong{font-size:calc(18px * var(--dt,1))}
.neg-tile-extra{font-size:var(--f-caption1,max(11px, calc(12px * var(--dt,1))));color:var(--label3,#8A7666);line-height:1.3}
.neg-tile.laranja strong{color:var(--ink-orange,#A84300)}
.neg-tile.azul strong{color:var(--ink-blue,#0066CC)}
.neg-tile.vermelho strong{color:var(--ink-red,#B42318)}
.neg-tile.verde strong{color:var(--ink-green,#1E7B34)}
/* 1.64.2: todo cartão é um filtro. Ligado: contorno e fundo na cor do cartão e um ponto no canto. */
.neg-tile{position:relative;--tile-cor:var(--label2,#6B5A4C)}
.neg-tile.laranja{--tile-cor:var(--ink-orange,#A84300)}.neg-tile.azul{--tile-cor:var(--ink-blue,#0066CC)}.neg-tile.vermelho,.neg-tile.contra{--tile-cor:var(--ink-red,#B42318)}
.neg-tile.tag-debito{--tile-cor:var(--ink-red,#B42318)}.neg-tile.tag-credito{--tile-cor:var(--ink-green,#1E7B34)} /* 1.72.0: vermelho e verde fixos davam 2,5 e 3:1 no escuro */.neg-tile.mantida{--tile-cor:var(--ink-green,#1E7B34)}
.neg-tile.on{box-shadow:inset 0 0 0 2.5px var(--tile-cor);background:color-mix(in srgb,var(--tile-cor) 11%,var(--surface,#fff))}
.neg-tile.on::after{content:'';position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--tile-cor)}
.neg-tile:focus-visible{outline:3px solid var(--sys-blue,#0088FF);outline-offset:2px}
.neg-tiles.contas strong{font-size:calc(18px * var(--dt,1));color:var(--tile-cor)}
.neg-tiles.contas .neg-tile-rotulo{padding:1px 8px;border-radius:999px;margin-left:-2px;max-width:calc(100% - 12px)}
/* 1.64.2: o nome da marca numa linha só (antes "Debitado da / loja" quebrava em duas no cartão estreito) */
.neg-tiles.contas{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.neg-tiles.contas .neg-tile-rotulo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--f-caption1,max(11px, calc(12px * var(--dt,1))))}
/* 1.72.0 (auditoria de design 1720): "Crédito para a loja" era cortado com reticências (131 px de texto numa caixa de 128) no
   computador. A etiqueta tem 6 px de respiro, o cartão 10, e os dois grupos só ficam lado a lado a partir de 1400 px, com
   mais largura para os cinco cartões de resultado; abaixo disso cada grupo usa a largura toda. */
.neg-tiles.contas .neg-tile{padding-left:10px;padding-right:10px}
.neg-tiles.contas .neg-tile-rotulo{padding:1px 6px;max-width:100%}
@media (min-width:1100px) and (max-width:1399px){#neg-raiz .neg-resumo{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1400px){#neg-raiz .neg-resumo{grid-template-columns:minmax(0,5fr) minmax(0,9fr)}}
.neg-tile.tag-debito .neg-tile-rotulo{background:#B42318;color:#fff}
.neg-tile.tag-credito .neg-tile-rotulo{background:#1E7B34;color:#fff}
.neg-tile.mantida .neg-tile-rotulo{box-shadow:inset 0 0 0 1.5px var(--ink-green,#1E7B34);color:var(--ink-green,#1E7B34)}
.neg-tile.contra .neg-tile-rotulo{background:color-mix(in srgb,var(--sys-red,#FF383C) 10%,transparent);color:var(--ink-red,#B42318)}
.neg-tile.cinza .neg-tile-rotulo{background:var(--fill,rgba(90,65,45,.08))}
.neg-nota{margin:2px 2px 12px;color:var(--label3,#8A7666);font-size:var(--f-caption1,max(11px, calc(12px * var(--dt,1))));line-height:1.4}

/* ---------- filtros ---------- */
.neg-filtros{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px}
.neg-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:2px;border-radius:12px;background:var(--fill,rgba(90,65,45,.08))}
.neg-seg button{min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--label,#3A2A1E);font-weight:600;font-size:calc(14px * var(--dt,1));cursor:pointer;padding:0 4px}
.neg-seg button.on{background:var(--surface,#fff);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.neg-datas,.neg-selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.neg-mais{border-radius:12px;background:var(--fill,rgba(90,65,45,.06))}
.neg-mais summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;cursor:pointer;list-style:none;font-weight:600;font-size:calc(14px * var(--dt,1))}
.neg-mais summary::-webkit-details-marker{display:none}
.neg-mais summary::after{content:"›";margin-left:4px;font-size:calc(20px * var(--dt,1));line-height:1;transition:transform var(--dur-rapida,.12s);color:var(--label2,#6B5A4C)}
.neg-mais[open] summary::after{transform:rotate(90deg)}
.neg-mais-ativos{margin-left:auto;color:var(--label2,#6B5A4C);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.neg-mais .neg-selects{padding:0 10px 10px}
@media (min-width:641px){.neg-mais .neg-selects{grid-template-columns:repeat(3,minmax(0,1fr))}.neg-mais .neg-campo select{font-size:calc(15px * var(--dt,1));padding:0 8px}}
.neg-datas label,.neg-campo{display:flex;flex-direction:column;gap:3px;min-width:0}
.neg-datas span,.neg-campo span{font-size:var(--f-caption1,max(11px, calc(12px * var(--dt,1))));font-weight:600;color:var(--label2,#6B5A4C)}
.neg-datas input,.neg-campo select,.neg-busca input{box-sizing:border-box;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:var(--surface,#fff);box-shadow:inset 0 0 0 .5px var(--sep,rgba(58,42,30,.2));color:var(--label,#3A2A1E);font:inherit;font-size:max(16px, calc(15px * var(--dt,1)))}
.neg-busca{position:relative;display:block}
.neg-busca-icone{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--label3,#8A7666);display:grid;pointer-events:none}
.neg-busca-icone svg{width:18px;height:18px}
.neg-busca input{padding-left:40px}

/* ---------- abas (quatro colunas: cabem no iPhone sem rolar para o lado) ---------- */
.neg-abas{position:sticky;top:-12px;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 -14px 10px;padding:8px 14px;background:var(--vidro-grosso,rgba(252,250,247,.92));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.neg-abas button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:48px;padding:4px 2px;border:0;border-radius:12px;background:var(--fill,rgba(90,65,45,.08));color:var(--label,#3A2A1E);font-weight:600;font-size:calc(13px * var(--dt,1));line-height:1.2;cursor:pointer}
.neg-abas button span:first-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.neg-abas button.on{background:var(--label,#3A2A1E);color:var(--page,#fff)}
.neg-aba-conta{font-variant-numeric:tabular-nums;font-size:calc(15px * var(--dt,1));font-weight:700}

/* ---------- cartões ---------- */
.neg-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.neg-card{border-radius:var(--r-card,16px);background:var(--surface,#fff);box-shadow:inset 0 0 0 .5px var(--sep,rgba(58,42,30,.14));overflow:hidden}
.neg-card.pendente{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sys-orange,#FF8D28) 70%,transparent)}
.neg-card.selecionado{box-shadow:inset 0 0 0 2px var(--sys-blue,#0088FF)}
.neg-card-botao{display:flex;flex-direction:column;gap:5px;width:100%;min-height:44px;padding:12px 14px;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;transition:transform var(--dur-rapida,.12s),background var(--dur-rapida,.12s)}
@media (hover:hover){.neg-card-botao:hover{background:var(--fill,rgba(90,65,45,.05))}}
.neg-card-topo{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:calc(14px * var(--dt,1))}
.neg-card-topo time{margin-left:auto;color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(11px, calc(13px * var(--dt,1))));font-variant-numeric:tabular-nums}
.neg-loja{color:var(--label2,#6B5A4C)}
.neg-plat{display:inline-block;padding:2px 8px;border-radius:6px;font-size:var(--f-caption1,max(11px, calc(12px * var(--dt,1))));font-weight:700;letter-spacing:.01em}
.neg-plat.ifood{background:#C8102E;color:#fff}
.neg-plat.nine{background:#FFD60A;color:#1C1C1E}
.neg-card-titulo{display:flex;align-items:baseline;gap:8px;font-weight:600;font-size:calc(16px * var(--dt,1));line-height:1.3}
.neg-valor{margin-left:auto;flex:none;font-variant-numeric:tabular-nums;font-size:calc(15px * var(--dt,1));color:var(--label2,#6B5A4C)}
.neg-valor.perdido{color:var(--ink-red,#B42318)}
.neg-valor.defendido{color:var(--ink-green,#1E7B34)}
.neg-card-msg{color:var(--label2,#6B5A4C);font-size:calc(15px * var(--dt,1));line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.neg-card-cliente{color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(11px, calc(13px * var(--dt,1))))}
.neg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.neg-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:var(--f-footnote,max(11px, calc(13px * var(--dt,1))));font-weight:600;line-height:1.3;max-width:100%;overflow-wrap:anywhere}
.neg-chip.icone svg{width:15px;height:15px}
.neg-chip b{font-variant-numeric:tabular-nums}
.neg-chip.laranja{background:color-mix(in srgb,var(--sys-orange,#FF8D28) 18%,transparent);color:var(--ink-orange,#A84300)}
.neg-chip.verde{background:color-mix(in srgb,var(--sys-green,#34C759) 16%,transparent);color:var(--ink-green,#1E7B34)}
.neg-chip.vermelho{background:color-mix(in srgb,var(--sys-red,#FF383C) 16%,transparent);color:var(--ink-red,#B42318)}
.neg-chip.vermelho-claro{background:color-mix(in srgb,var(--sys-red,#FF383C) 9%,transparent);color:var(--ink-red,#B42318)}
body.dark .neg-chip.vermelho-claro{color:color-mix(in srgb,var(--sys-red,#FF4245) 55%,#fff)} /* 1.72.0: 4,1:1 no escuro */
.neg-chip.azul{background:color-mix(in srgb,var(--sys-blue,#0088FF) 14%,transparent);color:var(--ink-blue,#0066CC)}
.neg-chip.roxo{background:color-mix(in srgb,var(--sys-purple,#B02FC2) 14%,transparent);color:color-mix(in srgb,var(--sys-purple,#B02FC2) 72%,var(--label,#3A2A1E))}
.neg-chip.amarelo{background:color-mix(in srgb,var(--sys-yellow,#FFCC00) 26%,transparent);color:var(--ink-yellow,#6B5200)}
.neg-chip.cinza{background:var(--fill,rgba(90,65,45,.08));color:var(--label2,#6B5A4C)}
/* 1.64.2: as marcas do Philippe são as mais fortes da tela: cheias, com ícone e primeiro. Recusa mantida (nada
   debitado) tem só o contorno verde; contra a loja sem marca, o vermelho claro. */
.neg-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 11px 4px 7px;border-radius:999px;font-size:calc(14px * var(--dt,1));font-weight:700;line-height:1.25;color:#fff;max-width:100%;overflow-wrap:anywhere}
.neg-tag svg,.neg-marca svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.neg-tag b{font-variant-numeric:tabular-nums;margin-left:3px;padding-left:7px;border-left:1px solid rgba(255,255,255,.5)}
.neg-tag.credito,.neg-marca.credito{background:#1E7B34}
.neg-tag.debito,.neg-marca.debito{background:#B42318}
.neg-chip.mantida{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-green,#1E7B34);color:var(--ink-green,#1E7B34)}
.neg-chip.contra{background:color-mix(in srgb,var(--sys-red,#FF383C) 9%,transparent);color:var(--ink-red,#B42318)}
.neg-card.tag-credito{box-shadow:inset 5px 0 0 #1E7B34,inset 0 0 0 .5px var(--sep,rgba(58,42,30,.14))}
.neg-card.tag-debito{box-shadow:inset 5px 0 0 #B42318,inset 0 0 0 .5px var(--sep,rgba(58,42,30,.14))}
.neg-card.tag-credito.selecionado{box-shadow:inset 5px 0 0 #1E7B34,inset 0 0 0 2px var(--sys-blue,#0088FF)}
.neg-card.tag-debito.selecionado{box-shadow:inset 5px 0 0 #B42318,inset 0 0 0 2px var(--sys-blue,#0088FF)}
.neg-marca{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;padding:12px 14px;border-radius:14px;color:#fff}
.neg-marca svg{width:24px;height:24px;margin-top:1px}
.neg-marca b{display:block;font-size:calc(17px * var(--dt,1));line-height:1.3;font-variant-numeric:tabular-nums}
.neg-marca p{margin:3px 0 0;font-size:calc(14px * var(--dt,1));line-height:1.4}
.neg-card-acoes{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:0 14px 12px}
.neg-card-seNada{color:var(--label2,#6B5A4C);font-size:var(--f-footnote,max(11px, calc(13px * var(--dt,1))));line-height:1.35;flex:1 1 180px}
.neg-vazio{padding:18px 8px;color:var(--label2,#6B5A4C);font-size:calc(15px * var(--dt,1));line-height:1.4}
.neg-vazio b{display:block;color:var(--label,#3A2A1E);font-size:calc(16px * var(--dt,1))}
.neg-vazio p{margin:4px 0 0}
.neg-vazio.erro b{color:var(--ink-red,#B42318)}
.neg-carregando{display:flex;align-items:center;gap:10px;padding:24px 8px;color:var(--label2,#6B5A4C);font-size:calc(15px * var(--dt,1))}
.neg-spin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;display:inline-block;flex:none;animation:neg-gira .7s linear infinite}
@keyframes neg-gira{to{transform:rotate(360deg)}}

/* ---------- ficha ---------- */
.neg-ficha-vazia{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px;text-align:center;color:var(--label3,#8A7666);font-size:calc(15px * var(--dt,1));line-height:1.45}
.neg-ficha-vazia svg{width:40px;height:40px}
.neg-ficha-vazia p{max-width:34ch;margin:0}
.neg-faixa{margin:0 0 14px;padding:10px 12px;border-radius:12px;font-size:calc(15px * var(--dt,1));line-height:1.4}
.neg-faixa.pendente{background:color-mix(in srgb,var(--sys-orange,#FF8D28) 16%,transparent)}
.neg-faixa.verde{background:color-mix(in srgb,var(--sys-green,#34C759) 14%,transparent)}
.neg-faixa.vermelho{background:color-mix(in srgb,var(--sys-red,#FF383C) 13%,transparent)}
.neg-faixa.cinza{background:var(--fill,rgba(90,65,45,.08))}
.neg-faixa-notas{margin:6px 0 0;padding-left:18px;font-size:calc(14px * var(--dt,1));line-height:1.4}
.neg-faixa-notas li{margin:2px 0}
.neg-secao{margin-bottom:18px}
.neg-secao h4{margin:0 0 10px;font-size:calc(13px * var(--dt,1));font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--label2,#6B5A4C)}
.neg-conversa{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.neg-msg{display:flex}
.neg-msg .neg-bolha{box-sizing:border-box;max-width:min(88%,560px);padding:10px 12px;border-radius:16px;background:var(--surface,#fff);box-shadow:inset 0 0 0 .5px var(--sep,rgba(58,42,30,.14));min-width:0}
.neg-msg.cliente .neg-bolha{border-top-left-radius:6px;background:var(--surface,#fff)}
.neg-msg.ia .neg-bolha{border-top-left-radius:6px;background:color-mix(in srgb,var(--sys-purple,#B02FC2) 10%,var(--surface,#fff))}
.neg-msg.loja{justify-content:flex-end}
.neg-msg.loja .neg-bolha{border-top-right-radius:6px;background:color-mix(in srgb,var(--sys-blue,#0088FF) 13%,var(--surface,#fff))}
.neg-msg.plataforma,.neg-msg.cancelamento,.neg-msg.sistema{justify-content:center}
.neg-msg.plataforma .neg-bolha{max-width:min(96%,620px);background:color-mix(in srgb,var(--sys-yellow,#FFCC00) 14%,var(--surface,#fff))}
.neg-msg.cancelamento .neg-bolha{max-width:min(96%,620px);background:color-mix(in srgb,var(--sys-red,#FF383C) 11%,var(--surface,#fff))}
.neg-msg.sistema .neg-bolha{max-width:min(96%,620px);background:transparent;box-shadow:none;border:1px dashed var(--label3,#8A7666)}
.neg-msg-topo{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.neg-msg-lado{font-size:var(--f-caption1,max(11px, calc(12px * var(--dt,1))));font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--label2,#6B5A4C)}
.neg-msg-topo time{margin-left:auto;color:var(--label3,#8A7666);font-size:var(--f-caption1,max(11px, calc(12px * var(--dt,1))));font-variant-numeric:tabular-nums}
.neg-msg-titulo{display:block;font-size:calc(15px * var(--dt,1));line-height:1.35}
.neg-msg-quem{display:block;margin-top:2px;color:var(--ink-blue,#0066CC);font-size:var(--f-footnote,max(11px, calc(13px * var(--dt,1))));font-weight:600}
.neg-msg-texto,.neg-msg-texto2{margin:6px 0 0;font-size:calc(15px * var(--dt,1));line-height:1.45;overflow-wrap:anywhere;white-space:pre-line}
.neg-msg-texto2{color:var(--label2,#6B5A4C);font-size:calc(14px * var(--dt,1))}
.neg-msg-detalhes{margin:8px 0 0;padding-left:18px;color:var(--label2,#6B5A4C);font-size:calc(14px * var(--dt,1));line-height:1.4}
.neg-msg-detalhes li{margin:2px 0}
/* miniaturas: o botão [data-foto] vem de HubFotos.grade (web/acoes-cliente.js); aqui só o tamanho no balão */
.neg-bolha .fotos-cliente{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.neg-bolha .fotos-cliente .foto-mini{width:84px;height:84px;min-width:44px;min-height:44px}
.neg-dados{margin:0;border-radius:var(--r-card,16px);background:var(--surface,#fff);box-shadow:inset 0 0 0 .5px var(--sep,rgba(58,42,30,.14));overflow:hidden}
.neg-linha{display:grid;grid-template-columns:minmax(96px,30%) 1fr;gap:10px;padding:10px 14px;border-top:.5px solid var(--sep,rgba(58,42,30,.14))}
.neg-linha:first-child{border-top:0}
.neg-linha dt{color:var(--label2,#6B5A4C);font-size:calc(14px * var(--dt,1));font-weight:600}
.neg-linha dd{margin:0;font-size:calc(15px * var(--dt,1));line-height:1.4;min-width:0;overflow-wrap:anywhere}
.neg-leve{color:var(--label3,#8A7666)}
.neg-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.neg-itens li{display:flex;flex-direction:column}
.neg-itens li span{color:var(--label2,#6B5A4C);font-size:calc(14px * var(--dt,1))}
.neg-itens .neg-obs{color:var(--ink-orange,#A84300);font-weight:600}
.neg-valores{display:flex;flex-wrap:wrap;gap:4px 14px;font-variant-numeric:tabular-nums}
.neg-total{font-weight:700}
.neg-horarios{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:4px 12px}
.neg-horarios li{display:flex;flex-direction:column;font-size:calc(14px * var(--dt,1))}
.neg-horarios li span{color:var(--label3,#8A7666);font-size:var(--f-caption1,max(11px, calc(12px * var(--dt,1))))}
.neg-horarios time{font-variant-numeric:tabular-nums}

/* 1.72.0 (pente fino): rótulo, número e nota de cada cartão na MESMA linha de base dos vizinhos. No celular "Pendentes agora"
   quebra em duas linhas e o 0 dele descia abaixo dos outros; com subgrid as três linhas do cartão são as da fileira */
.neg-tiles>.neg-tile{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:2px;align-content:start;justify-items:start}

/* ---------- selo do item de menu ---------- */
#menudd [data-view="neg"] .neg-selo,#seg [data-view="neg"] .neg-selo{margin-left:6px}
nav.gaveta [data-gvtela="neg"] .neg-selo{margin-left:auto;flex:none}

/* ---------- celular ---------- */
@media (max-width:640px){
  #neg-raiz.neg-tela{padding:10px 12px 20px}
  .neg-tiles{gap:6px}
  .neg-tile{padding:8px 12px}
  .neg-tile strong{font-size:var(--f-title3,calc(20px * var(--dt,1)))} /* 1.72.0: 21 px ficava fora da escala da Apple */
  .neg-tiles.dinheiro strong,.neg-tiles.contas strong{font-size:calc(15px * var(--dt,1))}
  .neg-linha{grid-template-columns:1fr;gap:2px}
  .neg-msg .neg-bolha{max-width:94%}
  .neg-ficha-rodape .neg-botao{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.neg-folha,.neg-folha-veu,.neg-spin,.neg-icone.girando svg{transition:none;animation:none}}
@media (prefers-reduced-transparency:reduce){#neg-raiz .neg-painel,.neg-abas{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--vidro-solido,#FBF8F4)}}
@media (prefers-contrast:more){.neg-card,.neg-tile,.neg-dados,.neg-msg .neg-bolha{box-shadow:inset 0 0 0 1.5px var(--label,#3A2A1E)}}
@media (forced-colors:active){.neg-plat,.neg-chip,.neg-tag,.neg-marca,.neg-tile-rotulo{forced-color-adjust:none}.neg-tile.on{outline:3px solid Highlight}}

/* ---------- 1.66.0 (onda G): computador pensado para o clique ----------
   Philippe (28/09/2026): "Essa tela tbm tem que passar por uma revisão de design. Os botões e filtros não estão alinhados
   corretamente." Medido na 1.65.0 a 1440 px: o período tinha 52 px de altura (44 + o respiro de 4 em cima e embaixo), o
   "Loja, plataforma e resultado" 44 px fechado e 116 px aberto, a busca 44 px, e as abas 48 px em outra largura; nada
   começava nem terminava na mesma linha. Agora, a partir de 1100 px:
   - UMA linha de ferramentas: período (controle segmentado) | loja | plataforma | resultado | busca (encostada à direita);
     os filtros ficam à vista (o abre-e-fecha é o jeito do celular), cada um com o nome dentro do próprio controle;
   - todos os controles com a MESMA altura (--neg-ctl: 36 px com mouse, 44 px no toque), o mesmo raio e 10 px entre eles;
   - as abas (Todos, Pendentes, Respondidas, Cancelados) viram um controle segmentado da mesma altura e com o mesmo
     respiro de 4 px da 1.65.0, alinhado à esquerda, logo abaixo;
   - a ficha do caso ganha o X no canto superior direito (web/negociacoes.js; topo-vidro.css esconde no celular). */
#neg-raiz{--neg-ctl:36px;--neg-gap:10px}
html.hub-toque #neg-raiz{--neg-ctl:44px}
@media (min-width:1100px){
  #neg-raiz .neg-filtros.neg-filtros-linha{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--neg-gap);margin:4px 0 12px}
  #neg-raiz .neg-filtros-linha>.neg-seg{flex:none;display:inline-grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(72px,auto);height:calc(var(--neg-ctl) + 2 * var(--seg-respiro,4px));min-height:0;box-sizing:border-box}
  #neg-raiz .neg-filtros-linha>.neg-seg button{min-height:0;height:var(--neg-ctl);padding:0 14px;font-size:var(--f-subhead,15px)}
  #neg-raiz .neg-filtros-linha>.neg-datas{flex:none;display:flex}
  #neg-raiz .neg-filtros-linha>.neg-datas>*{min-height:calc(var(--neg-ctl) + 2 * var(--seg-respiro,4px))}
  #neg-raiz .neg-selects-linha{display:flex;flex-wrap:nowrap;gap:var(--neg-gap);padding:0;align-items:center}
  #neg-raiz .neg-selects-linha .neg-campo{flex-direction:row;align-items:center;gap:0;height:calc(var(--neg-ctl) + 2 * var(--seg-respiro,4px));box-sizing:border-box;padding:0 4px 0 12px;border-radius:var(--seg-raio,14px);
    background:var(--surface,#fff);box-shadow:inset 0 0 0 .5px var(--sep,rgba(58,42,30,.2))}
  #neg-raiz .neg-selects-linha .neg-campo>span{flex:none;font-size:var(--f-footnote,13px);font-weight:600;color:var(--label2,#6B5A4C);white-space:nowrap}
  #neg-raiz .neg-selects-linha .neg-campo select{min-height:0;height:var(--neg-ctl);width:auto;min-width:0;max-width:200px;background:transparent;box-shadow:none;padding:0 6px;font-size:var(--f-subhead,15px);font-weight:600;cursor:pointer}
  #neg-raiz .neg-filtros-linha>.neg-busca{flex:1 1 220px;max-width:360px;margin-left:auto}
  #neg-raiz .neg-filtros-linha>.neg-busca input{min-height:0;height:calc(var(--neg-ctl) + 2 * var(--seg-respiro,4px));border-radius:var(--seg-raio,14px);font-size:var(--f-subhead,15px)}
  #neg-raiz .neg-abas{display:inline-grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(120px,auto);gap:var(--seg-respiro,4px);padding:var(--seg-respiro,4px);margin:0 0 14px;border-radius:var(--seg-raio,14px);
    background:var(--fill,rgba(90,65,45,.08));max-width:none}
  #neg-raiz .neg-abas button{flex-direction:row;gap:8px;min-height:0;height:var(--neg-ctl);padding:0 16px;border-radius:calc(var(--seg-raio,14px) - var(--seg-respiro,4px));background:transparent;font-size:var(--f-subhead,15px)}
  #neg-raiz .neg-abas button.on{background:var(--surface,#fff);color:var(--label,#3A2A1E);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  body.dark #neg-raiz .neg-abas button.on{background:#3A3531;box-shadow:0 1px 3px rgba(0,0,0,.5)}
  #neg-raiz .neg-aba-conta{font-size:var(--f-footnote,13px);min-width:22px;padding:1px 7px;border-radius:999px;background:var(--fill,rgba(90,65,45,.1));text-align:center;box-sizing:border-box}
  #neg-raiz .neg-abas button.on .neg-aba-conta{background:color-mix(in srgb,var(--label,#3A2A1E) 12%,transparent)}
  #neg-raiz .neg-topo{align-items:center}
}
/* mouse: hover nos controles da tela e nos cartões de resumo (no toque não há hover) */
html.hub-clique #neg-raiz .neg-seg button:not(.on):hover,html.hub-clique #neg-raiz .neg-abas button:not(.on):hover{background:color-mix(in srgb,var(--surface,#fff) 60%,transparent)}
html.hub-clique #neg-raiz button.neg-tile:hover{box-shadow:inset 0 0 0 1px var(--tile-cor)}
html.hub-clique #neg-raiz .neg-selects-linha .neg-campo:hover{box-shadow:inset 0 0 0 1px var(--sep,rgba(58,42,30,.3))}
/* o X da ficha no computador: botão redondo de 32 px no canto superior direito, com hover; o cabeçalho continua puxável */
.neg-ficha-x{flex:none;width:32px;height:32px;margin:0 6px 0 auto;align-self:flex-start;background:var(--fill,rgba(90,65,45,.08));color:var(--label,#3A2A1E);cursor:pointer}
.neg-ficha-x svg{width:18px;height:18px}
html.hub-clique .neg-ficha-x:hover{background:var(--fill2,rgba(58,42,30,.16))}
html.hub-toque .neg-ficha-x{width:44px;height:44px}
.neg-folha .neg-ficha-topo{padding-right:12px}
/* no computador a alça não aparece (ela é o sinal de arrastar do toque); o cabeçalho continua puxável com o mouse, como extra */
html:not(.hub-folha-celular) .neg-folha-alca{height:10px}
html:not(.hub-folha-celular) .neg-folha-alca span{display:none}
/* 1.68.2: chamado em tratativa por outra pessoa */
.neg-tratativa{color:#B54708;font-weight:600}
body.dark .neg-tratativa{color:#FDB022}