/* ============================================================
   COCKPIT DO FARMER v2 · Light Commercial
   Paleta: Branco · Slate · Índigo · Verde · Âmbar
   Referências: Salesforce Lightning, Linear, HubSpot
   ============================================================ */
:root {
  /* Backgrounds */
  --bg:         #F5F0FF;
  --bg-panel:   #38105C;
  --bg-elev:    #EDE8FF;
  --bg-card:    #3B1163;

  /* Borders */
  --border:        rgba(109,40,217,0.12);
  --border-bright: rgba(109,40,217,0.28);
  --border-focus:  #5B21B6;

  /* Text */
  --text:       #0F172A;
  --text-dim:   #334155;
  --text-faded: #64748B;
  --text-mute:  #94A3B8;

  /* Brand — Deep Purple */
  --blue:          #8E4DD1;
  --blue-bright:   #8E4DD1;
  --blue-glow:     rgba(109,40,217,0.16);
  --indigo:        #5B21B6;
  --purple:        #8E4DD1;
  --purple-bright: #A78BFA;
  --purple-glow:   rgba(124,58,237,0.18);

  /* Accents */
  --cyan:       #0284C7;
  --cyan-bright:#579BFC;
  --teal:       #0D9488;
  --emerald:    #007A52;
  --silver:     #475569;

  /* Status */
  --hot:        #B02138;
  --hot-glow:   rgba(214,48,75,0.14);
  --warm:       #9C6306;
  --warm-glow:  rgba(253,171,61,0.14);
  --cool:       #006BD6;
  --cold:       #94A3B8;
  --success:    #007A52;
  --danger:     #B02138;

  /* Aliases */
  --surface:    #EDE8FF;
  --muted:      #64748B;
  --text-muted: #64748B;
  --bg-hover:   rgba(197,155,224,0.06);

  /* Gradientes — Deep Purple */
  --grad-primary: linear-gradient(135deg, #4C1D95 0%, #8E4DD1 100%);
  --grad-hot:     linear-gradient(135deg, #D6304B 0%, #F97316 100%);
  --grad-green:   linear-gradient(135deg, #00C875 0%, #579BFC 100%);
  --grad-warm:    linear-gradient(135deg, #FDAB3D 0%, #D6304B 100%);

  /* Sombras com deep purple */
  --shadow-sm:  0 1px 6px rgba(109,40,217,0.10), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:  0 4px 20px rgba(109,40,217,0.18), 0 2px 8px rgba(15,23,42,0.06);
  --shadow-lg:  0 12px 48px rgba(109,40,217,0.22), 0 4px 12px rgba(15,23,42,0.08);
  --shadow-blue:0 4px 28px rgba(109,40,217,0.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter Tight', -apple-system, system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

.app { position: relative; }

/* ============ HEADER ============ */
header {
  border-bottom: 1px solid var(--border);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(0,0,0,.04);
  position: sticky; top: 0; z-index: 100;
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand-logo {
  width: 36px; height: 36px;
  background: var(--grad-primary);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  color: white;
  box-shadow: var(--shadow-blue);
}
.brand-mark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand-mark em {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  font-weight: 700;
}
.brand-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faded);
  border-left: 1px solid var(--border-bright);
  padding-left: 14px;
  display: flex; align-items: center; gap: 6px;
}
.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px var(--success);
}
.header-right { display: flex; align-items: center; gap: 10px; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* ============ BOTÕES ============ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 20px;
  background: var(--vivo-roxo);
  color: #fff;
  border: none;
  border-radius: var(--r-botao);
  font-family: var(--vivo-fonte);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .18s, transform .18s cubic-bezier(.22,.9,.3,1), box-shadow .18s;
}
.btn-primary:hover { background: var(--vivo-roxo-medio); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(102,0,153,.28); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-refresh {
  width: 38px; height: 38px; border-radius: 50%;
  background: none; border: 1.5px solid var(--border-bright);
  color: var(--text-dim); font-size: 1.1rem; line-height: 1;
  cursor: pointer; transition: all .15s; display: flex;
  align-items: center; justify-content: center;
}
.btn-refresh:hover { color: var(--vivo-roxo); border-color: var(--vivo-roxo); background: var(--vivo-lilas-fundo); }
.btn-refresh.spinning { animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 20px;
  background: transparent;
  color: var(--vivo-roxo);
  border: 1.5px solid var(--vivo-roxo);
  border-radius: var(--r-botao);
  font-family: var(--vivo-fonte);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: background .18s, transform .18s cubic-bezier(.22,.9,.3,1);
}
.btn-secondary:hover { background: var(--vivo-lilas-fundo); color: var(--vivo-roxo); border-color: var(--vivo-roxo); transform: translateY(-1px); }
.btn-sm {
  padding: 4px 10px;
  background: var(--bg-panel);
  color: var(--text-dim);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-sm:hover { color: var(--emerald); border-color: var(--emerald); }

.btn-ghost {
  padding: 8px 14px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover { background: var(--bg-elev); color: var(--text); }

.btn-ai {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 20px;
  background: var(--vivo-lilas-fundo);
  color: var(--vivo-roxo);
  border: 1.5px solid rgba(102,0,153,0.28);
  border-radius: var(--r-botao);
  font-family: var(--vivo-fonte);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 8px;
}
.btn-ai:hover {
  background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(109,40,217,0.1));
  border-color: var(--purple);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124,58,237,0.15);
}
.btn-ai-sm { padding: 6px 12px; font-size: 10px; }

.ai-spark {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple);
  animation: pulse 1.8s ease-in-out infinite;
}

.btn-refresh {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
  width: 30px; height: 30px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.btn-refresh:hover { color: var(--blue); border-color: var(--blue); transform: rotate(180deg); background: var(--bg-panel); }

/* ============ HERO ============ */
.hero {
  padding: 32px 32px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.hero-greeting {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 6px;
  color: var(--text);
}
.hero-greeting em {
  font-style: normal;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub { color: var(--text-dim); font-size: 14px; }

/* AI Briefing — destaque em roxo suave */
.ai-briefing {
  background: linear-gradient(135deg, rgba(124,58,237,0.05) 0%, rgba(197,155,224,0.06) 100%);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 20px 0 24px;
  position: relative;
  overflow: hidden;
}
.ai-briefing::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--grad-primary);
}
.ai-briefing-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.ai-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.ai-briefing-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-dim);
}
.ai-briefing-text strong { color: var(--text); }
.ai-briefing-text.loading { color: var(--text-faded); font-style: italic; }

/* ============ KPIs ============ */
.hero-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.kpi {
  background: linear-gradient(160deg, rgba(197,155,224,0.06) 0%, var(--bg-card) 55%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
  position: relative;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad-primary);
  opacity: 0.5;
}
.kpi::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--grad-primary);
}
.kpi:hover {
  border-color: rgba(124,58,237,0.35);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.kpi-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faded);
  margin-bottom: 10px;
}
.kpi-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kpi-delta {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-faded);
}
.kpi.alert::after { background: var(--grad-hot); }
.kpi.alert .kpi-value { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============ TABS ============ */
.tabs {
  display: flex;
  padding: 0 32px;
  border-bottom: 2px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow-x: auto;
  scrollbar-width: thin;
  box-shadow: var(--shadow-sm);
}
.tab {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  position: relative;
}
.tab .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  background: var(--bg-elev);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.tab:hover { color: var(--blue); background: rgba(91,33,182,0.04); }
.tab:hover .num { color: var(--blue); border-color: var(--blue-bright); background: var(--blue-glow); }
.tab.active {
  color: var(--purple);
  border-bottom-color: var(--purple);
  font-weight: 700;
  background: rgba(197,155,224,0.06);
}
.tab.active .num {
  background: var(--purple-glow);
  border-color: var(--purple);
  color: var(--purple);
  font-weight: 700;
}
.tab .badge {
  background: var(--grad-hot);
  color: white;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

/* ============ MAIN ============ */
main { padding: 28px 32px; max-width: 100%; }
.panel { display: none; }
.panel.active { display: block; animation: fadeIn 0.35s cubic-bezier(.4,0,.2,1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.panel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.panel-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.panel-title em {
  font-style: normal;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.panel-sub { color: var(--text-dim); font-size: 13px; margin-top: 6px; max-width: 700px; line-height: 1.5; }
.panel-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faded); text-transform: uppercase; letter-spacing: 0.1em; }

/* ============ EMPTY STATE ============ */
.empty-state {
  text-align: center;
  padding: 70px 40px;
  border: 2px dashed var(--border-bright);
  border-radius: 12px;
  background: var(--bg-panel);
}
.empty-state .icon {
  font-size: 48px;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 300;
  margin-bottom: 16px;
  display: block;
}
.empty-state h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 20px; margin-bottom: 8px; color: var(--text); }
.empty-state p { color: var(--text-dim); max-width: 440px; margin: 0 auto 20px; line-height: 1.6; font-size: 14px; }
.empty-line { color: var(--text-faded); font-size: 13px; padding: 16px; text-align: center; }

/* ============ SCORE BADGE ============ */
.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.score-badge.hot   { background: rgba(214,48,75,0.08);  color: var(--hot);     border: 1px solid rgba(214,48,75,0.25); }
.score-badge.quente{ background: rgba(253,171,61,0.08);  color: var(--warm);    border: 1px solid rgba(253,171,61,0.25); }
.score-badge.neutro{ background: rgba(8,145,178,0.08);  color: var(--cyan);    border: 1px solid rgba(8,145,178,0.25); }
.score-badge.frio  { background: var(--bg-elev);        color: var(--text-dim);border: 1px solid var(--border-bright); }

.score-ring {
  width: 48px; height: 48px;
  position: relative;
  flex-shrink: 0;
}
.score-ring svg { transform: rotate(-90deg); }
.score-ring circle.bg { fill: none; stroke: var(--bg-elev); stroke-width: 4; }
.score-ring circle.fg { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.score-ring.hot    circle.fg { stroke: var(--hot); }
.score-ring.quente circle.fg { stroke: var(--warm); }
.score-ring.neutro circle.fg { stroke: var(--cyan); }
.score-ring.frio   circle.fg { stroke: var(--text-faded); }
.score-ring .num {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  color: var(--text);
}

/* ============ TABLE ============ */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bg-elev);
}

.cart-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.cart-filter-bar .form-input {
  padding: 5px 10px;
  font-size: 12px;
  height: 32px;
}
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort:hover { color: var(--blue); }
.sort-icon { opacity: 0.45; font-size: 11px; }
.table-header h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px; color: var(--text); }
.search-input {
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  color: var(--text);
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12px;
  width: 200px;
  font-family: inherit;
  transition: all 0.2s;
}
.search-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }
.search-input::placeholder { color: var(--text-faded); }

.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  padding: 5px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  font-size: 10px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.2s;
}
.pill:hover, .pill.active {
  color: var(--blue);
  border-color: rgba(109,40,217,0.4);
  background: rgba(197,155,224,0.06);
}

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  padding: 11px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faded);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.th-sort {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.th-sort:hover { color: var(--blue); }
.th-sort-active { color: var(--blue); }
.sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.6;
}
.th-sort-active .sort-arrow { opacity: 1; }
td { padding: 13px 20px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(197,155,224,0.06); cursor: pointer; }
.client-name { font-weight: 600; color: var(--text); }
.client-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faded); margin-top: 3px; }

.product-tag {
  display: inline-block;
  padding: 3px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  margin-right: 4px; margin-bottom: 4px;
}
.product-tag.hot  { color: var(--hot);   border-color: rgba(214,48,75,0.3);  background: rgba(214,48,75,0.05); }
.product-tag.warn { color: #9C6306;      border-color: rgba(253,171,61,0.3); background: rgba(253,171,61,0.05); }
.product-tag.cool { color: var(--cyan);  border-color: rgba(8,145,178,0.3);  background: rgba(8,145,178,0.05); }
.product-tag.blue { color: var(--blue);  border-color: rgba(109,40,217,0.3);  background: rgba(197,155,224,0.06); }

/* A célula Qtd quando o SFA não mandou número (Voz e Dados chegam sem).
   É ausência, não zero — e `#555` se lê contra o branco da tabela e contra a
   lavagem da zebra, que é onde o cinza fraco do tema costuma desaparecer. */
.bld-sem-num { color: #555; font-family: 'JetBrains Mono', monospace; }

.days-left { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.days-left.critical { color: var(--hot); }
.days-left.warning  { color: var(--warm); }
.days-left.safe     { color: var(--success); }
.mrr { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--emerald); }

.action-btn {
  padding: 5px 11px;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
  border-radius: 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
}
.action-btn:hover { color: var(--blue); border-color: rgba(109,40,217,0.4); background: rgba(197,155,224,0.06); }
.action-btn.danger:hover { color: var(--hot); border-color: rgba(214,48,75,0.3); }

/* ============ KANBAN ============ */
.kanban { display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); gap: 10px; overflow-x: auto; }
.kanban-col { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; min-height: 380px; box-shadow: var(--shadow-sm); }
.col-header { padding: 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--bg-elev); border-radius: 10px 10px 0 0; }
.col-name { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); font-weight: 600; }
.col-count { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: var(--blue); }
.col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 100px; }
.deal-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid var(--blue);
  box-shadow: var(--shadow-sm);
}
.deal-card:hover { border-color: var(--blue-bright); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.deal-card.stuck { border-left-color: var(--hot); }
.deal-card.fast  { border-left-color: var(--success); }
.deal-client { font-size: 12px; font-weight: 600; margin-bottom: 5px; line-height: 1.3; color: var(--text); }
.deal-value { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--emerald); margin-bottom: 8px; }
.deal-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--text-faded); font-family: 'JetBrains Mono', monospace; }
.deal-days.alert { color: var(--hot); }

/* ============ FUNIL KPIs / FILTROS / ALERTAS ============ */
.funil-kpi-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.funil-kpi { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.funil-kpi::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--grad-primary); }
.funil-kpi.forecast { border-color: rgba(0,200,117,0.35); background: rgba(0,200,117,0.04); }
.funil-kpi.forecast::after { background: var(--grad-green); }
.funil-kpi-val { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.funil-kpi.forecast .funil-kpi-val { background: var(--grad-green); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.funil-kpi-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-faded); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.funil-alert { background: rgba(253,171,61,0.06); border: 1px solid rgba(253,171,61,0.25); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.funil-alert-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px; color: var(--warm); margin-bottom: 8px; }
.funil-alert-item { display: flex; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; transition: background 0.15s; }
.funil-alert-item:hover { background: rgba(253,171,61,0.08); }
.funil-alert-item > span:first-child { flex: 1; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funil-alert-torre { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-faded); white-space: nowrap; }
.funil-alert-val { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--emerald); font-weight: 600; white-space: nowrap; }
.funil-alert-data { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--warm); white-space: nowrap; }
.funil-modelos { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.funil-modelos .pill { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-panel); font-size: 12px; font-weight: 500; color: var(--text-dim); cursor: pointer; transition: all 0.18s; }
.funil-modelos .pill.active, .funil-modelos .pill:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ============ KANBAN FUNIL ============ */
.kanban-funil { display: grid; grid-template-columns: repeat(6, minmax(210px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.k-col { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; min-height: 420px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.k-col-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; border-radius: 12px 12px 0 0; background: linear-gradient(135deg, rgba(197,155,224,0.10) 0%, var(--bg-elev) 100%); }
.k-col-nome { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); font-weight: 700; }
.k-col-count { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #fff; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; background: var(--grad-primary); }
.k-col-total { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-faded); }
.k-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 60px; transition: background .15s, border-color .15s; border-radius: 8px; border: 2px solid transparent; }
.k-cards.dragover { background: rgba(109,40,217,.07); border-color: #8E4DD1; }
.k-empty { color: var(--text-faded); font-size: 12px; text-align: center; padding: 24px 0; font-family: 'JetBrains Mono', monospace; }
.k-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: var(--shadow-sm);
}
.k-card { cursor: grab; }
.k-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--blue); }
.k-card.dragging { opacity: 0.35; cursor: grabbing; }
.k-card.atrasado { border-left-color: var(--hot); }
.k-card-nome { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: 4px; }
.k-card-cliente { font-size: 11px; color: var(--text-faded); margin-bottom: 8px; }
.k-card-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.k-card-valor { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--emerald); }
.k-card-mrr { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-faded); }
.k-card-followup { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--blue); margin-top: 4px; }
.k-card-followup.late { color: var(--hot); }
.k-card-followup.urgente { color: var(--warm); font-weight: 600; }
.k-card-parado { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--hot); margin-top: 4px; }
.k-card-notas { font-size: 11px; color: var(--text-faded); margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; line-height: 1.4; }
.k-card.urgente { border-left-color: var(--warm); }
.k-card-head { display: flex; gap: 5px; margin-bottom: 6px; align-items: center; flex-wrap: wrap; }
.k-card-numopt { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--muted); font-weight: 500; }
.k-card-pe-sla { font-family: 'JetBrains Mono', monospace; font-size: .68rem; margin-top: 5px; padding: 3px 7px; border-radius: 5px; }
.k-card-pe-sla.pe-sla-ok   { background: #D1FAE5; color: #065F46; }
.k-card-pe-sla.pe-sla-warn { background: #FEF3C7; color: #92400E; }
.k-card-pe-sla.pe-sla-late { background: #FEE2E2; color: #B02138; }
.k-card-simulacao { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--cyan); margin-top: 3px; }
.k-card-torre-rv  { font-size: .68rem; color: #8E4DD1; font-family: 'JetBrains Mono', monospace; margin-top: 3px; }
.k-card-btn-entrega { width:100%; margin-top:8px; padding:5px 0; background:#FDAB3D15; border:1px solid #FDAB3D40; color:#9C6306; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; }
.k-card-btn-entrega:hover { background:#FDAB3D25; }
.k-card-entrega-ok { margin-top:6px; font-size:11px; color:#007A52; font-weight:600; }
.k-card-impl-badge { margin-top:6px; font-size:11px; color:#8E4DD1; font-weight:600; }
.k-card-btn-impl { width:100%; margin-top:5px; padding:5px 0; background:#8E4DD115; border:1px solid #8E4DD140; color:#8E4DD1; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; }
.k-card-btn-impl:hover { background:#8E4DD125; }
.k-card-impl-ok { margin-top:6px; font-size:11px; color:#007A52; font-weight:600; }
.k-badge { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.05em; }
/* Selo da oportunidade que veio da planilha do GV. Cinza de propósito: ele
   informa a origem, não compete com o selo de modelo (Forecast/Upside), que é
   o que o olho procura primeiro no cartão. */
.k-badge-planilha { background: rgba(100,116,139,.12); color: var(--text-muted); border: 1px solid var(--border); }
.k-card-torre-rv-sem { color: var(--text-faded); font-style: italic; opacity: .85; }
.k-badge-prob { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-faded); margin-left: auto; }
.k-card-torre { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--blue); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-card-esperado { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-faded); }
.k-card-fech { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-faded); margin-top: 5px; }
.k-card-fech.urgente { color: var(--warm); font-weight: 600; }
.k-card-fech.late { color: var(--hot); }
.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(214,48,75,0.08); color: var(--hot);
  border: 1px solid rgba(214,48,75,0.2); border-radius: 8px;
  padding: 9px 16px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
}
.btn-danger:hover { background: rgba(214,48,75,0.15); border-color: var(--hot); }

/* ============ HOJE — ACTION CARDS ============ */
.hoje-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hoje-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.hoje-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--grad-primary);
}
.hoje-card.hot::before { background: var(--grad-hot); }
.hoje-card:hover {
  transform: translateX(4px);
  border-color: rgba(109,40,217,0.3);
  box-shadow: var(--shadow-md);
}
.hoje-pos {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
.hoje-info { display: flex; flex-direction: column; gap: 5px; }
.hoje-nome { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: var(--text); }
.hoje-motivo { color: var(--text-dim); font-size: 13px; line-height: 1.4; }
.hoje-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.hoje-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
}
.hoje-tag.risco { color: var(--hot);     border-color: rgba(214,48,75,0.3);  background: rgba(214,48,75,0.05); }
.hoje-tag.oport { color: var(--success); border-color: rgba(0,200,117,0.3);  background: rgba(0,200,117,0.05); }
.hoje-tag.blind { color: var(--purple);  border-color: rgba(124,58,237,0.3); background: rgba(124,58,237,0.05); }
.hoje-tag.big   { color: var(--blue);    border-color: rgba(109,40,217,0.3);  background: rgba(197,155,224,0.06); }

/* ============ VENDER PRODUTO ============ */
.vender-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.vender-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.vender-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--grad-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
.vender-card:hover::after, .vender-card.active::after { transform: scaleX(1); }
.vender-card:hover, .vender-card.active {
  border-color: rgba(109,40,217,0.3);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.vender-card.active { background: rgba(197,155,224,0.06); }
.vender-icon {
  font-size: 26px;
  margin-bottom: 12px;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}
.vender-nome { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 6px; color: var(--text); }
.vender-desc { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin-bottom: 6px; }

.vender-badge-rotas {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  background: rgba(197,155,224,0.06);
  color: var(--blue);
  border-radius: 20px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}

.vender-rota-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.vender-rota-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--blue-bright);
  background: rgba(109,40,217,0.12);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.vender-rota-label {
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vender-rota-next {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.vender-card:hover .vender-rota-next { opacity: 1; color: var(--blue); }

.vender-rota-dots {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.vender-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-bright);
  transition: background 0.2s, transform 0.2s;
}
.vender-dot.active {
  background: var(--blue-bright);
  transform: scale(1.3);
}

/* ============ SUB-TABS (Blindagem por Torre) ============ */
.subtabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 5px;
  width: fit-content;
  max-width: 100%;
}
.subtab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  user-select: none;
}
.subtab:hover { background: var(--bg-panel); color: var(--text); }
.subtab.active {
  background: var(--bg-panel);
  color: var(--blue);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.subtab-count {
  background: rgba(109,40,217,0.1);
  color: var(--blue);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
.subtab-count.zero {
  background: var(--bg-elev);
  color: var(--text-faded);
}
.subtab.active .subtab-count {
  background: rgba(109,40,217,0.15);
  color: var(--blue);
}

/* ============ BLINDAGEM ============ */
/* Quatro cartões desde 08/10/2026 (o "n de N" do flag de blindado). */
.blindagem-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.blindagem-stat {
  background: var(--bg-panel);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--purple);
}
.blindagem-stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--purple); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; font-weight: 600; }
.blindagem-stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; line-height: 1; color: var(--text); }
.blindagem-stat-sub { font-size: 12px; color: var(--text-dim); margin-top: 8px; }

/* ── O FLAG DE BLINDADO (GV, 08/10/2026) ──
   O quarto cartão é o placar do GN, e é o único verde da fila: ele conta o que
   SAIU da lista, enquanto os três da esquerda contam o que falta. */
.bld-feitos { border-top-color: var(--success); }
.bld-feitos .blindagem-stat-label { color: var(--success); }
.bld-feitos .blindagem-stat-value { color: var(--success); }

/* O selo do produto e o botão viram UMA peça: a marca é do produto, e separar
   os dois faria o GN procurar a qual selo o botão pertence numa linha com dois
   produtos críticos (são 44 clientes assim na base). */
.bld-par {
  display: inline-flex; align-items: stretch;
  margin: 0 4px 4px 0;
  border: 1px solid rgba(214,48,75,0.3); border-radius: 4px; overflow: hidden;
}
.bld-par .product-tag { margin: 0; border: 0; border-radius: 0; }
.bld-marcar {
  border: 0; border-left: 1px solid rgba(214,48,75,0.3);
  background: var(--bg-panel); color: var(--success);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 3px 9px; cursor: pointer;
}
.bld-marcar:hover { background: rgba(0,122,82,0.10); }
.bld-marcar:disabled { opacity: .55; cursor: default; }

.bld-selo {
  display: inline-block; padding: 3px 8px;
  border: 1px solid rgba(0,122,82,0.35); border-radius: 4px;
  background: rgba(0,122,82,0.07); color: var(--success);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.bld-quando { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #555; }
.bld-reabrir {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  padding: 6px 11px; border: 1px solid var(--border-bright); border-radius: 7px;
  background: var(--bg-panel); color: #555; cursor: pointer; white-space: nowrap;
}
.bld-reabrir:hover { border-color: #C77700; color: #C77700; background: #FFEFCF; }

/* ============ DRAWER ============ */
.drawer {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px;
  margin-top: 22px;
  display: none;
  box-shadow: var(--shadow-md);
}
.drawer.active { display: block; animation: fadeIn 0.3s ease; }
.drawer-section { margin-bottom: 22px; }
.drawer-section h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faded);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}

.score-detail {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 22px;
  align-items: center;
  padding: 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 22px;
}
.score-detail-ring { width: 100px; height: 100px; position: relative; }
.score-detail-ring svg { transform: rotate(-90deg); }
.score-detail-ring circle.bg { fill: none; stroke: var(--border-bright); stroke-width: 8; }
.score-detail-ring circle.fg { fill: none; stroke-width: 8; stroke-linecap: round; }
.score-detail-ring.hot    circle.fg { stroke: var(--hot); }
.score-detail-ring.quente circle.fg { stroke: var(--warm); }
.score-detail-ring.neutro circle.fg { stroke: var(--cyan); }
.score-detail-ring.frio   circle.fg { stroke: var(--text-faded); }
.score-detail-ring .num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px; font-weight: 700; color: var(--text);
}
.score-motivos { display: flex; flex-direction: column; gap: 5px; }
.motivo-line {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.motivo-line.risco       { border-left: 3px solid var(--hot); }
.motivo-line.blindagem   { border-left: 3px solid var(--purple); }
.motivo-line.oportunidade{ border-left: 3px solid var(--success); }
.motivo-line.facilitador { border-left: 3px solid var(--success); }
.motivo-line.bloqueio    { border-left: 3px solid var(--hot); }
.motivo-line.atencao     { border-left: 3px solid var(--warm); }
.motivo-line.big         { border-left: 3px solid var(--blue); }
.motivo-line.medio       { border-left: 3px solid var(--cyan); }
.motivo-peso {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 11px;
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-elev);
  min-width: 38px; text-align: center;
}
.motivo-peso.pos { color: var(--success); }
.motivo-peso.neg { color: var(--hot); }

.field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.field-cell { font-size: 12px; }
.field-cell label { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faded); display: block; margin-bottom: 4px; }
.field-cell .value { color: var(--text); font-weight: 500; }

.trilha-box {
  background: rgba(8,145,178,0.05);
  border: 1px solid rgba(8,145,178,0.25);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* ============ MODAL ============ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 20px;
}
.modal-backdrop.active { display: flex; }
.modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  margin-top: 20px;
  animation: modalIn 0.25s ease;
  box-shadow: var(--shadow-lg);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-head { padding: 20px 26px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 20px; color: var(--text); }
.modal-head h2 em { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; }
.modal-close { background: none; border: none; color: var(--text-dim); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px; transition: color 0.2s; border-radius: 6px; }
.modal-close:hover { color: var(--hot); background: rgba(214,48,75,0.06); }
.modal-body { padding: 0 24px; display: flex; flex-direction: column; min-width: 0; }
.modal-section { padding: 18px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.modal-section:last-child { border-bottom: none; padding-bottom: 8px; }
.modal-section-title { font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: var(--blue); margin-bottom: 14px; padding-left: 9px; border-left: 3px solid var(--purple); line-height: 1.2; display: flex; align-items: center; }
.modal-cond-fields { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-bright); }
.modal-impl-toggle { margin-top: 12px; padding: 10px 14px; background: rgba(0,200,117,.06); border: 1.5px solid rgba(0,200,117,.22); border-radius: 10px; display: flex; align-items: flex-start; gap: 10px; }
.modal-impl-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; margin-top: 2px; accent-color: var(--success); }
.modal-impl-toggle label { cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); }
.modal-impl-toggle label span { display: block; font-weight: 400; font-size: 11px; color: var(--text-faded); margin-top: 2px; }
.modal-etapa-sfa { margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-faded); }
.modal-rv-base { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; padding: 10px 12px; background: var(--bg-elev); border-radius: 8px; border: 1px solid var(--border); }
.form-hint { font-size: 10px; color: var(--text-faded); margin-top: 3px; font-family: 'JetBrains Mono', monospace; }
.form-hint-inline { font-weight: 400; font-size: 9px; color: var(--text-faded); font-family: 'JetBrains Mono', monospace; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.full { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-field label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
  background: #FAFBFF;
  border: 1.5px solid var(--border-bright);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  transition: all 0.2s;
}
.form-field textarea { resize: vertical; min-height: 70px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
  background: var(--bg-panel);
}
.modal-foot { padding: 16px 24px; border-top: 2px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: linear-gradient(135deg, #EDE8FF 0%, #F5F0FF 100%); border-radius: 0 0 14px 14px; }

/* ============ COPILOT ============ */
.copilot {
  position: fixed; top: 0; right: 0;
  width: 420px; height: 100vh;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  z-index: 1100;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(15,23,42,0.12);
}
.copilot.active { transform: translateX(0); }
.copilot-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--bg-elev); }
.copilot-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; color: var(--text); }
.copilot-title em { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; }
.copilot-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-faded); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; }
.copilot-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.copilot-empty { text-align: center; padding: 40px 0; color: var(--text-dim); }
.copilot-empty .ico { font-size: 48px; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; }
.copilot-empty p { margin-top: 10px; font-size: 13px; }
.suggestions { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.suggestion {
  padding: 9px 13px;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  color: var(--text-dim);
}
.suggestion:hover { border-color: rgba(109,40,217,0.3); color: var(--blue); background: rgba(197,155,224,0.06); }

.msg-user, .msg-ai { padding: 12px 16px; font-size: 13px; line-height: 1.6; border-radius: 10px; }
.msg-user { background: rgba(197,155,224,0.06); border-left: 3px solid var(--blue); align-self: flex-end; max-width: 92%; color: var(--text); }
.msg-ai { background: var(--bg-elev); border-left: 3px solid var(--purple); white-space: pre-wrap; color: var(--text-dim); }
.msg-ai.loading { color: var(--text-faded); font-style: italic; }
.copilot-input { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-end; background: var(--bg-elev); }
.copilot-input textarea {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  color: var(--text);
  padding: 9px 13px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  resize: none;
}
.copilot-input textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }
.copilot-input textarea::placeholder { color: var(--text-faded); }

/* ============ AI OUTPUT ============ */
.ai-output {
  background: rgba(124,58,237,0.04);
  border: 1px solid rgba(124,58,237,0.2);
  border-left: 4px solid var(--purple);
  border-radius: 10px;
  padding: 18px;
  margin-top: 18px;
}
.ai-output-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ai-output pre { white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.7; color: var(--text-dim); }

/* ============ TOAST ============ */
.toast {
  position: fixed;
  bottom: 28px; right: 28px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 13px;
  z-index: 2000;
  transform: translateX(120%);
  transition: transform 0.3s ease;
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.toast.show    { transform: translateX(0); }
.toast.error   { border-left-color: var(--hot); }
.toast.success { border-left-color: var(--success); }

footer {
  margin-top: 50px;
  padding: 24px 32px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-faded);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--bg-panel);
}
footer em {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
  text-transform: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

/* ============ RESPONSIVO ============ */
@media (max-width: 1100px) {
  .hero-kpis      { grid-template-columns: repeat(2, 1fr); }
  .kanban         { grid-template-columns: repeat(2, 280px); }
  .form-grid      { grid-template-columns: 1fr; }
  .copilot        { width: 100%; }
  .vender-selector{ grid-template-columns: 1fr; }
  .blindagem-stats{ grid-template-columns: 1fr; }
  .hoje-card      { grid-template-columns: 50px 1fr; }
  .field-grid     { grid-template-columns: 1fr; }
  .score-detail   { grid-template-columns: 80px 1fr; gap: 12px; padding: 14px; }
}

/* ============ RESPONSIVO MOBILE (≤ 600px) ============ */
@media (max-width: 600px) {
  /* modal como flex item do backdrop: min-width:0 permite encolher abaixo do conteúdo */
  .modal { width: 100%; max-width: 100%; max-height: 100dvh; border-radius: 16px 16px 0 0; margin: auto auto 0; min-width: 0; }
  .modal-body  { padding: 0 14px; min-width: 0; }
  .modal-head  { padding: 16px 16px; }
  .modal-foot  { padding: 12px 16px; }
  .modal-section { padding: 14px 0; min-width: 0; }

  /* Tabela de produtos — scroll horizontal */
  /* prod-table também tem classe ap-table; anular o min-width da ap-table pra prod-table */
  .prod-table { table-layout: auto !important; min-width: 400px !important; }
  .prod-table th:nth-child(1) { min-width: 90px; }
  .prod-table th[style*="92px"]  { width: 68px !important; }
  .prod-table th[style*="112px"] { width: 90px !important; }
  .prod-table th[style*="105px"] { width: 78px !important; }

  /* Tabela de aparelhos — scroll horizontal */
  .ap-table:not(.prod-table) { min-width: 460px; }
  .ap-input-nome { min-width: 120px; }

  /* Simplifica form-grid de 2 colunas para 1 */
  .form-grid { grid-template-columns: 1fr !important; }

  /* KPIs mobile */
  .hero-kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi { padding: 14px 12px; }

  /* Header mobile */
  .header-logo span { display: none; }
}

/* ============ RV SIMULATOR ============ */
.rv-config-bar {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;
  padding: 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 16px;
}
.rv-config-bar label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.rv-config-bar input, .rv-config-bar select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: .88rem; background: var(--bg); color: var(--text); min-width: 110px;
}

.rv-kpi-bar {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px;
}
.rv-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 12px; text-align: center;
}
.rv-kpi.projetada { border-color: #8E4DD1; }
.rv-kpi.mesa      { border-color: #9C6306; }
.rv-kpi.ating     { border-color: #007A52; }
.rv-kpi.maximo    { border-color: #8E4DD1; }
.rv-kpi-label  { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.rv-kpi-value  { font-size: 1.2rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.rv-kpi.projetada .rv-kpi-value { color: #8E4DD1; }
.rv-kpi.mesa      .rv-kpi-value { color: #9C6306; }
.rv-kpi.ating     .rv-kpi-value { color: #007A52; }
.rv-kpi.maximo    .rv-kpi-value { color: #8E4DD1; }
.rv-kpi-sub    { font-size: .68rem; color: var(--muted); margin-top: 3px; }

.rv-elig {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px; border-radius: 8px; font-size: .84rem; margin-bottom: 16px;
  background: #FEF3C7; border: 1px solid #FDAB3D; color: #92400E;
}
.rv-elig.ok   { background: #D1FAE5; border-color: #007A52; color: #065F46; }
.rv-elig.warn { background: #FEF3C7; border-color: #9C6306; color: #92400E; }
.rv-elig-ok  { color: #007A52; font-weight: 800; font-size: 1rem; }
.rv-elig-bad { color: #B02138; font-weight: 800; font-size: 1rem; }

.rv-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.rv-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.rv-table th {
  background: var(--surface); padding: 8px 10px; text-align: left;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.rv-th-month { color: #8E4DD1 !important; }
.rv-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rv-table tbody tr:hover td { background: rgba(109,40,217,.04); }
.rv-torre-name strong { font-size: .86rem; }
.rv-peso { color: var(--muted); font-size: .8rem; }
.rv-input {
  width: 88px; padding: 4px 7px; border: 1px solid var(--border);
  border-radius: 6px; font-size: .83rem; background: var(--bg); color: var(--text);
}
.rv-input.past   { background: var(--surface); color: var(--muted); }
.rv-input.future { border-color: #8E4DD1; }
.rv-funil-val {
  display: inline-block; width: 88px; padding: 4px 7px;
  border: 1px solid #00C875; border-radius: 6px; font-size: .83rem;
  background: rgba(0,200,117,.07); color: var(--text);
  font-family: 'JetBrains Mono', monospace; cursor: default;
}
.rv-real  { font-family: 'JetBrains Mono', monospace; font-size: .82rem; }
.rv-ating { font-weight: 700; }
.rv-ating.ok   { color: #007A52; }
.rv-ating.warn { color: #9C6306; }
.rv-ating.bad  { color: #B02138; }
.rv-rv   { font-family: 'JetBrains Mono', monospace; font-size: .82rem; }
.rv-mesa { color: #9C6306; font-size: .78rem; }
.rv-tfoot-row td { font-weight: 700; border-top: 2px solid var(--border); padding-top: 10px; }
.rv-subrow td { background: rgba(109,40,217,.03); border-bottom: 1px dashed var(--border); padding-top: 4px; padding-bottom: 4px; }
.rv-sub-name { padding-left: 20px !important; color: var(--muted); font-size: .8rem; }
.rv-input-sub { width: 80px; font-size: .8rem; }
.rv-table tr.rv-subrow:hover td { background: rgba(109,40,217,.06); }

/* ── Meta Física Móvel ── */
.rv-movel-fisico { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.rv-movel-title { font-weight: 700; font-size: .9rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.rv-movel-title small { font-weight: 400; font-size: .72rem; color: var(--text-faded); background: var(--bg-elev); padding: 2px 8px; border-radius: 10px; }
.rv-movel-body { display: flex; flex-direction: column; gap: 12px; }
.rv-movel-cfg label { font-size: .8rem; color: var(--text-faded); display: flex; align-items: center; gap: 8px; }
.rv-movel-cfg input { background: var(--bg-elev); border: 1px solid var(--border-bright); color: var(--text); border-radius: 6px; padding: 5px 8px; font-size: .84rem; width: 90px; }
.rv-movel-stats { display: flex; gap: 10px; }
.rv-movel-stat { flex: 1; background: var(--bg-elev); border-radius: 8px; padding: 10px 12px; text-align: center; }
.rv-movel-stat-val { font-size: 1.6rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; line-height: 1; }
.rv-movel-stat-lbl { font-size: .68rem; color: var(--text-faded); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.rv-movel-bar-wrap { height: 10px; background: var(--bg-elev); border-radius: 5px; overflow: hidden; }
.rv-movel-bar { height: 100%; border-radius: 5px; transition: width .35s ease, background .35s ease; width: 0%; }
.rv-movel-faltam { font-size: .8rem; color: var(--text-faded); text-align: center; }

.rv-faixa-wrap { margin-bottom: 20px; }
.rv-faixa-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 8px;
}
.rv-faixa-bar {
  display: flex; border-radius: 8px; overflow: hidden; height: 40px;
  border: 1px solid var(--border);
}
.rv-faixa-seg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-size: .6rem; font-weight: 700; cursor: default;
  transition: flex .3s; overflow: hidden; min-width: 0;
}
.rv-faixa-seg small { font-size: .55rem; opacity: .85; }
.rv-faixa-legenda {
  display: flex; justify-content: space-between;
  font-size: .68rem; color: var(--muted); margin-top: 4px;
}

.rv-ese-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
}
.rv-ese-title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: 16px;
}
.rv-ese-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.rv-ese-torre { display: flex; flex-direction: column; gap: 5px; }
.rv-ese-torre-name { font-size: .82rem; font-weight: 600; }
.rv-ese-slider-row { display: flex; align-items: center; gap: 8px; }
.rv-ese-slider { flex: 1; accent-color: #8E4DD1; }
.rv-ese-val { font-size: .78rem; font-family: 'JetBrains Mono', monospace; min-width: 54px; text-align: right; }
.rv-ese-result {
  gap: 20px; align-items: center; flex-wrap: wrap; padding: 12px 16px;
  background: rgba(109,40,217,.08); border-radius: 8px; font-size: .88rem;
}
.rv-ese-up   { color: #007A52; font-weight: 700; }
.rv-ese-down { color: #B02138; font-weight: 700; }

/* ============ TABELA WRAPPERS (scroll horizontal) ============ */
.prod-table-wrap, .ap-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: block;
}

/* ============ RADAR — botão concluir ============ */
.btn-radar-done {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 6px;
  background: none; border: 1.5px solid var(--emerald);
  color: var(--emerald); font-size: .72rem; font-weight: 700;
  font-family: 'JetBrains Mono', monospace; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.btn-radar-done:hover { background: rgba(0,200,117,0.1); }

/* ============ BTN-ADD-ROW (+ Produto / + Aparelho) ============ */
.btn-add-row {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px;
  background: none; border: 1.5px solid var(--blue);
  color: var(--blue); font-size: .75rem; font-weight: 700;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.btn-add-row:hover {
  background: var(--blue-glow); border-color: var(--blue-bright); color: var(--blue-bright);
}

/* ============ APARELHOS ============ */
.ap-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.ap-table th {
  text-align: left; padding: 5px 7px;
  font-family: 'JetBrains Mono', monospace; font-size: .65rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faded); border-bottom: 2px solid var(--border);
  background: none; font-weight: 600;
}
.ap-table td { padding: 4px 3px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ap-table tr:last-child td { border-bottom: none; }
.ap-input {
  background: var(--bg-elev); border: 1px solid var(--border-bright);
  color: var(--text); border-radius: 6px; padding: 5px 8px;
  font-family: inherit; font-size: .84rem; width: 100%;
  transition: border-color .15s; box-sizing: border-box;
}
/* .form-field input tem especificidade maior e sobreescreve .ap-input com padding grande.
   Restaura padding compacto e força width:100% para inputs/selects dentro de tabelas. */
.ap-table td input, .ap-table td select {
  padding: 5px 8px !important;
  font-size: .84rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.ap-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-glow); }
.ap-input-nome { min-width: 180px; }
.ap-input-num    { width: 70px; text-align: right; }
.ap-input-pedido { width: 100%; font-size: 10px; letter-spacing: .3px; }
.ap-sub { font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 600; color: var(--emerald); padding: 4px 7px; white-space: nowrap; }
.ap-remove { background: none; border: none; color: var(--text-faded); font-size: 17px; cursor: pointer; padding: 2px 5px; border-radius: 4px; line-height: 1; transition: all .15s; }
.ap-remove:hover { color: var(--hot); background: rgba(214,48,75,.06); }
.ap-nome-wrap { position: relative; }
.ap-drop {
  position: fixed;
  background: var(--bg-panel); border: 1px solid var(--border-bright);
  border-radius: 6px; z-index: 9999; box-shadow: 0 4px 16px rgba(15,23,42,.18);
  overflow: hidden; min-width: 200px;
}
.ap-drop-item {
  padding: 7px 10px; font-size: .83rem; cursor: pointer;
  border-bottom: 1px solid var(--border); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ap-drop-item:last-child { border-bottom: none; }
.ap-drop-item:hover { background: rgba(109,40,217,.06); color: var(--blue); }

.ap-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; margin-top: 4px;
  background: var(--bg-elev); border: 1px dashed var(--border-bright);
  border-radius: 8px; font-size: .82rem; color: var(--text-dim);
  cursor: pointer; transition: all .15s;
}
.ap-add-btn:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-glow); }
.ap-total-badge {
  font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700;
  color: var(--emerald); background: rgba(0,200,117,.08);
  border: 1px solid rgba(0,200,117,.25); border-radius: 8px; padding: 2px 10px;
}

/* ============ RV BASE TOGGLE (MRR vs FCV) ============ */
.rv-base-toggle {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.rv-base-toggle-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-dim); white-space: nowrap;
}
.rv-base-badge {
  display: none;
  font-size: 9px; font-family: 'JetBrains Mono', monospace;
  padding: 2px 6px; border-radius: 10px;
  background: var(--bg-elev); color: var(--text-faded);
  border: 1px solid var(--border);
  margin-left: 4px; vertical-align: middle;
}
.rv-base-badge.active {
  display: inline;
  background: rgba(0,200,117,0.08); color: var(--success);
  border-color: rgba(0,200,117,0.3);
}

/* ============ PRODUCT RECEITA PILL (FCV / MRR toggle per product) ============ */
/* Pill flutua dentro do input como badge à esquerda */
.prod-receita-cell {
  position: relative;
  display: block;
}
.prod-receita-cell .ap-input {
  width: 100%;
  box-sizing: border-box;
  padding-left: 36px !important;
  text-align: right;
}
.prod-rv-pill {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 4px; border-radius: 3px;
  font-size: 8px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  cursor: pointer; user-select: none; white-space: nowrap;
  border: 1px solid transparent; transition: all 0.15s;
  line-height: 1.4; letter-spacing: 0.02em;
  pointer-events: all;
}
.prod-rv-pill.mrr {
  background: rgba(26,115,232,.12); color: #1a73e8;
  border-color: rgba(26,115,232,.3);
}
.prod-rv-pill.mrr:hover { background: rgba(26,115,232,.22); }
.prod-rv-pill.fcv {
  background: rgba(124,58,237,.12); color: #8E4DD1;
  border-color: rgba(124,58,237,.35);
}
.prod-rv-pill.fcv:hover { background: rgba(124,58,237,.22); }

/* ============ FORM INPUT (selects, textareas fora de .form-field) ============ */
.form-input {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}

/* ============ MONTH NAVIGATOR ============ */
.mes-nav {
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 36px;
}
.mes-nav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px;
  background: none; border: none;
  color: var(--text-dim);
  font-size: 18px; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.mes-nav-btn:hover { background: var(--bg-elev); color: var(--blue); }
.mes-nav-input {
  position: absolute;
  width: 0; height: 0;
  opacity: 0; pointer-events: none;
  border: none; padding: 0;
}
.mes-nav-label {
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  padding: 0 16px;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  min-width: 96px;
  white-space: nowrap;
  user-select: none;
}
.mes-nav-label:hover { color: var(--blue); }

/* ============ FUNIL CONTROLS BAR ============ */
.funil-controls {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.funil-header-right { display: flex; align-items: center; gap: 8px; }

/* Cliente search dropdown */
.cliente-search-wrap { position: relative; }
.cliente-search-wrap input[type="text"] { width: 100%; }
.cliente-search-drop {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: var(--bg-elev); border: 1px solid var(--border-bright);
  border-radius: 6px; max-height: 220px; overflow-y: auto;
  z-index: 300; box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.cliente-drop-item {
  padding: 8px 12px; font-size: .84rem; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.cliente-drop-item:last-child { border-bottom: none; }
.cliente-drop-item:hover { background: rgba(197,155,224,0.06); color: var(--blue); }

/* RV Torre Mapeamento */
.rv-map-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: var(--bg-elev);
}
.rv-map-title {
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  user-select: none;
  list-style: none;
}
.rv-map-title::-webkit-details-marker { display: none; }
.rv-map-title::before { content: '▶ '; font-size: .7rem; opacity: .7; }
details[open] .rv-map-title::before { content: '▼ '; }
.rv-map-desc  { font-size: .8rem; color: var(--muted); margin: 8px 0 12px; }
.rv-map-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.rv-map-row   { display: flex; align-items: center; gap: 8px; }
.rv-map-sfa   { flex: 0 0 140px; font-size: .82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-map-sel   { flex: 1; font-size: .8rem; padding: 4px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); }

/* Scrollbar */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-elev); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* ============ MODERNIZAÇÃO COMPLETA — Deep Purple ============ */

/* Seleção de texto */
::selection { background: rgba(109,40,217,0.18); color: var(--text); }

/* Hero com tint purple */
.hero {
  background: linear-gradient(160deg, rgba(197,155,224,0.06) 0%, var(--bg-card) 50%);
  padding: 32px 32px 24px;
  border-bottom: 1px solid var(--border);
}

/* Copilot header gradient */
.copilot-head {
  background: linear-gradient(135deg, rgba(197,155,224,0.06) 0%, var(--bg-elev) 100%);
}

/* Modal header subtle gradient */
.modal-head {
  background: linear-gradient(135deg, rgba(197,155,224,0.06) 0%, var(--bg-card) 100%);
}

/* KPI alert com gradiente escarlate */
.kpi.alert { background: linear-gradient(160deg, rgba(255,77,109,0.10) 0%, var(--bg-card) 55%); }

/* Hoje card hover glow */
.hoje-card:hover {
  box-shadow: 0 8px 32px rgba(109,40,217,0.14);
}

/* K-card hover glow reforçado */
.k-card:hover {
  box-shadow: 0 8px 28px rgba(109,40,217,0.18);
}

/* Vender card hover glow reforçado */
.vender-card:hover, .vender-card.active {
  box-shadow: 0 8px 32px rgba(109,40,217,0.18);
}

/* Funil KPI tint */
.funil-kpi {
  background: linear-gradient(160deg, rgba(197,155,224,0.06) 0%, var(--bg-card) 55%);
}

/* Table header gradient */
.table-header {
  background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(197,155,224,0.06) 100%);
}

/* Blindagem stat gradient */
.blindagem-stat {
  background: linear-gradient(160deg, rgba(197,155,224,0.06) 0%, var(--bg-card) 60%);
}

/* Brand logo glow animado */
@keyframes brandGlow {
  0%, 100% { box-shadow: var(--shadow-blue); }
  50%       { box-shadow: var(--shadow-blue), 0 0 28px rgba(109,40,217,0.3); }
}
.brand-logo { animation: brandGlow 4s ease-in-out infinite; }

/* AI output border reforçada */
.ai-output { border-left-width: 4px; }

/* Hoje card transition suave */
.hoje-card { transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1), border-color 0.25s; }

/* Deal card e K-card transition suave */
.deal-card, .k-card { transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s; }

/* Vender card transition */
.vender-card { transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1), border-color 0.25s; }

/* RV KPI projetada — deep purple */
.rv-kpi.projetada { border-color: var(--blue); }
.rv-kpi.projetada .rv-kpi-value { color: var(--blue); }

/* ============================================================
   RV PAINEL v2 — Ultra Modern Dashboard
   ============================================================ */

/* Topbar */
.rv2-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.rv2-topbar-actions { display: flex; gap: 8px; }

/* Config bar */
.rv2-config {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px;
  align-items: flex-end;
}
.rv2-cfg-item { display: flex; flex-direction: column; gap: 4px; }
.rv2-cfg-label { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faded); }
.rv2-cfg-item select, .rv2-cfg-item input {
  font-size: .82rem; padding: 5px 9px; min-width: 100px;
  background: var(--bg-panel); border: 1px solid var(--border-bright);
  color: var(--text); border-radius: 7px; transition: border-color .15s;
}
.rv2-cfg-item select:focus, .rv2-cfg-item input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-glow); }

/* Hero */
.rv2-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 24px; margin-bottom: 20px;
}
@media (max-width: 700px) { .rv2-hero { grid-template-columns: 1fr; } }
.rv2-hero-left { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.rv2-hero-label { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faded); margin-bottom: 6px; }
.rv2-hero-pct { font-size: 3rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1; margin-bottom: 4px; transition: color .4s; color: var(--text); }
.rv2-hero-faixa { font-size: .78rem; font-weight: 600; color: var(--text-dim); margin-bottom: 16px; }
/* Progress track */
.rv2-hero-track-wrap { position: relative; padding-bottom: 24px; margin-bottom: 12px; }
.rv2-hero-track { position: relative; height: 14px; background: var(--bg-elev); border-radius: 7px; overflow: visible; }
.rv2-hero-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 7px; min-width: 6px; transition: width .55s cubic-bezier(.4,0,.2,1), background .4s; }
.rv2-hero-tick { position: absolute; top: -3px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); pointer-events: none; }
.rv2-tick-line { width: 1px; height: 20px; background: var(--border-bright); }
.rv2-hero-tick span { font-size: .57rem; font-weight: 700; color: var(--text-faded); white-space: nowrap; margin-top: 2px; }
.rv2-tick-meta .rv2-tick-line { background: var(--blue); width: 2px; }
.rv2-tick-meta span { color: var(--blue); font-size: .62rem; }
/* Elig pills */
.rv2-elig-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.rv2-elig-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border-radius: 20px; border: 1.5px solid var(--border-bright); font-size: .74rem;
  background: var(--bg-elev); transition: all .2s; white-space: nowrap;
}
.rv2-elig-pill.ok   { border-color: #007A52; background: rgba(0,200,117,.08); color: #065F46; }
.rv2-elig-pill.warn { border-color: #9C6306; background: rgba(253,171,61,.08); color: #92400E; }
.rv2-elig-min { font-size: .65rem; color: var(--text-faded); font-weight: 400; }
/* KPI 2×2 grid */
.rv2-hero-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 280px; align-self: start; }
.rv2-kpi {
  background: var(--bg-elev); border-radius: 10px; padding: 11px 14px;
  border-left: 3px solid var(--border-bright); transition: box-shadow .2s;
}
.rv2-kpi:hover { box-shadow: var(--shadow-sm); }
.rv2-kpi-lbl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faded); margin-bottom: 4px; }
.rv2-kpi-val { font-size: .88rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1.2; }
.rv2-kpi-sub { font-size: .6rem; color: var(--text-faded); margin-top: 3px; }
.rv2-kpi-proj { border-left-color: #8E4DD1; }
.rv2-kpi-proj .rv2-kpi-val { color: #8E4DD1; }
.rv2-kpi-mesa { border-left-color: #9C6306; }
.rv2-kpi-mesa .rv2-kpi-val { color: #9C6306; }
.rv2-kpi-max  { border-left-color: #8E4DD1; }
.rv2-kpi-max  .rv2-kpi-val { color: #8E4DD1; }

/* Sugestões */
.rv2-sugestoes { margin-bottom: 20px; }
.rv2-sugestoes-wrap { display: flex; flex-direction: column; gap: 6px; }
.rv2-sug {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 13px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px;
  font-size: .79rem; color: var(--text-dim); border-left: 3px solid var(--blue);
  line-height: 1.4;
}
.rv2-sug-icon { font-size: .95rem; flex-shrink: 0; margin-top: 1px; }
.rv2-sug-action { font-weight: 700; }
.rv2-sug.warn { border-left-color: #9C6306; }
.rv2-sug.ok   { border-left-color: #007A52; }
.rv2-sug.bad  { border-left-color: #B02138; }

/* Sec title */
.rv2-sec-title { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faded); margin-bottom: 12px; }

/* Torre cards */
.rv2-torres { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.rv2-torre-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px;
  display: flex; flex-direction: column; gap: 9px; transition: box-shadow .2s, border-color .2s;
}
.rv2-torre-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-bright); }
.rv2-torre-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rv2-torre-name { font-weight: 700; font-size: .83rem; }
.rv2-torre-peso { font-size: .62rem; font-weight: 700; color: var(--text-faded); background: var(--bg-elev); padding: 2px 7px; border-radius: 10px; flex-shrink: 0; }
.rv2-torre-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: .72rem; color: var(--text-faded); }
.rv2-torre-meta-input {
  width: 105px; font-size: .78rem; padding: 4px 7px; text-align: right;
  background: var(--bg-elev); border: 1px solid var(--border-bright); color: var(--text);
  border-radius: 6px; transition: border-color .15s; font-family: 'JetBrains Mono', monospace;
}
.rv2-torre-meta-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-glow); }
.rv2-torre-real { font-size: .72rem; color: var(--text-dim); }
.rv2-torre-real strong { font-family: 'JetBrains Mono', monospace; color: var(--text); }
.rv2-torre-bar-wrap { height: 8px; background: var(--bg-elev); border-radius: 4px; overflow: hidden; }
.rv2-torre-bar { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.4,0,.2,1), background .35s; width: 0; }
.rv2-torre-stats { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.rv2-torre-ating { font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; }
.rv2-torre-ating.ok   { color: #007A52; }
.rv2-torre-ating.warn { color: #9C6306; }
.rv2-torre-ating.bad  { color: #B02138; }
.rv2-torre-rv { font-family: 'JetBrains Mono', monospace; font-size: .73rem; color: var(--blue); font-weight: 600; }
.rv2-torre-mesa { font-size: .67rem; color: #9C6306; font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* Totais bar */
.rv2-totais {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(197,155,224,0.06) 100%);
  border: 1px solid var(--border-bright); border-radius: 10px; padding: 12px 18px;
  margin-bottom: 20px;
}
.rv2-tot-item { display: flex; flex-direction: column; gap: 2px; }
.rv2-tot-lbl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faded); }
.rv2-tot-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .88rem; }
.rv2-tot-divider { width: 1px; height: 30px; background: var(--border); flex-shrink: 0; }

/* Móvel */
.rv2-movel {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 20px;
}
.rv2-movel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.rv2-movel-icon { font-size: 1.3rem; }
.rv2-movel-title { font-weight: 700; font-size: .88rem; }
.rv2-movel-mes { font-size: .72rem; color: var(--text-faded); }
.rv2-movel-cfg { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--text-dim); white-space: nowrap; }
.rv2-movel-cfg input { width: 80px; font-size: .82rem; padding: 4px 7px; background: var(--bg-elev); border: 1px solid var(--border-bright); color: var(--text); border-radius: 6px; }
.rv2-movel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.rv2-movel-stat { background: var(--bg-elev); border-radius: 8px; padding: 8px 10px; text-align: center; }
.rv2-movel-num { font-size: 1.25rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1; }
.rv2-movel-lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faded); margin-top: 3px; }
.rv2-movel-track { height: 10px; background: var(--bg-elev); border-radius: 5px; overflow: hidden; margin-bottom: 6px; }
.rv2-movel-bar { height: 100%; border-radius: 5px; transition: width .4s ease, background .3s; width: 0; }
.rv2-movel-faltam { font-size: .78rem; color: var(--text-faded); text-align: center; }

/* Curva de Ganho */
.rv2-curva-wrap { margin-bottom: 20px; }
.rv2-curva-container { margin-bottom: 6px; }
.rv2-curva { display: flex; border-radius: 8px; overflow: hidden; height: 44px; border: 1px solid var(--border); }
.rv2-curva-leg { display: flex; justify-content: space-between; font-size: .64rem; color: var(--text-faded); flex-wrap: wrap; gap: 4px; }

/* E Se? */
.rv2-ese-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.rv2-ese-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 14px; }
.rv2-ese-result { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 12px 16px; background: rgba(109,40,217,.08); border-radius: 8px; font-size: .88rem; }

/* Auto-save status */
.rv2-save-status { font-size: .72rem; color: var(--text-faded); min-width: 90px; text-align: right; transition: color .3s; }
.rv2-save-status.saving { color: var(--blue); }
.rv2-save-status.saved  { color: var(--emerald); }
.rv2-save-status.rv2-save-err { color: var(--hot); }

/* Meta diária widget */
.hoje-meta-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 18px; flex-wrap: wrap;
}
.hoje-meta-item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
.hoje-meta-icon { font-size: 1.15rem; line-height: 1; }
.hoje-meta-info { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.hoje-meta-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faded); }
.hoje-meta-dots { display: flex; gap: 5px; align-items: center; }
.meta-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-elev); border: 1.5px solid var(--border-bright);
  transition: background .25s, border-color .25s;
}
.meta-dot.filled { border-color: transparent; }
.hoje-meta-count { font-size: 1.1rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; min-width: 36px; text-align: right; }
.hoje-meta-sep { width: 1px; background: var(--border); align-self: stretch; margin: 0 4px; }

/* Briefing: links clicáveis de clientes */
.briefing-link {
  color: var(--blue-bright); text-decoration: underline dotted;
  cursor: pointer; border-radius: 3px; padding: 0 2px;
  transition: background .15s;
}
.briefing-link:hover { background: var(--blue-glow); }

/* ===== DIRECIONAMENTOS GV ===== */

/* Modal overlay — toggled via style.display by JS */
.dir-modal-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

/* Modal box: fixed header + scrollable body + sticky footer */
.dir-modal-box {
  background: var(--bg-card); border: 1px solid var(--border-bright);
  border-radius: 16px; width: min(660px, 100%);
  max-height: min(88vh, 720px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.dir-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dir-modal-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.dir-modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-faded); font-size: 1.3rem; line-height: 1;
  padding: 4px 8px; border-radius: 6px; transition: color .15s, background .15s;
}
.dir-modal-close:hover { color: var(--text-primary); background: var(--bg-elev); }

/* Steps progress bar */
.dir-steps-bar {
  display: flex; gap: 0; padding: 0 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0; background: var(--bg-elev);
}
.dir-step-pill {
  flex: 1; text-align: center; padding: 9px 4px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-faded);
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.dir-step-pill.active { color: var(--blue-bright); border-color: var(--blue-bright); }
.dir-step-pill.done { color: var(--green); border-color: var(--green); }

/* Step content — scrollable, fills remaining height */
.dir-step {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent;
}
.dir-step::-webkit-scrollbar { width: 5px; }
.dir-step::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 10px; }
.dir-step-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-faded);
}

/* GN list */
.dir-gn-list { display: flex; flex-direction: column; gap: 8px; }
.dir-gn-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg-elev);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.dir-gn-item:hover { border-color: var(--blue-bright); background: var(--bg-hover); }
.dir-gn-item.sel { border-color: var(--blue-bright); background: color-mix(in srgb, var(--blue-bright) 10%, var(--bg-elev)); }
.dir-gn-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-glow); color: var(--blue-bright);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700;
}
.dir-gn-nome { font-weight: 600; font-size: .9rem; color: var(--text-primary); }
.dir-gn-meta { font-size: .72rem; color: var(--text-faded); margin-top: 2px; }

/* Product grid */
.dir-prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dir-prod-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px 8px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--bg-elev);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
  font-size: .78rem; font-weight: 600; color: var(--text-secondary);
  text-align: center; line-height: 1.3;
}
.dir-prod-btn:hover { border-color: var(--blue-bright); color: var(--text-primary); background: var(--bg-hover); }
.dir-prod-btn.sel {
  border-color: var(--blue-bright); color: var(--blue-bright);
  background: color-mix(in srgb, var(--blue-bright) 12%, var(--bg-elev));
}
.dir-prod-icon { font-size: 1.5rem; line-height: 1; }

/* Candidates header with count */
.dir-cand-header {
  display: flex; align-items: center; justify-content: space-between;
}
.dir-cand-count {
  font-size: .72rem; font-weight: 700; color: var(--text-faded);
  background: var(--bg-elev); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 20px;
}

/* Candidate list — fills step, scrolls naturally with parent */
.dir-candidatos-wrap { display: flex; flex-direction: column; gap: 7px; }
.dir-cand-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg-elev);
  cursor: pointer; transition: border-color .15s;
  user-select: none;
}
.dir-cand-item:hover { border-color: var(--border-bright); }
.dir-cand-item.selecionado { border-color: var(--blue-bright); }
.dir-cand-item:has(.dir-check:checked) { border-color: var(--blue-bright); background: color-mix(in srgb, var(--blue-bright) 5%, var(--bg-elev)); }
.dir-cand-item.ja-dir { opacity: .5; pointer-events: none; }

/* Native checkbox styled */
.dir-check {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--border-bright); background: var(--bg-card);
  cursor: pointer; transition: background .15s, border-color .15s;
  position: relative;
}
.dir-check:checked { background: var(--blue-bright); border-color: var(--blue-bright); }
.dir-check:checked::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .75rem; font-weight: 800;
}
.dir-cand-info { flex: 1; min-width: 0; }
.dir-cand-nome {
  font-weight: 600; font-size: .86rem; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-cand-det { font-size: .69rem; color: var(--text-faded); margin-top: 2px; }
.dir-cand-faturamento {
  font-size: .75rem; font-weight: 700; color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace; flex-shrink: 0;
}
.dir-cand-badge {
  font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  flex-shrink: 0; white-space: nowrap;
}
.dir-cand-badge.pendente { background: color-mix(in srgb, var(--yellow) 15%, transparent); border: 1px solid var(--yellow); color: var(--yellow); }

/* Modal footer — sticky at bottom of scrolling step */
.dir-modal-footer {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 0 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.dir-footer-hint { font-size: .72rem; color: var(--text-faded); }
.dir-footer-hint strong { color: var(--blue-bright); }
.dir-btn-next { background: var(--blue-bright); color: #fff; }
.dir-btn-next:hover { opacity: .85; }
.dir-btn-next:disabled { opacity: .4; cursor: not-allowed; }

/* Direcionamento cards in GN briefing */
.dir-header {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--blue-bright); margin-bottom: 12px;
}
.dir-lista { display: flex; flex-direction: column; gap: 10px; }
.dir-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
  transition: border-color .15s;
}
.dir-card:hover { border-color: var(--blue-bright); }
.dir-card-left { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.dir-icon { font-size: 1.5rem; line-height: 1; }
.dir-badge-pendente {
  font-size: .6rem; font-weight: 800; padding: 2px 5px;
  border-radius: 10px; background: color-mix(in srgb, var(--yellow) 18%, transparent);
  border: 1px solid var(--yellow); color: var(--yellow); white-space: nowrap;
}
.dir-info { flex: 1; min-width: 0; }
.dir-nome {
  font-weight: 700; font-size: .92rem; color: var(--blue-bright);
  cursor: pointer; text-decoration: underline dotted;
}
.dir-nome:hover { color: var(--blue-hover); }
.dir-produto {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faded); margin: 2px 0 6px;
}
.dir-motivo { font-size: .8rem; color: var(--text-secondary); line-height: 1.45; }

/* GV Dashboard */
.dir-dash-wrap { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.dir-dash-resumo {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.dir-kpi {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px 10px; border-radius: 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
  text-align: center; transition: border-color .2s;
}
.dir-kpi.ok { border-color: var(--green); }
.dir-kpi.warn { border-color: var(--yellow); }
.dir-kpi.bad { border-color: var(--red); }
.dir-kpi-val {
  font-size: 2rem; font-weight: 800;
  font-family: 'JetBrains Mono', monospace; line-height: 1;
  color: var(--text-primary);
}
.dir-kpi.ok .dir-kpi-val { color: var(--green); }
.dir-kpi.warn .dir-kpi-val { color: var(--yellow); }
.dir-kpi.bad .dir-kpi-val { color: var(--red); }
.dir-kpi-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faded); margin-top: 6px; }

.dir-dash-gn { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dir-dash-gn-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.dir-dash-gn-nome { font-weight: 700; font-size: .9rem; color: var(--text-primary); }
.dir-dash-pct {
  font-size: .78rem; font-weight: 800; padding: 3px 10px;
  border-radius: 20px; font-family: 'JetBrains Mono', monospace;
}
.dir-dash-pct.ok { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.dir-dash-pct.warn { background: color-mix(in srgb, var(--yellow) 15%, transparent); color: var(--yellow); }
.dir-dash-pct.bad { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }

.dir-dash-grupo-lbl {
  padding: 6px 18px 4px; font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-faded);
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.dir-dash-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-bottom: 1px solid var(--border); font-size: .8rem;
}
.dir-dash-row:last-child { border-bottom: none; }
.dir-dash-row.done { opacity: .6; }
.dir-dash-row.pending .dir-dash-cli { color: var(--text-primary); font-weight: 600; }
.dir-dash-row.done .dir-dash-cli { color: var(--text-faded); }
.dir-dash-status-icon { font-size: .9rem; flex-shrink: 0; width: 20px; text-align: center; }
.dir-dash-cli { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-dash-prod {
  font-size: .67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-faded); flex-shrink: 0;
  background: var(--bg-elev); border: 1px solid var(--border-bright);
  padding: 1px 6px; border-radius: 10px;
}
.dir-dash-data { font-size: .67rem; color: var(--text-faded); flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
.dir-dash-empty {
  text-align: center; padding: 40px 20px;
  color: var(--text-faded); font-size: .85rem;
}
.dir-dash-loading { text-align: center; padding: 30px; color: var(--text-faded); font-size: .85rem; }

/* ── Direcionamento: seleção de estratégia (rota) ── */
.dir-rota-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.dir-rota-btn {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-elev);
  text-align: left; transition: border-color .15s, background .15s;
}
.dir-rota-btn:hover { border-color: var(--accent); background: var(--bg-hover); }
.dir-rota-btn.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev)); }
/* A estratégia em destaque (06/10/2026). `--bg-elev` é achatado pelo tema e dá
   no mesmo branco do botão normal, então o realce vai EXPLÍCITO — é a cicatriz
   da Rotina, onde subtotal e coluna TIME pediram destaque e não ganharam
   nenhum. O `#8A5705` sobre `#FFF8E8` dá 7,4:1. */
.dir-rota-btn.destaque { border-color: #E6B800; background: #FFF8E8; }
.dir-rota-btn.destaque .dir-rota-label { color: #8A5705; }
.dir-rota-label { font-size: .82rem; font-weight: 600; color: var(--text-primary); }
.dir-rota-desc  { font-size: .74rem; color: var(--text-faded); line-height: 1.35; }

/* ── Briefing GN estático ── */
.brief-card { display: flex; flex-direction: column; gap: 6px; }
.brief-row {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--text-dim); line-height: 1.4;
}
.brief-ico { font-size: .85rem; flex-shrink: 0; width: 18px; text-align: center; }
.brief-ico.ok { color: var(--emerald); }
.brief-badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; margin-left: 2px;
  background: rgba(109,40,217,.15); color: var(--accent);
}
.brief-badge.warm { background: rgba(234,88,12,.15); color: var(--warm); }
.brief-badge.hot  { background: rgba(214,48,75,.15);  color: var(--hot); }
.brief-sep {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faded);
  margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border);
}
.brief-torre-row {
  display: grid; grid-template-columns: 52px 1fr 36px auto;
  align-items: center; gap: 8px; font-size: .78rem;
}
.brief-torre-name { font-weight: 600; color: var(--text-dim); font-size: .75rem; }
.brief-bar-wrap { height: 5px; background: var(--border-bright); border-radius: 3px; overflow: hidden; }
.brief-bar { height: 100%; border-radius: 3px; transition: width .4s; }
.brief-bar.br-ok  { background: var(--emerald); }
.brief-bar.br-mid { background: var(--blue); }
.brief-bar.br-low { background: var(--warm); }
.brief-bar.br-none { background: var(--border-bright); }
.brief-pct { font-weight: 700; font-size: .72rem; text-align: right; }
.brief-pct.br-ok  { color: var(--emerald); }
.brief-pct.br-mid { color: var(--blue); }
.brief-pct.br-low { color: var(--warm); }
.brief-pct.br-none { color: var(--text-faded); }
.brief-status { font-size: .7rem; color: var(--text-faded); white-space: nowrap; }

/* ── Briefing GN redesign ── */
.brief-motivacao {
  font-style: italic;
  font-size: .82rem;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 6px 0 2px;
  border-left: 3px solid var(--blue);
  padding-left: 10px;
}
.brief-pipeline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
}
.brief-pipeline-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--emerald);
  letter-spacing: -.5px;
}
.brief-pipeline-label {
  font-size: .78rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.brief-divider {
  height: 1px;
  background: var(--border-bright);
  margin: 6px 0;
}
.brief-dir-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
}
.brief-dir-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  margin-top: 1px;
}
.brief-dir-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.brief-dir-cli {
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brief-dir-cli:hover { text-decoration: underline; }
.brief-dir-mot {
  font-size: .73rem;
  color: var(--text-faded);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brief-aging-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.brief-aging-num {
  font-size: 1.5rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.brief-aging-num.ok   { color: var(--emerald); }
.brief-aging-num.warm { color: var(--warm); }
.brief-aging-num.hot  { color: var(--hot); }
.brief-aging-label {
  font-size: .78rem;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ── Copiloto modos ── */
.copilot-mode-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.copilot-mode-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.copilot-mode-btn:hover:not(.active) { border-color: var(--blue); color: var(--blue); }

/* ── Aba Rotina ── */
.rot-header, .rot-row {
  display: grid;
  grid-template-columns: 2fr repeat(7, 1fr);
  gap: 4px 8px;
  align-items: center;
  padding: 10px 12px;
}
.rot-header {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.rot-row {
  border-bottom: 1px solid rgba(226,232,240,.4);
  transition: background .12s;
}
.rot-row:hover { background: var(--bg-elev); }
.rot-col-gn { display: flex; flex-direction: column; gap: 4px; }
.rot-col-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faded);
  text-align: center;
}
.rot-nome {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
}
.rot-bars { display: flex; flex-direction: column; gap: 2px; }
.rot-bar-wrap {
  height: 4px;
  background: var(--border-bright);
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}
.rot-bar { height: 100%; border-radius: 3px; transition: width .4s; }
.rot-bar-blue  { background: var(--blue); }
.rot-bar-green { background: var(--emerald); }
.rot-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
  padding: 3px 6px;
}
.rot-val.ok   { color: var(--emerald); background: rgba(0,200,117,.08); }
.rot-val.mid  { color: var(--vivo-roxo); background: var(--vivo-lilas-fundo); }
.rot-val.low  { color: var(--warm);    background: rgba(234,88,12,.08); }
.rot-val.none { color: var(--text-faded); }

/* ============================================================
   ROTINA DIÁRIA — matinal 08:30 e fechamento 17:30
   Grade densa: a tela é lida em reunião, com o time junto.
   ============================================================ */
.rotina-barra {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
}
.rot-grupo { display: flex; align-items: center; gap: 8px; }
.rot-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute);
}
.rot-tag {
  padding: 5px 12px; border-radius: 999px; background: var(--bg-elev);
  border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.rot-tag.alerta { background: var(--warm-glow); border-color: var(--warm); color: #92400E; }
.rot-sel {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-bright);
  background: var(--bg-panel); color: var(--text); font-size: 14px; font-weight: 600;
}
.btn-sm.ativo {
  color: var(--blue); border-color: var(--blue); background: var(--blue-glow);
}

/* `.table-wrap` (compartilhada) corta com `overflow:hidden`, para o cantinho
   arredondado — e na visão MÊS a tabela fica mais larga que o cartão, porque
   a célula de R$ ("R$ 102.445,00") ocupa mais que o "0" do dia. Sem escape
   de rolagem, os GN do fim da grade (e a coluna TIME) ficavam CORTADOS, sem
   barra nenhuma pra alcançar — "a visibilidade por GN explode e não dá pra
   ver" (GV, 23/10/2026). `overflow-x: auto` aqui vence só o eixo horizontal
   da regra compartilhada (mesmo padrão de `.rv-table-wrap`/`.fgn-scroll`). */
.rot-wrap { margin-bottom: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rot-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.rot-tabela th {
  padding: 9px 10px; text-align: center; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faded); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rot-tabela td {
  padding: 6px 10px; text-align: center; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rot-cab-grupo th { border-bottom: 1px solid var(--border-bright); color: var(--blue); }
.rot-tabela td.rot-prod { text-align: left; font-weight: 600; color: var(--text); }
.rot-nota { font-size: 11px; color: var(--text-mute); font-weight: 400; }
.rot-na { color: var(--text-mute); }

.rot-in {
  width: 92px; padding: 6px 8px; border-radius: 8px; text-align: right;
  border: 1px solid var(--border); background: var(--bg-panel);
  color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums;
}
.rot-in:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--blue-glow); }
.rot-in:disabled { background: var(--bg-elev); color: var(--text-mute); cursor: not-allowed; }
/* Tinta sutil em célula ≠ 0 (GV, 23/10/2026, "Rotina largura cheia" aprovado):
   a grade do dia era toda branca, e achar quem já cantou algo exigia ler
   número por número. `.hit` entra no render (`celulaRotina()`) e é
   atualizada ao digitar (listener de `input`) — nunca no `:disabled`, que já
   tem cor própria. */
.rot-in.hit { background: #F2FAF6; border-color: #A8E9CB; color: #06301F; }
.rot-in.hit:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--blue-glow); }

.rot-sub td { background: var(--bg-elev); font-weight: 600; }
.rot-total td {
  background: var(--bg-elev); font-weight: 700; border-top: 2px solid var(--border-bright);
  font-size: 15px;
}
.rot-delta { font-variant-numeric: tabular-nums; color: var(--text-mute); }
.rot-delta.pos { color: var(--emerald); font-weight: 600; }
.rot-delta.neg { color: var(--hot); font-weight: 600; }

.rot-acoes { display: flex; align-items: center; gap: 12px; margin: 16px 0 28px; flex-wrap: wrap; }
.rot-aviso { font-size: 13px; color: var(--warm); }

/* Célula do mês que abre os dias (só GV). O pontilhado é o sinal — cursor
   não existe no celular. Hover em fundo explícito: --bg-elev é branco no tema. */
