/* ============================================================== O DIÁRIO — item 186
 *
 * Lista de leitura, e nada mais: nao ha botao de editar nem de apagar aqui, e a ausencia e'
 * a funcionalidade. O desenho segue a mesma logica -- linhas quietas, sem alvo de clique,
 * para que ninguem procure uma acao que nao existe.
 *
 * A COLUNA DA DATA E FIXA e tabular. Diario com data de largura variavel obriga o olho a
 * reencontrar o comeco do texto a cada linha, que e' o oposto de varrer. */
.diario-caixa { padding: var(--recheio-cartao); }

.diario-linhas {
  display: flex;
  flex-direction: column;
  margin-top: var(--f3);
}

.diario-linha {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: var(--f3);
  align-items: start;
  padding: var(--f3) 0;
  border-top: 1px solid var(--line);
}

.diario-linha:first-child { border-top: 0; }

.diario-linha .diario-quando {
  font-size: var(--texto-pp);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.diario-linha .diario-texto {
  font-size: var(--texto-p);
  color: var(--ink);
  line-height: 1.5;
}

.diario-linha .diario-texto strong { font-weight: 700; }
.diario-linha .diario-texto em { font-style: normal; color: var(--muted); }

.diario-linha .diario-texto small {
  display: block;
  font-size: var(--texto-pp);
  color: var(--muted);
  margin-top: var(--f1);
}

/* ====================================================== FALAR COM A GENTE — item 187
 *
 * A peca fica no PE da lista quando ha resposta, e DESTACADA quando nao ha -- porque o
 * vazio da busca e' o momento exato em que a FAQ falhou com a pessoa, e e' ali que o canal
 * precisa competir com a vontade de fechar a aba. */
.falar-com-a-gente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--f4);
  margin-top: var(--f5);
  padding: var(--f4);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  background: var(--soft);
}

/* DESTACADO: o roxo da casa, e so' aqui. Usar o mesmo peso nos dois lugares faria o canal
 * no pe' da lista competir com a resposta que a pessoa veio ler. */
.falar-com-a-gente.destacado {
  border-color: var(--roxo);
  background: var(--roxo-soft);
}

.falar-com-a-gente .falar-quem {
  display: flex;
  flex-direction: column;
  gap: var(--f1);
  min-width: 240px;
  flex: 1;
}

.falar-com-a-gente .falar-quem strong {
  font-size: var(--texto-g);
  color: var(--ink);
}

.falar-com-a-gente .falar-quem span {
  font-size: var(--texto-p);
  color: var(--muted);
}

.falar-com-a-gente .falar-canais {
  display: flex;
  gap: var(--f2);
  flex: none;
}

/* O CANAL E UM LINK, e nao um botao: ele SAI do app. Herdar o desenho de botao mantem a
 * aparencia; `text-decoration: none` e o alinhamento e' o que o `<a>` nao traz sozinho. */
.falar-com-a-gente .falar-canais .btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* O PE DO NUMERO — item 150.
 *
 * A ressalva que muda o significado do numero de cima ("sendo R$ 380 previstos"), sem virar
 * um quinto quadro competindo pela mesma atencao. Miudo de proposito: quem varre a tela le'
 * o total; quem for decidir gasto le' a ressalva. */
.numerao .pe-do-numero {
  display: block;
  margin-top: var(--f1);
  font-size: var(--texto-pp);
  color: var(--muted);
  line-height: 1.35;
}

/* O QUE CADA PAPEL FAZ, na linha do sócio — item 183.
 *
 * A frase fica DEBAIXO do nome, miuda: quem escolhe o papel precisa saber o que ele permite,
 * e um seletor que so' diz "aprovador" obriga a decorar a tabela de poderes. */
.linha .dir-do-socio {
  display: block;
  font-size: var(--texto-pp);
  color: var(--muted);
  margin-top: var(--f1);
}


