/* BluerAgent V3 — painéis por papel + bot lateral (21/09/2026).
   Portado das telas do protótipo de 19/09 sobre a paleta do app da
   Innovatie (variáveis de style.css: --bg, --card, --border, --text,
   --muted, --navy, --blue, --accent-soft). Nada aqui é slicer: o painel
   mostra o que o motor decidiu; pergunta fora disso vai pro bot. */

/* ===== variáveis que faltavam (HANDOFF, "Cores e medidas"); o resto vem
   de style.css. Selos e bolinhas de tipo usam estas em vez de cor solta. */
:root {
  --card2: #f4f7fb;
  --good: #15703f; --goodbg: #e1f3e8;
  --warn: #8a4b00; --warnbg: #fdf0d9;
  --bad: #b3261e;  --badbg: #fde7e5;
  --t-orcamento: #2060a8; --t-recompra: #c77700; --t-encolhendo: #c2362b; --t-mix: #0e8a7d; --t-prospect: #7a4fc0;
  --scrim: rgba(15, 24, 38, .32);
  --sombra: 0 16px 48px rgba(20, 35, 58, .22);
  --topo-altura: 56px;
  --blue-largura: 384px;
  --trilho-largura: 56px;
}
:root[data-theme="dark"] {
  --card2: #1d3050;
  --good: #5fd39a; --goodbg: rgba(95, 211, 154, .14);
  --warn: #f2bb6b; --warnbg: rgba(242, 187, 107, .14);
  --bad: #ff9288;  --badbg: rgba(255, 146, 136, .14);
  --t-orcamento: #6aa9ea; --t-recompra: #f0b35a; --t-encolhendo: #ff8a80; --t-mix: #4fd1c1; --t-prospect: #b79cf0;
  --scrim: rgba(3, 8, 16, .55);
  --sombra: 0 16px 48px rgba(0, 0, 0, .45);
}

/* ===== casca: a PÁGINA rola (uma barra só, na borda da janela); o topo e
   o Blue são sticky. style.css trava o body em 100vh/overflow hidden para o
   chat puro — aqui é o contrário. ===== */
body.modo-painel { height: auto; min-height: 100vh; overflow: auto; }
.app-wrap { display: block; }
body.modo-painel .theme-toggle { display: none; }   /* virou item do menu do avatar */
body.modo-painel .sidebar-toggle { display: none; }
.icone { width: 18px; height: 18px; flex-shrink: 0; }

