/* =====================================================================
   Visual v4 "Moderno + Clean" (13/10/2026): escolhido pelo Gustavo entre 4 acabamentos (maquete em _local/proposta_design).
   Menu lateral anil recolhível (Moderno, inspirado no RD Station) + quadro da Apple: chão cinza-azulado claro, cards quase
   brancos sem borda, cantos de 22 px, sombra suave e números grandes. Mesma fonte (Geist, desde a r102) e mesmas cores das empresas.
   Camada carregada depois do estilo.css: só sobrepõe (tirar o <link> volta ao visual v3).
   ===================================================================== */
:root {
  --fundo: #F2F3F7; --fundo-2: #F7F8FB; --papel: #FFFFFF; --linha: #E7EAF0; --linha-forte: #D5DAE4;
  --tinta: #14182B; --tinta-2: #3A4058; --tinta-3: #5D6480; --neutro: #6B7189; --cinza-estado: #6B7189;
  --sutil: #EEF1F6; --sutil-2: #F5F7FA; --sutil-3: #E5E9F1;
  --anel-ref: #A3ABBE;   /* 23/10: anel do período anterior na conversão (cerca de 1,9:1 sobre o trilho) */
  --anil: #212A53; --anil-2: #303B6C;
  --raio: 22px; --raio-m: 14px; --raio-p: 8px;
  --sombra: 0 1px 2px rgb(26 32 55 / .04), 0 12px 32px rgb(26 32 55 / .07);
  --sombra-h: 0 2px 6px rgb(26 32 55 / .05), 0 22px 48px rgb(26 32 55 / .13);
  --sombra-flut: 0 0 0 1px rgb(26 32 55 / .06), 0 16px 40px rgb(26 32 55 / .18);
  --lat: 248px;
}
html[data-recolhido="1"] { --lat: 76px; }
body { background: var(--fundo); color: var(--tinta); font-size: 14.5px; -webkit-font-smoothing: antialiased; }

/* ---------- esqueleto: menu lateral + coluna ---------- */
.app { display: grid; grid-template-columns: var(--lat) minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--anil) var(--lat), var(--fundo) var(--lat)); transition: grid-template-columns .25s ease; }
.coluna { min-width: 0; display: flex; flex-direction: column; }
.coluna > main { flex: 1; width: 100%; }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--anil); color: #DDE2F2; padding: 18px 14px 20px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .2) transparent; z-index: 25; }
.lateral .marca { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 18px 10px; min-height: 58px; }
.lateral .marca a { display: block; }
.lateral .marca img { height: 30px; display: block; }
.lateral .marca .logo-simbolo { display: none; }
.lateral .recolher { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #AEB6D6; cursor: pointer; transition: background-color .15s, color .15s; }
.lateral .recolher:hover { background: rgb(255 255 255 / .1); color: #fff; }
.lateral svg.i { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lateral .grupo { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8F98BD; padding: 18px 12px 6px; white-space: nowrap; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-weight: 500; font-size: 14px; color: #CDD3EA; min-height: 42px; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.lateral nav a span { overflow: hidden; text-overflow: ellipsis; }
.lateral nav a:hover { background: rgb(255 255 255 / .07); color: #fff; }
.lateral nav a[aria-current="page"] { background: rgb(255 255 255 / .12); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--laranja); }
.lateral nav a .bola { width: 10px; height: 10px; border-radius: 3px; margin: 0 4px; flex: none; }
.lateral .rodape-lat { margin-top: auto; padding: 18px 12px 0; font-size: 12px; color: #8F98BD; white-space: nowrap; }
/* recolhido: só os ícones (o nome aparece ao passar o mouse) */
html[data-recolhido="1"] .lateral { padding-left: 12px; padding-right: 12px; }
html[data-recolhido="1"] .lateral .marca { flex-direction: column; justify-content: flex-start; gap: 10px; padding: 2px 0 14px; }
html[data-recolhido="1"] .lateral .marca .logo-cheio { display: none; }
html[data-recolhido="1"] .lateral .marca .logo-simbolo { display: block; }
html[data-recolhido="1"] .lateral .recolher svg { transform: scaleX(-1); }
html[data-recolhido="1"] .lateral nav a { justify-content: center; padding: 10px 0; gap: 0; }
html[data-recolhido="1"] .lateral nav a span, html[data-recolhido="1"] .lateral .rodape-lat { display: none; }
html[data-recolhido="1"] .lateral .grupo { font-size: 0; padding: 12px 0 6px; margin: 0 10px; border-top: 1px solid rgb(255 255 255 / .12); }
html[data-recolhido="1"] .lateral nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--laranja); }

/* ---------- topo branco ---------- */
.topo { background: var(--papel); color: var(--tinta); border-bottom: 1px solid var(--linha); }
.topo::after { height: 3px; background: var(--marca-faixa); }
body[data-emp=""] .topo::after { display: none; }
.topo-in { max-width: 1440px; padding: 10px 28px; min-height: 64px; gap: 14px; }
.topo .titulo-topo { font-weight: 600; font-size: 16px; color: var(--tinta); white-space: nowrap; }
.topo .titulo-topo span { font-weight: 400; color: var(--tinta-3); }
.topo .logo-mob { display: none; height: 30px; width: auto; }
.topo .voltar { display: none; }
.topo .troca > button { padding: 6px 10px; border-radius: 12px; }
.topo .troca > button:hover, .topo .troca.aberto > button { background: var(--sutil); }
.topo .troca > button span { color: var(--tinta-3); }
.topo .logo-emp { height: 36px; }
.topo .troca .menu { border-radius: var(--raio-m); box-shadow: var(--sombra-flut); border: 0; }
.topo .chip-fonte, .chip-fonte { background: var(--papel); border-color: var(--linha-forte); color: var(--tinta-2); font-weight: 500; padding: 4px 11px; }
.topo .btn-icone, .btn-icone { background: var(--papel); border: 1px solid var(--linha-forte); color: var(--tinta-2); border-radius: 12px; min-height: 38px; padding: 0 12px; gap: 7px; font-weight: 600; font-size: 13.5px; }
.topo .btn-icone:hover, .btn-icone:hover { background: var(--papel); border-color: var(--tinta-3); color: var(--tinta); }
.btn-icone svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-icone.so-ico { padding: 0; width: 38px; justify-content: center; }
.topo .selo.leitura { background: var(--sutil); color: var(--tinta-2); }
header .abas { max-width: 1440px; padding: 0 28px; gap: 2px; }
header .abas a { color: var(--tinta-3); font-size: 14px; font-weight: 500; padding: 12px 14px 11px; }
header .abas a:hover { color: var(--tinta); }
header .abas a[aria-current="page"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--laranja); }
header .abas.globais { display: none; }   /* no computador as seções ficam no menu lateral */
.abas-sep { background: var(--linha-forte); }
.abas a.aba-emp img { opacity: .9; }

/* ---------- barra do período ---------- */
.periodo { background: rgb(242 243 247 / .86); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--linha); box-shadow: none; }
.periodo-in { max-width: 1440px; padding: 10px 28px; gap: 10px; }
.seg { background: #E5E8EF; border: 0; border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { border-radius: 9px; min-height: 32px; padding: 0 12px; font-weight: 500; font-size: 13.5px; color: var(--tinta-2); }
.seg button:hover { color: var(--tinta); }
.seg button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 3px rgb(26 32 55 / .14); }
.datas input, .sel, .toggle, .multi-bt { background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 12px; min-height: 38px; color: var(--tinta-2); font-size: 13.5px; }
.datas input { padding: 5px 10px; }
.sel { padding: 6px 10px; font-weight: 500; }
.toggle { border-color: transparent; background: transparent; padding: 4px 6px; font-weight: 500; gap: 8px; }
.toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 32px; height: 19px; margin: 0; border-radius: 999px; background: #CBD1DE; position: relative; cursor: pointer; flex: none; transition: background-color .15s; }
.toggle input[type="checkbox"]::before { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
.toggle input[type="checkbox"]:checked { background: var(--anil-2); }
.toggle input[type="checkbox"]:checked::before { transform: translateX(13px); }
.toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.ativo-linha { font-size: 13px; color: var(--tinta-3); }
.pilula { background: var(--papel); border-color: var(--linha-forte); }
.periodo-resumo { border-color: var(--linha-forte); border-radius: 12px; }

/* ---------- página ---------- */
main { max-width: 1440px; padding: 24px 28px 64px; }
.blocos { gap: 24px; }
.grade { gap: 24px; }
.rodape-pagina { max-width: 1440px; width: 100%; padding: 0 28px 32px; font-size: 12.5px; color: var(--tinta-3); }

/* cabeçalho da página e resumo do topo (Visão geral) */
.cab-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px 0 20px; }
.cab-pagina .olho { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.cab-pagina h1 { margin: 2px 0 0; font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -.035em; color: var(--tinta); }
.cab-pagina p { margin: 6px 0 0; color: var(--tinta-3); font-size: 14px; }
.ritmo-chip { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tinta-2); background: var(--papel); border-radius: var(--raio-m); padding: 10px 16px; box-shadow: var(--sombra); }
.ritmo-chip b { font-size: 15px; color: var(--tinta); }
.ritmo-chip .mt { width: 120px; height: 6px; border-radius: 999px; background: var(--sutil-3); overflow: hidden; }
.ritmo-chip .mt span { display: block; height: 100%; background: var(--anil-2); border-radius: 999px; }
.resumo-topo { container-type: inline-size; margin-bottom: 24px; }
.rt-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@container (max-width: 1100px) { .rt-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) { .rt-grade { grid-template-columns: minmax(0, 1fr); } }
.rt-tile { background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra); padding: 24px 26px; display: flex; flex-direction: column; gap: 6px; min-width: 0; text-decoration: none; color: inherit; }
a.rt-tile:hover { box-shadow: var(--sombra-h); }
.rt-tile .rot { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tinta-2); text-transform: none; letter-spacing: 0; }
.rt-tile .rot .bola { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rt-tile .rot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--tinta-3); flex: none; }
.rt-tile .val { font-size: 46px; font-weight: 600; letter-spacing: -.035em; line-height: 1.05; margin-top: 6px; white-space: nowrap; color: var(--tinta); font-family: var(--f-num); }
.rt-tile .val small { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--tinta-3); margin-left: 5px; }
.rt-tile .sub { font-size: 13px; color: var(--tinta-3); }
.rt-tile .sub b { color: var(--tinta); font-weight: 600; }
.rt-tile .sinais { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; }

/* barra de progresso com a marca do esperado (resumo, Farol) */
.prog { position: relative; height: 12px; border-radius: 999px; background: var(--sutil-3); margin-top: 10px; }
.prog .proj { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: color-mix(in srgb, var(--cor) 26%, transparent); }
.prog .feito { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--cor); min-width: 3px; }
.prog .esp { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--tinta); }
.prog .esp::after { content: ''; position: absolute; top: -3px; left: -3px; width: 8px; height: 3px; border-radius: 2px; background: var(--tinta); }

/* ---------- cards ---------- */
.mini, .cartao, .bloco { background: var(--papel); border: 0; border-radius: var(--raio); box-shadow: var(--sombra); }
.bloco { padding: 26px 28px 22px; }
.bloco h2 { font: 600 19px/1.3 var(--f-txt); letter-spacing: -.01em; color: var(--tinta); gap: 0; min-height: 38px; display: flex; align-items: center; }
.bloco h2::before { display: none; }
.bloco[data-ico]::before { content: ''; position: absolute; top: 26px; left: 28px; width: 38px; height: 38px; border-radius: 12px; background: var(--ico-bg, var(--sutil)) var(--ico) center / 20px no-repeat; }
.bloco[data-ico] > h2, .bloco[data-ico] > .subt, .bloco[data-ico] > .filtro-card { margin-left: 52px; }
.bloco .subt { font-size: 13px; line-height: 1.5; color: var(--tinta-3); margin: 0 0 18px; }
.subt-mais { border: 0; background: none; padding: 0 2px; font: 600 13px var(--f-txt); color: var(--link-cor, #2B4A9E); cursor: pointer; }
.subt-mais:hover { text-decoration: underline; }
.bloco .fonte { font-size: 12px; color: var(--tinta-3); padding-top: 12px; margin-top: auto; border-top: 1px solid var(--linha); }
.bloco p.cinza { font-size: 12.5px; color: var(--tinta-3); margin: 12px 0 8px; }
.bt-exp, .bt-info { top: 22px; width: 34px; height: 34px; border-radius: 10px; opacity: .6; }
.bt-exp { right: 22px; } .bt-info { right: 58px; }
.bt-exp:hover, .bt-info:hover { background: var(--sutil); border-color: transparent; }
.bloco > h2 { padding-right: 84px; }
.filtro-card { background: var(--sutil); border-radius: 10px; margin: -6px 0 14px; padding: 5px 11px; }
.mini { padding: 18px 20px; border-radius: 18px; }
.mini .ico { border-radius: 12px; }
.mini .num { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.kpi .rot, .rot { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--tinta-3); }
.kpi .num { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.kpi .num.grande { font-size: 46px; font-weight: 600; letter-spacing: -.035em; }
.kpi .sub { font-size: 13px; color: var(--tinta-3); }
.cascata .num { font-size: 44px; font-weight: 600; letter-spacing: -.03em; }
.bloco.s6 .cascata .num { font-size: 32px; }
.cascata .degrau + .degrau { border-left-color: var(--linha); }
.cascata .tira { border-top: 1px solid var(--linha); }
.regua .item, .kpi-bt { background: var(--fundo-2); border: 0; border-radius: var(--raio-m); box-shadow: inset 0 0 0 1px var(--linha); }
.kpi-bt:hover { box-shadow: inset 0 0 0 1px var(--laranja); }
.linha-pip { color: var(--tinta-2); }

/* ---------- tabelas: sem caixa dentro do card, só linhas finas ---------- */
.tabela-wrap { border: 0; border-radius: 0; background: transparent; }
.tabela-wrap.longa { border: 1px solid var(--linha); border-radius: var(--raio-m); }
table.t { font-size: 13.5px; }
table.t th { background: var(--papel); font: 600 12.5px/1.3 var(--f-txt); color: var(--tinta-3); padding: 10px; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--linha-forte); }
table.t th:first-child { background: var(--papel); }
table.t td { padding: 11px 10px; border-bottom: 1px solid var(--linha); }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody td:first-child { background: var(--papel); }
table.t tbody tr:hover td, table.t tbody tr:hover td:first-child { background: var(--sutil-2); }
table.t td small, table.t td small.sob { font-size: 11.5px; }
tr.pl-total td, table.t tbody tr.pl-total td:first-child { background: var(--sutil-2); border-top: 1px solid var(--linha-forte); }
tr.pl-pv td, table.t tbody tr.pl-pv td:first-child { background: var(--papel); border-top: 1px solid var(--linha-forte); }
table.cadeia-t td.cad.fraco { box-shadow: inset 0 0 0 1.5px var(--ruim); border-radius: 10px; }
table.cadeia-t td b { font-size: 15px; font-weight: 600; }
.pl-emp { font-weight: 600; gap: 10px; }
.pl-cor { width: 11px; height: 11px; border-radius: 4px; }
.so-planilha { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- selos e pílulas ---------- */
.estado { font-weight: 600; padding: 4px 11px 4px 10px; border-radius: 999px; }
.sinal { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12px; font-weight: 600; line-height: 1.35; border-radius: 999px; padding: 3px 10px 3px 8px; text-decoration: none; }
.sinal::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
a.sinal:hover { text-decoration: underline; }
.selo { border-radius: 7px; font-weight: 600; }
.hoje-tag { font-weight: 600; }
.subabas a { border-radius: 999px; box-shadow: 0 1px 3px rgb(26 32 55 / .1); border: 0; font-weight: 600; }

/* ---------- Farol em barras ---------- */
.leg-farol { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--tinta-3); margin: -4px 0 8px; }
.leg-farol span { display: inline-flex; align-items: center; gap: 7px; }
.leg-farol .k-feito { width: 18px; height: 8px; border-radius: 999px; background: var(--anil-2); }
.leg-farol .k-proj { width: 18px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--anil-2) 26%, transparent); }
.leg-farol .k-esp { width: 2px; height: 14px; background: var(--tinta); border-radius: 2px; }
/* 29/10 (v109, Rodada 65): o Fechamento das empresas no lugar do Farol da Visão geral. Uma linha baixa por empresa (Empresa, Vendas, Meta,
   Orçamentos, Atenção), números grandes, para as empresas caberem na primeira tela; a barra, a porcentagem e o selo na mesma coluna em
   todas as linhas. Container: a 1366 px o card tem cerca de 1.100 px e fica em uma linha; abaixo de 1.000 px a meta desce. */
.fc-legs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-bottom: 6px; }
.fc-legs > .leg-graf, .fc-legs > .leg-farol { margin: 0; padding: 0; font-size: 14px; line-height: 20px; }   /* a legenda da seta e a da barra na mesma linha e na mesma altura */
.fc-lista { container-type: inline-size; display: grid; margin-top: 4px; }
.fc-linha { display: grid; grid-template-columns: minmax(150px, 190px) minmax(140px, 1fr) minmax(300px, 2fr) minmax(140px, 1fr) minmax(170px, 220px); align-items: center; gap: 8px 24px; padding: 11px 14px; border-top: 1px solid var(--linha); border-radius: var(--raio-m); transition: background-color .15s ease; }
.fc-linha:not(.fc-cab):not(.fc-total):hover { background: var(--sutil-2); }
.fc-cab { border-top: 0; padding-block: 4px 8px; font-size: 13px; font-weight: 600; color: var(--tinta-3); }
.fc-cab > span:nth-child(2), .fc-cab > span:nth-child(4) { text-align: right; }
.fc-emp { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 600; font-size: 16px; color: var(--tinta); text-decoration: none; }
.fc-emp > span { white-space: nowrap; }
.fc-emp small { display: block; font-size: 13px; font-weight: 500; color: var(--tinta-3); }
a.fc-emp:hover > span { text-decoration: underline; }
.fc-tile { width: 32px; height: 32px; border-radius: 10px; background: var(--c); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.fc-tile img { width: 19px; height: 19px; object-fit: contain; display: block; }
.fc-num { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 0; color: inherit; text-decoration: none; }
.fc-num b { font: 600 28px/1.1 var(--f-num); letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-num small { display: flex; gap: 10px; align-items: baseline; margin-top: 4px; font-size: 14px; color: var(--tinta-3); white-space: nowrap; }
a.fc-num:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
a.fc-num:focus-visible, a.fc-emp:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 4px; border-radius: 6px; }
.fc-seta { font-weight: 600; color: var(--tinta-2); }
.fc-seta.cinza { font-weight: 500; color: var(--neutro); }
.fc-meta { min-width: 0; }
.fc-barra { display: grid; grid-template-columns: minmax(0, 1fr) 50px 112px; align-items: center; gap: 12px; }
.fc-barra .prog { margin-top: 0; }
.fc-pct { font: 600 18px/1 var(--f-num); color: var(--tinta); text-align: right; font-variant-numeric: tabular-nums; }
.fc-selo { display: flex; }
.fc-det { margin-top: 6px; font-size: 14px; color: var(--tinta-3); text-wrap: pretty; }
.fc-det b { color: var(--tinta-2); font-weight: 600; }
.fc-det > span { white-space: nowrap; }   /* quebra entre as partes, não no meio de "projeção R$ 94,7 mil" */
.fc-sinais { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.fc-sinais .sinal { white-space: normal; text-wrap: balance; }
.fc-total { border-top: 1px solid var(--linha-forte); margin-top: 2px; }
.fc-total .fc-num b { font-size: 24px; }
@container (max-width: 1000px) {
  .fc-linha { grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr); gap: 10px 28px; }
  .fc-cab > span:nth-child(3), .fc-cab > span:nth-child(5) { display: none; }
  .fc-meta { grid-column: 1 / 3; grid-row: 2; }
  .fc-sinais { grid-column: 3; grid-row: 2; }
}
@container (max-width: 600px) {
  .fc-linha { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 14px 4px; }
  .fc-cab { display: none; }
  .fc-emp { grid-column: 1 / -1; grid-row: 1; }
  .fc-num { align-items: flex-start; text-align: left; }
  .fc-num b { font-size: 24px; }
  .fc-linha > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .fc-linha > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .fc-meta { grid-column: 1 / -1; grid-row: 3; }
  .fc-sinais { grid-column: 1 / -1; grid-row: 4; }
  .fc-sinais:empty { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fc-linha { transition: none; } }

/* 29/10 (v110, Rodada 67): a Cadeia enxuta com a anatomia do Fechamento: o quadrado da empresa com o nome, o número com a seta na mesma
   linha e o detalhe embaixo. As regras de celular da Cadeia (estilo.css) continuam: cada linha vira um cartão */
table.cd-tab th { font-size: 13px; padding-block: 8px 10px; }
table.cd-tab td { padding: 10px 12px; vertical-align: middle; }
table.cd-tab td.cd-e { width: 1%; padding-right: 20px; }
table.cd-tab .fc-emp { white-space: nowrap; }
table.cd-tab td.cad a { padding: 2px 0; }
.cd-l1 { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; white-space: nowrap; }
.cd-l1 b { font: 600 18px/1.2 var(--f-num); letter-spacing: -.01em; color: var(--tinta); }
table.cadeia-t.cd-tab td .cd-l1 small { display: inline; margin: 0; font-size: 13.5px; }
table.cadeia-t.cd-tab td small { font-size: 13px; margin-top: 3px; }
table.cadeia-t.cd-tab td small.seta-t { color: var(--tinta-2); font-weight: 600; }
table.cadeia-t.cd-tab td small.abaixo { font-weight: 700; }
.cd-el { font-style: normal; color: var(--tinta-3); margin-right: 6px; font-weight: 500; }
table.cd-tab td.cd-pv { text-align: left; }
table.cd-tab td.cd-pv a { font-size: 14.5px; color: var(--tinta-2); }
table.cd-tab td.cd-pv b { font: 600 16px var(--f-num); color: var(--tinta); }
table.cd-tab td.cd-pv i { font-style: normal; color: var(--tinta-3); margin: 0 4px; }
table.cd-tab td.cd-pv small { display: inline; margin-left: 6px; }
table.cadeia-t.cd-tab tr.pl-pv .fc-emp small { display: block; margin: 0; font-size: 13px; }   /* "Energy" embaixo de "Pré-Vendas", como no Fechamento */
.cd-l1 .selo { margin: 0; }

/* 29/10 (v110, Rodada 67; ele: "dá pra fazer a tabela na pegada do cartão? ele tinha ficado bonito o cartão"): o "Como cada empresa vende",
   a tabela com a cara do cartão. A faixa da marca com o logo branco (o cabeçalho do cartão) e os números nos quadrinhos cinza (as pastilhas
   do cartão), nas mesmas colunas em todas as empresas; os rótulos uma vez, em cima. O pipeline um pouco mais largo: "funil avançado
   R$ 34,5 mil" cabe numa linha e a fileira não cresce */
.cc-lista { container-type: inline-size; display: grid; gap: 8px; margin-top: 4px; }
.cc-linha { display: grid; grid-template-columns: minmax(136px, 156px) repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr) minmax(0, 1fr); gap: 8px; }
.cc-cab { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); }
.cc-cab > span { padding: 0 12px 2px; }
.cc-cab > span:first-child { padding-inline: 4px; }
.cc-marca { display: flex; border-radius: var(--raio-m); background: linear-gradient(135deg, var(--emp-faixa) 0%, color-mix(in srgb, var(--emp-faixa) 78%, #000) 100%); transition: filter .15s ease; }
.cc-marca:hover { filter: brightness(1.07); }
.cc-marca a { display: flex; align-items: center; width: 100%; min-height: 64px; padding: 10px 16px; border-radius: inherit; }
.cc-marca img { display: block; height: 30px; max-width: 100%; object-fit: contain; object-position: left center; }
.cc-k { display: flex; min-width: 0; border-radius: var(--raio-m); background: var(--fundo); transition: box-shadow .15s ease; }
.cc-k:has(> a):hover { box-shadow: inset 0 0 0 1px var(--linha-forte); }
.cc-in { display: flex; flex-direction: column; justify-content: center; width: 100%; min-width: 0; padding: 10px 12px; border-radius: inherit; color: inherit; text-decoration: none; }
.cc-in .cd-l1 { justify-content: flex-start; }
.cc-in small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--tinta-3); }
.cc-in small.cinza, .cc-in .cd-l1 small.cinza { color: var(--neutro); }
.cc-in::before { content: attr(data-l); display: none; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); }
.cc-linha a:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
/* tela média: cada empresa vira um cartão, a faixa da marca em cima e os seis quadrinhos em duas fileiras, com o rótulo em cada um */
@container (max-width: 900px) {
  .cc-linha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc-linha + .cc-linha { margin-top: 10px; }
  .cc-cab { display: none; }
  .cc-cab + .cc-linha { margin-top: 0; }
  .cc-marca { grid-column: 1 / -1; }
  .cc-marca a { min-height: 52px; }
  .cc-in::before { display: block; }
}
@container (max-width: 520px) { .cc-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* celular: os quadrinhos de dois em dois */
/* o que só uma empresa tem: uma linha embaixo, sem coluna vazia */
.cc-proprio { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px 24px; margin-top: 10px; padding: 12px 4px 2px; border-top: 1px solid var(--linha-forte); font-size: 14px; }
.cc-pr-rot { font-weight: 600; font-size: 13px; color: var(--tinta-3); }
.cc-pr-lista { display: flex; flex-wrap: wrap; gap: 10px 32px; min-width: 0; }
.cc-pr { display: flex; align-items: center; gap: 10px; color: var(--tinta-2); text-decoration: none; }
.cc-pr b { font: 600 15px var(--f-num); color: var(--tinta); }
.cc-pr .acima { color: var(--bom); font-weight: 600; }
.cc-pr .fc-tile { width: 26px; height: 26px; border-radius: 8px; }
.cc-pr .fc-tile img { width: 15px; height: 15px; }
.cc-pr:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.cc-pr:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 4px; border-radius: 6px; }
@media (max-width: 767px) {
  table.cd-tab td.cd-e { width: auto; }
  table.cd-tab td.cd-pv a { font-size: 14px; }
  .cc-proprio { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .cc-marca, .cc-k { transition: none; } }
/* 29/10 (v111): os números da Cadeia em 18 px, como no desenho da v110 (a regra antiga de table.cadeia-t td b, de 15 px, vencia) */
table.cadeia-t.cd-tab td .cd-l1 b { font-size: 18px; }

/* 29/10 (v111, Rodada 70; o Matheus: "diário mais simples, semanal com mais dados, mensal mais completo"): as pastilhas Dia · Semana · Mês no
   lugar do anel do ritmo esperado, e o Fechamento do dia (Empresa · Vendas e Orçamentos do último dia útil · Hoje até agora · O mês até
   ontem), com a anatomia do Fechamento das empresas */
.vz-pastilhas { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--papel); box-shadow: var(--sombra); }
.vz-p { display: inline-flex; align-items: center; min-height: 38px; padding: 0 20px; border-radius: 9px; font: 600 15px var(--f-txt); color: var(--tinta-2); text-decoration: none; transition: background-color .15s ease, color .15s ease, transform .12s ease-out; }
.vz-p:hover { color: var(--tinta); background: var(--sutil-2); }
.vz-p:active { transform: scale(.97); }
.vz-p[aria-current="page"] { background: var(--anil); color: #fff; }
.vz-p:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
.vz-dia .vz-dia-linha { grid-template-columns: minmax(150px, 190px) minmax(140px, 1fr) minmax(140px, 1fr) minmax(110px, .7fr) minmax(300px, 2fr); }
.vz-dia .fc-cab > span:nth-child(3) { text-align: right; }
.vz-dia .fc-num small { gap: 6px; }
.vz-dia .fc-num small > span::before { content: '· '; }
.vz-hoje { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; align-self: stretch; min-width: 0; padding-left: 16px; border-left: 1px dashed var(--linha-forte); text-align: right; color: inherit; text-decoration: none; }
.vz-hoje b { font: 600 18px/1.2 var(--f-num); color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vz-hoje small { margin-top: 3px; font-size: 13px; color: var(--tinta-3); white-space: nowrap; }
a.vz-hoje:hover b { text-decoration: underline; text-underline-offset: 4px; }
a.vz-hoje:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 4px; border-radius: 6px; }
/* o mês até ontem (ele: "o que vendeu tem que ser destaque também"): o vendido grande com o alvo ao lado; embaixo, a barra, a % e o selo */
.vz-mes { display: grid; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }
.vz-mes-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.vz-mes-top b { font: 600 24px/1.1 var(--f-num); letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vz-mes-top small { font-size: 14px; color: var(--tinta-3); white-space: nowrap; }
a.vz-mes:hover .vz-mes-top b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
a.vz-mes:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 4px; border-radius: 6px; }
@container (max-width: 1000px) {
  .vz-dia .vz-dia-linha { grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr); }
  .vz-dia .fc-cab > span:nth-child(3) { display: block; }
  .vz-dia .fc-cab > span:nth-child(4), .vz-dia .fc-cab > span:nth-child(5) { display: none; }
  .vz-dia .vz-dia-linha > .vz-hoje { grid-column: 1; grid-row: 2; align-items: flex-start; text-align: left; padding-left: 0; border-left: 0; }
  .vz-dia .vz-dia-linha > .vz-hoje::before { content: 'Hoje até agora'; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); margin-bottom: 2px; }
  .vz-dia .vz-dia-linha > .fc-meta { grid-column: 2 / -1; grid-row: 2; }
}
@container (max-width: 600px) {
  .vz-dia .vz-dia-linha { grid-template-columns: 1fr 1fr; }
  .vz-dia .vz-dia-linha > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .vz-dia .vz-dia-linha > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .vz-dia .vz-dia-linha > .vz-hoje { grid-column: 1 / -1; grid-row: 3; }
  .vz-dia .vz-dia-linha > .fc-meta { grid-column: 1 / -1; grid-row: 4; }
}
@media (max-width: 767px) {
  .vz-pastilhas { width: 100%; }
  .vz-p { flex: 1; justify-content: center; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .vz-p { transition: none; } }

/* ---------- cartões das empresas ---------- */
.cartao { padding: 0 0 22px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.cartao:hover { box-shadow: var(--sombra-h); transform: translateY(-2px); }
.cartao .cab { background: linear-gradient(135deg, var(--emp-faixa) 0%, color-mix(in srgb, var(--emp-faixa) 78%, #000) 100%); padding: 16px 24px; min-height: 72px; margin-bottom: 22px; }
.cartao .cab img { height: 36px; }
.cartao .cab .estado { background: rgb(255 255 255 / .94); box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.cartao .cab .estado:not(.ruim):not(.bom):not(.atencao) { color: var(--tinta-2); }
.cartao > *:not(.cab) { margin-left: 24px; margin-right: 24px; }
.cartao > * + * { margin-top: 14px; }
.cartao .cab + * { margin-top: 0; }
.principal { align-items: baseline; gap: 8px; }
.principal .num { font-size: 50px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.principal .un { font-size: 17px; font-weight: 600; }
.linha2 { font-size: 13.5px; color: var(--tinta-3); }
.linha2 b { color: var(--tinta); }
.hoje-linha { font-size: 12.5px; color: var(--tinta-3); }
.barra-meta .trilho { height: 12px; border-radius: 999px; background: var(--sutil-3); }
.barra-meta .feito { border-radius: 999px; }
.barra-meta .hoje { top: -5px; bottom: -5px; width: 2px; background: var(--tinta); }
.barra-meta .leg { font-size: 12.5px; color: var(--tinta-3); margin-top: 4px; }
.spark-bloco .spark-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--tinta-3); margin-bottom: 6px; }
.spark-bloco .delta { font-size: 12.5px; text-align: right; }
.spark-bloco .spark { display: block; width: 100%; height: 46px; }
.cartao-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cartao-kpis .ck { background: var(--fundo); border-radius: var(--raio-m); padding: 12px 14px; min-width: 0; }
.cartao-kpis .ck:last-child:nth-child(odd) { grid-column: span 2; }
.cartao-kpis .ck-k { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); }
.cartao-kpis .ck-v { font-size: 16px; font-weight: 600; color: var(--tinta); margin-top: 3px; font-family: var(--f-num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-kpis .ck-s { font-size: 12px; color: var(--tinta-3); line-height: 1.35; margin-top: 1px; }
.cartao-kpis .ck .selo { margin: 4px 0 0; }
.cartao .ponte-mini { font-size: 12px; color: var(--tinta-3); }
.cartao .abrir { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: #2B4A9E; padding-top: 14px; border-top: 1px solid var(--linha); }
.cartao .abrir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.cartao:hover .abrir svg { transform: translateX(3px); }

/* ---------- camadas que flutuam ---------- */
.menu-exp, .multi-menu { border: 0; border-radius: var(--raio-m); box-shadow: var(--sombra-flut); }
.gaveta { box-shadow: -24px 0 56px rgb(26 32 55 / .22); border-radius: 22px 0 0 22px; }
.cfg-barra, .arr-barra, .arr-aviso { box-shadow: 0 24px 56px rgb(26 32 55 / .3); border-radius: 16px; }

/* ---------- Metas ---------- */
.alvo-escolha label { background: var(--fundo-2); border-color: var(--linha); border-radius: var(--raio-m); }
input.cfg-num { border-radius: 10px; }

/* ---------- celular ---------- */
@media (max-width: 1240px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .lateral { display: none; }
  header .abas.globais { display: flex; }
  .topo .logo-mob { display: block; }
  .topo .titulo-topo { display: none; }
  .topo .voltar { display: flex; color: var(--tinta-3); border-right: 1px solid var(--linha); }
  .topo .voltar img { filter: brightness(0) saturate(100%) invert(14%) sepia(35%) saturate(1500%) hue-rotate(205deg); }
  .topo-in, header .abas, .periodo-in, main, .rodape-pagina { padding-left: 14px; padding-right: 14px; }
  .topo .btn-icone .rot-bt { display: none; }
  .topo .btn-icone { padding: 0; width: 38px; justify-content: center; }
  main { padding-top: 14px; }
  .blocos, .grade, .rt-grade { gap: 14px; }
  .grade { grid-template-columns: minmax(0, 1fr); }
  .bloco { padding: 18px 18px 14px; }
  .bloco[data-ico]::before { top: 18px; left: 18px; width: 32px; height: 32px; border-radius: 10px; background-size: 17px; }
  .bloco[data-ico] > h2 { min-height: 32px; margin-left: 42px; }
  .bloco[data-ico] > .subt, .bloco[data-ico] > .filtro-card { margin-left: 0; }
  .bloco h2 { font-size: 17px; }
  .bt-exp, .bt-info { top: 14px; } .bt-exp { right: 10px; } .bt-info { right: 46px; }
  .cab-pagina h1 { font-size: 30px; }
  .rt-tile { padding: 20px; }
  .rt-tile .val { font-size: 40px; }
  .principal .num { font-size: 40px; }
  .cartao .cab { padding: 14px 18px; margin-bottom: 18px; }
  .cartao > *:not(.cab) { margin-left: 18px; margin-right: 18px; }
  .periodo { position: static; }
}
@media print {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .lateral { display: none !important; }
  .subt-resto { display: inline !important; } .subt-mais { display: none !important; }
  .bloco, .cartao, .rt-tile { box-shadow: none; border: 1px solid #D5DAE4; }
}
@media (prefers-reduced-motion: reduce) { .app, .cartao, .lateral nav a { transition: none; } .cartao:hover { transform: none; } }

/* ícone de cada card (pastilha clara à esquerda do título): escolhido pelo título em ferramentasCards() */
:is(.bloco, .aba-pz)[data-ico="alvo"] { --ico-bg: #E3E7F7; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23304090%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="funil"] { --ico-bg: #ECE6F7; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B4FA8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h18l-7%208v6l-4%202v-8L3%204z%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="pipeline"] { --ico-bg: #E1ECF9; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231656A4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%203%207.5l9%204.5%209-4.5L12%203z%22%2F%3E%3Cpath%20d%3D%22M3%2012l9%204.5%209-4.5%22%2F%3E%3Cpath%20d%3D%22M3%2016.5%2012%2021l9-4.5%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="vendas"] { --ico-bg: #DDF0E1; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231B6E36%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V11M10%2020V5M16%2020v-6M21%2020H3%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="ganho"] { --ico-bg: #FBEBD9; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A05000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021h8M12%2017v4M7%204h10v5a5%205%200%200%201-10%200V4z%22%2F%3E%3Cpath%20d%3D%22M17%205h3v2a3%203%200%200%201-3%203M7%205H4v2a3%203%200%200%200%203%203%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="pessoas"] { --ico-bg: #DDF1F2; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300707A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M2.5%2020c.8-3.5%203.4-5.5%206.5-5.5s5.7%202%206.5%205.5%22%2F%3E%3Cpath%20d%3D%22M16%204.5a3.5%203.5%200%200%201%200%207M18.5%2014.8c1.6.8%202.7%202.6%203%205.2%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="trafego"] { --ico-bg: #FDE6D8; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23AA4600%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a1%201%200%200%200%201%201h3l6%204V6L7%2010H4a1%201%200%200%200-1%201z%22%2F%3E%3Cpath%20d%3D%22M17%209a4%204%200%200%201%200%206M19.5%206.5a7.5%207.5%200%200%201%200%2011%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="leads"] { --ico-bg: #E3E7F7; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23304090%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M2.5%2020c.8-3.5%203.4-5.5%206.5-5.5s5.7%202%206.5%205.5M19%208v6M16%2011h6%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="carteira"] { --ico-bg: #FBEFD6; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238A5600%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202%204%2014h7l-1%208%209-12h-7l1-8z%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="relogio"] { --ico-bg: #FBEBD9; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A05000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="sobe"] { --ico-bg: #DDF0E1; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231B6E36%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2017l6-6%204%204%208-8M15%207h6v6%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="alerta"] { --ico-bg: #FBE1E0; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23B7162D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204%202.5%2020h19L12%204z%22%2F%3E%3Cpath%20d%3D%22M12%2010v4M12%2017h.01%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="desconto"] { --ico-bg: #ECE6F7; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B4FA8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%205%205%2019%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="fone"] { --ico-bg: #DDF1F2; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300707A%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2z%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="meta"] { --ico-bg: #E3E7F7; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23304090%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V4M5%204h11l-2%204%202%204H5%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="calendario"] { --ico-bg: #E3E7F7; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23304090%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M8%203v4M16%203v4%22%2F%3E%3C%2Fsvg%3E"); }
:is(.bloco, .aba-pz)[data-ico="grafico"] { --ico-bg: #E3E7F7; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23304090%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22M7%2015l4-4%203%203%205-6%22%2F%3E%3C%2Fsvg%3E"); }

/* Leads: a faixa da empresa encosta nas bordas do card (o card ganhou mais respiro na v4) */
.cartao-leads { overflow: hidden; }
.cartao-leads .cab-mini { margin: -26px -28px 18px; padding: 16px 28px; background: linear-gradient(135deg, var(--emp-faixa) 0%, color-mix(in srgb, var(--emp-faixa) 78%, #000) 100%); }
@media (max-width: 767px) { .cartao-leads .cab-mini { margin: -18px -18px 14px; padding: 14px 18px; } }

/* fontes de dado: um selo só no topo; a lista abre ao clicar */
.frescor { position: relative; flex-wrap: nowrap; }
.fresco-bt { cursor: pointer; font: 600 12.5px var(--f-txt); }
.fresco-bt:hover { border-color: var(--tinta-3); }
.fresco-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 230px; padding: 12px; background: var(--papel); border-radius: var(--raio-m); box-shadow: var(--sombra-flut); }
.fresco-menu[hidden] { display: none; }

/* Acima do esperado · Precisa de atenção: lista de pessoas */
.pessoas { display: flex; flex-direction: column; }
.pessoa { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linha); }
.pessoa:first-child { border-top: 0; }
.pessoa .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--cor); background: color-mix(in srgb, var(--cor) 13%, var(--papel)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cor) 38%, transparent); }
.pe-txt { min-width: 0; }
.pe-n { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--tinta); }
.pe-p { font-size: 12.5px; color: var(--tinta-3); line-height: 1.35; }
.pe-r { text-align: right; max-width: 210px; }
.pe-v { font-weight: 700; font-size: 15px; white-space: nowrap; font-family: var(--f-num); }
.pe-v small { font-weight: 500; font-size: 12px; color: var(--tinta-3); }
.pe-ref { font-size: 12px; color: var(--tinta-3); line-height: 1.35; }
.pe-d { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 767px) {
  .frescor { width: auto; order: 0; overflow: visible; }
  .fresco-menu { right: auto; left: 0; }
  .pe-r { max-width: 150px; }
}

/* 13/10 (v31.1): número que não cabe na sua coluna. Com o menu lateral aberto a página ficou mais estreita e o KPI grande
   ("Investido R$ 15,4 mil", 46 px) invadia a coluna vizinha. Agora o KPI grande (e o de dois valores, Meta × Google) ocupa duas
   colunas quando a grade tem espaço, e todo número se ajusta à largura da própria caixa (cqi = largura da caixa). */
.kpis { container-type: inline-size; gap: 18px 24px; }
.kpis > .kpi, .cascata .degrau { container-type: inline-size; min-width: 0; }
.kpi .num { font-size: min(30px, 16cqi); }
.kpi .num.grande { font-size: min(46px, 20cqi); }
.cascata .num { font-size: min(44px, 16cqi); }
.bloco.s6 .cascata .num { font-size: min(32px, 16cqi); }
@container (min-width: 440px) {
  .kpis > .kpi:has(> .num.grande), .kpis > .kpi:has(.par) { grid-column: span 2; }
}
.kpi .num.duplo { white-space: normal; }   /* "41% · 18 de 20" quebra no ponto em vez de invadir o vizinho (13/10) */
/* 23/10 (Rodada 43): a Conversão (dois anéis, a taxa de ganho e os grupos) era alta demais para uma coluna e deixava um vão branco no
   meio do card. Agora ocupa a linha inteira, embaixo dos números, com as três partes lado a lado; o "Contra o normal" sobe para a
   primeira linha (o "dense" preenche o buraco; a ordem no HTML não muda, o leitor de tela lê igual). Em caixa estreita, tudo empilha. */
.kpis:has(> .kpi-conv) { grid-auto-flow: row dense; }
.kpis > .kpi-conv { grid-column: 1 / -1; }
.cv-corpo { display: grid; grid-template-columns: minmax(0, 1fr); }
/* faixa média (1100 px, uns 740 px): anéis à esquerda; a taxa e, embaixo dela, os grupos à direita */
@container (min-width: 600px) {
  .cv-corpo { grid-template-columns: auto minmax(0, 380px); justify-content: start; align-items: start; column-gap: 32px; }
  .cv-corpo > .cv-aneis { grid-row: 1 / span 2; }
  .kpi-conv .cv-corpo > .cv-tx { grid-column: 2; align-self: stretch; margin-top: 6px; padding-left: 32px; border-left: 1px solid var(--linha); }   /* esticado: o traço vertical não quebra entre a taxa e os grupos */
  .kpi-conv .cv-corpo > .cv-tx2 { margin-top: 0; }
  .kpi-conv .cv-tx1 .kl { margin-top: 0; }
}
/* faixa larga (1366 px ou mais): anéis, taxa e grupos em três colunas, a taxa e os grupos no meio da altura dos anéis */
@container (min-width: 900px) {
  .cv-corpo { grid-template-columns: auto minmax(0, 300px) minmax(0, 340px); }
  .cv-corpo > .cv-aneis { grid-row: auto; }
  .kpi-conv .cv-corpo > .cv-tx { grid-column: auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; margin-top: 6px; }
  .kpi-conv .cv-tx2 .kl-tx { margin-top: 0; padding-top: 0; border-top: 0; }
}
/* 23/10 (ele: "uma bolinha maior do mês e do lado a comparativa menor"): anel do período grande, o do período anterior (a foto do mesmo
   ponto) menor e mais claro ao lado, as bases alinhadas como numa régua; embaixo de cada um, só o nome, a data ou as abertas e o k de n.
   Revisão de 23/10: o anel grande leva o tique na marca do anterior (a referência do hub); o anterior usa --anel-ref, sempre mais claro
   que o período, também quando o período é amostra curta (aí em --neutro, que se vê sobre o trilho); o número da amostra curta fica cinza;
   "100%" leva fonte menor para não encostar no arco. Cresce quando a caixa tem espaço. */
.cv-aneis { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 16px; row-gap: 7px; margin-top: 6px; }
.cv-aneis.so-um { grid-template-columns: auto; }
.cv-anel { align-self: end; display: block; width: fit-content; line-height: 0; }
.cv-aneis .cv-ant, .cv-mini > .cv-mini-ant { align-self: center; }   /* 23/10 (ele): a menor no centro da altura da grande, não presa à base */
.cv-aneis .cv-atual .anel { width: 88px; height: 88px; }
.cv-aneis .cv-ant .anel { width: 54px; height: 54px; }
.kpi-conv .cv-atual .anel .anel-num { font-size: 27px; }   /* vence o .kpi-anel .anel .anel-num, que vem depois */
.kpi-conv .cv-ant .anel .anel-num, .cv-mini-ant .anel .anel-num { fill: var(--tinta-2); font-size: 29px; font-weight: 500; }
.cv-curta .anel .anel-num, .cv-mini.cv-curta > .anel .anel-num { fill: var(--tinta-3); }   /* menos de 30 casos: cinza, como o pctAm */
.cv-aneis .cv-anel .anel .anel-num.longo, .cv-mini .anel .anel-num.longo { font-size: 22px; }
.cv-cap { align-self: start; display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.cv-cap b { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.cv-cap a.lk { width: fit-content; color: var(--tinta-2); }
.cv-cap-ant { font-size: 12px; }
.kpi-conv .cv-tx { margin-top: 12px; }
.kpi-conv .cv-tx.cv-tx2 { margin-top: 0; }   /* empilhado: os grupos colam na taxa, com o traço do .kl-tx entre eles */
.kpi-conv .cv-tx .kn-tx { font-size: 12.5px; font-weight: 400; font-style: normal; color: var(--tinta-3); }   /* "119 de 587 fechadas" sem negrito itálico; o "fechadas" quebra se faltar espaço */
.kpi-conv .cv-tx .kl:not(.kl-tx) .kl-l > b { white-space: normal; text-align: left; }   /* no ano, "2.396 de 6.506 fechadas" passava da caixa; o número continua inteiro (.nw) */
/* o "82 de 343 criadas" e o ícone da lista: o texto quebra em "82 de 343" / "criadas" e o ícone fica colado nele (não cai sozinho numa linha) */
.cv-cap a.cv-lk { display: inline-flex; align-items: flex-end; max-width: 100%; }
.cv-cap a.cv-lk > span:first-child { min-width: 0; }
.cv-cap a.cv-lk .lk-ico { flex: none; margin-bottom: 1px; }
@container (max-width: 249px) {   /* caixa estreita (1366 px, 182 px): legendas um pouco menores e anéis mais próximos, para o ano e o trimestre caberem */
  .cv-aneis { column-gap: 10px; }
  .cv-cap, .cv-cap b { font-size: 11.5px; }
}
@container (min-width: 250px) {
  .cv-aneis { column-gap: 22px; }
  .cv-aneis .cv-atual .anel { width: 108px; height: 108px; }
  .cv-aneis .cv-ant .anel { width: 66px; height: 66px; }
}
.cartao-kpis .ck-conv .ck-v { overflow: visible; white-space: normal; margin-top: 6px; }
/* no cartão: o anel do período no tamanho dos números vizinhos (16 px); o do anterior menor (o número com 12 px), com a legenda curta
   embaixo ("set." / "em 23/09"), que cabe nos 112 px de miolo do quadro mais estreito (Energy em 1366 px) */
.cv-mini { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: end; column-gap: 8px; row-gap: 3px; }
.cv-mini > .anel { width: 52px; height: 52px; }
.cv-mini > .anel .anel-num { font-size: 30px; }
.cv-mini > .anel .anel-tick { stroke-width: 4; }   /* a 52 px o tique de 2,4 sumia */
.cv-mini-ant { display: block; line-height: 0; }
.cv-mini-ant .anel { width: 40px; height: 40px; }
.cv-mini-ant .anel .anel-num { font-size: 31px; }
.cv-mini-leg { grid-column: 2; align-self: start; font: 500 11px/1.25 var(--f-txt); color: var(--tinta-3); }
.cv-mini-leg b { font-weight: 600; color: var(--tinta-2); }

/* 14/10: lista do "Status dos leads" na gaveta — painel único (números em células iguais + etapa e dono no seletor segmentado)
   e tabela compacta, uma linha por lead; clicar num número, etapa ou dono filtra a lista */
.ls-painel { background: var(--fundo-2); border-radius: var(--raio-m); box-shadow: inset 0 0 0 1px var(--linha); margin: 2px 0 16px; overflow: hidden; }
.ls-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--linha); border-bottom: 1px solid var(--linha); }
.ls-kpi { font: inherit; color: inherit; text-align: left; border: 0; background: var(--fundo-2); padding: 8px 14px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }   /* 16/10 (Gustavo): números do topo menores */
button.ls-kpi { cursor: pointer; transition: background-color .15s, box-shadow .15s; }
button.ls-kpi:hover { background: var(--papel); }
button.ls-kpi[aria-pressed="true"] { background: var(--papel); box-shadow: inset 0 -3px 0 var(--anil); }
button.ls-kpi:focus-visible { outline: 2px solid var(--laranja); outline-offset: -2px; }
.ls-kpi .rot { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.2; min-height: 2.4em; font-size: 11.5px; }   /* rótulo longo em até 2 linhas; todos com a mesma altura */
button.ls-kpi:disabled { cursor: default; color: var(--tinta-3); }
button.ls-kpi:disabled:hover { background: var(--fundo-2); }
button.ls-kpi:disabled .num { color: var(--tinta-3); }
.ls-kpi .num { font: 600 19px/1.15 var(--f-num); letter-spacing: -.015em; color: var(--tinta); }
.ls-kpi .sub { font-size: 12px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 16/10 (Gustavo): o filtro de fase também em gráfico, na ordem do processo; clicar na barra filtra como o botão */
.ls-graf { padding: 10px 12px 0; border-bottom: 1px solid var(--linha); background: var(--papel); }
.ls-graf .rot { display: block; padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); text-transform: none; letter-spacing: 0; }
.ls-graf .grafico { height: 190px; }
.ls-graf .grafico, .ls-graf .grafico * { cursor: pointer !important; }   /* a coluna inteira filtra */
/* 16/10: Rodízio › Dia a dia — a célula fica mais forte quanto mais a pessoa recebeu no dia (--a vem do número) */
.cel-rod { display: inline-block; min-width: 28px; padding: 1px 7px; border-radius: 6px; text-align: center; font-weight: 600; color: var(--tinta); background: rgba(198, 134, 19, var(--a, .2)); }
/* 17/10 (Gustavo: "só dois padrões, não gradiente"): as faixas com o número simples; o subtotal com quadrado de cor cheia —
   verde dentro da média do time, vermelho abaixo (precisa receber mais), âmbar acima (precisa receber menos), cinza fora do rodízio */
/* 17/10 (Gustavo: "não estou conseguindo ver muita diferença… verde, amarelo e vermelho"): três cores bem distintas */
.cel-rod.ok { background: #22A04B; color: #fff; }
.cel-rod.alto { background: #F2C230; color: #3B2F00; }
.cel-rod.baixo { background: #E5484D; color: #fff; }
.cel-rod.neutro { background: #E3E7F0; color: var(--tinta-2); }
.rod-ctrl { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 2px 0 12px; }
/* 18/10: Vendedor a vendedor (unificado com o dia de cada vendedor) — número em cima e o detalhe embaixo, à direita, em algarismos de
   mesma largura; grupos no cabeçalho (entrada, resultado, trabalho, pendências); nome em duas linhas com a foto; gestão em cinza claro */
#t-vendedores { font-variant-numeric: tabular-nums; }
#t-vendedores th { position: static; white-space: normal; vertical-align: bottom; text-align: right; padding: 8px 8px 6px; line-height: 1.25; }
#t-vendedores th:first-child { text-align: left; }
#t-vendedores .vv-grupos th { cursor: default; text-align: center; font-size: 12.5px; color: var(--tinta-2); box-shadow: inset 0 -1px 0 var(--linha); padding: 4px 8px; }
#t-vendedores td { padding: 8px 8px; vertical-align: middle; }
#t-vendedores td.n { text-align: right; }
#t-vendedores .gi { border-left: 1px solid var(--linha); }
#t-vendedores .vv-n { display: block; font-size: 14px; line-height: 1.25; }
#t-vendedores .vv-s { display: block; font-size: 11.5px; line-height: 1.25; color: var(--tinta-3); margin-top: 2px; }
#t-vendedores .vv-pes { display: flex; align-items: center; gap: 10px; min-width: 150px; }
#t-vendedores .vv-pes .ini { width: 34px; height: 34px; flex: none; margin: 0; }
#t-vendedores .vv-pes span { display: block; font-size: 14px; line-height: 1.2; white-space: nowrap; }
#t-vendedores .vv-pes small { display: block; font-size: 11.5px; line-height: 1.2; color: var(--tinta-3); }
#t-vendedores a.cel-rod { text-decoration: none; min-width: 34px; }
#t-vendedores .vv-lote { color: var(--atencao); font-weight: 600; text-decoration: none; }
#t-vendedores tr.vv-cinza td, #t-opp-cobrar tr.dv-coord td { background: var(--fundo-2); }
.passo-dia { display: inline-flex; gap: 2px; margin-left: 4px; }
.passo-dia .btn-passo { min-width: 32px; min-height: 32px; border: 1px solid var(--linha-forte); background: var(--papel); border-radius: 9px; font-size: 16px; line-height: 1; color: var(--tinta-2); cursor: pointer; }
.passo-dia .btn-passo:hover { border-color: var(--tinta-3); color: var(--tinta); }
/* 17/10: oportunidades para cobrar — na gaveta, o último registro no Chatter com o começo do texto em até 2 linhas */
table.t td.chatter-cel { white-space: normal; min-width: 220px; max-width: 340px; }
table.t td.chatter-cel small { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; line-height: 1.35; }
.rod-nota { font-size: 12.5px; color: var(--tinta-3); margin: -2px 0 6px; }
/* 17/10: Rodízio › Game changers — a quantidade de cada pessoa, com a cor da régua, por grupo */
.gc-pessoas { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 14px; padding: 12px 14px; background: var(--fundo-2); border-radius: var(--raio-m); }
.gc-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.gc-grupo > .rot { display: flex; flex-direction: column; min-width: 104px; font-size: 12.5px; font-weight: 700; color: var(--tinta); letter-spacing: 0; text-transform: none; }
.gc-grupo > .rot small { font-size: 11.5px; font-weight: 500; color: var(--tinta-3); }
.gc-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; }
.num-fx { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.fx-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--tinta-2); white-space: nowrap; }
.fx-tag::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.fx-tag.tot { font-size: 13px; font-weight: 700; color: var(--tinta); }
.fx-tag.tot::before { display: none; }
.rod-vis { margin: 2px 0 12px; }
table.t.sem-ordem th { cursor: default; }
table.t tr.grupo-ini td { border-top: 2px solid var(--linha); }
table.t tr.subtotal td { background: rgba(48, 64, 144, .07); border-bottom: 1px solid var(--linha); font-weight: 700; }
table.t tr.subtotal td.nome { background: rgba(48, 64, 144, .07); }
.ls-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 12px 16px 4px; }
.ls-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ls-grupo .seg button { min-height: 30px; padding: 4px 10px; }
.ls-grupo .seg button b { font-weight: 700; color: var(--tinta); }
.ls-nota { padding: 4px 16px 12px; font-size: 12px; color: var(--tinta-3); }
.ls-n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; margin: 0 0 10px; min-height: 30px; }
@media (prefers-reduced-motion: reduce) { button.ls-kpi { transition: none; } }

/* 14/10: padrão de TODAS as listas da gaveta — uma linha por registro, texto longo com reticências (o ↗ nunca é cortado),
   sem rolagem dentro da gaveta (a gaveta já rola; antes a regra de tabela longa punha 560 px de altura e dava rolagem dupla) */
.gaveta .tabela-wrap, .gaveta .tabela-wrap.longa { max-height: none; border: 0; border-radius: 0; }
.gaveta table.t { font-size: 13px; }
.gaveta table.t th { padding: 9px 9px; white-space: nowrap; }
.gaveta table.t td { padding: 8px 9px; white-space: nowrap; vertical-align: middle; }
.gaveta table.t td.nome { max-width: none; }
.gaveta table.t td.nome > span:first-child:not(.corta-txt) { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.gaveta table.t .corta-txt { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.gaveta table.t td.nome .corta-txt { max-width: 270px; }
.gaveta table.t td.corta { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.gaveta table.t td small, .gaveta table.t td.n small { white-space: nowrap; }   /* a regra antiga das colunas de número deixava o texto pequeno quebrar a linha */
.gaveta table.t .selo { margin-left: 4px; }
@media (max-width: 600px) {   /* celular: nome mais estreito para a 2ª coluna aparecer; o resto rola de lado com o nome fixo */
  .gaveta table.t td.nome .corta-txt { max-width: 150px; }
  .gaveta table.t td.nome > span:first-child:not(.corta-txt) { max-width: 140px; }
  .gaveta table.t .corta-txt, .gaveta table.t td.corta { max-width: 130px; }
}
/* 22/10 (Rodada 39, pedido do Notion: "algumas tabelas acabam ficando cortadas, por exemplo na coluna de tarefas"): a tabela que
   ainda tem coluna à direita (marcarRolagem do app.js) esmaece a borda direita, para ler como "continua", não como corte; só a
   direita, porque a 1ª coluna fica presa à esquerda. Na gaveta, o texto do Chatter fica mais estreito para caber o resto. */
.rola-x.rola-dir { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgb(0 0 0 / .18)); mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgb(0 0 0 / .18)); }
.rola-x:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
.gaveta table.t td.chatter-cel { min-width: 200px; max-width: 260px; }
.gaveta table.t td.chatter-cel small { white-space: normal; }   /* a regra das linhas da gaveta (nowrap) cortava o texto numa linha, sem reticências */
/* a nota de baixo das células de número (Tabela das safras: "77 · acum. 12,9%") quebrava em 2 ou 3 linhas a 1366: fica numa linha só */
.mapa td.cel small { white-space: nowrap; }
/* nos cards, o título de coluna longo ("Custo por convertido", "Verba de conversão") quebra em duas linhas antes de a tabela precisar
   rolar de lado (Tráfego pago › Escada mensal passava 216 px a 1366); com tudo cabendo, nada muda. A gaveta segue numa linha. */
.bloco table.t th { white-space: normal; vertical-align: bottom; }
.bloco table.t td.n small { white-space: nowrap; }   /* com o título quebrando, a nota da célula de número ("M 148 · G 0") não pode virar 3 linhas */
@media (max-width: 1500px) { .tabela-wrap table.t th, .tabela-wrap table.t td { padding-left: 8px; padding-right: 8px; } }   /* com a nota numa linha, as 11 e 12 colunas (safras, Escada mensal) cabem a 1366 */

/* 15/10: Farol — o esperado em valor ao lado do feito, menor e em cinza; se não couber na linha, desce para a de baixo */
.kpi .num:has(.num-lado) { white-space: normal; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
.kpi .num .num-lado { white-space: nowrap; font-size: .42em; font-weight: 600; letter-spacing: 0; line-height: 1.2; color: var(--tinta-3); }
.kpi .sub .sem-quebra { white-space: nowrap; }
@media (max-width: 600px) { .kpi .num .num-lado { flex-basis: 100%; font-size: 17px; } }   /* celular: o esperado numa linha própria */
.ls-tab.denso table.t .corta-txt, .ls-tab.denso table.t td.corta { max-width: 130px; }
.ls-tab.denso table.t td.nome > span:first-child:not(.corta-txt) { max-width: 170px; }

/* 15/10: O mês fecha? — o valor das válidas de cada fase um pouco maior (pedido do Gustavo) */
#t-fecha td .val-fase { font-size: 16px; font-weight: 600; color: var(--tinta); }
#t-fecha td .val-fora { font-size: 16px; font-weight: 600; color: var(--ruim); }   /* paradas além da validade: vermelho cheio, no mesmo peso das válidas */
.bloco .subt.calc-tit { margin: 22px 0 10px; padding: 0; font-size: 13px; font-weight: 600; color: var(--tinta-2); }   /* O mês fecha?: título da calculadora */
.calc-nota { margin-top: 10px; font-size: 12.5px; color: var(--tinta-3); }

/* 15/10: O mês fecha? — a calculadora numa tabelinha compacta com cara de planilha (pedido do Gustavo: "uma tabelinha de excel com design bacana") */
.xl-wrap { display: block; width: fit-content; max-width: 100%; border: 1px solid var(--linha-forte); border-radius: 10px; overflow: hidden; overflow-x: auto; background: var(--papel); }
table.xl-calc { border-collapse: collapse; font-size: 13px; }
.xl-calc thead th { background: var(--anil); color: #fff; font-weight: 600; font-size: 12px; text-align: left; padding: 7px 14px; white-space: nowrap; border-right: 1px solid rgb(255 255 255 / .14); }
.xl-calc thead th.n { text-align: right; }
.xl-calc tbody th { background: var(--fundo-2); color: var(--tinta); font-weight: 700; text-align: left; padding: 7px 14px; border-top: 1px solid var(--linha); border-right: 1px solid var(--linha-forte); white-space: nowrap; }
.xl-calc td { padding: 7px 14px; border-top: 1px solid var(--linha); border-right: 1px solid var(--linha); vertical-align: middle; white-space: nowrap; }
.xl-calc tr > :last-child { border-right: 0; }
.xl-calc tbody tr:nth-child(even) td { background: #FAFBFD; }
.xl-calc td.n { text-align: right; font-variant-numeric: tabular-nums; }
.xl-calc td.n b { font: 600 17px/1.1 var(--f-num); color: var(--tinta); }
.xl-calc .xl-num { font: 600 14px/1.1 var(--f-num); color: var(--tinta-2); }
.xl-calc .xl-pct { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.xl-calc .xl-pct.ruim { background: var(--ruim-suave); color: var(--ruim); }
.xl-calc .xl-pct.bom { background: var(--bom-suave); color: var(--bom); }
.xl-calc .xl-fx { display: inline-flex; align-items: baseline; gap: 6px; font: 600 13px/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--tinta); }
.xl-calc .xl-fx i { font: italic 700 12.5px Georgia, 'Times New Roman', serif; color: var(--tinta-3); padding-right: 6px; border-right: 1px solid var(--linha-forte); }
.xl-calc .xl-fx small { font: 12px var(--f-txt); color: var(--tinta-3); }
.xl-calc .xl-sub { display: flex; justify-content: flex-end; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--tinta-3); }
.xl-calc .xl-sub i { font-size: 11px; }
.xl-calc td.xl-txt { white-space: normal; min-width: 220px; max-width: 340px; font-size: 12.5px; color: var(--tinta-2); line-height: 1.45; }
.xl-calc tr.xl-tot th, .xl-calc tr.xl-tot td { border-top: 2px solid var(--linha-forte); background: var(--fundo-2); }
.calc-leitura { margin-top: 10px; font-size: 13.5px; color: var(--tinta); }
.xl-calc .xl-sub2 { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--tinta-3); white-space: nowrap; }
.kpis-esteira { margin: 4px 0 16px; }
.kpis-esteira .kpi .rot .selo { margin-left: 6px; vertical-align: 1px; text-transform: none; letter-spacing: 0; }

/* 15/10: O mês fecha? — cada parte da meta como conta corrida: deveria → veio → falta */
.fluxos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px 18px; margin: 4px 0 14px; }
.fluxo-kpi { background: var(--fundo-2); border-radius: var(--raio-m); box-shadow: inset 0 0 0 1px var(--linha); padding: 14px 18px 16px; }
.fluxo-kpi > .rot { margin-bottom: 10px; }
.fluxo-kpi > .rot .selo { margin-left: 6px; vertical-align: 1px; text-transform: none; letter-spacing: 0; }
.fluxo { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.fx-p { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-r { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.fx-v { font: 600 24px/1.1 var(--f-num); letter-spacing: -.01em; color: var(--tinta); white-space: nowrap; }
.fx-fim .fx-v { font-size: 30px; }
.fx-s { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.fx-seta { font-size: 22px; line-height: 1; color: var(--tinta-3); padding-top: 19px; }
.kpis-esteira { margin: 0 0 16px; }
.fx-v.abaixo { color: var(--ruim); } .fx-v.acima { color: var(--bom); }   /* a falta em vermelho (e o que passou, em verde) */

/* 15/10: "?" que explica a conta (balão ao clicar) e a coluna Falta em destaque no "O mês fecha?" */
.ajuda-wrap { display: inline-block; vertical-align: 1px; margin-left: 6px; }
.ajuda { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta-3);
  font: 700 11px/16px var(--f-txt); text-align: center; cursor: pointer; text-transform: none; letter-spacing: 0; }
.ajuda:hover, .ajuda:focus-visible, .ajuda-wrap.aberta .ajuda { border-color: var(--anil); color: var(--anil); outline: none; }
.ajuda-bal { display: none; position: fixed; z-index: 60; width: max-content; background: var(--anil); color: #fff; padding: 10px 12px; border-radius: 10px;
  box-shadow: 0 10px 30px rgb(20 24 43 / .25); font: 400 12.5px/1.5 var(--f-txt); text-transform: none; letter-spacing: 0; text-align: left; white-space: normal; }
.ajuda-bal b { color: #fff; font-weight: 700; }
.ajuda-wrap.aberta .ajuda-bal { display: block; }
.fx-bal { display: block; margin-bottom: 6px; font: 600 12.5px/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #fff; }
.fx-bal i { font: italic 700 12px Georgia, serif; opacity: .75; margin-right: 4px; }
.xl-calc th.xl-falta { background: #8E1D2C; }
.xl-calc td.xl-falta { background: #FDF1F2 !important; }
.xl-calc td.xl-falta b { font: 700 20px/1.1 var(--f-num); color: var(--ruim); }
.xl-calc tr.xl-tot td.xl-falta b { font-size: 22px; }

/* 15/10: cada quadro com duas linhas de setas — até ontem e até o fim do mês */
.fluxo-linha { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; padding: 10px 0 4px; }
.fluxo-linha + .fluxo-linha { border-top: 1px dashed var(--linha-forte); margin-top: 6px; }
.fx-quando { padding-top: 19px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--anil-2); }
.fluxo-kpi .fx-v { font-size: 21px; }
.fluxo-kpi .fx-v.fx-forte { font-size: 26px; }
.fluxo-kpi .fx-r .ajuda-wrap { margin-left: 4px; vertical-align: 0; }
@media (max-width: 600px) { .fluxo-linha { grid-template-columns: 1fr; gap: 2px; } .fx-quando { padding-top: 0; } }
/* um quadro por parte, na largura toda: "até ontem" e "até o fim do mês" lado a lado */
.fluxos { grid-template-columns: 1fr; }
.fluxo-corpo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 0; }
.fluxo-corpo .fluxo-linha { padding: 2px 28px 0 0; }
.fluxo-corpo .fluxo-linha + .fluxo-linha { border-top: 0; margin-top: 0; padding-left: 28px; border-left: 1px dashed var(--linha-forte); }
@media (max-width: 900px) { .fluxo-corpo .fluxo-linha + .fluxo-linha { border-left: 0; padding-left: 0; border-top: 1px dashed var(--linha-forte); padding-top: 10px; width: 100%; } }
.rot .rot-nt { text-transform: none; letter-spacing: 0; font-weight: 500; }   /* "10 MWh" sem virar "10 MWH" no rótulo em caixa alta */
/* 17/10 (Gustavo): visões do card — [MWh | Nº de vendas] e [Barras | Pizza], no mesmo desenho dos seletores do Rodízio */
.vis-ctrl { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 2px 0 10px; }
.vis-ctrl .seg button { min-height: 30px; padding: 0 11px; font-size: 13px; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease, color 160ms ease; }
.vis-ctrl .seg button:active { transform: scale(.97); }
.vis-ctrl .seg button:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.vis-nota { align-self: center; font-size: 12.5px; color: var(--tinta-3); }
.grafico.vis-pizza.baixo { height: 300px; }   /* a pizza precisa de altura para o nome de cada fatia */
@media (prefers-reduced-motion: reduce) { .vis-ctrl .seg button { transition: none; } .vis-ctrl .seg button:active { transform: none; } }
@media print { .vis-ctrl { display: none; } }

/* 17/10: Acima do esperado × Precisa de atenção no Fechamento de cada empresa, por pessoa do time — linhas clicáveis no modelo da Visão geral */
.sin-l { cursor: pointer; color: inherit; text-decoration: none; border-radius: 10px; padding: 10px 6px; min-height: 86px; box-sizing: border-box; }   /* 19/10: a mesma altura em toda linha, nos dois cards */
section.bloco[data-id="precisa-de-atencao"] { align-self: start; }   /* 18/10: card curto não estica (21/10: um card só, o mapa do time) */
.sin-l:hover, .sin-l:focus-visible { background: color-mix(in srgb, var(--anil-2) 6%, var(--papel)); outline: none; }
.sin-l img.av { object-fit: cover; }
.sin-l .pe-p { color: var(--tinta); font-weight: 500; }
/* 19/10 (Gustavo: "porque as linhas têm tamanhos diferentes? … sem enquadramento"): cada texto em uma linha só, o que passa termina
   em "…" e aparece inteiro ao passar o mouse (title); à direita, o número com a variação ao lado e embaixo os links, numa linha cada.
   (Substitui a regra da v58 que fazia o número quebrar linha: com uma linha só e as reticências, nada vaza do card.) */
.sin-l .pe-n { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.sin-l .pe-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sin-l .pe-n a.sf { flex: none; }
.sin-l .pe-p, .sin-l .pe-ref { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sin-l .pe-r { max-width: 210px; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sin-l .pe-vl { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; max-width: 100%; min-width: 0; }
.sin-l .pe-v { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.sin-l .pe-ab .pe-d { flex: none; font-size: 12px; }
.sin-l .pe-card { display: block; max-width: 100%; min-height: 16px; font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--anil-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sin-l .pe-ab { font-size: 12px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 22px; max-width: 100%; }
.sin-l .pe-lista { flex: none; }
.sin-l .mk-bt.mk-mini { flex: none; min-height: 22px; padding: 0 8px; gap: 3px; font-size: 12px; border-radius: 7px; }
.sin-l .mk-bt.mk-mini svg { width: 10px; height: 10px; }
.sin-l .mk-info { color: var(--tinta-2); }
.sin-l .mk-info .bom { color: var(--bom); font-weight: 600; } .sin-l .mk-info .ruim { color: var(--ruim); font-weight: 600; }
.sin-l .mk-info i { font-style: normal; color: var(--tinta-3); }
.sin-l .pe-lista { font: inherit; font-weight: 600; color: var(--tinta-3); padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sin-l .pe-lista:hover { color: var(--anil-2); }
/* o card de destino, quando o sinal leva até ele: a página rola e o card pisca por 3 s (a barra do filtro é fixa: margem para não cobrir) */
.card-destaque { scroll-margin-top: 200px; outline: 2px solid var(--anil-2); outline-offset: 4px; animation: card-pisca 3s ease-out 1; }
@keyframes card-pisca { 0% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--anil-2) 25%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .card-destaque { animation: none; } }
.sin-l .pe-d small { font-weight: 500; color: var(--tinta-3); }
.sin-farol { color: #B42318; background: #FDECEC; vertical-align: middle; }
.sin-oculto { display: none; }
.sin-ver-mais { margin-top: 10px; }
/* 17/10: no Dia a dia do Rodízio cada número abre a lista; o cursor avisa */
[data-rod-cel] { cursor: pointer; }
[data-rod-cel]:hover, [data-rod-cel]:focus-visible { filter: brightness(.92); outline: none; text-decoration: underline; }
@media (max-width: 640px) {   /* no celular o número desce para baixo do texto, na mesma coluna, em vez de espremer os dois lados */
  .sin-l { grid-template-columns: 38px minmax(0, 1fr); row-gap: 4px; }
  .sin-l .pe-r { grid-column: 2; max-width: none; text-align: left; align-items: flex-start; }
  .sin-l .pe-vl, .sin-l .pe-ab { justify-content: flex-start; }
  /* no celular não existe "passar o mouse": a referência (e o detalhe da marca) usa até duas linhas, e toda linha reserva essa altura */
  .sin-l { min-height: 164px; }
  .sin-l .pe-ref { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}
@media print { .sin-l .pe-ab, .sin-l .pe-card { display: none; } }

/* 21/10 (Rodada 36, Gustavo: "temos que organizar essa lista, senão fica extensa e é só rolar"): o mapa do time — um card só, com os
   três números e as pilhas no topo, a linha "do negócio", a tabela pessoas × temas e o detalhe embaixo, nas linhas de sempre */
/* 21/10 (Gustavo: "está muito denso"): os dois números e as pilhas numa linha só; o bloco do negócio recolhido */
.mt-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin: 0 0 12px; }
.mt-topo .kpis { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; flex: 1 1 auto; min-width: 0; container-type: normal; }   /* o container-type do .kpis zera a largura de um item flex */
.mt-topo .kpi { flex: 0 1 auto; min-width: 170px; max-width: 300px; container-type: normal; }
.mt-topo .kpi .rot { white-space: nowrap; }
.mt-topo .kpi .num { font-size: 30px; }
.mt-topo .kpi .num .num-lado { font-size: 13px; }   /* o 0,42em do hub daria 12,6 px; texto de apoio é 13 px ou mais (Rodada 31) */
.mt-topo .kpi .num.ruim { color: #B42318; } .mt-topo .kpi .num.bom { color: #1A7F3C; }
.mt-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; margin: 0; flex: 0 0 auto; }   /* na mesma linha dos números, à direita */
.mt-ctrl .seg button { gap: 6px; min-height: 32px; }
.mt-neg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--sutil-2); font-size: 13px; color: var(--tinta-2); }
.mt-neg b { color: var(--tinta); font-weight: 600; }
.mt-neg:not(.aberto) .mt-neg-oculta, .mt-neg:not(.aberto) .mt-neg-p .pe-lista { display: none; }   /* recolhido: só as 2 primeiras, sem o "ver a lista" */
.mt-neg .mt-neg-mais { min-height: 26px; padding: 2px 10px; }
.mt-neg .mt-neg-p { font-size: 13px; cursor: pointer; display: inline; line-height: 1.35; padding: 2px 8px; transition: border-color 150ms ease, color 150ms ease; }   /* inline: o texto quebra entre as partes, nunca dentro do número ou do link. 22/10 (Gustavo: "ficou grande"): mais apertada */
.mt-neg .mt-neg-p:hover, .mt-neg .mt-neg-p:focus-visible { border-color: var(--anil-2); color: var(--tinta); outline: none; }   /* a pílula é clicável: avisa no mouse e no teclado */
.mt-neg .mt-neg-p b { font-weight: 600; color: #B42318; font-family: var(--f-num); white-space: nowrap; }
.mt-neg .mt-neg-p .pe-lista { font: inherit; font-weight: 600; color: var(--tinta-3); width: auto; height: auto; border-radius: 0; padding: 0 0 0 4px; border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }   /* a .pilula faz todo botão virar um círculo de 24 px */
.mt-neg .mt-neg-p .pe-lista:hover { color: var(--anil-2); }
.mt-wrap { overflow-x: auto; margin: 0 -4px; }
table.t.mt-mapa { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 760px; }
table.t.mt-mapa th { text-align: center; white-space: nowrap; }
table.t.mt-mapa th:first-child, table.t.mt-mapa th:last-child { text-align: left; }
table.t.mt-mapa th:first-child { width: 224px; } table.t.mt-mapa th.tema { width: 120px; }
table.t.mt-mapa td { padding: 4px 6px; text-align: center; vertical-align: middle; }
table.t.mt-mapa td:first-child, table.t.mt-mapa td:last-child { text-align: left; }
table.t.mt-mapa tbody td:first-child { background: transparent; }
table.t.mt-mapa tbody tr:hover td, table.t.mt-mapa tbody tr:hover td:first-child { background: transparent; }   /* o realce é da célula, não da linha */
.mt-pessoa { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mt-pessoa:hover { background: var(--sutil-2); border-color: var(--linha-forte); }
.mt-pessoa[aria-pressed="true"] { border-color: var(--anil-2); background: color-mix(in srgb, var(--anil-2) 6%, var(--papel)); }
.mt-pessoa .av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--cor); background: color-mix(in srgb, var(--cor) 13%, var(--papel)); object-fit: cover; }
.mt-pessoa .mt-nm { min-width: 0; }
.mt-pessoa .nome { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-pessoa .cargo { display: block; font-size: 11.5px; color: var(--tinta-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-cel { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 36px; padding: 0 4px; border: 1px solid transparent; border-radius: 10px; background: none; font: inherit; cursor: pointer; }
.mt-cel:hover { background: var(--sutil-2); border-color: var(--linha-forte); }
.mt-cel[aria-pressed="true"] { border-color: var(--anil-2); background: color-mix(in srgb, var(--anil-2) 6%, var(--papel)); }
.mt-cel:focus-visible, .mt-pessoa:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.mt-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 8px; font: 700 13px var(--f-num); font-variant-numeric: tabular-nums; }   /* texto de apoio: 13 px ou mais (Rodada 31) */
.mt-chip.at { background: #FDECEC; color: #B42318; }
.mt-chip.ac { background: color-mix(in srgb, #22A04B 13%, var(--papel)); color: #1A7F3C; }
.mt-vazio { color: var(--linha-forte); font-weight: 600; }
.mt-pior { font-size: 13px; color: var(--tinta-2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-pior b { font-weight: 600; color: #B42318; font-family: var(--f-num); }
.mt-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 0; font-size: 13px; color: var(--tinta-3); }
.mt-det { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
.mt-det:empty { display: none; }
.mt-det-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 4px; }
.mt-det-cab b { font-size: 14.5px; font-weight: 600; }
.mt-det-cab span { font-size: 13px; color: var(--tinta-3); }
.mt-det .mt-linhas { display: grid; grid-template-columns: 1fr; gap: 0 28px; }
@media (min-width: 1100px) { .mt-det .mt-linhas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sin-l.mt-sem-nome { grid-template-columns: 14px minmax(0, 1fr) auto; min-height: 72px; border-top: 1px solid var(--linha); }   /* a pessoa já está no cabeçalho: a linha começa no sinal */
.mt-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); justify-self: center; }
/* 21/10 (crítica de design, direção "Quem cobrar hoje" escolhida pelo Gustavo): as 3 pessoas mais graves em destaque, a tabela recolhida,
   chips em 3 níveis de gravidade, "Pior sinal" legível em 2 linhas, detalhe por tema, foco e contraste medidos */
.mt-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 16px 0 6px; }
.mt-sec b { font-size: 14.5px; font-weight: 600; color: var(--tinta); }
.mt-sec span { font-size: 13px; color: var(--tinta-3); }
.mt-sec .btn-mini { margin-left: auto; }
.mt-sec-todo { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--linha); }
.mt-hoje { display: flex; flex-direction: column; }
.mt-hoje-l { display: grid; grid-template-columns: 22px 230px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--linha); border-radius: 10px; }
.mt-hoje-l:first-child { border-top: 0; }
.mt-hoje-l.on { background: color-mix(in srgb, var(--anil-2) 6%, var(--papel)); }
.mt-ord { font: 600 13px var(--f-num); color: var(--tinta-3); text-align: center; }
.mt-hoje-l .mt-pessoa .av { width: 36px; height: 36px; font-size: 13px; }
.mt-hoje-l .mt-pessoa .nome { font-size: 14.5px; }
.mt-hoje-s { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mt-hoje-sinal { font-size: 14px; color: var(--tinta); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-hoje-sinal b { font-weight: 700; color: #B42318; font-family: var(--f-num); }
.mt-hoje-temas { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; border: 1px solid transparent; background: var(--sutil-2); font: 600 12.5px var(--f-txt); color: var(--tinta-2); cursor: pointer; }
.mt-tag:hover { border-color: var(--linha-forte); color: var(--tinta); }
.mt-tag[aria-pressed="true"] { border-color: var(--anil-2); background: color-mix(in srgb, var(--anil-2) 8%, var(--papel)); color: var(--tinta); }
.mt-tag i { font-style: normal; font-family: var(--f-num); font-weight: 700; }
.mt-tag i.at { color: #B42318; } .mt-tag i.ac { color: #14632E; }
.mt-hoje-a { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mt-hoje-a .pe-lista { font-size: 13px; }
.mt-hoje-a .mt-card { color: var(--anil-2); text-decoration: none; font-weight: 600; }
.mt-hoje-a .mt-card:hover { text-decoration: underline; }
.mt-chip.at.g1 { background: var(--papel); box-shadow: inset 0 0 0 1px #F3C4BF; }   /* peso baixo: só o contorno */
.mt-chip.at.g3 { background: #B42318; color: #fff; }                                 /* peso 3 ou mais: cheio */
.mt-chip.ac { color: #14632E; }                                                      /* 4,4:1 era pouco; agora acima de 4,5 */
.mt-vazio { color: var(--tinta-3); font-weight: 700; }                               /* o "no esperado" visível (antes 1,4:1) */
.mt-td-pior { width: 290px; }
table.t.mt-mapa td.mt-td-pior { text-align: left; }   /* 22/10: a coluna vinha centralizada e os cabeçalhos dos temas cortados */
table.t.mt-mapa th.tema { white-space: normal; line-height: 1.2; width: 100px; }
table.t.mt-mapa th:first-child { width: 210px; }
/* 22/10 (Gustavo: "quando eu clico já tinha que descer"): o detalhe abre embaixo da linha clicada */
.mt-det.mt-det-inline { margin: 2px 0 10px; padding: 10px 12px 4px; border-top: 0; border-radius: 10px; background: color-mix(in srgb, var(--anil-2) 4%, var(--papel)); }
tr.mt-det-tr > td { padding: 0 0 6px; text-align: left; }
table.t.mt-mapa tbody tr.mt-det-tr:hover td { background: transparent; }
.mt-hoje .mt-det-inline { margin-left: 34px; }
.mt-sinais .mt-det-inline { margin-left: 52px; }
.mt-neg { padding: 6px 10px; gap: 4px 6px; }   /* 22/10: o bloco do negócio mais baixo */
.mt-pior { white-space: normal; display: flex; flex-direction: column; line-height: 1.3; }
.mt-pior b { font-size: 13.5px; }
.mt-pior span { font-size: 12.5px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.t.mt-mapa th.tema { width: 92px; }
table.t.mt-mapa th:first-child { width: 230px; }
table.t.mt-mapa th.pior { text-align: left; }
table.t.mt-mapa tbody th { padding: 4px 6px; text-align: left; font-weight: inherit; background: transparent; }
.mt-pessoa .mt-ord { flex: none; width: 14px; }
.mt-legenda { display: block; }
.mt-det-cab .mt-det-acoes { display: flex; gap: 12px; margin-left: auto; }
.mt-grupo { border-top: 1px solid var(--linha); }
.mt-grupo summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 6px; cursor: pointer; list-style: none; }
.mt-grupo summary::-webkit-details-marker { display: none; }
.mt-grupo summary::before { content: ''; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3); transform: rotate(-45deg); margin: 0 6px 0 2px; transition: transform 150ms ease; }
.mt-grupo[open] summary::before { transform: rotate(45deg); margin-top: -3px; }
.mt-grupo summary b { font-size: 14px; font-weight: 600; }
.mt-grupo summary span { font-size: 13px; color: var(--tinta-3); }
.mt-grupo summary .btn-mini { margin-left: auto; }
.mt-grupo summary:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; border-radius: 8px; }
.mt-det .sin-l:focus-visible, .mt-neg .mt-neg-p:focus-visible, .mt-tag:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.sin-l.mt-sem-nome { min-height: 66px; padding: 8px 6px; }
@media (prefers-reduced-motion: reduce) { .mt-grupo summary::before { transition: none; } }
/* 22/10 (Rodada 38): a aba Prioridades — filtros por tema, o que mudou, a rodada guiada, por sinal, histórico — e o card enxuto do Fechamento */
.mt-topo-res .mt-aba-lk { flex: 0 0 auto; display: inline-flex; align-items: center; text-decoration: none; color: var(--anil-2); border-color: color-mix(in srgb, var(--anil-2) 35%, var(--papel)); }
.mt-topo-res .mt-aba-lk:hover { border-color: var(--anil-2); }
.mt-res-neg { margin: 10px 0 0; font-size: 13px; color: var(--tinta-2); }
.mt-res-neg a { color: var(--anil-2); font-weight: 600; text-decoration: none; }
.mt-res-neg a:hover { text-decoration: underline; }
.mt-hoje-l.mt-res-l { padding: 8px 6px; }
.mt-hoje-l.mt-res-l .mt-pessoa { cursor: pointer; }
.mt-temas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.mt-tema-bt { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--linha-forte); background: var(--papel); font: 600 13px var(--f-txt); color: var(--tinta-2); cursor: pointer; transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease; }
.mt-tema-bt i { font-style: normal; font-family: var(--f-num); font-weight: 700; color: var(--tinta-3); }
.mt-tema-bt:hover { border-color: var(--tinta-3); color: var(--tinta); }
.mt-tema-bt[aria-pressed="true"] { border-color: var(--anil-2); background: color-mix(in srgb, var(--anil-2) 9%, var(--papel)); color: var(--tinta); }
.mt-tema-bt[aria-pressed="true"] i { color: var(--anil-2); }
.mt-tema-bt:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.mt-mudou { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 20px; margin: 0 0 6px; }
.mt-mudou-g { padding: 10px 12px; border-radius: 10px; background: var(--sutil-2); min-width: 0; }
.mt-mudou-g > b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.mt-mudou-g > b i { font-style: normal; font-family: var(--f-num); }
.mt-mudou-g.at > b i { color: #B42318; } .mt-mudou-g.ac > b i { color: #14632E; }
.mt-mudou-g ul { list-style: none; margin: 0; padding: 0; }
.mt-mudou-g li { font-size: 13px; line-height: 1.4; padding: 3px 0; color: var(--tinta-2); }   /* quebra linha: cortar com "…" escondia o número */
.mt-mudou-g li b { color: var(--tinta); font-family: var(--f-num); }
.mt-mudou-g .mt-mudou-l { padding: 0; font-size: 13px; }
.mt-mudou-g .mt-mudou-mais { margin-top: 4px; font-size: 13px; color: var(--tinta-3); }
.mt-oculto { display: none !important; }
/* 26/10 (v93, Rodada 43): "O que mudou" recolhido numa linha de contagens, embaixo de "Quem cobrar hoje"; "Começar a rodada" em destaque,
   na tinta da aba aberta (o laranja do .btn-pri é a cor de atenção do hub) */
.mt-mudou[hidden] { display: none; }
/* 26/10 (v93): a linha de contexto da lista (empresa, período, filtros), logo abaixo do título, antes do total e da planilha */
.mk-aviso { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--sutil-2); font-size: 12.5px; line-height: 1.4; color: var(--tinta-2); }   /* 26/10 (v93): o que o Marcar faz */
#arr-padrao.confirmar { border-color: var(--ruim); color: var(--ruim); }   /* 26/10 (v93): segunda etapa do Voltar ao padrão */
.gaveta .lista-ctx { margin: -6px 0 10px; padding: 6px 10px; border-radius: 8px; background: var(--sutil-2); font-size: 13px; line-height: 1.4; color: var(--tinta-2); }
.mt-sec-mudou { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--linha); }
.mt-sec .mt-rod-destaque { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
@media (hover: hover) and (pointer: fine) { .mt-sec .mt-rod-destaque:hover { background: var(--tinta-2); border-color: var(--tinta-2); } }
.mt-rod { border: 1px solid color-mix(in srgb, var(--anil-2) 35%, var(--papel)); border-radius: 12px; padding: 6px 12px 12px; margin: 0 0 6px; background: color-mix(in srgb, var(--anil-2) 3%, var(--papel)); }
.mt-rod .mt-hoje-l { border-top: 0; padding-left: 0; padding-right: 0; }
.mt-rod .mt-grupo:first-of-type { border-top: 1px solid var(--linha); }
.mt-rod-bts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.mt-rod-bts .btn-pri { min-height: 32px; padding: 0 14px; }
.mt-rod-bts .btn-mini { margin: 0; }
.mt-rod-cab .mt-rod-atalhos { font-size: 12.5px; }
.mt-rod-cab .btn-mini { margin-left: auto; }
.mt-rod-fim .kpis { margin-bottom: 8px; }
.mt-rod-fim .kpi .num { font-size: 30px; }
.mt-vista { margin: 0 0 10px; justify-content: flex-start; }
.mt-vista .seg button { gap: 6px; }
.mt-sinais { display: flex; flex-direction: column; }
.mt-sinal-l { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 40%); gap: 12px; align-items: center; width: 100%; padding: 9px 6px; border: 0; border-top: 1px solid var(--linha); border-radius: 10px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mt-sinal-l:first-child { border-top: 0; }
.mt-sinal-l:hover { background: var(--sutil-2); }
.mt-sinal-l[aria-pressed="true"] { background: color-mix(in srgb, var(--anil-2) 6%, var(--papel)); }
.mt-sinal-l:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.mt-sinal-l .mt-chip { justify-self: center; }
.mt-sinal-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mt-sinal-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-sinal-t small { font-size: 12.5px; color: var(--tinta-3); }
.mt-sinal-q { min-width: 0; font-size: 13px; color: var(--tinta-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-sinal-q i { font-style: normal; font-family: var(--f-num); font-weight: 600; color: var(--tinta-3); }
.mt-hist-ctrl { margin: 0 0 10px; }
.mt-hist-bts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.mt-hist-bts .btn-mini { margin: 0; }
.mt-det .mt-linhas .sin-l:not(.mt-sem-nome) { grid-template-columns: 38px minmax(0, 1fr) auto; }
#sin-toast-cp { background: rgb(255 255 255 / .18); }
#sin-mapa .btn-mini, #sin-time .btn-mini, #sin-hist .btn-mini { font-size: 13px; }   /* texto de apoio é 13 px ou mais (Rodada 31) */
@media (max-width: 760px) {
  /* no celular: sem a coluna do pior sinal e sem o cargo; os temas ficam estreitos e a tabela rola de lado se precisar */
  table.t.mt-mapa { min-width: 0; }
  table.t.mt-mapa th.pior, table.t.mt-mapa td.mt-td-pior, .mt-pessoa .cargo { display: none; }
  table.t.mt-mapa th:first-child { width: 150px; } table.t.mt-mapa th.tema { width: 60px; font-size: 11.5px; white-space: normal; }
  table.t.mt-mapa td { padding: 4px 2px; }
  .mt-cel { padding: 0; gap: 2px; min-height: 44px; } .mt-chip { min-width: 24px; padding: 0 5px; }   /* alvo de toque de 44 px */
  .mt-topo .kpi { min-width: 150px; }
  /* as pilhas não vazam do card (antes: 459 px numa tela de 375) */
  .mt-topo .mt-ctrl { flex: 1 1 100%; justify-content: flex-start; }
  .mt-ctrl .seg { flex: 1 1 auto; } .mt-ctrl .seg button { flex: 1; padding: 0 6px; }
  .mt-hoje-l { grid-template-columns: 18px minmax(0, 1fr); }
  .mt-hoje-l .mt-hoje-s, .mt-hoje-l .mt-hoje-a { grid-column: 2; }
  .mt-hoje-a { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 14px; }
  .mt-hoje-sinal { white-space: normal; }
  .sin-l .mk-bt.mk-mini, .sin-l .pe-lista, .mt-hoje-a .pe-lista, .mt-hoje-a .mk-bt { min-height: 36px; }
  .mt-tag { height: 32px; }
  .mt-neg .mt-neg-p b { white-space: normal; }   /* "427 oportunidades · R$ 59,8 mi · 378 leads abertos" cabe em 2 linhas em vez de vazar */
  /* a aba Prioridades no celular */
  .mt-tema-bt { min-height: 36px; }
  .mt-mudou { grid-template-columns: 1fr; }
  .mt-mudou-g li { white-space: normal; }
  .mt-rod-cab .mt-rod-atalhos { display: none; }
  .mt-rod-cab .btn-mini { margin-left: 0; }
  .mt-rod-bts .btn-mini, .mt-rod-bts .btn-pri { min-height: 40px; }
  .mt-sinal-l { grid-template-columns: 36px minmax(0, 1fr); }
  .mt-sinal-l .mt-sinal-q { grid-column: 2; text-align: left; white-space: normal; }
  .mt-topo-res .mt-aba-lk { flex: 1 1 100%; justify-content: center; min-height: 40px; }
  .mt-hist-bts { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) { .sin-l.mt-sem-nome { grid-template-columns: 14px minmax(0, 1fr); min-height: 140px; } .sin-l.mt-sem-nome .pe-r { grid-column: 2; } }
@media print { .mt-wrap { overflow: visible; } }

/* 19/10: marcação dos pontos de atenção (A tratar, Repassados, Conferidos), aprovada no mockup */
.mk-ctrl { align-items: center; justify-content: space-between; margin: -4px 0 8px; }
/* 19/10: o cabeçalho dos dois cards de sinais tem a mesma altura (no Acima o subtítulo, no Precisa de atenção a barra das pilhas),
   para as linhas começarem na mesma altura lado a lado */
.sin-cab { display: flex; align-items: center; min-height: 40px; margin: 2px 0 12px; }
.sin-subt { margin: 0 0 0 52px; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sin-cab .mk-ctrl { margin: 0; flex: 1; min-width: 0; }
@media (max-width: 767px) { .sin-subt { margin-left: 0; } }
.mk-ctrl .seg button { gap: 6px; }
.mk-n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta-3); }
.mk-ctrl .seg button[aria-pressed="true"] .mk-n { color: var(--tinta); }
.mk-hist { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.mk-vazio { padding: 20px 4px; font-size: 13.5px; line-height: 1.5; color: var(--tinta-3); }
.mk-vazio b { color: var(--tinta-2); font-weight: 600; }
.mk-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 7px; }
.mk-bt { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border-radius: var(--raio-p); border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta-2); font: 600 12.5px var(--f-txt); cursor: pointer; white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, transform 120ms cubic-bezier(.23, 1, .32, 1); }
.mk-bt:hover { border-color: var(--tinta-3); color: var(--tinta); }
.mk-bt:active { transform: scale(.97); }
.mk-bt:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.mk-bt svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-bt.rep { background: color-mix(in srgb, var(--anil-2) 9%, var(--papel)); border-color: color-mix(in srgb, var(--anil-2) 30%, var(--papel)); color: var(--anil-2); }
.mk-bt.alerta { background: #FDECEC; border-color: #F3C4BF; color: #B42318; }
.mk-bt.conf { background: var(--sutil); border-color: var(--linha-forte); color: var(--tinta-2); }
.mk-evo, .mk-por { font-size: 12.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.mk-evo .bom { color: var(--bom); font-weight: 600; }
.mk-evo .ruim { color: var(--ruim); font-weight: 600; }
.mk-nota { flex-basis: 100%; font-size: 12.5px; line-height: 1.4; color: var(--tinta-2); }
.mk-nota i { font-style: normal; color: var(--tinta-3); }
.sin-l.mk-sem { background: color-mix(in srgb, #FDECEC 60%, var(--papel)); }
.sin-l.mk-sem:hover, .sin-l.mk-sem:focus-visible { background: color-mix(in srgb, #FDECEC 85%, var(--papel)); }
.sin-farol-rep { color: var(--anil-2); background: color-mix(in srgb, var(--anil-2) 9%, var(--papel)); vertical-align: middle; }
.mk-pop { position: fixed; inset: auto; margin: 0; width: min(340px, calc(100vw - 24px)); box-sizing: border-box; padding: 16px; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-flut); font-family: var(--f-txt);
  opacity: 1; transform: none; transition: opacity 150ms ease-out, transform 150ms cubic-bezier(.23, 1, .32, 1), overlay 150ms allow-discrete, display 150ms allow-discrete; }
.mk-pop:not(:popover-open) { opacity: 0; transform: translateY(-4px) scale(.98); }
@starting-style { .mk-pop:popover-open { opacity: 0; transform: translateY(-4px) scale(.98); } }
.mk-pop-cab b { display: block; font-size: 14.5px; font-weight: 600; }
.mk-pop-cab span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--tinta-3); }
.mk-ops { display: grid; gap: 8px; margin: 14px 0 12px; }
.mk-op { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--papel); color: inherit; font: inherit; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.mk-op::before { content: ''; grid-row: span 2; width: 16px; height: 16px; margin-top: 1px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--linha-forte); background: var(--papel); box-shadow: inset 0 0 0 0 var(--anil-2); transition: box-shadow 150ms ease, border-color 150ms ease; }
.mk-op:hover { border-color: var(--tinta-3); }
.mk-op[aria-checked="true"] { border-color: var(--anil-2); background: color-mix(in srgb, var(--anil-2) 6%, var(--papel)); }
.mk-op[aria-checked="true"]::before { border-color: var(--anil-2); box-shadow: inset 0 0 0 4px var(--anil-2); }
.mk-op b { font-size: 13.5px; font-weight: 600; }
.mk-op span { grid-column: 2; font-size: 12.5px; line-height: 1.4; color: var(--tinta-3); }
.mk-op:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.mk-rot { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); }
.mk-rot small { font-size: 12px; font-weight: 400; color: var(--tinta-3); }
.mk-pop textarea { display: block; width: 100%; box-sizing: border-box; min-height: 58px; resize: vertical; padding: 8px 10px; border: 1px solid var(--linha-forte); border-radius: 10px; font: 13.5px/1.4 var(--f-txt); color: var(--tinta); background: var(--papel); }
.mk-pop textarea::placeholder { color: var(--tinta-3); }
.mk-pop textarea:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.mk-erro { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: #B42318; }
.mk-pop-pe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.mk-pop-pe .btn-pri, .mk-pop-pe .btn-claro { min-height: 38px; }
.mk-pop-pe .btn-pri { transition: transform 120ms cubic-bezier(.23, 1, .32, 1), background-color 150ms ease; }
.mk-pop-pe .btn-pri:active { transform: scale(.97); }
.mk-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 10px 10px 16px; border-radius: var(--raio-m); background: var(--anil); color: #fff; font-size: 13.5px; line-height: 1.35; box-shadow: var(--sombra-flut);
  transform: translate(-50%, 0); opacity: 1; transition: opacity 200ms ease-out, transform 200ms cubic-bezier(.23, 1, .32, 1); }
.mk-toast:not(.mk-on) { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition-duration: 150ms; }
.mk-toast button { flex: none; min-height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .1); color: #fff; font: 600 13px var(--f-txt); cursor: pointer; }
.mk-toast button:hover { background: rgb(255 255 255 / .18); }
.mk-toast button:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
@media (max-width: 640px) { .mk-ctrl { flex-direction: column; align-items: flex-start; gap: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .mk-bt, .mk-op, .mk-op::before, .mk-pop, .mk-toast, .mk-pop-pe .btn-pri { transition: none; }
  .mk-bt:active, .mk-pop-pe .btn-pri:active { transform: none; }
}
@media print { .mk-linha, .mk-ctrl .mk-hist { display: none; } }

/* 19/10: filtro próprio do card Leads em aberto (criação e consumo) e os leads game changer do Funil */
.fl-leads { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin: -4px 0 16px; padding: 12px 14px; border-radius: var(--raio-m); background: var(--fundo-2); box-shadow: inset 0 0 0 1px var(--linha); }
.fl-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fl-rot { flex-basis: 100%; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); }
.fl-leads .seg button { min-height: 32px; padding: 0 11px; font-size: 13px; }
.fl-campos { gap: 6px; font-size: 13px; color: var(--tinta-3); }
.fl-campos input { min-height: 34px; font: 13.5px var(--f-txt); color: var(--tinta); }
.fl-campos input[type="number"] { width: 96px; }
.fl-campos input:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.fl-limpa { align-self: center; font-size: 13px; font-weight: 600; }
section.bloco.fl-carregando > :not(h2):not(.subt) { opacity: .55; transition: opacity 150ms ease; }
.gc-pend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 4px 0 6px; font-size: 13px; color: var(--tinta-2); }
.gc-pend-rot { font-weight: 600; }
.gc-pend-bt { font-size: 13px; }
.gc-pend-bt b { font-weight: 700; }
.gc-pend-bt.ruim, .gc-pend-bt.ruim b { color: var(--ruim); }
.gc-todos { margin-top: 10px; }
@media (max-width: 640px) { .fl-leads { gap: 12px; } .fl-campos input[type="date"] { max-width: 140px; } }
@media (prefers-reduced-motion: reduce) { section.bloco.fl-carregando > :not(h2):not(.subt) { transition: none; } }

/* ---------- Configuração › Usuários (19/10): o admin cria, altera e remove acessos ---------- */
#t-usuarios td { vertical-align: middle; }
#t-usuarios .usr-login { display: block; margin-top: 1px; font-size: 12.5px; color: var(--tinta-3); }
/* 26/10 (v93.1): "Como cada um usa o hub" — uma linha por pessoa (iniciais, dias com uso, as três telas mais abertas, listas,
   exportações e marcas) que abre o detalhe: telas e listas em barras na largura do maior número e as últimas exportações */
.uso-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 6px; font-size: 13px; }
.uso-lista { display: flex; flex-direction: column; }
.uso-p { border-top: 1px solid var(--linha); }
.uso-cab { width: 100%; display: grid; grid-template-columns: 38px minmax(150px, 220px) minmax(0, 1fr) auto 14px; align-items: center; gap: 14px; padding: 12px 4px;
  border: 0; background: transparent; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; border-radius: 10px; transition: background-color .15s ease; }
.uso-cab:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) { .uso-cab:not(:disabled):hover { background: var(--sutil-2); } }
.uso-cab:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
.uso-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--tinta-2); background: var(--sutil); }
.uso-nome { display: flex; flex-direction: column; min-width: 0; }
.uso-nome b { font-size: 14px; font-weight: 600; }
.uso-nome small { font-size: 12.5px; color: var(--tinta-3); }
.uso-top { min-width: 0; font-size: 13.5px; color: var(--tinta-2); line-height: 1.45; }
.uso-top i, .uso-b-n { font-style: normal; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.uso-nums { font-size: 13px; color: var(--tinta-3); white-space: nowrap; }
.uso-nums b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.uso-seta { font-size: 18px; color: var(--tinta-3); transition: transform .18s cubic-bezier(.23, 1, .32, 1); }
.uso-cab[aria-expanded="true"] .uso-seta { transform: rotate(90deg); }
.uso-det { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 32px; padding: 4px 4px 18px 56px; }
.uso-det[hidden] { display: none; }
.uso-col h4 { margin: 6px 0 8px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.uso-col h4 small { font-weight: 500; color: var(--tinta-3); margin-left: 4px; }
.uso-col .uso-h-exp { margin-top: 16px; }
.uso-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.uso-barras li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; padding: 4px 10px; border-radius: 8px; font-size: 13px; overflow: hidden; isolation: isolate; }
.uso-barras li i { position: absolute; inset: 0 auto 0 0; z-index: -1; background: var(--sutil-3); border-radius: 8px; }
.uso-b-t { min-width: 0; color: var(--tinta-2); }
.uso-b-t small { display: block; font-size: 11.5px; color: var(--tinta-3); }
.uso-exp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tinta-2); }
.uso-col p.cinza { margin: 0; font-size: 13px; }
@media (max-width: 900px) {
  .uso-cab { grid-template-columns: 38px minmax(0, 1fr) 14px; row-gap: 4px; }
  .uso-cab .uso-top, .uso-cab .uso-nums { grid-column: 2; white-space: normal; }
  .uso-cab .uso-seta { grid-column: 3; grid-row: 1; }
  .uso-det { padding-left: 4px; grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .uso-seta, .uso-cab { transition: none; } }
#t-usuarios tr.usr-sel td { background: color-mix(in srgb, var(--laranja) 9%, var(--papel)); }
#t-usuarios td:last-child { text-align: right; }
.selo.usr-admin { background: #E2E6F5; color: var(--anil-2); }
.usr-emps-cel { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.usr-emp { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--linha); border-radius: 999px; background: var(--sutil-2); font-size: 12.5px; font-weight: 500; color: var(--tinta-2); white-space: nowrap; }
.usr-emp.todas { background: transparent; border-style: dashed; border-color: var(--linha-forte); }
.usr-emp i, .usr-chk i { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 3px; }
.usr-alterar, .btn-claro, .btn-perigo { font: 600 13.5px var(--f-txt); border-radius: 9px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s cubic-bezier(.23, 1, .32, 1); }
.usr-alterar { min-height: 34px; padding: 0 13px; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha-forte); }
.btn-claro { min-height: 42px; padding: 0 16px; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha-forte); }
.btn-perigo { min-height: 42px; padding: 0 16px; color: var(--ruim); background: transparent; border: 1px solid color-mix(in srgb, var(--ruim) 45%, transparent); }
.btn-perigo.confirmar { background: var(--ruim); border-color: var(--ruim); color: #fff; }
.btn-claro:disabled, .btn-perigo:disabled { opacity: .6; cursor: progress; }
.usr-alterar:focus-visible, .btn-claro:focus-visible, .btn-perigo:focus-visible, .usr-form .btn-pri:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .usr-alterar:hover, .btn-claro:hover { background: var(--sutil-2); border-color: var(--tinta-3); }
  .btn-perigo:not(.confirmar):hover { background: var(--ruim-suave); }
  .usr-chk:hover span { border-color: var(--tinta-3); }
  .usr-campo input:not([readonly]):hover { border-color: var(--tinta-3); }
}
.usr-alterar:active, .btn-claro:active, .btn-perigo:active, .usr-form .btn-pri:active { transform: scale(.97); }

.usr-form { display: grid; gap: 20px; margin-top: 6px; }
.usr-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 14px; }
.usr-campo { display: grid; align-content: start; gap: 6px; }
.usr-campo > span, .usr-grupo legend { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.usr-campo input { width: 100%; min-height: 42px; padding: 8px 11px; font: 500 14.5px var(--f-txt); color: var(--tinta); background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 10px; transition: border-color .15s ease, background-color .15s ease; }
.usr-campo input:focus { outline: 2px solid var(--laranja); outline-offset: 0; border-color: var(--laranja); }
.usr-campo input[readonly] { background: var(--sutil-2); color: var(--tinta-2); }
.usr-campo input.erro-campo { border-color: var(--ruim); background: var(--ruim-suave); }
.usr-campo small, .usr-ajuda { font-size: 12.5px; line-height: 1.4; color: var(--tinta-3); }
.usr-grupo { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.usr-grupo legend { padding: 0; margin-bottom: 8px; }
.usr-papel { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.usr-papel label { padding: 12px 14px; }
.usr-papel b { font-size: 15px; }
.usr-papel label.travado { opacity: .55; cursor: not-allowed; }
.usr-nota { margin: 0; font-size: 12.5px; color: var(--atencao); }
.usr-emps { display: flex; flex-wrap: wrap; gap: 8px; }
.usr-chk { position: relative; display: inline-flex; cursor: pointer; }
.usr-chk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.usr-chk span { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--papel); font-size: 13.5px; font-weight: 500; color: var(--tinta-2); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.usr-chk input:checked + span { background: color-mix(in srgb, var(--laranja) 12%, var(--papel)); border-color: var(--laranja); color: var(--tinta); font-weight: 600; }
.usr-chk input:checked + span::after { content: '✓'; font-weight: 700; color: #A8480C; }
.usr-chk input:focus-visible + span { outline: 2px solid var(--laranja); outline-offset: 2px; }
.usr-mostrar { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 13px; color: var(--tinta-2); cursor: pointer; }
.usr-mostrar input { width: 16px; height: 16px; margin: 0; accent-color: var(--laranja); }
.usr-msg { margin: 0; font-size: 13.5px; font-weight: 600; }
.usr-msg:empty { display: none; }
.usr-msg.erro { padding: 10px 12px; border-radius: 10px; color: var(--ruim); background: var(--ruim-suave); }
.usr-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--linha); padding-top: 16px; }
.usr-acoes .espaco { flex: 1; }
#t-usr-hist .usr-det { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tinta-3); }
@media (max-width: 767px) { .usr-acoes .espaco { display: none; } .usr-acoes button { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) {
  .usr-alterar, .btn-claro, .btn-perigo, .usr-chk span, .usr-campo input { transition: none; }
  .usr-alterar:active, .btn-claro:active, .btn-perigo:active, .usr-form .btn-pri:active { transform: none; }
}
@media (max-width: 767px) {   /* celular: cada pessoa vira um bloco, com o Alterar ao lado do nome */
  #t-usuarios thead { display: none; }
  #t-usuarios, #t-usuarios tbody { display: block; }
  #t-usuarios tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
  #t-usuarios td { display: block; padding: 0; border: 0; text-align: left; }
  #t-usuarios td:nth-child(5) { grid-column: 2; grid-row: 1; }
  #t-usuarios td:nth-child(2), #t-usuarios td:nth-child(3), #t-usuarios td:nth-child(4) { grid-column: 1 / -1; }
  #t-usuarios td:nth-child(2) .selo { margin-left: 0; }
  #t-usuarios td:nth-child(4) { font-size: 12.5px; color: var(--tinta-3); }
  #t-usuarios td:nth-child(4)::before { content: "Senha: "; }
}
@media print { .usr-alterar, [data-id="usuarios-form"] { display: none; } }
/* =====================================================================
   19/10 (Rodada 30): leitura mais leve, com as escolhas do Gustavo na página "Leitura do Hub"
   ===================================================================== */
/* casos 4 e 6: a linha de baixo com vários fatos vira uma lista curta, um fato por linha, com o nome */
.kl { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; max-width: 340px; }
.kl-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; line-height: 1.45; }
.kl-l > span { color: var(--tinta-3); min-width: 0; }
.kl-l > b { font-weight: 600; color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
/* 22/10 (Rodada 39, pedido do Notion: "no tráfego pago tem muita coisa estourada ou sobreposta"): quando o valor não cabe ao lado do
   nome (Verba × plano: "R$ 14,1 mil de R$ 16,9 mil"), ele desce para a linha de baixo, embaixo do nome, em vez de cobrir o nome
   (encostado à esquerda: à direita, o valor curto do Google ficava desalinhado dos dois de cima, que ocupam a linha inteira) */
.kl-l { flex-wrap: wrap; row-gap: 0; }
.kl-l.forte > span { color: var(--tinta); font-weight: 600; }
.kl-l.forte > b { color: var(--tinta); }
.kl-l.sep { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--linha); }
.kl-l.verm > b { color: var(--ruim); }
.kl-l.verde > b { color: var(--bom); }
/* caso 1 (opção A): taxa dividida em dois, o nome à esquerda e o percentual e o "x de y" alinhados à direita */
.kl-tx { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--linha); }
.kl-tx .kl-l { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 0; align-items: baseline; padding: 2px 0; }
.kl-tx .kl-l > .tx-n { grid-column: 1; grid-row: 1; color: var(--tinta-2); }
.kl-tx .kl-l > b { grid-column: 2; grid-row: 1; }
.kl-tx .kl-l > em { grid-column: 3; grid-row: 1; font-style: normal; color: var(--tinta-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kl-tx .kl-l > i { grid-column: 1 / -1; grid-row: 2; font-style: normal; font-size: 11.5px; line-height: 1.3; color: var(--tinta-3); }
/* coluna estreita (o número da taxa no Fechamento tem uns 175 px): nome e percentual em cima; a régua e o "x de y" embaixo */
@container (max-width: 300px) {
  .kl-tx .kl-l { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .kl-tx .kl-l > em { grid-column: 2; grid-row: 2; justify-self: end; font-size: 12px; }
  .kl-tx .kl-l > i { grid-column: 1; }   /* 23/10: descrição à esquerda, "k de n" à direita, sem sobrepor */
}
.cartao-kpis .ck-s .kl-tx { margin-top: 4px; padding-top: 4px; }
.cartao-kpis .ck-s .kl-tx .kl-l { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; font-size: 12px; }
.cartao-kpis .ck-s .kl-tx .kl-l > i { display: none; }
.cartao-kpis .ck-s .kl-tx .kl-l > em { grid-column: 1 / -1; grid-row: 2; justify-self: start; font-size: 11.5px; margin-top: -1px; }
/* caso 5 (opção 1 + nota dele): os percentuais da barra dizem de quê, com número e percentual em destaque */
.barra-meta .leg { font-size: 13px; }
.bloco > .barra-meta { margin-bottom: 10px; }
.barra-meta .leg b { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.barra-meta .sq { white-space: nowrap; }
.cartao .barra-meta .leg { font-size: 12.5px; }
/* caso 3 (opção 1): faixa de ritmo dos SDRs, cada número embaixo do nome */
.kpi-ritmo .q4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 2px; }
/* 22/10 (Rodada 39, estouro antigo da Pré-Vendas: "Crítica" passava 3 a 5 px da sua coluna a 1366): cada faixa com a largura do seu
   nome, espalhadas na caixa */
.kpi-ritmo .q4 { grid-template-columns: repeat(4, auto); justify-content: space-between; }
.q4-i { display: flex; flex-direction: column; min-width: 0; }
.q4-i small { font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.q4-i b { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.q4-i b.acima, .q4-i small.acima { color: var(--bom); }
.q4-i b.abaixo, .q4-i small.abaixo { color: var(--ruim); }
.q4-i b.atencao-txt, .q4-i small.atencao-txt { color: var(--atencao); }
.q4-i em { font-style: normal; font-size: 11.5px; color: var(--tinta-3); line-height: 1.3; }
/* caso 10 (opção 2): sem venda de tráfego, o gasto aparece em âmbar */
.sem-venda { color: var(--atencao); }
.sem-venda-r { color: var(--atencao); font-weight: 600; font-size: 12px; text-transform: none; letter-spacing: 0; }
/* caso 7 (opção 2): conversão por canal numa tabelinha */
table.mini-t { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mini-t th { font-weight: 600; color: var(--tinta-3); font-size: 11.5px; text-align: right; padding: 2px 4px 4px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.mini-t td { text-align: right; padding: 2px 4px; line-height: 1.4; color: var(--tinta-2); border: 0; }
.mini-t th:first-child, .mini-t td:first-child { text-align: left; padding-left: 0; }
.mini-t th:last-child, .mini-t td:last-child { padding-right: 0; }
.mini-t td:last-child { font-weight: 600; color: var(--tinta); }
/* 22/10 (Rodada 39, estouro antigo do Tráfego pago: "Convertidos (conta criada)" +28 px a 1366): no degrau estreito a tabela de
   canais encolhe a letra e o respiro entre as colunas para caber, sem tirar coluna */
@container (max-width: 210px) {
  table.mini-t { font-size: 11px; }
  .mini-t th { font-size: 10px; letter-spacing: 0; padding: 2px 2px 4px; }
  .mini-t td { padding: 2px 2px; }
}
/* caso 15 (opção 2): o rodapé com a fonte sai da tela (continua na impressão) e abre no ⓘ do card */
.bloco > .fonte { display: none; }
@media print { .bloco > .fonte { display: block; } }
.info-pop { position: fixed; inset: auto; margin: 0; width: min(320px, calc(100vw - 16px)); box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-flut); font: 13px/1.5 var(--f-txt); }
.info-pop p { margin: 0; color: var(--tinta-2); }
.info-pop p span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 2px; }
.info-pop .link-bt { margin-top: 8px; font-size: 13px; }

/* =====================================================================
   20/10 (Rodada 31): texto de apoio, com as escolhas do Gustavo na página "Texto de Apoio do Hub"
   1 sem subtítulo (o "?" do título explica) · 2 legenda numa linha própria acima do gráfico · 3 ícone de lista no número
   clicável · 4 veredito em selo · 5 uma ideia por linha, a primeira mais escura · 6 letra dois pontos maior
   ===================================================================== */
/* peça 1: o que fica à vista embaixo do título (link, pílula, período diferente do filtro, aviso de dado) e o "?" do título */
.bloco .subt.subt-ctx { font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); margin-top: -12px; margin-bottom: 16px; text-wrap: pretty; }   /* margem só em cima e embaixo: a da esquerda é a do título (52 px) */
.bloco > h2 .ajuda-wrap { margin-left: 8px; }
.ajuda-bal { font-size: 14px; line-height: 1.5; }
.ajuda-bal .aj-l { display: block; }
.ajuda-bal .aj-l + .aj-l { margin-top: 6px; }
.ajuda-bal .aj-sep { display: block; height: 1px; margin: 9px 0; background: rgb(255 255 255 / .22); }
/* peça 2: legenda do gráfico numa linha própria, com a marca de cada cor ou forma */
.leg-graf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 0 0 12px; font-size: 14.5px; line-height: 1.4; color: var(--tinta-2); text-wrap: pretty; }
.lg-i { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.lg-i > i { flex: none; display: inline-block; }
.lg-i > b { font-weight: 600; color: var(--tinta); }
.lg-cor, .lg-cheia, .lg-clara { width: 11px; height: 11px; border-radius: 3px; }
.lg-cheia { background: #6E7484; } .lg-clara { background: #C9CED8; }
.lg-traco { width: 14px; height: 3px; border-radius: 2px; background: var(--lg, var(--tinta)); }
.lg-linha { width: 18px; height: 3px; border-radius: 2px; background: var(--lg, var(--tinta-2)); }
.lg-barra { width: 9px; height: 13px; border-radius: 2px; background: var(--lg, #8A90A2); }
.lg-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--lg, var(--tinta-2)); }
.lg-contorno { width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--lg, var(--ruim)); }
.lg-faixa { width: 18px; height: 10px; border-radius: 2px; background: #DDE2EC; }
.lg-seta { font-style: normal; font-size: 10px; letter-spacing: -1px; color: var(--tinta-3); }
.lg-nota { color: var(--tinta-3); }
/* peça 3: o número que abre lista ganha o botãozinho de lista (o que abre outra aba, a seta) */
.lk-ico { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 5px; vertical-align: -3px; border-radius: 5px; background: var(--sutil); border: 1px solid var(--linha-forte); color: var(--tinta-2); text-decoration: none; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; }
.lk-ico svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#pagina .lk.lk-big { text-decoration: none; }   /* vence o sublinhado de [data-lista].lk */
a.lk-big .lk-ico { width: 24px; height: 24px; margin: -8px 0 -8px 8px; border-radius: 7px; vertical-align: .2em; }   /* a margem negativa não deixa o ícone empurrar a linha (os números da fileira ficam na mesma altura) */
a.lk-big .lk-ico svg { width: 13px; height: 13px; }
a.lk-n:hover .lk-ico, a.lk-n:focus-visible .lk-ico, .lk-n[role="button"]:hover .lk-ico { background: var(--anil); border-color: var(--anil); color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .lk-ico { transition: none; } }
/* peças 4 e 5: embaixo do número, uma ideia por linha (a primeira mais escura) e o veredito em selo */
.sub.sub-l { display: flex; flex-direction: column; gap: 1px; }
.sub-l .sl { font-size: 15px; line-height: 1.45; color: var(--tinta-3); text-wrap: pretty; }
.sub-l .sl.s1 { font-size: 16px; color: var(--tinta-2); }
.sub-l .sl .kl-l { font-size: 15px; }
.cartao-kpis .sub-l .sl { font-size: 14px; } .cartao-kpis .sub-l .sl.s1 { font-size: 14.5px; }
.selo-v { align-self: flex-start; display: inline-flex; align-items: center; margin-top: 7px; padding: 4px 10px; border-radius: 999px; font: 600 13.5px/1.25 var(--f-txt); white-space: nowrap; }
.selo-v.bom { background: var(--bom-suave); color: var(--bom); }
.selo-v.ruim { background: var(--ruim-suave); color: var(--ruim); }
.selo-v.atencao { background: var(--atencao-suave); color: var(--atencao); }
.selo-v.neutro { background: var(--sutil); color: var(--tinta-2); }
.nw { white-space: nowrap; }
/* peça 6 (opção 2): letra dois pontos maior em todo o texto de apoio: rótulo 13, linha de baixo 15 a 16, legenda 14,5, números 34 e 50 */
.bloco h2 { font-size: 21px; }
.kpi .rot, .rot { font-size: 13px; }
.kpi .num { font-size: min(34px, 17.5cqi); }
.kpi .num.grande { font-size: min(50px, 21cqi); }
.kpi .num:has(.lk-big) { font-size: min(34px, 15cqi); }
.kpi .num.grande:has(.lk-big) { font-size: min(50px, 18.5cqi); }
.kpi .sub { font-size: 15px; line-height: 1.45; }
.kl-l { font-size: 15px; }
.kl-tx .kl-l > i { font-size: 13px; }
.cascata .rot { font-size: 13px; }
.cascata .num { font-size: min(48px, 17cqi); }
.bloco.s6 .cascata .num { font-size: min(36px, 17cqi); }
.cascata .num small { font-size: 20px; }
.cascata .val { font-size: 19px; }
.cascata .sub { font-size: 15px; }
.cascata .tira { font-size: 14.5px; }
.barra-meta .leg { font-size: 15px; }
.cartao .barra-meta .leg { font-size: 14px; }
.leg-farol { font-size: 14.5px; }
.linha-pip { font-size: 15px; }
.bloco p.cinza { font-size: 14.5px; }
.linha2 { font-size: 15.5px; }
.hoje-linha { font-size: 14.5px; }
.mini .sub { font-size: 14.5px; }
.rt-tile .rot { font-size: 15px; } .rt-tile .val { font-size: 50px; } .rt-tile .sub { font-size: 15px; }
.principal .num { font-size: 54px; } .principal .un { font-size: 19px; }
.delta { font-size: 15px; } .delta small { font-size: 13px; }
.cartao-kpis .ck-k { font-size: 13px; } .cartao-kpis .ck-v { font-size: 18px; } .cartao-kpis .ck-s { font-size: 14px; }
.cartao-kpis .ck-s .kl-tx .kl-l { font-size: 14px; } .cartao-kpis .ck-s .kl-tx .kl-l > em { font-size: 13px; }
.cartao .ponte-mini { font-size: 14px; }
.rodape-cartao { font-size: 14.5px; }
.fx-r { font-size: 13px; } .fx-v { font-size: 26px; } .fx-fim .fx-v { font-size: 32px; } .fx-s { font-size: 14px; }
.fluxo-kpi .fx-v { font-size: 23px; } .fluxo-kpi .fx-v.fx-forte { font-size: 28px; }
.q4-i small { font-size: 14px; } .q4-i b { font-size: 28px; } .q4-i em { font-size: 13px; }
.pe-p { font-size: 14.5px; } .pe-v { font-size: 17px; } .pe-v small { font-size: 14px; } .pe-ref { font-size: 14px; } .pe-d { font-size: 14.5px; }
.vis-nota, .rod-nota, .calc-nota, .mk-nota { font-size: 14.5px; }
.sem-venda-r { font-size: 14px; }
@media (max-width: 767px) { .bloco h2 { font-size: 19px; } .rt-tile .val, .principal .num { font-size: 44px; } }
/* enquadramento (Rodada 31): sem palavra sozinha na última linha; rótulo de duas linhas equilibrado; nada pequeno demais */
#pagina section.bloco { text-wrap: pretty; }
.kpi .rot, .cascata .rot, .fx-r, .ck-k { text-wrap: balance; }
.fx-quando { font-size: 13px; white-space: nowrap; }
.gc-chip { font-size: 14px; } .fl-rot { font-size: 14px; } .regua .leg { font-size: 14px; }
.sin-l .pe-card, .sin-l .pe-ab { font-size: 13.5px; }
.sin-l .acima, .sin-l .abaixo { font-size: 13.5px; }
@container (max-width: 300px) { .kl-tx .kl-l > em { font-size: 13.5px; } }
.kpi .num .par small { font-size: 13px; }
.spark-bloco .spark-cab { font-size: 14px; } .spark-bloco .delta { font-size: 14.5px; } .spark-bloco .delta small { font-size: 13px; }
.sin-l .pe-ab .pe-d { font-size: 13.5px; }
/* fileira alinhada: o KPI em botão começa em cima (o botão centralizava o conteúdo na altura da fileira) e o KPI comum ao lado
   dele desce o mesmo tanto do respiro do botão; linha curta de apoio em linhas equilibradas, sem palavra sozinha */
.kpi-bt { display: flex; flex-direction: column; justify-content: flex-start; }
.kpis:has(> .kpi-bt) > .kpi:not(.kpi-bt) { padding-top: 10px; }
.sub-l .sl, .cascata .sub, .fx-s, .ck-s, .delta small, .linha-pip { text-wrap: balance; }
.gc-grupo > .rot { font-size: 14px; } .gc-grupo > .rot small { font-size: 13px; }
.lg-linha.lg-pont { background: repeating-linear-gradient(90deg, var(--lg, var(--tinta-2)) 0 3px, transparent 3px 6px); }
.lg-linha.lg-trac { background: repeating-linear-gradient(90deg, var(--lg, var(--tinta-2)) 0 7px, transparent 7px 10px); }
/* sem subtítulo, o respiro entre o título e o conteúdo fica no próprio título */
.bloco > h2 { margin-bottom: 16px; }
.bloco > h2 .estado { margin-left: 10px; }
.kpi-bt > .num .lk-ico { width: 24px; height: 24px; margin: -8px 0 -8px 8px; border-radius: 7px; vertical-align: .2em; }
.kpi-bt > .num .lk-ico svg { width: 13px; height: 13px; }
.kpi-bt:hover .lk-ico, .kpi-bt:focus-visible .lk-ico { background: var(--anil); border-color: var(--anil); color: #FFFFFF; }
.ck-s.sub-l { display: flex; flex-direction: column; gap: 1px; }
/* cartão da Visão geral: as duas frases da barra uma embaixo da outra (lado a lado, "super meta" e "até ontem" quebravam no meio) */
.cartao .barra-meta .leg { flex-direction: column; gap: 2px; }
.bloco > h2 .selo { white-space: nowrap; }
.usr-campo small, .usr-ajuda { font-size: 14px; }
.cascata .tira { text-wrap: balance; }
/* textos curtos em linhas equilibradas (título do card, nome e linha das pessoas nos sinais, ajuda do formulário) e botão sem quebra */
.bloco > h2, .pe-n, .pe-p, .pe-ref, .usr-ajuda { text-wrap: balance; }
.btn-mini { white-space: nowrap; }
/* celular: o título vira texto corrido (o "?" e os selos andam junto da última palavra, e o botão desce de linha quando não cabe) */
@media (max-width: 767px) {
  .bloco > h2 { display: block; padding-top: 4px; }
  .bloco > h2 > .estado, .bloco > h2 > .selo, .bloco > h2 > .vivo-selo, .bloco > h2 > .btn-mini, .bloco > h2 > .tag-foto { display: inline-flex; vertical-align: 2px; margin: 2px 0 2px 8px; }
  .bloco > h2 > .ajuda-wrap { vertical-align: 2px; }
}
/* gaveta das listas: os números do topo e as notas também sobem (rótulo 13, linha de baixo 14) */
.ls-kpi .rot { font-size: 13px; } .ls-kpi .sub { font-size: 14px; } .ls-kpi .num { font-size: 21px; }
.ls-nota, .ls-n { font-size: 14px; } .ls-graf .rot { font-size: 14px; }

/* 20/10 (Gustavo: "queria congelar essa parte aqui, hoje só congela os filtros, quando rolar às vezes a pessoa quer trocar rapidamente"):
   ao rolar, a linha do logo sai (topo negativo) e ficam presas as abas e a faixa do período; as alturas vêm do travaTopo() no app.js.
   A linha do período que vale (datas, dias úteis, pílulas) fica fora da faixa e rola com a página. No celular nada fica preso. */
.periodo-ativo { width: 100%; max-width: 1440px; box-sizing: border-box; margin: 0 auto; padding: 12px 28px 0; }
.periodo-ativo:empty { display: none; }
.periodo-ativo + main { padding-top: 16px; }
@media (min-width: 768px) {
  header.topo { position: sticky; top: calc(-1 * var(--h-topo-in, 66px)); z-index: 22; }
  .periodo { top: calc(var(--h-topo, 115px) - var(--h-topo-in, 66px)); }
  #pagina section.bloco { scroll-margin-top: calc(var(--h-preso, 160px) + 16px); }
}
@media (max-width: 767px) {
  .periodo-ativo { padding: 8px 14px 0; }
  .periodo:not(.aberto) + .periodo-ativo { display: none; }
}
@media print { .periodo-ativo { display: none !important; } }

/* 20/10 (Rodada 32, escolhas do Gustavo na página "Topo do Hub": 1 = opção 1, 2 = 1, 3 = 1, 4 = 1, 5 = 2, 6 = 1) */
:root { --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235D6480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* peça 4: faixa branca e opaca (sai o desfoque, que borrava o card passando embaixo); presa, ganha uma sombra leve */
.periodo { background: var(--papel); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--linha); transition: box-shadow 200ms ease; }
html.preso .periodo { box-shadow: 0 8px 20px rgb(26 32 55 / .08); }
/* peça 3: traço anil na aba aberta, por cima da linha da cor da empresa */
header .abas a { position: relative; }
header .abas a[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -2px; height: 3px; border-radius: 3px 3px 0 0; background: var(--anil); z-index: 2; }
/* peça 2: "Mais" com as abas que não cabem (abasMais no app.js) */
@media (min-width: 768px) { header .abas { overflow: visible; } }
header .abas a[hidden] { display: none; }
.aba-mais { position: relative; display: flex; }
.aba-mais-bt { border: 0; background: transparent var(--seta) no-repeat right 12px center; color: var(--tinta-3); font-size: 14px; font-weight: 500; padding: 12px 32px 11px 14px; cursor: pointer; white-space: nowrap; min-height: 44px; }
.aba-mais-bt:hover, .aba-mais-bt[aria-expanded="true"] { color: var(--tinta); }
.aba-mais-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 220px; background: var(--papel); border-radius: 14px; box-shadow: 0 12px 32px rgb(26 32 55 / .18); padding: 6px; display: grid; gap: 2px; }
.aba-mais-menu[hidden] { display: none; }
header .abas .aba-mais-menu a { padding: 10px 12px; border-radius: 9px; border-bottom: 0; min-height: 40px; color: var(--tinta-2); font-weight: 500; }
header .abas .aba-mais-menu a:hover { background: var(--sutil); color: var(--tinta); }
/* peça 5: o período num botão, com os atalhos e as datas no menu; período e filtros na mesma linha */
.per-esc { position: relative; display: inline-flex; }
.per-bt { display: inline-flex; align-items: center; gap: 6px; padding: 0 34px 0 12px; cursor: pointer; white-space: nowrap; font-weight: 500; }
.per-bt b { font-weight: 600; color: var(--tinta); }
.per-bt[aria-expanded="true"] { border-color: var(--tinta-3); }
.per-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(440px, calc(100vw - 28px)); background: var(--papel); border-radius: 14px; box-shadow: 0 12px 32px rgb(26 32 55 / .18); padding: 12px; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; transform-origin: top left; transition: opacity 150ms cubic-bezier(.23, 1, .32, 1), transform 150ms cubic-bezier(.23, 1, .32, 1); }
.per-pop[hidden] { display: none; }
@starting-style { .per-pop { opacity: 0; transform: translateY(-4px) scale(.98); } }
.per-atalhos { display: grid; gap: 2px; align-content: start; }
.per-atalhos button { text-align: left; border: 0; background: none; border-radius: 9px; padding: 0 10px; min-height: 34px; font-size: 14px; font-weight: 500; color: var(--tinta-2); cursor: pointer; }
.per-atalhos button:hover { background: var(--sutil); color: var(--tinta); }
.per-atalhos button[aria-pressed="true"] { background: #E5E8EF; color: var(--tinta); font-weight: 600; }
.per-datas { display: grid; gap: 6px; align-content: start; }
.per-datas label { font-size: 13px; color: var(--tinta-3); }
.per-datas input { width: 100%; min-height: 38px; border: 1px solid var(--linha-forte); border-radius: 12px; padding: 5px 10px; background: var(--papel); color: var(--tinta-2); font-size: 14px; }
.per-aplicar { justify-self: start; margin-top: 6px; min-height: 38px; }
@media (max-width: 420px) { .per-pop { grid-template-columns: minmax(0, 1fr); } .per-atalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .per-pop, .periodo { transition: none; } }
@media print { .per-pop, .aba-mais-menu { display: none !important; } }
/* peça 6: menus da faixa em 14 px, números de largura igual e a mesma seta em todos (o "▾" escrito do Origem saiu) */
.periodo, header .abas { font-variant-numeric: tabular-nums; }
.periodo select.sel, .multi-bt, .per-bt { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: var(--seta); background-repeat: no-repeat; background-position: right 12px center; }
.periodo .sel, .periodo .multi-bt, .periodo .toggle, .per-bt { font-size: 14px; }
/* vai junto: o selo "hoje à parte" com a letra do texto de apoio da v68 */
.hoje-tag { font-size: 13px; }

/* 20/10 (gaveta): com um filtro de grupo ligado, o valor que fica com 0 dentro dele não abre nada e aparece apagado */
.ls-grupo .seg button:disabled { opacity: .45; cursor: default; }
.ls-grupo .seg button:disabled:hover { color: var(--tinta-2); }

/* 20/10 (Gustavo: "o texto não é de rápida leitura"): balão dos gráficos que dividem um total em partes (dica() no app.js):
   cor, nome, valor e quantidade alinhados, o total embaixo de um traço; nota e clique por último, mais apagados (o balão do hub é branco) */
.dica { display: grid; gap: 7px; min-width: 210px; padding: 4px 4px 2px; font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; }
.dica-t { font-weight: 600; font-size: 14px; color: var(--tinta); }
.dica-g { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 4px; align-items: center; }
.dica-g .c i { display: block; width: 10px; height: 10px; border-radius: 3px; }
.dica-g .v, .dica-g .n { text-align: right; }
.dica-g .r, .dica-g .v { color: var(--tinta); }
.dica-g .n { color: var(--tinta-2); }
.dica-g .cab { font-size: 11.5px; color: var(--tinta-3); }
.dica-g .sep { grid-column: 1 / -1; height: 1px; background: var(--linha-forte); margin: 2px 0; }
.dica-g .tot { font-weight: 600; color: var(--tinta); }
.dica-nota { font-size: 12.5px; color: var(--tinta-2); }
.dica-clique { font-size: 12px; color: var(--tinta-3); }
/* ---------- 20/10 (Rodada 33): Agenda dos eventos da Locações ---------- */
/* quem está com as montagens vencidas: uma pílula por dono, clicável (abre a lista dele) */
.ag-donos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; }
.ag-donos > .rot { font-size: 13px; color: var(--tinta-3); margin-right: 2px; }
.ag-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: 999px; background: var(--fundo-2); box-shadow: inset 0 0 0 1px var(--linha); color: var(--tinta-2); font-size: 13px; text-decoration: none; transition: box-shadow 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1); }
.ag-chip b { color: var(--ruim); font-weight: 700; }
.ag-chip:active { transform: scale(.97); }
.ag-chip:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ag-chip:hover { box-shadow: inset 0 0 0 1px var(--laranja); color: var(--tinta); } }
/* o mapa de Minas e, ao lado, as 10 cidades com mais oportunidades */
.ag-mapa-ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.ag-mapa-ctrl .seg button, #ag-cruz-ctrl .seg button { min-height: 30px; padding: 0 11px; font-size: 13px; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease, color 160ms ease; }
.ag-mapa-ctrl .seg button:active, #ag-cruz-ctrl .seg button:active { transform: scale(.97); }
.ag-mapa-ctrl .seg button:focus-visible, #ag-cruz-ctrl .seg button:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.ag-mapa { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.grafico.mapa-mg { height: 470px; }
.ag-cid-cab { font-size: 13px; color: var(--tinta-3); margin: 4px 0 10px; }
.ag-cid-cab b { color: var(--tinta); font-weight: 700; }
ol.ag-cid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-cid-l { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 7px 10px; border-radius: var(--raio-p); color: var(--tinta); text-decoration: none; transition: background-color 150ms ease; }
.ag-cid-l i { width: 10px; height: 10px; border-radius: 50%; grid-row: 1 / 3; }
.ag-cid-l span { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-cid-l span small { color: var(--tinta-3); font-weight: 400; }
.ag-cid-l b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ag-cid-l > small { grid-column: 2 / 4; font-size: 13px; color: var(--tinta-3); }
.ag-cid-l:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .ag-cid-l:hover { background: var(--sutil-2); } }
.ag-fora { margin-top: 10px; font-size: 13px; color: var(--tinta-2); line-height: 1.6; }
.ag-fora:empty { display: none; }
/* o cruzamento das abertas: a coluna da montagem vencida com o cabeçalho vermelho */
table.ag-cruz th.ag-venc { color: var(--ruim); }
table.ag-cruz td:first-child { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.ag-resto { margin-top: 8px; font-size: 12.5px; }
@media (max-width: 1100px) { .ag-mapa { grid-template-columns: minmax(0, 1fr); } .grafico.mapa-mg { height: 400px; } ol.ag-cid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (max-width: 600px) { .grafico.mapa-mg { height: 320px; } }
/* ---------- 21/10 (Rodada 34): a tarefa de outra pessoa (SDR, dono antigo, coordenação) à parte da do dono de hoje ---------- */
.tarefa-outro { display: block; margin-top: 2px; font-size: 13px; color: var(--tinta-3); white-space: nowrap; }
.cel-outro { display: block; margin-top: 2px; line-height: 1.2; }
.cel-outro .link-bt { font-size: 13px; font-weight: 400; color: var(--tinta-3); }
@media (hover: hover) and (pointer: fine) { .cel-outro .link-bt:hover { color: var(--tinta); } }
/* 22/10 (Rodada 39, pedido do Notion): escala de 3 cores por coluna nas safras (F1–F4 dos leads e O1–O4 dos orçamentos). A cor vem
   do app.js (--esc, já misturada em hexadecimal); o realce da linha sob o mouse não apaga a cor da célula. A nota de baixo escurece
   um tom para continuar AA sobre o fundo colorido. */
table.t.mapa tbody td.cel.esc, table.t.mapa tbody tr:hover td.cel.esc { background-color: var(--esc); }
table.t.mapa td.cel.esc small { color: var(--tinta-2); }
/* 21/10 (Agenda, "ficou meio desenquadrada"): os quatro números do Agenda de hoje na mesma linha e do mesmo tamanho; os rótulos numa linha */
.kpis.ag-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpis.ag-kpis > .kpi { min-width: 0; }
.kpis.ag-kpis .rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-kpis + .ag-donos { margin-top: 16px; }
.ag-donos + .ag-donos { margin-top: 8px; }
.ag-donos > .rot { min-width: 128px; }
@media (max-width: 1100px) { .kpis.ag-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis.ag-kpis .rot { white-space: normal; min-height: 2.6em; } }   /* duas colunas: o rótulo quebra em duas linhas, todas da mesma altura */
@media (max-width: 600px) { .ag-donos > .rot { min-width: 0; width: 100%; } }
/* o mapa com os botões de zoom no canto e a dica embaixo */
.ag-mapa-box { position: relative; min-width: 0; }
.ag-zoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.ag-zoom button { min-width: 34px; min-height: 32px; padding: 0 9px; border: 0; border-radius: 9px; background: var(--papel); color: var(--tinta-2); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; box-shadow: 0 0 0 1px var(--linha), 0 2px 6px rgb(26 32 55 / .08); cursor: pointer; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), color 150ms ease; }
.ag-zoom button[data-z="mais"], .ag-zoom button[data-z="menos"] { font-size: 18px; font-weight: 500; }
.ag-zoom button:active { transform: scale(.96); }
.ag-zoom button:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .ag-zoom button:hover { color: var(--tinta); box-shadow: 0 0 0 1px var(--laranja), 0 2px 6px rgb(26 32 55 / .08); } }
.ag-mapa-dica { font-size: 13px; color: var(--tinta-3); margin-top: 4px; }
.grafico.mapa-mg { cursor: grab; }
.grafico.mapa-mg:active { cursor: grabbing; }
.kpis.ag-kpis .num.abaixo { color: var(--ruim); }   /* vermelho = alerta (montagem vencida) */
.kpis.ag-kpis .num.acima { color: var(--bom); }    /* verde = ganho (vendidas a montar) */
/* ---------- 21/10 (Rodada 35, rolar menos): modo compacto, ligado pelo botão "Compacto" do topo (escolha de cada pessoa) ----------
   Menos espaço entre e dentro dos cards, títulos e números um pouco menores, linhas de tabela e de sinais mais baixas e gráficos
   mais baixos. O texto de apoio não diminui (13 px ou mais). */
html[data-compacto="1"] main { padding: 16px 24px 40px; }
html[data-compacto="1"] .blocos { gap: 14px; }
html[data-compacto="1"] .bloco { padding: 16px 20px 14px; }
html[data-compacto="1"] .bloco h2 { min-height: 32px; }   /* o título fica nos 19 px escolhidos na Rodada 31 */
html[data-compacto="1"] .bloco .subt { margin-bottom: 10px; }
html[data-compacto="1"] .fc-linha { padding-block: 8px; }   /* 29/10 (v109): o Fechamento das empresas mais baixo */
html[data-compacto="1"] .bloco .subt.subt-ctx { margin-top: -6px; margin-bottom: 10px; }
html[data-compacto="1"] .leg-graf { margin-bottom: 6px; }
html[data-compacto="1"] .vis-ctrl { margin: 0 0 6px; }
html[data-compacto="1"] .kpis { gap: 10px 16px; }
html[data-compacto="1"] .kpi-bt { padding: 8px 10px; }
html[data-compacto="1"] .kpi .num { font-size: min(28px, 15cqi); }
html[data-compacto="1"] .kpi .num.grande { font-size: min(40px, 18cqi); }
html[data-compacto="1"] .kpi .num:has(.lk-big) { font-size: min(28px, 13cqi); }
html[data-compacto="1"] .cascata .num { font-size: min(36px, 14cqi); }
html[data-compacto="1"] table.t th { padding: 8px 10px; }
html[data-compacto="1"] table.t td { padding: 7px 10px; }
html[data-compacto="1"] .pessoa { padding: 8px 0; gap: 10px; grid-template-columns: 32px minmax(0, 1fr) auto; }
html[data-compacto="1"] .pessoa .av { width: 32px; height: 32px; }
html[data-compacto="1"] .grafico { height: 220px; }
html[data-compacto="1"] .grafico.alto { height: 280px; }
html[data-compacto="1"] .grafico.baixo { height: 170px; }
html[data-compacto="1"] .grafico.mapa-mg { height: 400px; }
html[data-compacto="1"] .tabela-wrap.longa { max-height: 460px; }
html[data-compacto="1"] table.t.mt-mapa td { padding: 2px 6px; }   /* 21/10: o mapa do time também encolhe */
html[data-compacto="1"] .mt-cel { min-height: 32px; }
html[data-compacto="1"] .mt-pessoa { padding: 2px 6px; }
html[data-compacto="1"] .sin-l.mt-sem-nome { min-height: 62px; padding: 6px 6px; }
html[data-compacto="1"] .mt-topo { margin-bottom: 10px; }
html[data-compacto="1"] .mt-neg { margin-bottom: 10px; padding: 7px 10px; }
html[data-compacto="1"] .mt-temas { margin-bottom: 10px; }
html[data-compacto="1"] .mt-mudou-g { padding: 7px 10px; }
html[data-compacto="1"] .mt-sinal-l { padding: 6px 6px; }
html[data-compacto="1"] .mt-rod { padding: 4px 10px 10px; }
#btn-compacto[aria-pressed="true"] { background: var(--sutil-3); color: var(--tinta); }

/* =====================================================================
   22/10 (Rodada 40): tabelas dos cards na opção 1 escolhida pelo Gustavo na página "Tabelas do Hub" ("Barra no número principal")
   ===================================================================== */
/* a cor da barra: um tom claro da cor de dado da empresa da página; fora de empresa (Visão geral, áreas), o anil */
:root { --anil-hover: #F1F3FA; --barra-t: color-mix(in srgb, var(--anil) 13%, #fff); }
body[data-emp]:not([data-emp=""]) { --barra-t: color-mix(in srgb, var(--marca-dado) 24%, #fff); }
/* cabeçalho em tinta mais escura (contraste) e a linha sob o mouse em anil bem claro, em todas as tabelas */
table.t th { color: var(--tinta-2); }
table.t tbody tr:hover td, table.t tbody tr:hover td:first-child { background: var(--anil-hover); }
/* a coluna que manda na tabela (opção barra do tabela()) ganha a barra proporcional ao maior valor; o número fica em negrito */
table.t td.barra, table.t tbody tr:hover td.barra { background-image: linear-gradient(90deg, var(--barra-t) var(--p), transparent var(--p)); font-weight: 600; min-width: 96px; }
/* linha de Total no pé (opção total do tabela()) */
table.t tfoot tr.t-total td { font-weight: 600; color: var(--tinta); background: var(--sutil-2); border-top: 1px solid var(--linha-forte); border-bottom: 0; padding-top: 9px; padding-bottom: 9px; }
/* janela do clique (Gustavo: "uma mesclagem do de hoje com o A"): números e gráfico como hoje; a grade dos números não deixa mais
   célula cinza vazia (a última linha estica); os filtros viram menus numa linha só, com a contagem e uma barra em cada valor */
.ls-kpis { display: flex; flex-wrap: wrap; }
.ls-kpi { flex: 1 1 150px; }
.ls-filtros { gap: 8px; padding: 10px 16px 4px; position: relative; }
.ls-dd-rot { font-size: 12.5px; color: var(--tinta-3); margin-right: 2px; }
.ls-dd { position: relative; }
.ls-dd-bt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha-forte); background: var(--papel); border-radius: 9px; min-height: 32px; padding: 4px 11px; font-size: 13.5px; color: var(--tinta-2); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.ls-dd-bt::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
.ls-dd-bt[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.ls-dd-bt:hover, .ls-dd-bt[aria-expanded="true"] { border-color: var(--anil); color: var(--tinta); }
.ls-dd-bt.lig { background: var(--anil); border-color: var(--anil); color: var(--papel); }
.ls-dd-bt.lig b { font-weight: 600; }
.ls-dd-bt:active { transform: scale(.97); }
.ls-dd-bt:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.ls-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; width: max-content; min-width: 260px; max-width: min(340px, 86vw); max-height: 360px; overflow-y: auto; background: var(--papel); border-radius: 12px; box-shadow: var(--sombra-flut); padding: 6px; display: flex; flex-direction: column; }
.ls-menu button { display: grid; grid-template-columns: minmax(0, 1fr) 72px 36px; gap: 10px; align-items: center; border: 0; background: transparent; border-radius: 8px; padding: 7px 8px; text-align: left; cursor: pointer; font-size: 13px; color: var(--tinta-2); }
.ls-menu button:hover { background: var(--anil-hover); }
.ls-menu button:focus-visible { outline: 2px solid var(--laranja); outline-offset: -2px; }
.ls-menu button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-menu button i { height: 6px; border-radius: 3px; background: var(--barra-forte, var(--anil)); display: block; min-width: 2px; }
.ls-menu button b { text-align: right; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ls-menu button[aria-pressed="true"] { background: var(--anil); color: var(--papel); }
.ls-menu button[aria-pressed="true"] b { color: var(--papel); }
.ls-menu button[aria-pressed="true"] i { background: rgb(255 255 255 / .6); }
.ls-menu button:disabled { cursor: default; color: var(--tinta-3); }
.ls-menu .sub { padding: 6px 8px 2px; font-size: 12px; }
body[data-emp]:not([data-emp=""]) { --barra-forte: var(--marca-dado); }
@media (prefers-reduced-motion: reduce) { .ls-dd-bt { transition: none; } .ls-dd-bt:active { transform: none; } }
/* o painel cortava o que passava da borda (o menu ficaria cortado): o corte fica só na grade dos números, que tem os cantos */
.ls-painel { overflow: visible; }
.ls-kpis { border-radius: var(--raio-m) var(--raio-m) 0 0; overflow: hidden; }
.ls-menu[hidden] { display: none; }   /* o display: flex do menu passava por cima do hidden */
/* no celular o menu abre como folha no pé da janela (perto do polegar), na largura dela, em vez de passar da borda */
@media (max-width: 600px) {
  .ls-dd { position: static; }
  .ls-menu { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; min-width: 0; max-width: none; max-height: 60vh; }
  .ls-menu button { min-height: 40px; }
}

/* =====================================================================
   v87 (22/10, Rodada 41): animações que informam. Regras: só o que mudou se mexe; 150–220 ms para interface, até 800 ms para número;
   uma vez, nunca em loop fora o "carregando"; sem biblioteca; com "reduzir movimento", nada se mexe (html.sem-anim e a media query).
   ===================================================================== */
/* 1. número que conta: dígitos de largura fixa para não tremer; barras enchem na primeira pintura */
.kpi .num, .cascata .num, .ls-kpi .num, .rt-tile .val, .fluxo-kpi .fx-v { font-variant-numeric: tabular-nums; }
.prog .feito, .prog .proj, .barra-meta .feito, .ritmo-chip .mt > span { transition: width .9s cubic-bezier(.2, .7, .2, 1); }

/* 2. destaque que desliza (motion-primitives Animated Background): um elemento só, que escorrega até o item escolhido */
.seg, .mt-temas, header .abas { position: relative; }
.seg-hi, .temas-hi, .abas-hi, .atalho-hi, .subabas-hi { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 0; transition: transform .22s cubic-bezier(.2, .7, .2, 1), width .22s cubic-bezier(.2, .7, .2, 1), height .22s cubic-bezier(.2, .7, .2, 1), opacity .15s; }
.seg-hi { border-radius: 9px; background: var(--papel); box-shadow: 0 1px 3px rgb(26 32 55 / .14); }
.seg.com-hi > button { position: relative; z-index: 1; }
.seg.com-hi > button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.temas-hi { border-radius: 9px; border: 1px solid var(--anil-2); background: color-mix(in srgb, var(--anil-2) 9%, var(--papel)); box-sizing: border-box; }
.mt-temas.com-hi > button { position: relative; z-index: 1; }
.mt-temas.com-hi > button[aria-pressed="true"] { border-color: transparent; background: transparent; }
.abas-hi { border-radius: 3px 3px 0 0; background: var(--anil); z-index: 2; }
.per-atalhos { position: relative; }
.atalho-hi { border-radius: 9px; background: #E5E8EF; }
.per-atalhos.com-hi > button { position: relative; z-index: 1; }
.per-atalhos.com-hi > button[aria-pressed="true"] { background: transparent; }
.subabas { position: relative; }
.subabas-hi { border-radius: 999px; background: var(--tinta); }
.subabas.com-hi > a { position: relative; z-index: 1; }
.subabas.com-hi > a[aria-current="page"] { background: transparent; border-color: transparent; box-shadow: none; }
header .abas.com-hi a[aria-current="page"]::after { display: none; }

/* 3. esqueleto no lugar de "Carregando…" (shadcn Skeleton + motion-primitives Text Shimmer) */
.sk { display: inline-block; vertical-align: middle; border-radius: 8px; background: linear-gradient(90deg, var(--sutil-3) 25%, var(--sutil) 50%, var(--sutil-3) 75%); background-size: 200% 100%; animation: sk-brilha 1.4s linear infinite; }
@keyframes sk-brilha { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-box { text-align: left; padding: 4px 0; }
.vazio > .sk-box, .vazio.sk-box { padding: 0; }
.sk-kpis { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 4px 0 14px; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sk-chips .sk { border-radius: 999px; }
.sk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 20px; }
.sk-cols > div { display: flex; flex-direction: column; gap: 8px; background: var(--sutil-2); border-radius: 10px; padding: 10px 12px; }
.sk-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linha); }
.sk-linha:first-child { border-top: 0; }
.sk-linha > span { display: flex; flex-direction: column; gap: 6px; }
.sk-linha .sk:first-child { border-radius: 50%; }
.sk-linha.sk-tr { grid-template-columns: minmax(0, 1fr) auto auto; }
.sk-linha.sk-tr .sk:first-child { border-radius: 6px; }
.sk-txt { margin: 12px 0 0; font: 500 13.5px var(--f-txt); color: transparent; background: linear-gradient(90deg, var(--tinta-3) 0 40%, var(--tinta) 50%, var(--tinta-3) 60% 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: sk-brilha 1.6s linear infinite; }
.sk-pagina { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.sk-pagina .sk-txt { grid-column: 1 / -1; text-align: center; }
.sk-card { background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }

/* 4. a tela nova entra (motion-primitives Transition Panel): 180 ms, da direita, em vez de trocar seco */
/* 28/10 (v104): "backwards", não "both": o "both" deixava um transform no fim da animação, e todo balão "?" (position: fixed) abria
   deslocado pela posição da página, longe do botão e passando do fim da tela */
#pagina > * { animation: pagina-entra .18s ease-out backwards; }
@keyframes pagina-entra { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* 5. lista que entra em sequência (Magic UI Animated List), só na primeira pintura do card; gaveta mais rápida */
.entra { animation: lista-entra .32s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }   /* 28/10 (v104): idem */
#gaveta tr.entra { animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes lista-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 6. anel de progresso (Magic UI Circular Progress): o chip "Ritmo esperado" da Visão geral e o Farol do mês */
.anel { display: block; flex: none; overflow: visible; }
.anel .anel-trilho { fill: none; stroke: var(--sutil-3); stroke-width: 9; }
.anel .anel-feito { fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s cubic-bezier(.2, .7, .2, 1); }
.anel .anel-tick { stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; }
.anel .anel-num { font: 600 22px var(--f-num); fill: var(--tinta); text-anchor: middle; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.anel .anel-leg { font: 500 9px var(--f-txt); fill: var(--tinta-3); text-anchor: middle; }
.ritmo-chip { gap: 12px; padding: 8px 16px 8px 10px; }
.ritmo-chip .anel .anel-num { font-size: 26px; }
.kpi-anel .anel-kpi { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.kpi-anel .anel-kpi a.lk { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.kpi-anel-m .anel .anel-num { font-size: 27px; }
.kpi-anel-m .anel .anel-trilho, .kpi-anel-m .anel .anel-feito { stroke-width: 10; }
.kpi-anel .anel .anel-num { font-size: 24px; }
.kpi-anel .anel .anel-trilho, .kpi-anel .anel .anel-feito { stroke-width: 10; }
/* 26/10 (ele: "veja onde tem círculos como esse e deixe centralizado, parece que fica tudo à esquerda"): o KPI com anel vira um bloco
   centrado (título, anel e as frases embaixo). Do lado oposto ao ícone de lista entra um espaço do mesmo tamanho (5 + 17 px), para o
   anel ficar no meio de verdade sem nada sair da caixa; as linhas de rótulo e valor (.kl: "Alvo 70%", os grupos) continuam na largura
   toda, alinhadas como tabela. */
.kpi-anel:not(.kpi-conv) { text-align: center; }
.kpi-anel:not(.kpi-conv) .anel-kpi { justify-content: center; }
.kpi-anel:not(.kpi-conv) .anel-kpi a.lk:has(> .lk-ico)::before { content: ''; flex: none; width: 22px; }
.kpi-anel:not(.kpi-conv) .sub-l { align-items: center; }
.kpi-anel:not(.kpi-conv) .sub-l .sl { max-width: 100%; }
.kpi-anel:not(.kpi-conv) .sub-l .kl { align-self: stretch; text-align: left; }
/* na faixa da conversão (e no par em miniatura do cartão), cada legenda centrada embaixo do seu anel */
.cv-aneis { justify-items: center; }
.cv-cap { align-items: center; text-align: center; }
.cv-mini-leg { justify-self: center; text-align: center; }
.anel-cel { display: inline-flex; align-items: center; gap: 7px; }
.anel-cel .anel { display: inline-block; }
.anel-cel .anel .anel-trilho, .anel-cel .anel .anel-feito { stroke-width: 12; }
/* teclas visíveis na rodada guiada (shadcn Kbd) */
.mt-rod-atalhos kbd { font: 600 11px var(--f-txt); border: 1px solid var(--linha-forte); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--tinta-3); background: var(--sutil-2); margin: 0 1px; }
/* estado vazio desenhado (shadcn Empty): a bandeja e o texto centrado; só onde é texto puro (esqueleto e listas ficam como estão) */
.mk-vazio, #pagina .vazio:not(:has(*)), #gaveta .vazio:not(:has(*)) { text-align: center; max-width: 56ch; margin-inline: auto; padding: 26px 8px; line-height: 1.5; }
.mk-vazio::before, #pagina .vazio:not(:has(*))::before, #gaveta .vazio:not(:has(*))::before { content: ''; display: block; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 14px; background: var(--sutil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2.5-7h13L21 13v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M3 13h5l1.5 2.5h5L16 13h5'/%3E%3C/svg%3E") center / 22px no-repeat; }
/* 23/10: a janela de cada sinal (hoje × no período) e a nota dos filtros na Prioridades */
.pe-ref .jan { margin: 0 6px 0 0; }
.mt-hoje-temas .jan { margin-left: 2px; align-self: center; }
.jan { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font: 600 10.5px/1.5 var(--f-txt); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); background: var(--sutil-2); vertical-align: 1px; white-space: nowrap; }
.jan.hoje { color: var(--anil-2); background: var(--anil-claro); }
.mt-sinal-t b .jan { font-weight: 600; }
.mt-nota-filtro { font-size: 12.5px; color: var(--tinta-3); margin: -8px 0 12px; line-height: 1.45; }
/* filtro Vendedor com busca (shadcn Combobox) */
.combo { position: relative; display: inline-block; }
.combo-oculto { display: none !important; }
.combo-bt { background: var(--papel) var(--seta) right 10px center / 12px 8px no-repeat; border: 1px solid var(--linha-forte); border-radius: 12px; min-height: 38px; padding: 6px 30px 6px 10px; font: 500 13.5px var(--f-txt); color: var(--tinta-2); cursor: pointer; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.combo-bt:hover, .combo-bt[aria-expanded="true"] { border-color: var(--tinta-3); color: var(--tinta); }
.combo-bt.lig { border-color: var(--anil-2); color: var(--tinta); font-weight: 600; }
.combo-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; width: min(320px, calc(100vw - 28px)); background: var(--papel); border-radius: 14px; box-shadow: var(--sombra-flut); padding: 8px; }
.combo-pop[hidden] { display: none; }
.combo-pop input { width: 100%; box-sizing: border-box; border: 1px solid var(--linha-forte); border-radius: 9px; padding: 8px 10px; font: 500 13.5px var(--f-txt); color: var(--tinta); background: var(--sutil-2); margin-bottom: 6px; outline: none; }
.combo-pop input:focus { border-color: var(--anil-2); }
.combo-lista { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.combo-lista li { padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--tinta-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-lista li[aria-selected="true"] { background: var(--anil-hover, #F1F3FA); color: var(--tinta); }
.combo-lista .combo-vazio { color: var(--tinta-3); cursor: default; }

/* 7. onda no clique (Magic UI Ripple Button), só em botão que faz algo */
.btn-icone, .btn-mini, .btn-pri, .mt-rod-ini, .mk-bt { transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color .15s, border-color .15s, color .15s; }
.btn-icone:active, .btn-mini:active, .btn-pri:active, .mt-rod-ini:active, .mk-bt:active { transform: scale(.97); }   /* o botão responde ao toque */
.rip-on { position: relative; overflow: hidden; }
.rip { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); animation: rip .5s ease-out forwards; pointer-events: none; }
@keyframes rip { to { transform: scale(1); opacity: 0; } }

/* pé da gaveta: enquanto há lista embaixo, o pé esmaece (motion-primitives Progressive Blur) */
.gaveta.tem-mais::after { content: ''; position: sticky; bottom: 0; display: block; height: 76px; margin-top: -76px; background: linear-gradient(to top, var(--papel) 28%, transparent); -webkit-mask-image: linear-gradient(to top, #000 40%, transparent); mask-image: linear-gradient(to top, #000 40%, transparent); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); pointer-events: none; z-index: 3; }

/* 6b. as empresas no menu lateral: pastilha com o símbolo da marca; recolhido, um dock com ampliação leve perto do mouse.
   26/10 (v98): as seções de cima (a[data-sec]) usam a mesma pastilha, com o ícone da seção; as duas Pré-Vendas na cor da empresa
   dona e as outras em vidro (branco a 12%, sem desfoque), opção B escolhida por ele */
.lateral nav :is(a[data-emp], a[data-sec]) { gap: 11px; }
.lateral .emp-tile { --amp: 1; width: 28px; height: 28px; margin: -3px 0; border-radius: 9px; background: var(--c, #6F82E0); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); transform: scale(var(--amp)); transform-origin: left center; transition: transform .14s ease-out, box-shadow .15s; }
.lateral .emp-tile img { width: 18px; height: 18px; object-fit: contain; display: block; }
.lateral nav.dock-vivo .emp-tile { transition: box-shadow .15s; }   /* a mola do JS manda; a transição atrapalharia */
.lateral nav :is(a[data-emp], a[data-sec]):hover .emp-tile { --amp: 1.08; }
.lateral nav :is(a[data-emp], a[data-sec])[aria-current="page"] .emp-tile { box-shadow: 0 0 0 2px var(--anil), 0 0 0 4px rgb(255 255 255 / .9); }
.lateral .sec-tile { --c: rgb(255 255 255 / .12); color: #fff; }
.lateral .sec-tile svg.i { width: 16px; height: 16px; stroke-width: 2; }
.lateral nav a[data-sec="prevenda"] .sec-tile { --c: #F8A818; }   /* a cor da pastilha da Flex Energy */
.lateral nav a[data-sec="prevloc"] .sec-tile { --c: #6F82E0; }    /* a cor da pastilha da Flex Locações */
@media (prefers-reduced-motion: reduce) { .lateral .emp-tile { transition: none; } .lateral nav :is(a[data-emp], a[data-sec]):hover .emp-tile { --amp: 1; } }
.lateral nav a[data-emp="energy"] .emp-tile { --c: #F8A818; }
.lateral nav a[data-emp="tendas"] .emp-tile { --c: #6F82E0; }
.lateral nav a[data-emp="gf2"] .emp-tile { --c: #4E8BE6; }
.lateral nav a[data-emp="medicoes"] .emp-tile { --c: #7FA86C; }
.lateral nav a[data-emp="solar"] .emp-tile { --c: #F07828; }
.lateral nav a[data-emp="mec"] .emp-tile { --c: #C24A4A; }
html[data-recolhido="1"] .lateral .emp-tile { display: grid; width: 36px; height: 36px; margin: 0; border-radius: 11px; transform-origin: center; }   /* o span da pastilha fica, só o nome some */
html[data-recolhido="1"] .lateral .emp-tile img { width: 22px; height: 22px; }
html[data-recolhido="1"] .lateral .sec-tile svg.i { width: 19px; height: 19px; }
html[data-recolhido="1"] .lateral nav :is(a[data-emp], a[data-sec]) { padding: 5px 0; min-height: 46px; overflow: visible; }
html[data-recolhido="1"] .lateral nav :is(a[data-emp], a[data-sec]):hover { background: transparent; }
html[data-recolhido="1"] .lateral nav :is(a[data-emp], a[data-sec])[aria-current="page"] { background: transparent; box-shadow: none; }
html[data-recolhido="1"] .lateral nav :is(a[data-emp], a[data-sec])[aria-current="page"] .emp-tile { box-shadow: 0 0 0 2px var(--anil), 0 0 0 4px var(--laranja); }
/* 27/10 (v99, pedido dele: "quando expandimos, ele diminui de tamanho e quero que mantenha o mesmo tamanho, fica mais harmônico"):
   aberto pelo botão, a pastilha fica com os 36 px do recolhido, no mesmo lugar (14 + 6 = x 20, como recolhido), e a linha com 46 px */
html[data-recolhido="0"] .lateral .emp-tile { width: 36px; height: 36px; margin: 0; border-radius: 11px; }
html[data-recolhido="0"] .lateral .emp-tile img { width: 22px; height: 22px; }
html[data-recolhido="0"] .lateral .sec-tile svg.i { width: 19px; height: 19px; }
html[data-recolhido="0"] .lateral nav :is(a[data-emp], a[data-sec]) { min-height: 46px; padding: 5px 12px 5px 6px; gap: 12px; }

/* 8. busca com teclado (shadcn Command): botão no topo e a caixa */
.topo .btn-icone#btn-busca { white-space: nowrap; }
.topo .btn-icone#btn-busca kbd { font: 600 11px var(--f-txt); border: 1px solid var(--linha-forte); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--tinta-3); background: var(--sutil-2); margin-left: 2px; white-space: nowrap; }
@media (max-width: 1100px) { .topo .btn-icone#btn-busca kbd { display: none; } }
.busca-fundo { position: fixed; inset: 0; z-index: 80; background: rgb(20 24 43 / .38); display: flex; align-items: flex-start; justify-content: center; padding: min(14vh, 120px) 16px 16px; }
.busca-fundo[hidden] { display: none; }
.busca-caixa { width: min(560px, 100%); background: var(--papel); border-radius: var(--raio-m); box-shadow: var(--sombra-flut); overflow: hidden; }   /* abre por atalho de teclado, dezenas de vezes por dia: sem animação */
.busca-in { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--linha); }
.busca-in svg.i { width: 18px; height: 18px; fill: none; stroke: var(--tinta-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.busca-in input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 0; font: 500 15px var(--f-txt); color: var(--tinta); outline: none; }
.busca-in kbd, .busca-pe kbd { font: 600 11px var(--f-txt); border: 1px solid var(--linha-forte); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; color: var(--tinta-3); background: var(--sutil-2); }
#busca-lista { list-style: none; margin: 0; padding: 6px; max-height: min(46vh, 420px); overflow: auto; }
#busca-lista li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 14px; color: var(--tinta-2); cursor: pointer; }
#busca-lista li[aria-selected="true"] { background: var(--anil-hover, #F1F3FA); color: var(--tinta); }
#busca-lista .busca-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--tinta); }
#busca-lista .busca-s { font-weight: 400; color: var(--tinta-3); margin-left: 6px; }
#busca-lista .busca-tipo { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); flex: none; }
#busca-lista .busca-vazio { color: var(--tinta-3); cursor: default; padding: 16px 10px; }
.busca-pe { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px; border-top: 1px solid var(--linha); font-size: 12px; color: var(--tinta-3); }
.busca-pe span { display: inline-flex; align-items: center; gap: 4px; }
body.com-busca { overflow: hidden; }

/* reduzir movimento: nada se mexe */
html.sem-anim .prog .feito, html.sem-anim .prog .proj, html.sem-anim .barra-meta .feito, html.sem-anim .ritmo-chip .mt > span, html.sem-anim .seg-hi, html.sem-anim .temas-hi, html.sem-anim .abas-hi, html.sem-anim .atalho-hi, html.sem-anim .subabas-hi, html.sem-anim .anel .anel-feito, html.sem-anim .lateral .emp-tile { transition: none; }
html.sem-anim .sk, html.sem-anim .sk-txt, html.sem-anim #pagina > *, html.sem-anim .entra, html.sem-anim .rip, html.sem-anim .busca-caixa { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .prog .feito, .prog .proj, .barra-meta .feito, .ritmo-chip .mt > span, .seg-hi, .temas-hi, .abas-hi, .atalho-hi, .subabas-hi, .anel .anel-feito, .lateral .emp-tile { transition: none; }
  .sk, .sk-txt, #pagina > *, .entra, .rip, .busca-caixa { animation: none; }
  .sk-txt { color: var(--tinta-3); background: none; }
}

/* =====================================================================
   v87, parte 2 (22/10, Rodada 41): tema escuro, pedido dele junto com o botão "quadrado" (Magic UI Animated Theme Toggler).
   Anil escuro, não preto: o chão é um anil quase preto, os cards um anil mais claro; as cores das empresas, dos selos e dos
   gráficos ganham versões para fundo escuro. O botão "Escuro" no topo troca o tema com o quadrado abrindo a partir dele
   (View Transitions API; sem a API, troca seco). A escolha fica no navegador (hubv-tema). Impressão sai sempre em claro.
   ===================================================================== */
html[data-tema="escuro"] {
  --anel-ref: #5F6A92;
  color-scheme: dark;
  --fundo: #0F1324; --fundo-2: #141A2E; --papel: #1A2036; --linha: #2A3150; --linha-forte: #3B4468;
  --tinta: #ECEFF8; --tinta-2: #C9CFE4; --tinta-3: #9AA3C5; --neutro: #8A93B5; --cinza-estado: #8A93B5;
  --sutil: #232B47; --sutil-2: #1F2640; --sutil-3: #2C3556;
  --anil: #1B2142; --anil-2: #5563B8; --anil-forte: #2F3869; --anil-claro: #242C4D; --anil-hover: #242C4D; --link-cor: #9DB4F7; --balao: #2F3869;
  --sombra: 0 1px 2px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .32);
  --sombra-h: 0 2px 6px rgb(0 0 0 / .4), 0 22px 48px rgb(0 0 0 / .5);
  --sombra-flut: 0 0 0 1px rgb(255 255 255 / .08), 0 16px 40px rgb(0 0 0 / .6);
  --bom: #5ED48A; --bom-suave: #16331F; --atencao: #F0B35B; --atencao-bola: #E09A3A; --atencao-suave: #3A2A12; --ruim: #F38B86; --ruim-suave: #3B1C1C;
  --faixa-energy: #E0A030; --faixa-tendas: #7E8FE6; --faixa-gf2: #6A9BEC; --faixa-medicoes: #83B46B; --faixa-solar: #F08A48; --faixa-mec: #D06B6B;
  --suave-energy: #3A2D10; --suave-tendas: #1F2748; --suave-gf2: #1B2A48; --suave-medicoes: #1F2E1A; --suave-solar: #3A2314; --suave-mec: #341818;
  --tinta-energy: #F2B14A; --tinta-tendas: #8E9FF0; --tinta-gf2: #7FA9F0; --tinta-medicoes: #9DC487; --tinta-solar: #F6A06A; --tinta-mec: #E07A7A;
  --dado-energy: #E0A030; --dado-tendas: #7E8FE6; --dado-gf2: #6A9BEC; --dado-medicoes: #83B46B; --dado-solar: #F08A48; --dado-mec: #D06B6B;
  --barra-t: color-mix(in srgb, var(--anil-2) 30%, var(--papel));
}
html[data-tema="escuro"] body[data-emp="energy"] { --marca-tinta: #F2B14A; --marca-dado: #E0A030; --marca-suave: #3A2D10; }
html[data-tema="escuro"] body[data-emp="tendas"] { --marca-tinta: #8E9FF0; --marca-dado: #7E8FE6; --marca-suave: #1F2748; }
html[data-tema="escuro"] body[data-emp="gf2"] { --marca-tinta: #7FA9F0; --marca-dado: #6A9BEC; --marca-suave: #1B2A48; }
html[data-tema="escuro"] body[data-emp="medicoes"] { --marca-tinta: #9DC487; --marca-dado: #83B46B; --marca-suave: #1F2E1A; }
html[data-tema="escuro"] body[data-emp="solar"] { --marca-tinta: #F6A06A; --marca-dado: #F08A48; --marca-suave: #3A2314; }
html[data-tema="escuro"] body[data-emp="mec"] { --marca-tinta: #E07A7A; --marca-dado: #D06B6B; --marca-suave: #341818; }
html[data-tema="escuro"] body[data-emp]:not([data-emp=""]) { --barra-t: color-mix(in srgb, var(--marca-dado) 30%, var(--papel)); }
/* o que no claro estava em cor fixa */
html[data-tema="escuro"] .periodo { background: rgb(15 19 36 / .86); }
html[data-tema="escuro"] .seg, html[data-tema="escuro"] .per-atalhos button[aria-pressed="true"] { background: var(--sutil-2); }
html[data-tema="escuro"] .seg button[aria-pressed="true"], html[data-tema="escuro"] .seg-hi, html[data-tema="escuro"] .atalho-hi { background: #3A4470; color: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .4); }
html[data-tema="escuro"] .seg.com-hi > button[aria-pressed="true"] { background: transparent; box-shadow: none; }
html[data-tema="escuro"] .toggle input[type="checkbox"] { background: #3B4468; }
html[data-tema="escuro"] .toggle input[type="checkbox"]:checked { background: var(--anil-2); }
html[data-tema="escuro"] .cel-rod.neutro { background: var(--sutil-3); }
html[data-tema="escuro"] .bloco[data-ico]::before { --ico-bg: rgb(255 255 255 / .09); filter: brightness(1.9) saturate(.85); }
html[data-tema="escuro"] .xl-calc tbody tr:nth-child(even) td { background: var(--sutil-2); }
html[data-tema="escuro"] .xl-calc td.xl-falta { background: #3B1C1C !important; }
html[data-tema="escuro"] .sin-farol, html[data-tema="escuro"] .mt-chip.at, html[data-tema="escuro"] .mk-bt.alerta { background: var(--ruim-suave); color: var(--ruim); border-color: #6B2F2A; }
html[data-tema="escuro"] .mt-chip.at.g1 { background: transparent; box-shadow: inset 0 0 0 1px #6B2F2A; }
html[data-tema="escuro"] .mt-chip.ac { background: var(--bom-suave); color: var(--bom); }
html[data-tema="escuro"] .mt-tag i.at, html[data-tema="escuro"] .mt-mudou-g.at > b i, html[data-tema="escuro"] .mt-topo .kpi .num.ruim, html[data-tema="escuro"] .mt-neg .mt-neg-p b, html[data-tema="escuro"] .mt-pior b, html[data-tema="escuro"] .mt-hoje-sinal b, html[data-tema="escuro"] .mk-erro { color: var(--ruim); }
html[data-tema="escuro"] .mt-tag i.ac, html[data-tema="escuro"] .mt-mudou-g.ac > b i, html[data-tema="escuro"] .mt-topo .kpi .num.bom { color: var(--bom); }
html[data-tema="escuro"] .sin-l.mk-sem { background: color-mix(in srgb, var(--ruim-suave) 60%, var(--papel)); }
html[data-tema="escuro"] .sin-l.mk-sem:hover, html[data-tema="escuro"] .sin-l.mk-sem:focus-visible { background: var(--ruim-suave); }
html[data-tema="escuro"] .selo.usr-admin { background: var(--sutil-3); color: #B7C2F5; }
html[data-tema="escuro"] .selo.papel-sdr { background: #2E2446; color: #C9B8F0; }
html[data-tema="escuro"] .selo.papel-comercial { background: #1B2A48; color: #9DB4F7; }
html[data-tema="escuro"] .lg-clara { background: #4A5272; } html[data-tema="escuro"] .lg-faixa { background: #3B4468; }
html[data-tema="escuro"] .cartao .abrir, html[data-tema="escuro"] a.lk:hover, html[data-tema="escuro"] a.lk:focus-visible, html[data-tema="escuro"] a.sf, html[data-tema="escuro"] table.t td.nome a.sf, html[data-tema="escuro"] table.t td.nome a:hover { color: var(--link-cor); }
html[data-tema="escuro"] a.sf:hover, html[data-tema="escuro"] a.sf:focus-visible { background: #1B2A48; }
html[data-tema="escuro"] .mk-toast, html[data-tema="escuro"] .ajuda-bal, html[data-tema="escuro"] .xl-calc thead th { background: var(--anil-forte); }
html[data-tema="escuro"] .delta.alto.leve { color: #7CC093; } html[data-tema="escuro"] .delta.baixo.leve { color: #E58A98; }
html[data-tema="escuro"] .topo .btn-icone#btn-busca kbd, html[data-tema="escuro"] .busca-in kbd, html[data-tema="escuro"] .busca-pe kbd { background: var(--sutil-3); border-color: var(--linha-forte); }
html[data-tema="escuro"] .busca-fundo { background: rgb(0 0 0 / .55); }
html[data-tema="escuro"] .sk { background: linear-gradient(90deg, var(--sutil-3) 25%, #3A4470 50%, var(--sutil-3) 75%); background-size: 200% 100%; }
html[data-tema="escuro"] .topo .btn-icone#btn-tema[aria-pressed="true"] { background: var(--anil-forte); border-color: var(--anil-forte); color: #fff; }
html[data-tema="escuro"] .lateral { box-shadow: inset -1px 0 0 rgb(255 255 255 / .06); }
html[data-tema="escuro"] .subabas a[aria-current="page"], html[data-tema="escuro"] .subabas-hi { background: var(--anil-2); border-color: var(--anil-2); }
html[data-tema="escuro"] .subabas.com-hi > a[aria-current="page"] { background: transparent; border-color: transparent; }
html[data-tema="escuro"] .mt-rod-atalhos kbd { background: var(--sutil-3); }
html[data-tema="escuro"] .jan { background: var(--sutil-3); }
html[data-tema="escuro"] .jan.hoje { color: #B7C2F5; background: var(--anil-claro); }
html[data-tema="escuro"] .mk-vazio::before, html[data-tema="escuro"] #pagina .vazio:not(:has(*))::before, html[data-tema="escuro"] #gaveta .vazio:not(:has(*))::before { filter: brightness(1.8); }
/* a troca com o quadrado abrindo a partir do botão (View Transitions API) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }

/* 23/10 (Rodada 43): no cartão da Visão geral, a conversão em destaque e, numa linha própria embaixo, a taxa de ganho do período */
.cartao-kpis .ck-s .ck-tx { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--linha); color: var(--tinta-3); }
.cartao-kpis .ck-s .ck-tx b { color: var(--tinta-2); font-weight: 600; }

/* 26/10 (v94): o "O mês fecha?" deixou de ser card e virou o detalhe no pé do Farol (fechado por padrão; o navegador lembra) */
.fecha-det { margin-top: 20px; border-top: 1px solid var(--linha); }
.fecha-det > summary { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; padding: 14px 44px 4px 0; position: relative; cursor: pointer; border-radius: var(--raio-p); }
.fecha-det > summary::-webkit-details-marker { display: none; }
.fecha-det > summary:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 4px; }
.fd-tit { font: 700 15px/1.3 var(--f-num); color: var(--tinta); }
.fd-sub { font-size: 13.5px; color: var(--tinta-3); }
.fd-seta { position: absolute; right: 0; top: 50%; margin-top: -11px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--tinta-3); transition: background-color .15s, color .15s; }
.fd-seta::before { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.fecha-det[open] .fd-seta::before { transform: translateY(2px) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .fecha-det > summary:hover .fd-tit { color: var(--anil-2); } .fecha-det > summary:hover .fd-seta { background: var(--sutil); color: var(--tinta); } }
.fd-corpo { padding-top: 12px; }
.fecha-det[open] .fd-corpo { animation: fd-entra .2s cubic-bezier(.23, 1, .32, 1); }
@keyframes fd-entra { from { opacity: 0; transform: translateY(-4px); } }
@keyframes fd-surge { from { opacity: 0; } }
.fd-nota { margin: 0 0 14px; max-width: 90ch; font-size: 13px; line-height: 1.5; color: var(--tinta-3); }
.fecha-det.card-destaque { outline-offset: 8px; border-radius: var(--raio-p); }
html.sem-anim .fecha-det[open] .fd-corpo, html.sem-anim .fd-seta::before { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .fecha-det[open] .fd-corpo { animation: fd-surge .15s ease; } .fd-seta, .fd-seta::before { transition: none; } }
/* 26/10 (v94, IHC 3 e 12): seta em tinta quando não há sinal (só a direção e o tamanho); o vermelho da Visão geral fica para o selo,
   o elo que mais caiu e o dono inativo. Sinal "sem meta" em cinza (é um convite, não um alarme) */
.seta-t { color: var(--tinta-2); font-weight: 600; }
table.cadeia-t td small.seta-t { color: var(--tinta-2); font-weight: 600; }
.sinal.neutro { color: var(--tinta-2); background: var(--sutil); }
html[data-tema="escuro"] .sinal.neutro { background: var(--sutil-3); }/* a legenda do Farol: o vendido tem a cor do selo (verde, laranja, vermelho; cinza sem semáforo), a projeção é a mesma cor mais clara */
.leg-farol .k-feito.k-estado { width: 24px; background: linear-gradient(90deg, var(--bom) 0 33.3%, var(--atencao-bola) 33.3% 66.6%, var(--ruim) 66.6%); }
.leg-farol .k-proj { width: 24px; background: linear-gradient(90deg, var(--bom) 0 33.3%, var(--atencao-bola) 33.3% 66.6%, var(--ruim) 66.6%); opacity: .3; }
/* 26/10 (v95, IHC 11): os menus Exibir e "⋯" do topo; os itens de liga e desliga com a caixinha marcada */
.topo .acao-menu { position: relative; display: flex; }
.topo .menu-acao { position: absolute; top: calc(100% + 8px); right: 0; z-index: 35; width: 280px; display: grid; gap: 2px; background: var(--papel); border-radius: var(--raio-m); padding: 6px; box-shadow: var(--sombra-flut); transform-origin: top right; }
.topo .menu-acao[hidden] { display: none; }
.topo .menu-acao:not([hidden]) { animation: menu-acao-entra .16s cubic-bezier(.23, 1, .32, 1); }
@keyframes menu-acao-entra { from { opacity: 0; transform: scale(.97) translateY(-2px); } }
.menu-acao-i { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.menu-acao-i:hover, .menu-acao-i:focus-visible { background: var(--sutil); outline: none; }
.menu-acao-i:focus-visible { box-shadow: inset 0 0 0 2px var(--anil-2); }
.menu-acao-i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--tinta-2); }
.menu-acao-i b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.menu-acao-i small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--tinta-3); }
.menu-acao-v { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--linha-forte); }
.menu-acao-i[aria-checked="true"] .menu-acao-v { background: var(--anil-2); box-shadow: none; }
.menu-acao-i[aria-checked="true"] .menu-acao-v::after { content: ''; display: block; width: 4px; height: 8px; margin: 2px 0 0 5.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.topo .btn-icone[aria-expanded="true"] { border-color: var(--tinta-3); color: var(--tinta); background: var(--sutil-2); }
html.sem-anim .topo .menu-acao:not([hidden]) { animation: none; }
@media (prefers-reduced-motion: reduce) { .topo .menu-acao:not([hidden]) { animation: none; } }
@media (max-width: 640px) { .topo .menu-acao { width: min(280px, calc(100vw - 24px)); } }

/* 26/10 (v95, IHC 9): na tabela Todo o time, cor cheia só no mais grave; o grave é o número com um ponto vermelho; o leve, só o número */
#sin-time .mt-chip.at.g2 { gap: 5px; background: transparent; box-shadow: none; color: var(--tinta); }
#sin-time .mt-chip.at.g2::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #B42318; }
#sin-time .mt-chip.at.g1 { background: transparent; box-shadow: none; color: var(--tinta-2); font-weight: 600; }
html[data-tema="escuro"] #sin-time .mt-chip.at.g2::before { background: var(--ruim); }
.mt-legenda.mt-legenda-topo { margin: 0 0 10px; }
.mt-legenda .lg-chip { min-width: 24px; height: 20px; padding: 0 6px; font-size: 12px; border-radius: 6px; }
.mt-legenda .lg-nota b { font-weight: 800; color: var(--tinta-2); }

/* 26/10 (v95, IHC 9): no detalhe dos sinais, o nome, a régua e o valor saem inteiros (quebram linha) no lugar do "…" */
.mt-det .sin-l .pe-p, .mt-det .sin-l .pe-ref, .mt-det .sin-l .pe-v { white-space: normal; overflow: visible; text-overflow: clip; display: block; -webkit-line-clamp: unset; line-clamp: none; }
.mt-det .sin-l .pe-v { text-align: right; }
@media (max-width: 640px) { .mt-det .sin-l .pe-v { text-align: left; } }

/* 27/10 (v99, no notebook dele, tela de ≈690 px de altura): o menu é uma coluna da altura da tela e o navegador espremia o bloco
   do logo para caber; recolhido, o botão caía 13 px em cima da primeira pastilha. Nada no menu encolhe mais (o que não couber rola)
   e, em tela baixa, as linhas ficam mais juntas (a pastilha continua com 36 px; o espaço entre elas vai de 10 para 9 px, o bastante
   para o dock não encostar uma na outra) e o pé do menu mais curto, para o menu recolhido caber inteiro sem rolar */
.lateral > * { flex-shrink: 0; }
@media (max-height: 800px) {
  html[data-recolhido] .lateral { padding-bottom: 12px; }
  html[data-recolhido="1"] .lateral .marca { padding-bottom: 6px; }
  html[data-recolhido] .lateral nav :is(a[data-emp], a[data-sec]) { min-height: 43px; padding-top: 3.5px; padding-bottom: 3.5px; }
}

/* ---------- 27/10 (v100): o menu lateral com o mesmo arranjo recolhido e aberto (da maquete do topo, Rodada 54) ----------
   Pedidos dele: "a animação de volta da seção lateral não é fluida e parece que os cards sobem um pouco quando expande" e, depois,
   "acho melhor voltar a empurrar a página". O menu fica sempre com data-recolhido="1" e 248 px; um recorte (clip-path) deixa à vista
   só a largura da coluna. Aberto é data-sobre="1": o recorte abre e a largura da coluna (--lat) anda de 76 para 248 px com a mesma
   curva e o mesmo tempo, então a borda do menu e o começo da página andam colados, e pastilhas, botão e linhas não saem do lugar;
   o logo troca do símbolo para o completo e os nomes aparecem por esmaecimento. */
@property --lat { syntax: '<length>'; inherits: true; initial-value: 248px; }
html[data-recolhido="1"] { transition: --lat .3s cubic-bezier(.32, .72, 0, 1); }
html[data-sobre="1"] { --lat: 248px; }
html[data-recolhido="1"] .app { transition: none; }   /* quem anda é a --lat; a transição própria da grade atrasaria a página */
html[data-recolhido="1"] .lateral { width: 248px; padding-left: 14px; padding-right: 14px; clip-path: inset(0 calc(100% - 76px) 0 0); transition: clip-path .3s cubic-bezier(.32, .72, 0, 1); }
html[data-sobre="1"] .lateral { clip-path: inset(0 0 0 0); }
html[data-recolhido="1"] .lateral .marca { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; padding: 2px 0 14px 6px; min-height: 0; }
html[data-recolhido="1"] .lateral .marca a { position: relative; width: 180px; height: 30px; }
html[data-recolhido="1"] .lateral .marca .logo-simbolo, html[data-recolhido="1"] .lateral .marca .logo-cheio { display: block; position: absolute; left: 0; top: 0; height: 30px; transition: opacity .18s ease; }
html[data-recolhido="1"] .lateral .marca .logo-cheio { opacity: 0; }
html[data-sobre="1"] .lateral .marca .logo-cheio { opacity: 1; }
html[data-sobre="1"] .lateral .marca .logo-simbolo { opacity: 0; }
html[data-sobre="1"] .lateral .recolher svg { transform: none; }
html[data-recolhido="1"] .lateral nav :is(a[data-emp], a[data-sec]) { justify-content: flex-start; padding: 5px 12px 5px 6px; gap: 12px; transition: background-color .15s; }
html[data-recolhido="1"] .lateral nav a > span:not(.emp-tile) { display: inline; white-space: nowrap; opacity: 0; transition: opacity .12s ease; }
html[data-sobre="1"] .lateral nav a > span:not(.emp-tile) { opacity: 1; transition: opacity .2s ease .06s; }
html[data-recolhido="1"] .lateral .grupo { position: relative; font-size: 11px; margin: 0; padding: 18px 12px 6px; border-top: 0; color: transparent; transition: color .15s; }
html[data-recolhido="1"] .lateral .grupo::before { content: ""; position: absolute; left: 8px; width: 32px; top: 25px; border-top: 1px solid rgb(255 255 255 / .12); transition: opacity .15s; }
html[data-sobre="1"] .lateral .grupo { color: #8F98BD; }
html[data-sobre="1"] .lateral .grupo::before { opacity: 0; }
html[data-recolhido="1"] .lateral .rodape-lat { display: block; opacity: 0; transition: opacity .15s; }
html[data-sobre="1"] .lateral .rodape-lat { opacity: 1; }
html[data-sobre="1"] .lateral nav :is(a[data-emp], a[data-sec]):hover { background: rgb(255 255 255 / .07); }
html[data-sobre="1"] .lateral nav :is(a[data-emp], a[data-sec])[aria-current="page"] { background: rgb(255 255 255 / .12); }
/* em tela baixa (o notebook dele, ≈690 px de altura), o mesmo da v99, agora para o arranjo novo: linhas mais juntas, o traço de
   "Empresas" e o pé mais curtos e sem o rodapé, para o menu caber inteiro sem rolar a partir de ≈686 px */
@media (max-height: 800px) {
  html[data-recolhido="1"] .lateral { padding-bottom: 12px; }
  html[data-recolhido="1"] .lateral .marca { padding-bottom: 6px; }
  html[data-recolhido="1"] .lateral nav :is(a[data-emp], a[data-sec]) { min-height: 43px; padding-top: 3.5px; padding-bottom: 3.5px; }
  html[data-recolhido="1"] .lateral .grupo { padding-top: 8px; }
  html[data-recolhido="1"] .lateral .grupo::before { top: 15px; }
  html[data-recolhido="1"] .lateral .rodape-lat { display: none; }
}

/* ---------- 27/10 (v100, caminho E, escolha dele: "estamos indo da opção E, moldura anil com a ilha que você simulou") ----------
   No computador o topo vira a faixa anil do menu (um L com ele): a pastilha da empresa com o nome, as abas como as pastilhas dos
   cards (36 px, canto de 11 px; no mouse a pastilha cresce até o nome e empurra as vizinhas, com a curva e o tempo do menu), a busca
   e as ações em vidro (tela cheia, Exportar, Exibir e o "⋯" com Metas, Glossário e Sair). Embaixo, os filtros num painel branco de
   canto redondo, com o selo da idade do dado na ponta. A faixa inteira e o painel ficam presos ao rolar. No celular, o topo de antes. */
:root { --seta-clara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23CDD3EA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.topo .pz-emp, .topo .emp-nome, .topo .seta-v, .topo .pz-sec, header .abas .aba-ico, .fresco-per { display: none; }
.sentinela-topo { height: 1px; margin-bottom: -1px; pointer-events: none; }
a.menu-acao-i { text-decoration: none; color: var(--tinta); }
.menu-acao-nota { margin: 4px 10px 6px; font-size: 12px; color: var(--tinta-3); }
/* tela cheia: os dois ícones no mesmo lugar; o que não vale esmaece e encolhe um pouco (troca de ícone, não some de repente) */
.tl-tela { position: relative; }
.tl-tela svg { position: absolute; inset: 0; width: 18px; height: 18px; margin: auto; transition: opacity .15s ease, transform .15s ease; }
.tl-tela svg:last-child, .tl-tela[aria-pressed="true"] svg:first-child { opacity: 0; transform: scale(.6); }
.tl-tela[aria-pressed="true"] svg:last-child { opacity: 1; transform: none; }
@media (min-width: 768px) {
  header.topo { position: sticky; top: 0; z-index: 22; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 14px 0 12px; background: var(--anil); color: #fff; border: 0; container: topo / inline-size; }
  header.topo::after { display: none; }
  .topo-in { display: contents; }
  .topo .logo-mob-a, .topo .voltar { display: none; }
  .topo .troca, .topo .titulo-topo { order: 1; flex: none; }
  header .abas { order: 2; }
  .topo .espaco { order: 2; flex: 1; }
  body:not([data-emp=""]) .topo .espaco { display: none; }
  .topo .frescor { order: 3; display: none; }
  /* nas telas sem empresa a faixa tem espaço e o selo fica nela; sem a barra de filtros (Metas), também */
  body[data-emp=""] .topo .frescor, body:has(.periodo[hidden]) .topo .frescor { display: flex; }
  body[data-emp=""] .fresco-per { display: none; }
  .topo .frescor .chip-fonte { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .12); color: #CDD3EA; }
  .topo .acoes { order: 4; flex: none; display: flex; align-items: center; gap: 8px; }

  /* a empresa: a pastilha dela (a do menu) com o nome e a seta; a troca abre a lista de empresas, como antes */
  .topo .troca > button { display: flex; align-items: center; gap: 0; height: 46px; min-height: 46px; padding: 0 8px 0 5px; border: 0; border-radius: 13px; background: none; color: #fff; font: 600 16px var(--f-txt); white-space: nowrap; transition: background-color .15s; }
  .topo .troca > button:hover, .topo .troca.aberto > button { background: rgb(255 255 255 / .07); }
  .topo .troca .logo-emp, .topo .troca .troca-seta { display: none; }
  .topo .pz-emp { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--c, #6F82E0); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
  .topo .pz-emp img { width: 22px; height: 22px; object-fit: contain; display: block; }
  .topo .pz-emp[data-emp="energy"] { --c: #F8A818; }
  .topo .pz-emp[data-emp="tendas"] { --c: #6F82E0; }
  .topo .pz-emp[data-emp="gf2"] { --c: #4E8BE6; }
  .topo .pz-emp[data-emp="medicoes"] { --c: #7FA86C; }
  .topo .pz-emp[data-emp="solar"] { --c: #F07828; }
  .topo .pz-emp[data-emp="mec"] { --c: #C24A4A; }
  .topo .emp-nome { display: inline-block; max-width: 170px; margin-left: 10px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; transition: max-width .3s cubic-bezier(.32, .72, 0, 1), margin-left .3s cubic-bezier(.32, .72, 0, 1), opacity .2s ease .06s; }
  .topo .seta-v { display: block; width: 16px; height: 16px; margin-left: 10px; flex: none; fill: none; stroke: #AEB6D6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: width .3s cubic-bezier(.32, .72, 0, 1), margin-left .3s cubic-bezier(.32, .72, 0, 1), opacity .2s ease .06s; }
  /* faixa estreita (como a 1366 px com o menu aberto): o nome e a seta recolhem e fica a pastilha. Recolhem com a curva do menu,
     porque é ele que estreita a faixa no meio da abertura: um sumiço seco faria as abas pularem para a esquerda */
  @container topo (max-width: 1180px) {
    .topo .emp-nome { max-width: 0; margin-left: 0; opacity: 0; transition: max-width .3s cubic-bezier(.32, .72, 0, 1), margin-left .3s cubic-bezier(.32, .72, 0, 1), opacity .12s ease; }
    .topo .seta-v { width: 0; margin-left: 0; opacity: 0; transition: width .3s cubic-bezier(.32, .72, 0, 1), margin-left .3s cubic-bezier(.32, .72, 0, 1), opacity .12s ease; }
  }
  /* as telas sem empresa (Visão geral, Leads, Pré-Vendas, Tráfego pago, Metas): a pastilha da seção, como no menu, e o nome */
  .topo .titulo-topo { display: flex; align-items: center; gap: 10px; padding-left: 5px; color: #fff; font: 600 16px var(--f-txt); white-space: nowrap; }
  .topo .titulo-topo span { color: #AEB6D6; font-weight: 400; }
  .topo .pz-sec { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); color: #fff; font-style: normal; }
  .topo .pz-sec[data-sec="prevenda"] { background: #F8A818; }
  .topo .pz-sec[data-sec="prevloc"] { background: #6F82E0; }
  .topo .pz-sec svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* as abas: a pastilha do card (o fundo vai junto até o nome); a aberta fica com o nome e o anel laranja da página aberta no menu */
  header .abas { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: 64px; max-width: none; margin: 0; padding: 0 0 0 6px; border: 0; overflow: visible; background: none; }
  header .abas .abas-hi { display: none; }
  header .abas a.aba-pz { position: relative; display: flex; align-items: center; width: 36px; height: 36px; min-height: 0; flex: none; padding: 0; border: 0; border-radius: 11px; overflow: hidden; background: var(--ico-bg); text-decoration: none; outline: none; transition: width .3s cubic-bezier(.32, .72, 0, 1); }
  header .abas a.aba-pz[hidden] { display: none; }   /* a que foi para o "Mais" */
  header .abas a.aba-pz::after { display: none; }
  header .abas .aba-pil { display: inline-flex; align-items: center; flex: none; height: 36px; white-space: nowrap; }
  header .abas .aba-ico { display: block; width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--ico) center / 18px no-repeat; }
  header .abas .aba-nome { padding: 0 13px 0 3px; font: 600 14px var(--f-txt); color: #14182B; opacity: 0; transition: opacity .12s ease; }   /* o fundo da pastilha é claro nos dois temas: o nome fica escuro também no escuro */
  header .abas a.aba-pz.aberta .aba-nome { opacity: 1; transition: opacity .2s ease .06s; }
  header .abas a.aba-pz:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  header .abas a.aba-pz[aria-current="page"] { box-shadow: 0 0 0 2px var(--anil), 0 0 0 4px var(--laranja); }
  .sem-trans-abas a.aba-pz, .sem-trans-abas .aba-nome { transition: none !important; }
  /* o "Mais", quando nem as pastilhas cabem (tela estreita): vidro na faixa, a lista com a pastilha e o nome */
  header .abas .aba-mais { flex: none; }
  header .abas .aba-mais-bt { height: 36px; min-height: 36px; padding: 0 30px 0 12px; border-radius: 11px; background: rgb(255 255 255 / .10) var(--seta-clara) no-repeat right 11px center; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); color: #fff; font: 600 13.5px var(--f-txt); }
  header .abas .aba-mais-bt:hover, header .abas .aba-mais-bt[aria-expanded="true"] { background-color: rgb(255 255 255 / .17); color: #fff; }
  header .abas .aba-mais-menu a.aba-pz { width: auto; height: auto; min-height: 40px; overflow: visible; padding: 4px 8px 4px 4px; border-radius: 9px; background: none; box-shadow: none; }
  header .abas .aba-mais-menu a.aba-pz:hover { background: var(--sutil); }
  header .abas .aba-mais-menu .aba-pil { height: 32px; }
  header .abas .aba-mais-menu .aba-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--ico-bg) var(--ico) center / 16px no-repeat; }
  header .abas .aba-mais-menu .aba-nome { opacity: 1; padding: 0 4px 0 10px; font-weight: 500; color: var(--tinta-2); }

  /* a busca e as ações em vidro, como as pastilhas do menu */
  .topo .btn-icone#btn-busca { height: 38px; min-height: 38px; padding: 0 8px 0 12px; gap: 10px; border: 0; border-radius: 11px; background: rgb(255 255 255 / .08); color: #AEB6D6; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10); font: 400 14px var(--f-txt); }
  .topo .btn-icone#btn-busca:hover { background: rgb(255 255 255 / .12); color: #fff; border: 0; }
  .topo .btn-icone#btn-busca kbd { color: #CDD3EA; background: rgb(255 255 255 / .10); border-color: transparent; }
  /* faixa mais estreita: primeiro sai o "Ctrl K", depois o "Buscar" (fica a lupa em vidro), para as 14 abas da Energy caberem */
  @container topo (max-width: 1400px) { .topo .btn-icone#btn-busca kbd { display: none; } }
  @container topo (max-width: 1180px) { .topo .btn-icone#btn-busca { width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; } .topo .btn-icone#btn-busca .rot-bt { display: none; } }
  .topo .acoes .btn-icone:not(#btn-busca) { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; border: 0; border-radius: 11px; background: rgb(255 255 255 / .10); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); transition: background-color .15s, transform .14s ease-out; }
  .topo .acoes .btn-icone:not(#btn-busca):hover, .topo .acoes .btn-icone[aria-expanded="true"] { background: rgb(255 255 255 / .18); color: #fff; border: 0; }
  .topo .acoes .btn-icone:not(#btn-busca):active { transform: scale(.96); }
  .topo .acoes .btn-icone:not(#btn-busca) .rot-bt { display: none; }
  .topo .acoes .btn-icone svg { width: 18px; height: 18px; }

  /* os filtros num painel branco de canto redondo, encaixado na faixa anil; o selo da idade do dado na ponta */
  .periodo { isolation: isolate; background: var(--anil); container: per / inline-size; }
  .periodo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--papel); border-top-left-radius: 20px; }
  .fresco-per { display: flex; margin-left: auto; flex: none; }
  .fresco-per:empty, .fresco-per:has(> .frescor:empty) { display: none; }
  .fresco-per .fresco-rot { display: inline-block; max-width: 240px; overflow: hidden; white-space: nowrap; vertical-align: middle; transition: max-width .3s cubic-bezier(.32, .72, 0, 1), opacity .2s ease .06s; }
  /* barra estreita (1366 px com o menu aberto): o selo fica só no ponto, com o texto na dica; encolhe com a curva do menu */
  .fresco-per.curto .fresco-bt { gap: 0; }
  .fresco-per.curto .fresco-rot { max-width: 0; opacity: 0; }
  @container per (max-width: 1180px) {
    .fresco-per .fresco-bt { gap: 0; }
    .fresco-per .fresco-rot { max-width: 0; opacity: 0; transition: max-width .3s cubic-bezier(.32, .72, 0, 1), opacity .12s ease; }
  }
}
@media print { header.topo { position: static; } }
@media (prefers-reduced-motion: reduce) {
  html[data-recolhido="1"], html[data-recolhido="1"] .lateral, html[data-recolhido="1"] .lateral nav a > span, html[data-recolhido="1"] .lateral .marca img,
  header .abas a.aba-pz, header .abas .aba-nome, .topo .emp-nome, .topo .seta-v, .fresco-per .fresco-rot, .tl-tela svg { transition: none !important; }
}

/* =====================================================================
   A Visão geral (v112, Rodada 73, 30/10/2026): um cartão por empresa, a Cadeia dela embaixo e a mesma fileira no fim, nas três visões.
   html[data-rd] é a visão aberta (dia, semana ou mes); html[data-rd-tab="1"], as tabelas de antes abertas.
   ===================================================================== */
/* o topo baixo */
html[data-rd] main { padding-top: 14px; }
html[data-rd] .cab-pagina { align-items: center; flex-wrap: nowrap; margin: 0 0 16px; }
html[data-rd] .cab-pagina > div:first-child { flex: 1; min-width: 0; }
html[data-rd] .cab-pagina .vz-pastilhas { flex: none; }
@media (max-width: 767px) { html[data-rd] .cab-pagina { flex-wrap: wrap; } html[data-rd] .cab-pagina > div:first-child { flex-basis: 100%; } .rd-soma { margin-left: 0; white-space: normal; } }
html[data-rd] .cab-pagina h1 { margin: 0; font-size: 28px; letter-spacing: -.025em; }
.rd-ativo { margin-top: 3px; font-size: 13.5px; color: var(--tinta-3); }
.rd-ativo .ativo-linha { margin: 0; padding: 0; }
/* a linha guarda o lugar da pilula do filtro: marcar uma origem nao empurra a pagina */
.rd-ativo { min-height: 26px; }
.rd-ativo .ativo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.rd-ativo .pilula { min-height: 22px; padding-block: 0; line-height: 22px; font-size: 12.5px; }
.rd-ativo #limpar { min-height: 22px !important; padding-block: 0; font-size: 12.5px; }

/* as tabelas de antes ficam a um clique */
html[data-rd] #pagina .blocos { display: none; margin-top: 24px; }
html[data-rd][data-rd-tab="1"] #pagina .blocos { display: grid; }
@media (min-width: 1720px) { html[data-rd] main, html[data-rd] .topo-in, html[data-rd] .periodo-in { max-width: 1880px; } }

.rd { display: grid; gap: 16px; }
.rd-card, .rd-emp { background: var(--papel); border: 0; border-radius: 18px; box-shadow: var(--sombra); }

/* os cartões das empresas */
.rd-emps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.rd-emp { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px 14px; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: box-shadow .18s ease, transform .12s ease-out, opacity .18s ease; }
.rd-emp:hover { box-shadow: var(--sombra-h); }
.rd-emp:active { transform: scale(.985); }
.rd-emp:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
.rd-emp[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--anil-2), var(--sombra-h); }
.rd-emp.apag { opacity: .55; }
.rd-emp-top { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 28px; font-size: 15px; }
.rd-emp-top .fc-tile { width: 28px; height: 28px; border-radius: 9px; }
.rd-emp-top .fc-tile img { width: 17px; height: 17px; }
.rd-emp-top > b { font-weight: 600; color: var(--tinta); }
.rd-selo { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); white-space: nowrap; }
.rd-selo i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--neutro); }
.rd-emp { container-type: inline-size; }
.rd-emp-top > b { flex: none; }
.rd-selo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rd-selo .sl-c { display: none; }
@container (max-width: 240px) { .rd-emp .rd-selo .sl-l { display: none; } .rd-emp .rd-selo .sl-c { display: inline; } }
.rd-selo.bom { color: var(--bom); } .rd-selo.bom i { background: var(--bom); }
.rd-selo.atencao { color: var(--atencao); } .rd-selo.atencao i { background: var(--atencao-bola); }
.rd-selo.ruim { color: var(--ruim); } .rd-selo.ruim i { background: var(--ruim); }
.rd-emp-rot { margin-top: 8px; font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
.rd-emp-rot em { margin-left: 5px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); }
.rd-emp-num { margin-top: -4px; font: 600 clamp(26px, 1.95vw, 36px)/1.1 var(--f-num); letter-spacing: -.03em; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-emp-meta { font-size: 13.5px; color: var(--tinta-3); white-space: nowrap; }
.rd-emp-meta b { color: var(--tinta); font-weight: 600; }
.rd-barra { position: relative; display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: var(--sutil-3); }
.rd-barra i { display: block; height: 100%; border-radius: inherit; }
.multi-pe[hidden] { display: none; }
.rd-barra.sem-meta { visibility: hidden; }   /* sem meta no recorte: guarda o lugar, para o cartão não mudar de altura */
.rd-barra u { position: absolute; top: -3px; width: 2px; height: 12px; border-radius: 2px; background: var(--tinta); }
/* o Orçado é número de primeira leitura, logo abaixo do Vendido; Vendas fica ao lado, menor */
.rd-emp-rod { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linha); }
.rd-emp-rod > span { display: block; min-width: 0; white-space: nowrap; }
.rd-emp-rod small { display: block; font-size: 12.5px; color: var(--tinta-3); }
.rd-emp-rod b { display: block; color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rd-emp-orc b { margin-top: 1px; font: 600 clamp(22px, 1.5vw, 28px)/1.15 var(--f-num); }
.rd-emp-vd { text-align: right; }
.rd-emp-vd-l { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin-top: 3px; }
.rd-emp-rod .rd-emp-vd-l em { margin: 0; }
.rd-emp-vd b { display: inline; font: 600 17px/1.2 var(--f-num); }
.rd-emp-rod em { margin-left: 5px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); }
.rd em.fraca, .rd .fraca { color: var(--neutro) !important; font-weight: 500; }

/* a troca de visão: os cartões ficam, e o que muda corre até o valor novo */
.rd-barra i { transition: width .52s cubic-bezier(.23, 1, .32, 1), background-color .25s ease; }
.rd-barra u { transition: left .52s cubic-bezier(.23, 1, .32, 1); }
.rd-q-tr i { transition: height .52s cubic-bezier(.23, 1, .32, 1); }
.rd-q { transition: background-color .25s ease; }
/* buscando: a página fica parada, só uma linha fina embaixo dos filtros */
html[data-vg-espera] .periodo::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--anil-2); transform-origin: left; animation: vg-busca 1.1s cubic-bezier(.77, 0, .175, 1) infinite; pointer-events: none; }
@keyframes vg-busca { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* em todas as visões: o mês até ontem e o de hoje, embaixo do cartão */
.rd-emp-dia { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--linha); }
.rd-emp-dia > span { display: block; min-width: 0; white-space: nowrap; }
.rd-emp-dia small { display: block; font-size: 12.5px; color: var(--tinta-3); }
.rd-emp-dia b { display: block; color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rd-emp-mes b { margin-top: 1px; font: 600 clamp(19px, 1.25vw, 23px)/1.15 var(--f-num); }
.rd-emp-mes i { display: block; font-style: normal; font-size: 12.5px; color: var(--tinta-3); }
.rd-emp-hj { text-align: right; align-self: start; }
.rd-emp-hj b { margin-top: 3px; font: 600 15px/1.2 var(--f-num); }
@media (max-width: 767px) { .rd-emp-dia { grid-template-columns: minmax(0, 1fr); gap: 6px; } .rd-emp-hj { text-align: left; } }

/* as filas */
.rd-fila { display: grid; gap: 16px; }
/* 3 colunas com o mesmo espaço das 6 de cima: cada card fica sob duas empresas */
.rd-f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rd-card { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; }
.rd-tit { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; }
.rd-tit h3 { margin: 0; font: 600 16px/1.3 var(--f-txt); letter-spacing: -.01em; color: var(--tinta); }
.rd-qual { margin-left: auto; font-size: 13px; color: var(--tinta-3); }
.rd-qual a { color: var(--link-cor, #2B4A9E); font-weight: 600; text-decoration: none; }
.rd-soma { margin-left: auto; margin-right: 8px; font-size: 14px; color: var(--tinta-3); white-space: nowrap; }
.rd-soma b { color: var(--tinta); font-weight: 600; }
.rd-corpo { flex: 1; min-width: 0; }

/* a Cadeia de cada empresa, embaixo do cartão dela, nas mesmas colunas */
.rd-sec { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin: 6px 2px -6px; font-size: 13.5px; color: var(--tinta-3); }
.rd-sec .ajuda-bal { font-weight: 400; letter-spacing: 0; }
.rd-sec h3 { margin: 0; font: 600 16px/1.3 var(--f-txt); letter-spacing: -.01em; color: var(--tinta); }
.rd-pcs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.rd-pc { container-type: inline-size; padding: 14px 16px; transition: opacity .18s ease; }
.rd-pc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.rd-pc-top .fc-tile { width: 22px; height: 22px; border-radius: 7px; }
.rd-pc-top .fc-tile img { width: 13px; height: 13px; }
.rd-pc-top b { font-weight: 600; color: var(--tinta); }
/* a seta: verde sobe nos cartões; nos quadrados a cor é só do veredito, senão a seta e a régua brigam */
.rd em.sobe { color: var(--bom); }
.rd .rd-q em.sobe { color: var(--tinta-2); }
.rd em u { font-weight: 500; text-decoration: none; color: var(--tinta-3); }
/* um quadrado por etapa, com a barra em pé ao lado do número; a cor é a da régua */
.rd-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rd-q { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 8px; padding: 9px 9px; border-radius: 12px; background: var(--sutil-2); }
/* 30/10 (ele: "esse verde e vermelho estão muito próximos"): os dois tons têm a mesma força, e numa linha fina se confundem. A diferença vem da área:
   o quadrado inteiro no tom suave e a palavra numa pastilha cheia. O Normal fica sem cor nenhuma. */
.rd-q.ruim { background: var(--ruim-suave); }
.rd-q.bom { background: var(--bom-suave); }
.rd-q.ruim .rd-q-tr, .rd-q.bom .rd-q-tr { background: color-mix(in srgb, var(--papel) 60%, transparent); }
.rd-q.ruim em.fraca, .rd-q.bom em.fraca { color: var(--tinta-2) !important; }
.rd-q.ruim em, .rd-q.bom em, .rd-q.ruim em.sobe, .rd-q.bom em.sobe, .rd-q.ruim small, .rd-q.bom small, .rd-q.ruim em u, .rd-q.bom em u { color: var(--tinta); }
.rd-q-est { min-height: 18px; margin-top: 3px; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--tinta-3); }
.rd-q.ruim .rd-q-est, .rd-q.bom .rd-q-est { display: inline-block; align-self: flex-start; padding: 1px 8px; border-radius: 999px; font-weight: 700; line-height: 16px; color: var(--papel); }
.rd-q.ruim .rd-q-est { background: var(--ruim); }
.rd-q.bom .rd-q-est { background: var(--bom); }
.rd-q-tr { position: relative; border-radius: 999px; background: var(--sutil-3); overflow: hidden; }
.rd-q-tr i { position: absolute; inset: auto 0 0; border-radius: inherit; background: var(--c); }
.rd-q-tx { display: flex; flex-direction: column; min-width: 0; }
.rd-q-tx small { display: block; font-size: 12.5px; font-weight: 500; line-height: 16px; color: var(--tinta-2); white-space: nowrap; }
.rd-q-tx .rd-n { margin-top: 1px; font: 600 clamp(19px, 1.2vw, 23px)/1.15 var(--f-num); letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.rd-q-tx em { display: block; min-height: 16px; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--tinta-2); white-space: nowrap; }
.rd-aviso { font-size: 13px; line-height: 1.3; color: var(--tinta-3); }
.rd-sec { min-height: 23px; }
/* a Pré-Vendas, com os quadrados da Cadeia */
.rd-pv .rd-tit h3 a { color: inherit; text-decoration: none; }
.rd-pv .rd-tit h3 a:hover { text-decoration: underline; }
.rd-pv-qs { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.rd-pvq { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 12px; background: var(--sutil-2); }
.rd-pvq .rd-q-tx { justify-content: center; }
.rd-pvq .rd-q-tx small { font-size: 13px; }
.rd-pvq .rd-q-tx .rd-n { font-size: clamp(24px, 1.7vw, 32px); }
.rd-q-sub { min-height: 18px; margin-top: 2px; font-size: 12.5px; line-height: 18px; color: var(--tinta-3); white-space: nowrap; }

/* as listas */
.rd-li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha); transition: opacity .18s ease; }
.rd-li:first-child { border-top: 0; }
.rd-li .fc-tile { width: 28px; height: 28px; border-radius: 9px; }
.rd-li .fc-tile img { width: 17px; height: 17px; }
.rd-li-n { flex: 1; min-width: 0; font-size: 14px; }
.rd-li-n b { display: block; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-li-n small { display: block; font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-li-v { font: 600 16px/1.2 var(--f-num); color: var(--tinta); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-li-v small { display: block; font: 500 12.5px var(--f-txt); color: var(--tinta-2); }
.rd .apag { opacity: .35; }

/* Como cada empresa vende */
.rd-tr { display: grid; grid-template-columns: minmax(88px, 1fr) minmax(96px, 1.2fr) 52px 108px; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linha); font: 600 14.5px var(--f-num); color: var(--tinta); transition: opacity .18s ease; }
.rd-tr > span:nth-child(n+3) { text-align: right; white-space: nowrap; }
.rd-tr-cab { align-items: end; padding: 0 0 8px; border-top: 0; font: 600 12.5px/1.25 var(--f-txt); color: var(--tinta-3); }
.rd-tr-cab > span:nth-child(n+3) { white-space: normal; }
.rd-tr-n { display: flex; align-items: center; gap: 9px; min-width: 0; font: 600 14px var(--f-txt); }
.rd-tr-n .fc-tile { width: 26px; height: 26px; border-radius: 8px; }
.rd-tr-n .fc-tile img { width: 15px; height: 15px; }
.rd-tr-c { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 8px; text-align: right; }
.rd-mini { display: block; height: 6px; border-radius: 999px; background: var(--sutil-3); overflow: hidden; }
.rd-mini i { display: block; height: 100%; border-radius: inherit; }

.rd-tabelas { justify-self: center; padding: 10px 20px; border: 0; border-radius: 12px; background: var(--papel); box-shadow: var(--sombra); font: 600 14px var(--f-txt); color: var(--tinta-2); cursor: pointer; transition: color .15s ease, transform .12s ease-out; }
.rd-tabelas:hover { color: var(--tinta); }
.rd-tabelas:active { transform: scale(.98); }

/* 30/10 (ele, no notebook em 125%, cerca de 1536 px: texto fora do quadrado): com 6 colunas tudo fica mais justo */
@media (min-width: 1501px) {
  .rd-emps, .rd-pcs, .rd-fila { gap: 12px; }
  .rd-emp { padding: 14px; }
  .rd-emp-top { gap: 7px; font-size: 14px; }
  .rd-emp-top .fc-tile { width: 24px; height: 24px; border-radius: 8px; }
  .rd-emp-top .fc-tile img { width: 15px; height: 15px; }
  .rd-selo { font-size: 12px; white-space: nowrap; }
  .rd-emp-orc b { font-size: 21px; }
  .rd-emp-mes b { font-size: 19px; }
  .rd-emp-rod, .rd-emp-dia { gap: 8px; }
  .rd-pc { padding: 12px; }
  .rd-qs { gap: 6px; }
  .rd-q { grid-template-columns: 5px minmax(0, 1fr); gap: 7px; padding: 8px; }
  .rd-q-tx small { font-size: 12px; }
}
/* a etiqueta "vs set" só onde cabe; a comparação continua na linha do topo */
@container (max-width: 258px) { .rd-q em u { display: none; } }

/* tela menor */
@media (max-width: 1500px) {
  .rd-emps, .rd-pcs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rd-emp-num { font-size: 30px; }
  .rd-emp-orc b { font-size: 24px; }
}
@media (max-width: 1180px) {
  .rd-f3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1280px) { .rd-f3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1400px) {
  .rd-f3 .rd-tr { grid-template-columns: minmax(76px, 1fr) 66px 48px 104px; gap: 8px; }
  .rd-f3 .rd-tr-c { display: block; }
  .rd-f3 .rd-mini { display: none; }
  .rd-f3 .rd-tr-cab > span:nth-child(2) { text-align: right; }
}
@media (max-width: 1000px) {
  .rd-emps, .rd-pcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .rd-emps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rd-pcs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rd-emp { padding: 12px; }
  .rd-emp-num { font-size: 24px; }
  .rd-emp-orc b { font-size: 20px; }
  .rd-selo { display: none; }
  .rd-emp-rod { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rd-emp-vd { text-align: left; }
  .rd-tr { grid-template-columns: minmax(0, 1fr) 66px 48px 84px; gap: 6px; font-size: 13.5px; }
  .rd-tr-n b { font-size: 13px; }
  .rd-tr-c { display: block; }
  .rd-mini { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-emp, .rd-pc, .rd-li, .rd-tr, .rd-tabelas, .rd-barra i, .rd-barra u, .rd-q-tr i, .rd-q { transition: none; }
  html[data-vg-espera] .periodo::after { animation: none; }
}

/* ---------- v117 (03/11, Rodada 78): o Funil da Energy no desenho da Visão geral ----------
   Feito primeiro como maquete por cima do hub (_local/maquete_funil, dez passadas com ele) e trazido para cá sem mudança de desenho. Tudo preso a
   html[data-fn], que o render liga só em /energy/funil: as outras telas e o Funil das outras empresas ficam como estão. Os tons são os do hub
   (claro e escuro); nenhuma cor nova. */
/* ---------- largura cheia e cards mais leves (os da Visão geral: raio 18, 16 px entre eles, título de 16 px sem pastilha) ---------- */
@media (min-width: 1720px) { html[data-fn] main, html[data-fn] .topo-in, html[data-fn] .periodo-in, html[data-fn] .periodo-ativo, html[data-fn] .rodape-pagina { max-width: 1880px; } }
html[data-mod] #pagina .blocos { gap: 16px; }
html[data-mod] #pagina .bloco { padding: 18px 20px; border: 0; border-radius: 18px; }
html[data-mod] #pagina .bloco[data-ico]::before { display: none; }
html[data-mod] #pagina .bloco[data-ico] > h2, html[data-mod] #pagina .bloco[data-ico] > .subt, html[data-mod] #pagina .bloco[data-ico] > .filtro-card { margin-left: 0; }
html[data-mod] #pagina .bloco > h2 { min-height: 28px; padding-right: 44px; font-size: 16px; line-height: 1.3; text-wrap: balance; }
html[data-mod] #pagina .bloco .subt.subt-ctx { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--tinta-3); }
html[data-mod] #pagina .bloco .leg-graf { margin-bottom: 8px; font-size: 13px; }
html[data-mod] #pagina .bloco .linha-pip, html[data-mod] #pagina .bloco p.cinza { font-size: 13px; }
/* um "?" por card: o ⓘ sai (a fonte foi para dentro do "?"); o ⤓ fica, discreto até o mouse chegar ao card */
html[data-mod] #pagina .bloco > .bt-info { display: none; }
html[data-mod] #pagina .bloco > .bt-exp { top: 14px; right: 14px; width: 30px; height: 30px; }
@media (hover: hover) and (pointer: fine) {
  html[data-mod] #pagina .bloco > .bt-exp { opacity: 0; transition: opacity 150ms ease, background-color 150ms ease; }
  html[data-mod] #pagina .bloco:hover > .bt-exp, html[data-mod] #pagina .bloco > .bt-exp:focus-visible, html[data-mod] #pagina .bloco > .bt-exp[aria-expanded="true"] { opacity: .7; }
}
html[data-mod] .ajuda-bal .fn-fonte { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); opacity: .85; }

/* ---------- todo número num quadrado cinza, rótulo em letra normal (a peça da Visão geral) ---------- */
html[data-mod] #pagina .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 12px; }
html[data-mod] #pagina .kpi { display: flex; flex-direction: column; min-width: 0; padding: 11px 13px 12px; border-radius: 12px; background: var(--sutil-2); box-shadow: none; text-align: left; }
html[data-mod] #pagina .kpi-bt { cursor: pointer; transition: background-color 150ms ease, transform 120ms cubic-bezier(.23, 1, .32, 1); }
html[data-mod] #pagina .kpi-bt:hover { background: var(--sutil); box-shadow: none; }
html[data-mod] #pagina .kpi-bt:active { transform: scale(.985); }
html[data-mod] #pagina .kpi-bt:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
html[data-mod] #pagina .kpi .rot { font-size: 12.5px; font-weight: 500; line-height: 16px; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
html[data-mod] #pagina .kpi .num { margin-top: 2px; font: 600 clamp(20px, 1.35vw, 26px)/1.15 var(--f-num); letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-mod] #pagina .kpi .num small { font-size: .55em; font-weight: 600; letter-spacing: 0; color: var(--tinta-3); }
html[data-mod] #pagina .kpi .sub { margin-top: 2px; font-size: 12.5px; line-height: 17px; color: var(--tinta-3); }
html[data-mod] #pagina .kpi .sub.sub-l { color: var(--tinta-2); font-weight: 500; }
/* o hub quebra a linha de baixo em uma ideia por linha (.sl), com letra de 15-16 px: aqui no tamanho dos outros quadrados */
html[data-mod] #pagina .kpi .sub .sl { font-size: 12.5px; line-height: 17px; }
html[data-mod] #pagina .kpi .sub .sl.s1 { font-weight: 500; color: var(--tinta-2); }
html[data-mod] #pagina .kpi .sub .sl:not(.s1) { font-weight: 400; color: var(--tinta-3); }
/* nos cards de um terço, os quadrados em duas colunas (a safra dos orçamentos fica em três quando cabe) */
html[data-mod] #pagina .bloco.s4 .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-fn] #pagina .bloco.s4[data-id="safra-dos-orcamentos-criados-no-periodo"] { container-type: inline-size; }
@container (min-width: 460px) { html[data-fn] #pagina .bloco.s4[data-id="safra-dos-orcamentos-criados-no-periodo"] .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- "Do lead à venda": quatro quadrados, a barra em pé = a fração dos leads que chegou à etapa ---------- */
html[data-fn] #pagina .fn-cad { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html[data-fn] #pagina .fn-q { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 12px; padding: 14px 14px 14px 12px; }
html[data-fn] #pagina .fn-tr { position: relative; min-height: 96px; border-radius: 999px; background: var(--sutil-3); overflow: hidden; }
html[data-fn] #pagina .fn-tr i { position: absolute; inset: auto 0 0; border-radius: inherit; background: var(--anil-2); }
html[data-fn][data-tema="escuro"] #pagina .fn-tr i { background: #8E9FF0; }
html[data-fn] #pagina .fn-tx { display: flex; flex-direction: column; min-width: 0; }
/* o número grande em cima; no pé, o percentual em destaque na cor da barra, ao lado da parte cheia (a barra cresce de baixo): a fração fica
   junto da barra que ela descreve, com o "x de y" embaixo */
/* o tamanho segue a largura do texto do quadrado (cqi): 56 px no monitor, sem encostar na borda no notebook */
html[data-fn] #pagina .fn-tx { container-type: inline-size; }
html[data-fn] #pagina .fn-q .num { margin-top: 6px; font-size: min(56px, 26cqi); line-height: 1.05; letter-spacing: -.03em; }
html[data-fn] #pagina .fn-q .num .lk-ico { vertical-align: .5em; }
html[data-fn] #pagina .fn-pct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 500; color: var(--tinta-2); }
html[data-fn] #pagina .fn-pct b { font: 600 min(32px, 15cqi)/1.1 var(--f-num); letter-spacing: -.02em; color: var(--anil-2); font-variant-numeric: tabular-nums; }
html[data-fn][data-tema="escuro"] #pagina .fn-pct b { color: #8E9FF0; }
/* as linhas de baixo com a mesma altura nos quatro: os percentuais ficam na mesma linha mesmo quando um quadrado tem duas linhas e outro nenhuma */
html[data-fn] #pagina .fn-baixo { display: flex; flex-direction: column; min-height: 40px; }
html[data-fn] #pagina .fn-q .sub { margin-top: 3px; }
/* quadrado estreito: o "dos leads" desce para baixo do percentual nos quatro, para não quebrar num e não no outro */
@container (max-width: 200px) { html[data-fn] #pagina .fn-pct { flex-direction: column; align-items: flex-start; gap: 0; } }
html[data-fn] #pagina .fn-q .sub, html[data-fn] #pagina .fn-q .rot { text-wrap: pretty; }
html[data-fn] #pagina .fn-q .sub:empty { display: none; }
/* v122 (ele, 04/11: "em baixo ou na lateral do 33 as contas que não têm oportunidade"; "a lista nos dois números"): no "Conta com oportunidade",
   o número e os sem oportunidade, cada um o seu botão; os sem oportunidade logo embaixo do número, em laranja (alerta; o vermelho fica nas três
   coisas da v94) */
html[data-fn] #pagina .fn-q-dois .num a.fn-lk { color: inherit; text-decoration: none; }
html[data-fn] #pagina .fn-q .fn-falta { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; width: fit-content; margin-top: 8px; padding: 3px 8px 4px 0;
  font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--tinta-2); text-decoration: none; border-radius: 6px; }
html[data-fn] #pagina .fn-q .fn-falta b { font: 600 min(26px, 13cqi)/1.1 var(--f-num); letter-spacing: -.02em; color: var(--atencao); font-variant-numeric: tabular-nums; }
html[data-fn] #pagina .fn-q .fn-falta .lk-ico { align-self: center; margin-left: 0; }
html[data-fn] #pagina .fn-q .fn-falta:hover { color: var(--tinta); }
html[data-fn] #pagina .fn-q .fn-falta:focus-visible, html[data-fn] #pagina .fn-q-dois .num a.fn-lk:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
/* fora da tela larga, a primeira fileira fica 7 + 5: a safra dos orçamentos cabe em três colunas e não estica a fileira */
@media (min-width: 1181px) and (max-width: 1719px) {
  html[data-fn] #pagina .bloco.s8[data-id="do-lead-a-venda"] { grid-column: span 7; }
  html[data-fn] #pagina .bloco.s4[data-id="safra-dos-orcamentos-criados-no-periodo"] { grid-column: span 5; }
}

/* ---------- gráficos: a mesma altura nos pares, e o gráfico do card mais baixo cresce até o fim da fileira ---------- */
html[data-fn] #pagina .bloco .grafico { height: 260px; }
html[data-fn] #pagina .bloco .grafico.baixo { height: 180px; }
html[data-fn] #pagina .bloco[data-fn-par="1"] > .grafico.fn-cresce { flex: 1 1 auto; min-height: 220px; }
html[data-fn] #pagina .bloco[data-fn-par="1"] > .grafico.baixo.fn-cresce { min-height: 170px; }
html[data-mod] #pagina .vis-ctrl { margin: 0 0 8px; }
html[data-mod] #pagina .vis-ctrl .seg button { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
/* nos cards que são só um gráfico, Barras | Pizza sobe para a linha do título, ao lado do ⤓ (sobra uma linha a menos de controle);
   em card estreito ela fica onde estava */
html[data-fn] #pagina .bloco:is([data-id="status-dos-leads"], [data-id="motivo-do-descarte"], [data-id="origem-dos-leads"], [data-id="consumo-declarado-dos-leads"]) { container-type: inline-size; }
@container (min-width: 460px) {
  html[data-fn] #pagina .bloco:is([data-id="status-dos-leads"], [data-id="motivo-do-descarte"], [data-id="origem-dos-leads"], [data-id="consumo-declarado-dos-leads"]) > .vis-ctrl { position: absolute; top: 15px; right: 50px; margin: 0; }
  html[data-fn] #pagina .bloco:is([data-id="status-dos-leads"], [data-id="motivo-do-descarte"], [data-id="origem-dos-leads"], [data-id="consumo-declarado-dos-leads"]) > h2 { padding-right: 214px; }   /* o Barras | Pizza (cerca de 150 px) a 50 px da borda, mais 14 de folga: o "Filtro: …" na linha do título encostava nele */
}

/* o filtro do card Leads em aberto numa faixa mais baixa: o nome do grupo ao lado dos botões, não em cima */
html[data-fn] #pagina .fl-leads { align-items: center; margin: 0 0 12px; padding: 8px 12px; gap: 8px 24px; box-shadow: none; background: var(--sutil-2); }
html[data-fn] #pagina .fl-leads .fl-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html[data-fn] #pagina .fl-leads .fl-rot { margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
html[data-fn] #pagina .fl-leads .seg button { min-height: 28px; font-size: 12.5px; }
html[data-fn] #pagina .fl-leads input { min-height: 30px; }
html[data-fn] #pagina .gc-pend { margin: 0 0 4px; }
/* a tabela que fica ao lado de um card mais baixo rola dentro dela em vez de esticar a fileira; a dos leads abertos mostra umas 8 pessoas */
html[data-fn] #pagina .bloco[data-fn-par="1"] .tabela-wrap { max-height: 460px; overflow: auto; }
html[data-fn] #pagina .bloco[data-id="quem-esta-com-os-leads-abertos"] .tabela-wrap { max-height: 440px; }

/* ---------- Leads em aberto deitado: os números à esquerda (o total em cima, as pendências embaixo), o gráfico à direita ---------- */
html[data-fn] #pagina .fn-lado { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
html[data-fn] #pagina .fn-lado-l .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-fn] #pagina .fn-lado-l .kpis > :first-child { grid-column: 1 / -1; }
html[data-fn] #pagina .fn-lado-l .kpis > :first-child .num { font-size: clamp(26px, 1.9vw, 36px); }
html[data-fn] #pagina .fn-lado-l .linha-pip { margin: 6px 2px 0; }
html[data-fn] #pagina .fn-lado-r { display: flex; flex-direction: column; min-width: 0; }
html[data-fn] #pagina .fn-lado-r .grafico { height: 300px; }
@media (max-width: 1100px) { html[data-fn] #pagina .fn-lado { grid-template-columns: minmax(0, 1fr); } }

/* ---------- os quatro blocos: o título do que o bloco responde e o tempo que vale nele; o primeiro título é a conclusão da página ---------- */
html[data-fn] #pagina .fn-sec { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 18px 2px -2px; }
html[data-fn] #pagina .blocos > .fn-sec:first-child { margin-top: 0; }
html[data-fn] #pagina .fn-sec-t { margin: 0; font: 600 17px/1.3 var(--f-txt); letter-spacing: -.01em; color: var(--tinta); text-wrap: balance; }
html[data-fn] #pagina .fn-sec-s { font-size: 13.5px; line-height: 1.4; color: var(--tinta-3); }
html[data-fn] #pagina .fn-tese .fn-sec-t { font-size: clamp(20px, 1.45vw, 26px); letter-spacing: -.02em; }
@media (max-width: 767px) { html[data-fn] #pagina .fn-sec { margin-top: 12px; } html[data-fn] #pagina .fn-tese .fn-sec-t { font-size: 19px; } }

/* ---------- a troca de filtro: a página fica inteira, sem apagar (o hub a deixa em 50%), e uma linha corre embaixo da faixa de filtros, como na
   Visão geral; os números e as barras andam do valor de antes ao novo (app.js, fnSoltar e fnContar) ---------- */
html[data-mod] #pagina.carregando { opacity: 1; }
/* o hub faz tudo o que entra na página aparecer (pagina-entra, 0,18 s); como ele monta a página de novo a cada filtro, ela sumia e voltava */
html[data-mod] #pagina > * { animation: none; }
/* o "Filtro: …" na linha do título, pequeno e numa linha só (o texto inteiro no balão do mouse): o card não cresce ao filtrar */
html[data-mod] #pagina .bloco > h2 > .fn-filtro { flex: 0 1 auto; min-width: 0; margin: 0 0 0 10px; padding: 0 8px; overflow: hidden; border-radius: 999px; background: var(--sutil-2); font: 500 12px/22px var(--f-txt); letter-spacing: 0; color: var(--tinta-3); white-space: nowrap; text-overflow: ellipsis; }
html[data-mod] #pagina .bloco > h2 > .fn-filtro .ignora { color: var(--atencao, #8A5A00); }
html[data-mod] #pagina .bloco > h2 > .fn-h2t { flex-shrink: 0; }
/* 03/11, sétima passada (ele: "tira essa barrinha de carregamento"): sem a linha que corria embaixo dos filtros; enquanto a consulta roda,
   só o cursor de espera. O card Leads em aberto também não apaga no filtro dele (o hub o deixava em 55%) */
/* a espera é marcada no html (data-fn-espera, pelo render) e não por :has(#pagina.carregando): com o :has, cada mudança na página fazia o
   navegador recalcular o estilo das ~2.700 peças dela (medido na v117: 155 ms de estilo numa troca de 248 ms) */
html[data-fn-espera], html[data-fn-espera] :is(.periodo, #periodo-ativo) :is(button, a, label, input, select) { cursor: progress; }
html[data-fn] #pagina section.bloco.fl-carregando > :not(h2):not(.subt) { opacity: 1; }
/* a página sem mudar de forma ao filtrar (gravado quadro a quadro: no clique, antes de o dado chegar, a página descia):
   a linha "Conta de …" com altura fixa, as pílulas do filtro do tamanho da linha (como na Visão geral, .rd-ativo) */
html[data-mod] #periodo-ativo .ativo-linha { min-height: 26px; }
html[data-mod] #periodo-ativo .pilula, html[data-mod] #periodo-ativo #limpar { min-height: 22px !important; padding-block: 0; line-height: 20px; font-size: 12.5px; }
/* o botão da origem com a largura limitada: "Origem: tráfego pago (Google, Meta, ChatGPT, site)" quebrava a faixa de filtros em duas linhas */
html[data-mod] .periodo .multi-bt { max-width: 230px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* os totais em HTML por cima do gráfico (o do canto nas barras, o do meio na pizza): correm trocando só o próprio texto, sem redesenhar o
   gráfico a cada quadro (o título do ECharts fazia isso, e a animação perdia quadros) */
html[data-mod] #pagina .grafico { position: relative; }
html[data-mod] #pagina .fn-total { position: absolute; top: 0; right: 6px; z-index: 2; display: flex; flex-direction: column; pointer-events: none; }
html[data-mod] #pagina .fn-total b { font: 600 28px/32px "Geist", "Segoe UI", sans-serif; letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
html[data-mod] #pagina .fn-total span { margin-top: 1px; font: 400 12.5px/16px "Geist", "Segoe UI", sans-serif; color: var(--tinta-3); white-space: nowrap; }
html[data-mod] #pagina .fn-pizza-n { position: absolute; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translateX(-50%); pointer-events: none; }
html[data-mod] #pagina .fn-pizza-n b { font-family: "Geist", "Segoe UI", sans-serif; font-weight: 600; letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-mod] #pagina .fn-pizza-n span { font: 400 13px/17px "Geist", "Segoe UI", sans-serif; color: var(--tinta-3); white-space: nowrap; }
/* o total que voa do canto das barras ao meio da rosca (e de volta) */
.fn-voo { position: fixed; z-index: 60; margin: 0; font-family: "Geist", "Segoe UI", sans-serif; font-weight: 600; color: var(--tinta); white-space: nowrap; pointer-events: none; transform-origin: 0 0; will-change: transform; }

/* ---------- até 1180 px os pares de ⅔ + ⅓ viram cards inteiros (os de metade continuam lado a lado até 860 px) ---------- */
@media (max-width: 1180px) { html[data-fn] #pagina .bloco.s8, html[data-fn] #pagina .bloco.s4 { grid-column: span 12; } }
@media (max-width: 900px) { html[data-fn] #pagina .fn-cad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { html[data-fn] #pagina .fn-q .num { font-size: 24px; } html[data-fn] #pagina .fn-tr { min-height: 72px; } }
@media (prefers-reduced-motion: reduce) { html[data-mod] #pagina .kpi-bt { transition: none; } html[data-mod] #pagina .kpi-bt:active { transform: none; } }


/* ---------- v121 (03/11; ele: "quero que ela seja aplicada para o restante dele, para a gente já ter esse novo visual em todas as áreas") ----------
   A moldura acima (cards leves, um "?" por card, número em quadrado cinza, "Filtro: …" na linha do título, a página que não apaga na troca de
   filtro, o total grande dos gráficos) vale em todas as telas com a modernização (html[data-mod]: as telas das empresas e as áreas; fora, a Visão
   geral e Metas). O arranjo em blocos, com a largura cheia e os cards em pares (html[data-fn]), segue no Funil e no Tráfego pago e vem tela a tela.
   Nas telas antigas, só o que a moldura pede a mais: */
/* o número grande do card (o vendido do Fechamento, o total do Farol) continua grande: no quadrado cinza, um degrau acima dos outros */
html[data-mod]:not([data-fn]) #pagina .kpi .num.grande { font-size: clamp(30px, 2.3vw, 40px); }
/* os degraus das cascatas (Funil do período, Pipeline aberto) no tom dos quadrados: rótulo em letra normal, número escuro */
html[data-mod] #pagina .cascata .degrau .rot { font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinta-2); }
html[data-mod] #pagina .cascata .degrau .num { letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* os quadrados com o da conversão (que ocupa a fileira toda): na grade, ele obrigava todas as colunas a existir e sobrava um buraco no fim da
   primeira fileira; os quadrados enchem a fileira e o da conversão vai para baixo */
html[data-mod] #pagina .kpis:has(> .kpi-conv) { display: flex; flex-wrap: wrap; }
html[data-mod] #pagina .kpis:has(> .kpi-conv) > .kpi { flex: 1 1 150px; }
html[data-mod] #pagina .kpis:has(> .kpi-conv) > .kpi:has(> .num.grande) { flex: 2 1 300px; }
html[data-mod] #pagina .kpis:has(> .kpi-conv) > .kpi-conv { order: 9; flex-basis: 100%; }
/* ---------- v121, segunda parte (ele: "pode ir fazendo de todas"): o desenho em blocos do Funil em todas as telas (html[data-fn]) ----------
   As regras do Funil acima (largura cheia, pares, títulos de bloco, quadrados) valem em toda tela em blocos. Aqui, o que as outras telas pedem: */
/* as cascatas de números (Funil do período, Pipeline aberto, Orçamentos do período, Conversão em números) nos quadrados do Do lead à venda,
   com tantas colunas quantos degraus; sem a barra em pé quando os números não se comparam */
html[data-fn] #pagina .fn-cad.fn-cad-cascata { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
html[data-fn] #pagina .fn-q.sem-tr { grid-template-columns: minmax(0, 1fr); }
html[data-fn] #pagina .fn-cad-cascata .fn-baixo { min-height: 0; }
html[data-fn] #pagina .fn-cad-cascata .fn-baixo > * { margin-top: 3px; font-size: 12.5px; line-height: 17px; color: var(--tinta-3); }
html[data-fn] #pagina .fn-cad-cascata .fn-baixo > .val { font-weight: 500; color: var(--tinta-2); }
html[data-fn] #pagina .fn-cad-cascata .fn-q .num { margin-bottom: 4px; }
html[data-fn] #pagina .fn-cad-cascata .fn-q .num small { font-size: .42em; }
@media (max-width: 900px) { html[data-fn] #pagina .fn-cad.fn-cad-cascata { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* o card que é só um gráfico com o Barras | Pizza: o seletor sobe para a linha do título (marcado pelo vista(), data-fn-um) */
html[data-fn] #pagina .bloco[data-fn-um] { container-type: inline-size; }
@container (min-width: 460px) {
  html[data-fn] #pagina .bloco[data-fn-um] > .vis-ctrl { position: absolute; top: 15px; right: 50px; margin: 0; }
  html[data-fn] #pagina .bloco[data-fn-um] > h2 { padding-right: 214px; }
}
/* o mapa da Agenda fica na altura dele (os gráficos das telas em blocos têm 260 px) */
html[data-fn] #pagina .bloco .grafico.mapa-mg { height: 470px; }
@media (max-width: 1100px) { html[data-fn] #pagina .bloco .grafico.mapa-mg { height: 400px; } }
@media (max-width: 600px) { html[data-fn] #pagina .bloco .grafico.mapa-mg { height: 320px; } }
/* ---------- v121: a Prioridades como mesa de trabalho (item 22 do diagnóstico de IHC): a lista do time à esquerda, presa ao rolar; a pessoa
   escolhida à direita, com os sinais e as ações juntos. No notebook estreito e no celular, a lista em cima e a pessoa embaixo ---------- */
#pagina .mt-topo-aba { margin-bottom: 4px; }
#pagina .mt-linha-res { margin: 8px 2px 4px; font-size: 13px; line-height: 1.5; color: var(--tinta-2); }
#pagina .mt-linha-res + .mt-nota-filtro { margin-top: 0; }   /* a nota do filtro subia 8 px por cima da linha */
#pagina .mt-linha-res .ruim { color: var(--ruim); font-weight: 600; }
#pagina .mt-linha-res .bom { color: var(--bom); font-weight: 600; }
#pagina .mt-mesa { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; margin: 14px 0 12px; }
#pagina .mt-mesa-l { position: sticky; top: calc(var(--h-preso, 120px) + 12px); display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - var(--h-preso, 120px) - 28px); }
#pagina .mt-mesa-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 8px; font-size: 12.5px; color: var(--tinta-3); }
#pagina .mt-mesa-vista button { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
/* a lista que rola por dentro: fundo do card e canto reto, para rolar pela placa de vídeo (v120) */
#pagina .mt-mesa-lista { display: flex; flex-direction: column; gap: 2px; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; background-color: var(--papel); }
#pagina .mt-mesa .mt-mesa-p { display: grid; grid-template-columns: 20px 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; font: inherit; color: var(--tinta); text-align: left; cursor: pointer; transition: background-color 150ms ease; }
#pagina .mt-mesa .mt-sinal-l.mt-mesa-p { grid-template-columns: minmax(0, 1fr) auto; }
@media (hover: hover) and (pointer: fine) { #pagina .mt-mesa .mt-mesa-p:hover { background: var(--sutil-2); } }
#pagina .mt-mesa .mt-mesa-p[aria-pressed="true"] { background: var(--sutil); box-shadow: inset 0 0 0 1px var(--linha-forte, var(--linha)); }
#pagina .mt-mesa .mt-mesa-p:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 1px; }
#pagina .mt-mesa .mt-mesa-p:active { transform: scale(.99); }
#pagina .mt-mesa .mt-mesa-p .mt-ord { font: 600 12px var(--f-num); color: var(--tinta-3); text-align: right; font-variant-numeric: tabular-nums; }
#pagina .mt-mesa .mt-mesa-p .av { width: 32px; height: 32px; font-size: 12px; }
#pagina .mt-mesa-pt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#pagina .mt-mesa-pt .nome { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 19px; white-space: nowrap; text-overflow: ellipsis; }
#pagina .mt-mesa-pior { overflow: hidden; font-size: 12.5px; line-height: 17px; color: var(--tinta-2); white-space: nowrap; text-overflow: ellipsis; }
#pagina .mt-mesa-pior b { font-weight: 600; color: var(--ruim); }
#pagina .mt-mesa-pior .bom { color: var(--bom); font-weight: 500; }
/* a pessoa escolhida */
#pagina .mt-mesa-det { min-width: 0; padding: 16px 18px 12px; border-radius: 14px; background: var(--sutil-2); }
#pagina .mt-mesa-dcab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#pagina .mt-mesa-dcab .av { flex: none; width: 44px; height: 44px; font-size: 15px; }
#pagina .mt-mesa-dnm { display: flex; flex: 1 1 200px; flex-direction: column; min-width: 0; }
#pagina .mt-mesa-dnm b { font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--tinta); }
#pagina .mt-mesa-dnm span { font-size: 12.5px; line-height: 17px; color: var(--tinta-3); }
#pagina .mt-mesa-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
#pagina .mt-mesa-nav .btn-mini { min-width: 34px; min-height: 32px; font-size: 16px; line-height: 1; }
#pagina .mt-mesa-nav .btn-mini:disabled { opacity: .35; cursor: default; }
#pagina .mt-mesa-dsub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 10px 0 12px; font-size: 13px; color: var(--tinta-2); }
#pagina .mt-mesa-kbd { font-size: 12px; color: var(--tinta-3); }
#pagina .mt-mesa-kbd kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--linha); border-radius: 4px; background: var(--papel); font: 600 11px/16px var(--f-num); text-align: center; color: var(--tinta-2); }
@media (hover: none) { #pagina .mt-mesa-kbd { display: none; } }
#pagina .mt-mesa-det .mt-grupo { margin: 0 0 8px; border-radius: 10px; background: var(--papel); }
#pagina .mt-mesa-det .mt-grupo > summary { padding: 10px 12px; }
#pagina .mt-mesa-det .mt-linhas { padding: 0 8px 6px; }
#pagina .mt-mesa-det > .pessoas.mt-linhas { padding: 0; border-radius: 10px; background: var(--papel); }
/* v121, terceira passada: a tabelinha por pessoa é a lista da mesa (uma linha por pessoa, um chip por tema), e as linhas dos sinais em duas
   linhas (antes, quatro: o número, o card, a lista e a marca uma embaixo da outra) */
#pagina .mt-mesa { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
#pagina .mt-mesa-l { container-type: inline-size; }
#pagina .mt-mesa-tabw { overflow: auto; }
#pagina .mt-mesa-tab { width: 100%; margin: 0; }
#pagina .mt-mesa-tab thead th { position: sticky; top: 0; z-index: 1; padding: 6px 4px 8px; background-color: var(--papel); font-size: 12px; font-weight: 500; line-height: 1.25; color: var(--tinta-3); text-align: center; vertical-align: bottom; white-space: normal; }
#pagina .mt-mesa-tab thead th:first-child, #pagina .mt-mesa-tab thead th.mt-mesa-pior-c { text-align: left; }
#pagina .mt-mesa-tab tbody th, #pagina .mt-mesa-tab tbody td { padding: 2px 3px; border-top: 1px solid var(--linha); vertical-align: middle; }
#pagina .mt-mesa-tab tbody tr.on > * { background: var(--sutil); }
#pagina .mt-mesa-tab tbody tr.on > :first-child { border-radius: 10px 0 0 10px; }
#pagina .mt-mesa-tab tbody tr.on > :last-child { border-radius: 0 10px 10px 0; }
#pagina .mt-mesa .mt-mesa-tab .mt-mesa-p { grid-template-columns: 18px 26px minmax(0, 1fr); gap: 8px; min-height: 40px; padding: 4px 6px; border-radius: 8px; }
#pagina .mt-mesa .mt-mesa-tab .mt-mesa-p[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--anil-2); }
#pagina .mt-mesa .mt-mesa-tab .mt-mesa-p .av { width: 26px; height: 26px; font-size: 11px; }
#pagina .mt-mesa-tab .mt-mesa-pt .nome { font-size: 13.5px; }
#pagina .mt-mesa-tab .mt-cel { min-height: 34px; }
#pagina .mt-mesa-tab .mt-mesa-pior-c { max-width: 220px; }
#pagina .mt-mesa-tab .mt-mesa-pior { display: block; max-width: 220px; }
@container (max-width: 760px) { #pagina .mt-mesa-tab .mt-mesa-pior-c { display: none; } }
#pagina .mt-mesa-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 4px 0; font-size: 12px; color: var(--tinta-3); }
/* os sinais da pessoa: em duas linhas (o sinal e a referência à esquerda; o número em cima e o card, a lista e a marca embaixo, à direita) */
#sin-mesa .mt-mesa-det .sin-l { min-height: 0; padding: 7px 6px; gap: 10px; }
#sin-mesa .mt-mesa-det .sin-l .pe-r { max-width: 420px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 10px; row-gap: 1px; }
#sin-mesa .mt-mesa-det .sin-l .pe-vl { flex-basis: 100%; }
#sin-mesa .mt-mesa-det .sin-l .pe-ab { display: contents; }
#sin-mesa .mt-mesa-det .sin-l .pe-card { display: inline; max-width: 150px; min-height: 0; }
#sin-mesa .mt-mesa-det .sin-l .pe-card:empty { display: none; }
#sin-mesa .mt-mesa-det .mt-grupo > summary { padding: 8px 12px; }
#sin-mesa .mt-mesa-det .mt-grupo { margin-bottom: 6px; }
@media (max-width: 1179px) {
  #pagina .mt-mesa { grid-template-columns: minmax(0, 1fr); }
  #pagina .mt-mesa-l { position: static; max-height: 420px; }
}
@media (prefers-reduced-motion: reduce) { #pagina .mt-mesa .mt-mesa-p { transition: none; } #pagina .mt-mesa .mt-mesa-p:active { transform: none; } }
/* ---------- v121, quarta passada da Prioridades: os dois quadros alinhados (o mesmo fundo, o mesmo topo, o mesmo cabeçalho), a rolagem da página
   inteira (sem a lista que rolava por dentro e segurava a roda do mouse), os temas recolhidos e cada sinal numa linha com os botões novos ---------- */
#pagina .mt-mesa { align-items: stretch; gap: 16px; }
#pagina .mt-mesa-l, #pagina .mt-mesa-det { padding: 12px; border-radius: 14px; background: var(--sutil-2); }
#pagina .mt-mesa-l { position: static; max-height: none; }
#pagina .mt-mesa-cab, #pagina .mt-mesa-dcab { min-height: 44px; margin: 0 0 10px; padding: 0 4px; }
#pagina .mt-mesa-dcab { gap: 10px; }
#pagina .mt-mesa-dcab .av { width: 36px; height: 36px; font-size: 13px; }
#pagina .mt-mesa-dnm b { font-size: 16px; }
#pagina .mt-mesa-dsub { margin: 0 4px 10px; }
#pagina .mt-mesa-lista, #pagina .mt-mesa-tabw { overflow: visible; overscroll-behavior: auto; border-radius: 10px; }
#pagina .mt-mesa-tab thead th { position: static; }
#pagina .mt-mesa-tab tbody tr:first-child > * { border-top: 0; }
/* um tema da pessoa: recolhido, numa linha (o nome, os pontos, o pior), com a seta que gira ao abrir */
#sin-mesa .mt-mesa-g { margin: 0 0 6px; border-radius: 10px; background: var(--papel); }
#sin-mesa .mt-mesa-g > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; list-style: none; cursor: pointer; border-radius: 10px; }
#sin-mesa .mt-mesa-g > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { #sin-mesa .mt-mesa-g > summary:hover { background: color-mix(in srgb, var(--sutil-2) 60%, var(--papel)); } }
#sin-mesa .mt-mesa-g > summary:focus-visible { outline: 2px solid var(--anil-2); outline-offset: -2px; }
#sin-mesa .mt-g-nm { flex: none; font-size: 14px; font-weight: 600; color: var(--tinta); }
#sin-mesa .mt-gp { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13px; color: var(--tinta-2); white-space: nowrap; text-overflow: ellipsis; }
#sin-mesa .mt-gp b { font-weight: 600; color: var(--tinta); }
#sin-mesa .mt-gp i { font-style: normal; color: var(--tinta-3); }
#sin-mesa .mt-g-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--tinta-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
#sin-mesa .mt-mesa-g[open] > summary .mt-g-chev { transform: rotate(180deg); }
#sin-mesa .mt-mesa-g[open] > summary { border-radius: 10px 10px 0 0; }
#sin-mesa .mt-sls { padding: 0 4px 4px; }
#sin-mesa .mt-sls-sinal { border-radius: 10px; background: var(--papel); }
/* um sinal: o ponto da cor, o nome (leva ao card) e a régua curta, o número, os botões */
#sin-mesa .mt-sl { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border-top: 1px solid var(--linha); }
#sin-mesa .mt-sls > .mt-sl:first-child { border-top: 0; }
#sin-mesa .mt-sl-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ruim); }
#sin-mesa .mt-sl.acima .mt-sl-ponto { background: var(--bom); }
#sin-mesa .mt-sl-tx { display: flex; flex-direction: column; min-width: 0; }
#sin-mesa .mt-sl-nome { overflow: hidden; padding: 0; border: 0; background: none; font: 500 14px/19px var(--f-txt); color: var(--tinta); text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { #sin-mesa .mt-sl-nome:hover { color: var(--anil-2); text-decoration: underline; text-underline-offset: 3px; } }
#sin-mesa .mt-sl-nome:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; border-radius: 4px; }
#sin-mesa .mt-sl-ref { overflow: hidden; font-size: 12.5px; line-height: 17px; color: var(--tinta-3); white-space: nowrap; text-overflow: ellipsis; }
#sin-mesa .mt-sl-hoje { padding: 0 5px; border-radius: 4px; background: var(--sutil); font-style: normal; font-size: 11px; font-weight: 600; text-transform: none; color: var(--tinta-2); }
#sin-mesa .mt-sl-num { font: 600 15px/1.2 var(--f-num); color: var(--tinta); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
#sin-mesa .mt-sl-ac { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 166px; }   /* a mesma largura com ou sem o Marcar: os números ficam na mesma coluna */
#sin-mesa .mt-mesa-g[open] > summary .mt-gp { opacity: 0; }   /* aberto, o resumo repetia a primeira linha */
/* os botões do sinal: Lista e Marcar no mesmo desenho (contorno leve, ícone, 30 px), a marca feita na cor do estado */
#sin-mesa .mt-ac, #sin-mesa .mt-sl .mk-bt.mk-mini { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 30px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); box-shadow: none; font: 600 12.5px/1 var(--f-txt); color: var(--tinta-2); white-space: nowrap; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { #sin-mesa .mt-ac:hover, #sin-mesa .mt-sl .mk-bt.mk-mini:hover { border-color: var(--linha-forte, var(--tinta-3)); background: var(--sutil-2); color: var(--tinta); } }
#sin-mesa .mt-ac:active, #sin-mesa .mt-sl .mk-bt.mk-mini:active { transform: scale(.97); }
#sin-mesa .mt-ac:focus-visible, #sin-mesa .mt-sl .mk-bt.mk-mini:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
#sin-mesa .mt-ac svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#sin-mesa .mt-sl .mk-bt.mk-mini svg { width: 11px; height: 11px; }
#sin-mesa .mt-sl .mk-bt.mk-mini.rep { border-color: color-mix(in srgb, var(--anil-2) 35%, var(--linha)); background: color-mix(in srgb, var(--anil-2) 8%, var(--papel)); color: var(--anil-2); }
#sin-mesa .mt-sl .mk-bt.mk-mini.conf { border-color: color-mix(in srgb, var(--bom) 35%, var(--linha)); background: color-mix(in srgb, var(--bom) 9%, var(--papel)); color: var(--bom); }
#sin-mesa .mt-sl .mk-bt.mk-mini.alerta { border-color: color-mix(in srgb, var(--ruim) 35%, var(--linha)); background: color-mix(in srgb, var(--ruim) 8%, var(--papel)); color: var(--ruim); }
#sin-mesa .mt-mesa-g > summary .mt-ac { flex: none; height: 28px; min-height: 28px; }
@media (max-width: 640px) { #sin-mesa .mt-sl { grid-template-columns: 8px minmax(0, 1fr) auto; } #sin-mesa .mt-sl-ac { grid-column: 2 / -1; } }
@media (prefers-reduced-motion: reduce) { #sin-mesa .mt-g-chev, #sin-mesa .mt-ac, #sin-mesa .mt-sl .mk-bt.mk-mini { transition: none; } }
/* ---------- v121: o conteúdo de baixo dos quadrados grandes, como no Do lead à venda (ele: "a informação contida nele é importante e também
   merece um destaque, igual fizemos no funil"): o número maior, o valor como um segundo número, o percentual "dos …" grande no pé ---------- */
html[data-fn] #pagina .kpis.fn-grandes { gap: 8px; }
html[data-fn] #pagina .kpis.fn-grandes > .kpi { container-type: inline-size; min-height: 132px; padding: 13px 15px 13px; }
html[data-fn] #pagina .kpis.fn-grandes > .kpi .num { margin-top: 4px; font-size: clamp(30px, min(2.4vw, 22cqi), 44px); line-height: 1.05; letter-spacing: -.03em; }
html[data-fn] #pagina .kpis.fn-grandes > .kpi .num small { font-size: .45em; }
html[data-fn] #pagina .kpis.fn-grandes > .kpi .sub .sl.fn-val-l, html[data-fn] #pagina .fn-q .fn-val { display: block; margin: 4px 0 2px; font: 600 clamp(16px, 1.15vw, 19px)/1.25 var(--f-num); letter-spacing: -.01em; color: var(--tinta); font-variant-numeric: tabular-nums; }
html[data-fn] #pagina .fn-q .fn-val small { font-size: .8em; color: var(--tinta-2); }
html[data-fn] #pagina .kpis.fn-grandes > .kpi .sub .sl:not(.fn-val-l) { font-size: 12.5px; line-height: 17px; color: var(--tinta-3); }
html[data-fn] #pagina .kpis.fn-grandes > .kpi > .fn-pct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 500; color: var(--tinta-2); }
html[data-fn] #pagina .kpis.fn-grandes > .kpi > .fn-pct b { font: 600 min(28px, 14cqi)/1.1 var(--f-num); letter-spacing: -.02em; color: var(--anil-2); font-variant-numeric: tabular-nums; }
html[data-fn][data-tema="escuro"] #pagina .kpis.fn-grandes > .kpi > .fn-pct b { color: #8E9FF0; }
html[data-fn] #pagina .fn-cad-cascata .fn-q .fn-pct { padding-top: 10px; }
html[data-fn] #pagina .fn-cad-cascata .fn-baixo > .sub { display: block; }
html[data-fn] #pagina .fn-q .fn-n, html[data-fn] #pagina .kpis.fn-grandes .fn-n { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
/* o verbete do glossário dentro do "?" (o que o ⓘ abria) */
html[data-mod] .ajuda-bal .fn-gl { display: block; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html[data-mod] .ajuda-bal .fn-gl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- v119 (03/11, Rodada 81): o Tráfego pago no desenho do Funil ----------
   As duas páginas do Tráfego pago (a da empresa e a do grupo) ligam o html[data-fn]: valem as regras do Funil acima. Aqui só o que é delas: os
   cinco quadrados do investido à venda, os dois números no mesmo quadrado, a barra do que os clientes rendem, a pré-venda × o tráfego e o card
   de cada empresa no grupo. Nenhuma cor nova: as da origem (Meta, Exact) e as de estado do hub. */
html[data-fn] { --tp-trafego: #2A78D6; --tp-exact: #4A3AA7; --tp-rec: var(--bom); }
html[data-fn][data-tema="escuro"] { --tp-trafego: #6AA6F0; --tp-exact: #9C8FF0; }
/* do investido à venda: cinco quadrados (três no notebook estreito, dois no celular) */
html[data-fn] #pagina .fn-cad.tp-cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { html[data-fn] #pagina .fn-cad.tp-cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { html[data-fn] #pagina .fn-cad.tp-cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-fn] #pagina .fn-cad.tp-cinco .fn-q .num { font-size: min(44px, 22cqi); }
html[data-fn] #pagina .fn-cad.tp-cinco .fn-pct b { font-size: min(24px, 12cqi); }
/* os quadrados do custo: três no card de dois terços */
html[data-fn] #pagina .kpis.tp-kpis3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-fn] #pagina .kpi .num.tp-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; white-space: normal; }
html[data-fn] #pagina .tp-par > span { display: flex; flex-direction: column; min-width: 0; }
html[data-fn] #pagina .tp-par > span + span { padding-left: 10px; border-left: 1px solid var(--linha-forte); }
html[data-fn] #pagina .tp-par b { font-weight: 600; }
html[data-fn] #pagina .kpi .num.tp-par small { margin-top: 3px; font: 500 12px/1.25 var(--f-txt); letter-spacing: 0; color: var(--tinta-3); }
html[data-fn] #pagina .tp-seta { font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-fn] #pagina .tp-seta.acima { color: var(--bom); }
html[data-fn] #pagina .tp-seta.abaixo { color: var(--ruim); }
html[data-fn] #pagina .tp-cor { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
html[data-fn] #pagina .tp-cor.exact { background: var(--tp-exact); }
/* pré-venda × tráfego pago: três colunas, uma linha por pergunta; o número da origem que sai melhor em verde */
html[data-fn] #pagina .tp-cl { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; max-width: 1040px; }
html[data-fn] #pagina .tp-cl > div { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--linha); }
html[data-fn] #pagina .tp-cl > div:nth-last-child(-n+3) { border-bottom: 0; }
html[data-fn] #pagina .tp-cl-cab { padding-top: 0 !important; font-size: 15px; font-weight: 600; color: var(--tinta); }
html[data-fn] #pagina .tp-cl-cab small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--tinta-3); }
html[data-fn] #pagina .tp-cl-rot { align-self: center; font-size: 13.5px; font-weight: 500; color: var(--tinta-2); }
html[data-fn] #pagina .tp-cl-v { display: flex; flex-direction: column; gap: 2px; }
html[data-fn] #pagina .tp-cl-v b { font: 600 21px/1.15 var(--f-num); letter-spacing: -.01em; color: var(--tinta); font-variant-numeric: tabular-nums; }
html[data-fn] #pagina .tp-cl-v small { font-size: 12.5px; line-height: 1.35; color: var(--tinta-3); }
html[data-fn] #pagina .tp-cl-v.tp-melhor b { color: var(--bom); }
@media (max-width: 640px) {
  html[data-fn] #pagina .tp-cl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html[data-fn] #pagina .tp-cl-rot { grid-column: 1 / -1; padding-bottom: 0 !important; border-bottom: 0 !important; }
  html[data-fn] #pagina .tp-cl > .tp-cl-rot.tp-cl-cab { display: none; }
}
/* Energy: o CAC e os clientes da pré-venda e do tráfego em dois gráficos lado a lado */
html[data-fn] #pagina .tp-dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { html[data-fn] #pagina .tp-dois { grid-template-columns: minmax(0, 1fr); } }
html[data-fn] #pagina .tp-g-tit { margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: var(--tinta-2); }
/* os quadrados do custo enchem o card até a altura do par (a rosca ao lado), com o número grande em cima e as linhas no pé */
html[data-fn] #pagina .kpi .tp-pe { display: flex; flex-direction: column; margin-top: auto; }

/* o Tráfego pago do grupo no desenho da Visão geral: os cartões das empresas lado a lado (rd-emp) e, embaixo, empresa por empresa (rd-pc). O bloco
   que os segura não tem fundo: cada empresa é o próprio card, como na Visão geral; o título dele fica como a linha "Cadeia do período" de lá */
html[data-fn] #pagina .bloco.tp-rd { padding: 0; background: none; box-shadow: none; }
html[data-fn] #pagina .bloco.tp-rd > h2 { min-height: 0; margin: 2px 2px 10px; padding-right: 0; font-size: 14.5px; font-weight: 500; color: var(--tinta-2); }
html[data-fn] #pagina .bloco.tp-rd > .bt-exp { display: none; }
html[data-fn] #pagina a.rd-emp.tp-emp { text-decoration: none; }
html[data-fn] #pagina a.rd-emp.tp-emp:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
html[data-fn] #pagina .tp-emp .rd-selo.tp-parte { color: var(--tinta-2); }
html[data-fn] #pagina .tp-emp .rd-selo.tp-parte i { background: var(--dado-tema, currentColor); }
html[data-fn] #pagina .tp-sv { margin-left: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta-3); }
html[data-fn] #pagina .tp-sv.acima { color: var(--bom); }
html[data-fn] #pagina .tp-sv.abaixo { color: var(--ruim); }
html[data-fn] #pagina .rd-q-tx .tp-sv { margin-left: 0; }
/* quanto rende cada cliente: dois quadrados por empresa, sem a barra em pé (são percentuais, não etapas) */
html[data-fn] #pagina .rd-qs.tp-qs2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-fn] #pagina .rd-q.tp-q { grid-template-columns: minmax(0, 1fr); }
/* o valor do pipe e das vendas embaixo do número, nos quadrados do grupo (na Energy, a fatura Flex por mês e a energia) */
html[data-fn] #pagina .rd-q-tx .tp-qv { font-size: 12px; line-height: 15px; font-weight: 500; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* o dinheiro do tráfego no grupo: um quadrado por empresa (a verba e o retorno de cada R$ 1), o número grande, a barra da verba com o tracinho nos 100% */
html[data-fn] #pagina .rd-qs.tp-qs1 { grid-template-columns: minmax(0, 1fr); }
html[data-fn] #pagina .rd-qs.tp-qs1 .rd-q .rd-n { font-size: min(30px, 16cqi); }
html[data-fn] #pagina .rd-barra.tp-vb { position: relative; display: block; height: 6px; margin: 6px 0 4px; border-radius: 3px; background: var(--sutil-3); }
html[data-fn] #pagina .rd-barra.tp-vb i { display: block; height: 100%; border-radius: inherit; background: var(--bom); }
html[data-fn] #pagina .rd-barra.tp-vb.ruim i { background: var(--ruim); }
html[data-fn] #pagina .rd-barra.tp-vb.atencao i { background: var(--atencao); }
html[data-fn] #pagina .rd-barra.tp-vb u { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: var(--tinta-2); }
html[data-fn] #pagina .rd-selo.tp-est.ruim { color: var(--ruim); }
html[data-fn] #pagina .rd-selo.tp-est.atencao { color: var(--atencao); }
html[data-fn] #pagina .rd-selo.tp-est.bom { color: var(--bom); }
html[data-fn] #pagina .rd-selo.tp-est i { background: currentColor; }

/* ---------- v122 (04/11; ele: "esses textos aqui estão se sobrepondo e os cards cinzas em cima do branco não estão aproveitando o espaço, o mesmo
   vale para essa parte do tráfego pago de todas as empresas") ----------
   Na empresa: os três quadrados do custo enchem o card até a altura do card ao lado (sobravam ~150 px vazios embaixo), o número no tamanho dos
   quadrados grandes do Funil, cada número com a própria linha embaixo (a linha que cruzava o traço do meio saiu) e a seta no pé. */
html[data-fn] #pagina .kpis.tp-kpis3 { flex: 1 1 auto; margin-bottom: 0; }
html[data-fn] #pagina .kpis.tp-kpis3 > .kpi { container-type: inline-size; padding: 14px 16px 13px; }
html[data-fn] #pagina .kpis.tp-kpis3 > .kpi > .num { margin-top: 8px; font-size: min(52px, 23cqi); line-height: 1.05; letter-spacing: -.03em; }
html[data-fn] #pagina .kpis.tp-kpis3 > .kpi > .num.tp-par { gap: 14px; font-size: min(42px, 16cqi); }
html[data-fn] #pagina .kpis.tp-kpis3 .tp-par > span + span { padding-left: 14px; }
html[data-fn] #pagina .kpis.tp-kpis3 .num.tp-par small { margin-top: 5px; font-size: 12.5px; line-height: 1.3; text-wrap: pretty; }
/* a base da conta no pé (o "÷ quanto"), no desenho do percentual do "Do investido à venda": número na cor da barra, o que ele é ao lado */
html[data-fn] #pagina .kpis.tp-kpis3 > .kpi > .num.tp-par { flex: 1 1 auto; }
html[data-fn] #pagina .kpis.tp-kpis3 .tp-base { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; margin-top: auto; padding-top: 14px; font-size: 12.5px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--tinta-2); white-space: normal; }
html[data-fn] #pagina .kpis.tp-kpis3 .tp-base b { font: 600 min(26px, 12cqi)/1.1 var(--f-num); letter-spacing: -.02em; color: var(--anil-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-fn][data-tema="escuro"] #pagina .kpis.tp-kpis3 .tp-base b { color: #8E9FF0; }
html[data-fn] #pagina .kpis.tp-kpis3 .tp-par .tp-base { flex-direction: column; align-items: flex-start; gap: 1px; }
html[data-fn] #pagina .kpis.tp-kpis3 .tp-par .tp-base b { font-size: min(20px, 8cqi); }
html[data-fn] #pagina .kpis.tp-kpis3 .tp-pe { margin-top: 0; padding-top: 8px; }
html[data-fn] #pagina .kpis.tp-kpis3 > .kpi:not(:has(.tp-base)) .tp-pe { margin-top: auto; }
html[data-fn] #pagina .kpis.tp-kpis3 .tp-pe .sub { text-wrap: pretty; }
/* Energy: a simulação de 12, 24 e 36 meses no lugar da rosca, na peça da pré-venda × tráfego (uma linha por pergunta). A coluna de 12 meses é a
   régua do hub e fica com o número cheio; 24 e 36 são simulação, no tom de apoio */
html[data-fn] #pagina .tp-cl.tp-sim { grid-template-columns: minmax(150px, 1.25fr) repeat(3, minmax(0, 1fr)); max-width: none; }
html[data-fn] #pagina .tp-cl.tp-sim > div:nth-last-child(-n+4) { border-bottom: 0; }
html[data-fn] #pagina .tp-sim .tp-cl-rot small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--tinta-3); }
html[data-fn] #pagina .tp-sim .tp-cl-cab small { color: var(--tinta-3); }
html[data-fn] #pagina .tp-sim .tp-cl-cab.tp-sim-hub small { font-weight: 600; color: var(--anil-2); }
html[data-fn][data-tema="escuro"] #pagina .tp-sim .tp-cl-cab.tp-sim-hub small { color: #8E9FF0; }
html[data-fn] #pagina .tp-sim .tp-cl-v { justify-content: center; }
html[data-fn] #pagina .tp-sim .tp-cl-v b { font-size: 22px; }
html[data-fn] #pagina .tp-sim .tp-cl-v:not(.tp-sim-hub) b { font-weight: 500; color: var(--tinta-2); }
html[data-fn] #pagina .tp-sim-pe { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 13px; line-height: 1.45; color: var(--tinta-3); }
@media (max-width: 640px) {
  html[data-fn] #pagina .tp-cl.tp-sim { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-fn] #pagina .tp-cl.tp-sim > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--linha); }
  html[data-fn] #pagina .tp-cl.tp-sim > div:nth-last-child(-n+3) { border-bottom: 0; }
}
/* No grupo: o card da empresa já é o quadro. A verba, o retorno de cada R$ 1 e o CAC sem e com LTV saem do quadrado cinza e ficam direto no card,
   como os cartões do Investido e CAC lá em cima; os dois números do LTV separados por um traço, o número maior */
html[data-fn] #pagina .rd-qs:is(.tp-qs1, .tp-qs2) { flex: 1 1 auto; }
html[data-fn] #pagina .rd-qs:is(.tp-qs1, .tp-qs2) .rd-q.tp-q { padding: 0; border-radius: 0; background: none; }
html[data-fn] #pagina .rd-qs.tp-qs1 .rd-q .rd-n { margin-top: 4px; font-size: min(38px, 16cqi); line-height: 1.05; letter-spacing: -.03em; }
html[data-fn] #pagina .rd-qs.tp-qs2 { gap: 0; }
html[data-fn] #pagina .rd-qs.tp-qs2 .rd-q.tp-q:first-child { padding-right: 12px; }
html[data-fn] #pagina .rd-qs.tp-qs2 .rd-q.tp-q + .rd-q.tp-q { padding-left: 12px; border-left: 1px solid var(--linha-forte); }
html[data-fn] #pagina .rd-qs.tp-qs2 .rd-q .rd-n { margin-top: 4px; font-size: min(30px, 11.5cqi); line-height: 1.05; letter-spacing: -.02em; }
html[data-fn] #pagina .rd-qs:is(.tp-qs1, .tp-qs2) .rd-q-tx em { margin-top: 5px; }
html[data-fn] #pagina .rd-qs.tp-qs1 .rd-barra.tp-vb { margin: 10px 0 6px; }
/* no cartão de cada empresa (Investido e CAC), o CAC sem LTV ao lado do CAC (ele: "senti falta do CAC de valor vendido do lado do CAC"): duas
   colunas com o mesmo peso; os clientes novos (com a seta) descem para a linha de baixo do CAC, que é a conta dele. Com três colunas, no notebook
   (cartão de ~200 px) os números encostavam um no outro */
html[data-fn] #pagina .rd-emp-rod.tp-rod3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 12px; }
html[data-fn] #pagina .rd-emp-rod.tp-rod3 > span { white-space: normal; }
html[data-fn] #pagina .rd-emp-rod.tp-rod3 > span + span { padding-left: 12px; border-left: 1px solid var(--linha); }
html[data-fn] #pagina .rd-emp-rod.tp-rod3 small { line-height: 1.25; white-space: nowrap; }
html[data-fn] #pagina .rd-emp-rod.tp-rod3 .rd-emp-orc b { margin-top: 4px; font-size: min(26px, 11cqi); white-space: nowrap; }
html[data-fn] #pagina .rd-emp-rod.tp-rod3 i { display: block; margin-top: 3px; font-style: normal; font-size: 12px; line-height: 1.3; color: var(--tinta-3); }
html[data-fn] #pagina .rd-emp-rod.tp-rod3 i .tp-sv { margin-left: 5px; }
/* cartão estreito (seis colunas, no notebook e no monitor de 1920): a seta desce para baixo do rótulo nas duas colunas, e os números ficam na
   mesma linha (ao lado, o "CAC sem LTV ▲ 14%" chegava a 6 px da borda do cartão) */
@container (max-width: 280px) {
  html[data-fn] #pagina .rd-emp-rod.tp-rod3 small { min-height: 32px; }
  html[data-fn] #pagina .rd-emp-rod.tp-rod3 small .tp-sv { display: block; margin-left: 0; }
}
/* o CAC mês a mês no grupo: um gráfico por empresa, na régua dela, nas mesmas colunas dos cartões de cima, separados por um traço (sem quadro) */
html[data-fn] #pagina .tp-minis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 22px; }
html[data-fn] #pagina .tp-mini { min-width: 0; padding: 0 14px; border-left: 1px solid var(--linha); }
html[data-fn] #pagina .tp-mini:nth-child(6n+1) { padding-left: 0; border-left: 0; }
html[data-fn] #pagina .tp-mini:nth-child(6n) { padding-right: 0; }
html[data-fn] #pagina .tp-mini-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; min-height: 40px; font-size: 14px; }
html[data-fn] #pagina .tp-mini-top .fc-tile { flex: none; width: 22px; height: 22px; border-radius: 7px; }
html[data-fn] #pagina .tp-mini-top .fc-tile img { width: 13px; height: 13px; }
html[data-fn] #pagina .tp-mini-top b { font-weight: 600; color: var(--tinta); white-space: nowrap; }
html[data-fn] #pagina .tp-mini-top small { flex-basis: 100%; padding-left: 30px; font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }   /* embaixo do nome: na coluna estreita do notebook, ao lado ele invadia a vizinha */
html[data-fn] #pagina .bloco .tp-mini .grafico { height: 190px; }
html[data-fn] #pagina .bloco .tp-mini .grafico.tp-mini-sem { display: grid; place-items: center; font-size: 13px; color: var(--tinta-3); text-align: center; }
@media (max-width: 1500px) {
  html[data-fn] #pagina .tp-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-fn] #pagina .tp-mini:nth-child(n) { padding: 0 14px; border-left: 1px solid var(--linha); }
  html[data-fn] #pagina .tp-mini:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  html[data-fn] #pagina .tp-mini:nth-child(3n) { padding-right: 0; }
}
@media (max-width: 760px) {
  html[data-fn] #pagina .tp-minis { grid-template-columns: minmax(0, 1fr); }
  html[data-fn] #pagina .tp-mini:nth-child(n) { padding: 0; border-left: 0; }
}

/* ---------- 03/11 (v120; ele: "quero essa rolagem fluida no hub inteiro"): a rolagem pela placa de vídeo, sem redesenhar a página ----------
   Medido nas 70 telas do hub e na gaveta, no notebook dos usuários (1536 px a 125%) com o processador 2× mais lento:
   - a tabela que rola por dentro: com fundo transparente ou canto redondo, o Chrome não a rola pela placa de vídeo (para manter a letra nítida),
     e com o mouse em cima dela a rolagem da página passava pelo código a cada quadro (13 telas, 82% de quadros lisos contra 90% nas outras).
     A marca .rola-caixa vem do marcaBorda (app.js), só na caixa que de fato rola; a cor é a do card, então só o canto muda;
   - a gaveta das listas: o mesmo, pelo canto redondo (51% de quadros lisos numa lista de 500 linhas);
   - com o mouse parado, cada linha, link e gráfico que passava por baixo dele acendia e a lista inteira era redesenhada. Enquanto rola (.rolando,
     posta pelo app.js e tirada 150 ms depois de a rolagem parar), o conteúdo não reage ao mouse. Com as três, a gaveta foi a 76% de quadros lisos. */
.tabela-wrap.rola-caixa { background-color: var(--papel); border-radius: 0; }
.gaveta { border-radius: 0; }
html.rolando #pagina .bloco > *, .gaveta.rolando > *, .rola-caixa.rolando > * { pointer-events: none; }

/* 04/11 (v124, Rodada 93): o WhatsApp da pessoa desconectado do Gvox, no topo da pessoa na Prioridades (os tokens de atenção do tema) */
.mt-wa-faixa { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin: 2px 0 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--atencao-suave); color: var(--tinta-2); font-size: 13px; line-height: 1.35; }
/* o título em tinta (o âmbar sobre o âmbar claro dava 4,46:1, abaixo do AA) e a bola de atenção na frente */
.mt-wa-faixa b { font-weight: 600; color: var(--tinta); }
/* 04/11, segunda passada: o link da conversa no Gvox nas listas do WhatsApp, no tamanho do ↗ do Salesforce */
.wa-gvox { font-size: 12px; font-weight: 600; color: var(--tinta-2); text-decoration: none; white-space: nowrap; border-bottom: 1px solid currentColor; }
.wa-gvox:hover, .wa-gvox:focus-visible { color: var(--tinta); }
.mt-wa-faixa b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--atencao-bola); vertical-align: 1px; }

/* ========== 04/11 (v125, Rodada 88): o Fechamento por período (nasceu na maquete _local/maquete_fechamento) ========== */
/* Maquete do Fechamento por período (04/11/2026, Rodada 88). Só na porta 8125; por cima do moderno.css da v121.
   O que já existe no hub fica como está (blocos com a conclusão no título, quadrados do Do lead à venda, tabela t). Aqui, só o que é novo:
   as pastilhas do período, a hierarquia (títulos, o Vendido em destaque, a cor com sentido), a barra do Farol, as barras simples da
   composição, a lista de quem cobrar e as notas.
   04/11, segunda passada (ele: "tem cards desenquadrados"; "senti tudo muito neutro, os cards se diferenciam pouco uns dos outros, talvez dar
   mais destaque para os títulos; parece ser tudo muito igual"). */

/* ---------- as pastilhas Dia · Semana · Mês · Trimestre: o laranja é só para a seleção (regra do DESIGN.md do hub) ---------- */
#pagina .fe-per { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 2px 18px; }
#pagina .fe-pas { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--sutil-2, #E3E8F4); }
#pagina .fe-pa { position: relative; min-width: 104px; padding: 9px 20px; border-radius: 9px; font: 600 15px/1.2 var(--f-txt, 'Geist', sans-serif); color: var(--tinta-2); text-align: center;
  text-decoration: none; transition: background-color 160ms cubic-bezier(.23, 1, .32, 1), color 160ms cubic-bezier(.23, 1, .32, 1), transform 160ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { #pagina .fe-pa:hover { color: var(--tinta); background: color-mix(in srgb, var(--papel) 70%, transparent); } }
#pagina .fe-pa:active { transform: scale(.97); }
#pagina .fe-pa.on { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgb(26 32 55 / .12), inset 0 -2px 0 var(--laranja, #F07020); }
#pagina .fe-pa:focus-visible, #pagina .fe-alt:focus-visible { outline: 2px solid var(--laranja, #F07020); outline-offset: 2px; }
#pagina .fe-alt { font-size: 14px; font-weight: 600; color: var(--link-cor, var(--tinta-2)); text-decoration: none; }
#pagina .fe-alt:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- hierarquia: três níveis de título que se distinguem de longe ---------- */
/* 1. a conclusão de cada bloco (a primeira grande), com a linha de apoio embaixo e espaço antes */
html[data-fn] #pagina .fe-blocos > .fn-sec { row-gap: 4px; margin-top: 34px; }
html[data-fn] #pagina .fe-blocos > .fn-sec:first-child { margin-top: 0; }
html[data-fn] #pagina .fe-blocos > .fn-sec .fn-sec-t { font: 600 18.5px/1.3 var(--f-txt); letter-spacing: -.01em; color: var(--tinta-2); }
html[data-fn] #pagina .fe-blocos > .fn-sec.fn-tese .fn-sec-t { font-size: clamp(25px, 1.8vw, 31px); font-weight: 700; letter-spacing: -.025em; color: var(--tinta); }
html[data-fn] #pagina .fe-blocos > .fn-sec .fn-sec-s { flex-basis: 100%; font-size: 14px; color: var(--tinta-3); }
/* 2. o título do card: o maior texto do card, com a pastilha da aba de onde ele vem (o mesmo ícone e a mesma cor do topo do hub) */
html[data-mod] #pagina .fe-blocos > .bloco.fe-card > h2 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: var(--tinta); }
html[data-mod] #pagina .fe-blocos > .bloco.fe-card[data-ico]::before { display: block; content: ''; position: absolute; top: 16px; left: 18px; width: 40px; height: 40px; border-radius: 12px;
  background: var(--ico-bg, var(--sutil)) var(--ico) center / 22px no-repeat; }
html[data-mod] #pagina .fe-blocos > .bloco.fe-card[data-ico] { position: relative; }
html[data-mod] #pagina .fe-blocos > .bloco.fe-card[data-ico] > h2 { min-height: 40px; margin-left: 52px; align-items: center; }
/* a tinta de cada card (a do traço do ícone): o número principal, a linha forte e as barras em pé */
html[data-mod] #pagina .fe-card[data-ico] { --fe-ink: #304090; }
html[data-mod] #pagina .fe-card[data-ico="funil"], html[data-mod] #pagina .fe-card[data-ico="desconto"] { --fe-ink: #6B4FA8; }
html[data-mod] #pagina .fe-card[data-ico="pipeline"] { --fe-ink: #1656A4; }
html[data-mod] #pagina .fe-card[data-ico="vendas"], html[data-mod] #pagina .fe-card[data-ico="sobe"] { --fe-ink: #1B6E36; }
html[data-mod] #pagina .fe-card[data-ico="ganho"], html[data-mod] #pagina .fe-card[data-ico="relogio"] { --fe-ink: #A05000; }
html[data-mod] #pagina .fe-card[data-ico="pessoas"], html[data-mod] #pagina .fe-card[data-ico="fone"] { --fe-ink: #00707A; }
html[data-mod] #pagina .fe-card[data-ico="trafego"] { --fe-ink: #AA4600; }
html[data-mod] #pagina .fe-card[data-ico="carteira"] { --fe-ink: #8A5600; }
html[data-mod] #pagina .fe-card[data-ico="alerta"] { --fe-ink: #B7162D; }
html[data-mod][data-tema="escuro"] #pagina .fe-card[data-ico] { --fe-ink: #A9B6F5; }
/* 3. o rótulo do quadrado: um passo abaixo do título do card */
html[data-fn] #pagina .fe-card .fn-q .rot { font-size: 13.5px; font-weight: 600; color: var(--tinta-2); }
/* o número principal de cada card (o primeiro quadrado) em destaque na cor do card; a linha forte e as barras na mesma tinta */
html[data-fn] #pagina .fe-card .fn-cad > .fn-q:first-child:not(.fe-hero) { background: color-mix(in srgb, var(--ico-bg, var(--sutil)) 80%, var(--papel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fe-ink) 22%, transparent); }
html[data-fn] #pagina .fe-card .fn-cad > .fn-q:first-child:not(.fe-hero) .rot { color: var(--fe-ink); }
html[data-fn] #pagina .fe-card .fn-cad > .fn-q:first-child:not(.fe-hero):not([class*="fe-tom-"]) .num { color: var(--fe-ink); }
html[data-fn] #pagina .fe-card .fn-pct b { color: var(--fe-ink, var(--anil-2)); }
html[data-fn] #pagina .fe-card .fn-q:not([style*="--fe-cor"]) .fn-tr i { background: var(--fe-ink); }

/* ---------- leads por origem: a tabelinha (a origem com o ponto da cor dela, os leads em negrito, a fatia; o total no pé) ---------- */
#pagina .fe-orig { display: inline-flex; align-items: center; gap: 9px; }
#pagina .fe-orig i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
#pagina .fe-t-orig td, #pagina .fe-t-orig th { padding-top: 8px; padding-bottom: 8px; }
#pagina .fe-t-orig td b { font-size: 15px; }
#pagina .fe-t-orig tfoot td { border-top: 1.5px solid var(--linha-forte, #A3ABBE); font-weight: 700; color: var(--tinta); }

/* ---------- os quadrados: a mesma anatomia e a mesma altura na fileira ---------- */
/* a fileira tem a altura do quadrado mais alto e não estica até a altura do card vizinho */
html[data-fn] #pagina .fe-card .fn-cad { flex: none; align-items: stretch; }
/* a linha do valor ("39,4 MWh de 97,9 MWh") logo abaixo do número, a linha forte e as de baixo sempre no pé: com duas linhas reservadas
   embaixo, a linha forte de todos os quadrados da fileira fica na mesma altura */
html[data-fn] #pagina .fe-card .fe-val { margin-top: 2px; font: 600 15px/1.3 var(--f-num, inherit); color: var(--tinta-2); font-variant-numeric: tabular-nums; text-wrap: pretty; }
html[data-fn] #pagina .fe-card .fn-cad-cascata .fn-baixo { min-height: 37px; }
html[data-fn] #pagina .fe-card .fn-pct.fe-vazio { padding-top: 0; }
html[data-fn] #pagina .fe-card .fn-q .fn-pct b:empty { display: none; }

/* o Vendido em destaque: o fundo e o contorno na cor da empresa (a única peça colorida da base) */
html[data-fn] #pagina .fe-card .fn-q.fe-hero { background: var(--marca-suave, #FBF1DE); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marca-dado, #C8800D) 30%, transparent); }
html[data-fn] #pagina .fe-card .fn-q.fe-hero .rot { color: var(--marca-tinta, var(--tinta)); }
html[data-fn] #pagina .fe-card .fn-q.fe-hero .num { font-size: min(64px, 30cqi); }

/* a cor com sentido (regra das entregas: verde ganho, laranja custo, vermelho alerta), no número e na barra em pé */
html[data-fn] #pagina .fe-card .fe-tom-bom .num { color: var(--bom); }
html[data-fn] #pagina .fe-card .fe-tom-ruim .num { color: var(--ruim); }
html[data-fn] #pagina .fe-card .fe-tom-atencao .num { color: var(--atencao); }
html[data-fn] #pagina .fe-card .fe-tom-custo .num { color: #B4530E; }
html[data-fn][data-tema="escuro"] #pagina .fe-card .fe-tom-custo .num { color: #F29A55; }
html[data-fn] #pagina .fe-card .fn-q[style*="--fe-cor"] .fn-tr i { background: var(--fe-cor); }

/* ---------- a barra do Farol (vendido, esperado e projeção) e o selo, em cima dos quadrados ---------- */
#pagina .fe-farol-barra { display: flex; align-items: center; gap: 14px; margin: 2px 0 16px; }
#pagina .fe-farol-barra .prog { flex: 1; height: 14px; }
#pagina .fe-farol-selo { flex: none; }
/* ---------- a régua do Farol (04/11, ele: "não está claro o que é a barra e o que é preenchido nela"): a barra e o selo numa linha; embaixo,
   a legenda com as mesmas marcas da barra e, alinhado ao fim dela, o que é a barra cheia ---------- */
#pagina .fe-regua { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 11px; align-items: center; margin: 2px 0 18px; }
#pagina .fe-regua .prog { height: 14px; margin: 0; }
#pagina .fe-regua-leg { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 13px; line-height: 1.35; color: var(--tinta-2); }
#pagina .fe-lg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#pagina .fe-regua-leg b { color: var(--tinta); font-weight: 650; }
#pagina .fe-lg i { flex: none; display: inline-block; }
#pagina .fe-sw-feito { width: 16px; height: 10px; border-radius: 999px; background: var(--cor); }
#pagina .fe-sw-proj { width: 16px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--cor) 26%, transparent); }
#pagina .fe-sw-esp { position: relative; width: 2px; height: 15px; margin: 0 4px; border-radius: 2px; background: var(--tinta); }
#pagina .fe-sw-esp::after { content: ''; position: absolute; top: -1px; left: -3px; width: 8px; height: 3px; border-radius: 2px; background: var(--tinta); }
#pagina .fe-lg-meta { margin-left: auto; white-space: nowrap; }
@media (max-width: 700px) { #pagina .fe-regua { grid-template-columns: 1fr; } #pagina .fe-regua .fe-farol-selo { justify-self: start; } #pagina .fe-lg-meta { margin-left: 0; } }
#pagina .fe-seta { font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* ---------- composição: nome, valor e uma barra sem trilho ---------- */
#pagina .fe-comp { display: grid; gap: 18px; }
/* na largura inteira, as três partes lado a lado (numa coluna só as barras ficavam compridas demais) */
@media (min-width: 1100px) { #pagina .fe-card.s12 .fe-comp { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; align-items: start; } #pagina .fe-card.s12 .fe-comp > .fe-nota { grid-column: 1 / -1; } }
#pagina .fe-sub-t { margin: 0 0 8px; font-size: 14.5px; font-weight: 650; color: var(--tinta); }
#pagina .fe-barras { display: grid; gap: 8px; }
#pagina .fe-b { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); grid-template-rows: auto 6px; column-gap: 12px; row-gap: 3px; align-items: baseline; }
#pagina .fe-b-n { grid-row: 1 / span 2; font-size: 14px; color: var(--tinta-2); overflow-wrap: anywhere; }
#pagina .fe-b-v { font: 600 14.5px/1.2 var(--f-num, inherit); color: var(--tinta); font-variant-numeric: tabular-nums; }
#pagina .fe-b-v small { font-weight: 400; font-size: 12.5px; color: var(--tinta-3); }
#pagina .fe-b-t { display: block; height: 6px; }
#pagina .fe-b-t i { display: block; height: 100%; border-radius: 3px; background: var(--marca-dado, #C8800D); opacity: .8; }

/* ---------- as pessoas: a foto do hub (ou as iniciais) ao lado do nome ---------- */
#pagina .fe-card .ini { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; object-fit: cover; font: 700 11.5px/1 var(--f-txt); color: var(--tinta-2); background: var(--sutil-2, #E3E8F4); }
#pagina .fe-pessoa { display: inline-flex; align-items: center; gap: 10px; }
#pagina .fe-cobrar { margin: 0; padding: 0; list-style: none; counter-reset: fe; display: grid; gap: 14px; }
#pagina .fe-cobrar li { counter-increment: fe; display: grid; grid-template-columns: 20px 42px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; }
#pagina .fe-cobrar li::before { content: counter(fe); grid-row: 1 / span 2; font: 700 17px/1 var(--f-num, inherit); color: var(--tinta-3); }
#pagina .fe-cobrar li .ini { grid-row: 1 / span 2; grid-column: 2; width: 42px; height: 42px; font-size: 14px; }
#pagina .fe-cobrar b { grid-column: 3; font-size: 15.5px; color: var(--tinta); }
#pagina .fe-cobrar span:not(.ini):not(.cinza) { grid-column: 3; font-size: 13.5px; color: var(--tinta-2); }
#pagina .fe-cobrar span.cinza { grid-row: 1; grid-column: 4; font-size: 13px; }

#pagina .fe-nota { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; max-width: 75ch; }
#pagina .fe-nota a { font-weight: 600; }
#pagina .fe-card .tabela-wrap { margin-top: 2px; }
#pagina .fe-card table.t td { vertical-align: middle; }   /* com a foto, o número ficava acima do nome */
#pagina .fe-t-sem { margin-top: 10px; }
/* ---------- vendedor a vendedor (04/11, ele: "pode deixar menor, os números estão pequenos e muito espaçados"): meia largura; o nome ocupa o
   que sobra e os números ficam juntos à direita, maiores, com o vendido em negrito ---------- */
#pagina table.t.fe-t-vend th { font-size: 12px; padding: 6px 9px; white-space: nowrap; }
#pagina table.t.fe-t-vend td { font-size: 15px; padding: 7px 9px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tinta); }
#pagina table.t.fe-t-vend td:first-child { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; padding-left: 0; }
#pagina table.t.fe-t-vend th:first-child { padding-left: 0; }
#pagina table.t.fe-t-vend td.n b { font-size: 16px; font-weight: 700; }
#pagina table.t.fe-t-vend .fe-pessoa { gap: 9px; font-size: 14.5px; max-width: 100%; }
#pagina table.t.fe-t-vend .ini { width: 26px; height: 26px; font-size: 10.5px; }
#pagina table.t.fe-t-vend td { padding-top: 6px; padding-bottom: 6px; }
/* as tabelas dos cards da maquete são curtas (no máximo 10 ou 12 linhas): sem a altura máxima com rolagem que o hub põe nos cards em par,
   que cortava a última linha do Vendedor a vendedor */
html[data-fn] #pagina .bloco.fe-card .tabela-wrap { max-height: none; overflow: visible; }
#pagina .fe-card .grafico { min-height: 280px; }
#pagina [data-fe="tri"] #fe-g-8tri { min-height: 300px; }

/* no notebook, os quatro quadrados de um card de meia largura em 2 × 2: em quatro colunas o texto de baixo quebrava em 4 linhas */
@media (max-width: 1500px) { html[data-fn] #pagina section.fe-card.s6 .fn-cad.fn-cad-cascata.fe-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  #pagina .fe-pa { min-width: 0; flex: 1; padding: 8px 10px; }
  #pagina .fe-pas { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #pagina .fe-pa { transition: none; }
  #pagina .fe-pa:active { transform: none; }
}
/* o F1 na tabela de leads por origem: a coluna em negrito, a cor do funil */
#pagina table.t.fe-t-orig td.fe-f1 { font-weight: 650; color: var(--tinta); }
/* ---------- os números que abrem lista (04/11, ele: "agora é deixar tudo clicável, com lista"): o quadrado é um botão, como no Funil do hub,
   com o texto alinhado à esquerda e o ícone de lista ao lado do número; a linha da barra que abre lista ganha a mão e o realce ---------- */
html[data-fn] #pagina .fe-card button.fn-q { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
html[data-fn] #pagina .fe-card button.fn-q:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
#pagina .fe-b-lk { cursor: pointer; border-radius: 6px; transition: background-color .15s ease; }
#pagina .fe-b-lk:hover { background: color-mix(in srgb, var(--anil-2, #2D6FCD) 7%, transparent); }
#pagina .fe-b-lk:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #pagina .fe-b-lk { transition: none; } }
/* ---------- a régua da Visão geral nos quadrados (04/11): o fundo verde (Bom) ou vermelho (Ruim) e o selo, como os quadrados das empresas
   na Visão geral (.rd-q.bom/.ruim); Normal fica com o fundo de sempre e o selo em tinta. O estado vence o tom da marca do Vendido ---------- */
html[data-fn] #pagina .fe-card .fn-cad > .fn-q.fe-est-bom.fe-est-bom { background: var(--bom-suave, #E6F4EA); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bom) 28%, transparent); }
html[data-fn] #pagina .fe-card .fn-cad > .fn-q.fe-est-ruim.fe-est-ruim { background: var(--ruim-suave, #FBE9EB); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ruim) 26%, transparent); }
html[data-fn] #pagina .fe-card .fn-cad > .fn-q.fn-q.fn-q:is(.fe-est-bom, .fe-est-ruim) .rot { color: var(--tinta); }   /* vence a tinta do card no primeiro quadrado */
html[data-fn] #pagina .fe-card .fn-cad > .fn-q.fn-q.fn-q:is(.fe-est-bom, .fe-est-ruim):not([class*="fe-tom-"]) .num { color: var(--tinta); }
html[data-fn] #pagina .fe-card .fn-q:is(.fe-est-bom, .fe-est-ruim) .fn-tr { background: color-mix(in srgb, var(--papel) 60%, transparent); }
html[data-fn] #pagina .fe-card .fn-q .fe-est { display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 999px; font: 700 12px/17px var(--f-txt, inherit); }
html[data-fn] #pagina .fe-card .fn-q .fe-est.bom { background: var(--bom); color: var(--papel, #fff); }
html[data-fn] #pagina .fe-card .fn-q .fe-est.ruim { background: var(--ruim); color: var(--papel, #fff); }
html[data-fn] #pagina .fe-card .fn-q .fe-est.normal { padding-left: 0; color: var(--tinta-2); font-weight: 600; }

/* ---------- De onde veio a venda (04/11, ele: "isso aqui não ficou moderno e bem formatado"): a barra dividida com a legenda embaixo e a
   tabelinha da origem ---------- */
#pagina .fe-comp2 { display: grid; gap: 18px; }
#pagina .fe-divs { display: grid; gap: 18px 28px; }
@media (min-width: 1100px) { #pagina .fe-divs.fe-n2 { grid-template-columns: 1fr 1fr; } }
#pagina .fe-div .fe-sub-t { margin: 0 0 8px; }
#pagina .fe-div-barra { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--sutil-3, #E6E9F0); }
#pagina .fe-div-barra span { display: block; height: 100%; min-width: 4px; }
#pagina .fe-div-leg { display: grid; gap: 2px; margin-top: 8px; }
#pagina .fe-div-it { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; align-items: center; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; }
#pagina .fe-div-it i { width: 10px; height: 10px; border-radius: 3px; }
#pagina .fe-div-rot { font-size: 14px; color: var(--tinta); min-width: 0; }
#pagina .fe-div-it b { font: 700 19px/1.1 var(--f-num, inherit); color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#pagina .fe-div-it small { grid-column: 2 / 4; font-size: 12.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
#pagina .fe-lk { cursor: pointer; transition: background-color .15s ease; }
#pagina .fe-lk:hover { background: color-mix(in srgb, var(--anil-2, #2D6FCD) 7%, transparent); }
#pagina .fe-lk:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #pagina .fe-lk { transition: none; } }

/* ===== v126 (04/11, Rodada 94): o Vendedor a vendedor com evolução ===== */
#vv-corpo.vv2-corpo { container-type: inline-size; }
.vv2 { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 27%, 520px); gap: 18px; align-items: start; }
@container (max-width: 1480px) { .vv2 { grid-template-columns: minmax(0, 1fr); } .vv2-evo { position: static; } }

/* ---------- a tabela ---------- */
.vv-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--tinta-2); margin: 0 0 6px; }
.vv-leg .vv-leg-s { color: var(--tinta-3); }
.vv-leg-setas b { font-size: 10.5px; margin: 0 2px 0 6px; } .vv-leg-setas b:first-child { margin-left: 0; }
.vv-leg-setas b.sobe { color: var(--bom); } .vv-leg-setas b.desce { color: var(--ruim); } .vv-leg-setas b.igual { color: var(--tinta-3); }
#t-vendedores td { padding: 9px 10px; }
#t-vendedores th { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); padding: 8px 10px 7px; }
#t-vendedores .vv-grupos th { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); padding: 2px 10px 4px; }
#t-vendedores .vv-l { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; }
#t-vendedores .vv-n { display: inline; font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--tinta); letter-spacing: -.01em; }
#t-vendedores .vv-n .cinza { font-weight: 500; color: #A3ABBE; }
#t-vendedores .vv-n a.lk { color: inherit; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
#t-vendedores .vv-n a.lk:hover { color: var(--anil-2); text-decoration-color: currentColor; }
#t-vendedores .vv-s { font-size: 11.5px; margin-top: 1px; }
#t-vendedores .vv-d { display: inline-block; width: 12px; font-style: normal; font-size: 10.5px; line-height: 1; text-align: center; cursor: default; }
.vv-d.sobe, .evo-num .sobe, .vv-t.sobe { color: var(--bom); }
.vv-d.desce, .evo-num .desce, .vv-t.desce { color: var(--ruim); }
.vv-d.igual, .evo-num .igual, .vv-t.igual { color: var(--tinta-3); }
#t-vendedores .vv-pes { gap: 10px; min-width: 150px; }
#t-vendedores .vv-pes .ini { width: 36px; height: 36px; }
#t-vendedores .vv-pes span { font-size: 15px; font-weight: 600; }
#t-vendedores .vv-pes span a { color: var(--tinta); }
#t-vendedores a.cel-rod { font-size: 15px; padding: 2px 9px; min-width: 44px; border-radius: 7px; }
#t-vendedores .vv-toq { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
#t-vendedores .vv-toq > div { text-align: right; }
.vv-spark { flex: none; display: block; overflow: visible; }
.vv-spark.vv-spark-vazio { width: 64px; height: 22px; }
.vv-spark polyline { fill: none; stroke: #A3ABBE; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.vv-spark circle { fill: var(--tinta-3); }
.vv-spark.sobe circle { fill: var(--bom); } .vv-spark.desce circle { fill: var(--ruim); }
#t-vendedores tbody tr.vv-lin { cursor: pointer; }
#t-vendedores tbody tr.vv-lin:hover td { background: var(--sutil-2); }
#t-vendedores tbody tr.vv-sel td { background: color-mix(in srgb, var(--anil) 7%, var(--papel)); }
#t-vendedores tbody tr.vv-sel td:first-child { box-shadow: inset 3px 0 0 var(--anil-2); }

/* ---------- o painel da evolução ---------- */
.vv2-evo { background: var(--fundo-2); border-radius: var(--raio-m); padding: 16px 16px 12px; min-width: 0; position: sticky; top: 76px; }
.vv2-evo .evo-carrega { min-height: 360px; }
.evo-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.evo-quem { display: flex; align-items: center; gap: 10px; min-width: 0; }
.evo-quem .ini { width: 36px; height: 36px; margin: 0; flex: none; }
.evo-quem .evo-time { display: grid; place-items: center; background: var(--anil); color: #fff; font-size: 13px; font-weight: 700; border-radius: 50%; }
.evo-quem label { display: flex; flex-direction: column; min-width: 0; }
.evo-r { font-size: 11.5px; color: var(--tinta-3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.evo-quem select, .evo-pe select { font: inherit; font-size: 15px; font-weight: 600; color: var(--tinta); border: 0; background: transparent; padding: 0 18px 0 0; max-width: 230px; cursor: pointer; }
.evo-pe select { font-size: 13.5px; font-weight: 600; }
.evo-cab .seg button { min-height: 30px; padding: 0 11px; font-size: 13px; }
.evo-mets { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.evo-mets button { border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta-2); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .16s cubic-bezier(.23, 1, .32, 1); }
.evo-mets button:hover { color: var(--tinta); border-color: var(--tinta-3); }
.evo-mets button:active { transform: scale(.97); }
.evo-mets button[aria-pressed="true"] { background: var(--anil); border-color: var(--anil); color: #fff; font-weight: 600; }
.evo-mets button:focus-visible, .vv-hm-nome:focus-visible, .vv-hm-mais:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
.evo-tit { font-size: 16px; font-weight: 600; line-height: 1.35; margin: 12px 0 10px; color: var(--tinta); text-wrap: balance; }
.evo-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.evo-num { background: var(--papel); border-radius: 12px; padding: 9px 12px 10px; min-width: 0; }
.evo-num-r { display: block; font-size: 12px; color: var(--tinta-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evo-num b { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.evo-num small { display: block; font-size: 11.5px; color: var(--tinta-3); margin-top: 1px; }
.evo-num.parcial b { color: var(--tinta-2); }
.evo-leg { margin: 12px 0 0; gap: 4px 14px; font-size: 12.5px; }
.evo-leg span { display: inline-flex; align-items: center; gap: 6px; }
.evo-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.evo-leg i.tracejado { width: 16px; height: 0; border-top: 2px dashed var(--tinta-3); background: none; border-radius: 0; vertical-align: middle; }
.evo-graf { height: 250px; margin-top: 4px; }
.evo-pe { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--tinta-3); margin-top: 6px; }
.evo-pe label { color: var(--tinta-2); }
.evo-dica { color: var(--tinta-2); }
.evo-pend { font-size: 11.5px; line-height: 1.4; }

/* ---------- o mapa de cada vendedor ---------- */
.vv2-mapa { margin-top: 22px; }
.vv-hm-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.vv-hm-cab h3 { font-size: 16px; font-weight: 600; margin: 0; }
.vv-hm-sub { font-size: 12.5px; color: var(--tinta-3); }
.vv-hm-wrap { overflow-x: auto; scrollbar-width: thin; }
table.vv-hm { border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; min-width: 100%; }
table.vv-hm th, table.vv-hm td { font-size: 13px; white-space: nowrap; }
table.vv-hm thead th { font-size: 12px; font-weight: 600; color: var(--tinta-3); padding: 4px 6px; text-align: right; vertical-align: bottom; line-height: 1.2; }
table.vv-hm thead th small { display: block; font-weight: 500; font-size: 11px; }
table.vv-hm thead th.parcial { color: var(--tinta-2); }
table.vv-hm .vv-hm-c0 { text-align: left; }
table.vv-hm tbody th, table.vv-hm tfoot th { position: sticky; left: 0; z-index: 1; background: var(--papel); text-align: left; padding: 0 10px 0 0; font-weight: 600; }
table.vv-hm td { padding: 6px 8px; min-width: 44px; border-radius: 6px; text-align: right; font-weight: 600; color: var(--tinta);
  background: color-mix(in srgb, var(--vv-cor) calc(var(--a, 0) * 78%), var(--sutil-2)); }
table.vv-hm td[data-forte] { color: #fff; }
table.vv-hm td.zero { color: #A3ABBE; font-weight: 500; }
table.vv-hm td.parcial { outline: 1px dashed var(--linha-forte); outline-offset: -1px; }
table.vv-hm td.vv-hm-nd { background: transparent; color: #A3ABBE; font-weight: 500; }
table.vv-hm td.vv-hm-t, table.vv-hm th.vv-hm-t { background: transparent; padding-left: 14px; min-width: 76px; }
.vv-t { font-weight: 700; font-size: 13px; }
.vv-hm-nome { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 3px 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tinta); cursor: pointer; text-align: left; }
.vv-hm-nome .ini { width: 26px; height: 26px; margin: 0; flex: none; font-size: 10.5px; }
.vv-hm-nome:hover span { text-decoration: underline; text-underline-offset: 3px; }
table.vv-hm tr.vv-sel th .vv-hm-nome span { color: var(--anil-2); }
table.vv-hm tr.vv-sel th { box-shadow: inset 3px 0 0 var(--anil-2); padding-left: 8px; }
table.vv-hm tr.vv-cinza th .vv-hm-nome { color: var(--tinta-3); }
table.vv-hm tfoot th small { display: block; font-size: 11px; font-weight: 500; color: var(--tinta-3); }
table.vv-hm tfoot td { background: var(--sutil); color: var(--tinta); }
table.vv-hm tfoot tr.vv-hm-time td, table.vv-hm tfoot tr.vv-hm-time th { padding-top: 10px; }
table.vv-hm tfoot tr.vv-hm-time th { border-top: 1px solid var(--linha); }
.vv-hm-mais { margin-top: 10px; border: 0; background: transparent; color: var(--anil-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.vv-hm-mais:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .evo-mets button { transition: none; } .evo-mets button:active { transform: none; } }
html[data-tema="escuro"] table.vv-hm tbody th, html[data-tema="escuro"] table.vv-hm tfoot th { background: var(--papel); }

/* o 1º contato: a linha de baixo (típico, leads, sem contato) quebra, para a coluna não alargar a tabela */
#t-vendedores td.vv-cpc .vv-s { white-space: normal; max-width: 128px; margin-left: auto; line-height: 1.3; }
#t-vendedores td.vv-cpc { min-width: 112px; }
#t-vendedores td, #t-vendedores th { padding-left: 8px; padding-right: 8px; }

/* notebook: a tabela cabe sem rolar de lado (a minilinha e as margens encolhem) */
@container (max-width: 1300px) {
  #t-vendedores td, #t-vendedores th { padding-left: 6px; padding-right: 6px; }
  #t-vendedores .vv-toq { gap: 6px; } .vv-spark { width: 46px; } .vv-spark.vv-spark-vazio { width: 46px; }
  #t-vendedores .vv-pes { min-width: 128px; gap: 8px; } #t-vendedores .vv-pes .ini { width: 30px; height: 30px; }
  #t-vendedores .vv-n { font-size: 16px; } #t-vendedores td.vv-cpc .vv-s { max-width: 112px; } #t-vendedores td.vv-cpc { min-width: 100px; }
}

.vv2.pilha { grid-template-columns: minmax(0, 1fr); } .vv2.pilha .vv2-evo { position: static; }

/* v127 (P5 da auditoria da v126): no mapa de cada vendedor, a gestão e a coordenação levam a palavra ao lado do nome, como na tabela */
.vv-hm-nome .vv-hm-tag{margin-left:6px;font-size:.72em;font-weight:500;color:var(--tinta-3);white-space:nowrap}
/* v127 (P7 da auditoria da v126): o rodapé das tabelas que rolam (quantas linhas mostra; rolar para o lado) e a sombra das colunas fora */
.tab-rod{margin:6px 2px 0;font-size:12px;line-height:1.35;color:var(--tinta-3)}
.tabela-wrap.rola-lado{box-shadow:inset -14px 0 12px -12px rgba(20,24,43,.28)}

/* v128 (P17 da auditoria da v126): a tabela Por pessoa da Prioridades cabe no quadro. O mapa tinha min-width de 760 px e a mesa, a 1366,
   ~593 px: Resultado e Limpeza do CRM ficavam atrás do painel da pessoa. Na mesa estreita, sem a largura mínima, colunas de tema de 64 px e
   o título curto (o inteiro no balão) */
#pagina table.t.mt-mapa.mt-mesa-tab { min-width: 0; }
#pagina .mt-mesa-tab th.tema .t-c { display: none; }
@container (max-width: 760px) {
  #pagina .mt-mesa-tab th.tema { width: 64px; }
  #pagina .mt-mesa-tab th.tema .t-l { display: none; }
  #pagina .mt-mesa-tab th.tema .t-c { display: inline; }
  #pagina .mt-mesa-tab td .mt-cel { padding: 0 2px; }
}
/* o avatar sem foto no painel da pessoa com o círculo, como na lista (antes as iniciais ficavam soltas) */
#pagina .mt-mesa-dcab span.av { display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: var(--cor); background: color-mix(in srgb, var(--cor) 13%, var(--papel)); }

/* v128 (P18 da auditoria da v126): a gaveta. A barra do título e do ✕ fica presa no topo ao rolar; o título das colunas fica preso logo
   abaixo dela (a caixa da tabela que cabe de lado não rola sozinha: antes ela virava a caixa do "sticky" e o cabeçalho sumia ao rolar);
   a tabela que não cabe de lado rola numa caixa da altura da janela, com a barra de rolar de lado à vista */
.gaveta .gv-barra { position: sticky; top: 0; z-index: 5; display: flex; align-items: flex-start; gap: 12px; margin: -20px -22px 0; padding: 20px 22px 10px; background: var(--papel); }
.gaveta .gv-barra h3 { flex: 1; min-width: 0; margin: 0; }
.gaveta .gv-barra .fechar { position: static; flex: none; margin: -6px -8px 0 0; }
.gaveta .tabela-wrap:not(.larga-x) { overflow: visible; }
.gaveta .tabela-wrap:not(.larga-x) table.t thead th { top: var(--gv-topo, 0px); z-index: 3; }
.gaveta .tabela-wrap.larga-x { max-height: calc(100dvh - 170px); overflow: auto; }
/* a sombra só com a gaveta aberta (fechada, fora da tela, ela escurecia a borda direita de todas as telas) */
.gaveta:not(.aberta) { box-shadow: none; }
/* o esmaecido do pé chega ao fim da gaveta (ficava 20 px acima, com uma faixa nítida embaixo) */
.gaveta.tem-mais::after { bottom: -20px; }
/* o texto de baixo dos números da gaveta quebra em duas linhas, em vez de cortar com reticências */
.ls-kpi .sub { white-space: normal; }
/* denso (9 colunas ou mais): menos espaço nas células */
.ls-tab.denso table.t td, .ls-tab.denso table.t th { padding-left: 7px; padding-right: 7px; }

/* ---------- v128 (P19 a P24 da auditoria da v126) ---------- */
/* P19 celular: a tabela do Fechamento rola dentro do card (a página rolava de lado) e o nome não vira "Me", "Lar", "Vit" */
@media (max-width: 600px) {
  html[data-fn] #pagina .bloco.fe-card .tabela-wrap { overflow-x: auto; }
  #pagina table.t.fe-t-vend td:first-child { min-width: 120px; max-width: 170px; }
  #pagina .fe-card { min-width: 0; }
}
/* P20 o selo dentro do quadrado quebra linha (o "parte dos agendamentos não chegou ao Salesforce" saía do card e a página rolava de lado) */
#pagina .kpi .selo-v { white-space: normal; max-width: 100%; }
/* P21 tema escuro */
html[data-tema="escuro"] body { --marca-suave: #3A2314; --marca-tinta: #F6A06A; }   /* telas sem empresa (Metas, Decisões, Usuários) */
html[data-tema="escuro"] .vz-p[aria-current="page"] { background: #4E5BC4; color: #fff; box-shadow: inset 0 0 0 1px #8E9FF0; }
html[data-fn][data-tema="escuro"] #pagina .fe-card .fn-cad > .fn-q:first-child:not(.fe-hero) { background: color-mix(in srgb, var(--fe-ink) 14%, var(--papel)); }
html[data-tema="escuro"] table.t.mapa tbody td.cel.esc, html[data-tema="escuro"] table.t.mapa tbody tr:hover td.cel.esc { background-color: color-mix(in srgb, var(--esc) 32%, var(--papel)); }
/* P22 a coluna "Contra o anterior" do mapa presa à direita, com a sombra de que a tabela continua (na escala Dia ela sumia sem aviso) */
table.vv-hm td.vv-hm-t, table.vv-hm th.vv-hm-t { position: sticky; right: 0; z-index: 1; background: var(--papel); box-shadow: -12px 0 10px -10px rgb(20 24 43 / .28); }
/* P23 o total da tabela fica preso no pé quando ela rola por dentro (o Total dos Motivos de perda ficava escondido) */
.tabela-wrap table.t tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--papel); }
/* P24 as duas fileiras de quadrados do Ganhos e perdas com o espaço da grade entre elas (ficavam grudadas) */
html[data-mod] #pagina .fn-cad + .kpis, html[data-mod] #pagina .fn-cad-cascata + .kpis { margin-top: 12px; }
/* v128 (P18): na lista larga (9 colunas ou mais), o nome e a origem · campanha mais estreitos (o texto inteiro fica no balão) */
.ls-tab.denso table.t td.nome .corta-txt { max-width: 200px; }
.ls-tab.denso table.t td.corta { max-width: 130px; }
.ls-tab.denso table.t td.c-dono .corta-txt, .ls-tab.denso table.t td.c-status .corta-txt { max-width: 110px; }
.ls-tab.denso table.t td.c-semtoque small { display: block; line-height: 1.2; }
/* v128 (P18): no modo denso, o selo "comercial" (o caso comum) sai do Dono; os de pré-venda e inativo ficam */
.ls-tab.denso table.t td.c-dono .selo.papel-comercial { display: none; }

/* ---------- v129 (P25 e P26 da auditoria da v126) ---------- */
/* o espaço da faixa de filtros e da linha do período guardado desde a primeira pintura (a faixa chega depois do esqueleto e empurrava a
   tela inteira para baixo: o salto da abertura da Prioridades da Energy era 0,51) */
#periodo:empty { min-height: 58px; }
body[data-emp]:not([data-emp=""]) #periodo-ativo:empty { min-height: 38px; }
/* o selo da coleta, quando vira só o ponto, fica na primeira fileira, encostado à direita, em vez de abrir uma segunda fileira só com ele */
@media (min-width: 900px) {
  .periodo-in { position: relative; }
  .fresco-per.curto { position: absolute; top: 16px; right: 1px; }
}

/* v130 (P31): o valor "R$ x de R$ y" não quebra no meio. r98 (efeito-A.e0, lay-gm-14): o nowrap fazia a linha passar da borda do
   quadrado (até 191 px a 390, e a página rolava de lado); agora ela quebra, mas só no ponto certo: cada valor ("R$ 23,6 mil", "426 MWh") já
   vem com espaço sem quebra e o "de R$ y" / "para a meta" desce inteiro (.fe-vq) */
html[data-fn] #pagina .fn-q .fe-val { white-space: normal; }
html[data-fn] #pagina .fn-q .fe-val .fe-vq { display: inline-block; }

/* ---------- v131 (P37): gráfico sem nenhum valor: a frase por cima, no lugar do quadro em branco */
.grafico.graf-zero { position: relative; }
.grafico.graf-zero::after { content: attr(data-vazio); position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--papel); color: var(--tinta-3); font-size: 14px; }

/* ---------- v132 (P40): o menu do filtro da gaveta com todos os valores, rolando */
.gaveta .ls-menu { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
/* v130 (P30): o número e a linha de baixo dos cartões do Tráfego pago do grupo com 4 px de espaço */
.tp-rod3 b + i, .rd-emp-rod .tp-sv { margin-left: 4px; }

/* v127 (conferência): na impressão a tabela sai inteira; o rodapé "role dentro da tabela" não vai para o papel */
@media print { .tab-rod { display: none !important; } }
/* v127 (conferência): o Fora da equipe numa linha (o nome com reticências; o cargo no balão) */
#t-eq-fora td:first-child { white-space: nowrap; }
#t-eq-fora td:first-child .corta-txt { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* v127 (conferência, segunda passada): o Fora da equipe cabe no card em par a 1366 (o nome até 110 px, o selo "inativo" embaixo) */
#t-eq-fora td:first-child .corta-txt { max-width: 110px; }
#t-eq-fora td:first-child .selo { display: block; width: max-content; margin-top: 2px; }
/* a meta de parte do período: os meses e a venda deles embaixo do % */
.rd-emp-meta .rd-meta-cobre { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.rd-soma small { font-size: 12px; }
/* v127 (conferência): as quatro colunas do Fora da equipe cabem no card em par (cabeçalho em até duas linhas, a barra com 76 px) */
#t-eq-fora th { white-space: normal; }
#t-eq-fora td.barra { min-width: 76px; }
/* v127 (conferência, lay-geral-04): agendamento é número pequeno; os quatro meses da Meta por coordenação cabem no card em par a 1366 */
section[data-id="meta-por-coordenacao"] input.cfg-num { width: 96px; }
/* v127 (conferência, terceira passada): no celular, o nome do Fora da equipe mais curto e a linha da meta do cartão da Visão geral quebra */
@media (max-width: 767px) { #t-eq-fora td:first-child .corta-txt { max-width: 72px; } .rd-emp-meta { white-space: normal; } }
/* v129 (P25): o seletor nativo do Vendedor (celular, ou antes de virar botão) não passa de 190 px */
#f-vendedor { max-width: 190px; }
/* v129 (P25): o esqueleto do Prioridades de hoje com a altura da menor das seis empresas (o conteúdo chega com 506 a 1.010 px) */
#sin-mapa[data-modo="aba"] > .sk-box { min-height: 500px; }
/* v130 (P30): o número grande do "Cada R$ 1 investido virou" não encosta na linha de baixo */
html[data-fn] #pagina .rd-q-tx .rd-n + .tp-qv { margin-top: 4px; }

/* ---------- r98 (lay-gm-11): o card com o gráfico vazio fica baixo, só com a frase; os botões (R$ | Nº, Barras | Pizza) e a legenda de texto
   ficavam em cima do "Nada no período." e o card guardava os ~400 px do gráfico */
html #pagina .grafico.graf-zero { height: 120px !important; min-height: 0 !important; }
html #pagina .grafico.graf-zero > div { visibility: hidden; }   /* o eixo vazio ("R$ 0, R$ 0, R$ 1") nem por baixo da frase */
#pagina section.bloco:has(.grafico.graf-zero):not(:has(.grafico:not(.graf-zero))) :is(.vis-ctrl, .leg-graf) { display: none; }

/* ---------- r98 (lay-tendas-16): no quadrado de duas colunas do CAC (com LTV, sem LTV), a frase embaixo do número em letra 11,5 e com as
   linhas equilibradas: "pela safra de 12 meses" quebrava em 4 linhas numa coluna de 69 px a 1366 */
html[data-fn] #pagina .kpis.tp-kpis3 .num.tp-par small { font-size: 11.5px; line-height: 1.25; text-wrap: balance; }

/* ---------- r98 (G2): os quadrados de número ---------- */
/* lay-tendas-06: no "Conta com oportunidade" do Funil, o ☰ fica ao lado do número dos sem oportunidade (como no número de cima) e o texto
   desce inteiro: antes, "31 sem oportunidade ☰" ocupava três linhas, com o ícone sozinho na última */
html[data-fn] #pagina .fn-q .fn-falta { padding-right: 0; }
html[data-fn] #pagina .fn-q .fn-falta .fn-falta-n { display: inline-flex; align-items: center; gap: 6px; }
/* novo (varredura do G2): no Tráfego pago do grupo, no celular (cartão com menos de 200 px), o rótulo "CAC sem LTV" não cabia na coluna e
   passava 4 px da borda do cartão, cortado ("CAC sem LT"); ele quebra, e os dois rótulos guardam três linhas para os números ficarem na mesma altura */
@container (max-width: 200px) {
  html[data-fn] #pagina .rd-emp-rod.tp-rod3 small { white-space: normal; min-height: 48px; }
}
/* novo (varredura do G2): no Tráfego pago do grupo, a 1920 (seis colunas), a linha "da 1ª fatura · Cemig 31%" embaixo do CAC sem LTV passava
   7 px do quadrado (não quebrava); ela quebra depois do "·" */
html[data-fn] #pagina .rd-qs.tp-qs2 .rd-q-tx em { white-space: normal; }

/* ---------- r98 (G5): o enquadramento que sobrou do v128 ---------- */
/* lst-06: na lista densa, o título da coluna quebra em duas linhas quando falta espaço ("Dias / parado", "Criada / em"): as Oportunidades para
   cobrar tinham 1.299 px numa caixa de 1.274 e a Origem ficava fora. No histórico das marcas, o sinal e a nota cortam pela largura */
.ls-tab.denso table.t th { white-space: normal; }
.gaveta table.t td.mk-sinal .corta-txt { max-width: 280px; }
.gaveta table.t td.mk-nota .corta-txt { max-width: 220px; }
/* lay-sm-15, lay-tendas-07: no Taxa de ganho no período, a fileira de baixo no desenho da cascata de cima (o número grande, a barra em pé, as
   linhas de baixo) e nas mesmas três colunas, com o espaço da grade entre as fileiras; os dois tempos dividem o terceiro quadrado */
html[data-fn] #pagina .fn-cad.fn-cad-win { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin-top: 8px; }
html[data-fn] #pagina .fn-cad-win > .fn-q-larga { grid-column: span var(--span, 1); }
html[data-fn] #pagina .fn-cad-win .fn-q .num { margin-bottom: 4px; }
html[data-fn] #pagina .fn-cad-win .fn-q .num small { font-size: .42em; }
html[data-fn] #pagina .fn-cad-win .fn-baixo { min-height: 0; }
html[data-fn] #pagina .fn-cad-win .fn-baixo > .sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 17px; color: var(--tinta-3); }
html[data-fn] #pagina .fn-cad-win .fn-baixo .kl { max-width: 360px; }
/* os dois tempos: o rótulo, o número e as linhas de baixo de um na mesma altura dos do outro (subgrid; a caixa de medida é o quadrado, porque
   a do .fn-tx desligaria o subgrid) */
html[data-fn] #pagina .fn-cad-win .fn-q.fn-q-dur { container-type: inline-size; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 0 14px; }
html[data-fn] #pagina .fn-cad-win .fn-q-dur > .fn-tx { container-type: normal; display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
html[data-fn] #pagina .fn-cad-win .fn-q-dur > .fn-tx:first-child { grid-column: 1; }
html[data-fn] #pagina .fn-cad-win .fn-q-dur > .fn-tx + .fn-tx { grid-column: 2; padding-left: 14px; border-left: 1px solid var(--linha); }
html[data-fn] #pagina .fn-cad-win .fn-q-dur .num { font-size: min(56px, 16cqi); }
@media (max-width: 900px) {
  html[data-fn] #pagina .fn-cad.fn-cad-win { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-fn] #pagina .fn-cad-win > .fn-q-larga { grid-column: auto; }
  html[data-fn] #pagina .fn-cad-win > .fn-q-dur { grid-column: 1 / -1; }
}
/* no celular, um quadrado por linha: as linhas dos dois negócios ("Venda nova 19% 56 de 302") não cabiam em meia tela */
@media (max-width: 600px) { html[data-fn] #pagina .fn-cad.fn-cad-win { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { html[data-fn] #pagina .fn-cad-win .fn-q-dur .num { font-size: 24px; } }
/* lay-energy-06: o card em par cuja tabela cabe inteira e ainda sobra espaço fica da altura dela, sem esticar até a do vizinho (app.js, ajustaTabelas) */
#pagina .blocos > section.bloco.fn-justo { align-self: start; }
/* efeito-A.n1: na mesa estreita da Prioridades (até 760 px), a coluna da pessoa fica com o que sobra depois das cinco colunas de tema (64 px):
   entre 1.180 e 1.270 px de janela, a tabela tinha 550 px numa caixa de 496 e o CRM ficava 26 px sob o painel da pessoa */
@container (max-width: 760px) { #pagina .mt-mesa-tab th:first-child { width: auto; } }
/* efeito-A.n2: no celular (a mesa com menos de 470 px), a pessoa fica com 150 px, presa à esquerda, e a tabela rola de lado dentro da caixa
   (a página rolava de lado: 516 px numa tela de 390) */
@container (max-width: 469px) {
  #pagina .mt-mesa-tabw { overflow-x: auto; }
  #pagina .mt-mesa-tab th:first-child { width: 150px; }
  #pagina .mt-mesa-tab tbody th { position: sticky; left: 0; z-index: 2; background: var(--papel); }
}
/* efeito-A.n0: a barra do título fica presa no topo da gaveta sem a faixa de 20 px acima dela, por onde as linhas da tabela passavam ao rolar
   (o "sticky" prende na borda de dentro do recuo da gaveta); o respiro de cima agora mora dentro da barra */
.gaveta { padding-top: 0; }
.gaveta .gv-barra { margin-top: 0; }
/* r98 (lst-11): o número do mapa do Vendedor a vendedor abre a lista; na célula escura ele continua branco (também ao passar o mouse) */
table.vv-hm td a.vv-hm-lk { color: inherit; text-decoration-color: var(--linha-forte); }
table.vv-hm td[data-forte] a.vv-hm-lk, table.vv-hm td[data-forte] a.vv-hm-lk:hover, table.vv-hm td[data-forte] a.vv-hm-lk:focus-visible { color: #fff; text-decoration-color: rgba(255,255,255,.6); }
/* r98 (melissa-cobrar): o aviso de que o card segue a casa escolhida */
.casa-segue b { font-weight: 700; }
.casa-segue .btn-mini { margin-left: 6px; text-decoration: none; }
/* r98 (perf-anim-01): a barra do Farol, da meta e do ritmo enche em 800 ms, a regra da Rodada 41 (era 900 ms) */
.prog .feito, .prog .proj, .barra-meta .feito, .ritmo-chip .mt > span { transition-duration: .8s; }

/* ---------- r99 (G3): tabelas, quadrados e painéis ---------- */
/* vvhm-390: no celular (o mapa com até 600 px), só o nome fica preso, estreito e cortado com "…" (o nome inteiro no balão do botão); a coluna
   Contra o anterior rola junto com os meses. Presas, ela e o nome ocupavam a largura toda e os 13 meses ficavam escondidos atrás delas. O título
   "Vendedor" fica preso com os nomes (rolando, ele ia embora e o nome do mês ficava em cima da coluna dos nomes) */
table.vv-hm thead th.vv-hm-c0 { position: sticky; left: 0; z-index: 2; background: var(--papel); }
@container (max-width: 600px) {
  table.vv-hm td.vv-hm-t, table.vv-hm th.vv-hm-t { position: static; box-shadow: none; }
  table.vv-hm thead th.vv-hm-c0, table.vv-hm tbody th, table.vv-hm tfoot th:not([colspan]) { width: 136px; min-width: 136px; max-width: 136px; }
  table.vv-hm tfoot th:not([colspan]) { white-space: normal; }
  .vv-hm-nome { width: 100%; }
  .vv-hm-nome > span:not(.ini) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .vv-hm-nome:has(.vv-hm-tag) { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 0 8px; }
  .vv-hm-nome:has(.vv-hm-tag) .ini { grid-row: 1 / span 2; }
  .vv-hm-nome .vv-hm-tag { grid-column: 2; margin-left: 0; line-height: 1.15; }
  .vv-hm-wrap.rola-lado { box-shadow: inset -14px 0 12px -12px rgba(20, 24, 43, .28); }
}
/* com a coluna Contra o anterior presa (fora do celular), a borda direita não esmaece: a sombra da coluna presa é o aviso (P22) */
@container (min-width: 601px) { .vv-hm-wrap.rola-x.rola-dir { -webkit-mask-image: none; mask-image: none; } }
/* rola-sem-aviso: a mesa da Prioridades no celular com a sombra da borda e o rodapé de rolar (app.js, avisoLado) */
#pagina .mt-mesa-tabw.rola-lado { box-shadow: inset -14px 0 12px -12px rgba(20, 24, 43, .28); }
#pagina .mt-mesa-l > .tab-rod { margin: 6px 4px 0; }

/* vg-pv-sem-meta: no Pré-Vendas da Visão geral, a linha de baixo do quadrado quebra dentro dele ("sem meta de novembro e dezembro" passava
   59 px do Agendados a 1366 e 78 px a 390) */
.rd-pvq .rd-q-sub { white-space: normal; text-wrap: balance; }

/* tppar-390: abaixo de 600 px, o "Quanto custou cada cliente" em duas colunas, com o par (dois números) numa linha inteira, e o CAC também
   quando vem antes de um par (Energy). Em três colunas de 102 px, o número do par encolhia para 11 px, a base para 6 px e "(da 1ª fatura Cemig)",
   "(1,96× a 1ª venda)", "(safra de 12 meses)" passavam da borda */
@media (max-width: 600px) {
  html[data-fn] #pagina .kpis.tp-kpis3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-fn] #pagina .kpis.tp-kpis3 > .tp-q-par, html[data-fn] #pagina .kpis.tp-kpis3 > .kpi:first-child:has(+ .tp-q-par) { grid-column: 1 / -1; }
}
/* a Faixa de ritmo num quadrado estreito (celular): as quatro faixas em 2 × 2 ("Crítica" passava 3 px do quadrado e os nomes se encostavam) */
@container (max-width: 240px) { .kpi-ritmo .q4 { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 6px 12px; } }

/* prio-linhas: no painel da pessoa da Prioridades, o resumo de cada tema, o nome do sinal e a régua inteiros, quebrando em linhas (cortavam com
   "…": o "e mais N" sumia e, no celular, o Resultado mostrava só "9" de "9,3 MWh em 10 vendas"); o número quebra a partir de 13 letras de
   largura, para o nome nunca ficar com 0 px e os botões Lista e Marcar nunca saírem do card */
#sin-mesa .mt-gp { white-space: normal; overflow: visible; text-overflow: clip; line-height: 18px; overflow-wrap: anywhere; }
#sin-mesa .mt-mesa-g[open] > summary .mt-gp { display: none; }
#sin-mesa .mt-mesa-g > summary .mt-ac, #sin-mesa .mt-mesa-g > summary .mt-g-chev { margin-left: auto; }
#sin-mesa .mt-mesa-g > summary .mt-ac + .mt-g-chev { margin-left: 0; }
#sin-mesa .mt-sl-nome, #sin-mesa .mt-sl-ref { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
#sin-mesa .mt-sl-num { white-space: normal; max-width: 13em; text-wrap: balance; }
@media (max-width: 640px) {
  #sin-mesa .mt-mesa-g > summary { flex-wrap: wrap; row-gap: 2px; }
  #sin-mesa .mt-mesa-g > summary .mt-gp { order: 5; flex: 1 1 100%; }
}
/* a coluna do pior sinal da mesa (a 1920) e a lista Por sinal quebram em linhas, alinhadas à esquerda, em vez de cortar com "…"; com a mesa
   larga, a coluna do pior sinal vai até 280 px */
#pagina .mt-mesa-tab .mt-mesa-pior, #pagina .mt-mesa .mt-sinal-l .mt-mesa-pior, #pagina .mt-mesa .mt-sinal-l .nome { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
#pagina .mt-mesa-tab td.mt-mesa-pior-c { text-align: left; }
@container (min-width: 860px) { #pagina .mt-mesa-tab .mt-mesa-pior-c, #pagina .mt-mesa-tab .mt-mesa-pior { max-width: 280px; } }
/* nomes-reticencias: no celular, o nome da pessoa na mesa quebra em duas linhas ("Chakira Cecotti" cortava 24 px) */
@container (max-width: 469px) { #pagina .mt-mesa-tab .mt-mesa-pt .nome { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; } }

/* nomes-reticencias: o nome no Fora da equipe inteiro, quebrando em duas linhas quando não cabe numa (cortava com "…" mesmo a 1920: "Larissa
   Rodrigues Vendedora", "Matheus de Mello Gontijo", "Claudia Nascimento"); o cargo continua no balão e o selo "inativo" vem logo depois do
   nome (embaixo dele, a linha de quem quebra o nome ficava com três andares) */
#t-eq-fora td:first-child { white-space: normal; }
#t-eq-fora td:first-child .corta-txt { display: inline; max-width: none; overflow: visible; text-overflow: clip; white-space: normal; }
#t-eq-fora td:first-child .selo { display: inline-block; width: auto; margin: 2px 0 0 4px; }
/* na célula de nome com o ↗ do Salesforce (Recompra), o nome corta com "…" e o ↗ (22 px, mais o espaço e a margem) fica à vista (a célula
   cortava o fim e o ↗ sumia); o nome inteiro continua no balão */
#pagina table.t td.nome:has(> span[title]:first-child + a.sf) { overflow: visible; text-overflow: clip; }
#pagina table.t td.nome > span[title]:first-child:has(+ a.sf) { display: inline-block; max-width: calc(100% - 27px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* cls-390-periodo: no celular o topo cresce de 65 para 167 px quando chega o /api/status (as abas e a segunda fileira dos botões): até lá a faixa
   do período (vazia) não aparece, para não ser vista descendo (CLS de 0,05 no Pipeline da Energy). As imagens do topo têm a largura e a altura
   no HTML (app.js): a largura vem da proporção delas */
@media (max-width: 767px) { header.topo:has(#topo:empty) + .periodo { visibility: hidden; } }
.topo .logo-emp, .topo .logo-mob, .topo .voltar img { width: auto; }

/* ---------- r99 (G2): gráficos de cada tela e cores ---------- */
/* r99 (lay-gm-05, lay-tendas-04): no escuro, a linha pequena das células coloridas das safras ("164 · acum. 42,7%", com o número que abre a
   lista) vai na tinta do tema, a mesma do percentual: na tinta-2 ficava entre 3,95:1 e 4,23:1 (agora 5,3:1 ou mais). O número, ao passar o
   mouse, fica branco (a cor de link do escuro sumia na célula clara) */
html[data-tema="escuro"] table.t.mapa td.cel.esc small { color: var(--tinta); }
html[data-tema="escuro"] table.t.mapa td.cel.esc a.lk:hover, html[data-tema="escuro"] table.t.mapa td.cel.esc a.lk:focus-visible { color: #fff; text-decoration-color: currentColor; }
/* r99 (agenda-mapa-390): no celular, os botões do zoom saem de cima do mapa e ficam numa linha embaixo dele (cobriam as bolhas e os nomes de
   Belo Horizonte, Ibirité e Santa Luzia) */
@media (max-width: 600px) { .ag-zoom { position: static; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; margin-top: 8px; } }
/* r99 (mapa-calor-contraste): no Vendedor a vendedor, o zero, o "—" e o zero da tabela em cinza legível (4,5:1 ou mais no claro e no escuro),
   ainda mais apagados que os outros números (eram #A3ABBE, 2,3:1 sobre o branco); na célula clara do mapa no escuro, a tinta escura
   (data-escura, escolhida pelo contraste no app.js); as pílulas dos toques num verde e num vermelho em que o branco se lê (eram 3,4:1 e 3,9:1);
   no escuro, o "Mostrar quem saiu do time" e o nome da pessoa escolhida no mapa na cor de link do escuro (o anil ficava a 2,96:1) */
table.vv-hm td.zero, table.vv-hm td.vv-hm-nd { color: var(--tinta-3); }
#t-vendedores .vv-n .cinza { color: var(--tinta-3); }
table.vv-hm td[data-escura], table.vv-hm td[data-escura] a.vv-hm-lk, table.vv-hm td[data-escura] a.vv-hm-lk:hover, table.vv-hm td[data-escura] a.vv-hm-lk:focus-visible { color: #14182B; text-decoration-color: rgb(20 24 43 / .45); }
.cel-rod.ok { background: #1F7A3A; }
.cel-rod.baixo { background: #C0132A; }
html[data-tema="escuro"] .vv-hm-mais, html[data-tema="escuro"] table.vv-hm tr.vv-sel th .vv-hm-nome span { color: var(--link-cor); }
/* r99 (faixa-zero-abre-tudo): a faixa do Primeiro contato sem lead não abre lista; fica com a caixa dos quadrados que abrem, sem o clique */
.kpis > .kpi.kpi-0 { background: var(--fundo-2); border: 0; border-radius: var(--raio-m); box-shadow: inset 0 0 0 1px var(--linha); display: flex; flex-direction: column; justify-content: flex-start; cursor: default; }
/* r101 (dad-cmp-inicio-mes-10): a seta do Fechamento na base curta fica cinza */
#pagina .fe-seta.cinza { color: var(--neutro); font-weight: 500; }

/* ---------- r101 (G9): tela, celular e gráficos ---------- */
/* r101 (vvhm-390): no celular, o nome da coluna presa do mapa do Vendedor a vendedor quebra em duas linhas, inteiro, na mesma largura de 136 px
   (cortava com "…": 7 de 14 nomes na Energy); os meses continuam à vista */
@container (max-width: 600px) {
  .vv-hm-nome > span:not(.ini) { white-space: normal; text-overflow: clip; overflow-wrap: break-word; line-height: 1.2; }
}
/* r101 (prio-linhas): no celular, a linha do sinal no painel da pessoa fica em três andares: o nome e a régua na largura toda, o número
   embaixo e os botões por último. O número longo ("54 de 104 descartados (52%)") deixava o nome com 47 a 84 px e a palavra partia no meio */
@media (max-width: 640px) {
  #sin-mesa .mt-sl { grid-template-columns: 8px minmax(0, 1fr); row-gap: 6px; }
  #sin-mesa .mt-sl-ponto { grid-row: 1; }
  #sin-mesa .mt-sl-tx, #sin-mesa .mt-sl-num, #sin-mesa .mt-sl-ac { grid-column: 2; }
  #sin-mesa .mt-sl-num { max-width: none; text-align: left; }
  #sin-mesa .mt-sl-ac { justify-content: flex-start; min-width: 0; flex-wrap: wrap; }
}
/* r101 (nomes-reticencias): o nome da conta com o ↗ do Salesforce (Pipeline por conta, Recompra) e o nome da campanha (Campanhas) quebram em
   linhas, inteiros, e o ↗ vem logo depois do nome (cortavam com "…": "Canadian Solar Brasil…" 208 px, a campanha da Locações 82 px a 390) */
#pagina table.t td.nome:has(> span[title]:first-child + a.sf) { white-space: normal; overflow: visible; text-overflow: clip; min-width: 12em; }
#pagina table.t td.nome > span[title]:first-child:has(+ a.sf) { display: inline; max-width: none; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
#pagina #t-camp td.nome { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; min-width: 12em; }
/* r101 (fora-total-linha): a linha inteira atrás do Total preso fica transparente até rolar para cima dele (app.js, atrasDoTotal) */
.tabela-wrap table.t tbody tr.atras-total > * { opacity: 0; }
@media print { .tabela-wrap table.t tbody tr.atras-total > * { opacity: 1; } }
/* r101 (cls-390-periodo): na Prioridades, o que fica embaixo do card "Prioridades de hoje" (o Histórico das marcas) e o rodapé da página só
   aparecem quando ele já tem a altura final: o card mudava de altura quando o dado chegava e empurrava o de baixo (CLS 0,051 a 0,064 a 1920) */
#pagina .blocos:has(> section[data-id="prioridades-de-hoje"] #sin-mapa[data-modo="aba"] > .sk-box) > section[data-id="prioridades-de-hoje"] ~ * { display: none; }
body:has(#sin-mapa[data-modo="aba"] > .sk-box) #rodape, body:has(#sin-mapa[data-modo="aba"]):has(#sin-hist > .sk-box) #rodape { display: none; }
/* r101 (gvox-link-listas): a conversa no Gvox ao lado do ↗ do Salesforce, nas listas da gaveta: a mesma altura do ↗, na cor das listas do
   WhatsApp (.wa-gvox). r101 (G10b): o ícone tem o próprio espaço e o limite do nome é o de sempre (nenhum nome corta a mais por causa dele):
   o ↗ e o ícone formam um grupo menor, de largura fixa e sem encolher, e a célula com o ícone fica sem o respiro da direita */
.gaveta table.t td a.gvx { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; width: 16px; min-width: 16px; min-height: 22px; margin: 0; border-radius: 6px; color: var(--tinta-2); text-decoration: none; vertical-align: 0; }
.gaveta table.t td a.gvx:hover, .gaveta table.t td a.gvx:focus-visible { color: var(--tinta); }
.gaveta table.t td a.gvx::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 3.2h10.8v7.1H7.2l-3.1 2.6v-2.6H2.6z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 3.2h10.8v7.1H7.2l-3.1 2.6v-2.6H2.6z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
.gaveta table.t td:has(> a.gvx) { padding-right: 0; }
.gaveta table.t td:has(> a.gvx) > a.sf { min-width: 18px; margin-left: -3px; }
/* 11/11 (ele: "o ícone do gvox e do salesforce fica sempre ao lado do nome, coloca ele no final dessa coluna, próximo à fase… vai ficar tudo
   alinhadinho"; "faça isso em TODAS AS TABELAS"): em toda tabela, a célula com o ↗ guarda o lugar dos dois ícones no fim da coluna (o ↗ a
   30 px da borda e o ícone do Gvox na ponta), com ou sem conversa, e a coluna inteira alinha. O nome usa a largura que sobra */
table td:has(> a.sf), table td:has(> a.gvx) { position: relative; padding-right: 58px !important; }
table td > a.sf { position: absolute; top: 50%; right: 30px; margin: 0 !important; transform: translateY(-50%); }
table td > a.gvx { position: absolute; top: 50%; right: 8px; margin: 0; transform: translateY(-50%); }
#pagina table.t td.nome > span[title]:first-child:has(+ a.sf) { max-width: 100%; }
/* o ícone do Gvox também fora da gaveta (as tabelas e os cards da página): o mesmo desenho */
a.gvx { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; width: 16px; min-width: 16px; min-height: 22px; margin: 0 0 0 2px; border-radius: 6px; color: var(--tinta-2); text-decoration: none; vertical-align: middle; }
a.gvx:hover, a.gvx:focus-visible { color: var(--tinta); }
a.gvx::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 3.2h10.8v7.1H7.2l-3.1 2.6v-2.6H2.6z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.6 3.2h10.8v7.1H7.2l-3.1 2.6v-2.6H2.6z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
/* r102 (geist-a4): o histórico de alterações (celular): o espaço entre as palavras um pouco mais justo, para o "3 meses" não quebrar na Geist */
#t-hist td { word-spacing: -.15em; }
/* v135 (10/11, página "Melhorias hub"; ele: "nesses cards queria dar mais cor, o recuo em amarelo, a perda em vermelho, o reabriram em verde,
   o ganho em verde"): cada quadrado do Mudou de fase na cor do que ele é, com a faixa à esquerda, o fundo suave e o número na cor. Testado
   para daltonismo (deuteranopia e protanopia simuladas, nenhum par abaixo de 20 de distância): o ganho em verde-azulado e a perda em
   laranja-avermelhado, com claridades diferentes; o recuo em amarelo, mais claro que a perda; a entrada em cinza-azulado e o avanço em azul */
html[data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud] { --mud: var(--neutro); background: color-mix(in srgb, var(--mud) 12%, var(--papel)); box-shadow: inset 4px 0 0 var(--mud), inset 0 0 0 1px color-mix(in srgb, var(--mud) 30%, transparent); }
html[data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud]:hover { box-shadow: inset 4px 0 0 var(--mud), inset 0 0 0 1.5px var(--mud); }
html[data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud] > .num { color: var(--mud-n, var(--mud)); }
html[data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud="entrou"] { --mud: #6B7390; --mud-n: #4A516B; }
html[data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud="avancou"] { --mud: #2D6FCD; --mud-n: #1F57A8; }
html[data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud="recuou"] { --mud: #D9A21B; --mud-n: #7A5600; }
html[data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud="ganhou"] { --mud: #0F7B5F; --mud-n: #0B654E; }
html[data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud="reabriu"] { --mud: #4FA35E; --mud-n: #2B7438; }
html[data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud="perdeu"] { --mud: #D4471F; --mud-n: #A8380F; }
html[data-tema="escuro"][data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud] { background: color-mix(in srgb, var(--mud) 18%, var(--papel)); }
html[data-tema="escuro"][data-fn] #pagina section[data-id="mudou-de-fase-no-periodo"] .kpi-bt[data-mud] > .num { color: color-mix(in srgb, var(--mud) 55%, #FFFFFF); }
/* v135 (10/11, ele: "essa lista aqui, eu queria que ela ficasse recolhida, e tivesse uma seta para expandir"): a tabela por dono do
   Oportunidades para cobrar abre e fecha na seta; a linha das três faixas das abertas (em dia, para cobrar, fora da validade) fica logo acima */
#pagina .oc-tres { margin: 10px 0 4px; line-height: 1.55; }
#pagina .oc-det { margin-top: 10px; border-top: 1px solid var(--linha); }
#pagina .oc-det > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 4px; cursor: pointer; list-style: none; font-size: 14px; border-radius: 8px; }
#pagina .oc-det > summary::-webkit-details-marker { display: none; }
#pagina .oc-det > summary:hover { background: var(--sutil-2, var(--fundo)); }
#pagina .oc-det > summary:focus-visible { outline: 2px solid var(--anil, #2D6FCD); outline-offset: 2px; }
#pagina .oc-det .oc-seta { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--sutil, var(--fundo)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23383F55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .18s ease; }
#pagina .oc-det[open] .oc-seta { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { #pagina .oc-det .oc-seta { transition: none; } }
html[data-tema="escuro"] #pagina .oc-det .oc-seta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E6E9F2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
/* v135 (10/11, ele: "aqui tinha que indicar se está bom, normal ou ruim, igual na visão geral e no fechamento"): o farol do Fechamento no Do lead
   à venda do Funil (Leads criados e Viraram conta) e no Vendido da aba Vendas: o fundo verde (Bom) ou vermelho (Ruim) e o selo; Normal só o selo */
html[data-fn] #pagina section:is([data-id="do-lead-a-venda"], [data-id="vendas-no-topo"]) .fn-q.fe-est-bom.fe-est-bom { background: var(--bom-suave, #E6F4EA); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bom) 28%, transparent); }
html[data-fn] #pagina section:is([data-id="do-lead-a-venda"], [data-id="vendas-no-topo"]) .fn-q.fe-est-ruim.fe-est-ruim { background: var(--ruim-suave, #FBE9EB); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ruim) 26%, transparent); }
html[data-fn] #pagina section:is([data-id="do-lead-a-venda"], [data-id="vendas-no-topo"]) .fn-q:is(.fe-est-bom, .fe-est-ruim) .fn-tr { background: color-mix(in srgb, var(--papel) 60%, transparent); }
html[data-fn] #pagina section:is([data-id="do-lead-a-venda"], [data-id="vendas-no-topo"]) .fn-q .fe-est { display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 999px; font: 700 12px/17px var(--f-txt, inherit); }
html[data-fn] #pagina section:is([data-id="do-lead-a-venda"], [data-id="vendas-no-topo"]) .fn-q .fe-est.bom { background: var(--bom); color: var(--papel, #fff); }
html[data-fn] #pagina section:is([data-id="do-lead-a-venda"], [data-id="vendas-no-topo"]) .fn-q .fe-est.ruim { background: var(--ruim); color: var(--papel, #fff); }
html[data-fn] #pagina section:is([data-id="do-lead-a-venda"], [data-id="vendas-no-topo"]) .fn-q .fe-est.normal { padding-left: 0; color: var(--tinta-2); font-weight: 600; }
/* v135 (10/11, ele: "pode ser uma listinha, uma tabela bem formatada, mantendo esse número total bonitão em cima"): Maiores clientes do período
   em tabela, com o total grande em cima, a posição antes do nome, a fatia com a barrinha na cor da empresa e as outras contas no pé */
#pagina .mc-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 2px 0 12px; }
#pagina .mc-num { font: 700 clamp(30px, 2.6vw, 40px)/1.05 var(--f-num); letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
#pagina .mc-num small { margin-left: 6px; font-size: .45em; font-weight: 600; letter-spacing: 0; color: var(--tinta-2); }
#pagina .mc-tx { font-size: 13.5px; color: var(--tinta-2); }
#pagina #t-maiores-clientes td.nome { white-space: normal; min-width: 180px; }
#pagina #t-maiores-clientes .mc-pos { display: inline-block; min-width: 22px; margin-right: 6px; font: 600 12px/1 var(--f-num); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
#pagina #t-maiores-clientes .mc-fatia { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
#pagina #t-maiores-clientes .mc-barra { display: inline-block; width: 64px; height: 8px; border-radius: 4px; background: var(--sutil, #E3E8F4); overflow: hidden; }
#pagina #t-maiores-clientes .mc-barra i { display: block; height: 100%; border-radius: 4px; background: var(--marca-dado, var(--anil, #2D6FCD)); }
#pagina .mc-pe { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--tinta-2); }
/* v135 (10/11, ele: "como podemos melhorar esse gráfico motivo de descarte, ele está difícil de ler, sei que os textos estão longos e está ficando
   desenquadrado"): a lista de barras deitadas, com o nome inteiro à esquerda, a barra no meio e o número com a fatia à direita */
#pagina .mdesc { display: flex; flex-direction: column; gap: 10px; }
#pagina .md-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#pagina .md-legs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--tinta-2); }
#pagina .md-leg { display: inline-flex; align-items: center; gap: 6px; }
#pagina .md-leg i { width: 10px; height: 10px; border-radius: 3px; }
#pagina .md-tot { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
#pagina .md-tot b { font: 700 clamp(26px, 2.2vw, 34px)/1 var(--f-num); letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
#pagina .md-tot span { font-size: 12.5px; color: var(--tinta-2); }
#pagina .md-lista { display: flex; flex-direction: column; gap: 2px; }
#pagina .md-l { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(60px, 1fr) 78px; align-items: center; gap: 12px; width: 100%; min-height: 34px; padding: 5px 8px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
#pagina .md-l:hover { background: var(--sutil-2, var(--fundo)); }
#pagina .md-l:focus-visible { outline: 2px solid var(--anil, #2D6FCD); outline-offset: 1px; }
#pagina .md-l.md-resto { cursor: default; color: var(--tinta-2); }
#pagina .md-l.md-resto:hover { background: none; }
#pagina .md-nome { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
#pagina .md-barra { height: 12px; border-radius: 4px; background: var(--sutil, #E3E8F4); overflow: hidden; }
#pagina .md-barra i { display: block; height: 100%; border-radius: 4px; background: var(--c, #8A90A2); }
#pagina .md-resto .md-barra i { background: var(--linha-forte, #A3ABBE); }
#pagina .md-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#pagina .md-n b { font: 700 14px/1 var(--f-num); }
#pagina .md-n small { margin-left: 4px; font-size: 12px; color: var(--tinta-2); }
@media (max-width: 600px) { #pagina .md-l { grid-template-columns: minmax(0, 1fr) 70px; } #pagina .md-barra { grid-column: 1 / -1; grid-row: 2; } #pagina .md-topo { flex-direction: column-reverse; align-items: stretch; } #pagina .md-tot { align-items: flex-start; } }
/* v135 (10/11, ele: "senti falta de visualizar os gráficos pelas opções de filtro também … sugiro que seja padrão em todas as tabelas"): os botões
   "Ver por" ao lado do título do gráfico da lista, um por grupo do Filtrar; o escolhido fica preenchido */
.gaveta .ls-graf-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.gaveta .ls-verpor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; color: var(--tinta-2); }
.gaveta .ls-verpor > span { margin-right: 2px; }
.gaveta .ls-verpor button { min-height: 28px; padding: 3px 11px; border: 1px solid var(--linha-forte, #A3ABBE); border-radius: 999px; background: var(--papel); color: var(--tinta); font: 600 12.5px/1.2 var(--f-txt, inherit); cursor: pointer; }
.gaveta .ls-verpor button:hover { border-color: var(--anil, #2D6FCD); }
.gaveta .ls-verpor button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.gaveta .ls-verpor button:focus-visible { outline: 2px solid var(--anil, #2D6FCD); outline-offset: 2px; }
/* v135: o ícone da aba Recompra (duas setas em círculo: o cliente que volta) */
:is(.bloco, .aba-pz)[data-ico="recompra"] { --ico-bg: #E3ECFA; --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231F57A8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011a8%208%200%200%201%2014-5.3L20%208%22%2F%3E%3Cpath%20d%3D%22M20%203v5h-5%22%2F%3E%3Cpath%20d%3D%22M20%2013a8%208%200%200%201-14%205.3L4%2016%22%2F%3E%3Cpath%20d%3D%22M4%2021v-5h5%22%2F%3E%3C%2Fsvg%3E"); }

/* v136 (10/11): o De onde veio a venda — a barra com o número dentro (venda nova × recompra; na Energy, os contratos grandes × base) e a
   tabela por origem com as duas e o total */
#pagina .fe-nb { display: flex; gap: 3px; min-height: 54px; border-radius: 10px; overflow: hidden; background: var(--sutil-3, #E6E9F0); }
#pagina .fe-nb.vazia { align-items: center; justify-content: center; min-height: 40px; }
#pagina .fe-nb-vz { font-size: 13px; color: var(--tinta-3); }
#pagina .fe-nb-seg { min-width: 6px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 7px 12px; color: #fff; text-decoration: none; overflow: hidden; }
#pagina .fe-nb-seg.claro { color: #14213D; }
#pagina a.fe-nb-seg { cursor: pointer; transition: filter .12s ease-out; }
#pagina a.fe-nb-seg:hover { filter: brightness(1.07) saturate(1.05); }
#pagina a.fe-nb-seg:focus-visible { outline: 2px solid var(--tinta); outline-offset: -3px; }
#pagina .fe-nb-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
#pagina .fe-nb-l1 b { flex: none; font: 700 20px/1.1 var(--f-num, inherit); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#pagina .fe-nb-l1 span { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#pagina .fe-nb-l2 { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pagina .fe-nb-x { padding: 7px 0; }
#pagina .fe-nb-off { display: none !important; }
#pagina .fe-nb-leg { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12.5px; color: var(--tinta-2); }
#pagina .fe-nb-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
#pagina .fe-nb-leg b { color: var(--tinta); font-variant-numeric: tabular-nums; }
/* a tabela por origem com a venda nova, a recompra e o total (segunda passada): o valor e, embaixo, as vendas; no celular, sem a Fatia */
#pagina .fe-comp2:has(.fe-t-nr) { container-type: inline-size; }
#pagina .fe-t-nr td, #pagina .fe-t-nr th { padding-top: 7px; padding-bottom: 7px; }
/* o valor e as vendas na mesma linha quando cabe (monitor); no notebook, as vendas descem para baixo do valor */
#pagina .fe-t-nr .fe-nr-v { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 7px; row-gap: 1px; }
#pagina .fe-t-nr .fe-nr-c b { font-size: 14.5px; white-space: nowrap; }
#pagina .fe-t-nr .fe-nr-val { font-size: 14.5px; font-weight: 400; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
#pagina .fe-t-nr .fe-nr-c small { min-width: var(--nr-w, auto); text-align: right; font-size: 12px; font-weight: 500; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
#pagina .fe-t-nr tfoot .fe-nr-c small { color: var(--tinta-2); }
#pagina .fe-t-nr .fe-nr-0 { color: var(--tinta-3); }
#pagina .fe-nr-th { display: inline-flex; align-items: center; gap: 6px; }
#pagina .fe-nr-th i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
/* no notebook (o card em meia largura), todas as células com as vendas embaixo do valor (antes, umas numa linha e outras em duas) e o nome
   da origem numa linha só */
@container (max-width: 760px) {
  #pagina .fe-t-nr .fe-nr-v { flex-direction: column; align-items: flex-end; }
}
@container (min-width: 521px) {
  #pagina .fe-t-nr .fe-orig { white-space: nowrap; }
}
@container (max-width: 520px) {
  #pagina .fe-t-nr .fe-fatia { display: none; }
  #pagina .fe-t-nr th, #pagina .fe-t-nr td { padding-left: 6px; padding-right: 6px; }
}

/* ---------- 10/11/2026, noite: o gráfico da lista em Barras ou Pizza e na medida (valor ou nº), ao lado do Ver por ---------- */
.gaveta #ls-verpor { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.gaveta .ls-forma { gap: 0; }
.gaveta .ls-forma button { border-radius: 0; margin-left: -1px; }
.gaveta .ls-forma button:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.gaveta .ls-forma button:last-child { border-radius: 0 999px 999px 0; }
.ls-graf .grafico.ls-pizza { height: 250px; }

/* ---------- v137 (10/11/2026, Rodada 105): a aba Semana do Tráfego pago global (a reunião semanal de tráfego, que era o Notion), das maquetes
   1 a 4. A aba usa as peças do hub (blocos, .kpis, fn-cad, tabelas, vis-ctrl, gaveta); aqui fica só o que o hub não tem: a barra da semana,
   a cor da empresa, o número de baixo das células da tabela fase × origem, as anotações, o balão "Anotar" e o PDF. Nada de :has() valendo
   para a página (regra do hub desde a v117). Bom e ruim pelas classes do hub (acima/abaixo, testadas para daltonismo). ---------- */

/* a barra da semana (empresa, reunião, semana, frescor, fechar a reunião e PDF) */
.sem-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 2px 0 6px; }
.sem-barra .vis-ctrl { margin: 0; }
.sem-campo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-3); }
.sem-campo span { font-weight: 600; }
.sem-campo select { font: inherit; font-size: 14px; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  padding: 6px 28px 6px 10px; min-height: 36px; cursor: pointer; }
.sem-campo select:focus-visible, .sem-pdf:focus-visible, .sem-pend input:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
.sem-fresco { font-size: 12.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.sem-acoes { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; }
.sem-g-t { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 650; color: var(--tinta); margin: 14px 0 2px; }
.sem-g-t span { font-size: 12.5px; font-weight: 600; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.sem-pend input:disabled { opacity: .7; cursor: default; }
.sem-pdf { font: inherit; font-weight: 600; font-size: 13.5px; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha-forte);
  border-radius: 999px; padding: 7px 16px; min-height: 36px; cursor: pointer; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.sem-pdf:active { transform: scale(0.97); }
.sem-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; }
.sem-ctrl .subt { margin: 0; }

/* a cor da empresa (ele: "tá tudo muito sem cor"; "eles olham bastante os valores de energia sem destaque"): --sem-cor = a cor de gráfico da
   empresa (COR_EMP_GRAF); --sem-cor-txt = a mesma escurecida para o texto passar de 4,5:1 no branco */
.blocos.sem-e-energy { --sem-cor: #E0A21A; --sem-cor-txt: #8A5A00; }
.blocos.sem-e-tendas { --sem-cor: #304090; --sem-cor-txt: #304090; }
.blocos.sem-e-solar  { --sem-cor: #F07828; --sem-cor-txt: #A84A0C; }
.blocos.sem-e-mec    { --sem-cor: #8E2A2A; --sem-cor-txt: #8E2A2A; }
html[data-tema="escuro"] .blocos.sem-e-energy { --sem-cor-txt: #F2C14E; }
html[data-tema="escuro"] .blocos.sem-e-tendas { --sem-cor: #7C8FE0; --sem-cor-txt: #A9B6F0; }
html[data-tema="escuro"] .blocos.sem-e-solar  { --sem-cor-txt: #F7A066; }
html[data-tema="escuro"] .blocos.sem-e-mec    { --sem-cor: #C25555; --sem-cor-txt: #E89A9A; }
.sem-vol { color: var(--sem-cor-txt); font-weight: 700; }
/* sem a legendinha ao lado do título de cada bloco (ele, 10/11: "elas poluem o hub"); o período está na barra e no "?" */
.blocos[class*="sem-e-"] .fn-sec-s:empty { display: none; }
/* o arranjo em blocos do hub pinta o .num com a tinta; o volume e o valor ficam na cor da empresa */
.blocos[class*="sem-e-"] .kpi.sem-kpi-vol .num, .blocos[class*="sem-e-"] .kpi.sem-kpi-vol .num * { color: var(--sem-cor-txt) !important; }
/* as barras dentro das tabelas na cor da empresa, clara */
.blocos[class*="sem-e-"] table.t { --barra-t: color-mix(in srgb, var(--sem-cor) 26%, transparent); }
.sem-graf-tit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 16px 0 2px; font-size: 14px; color: var(--tinta); }
.sem-graf-tit .vis-ctrl { margin: 0; }
/* v138: dois gráficos lado a lado no Ritmo de Oportunidade (onde estão os orçamentos da semana × a temperatura do pipeline); um embaixo do outro
   na tela estreita */
.sem-graf-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 32px; }
.sem-graf-col { min-width: 0; }
.sem-graf-ctrls { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; }
@media (max-width: 1100px) { .sem-graf-par { grid-template-columns: minmax(0, 1fr); } }
/* 11/11: no Pipeline, os títulos dos dois gráficos lado a lado na mesma altura e os gráficos começando juntos */
.sem-graf-par.sem-graf-alinha { grid-template-rows: auto auto; }
.sem-graf-par.sem-graf-alinha > .sem-graf-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }

/* v139: o selo Bom, Normal ou Ruim nos quadrados do Ritmo Leads e do Ritmo de Oportunidade (a régua da Visão geral, como no Fechamento): o fundo
   verde ou vermelho claro e o selo cheio; Normal só escrito */
html[data-fn] #pagina .blocos[class*="sem-e-"] .kpi.fe-est-bom { background: var(--bom-suave, #E6F4EA); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bom) 28%, transparent); }
html[data-fn] #pagina .blocos[class*="sem-e-"] .kpi.fe-est-ruim { background: var(--ruim-suave, #FBE9EB); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ruim) 26%, transparent); }
.blocos[class*="sem-e-"] .kpi .fe-est { display: inline-block; margin-top: 5px; padding: 1px 9px; border-radius: 999px; font: 700 12px/17px var(--f-txt, inherit); }
.blocos[class*="sem-e-"] .kpi .sub .fe-est { display: table; }
/* 10/11, noite (ele: "o bom, ruim e normal seria interessante ficar embaixo na esquerda, meio que descer todos para onde o bom deslocado está";
   regra C7a): o quadrado com selo é coluna, e o selo (Bom, Normal ou Ruim) desce até o pé, à esquerda; os quadrados da fileira têm a mesma
   altura (a grade do .kpis), então os selos ficam na mesma linha, quebre a seta em uma ou em duas linhas */
.blocos[class*="sem-e-"] .kpi.sem-q-selo { display: flex; flex-direction: column; align-items: stretch; text-align: left; }
.blocos[class*="sem-e-"] .kpi.sem-q-selo > .sem-selo { margin-top: auto; padding-top: 6px; line-height: 0; }
.blocos[class*="sem-e-"] .kpi.sem-q-selo > .sem-selo .fe-est { margin-top: 0; }
/* regra C12: no quadrado com selo, a seta contra a média ou o período fica em tinta (é outra pergunta: um "Bom" com ▼ pode acontecer); a cor
   é do selo */
.blocos[class*="sem-e-"] .kpi.sem-q-selo .tp-seta { color: var(--tinta-2); }
.blocos[class*="sem-e-"] .kpi .fe-est.bom { background: var(--bom); color: var(--papel, #fff); }
.blocos[class*="sem-e-"] .kpi .fe-est.ruim { background: var(--ruim); color: var(--papel, #fff); }
.blocos[class*="sem-e-"] .kpi .fe-est.normal { padding-left: 0; color: var(--tinta-2); font-weight: 600; }

/* v139: a diferença do declarado × proposta (ele: "tá meio apagado o vermelho e o verde e o neutro fica preto"): selo cheio com a seta,
   verde quando a proposta subiu, vermelho quando desceu e cinza quando manteve */
.sem-dif { display: inline-block; min-width: 64px; padding: 2px 9px; border-radius: 999px; font-weight: 700; font-size: 12.5px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sem-dif.subiu { background: var(--bom); color: var(--papel, #fff); }
.sem-dif.desceu { background: var(--ruim); color: var(--papel, #fff); }
.sem-dif.manteve { background: var(--linha); color: var(--tinta-2); }

/* tabela fase × origem: o número abre a lista; embaixo, o volume (em destaque) e as paradas */
.sem-v { display: block; font-size: 12.5px; line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sem-v .sem-par { display: block; font-size: 11.5px; font-weight: 600; color: var(--tinta-3); }

/* as anotações: os três números, a lista recolhida (ele: "deixa essa lista recolhida") e o atalho para o balão */
.sem-anot-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; }
.sem-anot-abre, .sem-anot-nova { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px; font-weight: 600; min-height: 36px; padding: 7px 16px;
  border-radius: 999px; cursor: pointer; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease; }
.sem-anot-abre { color: var(--tinta); background: var(--papel); border: 1px solid var(--linha-forte); }
.sem-anot-abre:hover { background: var(--fundo); }
.sem-anot-seta { font-size: 11px; color: var(--tinta-3); }
.sem-anot-nova { color: #fff; background: var(--anil); border: 0; }
.sem-anot-nova svg { width: 17px; height: 17px; flex: none; }
.sem-anot-abre:active, .sem-anot-nova:active { transform: scale(0.97); }
.sem-anot-abre:focus-visible, .sem-anot-nova:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
#sem-anot-lista { margin-top: 12px; }
.sem-pends { list-style: none; margin: 4px 0 0; padding: 0; }
.sem-pend { display: grid; grid-template-columns: 20px minmax(0, 1fr) 150px 140px; align-items: center; gap: 6px 12px; padding: 9px 2px; }
.sem-pend + .sem-pend { border-top: 1px solid var(--linha); }
.sem-pend > input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--anil-2); cursor: pointer; }
.sem-pend-t span { display: block; font-size: 14px; color: var(--tinta); line-height: 1.4; }
.sem-pend-t small { display: block; font-size: 12px; color: var(--tinta-3); margin-top: 2px; }
.sem-pend.feita .sem-pend-t span { color: var(--tinta-3); text-decoration: line-through; }
.sem-pend input[type="text"], .sem-pend input[type="date"] { font: inherit; font-size: 13px; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-p); padding: 6px 8px; min-height: 34px; min-width: 0; }
.sem-pend input::placeholder { color: var(--tinta-3); }

/* o balão "Anotar" (ele: "as anotações vão acontecendo no meio da reunião… aí vai jogando na lista"): no canto de baixo, por cima da página e
   por baixo da gaveta das listas (z 50) */
.sem-anotar { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 44;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.sem-anotar > * { pointer-events: auto; }
.sem-anotar[hidden], .sem-anotar-pop[hidden], .sem-anotar-n[hidden] { display: none !important; }
.sem-anotar-bt { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 15px; border: 0; border-radius: 999px; background: var(--anil); color: #fff;
  font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer; box-shadow: 0 10px 28px rgb(26 32 55 / .28), 0 2px 6px rgb(26 32 55 / .16);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease; }
.sem-anotar-bt svg { width: 20px; height: 20px; flex: none; }
.sem-anotar-bt:active { transform: scale(0.96); }
.sem-anotar-bt:focus-visible { outline: 3px solid var(--anil-2); outline-offset: 3px; }
.sem-anotar-bt[aria-expanded="true"] { box-shadow: 0 4px 12px rgb(26 32 55 / .22); }
.sem-anotar-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--anil); font-size: 12.5px; font-weight: 700;
  display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.sem-anotar-pop { width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 110px)); overflow-y: auto; box-sizing: border-box; padding: 14px 16px 12px;
  background: var(--papel); color: var(--tinta); border-radius: 16px; box-shadow: var(--sombra-flut, 0 16px 40px rgb(26 32 55 / .24));
  transform-origin: bottom right; animation: sem-balao 160ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes sem-balao { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
.sem-anotar-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 15px; }
.sem-anotar-x { width: 32px; height: 32px; margin: -6px -8px -6px 0; border: 0; border-radius: 8px; background: transparent; color: var(--tinta-3); font-size: 22px; line-height: 1; cursor: pointer; }
.sem-anotar-x:hover { background: var(--fundo); color: var(--tinta); }
.sem-anotar-form textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px; font: inherit; font-size: 14.5px; line-height: 1.45; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linha-forte); border-radius: var(--raio-p, 8px); padding: 9px 11px; }
.sem-anotar-form textarea::placeholder, .sem-anotar-l2 input::placeholder { color: var(--tinta-3); }
.sem-anotar-l2 { display: grid; grid-template-columns: minmax(0, 1fr) 136px auto; gap: 8px; margin-top: 8px; }
.sem-anotar-l2 input { min-width: 0; font: inherit; font-size: 13px; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha-forte); border-radius: var(--raio-p, 8px); padding: 6px 8px; min-height: 36px; }
.sem-anotar-l2 button { font: inherit; font-size: 13.5px; font-weight: 650; color: #fff; background: var(--anil); border: 0; border-radius: 999px; padding: 0 16px; min-height: 36px; cursor: pointer;
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.sem-anotar-l2 button:active { transform: scale(0.97); }
.sem-anotar-l2 button:disabled { opacity: .6; cursor: default; }
.sem-anotar-form textarea:focus-visible, .sem-anotar-l2 input:focus-visible, .sem-anotar-l2 button:focus-visible, .sem-anotar-x:focus-visible, .sem-anotar-ver:focus-visible { outline: 2px solid var(--anil-2); outline-offset: 2px; }
.sem-anotar-ok { margin: 6px 0 0; min-height: 1.2em; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); }
.sem-anotar-ok:empty { display: none; }
.sem-anotar-hoje { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); }
.sem-anotar-hoje:empty { display: none; }
.sem-anotar-hoje > p { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; font-size: 12.5px; font-weight: 650; color: var(--tinta-3); }
.sem-anotar-hoje ul { list-style: none; margin: 0; padding: 0; }
.sem-anotar-hoje li { padding: 6px 0; font-size: 13.5px; line-height: 1.4; color: var(--tinta); }
.sem-anotar-hoje li + li { border-top: 1px solid var(--linha); }
.sem-anotar-hoje li small { display: block; font-size: 12px; color: var(--tinta-3); }
.sem-anotar-mais { margin: 4px 0 0; font-size: 12.5px; color: var(--tinta-3); }
.sem-anotar-ver { display: block; width: 100%; margin-top: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--fundo); color: var(--tinta); font: inherit; font-size: 13px; font-weight: 600;
  text-align: center; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sem-anotar-pop { animation: none; } .sem-anotar-bt, .sem-anot-abre, .sem-anot-nova { transition: none; } }

@media (max-width: 760px) {
  .sem-acoes { margin-left: 0; }
  .sem-pend { grid-template-columns: 20px minmax(0, 1fr); }
  .sem-pend > input[type="text"], .sem-pend > input[type="date"] { grid-column: 2; }
  .sem-anotar-l2 { grid-template-columns: 1fr 1fr; }
  .sem-anotar-l2 button { grid-column: 1 / -1; }
}

/* o PDF (Salvar em PDF = imprimir), só na aba Semana (html[data-semana], que o periodo() do hub põe e tira) */
@media print {
  html[data-semana] .lateral, html[data-semana] .topo, html[data-semana] header, html[data-semana] .periodo, html[data-semana] #periodo-ativo, html[data-semana] .subabas,
  html[data-semana] .sem-barra .vis-ctrl, html[data-semana] .sem-barra select, html[data-semana] .sem-pdf, html[data-semana] .vis-ctrl, html[data-semana] .ajuda-wrap,
  html[data-semana] .bt-exp, html[data-semana] .bt-info, html[data-semana] .sem-ctrl select, html[data-semana] .sem-anot-acoes { display: none !important; }
  .sem-anotar { display: none !important; }
  html[data-semana] .app { display: block !important; background: #fff !important; }
  html[data-semana] body { background: #fff !important; }
  html[data-semana] .bloco { break-inside: avoid; box-shadow: none !important; border: 1px solid #DDD; }
  html[data-semana] .fn-sec { break-after: avoid; }
}

/* v140: o total grande no canto dos gráficos de barras empilhadas (como o "no total" do Dias parado do Pipeline), que segue a legenda e a medida */
#pagina .blocos[class*="sem-e-"] .grafico:is(#sem-graf-fases, #sem-graf-temp, #sem-graf-status, #sem-graf-funil) { position: relative; }
.sem-tot { position: absolute; top: 0; right: 6px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; text-align: right; pointer-events: none; }
.sem-tot b { font: 600 28px/32px "Geist", "Segoe UI", sans-serif; letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.sem-tot span { margin-top: 1px; font: 400 12.5px/16px "Geist", "Segoe UI", sans-serif; color: var(--tinta-3); white-space: nowrap; }

/* Rodada 106 (maquete): a aba Vendas, o O que mudou e o Como foi vendido */
html[data-fn] #pagina .vd-ctrl { margin-bottom: 14px; }
html[data-fn] #pagina .vd-mudou .vd-cad { margin-bottom: 16px; }
html[data-fn] #pagina .vd-mudou > .tabela-wrap { margin-top: 14px; }
html[data-fn] #pagina .vd-cad .fn-pct b { overflow-wrap: anywhere; }
html[data-fn] #pagina .vd-cad .fn-q.vd-atencao .num { color: var(--atencao); }
html[data-fn] #pagina .vd-cad .fn-baixo .selo { margin-top: 4px; }
/* Rodada 109: o nome no Mais somou e no Mais tirou na linha do valor, em até duas linhas; o card Produtos; a Recompra em duas barras */
html[data-fn] #pagina .vd-cad .fn-val .vd-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--tinta); }
html[data-fn] #pagina .vd-prod > .tabela-wrap { margin-top: 14px; }
#pagina .rc-barras { display: grid; gap: 16px; }
#pagina .rc-barras .fe-sub-t .lk { font-weight: 650; }
#pagina .rc-volta { margin-top: 14px; }

/* r113 (maquete, 10/11, "Os quatro"): o Tráfego pago da empresa como gestão de resultado.
   1. o farol do Funil (fundo verde ou vermelho e o selo Bom, Normal ou Ruim) nos quadrados do Do investido à venda;
   2. a faixa do painel do Hiang nas campanhas: verde-azulado (ótimo, bom), âmbar (regular), laranja-avermelhado (ruim), cinza (sem convertido),
      com a palavra sempre escrita (daltonismo dele: o tom e a claridade mudam juntos, nunca só vermelho × verde);
   3. o aviso de atribuição: fundo âmbar claro, sem tarja na lateral. */
:root {
  --fx-otimo: #0E6E64; --fx-otimo-tx: #FFFFFF;
  --fx-bom: #57B3A4; --fx-bom-tx: #0B2E2A;
  --fx-regular: #E9B949; --fx-regular-tx: #3A2A05;
  --fx-ruim: #C2410C; --fx-ruim-tx: #FFFFFF;
  --fx-sem: #E3E6ED; --fx-sem-tx: #2A3045;
}
html[data-tema="escuro"] {
  --fx-otimo: #2BA394; --fx-otimo-tx: #04201C;
  --fx-bom: #8AD6C9; --fx-bom-tx: #0B2E2A;
  --fx-regular: #EFC764; --fx-regular-tx: #2A1E03;
  --fx-ruim: #D9541E; --fx-ruim-tx: #FFFFFF;
  --fx-sem: #4A5373; --fx-sem-tx: #E6E9F2;
}

/* teste de daltonismo (daltonismo.py, Machado 2009): a menor distância entre duas faixas fica acima de 19 em visão normal, deuteranopia,
   protanopia e tritanopia, nos dois temas; ótimo × ruim acima de 39. */

/* 1. o farol nos quadrados (as mesmas regras do Do lead à venda do Funil) */
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q.fe-est-bom.fe-est-bom { background: var(--bom-suave, #E6F4EA); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bom) 28%, transparent); }
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q.fe-est-ruim.fe-est-ruim { background: var(--ruim-suave, #FBE9EB); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ruim) 26%, transparent); }
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q:is(.fe-est-bom, .fe-est-ruim) .fn-tr { background: color-mix(in srgb, var(--papel) 60%, transparent); }
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q .fe-est { display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 999px; font: 700 12px/17px var(--f-txt, inherit); }
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q .fe-est.bom { background: var(--bom); color: var(--papel, #fff); }
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q .fe-est.ruim { background: var(--ruim); color: var(--papel, #fff); }
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q .fe-est.normal { padding-left: 0; color: var(--tinta-2); font-weight: 600; }
/* o selo no pé do quadrado, à esquerda e na mesma linha em todos (ele, 10/11, sobre os quadrados da aba Semana): o texto de cima varia de
   altura, então o selo desce para o fim do quadrado, e os quadrados da fileira já têm a mesma altura */
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q { align-items: stretch; }
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q .fn-tx { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q .fn-pct { margin-top: 0; }   /* o percentual fica logo abaixo do número, como antes; só o selo desce */
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q .fn-est-pe { margin-top: auto; padding-top: 10px; line-height: 1; }
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q .fn-est-pe .fe-est { margin-top: 0; }
html[data-fn] #pagina section[data-id="do-investido-a-venda"] .fn-q .fn-est-pe .fe-est.normal { padding: 1px 0; }

/* 2. a barra de onde caiu o investido de conversão */
#pagina .tpf { margin: 2px 0 14px; }
#pagina .tpf-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; }
#pagina .tpf-tot b { font: 700 24px/1.1 var(--f-num); letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
#pagina .tpf-tot span { margin-left: 4px; font-size: 13.5px; color: var(--tinta-2); }
#pagina .tpf-barra { display: flex; gap: 2px; height: 30px; border-radius: 8px; overflow: hidden; background: var(--sutil); }
#pagina .tpf-seg { display: flex; align-items: center; justify-content: center; min-width: 3px; flex-basis: 0; }
#pagina .tpf-seg b { font: 700 13px/1 var(--f-num); font-variant-numeric: tabular-nums; }
#pagina .tpf-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13.5px; color: var(--tinta-2); }
#pagina .tpf-l { display: inline-flex; align-items: baseline; gap: 6px; }
#pagina .tpf-l i { width: 12px; height: 12px; border-radius: 3px; flex: none; transform: translateY(1px); }
#pagina .tpf-l .tpf-ln { font-weight: 600; color: var(--tinta); }
#pagina .tpf-l b { font: 600 13.5px/1 var(--f-num); color: var(--tinta); font-variant-numeric: tabular-nums; }
#pagina .tpf-l small { font-size: 12.5px; color: var(--tinta-3); }
#pagina :is(.tpf-seg, .tpf-l i, .tpf-selo).fx-otimo { background: var(--fx-otimo); color: var(--fx-otimo-tx); }
#pagina :is(.tpf-seg, .tpf-l i, .tpf-selo).fx-bom { background: var(--fx-bom); color: var(--fx-bom-tx); }
#pagina :is(.tpf-seg, .tpf-l i, .tpf-selo).fx-regular { background: var(--fx-regular); color: var(--fx-regular-tx); }
#pagina :is(.tpf-seg, .tpf-l i, .tpf-selo).fx-ruim { background: var(--fx-ruim); color: var(--fx-ruim-tx); }
#pagina :is(.tpf-seg, .tpf-l i, .tpf-selo).fx-sem { background: var(--fx-sem); color: var(--fx-sem-tx); }

/* as campanhas: a faixa em selo cheio, o nome com a plataforma, o tipo e o status embaixo */
#pagina .tpf-selo { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 700 12.5px/18px var(--f-txt, inherit); white-space: nowrap; }
#pagina .tpf-fora { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }
#pagina #t-camp td.tpc-nome { min-width: 240px; max-width: 380px; white-space: normal; }
#pagina #t-camp .tpc-n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--tinta); }
#pagina #t-camp .tpc-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tinta-3); }
#pagina #t-camp .tpc-meta .selo { margin-left: 4px; font-size: 11.5px; }
#pagina #t-camp .tpc-parada { font-weight: 600; color: var(--ruim); }
#pagina #t-camp td small.cinza { margin-left: 4px; font-size: 12px; }

#pagina .tpc-pe { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 13px; line-height: 1.45; color: var(--tinta-2); max-width: 110ch; }

/* 4. o aviso de atribuição */
#pagina .tp-aviso { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--atencao-suave, #FBF0E2); color: var(--tinta); font-size: 13.5px; line-height: 1.45; max-width: 92ch; }
#pagina .tp-aviso b { font-weight: 700; }
/* sem ajuste a 390 px: o celular e o tablet vão ter um web app próprio (regra de 10/11, nas Regras de toda tela) */

/* r120 (11/11): Metas › Tráfego pago, o plano de tráfego de cada empresa (as peças da tela de Metas: .t.cfg, .cfg-num, .quadro-metas, .cfg-barra) */
#pagina .pt-ctrl { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
#pagina .pt-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 10px; font-size: 14px; color: var(--tinta); }
#pagina .pt-cab .cinza { font-size: 13px; }
#pagina :is(table.pt-tab, .pt-verba table) :is(th, td) { vertical-align: middle; }   /* o nome da linha na altura do campo */
#pagina table.pt-tab th[scope="row"] { text-align: left; font-weight: 600; color: var(--tinta); white-space: nowrap; }
#pagina table.pt-tab th[scope="row"] small { font-weight: 500; }
#pagina table.pt-tab td.pt-confira { min-width: 200px; font-size: 12.5px; white-space: normal; }
#pagina table.pt-tab .cfg-num, #pagina .pt-verba .cfg-num { width: 96px; }
#pagina .pt-verba { margin-top: 14px; max-width: 560px; }
#pagina .quadro-metas .pt-cel { all: unset; cursor: pointer; display: inline-block; min-width: 44px; padding: 2px 4px; border-radius: 6px; }
#pagina .quadro-metas .pt-cel:focus-visible, #pagina .quadro-metas button.pt-ir:focus-visible { outline: 2px solid var(--anil, #2D6FCD); outline-offset: 2px; }
#pagina .quadro-metas button.pt-ir.lk { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

#pagina .pt-falta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--tinta); }

/* r125 (11/11, maquete): a área de Metas no padrão do Hub (html[data-mod] também em /config) */
html[data-mod] #cfg-raiz > .subabas { margin-bottom: 18px; }
/* o quadro "O que falta cadastrar" (r125b): do tamanho do conteúdo, a situação em pílula de largura igual; o ✓ em verde; FALTA em maiúsculas,
   com contorno cinza; só o mês atual sem meta em laranja (atenção, G5); "parcial" com hachura, diferente de "falta" também sem a cor (G6) */
html[data-mod] table.quadro-metas { width: 100%; table-layout: fixed; }
html[data-mod] table.quadro-metas thead th:first-child { width: 260px; }
html[data-mod] table.quadro-metas th { text-align: center; }
html[data-mod] table.quadro-metas th:first-child, html[data-mod] table.quadro-metas td:first-child { text-align: left; padding-right: 28px; }
html[data-mod] table.quadro-metas td { padding: 6px 8px; background: none !important; }
html[data-mod] table.quadro-metas .st { display: inline-flex; align-items: center; justify-content: center; min-width: 106px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 12.5px var(--f-txt); white-space: nowrap; box-sizing: border-box; }
html[data-mod] table.quadro-metas .st.ok { background: var(--bom-suave); color: var(--bom); }
html[data-mod] table.quadro-metas .st.falta { color: var(--tinta-3); box-shadow: inset 0 0 0 1px var(--linha-forte); text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; }
html[data-mod] table.quadro-metas td:nth-child(2) .st.falta { background: var(--atencao-suave); color: var(--atencao); box-shadow: none; }
html[data-mod] table.quadro-metas .st.parcial { color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-forte); background: repeating-linear-gradient(135deg, var(--sutil-2) 0 4px, var(--papel) 4px 8px); }
html[data-mod] table.quadro-metas td:nth-child(2) .st.parcial { color: var(--atencao); box-shadow: inset 0 0 0 1px var(--atencao); }
html[data-mod] table.quadro-metas .st.sf { color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linha-forte); }
html[data-mod] table.quadro-metas .pt-cel { min-width: 0; padding: 0; }
html[data-mod] table.quadro-metas tr.q-atual td:first-child :is(a, button) { font-weight: 800; }
html[data-mod] table.quadro-metas tr.q-atual td:first-child :is(a, button)::before { content: '›'; margin-right: 6px; color: var(--tinta-3); }
/* os quadrados do topo: a unidade e o "de N" menores, ao lado do número */
html[data-mod] .cfg-kpis .num .un { font-size: .5em; font-weight: 600; color: var(--tinta-3); margin-left: 4px; letter-spacing: 0; }
/* a barra de baixo salva tudo: o antigo "Salvar metas novas" fica na página, escondido (o salvar da barra usa o dele) */
html[data-mod] #x-barra[hidden] { display: none !important; }
/* a opção escolhida (o degrau acompanhado, as opções de Decisões) em anil, a cor de seleção das subabas: o laranja fica só para atenção (G5);
   antes, Decisões tinha 20 cartões laranja ("Como está") que se liam como 20 alertas */
html[data-mod] .alvo-escolha label.marcado { border-color: var(--topo-fundo); background: var(--sutil-2); }
html[data-mod] .alvo-escolha input { accent-color: var(--topo-fundo); }
html[data-tema="escuro"][data-mod] .alvo-escolha label.marcado { border-color: var(--anil-2, #8C9BFF); }
html[data-tema="escuro"][data-mod] .alvo-escolha input { accent-color: var(--anil-2, #8C9BFF); }
/* a verba é do plano de tráfego: na aba da empresa ela aparece, sem edição (o cabeçalho leva a Metas › Tráfego pago) */
html[data-mod] #pagina input.cfg-num.cfg-x:disabled { background: transparent; border-color: transparent; color: var(--tinta-2); cursor: default; }
html[data-mod] table.cfg th a[data-nav] { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* o texto longo de Decisões numa medida de leitura */
html[data-mod] .lista-dec li { max-width: 80ch; }

/* ---------- r125b: as tabelas de Metas na opção C ---------- */
/* o campo que parece texto: vira campo ao passar o mouse; vazio = traço cinza num fundo leve (vale também no plano de tráfego) */
html[data-mod] #cfg-raiz input.cfg-num { width: 100%; max-width: 132px; box-sizing: border-box; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 5px 8px; text-align: right;
  font: 600 14px var(--f-num); font-variant-numeric: tabular-nums; color: var(--tinta); box-shadow: none; transition: background-color .15s, border-color .15s, box-shadow .15s; }
html[data-mod] #cfg-raiz input.cfg-num:placeholder-shown { background: var(--sutil-2); }
html[data-mod] #cfg-raiz input.cfg-num::placeholder { color: var(--tinta-3); opacity: .55; font-weight: 400; }
html[data-mod] #cfg-raiz input.cfg-num:hover:not(:disabled) { background: var(--sutil-2); border-color: var(--linha-forte); }
html[data-mod] #cfg-raiz input.cfg-num:focus { outline: none; background: var(--papel); border-color: var(--anil-2); box-shadow: 0 0 0 3px rgb(91 106 168 / .22); }
html[data-mod] #cfg-raiz input.cfg-num.erro { border-color: var(--ruim); }
html[data-mod] #cfg-raiz table.cfg td { padding: 3px 6px; height: 40px; vertical-align: middle; }
html[data-mod] #cfg-raiz table.cfg:not(.cfg-h) { width: 100%; }
html[data-mod] #cfg-raiz table.cfg-pessoas { table-layout: fixed; }
html[data-mod] #cfg-raiz table.cfg-pessoas thead th:first-child { width: 240px; }
/* os meses na horizontal: a primeira coluna com o nome da linha; cada mês e o total do trimestre na mesma largura */
html[data-mod] #cfg-raiz table.cfg-h { table-layout: fixed; width: 100%; }
html[data-mod] #cfg-raiz table.cfg-h [hidden] { display: none !important; }
html[data-mod] #cfg-raiz table.cfg-h thead th { text-align: right; padding: 6px 14px 8px 8px; white-space: nowrap; }
html[data-mod] #cfg-raiz table.cfg-h thead th:first-child { width: 168px; }
html[data-mod] #cfg-raiz table.cfg-h thead th.atual { color: var(--tinta); }
html[data-mod] #cfg-raiz table.cfg-h thead th.atual::after { content: ''; display: block; height: 3px; border-radius: 2px; background: var(--anil-2); margin: 6px 0 0 auto; width: 60%; }
html[data-mod] #cfg-raiz table.cfg-h :is(th, td).tri { background: var(--sutil-2); }
html[data-mod] #cfg-raiz table.cfg-h td.tri { text-align: right; padding-right: 15px; font: 600 14px var(--f-num); font-variant-numeric: tabular-nums; color: var(--tinta-2); white-space: nowrap; }
html[data-mod] #cfg-raiz table.cfg-h tbody th[scope="row"] { text-align: left; font-weight: 600; font-size: 13.5px; color: var(--tinta); padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-mod] #cfg-raiz table.cfg-h tbody th small, html[data-mod] #cfg-raiz table.cfg-pessoas th small { font-weight: 400; color: var(--tinta-3); }
html[data-mod] #cfg-raiz table.cfg-h tr:is(.cfg-grau-l, .cfg-orig) :is(td, th) { font-size: 12.5px; color: var(--tinta-3); height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-mod] #cfg-raiz table.cfg-h tr:is(.cfg-grau-l, .cfg-orig) td { text-align: right; padding-right: 15px; }
html[data-mod] #cfg-raiz table.cfg-h tr:is(.cfg-grau-l, .cfg-orig) th { font-weight: 400 !important; }
html[data-mod] #cfg-raiz table.cfg-h tr.cfg-orig td { border-bottom: 0; }
html[data-mod] #cfg-raiz .cfg-semctrl { margin: 0 0 6px; }
/* o gráfico das metas, alinhado às colunas: a barra é a meta, o traço é a cota, o tracejado é a super meta (G7: sem eixo, o número em cima) */
html[data-mod] #cfg-raiz .cfg-graf { display: grid; grid-template-columns: 168px repeat(var(--cols, 8), minmax(0, 1fr)); align-items: end; height: 150px; margin: 4px 0 6px; }
html[data-mod] #cfg-raiz .cg-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--linha-forte); }
html[data-mod] #cfg-raiz .cg-col.cg-tri { background: var(--sutil-2); border-radius: 10px 10px 0 0; }
html[data-mod] #cfg-raiz .cg-bar { width: 42%; max-width: 44px; background: #C9D0EA; border-radius: 8px 8px 3px 3px; transition: height .2s cubic-bezier(.23, 1, .32, 1); }
html[data-mod] #cfg-raiz .cg-bar.cheia { background: #5B6AA8; }
html[data-mod] #cfg-raiz .cg-bar.corte { box-shadow: inset 0 3px 0 var(--atencao); }
html[data-mod] #cfg-raiz .cg-tq { position: absolute; left: 50%; width: 62%; max-width: 62px; transform: translateX(-50%); height: 2px; border-radius: 1px; background: var(--tinta-2); transition: bottom .2s cubic-bezier(.23, 1, .32, 1); }
html[data-mod] #cfg-raiz .cg-tq.cg-super { height: 0; background: none; border-top: 2px dashed var(--tinta-2); }
html[data-mod] #cfg-raiz .cg-rot { position: absolute; left: 0; right: 0; text-align: center; font: 600 12.5px var(--f-num); font-variant-numeric: tabular-nums; color: var(--tinta-2); transition: bottom .2s cubic-bezier(.23, 1, .32, 1); }
html[data-mod] #cfg-raiz .cg-rot.aviso { color: var(--atencao); }
html[data-mod] #cfg-raiz .cg-vazio { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--tinta-3); }
html[data-mod] #cfg-raiz .cfg-leg { display: flex; gap: 18px; align-items: center; font-size: 12.5px; color: var(--tinta-3); margin: 0 0 14px 168px; }
html[data-mod] #cfg-raiz .cfg-leg i { display: inline-block; margin-right: 6px; vertical-align: middle; }
html[data-mod] #cfg-raiz .cfg-leg .lb { width: 12px; height: 12px; border-radius: 3px; background: #5B6AA8; }
html[data-mod] #cfg-raiz .cfg-leg .lt { width: 18px; height: 2px; background: var(--tinta-2); }
html[data-mod] #cfg-raiz .cfg-leg .ls { width: 18px; border-top: 2px dashed var(--tinta-2); }
html[data-mod] #cfg-raiz .cfg-leg-un { margin-left: auto; }
html[data-tema="escuro"][data-mod] #cfg-raiz .cg-bar { background: #3D4877; }
html[data-tema="escuro"][data-mod] #cfg-raiz .cg-bar.cheia, html[data-tema="escuro"][data-mod] #cfg-raiz .cfg-leg .lb { background: #8C9BFF; }
/* as tabelas por pessoa: a soma embaixo, contra a meta da empresa (T7) */
html[data-mod] #cfg-raiz table.cfg-pessoas thead th { text-align: right; padding: 6px 14px 8px 8px; white-space: nowrap; }
html[data-mod] #cfg-raiz table.cfg-pessoas thead th:first-child, html[data-mod] #cfg-raiz table.cfg-pessoas :is(tbody, tfoot) th { text-align: left; padding-left: 2px; padding-right: 32px; white-space: nowrap; }
html[data-mod] #cfg-raiz table.cfg-pessoas thead th.atual { color: var(--tinta); }
html[data-mod] #cfg-raiz table.cfg-pessoas tfoot :is(th, td) { border-top: 1px solid var(--linha-forte); height: 40px; font-size: 13.5px; }
html[data-mod] #cfg-raiz table.cfg-pessoas tfoot td { text-align: right; padding-right: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-mod] #cfg-raiz table.cfg-pessoas tfoot small.aviso { color: var(--atencao); }
@media (prefers-reduced-motion: reduce) { html[data-mod] #cfg-raiz :is(.cg-bar, .cg-tq, .cg-rot, input.cfg-num) { transition: none; } }
/* r127b: o plano de tráfego enche o card: a tabela do plano à esquerda e a verba ao lado, em vez de sozinha embaixo */
html[data-mod] #pt-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); column-gap: 32px; align-items: start; }
html[data-mod] #pt-form > :is(.pt-ctrl, .pt-cab) { grid-column: 1 / -1; }
html[data-mod] #pt-form > .tabela-wrap:not(.pt-verba) { grid-column: 1; }
html[data-mod] #pt-form > .pt-verba { grid-column: 2; margin-top: 0; }
html[data-mod] #pt-form .pt-verba table { width: 100%; }
html[data-mod] #pt-form table.pt-tab thead th { text-align: right; }
html[data-mod] #pt-form table.pt-tab thead th:first-child, html[data-mod] #pt-form table.pt-tab thead th:last-child { text-align: left; }
html[data-mod] #pt-form table.pt-tab tr.cfg-tri td.n { padding-right: 15px; text-align: right; }

/* ---------- r127c: o preenchimento enxuto (ele: "muito grande, deixa a pessoa com preguiça de preencher") ---------- */
/* um trimestre por vez, os cards em pares: a 1ª coluna com 120 px, as linhas com 36 px, o número com 13,5 px */
html[data-mod] #cfg-raiz table.cfg td { height: 36px; padding: 2px 4px; }
html[data-mod] #cfg-raiz input.cfg-num { font-size: 13.5px; padding: 4px 8px; }
html[data-mod] #cfg-raiz table.cfg-h thead th:first-child { width: 120px; }
html[data-mod] #cfg-raiz .cfg-graf { grid-template-columns: 120px repeat(var(--cols, 4), minmax(0, 1fr)); height: 118px; }
html[data-mod] #cfg-raiz .cfg-leg { margin-left: 120px; margin-bottom: 8px; }
html[data-mod] #cfg-raiz .cg-bar { width: 34%; max-width: 40px; }
html[data-mod] #cfg-raiz table.cfg-h tr:is(.cfg-grau-l, .cfg-orig) :is(td, th) { height: 28px; }
html[data-mod] #cfg-raiz table.cfg-pessoas thead th:first-child { width: 42%; }
html[data-mod] #cfg-raiz table.cfg-pessoas tbody th { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
html[data-mod] #cfg-raiz table.cfg-pessoas.recolhida tbody tr.cfg-mais { display: none; }
html[data-mod] #cfg-raiz .cfg-ver-mais { margin: 8px 0 0 2px; }
html[data-mod] #cfg-raiz .alvo-escolha { grid-template-columns: 1fr; gap: 8px; }
html[data-mod] #cfg-raiz section[data-id="como-o-hub-acompanha"].s12 .alvo-escolha { grid-template-columns: 1fr 1fr; }
html[data-mod] #cfg-raiz .alvo-escolha label { padding: 10px 14px; }
/* o quadro miúdo: o nome curto, o ✓ ou FALTA, linhas de 30 px */
html[data-mod] table.quadro-metas thead th:first-child { width: 128px; }
html[data-mod] table.quadro-metas th { padding: 0 2px 6px; font-size: 12.5px; }
html[data-mod] table.quadro-metas td { padding: 3px 2px; height: 30px; }
html[data-mod] table.quadro-metas td:first-child { padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-mod] table.quadro-metas .st { min-width: 0; width: 58px; height: 22px; padding: 0; font-size: 12px; }
html[data-mod] table.quadro-metas .st.ok { font-size: 14px; }
html[data-mod] table.quadro-metas .st.falta { font-size: 11px; letter-spacing: .04em; }
html[data-mod] table.quadro-metas .st.sf { width: auto; padding: 0 8px; }
html[data-mod] table.quadro-metas .pt-cel .st { width: 58px; }
/* r127c: o plano de tráfego enxuto, como as metas */
html[data-mod] #pt-form .pt-ctrl { gap: 6px 10px; margin-bottom: 6px; }
html[data-mod] #pt-form .pt-ctrl .seg button { min-height: 28px; padding: 0 9px; font-size: 12.5px; }
html[data-mod] #pt-form .pt-cab { margin: 4px 0 6px; font-size: 13.5px; }
html[data-mod] #pt-form table.pt-tab { table-layout: fixed; }
html[data-mod] #pt-form table.pt-tab thead th:first-child { width: 34%; }
html[data-mod] #pt-form table.pt-tab thead th:last-child { width: 72px; }
html[data-mod] #pt-form table.pt-tab tbody th { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-mod] #pt-form { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
/* r127c: o plano ao lado do histórico (s8 + s4): a tabela do plano sem esticar, a verba logo embaixo dela */
html[data-mod] #pt-form { display: block; }
html[data-mod] #pt-form .pt-verba { margin-top: 12px; }
html[data-mod] #pt-form .pt-verba table { width: auto; min-width: 0; }
html[data-mod] #pt-form .pt-verba table th:first-child { padding-right: 24px; }
html[data-mod] #pt-form table.pt-tab thead th:first-child { width: 30%; }

/* ---------- r127d: mês, número e barra no mesmo eixo (ele: "tá meio desalinhado o mês com o número, fica mais difícil a leitura") ---------- */
html[data-mod] #cfg-raiz table:is(.cfg-h, .cfg-pessoas) thead th:not(:first-child) { text-align: center; padding: 6px 4px 8px; }
html[data-mod] #cfg-raiz table:is(.cfg-h, .cfg-pessoas) thead th.atual::after { margin: 6px auto 0; width: 56px; }
html[data-mod] #cfg-raiz table:is(.cfg-h, .cfg-pessoas) td:not(:first-child) { text-align: center; }
html[data-mod] #cfg-raiz table:is(.cfg-h, .cfg-pessoas) td input.cfg-num { display: block; margin: 0 auto; max-width: 128px; text-align: center; }
html[data-mod] #cfg-raiz table.cfg-h td.tri, html[data-mod] #cfg-raiz table.cfg-h tr:is(.cfg-grau-l, .cfg-orig) td, html[data-mod] #cfg-raiz table.cfg-pessoas tfoot td { text-align: center; padding-right: 4px; }
/* o degrau acompanhado: um seletor pequeno na linha do trimestre, no lugar do card */
html[data-mod] #cfg-raiz .cfg-linha-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 4px; }
html[data-mod] #cfg-raiz .cfg-linha-ctrl .cfg-semctrl { margin: 0; }
html[data-mod] #cfg-raiz .cfg-acomp { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta-3); }
html[data-mod] #cfg-raiz .cfg-acomp .alvo-escolha { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; }
html[data-mod] #cfg-raiz .cfg-acomp .alvo-escolha label { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; font: 500 13px var(--f-txt); color: var(--tinta-2); cursor: pointer; }
html[data-mod] #cfg-raiz .cfg-acomp .alvo-escolha label.marcado { background: var(--papel); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 3px rgb(26 32 55 / .14); }
html[data-mod] #cfg-raiz .cfg-acomp .alvo-escolha label:has(input:focus-visible) { outline: 2px solid var(--anil-2); outline-offset: 1px; }
html[data-mod] #cfg-raiz .cfg-acomp .alvo-escolha input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
html[data-mod] #cfg-raiz .cfg-graf { height: 140px; padding-top: 22px; box-sizing: border-box; }
/* o traço do mês atual tem o lugar guardado em todos os meses: trocar de trimestre não muda a altura do card (C7) */
html[data-mod] #cfg-raiz table:is(.cfg-h, .cfg-pessoas) thead th:not(:first-child)::after { content: ""; display: block; height: 3px; border-radius: 2px; margin: 6px auto 0; width: 56px; background: transparent; }
html[data-mod] #cfg-raiz table:is(.cfg-h, .cfg-pessoas) thead th.atual::after { background: var(--anil-2); }

/* ---------- r127e: o quadrado do degrau acompanhado e o plano de tráfego refeito ---------- */
html[data-mod] #cfg-raiz .kpis.cfg-kpis-emp { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html[data-mod] #cfg-raiz .cfg-kpi-acomp .cfg-acomp { margin: 8px 0 6px; }
html[data-mod] #cfg-raiz .cfg-kpi-acomp .alvo-escolha { background: #E5E8EF; }
html[data-tema="escuro"][data-mod] #cfg-raiz .cfg-kpi-acomp .alvo-escolha { background: var(--sutil-3); }
/* o plano: duas tabelas curtas, o número no meio da coluna, a cor do canal no ponto (com o nome escrito, G6) */
html[data-mod] #pt-form table.pt-tab { table-layout: fixed; width: 100%; }
html[data-mod] #pt-form table.pt-tab + table, html[data-mod] #pt-form .tabela-wrap + .tabela-wrap { margin-top: 14px; }
html[data-mod] #pt-form table.pt-tab thead th { text-align: center !important; padding: 6px 4px 8px; white-space: nowrap; }
html[data-mod] #pt-form table.pt-tab thead th:first-child { text-align: left !important; width: 26%; color: var(--tinta); font-size: 13px; }
html[data-mod] #pt-form table.pt-tab thead th:last-child { width: 120px; text-align: left !important; }
html[data-mod] #pt-form table.pt-tab thead th small { font-weight: 400; color: var(--tinta-3); }
html[data-mod] #pt-form table.pt-tab td { text-align: center; }
html[data-mod] #pt-form table.pt-tab td input.cfg-num { display: block; margin: 0 auto; max-width: 112px; text-align: center; }
html[data-mod] #pt-form table.pt-tab td.pt-confira { text-align: left; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-mod] #pt-form table.pt-tab td.pt-cpl { font: 600 13px var(--f-num); font-variant-numeric: tabular-nums; color: var(--tinta-2); }
html[data-mod] #pt-form table.pt-tab tr.pt-soma :is(th, td) { background: var(--sutil-2); font-weight: 600; }
html[data-mod] #pt-form table.pt-tab tr.pt-soma td.n { text-align: center; padding-right: 4px; font: 600 14px var(--f-num); }
html[data-mod] #pt-form table.pt-venda thead th:first-child { width: 26%; }
html[data-mod] #pt-form .pt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: 1px; }
html[data-mod] #cfg-raiz .kpis.cfg-kpis-emp > .kpi { grid-column: auto !important; grid-row: auto !important; }
/* r127f (ele: "deixa um pouco maior e centraliza"): o seletor do degrau maior e no meio do quadrado */
html[data-mod] #cfg-raiz .cfg-kpi-acomp { display: flex; flex-direction: column; }
html[data-mod] #cfg-raiz .cfg-kpi-acomp .cfg-acomp { flex: 1; justify-content: center; margin: 10px 0 8px; }
html[data-mod] #cfg-raiz .cfg-kpi-acomp .alvo-escolha { padding: 4px; border-radius: 14px; }
html[data-mod] #cfg-raiz .cfg-kpi-acomp .alvo-escolha label { min-height: 38px; padding: 0 22px; font-size: 15px; border-radius: 11px; }
html[data-mod] #cfg-raiz .cfg-kpi-acomp .sub { text-align: center; }

/* r133 (11/11, Rodada 133) ---------------------------------------------------------------------------------------------------------------
   Pipeline por fase (ele: "as seleções desse card estão uma em cima da outra, elas têm que ficar uma do lado da outra"): os três seletores
   (Ver por, Medida, Forma) numa linha, como os de um vis-ctrl só; quebram para baixo só se faltar largura */
.tp-temp-ctrl { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
/* a rolagem (ele: "aumenta um pouco o tempo que precisa para ele entender se estou rolando a página ou a tabela que passo"): a caixa que rola
   por dentro fica fora do mouse até 600 ms depois de a página parar (app.js, rola-espera); a roda segue com a página */
html.rola-espera #pagina .rola-caixa { pointer-events: none; }

/* v153 (11/11) ------------------------------------------------------------------------------------------------------------------------
   O selo da fase da seção (ele: "fundo preto e letra branca, quadrado com canto arredondado, embaixo do nome, centralizado, sem aumentar o
   tamanho do card original da seção"; "é mostrar que eu ainda não cheguei no ponto que quero"; depois, "tirou o título principal do centro…
   um pouquinho [no] card embaixo, no centro, como se estivesse pendurado"): o nome fica no meio da pastilha, como nas outras, e o ALPHA ou
   BETA fica pendurado no meio da borda de baixo, metade dentro e metade fora, sem mudar o tamanho da pastilha. Mora dentro do .aba-nome:
   aparece com ele (mouse, foco ou a seção aberta). O fundo da pastilha é claro nos dois temas, então o preto vale nos dois */
header .abas .aba-fase { display: block; padding: 2px 5px 1.5px; border-radius: 4px; background: #0E1018; color: #fff; font: 700 8.5px/1 var(--f-txt); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
@media (min-width: 768px) {
  /* quem corta o nome que ainda não cabe passa a ser a .aba-pil; o selo se posiciona pela pastilha (o <a>) e por isso passa da borda */
  header .abas a.aba-pz[data-fase] { overflow: visible; }
  header .abas a.aba-pz[data-fase] .aba-pil { width: 100%; overflow: hidden; }
  header .abas a.aba-pz[data-fase] .aba-fase { position: absolute; top: calc(100% - 6px); left: 50%; transform: translateX(-50%); }
  /* no "Mais" a lista tem altura livre: o selo fica embaixo do nome, sem pendurar */
  header .abas .aba-mais-menu a.aba-pz[data-fase] .aba-pil { width: auto; overflow: visible; }
  header .abas .aba-mais-menu a[data-fase] .aba-nome { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.05; }
  header .abas .aba-mais-menu a[data-fase] .aba-fase { position: static; transform: none; }
}
/* no celular as abas são de texto, com o nome sempre à vista: o selo fica embaixo do nome, dentro dos 46 px da aba */
@media (max-width: 767px) {
  header .abas a[data-fase] .aba-nome { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.05; }
  header .abas a[data-fase] { padding-top: 3px; padding-bottom: 2px; }
}