/* ============================================ A TARJA DO AMBIENTE — 23/08/2026
 *
 * **Pedido dele:** "a gente precisa de uma diferença, ou em cima uma tarja, alguma coisa
 * que a gente não confunda" — depois de tentar entrar na produção achando que era o teste.
 *
 * POR QUE UMA TARJA, E NAO TROCAR A COR DO APP.
 *
 * Ele sugeriu pintar o menu de verde ou vermelho no teste, e o motivo de nao fazer isso e'
 * forte: **e' no teste que ele homologa as cores.** Um teste verde o faria aprovar um
 * produto que nao e' o que vai ao ar. A tarja avisa sem contaminar o que esta sendo
 * aprovado — ela nao faz parte do desenho, e por isso pode gritar.
 *
 * ELA SO EXISTE FORA DA PRODUCAO. Em producao o elemento nem e' criado. */
/* O SELETOR E DE DUAS CLASSES, e o fiscal me cobrou isso. Uma classe generica declarando
 * `font-size` vence o tamanho de qualquer peca que a use por dentro — a armadilha que ja
 * custou quatro rodadas de "nao esta atualizando" nesta casa. */
body > .tarja-do-ambiente {
  position: sticky;
  top: 0;
  z-index: 60;                       /* acima da barra azul, que e' sticky em z-index menor */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--f2);
  height: 26px;
  background: repeating-linear-gradient(
    -45deg, #8a540d, #8a540d 10px, #7a4a0b 10px, #7a4a0b 20px);
  color: #fff;
  font-size: var(--texto-selo);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* A LISTRA DIAGONAL e' o sinal universal de "area de obra", e funciona antes de a pessoa
   * ler qualquer palavra — que e' exatamente o que se quer de um aviso de ambiente. */
}

body > .tarja-do-ambiente b { font-weight: 800; }
body > .tarja-do-ambiente small {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: .85;
}

/* A TARJA DA VISITA DE SUPORTE — item 245, 23/08/2026.
 *
 * **É o MESMO componente da tarja de ambiente**, e não uma peça nova: mesma altura, mesma
 * posição, mesma listra diagonal. Componente igual é a regra da casa desde 20/08, e a razão
 * aparece aqui inteira — duas tarjas com desenhos diferentes no mesmo lugar da tela fariam o
 * olho parar para conferir se são a mesma coisa.
 *
 * O que muda é a COR e o botão. Vermelho porque este aviso não é "cuidado, é teste": é
 * "você está dentro da casa de outra pessoa".
 */
body > .tarja-da-visita {
  position: sticky;
  top: 0;
  z-index: 61;                       /* acima da tarja de ambiente: as duas podem coexistir */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--f3);
  min-height: 26px;
  padding: var(--f1) var(--f3);
  background: repeating-linear-gradient(
    -45deg, #b44752, #b44752 10px, #9d3d47 10px, #9d3d47 20px);
  color: #fff;
  font-size: var(--texto-selo);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body > .tarja-da-visita b { font-weight: 800; }
body > .tarja-da-visita small {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: .9;
}

/* O BOTÃO DE SAIR VIVE NA TARJA, e não numa tela que é preciso achar: a saída tem de estar
 * onde o aviso está. Tarja que avisa e não oferece a saída obriga a procurar. */
body > .tarja-da-visita button {
  height: var(--alto-mini);
  padding: 0 var(--f3);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--raio-botao);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: var(--texto-selo);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  flex: none;
}
body > .tarja-da-visita button:hover:not(:disabled) {
  background: rgba(255, 255, 255, .26);
}

/* O RECADO DE "sem ferramenta liberada" — 23/08/2026.
 *
 * Espaco vazio sob um titulo faz a pessoa procurar o que nao existe. Com nenhuma ferramenta
 * liberada, a lista de cima DIZ o que esta acontecendo em vez de ficar em branco. */
.menu .menu-sem-ferramenta {
  margin: var(--f2) var(--f3) var(--f4);
  font-size: var(--texto-pp);
  line-height: 1.5;
  color: var(--no-menu-fraco);
}

html[data-menu="recolhido"] .menu .menu-sem-ferramenta { display: none; }

