/* ============================================================
   CRM Easy Smile — painel
   Tokens e componentes do Design System Easy Smile.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/WorkSans-Variable.woff2') format('woff2');
}

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Work Sans', system-ui, sans-serif;

  --espresso: #0A0E17;   /* grafite — o mesmo da pv-grafite */
  --charcoal: #10151F;
  --charcoal-2: #161D2A;
  --charcoal-3: #212A3A;

  --a: #C9A24B;          /* ouro — acento protagonista */
  --aw: #E8CE8E;         /* ouro claro */
  --feriado: #D98C8C;    /* o tijolo dos feriados — nunca compete com o ouro,
                            que é da abertura e do fechamento do carrinho */

  /* AS CORES DOS COMPROMISSOS (13/ago/2026, escolhidas por ele)
     ─────────────────────────────────────────────────────────────
     viagem = azul · pessoal = verde · importante = roxo · financeiro = amarelo

     ⚠️ CADA UMA TEM DUAS: um FUNDO claro e uma LETRA escura. Ele foi específico:
     "em cada item do compromisso uma cor clara predefinida (…) e todas essas
     cores têm que ser mais claras no tom claro, para aparecer a letra escura".
     Uma cor só, usada como texto, some no fundo de papel; como fundo, exige
     letra escura por cima. Por isso o par.

     Nenhuma delas é dourada: o ouro é do carrinho abrindo e fechando, e essa
     leitura não pode ser disputada por uma viagem.

     Estes valores são os do TEMA ESCURO (fundo fundo, letra clara). O tema
     claro os inverte, mais abaixo. */
  --ag-viagem-fundo:     #1E3A4D;  --ag-viagem-letra:     #A8D4EC;
  --ag-pessoal-fundo:    #2A3D1C;  --ag-pessoal-letra:    #C3E0A4;
  --ag-importante-fundo: #33244A;  --ag-importante-letra: #D3BCEE;
  --ag-financeiro-fundo: #453810;  --ag-financeiro-letra: #EBD48C;
  --fg1: #F4F0E7;        /* marfim */
  --fg2: #9C978D;        /* névoa */

  --border: rgba(201, 162, 75, 0.28);
  --border-soft: rgba(201, 162, 75, 0.14);

  --gradient-gold: linear-gradient(176deg, #F6E7B6 2%, #E8CE8E 24%, #C9A24B 52%, #9A7733 74%, #E6C97F 100%);
  --gradient-espresso: radial-gradient(120% 90% at 30% 0%, #16233B, transparent 60%), var(--espresso);

  /* Dourado da tarefa DE HOJE na lista de etapas (10/ago/2026). Ele pediu
     UMA cor só: "eu seleciono as cinco e muda a cor; quando eu clicar em
     check, essa cor some". Uma cor basta — mais de uma vira código a decorar. */
  --destaque-etapa: rgba(201, 162, 75, 0.16);
  --lead: #9C978D;
  --quente: #E0913D;
  --aluno: #2FB574;
  --aluno-soft: #7FE0AE;
  --reembolsado: #C86B6B;
}

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

html { -webkit-font-smoothing: antialiased; }

/* ============================================================
   QUEM ROLA É O CONTEÚDO, NÃO A JANELA — 27/ago/2026.

   Até aqui a janela inteira rolava: a lateral subia junto (ele viu, e foi a
   pista que resolveu), o topo se segurava por truque e as telas dentro das
   molduras não tinham como grudar nada, porque dentro delas não havia
   rolagem nenhuma. Agora a casca ocupa a tela e só a área de conteúdo rola.
   ============================================================ */
html, body { height: 100%; overflow: hidden; }

body {
  min-height: 100vh;
  background: radial-gradient(130% 90% at 78% -10%, rgba(201, 162, 75, 0.10), transparent 55%), var(--gradient-espresso);
  color: var(--fg1);
  font-family: var(--font-sans);
  line-height: 1.6;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(201, 162, 75, 0.22); border-radius: 100px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes esFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes esSlide { from { transform: translateX(24px); } to { transform: none; } }

.es-view { animation: esFade .35s ease; }

/* ---------- Tipografia ---------- */

.eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg2);
}

h1.titulo {
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 600;
  letter-spacing: .005em;
  margin-top: 2px;
  line-height: 1.2;
}

.numero { font-family: var(--font-display); font-weight: 600; line-height: 1; }

/* ---------- Formulários ---------- */

input, textarea, select, button { font-family: inherit; font-size: 13.5px; color: var(--fg1); }

