/* ================================================================
   licitacao-negociacoes.css — módulo NEGOCIAÇÕES (Licitação).

   Visual "Funil de Negociações" (28/08/2026): duas abas —
   Visão Geral e Perdas — desenhadas em HTML/CSS puro, sem
   Chart.js. Complementa `licitacao-report.css`, de onde vêm o
   cabeçalho (.fx-head/.fx-tabs), a barra de filtros (.fx-filters,
   .fxdd) e a tabela analítica (.lr-mx, .ct-*).

   Tudo aqui tem prefixo `.ng-`.
   ================================================================ */

/* ── paleta do módulo ─────────────────────────────────────────── */
.ng-wrap{
  --ng-navy:#0A2E5C;
  --ng-blue:#4C93D8;      /* em andamento  */
  --ng-green:#2FBF71;     /* ganhas        */
  --ng-red:#E4574C;       /* perdidas      */
  --ng-amber:#E8A33D;
  --ng-ink:#0A2E5C;
  --ng-body:#33495E;
  --ng-mut:#5B7189;
  --ng-mut2:#7C93A8;
  --ng-mut3:#93A7BA;
  --ng-bd:#E3EAF2;
  --ng-bd-soft:#F0F5FA;
  --ng-track:#EEF2F7;
  padding:16px 0 38px;display:flex;flex-direction:column;gap:12px;
}

/* ── caixa branca padrão ──────────────────────────────────────── */
.ng-card{background:#fff;border:1px solid var(--ng-bd);border-radius:14px;padding:16px 18px;
  box-shadow:0 1px 3px rgba(10,46,92,.05);}
.ng-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.ng-card h3{margin:0;font-size:15px;font-weight:800;color:var(--ng-ink);letter-spacing:-.2px;}
.ng-card .ng-sub{margin:3px 0 0;font-size:11px;color:var(--ng-mut3);font-weight:600;}
/* legenda da barra empilhada DENTRO do subtítulo: dizer "em andamento ×
   ganho × perdido" com as 3 cores custa zero altura, e uma faixa .ng-leg
   no cabeçalho não caberia junto com o botão em cartão de meia largura */