/* ------------------------------------------------------------------ A Agenda (item 200) */
.seletor-da-agenda { display: inline-flex; align-items: center; gap: 8px; font-size: var(--texto-pp); color: var(--muted); margin-right: 8px; }
.nav-da-semana { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.nav-da-semana strong { font-size: var(--texto-m); margin-left: 4px; }
.link-publico { font-size: var(--texto-pp); color: var(--roxo); font-weight: 600; margin-left: auto; }
.semana-da-agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dia-da-semana { background: var(--soft); border: 1px solid var(--line); border-radius: var(--raio); min-height: 140px; padding: 8px; }
.dia-da-semana header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; color: var(--muted); font-size: var(--texto-selo); }
.dia-da-semana header b { color: var(--ink); font-size: var(--texto-pp); }
.bloco-da-reuniao { display: grid; gap: 2px; width: 100%; text-align: left; border: 0; border-radius: 8px; padding: 7px 8px; margin-bottom: 6px; background: var(--roxo-soft); color: var(--ink); cursor: default; }
.bloco-da-reuniao b { font-size: var(--texto-selo); color: var(--roxo); }
.bloco-da-reuniao span { font-size: var(--texto-selo); font-weight: 600; }
.bloco-da-reuniao small { font-size: var(--texto-selo); color: var(--muted); }
.bloco-da-reuniao.tipo-tarefa { background: #eef2ff; }
.bloco-da-reuniao.tipo-ligacao { background: #e7f6f2; }
.vazio-do-dia { margin: 0; color: var(--muted); font-size: var(--texto-selo); text-align: center; padding-top: 18px; }
.acoes-do-vazio { display: flex; justify-content: center; margin-top: 12px; }
@media (max-width: 900px) {
  .semana-da-agenda { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- Negócios · quadro (item 180) */
.seletor-do-funil { display: inline-flex; align-items: center; gap: 8px; font-size: var(--texto-pp); color: var(--muted); margin-right: 8px; }
.vistas-do-negocio { display: inline-flex; gap: 6px; margin-left: 8px; }
.quadro-de-negocios { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.coluna-do-funil { background: var(--soft); border: 1px solid var(--line); border-radius: var(--raio); min-height: 280px; display: flex; flex-direction: column; }
.coluna-do-funil header { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: var(--texto-pp); }
.coluna-do-funil header b { color: var(--ink); }
.coluna-do-funil header span { color: var(--muted); font-weight: 600; }
.pilha-de-cartoes { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.pilha-de-cartoes.soltar-aqui { outline: 2px dashed var(--roxo); background: var(--roxo-soft); }
.cartao-do-negocio { display: grid; gap: 4px; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface); cursor: grab; color: var(--ink); }
.cartao-do-negocio:active { cursor: grabbing; }
.cartao-do-negocio.arrastando { opacity: .5; }
.cartao-do-negocio b { font-size: var(--texto-p); }
.cartao-do-negocio .valor { font-size: var(--texto-pp); font-weight: 700; color: var(--roxo); }
.cartao-do-negocio small { font-size: var(--texto-selo); color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vazio-da-coluna { margin: 0; text-align: center; color: var(--muted); font-size: var(--texto-selo); padding-top: 24px; }

/* -------------------------------------------------------------- Grupos · porta e fila (item 182) */
.gaveta-larga { width: min(640px, 100%); }
.grupo-da-porta {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
}
.grupo-da-porta strong { font-size: var(--texto-p); }
.grupo-da-porta > span { font-size: var(--texto-pp); color: var(--muted); grid-column: 1 / -1; }
.barra-da-porta {
  grid-column: 1 / -1; height: 6px; background: #eef1f5; border-radius: 99px; overflow: hidden;
}
.barra-da-porta i { display: block; height: 100%; background: var(--roxo); }
.sub-da-fila { color: var(--muted); font-size: var(--texto-p); margin: 0 0 16px; }
.acoes-da-fila { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tabela-da-fila {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.cab-da-fila, .linha-da-fila {
  display: grid; grid-template-columns: 1.4fr 1.2fr 140px 90px; padding: 11px 16px; gap: 8px;
  align-items: center;
}
.cab-da-fila {
  background: var(--soft); font-size: var(--texto-selo); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.linha-da-fila { border-top: 1px solid var(--line); font-size: var(--texto-p); }
.nota-da-fila { margin-top: 14px; font-size: var(--texto-pp); color: var(--muted); }
/* =============================================================== O TEMA ESCURO — item 190
 *
 * Decisão dele em 20/08/2026: a preferência claro·escuro mora no Meu perfil, e **o padrão
 * ganha a paleta irmã no escuro — réguas no :root, nunca cor à mão.** Este bloco redefine
 * SÓ tokens: nenhuma peça é reescrita, porque nenhuma peça conhece hexadecimal.
 *
 * O VIDRO É OUTRA RECEITA no escuro, e isso não é gosto: translucidez clara sobre fundo
 * escuro vira névoa cinza. O vidro escuro é mais opaco (o desfoque custa mais para ler no
 * escuro) e o "brilho" da borda de cima cai de quase-branco para um fio discreto.
 *
 * `data-tema` no <html>: "escuro" aplica isto; "claro" ou ausência fica no :root de cima; a
 * escolha "sistema" NÃO chega ao CSS — o boot resolve prefers-color-scheme e escreve claro
 * ou escuro aqui, para existir UMA fonte de decisão (a do JS, que também sabe a preferência
 * gravada no Perfil).
 */
:root[data-tema="escuro"] {
  --rolagem-barra: rgba(255, 255, 255, .2);
  --rolagem-verde: rgba(77, 215, 190, .55);
  --canvas: #12141f;
  --surface: #1b1e2e;
  --soft: #202334;

  --menu: #0e101c;
  --menu-hover: #1e2138;
  --no-menu: #cdd2e4;
  --no-menu-fraco: #8a90a8;

  --ink: #e6e9f4;
  --muted: #9aa1b8;
  --line: #2c3047;
  --line-forte: #3a3f5c;

  --roxo: #8d78ff;
  --roxo-hover: #a190ff;
  --roxo-soft: #262147;
  --agua: #4dd7be;

  --ok: #6fd3bd;         --ok-soft: #14322b;
  --aviso: #e8b06a;      --aviso-soft: #3a2c14;
  --ruim: #ff9b93;       --ruim-soft: #3d2226;

  /* as cores de canal da caixa unica, recalibradas para o escuro */
  --canal-whatsapp: #6fd3a0;   --canal-whatsapp-soft: #143224;
  --canal-direct: #f191c8;     --canal-direct-soft: #3a1c2e;
  --canal-messenger: #8db8f0;  --canal-messenger-soft: #1a2a42;

  /* o fundo do aviso: sobe um degrau para destacar do canvas escuro, sem perder o branco */
  --aviso-certo: #17836c;
  --aviso-erro: #c4525e;

  /* o vidro Glass, recalibrado */
  --gg-borda: rgba(230, 233, 244, .10);
  --gg-brilho: rgba(230, 233, 244, .16);
  --gg-sulco: inset 0 1px 2px rgba(0, 0, 0, .35);
  --gg-vidro-fundo: rgba(27, 30, 46, .78);
}

/* O RELATÓRIO DO DISPARO 1 A 1 (item 35): o número grande e, ao lado, o que ele conta. */
.numero-do-relatorio { display: flex; align-items: baseline; gap: var(--f2);
  padding: var(--f1) 0; border-bottom: 1px solid var(--line); }
.numero-do-relatorio b { min-width: 48px; font-size: var(--texto-contador); font-weight: 800; }
.numero-do-relatorio span { font-size: var(--texto-pp); color: var(--muted); }
.numero-do-relatorio strong { color: var(--ink); font-size: var(--texto-p); }

/* QUEM PEDIU PARA SAIR (item 36): a resposta automática, a busca e a contagem ao lado. */
.gg-peca .resposta-a-quem-sai { display: flex; align-items: flex-start; gap: var(--f2);
  margin: 0 0 var(--f2); font-size: var(--texto-p); }
.gg-peca .resposta-a-quem-sai small { display: block; color: var(--muted); font-size: var(--texto-pp); }
.barra-de-quem-saiu { display: flex; align-items: center; gap: var(--f2); flex-wrap: wrap;
  margin: 0 0 var(--f2); }
.barra-de-quem-saiu .pilula-de-busca { display: flex; align-items: center; gap: var(--f1);
  flex: 1 1 240px; max-width: 360px; padding: 0 10px; border: 1px solid var(--line-forte);
  border-radius: 9px; background: var(--surface); }
.barra-de-quem-saiu .pilula-de-busca span { color: var(--muted); }
.barra-de-quem-saiu .pilula-de-busca input { border: 0; outline: 0; background: transparent;
  padding: 0; box-shadow: none; }
.barra-de-quem-saiu .pilula-de-busca:focus-within { border-color: var(--muted); }
.barra-de-quem-saiu .mudo { font-size: var(--texto-pp); }

/* O CAMPO DE TAG (Nuvem 13, 23/10/2026) — `campo-de-tag.js`. A lista abre presa ao campo, por
 * cima da gaveta e das janelas; cada tag no selo da cor dela, com a palavra. */
.campo-de-tag-lista, .campo-de-contato-lista {
  position: fixed; z-index: 300; margin: 0; padding: var(--f1); list-style: none;
  max-height: 280px; overflow-y: auto; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-forte); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(15, 30, 26, .16);
}
.campo-de-tag-lista li, .campo-de-contato-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--f2);
  min-height: 34px; padding: var(--f1) var(--f2); border-radius: 7px; cursor: pointer;
  font-size: var(--texto-p);
}
.campo-de-tag-lista li small, .campo-de-contato-lista li small { color: var(--muted); font-size: var(--texto-pp); white-space: nowrap; }
.campo-de-tag-lista li.ativa,
.campo-de-contato-lista li.ativa,
.campo-de-tag-lista li:hover, .campo-de-contato-lista li:hover { background: var(--roxo-soft); }
.campo-de-tag-lista li.criar, .campo-de-contato-lista li.criar { color: var(--roxo); font-weight: 700; }
.campo-de-tag-lista li.vazio, .campo-de-contato-lista li.vazio { cursor: default; background: transparent; }

/* AS SEIS CORES DA TAG — as mesmas das etapas dos Negócios. O selo escreve a tag; a cor é o
 * fundo claro e a tinta escura do mesmo tom. */
:root {
  --tag-cinza: #eef1f0;    --tag-cinza-tinta: #4f5c58;
  --tag-azul: #e8f0fa;     --tag-azul-tinta: #2f5f95;
  --tag-ambar: #fbf0dc;    --tag-ambar-tinta: #8a5a12;
  --tag-violeta: #efebf9;  --tag-violeta-tinta: #5b4796;
  --tag-verde: #e2f5eb;    --tag-verde-tinta: #167352;
  --tag-vermelho: #fbe9e7; --tag-vermelho-tinta: #a8423d;
}
:root[data-tema="escuro"] {
  --tag-cinza: #2a312f;    --tag-cinza-tinta: #c3ccc9;
  --tag-azul: #1e2a3a;     --tag-azul-tinta: #9cc0ec;
  --tag-ambar: #3a2f1a;    --tag-ambar-tinta: #ecc27c;
  --tag-violeta: #2c2740;  --tag-violeta-tinta: #c2b4f0;
  --tag-verde: #1a3228;    --tag-verde-tinta: #86dcb6;
  --tag-vermelho: #3a2422; --tag-vermelho-tinta: #f2a39d;
}
em.selo-de-tag {
  display: inline-flex; align-items: center; max-width: 100%; padding: 2px 10px;
  border-radius: 999px; font-style: normal; font-weight: 700; font-size: var(--texto-pp);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.selo-de-tag-cinza { background: var(--tag-cinza); color: var(--tag-cinza-tinta); }
.selo-de-tag-azul { background: var(--tag-azul); color: var(--tag-azul-tinta); }
.selo-de-tag-ambar { background: var(--tag-ambar); color: var(--tag-ambar-tinta); }
.selo-de-tag-violeta { background: var(--tag-violeta); color: var(--tag-violeta-tinta); }
.selo-de-tag-verde { background: var(--tag-verde); color: var(--tag-verde-tinta); }
.selo-de-tag-vermelho { background: var(--tag-vermelho); color: var(--tag-vermelho-tinta); }
/* A BOLINHA DA COLUNA COR é a tinta: sozinha ela não diz nada — a palavra vem ao lado. */
.tg-bolinha.selo-de-tag-cinza { background: var(--tag-cinza-tinta); }
.tg-bolinha.selo-de-tag-azul { background: var(--tag-azul-tinta); }
.tg-bolinha.selo-de-tag-ambar { background: var(--tag-ambar-tinta); }
.tg-bolinha.selo-de-tag-violeta { background: var(--tag-violeta-tinta); }
.tg-bolinha.selo-de-tag-verde { background: var(--tag-verde-tinta); }
.tg-bolinha.selo-de-tag-vermelho { background: var(--tag-vermelho-tinta); }