:root {
  /* Neutros com leve viés quente (menos clínico, mais "colmeia") */
  --bg: #F5F4F1;
  --surface: #FFFFFF;
  --surface-alt: #F3F1EC;
  --border: #E7E3DA;
  --border-strong: #D8D2C6;
  --text-primary: #1B1A17;
  --text-secondary: #6B6558;
  --text-muted: #9A9384;

  /* Marca Colmeia: TEAL como ação (bom contraste) + MEL/ÂMBAR como destaque */
  --primary: #0E7C6F;
  --primary-dark: #0B6055;
  --primary-bg: #E1F3F0;
  --on-primary: #FFFFFF;

  --honey: #EFA200;
  --honey-dark: #C77F00;
  --honey-bg: #FDF0D2;

  --success: #14A05B;
  --success-bg: #E4F7EC;
  --warning: #E08A00;
  --warning-bg: #FDF0D2;
  --danger: #E0463C;
  --danger-bg: #FCECEA;

  /* aliases mantidos p/ compatibilidade com classes existentes */
  --accent-purple: #7C3AED;  --accent-purple-bg: #F1EBFE;
  --accent-teal: #0E7C6F;     --accent-teal-bg: #E1F3F0;
  --accent-pink: #DB2777;     --accent-pink-bg: #FCE8F3;
  --accent-amber: #E08A00;    --accent-amber-bg: #FDF0D2;

  --radius: 14px;
  --radius-lg: 18px;
  --radius-sm: 10px;
  /* escala de elevação consistente (cards/sheets/modais) */
  --shadow-sm: 0 1px 2px rgba(27, 26, 23, 0.05);
  --shadow-md: 0 4px 14px rgba(27, 26, 23, 0.07);
  --shadow-lg: 0 12px 30px rgba(27, 26, 23, 0.12);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.hidden { display: none !important; }
/* números alinhados em colunas de dados */
b, strong, .valores, .kpi strong, td { font-variant-numeric: tabular-nums; }

button, select, input {
  font-family: inherit;
  touch-action: manipulation; /* remove o delay de 300ms no toque */
}
button {
  cursor: pointer;
  min-height: 44px; /* alvo de toque */
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 90ms ease;
}
button:active { transform: scale(0.97); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--primary-bg);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  background: var(--surface);
  border-radius: 16px;
  padding: var(--sp-6) var(--sp-5);
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: var(--shadow-md);
}
.login-card .eyebrow { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.login-card h1 { margin: 0 0 var(--sp-2); font-size: 22px; font-weight: 700; }
.login-card label { display: flex; flex-direction: column; font-size: 13px; gap: var(--sp-1); color: var(--text-secondary); font-weight: 500; }
.login-card input, .login-card select {
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  background: var(--surface);
  color: var(--text-primary);
  min-height: 48px;
}
.login-card input:focus, .login-card select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-bg);
}
.login-card button {
  margin-top: var(--sp-3);
  padding: 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--on-primary);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(14, 124, 111, .28);
}
.login-card button:hover { filter: brightness(1.05); }
.login-card button:active { box-shadow: 0 2px 8px rgba(14, 124, 111, .28); }
.erro { color: var(--danger); min-height: 16px; font-size: 13px; }