.ng-card .ng-sub b{font-weight:800;}
.ng-card .ng-sub .and{color:#3D7FBF;}
.ng-card .ng-sub .gan{color:#22794C;}
.ng-card .ng-sub .per{color:#B54545;}
.ng-card-h .ng-hint{font-size:10.5px;color:var(--ng-mut3);font-weight:600;white-space:nowrap;padding-top:3px;}
.ng-foot{margin-top:13px;padding-top:11px;border-top:1px solid var(--ng-bd-soft);
  font-size:11.5px;line-height:1.5;color:var(--ng-mut);}
.ng-foot b{color:var(--ng-ink);font-weight:700;}
.ng-empty{padding:26px 10px;text-align:center;color:var(--ng-mut3);font-size:12.5px;font-weight:600;line-height:1.5;}
.ng-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
/* cartao que divide a linha com um mais alto: o conteudo ocupa a sobra em
   vez de deixar um vao branco embaixo (ver portal-visuais-linha-simetrica) */
.ng-card.fill{display:flex;flex-direction:column;}
.ng-card.fill .ng-fill{flex:1;display:flex;flex-direction:column;justify-content:center;}
/* Os 4 cartões das linhas de dois têm alturas naturais bem diferentes (10
   famílias contra 3 fatias de rosca), e o mais alto esticava o vizinho
   deixando o vão no pé dele. Cada corpo de visual estica e se centra na
   sobra — o gráfico do mês CRESCE, os outros se centralizam. */
.ng-card.fill .ng-bars{flex:1;justify-content:center;}
/* lista CURTA (até 5 faixas) ao lado de um top 10: em vez de um bolo de
   4 barras no meio de 400px, a folga vai entre as faixas — 4 barras
   espalhadas parecem gráfico, empilhadas no meio parecem defeito (mesmo
   truque do `.lr-bl.sparse` no Sales Report) */
.ng-card.fill .ng-bars.sparse{justify-content:space-evenly;}
/* no hero a virada foi ao contrário: com a leitura do período dentro do
   cartão navy é ELE o mais alto, e quem sobrava era o funil */
.ng-card.fill .ng-fn{flex:1;justify-content:center;}
.ng-card.fill .ng-donut{flex:1;align-content:center;}
.ng-card.fill .ng-rate{flex:1;justify-content:center;}
.ng-card.fill .ng-mes{flex:1;display:flex;flex-direction:column;}
/* Perdas (02/09/2026): a aba virou CINCO linhas de dois cartões, e cada
   par tem alturas naturais diferentes (6 motivos de duas linhas contra 6
   barras; 6 concorrentes contra 8 linhas de recorrência). Sem isto o vão
   fica todo no PÉ do cartão mais baixo — o branco reclamado no print. */
.ng-card.fill .ng-mot{flex:1;justify-content:space-evenly;}
.ng-card.fill .ng-rec{flex:1;justify-content:center;}
/* tabelinha (concorrentes) dentro do corpo esticado: `height:100%` faz o
   navegador dividir a sobra entre as LINHAS em vez de empilhá-la embaixo —
   o vão de 135px que sobrava ao lado da recorrência. O `.ng-fill` centra
   o bloco; a altura é que faz as linhas respirarem. */
.ng-card.fill .ng-fill>table.ng-tbl{height:100%;}
/* a coluna estica em vez de sobrar branco embaixo. `min-height` é o piso
   de hoje: a altura da barra é % do invólucro, então o plot precisa de
   altura DEFINIDA — sem o piso, um flex indefinido achataria o gráfico. */
.ng-card.fill .ng-mes .ng-mes-plot{flex:1 1 auto;height:auto;min-height:186px;}

/* botão-texto discreto (Exportar, Ver todos) */
.ng-act{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;background:none;border:none;padding:0;
  font-family:inherit;font-size:11.5px;font-weight:700;color:#1272C4;cursor:pointer;white-space:nowrap;}
.ng-act[hidden]{display:none;}
.ng-act:hover{text-decoration:underline;}
.ng-act svg{stroke:currentColor;}

/* ══════════════════════════════════════════════════════════════
   1. HERO — cartão navy + funil
   ══════════════════════════════════════════════════════════════ */
.ng-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);gap:12px;align-items:stretch;}

.ng-navy{background:var(--ng-navy);border-radius:14px;padding:18px 20px;color:#fff;
  display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(10,46,92,.05);}
.ng-navy-k{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.ng-navy-v{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:9px;}
.ng-navy-v .n{font-size:38px;font-weight:800;line-height:1;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;}
.ng-navy-v .c{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72);}
.ng-split{display:flex;height:8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.14);margin-top:16px;}
.ng-split i{display:block;height:100%;}
.ng-split i+i{border-left:2px solid var(--ng-navy);}
.ng-splegs{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;}
.ng-spleg{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:rgba(255,255,255,.78);}
.ng-spleg i{width:8px;height:8px;border-radius:3px;flex-shrink:0;}
.ng-spleg b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums;}
.ng-navy-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "c d";gap:13px 12px;}
.ng-nf .k{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.ng-nf .v{font-size:17px;font-weight:800;margin-top:5px;line-height:1.1;font-variant-numeric:tabular-nums;}
.ng-nf .v.pos{color:#7BE0A8;}
.ng-nf .v.neg{color:#FFA5A5;}
.ng-nf .s{font-size:9.5px;font-weight:600;color:rgba(255,255,255,.5);margin-top:4px;line-height:1.35;}

/* ── LEITURA DO PERÍODO (dentro do cartão navy) ───────────────────
   O cartão tinha um vão branco de ~180px entre a legenda e o rodapé,
   porque quem manda na altura da linha é o funil ao lado. Em vez de
   encolher o cartão, o espaço virou TEXTO: frases montadas do que já
   está na tela (nenhuma consulta nova, nenhum número que não apareça
   num visual desta página) — ver `pintarInsights()`. */
.ng-ins{margin-top:16px;display:flex;flex-direction:column;gap:9px;}
.ng-ins-load{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.45);}
.ng-ins-l{display:grid;grid-template-columns:13px minmax(0,1fr);gap:8px;align-items:start;
  font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.76);font-weight:500;}
.ng-ins-l i{font-style:normal;font-size:10px;font-weight:800;line-height:1.65;
  color:rgba(255,255,255,.4);text-align:center;}
.ng-ins-l b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums;}
.ng-ins-l.pos i{color:#7BE0A8;}
.ng-ins-l.neg i{color:#FFA5A5;}
.ng-ins-l.warn i{color:#FFC46B;}
.ng-ins-l.warn b{color:#FFD79A;}

/* ── funil ───────────────────────────────────────────────────── */
.ng-fn{display:flex;flex-direction:column;gap:9px;margin-top:14px;}
.ng-fn-row{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);grid-template-areas:"lb bar";
  gap:14px;align-items:center;}
.ng-fn-lb{grid-area:lb;text-align:right;min-width:0;}
.ng-fn-lb .t{font-size:12.5px;font-weight:700;color:var(--ng-ink);line-height:1.25;}
.ng-fn-lb .s{font-size:10px;font-weight:600;color:var(--ng-mut3);margin-top:3px;line-height:1.35;}
.ng-fn-tr{grid-area:bar;display:flex;justify-content:center;}
.ng-fn-bar{height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;
  padding:0 11px;box-sizing:border-box;min-width:118px;min-width:max-content;max-width:100%;cursor:pointer;
  box-shadow:0 2px 6px rgba(10,46,92,.10);}
.ng-fn-bar:hover{filter:brightness(1.06);}
.ng-fn-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"a b c d";
  gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--ng-bd-soft);}
.ng-st .k{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ng-mut3);line-height:1.35;}
.ng-st .v{font-size:20px;font-weight:800;color:var(--ng-ink);margin-top:6px;line-height:1;font-variant-numeric:tabular-nums;}
.ng-st .v.pos{color:#22794C;} .ng-st .v.neg{color:#B54545;}
.ng-st .s{font-size:10.5px;font-weight:600;color:var(--ng-mut3);margin-top:5px;line-height:1.35;}

/* ══════════════════════════════════════════════════════════════
   2. CARTÕES POR ESTRATÉGIA
   ══════════════════════════════════════════════════════════════ */
.ng-estr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;}
.ng-estr-c{border:1px solid var(--ng-bd);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;}
.ng-estr-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.ng-estr-t{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ng-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ng-estr-v{font-size:14px;font-weight:800;color:var(--ng-ink);white-space:nowrap;font-variant-numeric:tabular-nums;}
.ng-estr-s{font-size:10.5px;font-weight:600;color:var(--ng-mut3);margin-top:3px;}
.ng-estr-b{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:11px;}
.ng-estr-bar{height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:10.5px;font-weight:700;white-space:nowrap;padding:0 9px;box-sizing:border-box;min-width:110px;min-width:max-content;max-width:100%;
  font-variant-numeric:tabular-nums;}

/* ── FAIXA DE TAXAS (ganho · perda · conversão em R$) ─────────────
   A MESMA leitura do rodapé do funil, repetida em cada recorte: é o
   pedido de 02/09/2026 ("quero ver tudo de tudo"). Fica no pé de
   qualquer cartão que tenha ganhas e perdidas — hoje os 3 cartões de
   estratégia. Denominador é sempre o das FECHADAS, nunca o total. */
/* `grid-template-areas` NÃO é enfeite: o `collapseWideGridsMobile()` do
   nav-sidebar.js colapsa para 1fr, por STYLE INLINE, todo grid de 3+
   colunas no celular — e style inline ganha até de media query. Quem
   declara áreas ele poupa de propósito (é o mesmo motivo de .ng-fn-stats,
   .ng-navy-foot e .ng-kpi4 terem áreas). Sem isto, a faixa virava 3
   linhas empilhadas e o cartão de estratégia esticava 100px. */
.ng-txs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a b c";
  gap:10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--ng-bd-soft);}
