/* ==========================================================================
   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) */
  /* Traço do saldo no gráfico do ano. Existe porque --preto NÃO clareia no
     tema escuro (lá ele também é fundo), e a linha sumiria no cartão. */
  --linha-saldo: #14171c;
  --ambar: #cf9a2e;
  /* Sombra quase nula: a AdvBox é "flat" — o cartão se separa do fundo pela
     borda, não pela sombra. */
  --sombra: 0 1px 2px rgba(20, 23, 28, .04);
  --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: 210px;
  /* 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; }

/* Controles nativos na cor da marca — sem isto o navegador pinta de azul.
   accent-color é herdado, então o body (logo abaixo) cobre tudo de uma vez:
   caixas de seleção, radios e também o dia/hora destacados nos calendários
   do Chrome (campos Data, Hora e Prazo fatal). */

/* 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);
  accent-color: var(--verde);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

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

.marca { display: flex; align-items: center; gap: 9px; padding: 4px 6px 18px; }
.marca__logo {
  width: 28px; height: 28px;
  color: var(--verde);
  display: block; flex: none;
}
/* O nome é desenho, não texto: a caixa do SVG tem 1,16x a altura da letra,
   então 13px de caixa dá uma letra de ~11px. A largura se ajusta sozinha.
   (A caixa foi de 1,12x para 1,18x conforme o traço engrossou de 13 para 17 —
   as alturas em px subiram junto para a letra continuar do mesmo tamanho.) */
.marca__nome {
  height: 13px; width: auto; flex: none;
  color: var(--lateral-texto);
  display: block;
}

.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: 10px;
  background: transparent; border: 0;
  color: var(--lateral-suave);
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 400; 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: #1b251f; }

/* Título de grupo do menu (Captação, Atendimento, Rotina, Gestão) */
.menu__grupo {
  font-size: 10px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
  color: var(--lateral-suave); padding: 12px 10px 4px; 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: 600;
  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: 22px 32px; max-width: 1320px; margin-inline: auto; }

.cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 18px;
}
.cabecalho h1 { font-size: 20px; color: var(--preto); font-weight: 600; }
.subtitulo { color: var(--cinza-suave); font-size: 13px; 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: 14px; margin-bottom: 20px;
}
.cartao {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra);
}
.cartao__rotulo { font-size: 12.5px; color: var(--cinza-suave); font-weight: 400; }
.cartao__numero { display: block; font-size: 25px; color: var(--preto); margin-top: 4px; font-weight: 600; }
.cartao--alerta .cartao__numero { color: var(--vermelho); }
.cartao__numero--dinheiro { font-size: 19px; }
.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;
}
/* Parceiro sem origem definida: ele entra e não encontra nada, então a
   falta precisa saltar aos olhos na lista da Equipe. */
.parcela-tag--alerta { background: #fdeaea; color: var(--vermelho); }
.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; }
/* 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: #121b17; }
.fluxo-nota { font-size: 12px; color: var(--cinza-suave); margin: 0 0 10px; }
/* Explicação curta embaixo de um campo do formulário — para o rótulo não ter
   de virar frase ("Cliente (deixe vazio se for bolsa, presente, aporte…)"). */
.campo__ajuda { display: block; margin-top: 4px; font-size: 12px; color: var(--cinza-suave); line-height: 1.35; }
.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: #101916; }

/* Seletor de mês no cabeçalho de um bloco (lista de despesas do Fluxo).
   Some com a moldura pesada dos campos de formulário: ali dentro ele é um
   ajuste da lista, não um campo a preencher. */
.seletor-mes {
  font-family: inherit; font-size: 12.5px; color: var(--cinza-texto);
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 8px; padding: 5px 9px; cursor: pointer;
}
.seletor-mes:hover { border-color: var(--cinza-suave); color: var(--preto); }
.seletor-mes:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

/* ---- 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: #121b17; }
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: 16px 18px; box-shadow: var(--sombra);
}
.bloco__cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bloco h2 { font-size: 14.5px; color: var(--preto); font-weight: 600; }

.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: 13.5px; }
.tabela th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--cinza-suave);
  padding: 9px 12px; border-bottom: 1.5px solid var(--borda); font-weight: 600;
}
.tabela td { padding: 11px 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: 8px 14px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; 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: 600; }
.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; }
/* Botao que abre uma gaveta (o "Filtrar" da prospeccao): marcado enquanto ela
   esta aberta, ou enquanto o filtro que ele guarda esta valendo. */
.botao--ativo {
  border-color: var(--verde); color: var(--verde-escuro);
  background: var(--verde-suave); font-weight: 600;
}
body.escuro .botao--ativo { background: #10261e; border-color: #1f6b4f; color: #6ee7b7; }

.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; align-items: center; }
/* ---- Seletor de mês das listas do Financeiro -----------------------------
   Era um <select> com um mês por linha, e a lista crescia um item por mês:
   achar março de 2025 dava rolagem. Agora o menu tem uma linha por ANO, e o
   ano abre os doze meses ao lado, num quadro 3×4 — no quadro o mês se acha
   pela POSIÇÃO, como num calendário, e não lendo a lista inteira.

   Ele também deixou de ficar apagado até o cursor passar pela fileira dos
   chips: quem queria outro mês precisava adivinhar que o trocador estava ali.
   Quem monta o conteúdo é o montarFiltroDeMes(), no app.js. */
.filtro-mes { position: relative; }
.filtro-mes__botao {
  display: flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; color: var(--cinza-texto);
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 30px; padding: 5px 10px; cursor: pointer;
}
.filtro-mes__botao:hover { border-color: var(--cinza-suave); color: var(--preto); }
.filtro-mes__botao:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }
.filtro-mes__botao svg { width: 13px; height: 13px; color: var(--cinza-suave); flex-shrink: 0; }
.filtro-mes__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 44; width: 200px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16); padding: 6px;
}
.filtro-mes__opcao {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; border: 0; background: transparent; border-radius: 8px;
  padding: 7px 9px; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; color: var(--cinza-texto);
}
.filtro-mes__opcao:hover { background: var(--verde-suave); }
.filtro-mes__opcao.ativo { background: var(--verde-suave); font-weight: 700; color: var(--preto); }
.filtro-mes__opcao svg { width: 13px; height: 13px; color: var(--cinza-suave); flex-shrink: 0; }
.filtro-mes__risco { height: 1px; background: var(--borda); margin: 5px 4px; }
/* Os doze meses do ano, ao lado dele. Sem folga entre as duas caixas de
   propósito: um vão de poucos pixels perde o hover no caminho e o quadro
   fecharia no meio da travessia. O clique no ano faz o mesmo, para o toque,
   onde não existe cursor. */
.filtro-mes__ano { position: relative; }
.filtro-mes__meses {
  display: none; position: absolute; left: 100%; top: -6px; z-index: 1;
  grid-template-columns: repeat(3, 1fr); gap: 2px; width: 192px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16); padding: 6px;
}
.filtro-mes__ano:hover > .filtro-mes__meses,
.filtro-mes__ano:focus-within > .filtro-mes__meses,
.filtro-mes__ano--aberto > .filtro-mes__meses { display: grid; }
.filtro-mes__mes { justify-content: center; padding: 7px 4px; font-size: 12.5px; }
/* Mês sem lançamento nenhum continua clicável, mas apagado: o olho pula
   direto para os que têm o que mostrar. */
.filtro-mes__mes--vazio { color: var(--cinza-suave); opacity: .5; }
/* No tema escuro o --preto continua preto de propósito (lá ele também é
   fundo), então a opção escolhida precisa clarear por regra própria — senão
   sai texto quase preto sobre caixa quase preta. */
body.escuro .filtro-mes__opcao.ativo { color: #eef4f1; }
/* ---- 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. Vale para qualquer
   tabela que tenha th[data-ordem] (Atividades e Clientes hoje). */
.tabela th[data-ordem] { cursor: pointer; user-select: none; white-space: nowrap; }
.tabela th[data-ordem]:hover { color: var(--preto); }
.tabela th.ordem-asc::after { content: " ▲"; font-size: 9px; }
.tabela th.ordem-desc::after { content: " ▼"; font-size: 9px; }
body.escuro .ativ-busca input { background: #151d19; color: #e6ebe8; }
body.escuro .ordenar-menu { box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
body.escuro .tabela 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; }
/* NOME DE GENTE SEMPRE EM CAIXA ALTA NA TELA — cliente, equipe, responsável,
   parte envolvida, parceiro que indicou e contato de prospecção, no cadastro e
   na consulta, como na AdvBox. É só apresentação: o banco continua guardando a
   grafia digitada, então os documentos gerados saem normais.
   `.nome-pessoa` é a classe genérica: use-a em qualquer lugar novo que mostre
   nome de gente e não tenha uma classe própria já listada aqui. */
.nome-cliente, .nome-pessoa,
.combo__nome, .combo__parte-nome,
.hp-cliente, .quadro-card__cliente,
.chip-resp__nome, .combo__nome--pessoa,
.cli-nome, .cli-pessoa__nome, .proc-parte__nome,
.usuario-atual__nome,
.proc-chip--pessoa, .composer__resp,
.aniv-nome, .cel-nome .link-botao strong,
.podio-nome, .rank-nome, .ts-nome, .prod-pessoa strong,
.campo--caps { text-transform: uppercase; }
/* EXCEÇÃO: a busca do topo. Ali o nome sai como foi digitado ("Abraão Alisson
   Almeida da Silva"), como na ADVBOX — em caixa alta o trecho destacado da
   pesquisa some no meio do bloco de maiúsculas e a lista fica pesada de ler. */
.busca-pop .busca-res__titulo,
.busca-pop .busca-res__linha { text-transform: none; }
/* EXCEÇÃO: o CRM. O funil segue o visual da ADVBOX, onde o nome no cartão e no
   filtro de responsável sai como foi digitado — a coluna é estreita e, em caixa
   alta, o nome ocupa mais linha do que o cartão tem. */
#tela-comercial .nome-cliente, #tela-comercial .nome-pessoa,
#tela-comercial .quadro-card__cliente,
.crm-resp__nome, .crm-resp__item-nome { text-transform: none; }

/* GRUPO DE AÇÃO SEMPRE EM CAIXA ALTA, como o tipo de ação ao lado. Hoje os
   dois campos (no "Novo processo" e na ficha do processo) são o seletor com
   busca; a regra do <select> nativo fica de reserva para tela rodando uma
   versão antiga do app.js. Vale para tudo do campo, inclusive o "SELECIONE". */
select[name="grupo_acao"],
select[name="grupo_acao"] option,
[data-ao-escolher="aoEscolherGrupoAcao"] .sel-adv__rotulo,
[data-ao-escolher="aoEscolherGrupoAcao"] .sel-adv__opcao { text-transform: uppercase; }

.chip {
  border: 1px solid var(--borda); background: #fff; color: var(--cinza-suave);
  padding: 6px 12px; border-radius: 30px; font-size: 12.5px; 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; }
/* Mês sem movimento na tela do Futuro: continua legível (o acumulado importa),
   só recua para o olho ir direto aos meses em que aconteceu alguma coisa. */
.linha-apagada td { opacity: .55; }

/* ---- 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; }
/* O z-index não é enfeite: o cabeçalho é sticky, e sem ele qualquer elemento
   posicionado do corpo (o balão de contas do resumo do mês, por exemplo)
   passava POR CIMA do título ao rolar — os dois textos se sobrepunham. Como
   ambos ficam em z-index automático, vencia quem viesse depois no HTML, que é
   sempre o corpo. O balão continua acima de tudo: ele pede 60. */
.modal__cabecalho {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 5; background: #fff;
}
.modal__cabecalho h2 { font-size: 18px; color: var(--preto); }
/* Janela sem título (ex.: Gerar documento): some com o h2 vazio e o ✕ vai
   para a direita sozinho, sem deixar uma faixa alta e vazia em cima. */
.modal__cabecalho h2:empty { display: none; }
.modal__cabecalho h2:empty + .modal__fechar { margin-left: auto; }
.modal__cabecalho:has(h2:empty) { padding: 12px 16px 0; border-bottom: 0; }
.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; }

/* ---- Honorários: alternador entre reais e percentual ---------------------
   O rótulo divide a linha com um par de botões (R$ / %); embaixo aparece só
   o campo do modo escolhido. O "%" fica preso dentro da caixa, à direita. */
.campo-hon__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
/* O par "Valor da causa" / "Valor dos honorários" divide a mesma linha. O
   alternador R$/% é mais alto que um rótulo comum, e sozinho empurrava só a
   caixa da direita para baixo. A medida abaixo vale para os DOIS lados — a
   linha de rótulo da esquerda, a da direita e o próprio alternador —, então
   as caixas começam exatamente na mesma altura, sem depender de somar
   à mão a moldura do alternador. */
.campo--duplo:has(.campo-hon) { --linha-rotulo: 28px; }
.campo--duplo:has(.campo-hon) > .campo > label,
.campo-hon__topo { min-height: var(--linha-rotulo); }
.campo--duplo:has(.campo-hon) > .campo > label { display: flex; align-items: center; }
.campo--duplo:has(.campo-hon) .hon-modo { height: var(--linha-rotulo); }
.hon-modo {
  display: inline-flex; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 7px; overflow: hidden;
}
.hon-modo__op {
  border: 0; background: transparent; cursor: pointer; padding: 2px 10px;
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1.8;
  color: var(--cinza-suave); transition: background .12s, color .12s;
}
.hon-modo__op + .hon-modo__op { border-left: 1px solid var(--borda); }
.hon-modo__op:hover { background: var(--verde-suave); color: var(--verde-escuro); }
.hon-modo__op[aria-pressed="true"] { background: var(--verde); color: var(--sobre-verde); }
.hon-pct { position: relative; display: flex; align-items: center; }
/* sem isto o `display: flex` acima venceria o atributo hidden */
.hon-pct[hidden] { display: none; }
.hon-pct input { padding-right: 30px; }
/* mostrando o valor em reais o "%" sai de cena, e com ele a folga que estava
   reservada para o símbolo (precisa casar a especificidade da regra acima) */
.hon-pct input.hon-pct__campo--reais { padding-right: 12px; }
.hon-pct__sufixo {
  position: absolute; right: 12px; font-size: 14px; font-weight: 600;
  color: var(--cinza-suave); pointer-events: none;
}
.hon-conta { font-variant-numeric: tabular-nums; }

/* ---- Lista dos <select> nativos, com a cara do seletor AdvBox ------------
   Por padrão o navegador desenha a lista do <select> sozinho (aquela faixa
   azul do Windows) e o CSS não alcança. `appearance: base-select` entrega a
   lista para o CSS — é o que permite pintar de verde o item sob o mouse,
   igual ao .sel-adv do "Novo processo". Vale para TODOS os selects do
   sistema. Navegador que ainda não entenda o valor ignora o bloco inteiro e
   continua mostrando a lista do sistema, sem quebrar nada. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }

  /* a caixa fechada mantém a moldura que cada tela já dá a ela; aqui só
     acertamos o que passa a ser do CSS (alinhamento e seta) */
  select {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; text-align: left; cursor: pointer;
  }
  select::picker-icon { color: var(--cinza-suave); transition: transform .15s; }
  select:open::picker-icon { transform: rotate(180deg); }

  ::picker(select) {
    border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao);
    box-shadow: 0 14px 38px rgba(20, 23, 28, .16);
    padding: 8px; margin-top: 6px; max-height: 300px; overflow-y: auto;
  }
  select option {
    padding: 10px 12px; border-radius: 7px; cursor: pointer;
    font-size: 13.5px; color: var(--cinza-texto); background: transparent;
    transition: background .12s, color .12s;
  }
  /* o "certo" que o navegador põe na opção atual: o verde já mostra qual é */
  select option::checkmark { display: none; }
  select option:hover,
  select option:focus,
  select option:checked {
    background: var(--verde); color: var(--sobre-verde);
  }
  select option:disabled,
  select option:disabled:hover {
    background: transparent; color: var(--cinza-suave); cursor: default;
  }
  /* cabeçalho dos grupos de opções (ex.: pastas de documentos) */
  select optgroup {
    padding: 8px 12px 2px; font-size: 11px; font-weight: 700;
    letter-spacing: .4px; color: var(--cinza-suave);
  }
  select optgroup option {
    font-size: 13.5px; font-weight: 400; letter-spacing: normal;
    color: var(--cinza-texto);
  }
  select optgroup option:hover,
  select optgroup option:focus,
  select optgroup option:checked { color: var(--sobre-verde); }
  /* Obs.: o verde do :checked fica só na lista aberta. O texto da opção
     escolhida é copiado para dentro da caixa fechada, mas sem o fundo/cor da
     própria <option> — conferido: a caixa continua com o fundo claro. */
}

/* Grupo de campos que aparece/some em bloco (dados pessoais no PF × PJ):
   herda o respiro do formulário para os campos internos não colarem. */
.form-grupo { display: grid; gap: inherit; }

/* ---- Seletor estilo AdvBox (Origem da pessoa) ---------------------------- */
/* Caixa fechada com a mesma cara dos selects; aberta, vira uma lista com
   busca em cima e opções grandes — o verde da casa marca hover e escolhida. */