.painel { max-width: 760px; margin: 0 auto; padding: var(--sp-5); }
.topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-5); flex-wrap: wrap; gap: var(--sp-3); }
.topo .mini { font-size: 12px; color: var(--text-muted); margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.topo h1 { margin: 2px 0 0; font-size: 22px; font-weight: 700; }
.topo button {
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.topo button:hover { background: var(--surface-alt); border-color: var(--primary); color: var(--primary-dark); }
#sairBtn { color: var(--danger); border-color: var(--danger-bg); }
#sairBtn:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.dias-uteis {
  display: flex;
  gap: var(--sp-5);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.dias-uteis div { display: flex; flex-direction: column; }
.dias-uteis span { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.dias-uteis strong { font-size: 20px; font-weight: 700; }

#mesSelect, #mesSelectEquipe {
  min-width: 120px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 500;
}

/* Seletor de empresa (DOR|ARC) - so aparece pra quem vende nas duas */
.empresa-select {
  min-width: 96px;
  padding: 9px 10px;
  border: 1.5px solid var(--primary, #0D9488);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  background: var(--primary-bg, #ECFDF5);
  color: var(--primary-dark, #0F766E);
  cursor: pointer;
}
.empresa-select.hidden { display: none; }

/* As abas QUEBRAM EM VARIAS LINHAS em vez de rolar na horizontal: com 12 abas o
   scroll escondia metade delas e ninguem achava "Financeiro" ou "Ponto Extra".
   Borda arredondada vira raio normal porque pilula de 2 linhas fica estranha. */
.abas { display: flex; flex-wrap: wrap; gap: 4px; background: var(--surface-alt); border-radius: 14px; padding: 5px; margin-bottom: var(--sp-4); }
.abas .aba { flex: 0 1 auto; min-height: 36px; white-space: nowrap; border: none; background: transparent; padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); border-radius: 999px; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease; }
.abas .aba:active { transform: none; }
.abas .aba.active { background: var(--primary); font-weight: 700; color: var(--on-primary); box-shadow: 0 3px 10px rgba(14,124,111,.28); }
.pagina.hidden { display: none; }
.mini-inline { font-size: 13px; color: var(--text-muted); font-weight: 400; }

.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.kpis4 { grid-template-columns: repeat(4, 1fr); }
.kpis3 { grid-template-columns: repeat(3, 1fr); }
.pagina-arc.hidden { display: none; }
@media (max-width: 560px) { .kpis3 { grid-template-columns: 1fr; } }
.kpi { background: var(--surface); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.kpi span { display: block; font-size: 11.5px; color: var(--text-secondary); margin-bottom: var(--sp-1); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.kpi strong { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.kpi.destaque { background: var(--success-bg); }
.kpi.destaque strong { color: var(--success); }
/* Total positivado Dori: destacado (mel) junto com os outros quadrados */
.kpi.pos-destaque { background: var(--honey-bg); border-color: transparent; }
.kpi.pos-destaque span { color: var(--honey-dark); }
.kpi.pos-destaque strong { color: var(--honey-dark); }

h2 { font-size: 15px; font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); color: var(--text-primary); }
.lista { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.linha { background: var(--surface); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-sm); border-left: 3px solid transparent; }
.linha.acento-campanha { border-left-color: var(--accent-purple); }
.linha.acento-incentivo { border-left-color: var(--accent-teal); }
.linha.acento-cidade { border-left-color: var(--accent-amber); }
.linha.acento-foco { border-left-color: var(--accent-pink); background: var(--accent-pink-bg); }
.badge-foco { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 6px; background: var(--accent-pink); color: #fff; margin-right: 8px; vertical-align: middle; }
.linha-clicavel { cursor: pointer; transition: box-shadow 150ms ease, transform 100ms ease; }
.linha-clicavel:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.linha .cabecalho { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: var(--sp-2); }
.linha .medida { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin: var(--sp-1) 0 2px; }
.barra { height: 9px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; margin-bottom: var(--sp-2); box-shadow: inset 0 1px 2px rgba(27,26,23,.06); }
.barra span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--honey), var(--honey-dark)); transition: width 400ms cubic-bezier(.22,.61,.36,1); }
.barra.pos span { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--surface-alt); color: var(--text-secondary); margin-left: 6px; }
.tag.alto { background: var(--success-bg); color: var(--success); }
.tag.medio { background: var(--warning-bg); color: var(--warning); }
.tag.baixo { background: var(--danger-bg); color: var(--danger); }
.vazio { color: var(--text-muted); font-size: 13px; padding: var(--sp-2) 0; }

.chart-wrap { display: flex; align-items: center; gap: var(--sp-4); }
.chart-wrap canvas { max-width: 100%; }
.gauge-box { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.gauge-box .gauge-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }

/* premiacao destaque no topo */
.premio-destaque { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.premio-card { border-radius: var(--radius-sm); padding: 8px 10px; background: var(--honey-bg); box-shadow: var(--shadow-sm); border: 1px solid transparent; }
.premio-card span { display: block; font-size: 10px; font-weight: 700; color: var(--honey-dark); margin-bottom: 1px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.premio-card strong { font-size: 19px; font-weight: 800; color: var(--honey-dark); letter-spacing: -.02em; }
.premio-card.ganho { background: var(--success-bg); border-color: transparent; }
.premio-card.ganho span { color: var(--success); }
.premio-card.ganho strong { color: var(--success); }
.premio-card { position: relative; }

/* 3 cards na linha quando há bônus */
.premio-destaque.tres { grid-template-columns: repeat(3, 1fr); }
.premio-quebra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; font-size: 10.5px; font-weight: 700; }
.premio-quebra span { color: var(--text-secondary); white-space: nowrap; }
.premio-quebra .mais { color: var(--text-muted); }
.premio-quebra .bonus { color: var(--honey-dark); }

/* Card de Bônus (extra) — mel; fica verde quando bate */
.premio-card.bonus { background: var(--honey-bg); }
.premio-card.bonus span { color: var(--honey-dark); }
.premio-card.bonus span small { text-transform: none; font-weight: 600; opacity: .8; letter-spacing: 0; }
.premio-card.bonus strong { color: var(--honey-dark); }
.premio-card.bonus.ganhou { background: var(--success-bg); }
.premio-card.bonus.ganhou span, .premio-card.bonus.ganhou strong { color: var(--success); }
.bonus-bateu { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; color: var(--success); }

/* Botão "+" do bônus */
.bonus-mais {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; min-height: 24px; border-radius: 50%;
  border: none; background: var(--honey); color: #fff;
  font-size: 17px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.bonus-mais[aria-expanded="true"] { background: var(--honey-dark); transform: rotate(45deg); }
@media (max-width: 420px) { .premio-card strong { font-size: 20px; } }

/* Balão do bônus */
.bonus-pop {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--honey); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin: calc(var(--sp-3) * -1) 0 var(--sp-4);
  box-shadow: var(--shadow-md);
}
.bp-topo { display: flex; align-items: center; justify-content: space-between; }
.bp-titulo { font-size: 13px; font-weight: 800; color: var(--honey-dark); }
.bp-valor { font-size: 16px; font-weight: 800; color: var(--honey-dark); }
.bp-criterio { margin: 6px 0; font-size: 13px; color: var(--text-primary); }
.bp-criterio.pend { color: var(--text-muted); font-style: italic; }
.bp-status { display: flex; flex-direction: column; gap: 4px; }
.bp-chip { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.bp-chip.ok { background: var(--success-bg); color: var(--success); }
.bp-chip.meio { background: var(--honey-bg); color: var(--honey-dark); }
.bp-chip.pend { background: var(--surface-alt); color: var(--text-muted); }
.bp-linha { font-size: 12px; color: var(--text-secondary); }
.bp-linha b { color: var(--text-primary); font-weight: 800; }

/* gauges lado a lado com nome embaixo */
.gauges-dori { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); background: var(--surface); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.gauge-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.gauge-item .gauge-box { width: 110px; height: 110px; }
.gauge-item .gauge-box .gauge-label { font-size: 20px; }
.gauge-nome { font-size: 13px; font-weight: 600; color: var(--text-secondary); }

/* cartao de meta colorido */
.meta-card { border-left-width: 4px; padding: var(--sp-4); }
.meta-card .cabecalho { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-2); }
.meta-card .titulo { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.medida-rica { margin: var(--sp-3) 0 var(--sp-2); }
.medida-rica:first-of-type { margin-top: var(--sp-2); }
.medida-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 6px; gap: 8px; }
.medida-topo .rotulo { color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 11px; }
.medida-topo .valores { font-size: 12.5px; }
.medida-topo .valores b { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.medida-topo .valores b:last-child { color: var(--primary-dark); }
.medida-topo .meta { color: var(--text-muted); }
.medida-baixo { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.premio-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--surface-alt); color: var(--text-secondary); }
.premio-tag.ganho { background: var(--success); color: #fff; }

/* barra de nota (ruim/regular/bom/excelente) */
.nota { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.nota.ruim { background: var(--danger-bg); color: var(--danger); }
.nota.regular { background: var(--warning-bg); color: var(--warning); }
.nota.bom { background: var(--primary-bg); color: var(--primary-dark); }
.nota.excelente { background: var(--success-bg); color: var(--success); }
.barra span.b-ruim { background: var(--danger); }
.barra span.b-regular { background: var(--warning); }
.barra span.b-bom { background: var(--primary); }
.barra span.b-excelente { background: var(--success); }

/* cidade estilo relatorio */
.cidade-card .cidade-nome { font-size: 15px; font-weight: 700; }
.cidade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12px; margin: var(--sp-2) 0; }
.cidade-grid .item { display: flex; justify-content: space-between; }
.cidade-grid .item span { color: var(--text-secondary); }
.cidade-grid .item b { font-weight: 700; }

/* ===== repaginacao: icones, cabecalhos, fundos tematicos ===== */
.ico { vertical-align: -3px; flex-shrink: 0; }
h2 { display: flex; align-items: center; gap: 8px; }
h2 .ico { color: var(--primary); }
h2 .mini-inline { margin-left: auto; }

/* cartao de meta: mais respiro, titulo escuro */
.meta-card { border-left-width: 5px; padding: var(--sp-4); background: var(--surface); }
.meta-card .cabecalho { margin-bottom: var(--sp-3); }
.meta-card .titulo { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.valores b { color: var(--text-primary); }
.premio-tag { display: inline-flex; align-items: center; gap: 4px; }
.premio-tag .ico { vertical-align: middle; }
.pct-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: rgba(16,24,40,0.05); color: var(--text-secondary); }

/* temas de grupo — cor no FUNDO do bloco, texto continua escuro */
.grupo-dori { background: #EAEEFC; border-left-color: #3B5BDB; }
.grupo-dori .barra > span { background: #3B5BDB; }
.grupo-amendoim { background: #FBF1E0; border-left-color: #D98410; }
.grupo-amendoim .barra > span { background: #D98410; }
.grupo-gelatina { background: #FBE9F1; border-left-color: #D6336C; }
.grupo-gelatina .barra > span { background: #D6336C; }
.grupo-gomas { background: #EDEFF1; border-left-color: #495057; }
.grupo-gomas .barra > span { background: #495057; }
.grupo-regaliz { background: #E5EFFB; border-left-color: #1C6FC9; }
.grupo-regaliz .barra > span { background: #1C6FC9; }
.grupo-itamaraty { background: #ECE9FA; border-left-color: #6741D9; }
.grupo-itamaraty .barra > span { background: #6741D9; }
.grupo-bell { background: #FAE7F0; border-left-color: #C2255C; }
.grupo-bell .barra > span { background: #C2255C; }
.grupo-foco { background: #FDEDE6; border-left-color: #E8590C; }
.grupo-foco .barra > span { background: #E8590C; }

/* Cartao de bonus do foco (ARC) - condicional: so libera batendo os 3 focos */
.bonus-card { border-left: 4px solid var(--amber, #D97706); background: #FFF7ED; margin-bottom: var(--sp-3, 10px); }
.bonus-card.liberado { border-left-color: var(--success, #16A34A); background: var(--success-bg, #F0FDF4); }
.bonus-card .titulo { display: inline-flex; align-items: center; gap: 6px; }
.bonus-regra { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--text-secondary, #64748B); }
.bonus-card.liberado .bonus-regra { color: var(--success, #16A34A); }
.so-arc.hidden, .so-dor.hidden { display: none; }
.grupo-amendupa { background: #F5EDE2; border-left-color: #B5651D; }
.grupo-amendupa .barra > span { background: #B5651D; }
.grupo-neutro { background: var(--surface); border-left-color: #CDD3DC; }
.grupo-neutro .barra > span { background: #868E96; }
.grupo-chocolates { background: #F1E4DA; border-left-color: #8B5E34; }
.grupo-chocolates .barra > span { background: #8B5E34; }
.grupo-biscoitos { background: #FBF3D9; border-left-color: #B8860B; }
.grupo-biscoitos .barra > span { background: #B8860B; }
.grupo-guloseimas { background: #F6E4FB; border-left-color: #AE3EC9; }
.grupo-guloseimas .barra > span { background: #AE3EC9; }

/* Painel Arcor e Bagley no painel do vendedor: grade compacta, 3 por linha. */
.ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--sp-2); }
.ab-grid .meta-card { padding: 8px 10px; border-left-width: 3px; }
.ab-grid .meta-card .cabecalho { margin-bottom: 4px; padding-bottom: 0; border-bottom: none; }
.ab-grid .meta-card .titulo { font-size: 12px; line-height: 1.25; font-weight: 700; }
.ab-grid .meta-card .vg-desc { display: none; }
.ab-grid .meta-card .medida { flex-direction: column; gap: 1px; font-size: 11px; margin: 2px 0; }
.ab-grid .meta-card .medida span:first-child { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 10px; color: var(--text-muted); }
.ab-grid .meta-card .premio-tag { padding: 2px 6px; font-size: 12px; }
.ab-grid .meta-card .barra { height: 6px; margin-bottom: 6px; }
@media (max-width: 380px) {
  .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* dentro de fundo tematico, a trilha da barra fica mais discreta */
.meta-card .barra { background: rgba(16,24,40,0.07); }

/* total destaque (Outros Dados) */
.total-destaque { display: flex; align-items: center; gap: var(--sp-3); background: linear-gradient(100deg, var(--primary-dark), var(--primary)); color: #fff; border-radius: var(--radius); padding: var(--sp-4); }
.total-destaque .td-icone { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; }
.total-destaque span { display: block; font-size: 12px; font-weight: 600; opacity: 0.9; }
.total-destaque strong { font-size: 26px; font-weight: 800; }

/* --- Ajustes tela (ritmo, %, cidades, referencia) --- */
.medida-baixo .tags-esq { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ritmo { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ritmo.ok { background: var(--success-bg); color: var(--success); }
.ritmo.acelerar { background: var(--danger-bg); color: var(--danger); }
.ritmo.bateu { background: var(--success); color: #fff; box-shadow: 0 2px 8px rgba(20,160,91,.35); }
.ritmo.fechado { background: var(--danger); color: #fff; box-shadow: 0 2px 8px rgba(220,38,38,.3); }

/* Status por medida do card Dori (faturamento e positivação separados) */
.dg-status { align-self: flex-start; margin-top: 2px; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; line-height: 1.3; }
.dg-status.ok { background: var(--success); color: #fff; box-shadow: 0 1px 6px rgba(20,160,91,.3); }
.dg-status.fechado { background: var(--danger); color: #fff; box-shadow: 0 1px 6px rgba(220,38,38,.3); }

.pct-excelente { color: var(--success); }
.pct-bom { color: var(--primary-dark); }
.pct-regular { color: var(--warning); }
.pct-ruim { color: var(--danger); }

.selo-atend { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.selo-atend.sim { background: var(--success-bg); color: var(--success); }
.selo-atend.nao { background: var(--danger-bg); color: var(--danger); }

/* Resumo da carteira (cabecalho de cidades) */
.carteira { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow-sm); }
.carteira-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.ck { display: flex; flex-direction: column; gap: 3px; background: var(--surface-alt); border-radius: var(--radius-sm); padding: 10px 12px; }
.ck span { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; }
.ck b { font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -.02em; }
.ck b small { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.ck.destaque { background: linear-gradient(180deg, var(--honey-bg), var(--surface)); grid-column: span 2; }
.ck.destaque b { color: var(--honey-dark); font-size: 24px; }
@media (max-width: 420px) { .carteira-kpis { grid-template-columns: repeat(2, 1fr); } .ck.destaque { grid-column: span 2; } }
@media (max-width: 560px) { .carteira-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Referencia (Outros dados) */
.ref-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.ref-linha b { color: var(--text-primary); font-weight: 700; }
.barra.ref { background: rgba(16,24,40,0.07); }
.barra.ref > span { background: var(--primary); }
.ref-falta { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* Incentivo por unidade: valor/un + botao "+" que expande os produtos do grupo */
.incentivo-valor { font-size: 12px; font-weight: 700; color: var(--primary-dark); margin: 2px 0 6px; }
.btn-mais { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 6px; border: 1.5px solid var(--primary); background: var(--primary-bg); color: var(--primary-dark); font-weight: 800; font-size: 14px; line-height: 1; cursor: pointer; vertical-align: middle; }
.incentivo-produtos { margin-top: 8px; padding: 8px 10px; background: var(--surface-alt); border-radius: 8px; font-size: 12px; }
.incentivo-produtos.hidden { display: none; }
.incentivo-produtos b { font-size: 12px; color: var(--text-secondary); }
.incentivo-produtos ul { margin: 4px 0 0; padding-left: 18px; }
.incentivo-produtos li { margin: 2px 0; color: var(--text-primary); }
/* Selo "dados de hoje às HH:MM" no topo do supervisor */
.selo-sync { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-alt); color: var(--text-secondary); }
.selo-sync.velho { background: #FEF3C7; color: #92400E; }
.selo-sync.hidden { display: none; }

/* Bônus: as duas condições (positivação Dori + clientes novos) */
.bp-cond { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.bp-cond.ok { color: #16A34A; font-weight: 600; }

/* Quebra do faturamento: o valor grande é o total (nota + pré-venda) e aqui
   embaixo vem, pequeno, quanto é de cada um. Duas linhas rótulo-à-esquerda /
   valor-à-direita, pra bater a vírgula e dar pra comparar de relance. */
.mb-sub { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; line-height: 1.35; color: var(--text-muted); }
.mb-sub.hidden { display: none; }
.mb-sub span { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.mb-sub i { font-style: normal; font-weight: 500; opacity: 0.85; }

/* Top Clientes: dois grupos. O oficial é cobrado pela indústria; o de treino é
   exercício da equipe — por isso muda a cor da faixa lateral e do cabeçalho. */
.tc-grupo { margin: 18px 0 8px; font-size: 13.5px; font-weight: 700; color: var(--text-primary); display: flex; flex-direction: column; gap: 1px; }
.tc-grupo:first-child { margin-top: 4px; }
.tc-grupo small { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.tc-grupo.oficial { border-left: 3px solid var(--primary); padding-left: 8px; }
.tc-grupo.treino { border-left: 3px solid #7C3AED; padding-left: 8px; }
.tc-grupo.treino small { color: #7C3AED; }
/* Card de treino: faixa roxa em vez da verde padrão */
.linha.tc-treino { border-left-color: #7C3AED !important; background: #FAF7FF; }
.linha.tc-treino .premio-tag { background: #F3E8FF; color: #6D28D9; }
.linha.tc-treino .premio-tag.ganho { background: #DCFCE7; color: #166534; }

/* Campanha Viagem: os 4 meses lado a lado por linha foco */
.vg-placar { display: flex; gap: 10px; margin-bottom: 12px; }
.vg-kpi { flex: 1; background: var(--surface-alt); border-radius: 10px; padding: 10px 12px; text-align: center; }
.vg-kpi span { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.vg-kpi b { display: block; font-size: 20px; margin: 2px 0; }
.vg-kpi small { font-size: 10.5px; color: var(--text-muted); }
.vg-alerta { margin: 0 0 12px; padding: 9px 12px; background: #FEF3C7; border-radius: 8px; font-size: 12px; color: #92400E; }
.vg-desc { font-weight: 500; color: var(--text-muted); font-size: 11px; }
.vg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.vg-mes { background: var(--surface-alt); border-radius: 8px; padding: 7px 8px; text-align: center; border: 1.5px solid transparent; }
.vg-mes.ok { background: #DCFCE7; border-color: #86EFAC; }
.vg-mes.falhou { background: #FEE2E2; border-color: #FCA5A5; }
.vg-mes.andando { background: #E0F2FE; border-color: #7DD3FC; }
.vg-m { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.vg-mes b { font-size: 16px; }
.vg-meta { font-size: 11px; color: var(--text-muted); }
.vg-mes .barra.mini { height: 4px; margin: 4px 0 2px; }
.vg-mes small { font-size: 10px; color: var(--text-muted); }
.linha.vg-sem-sku { opacity: .75; }
/* Roteiro de conversão da linha (ex: quem leva Bonobon e não leva Supreme) */
.btn-rot { width: 100%; margin-top: 10px; padding: 8px 12px; border-radius: 8px; border: 1.5px solid #0EA5E9; background: #F0F9FF; color: #075985; font-weight: 700; font-size: 12.5px; cursor: pointer; text-align: left; }
.vg-rot { margin-top: 8px; padding: 10px 12px; background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 8px; max-height: 380px; overflow-y: auto; }
.vg-rot.hidden { display: none; }
.vg-rot-tit { margin: 0 0 8px; font-size: 12px; color: #075985; font-weight: 600; }
.vg-rot-v { margin-bottom: 10px; }
.vg-rot-v b { font-size: 12px; color: var(--text-primary); }
.vg-rot-v b small { font-weight: 500; color: var(--text-muted); }
.vg-rot-v ul { margin: 4px 0 0; padding-left: 16px; list-style: none; }
.vg-rot-v li { margin: 2px 0; font-size: 11.5px; line-height: 1.3; }
.vg-rot-v li small { color: var(--text-muted); }

/* Evolucao do mix no card do Top Clientes */
.ev-mix { margin-top: 10px; padding: 8px 10px; background: var(--surface-alt); border-radius: 8px; }
.ev-cab { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: baseline; gap: 6px; }
.ev-cab small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.ev-sobe { color: #15803D; }
.ev-cai { color: #B91C1C; }
.ev-parado { color: var(--text-muted); }
.ev-graf { display: flex; align-items: flex-end; gap: 6px; height: 48px; margin-top: 6px; }
.ev-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.ev-barra { width: 100%; max-width: 26px; background: var(--primary, #0E7C6F); border-radius: 3px 3px 0 0; opacity: .55; }
.ev-barra.sobe { background: #16A34A; opacity: 1; }
.ev-barra.cai { background: #DC2626; opacity: .8; }
.ev-col small { font-size: 9px; color: var(--text-muted); margin-top: 3px; }

/* Ponto Extra: blocos por categoria + grade de fotos */
.pe-cat { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.pe-cat.ok { border-left-color: #16A34A; }
.pe-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 10px 0; }
.pe-foto { margin: 0; background: var(--surface-alt); border-radius: 8px; overflow: hidden; position: relative; }
.pe-foto img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.pe-foto figcaption { padding: 5px 7px; font-size: 10.5px; font-weight: 700; line-height: 1.25; }
.pe-foto figcaption small { display: block; font-weight: 500; color: var(--text-muted); }
.pe-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; cursor: pointer; }
.pe-ex-btn { margin-top: 8px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-secondary); font-weight: 700; font-size: 12px; cursor: pointer; }
.pe-ex { margin-top: 8px; padding: 10px; background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 8px; }
.pe-ex.hidden { display: none; }
.pe-ex-tit { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; color: #075985; }
.pe-foto.pe-modelo img { aspect-ratio: 4/3; }
/* Formulario que abre depois de tirar a foto (no lugar dos prompt do navegador) */
.pe-form { margin-top: 10px; padding: 12px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 9px; }
.pe-form-topo { display: flex; gap: 10px; align-items: center; }
.pe-form-topo img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; }
.pe-form-topo b { display: block; font-size: 13px; }
.pe-form-topo small { color: var(--text-muted); font-size: 11px; }
.pe-form label { display: grid; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); }
.pe-form label small { font-weight: 500; color: var(--text-muted); }
.pe-form select, .pe-form input { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; background: var(--surface); width: 100%; }
.pe-form input.hidden { display: none; }
.pe-busca.hidden { display: none; }
.pe-lista { display: grid; gap: 3px; max-height: 240px; overflow-y: auto; }
.pe-lista:not(:empty) { margin-top: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.pe-item { text-align: left; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; width: 100%; }
.pe-item:hover, .pe-item:focus { background: var(--primary-bg); }
.pe-item b { display: block; font-size: 12.5px; font-weight: 700; }
.pe-item small { color: var(--text-muted); font-size: 11px; }
.pe-vazio { margin: 0; padding: 8px; font-size: 12px; color: var(--text-muted); }
.pe-escolhido { padding: 9px 10px; background: #DCFCE7; border-radius: 8px; font-size: 12.5px; color: #166534; }
.pe-escolhido.hidden { display: none; }
.pe-trocar { margin-left: 6px; border: 0; background: transparent; color: #15803D; text-decoration: underline; font-size: 11.5px; cursor: pointer; }
.pe-form-btns { display: flex; gap: 8px; margin-top: 2px; }
.pe-form-btns .btn-exp { flex: 1; padding: 10px; font-size: 13px; }
.pe-form-btns .btn-exp[type="submit"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.pe-add { display: inline-block; }
.pe-add span { display: inline-block; padding: 9px 16px; border-radius: 9px; border: 1.5px dashed var(--primary, #0EA5E9); color: var(--primary-dark, #075985); background: var(--surface-alt); font-weight: 700; font-size: 13px; cursor: pointer; }

/* Senha do mês (Ponto Extra ARC): lembrete bem visível pro vendedor escrever
   num papel e fotografar junto. */
.pe-senha { background: #FEF3C7; border: 1.5px solid #F59E0B; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-size: 13.5px; color: #78350F; }
.pe-senha b { font-size: 16px; letter-spacing: .04em; }
.pe-senha.hidden { display: none; }

/* Ponto Extra ARC (equipe): editor de senha + exportar book. */
.pe-admin { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pe-admin label { font-size: 12px; font-weight: 700; color: var(--text-secondary); display: flex; flex-direction: column; gap: 3px; }
.pe-admin input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; min-width: 160px; }

/* Tabela semanal (supervisor e link da industria) */
.ps-nota { margin: -2px 0 10px; font-size: 11.5px; color: var(--text-muted); }
.ps-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ps-topo select { padding: 5px 8px; border-radius: 7px; border: 1px solid var(--border); font-size: 13px; }
.ps-resumo { font-size: 12.5px; color: var(--text-secondary); }
.ps-tab th.ps-sem { text-align: center; background: #FEF08A; color: #713F12; border-left: 2px solid var(--border); }
.ps-tab th.ps-sem.aberta { background: #FDE047; }
.ps-tab th.ps-sem small { display: block; font-weight: 600; color: #854D0E; }
.ps-btn { border: 1px solid #CA8A04; background: #fff; color: #713F12; border-radius: 5px; width: 18px; height: 18px; line-height: 1; font-weight: 800; cursor: pointer; margin-right: 4px; }
.ps-tab th.ps-meta, .ps-tab td.ps-meta { background: rgba(16,24,40,0.03); color: var(--text-muted); }
.ps-tab td.ps-real { font-weight: 700; }
.ps-tab .ps-ok { color: var(--primary-dark); }
.ps-tab tr.ps-equipe td { background: var(--primary-bg); font-weight: 800; }
.ps-tab tr.ps-equipe .fixa { background: var(--primary-bg); }
.ps-dias { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; justify-content: flex-end; }
.ps-dia { background: var(--surface-alt); border-radius: 5px; padding: 1px 5px; font-size: 10px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.ps-dia b { display: block; font-size: 9px; color: var(--text-muted); font-weight: 700; }
.ps-aviso { margin: 8px 0 0; padding: 8px 11px; background: #FEF3C7; border-radius: 8px; font-size: 11.5px; color: #92400E; }

/* Painel Arcor e Bagley: blocos DN / R$ e o detalhe da equipe no +/- */
.ab-tit { margin: 22px 0 8px; font-size: 14px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.ab-det { margin-top: 10px; padding: 10px; background: var(--surface-alt); border-radius: 8px; }
.ab-det.hidden { display: none; }
.ab-sub { margin: 2px 0 6px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.ab-det + .ab-sub { margin-top: 12px; }
.ab-det .semana-wrap { margin-bottom: 10px; }

/* Fechamento de campanha: botoes de PDF por industria */
.fc-tit { margin: 16px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.fc-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-botoes .btn-exp { flex: 0 1 auto; }

/* Aviso do prêmio único da Gigantes (só paga batendo venda E positivação) */
.gig-aviso { margin: 8px 0 0; padding: 6px 9px; border-radius: 7px; background: #FEF3C7; color: #92400E; font-size: 11.5px; }
.gig-aviso.ok { background: #DCFCE7; color: #166534; }

/* Placar da campanha Gigantes da Distribuição (4 blocos + porta de entrada) */
.gg-porta { border-left: 4px solid var(--border, #d1d5db); }
.gg-porta.gg-ok { border-left-color: #16A34A; }
.gg-porta.gg-falta { border-left-color: #DC2626; }
.gg-porta.gg-pendente { border-left-color: #D97706; }
.gg-kpi-forte { background: #1E293B; color: #fff; }
.gg-kpi-forte span, .gg-kpi-forte small { color: #CBD5E1; }
.gg-bloco { margin-top: 20px; }
.gg-bloco h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14.5px; }
.gg-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 6px; background: var(--surface-alt); color: var(--text-muted); }
.gg-tag.gg-dobro { background: #FEF3C7; color: #92400E; }
.gg-pts { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.gg-conferir { margin: 8px 0 0; font-size: 11.5px; color: #92400E; }

/* Exportar ficha do cliente (PNG pro WhatsApp, PDF pra e-mail) */
.tc-exp { display: flex; gap: 8px; margin-top: 8px; }
.btn-exp { flex: 1; padding: 6px 10px; border-radius: 8px; border: 1.5px solid var(--border, #d1d5db); background: var(--surface-alt); color: var(--text-secondary); font-weight: 600; font-size: 12px; cursor: pointer; }
.btn-exp:disabled { opacity: 0.6; cursor: wait; }

/* Sugestão de mix: o plano pronto pra fechar o alvo naquele cliente */
.btn-sug { width: 100%; margin-top: 10px; padding: 8px 12px; border-radius: 8px; border: 1.5px solid #F59E0B; background: #FFFBEB; color: #92400E; font-weight: 700; font-size: 12.5px; cursor: pointer; text-align: left; }
.btn-sug.aberto { background: #FEF3C7; }
.tc-sug { margin-top: 8px; padding: 10px 12px; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px; }
.tc-sug.hidden { display: none; }
.tc-sug-tit { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: #92400E; }
.tc-sug-lista { margin: 0; padding-left: 20px; }
.tc-sug-lista li { margin: 0 0 7px; font-size: 12px; line-height: 1.35; }
.tc-sug-lista b { display: block; color: var(--text-primary); font-weight: 600; }
.tc-sug-lista small { color: var(--text-muted); font-size: 11px; }

/* Top Clientes: detalhe do mix (o que compra x o que falta) */
.tc-vend { display: block; font-weight: 600; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.tc-det { margin-top: 10px; padding: 10px 12px; background: var(--surface-alt); border-radius: 8px; font-size: 12px; }
.tc-det.hidden { display: none; }
.tc-meta { margin: 0 0 8px; color: var(--text-secondary); }
.tc-meta.ok { color: #16A34A; font-weight: 600; }
.tc-h { margin: 10px 0 4px; font-size: 12.5px; color: var(--text-primary); }
.tc-cat { margin-bottom: 6px; }
.tc-cat b { font-size: 11.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; }
.tc-cat ul { margin: 3px 0 0; padding-left: 16px; list-style: none; }
.tc-cat li { margin: 3px 0; line-height: 1.35; }
.tc-ok { color: #16A34A; }
.tc-falta { color: var(--text-primary); }
.tc-alt { display: block; color: var(--text-muted); font-size: 11px; margin-left: 18px; }
.tc-slots { margin: 3px 0 0; padding-left: 0; list-style: none; }
.tc-slot { margin: 0 0 7px; }
.tc-fam { display: block; font-weight: 600; color: var(--text-primary); font-size: 11.5px; }
.tc-opc { margin: 2px 0 0; padding-left: 20px; list-style: none; }
.tc-opc li { margin: 2px 0; font-size: 11.5px; line-height: 1.3; }
.tc-tipo { color: var(--text-muted); font-size: 10.5px; }
.tc-dica { color: var(--primary-dark); font-weight: 500; font-size: 10.5px; }
.tc-sc { color: var(--text-muted); font-style: italic; }

.btn-falta { margin-top: 10px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--primary); background: var(--primary-bg); color: var(--primary-dark); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.falta-lista { margin-top: 8px; padding: 8px 10px; background: var(--surface-alt); border-radius: 8px; font-size: 12px; max-height: 320px; overflow-y: auto; }
.falta-lista.hidden { display: none; }
.falta-cidade { margin-bottom: 10px; }
.falta-cidade .fc-nome { font-weight: 700; color: var(--text-secondary); }
.fc-tabela { margin-top: 4px; }
.fc-linha { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.fc-linha:last-child { border-bottom: none; }
.fc-linha.fc-cab { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted); border-bottom: 1.5px solid var(--border); }
.fc-linha.cli-ok { color: #16A34A; font-weight: 600; }
.fc-cod { font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 10.5px; }
.fc-linha.cli-ok .fc-cod { color: #16A34A; }
.fc-fant { display: block; font-weight: 500; color: var(--text-muted); }
.fc-data { text-align: right; white-space: nowrap; font-size: 11px; color: var(--text-muted); }
.fc-linha.cli-ok .fc-data { color: #16A34A; }
.btn-falta .fok { color: #16A34A; }

/* Toggle Por semana / Total do mes */
.semana-toggle { display: inline-flex; gap: 4px; background: var(--surface-alt); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.semana-toggle button { border: none; background: transparent; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-secondary); border-radius: 8px; cursor: pointer; }
.semana-toggle button.active { background: var(--surface); color: var(--primary-dark); font-weight: 700; box-shadow: var(--shadow-sm); }
/* .visao-total/.visao-semana ja usam .hidden global (display:none!important) */
.semana-tab td:not(.fixa), .semana-tab th:not(.fixa) { text-align: right; }

/* Resumo semanal da equipe: coluna do vendedor fixa, dias rolando na horizontal */
.semana-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.semana-nav button { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 16px; font-weight: 800; cursor: pointer; color: var(--text-primary); }
.semana-info { flex: 1; text-align: center; }
.semana-info span { display: block; font-size: 15px; font-weight: 800; }
.semana-info small { font-size: 12px; font-weight: 600; color: var(--primary-dark); }
.semana-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); -webkit-overflow-scrolling: touch; }
.semana-tab { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 12px; }
.semana-tab th, .semana-tab td { padding: 7px 9px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.semana-tab th { background: var(--surface-alt); font-size: 11px; font-weight: 800; color: var(--text-secondary); position: sticky; top: 0; }
.semana-tab th small { display: block; font-weight: 600; color: var(--text-muted); }
.semana-tab td b { font-weight: 800; font-size: 12px; }
.semana-tab td small { display: block; font-size: 10px; color: var(--text-muted); font-weight: 600; }
.semana-tab td.zero { color: var(--text-muted); }
/* coluna fixa */
.semana-tab .fixa { position: sticky; left: 0; z-index: 2; text-align: left; background: var(--surface); font-weight: 700; box-shadow: 1px 0 0 var(--border); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.semana-tab thead .fixa { z-index: 3; background: var(--surface-alt); }
.semana-tab .tot { background: rgba(16,24,40,0.03); font-weight: 800; }
.semana-tab .tot b { color: var(--primary-dark); }
.semana-tab .linha-total td { background: var(--primary-bg); border-top: 2px solid var(--primary); font-weight: 800; }
.semana-tab .linha-total .fixa { background: var(--primary-bg); }
.semana-tab .linha-total b { color: var(--primary-dark); }
.kpi-sub { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* Aba "Por dia": pedidos e valor de cada dia (pela data do pedido) */
.dia-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dia-data { font-size: 14px; font-weight: 800; text-transform: capitalize; min-width: 88px; }
.dia-ped { font-size: 13px; color: var(--text-secondary); }
.dia-ped b { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.dia-total { font-size: 15px; font-weight: 800; color: var(--primary-dark); text-align: right; }
/* Aba Diagnóstico para crescer */
.diag-sub { font-size: 14px; font-weight: 800; color: var(--text-primary); margin: var(--sp-4) 0 var(--sp-2); }
.diag-carteira { display: flex; align-items: center; gap: var(--sp-4); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-4); }
.diag-gauge-box { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.diag-gauge-box .gauge-box { width: 92px; height: 92px; }
.diag-gauge-box .gauge-box .gauge-label { font-size: 18px; }
.diag-gauge-nome { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; text-align: center; }
.diag-cart-nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); flex: 1; min-width: 0; }
.dc-num { display: flex; flex-direction: column; }
.dc-num span { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.dc-num b { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -.02em; }
.dc-num.ok b { color: var(--success); }
.dc-num.abrir b { color: var(--honey-dark); }
.diag-recado { background: var(--honey-bg); color: var(--honey-dark); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin: var(--sp-3) 0 0; line-height: 1.4; }
.diag-recado b { font-weight: 800; }
.diag-cmp { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.diag-cmp:last-of-type { border-bottom: none; }
.dcmp-rot { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; }
.dcmp-val { font-size: 12.5px; color: var(--text-secondary); text-align: right; }
.dcmp-val b { color: var(--text-primary); font-weight: 800; }
.dcmp-lider { color: var(--success); font-weight: 800; }
.diag-lider.ok { color: var(--success); font-weight: 700; font-size: 12.5px; margin: 6px 0 2px; }
.diag-passo { background: var(--primary-bg); color: var(--primary-dark); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; font-weight: 700; margin: 6px 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.diag-passo b { font-weight: 800; }
.dp-ganho { margin-left: auto; background: var(--success); color: #fff; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.diag-lider { font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }
.diag-recorde { font-size: 11.5px; color: var(--text-secondary); margin: 3px 0 2px; }
.diag-recorde b { color: var(--text-primary); font-weight: 800; }
.diag-super { font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-sm); margin: 3px 0 2px; }
.diag-super.ok { background: var(--success-bg); color: var(--success); }
.diag-super.baixa { background: var(--danger-bg); color: var(--danger); }
.diag-zerado { opacity: .92; }
.diag-abrir { font-size: 12.5px; color: var(--text-secondary); background: var(--surface-alt); border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 4px; line-height: 1.4; }
.diag-abrir b { color: var(--text-primary); font-weight: 800; }
.diag-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--primary-dark); background: var(--primary-bg); padding: 4px 10px; border-radius: 999px; }
.diag-tag.ok { color: var(--success); background: var(--success-bg); }
.diag-tag b { font-weight: 800; }
.diag-total { background: var(--primary); color: #fff; border-radius: var(--radius); padding: var(--sp-4); font-size: 13.5px; line-height: 1.45; margin-top: var(--sp-2); box-shadow: var(--shadow-md); }
.diag-total b { font-weight: 800; font-size: 15px; }
@media (max-width: 380px) { .diag-carteira { flex-direction: column; } }

/* Venda por fabricante (supervisor): 2 por linha, compacto */
.fab-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.fab-grid2 .fab-row { padding: 10px 12px; }
.fab-grid2 .fab-val { font-size: 16px; }
@media (max-width: 400px) { .fab-grid2 { grid-template-columns: 1fr; } }

/* Aba Outros Dados: fabricantes 2 por linha, compacto */
.fab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.fab-cel { border-left-width: 4px; padding: var(--sp-3); display: flex; flex-direction: column; gap: 3px; }
.fab-cel.topo { box-shadow: 0 0 0 2px var(--success-bg), var(--shadow-sm); }
.fab-cel-nome { font-size: 12.5px; font-weight: 800; color: var(--text-primary); line-height: 1.15; }
.fab-cel-val { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); }
.fab-cel-pos { font-size: 12px; color: var(--text-secondary); font-weight: 700; }
.fab-cel-pos small { font-weight: 600; color: var(--text-muted); }
.barra.ref.mini { height: 6px; margin: 2px 0; }
.fab-cel-tag { font-size: 10.5px; font-weight: 700; color: var(--text-muted); line-height: 1.3; }
.fab-cel-tag.ok { color: var(--success); }
.fab-cel-tag b { color: var(--text-secondary); }
@media (max-width: 380px) { .fab-grid { grid-template-columns: 1fr; } }

.incentivo-produtos-sup { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* Campanha Bola Mel (ranking) */
.bm-premios { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.bm-premio { background: var(--honey-bg); color: var(--honey-dark); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; }
.bm-premio b { font-weight: 800; }
.bm-premio.pedagio { background: var(--danger-bg); color: var(--danger); }
.bm-pos.fora { background: var(--surface-alt); color: var(--text-muted); }
.bm-linha.abaixo { opacity: .7; }
.bm-falta { flex: none; font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.bm-eu-card { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.bm-eu-card b { color: var(--text-primary); font-weight: 800; }
.mini-toggle { width: 26px; height: 26px; min-height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; }
.bm-linha { display: flex; align-items: center; gap: 10px; }
.bm-linha.eu { box-shadow: 0 0 0 2px var(--primary-bg); }
.bm-linha.premiado { background: linear-gradient(90deg, var(--honey-bg), var(--surface)); }
.bm-pos { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--surface-alt); color: var(--text-secondary); }
.bm-pos.r1 { background: #FDE68A; color: #92400E; }
.bm-pos.r2 { background: #E5E7EB; color: #374151; }
.bm-pos.r3 { background: #FED7AA; color: #9A3412; }
.bm-nome { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.bm-nome small { color: var(--primary-dark); font-weight: 700; }
.bm-fat { font-size: 13px; font-weight: 800; color: var(--primary-dark); white-space: nowrap; }
.bm-premio-tag { flex: none; font-size: 11px; font-weight: 700; color: var(--honey-dark); white-space: nowrap; }

/* Campanha Gigantes (grupos) */
.gig-medida { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
.gig-rot { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; }
.gig-val { font-size: 12.5px; color: var(--text-secondary); }
.gig-val b { color: var(--text-primary); font-weight: 800; }

/* Aba Devoluções */
.dev-card { display: flex; flex-direction: column; gap: 4px; }
.dev-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dev-cliente { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.dev-valor { font-size: 15px; font-weight: 800; color: var(--danger); white-space: nowrap; }
.dev-baixo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dev-info { font-size: 12px; color: var(--text-muted); text-transform: capitalize; }
.dev-motivo { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em; background: var(--surface-alt); color: var(--text-secondary); }
.dev-motivo.m-fechado { background: var(--danger-bg); color: var(--danger); }
.dev-motivo.m-falta { background: var(--honey-bg); color: var(--honey-dark); }
.dev-motivo.m-duplicado { background: var(--primary-bg); color: var(--primary-dark); }

/* Bloco de semana com subtotal */
.semana-bloco { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--sp-2) var(--sp-4) var(--sp-3); margin-bottom: var(--sp-3); }
.semana-bloco-atual { border: 2px solid var(--primary); }
.semana-bloco-atual .semana-rot { color: var(--primary-dark); }
.semana-bloco .dia-linha { padding: 8px 0; border-bottom: 1px solid var(--border); }
.semana-bloco .dia-linha:last-child { border-bottom: none; }
.dia-linha.vazia { background: var(--danger-bg); border-radius: var(--radius-sm); padding-left: 8px; padding-right: 8px; }
.dia-linha.vazia .dia-data { color: var(--danger); font-weight: 800; }
.dia-sem { font-size: 12px; font-weight: 800; color: var(--danger); }
.semana-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; margin-bottom: 2px; border-bottom: 2px solid var(--primary-bg); }
.semana-rot { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--primary-dark); }
.semana-tot { font-size: 13px; color: var(--text-secondary); }
.semana-tot b { color: var(--text-primary); font-weight: 800; }

/* Login "manter conectado" + info de acesso no cabecalho */
.login-manter { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.login-manter input { width: 16px; height: 16px; }
.acesso-info { font-size: 12px; color: var(--text-secondary); margin: 4px 0 0; font-weight: 600; }
.acesso-info.hidden { display: none; }
.acesso-info .ac-hoje { color: var(--success); font-weight: 800; }

/* Aba Financeiro (titulos atrasados) */
.fin-valor { font-size: 15px; font-weight: 800; color: var(--danger); white-space: nowrap; }
.fin-titulo { padding: 10px 0; border-top: 1px dashed var(--border); }
.fin-titulo:first-child { border-top: none; }
.ft-topo, .ft-baixo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ft-topo { font-size: 13px; }
.ft-baixo { font-size: 13px; margin-top: 4px; color: var(--text-secondary); }
.ft-baixo b { color: var(--text-primary); }
.ft-atraso { color: var(--danger); font-weight: 700; }
.ft-nn { font-size: 11px; color: var(--text-muted); }
.fin-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--surface-alt); color: var(--text-secondary); white-space: nowrap; }
.fin-tag.boleto { background: var(--primary-bg); color: var(--primary-dark); }
.fin-cidade-cab { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 6px; padding: 6px 10px; background: var(--surface-alt); border-radius: 8px; font-size: 13px; font-weight: 800; text-transform: capitalize; }
.fin-cidade-cab b { color: var(--danger); }

/* Aba Categorias (recategorizacao de clientes) */
.recat-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.recat-progresso { flex: 1; min-width: 180px; }
.rp-linha { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.rp-linha strong { color: var(--primary-dark); }
.recat-progresso .barra { background: rgba(16,24,40,0.08); }
.recat-progresso .barra > span { background: var(--success); }
#recatRelatorioBtn { padding: 9px 14px; border: 1.5px solid var(--primary); background: var(--primary-bg); color: var(--primary-dark); font-weight: 700; border-radius: 8px; cursor: pointer; font-size: 13px; }
#recatRelatorioBtn.hidden { display: none; }
.recat-busca { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; margin-bottom: 12px; background: var(--surface); }
.recat-aviso { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; text-align: center; }
.ajuda { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin: 0 0 12px; }

/* Grupo sem meta ainda (skeleton) */
.meta-pendente { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 12.5px; color: var(--text-secondary); }
.meta-pendente b { color: var(--text); }

/* Card de ranking por fabricante (modelo) */
.fab-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-2); }
.fab-row:first-child { background: linear-gradient(180deg, var(--honey-bg), var(--surface)); border-color: transparent; box-shadow: var(--shadow-md); }
.fab-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.fab-nome { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; min-width: 0; }
.fab-rank { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--surface-alt); color: var(--text-secondary); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.fab-rank.r1 { background: var(--honey); color: #3a2a00; }
.fab-rank.r2 { background: #d7d1c4; color: #3a352b; }
.fab-rank.r3 { background: #ecd9b7; color: #6b4e15; }
.fab-val { font-size: 21px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.fab-bar { height: 12px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(27,26,23,.07); }
.fab-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--honey), var(--honey-dark)); transition: width 550ms cubic-bezier(.22,.61,.36,1); }
.fab-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }
.fab-pos { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-secondary); }
.fab-pos svg { color: var(--primary); }
.fab-pos b { color: var(--text-primary); font-weight: 700; }
.fab-chip { background: var(--primary-bg); color: var(--primary-dark); font-weight: 800; font-size: 13.5px; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.fab-chip small { font-weight: 600; font-size: 10.5px; opacity: .85; }
.fab-chip.alt { background: var(--honey-bg); color: var(--honey-dark); }
.fab-row.linha-clicavel { cursor: pointer; transition: box-shadow 150ms ease, transform 100ms ease, border-color 150ms ease; }
.fab-row.linha-clicavel:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-1px); }
.fab-row.linha-clicavel:active { transform: scale(.995); }
.fab-go { flex: none; color: var(--text-muted); margin-left: auto; }
.fab-row.linha-clicavel:hover .fab-go { color: var(--primary); }
.fab-nome { flex: 1; overflow: hidden; }
.fab-nome > :not(.fab-rank):not(.fab-go) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Barra compacta do topo da aba Metas */
.metabar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-4); box-shadow: var(--shadow-sm); }
.mb-item { background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.mb-item span { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.mb-item strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.mb-fat strong { color: var(--honey-dark); }
.mb-pos strong { color: var(--primary-dark); }
@media (max-width: 480px) { .metabar { grid-template-columns: repeat(2, 1fr); } }

/* Faixa da marca Dori (logo centralizada — marca principal) */
.dori-marca { display: flex; align-items: center; justify-content: center; padding: 6px 0 12px; }
.dori-logo { display: block; max-height: 46px; max-width: 70%; width: auto; object-fit: contain; }
.dori-wordmark { display: none; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--primary-dark); }

/* Meta Dori com gauges dentro do card */
.dori-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.dori-gauge { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface-alt); border-radius: var(--radius-sm); padding: 10px 12px; }
.dori-gauge .gauge-box { flex: none; width: 78px; height: 78px; }
.dori-gauge .gauge-box .gauge-label { font-size: 16px; }
.dg-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dg-nome { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; }
.dg-val { font-size: 12px; color: var(--text-secondary); }
.dg-val b { font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: -.02em; }
.dg-info .premio-tag { align-self: flex-start; margin-top: 2px; }
@media (max-width: 440px) { .dori-gauges { grid-template-columns: 1fr; } }

/* Logo da indústria no card de meta */
.meta-card .cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meta-logo { height: 26px; max-width: 90px; object-fit: contain; flex: none; }

/* Ajuda de custo (topo do painel de metas) */
.ajuda-custo { border-radius: 12px; padding: 13px 16px; margin: 10px 0 4px; border: 1px solid var(--border); }
.ajuda-custo.hidden { display: none; }
.ajuda-custo.ganho { background: var(--success-bg); border-color: transparent; }
.ajuda-custo.meio { background: var(--warning-bg); border-color: transparent; }
.ajuda-custo.pend { background: var(--surface); }
.ac-topo { margin-bottom: 4px; }
.ac-titulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.ac-corpo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-status { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 60%; }
.ac-valor { font-size: 22px; font-weight: 800; color: var(--text); white-space: nowrap; }
.ac-valor small { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-align: right; }
.ajuda-custo.ganho .ac-valor { color: var(--success); }

/* Navegacao entre vendedores (supervisor) */
.vend-nav { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.vend-nav.hidden { display: none; }
.vend-nav button { border: 0; background: transparent; color: var(--primary-dark); font-size: 18px; font-weight: 800; line-height: 1; width: 30px; height: 30px; border-radius: 7px; cursor: pointer; }
.vend-nav button:hover:not(:disabled) { background: var(--primary-bg); }
.vend-nav button:disabled { color: var(--border); cursor: default; }
#vendEquipeBtn { font-size: 15px; }
#vendedorNav { border: 0; background: transparent; font-weight: 700; font-size: 13px; color: var(--text); max-width: 150px; padding: 4px 2px; cursor: pointer; }

/* Campanha Arcor (supervisor) */
.camp-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
#campExportBtn { flex: none; padding: 9px 15px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
#campExportBtn:hover { filter: brightness(1.08); }
.camp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.camp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.cc-nome { font-size: 12.5px; font-weight: 800; }
.cc-sub { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; }
.cc-num { font-size: 12.5px; color: var(--text-muted); }
.cc-num b { font-size: 21px; color: var(--text); }
.camp-bar { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin: 6px 0 5px; }
.camp-bar span { display: block; height: 100%; border-radius: 4px; }
.camp-bar span.ok { background: var(--success); } .camp-bar span.mid { background: #f0a500; } .camp-bar span.low { background: var(--danger); }
.cc-pct { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.camp-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.camp-tab th { background: var(--surface); border: 1px solid var(--border); padding: 7px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); text-align: center; }
.camp-tab th.g { font-size: 12px; color: var(--text); font-weight: 800; }
.camp-tab td { border: 1px solid var(--border); padding: 7px 8px; }
.camp-tab td.cv { font-weight: 700; } .camp-tab td.cv small { display: block; font-weight: 500; color: var(--text-muted); font-size: 10px; }
.camp-tab td.cc { text-align: center; } .camp-tab td.cc b { font-size: 13.5px; } .camp-tab td.cc small { display: block; color: var(--text-muted); font-size: 10px; }
.camp-tab td.cc.hit { background: var(--success-bg); } .camp-tab td.cc.hit b { color: var(--success); }
.camp-tab td.dim { color: var(--border); }
.camp-tab tr.tot td { background: #1a2233; color: #fff; border-color: #1a2233; }
.camp-tab tr.tot td small { color: #c3ccdb; }
@media (max-width: 640px) { .camp-cards { grid-template-columns: repeat(2, 1fr); } .camp-topo { flex-direction: column; } }

/* Diagnóstico (aba Detalhes) */
.det-resumo { background: var(--primary-bg); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; font-size: 13.5px; line-height: 1.55; color: var(--text); margin-bottom: 8px; }
.det-h { font-size: 14px; margin: 18px 0 8px; }
.det-pilar { margin-bottom: 10px; }
.dp-nome { font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.dp-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.dp-bar span { display: block; height: 100%; border-radius: 4px; }
.dp-bar span.ok { background: var(--success); } .dp-bar span.mid { background: #f0a500; } .dp-bar span.low { background: var(--danger); }
.dp-num { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.det-chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.det-chip.ok { background: var(--success-bg); color: var(--success); }
.det-chip.ritmo { background: var(--primary-bg); color: var(--primary-dark); }
.det-chip.atr { background: var(--danger-bg, #fdecea); color: var(--danger); }
.det-prio { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.dpr-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.dpr-txt { font-size: 13px; font-weight: 700; } .dpr-txt small { display: block; font-weight: 500; color: var(--text-muted); font-size: 11.5px; }
.det-vends { display: flex; flex-direction: column; gap: 6px; }
.det-vend { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; }
.det-vend span { color: var(--text-muted); text-align: right; }
.det-vend.ok { background: var(--success-bg); border-color: transparent; }
.det-vend.crit { border-color: var(--danger); }
.recat-card { padding: 0 !important; overflow: hidden; }
.recat-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; }
.recat-nome b { display: block; font-size: 14px; }
.recat-nome small { color: var(--text-muted); font-size: 12px; }
.recat-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.recat-badge.ok { background: var(--success-bg); color: var(--success); }
.recat-badge.pend { background: var(--warning-bg); color: var(--warning); }
.recat-card.ok { border-left: 4px solid var(--success); }
.recat-edit { padding: 0 14px 14px; border-top: 1px dashed var(--border); }
.recat-edit.hidden { display: none; }
.recat-info { font-size: 12px; color: var(--text-secondary); margin: 10px 0; }
.recat-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.recat-sel { width: 100%; margin-top: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--surface); }
.recat-acoes { display: flex; gap: 8px; margin-top: 10px; }
.recat-acoes button { flex: 1; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid var(--border); }
.btn-ok { background: var(--success); color: #fff; border-color: var(--success); }
.btn-pend { background: var(--surface); color: var(--text-secondary); }
/* "Continua ativo": decisao de manter o cliente (aba Inativar) */
.recat-badge.manter { background: var(--primary-bg); color: var(--primary-dark); }
.btn-manter { background: var(--primary-bg); color: var(--primary-dark); border-color: var(--primary); }
/* 3 botoes na aba Inativar: em telas estreitas o "Limpar" vai pra linha de baixo */
#inativarLista .recat-acoes { flex-wrap: wrap; }
#inativarLista .recat-acoes .btn-pend { flex: 0 0 100%; }
/* Seletor das duas listas da aba Inativar (3-6 meses / +6 meses). */
.faixas { display: flex; gap: 8px; margin-bottom: 12px; }
.faixas .faixa-btn { flex: 1; padding: 9px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text-secondary); cursor: pointer; line-height: 1.25; }
.faixas .faixa-btn small { display: block; font-size: 11px; font-weight: 600; opacity: 0.75; margin-top: 2px; }
.faixas .faixa-btn.active { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-dark); }
.recat-obs { width: 100%; margin-top: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--surface); }
.recat-obs.hidden { display: none; }
.recat-motivo { font-size: 12px; color: var(--text-secondary); margin: 2px 0 0; }

/* Catalogo de fotos das caixas (aba Panettone) */
.pn-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
.pn-catalogo img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }

/* Painel "lojas executadas por segmentação" (Mix Ideal) */
.mi-segmentos { display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.mi-seg-rot { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.mi-seg-val { font-size: 12px; color: var(--text-secondary); float: right; }
/* Cliente 100% executado: card recolhido, so o essencial visivel */
.mi-executado { opacity: .85; }

/* Campanha extra Dori (R$10 por positivacao): cada acao numa lista suspensa e
   o cliente JA EXECUTADO em azul - azul porque verde ja e "bateu a meta" e
   amarelo/mel ja e destaque de premio nas outras telas. */
.dp-feito-txt { color: #1D6FD1; }
.dp-acao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); box-shadow: var(--shadow-sm); }
.dp-acao > summary { cursor: pointer; list-style: none; }
.dp-acao > summary::-webkit-details-marker { display: none; }
.dp-acao-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.dp-acao-cab b { font-size: 14px; font-weight: 700; display: block; }
.dp-acao-cab small { font-size: 11.5px; color: var(--text-secondary); display: block; margin-top: 2px; }
.dp-acao-num { text-align: right; white-space: nowrap; }
.dp-acao-num b { font-size: 15px; font-weight: 800; display: block; }
.dp-acao-num small { font-size: 11.5px; color: var(--text-secondary); display: block; }
.dp-acao[open] > summary { margin-bottom: var(--sp-3); }
.dp-acao .lista { max-height: 60vh; overflow-y: auto; }
.dp-cli { border: 1px solid var(--border); }
.dp-cli.feito { background: #E8F1FD; border-color: #B9D5F6; border-left-color: #1D6FD1; }
.dp-cli.feito .recat-nome b { color: #1D6FD1; }
.dp-cli small { display: block; font-weight: 500; color: var(--text-secondary); }
.dp-cidade { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
/* Os 3 numeros do topo cabem numa linha so, inclusive no celular - empilhados
   empurravam a lista de clientes pra fora da primeira tela. */
#dpTopo .kpis3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
#dpTopo .kpi { padding: var(--sp-3); }
#dpTopo .kpi span { font-size: 10px; }
#dpTopo .kpi strong { font-size: 17px; }
.dp-aviso { background: var(--honey-bg); color: var(--honey-dark); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); }
/* Campanha Dori: clientes agrupados por cidade, uma "gaveta" por cidade. */
.dp-cidade-grupo { margin-bottom: var(--sp-3); }
.dp-cidade-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-1) var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-2); }
.dp-cidade-cab span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.dp-cidade-cab small { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }