/* ==========================================================================
   Sistema RB — folha de estilo
   Paleta clara (estilo AdvBox): lateral branca, fundo quase branco, minimal,
   verde esmeralda como cor acessória
   ========================================================================== */

/* Fonte do sistema: Inter (variável), hospedada aqui mesmo em /fontes/ —
   nada vem de fora, então o app continua funcionando offline e no PWA.
   Um arquivo cobre todos os pesos (400 a 800). */
@font-face {
  font-family: "InterVariable";
  src: url("/fontes/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVariable";
  src: url("/fontes/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/*
  TRÊS CORES + modo escuro:
    branco  — predominante (fundo, cartões, barra lateral)
    preto   — texto, títulos e contraste
    verde   — acessória (esmeralda #059669), no lugar do azul da AdvBox

  O esmeralda aguenta texto BRANCO em negrito por cima (3,8:1 — AA para texto
  grande/negrito), por isso --sobre-verde é branco. Quando o verde precisa
  virar TEXTO sobre fundo claro, usa-se o --verde-escuro (5,5:1 no branco).
*/
:root {
  --preto: #14171c;        /* preto — títulos e texto forte */
  --verde: #059669;        /* VERDE acessório (esmeralda escuro) — botão, barras, foco */
  --verde-escuro: #047857; /* verde para TEXTO sobre branco (5,5:1) */
  --verde-suave: #ecfdf5;  /* fundo verde bem tênue (hover, etiquetas) */
  --sobre-verde: #ffffff;  /* texto por cima do esmeralda (botões em negrito) */
  --branco: #ffffff;
  --fundo: #f5f7f6;        /* fundo geral — quase branco */
  --cartao: #ffffff;
  --borda: #e6e8ec;
  --cinza-texto: #20242b;  /* texto do corpo (quase preto) */
  --cinza-suave: #69707b;  /* texto secundário */
  /* Barra lateral: branca no modo claro (predominância do branco),
     escura no modo escuro. */
  --lateral-fundo: #ffffff;
  --lateral-texto: #20242b;
  --lateral-suave: #69707b;
  --lateral-hover: #f2f5f4;
  --lateral-borda: #e6e8ec;
  --vermelho: #b3261e;   /* só status; 6,5:1 no branco e 5,6:1 na etiqueta (WCAG AA) */
  --ambar: #cf9a2e;
  --sombra: 0 1px 2px rgba(20, 23, 28, .05), 0 6px 22px rgba(20, 23, 28, .07);
  --raio: 12px;
  /* Largura da barra lateral. Serve para os elementos position:fixed que
     precisam começar onde a lateral termina (a barra "Alterar fase" do CRM).
     Vira 68px quando a lateral é retraída — ver body.lateral-encolhida. */
  --lateral-largura: 248px;
  /* Inter em tudo (corpo e títulos); Segoe UI é só o plano B enquanto a
     fonte carrega ou se o arquivo faltar. */
  --fonte: "InterVariable", "Segoe UI", system-ui, -apple-system,
           "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "InterVariable", "Segoe UI", system-ui,
                  -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Caixas de seleção e radios nativos na cor da marca — sem isto o navegador
   pinta de azul (filtros da Agenda, painel Filtrar, "Lembrar-me" do login). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--verde); }

/* Garante que qualquer elemento com o atributo "hidden" fique realmente
   escondido, mesmo quando tem um display próprio (ex.: o modal usa grid). */
[hidden] { display: none !important; }

body {
  font-family: var(--fonte);
  background: var(--fundo);
  color: var(--cinza-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Títulos usam a mesma Inter, um pouco mais fechada no espaçamento */
.cabecalho h1, .login h1, .marca__texto strong {
  font-family: var(--fonte-titulo);
  letter-spacing: -.2px;
}

.app { display: flex; min-height: 100vh; }

/* ---- Barra lateral ------------------------------------------------------- */
.lateral {
  width: 248px;
  background: var(--lateral-fundo);
  color: var(--lateral-texto);
  border-right: 1px solid var(--lateral-borda);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca { display: flex; align-items: center; gap: 12px; padding: 6px 8px 26px; }
.marca__logo {
  width: 44px; height: 44px;
  background: var(--verde);
  color: var(--sobre-verde);
  border-radius: 11px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 18px; letter-spacing: .5px;
}
.marca__texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca__texto strong { font-size: 16px; color: var(--lateral-texto); }
.marca__texto span { font-size: 12px; color: var(--lateral-suave); }

.menu {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
}
/* barra de rolagem fina e discreta na lateral */
.menu::-webkit-scrollbar { width: 7px; }
.menu::-webkit-scrollbar-thumb { background: var(--lateral-borda); border-radius: 20px; }
.menu::-webkit-scrollbar-thumb:hover { background: var(--cinza-suave); }
.menu { scrollbar-width: thin; scrollbar-color: var(--lateral-borda) transparent; }
.menu__item {
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0;
  color: var(--lateral-suave);
  padding: 11px 14px; border-radius: 9px;
  font-size: 14.5px; font-weight: 500; cursor: pointer;
  text-align: left; width: 100%;
  transition: background .15s, color .15s;
}
.menu__item:hover { background: var(--lateral-hover); color: var(--lateral-texto); }
/* Prévia da importação de planilha */
.imp-previa {
  background: var(--verde-suave); border-radius: 10px; padding: 12px 14px;
  margin: 12px 0; font-size: 13.5px; color: var(--cinza-texto);
}
.imp-campos { font-size: 12px; color: var(--cinza-suave); margin-top: 5px; word-break: break-word; }
.imp-campos--fora { color: var(--vermelho); }
body.escuro .imp-previa { background: #1e242b; }

/* Título de grupo do menu (Captação, Atendimento, Rotina, Gestão) */
.menu__grupo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--lateral-suave); padding: 14px 14px 5px; user-select: none;
}
/* O item ativo é o principal uso do verde: fundo tênue + barra e ícone verdes */
.menu__item.ativo {
  background: var(--verde-suave); color: var(--preto); font-weight: 700;
  position: relative;
}
.menu__item.ativo::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--verde);
}
.menu__item.ativo .menu__icone { color: var(--verde-escuro); }
.menu__icone { font-size: 16px; width: 18px; text-align: center; }

.lateral__rodape {
  margin-top: auto;
  font-size: 11.5px; color: var(--lateral-suave);
  padding: 12px 8px 0; border-top: 1px solid var(--lateral-borda);
}

/* ---- Conteúdo ------------------------------------------------------------ */
/* min-width: 0 é obrigatório aqui. Sem ele, um flex item usa min-width:auto
   (= min-content) e não encolhe: conteúdo largo que deveria rolar dentro da
   própria caixa (o quadro do CRM, as abas de fase) esticava o .conteudo e
   punha a PÁGINA para rolar na horizontal, empurrando o lado direito da tela
   para fora — era o que cortava as últimas fases da barra "Alterar fase". */
/* margin-inline auto: em monitor largo o conteúdo fica centrado no espaço
   que sobra ao lado da lateral, em vez de deixar um vazio só à direita */
.conteudo { flex: 1; min-width: 0; padding: 30px 38px; max-width: 1180px; margin-inline: auto; }

.cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px;
}
.cabecalho h1 { font-size: 27px; color: var(--preto); font-weight: 700; }
.subtitulo { color: var(--cinza-suave); font-size: 14px; margin-top: 2px; }

.tela { display: none; }
.tela.ativa { display: block; animation: surgir .2s ease; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Cartões (KPIs) ------------------------------------------------------ */
.cartoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; margin-bottom: 26px;
}
.cartao {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra);
}
.cartao__rotulo { font-size: 13px; color: var(--cinza-suave); font-weight: 500; }
.cartao__numero { display: block; font-size: 34px; color: var(--preto); margin-top: 6px; font-weight: 700; }
.cartao--alerta .cartao__numero { color: var(--vermelho); }
.cartao__numero--dinheiro { font-size: 24px; }
.cartao__numero--verde { color: var(--verde-escuro); }

/* O resumo financeiro do painel usa os cartões padrão (.cartoes/.cartao). */

/* Etiquetas de cobrança */
.etq--recebido { background: #e3f5ee; color: var(--verde-escuro); }
.etq--pendente { background: #eef2f0; color: var(--cinza-suave); }
.etq--vencido { background: #fdeaea; color: var(--vermelho); }
.etq--vencehoje { background: #fdf3e0; color: #8a5600; }
.etq--cancelado { background: #eef2f0; color: var(--cinza-suave); text-decoration: line-through; }

/* Etiqueta de parcela */
.parcela-tag {
  display: inline-block; background: #eef2f0; color: var(--cinza-suave);
  font-size: 11px; padding: 1px 7px; border-radius: 20px; margin-left: 6px; font-weight: 600;
}
.valor-celula { text-align: right; font-weight: 700; color: var(--preto); white-space: nowrap; }

/* ---- Financeiro avançado: fluxo de caixa, meta e categorias ---- */
/* linha de apoio pequena dentro do cartão (ex.: "recebido − pago em agosto") */
.cartao__apoio { display: block; font-size: 11.5px; color: var(--cinza-suave); margin-top: 2px; }
/* gráfico entradas × saídas: duas colunas lado a lado na mesma barra */
.fluxo-par { display: flex; align-items: flex-end; gap: 3px; height: 100%; justify-content: center; width: 100%; }
.fluxo-par .barra-v__col { width: 34%; }
.barra-v__col--saida { background: linear-gradient(#ef4444, #b91c1c); }
.fluxo-legenda { font-size: 12px; color: var(--cinza-suave); margin: 10px 0 0; display: flex; gap: 14px; align-items: center; }
.fluxo-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.fluxo-ponto--entrada { background: var(--verde); }
.fluxo-ponto--saida { background: #ef4444; }
/* tabela mês a mês */
.fluxo-prev { font-size: 11.5px; color: var(--cinza-suave); font-weight: 400; }
.fluxo-positivo { color: var(--verde-escuro); }
.fluxo-negativo { color: var(--vermelho); }
.fluxo-mes-atual td { background: #f4f8f6; }
body.escuro .fluxo-mes-atual td { background: #141a20; }
.fluxo-nota { font-size: 12px; color: var(--cinza-suave); margin: 0 0 10px; }
.fluxo-nota-mini { font-size: 12px; color: var(--cinza-suave); font-weight: 400; }
/* barra de progresso da meta do mês */
.meta-trilho { height: 8px; background: #eef2f0; border-radius: 20px; overflow: hidden; margin-top: 6px; }
.meta-fill { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--verde), var(--verde-escuro)); min-width: 2px; transition: width .3s; }
.meta-fill--cheia { background: linear-gradient(90deg, var(--verde-escuro), var(--verde)); }
body.escuro .meta-trilho { background: #12171d; }
/* rótulos mais largos para nomes de categoria e valores em R$ */
.barra-h__rot--largo { width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-h__val--largo { width: 64px; }

/* ---- DRE anual (Relatórios): 12 meses + total, com rolagem própria ---- */
.dre-ano { min-width: 48px; text-align: center; align-self: center; }
.dre-rolagem { overflow-x: auto; }
.dre-grade { min-width: 1080px; }
.dre-grade th, .dre-grade td { font-size: 12px; white-space: nowrap; padding: 7px 8px; }
.dre-num { text-align: right; }
.dre-cat { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.dre-sub td { font-weight: 700; background: #f4f8f6; }
.dre-resultado td { border-top: 2px solid var(--preto); }
body.escuro .dre-sub td { background: #141a20; }
body.escuro .dre-resultado td { border-top-color: #eef4f1; }

/* Prioridade das tarefas */
.etq--alta { background: #fdeaea; color: var(--vermelho); }
.etq--media { background: #fdf3e0; color: #8a5600; }
.etq--baixa { background: #eef2f0; color: var(--cinza-suave); }

/* Status das tarefas */
.etq--afazer { background: #eef2f0; color: var(--cinza-suave); }
.etq--fazendo { background: #e6f0fb; color: #1a6fd4; }
.etq--concluida { background: #e3f5ee; color: var(--verde-escuro); }

/* Status das intimações */
.etq--nova { background: #fdeaea; color: var(--vermelho); }
.etq--lida { background: #e6f0fb; color: #1a6fd4; }
.etq--tratada { background: #e3f5ee; color: var(--verde-escuro); }
.etq--arquivada { background: #eef2f0; color: var(--cinza-suave); }

/* Documentos */
.doc-nome { display: flex; align-items: center; gap: 10px; }
.doc-icone {
  width: 34px; height: 34px; border-radius: 8px; background: #eef2f0;
  display: grid; place-items: center; font-size: 15px; color: var(--cinza-suave);
  flex-shrink: 0; font-weight: 700;
}
.link-baixar {
  background: transparent; border: 0; cursor: pointer; color: var(--verde-escuro);
  font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: 6px;
}
.link-baixar:hover { background: #e3f5ee; }

/* Campo de upload de arquivo */
.campo-arquivo {
  border: 2px dashed var(--borda); border-radius: 10px; padding: 18px;
  text-align: center; cursor: pointer; background: #fbfcfb; transition: border-color .15s;
}
.campo-arquivo:hover { border-color: var(--verde); }
.campo-arquivo input { display: none; }
.campo-arquivo__texto { color: var(--cinza-suave); font-size: 14px; }
.campo-arquivo__nome { color: var(--verde-escuro); font-weight: 600; margin-top: 4px; font-size: 13px; }

/* ---- Blocos e tabelas ---------------------------------------------------- */
.bloco {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra);
}
.bloco__cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bloco h2 { font-size: 17px; color: var(--preto); }

.busca {
  width: 100%; padding: 11px 14px; margin-bottom: 16px;
  border: 1px solid var(--borda); border-radius: 9px;
  font-size: 14px; color: var(--cinza-texto); background: #fbfcfb;
}
.busca:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(5, 150, 105, .22); }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--cinza-suave);
  padding: 10px 12px; border-bottom: 1.5px solid var(--borda); font-weight: 600;
}
.tabela td { padding: 13px 12px; border-bottom: 1px solid #eef2f0; color: var(--cinza-texto); }
.tabela tbody tr:hover { background: #f8faf9; }
.tabela tbody tr:last-child td { border-bottom: 0; }

.vazio { text-align: center; color: var(--cinza-suave); padding: 30px; font-size: 14px; }

/* ---- Etiquetas de situação ---------------------------------------------- */
.etq {
  display: inline-block; padding: 3px 10px; border-radius: 30px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.etq--atrasado { background: #fdeaea; color: var(--vermelho); }
.etq--hoje { background: #fdf3e0; color: #8a5600; }
.etq--proximo { background: #e3f5ee; color: var(--verde-escuro); }
.etq--futuro { background: #eef2f0; color: var(--cinza-suave); }
.etq--ok { background: #eef2f0; color: var(--cinza-suave); }
.etq--ativo { background: #e3f5ee; color: var(--verde-escuro); }
.etq--encerrado { background: #eef2f0; color: var(--cinza-suave); }
.etq--suspenso { background: #fdf3e0; color: #8a5600; }

/* ---- Botões -------------------------------------------------------------- */
.botao {
  border: 1px solid var(--borda); background: var(--branco);
  color: var(--cinza-texto); padding: 10px 16px; border-radius: 9px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.botao:hover { border-color: var(--cinza-suave); }
/* Branco em negrito sobre o esmeralda: 3,8:1 (AA para texto grande/negrito).
   No hover o verde só aprofunda — nunca vira preto. */
.botao--principal { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); font-weight: 700; }
.botao--principal:hover {
  background: #047857; border-color: #047857; color: var(--sobre-verde);
  box-shadow: 0 4px 14px rgba(4, 120, 87, .3);
}
.botao--perigo { color: var(--vermelho); border-color: #f3d0d1; background: #fff; }
.botao--perigo:hover { background: #fdeaea; }

.acao-linha {
  background: transparent; border: 0; cursor: pointer;
  color: var(--cinza-suave); font-size: 13px; padding: 4px 8px; border-radius: 6px;
}
.acao-linha:hover { background: #eef2f0; color: var(--preto); }
.acao-linha--perigo:hover { background: #fdeaea; color: var(--vermelho); }

/* ---- Filtros (chips) ----------------------------------------------------- */
.filtros { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

/* ---- Atividades: barra Nova tarefa · Buscar · Filtrar · Ordenar ---------- */
.ativ-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ativ-busca { position: relative; flex: 0 1 260px; min-width: 160px; }
.ativ-busca svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--cinza-suave); pointer-events: none;
}
.ativ-busca input {
  width: 100%; border: 1px solid var(--borda); border-radius: 9px;
  background: #fbfcfb; padding: 8px 12px 8px 34px;
  font: inherit; font-size: 13.5px; color: var(--cinza-texto);
}
.ativ-busca input:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .22);
}
.ordenar-caixa { position: relative; }
.ordenar-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 190px; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 12px 34px rgba(20, 23, 28, .16); padding: 6px;
}
.ordenar-menu button {
  display: block; width: 100%; border: 0; background: transparent;
  text-align: left; font: inherit; font-size: 13.5px; color: var(--cinza-texto);
  padding: 8px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.ordenar-menu button:hover { background: var(--verde-suave); }
.ordenar-menu button.ativo { font-weight: 700; color: var(--verde-escuro); }
/* cabeçalho de coluna clicável, com a setinha da AdvBox */
.tabela--ativ th[data-ordem] { cursor: pointer; user-select: none; white-space: nowrap; }
.tabela--ativ th[data-ordem]:hover { color: var(--preto); }
.tabela--ativ th.ordem-asc::after { content: " ▲"; font-size: 9px; }
.tabela--ativ th.ordem-desc::after { content: " ▼"; font-size: 9px; }
body.escuro .ativ-busca input { background: #171b21; color: #e6ebe8; }
body.escuro .ordenar-menu { box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
body.escuro .tabela--ativ th[data-ordem]:hover,
body.escuro .ordenar-menu button.ativo { color: #eef4f1; }
/* a navegação de mês da Produtividade agora vive acima dos cartões */
#prod-conteudo > .prod-nav { margin-bottom: 16px; }
.chip {
  border: 1px solid var(--borda); background: #fff; color: var(--cinza-suave);
  padding: 7px 14px; border-radius: 30px; font-size: 13px; cursor: pointer; font-weight: 500;
}
.chip:hover { border-color: var(--cinza-suave); }
.chip.ativo { background: var(--preto); color: #fff; border-color: var(--preto); }

/* ---- Caixa de seleção (concluir prazo) ----------------------------------- */
.marcador {
  width: 20px; height: 20px; border: 2px solid var(--borda); border-radius: 6px;
  cursor: pointer; display: grid; place-items: center; background: #fff;
}
.marcador.marcado { background: var(--verde); border-color: var(--verde); color: var(--sobre-verde); font-weight: 800; }
.linha-concluida td:not(:first-child) { opacity: .5; text-decoration: line-through; }

/* ---- Modal --------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; background: rgba(12, 17, 14, .5);
  display: grid; place-items: center; padding: 20px; z-index: 50;
  backdrop-filter: blur(2px);
}
.modal__caixa {
  background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
/* Formulário cheio (criar tarefa): janela larga para os campos caberem lado
   a lado, em vez de empilhados. */
.modal__caixa--largo { max-width: 880px; }
.modal__caixa--largo .formulario { padding: 24px 28px; gap: 18px; }
.modal__caixa--largo .campo--duplo,
.modal__caixa--largo .campo--tripla { gap: 20px; }
.modal__cabecalho {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: #fff;
}
.modal__cabecalho h2 { font-size: 18px; color: var(--preto); }
.modal__fechar { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--cinza-suave); }
.modal__fechar:hover { color: var(--preto); }

/* ---- Formulário ---------------------------------------------------------- */
.formulario { padding: 22px 24px; display: grid; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo--duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--cinza-texto); }
.campo input, .campo select, .campo textarea {
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
  font-size: 14px; font-family: inherit; color: var(--cinza-texto); background: #fbfcfb;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(5, 150, 105, .22);
}
.campo textarea { resize: vertical; min-height: 64px; }
.formulario__acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ---- Aviso (toast) ------------------------------------------------------- */
.aviso {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--preto); color: #fff; padding: 12px 22px; border-radius: 30px;
  font-size: 14px; box-shadow: var(--sombra); z-index: 60; animation: surgir .2s ease;
}

/* ---- Agenda / Calendário (prints 11 a 13) -------------------------------- */
.agenda-layout { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: start; }
.agenda-filtros {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px; display: grid; gap: 14px; box-shadow: var(--sombra);
}
.agenda-visao { display: flex; gap: 4px; background: var(--fundo); border-radius: 9px; padding: 3px; }
.agenda-visao__btn {
  flex: 1; border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--cinza-suave);
  padding: 7px 4px; border-radius: 7px;
}
.agenda-visao__btn.ativo { background: var(--verde); color: var(--sobre-verde); }
.agenda-filtros__titulo { font-size: 15px; font-weight: 700; color: var(--preto); }
.agenda-filtros__sub {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--cinza-suave); border-top: 1px solid var(--borda); padding-top: 12px;
}
.agenda-check, .agenda-status label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--cinza-texto); cursor: pointer;
}
.agenda-status { display: grid; gap: 8px; }
body.escuro .agenda-filtros__titulo { color: #eef4f1; }

.agenda-principal {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px 18px 18px; box-shadow: var(--sombra); min-width: 0;
}
.agenda-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.agenda-titulo-mes {
  font-size: 18px; font-weight: 700; color: var(--preto);
  margin-right: auto;
}
.agenda-dica { font-size: 12.5px; color: var(--cinza-suave); margin-top: 12px; }

.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendario--dia { grid-template-columns: 1fr; }
.cal-cabecalho {
  text-align: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  color: var(--cinza-suave); padding: 4px 0; letter-spacing: .5px;
}
.cal-dia {
  min-height: 104px; border: 1px solid var(--borda); border-radius: 8px;
  padding: 6px; background: var(--cartao); display: flex; flex-direction: column; gap: 4px;
  overflow: hidden; cursor: pointer;
}
.cal-dia:hover { border-color: var(--verde); background: var(--verde-suave); }
.calendario--dia .cal-dia { min-height: 320px; }
.cal-dia--fora { background: var(--fundo); opacity: .55; }
.cal-dia--hoje { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
.cal-dia__num { font-size: 12.5px; font-weight: 600; color: var(--cinza-texto); }
.cal-dia--hoje .cal-dia__num {
  background: var(--verde); color: var(--sobre-verde); border-radius: 50%;
  width: 22px; height: 22px; display: grid; place-items: center; font-weight: 800;
}

/* Cartão do evento: título, parte envolvida e avatar do responsável */
.cal-ev {
  display: grid; gap: 2px; text-align: left; width: 100%; cursor: pointer;
  border: 0; border-left: 3px solid var(--verde); border-radius: 5px;
  background: var(--verde-suave); padding: 5px 7px; font: inherit;
}
.cal-ev:hover { filter: brightness(.97); }
.cal-ev__titulo {
  font-size: 11.5px; font-weight: 700; color: var(--verde-escuro);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-ev__parte {
  font-size: 11px; color: var(--cinza-texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-ev .avatar-mini { width: 20px; height: 20px; font-size: 9px; justify-self: start; }
.cal-ev--atrasado { border-left-color: var(--vermelho); background: #fdeaea; }
.cal-ev--atrasado .cal-ev__titulo { color: var(--vermelho); }
.cal-ev--ok { opacity: .6; }
.cal-mais { font-size: 10.5px; color: var(--cinza-suave); font-weight: 600; }
body.escuro .cal-ev--atrasado { background: #2a1a1a; }
body.escuro .cal-ev__parte { color: var(--cinza-texto); }

@media (max-width: 900px) {
  .agenda-layout { grid-template-columns: 1fr; }
}

.bloco-google { margin-top: 18px; }
.google-texto { font-size: 13.5px; color: var(--cinza-texto); margin-bottom: 14px; line-height: 1.5; }
.google-acoes { margin-bottom: 16px; }
.google-rotulo { font-size: 12.5px; font-weight: 600; color: var(--cinza-texto); display: block; margin-bottom: 6px; }
.google-link { display: flex; gap: 8px; }
.google-link input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px;
  font-size: 12.5px; color: var(--cinza-suave); background: #fbfcfb;
}

/* ---- Ficha do processo --------------------------------------------------- */
.ficha-bloco { margin-bottom: 16px; }
.ficha-kpi { font-size: 17px !important; }
.ficha-add { padding: 6px 12px; font-size: 13px; }
.ficha-lista { list-style: none; }
.ficha-item {
  padding: 9px 4px; border-bottom: 1px solid #eef2f0; font-size: 13.5px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.ficha-item:last-child { border-bottom: 0; }
.ficha-vazio { padding: 10px 4px; color: var(--cinza-suave); font-size: 13px; }
.ficha-data { color: var(--cinza-suave); font-size: 12.5px; margin-left: auto; }

/* ---- Kanban -------------------------------------------------------------- */
.alternar-visao { display: flex; gap: 8px; margin-bottom: 16px; }

.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start;
}
.kanban-coluna {
  background: #eef1f0; border-radius: var(--raio); padding: 10px;
  min-height: 120px; display: flex; flex-direction: column; gap: 10px;
}
.kanban-coluna.arrastando-sobre { background: #d3eee2; outline: 2px dashed var(--verde); }
.kanban-coluna__topo {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--cinza-texto); padding: 4px 6px 2px;
}
.kanban-coluna__contador {
  background: #fff; color: var(--cinza-suave); border-radius: 20px;
  padding: 1px 9px; font-size: 12px; font-weight: 600;
}
.kanban-coluna__total { font-size: 11px; color: var(--cinza-suave); font-weight: 600; padding: 0 6px 4px; }

.kanban-card {
  background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  padding: 11px 12px; box-shadow: var(--sombra); cursor: grab; font-size: 13.5px;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.arrastando { opacity: .4; }
.kanban-card__titulo { font-weight: 700; color: var(--preto); margin-bottom: 4px; }
.kanban-card__linha { color: var(--cinza-suave); font-size: 12.5px; margin-top: 3px; display: flex; gap: 6px; align-items: center; }
.kanban-card__valor { color: var(--verde-escuro); font-weight: 700; }
.kanban-card__acoes { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.kanban-vazio { color: var(--cinza-suave); font-size: 12.5px; text-align: center; padding: 14px 6px; }
.mini-tag {
  display: inline-block; background: #eef2f0; color: var(--cinza-suave);
  border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 600;
}

/* colunas por etapa (barrinha no topo) */
.kanban-coluna[data-cor="novo"] .kanban-coluna__topo { border-left: 3px solid var(--cinza-suave); padding-left: 6px; }
.kanban-coluna[data-cor="andamento"] .kanban-coluna__topo { border-left: 3px solid #1a6fd4; padding-left: 6px; }
.kanban-coluna[data-cor="ganho"] .kanban-coluna__topo { border-left: 3px solid var(--verde); padding-left: 6px; }
.kanban-coluna[data-cor="perdido"] .kanban-coluna__topo { border-left: 3px solid var(--vermelho); padding-left: 6px; }

/* ---- Tela de login (layout "cartão central"): fundo cinza-claro com um
       cartão branco flutuando no centro, só o essencial ------------------- */
.login {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--fundo); padding: 24px;
}
.login__area { width: 100%; display: grid; justify-items: center; }
.login__caixa {
  width: 100%; max-width: 360px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px;
  padding: 34px 30px 30px;
  box-shadow: 0 1px 2px rgba(20, 23, 28, .04), 0 18px 44px rgba(20, 23, 28, .09);
  animation: login-entrada .5s ease both;
}
@keyframes login-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Logo esmeralda pequeno, centralizado no topo do cartão */
.login .marca__logo {
  width: 46px; height: 46px; font-size: 18px; border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #047857); color: #fff;
  margin: 0 auto 26px;
}

/* Título e subtítulo só aparecem no primeiro acesso (via JS) */
.login__titulo { font-family: var(--fonte-titulo); font-size: 25px; color: var(--preto); margin-bottom: 4px; }
.login__sub { font-size: 13.5px; color: var(--cinza-suave); margin-bottom: 12px; }

.login__form { display: grid; gap: 12px; }
/* campos sem rótulo: preenchidos, grandes, foco esmeralda */
.login .campo input {
  padding: 14px 16px; font-size: 14.5px; min-height: 50px; border-radius: 12px;
  background: #f4f6f5; border: 1px solid transparent;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.login .campo input:focus {
  background: #fff; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .16);
}
.campo__senha { position: relative; }
.campo__senha input { width: 100%; padding-right: 48px; }
.campo__olho {
  position: absolute; top: 0; right: 0; height: 100%; width: 46px;
  border: 0; background: none; cursor: pointer; color: var(--cinza-suave);
  display: grid; place-items: center; border-radius: 0 12px 12px 0;
}
.campo__olho:hover { color: var(--preto); }
.campo__olho .olho--ocultar { display: none; }
.campo__olho.aberto .olho--mostrar { display: none; }
.campo__olho.aberto .olho--ocultar { display: block; }

/* Botão esmeralda, o único ponto forte de cor do cartão */
.login .login__botao {
  width: 100%; font-size: 15px; margin-top: 4px; min-height: 50px; border-radius: 12px;
  background: var(--verde); border-color: var(--verde); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.login .login__botao:hover {
  background: #047857; border-color: #047857; color: #fff;
  box-shadow: 0 6px 18px rgba(4, 120, 87, .28);
}
.login__girador {
  width: 16px; height: 16px; border-radius: 50%; display: none;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: login-girar .7s linear infinite;
}
.login__botao.carregando .login__girador { display: inline-block; }
@keyframes login-girar { to { transform: rotate(360deg); } }

/* Linha única de opções: lembrar à esquerda, esqueci à direita */
.login__opcoes { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.login__lembrar {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--cinza-suave); cursor: pointer;
}
.login__lembrar input { accent-color: var(--verde); width: 14px; height: 14px; cursor: pointer; }
.login__esqueci {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 12.5px; color: var(--cinza-suave); font-family: inherit;
}
.login__esqueci:hover { color: var(--verde-escuro); text-decoration: underline; }

/* Erro: faixa clara + tremida curta + contorno nos campos */
.login__erro {
  background: #fdeaea; color: var(--vermelho); padding: 10px 12px;
  border-radius: 10px; font-size: 13px; margin: 0;
}
.login__form.tremer { animation: login-tremer .4s ease; }
@keyframes login-tremer {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.campo--erro input {
  border-color: var(--vermelho);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}

/* Modal pequeno (esqueceu a senha) */
.modal__caixa--estreita { max-width: 420px; }
.modal__corpo-simples { padding: 20px 24px 24px; display: grid; gap: 12px; }
.modal__corpo-simples p { font-size: 14px; line-height: 1.55; color: var(--cinza-texto); }
.modal__corpo-simples .botao { justify-self: end; margin-top: 6px; }

/* Celular: cartão com respiro menor */
@media (max-width: 820px) {
  .login__caixa { padding: 28px 22px 24px; }
}

/* Modo escuro da tela de login */
body.escuro .login__caixa {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .45);
}
body.escuro .login__titulo { color: #eef4f1; }
body.escuro .login .campo input { background: #10151b; border-color: transparent; }
body.escuro .login .campo input:focus { background: #0d1218; border-color: var(--verde); }
body.escuro .login .login__botao { background: var(--verde); border-color: var(--verde); color: #fff; }
body.escuro .login .login__botao:hover { background: #10b981; border-color: #10b981; color: #fff; }
body.escuro .login__erro { background: #2a1a1a; color: #ffb4ab; }
body.escuro .campo--erro input {
  border-color: #ffb4ab; box-shadow: 0 0 0 3px rgba(255, 180, 171, .12);
}
body.escuro .campo__olho:hover { color: #eef4f1; }
body.escuro .modal__corpo-simples p { color: var(--cinza-texto); }

/* Acessibilidade: sem animações para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .login__caixa, .login__form.tremer { animation: none; }
}

/* ---- Rodapé da lateral: usuário logado ---------------------------------- */
.usuario-atual {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px 0;
  border-top: 1px solid var(--lateral-borda); margin-top: auto;
}
.usuario-atual__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--verde);
  color: var(--sobre-verde); display: grid; place-items: center; font-weight: 700;
  font-size: 14px; flex-shrink: 0;
}
.usuario-atual__info { flex: 1; min-width: 0; }
.usuario-atual__nome {
  font-size: 13px; color: var(--lateral-texto); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usuario-atual__acoes { display: flex; align-items: center; gap: 6px; }
.usuario-atual__sep { color: var(--lateral-borda); font-size: 11px; }
.usuario-atual__sair {
  background: transparent; border: 0; color: var(--lateral-suave);
  cursor: pointer; font-size: 12px; padding: 2px 0; text-align: left;
}
.usuario-atual__sair:hover { color: var(--verde-escuro); }

/* ---- Aba "Processo" do painel (prints 16 a 20) --------------------------- */
.proc-parte {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  border: 1px solid var(--borda); border-radius: 10px; padding: 9px 12px;
}
.proc-parte__nome { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--preto); }
body.escuro .proc-parte__nome { color: #eef4f1; }
.detalhe__painel--estreito .cartoes { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }

/* ---- Tabela de Atividades (print 14) ------------------------------------ */
.tabela--ativ th:first-child, .tabela--ativ td:first-child { width: 34px; }
.tabela--ativ th:nth-child(2), .tabela--ativ td:nth-child(2) { width: 30px; }
.ativ-estrela {
  border: 0; background: transparent; cursor: pointer; padding: 2px;
  color: var(--cinza-suave); display: grid; place-items: center;
}
.ativ-estrela.ativa { color: var(--ambar); }
.ativ-estrela:hover { color: var(--verde-escuro); }
.ativ-titulo { font-weight: 600; }
.ativ-tipo { color: var(--verde-escuro); font-weight: 700; text-transform: uppercase; font-size: 12px; }
.ativ-vencida { color: var(--vermelho); font-weight: 700; }
body.escuro .ativ-tipo { color: var(--verde); }

/* Filtro em 3 colunas, como no print da AdvBox */
/* Na gaveta de 370px, 3 colunas espremiam cada campo a ~95px e cortavam o
   texto ("Data do co…"); em 2 colunas cada um respira. */
.filtro-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
@media (max-width: 640px) { .filtro-linha { grid-template-columns: 1fr; } }

/* ==========================================================================
   BUSCA GLOBAL no topo (pessoas e processos), sempre visível
   ========================================================================== */
/* Pequena e à esquerda (como na AdvBox); cresce quando começa a digitar. */
.busca-topo {
  position: relative; width: 340px; max-width: 100%;
  transition: width .18s ease;
}
.busca-topo.aberta { width: 560px; }
.busca-topo__campo {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--borda); border-radius: 10px;
  background: var(--cartao); color: var(--cinza-suave); padding: 0 12px;
}
.busca-topo__campo svg { width: 18px; height: 18px; flex-shrink: 0; }
.busca-topo__campo:focus-within {
  border-color: var(--verde); box-shadow: 0 0 0 3px rgba(5, 150, 105, .22);
}
.busca-topo input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 0;
  font: inherit; font-size: 14px; color: var(--cinza-texto);
}
.busca-topo input:focus { outline: none; }
.busca-topo input::-webkit-search-cancel-button { display: none; }
.busca-topo__limpar {
  border: 0; background: transparent; color: var(--cinza-suave);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.busca-topo__limpar:hover { color: var(--preto); }

.busca-pop {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--cartao); border: 1px solid var(--verde);
  border-radius: 12px; box-shadow: 0 18px 46px rgba(20, 23, 28, .18);
  max-height: 460px; overflow-y: auto;
}
.busca-abas { display: flex; gap: 6px; padding: 12px 14px 8px; }
.busca-aba {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: 20px; padding: 6px 14px;
  background: transparent; color: var(--cinza-suave);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.busca-aba:hover { background: var(--verde-suave); color: var(--preto); }
.busca-aba.ativo { background: var(--verde); color: var(--sobre-verde); }
.busca-aba__n {
  font-size: 11.5px; font-weight: 700; border-radius: 20px; padding: 0 6px;
  background: rgba(20, 23, 28, .12);
}
.busca-aba.ativo .busca-aba__n { background: rgba(12, 17, 14, .18); }

.busca-res { padding: 4px 6px 10px; }
.busca-res__item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 10px 12px; border-radius: 10px; font: inherit;
}
.busca-res__item:hover, .busca-res__item.marcado { background: var(--verde-suave); }
.busca-res__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--fundo); color: var(--cinza-suave);
}
.busca-res__item:hover .busca-res__icone { color: var(--verde-escuro); }
.busca-res__corpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.busca-res__titulo {
  font-size: 14px; font-weight: 600; color: var(--preto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.busca-res__linha {
  font-size: 12.5px; color: var(--cinza-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* trecho que casou com a busca */
.busca-res mark {
  background: var(--verde-suave); color: var(--verde-escuro);
  font-weight: 700; border-radius: 3px; padding: 0 2px;
}
.busca-vazio { padding: 30px 16px 34px; text-align: center; color: var(--cinza-suave); }
.busca-vazio__icone {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fundo); color: var(--cinza-suave);
}
.busca-vazio__icone svg { width: 24px; height: 24px; }
.busca-vazio strong { display: block; font-size: 14.5px; color: var(--preto); margin-bottom: 5px; }
.busca-vazio span { display: block; font-size: 13px; }
body.escuro .busca-vazio__icone { background: #262b33; }
body.escuro .busca-vazio strong { color: #eef4f1; }

body.escuro .busca-pop { box-shadow: 0 18px 46px rgba(0, 0, 0, .55); }
body.escuro .busca-res__icone { background: #262b33; }
body.escuro .busca-res__titulo { color: #eef4f1; }
body.escuro .busca-aba__n { background: rgba(255, 255, 255, .14); }
body.escuro .busca-aba:hover { color: #eef4f1; }

/* ==========================================================================
   LATERAL RETRÁTIL — reduz para só os ícones
   ========================================================================== */
.lateral__encolher {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  color: var(--lateral-suave); display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
}
.lateral__encolher svg { width: 19px; height: 19px; }
.lateral__encolher:hover { background: var(--lateral-hover); color: var(--lateral-texto); }

.app.encolhido .lateral { width: 68px; padding: 22px 10px; }
/* A classe fica no BODY (e não só no .app) porque a barra "Alterar fase" mora
   fora do .app — é filha do body, para não ser posicionada pela tela do CRM. */
body.lateral-encolhida { --lateral-largura: 68px; }
.app.encolhido .marca { padding: 6px 0 26px; justify-content: center; }
.app.encolhido .marca__texto,
.app.encolhido .menu__grupo,
.app.encolhido .tema-toggle,
.app.encolhido .usuario-atual__info { display: none; }
.app.encolhido .lateral__encolher {
  position: absolute; top: 74px; left: 50%; transform: translateX(-50%);
  margin-left: 0;
}
.app.encolhido .menu { margin-top: 30px; }
/* Numa barra de 68px a rolagem visível come 10px e desloca os ícones para a
   esquerda (era o "risco" cinza no meio do menu recolhido). Continua rolando,
   só não reserva mais espaço. */
.app.encolhido .menu { scrollbar-width: none; }
.app.encolhido .menu::-webkit-scrollbar { width: 0; height: 0; }
/* width:100% para o item ocupar a lateral toda — sem isso ele encolhe para o
   tamanho do ícone e o ícone fica centralizado no item, não na barra. */
.app.encolhido .menu__item { justify-content: center; padding: 12px 0; gap: 0; width: 100%; }
.app.encolhido .menu__rotulo { display: none; }
.app.encolhido .menu__item.ativo::before { left: -10px; }
.app.encolhido .usuario-atual { justify-content: center; padding: 10px 0 0; }
.app.encolhido .conteudo { max-width: none; }
/* com a lateral encolhida, o nome da tela aparece ao passar o mouse */
.app.encolhido .menu__item { position: relative; }
.app.encolhido .menu__item::after {
  content: attr(data-rotulo); position: absolute; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%); white-space: nowrap; z-index: 30;
  background: var(--preto); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 6px 10px; border-radius: 7px; opacity: 0; pointer-events: none;
  transition: opacity .12s;
}
.app.encolhido .menu__item:hover::after,
.app.encolhido .menu__item:focus-visible::after { opacity: 1; }
body.escuro .app.encolhido .menu__item::after,
body.escuro .menu__item::after { background: #eef0f3; color: #14171c; }

.tema-toggle {
  background: transparent; border: 1px solid var(--lateral-borda); color: var(--lateral-suave);
  border-radius: 8px; padding: 8px; font-size: 12.5px; cursor: pointer;
  margin-top: auto; margin-bottom: 10px;
}
.tema-toggle:hover { color: var(--lateral-texto); border-color: var(--cinza-suave); }
.usuario-atual { margin-top: 0; }

/* ---- Relatórios ---------------------------------------------------------- */
.rel-periodo { display: flex; gap: 14px; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; }
.rel-periodo .campo { min-width: 150px; }
.rel-export { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Busca: resultados --------------------------------------------------- */
.busca-grupo { margin-bottom: 18px; }
.busca-grupo h2 { font-size: 15px; color: var(--preto); margin-bottom: 8px; }
.busca-item {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 9px;
  padding: 11px 14px; margin-bottom: 7px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; box-shadow: var(--sombra);
}
.busca-item__txt { font-size: 13.5px; color: var(--cinza-texto); }
.busca-item__txt strong { color: var(--preto); }

/* ---- Gráficos do painel -------------------------------------------------- */
.graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 26px; }
.barra-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.barra-h__rot { font-size: 13px; color: var(--cinza-texto); width: 90px; }
.barra-h__trilho { flex: 1; height: 14px; background: #eef2f0; border-radius: 20px; overflow: hidden; }
.barra-h__fill { height: 100%; border-radius: 20px; min-width: 2px; transition: width .3s; }
.barra-h__val { font-size: 13px; font-weight: 700; color: var(--preto); width: 28px; text-align: right; }

.barras-v { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 170px; padding-top: 10px; }
.barra-v { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.barra-v__val { font-size: 10.5px; color: var(--cinza-suave); margin-bottom: 3px; white-space: nowrap; }
.barra-v__col { width: 60%; max-width: 34px; background: linear-gradient(var(--verde), var(--verde-escuro)); border-radius: 6px 6px 0 0; min-height: 0; transition: height .3s; }
.barra-v__rot { font-size: 11.5px; color: var(--cinza-suave); margin-top: 6px; text-transform: capitalize; }

/* ---- Configurações / Asaas ----------------------------------------------- */
.asaas-status { font-size: 13px; color: var(--verde-escuro); font-weight: 600; align-self: center; }
#asaas-webhook-token {
  background: #eef2f0; padding: 2px 8px; border-radius: 5px; font-size: 12px;
  word-break: break-all;
}
body.escuro #asaas-webhook-token { background: #12171d; color: var(--cinza-suave); }

/* ---- Produtividade / Ranking --------------------------------------------- */
/* Pódio: só aparece para o admin e quando há com quem comparar. As cores de
   1º/2º/3º são o único ponto de cor da tela — o resto segue a paleta. */
.podio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 22px;
}
.podio:empty { display: none; }
.podio-card {
  position: relative; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 22px 16px 18px; text-align: center;
  box-shadow: var(--sombra);
}
.podio-card--0 { border-top: 3px solid #d4a017; }
.podio-card--1 { border-top: 3px solid #9aa4ad; }
.podio-card--2 { border-top: 3px solid #b4794a; }
.podio-pos {
  position: absolute; top: 12px; left: 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  color: var(--cinza-suave);
}
.podio-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--verde-suave); color: var(--verde-escuro);
  font-size: 15px; font-weight: 800; letter-spacing: .5px;
}
.podio-card--0 .podio-avatar { background: #fdf3d9; color: #7a5c05; }
.podio-nome {
  font-weight: 700; color: var(--preto); margin-top: 10px; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podio-pontos {
  font-size: 26px; font-weight: 800; color: var(--preto); margin-top: 6px;
  line-height: 1.1;
}
.podio-tarefas { font-size: 12px; color: var(--cinza-suave); margin-top: 2px; }
body.escuro .podio-nome, body.escuro .podio-pontos { color: #eef4f1; }
body.escuro .podio-avatar { background: #1c2a24; color: #7fe0b4; }

/* Ranking: uma linha por pessoa, todas as barras na mesma escala. */
.rank-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: 10px;
  border-bottom: 1px solid #eef2f0;
}
.rank-linha:last-child { border-bottom: 0; }
/* a linha de quem está usando o sistema fica destacada */
.rank-linha--eu { background: var(--verde-suave); }
body.escuro .rank-linha--eu { background: #14231d; }
body.escuro .rank-linha { border-color: #262b33; }
.rank-pos {
  font-weight: 800; color: var(--cinza-suave); width: 26px; flex-shrink: 0;
  font-size: 13px;
}
.rank-pos--topo { color: var(--preto); }
body.escuro .rank-pos--topo { color: #eef4f1; }
.rank-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: #eef2f0; color: var(--cinza-texto);
  font-size: 12px; font-weight: 700;
}
body.escuro .rank-avatar { background: #262b33; color: #cfd7e0; }
.rank-nome { font-weight: 600; color: var(--preto); }
body.escuro .rank-nome { color: #eef4f1; }
.rank-barra {
  position: relative; flex: 1; height: 9px; background: #eef2f0;
  border-radius: 20px; overflow: visible;
}
body.escuro .rank-barra { background: #262b33; }
.rank-barra__fill {
  height: 100%; background: var(--verde); border-radius: 20px;
  transition: width .25s ease;
}
/* risquinho que marca onde fica a meta do mês */
.rank-barra__meta {
  position: absolute; top: -3px; width: 2px; height: 15px;
  background: var(--preto); border-radius: 2px; opacity: .45;
}
body.escuro .rank-barra__meta { background: #eef4f1; }
.rank-numeros {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.25; flex-shrink: 0; min-width: 74px;
}
.rank-numeros strong { font-size: 16px; font-weight: 800; color: var(--preto); }
body.escuro .rank-numeros strong { color: #eef4f1; }
.rank-numeros span { font-size: 11.5px; color: var(--cinza-suave); }

/* Estado vazio da tela (nada concluído no período) */
.prod-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 34px 20px; color: var(--cinza-suave);
}
.prod-vazio strong { font-size: 14.5px; color: var(--preto); }
body.escuro .prod-vazio strong { color: #eef4f1; }
.prod-vazio span { font-size: 13px; max-width: 380px; line-height: 1.5; }
.prod-vazio__icone { color: var(--cinza-suave); opacity: .5; }
.prod-vazio__icone svg { width: 30px; height: 30px; }

/* "Como a pontuação é calculada": fica fora do caminho, mas à mão. */
.prod-ajuda { margin-top: 16px; border-top: 1px solid var(--borda); padding-top: 12px; }
.prod-ajuda summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600;
  color: var(--cinza-suave); list-style: none;
}
.prod-ajuda summary::-webkit-details-marker { display: none; }
.prod-ajuda summary::before { content: "+ "; font-weight: 700; }
.prod-ajuda[open] summary::before { content: "– "; }
.prod-ajuda p {
  margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--cinza-texto);
  max-width: 640px;
}

/* Tabela dos 6 meses: número em ficha, para o olho achar o que importa. */
.tabela--prod th.prod-col, .tabela--prod td.prod-col { text-align: center; }
.prod-col em { font-style: normal; font-weight: 400; color: var(--cinza-suave); }
.prod-col--atual { color: var(--preto); }
body.escuro .prod-col--atual { color: #eef4f1; }
.prod-pessoa { display: inline-flex; align-items: center; gap: 9px; }
.prod-valor {
  display: inline-block; min-width: 38px; padding: 4px 9px; border-radius: 20px;
  background: #eef2f0; color: var(--cinza-texto);
  font-size: 13px; font-weight: 700;
}
.prod-valor--zero { background: transparent; color: var(--cinza-suave); font-weight: 400; }
.prod-valor--ok { background: var(--verde-suave); color: var(--verde-escuro); }
.prod-valor--atual { outline: 2px solid var(--preto); outline-offset: 1px; }
body.escuro .prod-valor { background: #262b33; color: #cfd7e0; }
body.escuro .prod-valor--ok { background: #14231d; color: #7fe0b4; }
body.escuro .prod-valor--atual { outline-color: #eef4f1; }
.prod-meta-num { font-size: 13px; font-weight: 700; color: var(--cinza-suave); }

/* ==== MODO ESCURO ========================================================= */
body.escuro {
  --fundo: #0f1216;
  --cartao: #171b21;
  --borda: #2a2f38;
  --cinza-texto: #dbdee4;
  --cinza-suave: #8b929d;
  /* --preto NÃO muda aqui de propósito: além de texto, ele é usado como
     FUNDO em vários lugares (botões de ícone, marcadores, pontos da linha
     do tempo). Quem precisa clarear tem regra própria em body.escuro. */
  --verde: #059669;        /* esmeralda escuro também no tema escuro */
  --verde-escuro: #34d399; /* verde para TEXTO no escuro (9,6:1) */
  --verde-suave: #0c211a;  /* fundo verde tênue, versão escura */
  --lateral-fundo: #14181d;
  --lateral-texto: #e9ebef;
  --lateral-suave: #9aa1ac;
  --lateral-hover: #1e242b;
  --lateral-borda: #262b33;
}
body.escuro .cabecalho h1,
body.escuro .bloco h2,
body.escuro .bloco__cabecalho h2,
body.escuro .cartao__numero,
body.escuro .agenda-titulo-mes,
body.escuro .busca-grupo h2,
body.escuro .busca-item__txt strong,
body.escuro .valor-celula,
body.escuro .ficha-item strong,
body.escuro .kanban-card__titulo { color: #eef4f1; }
body.escuro .botao { background: #21262e; color: var(--cinza-texto); border-color: var(--borda); }
body.escuro .botao--principal { background: var(--verde); color: var(--sobre-verde); }
body.escuro .botao--principal:hover { background: #10b981; color: var(--sobre-verde); }
body.escuro .marcador.marcado { color: var(--sobre-verde); }
/* Chips de filtro: no claro o ativo é preto sobre branco; aqui o preto some
   contra o cartão escuro, então o ativo INVERTE (claro sobre escuro). */
body.escuro .chip { background: #171b21; color: var(--cinza-suave); border-color: var(--borda); }
body.escuro .chip:hover { border-color: var(--cinza-suave); }
body.escuro .chip.ativo { background: #eef2f7; color: #14171c; border-color: #eef2f7; }
body.escuro .marcador { background: #21262e; border-color: #3a414c; }
/* item ativo do menu: mesmo desenho do modo claro, com o verde em cima do escuro */
body.escuro .menu__item.ativo { background: var(--verde-suave); color: #eef4f1; }
body.escuro .menu__item.ativo .menu__icone { color: var(--verde); }
body.escuro .busca, body.escuro .campo input,
body.escuro .campo select, body.escuro .campo textarea {
  background: #10151b; color: var(--cinza-texto); border-color: var(--borda);
}
body.escuro .tabela th { border-color: var(--borda); }
body.escuro .tabela td { border-color: #2a2f38; }
body.escuro .tabela tbody tr:hover { background: #1e242b; }
body.escuro .modal__caixa, body.escuro .modal__cabecalho { background: #171b21; }
body.escuro .kanban-coluna { background: #12171d; }
body.escuro .kanban-card { background: #1e232a; border-color: var(--borda); }
body.escuro .cal-dia { background: #12171d; border-color: var(--borda); }
body.escuro .cal-dia--fora { background: #0c0f13; }
body.escuro .acao-linha:hover { background: #2a2f38; color: #fff; }
body.escuro .google-link input { background: #10151b; color: var(--cinza-suave); }
body.escuro .barra-h__trilho, body.escuro .rank-barra { background: #12171d; }
body.escuro .barra-h__val, body.escuro .podio-nome, body.escuro .rank-nome { color: #eef2f7; }
body.escuro .podio-card { background: #171b21; }
body.escuro .rank-linha { border-color: #2a2f38; }

/* ---- Toques finais de design --------------------------------------------- */
.cartao { transition: transform .16s ease, box-shadow .16s ease; }
.cartao:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(27, 37, 50, .07), 0 14px 34px rgba(27, 37, 50, .09);
}
.marca__texto strong { font-size: 16.5px; }
.bloco { border-radius: 14px; }
/* barra de rolagem geral discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cdd5df; border-radius: 20px; border: 2px solid var(--fundo); }
::-webkit-scrollbar-thumb:hover { background: #b6c0cc; }
body.escuro ::-webkit-scrollbar-thumb { background: #39404a; border-color: var(--fundo); }

/* ---- Painel estilo AdvBox: 4 cards, grade, atividades, mini-calendário ---- */
.cartoes--4 { grid-template-columns: repeat(4, 1fr); }
.cartao__ref { display: block; margin-top: 4px; font-size: 11.5px; color: var(--cinza-suave); }

.painel-grade {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; margin-bottom: 26px;
  align-items: start;
}
.painel-grade .bloco { min-height: 220px; }
.botao--mini { padding: 4px 10px; font-size: 15px; line-height: 1; }

/* Atividades concluídas (lista) */
.ativ-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid #eef2f0;
}
.ativ-linha:last-child { border-bottom: 0; }
.ativ-nome {
  font-size: 13.5px; color: var(--cinza-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ativ-cont {
  font-size: 13px; font-weight: 700; color: var(--preto);
  background: #eef2f0; border-radius: 20px; padding: 1px 10px; flex-shrink: 0;
}

/* Mini-calendário */
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mini-cal__cab {
  text-align: center; font-size: 10.5px; font-weight: 700; color: var(--cinza-suave);
  padding: 2px 0; text-transform: uppercase;
}
.mini-cal__dia {
  position: relative; min-height: 34px; border-radius: 7px; font-size: 12px;
  color: var(--cinza-texto); display: flex; align-items: flex-start;
  justify-content: center; padding-top: 4px; background: #fbfcfb;
}
.mini-cal__dia--fora { background: transparent; }
.mini-cal__dia--hoje { outline: 1.5px solid var(--preto); font-weight: 700; }
.mini-cal__badge {
  position: absolute; bottom: 3px; right: 3px; min-width: 15px; height: 15px;
  background: var(--preto); color: #fff; border-radius: 20px; font-size: 9.5px;
  font-style: normal; font-weight: 700; display: grid; place-items: center; padding: 0 3px;
}

/* Compromissos (lista de tarefas no painel) */
.compromisso {
  display: flex; align-items: center; gap: 12px; padding: 12px 6px;
  border-bottom: 1px solid #eef2f0; cursor: pointer; transition: background .12s;
}
.compromisso:last-child { border-bottom: 0; }
.compromisso:hover { background: #f8faf9; }
.compromisso__check { width: 20px; height: 20px; flex-shrink: 0; }
.compromisso__estrela { color: #c9cfd8; display: inline-flex; flex-shrink: 0; }
.compromisso__estrela svg { width: 18px; height: 18px; }
.compromisso__estrela.on { color: var(--ambar); }
.compromisso__prio { flex-shrink: 0; }
.compromisso__txt { flex: 1; min-width: 0; }
.compromisso__txt strong {
  display: block; color: var(--preto); font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compromisso__txt span { font-size: 12.5px; color: var(--cinza-suave); }
.compromisso__prazo { font-size: 12.5px; color: var(--cinza-suave); white-space: nowrap; flex-shrink: 0; }
.compromisso__prazo--atraso { color: var(--vermelho); font-weight: 600; }
.compromisso__prazo--hoje { color: #8a5600; font-weight: 600; }
.avatar-mini--vazio { background: #eef2f0; color: var(--cinza-suave); }

/* ---- Tela de detalhe da tarefa (imagem 3) -------------------------------- */
/* Sobreposição: escurece a página (que continua visível atrás) e centraliza
   o painel de detalhe por cima dela. */
.detalhe {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(12, 17, 14, .55); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 26px;
  overflow-y: auto;
}
.detalhe__painel {
  background: var(--fundo); width: 100%; max-width: 1040px; max-height: 90vh;
  border-radius: 16px; overflow-y: auto; box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column;
}
.detalhe__topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--borda);
  background: var(--cartao); position: sticky; top: 0; z-index: 2;
  border-radius: 16px 16px 0 0;
}
.detalhe__acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; }
.det-btn {
  border: 1px solid var(--borda); background: var(--cartao); color: var(--cinza-texto);
  padding: 8px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.det-btn:hover { border-color: var(--cinza-suave); }
.det-btn--perigo { color: var(--vermelho); border-color: #f3d0d1; }
.det-btn--perigo:hover { background: #fdeaea; }
.detalhe__fechar { border: 0; background: transparent; font-size: 24px; cursor: pointer; color: var(--cinza-suave); line-height: 1; }
.detalhe__fechar:hover { color: var(--preto); }
.detalhe__corpo {
  display: flex; gap: 34px; padding: 30px 34px; max-width: 1040px; width: 100%;
  margin: 0 auto; flex-wrap: wrap;
}
.detalhe__principal { flex: 1 1 420px; min-width: 0; }
.detalhe__lateral { width: 300px; flex-shrink: 0; }

.det-titulo-linha { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.det-titulo { font-size: 24px; color: var(--preto); font-weight: 700; }
.det-pts {
  background: var(--preto); color: #fff; border-radius: 20px; padding: 3px 12px;
  font-size: 12.5px; font-weight: 700; flex-shrink: 0;
}
.det-desc {
  font-size: 13.5px; color: var(--cinza-suave); text-transform: uppercase;
  letter-spacing: .3px; margin-bottom: 20px;
}
.det-campos { display: grid; gap: 16px; margin-top: 18px; }
.det-campo { display: flex; align-items: center; gap: 14px; }
.det-rot { width: 130px; flex-shrink: 0; font-size: 13px; color: var(--cinza-suave); }
.det-val { font-size: 14px; color: var(--cinza-texto); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.det-val .avatar-mini { width: 24px; height: 24px; }
.det-data--atraso { color: var(--vermelho); }
.det-importante {
  font-size: 12px; font-weight: 700; color: var(--ambar);
  border: 1px solid var(--ambar); border-radius: 20px; padding: 1px 9px;
}

.det-bloco { padding: 14px 0; border-bottom: 1px solid var(--borda); }
.det-bloco:first-child { padding-top: 0; }
.det-bloco:last-child { border-bottom: 0; }
.det-bloco .det-rot { width: auto; display: block; margin-bottom: 5px; }
.det-bloco strong { display: block; font-size: 14.5px; color: var(--preto); }
.det-tel { display: block; font-size: 13px; color: var(--cinza-suave); margin-top: 2px; }
.det-link {
  border: 0; background: transparent; color: var(--preto); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 4px 0; text-decoration: underline;
}

/* Modo escuro dos novos elementos */
body.escuro .ativ-linha, body.escuro .compromisso { border-color: #2a2f38; }
body.escuro .ativ-cont { background: #12171d; color: #eef4f1; }
body.escuro .compromisso:hover { background: #1e242b; }
body.escuro .mini-cal__dia { background: #12171d; }
body.escuro .mini-cal__dia--fora { background: transparent; }
body.escuro .mini-cal__dia--hoje { outline-color: #eef0f3; }
body.escuro .mini-cal__badge, body.escuro .det-pts { background: #eef0f3; color: #14171c; }
body.escuro .detalhe__topo, body.escuro .det-btn { background: #171b21; }
body.escuro .det-titulo, body.escuro .det-bloco strong, body.escuro .compromisso__txt strong { color: #eef4f1; }
body.escuro .avatar-mini--vazio { background: #12171d; }

/* ---- Taskscore / variação nos cards do painel ---------------------------- */
/* Número e selo de variação na mesma linha (print 8) */
.cartao__linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.cartao__linha .cartao__numero { margin-top: 0; }
/* Selo verde com a seta e o percentual (prints 9 e 10) */
.cartao__delta {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--verde-suave); color: var(--verde-escuro);
  border-radius: 20px; padding: 3px 9px; font-size: 12px; font-weight: 700;
  white-space: nowrap;
}
.cartao__delta svg { width: 13px; height: 13px; }
.cartao__delta--down { background: #fdeaea; color: var(--vermelho); }
/* Link de ação no pé do cartão ("Mostrar tarefas", "Configurar meta") */
.cartao__acao {
  display: block; margin-top: 6px; padding: 0; border: 0; background: transparent;
  color: var(--verde-escuro); font-family: inherit; font-size: 11.5px;
  font-weight: 600; cursor: pointer; text-align: left;
}
.cartao__acao:hover { text-decoration: underline; }

/* Abas do painel (print 8) */
.painel-abas {
  display: flex; gap: 4px; margin-bottom: 18px; overflow-x: auto;
  border-bottom: 1px solid var(--borda);
}
.painel-aba {
  border: 0; background: transparent; color: var(--cinza-suave);
  font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 14px;
  cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color .15s;
}
.painel-aba:hover { color: var(--preto); }
.painel-aba.ativo { color: var(--preto); border-bottom-color: var(--preto); }

/* Seletor de série do Taskscore (Mês atual / Mês passado / Meta) */
.taskscore-opcoes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.taskscore-opcao {
  border: 1px solid var(--borda); background: var(--cartao); color: var(--cinza-suave);
  border-radius: 20px; padding: 5px 12px; font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.taskscore-opcao:hover { border-color: var(--verde); }
.taskscore-opcao.ativo {
  background: var(--verde-suave); border-color: var(--verde); color: var(--verde-escuro);
}

body.escuro .painel-aba.ativo { color: #eef4f1; border-bottom-color: #eef4f1; }
body.escuro .taskscore-opcao { background: #171b21; }
.taskscore-total { font-size: 13px; color: var(--cinza-suave); font-weight: 600; }
#taskscore-barras .barra-h__rot {
  width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 600;
}
#taskscore-barras .barra-h:last-child { margin-bottom: 0; }

/* ---- Ícones do menu (SVG de linha) --------------------------------------- */
.menu__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; opacity: .9;
}
.menu__icone svg { width: 18px; height: 18px; display: block; }
.menu__item.ativo .menu__icone { opacity: 1; }

/* ---- CRM (estilo AdvBox): estatísticas, filtro, abas de fase ------------- */
.crm-stats { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.crm-stat {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  padding: 12px 18px; box-shadow: var(--sombra); min-width: 150px;
}
/* rótulo em cima e número embaixo, como nos cartões do Painel */
.crm-stat span { display: block; font-size: 12.5px; color: var(--cinza-suave); font-weight: 500; }
.crm-stat strong { display: block; font-size: 22px; color: var(--preto); font-weight: 700; margin-top: 2px; }

.crm-barra { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.crm-barra #crm-exportar { margin-left: auto; }
/* Select compacto reaproveitado fora do CRM (ex.: "Próxima viagem") */
.crm-filtro {
  padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--cartao); color: var(--cinza-texto); font-size: 13.5px; font-family: inherit;
}

/* ---- CRM: seletor de colaborador (chip + lista com busca) ---------------- */
.crm-resp { position: relative; display: flex; align-items: center; gap: 4px; }
.crm-resp__chip {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 999px;
  padding: 5px 12px 5px 6px; font-family: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--cinza-texto); min-height: 38px;
}
.crm-resp__chip:hover { border-color: var(--verde); }
.crm-resp--ativo .crm-resp__chip { border-color: var(--verde); background: var(--verde-suave); }
.crm-resp__nome { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-resp__seta { width: 15px; height: 15px; color: var(--cinza-suave); flex-shrink: 0; }
.crm-resp__limpar {
  border: 0; background: transparent; cursor: pointer; color: var(--cinza-suave);
  font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.crm-resp__limpar:hover { color: var(--vermelho); background: #f4f6f5; }
.crm-resp__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 44; width: 300px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16); padding: 8px; overflow: hidden;
}
.crm-resp__busca {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--fundo); color: var(--cinza-texto); font-size: 13.5px;
  font-family: inherit; margin-bottom: 6px;
}
.crm-resp__itens { max-height: 268px; overflow-y: auto; }
.crm-resp__item {
  display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  border: 0; background: transparent; border-radius: 8px; padding: 8px 9px;
  font-family: inherit; font-size: 13.5px; color: var(--cinza-texto); text-align: left;
}
.crm-resp__item:hover { background: var(--verde-suave); }
.crm-resp__item.ativo { background: var(--verde-suave); font-weight: 700; color: var(--preto); }
.crm-resp__item-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-resp__item-qtd {
  background: #eef2f0; color: var(--cinza-suave); border-radius: 20px;
  font-size: 11.5px; padding: 1px 8px; font-weight: 700; flex-shrink: 0;
}
.crm-resp__vazio { color: var(--cinza-suave); font-size: 13px; padding: 12px 9px; margin: 0; }

.crm-fases {
  display: flex; gap: 2px; margin-bottom: 18px; overflow-x: auto;
  border-bottom: 1px solid var(--borda);
}
.crm-fase {
  border: 0; background: transparent; color: var(--cinza-suave);
  font-size: 14px; font-weight: 600; padding: 10px 14px; cursor: pointer;
  white-space: nowrap; border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 7px; transition: color .15s;
}
.crm-fase:hover { color: var(--preto); }
.crm-fase.ativo { color: var(--preto); border-bottom-color: var(--preto); }
.crm-fase__cont {
  background: #eef2f0; color: var(--cinza-suave); border-radius: 20px;
  font-size: 11.5px; padding: 1px 8px; font-weight: 700;
}
.crm-fase.ativo .crm-fase__cont { background: var(--preto); color: #fff; }

/* Card do CRM: topo com avatar, subtítulo (área) e rodapé */
.kanban-card__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.avatar-mini {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--preto); color: #fff; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
}
.kanban-card__sub { color: var(--cinza-suave); font-size: 12px; }
.kanban-card__rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.kanban-card__prox { font-size: 11.5px; color: var(--cinza-suave); font-weight: 600; }
.kanban-card__prox--atraso { color: var(--vermelho); }
/* Marca no rodapé do card: processo do escritório x caso ainda sem processo */
.mini-tag--proc { background: var(--verde-suave); color: var(--verde-escuro); }
.mini-tag--caso { background: #eef2f0; color: var(--cinza-suave); }
/* Fundo claro de propósito, inclusive no modo escuro: --vermelho é fechado e
   só lê bem sobre claro. É o mesmo padrão de .etq--vencido e .etq--atrasado. */
.kanban-card__parado {
  font-size: 11px; font-weight: 700; color: var(--vermelho);
  background: #fdeaea; border-radius: 20px; padding: 1px 8px; white-space: nowrap;
}

body.escuro .crm-stat { background: #171b21; }
body.escuro .crm-stat strong { color: #eef4f1; }
body.escuro .crm-resp__chip { background: #171b21; }
body.escuro .crm-resp__menu { background: #171b21; }
body.escuro .crm-resp__busca { background: #10151b; color: var(--cinza-texto); }
body.escuro .crm-resp__limpar:hover { background: #12171d; }
body.escuro .crm-resp__item-qtd { background: #12171d; }
body.escuro .mini-tag--caso { background: #12171d; }
/* --preto não clareia no escuro (é usado como fundo em vários lugares), então
   o item selecionado precisa da própria cor de texto — igual .crm-fase.ativo */
body.escuro .crm-resp__item.ativo { color: #eef4f1; }
body.escuro .crm-fases { border-color: var(--borda); }
body.escuro .crm-fase.ativo { color: #eef4f1; border-bottom-color: #eef4f1; }
body.escuro .crm-fase__cont { background: #12171d; }
body.escuro .crm-fase.ativo .crm-fase__cont { background: #eef0f3; color: #14171c; }
body.escuro .avatar-mini { background: #eef0f3; color: #14171c; }

/* ---- Barra superior: Adicionar + equipe ---------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px;
}
/* a busca fica à esquerda; equipe e "Adicionar" são empurrados para a direita */
.topbar__equipe { display: flex; align-items: center; margin-left: auto; }
.topbar__avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--preto); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  border: 2px solid var(--fundo); margin-left: -8px;
}
.topbar__avatar:first-child { margin-left: 0; }
.topbar__avatar--mais { background: #9aa1ac; }
.topbar__add { position: relative; }
.topbar__add-btn { display: inline-flex; align-items: center; gap: 6px; }
.add-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 6px; min-width: 200px;
}
.add-menu button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--cinza-texto); font-size: 14px; padding: 10px 12px; border-radius: 7px; cursor: pointer;
}
.add-menu button:hover { background: var(--verde-suave); }

/* ---- Compromissos: toolbar, dia selecionado, grupos ---------------------- */
.compromissos-acoes { display: flex; gap: 8px; }
.dia-selecionado {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--verde-suave); border-radius: 9px; padding: 9px 14px; margin-bottom: 14px;
  font-size: 13.5px; font-weight: 600; color: var(--preto);
}
.comp-grupo { margin-bottom: 14px; }
.comp-grupo__tit {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: var(--cinza-suave); text-transform: uppercase; letter-spacing: .4px;
  padding: 8px 6px; border-bottom: 1px solid var(--borda); margin-bottom: 2px;
}
.comp-grupo__tit span {
  background: #eef2f0; color: var(--cinza-suave); border-radius: 20px;
  padding: 0 8px; font-size: 11.5px;
}
.compromisso__marca-int {
  flex-shrink: 0; width: 26px; height: 20px; border-radius: 5px; background: var(--preto);
  color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 800;
}

/* dia clicável no mini-calendário */
.mini-cal__dia { cursor: pointer; }
.mini-cal__dia--fora { cursor: default; }
.mini-cal__dia--sel { background: var(--preto); color: #fff; }
.mini-cal__dia--sel .mini-cal__badge { background: #fff; color: var(--preto); }

/* ---- Painel "Filtrar dados" (slide-over) --------------------------------- */
.filtro-scrim { position: fixed; inset: 0; background: rgba(12,17,14,.45); z-index: 54; }
.filtro-painel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 370px; max-width: 92vw; z-index: 55;
  background: var(--cartao); box-shadow: -12px 0 40px rgba(0,0,0,.22);
  display: flex; flex-direction: column; animation: surgir-dir .2s ease;
}
@keyframes surgir-dir { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } }
.filtro-painel__topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--borda);
}
.filtro-painel__topo h2 { font-size: 18px; color: var(--preto); }
/* align-content: start — sem ele, o grid estica as linhas para preencher a
   altura do painel e abre vazios enormes entre os grupos de campos */
.filtro-painel__corpo {
  padding: 20px 22px; overflow-y: auto; flex: 1;
  display: grid; gap: 16px; align-content: start;
}
.filtro-checks { display: flex; flex-direction: column; gap: 8px; }
.filtro-checks label, .filtro-futuras {
  display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cinza-texto); font-weight: 500;
}
.filtro-painel__rodape {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-top: 1px solid var(--borda);
}

/* Variante "janela": centrada e larga, como o Filtrar dados do AdvBox. Numa
   gaveta de 370px os campos ficam espremidos um em cima do outro. */
.filtro-painel--janela {
  top: 50%; right: auto; left: 50%; transform: translate(-50%, -50%);
  height: auto; max-height: 88vh; width: min(940px, 94vw); max-width: 94vw;
  border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  animation: surgir-centro .18s ease;
}
@keyframes surgir-centro {
  from { transform: translate(-50%, -48%); opacity: .7; }
  to   { transform: translate(-50%, -50%); opacity: 1; }
}
.filtro-painel--janela .filtro-painel__topo { padding: 20px 28px; }
.filtro-painel--janela .filtro-painel__corpo { padding: 24px 28px; gap: 22px; }
.filtro-painel--janela .filtro-painel__rodape { padding: 16px 28px; }
.filtro-grade {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 20px;
}
.filtro-secao { border-top: 1px solid var(--borda); padding-top: 18px; }
.filtro-secao h3 {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--cinza-suave); margin-bottom: 12px;
}
.filtro-checks--linha { flex-direction: row; flex-wrap: wrap; gap: 12px 26px; }
@media (max-width: 860px) {
  .filtro-grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .filtro-grade { grid-template-columns: 1fr; }
}

/* ---- Formulário: seções e linha tripla ----------------------------------- */
.form-secao {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--cinza-suave); border-bottom: 1px solid var(--borda);
  padding-bottom: 6px; margin-top: 6px;
}
/* Seção com título e campos dentro (painel do processo): vira um cartão, para
   ficar claro onde uma seção termina e a outra começa. O :has(h3) separa esse
   caso do rótulo simples ("Dados pessoais" no cadastro de cliente), que sem
   isso virava uma caixa vazia parecendo um campo. */
.cli-form .form-secao:has(h3) {
  display: grid; gap: 14px; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--cartao); padding: 16px 18px; margin: 0;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.cli-form .form-secao h3 {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--cinza-suave); border-bottom: 1px solid var(--borda); padding-bottom: 8px;
}
.form-secao__nota {
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--cinza-suave);
  opacity: .8;
}
.form-dica { font-size: 12.5px; color: var(--cinza-suave); line-height: 1.5; margin: 0; }
/* Bloco que só aparece quando o caso vira judicial. */
.form-condicional {
  display: grid; gap: 14px; border-left: 2px solid var(--verde);
  padding-left: 14px; margin-left: 2px;
}
.campo--tripla { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* Sem isto, um input dentro de uma coluna de grade usa a largura mínima
   própria (~180px) e estoura o painel estreito, cortando os campos à direita. */
.campo { min-width: 0; }
.campo input, .campo select, .campo textarea { width: 100%; min-width: 0; }
/* Caixa de marcar não é campo de texto: esticada a 100% ela empurra o rótulo
   para a outra ponta da linha e o filtro fica desalinhado. */
.campo input[type="checkbox"], .campo input[type="radio"] { width: auto; flex: none; }
.detalhe__painel--estreito .campo--tripla { grid-template-columns: 1fr 1fr; }

body.escuro .cli-form .form-secao:has(h3) { background: #171b21; }

body.escuro .add-menu button:hover, body.escuro .dia-selecionado { background: #1e242b; }
body.escuro .comp-grupo__tit span { background: #12171d; }
body.escuro .filtro-painel, body.escuro .filtro-painel__topo h2 { background: #171b21; }
body.escuro .filtro-painel__topo h2 { background: transparent; color: #eef4f1; }
body.escuro .topbar__avatar { border-color: var(--fundo); }

/* ---- Aba de atividade da tarefa (comentários + histórico) ---------------- */
.det-atividade { padding: 0 34px 30px; max-width: 1040px; width: 100%; margin: 0 auto; }
.det-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 18px; }
.det-aba {
  border: 0; background: transparent; color: var(--cinza-suave); cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 10px 14px; border-bottom: 2px solid transparent;
}
.det-aba:hover { color: var(--preto); }
.det-aba.ativo { color: var(--preto); border-bottom-color: var(--preto); }

.composer {
  border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px;
  background: var(--cartao); margin-bottom: 22px;
}
.composer__topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.composer__topo .det-rot { width: auto; }
.composer__resp { font-size: 13.5px; font-weight: 600; color: var(--cinza-texto); }
.composer__tipo {
  margin-left: auto; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--cartao); color: var(--cinza-texto); font-size: 13.5px; font-family: inherit;
}
.composer__texto {
  width: 100%; min-height: 80px; resize: vertical; padding: 11px 12px;
  border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; font-family: inherit;
  color: var(--cinza-texto); background: #fbfcfb;
}
.composer__texto:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(5, 150, 105, .22); }
.composer__acoes { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.composer__campo { font-size: 12.5px; color: var(--cinza-suave); display: flex; align-items: center; gap: 6px; }
.composer__campo input {
  padding: 7px 10px; border: 1px solid var(--borda); border-radius: 8px;
  font-size: 13px; font-family: inherit; color: var(--cinza-texto); background: #fbfcfb;
}

.hist__titulo { font-size: 14px; font-weight: 700; color: var(--preto); margin-bottom: 12px; }
.hist__item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eef2f0; }
.hist__item:last-child { border-bottom: 0; }
.hist__corpo { flex: 1; min-width: 0; }
.hist__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist__cab strong { font-size: 13.5px; color: var(--preto); }
.hist__data { font-size: 12px; color: var(--cinza-suave); margin-left: auto; }
.hist__texto { font-size: 13.5px; color: var(--cinza-texto); margin-top: 5px; white-space: pre-wrap; }
.hist__datas { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--cinza-suave); }
.hist__excluir {
  border: 0; background: transparent; color: var(--cinza-suave); cursor: pointer;
  font-size: 12px; padding: 4px 0; margin-top: 4px;
}
.hist__excluir:hover { color: var(--vermelho); }

body.escuro .composer, body.escuro .composer__tipo { background: #171b21; }
body.escuro .composer__texto, body.escuro .composer__campo input { background: #10151b; color: var(--cinza-texto); border-color: var(--borda); }
body.escuro .det-abas { border-color: var(--borda); }
body.escuro .det-aba.ativo { color: #eef4f1; border-bottom-color: #eef4f1; }
body.escuro .hist__item { border-color: #2a2f38; }
body.escuro .hist__titulo, body.escuro .hist__cab strong { color: #eef4f1; }

/* ---- PROSPECÇÃO ---------------------------------------------------------- */
/* A tela não tem título nem subtítulo: as abas e as ações dividem a primeira
   linha, e o conteúdo começa logo abaixo. */
/* As abas ficam coladas na linha de baixo (é o traço da aba ativa que precisa
   encostar nela) e os botões ficam centrados na mesma altura das abas — antes
   eles pareciam levantados um dedo acima do resto da linha. */
.prosp-topo {
  display: flex; align-items: stretch; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--borda);
  margin-bottom: 14px;
}
.prosp-topo .prosp-abas { border-bottom: 0; margin-bottom: 0; align-items: flex-end; }
.prosp-topo__acoes {
  display: flex; gap: 8px; flex-shrink: 0; align-items: center;
  padding-bottom: 6px;
}
.prosp-topo__acoes .botao { padding: 8px 14px; font-size: 13.5px; }

/* Placar do dia: uma linha, no lugar dos quatro cartões antigos. */
.hoje-placar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 12px 18px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.hoje-placar__meta { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.hoje-placar__meta strong { color: var(--preto); font-size: 15px; }
.hoje-placar__meta span { color: var(--cinza-suave); }
.bolinha {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--borda); display: inline-block;
}
.bolinha--ok { background: var(--verde); border-color: var(--verde); }
.hoje-placar__nums {
  display: flex; gap: 20px; flex-wrap: wrap; font-size: 12.5px;
  color: var(--cinza-suave);
}
.hoje-placar__nums strong { color: var(--preto); font-size: 14px; }
.hoje-placar__atraso strong { color: var(--vermelho); }

/* Cartão da pessoa da vez: nome, gancho, texto pronto e as quatro ações. */
.alvo { border-left: 3px solid var(--verde); }
.alvo__cab { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.alvo__cab strong { font-size: 19px; color: var(--preto); font-family: var(--fonte-titulo); }
.alvo__pos {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--cinza-suave); background: #eef2f0; border-radius: 20px; padding: 2px 10px;
}
.alvo__meta {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px;
  color: var(--cinza-suave); margin-bottom: 12px;
}
.alvo__gancho {
  font-size: 14px; color: var(--cinza-texto); font-style: italic;
  border-left: 2px solid var(--verde); padding: 2px 0 2px 11px; margin-bottom: 14px;
}
.alvo__gancho--falta { font-style: normal; border-left-color: var(--ambar); color: var(--cinza-suave); }
.alvo__script-cab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--cinza-suave);
}
.alvo__script-cab strong { color: var(--preto); }
.alvo__acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.alvo__acoes .botao { text-decoration: none; }
.alvo__atalhos { margin-top: 12px; font-size: 11.5px; color: var(--cinza-suave); }
kbd {
  font-family: var(--fonte); font-size: 11px; font-weight: 700;
  border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 5px; background: #fbfcfb; color: var(--cinza-texto);
}
.atalhos-lista { display: grid; gap: 9px; font-size: 13.5px; }
.atalhos-lista div { display: flex; gap: 10px; align-items: center; }
.atalhos-lista span { color: var(--cinza-suave); }

/* Bloco que cobra algo de você (retornos devidos). */
.bloco--cobranca { border-left: 3px solid var(--ambar); }

/* Contador do que falta hoje, na própria aba. */
.prosp-aba__n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 20px; background: var(--verde);
  color: var(--sobre-verde); font-size: 11px; font-weight: 700;
  margin-left: 5px; vertical-align: middle;
}

/* Lembrete: você abriu o WhatsApp e não voltou para registrar. */
.lembrete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; background: #fdf3e0;
  border: 1px solid #f0dcb0; border-radius: var(--raio);
  padding: 13px 16px; margin-bottom: 16px;
}
.lembrete__txt { font-size: 13.5px; color: #6b4a08; line-height: 1.5; flex: 1; min-width: 220px; }
.lembrete__txt strong { color: #4a3205; }
.lembrete__acoes { display: flex; gap: 7px; flex-wrap: wrap; }

/* Primeira vez: a base vazia explica por onde começar. */
.vazio-inicio { text-align: center; padding: 22px 10px 8px; }
.vazio-inicio strong {
  display: block; font-size: 17px; color: var(--preto);
  font-family: var(--fonte-titulo); margin-bottom: 8px;
}
.vazio-inicio p {
  font-size: 13.5px; color: var(--cinza-suave); line-height: 1.6;
  max-width: 460px; margin: 0 auto 18px;
}
.vazio-inicio__acoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.campo-ajuda { font-size: 12px; color: var(--cinza-suave); line-height: 1.45; }

body.escuro .lembrete { background: #2a2210; border-color: #453718; }
body.escuro .lembrete__txt { color: #e8d5a8; }
body.escuro .lembrete__txt strong { color: #f5ead0; }
body.escuro .vazio-inicio strong { color: #eef4f1; }

/* Bloco dobrável: "ver o resto da fila", roteiro da viagem. */
.bloco--dobra > summary {
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--preto);
  display: flex; gap: 10px; align-items: center;
}
.bloco--dobra > summary::marker { color: var(--cinza-suave); }
.bloco--dobra[open] > summary { margin-bottom: 12px; }
.form-dobra > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cinza-suave);
  padding: 4px 0;
}
.form-dobra[open] { display: grid; gap: 14px; }
.campo-caixa {
  display: flex; gap: 10px; align-items: center; font-size: 13.5px;
  color: var(--cinza-texto); cursor: pointer;
}
/* Busca dentro do cabeçalho do bloco: não cresce até engolir o resumo que
   fica ao lado dela. */
.busca--inline { margin: 0; flex: 0 1 360px; min-width: 180px; }
.bloco__cabecalho { gap: 14px; flex-wrap: wrap; }
.bloco__cabecalho .taskscore-total { white-space: nowrap; }
.link-botao {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--verde-escuro);
  text-decoration: underline; text-align: left;
}
.link-botao:hover { color: var(--preto); }

/* Tabela de pessoas.
   Duas decisões que mudam a aparência da lista inteira:
   1. LARGURA FIXA por coluna. Sem ela o navegador entrega a sobra da linha
      toda para a primeira coluna (o nome ficava com 800px e o resto dos dados
      só aparecia rolando a tabela para o lado).
   2. UMA LINHA POR CÉLULA. Antes, "Já me indicou" e "João Pessoa-PB" quebravam
      em duas linhas e um gancho longo virava um parágrafo dentro da célula —
      cada linha da tabela ficava com uma altura diferente e a lista parecia
      desalinhada. Agora o que não cabe é cortado com reticências, o texto
      inteiro fica no title e a linha tem sempre a mesma altura. */
#tabela-prospeccao { table-layout: fixed; min-width: 920px; }
#tabela-prospeccao th:nth-child(1) { width: 23%; }
#tabela-prospeccao th:nth-child(2) { width: 13%; }
#tabela-prospeccao th:nth-child(3) { width: 12%; }
#tabela-prospeccao th:nth-child(4) { width: 13%; }
#tabela-prospeccao th:nth-child(5) { width: 9%;  text-align: center; }
#tabela-prospeccao th:nth-child(6) { width: 13%; text-align: center; }
#tabela-prospeccao th:nth-child(7) { width: 6%;  text-align: center; }
/* 11%: os dois botões da linha precisam de ~121px e a 9% eles estouravam a
   célula, criando uma barra de rolagem horizontal na tabela inteira. */
#tabela-prospeccao th:nth-child(8) { width: 11%; text-align: right; }
#tabela-prospeccao td { vertical-align: middle; padding: 11px 12px; }
/* Colunas de texto: uma linha só, cortada com reticências. */
#tabela-prospeccao td:nth-child(2),
#tabela-prospeccao td:nth-child(3),
#tabela-prospeccao td:nth-child(4) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cel-nome .link-botao { text-decoration: none; display: block; max-width: 100%; }
.cel-nome .link-botao strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cel-nome .link-botao:hover strong { text-decoration: underline; }
.cel-nome strong { color: var(--preto); }
.cel-sub {
  font-size: 12px; color: var(--cinza-suave); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Cadência, próximo contato e indicações: números centralizados, cada um
   ocupando uma linha só, para o olho descer a coluna sem tropeço. */
.cel-curta {
  white-space: nowrap; font-size: 13px; text-align: center;
  line-height: 1.35;
}
.cel-curta > div { margin-top: 3px; }
.cel-num { text-align: center; font-variant-numeric: tabular-nums; }
.cel-acoes { text-align: right; white-space: nowrap; }
.cel-acoes .acao-linha { padding: 5px 9px; }
/* A categoria da pessoa vira etiqueta: alinha com as outras colunas e o
   "viagem" deixa de empurrar o texto para a linha de baixo. */
.cel-tag {
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}

/* Ficha da pessoa (modal aberto pelo nome na tabela). */
.ficha-prosp {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--borda);
}
.ficha-prosp .det-rot { display: block; width: auto; margin-bottom: 2px; }
.ficha-prosp strong { font-size: 14px; color: var(--preto); }
.ficha-prosp__acoes { display: flex; gap: 7px; flex-wrap: wrap; }
.ficha-prosp__acoes .botao { text-decoration: none; }
.ficha-prosp__tit {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--cinza-suave);
  border-bottom: 1px solid var(--borda); padding-bottom: 6px;
}
body.escuro .cel-nome strong, body.escuro .ficha-prosp strong { color: #eef4f1; }
.adiar-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.linha--aberta { background: var(--verde-suave); }

/* Histórico de conversas com uma pessoa (dentro do modal). */
.hist-prosp { display: grid; gap: 12px; max-height: 46vh; overflow-y: auto; }
.hist-prosp__item { border-left: 2px solid var(--borda); padding-left: 11px; }
.hist-prosp__cab { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hist-prosp__item p { font-size: 13px; color: var(--cinza-texto); margin-top: 4px; }
.hist-prosp__passo { color: var(--verde-escuro) !important; font-weight: 600; }

/* ---- "O que dizer" — o banco de scripts ---------------------------------- */
/* Deixou de ser uma gaveta colada na direita e virou um painel centralizado:
   a leitura é o que essa tela faz, e texto corrido longe do centro da tela
   cansa. Largura confortável (760px), altura limitada a 86vh, o conteúdo
   rolando por dentro. */
.gaveta {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, 94vw); max-height: 86vh;
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 16px; box-shadow: 0 28px 70px rgba(20, 23, 28, .28);
  z-index: 60; display: flex; flex-direction: column;
  padding: 20px 24px 0; overflow: hidden;
}
.gaveta-fundo { position: fixed; inset: 0; background: rgba(12, 17, 14, .45); z-index: 55; }
.gaveta__topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--borda);
}
.gaveta__titulo strong {
  display: block; font-size: 18px; color: var(--preto);
  font-family: var(--fonte-titulo);
}
.gaveta__titulo span { font-size: 12.5px; color: var(--cinza-suave); }
.gaveta__fechar {
  border: 0; background: transparent; font-size: 17px; cursor: pointer;
  color: var(--cinza-suave); line-height: 1; padding: 2px 4px;
}
.gaveta__fechar:hover { color: var(--preto); }

/* Barra de busca e filtros. O campo tem altura própria: dentro de um flex em
   coluna, a classe .busca--inline dava 360px de ALTURA ao campo. */
.gaveta__barra { padding: 14px 0 12px; flex-shrink: 0; }
.gaveta__busca {
  width: 100%; height: 40px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--borda); border-radius: 9px;
  font-family: inherit; font-size: 14px; color: var(--cinza-texto);
  background: #fbfcfb;
}
.gaveta__busca:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .22);
}
.gaveta__familias { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.gaveta__familias .chip { font-size: 12.5px; padding: 5px 11px; }
.chip__n {
  font-size: 11px; font-weight: 700; margin-left: 5px; opacity: .65;
}

.gaveta__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 24px; }
.gaveta__familia { margin-bottom: 22px; }
.gaveta__familia h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--preto);
}
.gaveta__familia-n {
  font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--cinza-suave);
  background: #eef2f0; border-radius: 20px; padding: 1px 8px;
}
.gaveta__familia-resumo {
  font-size: 12.5px; color: var(--cinza-suave); line-height: 1.5;
  margin: 4px 0 10px;
}
/* O bloco "para falar com ela hoje", quando a gaveta abre a partir de alguém. */
.gaveta__familia--sugerida {
  background: var(--verde-suave); border-radius: 12px;
  padding: 14px 16px 4px; margin-bottom: 26px;
}
.gaveta__familia--sugerida .sc:first-of-type { border-top: 0; }

.sc { border-top: 1px solid var(--borda); padding: 10px 0; }
.sc > summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: 12px 1fr; gap: 3px 9px;
}
.sc > summary::-webkit-details-marker { display: none; }
.sc__cab { grid-column: 2; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sc__nome { font-size: 14px; font-weight: 600; color: var(--preto); }
/* fechado, o script já diz em que situação serve — é o que permite escolher
   sem precisar abrir um por um */
.sc__quando {
  grid-column: 2; font-size: 12.5px; color: var(--cinza-suave); line-height: 1.45;
}
.sc > summary::before {
  content: "+"; grid-column: 1; grid-row: 1 / span 2;
  color: var(--cinza-suave); font-weight: 700;
}
.sc[open] > summary::before { content: "–"; }
.sc[open] > summary { margin-bottom: 10px; }
.sc__conta { font-size: 11.5px; color: var(--cinza-suave); }
.sc__acoes { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.sc__acoes .botao { text-decoration: none; }
.sc__antigo { font-size: 11px; color: var(--cinza-suave); margin-top: 8px; }

/* Abas de versão: mesma situação, tons diferentes. O contador "2×" avisa que
   a pessoa já ouviu aquela — é o que impede você de repetir sem perceber. */
.sc__versoes { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.sc__versao {
  border: 1px solid var(--borda); background: var(--cartao);
  color: var(--cinza-suave); border-radius: 20px; padding: 5px 12px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.sc__versao:hover { color: var(--preto); border-color: var(--cinza-suave); }
.sc__versao.ativo {
  background: var(--preto); border-color: var(--preto); color: #fff;
}
.sc__usada {
  font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 0 5px;
  background: rgba(20, 23, 28, .1);
}
.sc__versao.ativo .sc__usada { background: rgba(255, 255, 255, .22); }

/* Versão do texto, no cartão da pessoa da vez (aba Hoje). */
.alvo__versao {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 10px 0 -4px; font-size: 12px; color: var(--cinza-suave);
}
.mini-tag--script { background: var(--verde-suave); color: var(--verde-escuro); }

body.escuro .gaveta { background: #171b21; }
body.escuro .gaveta__busca { background: #12171d; border-color: #2a2f38; color: #cfd8e3; }
body.escuro .gaveta__familia-n, body.escuro .sc__usada { background: #262b33; }
body.escuro .gaveta__familia--sugerida { background: #10261e; }
body.escuro .sc__versao { background: #171b21; border-color: #2a2f38; }
body.escuro .sc__versao.ativo { background: #eef4f1; border-color: #eef4f1; color: #12171d; }
body.escuro .gaveta__titulo strong { color: #eef4f1; }
body.escuro .gaveta__topo strong, body.escuro .sc__nome { color: #eef4f1; }
body.escuro .hoje-placar { background: #171b21; }
body.escuro .hoje-placar__meta strong, body.escuro .hoje-placar__nums strong,
body.escuro .alvo__cab strong { color: #eef4f1; }
body.escuro .alvo__pos, body.escuro kbd { background: #12171d; }
body.escuro .linha--aberta { background: #10261e; }

.prosp-abas {
  display: flex; gap: 2px; border-bottom: 1px solid var(--borda);
  margin-bottom: 18px; overflow-x: auto;
}
.prosp-aba {
  border: 0; background: transparent; color: var(--cinza-suave); cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 10px 16px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.prosp-aba:hover { color: var(--preto); }
.prosp-aba.ativo { color: var(--preto); border-bottom-color: var(--preto); }

.prosp-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 6px; border-bottom: 1px solid #eef2f0;
}
.prosp-item:last-child { border-bottom: 0; }
.prosp-item--top { background: #fbfcfb; border-left: 3px solid var(--preto); padding-left: 12px; }
.prosp-pos {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  background: var(--preto); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}
.prosp-corpo { flex: 1; min-width: 0; }
.prosp-linha1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prosp-linha1 strong { font-size: 14.5px; color: var(--preto); }
.prosp-gancho {
  font-size: 13px; color: var(--cinza-texto); margin-top: 5px;
  border-left: 2px solid var(--borda); padding-left: 9px; font-style: italic;
}
.prosp-meta {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px;
  font-size: 12px; color: var(--cinza-suave);
}
.prosp-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.prosp-acoes .botao--mini { padding: 6px 12px; font-size: 12.5px; text-decoration: none; }
a.botao--mini { display: inline-block; line-height: 1.4; }

.cidade-bloco { margin-bottom: 16px; }
.cidade-bloco .bloco__cabecalho h2 { display: flex; align-items: center; gap: 10px; }

.script-bloco { margin-bottom: 16px; transition: box-shadow .3s, border-color .3s; }
.script-bloco--destaque { border-color: var(--preto); box-shadow: 0 0 0 3px rgba(20,23,28,.12); }
.script-meta { font-size: 13px; color: var(--cinza-suave); margin-bottom: 4px; }
.script-texto {
  background: #fbfcfb; border: 1px solid var(--borda); border-radius: 9px;
  padding: 14px 16px; margin: 12px 0; font-family: inherit; font-size: 13.5px;
  line-height: 1.6; color: var(--cinza-texto); white-space: pre-wrap;
}
.script-nota { font-size: 13px; color: var(--cinza-suave); margin-top: 8px; line-height: 1.55; }
.script-nota--alerta { color: var(--vermelho); }

/* Cidades: score, alerta e roteiro */
.score-bolha {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--preto); color: #fff;
  font-size: 13px; font-weight: 700; cursor: help;
}
.cidade-alerta { font-size: 11.5px; color: var(--vermelho); font-weight: 600; margin-top: 3px; }
.prosp-item--ancora { border-left: 3px solid var(--preto); padding-left: 12px; background: #fbfcfb; }

.viagem-cab {
  display: flex; gap: 26px; flex-wrap: wrap; padding: 4px 0 16px;
  border-bottom: 1px solid var(--borda); margin-bottom: 14px;
}
.viagem-cab .det-rot { width: auto; display: block; margin-bottom: 2px; }
.viagem-cab strong { font-size: 14.5px; color: var(--preto); }

.roteiro-fase { margin-bottom: 18px; }
.roteiro-fase__tit {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--cinza-suave); border-bottom: 1px solid var(--borda);
  padding-bottom: 6px; margin-bottom: 8px;
}
.roteiro-item {
  display: flex; gap: 11px; align-items: flex-start; padding: 9px 4px;
  border-radius: 8px; cursor: pointer;
}
.roteiro-item:hover { background: #f8faf9; }
.roteiro-item input { margin-top: 3px; flex-shrink: 0; }
.roteiro-item--ok .roteiro-linha1 strong { text-decoration: line-through; color: var(--cinza-suave); }
.roteiro-corpo { flex: 1; min-width: 0; }
.roteiro-linha1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.roteiro-linha1 strong { font-size: 14px; color: var(--preto); }
.roteiro-quando {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--cinza-suave); background: #eef2f0; border-radius: 20px; padding: 1px 9px;
}
.roteiro-por { font-size: 12.5px; color: var(--cinza-suave); margin-top: 3px; }

body.escuro .roteiro-quando { background: #12171d; }
body.escuro .roteiro-item:hover, body.escuro .prosp-item--ancora { background: #1e242b; }
body.escuro .roteiro-linha1 strong, body.escuro .viagem-cab strong { color: #eef4f1; }
body.escuro .score-bolha { background: #eef0f3; color: #14171c; }
body.escuro .prosp-item--top, body.escuro .script-texto { background: #10151b; }
body.escuro .prosp-linha1 strong { color: #eef4f1; }
body.escuro .prosp-item { border-color: #2a2f38; }

/* ---- Produção por pessoa (histórico) ------------------------------------- */
.tabela-rolagem { overflow-x: auto; }
#historico-pessoas td, #historico-pessoas th { white-space: nowrap; }
.hist-ok {
  display: inline-block; background: var(--preto); color: #fff;
  border-radius: 20px; padding: 0 9px; font-weight: 700; min-width: 22px;
}
body.escuro .hist-ok { background: #eef0f3; color: #14171c; }

/* ---- Aniversariantes do dia (Clientes) ----------------------------------- */
.aniversariantes {
  background: var(--cartao); border: 1px solid var(--borda); border-left: 4px solid var(--preto);
  border-radius: var(--raio); padding: 14px 18px; box-shadow: var(--sombra); margin-bottom: 16px;
}
.aniv-cabecalho {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-suave); margin-bottom: 10px;
}
.aniv-cabecalho span {
  background: var(--preto); color: #fff; border-radius: 20px; padding: 0 8px; font-size: 11.5px;
}
.aniv-lista { display: flex; gap: 10px; flex-wrap: wrap; }
.aniv-item {
  display: flex; align-items: center; gap: 9px; border: 1px solid var(--borda); background: #fbfcfb;
  border-radius: 30px; padding: 5px 14px 5px 5px; cursor: pointer; font-family: inherit;
}
.aniv-item:hover { border-color: var(--cinza-suave); }
.aniv-nome { font-size: 13.5px; font-weight: 600; color: var(--preto); }
.aniv-tel { font-size: 12.5px; color: var(--cinza-suave); }
body.escuro .aniversariantes { background: #171b21; }
body.escuro .aniv-item { background: #10151b; }
body.escuro .aniv-nome { color: #eef4f1; }

/* ---- Produtividade: navegação por mês, variação e meta ------------------- */
.prod-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* As setas e o mês viram um controle único, em vez de três botões soltos. */
.prod-mes-nav {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--borda); border-radius: 10px;
  background: var(--cartao); padding: 2px;
}
.prod-seta {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 17px; line-height: 1; color: var(--cinza-suave);
  padding: 7px 11px; border-radius: 8px;
}
.prod-seta:hover { background: #eef2f0; color: var(--preto); }
body.escuro .prod-seta:hover { background: #262b33; color: #eef4f1; }
.prod-mes {
  font-size: 14px; font-weight: 700; color: var(--preto); min-width: 140px;
  text-align: center;
}
body.escuro .prod-mes { color: #eef4f1; }
.cartoes--3 { grid-template-columns: repeat(3, 1fr); }
.rank-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rank-nome-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rank-var { font-size: 11.5px; font-weight: 600; color: var(--cinza-suave); }
.rank-var--down { color: var(--vermelho); }
.rank-meta {
  font-size: 11px; font-weight: 700; color: var(--cinza-suave);
  border: 1px solid var(--borda); border-radius: 20px; padding: 0 8px;
}
.rank-meta--ok { color: var(--verde-escuro); border-color: var(--verde-escuro); }
.rank-barra__fill--meta { background: var(--verde-escuro) !important; }
.rank-linha { align-items: center; }

/* ---- CRM: barra "Alterar fase" (aparece ao arrastar) --------------------- */
/* As 9 fases não cabem numa linha só: o bloco de alvos quebra em várias
   linhas em vez de rolar na horizontal, senão a última fase ("Arquivamento")
   fica cortada fora da tela e não dá para soltar o card nela.
   A barra é position:fixed (fica presa na janela, não na tela do CRM), então
   ela precisa saber onde a barra lateral termina: é o que faz a variável
   --lateral-largura, que muda de 248px para 68px quando a lateral é
   retraída. Antes o valor era fixo em 248px e a barra ficava deslocada uns
   180px para a direita com a lateral encolhida. */
.crm-alterar-fase {
  position: fixed; left: var(--lateral-largura, 248px); right: 0; bottom: 0;
  z-index: 42;
  background: var(--cartao); border-top: 1px solid var(--borda);
  box-shadow: 0 -6px 26px rgba(0, 0, 0, .14);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 20px 18px; max-height: 52vh; overflow-y: auto;
}
.crm-alterar-fase__rot {
  font-weight: 700; color: var(--cinza-suave); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
/* Centralizado e com largura máxima: as fases que sobram para a segunda linha
   ficam centradas embaixo, em vez de uma esticada sozinha na largura toda. */
.crm-alterar-fase__alvos {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  width: 100%; max-width: 1060px;
}
.crm-fase-alvo {
  border: 1.5px dashed var(--borda); border-radius: 10px; padding: 13px 14px;
  font-size: 13px; font-weight: 600; color: var(--cinza-suave); white-space: nowrap;
  flex: 0 1 auto; min-width: 112px; text-align: center; transition: all .12s;
}
.crm-fase-alvo--atual { opacity: .45; }
.crm-fase-alvo.sobre {
  border-color: var(--preto); background: var(--preto); color: #fff;
  border-style: solid; transform: translateY(-2px);
}
body.escuro .crm-alterar-fase { background: #171b21; }
body.escuro .crm-fase-alvo.sobre { background: #eef0f3; color: #14171c; border-color: #eef0f3; }

/* ---- Responsivo ---------------------------------------------------------- */
/* ---- Menu em gaveta (celular) ------------------------------------------- */
.menu-abrir {
  display: none; align-items: center; justify-content: center; gap: 8px;
  background: var(--cartao); border: 1px solid var(--borda); color: var(--cinza-texto);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 14px; font-weight: 600;
  min-height: 44px;
}
.menu-abrir svg { width: 20px; height: 20px; }
.menu-fundo {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: rgba(12, 17, 14, .5);
}
body.escuro .menu-abrir { background: #171b21; }

@media (max-width: 860px) {
  .crm-alterar-fase { left: 0; }
  /* Barra lateral vira gaveta: escondida até tocar no botão de menu */
  .lateral {
    position: fixed; top: 0; left: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .lateral.lateral--aberta { transform: translateX(0); }
  .menu-fundo { display: block; }
  .menu-abrir { display: inline-flex; }
  .conteudo { padding: 20px; }
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  .campo--duplo, .campo--tripla { grid-template-columns: 1fr; }
  .painel-grade { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ACESSIBILIDADE (WCAG AA) — foco visível, movimento reduzido, toque
   ========================================================================== */

/* ---- Foco visível para quem navega pelo teclado --------------------------
   Usa :focus-visible: aparece no Tab, não no clique do mouse. */
:focus-visible {
  outline: 3px solid var(--preto);
  outline-offset: 2px;
  border-radius: 6px;
}
/* No painel escuro do login o anel precisa ser claro para aparecer.
   (A lateral é branca no modo claro — anel escuro padrão; no modo escuro
   a regra body.escuro logo abaixo já clareia o anel do app inteiro.) */
.login__promo :focus-visible {
  outline-color: #fff;
}
/* Campos de formulário: anel próprio, sem perder a borda destacada. */
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible,
.busca:focus-visible, .composer__texto:focus-visible {
  outline: 3px solid var(--preto);
  outline-offset: 1px;
}
body.escuro :focus-visible { outline-color: #eef0f3; }

/* Link "pular para o conteúdo": só aparece quando recebe foco. */
.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--preto); color: #fff; padding: 12px 18px;
  border-radius: 0 0 8px 0; font-size: 14px; font-weight: 600; text-decoration: none;
}
.pular-para-conteudo:focus { left: 0; }

/* ---- Respeita "reduzir movimento" do sistema operacional ----------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .cartao:hover { transform: none; }
}

/* ---- Elementos clicáveis que não são <button> ---------------------------- */
[role="button"] { cursor: pointer; }
.marcador:focus-visible, .compromisso:focus-visible { outline: 3px solid var(--preto); outline-offset: 2px; }

/* ---- Estado desabilitado legível ---------------------------------------- */
.botao:disabled, button:disabled {
  opacity: .45; cursor: not-allowed;
}

/* ==========================================================================
   NOME CLICÁVEL + AÇÕES QUE APARECEM NO HOVER (Clientes e Processos)
   ========================================================================== */
.nome-com-acoes { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.nome-link {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--preto); text-align: left;
}
.nome-link:hover { text-decoration: underline; }
body.escuro .nome-link { color: #eef4f1; }
/* Número CNJ é um identificador: nunca quebra no meio ("1000123-" / "45.…").
   Só na tabela de Processos — nome de cliente pode quebrar normalmente. */
#tabela-processos .nome-link { white-space: nowrap; }

/* Os botões só aparecem ao passar o mouse — mas continuam alcançáveis pelo
   teclado (:focus-within), senão sumiriam para quem navega com Tab. */
.acoes-hover {
  display: flex; gap: 2px; opacity: 0; transition: opacity .12s ease;
  pointer-events: none;
}
.linha-acoes:hover .acoes-hover,
.linha-acoes:focus-within .acoes-hover,
.res-cliente:hover .acoes-hover,
.res-cliente:focus-within .acoes-hover,
.res-proc:hover .acoes-hover,
.res-proc:focus-within .acoes-hover { opacity: 1; pointer-events: auto; }

.acao-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--cinza-suave); cursor: pointer;
}
.acao-icone:hover { background: var(--preto); border-color: var(--preto); color: #fff; }
body.escuro .acao-icone:hover { background: #eef0f3; border-color: #eef0f3; color: #14171c; }

/* ==========================================================================
   BUSCA DE CLIENTES COM OS PROCESSOS VINCULADOS
   ========================================================================== */
.res-clientes { display: grid; gap: 12px; margin-top: 4px; }
.res-bloco { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.res-cliente {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--cartao);
}
.res-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: var(--verde-suave); color: var(--cinza-texto);
}
body.escuro .res-icone { background: #262b33; }
.res-cliente__texto, .res-proc__texto {
  flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left;
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
}
.res-cliente__texto strong { font-size: 15px; color: var(--preto); }
.res-proc__texto strong { font-size: 14px; color: var(--preto); }
body.escuro .res-cliente__texto strong, body.escuro .res-proc__texto strong { color: #eef4f1; }
.res-cliente__texto:hover strong, .res-proc__texto:hover strong { text-decoration: underline; }
.res-cpf {
  justify-self: start; font-size: 12.5px; font-weight: 600;
  background: var(--verde-suave); color: var(--cinza-texto);
  border-radius: 6px; padding: 1px 8px;
}
body.escuro .res-cpf { background: #262b33; }
.res-proc__linha { font-size: 12.5px; color: var(--cinza-suave); }
.res-processos { border-top: 1px solid var(--borda); background: var(--fundo); }
.res-proc {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 30px; border-bottom: 1px solid var(--borda);
}
.res-proc:last-child { border-bottom: 0; }
.res-vazio {
  padding: 10px 14px 12px 60px; font-size: 12.5px; color: var(--cinza-suave);
  background: var(--fundo); border-top: 1px solid var(--borda);
}

/* ==========================================================================
   PAINEL "DADOS DO CLIENTE" (abas pessoa / nuvem)
   ========================================================================== */
.detalhe__painel--estreito { max-width: 560px; }
.cli-abas { display: flex; gap: 6px; flex-wrap: wrap; }
/* Pílula com ícone + rótulo: ícone sozinho obrigava a adivinhar a seção */
.cli-aba {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 20px;
  border: 1px solid var(--borda); background: var(--cartao);
  color: var(--cinza-suave); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.cli-aba svg { flex-shrink: 0; }
.cli-aba:hover { color: var(--preto); border-color: var(--cinza-suave); }
.cli-aba.ativo { background: var(--preto); border-color: var(--preto); color: #fff; }
body.escuro .cli-aba.ativo { background: #eef0f3; border-color: #eef0f3; color: #14171c; }
body.escuro .cli-aba:hover { color: #eef4f1; }

.cli-corpo { padding: 24px 26px 28px; }
.cli-cabecalho { margin-bottom: 20px; }
.cli-titulo { font-size: 20px; font-weight: 700; color: var(--preto); }
body.escuro .cli-titulo, body.escuro .cli-nome { color: #eef4f1; }
.cli-desde { font-size: 12.5px; color: var(--cinza-suave); margin-top: 4px; }
.cli-nome {
  font-size: 16px; font-weight: 700; color: var(--preto);
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--borda);
}

/* Cartão de identificação do cliente: avatar + nome + resumo + ação.
   É o topo da aba "Dados" — o botão de gerar documento mora aqui. */
.cli-pessoa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 16px;
  border: 1px solid var(--borda); border-radius: 12px;
  background: var(--cartao); box-shadow: var(--sombra);
}
.cli-pessoa__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--verde-suave); color: var(--verde-escuro);
  font-size: 16px; font-weight: 800; letter-spacing: .5px;
}
/* base de 165px (e não a largura natural do nome): sem isso, um nome comprido
   faz a linha "parecer" cheia e o botão despenca para baixo sem precisar */
.cli-pessoa__info { flex: 1 1 165px; min-width: 0; }
.cli-pessoa__nome {
  font-size: 16.5px; font-weight: 700; color: var(--preto); line-height: 1.3;
}
.cli-pessoa__resumo { font-size: 12.5px; color: var(--cinza-suave); margin-top: 3px; }
.cli-pessoa .botao { flex-shrink: 0; }
body.escuro .cli-pessoa { background: #171b21; }
body.escuro .cli-pessoa__avatar { background: #14231d; color: #7fe0b4; }
body.escuro .cli-pessoa__nome { color: #eef4f1; }
.cli-form { display: grid; gap: 14px; }
.cli-salvar { width: 100%; justify-content: center; margin-top: 6px; }

/* ==========================================================================
   ABA NUVEM — documentos do cliente em pastas
   ========================================================================== */
.doc-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.doc-enviar {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.doc-enviar.ocupado { pointer-events: none; opacity: .7; }

/* Menu "···" — usa <details> nativo, sem JS de abrir/fechar. */
.menu-ponto { position: relative; }
.menu-ponto > summary {
  list-style: none; display: inline-flex; align-items: center; justify-content: center;
}
.menu-ponto > summary::-webkit-details-marker { display: none; }
.menu-ponto[open] > summary { background: var(--preto); border-color: var(--preto); color: #fff; }
.menu-ponto__lista {
  position: absolute; z-index: 6; top: calc(100% + 4px); right: 0;
  min-width: 190px; display: grid;
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: var(--sombra); overflow: hidden;
}
.menu-ponto__lista button {
  border: 0; background: transparent; text-align: left; cursor: pointer;
  padding: 11px 14px; font: inherit; font-size: 13.5px; color: var(--cinza-texto);
}
.menu-ponto__lista button:hover { background: var(--verde-suave); }
.menu-ponto__lista button.perigo { color: var(--vermelho); }
body.escuro .menu-ponto__lista button:hover { background: #262b33; }

.doc-busca {
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao);
  color: var(--cinza-suave); margin-bottom: 14px;
}
.doc-busca input {
  flex: 1; border: 0; background: transparent; padding: 11px 0;
  font: inherit; font-size: 14px; color: var(--cinza-texto);
}
.doc-busca input:focus { outline: none; }
.doc-busca:focus-within { border-color: var(--verde); }

.doc-trilha {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--cinza-suave); margin-bottom: 12px;
}
.doc-trilha button {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--cinza-suave);
}
.doc-trilha button:hover { color: var(--preto); text-decoration: underline; }
.doc-trilha button:last-of-type { color: var(--preto); font-weight: 700; }
body.escuro .doc-trilha button:last-of-type { color: #eef4f1; }

.doc-cabecalho-lista {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--cinza-suave);
  padding-bottom: 8px; border-bottom: 1px solid var(--borda);
}
.doc-lista { display: grid; }
.doc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--borda);
}
.doc-item:last-child { border-bottom: 0; }
.doc-item__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
  background: var(--verde-suave); color: var(--cinza-texto);
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
}
.doc-item__icone--pasta { background: transparent; }
body.escuro .doc-item__icone { background: #262b33; }
body.escuro .doc-item__icone--pasta { background: transparent; }
.doc-item__texto {
  flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left;
  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit;
}
.doc-item__texto strong {
  font-size: 14px; color: var(--preto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.escuro .doc-item__texto strong { color: #eef4f1; }
.doc-item__texto:hover strong { text-decoration: underline; }
.doc-item__meta { font-size: 12px; color: var(--cinza-suave); }
.doc-item__caminho { font-size: 11.5px; color: var(--cinza-suave); font-style: italic; }
.doc-item__processo {
  display: inline-flex; align-items: center; gap: 5px; justify-self: start;
  font-size: 11.5px; color: var(--cinza-suave);
}
.doc-item__processo svg { width: 13px; height: 13px; }
.doc-vazio { font-size: 13.5px; color: var(--cinza-suave); padding: 22px 0; text-align: center; }

/* Arrastar e soltar arquivos do computador na lista */
.doc-lista { position: relative; min-height: 90px; border-radius: 10px; }
.doc-solta {
  display: none; position: absolute; inset: 0; z-index: 3;
  align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--preto); border-radius: 10px;
  background: var(--verde-suave); color: var(--preto);
  font-size: 13.5px; font-weight: 700; pointer-events: none;
}
.doc-lista.arrastando .doc-solta { display: flex; }
body.escuro .doc-solta { border-color: #eef0f3; background: #262b33; color: #eef4f1; }

/* Confirmação antes de anexar (arquivos + processo + categoria) */
.anexo-lista { list-style: none; display: grid; gap: 6px; margin: 0 0 4px; }
.anexo-lista li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--cinza-texto);
  border: 1px solid var(--borda); border-radius: 8px; padding: 8px 11px;
}
.anexo-lista li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo-lista li em { font-style: normal; font-size: 12px; color: var(--cinza-suave); flex-shrink: 0; }
.anexo-destino { font-size: 12.5px; color: var(--cinza-suave); margin: 0; }
.campo__dica { font-size: 12px; color: var(--cinza-suave); margin: 4px 0 0; }

/* ==========================================================================
   HISTÓRICO DO PROCESSO
   ========================================================================== */
.hp-rodape {
  padding: 14px 26px 18px; border-top: 1px solid var(--borda);
  background: var(--cartao); position: sticky; bottom: 0;
}
.hp-imprimir { width: 100%; justify-content: center; }
.hp-cabecalho { margin-bottom: 18px; }
.hp-cliente {
  font-size: 20px; font-weight: 700; color: var(--preto);
  text-transform: uppercase; letter-spacing: .3px;
}
body.escuro .hp-cliente { color: #eef4f1; }
.hp-numero {
  display: flex; align-items: center; gap: 4px;
  font-size: 13.5px; color: var(--cinza-suave); margin-top: 3px;
}
.hp-sub { font-size: 12.5px; color: var(--cinza-suave); margin-top: 4px; }
.hp-filtro {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px; font-size: 12.5px; color: var(--cinza-suave);
}
.hp-filtro select {
  padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--cartao); color: var(--cinza-texto);
  font: inherit; font-size: 13.5px;
}
.hp-contagem { margin-left: auto; }

/* ==========================================================================
   QUADRO DAS ATIVIDADES (aba "Quadro" do Painel)
   ========================================================================== */
/* Fora da Visão Geral só ficam o cabeçalho, as abas e a visão aberta
   (Quadro, Lista ou Desempenho — as duas últimas pegam o bloco emprestado). */
#tela-painel.modo-quadro > *:not(.cabecalho):not(.painel-abas):not(#painel-quadro):not(#painel-lista):not(#painel-desempenho) {
  display: none;
}
.quadro-adv {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: start;
}
.quadro-col {
  background: #f4f6f5; border-radius: 12px; padding: 10px;
  min-width: 260px;
}
body.escuro .quadro-col { background: #12171d; }
.quadro-col__topo {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 10px; font-size: 13px; color: var(--cinza-texto);
}
.quadro-col__bola {
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--cinza-suave); flex-shrink: 0;
}
.quadro-col__nome { flex: 1; min-width: 0; font-weight: 600; }
.quadro-col__n {
  background: var(--cartao); border-radius: 999px; padding: 1px 9px;
  font-size: 12px; color: var(--cinza-suave);
}
.quadro-col__corpo { display: grid; gap: 10px; max-height: 62vh; overflow-y: auto; }
.quadro-vazio { font-size: 12.5px; color: var(--cinza-suave); padding: 10px 6px; }
.quadro-card {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 10px; padding: 12px;
}
.quadro-card__titulo {
  display: flex; align-items: flex-start; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--preto);
}
body.escuro .quadro-card__titulo { color: #eef4f1; }
.quadro-card__titulo:hover { text-decoration: underline; }
.quadro-card__icone { flex-shrink: 0; color: var(--cinza-suave); }
.quadro-card__icone svg { width: 15px; height: 15px; }
.quadro-card__cliente { font-size: 13px; color: var(--cinza-texto); margin-top: 8px; }
.quadro-card__numero {
  display: flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--cinza-suave); margin-top: 2px;
}
.quadro-card__tempo {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--cinza-suave); margin-top: 8px;
}
.quadro-card__tempo svg { width: 14px; height: 14px; }
.quadro-card__tempo--atraso { color: var(--vermelho); font-weight: 600; }
.quadro-card__pe {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef2f0;
}
body.escuro .quadro-card__pe { border-color: #262b33; }
.quadro-card__pe .acao-icone { margin-left: auto; }
.quadro-card__pe .acao-icone + .acao-icone { margin-left: 0; }

/* ---- Aba "Tarefas": a tarefa e os comentários que ela gerou ------------- */
.ativ-barra { margin-bottom: 14px; }
.ativ-feed { display: grid; gap: 14px; }
.ativ-card {
  border: 1px solid var(--borda); border-radius: 12px;
  padding: 14px 16px; background: var(--cartao);
}
.ativ-card__topo {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--cinza-suave);
}
.ativ-card__quando { flex: 1; min-width: 0; }
.ativ-card__linha {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.ativ-card__titulo {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 700; text-align: left;
  color: var(--preto);
}
body.escuro .ativ-card__titulo { color: #eef4f1; }
.ativ-card__titulo:hover { text-decoration: underline; }
.ativ-card__meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 6px; font-size: 12px; color: var(--cinza-suave);
}
.ativ-comentario {
  margin-top: 10px; padding: 12px 14px; border-radius: 8px;
  background: #f4f6f5; color: var(--cinza-texto);
  font-size: 13.5px; white-space: pre-wrap;
}
body.escuro .ativ-comentario { background: #1e242b; }
.ativ-comentario__pe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: 12px; color: var(--cinza-suave);
}
.ativ-card__acoes { margin-top: 10px; }
.ativ-comentar { margin-top: 10px; }
.ativ-comentar .composer__acoes { margin-top: 8px; }

/* ---- Aba "Andamentos": o histórico do processo ------------------------- */
.mov-cabecalho {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 0 10px;
}
.mov-secao { font-size: 15px; font-weight: 700; color: var(--preto); }
body.escuro .mov-secao { color: #eef4f1; }
.mov-modo {
  display: flex; gap: 0; margin-bottom: 12px;
  border: 1px solid var(--borda); border-radius: 10px; overflow: hidden;
}
.mov-modo__opcao {
  flex: 1; padding: 10px 12px; border: 0; background: var(--cartao);
  font: inherit; font-size: 13px; color: var(--cinza-suave); cursor: pointer;
}
.mov-modo__opcao.ativo { background: var(--verde-suave); color: var(--preto); font-weight: 700; }
body.escuro .mov-modo__opcao { background: #171b21; }
body.escuro .mov-modo__opcao.ativo { background: #262b33; color: #eef4f1; }
.mov-lista { display: grid; }
.mov-grupo { margin-bottom: 14px; }
.mov-grupo__titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--cinza-suave); margin: 10px 0 4px;
}
.mov-item { border-bottom: 1px solid #eef2f0; }
body.escuro .mov-item { border-color: #262b33; }
.mov-item__linha {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 4px; cursor: pointer; list-style: none;
  font-size: 13.5px; color: var(--cinza-texto);
}
.mov-item__linha::-webkit-details-marker { display: none; }
.mov-item__linha::after {
  content: "›"; order: 3; color: var(--cinza-suave); font-size: 16px;
  transition: transform .15s ease;
}
.mov-item[open] .mov-item__linha::after { transform: rotate(90deg); }
.mov-ponto {
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--cinza-suave); flex-shrink: 0;
}
.mov-nome { flex: 1; min-width: 0; order: 2; }
.mov-data { font-size: 12.5px; color: var(--cinza-suave); order: 4; flex-shrink: 0; }
.mov-detalhe { padding: 0 4px 14px 22px; }
.mov-detalhe__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--cinza-suave);
}
.mov-texto {
  margin-top: 8px; font-size: 13.5px; color: var(--cinza-texto);
  white-space: pre-wrap;
}
.mov-origem { margin-top: 8px; font-size: 12px; color: var(--cinza-suave); }

/* ---- Processos: barra de busca + filtro, fase na lista ------------------ */
.proc-barra { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.proc-barra .busca { margin: 0; flex: 1; }
.filtro-resumo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--verde-suave); border-radius: 9px; padding: 9px 13px;
  margin-bottom: 12px; font-size: 12.5px; color: var(--cinza-texto);
}
body.escuro .filtro-resumo { background: #10261e; color: #cfe6da; }
.filtro-resumo .link-baixar { margin-left: auto; }
.etq-fase {
  display: inline-block; border-radius: 20px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  background: #eef2f0; color: var(--cinza-texto);
}
.etq-fase--judicial { background: #e4edfb; color: #1a4f9c; }
.etq-fase--administrativo { background: var(--verde-suave); color: var(--verde-escuro); }
.etq-fase--negociação, .etq-fase--negociacao { background: #fdf0dc; color: #8a5a10; }
.etq-fase--encerrado { background: #f0f0f0; color: var(--cinza-suave); }
body.escuro .etq-fase { background: #262b33; color: #cfd7e0; }
.proc-etapa { display: block; font-size: 11.5px; color: var(--cinza-suave); margin-top: 3px; }

/* ---- Responsáveis escolhidos na tarefa (fichas com o × ao lado) --------- */
.chip-resp {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 5px; border: 1px solid var(--borda); border-radius: 999px;
  font-size: 13px; color: var(--cinza-texto); background: var(--cartao);
}
.chip-resp__tirar {
  border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1;
  color: var(--cinza-suave); padding: 0 2px;
}
.chip-resp__tirar:hover { color: var(--vermelho); }
#nt-resp-escolhidos:empty { display: none; }
#nt-resp-escolhidos { margin-top: 8px; }

/* ---- Gerar documento: cartões de escolha do kit ------------------------- */
.gd-secao { display: grid; gap: 10px; }
.gd-rotulo {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--cinza-suave); margin: 0;
}
.gd-opcao {
  position: relative; display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px;
  cursor: pointer; background: var(--cartao); transition: border-color .12s ease;
}
.gd-opcao:hover { border-color: var(--cinza-suave); }
.gd-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.gd-opcao:has(input:checked) {
  border-color: var(--verde); background: var(--verde-suave);
  box-shadow: 0 0 0 1px var(--verde);
}
.gd-opcao__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: #eef2f0; color: var(--cinza-suave);
}
.gd-opcao:has(input:checked) .gd-opcao__icone {
  background: var(--verde); color: var(--sobre-verde);
}
.gd-opcao__corpo { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gd-opcao__corpo strong { font-size: 14.5px; color: var(--preto); }
.gd-opcao__area { font-size: 12px; color: var(--verde-escuro); font-weight: 600; }
.gd-opcao__itens { font-size: 12px; color: var(--cinza-suave); line-height: 1.45; }
/* bolinha de marcado, à direita, como um rádio desenhado */
.gd-opcao__marca {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--borda);
}
.gd-opcao:has(input:checked) .gd-opcao__marca {
  border-color: var(--verde); background: var(--verde);
  box-shadow: inset 0 0 0 3px var(--cartao);
}
.gd-generos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gd-genero {
  position: relative; display: block; border: 1px solid var(--borda);
  border-radius: 10px; padding: 11px 14px; cursor: pointer;
  background: var(--cartao);
}
.gd-genero:hover { border-color: var(--cinza-suave); }
.gd-genero input { position: absolute; opacity: 0; pointer-events: none; }
.gd-genero:has(input:checked) {
  border-color: var(--verde); background: var(--verde-suave);
  box-shadow: 0 0 0 1px var(--verde);
}
.gd-genero__corpo { display: grid; gap: 1px; }
.gd-genero__corpo strong { font-size: 13.5px; color: var(--preto); }
.gd-genero__corpo span { font-size: 12px; color: var(--cinza-suave); font-style: italic; }
.gd-aviso {
  font-size: 12.5px; line-height: 1.55; color: var(--vermelho);
  background: #fdeaea; border-radius: 10px; padding: 11px 14px;
}
/* os três passos do que acontece ao gerar */
.gd-nota {
  display: grid; gap: 7px; border-top: 1px solid var(--borda); padding-top: 14px;
}
.gd-nota__passo {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--cinza-texto);
}
.gd-nota__passo i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  background: var(--verde-suave); color: var(--verde-escuro);
  font-style: normal; font-size: 11px; font-weight: 800;
}
body.escuro .gd-opcao, body.escuro .gd-genero { background: #171b21; }
body.escuro .gd-opcao:has(input:checked),
body.escuro .gd-genero:has(input:checked) { background: #14231d; }
body.escuro .gd-opcao__corpo strong, body.escuro .gd-genero__corpo strong { color: #eef4f1; }
body.escuro .gd-opcao__icone { background: #232833; }
body.escuro .gd-opcao:has(input:checked) .gd-opcao__marca { box-shadow: inset 0 0 0 3px #171b21; }
body.escuro .gd-aviso { background: #2a1517; }
body.escuro .gd-nota__passo i { background: #14231d; color: #7fe0b4; }

/* ---- Campo com busca (cliente do processo) ------------------------------ */
.combo { position: relative; }
.combo__campo { width: 100%; }
.combo__lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  max-height: 260px; overflow-y: auto; padding: 4px;
}
.combo__item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px; padding: 9px 11px;
  font: inherit; color: var(--cinza-texto);
}
.combo__item:hover, .combo__item.marcado { background: var(--verde-suave); }
body.escuro .combo__item:hover, body.escuro .combo__item.marcado { background: #262b33; }
.combo__nome { display: block; font-size: 13.5px; font-weight: 600; color: var(--preto); }
body.escuro .combo__nome { color: #eef4f1; }
.combo__sub { display: block; font-size: 12px; color: var(--cinza-suave); margin-top: 2px; }
.combo__vazio { padding: 12px; font-size: 12.5px; color: var(--cinza-suave); margin: 0; }

/* ---- Criar nova tarefa: responsáveis em fichas e marcações -------------- */
.campo__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.campo__topo label { margin: 0; }
.campo__topo select {
  width: auto; padding: 6px 10px; border: 1px solid var(--borda);
  border-radius: 8px; background: var(--cartao); color: var(--cinza-texto);
  font: inherit; font-size: 12.5px;
}
.chips-resp { display: flex; flex-wrap: wrap; gap: 8px; }
.marcas-linha {
  display: flex; flex-wrap: wrap; gap: 14px 20px; margin: 4px 0 16px;
}
.marca-check {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--cinza-texto); cursor: pointer;
}
.campo-arquivo--linha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; text-align: left;
}
.campo-arquivo--linha .campo-arquivo__texto { margin: 0; }

.linha-tempo { display: grid; gap: 20px; }
.linha-tempo__data {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--cinza-suave); margin-bottom: 8px;
}
.lt-item {
  display: flex; gap: 12px; padding: 12px 10px 12px 0;
  border-left: 2px solid var(--borda); margin-left: 6px; padding-left: 18px;
  position: relative;
}
.lt-item--clicavel { cursor: pointer; border-radius: 0 8px 8px 0; }
.lt-item--clicavel:hover { background: var(--verde-suave); }
body.escuro .lt-item--clicavel:hover { background: #1e242b; }
.lt-ponto {
  position: absolute; left: -5px; top: 18px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--preto); border: 2px solid var(--cartao);
}
body.escuro .lt-ponto { background: #eef0f3; }
.lt-corpo { flex: 1; min-width: 0; }
.lt-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lt-cab strong { font-size: 14px; color: var(--preto); }
body.escuro .lt-cab strong { color: #eef4f1; }
.lt-hora { font-size: 12px; color: var(--cinza-suave); margin-left: auto; }
.lt-texto { font-size: 13.5px; color: var(--cinza-texto); margin-top: 5px; white-space: pre-wrap; }
.lt-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 6px; font-size: 12px; color: var(--cinza-suave);
}
.lt-atrasado { color: var(--vermelho); font-weight: 700; }

/* Imprimir o histórico: só o painel vai para o papel. */
@media print {
  body.imprimindo > *:not(#historico) { display: none !important; }
  body.imprimindo #historico {
    position: static; background: none; backdrop-filter: none;
    padding: 0; overflow: visible;
  }
  body.imprimindo .detalhe__painel {
    max-width: 100%; max-height: none; box-shadow: none; overflow: visible;
  }
  body.imprimindo .detalhe__topo, body.imprimindo .hp-rodape,
  body.imprimindo .hp-filtro, body.imprimindo .composer,
  body.imprimindo .hist__excluir { display: none !important; }
}

/* ==========================================================================
   CELULAR — alvos de toque e campos sem zoom automático
   ========================================================================== */
@media (max-width: 860px) {
  /* iOS dá zoom sozinho em campo com fonte < 16px */
  .campo input, .campo select, .campo textarea,
  .busca, .busca-global, .composer__texto, .crm-filtro, .crm-resp__busca {
    font-size: 16px;
  }
  /* alvo de toque mínimo (44px) */
  .botao, .chip, .menu__item, .prosp-aba, .crm-fase, .det-aba,
  .acao-linha, .link-baixar, .botao--mini {
    min-height: 44px;
  }
  .acao-linha, .link-baixar { padding: 10px 12px; }
  .marcador { width: 26px; height: 26px; }
  /* tabelas largas rolam dentro do próprio bloco, sem quebrar a página */
  .bloco { overflow-x: auto; }
  /* a lateral vira gaveta: garante que o conteúdo ocupe a tela toda */
  .conteudo { max-width: 100%; }
  /* Topo numa linha só: ☰ + busca + Adicionar (antes empilhava três blocos) */
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .menu-abrir__texto { display: none; }
  .menu-abrir { padding: 10px; }
  .busca-topo, .busca-topo.aberta { flex: 1 1 auto; width: auto; min-width: 0; }
  .topbar__equipe { display: none; }   /* avatares da equipe só no computador */
  .topbar__add-btn { padding: 10px 12px; white-space: nowrap; }
  /* minmax(0,…) e não 1fr puro: sem isso o texto longo do cartão empurra a
     coluna e as duas ficam de larguras diferentes */
  .cartoes, .cartoes--4, .cartoes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* no celular a linha do ranking fica alta demais com tudo lado a lado */
  .rank-linha { gap: 9px; padding: 10px 6px; }
  .rank-avatar { width: 30px; height: 30px; }
  .rank-numeros { min-width: 60px; }
  /* a navegação de mês não cabe ao lado do título: vai para a linha de baixo */
  #tela-produtividade .cabecalho { flex-wrap: wrap; }
  .prod-nav { width: 100%; justify-content: space-between; }
  .prod-mes { min-width: 0; flex: 1; }
  .prod-mes-nav { flex: 1; }
  .podio { grid-template-columns: 1fr; }
  .graficos { grid-template-columns: 1fr; }
  .detalhe__corpo { padding: 20px; gap: 20px; }
  .detalhe__lateral { width: 100%; }
  .filtro-painel { width: 100%; }
  /* no toque não existe hover: as ações ficam sempre visíveis */
  .acoes-hover { opacity: 1; pointer-events: auto; }
  .acao-icone { width: 44px; height: 44px; }
  .cli-aba { min-height: 44px; }
  .cli-corpo { padding: 18px; }
  .doc-busca input, .hp-filtro select { font-size: 16px; }
  .menu-ponto__lista button { min-height: 44px; }
  .res-proc { padding-left: 16px; }
  .res-vazio { padding-left: 16px; }
}

/* ---- Carregando: esqueleto em vez de tela vazia -------------------------- */
.carregando {
  padding: 18px; display: grid; gap: 10px;
}
.carregando__linha {
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, #eef2f0 25%, #e2e7e5 37%, #eef2f0 63%);
  background-size: 400% 100%;
  animation: brilho 1.2s ease-in-out infinite;
}
.carregando__linha:nth-child(2) { width: 80%; }
.carregando__linha:nth-child(3) { width: 60%; }
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
body.escuro .carregando__linha {
  background: linear-gradient(90deg, #171b21 25%, #22272f 37%, #171b21 63%);
  background-size: 400% 100%;
}