.sel-adv { position: relative; }
.sel-adv__botao {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 12px; border: 1px solid var(--borda);
  border-radius: 8px; background: #fbfcfb; color: var(--cinza-texto);
  font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.sel-adv__botao:focus-visible {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .22);
}
.sel-adv__botao svg { color: var(--cinza-suave); flex-shrink: 0; }
.sel-adv__rotulo--vazio { color: var(--cinza-suave); }
.sel-adv__menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 14px 38px rgba(20, 23, 28, .16); padding: 8px;
}
.sel-adv__busca {
  width: 100%; border: 1px solid var(--borda); border-radius: 7px;
  padding: 8px 10px; font: inherit; font-size: 13px; color: var(--cinza-texto);
  background: #fbfcfb; margin-bottom: 6px;
}
.sel-adv__busca:focus { outline: none; border-color: var(--verde); }
.sel-adv__lista { max-height: 240px; overflow-y: auto; display: grid; gap: 2px; }
.sel-adv__opcao {
  border: 0; background: transparent; text-align: left; width: 100%;
  font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; color: var(--cinza-texto);
  padding: 11px 12px; border-radius: 7px; cursor: pointer;
  transition: background .12s, color .12s;
}
.sel-adv__opcao:hover, .sel-adv__opcao.ativo { background: var(--verde); color: var(--sobre-verde); }
/* "+ Criar «X»": aparece abaixo da lista quando o gestor digita um nome de
   atividade que ainda não existe. Separado por um filete, para não passar por
   mais uma opção da lista. */
.sel-adv__criar {
  width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 0; border-top: 1px solid var(--borda); border-radius: 0 0 7px 7px;
  background: transparent; text-align: left; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--verde-escuro); cursor: pointer;
}
.sel-adv__criar:hover { background: var(--verde-suave); }
.sel-adv__criar:disabled { opacity: .6; cursor: progress; }

/* ---- Configurações: lista de atividades do escritório -------------------- */
.ativ-cfg { list-style: none; margin: 12px 0 0; padding: 0; }
.ativ-cfg__item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--borda);
}
.ativ-cfg__item:last-child { border-bottom: 0; }
/* em caixa alta como as opções da lista suspensa (.sel-adv__opcao) */
.ativ-cfg__nome {
  flex: 1; font-size: 13.5px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase;
}
.ativ-cfg__acoes { display: flex; align-items: center; gap: 6px; }
/* Pontos da atividade: um campo curto, colado no rótulo "pts", para a linha
   continuar sendo uma linha — e não um formulário dentro da lista. */
.ativ-cfg__pts { display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.ativ-cfg__pts input {
  width: 58px; text-align: right; border: 1px solid var(--borda);
  border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px;
  background: var(--cartao); color: var(--cinza-texto);
}
.ativ-cfg__pts input:focus { outline: none; border-color: var(--verde); }
.ativ-cfg__pts-rotulo { font-size: 11.5px; color: var(--cinza-suave); }
body.escuro .ativ-cfg__pts input { background: #151d19; color: #e6ebe8; }
/* O campo de pontos da linha "nova atividade" não estica junto com o nome. */
.ativ-cfg__nova .ativ-cfg__nova-pts { flex: 0 0 78px; text-align: right; }
.ativ-cfg__acoes .acao-icone[disabled] { opacity: .3; cursor: default; }
.ativ-cfg__nova { display: flex; gap: 8px; margin-top: 14px; }
.ativ-cfg__nova input {
  flex: 1; border: 1px solid var(--borda); border-radius: 8px;
  padding: 9px 11px; font: inherit; font-size: 13.5px;
  background: var(--cartao); color: var(--cinza-texto);
}
.ativ-cfg__nova input:focus { outline: none; border-color: var(--verde); }
body.escuro .ativ-cfg__nova input { background: #151d19; color: #e6ebe8; }
/* O valor escolhido aparece em maiúsculas (como as opções); o placeholder
   "Selecione…" continua em caixa normal. */
.sel-adv__rotulo { text-transform: uppercase; }
.sel-adv__rotulo--vazio { text-transform: none; }
/* Onde as OPÇÕES já vêm em caixa normal — o título da atividade —, o valor
   escolhido acompanha: sem isso a lista mostra "Cumprir Prazo" e o campo
   fechado, logo abaixo, mostra "CUMPRIR PRAZO". */
.sel-adv--caixa-normal .sel-adv__rotulo,
.sel-adv--caixa-normal .sel-adv__opcao { text-transform: none; letter-spacing: 0; }
/* Lista dependente ainda sem opções (tipo de ação antes do grupo) */
.sel-adv__nada { padding: 10px 12px; font-size: 12.5px; color: var(--cinza-suave); margin: 0; }

/* ---- Alternador Pessoa física × Pessoa jurídica (estilo AdvBox) ---------- */
.tp-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: #eef1f0; border: 1px solid var(--verde);
  border-radius: 10px; padding: 3px;
}
.tp-toggle__opcao {
  border: 0; background: transparent; color: var(--cinza-suave);
  font: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; transition: background .15s, color .15s;
}
.tp-toggle__opcao:hover { color: var(--preto); }
.tp-toggle__opcao.ativo {
  background: var(--cartao); color: var(--preto); font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 23, 28, .12);
}

body.escuro .sel-adv__botao, body.escuro .sel-adv__busca {
  background: #0e1613; color: var(--cinza-texto); border-color: var(--borda);
}
body.escuro .sel-adv__menu {
  background: #151d19; box-shadow: 0 14px 38px rgba(0, 0, 0, .5);
}
body.escuro .sel-adv__opcao:hover, body.escuro .sel-adv__opcao.ativo {
  background: var(--verde); color: var(--sobre-verde);
}
body.escuro .tp-toggle { background: #0e1613; }
body.escuro .tp-toggle__opcao.ativo { background: #232e29; color: #eef4f1; }

/* ---- 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;
  /* stretch, e NÃO start: a coluna curta ao lado de uma comprida precisa
     ter altura para receber o cartão. Com "start" ela terminava bem acima
     do ponteiro de quem arrastava do fim de uma fila longa — e o cartão
     não tinha onde ser solto na etapa vizinha. */
  align-items: stretch;
}
.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; }
/* Há quanto tempo o lead entrou — só aparece no Marketing, onde a coluna é
   ordenada por chegada. É a legenda da ordem: quem está no topo esperou mais. */
.kanban-card__chegada { color: var(--cinza-suave); font-size: 11.5px; margin-left: auto; }
.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; }
}

/* Vórtice em esmeralda + logotipo embaixo, centralizados no topo do cartão */
.login .marca__logo {
  width: 50px; height: 50px; color: var(--verde);
  display: block; margin: 0 auto 14px;
}
.login .marca__nome {
  height: 19.6px; color: var(--preto);
  margin: 0 auto 28px;
  /* em tela muito estreita o desenho encolhe em vez de vazar do cartão */
  max-width: 100%;
}

/* 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: #0e1613; border-color: transparent; }
body.escuro .login .campo input:focus { background: #0b110e; 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: 30px; height: 30px; border-radius: 50%;
  background: var(--verde);
  color: var(--sobre-verde); display: grid; place-items: center; font-weight: 700;
  font-size: 12px; flex-shrink: 0;
}
.usuario-atual__info { flex: 1; min-width: 0; }
.usuario-atual__nome {
  font-size: 12.5px; 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; }
/* Incluir parte: tracejado para não se confundir com as partes que já estão
   no processo — ali ainda não há ninguém, é um convite. Mesma altura, mesmo
   raio e mesmo recuo das linhas de parte, para a seção não desalinhar. */
.proc-parte-convite {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 6px; border: 1px dashed var(--borda); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 12px; background: transparent;
  color: var(--cinza-suave); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .15s;
  /* mesma altura da linha de uma parte: a seção vira uma lista de blocos
     iguais, o último tracejado. Sem isso o convite fica com metade da
     altura dos vizinhos e a seção parece truncada no fim. */
  min-height: 54px;
}
.proc-parte-convite:hover {
  border-color: var(--verde); color: var(--verde);
  background: rgba(5, 150, 105, .04);
}
.proc-parte-convite span { font-size: 15px; line-height: 1; }
.proc-parte--nova { border-style: dashed; gap: 8px; }
.proc-parte__escolha {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: 8px; font-size: 14px; font-family: inherit;
  color: var(--cinza-texto); background: #fbfcfb;
  /* mesma métrica do .botao--mini que fica ao lado, para os três controles
     da linha terminarem na mesma altura. No toque, os dois crescem juntos
     pela regra de alvo mínimo lá embaixo — por isso nada de altura fixa. */
  padding: 4px 10px; line-height: 1.4;
}
.proc-parte__escolha:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .22);
}
body.escuro .proc-parte__escolha {
  background: #0e1613; color: var(--cinza-texto); border-color: var(--borda);
}
.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; }
/* Data vencida: só a cor muda. O negrito deixava as duas colunas de data com
   pesos diferentes de linha para linha, e a lista ficava manchada. */
.ativ-vencida { color: var(--vermelho); }
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);
}
/* A entrada da busca é um contenteditable, não um <input> (ver index.html).
   Por isso precisa imitar o campo: uma linha só, rolando na horizontal
   quando o texto passa da largura, e sem a barra de rolagem aparecendo. */
.busca-topo__entrada {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 0;
  font: inherit; font-size: 13.5px; color: var(--cinza-texto);
  outline: none; cursor: text;
  white-space: pre; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.busca-topo__entrada::-webkit-scrollbar { display: none; }
/* o "placeholder": contenteditable não tem o atributo, então é o CSS que
   desenha o texto de exemplo enquanto o campo estiver sem texto.
   O nome da classe é comprido de propósito: existe uma `.vazio` genérica lá
   em cima (a dos blocos "nada aqui"), e ela CENTRALIZA o texto — foi o que
   jogou o cursor para o meio do campo.
   `width: 0` com `overflow: visible` é o pulo do gato: o texto aparece, mas
   não ocupa lugar nenhum, então o cursor pisca no começo do campo em vez de
   depois da frase. Continua sendo inline-block (e não absoluto) de propósito
   — é ele que dá a linha de texto que sustenta a altura do campo vazio. */
.busca-topo__entrada--vazio::before {
  content: attr(data-exemplo); color: var(--cinza-suave); pointer-events: none;
  display: inline-block; width: 0; overflow: visible; white-space: nowrap;
}
/* Envoltório só para o Chrome (ver index.html): `display: contents` faz a
   caixa do <form> sumir do layout, e o campo continua sendo filho direto do
   .campo — nada muda na tela. */
.campo-secreto { display: contents; }

.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; }
/* A linha é a MOLDURA (fundo do hover e espaçamento); quem abre o registro é
   o .busca-res__abrir de dentro, e os atalhos ficam ao lado dele. */
.busca-res__item {
  position: relative;
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border-radius: 10px;
}
.busca-res__abrir {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-start; gap: 12px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 0; font: inherit; color: inherit;
}
.busca-res__item:hover, .busca-res__item.marcado { background: var(--verde-suave); }
/* Os atalhos FLUTUAM sobre a direita da linha, como na AdvBox — mesma solução
   já usada na tabela de processos (.proc-acoes). Se ocupassem lugar na linha,
   encurtariam o nome e o número do processo o tempo todo, inclusive quando
   estão invisíveis; e é justamente o nome que a pessoa está lendo. O degradê
   apaga o texto que passa por baixo, em vez de cortá-lo num talho seco. */
.busca-res__item .acoes-hover {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  padding: 3px 2px 3px 18px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(236, 253, 245, 0) 0, #ecfdf5 16px);
}
body.escuro .busca-res__item .acoes-hover {
  background: linear-gradient(90deg, rgba(12, 33, 26, 0) 0, #0c211a 16px);
}
.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: #232e29; }
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: #232e29; }
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: 16px 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: 4px 0 20px; justify-content: center; }
.app.encolhido .marca__nome,
.app.encolhido .menu__grupo,
.app.encolhido .tema-toggle,
.app.encolhido .usuario-atual__info { display: none; }
.app.encolhido .lateral__encolher {
  position: absolute; top: 58px; 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: 14px; margin-bottom: 20px; }
.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: 12.5px; font-weight: 600; 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: #101916; 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: 22px; font-weight: 600; 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: #232e29; }
.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: #232e29; 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: #232e29; }
.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: 15px; font-weight: 600; 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: #232e29; 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: #0d1411;
  --cartao: #151d19;
  --borda: #26332d;
  --cinza-texto: #dce4df;
  --cinza-suave: #8d9a94;
  /* --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: #121a16;
  --lateral-texto: #e8efea;
  --lateral-suave: #98a5a0;
  --lateral-hover: #1b251f;
  --lateral-borda: #232e29;
  --linha-saldo: #cfd8d3;
}
body.escuro .cabecalho h1,
body.escuro .bloco h2,
body.escuro .bloco__cabecalho h2,
body.escuro .modal__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,
body.escuro .sino__nome { color: #eef4f1; }
body.escuro .botao { background: #1e2823; 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: #151d19; 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: #1e2823; 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: #0e1613; color: var(--cinza-texto); border-color: var(--borda);
}
body.escuro .tabela th { border-color: var(--borda); }
body.escuro .tabela td { border-color: #26332d; }
body.escuro .tabela tbody tr:hover { background: #1b251f; }
body.escuro .modal__caixa, body.escuro .modal__cabecalho { background: #151d19; }
body.escuro .kanban-coluna { background: #101916; }
body.escuro .kanban-card { background: #1b241f; border-color: var(--borda); }
body.escuro .cal-dia { background: #101916; border-color: var(--borda); }
body.escuro .cal-dia--fora { background: #0c0f13; }
body.escuro .acao-linha:hover { background: #26332d; color: #fff; }
body.escuro .google-link input { background: #0e1613; color: var(--cinza-suave); }
body.escuro .barra-h__trilho, body.escuro .rank-barra { background: #101916; }
body.escuro .barra-h__val, body.escuro .podio-nome, body.escuro .rank-nome { color: #eef2f7; }
body.escuro .podio-card { background: #151d19; }
body.escuro .rank-linha { border-color: #26332d; }

/* ---- Toques finais de design --------------------------------------------- */
/* Sem "levantar" o cartão no hover: a AdvBox é estática e flat. */
/* 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: 14px; margin-bottom: 20px;
  align-items: start;
}
.painel-grade .bloco { min-height: 220px; }
/* O bloco tem altura mínima, então o miolo do Taskscore precisa crescer e
   centralizar o conteúdo — senão o aviso de "nenhuma tarefa" fica colado no
   topo, com um vão grande embaixo. */
.bloco--taskscore { display: flex; flex-direction: column; }
.bloco--taskscore #taskscore-barras {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.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: 13px; color: var(--cinza-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ativ-cont {
  font-size: 12.5px; font-weight: 600; 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: 10px 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: 13.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.compromisso__txt span { font-size: 12px; color: var(--cinza-suave); }
.compromisso__prazo { font-size: 12px; 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; }
/* Data do evento e prazo fatal em duas colunas fixas, alinhadas à direita —
   é o que faz uma linha cair em cima da outra. O rótulo de cada coluna fica
   no cabeçalho da lista (.compromisso--cab), não em cada linha. */
.compromisso__datas { display: flex; gap: 16px; flex-shrink: 0; }
.compromisso__datas .compromisso__prazo { width: 78px; text-align: center; }
.compromisso--cab {
  padding-top: 0; padding-bottom: 6px; cursor: default; border-bottom-color: transparent;
}
.compromisso--cab:hover { background: transparent; }
.compromisso--cab .compromisso__prazo {
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}
/* Vão do avatar no cabeçalho: reserva a largura da coluna sem desenhar nada.
   NÃO pode usar a classe .avatar-mini para isso — ela pinta o fundo, e no
   tema escuro o vão virava uma bola branca ao lado dos rótulos. */
.compromisso__cab-vao { width: 26px; flex-shrink: 0; }
.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); }
/* Mesma altura dos irmãos escritos, mas estreito: dentro só cabe o desenho. */
.det-btn--icone { display: inline-flex; align-items: center; padding: 7px 12px; }
.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;
}
/* A descrição é TEXTO DA PESSOA, e sai exatamente como foi escrito: quem
   digita "Elaborar Kit Previdenciário e Solicitar Certidão de Nascimento"
   lê isso ao abrir a tarefa. A caixa alta daqui era herdada das opções da
   lista de atividades (.sel-adv__opcao), que é um catálogo fixo do
   escritório — mas aplicada ao que a pessoa escreveu ela gritava a frase
   inteira e ainda apagava as maiúsculas que ela mesma tinha posto.
   (O letter-spacing ia junto: existia só para a caixa alta respirar.) */
.det-desc {
  font-size: 13.5px; color: var(--cinza-suave); 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); }
/* "Criado por": quem passou a tarefa, com data e há quanto tempo — o nome
   pesa (é a informação), a data acompanha em cinza, como na ADVBOX. Em tela
   estreita a data desce para a linha de baixo em vez de espremer o nome. */