.rot-abre { cursor: pointer; }
.rot-abre .rot-chip { text-decoration: underline dotted; text-underline-offset: 3px; }
.rot-abre:hover { background: #F2F2F2; }
.rotd-resumo { font-size: 14px; color: #333; margin-bottom: 12px; }
.rotd-tab td, .rotd-tab th { padding: 6px 8px; }
.rotd-tab td.rotd-dia { font-weight: 700; color: #333; text-align: left; }
.rotd-tab td.rotd-cant { color: #555; font-variant-numeric: tabular-nums; }
.rotd-in {
  width: 96px; padding: 6px 8px; border-radius: 8px; text-align: right;
  border: 1px solid #DDDDDD; background: #FFFFFF; color: #111;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.rotd-in:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--blue-glow); }
.rotd-in:disabled { background: #F2F2F2; color: #555; cursor: not-allowed; }

/* BACKLOG DO MÊS (22/09/2026). Tintas medidas contra o fundo REAL (#FAFAFA). */
.rotbk-tab td { text-align: left; }
.rotbk-tab td.rotbk-num { text-align: right; font-variant-numeric: tabular-nums; }
.rotbk-in { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #3A3A3A; }
.rotbk-in .rotd-in { width: 120px; }
.rotbk-grade .rotbk-cel { width: 100px; }
.rotbk-grade td.rotbk-torre { font-weight: 700; color: #181B34; }
.rotd-in.rot-erro { border-color: #C11E3D; background: #FBDDE3; }
.rotbk-batido { color: #0A6B45; font-weight: 700; }
/* Quadro do PC: sem barras, só a conta (GV, 22/09/2026). A coluna do
   backlog é a única com fundo, para o olho achar o desconto. */
.rotbk-pc { margin-bottom: 8px; }
.rotbk-pc th { text-align: right; }
.rotbk-pc th:first-child { text-align: left; }
.rotbk-pc td { font-size: 15px; padding: 10px 14px; }
.rotbk-pc td.rotbk-torre { font-weight: 700; color: #181B34; }
/* Especificidade acima da zebra de `vivo-theme.css` (`.rot-tabela tbody
   tr:nth-child(even) td`), senão a coluna listra e o destaque some. */
.rot-tabela.rotbk-pc tbody tr td.rotbk-colbk, .rot-tabela.rotbk-pc thead th.rotbk-colbk { background: #FFF6E5; }
.rotbk-pc td.rotbk-falta { font-weight: 800; color: #181B34; }
.rotbk-pc tr.rotbk-tot td { border-top: 2px solid #D0D4E4; font-weight: 800; }
.rot-titulo {
  font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600;
  margin: 8px 0 12px; color: var(--text);
}

/* Matriz da rotina: time inteiro lado a lado, primeira coluna fixa ------- */
.rot-matriz th.rot-prod-h, .rot-matriz td.rot-prod {
  position: sticky; left: 0; z-index: 2; text-align: left;
  min-width: 200px; background: var(--bg-panel);
  box-shadow: 1px 0 0 var(--border);
}
.rot-matriz th.rot-prod-h { color: var(--blue); }
.rot-matriz .rot-sub td.rot-prod, .rot-matriz .rot-total td.rot-prod { background: var(--bg-elev); }
.rot-matriz th { min-width: 96px; }
.rot-matriz .rot-in { width: 84px; }
.rot-tot-col { background: var(--bg-elev); font-weight: 700; }
.rot-modos .btn-sm { white-space: nowrap; }

/* Modo Comparar: realizado em cima, cantado embaixo, cor pelo delta ------ */
.rot-cmp { line-height: 1.25; }
.rot-cmp-r { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.rot-cmp-c { display: block; font-size: 11px; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.rot-cmp.pos .rot-cmp-r { color: var(--emerald); }
.rot-cmp.neg .rot-cmp-r { color: var(--hot); }


/* ── Ícones de traço (icones.js) ────────────────────────────────────
   Herdam a cor de quem os contém, então não precisam de regra por
   contexto: ícone dentro de texto rosa sai rosa. */
.ic { display: inline-block; vertical-align: -0.18em; flex: none; }
button .ic, .btn-primary .ic, .btn-secondary .ic, .tab .ic { vertical-align: -0.2em; }

/* ═══ SELO DE AGING DE VISITA (GV, 22/08/2026) ═══════════════════════════
   "os direcionamentos precisam mostrar o aging de visita do cliente"

   Vive aqui, e não no <style> de cada página, porque aparece nos DOIS
   cockpits: no painel do GV (seletor de direcionamento, dashboard e a lista
   da Carteira) e no cartão de direcionamento do GN. Duas cópias divergiriam,
   e aí "vermelho" passaria a querer dizer coisas diferentes para o gestor e
   para quem vai à rua.

   As quatro faixas se distinguem a dois metros — esta tela é projetada na
   reunião de segunda. A primeira versão usava #FFF6E8 e #FFF0E3 para
   "atenção" e "alerta": medidos no navegador, eram a mesma cor.
   ═══════════════════════════════════════════════════════════════════════ */
.ag-selo{font:700 10px var(--font-mono,ui-monospace,Menlo,monospace);letter-spacing:.02em;
  padding:3px 8px;border-radius:5px;white-space:nowrap;display:inline-block}
.ag-ok      {background:#E4F4DA;color:#1E5334}
.ag-atencao {background:#FFF1CC;color:#7A5300}
.ag-alerta  {background:#FFDFC4;color:#9C3B00}
.ag-critico {background:#FBD7E3;color:#A8003F}
.ag-sem     {background:#F2F1F5;color:#8A8C90}
/* No cartão do GN o selo vem colado ao nome do produto. */
.dir-produto .ag-selo{margin-left:6px}

/* ============================================================
   DIRECIONAMENTOS · quatro listas e a tratativa (24/08/2026)

   "os clientes que estou direcionando precisam ter uma CONCLUSÃO! os GN
    que efetuam esta conclusão" (GV)

   O cartão antigo (.dir-card) só abria a ficha do cliente. Este tem estado:
   em qual tentativa da cadência está, quando volta, e o botão que conclui.
   ============================================================ */
.dir-box { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.dir-box-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.dir-box-tit { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.dir-abas { display: flex; gap: 4px; flex-wrap: wrap; }
.dir-aba {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 11px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  background: transparent; color: var(--text-faded); font-size: 12px; font-weight: 600;
  font-family: inherit; transition: all .15s;
}
.dir-aba b { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800;
             background: var(--bg-elev); color: var(--text-dim); padding: 2px 6px; border-radius: 20px; }
.dir-aba:hover { background: var(--bg-elev); color: var(--text); }
.dir-aba.on { background: var(--blue-glow); color: var(--blue); border-color: var(--border-bright); }
.dir-aba.on b { background: var(--blue); color: #FFF; }
.dir-aba.alerta b { background: rgba(214,48,75,0.14); color: var(--hot); }

.dir-lista2 { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.dir-vazio { padding: 22px; text-align: center; color: var(--text-faded); font-size: 12px; line-height: 1.6; }

/* Caixa sem abas (GV, 25/08/2026): um contador no lugar delas e um rodapé
   que diz o que saiu da lista sem ocupar card. */
.dir-contador {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: var(--blue-glow); color: var(--blue); border: 1px solid var(--border-bright);
  white-space: nowrap;
}
.dir-pe {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 11px 18px; border-top: 1px solid var(--border);
  background: var(--surface);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em;
  color: var(--text-faded);
}
.dir-pe b { color: var(--text); font-weight: 700; }
.dir-pe-nota { color: var(--text-mute); }

.dir-card2 {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 13px; background: var(--bg); border: 1px solid var(--border);
  border-left: 3px solid var(--cyan); border-radius: 11px;
}
.dir-card2.agendado { border-left-color: var(--warm); background: rgba(253,171,61,0.03); }
.dir-card2.atrasado { border-left-color: var(--hot); background: rgba(214,48,75,0.03); }
.dir-card2.fechado  { border-left-color: var(--emerald); opacity: .78; }
.dir-ico {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--blue-glow); color: var(--blue);
}
.dir-nome2 { font-size: 13px; font-weight: 700; line-height: 1.25; cursor: pointer; }
.dir-nome2:hover { color: var(--blue); }
.dir-produto2 {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
  letter-spacing: .05em; color: var(--text-faded); margin-top: 4px;
}
.dir-motivo2 { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.45; }
.dir-ultima  { font-size: 11px; color: var(--text-faded); margin-top: 5px; font-style: italic; }

.dir-dir { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; min-width: 148px; }
.dir-selo {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .05em;
  padding: 4px 9px; border-radius: 20px; white-space: nowrap; text-transform: uppercase;
}
.dir-selo.hoje     { background: rgba(14,165,233,0.12);  color: #0369A1; }
.dir-selo.tratando { background: rgba(253,171,61,0.14);  color: #9C6306; }
.dir-selo.atraso   { background: rgba(214,48,75,0.12);   color: #B02138; }
.dir-selo.ok       { background: rgba(0,200,117,0.12);  color: #047857; }

/* Os pontinhos são a régua da cadência: quantas tentativas já foram, em
   qual o cliente está agora, quantas ainda restam antes de ir para o GV. */
.dir-pontos { display: flex; gap: 4px; }
.dir-ponto  { width: 7px; height: 7px; border-radius: 50%; background: var(--border-bright); }
.dir-ponto.feito { background: var(--warm); }
.dir-ponto.agora { background: var(--hot); box-shadow: 0 0 0 3px rgba(214,48,75,0.15); }

.dir-acoes { display: flex; gap: 6px; }
.dir-btn {
  font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 7px 14px;
  border-radius: 8px; border: none; background: var(--blue); color: #FFF; cursor: pointer; transition: all .15s;
}
.dir-btn:hover:not(:disabled) { background: var(--blue-bright); }
.dir-btn:disabled { opacity: .6; cursor: default; }
.dir-btn.fraco { background: var(--bg-elev); color: var(--text-dim); border: 1px solid var(--border); }
.dir-btn.fraco:hover { background: var(--bg); color: var(--text); }

/* ── modal de tratativa (prefixo dtr- para não colidir com o modal de
      "Novo Direcionamento" do GV, que já usa .dir-modal-*) ── */
.dtr-modal {
  position: fixed; inset: 0; z-index: 900; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(15,23,42,0.28);
}
.dtr-modal.open { display: flex; }
.dtr-card {
  background: var(--bg); border: 1px solid var(--border-bright); border-radius: 16px;
  width: 100%; max-width: 440px; max-height: 90vh; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.dtr-head { position: relative; padding: 16px 18px 14px; border-bottom: 1px solid var(--border); background: var(--bg-elev); }
.dtr-tag  { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .14em;
            text-transform: uppercase; color: var(--text-faded); }
.dtr-tit  { font-size: 14px; font-weight: 700; margin-top: 6px; line-height: 1.3; padding-right: 30px; }
.dtr-sub  { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; color: var(--blue); margin-top: 6px; }
.dtr-x {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-dim);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.dtr-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
.dtr-pe { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg-elev); }
.dtr-pe .dir-btn { flex: 1; }

.dir-opc {
  display: grid; grid-template-columns: 16px 1fr; gap: 11px; align-items: start;
  padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 7px; cursor: pointer;
}
.dir-opc:hover { border-color: var(--border-bright); }
.dir-opc.on { border-color: var(--blue); background: var(--blue-glow); }
.dir-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-bright); margin-top: 2px; }
.dir-opc.on .dir-radio { border-color: var(--blue); background: radial-gradient(circle at center, var(--blue) 0 4px, var(--bg) 4.5px); }
.dir-opc-t { font-size: 12.5px; font-weight: 700; }
.dir-opc-d { font-size: 11px; color: var(--text-faded); margin-top: 3px; line-height: 1.45; }

.dir-campo { margin: 10px 0; padding: 12px; border: 1px solid var(--border-bright); border-radius: 10px; }
.dir-campo-rot { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--text-faded); margin-bottom: 7px; }
.dir-data {
  font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--blue);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; width: 100%;
}
.dir-campo-nota { font-size: 11px; color: var(--text-faded); line-height: 1.5; margin-top: 8px; }
.dir-obs {
  width: 100%; margin-top: 4px; padding: 10px 11px; font-family: inherit; font-size: 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); color: var(--text); resize: vertical;
}

/* ── OS REPAROS NA LISTA DO GN (GV, 23/09/2026) ───────────────────────────
   "precisa refletir na tela do gn o contato e-mail do cliente e quantas vezes
   ele abriu reparo" — de relance, antes de abrir a tratativa.

   Cores explícitas pelo motivo de sempre: o tema achata `--bg-elev` e
   `--border`. Medidas contra o fundo real do card (#FFFFFF). */
.dir-reparo { margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: #555555; }
.dir-reparo b { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8A5705; }
.dir-tel { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #660099; text-decoration: none; }
.dir-tel:hover { text-decoration: underline; }
.dir-mail { color: #00449E; text-decoration: none; word-break: break-all; }
.dir-mail:hover { text-decoration: underline; }
/* E-mail de fachada: riscado e vermelho, MAS presente. Some ele e o GN
   escreve assim mesmo, não recebe resposta e culpa o cliente. */
.dir-mail.morto { color: #B02138; text-decoration: line-through; }
.dir-mail.vazio { color: #666666; font-style: italic; }
.dir-contato { font-weight: 700; color: #181B34; }
/* "+2 contatos": é o que faz o GN abrir o card em vez de ligar no primeiro
   número que vê. Discreto, mas legível — #555 sobre #FFF dá 7,5:1. */
.dir-mais { font-size: 11px; color: #555555; }

/* ── OS CHAMADOS QUE PUSERAM O CLIENTE NO PIPE (GV, 23/09/2026) ───────────
   "pontue pro gn quais foram os problemas deste cliente, motivo dos chamados,
   os contatos dos clientes ja organizado para eles ligarem para o contato
   correto, somente neste direcionamento"

   Direção 1b do canvas. Cores EXPLÍCITAS pelo motivo de sempre: `--bg-elev` e
   `--border` são achatados pelo tema, e realce feito com eles não aparece.
   Medidas contra o fundo real do modal (#FFF) e da faixa (#F6F6F6). */
.chm { border: 1px solid #DDDDDD; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.chm-cab { background: linear-gradient(135deg, #660099 0%, #8433AD 100%); color: #FFFFFF; padding: 12px 14px; }
.chm-cab.sem { background: #EDEEF5; color: #2A2D42; }
.chm-q { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
         letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
/* O número é LINK `tel:` — no celular o GN liga do próprio card, e no
   desktop o clique não faz mal nenhum. Branco sobre o roxo #660099 dá 8,2:1. */
.chm-n { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 20px;
         font-weight: 800; line-height: 1.15; margin-top: 7px; letter-spacing: -.01em;
         color: #FFFFFF; text-decoration: none; }
.chm-n:hover { text-decoration: underline; }
.chm-p { font-size: 11.5px; margin-top: 6px; }
.chm-corpo { padding: 12px 14px; background: #FFFFFF; }
.chm-l { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #555555;
         padding: 8px 0; border-bottom: 1px solid #EFEFEF; }
.chm-l:last-child { border-bottom: 0; }
.chm-k { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
         line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
         color: #666666; flex: 0 0 74px; }
.chm-v { color: #333333; word-break: break-word; }
.chm-v em { font-style: normal; color: #666666; }
/* E-mail de fachada (`atualizeseuemail@atualize.com`): MARCADO, nunca
   escondido — sem o aviso o GN escreve, não recebe resposta e conclui que o
   cliente o ignorou. #B02138 sobre #FFF dá 7,0:1. */
.chm-v.morto { color: #B02138; }
/* Cada contato numa linha própria: concatenados, três contatos viravam um
   parágrafo que ninguém lê numa caixa de 440px. */
.chm-outros { display: flex; flex-direction: column; gap: 7px; }
.chm-o { padding: 6px 8px; border-radius: 7px; background: #F6F6F6; }
.chm-o-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
           font-size: 12px; color: #333333; }
.chm-o-n a { font-family: 'JetBrains Mono', monospace; font-weight: 700;
             color: #660099; text-decoration: none; }
.chm-o-n a:hover { text-decoration: underline; }
.chm-o-n strong { font-weight: 700; color: #181B34; }
.chm-o-n small { font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
                 text-transform: uppercase; color: #666666; }
/* Quantas vezes esta pessoa abriu chamado — é o que decide para quem ligar. */
.chm-o-n b { margin-left: auto; font-family: 'JetBrains Mono', monospace;
             font-size: 10.5px; color: #8A5705; }
.chm-o-m { font-size: 11px; color: #555555; margin-top: 3px; word-break: break-all; }
.chm-o-m a { color: #00449E; text-decoration: none; }
.chm-o-m a:hover { text-decoration: underline; }
.chm-o-m.morto { color: #B02138; }

.chm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
            line-height: 1; padding: 6px 10px; border-radius: 20px;
            background: #FDEBEE; color: #B02138; }
.chm-chip.calmo { background: #EFEFEF; color: #2A2D42; }
.chm-chip i { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 9.5px;
              font-weight: 800; background: #FFFFFF; padding: 2px 5px; border-radius: 10px; }
.chm-hist { border-top: 1px solid #EFEFEF; background: #F6F6F6; }
.chm-hist summary { cursor: pointer; padding: 9px 14px; font-size: 11.5px; font-weight: 700;
                    color: #660099; list-style: none; display: flex;
                    justify-content: space-between; align-items: center; }
.chm-hist summary::-webkit-details-marker { display: none; }
.chm-hist summary::after { content: '▾'; font-weight: 800; }
.chm-hist[open] summary::after { content: '▴'; }
.chm-hc { padding: 0 14px 12px; }
.chm-hl { display: flex; gap: 10px; align-items: baseline; font-size: 11.5px;
          padding: 6px 0; border-bottom: 1px solid #E8E8E8; color: #333333; }
.chm-hl:last-child { border-bottom: 0; }
.chm-hl b { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #666666; flex: 0 0 52px; }

/* ── O OBSTÁCULO: por que concluiu sem oportunidade (GV, 03/09/2026) ──────
   Cores explícitas, não tokens: `--bg-elev` e `--border` são achatados pelo
   tema e um realce feito com eles não aparece. Medido contra o fundo real. */
.dtr-obst { border-color: #F0C98A; background: #FFF8EC; }
.dtr-obst .dir-campo-rot { color: #7A4B04; font-family: inherit; font-size: 12px;
  letter-spacing: 0; text-transform: none; font-weight: 700; }
.dtr-obst-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.dtr-ob {
  font-weight:600;font-size:12px;line-height:1.3;font-family:inherit; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid #DDDDDD; background: #FFFFFF; color: #333333; text-align: left;
}
.dtr-ob:hover { border-color: #8A5705; }
.dtr-ob.on { background: #8A5705; border-color: #8A5705; color: #FFFFFF; }
/* A opção que NÃO é aceita fica marcada desde antes do clique: contrato
   vigente vira oportunidade com data, não conclusão. */
.dtr-ob.aviso { border-style: dashed; border-color: #C48C3A; color: #7A4B04; }
.dtr-ob.aviso.on { background: #B02138; border-color: #B02138; color: #FFFFFF; border-style: solid; }
.dtr-regra {
  margin-top: 10px; padding: 12px 14px; border-radius: 9px;
  background: #FDEBEE; border: 1px solid #F3C2CA; color: #7A1526;
  font-size: 12.5px; line-height: 1.5;
}
.dtr-regra b { display: block; margin-bottom: 4px; color: #B02138; }

@media (max-width: 720px) {
  .dir-card2 { grid-template-columns: 32px 1fr; }
  .dir-dir { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; }
}

/* ============================================================
   BRIEFING COMPACTO (24/08/2026)

   Medido antes de mexer: o briefing tinha 711px de altura numa janela de
   900, o `.hero` inteiro 987px, e a caixa de direcionamentos começava a
   1.505px do topo. O GN abria o cockpit e via só texto — o que ele tem de
   FAZER estava duas rolagens abaixo. "as opções precisam ser o principal e
   este briefing pode ser pequenininho" (GV).

   Recolhido, o card é uma faixa de uma linha. Aberto, volta a ser o que era.
   ============================================================ */
.ai-briefing { padding: 12px 16px; margin: 10px 0 14px; }
.ai-briefing-head { margin-bottom: 8px; }

.brief-mini {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.brief-mini-frase {
  flex: 1 1 260px; min-width: 0;
  font-size: 12.5px; font-style: italic; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brief-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.brief-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 20px;
  background: var(--bg-elev); color: var(--text-dim); white-space: nowrap;
}
.brief-chip.alerta { background: rgba(214,48,75,0.10); color: #B02138; }
.brief-toggle {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--text-faded);
}
.brief-toggle:hover { color: var(--blue); border-color: var(--border-bright); }

/* O corpo só existe quando o card está aberto. `display:none` em vez de
   altura animada porque o conteúdo tem altura variável e meia animação
   errada deixa texto cortado — e este bloco é justamente o que o GV pediu
   para sumir da primeira dobra. */
.brief-card.compacto .brief-corpo { display: none; }
.brief-card.compacto.aberto .brief-corpo { display: block; margin-top: 12px; }
.brief-card.compacto.aberto .brief-mini-frase { white-space: normal; }

/* O hero perde peso junto: a saudação não precisa de 34px para se fazer
   entender, e cada pixel aqui empurra a ação para baixo. */
.hero { padding: 20px 32px 16px; }
.hero-greeting { font-size: 26px; }
.hero-sub { margin-bottom: 4px; }

/* A caixa de direcionamentos vive no hero e pode ter muitos cartões; sem
   teto ela empurra as abas para fora da tela e o remédio vira a doença. */
.hero .dir-lista2 { max-height: 320px; overflow-y: auto; }

/* Faixa de direcionamentos do painel do GV — os mesmos números da aba 06,
   visíveis já na abertura. */
.gv-dir-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin: 10px 0 4px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 11px;
  cursor: pointer;
}
.gv-dir-strip:hover { border-color: var(--border-bright); }
.gv-dir-strip .rot {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faded);
}
.gv-dir-strip .n { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 800; }
.gv-dir-strip .item { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--text-dim); }
.gv-dir-strip .item.alerta .n { color: var(--hot); }
.gv-dir-strip .item.ok .n { color: var(--emerald); }
.gv-dir-strip .ir { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--blue); }

/* ============================================================
   ROTINA DO MÊS — a MESMA grade do dia, somando o mês (GV, 25/08/2026)

   Quase nada de CSS próprio, e é esse o ponto: o mês usa `.rot-tabela`,
   `.rot-matriz`, `.rot-sub`, `.rot-total` e `.rot-cmp` do dia. Se a grade
   do dia mudar de aparência, a do mês muda junto — era o que o GV pediu
   ao dizer "a visão do mês tem de ser igual à do dia".

   Sobram duas linhas que só o mês tem: aderência e dias lançados.
   ============================================================ */
.rot-matriz .rot-ader td, .rot-matriz .rot-dias td { border-top: 1px solid var(--border-bright); }
.rot-matriz .rot-ader td { font-size: 15px; }
.rot-matriz .rot-dias td { font-size: 13px; font-weight: 600; }

/* A aderência é a única célula colorida da grade: três faixas distinguíveis
   a olho, e o fundo tênue para o número continuar legível. */
.rot-pct { font-variant-numeric: tabular-nums; font-weight: 700; }
.rot-pct.f-ok  { color: #007A52; background: rgba(153,204,51,.18); }
.rot-pct.f-med { color: #A15C00; background: rgba(253,171,61,.14); }
.rot-pct.f-bai { color: #B02138; background: rgba(214,48,75,.10); }

/* ============================================================
   FORECAST DO GN — abas 13 e 14 (03/09/2026)

   Prefixo `fgn-` DE PROPÓSITO: `index.html` e `painel-gv.html` carregam esta
   mesma folha, e o painel do GV tem `.rp-*` no `<style>` dele. Reusar aqueles
   nomes faria estas regras pingarem na aba 09 do GV — mudanca que ninguem
   pediu, em tela de reuniao de segunda.

   Toda cor e EXPLICITA. `--bg-panel` e `--bg-elev` sao invertidos/achatados
   pelo `vivo-theme.css`; painel montado com eles abre branco sobre branco sem
   um erro de console. Medidas contra o fundo REAL: `#FAFAFA` na pagina,
   `#FFFFFF` no cartao.
   ============================================================ */
.fgn-card { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 16px; padding: 22px 26px 26px; }
.fgn-erro { color: #B02138; font-size: 13px; margin: 0; }
.fgn-dim { color: #333333; }
.fgn-mono { font-family: 'JetBrains Mono', monospace; }
.fgn-scroll { overflow-x: auto; }

.fgn-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.fgn-cab-tit { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700;
               letter-spacing: -.02em; margin: 0; color: #181B34; }
.fgn-cab-tit em { font-style: normal; color: #006BD6; }
.fgn-cab-dir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fgn-mes { padding: 7px 10px; border: 1px solid #DDDDDD; border-radius: 8px; background: #FFFFFF;
           color: #181B34; font-size: 12.5px; font-family: 'JetBrains Mono', monospace; }
.fgn-btn { padding: 8px 11px; border-radius: 8px; border: 1px solid #DDDDDD; background: transparent;
           color: #181B34; cursor: pointer; font-size: 13px; line-height: 1; }
.fgn-btn:hover { background: #F6F6F6; }

.fgn-placar { display: flex; gap: 8px; flex-wrap: wrap; }
.fgn-chip { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 5px 11px;
            border-radius: 20px; font-weight: 700; white-space: nowrap; }
.fgn-chip-bad { background: #FCE4EF; color: #B02138; }
.fgn-chip-mid { background: #FFEFE1; color: #972A1D; }
.fgn-chip-ok  { background: #EDF8E8; color: #007A52; }
.fgn-neutro   { background: #F6F6F6; color: #333333; }

/* A PROCEDENCIA da meta. "PC" tem dois donos neste projeto -- a grade do GN e
   o `metas_gv` do time -- e os dois numeros nao fecham. Numero sem origem e
   numero em disputa. */
.fgn-proc { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 9px 13px;
            background: #F6F6F6; border-left: 3px solid #660099; border-radius: 0 8px 8px 0; }
.fgn-proc-rot { font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase;
                color: #660099; white-space: nowrap; }
.fgn-proc-txt { font-size: 12.5px; color: #333333; }
.fgn-proc-txt b { font-weight: 700; color: #181B34; }

.fgn-aviso { margin: 0 0 18px; padding: 12px 15px; background: #FFEFE1; border-radius: 10px; }
.fgn-aviso p { margin: 0 0 6px; font-size: 12.5px; color: #7A2E12; line-height: 1.55; }
.fgn-aviso p:last-child { margin-bottom: 0; }
.fgn-aviso b { color: #5C2410; }

.fgn-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 22px; }
.fgn-kpi { border-radius: 14px; padding: 20px 22px; }
.fgn-kpi .rot { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fgn-kpi .num { font-family: 'Space Grotesk', sans-serif; font-size: 2.5rem; font-weight: 600;
                line-height: 1; margin: 10px 0 3px; letter-spacing: -.03em; color: #181B34; }
.fgn-kpi .leg { font-size: 12.5px; color: #333333; }
.fgn-kpi-bad { background: #FCE4EF; } .fgn-kpi-bad .rot { color: #B02138; }
.fgn-kpi-mid { background: #FFEFE1; } .fgn-kpi-mid .rot { color: #972A1D; }
.fgn-kpi-ok  { background: #EDF8E8; } .fgn-kpi-ok  .rot { color: #007A52; }

table.fgn-analitica { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/* `th` proprio: o `th` global desta folha (linha ~604) e JetBrains Mono 10px
   caixa alta, e sem isto ele assume. */
.fgn-analitica th { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .07em;
                    text-transform: uppercase; color: #3A3A3A; font-weight: 700; text-align: right;
                    padding: 0 10px 8px; border-bottom: 1px solid #DDDDDD; white-space: nowrap;
                    background: transparent; }
.fgn-analitica th:first-child { text-align: left; }
.fgn-analitica td { padding: 10px; border-bottom: 1px solid #EEEEEE; text-align: right;
                    white-space: nowrap; vertical-align: middle; color: #181B34; }
.fgn-analitica td:first-child { text-align: left; }
.fgn-analitica tbody tr:last-child td { border-bottom: none; }
.fgn-tnome { font-weight: 600; font-size: 13.5px; display: block; }
.fgn-tunid { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: #3A3A3A; display: block; margin-top: 1px; }
.fgn-v2 { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #3A3A3A; display: block;
          margin-top: 2px; font-weight: 400; }
.fgn-trilho { height: 12px; border-radius: 6px; background: #EEEEEE; overflow: hidden; position: relative; min-width: 74px; }
.fgn-trilho b { display: block; height: 100%; border-radius: 6px; }
.fgn-tpc { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; }
tr.fgn-t-bad .fgn-tpc { color: #B02138; } tr.fgn-t-bad .fgn-trilho b { background: #D6304B; }
tr.fgn-t-mid .fgn-tpc { color: #9C6306; } tr.fgn-t-mid .fgn-trilho b { background: #FDAB3D; }
tr.fgn-t-ok  .fgn-tpc { color: #007A52; } tr.fgn-t-ok  .fgn-trilho b { background: #00C875; }

.fgn-rot { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .12em;
           text-transform: uppercase; color: #3A3A3A; margin: 26px 0 10px; }

table.fgn-mapa { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 11px; }
.fgn-mapa th { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
               color: #3A3A3A; padding: 4px 5px; text-align: center; vertical-align: bottom;
               font-family: 'Figtree', system-ui, sans-serif; background: transparent; border: 0; }
.fgn-mapa th.fgn-gn { text-align: left; }
.fgn-mapa td { text-align: center; padding: 9px 5px; border-radius: 8px;
               font-family: 'JetBrains Mono', monospace; font-weight: 700; white-space: nowrap; border: 0; }
.fgn-mapa td.fgn-gn { text-align: left; color: #181B34; font-family: 'Figtree', system-ui, sans-serif;
                      font-weight: 600; background: none; padding-left: 2px; }
.fgn-mapa td.fgn-vazio { background: #F6F6F6; color: #666666; font-weight: 400; }
.fgn-selo { font: 700 8.5px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase;
            background: #660099; color: #FFFFFF; padding: 2px 6px; border-radius: 4px; vertical-align: middle; }

.fgn-dir { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 18px;
           background: #EDF8E8; border-radius: 12px; }
.fgn-dir .n { font-family: 'Space Grotesk', sans-serif; font-size: 1.7rem; font-weight: 700; color: #007A52; line-height: 1; }
.fgn-dir .t { font-size: 12.5px; color: #333333; }
.fgn-dir .t b { font-weight: 700; color: #181B34; }
.fgn-dir-falta { background: #FFEFE1; }
.fgn-dir-falta .n { color: #972A1D; }

@media (max-width: 900px) {
  .fgn-kpis { grid-template-columns: 1fr; }
  .fgn-card { padding: 18px 15px 20px; }
}

/* ============================================================
   FORECAST EM CORES — o board das abas 09 (GV) e 13/14 (GN)
   (GV, 04/09/2026 — desenhado no Claude Design e aprovado)

   Prefixo `fc-`, e este bloco serve as DUAS telas: `index.html` e
   `painel-gv.html` carregam esta folha, e `frontend/forecast-board.js` é o
   unico lugar que monta o HTML. As classes `.rp-*` (painel do GV) e `.fgn-*`
   (cockpit do GN) continuam existindo para o resto daquelas telas.

   TODA COR E EXPLICITA. `--bg-panel` e `--bg-elev` sao invertidos ou
   achatados pelo `vivo-theme.css`, que carrega DEPOIS desta folha: painel
   montado com eles abre branco sobre branco, sem um erro de console.

   Paleta monday, e os dois papeis nunca se misturam:
     fundo (preenchimento)  #00C875 #FDAB3D #D6304B #0073EA
     tinta (letra)          #00593A #8A5600 #A11B32 #005BB8
   `#00C875` como LETRA da 2,21:1 — e foi exatamente o defeito que esta tela
   tinha antes.
   ============================================================ */

/* ── bateria: a distribuicao das torres numa barra so ── */
.fc-bat-bloco { margin: 4px 0 6px; }
.fc-bat-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.fc-bat-cab h2 { margin: 0; font: 700 13px 'Figtree', system-ui, sans-serif; color: #181B34; }
.fc-bat-cab span { font: 400 12px 'Figtree', system-ui, sans-serif; color: #5A5E7A; }
.fc-bat { display: flex; height: 42px; border-radius: 9px; overflow: hidden; box-shadow: 0 1px 2px rgba(24,27,52,.10); }
.fc-bat div { display: flex; align-items: center; justify-content: center; gap: 7px;
              font: 800 13px 'Figtree', system-ui, sans-serif; min-width: 0; }
.fc-bat small { font: 700 11px 'Figtree', system-ui, sans-serif; opacity: .92; }
.fc-b-crit { background: #D6304B; color: #FFFFFF; }
.fc-b-atras{ background: #FDAB3D; color: #4A2E00; }
.fc-b-alvo { background: #00C875; color: #00402A; }
.fc-b-sem  { background: #E6E9F4; color: #42465F; }

/* ── board ── */
.fc-board { margin-top: 4px; }
.fc-grupo { margin-top: 18px; }
.fc-gcab { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; flex-wrap: wrap; }
.fc-gcab .fc-pin { width: 4px; height: 17px; border-radius: 3px; flex: none; }
.fc-gcab h3 { margin: 0; font: 800 13.5px 'Figtree', system-ui, sans-serif; color: #181B34; }
.fc-gcab .fc-cont { font: 700 11.5px 'Figtree', system-ui, sans-serif; color: #5A5E7A; background: #F7F8FC;
                    border: 1px solid #DCDFEC; border-radius: 20px; padding: 1px 9px; }
.fc-gcab .fc-diz { margin-left: auto; font: 400 12px 'Figtree', system-ui, sans-serif; color: #5A5E7A; }

.fc-cab, .fc-lin { display: grid; grid-template-columns: 210px 104px minmax(280px, 1fr) 116px 112px 78px;
                   gap: 12px; align-items: center; }
.fc-cab { padding: 0 12px 6px; }
/* Rotulo de interface na fonte da MARCA, nunca na monoespacada: mono + caixa
   alta + letter-spacing afina o traco e e o que da o ar de apagado (25/08). */
.fc-cab span { font: 700 10.5px 'Figtree', system-ui, sans-serif; letter-spacing: .05em;
               text-transform: uppercase; color: #5A5E7A; }
.fc-cab span:nth-child(4), .fc-cab span:nth-child(5), .fc-cab span:nth-child(6) { text-align: right; }
.fc-lin { background: #FFFFFF; border: 1px solid #DCDFEC; border-left-width: 5px; border-radius: 8px;
          padding: 10px 12px; margin-bottom: 6px; }
.fc-lin.fc-clica { cursor: pointer; }
.fc-lin.fc-clica:hover { background: #FBFCFE; border-color: #C3C9DE; }
.fc-nome { font: 700 14px 'Figtree', system-ui, sans-serif; color: #181B34; display: block; }
.fc-un { display: block; font: 400 11px 'Figtree', system-ui, sans-serif; color: #5A5E7A; margin-top: 1px; }
.fc-sem { color: #5A5E7A; }

/* pill de status: BLOCO solido com a propria tinta dentro */
.fc-pill { display: block; text-align: center; border-radius: 6px; padding: 7px 0;
           font: 800 11.5px 'Figtree', system-ui, sans-serif; letter-spacing: .02em; }
.fc-p-crit { background: #D6304B; color: #FFFFFF; }
.fc-p-atras{ background: #FDAB3D; color: #4A2E00; }
.fc-p-alvo { background: #00C875; color: #00402A; }
.fc-p-sem  { background: #E6E9F4; color: #42465F; }

/* ── a barra composta: Ganho, Esteira e Aberto viraram segmento ── */
.fc-comp { position: relative; height: 26px; background: #EEF0F7; border-radius: 7px; overflow: hidden;
           display: flex; box-shadow: inset 0 0 0 1px #E1E5F0; }
.fc-comp span { height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;
                white-space: nowrap; font: 800 10.5px 'Figtree', system-ui, sans-serif; }
.fc-s-ganho { background: #00543C; color: #FFFFFF; }
.fc-s-esteira { background: #00C875; color: #00402A; }
.fc-s-aberto { background: repeating-linear-gradient(135deg, #8FE3BE 0 7px, #B4EDD5 7px 14px); color: #00402A; }
.fc-s-vazio { flex: 1; min-width: 0; }
.fc-marca { position: absolute; top: 0; bottom: 0; width: 2px; background: #181B34; opacity: .7; }
.fc-ritmo { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #8A8FAD; }
.fc-pct { position: absolute; right: 9px; top: 0; height: 26px; display: flex; align-items: center;
          font: 700 11.5px 'JetBrains Mono', monospace; color: #3A3E5C; }

/* a sublinha com os numeros CRUS — a regua do GV: nada do que ele ja lia sai */
.fc-crus { display: flex; gap: 16px; margin-top: 5px; flex-wrap: wrap;
           font: 500 11px 'Figtree', system-ui, sans-serif; color: #5A5E7A; }
.fc-crus b { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #3A3E5C; }

.fc-exp { text-align: right; }
.fc-exp b { font: 800 17px 'JetBrains Mono', monospace; color: #181B34; }
.fc-exp small, .fc-dif small, .fc-abrir small { display: block; margin-top: 1px;
  font: 500 10.5px 'Figtree', system-ui, sans-serif; color: #5A5E7A; }
.fc-dif { text-align: right; font: 800 14px 'JetBrains Mono', monospace; }
.fc-abrir { text-align: right; }
.fc-abrir b { font: 800 17px 'JetBrains Mono', monospace; color: #005BB8; }
.fc-abrir b.fc-sem { color: #5A5E7A; }
.fc-selo { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; background: #FFF3E0;
           border: 1px solid #F0C98A; border-radius: 5px; padding: 2px 7px;
           font: 700 10.5px 'Figtree', system-ui, sans-serif; color: #8A5600; }

/* ── mapa por GN ── */
.fc-mapa-bloco { margin-top: 22px; }
.fc-mapa-rot { display: flex; align-items: baseline; gap: 9px; margin: 0 0 8px; flex-wrap: wrap; }
.fc-mapa-rot h3 { margin: 0; font: 800 13.5px 'Figtree', system-ui, sans-serif; color: #181B34; }
.fc-mapa-rot span { font: 400 12px 'Figtree', system-ui, sans-serif; color: #5A5E7A; }
.fc-scroll { overflow-x: auto; }
table.fc-mapa { width: 100%; border-collapse: separate; border-spacing: 3px; }
/* `th` proprio: o `th` global desta folha e JetBrains Mono 10px caixa alta, e
   sem isto ele assume — foi a mesma armadilha do `.fgn-analitica th`. */
table.fc-mapa th { font: 700 10px 'Figtree', system-ui, sans-serif; letter-spacing: .04em;
                   text-transform: uppercase; color: #5A5E7A; padding: 0 0 3px; text-align: center;
                   background: transparent; border: 0; vertical-align: bottom; }
table.fc-mapa th.fc-gn { text-align: left; width: 150px; }
table.fc-mapa td { padding: 7px 4px; text-align: center; border-radius: 6px; border: 0; white-space: nowrap;
                   font: 700 11.5px 'JetBrains Mono', monospace; }
table.fc-mapa td.fc-gn { text-align: left; background: transparent; padding-left: 2px;
                         font: 700 12.5px 'Figtree', system-ui, sans-serif; color: #181B34; }
table.fc-mapa td.fc-gn small { display: block; font: 500 10.5px 'Figtree', system-ui, sans-serif;
                               color: #5A5E7A; margin-top: 1px; }
.fc-selo-eu { font: 800 8.5px 'Figtree', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
              background: #660099; color: #FFFFFF; border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
/* as quatro faixas + sem meta. Verde SO para quem bateu: 70-99% e ambar,
   senao a celula diz "ok" pela cor e "falta" pelo numero. */
.fc-m4 { background: #00C875; color: #00402A; }
.fc-m3 { background: #D6F5E5; color: #00593A; }
.fc-m2 { background: #FFE9CC; color: #8A5600; }
.fc-m1 { background: #F9C9D3; color: #8A1428; }
.fc-m0 { background: #F2F4FA; color: #5A5E7A; }
.fc-mapa-leg { display: flex; gap: 15px; margin-top: 9px; flex-wrap: wrap;
               font: 500 11px 'Figtree', system-ui, sans-serif; color: #5A5E7A; }
.fc-mapa-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block;
                 margin-right: 5px; vertical-align: -1px; }

/* ── o mes zerado: a parede de "R$ 0" vira instrucao ── */
.fc-zero { display: flex; gap: 16px; align-items: stretch; margin: 4px 0 18px; flex-wrap: wrap; }
.fc-zero-big { flex: 1 1 420px; background: #FFFFFF; border: 1px solid #DCDFEC; border-radius: 11px; padding: 15px 17px; }
.fc-zero-big h3 { margin: 0 0 3px; font: 800 15.5px 'Figtree', system-ui, sans-serif; color: #181B34; }
.fc-zero-big p { margin: 0 0 11px; font: 400 12.5px/1.5 'Figtree', system-ui, sans-serif; color: #5A5E7A; }
.fc-zero-big p b { color: #181B34; font-weight: 700; }
.fc-zero-p { display: flex; align-items: center; gap: 10px; background: #F7F8FC; border: 1px solid #DCDFEC;
             border-radius: 8px; padding: 8px 11px; margin-bottom: 6px; }
.fc-zero-p:last-child { margin-bottom: 0; }
.fc-zero-p .ord { width: 21px; height: 21px; border-radius: 6px; background: #660099; color: #FFFFFF;
                  display: grid; place-items: center; font: 800 11px 'JetBrains Mono', monospace; flex: none; }
.fc-zero-p .txt { font: 500 12.5px 'Figtree', system-ui, sans-serif; color: #3A3E5C; }
.fc-zero-p .txt b { color: #181B34; font-weight: 800; }
.fc-zero-p .val { margin-left: auto; font: 800 13px 'JetBrains Mono', monospace; color: #005BB8;
                  white-space: nowrap; padding-left: 8px; }
.fc-zero-lado { width: 272px; background: #FCE8EC; border: 1px solid #F3C4CD; border-radius: 11px; padding: 14px 15px; }
.fc-zero-lado h4 { margin: 0 0 6px; font: 800 11.5px 'Figtree', system-ui, sans-serif; letter-spacing: .04em;
                   text-transform: uppercase; color: #A11B32; }
.fc-zero-lado .g { font: 800 38px/1 'JetBrains Mono', monospace; color: #A11B32; }
.fc-zero-lado p { margin: 6px 0 0; font: 400 12px/1.5 'Figtree', system-ui, sans-serif; color: #6E2233; }
.fc-zero-lado p b { font-weight: 800; }

/* Tela estreita: a grade de 6 colunas nao cabe, e espremer a barra composta
   mata justamente o que ela veio mostrar. */
@media (max-width: 1180px) {
  .fc-cab { display: none; }
  /* Tres faixas: nome + status, a barra inteira, e as tres medidas lado a lado.
     Empilhar uma medida por linha faz "0 acessos" e "17 abrir" flutuarem sem
     relacao visivel com a torre. */
  .fc-lin { grid-template-columns: 1fr 1fr 104px; grid-auto-rows: min-content; row-gap: 10px; }
  .fc-lin > div:nth-child(1) { grid-column: 1 / 3; }
  .fc-lin > .fc-pill { grid-column: 3; }
  .fc-lin > div:nth-child(3) { grid-column: 1 / -1; }
  .fc-exp, .fc-dif { text-align: left; }
  .fc-abrir { text-align: right; }
  .fc-zero-lado { width: 100%; }
}

/* faixa de direcionamentos — o resumo do time no pé do board. O por-GN vive no
   mapa, sob o nome de cada gerente: duas leituras da mesma conta na mesma tela
   foi o erro que a carteira ja cometeu (315 no cartao, 370 no filtro). */
.fc-acoes { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; padding: 12px 15px;
            border-radius: 9px; background: #E6F1FD; border: 1px solid #BFDBFC; }
.fc-acoes .n { font: 800 21px 'JetBrains Mono', monospace; color: #005BB8; white-space: nowrap; }
.fc-acoes .t { font: 400 12.5px/1.45 'Figtree', system-ui, sans-serif; color: #3A3E5C; }
.fc-acoes .t b { color: #181B34; font-weight: 700; }

/* marcador da legenda do grupo: o MESMO bloco da barra, para a legenda mostrar
   a cor que explica. `▮` sairia na cor do texto e a legenda mentiria em cinza. */
.fc-leg { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
          margin: 0 5px 0 10px; vertical-align: -1px; }
.fc-leg-meta { width: 2px; height: 12px; background: #181B34; border-radius: 1px; vertical-align: -2px; }

/* O nome da torre e um LINK, e a seta diz isso sem depender do cursor -- que
   nao existe no celular e que ninguem procura numa tela de numeros. */
.fc-lin a.fc-link { color: #181B34; text-decoration: none; display: inline-flex;
                    align-items: center; gap: 5px; }
.fc-lin a.fc-link:hover { color: #660099; text-decoration: underline; text-underline-offset: 2px; }
.fc-seta { color: #8A8FAD; flex: none; }
.fc-lin a.fc-link:hover .fc-seta { color: #660099; }

/* O trecho do aberto que entrou 1/1 porque o GN assumiu como Forecast. Ganha
   destaque na sublinha: e ele que explica a expectativa ter subido. */
.fc-crus .fc-assumido { color: #00593A; font-weight: 600; }
.fc-crus .fc-assumido b { color: #00543C; }

/* ============================================================
   PLANO DE AÇÃO DO GN — aba 15 (22/09/2026), frontend/plano-acao-gn.js
   Cores explícitas medidas contra #FAFAFA (página) e #FFFFFF (cartão):
   `--bg-panel`/`--bg-elev` são achatados pelo tema. Prefixo `pgn-` porque
   esta folha também carrega no painel do GV.
   ============================================================ */
.pgn-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 10px 0 18px; }
.pgn-kicker { font-size: 13px; font-weight: 600; color: #660099; }
.pgn-tit { margin: 4px 0; font-size: 28px; font-weight: 800; color: #1F1F1F; }
.pgn-tit span { color: #660099; }
.pgn-lead { margin: 0; font-size: 14px; color: #555555; max-width: 640px; }
.pgn-faltam { display: flex; flex-direction: column; align-items: flex-end; }
.pgn-faltam span { font-size: 12px; font-weight: 600; color: #555555; }
.pgn-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 700; line-height: 1; color: #C11E3D; }
.pgn-num.pgn-zero { color: #037F4C; }
.pgn-torres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.pgn-torre { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #FFFFFF; border: 2px solid #DDDDDD; cursor: pointer; text-align: left; font-family: inherit; color: #1F1F1F; transition: transform .15s, border-color .15s, box-shadow .15s; }
.pgn-torre:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(102,0,153,.10); }
.pgn-torre.on { border-color: #660099; box-shadow: 0 8px 20px rgba(102,0,153,.14); }
.pgn-torre:focus-visible { outline: 3px solid #660099; outline-offset: 2px; }
.pgn-anel-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.pgn-anel circle[data-alvo] { transition: stroke-dasharray .9s cubic-bezier(.2,.8,.2,1); }
.pgn-anel-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: #1F1F1F; }
.pgn-torre-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pgn-torre-nome { font-size: 16px; font-weight: 700; color: #1F1F1F; }
.pgn-torre-l { font-size: 13px; color: #555555; }
.pgn-lista { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 14px; overflow: hidden; }
.pgn-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 150px 230px 290px; gap: 0 14px; align-items: center; padding: 11px 18px; border-bottom: 1px solid #EEEEEE; }
.pgn-perdida-obs { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #555; line-height: 1.35; white-space: normal; }
.pgn-perdida-obs b { color: #333; font-weight: 600; }
.pgn-row:last-child { border-bottom: none; }
.pgn-row:not(.pgn-cab):hover { background: #F5F0FA; }
.pgn-cab { font-size: 12px; font-weight: 600; color: #555555; border-bottom: 1px solid #DDDDDD; padding-top: 10px; padding-bottom: 10px; }
.pgn-cli { font-size: 14px; font-weight: 600; color: #1F1F1F; overflow-wrap: anywhere; }
.pgn-mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 14px; color: #333333; }
.pgn-origem { font-size: 13px; color: #555555; }
.pgn-sit { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pgn-pill { display: inline-flex; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.pgn-pend { background: #FDAB3D; color: #3D2500; }
.pgn-op { background: #00C875; color: #06301F; }
.pgn-fin { font-size: 12px; font-weight: 600; color: #555555; }
.pgn-sub { font-size: 12px; color: #555555; }
.pgn-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pgn-btn { padding: 8px 12px; min-height: 36px; border-radius: 8px; border: 1px solid #DDDDDD; background: #FFFFFF; color: #333333; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pgn-btn:hover { background: #F5F0FA; border-color: #660099; }
.pgn-btn-pri { background: #660099; border-color: #660099; color: #FFFFFF; font-weight: 700; }
.pgn-btn-pri:hover { background: #4A0072; }
.pgn-btn:disabled { opacity: .6; cursor: wait; }
.pgn-link { background: none; border: none; padding: 4px 0; color: #660099; font-family: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.pgn-vazio { background: #FFFFFF; border: 1px dashed #BBBBBB; border-radius: 14px; padding: 28px; font-size: 15px; color: #333333; }
.pgn-vazio-t { padding: 22px 18px; font-size: 14px; color: #555555; }
.pgn-erro { color: #B02138; font-size: 13px; }
.pgn-modal { position: fixed; inset: 0; background: rgba(24,27,52,.45); display: flex; align-items: center; justify-content: center; z-index: 950; padding: 16px; }
.pgn-modal-box { background: #FFFFFF; border-radius: 16px; padding: 22px 24px; width: min(460px, 100%); box-shadow: 0 20px 48px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 8px; }
.pgn-modal-box h3 { margin: 0; font-size: 18px; font-weight: 800; color: #1F1F1F; }
.pgn-modal-cli { margin: 0 0 6px; font-size: 14px; color: #555555; }
.pgn-lbl { font-size: 12px; font-weight: 600; color: #333333; }
.pgn-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #BBBBBB; border-radius: 8px; background: #FFFFFF; color: #1F1F1F; font-family: inherit; font-size: 14px; }
.pgn-input:focus { outline: 2px solid #660099; outline-offset: 1px; }
.pgn-aviso { background: #FBDDE3; color: #8A1530; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.pgn-modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
@media (max-width: 1100px) {
  .pgn-torres { grid-template-columns: minmax(0, 1fr); }
  .pgn-row { grid-template-columns: minmax(0, 1fr) 1fr; row-gap: 6px; }
  .pgn-cab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pgn-anel circle[data-alvo], .pgn-torre { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   PRIORIDADE DA DIRETORIA — a caixa no modal da oportunidade e a estrela
   no card (GV, 24/09/2026)

   Vive AQUI e não no `<style>` do painel do GV porque são DUAS telas com a
   mesma caixa: o modal do painel (`painel-gv.html`) e o do cockpit do GN
   (`index.html`, que não tem `<style>` — CSS escrito lá não é aplicado e não
   dá erro). Neste projeto a mesma lista já divergiu em quatro cópias.

   Cores EXPLÍCITAS: `--bg-elev` é igual a `--bg-panel` (#FFFFFF) depois do
   `vivo-theme.css`, e quem pede destaque com ele não ganha destaque nenhum.
   ══════════════════════════════════════════════════════════════════════ */
.pri-star { color: #660099; font-size: 13px; line-height: 1; }
.pri-box { border: 1px solid #B280CC; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.pri-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; background: #F7F1FA; border-bottom: 1px solid #E0CCEB; }
.pri-top.off { border-bottom: 0; }
.pri-sw { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: #222222; }
.pri-sw input { width: 17px; height: 17px; accent-color: #660099; cursor: pointer; }
.pri-estado { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; border-radius: 10px; padding: 3px 8px; }
.pri-estado.dentro { background: #E6F4EE; color: #06301F; border: 1px solid #BFE3D3; }
.pri-estado.fora { background: #FFF3DC; color: #5C3B03; border: 1px solid #F0D9A8; }
.pri-campos { padding: 0 13px 13px; }
.pri-nota { margin-top: 12px; background: #EFE5F4; border: 1px solid #E0CCEB; color: #3A1550; border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.45; }
.pri-nota code { font-family: 'JetBrains Mono', monospace; font-size: 11px; }

/* ============================================================
   FORECAST ANALÍTICO — o compromisso por torre × GN
   (GV, 28/09/2026 · aba 13 do painel do GV e aba 16 do cockpit do GN)

   Serve `frontend/forecast-analitico.js`, que monta as DUAS telas. Prefixo
   `fca-` porque as duas páginas carregam esta folha e já existem `.rp-*`
   (painel do GV), `.fgn-*` e `.fc-*` (Forecast) aqui dentro.

   🔴 TODA COR É EXPLÍCITA. `--bg-panel` e `--bg-elev` são invertidos e
   achatados pelo `vivo-theme.css`: painel montado com eles abre branco sobre
   branco, sem um erro de console. E o contraste foi medido contra o fundo
   REAL — `#FAFAFA` da página e `#FFFFFF` do cartão —, nunca contra branco
   puro imaginário.
   ============================================================ */
.fca-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fca-tit { margin: 0; font-size: 19px; font-weight: 700; color: #000000; }
.fca-tit em { font-style: normal; color: #555555; font-weight: 600; }
.fca-sub { margin: 4px 0 0; font-size: 12px; color: #555555; line-height: 1.45; max-width: 760px; }
.fca-cab-dir { display: flex; align-items: center; gap: 8px; }
.fca-btn { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 8px; color: #333333; font-size: 15px; line-height: 1; padding: 7px 11px; cursor: pointer; }
.fca-btn:hover { background: #F2F2F2; }
.fca-mes { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 8px; color: #333333; font-size: 12px; padding: 6px 8px; }
.fca-salvar { background: #660099; border: 1px solid #660099; border-radius: 8px; color: #FFFFFF; font-size: 12px; font-weight: 700; padding: 8px 14px; cursor: pointer; }
.fca-salvar:hover { background: #4C1D95; }
.fca-salvar:disabled { opacity: 1; background: #B280CC; border-color: #B280CC; cursor: wait; }

/* O status mora AO LADO do botão — aviso no canto oposto da tela não é aviso
   (lição da RV: autosave silencioso é relatado como "não está salvando"). */
.fca-status { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #555555; min-width: 74px; }
.fca-status-ok { color: #06301F; }
.fca-status-pend { color: #C77700; }
.fca-status-erro { color: #C11E3D; }

.fca-rolar { overflow-x: auto; }
.fca-t { width: 100%; border-collapse: collapse; }
.fca-t th { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: #333333; text-transform: uppercase; padding: 8px 7px; border-bottom: 1px solid #DDDDDD; background: #F6F6F6; white-space: nowrap; }
.fca-t td { font-size: 12px; color: #333333; padding: 7px; border-bottom: 1px solid #EEEEEE; }
.fca-t .fca-l { text-align: left; }
.fca-t .fca-r { text-align: right; }
.fca-t td.fca-l { font-weight: 600; color: #000000; }
.fca-num { font-family: 'JetBrains Mono', monospace; }
.fca-t tbody tr:nth-child(even) > td { background: #FCFCFC; }
.fca-t tbody tr:hover > td { background: #F6F2F8; }
/* A coluna do que se DIGITA, lavada de roxo. Vem DEPOIS da zebra de propósito:
   as duas regras têm a mesma especificidade e, empatadas, vence a de baixo —
   foi assim que a coluna do total da Rotina acabou listrada. Sem `!important`. */
.fca-t tbody tr td.fca-comp { background: #F7F1FA; }
.fca-t tfoot .fca-tot td { background: #F2F2F2; font-weight: 700; color: #000000; border-top: 1px solid #DDDDDD; }
.fca-un { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 400; color: #555555; }
.fca-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.fca-neutro { color: #555555; font-weight: 400; }
.fca-neg { color: #8E1600; font-weight: 700; }
.fca-pos { color: #06301F; font-weight: 700; }

/* O campo editável. `type="text"` + `inputmode` no JS: `type="number"` trata
   ponto como decimal e grava 8 onde se digitou 8.000. */
.fca-campo { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: #000000; background: #FFFFFF; border: 1px solid #B280CC; border-radius: 8px; padding: 5px 7px; width: 82px; text-align: right; }
.fca-campo:focus { outline: none; border-color: #660099; box-shadow: 0 0 0 3px rgba(102, 0, 153, .12); }
/* Pendente é sinal de FUNDO, não de borda: o foco já pinta a borda de roxo, e
   marcar a borda deixa a marca invisível na célula que está sob o dedo. */
.fca-campo.fca-sujo { background: #FFEFCF; border-color: #C77700; }
.fca-ro { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8A8C90; }

.fca-notas { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.fca-notas > * { flex: 1 1 320px; }
.fca-aviso { border-radius: 12px; padding: 11px 13px; font-size: 11.5px; line-height: 1.5; }
.fca-aviso-roxo { background: #EFE5F4; border: 1px solid #E0CCEB; color: #3A1550; }
.fca-aviso-amb { background: #FFF3DC; border: 1px solid #F0D9A8; color: #5C3B03; }

.fca-sec { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .09em; color: #555555; text-transform: uppercase; }
.fca-sec-bloco { margin: 22px 0 10px; }
.fca-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.fca-card { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 12px; padding: 13px 14px; }
.fca-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fca-card-tit { font-size: 13px; font-weight: 700; color: #000000; }
.fca-kpis { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.fca-kpi-lab { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; color: #333333; text-transform: uppercase; }
.fca-kpi-v { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: #000000; }
.fca-kpi-comp { color: #660099; }
.fca-kpi-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #333333; margin-top: 2px; }

/* A régua: o compromisso pintado, a meta como marca e a expectativa como
   contorno tracejado — a mesma dupla escala do board em cores. */
.fca-regua { position: relative; height: 26px; background: #F2F2F2; border-radius: 6px; overflow: hidden; margin-top: 12px; }
.fca-r-exp { position: absolute; left: 0; top: 0; bottom: 0; border: 2px dashed #2A2D42; border-radius: 6px; }
.fca-r-comp { position: absolute; left: 0; top: 0; bottom: 0; background: #660099; }
.fca-r-meta { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #000000; }
.fca-leg { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #333333; }
/* Marcador de legenda é o MESMO bloco pintado da barra. Glifo (▮) sai na cor
   do texto e explica cores que não mostra — já aconteceu no board. */
.fca-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; vertical-align: -1px; }
.fca-sw-exp { border: 2px dashed #2A2D42; background: #FFFFFF; }

.fca-sep { height: 1px; background: #EEEEEE; margin: 12px 0 10px; }
.fca-t-mini td { padding: 5px 7px; }
.fca-barrinha { width: 46%; }
.fca-onde { min-width: 120px; }
/* Segmentos: cada um é PREENCHIMENTO, nunca fundo de letra. `#00A05A` como
   tinta dá 2,2:1 — aqui eles só pintam. */
.fca-seg { display: inline-block; height: 12px; border-radius: 2px; vertical-align: middle; }
.fca-s-ganho { background: #06301F; }
.fca-s-esteira { background: #00A05A; }
.fca-s-repro { background: #C44A00; }
.fca-s-aberto { background: #C9CCDD; }

@media (max-width: 760px) {
  .fca-cab-dir { width: 100%; justify-content: flex-start; }
  .fca-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORECAST ANALÍTICO — O MAPA DE CALOR GN × TORRE  (GV, 02/10/2026)
   "preciso que o analitico seja por GN e TORRE, ficou bem ruim toda
   visualizacao" — direção A+C, desenhada em `Forecast analitico v2.dc.html`
   e aprovada antes do código.

   🔴 TODA COR AQUI É EXPLÍCITA. `--bg-panel` e `--bg-elev` são achatados pelo
   `vivo-theme.css` (os dois viram #FFFFFF), e painel montado com eles abre
   branco sobre branco sem um erro de console sequer.

   🔴 CADA TINTA FOI MEDIDA CONTRA O PRÓPRIO FUNDO DA CÉLULA, não contra branco
   puro — a página é #FAFAFA e o cartão é #FFFFFF. Nenhuma cor nova: são as
   seis que o cockpit já usa.
   ═══════════════════════════════════════════════════════════════════════════ */

.fca-modos { display:flex; align-items:center; gap:6px; margin:14px 0 10px; flex-wrap:wrap; }
.fca-modo {
  font-family:inherit; font-size:12.5px; font-weight:600; color:#555555;
  background:#F2F2F2; border:1px solid #DDDDDD; border-radius:8px;
  padding:6px 13px; cursor:pointer;
}
.fca-modo:hover { background:#EFE5F4; color:#3A1550; }
.fca-modo-on { background:#FFFFFF; color:#000000; border-color:#B280CC; box-shadow:0 1px 2px rgba(0,0,0,.10); }
.fca-hint { font-size:11.5px; color:#555555; line-height:1.45; margin:0; }
.fca-modos .fca-hint { margin-left:6px; }

/* A grade. `border-spacing` em vez de borda: a célula é um bloco pintado, e
   borda entre blocos coloridos cria uma terceira cor que ninguém escolheu. */
table.fca-hm { width:100%; border-collapse:separate; border-spacing:2px; }
.fca-hm .fca-hh {
  font-size:10.5px; font-weight:700; color:#333333; text-align:center;
  padding:0 3px 6px; line-height:1.3; vertical-align:bottom;
}
.fca-hm .fca-hh-un {
  display:block; font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:9px; font-weight:400; color:#555555; margin-top:2px;
}
.fca-hm td.fca-hn, .fca-hm th.fca-hn { text-align:left; min-width:150px; padding-left:2px; }
.fca-hm td.fca-hc { padding:0; }

/* O nome é um BOTÃO de verdade, não uma linha com cursor:pointer — cursor não
   existe no celular e ninguém procura por ele numa tela de números. */
.fca-gn {
  display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:0; padding:4px 2px; cursor:pointer; font-family:inherit; text-align:left;
}
.fca-gn:hover .fca-gn-nome { color:#660099; text-decoration:underline; }
.fca-gn-nome { font-size:13px; font-weight:700; color:#000000; }
.fca-sig {
  width:28px; height:24px; border-radius:7px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:#EFE5F4; color:#5B0A87; font-size:11.5px; font-weight:700;
}
.fca-sig-time { background:#2A2D42; color:#FFFFFF; }
.fca-sig-g { width:34px; height:30px; font-size:13px; margin-right:9px; }

.fca-cel { border-radius:7px; padding:6px 4px 5px; text-align:center; }
.fca-cel-n { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:13.5px; font-weight:700; line-height:1; }
.fca-cel-s { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:9.5px; line-height:1; margin-top:2px; }

/* Seis degraus. Sem meta NÃO é zero: é cinza, porque cadastro que falta e
   desempenho zero se leem igual e são coisas diferentes. */
.fca-hm0 { background:#FBDDE3; color:#8E1600; }   /* zero          */
.fca-hm1 { background:#FFE7DA; color:#8E1600; }   /* até 49%       */
.fca-hm2 { background:#FFF3DC; color:#5C3B03; }   /* 50–79%        */
.fca-hm3 { background:#EAF4EE; color:#06301F; }   /* 80–99%        */
.fca-hm4 { background:#A8E9CB; color:#06301F; }   /* no alvo       */
.fca-hmx { background:#F6F6F6; color:#555555; }   /* sem meta      */

.fca-hc-comp { background:#F7F1FA; border-radius:8px; }
.fca-hc-comp .fca-campo { width:100%; min-width:62px; }

.fca-soma { border-radius:7px; background:#2A2D42; padding:6px 4px 5px; text-align:center; }
.fca-soma-n { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:13.5px; font-weight:700; color:#FFFFFF; line-height:1; }
.fca-soma-s { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:9px; color:#D9DBE6; line-height:1; margin-top:3px; }
/* A linha do TIME é lida como um bloco: a tinta do "vs meta" tem de clarear
   contra o #2A2D42, senão herda o verde/vermelho medido contra fundo claro. */
.fca-soma-s .fca-pos, .fca-soma-s .fca-neg, .fca-soma-s .fca-neutro { color:#D9DBE6; }
.fca-hsoma td { padding-top:7px; }

/* ── O painel do gerente ─────────────────────────────────────────────────── */
.fca-painel { margin-top:14px; border-color:#B280CC; }
.fca-fx { display:flex; align-items:center; }
.fca-barra {
  position:relative; display:block; height:20px; width:100%;
  background:#F2F2F2; border-radius:5px; overflow:hidden;
}
.fca-barra .fca-seg { display:inline-block; height:100%; vertical-align:top; }
.fca-b-meta { position:absolute; top:-2px; bottom:-2px; width:3px; background:#000000; border-radius:2px; }
.fca-painel td.fca-barrinha { width:40%; min-width:160px; }
.fca-nums { font-size:10.5px; color:#333333; white-space:nowrap; }
.fca-ambar { color:#5C3B03; font-weight:700; }
.fca-sw-meta { background:#000000; width:3px; border-radius:2px; }

@media (max-width: 900px) {
  .fca-hm .fca-hh-un { display:none; }
  .fca-painel td.fca-barrinha { min-width:110px; }
  .fca-nums { display:none; }
}

/* O cabeçalho da coluna é a porta do drill por torre. */
.fca-th-btn {
  font-family:inherit; font-size:inherit; font-weight:inherit; color:inherit;
  background:none; border:0; padding:0; cursor:pointer; width:100%; line-height:1.3;
}
.fca-th-btn:hover { color:#660099; text-decoration:underline; }
.fca-th-btn:hover .fca-hh-un { color:#660099; }

/* A gaveta dos cartões de torre — fechada por padrão, porque o mapa acima
   responde de relance e eles são aprofundamento. Nada saiu da tela: mudou de
   "sempre ocupando 1.200px" para "um clique". */
.fca-gaveta { margin-top:16px; border-top:1px solid #DDDDDD; padding-top:12px; }
.fca-gav-b {
  display:flex; align-items:baseline; gap:9px; width:100%;
  background:none; border:0; padding:6px 2px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; color:#000000; text-align:left;
}
.fca-gav-b:hover { color:#660099; }
.fca-gav-c { color:#555555; font-size:12px; width:12px; flex:none; }
.fca-gav-n { font-size:11.5px; font-weight:400; color:#555555; }
.fca-gav-b:hover .fca-gav-n { color:#660099; }

/* 🔴 `display:grid` VENCE o atributo `hidden`. A caixa dos cartões é grid, e
   fechar a gaveta não escondia nada: o atributo era aplicado, o `hidden` ficava
   `true` no DOM e a altura do bloco não mudava um pixel. Sem erro de console —
   só a medição do `scrollHeight` contou. Vale para qualquer elemento com
   `display` explícito que use `hidden`. */
.fca-cards[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORECAST ANALÍTICO — UMA FAIXA POR TORRE  (GV, 02/10/2026, à noite)
   "primeira aba da tela movel, 2 aba da tela dados e etc, pra eu ir rolando a
   tela pra baixo e vendo como esta a performance de cada GN naquela torre"

   A torre virou o recorte e o GN virou a linha dentro dela. O "% vendido" é
   ganho + esteira ÷ meta, com o Reprovado FORA da conta — e por isso o rótulo
   não é "atingimento", que no board quer dizer expectativa ÷ meta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* O índice: nove âncoras, porque rolar 2.500px procurando "Licenças" é pior
   que rolar sabendo onde ela está. */
.fca-indice { display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 4px; }
.fca-ind {
  font-size:11.5px; font-weight:600; text-decoration:none;
  padding:5px 10px; border-radius:8px; border:1px solid rgba(0,0,0,.06);
}
.fca-ind b { font-family:'JetBrains Mono', ui-monospace, monospace; font-weight:700; }
.fca-ind:hover { outline:2px solid #660099; outline-offset:1px; }

.fca-faixa {
  margin-top:16px; padding:14px 16px 10px;
  background:#FFFFFF; border:1px solid #DDDDDD; border-radius:14px;
  scroll-margin-top:90px;              /* a âncora não some atrás das abas */
}
.fca-ft-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.fca-ft-tit { margin:0; font-size:16px; font-weight:800; color:#000000; letter-spacing:-.01em; }
.fca-ft-sub { margin:3px 0 0; font-size:11.5px; color:#555555; }
.fca-ft-kpi { text-align:right; flex:none; }
.fca-ft-pct { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:24px; font-weight:700; line-height:1; }
.fca-ft-lab { font-size:10.5px; color:#555555; margin-top:4px; }
.fca-ft-timebar { margin:11px 0 6px; }
.fca-ft-timebar .fca-barra { height:14px; }

.fca-ft-t td, .fca-ft-t th { padding-top:5px; padding-bottom:5px; }
.fca-ft-t td.fca-ft-gn { width:150px; }
.fca-ft-t td.fca-barrinha { width:34%; min-width:150px; }
.fca-ft-t td.fca-ft-comp { width:86px; }
.fca-ft-comp .fca-campo { width:72px; }
.fca-ft-rodape { font-size:11px; color:#5C3B03; font-weight:400; }
.fca-ft-vs { display:block; font-size:10px; font-weight:400; margin-top:2px; }

@media (max-width: 900px) {
  .fca-ft-t td.fca-barrinha { min-width:90px; }
  .fca-ft-top { flex-direction:column; }
  .fca-ft-kpi { text-align:left; }
}

/* ══════════════════════════════════════════════════════════════════════
   ANIVERSÁRIO — o enfeite do portal (GV, 06/10/2026)

   Carregado por todas as páginas via `frontend/aniversario.js`. As cores são
   as do sistema: roxo #660099 da marca, âmbar e verde do monday. Nada de cor
   nova só porque é festa.

   🔴 Os balões vão POR CIMA do conteúdo. Atrás dos cartões — que são brancos e
   OPACOS — não aparece um único; o desenho provou isso antes do código. Quem
   os torna inofensivos é `pointer-events:none`.
   ══════════════════════════════════════════════════════════════════════ */
#niver-baloes {
  position: fixed; inset: 0; overflow: hidden;
  /* A linha que faz tudo isto ser aceitável numa ferramenta de trabalho:
     o clique atravessa o balão e chega no botão que está embaixo. */
  pointer-events: none;
  /* Acima dos cartões; ABAIXO dos popups (99998+) e do `.dtr-modal` (900):
     enfeite não pode cobrir decisão. */
  z-index: 50;
}
.niver-balao {
  position: absolute; display: block; border-radius: 50% 50% 48% 48%;
  opacity: .82; animation: niver-subir 11s linear infinite;
}
/* O fio e o brilho — círculo e um traço, nada desenhado à mão. */
.niver-balao::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  width: 1px; height: 26px; background: rgba(24, 27, 52, .28);
}
.niver-balao::before {
  content: ''; position: absolute; top: 18%; left: 24%;
  width: 26%; height: 27%; border-radius: 50%; background: rgba(255, 255, 255, .6);
}
@keyframes niver-subir {
  0%   { transform: translateY(105vh) rotate(-5deg); }
  100% { transform: translateY(-40vh) rotate(5deg); }
}
/* O empurrão do "dar os parabéns": mais rápido por 6s, e sai sozinho. */
#niver-baloes.niver-festa .niver-balao { animation-duration: 4.5s; opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  /* Param, mas NÃO somem: quem pediu menos movimento não pediu menos festa.
     Sem o `transform` fixo eles ficariam parados FORA da tela, em translateY
     inicial — parados e invisíveis é o mesmo que ausentes. */
  .niver-balao { animation: none; transform: translateY(30vh); }
  #niver-baloes.niver-festa .niver-balao { animation: none; }
}

/* A FAIXA. Entra logo ABAIXO da topbar e some sozinha no dia seguinte.
   Tinta #4A0070 sobre o roxo claro da marca: 9,2:1. */
#niver-faixa {
  display: flex; align-items: center; gap: 13px; padding: 11px 18px;
  background: linear-gradient(90deg, #F3E9FA 0%, #FDF3E8 100%);
  border-bottom: 1px solid #E3D2F0;
  position: relative; z-index: 51;
}
#niver-faixa .niver-av {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; line-height: 1; color: #fff; background: #660099;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #FDAB3D;
}
#niver-faixa .niver-txt { min-width: 0; }
#niver-faixa .niver-txt b {
  display: block; font-size: 15.5px; color: #4A0070; letter-spacing: -.01em;
}
#niver-faixa .niver-txt small {
  display: block; font-weight: 600; font-size: 11.5px; color: #8A5705; margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
#niver-faixa .niver-esp { flex: 1; }
#niver-faixa .niver-bt {
  font-family: inherit; font-weight: 800; font-size: 12px; padding: 9px 16px;
  border-radius: 8px; border: 0; cursor: pointer; background: #660099; color: #fff;
  white-space: nowrap;
}
#niver-faixa .niver-bt:hover { background: #4A0070; }
#niver-faixa .niver-feito {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 11.5px; color: #00593C; white-space: nowrap;
}
@media (max-width: 720px) {
  /* No celular o botão desce em vez de espremer o nome. */
  #niver-faixa { flex-wrap: wrap; }
  #niver-faixa .niver-esp { display: none; }
}

/* ── Aba 14 do painel do GV: cadastro e o ano do time ─────────────────── */
.niv-prox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.niv-cartao {
  border: 1px solid #DDDDDD; border-radius: 12px; background: #FFFFFF; padding: 15px 16px;
  display: flex; align-items: center; gap: 13px;
}
.niv-cartao.hoje { border-color: #660099; background: #F3E9FA; box-shadow: 0 0 0 3px rgba(102,0,153,.09); }
.niv-cartao > div { min-width: 0; }
.niv-cartao b { display: block; font-size: 15px; color: #181B34; }
.niv-cartao small {
  display: block; font-weight: 700; font-size: 11.5px; color: #555555; margin-top: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.niv-cartao.hoje b { color: #4A0070; }
.niv-cartao.hoje small { color: #8A5705; }
.niv-quantos { margin-left: auto; text-align: right; flex: 0 0 auto; }
.niv-quantos b { display: block; font-size: 21px; font-weight: 800; color: #181B34;
                 font-family: 'JetBrains Mono', ui-monospace, monospace; }
.niv-quantos span { font-weight: 700; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
                    color: #666666; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.niv-cartao.hoje .niv-quantos b { color: #660099; }
/* Vazio é estado e DIZ o próximo passo — buraco branco não ensina nada. */
.niv-vazio-faixa {
  grid-column: 1 / -1; padding: 14px 16px; border-radius: 10px;
  background: #F6F6F6; border: 1px solid #DDDDDD; color: #333333; font-size: 12.5px; line-height: 1.6;
}

.niv-av {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; line-height: 1; color: #FFFFFF; background: #660099;
}
.niv-cartao .niv-av { width: 42px; height: 42px; flex: 0 0 42px; font-size: 17px; }

.niv-ano { display: grid; grid-template-columns: repeat(12, 1fr); }
.niv-mes { border-left: 1px solid #EFEFEF; min-height: 118px; padding: 0 0 10px; }
.niv-mes:first-child { border-left: 0; }
.niv-mes.corrente { background: #FCFAFE; }
.niv-mes h3 {
  margin: 0; padding: 9px 0; text-align: center; font-weight: 800; font-size: 10.5px;
  letter-spacing: .1em; color: #666666; font-family: 'JetBrains Mono', ui-monospace, monospace;
  border-bottom: 1px solid #EFEFEF; background: #F6F6F6;
}
.niv-mes.corrente h3 { background: #660099; color: #FFFFFF; }
.niv-pess { display: flex; align-items: center; gap: 6px; padding: 7px 8px 0; }
.niv-pess .niv-av { width: 22px; height: 22px; flex: 0 0 22px; font-size: 10px; }
.niv-pess b { font-size: 11.5px; font-weight: 700; color: #181B34;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.niv-pess small { font-family: 'JetBrains Mono', ui-monospace, monospace;
                  font-size: 10px; font-weight: 800; color: #555555; margin-left: auto; }
.niv-pess.ehoje { background: #F3E9FA; border-radius: 6px; margin: 7px 5px 0; padding: 5px 6px 5px 5px; }
.niv-pess.ehoje b { color: #4A0070; }
.niv-vazio { display: block; text-align: center; font-size: 11px; color: #8A8C90;
             padding: 14px 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; }

.niv-quem { display: flex; align-items: center; gap: 10px; }
.niv-quem b { font-size: 13.5px; color: #181B34; }
.niv-voce, .niv-29 {
  font-style: normal; font-size: 10px; font-weight: 800;
  font-family: 'JetBrains Mono', ui-monospace, monospace; padding: 2px 6px; border-radius: 4px;
}
.niv-voce { color: #4A0070; background: #F3E9FA; }
/* Quem nasceu em 29/02 e está num ano não bissexto: a tela DIZ que a data
   correu para 28/02. Descobrir pela ausência seria a forma mais cara. */
.niv-29 { color: #8A5705; background: #FFF3E0; }
/* `type="text"` + `inputmode="numeric"`, nunca `type="number"`: neste projeto
   o campo numérico já transformou 8.000 em 8. Aqui não há decimal, mas a regra
   de não usar `type=number` para dado digitado à mão vale igual. */
.niv-dia {
  width: 52px; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 700; padding: 6px 4px;
  border: 1px solid #DDDDDD; border-radius: 6px; color: #333333; background: #FFFFFF;
}
.niv-mes-sel {
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 8px;
  border: 1px solid #DDDDDD; border-radius: 6px; color: #333333; background: #FFFFFF;
}
.niv-ro { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; color: #555555; }
.niv-status { text-align: right; }
.niv-salvo { font-family: 'JetBrains Mono', ui-monospace, monospace;
             font-size: 11px; font-weight: 700; color: #00593C; }
.niv-semdata { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: #8A8C90; }

@media (max-width: 1100px) {
  .niv-ano { grid-template-columns: repeat(6, 1fr); }
  .niv-mes:nth-child(7) { border-left: 0; }
  .niv-prox { grid-template-columns: 1fr; }
}

/* ── O RECADO DIRIGIDO (GV, 06/10/2026) ───────────────────────────────────
   Mesma faixa do aniversário, com uma diferença: o recado tem CORPO de texto,
   então o alinhamento é pelo topo e a altura cresce com o conteúdo — centrado,
   um recado de três linhas deixaria o avatar flutuando no meio. */
#niver-faixa.niver-recado { align-items: flex-start; padding: 13px 18px; }
#niver-faixa.niver-recado .niver-av {
  font-size: 19px; background: #FFF3E0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #660099;
}
/* Recado sem festa é sóbrio: a mesma faixa, sem o degradê de aniversário. */
#niver-faixa.niver-recado:not(.com-festa) { background: #F3E9FA; }
#niver-faixa .niver-corpo {
  display: block; font-size: 13px; line-height: 1.55; color: #333333; margin-top: 4px;
  max-width: 80ch;
}
#niver-faixa.niver-recado .niver-txt small {
  margin-top: 6px; font-weight: 700; color: #4A0070;
}
#niver-faixa.niver-recado .niver-bt { margin-top: 2px; }

/* ── Formulário do recado, na aba 14 ─────────────────────────────────── */
.niv-bt-recado {
  font-family: inherit; font-weight: 700; font-size: 11.5px; padding: 6px 12px;
  border-radius: 7px; cursor: pointer; border: 1px solid #DDDDDD;
  background: #FFFFFF; color: #4A0070; white-space: nowrap;
}
.niv-bt-recado:hover { border-color: #660099; background: #F3E9FA; }
.niv-recado-form {
  margin-top: 14px; border: 1px solid #660099; border-radius: 12px;
  background: #FFFFFF; padding: 16px 18px; box-shadow: 0 0 0 3px rgba(102,0,153,.08);
}
.niv-rf-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.niv-rf-cab b { font-size: 15px; color: #181B34; }
.niv-rf-x { border: 0; background: none; cursor: pointer; font-size: 15px; color: #555555; padding: 4px 8px; }
.niv-rf-linha { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.niv-recado-form label {
  display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: #555555;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.niv-rf-campo { margin-bottom: 10px; }
.niv-recado-form input[type=text], .niv-recado-form textarea, .niv-recado-form select {
  font-family: inherit; font-size: 13.5px; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: #333333; background: #FFFFFF;
  border: 1px solid #DDDDDD; border-radius: 7px; padding: 8px 10px;
}
.niv-recado-form textarea { resize: vertical; line-height: 1.5; }
.niv-rf-acoes { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.niv-rf-acoes .niv-semdata { margin-right: auto; }

/* ══════════════════════════════════════════════════════════════════════
   ABA 15 · NEGOCIAÇÃO DE MÓVEL (GV, 06/10/2026)
   Transposição do desenho `Negociacao movel do GN.html` para o painel do GV.
   Cores explícitas — `--bg-elev` e `--border` são achatados pelo vivo-theme.
   ══════════════════════════════════════════════════════════════════════ */
.neg-portas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.neg-porta {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 14px; padding: 16px 18px;
  font-family: inherit; color: #333333;
}
.neg-porta.on { border-color: #660099; box-shadow: 0 0 0 3px #F3E9FA; }
.neg-porta-rot { font: 800 9.5px 'JetBrains Mono', ui-monospace, monospace;
                 letter-spacing: .1em; text-transform: uppercase; color: #666666; }
.neg-porta.on .neg-porta-rot { color: #660099; }
.neg-porta-t { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #181B34; }
.neg-porta-d { font-size: 12px; color: #555555; line-height: 1.55; }
.neg-porta-d b { color: #181B34; }
.neg-regra { margin-top: 6px; font: 800 10px 'JetBrains Mono', ui-monospace, monospace;
             letter-spacing: .05em; padding: 6px 10px; border-radius: 8px; align-self: flex-start; }
.neg-regra.livre { background: rgba(0,200,117,.14); color: #00593C; border: 1px solid rgba(0,200,117,.4); }
.neg-regra.teto  { background: rgba(214,48,75,.08); color: #B02138; border: 1px solid rgba(214,48,75,.28); }

.neg-sub-h { font-weight: 500; font-size: 11.5px; color: #555555; margin-left: 6px;
             font-family: 'JetBrains Mono', ui-monospace, monospace; }
.neg-cand-l { cursor: pointer; }
.neg-cand-l:hover { background: #F3E9FA; }
.neg-cli { font-weight: 700; font-size: 13px; color: #181B34; }
.neg-crit { font-style: normal; font: 800 9px 'JetBrains Mono', ui-monospace, monospace;
            letter-spacing: .06em; background: #FDEBEE; color: #B02138; padding: 2px 6px;
            border-radius: 4px; margin-left: 7px; }
.neg-cli-m { font-size: 11px; color: #555555; margin-top: 2px; }
/* O cliente que o Excel do GN trouxe e a carteira não tem. Não é erro — é o
   motivo de a importação existir (o GN pode estar tratando quem o SFA ainda
   não mostra) —, mas a tela tem de dizer que ali não há base nossa para
   consultar: nem linhas, nem valor, nem a presunção de ser renovação.
   Âmbar sobre o fundo REAL da linha (#FFFFFF e #F3E9FA no hover), não sobre
   branco puro teórico. */
.neg-fora { font-style: normal; font: 800 9px 'JetBrains Mono', ui-monospace, monospace;
            letter-spacing: .06em; background: #FFF4E5; color: #8A5200; padding: 2px 6px;
            border-radius: 4px; margin-left: 7px; border: 1px solid #F0DCBE; }
/* O selo do QUARTO ESTADO na lista de negociacoes (07/10/2026). Verde escuro
   sobre lavagem verde, medido contra o fundo REAL da linha (#FFFFFF e o
   #F3E9FA do hover) — #00C875 como LETRA da 2,21:1, que foi a armadilha da
   paleta monday em 02/09. Diz "apresentada", nunca "vendida": a venda tem
   etapa, torre e data de fechamento em `projetos`. */
.neg-apr-selo { font-style: normal; font: 800 9px 'JetBrains Mono', ui-monospace, monospace;
            letter-spacing: .06em; background: #E6F6EE; color: #06301F; padding: 2px 6px;
            border-radius: 4px; margin-left: 7px; border: 1px solid #BFE6D2; }
.neg-obs { font-size: 11.5px; color: #555555; max-width: 220px; }
.neg-cand-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* A contagem da fila sobrou da sub-aba que saiu em 06/10 (a "Sugestão do
   sistema"). Com uma vista só, ela não é mais um botão — é rótulo. O `#333`
   é da escala de cinza do tema, não o `#666` achatado que já fez a Rotina
   parecer apagada. */
.neg-cand-cnt { font: 500 11.5px/1 var(--font-ui, inherit); color: #333333; white-space: nowrap; }
.neg-cand-cnt b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700;
            font-size: 12px; color: #660099; margin-left: 5px; }
.neg-cand-cnt b.zero { color: #555555; }
.neg-n { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; }
/* A SUBLINHA DA CÉLULA DE NÚMERO É UMA LINHA, NÃO UM SUFIXO (07/10/2026).
   `<small>` é inline por padrão: "33" seguido de "25 em M17+" saía na tela
   como **3325 em M17+**, dois números colados virando um terceiro que não
   existe. Vale para as duas tabelas — a do histórico do GV tinha o mesmo
   defeito desde 06/10, e ninguém olhou a célula de perto. */
.neg-n small { display: block; font-family: 'Figtree', system-ui, sans-serif;
               font-weight: 600; font-size: 10.5px; color: #555555; margin-top: 3px; }
.neg-usar { font: 700 11px 'JetBrains Mono', ui-monospace, monospace; color: #660099; white-space: nowrap; }
/* 🔴 A CÉLULA "O QUE FALTA" É BOTÃO DE VERDADE (07/10/2026). Como `<span>`
   ela tinha a cara de um — roxo, mono, negrito, com a seta — e o clique
   caía no `onclick` da LINHA, que só abre o cliente: o GN clicou em
   "Montar a proposta" quatro vezes e nenhum cenário saiu. `<button>`
   também devolve o foco pelo teclado, que o `<tr onclick>` nunca deu.
   O reset vem com o seletor `button.neg-usar` (0,1,1) para não alcançar o
   `<span>` do painel do GV, que não tem botão nessa coluna. */
button.neg-usar { background: none; border: 0; padding: 0; cursor: pointer;
                  text-align: right; text-decoration: underline;
                  text-decoration-color: #D7BDE8; text-underline-offset: 3px; }
button.neg-usar:hover { color: #4A006E; text-decoration-color: #660099; }

.neg-form-cx { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 14px;
               overflow: hidden; margin-bottom: 14px; }
.neg-form-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px;
                padding: 13px 18px; border-bottom: 1px solid #EEEEEE; background: #F6F6F6; }
.neg-form-cab b { font-size: 13px; color: #181B34; }
.neg-selo { font: 800 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em;
            padding: 5px 11px; border-radius: 20px; background: #F3E9FA; color: #660099;
            border: 1px solid #E0CCEB; white-space: nowrap; }
.neg-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px; }
.neg-campo { display: flex; flex-direction: column; gap: 6px;
             font: 800 10.5px 'JetBrains Mono', ui-monospace, monospace;
             letter-spacing: .07em; text-transform: uppercase; color: #3A3A3A; }
.neg-cx { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
          border: 1px solid #DDDDDD; border-radius: 10px; background: #FFFFFF; }
.neg-cx:focus-within { border-color: #660099; box-shadow: 0 0 0 3px #F3E9FA; }
/* `type="text"` + `inputmode`, nunca `type="number"`: neste projeto o campo
   numérico já transformou R$ 8.000 em R$ 8, e aqui o número vira proposta. */
.neg-cx input { font: 700 16px 'JetBrains Mono', ui-monospace, monospace; color: #181B34;
                border: none; outline: none; width: 100%; background: none; }
.neg-cx i { font: 600 11px 'JetBrains Mono', ui-monospace, monospace; color: #8A8C90;
            font-style: normal; white-space: nowrap; }
.neg-campo small { font: 400 11px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                   text-transform: none; letter-spacing: 0; color: #555555; }
.neg-form-pe { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
               padding: 12px 18px; border-top: 1px solid #EEEEEE; background: #F6F6F6; }
.neg-aviso { margin-right: auto; font: 600 11.5px 'JetBrains Mono', ui-monospace, monospace; color: #8A5705; }

.neg-l { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 0;
         border-bottom: 1px solid #EEEEEE; align-items: baseline; font-size: 12.5px; }
.neg-l:last-child { border-bottom: none; }
.neg-l div { font-weight: 600; color: #181B34; }
.neg-l small { display: block; font: 600 10px 'JetBrains Mono', ui-monospace, monospace;
               color: #555555; letter-spacing: .03em; margin-top: 3px; }
.neg-l b { font: 700 13px 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; color: #181B34; }
.neg-l.soma { border-top: 1px solid #DDDDDD; margin-top: 4px; padding-top: 11px; }
.neg-l.soma div, .neg-l.soma b { font-weight: 800; }

.neg-faixa { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
             margin-top: 13px; padding: 13px 15px; border-radius: 11px; }
.neg-faixa p { margin: 0; font-size: 12px; line-height: 1.6; color: #333333; }
.neg-faixa b { color: #181B34; font-weight: 700; }
.neg-sel { font: 800 9px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em;
           padding: 5px 10px; border-radius: 20px; color: #FFFFFF; white-space: nowrap; }
.neg-faixa.barrado { background: rgba(214,48,75,.05); border: 1px solid rgba(214,48,75,.25); }
.neg-faixa.barrado .neg-sel { background: #D6304B; }
.neg-faixa.alternativa { background: #F6F6F6; border: 1px solid #DDDDDD; }
.neg-faixa.alternativa .neg-sel { background: #660099; }
/* A carta na manga: o preço-piso que existe e não está na proposta. Verde do
   ganho, mas em tom contido — não é o cenário recomendado, é a reserva. */
.neg-faixa.piso { background: rgba(0,200,117,.07); border: 1px solid rgba(0,200,117,.35); }
.neg-faixa.piso .neg-sel { background: #00593C; }
.neg-ganho { color: #00593C; font-weight: 700; }
.neg-rodape { margin-top: 14px; font-size: 11.5px; color: #555555; line-height: 1.7; }
.neg-rodape code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
                   background: #F6F6F6; border: 1px solid #DDDDDD; border-radius: 4px;
                   padding: 1px 5px; color: #4A0070; }

@media (max-width: 1100px) {
  .neg-form { grid-template-columns: repeat(2, 1fr); }
  .neg-portas { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   O DE-PARA DA NEGOCIAÇÃO — aba 15 (GV, 06/10/2026)

   Transposto de `De-para da negociacao.html` (Claude Design). Toda cor vai
   EXPLÍCITA: o `vivo-theme.css` carrega depois e inverte `--bg-panel`,
   achata `--bg-elev` no mesmo branco e junta os três cinzas num `#666` — foi
   assim que a aba MÊS abriu branco sobre branco. Rótulo mono em caixa alta
   fica em `#555555` (7,4:1 contra o `#FAFAFA` da página); `#8A8C90` reprova
   ali, e é a queixa de 25/08 sobre a Rotina.
   ═══════════════════════════════════════════════════════════════════════════ */
.neg-dp { max-width: 1180px; }

/* ── capa: cliente, selos e o interruptor de quem olha a tela ── */
.neg-dp-capa { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
               flex-wrap: wrap; padding-bottom: 15px; border-bottom: 1px solid #DDDDDD; margin-bottom: 22px; }
.neg-dp-cli { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #000000; }
.neg-dp-pins { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.neg-dp-pin { font: 700 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .07em;
              padding: 5px 10px; border-radius: 20px; background: #FFFFFF; color: #333333; border: 1px solid #DDDDDD; }
.neg-dp-pin.on { background: #EFE5F4; color: #660099; border-color: #E0CCEB; }

.neg-olho { display: flex; align-items: center; gap: 11px; padding: 10px 14px; background: #FFFFFF;
            border: 1px solid #DDDDDD; border-radius: 12px; cursor: pointer; text-align: left; }
.neg-olho:hover { border-color: #B280CC; }
.neg-chave { width: 42px; height: 24px; border-radius: 14px; background: #DDDDDD; position: relative;
             flex: none; transition: background .18s; }
.neg-chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
                    border-radius: 50%; background: #FFFFFF; transition: transform .18s;
                    box-shadow: 0 1px 3px rgba(0,0,0,.28); }
body.neg-cliente .neg-chave { background: #660099; }
body.neg-cliente .neg-chave::after { transform: translateX(18px); }
.neg-olho-t { font-size: 12px; font-weight: 700; line-height: 1.3; color: #000000; }
.neg-olho-t i { display: block; font-style: normal; font-size: 11px; font-weight: 400; color: #555555; margin-top: 2px; }

/* ── A FRASE: a única coisa que o cliente precisa ouvir inteira ── */
.neg-frase { font-size: clamp(1.45rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -.035em;
             line-height: 1.18; margin: 0 0 6px; max-width: 24ch; color: #000000; }
.neg-frase .menos { color: #660099; }
.neg-frase .mais  { color: #225C3D; }
.neg-frase-d { font-size: 13px; color: #555555; margin: 0 0 20px; max-width: 70ch; line-height: 1.6; }
.neg-frase-d b { color: #000000; font-weight: 600; }

/* ── O DE-PARA EM TABELA (GV, 06/10/2026, à noite) ───────────────────────
      Substituiu as fitas que afinavam e engordavam. Duas regras do desenho
      moram aqui e não podem ser trocadas sem medir:

      · A COLUNA DA PROPOSTA É ELEVADA, NÃO COLORIDA — fundo branco, borda roxa
        à esquerda e fita no cabeçalho. Lavagem atrás de número obriga a medir
        o contraste de cada tinta contra ela, e esta base já pagou duas vezes
        por isso (25/08 e 02/09).
      · A BARRA MORA DENTRO DA CÉLULA e a largura vem do motor, em estilo
        inline. Sem ela, 6,3% e 28,4% têm a mesma cara na tela.

      🔴 O `th` global do styles.css é JetBrains Mono em caixa alta, e rótulo de
      interface em mono afina o traço (a queixa da Rotina de 25/08). Por isso o
      cabeçalho volta à fonte do corpo em propriedades SEPARADAS: o atalho
      `font: ... inherit` é inválido e some sem erro nenhum. ── */
.neg-bl { margin: 0 0 24px; }
.neg-bl-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.neg-bl-n { font: 800 11px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; color: #660099; }
.neg-bl-t { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: #000000; }
.neg-bl-d { font-size: 12.5px; color: #555555; line-height: 1.6; margin: 0 0 13px; max-width: 88ch; }
.neg-bl-d b { color: #000000; font-weight: 600; }

.neg-tw { background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 16px; overflow-x: auto; }
table.neg-q { width: 100%; border-collapse: collapse; }
table.neg-q7 { min-width: 880px; }
table.neg-q th, table.neg-q td { padding: 12px 15px; text-align: left; vertical-align: middle; }
table.neg-q thead th { background: #F6F6F6; border-bottom: 1px solid #DDDDDD;
                       font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.35;
                       letter-spacing: .02em; text-transform: none; color: #555555; }
table.neg-q thead th small { display: block; font-size: 10px; font-weight: 400; color: #555555; }
table.neg-q th.neg-num, table.neg-q td.neg-num { text-align: right; }
table.neg-q tbody tr + tr td { border-top: 1px solid #EEEEEE; }

.neg-ind { font-size: 13px; font-weight: 600; line-height: 1.35; color: #000000; }
.neg-ind small { display: block; font-size: 11px; font-weight: 400; color: #555555; margin-top: 3px; line-height: 1.45; }
.neg-v { font: 700 14.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -.02em;
         white-space: nowrap; color: #000000; }
.neg-v.g { font-size: 16.5px; font-weight: 800; }
.neg-v.fraco { color: #555555; font-weight: 600; }
.neg-v.verde { color: #225C3D; }
.neg-nd { font-size: 13px; color: #555555; }
.neg-mini { font-size: 10.5px; color: #555555; margin-top: 3px; }
.neg-mini.verde { color: #225C3D; font-weight: 600; }

/* A coluna elevada: branco sobre a zebra, borda roxa à esquerda. */
.neg-pcol { background: #FFFFFF; border-left: 2px solid #660099; }
thead th.neg-pcol { background: #EFE5F4; color: #33004D; }
.neg-rec { display: inline-block; margin-left: 8px; padding: 3px 7px; border-radius: 3px;
           background: #660099; color: #FFFFFF;
           font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; }

/* A barra dentro da célula. A largura é a razão do motor — nunca desenho. */
.neg-bar { height: 6px; border-radius: 3px; background: #EEEEEE; margin-top: 7px; overflow: hidden; }
.neg-bar i { display: block; height: 100%; border-radius: 3px; }
.neg-bar.r i { background: #8A8C90; }   /* o lado de hoje é referência, não tinta de texto */
.neg-bar.p i { background: #660099; }   /* dinheiro proposto */
.neg-bar.d i { background: #225C3D; }   /* dado proposto */

/* A VARIAÇÃO não é vermelho-e-verde por sinal aritmético: dinheiro que cai é
   roxo, dado que sobe é verde, e o vermelho ficou para o que se recusa. */
.neg-d { font: 700 12.5px 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; }
.neg-d.eco  { color: #660099; }
.neg-d.bom  { color: #225C3D; }
.neg-d.ig   { color: #555555; font-weight: 600; }
.neg-d.ruim { color: #B3153F; }
.neg-d small { display: block; font-family: inherit; font-size: 10.5px; font-weight: 400;
               color: #555555; margin-top: 3px; }

/* Linhas de ênfase, de grupo e de soma. */
tr.neg-destaque td { background: #FFFDF7; }
tr.neg-grupo td { background: #F6F6F6; border-top: 1px solid #DDDDDD !important;
                  font: 700 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .09em;
                  color: #555555; padding: 9px 15px; }
tr.neg-sub td { background: #FFFFFF; }
tr.neg-sub .neg-ind { font-weight: 500; }
tr.neg-soma td { border-top: 2px solid #DDDDDD !important; background: #F6F6F6; }
tr.neg-soma .neg-ind { font-weight: 800; }

.neg-selo { display: inline-block; white-space: nowrap; padding: 3px 7px; border-radius: 3px;
            font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; }
.neg-selo.fica { background: #EEEEEE; color: #333333; }
.neg-selo.rep  { background: #E8F2EC; color: #1C4D33; }
.neg-selo.novo { background: #EFE5F4; color: #660099; }
.neg-selo.sai  { background: #FFFFFF; color: #555555; border: 1px solid #DDDDDD; }
.neg-selo.fora { background: #FDECF1; color: #8E1133; }
.neg-selo-d { font-size: 11px; color: #555555; margin-top: 5px; line-height: 1.45; }

/* A nota embaixo da tabela: ela existe para a tabela fechar com o próprio
   título — e para dizer que são DUAS bases, as duas verdadeiras. */
.neg-nota { display: flex; gap: 11px; padding: 12px 15px; border-radius: 12px; margin-top: 13px;
            font-size: 12.5px; line-height: 1.6; background: #F6F6F6; border: 1px solid #DDDDDD; color: #333333; }
.neg-nota.ok { background: #E8F2EC; border-color: #BBD9C8; color: #133026; }
.neg-nota b { color: #000000; font-weight: 700; }
.neg-nota-i { flex: none; font-size: 14px; line-height: 1.35; }

/* ── os rótulos e a prosa do bloco interno (medidor, informado) ── */
.neg-cart-rot { font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em;
                color: #555555; margin-bottom: 11px; }
.neg-cart-d { font-size: 11.5px; color: #555555; line-height: 1.5; margin: 9px 0 0; }
.neg-cart-d b { color: #000000; font-weight: 600; }

/* ── O BLOCO QUE O CLIENTE NÃO PODE VER ── */
.neg-interno { border: 1px solid #DDDDDD; border-radius: 14px; background: #FFFFFF; overflow: hidden; }
.neg-interno-cab { display: flex; align-items: center; gap: 9px; padding: 12px 18px; background: #33004D; color: #FFFFFF; }
.neg-interno-cab b { font-size: 12.5px; }
.neg-interno-cab span { font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em;
                        color: #D9BFE8; margin-left: auto; }
.neg-interno-corpo { padding: 17px 18px; }
.neg-med-rot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.neg-med-t { font-size: 12.5px; font-weight: 700; color: #000000; }
.neg-med-f { font: 700 11px 'JetBrains Mono', ui-monospace, monospace; color: #B3153F; }
.neg-med-f.livre { color: #225C3D; }
.neg-medi { height: 14px; border-radius: 8px; background: #EEEEEE; position: relative; overflow: hidden; }
.neg-medi b { position: absolute; left: 0; top: 0; bottom: 0; background: #660099; border-radius: 8px; }
.neg-medi u { position: absolute; right: 0; top: -3px; bottom: -3px; width: 3px; background: #B3153F;
              border-radius: 2px; text-decoration: none; }
.neg-medi-leg { display: flex; justify-content: space-between; margin-top: 6px;
                font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em; color: #555555; }
.neg-informado { margin-top: 15px; padding-top: 13px; border-top: 1px dashed #DDDDDD; }

/* ── MODO CLIENTE: a tela vira, e o que é seu sai dela ──
      Não é só o bloco interno: a porta da renovação diz "TETO DE 30%" e a
      tabela "Quem tratar" tem o nome de outros clientes dele. */
.neg-avisoc { display: none; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 12px;
              background: rgba(153,204,51,.12); border: 1px solid rgba(153,204,51,.45);
              font-size: 12px; color: #1F4D33; line-height: 1.5; }
.neg-avisoc b { color: #000000; }
.neg-avisoc i { font-style: normal; color: #3A6B4F; margin-left: auto; font-weight: 600; }
body.neg-cliente .neg-avisoc { display: flex; }
body.neg-cliente .neg-interno,
body.neg-cliente .neg-portas,
body.neg-cliente .neg-form-cx,
body.neg-cliente #neg-cand-wrap,
body.neg-cliente .panel-header,
body.neg-cliente .so-gv,
/* ── o que mora FORA da aba e apareceria igual ──
   `.header-right` (os botões do gestor: Copiloto, Convidar GN, Sair),
   `.hero` (os KPIs do time — carteira total, aging, direcionamentos
   atrasados) e `.tabs` (os nomes das outras quinze telas). O cliente não
   precisa ver nada disso, e o GV não ia lembrar de rolar a página antes de
   virar o monitor. A MARCA fica: a tela vira como proposta, e proposta tem
   papel timbrado. */
body.neg-cliente .header-right,
body.neg-cliente .hero,
body.neg-cliente .tabs { display: none; }
body.neg-cliente main { padding-top: 14px; }

@media (max-width: 760px) {
  .neg-dp-capa { align-items: flex-start; }
  /* A tabela não espreme coluna no celular: ela ROLA dentro da caixa. Coluna
     de dinheiro espremida quebra o número no meio, e a largura declarada em
     `table-layout` é piso, não teto. */
  table.neg-q { min-width: 620px; }
  table.neg-q th, table.neg-q td { padding: 10px 12px; }
  .neg-v { font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   O QUE O PARQUE DE LINHAS DISSE — aba 15 (GV, 06/10/2026)

   Caixa de LEITURA: ela explica de onde vieram os seis números do formulário.
   Some inteira no modo cliente — tem o M da fidelidade, os serviços avulsos e
   a conta sem eles, que é conversa de dentro de casa.
   ═══════════════════════════════════════════════════════════════════════════ */
.neg-pq { background: #FFFFFF; border: 1px solid #DDDDDD; border-left: 3px solid #660099;
          border-radius: 14px; padding: 15px 18px; margin-bottom: 14px; }
.neg-pq-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
              flex-wrap: wrap; margin-bottom: 13px; }
.neg-pq-cab b { font-size: 13.5px; color: #000000; }
.neg-pq-cab small { display: block; font-size: 11.5px; color: #555555; margin-top: 3px; line-height: 1.5; }
.neg-pq-cab small i { font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; }
.neg-pq-ok { font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .07em;
             color: #225C3D; background: rgba(153,204,51,.16); border: 1px solid rgba(153,204,51,.45);
             border-radius: 20px; padding: 4px 10px; white-space: nowrap; }
.neg-pq-ok:empty { display: none; }

.neg-pq-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
               margin-bottom: 13px; }
.neg-pq-nums > div { background: #F6F6F6; border-radius: 10px; padding: 10px 12px; }
.neg-pq-nums span { display: block; font: 700 9px 'JetBrains Mono', ui-monospace, monospace;
                    letter-spacing: .09em; color: #555555; margin-bottom: 5px; }
.neg-pq-nums b { font: 800 19px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -.02em; color: #000000; }

.neg-pq-rot { font: 700 9px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .09em;
              color: #555555; margin-bottom: 8px; }
.neg-pq-escolha { margin-bottom: 12px; }
.neg-pq-op { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
             background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 11px; padding: 9px 14px;
             margin: 0 8px 8px 0; cursor: pointer; text-align: left; }
.neg-pq-op:hover { border-color: #B280CC; }
.neg-pq-op b { font: 800 15px 'JetBrains Mono', ui-monospace, monospace; color: #000000; }
.neg-pq-op span { font-size: 11px; color: #555555; }
/* A escolha tem de ser visível SEM cor: o roxo preenchido é o estado. */
.neg-pq-op.on { background: #EFE5F4; border-color: #660099; }
.neg-pq-op.on b { color: #660099; }

.neg-pq-aviso { font-size: 11.5px; line-height: 1.6; color: #8A5705; background: #FFF6E8;
                border: 1px solid #F3D8A8; border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }

.neg-pq-det summary { font-size: 12px; font-weight: 600; color: #660099; cursor: pointer; }
.neg-pq-tab { width: 100%; border-collapse: collapse; margin-top: 10px; }
.neg-pq-tab td { padding: 7px 8px; border-bottom: 1px solid #EEEEEE; font-size: 12px; color: #181B34; }
.neg-pq-tab td.neg-n { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace;
                       font-size: 11.5px; white-space: nowrap; }
.neg-pq-sel { font: 800 8.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .07em;
              padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.neg-pq-sel.plano  { background: #EFE5F4; color: #660099; border: 1px solid #E0CCEB; }
.neg-pq-sel.sva    { background: rgba(153,204,51,.16); color: #225C3D; border: 1px solid rgba(153,204,51,.45); }
.neg-pq-sel.avulso { background: #F6F6F6; color: #555555; border: 1px solid #DDDDDD; }
.neg-pq-l.avulso td { color: #333333; }
.neg-pq-pe { font-size: 11.5px; line-height: 1.6; color: #555555; margin: 10px 0 0; }
.neg-pq-pe b { color: #000000; font-weight: 600; }

/* ── QUAIS CENÁRIOS VÃO À MESA (GV, 09/10/2026) ──
   Fica dentro do `.neg-interno`: a escolha é conversa do GN, e o cliente vê o
   resultado dela, não o seletor. ⚠️ `.neg-cen*` já existiu nesta folha (saiu
   como CSS órfão em 06/10) — conferido que não há mais nada com esse prefixo
   antes de reusar o nome. */
.neg-censel { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 12px;
              padding: 12px 14px; margin-bottom: 12px; }
.neg-cens { display: flex; gap: 9px; flex-wrap: wrap; }
.neg-cen { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
           background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 11px;
           padding: 9px 13px; font-family: inherit; min-width: 168px; }
.neg-cen:hover { border-color: #B280CC; }
.neg-cen b { font-size: 12px; font-weight: 800; color: #000000; }
.neg-cen b i { font: 700 8.5px 'JetBrains Mono', ui-monospace, monospace; font-style: normal;
               letter-spacing: .07em; color: #660099; background: #EFE5F4; border-radius: 4px;
               padding: 2px 5px; margin-left: 5px; vertical-align: middle; }
.neg-cen span { font: 700 11px 'JetBrains Mono', ui-monospace, monospace; color: #333333; }
.neg-cen em { font: 700 8.5px 'JetBrains Mono', ui-monospace, monospace; font-style: normal;
              letter-spacing: .07em; color: #8A5705; background: #FFF6E8; border: 1px solid #F3D8A8;
              border-radius: 4px; padding: 2px 6px; align-self: flex-start; margin-top: 2px; }
/* Escolhido é PREENCHIMENTO, não só borda: numa fileira de quatro, borda sozinha
   obriga a comparar espessura. */
.neg-cen.on { background: #EFE5F4; border-color: #660099; }
.neg-cen.on b { color: #4D0073; }
.neg-cen.base { cursor: default; }
.neg-cen.base:hover { border-color: #660099; }

/* ── A REPARTIÇÃO DE QUEM DESCE DE PLANO (GV, 09/10/2026) ──
   ⚠️ `display:block` é obrigatório: `<i>` é inline, e sem ele a sublinha cola
   no número do `<b>` e os dois viram um terceiro número que não existe — foi
   o "3325 em M17+" da tabela do histórico. A fonte é a da marca, não a mono:
   isto é RÓTULO, e mono em rótulo é o que deu o ar de apagado na Rotina.
   Cor medida contra o #F6F6F6 da célula, não contra branco: 11,7:1. */
.neg-pq-sub { display: block; font-style: normal; font-size: 10.5px; font-weight: 600;
              line-height: 1.4; color: #333333; margin-top: 4px; }

/* A faixa que explica a regra nova. Verde porque ela LIBERA linha — o âmbar do
   `.neg-pq-aviso` ao lado é para o que ficou de fora. Fundo sólido de
   propósito: lavagem em `rgba()` não é fundo para medir contraste. */
.neg-renov { background: #F3F9E6; border: 1px solid #CBE39A; border-radius: 10px;
             padding: 9px 12px; margin-bottom: 12px; }
.neg-renov b { display: block; font-size: 12px; font-weight: 700; color: #225C3D; margin-bottom: 3px; }
.neg-renov span { display: block; font-size: 11.5px; line-height: 1.6; color: #333333; }
.neg-renov code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
                  background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 4px; padding: 1px 4px; }

/* ── O VALOR QUE VAI À MESA (GV, 09/10/2026) ──
   O bloco mora DENTRO do `.neg-interno`, que já some no modo cliente: a
   margem é a última coisa que pode virar para quem está do outro lado. */
.neg-fechado { background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 12px;
               padding: 12px 14px; margin-bottom: 12px; }
.neg-fechado-l { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.neg-fechado-c { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px;
                 font-weight: 600; color: #333333; }
.neg-fechado-c .neg-cx input { width: 118px; }
.neg-fechado-n { display: flex; flex-direction: column; gap: 2px; padding: 7px 11px;
                 background: #F6F6F6; border-radius: 9px; }
.neg-fechado-n span { font: 700 8.5px 'JetBrains Mono', ui-monospace, monospace;
                      letter-spacing: .09em; color: #555555; }
.neg-fechado-n b { font: 800 15px 'JetBrains Mono', ui-monospace, monospace; color: #000000; }
.neg-fechado-n i { font-style: normal; font-size: 10.5px; color: #333333; }
/* Margem positiva é informação, negativa é alerta — e o alerta tem de se ler
   contra o #F6F6F6 da caixa, não contra branco. */
.neg-fechado-n.ok b   { color: #225C3D; }
.neg-fechado-n.ruim   { background: #FCE8ED; }
.neg-fechado-n.ruim b { color: #B3153F; }
.neg-fechado-p { font-size: 11.5px; line-height: 1.6; color: #333333; margin: 10px 0 0; }

/* O bloco que existe para o GN e NÃO vira para o cliente. Mesma regra do
   `.neg-interno`: quem decide é o interruptor do modo cliente, que já é o
   caminho testado desta tela. */
body.neg-cliente .neg-so-interno { display: none; }
.neg-so-selo { display: inline-block; margin-left: 9px; vertical-align: middle;
               font: 700 8.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .08em;
               text-transform: uppercase; color: #8A5705; background: #FFF6E8;
               border: 1px solid #F3D8A8; border-radius: 5px; padding: 3px 7px; }

/* ══════════════════════════════════════════════════════════════════════
   O PAINEL DA ABA 15 (GV, 09/10/2026) — espelhado na ARTE DA PROPOSTA

   Mesma moldura da landing: hero escuro em degradê, rótulos em monoespaçada,
   colunas com cabeça roxa e a faixa escura no fim. Cor de superfície vai
   EXPLÍCITA: `--bg-panel` e `--bg-elev` são invertidos pelo `vivo-theme.css`,
   e foi assim que a aba MÊS abriu branco sobre branco.
   ══════════════════════════════════════════════════════════════════════ */
.npn { border: 1px solid #EEEEEE; border-radius: 20px; overflow: hidden;
       background: #FFFFFF; margin-bottom: 20px; }

.npn-hero { background: linear-gradient(118deg, #1E0030 0%, #3D0060 46%, #660099 100%);
            padding: 24px 28px 26px; color: #FFFFFF; display: grid;
            grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 24px; align-items: center; }
.npn-eyebrow { font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em;
               color: #D9BEE8; margin-bottom: 8px; }
.npn-h { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 800; letter-spacing: -.035em;
         line-height: 1.15; margin: 0; }
.npn-h em { font-style: normal; color: #C79BE0; }
.npn-p { font-size: 12.5px; line-height: 1.6; color: #E4D4EE; margin: 9px 0 0; max-width: 52ch; }
.npn-p b { color: #FFFFFF; font-weight: 700; }
.npn-selos { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 15px; }
.npn-selo { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.22); border-radius: 10px; padding: 8px 11px; }
.npn-selo-ic { width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.18);
               flex: none; display: flex; align-items: center; justify-content: center;
               font: 800 9.5px 'JetBrains Mono', ui-monospace, monospace; color: #FFFFFF; }
.npn-selo-t { font-size: 11.5px; font-weight: 700; line-height: 1.3; color: #FFFFFF; }
.npn-selo-t small { display: block; font-size: 10px; font-weight: 400; color: #DCC8E8; margin-top: 1px; }
.npn-capa { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
            border-radius: 14px; padding: 16px 18px; text-align: right; }
.npn-capa-r { font: 700 9px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .13em; color: #D9BEE8; }
.npn-capa-v { font: 800 clamp(1.4rem, 3.4vw, 2rem) 'JetBrains Mono', ui-monospace, monospace;
              letter-spacing: -.04em; line-height: 1.05; margin-top: 7px; }
.npn-capa-d { font-size: 11px; color: #DCC8E8; margin-top: 6px; line-height: 1.5; }

.npn-bl { padding: 22px 28px; border-top: 1px solid #EEEEEE; }
.npn-bl-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.npn-bl-n { font: 800 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .13em;
            color: #660099; background: #EFE5F4; padding: 4px 8px; border-radius: 5px; }
.npn-bl-t { font-size: 1.02rem; font-weight: 800; letter-spacing: -.03em; }
.npn-d { font-size: 12px; line-height: 1.6; color: #555555; margin: 0 0 16px; max-width: 92ch; }
.npn-d b { color: #000000; font-weight: 600; }
.npn-pe { font-size: 11.5px; line-height: 1.6; color: #555555; margin: 12px 0 0; }
.npn-pe b { color: #000000; font-weight: 600; }

/* ── a esteira: as colunas de cenário da arte ── */
.npn-esteira { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px; }
.npn-et { border: 1px solid #DDDDDD; border-radius: 14px; overflow: hidden; background: #FFFFFF;
          display: flex; flex-direction: column; }
.npn-et-h { padding: 10px 13px; background: #F6F6F6; border-bottom: 1px solid #EEEEEE; }
.npn-et-h b { display: block; font-size: 12px; font-weight: 800; letter-spacing: -.01em; }
.npn-et-h small { display: block; font-size: 10.5px; color: #555555; margin-top: 2px; line-height: 1.4; }
/* `justify-content: space-between` prende o rodapé embaixo: assim a diferença
   de altura entre os cartões fica no ESPAÇO, não no número, que continua
   alinhado com o dos vizinhos. */
.npn-et-c { padding: 14px 13px 13px; display: flex; flex-direction: column; gap: 8px; flex: 1;
            justify-content: space-between; }
.npn-et-selo + .npn-et-v { margin-top: 2px; }
.npn-et-v { font: 800 1.9rem 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -.045em; line-height: 1; }
.npn-et-sub { font-size: 11px; color: #555555; line-height: 1.5; }
.npn-et-bar { height: 6px; border-radius: 4px; background: #EEEEEE; overflow: hidden; }
.npn-et-bar i { display: block; height: 100%; background: #660099; border-radius: 4px; }
.npn-et.forte .npn-et-h { background: linear-gradient(118deg, #4D0073, #660099); border-bottom-color: #660099; }
.npn-et.forte .npn-et-h b { color: #FFFFFF; }
.npn-et.forte .npn-et-h small { color: #E4D4EE; }
.npn-et.forte .npn-et-v { color: #660099; }
/* O estado vazio que DEVIA ter número é alerta, não ausência. */
.npn-et.vazia { border-color: #F0C9D6; background: #FDECF1; }
.npn-et.vazia .npn-et-h { background: #FADCE5; border-bottom-color: #F0C9D6; }
.npn-et.vazia .npn-et-v { color: #B3153F; }
.npn-et-selo { align-self: flex-start; font: 700 8.5px 'JetBrains Mono', ui-monospace, monospace;
               letter-spacing: .08em; padding: 3px 7px; border-radius: 5px; background: #FDECF1;
               color: #B3153F; border: 1px solid #F0C9D6; }

/* ── o filtro por GN ── */
.npn-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.npn-chip { display: inline-flex; align-items: center; gap: 6px; background: #FFFFFF;
            border: 1px solid #DDDDDD; border-radius: 999px; padding: 6px 12px;
            font: 600 11.5px inherit; color: #000000; cursor: pointer; }
.npn-chip i { font: 700 10px 'JetBrains Mono', ui-monospace, monospace; font-style: normal; color: #555555; }
.npn-chip:hover { border-color: #B280CC; }
.npn-chip.on { background: #660099; border-color: #660099; color: #FFFFFF; }
.npn-chip.on i { color: #E4D4EE; }

/* ⚠️ A tabela precisa do PRÓPRIO scroll: `.npn` tem `overflow:hidden` para
   arredondar os cantos, e sem isto as últimas colunas são cortadas no celular
   — sem barra e sem jeito de alcançar. É a cicatriz do modal do GV. */
.npn-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.npn-tab { width: 100%; border-collapse: collapse; min-width: 600px; }
.npn-tab th, .npn-tab td { padding: 10px 12px; text-align: left; vertical-align: middle; }
.npn-tab thead th { font: 700 10px inherit; color: #555555; letter-spacing: .02em;
                    border-bottom: 1px solid #EEEEEE; white-space: nowrap; text-transform: none; }
.npn-tab th.npn-n, .npn-tab td.npn-n { text-align: right; }
.npn-tab tbody tr + tr td { border-top: 1px solid #EEEEEE; }
.npn-cl { cursor: pointer; }
.npn-cl:hover td { background: #FCFAFD; }
.npn-gn { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.npn-v { font: 700 12.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -.02em; }
.npn-v.g { font-size: 13.5px; font-weight: 800; }
.npn-v.eco { color: #225C3D; }
.npn-v small, .npn-tab td small { display: block; font: 400 10px inherit; color: #555555; margin-top: 2px; }
.npn-barra { display: block; height: 6px; border-radius: 4px; background: #EEEEEE;
             overflow: hidden; margin-top: 5px; min-width: 60px; }
.npn-barra i { display: block; height: 100%; background: linear-gradient(90deg, #8A2BBE, #660099); border-radius: 4px; }
.npn-cli { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.npn-fora { display: inline-block; font: 700 8px 'JetBrains Mono', ui-monospace, monospace;
            letter-spacing: .07em; font-style: normal; padding: 2px 5px; border-radius: 4px;
            background: #F6F6F6; color: #555555; border: 1px solid #DDDDDD; margin-left: 6px; }
.npn-nd { color: #8A8C90; font-size: 11.5px; }
.npn-vazio { padding: 24px 12px !important; color: #555555; font-size: 12.5px; }

.npn-pill { display: inline-flex; align-items: center; gap: 5px;
            font: 700 9px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .07em;
            padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.npn-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.npn-pill.p-lista  { background: #F6F6F6; color: #555555; border: 1px solid #DDDDDD; }
.npn-pill.p-parque { background: #FFF6E8; color: #8A5705; border: 1px solid #F3D8A8; }
.npn-pill.p-prop   { background: #EFE5F4; color: #660099; border: 1px solid #E0CCEB; }
.npn-pill.p-apr    { background: #E8F2EC; color: #225C3D; border: 1px solid #CBE0D4; }

.npn-busca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.npn-cx { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid #DDDDDD;
          border-radius: 10px; padding: 9px 13px; flex: 1; min-width: 220px; }
.npn-cx i { font: 700 10px 'JetBrains Mono', ui-monospace, monospace; font-style: normal; color: #555555; }
.npn-cx input { border: none; outline: none; font: 600 12.5px inherit; flex: 1; background: none; color: #000000; }
.npn-conta { font-size: 11.5px; color: #555555; }
.npn-conta b { color: #000000; font-weight: 700; }

.npn-reco { margin: 0 28px 24px; background: linear-gradient(118deg, #1E0030 0%, #3D0060 55%, #4D0073 100%);
            border-radius: 16px; padding: 18px 22px; color: #FFFFFF; display: grid;
            grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.npn-reco-r { font: 700 9px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .13em; color: #D9BEE8; }
.npn-reco-t { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.03em; margin: 7px 0 6px; }
.npn-reco p { font-size: 12px; line-height: 1.6; color: #E4D4EE; margin: 0; max-width: 62ch; }
.npn-reco p b { color: #FFFFFF; font-weight: 700; }
.npn-reco-n { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
.npn-reco-n div { text-align: right; }
.npn-reco-n b { display: block; font: 800 1.35rem 'JetBrains Mono', ui-monospace, monospace;
                letter-spacing: -.04em; line-height: 1; }
.npn-reco-n span { display: block; font-size: 10.5px; color: #DCC8E8; margin-top: 4px; }

@media (max-width: 860px) {
  .npn-hero { grid-template-columns: 1fr; padding: 20px 18px 22px; }
  .npn-capa { text-align: left; }
  .npn-bl { padding: 18px; }
  .npn-reco { grid-template-columns: 1fr; margin: 0 18px 20px; }
  .npn-reco-n { justify-content: flex-start; }
  .npn-reco-n div { text-align: left; }
}

/* 🔴 O PAINEL TEM O NOME DE TODOS OS CLIENTES DO TIME. Virar o monitor com ele
   aberto é o popup de retornos de 07/10 de novo, com seis nomes na frente do
   visitante. */
body.neg-cliente #neg-painel { display: none; }

/* ── A GAVETA DO HISTÓRICO (09/10/2026) ──
   Era uma tabela aberta de 1.229 px repetindo, uma linha por importação, os
   mesmos clientes que o painel do topo mostra uma vez. Fechada, o resumo diz
   quantas são e o que tem dentro — esconder o segundo é o que cura
   duplicidade; tirar seria perder o ✕ e a data de cada planilha. */
.neg-hist-det > summary { cursor: pointer; padding: 12px 16px; background: #FFFFFF;
                          border: 1px solid #DDDDDD; border-radius: 12px;
                          font-size: 13px; font-weight: 700; color: #000000; }
.neg-hist-det > summary:hover { border-color: #B280CC; }
.neg-hist-det > summary small { display: block; font-size: 11px; font-weight: 400;
                                color: #555555; margin-top: 3px; }
.neg-hist-det[open] > summary { border-radius: 12px 12px 0 0; border-bottom-color: #EEEEEE; }

body.neg-cliente #neg-parque { display: none; }

/* ── O histórico das negociações (aba 15, 06/10/2026) ── */
.neg-hist-l { cursor: pointer; }
.neg-hist-l:hover { background: #F6F6F6; }
.neg-hist-l td small { display: block; font: 600 10px 'JetBrains Mono', ui-monospace, monospace;
                       color: #555555; margin-top: 3px; }
.neg-h-ok  { color: #225C3D; }
/* Desconto negativo é proposta mais cara — e tem de se ler como alerta, não
   como um número qualquer da coluna. */
.neg-h-nao { color: #B3153F; }
.neg-h-sem { font: 600 10.5px 'JetBrains Mono', ui-monospace, monospace; color: #8A5705;
             background: #FFF6E8; border: 1px solid #F3D8A8; border-radius: 20px; padding: 3px 9px; }

/* ── EXCLUIR A SIMULAÇÃO (06/10/2026) ──
   O ✕ divide a célula com o "abrir →" e fica DISCRETO até o mouse chegar na
   linha: ação que apaga não disputa atenção com a ação que o GV faz o dia
   inteiro. Mas não é invisível — some de verdade (`opacity:0`) só onde há
   mouse, porque no toque não existe hover e o botão precisa estar lá.
   🔴 Alvo de 30px: a linha inteira é clicável e abre a negociação, então um
   alvo pequeno demais erra para dentro do registro que ia ser apagado. */
.neg-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.neg-x { width: 30px; height: 30px; flex: none; border-radius: 8px; cursor: pointer;
         background: #FFFFFF; border: 1px solid #DDDDDD; color: #555555;
         font: 700 13px 'JetBrains Mono', ui-monospace, monospace; line-height: 1;
         display: flex; align-items: center; justify-content: center;
         transition: color .15s, border-color .15s, background .15s, opacity .15s; }
.neg-x:hover, .neg-x:focus-visible { color: #B3153F; border-color: #E79DB3; background: #FDECF1; }
@media (hover: hover) {
  .neg-x { opacity: 0; }
  .neg-hist-l:hover .neg-x, .neg-x:focus-visible { opacity: 1; }
}
.neg-hist-faixa { font-size: 12px; line-height: 1.6; color: #333333; background: #EFE5F4;
                  border: 1px solid #E0CCEB; border-radius: 11px; padding: 10px 14px; margin-bottom: 14px; }
.neg-hist-faixa b { color: #000000; font-weight: 700; }
body.neg-cliente #neg-hist-wrap { display: none; }

/* Campo que a regra desligou: ele continua visível (sumir faria procurar), mas
   diz que está fora da conta. */
.neg-campo-off { opacity: .55; }
.neg-campo-off input { background: #F6F6F6; cursor: not-allowed; }
.neg-aviso-ok { color: #225C3D; }

/* ── Proposta que passa do teto: existe, e precisa de VP ── */
.neg-vp { font-size: 12px; line-height: 1.6; color: #7A0F2B; background: rgba(204,31,89,.07);
          border: 1px solid rgba(204,31,89,.35); border-radius: 10px; padding: 10px 13px; margin: 9px 0; }
.neg-vp b { color: #000000; font-weight: 700; }
.neg-medi.estourou b { background: #B3153F; }

/* O preço de exceção: âmbar, porque é carta na manga que custa um pedido de
   aprovação — não é o verde do ganho já conquistado. */
.neg-faixa.excecao { background: #FFF6E8; border: 1px solid #F3D8A8; }
.neg-faixa.excecao .neg-sel { background: #8A5705; }

/* ══════════════════════════════════════════════════════════════════════════
   ABA 17 · NEGOCIAÇÃO NO COCKPIT DO GN (07/10/2026)

   A topologia B do desenho `Negociacao do GN - dashboard.html`: quatro
   números, a régua dos três passos e UMA lista por cliente com o estado dela.
   O resto — proposta, parque, modo cliente — reusa as classes `.neg-*` que já
   estavam aqui, que é o motivo de a aba do GN não ter trazido um CSS próprio.

   🔴 COR DE SUPERFÍCIE VAI EXPLÍCITA. `--bg-elev` é IGUAL a `--bg-panel`
   (#FFFFFF) depois que o `vivo-theme.css` carrega, e `--border` é #EEEEEE
   (1,19:1 contra o branco): quem pede destaque com eles não ganha destaque
   nenhum. Tudo abaixo é hexadecimal, medido contra o fundo REAL da página
   (#FAFAFA), não contra branco puro.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── os quatro números ── */
.neg-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px; margin-bottom: 14px; }
.neg-num-c { background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 14px; padding: 14px 16px; }
/* Rótulo em Figtree e #555555 (7,1:1 contra o branco do cartão). Mono em
   rótulo é o que dá o ar de apagado — a queixa de 25/08 que já voltou duas
   vezes; aqui ela fica só no número. */
.neg-num-r { font-size: 11px; font-weight: 700; color: #555555; }
.neg-num-v { font: 800 1.55rem/1 'JetBrains Mono', ui-monospace, monospace;
             letter-spacing: -.03em; margin-top: 5px; color: #000000; }
.neg-num-d { font-size: 11.5px; color: #555555; margin-top: 6px; line-height: 1.45; }
.neg-num-d b { color: #000000; font-weight: 600; }
.neg-num-c.a .neg-num-v { color: #660099; }
.neg-num-c.c .neg-num-v { color: #225C3D; }
/* O cartão do que TRAVA a proposta é âmbar, não vermelho: é pendência de
   planilha, não erro. Vermelho aqui gastaria o sinal que o VP usa. */
.neg-num-c.alerta { background: #FFF6E8; border-color: #F3DDB8; }
.neg-num-c.alerta .neg-num-v { color: #8A4B00; }

/* ── a régua dos três passos ── */
.neg-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 12px; margin-bottom: 14px; }
.neg-passo { background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 14px; padding: 14px 16px; }
.neg-passo.feito { background: #E8F2EC; border-color: #C6DFD0; }
.neg-passo.agora { border-color: #660099; box-shadow: 0 0 0 3px #EFE5F4; }
.neg-passo-n { width: 24px; height: 24px; border-radius: 8px; display: flex;
               align-items: center; justify-content: center;
               font: 800 11px 'JetBrains Mono', ui-monospace, monospace;
               background: #F6F6F6; color: #555555; border: 1px solid #DDDDDD; }
.neg-passo.feito .neg-passo-n { background: #225C3D; color: #FFFFFF; border-color: #225C3D; }
.neg-passo.agora .neg-passo-n { background: #660099; color: #FFFFFF; border-color: #660099; }
.neg-passo-t { font-size: 13px; font-weight: 700; margin-top: 9px; letter-spacing: -.01em; }
.neg-passo-d { font-size: 11.5px; color: #555555; line-height: 1.5; margin-top: 4px; }
.neg-passo-d b { color: #000000; font-weight: 600; }

/* ── o estado de cada cliente na lista ──
   Quatro selos, e eles precisam ser distinguíveis de relance: faixa que o
   olho não separa é faixa que não existe (o caso do `ag-atencao` × `ag-alerta`,
   que eram praticamente a mesma cor). */
.neg-estado { display: inline-block; white-space: nowrap; border-radius: 20px;
              padding: 5px 10px; border: 1px solid #DDDDDD; background: #FFFFFF; color: #555555;
              font: 700 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .05em; }
.neg-estado.vazio  { background: #F6F6F6; }
.neg-estado.lido   { background: #EFE5F4; border-color: #E0CCEB; color: #660099; }
.neg-estado.pronta { background: #E8F2EC; border-color: #C6DFD0; color: #225C3D; }
.neg-estado.feita  { background: #225C3D; border-color: #225C3D; color: #FFFFFF; }
/* A linha aberta fica marcada: sem isso, com a proposta desenhada embaixo, o
   GN perde de vista de QUEM é o número que está olhando. */
tr.neg-l-aberta > td { background: #FBF7FD; box-shadow: inset 3px 0 0 #660099; }

/* ── o formulário, fechado até precisar ── */
.neg-form-det { background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 14px;
                padding: 0 16px; margin-bottom: 14px; }
.neg-form-det > summary { cursor: pointer; padding: 13px 0; font-size: 12.5px; color: #555555;
                          list-style: none; }
.neg-form-det > summary::-webkit-details-marker { display: none; }
.neg-form-det > summary::before { content: '▸ '; color: #660099; font-weight: 700; }
.neg-form-det[open] > summary::before { content: '▾ '; }
.neg-form-det > summary b { color: #000000; }
.neg-form-det[open] { padding-bottom: 16px; }

/* ── o quarto estado: marcar que a proposta foi à mesa ── */
.neg-apr { margin-left: 10px; cursor: pointer; border-radius: 9px; padding: 6px 11px;
           font: 700 11px 'Figtree', system-ui, sans-serif;
           background: #FFFFFF; color: #660099; border: 1px solid #660099; }
.neg-apr:hover { background: #EFE5F4; }
.neg-apr.on { background: #225C3D; border-color: #225C3D; color: #FFFFFF; }
.neg-apr.on:hover { background: #1A4A30; }

/* ── O MODO CLIENTE VALE AQUI TAMBÉM ──
   O que precisa sumir ao virar a tela não é só o bloco interno: os quatro
   números são gerenciais, a régua conta o processo e a LISTA TEM O NOME DE
   OUTROS CLIENTES — é o pior item desta tela para um visitante ler. */
body.neg-cliente #neg-numeros,
body.neg-cliente #neg-passos,
body.neg-cliente #neg-lista-wrap,
body.neg-cliente #neg-hist-cliente,
body.neg-cliente .neg-form-det { display: none; }

/* 🔴 O POPUP QUE JÁ ESTAVA ABERTO QUANDO A TELA VIROU (07/10/2026).
   `lembretes-popup.js` passou a não ABRIR popup com a tela virada — e isso
   não bastava: medido no homolog, o popup de retornos subiu antes de o GN
   virar o monitor e ficou lá, com o NOME DE SEIS CLIENTES dele na frente do
   visitante. Guard de abertura não alcança o que já está na tela.
   `!important` porque os três overlays carregam `display:flex` INLINE, e
   inline vence folha de estilo. Eles não são fechados, só escondidos: ao sair
   do modo cliente o GN volta exatamente para onde estava.
   O `.dtr-modal` entra pela mesma razão — ele traz a tratativa de outro
   cliente, e é o mesmo z-index 900 que já brigou com o popup em 25/08. */
body.neg-cliente #ret-overlay,
body.neg-cliente #lp-overlay,
body.neg-cliente #lgv-overlay,
body.neg-cliente .dtr-modal { display: none !important; }

/* A FAIXA DA PROPOSTA GRAVADA É CONVERSA INTERNA. Ela diz "números gravados
   naquele dia, clique em Montar a proposta para refazer" e carrega o botão de
   marcar como apresentada — texto de processo e um botão que o cliente não
   deve ver nem alcançar. Vale para as duas telas: a do GV tinha a faixa
   aparecendo na tela virada desde 06/10. */
body.neg-cliente .neg-hist-faixa { display: none; }

@media (max-width: 1100px) {
  .neg-nums { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .neg-nums, .neg-passos { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   A ABA 15 COM A CARA DA LANDING PAGE, E AS ALTAS (GV, 08/10/2026)

   *"gostaria que a temática da página 15 do gv e a página de negociação de
   móvel ficasse com um landpage deste formato que te enviei, sem perder a
   essência da página"*

   🔴 **COR DE SUPERFÍCIE VAI EXPLÍCITA.** `--bg-elev` é IGUAL a `--bg-panel`
   (`#FFFFFF`) depois do `vivo-theme.css`, e `--border` é `#EEEEEE` — 1,19:1
   contra o branco. Quem pedir destaque com token aqui não ganha destaque
   nenhum, e foi assim que a Rotina abriu branco sobre branco em 25/08.

   🔴 **E RÓTULO FICA FORA DA MONOESPAÇADA.** O `th` global desta folha é
   JetBrains Mono em caixa alta; mono + caixa alta + `letter-spacing` afina o
   traço e dá o ar de apagado que o GV reclamou. Onde o cabeçalho precisa sair
   da mono, as três propriedades vão SEPARADAS — `font: … inherit` é inválido
   e some sem erro.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── O HERO ── a capa da proposta. A frase que já existia mora DENTRO dele. */
/* ⚠️ `position: static` ESCRITO À MÃO é a cicatriz de 08/10: como `<header>`,
   a regra de TAG da linha 82 deste arquivo dava a ele `sticky` + `z-index:100`
   e o hero cobria o cabeçalho da tabela do resumo. Hoje ele é uma `<div>` e
   isto é a rede para o dia em que alguém trocar a tag de volta. */
.neg-hero { position: static; background: linear-gradient(118deg, #1E0030 0%, #3D0060 46%, #660099 100%);
            border-radius: 18px; padding: 26px 28px 28px; margin: 0 0 22px; color: #FFFFFF;
            display: block; backdrop-filter: none; box-shadow: none; border-bottom: none; }
.neg-hero-ey { font: 700 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em;
               color: #D9BEE8; margin-bottom: 10px; }
.neg-hero .neg-frase { color: #FFFFFF; margin: 0 0 10px; }
.neg-hero .neg-frase .menos { color: #D7A8EE; }
.neg-hero .neg-frase .mais  { color: #BFE88F; }
.neg-hero .neg-frase-d { color: #E4D4EE; margin: 0; max-width: 62ch; }
.neg-hero .neg-frase-d b { color: #FFFFFF; font-weight: 700; }
.neg-hero-selos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.neg-hero-selo { display: flex; align-items: center; gap: 9px; padding: 10px 13px;
                 background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
                 border-radius: 11px; }
.neg-hero-ic { width: 26px; height: 26px; flex: none; border-radius: 8px; display: flex;
               align-items: center; justify-content: center; background: rgba(255,255,255,.18);
               font: 800 10.5px 'JetBrains Mono', ui-monospace, monospace; color: #FFFFFF; }
.neg-hero-t { font-size: 11.5px; font-weight: 700; line-height: 1.35; color: #FFFFFF; }
.neg-hero-t small { display: block; font-size: 10.5px; font-weight: 400; color: #DCC8E8; margin-top: 1px; }
.neg-hero-pins { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.neg-hpin { font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .07em;
            padding: 5px 10px; border-radius: 20px; color: #F0E4F7;
            background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26); }

/* ── O RESUMO EXECUTIVO — três colunas ──
   A coluna da proposta é ELEVADA, não só colorida: cabeça roxa, borda à
   esquerda e fundo próprio. ⚠️ A cabeça precisa de especificidade MAIOR que
   `.neg-r thead th`, senão ela abre cinza com o subtítulo quase branco por
   cima — 1,1:1, sem um erro de console. Foi o que o desenho pegou em 08/10. */
.neg-rw { overflow-x: auto; border-radius: 14px; border: 1px solid #EEEEEE; background: #FFFFFF; }
table.neg-r { width: 100%; border-collapse: collapse; min-width: 720px; }
table.neg-r th, table.neg-r td { padding: 13px 15px; text-align: left; vertical-align: middle; }
table.neg-r thead th { background: #F6F6F6; border-bottom: 1px solid #DDDDDD; text-align: center;
                       font-family: 'Figtree', system-ui, sans-serif; font-size: 11px;
                       font-weight: 700; color: #555555; letter-spacing: .02em; text-transform: none; }
table.neg-r thead th:first-child { text-align: left; }
table.neg-r tbody tr + tr td { border-top: 1px solid #EEEEEE; }
table.neg-r thead th.neg-col-at { background: #F6F6F6; color: #333333; }
table.neg-r thead th.neg-col-pr { background: #660099; color: #FFFFFF; }
table.neg-r thead th.neg-col-al { background: #33004D; color: #FFFFFF; }
.neg-col-h { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.neg-col-s { display: block; font-size: 11px; font-weight: 400; margin-top: 4px; line-height: 1.45; }
table.neg-r thead th.neg-col-at .neg-col-s { color: #555555; }
table.neg-r thead th.neg-col-pr .neg-col-s,
table.neg-r thead th.neg-col-al .neg-col-s { color: #EADCF4; }
.neg-r-ind { font-size: 13px; font-weight: 600; line-height: 1.35; }
.neg-r-ind { display: flex; align-items: flex-start; gap: 10px; }
.neg-r-ind small { display: block; font-size: 11px; font-weight: 400; color: #555555;
                   margin-top: 3px; line-height: 1.45; }
.neg-r-ic { width: 26px; height: 26px; flex: none; border-radius: 8px; display: flex;
            align-items: center; justify-content: center; background: #EFE5F4; color: #660099;
            font: 800 10px 'JetBrains Mono', ui-monospace, monospace; }
.neg-r-n { text-align: center; }
td.neg-rpr { background: #FDFBFE; border-left: 2px solid #660099; }
td.neg-ral { background: #FBF9FC; }
.neg-rv { display: block; font: 700 16px 'JetBrains Mono', ui-monospace, monospace;
          letter-spacing: -.025em; white-space: nowrap; }
.neg-rv-d { display: block; font-size: 11px; color: #555555; margin-top: 3px; }
.neg-reco { display: inline-block; background: #E8F2EC; border: 1px solid #C6DFD0;
            border-radius: 10px; padding: 8px 12px; min-width: 124px; }
.neg-reco .neg-rv { color: #1C4D33; }
.neg-reco .neg-rv-d { color: #27553C; }
.neg-mais  { font: 700 11px 'JetBrains Mono', ui-monospace, monospace; color: #1C4D33; }
.neg-menos { font: 700 11px 'JetBrains Mono', ui-monospace, monospace; color: #660099; }
.neg-pior  { font: 700 11px 'JetBrains Mono', ui-monospace, monospace; color: #A3153F; }
table.neg-r tr.neg-soma td { border-top: 2px solid #DDDDDD !important; background: #F6F6F6; }
table.neg-r tr.neg-grupo td { background: #F6F6F6; border-top: 1px solid #DDDDDD !important;
                              padding: 9px 15px; color: #555555;
                              font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace;
                              letter-spacing: .11em; }

/* ── O BLOCO DAS ALTAS, no formulário ── */
.neg-altas { background: #FFFFFF; border: 1px solid #E0CCEB; border-radius: 13px;
             overflow: hidden; margin: 0 0 14px; }
.neg-altas-h { display: flex; align-items: center; justify-content: space-between; gap: 12px;
               flex-wrap: wrap; padding: 12px 15px; background: #EFE5F4;
               border-bottom: 1px solid #E0CCEB; }
.neg-altas-t { font-size: 13px; font-weight: 800; color: #33004D; }
.neg-altas-t small { display: block; font-size: 11.5px; font-weight: 400; color: #4A3356;
                     margin-top: 3px; line-height: 1.45; max-width: 76ch; }
.neg-altas-t small b { color: #33004D; font-weight: 700; }
.neg-altas-bt { font: 700 11.5px 'Figtree', system-ui, sans-serif; padding: 9px 14px;
                border-radius: 9px; border: 1px solid #660099; background: #660099;
                color: #FFFFFF; cursor: pointer; white-space: nowrap; }
.neg-altas-bt:hover { background: #4C1D95; border-color: #4C1D95; }
table.neg-alta-tab { width: 100%; border-collapse: collapse; }
table.neg-alta-tab th, table.neg-alta-tab td { padding: 10px 15px; text-align: left; vertical-align: middle; }
table.neg-alta-tab thead th { font-family: 'Figtree', system-ui, sans-serif; font-size: 11px;
                              font-weight: 700; color: #555555; letter-spacing: .02em;
                              text-transform: none; background: #FFFFFF;
                              border-bottom: 1px solid #EEEEEE; }
table.neg-alta-tab th.neg-n, table.neg-alta-tab td.neg-n { text-align: right; }
table.neg-alta-tab tbody tr + tr td { border-top: 1px solid #EEEEEE; }
tr.neg-alta-soma td { background: #F6F6F6; border-top: 2px solid #DDDDDD !important;
                      font-weight: 800; font-size: 12.5px; }
.neg-alta-sel { font: 700 13px 'JetBrains Mono', ui-monospace, monospace; padding: 7px 10px;
                border: 1px solid #DDDDDD; border-radius: 8px; background: #FFFFFF; color: #000000; }
/* ⚠️ `type="text"`, nunca `number`: neste projeto o campo numérico já comeu
   casa decimal de dinheiro. Aqui é contagem, mas a regra vale para o teclado. */
.neg-alta-qt { width: 64px; text-align: center; font: 700 13px 'JetBrains Mono', ui-monospace, monospace;
               padding: 7px 8px; border: 1px solid #DDDDDD; border-radius: 8px; background: #FFFFFF; }
.neg-altas-nota { display: flex; gap: 10px; align-items: flex-start; padding: 11px 15px;
                  background: #E8F2EC; border-top: 1px solid #C6DFD0;
                  font-size: 12px; color: #17402A; line-height: 1.55; }
.neg-altas-nota b { color: #0F2E1D; }
.neg-altas-i { flex: none; font: 800 11px 'JetBrains Mono', ui-monospace, monospace; margin-top: 1px; }
/* A faixa do grupo das altas no analítico, e o selo da linha. */
tr.neg-g-alta td { background: #EFE5F4 !important; color: #660099 !important; }
.neg-selo.alta { background: #660099; color: #FFFFFF; }

/* ── O QUE MUDA NA PRÁTICA ── */
.neg-bens { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0;
            border: 1px solid #EEEEEE; border-radius: 14px; overflow: hidden; background: #FFFFFF; }
.neg-ben { padding: 18px; border-right: 1px solid #EEEEEE; }
.neg-ben:last-child { border-right: none; }
.neg-ben-ic { width: 40px; height: 40px; border-radius: 50%; background: #660099; color: #FFFFFF;
              display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
              font: 800 12.5px 'JetBrains Mono', ui-monospace, monospace; }
.neg-ben-t { margin: 0 0 6px; font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; color: #000000; }
.neg-ben-p { margin: 0; font-size: 12px; line-height: 1.6; color: #555555; }
.neg-ben-p b { color: #000000; font-weight: 600; }

/* ── A FAIXA DA RECOMENDAÇÃO ── */
.neg-recom { background: linear-gradient(104deg, #1E0030 0%, #44006B 58%, #660099 100%);
           border-radius: 16px; padding: 22px 24px; color: #FFFFFF; display: grid;
           grid-template-columns: minmax(0, 1.25fr) auto; gap: 24px; align-items: center; }
.neg-recom-e { display: flex; gap: 15px; align-items: flex-start; }
.neg-recom-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex;
              align-items: center; justify-content: center; background: rgba(255,255,255,.16);
              font-size: 17px; }
.neg-recom-r { font: 700 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; color: #D9BEE8; }
.neg-recom-t { margin: 6px 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.25; }
.neg-recom-p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #E4D4EE; max-width: 52ch; }
.neg-recom-nums { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.neg-rn-r { font-size: 11px; font-weight: 600; color: #E4D4EE; }
.neg-rn-v { font: 800 1.3rem 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -.03em;
            line-height: 1.05; margin-top: 4px; white-space: nowrap; }
.neg-rn-d { font-size: 10.5px; color: #D9BEE8; margin-top: 3px; }
.neg-alt-f { display: flex; align-items: center; justify-content: space-between; gap: 18px;
             flex-wrap: wrap; margin-top: 11px; padding: 14px 18px; background: #FFFFFF;
             border: 1px solid #DDDDDD; border-radius: 13px; }
.neg-alt-f-t { font-size: 13px; font-weight: 700; color: #000000; }
.neg-alt-f-t small { display: block; font-size: 11.5px; font-weight: 400; color: #555555;
                     margin-top: 3px; line-height: 1.5; }

/* Os PRÓXIMOS PASSOS reusam `.neg-passo`, que ficou órfã quando a topologia
   própria da aba 17 saiu em 07/10. São quatro agora, e não três. */
.neg-passos { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

@media (max-width: 900px) {
  .neg-recom { grid-template-columns: minmax(0, 1fr); }
  .neg-ben { border-right: none; border-bottom: 1px solid #EEEEEE; }
  .neg-ben:last-child { border-bottom: none; }
  .neg-hero { padding: 20px 18px 22px; }
}

/* ══ A MESA DA NEGOCIAÇÃO (22/10/2026) ══
   Desenhada em shadow DOM por `negociacao-mesa.js`: o CSS dela mora lá. Aqui
   só o que toca o documento: a tela do cliente é uma camada `position:fixed`
   dentro da própria mesa, e a classe `neg-cliente` no body só serve para
   esconder o cabeçalho da página e os popups. */