/* ==========================================================================
   CRM Comercial — SilQuim / Siltec
   Identidade: azul-marinho #193C6C, fonte Source Sans 3.
   Layout de menu lateral, cards brancos arredondados e etiquetas coloridas.
   ========================================================================== */

/* Paleta da marca SilQuim/Siltec. Os seis primeiros vêm direto do manual;
   o dourado é o acento — é ele que tira o sistema do cinza institucional. */
:root {
  --azul: #193C6C;          /* principal */
  --azul-profundo: #102846; /* menu lateral, faixas */
  --azul-medio: #35547E;    /* apoio */
  --azul-suave: #8B9CB6;    /* texto sobre fundo escuro */
  --azul-lavado: #E8ECF3;   /* fundos claros */

  --dourado: #FAB400;       /* acento: destaque, item ativo, números */
  --dourado-claro: #FFF4DA; /* fundo de destaque */
  --dourado-escuro: #8a6300; /* texto sobre fundo dourado claro */

  --ardosia: #2E3946;       /* texto */
  --ardosia-media: #63707E; /* texto secundário */

  --branco: #FFFFFF;
  --fundo: #F2F4F8;
  --borda: #E2E7EF;
  --texto: var(--ardosia);
  --texto-suave: var(--ardosia-media);
  --texto-fraco: var(--azul-suave);

  /* Etiquetas, derivadas da paleta */
  --azul-tag-fundo: var(--azul-lavado);    --azul-tag-cor: var(--azul);
  --verde-tag-fundo: #e2f3e9;              --verde-tag-cor: #1a6b45;
  --lima-tag-fundo: #eaf3d4;               --lima-tag-cor: #4f6b16;
  --amarelo-tag-fundo: var(--dourado-claro); --amarelo-tag-cor: var(--dourado-escuro);
  --vermelho-tag-fundo: #fbe9e9;           --vermelho-tag-cor: #a32626;
  --cinza-tag-fundo: #eaeef4;              --cinza-tag-cor: var(--ardosia-media);

  /* --------------------------------------------- paleta de dados e estados

     Estas cores nao sao a identidade — a identidade e o azul e o dourado
     acima. Estas existem porque o sistema precisava de uma paleta para
     *dados*: urgencia, lead score, tipos de compromisso no calendario. Sem
     elas, tudo era um tom de azul e nada se distinguia de nada.

     Uma regra vinda da validacao, nao do gosto: SALSA e TOFFEE tem dE 9,0
     para visao normal — abaixo do piso de 15. Lado a lado ninguem distingue
     as duas, e em deuteranopia cai para 5,9. NUNCA use as duas juntas.
     SKYLINE, OCEAN e FORREST tem croma baixo (0,06 a 0,08) e leem como
     cinza em marca pequena; servem para faixa e fundo, nao para pontinho.  */
  --oceano: #4B8299;      /* azul-esverdeado: informativo, neutro */
  --floresta: #44724F;    /* verde: positivo, ganho */
  --ceu: #99BFDF;         /* azul claro: fundo e faixa, nunca marca sozinha */
  --ceu-lavado: #EAF2F9;
  --tangerina: #E99E26;   /* ambar: atencao, meio da rampa */
  --tangerina-clara: #FBEBD0;
  --toffee: #DA682F;      /* laranja queimado: nunca ao lado de salsa */
  --salsa: #DB3100;       /* vermelho: urgente, critico */
  --salsa-lavada: #FCE9E3;

  --raio: 16px;
  --raio-m: 10px;
  --raio-p: 8px;
  --sombra: 0 1px 2px rgba(16, 40, 70, .04), 0 4px 14px rgba(16, 40, 70, .06);
  --sombra-alta: 0 6px 28px rgba(16, 40, 70, .12);

  --fonte: "Source Sans 3", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  /* 248px para seis itens de menu era quase 30% da largura em janela média,
     com 176px de vazio entre "Relatórios" e o rodapé do usuário. O espaço
     sobrava de um lado e faltava do outro: o funil cortava 44px da última
     coluna. Medido em 1366x768. O piso é a marca — ver `.marca__logo`. */
  --lateral: 208px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-medio); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ======================================================== estrutura da página */

/* Teto de largura.

   A área de conteúdo era fluida sem limite: em 2560px ela chegava a 2.289px,
   a coluna da esquerda a 1.432px e o vazio entre o cliente e o valor voltava
   a 1.077px — pior que os 941px que as duas colunas tinham acabado de
   derrubar. Monitor maior não melhorava o conteúdo, só esticava.

   O teto é da grade inteira, e não só do conteúdo: a barra lateral já é um
   cartão com raio e sombra dentro de 16px de respiro, então ela acompanha o
   conteúdo em vez de ficar colada na borda com um rio de fundo no meio.

   1.680px de grade descontando 16px de respiro dos dois lados, os 208px da
   lateral e os 16px de intervalo deixam 1.424px de conteúdo — dentro da faixa
   de 1.400 a 1.500 decidida no item. */
.app {
  display: grid;
  grid-template-columns: var(--lateral) 1fr;
  gap: 16px;
  padding: 16px;
  min-height: 100vh;
  align-items: start;
  max-width: 1680px;
  margin: 0 auto;
}

/* ============================================================= menu lateral */

.lateral {
  position: sticky;
  top: 16px;
  background: linear-gradient(170deg, var(--azul) 0%, var(--azul-profundo) 100%);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: calc(100vh - 32px);
  color: var(--azul-lavado);
}

/* A assinatura da empresa em cima, sozinha; embaixo, o que a tela é. O
   logotipo já diz "SilQuim", então repeti-lo na linha de baixo seria eco — e
   omitir a Siltec apagaria metade de quem o sistema atende. */
.marca {
  display: block;
  padding: 0 8px;
}

.marca__logo {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
}

/* O piso de 150px do manual, agora escrito no CSS e não só no comentário.
   Com a lateral em 208px sobram 164px úteis para a marca — 14px acima do
   mínimo. Se alguém estreitar mais a coluna, o logotipo para de encolher e o
   layout reclama antes de a marca ficar ilegível, que é o comportamento certo:
   quebrar o alinhamento é reversível, publicar a marca ilegível não é. */
.lateral .marca__logo { min-width: 150px; }

/* A cauda do Q desce 10 das 40 unidades do desenho, mas ocupa só 19% da
   largura: oito dos nove traços terminam na linha de base. O resultado é uma
   faixa quase vazia embaixo da marca, que o navegador reserva inteira e o olho
   lê como buraco. A margem negativa devolve a maior parte dessa faixa — sem
   cortar o desenho, que continua inteiro e com a cauda preservada. */
.lateral .marca__logo { margin-bottom: -9px; }

/* No login há 324px úteis dentro da caixa, contra 164px na lateral. É a única
   tela onde a legenda "Adesivos e Selantes" chega a um tamanho legível, então
   o espaço é usado. */
.marca__logo--navy { max-width: 300px; margin: 0 auto; }

.marca__sistema {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
  font-weight: 600;
  color: var(--branco);
  line-height: 1.25;
}

.marca__sistema span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--azul-suave);
  letter-spacing: .3px;
}


/* A marca aparece em dois fundos: o menu lateral, escuro, e o cartão de
   login, branco. A cor padrão é a do fundo claro; o menu sobrescreve. */


.nav { display: flex; flex-direction: column; gap: 2px; }

.nav__titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--azul-suave);
  padding: 10px 10px 4px;
  opacity: .8;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: var(--raio-m);
  color: var(--azul-lavado);
  font-weight: 600;
  font-size: 14.5px;
  position: relative;
}

.nav__item:hover {
  background: rgba(255, 255, 255, .09);
  color: var(--branco);
  text-decoration: none;
}

/* O dourado marca onde a pessoa está — como barra fina e ícone, não como
   bloco preenchido. Acento pesa quando é pequeno. */
.nav__item.ativo {
  background: rgba(255, 255, 255, .13);
  color: var(--branco);
}
.nav__item.ativo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--dourado);
}
.nav__item.ativo:hover { background: rgba(255, 255, 255, .16); color: var(--branco); }
.nav__item.ativo svg { color: var(--dourado); }

.nav__item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Item de um bloco do plano que ainda não foi construído. */
.nav__item--futuro { color: rgba(232, 236, 243, .38); cursor: default; }
.nav__item--futuro:hover { background: transparent; color: rgba(232, 236, 243, .38); }
.nav__item--futuro .nav__marca {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--azul-suave);
  background: rgba(255, 255, 255, .1);
  padding: 1px 6px;
  border-radius: 5px;
}

.lateral__rodape { margin-top: auto; }

.usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--raio-m);
  background: rgba(255, 255, 255, .08);
}