input, textarea, select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid var(--border);
  /* O campo é a camada MAIS PRÓXIMA do olho — por isso é a mais clara.
     Até 09/ago/2026 era o contrário: preto a 25%, mais escuro que a página
     e que o cartão. O Fábio trabalhou uma tarde no checklist e disse que
     cansava a vista; a causa era essa. Texto marfim sobre preto quase puro
     vibra na retina depois de alguns minutos. */
  background: var(--charcoal-3);
  transition: border-color .15s;
}
textarea { line-height: 1.6; resize: vertical; }
select { cursor: pointer; }
input[type=date] { color-scheme: dark; }
input::placeholder, textarea::placeholder { color: #6f6a61; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--a); }
input[readonly] { color: var(--aw); font-family: ui-monospace, monospace; font-size: 13px; }

label.campo {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg2);
  margin-bottom: 8px;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .02em;
  transition: filter .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn.ouro { background: var(--gradient-gold); color: #1A140A; }
.btn.ouro:hover { filter: brightness(1.06); }
.btn.fantasma { background: transparent; border: 1px solid var(--border); color: var(--fg1); font-weight: 400; }
.btn.fantasma:hover { border-color: var(--a); }
.btn.verde { background: rgba(47,181,116,.15); color: var(--aluno-soft); border: 1px solid rgba(47,181,116,.4); }
.btn.vermelho { background: rgba(200,107,107,.15); color: #E39B9B; border: 1px solid rgba(200,107,107,.45); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }

/* ---------- Abas ---------- */

.abas {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--charcoal);            /* era preto a 28% — ver os campos */
  border: 1px solid var(--border-soft);
  width: fit-content;
}
.abas button {
  padding: 8px 15px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--fg2);
  cursor: pointer;
  font-size: 13px;
}
.abas button.on { background: rgba(201, 162, 75, 0.15); color: var(--fg1); font-weight: 600; }
.abas button .n { opacity: .6; margin-left: 6px; }

/* ---------- Cartões ---------- */

.cartao {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.02);
}
.cartao.brilho { background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); }
.cartao.ouro { background: linear-gradient(160deg, rgba(201,162,75,.08), rgba(201,162,75,.02)); }
.cartao .rotulo { font-size: 12px; color: var(--fg2); letter-spacing: .04em; }
.cartao h2 { font-weight: 600; font-size: 15px; }

.clicavel { cursor: pointer; transition: transform .18s, border-color .18s; }
.clicavel:hover { transform: translateY(-2px); border-color: rgba(201, 162, 75, 0.5); }

/* ---------- Pílulas e etiquetas ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
}

/* ---------- Layout ---------- */

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

aside.lateral {
  width: 256px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* ⚠️ A sobra de baixo (27/ago/2026): o conteúdo enchia a altura inteira e o
     nome dele encostava na borda da tela. Com rolagem própria, a lateral
     respeita o próprio rodapé mesmo em tela baixa. */
  overflow-y: auto;
  padding: 26px 18px 22px;
  border-right: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(26, 35, 52, 0.94), rgba(15, 21, 33, 0.94));
  backdrop-filter: blur(8px);
}
.marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 26px; }
.marca .logo {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--gradient-gold); color: #1A140A;
  font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1;
}
.marca .nome { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.15; }

nav { display: flex; flex-direction: column; gap: 4px; }
nav button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 11px 13px; border-radius: 11px; border: none;
  background: transparent; color: var(--fg2);
  cursor: pointer; transition: background .15s, color .15s;
}
nav button:hover { background: rgba(255, 255, 255, 0.04); color: var(--fg1); }
nav button.on {
  background: linear-gradient(100deg, rgba(201,162,75,.15), rgba(201,162,75,.05));
  color: var(--fg1); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--a);
}
/* O ícone agora é sempre um desenho de 16px: alinhado no centro da caixa de
   20px, e a mesma altura em todos — é isso que faz a coluna ficar reta. */
nav button .icone { width: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; opacity: .9; }
nav button .icone svg, nav button .icone img { display: block; }
nav button .badge {
  margin-left: auto; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 100px;
  background: rgba(201, 162, 75, 0.16); color: var(--aw);
}

.status-webhook {
  margin-top: auto; padding: 16px; border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(160deg, rgba(201,162,75,.09), rgba(201,162,75,.02));
}
.ponto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ponto.verde { background: var(--aluno); box-shadow: 0 0 8px var(--aluno); }
.ponto.cinza { background: var(--fg2); }

.usuario {
  display: flex; align-items: center; gap: 10px;
  /* respiro embaixo: com o cartão do webhook fora, o nome dele ficou colado
     na borda da tela (27/ago/2026) */
  padding: 14px 8px 4px; margin: 14px 0 6px;
  border-top: 1px solid var(--border-soft);
  flex: 0 0 auto;
}

main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

header.topo {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 34px;
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 20;
  background: rgba(24, 32, 48, 0.88);
  backdrop-filter: blur(12px);
}
.busca { position: relative; display: flex; align-items: center; }
.busca span { position: absolute; left: 14px; color: var(--fg2); font-size: 14px; }
.busca input { width: 230px; padding-left: 36px; }

/* overflow-y: auto AQUI QUEBRAVA O position:sticky (11/ago/2026).
   Quem rola de verdade é a janela — o .conteudo nunca chegou a rolar sozinho.
   Mas basta a regra existir para o navegador tratar este elemento como o
   "dono" da rolagem, e o calendário da lateral ficava preso a ele: subia
   junto com a página em vez de acompanhar. Medido: topo ia de 610px para
   -90px ao rolar. Com visible, ele para nos 18px e fica. */