/* ===== topo: marca, botão do Blue, avatar — e só ===== */
.topo {
  position: sticky; top: 0; z-index: 40;
  height: var(--topo-altura); display: flex; align-items: center; gap: 12px;
  padding: 0 24px; background: var(--card); border-bottom: 1px solid var(--border);
}
.topo .marca { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); }
/* o ícone não é quadrado (500×424): a caixa é 32×32 e ele entra inteiro, sem esticar */
.topo .marca img { width: 32px; height: 32px; object-fit: contain; }
.topo .marca span { font-size: 16px; font-weight: 700; white-space: nowrap; }
.topo .marca small { font-size: 12.5px; color: var(--muted); }
.topo .abas { display: none; }   /* uma aba só = o título da tela faz esse papel */
.botao-blue {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--card2); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.botao-blue:hover { border-color: var(--blue); }
.botao-blue .icone { width: 16px; height: 16px; }
.botao-blue[aria-pressed="false"] { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.botao-blue[aria-pressed="false"]:hover { filter: brightness(1.1); }

.avatar { position: relative; }
.avatar-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 8px;
}
.avatar-btn:hover, .avatar-btn[aria-expanded="true"] { background: var(--card2); }
.avatar-btn .iniciais {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--card2); border: 1px solid var(--border);
  color: var(--text); font-size: 12px; font-weight: 700;
}
.avatar-btn .icone { width: 14px; height: 14px; }
.avatar-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; z-index: 45;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: var(--sombra);
}
.avatar-menu .quem { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.avatar-menu .quem b { display: block; font-size: 13.5px; color: var(--text); }
.avatar-menu .quem span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.avatar-menu .item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px;
  text-align: left; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.avatar-menu .item:hover, .avatar-menu .item:focus-visible { background: var(--card2); outline: none; }
.avatar-menu .item .icone { color: var(--muted); }

/* ===== corpo: painel + Blue ===== */
.corpo { display: flex; align-items: flex-start; }
.painel { flex: 1; min-width: 0; padding: 16px 24px 60px; }
.painel-interno { max-width: 1180px; margin: 0 auto; }

.bot {
  position: sticky; top: var(--topo-altura); height: calc(100vh - var(--topo-altura));
  width: var(--blue-largura); flex-shrink: 0;
  background: var(--card); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.bot.recolhido { width: var(--trilho-largura); align-items: center; gap: 6px; padding-top: 10px; }
.bot.recolhido .bot-topo, .bot.recolhido .chat-main, .bot.recolhido .sidebar { display: none; }
.bot-trilho { display: none; flex-direction: column; align-items: center; gap: 6px; }
.bot.recolhido .bot-trilho { display: flex; }
.bot-trilho .abrir {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--card2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.bot-trilho .abrir img { width: 30px; height: 30px; }
.bot-trilho .abrir:hover { border-color: var(--blue); }
.botao-icone {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted);
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.botao-icone:hover, .botao-icone[aria-expanded="true"] { background: var(--card2); color: var(--text); }
.bot-trilho .botao-icone { width: 44px; height: 44px; }

.bot-topo {
  height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 16px; border-bottom: 1px solid var(--border);
}
.bot-topo img { width: 34px; height: 34px; flex-shrink: 0; }
.bot-topo .nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bot-topo .nome strong { font-size: 14.5px; color: var(--text); }

/* histórico = a #sidebar de conversas, como popover a partir do relógio */
.bot .sidebar {
  position: absolute; top: 66px; left: 8px; right: 8px; z-index: 5;
  width: auto; min-width: 0; max-height: min(60vh, 480px);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; box-shadow: var(--sombra);
}
.bot .sidebar.escondida { display: none; }
.bot .sidebar-brand, .bot .sidebar-footer { display: none; }
.bot .chat-main { flex: 1; min-height: 0; }
.bot .chat-scroll { padding: 16px 12px 8px; scrollbar-width: none; }
.bot .chat-scroll::-webkit-scrollbar { display: none; }
.bot .composer { margin: 6px 10px 0; }
.bot .composer-note { padding: 4px 0 8px; }
.bot .empty-hint h2 { font-size: 18px; }
.bot .empty-mascote { width: 64px; }
.bot .chart-card { height: 260px; --chart-auto-max: 400px; }

/* ===== componentes do painel ===== */
.grade { display: grid; gap: 14px; }
.grade > * { min-width: 0; }   /* a tabela larga rola dentro do card, não estica a coluna */
.grade.duas { grid-template-columns: 2fr 1fr; }
.grade.tres { grid-template-columns: repeat(3, 1fr); }
.grade.kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 1100px) { .grade.duas, .grade.tres { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.card + .card, .card.mt { margin-top: 14px; }
.card.destaque { background: linear-gradient(135deg, var(--card), var(--accent-soft)); }
.card h2 { font-size: 16px; font-weight: 600; color: var(--navy); margin: 0 0 8px; }
.card h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; font-weight: 600; }
.linha-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.linha-topo .mini { margin-left: auto; }
.mini { font-size: 12px; color: var(--muted); }
.nota { font-size: 12px; color: var(--muted); margin-top: 10px; }
.erro-painel { background: var(--badbg); color: var(--bad); padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.carregando { text-align: center; color: var(--muted); padding: 40px; }

.kpi { padding: 12px 14px; }
.kpi .rotulo { font-size: 12px; color: var(--muted); }
.kpi .valor { font-size: 22px; font-weight: 700; margin-top: 2px; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bom { color: var(--good); } .ruim { color: var(--bad); } .atencao { color: var(--warn); }

.barra { height: 10px; background: var(--accent-soft); border-radius: 6px; overflow: hidden; position: relative; margin: 8px 0 4px; }
.barra > i { display: block; height: 100%; background: var(--blue); }
.barra > b { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--navy); }
.legenda { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); gap: 12px; flex-wrap: wrap; }
.valor-grande { font-size: 26px; font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.chip { padding: 4px 10px; border-radius: 20px; font-size: 12px; background: var(--accent-soft); color: var(--navy); cursor: pointer; border: 1px solid transparent; }
.chip.ativo { background: var(--navy); color: #fff; }
:root[data-theme="dark"] .chip.ativo { color: #0f1826; }
.chip .n { opacity: .7; margin-left: 4px; }

.badge-tipo { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.badge-tipo.orcamento { background: var(--card2); color: var(--t-orcamento); }
.badge-tipo.recompra { background: var(--card2); color: var(--t-recompra); }
.badge-tipo.encolhendo { background: var(--card2); color: var(--t-encolhendo); }
.badge-tipo.mix { background: var(--card2); color: var(--t-mix); }
.badge-tipo.prospect { background: var(--card2); color: var(--t-prospect); }
.badge-tipo.status { background: var(--accent-soft); color: var(--muted); }

.op { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--card); display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
.op.tratada { opacity: .55; }
.op .titulo { font-weight: 600; margin: 6px 0 4px; font-size: 15px; }
.op .motivo { color: var(--text); }
.op .acao { margin-top: 6px; padding: 8px 10px; background: var(--accent-soft); border-left: 3px solid var(--blue); border-radius: 4px; }
.op .lado { text-align: right; min-width: 140px; }
.op .lado .valor { font-size: 18px; font-weight: 700; }
.op .lado .sub { font-size: 12px; color: var(--muted); }
.op .contato { font-size: 12px; color: var(--muted); margin-top: 4px; }
.op .botoes { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.op .estado { font-size: 12px; color: var(--muted); margin-left: auto; }
button.pequeno { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--navy); cursor: pointer; }
button.pequeno.primario { background: var(--brand-gradient); color: #fff; border-color: transparent; }
button.pequeno:hover { border-color: var(--blue); }
button.pequeno:disabled { opacity: .5; cursor: default; }
.clicavel { cursor: pointer; }
.clicavel:hover { text-decoration: underline dotted; }

.painel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.painel th, .painel td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.painel th:first-child, .painel td:first-child { text-align: left; }
.painel th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; background: var(--card); }
.painel tr.clicavel:hover { background: var(--accent-soft); }
.painel td.esq, .painel th.esq { text-align: left; }
.tabela-rolagem { overflow-x: auto; }   /* sem altura máxima: a página é quem rola */
.pct { display: inline-block; min-width: 46px; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.pct.bom { background: var(--goodbg); } .pct.atencao { background: var(--warnbg); } .pct.ruim { background: var(--badbg); }

.alerta { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; font-size: 13px; border-left: 4px solid; background: var(--card); cursor: pointer; }
.alerta:hover { background: var(--accent-soft); }
.alerta.alto { border-color: var(--bad); }
.alerta.medio { border-color: var(--warn); }
.alerta.baixo { border-color: var(--blue); }

.lista-simples { list-style: none; padding: 0; margin: 0; }
.lista-simples li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--border); gap: 10px; }
.lista-simples li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-simples li b { white-space: nowrap; }

/* ===== passo 6: cartões fixados + "Fixar no painel" ===== */
/* Grade de 4 colunas com empacotamento denso e "linhas" de 8px: o JS dá a
   cada cartão o span de linhas da própria altura (não há buraco embaixo de
   um cartão baixo) e o span de colunas que o usuário escolheu (padrão 2 =
   metade). */
.cartoes { --colunas: 4; display: grid; grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); grid-auto-rows: 8px; grid-auto-flow: dense; gap: 12px; align-items: start; }
.cartoes.vazia { display: block; }   /* sem cartão: fora da grade de linhas de 8px */
.cartoes-vazio { grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: 12px; padding: 20px; font-size: 13.5px; color: var(--muted); }
.cartao { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; position: relative; grid-column-end: span 2; }
/* A largura escolhida é uma classe (não estilo inline) para o CSS poder
   encolhê-la nas telas com menos colunas sem depender do JS. */
.cartao.largura-1 { grid-column-end: span 1; }
.cartao.largura-3 { grid-column-end: span 3; }
.cartao.largura-4 { grid-column-end: span 4; }
.cartao .cabeca { cursor: grab; user-select: none; }
.cartao.arrastando { opacity: .35; border-style: dashed; }
.cartao.arrastando .cabeca { cursor: grabbing; }
.fantasma-cartao { position: fixed; z-index: 70; pointer-events: none; margin: 0; opacity: .95; box-shadow: 0 12px 32px rgba(0, 0, 0, .3); transform: translate(0, 0); }
.fantasma-cartao .alca-cartao { display: none; }
body.arrastando-cartao { cursor: grabbing; user-select: none; }
.alca-cartao { position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--muted); opacity: .45; cursor: nwse-resize; display: flex; align-items: center; justify-content: center; border-radius: 6px; touch-action: none; }
.alca-cartao .icone { width: 16px; height: 16px; }
.cartao:hover .alca-cartao, .alca-cartao:focus-visible, .cartao.redimensionando .alca-cartao { opacity: 1; }
.alca-cartao:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cartao.redimensionando { user-select: none; }
@media (hover: none) { .alca-cartao { opacity: .8; } }
/* a alça do cartão substitui a alça nativa do gráfico (que só subia e descia) */
.cartao .chart-card { resize: none; }
.cartao.inativo { border-style: dashed; }
.cartao .cabeca { display: flex; align-items: flex-start; gap: 10px; }
.cartao .cabeca .pino { color: var(--blue); display: flex; padding-top: 1px; }
.cartao .cabeca .pino .icone { width: 18px; height: 18px; }
.cartao .cabeca .quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cartao .cabeca .quem b { font-size: 14px; font-weight: 700; }
.cartao .titulo-cartao { cursor: text; border-radius: 4px; padding: 0 4px; margin-left: -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao .titulo-cartao:hover { background: var(--accent-soft, rgba(127, 127, 127, .15)); }
.cartao .titulo-cartao:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cartao .titulo-cartao.falhou { color: var(--bad); }
.cartao .renomear { font: inherit; font-size: 14px; font-weight: 700; color: var(--text); background: var(--bg); border: 1px solid var(--blue); border-radius: 4px; padding: 0 4px; margin-left: -5px; width: 100%; min-width: 0; height: 22px; }
.cartao .cabeca .quem span { font-size: 12px; color: var(--muted); }
.cartao .cabeca .desafixar { width: 32px; height: 32px; }
.cartao .aviso-box:empty { display: none; }
.cartao-aviso { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 8px; background: var(--warnbg); color: var(--warn); font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.cartao-aviso span { flex: 1; min-width: 120px; }
.cartao-aviso .botao { height: 32px; padding: 0 10px; }
.cartao-aviso .botao.fantasma { color: var(--muted); }
.cartao .chart-card { margin-top: 0; height: 240px; --chart-auto-max: 480px; }
.cartao .table-wrap { overflow: auto; max-height: 300px; }
.cartao table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cartao th { padding: 6px 0 6px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; background: transparent; border-bottom: 0; position: static; }
.cartao td { padding: 8px 0 8px 12px; border-top: 1px solid var(--border); border-bottom: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartao th:first-child, .cartao td:first-child { padding-left: 0; text-align: left; }
.cartao td:first-child { font-weight: 600; }
.cartao .consulta { font-size: 11px; color: var(--muted); }
.oferta-cartao { margin: 8px 0 4px 44px; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.oferta-cartao .botao { height: 32px; padding: 0 10px; }
.oferta-cartao .botao.fixado { background: var(--goodbg); color: var(--good); border-color: transparent; cursor: default; }
.oferta-cartao .msg:empty { display: none; }
.oferta-cartao select.botao { font: inherit; font-size: 13px; color: var(--text); background: var(--card); cursor: pointer; max-width: 240px; }
.numero-cartao { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 6px; min-width: 0; }
.numero-cartao b { font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; }
.numero-cartao .sub { font-size: 12.5px; color: var(--muted); }

/* ===== passo 2: tela do vendedor ===== */
.titulo-tela { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.titulo-tela h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.titulo-tela .sub { font-size: 13px; color: var(--muted); }
.cabeca-miuda, .resumo-carteira .cabeca, .agenda-cabeca, .agenda-resolvidos, .detalhe h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}

.faixa-meta {
  background: var(--brand-gradient); color: #fff; border-radius: 14px; padding: 14px 24px;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-bottom: 20px;
}
.faixa-meta .bloco { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.faixa-meta .rotulo { font-size: 12px; color: #fff; }
.faixa-meta .linha { display: flex; align-items: baseline; gap: 6px; }
.faixa-meta .linha b { font-size: 18px; font-weight: 700; }
.faixa-meta .linha span { font-size: 12.5px; }
.faixa-meta .trilho { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 7px; }
.barra-meta { position: relative; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .28); }
.barra-meta > i { display: block; height: 10px; border-radius: 10px; background: #fff; }
.barra-meta > b { position: absolute; top: -4px; width: 2px; height: 18px; background: #fff; border-radius: 1px; }
.faixa-meta.sem-meta { font-size: 13.5px; }

.resumo-carteira { display: flex; align-items: center; gap: 28px; padding: 0 4px; flex-wrap: wrap; margin-bottom: 20px; }
.resumo-carteira div { display: flex; align-items: baseline; gap: 8px; }
.resumo-carteira b { font-size: 17px; font-weight: 700; }
.resumo-carteira span { font-size: 12.5px; color: var(--muted); }

.chips-tipo { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip-tipo {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 17px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
}
.chip-tipo:hover { border-color: var(--blue); }
.chip-tipo .n { color: var(--muted); font-weight: 400; }
.chip-tipo[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip-tipo[aria-pressed="true"] .n { color: inherit; opacity: .85; }
:root[data-theme="dark"] .chip-tipo[aria-pressed="true"] { color: #0f1826; }
.bolinha { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.bolinha.orcamento { background: var(--t-orcamento); }
.bolinha.recompra { background: var(--t-recompra); }
.bolinha.encolhendo { background: var(--t-encolhendo); }
.bolinha.mix { background: var(--t-mix); }
.bolinha.prospect { background: var(--t-prospect); }

.agenda { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.agenda-cabeca { display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px; height: 38px; }
.agenda-cabeca .cresce { flex: 1; }
.col-valor { width: 92px; flex-shrink: 0; text-align: right; white-space: nowrap; }
.col-chance { width: 60px; flex-shrink: 0; display: flex; justify-content: flex-end; }
.col-botoes { width: 176px; flex-shrink: 0; }
.acoes-icone { width: 124px; flex-shrink: 0; display: flex; gap: 2px; }
.acoes-icone .botao-icone { width: 40px; height: 40px; }
.acoes-icone .feito { color: var(--good); }
.acoes-icone .feito .icone { width: 20px; height: 20px; }
.item-agenda { border-top: 1px solid var(--border); }
.item-agenda.aberto { background: var(--card2); }
.linha-item { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 16px; min-height: 64px; }
.linha-item .n { width: 22px; flex-shrink: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.linha-item .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.linha-item .titulo { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }   /* nome longo quebra em 2 linhas em vez de cortar */
.linha-item .sub { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.linha-item .rotulo-tipo { color: var(--text); font-weight: 600; white-space: nowrap; }
.linha-item .acao-curta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.linha-item .col-valor { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.linha-item .abrir { width: 40px; height: 40px; }
.selo-chance {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px;
  font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--card2); color: var(--muted); border: 1px solid var(--border);
}
.item-agenda.aberto .selo-chance { background: var(--card); }
.detalhe { padding: 2px 20px 18px 50px; display: flex; flex-direction: column; gap: 16px; }
.detalhe .duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.detalhe h4 { margin: 0 0 6px; }
.detalhe p { margin: 0; font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.detalhe p.acao { font-weight: 600; }
.detalhe .contato { display: flex; align-items: center; gap: 20px; font-size: 13.5px; flex-wrap: wrap; }
.detalhe .contato a, .detalhe .contato .lugar { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; color: var(--blue); }
.detalhe .contato .lugar { color: var(--muted); font-weight: 400; }
.detalhe .contato .icone { width: 16px; height: 16px; }
/* Follow-up do cliente (05/10): o último contato registrado e, sob demanda, os 5 últimos */
.detalhe .ultimo-contato { border-left: 3px solid var(--border); padding-left: 12px; display: flex; flex-direction: column; gap: 6px; }
.detalhe .ultimo-contato p, .detalhe .contatos-lista span { white-space: pre-line; overflow-wrap: anywhere; }
.detalhe .tema-contato { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 600; background: var(--accent-soft); color: var(--navy); vertical-align: 1px; white-space: nowrap; }
.detalhe .passo-contato { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.detalhe .contatos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.detalhe .contatos-lista li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
.detalhe .contatos-lista b { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.detalhe .link { border: 0; background: none; color: var(--blue); font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline dotted; padding: 0; }
.botoes-nome { display: flex; gap: 8px; flex-wrap: wrap; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px;
  font: inherit; font-size: 13.5px; font-weight: 600; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
}
.botao .icone { width: 16px; height: 16px; }
.botao:hover { border-color: var(--blue); }
.botao.primario { background: var(--navy); color: #fff; border-color: var(--navy); padding: 0 20px; }
.botao.primario:hover { filter: brightness(1.1); }
:root[data-theme="dark"] .botao.primario { color: #0f1826; }
.botao.fantasma { background: transparent; color: var(--muted); border-color: transparent; }
.botao.fantasma:hover { background: var(--card2); border-color: transparent; }
.botao:disabled { opacity: .5; cursor: default; }
.botao:focus-visible, .botao-icone:focus-visible, .chip-tipo:focus-visible, .detalhe .link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.agenda-mais { border-top: 1px solid var(--border); padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.agenda-mais .botao { height: 36px; }
.agenda-vazia { padding: 24px 16px; color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--border); }
.agenda-resolvidos { border-top: 1px solid var(--border); padding: 0 16px; height: 36px; display: flex; align-items: center; background: var(--card2); }
.item-resolvido { display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px; min-height: 52px; border-top: 1px solid var(--border); }
.item-resolvido .n { width: 22px; flex-shrink: 0; color: var(--muted); display: flex; }
.item-resolvido.feita .n, .item-resolvido.feita .estado { color: var(--good); }
.item-resolvido .titulo { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted); text-decoration: line-through; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-resolvido .estado { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.item-resolvido[title] .estado { text-decoration: underline dotted; cursor: help; }

/* O "por quê" do descarte: no lugar dos três botões, dentro do item aberto */
.descarte { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.descarte-cabeca { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.descarte-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.descarte .opcao { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.descarte .opcao:hover { border-color: var(--blue); }
.descarte .opcao.selecionada { border-color: var(--navy); background: var(--card2); }
.descarte .opcao input { margin: 0; accent-color: var(--navy); }
.descarte .opcao .dica { grid-column: 2; display: none; font-size: 12px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.descarte .opcao.selecionada .dica { display: block; }
.descarte textarea { font: inherit; font-size: 13.5px; padding: 8px 10px; min-height: 44px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); resize: vertical; }
.descarte textarea:focus-visible, .descarte .opcao:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 1px; }
.descarte-erro { font-size: 12.5px; font-weight: 600; color: #b3261e; }
:root[data-theme="dark"] .descarte-erro { color: #ff8a80; }

/* ===== passo 3: faixa "Precisa de atenção" (gerente e diretor) ===== */
.cabeca-secao { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.cabeca-secao h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.cabeca-secao span { font-size: 12.5px; color: var(--muted); }
.faixa-alertas { margin: 14px 0 20px; }
.cartoes-alerta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cartao-alerta {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left;
  font: inherit; color: var(--text); cursor: pointer;
}
.cartao-alerta:hover { border-color: var(--blue); }
.cartao-alerta .texto { font-size: 14px; font-weight: 600; line-height: 1.4; flex: 1; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-alerta .chamada { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--blue); }
.cartao-alerta .chamada .icone { width: 14px; height: 14px; }
.selo { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--card2); color: var(--muted); }
.selo.alto { background: var(--badbg); color: var(--bad); }
.selo.medio { background: var(--warnbg); color: var(--warn); }
.selo.baixo { background: var(--card2); color: var(--muted); }
.chips-grupo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chip-grupo {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.chip-grupo:hover { border-color: var(--blue); }
.chip-grupo[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
:root[data-theme="dark"] .chip-grupo[aria-pressed="true"] { color: #0f1826; }
.ver-todos { margin-left: auto; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--blue); cursor: pointer; padding: 6px 0; }
.ver-todos[aria-pressed="true"] { text-decoration: underline; }
.lista-alertas { margin-top: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.lista-alertas .grupo-titulo { padding: 8px 16px; background: var(--card2); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--border); }
.lista-alertas .grupo-titulo:first-child { border-top: 0; }
.linha-alerta {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; min-height: 48px;
  border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.linha-alerta:hover { background: var(--card2); }
.linha-alerta .texto { flex: 1; min-width: 0; }
.linha-alerta .icone { width: 16px; height: 16px; color: var(--muted); }
.cartao-alerta:focus-visible, .chip-grupo:focus-visible, .ver-todos:focus-visible, .linha-alerta:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ===== passo 4: tabela compacta + gaveta do vendedor ===== */
.tabela-vendedores { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; }
.tabela-vendedores table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabela-vendedores th { height: 38px; padding: 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; border-bottom: 0; background: transparent; position: static; }
.tabela-vendedores td { height: 52px; padding: 0 8px; border-top: 1px solid var(--border); border-bottom: 0; text-align: right; white-space: nowrap; }
.tabela-vendedores th.esq, .tabela-vendedores td.esq { text-align: left; }
.tabela-vendedores th:first-child, .tabela-vendedores td:first-child { padding-left: 16px; }
.tabela-vendedores th:last-child, .tabela-vendedores td:last-child { padding-right: 16px; }
.tabela-vendedores tr.clicavel { cursor: pointer; }
.tabela-vendedores tr.clicavel:hover, .tabela-vendedores tr.clicavel:focus-visible { background: var(--card2); outline: none; text-decoration: none; }
.tabela-vendedores .n { width: 20px; color: var(--muted); text-align: left; }
.tabela-vendedores td.nome b { font-weight: 700; }
.tabela-vendedores td.nome .mini { margin-left: 8px; }
.tabela-vendedores .barra-col { width: 140px; }
.barra-mini { position: relative; height: 8px; border-radius: 8px; background: var(--accent-soft); min-width: 110px; }
.barra-mini > i { display: block; height: 8px; border-radius: 8px; background: var(--blue); }
.barra-mini > b { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--text); border-radius: 1px; }
.tabela-vendedores .seta { width: 18px; color: var(--muted); }
.tabela-vendedores td.seta .icone { width: 16px; height: 16px; }
.acoes-celula { display: inline-flex; align-items: center; gap: 8px; }
.selo.bom { background: var(--goodbg); color: var(--good); }
.selo.atencao { background: var(--warnbg); color: var(--warn); }
.selo.ruim { background: var(--badbg); color: var(--bad); }

.veu { position: fixed; top: var(--topo-altura); right: 0; bottom: 0; left: 0; background: var(--scrim); z-index: 70; }
.gaveta {
  position: fixed; top: var(--topo-altura); right: 0; bottom: 0; width: 620px; max-width: 100vw; z-index: 71;
  background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--sombra);
  display: flex; flex-direction: column;
}
body.com-gaveta { overflow: hidden; }
.gaveta-cabeca { display: flex; align-items: center; gap: 12px; padding: 16px 12px 16px 24px; border-bottom: 1px solid var(--border); }
.gaveta-cabeca .iniciais {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--card2); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.gaveta-cabeca .quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gaveta-cabeca .quem b { font-size: 17px; font-weight: 700; }
.gaveta-cabeca .quem span { font-size: 12.5px; color: var(--muted); }
.gaveta-cabeca .fechar { width: 44px; height: 44px; }
.gaveta-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.numero { display: flex; flex-direction: column; gap: 2px; }
.numero .rotulo { font-size: 12px; color: var(--muted); }
.numero b { font-size: 17px; font-weight: 700; }
.numero .sub { font-size: 12px; color: var(--muted); min-height: 17px; }
.gaveta-pe { display: flex; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.item-agenda.estatico .titulo { display: block; -webkit-line-clamp: unset; white-space: normal; }
.item-agenda.estatico .acao-curta { max-width: 100%; }

/* ===== passo 5: diretor (faixa grande, blocos, listas) ===== */
.faixa-meta.grande { padding: 20px 28px; gap: 40px; }
.faixa-meta.grande .principal { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.faixa-meta .rotulo.forte { font-size: 12.5px; font-weight: 600; }
.faixa-meta .linha b.enorme { font-size: 32px; letter-spacing: -.02em; line-height: 1.1; }
.faixa-meta .linha .de { font-size: 14px; }
.numeros-grandes { display: flex; gap: 28px; flex-shrink: 0; flex-wrap: wrap; }
.numero-grande { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.numero-grande b { font-size: 21px; font-weight: 700; }
.numero-grande .rotulo { font-size: 12.5px; }
.blocos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.bloco-numero { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.bloco-numero .rotulo { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.bloco-numero b { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.bloco-numero b .de { font-size: 14px; font-weight: 400; color: var(--muted); }
.bloco-numero .sub { font-size: 12.5px; color: var(--muted); }
.secao { margin-top: 20px; }
.duas-listas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.cabeca-secao.coluna { flex-direction: column; gap: 2px; align-items: flex-start; }
.grade-lista { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(var(--cols, 1), minmax(0, 1fr)); column-gap: 12px; padding: 6px 16px 8px; }
.grade-lista .cab { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 0; }
.grade-lista .cel { padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; min-height: 36px; display: flex; align-items: center; min-width: 0; }
.grade-lista .cel:not(.dir) { font-weight: 600; overflow: hidden; }
.grade-lista .cel:not(.dir) .mini { margin-left: 4px; white-space: nowrap; }
.grade-lista .dir { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grade-lista .cel.clicavel { cursor: pointer; }
.grade-lista .cel.clicavel:hover { text-decoration: none; color: var(--blue); }
.grade-lista .cel[role="button"]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.painel .nota { margin-top: 20px; }
.tabela-vendedores .barra-col { width: 200px; }
.barra-mini { min-width: 120px; }
@media (max-width: 1100px) { .blocos, .duas-listas { grid-template-columns: 1fr; } .cartoes-alerta { grid-template-columns: 1fr; } .cartoes { --colunas: 2; } .cartoes .cartao.largura-3, .cartoes .cartao.largura-4 { grid-column-end: span 2; } }

/* barra presa embaixo: só no celular */
.barra-blue { display: none; }
.so-celular { display: none; }

/* ===== passo 7: celular (≤ 900 px) ===== */
@media (max-width: 900px) {
  /* o Blue é tela cheia; recolhido some e a barra presa embaixo abre */
  .bot { position: fixed; right: 0; top: 0; bottom: 0; width: 100vw; height: auto; z-index: 60; }
  .bot.recolhido { display: none; }
  .bot .chat-scroll { scrollbar-width: auto; }
  #bot-toggle { display: none; }
  .barra-blue { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px 14px; background: var(--card); border-top: 1px solid var(--border); }
  .barra-blue button {
    width: 100%; height: 48px; border-radius: 24px; border: 1px solid var(--border); background: var(--bg); color: var(--muted);
    font: inherit; font-size: 14.5px; display: flex; align-items: center; gap: 10px; padding: 0 8px; cursor: pointer;
  }
  .barra-blue button img { width: 32px; height: 32px; }
  .barra-blue button span { flex: 1; text-align: left; }
  .so-celular { display: inline; }

  /* topo: marca, avatar — e só */
  .topo { padding: 0 16px; gap: 10px; }
  .topo .marca span { font-size: 15px; }
  .topo .marca small { display: none; }
  .avatar-btn { height: 44px; }
  .avatar-btn .iniciais { width: 34px; height: 34px; }

  .painel { padding: 16px 16px 104px; }   /* espaço para a barra do Blue */
  .titulo-tela h1 { font-size: 22px; }
  .titulo-tela .sub { font-size: 12.5px; }

  /* faixa da meta do vendedor em coluna: número, barra, ritmo + projeção */
  .faixa-meta { padding: 14px 16px; gap: 10px; align-items: stretch; }
  .faixa-meta .bloco:first-child { order: 1; }
  .faixa-meta .trilho { order: 2; flex-basis: 100%; }
  .faixa-meta .bloco:nth-child(3), .faixa-meta .bloco:nth-child(4) { order: 3; flex-direction: row; align-items: baseline; gap: 6px; }
  .faixa-meta .bloco:nth-child(4) { margin-left: auto; }
  .faixa-meta .bloco:first-child .linha b { font-size: 24px; }
  .faixa-meta.grande { padding: 16px; gap: 14px; }
  .faixa-meta .linha b.enorme { font-size: 26px; }
  .numeros-grandes { gap: 16px 24px; }
  .resumo-carteira { gap: 12px 20px; }

  /* chips em rolagem horizontal, alvo de 44 px */
  .chips-tipo { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px; scrollbar-width: none; }
  .chips-tipo::-webkit-scrollbar { display: none; }
  .chip-tipo { height: 44px; border-radius: 22px; flex-shrink: 0; }

  /* agenda: número + tipo na 1ª linha, título inteiro na 2ª, valor na 3ª;
     os três botões ficam só dentro do item aberto, em largura cheia */
  .agenda-cabeca .col-valor, .agenda-cabeca .col-chance, .agenda-cabeca .col-botoes { display: none; }
  .agenda-cabeca { height: 36px; }
  .linha-item { display: grid; grid-template-columns: auto 1fr 44px; grid-template-areas: "texto texto seta" "valor chance seta"; gap: 4px 8px; padding: 10px 4px 10px 16px; min-height: 0; }
  .linha-item .n { display: none; }
  .linha-item .texto { grid-area: texto; flex-direction: column-reverse; }
  .linha-item .sub::before { content: attr(data-n); color: var(--muted); font-variant-numeric: tabular-nums; }
  .linha-item .sub { font-size: 12.5px; gap: 7px; }
  .linha-item .rotulo-tipo { font-weight: 600; }
  .linha-item .acao-curta { display: none; }
  .linha-item .titulo { display: block; -webkit-line-clamp: unset; font-size: 14.5px; line-height: 1.35; text-wrap: pretty; }
  .linha-item .col-valor { grid-area: valor; width: auto; text-align: left; font-size: 13px; }
  .linha-item .col-chance { grid-area: chance; width: auto; justify-content: flex-start; }
  .linha-item .acoes-icone { display: none; }
  .linha-item .abrir { grid-area: seta; width: 44px; height: 44px; align-self: center; }
  .item-agenda.estatico .linha-item { grid-template-columns: auto 1fr; grid-template-areas: "texto texto" "valor chance"; }
  .detalhe { padding: 0 16px 16px; gap: 14px; }
  .detalhe .duas-colunas { grid-template-columns: 1fr; gap: 14px; }
  .detalhe .duas-colunas > div:first-child { order: 2; }   /* "O que fazer" vem antes do "Por quê" */
  .detalhe .contato { flex-direction: column; align-items: stretch; gap: 8px; }
  .detalhe .contato a { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font-size: 14px; }
  .detalhe .contato a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .detalhe .contato .lugar { padding-left: 2px; }
  .detalhe .link { text-align: left; min-height: 44px; }
  .botoes-nome .botao { flex: 1 1 0; height: 48px; padding: 0 8px; }
  .agenda-mais .botao { height: 44px; }
  .item-resolvido { min-height: 56px; flex-wrap: wrap; gap: 4px 10px; }
  .item-resolvido .estado { width: 100%; padding-left: 32px; white-space: normal; }
  .descarte { padding: 12px; }
  .descarte-opcoes { grid-template-columns: 1fr; }
  .descarte .opcao { min-height: 44px; }
  .descarte .botoes-nome .botao { flex: 1 1 auto; min-height: 44px; }

  /* gerente/diretor */
  .faixa-alertas .cartoes-alerta { grid-template-columns: 1fr; }
  .tabela-vendedores td, .tabela-vendedores th { padding: 0 6px; }
  .tabela-vendedores .barra-col { width: 120px; }
  .barra-mini { min-width: 100px; }
  .blocos, .duas-listas { grid-template-columns: 1fr; }
  .cartoes { --colunas: 1; }
  .cartoes .cartao, .cartoes .cartao.largura-1, .cartoes .cartao.largura-3, .cartoes .cartao.largura-4 { grid-column-end: span 1; }
  .alca-cartao { display: none; }
  .cartao .cabeca { cursor: default; }
  .gaveta { width: 100vw; }
  .gaveta-corpo { padding: 16px; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gaveta-pe { padding: 12px 16px; }
  .gaveta-pe .botao { flex: 1 1 0; height: 44px; padding: 0 8px; }
  .veu { top: 0; }
  .gaveta { top: 0; }
}

/* =====================================================================
   UX out/2026 — mesmas features, outra organização (branch ux-painel).
   Tudo abaixo sobrescreve o que está acima; mantém as variáveis do tema.
   ===================================================================== */
:root { --blue-largura-expandida: 760px; }
@media (max-width: 1500px) { :root { --blue-largura-expandida: 640px; } }

/* --- Blue: coluna fixa, dois tamanhos; "recolhido" só existe no celular --- */
.bot.expandido { width: var(--blue-largura-expandida); }
.bot.expandido .chat-scroll { padding: 20px 24px 8px; }
.bot.expandido .composer { margin: 6px 20px 0; }
.bot.expandido .chart-card { height: 360px; --chart-auto-max: 560px; }
.bot.expandido .msg.assistant .msg-body p, .bot.expandido .msg.assistant .msg-body ul { max-width: 640px; }   /* coluna de leitura; gráfico e tabela usam a largura toda */
.bot .so-celular-bloco { display: none; }
@media (min-width: 901px) { .bot.recolhido { width: var(--blue-largura); align-items: stretch; padding-top: 0; }
  .bot.recolhido .bot-topo, .bot.recolhido .chat-main { display: flex; } }
@media (max-width: 1280px) { .bot.expandido { width: 560px; } }

/* --- topo: links de seção (âncoras), não abas --- */
.topo .abas { display: flex; align-items: stretch; gap: 2px; height: 100%; margin-left: 8px; }
.topo .abas button.ativa { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--navy); padding: 0 10px; }
.topo .abas a { display: inline-flex; align-items: center; padding: 0 10px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.topo .abas a:hover { color: var(--text); }
.topo .abas a.ativa { color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }
:root[data-theme="dark"] .topo .abas a.ativa, :root[data-theme="dark"] .topo .abas button.ativa { color: #8fbcff; border-bottom-color: #8fbcff; }
@media (max-width: 1100px) { .topo .abas.com-secoes { display: none; } }
#resumo, #atencao, #cartoes, #vendedores, #clientes { scroll-margin-top: 72px; }

/* --- faixa da meta: estado "sem meta" desenhado --- */
.faixa-meta.sem-meta-desenhada { align-items: center; }
.faixa-meta.sem-meta-desenhada .principal { gap: 6px; }
.faixa-meta .comparativo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.faixa-meta .comparativo .pill { background: rgba(255,255,255,.18); padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.faixa-meta .aviso-meta { flex: 0 1 300px; margin-left: auto; background: rgba(255,255,255,.12); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; line-height: 1.45; display: flex; flex-direction: column; gap: 2px; }
.faixa-meta .aviso-meta span { opacity: .9; }
.faixa-meta:not(.grande).sem-meta-desenhada .linha b.enorme { font-size: 26px; }
.faixa-meta:not(.grande).sem-meta-desenhada .numero-grande b { font-size: 18px; }

/* --- alertas: valor em destaque, borda pelo nível --- */
.cartao-alerta { border-left-width: 4px; }
.cartao-alerta.alto { border-left-color: var(--bad); }
.cartao-alerta.medio { border-left-color: var(--warn); }
.cartao-alerta.baixo { border-left-color: var(--border); }
.cartao-alerta .cabeca-alerta { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.cartao-alerta .valor, .linha-alerta .valor { font-size: 14px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cartao-alerta .valor small, .linha-alerta .valor small { font-size: 11px; font-weight: 500; color: var(--muted); }
.linha-alerta .valor { margin-left: auto; }

/* --- blocos do diretor: atalho para a seção --- */
.bloco-numero .atalho { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--blue); text-decoration: none; }
.bloco-numero .atalho .icone { width: 14px; height: 14px; }

/* --- cartões fixados no meio da página --- */
.cartoes-secao { margin: 0 0 20px; }
#vendedores .tabela-vendedores + .rodape-ranking { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.rodape-ranking .ver-todos { margin-left: 0; display: inline-flex; align-items: center; gap: 4px; }
.rodape-ranking .ver-todos .icone { width: 14px; height: 14px; }
.canais { margin-top: 10px; }

/* --- tabela: selo zerado chama atenção --- */
.tabela-vendedores .selo.ruim { background: var(--badbg); color: var(--bad); }

/* --- Esforço × resultado + Quem está onde --- */
.esforco-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: stretch; }
.esforco .plano-wrap { display: flex; gap: 6px; margin-top: 4px; }
.esforco .eixo-y { position: relative; width: 44px; flex-shrink: 0; font-size: 11px; color: var(--muted); height: 300px; padding-right: 4px; font-variant-numeric: tabular-nums; }
.esforco .eixo-y span { position: absolute; right: 4px; transform: translateY(-50%); }
.esforco .plano { position: relative; flex: 1; height: 300px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.esforco .mediana-x { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--border); }
.esforco .mediana-y { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); }
.esforco .canto { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: .02em; pointer-events: none; }
.esforco .canto.tl { left: 8px; top: 6px; } .esforco .canto.tr { right: 8px; top: 6px; }
.esforco .canto.bl { left: 8px; bottom: 6px; } .esforco .canto.br { right: 8px; bottom: 6px; }
.esforco .canto.bom, .quem-onde .rotulo.bom { color: var(--good); }
.esforco .canto.atencao, .quem-onde .rotulo.atencao { color: var(--warn); }
.esforco .canto.ruim, .quem-onde .rotulo.ruim { color: var(--bad); }
.esforco .canto.neutro, .quem-onde .rotulo.neutro { color: var(--blue); }
.esforco .ponto { position: absolute; transform: translate(-8px, -8px); display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; font: inherit; color: var(--text); cursor: pointer; white-space: nowrap; }
.esforco .ponto.esq { flex-direction: row-reverse; transform: translate(calc(-100% + 8px), -8px); }
.esforco .ponto i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--border); flex-shrink: 0; }
.esforco .ponto.bom i { background: var(--good); } .esforco .ponto.atencao i { background: var(--warn); }
.esforco .ponto.ruim i { background: var(--bad); } .esforco .ponto.neutro i { background: var(--blue); }
.esforco .ponto span { font-size: 12px; font-weight: 600; background: var(--card); padding: 1px 6px; border-radius: 6px; }
.esforco .ponto:hover span, .esforco .ponto:focus-visible span { text-decoration: underline; }
.esforco .ponto:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.esforco .eixo-x { position: relative; height: 16px; font-size: 11px; color: var(--muted); margin-left: 50px; margin-top: 6px; }
.esforco .eixo-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.esforco .mini, .quem-onde .mini { margin-top: 8px; display: block; }
.quem-onde { display: flex; flex-direction: column; gap: 12px; }
.quem-onde .cantos { display: flex; flex-direction: column; gap: 10px; }
.quem-onde .canto-linha { display: flex; gap: 10px; align-items: flex-start; }
.quem-onde .canto-linha i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.quem-onde .canto-linha i.bom { background: var(--good); } .quem-onde .canto-linha i.atencao { background: var(--warn); }
.quem-onde .canto-linha i.ruim { background: var(--bad); } .quem-onde .canto-linha i.neutro { background: var(--blue); }
.quem-onde .canto-linha .rotulo { display: block; font-size: 12px; font-weight: 700; }
.quem-onde .canto-linha .nomes { display: block; font-size: 13px; }
.quem-onde .mini { margin-top: auto; }

/* --- gaveta: faixa de execução em cima, 5 números embaixo --- */
.faixa-execucao { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; background: var(--card2); border: 1px solid var(--border); }
.faixa-execucao b { font-size: 28px; font-weight: 700; line-height: 1; }
.faixa-execucao .titulo { display: block; font-size: 14px; font-weight: 600; }
.faixa-execucao .sub { display: block; font-size: 12px; color: var(--muted); }
.faixa-execucao.ruim { background: var(--badbg); border-color: transparent; } .faixa-execucao.ruim b, .faixa-execucao.ruim .titulo { color: var(--bad); }
.faixa-execucao.atencao { background: var(--warnbg); border-color: transparent; } .faixa-execucao.atencao b, .faixa-execucao.atencao .titulo { color: var(--warn); }
.faixa-execucao.bom { background: var(--goodbg); border-color: transparent; } .faixa-execucao.bom b, .faixa-execucao.bom .titulo { color: var(--good); }
.numeros.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.numeros.cinco .numero b { font-size: 15px; }

/* --- vendedor: progresso do dia, duas colunas, carteira na lateral --- */
.titulo-tela.com-progresso { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.titulo-tela.com-progresso > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.progresso-dia { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px 8px 10px; }
.progresso-dia svg { width: 44px; height: 44px; flex-shrink: 0; }
.progresso-dia .trilha { fill: none; stroke: var(--accent-soft); stroke-width: 6; }
.progresso-dia .feito { fill: none; stroke: var(--navy); stroke-width: 6; stroke-linecap: round; }
:root[data-theme="dark"] .progresso-dia .feito { stroke: #8fbcff; }
.progresso-dia text { font-size: 12px; font-weight: 700; fill: var(--text); text-anchor: middle; font-variant-numeric: tabular-nums; }
.progresso-dia > div { display: flex; flex-direction: column; }
.progresso-dia b { font-size: 14px; font-weight: 600; }
.progresso-dia span { font-size: 12px; color: var(--muted); }
.vendedor-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.coluna-lado { display: flex; flex-direction: column; gap: 16px; }
.coluna-lado .cartoes-secao { margin: 0; }
.coluna-lado .cartoes { --colunas: 1; }
.coluna-lado .cartoes .cartao.cartao { grid-column-end: span 1; }
.coluna-lado .cabeca-secao { flex-direction: column; align-items: flex-start; gap: 2px; }
.carteira .cabeca-secao { flex-direction: row; align-items: baseline; justify-content: space-between; }
.numeros-carteira { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.numeros-carteira > div { background: var(--card2); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.numeros-carteira b { font-size: 20px; font-weight: 700; line-height: 1.1; }
.numeros-carteira span { font-size: 11.5px; color: var(--muted); }
.mais-carteira { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.linha-carteira { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); }
.linha-carteira b { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prazo { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.prazo.perto { color: var(--warn); }
.prazo.urgente { color: var(--bad); }
.descarte .opcao .dica { display: block; }   /* a consequência de cada motivo, sempre à vista */
.descarte .opcao { align-items: start; }
.descarte .opcao input { margin-top: 3px; }

@media (max-width: 1100px) {
  .esforco-grade, .vendedor-grade { grid-template-columns: 1fr; }
  .numeros.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faixa-meta .aviso-meta { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 900px) {
  .bot .so-desktop { display: none; }
  .bot .so-celular-bloco { display: inline-flex; }
  .bot.expandido { width: 100vw; }
  .esforco .plano, .esforco .eixo-y { height: 240px; }
  .esforco .ponto span { display: none; }
  .progresso-dia { width: 100%; }
}