.usuario__inicial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* --------------------------------------------------- cores de avatar

   Cada pessoa recebe uma cor estável, derivada do nome (core.indice_de_cor).
   São tons de mesma profundidade, para nenhum colega "gritar" mais que o
   outro na lista, e todos aceitam texto branco com folga de contraste. */

.inicial--1 { background: #193C6C; color: #fff; }  /* azul da marca */
.inicial--2 { background: #35547E; color: #fff; }  /* azul médio */
.inicial--3 { background: #1A6B45; color: #fff; }  /* verde */
.inicial--4 { background: #8A6300; color: #fff; }  /* dourado escuro */
.inicial--5 { background: #6E3A63; color: #fff; }  /* ameixa */
.inicial--6 { background: #9E4527; color: #fff; }  /* terracota */
.inicial--7 { background: #2E3946; color: #fff; }  /* ardósia */
.inicial--8 { background: #1F6070; color: #fff; }  /* azul-petróleo */

/* A mesma pessoa, em linha, dentro de tabela, cartão ou linha do tempo.
   A bolinha é pequena de propósito: identifica sem competir com o dado
   principal da linha, que é o cliente. */
.pessoa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  vertical-align: middle;
}

.pessoa__inicial {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.pessoa__nome {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pessoa--vazia { color: var(--texto-fraco); }

/* Nas linhas de apoio — quem registrou, quem é o responsável, o vendedor do
   cliente parado — a bolinha encolhe para não pesar mais que a linha. */
.evento__autor .pessoa__inicial,
.ranking__detalhe .pessoa__inicial,
.tarefa__quem .pessoa__inicial,
.negocio__pessoa .pessoa__inicial {
  width: 19px;
  height: 19px;
  font-size: 10px;
}
.evento__autor .pessoa__nome,
.ranking__detalhe .pessoa__nome,
.tarefa__quem .pessoa__nome,
.negocio__pessoa .pessoa__nome { font-size: 12.5px; }

/* Na ficha, a carteira é resposta de destaque e mantém o corpo do texto. */
.resumo__valor .pessoa__nome { font-size: 15px; font-weight: 600; }
.resumo__valor .pessoa + .pessoa { margin-left: 12px; }

.usuario__dados { min-width: 0; flex: 1; }
.usuario__nome {
  font-weight: 700;
  font-size: 14px;
  color: var(--branco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.usuario__perfil { font-size: 12px; color: var(--azul-suave); }

.usuario form { margin: 0; display: flex; }
.usuario__sair {
  background: none;
  border: 0;
  padding: 5px;
  cursor: pointer;
  color: var(--azul-suave);
  display: grid;
  place-items: center;
  border-radius: 6px;
}
.usuario__sair:hover { color: var(--branco); background: rgba(255, 255, 255, .12); }
.usuario__sair svg { width: 17px; height: 17px; }

/* ================================================================ principal */

.principal { min-width: 0; padding-bottom: 24px; }

.topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 6px 4px 20px;
  flex-wrap: wrap;
}

.topo__titulo {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--texto);
  line-height: 1.15;
}
.topo__subtitulo { margin: 4px 0 0; color: var(--texto-suave); font-size: 15px; }
.topo__acoes { display: flex; align-items: center; gap: 10px; }

/* ============================================================ números do topo */

/* -------------------------------------------------------- faixa de abertura */

.hero {
  background: var(--azul);
  border-radius: var(--raio);
  padding: 24px 28px;
  color: var(--branco);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.hero__saudacao { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.hero__texto { margin: 6px 0 0; color: var(--azul-suave); font-size: 15px; max-width: 60ch; }
.hero__texto strong { color: var(--dourado); font-weight: 600; }

.hero__acoes { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }

/* ------------------------------------------------------------- indicadores */

.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.indicador {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid transparent;
  transition: transform .12s, box-shadow .12s;
}
a.indicador:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
  text-decoration: none;
}

.indicador__icone {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--azul-lavado);
  color: var(--azul);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.indicador__icone svg { width: 21px; height: 21px; }

/* O número é o que se lê de longe; o rótulo só confirma o que ele significa.
   A distância entre os dois tamanhos é que faz o painel ser lido de relance. */
.indicador__valor {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.8px;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.indicador__rotulo {
  font-size: 12.5px;
  color: var(--texto-suave);
  margin-top: 3px;
  letter-spacing: .1px;
}

/* Variantes: uma barra fina na lateral basta para o olho encontrar o que
   precisa de ação. Fundo inteiro colorido cansa numa tela que se abre todo dia. */
.indicador--alerta { border-left: 3px solid var(--dourado); }
.indicador--alerta .indicador__icone { background: var(--dourado-claro); color: var(--dourado-escuro); }

.indicador--urgente { border-left: 3px solid var(--vermelho-tag-cor); }
.indicador--urgente .indicador__icone { background: var(--vermelho-tag-fundo); color: var(--vermelho-tag-cor); }
.indicador--urgente .indicador__valor { color: var(--vermelho-tag-cor); }

/* ==================================================================== cards */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.cartao {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px 22px;
}

.cartao__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cartao__titulo {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--texto);
}
.cartao__texto { margin: 0; color: var(--texto-suave); font-size: 14px; }

/* Card de funcionalidade ainda não construída. */
.cartao--futuro {
  background: transparent;
  border: 1px dashed #cfd7e2;
  box-shadow: none;
}
.cartao--futuro .cartao__titulo { color: var(--texto-suave); }

/* ================================================================ etiquetas */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.etiqueta--azul     { background: var(--azul-tag-fundo);     color: var(--azul-tag-cor); }
.etiqueta--verde    { background: var(--verde-tag-fundo);    color: var(--verde-tag-cor); }
.etiqueta--lima     { background: var(--lima-tag-fundo);     color: var(--lima-tag-cor); }
.etiqueta--amarelo  { background: var(--amarelo-tag-fundo);  color: var(--amarelo-tag-cor); }
.etiqueta--vermelho { background: var(--vermelho-tag-fundo); color: var(--vermelho-tag-cor); }
.etiqueta--cinza    { background: var(--cinza-tag-fundo);    color: var(--cinza-tag-cor); }

/* =================================================================== botões */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--azul);
  color: var(--branco);
  font-family: var(--fonte);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.botao:hover { background: var(--azul-profundo); text-decoration: none; color: var(--branco); }
.botao svg { width: 17px; height: 17px; }

.botao--claro {
  background: var(--branco);
  color: var(--texto);
  border-color: var(--borda);
}
.botao--claro:hover { background: var(--fundo); color: var(--texto); }

/* Botão sobre fundo escuro (faixa do painel). Sem preenchimento dourado:
   contorno claro pesa menos e continua sendo a ação principal da faixa. */
.botao--contorno {
  background: transparent;
  color: var(--branco);
  border-color: rgba(255, 255, 255, .38);
}
.botao--contorno:hover { background: rgba(255, 255, 255, .12); color: var(--branco); }

.botao--largo { width: 100%; justify-content: center; border-radius: var(--raio-m); }

/* Contorno para fundo claro. O `--contorno` acima é branco: nasceu para a
   faixa azul e some no topo das telas de relatório, que é fundo claro. */
.botao--linha {
  background: transparent;
  color: var(--azul);
  border-color: var(--borda);
  font-size: 14px;
  padding: 8px 16px;
}
.botao--linha:hover {
  background: var(--azul-lavado);
  color: var(--azul);
  text-decoration: none;
}

/* ============================================================== formulários */

.campo { margin-bottom: 16px; }

.campo label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--texto);
}

.campo input[type="text"],
.campo input[type="password"],
.campo input[type="email"],
.campo input[type="date"],
.campo input[type="number"],
.campo select,
.campo textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  font-family: var(--fonte);
  font-size: 15px;
  background: var(--branco);
  color: var(--texto);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-medio);
  box-shadow: 0 0 0 3px rgba(43, 88, 150, .13);
}

.campo__ajuda { font-size: 13px; color: var(--texto-suave); margin-top: 5px; }
.campo__erro { color: var(--vermelho-tag-cor); font-size: 13px; margin-top: 5px; }

/* ================================================================ mensagens */

.avisos { margin-bottom: 18px; }

.aviso {
  padding: 12px 16px;
  border-radius: var(--raio-m);
  border: 1px solid;
  margin-bottom: 10px;
  font-size: 14.5px;
}
.aviso--success, .aviso--info { background: var(--verde-tag-fundo); border-color: #bfe3cd; color: var(--verde-tag-cor); }
.aviso--warning { background: var(--amarelo-tag-fundo); border-color: #ecd7a6; color: var(--amarelo-tag-cor); }
.aviso--error   { background: var(--vermelho-tag-fundo); border-color: #eec0c0; color: var(--vermelho-tag-cor); }

/* ==================================================================== login */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, var(--azul) 0%, var(--azul-profundo) 100%);
  padding: 24px;
}

.login__caixa {
  width: 100%;
  max-width: 396px;
  background: var(--branco);
  border-radius: 20px;
  padding: 38px 36px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}

/* No login o logotipo tem a tela toda: é o único lugar onde a marca aparece
   sobre fundo claro, e onde ela cumpre o papel de dizer de quem é o sistema
   para quem ainda não entrou. */
.login__marca {
  display: block;
  text-align: center;
  margin-bottom: 26px;
}

.login__marca .marca__sistema {
  border-top-color: var(--borda);
  color: var(--texto);
}

.login__marca .marca__sistema span { color: var(--texto-suave); }

/* =============================================================== erro cheio */

.erro { max-width: 540px; margin: 70px auto; text-align: center; }
.erro__codigo { font-size: 66px; font-weight: 700; color: #d5dce6; line-height: 1; margin: 0; }
.erro__titulo { color: var(--texto); margin: 10px 0 12px; font-size: 22px; }
.erro__mensagem { color: var(--texto-suave); margin-bottom: 26px; }

.botao--pequeno { padding: 6px 13px; font-size: 13.5px; }
.botao--perigo { background: var(--vermelho-tag-cor); }
.botao--perigo:hover { background: #862020; }

.topo__separador { color: var(--texto-fraco); margin: 0 2px; }

/* ================================================================= atalhos */

.atalhos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.atalhos__rotulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-fraco);
  margin-right: 2px;
}

.atalho {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--branco);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: 13.5px;
  font-weight: 600;
}
.atalho:hover { border-color: var(--azul-medio); color: var(--azul); text-decoration: none; }
.atalho strong {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--azul-lavado);
  color: var(--azul);
  font-size: 12px;
}
.atalho--ativo strong { background: rgba(255, 255, 255, .22); color: var(--branco); }
.atalho--ativo {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}
.atalho--ativo:hover { color: var(--branco); }

/* ================================================================= filtros */

.filtros {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.filtros__topo { display: flex; align-items: center; gap: 10px; }

.filtros__busca { position: relative; flex: 1; min-width: 0; }

.filtros__busca input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  font-family: var(--fonte);
  font-size: 15px;
  background: var(--fundo);
}
.filtros__busca input:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--azul-medio);
  box-shadow: 0 0 0 3px rgba(43, 88, 150, .13);
}

.filtros__lupa {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--texto-fraco);
  pointer-events: none;
}

/* Os nove selects, recolhidos.

   Abertos sempre, empurravam o primeiro cliente para 488px do topo — meia
   página de filtros antes de qualquer dado, numa tela em que a área útil real
   é pouco mais de 600px. E logo acima já estão os atalhos, que é como a
   equipe filtra na maior parte das vezes: o caso raro ocupava o lugar do
   comum.

   O bloco abre sozinho quando há filtro aplicado, e diz quais — recolher não
   desliga nada (campo dentro de `details` fechado continua sendo enviado), e
   filtro valendo sem aparecer é pior que filtro ocupando espaço. */
.mais-filtros__gatilho {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  list-style: none;
  flex-wrap: wrap;
}
.mais-filtros__gatilho::-webkit-details-marker { display: none; }
.mais-filtros__gatilho:hover { color: var(--azul); }

.mais-filtros__seta {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform .15s;
}
.mais-filtros[open] .mais-filtros__seta { transform: rotate(90deg); }

/* O que está valendo, dito por extenso: com o bloco fechado, esta linha é a
   única coisa entre a pessoa e um filtro que ela não sabe que aplicou. */
.mais-filtros__conta {
  font-weight: 400;
  color: var(--dourado-escuro);
  background: var(--dourado-claro);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12.5px;
}

.filtros__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding-top: 12px;
}

.filtro { display: flex; flex-direction: column; gap: 4px; }
.filtro > span {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-fraco);
}
.filtro select,
.filtro input {
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  font-family: var(--fonte);
  font-size: 14px;
  background: var(--branco);
  color: var(--texto);
  width: 100%;
}

.filtros__acoes { display: flex; gap: 10px; }

/* ================================================================= tabela */

.cartao--tabela { padding: 0; overflow: hidden; }

.tabela__rolagem { overflow-x: auto; }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.tabela th {
  text-align: left;
  padding: 13px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-fraco);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

.tabela td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}

.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover { background: var(--azul-lavado); }
.tabela tbody tr:last-child td { border-bottom: 0; }

/* Coluna de valor: alinhada à direita e com dígito de largura fixa. Sem
   `tabular-nums`, o "1" é mais estreito que o "8" e as casas decimais de uma
   coluna de dinheiro deixam de se alinhar verticalmente — o olho perde a
   referência justamente onde precisa comparar de cima para baixo. */
.tabela__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabela__principal {
  display: block;
  font-weight: 600;
  color: var(--texto);
}
.tabela__principal:hover { color: var(--azul); text-decoration: none; }

.tabela__secundario {
  display: block;
  font-size: 12.5px;
  color: var(--texto-fraco);
  margin-top: 1px;
}

/* ============================================================== paginação */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  border-top: 1px solid var(--borda);
}
.paginacao__posicao { font-size: 14px; color: var(--texto-suave); }

/* ============================================================ lista vazia */

.vazio { padding: 56px 24px; text-align: center; }
.vazio__titulo { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.vazio__texto {
  color: var(--texto-suave);
  margin: 0 auto 20px;
  max-width: 420px;
  font-size: 14.5px;
}

/* ============================================== ficha do cliente */

.ficha {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: start;
}

.ficha__principal { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ficha__lateral { position: sticky; top: 16px; }

.dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 24px;
  margin: 0;
}

.dados__item dt,
.dados__bloco dt {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-fraco);
  margin-bottom: 2px;
}
.dados__item dd,
.dados__bloco dd { margin: 0; font-size: 15px; }

.dados__bloco { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda); }
.dados__detalhe { color: var(--texto-suave); }

/* --------------------------------------------------------- contatos */

.contatos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.contato {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--borda);
}
.contato:last-child { border-bottom: 0; padding-bottom: 0; }

.contato__inicial {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}

.contato__dados { flex: 1; min-width: 0; }
.contato__nome { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contato__cargo { font-size: 13.5px; color: var(--texto-suave); }
.contato__meio { font-size: 14px; color: var(--texto-suave); display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.contato__obs { font-size: 13.5px; color: var(--texto-suave); margin-top: 4px; font-style: italic; }

.contato__acoes { display: flex; gap: 12px; font-size: 13.5px; white-space: nowrap; }
.contato__remover { color: var(--vermelho-tag-cor); }

/* ------------------------------------------------------------ resumo */

.resumo { display: flex; flex-direction: column; gap: 13px; }

.resumo__item { display: flex; flex-direction: column; }
.resumo__rotulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-fraco);
}
.resumo__valor { font-size: 15.5px; font-weight: 600; }
.resumo__valor--destaque { font-size: 22px; color: var(--azul); letter-spacing: -.4px; }
.resumo__nota { font-size: 13px; color: var(--texto-suave); margin-top: -8px; }

/* ============================================================ formulários */

.formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 18px;
}
.formulario--largo { grid-template-columns: 1fr; }

.campo--erro input,
.campo--erro select,
.campo--erro textarea { border-color: var(--vermelho-tag-cor); }

.campo__obrigatorio { color: var(--vermelho-tag-cor); }

.formulario__rodape {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

form > .cartao { margin-bottom: 14px; }
form > .cartao > .cartao__titulo { margin: 0 0 16px; }

/* ========================================== listas de apoio das telas */

.lista-explicativa {
  margin: 0;
  padding-left: 20px;
  color: var(--texto-suave);
  font-size: 14.5px;
}
.lista-explicativa li { margin-bottom: 7px; }
.lista-explicativa strong { color: var(--texto); }

.historico { list-style: none; margin: 0; padding: 0; }
.historico li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 14px;
}
.historico li:last-child { border-bottom: 0; }
.historico__detalhe { color: var(--texto-suave); font-size: 13px; white-space: nowrap; }

.tabela--simples tbody tr { cursor: default; }
.tabela--simples tbody tr:hover { background: transparent; }

input[type="file"] {
  width: 100%;
  padding: 10px 13px;
  border: 1px dashed var(--borda);
  border-radius: var(--raio-m);
  font-family: var(--fonte);
  font-size: 14.5px;
  background: var(--fundo);
  cursor: pointer;
}

/* ============================================================ painel inicial */

.painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  align-items: start;
}

/* Gráfico com mais largura que a lista ao lado. */
.painel--duas { grid-template-columns: 1.45fr 1fr; margin-bottom: 14px; }
@media (max-width: 1080px) { .painel--duas { grid-template-columns: 1fr; } }

/* Painel em duas colunas.

   Antes, todo bloco ocupava 100% da área de conteúdo. Em janela de 1568px
   isso dava 1.297px de cartão para uma linha de lista com 232px de nome e
   79px de valor: **941px de vazio** entre o cliente e o número dele, que o
   olho precisa atravessar para ligar as duas informações. Layout de celular
   ampliado.

   À esquerda a decisão — a curva de recência e quem parou de comprar. À
   direita o contexto do dia: a semana, os retornos, os orçamentos parados e
   quem não está atendendo. 1,7fr contra 1fr dá 63% / 37%.

   `minmax(0, …)` nas duas: sem isso a coluna nunca fica menor que o conteúdo
   dela, e uma tabela ou um nome comprido estoura a grade em vez de encolher. */
.painel-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.painel-colunas--uma { grid-template-columns: minmax(0, 1fr); }

.painel-colunas__principal,
.painel-colunas__lateral {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Abaixo do corte não há espaço horizontal para dividir, e insistir nas duas
   colunas daria duas tiras estreitas. As colunas deixam de ser caixa
   (`display: contents`) e os cartões viram filhos diretos da pilha — aí o
   `order` de cada um devolve a ordem que a tela tinha antes das colunas. */
@media (max-width: 1100px) {
  .painel-colunas {
    display: flex;
    flex-direction: column;
    /* Sem isto o `align-items: start` da regra de cima passa a valer no eixo
       horizontal e cada cartão encolhe até o conteúdo: a faixa da semana
       ficava com 330px numa tela de 1.000. */
    align-items: stretch;
  }
  .painel-colunas__principal,
  .painel-colunas__lateral {
    display: contents;
  }
}

/* Estado vazio: linha, não card.

   Um bloco sem nada a mostrar ocupava 118px de card, com sombra e título
   próprio, para dizer uma frase. Com quatro blocos assim — que é o painel que
   a equipe encontra no primeiro dia, sem os dados de exemplo — a tela ficava
   cheia de caixas anunciando que não há nada a fazer, e isso lê como sistema
   que não funciona.

   Medido em 1366x768: o painel zerado saiu de 768px de conteúdo para 592px.

   O texto continua o mesmo. Muda o continente: os blocos vazios saem da grade
   e viram linha, onde não competem com o que tem conteúdo. O card completo
   volta assim que houver um item.

   A tira fica ao **pé da coluna do bloco que ela explica**, e não no rodapé da
   página. Em 1568px a coluna da esquerda tem 902px e a da direita, no primeiro
   dia, tem só a faixa da semana: 141px. Sem as frases ali, a coluna terminava
   sem motivo aparente e sobravam 761px de branco. Com elas, a coluna diz por
   que terminou — que é para isso que os textos foram escritos. */
.nada-aqui {
  /* Depois de todos os cartões, sempre. Sem `order` própria ela vale 0, e
     abaixo de 1100px — onde as colunas viram pilha e o `order` de cada cartão
     passa a valer — a tira ia parar antes de tudo, anunciando o que não há
     antes de mostrar o que há. */
  order: 9;
  padding: 13px 4px 0;
  border-top: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* `.nada-aqui__linha`, e não `.vazio`: aquela classe já existe desde a linha
   860 como estado vazio de página inteira, com 56px de padding e texto
   centralizado. Reaproveitá-la deu uma "linha" de 132px de altura. */
.nada-aqui__linha {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: var(--texto-suave);
}
.nada-aqui__linha::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--texto-fraco);
}

/* ------------------------------------------------------------- gráfico */

/* O gráfico é HTML, não SVG.

   Era um SVG de 620x170 com `preserveAspectRatio="none"` e `width: 100%`. Num
   monitor de 1920px o cartão dava 1.605px de largura, então o desenho inteiro
   era esticado 2,59x na horizontal contra 1,01x na vertical: "set" saía com
   36px de largura para 15px de altura, o topo arredondado da barra virava
   elipse e a linha do corte ficava com o dobro da espessura da grade.

   Um viewBox fixo não tinha como escapar disso — ou estica, ou sobra moldura,
   porque a caixa muda de proporção com a janela e o servidor não sabe a
   largura. Aqui não há desenho para esticar: a barra é uma caixa de altura
   percentual, e o texto é texto. Vale em qualquer largura. */
.grafico { margin: 6px 0 0; }

/* A altura sai da largura, e não de um número fixo.

   Com 132px fixos, o desenho ficava em 5,2:1 na coluna de 808px e em 9,4:1
   antes do teto de largura — proporção de minigráfico de linha, não de
   gráfico de barras que alguém vai ler. Barras larguíssimas e baixas achatam
   a diferença entre os meses, que é justamente o que o desenho existe para
   mostrar.

   `aspect-ratio` mantém a proporção igual em qualquer largura, em vez de uma
   altura fixa que só acerta numa. 3:1 na área de plotagem dá ~2,8:1 no
   desenho inteiro, contando a faixa dos meses — dentro da faixa de 2:1 a 3:1
   decidida no item, e no lado raso dela, que é o que menos empurra o resto do
   painel para baixo.

   A margem de cima reserva espaço para o rótulo da maior barra, que fica
   pendurado acima dela. */
.grafico__area {
  position: relative;
  aspect-ratio: 3 / 1;
  margin-top: 16px;
}

.grafico__grade {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--borda);
}
.grafico__tick {
  position: absolute;
  left: 0;
  bottom: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

/* Onde começa o território de cliente parado. */
.grafico__corte {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--dourado);
}

.grafico__colunas {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100%;
}

.grafico__coluna {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.grafico__barra {
  position: relative;
  width: 100%;
  border-radius: 4px 4px 0 0;   /* o mesmo RAIO do desenho antigo */
  background: var(--azul-medio);
  transition: background .12s;
}
.grafico__barra--parado { background: var(--azul-suave); }
.grafico__coluna:hover .grafico__barra { background: var(--azul); }

.grafico__rotulo-direto {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--azul);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* O eixo repete a mesma divisão de largura das colunas, para o rótulo cair
   sob a barra dele em qualquer largura de tela. */
.grafico__eixo {
  display: flex;
  gap: 2px;
  margin-top: 7px;
}
.grafico__mes {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--texto-suave);
}

.grafico__legenda {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--texto-suave);
  line-height: 1.45;
}

.cartao__link { font-size: 13px; font-weight: 600; white-space: nowrap; }

.tarefa__cliente { font-weight: 600; color: var(--texto); }
.tarefa__cliente:hover { color: var(--azul); text-decoration: none; }

/* Lista com número em destaque à direita (dias parado, dias sem resposta). */
.ranking { list-style: none; margin: 0; padding: 0; }

.ranking__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borda);
}
.ranking__item:last-child { border-bottom: 0; padding-bottom: 0; }

.ranking__nome { font-weight: 600; color: var(--texto); font-size: 14.5px; }
.ranking__nome:hover { color: var(--azul); text-decoration: none; }
.ranking__detalhe { font-size: 12.5px; color: var(--texto-suave); margin-top: 1px; }

.ranking__valor {
  font-size: 19px;
  font-weight: 700;
  color: var(--azul);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}
.ranking__valor span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-fraco);
  margin-top: 2px;
}

/* ==================================================== janela sobreposta */

.janela {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  box-shadow: 0 24px 70px rgba(16, 41, 76, .3);
  color: var(--texto);
  background: var(--branco);
}
.janela::backdrop { background: rgba(16, 41, 76, .45); }

.janela__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  background: var(--branco);
  border-radius: var(--raio) var(--raio) 0 0;
}
.janela__cabecalho h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--azul);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.janela__fechar {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--texto-fraco);
  padding: 4px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.janela__fechar:hover { background: var(--fundo); color: var(--texto); }
.janela__fechar svg { width: 19px; height: 19px; }

.janela__corpo { padding: 22px; overflow-y: auto; }
.janela__carregando { color: var(--texto-suave); text-align: center; padding: 30px 0; }

/* ---------------------------------------------- ação na linha da tabela */

.tabela__acao { width: 1%; white-space: nowrap; }

.acao-linha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--branco);
  color: var(--texto-suave);
  font-family: var(--fonte);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.acao-linha:hover { border-color: var(--azul); background: var(--azul); color: var(--branco); }
.acao-linha svg { width: 14px; height: 14px; }

/* ================================================ desfecho da interação */

