:root {
color-scheme: light;
--cor-fundo: #f5f6fa;
--cor-cartao: #fff;
--cor-texto: #1a1e29;
--cor-texto-suave: #616773;
--cor-texto-suave2: #4c525e;
--cor-texto-fraco: #6b7280;
--cor-borda: #d9dce3;
--cor-borda-suave: #e6e8ee;
--cor-borda-tabela: #edeef2;
--cor-primaria: #2c3e91;
--cor-hover-linha: #f7f8fc;
--cor-msg-in: #eef0f4;
--cor-msg-out: #dde3fb;
--sombra-cartao: 0 1px 2px rgba(20, 24, 38, 0.04), 0 6px 20px -10px rgba(20, 24, 38, 0.10);
--sombra-elevada: 0 4px 10px -2px rgba(20, 24, 38, 0.08), 0 16px 36px -14px rgba(20, 24, 38, 0.16);
--sombra-auth: 0 20px 50px -20px rgba(20, 24, 38, 0.28);
--cor-erro-texto: #b3261e;
--cor-erro-fundo: #fdecea;
--cor-erro-borda: #f5c6cb;
--cor-sucesso-texto: #187734;
--cor-sucesso-fundo: #e1f5e9;
--cor-aviso-texto: #8a6300;
--cor-aviso-fundo: #fff4d6;
--cor-neutro-fundo: #eee;
--cor-neutro-texto: #666;
--cor-info-texto: #0f6699;
--cor-info-fundo: #e2f2fb;
--cor-violeta-texto: #6529b8;
--cor-violeta-fundo: #efe6fb;
--cor-dourado-texto: #8a6d1f;
--cor-dourado-fundo: #f7ecd0;
--raio-sm: 8px;
--raio-md: 12px;
--raio-lg: 16px;
--fonte-numero: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
[data-tema="escuro"] {
color-scheme: dark;
/* Pretos profundos (05/10/2026): camadas neutras, sem tom azul, separadas
por borda fina. Texto conferido por calculo (WCAG AA >= 4,5:1 sobre o
cartao #0f0f10: principal 17,6 / suave 7,5 / fraco 5,6). */
--cor-fundo: #000000;
--cor-lateral: #0a0a0a;
--cor-cartao: #0f0f10;
--cor-elevado: #161618;
--cor-texto: #f5f5f7;
--cor-texto-suave: #a1a1aa;
--cor-texto-suave2: #b4b4bc;
--cor-texto-fraco: #8a8a93;
--cor-borda: rgba(255, 255, 255, 0.14);
--cor-borda-suave: rgba(255, 255, 255, 0.08);
--cor-borda-tabela: rgba(255, 255, 255, 0.07);
--cor-hover-linha: #1a1a1c;
--cor-primaria: #7c8ded;
--cor-msg-in: #161618;
--cor-msg-out: #1c2147;
--sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
--sombra-elevada: 0 8px 24px -8px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
--sombra-auth: 0 24px 60px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
--cor-erro-texto: #ff8a80;
--cor-erro-fundo: rgba(255, 99, 88, 0.12);
--cor-erro-borda: rgba(255, 99, 88, 0.30);
--cor-sucesso-texto: #6fdb94;
--cor-sucesso-fundo: rgba(74, 222, 128, 0.12);
--cor-aviso-texto: #e8c468;
--cor-aviso-fundo: rgba(232, 196, 104, 0.12);
--cor-neutro-fundo: rgba(255, 255, 255, 0.07);
--cor-neutro-texto: #a8a8b0;
--cor-info-texto: #7dd3fc;
--cor-info-fundo: rgba(125, 211, 252, 0.12);
--cor-violeta-texto: #c4a9f5;
--cor-violeta-fundo: rgba(196, 169, 245, 0.13);
--cor-dourado-texto: #e0c070;
--cor-dourado-fundo: rgba(224, 192, 112, 0.13);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 14px;
background: var(--cor-fundo);
color: var(--cor-texto);
-webkit-font-smoothing: antialiased;
transition: background-color .2s ease, color .2s ease;
}
::selection {
background: color-mix(in srgb, var(--cor-primaria) 30%, transparent);
}
h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; }
a { color: var(--cor-primaria); }
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid color-mix(in srgb, var(--cor-primaria) 55%, transparent);
outline-offset: 2px;
border-radius: 4px;
}
.auth-page {
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(1100px 600px at 8% -10%, color-mix(in srgb, var(--cor-primaria) 10%, transparent), transparent 60%),
var(--cor-fundo);
padding: 24px;
}
.auth-card {
background: var(--cor-cartao);
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-lg);
box-shadow: var(--sombra-auth);
padding: 36px 32px;
width: 100%;
max-width: 380px;
}
.auth-card h1 {
font-size: 21px;
margin: 0 0 22px;
}
.tabs {
display: flex;
gap: 4px;
margin-bottom: 22px;
background: var(--cor-fundo);
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-sm);
padding: 3px;
}
.tabs button {
flex: 1;
padding: 8px;
border: none;
background: transparent;
color: var(--cor-texto-suave);
border-radius: 6px;
cursor: pointer;
font-size: 13.5px;
font-weight: 600;
transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.tabs button.ativo {
background: var(--cor-cartao);
color: var(--cor-primaria);
box-shadow: var(--sombra-cartao);
}
form {
display: flex;
flex-direction: column;
gap: 14px;
}
label {
font-size: 12.5px;
font-weight: 600;
color: var(--cor-texto-suave2);
text-transform: none;
}
input, select, textarea {
font-family: inherit;
}
input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
font-size: 14px;
margin-top: 5px;
background: var(--cor-cartao);
color: var(--cor-texto);
transition: border-color .15s ease;
}
input:hover { border-color: var(--cor-texto-fraco); }
button {
font-family: inherit;
}
button[type="submit"] {
margin-top: 6px;
padding: 11px;
border: none;
border-radius: var(--raio-sm);
background: var(--cor-primaria);
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: filter .12s ease, transform .05s ease;
}
button[type="submit"]:hover { filter: brightness(1.06); }
button[type="submit"]:active { transform: translateY(1px); }
button[type="submit"]:disabled {
opacity: 0.55;
cursor: default;
filter: none;
}
.mensagem-erro {
color: var(--cor-erro-texto);
font-size: 13px;
min-height: 16px;
}
.oculto {
display: none !important;
}
/* ---- banner de erro global ---- */
.banner-erro {
background: var(--cor-erro-fundo);
color: var(--cor-erro-texto);
border-bottom: 1px solid var(--cor-erro-borda);
padding: 10px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 13px;
}
.banner-erro button {
border: 1px solid var(--cor-erro-texto);
background: var(--cor-cartao);
color: var(--cor-erro-texto);
border-radius: var(--raio-sm);
padding: 6px 12px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
/* ---- aviso de WhatsApp desconectado (dashboard principal) ---- */
.aviso-whatsapp {
background: var(--cor-aviso-fundo);
color: var(--cor-aviso-texto);
border-bottom: 1px solid var(--cor-aviso-texto);
padding: 10px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 13px;
font-weight: 600;
}
.aviso-whatsapp a {
color: var(--cor-aviso-texto);
font-weight: 700;
white-space: nowrap;
text-decoration: underline;
}
.primeiros-passos {
background: var(--cor-info-fundo);
color: var(--cor-info-texto);
border-bottom: 1px solid var(--cor-info-texto);
padding: 10px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 13px;
}
.primeiros-passos-texto {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.primeiros-passos-texto strong {
font-weight: 700;
white-space: nowrap;
}
.primeiros-passos-lista {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
list-style: none;
margin: 0;
padding: 0;
counter-reset: passo;
}
.primeiros-passos-lista li {
counter-increment: passo;
font-weight: 600;
}
.primeiros-passos-lista li::before {
content: counter(passo) '. ';
}
.primeiros-passos-lista li.concluido::before {
content: '✓ ';
}
.primeiros-passos-lista li.concluido a {
text-decoration: line-through;
opacity: 0.7;
}
.primeiros-passos-lista a {
color: var(--cor-info-texto);
text-decoration: underline;
}
.primeiros-passos-fechar {
background: transparent;
border: none;
color: var(--cor-info-texto);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
width: auto;
}
/* ---- topo (nav compartilhado pelas 8 telas) ---- */
.topo {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 24px;
background: color-mix(in srgb, var(--cor-cartao) 92%, transparent);
backdrop-filter: saturate(150%) blur(8px);
-webkit-backdrop-filter: saturate(150%) blur(8px);
border-bottom: 1px solid var(--cor-borda-suave);
transition: background-color .2s ease, border-color .2s ease;
}
.topo h1 {
font-size: 16px;
margin: 0;
letter-spacing: -0.01em;
}
.topo-titulo {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.logo-tenant-topo {
height: 28px;
width: auto;
max-width: 120px;
border-radius: 6px;
background: #fff;
padding: 2px;
}
.topo button {
border: 1px solid var(--cor-borda);
background: var(--cor-cartao);
color: var(--cor-texto);
border-radius: var(--raio-sm);
padding: 7px 12px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: background-color .12s ease, border-color .12s ease;
}
.topo button:hover {
background: var(--cor-hover-linha);
border-color: var(--cor-texto-fraco);
}
.topo-acoes {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.topo-acoes a {
color: var(--cor-texto-suave2);
font-size: 13px;
font-weight: 500;
text-decoration: none;
padding: 7px 10px;
border-radius: var(--raio-sm);
transition: background-color .12s ease, color .12s ease;
}
.topo-acoes a:hover {
background: var(--cor-hover-linha);
color: var(--cor-primaria);
}
#tabela-eventos-container td a,
#tabela-historico-container td a {
color: var(--cor-primaria);
font-weight: 600;
}
main {
padding: 28px 24px 48px;
max-width: 1120px;
margin: 0 auto;
}
/* ---- Dashboard em tela cheia (item 103a da FILA.md, 15/09/2026): o
"main" herdado acima trava em 1120px centralizado -- sobrava muito
espaço vazio nas laterais em tela larga, mesmo depois do sidebar grid
já ter liberado a largura inteira pro conteúdo. Segue o mesmo molde já
usado pelo CRM (body.pagina-crm main, acima). Cuidado do item 32d:
nunca escrever a sequência que fecha comentário no meio do texto aqui
embaixo, senão o navegador descarta todo o CSS até o fim do arquivo. */
body.pagina-dashboard main {
max-width: none;
width: 100%;
padding: 24px 28px 48px;
margin: 0;
}
/* ---- cabeçalho do painel: título + período + piso de contagem ---- */
.painel-cabecalho {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 20px;
margin-bottom: 18px;
}
.painel-titulo h2 {
font-size: 20px;
margin: 0;
letter-spacing: -0.02em;
}
.painel-subtitulo {
margin: 4px 0 0;
font-size: 13px;
color: var(--cor-texto-suave);
}
.painel-controles {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.seletor-periodo {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--cor-cartao);
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-sm);
box-shadow: var(--sombra-cartao);
}
.seletor-periodo button {
border: none;
background: transparent;
color: var(--cor-texto-suave);
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
transition: background-color .12s ease, color .12s ease;
}
.seletor-periodo button:hover {
color: var(--cor-texto);
}
.seletor-periodo button.ativo {
background: var(--cor-primaria);
color: #fff;
}
/* Período personalizado do dashboard (12/10/2026): duas datas + Aplicar,
abre numa linha logo abaixo do seletor e quebra linha no celular. */
.periodo-personalizado {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
flex-basis: 100%;
gap: 8px;
order: 10;
}
.periodo-personalizado.oculto { display: none; }
.periodo-personalizado label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--cor-texto-suave);
}
.periodo-personalizado input[type="date"] {
padding: 5px 8px;
font-size: 13px;
}
.botao-aplicar-periodo {
border: none;
background: var(--cor-primaria);
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 7px 14px;
border-radius: var(--raio-sm);
cursor: pointer;
}
.periodo-personalizado-erro {
flex-basis: 100%;
text-align: right;
font-size: 12px;
color: var(--cor-erro-texto);
}
.periodo-personalizado-erro:empty { display: none; }
.desc-secao {
margin: 0 0 12px;
font-size: 13px;
color: var(--cor-texto-suave);
}
.grade-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 22px;
margin-bottom: 22px;
}
.grade-2 > section {
margin-bottom: 0;
}
/* ---- gráfico de série diária (SVG desenhado em dashboard.js) ---- */
.grafico-serie {
width: 100%;
}
.grafico-serie-svg {
width: 100%;
height: auto;
display: block;
font-family: inherit;
}
.grafico-guia {
stroke: var(--cor-borda-suave);
stroke-width: 1;
}
.grafico-rotulo {
fill: var(--cor-texto-fraco);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.grafico-barra {
fill: color-mix(in srgb, var(--cor-primaria) 55%, var(--cor-cartao));
transition: fill .12s ease;
}
.grafico-barra:hover {
fill: var(--cor-primaria);
}
.grafico-barra--hoje {
fill: var(--cor-primaria);
}
/* ---- listas de barras horizontais (regiões, anúncios) ---- */
.lista-barras {
display: flex;
flex-direction: column;
gap: 12px;
}
.barra-linha-cabecalho {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 13px;
margin-bottom: 5px;
}
.barra-linha-rotulo {
font-weight: 700;
white-space: nowrap;
}
.barra-linha-detalhe {
color: var(--cor-texto-suave);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.barra-linha-valor {
margin-left: auto;
font-variant-numeric: tabular-nums;
color: var(--cor-texto-suave2);
white-space: nowrap;
}
.barra-linha-cabecalho .barra-linha-detalhe + .barra-linha-valor {
margin-left: 0;
}
.grafico-rodape {
margin: 12px 0 0;
}
/* ---- tabela de desempenho dos anúncios (Meta Ads) ---- */
.tabela-anuncios th.num,
.tabela-anuncios td.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
.tabela-anuncios td.num--destaque {
font-weight: 700;
}
.tabela-anuncios tfoot td {
font-weight: 700;
border-top: 2px solid var(--cor-borda);
border-bottom: none;
}
.tabela-anuncios tbody tr {
cursor: default;
}
.anuncio-nome {
font-weight: 600;
max-width: 320px;
white-space: normal;
}
.anuncio-campanha {
font-size: 11.5px;
color: var(--cor-texto-fraco);
max-width: 320px;
white-space: normal;
}
.linha-botoes {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.linha-botoes button[type="submit"] {
margin-top: 0;
width: auto;
padding: 10px 20px;
}
.kpi-taxa {
font-size: 12px;
font-weight: 600;
color: var(--cor-texto-fraco);
margin-top: -6px;
}
.funil-pct {
margin-left: 6px;
font-size: 11px;
font-weight: 700;
color: var(--cor-texto-fraco);
}
/* ---- KPIs (linha piramidal: macro no topo) ---- */
.kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-bottom: 28px;
}
.kpi {
background: var(--cor-cartao);
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-lg);
padding: 18px 20px;
box-shadow: var(--sombra-cartao);
display: flex;
flex-direction: column;
gap: 12px;
transition: box-shadow .15s ease, transform .15s ease;
}
.kpi:hover {
box-shadow: var(--sombra-elevada);
transform: translateY(-1px);
}
.kpi-icone {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.kpi-icone svg {
width: 19px;
height: 19px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.kpi-icone--primaria {
color: var(--cor-primaria);
background: color-mix(in srgb, var(--cor-primaria) 14%, transparent);
}
.kpi-icone--info {
color: var(--cor-info-texto);
background: var(--cor-info-fundo);
}
.kpi-icone--violeta {
color: var(--cor-violeta-texto);
background: var(--cor-violeta-fundo);
}
.kpi-icone--sucesso {
color: var(--cor-sucesso-texto);
background: var(--cor-sucesso-fundo);
}
.kpi .valor {
font-family: var(--fonte-numero);
font-size: 28px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.kpi .rotulo {
font-size: 13px;
color: var(--cor-texto-suave);
font-weight: 500;
}
section {
background: var(--cor-cartao);
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-lg);
padding: 20px 22px;
box-shadow: var(--sombra-cartao);
margin-bottom: 22px;
transition: background-color .2s ease;
}
section h2 {
font-size: 15px;
margin: 0 0 4px;
}
section > p.vazio:first-of-type {
margin-top: 0;
}
/* ---- funil (visão de progressão do meio da pirâmide) ---- */
.funil {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin-top: 12px;
}
.funil-item {
position: relative;
border: 1px solid var(--cor-borda-suave);
border-left: 3px solid var(--cor-borda);
border-radius: var(--raio-md);
padding: 12px 14px 14px;
cursor: pointer;
background: var(--cor-cartao);
transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.funil-item:hover {
background: var(--cor-hover-linha);
transform: translateY(-1px);
}
.funil-item.selecionado {
border-color: var(--cor-primaria);
border-left-color: var(--cor-primaria);
background: color-mix(in srgb, var(--cor-primaria) 6%, var(--cor-cartao));
}
.funil-item .n {
font-family: var(--fonte-numero);
font-size: 21px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.funil-item .titulo {
font-size: 12px;
color: var(--cor-texto-suave);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.funil-barra-trilho {
margin-top: 10px;
height: 5px;
border-radius: 999px;
background: var(--cor-borda-suave);
overflow: hidden;
}
.funil-barra {
height: 100%;
border-radius: 999px;
background: var(--cor-primaria);
transition: width .35s ease;
}
/* ---- tabelas (base do detalhe, rodapé da pirâmide) ---- */
.tabela-wrap {
overflow-x: auto;
margin: 0 -2px;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
}
thead th {
position: sticky;
top: 0;
background: var(--cor-cartao);
z-index: 1;
}
th, td {
text-align: left;
padding: 10px 10px;
border-bottom: 1px solid var(--cor-borda-tabela);
white-space: nowrap;
}
th {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--cor-texto-fraco);
}
tbody tr {
cursor: pointer;
}
#tabela-eventos-container tbody tr {
cursor: default;
}
tbody tr:hover {
background: var(--cor-hover-linha);
}
.celula-estagio {
display: flex;
align-items: center;
gap: 6px;
}
.select-estagio {
padding: 6px 7px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
font-size: 13px;
background: var(--cor-cartao);
color: var(--cor-texto);
}
.botao-resetar-estagio {
border: 1px solid var(--cor-borda);
background: var(--cor-cartao);
color: var(--cor-texto);
border-radius: var(--raio-sm);
padding: 4px 7px;
cursor: pointer;
font-size: 13px;
line-height: 1;
}
/* item 103c da FILA.md: select de IA por lead (Ativa/Pausada/Desligada) na
tela Leads, mesmo estilo de .select-estagio. */
.select-ia-lead {
padding: 6px 7px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
font-size: 13px;
background: var(--cor-cartao);
color: var(--cor-texto);
}
/* item 210 da FILA.md (Tarefa 2.3, 02/10/2026): rótulo + select de IA no
topo do painel lateral do lead (CRM/Conversas). */
.painel-conversa-pausa {
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.painel-conversa-pausa-rotulo {
font-size: 13px;
color: var(--cor-texto-suave);
}
.painel-conversa-pausa .vazio {
width: 100%;
margin: 0;
font-size: 12px;
}
/* item 210 da FILA.md (Tarefa 2.2, 02/10/2026): controle compacto
Ligar/Pausar/Desligar IA no card do CRM -- bolinha de 3 cores sempre
visível, mini menu só ao clicar. position:relative na raiz pra o menu
(position:absolute) ficar ancorado nela. */
.controle-ia-lead {
position: relative;
flex-shrink: 0;
margin-left: auto;
}
.controle-ia-lead-bolinha {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.12);
cursor: pointer;
padding: 0;
display: block;
}
.controle-ia-lead-bolinha--ativa { background: #22c55e; }
.controle-ia-lead-bolinha--pausada { background: #f59e0b; }
.controle-ia-lead-bolinha--desligada { background: #9ca3af; }
.controle-ia-lead-bolinha:disabled { opacity: 0.5; cursor: wait; }
.controle-ia-lead-menu {
position: absolute;
top: 20px;
right: 0;
z-index: 20;
min-width: 190px;
background: var(--cor-cartao);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
padding: 6px;
display: flex;
flex-direction: column;
}
.controle-ia-lead-menu.oculto { display: none; }
.controle-ia-lead-submenu-titulo {
font-size: 11px;
color: var(--cor-texto-suave);
padding: 6px 8px 2px;
}
.controle-ia-lead-opcao {
text-align: left;
border: none;
background: none;
color: var(--cor-texto);
font-size: 13px;
font-family: inherit;
padding: 6px 8px;
border-radius: var(--raio-sm);
cursor: pointer;
}
.controle-ia-lead-opcao:hover:not(:disabled) { background: var(--cor-hover-linha); }
.controle-ia-lead-opcao:disabled { color: var(--cor-texto-fraco); cursor: default; }
.controle-ia-lead-opcao--sub { padding-left: 16px; font-size: 12.5px; }
.controle-ia-lead-opcao--perigo { color: var(--cor-erro-texto); }
/* item 210b da FILA.md (04/10/2026): botão "Agendar mensagem" no card,
logo ao lado da bolinha de IA (.controle-ia-lead já tem margin-left:auto
e empurra os dois pra direita do .kanban-card-topo). */
.kanban-card-botao-agendar {
flex-shrink: 0;
border: none;
background: none;
cursor: pointer;
font-size: 13px;
line-height: 1;
padding: 0 0 0 6px;
opacity: 0.65;
}
.kanban-card-botao-agendar:hover { opacity: 1; }
.botao-abrir-conversa {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-left: 6px;
border: none;
background: none;
border-radius: 50%;
text-decoration: none;
font-size: 14px;
color: var(--cor-texto);
cursor: pointer;
padding: 0;
}
.botao-abrir-conversa:hover {
background: var(--cor-hover-linha);
}
/* Celula Nome da tabela de Leads: nome a esquerda, botoes alinhados a direita */
.nome-lead-linha {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
/* Nome do lead (04/10/2026, pedido do Sergio): sem sublinhado, mesma cor do
telefone da linha (cor do texto da tabela, nao o roxo de link) e, ao passar
o mouse, acende para uma cor mais forte com transicao suave. */
.nome-lead-link {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: inherit;
text-decoration: none;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
.nome-lead-link:hover,
.nome-lead-link:focus-visible {
color: #000;
text-decoration: none;
text-shadow: 0 0 0.6px currentColor;
}
[data-tema="escuro"] .nome-lead-link:hover,
[data-tema="escuro"] .nome-lead-link:focus-visible {
color: #fff;
text-shadow: 0 0 0.6px currentColor, 0 0 10px rgba(255, 255, 255, 0.35);
}
.nome-lead-acoes {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
margin-left: auto;
}
.nome-lead-acoes .botao-abrir-conversa {
margin-left: 0;
width: 28px;
height: 28px;
font: inherit;
font-size: 15px;
line-height: 1;
}
.conversa {
margin-top: 18px;
border-top: 1px solid var(--cor-borda-tabela);
padding-top: 18px;
}
.conversa .msg {
max-width: 70%;
padding: 9px 12px;
border-radius: var(--raio-md);
margin-bottom: 8px;
font-size: 13.5px;
line-height: 1.4;
white-space: pre-wrap;
}
.conversa .msg.in {
background: var(--cor-msg-in);
margin-right: auto;
border-bottom-left-radius: 4px;
}
.conversa .msg.out {
background: var(--cor-msg-out);
margin-left: auto;
border-bottom-right-radius: 4px;
}
.conversa .msg .msg-origem {
display: block;
font-size: 11px;
font-weight: 700;
opacity: 0.7;
margin-bottom: 2px;
}
/* Selo "radar de intervenções" (item 113 da FILA.md) -- mesmo padrão de
.msg-origem, só um pouco menor, pra não competir com o rótulo IA/Atendente
quando os dois aparecem juntos no mesmo balão. */
.conversa .msg .msg-radar-selo {
display: block;
font-size: 10px;
font-weight: 600;
opacity: 0.75;
margin-bottom: 2px;
cursor: help;
}
.conversa .msg .msg-hora {
display: block;
font-size: 10px;
opacity: 0.6;
margin-top: 2px;
text-align: right;
}
.conversa .msg .msg-status {
display: block;
font-size: 10px;
opacity: 0.7;
text-align: right;
}
.conversa .msg .msg-status-falha {
opacity: 1;
color: var(--cor-erro-texto);
font-weight: 700;
}
/* ✓✓ azul = lida (legenda do WhatsApp, 07/10/2026) */
.conversa .msg .msg-status-lida {
opacity: 1;
color: #34b7f1;
}
.vazio {
color: var(--cor-texto-fraco);
font-size: 13px;
}
.carregar-antigas-container {
text-align: center;
margin-bottom: 12px;
}
.conversa-cabecalho {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
}
.conversa-subtitulo {
margin: 2px 0 0;
color: var(--cor-texto-fraco);
font-size: 13px;
}
.form-editar-contato {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 10px 0;
}
.form-editar-contato input {
padding: 7px 9px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
background: var(--cor-cartao);
color: var(--cor-texto);
font-size: 13px;
margin-top: 0;
width: auto;
}
.form-envio-mensagem {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 14px;
max-width: 70%;
}
.form-envio-mensagem textarea {
resize: vertical;
font-family: inherit;
font-size: 13.5px;
padding: 9px 11px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
background: var(--cor-cartao);
color: var(--cor-texto);
}
.form-envio-mensagem button {
align-self: flex-end;
}
/* Janela de 24h fechada (canal oficial) fora de #pagina-conversas -- painel
embutido do kanban (item 124) e conversa do dashboard (item 155 da
FILA.md, fatia 3). Mesmo widget de #pagina-conversas .composer-janela-*
(style.css ~5393), mas com nome/token proprios porque aqueles usam
variaveis --wa-* (tema escuro do WhatsApp) que so' existem dentro de
#pagina-conversas -- aqui reusa os tokens genericos --cor-* do resto do
app, ja usados por .botao-secundario/.mensagem-erro nestas 2 telas. */
.composer-janela-fechada-generico {
max-width: 70%;
margin-top: 14px;
}
.composer-janela-fechada-generico p {
margin: 0 0 8px;
color: var(--cor-texto-suave);
font-size: 13px;
}
.composer-janela-fechada-linha-generica {
display: flex;
gap: 8px;
}
.composer-janela-fechada-linha-generica select {
flex: 1;
min-width: 0;
background: var(--cor-cartao);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
padding: 8px;
color: var(--cor-texto);
font-size: 13px;
}
.composer-enviar-modelo-generico {
flex: none;
background: var(--cor-neutro-fundo);
color: var(--cor-texto);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
padding: 8px 14px;
font-size: 13px;
cursor: pointer;
}
.composer-enviar-modelo-generico:disabled,
.composer-janela-fechada-linha-generica select:disabled {
opacity: 0.6;
cursor: default;
}
.composer-chamar-reuniao-generico {
display: block;
width: 100%;
margin: 0 0 8px;
background: var(--cor-primaria);
color: #fff;
border: none;
border-radius: var(--raio-md);
padding: 10px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.composer-chamar-reuniao-generico:disabled {
opacity: 0.6;
cursor: default;
}
.secao-notas-internas {
margin: 10px 0 18px;
padding: 12px 14px;
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-md);
background: var(--cor-neutro-fundo);
}
.secao-notas-internas h3 {
margin: 0 0 8px;
font-size: 13px;
}
.form-notas-internas {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 70%;
}
.form-notas-internas textarea {
resize: vertical;
font-family: inherit;
font-size: 13.5px;
padding: 9px 11px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
background: var(--cor-cartao);
color: var(--cor-texto);
}
.form-notas-internas button {
align-self: flex-start;
}
.form-edicao-evento {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 8px;
min-width: 220px;
}
.form-edicao-evento input,
.form-edicao-evento textarea {
font-family: inherit;
font-size: 13px;
padding: 7px 9px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
background: var(--cor-cartao);
color: var(--cor-texto);
}
.form-edicao-evento textarea {
resize: vertical;
}
.seletor-lead-evento {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--cor-texto);
}
.seletor-lead-evento .busca-lead {
width: 100%;
max-width: none;
}
.badge {
display: inline-block;
font-size: 11.5px;
font-weight: 700;
border-radius: 999px;
padding: 3px 10px;
}
.badge-pausado {
background: var(--cor-aviso-fundo);
color: var(--cor-aviso-texto);
}
.aviso-pausado {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--cor-aviso-fundo);
color: var(--cor-aviso-texto);
border-radius: var(--raio-md);
padding: 11px 14px;
margin-bottom: 12px;
font-size: 13px;
}
.aviso-pausado .botao-secundario {
white-space: nowrap;
}
/* item 155/parte 3 da FILA.md -- mesmo molde visual de .aviso-pausado
(aviso + ação), pra texto livre guardado enquanto a janela de 24h da
Meta está fechada (ver criarAvisoMensagemNaEspera em conversas.js e os
pares em dashboard.js/kanban.js). */
.aviso-mensagem-na-espera {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--cor-aviso-fundo);
color: var(--cor-aviso-texto);
border-radius: var(--raio-md);
padding: 11px 14px;
margin-bottom: 12px;
font-size: 13px;
}
.aviso-mensagem-na-espera .botao-secundario {
white-space: nowrap;
}
.badge-optout {
background: var(--cor-erro-fundo);
color: var(--cor-erro-texto);
}
/* Item 177 da FILA.md -- lead que passou pelo funil do Disparo de Outubro
(larissa-server/src/disparoOutubro.js), mostrado na tabela de Leads. */
.badge-disparo {
background: var(--cor-dourado-fundo);
color: var(--cor-dourado-texto);
}
.badge-plano {
background: var(--cor-neutro-fundo);
color: var(--cor-neutro-texto);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.aviso-optout {
display: flex;
align-items: center;
gap: 12px;
background: var(--cor-erro-fundo);
color: var(--cor-erro-texto);
border-radius: var(--raio-md);
padding: 11px 14px;
margin-bottom: 12px;
font-size: 13px;
}
.checklist-lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.checklist-item {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
}
.checklist-item-label {
color: var(--cor-texto);
}
.checklist-item-resumo {
color: var(--cor-neutro-texto);
font-size: 12px;
font-style: italic;
}
.checklist-status-confirmado {
background: var(--cor-sucesso-fundo);
color: var(--cor-sucesso-texto);
}
.checklist-status-aguardando_confirmacao {
background: var(--cor-aviso-fundo);
color: var(--cor-aviso-texto);
}
.checklist-status-pendente {
background: var(--cor-neutro-fundo);
color: var(--cor-neutro-texto);
}
/* ---- conversas (caixa de entrada, tela conversas.html) ----
Item 32d (10/09/2026): o bloco antigo desta tela (layout em cartões,
.conversas-layout/.conversas-lista-painel/.conversas-detalhe etc.) foi
REMOVIDO daqui. Ele era código morto desde o item 32b, mas vazava pra
dentro de #pagina-conversas (padding/borda/raio no detalhe, borda nas
abas) onde o bloco escopado não redefinia cada propriedade. Toda a regra
desta tela vive agora no bloco "#pagina-conversas" no fim do arquivo. */
/* ---- configurações do agente ---- */
.campo {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 16px;
max-width: 420px;
}
.busca-linha {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
max-width: 640px;
}
.busca-linha input[type="text"] {
flex: 1;
min-width: 200px;
margin-top: 0;
}
.busca-linha select {
padding: 9px 8px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
font-size: 13px;
background: var(--cor-cartao);
color: var(--cor-texto);
}
.form-novo-lead-inline {
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-md);
padding: 16px 18px 4px;
margin-bottom: 18px;
max-width: 460px;
background: var(--cor-cartao);
}
.busca-lead {
position: relative;
max-width: 420px;
}
.busca-lead-resultados {
position: absolute;
z-index: 5;
top: 100%;
left: 0;
right: 0;
background: var(--cor-cartao);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
box-shadow: var(--sombra-elevada);
max-height: 220px;
overflow-y: auto;
margin-top: 4px;
}
.busca-lead-resultados button {
display: block;
width: 100%;
text-align: left;
padding: 9px 10px;
border: none;
background: none;
color: var(--cor-texto);
cursor: pointer;
font-size: 14px;
}
.busca-lead-resultados button:hover {
background: var(--cor-hover-linha);
}
.lead-selecionado {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
padding: 8px 10px;
background: var(--cor-neutro-fundo);
color: var(--cor-neutro-texto);
border-radius: var(--raio-sm);
max-width: 420px;
}
.lead-selecionado span {
flex: 1;
}
.campo label {
font-size: 12.5px;
font-weight: 600;
color: var(--cor-texto-suave2);
}
fieldset {
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-md);
padding: 16px 18px;
margin: 0 0 16px;
}
fieldset legend {
font-size: 13px;
font-weight: 700;
padding: 0 6px;
}
.dias-semana {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
}
.checkbox-linha {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--cor-texto);
cursor: pointer;
}
.dia-semana {
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
padding: 6px 10px;
}
.horario-linha {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 12px;
}
.horario-linha label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12.5px;
color: var(--cor-texto-suave2);
}
.horario-linha input {
padding: 8px;
}
.faq-item {
display: grid;
grid-template-columns: 1fr 2fr auto;
gap: 8px;
align-items: start;
margin-bottom: 10px;
}
.faq-item input,
.faq-item textarea {
padding: 8px 9px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
font-size: 13px;
font-family: inherit;
background: var(--cor-cartao);
color: var(--cor-texto);
margin-top: 0;
}
.faq-item textarea {
min-height: 38px;
resize: vertical;
}
/* Item 115c-4/FILA.md -- catálogo de durações da consulta (aba "Comercial"
do agente principal), mesmo espírito visual de .faq-item, mas em flex
(4 campos de largura variável + botão remover, em vez de grid fixo). */
.catalogo-item {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: end;
margin-bottom: 10px;
padding: 10px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
}
.catalogo-item .campo-catalogo {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 11px;
color: var(--cor-texto-suave);
}
.catalogo-item input {
padding: 7px 9px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
font-size: 13px;
font-family: inherit;
background: var(--cor-cartao);
color: var(--cor-texto);
}
.catalogo-item .campo-catalogo-nome { flex: 2 1 140px; }
.catalogo-item .campo-catalogo-minutos { flex: 1 1 80px; }
.catalogo-item .campo-catalogo-valor { flex: 1 1 100px; }
.catalogo-item .campo-catalogo-link { flex: 3 1 200px; }
.botao-secundario {
border: 1px solid var(--cor-primaria);
background: var(--cor-cartao);
color: var(--cor-primaria);
border-radius: var(--raio-sm);
padding: 8px 13px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: background-color .12s ease;
}
.botao-secundario:hover {
background: color-mix(in srgb, var(--cor-primaria) 8%, transparent);
}
.botao-remover {
border: 1px solid var(--cor-borda);
background: var(--cor-cartao);
color: var(--cor-erro-texto);
border-radius: var(--raio-sm);
padding: 7px 10px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.botao-remover:hover {
background: var(--cor-erro-fundo);
}
.mensagem-sucesso {
color: var(--cor-sucesso-texto);
font-size: 13px;
min-height: 16px;
font-weight: 600;
}
#form-config button[type="submit"] {
border: none;
border-radius: var(--raio-sm);
background: var(--cor-primaria);
color: #fff;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
/* ---- marca (branding) ---- */
.logo-atual {
margin-bottom: 16px;
}
.logo-preview {
max-width: 200px;
max-height: 120px;
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-md);
padding: 8px;
display: block;
background: #fff;
}
.cor-campo {
max-width: none;
}
.cor-linha {
display: flex;
align-items: center;
gap: 10px;
}
.cor-linha input[type="color"] {
width: 44px;
height: 36px;
padding: 2px;
cursor: pointer;
margin-top: 0;
}
.cor-linha input[type="text"] {
max-width: 140px;
}
#form-logo button[type="submit"],
#form-cor button[type="submit"] {
border: none;
border-radius: var(--raio-sm);
background: var(--cor-primaria);
color: #fff;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
/* ---- colunas do kanban ---- */
.coluna-item {
display: grid;
grid-template-columns: 1.2fr 2fr auto 90px auto auto;
gap: 10px;
align-items: center;
margin-bottom: 4px;
}
.coluna-chave {
font-size: 13px;
color: var(--cor-texto-suave2);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.coluna-item input[type="text"],
.coluna-item input[type="number"] {
padding: 8px 9px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
font-size: 13px;
background: var(--cor-cartao);
color: var(--cor-texto);
margin-top: 0;
}
.coluna-item input[type="color"] {
width: 40px;
height: 32px;
padding: 2px;
cursor: pointer;
margin-top: 0;
}
.coluna-linha-erro {
margin: 0 0 12px;
}
/* Painel inline "Para onde os leads vão?" (item 90 da FILA.md) -- some fora
do grid de 6 colunas de .coluna-item, ocupa a linha inteira abaixo. */
.coluna-remover-painel {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: -2px 0 12px;
padding: 10px 12px;
border: 1px solid var(--cor-borda-suave);
border-radius: 10px;
background: var(--cor-cartao);
font-size: 13px;
}
.coluna-remover-painel p {
margin: 0;
}
.coluna-remover-painel select {
padding: 6px 8px;
border-radius: 8px;
border: 1px solid var(--cor-borda);
background: var(--cor-fundo);
color: var(--cor-texto);
font: inherit;
}
#form-nova-coluna button[type="submit"] {
border: none;
border-radius: var(--raio-sm);
background: var(--cor-primaria);
color: #fff;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
/* ---- equipe (usuários do tenant) ---- */
.usuario-item {
display: grid;
grid-template-columns: 1.6fr 1fr auto 170px auto;
gap: 10px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--cor-borda-tabela);
}
.usuario-email {
font-size: 13px;
color: var(--cor-texto);
}
.usuario-nome,
.usuario-data {
font-size: 13px;
color: var(--cor-texto-suave);
}
.usuario-voce {
font-size: 12px;
color: var(--cor-texto-fraco);
}
.usuario-acoes {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
/* Variante compacta de .botao-secundario (linha ~750), escopada a
.usuario-acoes (3+ botoes numa linha so, precisam de padding/fonte menor
e nowrap pra caber). Ate' 08/08/2026 esta era uma 2a declaracao SEM escopo
do mesmo seletor .botao-secundario -- especificidade identica a` 1a,
entao vencia em toda propriedade conflitante so por vir depois no
arquivo, tornando a cor do tenant (1a declaracao) morta em TODO o site,
nao so na tela de equipe onde essa variante foi pensada. */
.usuario-acoes .botao-secundario {
border: 1px solid var(--cor-borda);
background: var(--cor-cartao);
color: var(--cor-texto);
border-radius: var(--raio-sm);
padding: 7px 10px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.usuario-redefinir-senha {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0 10px;
border-bottom: 1px solid var(--cor-borda-tabela);
}
.usuario-redefinir-senha input[type="password"] {
padding: 8px 9px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
font-size: 13px;
background: var(--cor-cartao);
color: var(--cor-texto);
max-width: 220px;
margin-top: 0;
}
.usuario-editar-dados {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 8px 0 10px;
border-bottom: 1px solid var(--cor-borda-tabela);
}
.usuario-editar-dados input[type="text"],
.usuario-editar-dados input[type="email"] {
padding: 8px 9px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
font-size: 13px;
background: var(--cor-cartao);
color: var(--cor-texto);
max-width: 220px;
margin-top: 0;
}
.badge-admin {
background: var(--cor-primaria);
color: #fff;
}
.badge-atendente {
background: var(--cor-neutro-fundo);
color: var(--cor-neutro-texto);
}
#form-convidar button[type="submit"] {
border: none;
border-radius: var(--raio-sm);
background: var(--cor-primaria);
color: #fff;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
/* ---- conectar whatsapp (QR) ---- */
.canal-item {
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-md);
padding: 16px;
margin-bottom: 12px;
}
.canal-cabecalho {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.canal-apelido-input {
font-size: 14px;
font-weight: 600;
padding: 8px 9px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-sm);
background: var(--cor-cartao);
color: var(--cor-texto);
max-width: 220px;
margin-top: 0;
}
.canal-status {
font-size: 11.5px;
font-weight: 700;
border-radius: 999px;
padding: 3px 10px;
}
.status-pendente {
background: var(--cor-aviso-fundo);
color: var(--cor-aviso-texto);
}
.status-conectado {
background: var(--cor-sucesso-fundo);
color: var(--cor-sucesso-texto);
}
.status-desconectado {
background: var(--cor-neutro-fundo);
color: var(--cor-neutro-texto);
}
.status-erro {
background: var(--cor-erro-fundo);
color: var(--cor-erro-texto);
}
.canal-qr {
width: 200px;
height: 200px;
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-md);
padding: 8px;
margin: 8px 0;
display: block;
background: #fff;
}
.canal-linha-erro {
margin: 6px 0 0;
}
#form-novo-canal button[type="submit"] {
border: none;
border-radius: var(--raio-sm);
background: var(--cor-primaria);
color: #fff;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
/* ---- tela de agentes (Fase E) ---- */
.agente-opcao {
display: flex;
align-items: flex-start;
gap: 12px;
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
padding: 14px 16px;
margin-bottom: 12px;
max-width: 640px;
cursor: pointer;
transition: border-color .12s ease, background-color .12s ease;
}
.agente-opcao:hover {
border-color: var(--cor-texto-fraco);
}
.agente-opcao:has(input:checked) {
border-color: var(--cor-primaria);
background: color-mix(in srgb, var(--cor-primaria) 6%, var(--cor-cartao));
}
.agente-opcao input[type="radio"] {
margin-top: 4px;
flex-shrink: 0;
/* `input { width: 100% }` global esticava o radio e espremia o texto. */
width: auto;
padding: 0;
}
.agente-opcao > div {
flex: 1;
min-width: 0;
}
.agente-opcao strong {
display: block;
margin-bottom: 4px;
}
.agente-opcao p {
margin: 0;
font-size: 13px;
color: var(--cor-texto-suave2);
}
/* ---- responsivo ---- */
@media (max-width: 720px) {
.topo {
padding: 10px 16px;
}
.topo-titulo h1 {
font-size: 15px;
}
.topo-acoes {
gap: 2px;
}
.topo-acoes a,
.topo button {
padding: 6px 8px;
font-size: 12.5px;
}
main {
padding: 16px 14px 32px;
}
.kpis {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.kpi {
padding: 14px 14px;
}
.kpi .valor {
font-size: 22px;
}
section {
padding: 16px;
}
.funil {
grid-template-columns: repeat(2, 1fr);
}
.painel-cabecalho {
align-items: flex-start;
}
.seletor-periodo button {
padding: 6px 9px;
font-size: 12.5px;
}
.form-envio-mensagem,
.form-notas-internas,
.conversa .msg {
max-width: 100%;
}
}
@media (min-width: 1600px) {
main {
max-width: 1400px;
}
.kpis {
grid-template-columns: repeat(4, 1fr);
}
}
/* =====================================================================
Dashboard v3 (04/09/2026) — barra lateral compartilhada pelas 8 telas,
cartões de painel, funil horizontal, painel da IA, mapa do Brasil, fases
de cada lead, origens e KPIs secundários. Só ACRESCENTA regras: nenhum
seletor antigo foi removido (o JS das 8 telas continua funcionando).
===================================================================== */
:root {
--largura-sidebar: 236px;
}
/* ---- barra lateral: o mesmo .topo de sempre, reposicionado por CSS ---- */
body {
display: grid;
grid-template-columns: var(--largura-sidebar) minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
min-height: 100vh;
}
body > :not(.topo) {
grid-column: 2;
}
.topo {
grid-column: 1;
grid-row: 1 / span 3;
position: sticky;
top: 0;
height: 100vh;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 18px;
padding: 18px 12px 14px;
background: var(--cor-cartao);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
border-right: 1px solid var(--cor-borda-suave);
overflow-y: auto;
}
.topo-titulo {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 4px 10px 6px;
}
.topo h1 {
font-size: 17px;
white-space: normal;
line-height: 1.2;
}
.logo-tenant-topo {
height: 40px;
max-width: 160px;
}
.topo-acoes {
flex: 1;
flex-direction: column;
align-items: stretch;
gap: 2px;
}
.topo-acoes a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
font-size: 13.5px;
color: var(--cor-texto-suave2);
}
.topo-acoes a::before {
content: "";
width: 18px;
height: 18px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--icone) center / contain no-repeat;
mask: var(--icone) center / contain no-repeat;
opacity: 0.85;
}
.topo-acoes a[href="/dashboard.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/conversas.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/agentes.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/configuracoes.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/branding.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/kanban.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/whatsapp.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/agenda.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/usuarios.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/disparos.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/leads.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/disponibilidade.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/assinatura.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/integracoes.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a[href="/plataforma-financeiro.html"] { --icone: url("data:image/svg+xml;utf8,"); }
.topo-acoes a:hover {
background: var(--cor-hover-linha);
color: var(--cor-primaria);
}
.topo-acoes a[aria-current="page"] {
background: color-mix(in srgb, var(--cor-primaria) 12%, transparent);
color: var(--cor-primaria);
font-weight: 600;
}
.topo-acoes a[aria-current="page"]::before {
opacity: 1;
}
.topo-acoes #botao-tema {
margin-top: auto;
}
.topo-acoes button {
text-align: center;
}
main {
max-width: 1380px;
padding: 24px 28px 56px;
}
/* ---- cabeçalho do painel (cartão) ---- */
.painel-cabecalho--card {
background: var(--cor-cartao);
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-lg);
padding: 16px 20px;
box-shadow: var(--sombra-cartao);
align-items: center;
}
.painel-titulo {
display: flex;
align-items: center;
gap: 14px;
}
.painel-titulo h2 {
font-size: 22px;
}
.painel-icone {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--cor-primaria);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.painel-icone svg,
.cartao-icone svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ponto-vivo {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cor-sucesso-texto);
margin-right: 6px;
vertical-align: middle;
animation: pulso-vivo 2s ease-in-out infinite;
}
@keyframes pulso-vivo {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-sucesso-texto) 40%, transparent); }
50% { box-shadow: 0 0 0 5px transparent; }
}
/* ---- cartões de painel ---- */
.grade-2--painel {
gap: 18px;
margin-bottom: 18px;
}
.cartao-painel {
padding: 18px 20px 16px;
display: flex;
flex-direction: column;
container-type: inline-size;
}
.cartao-cabecalho {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.cartao-cabecalho h2 {
margin: 0;
font-size: 15px;
}
.cartao-subtitulo {
margin: 2px 0 0;
font-size: 12.5px;
color: var(--cor-texto-suave);
}
.cartao-icone {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cartao-icone svg {
width: 18px;
height: 18px;
}
.cartao-icone--primaria { color: var(--cor-primaria); background: color-mix(in srgb, var(--cor-primaria) 14%, transparent); }
.cartao-icone--info { color: var(--cor-info-texto); background: var(--cor-info-fundo); }
.cartao-icone--violeta { color: var(--cor-violeta-texto); background: var(--cor-violeta-fundo); }
.cartao-icone--sucesso { color: var(--cor-sucesso-texto); background: var(--cor-sucesso-fundo); }
.cartao-rodape {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 8px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--cor-borda-suave);
}
.cartao-painel > .cartao-rodape {
margin-top: 16px;
}
.mini-kpi {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 10px;
border-radius: 10px;
background: var(--cor-hover-linha);
min-width: 0;
}
.mini-kpi-rotulo {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--cor-texto-fraco);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-kpi-valor {
font-family: var(--fonte-numero);
font-size: 17px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-kpi--primaria .mini-kpi-valor { color: var(--cor-primaria); }
.mini-kpi--sucesso { background: var(--cor-sucesso-fundo); }
.mini-kpi--sucesso .mini-kpi-valor { color: var(--cor-sucesso-texto); }
.mini-kpi--aviso { background: var(--cor-aviso-fundo); }
.mini-kpi--aviso .mini-kpi-valor { color: var(--cor-aviso-texto); }
.desc-secao--nota {
margin: 8px 0 0;
font-size: 11.5px;
color: var(--cor-texto-fraco);
}
/* ---- funil horizontal (etapa | barra | número) ---- */
.funil--horizontal {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 2px;
}
.funil--horizontal .funil-item {
display: grid;
grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) 44px;
align-items: center;
gap: 12px;
padding: 7px 10px;
border: 1px solid transparent;
border-left: 1px solid transparent;
border-radius: 10px;
background: transparent;
}
.funil--horizontal .funil-item:hover {
background: var(--cor-hover-linha);
transform: none;
}
.funil--horizontal .funil-item.selecionado {
background: color-mix(in srgb, var(--cor-primaria) 7%, var(--cor-cartao));
border-color: color-mix(in srgb, var(--cor-primaria) 30%, transparent);
}
.funil--horizontal .funil-item .titulo {
margin-top: 0;
font-size: 12.5px;
font-weight: 600;
color: var(--cor-texto);
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
overflow: hidden;
}
.funil--horizontal .funil-barra-trilho {
margin-top: 0;
height: 16px;
border-radius: 6px;
}
.funil--horizontal .funil-barra {
border-radius: 6px;
min-width: 3px;
}
.funil--horizontal .funil-item .n {
font-size: 15px;
text-align: right;
}
/* ---- painel "Atendidos pela IA": donut + cascata ---- */
.ia-painel {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 20px;
align-items: center;
}
.ia-donut-svg {
width: 150px;
height: 150px;
display: block;
font-family: var(--fonte-numero);
}
.ia-donut-trilho {
fill: none;
stroke: var(--cor-borda-suave);
stroke-width: 12;
}
.ia-donut-valor {
fill: none;
stroke: var(--cor-primaria);
stroke-width: 12;
stroke-linecap: round;
transition: stroke-dasharray .5s ease;
}
.ia-donut-numero {
font-size: 30px;
font-weight: 700;
fill: var(--cor-texto);
}
.ia-donut-rotulo {
font-size: 7.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
fill: var(--cor-texto-fraco);
}
.ia-cascata {
display: flex;
flex-direction: column;
gap: 12px;
}
.ia-linha { --cor-ia: var(--cor-primaria); }
.ia-linha--info { --cor-ia: var(--cor-info-texto); }
.ia-linha--violeta { --cor-ia: var(--cor-violeta-texto); }
.ia-linha--sucesso { --cor-ia: var(--cor-sucesso-texto); }
.ia-linha-cabecalho {
display: flex;
align-items: baseline;
gap: 5px;
font-size: 13px;
}
.ia-ponto {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cor-ia);
align-self: center;
margin-right: 3px;
}
.ia-linha-n {
font-family: var(--fonte-numero);
font-weight: 700;
font-size: 16px;
font-variant-numeric: tabular-nums;
}
.ia-linha-base {
font-size: 12px;
color: var(--cor-texto-fraco);
}
.ia-linha-rotulo {
color: var(--cor-texto-suave);
margin-left: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ia-linha-pct {
margin-left: auto;
font-size: 12px;
font-weight: 600;
color: var(--cor-texto-suave2);
font-variant-numeric: tabular-nums;
}
.ia-linha .funil-barra-trilho {
margin-top: 6px;
height: 6px;
}
.ia-barra {
background: var(--cor-ia);
}
/* ---- mapa do Brasil por UF ---- */
.mapa-painel {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(170px, 0.85fr);
gap: 18px;
align-items: start;
}
/* Paleta propria do mapa (pedido do Sergio, 04/10/2026): azul de "tela de
apuracao", com versao clara (tema claro) e versao preto profundo (tema
escuro). Fica fixa em azul de proposito, independente da cor de destaque
do escritorio, porque o efeito depende desse tom. */
.mapa-painel {
--mapa-fundo: radial-gradient(ellipse 85% 75% at 58% 32%, #ffffff 0%, #eaf3ff 48%, #cfe2fb 100%);
--mapa-grade: rgba(30, 90, 180, .07);
--mapa-brilho: rgba(255, 255, 255, .55);
--mapa-moldura: #b9d4f6;
--mapa-uf-base: #d6e7fb;
--mapa-uf-borda: #5e9fea;
--mapa-uf-fraco: #8fc0f4;
--mapa-uf-forte: #0d4aa8;
--mapa-uf-hover: #0a2f6e;
--mapa-halo: rgba(40, 120, 225, .35);
--mapa-sigla: #0b2c63;
--mapa-sigla-halo: rgba(255, 255, 255, .9);
--mapa-sigla-forte: #ffffff;
--mapa-sigla-forte-halo: rgba(4, 22, 56, .55);
}
[data-tema="escuro"] .mapa-painel {
--mapa-fundo: radial-gradient(ellipse 85% 75% at 58% 30%, #0f3f86 0%, #072052 42%, #030a1c 78%, #010307 100%);
--mapa-grade: rgba(110, 180, 255, .06);
--mapa-brilho: rgba(140, 200, 255, .16);
--mapa-moldura: #10264d;
--mapa-uf-base: #0b2756;
--mapa-uf-borda: #6cbcff;
--mapa-uf-fraco: #16509f;
--mapa-uf-forte: #9ad6ff;
--mapa-uf-hover: #ffffff;
--mapa-halo: rgba(100, 185, 255, .75);
--mapa-sigla: #e6f3ff;
--mapa-sigla-halo: rgba(1, 6, 18, .85);
--mapa-sigla-forte: #03122c;
--mapa-sigla-forte-halo: rgba(220, 240, 255, .55);
}
.mapa-brasil {
position: relative;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
padding: 18px 14px;
border-radius: 14px;
border: 1px solid var(--mapa-moldura);
background:
linear-gradient(var(--mapa-grade) 1px, transparent 1px) 0 0 / 28px 28px,
linear-gradient(90deg, var(--mapa-grade) 1px, transparent 1px) 0 0 / 28px 28px,
var(--mapa-fundo);
overflow: hidden;
isolation: isolate;
}
/* Faixa de luz diagonal, como na tela de referencia. */
.mapa-brasil::after {
content: "";
position: absolute;
inset: -20%;
background: linear-gradient(115deg, transparent 38%, var(--mapa-brilho) 50%, transparent 62%);
pointer-events: none;
z-index: 1;
}
.mapa-brasil > * {
position: relative;
z-index: 2;
}
.mapa-brasil-svg {
width: 100%;
height: auto;
max-height: 460px;
display: block;
filter: drop-shadow(0 0 3px var(--mapa-halo)) drop-shadow(0 0 10px var(--mapa-halo));
}
.mapa-brasil-svg .uf {
fill: var(--mapa-uf-base);
stroke: var(--mapa-uf-borda);
stroke-width: 1.1px;
vector-effect: non-scaling-stroke;
transition: fill .25s ease, stroke .12s ease;
}
.mapa-brasil-svg .uf:hover {
stroke: var(--mapa-uf-hover);
stroke-width: 2.2px;
}
/* Sigla de cada UF (item 103a da FILA.md): cor normal sobre estado vazio ou
fraco, e a variante --claro (aplicada pelo JS quando o preenchimento fica
forte) inverte o contraste. Halo fino pra continuar legivel. O
pointer-events:none deixa o tooltip do path passar por baixo do texto. */
.mapa-brasil-siglas {
pointer-events: none;
user-select: none;
}
.mapa-brasil-sigla {
font-family: var(--fonte-numero, inherit);
font-weight: 700;
fill: var(--mapa-sigla);
stroke: var(--mapa-sigla-halo);
stroke-width: 0.15em;
paint-order: stroke;
}
.mapa-brasil-sigla--claro {
fill: var(--mapa-sigla-forte);
stroke: var(--mapa-sigla-forte-halo);
}
/* Percentual de leads embaixo da sigla (estados com pelo menos 1 lead). */
.mapa-brasil-pct {
font-family: var(--fonte-numero, inherit);
font-weight: 600;
fill: var(--mapa-sigla);
stroke: var(--mapa-sigla-halo);
stroke-width: 0.15em;
paint-order: stroke;
}
.mapa-brasil-pct.mapa-brasil-sigla--claro {
fill: var(--mapa-sigla-forte);
stroke: var(--mapa-sigla-forte-halo);
}
.mapa-brasil .vazio {
color: var(--mapa-sigla);
}
.lista-barras--compacta {
gap: 9px;
}
.mapa-painel .funil-barra {
background: linear-gradient(90deg, var(--mapa-uf-fraco), var(--mapa-uf-forte));
}
.mapa-legenda {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 11px;
color: var(--cor-texto-fraco);
}
.mapa-legenda-barra {
flex: 1;
height: 8px;
border-radius: 4px;
background: linear-gradient(90deg, var(--mapa-uf-base), var(--mapa-uf-fraco), var(--mapa-uf-forte));
box-shadow: 0 0 6px var(--mapa-halo);
}
/* Empilha mapa + lista quando o CARTÃO fica estreito (não a tela) — evita a
zona de aperto do grid interno em qualquer largura de monitor/janela em
que o cartão acabe menor que ~480px, independente do breakpoint geral. */
@container (max-width: 480px) {
.mapa-painel {
grid-template-columns: 1fr;
}
}
/* ---- fases de cada lead (quadro por etapa) ---- */
.fases-board {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 6px;
scroll-snap-type: x proximity;
}
.fase-coluna {
--cor-fase: var(--cor-primaria);
flex: 0 0 200px;
display: flex;
flex-direction: column;
gap: 8px;
scroll-snap-align: start;
}
.fase-cabecalho {
display: flex;
align-items: center;
gap: 8px;
border: none;
border-top: 3px solid var(--cor-fase);
background: var(--cor-hover-linha);
border-radius: 10px;
padding: 9px 10px;
cursor: pointer;
text-align: left;
color: var(--cor-texto);
font: inherit;
transition: background-color .12s ease;
}
.fase-cabecalho:hover {
background: color-mix(in srgb, var(--cor-fase) 12%, var(--cor-cartao));
}
.fase-ponto {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cor-fase);
flex-shrink: 0;
}
.fase-titulo {
flex: 1;
min-width: 0;
font-size: 12.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fase-n {
font-family: var(--fonte-numero);
font-size: 12px;
font-weight: 700;
background: var(--cor-cartao);
border: 1px solid var(--cor-borda-suave);
border-radius: 999px;
padding: 1px 8px;
font-variant-numeric: tabular-nums;
}
.fase-lista {
display: flex;
flex-direction: column;
gap: 6px;
}
.fase-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
width: 100%;
text-align: left;
font: inherit;
color: var(--cor-texto);
background: var(--cor-cartao);
border: 1px solid var(--cor-borda-suave);
border-left: 3px solid var(--cor-fase);
border-radius: 10px;
padding: 8px 10px;
cursor: pointer;
transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.fase-card:hover {
box-shadow: var(--sombra-elevada);
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--cor-fase) 40%, var(--cor-borda-suave));
}
.fase-card-nome {
font-size: 13px;
font-weight: 600;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fase-card-meta {
font-size: 11px;
color: var(--cor-texto-fraco);
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fase-card-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 3px;
}
.chip {
font-size: 10.5px;
font-weight: 600;
padding: 2px 7px;
border-radius: 999px;
background: var(--cor-neutro-fundo);
color: var(--cor-neutro-texto);
white-space: nowrap;
}
/* chip--agente virou lilás (item 86 da FILA.md, "print do funil concorrente"
pedia chip lilás pro agente responsável) -- reflete em toda tela que já
usava esse mesmo chip (dashboard.js "Fases de cada lead"), não é
regressão, é o recorte de cor que o próprio pedido descreveu. */
.chip--agente { background: var(--cor-violeta-fundo); color: var(--cor-violeta-texto); }
.chip--aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.chip--erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.chip--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.chip--azul { background: var(--cor-info-fundo); color: var(--cor-info-texto); }
.chip--dourado { background: var(--cor-dourado-fundo); color: var(--cor-dourado-texto); }
/* Variante com "pontinho" à esquerda (item 86), como no print de referência
-- reusa a cor do texto do próprio chip (currentColor) pro ponto, então
funciona pra qualquer variante acima sem precisar de 1 regra por cor. */
.chip--ponto { position: relative; padding-left: 15px; }
.chip--ponto::before {
content: '';
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.fase-vazia {
margin: 4px 2px;
font-size: 12px;
color: var(--cor-texto-fraco);
font-style: italic;
}
.fase-mais {
border: 1px dashed var(--cor-borda);
background: transparent;
color: var(--cor-texto-suave2);
font: inherit;
font-size: 12px;
padding: 7px;
border-radius: 10px;
cursor: pointer;
}
.fase-mais:hover {
background: var(--cor-hover-linha);
color: var(--cor-primaria);
}
/* ---- leads por origem ---- */
.origens {
display: flex;
flex-direction: column;
gap: 10px;
}
.origem-linha {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--cor-borda-suave);
border-left: 3px solid var(--cor-primaria);
border-radius: 12px;
}
.origem-rank {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--cor-primaria);
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.origem-nome {
font-weight: 700;
font-size: 13.5px;
}
.origem-corpo {
min-width: 0;
}
.origem-corpo .funil-barra-trilho {
margin: 6px 0 5px;
height: 6px;
}
.origem-detalhe {
font-size: 11.5px;
color: var(--cor-texto-suave);
}
.origem-numeros {
display: flex;
gap: 4px;
}
.origem-numeros .mini-kpi {
padding: 4px 8px;
background: transparent;
align-items: flex-end;
}
/* ---- KPIs secundários (linha de baixo) ---- */
.kpis--secundarios {
margin-bottom: 18px;
}
.kpi--secundario {
gap: 8px;
}
.kpi-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.kpi--secundario .rotulo {
font-weight: 700;
color: var(--cor-texto);
font-size: 13.5px;
}
.kpi--secundario .valor {
font-size: 26px;
}
.kpi--secundario .kpi-taxa {
margin-top: 0;
font-weight: 500;
}
.kpi-icone--aviso {
color: var(--cor-aviso-texto);
background: var(--cor-aviso-fundo);
}
/* ---- tela Agentes (área de atuação + esteira de agentes) ---- */
.area-atuacao-grade {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
max-width: 780px;
margin-bottom: 4px;
transition: opacity .15s ease;
}
.area-atuacao-grade--carregando {
opacity: 0.6;
pointer-events: none;
}
.area-atuacao-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
text-align: left;
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-md);
padding: 16px;
background: var(--cor-cartao);
cursor: pointer;
font: inherit;
color: var(--cor-texto);
transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.area-atuacao-card:hover:not(:disabled) {
border-color: var(--cor-texto-fraco);
transform: translateY(-1px);
box-shadow: var(--sombra-cartao);
}
.area-atuacao-card:disabled {
cursor: default;
}
.area-atuacao-card.selecionada {
border-color: var(--cor-primaria);
border-width: 2px;
padding: 15px;
background: color-mix(in srgb, var(--cor-primaria) 6%, var(--cor-cartao));
}
.area-atuacao-icone {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.area-atuacao-icone svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.area-atuacao-card--primaria .area-atuacao-icone { color: var(--cor-primaria); background: color-mix(in srgb, var(--cor-primaria) 14%, transparent); }
.area-atuacao-card--violeta .area-atuacao-icone { color: var(--cor-violeta-texto); background: var(--cor-violeta-fundo); }
.area-atuacao-card strong {
font-size: 14.5px;
}
.area-atuacao-card p {
margin: 0;
font-size: 12.5px;
color: var(--cor-texto-suave2);
}
.area-atuacao-selo {
margin-top: 6px;
font-size: 11.5px;
font-weight: 600;
color: var(--cor-texto-fraco);
}
.area-atuacao-card.selecionada .area-atuacao-selo {
color: var(--cor-primaria);
}
.agentes-ajuda {
margin: 4px 0 14px;
font-size: 13px;
}
.agentes-ajuda summary {
cursor: pointer;
color: var(--cor-texto-suave);
font-weight: 600;
}
.agentes-ajuda[open] summary {
margin-bottom: 6px;
}
/* ---- tela WhatsApp: escolha QR vs API Oficial ---- */
.conexao-opcoes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
max-width: 820px;
}
.conexao-opcao {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-md);
padding: 18px;
background: var(--cor-cartao);
}
.conexao-opcao--recomendada {
border: 2px solid var(--cor-primaria);
padding: 17px;
background: color-mix(in srgb, var(--cor-primaria) 5%, var(--cor-cartao));
}
.conexao-opcao-selo {
position: absolute;
top: -11px;
right: 16px;
background: var(--cor-primaria);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
}
.conexao-opcao-topo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.conexao-opcao-icone {
font-size: 22px;
}
.conexao-opcao-topo strong {
font-size: 15px;
}
.conexao-opcao-lista {
list-style: none;
margin: 0 0 16px;
padding: 0;
flex: 1;
}
.conexao-opcao-lista li {
font-size: 12.5px;
color: var(--cor-texto-suave2);
padding-left: 18px;
position: relative;
margin-bottom: 6px;
}
.conexao-opcao-lista li::before {
content: '•';
position: absolute;
left: 4px;
color: var(--cor-texto-fraco);
}
.conexao-opcao-botao {
display: block;
text-align: center;
text-decoration: none;
padding: 10px 16px;
border-radius: var(--raio-sm);
font-weight: 600;
font-size: 13.5px;
background: var(--cor-primaria);
color: #fff;
}
.conexao-opcao-botao.botao-secundario {
background: transparent;
color: var(--cor-primaria);
border: 1px solid var(--cor-primaria);
}
.esteira-visual {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 16px;
font-size: 12.5px;
color: var(--cor-texto-suave);
}
.esteira-passo {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--cor-primaria) 10%, transparent);
color: var(--cor-primaria);
font-weight: 600;
}
.esteira-passo.inativo {
background: var(--cor-neutro-fundo);
color: var(--cor-neutro-texto);
text-decoration: line-through;
}
.esteira-seta {
color: var(--cor-texto-fraco);
}
.agentes-lista {
display: flex;
flex-direction: column;
gap: 14px;
}
.agente-card {
border: 1px solid var(--cor-borda-suave);
border-left: 4px solid var(--cor-primaria);
border-radius: var(--raio-md);
padding: 14px 16px;
background: var(--cor-cartao);
}
.agente-card.inativo {
border-left-color: var(--cor-borda);
opacity: 0.8;
}
.agente-card-resumo {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 10px;
}
.agente-card-resumo .campo {
flex: 1;
min-width: 140px;
max-width: none;
}
.agente-numero {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--cor-primaria);
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-bottom: 2px;
}
.agente-card-detalhes {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--cor-borda-suave);
}
.agente-editar-mensagem-botao {
align-self: end;
margin-bottom: 2px;
}
.agente-card .campo {
margin-bottom: 0;
}
.campo-personalidade {
margin-top: 10px;
}
.campo-personalidade label span {
font-weight: 600;
color: var(--cor-primaria);
}
.campo-personalidade input[type="range"] {
width: 100%;
margin: 6px 0;
}
.agente-card .campo-prompt,
.form-novo-agente .campo-prompt {
margin-top: 10px;
}
.agente-card textarea,
.form-novo-agente textarea {
min-height: 150px;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 12.5px;
line-height: 1.5;
}
.agente-contador {
font-size: 11px;
color: var(--cor-texto-fraco);
text-align: right;
margin: 4px 0 0;
}
.agente-fluxo-legenda {
font-size: 11px;
color: var(--cor-texto-fraco);
margin: 4px 0 0;
}
.agente-card-acoes {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.agente-card-acoes button {
width: auto;
margin-top: 0;
padding: 8px 14px;
}
/* Simulador de conversa + histórico de edições (item 330/FILA.md, fatia 330a) */
.simulador-painel,
.historico-painel {
margin-top: 12px;
padding: 12px;
border: 1px solid var(--cor-borda-suave);
border-radius: 8px;
background: var(--cor-fundo);
}
.simulador-mensagens {
max-height: 260px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.simulador-msg {
margin: 0;
padding: 6px 10px;
border-radius: 8px;
font-size: 13px;
max-width: 90%;
background: var(--cor-cartao);
}
.simulador-msg-lead {
align-self: flex-end;
border-right: 3px solid var(--cor-primaria);
}
.simulador-msg-agente {
align-self: flex-start;
border: 1px solid var(--cor-borda-suave);
}
.simulador-ferramenta {
margin: 0;
font-size: 11.5px;
color: var(--cor-texto-fraco);
font-style: italic;
}
.simulador-form {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.simulador-form input {
flex: 1;
min-width: 200px;
}
.simulador-form button {
width: auto;
}
.historico-lista {
display: flex;
flex-direction: column;
gap: 10px;
}
.historico-item {
padding: 8px 10px;
border: 1px solid var(--cor-borda-suave);
border-radius: 6px;
background: var(--cor-cartao);
}
.historico-item p {
margin: 0 0 6px;
font-size: 13px;
}
.historico-item button {
width: auto;
padding: 6px 12px;
font-size: 12.5px;
}
.ativo-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--cor-texto-suave2);
white-space: nowrap;
padding-bottom: 9px;
}
.ativo-toggle input {
width: auto;
margin: 0;
}
/* Item 96f/FILA.md ("agente principal") -- mesmo padrão de checkbox+label
inline já usado em .ativo-toggle acima, só sem o white-space:nowrap
(o texto aqui é mais longo, precisa poder quebrar linha). */
.agente-principal-substitui-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--cor-texto-suave2);
}
.agente-principal-substitui-label input {
width: auto;
margin: 0;
}
/* Item 96g/FILA.md -- editor em abas do agente principal (Identidade/
Prompt/Fluxo/Regras/Personalidade/Dias e horários/FAQ). Diferente de
.tabs (login.html, 2 abas com flex:1), aqui são 7 abas -- flex:1
deixaria cada botão minúsculo; wrap + largura pelo conteúdo cabe melhor
em telas estreitas. */
.agente-abas {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 14px;
background: var(--cor-fundo);
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-sm);
padding: 4px;
}
.agente-aba-botao {
width: auto;
padding: 7px 12px;
border: none;
background: transparent;
color: var(--cor-texto-suave);
border-radius: 6px;
cursor: pointer;
font-size: 12.5px;
font-weight: 600;
margin: 0;
transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.agente-aba-botao.ativo {
background: var(--cor-cartao);
color: var(--cor-primaria);
box-shadow: var(--sombra-cartao);
}
.agente-aba-painel fieldset {
margin: 0;
}
/* Item 96g -- "Agentes desta área" virou colapsado por padrão,
pra tela não competir de cara com o "Agente principal" (o que de fato
atende hoje, na maioria dos tenants sem esteira cadastrada). */
.secao-avancado {
border-top: 1px solid var(--cor-borda-suave);
padding-top: 4px;
}
.secao-avancado-titulo {
cursor: pointer;
font-size: 17px;
font-weight: 700;
color: var(--cor-texto);
padding: 6px 0;
list-style: none;
}
.secao-avancado-titulo::-webkit-details-marker {
display: none;
}
.secao-avancado-titulo::before {
content: '▸ ';
color: var(--cor-texto-fraco);
}
.secao-avancado[open] .secao-avancado-titulo::before {
content: '▾ ';
}
.modelos-agente {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 6px 0 14px;
}
.criar-com-ia-bloco {
margin: 0 0 14px;
}
.criar-com-ia-painel {
margin-top: 10px;
padding: 12px;
border: 1px solid var(--cor-borda-suave);
border-radius: 8px;
background: var(--cor-fundo);
}
.criar-com-ia-painel textarea {
min-height: 90px;
}
.modelos-agente button {
width: auto;
margin: 0;
padding: 6px 12px;
font-size: 12.5px;
border: 1px solid var(--cor-borda);
background: var(--cor-cartao);
color: var(--cor-texto);
border-radius: 999px;
cursor: pointer;
}
.modelos-agente button:hover {
border-color: var(--cor-primaria);
color: var(--cor-primaria);
}
/* Biblioteca de modelos prontos por tese (item 330/FILA.md, fatia 330e) --
overlay proprio, mesma classe visual do fechamento-modal-overlay, mas
escopado com nome diferente pra nao vazar pra outra tela. */
.agente-modelos-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
padding: 20px;
}
.agente-modelos-overlay.oculto { display: none; }
.agente-modelos-modal {
background: var(--cor-cartao);
color: var(--cor-texto);
border-radius: var(--raio-md);
box-shadow: var(--sombra-elevada);
width: min(720px, 100%);
max-height: 86vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.agente-modelos-cabecalho {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--cor-borda);
flex: none;
}
.agente-modelos-cabecalho h3 { margin: 0; font-size: 15px; }
.agente-modelos-fechar {
background: none;
border: none;
color: var(--cor-texto-suave);
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 2px 8px;
border-radius: 6px;
}
.agente-modelos-fechar:hover { background: var(--cor-hover-linha); }
.agente-modelos-corpo {
padding: 16px 18px 18px;
overflow-y: auto;
flex: 1;
}
.agente-modelos-filtros {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 8px 0 12px;
}
.agente-modelos-filtros input[type="search"] { flex: 1 1 220px; }
.agente-modelos-filtros select { flex: 0 0 180px; }
.agente-modelos-lista {
display: flex;
flex-direction: column;
gap: 8px;
}
.agente-modelos-card {
border: 1px solid var(--cor-borda-suave);
border-radius: 8px;
padding: 10px 12px;
background: var(--cor-fundo);
}
.agente-modelos-card-topo {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.agente-modelos-card-nome { font-weight: 600; font-size: 13.5px; }
.agente-modelos-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: var(--cor-primaria-fraca, rgba(52, 110, 235, 0.14));
color: var(--cor-primaria);
white-space: nowrap;
}
.agente-modelos-card-funcao {
margin: 4px 0 8px;
font-size: 12.5px;
color: var(--cor-texto-suave);
}
.agente-modelos-card-acoes {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.agente-modelos-card-acoes button { width: auto; margin: 0; padding: 5px 10px; font-size: 12px; }
.agente-modelos-preview {
margin-top: 8px;
padding: 10px;
border: 1px solid var(--cor-borda-suave);
border-radius: 6px;
background: var(--cor-cartao);
font-size: 12.5px;
white-space: pre-wrap;
}
.agente-modelos-preview.oculto { display: none; }
.form-novo-agente .grade-campos {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 100px minmax(0, 1fr);
gap: 10px;
}
.agente-card-etapa {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
font-size: 12.5px;
color: var(--cor-texto-suave2);
}
.agente-card-etapa select {
width: auto;
min-width: 200px;
margin: 0;
}
.agente-prompt-oculto {
margin-top: 10px;
padding: 10px 12px;
border: 1px dashed var(--cor-borda);
border-radius: var(--raio-md);
font-size: 12.5px;
color: var(--cor-texto-fraco);
}
#etapas-disponiveis code {
margin-right: 4px;
}
/* ---- responsivo da barra lateral / painéis ---- */
@media (max-width: 960px) {
body {
display: block;
}
.topo {
position: sticky;
height: auto;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 8px;
padding: 10px 14px;
border-right: none;
border-bottom: 1px solid var(--cor-borda-suave);
overflow: visible;
}
.topo-titulo {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
padding: 0;
}
.topo h1 {
font-size: 15px;
}
.logo-tenant-topo {
height: 28px;
}
.topo-acoes {
flex: initial;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
gap: 2px;
}
.topo-acoes a {
padding: 6px 8px;
font-size: 12.5px;
gap: 0;
}
.topo-acoes a::before {
display: none;
}
.topo-acoes #botao-tema {
margin-top: 0;
}
main {
padding: 16px 14px 40px;
}
.ia-painel {
grid-template-columns: 1fr;
justify-items: center;
}
.mapa-painel {
grid-template-columns: 1fr;
}
.origem-linha {
grid-template-columns: 30px minmax(0, 1fr);
}
.origem-numeros {
grid-column: 2;
justify-content: flex-start;
}
.form-novo-agente .grade-campos {
grid-template-columns: 1fr;
}
.agente-numero {
display: none;
}
}
/* ---- Retorno do tráfego (ROI), 04/09/2026 ---- */
.cartao-roi {
margin-bottom: 18px;
}
.roi-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin-top: 6px;
}
.roi-kpis .mini-kpi-valor {
font-size: 20px;
}
.mini-kpi--erro { background: var(--cor-erro-fundo); }
.mini-kpi--erro .mini-kpi-valor { color: var(--cor-erro-texto); }
.secao-valor-contrato {
margin-top: 12px;
}
.form-valor-contrato {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.form-valor-contrato input {
width: 160px;
margin: 0;
}
.form-valor-contrato button {
width: auto;
margin: 0;
}
/* ---------- assinatura mensal (Etapa 2 -- tela "Minha assinatura" +
faixa de aviso injetada por avisoAssinatura.js) ---------- */
.barra-uso { margin-bottom: 16px; }
.barra-uso:last-child { margin-bottom: 0; }
.barra-uso-cabecalho {
display: flex;
justify-content: space-between;
font-size: 12.5px;
color: var(--cor-texto-suave);
margin-bottom: 6px;
}
.barra-uso-cabecalho strong { color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.barra-uso-trilho {
height: 8px;
border-radius: 999px;
background: var(--cor-neutro-fundo);
overflow: hidden;
}
.barra-uso-preenchimento {
height: 100%;
border-radius: 999px;
background: var(--cor-primaria);
width: var(--preenchimento, 0%);
transition: width .2s ease;
}
.barra-uso-preenchimento.barra-uso-preenchimento--perto { background: var(--cor-aviso-texto); }
.barra-uso-preenchimento.barra-uso-preenchimento--cheia { background: var(--cor-erro-texto); }
.cards-planos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.card-plano {
background: var(--cor-cartao);
border: 1px solid var(--cor-borda-suave);
border-radius: var(--raio-lg);
padding: 18px 20px;
box-shadow: var(--sombra-cartao);
display: flex;
flex-direction: column;
gap: 10px;
}
.card-plano--atual { border-color: color-mix(in srgb, var(--cor-primaria) 45%, var(--cor-borda-suave)); }
.card-plano-nome { font-size: 15px; font-weight: 700; margin: 0; }
.card-plano-preco { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card-plano-preco span { font-size: 12.5px; font-weight: 500; color: var(--cor-texto-suave); }
.card-plano-limites { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--cor-texto-suave); display: flex; flex-direction: column; gap: 4px; }
.card-plano button { width: 100%; }
.badge-pago { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.badge-pendente { background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); }
@media (max-width: 560px) {
.cards-planos { grid-template-columns: 1fr; }
}
/* Faixa de aviso injetada abaixo do .topo por avisoAssinatura.js (trial
acabando, inadimplente, bloqueada, cancelada) -- mesmo raciocinio de
.aviso-pausado/.aviso-optout ja usados na conversa do lead, so' que fixa
no topo da tela inteira, nao dentro de um card especifico. */
.faixa-aviso {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
padding: 10px 24px;
font-size: 13px;
font-weight: 500;
text-align: center;
}
.faixa-aviso a { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.faixa-aviso--aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.faixa-aviso--erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.faixa-aviso--neutro { background: var(--cor-neutro-fundo); color: var(--cor-neutro-texto); }
/* Ligacao de voz pelo WhatsApp (public/js/ligacaoVoz.js, item 178 da
FILA.md, fatia 2, 02/10/2026) -- caixa flutuante no canto, visivel em
QUALQUER tela aberta (toque/atender/em-chamada), independente da pagina
embaixo. z-index alto de proposito: precisa aparecer por cima de modal
de documento, kanban, qualquer coisa. */
#ligacao-voz-widget {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
}
.ligacao-voz-caixa {
background: var(--cor-cartao);
color: var(--cor-texto);
border: 1px solid var(--cor-borda);
border-radius: 12px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
padding: 16px 18px;
min-width: 260px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ligacao-voz-caixa--tocando {
border-color: var(--cor-primaria);
animation: ligacao-voz-pulsar 1s ease-in-out infinite;
}
.ligacao-voz-caixa--ativa { border-color: var(--cor-sucesso-texto); }
.ligacao-voz-caixa--erro { border-color: var(--cor-erro-borda); color: var(--cor-erro-texto); }
.ligacao-voz-texto { font-size: 14px; font-weight: 600; }
.ligacao-voz-legenda { font-size: 11px; color: var(--cor-texto-suave); line-height: 1.4; }
.ligacao-voz-botoes { display: flex; gap: 8px; }
.ligacao-voz-btn {
flex: 1;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--cor-borda);
background: var(--cor-fundo);
color: var(--cor-texto);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.ligacao-voz-btn--atender { background: var(--cor-sucesso-texto); color: #fff; border-color: var(--cor-sucesso-texto); }
.ligacao-voz-btn--recusar { background: var(--cor-erro-texto); color: #fff; border-color: var(--cor-erro-texto); }
@keyframes ligacao-voz-pulsar {
0%, 100% { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); }
50% { box-shadow: 0 8px 28px rgba(44, 62, 145, 0.45); }
}
/* ---- quadro Kanban de verdade (kanban.html, item 31 da fila 08/09/2026) --
reusa .fases-board, .fase-... e .chip... já existentes (dashboard.js,
"Fases de cada lead"), só ajustando largura de coluna e adicionando o
arrastar-e-soltar.
ATENÇÃO (10/09/2026, item 32d): NUNCA escrever ".fase-*" seguido de barra,
nem qualquer "asterisco seguido de barra", dentro de um comentário CSS --
essa sequência fecha o comentário antes da hora, o resto vira token
inválido com aspa/parêntese abertos e o navegador DESCARTA TODO O CSS
DAQUI ATÉ O FIM DO ARQUIVO. Foi
exatamente isso que fez a tela Conversas ficar "desastre" por 3 rodadas
seguidas: o bloco #pagina-conversas lá embaixo nunca chegou a ser
aplicado. */
.kanban-cabecalho {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.kanban-ferramentas {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
/* respiro entre a barra (Filtrar por data...) e as colunas (08/10) */
margin-bottom: 14px;
}
.kanban-busca {
min-width: 220px;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--cor-borda);
background: var(--cor-cartao);
color: var(--cor-texto);
}
.kanban-board {
align-items: stretch;
overflow-x: auto;
overflow-y: hidden;
}
.kanban-lista {
border-radius: 10px;
transition: background-color .12s ease, outline-color .12s ease;
outline: 2px dashed transparent;
outline-offset: 4px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding-right: 2px;
}
.kanban-lista.destino-arraste {
background: color-mix(in srgb, var(--cor-fase) 10%, transparent);
outline-color: color-mix(in srgb, var(--cor-fase) 55%, transparent);
}
.kanban-card {
cursor: grab;
}
.kanban-card.arrastando {
opacity: .4;
}
@keyframes kanban-pulso {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-fase) 55%, transparent); }
70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--cor-fase) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-fase) 0%, transparent); }
}
.kanban-card.recem-movido {
animation: kanban-pulso 1.1s ease-out 2;
border-color: var(--cor-fase);
}
/* ---- redesenho do board (item 86 da FILA.md, inspirado no print do funil
concorrente): largura de coluna maior, cabeçalho tingido na cor da fase,
título em caixa alta, card com avatar/prévia de mensagem/etiquetas, barra
de ferramentas com filtro de data/ordenação/seleção múltipla. ---- */
/* Item 89 da FILA.md (14/09/2026): medido ao vivo pela sessão do PC no
Chrome dele (1669px de board, 7 colunas + fantasma) -- o item 88 pedia
min-width:240px mas deixava min-width:0, que sempre vence quando o
flex-basis não cabe; título cortava ("DISPARO E…"). Agora min-width:240px
de verdade -- em telas menores cabem menos colunas inteiras e o board rola
horizontalmente pro resto (overflow-x:auto herdado de .fases-board), em
vez de espremer o título de todas. */
.kanban-coluna {
flex: 1 1 0;
min-width: 240px;
max-width: none;
position: relative;
min-height: 0;
}
.kanban-coluna.arrastando-coluna {
opacity: .45;
}
.kanban-coluna.arraste-coluna-antes {
box-shadow: inset 3px 0 0 0 var(--cor-primaria);
}
.kanban-coluna.arraste-coluna-depois {
box-shadow: inset -3px 0 0 0 var(--cor-primaria);
}
.kanban-coluna .fase-cabecalho {
background: color-mix(in srgb, var(--cor-fase) 12%, var(--cor-cartao));
}
.kanban-coluna .fase-titulo {
text-transform: uppercase;
letter-spacing: .04em;
/* Nome da coluna inteiro, sem "CONSULTA MA..." (pedido do Sergio,
02/10): quebra so entre palavras, sem limite de linhas (08/10).
Nome inteiro tambem no balao ao parar o mouse. */
white-space: normal;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
line-height: 1.25;
min-width: min-content;
}
/* Colunas simetricas (08/10: "nada simetrico, bagunçado"): TODAS com a mesma
largura e o cabecalho de TODAS com a mesma altura, entao o botao "Disparar"
e o primeiro card ficam na mesma linha em todas. As duas medidas vem de
igualarColunasKanban() (kanban.js): largura = a que a palavra mais longa
de qualquer titulo precisa (minimo 240px, nome nunca partido); altura = a
do cabecalho mais alto. Cards nao entram na conta (contain: inline-size),
senao um telefone/nome longo esticaria a coluna. */
.kanban-coluna {
flex: 0 0 var(--largura-coluna-crm, 240px);
width: var(--largura-coluna-crm, 240px);
min-width: 0;
}
.kanban-coluna > .fase-cabecalho {
min-height: var(--altura-cabecalho-crm, auto);
box-sizing: border-box;
}
/* Coluna sem "Disparar" guarda o mesmo espaco, invisivel, pra lista de
cards comecar na mesma altura das vizinhas. */
.kanban-coluna-disparar--vazio {
visibility: hidden;
pointer-events: none;
}
.kanban-coluna > :not(.fase-cabecalho) {
contain: inline-size;
}
.kanban-select {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--cor-borda);
background: var(--cor-cartao);
color: var(--cor-texto);
font: inherit;
}
.kanban-botao-data.ativo,
.kanban-botao-selecao.ativo {
background: color-mix(in srgb, var(--cor-primaria) 16%, var(--cor-cartao));
color: var(--cor-primaria);
border-color: color-mix(in srgb, var(--cor-primaria) 40%, var(--cor-borda));
}
.kanban-painel-data {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 10px 12px;
margin-bottom: 12px;
border: 1px solid var(--cor-borda-suave);
border-radius: 10px;
background: var(--cor-cartao);
font-size: 13px;
}
.kanban-painel-data label {
display: flex;
align-items: center;
gap: 6px;
}
.kanban-painel-data input[type="date"] {
padding: 6px 8px;
border-radius: 8px;
border: 1px solid var(--cor-borda);
background: var(--cor-fundo);
color: var(--cor-texto);
}
/* Card do lead redesenhado: avatar circular + nome/tempo na mesma linha +
prévia da última mensagem + etiquetas -- reusa .fase-card como base
(borda/sombra/hover já herdados), só a estrutura interna mudou. */
.kanban-card {
cursor: grab;
padding: 8px 10px;
border-radius: 12px;
gap: 0;
min-width: 0;
max-width: 100%;
}
.kanban-card-topo {
display: flex;
align-items: flex-start;
gap: 8px;
width: 100%;
min-width: 0;
max-width: 100%;
}
.kanban-card-checkbox {
margin-top: 5px;
flex-shrink: 0;
cursor: pointer;
}
.kanban-card-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 13px;
font-weight: 700;
}
.kanban-card-corpo {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.kanban-card-linha1 {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
min-width: 0;
max-width: 100%;
}
.kanban-card-nome {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-card-tempo {
font-size: 10.5px;
color: var(--cor-texto-fraco);
white-space: nowrap;
flex-shrink: 0;
}
.kanban-card-preview {
font-size: 11.5px;
color: var(--cor-texto-fraco);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: anywhere;
}
/* item 124 da FILA.md: telefone + botão de copiar no card do kanban */
.kanban-card-telefone {
display: flex;
align-items: center;
gap: 4px;
margin-top: 2px;
}
.kanban-card-telefone-texto {
font-size: 11px;
color: var(--cor-texto-fraco);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-card-telefone .copiar-telefone {
background: none;
border: none;
color: var(--cor-texto-fraco);
cursor: pointer;
font-size: 12px;
padding: 0 2px;
line-height: 1;
font-family: inherit;
flex-shrink: 0;
}
.kanban-card-telefone .copiar-telefone:hover {
color: var(--cor-texto);
}
/* ---- Item 255 da FILA.md (04/10/2026): card de ALTURA FIXA, igual em todas
as colunas. Conteúdo fixo: avatar, nome, tempo, telefone, prévia (uma
linha cada) e a linha de ícones na base; o resto abre em menu flutuante
(.kanban-popover, preso ao ). ---- */
.kanban-card {
--kanban-card-altura: 106px;
height: var(--kanban-card-altura);
min-height: var(--kanban-card-altura);
max-height: var(--kanban-card-altura);
flex-shrink: 0;
box-sizing: border-box;
overflow: hidden;
}
.kanban-card .kanban-card-telefone {
flex-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
min-width: 0;
}
.kanban-card-icones {
display: flex;
align-items: center;
gap: 4px;
margin-top: auto;
padding-left: 40px;
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
}
.kanban-card-icone {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
min-width: 24px;
height: 22px;
padding: 0 5px;
border-radius: 999px;
border: 1px solid var(--cor-borda-suave);
background: var(--cor-neutro-fundo);
color: var(--cor-texto);
font-family: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
.kanban-card-icone:hover { border-color: var(--cor-borda); filter: brightness(0.97); }
.kanban-card-icone:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 1px; }
.kanban-card-icone[aria-expanded="true"] { border-color: var(--cor-primaria); }
.kanban-card-icone--neutro { opacity: 0.55; }
.kanban-card-icone--neutro:hover,
.kanban-card-icone--neutro[aria-expanded="true"] { opacity: 1; }
.kanban-card-icone--consulta { background: var(--cor-dourado-fundo); color: var(--cor-dourado-texto); border-color: transparent; }
.kanban-card-icone--aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); border-color: transparent; }
.kanban-card-icone--resultado { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); border-color: transparent; }
.kanban-card-icone--etiquetas { font-size: 11px; color: var(--cor-texto-suave); }
.kanban-card-icone--humano { background: rgba(239, 68, 68, 0.14); border-color: #ef4444; }
@keyframes kanban-icone-urgente {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}
.kanban-card-icone--urgente { animation: kanban-icone-urgente 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.kanban-card-icone--urgente { animation: none; outline: 2px solid #ef4444; }
}
.kanban-card-chips-mini {
display: flex;
gap: 4px;
min-width: 0;
overflow: hidden;
}
.kanban-card-chips-mini .chip {
flex-shrink: 1;
min-width: 0;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
}
.kanban-popover {
position: fixed;
z-index: 60;
width: max-content;
min-width: 220px;
max-width: min(340px, calc(100vw - 16px));
max-height: min(420px, calc(100vh - 16px));
overflow-y: auto;
box-sizing: border-box;
background: var(--cor-cartao);
color: var(--cor-texto);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
padding: 8px 10px 10px;
font-size: 12.5px;
cursor: default;
}
.kanban-popover:focus { outline: none; }
.kanban-popover-cabecalho {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.kanban-popover-titulo { font-weight: 700; font-size: 12.5px; }
.kanban-popover-fechar {
border: none;
background: none;
color: var(--cor-texto-suave);
font-size: 18px;
line-height: 1;
padding: 0 2px;
cursor: pointer;
font-family: inherit;
}
.kanban-popover-fechar:hover { color: var(--cor-texto); }
.kanban-popover-texto { font-weight: 600; }
.kanban-popover-consulta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kanban-popover-chips { margin-top: 0; }
.kanban-popover .kanban-card-pedido-humano { margin: 0; }
.kanban-popover .kanban-resultado-opcoes { display: flex; margin-top: 0; }
/* Botões "Não compareceu"/"Fechou"/"Vai pensar"/"Desqualificado" (item 152
da FILA.md) -- coluna Decidir pós-consulta, dentro do menu flutuante do
ícone ✅ (kanban.js::criarOpcoesResultadoReuniao, item 255). Cor de fundo
neutra igual ao resto do kanban, cor do texto que identifica a ação. */
.kanban-resultado-opcoes {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.kanban-botao-resultado {
font-size: 11px;
font-family: inherit;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
line-height: 1.4;
background: var(--cor-neutro-fundo);
color: var(--cor-neutro-texto);
}
.kanban-botao-resultado:hover { filter: brightness(0.95); }
.kanban-botao-resultado--faltou { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.kanban-botao-resultado--fechou { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }
.kanban-botao-resultado--vai-pensar { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.kanban-botao-resultado--desqualificado { background: #f5f5f4; color: #57534e; border-color: #e7e5e4; }
/* Item 216 da FILA.md -- card com handoff ABERTO (pediu atendimento
humano): borda/fundo laranja (mesma cor da coluna, #f97316), vermelho
a partir de 2h de espera (kanban.js calcula o limiar). rgba (não cor
sólida) pra funcionar sem ajuste nos dois temas claro/escuro. */
.kanban-card--pediu-humano {
border-color: #f97316 !important;
background: rgba(249, 115, 22, 0.08) !important;
}
.kanban-card--pediu-humano-urgente {
border-color: #ef4444 !important;
background: rgba(239, 68, 68, 0.1) !important;
}
.kanban-card-pedido-humano {
margin-top: 8px;
margin-left: 40px;
font-size: 12px;
}
.kanban-pedido-humano-motivo {
font-weight: 600;
color: var(--cor-texto);
}
.kanban-pedido-humano-espera {
color: var(--cor-texto-fraco);
margin-top: 2px;
}
.kanban-pedido-humano-link {
display: block;
margin-top: 4px;
background: none;
border: none;
padding: 0;
font-family: inherit;
font-size: 12px;
color: #c2410c;
cursor: pointer;
text-align: left;
}
.kanban-pedido-humano-link:hover { text-decoration: underline; }
/* Item 223b(1) da FILA.md (04/10/2026): botão "Entrar no Meet" no card. */
.kanban-card-link-meet {
display: inline-block;
margin: 4px 0 0;
font-size: 12px;
font-weight: 600;
color: #15803d;
text-decoration: none;
}
.kanban-card-link-meet:hover { text-decoration: underline; }
/* Item 223b(2) da FILA.md (04/10/2026): botão "Conferir agenda" do card --
reaproveita .kanban-card-link-meet (mesmo peso visual), mas é um