/* HomeFix · Cards individuais de vendas (Visão geral) e de comissão (Comissões) — Manual de Marca:
   vermelho #D8101A (abaixo da meta / destaque), grafite #3C3C3B, cinza #A8A8A8; verde #285C38 só para "meta atingida",
   o mesmo tom de status já usado no painel. Títulos em Bebas Neue, textos em Metropolis, números na fonte de dados. */
#dashboardSellerRanking.hf-cd-grade, .hf-cd-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; align-items: start; }
.hf-cd-grade.foco { grid-template-columns: minmax(0, 760px); justify-content: center; }
.hf-cd-vazio { grid-column: 1 / -1; padding: 28px; color: #6B6B6A; font-size: 13px; text-align: center; }

.hf-cd-card { display: grid; gap: 11px; min-width: 0; padding: 16px 16px 12px; border: 1px solid #E4E4E4; border-top: 4px solid #A8A8A8; border-radius: 18px; background: #FFFFFF; color: #3C3C3B; box-shadow: 0 4px 14px rgba(60, 60, 59, .05); }
.hf-cd-card.ok { border-top-color: #285C38; }
.hf-cd-card.abaixo { border-top-color: #D8101A; }
.hf-cd-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hf-cd-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
a.hf-cd-pessoa:hover strong { color: #D8101A; }
.hf-cd-pessoa > span:last-child { display: grid; min-width: 0; }
.hf-cd-pessoa strong { overflow: hidden; color: #3C3C3B; font: 800 14px/1.2 var(--hf-fonte-marca, Metropolis, Arial, sans-serif); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.hf-cd-pessoa small { overflow: hidden; color: #6B6B6A; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.hf-cd-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; overflow: hidden; border: 2px solid #D8101A; border-radius: 50%; background: #F2F2F2; color: #3C3C3B; font: 800 15px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); }
.hf-cd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hf-cd-pct { flex: none; display: grid; justify-items: end; line-height: 1; }
.hf-cd-pct strong { font: 400 36px/0.95 var(--hf-fonte-titulo, 'Bebas Neue', Impact, sans-serif); color: #A8A8A8; }
.hf-cd-pct span { color: #6B6B6A; font-size: 10.5px; }
.hf-cd-card.ok .hf-cd-pct strong { color: #285C38; }
.hf-cd-card.abaixo .hf-cd-pct strong { color: #D8101A; }

.hf-cd-barra { position: relative; height: 10px; border-radius: 999px; background: #EFEFEF; }
.hf-cd-barra i { display: block; height: 100%; border-radius: inherit; background: #A8A8A8; }
.hf-cd-card.ok .hf-cd-barra i { background: #285C38; }
.hf-cd-card.abaixo .hf-cd-barra i { background: #D8101A; }
.hf-cd-barra b { position: absolute; top: -4px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: #3C3C3B; }

.hf-cd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hf-cd-duo > div { display: grid; gap: 2px; min-width: 0; padding: 9px 11px; border-radius: 12px; background: #F6F6F6; }
.hf-cd-duo span, .hf-cd-mini span, .hf-cd-aviso span, .hf-cd-total span { color: #6B6B6A; font: 700 9.5px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.hf-cd-duo strong { overflow: hidden; font: 700 15px var(--hf-fonte-dados, Inter, Arial, sans-serif); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.hf-cd-duo strong.meta { color: #3C3C3B; }

.hf-cd-aviso { display: grid; gap: 2px; padding: 9px 12px; border-radius: 12px; font-size: 12px; line-height: 1.4; }
.hf-cd-aviso.falta { border: 1px solid #F3B8BB; background: #FDECEC; }
.hf-cd-aviso.falta span { color: #D8101A; }
.hf-cd-aviso.falta b { color: #D8101A; font: 700 17px var(--hf-fonte-dados, Inter, Arial, sans-serif); font-variant-numeric: tabular-nums; }
.hf-cd-aviso.falta small { color: #3C3C3B; font-size: 11.5px; }
.hf-cd-aviso.ok { display: block; background: #E7F4EB; color: #285C38; font-weight: 600; }
.hf-cd-aviso.ok b { font-weight: 800; }
.hf-cd-aviso.neutro { background: #F6F6F6; color: #6B6B6A; }

.hf-cd-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 2px; }
.hf-cd-mini > div { display: grid; gap: 1px; min-width: 0; }
.hf-cd-mini b { overflow: hidden; font: 600 12.5px var(--hf-fonte-dados, Inter, Arial, sans-serif); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.hf-cd-linha { display: flex; align-items: baseline; gap: 8px; padding-top: 8px; border-top: 1px solid #EFEFEF; font-size: 12px; }
.hf-cd-linha span { color: #6B6B6A; }
.hf-cd-linha b { font-family: var(--hf-fonte-dados, Inter, Arial, sans-serif); font-variant-numeric: tabular-nums; }
.hf-cd-linha small { margin-left: auto; color: #6B6B6A; font-size: 11px; }
.hf-cd-linha i { font-style: normal; }
.hf-cd-linha i.up { color: #285C38; }
.hf-cd-linha i.down { color: #D8101A; }

.hf-cd-card > footer { display: flex; gap: 6px; padding-top: 2px; }
.hf-cd-btn { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid #D7D7D7; border-radius: 10px; background: #FFFFFF; color: #3C3C3B; font: 700 11.5px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.hf-cd-btn svg { width: 15px; height: 15px; }
.hf-cd-btn:hover { border-color: #D8101A; color: #D8101A; }
.hf-cd-btn:disabled { opacity: .55; cursor: progress; }
.hf-cd-ferramentas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }
.hf-cd-ferramentas .hf-cd-btn { flex: 0 0 auto; min-height: 38px; padding: 0 14px; }

/* ---------- comissões ---------- */
.hf-cd-secao-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.hf-cd-secao-head p { margin: 0; color: #A8A8A8; font: 700 10px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); letter-spacing: .18em; text-transform: uppercase; }
.hf-cd-secao-head h2 { margin: 2px 0 4px; color: #3C3C3B; font: 400 30px/1 var(--hf-fonte-titulo, 'Bebas Neue', Impact, sans-serif); letter-spacing: .02em; }
.hf-cd-secao-head span { display: block; max-width: 780px; color: #6B6B6A; font-size: 12.5px; line-height: 1.45; }
.hf-cd-secao-head .hf-cd-ferramentas { margin: 0; flex: none; }
.hf-cd-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; align-items: end; margin-bottom: 10px; padding: 12px 14px; border-radius: 14px; background: #F6F6F6; }
.hf-cd-filtros label { display: grid; gap: 4px; min-width: 0; color: #3C3C3B; font: 700 10px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); letter-spacing: .05em; text-transform: uppercase; }
.hf-cd-filtros select, .hf-cd-filtros input[type="search"] { width: 100%; min-width: 0; min-height: 38px; padding: 7px 10px; border: 1px solid #A8A8A8; border-radius: 10px; background: #FFFFFF; color: #3C3C3B; font: 500 12.5px var(--hf-fonte-dados, Inter, Arial, sans-serif); letter-spacing: 0; text-transform: none; }
.hf-cd-filtros .hf-cd-chk { display: flex; align-items: center; gap: 7px; min-height: 38px; font: 500 12.5px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); letter-spacing: 0; text-transform: none; cursor: pointer; }
.hf-cd-filtros .hf-cd-chk input { width: 17px; height: 17px; accent-color: #D8101A; }
.hf-cd-resumo { margin: 0 0 12px; padding: 10px 14px 10px 16px; border-radius: 12px; background: #FFF6F6; box-shadow: inset 4px 0 0 #D8101A; font-size: 13px; }
.hf-cd-resumo:empty { display: none; }

.hf-cd-com { border-top-color: #3C3C3B; }
.hf-cd-cargo { padding: 1px 7px; border-radius: 999px; background: #3C3C3B; color: #FFFFFF; font: 700 9.5px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.hf-cd-total { flex: none; display: grid; justify-items: end; gap: 2px; }
.hf-cd-total strong { color: #285C38; font: 800 19px var(--hf-fonte-dados, Inter, Arial, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hf-cd-base { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 12px; background: #F6F6F6; font-size: 12px; }
.hf-cd-base span { color: #6B6B6A; }
.hf-cd-base b, .hf-cd-cond b, .hf-cd-regra b, .hf-cd-pag b, .hf-cd-indice b { font-family: var(--hf-fonte-dados, Inter, Arial, sans-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hf-cd-cond, .hf-cd-regra, .hf-cd-pag { display: grid; gap: 3px; font-size: 12px; }
.hf-cd-cond > div, .hf-cd-regra > div, .hf-cd-pag > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.hf-cd-cond > div { color: #6B6B6A; }
.hf-cd-cond > div.ok { color: #285C38; font-weight: 600; }
.hf-cd-regra { padding: 8px 10px; border: 1px dashed #D7D7D7; border-radius: 12px; }
.hf-cd-regra p { margin: 0 0 2px; color: #6B6B6A; font: 700 9.5px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.hf-cd-regra > div { color: #B0B0AF; }
.hf-cd-regra > div.ativo { margin: 0 -6px; padding: 4px 6px; border-radius: 8px; background: #FDECEC; color: #D8101A; font-weight: 800; }
.hf-cd-indice { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF; font: 800 11.5px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); letter-spacing: .04em; text-transform: uppercase; }
.hf-cd-pag > div.zero { color: #A8A8A8; }
.hf-cd-pag > div.neg b { color: #D8101A; }
.hf-cd-pag > div.tot { margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: #3C3C3B; color: #FFFFFF; font-weight: 800; }
.hf-cd-pag > div.tot b { font-size: 14px; }
.hf-cd-memoria > summary { min-height: 32px; display: inline-flex; align-items: center; color: #3C3C3B; font: 700 11.5px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); cursor: pointer; }
.hf-cd-memoria > summary:hover { color: #D8101A; }
.hf-cd-memoria ol { margin: 6px 0 0; padding-left: 18px; color: #3C3C3B; font-size: 11.5px; line-height: 1.5; }
.hf-cd-com.foco { gap: 13px; padding: 22px; }

@media (max-width: 860px) {
  #dashboardSellerRanking.hf-cd-grade, .hf-cd-grade { grid-template-columns: minmax(0, 1fr); }
  .hf-cd-btn { min-height: 44px; }
  .hf-cd-ferramentas { justify-content: stretch; }
  .hf-cd-ferramentas .hf-cd-btn { flex: 1 1 0; min-height: 44px; }
  .hf-cd-secao-head { flex-direction: column; }
  .hf-cd-secao-head .hf-cd-ferramentas { width: 100%; }
  .hf-cd-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-cd-filtros select, .hf-cd-filtros input[type="search"] { min-height: 44px; }
  .hf-cd-com.foco { padding: 16px; }
}
@media (max-width: 420px) { .hf-cd-filtros { grid-template-columns: minmax(0, 1fr); } }

/* ---------- impressão / PDF (A4 retrato, dois cards por linha) ---------- */
#hfCardsPrint { display: none; }
@page hf-cards { size: A4 portrait; margin: 10mm; }
@media print {
  body.hf-cards-printing > *:not(#hfCardsPrint) { display: none !important; }
  body.hf-cards-printing > #hfCardsPrint { display: block !important; page: hf-cards; color: #3C3C3B; font-family: Metropolis, Arial, sans-serif; }
  #hfCardsPrint, #hfCardsPrint * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .hf-cdp-head { display: grid; grid-template-columns: 52mm 1fr auto; align-items: center; gap: 6mm; margin-bottom: 5mm; padding-bottom: 3mm; border-bottom: 1.2mm solid #D8101A; }
  .hf-cdp-head img { width: 46mm; height: auto; }
  .hf-cdp-head h1 { margin: 0; color: #D8101A; font: 400 24pt/1 'Bebas Neue', Impact, sans-serif; }
  .hf-cdp-head p { margin: 1mm 0 0; font: 700 10pt Metropolis, Arial, sans-serif; }
  .hf-cdp-head span { color: #6B6B6A; font-size: 8pt; }
  #hfCardsPrint .hf-cd-grade { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4mm; }
  #hfCardsPrint .hf-cd-card { break-inside: avoid; box-shadow: none; }
  .hf-cdp-foot { display: flex; justify-content: space-between; margin-top: 5mm; padding-top: 2mm; border-top: .3mm solid #A8A8A8; color: #6B6B6A; font-size: 8pt; }
  .hf-cdp-foot b { color: #D8101A; font: 400 12pt 'Bebas Neue', Impact, sans-serif; letter-spacing: .06em; }
}
.hf-cd-com .hf-cd-pessoa small { white-space: normal; }

/* =====================================================================================
   7.6.29 · visual mais limpo dos cards: uma família de texto (Metropolis) para nomes e rótulos,
   a fonte de dados só nos números, sem caixa-alta com espaçamento, menos caixas e menos tamanhos.
   ===================================================================================== */
.hf-cd-card { gap: 10px; padding: 14px 16px 10px; border-top-width: 3px; box-shadow: none; font-family: var(--hf-fonte-marca, Metropolis, Arial, sans-serif); }
.hf-cd-pessoa { gap: 10px; }
.hf-cd-pessoa strong { font: 700 14.5px/1.25 var(--hf-fonte-marca, Metropolis, Arial, sans-serif); text-transform: none; letter-spacing: 0; }
.hf-cd-pessoa small { margin-top: 1px; font-size: 12px; color: #7A7A79; }
.hf-cd-avatar { border-width: 2px; font-size: 13px; }
.hf-cd-pct strong { font: 700 22px/1 var(--hf-fonte-dados, Inter, Arial, sans-serif); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hf-cd-barra { height: 6px; }
.hf-cd-barra b { top: -3px; width: 2px; height: 12px; margin-left: -1px; background: #6B6B6A; }
.hf-cd-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2px 0 0; }
.hf-cd-nums.um { grid-template-columns: 1fr; }
.hf-cd-nums > div { min-width: 0; }
.hf-cd-nums dt { color: #7A7A79; font: 500 12px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); }
.hf-cd-nums dd { margin: 1px 0 0; overflow: hidden; color: #3C3C3B; font: 600 16px var(--hf-fonte-dados, Inter, Arial, sans-serif); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.hf-cd-status { margin: 0; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; }
.hf-cd-status b { font-family: var(--hf-fonte-dados, Inter, Arial, sans-serif); font-weight: 700; font-variant-numeric: tabular-nums; }
.hf-cd-status.ok { background: #EEF6F0; color: #285C38; }
.hf-cd-status.falta { background: #FDF0F0; color: #A20C14; }
.hf-cd-status.neutro { background: #F4F4F4; color: #6B6B6A; }
.hf-cd-extra { margin: 0; overflow: hidden; color: #6B6B6A; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hf-cd-card > footer { gap: 4px; padding-top: 6px; border-top: 1px solid #F0F0F0; }
.hf-cd-card > footer .hf-cd-btn { flex: 0 0 auto; min-height: 30px; padding: 0 8px; border-color: transparent; background: transparent; color: #6B6B6A; font: 600 12px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); }
.hf-cd-card > footer .hf-cd-btn:hover { border-color: transparent; background: #F4F4F4; color: #D8101A; }
.hf-cd-card > footer .hf-cd-btn svg { width: 14px; height: 14px; }

.hf-cd-com { border-top-color: #3C3C3B; }
.hf-cd-total span { color: #7A7A79; font: 500 11.5px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); letter-spacing: 0; text-transform: none; }
.hf-cd-total strong { font: 700 18px var(--hf-fonte-dados, Inter, Arial, sans-serif); }
.hf-cd-metas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.hf-cd-metas span { padding: 3px 9px; border-radius: 999px; background: #F4F4F4; color: #6B6B6A; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hf-cd-metas span.ok { background: #EEF6F0; color: #285C38; font-weight: 600; }
.hf-cd-regua { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: #7A7A79; font-size: 12px; }
.hf-cd-regua span { margin-right: 2px; }
.hf-cd-regua em { padding: 2px 8px; border-radius: 6px; color: #A8A8A8; font: 500 12px var(--hf-fonte-dados, Inter, Arial, sans-serif); font-style: normal; font-variant-numeric: tabular-nums; }
.hf-cd-regua em.ativo { background: #3C3C3B; color: #FFFFFF; font-weight: 700; }
.hf-cd-pag { gap: 2px; font-size: 12.5px; }
.hf-cd-pag > div { padding: 4px 0; color: #3C3C3B; }
.hf-cd-pag > div span { color: #6B6B6A; }
.hf-cd-pag > div.tot { margin-top: 4px; padding: 8px 0 2px; border-top: 1px solid #E4E4E4; border-radius: 0; background: transparent; color: #3C3C3B; font-weight: 700; }
.hf-cd-pag > div.tot span { color: #3C3C3B; }
.hf-cd-pag > div.tot b { color: #285C38; font-size: 15px; }
.hf-cd-memoria > summary { min-height: 28px; color: #6B6B6A; font: 600 12px var(--hf-fonte-marca, Metropolis, Arial, sans-serif); }
.hf-cd-com.foco { padding: 20px 22px 12px; }
.hf-cd-com.foco .hf-cd-pag { font-size: 13.5px; }

/* impressão dos cards: sem botões e com a mesma tipografia limpa */
@media print {
  #hfCardsPrint .hf-cd-card { padding: 3.5mm 4mm; border-radius: 3mm; }
  #hfCardsPrint .hf-cd-pessoa strong { font-size: 10.5pt; }
  #hfCardsPrint .hf-cd-pct strong { font-size: 15pt; }
  #hfCardsPrint .hf-cd-nums dd { font-size: 11pt; }
  #hfCardsPrint .hf-cd-status, #hfCardsPrint .hf-cd-extra, #hfCardsPrint .hf-cd-pag { font-size: 8.5pt; }
}

/* 7.6.33 · Voltar no canto do retângulo de filtros */
.hf-cd-filtros { position: relative; }
.hf-cd-filtros .hf-cd-voltar { grid-column: -2 / -1; justify-self: end; min-height: 38px; padding: 7px 14px; border: 1px solid #3C3C3B; background: #FFFFFF; color: #3C3C3B; font-weight: 700; }
.hf-cd-filtros .hf-cd-voltar:hover { background: #3C3C3B; color: #FFFFFF; }
.hf-cd-filtros .hf-cd-voltar[hidden] { display: none; }
@media (max-width: 720px) { .hf-cd-filtros .hf-cd-voltar { grid-column: 1 / -1; justify-self: stretch; min-height: 44px; } }