.desfecho {
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  padding: 16px 18px 4px;
  margin: 4px 0 18px;
  background: var(--fundo);
}
.desfecho--erro { border-color: var(--vermelho-tag-cor); }

.desfecho legend {
  font-weight: 700;
  font-size: 14.5px;
  padding: 0 6px;
  color: var(--azul);
}

.desfecho__ajuda {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--texto-suave);
}

.desfecho__opcoes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.desfecho__opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--branco);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.desfecho__opcao--ativa { border-color: var(--azul); background: var(--azul-lavado); color: var(--azul); }
.desfecho__opcao input { margin: 0; accent-color: var(--azul); }

.desfecho__detalhe { padding-bottom: 4px; }
.desfecho__detalhe[hidden] { display: none; }

.prazos { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.prazo {
  padding: 4px 11px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--branco);
  color: var(--texto-suave);
  font-family: var(--fonte);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.prazo:hover { border-color: var(--azul); color: var(--azul); }

/* Escolha do meio na tentativa sem contato.

   Não reaproveita `.desfecho__opcao`: aquela pílula é do bloco "E agora?" e
   seu estado ativo é pintado por JavaScript. Aqui o rádio nativo faz o
   trabalho sozinho — ele fica invisível mas focável, e a pílula ao lado
   responde ao `:checked`. Sem JS, funciona também dentro da janela. */
.meios { display: flex; gap: 8px; flex-wrap: wrap; }
.meio { display: inline-flex; position: relative; }
.meio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.meio__pilula {
  display: inline-flex;
  padding: 8px 16px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--branco);
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.meio__pilula:hover { border-color: var(--azul); color: var(--azul); }
.meio input:checked + .meio__pilula {
  border-color: var(--azul);
  background: var(--azul-lavado);
  color: var(--azul);
}
.meio input:focus-visible + .meio__pilula {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* Quantas tentativas já foram feitas, quando ainda não chegou no alerta. */
.tentativa__placar {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--texto-suave);
}

/* Saída para quem abriu a tela errada: atenderam, afinal. Fica no rodapé, em
   texto, para não competir com o botão que resolve o caso comum. */
.tentativa__troca {
  margin-left: auto;
  font-size: 13px;
  color: var(--texto-suave);
}

/* ================================================== linha do tempo */

.linha-tempo { list-style: none; margin: 0; padding: 0; }

.evento {
  display: flex;
  gap: 14px;
  padding-bottom: 18px;
  position: relative;
}
.evento:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--borda);
}

.evento__marca {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--azul-medio);
  border: 3px solid var(--branco);
  box-shadow: 0 0 0 2px var(--borda);
  flex-shrink: 0;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.evento__marca--visita  { background: var(--lima-tag-cor); }
.evento__marca--reuniao { background: var(--lima-tag-cor); }
.evento__marca--email   { background: var(--texto-fraco); }
.evento__marca--whatsapp{ background: var(--verde-tag-cor); }

/* Tentativa sem contato: marca vazada, e não colorida.

   A distinção não é decorativa. Percorrendo a linha do tempo, uma bolinha
   cheia é conversa que houve e uma vazada é conversa que não houve — e é
   isso que impede de ler cinco tentativas como cinco atendimentos. A cor
   sozinha não carrega a informação: o cabeçalho diz "Ninguém atendeu". */
.evento__marca--tentativa {
  background: var(--branco);
  border-color: var(--branco);
  box-shadow: 0 0 0 2px var(--texto-fraco);
}
.evento--tentativa .evento__cabecalho strong {
  color: var(--texto-suave);
  font-weight: 600;
}
.evento--tentativa .evento__resumo {
  color: var(--texto-suave);
  font-style: italic;
}

.evento__corpo { flex: 1; min-width: 0; }

.evento__cabecalho {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 14.5px;
}
.evento__data { color: var(--texto-suave); font-size: 13.5px; }
.evento__quem { color: var(--texto-suave); font-size: 13.5px; }

.evento__resumo {
  margin: 4px 0 8px;
  font-size: 14.5px;
  white-space: pre-line;
}

.evento__rodape {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.evento__autor { margin-left: auto; }

/* Ação de remover: precisa parecer botão. Como texto cinza de 12px colado no
   nome de quem registrou, a linha lia "Filipe remover" e ninguém achava. */
.evento__remover {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--branco);
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 600;
}
.evento__remover:hover {
  border-color: var(--vermelho-tag-cor);
  background: var(--vermelho-tag-fundo);
  color: var(--vermelho-tag-cor);
  text-decoration: none;
}
.evento__remover svg { width: 13px; height: 13px; }

.citacao {
  margin: 14px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--borda);
  color: var(--texto-suave);
  font-style: italic;
}

/* ========================================================= tarefas */

.tarefas { list-style: none; margin: 0; padding: 0; }

.tarefa {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borda);
}
.tarefa:last-child { border-bottom: 0; padding-bottom: 0; }
.tarefa form { margin: 0; }

.tarefa__data {
  font-weight: 700;
  font-size: 13.5px;
  min-width: 46px;
  flex-shrink: 0;
}
.tarefa--atrasada .tarefa__data { color: var(--vermelho-tag-cor); }

.tarefa__aviso {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--vermelho-tag-cor);
}
.tarefa__aviso--hoje { color: var(--alerta, #855c08); }

.tarefa__corpo { flex: 1; min-width: 0; font-size: 14px; }
.tarefa__quem { font-size: 12.5px; color: var(--texto-fraco); }

.tarefa__concluir {
  background: none;
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 5px;
  cursor: pointer;
  color: var(--texto-fraco);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tarefa__concluir:hover {
  border-color: var(--verde-tag-cor);
  background: var(--verde-tag-fundo);
  color: var(--verde-tag-cor);
}
.tarefa__concluir svg { width: 15px; height: 15px; }

/* ======================================================= funil (quadro) */

.filtros-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros-linha select,
.filtros-linha input[type="date"] {
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-family: var(--fonte);
  font-size: 14px;
  background: var(--branco);
  color: var(--texto);
  cursor: pointer;
}

/* ================================================================ relatórios */

/* Abas em vez de página-índice: quem abre um relatório costuma olhar mais de
   um na mesma sentada. O dourado marca a aba atual, como a barra do menu. */
.abas {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--borda);
}

.aba {
  padding: 9px 16px 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.aba:hover { color: var(--azul); text-decoration: none; }
.aba--ativa { color: var(--azul); border-bottom-color: var(--dourado); }

/* Explicação de por que um número está assim, ou não está. Diferente de
   `.aviso`, que é mensagem do sistema depois de uma ação. */
.nota {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--azul-medio);
  border-radius: var(--raio-m);
  padding: 14px 18px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--texto-suave);
}
.nota p { margin: 0 0 8px; }
.nota p:last-child { margin-bottom: 0; }
.nota strong { color: var(--texto); }
.nota--atencao { border-left-color: var(--dourado); }

.nota code,
.cartao__nota code {
  background: var(--azul-lavado);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .92em;
}

.cartao__nota {
  font-size: 12.5px;
  color: var(--texto-suave);
  text-align: right;
  max-width: 45%;
}

.cartao__rodape {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--texto-suave);
}

/* Barra proporcional dentro da linha da tabela. Fina de propósito: ela serve
   para comparar de relance, não para ser o assunto da linha. */
.barra {
  display: flex;
  gap: 2px;               /* respiro entre as marcas, em vez de contorno */
  width: 100%;
  min-width: 80px;
  height: 8px;
  border-radius: 999px;
  background: var(--azul-lavado);
  overflow: hidden;
}
.barra__parte { height: 100%; border-radius: 999px; }
.barra__parte--ativo    { background: var(--verde-tag-cor); }
/* Parado é âmbar: nem quem compra, nem quem já foi embora. A cor sozinha não
   carrega o dado — as colunas numéricas ao lado dizem quantos são, e a
   legenda nomeia cada marca. */
.barra__parte--parado   { background: var(--amarelo-tag-cor); }
.barra__parte--inativo  { background: var(--azul-suave); }
.barra__parte--ganho    { background: var(--verde-tag-cor); }
.barra__parte--perda    { background: var(--vermelho-tag-cor); }
.barra__parte--neutro   { background: var(--azul-medio); }

.coluna-barra { width: 150px; }

.legenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  font-size: 12.5px;
}
.legenda__marca { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legenda__marca--ativo { background: var(--verde-tag-cor); }
.legenda__marca--parado { background: var(--amarelo-tag-cor); }
.legenda__marca--inativo { background: var(--azul-suave); }
.legenda--dica { color: var(--texto-fraco); }

/* Número que abre a lista por trás dele. Continua parecendo número — a
   sublinha só aparece no passar do mouse —, mas o cursor denuncia o link. */
.numero {
  font-weight: 600;
  color: var(--texto);
  border-bottom: 1px dashed transparent;
  font-variant-numeric: tabular-nums;
}
.numero:hover {
  color: var(--azul);
  border-bottom-color: var(--azul);
  text-decoration: none;
}
.numero--destaque { font-weight: 700; font-size: 15px; color: var(--azul); }
.numero--alerta { font-weight: 700; color: var(--amarelo-tag-cor); }
.numero--zero { color: var(--texto-fraco); font-weight: 400; }

.tabela__num small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 400;
  color: var(--texto-fraco);
}
.tabela__num small:empty { display: none; }

.tabela th small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto-fraco);
}

.tabela__num--destaque { font-weight: 700; color: var(--azul); }
.tabela__vazia { text-align: center; color: var(--texto-fraco); padding: 28px 8px; }
.tabela__principal--vazio { color: var(--texto-fraco); font-weight: 400; }

.variacao { font-weight: 700; font-size: 13.5px; }
.variacao--sobe { color: var(--verde-tag-cor); }
.variacao--desce { color: var(--vermelho-tag-cor); }
.variacao--nova {
  color: var(--azul-medio);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Item de ranking com barra embaixo do nome. */
.ranking__item--barra { align-items: flex-start; }
.ranking__corpo { flex: 1; min-width: 0; }
.ranking__corpo .barra { margin-top: 8px; }

/* Seis colunas de largura igual não cabem em tela nenhuma: o quadro pediria
   1.630px e numa tela de 1440 sobram 1.129px, deixando justamente Ganho e
   Perdido do lado de fora, atrás de uma barra de rolagem que ninguém procura.
   Daí a divisão desigual: as quatro colunas de trabalho repartem o espaço que
   houver, e as duas de desfecho — que são placar, não fila — ficam numa faixa
   estreita fixa. Assim o quadro inteiro cabe a partir de 1440. */
.funil-quadro { position: relative; }

.funil {
  display: flex;
  /* 12px, e não 14: com a lateral em 208px sobravam 1110px para 1114px de
     colunas, e o quadro cortava 4px da última — scrollbar e sombra de aviso
     por uma tira invisível. Dois pixels a menos entre as colunas fecham a
     conta em 1366px com folga, e ninguém enxerga a diferença. */
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: start;
}

/* Em tela menor ainda sobra quadro à direita. A sombra avisa que continua —
   é ela que impede o erro de achar que o funil termina onde a tela termina. */
.funil-quadro::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 8px;
  width: 48px;
  pointer-events: none;
  background: linear-gradient(to left, var(--fundo) 20%, transparent);
  opacity: 0;
  transition: opacity .15s;
}
.funil-quadro--corta::after { opacity: 1; }

.coluna {
  flex: 1 1 0;
  min-width: 186px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0 12px 14px;
  min-height: 220px;
  overflow: hidden;
}

/* Faixa colorida no topo: dá para achar a coluna certa pela cor, sem ler. */
.coluna::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 -12px 14px;
  background: var(--azul-suave);
}
.coluna[data-estagio="primeiro_contato"]::before { background: var(--azul-suave); }
.coluna[data-estagio="qualificado"]::before      { background: var(--azul-medio); }
.coluna[data-estagio="orcamento"]::before        { background: var(--dourado); }
.coluna[data-estagio="negociacao"]::before       { background: var(--azul); }
/* Verde e vermelho aqui têm significado — ganhou ou perdeu —, que é o único
   uso legítimo de cor de estado. */
.coluna[data-estagio="ganho"]::before            { background: var(--verde-tag-cor); }
.coluna[data-estagio="perdido"]::before          { background: var(--vermelho-tag-cor); }

/* As colunas de desfecho ficam recuadas e estreitas: são o resultado, não o
   trabalho. O cartão aqui responde só "quem fechou, quanto e quando" — o
   resto está na ficha do negócio, a um clique. */
.coluna--encerrada {
  flex: 0 0 150px;
  /* Sem isto o `min-width` das colunas de trabalho vence a base do flex e as
     duas de desfecho voltam a ocupar 186px — que é o que empurrava o quadro
     para fora da tela. */
  min-width: 150px;
  background: rgba(255, 255, 255, .35);
}
.coluna--encerrada .coluna__cabecalho h2 { color: var(--texto-suave); }
.coluna--encerrada .coluna__cabecalho h2 { font-size: 13px; }
.coluna--encerrada .coluna__total { font-size: 11.5px; line-height: 1.35; }
.coluna--encerrada .negocio { padding: 10px 11px; }
.coluna--encerrada .negocio__titulo { font-size: 13px; }
.coluna--encerrada .negocio__rodape {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
}
.coluna--encerrada .negocio__valor { font-size: 13px; }
/* Nesta largura o nome não cabe; a cor da bolinha continua dizendo de quem é. */
.coluna--encerrada .negocio__pessoa { display: block; margin-top: 5px; }
.coluna--encerrada .pessoa__nome { display: none; }

.coluna__cabecalho { margin-bottom: 12px; padding: 0 4px; }
.coluna__cabecalho h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--azul);
}

.coluna__contador {
  background: var(--azul);
  color: var(--branco);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
}
.coluna[data-estagio="orcamento"] .coluna__contador {
  background: var(--dourado);
  color: var(--azul-profundo);
}

.coluna__total { font-weight: 600; }

.coluna__total { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }

.coluna__itens {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  border-radius: var(--raio-m);
  transition: background .12s;
}
.coluna__itens--alvo { background: var(--azul-lavado); outline: 2px dashed var(--azul-medio); }

.coluna__vazia {
  color: var(--texto-fraco);
  font-size: 13.5px;
  text-align: center;
  padding: 22px 8px;
  margin: 0;
}

.negocio {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--azul-suave);
  border-radius: var(--raio-m);
  padding: 13px 14px;
  box-shadow: var(--sombra);
  cursor: grab;
  transition: box-shadow .12s, transform .12s;
}
.negocio:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.negocio:active { cursor: grabbing; }
.negocio--arrastando { opacity: .45; }

/* A faixa lateral repete a cor da coluna: mesmo fora do quadro — na ficha do
   cliente, num resultado de busca — dá para saber o estágio pela cor. */
.coluna[data-estagio="primeiro_contato"] .negocio { border-left-color: var(--azul-suave); }
.coluna[data-estagio="qualificado"] .negocio      { border-left-color: var(--azul-medio); }
.coluna[data-estagio="orcamento"] .negocio        { border-left-color: var(--dourado); }
.coluna[data-estagio="negociacao"] .negocio       { border-left-color: var(--azul); }
.coluna[data-estagio="ganho"] .negocio            { border-left-color: var(--verde-tag-cor); }
.coluna[data-estagio="perdido"] .negocio          { border-left-color: var(--vermelho-tag-cor); }

.coluna[data-estagio="ganho"] .coluna__contador {
  background: var(--verde-tag-cor); color: var(--branco);
}
.coluna[data-estagio="perdido"] .coluna__contador {
  background: var(--vermelho-tag-cor); color: var(--branco);
}

/* Atrasado sobrepõe o estágio: é a informação mais urgente do cartão. */
.negocio--atrasado { border-left-color: var(--vermelho-tag-cor) !important; }

.negocio__topo { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.negocio__topo:empty { display: none; }

.negocio__titulo {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--texto);
  line-height: 1.3;
}
.negocio__titulo:hover { color: var(--azul); text-decoration: none; }

.negocio__cliente {
  display: block;
  font-size: 13px;
  color: var(--texto-suave);
  margin-top: 2px;
}

.negocio__produtos {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--texto-suave);
}

.negocio__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--borda);
}
.negocio__valor { font-weight: 700; font-size: 14px; color: var(--azul); }
.negocio__valor--vazio { color: var(--texto-fraco); font-weight: 400; font-size: 13px; }
.negocio__pessoa { font-size: 12.5px; color: var(--texto-suave); }

.negocio__previsao { font-size: 12px; color: var(--texto-fraco); margin-top: 5px; }

.funil__ajuda {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--texto-suave);
  text-align: center;
}
.funil__ajuda--erro { color: var(--vermelho-tag-cor); font-weight: 600; }
.funil__ajuda--ok { color: var(--verde-tag-cor); font-weight: 600; }

/* ------------------------------- negócios na ficha do cliente */

.negocios { list-style: none; margin: 0; padding: 0; }

.negocio-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borda);
}
.negocio-linha:last-child { border-bottom: 0; padding-bottom: 0; }

.negocio-linha__corpo { min-width: 0; }
.negocio-linha__titulo { font-weight: 600; color: var(--texto); }
.negocio-linha__titulo:hover { color: var(--azul); text-decoration: none; }
.negocio-linha__detalhe { font-size: 13px; color: var(--texto-suave); margin-top: 1px; }