.conteudo { flex: 1; min-height: 0; overflow-y: auto; padding: 30px 34px 60px; }

.grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Tabela ---------- */

.tabela {
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
}
.tabela .cabecalho, .tabela .item {
  display: grid;
  grid-template-columns: 2.2fr 1.3fr 1.3fr 1fr .8fr;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
}
.tabela .cabecalho {
  padding: 14px 22px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg2);
}
.tabela .item { padding: 15px 22px; cursor: pointer; transition: background .15s; }
.tabela .item:hover { background: rgba(255, 255, 255, 0.028); }
.tabela .item:last-child { border-bottom: none; }
.vazio { padding: 48px; text-align: center; color: var(--fg2); font-size: 14px; }

.corta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Kanban ---------- */

.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.coluna { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 12px; }
.coluna .titulo-col { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 13px; font-weight: 600; }
.coluna .cartoes {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 60px; padding: 10px; border-radius: 14px;
  background: var(--charcoal); border: 1px solid var(--border-soft);
}
.kcard {
  padding: 14px; border-radius: 12px;
  background: var(--charcoal); border: 1px solid var(--border-soft);
  cursor: pointer; transition: transform .18s, border-color .18s;
}
.kcard:hover { transform: translateY(-2px); border-color: rgba(201, 162, 75, 0.5); }

/* ---------- Gráfico ---------- */

.barras { display: flex; align-items: flex-end; gap: 12px; height: 150px; }
.barras .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.barras .barra { width: 100%; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--aw), var(--a)); min-height: 6px; }
.barras .dia { font-size: 10.5px; color: var(--fg2); }

.progresso { height: 7px; border-radius: 100px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.progresso > div { height: 100%; border-radius: 100px; }

/* ---------- Gaveta de detalhe ---------- */

.sombra {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(5, 3, 1, 0.55);
  backdrop-filter: blur(2px);
}
.gaveta {
  position: fixed; top: 0; right: 0; height: 100vh; width: 400px; max-width: 100vw;
  z-index: 50; overflow-y: auto; padding: 28px;
  background: var(--charcoal);
  border-left: 1px solid var(--border);
  animation: esSlide .3s ease both;
  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.4);
}
.dados {
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 13px; border: 1px solid var(--border-soft); overflow: hidden;
}
.dados > div {
  display: flex; gap: 12px; padding: 13px 16px;
  background: rgba(255, 255, 255, 0.02); font-size: 13.5px;
}
.dados .k { width: 84px; flex-shrink: 0; color: var(--fg2); font-size: 12px; }
.secao { margin-top: 24px; }
.secao > .rotulo {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg2); margin-bottom: 12px;
}
.caixa-acao {
  margin-top: 22px; padding: 18px; border-radius: 13px;
  border: 1px dashed var(--border); background: rgba(47, 181, 116, 0.05);
}
.caixa-acao.perigo { border-color: rgba(200, 107, 107, 0.4); background: rgba(200, 107, 107, 0.06); }
.caixa-acao h3 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.caixa-acao p { font-size: 12px; color: var(--fg2); line-height: 1.5; margin-bottom: 14px; }

.fechar { background: transparent; border: none; color: var(--fg2); font-size: 22px; cursor: pointer; line-height: 1; padding: 2px 6px; }

/* ---------- Modal ---------- */

.modal {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(5, 3, 1, 0.62); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal .caixa {
  width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto;
  border-radius: 18px; border: 1px solid var(--border);
  background: var(--charcoal); padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.modal h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; }

/* ---------- Aviso flutuante ---------- */

#aviso {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 60; padding: 14px 24px; border-radius: 100px;
  background: var(--charcoal-3); border: 1px solid var(--border);
  font-size: 13.5px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: esFade .25s ease both; max-width: 90vw; text-align: center;
}
#aviso.erro { border-color: rgba(200, 107, 107, .6); color: #E39B9B; }

/* ---------- Tela de login ---------- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login form {
  width: 100%; max-width: 380px;
  background: var(--charcoal); border: 1px solid var(--border);
  border-radius: 18px; padding: 32px;
}
.login .marca { justify-content: center; padding-bottom: 20px; }

/* ---------- Telas menores ---------- */

/* ---------- O CHECKLIST COM O CALENDÁRIO AO LADO (11/ago/2026) ----------
   Ele pediu para aproveitar a lateral direita, que estava vazia: "colocar
   esse calendário com bom tamanho que eu possa visualizar com facilidade".
   O `sticky` faz ele acompanhar a rolagem — "conforme abaixa a tela ele
   acompanha, porque eu sempre preciso olhar para um calendário". */
/* 380px em vez de 320: ele achou pequeno demais para o uso real, e a tela
   do computador tem espaço de sobra. Abaixo de 1200px de janela o calendário
   encolhe antes de sumir, para não espremer a lista de etapas. */
