/* Hub de Vendas GFlex — tokens e componentes (desenho: Marina, consulta de 06/10/2026) */
/* r102 (geist): a fonte do hub é a Geist (Vercel, licença OFL); mesmos intervalos de peso que a Plex tinha: 500 usa a Regular, 800 e 900 usam a Bold.
   r102 (geist-a2): size-adjust por peso para a Geist não ficar mais larga que a Plex (medido em 5.895 textos do hub: +2,6% no 400, +3,8% no 600, +5,0% no 700) */
@font-face { font-family: 'Geist'; src: url('/static/fontes/geist-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400 500; font-display: swap; size-adjust: 95%; }
@font-face { font-family: 'Geist'; src: url('/static/fontes/geist-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; size-adjust: 94%; }
@font-face { font-family: 'Geist'; src: url('/static/fontes/geist-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700 900; font-display: swap; size-adjust: 93%; }

:root {
  --fundo: #F6F5F2; --papel: #FFFFFF; --linha: #E4E1DA; --linha-forte: #CFCBC2;
  --tinta: #1E1E1E; --tinta-2: #4A4A4A; --tinta-3: #6E6A63; --neutro: #8B8178;
  --bom: #1F7A3A; --bom-suave: #E7F2EA; --atencao: #B45309; --atencao-bola: #D97706; --atencao-suave: #FBF0E2;
  --ruim: #C0132A; --ruim-suave: #FBE8EA; --cinza-estado: #8B8178;
  --marca: #F07020; --marca-tinta: #BE5819; --marca-dado: #EE6F20; --marca-suave: #FEF1E9; --grafite: #5D5D5F;
  --c-meta: #2A78D6; --c-whats: #1BAF7A; --c-exact: #4A3AA7; --c-google: #EDA100; --c-site: #E87BA4; --c-outros: #8B8178;
  --raio: 10px; --sombra: 0 1px 2px rgba(30, 30, 30, .05), 0 1px 1px rgba(30, 30, 30, .03);
  --f-num: 'Geist', 'Segoe UI', system-ui, sans-serif; --f-txt: 'Geist', 'Segoe UI', system-ui, sans-serif;   /* r102 (geist): Geist no lugar da IBM Plex Sans (07/10) */
}
body[data-emp="energy"] { --marca: #F8A818; --marca-tinta: #9F6C0F; --marca-dado: #C68613; --marca-suave: #FEF6E8; }
body[data-emp="tendas"] { --marca: #304090; --marca-tinta: #304090; --marca-dado: #304090; --marca-suave: #EAECF4; }
body[data-emp="gf2"] { --marca: #304090; --marca-tinta: #304090; --marca-dado: #304090; --marca-suave: #EAECF4; }
body[data-emp="medicoes"] { --marca: #507840; --marca-tinta: #507840; --marca-dado: #4A4A4A; --marca-suave: #EEF2EC; }
body[data-emp="mec"] { --marca: #681010; --marca-tinta: #681010; --marca-dado: #4A4A4A; --marca-suave: #F0E7E7; }
body[data-emp="solar"] { --marca: #F07828; --marca-tinta: #B95C1F; --marca-dado: #E97427; --marca-suave: #FEF2EA; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* r102 (geist-a1): algarismos sempre de mesma largura, como eram na Plex; o atalho `font:` apagava o tabular-nums de quem o usava */
html *, html *::before, html *::after { font-variant-numeric: tabular-nums !important; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 14px/1.45 var(--f-txt); font-variant-numeric: tabular-nums; overflow-x: hidden; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
.num { font-family: var(--f-num); font-weight: 800; letter-spacing: -.01em; }

/* ---------- topo ---------- */
.topo { background: var(--papel); border-top: 4px solid var(--marca); border-bottom: 1px solid var(--linha); }
.topo-in { max-width: 1440px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; min-height: 60px; }
.topo .logo-gflex { height: 34px; width: auto; display: block; }
.topo .logo-emp { height: 40px; width: auto; max-width: 220px; object-fit: contain; display: block; }
.topo .voltar { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--tinta-3); font-weight: 600; font-size: 13px; padding: 8px 10px 8px 0; border-right: 1px solid var(--linha); margin-right: 4px; min-height: 44px; }
.topo .voltar img { height: 22px; opacity: .7; }
.topo .voltar:hover { color: var(--tinta); }
.topo .troca { position: relative; }
.topo .troca > button { display: flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 4px; border-radius: 8px; min-height: 44px; }
.topo .troca > button:hover { background: var(--fundo); }
.topo .troca .menu { position: absolute; top: 100%; left: 0; z-index: 30; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; display: none; min-width: 240px; }
.topo .troca.aberto .menu { display: block; }
.topo .troca .menu a { display: flex; align-items: center; padding: 8px 10px; border-radius: 8px; min-height: 48px; }
.topo .troca .menu a:hover, .topo .troca .menu a[aria-current="true"] { background: var(--fundo); }
.topo .troca .menu img { height: 30px; max-width: 190px; object-fit: contain; }
.topo .espaco { flex: 1; }
.frescor { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-fonte { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--tinta-2); background: var(--fundo); border: 1px solid var(--linha); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.chip-fonte i { width: 8px; height: 8px; border-radius: 50%; background: var(--bom); display: inline-block; }
.chip-fonte.ambar i { background: var(--atencao-bola); } .chip-fonte.vermelho i { background: var(--ruim); }
.topo .acoes { display: flex; gap: 6px; }
.btn-icone { border: 1px solid var(--linha); background: var(--papel); border-radius: 8px; min-width: 40px; min-height: 40px; padding: 0 10px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--tinta-2); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-icone:hover { border-color: var(--linha-forte); color: var(--tinta); }

.abas { max-width: 1440px; margin: 0 auto; padding: 0 20px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas a { text-decoration: none; padding: 10px 14px 9px; font-weight: 600; color: var(--tinta-3); border-bottom: 3px solid transparent; white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.abas a:hover { color: var(--tinta); }
.abas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--marca-tinta); }

/* ---------- barra de período (fixa) ---------- */
.periodo { position: sticky; top: 0; z-index: 20; background: var(--papel); border-bottom: 1px solid var(--linha); box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.periodo-in { max-width: 1440px; margin: 0 auto; padding: 8px 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--fundo); border: 1px solid var(--linha); border-radius: 9px; padding: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 11px; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--tinta-2); min-height: 34px; }
.seg button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.datas { display: inline-flex; align-items: center; gap: 4px; }
.datas input { border: 1px solid var(--linha); border-radius: 8px; padding: 5px 6px; background: var(--papel); min-height: 34px; font-size: 13px; }
.sel { border: 1px solid var(--linha); border-radius: 8px; padding: 6px 8px; background: var(--papel); min-height: 34px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.ativo-linha { width: 100%; font-size: 12.5px; color: var(--tinta-3); display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.ativo-linha b { color: var(--tinta); font-weight: 700; }
.pilula { display: inline-flex; align-items: center; gap: 6px; background: var(--marca-suave); border: 1px solid var(--linha); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12.5px; font-weight: 600; }
.pilula button { border: 0; background: none; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; line-height: 1; color: var(--tinta-3); }
.pilula button:hover { background: rgba(0,0,0,.06); color: var(--tinta); }
.filtros-emp { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--tinta-2); border: 1px solid var(--linha); border-radius: 8px; padding: 4px 10px; background: var(--papel); cursor: pointer; min-height: 34px; }
.toggle input { accent-color: var(--marca-tinta); width: 16px; height: 16px; }

/* ---------- página ---------- */
main { max-width: 1440px; margin: 0 auto; padding: 16px 20px 40px; }
.carregando { opacity: .5; transition: opacity .15s; pointer-events: none; }
.faixa-resumo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.mini { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; box-shadow: var(--sombra); min-width: 0; }
.rot { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.mini .num { font-size: 24px; margin-top: 2px; display: block; }
.mini .sub { font-size: 12.5px; color: var(--tinta-3); }

.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px 20px 14px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; position: relative; min-width: 0; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.cartao::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--emp-cor, var(--linha)); }
.cartao:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-1px); }
.cartao .cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.cartao .cab img { height: 40px; width: auto; max-width: 210px; object-fit: contain; object-position: left center; }
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--sutil); color: var(--tinta-2); white-space: nowrap; }
.estado i { width: 8px; height: 8px; border-radius: 50%; background: var(--cinza-estado); }
.estado.bom { background: var(--bom-suave); color: var(--bom); } .estado.bom i { background: var(--bom); }
.estado.atencao { background: var(--atencao-suave); color: var(--atencao); } .estado.atencao i { background: var(--atencao-bola); }
.estado.ruim { background: var(--ruim-suave); color: var(--ruim); } .estado.ruim i { background: var(--ruim); }
.principal { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.principal .num { font-size: 34px; line-height: 1.05; }
.principal .un { font-family: var(--f-num); font-weight: 600; font-size: 18px; color: var(--tinta-2); }
.conf { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 5px; border: 1px solid currentColor; color: var(--tinta-3); align-self: center; }
.conf.C { border-style: dashed; }
.conf.B { background: transparent; }
.linha2 { font-size: 13.5px; color: var(--tinta-2); display: flex; gap: 4px 14px; flex-wrap: wrap; }
.linha2 b { font-family: var(--f-num); font-weight: 600; color: var(--tinta); }
.barra-meta { display: grid; gap: 4px; }
.barra-meta .trilho { height: 10px; border-radius: 6px; background: var(--sutil); position: relative; overflow: visible; }
.barra-meta .feito { height: 100%; border-radius: 6px; background: var(--emp-dado, var(--marca-dado)); max-width: 100%; }
.barra-meta.aconf .feito { background: repeating-linear-gradient(135deg, var(--emp-dado, var(--marca-dado)) 0 5px, rgba(255,255,255,.55) 5px 8px); opacity: .75; }
.barra-meta .hoje { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--tinta); border-radius: 1px; }
.barra-meta .leg { display: flex; justify-content: space-between; font-size: 12px; color: var(--tinta-3); gap: 8px; }
.spark-linha { display: flex; align-items: flex-end; gap: 12px; }
.spark { flex: 1; height: 48px; min-width: 0; }
.delta { font-family: var(--f-num); font-weight: 600; font-size: 13px; white-space: nowrap; color: var(--tinta-3); text-align: right; line-height: 1.25; }
.delta small { display: block; font-family: var(--f-txt); font-weight: 400; font-size: 11.5px; }
.delta.alto { color: var(--bom); } .delta.baixo { color: var(--ruim); }
.ponte-mini { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.ponte-mini span { background: var(--sutil); border-radius: 6px; padding: 2px 7px; color: var(--tinta-2); }
.rodape-cartao { border-top: 1px dashed var(--linha); padding-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 12.5px; color: var(--tinta-2); }
.rodape-cartao b { font-family: var(--f-num); font-weight: 600; color: var(--tinta); white-space: nowrap; }
.rodape-cartao > div { min-width: 0; }
.tag-foto { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--tinta-3); border: 1px solid var(--linha-forte); border-radius: 4px; padding: 0 4px; margin-left: 4px; }

/* ---------- blocos do app ---------- */
.blocos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bloco { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px 18px 12px; grid-column: span 12; min-width: 0; display: flex; flex-direction: column; }
.bloco.s6 { grid-column: span 6; } .bloco.s4 { grid-column: span 4; } .bloco.s8 { grid-column: span 8; } .bloco.s3 { grid-column: span 3; }
.bloco h2 { font: 700 16px/1.3 var(--f-num); margin: 0; color: var(--tinta); }
.bloco .subt { font-size: 12.5px; color: var(--tinta-3); margin: 2px 0 10px; }
.bloco .fonte { margin-top: auto; padding-top: 10px; font-size: 11.5px; color: var(--neutro); border-top: 1px solid var(--sutil); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 18px; }
.kpi .num { font-size: 26px; display: block; line-height: 1.1; white-space: nowrap; }
.kpi .num.grande { font-size: 40px; }
.kpi .sub { font-size: 12.5px; color: var(--tinta-3); }
.grafico { width: 100%; height: 280px; }
.grafico.alto { height: 360px; } .grafico.baixo { height: 200px; }
.vazio { color: var(--tinta-3); padding: 24px 0; text-align: center; }
.selo { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--sutil); color: var(--tinta-3); margin-left: 6px; vertical-align: middle; }
.selo.aviso { background: var(--atencao-suave); color: var(--atencao); }

/* tabelas */
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: 520px; overflow-y: auto; border: 1px solid var(--sutil); border-radius: 8px; }
table.t { border-collapse: collapse; width: 100%; font-size: 13px; }
table.t th { position: sticky; top: 0; background: var(--sutil-2); text-align: left; font-weight: 700; font-size: 12px; color: var(--tinta-2); padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; cursor: pointer; user-select: none; z-index: 1; }
table.t th[aria-sort="ascending"]::after { content: ' ▲'; font-size: 9px; } table.t th[aria-sort="descending"]::after { content: ' ▼'; font-size: 9px; }
table.t th.n, table.t td.n { text-align: right; }
table.t td { padding: 7px 10px; border-bottom: 1px solid var(--sutil); vertical-align: top; }
table.t td.nome { max-width: 370px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.t tr:hover td { background: var(--sutil-2); }
table.t td:first-child, table.t th:first-child { position: sticky; left: 0; background: inherit; }
table.t tbody td:first-child { background: var(--papel); }
.mapa td.cel { text-align: right; font-family: var(--f-num); font-weight: 600; font-size: 12.5px; }
.mapa td.cel small { display: block; font-family: var(--f-txt); font-weight: 400; color: var(--tinta-3); font-size: 11px; }
.ini { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--sutil-3); color: var(--tinta-2); align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-right: 8px; vertical-align: middle; }
.faixa-cor { display: inline-block; min-width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.abaixo { color: var(--ruim); } .acima { color: var(--bom); }
.cinza { color: var(--neutro); }

/* gaveta do glossário */
.gaveta { position: fixed; inset: 0 0 0 auto; width: min(460px, 100%); background: var(--papel); box-shadow: -10px 0 30px rgba(0,0,0,.15); z-index: 50; padding: 20px 22px; overflow-y: auto; transform: translateX(105%); transition: transform .2s; }
.gaveta.aberta { transform: none; }
.gaveta h3 { font: 700 18px var(--f-num); margin: 0 0 12px; }
.gaveta dt { font-weight: 700; margin-top: 12px; } .gaveta dd { margin: 2px 0 0; color: var(--tinta-2); }
.gaveta .fechar { position: absolute; top: 12px; right: 12px; }

.rodape-pagina { max-width: 1440px; margin: 0 auto; padding: 0 20px 30px; font-size: 12px; color: var(--neutro); display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .faixa-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bloco.s4 { grid-column: span 6; } .bloco.s3 { grid-column: span 6; } }
@media (max-width: 860px) { .bloco.s6, .bloco.s8, .bloco.s4, .bloco.s3 { grid-column: span 12; } }
@media (max-width: 767px) {
  .grade { grid-template-columns: minmax(0, 1fr); }
  .faixa-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topo-in { padding: 8px 14px; gap: 10px; flex-wrap: wrap; }
  .topo .logo-emp { height: 32px; max-width: 160px; }
  .frescor { display: none; }
  main, .periodo-in, .abas, .rodape-pagina { padding-left: 14px; padding-right: 14px; }
  .principal .num { font-size: 30px; }
  .kpi .num.grande { font-size: 34px; }
  .grafico { height: 240px; }
  .seg button { padding: 6px 8px; }
}
@media print {
  .periodo { position: static; } .topo .acoes, .topo .troca .menu, .gaveta { display: none !important; }
  body { background: #fff; } .cartao, .bloco { break-inside: avoid; box-shadow: none; }
}
.topo .troca > button span { font-size: 14px; color: var(--tinta-3); }
.mini .num { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- seções transversais (Leads, Conversões, Pré-venda, Mídia) ---------- */
.abas-sep { flex: 0 0 1px; background: var(--linha); margin: 10px 8px; }
.abas a.aba-emp { padding: 8px 8px 7px; }
.abas a.aba-emp img { height: 20px; width: auto; display: block; opacity: .72; transition: opacity .15s; }
.abas a.aba-emp:hover img { opacity: 1; }
.subabas { display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.subabas a { text-decoration: none; font-weight: 700; font-size: 13.5px; color: var(--tinta-2); background: var(--papel); border: 1px solid var(--linha); border-radius: 999px; padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; }
.subabas a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cartao-leads { position: relative; overflow: hidden; }
.cartao-leads::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--emp-cor, var(--linha)); }
.cab-mini { margin-bottom: 8px; }
.cab-mini img { height: 32px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.grafico.mini-serie { height: 110px; margin-top: 8px; }
.logo-kpi { height: 22px; width: auto; max-width: 150px; object-fit: contain; display: block; margin-bottom: 4px; }
.logo-tab { height: 22px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.mapa td.em-curso { font-style: italic; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(139,129,120,.10) 6px 9px); }

/* =====================================================================
   Visual v3 (06/10, noite) — pedido do Gustavo: "não gosto de fundo preto nem branco".
   Chão em anil-ardósia (o azul da GFlex), superfícies em anil bem claro, tinta azul-escura,
   laranja só para seleção e ação, e a cor de cada empresa na faixa do cartão, com o logo branco.
   Cores pensadas em OKLCH e gravadas em hex (o ECharts não lê oklch):
   chão oklch(.80 .045 268) · faixa do período oklch(.865 .032 268) · papel oklch(.948 .013 268)
   topo oklch(.30 .075 272) · tinta oklch(.25 .045 272). Contraste conferido: tinta/papel 13,8 · tinta-3/papel 6,2.
   ===================================================================== */
:root {
  --fundo: #B1BDDC; --fundo-2: #C9D2E8; --papel: #EAEEF7; --linha: #CBD1E0; --linha-forte: #A3ABBE;
  --tinta: #1A2037; --tinta-2: #383F55; --tinta-3: #51576C; --neutro: #5E6372;
  --sutil: #DCE2F0; --sutil-2: #E3E8F4; --sutil-3: #D0D7E9;
  --bom: #1B6E36; --bom-suave: #D3ECD7; --atencao: #A05000; --atencao-bola: #D77600; --atencao-suave: #F9E0C5;
  --ruim: #B7162D; --ruim-suave: #FBD7D6; --cinza-estado: #6E7484;
  --topo-fundo: #212A53; --topo-fundo-2: #303B6C; --topo-texto: #F1F3FA; --topo-texto-2: #BCC4E0; --topo-linha: #46518A;
  --laranja: #F07020;
  --marca: #F07020; --marca-tinta: #AA4600; --marca-dado: #E2661A; --marca-suave: #FAD8C6; --marca-faixa: #F07020;
  --sombra: 0 1px 2px rgb(26 32 55 / .10), 0 6px 18px rgb(26 32 55 / .07);
  --raio: 12px;
  --faixa-energy: #C8800D; --faixa-tendas: #304090; --faixa-gf2: #1656A4; --faixa-medicoes: #507840; --faixa-solar: #E26B1B; --faixa-mec: #681010;
  --suave-energy: #F5DEB5; --suave-tendas: #CED7F3; --suave-gf2: #C8DBF4; --suave-medicoes: #D0E4C6; --suave-solar: #FCD7C2; --suave-mec: #F0D1CF;
  --tinta-energy: #8A5600; --tinta-tendas: #324087; --tinta-gf2: #175198; --tinta-medicoes: #3F602A; --tinta-solar: #AA4600; --tinta-mec: #79191B;
  --dado-energy: #C8800D; --dado-tendas: #304090; --dado-gf2: #1656A4; --dado-medicoes: #4F8A3C; --dado-solar: #E26B1B; --dado-mec: #8A4B5C;
}
body[data-emp="energy"] { --marca: #C8800D; --marca-tinta: #8A5600; --marca-dado: #C8800D; --marca-suave: #F5DEB5; --marca-faixa: #F8A818; }
body[data-emp="tendas"] { --marca: #304090; --marca-tinta: #324087; --marca-dado: #304090; --marca-suave: #CED7F3; --marca-faixa: #6F82E0; }
body[data-emp="gf2"] { --marca: #1656A4; --marca-tinta: #175198; --marca-dado: #1656A4; --marca-suave: #C8DBF4; --marca-faixa: #5E93EA; }
body[data-emp="medicoes"] { --marca: #507840; --marca-tinta: #3F602A; --marca-dado: #4F8A3C; --marca-suave: #D0E4C6; --marca-faixa: #7FA86C; }
body[data-emp="solar"] { --marca: #E26B1B; --marca-tinta: #AA4600; --marca-dado: #E26B1B; --marca-suave: #FCD7C2; --marca-faixa: #F07828; }
body[data-emp="mec"] { --marca: #681010; --marca-tinta: #79191B; --marca-dado: #8A4B5C; --marca-suave: #F0D1CF; --marca-faixa: #C24A4A; }

body { background: var(--fundo); font-size: 14.5px; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* topo: anil da GFlex, logos brancos, linha na cor da empresa */
.topo { background: var(--topo-fundo); border-top: 0; border-bottom: 0; position: relative; color: var(--topo-texto); }
.topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--marca-faixa); }
.topo-in { min-height: 64px; }
.topo .logo-gflex { height: 36px; }
.topo .voltar { color: var(--topo-texto-2); border-right-color: var(--topo-linha); }
.topo .voltar:hover { color: #fff; }
.topo .troca > button { background: none; border-radius: 10px; padding: 6px 10px; }
.topo .troca > button:hover, .topo .troca.aberto > button { background: var(--topo-fundo-2); }
.topo .troca > button span { color: var(--topo-texto-2); }
.topo .troca .menu { background: var(--papel); border-color: var(--linha); box-shadow: 0 12px 32px rgb(26 32 55 / .22); }
.topo .troca .menu a:hover, .topo .troca .menu a[aria-current="true"] { background: var(--sutil); }
.topo .chip-fonte { background: var(--topo-fundo-2); border-color: var(--topo-linha); color: var(--topo-texto-2); }
.topo .btn-icone { background: var(--topo-fundo-2); border-color: var(--topo-linha); color: var(--topo-texto); }
.topo .btn-icone:hover { background: #3B4780; color: #fff; border-color: #6A76AE; }
header .abas { padding-bottom: 4px; }
header .abas a { color: var(--topo-texto-2); font-size: 14px; }
header .abas a:hover { color: #fff; }
header .abas a[aria-current="page"] { color: #fff; border-bottom-color: var(--laranja); }
.abas-sep { background: var(--topo-linha); }
.abas a.aba-emp img { opacity: .8; }

/* período: faixa mais clara do próprio chão */
.periodo { background: var(--fundo-2); border-bottom: 1px solid var(--linha-forte); box-shadow: 0 2px 10px rgb(26 32 55 / .08); }
.seg { background: var(--fundo); border-color: var(--linha-forte); }
.seg button { color: var(--tinta-2); }
.seg button:hover { color: var(--tinta); }
.seg button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgb(26 32 55 / .18); }
.datas input, .sel, .toggle { background: var(--papel); border-color: var(--linha-forte); color: var(--tinta-2); }
.ativo-linha { color: var(--tinta-2); }
.pilula { background: var(--marca-suave); border-color: var(--linha-forte); }
.pilula button { color: var(--tinta-2); }
.pilula button:hover { background: rgb(26 32 55 / .08); }

/* superfícies */
.mini, .cartao, .bloco { border: 0; box-shadow: var(--sombra); }
.vazio { color: var(--tinta-2); }
.rodape-pagina { color: var(--tinta-2); }

/* faixa de resumo com ícone */
.mini { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.mini .ico { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ic-bg, var(--marca-suave)); color: var(--ic, var(--marca-tinta)); }
.mini .ico svg { width: 21px; height: 21px; }
.mini .txt { min-width: 0; }
.mini .num { font-size: 26px; }

/* cartões das empresas: faixa cheia na cor da empresa com o logo branco */
.cartao { padding: 0 0 14px; gap: 0; }
.cartao::before { display: none; }
.cartao .cab { background: var(--emp-faixa, var(--topo-fundo)); padding: 14px 18px 14px 20px; margin-bottom: 14px; min-height: 70px; }
.cartao .cab img { height: 38px; }
.cartao > *:not(.cab) { margin-left: 20px; margin-right: 20px; }
.cartao > * + * { margin-top: 10px; }
.cartao .cab + * { margin-top: 0; }
.cartao .cab .estado { box-shadow: 0 1px 2px rgb(0 0 0 / .18); }
.cartao .cab .estado:not(.bom):not(.atencao):not(.ruim) { background: var(--papel); }
.principal .num { font-size: 38px; color: var(--emp-tinta, var(--tinta)); }
.principal .un { color: var(--emp-tinta, var(--tinta-2)); }
.cartao:hover { box-shadow: 0 2px 4px rgb(26 32 55 / .12), 0 14px 32px rgb(26 32 55 / .14); }
.barra-meta .trilho { height: 12px; background: var(--sutil-3); }
.barra-meta .feito { background: var(--emp-dado, var(--marca-dado)); }
.rodape-cartao b { font-size: 14px; }
.rodape-cartao { border-top-color: var(--linha-forte); }

/* cartões da área de Leads: mesma faixa */
.cartao-leads::before { display: none; }
.cartao-leads .cab-mini { background: var(--emp-faixa, var(--topo-fundo)); margin: -18px -20px 14px; padding: 13px 20px; }
.cartao-leads .cab-mini img { height: 30px; }

/* blocos */
.bloco { padding: 18px 20px 14px; }
.bloco h2 { font-size: 17px; display: flex; align-items: center; gap: 9px; }
.bloco h2::before { content: ''; flex: 0 0 10px; height: 10px; border-radius: 3px; background: var(--marca); }
.bloco .subt { font-size: 13px; }
.bloco .fonte { border-top-color: var(--linha); color: var(--neutro); }
.kpi .rot { font-size: 11.5px; }
.kpi .num { font-size: 28px; color: var(--tinta); }
.kpi .num.grande { font-size: 42px; color: var(--marca-tinta); }
.kpi .sub { font-size: 13px; }
.fonte { font-size: 12px; }

/* tabelas */
.tabela-wrap { border-color: var(--linha); background: var(--papel); }
table.t { font-size: 13.5px; }
table.t th { font-size: 12.5px; background: var(--sutil); color: var(--tinta-2); border-bottom-color: var(--linha-forte); }
table.t td { border-bottom-color: var(--linha); }
table.t tr:hover td { background: var(--sutil-2); }
small.cargo { display: block; margin-left: 36px; font-size: 11.5px; color: var(--tinta-3); }

/* subabas */
.subabas a { background: var(--papel); border-color: transparent; color: var(--tinta-2); box-shadow: 0 1px 2px rgb(26 32 55 / .08); }
.subabas a:hover { color: var(--tinta); }
.subabas a[aria-current="page"] { background: var(--topo-fundo); border-color: var(--topo-fundo); color: #fff; }

/* gaveta */
.gaveta { background: var(--papel); box-shadow: -10px 0 30px rgb(26 32 55 / .25); }

/* selos e estados no novo papel */
.selo { background: var(--sutil-3); color: var(--tinta-2); }
.ini { background: var(--sutil-3); color: var(--tinta-2); }
.estado { background: var(--sutil); }

/* régua de tráfego e recortes */
.regua { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.regua .item { background: var(--sutil-2); border: 1px solid var(--linha); border-radius: 10px; padding: 12px 14px; }
.regua .item .num { font-size: 26px; }
.regua .faixa { position: relative; height: 10px; border-radius: 6px; background: var(--sutil-3); margin: 10px 0 4px; }
.regua .faixa .zona { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--bom) 26%, transparent); border-radius: 6px; }
.regua .faixa .alvo { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta); }
.regua .faixa .real { position: absolute; top: -5px; width: 12px; height: 20px; margin-left: -6px; border-radius: 4px; background: var(--marca); box-shadow: 0 0 0 2px var(--papel); }
.regua .leg { display: flex; justify-content: space-between; font-size: 12px; color: var(--tinta-3); }

@media (prefers-reduced-motion: reduce) { .cartao, .gaveta, .carregando { transition: none; } .cartao:hover { transform: none; } }

/* legenda de cor inline (mês colorido pela meta) */
.leg-cor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.leg-cor i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 2px 0 6px; vertical-align: -1px; }

/* degraus na barra de meta */
.barra-meta .marca-nivel { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--papel); }
.barra-meta .leg2 { margin-top: -1px; }

/* Configuração → Metas */
.alvo-escolha { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.alvo-escolha label { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 14px 16px; border-radius: 10px; background: var(--sutil-2); border: 2px solid var(--linha); cursor: pointer; transition: border-color .15s, background-color .15s; }
.alvo-escolha label:hover { border-color: var(--linha-forte); }
.alvo-escolha label.marcado { border-color: var(--laranja); background: var(--marca-suave); }
.alvo-escolha input { grid-row: span 2; width: 18px; height: 18px; accent-color: var(--laranja); margin: 0; }
.alvo-escolha b { font: 700 16px/1.2 var(--f-num); }
.alvo-escolha small { color: var(--tinta-2); font-size: 13px; }
.cfg-tab { max-height: none; }
table.cfg td { vertical-align: middle; padding: 6px 10px; }
table.cfg tr.mes-atual td { background: var(--sutil-2); }
table.cfg th small { font-weight: 600; color: var(--tinta-3); }
input.cfg-num { width: 132px; text-align: right; font: 600 14px var(--f-num); color: var(--tinta); background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 8px; padding: 7px 9px; min-height: 38px; font-variant-numeric: tabular-nums; }
input.cfg-num::placeholder { color: var(--neutro); font-weight: 400; }
input.cfg-num:hover { border-color: var(--tinta-3); }
input.cfg-num:focus { outline: 2px solid var(--laranja); outline-offset: 0; border-color: var(--laranja); }
input.cfg-num.erro { border-color: var(--ruim); background: var(--ruim-suave); }
td.cfg-grau { font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; }
td.cfg-origem { font-size: 12.5px; color: var(--tinta-2); max-width: 340px; }
.cfg-barra { position: sticky; bottom: 12px; z-index: 25; margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px 12px 18px; border-radius: 12px; background: var(--topo-fundo); color: var(--topo-texto); box-shadow: 0 10px 30px rgb(26 32 55 / .3); }
.cfg-barra[hidden] { display: none; }
.cfg-barra .espaco { flex: 1; }
.cfg-barra.ok { background: #1B6E36; }
.cfg-barra.falha { background: #8E1426; }
.btn-pri, .btn-sec { font: 700 14px var(--f-txt); border-radius: 9px; padding: 0 18px; min-height: 42px; cursor: pointer; border: 1px solid transparent; }
.btn-pri { background: var(--laranja); color: #1A1206; }
.btn-pri:hover { background: #FF8A3D; }
.btn-pri:disabled { opacity: .6; cursor: progress; }
.btn-sec { background: transparent; color: var(--topo-texto); border-color: var(--topo-linha); }
.btn-sec:hover { background: var(--topo-fundo-2); }
@media (max-width: 767px) { input.cfg-num { width: 104px; } td.cfg-origem { min-width: 180px; } }
@media (prefers-reduced-motion: reduce) { .alvo-escolha label { transition: none; } }

@media (max-width: 767px) { .mini { flex-direction: column; gap: 8px; } .mini .ico { flex-basis: auto; width: 34px; height: 34px; border-radius: 10px; } .mini .ico svg { width: 18px; height: 18px; } .mini .num { font-size: 22px; } }

.fora-num { color: var(--tinta-2); font-weight: 600; }

/* Leads parados: números e nomes clicáveis, papel do dono e tarefa */
.kpi-bt { font: inherit; color: inherit; text-align: left; background: var(--sutil-2); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.kpi-bt:hover { border-color: var(--laranja); background: var(--marca-suave); }
.kpi-bt:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.link-bt { font: inherit; color: var(--tinta); background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; font-weight: 600; text-align: left; }
.link-bt:hover { color: var(--marca-tinta); text-decoration-color: currentColor; }
.num-bt { font-family: var(--f-num); min-width: 28px; text-align: right; }
small.cargo.cargo-0 { margin-left: 0; }
.selo.papel-sdr { background: #E6DDF4; color: #4E2E86; }
.selo.papel-comercial { background: #D6E3F7; color: #1D4F99; }
.selo.papel-outros { background: var(--sutil-3); color: var(--tinta-2); }
.tarefa { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.tarefa.vencida { background: var(--ruim-suave); color: var(--ruim); }
.tarefa.ok { background: var(--bom-suave); color: var(--bom); }
.tarefa.sem { background: var(--atencao-suave); color: var(--atencao); }
.parados-lista { margin-top: 14px; scroll-margin-top: 120px; }
.parados-cab { font-size: 13.5px; color: var(--tinta-2); margin-bottom: 8px; }
.parados-cab b { color: var(--tinta); font-size: 15px; }
.parados-cab a { color: var(--marca-tinta); font-weight: 600; }
table.t td.nome a { color: var(--tinta); font-weight: 600; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; }
table.t td.nome a:hover { color: #1D4F99; }
#g-parados { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .kpi-bt { transition: none; } }

/* dado vivo dos leads */
.vivo-selo { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--f-txt); color: var(--bom); background: var(--bom-suave); border-radius: 999px; padding: 3px 10px; margin-left: 6px; }
.vivo-selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--bom); box-shadow: 0 0 0 0 rgb(27 110 54 / .5); animation: pulso 2s ease-out infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgb(27 110 54 / .45); } 70% { box-shadow: 0 0 0 7px rgb(27 110 54 / 0); } 100% { box-shadow: 0 0 0 0 rgb(27 110 54 / 0); } }
.btn-mini { font: 700 12.5px var(--f-txt); color: var(--tinta); background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 8px; padding: 4px 10px; min-height: 30px; cursor: pointer; margin-left: 4px; }
.btn-mini:hover { border-color: var(--laranja); }
.btn-mini:disabled { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .vivo-selo i { animation: none; } }

/* Metas: quadro do que falta, total por trimestre, meses passados recolhidos */
table.quadro-metas td, table.quadro-metas th { text-align: center; }
table.quadro-metas td:first-child, table.quadro-metas th:first-child { text-align: left; }
table.quadro-metas td a { color: var(--tinta); font-weight: 600; }
.q-ok { color: var(--bom); font-weight: 800; background: var(--bom-suave); }
.q-sf { color: var(--tinta-2); font-size: 12px; font-weight: 600; background: var(--sutil-2); }
.q-falta { color: var(--ruim); font-weight: 700; font-size: 12.5px; background: var(--ruim-suave); }
table.quadro-metas tr.q-atual td { background-color: var(--marca-suave); }
table.cfg tr.cfg-tri td { background: var(--sutil); font-family: var(--f-num); font-weight: 700; color: var(--tinta); border-bottom: 2px solid var(--linha-forte); }
table.cfg tr.cfg-velho { display: none; }
.cfg-mostrar { margin: 0 0 8px; }

/* seta sempre vermelha ou verde; tom claro quando está dentro do normal */
.delta.alto.leve { color: #4F9A68; }
.delta.baixo.leve { color: #C9586A; }

.linha-pip { margin-top: 10px; font-size: 13px; color: var(--tinta-2); }

/* hoje à parte (parcial) */
.hoje-tag { font-size: 11.5px; font-weight: 700; color: var(--atencao); background: var(--atencao-suave); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.hoje-linha { font-size: 12.5px; color: var(--tinta-2); }
.hoje-linha b { font-family: var(--f-num); color: var(--tinta); }

.selo.ruim-selo { background: var(--ruim-suave); color: var(--ruim); }

/* placar da visão geral */
.placar { margin-bottom: 16px; }
table.placar-t td { vertical-align: middle; padding: 9px 10px; }
table.placar-t td small { display: block; font-size: 11.5px; color: var(--tinta-3); font-family: var(--f-txt); font-weight: 400; }
table.placar-t td b { font-family: var(--f-num); }
.pl-emp { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--tinta); text-decoration: none; }
.pl-emp:hover { text-decoration: underline; }
.pl-cor { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pl-sinais { display: flex; flex-wrap: wrap; gap: 4px; }
.sinal { font-size: 11.5px; font-weight: 700; color: var(--ruim); background: var(--ruim-suave); border-radius: 6px; padding: 2px 7px; text-decoration: none; white-space: nowrap; }
a.sinal:hover { text-decoration: underline; }
tr.pl-total td { background: var(--sutil); border-top: 2px solid var(--linha-forte); }
tr.pl-pv td { background: var(--sutil-2); }
.placar .tabela-wrap { max-height: none; }
.linha-fora { grid-column: span 12; font-size: 12.5px; color: var(--tinta-2); margin: 0; }

/* seletor de origem com várias origens */
.multi { position: relative; }
.multi-bt { cursor: pointer; text-align: left; }
.multi-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 300px; background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 12px; box-shadow: 0 12px 32px rgb(26 32 55 / .22); padding: 10px; }
.multi-menu[hidden] { display: none; }
.multi-atalhos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.multi-lista { max-height: 300px; overflow-y: auto; display: grid; gap: 2px; }
.multi-lista label { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; cursor: pointer; font-size: 13.5px; min-height: 34px; }
.multi-lista label:hover { background: var(--sutil); }
.multi-lista input { width: 16px; height: 16px; accent-color: var(--laranja); }
.multi-pe { display: flex; justify-content: flex-end; margin-top: 8px; }
.multi-pe .btn-pri { min-height: 36px; padding: 0 16px; }

/* 07/10: com a IBM Plex (mais larga; a Geist é parecida), valor de tabela não quebra no meio ("R$ 276 / mil"); a nota pequena embaixo continua quebrando */
table.t td.n { white-space: nowrap; }
table.t td.n small { white-space: normal; }

/* 07/10: cascata de números (do maior ao menor, todos em destaque; o que sai de cada degrau embaixo, menor) */
.cascata { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.cascata .degrau { position: relative; padding: 2px 18px 2px 24px; min-width: 0; }
.cascata .degrau:first-child { padding-left: 0; }
.cascata .degrau + .degrau { border-left: 1px solid var(--linha); }
.cascata .degrau + .degrau::before { content: '→'; position: absolute; left: -12px; top: 24px; width: 22px; height: 22px; border-radius: 50%; background: var(--laranja); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.cascata .rot { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); }
.cascata .num { font-family: var(--f-num); font-weight: 700; font-size: 40px; line-height: 1.08; letter-spacing: -.015em; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cascata .num small { font-size: 18px; font-weight: 600; color: var(--tinta-2); margin-left: 4px; letter-spacing: 0; }
.cascata .degrau.fim .num { color: var(--cor-fim, var(--tinta)); }
.cascata .val { font-family: var(--f-num); font-weight: 600; font-size: 17px; color: var(--tinta-2); white-space: nowrap; }
.cascata .sub { font-size: 13px; color: var(--tinta-2); margin-top: 2px; }
.cascata .tira { font-size: 12.5px; color: var(--tinta-3); margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--linha-forte); }
.cascata .acima { color: var(--bom); font-weight: 700; } .cascata .abaixo { color: var(--ruim); font-weight: 700; }
.bloco.s6 .cascata .num { font-size: 30px; } .bloco.s6 .cascata .num small { font-size: 15px; } .bloco.s6 .cascata .degrau { padding-left: 18px; padding-right: 10px; } .bloco.s6 .cascata .degrau:first-child { padding-left: 0; }
@media (max-width: 767px) {
  .cascata { grid-template-columns: 1fr; }
  .cascata .degrau, .bloco.s6 .cascata .degrau { padding: 12px 0 10px; }
  .cascata .degrau + .degrau { border-left: 0; border-top: 1px solid var(--linha); }
  .cascata .degrau + .degrau::before { content: '↓'; left: 0; top: -11px; }
  .cascata .num { font-size: 34px; }
}
.topo .btn-metas { display: inline-flex; align-items: center; text-decoration: none; }
.selo.bom { background: var(--bom-suave); color: var(--bom); } .selo.ruim { background: var(--ruim-suave); color: var(--ruim); }

/* 07/10: modo Arrumar (arrastar, largura, esconder) */
.oculto-layout { display: none !important; }
.arrumando .oculto-layout { display: flex !important; opacity: .45; }
.arrumando #pagina { padding-bottom: 120px; }
.arrumando #pagina section.bloco { position: relative; outline: 2px dashed var(--linha-forte); outline-offset: 2px; }
.arrumando #pagina section.bloco.arrastando { opacity: .35; outline-color: var(--laranja); }
.topo #btn-arrumar[aria-pressed="true"] { background: var(--laranja); border-color: var(--laranja); color: #1A1206; }
.arr-ferr { position: absolute; top: 8px; right: 8px; z-index: 6; display: flex; gap: 2px; background: var(--topo-fundo); border-radius: 9px; padding: 3px; box-shadow: 0 4px 14px rgb(26 32 55 / .25); }
.arr-ferr button { background: transparent; border: 0; color: #fff; font: 600 12.5px var(--f-txt); min-width: 32px; min-height: 32px; padding: 0 8px; border-radius: 6px; cursor: pointer; }
.arr-ferr button:hover, .arr-ferr button:focus-visible { background: var(--topo-fundo-2); }
.arr-ferr .arr-alca { cursor: grab; font-size: 17px; touch-action: none; }
.arrumando .arrastando .arr-alca { cursor: grabbing; }
.arr-barra { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 45; width: min(920px, calc(100% - 32px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; background: var(--topo-fundo); color: var(--topo-texto);
  border-radius: 14px; padding: 12px 16px; box-shadow: 0 12px 32px rgb(26 32 55 / .35); }
.arr-barra .arr-txt span { display: block; font-size: 12.5px; color: var(--topo-texto-2); }
.arr-barra .arr-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.arr-aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 50; background: var(--bom); color: #fff; font-weight: 700;
  padding: 10px 16px; border-radius: 10px; box-shadow: 0 10px 26px rgb(26 32 55 / .3); max-width: calc(100% - 32px); }
.arr-aviso.erro { background: var(--ruim); }

/* =====================================================================
   08/10 — avaliação com os olhos do CEO: exportar, links do Salesforce, filtro em cada card,
   cadeia do período, gaveta das listas, barra do período no celular, impressão
   ===================================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bloco h2.sr-only::before { display: none; }
/* link para o Salesforce: ↗ discreto ao lado do nome */
a.sf { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 22px; margin-left: 2px; border-radius: 6px; color: #1D4F99; font-weight: 700; text-decoration: none; font-size: 13px; vertical-align: 0; }
a.sf:hover, a.sf:focus-visible { background: #D6E3F7; }
table.t td.nome a.sf { font-weight: 700; color: #1D4F99; text-decoration: none; }
/* números e nomes que abrem a lista */
a.lk, [data-lista].lk, [data-leads].lk { color: inherit; text-decoration: underline; text-decoration-color: var(--linha-forte); text-underline-offset: 3px; cursor: pointer; }
a.lk:hover, a.lk:focus-visible { color: #1D4F99; text-decoration-color: currentColor; }
[data-lista], [data-leads] { cursor: pointer; }
.atencao-txt { color: var(--atencao); }
/* ⤓ exportar em cada card */
section.bloco { position: relative; }
.bt-exp { position: absolute; top: 12px; right: 12px; z-index: 4; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--tinta-3); font: 700 16px/1 var(--f-txt); cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; }
section.bloco:hover > .bt-exp, .bt-exp:focus-visible, .bt-exp[aria-expanded="true"] { opacity: 1; }
.bt-exp:hover { background: var(--sutil); border-color: var(--linha); color: var(--tinta); }
.bloco > h2 { padding-right: 36px; }
.cartao-leads > .bt-exp { color: #fff; opacity: .8; }
.cartao-leads > .bt-exp:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .35); color: #fff; }
.arrumando .bt-exp { display: none; }
.menu-exp { position: absolute; top: 46px; right: 12px; z-index: 35; min-width: 230px; display: grid; gap: 2px; background: var(--papel); border: 1px solid var(--linha-forte); border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgb(26 32 55 / .22); }
.menu-exp button { font: 600 13.5px var(--f-txt); color: var(--tinta); text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 12px; min-height: 40px; cursor: pointer; }
.menu-exp button:hover, .menu-exp button:focus-visible { background: var(--sutil); }
.menu-exp small { font-size: 12px; color: var(--tinta-3); padding: 6px 12px 4px; border-top: 1px solid var(--linha); margin-top: 2px; }
.topo .acoes { position: relative; }
.topo .menu-exp { top: calc(100% + 8px); right: 0; }
/* filtro escrito no card */
.filtro-card { font-size: 12px; color: var(--tinta-2); background: var(--marca-suave); border-radius: 6px; padding: 3px 9px; margin: -4px 0 10px; align-self: flex-start; max-width: 100%; }
.filtro-card .ignora { color: var(--tinta-3); font-style: italic; }
.bloco > h2 + .filtro-card { margin-top: 6px; }
.aviso-filtro { font-size: 12.5px; color: var(--tinta-2); font-style: italic; }
/* gaveta das listas (larga) */
.gaveta.larga { width: min(1100px, 100%); }
.gaveta .lista-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--tinta-2); margin: -4px 0 12px; }
.gaveta .lista-cab .btn-mini { margin-left: auto; }
.gaveta .tabela-wrap { max-height: none; }
.gaveta table.t td.nome { max-width: 280px; }
.busca-gl { width: 100%; border: 1px solid var(--linha-forte); border-radius: 9px; padding: 9px 12px; min-height: 42px; margin: 0 0 6px; background: var(--papel); font-size: 14px; }
.busca-gl:focus { outline: 2px solid var(--laranja); outline-offset: 0; border-color: var(--laranja); }
/* tabelas: só a lista longa rola dentro do card (as outras aparecem inteiras) */
.tabela-wrap { max-height: none; }
.tabela-wrap.longa { max-height: 560px; }
/* cadeia do período */
table.cadeia-t td { vertical-align: middle; padding: 9px 10px; text-align: right; }
table.cadeia-t td:first-child { text-align: left; }
table.cadeia-t td small { display: block; font-size: 11.5px; color: var(--tinta-3); font-family: var(--f-txt); font-weight: 400; }
table.cadeia-t td small.acima { color: var(--bom); font-weight: 700; } table.cadeia-t td small.abaixo { color: var(--ruim); font-weight: 700; }
table.cadeia-t td b { font-family: var(--f-num); font-size: 15px; }
table.cadeia-t td.cad a { text-decoration: none; color: inherit; display: block; border-radius: 6px; }
table.cadeia-t td.cad a:hover b { text-decoration: underline; }
table.cadeia-t td.cad.fraco { box-shadow: inset 0 0 0 2px var(--ruim); background: var(--ruim-suave); }
table.cadeia-t tr.pl-pv td.cad { text-align: left; }
/* cartões das empresas dentro da grade (card do Arrumar sem moldura própria) */
.bloco.sec-cartoes { background: transparent; box-shadow: none; padding: 0; border: 0; }
.bloco.sec-cartoes > .bt-exp, .bloco.sec-cartoes > .filtro-card { display: none; }
.sinal.leve { color: var(--atencao); background: var(--atencao-suave); }
.linha-unica { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* barra do período: no celular fica recolhida numa linha e abre ao toque */
.periodo-resumo { display: none; }
@media (max-width: 767px) {
  .periodo { position: static; }
  .periodo-resumo { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--papel); color: var(--tinta-2); font-size: 13.5px; padding: 6px 12px; cursor: pointer; text-align: left; }
  .periodo-resumo b { color: var(--tinta); font-family: var(--f-num); }
  .periodo:not(.aberto) .periodo-in > :not(.periodo-resumo) { display: none; }
  .periodo.aberto .periodo-resumo { border-color: var(--laranja); }
  /* chips de frescor do dado continuam visíveis no celular (numa linha que rola) */
  .frescor { display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; order: 5; scrollbar-width: none; }
  .frescor::-webkit-scrollbar { display: none; }
  .topo .acoes { flex-wrap: wrap; }
  /* tabelas de linha por empresa viram cartões: cada célula com o seu rótulo */
  table.cadeia-t thead, table.placar-t thead { display: none; }
  table.cadeia-t, table.cadeia-t tbody, table.cadeia-t tr, table.placar-t, table.placar-t tbody, table.placar-t tr { display: block; width: 100%; }
  table.cadeia-t tr, table.placar-t tr { border-bottom: 2px solid var(--linha-forte); padding: 6px 4px; }
  table.cadeia-t td, table.placar-t td { display: block; position: static; border: 0; padding: 6px 4px; text-align: right; background: transparent; overflow: hidden; }
  table.cadeia-t td[data-l]::before, table.placar-t td[data-l]::before { content: attr(data-l); float: left; font-size: 12.5px; font-weight: 600; color: var(--tinta-3); text-align: left; margin-right: 12px; }
  table.cadeia-t td:first-child, table.placar-t td:first-child { text-align: left; }
  table.cadeia-t td:first-child::before, table.placar-t td:first-child::before { content: none; }
  table.cadeia-t td.cad.fraco { box-shadow: inset 3px 0 0 var(--ruim); }
  .cadeia .tabela-wrap, .placar .tabela-wrap { border: 0; overflow: visible; background: transparent; }
  .menu-exp { right: 6px; }
  .gaveta.larga { width: 100%; }
  .tabela-wrap.longa { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .bt-exp { transition: none; } }
/* impressão: cabeçalho com tela, período, filtros e hora do dado; card sozinho quando é "PDF deste card" */
#cab-impressao { display: none; }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #cab-impressao { display: flex; flex-direction: column; gap: 2px; padding: 0 0 10px; margin-bottom: 12px; border-bottom: 2px solid #212A53; font-size: 12px; color: #383F55; }
  #cab-impressao b { font-size: 16px; color: #1A2037; }
  .topo, .abas, .periodo, .subabas, .bt-exp, .menu-exp, .filtro-card .ignora, .arr-barra, .arr-aviso, .rodape-pagina, .cfg-barra { display: none !important; }
  body { background: #fff; font-size: 12.5px; }
  main { max-width: none; padding: 0; }
  .blocos { gap: 10px; }
  .bloco { box-shadow: none; border: 1px solid #CBD1E0; break-inside: avoid; }
  .tabela-wrap, .tabela-wrap.longa { max-height: none !important; overflow: visible !important; }
  table.t th { position: static; }
  table.t td:first-child, table.t th:first-child { position: static; }
  .imprimir-so #pagina section.bloco:not(.imprimir-este) { display: none !important; }
  .imprimir-so #pagina .linha-fora { display: none; }
  .imprimir-so #pagina section.bloco.imprimir-este { grid-column: span 12; }
}
/* dois valores no mesmo número (Meta × Google): um por linha, menores, sem empurrar a tela */
.kpi .num .par { display: block; font-size: 20px; line-height: 1.3; white-space: normal; }
.kpi .num .par small { font: 600 11.5px var(--f-txt); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); margin-right: 6px; }
table.t td small.sob { display: block; font-size: 11.5px; color: var(--tinta-3); white-space: normal; }
table.cadeia-t tr.pl-pv td small { display: inline; margin: 0 2px; }
@media (max-width: 767px) {
  table.placar-t td .pl-sinais { clear: both; flex-wrap: wrap; justify-content: flex-start; padding-top: 6px; }
  table.placar-t .sinal { white-space: normal; text-align: left; }
}
/* rodada 11 (08/10): ⓘ do glossário em cada card, foto em círculo, decisões, metas novas, perfil só de leitura */
.bt-info { position: absolute; top: 12px; right: 48px; z-index: 4; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--tinta-3); font: 700 16px/1 var(--f-txt); cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; }
section.bloco:hover > .bt-info, .bt-info:focus-visible { opacity: 1; }
.bt-info:hover { background: var(--sutil); border-color: var(--linha); color: var(--tinta); }
.bloco > h2 { padding-right: 76px; }
.cartao-leads > .bt-info { color: #fff; opacity: .8; }
.arrumando .bt-info { display: none; }
img.ini.foto { object-fit: cover; padding: 0; background: var(--sutil-3); }
.selo.leitura { background: rgb(255 255 255 / .16); color: var(--topo-texto); margin-left: 0; padding: 5px 9px; font-size: 12px; }
.dec-grupo { grid-column: span 12; font: 700 13px var(--f-num); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); margin: 14px 0 -4px; }
.alvo-escolha.dec-opcoes { grid-template-columns: 1fr; gap: 8px; }
.dec-opcoes label { padding: 10px 12px; }
.dec-opcoes b { font-size: 14px; }
.dec-num { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--tinta-2); }
.lista-dec { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; color: var(--tinta-2); }
.lista-dec code { font-size: 12px; background: var(--sutil); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.cfg-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
#t-dec-nomes input.cfg-num { width: 180px; text-align: left; }
@media (max-width: 767px) { .bt-info { right: 46px; } #t-dec-nomes input.cfg-num { width: 130px; } }
.dec-desc { max-width: 300px; }