/* NIOGEN | docs/assets/app.css | 03/11/2026 — tema escuro fixo, tokens do mockup */

:root {
  --bg: #0E1116;
  --surface: #161A21;
  --surface-2: #1D222B;
  --surface-dim: #13161C;
  --nav: #121620;
  --border: #2A3140;
  --border-strong: #3A4458;
  --text: #E9EDF3;
  --muted: #A6AFBE;
  --accent: #32E000;
  --link: #6FB1F7;
  --link-hover: #9CCBFF;

  --ok-bg: #1E3A24;   --ok-fg: #8FE39A;
  --info-bg: #243247; --info-fg: #9CCBFF;
  --warn-bg: #2D2616; --warn-fg: #F8D58C; --warn-border: #5C4A1E; --warn-dot: #F2B84B;
  --bad-bg: #2B1D1D;  --bad-fg: #FFB3B3;  --bad-border: #5A2B2B;  --bad-dot: #FF7A7A;

  --sans: Inter, system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --dm: 'DM Mono', monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.app { min-height: 100vh; display: flex; flex-wrap: wrap; }
.main { flex: 999 1 560px; min-width: 0; padding: 22px 26px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- sidebar ---------- */
.nav { flex: 0 0 230px; background: var(--nav); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.nav-brand { padding: 14px 20px 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.nav-brand .kicker { font-family: var(--dm); font-size: 10px; color: var(--accent); letter-spacing: 3px; text-transform: uppercase; }
.nav-brand h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.nav-brand h2 span { color: var(--accent); }
.nav-brand p { margin: 0; font-size: 10px; color: var(--muted); font-family: var(--dm); letter-spacing: .5px; }
.nav-brand .clock { font-size: 9px; opacity: .75; margin-top: 2px; }
.nav-user { padding: 10px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.nav-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; border: 2px solid rgba(50, 224, 0, .5); background: rgba(50, 224, 0, .1); display: flex; align-items: center; justify-content: center; font-family: var(--dm); font-size: 13px; font-weight: 700; color: var(--accent); }
.nav-user-txt { display: flex; flex-direction: column; min-width: 0; }
.nav-user-txt strong { font-size: 13px; }
.nav-user-txt span { font-size: 10px; color: var(--muted); font-family: var(--dm); letter-spacing: 1px; text-transform: uppercase; }
.nav-items { display: flex; flex-direction: column; padding: 6px 0; flex: 1 1 auto; }
.nav-sec { font-family: var(--dm); font-size: 9px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; padding: 0 24px 6px; margin-top: 14px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 22px; font-size: 13px; font-weight: 600; text-decoration: none; border-left: 2px solid transparent; color: var(--muted); background: none; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; width: 100%; cursor: pointer; }
a.nav-item:hover { color: var(--text); }
.nav-item .ico { font-size: 15px; width: 20px; text-align: center; }
.nav-item.ativo { border-left-color: var(--accent); color: var(--text); background: rgba(50, 224, 0, .07); }
.nav-item.off { opacity: .45; cursor: not-allowed; }
.nav-item .badge { margin-left: auto; font-family: var(--dm); font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: var(--bad-dot); color: var(--bg); }
.nav-foot { padding: 8px 0 12px; border-top: 1px solid var(--border); }
.nav-foot .nav-item { color: var(--accent); }

.filtro { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 40px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.filtro select, .filtro input { background: transparent; border: 0; color: var(--text); font-size: 13px; min-width: 0; }
.filtro select option { background: var(--surface); }
.filtro input { width: 160px; }

/* ---------- botões ---------- */
.btn { min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--border-strong); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-acc { border: 0; background: var(--accent); color: var(--bg); font-weight: 700; }
.btn-ghost { background: transparent; }

.btn-sm { min-height: 34px; border-radius: 6px; font-size: 12px; }
.btn-block { width: 100%; }

/* ---------- chips / alertas ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.chip.ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip.info { background: var(--info-bg); color: var(--info-fg); }
.chip.warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip.bad { background: var(--bad-bg); color: var(--bad-fg); }
.chip.dim { background: var(--surface-dim); border: 1px solid var(--border); }

.alerta { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.alerta::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--link); flex: 0 0 8px; }
.alerta.bad { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-fg); }
.alerta.bad::before { background: var(--bad-dot); }
.alerta.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.alerta.warn::before { background: var(--warn-dot); }

.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--bad-bg); border: 1px solid var(--bad-border); }
.banner.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.banner strong { font-size: 14px; color: var(--bad-fg); }
.banner.warn strong { color: var(--warn-fg); }
.banner span { font-size: 12px; color: #F3C6C6; }
.banner.warn span { color: var(--warn-fg); }

.board { display: flex; gap: 12px; }
.board.inst { min-width: 1500px; }
.col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; border-radius: 10px; }
.col.drop-alvo { outline: 2px dashed var(--accent); outline-offset: 4px; }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.col-head span:first-child { font-size: 12px; font-weight: 600; }
.col-head span:last-child { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.col-head.bad { background: var(--bad-bg); border-color: var(--bad-border); }
.col-head.bad span { color: var(--bad-fg) !important; }
.col-head.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.col-head.warn span { color: var(--warn-fg) !important; }
.col-vazia { padding: 16px 12px; border-radius: 10px; border: 1px dashed var(--border); font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kpi { padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.kpi .rot { font-size: 11px; color: var(--muted); }
.kpi .val { font-family: var(--mono); font-size: 22px; font-weight: 600; }
.kpi .val small { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi .nota { font-size: 11px; color: var(--muted); }
.kpi.warn { border-color: var(--warn-border); } .kpi.warn .rot, .kpi.warn .val { color: var(--warn-fg); }
.kpi.bad { border-color: var(--bad-border); } .kpi.bad .rot, .kpi.bad .val { color: var(--bad-fg); }
.kpi .val.ok { color: var(--ok-fg); }

.rodape-info { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.rodape-info strong { color: var(--text); }

/* ---------- painéis / formulário ---------- */
.duas { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.painel { padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.painel h2 { margin: 0; font-size: 15px; font-weight: 600; }
.painel .painel-sub { font-size: 12px; color: var(--muted); }
.lista { flex: 3 1 560px; min-width: 0; overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }

.campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); min-width: 0; }
.campo input, .campo select, .campo textarea, .inp {
  min-height: 40px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; width: 100%; min-width: 0;
}
.campo textarea { padding: 8px 10px; min-height: 70px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .inp:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.campo .erro { color: var(--bad-fg); font-size: 11px; }
.grade2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.junto { display: flex; gap: 8px; }
.junto > :first-child { flex: 1; }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text); cursor: pointer; }
.check input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 16px; }
.aviso { padding: 10px 12px; border-radius: 8px; background: var(--warn-bg); border: 1px solid var(--warn-border); font-size: 12px; color: var(--warn-fg); display: flex; flex-direction: column; gap: 8px; }
.aviso .check { color: var(--warn-fg); }
.acoes { display: flex; gap: 8px; }
.acoes .btn { flex: 1; min-height: 42px; }

.nota-campo { font-size: 11px; color: var(--muted); }

/* planos (tabela vigente) e serviços adicionais no formulário */
.planos-op { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plano-op { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 10px 34px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.plano-op input { position: absolute; left: 11px; top: 12px; accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.plano-op:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.po-nome { font-size: 13px; font-weight: 600; }
.po-preco { font-size: 12px; color: var(--muted); }
.po-preco b { font-family: var(--mono); color: var(--text); font-weight: 600; }
.po-det { font-size: 11px; color: var(--muted); }
.po-com { font-size: 11px; font-family: var(--dm); color: var(--ok-fg); }
.adic { display: flex; flex-direction: column; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.ad-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text); font-size: 13px; cursor: pointer; }
.ad-linha:last-child { border-bottom: 0; }
.ad-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-info { font-size: 11px; color: var(--muted); }
.ad-linha input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 16px; }
.ad-linha select { min-height: 32px; width: 64px; flex: 0 0 64px; padding: 0 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.resumo-venda { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--surface-dim); border: 1px solid var(--border-strong); }
.resumo-venda:empty { display: none; }
.rv-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; margin-top: 4px; }
.rv-linha:first-child { margin-top: 0; }
.rv-linha strong { font-family: var(--mono); font-size: 16px; }
.rv-nota { font-size: 11px; color: var(--muted); }
.rv-alerta { font-size: 11px; color: var(--warn-fg); }

/* Configurações › Tabela vigente */
.tab tr.inativo td { color: var(--muted); opacity: .6; }
.tab .obs { font-size: 11px; color: var(--muted); max-width: 320px; }

/* ---------- tabela ---------- */
table.tab { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
.tab th { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.tab td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tab tr:last-child td { border-bottom: 0; }
.tab td a { color: var(--text); text-decoration: none; font-weight: 600; }
.tab td a:hover { text-decoration: underline; }
.tab .sub { font-size: 11px; color: var(--muted); }
.tab .num { text-align: right; font-family: var(--mono); }
.tab tr.saida td { color: var(--muted); }
.tab tr.saida td a { color: var(--muted); }
.tab .vazio { text-align: center; color: var(--muted); padding: 28px; }

/* ---------- detalhe da venda ---------- */
.voltar { font-size: 12px; text-decoration: none; }

.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tl-item:last-child { border-bottom: 0; }
.tl-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--ok-fg); flex: 0 0 10px; }
.tl-dot.bad { background: var(--bad-dot); }
.tl-dot.warn { background: var(--warn-dot); }
.tl-dot.futuro { background: none; border: 2px solid var(--border); }
.tl-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-txt strong { font-size: 13px; }
.tl-txt span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.trava { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.trava .s { white-space: nowrap; }
.trava .s.ok { color: var(--ok-fg); } .trava .s.bad { color: var(--bad-fg); } .trava .s.nd { color: var(--muted); }
.dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 13px; }
.dados > :nth-child(odd) { color: var(--muted); }
.dados > :nth-child(even) { overflow-wrap: anywhere; }
.placeholder { padding: 16px; border-radius: 10px; border: 1px dashed var(--border); font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- modal / toast ---------- */
dialog.modal { border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); padding: 0; width: min(440px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(5, 7, 10, .7); }
.modal form { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.modal h3 { margin: 0; font-size: 16px; }
.modal p { margin: 0; font-size: 12px; color: var(--muted); }
.toasts { position: fixed; right: 16px; bottom: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 50; pointer-events: none; }
.toast { pointer-events: auto; max-width: 440px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-strong); font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.toast.bad { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-fg); }
.toast.ok { background: var(--ok-bg); border-color: #2F5C38; color: var(--ok-fg); }
.carregando { color: var(--muted); font-size: 13px; padding: 12px 0; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-box { width: min(380px, 100%); padding: 28px 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.login-box .marca { display: flex; flex-direction: column; gap: 4px; }
.login-box .marca .kicker { font-family: var(--dm); font-size: 10px; color: var(--accent); letter-spacing: 3px; text-transform: uppercase; }
.login-box .marca h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: .5px; }
.login-box .marca h1 span { color: var(--accent); }
.login-box .marca p { margin: 0; font-size: 11px; color: var(--muted); font-family: var(--dm); }
.login-box .msg { font-size: 12px; color: var(--bad-fg); min-height: 16px; }

/* ---------- abas ---------- */
.abas { display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); flex-wrap: wrap; }
.aba { min-height: 32px; padding: 0 12px; border-radius: 6px; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.aba.ativa { background: var(--surface-2); color: var(--text); }
.aba:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- configurações · relatórios ---------- */
.secao { display: flex; flex-direction: column; gap: 14px; }
.secao-tit { margin: 0; font-size: 14px; font-weight: 600; }

.rel { padding: 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.rel-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.rel-topo strong { font-size: 14px; }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); font-size: 12px; }

a.kpi { text-decoration: none; color: var(--text); }
a.kpi:hover { border-color: var(--border-strong); }

.q-item { display: flex; flex-direction: column; gap: 4px; }
.q-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.q-linha small { font-size: 11px; color: var(--muted); }
.q-trilho { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.q-trilho div { height: 6px; }
a.alerta { text-decoration: none; }

/* ---------- celular ---------- */
/* Menu lateral recolhido atrás do ☰ (padrão de telas, 04/11): a barra .topo-movel é criada pelo sidebar.js. */
.topo-movel { display: none; }
@media (max-width: 760px) {
  .app { flex-direction: column; flex-wrap: nowrap; }
  .topo-movel { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--nav); border-bottom: 1px solid var(--border); }
  .topo-movel .menu-btn { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 20px; cursor: pointer; }
  .topo-movel strong { font-size: 16px; font-weight: 800; letter-spacing: .5px; }
  .topo-movel strong span { color: var(--accent); }
  .topo-movel .pag { margin-left: auto; font-size: 12px; color: var(--muted); }
  .nav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 45; width: min(280px, 86vw); overflow-y: auto; transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; box-shadow: 8px 0 24px rgba(0, 0, 0, .5); }
  .nav.aberto { transform: none; visibility: visible; transition: transform .22s ease; }
  .nav-veu { position: fixed; inset: 0; z-index: 44; background: rgba(5, 7, 10, .6); }
  .main { padding: 16px; }
  .kpis, .kpis.seis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .filtro, .tools .btn { flex: 1 1 auto; }
  .filtro input { width: 100%; }
}
@media (max-width: 420px) {
  .grade2 { grid-template-columns: 1fr; }
  .planos-op { grid-template-columns: 1fr; }
}

/* Tabela e política (consulta) */
.regras { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.regras strong { color: var(--text); }

/* Tabela e política: cor por tipo de tabela (verde Varejo · azul Empresas · âmbar BTU) */
:root { --cor-varejo: var(--accent); --cor-empresas: var(--link); --cor-btu: var(--warn-dot); --cor-neutro: var(--border-strong); }
.pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--cor-neutro); }
.pt.varejo, .pt.regular { background: var(--cor-varejo); } .pt.empresas { background: var(--cor-empresas); } .pt.btu { background: var(--cor-btu); }

.tab .preco { font-family: var(--mono); font-weight: 600; color: var(--text); }

.tab .com { color: var(--ok-fg); font-weight: 600; }

.kpi-cor { position: relative; overflow: hidden; text-align: left; font: inherit; color: inherit; }
.kpi-cor::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--cor-neutro); }
.kpi-cor.regular::before, .kpi-cor.varejo::before { background: var(--cor-varejo); }
.kpi-cor.empresas::before { background: var(--cor-empresas); } .kpi-cor.btu::before { background: var(--cor-btu); }
.kpi-cor.varejo .val { color: var(--ok-fg); } .kpi-cor.empresas .val { color: var(--info-fg); } .kpi-cor.btu .val { color: var(--warn-fg); }
button.kpi-cor { cursor: pointer; } button.kpi-cor:hover { border-color: var(--accent); }

.mc-lista { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: 58vh; }
.mc-grupo { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); border-top: 3px solid var(--cor-varejo); }
.mc-grupo.btu { border-top-color: var(--cor-btu); }
.mc-grupo h4 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: center; }
.mc-grupo h4 span { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.mc-grupo ul { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 16px; font-size: 13px; }
.mc-grupo li { padding: 2px 0; break-inside: avoid; }
.mc-grupo.regular li::before { content: '•'; color: var(--cor-varejo); margin-right: 6px; }
.mc-grupo.btu li::before { content: '•'; color: var(--cor-btu); margin-right: 6px; }

@media (max-width: 480px) { .mc-grupo ul { columns: 2; } }

/* Explicação de comissão: rótulo com title= (desktop) + ⓘ que abre o texto ao tocar (celular) */
.com-rot { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; cursor: help; }
.dica { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; vertical-align: middle; }
.dica:hover, .dica:focus-visible { color: var(--accent); outline: none; }
.dica-pop { position: absolute; z-index: 1000; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text); font-size: 12px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); text-transform: none; letter-spacing: 0; font-weight: 400; }
@media (pointer: coarse) { .dica { width: 26px; height: 26px; font-size: 15px; } }
/* Selos da venda (DFV e M-10 elegível × não elegível) */
.chips.selos { margin-top: 2px; }
.chip.selo { cursor: help; border: 1px solid transparent; }
.chip.selo.warn { border-color: var(--warn-border); } .chip.selo.ok { border-color: var(--ok-fg); }
.chip.selo.info { border-color: var(--info-fg); } .chip.selo.dim { text-decoration: line-through; }