/* As abas grudam ABAIXO do topo do CRM, não atrás dele — o header tem 99px
   de altura e z-index 20; com top:0 as abas sumiam por trás (visto no
   laboratório em 11/ago). Daí os 99px.
   O -30px de margem cobre o padding do .conteudo, para não sobrar faixa
   transparente por baixo da barra. */
/* A faixa fixa onde a barra de cada tela passa a morar (27/ago/2026).
   Vazia, ela some — telas sem barra não ganham faixa nenhuma. */
#barra-tela { padding: 16px 34px 14px; border-bottom: 1px solid var(--border-soft); }
#barra-tela:empty { display: none; }
#barra-tela .abas { width: fit-content; }
#barra-tela > * { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#barra-tela .abas { border: 1px solid var(--border-soft) !important; background: var(--charcoal) !important; padding: 4px !important; }

.lanc-abas { margin: 0; }

/* MENU DE TELA TAMBÉM GRUDA — 26/ago/2026.
   Ordem dele, vendo o menu do WhatsApp sumir ao rolar: "todo menu superior
   deveria ficar travado em cima, e o que movimenta é a página". A barra de
   abas que abre uma tela (módulos, Meta, e-mail…) é o menu daquela tela —
   passa a se comportar como a dos Lançamentos, que ele já aprovou.
   Só a PRIMEIRA barra da tela: abas no meio do conteúdo continuam normais. */


.lanc-com-agenda { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }

/* O calendário gruda abaixo das abas E tem rolagem própria: sem o max-height
   ele corta em cima quando é mais alto que a tela — foi o que ele viu.
   Agora, se não couber, ele rola dentro de si mesmo. */
/* O calendário gruda abaixo das abas (99 do topo + 66 da barra de abas) e
   tem rolagem própria: sem o max-height ele corta em cima quando é mais alto
   que a tela — foi o que ele viu. Agora, se não couber, rola dentro de si. */
.lanc-agenda {
  position: sticky; top: 77px;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  scrollbar-width: thin;
}