/* ==================================================== telas estreitas */

@media (max-width: 1080px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha__lateral { position: static; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; padding: 12px; }
  .lateral { position: static; height: auto; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav__titulo { display: none; }
  .topo__titulo { font-size: 23px; }
  .topo { flex-direction: column; gap: 12px; }
}

/* ============================================================= urgência */

/* Urgência não tem três cores, e isso é decisão de desenho, não economia.
   Três matizes numa lista fazem todas as linhas gritarem, e uma lista em que
   tudo grita não tem urgência nenhuma. A escala é de **peso**: urgente é
   etiqueta cheia, normal é contorno discreto, baixa não tem etiqueta. */

.urgencia {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}

.urgencia--urgente { background: var(--salsa); color: var(--branco); }

/* O ponto acompanha a cor: em impressão sem cor e em daltonismo, é ele e o
   texto que dizem "urgente", não o vermelho sozinho. */
.urgencia--urgente::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--branco);
}

.urgencia--normal {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  font-weight: 600;
}

/* Baixa não recebe etiqueta: a ausência de marca já é a informação. */
.urgencia--baixa { display: none; }

/* ========================================================== lead score */

/* Score é magnitude, então a escala é sequencial: quanto mais quente, mais
   forte a marca. As letras A–D carregam a mesma ordem sem depender de cor. */

.score { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.score__numero {
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.score__faixa {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--branco);
}

.score--a .score__faixa { background: var(--salsa); }
.score--b .score__faixa { background: var(--toffee); }
.score--c .score__faixa { background: var(--tangerina); color: var(--ardosia); }
.score--d .score__faixa { background: var(--azul-suave); }

.score--a .score__numero { color: var(--salsa); }
.score--b .score__numero { color: var(--toffee); }
.score--c .score__numero { color: var(--dourado-escuro); }
.score--d .score__numero { color: var(--texto-fraco); }

/* A conta aberta, na ficha. É ela que faz alguém confiar no número — ou
   discordar dele com argumento, que é igualmente útil. */
.decomposicao { list-style: none; margin: 0; padding: 0; }

.decomposicao__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.decomposicao__item:last-child { border-bottom: 0; padding-bottom: 0; }

.decomposicao__nome { font-weight: 600; font-size: 14px; }
.decomposicao__pontos {
  font-weight: 700;
  font-size: 14px;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.decomposicao__explicacao {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--texto-suave);
}
.decomposicao__barra {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: var(--azul-lavado);
  overflow: hidden;
  margin-top: 4px;
}
.decomposicao__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--oceano);
}

/* ============================================================ calendário */

.mes {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 20px 20px;
}

.mes__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.mes__navegacao { display: flex; align-items: center; gap: 10px; }

.mes__nome {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--azul);
  min-width: 190px;
  text-align: center;
}

.mes__seta {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--borda);
  color: var(--azul);
  font-size: 20px;
  line-height: 1;
}
.mes__seta:hover { background: var(--azul-lavado); text-decoration: none; }

.mes__grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  overflow: hidden;
}

.mes__cabecalho {
  background: var(--azul-lavado);
  padding: 8px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--texto-suave);
}

.dia {
  background: var(--branco);
  min-height: 96px;
  padding: 6px 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dia--fim-de-semana { background: #FAFBFD; }
.dia--fora { background: #F7F8FA; }
.dia--fora .dia__numero { color: var(--texto-fraco); }

.dia__numero {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 2px;
}

/* Hoje ganha o dourado, como o item ativo do menu: é o mesmo idioma. */
.dia--hoje { box-shadow: inset 0 3px 0 var(--dourado); }
.dia--hoje .dia__numero { color: var(--azul); }

.dia__alerta { width: 6px; height: 6px; border-radius: 50%; background: var(--salsa); }

/* A marca traz o nome do cliente, e não o título da tarefa: é pelo cliente
   que a equipe procura na agenda. */
.compromisso {
  display: block;
  font-size: 11.5px;
  line-height: 1.3;
  padding: 3px 6px;
  border-radius: 5px;
  border-left: 3px solid var(--oceano);
  background: var(--ceu-lavado);
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compromisso:hover { text-decoration: none; filter: brightness(.96); }

.compromisso--urgente {
  border-left-color: var(--salsa);
  background: var(--salsa-lavada);
  font-weight: 700;
}
.compromisso--fechamento {
  border-left-color: var(--tangerina);
  background: var(--tangerina-clara);
}
.compromisso--feita { opacity: .5; text-decoration: line-through; }

.dia__resto { font-size: 11px; color: var(--texto-fraco); padding-left: 6px; }

.mes__legenda { margin: 14px 0 0; font-size: 12.5px; }

.legenda__marca--urgente { background: var(--salsa); }
.legenda__marca--tarefa { background: var(--oceano); }
.legenda__marca--fechamento { background: var(--tangerina); }

/* -------------------------------------- faixa curta de dias, no painel */

.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.semana__dia {
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  padding: 8px 4px 10px;
  text-align: center;
  color: var(--texto);
  background: var(--branco);
}
.semana__dia:hover { border-color: var(--azul-medio); text-decoration: none; }
.semana__dia--hoje { border-color: var(--dourado); border-width: 2px; }
.semana__dia--fim-de-semana { background: #FAFBFD; }

.semana__rotulo {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--texto-fraco);
}
.semana__numero { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; }

.semana__pontos { display: flex; justify-content: center; gap: 3px; min-height: 6px; }
.semana__ponto { width: 5px; height: 5px; border-radius: 50%; background: var(--oceano); }
.semana__ponto--urgente { background: var(--salsa); }

@media (max-width: 900px) {
  .mes__grade { font-size: 11px; }
  .dia { min-height: 70px; }
}
.mes__acoes { display: flex; align-items: center; gap: 10px; }

/* Anexo do orçamento na ficha. Discreto: é apoio, não o assunto da linha. */
.anexo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 2px 9px 2px 6px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 12px;
  color: var(--azul-medio);
  max-width: 100%;
}
.anexo:hover { background: var(--azul-lavado); text-decoration: none; }
.anexo svg { width: 13px; height: 13px; flex-shrink: 0; }

/* =============================================================== metas */

.metas { list-style: none; margin: 0; padding: 0; }

.meta { padding: 14px 0; border-bottom: 1px solid var(--borda); }
.meta:last-child { border-bottom: 0; padding-bottom: 0; }

.meta__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.meta__quem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.meta__equipe {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--azul);
  color: var(--branco);
  font-size: 12px;
  font-weight: 700;
}

.meta__tipo { font-weight: 600; font-size: 14.5px; }
.meta__periodo { font-size: 12.5px; color: var(--texto-fraco); }

.meta__numeros { white-space: nowrap; }
.meta__numeros strong {
  font-size: 20px;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.meta__numeros span { font-size: 13px; color: var(--texto-suave); }

/* A barra carrega duas informações: o quanto foi feito, e a risca de onde o
   ritmo parelho estaria hoje. Sem a risca, "40 de 100" não distingue o dia 10
   do dia 28 — e é essa distinção que faz a meta servir no meio do período. */
.meta__barra {
  position: relative;
  height: 9px;
  margin: 9px 0 7px;
  border-radius: 999px;
  background: var(--azul-lavado);
  overflow: hidden;
}
.meta__feito {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--oceano);
}
.meta--batida .meta__feito { background: var(--floresta); }
.meta--atras .meta__feito { background: var(--tangerina); }

.meta__ritmo {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--ardosia);
  opacity: .55;
}

.meta__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.meta__aviso { font-size: 12.5px; font-weight: 600; }
.meta__aviso--ok { color: var(--floresta); }
.meta__aviso--atras { color: var(--dourado-escuro); }
.meta__aviso--fim { color: var(--texto-suave); font-weight: 400; }

.meta__remover button {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--fonte);
  font-size: 12px;
  color: var(--texto-fraco);
  cursor: pointer;
}
.meta__remover button:hover { color: var(--vermelho-tag-cor); }

/* Compromisso interno: existe na agenda, mas nunca disputa atenção com um
   retorno de cliente. Cinza, sem faixa colorida, e com etiqueta que o nomeia. */
.compromisso--interna {
  border-left-color: var(--azul-suave);
  background: #F3F5F8;
  color: var(--texto-suave);
}
.tarefa__cliente--interna { color: var(--texto-suave); font-weight: 600; }
.legenda__marca--interna { background: var(--azul-suave); }