/* Cobertura (DFV) — bloco na venda de rua e na venda */
.dfv-bloco { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-dim); margin: 0; min-width: 0; }
fieldset.dfv-bloco legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.dfv-bloco h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dfv-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dfv-link { border-color: var(--link); color: var(--link); text-decoration: none; }
.dfv-hp > .campo { flex: 1 1 0; }
.dfv-sem { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--bad-fg); font-size: 12px; }
.dfv-sem[hidden] { display: none; }
.chip.selo.bad { border-color: var(--bad-border); }
.dfv-senha { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text); }
.dfv-passos { display: block; margin-top: 4px; }

/* DFV nível 3: consulta automática na base nio_hp */
.dfv-auto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dfv-auto .nota-campo { flex: 1 1 200px; }
.dfv-opcoes { display: flex; flex-direction: column; gap: 6px; }
.dfv-opcoes[hidden] { display: none; }
.dfv-opcoes-lista { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; }
.dfv-opcoes-lista button.chip { border: 1px solid transparent; cursor: pointer; font: inherit; font-size: 12px; min-height: 30px; }
.dfv-opcoes-lista button.chip:hover { border-color: var(--border-strong); }
.dfv-manual summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.dfv-manual[open] { display: flex; flex-direction: column; gap: 8px; }

.tab tr.marcado td { background: var(--surface-dim); }
.tab td.ck { width: 36px; }
.tab td.ck input { accent-color: var(--accent); width: 16px; height: 16px; }
.conjunto { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; padding: 10px 12px; border-radius: 8px; background: var(--surface-dim); border: 1px solid var(--border); min-height: 44px; }

/* Cobertura (DFV): consulta rápida, painel embutido, resumo */
.cob-form { display: grid; grid-template-columns: 140px 110px minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.cob-res { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; }
.cob-res.cob-ok { background: var(--ok-bg); border-color: var(--ok-fg); color: var(--ok-fg); }
.cob-res.cob-bad { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-fg); }
.cob-res.cob-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.cob-res-topo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.cob-dados { margin-top: 4px; }
#resultado { display: flex; flex-direction: column; gap: 10px; }
#resultado[hidden] { display: none; }
.cob-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.dfv-acesso-card { font-size: 13px; line-height: 1.8; }
.dfv-acesso-card .dfv-passos { display: none; }   /* os passos já estão na lista ao lado */
.cob-moldura { width: 100%; min-height: 720px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-dim); display: flex; }
.cob-moldura[hidden] { display: none; }
.cob-moldura iframe { width: 100%; min-height: 720px; border: 0; flex: 1 1 auto; }
.cob-moldura .carregando { margin: auto; }
.cob-falha { padding: 12px; border-radius: 8px; background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-fg); font-size: 13px; }
.cob-falha[hidden] { display: none; }
.cob-falha a { color: inherit; font-weight: 600; }

@media (max-width: 767px) {
  .cob-form { grid-template-columns: 1fr 1fr; }
  .cob-form .campo:nth-child(3), .cob-form .btn { grid-column: 1 / -1; }
  .cob-moldura, .cob-moldura iframe { min-height: 560px; }
}
.cob-consulta a.btn, .cob-entrar a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.grade3-end { display: grid; grid-template-columns: 130px 100px minmax(0, 1fr); gap: 10px; }
.faixa { padding: 10px 12px; border-radius: 8px; font-size: 13px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.faixa.cinza { background: var(--surface); color: var(--muted); }
.faixa.verde { background: var(--ok-bg); border-color: var(--ok-fg); color: var(--ok-fg); }
.faixa.amarelo { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.faixa.vermelho { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-fg); }
.faixa[hidden] { display: none; }
.faixa-links { display: flex; gap: 14px; flex-wrap: wrap; }
.faixa-links a { color: inherit; font-weight: 600; }
.faixa .dfv-opcoes-lista button.chip { color: inherit; }
.dfv-ajuste > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.dfv-ajuste[open] { display: flex; flex-direction: column; gap: 10px; }
.dfv-ajuste [data-dfv-opcoes] { display: none !important; }   /* as unidades já aparecem na faixa */
.confs { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; }
.conf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 13px; }
.conf + .conf { border-top: 1px solid var(--border); }
.simnao { display: flex; gap: 6px; flex: 0 0 auto; }
.simnao label { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); cursor: pointer; font-size: 12px; }
.simnao input { accent-color: var(--accent); margin: 0; }
.simnao label:has(input[value="sim"]:checked) { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-fg); }
.simnao label:has(input[value="nao"]:checked) { background: var(--ok-bg); border-color: var(--ok-fg); color: var(--ok-fg); }

@media (max-width: 767px) {

  .grade3-end { grid-template-columns: 1fr 1fr; }
  .grade3-end .campo:nth-child(3) { grid-column: 1 / -1; }
  .conf { flex-direction: column; align-items: flex-start; }

}

/* Estorno corrigido (04/11): aviso discreto de downgrade e alerta de recompra */
.chip.recompra { white-space: normal; line-height: 1.4; border-radius: 8px; border: 1px solid var(--warn-border); }