@media (max-width: 1200px) {
  .lanc-com-agenda { grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
}

/* A tela cheia da Agenda: calendário à esquerda, o dia aberto à direita. */
.agenda-cheia { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* ============================================================
   TELAS PEQUENAS E MÉDIAS — iPhone, iPad e afins
   ============================================================
   Escrito em 09/ago/2026, por ordem do Fábio:
   "tem que ser responsivo em qualquer dispositivo trazendo a melhor
    experiência possível. A única coisa que não pode acontecer é mexer
    no time que está ganhando, que é a visualização no computador."

   ⚖️ A REGRA DESTE ARQUIVO, SEM EXCEÇÃO:
   Todo estilo daqui para baixo mora DENTRO de um @media com max-width.
   O computador (acima de 1024px) nunca lê uma linha sequer — não é
   questão de cuidado, é impossível ele ser afetado.
   Conferido a cada entrega por _ferramentas/conferir_responsivo.py.

   Os dois tamanhos:
     · até 1024px → iPad (retrato) e celular: o menu lateral vira faixa
     · até 700px  → celular: fontes, filtros e tabelas viram cartão
   ============================================================ */

@media (max-width: 1024px) {

  /* ---------- MENU SANDUÍCHE ----------
     Ordem do Fábio (09/ago/2026): a faixa deslizante escondia as opções —
     via-se três de quinze, e era preciso adivinhar que havia mais arrastando.
     Agora a barra tem só o botão ☰ e o logo; ao tocar, o menu abre em tela
     cheia com TODAS as opções visíveis e linhas altas, fáceis de acertar.

     O botão nasce com display:none no próprio HTML — é aqui, e só aqui, que
     ele aparece. O computador continua com o menu lateral de sempre. */
  .app { flex-direction: column; }

  aside.lateral {
    width: 100%; height: auto;
    position: sticky; top: 0; z-index: 40;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 13px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }

  /* O ✕ / ☰ era só um contorno fantasma — no tema claro sumia contra o
     branco (ele reclamou vendo no iPhone, 09/ago/2026). Agora tem fundo,
     borda dourada de verdade e o próprio símbolo em ouro. */
  .sanduiche {
    display: inline-flex !important;         /* vence o style inline */
    align-items: center; justify-content: center;
    /* 50px, não 44. O mínimo da Apple para o dedo é 44, mas ao lado de um
       título serifado de 26px e números de 30px o botão parecia miúdo —
       ele viu no iPhone e disse que "não é compatível com a visibilidade
       da página" (09/ago/2026). Aqui o tamanho é questão de peso visual,
       não de alvo de toque. */
    width: 50px; height: 50px; flex: 0 0 auto;
    font-size: 23px;
    border-radius: 14px;
    border: 1px solid rgba(201, 162, 75, 0.45);
    background: rgba(255, 255, 255, 0.075);
    color: #E6C97F;
    line-height: 1; cursor: pointer;
  }
  .sanduiche:active { background: rgba(255, 255, 255, 0.12); }
  body.tema-claro .sanduiche {
    background: #F1E9D8;
    border-color: rgba(154, 119, 51, 0.55);
    color: #7E5F1E;
  }
  body.tema-claro .sanduiche:active { background: #E9DFC7; }

  .marca { padding: 0; flex: 0 1 auto; gap: 11px; min-width: 0; }
  .marca .logo { width: 42px; height: 42px; font-size: 26px; border-radius: 12px; }
  /* nowrap: sem isso "Easy Smile" quebra em duas linhas quando o espaço
     aperta — ele pediu expressamente que não quebre. */
  .marca .nome { font-size: 19px; white-space: nowrap; }
  .marca .eyebrow { white-space: nowrap; }

  /* FECHADO: o menu não ocupa espaço nenhum */
  aside.lateral > nav,
  aside.lateral > .status-webhook,
  aside.lateral > .usuario,
  aside.lateral > button:not(.sanduiche) { display: none; }

  /* ---------- ABERTO: a tela inteira vira menu ---------- */
  aside.lateral.aberto {
    position: fixed; inset: 0;
    width: 100%; height: 100dvh;             /* dvh: conta a barra do Safari */
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 14px 16px 28px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--charcoal);
    border-bottom: none;
  }
  aside.lateral.aberto .sanduiche {
    position: absolute; top: 14px; right: 16px;
  }
  aside.lateral.aberto .marca { padding: 2px 0 22px; }

  /* Cada opção é um BOTÃO separado, com moldura própria — escolhido por ele
     numa área de teste em 09/ago/2026, entre três desenhos. Ele pediu
     "uma lista de botões de fácil visualização, fáceis de colocar o dedo em
     cima", e notou sozinho que o ícone precisava crescer junto com o texto. */
  aside.lateral.aberto > nav {
    display: flex; flex-direction: column; gap: 8px;
    overflow: visible;
  }
  aside.lateral.aberto nav button {
    width: 100%; justify-content: flex-start; gap: 12px;
    padding: 14px 13px; border-radius: 12px;
    font-size: 16px;                          /* leitura confortável no braço */
    /* 7,5% de véu e borda dourada a 38%: no monitor a diferença para os 4%
       antigos parece mínima, mas no iPhone — brilho automático, às vezes no
       sol — é o que separa "vejo um botão" de "vejo um texto". */
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(201, 162, 75, 0.38);
    color: var(--fg1);
  }
  /* Coluna fixa para o ícone: sem ela, ◆ ◉ ⬡ ≡ têm larguras diferentes e o
     texto sai desalinhado — a lista inteira parece torta. */
  aside.lateral.aberto nav button .icone {
    width: 24px; font-size: 19px; color: var(--a);
    justify-content: center; flex: 0 0 auto;
  }
  /* O SELECIONADO VAI SEMPRE NA DIREÇÃO OPOSTA AO FUNDO.
     Fundo preto pede ouro CLARO com texto escuro; fundo branco pede ouro
     FECHADO com texto claro (ver o bloco do tema claro abaixo). Parecem
     opostos e são — é o que dá aos dois temas a mesma força de destaque.
     A lavada dourada anterior afundava no preto: ele viu no iPhone e disse
     que "no escuro quase se confunde com os vizinhos". */
  aside.lateral.aberto nav button.on {
    background: linear-gradient(160deg, #C9A24B, #A87F2E);
    border-color: #E6C97F;
    box-shadow: none;
    color: #1A140A;
    font-weight: 600;
  }
  aside.lateral.aberto nav button.on .icone { color: #241A06; }
  aside.lateral.aberto nav button.on .badge {
    background: rgba(26, 20, 10, 0.18); color: #1A140A;
  }
  aside.lateral.aberto nav button:active { background: rgba(255, 255, 255, 0.08); }

  /* ---------- O MESMO MENU NO TEMA CLARO ----------
     O botão do tema escuro tem um véu de BRANCO por cima para ganhar corpo.
     Sobre fundo branco isso some — os botões sumiam e a lista virava texto
     solto. Aqui o corpo vem ao contrário: um creme que escurece de leve.

     E o selecionado ganha ouro FECHADO com texto claro (escolhido por ele em
     09/ago/2026, entre cinco desenhos). O ouro claro com texto escuro quase
     não se distinguia dos vizinhos — "mudou muito pouco", nas palavras dele. */
  body.tema-claro aside.lateral.aberto {
    background: var(--charcoal);
  }
  body.tema-claro aside.lateral.aberto nav button {
    background: #F8F4EA;
    border-color: rgba(154, 119, 51, 0.22);
  }
  body.tema-claro aside.lateral.aberto nav button .icone { color: #A87F2E; }
  body.tema-claro aside.lateral.aberto nav button.on {
    background: linear-gradient(160deg, #96701F, #7E5F1E);
    border-color: #5C4413;
    color: #FDFBF5;
  }
  body.tema-claro aside.lateral.aberto nav button.on .icone { color: #F6E7B6; }
  body.tema-claro aside.lateral.aberto nav button:active { background: #F1E9D8; }

  /* aberto, o rodapé do menu volta: tema, webhook e usuário */
  aside.lateral.aberto > button:not(.sanduiche) {
    display: block; margin-top: 18px !important;
    padding: 14px !important; font-size: 14px !important;
  }
  aside.lateral.aberto > .status-webhook { display: block; margin-top: 16px; }
  aside.lateral.aberto > .usuario { display: flex; }

  /* ---------- O TOPO DA PÁGINA ---------- */
  header.topo {
    padding: 14px 18px; gap: 12px;
    flex-wrap: wrap;
    position: static;                       /* já temos a faixa grudada em cima */
  }
  .conteudo { padding: 20px 18px 80px; }

  .grade-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* ---------- ALVO DE DEDO ----------
     A Apple recomenda 44px de altura mínima para qualquer coisa tocável. */
  .btn, nav button, .abas button { min-height: 44px; }
  input, select, textarea, .btn { font-size: 16px; }   /* 16px evita o zoom
     automático do iPhone ao tocar num campo — abaixo disso ele dá zoom
     sozinho e desalinha a tela inteira. */
}

@media (max-width: 700px) {

  /* ---------- CABEÇALHO DA TELA ----------
     "Visão geral" quebrava em duas linhas com letra de cartaz. */
  header.topo h1, .es-view h1 { font-size: 26px; line-height: 1.15; }
  header.topo { align-items: flex-start; }
  header.topo > div:first-child { flex: 1 1 100%; }

  /* a busca ficava do tamanho de uma letra */
  .busca { flex: 1 1 100%; }
  .busca input { width: 100%; }
  header.topo .btn { flex: 1 1 auto; justify-content: center; }

  .conteudo { padding: 16px 14px 90px; }
  .es-view { max-width: 100% !important; }

  /* ---------- ABAS E FILTROS ARRASTÁVEIS ----------
     Eram quatro linhas empilhadas de filtro antes de ver o primeiro contato. */
  .abas {
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .abas::-webkit-scrollbar { display: none; }
  .abas button { flex: 0 0 auto; white-space: nowrap; }

  .linha { gap: 8px; }
  .linha select, .linha .btn { flex: 1 1 calc(50% - 8px); min-width: 0; }

  /* ---------- CARTÕES E NÚMEROS ---------- */
  .grade-4, .grade-2 { grid-template-columns: 1fr; gap: 12px; }
  .numero { font-size: 30px; }
  .cartao { padding: 16px; }

  /* ---------- A TABELA VIRA LISTA DE CARTÕES ----------
     Sete colunas não cabem num telefone: o texto se sobrepunha. Cada linha
     vira um bloco empilhado e o cabeçalho some (no cartão, cada dado se
     explica sozinho).

     ⚠️ O `!important` aqui NÃO é preguiça. O app escreve as colunas direto
     no atributo style de cada linha (`style="grid-template-columns:36px 2fr…"`),
     e estilo inline vence folha de estilo. Sem o !important a regra é
     ignorada. A alternativa seria mexer no JavaScript que monta a linha —
     e isso mudaria também o computador, que é justamente o que não pode. */
  .tabela { border: none; background: none; }
  .tabela .cabecalho { display: none; }
  .tabela .item {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 14px 16px; margin-bottom: 10px;
    border: 1px solid var(--border-soft); border-radius: 14px;
    background: rgba(255, 255, 255, 0.015);
  }
  .tabela .item > * { min-width: 0; justify-self: start; }
  .tabela .item:last-child { margin-bottom: 0; }
  .corta { white-space: normal; overflow: visible; text-overflow: clip; }

  /* ---------- GAVETA (a ficha do contato) ---------- */
  .gaveta { width: 100%; max-width: 100%; border-radius: 0; }

  /* ---------- KANBAN ---------- */
  .kanban { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* O calendário sobe para cima da lista: ao lado não cabe, e ele deixa de
     ser grudado (sticky) para não roubar meia tela. */
  .lanc-com-agenda { display: flex; flex-direction: column-reverse; gap: 14px; }
  .lanc-agenda { position: static; max-height: none; overflow: visible; }
  /* no celular as abas não grudam: a tela é curta demais para gastar espaço */
  #barra-tela { padding: 12px 18px 10px; }
  .agenda-cheia { grid-template-columns: 1fr; }
}

@media (max-width: 359px) {
  /* Só telas muito estreitas (iPhone SE antigo). O iPhone comum tem 375px ou
     mais e comporta dois filtros lado a lado — por isso o corte é 359 e não
     400, que estava empilhando tudo à toa no aparelho dele. */
  .conteudo { padding: 14px 12px 90px; }
  header.topo { padding: 12px 14px; }
  .numero { font-size: 26px; }
  .linha select, .linha .btn { flex: 1 1 100%; }
}

/* ============================================================
   TEMA CLARO — ligado pela classe body.tema-claro.
   O botão fica no menu lateral; a escolha é salva no navegador.
   ============================================================ */
body.tema-claro {
  --espresso: #F6F1E7;
  --charcoal: #FFFFFF;
  --charcoal-2: #F3EDE0;
  --charcoal-3: #E9E1CF;
  --a: #A87F2E;
  --aw: #7E5F1E;
  --feriado: #A85555;
  /* NO TEMA CLARO: fundo bem claro, letra escura — foi assim que ele pediu */
  --ag-viagem-fundo:     #D6E9F5;  --ag-viagem-letra:     #1E4E6B;
  --ag-pessoal-fundo:    #DCEBCF;  --ag-pessoal-letra:    #35521C;
  --ag-importante-fundo: #E4D9F0;  --ag-importante-letra: #4A2C6B;
  --ag-financeiro-fundo: #F7EAC4;  --ag-financeiro-letra: #6B5310;
  --fg1: #2B2318;
  --fg2: #75705F;
  --border: rgba(154, 119, 51, 0.40);
  --border-soft: rgba(154, 119, 51, 0.20);
  --gradient-espresso: radial-gradient(120% 90% at 30% 0%, #FDF8EC, transparent 60%), var(--espresso);
  --quente: #B36F1E;
  --aluno: #1E8A55;
  --aluno-soft: #177144;
  --reembolsado: #B04A4A;

  background: radial-gradient(130% 90% at 78% -10%, rgba(201, 162, 75, 0.14), transparent 55%), var(--gradient-espresso);
}
body.tema-claro input, body.tema-claro textarea, body.tema-claro select { background: #FFFFFF; color: var(--fg1); }
body.tema-claro .abas { background: rgba(154, 119, 51, 0.08); }
body.tema-claro .cartao { background: #FFFFFF; }
body.tema-claro .cartao.brilho { background: linear-gradient(160deg, #FFFFFF, #FBF7EE); }
body.tema-claro .cartao.ouro { background: linear-gradient(160deg, rgba(201, 162, 75, 0.14), rgba(201, 162, 75, 0.04)); }
body.tema-claro .lateral { background: rgba(255, 255, 255, 0.65); }
body.tema-claro header.topo { background: rgba(246, 241, 231, 0.88); }
body.tema-claro .tabela { background: #FFFFFF; }
body.tema-claro .tabela .item:hover { background: rgba(154, 119, 51, 0.06); }
body.tema-claro .progresso { background: rgba(0, 0, 0, 0.08); }
/* no claro o mesmo destaque precisa de mais corpo — um creme, não uma lavada */
body.tema-claro { --destaque-etapa: #F6EBD2; }
.etapa:hover { background: rgba(255, 255, 255, 0.03); }

/* O BLOCO QUE ESTÁ SENDO ARRASTADO (11/ago/2026 · ajustado 12/ago).
   Ele pediu o sinal: "quando clica, o bloco já cria um efeito como se
   subisse um pouco e passasse sobre os outros blocos."
   O `position` NÃO entra aqui: durante o arrasto quem manda é o estilo
   inline do app.v3.js, que tira o bloco do fluxo para ele grudar no dedo. */
.etapa.arrastando, .pre-etapa.arrastando {
  transform: scale(1.02);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  cursor: grabbing;
  opacity: .97;
}
body.tema-claro .etapa.arrastando, body.tema-claro .pre-etapa.arrastando {
  box-shadow: 0 14px 34px rgba(90, 68, 20, 0.25);
}

/* O VAZIO — o espaço que o bloco deixou, e que anda pela lista enquanto ele
   é arrastado. É a peça que faz os outros "abrirem passagem", que era o que
   faltava no relato dele de 12/ago/2026. Fica pontilhado para ele enxergar
   exatamente onde o bloco vai cair. */
.etapa-vazio {
  border: 1.5px dashed var(--aw);
  border-radius: 10px;
  background: rgba(201, 162, 75, 0.07);
  opacity: .7;
  box-sizing: border-box;
}

/* Enquanto arrasta, a página inteira entende que está em modo de arrasto:
   nada de selecionar texto sem querer, e o cursor não muda de cara ao passar
   por cima dos outros blocos. */
body.arrastando-etapa { cursor: grabbing; user-select: none; }
body.arrastando-etapa * { cursor: grabbing !important; }
/* O PUNHO — a área de pegar e arrastar.
   Relato dele em 11/ago/2026: "a experiência de arrastar não está fluida,
   vezes funciona e vezes não" e "não está nítida a função". Duas causas:
   a área era de 12×18px (o padding não cresce um <span> inline) e nada
   dizia que aquilo se pega. O tamanho foi resolvido no app.v3.js
   (30×40 na lista, 28×36 no editor); aqui fica o aviso visual. */
.punho:hover, .punho-pre:hover {
  opacity: 1 !important;
  background: var(--charcoal-3);
  border-radius: 7px;
}
.punho:active, .punho-pre:active { cursor: grabbing; opacity: 1 !important; }
body.tema-claro .punho:hover, body.tema-claro .punho-pre:hover {
  background: rgba(154, 119, 51, 0.10);
}
body.tema-claro .etapa:hover { background: rgba(154, 119, 51, 0.05); }
body.tema-claro .etapa.arrastando, body.tema-claro .pre-etapa.arrastando {
  box-shadow: 0 10px 26px rgba(90, 70, 30, 0.22);
}
body.tema-claro .dados > div { background: #FFFFFF; }
body.tema-claro ::-webkit-scrollbar-thumb { background: rgba(154, 119, 51, 0.35); }

/* ============================================================
   CRIATIVOS — a biblioteca de anúncios  (12/ago/2026)
   ============================================================ */

/* A estante. Os cartões são quadrados e se ajustam sozinhos à largura —
   no computador dão quatro por linha, no iPhone dois. */
.criativo-estante {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}
.criativo-cartao { transition: transform .12s, box-shadow .12s; }
.criativo-cartao:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
body.tema-claro .criativo-cartao:hover { box-shadow: 0 8px 22px rgba(90, 68, 20, .15); }

/* O criativo aberto: os formatos à esquerda, os textos à direita.
   Abaixo de 900px vira uma coluna só — no iPhone, ler o texto ao lado de um
   vídeo em pé não caberia. */
.criativo-painel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
}
.criativo-painel > div > .cartao { margin-bottom: 12px; }

@media (max-width: 900px) {
  .criativo-painel { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .criativo-estante { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 11px; }
}

/* ---------- A CHAVE (liga/desliga) — 26/ago/2026 ----------
   Nasceu nos momentos do agente, onde o quadradinho de marcar não funcionava.
   É um botão comum: o estado vem da classe .on, nunca do campo. */
.chave {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 100px;
  border: 1px solid var(--border-soft);
  background: var(--charcoal);
  color: var(--fg2);
  font-size: 12px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  flex: 0 0 auto;
}
.chave .bola {
  width: 30px; height: 17px; border-radius: 100px;
  background: rgba(255,255,255,.14);
  position: relative; transition: background .18s;
}
.chave .bola::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--fg2); transition: transform .18s, background .18s;
}
.chave.on { border-color: var(--border); color: var(--fg1); }
.chave.on .bola { background: rgba(201,162,75,.35); }
.chave.on .bola::after { transform: translateX(13px); background: var(--a); }

/* ---------- Pipeline: arrastar (27/ago/2026) ----------
   O cartão só "pega" no arrasto; clique simples continua abrindo a ficha. */
.kcard { cursor: grab; }
.kcard:active { cursor: grabbing; }
.kcard.escolhido { border-color: var(--a); box-shadow: 0 0 0 1px var(--a) inset; }
.coluna.alvo { outline: 2px dashed rgba(201, 162, 75, .55); outline-offset: -4px; border-radius: 12px; }

/* ---------- As duas trilhas do momento (27/ago/2026) ----------
   Cada grupo é uma caixa fechada: sem isso ele não achava onde uma
   terminava e a outra começava. */
.trilha { border: 1px solid var(--border-soft); border-radius: 14px; margin: 14px 0; overflow: hidden; }
.trilha-cab {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--border-soft);
}
.trilha.ouro { border-color: var(--border); }
.trilha.ouro .trilha-cab { background: rgba(201, 162, 75, .10); border-bottom-color: var(--border); }
.trilha-corpo { padding: 14px; }

/* ---------- O semáforo das conexões no menu (27/ago/2026) ----------
   Alinhado à direita, na mesma coluna em todos os menus: assim ele confere
   os quatro num olhar de cima a baixo, sem caçar bolinha por bolinha. */
aside.lateral nav button { position: relative; }
.sinal {
  width: 8px; height: 8px; border-radius: 50%;
  margin-left: auto; flex: 0 0 auto;
}
.sinal.ok  { background: var(--aluno); box-shadow: 0 0 0 3px rgba(47, 181, 116, .16); }
.sinal.off { background: var(--reembolsado); box-shadow: 0 0 0 3px rgba(200, 107, 107, .16); }
.sinal.ne  { background: var(--fg2); opacity: .45; }

/* ============================================================
   O SELO DO ROBÔ DE 5 EM 5 MINUTOS  (29/ago/2026)

   Ele é quem faz o follow-up da Sandra, os momentos, o semáforo das
   conexões, o casamento dos anúncios e as automações de e-mail. Ficou um
   dia sem casar os anúncios e ninguém desconfiou, porque não havia onde
   olhar. Agora tem — discreto, no pé do menu, e só grita quando falha.
   ============================================================ */
.cron-caixa { margin: 14px 0 0; border-top: 1px solid var(--border-soft); padding-top: 4px; }
.cron-selo {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 12px;
  font-size: 11px; color: var(--fg2);
  cursor: help;
}
.cron-selo .sinal { margin-left: 0; }