.ng-txs.pre{margin-top:12px;}
.ng-tx .k{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ng-mut3);line-height:1.3;}
.ng-tx .v{font-size:15px;font-weight:800;color:var(--ng-ink);margin-top:5px;line-height:1;
  font-variant-numeric:tabular-nums;}
.ng-tx .v.pos{color:#22794C;} .ng-tx .v.neg{color:#B54545;}
.ng-tx .s{font-size:9.5px;font-weight:600;color:var(--ng-mut3);margin-top:4px;line-height:1.35;}
.ng-leg{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ng-leg span{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ng-mut);}
.ng-leg i{width:8px;height:8px;border-radius:3px;flex-shrink:0;}

/* ══════════════════════════════════════════════════════════════
   3. LISTA DE BARRAS (filial · vendedor · família)
   ══════════════════════════════════════════════════════════════ */
.ng-bars{display:flex;flex-direction:column;gap:11px;margin-top:14px;}
/* lista com a linha de taxas: cada item ocupa 2 linhas, o respiro entre
   itens cresce para o olho não juntar a taxa de um com o nome do outro */
.ng-bars.taxa{gap:13px;}
.ng-bar-row{display:grid;grid-template-columns:minmax(0,108px) minmax(0,1fr) minmax(56px,auto);
  grid-template-areas:"nm tr vl";gap:12px;align-items:center;cursor:pointer;
  padding:3px 5px;margin:-3px -5px;border-radius:8px;border:1px solid transparent;}
/* ganho × perda embaixo da barra de valor (02/09/2026) — a barra diz
   QUANTO foi negociado, a linha de baixo diz o que aconteceu com isso */
.ng-bar-row.tx{grid-template-areas:"nm tr vl" "tx tx tx";row-gap:6px;padding:5px;margin:-5px;}
.ng-bar-tx{grid-area:tx;display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;
  font-size:10px;font-weight:600;color:var(--ng-mut2);line-height:1.2;}
.ng-bar-tx b{font-weight:800;font-variant-numeric:tabular-nums;}
.ng-bar-tx b.g{color:#22794C;}
.ng-bar-tx b.p{color:#B54545;}
.ng-bar-tx .n{color:var(--ng-mut3);font-weight:600;}
.ng-bar-tx .mini{display:flex;width:50px;height:5px;border-radius:999px;overflow:hidden;
  background:var(--ng-track);flex-shrink:0;}
.ng-bar-tx .mini i{display:block;height:100%;}
.ng-bar-tx .mini i.g{background:var(--ng-green);}
.ng-bar-tx .mini i.p{background:var(--ng-red);}
.ng-bar-row:hover{background:#F7FAFD;border-color:var(--ng-bd);}
.ng-bar-row.on{background:#EFF6FF;border-color:#BFDBFE;}
.ng-bar-nm{grid-area:nm;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ng-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ng-bar-nm.dim{color:var(--ng-mut3);}
.ng-bar-tr{grid-area:tr;display:block;height:12px;border-radius:999px;background:var(--ng-track);overflow:hidden;}
.ng-bar-fl{display:block;height:100%;border-radius:999px;min-width:2px;}
.ng-bar-v{grid-area:vl;text-align:right;font-size:12.5px;font-weight:800;color:var(--ng-ink);
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.ng-bar-v.dim{color:var(--ng-mut3);font-weight:700;}
.ng-bars.wide .ng-bar-row{grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(64px,auto);}

/* ── barra EMPILHADA por desfecho (02/09/2026) ──────────────────
   "falta o valor de perdido, ganho e em andamento de cada": a LARGURA
   total continua sendo o valor negociado (é o que compara as faixas
   entre si) e os pedaços dizem o que aconteceu com esse dinheiro — a
   mesma lógica dos cartões de estratégia, sem um visual novo para cada
   recorte. Pedaço de valor zero não é desenhado, senão a divisória de
   1px viraria uma listra branca sem pedaço nenhum. */
.ng-bar-cmp{display:flex;height:100%;border-radius:999px;overflow:hidden;min-width:2px;}
.ng-bar-cmp i{display:block;height:100%;min-width:0;}
.ng-bar-cmp i+i{border-left:1px solid #fff;}
/* os 3 números na linha de baixo: o ponto colorido casa com o pedaço da
   barra acima (em andamento · ganho · perdido), então não precisa de
   rótulo em cada um — o que economiza a 3ª linha em cada faixa */
.ng-bar-d{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-variant-numeric:tabular-nums;}
.ng-bar-d::before{content:'';width:6px;height:6px;border-radius:2px;background:currentColor;flex-shrink:0;}
.ng-bar-d.and{color:#3D7FBF;}
.ng-bar-d.gan{color:#22794C;}
.ng-bar-d.per{color:#B54545;}
.ng-bar-d.z{color:var(--ng-mut3);font-weight:700;}
.ng-bar-tx .sep{color:var(--ng-bd);font-weight:700;}

/* ── "Ver todos" dos vendedores: a lista vira COLUNAS ───────────
   Com os 36 vendedores a lista fica 4× mais alta que a de unidades ao
   lado: a linha esticava o cartão vizinho e o `fill` centrava as 8
   barras dele no meio de ~600px de branco (ver
   portal-visuais-linha-simetrica). Aberta, a linha vira UMA coluna —
   cada cartão na largura cheia, com altura natural, sem vão — e a lista
   se reparte em colunas de 420px. É multi-coluna do CSS, não grid: o
   ranking segue de cima para baixo DENTRO de cada coluna (grid leria na
   horizontal) e o `collapseWideGridsMobile()` do nav-sidebar não mexe
   no que não é grid. No celular a coluna de 420px já cabe uma só. */
.ng-row2.aberta{grid-template-columns:1fr;}
.ng-bars.cols{display:block;columns:3 420px;column-gap:28px;}
.ng-bars.cols>.ng-bar-row{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:10px;}

/* ══════════════════════════════════════════════════════════════
   4. ROSCA (situação)
   ══════════════════════════════════════════════════════════════ */
.ng-donut{display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);gap:20px;align-items:center;margin-top:14px;}
.ng-donut-fig{position:relative;width:100%;max-width:168px;justify-self:center;}
.ng-donut-fig svg{display:block;width:100%;height:auto;}
.ng-donut-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.ng-donut-mid .n{font-size:26px;font-weight:800;color:var(--ng-ink);line-height:1;font-variant-numeric:tabular-nums;}
.ng-donut-mid .s{font-size:10px;font-weight:600;color:var(--ng-mut3);margin-top:3px;}
.ng-dleg{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ng-dleg-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;grid-template-areas:"dot nm vl";
  gap:9px;align-items:center;padding:6px 6px;border-radius:8px;cursor:pointer;border:1px solid transparent;}
.ng-dleg-row:hover{background:#F7FAFD;border-color:var(--ng-bd);}
.ng-dleg-row.on{background:#EFF6FF;border-color:#BFDBFE;}
.ng-dleg-row i{grid-area:dot;width:9px;height:9px;border-radius:3px;justify-self:center;}
.ng-dleg-row .nm{grid-area:nm;font-size:12px;font-weight:600;color:var(--ng-body);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ng-dleg-row .vl{grid-area:vl;font-size:11.5px;font-weight:700;color:var(--ng-mut);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.ng-dvals{margin-top:11px;padding-top:10px;border-top:1px solid var(--ng-bd-soft);display:flex;flex-direction:column;gap:5px;}
.ng-dval{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11.5px;font-weight:600;color:var(--ng-mut2);}
.ng-dval b{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ng-ink);}
.ng-dval b.pos{color:#22794C;} .ng-dval b.neg{color:#B54545;}
/* segundo bloco: as TAXAS (denominador = fechadas, não o total) */
.ng-dval.sep{margin-top:7px;padding-top:8px;border-top:1px solid var(--ng-bd-soft);}
.ng-dval .u{font-size:10px;font-weight:600;color:var(--ng-mut3);margin-left:5px;}

/* ══════════════════════════════════════════════════════════════
   5. GANHAS × PERDIDAS POR MÊS
   ══════════════════════════════════════════════════════════════ */
.ng-mes{margin-top:14px;}
.ng-mes-plot{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;
  align-items:end;height:186px;padding-bottom:6px;border-bottom:1px solid var(--ng-bd);}
.ng-mes-col{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:100%;min-width:0;}
/* invólucro da barra: o número mora no topo dele, a barra cresce por baixo
   (a % de altura é do invólucro, então a escala segue sendo a do plot) */
.ng-mes-bw{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;
  width:26px;max-width:44%;height:100%;min-width:0;}
.ng-mes-b{width:100%;border-radius:4px 4px 0 0;min-height:2px;flex:0 0 auto;transition:height .25s ease;}
.ng-mes-b.g{background:var(--ng-green);}
.ng-mes-b.p{background:var(--ng-red);}
.ng-mes-n{font-size:10px;font-weight:800;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;}
.ng-mes-n.g{color:#22794C;}
.ng-mes-n.p{color:#B54545;}
.ng-mes-n.zero{color:var(--ng-mut);}
.ng-mes-x{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-top:8px;}
.ng-mes-x span{font-size:10.5px;font-weight:700;color:var(--ng-mut);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* taxa de ganho DO MÊS embaixo do rótulo: ler "58 × 40" e saber que
   deu 59% não pode depender de conta de cabeça (02/09/2026) */
.ng-mes-tx{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin-top:4px;}
.ng-mes-tx span{font-size:9.5px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;
  overflow:hidden;white-space:nowrap;}
.ng-mes-tx span.g{color:#22794C;}
.ng-mes-tx span.p{color:#B54545;}
.ng-mes-tx span.z{color:var(--ng-mut3);font-weight:600;}

/* ══════════════════════════════════════════════════════════════
   6. TAXA DE GANHO POR FILIAL
   ══════════════════════════════════════════════════════════════ */
/* A barra é EMPILHADA desde 02/09/2026: verde = taxa de ganho, vermelho
   = taxa de perda, e as duas fecham 100% das fechadas (ganhas e perdidas
   são disjuntas pela precedência da rolagem). A escala de cor por faixa
   — verde/âmbar/vermelho conforme a taxa — saiu junto: com as duas cores
   na mesma barra ela mentia sobre o que cada pedaço significava. */
.ng-rate{display:flex;flex-direction:column;gap:13px;margin-top:14px;}
.ng-rate-row{cursor:pointer;}
.ng-rate-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.ng-rate-nm{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ng-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ng-rate-v{font-size:11px;font-weight:600;color:var(--ng-mut2);white-space:nowrap;
  font-variant-numeric:tabular-nums;flex-shrink:0;}
.ng-rate-v b{font-size:12.5px;font-weight:800;}
.ng-rate-v b.pos{color:#22794C;}
.ng-rate-v b.neg{color:#B54545;margin-left:7px;}
.ng-rate-v .s{font-size:11px;font-weight:600;color:var(--ng-mut3);margin-left:5px;}
.ng-rate-tr{display:flex;height:9px;border-radius:999px;background:var(--ng-track);overflow:hidden;margin-top:7px;}
.ng-rate-tr i{display:block;height:100%;}
.ng-rate-tr i.g{background:var(--ng-green);}
.ng-rate-tr i.p{background:var(--ng-red);}
.ng-rate-s{font-size:9.5px;font-weight:600;color:var(--ng-mut3);margin-top:5px;line-height:1.35;
  font-variant-numeric:tabular-nums;}
.ng-rate-tot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--ng-bd-soft);}
.ng-rate-tot .k{font-size:11.5px;font-weight:600;color:var(--ng-mut);}
.ng-rate-tot .v{font-size:11px;font-weight:600;color:var(--ng-mut2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ng-rate-tot .v b{font-size:14px;font-weight:800;}
.ng-rate-tot .v b.pos{color:#22794C;}
.ng-rate-tot .v b.neg{color:#B54545;margin-left:8px;}

/* ══════════════════════════════════════════════════════════════
   7. TABELA DENTRO DO CARTÃO (top clientes · concorrentes)
   ══════════════════════════════════════════════════════════════ */
body.dept .area-main table.ng-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;margin-top:14px;}
body.dept .area-main table.ng-tbl thead th{background:transparent;color:var(--ng-mut3);text-align:right;
  padding:9px 10px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-top:none;border-bottom:1px solid var(--ng-bd);white-space:nowrap;}
body.dept .area-main table.ng-tbl thead th:first-child{text-align:left;}
body.dept .area-main table.ng-tbl tbody td{padding:11px 10px;border-bottom:1px solid var(--ng-bd-soft);
  text-align:right;font-variant-numeric:tabular-nums;color:var(--ng-body);font-weight:700;
  /* "R$ 9,89 Mi" NÃO quebra em três linhas: com 9 colunas (valor + os 3
     desfechos + as 2 taxas) o número era o primeiro a ceder abaixo de
     1500px. Quem cede é a largura da tabela, que rola no .ng-tblwrap. */
  white-space:nowrap;}
/* tabela larga rola DENTRO do cartão — a página nunca rola na horizontal */
.ng-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
body.dept .area-main table.ng-tbl tbody td:first-child{text-align:left;color:var(--ng-ink);font-weight:800;
  max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.dept .area-main table.ng-tbl tbody td.dim{color:var(--ng-mut3);font-weight:600;}
body.dept .area-main table.ng-tbl tbody td.ok{color:#22794C;font-weight:800;}
body.dept .area-main table.ng-tbl tbody td.bad{color:#B54545;font-weight:800;}
body.dept .area-main table.ng-tbl tbody tr{cursor:pointer;}
body.dept .area-main table.ng-tbl tbody tr:hover td{background:#F7FAFD;}
body.dept .area-main table.ng-tbl tbody tr:last-child td{border-bottom:none;}

/* ══════════════════════════════════════════════════════════════
   8. ABA PERDAS
   ══════════════════════════════════════════════════════════════ */
.ng-kpi4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"a b c d";gap:14px;}
.ng-k{background:#fff;border:1px solid var(--ng-bd);border-radius:14px;padding:15px 17px;
  border-top:3px solid var(--ng-bd);box-shadow:0 1px 3px rgba(10,46,92,.05);}
.ng-k.red{border-top-color:var(--ng-red);}
.ng-k.amber{border-top-color:var(--ng-amber);}
.ng-k.blue{border-top-color:var(--ng-blue);}
.ng-k .k{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ng-mut3);}
.ng-k .v{font-size:25px;font-weight:800;color:var(--ng-ink);line-height:1;margin-top:9px;font-variant-numeric:tabular-nums;}
.ng-k .v.red{color:#B54545;} .ng-k .v.amber{color:#A8541F;} .ng-k .v.blue{color:#1272C4;}
.ng-k .s{font-size:10.5px;font-weight:600;color:var(--ng-mut3);margin-top:7px;line-height:1.4;}
.ng-k.navy{background:var(--ng-navy);border-color:var(--ng-navy);border-top-color:var(--ng-navy);}
.ng-k.navy .k{color:rgba(255,255,255,.6);}
.ng-k.navy .v{color:#fff;}
.ng-k.navy .s{color:rgba(255,255,255,.7);}

/* motivos de perda */
.ng-mot{display:flex;flex-direction:column;gap:17px;margin-top:16px;}
.ng-mot-row{cursor:pointer;}
.ng-mot-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.ng-mot-t{font-size:12.5px;font-weight:700;color:var(--ng-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ng-mot-m{font-size:11.5px;font-weight:700;color:var(--ng-mut);white-space:nowrap;font-variant-numeric:tabular-nums;}
.ng-mot-m b{color:#B54545;font-weight:800;margin-left:6px;}
.ng-mot-tr{height:9px;border-radius:999px;background:var(--ng-track);overflow:hidden;margin-top:8px;}
.ng-mot-fl{height:100%;border-radius:999px;min-width:2px;}

/* recorrência (padrões por cliente / item) */
.ng-rec{display:flex;flex-direction:column;gap:3px;margin-top:10px;}
.ng-rec-grp{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ng-mut3);padding:13px 4px 6px;}
.ng-rec-grp:first-child{padding-top:2px;}
.ng-rec-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;grid-template-areas:"nome meta tag";
  gap:12px;align-items:center;padding:8px;border-radius:8px;cursor:pointer;border:1px solid transparent;}
.ng-rec-row:hover{background:#F7FAFD;border-color:var(--ng-bd);}
.ng-rec-nm{grid-area:nome;font-size:12px;font-weight:700;color:var(--ng-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ng-rec-d{grid-area:meta;font-size:11px;color:var(--ng-mut2);font-weight:600;white-space:nowrap;text-align:right;
  overflow:hidden;text-overflow:ellipsis;}
.ng-rec-tag{grid-area:tag;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap;}
.ng-rec-tag.critico{background:#FEF2F2;color:#991B1B;}
.ng-rec-tag.padrao {background:#FFFBEB;color:#92400E;}
.ng-rec-tag.atencao{background:#F1F5F9;color:#475569;}
.ng-sec{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ng-mut3);
  margin:16px 0 0;}
.ng-sec:first-of-type{margin-top:14px;}

/* ══════════════════════════════════════════════════════════════
   9. FAIXAS DE APOIO (drill · notas · rodapé recolhível)
   ══════════════════════════════════════════════════════════════ */
.ng-drill{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;border-radius:11px;
  background:#EFF6FF;border:1px solid #BFDBFE;font-size:11.5px;color:#1E40AF;font-weight:600;}
.ng-drill .k{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5B8FD0;}
.ng-drill-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;
  background:#fff;border:1px solid #BFDBFE;font-size:11.5px;font-weight:700;color:var(--ng-ink);max-width:280px;}
.ng-drill-tag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ng-drill-tag b{font-weight:600;color:var(--ng-mut2);}
.ng-drill-tag button{width:17px;height:17px;flex-shrink:0;border:none;border-radius:999px;background:#EFF6FF;
  color:#1272C4;font-family:inherit;font-size:12px;line-height:1;cursor:pointer;padding:0;}
.ng-drill-tag button:hover{background:#DBEAFE;color:#B54545;}
.ng-drill .zerar{margin-left:auto;background:none;border:none;font-family:inherit;font-size:11.5px;
  font-weight:700;color:#1272C4;cursor:pointer;white-space:nowrap;}
.ng-drill .zerar:hover{color:#B54545;text-decoration:underline;}

.ng-nota{margin:0;padding:9px 14px;border-radius:10px;font-size:11.5px;line-height:1.5;
  background:#F5F9FD;border:1px solid var(--ng-bd);color:var(--ng-mut);}
.ng-nota b{color:var(--ng-ink);font-weight:700;}
.ng-nota.warn{background:#FFFBEB;border-color:#FDE68A;color:#854D0E;}
.ng-nota.warn b{color:#7C4A03;}
.ng-nota code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:#1272C4;}

/* rodapé: fonte, resumo executivo e as gavetas de detalhe */
.ng-rodape{display:flex;align-items:center;justify-content:center;gap:8px 18px;flex-wrap:wrap;
  font-size:11px;color:var(--ng-mut3);font-weight:600;text-align:center;line-height:1.6;}
.ng-gaveta{background:#fff;border:1px solid var(--ng-bd);border-radius:12px;overflow:hidden;}
.ng-gaveta>summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:12px;font-weight:700;
  color:var(--ng-mut);display:flex;align-items:center;gap:8px;}
.ng-gaveta>summary::-webkit-details-marker{display:none;}
.ng-gaveta>summary::before{content:'▸';font-size:11px;color:var(--ng-mut3);}
.ng-gaveta[open]>summary::before{content:'▾';}
.ng-gaveta>summary:hover{color:var(--ng-ink);background:#F7FAFD;}
.ng-gaveta-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px;}
.ng-gaveta .lr-tbl-wrap{border:none;border-radius:0;}
.ng-gaveta .lr-tbl-header{padding:6px 0 12px;}
/* tabela analítica SEMPRE exposta (deixou de ser gaveta em 28/08/2026) */
.ng-tabela{background:#fff;border:1px solid var(--ng-bd);border-radius:14px;
  box-shadow:0 1px 2px rgba(10,46,92,.04);overflow:hidden;}
.ng-tabela-body{padding:16px 20px 18px;display:flex;flex-direction:column;gap:10px;}
.ng-tabela .lr-tbl-wrap{border:none;border-radius:0;}
.ng-tabela .lr-tbl-header{padding:0 0 12px;}
/* `[hidden]` perde para `.ct-mais{display:block}` do licitacao-report.css —
   sem isto o botão fica na tela dizendo "Mostrar mais 0 linha(s)" */
.ng-tabela .ct-mais[hidden],.ng-gaveta .ct-mais[hidden]{display:none;}

/* ══════════════════════════════════════════════════════════════
   10. RESPONSIVO
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1099.98px){
  .ng-hero{grid-template-columns:1fr;}
  .ng-estr{grid-template-columns:1fr;}
  .ng-kpi4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "c d";}
  /* cartão navy empilhado deixa de brigar por largura: 4 rodapés em linha */
  .ng-navy-foot{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"a b c d";}
}
@media(max-width:900px){
  .ng-row2{grid-template-columns:1fr;}
}
@media(max-width:767.98px){
  .ng-wrap{padding:14px 0 34px;gap:12px;}
  .ng-card{padding:16px;}
  .ng-tabela-body{padding:14px;}
  .ng-navy{padding:16px;}
  .ng-navy-v .n{font-size:31px;}
  .ng-navy-foot{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "c d";gap:13px 10px;}
  .ng-ins{margin-top:14px;gap:8px;}
  .ng-ins-l{font-size:11px;}
  /* no celular as duas TAXAS dividem a linha e a conversão em R$ ocupa a
     de baixo: em 3 colunas de ~105px o rótulo quebrava em 3 linhas */
  .ng-txs{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "c c";gap:10px 8px;}
  .ng-tx .k{font-size:8px;letter-spacing:.04em;}
  .ng-tx .v{font-size:13.5px;}
  .ng-tx .s{font-size:9px;}
  .ng-bar-tx{font-size:9.5px;gap:3px 7px;}
  .ng-bar-tx .mini{width:40px;}
  .ng-rate-v{font-size:10px;}
  .ng-rate-v b{font-size:11.5px;}
  .ng-rate-s{font-size:9px;}
  .ng-mes-tx span{font-size:8.5px;}
  .ng-fn-row{grid-template-columns:1fr;grid-template-areas:"lb" "bar";gap:5px;}
  .ng-fn-lb{text-align:left;}
  .ng-fn-tr{justify-content:flex-start;}
  .ng-fn-bar{min-width:132px;}
  .ng-fn-stats{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "c d";}
  .ng-kpi4{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d";}
  .ng-bar-row{grid-template-columns:minmax(0,88px) minmax(0,1fr) minmax(52px,auto);gap:8px;}
  .ng-bars.wide .ng-bar-row{grid-template-columns:minmax(0,104px) minmax(0,1fr) minmax(56px,auto);}
  .ng-bar-nm{font-size:9.5px;}
  .ng-bar-v{font-size:11.5px;}
  .ng-donut{grid-template-columns:1fr;gap:14px;}
  .ng-mes-plot{height:150px;gap:4px;}
  /* no celular a linha de dois cartões virou coluna: não há sobra para
     distribuir, e o piso do `fill` é que decidiria a altura — ele tem de
     ceder para os 150px afinados aqui, senão o gráfico volta aos 186px */
  .ng-card.fill .ng-mes .ng-mes-plot{min-height:150px;}
  .ng-mes-x{gap:4px;}
  .ng-mes-bw{width:16px;gap:2px;}
  .ng-mes-n{font-size:8.5px;}
  .ng-mes-x span{font-size:9.5px;}
  .ng-rec-row{grid-template-columns:1fr auto;grid-template-areas:"nome tag" "meta meta";gap:4px 10px;}
  .ng-rec-d{text-align:left;white-space:normal;line-height:1.4;}
  .ng-drill{align-items:flex-start;}
  .ng-drill .zerar{margin-left:0;}
  body.dept .area-main table.ng-tbl{font-size:11.5px;}
  body.dept .area-main table.ng-tbl thead th,
  body.dept .area-main table.ng-tbl tbody td{padding:9px 6px;}
}

/* ── Impressão (resumo executivo abre em janela própria) ─────── */
@media print{
  .site-header,.site-footer,.area-sidebar,.fx-filters,.fx-tabs,.ng-act,.ng-gaveta,.ng-tabela{display:none !important;}
  .ng-wrap{gap:10px;}
  .ng-card,.ng-navy,.ng-k{break-inside:avoid;box-shadow:none;}
}