/* ==========================================================================
   Padrão de telas (v0.7 · 04/11) — docs/PADRAO_TELAS_NIOGEN_041126_1225.md
   Componentes comuns: cabeçalho com ação principal, KPIs (até 4), abas em pílula, barra de filtros com Período,
   tabela padrão, pílula por etapa, próximo passo (bad/warn/ok), gaveta lateral, cartões no celular e FAB.
   ========================================================================== */
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cab h1 { margin: 0; font-size: 22px; font-weight: 700; }
.cab .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.btn-acc:hover:not(:disabled) { filter: brightness(1.08); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* KPIs: até 4 cartões, barra de progresso opcional */
.kpis.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.quatro .kpi { padding: 14px 16px; border-radius: 12px; gap: 4px; }
.kpis.quatro .kpi .rot { text-transform: uppercase; letter-spacing: .05em; }
.kpis.quatro .kpi .nota { font-size: 12px; }
.kpi .barra { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.kpi .barra i { display: block; height: 100%; background: var(--accent); }

/* Abas em pílula com contagem (a variante .alerta pinta a contagem de vermelho) */
.abas.pilulas { padding: 0 0 2px; background: none; border: 0; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.abas.pilulas::-webkit-scrollbar { display: none; }
.abas.pilulas .aba { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; white-space: nowrap; }
.abas.pilulas .aba b { font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.abas.pilulas .aba.ativa { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.abas.pilulas .aba.ativa b { background: var(--accent); color: var(--bg); }
.abas.pilulas .aba.alerta { color: var(--warn-fg); background: transparent; border-color: var(--border); padding: 0 12px; }
.abas.pilulas .aba.alerta::before { display: none; }
.abas.pilulas .aba.alerta.ativa { background: var(--surface-2); border-color: var(--warn-border); }
.abas.pilulas .aba.alerta b { background: var(--bad-bg); color: var(--bad-fg); }
.abas.pilulas .aba.alerta.ativa b { background: var(--warn-dot); color: var(--bg); }

/* Barra de filtros: busca larga + seletores + Período (com de/até) + ação à direita */
.barra-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.busca { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.busca input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); outline: 0; font-size: 13px; }
.sel { min-height: 40px; padding: 0 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.sel option { background: var(--surface); }
.periodo { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.periodo .datas { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; }
.periodo input[type=date] { color-scheme: dark; }
.barra-filtros .dir { margin-left: auto; display: flex; gap: 8px; }

/* Tabela padrão: cabeçalho sticky, ordenação, linha clicável, rodapé com contagem */
.lista.padrao { flex: none; overflow: visible; }
.lista.padrao .rolagem { overflow-x: auto; }
.lista.padrao table.tab { min-width: 860px; }
.lista.padrao .tab thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); white-space: nowrap; }
.tab th[data-ord] { cursor: pointer; user-select: none; }
.tab th[data-ord]:hover { color: var(--text); }
.tab th .seta { opacity: .5; margin-left: 4px; font-family: var(--sans); }
.tab th.num { text-align: right; }
.lista.padrao .tab td { vertical-align: middle; }
.tab tbody tr.clicavel { cursor: pointer; transition: background .12s; }
.tab tbody tr.clicavel:hover { background: var(--surface-2); }
.tab tbody tr.clicavel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab .cli b { display: block; font-weight: 600; color: var(--text); }
.tab .cli small, .tab .plano-c small { display: block; color: var(--muted); font-size: 12px; }
.tab .plano-c b { font-weight: 600; }
.tab .apagado { color: var(--muted); white-space: nowrap; }
.tab tr.saida .cli b { color: var(--muted); }
.rodape-lista { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }

/* Pílula por etapa (uma por linha) */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.qualificado { background: var(--info-bg); color: var(--info-fg); }
.pill.vendido, .pill.aguardando, .pill.instalado { background: #232A36; color: #C9D3E3; }
.pill.ativo { background: var(--ok-bg); color: var(--ok-fg); }
.pill.saida { background: var(--surface-dim); color: var(--muted); border: 1px solid var(--border); }

/* Próximo passo: vermelho = atrasado/prazo do contrato · amarelo = fazer hoje · cinza = acompanhar */
.prox { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.prox::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; border: 1px solid var(--muted); box-sizing: border-box; }
.prox.warn { color: var(--warn-fg); }
.prox.warn::before { background: var(--warn-dot); border-color: var(--warn-dot); }
.prox.bad { color: var(--bad-fg); }
.prox.bad::before { background: var(--bad-dot); border-color: var(--bad-dot); }
.prox.dim::before { display: none; }

/* Cartões no celular + botão flutuante */
.cartoes { display: none; flex-direction: column; gap: 10px; }
.cartao { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
a.cartao:hover { color: var(--text); border-color: var(--border-strong); }
.cartao .cli b { display: block; font-weight: 600; }
.cartao .cli small { color: var(--muted); font-size: 12px; }
.cartao .valor { font-family: var(--mono); font-size: 14px; text-align: right; white-space: nowrap; }
.cartao .l2 { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.cartao.saida { opacity: .7; }
.cartoes .vazio { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }
.fab { display: none; position: fixed; right: 18px; bottom: 18px; z-index: 25; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: var(--bg); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }

/* Gaveta lateral: NG.gaveta.abrir()/fechar() — ×, Esc e clique fora fecham; tela cheia ≤ 760 px */
.gaveta-veu { position: fixed; inset: 0; z-index: 40; background: rgba(5, 7, 10, .6); opacity: 0; pointer-events: none; transition: opacity .2s; }
.gaveta-veu.aberto { opacity: 1; pointer-events: auto; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(560px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform .25s ease, visibility 0s linear .25s; visibility: hidden; }
.gaveta.aberta { transform: none; visibility: visible; transition: transform .25s ease; }
body.gaveta-on { overflow: hidden; }
.g-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.g-cab h2 { margin: 0; font-size: 17px; }
.g-cab p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.g-fechar { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
.g-fechar:hover { color: var(--text); background: var(--surface-2); }
.g-corpo { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.g-pe { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-dim); }

/* Barra de passos clicável (formulário longo em gaveta) */
.g-passos { display: flex; gap: 4px; padding: 12px 20px; border-bottom: 1px solid var(--border); margin: 0; list-style: none; }
.g-passos li { flex: 1; min-width: 0; }
.g-passos button { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 11px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-passos button i { display: block; height: 4px; border-radius: 2px; background: var(--surface-2); }
.g-passos [data-estado="ok"] i { background: var(--ok-fg); }
.g-passos [data-estado="warn"] i { background: var(--warn-dot); }
.g-passos [data-estado="bad"] i { background: var(--bad-dot); }
.g-passos button.atual { color: var(--text); font-weight: 600; }
.g-passos button.atual i { box-shadow: 0 0 0 1px var(--accent); }
.g-passos button.atual:not([data-estado="ok"]):not([data-estado="warn"]):not([data-estado="bad"]) i { background: var(--accent); }

/* Segmentos (Cartão | Boleto | Débito) no lugar de selects curtos */
.seg { display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.seg label { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 8px; border-radius: 6px; color: var(--muted); font-size: 13px; cursor: pointer; text-align: center; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--surface-2); color: var(--text); font-weight: 600; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--accent); }

@media (max-width: 1100px) {
  .kpis.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .kpis.quatro { gap: 8px; }
  .kpis.quatro .kpi { padding: 12px; }
  .kpis.quatro .kpi .val { font-size: 18px; }
  .lista.padrao { display: none; }
  .cartoes { display: flex; }
  .fab { display: block; }
  .cab .acao-principal { display: none; }
  .main.com-fab { padding-bottom: 90px; }
  .barra-filtros .dir { display: none; }
  .barra-filtros .sel { flex: 1 1 30%; min-width: 0; }
  .periodo { flex: 1 1 100%; }
  .periodo > .sel { flex: 1 1 auto; }
  .g-passos button { font-size: 0; gap: 0; }
  .g-cab, .g-corpo, .g-pe, .g-passos { padding-left: 16px; padding-right: 16px; }
}

/* Formulário em gaveta, um passo por vez (Nova venda) */
.g-form { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; }
.passo-g { display: flex; flex-direction: column; gap: 12px; }
.passo-g h3 { margin: 0; font-size: 15px; }
.passo-g .ajuda { margin: -6px 0 0; font-size: 12px; color: var(--muted); }
.g-form .campo input, .g-form .campo select { min-height: 42px; background: var(--bg); font-size: 14px; }
.g-resumo { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.g-resumo b { font-family: var(--mono); color: var(--text); margin-left: 6px; }
.g-falta { font-size: 12px; color: var(--warn-fg); }
.g-falta.ok { color: var(--ok-fg); }
.g-botoes { display: flex; justify-content: space-between; gap: 8px; }
.g-botoes .dir { display: flex; gap: 8px; margin-left: auto; }
.g-botoes .btn { min-height: 42px; }
@media (max-width: 1100px) { .lista.padrao .col-media { display: none; } .lista.padrao table.tab { min-width: 680px; } }
@media (max-width: 760px) {
  .g-botoes .dir { flex: 1; }
  .g-botoes .btn { padding: 0 10px; font-size: 12px; }
  .g-botoes .dir .btn { flex: 1; }
  .g-resumo { flex-direction: column; gap: 2px; }
}

/* Tela Mari (prompt nº 12, 04/11): situação em UMA pílula · conversa em balões · detalhe em seções */
.pill.m-and { background: var(--info-bg); color: var(--info-fg); }
.pill.m-ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill.m-hum { background: var(--warn-bg); color: var(--warn-fg); }
.pill.m-fim { background: var(--surface-dim); color: var(--muted); border: 1px solid var(--border); }
.btn.desab, .fab.desab { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); box-shadow: none; cursor: not-allowed; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.fab { display: none; align-items: center; justify-content: center; text-decoration: none; font-size: 22px; }
.check-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.check-mini input { accent-color: var(--accent); }
button.cartao { font: inherit; color: var(--text); text-align: left; width: 100%; cursor: pointer; }
.d-sec { display: flex; flex-direction: column; gap: 6px; }
.d-sec h3 { margin: 0 0 4px; font-family: var(--dm); font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.d-l { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.d-l span { color: var(--muted); }
.d-l b { font-weight: 500; overflow-wrap: anywhere; }
.briefing { white-space: pre-wrap; font-size: 13px; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.conversa { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.balao { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 13px; background: var(--surface-2); align-self: flex-start; display: flex; flex-direction: column; gap: 4px; }
.balao.mari { align-self: flex-end; background: #1C2B22; }
.balao.humano { align-self: flex-end; background: var(--info-bg); }
.balao.sistema { align-self: center; background: transparent; border: 1px dashed var(--border); color: var(--muted); font-size: 12px; }
.balao .b-quem { font-family: var(--dm); font-size: 10px; color: var(--muted); }
.balao .b-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.balao .chip { font-size: 10px; }
@media (max-width: 760px) { a.fab { display: flex; } .d-l { grid-template-columns: 110px minmax(0, 1fr); } }

/* Vendas · chave Lista | Quadro (prompt 13). A vista ativa fica em main[data-vista]. */
.cab-acoes { display: flex; align-items: center; gap: 10px; }
.seg.vista { flex: none; }
.seg.vista label { flex: none; min-height: 34px; padding: 0 16px; }
.main[data-vista="quadro"] .lista.padrao, .main[data-vista="quadro"] .cartoes { display: none; }
.main[data-vista="lista"] .quadro-vendas { display: none; }

/* Vista Quadro: 5 colunas; Saída e Interesse futuro recolhidos numa faixa abaixo */
.quadro-vendas { display: flex; flex-direction: column; gap: 12px; }
.board.qv { overflow-x: auto; padding-bottom: 6px; align-items: flex-start; }
.qv-col { flex: 1 1 0; min-width: 210px; gap: 8px; }
.qv-col .col-head .c-info { color: var(--info-fg); }
.qv-col .col-head .c-ok { color: var(--ok-fg); }
.qv-corpo { display: flex; flex-direction: column; gap: 8px; }
.qv-corpo.rola { max-height: 640px; overflow-y: auto; padding-right: 4px; }
.qcard { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.qcard:hover { color: var(--text); border-color: var(--border-strong); }
.qcard b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.qcard small { font-size: 12px; color: var(--muted); }
.qcard .prox { margin-top: 2px; }
.qcard.bad { border-left: 3px solid var(--bad-dot); }
.qcard.warn { border-left: 3px solid var(--warn-dot); }
.qcard.dim { background: var(--surface-dim); }
.qcard[draggable="true"] { cursor: grab; }
.qcard.arrastando { opacity: .5; }
.qv-fora { border-radius: 10px; }
.qv-fora.drop-alvo, .qv-fora.destaque, .qv-col.destaque { outline: 2px dashed var(--accent); outline-offset: 4px; }
.qv-faixa { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; border-radius: 10px; border: 1px dashed var(--border); background: var(--surface-dim); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.qv-faixa:hover { color: var(--text); border-color: var(--border-strong); }
.qv-faixa b { font-family: var(--mono); font-weight: 600; color: var(--text); }
.qv-fora-corpo { display: flex; flex-direction: column; gap: 14px; padding: 12px 2px 2px; }
.qv-grupo h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.qv-grupo h3 span { font-family: var(--mono); font-weight: 500; }
.qv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
@media (max-width: 760px) {
  .cab-acoes { width: 100%; }
  .seg.vista { flex: 1; }
  .seg.vista label { flex: 1; }
  /* Celular: uma coluna por vez, rolando na horizontal com encaixe. */
  .board.qv { scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px; }
  .qv-col { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
  .qv-corpo.rola { max-height: none; overflow: visible; }
  .qv-grade { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Ficha da venda (05/11, rodada noturna) — assets/ficha.js
   Gaveta larga no computador, tela cheia ≤ 760 px; a mesma ficha em página cheia (venda.html?id=).
   ========================================================================== */
.gaveta.larga { width: min(600px, 100vw); }
@media (max-width: 760px) { .gaveta, .gaveta.larga { width: 100vw; border-left: 0; } }
.ficha-raiz { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ficha { display: flex; flex-direction: column; min-height: 0; }
.ficha.f-gaveta { height: 100%; }
.f-cab { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.f-linha1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.f-linha1 h2 { margin: 0; font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.f-linha1 .g-fechar { margin: -4px -8px 0 0; }
.f-local { font-size: 13px; color: var(--muted); }
.f-linha3 { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 4px; }
.f-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--muted); min-width: 0; }
.f-ctl { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.f-ctl .sel { min-height: 36px; }
.f-menu { position: relative; }
.f-mais { min-height: 36px; width: 40px; padding: 0; font-size: 18px; line-height: 1; }
.f-menu-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; min-width: 220px; display: flex; flex-direction: column; padding: 6px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.f-menu-lista a, .f-menu-lista button { display: block; text-align: left; padding: 10px; border-radius: 6px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.f-menu-lista a:hover, .f-menu-lista button:hover { background: var(--surface); color: var(--text); }
.f-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 12px; }

/* Faixa "Próximo passo": a cor do proxPasso (vermelho atrasado · amarelo hoje · cinza acompanhar) */
.f-prox { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
/* 08/11: o texto nunca espreme (mín. ~260 px); com 3 botões eles descem para a linha de baixo, alinhados à direita */
.f-prox-txt { min-width: 0; flex: 1 1 260px; }
.f-rot { display: block; font-family: var(--dm); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.f-prox b { display: block; font-size: 14px; font-weight: 600; margin-top: 3px; }
.f-nota { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.f-prox.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.f-prox.warn b, .f-prox.warn .f-nota { color: var(--warn-fg); }
.f-prox.bad { background: var(--bad-bg); border-color: var(--bad-border); }
.f-prox.bad b, .f-prox.bad .f-nota { color: var(--bad-fg); }
.f-prox.dim { background: var(--surface-dim); }
.f-prox-bts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; margin-left: auto; }
/* 0082: linha do que o sistema fez depois do botão do momento + atalhos de exceção */
.f-feito { margin-top: 6px; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; background: var(--ok-bg, var(--surface-2)); color: var(--ok-fg, var(--text)); border: 1px solid var(--ok-border, var(--border)); }
.f-feito span { display: block; margin-top: 3px; }
.f-feito.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.f-atalhos { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-top: 6px; }
.f-prox-bts .btn { min-height: 40px; }

/* Formulário dentro da ficha (faixa do próximo passo ou "Editar" do bloco) */
.f-formulario { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-dim); margin: 0; }
.f-bloco .f-formulario { padding: 12px; }
.f-formulario h3 { margin: 0; font-size: 14px; }
.f-formulario p { margin: 0; font-size: 12px; color: var(--muted); }
.f-formulario .campo input, .f-formulario .campo select, .f-formulario .campo textarea { min-height: 42px; background: var(--bg); font-size: 14px; }
.f-formulario .campo textarea { min-height: 70px; }
.f-formulario input[type=date] { color-scheme: dark; }
.f-form-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.f-form-acoes .btn { min-height: 42px; }
.junto-2 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Linha do tempo das etapas */
.f-tempo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.f-tempo li { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.f-tempo li i { display: block; height: 4px; border-radius: 2px; background: var(--surface-2); }
.f-tempo li.feito i { background: var(--ok-fg); }
.f-tempo li.atual i { background: var(--accent); }
.f-tempo li.feito, .f-tempo li.atual { color: var(--text); }
.f-tempo li.atual span { font-weight: 600; }
.f-tempo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-tempo small { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.f-saida-linha { font-size: 12px; color: var(--muted); padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--border); }

/* Blocos recolhíveis: resumo de uma linha fechado; o do próximo passo vem aberto e com borda amarela */
.f-bloco { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.f-bloco.marcado { border-color: var(--warn-border); }
.f-bloco-cab { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.f-bloco-cab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.f-bloco-cab::before { content: "\25B8"; color: var(--muted); display: inline-block; transition: transform .15s; flex: 0 0 auto; }
.f-bloco.aberto .f-bloco-cab::before { transform: rotate(90deg); }
.f-bloco-cab b { font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.f-bloco-cab span { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.f-bloco.aberto .f-bloco-cab span { visibility: hidden; }
.f-bloco-corpo { display: none; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.f-bloco.aberto .f-bloco-corpo { display: flex; }
.f-bloco-pe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.f-sub { margin-top: 8px; font-family: var(--dm); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.ok-txt { color: var(--ok-fg); }
.warn-txt { color: var(--warn-fg); }
.bad-txt { color: var(--bad-fg); }
.apagado { color: var(--muted); }
.f-bloco .timeline { max-height: 420px; overflow-y: auto; }
.f-bloco .dfv-bloco { border: 0; padding: 0; background: none; }

/* Página cheia (venda.html?id=) */
.ficha.f-pagina { width: 100%; max-width: 820px; }
.ficha.f-pagina .f-cab { position: sticky; top: 0; z-index: 5; margin: -22px 0 0; padding: 22px 0 12px; }
.ficha.f-pagina .f-cab .voltar { margin-bottom: 4px; }
.ficha.f-pagina .f-corpo { overflow: visible; padding: 16px 0 28px; }
@media (max-width: 760px) {
  .f-cab, .f-corpo { padding-left: 16px; padding-right: 16px; }
  .ficha.f-pagina .f-cab { top: 56px; margin-top: -16px; padding: 16px 0 12px; }
  .ficha.f-pagina .f-corpo { padding: 14px 0 24px; }
  .f-ctl { width: 100%; margin-left: 0; }
  .f-ctl .sel { flex: 1; min-width: 0; }
  .f-prox { flex-direction: column; align-items: stretch; }
  .f-prox-bts { justify-content: stretch; }
  .f-prox-bts .btn { flex: 1; }
  .f-tempo small { font-size: 10px; }
  .f-tempo span { font-size: 11px; }
  .f-bloco-cab span { max-width: 55%; }
}

/* Painel no padrão (05/11): "Precisam de ação agora" + blocos curtos que levam às telas */
.lista-acao { display: flex; flex-direction: column; }
.la { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.4fr); align-items: center; gap: 6px 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; border-radius: 6px; }
.la:last-child { border-bottom: 0; }
.la:hover { background: var(--surface-2); color: var(--text); }
.la-cli b { display: block; font-weight: 600; font-size: 13px; }
.la-cli small { display: block; color: var(--muted); font-size: 12px; }
.la .pill { justify-self: start; }
.vazio-curto { padding: 14px 4px; font-size: 13px; color: var(--muted); }
.painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.bloco-curto { gap: 10px; }
.bloco-curto h2 { font-size: 14px; }
a.q-item { color: var(--text); text-decoration: none; }
a.q-item:hover .q-linha span:first-child { text-decoration: underline; }
.q-trilho i { display: block; height: 6px; border-radius: 3px; background: var(--muted); }
.q-trilho i.et-qualificado { background: var(--info-fg); }
.q-trilho i.et-ativo { background: var(--ok-fg); }
.bc-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bc-num .mono { font-size: 28px; font-weight: 600; }
.bc-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text); text-decoration: none; padding: 4px 0; border-top: 1px solid var(--border); }
.bc-linha:hover { color: var(--text); text-decoration: underline; }
.cab-acoes .periodo .sel { min-height: 40px; }
@media (max-width: 760px) {
  .la { grid-template-columns: minmax(0, 1fr) auto; }
  .la-prox { grid-column: 1 / -1; }
  .cab-acoes { flex-wrap: wrap; }
}

/* Tabela e política no padrão (05/11): uma seção por aba, pílula da tabela da cidade, cidades em gaveta */
.tb-secao { display: flex; flex-direction: column; gap: 14px; }
.pill.tb-reg { background: var(--surface-2); color: var(--text); }
.pill.tb-btu { background: var(--warn-bg); color: var(--warn-fg); }
.gaveta .mc-lista { max-height: none; overflow: visible; }
.gaveta .busca { flex: none; }
div.cartao { color: var(--text); }

/* Cobertura no padrão (05/11): resultado em pílula, dados em duas colunas, painel da Nio recolhido */
.pill.cob-bad { background: var(--bad-bg); color: var(--bad-fg); }
.pill.cob-warn { background: var(--warn-bg); color: var(--warn-fg); }
.cob-pill { font-size: 13px; font-weight: 600; padding: 4px 12px; }
.cob-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
details.cob-det > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
details.cob-det > summary::-webkit-details-marker { display: none; }
details.cob-det > summary::before { content: "\25B8"; color: var(--muted); display: inline-block; transition: transform .15s; }
details.cob-det[open] > summary::before { transform: rotate(90deg); }
details.cob-det > summary h2 { font-size: 15px; }
@media (max-width: 760px) {
  .cob-dados { grid-template-columns: 1fr; }
}

/* Meta Ads › Bairros prioritários (05/11): cartão marcável no celular */
.cartao.marcado { border-color: var(--accent); }
label.cartao { cursor: pointer; }
.cartao .valor input, .tab td.ck input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Telas "em breve" e login (05/11) */
.nav-item .tag-breve { margin-left: auto; font-family: var(--dm); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; }
.nav-item.breve:not(.ativo) { opacity: .6; }
.vazio-tela { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 640px; padding: 28px; border-radius: 12px; border: 1px dashed var(--border-strong); background: var(--surface); }
.vazio-tela p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.login-box .campo input { min-height: 42px; background: var(--bg); font-size: 14px; }
.login-box .btn { min-height: 42px; }

/* Adimplência e Conciliação (prompt nº 14b, 05/11): chave "dados de exemplo", faixa EXEMPLO, 10 bolinhas de fatura,
   valores com sinal, composição na gaveta. Cores só dos tokens (laranja = --warn-dot). */
.chave { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.chave input { appearance: none; -webkit-appearance: none; position: relative; width: 34px; height: 20px; margin: 0; flex: 0 0 34px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-strong); cursor: pointer; transition: background .15s; }
.chave input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.chave input:checked { background: var(--warn-bg); border-color: var(--warn-border); }
.chave input:checked::after { transform: translateX(14px); background: var(--warn-dot); }
.chave input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chave:has(input:checked) { color: var(--warn-fg); font-weight: 600; }
.faixa-exemplo { position: sticky; top: 0; z-index: 5; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.faixa-exemplo b { letter-spacing: .04em; }
.fat10 { display: inline-flex; align-items: center; gap: 4px; }
.fat10 i { display: block; width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; box-sizing: border-box; background: var(--surface-2); }
.fat10 i.paga { background: var(--ok-fg); }
.fat10 i.paga.tarde { box-shadow: 0 0 0 2px var(--warn-dot); }
.fat10 i.ate15 { background: var(--warn-dot); }
.fat10 i.mais15 { background: var(--bad-dot); }
.fat10 i.avencer { background: var(--muted); }
.fat10 i.futura { background: none; border: 1px solid var(--border-strong); }
.legenda { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.legenda .fat10 { margin-left: 8px; }
.legenda .fat10:first-child { margin-left: 0; }
.legenda .fat10 i { width: 9px; height: 9px; flex-basis: 9px; }
.legenda.so-movel { display: none; font-size: 12px; color: var(--muted); padding: 4px 2px; }
.tab .num.neg, .comp .num.neg, .kpi .val.neg { color: var(--bad-fg); }
.tab .num.pos, .comp .num.pos { color: var(--ok-fg); }
.tab .num small { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); }
.tab td.motivo { max-width: 300px; font-size: 13px; }
.comp { width: 100%; border-collapse: collapse; font-size: 13px; }
.comp td { padding: 7px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.comp td small { display: block; font-size: 11px; color: var(--muted); }
.comp td.num { text-align: right; font-family: var(--mono); white-space: nowrap; padding-left: 12px; }
.comp tr.total td { font-weight: 700; border-bottom: 0; }
.comp tr.vazio td { color: var(--muted); }
.sel.ciclo { min-width: 220px; }
.rodape-ciclo { align-items: center; }
.rodape-ciclo .nf { font-size: 14px; color: var(--text); }
.rodape-ciclo .nf b { font-family: var(--mono); }
.contestacao textarea { min-height: 72px; resize: vertical; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font: inherit; font-size: 14px; }
@media (max-width: 760px) {
  .cab-acoes { width: 100%; justify-content: space-between; }
  .legenda.so-movel { display: flex; }
  .faixa-exemplo { top: 57px; }   /* abaixo da barra ☰ (sticky, ~57 px) */
  .sel.ciclo { min-width: 0; flex: 1 1 100%; }
  .cartao .fat10 i { width: 13px; height: 13px; flex-basis: 13px; }
}
.cartao .valor.neg { color: var(--bad-fg); } .cartao .valor.pos { color: var(--ok-fg); }

/* ---------- Programa Parceiro PAP (prompt 25, 06/11) ---------- */
.pill.p-aguardando, .pill.pg-previsto, .pill.cf-pendente { background: var(--warn-bg); color: var(--warn-fg); }
.pill.p-ativo, .pill.pg-pago, .pill.cf-aprovada { background: var(--ok-bg); color: var(--ok-fg); }
.pill.p-suspenso, .pill.cf-devolvida, .pill.pg-atrasado { background: var(--bad-bg); color: var(--bad-fg); }
.pill.p-desligado, .pill.pg-cancelado { background: var(--surface-dim); color: var(--muted); border: 1px solid var(--border); }
.pill.cf-reprovada { background: var(--bad-bg); color: var(--bad-fg); }
.tab td.num, .tab th.num { text-align: right; font-family: var(--mono); }
.tab td.num-s { text-align: right; }
.f-bloco .tab { width: 100%; font-size: 13px; }
.f-bloco .tab th, .f-bloco .tab td { padding: 6px 8px; }
.cfg-linha { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cfg-linha:last-child { border-bottom: 0; }
.cfg-linha small { display: block; color: var(--muted); font-size: 11px; }
.cfg-linha input { min-height: 38px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 0 10px; width: 100%; }
.cfg-linha input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.cfg-linha.tres { grid-template-columns: minmax(0, 1fr) 90px 150px; }
.cfg-degrau { display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: 8px; align-items: end; }
.cfg-bloco { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.cfg-bloco h3 { margin: 0; font-size: 14px; }
.cfg-bloco > p { margin: 0; font-size: 12px; color: var(--muted); }
.cfg-bloco input[type=number], .cfg-bloco input[type=text], .cfg-bloco textarea, .cfg-bloco select { min-height: 40px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 0 10px; width: 100%; }
.cfg-bloco textarea { padding: 8px 10px; min-height: 120px; resize: vertical; }
.cfg-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.cfg-grade .campo input { min-height: 40px; background: var(--bg); }
.cfg-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cfg-termos { display: flex; flex-direction: column; }
.cfg-termos .t { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cfg-termos .t:last-child { border-bottom: 0; }
.margem-tab td.num, .margem-tab th.num { text-align: right; white-space: nowrap; }
.rolagem-s { overflow-x: auto; }
.conf-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); }
.conf-card.atrasada { border-color: var(--bad-border); }
.conf-card h3 { margin: 0; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conf-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.conf-botoes .sel { min-height: 40px; }
@media (max-width: 760px) {
  .cfg-linha.tres { grid-template-columns: minmax(0, 1fr) 110px; }
  .cfg-linha.tres > :nth-child(2) { grid-column: 1; }
}

/* ---------- 06/11 (prompt 27): ficha — Viabilidade pelo portal e Dados para o portal PAP ---------- */
.portal-card .d-l b { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pista-dfv { font-size: 12px; color: var(--muted); line-height: 1.45; cursor: help; }
.pista-dfv span { font-family: var(--dm); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; margin-right: 4px; }
.pp-etapa { display: flex; flex-direction: column; gap: 2px; }
.pp-linha { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) 36px; gap: 8px; align-items: center; min-height: 34px; border-bottom: 1px solid var(--border); }
.pp-linha:last-child { border-bottom: 0; }
.pp-rot { font-size: 12px; color: var(--muted); }
.pp-val { font-size: 13px; overflow-wrap: anywhere; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pp-linha.falta .pp-rot { color: var(--bad-fg); }
.pp-copiar { min-width: 32px; padding: 2px 6px; }
@media (max-width: 760px) { .pp-linha { grid-template-columns: minmax(0, 1fr) 40px; } .pp-rot { grid-column: 1 / -1; margin-top: 6px; } }

/* ---------- 06/11 (prompt 27): tela Mari — status do Chatwoot ---------- */
.cw { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cw small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.pill.cw-aberta { background: var(--warn-bg); color: var(--warn-fg); }
.pill.cw-resolvida { background: var(--surface-dim); color: var(--muted); border: 1px solid var(--border); }
.pill.cw-adiada { background: var(--info-bg); color: var(--info-fg); }
.etiquetas { display: flex; gap: 4px; flex-wrap: wrap; }
.etiquetas .chip { font-size: 10px; padding: 2px 6px; cursor: help; }
.com-ajuda { cursor: help; }

/* ---------- 07/11 (prompt 28): bolinhas da cadência — acesa enviada · piscando próxima · apagada futura ---------- */
.cad-bolas { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.cad-b { font-family: var(--dm); font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted); background: transparent; cursor: help; white-space: nowrap; }
.cad-b.on { background: var(--ok-bg); border-color: var(--ok-fg); color: var(--ok-fg); }
.cad-b.prox { background: var(--warn-bg); border-color: var(--warn-dot); color: var(--warn-fg); animation: cad-pisca 1.4s ease-in-out infinite; }
.cad-b.off { opacity: .5; }
.cad-b:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
@keyframes cad-pisca { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cad-b.prox { animation: none; outline: 2px solid var(--warn-dot); } }
.pill.m-futuro { background: var(--info-bg); color: var(--info-fg); }

/* ---------- 06/11 (prompt 27): menu lateral — contadores ---------- */
.nav-item .badge.alerta { background: var(--bad-dot); }
.nav-item .badge.info { background: var(--info-fg); }

/* ---------- 07/11: ficha — régua das etapas fixa no cabeçalho, cartões do portal recolhíveis, orelha da conversa ---------- */
.f-cab .f-tempo { margin-top: 10px; }
.f-cab .f-saida-linha { margin-top: 8px; }
.conf-card.recolhe { padding: 0; gap: 0; }
.cc-cab { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; }
.cc-tog { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cc-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cc-tog::before { content: "\25B8"; color: var(--muted); display: inline-block; transition: transform .15s; }
.conf-card.aberto .cc-tog::before { transform: rotate(90deg); }
.cc-tog b { font-size: 14px; font-weight: 600; }
.cc-tog small { font-size: 12px; color: var(--muted); }
.cc-tog small.warn-txt { color: var(--warn-fg); }
.cc-corpo { display: none; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.conf-card.aberto .cc-corpo { display: flex; }

/* Orelha: presa à borda esquerda da gaveta; o painel abre à esquerda da ficha (a gaveta é o bloco de referência). */
.ficha { --conv-w: min(460px, calc(100vw - 640px)); }
.f-orelha { position: absolute; top: 132px; right: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 32px; min-height: 124px; padding: 12px 0;
  border: 1px solid var(--border-strong); border-right: 0; border-radius: 10px 0 0 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .5px;
  cursor: pointer; box-shadow: -6px 0 16px rgba(0, 0, 0, .35); }
.f-orelha span { writing-mode: vertical-rl; transform: rotate(180deg); }
.f-orelha:hover, .f-orelha[aria-expanded="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.f-orelha:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ficha.conv-on .f-orelha { right: calc(100% + var(--conv-w)); }
.f-conv { position: absolute; top: 0; bottom: 0; right: 100%; z-index: 1; width: var(--conv-w); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(0, 0, 0, .45); }
.f-conv[hidden] { display: none; }
.f-conv-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--border); }
.f-conv-cab b { display: block; font-size: 14px; }
.f-conv-cab small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.f-conv-acoes { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.f-conv-acoes .btn { min-height: 32px; }
.conversa.f-conv-corpo { flex: 1; min-height: 0; max-height: none; border: 0; border-radius: 0; padding: 14px; }
/* Página cheia (venda.html): orelha e painel presos à esquerda da janela. */
.ficha.f-pagina { --conv-w: min(460px, 100vw); }
.ficha.f-pagina .f-orelha { position: fixed; right: auto; left: 0; top: 40%; z-index: 46; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 10px 10px 0; box-shadow: 6px 0 16px rgba(0, 0, 0, .35); }
.ficha.f-pagina.conv-on .f-orelha { left: var(--conv-w); right: auto; }
.ficha.f-pagina .f-conv { position: fixed; left: 0; right: auto; z-index: 46; border-left: 0; border-right: 1px solid var(--border); box-shadow: 12px 0 32px rgba(0, 0, 0, .45); }
/* Sem espaço à esquerda da gaveta: o painel cobre a ficha (× fecha); a orelha fica dentro da borda no celular. */
@media (max-width: 1000px) {
  .ficha.f-gaveta { --conv-w: 100%; }
  .ficha.f-gaveta .f-conv { right: 0; left: 0; width: auto; z-index: 7; border-left: 0; box-shadow: none; }
  .ficha.f-gaveta.conv-on .f-orelha { display: none; }
}
@media (max-width: 760px) {
  .ficha.f-gaveta .f-orelha { right: auto; left: 0; top: auto; bottom: 88px; width: 26px; min-height: 96px; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 10px 10px 0; }
  .ficha.f-pagina.conv-on .f-orelha { display: none; }
}

/* ---------- 0064 (08/11): pendência com terceiro ("Em espera") ---------- */
.prox.espera { color: var(--info-fg); }
.prox.espera::before { background: var(--info-bg); border-color: var(--info-fg); }
.qcard.espera { border-left: 3px solid var(--info-fg); }
.f-prox.espera { background: var(--info-bg); border-color: #34507A; }
.f-prox.espera b { color: var(--info-fg); }
.abas.pilulas .aba.espera b { background: var(--info-bg); color: var(--info-fg); }
.col-head .c-espera { font-family: var(--mono); font-size: 11px; color: var(--info-fg); margin-left: 6px; font-weight: 500; }
.pend-card.espera { border-color: #34507A; }
.pend-card.vencida { border-color: var(--bad-border); background: var(--bad-bg); }
.pend-card .cc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pend-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.pend-card .pend-guia { margin-left: auto; font-size: 12px; color: var(--muted); }
.pend-hist { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.pend-hist b { color: var(--text); font-weight: 600; }
.pill.pend-espera { background: var(--info-bg); color: var(--info-fg); }
.pill.pend-vencida { background: var(--bad-bg); color: var(--bad-fg); }
.pill.pend-adiada { background: var(--warn-bg); color: var(--warn-fg); }
.espera-ajuda { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 12px; color: var(--muted); margin: -4px 0 4px; }

/* ---------- Guia do Backoffice (08/11) ---------- */
.nav-guia { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: var(--muted); text-decoration: none; }
.nav-guia:hover { color: var(--text); text-decoration: underline; }
.nav-guia .novo { color: var(--info-fg); font-size: 11px; }
.guia-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.guia-indice { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 24px); overflow: auto; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.guia-indice a { display: block; padding: 5px 8px; border-radius: 6px; font-size: 13px; color: var(--muted); text-decoration: none; }
.guia-indice a.sub { padding-left: 18px; font-size: 12px; }
.guia-indice a:hover, .guia-indice a.ativo { color: var(--text); background: var(--surface-2); }
.guia-texto { min-width: 0; max-width: 820px; padding: 4px 24px 24px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); line-height: 1.6; font-size: 14.5px; }
.guia-texto h1 { font-size: 24px; margin: 18px 0 8px; }
.guia-texto h2 { font-size: 19px; margin: 30px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); scroll-margin-top: 12px; }
.guia-texto h3 { font-size: 15.5px; margin: 22px 0 6px; scroll-margin-top: 12px; }
.guia-texto p, .guia-texto ul, .guia-texto ol { margin: 8px 0; }
.guia-texto li { margin: 3px 0; }
.guia-texto code { font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); }
.guia-texto blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--info-fg); background: var(--info-bg); border-radius: 0 8px 8px 0; color: var(--text); }
.guia-texto table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; display: block; overflow-x: auto; }
.guia-texto th, .guia-texto td { text-align: left; padding: 6px 10px; border: 1px solid var(--border); vertical-align: top; }
.guia-texto th { background: var(--surface-2); }
.guia-texto hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.guia-texto mark { background: var(--warn-bg); color: var(--warn-fg); border-radius: 3px; padding: 0 2px; }
.guia-texto :target { outline: 2px solid var(--info-fg); outline-offset: 4px; border-radius: 4px; }
.guia-rodape { margin-top: 18px; font-size: 12px; color: var(--muted); }
.guia-busca { width: 100%; margin-bottom: 8px; }
@media (max-width: 900px) {
  .guia-wrap { grid-template-columns: 1fr; }
  .guia-indice { position: static; max-height: none; }
  .guia-texto { padding: 4px 16px 18px; }
}

/* ==========================================================================
   Mari · Lista | Quadro + termômetro de dados (09/11, migration 0072) — docs/mari.html
   Cores das colunas vêm de config_mari_colunas.cor (muted · info · warn · ok · bad).
   ========================================================================== */
.quadro-mari .qv-col { min-width: 230px; }
.qcard.mq { cursor: pointer; gap: 5px; }
.qcard.mq:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qcard.mq.trava { border-color: var(--bad-dot); box-shadow: inset 0 0 0 1px var(--bad-dot); }
.qcard.mq .mq-local { font-weight: 400; color: var(--muted); font-size: 12px; }
.mq-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.mq-meta { color: var(--muted); font-size: 11.5px; }
.mq-meta .warn { color: var(--warn-fg); } .mq-meta .bad, .mq-teto { color: var(--bad-fg); font-weight: 600; }
.mq-vez { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.mq-vez.humano { color: var(--warn-fg); } .mq-vez.mari { color: var(--info-fg); }
.mq-vez.atrasada { color: var(--bad-fg); }
.mq-enc { font-size: 12px; color: var(--muted); }
.mq-c-info { color: var(--info-fg); } .mq-c-ok { color: var(--ok-fg); } .mq-c-warn { color: var(--warn-fg); } .mq-c-bad { color: var(--bad-fg); }
.col-head .c-acao { color: var(--bad-fg); font-weight: 600; }
.mq-col { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); white-space: nowrap; }
.mq-col.info { color: var(--info-fg); } .mq-col.ok { color: var(--ok-fg); } .mq-col.warn { color: var(--warn-fg); } .mq-col.bad { color: var(--bad-fg); } .mq-col.muted { color: var(--muted); }
/* termômetro: segmento cinza = falta · âmbar = coletado · verde = validado */
.mq-termo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; outline: none; }
.mq-termo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mq-termo .tm { display: inline-flex; gap: 2px; flex: none; }
.mq-termo .tm i { display: block; flex: none; padding: 0; width: 10px; height: 8px; border-radius: 2px; background: var(--border); }
.mq-termo .tm i.tm-coletado { background: var(--warn-dot); }
.mq-termo .tm i.tm-validado { background: var(--ok-fg); }
.mq-termo .tm-txt { font-size: 12px; color: var(--muted); }
.qcard.mq .mq-termo .tm i { width: 14px; }
.mq-termo.curto .tm i { width: 6px; }
.mq-trava { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.mq-trava.ok { color: var(--ok-fg); border-color: transparent; padding-left: 0; }
.mq-trava.pendente { color: var(--muted); }
.mq-trava.bloqueia { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-border); font-weight: 600; }
.mq-travas { display: flex; flex-wrap: wrap; gap: 4px; }
.mq-alerta { font-size: 11.5px; color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-border); padding: 1px 6px; border-radius: 5px; }
.mq-selo { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; text-decoration: none; }
.mq-selo.ok { color: var(--ok-fg); background: var(--ok-bg); }
.mq-selo.bad { color: var(--bad-fg); background: var(--bad-bg); border: 1px solid var(--bad-border); }
.mq-selo.venda { color: var(--info-fg); background: var(--info-bg); }
.mq-selo.venda:hover { text-decoration: underline; }
.mq-toq { font-size: 12px; } .mq-toq.warn { color: var(--warn-fg); } .mq-toq.bad { color: var(--bad-fg); font-weight: 600; }
.lista.padrao .tab td small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tab tr.mq-tr-trava td:first-child { box-shadow: inset 3px 0 0 var(--bad-dot); }
.mq-itens { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.mq-itens li small { color: var(--muted); font-size: 11.5px; }
.mq-itens li.tm-validado span { color: var(--ok-fg); } .mq-itens li.tm-coletado span { color: var(--warn-dot); } .mq-itens li.tm-vazio span { color: var(--muted); }
.cartoes .qcard.mq { padding: 12px 14px; border-radius: 12px; }

/* Faixa "primeira venda" no topo do Painel (onda 2.1, 09/11): meta × instaladas + ritmo | paradas por etapa. */
.faixa-meta { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 14px; align-items: stretch;
  padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); }
.faixa-meta > .carregando { grid-column: 1 / -1; }
.fm-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 14px; border-right: 1px solid var(--border); }
.fm-meta .rot { font-size: 11px; color: var(--muted); text-transform: none; }
.fm-meta .val { font-size: 13px; color: var(--muted); } .fm-meta .val b { font-size: 24px; color: var(--text); font-weight: 600; }
.fm-meta .barra { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 2px 0; }
.fm-meta .barra i { display: block; height: 100%; background: var(--accent); }
.fm-ritmo { font-size: 12.5px; color: var(--text); } .fm-ritmo b { font-family: var(--mono); font-weight: 600; }
.fm-etapas { display: flex; align-items: stretch; gap: 4px; min-width: 0; overflow-x: auto; }
.fm-seta { align-self: center; color: var(--muted); font-size: 12px; flex: none; }
.fm-etapa { flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.fm-etapa:hover { border-color: var(--border-strong); }
.fm-etapa .fm-nome { font-size: 11px; color: var(--muted); white-space: nowrap; }
.fm-etapa .fm-n { font-size: 20px; font-weight: 600; line-height: 1.2; }
.fm-etapa .fm-velha { font-size: 11px; color: var(--muted); white-space: nowrap; }
.fm-etapa .fm-atraso { font-size: 11px; color: var(--bad-fg); font-weight: 600; }
.fm-etapa.vazia .fm-n { color: var(--muted); }
.fm-etapa.bad { background: var(--bad-bg); border-color: var(--bad-border); } .fm-etapa.bad .fm-n { color: var(--bad-fg); }
@media (max-width: 900px) {
  .faixa-meta { grid-template-columns: 1fr; }
  .fm-meta { padding-right: 0; padding-bottom: 10px; border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .fm-etapas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .fm-seta { display: none; }
  .fm-etapa { min-width: 0; }
}
/* Vendas ?parada= (vindo da faixa do Painel): aviso do filtro com ×. */
.filtro-parada { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.filtro-parada b { color: var(--text); }
.filtro-parada button { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 2px 10px; cursor: pointer; font: inherit; }
.filtro-parada button:hover { color: var(--text); border-color: var(--border-strong); }

/* Ficha única · fase 1 (onda 3.1, 09/11): selos de aviso na ficha e na Nova venda. Só aviso, nada bloqueia. */
.selos-ficha { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: center; }
.selo-ficha { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; line-height: 1.35;
  border: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-fg); text-decoration: none; }
.selo-ficha.bad { border-color: var(--bad-border); background: var(--bad-bg); color: var(--bad-fg); }
a.selo-ficha:hover { filter: brightness(1.15); }
.selo-ficha-nota { flex-basis: 100%; font-size: 11px; color: var(--muted); }
/* Resumo de ontem (onda 3.2, 09/11): texto pronto para copiar. */
.resumo-ontem { grid-column: 1 / -1; }
.resumo-txt { margin: 4px 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font: 12.5px/1.5 var(--sans); color: var(--text); white-space: pre-wrap; word-break: break-word; }
/* Meta Ads › Desempenho: 6 cartões (0078 — "Saldo em aberto" à esquerda do Gasto) e o pisca da cobrança chegando. */
@media (min-width: 1200px) { .kpis.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1199px) { .kpis.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi.saldo-meta .nota b { color: var(--text); font-weight: 600; }
.kpi.saldo-meta .fonte { font-size: 10.5px; color: var(--muted); }
.kpi.saldo-meta.sem-leitura { opacity: .7; } .kpi.saldo-meta.sem-leitura .val { color: var(--muted); }
.kpi.saldo-meta.pisca { border-color: var(--warn-border); background: var(--warn-bg); animation: saldo-pisca 1.6s ease-in-out infinite; }
.kpi.saldo-meta.pisca .rot, .kpi.saldo-meta.pisca .val { color: var(--warn-fg); }
@keyframes saldo-pisca { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 184, 75, 0); } 50% { box-shadow: 0 0 0 3px rgba(242, 184, 75, .45); border-color: var(--warn-dot); } }
@media (prefers-reduced-motion: reduce) { .kpi.saldo-meta.pisca { animation: none; } }
/* Alarme de silêncio (0081, 09/11): selo vermelho "Sem resposta há N min" na tela Mari. */
.mq-alerta.mq-silencio { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-border); font-weight: 600; }

/* 09/11 — botão "Atualizar" das telas com dados vivos (NG.botaoAtualizar): busca de novo sem F5. */
.btn-atualizar { gap: 6px; }
.btn-atualizar .ico { display: inline-block; font-size: 15px; line-height: 1; }
.btn-atualizar.girando { cursor: progress; color: var(--muted); }
.btn-atualizar.girando .ico { animation: ng-gira .8s linear infinite; }
@keyframes ng-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-atualizar.girando .ico { animation: none; } }
@media (max-width: 760px) { .btn-atualizar .txt { display: none; } .btn-atualizar { flex: 0 0 auto; padding: 0 12px; } }

/* 0087: funil do mês no Painel (lead → venda = OS aberta → instalada → ativa) */
.funil-mes { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.funil-mes:empty { display: none; }
.fu-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.fu-cab > b { color: var(--text); font-size: 13px; }
.fu-cab span b { color: var(--text); }
.fu-etapas { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; }
.fu-fase { display: none; }
.fu-seta { align-self: center; color: var(--muted); font-size: 12px; flex: none; }
.fu-seta.corte { color: var(--accent); font-weight: 700; font-size: 16px; padding: 0 2px; }
.fu-etapa { flex: 1 1 0; min-width: 88px; display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.fu-etapa.venda { border-color: var(--accent); }
.fu-nome { font-size: 11px; color: var(--muted); white-space: nowrap; }
.fu-n { font-size: 20px; font-weight: 600; line-height: 1.2; }
.fu-etapa.vazia .fu-n { color: var(--muted); }
.fu-pct { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ───────── 09/11 (0089/0090) jornada única · ficha por status · conversa no NIOGEN · Minha vez ───────── */
.pill.conversa { background: #222B45; color: #AFC0FF; }
.pill.pedido { background: var(--warn-bg); color: var(--warn-fg); }
.pill.vendido { background: var(--ok-bg); color: var(--ok-fg); }
.q-trilho i.et-pedido { background: var(--warn-dot); }
.q-trilho i.et-vendido { background: var(--accent); }
.q-trilho i.et-instalado { background: var(--ok-fg); }
.ico-dono { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin-right: 3px; }

/* ficha */
.f-menu-sep { display: block; padding: 8px 12px 4px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); font-family: var(--mono); }
.f-convbar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.f-convbar:hover, .f-convbar.on { border-color: var(--border-strong); background: #222936; }
.f-convbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-cb-ico { font-size: 18px; }
.f-cb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.f-cb-txt small { font-size: 12px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.f-cb-acao { font-size: 12px; color: var(--muted); white-space: nowrap; }
.f-rot { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.f-jornada { display: flex; flex-direction: column; gap: 6px; }
.f-jornada ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.f-jornada li { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.f-jornada li i { display: block; height: 4px; border-radius: 2px; background: var(--surface-2); }
.f-jornada li.feito i { background: color-mix(in srgb, var(--c) 55%, transparent); }
.f-jornada li.atual i { background: var(--c); }
.f-jornada li.atual, .f-jornada li.feito { color: var(--text); }
.f-jornada li.atual span { font-weight: 600; }
.f-jornada li span, .f-jornada li small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-jornada li small { font-size: 10.5px; color: var(--muted); }
.f-prox { flex-direction: column; align-items: stretch; }
.f-prox-txt { flex: 0 0 auto; }
.f-prox .f-rot { display: block; }
.f-prox.espera { background: var(--info-bg); border-color: #34507A; }
.f-prox.espera b { color: var(--info-fg); }
.f-prox.ok { background: var(--surface-2); }
.f-prox-bts { justify-content: flex-start; margin-left: 0; }
.f-prox-form .f-formulario { margin: 0; padding: 0; border: 0; background: none; }
.f-prox-form .f-formulario h3 { display: none; }
.f-sozinho { font-size: 12px; color: var(--muted); }
.f-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.f-form-solto .f-formulario { margin: 0; }
.f-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gaveta .f-status, .ficha.f-lado .f-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f-sb { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-dim); font-size: 12.5px; min-width: 0; }
.f-sb strong { font-size: 13.5px; }
.f-sb > span { color: var(--muted); overflow-wrap: anywhere; }
.f-sb .f-dono { color: var(--text); display: flex; align-items: center; }
.f-ck { color: var(--muted) !important; }
.f-ck b { display: inline-block; width: 14px; }
.f-ck.ok { color: var(--text) !important; }
.f-ck.ok b { color: var(--ok-fg); }
.f-lembretes { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; }
.f-lb-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.f-lb-cab .btn { min-height: 28px; }
.f-cad { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.f-cad-p { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.f-cad-p.ok { color: var(--ok-fg); border-color: #2F5A37; }
.f-cad-p.cur { color: var(--warn-fg); border-color: var(--warn-border); }
.f-cad-s { color: var(--muted); font-style: normal; }
.f-itens { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.f-item { font-size: 12px; color: var(--muted); }
.f-item.ok { color: var(--ok-fg); }
.f-item.meio { color: var(--warn-fg); }
.f-detalhes-cab { align-self: stretch; text-align: left; padding: 9px 12px; border: 1px dashed var(--border-strong); border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.f-detalhes-cab:hover { color: var(--text); }
.f-detalhes { display: flex; flex-direction: column; gap: 12px; }
.f-detalhes[hidden] { display: none; }
.f-conv-host { flex: 1; min-height: 0; display: flex; }
.f-conv-host > .cvp-raiz { flex: 1; min-height: 0; display: flex; }
.ficha.f-lado { height: 100%; }
.ficha.f-lado .f-cab { padding: 14px 16px 10px; }
.ficha.f-lado .f-corpo { padding: 12px 16px 24px; }
@media (max-width: 760px) { .f-status { grid-template-columns: 1fr 1fr; } .f-jornada li span { font-size: 10.5px; } }

/* conversa (assets/conversa.js) */
.cvp-raiz { display: flex; min-height: 0; height: 100%; width: 100%; }
.cvp { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.f-conv .cvp { border-radius: 0; border: 0; }
.cvp-l1, .cvp-l2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.cvp-l1 .btn { min-height: 30px; }
.cvp-nome { font-size: 14px; }
.cvp-sep { width: 1px; align-self: stretch; background: var(--border); }
.cvp-f { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cvp-f select, .cvp-l2 select, .cvp-ctl select { height: 30px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12.5px; padding: 0 8px; }
.cvp-cw { margin-left: auto; font-size: 12.5px; }
.cvp-tg { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-family: var(--mono); }
.cvp-tg.vazia { padding-right: 8px; color: var(--muted); }
.cvp-tg button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.cvp-tg button:hover { color: var(--bad-fg); }
.cvp-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.cvp-b { max-width: 78%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--border); }
.cvp-b small { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; white-space: normal; }
.cvp-b.cli { align-self: flex-start; }
.cvp-b.mari { align-self: flex-end; background: #1C2B3F; border-color: #2B4466; }
.cvp-b.hum { align-self: flex-end; background: #1E3A24; border-color: #2F5A37; }
.cvp-b.nota { align-self: flex-end; background: var(--warn-bg); border-color: var(--warn-border); }
.cvp-b.pend { opacity: .75; border-style: dashed; }
.cvp-b.falhou { opacity: 1; border-color: var(--bad-border); background: var(--bad-bg); }
.cvp-b.sis { align-self: center; max-width: 92%; background: none; border: 0; color: var(--muted); font-size: 11.5px; padding: 2px 6px; text-align: center; }
.cvp-pe { border-top: 1px solid var(--border); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.cvp.nota .cvp-pe { background: #221D12; }
.cvp-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cvp-seg button { min-height: 30px; }
.cvp-seg button.on { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.cvp-ajuda { font-size: 11.5px; color: var(--muted); }
.cvp-caixa { display: flex; gap: 8px; align-items: flex-end; }
.cvp-caixa textarea { flex: 1; min-height: 44px; max-height: 160px; resize: vertical; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; padding: 9px 11px; }
.cvp-caixa .btn { min-height: 44px; }

/* Minha vez (fila.html) */
.main.mv { display: flex; flex-direction: column; gap: 10px; }
.mv-vista button.on, .mv-tabs button.on { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.mv-intro { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 13px; }
.mv-intro ol { margin: 6px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.mv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; flex: 0 0 auto; }
.mv-funil { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 8px; align-items: stretch; }
.mv-st { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.mv-st:hover { border-color: var(--border-strong); }
.mv-st.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mv-st b { display: flex; align-items: center; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-st-n { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.mv-st-c { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.mv-st-c strong { font-size: 18px; font-family: var(--mono); }
.mv-vz { color: var(--warn-fg); font-weight: 600; }
.mv-fora { align-self: center; font-size: 12px; color: var(--muted); padding: 0 6px; white-space: nowrap; }
.mv-funil.fino { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-funil.fino button { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.mv-trab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 540px); gap: 12px; height: calc(100vh - 250px); min-height: 460px; }
.mv-trab.com-conversa { height: calc(100vh - 160px); }
.mv-trab[hidden] { display: none; }
.mv-lista { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.mv-trab.com-conversa .mv-lista { border: 0; background: none; }
.mv-ficha { min-height: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.mv-ficha[hidden] { display: none; }
.mv-ficha-vazia { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); font-size: 13px; }
.mv-ficha-vazia[hidden] { display: none; }
.mv-abas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.mv-tabs { display: flex; gap: 6px; }
.mv-tabs button { padding: 5px 12px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.mv-rolar { flex: 1; min-height: 0; overflow-y: auto; }
.mv-row { display: grid; grid-template-columns: 150px minmax(140px, 1.1fr) minmax(180px, 2fr) 56px 140px 120px; align-items: center; gap: 10px; padding: 9px 12px 9px 14px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative; font-size: 13px; }
.mv-row:not(.mv-cab):hover { background: var(--surface-2); }
.mv-row.sel { background: #1F2633; }
.mv-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mv-row::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: transparent; }
.mv-row.agora::before, .mv-kc.agora::before { background: var(--bad-dot); }
.mv-row.hoje::before, .mv-kc.hoje::before { background: var(--warn-dot); }
.mv-row.espera::before, .mv-kc.espera::before { background: var(--info-fg); }
.mv-cab { font-size: 10.5px; color: var(--muted); cursor: default; position: sticky; top: 0; z-index: 1; background: var(--surface); }
.mv-et { display: flex; align-items: center; min-width: 0; font-size: 12px; color: var(--muted); }
.mv-et span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-cli { min-width: 0; display: flex; flex-direction: column; }
.mv-cli b, .mv-cli small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-cli small { color: var(--muted); font-size: 12px; }
.mv-oque { min-width: 0; color: var(--muted); }
.mv-row.agora .mv-oque, .mv-kc.agora .mv-oque { color: var(--bad-fg); }
.mv-row.hoje .mv-oque, .mv-kc.hoje .mv-oque { color: var(--warn-fg); }
.mv-row.espera .mv-oque, .mv-kc.espera .mv-oque { color: var(--info-fg); }
.mv-dono { display: inline-flex; align-items: center; font-size: 12px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-dono.mari { color: var(--info-fg); }
.mv-bt { text-align: right; }
.btn.mv-go { border-color: var(--accent); color: var(--accent); }
.mv-pe { padding: 8px 12px; border-top: 1px solid var(--border); font-size: 11.5px; }
.mv-quadro[hidden] { display: none; }
.mv-quadro { display: flex; flex-direction: column; gap: 10px; }
.mv-quadro > .mv-abas { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.mv-board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; align-items: flex-start; }
.mv-col { flex: 1 1 0; min-width: 230px; display: flex; flex-direction: column; gap: 8px; }
.mv-colh { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 12.5px; }
.mv-colh b { display: flex; align-items: center; }
.mv-cards { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 330px); overflow-y: auto; }
.mv-kc { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 11px 10px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: 12.5px; }
.mv-kc::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; }
.mv-kc:hover, .mv-kc.sel { border-color: var(--border-strong); background: var(--surface-2); }
.mv-kc small { color: var(--muted); }
.mv-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; }
.mv-kc .btn { align-self: flex-start; margin-top: 2px; }
.mv-col-vazia { padding: 4px; font-size: 12px; }
.mv-saida { font-size: 12px; padding: 4px 2px; }
.mv-feito { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #2F5A37; border-radius: 12px; background: #13201A; box-shadow: 0 12px 32px rgba(0, 0, 0, .5); font-size: 12.5px; }
.mv-feito[hidden] { display: none; }
.mv-feito .btn { align-self: flex-start; margin-top: 6px; }
.mv-feito-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.mv-lista { container-type: inline-size; }
.mv-cli .mv-ha-2 { display: none; }
/* Lista estreita (ficha ao lado): a etapa vira só a bolinha, o "há" vai para baixo do nome e o botão continua visível. */
@container (max-width: 820px) {
  .mv-row { grid-template-columns: 14px minmax(110px, 1fr) minmax(130px, 1.5fr) 96px auto; gap: 8px; }
  .mv-et span, .mv-row .mv-ha { display: none; }
  .mv-cli .mv-ha-2 { display: inline; }
  .mv-cab span:nth-child(4) { display: none; }
  .mv-cab span:first-child { visibility: hidden; }
}
@media (max-width: 900px) {
  .mv-trab { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .mv-trab.com-conversa { height: calc(100vh - 140px); }
  .mv-ficha, .mv-ficha-vazia { display: none !important; }
  .mv-funil { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mv-row { grid-template-columns: 1fr auto; grid-template-areas: 'cli bt' 'oque oque' 'dono ha'; gap: 4px 10px; }
  .mv-row.mv-cab { display: none; }
  .mv-row .mv-et { display: none; }
  .mv-row .mv-cli { grid-area: cli; } .mv-row .mv-oque { grid-area: oque; } .mv-row .mv-dono { grid-area: dono; } .mv-row .mv-ha { grid-area: ha; text-align: right; }
  .mv-row .mv-bt { grid-area: bt; display: block; }
}
/* Minha vez · grupo "Acompanhando" (09/11): o que não pede nada agora mas o time acompanha */
.mv-grupo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px 6px; font-size: 12px; border-bottom: 1px solid var(--border); background: var(--surface-dim); position: sticky; top: 34px; z-index: 1; }
.mv-grupo b { font-size: 12.5px; }
.mv-nada { padding: 14px; font-size: 13px; color: var(--ok-fg); border-bottom: 1px solid var(--border); }
.mv-row.acomp, .mv-kc.acomp { opacity: .78; }
.mv-row.acomp:hover, .mv-kc.acomp:hover { opacity: 1; }
.mv-acomp-n { color: var(--muted); font-weight: 400; }
/* Conversas (conversas.html, 0094): lista à esquerda, conversa à direita — como o Chatwoot */
.cv-main { display: flex; flex-direction: column; gap: 10px; }
.cv-trab { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 12px; height: calc(100vh - 150px); min-height: 480px; }
.cv-lista { min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.cv-busca { padding: 10px; border-bottom: 1px solid var(--border); }
.cv-busca input { width: 100%; height: 36px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; padding: 0 10px; }
.cv-filtros { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.cv-filtros button { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.cv-filtros button b { color: var(--text); font-weight: 600; margin-left: 2px; }
.cv-filtros button.on { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.cv-filtros button.alerta b { color: var(--warn-fg); }
.cv-itens { flex: 1; min-height: 0; overflow-y: auto; }
.cv-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px 12px 10px 14px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; position: relative; }
.cv-item:hover { background: var(--surface-2); }
.cv-item.sel { background: #1F2633; }
.cv-item.esperando::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--warn-dot); }
.cv-item.enc { opacity: .6; }
.cv-l1 { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cv-l1 b { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-hora { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }
.cv-item.esperando .cv-hora { color: var(--warn-fg); font-weight: 600; }
.cv-l2 { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-item.esperando .cv-l2 { color: var(--text); }
.cv-l3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11.5px; color: var(--muted); }
.cv-esp { color: var(--warn-fg); font-weight: 600; margin-left: auto; }
.cv-furo { display: inline-block; font-size: 11px; font-weight: 600; color: var(--bad-fg, #b42318); border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.mv-semdono { margin: 0 0 8px; }
.cv-direita { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.cv-vazia { flex: 1; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); font-size: 13px; }
.cv-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.cv-voltar { display: none; }
.cv-host { flex: 1; min-height: 0; display: flex; }
@media (max-width: 900px) {
  .cv-trab { grid-template-columns: 1fr; height: calc(100vh - 140px); }
  .cv-trab .cv-direita { display: none; }
  .cv-trab.com-conversa .cv-lista { display: none; }
  .cv-trab.com-conversa .cv-direita { display: flex; }
  .cv-voltar { display: inline-flex; }
}
/* Conversas: tela fixa no computador — ocupa a altura da janela, sem rolagem da página; só a lista e as mensagens rolam. */
@media (min-width: 761px) {
  body.tela-conversas { height: 100vh; overflow: hidden; }
  body.tela-conversas .app { height: 100vh; min-height: 0; flex-wrap: nowrap; overflow: hidden; }
  body.tela-conversas .nav { height: 100vh; overflow-y: auto; }
  body.tela-conversas .main.cv-main { height: 100vh; min-height: 0; overflow: hidden; padding-bottom: 16px; }
  body.tela-conversas .cv-trab { flex: 1; min-height: 0; height: auto; }
}
/* Conversa no jeito do WhatsApp Web (conversa.js rev. 09/11 ~23h) */
.cvp-meio { position: relative; flex: 1; min-height: 0; display: flex; }
.cvp-meio .cvp-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; gap: 4px; }
.cvp-dia { display: flex; justify-content: center; margin: 10px 0 6px; }
.cvp-dia span { padding: 3px 10px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; }
.cvp-b { position: relative; max-width: min(72%, 560px); padding: 6px 9px 18px; border-radius: 10px; font-size: 13.5px; line-height: 1.42; margin-top: 2px; }
.cvp-b .cvp-t { white-space: pre-wrap; overflow-wrap: anywhere; display: block; }
.cvp-b .cvp-quem { display: block; font-size: 11px; font-weight: 600; color: var(--info-fg); margin-bottom: 1px; }
.cvp-b.hum .cvp-quem { color: var(--ok-fg); }
.cvp-b.nota .cvp-quem { color: var(--warn-fg); }
.cvp-b .cvp-h { position: absolute; right: 8px; bottom: 3px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cvp-b .cvp-tick { font-style: normal; margin-left: 2px; }
.cvp-b.cli { border-top-left-radius: 2px; }
.cvp-b.mari, .cvp-b.hum, .cvp-b.nota { border-top-right-radius: 2px; }
.cvp-b.pend { opacity: .85; border-style: solid; }
.cvp-b.falhou { border-color: var(--bad-border); }
.cvp-erro { display: block; margin-top: 4px; font-size: 11.5px; color: var(--bad-fg); }
.cvp-erro .link { border: 0; background: none; padding: 0; color: var(--link); font: inherit; text-decoration: underline; cursor: pointer; }
.cvp-b.sis { padding: 2px 6px; }
.cvp-novas { position: absolute; right: 18px; bottom: 12px; z-index: 2; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.cvp-novas[hidden] { display: none; }
.cvp-caixa textarea { min-height: 42px; max-height: 150px; resize: none; overflow-y: auto; line-height: 1.4; }
.cvp-caixa textarea[readonly] { opacity: .85; }
.cvp-caixa .btn { min-height: 42px; }
/* Minha vez: tela fixa no computador (como Conversas) — lista, ficha e quadro vão até o pé da janela; só o conteúdo rola. */
@media (min-width: 901px) {
  body.tela-fila { height: 100vh; overflow: hidden; }
  body.tela-fila .app { height: 100vh; min-height: 0; flex-wrap: nowrap; overflow: hidden; }
  body.tela-fila .nav { height: 100vh; overflow-y: auto; }
  body.tela-fila .main.mv { height: 100vh; min-height: 0; overflow: hidden; padding-bottom: 14px; }
  body.tela-fila .mv-trab, body.tela-fila .mv-trab.com-conversa { flex: 1; min-height: 0; height: auto; }
  body.tela-fila .mv-quadro:not([hidden]) { flex: 1; min-height: 0; display: flex; }
  body.tela-fila .mv-board { flex: 1; min-height: 0; align-items: stretch; }
  body.tela-fila .mv-col { min-height: 0; }
  body.tela-fila .mv-cards { flex: 1; min-height: 0; max-height: none; }
}
/* Ficha mais simples (0096): linha curta de status em chips; o próximo passo é o único destaque */
.f-linha-status { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-dim); }
.f-st-g { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; }
.f-st-g .f-rot { width: 76px; flex: 0 0 auto; }
.f-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 12px; white-space: nowrap; }
.f-chip.ok { color: var(--ok-fg); border-color: #2F5A37; }
.f-chip.bad { color: var(--bad-fg); border-color: var(--bad-border); }
.f-chip.espera { color: var(--info-fg); border-color: #34507A; }
.f-atalhos { align-items: center; }
.f-bt-conv { border-color: var(--border-strong); }
.f-local .pill { margin-right: 4px; vertical-align: 1px; }
.f-prox { box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.25); }
/* Lista da Minha vez bem estreita (janela pequena + ficha ao lado): sem rolagem para o lado */
.mv-rolar { overflow-x: hidden; }
@container (max-width: 560px) {
  .mv-row { grid-template-columns: 10px minmax(0, 1fr) minmax(0, 1.25fr) auto; gap: 8px; padding-left: 12px; }
  .mv-row .mv-dono { display: none; }
  .mv-cab span:nth-child(5) { display: none; }
  .mv-row .mv-bt .btn { padding: 0 8px; }
  .mv-tabs button { padding: 4px 8px; }
}
/* Acabamento da ficha (09/11 ~23h30, print do Ricardo) */
/* A pílula "Conversa" herdava a caixa antiga .conversa (altura, borda, coluna): volta a ser pílula. */
.pill.conversa { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; max-height: none; overflow: visible; padding: 3px 10px; border: 0; border-radius: 999px; background: #222B45; color: #AFC0FF; }
/* Linha de baixo do nome: pílula + cidade · plano · origem na mesma linha. */
.f-local { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.f-local .pill { margin-right: 0; }
/* Jornada: nomes inteiros (quebram em 2 linhas se precisar), sem "…". */
.f-jornada li span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; font-size: 11px; }
/* Ações: à esquerda, numa linha que quebra natural; a conversa primeiro. */
.f-atalhos { justify-content: flex-start; gap: 6px; margin-top: 0; }
.f-atalhos .btn { min-height: 32px; }

/* 0096 (09/11 ~23h55, print do Ricardo): lista da Minha vez com colunas fixas (dono alinhado, botões do mesmo tamanho) */
.mv-bt .btn { width: 100%; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-row .mv-dono { justify-content: flex-start; }
@container (max-width: 820px) {
  .mv-row { grid-template-columns: 14px minmax(110px, 1fr) minmax(130px, 1.5fr) 96px 122px; }
}
@container (max-width: 560px) {
  .mv-row { grid-template-columns: 10px minmax(0, 1fr) minmax(0, 1.25fr) 104px; }
}
@media (max-width: 900px) {
  .mv-row { grid-template-columns: 1fr 122px; }
}
/* Ficha: a conversa vira link no começo da linha do nome */
.f-local { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.f-link-conv { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.f-link-conv:hover { text-decoration: underline; }
.f-sep { color: var(--border-strong); }
/* "Dados do cliente e da venda": botão claro, não mais um tracejado apagado */
.f-detalhes-cab { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border-strong); border-style: solid; background: var(--surface-2); color: var(--text); }
.f-detalhes-cab b { font-size: 13px; font-weight: 600; }
.f-detalhes-cab span { font-size: 11.5px; color: var(--muted); }
.f-detalhes-cab:hover { border-color: var(--accent); }
.f-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 12.5px; }
.f-dl dt { color: var(--muted); }
.f-dl dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.f-dl dd span { overflow-wrap: anywhere; }
.f-copia { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 13px; }
.f-copia:hover { color: var(--accent); }

/* ───────── 10/11 (Prompt_pendencia_some_ao_responder, Parte 2): ficha mais leve — nada sai, muda o lugar e o peso ───────── */
.f-nome { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.f-plano { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.f-data { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 5px 10px; border-radius: 8px; border: 1px solid #34507A; background: var(--info-bg); color: var(--info-fg); font-size: 13px; font-weight: 600; }
.f-data.ok { border-color: #2F5A37; background: var(--ok-bg); color: var(--ok-fg); }
.f-data svg { flex: 0 0 auto; }
.f-local { gap: 6px; }
.f-local .f-chip { font-size: 11.5px; padding: 1px 8px; }
.f-local-txt { font-size: 12.5px; color: var(--muted); }
.f-voltar { margin-right: 4px; }
.f-chip.wa { color: var(--warn-fg); border-color: var(--warn-border); }
.f-chip.info { color: var(--info-fg); border-color: #34507A; }
.f-st-nota { font-size: 11.5px; color: var(--muted); }
.f-st-g .f-rot { width: 84px; }
/* Régua de 5 passos: mesma largura cada, ícone + nome e o detalhe embaixo. */
.f-regua { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.f-rp { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 9px 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-dim); }
.f-rp-t { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-rp-t i { font-style: normal; flex: 0 0 auto; }
.f-rp.ok i { color: var(--ok-fg); }
.f-rp.no i, .f-rp.no .f-rp-t { color: var(--muted); }
.f-rp.wa { border-color: var(--warn-border); background: var(--warn-bg); }
.f-rp.wa i, .f-rp.wa .f-rp-d { color: var(--warn-fg); }
.f-rp-d { font-size: 11px; color: var(--muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-rp-d.azul { color: var(--info-fg); }
/* Próximo passo recolhido: mesma altura em todos (rótulo + 1 linha); clique expande. A cor continua dizendo a urgência. */
.f-pp { padding: 0; gap: 0; }
.f-pp-cab { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; height: 62px; padding: 10px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
.f-pp-cab:disabled { cursor: default; }
.f-pp-cab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.f-pp-rot { display: flex !important; justify-content: space-between; gap: 8px; }
.f-pp-cab b { display: block; margin: 0 !important; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-pp-corpo { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.f-pp-corpo .f-atalhos { padding-top: 4px; border-top: 1px solid var(--border); }
.f-pp.ok .f-pp-cab b, .f-pp.dim .f-pp-cab b { color: var(--text); }
.f-col-a, .f-col-b { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Sem conversa (modo foco): a ficha usa a largura toda em 2 colunas — esquerda: nome, régua, próximo passo · direita: dados. */
.ficha.f-largo .f-corpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; padding: 18px 24px 24px; }
.ficha.f-largo .f-cab { padding: 18px 24px 12px; }
/* Fora da Minha vez: gaveta mais larga (o resto da tela escurece pelo véu). */
.gaveta.larga { width: min(800px, 100vw); }
.ficha { --conv-w: min(460px, calc(100vw - 840px)); }
@media (max-width: 1300px) {
  .ficha.f-gaveta { --conv-w: 100%; }
  .ficha.f-gaveta .f-conv { right: 0; left: 0; width: auto; z-index: 7; border-left: 0; box-shadow: none; }
  .ficha.f-gaveta.conv-on .f-orelha { display: none; }
}
@media (max-width: 760px) {
  .f-regua { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .ficha.f-largo .f-corpo { display: flex; }
}
/* Modo foco da Minha vez (desktop · Lista): a lista some; conversa à esquerda e ficha à direita, ou só a ficha em 2 colunas. */
.mv-trab.foco { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.mv-trab.foco.so-ficha { grid-template-columns: minmax(0, 1fr); }
.mv-trab.foco.so-ficha .mv-lista { display: none; }
body.mv-foco #funil, body.mv-foco #intro, body.mv-foco #sub { display: none; }
body.mv-foco .main.mv > .cab { margin-bottom: 4px; }
/* Cartão do Funil (Quadro de Vendas): nome · plano e valor · data · próximo passo em uma linha. */
.qcard .q-data { font-size: 12px; font-weight: 600; color: var(--info-fg); }
.qcard .q-data.ok { color: var(--ok-fg); }
.qcard .prox { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Cabeçalho da conversa no padrão da ficha (10/11): nome + Chatwoot ↗ · chips pequenos · etiquetas finas */
.cvp-l1 { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px 8px; }
.cvp-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cvp-topo .cvp-nome { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvp-topo .cvp-cw { margin-left: 0; flex: 0 0 auto; font-size: 12px; }
.cvp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
select.cvp-pill, .cvp-l1 select.cvp-pill, .cvp-l2 select.cvp-pill { height: 26px; padding: 0 24px 0 10px; border-radius: 999px; border: 1px solid var(--border); background-color: transparent; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
select.cvp-pill:hover { border-color: var(--border-strong); }
select.cvp-pill:disabled { opacity: .6; cursor: default; }
span.cvp-pill.fixo { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 12px; white-space: nowrap; }
span.cvp-pill.fixo.warn { color: var(--warn-fg); border-color: var(--warn-border); }
.cvp-l2 { gap: 6px; padding: 6px 12px 8px; }
.cvp-rot { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); margin-right: 2px; }
.cvp-l2 .cvp-tg { font-size: 11.5px; padding: 1px 4px 1px 8px; }
.cvp-l2 select.cvp-mais { color: var(--muted); border-style: dashed; }
select.cvp-pill, .cvp-l1 select.cvp-pill, .cvp-l2 select.cvp-pill { width: auto; flex: 0 0 auto; max-width: 220px; }
/* Balão: só o texto quebra linha como digitado; o resto do HTML não vira linha em branco (balões altos e vazios). */
.cvp-b { white-space: normal; }
.cvp-b .cvp-t { white-space: pre-wrap; }
/* 10/11: chip da objeção contornada pela Mari (tela Mari) */
.mq-trava.aviso { color: var(--info-fg); border-color: #34507A; }
/* 0102: alarmes da operação no Painel (respostas fora do NIOGEN · qualidade da WABA) */
.alarmes-op:not([hidden]) { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.alarmes-op .faixa { display: block; }
/* 10/11: conversa de cliente com venda — lembrete âmbar acima da caixa de texto */
.cvp-venda:not([hidden]) { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-fg); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; line-height: 1.4; }
.cvp-venda a { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* ───────── 10/11 (0107): Mari ao vivo + 🔥 oportunidades no Live + bolinha do Live ───────── */
:root { --fogo: #FB923C; --fogo-bg: #2A1B10; --fogo-border: #7A4A1C; }
@keyframes mav-pulso-ok { 0% { box-shadow: 0 0 0 0 rgba(50, 224, 0, .55); } 70% { box-shadow: 0 0 0 9px rgba(50, 224, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(50, 224, 0, 0); } }
@keyframes mav-pulso-bad { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 122, .55); } 70% { box-shadow: 0 0 0 9px rgba(255, 122, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 122, 122, 0); } }
@keyframes mav-acende { 0% { border-color: var(--accent); background: #16301F; } 100% { } }
@keyframes live-halo { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, .28); } 50% { box-shadow: 0 0 0 4px rgba(255, 90, 90, 0); } }
/* Live: bolinha vermelha pequena, halo suave e lento (sem piscar) */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E5484D; margin-right: 7px; vertical-align: middle; flex: none; animation: live-halo 2.5s ease-in-out infinite; }
h1.live-tit { display: flex; align-items: center; }
h1.live-tit .live-dot { width: 9px; height: 9px; margin-right: 10px; }
.nav-item .badge.fogo { background: var(--fogo-bg); color: var(--fogo); border: 1px solid var(--fogo-border); }
.nav-item .badge:not([hidden]) ~ .badge.fogo { margin-left: 4px; }
/* Pulso */
.mav-pulso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 6px; margin: 0 0 10px; }
.mav-pulso .it { display: flex; flex-direction: column; gap: 1px; padding: 0 16px; border-left: 1px solid var(--border); min-width: 0; }
.mav-pulso .it:first-child { border-left: 0; }
.mav-pulso .it b { font-size: 14.5px; }
.mav-pulso .it small { font-size: 11.5px; color: var(--muted); }
.mav-est { display: inline-flex; align-items: center; gap: 8px; }
.mav-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; }
.mav-dot.ok { animation: mav-pulso-ok 1.6s infinite; }
.mav-dot.warn { background: var(--warn-dot); }
.mav-dot.bad { background: var(--bad-dot); animation: mav-pulso-bad 1.6s infinite; }
.mav-pulso.ok .mav-est b { color: var(--accent); }
.mav-pulso.warn .mav-est b { color: var(--warn-fg); }
.mav-pulso.bad { border-color: var(--bad-border); }
.mav-pulso.bad .mav-est b { color: var(--bad-fg); }
/* Funil de resultado */
.mav-funil { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 8px; margin: 0 0 12px; }
.mav-f { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mav-f .lb { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mav-f b { font-size: 21px; line-height: 1.15; font-family: var(--dm); }
.mav-f small { font-size: 11.5px; color: var(--muted); }
.mav-f:not(.rs):not(:nth-child(6))::after { content: '›'; position: absolute; right: -7px; top: 34%; color: var(--muted); }
.mav-f.rs { border-color: #2F5A2A; background: #11200F; }
.mav-f.rs b { color: var(--accent); }
.mav-f.rs a { color: var(--fogo); text-decoration: none; }
/* Corpo: quadro/lista + feed */
.mav-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.mav-principal { min-width: 0; }
.mav-feed { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto; }
.mav-feed h4 { margin: 0 0 8px; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.mav-feed h4 span { font-weight: 400; font-size: 11px; }
.mav-ev { display: grid; grid-template-columns: 42px 1fr; gap: 6px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12.5px; line-height: 1.35; }
.mav-ev:first-child { border-top: 0; }
.mav-ev .t { color: var(--muted); font-family: var(--dm); font-size: 11.5px; }
.mav-ev .link { font-weight: 600; color: var(--text); padding: 0; background: none; border: 0; cursor: pointer; font: inherit; }
.mav-ev .link:hover { color: var(--link-hover); text-decoration: underline; }
.mav-ev.warn > span:last-child { color: var(--warn-fg); }
.mav-ev.bad > span:last-child { color: var(--bad-fg); }
.mav-ev.fire > span:last-child { color: var(--fogo); }
.mav-ev.novo { animation: mav-acende 2.4s ease-out 1; border-radius: 6px; }
.mav-feed-pe { font-size: 11px; margin: 8px 0 0; }
.mav-abas-movel { display: none; margin: 0 0 10px; }
/* Cartão de 3 linhas */
.qcard.mav { gap: 3px; padding: 9px 11px; }
.qcard.mav > b { display: flex; gap: 4px; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.mav-agora { font-size: 12.5px; color: #C6D0DC; line-height: 1.35; }
.mav-agora.warn { color: var(--warn-fg); }
.mav-agora.bad { color: var(--bad-fg); }
.mav-agora.digitando::before, .qcard.mav.digitando .mav-agora::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; animation: mav-pulso-ok 1.6s infinite; }
.qcard.mav.digitando .mav-agora.digitando::before { content: none; }
.mav-l3 { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.mav-bar { display: inline-flex; gap: 2px; flex: none; }
.mav-bar i { width: 10px; height: 4px; border-radius: 2px; background: #2A3646; }
.mav-bar i.validado { background: var(--accent); }
.mav-bar i.coletado { background: var(--warn-dot); }
.mav-bar.vazia { width: 0; }
.mav-chip { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.mav-chip.g { color: var(--ok-fg); border-color: #1F5133; }
.mav-chip.a { color: var(--warn-fg); border-color: var(--warn-border); }
.mav-chip.r { color: var(--bad-fg); border-color: var(--bad-border); }
.mav-fogo { color: var(--fogo); font-size: 12px; font-weight: 600; white-space: nowrap; }
.qcard.mav.op { border-color: var(--fogo-border); background: linear-gradient(180deg, #22180F, var(--surface) 65%); }
.qcard.mav.acende, tr.acende { animation: mav-acende 2.4s ease-out 1; }
tr.mav-tr-op td:first-child { box-shadow: inset 3px 0 0 var(--fogo); }
.quadro-mari .qv-col.mav-trilho { flex: 0 0 34px; min-width: 34px; max-width: 34px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 0; align-items: center; }
.quadro-mari .qv-col.mav-trilho span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; color: var(--muted); white-space: nowrap; }
/* Live · 🔥 oportunidades */
.mv-grupo.mv-grupo-op b { color: var(--fogo); }
.mv-row.mv-op { grid-template-rows: auto auto; }
.mv-row.mv-op::before { background: var(--fogo); }
.mv-row.mv-op .mv-oque { color: var(--text); }
.mv-fogo { font-size: 13px; margin-right: 6px; }
.mv-op-pe { grid-column: 2 / -1; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; justify-content: space-between; cursor: default; }
.mv-sug { display: none; flex: 1 1 320px; font-size: 12.5px; color: #C6D0DC; background: var(--surface-dim); border: 1px dashed #33435A; border-radius: 8px; padding: 7px 10px; line-height: 1.4; }
.mv-op.prim .mv-sug, .mv-op:hover .mv-sug, .mv-op:focus-within .mv-sug { display: block; }
.mv-op-acoes { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.mv-op-menu { position: relative; }
.mv-op-menu > summary { list-style: none; cursor: pointer; }
.mv-op-menu > summary::-webkit-details-marker { display: none; }
.mv-op-menu[open] > button { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; white-space: nowrap; background: var(--surface-2); }
@media (max-width: 1200px) {
  .mav-funil { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mav-f.rs { grid-column: span 2; }
  .mav-f::after { display: none; }
  .mav-corpo { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 900px) {
  .mav-corpo { grid-template-columns: minmax(0, 1fr); }
  .mav-abas-movel { display: inline-flex; }
  .main:not([data-mav="agora"]) .mav-feed { display: none; }
  .main[data-mav="agora"] .mav-principal, .main[data-mav="agora"] #abas, .main[data-mav="agora"] .barra-filtros { display: none; }
  .mav-feed { position: static; max-height: none; }
  .mav-pulso .it { padding: 0 10px; flex: 1 1 45%; border-left: 0; }
  .mav-funil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mav-f.rs { grid-column: 1 / -1; }
  .mv-op-pe { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot, .mav-dot, .mav-agora.digitando::before, .qcard.mav.digitando .mav-agora::before { animation: none !important; }
  .qcard.mav.acende, tr.acende, .mav-ev.novo { animation: none !important; }
}
.painel-op:not([hidden]) { display: block; margin: 0 0 12px; padding: 9px 14px; border: 1px solid var(--fogo-border); border-radius: 10px; background: var(--fogo-bg); color: var(--text); font-size: 13px; text-decoration: none; }
.painel-op b { color: var(--fogo); }
.painel-op:hover { border-color: var(--fogo); }
.nav-item .badge.fogo { white-space: nowrap; flex: none; }
/* 10/11 (Ricardo): Live em blocos (Para fazer · Acompanhando) com espaço entre eles; 🔥 Oportunidades presas no rodapé, sobem ao clicar */
.mv-bloco { margin: 12px 12px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: clip; }
.mv-bloco:last-child { margin-bottom: 12px; }
.mv-bloco > .mv-grupo { top: 34px; border-radius: 10px 10px 0 0; }
.mv-bloco > .mv-row:last-child, .mv-bloco > .mv-nada:last-child { border-bottom: 0; }
.mv-op-dock { flex: none; display: flex; flex-direction: column; max-height: 62%; border-top: 2px solid var(--fogo-border); background: var(--fogo-bg); box-shadow: 0 -8px 18px rgba(0, 0, 0, .35); position: sticky; bottom: 0; z-index: 3; }
.mv-op-dock-cab { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; width: 100%; padding: 10px 14px; cursor: pointer; font-size: 12px; }
.mv-op-dock-cab b { color: var(--fogo); font-size: 12.5px; }
.mv-op-dock-cab:hover { background: #33210F; }
.mv-op-dock-cab:focus-visible { outline: 2px solid var(--fogo); outline-offset: -2px; }
.mv-op-seta { margin-left: auto; color: var(--fogo); font-size: 13px; }
.mv-op-dock-corpo { overflow-y: auto; min-height: 0; background: var(--surface); border-top: 1px solid var(--fogo-border); animation: mv-op-sobe .22s ease-out; }
@keyframes mv-op-sobe { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mv-op-dock-corpo { animation: none; } }
@media (max-width: 900px) { .mv-op-dock { max-height: 70vh; } .mv-bloco { margin: 10px 8px 0; } }
/* 10/11 17h30 (Ricardo): Live no menu — bolinha no lugar do ícone; número de "Para fazer" verde sólido (obrigação),
   vermelho sólido quando tem algo para AGORA; selo 🔥 com o mesmo tamanho e alinhamento */
.nav-item .ico .live-dot { margin: 0; vertical-align: middle; }
.nav-item .badge[data-badge="fila"] { background: var(--accent); color: #06200F; border: 1px solid transparent; min-width: 20px; text-align: center; line-height: 16px; padding: 0 6px; }
.nav-item .badge[data-badge="fila"].alerta { background: #E5484D; color: #fff; }
.nav-item .badge.fogo { line-height: 16px; padding: 0 6px; }
.nav-item .badge::before { content: none !important; display: none !important; }   /* 10/11: a bolinha azul genérica do .alerta não entra nos números do menu */

/* ───────── 0112 (regra 18): Funil e Instalações por resultado ───────── */
.ritmo-funil { padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.rf-l { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.rf-big { font-size: 22px; font-weight: 600; }
.rf-frase { font-size: 13px; font-weight: 600; color: var(--text); }
.rf-frase.ok { color: var(--ok-fg); } .rf-frase.warn { color: var(--warn-fg); } .rf-frase.bad { color: var(--bad-fg); }
.rf-trilho { position: relative; height: 10px; border-radius: 6px; background: var(--surface-2); overflow: visible; }
.rf-trilho .rf-feito { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--accent); }
.rf-trilho .rf-ideal { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--warn-dot); }
.rf-leg { font-size: 11.5px; }
.kpi.kpi-verde { border-color: var(--ok-fg); }
.gargalo { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--fogo-bg); border: 1px solid var(--fogo-border); }
.gargalo .g-tit { color: var(--fogo); font-size: 13.5px; }
.gargalo .g-fluxo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.gargalo .g-fluxo span { padding: 2px 8px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.gargalo .g-fluxo span.z { border-color: var(--bad-border); color: var(--bad-fg); }
.gargalo .g-fluxo i { font-style: normal; color: var(--muted); }
.gargalo .g-btn { margin-left: auto; color: var(--fogo); border-color: var(--fogo-border); background: transparent; }
.col-head .c-soma { font-style: normal; color: var(--ok-fg); font-weight: 600; }
.qcard.q2 { gap: 5px; }
.qcard.q2 .q-n { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.qcard.q2 .q-n small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qcard.q2 .q-v { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.qcard.q2 .q-com { font-family: var(--mono); font-size: 13px; color: var(--ok-fg); white-space: nowrap; }
.qcard.q2 .q-f { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.qcard.q2 .q-f .chip { white-space: normal; }
.qcard.q2 .q-bt { pointer-events: none; padding: 2px 8px; font-size: 11.5px; min-height: 0; }
.qcard.q2 .q-passo .prox { font-size: 11.5px; }
.or-txt { color: var(--fogo); }
.qv-motivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 8px; }
.qv-motivos .qm { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; }
.qv-motivos .qm b { font-family: var(--mono); font-size: 16px; }
.qv-motivos .qm small { font-size: 11.5px; color: var(--muted); }
.qv-motivos .qm.recup b, .qv-motivos .qm.recup small { color: var(--fogo); }
/* Instalações */
.osab-aviso { font-size: 12.5px; font-weight: 600; white-space: nowrap; align-self: center; }
.osab-aviso.warn { color: var(--warn-fg); } .osab-aviso.bad { color: var(--bad-fg); } .osab-aviso.ok { color: var(--muted); font-weight: 500; }
.tab tr.risco td { background: var(--warn-bg); }
.tab tr.risco td:first-child { box-shadow: inset 3px 0 0 var(--warn-dot); }
.conf { font-size: 12px; font-weight: 600; }
.conf.ok { color: var(--ok-fg); } .conf.bad { color: var(--bad-fg); } .conf.warn { color: var(--warn-fg); } .conf.dim { color: var(--muted); font-weight: 500; }
.pend-linha { display: block; font-size: 11.5px; color: var(--warn-fg); margin-top: 2px; }
.protecao { margin-top: 18px; }
.protecao h2 { font-size: 15px; margin: 0 0 4px; }
.prot-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 8px; }
.prot-c { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.prot-c:hover { border-color: var(--border-strong); color: var(--text); }
.prot-c.warn { border-color: var(--warn-border); } .prot-c.bad { border-color: var(--bad-border); }
.prot-c .pn { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; } .prot-c .pn small { font-weight: 400; color: var(--muted); }
.prot-c .pl { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.prot-c .pl span:first-child { color: var(--muted); }
.prot-c .exemplo { font-size: 11px; font-weight: 700; color: var(--warn-fg); }
@media (max-width: 760px) { .gargalo .g-btn { margin-left: 0; } .rf-big { font-size: 18px; } }

/* 0117: 🔥 oportunidades do canal parceiro (Parceiros PAP e Live) */
.opc-bloco { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.opc-bloco > h2 { font-size: 14px; margin: 0; display: flex; gap: 8px; align-items: baseline; }
.opc-bloco > h2 small { font-weight: 400; color: var(--muted); }
.opc-linha { display: grid; grid-template-columns: 130px minmax(140px, 1fr) minmax(200px, 2.2fr) 100px auto; gap: 10px; align-items: center;
  background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 10px; padding: 8px 12px; }
.opc-selo { font-size: 12px; font-weight: 700; color: var(--warn-fg); white-space: nowrap; }
.opc-quem, .opc-oque, .opc-valor { display: flex; flex-direction: column; min-width: 0; }
.opc-quem small, .opc-valor small { color: var(--muted); font-size: 12px; }
.opc-oque small { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opc-valor { text-align: right; }
.opc-bt { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 860px) {
  .opc-linha { grid-template-columns: 1fr auto; }
  .opc-selo, .opc-oque { grid-column: 1 / -1; }
  .opc-bt { grid-column: 1 / -1; justify-content: flex-start; }
}
/* Na faixa 🔥 do Live a coluna é estreita: a linha do canal empilha (quem · valor / o quê / botões). */
.mv-op-dock .opc-bloco { margin: 6px 8px 10px; }
.mv-op-dock .opc-linha { grid-template-columns: 1fr auto; gap: 4px 10px; }
.mv-op-dock .opc-selo, .mv-op-dock .opc-oque, .mv-op-dock .opc-bt { grid-column: 1 / -1; }
.mv-op-dock .opc-bt { justify-content: flex-start; }
.mv-op-dock .opc-oque small { white-space: normal; }