/* ---------------------------------------------------------------------------
   Card Compras da ficha do cliente.

   Os meses vêm do ABC CLIENTES (por código, sempre certos) e ficam por cima
   das notas, que vêm da rentabilidade (por nome, nem sempre atribuíveis). A
   hierarquia visual segue essa confiança: o mês tem peso, a nota tem detalhe.
--------------------------------------------------------------------------- */
.meses {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meses__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--fundo);
}

.meses__rotulo {
  font-size: 12px;
  color: var(--texto-suave);
}

/* O Django devolve o mes em minuscula ("julho"). Capitalizar a palavra
   inteira transformaria "Julho de 2026" em "Julho De 2026". */
.meses__rotulo::first-letter { text-transform: uppercase; }

.meses__valor { font-size: 15px; color: var(--texto); }

.ver-mais { margin-top: 12px; }

.ver-mais > summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--azul);
  padding: 6px 0;
}

.ver-mais > summary:hover { text-decoration: underline; }

/* Aviso de nota que existe mas não pôde ser atribuída a esta filial. Fica
   discreto de propósito: informa sem parecer erro do sistema. */
.cartao__texto--aviso {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--dourado);
  background: var(--amarelo-tag-fundo);
  color: var(--amarelo-tag-cor);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
}

/* Escolha de empresa antes de importar a rentabilidade de aba única. As duas
   opções ficam lado a lado e do mesmo tamanho: nenhuma parece a "certa" por
   ser maior — quem decide é a evidência da tabela acima, não o desenho. */
.escolha-empresa {
  display: flex;
  gap: 12px;
  margin: 12px 0 16px;
}

.escolha-empresa__opcao {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  cursor: pointer;
  background: var(--branco);
}

.escolha-empresa__opcao:hover { border-color: var(--azul); }

.escolha-empresa__opcao:has(input:checked) {
  border-color: var(--azul);
  background: var(--azul-lavado);
}

/* Valor de conferência que fecha: presente sem competir com o número que vale. */
.tabela__discreto { color: var(--texto-fraco); font-size: 13px; }

/* ---------------------------------------------------------------------------
   Grupo de matriz e filiais no relatório de faturamento e na ficha.

   A hierarquia segue quem manda no número: o nome do grupo tem o peso da
   linha, o aviso de outra carteira é discreto porque informa sem competir, e
   a quebra por unidade fica fechada — só o gestor precisa dela, e só às vezes.
--------------------------------------------------------------------------- */
.tabela__nota {
  margin-top: 4px;
  font-size: 12px;
  color: var(--texto-suave);
}

.quebra { margin-top: 6px; }

.quebra > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--azul);
}

.quebra__lista {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--borda);
}

.quebra__lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}

.quebra__lista li strong { margin-left: auto; }

.quebra__cidade { color: var(--texto-fraco); font-size: 12px; }

/* Bloco "Outras unidades deste grupo" na ficha do cliente. */
.unidades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.unidade {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--fundo);
}

.unidade__nome { font-weight: 600; }

.unidade__local { color: var(--texto-suave); font-size: 13px; }

.unidade__matriz {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-fraco);
}

.unidade__carteira { margin-left: auto; }

/* Aviso de que o relatório está recortado por carteira. Discreto: informa o
   recorte sem parecer erro nem bloqueio. */
.recorte {
  margin: 0 0 16px;
  padding: 8px 12px;
  border-left: 3px solid var(--azul);
  background: var(--azul-lavado);
  color: var(--texto);
  font-size: 13px;
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
}

/* ---------------------------------------------------------------------------
   Listas de apoio — a tela que tirou segmento, origem, tabela de preço e
   motivo de encerramento de dentro do admin do Django.

   Cada linha é um formulário: renomear e alternar acontecem onde a pessoa
   está olhando, sem tela intermediária. Item fora da lista fica esmaecido em
   vez de sumir, porque continua respondendo pelo histórico.
--------------------------------------------------------------------------- */
.lista-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lista-form--incluir {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}

.lista-form__nome {
  min-width: 240px;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  font: inherit;
  font-size: 14px;
  color: var(--texto);
  background: var(--branco);
}

.lista-form__nome:focus {
  outline: none;
  border-color: var(--azul);
}

.tabela__acoes { white-space: nowrap; }

.lista-item--inativo .lista-form__nome { color: var(--texto-fraco); }

/* Bloco "Como estes números são contados", no rodapé do relatório de Carteira.
   Fechado por padrão: quem lê o relatório todo dia já sabe; quem desconfia de
   um número precisa achar a definição sem sair da tela. */
.definicoes { margin-top: 16px; }

.definicoes > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--azul);
  padding: 6px 0;
}

.definicoes__lista {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: var(--fundo);
  border-radius: var(--raio-p);
  font-size: 13px;
}

.definicoes__lista dt {
  font-weight: 600;
  color: var(--texto);
  margin-top: 10px;
}

.definicoes__lista dt:first-child { margin-top: 0; }

.definicoes__lista dd {
  margin: 2px 0 0;
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------------------
   Busca global (Ctrl+K).

   Aparece no alto e não no centro: a lista cresce para baixo e o olho não
   precisa reencontrar o campo a cada tecla. Largura fixa e generosa porque o
   que distingue quatro cadastros de mesmo nome é a cidade, que fica na
   segunda linha de cada item.
--------------------------------------------------------------------------- */
.busca {
  width: min(620px, 92vw);
  margin: 12vh auto auto;
  padding: 0;
  border: 0;
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  background: var(--branco);
  color: var(--texto);
  overflow: hidden;
}

.busca::backdrop { background: rgba(16, 40, 70, .38); }

.busca__campo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borda);
}

.busca__campo svg { width: 18px; height: 18px; color: var(--texto-fraco); flex: none; }

.busca__campo input {
  flex: 1;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 16px;
  color: var(--texto);
  background: transparent;
}

.busca__resultados { max-height: 52vh; overflow-y: auto; }

.busca__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--borda);
  text-decoration: none;
  color: var(--texto);
}

.busca__item:last-child { border-bottom: 0; }
.busca__item--ativo { background: var(--azul-lavado); }

.busca__nome { font-weight: 600; }

.busca__detalhe {
  grid-column: 1;
  font-size: 12.5px;
  color: var(--texto-suave);
}

.busca__situacao {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 12px;
  color: var(--texto-fraco);
  text-transform: lowercase;
}

.busca__vazio { margin: 0; padding: 18px 16px; color: var(--texto-suave); font-size: 14px; }

.busca__rodape {
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--borda);
  background: var(--fundo);
  font-size: 12px;
  color: var(--texto-fraco);
}

.busca kbd {
  font: inherit;
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--borda);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--branco);
  color: var(--texto-suave);
}

/* Gatilho da busca na barra lateral. Existe porque atalho invisível não é
   usado, e porque metade da equipe não usa atalho de teclado — clicar tem que
   levar ao mesmo lugar que o Ctrl+K. */
.gatilho-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 14px 0 4px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--fundo);
  color: var(--texto-suave);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
}

.gatilho-busca:hover { border-color: var(--azul); color: var(--texto); }

.gatilho-busca svg { width: 15px; height: 15px; flex: none; }
.gatilho-busca span { flex: 1; }

.gatilho-busca kbd {
  font: inherit;
  font-size: 10.5px;
  padding: 1px 5px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--branco);
  color: var(--texto-fraco);
}

/* Prioridade por valor na lista de quem parou de comprar. O valor fica junto
   da data da última compra em vez de ganhar coluna própria: a tabela já tem
   oito, e o número só faz sentido colado à data que ele qualifica. */
.tabela__secundario {
  display: block;
  font-size: 12px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.ranking__valor--dinheiro::before { content: "R$ "; font-size: 12px; opacity: .7; }

/* Quem já foi procurado nos últimos 30 dias desce para o fim e fica apagado:
   continua na lista porque continua parado, mas não disputa a atenção com
   quem ninguém chamou ainda. */
.ranking__item--contatado { opacity: .55; }

/* Seletor de ordem. Não reaproveita `.atalho--ativo`: aquela classe pinta a
   pílula inteira de navy e serve para os atalhos de filtro, que são blocos
   isolados. Aqui as opções são texto lado a lado, e herdar o fundo navy junto
   com a cor navy do texto deu um retângulo sólido sem nada legível dentro. */
.ordenacao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.ordenacao__rotulo { color: var(--texto-fraco); }

.ordenacao__opcao {
  color: var(--texto-suave);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 999px;
}

.ordenacao__opcao:hover {
  color: var(--azul);
  background: var(--fundo);
  text-decoration: none;
}

.ordenacao__opcao--ativa {
  color: var(--branco);
  background: var(--azul);
  font-weight: 600;
}

.ordenacao__opcao--ativa:hover { color: var(--branco); background: var(--azul); }