.det-campo--criado { align-items: flex-start; }
.det-criado { flex-wrap: wrap; row-gap: 2px; }
.det-criado__quando { font-weight: 400; font-size: 13px; color: var(--cinza-suave); }
.det-criado__ha { font-size: 12.5px; }
.det-criado__sem {
  font-weight: 400; font-size: 12.5px; color: var(--cinza-suave); font-style: italic;
}
.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: #26332d; }
body.escuro .ativ-cont { background: #101916; color: #eef4f1; }
body.escuro .compromisso:hover { background: #1b251f; }
body.escuro .mini-cal__dia { background: #101916; }
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: #151d19; }
body.escuro .det-titulo, body.escuro .det-bloco strong, body.escuro .compromisso__txt strong { color: #eef4f1; }
body.escuro .avatar-mini--vazio { background: #101916; }

/* ---- 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: 2px 8px; font-size: 11.5px; font-weight: 600;
  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 1 da AdvBox): trilho cinza em pílula, e a aba ativa
   é um "cartão" branco dentro dele — não a linha sublinhada de antes. */
.painel-abas {
  display: inline-flex; gap: 2px; margin-bottom: 16px; overflow-x: auto;
  background: #eef1f0; border-radius: 12px; padding: 4px; max-width: 100%;
}
/* Linha do topo do painel: abas à esquerda e o botão de backup na mesma
   altura, à direita. As abas perdem a margem de baixo porque quem espaça
   agora é a própria linha. */
.painel-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
/* min-width:0 para as abas rolarem de lado no celular em vez de empurrar o
   botão para fora da tela. */
.painel-topo .painel-abas { margin-bottom: 0; min-width: 0; }
.painel-topo > .botao { flex: none; }
/* No Financeiro quem fica à direita é o grupo de botões de lançar. */
.painel-topo > .agenda-nav { flex: none; }
/* "Minhas | Toda a equipe": a mesma pílula do Taskscore, na linha das abas —
   nunca encolhe, para o rótulo não quebrar no meio quando as abas rolam. */
.painel-topo > .ts-modo { flex: none; margin-left: auto; }
.painel-topo > .ts-modo + .botao { margin-left: 0; }
/* Numa tela estreita as abas ficam com uma linha só para elas: espremidas ao
   lado do escopo e do backup, sobravam 30px de trilho e nem dava para ler o
   nome da aba antes de rolar. */
@media (max-width: 860px) {
  .painel-topo > .painel-abas { flex: 1 1 100%; }
  .painel-topo > .ts-modo { margin-left: 0; }
}
.painel-aba {
  border: 0; background: transparent; color: var(--cinza-suave);
  font-family: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px;
  cursor: pointer; white-space: nowrap; border-radius: 9px;
  transition: color .15s, background .15s;
}
.painel-aba:hover { color: var(--preto); }
.painel-aba.ativo {
  background: var(--cartao); color: var(--preto); font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 23, 28, .1);
}

/* ---- Taskscore no desenho da AdvBox -------------------------------------- */
/* Alternador mensal | diário, em pílula, no canto do bloco */
.ts-modo { display: inline-flex; background: #eef1f0; border-radius: 8px; padding: 2px; }
.ts-modo__btn {
  border: 0; background: transparent; color: var(--cinza-suave);
  font: inherit; font-size: 11.5px; padding: 4px 10px; border-radius: 6px;
  cursor: pointer; white-space: nowrap;
}
.ts-modo__btn.ativo { background: var(--cartao); color: var(--preto); font-weight: 600; }
body.escuro .ts-modo { background: #0e1613; }
body.escuro .ts-modo__btn.ativo { background: #232e29; color: #eef4f1; }

/* Séries: o circulozinho colorido acende quando a série está ligada */
.ts-series { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.ts-serie {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: var(--cinza-suave);
  font: inherit; font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  cursor: pointer; padding: 2px 0; white-space: nowrap;
}
.ts-serie__ponto {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 1.6px solid currentColor; background: transparent;
}
.ts-serie:hover { color: var(--preto); }
.ts-serie.ativo { color: var(--preto); font-weight: 600; }
.ts-serie--atual.ativo { color: var(--verde-escuro); }
.ts-serie--atual.ativo .ts-serie__ponto { background: var(--verde); border-color: var(--verde); }
.ts-serie--anterior.ativo .ts-serie__ponto { background: #7c8798; border-color: #7c8798; }
.ts-serie--meta.ativo .ts-serie__ponto { background: var(--preto); border-color: var(--preto); }
body.escuro .ts-serie:hover, body.escuro .ts-serie.ativo { color: #eef4f1; }
body.escuro .ts-serie--meta.ativo .ts-serie__ponto { background: #eef0f3; border-color: #eef0f3; }

/* Visão mensal: avatar + nome à esquerda, barras à direita, régua embaixo */
.ts-mensal { display: grid; gap: 12px; }
.ts-linha { display: flex; align-items: center; gap: 10px; }
.ts-pessoa {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 54px; flex-shrink: 0;
}
.ts-avatar { width: 32px; height: 32px; font-size: 11px; }
.ts-nome {
  font-size: 10.5px; color: var(--cinza-suave); max-width: 54px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ts-barras { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ts-barra-linha { display: flex; align-items: center; gap: 6px; }
.ts-barra {
  height: 20px; border-radius: 4px; display: flex; align-items: center;
  justify-content: flex-end; padding: 0 6px;
  transition: width .3s;
}
.ts-barra__val { font-size: 10.5px; font-weight: 600; color: #fff; white-space: nowrap; }
/* número fora da barra (quando ela é curta demais para caber por dentro) */
.ts-barra__val--fora { color: var(--cinza-suave); }
.ts-barra--atual { background: var(--verde); }
.ts-barra--anterior { background: #7c8798; }
.ts-barra--meta { background: var(--preto); }
body.escuro .ts-barra--meta { background: #4a525e; }
/* régua com a escala, alinhada com o começo das barras */
.ts-regua {
  display: flex; justify-content: space-between; margin-left: 64px;
  font-size: 10px; color: var(--cinza-suave);
}

/* Visão diária: curva acumulada do mês */
.ts-grafico { width: 100%; height: auto; display: block; }
.ts-grade { stroke: var(--borda); stroke-width: 1; }
.ts-eixo { font-size: 9px; fill: var(--cinza-suave); }
.ts-curva { fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.ts-curva--atual { stroke: var(--verde); }
.ts-curva--anterior { stroke: #7c8798; }
.ts-curva--meta { stroke: var(--preto); stroke-dasharray: 3 2; }
body.escuro .ts-curva--meta { stroke: #eef0f3; }

body.escuro .painel-abas { background: #0e1613; }
body.escuro .painel-aba.ativo { background: #232e29; color: #eef4f1; }
body.escuro .taskscore-opcao { background: #151d19; }
.taskscore-total { font-size: 13px; color: var(--cinza-suave); font-weight: 600; }
/* total do Taskscore agora fica embaixo do gráfico, discreto */
#taskscore-total { display: block; margin-top: 12px; font-size: 12px; text-align: center; }
/* Sem pontos no período o texto fica vazio, mas a margem continuava valendo e
   sobrava um vão embaixo do aviso. Vazio, some de vez. */
#taskscore-total:empty { display: none; }

/* ---- Ícones do menu (SVG de linha) --------------------------------------- */
.menu__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; opacity: .9;
}
.menu__icone svg { width: 16px; height: 16px; 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;
}
/* Avatar do escritório inteiro: o vórtice da marca no lugar das iniciais.
   O svg herda a cor do texto, então serve nos dois temas sem regra extra. */
.avatar-mini--marca svg { width: 68%; height: 68%; display: block; }
.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: #151d19; }
body.escuro .crm-stat strong { color: #eef4f1; }
body.escuro .crm-resp__chip { background: #151d19; }
body.escuro .crm-resp__menu { background: #151d19; }
body.escuro .crm-resp__busca { background: #0e1613; color: var(--cinza-texto); }
body.escuro .crm-resp__limpar:hover { background: #101916; }
body.escuro .crm-resp__item-qtd { background: #101916; }
body.escuro .mini-tag--caso { background: #101916; }
/* --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: #101916; }
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;
  /* referência para a lista do "!" no celular (ver .parados__pop) */
  position: relative;
}
/* a busca fica à esquerda; o grupo da direita é empurrado inteiro para lá */
.topbar__direita { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.topbar__equipe { display: flex; align-items: center; }
.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); }

/* ---- Aviso de processo parado: o "!" ao lado da busca -------------------- */
/* De propósito DISCRETO: uma bolinha do tamanho de uma letra, em âmbar bem
   apagado, que só ganha cor quando o mouse passa ou a lista está aberta.
   É um lembrete, não um alarme — e some sozinho quando não há caso parado. */
.parados { position: relative; display: flex; align-items: center; }
.parados__alerta {
  width: 21px; height: 21px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(207, 154, 46, .45); background: transparent;
  color: var(--ambar); font: inherit; font-size: 12.5px; font-weight: 700;
  line-height: 1; display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.parados__alerta:hover,
.parados__alerta[aria-expanded="true"] {
  background: rgba(207, 154, 46, .14); border-color: var(--ambar);
}
.parados__alerta:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(207, 154, 46, .28);
}
.parados__pop {
  position: absolute; z-index: 40; top: calc(100% + 9px); left: 0;
  /* 340px: o suficiente para um nome comprido e o tipo de ação caberem numa
     linha, sem a faixa vazia à direita que sobrava com a caixa mais larga. */
  width: 340px; max-width: 82vw; max-height: 62vh; overflow-y: auto;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(20, 23, 28, .16); padding: 5px;
}
.parados__titulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--cinza-suave); font-weight: 600; padding: 5px 9px 6px;
}
/* A linha inteira abre o processo; o nome, dentro dela, abre o cliente.
   As três linhas andam JUNTAS (entrelinha curta e sem folga entre elas): são
   um bloco só de informação, e o respiro fica entre um caso e outro. */
.parados__item { padding: 5px 9px; border-radius: 8px; cursor: pointer; }
.parados__item:hover { background: var(--verde-suave); }
.parados__item:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--verde) inset;
}
/* Duas classes de propósito: o `.nome-link` (mais abaixo nesta folha) usa o
   atalho `font: inherit`, que leva o tamanho junto — sem este peso a mais, o
   nome sairia com o tamanho do corpo da página. */
.parados__pop .parados__nome { font-size: 13.5px; line-height: 1.3; }
.parados__linha {
  font-size: 12.5px; color: var(--cinza-suave); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.parados__dias { color: var(--ambar); font-weight: 600; }
body.escuro .parados__pop { box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
/* No celular o "!" fica no MEIO da linha, então pendurar a lista nele (por
   um lado ou pelo outro) sempre vaza da tela. Ali ela deixa de se prender ao
   botão e passa a ocupar a largura da barra inteira, logo abaixo dela — daí
   o .parados voltar a ser estático e o .topbar virar a referência. */
@media (max-width: 860px) {
  .parados { position: static; }
  .parados__pop { left: 0; right: 0; width: auto; max-width: none; }
}

/* ---- Sino do financeiro (avisos de recebimento e pagamento) -------------- */
/* Mesmo desenho do "!" dos parados, logo acima: caixa pendurada no botão, e
   no celular esticada na barra inteira. O que muda é o número em cima do
   sino — é ele que diz, sem abrir nada, quanta coisa está esperando. */
.sino { position: relative; display: flex; align-items: center; }
.sino__botao {
  position: relative; width: 27px; height: 27px; padding: 0; border-radius: 50%;
  border: 1px solid var(--borda); background: transparent;
  color: var(--cinza-suave); display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sino__botao svg { width: 16px; height: 16px; }
.sino__botao:hover,
.sino__botao[aria-expanded="true"] {
  background: var(--verde-suave); border-color: var(--verde); color: var(--verde-escuro);
}
.sino__botao:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(5, 150, 105, .28);
}
/* O número encosta no canto do sino em vez de ficar ao lado: assim a barra
   não muda de largura quando o aviso aparece ou some. */
.sino__conta {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--vermelho); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
}
.sino__pop {
  /* pendurada pela DIREITA: o sino agora vive no canto, e ancorada à
     esquerda a caixa de 360px vazaria para fora da tela. */
  position: absolute; z-index: 40; top: calc(100% + 9px); right: 0;
  width: 360px; max-width: 82vw; max-height: 66vh; overflow-y: auto;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(20, 23, 28, .16); padding: 5px;
}
body.escuro .sino__pop { box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
.sino__titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--cinza-suave); font-weight: 600; padding: 6px 9px;
}
.sino__limpar {
  border: 0; background: transparent; color: var(--verde-escuro);
  font: inherit; font-size: 11px; font-weight: 600; text-transform: none;
  letter-spacing: 0; cursor: pointer; padding: 0;
}
.sino__limpar:hover { text-decoration: underline; }
.sino__vazio { padding: 10px 9px 14px; font-size: 13px; color: var(--cinza-suave); }
.sino__item {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
}
.sino__item:hover { background: var(--verde-suave); }
.sino__item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--verde) inset; }
/* O aviso já visto continua na lista (o dinheiro não entrou só porque
   alguém leu), mas apaga: quem abre o sino tem de achar o novo de relance. */
.sino__item--lido { opacity: .55; }
/* Bolinha da esquerda: verde entra, âmbar sai. É o que separa "cobrar" de
   "pagar" antes de a pessoa ler qualquer palavra. */
.sino__marca {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px;
  background: var(--verde);
}
.sino__marca--pagar { background: var(--ambar); }
/* prazo fatal é o que não se remarca: vermelho, como na tabela e na agenda */
.sino__marca--prazo { background: var(--vermelho); }
.sino__marca--compromisso { background: var(--preto); }
body.escuro .sino__marca--compromisso { background: #8d9a94; }
.sino__corpo { flex: 1; min-width: 0; }
.sino__nome {
  font-size: 13.5px; font-weight: 600; color: var(--preto); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sino__linha {
  font-size: 12.5px; color: var(--cinza-suave); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sino__linha--pedido { color: var(--ambar); white-space: normal; }
.sino__valor { font-weight: 600; color: var(--cinza-texto); }
.sino__quando { font-weight: 600; }
.sino__quando--hoje { color: var(--ambar); }
.sino__quando--atraso { color: var(--vermelho); }
.sino__baixa {
  flex-shrink: 0; align-self: center; border: 1px solid var(--borda);
  background: transparent; color: var(--cinza-suave); border-radius: 7px;
  font: inherit; font-size: 11.5px; padding: 3px 8px; cursor: pointer;
}
.sino__baixa:hover {
  border-color: var(--verde); color: var(--verde-escuro); background: var(--cartao);
}
/* No celular o sino fica no meio da barra: a lista larga da barra inteira,
   como a dos parados, senão vaza pela lateral da tela. */
@media (max-width: 860px) {
  .sino { position: static; }
  .sino__pop { left: 0; right: 0; width: auto; max-width: none; }
  .topbar__direita { gap: 8px; }
}

/* ---- 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: #151d19; }

body.escuro .add-menu button:hover, body.escuro .dia-selecionado { background: #1b251f; }
body.escuro .comp-grupo__tit span { background: #101916; }
body.escuro .filtro-painel, body.escuro .filtro-painel__topo h2 { background: #151d19; }
body.escuro .filtro-painel__topo h2 { background: transparent; color: #eef4f1; }
/* O avatar usa --preto como FUNDO, e --preto não muda no escuro: ficava um
   disco preto-azulado sumindo no fundo esverdeado. Aqui ele clareia. */
body.escuro .topbar__avatar { border-color: var(--fundo); background: #2f3d37; }

/* ---- 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;
  display: inline-flex; align-items: center;
}
.hist__excluir:hover { color: var(--vermelho); }

body.escuro .composer, body.escuro .composer__tipo { background: #151d19; }
body.escuro .composer__texto, body.escuro .composer__campo input { background: #0e1613; 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: #26332d; }
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; }
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: 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; }
/* "Valores e organização": cartãozinho discreto com seta própria, em vez do
   summary cru do navegador. */
.form-dobra {
  border: 1px solid var(--borda); border-radius: 10px;
  background: #fbfcfb; padding: 10px 14px;
}
.form-dobra > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--cinza-suave);
  padding: 2px 0; list-style: none; display: flex; align-items: center; gap: 9px;
}
.form-dobra > summary::-webkit-details-marker { display: none; }
.form-dobra > summary::before {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.6px solid var(--cinza-suave); border-bottom: 1.6px solid var(--cinza-suave);
  transform: rotate(-45deg); transition: transform .15s;
}
.form-dobra[open] > summary::before { transform: rotate(45deg); }
.form-dobra > summary:hover { color: var(--preto); }
.form-dobra__nota { font-weight: 400; font-size: 12px; color: var(--cinza-suave); }
.form-dobra[open] { display: grid; gap: 14px; padding-bottom: 14px; }
body.escuro .form-dobra { background: #0e1613; }
/* SEM MOLDURA (prospeccao). Dentro da janela do cadastro, a caixa com borda
   e fundo proprio virava um quadro dentro do outro. Aqui a dobra e so uma
   linha de separacao com o texto que abre. */
.form-dobra--limpa {
  border: 0; border-top: 1px solid var(--borda); border-radius: 0;
  background: transparent; padding: 16px 0 0;
}
.form-dobra--limpa[open] { padding-bottom: 0; }
body.escuro .form-dobra--limpa { background: transparent; border-top-color: #26332d; }
.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); }
.alvo__cab .link-botao, .prosp-linha1 .link-botao {
  text-decoration: none; color: inherit;
}
.alvo__cab .link-botao:hover strong,
.prosp-linha1 .link-botao:hover strong { text-decoration: underline; }

/* 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. */
/* Cinco colunas: nome, quem é, cidade, próximo contato e o botão. Com a
   etapa da relação, a cadência e o placar de indicações fora da lista, a
   tabela cabe na tela sem rolagem lateral. */
#tabela-prospeccao { table-layout: fixed; min-width: 700px; }
#tabela-prospeccao th:nth-child(1) { width: 34%; }
#tabela-prospeccao th:nth-child(2) { width: 20%; }
#tabela-prospeccao th:nth-child(3) { width: 18%; }
#tabela-prospeccao th:nth-child(4) { width: 16%; text-align: center; }
#tabela-prospeccao th:nth-child(5) { width: 12%; 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) {
  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); }

.mini-tag--script { background: var(--verde-suave); color: var(--verde-escuro); }

body.escuro .gaveta { background: #151d19; }
body.escuro .gaveta__busca { background: #101916; border-color: #26332d; color: #cfd8e3; }
body.escuro .gaveta__familia-n, body.escuro .sc__usada { background: #232e29; }
body.escuro .gaveta__familia--sugerida { background: #10261e; }
body.escuro .sc__versao { background: #151d19; border-color: #26332d; }
body.escuro .sc__versao.ativo { background: #eef4f1; border-color: #eef4f1; color: #101916; }
body.escuro .gaveta__titulo strong { color: #eef4f1; }
body.escuro .gaveta__topo strong, body.escuro .sc__nome { color: #eef4f1; }
body.escuro .hoje-placar { background: #151d19; }
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: #101916; }
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); }
/* No escuro o --preto continua preto (ele também é FUNDO em vários lugares),
   então a aba ativa ficava texto quase invisível e a inativa, apagada — o
   mesmo remendo que .det-aba já tinha. */
body.escuro .prosp-aba { color: #a9b5af; }
body.escuro .prosp-aba:hover { color: #eef4f1; }
body.escuro .prosp-aba.ativo { color: #eef4f1; border-bottom-color: #eef4f1; }

.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: #101916; }
body.escuro .roteiro-item:hover, body.escuro .prosp-item--ancora { background: #1b251f; }
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: #0e1613; }
body.escuro .prosp-linha1 strong { color: #eef4f1; }
body.escuro .prosp-item { border-color: #26332d; }

/* ---- 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; }

/* ---- Aviso de backup atrasado (Painel, só gestor) ------------------------ */
/* Mesmo desenho dos aniversariantes, com a tarja vermelha do lado: é aviso de
   risco de perder dado, então precisa saltar sem virar susto. */
.aviso-backup {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--cartao); border: 1px solid var(--borda);
  border-left: 4px solid var(--vermelho);
  border-radius: var(--raio); padding: 12px 16px; box-shadow: var(--sombra);
  margin-bottom: 16px;
}
.aviso-backup__titulo {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--vermelho);
}
.aviso-backup__texto { font-size: 13.5px; color: var(--cinza-texto); flex: 1; min-width: 220px; }
/* No escuro o #b3261e do --vermelho fica em 2,6:1 contra o cartão — ilegível.
   Este vermelho claro dá 6,2:1 e mantém a leitura de "alerta". */
body.escuro .aviso-backup { border-left-color: #f87171; }
body.escuro .aviso-backup__titulo { color: #f87171; }

/* ---- 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: #151d19; }
body.escuro .aniv-item { background: #0e1613; }
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: #232e29; 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: #151d19; }
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: #151d19; }

@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;
}
/* A busca do topo é a exceção: quem mostra o foco dela é o contorno verde da
   caixa inteira (.busca-topo__campo:focus-within). O anel preto desenhava um
   retângulo preto DENTRO do verde. Enquanto era um <input>, a regra
   `.busca-topo input:focus` já era específica o bastante para barrar o anel;
   o elemento editável que a substituiu perdeu essa proteção, então a exceção
   passa a ser dita aqui, ao lado da regra que ela contorna. */
.busca-topo__entrada:focus-visible { outline: none; }

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. */
/* Colunas fixas (como na AdvBox): a parte tem espaço para o nome inteiro em
   duas linhas, e datas/número não quebram. Sem isso o nome vinha empilhado
   letra a letra numa coluna espremida. */
/* Seis colunas somando 100%. A coluna "Editar/Excluir" do fim saiu: as duas
   ações já vivem nos ícones que aparecem no hover, como na ADVBOX, e o espaço
   que ela ocupava foi para o nome da parte (20% → 28%), que agora cabe em duas
   linhas em vez de empilhar uma palavra por linha. */
.tabela--proc { table-layout: fixed; }
.tabela--proc th:nth-child(1), .tabela--proc td:nth-child(1) { width: 28%; }
.tabela--proc th:nth-child(2), .tabela--proc td:nth-child(2) { width: 16%; }
.tabela--proc th:nth-child(3), .tabela--proc td:nth-child(3) { width: 17%; }
.tabela--proc th:nth-child(4), .tabela--proc td:nth-child(4) { width: 11%; }
.tabela--proc th:nth-child(5), .tabela--proc td:nth-child(5) { width: 16%; }
.tabela--proc th:nth-child(6), .tabela--proc td:nth-child(6) { width: 12%; }
.tabela--proc td { vertical-align: middle; }
#tabela-processos .nome-link { white-space: normal; text-align: left; }
/* Os ícones do hover moram DENTRO da última célula, flutuando à direita: como
   na ADVBOX, eles passam por cima da data do andamento em vez de morar numa
   coluna própria. A faixa leva o fundo da linha para a data não vazar por trás
   dos ícones. */
/* `td.` de propósito: a regra do .proc-data logo abaixo esconde o que passa da
   célula, e é justamente por fora dela que os ícones precisam aparecer. */
.tabela--proc td.proc-acoes { position: relative; overflow: visible; }
.tabela--proc .proc-acoes .acoes-hover {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  padding: 3px 2px 3px 16px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(248, 250, 249, 0) 0, #f8faf9 14px);
}
body.escuro .tabela--proc .proc-acoes .acoes-hover {
  background: linear-gradient(90deg, rgba(27, 37, 31, 0) 0, #1b251f 14px);
}
/* com table-layout fixo, texto que não quebra transborda por cima da coluna
   vizinha (o número do processo colava na data) — daí o overflow escondido */
.tabela--proc .proc-num, .tabela--proc .proc-data {
  white-space: nowrap; color: var(--cinza-suave);
  overflow: hidden; text-overflow: ellipsis;
}
/* o texto do andamento fica numa linha só, com reticências */
.proc-andamento__txt {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--cinza-texto);
}
/* Tela estreita: o texto do último andamento sai primeiro. A coluna da data do
   andamento FICA — é nela que os ícones do hover flutuam. */
@media (max-width: 1180px) {
  .tabela--proc th:nth-child(5), .tabela--proc td:nth-child(5) { display: none; }
}

/* 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,
.busca-res__item:hover .acoes-hover,
.busca-res__item:focus-within .acoes-hover,
/* Andando pela lista com as setas do teclado, os atalhos da linha marcada
   aparecem junto: sem isto, quem não usa mouse nunca saberia que existem. */
.busca-res__item.marcado .acoes-hover { opacity: 1; pointer-events: auto; }

/* Em tela sem mouse (celular/tablet) não existe "passar por cima": os atalhos
   ficam sempre visíveis, senão seriam inalcançáveis. */
@media (hover: none) {
  .busca-res__item .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;
}
/* Última coluna das tabelas, onde "Editar" e "Excluir" viraram lápis e
   lixeira. O `width: 1%` faz a coluna encolher até o par de ícones — a
   largura que sobra vai para as colunas de conteúdo, que é o ganho de trocar
   a palavra pelo desenho. Os dois ficam centrados nessa faixa estreita. */
.cel-icones { width: 1%; white-space: nowrap; text-align: center; }
/* Fim de linha que ainda tem botão ESCRITO (Ratear, Recibo, Registrar visita):
   continua alinhado à direita e sem encolher, senão o texto quebra. */
.cel-acoes-fim { text-align: right; white-space: nowrap; }
/* Ícone dentro de um botão escrito (modais): colado ao texto, não empilhado. */
.botao--mini { display: inline-flex; align-items: center; gap: 5px; }
.acao-icone:hover { background: var(--preto); border-color: var(--preto); color: #fff; }
body.escuro .acao-icone:hover { background: #eef0f3; border-color: #eef0f3; color: #14171c; }
/* a lixeira só fica vermelha no hover: parada, ela é mais um ícone da fileira */
.acao-icone--perigo:hover,
body.escuro .acao-icone--perigo:hover {
  background: var(--vermelho); border-color: var(--vermelho); color: #fff;
}
/* O WhatsApp é a exceção da fileira: já nasce com a cor da marca, porque é a
   ação que se procura no card do lead. */
.acao-icone--zap { color: #25d366; }
.acao-icone--zap svg { width: 17px; height: 17px; }
.acao-icone--zap:hover,
body.escuro .acao-icone--zap:hover {
  background: #25d366; border-color: #25d366; color: #fff;
}

/* ==========================================================================
   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: #232e29; }
.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: #232e29; }
.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);
}

/* --------------------------------------------------------------------------
   PROCESSO QUE JÁ PAROU (arquivado / encerrado)
   --------------------------------------------------------------------------
   A palavrinha ao lado do número diz o que aconteceu; o tom mais apagado
   deixa o olho separar o que ainda anda do que já acabou sem precisar ler.
   É OPACIDADE, e não uma cor fixa: assim a mesma regra apaga contra o fundo
   claro (some para o branco) e contra o escuro (some para o preto), sem uma
   segunda lista de cores para o modo escuro.
   Passar o mouse devolve a linha ao tom cheio — apagado é para procurar, não
   para atrapalhar quem foi mexer nela. */
.proc-marca {
  margin-left: 7px; font-size: 12px; font-weight: 400; font-style: italic;
  color: var(--cinza-suave); letter-spacing: .2px;
}
.proc--parado .res-proc__texto,
.proc--parado .busca-res__abrir,
.proc--parado td { opacity: .65; transition: opacity .12s ease; }
.proc--parado:hover .res-proc__texto,
.proc--parado:hover .busca-res__abrir,
.proc--parado:hover td,
.proc--parado:focus-within .res-proc__texto,
.proc--parado:focus-within .busca-res__abrir,
.proc--parado:focus-within td { opacity: 1; }

/* ==========================================================================
   PAINEL "DADOS DO CLIENTE" (abas pessoa / nuvem)
   ========================================================================== */
.detalhe__painel--estreito { max-width: 620px; }
.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: 22px 24px 0; }
.cli-cabecalho { margin-bottom: 18px; }
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);
  text-transform: uppercase;
}

/* Identificação do cliente: avatar grande centrado e, abaixo dele, nome (com
   o CPF entre parênteses) e data de cadastro ALINHADOS À ESQUERDA, separados
   do cadastro por uma linha — o desenho da AdvBox. Sem cartão em volta: o
   painel inteiro já é o cartão. */
.cli-pessoa {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  gap: 4px; padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--borda);
}
.cli-pessoa > .cli-foto,
.cli-pessoa > .cli-foto__tirar { align-self: center; }
/* nome à esquerda, lápis colado na borda direita */
.cli-pessoa__linha { display: flex; align-items: center; gap: 8px; }
.cli-pessoa__linha .cli-pessoa__nome { flex: 1; min-width: 0; }
.cli-pessoa__editar {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: transparent; color: var(--cinza-suave); cursor: pointer;
}
.cli-pessoa__editar:hover { background: var(--fundo); color: var(--preto); }
body.escuro .cli-pessoa__editar:hover { background: #1b2620; color: #eef4f1; }
.cli-pessoa__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0;
  background: var(--verde-suave); color: var(--verde-escuro);
  font-size: 24px; font-weight: 700; letter-spacing: .5px; margin-bottom: 8px;
}

/* Foto do cliente: círculo grande; ao passar o mouse aparece a capa com a
   câmera e o convite para trocar (como na AdvBox). */
.cli-foto {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 116px; height: 116px; border-radius: 50%; overflow: hidden;
  background: var(--verde-suave); color: var(--verde-escuro);
  cursor: pointer; flex-shrink: 0; margin-bottom: 10px;
}
.cli-foto__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cli-foto__iniciais { font-size: 34px; font-weight: 700; letter-spacing: .5px; }
.cli-foto__capa {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: rgba(20, 23, 28, .62); color: #fff;
  opacity: 0; transition: opacity .15s;
}
.cli-foto:hover .cli-foto__capa,
.cli-foto:focus-within .cli-foto__capa { opacity: 1; }
.cli-foto__txt { font-size: 11px; font-weight: 600; line-height: 1.25; }
.cli-foto__tirar {
  border: 0; background: transparent; color: var(--cinza-suave);
  font: inherit; font-size: 11.5px; cursor: pointer; padding: 0 0 6px;
}
.cli-foto__tirar:hover { color: var(--vermelho); text-decoration: underline; }
body.escuro .cli-foto { background: #14231d; color: #7fe0b4; }
.cli-pessoa__nome {
  font-size: 16px; font-weight: 600; color: var(--preto); line-height: 1.3;
  text-transform: uppercase;
}
.cli-pessoa__resumo { font-size: 12.5px; color: var(--cinza-suave); }
body.escuro .cli-pessoa { border-color: #26332d; }
body.escuro .cli-pessoa__avatar { background: #14231d; color: #7fe0b4; }
body.escuro .cli-pessoa__nome { color: #eef4f1; }

/* O formulário herda o recuo do corpo do painel: o recuo próprio de
   .formulario somava ao do .cli-corpo e deixava aquela faixa vazia dos
   dois lados. */
.cli-form { display: grid; gap: 14px; padding: 18px 0 0; }
/* Botão de salvar sempre à vista, colado no pé do painel (como na AdvBox).
   As margens negativas esticam a faixa até as bordas do painel — sem elas o
   conteúdo rolava aparecendo pelos cantos, ao lado do botão. */
.cli-rodape {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--fundo); border-top: 1px solid var(--borda);
  padding: 14px 24px 18px; margin: 4px -24px 0;
  border-radius: 0 0 16px 16px;
}
.cli-salvar { width: 100%; justify-content: center; }

/* ==========================================================================
   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 {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  border: 0; background: transparent; text-align: left; cursor: pointer;
  padding: 10px 14px; font: inherit; font-size: 13.5px; color: var(--cinza-texto);
}
.menu-ponto__lista button svg {
  width: 15px; height: 15px; flex-shrink: 0; opacity: .7;
}
/* Uma linha fina separa "usar o arquivo" de "organizar" e, no pé, o Excluir:
   seis opções soltas em fila davam um bloco só, e o Excluir ficava colado. */
.menu-ponto__lista button.menu-ponto__grupo { border-top: 1px solid var(--borda); }
/* Sem espaço embaixo (fim da lista de documentos), o menu abre para cima. */
.menu-ponto--acima .menu-ponto__lista { top: auto; bottom: calc(100% + 4px); }
.menu-ponto__lista button:hover { background: var(--verde-suave); }
.menu-ponto__lista button.perigo { color: var(--vermelho); }
.menu-ponto__lista button.perigo svg { opacity: 1; }
body.escuro .menu-ponto__lista button:hover { background: #232e29; }

.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: #232e29; }
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; }
/* mesma linha, sem ser clicável: o colaborador vê o custo que lançou, mas
   editar a despesa é do gestor — sublinhar no hover prometeria um clique */
.doc-item__texto--fixo { cursor: default; }
.doc-item__texto--fixo:hover strong { text-decoration: none; }
/* Data, tamanho, processo e pasta ficam na MESMA linha embaixo do nome: um
   embaixo do outro, cada arquivo comia três linhas e a lista virava um paredão
   dentro do painel, que é estreito. */
.doc-item__linha {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-width: 0;
}
.doc-item__meta { font-size: 12px; color: var(--cinza-suave); }
/* Recado da compressão automática: discreto de propósito. É informação de
   bastidor — quem precisa dela procura; quem não precisa não deve tropeçar.
   Etiqueta própria, no cinza do resto da linha, e não texto emendado no
   tamanho do arquivo: assim se lê como situação (não como mais um dado do
   arquivo) e quebra inteira quando o painel do cliente fica estreito. */
.doc-item__aviso {
  display: inline-flex; align-items: center; gap: 5px;
  font-style: normal; font-size: 11px; font-weight: 600; line-height: 1.6;
  /* Um tom abaixo do --cinza-suave só para compensar o fundo cinza: de perto
     é o mesmo cinza da data ao lado, mas dá 5,3:1 em vez de 4,4:1 (AA). */
  color: #5d646f; background: #eef2f0;
  padding: 0 8px; border-radius: 20px;
  /* No celular a linha do arquivo é estreita e "compressão falhou — tentando
     de novo" não cabe: a etiqueta encolhe e dobra em vez de furar o painel. */
  max-width: 100%;
}
/* A bolinha faz o papel do "·" que separava o aviso do tamanho: diz que ali
   tem uma situação em andamento sem gastar mais uma palavra. */
.doc-item__aviso::before {
  content: ""; width: 5px; height: 5px; flex-shrink: 0;
  border-radius: 50%; background: currentColor; opacity: .55;
}
body.escuro .doc-item__aviso { background: #1e2823; color: var(--cinza-suave); }
/* Falha usa o mesmo par âmbar da etiqueta "vence hoje" — já é o tom do
   sistema para "olha isto", sem o vermelho de erro grave. */
.doc-item__aviso--falhou { color: #8a5600; background: #fdf3e0; }
body.escuro .doc-item__aviso--falhou { color: #fbbf24; background: #2b2314; }
.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;
  min-width: 0; max-width: 100%;
  font-size: 11.5px; color: var(--cinza-suave);
}
.doc-item__processo span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-item__processo svg { width: 13px; height: 13px; flex-shrink: 0; }
.doc-vazio { font-size: 13.5px; color: var(--cinza-suave); padding: 22px 0; text-align: center; }

/* Arrastar e soltar arquivos do computador na lista */
/* margem no pé porque o corpo do painel não tem recuo embaixo — quem o dá,
   na aba Dados, é a barra fixa do botão de salvar. */
.doc-lista { position: relative; min-height: 90px; border-radius: 10px; margin-bottom: 24px; }
.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: #232e29; 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
   ========================================================================== */
/* Cabeçalho da aba "Processo": o que já está preenchido aparece de cara —
   fase, etapa, situação e responsável em fichas, e os dados do caso numa
   grade de leitura. Antes a aba abria direto no formulário, e era preciso
   percorrer campo por campo para saber em que pé o processo estava. */
.proc-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px;
}
.proc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 20px;
  background: #eef2f0; color: var(--cinza-texto);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.proc-chip--pessoa { padding-left: 3px; }
.proc-chip .avatar-mini { width: 20px; height: 20px; font-size: 9px; }
body.escuro .proc-chip { background: #232e29; color: #cfd7e0; }

.proc-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 14px 20px; margin-bottom: 22px; padding: 16px 18px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao);
}
.proc-resumo__item { display: grid; gap: 3px; min-width: 0; }
.proc-resumo__item span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--cinza-suave); font-weight: 600;
}
.proc-resumo__item strong {
  font-size: 13.5px; font-weight: 600; color: var(--preto);
  overflow-wrap: anywhere;
}
body.escuro .proc-resumo { background: #151d19; }
body.escuro .proc-resumo__item strong { color: #eef4f1; }

/* O painel do processo é o que mais carrega conteúdo (formulário em duas
   colunas, resumo, listas de documentos e de custos). Com 560px e três
   camadas de recuo — corpo + cartão da seção + campo — sobravam 69px vazios
   de cada lado, um quarto da largura: o conteúdo ficava espremido numa
   faixa central. Painel mais largo e recuos menores, como na AdvBox. */
#hp-painel { max-width: 760px; }
#hp-painel .cli-corpo { padding: 22px 18px 26px; }
/* o recuo de .formulario existe para o modal; aqui ele só repetia o recuo
   que o corpo do painel já dá */
#hp-painel .cli-form { padding-left: 0; padding-right: 0; padding-top: 0; }
#hp-painel .cli-form .form-secao:has(h3) { padding: 16px; }
/* com mais largura, os cartões do topo voltam a se distribuir sozinhos */
#hp-painel .cartoes { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Abas do painel do processo: círculos só com o ícone, numa fileira só,
   como na AdvBox. Com o rótulo ao lado as pílulas não cabiam na largura do
   painel e quebravam em duas linhas — o topo ficava desarrumado. O nome de
   cada seção continua no title/aria-label (dica ao passar o mouse e leitura
   por leitor de tela). */
#hp-icones, #cli-abas { flex-wrap: nowrap; gap: 8px; }
#hp-icones .cli-aba,
#cli-abas .cli-aba {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; gap: 0;
  flex-shrink: 0;
}
#hp-icones .cli-aba > span,
#cli-abas .cli-aba > span { display: none; }

.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);
  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 a linha do topo (abas + backup) e a visão
   aberta (Quadro, Lista ou Desempenho — as duas últimas pegam o bloco
   emprestado). */
#tela-painel.modo-quadro > *:not(.painel-topo):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: #101916; }
.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: #232e29; }
.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; }
/* Feed de tarefas do processo, no desenho da AdvBox: título, data embaixo e
   cada texto numa caixa cinza com data e avatar no pé. Sem cartão em volta —
   o que separa uma tarefa da outra é o espaço. */
.ativ-feed { display: grid; gap: 22px; }
.ativ-card { background: transparent; }
.ativ-card__linha {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ativ-card__titulo {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; text-align: left;
  color: var(--preto);
}
body.escuro .ativ-card__titulo { color: #eef4f1; }
.ativ-card__titulo:hover { text-decoration: underline; }
.ativ-card__mais { margin-left: auto; flex-shrink: 0; }
.ativ-card__data { font-size: 12.5px; color: var(--cinza-suave); margin-top: 2px; }
/* tarefa concluída: título e data riscados, como na AdvBox */
.ativ-card--feita .ativ-card__titulo,
.ativ-card--feita .ativ-card__data { text-decoration: line-through; color: var(--cinza-suave); }

.ativ-caixa {
  margin-top: 10px; padding: 12px 14px; border-radius: 8px;
  background: #f4f6f5;
}
body.escuro .ativ-caixa { background: #1b251f; }
.ativ-caixa__txt {
  color: var(--cinza-texto); font-size: 13px; line-height: 1.55; white-space: pre-wrap;
}
.ativ-caixa__txt + .ativ-caixa__txt { margin-top: 8px; }

/* ---- Anexo da tarefa ---------------------------------------------------- */
/* O arquivo que subiu preso à tarefa aparece aqui dentro, como pastilha
   clicável — e NÃO na lista de documentos do cliente, que é da nuvem dele.
   Clicar baixa. */
.ativ-anexos {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-width: 0;
}
.ativ-anexo {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 5px 12px 5px 7px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 20px;
  background: var(--cartao); color: var(--cinza-texto);
  font: inherit; font-size: 12.5px; text-align: left;
}
.ativ-anexo:hover { border-color: var(--verde); }
.ativ-anexo__tipo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 17px; flex-shrink: 0; padding: 0 4px;
  border-radius: 4px; background: var(--vermelho); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .3px;
}
.ativ-anexo__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ativ-anexo:hover .ativ-anexo__nome { text-decoration: underline; }
body.escuro .ativ-anexo { background: #121a16; }
/* No detalhe da tarefa a pastilha mora no bloco da lateral, que é estreito:
   uma por linha, senão os nomes longos se apertam lado a lado. */
.det-bloco .ativ-anexos { flex-direction: column; align-items: flex-start; }

/* Recado da pasta automática "Anexado em tarefas": ela não recebe arquivo à
   mão, então no lugar da barra de anexar vai a explicação de por que não. */
.doc-aviso-pasta {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 8px;
  background: #f4f6f5; color: var(--cinza-suave);
  font-size: 12.5px; line-height: 1.55;
}
body.escuro .doc-aviso-pasta { background: #1b251f; }
.ativ-caixa__pe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12px; color: var(--cinza-suave);
}
/* data à esquerda, avatar e ações empurrados para a direita */
.ativ-caixa__pe > :first-child { margin-right: auto; }
/* Quando a tarefa foi criada e por quem — os dois andam juntos, no mesmo
   bloco da esquerda, para o avatar do responsável continuar sozinho na
   direita (ele é o responsável, não o autor). */
.ativ-caixa__quando { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ativ-caixa__autor .nome-pessoa { font-weight: 700; color: var(--cinza-texto); }
.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: #151d19; }
body.escuro .mov-modo__opcao.ativo { background: #232e29; 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: #232e29; }
.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; }
/* quanto sobrou depois do filtro: discreto, ao lado do recorte */
.filtro-resumo__n { opacity: .72; font-variant-numeric: tabular-nums; }
.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);
  /* mesma largura em todas as linhas: as pílulas formam uma coluna reta,
     em vez de cada uma começar e terminar num ponto diferente */
  min-width: 112px; text-align: center; white-space: nowrap;
}
.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: #232e29; color: #cfd7e0; }
.proc-etapa { font-size: 11.5px; color: var(--cinza-suave); white-space: nowrap; }

/* Coluna "Fase" da tabela de processos: a etiqueta e a etapa ficam
   empilhadas e centradas uma sob a outra, e a coluna só ocupa a largura
   de que precisa. Antes as duas nasciam encostadas à esquerda, com
   larguras diferentes a cada linha — a coluna parecia torta. */
.tabela th.col-fase, .tabela td.col-fase {
  text-align: center; width: 1%; white-space: nowrap;
}
.celula-fase {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  line-height: 1.35;
}

/* ---- 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; }
/* 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-escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gd-escolha {
  position: relative; display: block; border: 1px solid var(--borda);
  border-radius: 10px; padding: 11px 14px; cursor: pointer;
  background: var(--cartao);
}
.gd-escolha:hover { border-color: var(--cinza-suave); }
.gd-escolha input { position: absolute; opacity: 0; pointer-events: none; }
.gd-escolha:has(input:checked) {
  border-color: var(--verde); background: var(--verde-suave);
  box-shadow: 0 0 0 1px var(--verde);
}
.gd-escolha__corpo { display: grid; gap: 1px; }
.gd-escolha__corpo strong { font-size: 13.5px; color: var(--preto); }
.gd-escolha__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;
}
body.escuro .gd-opcao, body.escuro .gd-escolha { background: #151d19; }
body.escuro .gd-opcao:has(input:checked),
body.escuro .gd-escolha:has(input:checked) { background: #14231d; }
body.escuro .gd-opcao__corpo strong, body.escuro .gd-escolha__corpo strong { color: #eef4f1; }
body.escuro .gd-opcao__icone { background: #202a25; }
body.escuro .gd-opcao:has(input:checked) .gd-opcao__marca { box-shadow: inset 0 0 0 3px #151d19; }
body.escuro .gd-aviso { background: #2a1517; }

/* ---- Partes envolvidas (cliente do processo, estilo AdvBox) -------------- */
/* Campo fechado "Nome do contato" → painel flutuante com busca → a pessoa
   escolhida vira uma linha com etiqueta e lixeira. */
.combo__ancora { position: relative; }
.combo__abrir-texto {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--cinza-suave); min-width: 0;
}
.combo__abrir-texto svg { color: var(--cinza-suave); flex-shrink: 0; }
.combo__painel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 14px 38px rgba(20, 23, 28, .16); padding: 8px;
}
.combo__campo { width: 100%; }
.combo__lista {
  max-height: 240px; overflow-y: auto; margin-top: 6px;
  display: grid; gap: 2px;
}
.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: #232e29; }
/* nome em maiúsculas, com o trecho digitado em negrito mais forte */
.combo__nome {
  display: block; font-size: 13.5px; font-weight: 500; color: var(--preto);
}
.combo__nome strong { font-weight: 800; }
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; }
/* Cabeçalho de seção dentro da lista do combo (as três famílias de modelo:
   requerimento administrativo, petição inicial, cumprimento de prazo). Faz o
   papel que o <optgroup> fazia no select que existia antes. */
.combo__grupo {
  margin: 0; padding: 9px 12px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cinza-suave);
}
.combo__grupo:first-child { padding-top: 6px; }
/* linha da pessoa escolhida (como a da aba Processo) */
.combo__parte {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px;
}
.combo__parte-nome {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--preto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo__tirar:hover { color: var(--vermelho); background: #fdeaea; }
body.escuro .combo__painel { background: #151d19; box-shadow: 0 14px 38px rgba(0, 0, 0, .5); }
body.escuro .combo__parte { border-color: #26332d; }
body.escuro .combo__parte-nome { color: #eef4f1; }
body.escuro .combo__tirar:hover { background: #2a1517; }

/* ---- 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: #1b251f; }
.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-topo__entrada, .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, .proc-parte__escolha {
    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 ocupa a linha inteira no celular */
  .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; }
  /* o círculo cresce junto para continuar redondo e com alvo de toque de 44px */
  #hp-icones .cli-aba, #cli-abas .cli-aba { width: 44px; 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, #151d19 25%, #1f2924 37%, #151d19 63%);
  background-size: 400% 100%;
}

/* ==== CALENDÁRIO E RELÓGIO PRÓPRIOS ======================================= */
/* O seletor nativo do Chrome pinta o dia escolhido de azul e não obedece a
   nenhuma cor nossa: accent-color não chega dentro daquele popup (ele é uma
   janela do navegador, não faz parte da página). Então o ícone nativo some,
   o clique no campo abre o calendário que o app.js desenha (abrirPopData) e
   o <input type="date"> segue sendo o campo de verdade — continua aceitando
   digitação e guardando AAAA-MM-DD, então nada do resto do sistema muda.
   Este bloco fica no fim do arquivo de propósito: `input[type="date"]` empata
   em especificidade com `.campo input`, e no empate vale quem vem depois. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { display: none; }
input[type="date"], input[type="time"] {
  cursor: pointer; padding-right: 34px;
  background-repeat: no-repeat; background-position: right 9px center;
  background-size: 17px 17px;
}
input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369707b' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
input[type="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369707b' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E");
}
/* No escuro os `background` de `body.escuro .campo input` empatam em
   especificidade com a regra de cima e vêm depois, zerando repeat/position —
   o ícone virava uma fileira deles. Por isso as três linhas se repetem aqui. */
body.escuro input[type="date"], body.escuro input[type="time"] {
  background-repeat: no-repeat; background-position: right 9px center;
  background-size: 17px 17px;
}
body.escuro input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d9a94' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
body.escuro input[type="time"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d9a94' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E");
}

/* Sobra um azul: o pedacinho em edição DENTRO do campo (o "dd" enquanto se
   digita). Não dá para pintar só ele — `::-webkit-datetime-edit-day-field:focus`
   é ignorado pelo Chrome, e a forma que funciona (`input:focus::-webkit-…`)
   pinta dia, mês e ano ao mesmo tempo, o campo inteiro vira um bloco verde.
   Testado nas duas formas; fica com o azul do navegador mesmo. */

/* O popup é fixed e mora no <body>: assim não é recortado por modal, gaveta
   nem painel com rolagem. z-index abaixo só da tela de carregamento (999). */
.cal-pop {
  position: fixed; z-index: 900; width: 272px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 23, 28, .18); padding: 12px;
  color: var(--cinza-texto); animation: surgir .14s ease;
}
.cal-pop__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
/* Sem text-transform: capitalize — ele deixaria "Agosto De 2026"; quem sobe a
   primeira letra (e só ela) é o app.js. */
.cal-pop__mes { font-size: 13.5px; font-weight: 700; color: var(--preto); }
.cal-pop__nav {
  border: 0; background: transparent; color: var(--cinza-suave); cursor: pointer;
  width: 27px; height: 27px; border-radius: 7px; display: grid; place-items: center;
}
.cal-pop__nav:hover { background: var(--verde-suave); color: var(--verde); }
.cal-pop__semana, .cal-pop__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-pop__semana span {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--cinza-suave); padding: 5px 0;
}
.cal-pop__dia {
  border: 0; background: transparent; font: inherit; font-size: 12.5px;
  color: var(--cinza-texto); height: 31px; border-radius: 8px; cursor: pointer;
}
.cal-pop__dia:hover { background: var(--verde-suave); }
.cal-pop__dia--fora { color: var(--cinza-suave); opacity: .5; }
/* Hoje é só contorno; o dia escolhido é que ganha o verde cheio. */
.cal-pop__dia--hoje { box-shadow: inset 0 0 0 1.5px var(--verde); font-weight: 700; }
.cal-pop__dia--escolhido {
  background: var(--verde); color: var(--sobre-verde); font-weight: 700; box-shadow: none;
}
.cal-pop__dia--escolhido:hover { background: #047857; }
.cal-pop__dia:disabled { opacity: .28; cursor: default; background: transparent; }
.cal-pop__pe {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borda);
}
.cal-pop__link {
  border: 0; background: transparent; color: var(--verde); font: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 7px; border-radius: 6px;
}
.cal-pop__link:hover { background: var(--verde-suave); }
/* Relógio: duas colunas roláveis (hora e minuto), como o do navegador */
.cal-pop--hora { width: 152px; padding: 8px; }
.cal-pop__colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cal-pop__col { max-height: 212px; overflow-y: auto; display: grid; gap: 2px; align-content: start; }
.cal-pop__hora {
  border: 0; background: transparent; font: inherit; font-size: 12.5px;
  color: var(--cinza-texto); padding: 8px 0; border-radius: 7px; cursor: pointer;
}
.cal-pop__hora:hover { background: var(--verde-suave); }
.cal-pop__hora--escolhido { background: var(--verde); color: var(--sobre-verde); font-weight: 700; }
/* --preto não clareia no escuro (também é fundo), então o nome do mês precisa
   da própria cor de texto — mesma armadilha do logotipo na tela de login. */
body.escuro .cal-pop__mes { color: #eef4f1; }

/* ==== TELA DE CARREGAMENTO (logo vórtice) ================================ */
/* Cobre o app enquanto os dados iniciais carregam; o app.js adiciona a
   classe "some" ao terminar (esconderTelaCarregamento). */
.tela-carregamento {
  position: fixed; inset: 0; z-index: 999;
  background: var(--fundo);
  display: flex; align-items: center; justify-content: center;
  /* na primeira parte da animação a marca fica deslocada para a direita e
     passa da beirada; aqui é onde essa sobra é aparada */
  overflow: hidden;
  transition: opacity .28s ease;
}
.tela-carregamento.some { opacity: 0; pointer-events: none; }

/* Símbolo e nome LADO A LADO, numa linha só, como no AdvBox. Tudo é medido a
   partir de --marca-h (a altura da caixa do nome), então o conjunto encolhe
   inteiro no celular sem desmontar: a largura total dá 8,6 x --marca-h — por
   isso o 10vw, que no celular ocupa ~86% da tela e sobra margem dos dois lados. */
.tela-carregamento__marca {
  --marca-h: clamp(33px, 10vw, 59px);
  /* o quanto a marca anda para o lado para o SÍMBOLO ficar sozinho no meio da
     tela: metade do que o nome mais o respiro ocupam */
  --marca-desloc: calc(var(--marca-h) * 3.66);
  display: flex; align-items: center;
  gap: calc(var(--marca-h) * .42);
  animation: marca-entrar 3.4s linear infinite;
}
.tela-carregamento__nome {
  height: var(--marca-h); width: auto;
  color: var(--preto);
  /* mesma duração da marca-entrar, senão as duas saem de sincronia */
  animation: nome-surgir 3.4s linear infinite;
}
.tela-carregamento__vortice {
  /* 1,29 e não 1: o desenho do vórtice só ocupa 75% da caixa dele (a caixa é
     64 e o círculo tem 48), enquanto a letra ocupa 85% da dela. Com caixas
     iguais o símbolo sairia MENOR que as letras; assim ele fica 1,15x a altura
     da caixa alta, que é a proporção do AdvBox. */
  width: calc(var(--marca-h) * 1.29); height: calc(var(--marca-h) * 1.29);
  flex: none;
  color: var(--verde);
  animation: vortice-girar 1.05s cubic-bezier(.6, .15, .35, .9) infinite;
}
@keyframes vortice-girar { to { transform: rotate(360deg); } }

/* Como no AdvBox: primeiro só o símbolo, sozinho no meio da tela; as letras vão
   surgindo da esquerda para a direita enquanto o conjunto desliza para o lugar
   definitivo; segura um tempo na forma final, apaga e recomeça. */
@keyframes marca-entrar {
  0%, 10% {
    transform: translateX(var(--marca-desloc)); opacity: 1;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  }
  46%, 78% { transform: translateX(0); opacity: 1; }
  88%      { transform: translateX(0); opacity: 0; }
  /* o pulo de volta ao ponto de partida acontece com a marca já invisível */
  88.1%    { transform: translateX(var(--marca-desloc)); opacity: 0; }
  96%, 100% { transform: translateX(var(--marca-desloc)); opacity: 1; }
}
/* O recorte anda junto com o deslize: as letras vão "nascendo" no lugar em vez
   de aparecerem todas de uma vez. */
@keyframes nome-surgir {
  0%, 10% {
    clip-path: inset(0 100% 0 0);
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  }
  46%, 88%    { clip-path: inset(0 0 0 0); }
  88.1%, 100% { clip-path: inset(0 100% 0 0); }
}
/* No modo escuro o esmeralda escuro apaga contra o fundo — clareia o logo. */
body.escuro .marca__logo,
body.escuro .tela-carregamento__vortice { color: #10b981; }
/* O nome usa --preto, que de propósito NÃO muda no modo escuro (ele também é
   usado como FUNDO em outros lugares). Sem isto, o logotipo da tela de
   carregamento e o do login ficariam pretos sobre fundo escuro. */
body.escuro .tela-carregamento__nome,
body.escuro .login .marca__nome { color: #e8efea; }

/* ==== LISTA DE CLIENTES no modelo "Contatos" da AdvBox =================== */
.ativ-busca--larga { flex: 0 1 320px; }

/* (o menu suspenso do Filtrar saiu daqui: virou a janela "Filtrar dados",
   a mesma dos Processos — ver .filtro-painel--janela) */

/* colunas: o "+" é estreito e a data do cadastro fica à direita */
.tabela--cli th:first-child, .tabela--cli td.cli-col-mais { width: 34px; padding-right: 0; }
.tabela--cli th:nth-child(5), .tabela--cli td.cli-col-data { text-align: right; white-space: nowrap; }

/* o "+" que abre a linha; vira "−" girando 45° quando aberto */
.cli-mais {
  width: 24px; height: 24px; border: 0; border-radius: 7px;
  background: transparent; color: var(--cinza-suave);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: transform .18s ease, background .15s, color .15s;
}
.cli-mais:hover { background: var(--verde-suave); color: var(--verde-escuro); }
.cli-mais.aberto { transform: rotate(45deg); color: var(--verde-escuro); }

/* celular com o ícone verde do WhatsApp */
.cli-zap {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--cinza-texto); text-decoration: none;
}
.cli-zap svg { width: 15px; height: 15px; color: #25d366; flex: none; }
.cli-zap:hover { color: var(--verde-escuro); text-decoration: underline; }

/* campo vazio: "N/A" apagado, como na AdvBox */
.cli-na { color: var(--cinza-suave); opacity: .55; }

/* linha de detalhe aberta pelo "+" */
.cli-detalhe > td { background: #fafbfb; padding: 14px 16px 16px 44px; }
.cli-detalhe__grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 20px; margin-bottom: 14px;
}
.cli-dado { display: grid; gap: 2px; min-width: 0; }
.cli-dado > span { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-suave); }
.cli-dado > strong { font-size: 13.5px; font-weight: 600; color: var(--cinza-texto); word-break: break-word; }
.cli-detalhe__processos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cli-detalhe__titulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--cinza-suave); width: 100%;
}
.cli-proc {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--borda); border-radius: 9px; background: var(--cartao);
  padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--cinza-texto); text-align: left;
}
.cli-proc:hover { border-color: var(--verde); background: var(--verde-suave); }
.cli-proc > span { font-size: 12px; color: var(--cinza-suave); }
.cli-proc--novo { color: var(--verde-escuro); font-weight: 600; }

body.escuro .cli-detalhe > td { background: #101815; }
body.escuro .cli-proc { background: #151d19; }

@media (max-width: 860px) {
  /* no celular some a cidade: nome, celular e data já bastam */
  .tabela--cli th:nth-child(4), .tabela--cli td:nth-child(4) { display: none; }
  .cli-detalhe > td { padding-left: 16px; }
  /* uma coluna só, senão o painel aberto puxa a largura da tabela inteira */
  .cli-detalhe__grade { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BASE DE DADOS DO CLIENTE — o arquivo .md que a IA mantém sozinha
   ========================================================================== */
/* Cartão fixo no topo da nuvem do cliente. */
.base-cartao {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--verde-suave);
  /* Numa coluna estreita o título quebrava em duas linhas com os botões ainda
     apertados ao lado. Deixando a linha ceder, os botões descem inteiros para
     baixo em vez de espremer o texto. */
  flex-wrap: wrap;
}
.base-cartao__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  background: var(--verde); color: var(--sobre-verde);
}
/* Uma regra só, e com base própria. Havia duas declarações para este mesmo
   elemento, e a segunda ("flex: 1", que é "1 1 0%") apagava a base de 200px da
   primeira: o texto então encolhia até o mínimo enquanto os selos e os botões
   tomavam a largura, e "Base de dados do cliente" quebrava em três linhas com
   o cartão ainda tendo espaço de sobra. */
.base-cartao__texto {
  display: grid; gap: 3px; min-width: 0;
  flex: 1 1 240px;
}
.base-cartao__texto strong { font-size: 14px; color: var(--preto); line-height: 1.35; }
.base-cartao__texto > span { font-size: 12.5px; color: var(--cinza-suave); line-height: 1.4; }
.base-cartao .botao { flex-shrink: 0; }
/* Selos e botões andam juntos: encostados à direita, e — quando a coluna
   aperta — descendo para a linha de baixo como um bloco só, em vez de cada um
   procurar seu canto e empurrar o texto. */
.base-cartao__acoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-left: auto;
  /* Sem 'flex-shrink: 0': numa coluna estreita o bloco precisa poder encolher
     para que a quebra aconteça DENTRO dele (os selos numa linha, os botões na
     seguinte). Travado, ele mantinha a largura inteira e os botões vazavam
     para fora da borda do cartão. */
  min-width: 0;
}
/* Enquanto a IA lê os documentos, o ícone pulsa devagar. */
.base-cartao--ocupado .base-cartao__icone { animation: base-pulso 1.6s ease-in-out infinite; }
@keyframes base-pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .base-cartao--ocupado .base-cartao__icone { animation: none; }
}
body.escuro .base-cartao__texto strong { color: #eef4f1; }

/* Segunda linha do cartão: a análise do caso. É um botão, e não texto, porque
   clicar nela abre a janela já na aba certa — o caminho mais curto entre ver
   "Caso frágil" e ler por quê. Parece texto de propósito: é informação com um
   atalho, não uma ação a mais competindo com o botão principal. */
.base-cartao__analise {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 0; margin-top: 1px;
  font: inherit; font-size: 12.5px; color: var(--cinza-suave);
  text-align: left; cursor: pointer;
}
.base-cartao__analise:hover { color: var(--verde-escuro); }
.base-cartao__analise svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .75; }

/* Marcação da opção em Configurações. */
.base-opcao {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  cursor: pointer;
}
.base-opcao input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--verde); }
.base-opcao span { display: grid; gap: 3px; }
.base-opcao strong { font-size: 13.5px; color: var(--preto); font-weight: 600; }
.base-opcao small { font-size: 12.5px; color: var(--cinza-suave); line-height: 1.5; }
body.escuro .base-opcao strong { color: #eef4f1; }

/* Selo amarelo no cartão: a IA mexeu no cadastro ou tropeçou em algo. */
.base-selo {
  flex-shrink: 0; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 4px 9px; border-radius: 999px;
  background: #fdf4e3; color: #8a6410; border: 1px solid #f0dcae;
}
body.escuro .base-selo { background: #2a2413; color: #e8c979; border-color: #4a3f1d; }

/* O selo do cartão da ANÁLISE muda de cor com o veredito: o âmbar do "confira
   isto" já era a cor dos avisos da ficha, e os outros dois seguem a mesma
   legenda dos alertas (esmeralda segue, vermelho para). */
.base-selo--providenciar {
  background: var(--verde-suave); color: var(--verde-escuro);
  border-color: rgba(5, 150, 105, .35);
}
.base-selo--atencao { background: #fdf6f5; color: var(--vermelho); border-color: #f2d7d3; }
body.escuro .base-selo--providenciar {
  background: #0c211a; color: var(--verde-escuro); border-color: #1e3b30;
}
body.escuro .base-selo--atencao { background: #241413; color: #e58e85; border-color: #4a2622; }

/* Abas da janela: FICHA (o que os documentos dizem) e ANÁLISE (o que se
   conclui deles). Ficam logo abaixo do cabeçalho, discretas — são duas
   leituras do mesmo cliente, não duas telas. */
.base-abas {
  display: flex; gap: 4px; padding: 0 24px;
  border-bottom: 1px solid var(--borda); background: var(--cartao);
}
.base-aba {
  border: 0; background: none; cursor: pointer;
  padding: 10px 12px 9px; margin-bottom: -1px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--cinza-suave); border-bottom: 2px solid transparent;
}
.base-aba:hover { color: var(--preto); }
.base-aba--ativa { color: var(--verde-escuro); border-bottom-color: var(--verde); }
body.escuro .base-aba:hover { color: #eef4f1; }

/* O texto inteiro do dossiê, abaixo dos cartões. Fica separado por uma linha
   e um pouco recuado: os cartões são o que exige decisão, isto é a leitura
   corrida — e como o dossiê não vira arquivo, se não estiver aqui não está em
   lugar nenhum. */
.base-dossie {
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--borda);
}
.base-dossie h1 { font-size: 17px; color: var(--preto); margin: 0 0 10px; }

/* Janela de leitura do arquivo. */
.base-cabecalho { align-items: flex-start; }
.base-cabecalho__txt { display: grid; gap: 2px; min-width: 0; }
.base-info { font-size: 12px; color: var(--cinza-suave); margin: 0; }
.base-texto {
  padding: 18px 24px 6px; max-height: 64vh; overflow-y: auto;
  font-size: 14px; line-height: 1.6; color: var(--cinza-texto);
}
/* "#" do arquivo é o título; "##" são as seções (é onde entra o traço). */
.base-texto h2 { font-size: 18px; color: var(--preto); margin: 4px 0 10px; }
.base-texto h3 {
  font-size: 15px; color: var(--preto); margin: 22px 0 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--borda);
}
.base-texto h3:first-child { margin-top: 0; }
.base-texto h4, .base-texto h5, .base-texto h6 {
  font-size: 13.5px; color: var(--preto); margin: 14px 0 4px;
}
.base-texto p { margin: 6px 0; }
.base-texto ul { margin: 6px 0 10px; padding-left: 20px; }
.base-texto li { margin: 3px 0; }
.base-texto strong { color: var(--preto); }
.base-texto code {
  font-size: 12.5px; background: var(--verde-suave); border-radius: 5px;
  padding: 1px 5px;
}
.base-texto blockquote {
  margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--verde);
  background: var(--verde-suave); border-radius: 0 8px 8px 0;
  font-size: 13px; color: var(--cinza-suave);
}
.base-texto hr { border: 0; border-top: 1px solid var(--borda); margin: 16px 0; }
/* Tabela larga rola dentro da própria caixa, sem esticar a janela. */
.base-tabela { overflow-x: auto; margin: 10px 0 14px; }
.base-tabela table { border-collapse: collapse; width: 100%; font-size: 13px; }
.base-tabela th, .base-tabela td {
  border: 1px solid var(--borda); padding: 7px 10px; text-align: left;
  vertical-align: top;
}
.base-tabela th { background: var(--verde-suave); color: var(--preto); font-weight: 600; }

/* Andamento da leitura: uma linha fina embaixo do título, que existe só
   enquanto a IA lê. É de propósito discreta — informa sem virar o assunto da
   janela. A barra é da largura da caixa e some junto com a faixa. */
.base-andamento {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 24px 9px; border-bottom: 1px solid var(--borda);
  background: var(--verde-suave);
}
.base-andamento__barra {
  flex: 0 0 96px; height: 3px; border-radius: 999px; overflow: hidden;
  background: rgba(5, 150, 105, .18);
}
.base-andamento__barra i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--verde); transition: width .5s ease;
}
.base-andamento__txt {
  display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0;
  font-size: 12px; color: var(--cinza-suave);
}
/* o passo nunca quebra em duas linhas: quem cede espaço é o nome do arquivo */
.base-andamento__txt b {
  font-weight: 600; color: var(--verde-escuro);
  white-space: nowrap; flex-shrink: 0;
}
/* nome do arquivo: o que não couber na linha vira reticências */
.base-andamento__txt em {
  font-style: normal; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
/* há quanto tempo: fica no fim da linha e nunca é cortado pelo nome do arquivo */
.base-andamento__tempo {
  flex-shrink: 0; margin-left: auto; padding-left: 10px;
  font-variant-numeric: tabular-nums; opacity: .75;
}
/* a barra respira devagar enquanto há leitura em curso */
.base-andamento__barra i { animation: base-respiro 2.2s ease-in-out infinite; }
@keyframes base-respiro { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .base-andamento__barra i { animation: none; transition: none; }
}
body.escuro .base-andamento { background: #0c211a; }
body.escuro .base-andamento__barra { background: rgba(5, 150, 105, .28); }

/* Parada por falta de cota: some o verde de "está acontecendo" e a barra para
   de respirar. A leitura não falhou — está esperando a virada do dia. */
.base-andamento--parada { background: var(--cartao); }
.base-andamento--parada .base-andamento__txt b { color: var(--cinza-suave); }
.base-andamento--parada .base-andamento__barra i {
  background: var(--cinza-suave); opacity: .5; animation: none;
}
body.escuro .base-andamento--parada { background: #15201b; }
/* Só o recado dos não lidos (nada sendo lido agora): alinhado à esquerda. */
.base-andamento--so-recado { background: var(--cartao); }
body.escuro .base-andamento--so-recado { background: #15201b; }
.base-andamento__retomar {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--verde-escuro); text-decoration: underline;
  text-underline-offset: 2px;
}
.base-andamento__retomar:hover { opacity: .75; }

/* Ficha ainda em branco. */
.base-zero {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 40px 24px 44px; color: var(--cinza-suave);
}
.base-zero svg { width: 30px; height: 30px; color: var(--verde); opacity: .8; }
.base-zero strong { font-size: 14.5px; color: var(--preto); }
.base-zero span { font-size: 13px; max-width: 44ch; line-height: 1.6; }
body.escuro .base-zero strong { color: #eef4f1; }


.base-vazio { padding: 24px 0; text-align: center; color: var(--cinza-suave); font-size: 13.5px; }
/* Rodapé: apoio à esquerda, decisão à direita. */
.base-acoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 24px 20px; border-top: 1px solid var(--borda);
}
.base-acoes__espaco { flex: 1; }
.botao--discreto {
  background: transparent; border-color: transparent; color: var(--cinza-suave);
}
.botao--discreto:hover { border-color: var(--borda); color: var(--cinza-texto); }
body.escuro .base-texto h2,
body.escuro .base-texto h3,
body.escuro .base-texto h4,
body.escuro .base-texto strong,
body.escuro .base-tabela th { color: #eef4f1; }

/* ---- Painel da base: só o que pede atenção ------------------------------- */
/* A tela mostra o que precisa de decisão; a ficha inteira mora no arquivo. */
.base-alerta {
  position: relative; margin-bottom: 14px; padding: 14px 16px 12px 18px;
  border: 1px solid var(--borda); border-left-width: 3px; border-radius: 10px;
  background: var(--cartao);
}
.base-alerta__titulo {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase;
}
.base-alerta__corpo { font-size: 13.5px; line-height: 1.6; }
.base-alerta__corpo > :first-child { margin-top: 0; }
.base-alerta__corpo > :last-child { margin-bottom: 0; }
.base-alerta__corpo ul { margin: 0; padding-left: 18px; }
.base-alerta__corpo li { margin: 4px 0; }

/* ---- Gavetas ------------------------------------------------------------
   A ficha e a análise mostravam tudo aberto, um bloco embaixo do outro, e o
   dossiê inteiro ainda repetia no fim: ler o caso virava rolar a página
   inteira. Agora cada assunto é UMA LINHA com a contagem ao lado, e o detalhe
   abre a um clique. Nada foi escondido — só deixou de ser obrigatório. */
.base-gaveta { padding: 0 16px 0 18px; }
.base-gaveta[open] { padding-bottom: 12px; }
.base-gaveta__rotulo {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 12px 0; cursor: pointer; list-style: none;
}
.base-gaveta__rotulo::-webkit-details-marker { display: none; }
/* o primeiro span empurra o resto para a direita: rótulo à esquerda,
   contagem e seta encostadas na borda */
.base-gaveta__rotulo > span:first-child { margin-right: auto; }
.base-gaveta__rotulo::after {
  content: ""; width: 7px; height: 7px; flex-shrink: 0; opacity: .5;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .15s ease;
}
.base-gaveta[open] > .base-gaveta__rotulo::after {
  transform: rotate(-135deg) translateY(-2px);
}
.base-gaveta__rotulo:hover::after { opacity: 1; }
.base-gaveta__conta {
  font-size: 11px; font-weight: 700; letter-spacing: 0; flex-shrink: 0;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(128, 128, 128, .16);
}
.base-gaveta__conta--texto { font-weight: 600; text-transform: none; opacity: .7; }
.base-gaveta__rotulo svg { width: 13px; height: 13px; vertical-align: -2px; opacity: .7; }
.base-gaveta--dossie { border-left-color: var(--borda); }
@media (prefers-reduced-motion: reduce) {
  .base-gaveta__rotulo::after { transition: none; }
}

/* Três tons, dentro da paleta: âmbar quando é para conferir/ficar de olho,
   esmeralda quando é para providenciar (é tarefa, não problema). */
.base-alerta--conferir { border-left-color: #cf9a2e; background: #fffaf0; }
.base-alerta--conferir .base-alerta__titulo { color: #8a6410; }
.base-alerta--atencao { border-left-color: var(--vermelho); background: #fdf6f5; }
.base-alerta--atencao .base-alerta__titulo { color: var(--vermelho); }
.base-alerta--providenciar { border-left-color: var(--verde); background: var(--verde-suave); }
.base-alerta--providenciar .base-alerta__titulo { color: var(--verde-escuro); }
body.escuro .base-alerta--conferir { background: #201c10; border-color: #4a3f1d; border-left-color: #cf9a2e; }
body.escuro .base-alerta--conferir .base-alerta__titulo { color: #e8c979; }
body.escuro .base-alerta--atencao { background: #241413; border-color: #4a2622; border-left-color: #e06c62; }
body.escuro .base-alerta--atencao .base-alerta__titulo { color: #e58e85; }
body.escuro .base-alerta--providenciar { background: #0c211a; border-color: #1e3b30; border-left-color: var(--verde); }
/* precisa vir depois da regra geral de h3 do painel, que pinta tudo de branco */
body.escuro .base-alerta--providenciar .base-alerta__titulo { color: var(--verde-escuro); }

/* Chamada para o arquivo, onde está o resto da ficha. */
.base-completa {
  display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 2px;
  padding: 12px 14px; border: 1px dashed var(--borda); border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; color: var(--cinza-suave);
}
.base-completa__icone { flex-shrink: 0; color: var(--verde); display: inline-flex; }

/* A origem do dado — "(Documentos Médicos (1).pdf, p. 1)" — se repete em quase
   toda linha: precisa estar lá, mas sem competir com o dado. */
.base-fonte { font-size: 12px; color: var(--cinza-suave); }

/* Etiqueta do tipo de recado, dentro do cartão de conferência. */
.base-marca {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  vertical-align: 1px;
}
.base-marca--dificuldade { background: #f6e6c0; color: #6f5010; }
.base-marca--divergencia { background: #f6d9d6; color: #8c231c; }
body.escuro .base-marca--dificuldade { background: #4a3f1d; color: #efd9a0; }
body.escuro .base-marca--divergencia { background: #4a2622; color: #f0b8b2; }

/* Nota de rodapé do cartão: o que a IA fez sem precisar de conferência. */
.base-alerta__nota {
  margin: 10px 0 0; padding-top: 9px; border-top: 1px dashed rgba(138, 100, 16, .35);
  font-size: 12.5px; line-height: 1.5; color: var(--cinza-suave);
}
.base-alerta__ok {
  margin-top: 10px; border: 1px solid var(--borda); background: transparent;
  border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 12.5px;
  color: var(--cinza-suave); cursor: pointer;
}
.base-alerta__ok:hover { color: var(--cinza-texto); border-color: var(--cinza-suave); }

/* ---- Cabeçalho e rodapé da janela --------------------------------------- */
/* O cabeçalho era um texto solto numa faixa branca alta — parecia sobra de
   página. Agora é um bloco com fundo próprio, o ícone da ficha à esquerda e
   tudo alinhado nessa mesma margem: título, etiquetas e, abaixo, o conteúdo. */
.base-cabecalho {
  gap: 13px; align-items: center; padding: 16px 20px;
  background: var(--fundo); border-bottom: 1px solid var(--borda);
}
body.escuro .base-cabecalho { background: #101815; }
.base-cabecalho__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  background: var(--verde); color: var(--sobre-verde);
  box-shadow: 0 1px 3px rgba(5, 150, 105, .35);
}
.base-cabecalho__txt { flex: 1; min-width: 0; display: grid; gap: 6px; }
.base-cabecalho h2 {
  line-height: 1.2; font-size: 17px; letter-spacing: -.1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* As informações da ficha viram etiquetas, em vez de texto corrido com pontos */
.base-info { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.base-etiqueta {
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
  color: var(--cinza-suave); background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap;
}
/* a primeira etiqueta é a que importa (quantos documentos a IA leu) */
.base-etiqueta:first-child {
  color: var(--verde-escuro); background: var(--verde-suave);
  border-color: rgba(5, 150, 105, .3);
}
body.escuro .base-etiqueta { background: #151d19; }
body.escuro .base-etiqueta:first-child { background: #0c211a; border-color: #1e3b30; }
/* o ✕ acompanha o topo do bloco, não o meio do título */
.base-cabecalho .modal__fechar { align-self: flex-start; margin-top: -2px; }

/* ---- Futuro: a reserva do casal ------------------------------------------
   Três decisões desenham esta tela:
   1. META NUMA CAIXA SÓ. Guardado, barra, meta, o que falta e o botão de
      definir respondem à mesma pergunta. Em cartões soltos viravam quatro
      números do mesmo tamanho, sem dizer qual é o principal.
   2. TABELA ESTREITA. A do DRE tem 12 meses e por isso carrega
      min-width:1080px; a do Futuro tem quatro colunas — herdar aquela largura
      espalhava quatro números por uma linha inteira de tela.
   3. O QUE SOBROU DE LARGURA VIRA GRÁFICO, ao lado da tabela e não embaixo. */
/* O nome da tela é o único texto do cabeçalho: sem subtítulo, ele pode
   crescer e dar peso ao topo da página. */
/* Duas colunas e nada mais: sem a linha do botão em cima, os dois lados se
   centralizam na altura da caixa em vez de ficarem empurrados para o pé. */
.meta-futuro {
  display: grid; grid-template-columns: minmax(240px, 1.35fr) minmax(220px, 1fr);
  gap: 18px 28px; align-items: center; padding: 20px 22px; margin-bottom: 20px;
}
.meta-futuro__guardado { display: block; font-size: 12.5px; color: var(--cinza-suave); }
/* O total guardado é um BOTÃO: clicar mostra em que conta esse dinheiro está.
   O tracejado embaixo é o aviso de que ali tem mais a ver — sem ele o número
   não se distingue de um número qualquer da tela. */
.meta-futuro__numero {
  display: block; font-size: 30px; font-weight: 600; letter-spacing: -.5px;
  color: var(--verde-escuro); margin: 2px 0 10px; padding: 0;
  background: none; border: 0; border-bottom: 1px dashed rgba(4, 120, 87, .45);
  font-family: inherit; cursor: pointer; text-align: left;
}
.meta-futuro__numero:hover { border-bottom-style: solid; }
.meta-futuro__numero:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
body.escuro .meta-futuro__numero { border-bottom-color: rgba(52, 211, 153, .45); }

/* Repartição por conta na janela "onde está o dinheiro guardado" */
.tabela--contas { margin-bottom: 4px; }
.tabela--contas tr.futuro-total td { font-weight: 700; background: #f4f8f6; }
body.escuro .tabela--contas tr.futuro-total td { background: #121b17; }
/* Precisa vencer o ".tabela td" (0,1,1), que pinta toda célula de --cinza-texto */
.tabela td.valor-celula--fraco { font-weight: 500; color: var(--cinza-suave); }
body.escuro .valor-celula--fraco { color: var(--cinza-suave); }
.meta-futuro__pct { font-size: 12.5px; color: var(--cinza-suave); margin-top: 7px; }
.meta-futuro__pct strong { color: var(--verde-escuro); }
/* Meta e o que falta: rótulo à esquerda, número à direita, alinhados pela
   direita — assim os valores se comparam de relance, um debaixo do outro. */
/* A faixa de 34px à direita é do lápis. Ela existe em TODAS as linhas, e não
   só na da meta: pondo o botão dentro da linha, o valor dela recuaria e os
   três números deixariam de terminar no mesmo ponto. */
.meta-futuro__linhas { position: relative; display: grid; gap: 9px; padding-right: 34px; }
.meta-futuro__editar { position: absolute; top: -5px; right: -4px; }
.meta-futuro__linha {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 9px; border-bottom: 1px solid var(--borda);
}
.meta-futuro__linha:last-child { border-bottom: 0; padding-bottom: 0; }
.meta-futuro__rot { font-size: 12.5px; color: var(--cinza-suave); }
.meta-futuro__val { font-size: 17px; font-weight: 600; color: var(--preto); white-space: nowrap; }
.meta-futuro__val--fraco { font-size: 13px; font-weight: 500; color: var(--cinza-suave); }
.meta-futuro__vazio {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; font-size: 13px; color: var(--cinza-suave);
}
.meta-futuro__vazio p { margin: 0; }

/* As quatro caixas dobráveis do Fluxo, empilhadas na largura inteira:
   fechadas viram uma lista uniforme de títulos, sem larguras desencontradas. */
.pilha-dobra { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pilha-dobra > .bloco { margin-bottom: 0; }

/* Ícone à esquerda do título da caixa dobrável */
.dobra-icone { display: inline-flex; color: var(--cinza-suave); }
.dobra-icone svg { width: 17px; height: 17px; }
.dobra-icone--verde { color: var(--verde-escuro); }
.dobra-icone--vermelho { color: #d4574e; }
body.escuro .dobra-icone--vermelho { color: #f4756c; }

/* Tabela e os dois gráficos numa linha só, as três caixas com a MESMA altura
   (align-items: stretch). Empilhados numa coluna ao lado da tabela sobrava um
   vão branco no pé; de largura inteira, um embaixo do outro, a tabela ficava
   sozinha numa caixa larga demais para quatro colunas de número. Lado a lado
   as três se sustentam, e cada gráfico se centraliza na altura que a tabela
   define.
   O minmax(0, …) e o min-width: 0 são o que segura a linha dentro da tela.
   Escrito "1.25fr", o mínimo da coluna é o min-content dela: uma tabela sem
   quebra de linha esticava a primeira coluna, empurrava os gráficos para fora
   e a página inteira passava a rolar para o lado. Com o mínimo em zero, quem
   cede é a tabela — que cabe, porque é só número. */
.grade-painel {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; align-items: stretch; margin-bottom: 20px;
}
.grade-painel > * { min-width: 0; }
.bloco--graf { display: flex; flex-direction: column; }
.bloco--graf > div:not(.bloco__cabecalho) {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 1180px) {
  .grade-painel { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 1180px) {
  .meta-futuro, .meta-futuro--tres { grid-template-columns: 1fr; }
}

/* Grupo de controles à direita de um cabeçalho (setas do ano, seletor de mês,
   botão de lançar). Não tinha regra nenhuma: funcionava só porque botão é
   inline-block e cabia na linha — com dois controles largos, quebrava. */
.agenda-nav { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

/* Seta de trocar o ano: só o chevron, sem moldura. Como botão de verdade ela
   competia em peso com o próprio ano, que é a informação. */
.botao--seta {
  background: transparent; border-color: transparent;
  color: var(--cinza-suave); padding: 3px 7px; font-size: 17px;
}
.botao--seta:hover { background: var(--fundo); border-color: transparent; color: var(--preto); }
body.escuro .botao--seta { background: transparent; border-color: transparent; }
body.escuro .botao--seta:hover { background: #1b2620; color: #eef4f1; }
.botao--seta:disabled:hover { background: transparent; }

/* Tabela do Futuro: sem largura mínima, e os números centralizados na coluna
   (com tabular-nums as casas continuam alinhadas entre si). */
.futuro-tabela { width: 100%; }
.futuro-tabela th, .futuro-tabela td { padding: 6px 10px; white-space: nowrap; }
.futuro-tabela th {
  text-align: center; font-size: 10px; letter-spacing: .4px;
}
.futuro-tabela td {
  text-align: center; font-size: 12.5px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.futuro-tabela th:first-child, .futuro-tabela td:first-child {
  text-align: left; width: 56px;
}
.futuro-tabela tbody tr { cursor: pointer; }
/* Todas as linhas ficam recuadas e só a apontada volta à cor cheia. Com nove a
   treze linhas de número do mesmo peso, o olho não tinha onde pousar; assim a
   linha sob o cursor é a única em foco, e a leitura vira uma de cada vez.
   O recuo é no texto (opacidade na célula), e o realce de fundo mora na
   LINHA — senão o próprio fundo do hover viria desbotado junto. */
.futuro-tabela tbody tr:hover { background: var(--verde-suave); }
body.escuro .futuro-tabela tbody tr:hover { background: #0e1a15; }
/* 0,65 e não menos: abaixo disso o texto recuado deixa de alcançar o
   contraste mínimo de leitura (WCAG AA) enquanto o cursor não está nele. */
.futuro-tabela tbody tr:not(.futuro-total) td { opacity: .65; transition: opacity .12s ease; }
.futuro-tabela tbody tr:not(.futuro-total):hover td { opacity: 1; }
/* Mês sem movimento nenhum não abre nada: fica apagado e sem mãozinha. */
.futuro-tabela tr.linha-apagada { cursor: default; }
.futuro-tabela tr.linha-apagada:hover { background: transparent; }
.futuro-tabela tbody tr.linha-apagada td { opacity: .45; }
.futuro-tabela tbody tr.linha-apagada:hover td { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .futuro-tabela tbody tr td { transition: none; }
}
.futuro-tabela tr.futuro-total td { font-weight: 700; background: #f4f8f6; cursor: default; }
body.escuro .futuro-tabela tr.futuro-total td { background: #121b17; }
.futuro-tabela tr.futuro-total:hover td { background: #f4f8f6; }
body.escuro .futuro-tabela tr.futuro-total:hover td { background: #121b17; }
/* Mês no vermelho. Precisa vencer o ".tabela td" (0,1,1), que pinta toda
   célula de --cinza-texto e engoliria o ".fluxo-negativo" sozinho. */
.futuro-tabela td.fluxo-negativo { color: var(--vermelho); }
body.escuro .futuro-tabela td.fluxo-negativo { color: #f4756c; }

/* ---- Barras por categoria (no lugar da pizza) ----------------------------
   Duas linhas por categoria: em cima o nome e o percentual, embaixo a barra
   inteira. O valor em reais fica no `title` — é o balão do navegador, mesmo
   recurso das barras do Painel.

   Antes os três dividiam a MESMA linha, com o trilho travado em 88 px: quem
   cedia espaço era sempre o nome, e "Custas e despesas processuais" aparecia
   cortado no meio. Separando em duas linhas o nome cabe inteiro e a barra
   passa a medir a largura da caixa — que é o que torna dois comprimentos
   comparáveis de longe. */
.barras-cat { display: grid; gap: 12px; min-width: 0; }
.barra-cat {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "nome pct" "trilho trilho";
  gap: 4px 10px; align-items: center; line-height: 1.35;
  min-width: 0; font-size: 12.5px; cursor: default;
}
.barra-cat__nome {
  grid-area: nome; min-width: 0; color: var(--cinza-texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-cat__trilho {
  grid-area: trilho; height: 9px; border-radius: 20px;
  background: var(--fundo); overflow: hidden;
}
.barra-cat__fill { display: block; height: 100%; border-radius: 20px; }
.barra-cat__pct {
  grid-area: pct; white-space: nowrap;
  color: var(--preto); font-weight: 600; font-size: 12px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
/* As três caixas têm a mesma altura, então o gráfico de menos categorias
   sobraria com um vão no pé. Com quatro ou menos, as barras se espalham pela
   altura em vez de ficarem amontoadas no meio. */
.barras-cat--arejado {
  display: flex; flex-direction: column; justify-content: space-evenly;
  gap: 0; flex: 1;
}
body.escuro .barra-cat__pct { color: #eef4f1; }
body.escuro .barra-cat__trilho { background: #0e1613; }

/* ---- Janela do mês -------------------------------------------------------
   Cada seção respira: 28px entre elas e uma linha separando, para as tabelas
   não encostarem no gráfico de cima. O título de seção tem o mesmo tamanho
   dos títulos de bloco da tela, e o cabeçalho das tabelas fica menor que o
   conteúdo — a hierarquia é título > dado > rótulo de coluna. */
.mes-corpo { padding: 22px 24px 26px; display: grid; gap: 28px; }
/* Os três números do mês: é o resumo da janela inteira, então vem numa faixa
   própria logo abaixo do título, e não como legenda no cabeçalho. */
.mes-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 24px; background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 18px;
}
body.escuro .mes-resumo { background: #101815; }
.mes-stat__rot { display: block; font-size: 12px; color: var(--cinza-suave); }
.mes-stat__num {
  display: block; margin-top: 3px; font-size: 19px; font-weight: 600;
  color: var(--preto); letter-spacing: -.2px; white-space: nowrap;
}
.mes-num--entrou { color: var(--verde-escuro); }
.mes-num--saiu { color: var(--vermelho); }
/* ---- Balão de informação (o do sistema, não o do navegador) --------------
   O `title` nativo demora quase um segundo para abrir, some sozinho depois de
   alguns segundos e em parte dos navegadores não aparece de jeito nenhum —
   não dá para pendurar nele uma informação que a pessoa precisa ver. Este
   abre na hora, no clique do teclado também, e é igual em todo navegador.
   O tracejado embaixo é o aviso de que ali tem mais a ver. */
.dica-balao {
  position: relative; display: inline-block; cursor: help;
  border-bottom: 1px dashed var(--borda);
}
.dica-balao:hover, .dica-balao:focus-visible { border-bottom-color: var(--cinza-suave); }
/* Alinhado pela ESQUERDA do número, não centralizado nele: a caixa da janela
   tem overflow, e um balão centralizado no primeiro número passava da borda
   esquerda e era cortado. Crescendo para a direita, sempre cabe.
   O texto fica numa linha só — quebrado em duas, um "Jefferson R$ 3.881,62"
   partido no meio custa mais para ler do que a largura economizada. */
.dica-balao__txt {
  position: absolute; left: 0; top: calc(100% + 9px);
  z-index: 60; width: max-content; max-width: none; white-space: nowrap;
  background: var(--preto); color: #fff; text-align: left;
  font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0;
  padding: 8px 11px; border-radius: 8px; white-space: normal;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  /* Sem transição de propósito: aparecer é a função do balão, e amarrar isso
     a uma animação é criar mais um jeito de ele não aparecer. */
  display: none; pointer-events: none;
}
/* a setinha apontando para o número */
.dica-balao__txt::after {
  content: ""; position: absolute; bottom: 100%; left: 16px;
  border: 5px solid transparent; border-bottom-color: var(--preto);
}
.dica-balao:hover .dica-balao__txt,
.dica-balao:focus-within .dica-balao__txt { display: block; }
/* Última coluna: o balão abre para a esquerda, senão bate na borda da janela. */
.dica-balao--fim .dica-balao__txt { left: auto; right: 0; }
.dica-balao--fim .dica-balao__txt::after { left: auto; right: 16px; }
/* Tela estreita não comporta uma linha só: volta a quebrar, todos pela
   esquerda — com a faixa em duas fileiras, "última coluna" perde o sentido. */
@media (max-width: 820px) {
  .dica-balao__txt, .dica-balao--fim .dica-balao__txt {
    left: 0; right: auto; white-space: normal; max-width: 210px;
  }
  .dica-balao--fim .dica-balao__txt::after { left: 16px; right: auto; }
}
/* --preto continua preto no tema escuro (ele é fundo em vários lugares), então
   aqui o balão inverte: fundo claro e letra escura. */
body.escuro .dica-balao__txt { background: #eef0f3; color: #14171c; }
body.escuro .dica-balao__txt::after { border-bottom-color: #eef0f3; }

.mes-graficos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.mes-secao + .mes-secao,
.mes-graficos + .mes-secao {
  border-top: 1px solid var(--borda); padding-top: 24px;
}
.mes-graficos .mes-secao + .mes-secao {
  border-top: 0; padding-top: 0;
}
/* Cada seção é um <details>: o título é o botão que abre. Mesma seta e mesmo
   comportamento das dobras do formulário — quem já abriu uma sabe abrir esta.
   Fechada, a janela cabe inteira na tela sem rolagem. */
.mes-secao > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--preto); padding: 2px 0;
}
.mes-secao > summary::-webkit-details-marker { display: none; }
.mes-secao > summary::after {
  content: ""; width: 7px; height: 7px; flex-shrink: 0; margin-left: 2px;
  border-right: 1.6px solid var(--cinza-suave); border-bottom: 1.6px solid var(--cinza-suave);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.mes-secao[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.mes-secao > summary:hover { color: var(--verde-escuro); }
.mes-secao > summary:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 4px; }
/* A contagem fica depois da seta: ela é o que faz decidir se vale abrir. */
.mes-secao__nota { font-size: 12px; font-weight: 400; color: var(--cinza-suave); }
.mes-secao__corpo { margin-top: 12px; }
.mes-secao .tabela td { padding: 8px 10px; font-size: 13px; }
.mes-secao .tabela th { padding: 8px 10px; font-size: 10px; letter-spacing: .4px; }
body.escuro .mes-secao > summary { color: #eef4f1; }

/* No tema escuro o --preto continua preto de propósito (ele também é FUNDO em
   vários lugares), então todo texto novo que o usa precisa clarear aqui —
   senão sai preto sobre fundo preto. */
body.escuro .meta-futuro__val,
body.escuro .mes-secao h3,
body.escuro .mes-stat__num { color: #eef4f1; }
body.escuro .mes-num--entrou { color: var(--verde-escuro); }
body.escuro .mes-num--saiu { color: #f4756c; }
body.escuro .meta-futuro__val--fraco { color: var(--cinza-suave); }

/* ---- Caixas dobradas do Financeiro e do Futuro ---------------------------
   As quatro caixas de cada tela abertas ao mesmo tempo davam uma tela e meia
   de rolagem, e quem chega quase sempre quer UMA delas. Fechada, a caixa é só
   o título e a seta; o cabeçalho inteiro é o botão que abre. O que mora no
   cabeçalho junto do título (as setas do ano, o seletor de mês, o "+ Lançar
   saída") some com o resto: fechada, a caixa não tem o que ajustar.
   Quem liga o clique é o ligarDobras(), no app.js. */
.bloco--dobra .bloco__cabecalho { cursor: pointer; user-select: none; margin-bottom: 0; }
.bloco--dobra.bloco--aberto .bloco__cabecalho { margin-bottom: 12px; }
.bloco--dobra:not(.bloco--aberto) > :not(.bloco__cabecalho) { display: none; }
.bloco--dobra:not(.bloco--aberto) .bloco__cabecalho > :not(h2) { display: none; }
.bloco--dobra .bloco__cabecalho h2 { display: flex; align-items: center; gap: 9px; flex: 1; }
/* A setinha é a mesma das seções da janela do mês (.mes-secao), mas mora na
   ponta direita: fechada, a caixa é título à esquerda e seta à direita. */
.bloco--dobra .bloco__cabecalho h2::after {
  content: ""; width: 7px; height: 7px; flex-shrink: 0; margin-left: auto;
  border-right: 1.6px solid var(--cinza-suave);
  border-bottom: 1.6px solid var(--cinza-suave);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.bloco--dobra.bloco--aberto .bloco__cabecalho h2::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.bloco--dobra .bloco__cabecalho:hover h2 { color: var(--verde-escuro); }
.bloco--dobra .bloco__cabecalho:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 4px; border-radius: 6px;
}
/* Na fileira de três, a caixa fechada encolhe até o título em vez de esticar
   na altura da vizinha aberta — senão sobrariam duas colunas vazias. */
.grade-painel > .bloco--dobra:not(.bloco--aberto) { align-self: start; }

/* ---- Configurações dobradas ----------------------------------------------
   A tela de Configurações é uma lista de ajustes que se mexem uma vez e não
   se olham mais. Abertos todos ao mesmo tempo viravam uma parede de campos e
   chaves; agora cada bloco começa fechado e o próprio cabeçalho é o botão que
   abre. Quem liga o clique é o prepararDobrasConfig(), no app.js. */
#tela-configuracoes .bloco__cabecalho { cursor: pointer; user-select: none; margin-bottom: 0; }
#tela-configuracoes .bloco--aberto .bloco__cabecalho { margin-bottom: 12px; }
#tela-configuracoes .bloco:not(.bloco--aberto) > :not(.bloco__cabecalho) { display: none; }
#tela-configuracoes .bloco__cabecalho h2 { display: flex; align-items: center; gap: 9px; }
/* A setinha é a mesma das seções do Fluxo de caixa (.mes-secao). */
#tela-configuracoes .bloco__cabecalho h2::after {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.6px solid var(--cinza-suave);
  border-bottom: 1.6px solid var(--cinza-suave);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
#tela-configuracoes .bloco--aberto .bloco__cabecalho h2::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}
#tela-configuracoes .bloco__cabecalho:hover h2 { color: var(--verde-escuro); }
#tela-configuracoes .bloco__cabecalho:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 4px; border-radius: 6px;
}

/* ---- Peças (minutas redigidas no servidor) -------------------------------
   A lista é de cartões, e não de linhas de tabela: cada peça carrega um
   resumo, o que ficou para conferir e o que faltou — texto que não cabe numa
   célula. As etiquetas seguem as cores já usadas no sistema: verde para
   concluído, âmbar para "olhe isto", vermelho para falha.               ---- */

.pecas-lista { display: grid; gap: 12px; }

.peca-cartao {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 12px; padding: 14px 16px;
}
.peca-cartao--trabalhando { border-color: #cfe6dc; background: var(--verde-suave); }

.peca-cartao__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.peca-cartao__topo > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.peca-tipo { font-size: 14px; color: var(--cinza-suave); }
.peca-meta { font-size: 12px; color: var(--cinza-suave); margin: 0 0 8px; }

.peca-resumo {
  margin: 8px 0; font-size: 14px; line-height: 1.55; color: var(--cinza-texto);
}
.peca-resumo--erro { color: var(--vermelho); }

.peca-bloco {
  margin: 10px 0; padding: 10px 12px; border-radius: 9px;
  background: var(--fundo); font-size: 14px; line-height: 1.5;
}
.peca-bloco strong { display: block; margin-bottom: 4px; font-size: 13px; }
.peca-bloco ul { margin: 0; padding-left: 18px; }
.peca-bloco li { margin: 3px 0; }
/* O que faltou perguntar fica em âmbar: é a única parte do cartão que pede
   uma ação de quem está lendo. */
.peca-bloco--pergunta { background: #fdf3e0; color: #6b4300; }

.peca-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.etq--peca-fila      { background: #eef2f0; color: var(--cinza-suave); }
.etq--peca-redigindo { background: var(--verde-suave); color: var(--verde-escuro); }
.etq--peca-pronta    { background: #e3f5ee; color: var(--verde-escuro); }
.etq--peca-revisar   { background: #fdf3e0; color: #8a5600; }
.etq--peca-faltam    { background: #fdf3e0; color: #8a5600; }
.etq--peca-erro      { background: #fdeaea; color: var(--vermelho); }

.pecas-recado {
  margin-bottom: 12px; padding: 10px 14px; border-radius: 9px;
  background: #fdf3e0; color: #6b4300; font-size: 14px;
}

/* Escolha dos documentos dentro da janela "Pedir peça" */
.peca-docs {
  max-height: 200px; overflow-y: auto; border: 1px solid var(--borda);
  border-radius: 9px; padding: 8px 10px; background: var(--cartao);
}
.peca-doc {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 14px; cursor: pointer;
}
.peca-doc input { flex: 0 0 auto; }
.peca-doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peca-nota {
  font-size: 13px; color: var(--cinza-suave); line-height: 1.5;
  margin: 4px 0 0;
}

@media (max-width: 640px) {
  .peca-cartao__topo { align-items: flex-start; flex-direction: column; }
}

/* No escuro, só o que é cor fixa precisa de ajuste: os fundos âmbar e vermelho
   ficam claros de propósito (mesmo padrão de .etq--atrasado), porque essas
   cores de texto são fechadas e só leem bem sobre fundo claro. */
body.escuro .peca-cartao--trabalhando { border-color: #23483c; }
body.escuro .peca-bloco { background: #101916; }

/* ---- Modelos de peça (aba Modelos, dentro de Peças) ----------------------
   A lista é de linhas clicáveis com selos: o que interessa de relance é
   quantos trechos variáveis o modelo tem e se a conferência apontou algo.  */

#pecas-abas { margin-bottom: 14px; }

.modelos-lista { display: grid; gap: 6px; }
.modelos-secao {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cinza-suave);
  margin: 14px 0 2px; padding: 0;
}
.modelos-secao:first-child { margin-top: 0; }

.modelo-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 10px; padding: 10px 14px; font: inherit; color: inherit;
}
.modelo-linha:hover { border-color: var(--verde); background: var(--verde-suave); }
.modelo-linha > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modelo-linha__selos { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }

.modelo-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 6px;
}
.modelo-cab h2 { margin: 0 0 2px; font-size: 19px; }
.modelo-titulo {
  font-size: 14px; margin: 20px 0 4px;
  border-top: 1px solid var(--borda); padding-top: 14px;
}
.modelo-titulo span { color: var(--cinza-suave); font-weight: 400; }

/* Lista das variáveis: é a resposta visual à pergunta "o que dá para mudar
   nesta peça?". Rola dentro de si para não empurrar o resto da tela. */
.modelo-vars {
  list-style: none; margin: 8px 0 0; padding: 0;
  max-height: 340px; overflow-y: auto;
  border: 1px solid var(--borda); border-radius: 10px;
}
.modelo-var {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 12px; font-size: 13.5px; border-bottom: 1px solid var(--borda);
}
.modelo-var:last-child { border-bottom: 0; }
.modelo-var code {
  flex: 0 0 34px; color: var(--cinza-suave); font-size: 12px;
}
.modelo-var__texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.modelo-var__onde { flex: 0 0 auto; font-size: 11.5px; color: var(--cinza-suave); }
.modelo-var__aviso {
  flex: 0 0 auto; font-size: 11.5px; color: #8a5600;
  background: #fdf3e0; border-radius: 20px; padding: 1px 8px;
}

.modelo-achados { list-style: none; margin: 8px 0 0; padding: 0; }
.modelo-achado {
  padding: 7px 12px; font-size: 13.5px; border-radius: 8px;
  margin-bottom: 5px; background: var(--fundo);
}
.modelo-achado--alto { background: #fdeaea; color: #7a1a1a; }
.modelo-achado--medio { background: #fdf3e0; color: #6b4300; }

.modelo-orientacao {
  width: 100%; margin-top: 8px; padding: 12px 14px;
  border: 1px solid var(--borda); border-radius: 10px;
  background: var(--cartao); color: var(--cinza-texto);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; resize: vertical;
}

body.escuro .modelo-achado { background: #101916; }
body.escuro .modelo-linha:hover { border-color: var(--verde); }