:root{
  --forest:#3E5147;--sage:#85A17F;--ivory:#F7FCF6;--clay:#C8A590;--caramel:#A16F44;
  --forest-deep:#2C3A33;--sage-pale:#EAF1E8;--caramel-pale:#F3E9DE;
  --bg-page:var(--ivory);--surface-card:#FFFFFF;--surface-card-secondary:#F0F5EE;
  --border-default:#E1E9DF;--border-strong:#CDD9CA;
  --text-primary:#26302A;--text-secondary:#5A6A5F;--text-muted:#93A395;
  --accent-primary:var(--forest);--accent-primary-deep:var(--forest-deep);
  --accent-primary-mid:var(--sage);--accent-primary-subtle:var(--sage-pale);
  --accent-second:var(--caramel);--accent-second-light:var(--clay);--accent-second-subtle:var(--caramel-pale);
  --semantic-positive:#4E7A57;--semantic-positive-subtle:#E7F1E6;
  --semantic-negative:#A34B3C;--semantic-negative-subtle:#F7E9E5;
  --semantic-warning:var(--caramel);--semantic-warning-subtle:var(--caramel-pale);
  --shadow-card:0 2px 8px rgba(38,48,42,.06);--shadow-card-md:0 4px 20px rgba(38,48,42,.12);
  --shadow-card-lg:0 8px 40px rgba(38,48,42,.18);
  --radius-card:16px;--radius-hero:20px;--radius-btn:8px;--radius-pill:20px;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body.dark, .dark{
  --bg-page:#1A211D;--surface-card:#232B26;--surface-card-secondary:#2C352F;
  --border-default:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.14);
  --text-primary:#EDF3EB;--text-secondary:#A7B8A6;--text-muted:#6D7E6E;
  --accent-primary:#A3BC9D;--accent-primary-deep:#85A17F;--accent-primary-subtle:rgba(163,188,157,.15);
  --accent-second:#C8A590;--accent-second-subtle:rgba(200,165,144,.15);
  --semantic-positive:#7FAE87;--semantic-positive-subtle:rgba(127,174,135,.15);
  --semantic-negative:#C9796A;--semantic-negative-subtle:rgba(201,121,106,.15);
  --semantic-warning:#C8A590;--semantic-warning-subtle:rgba(200,165,144,.15);
  --shadow-card:0 2px 12px rgba(0,0,0,.30);--shadow-card-md:0 4px 24px rgba(0,0,0,.40);
}
*{box-sizing:border-box;margin:0;padding:0}
.num{font-variant-numeric:tabular-nums}
.lbl{font-size:11px;font-weight:500;color:var(--text-muted)}
.meta{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.seclabel{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  border-bottom:1px solid var(--border-default);padding-bottom:8px}

/* Com as telas internas somadas às do cliente são até nove itens. Sem
   nowrap eles quebram em duas e três linhas e o cabeçalho vira uma
   parede de texto. A faixa rola quando não couber. */
.pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
.pills::-webkit-scrollbar{display:none}
.pill{white-space:nowrap;flex:none;padding:7px 11px;font-size:11.5px}

/* Menu em dois níveis. Nove itens numa barra só viram parede de texto;
   separados por contexto, ficam quatro ou cinco de cada vez. O seletor
   de contexto só aparece para quem tem os dois. */
.navwrap{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0}
.ctx{display:flex;gap:3px;background:var(--surface-card-secondary);padding:3px;border-radius:var(--radius-pill);flex:none}
.ctx a{font-size:11px;font-weight:700;letter-spacing:.03em;padding:6px 12px;border-radius:var(--radius-pill);
  color:var(--text-muted);text-decoration:none;white-space:nowrap}
.ctx a.on{background:var(--surface-card);color:var(--accent-primary);box-shadow:var(--shadow-card)}
.pills{display:flex;gap:4px;flex-wrap:nowrap;min-width:0}
.pill{font-size:12px;font-weight:600;padding:7px 13px;border-radius:var(--radius-pill);
  color:var(--text-secondary);text-decoration:none;white-space:nowrap;flex:none}
.pill:hover{background:var(--accent-primary-subtle);color:var(--accent-primary)}
.pill.on{background:var(--accent-primary);color:#fff}
body.dark .pill.on{color:#1A211D}
@media(max-width:900px){.navwrap{display:none}}

.faixa-posicao{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  color:var(--accent-primary);background:var(--accent-primary-subtle);
  padding:9px 24px;margin:0}
.faixa-posicao svg{flex:none}
.faixa-posicao .rev{color:var(--semantic-warning);font-weight:700}
.aguardando{max-width:440px;margin:90px auto;text-align:center;padding:20px}
.ag-ico{width:56px;height:56px;border-radius:50%;background:var(--accent-primary-subtle);
  color:var(--accent-primary);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.aguardando h2{font-size:17px;font-weight:700;margin-bottom:10px}
.aguardando p{font-size:13.5px;line-height:1.6;color:var(--text-secondary)}

.previewbtn{background:var(--accent-second-subtle)!important;color:var(--accent-second)!important;
  border:1px solid var(--accent-second)!important}
.preview-banner{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;
  color:var(--accent-second);background:var(--accent-second-subtle);
  padding:9px 24px;flex-wrap:wrap}
.preview-banner button{font-family:inherit;font-size:11.5px;font-weight:700;
  padding:5px 12px;border-radius:var(--radius-pill);border:1px solid var(--accent-second);
  background:var(--surface-card);color:var(--accent-second);cursor:pointer;margin-left:auto}

/* ---- cabeçalho canônico ----
   Cada tela tinha um cabeçalho próprio, montado à mão em momentos
   diferentes: ora o seletor de empresa vinha antes da navegação, ora
   depois; ora aparecia o e-mail, ora um nome fixo no código. Agora a
   ordem é uma só: logo · empresa · navegação · ações. */
.topin{max-width:1320px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:12px}
.logo{height:23px;width:auto;color:var(--accent-primary);display:block;flex:none}
.selemp,.sel{font-family:inherit;font-size:12.5px;font-weight:500;padding:7px 10px;
  border-radius:var(--radius-btn);border:1px solid var(--border-default);
  background:var(--surface-card);color:var(--text-secondary);max-width:290px;flex:0 1 auto;min-width:0}

.navwrap{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0}

/* o toggle carrega a cor que a etiqueta "Copiloto" carregava antes:
   verde quando se olha como cliente, caramelo quando se opera */
.ctx{display:flex;gap:2px;background:var(--surface-card-secondary);padding:3px;
  border-radius:var(--radius-pill);flex:none}
.ctx a{font-size:11px;font-weight:700;letter-spacing:.03em;padding:6px 13px;
  border-radius:var(--radius-pill);color:var(--text-muted);text-decoration:none;white-space:nowrap}
.ctx a.on{background:var(--accent-primary);color:#fff}
.ctx a.on.op{background:var(--accent-second);color:#fff}
body.dark .ctx a.on{color:#1A211D}

.acoes{display:flex;align-items:center;gap:8px;flex:none}

/* estado da conexão: um ponto, não uma etiqueta. Pulsa quando vivo. */
.live{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text-muted)}
.live.viva{background:var(--semantic-positive);animation:pulso 2.4s ease-in-out infinite}
.live.off{background:var(--semantic-negative)}
.live.pub{background:var(--accent-primary)}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.35}}

.icobtn{border:1px solid var(--border-default);background:none;border-radius:var(--radius-btn);
  padding:7px 9px;cursor:pointer;color:var(--text-secondary);display:flex;flex:none}
.icobtn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}
.icobtn.olho.ativo{background:var(--accent-second-subtle);border-color:var(--accent-second);color:var(--accent-second)}

.av{width:29px;height:29px;border-radius:50%;background:var(--accent-primary-subtle);
  color:var(--accent-primary);display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;flex:none;cursor:default;border:1px solid transparent}
.av:hover{border-color:var(--accent-primary)}

.menubtn{display:none;border:1px solid var(--border-default);background:none;
  border-radius:var(--radius-btn);padding:7px 9px;cursor:pointer;color:var(--text-secondary)}
@media(max-width:900px){
  .navwrap{display:none}
  .menubtn{display:flex;margin-left:auto}
}
@media(max-width:480px){
  .topin{padding:10px 12px;gap:8px}
  .selemp,.sel{font-size:11.5px;max-width:none}
}

/* ---- painel de perfil (aberto pelo avatar, em toda tela) ---- */
.perfil-scrim{position:fixed;inset:0;background:rgba(20,28,24,.44);z-index:60;
  display:none;align-items:flex-start;justify-content:center;padding:60px 16px}
.perfil-scrim.open{display:flex}
.perfil-card{position:relative;background:var(--surface-card);border-radius:var(--radius-hero);
  box-shadow:var(--shadow-card-lg);border:1px solid var(--border-default);
  width:min(380px,100%);max-height:calc(100vh - 120px);overflow:auto;padding:22px}
.perfil-topo{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.perfil-av{width:46px;height:46px;border-radius:50%;background:var(--accent-primary-subtle);
  color:var(--accent-primary);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;flex:none}
.perfil-nome{font-size:16px;font-weight:700;color:var(--text-primary);line-height:1.25}
.perfil-papel{font-size:12px;color:var(--accent-primary);font-weight:600;margin-top:2px}
.perfil-sec{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-muted);margin:18px 0 7px}
.perfil-linha{font-size:13px;color:var(--text-secondary);padding:2px 0;word-break:break-word}
.perfil-emp{display:flex;flex-direction:column;gap:5px}
.perfil-emp span{font-size:13px;color:var(--text-secondary);padding:7px 11px;
  background:var(--surface-card-secondary);border-radius:var(--radius-btn)}
.perfil-sair{width:100%;margin-top:20px;padding:11px;border-radius:var(--radius-btn);
  border:1px solid var(--semantic-negative);background:none;color:var(--semantic-negative);
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.perfil-sair:hover{background:var(--semantic-negative);color:#fff}
.perfil-x{position:absolute;top:13px;right:15px;border:none;background:none;cursor:pointer;
  color:var(--text-muted);font-size:22px;line-height:1;padding:2px 6px}
.perfil-x:hover{color:var(--text-primary)}