/* ─────────────────────────────────────────────────────────
   EXFERA CRM — visual baseado no Mídia Kit Exfera 2026
   Azul elétrico + laranja + degradê roxo→rosa, fundo branco.
   Fontes: Montserrat (títulos, no lugar da Nexa) e Nunito
   (texto, no lugar da Noka).
   ───────────────────────────────────────────────────────── */

:root {
  --azul: #0A0AF5;          /* títulos e cor principal */
  --azul-escuro: #0606B8;
  --laranja: #FF6614;       /* destaques e botões de ação */
  --roxo: #5A09FB;          /* início do degradê */
  --rosa: #FE1DAA;          /* fim do degradê */
  --degrade: linear-gradient(90deg, #5A09FB 0%, #841FFF 25%, #B73EE2 50%, #EE3EC7 75%, #FE1DAA 100%);
  --texto: #3D3D46;
  --suave: #8C8C9A;
  --fundo: #F6F6FB;
  --borda: #E6E6F0;
  --verde: #16A34A;
  --amarelo: #F59E0B;
  --vermelho: #E5383B;
  --menu-largura: 80px;
  --fonte-titulo: "Montserrat", "Segoe UI", sans-serif;
  --fonte-texto: "Nunito", "Segoe UI", sans-serif;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-size: .92rem;
  font-family: var(--fonte-texto);
}

h1, h2, h5, .modal-title, .fonte-titulo { font-family: var(--fonte-titulo); }

a { color: var(--azul); }

.btn { font-weight: 700; border-radius: 8px; }
.btn-primary { background: var(--azul); border-color: var(--azul); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--azul-escuro) !important; border-color: var(--azul-escuro) !important; }
.btn-destaque { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.btn-destaque:hover, .btn-destaque:focus { background: #E5560A; border-color: #E5560A; color: #fff; }
.btn-whats { background: #25D366; border-color: #25D366; color: #fff; }
.btn-whats:hover { background: #1EBE5A; color: #fff; }
.btn-outline-primary { color: var(--azul); border-color: var(--azul); }
.btn-outline-primary:hover { background: var(--azul); border-color: var(--azul); }
.nav-pills .nav-link { color: var(--texto); font-weight: 700; }
.nav-pills .nav-link.active { background: var(--azul); }
.nav-tabs .nav-link { color: var(--suave); font-weight: 700; }
.nav-tabs .nav-link.active { color: var(--azul); }
.form-control:focus, .form-select:focus { border-color: var(--azul); box-shadow: 0 0 0 .2rem rgba(10,10,245,.12); }
.text-navy { color: var(--azul); }
.form-label, .rotulo {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--suave); margin-bottom: .25rem;
}

/* Marca "exfera" escrita como no kit (minúsculas, arredondada) */
.marca { font-family: var(--fonte-texto); font-weight: 900; letter-spacing: -.02em; text-transform: lowercase; }

/* Faixa em degradê (rodapé das páginas do kit) */
.faixa-degrade { height: 6px; background: var(--degrade); }

/* ── Menu lateral (vira barra inferior no celular) ───── */

.barra-lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--menu-largura);
  background: var(--azul); display: flex; flex-direction: column;
  align-items: stretch; padding: 14px 0 0; z-index: 1030;
}
.barra-lateral::after { content: ""; display: block; height: 6px; background: var(--degrade); margin-top: 10px; }
.barra-lateral .logo {
  color: #fff; font-size: 1.05rem; text-align: center; text-decoration: none; margin-bottom: 18px; line-height: 1;
}
.barra-lateral .logo small { display: block; font-family: var(--fonte-titulo); font-size: .55rem; font-weight: 800; letter-spacing: .2em; color: rgba(255,255,255,.7); margin-top: 3px; }
.item-menu {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 4px; margin: 2px 8px; border-radius: 12px;
  color: rgba(255,255,255,.75); text-decoration: none; font-size: .68rem; font-weight: 700;
}
.item-menu i { font-size: 1.15rem; }
.item-menu:hover { color: #fff; background: rgba(255,255,255,.1); }
.item-menu.ativo { color: var(--azul); background: #fff; }
.item-menu.sair { margin-top: auto; }
.contador {
  position: absolute; top: 3px; right: 8px; background: var(--laranja); color: #fff;
  border-radius: 10px; font-size: .62rem; padding: 1px 6px; font-weight: 800;
}

.conteudo { margin-left: var(--menu-largura); padding: 22px 26px; min-height: 100vh; }

/* Cabeçalho no estilo do kit: título grande, caixa alta, azul */
.cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.cabecalho h1 {
  font-size: 1.7rem; font-weight: 900; color: var(--azul); margin: 0 auto 0 0;
  text-transform: uppercase; letter-spacing: -.03em; line-height: 1.05;
}

.aviso-flutuante {
  position: fixed; top: 14px; right: 14px; z-index: 1080; min-width: 260px;
  box-shadow: 0 8px 24px rgba(10,10,245,.15); border: 0; border-left: 4px solid currentColor;
}

.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 18px; }
.cartao + .cartao { margin-top: 16px; }
.cartao h2 {
  font-size: .85rem; font-weight: 800; color: var(--azul); margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .02em;
}

/* ── Funil (kanban) ──────────────────────────────────── */

.filtros-funil { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros-funil .form-control, .filtros-funil .form-select { width: auto; min-width: 150px; }

.quadro {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px;
  align-items: flex-start; min-height: calc(100vh - 160px);
}
.coluna {
  flex: 0 0 276px; background: #EEEEF6; border-radius: 14px;
  display: flex; flex-direction: column; max-height: calc(100vh - 160px);
}
.coluna-topo { flex: none; padding: 12px 14px 10px; border-radius: 14px 14px 0 0; background: #fff; position: relative; overflow: hidden; }
.coluna-topo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--cor, var(--suave)); }
.coluna-topo .nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .02em; color: var(--azul); }
.coluna-topo .resumo { font-size: .76rem; color: var(--suave); font-weight: 600; }
.coluna-cartoes { padding: 8px; overflow-y: auto; flex: 1; min-height: 80px; }
.coluna.alvo { outline: 2px dashed var(--azul); outline-offset: -2px; }
.coluna-vazia { text-align: center; color: var(--suave); font-size: .75rem; padding: 16px 0; }

.card-lead {
  display: block; background: #fff; border-radius: 10px; padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--borda); color: inherit; text-decoration: none; cursor: grab;
  box-shadow: 0 1px 3px rgba(10,10,245,.06); transition: border-color .15s, box-shadow .15s;
}
.card-lead:hover { border-color: #C9C9F5; box-shadow: 0 4px 12px rgba(10,10,245,.10); color: inherit; }
.card-lead.arrastando { opacity: .45; }
.card-lead .titulo { font-weight: 800; color: #1C1C2E; line-height: 1.25; }
.card-lead .pessoa { font-size: .78rem; color: var(--suave); }
.card-lead .linha-base { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; }
.card-lead .valor { font-family: var(--fonte-titulo); font-weight: 800; font-size: .8rem; color: var(--azul); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--degrade); color: #fff; font-size: .6rem; font-weight: 800; flex: none;
}
.etiqueta {
  display: inline-block; font-size: .66rem; font-weight: 700; padding: 1px 8px; border-radius: 10px;
  background: #F0F0F6; color: #5C5C6E; margin: 5px 4px 0 0;
}
.etiqueta.origem { background: #FFF0E6; color: #C2470A; }
.sinal-tarefa { font-size: .7rem; font-weight: 700; white-space: nowrap; }
.sinal-tarefa.atrasada { color: var(--vermelho); }
.sinal-tarefa.sem { color: var(--laranja); }
.sinal-tarefa.ok { color: var(--suave); }
.parado { font-size: .66rem; color: var(--suave); margin-top: 4px; }

/* ── Ficha do lead ───────────────────────────────────── */

.trilha-etapas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.trilha-etapas button {
  flex: 1 1 0; min-width: 90px; border: 0; padding: 8px 6px; font-size: .7rem; font-weight: 800;
  font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: .01em;
  background: #E9E9F2; color: #6A6A7C; border-radius: 8px;
}
.trilha-etapas button.feita { background: var(--cor); color: #fff; opacity: .5; }
.trilha-etapas button.atual { background: var(--cor); color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.trilha-etapas button:hover { filter: brightness(.95); }

.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.linha-tempo li:last-child { border-bottom: 0; }
.linha-tempo .icone {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: #ECECFE; color: var(--azul); font-size: .8rem;
}
.linha-tempo .icone.etapa { background: #FFF0E6; color: var(--laranja); }
.linha-tempo .icone.tarefa { background: #DCFCE7; color: var(--verde); }
.linha-tempo .icone.criado { background: var(--degrade); color: #fff; }
.linha-tempo .meta { font-size: .72rem; color: var(--suave); }
.linha-tempo .texto { white-space: pre-wrap; word-break: break-word; }

.tarefa-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.tarefa-item:last-child { border-bottom: 0; }
.tarefa-item .icone-tipo {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--laranja); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.tarefa-item.atrasada .icone-tipo { background: var(--vermelho); }
.tarefa-item.atrasada .prazo { color: var(--vermelho); font-weight: 700; }
.tarefa-item .prazo { font-size: .75rem; color: var(--suave); }

/* ── Painel ──────────────────────────────────────────── */

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.numero { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 14px 16px; position: relative; overflow: hidden; }
.numero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--degrade); }
.numero .rotulo { margin: 0; }
.numero .grande { font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 900; color: var(--azul); line-height: 1.2; margin-top: 4px; letter-spacing: -.02em; }
.numero .detalhe { font-size: .75rem; color: var(--suave); }
.numero.alerta .grande { color: var(--laranja); }

.barra-linha { display: grid; grid-template-columns: 150px 1fr 110px; align-items: center; gap: 10px; padding: 5px 0; font-size: .82rem; }
.barra-fundo { background: #EFEFF6; border-radius: 6px; height: 14px; overflow: hidden; }
.barra-cheia { height: 100%; background: var(--azul); border-radius: 6px; }
.barra-linha .num { text-align: right; color: var(--suave); font-size: .78rem; font-weight: 600; }

/* ── Login (degradê da marca, como as capas do kit) ─── */

.pagina-login {
  background: var(--degrade); background-attachment: fixed; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.caixa-login { background: #fff; border-radius: 18px; padding: 34px 28px 28px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(40,0,120,.35); }
.logo-login { text-align: center; margin-bottom: 22px; line-height: 1; }
.logo-login .marca { font-size: 2.6rem; color: var(--azul); }
.logo-login small { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: .72rem; letter-spacing: .3em; color: var(--laranja); margin-top: 6px; }

/* ── Celular ─────────────────────────────────────────── */

@media (max-width: 767px) {
  .barra-lateral {
    inset: auto 0 0 0; width: auto; height: 62px; flex-direction: row;
    padding: 0 4px; justify-content: space-around; align-items: center;
  }
  .barra-lateral::after { position: absolute; inset: 0 0 auto 0; height: 3px; margin: 0; }
  .barra-lateral .logo, .item-menu.sair { display: none; }
  .item-menu { flex: 1; padding: 6px 2px; margin: 0 2px; }
  .contador { right: 14%; }
  .conteudo { margin-left: 0; padding: 14px 12px 78px; }
  .cabecalho h1 { font-size: 1.4rem; }
  .coluna { flex-basis: 82vw; max-height: none; }
  .quadro { min-height: 0; scroll-snap-type: x mandatory; }
  .coluna { scroll-snap-align: start; }
  .filtros-funil .form-control, .filtros-funil .form-select { flex: 1 1 140px; min-width: 0; }
  .barra-linha { grid-template-columns: 100px 1fr 80px; }
  .numeros { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; }
  .numero { padding: 10px 12px; }
  .numero .grande { font-size: 1.2rem; }
}

/* ── Histórico: tipos de atividade e anexos ──────────── */

.rotulo-evento { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--azul); }
.linha-tempo .icone.proposta { background: #FFF0E6; color: var(--laranja); }
.linha-tempo .icone.email, .linha-tempo .icone.ligacao, .linha-tempo .icone.contato { background: #ECECFE; color: var(--azul); }
.linha-tempo .icone.whatsapp { background: #DCFCE7; color: #16A34A; }
.linha-tempo .icone.reuniao { background: #F3E8FF; color: #841FFF; }
.linha-tempo .icone.resposta { background: var(--verde); color: #fff; }
.anexo {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 6px 0 0; padding: 5px 10px;
  border: 1px solid var(--borda); border-radius: 8px; background: #FAFAFD; font-size: .8rem; font-weight: 700;
  color: var(--texto); text-decoration: none; max-width: 100%;
}
.anexo:hover { border-color: var(--azul); color: var(--azul); }
.anexo i { color: var(--laranja); }
.anexo small { color: var(--suave); font-weight: 600; }

/* ── Inteligência e ranking de clientes ──────────────── */

.nivel { display: inline-flex; align-items: center; gap: 5px; font-family: var(--fonte-titulo); font-weight: 800; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.nivel.ouro   { background: linear-gradient(135deg, #FDE68A, #F59E0B); color: #713F12; }
.nivel.prata  { background: linear-gradient(135deg, #F1F5F9, #94A3B8); color: #1E293B; }
.nivel.bronze { background: linear-gradient(135deg, #FED7AA, #C2702E); color: #fff; }
.nivel.sem    { background: #EFEFF6; color: var(--suave); }
.relacao { font-weight: 800; font-size: .78rem; }
.relacao.forte { color: var(--verde); }
.relacao.morno { color: var(--amarelo); }
.relacao.frio  { color: var(--vermelho); }
.relacao.sem   { color: var(--suave); }
.sinal { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin: 2px 3px 2px 0; }
.sinal.bom    { background: #DCFCE7; color: #166534; }
.sinal.ruim   { background: #FEE2E2; color: #991B1B; }
.sinal.alerta { background: #FEF3C7; color: #92400E; }
.sinal.info   { background: #ECECFE; color: var(--azul); }
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.contador-item { background: #F6F6FB; border-radius: 10px; padding: 8px 10px; text-align: center; }
.contador-item b { display: block; font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 900; color: var(--azul); line-height: 1.1; }
.contador-item span { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); }
.contador-item i { color: var(--laranja); font-size: .8rem; }
.sugestao { background: #FFF0E6; border-left: 4px solid var(--laranja); border-radius: 8px; padding: 8px 12px; font-size: .84rem; }
.tabela-ranking td, .tabela-ranking th { white-space: nowrap; font-size: .82rem; }
.tabela-ranking td.sinais { white-space: normal; min-width: 220px; }
.cartao-nivel { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.cartao-nivel.ativo { outline: 3px solid var(--azul); }

/* ── Painel: metas e gráficos ────────────────────────── */

.cartao-meta { display: flex; align-items: center; gap: 16px; }
.cartao-meta > div { min-width: 0; flex: 1; }
.cartao-meta .rotulo { overflow-wrap: anywhere; }
.anel { width: 96px; height: 96px; flex: none; }
.anel-fundo { fill: none; stroke: #EFEFF6; stroke-width: 10; }
.anel-cheio { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .6s; }
.anel-texto { font-family: var(--fonte-titulo); font-weight: 900; font-size: 20px; fill: var(--texto); text-anchor: middle; dominant-baseline: central; }
.meta-valor { font-family: var(--fonte-titulo); font-size: 1.45rem; font-weight: 900; color: var(--azul); line-height: 1.1; letter-spacing: -.02em; }
.valores { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.valores .numero { display: flex; flex-direction: column; justify-content: center; }
.valor-mesa .grande { color: var(--azul); }
.valor-fechado .grande { color: var(--verde); }
.valor-perdido .grande { color: #DC2626; }
.grafico { position: relative; height: 260px; }
.grafico-pequeno { height: 190px; }
@media (max-width: 767px) {
  .anel { width: 80px; height: 80px; }
  .grafico { height: 220px; }
}

/* ── Início: lembretes ───────────────────────────────── */
.lembretes { border-left: 5px solid var(--azul); }
.lembretes.com-atraso { border-left-color: var(--vermelho); }
.lembretes h2 i { color: var(--laranja); }

/* ── Pós-venda ───────────────────────────────────────── */
.venda-pv { border-left: 5px solid var(--azul); }
.venda-pv.concluida { border-left-color: var(--verde); background: #FAFFFB; }
.pv-calc { font-family: var(--fonte-titulo); font-weight: 900; font-size: 1.05rem; color: var(--azul); padding: 6px 0; }
.pv-comissao { color: var(--laranja); }

@media (max-width: 767px) {
  .item-menu { font-size: .58rem; padding: 7px 0; margin: 0 1px; }
  .item-menu i { font-size: 1.05rem; }
}

/* ── Novo lead: busca de contatos ────────────────────── */
.campo-busca .icone-busca { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--suave); font-size: .85rem; }
.busca-contato-campo { padding-left: 34px; }
.busca-contato-lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: #fff;
  border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 12px 30px rgba(10,10,245,.14);
  max-height: 290px; overflow-y: auto; padding: 4px;
}
.bc-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; width: 100%; text-align: left;
  border: 0; background: none; padding: 8px 10px; border-radius: 8px; color: var(--texto);
}
.bc-item strong { color: #1C1C2E; }
.bc-item small { flex-basis: 100%; color: var(--suave); }
.bc-item .sinal { margin: 0; }
.bc-item:hover, .bc-item.ativo { background: #ECECFE; }
.bc-novo { border-top: 1px solid var(--borda); border-radius: 0 0 8px 8px; color: var(--azul); font-weight: 800; }
.bc-novo i { color: var(--laranja); }
.bc-vazio { padding: 8px 10px; color: var(--suave); font-size: .85rem; }
.contato-escolhido { display: flex; align-items: center; gap: 10px; background: #ECECFE; border-radius: 10px; padding: 8px 12px; }
.contato-escolhido > i { color: var(--azul); font-size: 1.4rem; }

/* ── Funil: arrastar o quadro, modo compacto e lista ─── */
.quadro { cursor: grab; }
.quadro.puxando { cursor: grabbing; user-select: none; }
.quadro .card-lead { cursor: pointer; }
.seletor-vista .btn { font-weight: 700; }

.quadro.compacto .coluna { flex-basis: 220px; }
.quadro.compacto .card-lead { padding: 7px 9px; margin-bottom: 5px; }
.quadro.compacto .card-lead .titulo { font-size: .82rem; }
.quadro.compacto .card-lead .pessoa { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quadro.compacto .card-lead .etiqueta,
.quadro.compacto .card-lead .parado { display: none; }
.quadro.compacto .card-lead .linha-base { margin-top: 4px; }
.quadro.compacto .avatar { width: 20px; height: 20px; font-size: .55rem; }

.tabela-funil th[data-ordem] { cursor: pointer; user-select: none; white-space: nowrap; }
.tabela-funil th[data-ordem]::after { content: " ↕"; color: #C8C8D6; font-size: .75em; }
.tabela-funil th[data-dir="asc"]::after { content: " ▲"; color: var(--azul); }
.tabela-funil th[data-dir="desc"]::after { content: " ▼"; color: var(--azul); }
.tabela-funil td { font-size: .86rem; }
.mudar-etapa { min-width: 170px; font-weight: 700; border-left: 5px solid var(--cor, var(--suave)); }
.tabela-funil td:first-child { min-width: 230px; }
.tabela-funil td:nth-child(6) { white-space: nowrap; }

/* ── Pós-venda: botão i e saúde da venda ─────────────── */
.btn-info-venda { border: 0; background: none; color: var(--azul); font-size: 1.25rem; line-height: 1; padding: 0 2px; }
.btn-info-venda:hover { color: var(--laranja); }
.saude-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.saude-topo .sinal { font-size: .85rem; padding: 4px 12px; }
.saude-margem { font-family: var(--fonte-titulo); font-weight: 900; font-size: 1.7rem; color: var(--azul); line-height: 1; }
.saude-barra { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: #EFEFF6; margin-bottom: 14px; }
.saude-barra span { display: block; height: 100%; }
.saude-tabela td { padding: 6px 4px; font-size: .88rem; }
.saude-tabela tr.forte td { font-weight: 800; border-top: 2px solid var(--borda); }
.saude-tabela tr.lucro td { font-weight: 900; font-size: 1rem; border-top: 2px solid var(--borda); }

/* ── PI (Pedido de Inserção) ─────────────────────────── */
.pi-rotulo {
  display: inline-block; font-family: var(--fonte-titulo); font-weight: 900; font-size: .7rem; letter-spacing: .03em;
  background: var(--verde); color: #fff; border-radius: 6px; padding: 1px 7px; margin-bottom: 4px;
}
.pi-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: #F6F6FB; border-radius: 10px; }

/* ── Registros com nome e retorno do cliente ─────────── */
.titulo-evento { font-weight: 800; color: #1C1C2E; }
.titulo-evento .etiqueta { margin: 0 0 0 6px; background: #ECECFE; color: var(--azul); }
.botoes-retorno { display: flex; gap: 6px; margin-top: 6px; }
.botoes-retorno .btn { font-size: .72rem; padding: 2px 10px; }
.linha-tempo .icone.registro { background: #ECECFE; color: var(--azul); }
.linha-tempo .icone.negociacao { background: #FCE7F3; color: #BE185D; }
.status-neg { display: inline-block; font-size: .68rem; font-weight: 800; color: #BE185D; background: #FCE7F3; border-radius: 6px; padding: 1px 7px; margin-top: 4px; }
.negociacao-item { border-left: 3px solid #EC4899; padding: 6px 0 6px 10px; margin-bottom: 8px; }

/* Quadro do funil sem barra de rolagem (continua dando para arrastar o quadro e rolar) */
.quadro { scrollbar-width: none; }
.quadro::-webkit-scrollbar { display: none; }
.coluna-passar .coluna-cartoes { border: 2px dashed #16A34A55; border-radius: 12px; }
.coluna-passar .coluna-vazia { color: #15803D; }

/* ── Pós-venda › Produção (quadro) ───────────────────── */
.abas-pv { display: inline-flex; background: #EEEEF6; border-radius: 10px; padding: 3px; gap: 2px; }
.abas-pv a { padding: 5px 12px; border-radius: 8px; font-weight: 700; font-size: .82rem; color: var(--suave); text-decoration: none; }
.abas-pv a.ativa { background: #fff; color: var(--azul); box-shadow: 0 1px 3px rgba(10,10,245,.12); }
.prod-quadro { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; min-height: calc(100vh - 170px); }
.prod-coluna { flex: 0 0 260px; background: #EEEEF6; border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 170px); }
.prod-coluna.alvo { outline: 2px dashed var(--azul); outline-offset: -2px; }
.prod-cartao {
  display: block; background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--borda); color: inherit; text-decoration: none; cursor: grab;
  box-shadow: 0 1px 3px rgba(10,10,245,.06);
}
.prod-cartao:hover { border-color: #C9C9F5; color: inherit; }
.prod-cartao.arrastando { opacity: .45; }
.prod-cartao .titulo { font-weight: 800; color: #1C1C2E; line-height: 1.25; }
.prod-cartao .pessoa { font-size: .76rem; color: var(--suave); }
.prod-cartao .linha-base { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 6px; }
.prod-data { font-size: .74rem; font-weight: 700; color: var(--azul); margin-top: 5px; }
.prod-data.agora { color: #16A34A; }
.prod-data.passou, .prod-data.sem { color: var(--suave); font-weight: 600; }
.prod-pendencias { list-style: none; padding: 6px 8px; margin: 6px 0 0; background: #FFF6EE; border-radius: 8px; font-size: .74rem; color: #8A3A07; }
.prod-pendencias li::before { content: "• "; font-weight: 800; }
.prod-pendencias li.mais::before { content: ""; }
.prod-pendencias li.mais { color: var(--suave); }

/* Página da venda */
.trilha-producao { display: flex; flex-wrap: wrap; gap: 4px; }
.trilha-producao button { border: 0; border-radius: 8px; padding: 6px 10px; font-size: .72rem; font-weight: 800; background: #EEEEF6; color: var(--suave); }
.trilha-producao button.feito { background: color-mix(in srgb, var(--cor) 18%, #fff); color: var(--cor); }
.trilha-producao button.atual { background: var(--cor); color: #fff; }
.lista-pend { list-style: none; padding: 0; margin: 0; }
.lista-pend li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.lista-pend li.feita .txt { text-decoration: line-through; color: var(--suave); }
.lista-pend .meta { font-size: .7rem; color: var(--suave); }
.grupo-pend h3 { font-size: .78rem; font-weight: 800; text-transform: uppercase; color: var(--cor, var(--azul)); margin: 12px 0 4px; }
.data-campanha { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.data-campanha .quando { font-family: var(--fonte-titulo); font-weight: 800; color: var(--azul); min-width: 120px; }

/* Avisos de campanha no topo do Início */
.avisos-campanha { display: grid; gap: 8px; margin-bottom: 16px; }
.aviso-campanha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--borda); border-left: 6px solid var(--azul); }
.aviso-campanha .rotulo-aviso { font-family: var(--fonte-titulo); font-weight: 900; font-size: .8rem; text-transform: uppercase; color: var(--azul); min-width: 150px; }
.aviso-campanha.hoje, .aviso-campanha.andamento { border-left-color: #16A34A; background: #F0FDF4; }
.aviso-campanha.hoje .rotulo-aviso, .aviso-campanha.andamento .rotulo-aviso { color: #15803D; }
.aviso-campanha.ultimo { border-left-color: var(--laranja); background: #FFF6EE; }
.aviso-campanha.ultimo .rotulo-aviso { color: #C2470A; }
.aviso-campanha .oque { flex: 1; min-width: 180px; }

/* Calendário de campanhas */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario .dia-semana { font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--suave); text-align: center; padding: 4px 0; }
.calendario .dia { background: #fff; border: 1px solid var(--borda); border-radius: 8px; min-height: 92px; padding: 4px; overflow: hidden; }
.calendario .dia.fora { background: transparent; border-style: dashed; opacity: .5; }
.calendario .dia.hoje { border: 2px solid var(--azul); }
.calendario .num { font-size: .72rem; font-weight: 800; color: var(--suave); }
.calendario .dia.hoje .num { color: var(--azul); }
.calendario .evento { display: block; font-size: .68rem; font-weight: 700; color: #fff; background: var(--cor, var(--azul)); border-radius: 5px; padding: 1px 5px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.calendario .evento.ok::after { content: " ✓"; }
@media (max-width: 700px) {
  .calendario .dia { min-height: 54px; }
  .calendario .evento { font-size: 0; height: 6px; padding: 0; }
}
.chip-inativo { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: #FFF6EE; border: 1px solid #FFD9BF; text-decoration: none; color: #1C1C2E; font-size: .8rem; }
.chip-inativo small { color: #C2470A; font-size: .7rem; }
.chip-inativo:hover { border-color: var(--laranja); color: #1C1C2E; }
/* Calendário de diárias na página da venda */
.sd-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sd-semana { font-size: .68rem; font-weight: 800; text-transform: uppercase; color: var(--suave); text-align: center; }
.sd-dia { border: 1px solid var(--borda); background: #fff; border-radius: 8px; padding: 7px 0; font-weight: 700; font-size: .82rem; color: #1C1C2E; }
.sd-dia:hover { border-color: var(--azul); }
.sd-dia.hoje { border: 2px solid var(--azul); }
.sd-dia.marcado { background: var(--azul); border-color: var(--azul); color: #fff; }
.sd-dia.inicio { box-shadow: 0 0 0 3px #FF661466; }


/* Kanbans sem barras de rolagem (o quadro continua rolando e dá para arrastar com o mouse) */
.quadro, .prod-quadro, .coluna-cartoes { scrollbar-width: none; }
.quadro::-webkit-scrollbar, .prod-quadro::-webkit-scrollbar, .coluna-cartoes::-webkit-scrollbar { display: none; }
.prod-quadro { cursor: grab; } .prod-quadro.puxando { cursor: grabbing; user-select: none; } .prod-quadro .prod-cartao { cursor: pointer; }

/* Fechar venda: anexar o PI do cliente ou gerar o PI interno */
.escolha-pi { display: grid; gap: 6px; }
.opcao-pi { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.opcao-pi:has(input:checked) { border-color: var(--azul); background: #F3F3FF; }
.opcao-pi input { margin-top: 4px; }
.opcao-pi small { display: block; color: var(--suave); font-size: .74rem; }
.campo-lido { background: #ECFDF3; border-color: #16A34A; }
.abas-venda .nav-link { font-weight: 700; font-size: .85rem; }
.tabela-diarias textarea { min-height: 31px; }
.cadastro-resumo dt { font-weight: 700; color: var(--suave); }
.cadastro-resumo dd { margin-bottom: 4px; }
.aviso-campanha.feedback { border-left-color: #841FFF; background: #F7F1FF; } .aviso-campanha.feedback .rotulo-aviso { color: #6D28D9; }

/* Logo em imagem */
.barra-lateral .logo .logo-img { display: block; width: 66px; height: auto; margin: 0 auto; }
.logo-login .logo-img { display: block; width: 190px; height: auto; margin: 0 auto; }
.grafico-pizza { height: 210px; position: relative; }
.aviso-campanha.retorno { border-left-color: var(--laranja); }
.aviso-campanha.retorno .rotulo-aviso { color: #C2470A; }