/* =========================================================================
   Painel de leads — layout do painel clássico de referência (sidebar
   escura fixa com box de usuário, topbar, caixas de métricas e tabela
   de gestão), vestido com a identidade da Tainana: navy no lugar do
   cinza-ardósia, dourado reservado ao cliente fechado, rótulos em
   monospace maiúsculo como na LP.
   ========================================================================= */
:root {
  --navy-deep: #0e1627;
  --navy: #182541;
  --navy-alta: #22335a;
  --menu-secao: #101c33;      /* faixa das seções do menu, como no original */
  --blue: #2f5aae;
  --blue-escuro: #274b93;
  --blue-nevoa: #eaf0fa;
  --gold: #f2c230;
  --gold-borda: #b8930a;
  --off: #f1f3f6;
  --branco: #ffffff;
  --linha: #e2e6ee;
  --ink: #1c2434;
  --ink-2: #5c6675;
  --verde: #2e7d5b;
  --vermelho: #b3261e;

  /* Recorrência: quem voltou pelo formulário pede atenção, mas não é
     alarme — laranja, entre o âmbar do "novo" e o vermelho de erro. */
  --laranja: #d97706;
  --laranja-nevoa: #fdf1e3;
  --laranja-borda: #f0c896;

  /* -----------------------------------------------------------------
     PALETA DO FUNIL — a cor conta a história do lead, da chegada ao
     desfecho. Uma variável por estágio: mudar a cor de um estágio é
     mexer AQUI, num lugar só, e não caçar hex espalhado pelo arquivo.

       novo        âmbar quente  — o único que grita: exige ação hoje
       follow      azul da marca — em acompanhamento ativo
       aguardando  roxo suave    — a bola está com o cliente
       respondido  ciano         — voltou, perto do desfecho
       fechado     verde         — ganhou
       perdido     vermelho      — perdeu

     Âmbar no "novo" e não vermelho: urgência ≠ fracasso. O vermelho
     fica reservado ao perdido, senão a tela inteira parece alarme.
     ----------------------------------------------------------------- */
  --f-novo:       #f59f0b;
  --f-novo-forte: #b06e02;
  --f-follow:     #2f5aae;
  --f-aguardando: #7c5cd6;
  --f-respondido: #0b7c89;
  --f-fechado:    #1a8049;
  --f-perdido:    #d2453b;

  /* -----------------------------------------------------------------
     AGENDA — presencial × online, DELIBERADAMENTE fora da paleta do
     funil acima. As cores do funil contam ESTÁGIO de um lead; aqui a
     cor conta FORMATO de um compromisso, um eixo diferente — usar a
     mesma paleta faria alguém ler "azul = follow" num bloco que não
     tem nada a ver com funil. Par intencionalmente FRIO (o calendário
     já tem o dourado do cliente fechado espreitando por perto; um
     terceiro tom quente competiria por atenção com o que já significa
     "dinheiro" no resto do painel):
       presencial  — verde-azulado (o encontro que acontece ao vivo)
       online      — violeta (o encontro que acontece na tela)
     ----------------------------------------------------------------- */
  /* #0b7a63 sobre branco mede 5.28:1 — a versão original (#0e8a72,
     4.29:1) não fechava AA de texto pequeno (4.5:1) e este rótulo é
     texto pequeno (aria-label lido, mas o CHIP também é lido por olho). */
  --ag-presencial:        #0b7a63;
  --ag-presencial-nevoa:  #e3f5f0;
  --ag-online:            #6d5bd0;
  --ag-online-nevoa:      #eeecfb;

  --sans: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'Cascadia Mono', ui-monospace, 'SF Mono', Consolas, 'Roboto Mono', monospace;

  --menu-larg: 264px;
  /* Largura das colunas do quadro. O usuário ajusta arrastando a borda
     (como numa planilha) e o valor fica no localStorage. Os limites
     vivem no JS — ver LARG_MIN/LARG_MAX em app.js. */
  --col-larg: 260px;
  --raio: 12px;
  --raio-s: 8px;
  --sombra: 0 1px 2px rgba(14, 22, 39, 0.06), 0 8px 24px rgba(14, 22, 39, 0.07);

  /* -----------------------------------------------------------------
     BARRA DE ROLAGEM — derivada do fundo de cada área, não a barra
     cinza do sistema operacional (que destoa tanto do navy da sidebar
     quanto do branco das telas). Duas variantes, uma por família de
     fundo; trocar o tom é mexer aqui, não caçar regra por regra.

       claro   — sobre --branco/--off (conteúdo, cartões, modais, popovers)
       escuro  — sobre --navy (sidebar)

     Contraste medido contra o próprio fundo (WCAG, luminância relativa):
       thumb-claro   vs --branco  2.24:1 | vs --off  2.01:1
       thumb-claro-h vs --branco  2.80:1 | vs --off  2.52:1
       thumb-escuro  vs --navy    2.47:1
       thumb-escuro-h vs --navy   3.13:1

     Barra de rolagem não é texto — não precisa do 4.5:1 de AA de
     leitura — mas precisa ser DISTINGUÍVEL do trilho em repouso e mais
     nítida no hover, para avisar "há mais conteúdo" sem gritar. */
  --scroll-claro:      #a3aec2;
  --scroll-claro-hover: #8f9bb3;
  --scroll-escuro:      #4a5f9c;
  --scroll-escuro-hover: #5670ae;
}

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

html { color-scheme: light; }

body {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--off);
  min-height: 100vh;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* =========================================================================
   Login — antessala escura, um campo, uma porta.
   ========================================================================= */
.tela-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(47, 90, 174, 0.28), transparent 60%),
    var(--navy-deep);
  padding: 24px;
}

.cartao-login {
  width: min(380px, 100%);
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--raio);
  padding: 36px 32px 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.olho {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cartao-login .olho { color: var(--gold); display: block; margin-bottom: 10px; }
.cartao-login h1 { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.cartao-login .sub { color: rgba(255, 255, 255, 0.55); font-size: 13px; margin: 4px 0 26px; }

.cartao-login label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 8px;
}

.cartao-login input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-s);
  margin-bottom: 16px;
}
.cartao-login input:focus { border-color: var(--blue); outline: none; }

/* ---------- Campo de senha com botão de revelar ----------
   O wrapper é relativo só para ancorar o botão; o espaço reservado do
   campo (margin-bottom: 16px, herdado do input comum) já é o respiro
   antes do botão "Entrar" — não duplicamos margem aqui. */
.campo-senha {
  position: relative;
  margin-bottom: 16px;
}
.campo-senha input {
  margin-bottom: 0;
  /* Espaço à direita para o texto nunca passar por baixo do botão. */
  padding-right: 46px;
}

/* Qualificado com .cartao-login para empatar (e vencer, por especificidade
   0,2,0 > 0,1,1) a regra genérica .cartao-login button — que assume todo
   <button> do cartão como o "Entrar" (largura 100%, fundo azul, brilho no
   hover) e sem isso vazava inteira para este botão menor dentro do campo. */
.cartao-login .alternar-senha {
  position: absolute;
  top: 50%;
  right: 1px;
  transform: translateY(-50%);
  /* 44px é o alvo de toque mínimo em celular; o campo tem ~48px de
     altura então o botão cabe quase inteiro dentro dele sem esticar
     a linha — a diferença de 1px some no arredondamento visual. */
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  overflow: visible;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  border-radius: var(--raio-s);
  transition: color 120ms ease, background 120ms ease;
}
/* O brilho diagonal do botão "Entrar" é da assinatura do botão de ação
   principal — este é um controle discreto dentro do campo, não outro CTA. */
.cartao-login .alternar-senha::after { content: none; }
.alternar-senha svg { width: 19px; height: 19px; pointer-events: none; }
.cartao-login .alternar-senha:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.cartao-login .alternar-senha:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  color: #fff;
}

.cartao-login button {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--raio-s);
  background: var(--blue);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease;
}
.cartao-login button:hover { background: var(--blue-escuro); }
.cartao-login button::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-150%);
}
.cartao-login button:hover::after { transition: transform 600ms ease; transform: translateX(150%); }

.erro { color: #ffb4ac; font-size: 13px; margin-top: 12px; }

/* =========================================================================
   SISTEMA DE BARRA DE ROLAGEM — uma receita (`--rola-thumb`/
   `--rola-thumb-hover`), aplicada direto em cada seletor que já tem
   overflow próprio — sem classe nova no HTML, sem tocar o app.js.
   Duas famílias, definidas nos grupos logo abaixo: a sidebar (fundo
   --navy) puxa a variante escura; conteúdo, tabela, modal e popovers
   (fundo --branco/--off) puxam a clara. Trocar o tom de uma família
   inteira é editar as variáveis --scroll-claro e --scroll-escuro lá no
   :root — a receita abaixo nunca muda.

   Os dois motores de barra de rolagem do CSS não se sobrepõem:
   `scrollbar-width`/`scrollbar-color` é o padrão (Firefox e Chrome/Edge
   recentes), `::-webkit-scrollbar*` é o motor do WebKit (Safari e
   Chrome mais antigo). Declarar só um deixa a outra metade dos
   navegadores na barra cinza do sistema — por isso as duas sempre
   andam juntas, nos dois grupos abaixo.

   `scrollbar-color` não tem estado de :hover — por isso o realce ao
   passar o mouse só existe no lado WebKit (::-webkit-scrollbar-thumb
   :hover). É uma discrepância aceita: em Firefox a barra já nasce
   visível o bastante para avisar que há mais conteúdo, sem depender do
   hover para isso.

   `background-clip: content-box` com borda transparente encolhe o
   desenho do polegar dentro da faixa de 10px sem afinar a área de
   captura do mouse — visual mais fino que 10px cheios, sem ficar mais
   difícil de agarrar para arrastar. Trilho transparente: o próprio
   fundo do elemento já contrasta com o thumb (ver medição no :root),
   pintar o trilho de novo só duplicaria a cor sem ganho de legibilidade. */
:is(.menu) {
  --rola-thumb: var(--scroll-escuro);
  --rola-thumb-hover: var(--scroll-escuro-hover);
}
:is(.content, .metricas, .quadro__cartao, .modal__caixa,
    .dash__lateral > div[id], .dash__popover, .popover-largo) {
  --rola-thumb: var(--scroll-claro);
  --rola-thumb-hover: var(--scroll-claro-hover);
}

:is(.menu, .content, .metricas, .quadro__cartao, .modal__caixa,
    .dash__lateral > div[id], .dash__popover, .popover-largo) {
  scrollbar-width: thin;
  scrollbar-color: var(--rola-thumb) transparent;
}
:is(.menu, .content, .metricas, .quadro__cartao, .modal__caixa,
    .dash__lateral > div[id], .dash__popover, .popover-largo)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
:is(.menu, .content, .metricas, .quadro__cartao, .modal__caixa,
    .dash__lateral > div[id], .dash__popover, .popover-largo)::-webkit-scrollbar-track {
  background: transparent;
}
:is(.menu, .content, .metricas, .quadro__cartao, .modal__caixa,
    .dash__lateral > div[id], .dash__popover, .popover-largo)::-webkit-scrollbar-thumb {
  background: var(--rola-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
:is(.menu, .content, .metricas, .quadro__cartao, .modal__caixa,
    .dash__lateral > div[id], .dash__popover, .popover-largo)::-webkit-scrollbar-thumb:hover {
  background: var(--rola-thumb-hover);
}

/* .metricas rola na HORIZONTAL, dentro de uma faixa de 30px de altura
   (ver .metrica) — 10px de barra ali é grosso, empurra visualmente as
   pastilhas. Herda a cor clara do grupo acima (mesma família, mesmo
   fundo branco) mas com espessura própria, mais fina, preservando o
   3px que já existia antes desta mudança. */
.metricas { scrollbar-width: thin; }
.metricas::-webkit-scrollbar { height: 6px; }
.metricas::-webkit-scrollbar-thumb { border-width: 1px; }

/* =========================================================================
   Esqueleto: sidebar fixa + principal
   ========================================================================= */
/* A PÁGINA não rola: quem rola é a área de conteúdo, dentro da coluna
   da direita. Com a rolagem no documento, a barra horizontal do quadro
   nascia embaixo da tela INTEIRA — atravessando a sidebar, que é fixa e
   não deveria ter nada a ver com o quadro — e a topbar saía de cena ao
   rolar para o lado, mesmo sendo sticky (sticky segura no eixo vertical,
   não no horizontal). */
html, body { height: 100%; overflow: hidden; }

.layout {
  height: 100vh;
  height: 100dvh;   /* barra de endereço do celular não corta o rodapé */
  overflow: hidden;
}

.menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--menu-larg);
  background: var(--navy);
  color: #fff;
  overflow-y: auto;
  z-index: 30;
  display: flex;
  flex-direction: column;
  /* SEM scrollbar-gutter aqui — de propósito, ao contrário do .content.
     `stable` reservaria a faixa da barra o tempo todo, inclusive com o
     menu recolhido a --menu-larg: 64px, onde esse espaço reservado
     comeria a centralização dos ícones. Cor e espessura da barra
     (variante escura): ver SISTEMA DE BARRA DE ROLAGEM no topo do
     arquivo. */
}

.principal {
  margin-left: var(--menu-larg);
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;     /* deixa o filho encolher em vez de esticar o pai */
  overflow: hidden;
}

/* ---------- Box do usuário (assinatura do painel base) ---------- */
.box-usuario {
  padding: 30px 20px 24px;
  text-align: center;
  background: linear-gradient(180deg, var(--navy-alta), var(--navy));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.avatar {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Anel dourado: a marca da casa no lugar do anel branco do original. */
  box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--gold);
}

.usuario-nome { display: block; font-size: 15.5px; font-weight: 700; }
.usuario-cargo {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Itens do menu em seções, como no original ---------- */
.items-menu { padding-bottom: 24px; }

.items-menu h2 {
  margin-top: 4px;
  padding: 10px 20px;
  background: var(--menu-secao);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 120ms ease, color 120ms ease;
}
.item svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: 0.8; }
.item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

.item--ativo {
  background: rgba(47, 90, 174, 0.35);
  border-left-color: var(--gold);
  color: #fff;
  font-weight: 600;
}

/* Véu do menu no mobile */
.menu-veu {
  position: fixed;
  inset: 0;
  z-index: 25;
  border: 0;
  background: rgba(14, 22, 39, 0.55);
}

/* =========================================================================
   Topbar
   ========================================================================= */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  /* Sem position: sticky — a topbar é irmã da área que rola, não filha
     dela, então fica parada por construção, nos dois eixos. */
  flex: 0 0 auto;
  z-index: 20;
}

.topbar h1 { font-size: 18px; font-weight: 700; color: var(--navy); }
.topbar__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-top: 2px;
}

/* Recolher a sidebar: no desktop ela encolhe para uma faixa de ícones,
   no celular vira gaveta. Mesmo botão, comportamentos diferentes —
   é o mesmo pedido ("me dá mais espaço") em telas diferentes. */
.menu-btn {
  display: inline-flex;
  padding: 8px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--navy);
  cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; display: block; }

/* Sair — FIXO no rodapé da sidebar, sempre visível.
   Divisor em cima para separar da navegação: sair não é mais um destino,
   é o fim da sessão.

   `margin-top:auto` sozinho não bastava: o .menu tem `overflow-y:auto`,
   então ele empurrava o botão para o fim do CONTEÚDO, não da tela. Em
   menu mais alto que a janela (tela baixa, ou zoom de texto), o Sair
   descia junto com a rolagem e sumia — visto em produção.

   `position:sticky; bottom:0` resolve mantendo o botão no fluxo: ele
   ocupa seu lugar no fim da lista e gruda na base enquanto o resto rola.
   `position:fixed` exigiria reservar a altura à mão e quebraria quando a
   sidebar recolhe. O fundo opaco é obrigatório — sem ele os itens
   rolariam por baixo do botão, visíveis através dele. */
.item--sair {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 14px;
  padding-bottom: 18px;
}

/* =========================================================================
   Conteúdo
   ========================================================================= */
/* 130px embaixo era espaço reservado para a barra de lote flutuante;
   como ela só aparece com seleção ativa, o espaço vazio ficava lá o
   tempo todo, afastando o conteúdo do rodapé. 40px cobrem o respiro
   normal — a barra de lote tem `position: fixed` e não empurra nada. */
/* A ÚNICA área que rola. A barra vertical e a horizontal aparecem aqui,
   coladas na borda do conteúdo — nunca por baixo da sidebar. */
.content {
  flex: 1 1 auto;
  overflow: auto;
  padding: 24px 28px 40px;
  scrollbar-gutter: stable;
  /* Cor e espessura da barra (variante clara): ver SISTEMA DE BARRA DE
     ROLAGEM no topo do arquivo. */
}

/* ---------- Caixas de métricas (assinatura do painel base) ----------
   Melhoria: cada caixa É o filtro do seu estágio. O dourado fica só na
   caixa de cliente fechado — a conversão, como na LP. */
/* =========================================================================
   FILTROS DO FUNIL — barra de pastilhas, não painel de cartões.

   Eram seis blocos de cor sólida ocupando um terço da tela: numa
   ferramenta de trabalho diário, o assunto é a lista de nomes, e o
   filtro é só o caminho até ela. Aqui a cor marca o estágio num ponto
   e num filete; o retângulo colorido some.
   ========================================================================= */
.metrica {
  position: relative;
  display: inline-flex;
  /* center, não baseline: o número (14px) e o rótulo (10.5px) têm
     tamanhos diferentes, e alinhar pela linha de base joga o conjunto
     para baixo dentro da pílula. */
  align-items: center;
  gap: 6px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.metrica:hover { border-color: var(--cor-estagio, var(--blue)); color: var(--ink); }

/* Ponto da cor do estágio: a mesma linguagem do kanban e da tabela. */
.metrica::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-estagio, var(--ink-2));
  align-self: center;
  flex: 0 0 auto;
}

.metrica__num {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.metrica__rotulo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

/* Selecionado: a pastilha assume a cor do estágio. Um filtro ativo tem
   de ser óbvio — é ele que explica por que a lista está curta. */
/* Selecionado muda só COR, nunca tamanho nem posição. Havia aqui um
   anel de 5px com translateY(-2px), sobra do tempo em que os filtros
   eram cartões: numa pastilha de 30px, isso estourava a altura da faixa
   e a borda saía cortada. */
.metrica[aria-pressed='true'] {
  background: var(--cor-estagio, var(--navy));
  border-color: var(--cor-estagio, var(--navy));
  color: #fff;
}
.metrica[aria-pressed='true'] .metrica__num { color: #fff; }
.metrica[aria-pressed='true']::before { background: rgba(255, 255, 255, 0.85); }

/* Cada pastilha carrega a cor do seu estágio numa variável local, para
   as regras acima não precisarem de um bloco por estado. */
.metrica--todos      { --cor-estagio: var(--navy); }
.metrica--novo       { --cor-estagio: var(--f-novo); }
.metrica--follow     { --cor-estagio: var(--f-follow); }
.metrica--aguardando { --cor-estagio: var(--f-aguardando); }
.metrica--respondido { --cor-estagio: var(--f-respondido); }
.metrica--fechado    { --cor-estagio: var(--f-fechado); }
.metrica--perdido    { --cor-estagio: var(--f-perdido); }

/* O "novo" pede ação hoje: mantém o realce mesmo sem estar selecionado. */
.metrica--novo:not([aria-pressed='true']) {
  border-color: var(--f-novo);
  color: #7a4d00;
  background: #fff8ec;
}

/* =========================================================================
   BARRA DE CONTROLES — buscar e filtrar, numa faixa só.

   Uma linha, altura fixa: a busca ocupa o espaço que sobra, os filtros
   ficam à direita, e rolam na horizontal quando não couberem. Sem
   flex-wrap no desktop — assim nada desce para uma segunda linha e a
   barra não muda de altura ao filtrar (era o que fazia a tabela pular).
   ========================================================================= */
/* Sem isto o hidden que trocarVista poe na faixa nao surte efeito: o
   display de classe (abaixo) vence o display:none da folha do navegador,
   que e a precedencia mais baixa possivel — mesmo bug ja documentado no
   menu dos Reels da LP. */
.ferramentas[hidden] { display: none; }

.ferramentas {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* ---------- Campo de busca ---------- */
.busca {
  position: relative;
  display: flex;
  align-items: center;
  /* Encolhe até 180px antes de os filtros começarem a rolar: em tela
     estreita, ver os estágios importa mais que um campo largo. */
  flex: 1 1 180px;
  min-width: 0;
  max-width: 340px;
}

.busca__lupa {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--ink-2);
  pointer-events: none;
}

.busca input[type='search'] {
  width: 100%;
  min-width: 0;
  padding: 9px 12px 9px 33px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--off);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background 120ms ease, border-color 120ms ease;
}
.busca input[type='search']:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--blue);
}
.busca input[type='search']::placeholder { color: var(--ink-2); }
/* O X nativo do Chrome desalinha dentro da pílula; a busca já limpa
   com Esc e com o atalho da mensagem de vazio. */
.busca input[type='search']::-webkit-search-cancel-button { display: none; }

/* ---------- Filtros do funil ---------- */
/* Divisor: buscar e filtrar são ações diferentes sobre a mesma lista. */
.metricas {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--linha);
  overflow-x: auto;
  /* Cor e espessura da barra: ver SISTEMA DE BARRA DE ROLAGEM, perto do
     topo do arquivo — .metricas entra no grupo claro, com a variante
     mais fina (6px) por rolar dentro de uma faixa de só 30px. */
}

/* A pastilha não encolhe: texto espremido é pior que rolar. E todas
   têm a mesma altura fixa — sem isso, a que está ativa (com peso de
   fonte diferente) fica um fio mais alta que as vizinhas. */
.metrica {
  flex: 0 0 auto;
  height: 30px;
}

@media (max-width: 900px) {
  /* Empilhado, e sem o divisor vertical — que viraria um traço solto. */
  .ferramentas { flex-wrap: wrap; }
  .busca { flex: 1 1 100%; max-width: none; }
  .metricas {
    flex: 1 1 100%;
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid var(--linha);
  }
}

/* ---------- Tabela ---------- */
.quadro__cartao {
  margin-top: 14px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow-x: auto;
  /* Cor e espessura da barra (variante clara): ver SISTEMA DE BARRA DE
     ROLAGEM no topo do arquivo. */
}

.tabela { width: 100%; border-collapse: collapse; min-width: 760px; }

.tabela th, .tabela td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha);
}
.tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; }

.tabela thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: #fafbfd;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}

.tabela tbody tr { transition: background 100ms ease; }
.tabela tbody tr:hover { background: #f7f9fc; }
.tabela tbody tr.selecionada {
  background: var(--blue-nevoa);
  box-shadow: inset 3px 0 0 var(--blue);
}

.col-check { width: 40px; }
.tabela input[type='checkbox'] {
  width: 16px; height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}

.lead-nome { font-weight: 700; color: var(--navy); }
.lead-extra {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin-top: 3px;
}

.contato a {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.contato a:hover { text-decoration: underline; }
.contato .email {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 3px;
  word-break: break-all;
}

.celula-data {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.estado--fechado { font-weight: 700; }

.ponto {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.ponto--novo       { background: var(--f-novo); }
.ponto--follow     { background: var(--f-follow); }
.ponto--aguardando { background: var(--f-aguardando); }
.ponto--respondido { background: var(--f-respondido); }
.ponto--fechado    { background: var(--f-fechado); }
.ponto--perdido    { background: var(--f-perdido); }

.vazio {
  padding: 56px 28px;
  text-align: center;
  color: var(--ink-2);
}
.vazio strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }

/* =========================================================================
   Barra de lote — flutua sobre o rodapé quando há seleção.
   ========================================================================= */
.lote {
  position: fixed;
  left: calc(50% + var(--menu-larg) / 2);
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(14, 22, 39, 0.4);
  z-index: 40;
  animation: lote-sobe 220ms ease both;
}
.lote[hidden] { display: none; }

@keyframes lote-sobe {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

.lote__contagem {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.lote select {
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  color: #fff;
  background: var(--navy-alta);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--raio-s);
}

.lote__aplicar {
  padding: 9px 18px;
  border: 0;
  border-radius: var(--raio-s);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 140ms ease;
}
.lote__aplicar:hover { background: var(--blue-escuro); }

.lote__limpar {
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.lote__limpar:hover { color: #fff; }

/* =========================================================================
   Modal de cadastro manual
   ========================================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal[hidden] { display: none; }

.modal__fundo {
  position: absolute;
  inset: 0;
  background: rgba(14, 22, 39, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal__caixa {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  /* Cor e espessura da barra (variante clara): ver SISTEMA DE BARRA DE
     ROLAGEM no topo do arquivo. */
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: 0 30px 70px rgba(14, 22, 39, 0.45);
  animation: modal-entra 180ms ease both;
}

@keyframes modal-entra {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--linha);
}
.modal__topo h2 { font-size: 17px; color: var(--navy); }

.modal__fechar {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--raio-s);
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal__fechar:hover { background: var(--off); color: var(--ink); }

/* ---------- Formulário ---------- */
.form { padding: 20px 22px 22px; }

.form__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.campo { display: block; margin-bottom: 14px; }

.campo > span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.campo > span em { color: var(--vermelho); font-style: normal; }

.campo input,
.campo select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
}
.campo input:focus,
.campo select:focus { border-color: var(--blue); outline: none; }

.form__dica {
  margin: -6px 0 16px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.form__erro {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--raio-s);
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--vermelho);
  font-size: 13px;
}
.form__erro[hidden] { display: none; }

.modal__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.botao-principal {
  padding: 10px 20px;
  border: 0;
  border-radius: var(--raio-s);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease;
}
.botao-principal:hover { background: var(--blue-escuro); }
.botao-principal:disabled { opacity: 0.6; cursor: progress; }

.botao-secundario {
  padding: 10px 18px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.botao-secundario:hover { background: var(--off); }
.botao-secundario:disabled { opacity: 0.6; cursor: progress; }

@media (max-width: 560px) {
  .form__linha { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================================================
   Mobile: menu vira gaveta, como o painel base escondia o dele.
   ========================================================================= */
@media (max-width: 900px) {
  .menu {
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: 20px 0 60px rgba(14, 22, 39, 0.35);
  }
  body.menu-aberto .menu { transform: translateX(0); }
  body.menu-aberto .menu-veu[hidden] { display: block; }

  .principal { margin-left: 0; }
  .menu-btn { display: inline-flex; }
  .lote { left: 50%; }

  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .tabela th:nth-child(4), .tabela td:nth-child(4),
  .tabela th:nth-child(5), .tabela td:nth-child(5) { display: none; }
  .tabela { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lote { animation: none; }
  .menu { transition: none; }
  .cartao-login button::after { display: none; }
}

/* =========================================================================
   ABAS DE VISTA (topbar) — lista x quadro. No mobile o menu lateral vive
   fechado; sem este par no topo, trocar de vista custaria dois toques.
   ========================================================================= */
.abas {
  display: inline-flex;
  margin-left: auto;
  padding: 3px;
  background: var(--off);
  border: 1px solid var(--linha);
  border-radius: 10px;
}
/* Some na vista de Personalização: o tablist é "Vista dos leads", e
   mídia não é uma delas — ver o comentário em trocarVista (app.js).
   Mesma convenção de .modal[hidden]/.lote[hidden] deste arquivo: a
   especificidade de .abas (display: inline-flex) empataria com o
   [hidden] do navegador sem esta regra explícita. */
.abas[hidden] { display: none; }

.abas__botao {
  padding: 7px 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.abas__botao:hover { color: var(--ink); }

.abas__botao--ativo {
  background: var(--branco);
  color: var(--navy);
  box-shadow: 0 1px 2px rgba(14, 22, 39, 0.12);
}

/* O Sair já se ancora à direita sozinho (.logout tem margin-left:
   auto). Quando as abas existem, ficam coladas nele por padrão do
   flex — este respiro evita que o botão encoste na última pastilha. */
.topbar .abas + .logout { margin-left: 12px; }

.vista[hidden] { display: none; }

/* =========================================================================
   QUADRO (kanban) — uma coluna por estágio do funil.
   ========================================================================= */
.kanban {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  /* SEM overflow próprio: com ele, a barra horizontal nascia DENTRO do
     quadro — colada embaixo das colunas, no meio da tela. Agora o
     quadro só é largo, e quem rola é a página: a barra vai para o
     rodapé do navegador, onde se espera encontrá-la.
     `width: max-content` faz o quadro assumir a largura real das
     colunas, o que é o que dispara a rolagem da página. */
  width: max-content;
  min-width: 100%;
}

/* As cinco colunas dividem a largura disponível em vez de terem largura
   fixa: um funil cujo fim vive fora da tela não é um funil — e não dá
   para soltar um cartão numa coluna que ninguém enxerga. Abaixo de
   ~1.100px de área útil elas param de encolher e o quadro rola. */
.coluna {
  display: flex;
  flex-direction: column;
  /* Cada coluna tem a SUA largura: --larg é escrita pelo JS no próprio
     elemento ao arrastar a borda, e o padrão global serve de base para
     as que nunca foram ajustadas. */
  flex: 0 0 var(--larg, var(--col-larg, 260px));
  width: var(--larg, var(--col-larg, 260px));
  min-width: 0;
  /* SEM max-height de propósito: com teto, cada coluna ganhava barra de
     rolagem própria e o quadro virava seis áreas de rolagem
     independentes. Agora a coluna cresce com o conteúdo e quem rola é a
     página — uma barra só, a do navegador. */
  background: #e9edf4;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.coluna__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(14, 22, 39, 0.08);
}

.coluna__titulo {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}

.coluna__contagem {
  margin-left: auto;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(14, 22, 39, 0.09);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-2);
}

/* A coluna do cliente fechado é a única dourada — a conversão, como na LP. */
/* Cada coluna assume a cor do seu estágio no filete e na contagem. */
.coluna--novo       .coluna__topo { border-bottom-color: var(--f-novo); }
.coluna--novo       .coluna__contagem { background: var(--f-novo); color: #3d2600; }
.coluna--follow     .coluna__topo { border-bottom-color: var(--f-follow); }
.coluna--follow     .coluna__contagem { background: var(--f-follow); color: #fff; }
.coluna--aguardando .coluna__topo { border-bottom-color: var(--f-aguardando); }
.coluna--aguardando .coluna__contagem { background: var(--f-aguardando); color: #fff; }
.coluna--respondido .coluna__topo { border-bottom-color: var(--f-respondido); }
.coluna--respondido .coluna__contagem { background: var(--f-respondido); color: #fff; }
.coluna--fechado    .coluna__topo { border-bottom-color: var(--f-fechado); }
.coluna--fechado    .coluna__contagem { background: var(--f-fechado); color: #fff; }
.coluna--perdido    .coluna__topo { border-bottom-color: var(--f-perdido); }
.coluna--perdido    .coluna__contagem { background: var(--f-perdido); color: #fff; }

.coluna__pilha {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 96px;
  padding: 12px;
}

.coluna__vazia {
  margin: auto;
  padding: 18px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: #9aa3b2;
}

/* Coluna sob o cartão que está sendo arrastado. */
.coluna--alvo {
  background: var(--blue-nevoa);
  box-shadow: inset 0 0 0 2px var(--blue);
}

/* =========================================================================
   CARTÃO DO QUADRO — compacto por padrão, detalhe sob demanda.

   Fechado: uma linha com ponto de estágio, nome, origem e tempo parado.
   ~48px de altura, contra ~150px do formato anterior — cabem três vezes
   mais leads por tela, que é a razão de existir de um quadro.

   Aberto (pela seta): contato e edição, sem virar outra tela.
   ========================================================================= */
.cartao {
  position: relative;
  padding: 9px 10px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha);
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.cartao:hover { box-shadow: 0 3px 10px rgba(14, 22, 39, 0.10); }
.cartao:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Linha compacta (sempre visível) ---------- */
.cartao__linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ponto do estágio no lugar do avatar: o avatar ocupava 34px para
   repetir a inicial de um nome que está logo ao lado. */
.cartao__ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}

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

.cartao__nome {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cartao__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cartao__origem {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cartao__valor { color: var(--f-fechado); font-weight: 700; }

.cartao__tempo {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ---------- Seta ---------- */
.cartao__seta {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 120ms ease, transform 160ms ease;
}
.cartao__seta svg { width: 13px; height: 13px; }
.cartao__seta:hover { background: var(--off); color: var(--ink); }
.cartao--aberto .cartao__seta { transform: rotate(180deg); }

/* ---------- Detalhe (expandido) ---------- */
.cartao__detalhe {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--linha);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-2);
  line-height: 1.9;
  animation: detalhe-abre 140ms ease both;
}

@keyframes detalhe-abre {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cartao__detalhe { animation: none; }
  .cartao__seta { transition: background 120ms ease; }
}

.cartao__email { display: block; word-break: break-all; }

/* O nome editável fica no detalhe, não na linha compacta: ali ele
   precisa caber numa linha só e cortar com reticências — e um campo
   que corta texto ao editar é armadilha. */
.cartao__nome-edit {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
}
.cartao__nome-edit::before {
  content: 'nome: ';
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}


.coluna--novo       .cartao { border-left-color: var(--f-novo); }
.coluna--follow     .cartao { border-left-color: var(--f-follow); }
.coluna--aguardando .cartao { border-left-color: var(--f-aguardando); }
.coluna--respondido .cartao { border-left-color: var(--f-respondido); }
.coluna--fechado    .cartao { border-left-color: var(--f-fechado); }
.coluna--perdido    .cartao { border-left-color: var(--f-perdido); }

/* A pega é o único ponto que inicia arraste no toque: touch-action none
   só AQUI, para o dedo continuar rolando o resto do quadro. */



.cartao__id { min-width: 0; }

.cartao__nome {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  overflow-wrap: anywhere;
}





.cartao__email {
  display: block;
  margin-top: 3px;
  word-break: break-all;
}


.etiqueta {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--off);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cartao__tempo {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: #9aa3b2;
  white-space: nowrap;
}

/* ---------- Estados do arraste ---------- */
/* O cartão original vira um buraco: mostra de onde o cartão saiu. */
.cartao--saiu {
  opacity: 0.32;
  filter: grayscale(1);
}

.cartao--fantasma {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  pointer-events: none;   /* precisa sumir do elementFromPoint */
  box-shadow: 0 22px 44px rgba(14, 22, 39, 0.34);
  opacity: 0.96;
}

body.arrastando { cursor: grabbing; user-select: none; }

/* =========================================================================
   Ficha do lead — o cartão aberto por inteiro.
   ========================================================================= */
.modal__caixa--ficha { width: min(520px, 100%); }

.ficha__topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: linear-gradient(180deg, var(--navy-alta), var(--navy));
  border-radius: var(--raio) var(--raio) 0 0;
  color: #fff;
}

.ficha__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px rgba(255, 255, 255, 0.22);
}
.ficha__avatar--novo       { background: var(--f-novo); color: #3d2600; }
.ficha__avatar--follow     { background: var(--f-follow); }
.ficha__avatar--aguardando { background: var(--f-aguardando); }
.ficha__avatar--respondido { background: var(--f-respondido); }
.ficha__avatar--fechado    { background: var(--f-fechado); }
.ficha__avatar--perdido    { background: var(--f-perdido); }

.ficha__id { min-width: 0; flex: 1; }
.ficha__id h2 { font-size: 19px; color: #fff; overflow-wrap: anywhere; }

.ficha__sub {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.ficha__topo .modal__fechar { color: rgba(255, 255, 255, 0.7); }
.ficha__topo .modal__fechar:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.ficha__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 22px 0;
}
.ficha__acoes:empty { display: none; }

.acao {
  padding: 8px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.acao:hover { background: var(--off); }
.acao--whats { border-color: var(--verde); color: var(--verde); }
.acao--whats:hover { background: #eaf6f0; }

.ficha__corpo { padding: 16px 22px 22px; }

.campo--estagio { margin-bottom: 18px; }

.ficha__linha {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}
.ficha__linha:last-child { border-bottom: 0; }

.ficha__linha dt {
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.ficha__linha dd { overflow-wrap: anywhere; }
.ficha__linha dd a { color: var(--blue); font-weight: 600; text-decoration: none; }
.ficha__linha dd a:hover { text-decoration: underline; }

.ficha__linha--id dd code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

.ficha__relativo {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

.ficha__nada { color: var(--ink-2); font-size: 13.5px; }

/* O nome na tabela virou botão (abre a mesma ficha do quadro): tira a
   cara de botão e devolve a de nome forte que ele já tinha. */
button.lead-nome {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
button.lead-nome:hover { color: var(--blue); text-decoration: underline; }

@media (max-width: 900px) {
  /* Colunas quase de tela cheia, roladas na horizontal como no Trello.
     No celular a largura é fixa: redimensionar arrastando a borda é
     gesto de mouse, e ali o dedo precisa da largura inteira. */
  .coluna { flex: 0 0 82vw; width: 82vw; }
  .redimensionador { display: none; }
  .abas__botao { padding: 7px 11px; letter-spacing: 0.08em; }
  .ficha__linha { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 620px) {
  .topbar h1 { font-size: 16px; }
  .topbar__sub { display: none; }
  .abas__botao { font-size: 10px; padding: 7px 9px; }
  .logout { padding: 8px 10px; font-size: 0; gap: 0; }
  .logout svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .cartao:hover { transform: none; }
}


/* =========================================================================
   Ficha: bloco editável (estágio + valor fechado)
   ========================================================================= */
.ficha__editaveis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.campo-moeda {
  display: flex;
  align-items: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  overflow: hidden;
}
.campo-moeda:focus-within { border-color: var(--blue); }

.campo-moeda__prefixo {
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--off);
  align-self: stretch;
  display: grid;
  place-items: center;
}

.campo-moeda input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
}

.campo__nota {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--f-fechado);
}
.campo__nota:empty { display: none; }

.campo__erro {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--vermelho);
}
.campo__erro[hidden] { display: none; }

@media (max-width: 560px) {
  .ficha__editaveis { grid-template-columns: 1fr; }
}

/* Valor fechado: verde de dinheiro, aparecendo no lugar da etiqueta de
   origem quando existe — no cartao, quanto vale importa mais que de
   onde veio. */
.etiqueta--valor {
  background: #e2f4ea;
  color: var(--f-fechado);
  font-weight: 700;
}

.celula-valor {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--f-fechado);
}


/* =========================================================================
   Redimensionador de coluna — a borda direita vira uma alça de arrastar,
   como o cabeçalho de coluna de uma planilha.
   ========================================================================= */
.coluna { position: relative; }

.redimensionador {
  position: absolute;
  top: 0;
  right: -7px;      /* metade sobre o gap: alvo maior sem invadir o vizinho */
  width: 14px;
  height: 100%;
  z-index: 3;
  cursor: col-resize;
  /* Sem fundo: só o traço do ::after aparece, e mesmo assim no hover. */
  background: transparent;
  border: 0;
  padding: 0;
  touch-action: none;
}

.redimensionador::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--blue);
  opacity: 0;
  transition: opacity 120ms ease;
}
.redimensionador:hover::after,
.redimensionador:focus-visible::after,
.redimensionador--ativo::after { opacity: 1; }

/* Enquanto arrasta: o cursor não muda ao passar sobre outros elementos e
   nada é selecionado por engano. */
body.redimensionando {
  cursor: col-resize;
  user-select: none;
}


/* =========================================================================
   LISTA — refinamento de hierarquia e edição inline

   O que a tela precisa entregar, em ordem: QUEM é o lead, EM QUE ponto
   do funil está, e COMO falar com ele. Tudo o mais é apoio.
   ========================================================================= */

/* Filete da cor do estágio na primeira célula: dá o estado da linha
   antes de o olho chegar na última coluna. */
.tabela tbody tr { position: relative; }
.tabela tbody td:first-child { box-shadow: inset 3px 0 0 var(--cor-linha, transparent); }
tr.linha--novo       { --cor-linha: var(--f-novo); }
tr.linha--follow     { --cor-linha: var(--f-follow); }
tr.linha--aguardando { --cor-linha: var(--f-aguardando); }
tr.linha--respondido { --cor-linha: var(--f-respondido); }
tr.linha--fechado    { --cor-linha: var(--f-fechado); }
tr.linha--perdido    { --cor-linha: var(--f-perdido); }

/* O nome é o elemento âncora da linha — ganha peso e tamanho. */
/* O nome vira campo editável nas DUAS vistas; a ficha passa a ter um
   atalho próprio ao lado, para clicar no nome significar sempre a mesma
   coisa (editar), aqui e no quadro. */
.lead-nome.editavel {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
}

.lead-ficha {
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
/* Sempre visível — decisão revista: a versão anterior escondia o botão
   até o hover para "não virar coluna de ruído", mas hover não existe no
   toque, e quem não sabia do botão nunca o descobria. O custo do ruído
   é menor que o de esconder a única porta da ficha na tabela; a
   discrição fica por conta do tamanho (9px) e do tom apagado. */
.lead-ficha:hover,
.lead-ficha:focus-visible { border-color: var(--blue); color: var(--blue); }

/* Campo editável: parece texto até o mouse chegar perto. A borda
   tracejada só no hover avisa "isto se edita" sem transformar a tabela
   num formulário. */
/* Campo editável: parece dado até o mouse chegar. O lápis aparece no
   hover — a borda sozinha não dizia O QUE fazer, e ninguém adivinha que
   um texto de tabela aceita clique. */
.editavel {
  display: inline-block;
  position: relative;
  min-width: 40px;
  padding: 3px 20px 3px 6px;
  margin: -3px -6px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: text;
  transition: border-color 120ms ease, background 120ms ease;
}

.editavel::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  opacity: 0;
  transition: opacity 120ms ease;
  /* Lápis em SVG embutido: sem requisição extra e herda o tom do texto. */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.editavel:hover {
  border-color: var(--linha);
  background: var(--off);
}
.editavel:hover::after { opacity: 0.45; }

.editavel:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--branco);
  box-shadow: 0 0 0 3px rgba(47, 90, 174, 0.12);
}
.editavel:focus::after { opacity: 0; }
.editavel--vazio::before {
  content: attr(data-vazio);
  color: var(--ink-2);
  opacity: 0.6;
}

/* Salvando / salvo: um piscar curto no fundo, sem toast nem alerta —
   a mudança é pequena e a confirmação também deve ser. */
.editavel--salvando { border-color: var(--blue); border-style: solid; opacity: 0.6; }
.editavel--salvo { animation: campo-salvo 900ms ease; }
@keyframes campo-salvo {
  0%   { background: #dff3e6; border-color: var(--f-fechado); }
  100% { background: transparent; border-color: transparent; }
}
.editavel--erro { border-color: var(--f-perdido); border-style: solid; background: #fdecea; }

/* Seletor de estágio direto na linha: trocar de etapa é a ação mais
   frequente da tela e não deveria exigir abrir a ficha. */
.estagio-select {
  appearance: none;
  padding: 5px 26px 5px 22px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 11px center, right 7px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease;
}
.estagio-select:hover { border-color: var(--cor-linha, var(--blue)); }
.estagio-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* O ponto colorido vive no wrapper, não no <select> (que não aceita
   pseudo-elemento de forma confiável entre navegadores). */
.celula-estagio { position: relative; display: inline-block; }
.celula-estagio::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--cor-linha, var(--ink-2));
  pointer-events: none;
  z-index: 1;
}


/* A célula de contato agora tem campos editáveis + o atalho do
   WhatsApp. O telefone é o dado; "WhatsApp" é a ação — separados, para
   clicar num não significar editar o outro. */
.contato { line-height: 1.5; }

.contato [data-campo='whatsapp'] {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.contato__link {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-fechado);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contato__link:hover { border-bottom-color: currentColor; }

.contato .email {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  word-break: break-all;
}


/* =========================================================================
   Cartão do quadro — as mesmas ações da lista
   ========================================================================= */


.cartao__email {
  display: block;
  font-size: 10.5px;
  word-break: break-all;
}


/* No cartão o campo editável ocupa a linha inteira ao focar, para o
   texto não ficar espremido contra a borda. */


/* =========================================================================
   Sidebar recolhida — o quadro ganha ~200px de largura útil
   ========================================================================= */
body.menu-recolhido {
  --menu-larg: 64px;
}

/* Some tudo que é texto; ficam os ícones, centralizados. */
body.menu-recolhido .box-usuario { padding: 14px 8px; }
body.menu-recolhido .avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
  margin-bottom: 0;
  box-shadow: 0 0 0 2px var(--navy), 0 0 0 3px var(--gold);
}
body.menu-recolhido .usuario-nome,
body.menu-recolhido .usuario-cargo,
body.menu-recolhido .items-menu h2 { display: none; }

body.menu-recolhido .item {
  justify-content: center;
  padding: 12px 0;
  gap: 0;
  font-size: 0;            /* esconde o rótulo sem tirá-lo do DOM */
  border-left-width: 2px;
}
body.menu-recolhido .item svg { width: 19px; height: 19px; }

/* O rótulo volta como dica ao passar o mouse OU ao chegar pelo teclado —
   sem ele, uma coluna de ícones sem legenda vira adivinhação. Só :hover
   deixava quem navega por Tab sem nenhuma pista do que o ícone é; agora
   o mesmo attr(data-rotulo) aparece em :focus-visible também. O texto do
   botão continua no DOM (só font-size: 0 o esconde visualmente), então
   leitor de tela já lê "Dashboard", "Leads" etc. — este tooltip é para
   quem VÊ a tela mas ainda não sabe o que o ícone significa.

   POSICIONADO POR JS (ver posicionarTooltipMenu em app.js), não por
   `position: absolute` puro: o .menu tem `overflow-y: auto` e a spec
   CSS, ao ver só um eixo declarado, aplica "auto" também no outro — o
   .menu fica com overflow-x: auto implícito (mesmo efeito documentado
   mais abaixo, no comentário de .dash__popover--customizado). Um
   tooltip `absolute` nasce DENTRO desse container e o eixo X cortado
   escondia a dica inteira, tanto no hover quanto no focus — confirmado
   no navegador, é defeito anterior a esta mudança, não introduzido por
   ela. `position: fixed` sozinho resolveria o corte, mas o `top` de
   cada item é diferente (ordem variável de itens no menu) e não dá pra
   acertar em CSS puro sem inventar uma variável por item — por isso o
   JS lê getBoundingClientRect() do item no hover/focus e escreve
   --tooltip-x/--tooltip-y, que este bloco só consome. */
body.menu-recolhido .item:hover::after,
body.menu-recolhido .item:focus-visible::after {
  content: attr(data-rotulo);
  position: fixed;
  left: var(--tooltip-x, 72px);
  top: var(--tooltip-y, 50%);
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--navy-deep);
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  white-space: nowrap;
  z-index: 40;
  box-shadow: var(--sombra);
}

.menu, .principal { transition: margin-left 160ms ease, width 160ms ease; }

@media (prefers-reduced-motion: reduce) {
  .menu, .principal { transition: none; }
}

/* Atalho dentro da mensagem de vazio: parece link, é botão (a ação é
   local, não navega para lugar nenhum). */
.vazio__acao {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}
.vazio__acao:hover { color: var(--blue-escuro); }

/* =========================================================================
   Regras que se perderam em reescritas anteriores deste arquivo.
   ========================================================================= */

/* Contêiner das linhas de dados da ficha (o <dl>). Sem ele, o navegador
   aplica a margem padrão de definition list e o bloco desalinha. */
.ficha__dados {
  margin: 0;
  padding: 0;
}

/* Caixa de seleção da lista: o tamanho padrão do sistema é pequeno
   demais para um alvo de clique numa linha de 60px. */
.check-lead {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* O campo de valor ocupa a linha inteira quando a ficha empilha. */
.campo--valor { min-width: 0; }


/* =========================================================================
   COLUNA RECOLHIDA — a coluna vira uma faixa da largura de um emoji.

   Continua no DOM e continua aceitando cartões arrastados: dá para
   mover um lead para "Perdido" sem reabrir a coluna. Recolher é tirar
   do caminho, não esconder.
   ========================================================================= */

/* Botão de recolher, no cabeçalho da coluna aberta. */
.coluna__recolher {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}
.coluna__recolher svg { width: 13px; height: 13px; }
/* Só aparece com o mouse na coluna: seis setas sempre visíveis seriam
   ruído num quadro que já tem muita informação. */
.coluna:hover .coluna__recolher,
.coluna__recolher:focus-visible { opacity: 1; }
.coluna__recolher:hover { background: var(--branco); color: var(--ink); }

/* ---------- A faixa recolhida ---------- */
.coluna--recolhida {
  flex: 0 0 44px !important;   /* vence o --larg inline do redimensionador */
  width: 44px !important;
  min-width: 44px;
  align-self: stretch;
  background: var(--branco);
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--cor-recolhida, var(--linha));
  overflow: hidden;
}

/* Cada estágio pinta o filete da faixa com a sua cor. */
.coluna--recolhida.coluna--novo       { --cor-recolhida: var(--f-novo); }
.coluna--recolhida.coluna--follow     { --cor-recolhida: var(--f-follow); }
.coluna--recolhida.coluna--aguardando { --cor-recolhida: var(--f-aguardando); }
.coluna--recolhida.coluna--respondido { --cor-recolhida: var(--f-respondido); }
.coluna--recolhida.coluna--fechado    { --cor-recolhida: var(--f-fechado); }
.coluna--recolhida.coluna--perdido    { --cor-recolhida: var(--f-perdido); }

.coluna__reabrir {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 150px;
  padding: 12px 0 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease;
}
.coluna__reabrir:hover { background: var(--off); }

.coluna__emoji { font-size: 17px; line-height: 1; }

.coluna__contagem--vertical {
  min-width: 22px;
  margin-left: 0;
}

/* O nome do estágio de lado, como nas abas de uma pasta de arquivo:
   ocupa 0 de largura extra e ainda identifica a coluna. */
.coluna__titulo-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Alvo de solta: a faixa acende inteira quando um cartão passa por
   cima — em 44px não há espaço para um contorno discreto funcionar. */
.coluna--recolhida.coluna--alvo {
  background: var(--blue-nevoa);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.coluna--recolhida.coluna--alvo .coluna__titulo-vertical { color: var(--blue); }


/* =========================================================================
   REUNIÃO AGENDADA (Cal.com)
   ========================================================================= */

/* Selo no cartão fechado: um emoji basta para dizer "tem reunião" —
   a data completa vem no title e no cartão aberto. */
.selo-reuniao {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  cursor: help;
}

/* Lead que voltou pelo formulário: a borda esquerda do cartão (que já
   existe, neutra) vira laranja, e o selo diz quantas vezes. A borda
   sozinha some para quem não sabe o código — o selo é o texto. */
.cartao--voltou { border-left-color: var(--laranja); }

.selo-voltou {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--laranja-nevoa);
  border: 1px solid var(--laranja-borda);
  color: var(--laranja);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  cursor: help;
}

/* Histórico de contatos na ficha — a última vez em destaque no topo,
   o 1º contato fechando a lista. */
.ficha__historico {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}
.ficha__historico li { font-size: 12.5px; color: var(--ink-2); }
.ficha__historico-ultima { color: var(--ink); }
.ficha__historico-ultima strong { color: var(--laranja); }
.ficha__historico-primeiro {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed var(--linha);
}

.ficha__sem-reuniao { color: var(--ink-2); font-style: italic; }

/* Linha da vista Recorrência: agora é role="button" com tabindex (ver
   app.js) — sem isto o Tab passava batido por ela e não dava para
   dizer, só de olhar, onde o teclado estava. */
#tabela-recorrencias tr[data-abrir-recorrencia-lead]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* =========================================================================
   Modal da VISTA RECORRÊNCIA (não confundir com o modal-recorrencia da
   ficha, mais estreito): quem, status de hoje, reuniões, histórico de
   voltas. Mais alto que os "mini" comuns porque empilha 2 seções —
   .modal__caixa--mini já dá largura e padding, aqui só se ajusta o que
   é específico deste modal.
   ========================================================================= */
.modal__caixa--recorrencia-lead { width: min(460px, 100%); }

.recorrencia-lead__id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0; /* permite o nome truncar em vez de espremer o botão fechar */
}
/* Mesmo disco de iniciais da ficha (ficha__avatar--<status> já existe
   e dá a cor) — só o tamanho muda, porque aqui divide a linha do topo
   com o título em vez de ficar sozinho. */
.recorrencia-lead__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.recorrencia-lead__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.recorrencia-lead__secao {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}
.recorrencia-lead__titulo {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.recorrencia-lead__proxima-rotulo,
.recorrencia-lead__outras-rotulo {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
}
.recorrencia-lead__outras-rotulo { margin-top: 10px; }

/* A ausência de reunião é dita, não omitida (pedido do Gabriel) — por
   isso este texto ocupa o mesmo espaço que um .reuniao ocuparia, em vez
   de a seção simplesmente encolher e sumir. */
.recorrencia-lead__sem-reuniao {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--off);
  color: var(--ink-2);
  font-size: 12.5px;
  font-style: italic;
}

/* =========================================================================
   DASHBOARD — cartões de número + últimos leads + seletor de período.
   ========================================================================= */

.dash__filtro { position: relative; margin-bottom: 16px; }

.dash__periodo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--branco);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
/* O rótulo agora carrega nome do atalho + datas ("Últimos 7 Dias
   (22/08 – 28/08)") — mais texto que o antigo "22/08 – 28/08" sozinho.
   Deixa quebrar em telas estreitas em vez de vazar por cima do conteúdo
   ao lado; o botão é o único elemento da linha, então crescer em altura
   não empurra nada de importante. */
#dash-periodo-rotulo { white-space: normal; text-align: left; }
.dash__periodo:hover { border-color: var(--blue); }
.dash__periodo svg { width: 15px; height: 15px; color: var(--blue); }

/* Duas colunas: métricas + trilho lateral de últimos leads. O trilho
   tem largura fixa — os últimos leads são leitura de canto de olho, não
   podem competir em área com os números. */
/* `align-items: stretch` (o padrão) e NÃO `start`: é o que dá ao trilho
   lateral uma altura de referência para se limitar. Com `start`, cada
   coluna tinha altura própria, o `max-height:100%` do trilho não tinha
   a que se referir, e a lista esticava passando do último card. */
.dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
}
.dash__principal { display: grid; gap: 14px; }

/* Três blocos, três pesos — a métrica não é uma lista de 5 iguais, é
   uma resposta em ordem: quanto entrou → o que fechou → o que ainda
   está em jogo. Cada bloco tem sua própria grade porque cada um tem um
   número de colunas diferente (1, depois 2, depois 2 menor). */
.dash__hero { display: grid; }
.dash__resultado { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash__pipeline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.dash-card {
  display: grid;
  gap: 8px;
  padding: 16px 15px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.dash-card:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 18px rgba(14, 22, 39, 0.10);
  transform: translateY(-1px);
}
.dash-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dash-card__num {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.dash-card__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* O par "resultado" (adquiridos/perdidos): mais área que o pipeline,
   porque é desfecho — a pergunta "eu ganhei ou perdi" pesa mais que
   "quantos estão no meio do caminho". */
.dash-card--grande { padding: 22px 20px; gap: 10px; }
.dash-card--grande .dash-card__num { font-size: 28px; }

/* O hero do faturamento — sozinho, largura cheia, continua sendo O
   número deste painel. Fundo escuro foi testado e rejeitado: pesava
   demais numa tela que devia ser rápida de ler no celular. A hierarquia
   agora vem de ESCALA (o maior número da tela, bem mais que os
   "grande") e de uma borda dourada à esquerda — um risco de cor, não
   um bloco. Nem --gold (~1.9:1) nem --gold-borda (~2.9:1) passam no
   contraste mínimo como TEXTO em fundo branco — por isso os dois ficam
   fora da tipografia: o número usa --ink, o rótulo usa --ink-2 (como
   todo card), e o dourado vive só na borda, onde não é texto e não
   precisa desse contraste. */
.dash-card--hero {
  padding: 22px 24px;
  gap: 6px;
  background: var(--branco);
  border-color: var(--linha);
  border-left: 4px solid var(--gold-borda);
}
.dash-card--hero .dash-card__num {
  font-size: 40px;
  color: var(--ink);
}
.dash-card--hero:hover { border-color: var(--blue); border-left-color: var(--gold-borda); box-shadow: 0 6px 18px rgba(14, 22, 39, 0.10); }

/* Trilho lateral.

   `align-self: start` + `max-height: 100%`: o cartão para de esticar
   junto com a coluna de métricas e termina alinhado com o último card
   ("Aguardando atendimento"). Sem isso ele acompanhava a altura da
   linha do grid e sobrava um bloco branco vazio embaixo da lista.

   Coluna flex para o título ficar fixo e só a LISTA rolar: com 10 leads
   ela cabe inteira na maioria das telas; em tela baixa, rola dentro do
   próprio cartão em vez de empurrar o layout. */
.dash__lateral {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 16px;
  align-self: start;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* A área que rola — só a lista, nunca o título. */
.dash__lateral > div[id] {
  overflow-y: auto;
  min-height: 0;
  /* Cor e espessura da barra (variante clara): ver SISTEMA DE BARRA DE
     ROLAGEM no topo do arquivo. */
}
.dash__subtitulo {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Em tela estreita o trilho desce para baixo das métricas; o par
   resultado/pipeline empilha por último, no celular — o hero do
   faturamento já nasce em largura cheia e não muda. */
@media (max-width: 1100px) {
  .dash { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash__resultado, .dash__pipeline { grid-template-columns: 1fr; }
  .dash-card--hero .dash-card__num { font-size: 34px; }
}

/* =========================================================================
   GRÁFICOS DO DASHBOARD — SVG desenhado à mão em app.js, sem lib: dois
   cartões lado a lado (empilham em telas estreitas), no mesmo cartão
   branco com borda que o resto do painel usa. Dois gráficos, não seis —
   ver comentário no HTML sobre os que ficaram de fora.
   ========================================================================= */
.dash__graficos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 900px) {
  .dash__graficos { grid-template-columns: 1fr; }
}
.dash__grafico-cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 16px;
}
/* O SVG escala pela largura do cartão (viewBox + width 100%); a altura
   é fixa em CSS para o eixo não esticar feio quando a coluna alarga. */
.dash__grafico-cartao svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Barras diárias (leads recebidos) ---------------------------------- */
.grafico-barras__coluna { cursor: default; }
.grafico-barras__barra {
  fill: var(--blue);
  transition: fill 120ms ease;
}
.grafico-barras__coluna:hover .grafico-barras__barra { fill: var(--blue-escuro); }
.grafico-barras__eixo { stroke: var(--linha); stroke-width: 1; }
.grafico-barras__rotulo {
  fill: var(--ink-2);
  font-size: 9.5px;
  font-family: var(--sans);
  text-anchor: middle;
}
.grafico-barras__valor {
  fill: var(--ink);
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--sans);
  text-anchor: middle;
}
/* Tooltip nativo do SVG (<title>) cobre o dado exato ao passar o dedo ou
   o mouse — não depende de JS extra, funciona em toque com hold. */

/* ---- Funil por estágio (barras horizontais) ---------------------------- */
.grafico-funil { display: grid; gap: 8px; }
.grafico-funil__linha {
  display: grid;
  grid-template-columns: 84px 1fr 34px;
  align-items: center;
  gap: 8px;
}
.grafico-funil__rotulo {
  font-size: 12px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grafico-funil__trilho {
  height: 10px;
  background: var(--off);
  border-radius: 999px;
  overflow: hidden;
}
.grafico-funil__preenchido {
  /* É um <span>: sem display:block, "height: 100%" não pega e a barra
     fica achatada — foi o bug visto no primeiro teste visual. */
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 200ms ease;
}
.grafico-funil__num {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.grafico-vazio { color: var(--ink-2); font-size: 13px; text-align: center; padding: 12px 0; }

/* =========================================================================
   HERO — TICKET MÉDIO (ajuste no card de faturamento)
   Entra dentro do MESMO <button> do hero, no canto direito, para não
   criar um segundo alvo de clique num card que já é inteiro clicável.
   Rótulo pequeno + valor num peso bem abaixo do número grande à
   esquerda: leitura de apoio, nunca compete com o faturado. ========= */
.dash-card__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dash-card__ticket {
  display: grid;
  justify-items: end;
  gap: 2px;
  flex: 0 0 auto;
}
.dash-card__ticket-rotulo {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.dash-card__ticket-valor {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 480px) {
  /* Card estreito: ticket desce para debaixo do faturado em vez de
     espremer os dois lado a lado até truncar. */
  .dash-card__linha { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dash-card__ticket { justify-items: start; }
}

/* =========================================================================
   5 VISUALIZAÇÕES NOVAS DA DASHBOARD — layout comum: duas fileiras
   pareadas (A+D, B+C) e E fechando sozinha, todas dentro do mesmo
   cartão branco (.dash__grafico-cartao) que os gráficos originais já
   usam, para parecer parte do painel — não um bloco importado.
   ========================================================================= */
.dash__linha-dupla {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 900px) {
  /* Celular primeiro: cada par empilha em coluna única, sem overflow
     horizontal — mesmo ponto de quebra que .dash__graficos já usa. */
  .dash__linha-dupla { grid-template-columns: 1fr; }
}
.dash__grafico-cartao--denso { display: flex; flex-direction: column; }
/* Topo de cartão com o mês vigente à direita — os blocos MENSAIS (Radar,
   Quando chega lead) não seguem o filtro, e escrever QUAL mês está em
   jogo é o que impede a leitura errada de que seguem. */
.dash__cartao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dash__cartao-topo .dash__subtitulo { margin: 0; }
.dash__periodo-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  /* Sem text-transform: capitalize — ele maiusculiza TODA palavra e
     "agosto de 2026" virava "Agosto De 2026". A inicial certa vem do JS. */
}

/* "Quando chega lead" — dois gráficos de linha (hora do dia / dia da
   semana). Traço no azul da marca; a área sob a linha em azul-névoa dá
   corpo sem pesar; os tiques são os "pauzinhos" do eixo (24 e 7). */
.qcl__titulo {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 10px 0 2px;
}
.qcl__svg { width: 100%; height: auto; display: block; }
.qcl__linha { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.qcl__area { fill: var(--blue-nevoa); }
.qcl__ponto { fill: var(--blue); }
.qcl__tique { stroke: var(--linha); stroke-width: 1; }
.qcl__rotulo { font-size: 9px; fill: var(--ink-2); text-anchor: middle; }
.qcl__pico { font-size: 10px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.qcl__hit { fill: transparent; cursor: crosshair; }
.qcl__guia { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; }
.qcl__foco { fill: var(--blue); stroke: var(--branco); stroke-width: 2; }
/* [hidden] em elemento SVG não tem display:none da folha do navegador em
   todo motor — a guarda explícita é a lição da semana. */
.qcl__guia[hidden], .qcl__foco[hidden] { display: none !important; }
.qcl__tip {
  position: fixed; /* imune a overflow/clipping do cartão — lição do tooltip da sidebar */
  z-index: 80;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 7px;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(14, 22, 39, 0.28);
}

/* Lista dos mais parados dentro do radar — reusa .dash-linha do trilho
   de Últimos leads: mesmo desenho, mesmo clique-para-ficha. */
.dash-radar__lista { margin-top: 12px; border-top: 1px solid var(--linha); padding-top: 4px; }

.dash__legenda-sub {
  font-size: 11.5px;
  color: var(--ink-2);
  margin: -4px 0 10px;
}
/* Bloco solo (E), fora de qualquer .dash__linha-dupla: recebe a mesma
   margem que separa as fileiras entre si, para o ritmo vertical
   continuar igual até o último bloco. */
.dash__linha-dupla + .dash__grafico-cartao { margin-top: 14px; }

/* ---- A: Desempenho por origem ------------------------------------------
   Uma linha por canal, ordenada por faturado (não por volume — dinheiro
   fala mais alto). Grade de 4 colunas: nome+n, barra de win rate, taxa
   em número, valores. Barra na cor de "fechado" (--f-fechado): é
   literalmente a mesma pergunta que o funil já responde em outra forma
   (proporção de ganho), reaproveitar a cor deixa a leitura consistente. */
.dash-origem__tabela { display: grid; gap: 10px; }
.dash-origem__linha {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(50px, 1fr) 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.dash-origem__nome {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* `n` absoluto sempre visível ao lado do nome do canal: win rate de
   n=2 oscila enormemente lead a lead, e omitir o tamanho da amostra
   convida a ler 100% de n=1 como sinal forte. */
.dash-origem__n {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  flex: 0 0 auto;
}
.dash-origem__trilho {
  height: 8px;
  background: var(--off);
  border-radius: 999px;
  overflow: hidden;
}
.dash-origem__preenchido {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--f-fechado);
  transition: width 200ms ease;
}
.dash-origem__taxa {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dash-origem__valores {
  display: grid;
  justify-items: end;
  gap: 1px;
  min-width: 0;
}
.dash-origem__valores strong {
  font-size: 12.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-origem__valores span {
  font-size: 10.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
@media (max-width: 560px) {
  /* Linha larga demais para 4 colunas num celular estreito: taxa some
     do grid próprio e migra para dentro da barra (texto sobreposto),
     valores continuam à direita — nome+n, barra+taxa, valores. */
  .dash-origem__linha { grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) minmax(0, 1fr); }
  .dash-origem__taxa { display: none; }
}

/* ---- B: Radar de leads parados ------------------------------------------
   Três faixas, cada uma um botão inteiro — clicar abre quem está nela.
   1–3 e 3–7 dias usam a paleta neutra do painel; 7+ pede o tom de
   urgência (--laranja, o mesmo do bloco de Recorrência) — NUNCA
   --f-perdido/vermelho, que é reservado ao lead perdido de verdade. */
.dash-radar__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 480px) {
  .dash-radar__grade { grid-template-columns: 1fr; }
}
.dash-radar__faixa {
  display: grid;
  gap: 6px;
  padding: 16px 14px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--off);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.dash-radar__faixa:hover { border-color: var(--blue); transform: translateY(-1px); }
.dash-radar__faixa:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dash-radar__num {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dash-radar__rotulo {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* A faixa de urgência: fundo âmbar suave, número e borda no mesmo tom —
   é a única das três que pede reação imediata. */
.dash-radar__faixa--7mais {
  background: var(--laranja-nevoa);
  border-color: var(--laranja-borda);
}
.dash-radar__faixa--7mais .dash-radar__num { color: var(--laranja); }
.dash-radar__faixa--7mais:hover { border-color: var(--laranja); }

/* ---- C: Mapa de calor de chegada ----------------------------------------
   Grade CSS (não SVG — células precisam de <title> individual, mais
   simples como elementos reais que como <rect> com <title> cada). Uma
   coluna de rótulo (dia) + 8 blocos de 3h. Larguras pensadas para caber
   em 390px: rótulo de dia ~26px + 8 células (~34px cada + gap) fica bem
   dentro de uma tela de celular sem rolagem horizontal. */
.dash-calor { display: grid; gap: 3px; }
.dash-calor__cabecalho,
.dash-calor__linha {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 6px;
}
.dash-calor__linha-rotulo {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
}
.dash-calor__linha-celulas {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
}
.dash-calor__coluna-rotulo {
  font-size: 9px;
  color: var(--ink-2);
  text-align: center;
}
.dash-calor__celula {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 3px;
  border: 1px solid var(--linha);
  /* Opacidade vem do JS por --opacidade (0 a 1) — célula zero fica com
     só a borda visível (grade se lê mesmo vazia), célula do máximo do
     período pinta --blue na cor cheia. Nenhum hex novo: é o mesmo azul
     das barras do gráfico de leads/dia, só variando a opacidade. */
  background: color-mix(in srgb, var(--blue) calc(var(--opacidade, 0) * 100%), transparent);
}

/* ---- D: Reuniões ---------------------------------------------------------
   Bloco esquerdo (próximos 7 dias) mais alto que os dois cartões da
   direita — é a pergunta mais acionável do quarteto ("o que tenho essa
   semana"), por isso ganha a mini-lista; canceladas e sem-reunião são
   contagem simples, e o win rate fecha embaixo, cruzando os dois lados. */
.dash-reunioes__grade { display: grid; gap: 12px; }
.dash-reunioes__legenda {
  font-size: 11px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.dash-reunioes__num {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: block;
}
.dash-reunioes__bloco { padding-bottom: 4px; }
.dash-reunioes__lista {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  max-height: 168px;
  overflow-y: auto;
}
.dash-reunioes__item {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--linha);
  font-size: 11.5px;
  color: var(--ink-2);
}
.dash-reunioes__item:last-child { border-bottom: 0; }
.dash-reunioes__item-nome {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-reunioes__lado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 420px) {
  .dash-reunioes__lado { grid-template-columns: 1fr; }
}
.dash-reunioes__cartao {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--off);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}
.dash-reunioes__cartao:hover { border-color: var(--blue); transform: translateY(-1px); }
.dash-reunioes__cartao:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* O cartão de "canceladas" não abre nada (não temos uma lista própria
   de canceladas separada de AGENDAS_POR_LEAD por lead) — cursor padrão
   e sem hover de clique, para não prometer uma ação que não existe. */
.dash-reunioes__cartao--estatico {
  cursor: default;
  transition: none;
}
.dash-reunioes__cartao--estatico:hover { border-color: var(--linha); transform: none; }
.dash-reunioes__winrate {
  border-top: 1px solid var(--linha);
  padding-top: 10px;
}
.dash-reunioes__winrate-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dash-reunioes__winrate-item {
  display: grid;
  gap: 2px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.dash-reunioes__winrate-item strong { color: var(--ink); }
.dash-reunioes__winrate-taxa {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---- E: Meet × presencial ------------------------------------------------
   Dois (ou três, com "Sem formato") cartões lado a lado — mesma
   linguagem visual da origem (barra + n + tíquete), só num grid mais
   largo porque são poucos itens. */
.dash-formato__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.dash-formato__cartao {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--off);
}
.dash-formato__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
}
.dash-formato__rodape {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-2);
}

/* Some visualmente mas continua no fluxo de leitura de leitor de tela —
   o padrão "visually hidden" (não usar display:none, que também some
   do leitor). Serve às tabelas de apoio dos gráficos (funil, mapa de
   calor de chegada).

   `width: 1px` some o elemento — mas uma <table> (display: table)
   calcula a própria largura pelo CONTEÚDO MÍNIMO das colunas, e
   table-layout: fixed sozinho NÃO resolve: o motor ainda respeita a
   largura intrínseca de cada <th>/<td> com white-space: nowrap por
   cima do width explícito da tabela. A tabela de apoio do funil (2
   colunas curtas) já estourava ~284px sem que desse pra perceber
   (cabia dentro do body); a do mapa de calor (9 colunas: dia + 8
   blocos de 3h, texto tipo "09h–12h") estourava o bastante para criar
   overflow horizontal REAL da página inteira em 390px — foi assim que
   o defeito apareceu.

   `display: block` na tabela ESCONDIDA resolve: fora do algoritmo de
   layout de tabela, width: 1px passa a valer como em qualquer bloco.
   Não quebra a semântica pra leitor de tela — role de tabela/linha/
   célula vem do elemento HTML (<table>/<tr>/<th>/<td>), não do
   `display` CSS; sumir da árvore de acessibilidade só aconteceria com
   display: none, que aqui não é usado. */
.oculto-visual {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dash-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--linha);
  background: none;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 100ms ease;
}
.dash-linha:last-child { border-bottom: 0; }
.dash-linha:hover { background: var(--off); }
/* O ponto de status no trilho é maior que o da tabela (10px vs 8px):
   aqui ele é a ÚNICA pista visual do estágio, não tem coluna "Estágio"
   ao lado — precisa carregar mais peso sozinho. */
.dash-linha .ponto { width: 10px; height: 10px; }
.dash-linha__nome {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-linha__meta { margin-left: auto; color: var(--ink-2); font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.dash-vazio { padding: 20px; text-align: center; color: var(--ink-2); font-size: 13px; }

/* Popover do período — POSICIONADO PELO JS (position: fixed), não mais
   ancorado por CSS ao pai relativo. Motivo: com `position: absolute` o
   popover pertencia ao fluxo do documento — rolar a página (ou só a
   barra lateral) arrastava o popover junto, e ele saía de baixo do
   botão que o abriu. `fixed` tira o popover do fluxo por completo; a
   posição exata (top/left) é calculada em reposicionarPopover() a
   partir do getBoundingClientRect() do botão, a cada abertura/render.
   Se a página rolar com o popover ABERTO, ele FECHA (ver listener de
   scroll perto de fecharPopover) em vez de reposicionar a cada frame —
   mais barato, e coerente com "clicar fora fecha": rolar tira o botão
   de onde estava, então o contexto que justificava o popover aberto
   também foi embora.

   Altura pensada para caber INTEIRA na tela sem rolagem interna: por
   isso max-height vira uma salvaguarda para viewport muito baixa (não
   uma meta), não o normal do dia a dia — ver o orçamento de altura
   reduzido em .cal__dia, .cal__mes-topo, .cal__campos etc. mais abaixo. */
.dash__popover {
  position: fixed;
  z-index: 30;
  width: 280px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  /* Cor e espessura da barra (variante clara): ver SISTEMA DE BARRA DE
     ROLAGEM no topo do arquivo — quase nunca aparece (ver nota de
     altura logo abaixo), mas quando aparecer entra no mesmo sistema. */
  /* Sem overflow-x aqui de propósito: com overflow-y declarado e
     overflow-x omitido, a spec converte o "visible" implícito do eixo
     X em "auto" sozinha (é o mesmo motivo que fazia aparecer uma barra
     de rolagem horizontal quando .cal__campos vazava largura). Depois
     de fechar esse vazamento na origem (ver .cal__campo > span:first-child
     e os min-width:0 abaixo), scrollWidth == clientWidth nos quatro
     níveis medidos (#dash-popover, .popover-largo, .cal__coluna,
     .cal__campos) em 1280px e 390px — não sobra nada para rolar, então
     o "auto" implícito já cumpre o papel de salvaguarda sem precisar
     de uma regra escrita aqui: se um conteúdo futuro vazar de novo, a
     rolagem aparece de novo em vez de cortar/estourar o layout, sem
     exigir lembrar de declarar overflow-x à mão. */
  padding: 10px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: 0 18px 48px rgba(14, 22, 39, 0.22);
}
/* Customizado é um PAINEL, não mais uma segunda tela que substitui a
   primeira (era assim antes: escolher "Customizado" trocava a lista de
   atalhos pelo calendário, e a lista sumia). No modelo do Gabriel os
   atalhos continuam à vista — o calendário nasce do LADO deles. Por
   isso o popover ganha largura própria só neste estado (grid: coluna de
   atalhos + bloco do calendário) enquanto a tela de atalhos sozinha
   continua estreita. Classe marcada pelo JS (renderPopover) em vez de
   :has() — o painel evita depender de seletor recente demais num
   controle usado no celular, onde nem sempre dá pra escolher o
   navegador. */
/* A CAUSA de dias de "cliquei em Aplicar e o calendário ficou": a regra
   logo abaixo põe `display: flex` no popover customizado, e display de
   folha de AUTOR vence o `display: none` que o atributo [hidden] ganha
   da folha do NAVEGADOR — o JS fechava (hidden=true, URL voltava) e o
   modal continuava PINTADO. Só acontecia no customizado porque a tela de
   atalhos não define display nenhum. Regra de ouro: elemento que usa
   [hidden] e ganha display em alguma variante PRECISA desta guarda. */
.dash__popover[hidden] { display: none !important; }

.dash__popover--customizado {
  width: min(600px, calc(100vw - 32px));
  padding: 12px;
  /*
   * O orçamento de altura do modo compacto (ver @media 640px mais
   * abaixo) foi medido para caber INTEIRO em ~800px de viewport sem
   * rolar — mas o iPhone SE e afins têm ~667px, 133px a menos. Nessa
   * régua, Este Mês/Hoje/Ontem/.../Aplicar/Cancelar ficavam cortados
   * fora da tela: dava pra rolar, mas nada avisava que havia mais
   * embaixo, e Aplicar (a única ação que fecha o fluxo) sumia de vista.
   *
   * A correção não é caber sempre inteiro — viewport pode ser mais baixo
   * que qualquer orçamento fixo — é nunca deixar Aplicar/Cancelar saírem
   * da vista: o popover vira flex-column, só o corpo (.popover-largo)
   * rola quando não couber, e o rodapé fica PRESO embaixo dele.
   */
  display: flex;
  flex-direction: column;
}
/* min-height: 0 é o que permite um filho flex encolher abaixo do seu
   conteúdo e ativar o próprio overflow-y — sem isso o flex item cresce
   para caber tudo e o max-height do pai (.dash__popover) só empurra o
   POPOVER inteiro pra fora da tela, levando o rodapé junto. */
.dash__popover--customizado .popover-largo {
  overflow-y: auto;
  min-height: 0;
  /* Cor e espessura da barra (variante clara): ver SISTEMA DE BARRA DE
     ROLAGEM no topo do arquivo. */
}
/* flex-shrink: 0 garante que o rodapé nunca perde espaço para o corpo —
   é ele que tem que ficar de pé quando o aperto de altura chega. */
.dash__popover--customizado .popover-rodape { flex-shrink: 0; }
/* Atalhos à ESQUERDA (coluna estreita), calendário à DIREITA — invertido
   em relação à primeira versão (calendário à esquerda, atalhos à
   direita). O motivo é ALTURA, não gosto: sete atalhos empilhados dão
   uma coluna alta e ESTREITA; pôr essa coluna ao lado do calendário (em
   vez de abaixo dele, como acontecia no mobile) é o que evita somar as
   duas alturas — o popover fica tão alto quanto o mais alto dos dois
   lados, não a soma dos dois. */
.popover-largo {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 14px;
  align-items: start;
}
/* min-width: 0 é o que impede o grid de esticar a coluna pela largura
   "natural" do conteúdo (o calendário tem células com largura mínima
   implícita) — sem isso a coluna de atalhos era espremida antes de o
   calendário ceder. */
.cal__coluna { min-width: 0; }
/* Coluna dos atalhos dentro do painel largo: mesma lista de sempre,
   mais compacta e SEM rodapé próprio — Aplicar/Cancelar do painel
   largo inteiro moram embaixo dela (ver .popover-largo__atalhos). */
.popover-largo__atalhos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--linha);
  padding-right: 14px;
}
.popover-largo__atalhos .popover-lista { flex: 1 1 auto; }
.popover-largo__atalhos .popover-item { padding: 7px 9px; font-size: 12.5px; }

/* ---- Campos de data editáveis (topo do calendário customizado) --------- */
.cal__campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
/* min-width: 0 aqui é o mesmo motivo do .cal__coluna acima: célula de
   grid (1fr) por padrão não encolhe além da largura "natural" do
   conteúdo. O conteúdo aqui é .cal__campo-caixa, que é flex — e um
   flex item tem o mesmo problema um nível abaixo, por isso ele também
   precisa do próprio min-width: 0 (ver logo adiante). Sem os dois, os
   428px que os dois campos pedem vazam para fora dos 392px que a
   coluna do calendário tem, e o vazamento sobe até virar a barra de
   rolagem horizontal do popover inteiro. */
.cal__campo { display: block; min-width: 0; }
/* :first-child (não só ".cal__campo > span") é o que faltava: o rótulo
   "Início"/"Fim" É um <span>, mas a caixa logo abaixo dele TAMBÉM é um
   <span> (.cal__campo-caixa, por semântica dentro de <label>) — as duas
   são filhas diretas de .cal__campo. Sem :first-child, esta regra caía
   nas duas com a MESMA especificidade de .cal__campo-caixa (uma classe
   + um elemento nos dois casos) e, por vir primeiro no arquivo, perdia
   a cascata só na aparência — na prática ela ainda tinha empate de
   pontuação e a ordem decidia, sobrescrevendo o display:flex da caixa
   para display:block. Resultado: ícone e input empilhavam em vez de
   ficar lado a lado, e a altura extra dessa pilha era o que sobrava
   como largura pro texto — o vazamento horizontal do popover nascia
   aqui, não só na falta de min-width. */
.cal__campo > span:first-child {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cal__campo-caixa {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  transition: border-color 120ms ease;
}
.cal__campo-caixa:focus-within { border-color: var(--blue); }
.cal__campo-caixa svg { width: 14px; height: 14px; flex: none; color: var(--ink-2); }
.cal__campo-caixa input {
  flex: 1;
  min-width: 0;
  padding: 7px 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: none;
}
/* Campo com data inválida ou fora de ordem: borda vermelha na CAIXA (o
   componente de interface, regra dos 3:1) — o texto de erro embaixo é
   quem carrega a explicação, ver .cal__campo-erro. */
.cal__campo-caixa--invalido { border-color: var(--vermelho); }
.cal__campo-erro {
  grid-column: 1 / -1;
  margin: -4px 0 4px;
  font-size: 12px;
  color: var(--vermelho);
}
.cal__campo-erro[hidden] { display: none; }

/* ---- Dois meses lado a lado (desktop) ----------------------------------- */
.cal__meses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cal__mes-topo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
}
/* "Setembro De 2026" (formato longo do toLocaleDateString) QUEBRAVA em
   duas linhas na largura estreita de cada mês, e como só um dos dois
   nomes quebrava, o cabeçalho dos dois meses ficava em alturas
   diferentes. Duas correções juntas: o "de" sai (app.js monta o texto
   como "Setembro 2026", sem preposição) e a fonte cai um pouco — a
   combinação cabe numa linha só mesmo no mês mais comprido do ano
   ("Setembro", "Dezembro"), então as duas alturas de cabeçalho sempre
   batem. */
.cal__mes-topo strong {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink);
  text-transform: capitalize;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* app.js SEMPRE desenha as duas setas (‹ e ›) em todo mês — quem decide
   qual aparece onde é este CSS, porque a regra muda por tela (ver o
   comentário grande em htmlMes, app.js):

     DESKTOP: cada mês mostra só a seta que aponta pra FORA do par — a
     ‹ do primeiro mês, a › do último. As duas do meio (a › do primeiro,
     a ‹ do segundo) escondem: apontariam pro mesmo lugar uma da outra.

     MOBILE: o único mês visível (o outro tem data-cal-mes-oculto)
     precisa das duas — a regra "por posição" do desktop não vale mais
     porque não há um segundo mês pra completar o par. */
.cal__mes[data-cal-mes-primeiro] .cal__nav--dir,
.cal__mes[data-cal-mes-ultimo] .cal__nav--esq {
  visibility: hidden;
}

@media (max-width: 640px) {
  /* Um mês por vez no celular (pedido explícito do Gabriel): dois
     calendários de 7 colunas cada, lado a lado, em 390px de tela viram
     números ilegíveis — é o mesmo motivo que faz Airbnb/Booking
     colapsarem para um mês só abaixo de um certo breakpoint. As setas
     dos dois meses viram UMA seta de cada lado do mês único, e a coluna
     de atalhos desce para BAIXO do calendário (a pessoa ainda vê os
     atalhos, só que rolando, não ao lado — não há largura para os
     dois lado a lado). */
  .dash__popover--customizado { width: calc(100vw - 32px); padding: 10px; }
  /* No celular o calendário (campos + mês + dica) e a lista de atalhos
     empilham em vez de ficar lado a lado (ver .popover-largo abaixo) —
     as alturas se SOMAM, diferente do desktop onde ficam lado a lado e
     o popover fica tão alto quanto o MAIOR dos dois. É por isso que o
     aperto de espaçamento aqui é mais agressivo que o do desktop. */
  .cal__campos { margin-bottom: 8px; }
  .cal__meses { margin-bottom: 4px; }
  .cal__dica { margin-top: 4px; padding-top: 6px; }
  /* No desktop o grid é "atalhos | calendário" (168px 1fr) — aqui vira
     coluna única, e como os atalhos vêm ANTES do calendário na ordem do
     grid (ver popover-largo__atalhos no HTML/app.js), colapsar para 1fr
     os empilharia ACIMA do calendário. Isso inverteria a ordem visual
     que o mobile já tinha (calendário primeiro, atalhos por último,
     rolando) — order:1 mantém o calendário em cima também no celular. */
  .popover-largo { grid-template-columns: 1fr; }
  .cal__coluna { order: 1; }
  .popover-largo__atalhos {
    order: 2;
    border-right: 0;
    padding-right: 0;
    border-top: 1px solid var(--linha);
    padding-top: 8px;
    margin-top: 2px;
  }
  /* 7 atalhos empilhados abaixo do calendário inteiro são o segundo
     maior bloco de altura no celular (~24px por item aqui, vs. ~34px
     antes) — ainda dentro de um alvo de toque razoável, e é o que fecha
     a conta para caber em ~800px de viewport sem rolagem interna. */
  .popover-largo__atalhos .popover-item { padding: 5px 10px; font-size: 13px; }
  .popover-largo__atalhos .popover-lista { gap: 0; }
  .cal__meses { grid-template-columns: 1fr; }
  /* Some o mês oculto por completo (não só visualmente) — ver
     data-cal-mes-oculto em app.js: sem isto ele continua no layout de
     coluna única e empilha embaixo do primeiro. */
  .cal__mes[data-cal-mes-oculto] { display: none; }
  /* O mês único visível recupera as duas setas — ver comentário acima
     de .cal__mes[data-cal-mes-primeiro]: a regra "esconde a de dentro
     do par" só faz sentido quando os dois meses do par estão à vista. */
  .cal__mes:not([data-cal-mes-oculto]) .cal__nav { visibility: visible; }
  .cal__campos { grid-template-columns: 1fr; }
}

/* ---- Tela 1: lista de atalhos ------------------------------------------- */
.popover-lista { display: grid; gap: 2px; }
.popover-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--raio-s);
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease;
}
.popover-item:hover { background: var(--off); }
.popover-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* Ativo: fundo azul-névoa + texto azul da marca — NÃO o roxo do print
   de referência. --f-aguardando (roxo) já é "aguardando" no funil;
   usar a mesma cor aqui pra "período ativo" criaria uma segunda leitura
   pro mesmo roxo, e o painel deixaria de ser um sistema de cores. */
.popover-item--ativo { background: var(--blue-nevoa); color: var(--blue-escuro); }
.popover-item__check {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--blue);
  opacity: 0;
}
.popover-item--ativo .popover-item__check { opacity: 1; }

/* ---- Rodapé: Aplicar / Cancelar, comum às duas telas -------------------- */
.popover-rodape {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
}
.popover-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--raio-s);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.popover-btn--principal { border: 1px solid var(--blue); background: var(--blue); color: var(--branco); }
.popover-btn--principal:hover { background: var(--blue-escuro); border-color: var(--blue-escuro); }
.popover-btn--contorno { border: 1px solid var(--linha); background: var(--branco); color: var(--ink); }
.popover-btn--contorno:hover { background: var(--off); }
.popover-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- Navegação do mês ----------------------------------------------------
   Não existe mais botão "Voltar aos atalhos": no modelo do Gabriel os
   atalhos NUNCA somem, então não há de onde "voltar". A seta ‹ mora só
   no primeiro mês e a › só no último — ver .cal__mes-nav-vazio, que
   reserva o mesmo espaço nos meses sem seta pra não desalinhar o nome. */
.cal__nav {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 7px;
  background: var(--branco);
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.cal__nav:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-nevoa); }
.cal__nav:disabled { opacity: .3; cursor: default; }
.cal__semana, .cal__grade { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__semana { margin-bottom: 2px; }
.cal__semana span {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding: 2px 0;
}
/* Altura da célula de dia: era 38px (6 linhas de grade = até 228px só
   nisso, o maior peso da caixa de 704px reprovada). 30px com números
   levemente menores (13.5px -> 12.5px) ainda tem alvo de clique
   confortável e cabe com folga em 800px de viewport — ver o orçamento
   de altura completo no comentário de .dash__popover. */
.cal__grade { row-gap: 2px; }
.cal__dia {
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: none;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  transition: background 100ms ease;
}
.cal__dia:hover:not(:disabled) { background: var(--blue-nevoa); }
.cal__dia:disabled { color: #c8cdd6; cursor: default; }
/* A faixa do intervalo é contínua (sem raio no meio); as pontas fecham
   o trilho com o azul cheio. */
.cal__dia--faixa { background: var(--blue-nevoa); border-radius: 0; }
.cal__dia--ponta {
  background: var(--blue);
  color: var(--branco);
  border-radius: 7px;
  font-weight: 700;
}
.cal__dia--ponta:hover:not(:disabled) { background: var(--blue-escuro); }
.cal__dica {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
  font-size: 11.5px;
  color: var(--ink-2);
}
/* A dica já fechou a seção com uma borda — o rodapé Aplicar/Cancelar
   que vem logo depois não precisa de uma segunda, senão vira duas
   linhas coladas sem nada entre elas. */
.cal__dica + .popover-rodape { border-top: 0; padding-top: 2px; }

/* Aviso/confirmação: texto corrido, com quebras de linha respeitadas
   (as mensagens vêm em várias linhas, como "N importados / N pulados"). */
.aviso__texto { font-size: 13.5px; color: var(--ink); line-height: 1.5; white-space: pre-line; }
.modal__caixa--mini .modal__acoes { padding: 16px 0 0; }

/* Modais "mini" (Reunião, Histórico) — caixa menor que a ficha, porque
   carregam UM assunto; a largura da ficha os faria parecer vazios. */
.modal__caixa--mini {
  width: min(420px, 100%);
  padding: 20px 22px 22px;
}
.mini__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mini__topo h2 { font-size: 16px; color: var(--ink); }
.mini__corpo .reuniao { margin-top: 0; margin-bottom: 12px; }
.mini__nota { margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.ficha__dados--mini { margin: 0; }

/* Linha-resumo da ficha que abre um modal — lê como linha de dado, mas
   convida ao clique. */
.ver-mais {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--branco);
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.ver-mais:hover { border-color: var(--blue); }
.ver-mais__dica {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Campo de colar o link do Meet — só aparece em reunião online
   confirmada e ainda sem sala. */
.form-link {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.form-link__campo {
  flex: 1 1 200px;
  padding: 7px 10px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: var(--mono);
}
.form-link__campo:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.form-link__botao {
  padding: 7px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: var(--branco);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.form-link__botao:hover { background: var(--blue-escuro); }
.form-link__botao:disabled { opacity: 0.6; cursor: default; }
.form-link__aviso { flex-basis: 100%; color: var(--vermelho); font-size: 12px; }

.reuniao {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #eef4ff;
  border: 1px solid #d3e0f7;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--f-follow);
}

.reuniao__icone { font-size: 11px; }
.reuniao__quando { font-weight: 700; }

.reuniao__link {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--f-follow);
  color: #fff;
  text-decoration: none;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.reuniao__link:hover { background: var(--blue-escuro); }

/* Cancelada continua visível, riscada: "ele cancelou" é informação de
   trabalho — sumir com o registro faria parecer que nunca marcou. */
.reuniao--cancelada {
  background: #fdecea;
  border-color: #f5c6c2;
  color: var(--f-perdido);
}
.reuniao--cancelada .reuniao__quando { text-decoration: line-through; }
.reuniao__aviso {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Já aconteceu: perde o destaque, vira registro. */
.reuniao--passada {
  background: var(--off);
  border-color: var(--linha);
  color: var(--ink-2);
}
.reuniao--passada .reuniao__link { background: var(--ink-2); }

/* Na lista, embaixo do "recebido". */
.celula-reuniao {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--f-follow);
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================================
   Personalização — fotos da LP.

   Vive no mesmo território visual do resto do painel: cartão branco com
   --sombra, rótulos em mono maiúsculo, --blue nas ações principais. O
   único elemento novo de verdade é o recorte — o resto (grade de
   cartões, modal) reusa exatamente os componentes que já existem.
   ========================================================================= */
.midia-aviso {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--raio-s);
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--vermelho);
  font-size: 13px;
}
.midia-aviso[hidden] { display: none; }

/* Cartões mais estreitos que a grade antiga (240 x 280): a foto
   passa a mandar na proporção real do slot, não num 16/10 genérico
   igual pros três — três cartões largos e vazios era o problema. */
.midia-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.midia-carregando {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-2);
}

.midia-card {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

/* Altura FIXA para os três cartões nascerem do mesmo tamanho — antes
   cada moldura tinha a altura da proporção do próprio slot (2.56:1,
   1.66:1, 2:3) e empurrava título/botões para linhas diferentes entre
   os cartões, e desalinhava a grade inteira. A proporção real do
   slot continua visível (é informação útil: diferencia hero panorâmico
   de retrato vertical à primeira vista) porque quem carrega o
   aspect-ratio agora é o <img> por dentro, em object-fit: contain — a
   foto aparece inteira e centralizada dentro da moldura de altura
   igual, em vez de a moldura variar com a foto. */
.midia-card__foto {
  position: relative;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, var(--linha) 0 1px, transparent 1px 9px),
    var(--off);
  border-bottom: 1px solid var(--linha);
  overflow: hidden;
}
.midia-card__foto img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Estado vazio: só quando NEM o arquivo padrão existe (ver
   midiaFotoAusente em app.js) — já diz o que está acontecendo, em vez
   de só um ícone cinza no meio de um retângulo cinza. */
.midia-card__sem-foto {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-2);
}
.midia-card__sem-foto svg { width: 26px; height: 26px; opacity: 0.35; }
.midia-card__sem-foto span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.midia-card__corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }

/* O título é a âncora do card (qual foto é essa) — ganha peso, o
   "onde aparece" vira apoio pequeno logo abaixo, sem competir. */
.midia-card__titulo { font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.midia-card__onde { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; line-height: 1.4; }

/* "Medida" é apoio técnico, não um rótulo do funil — tira o mono
   maiúsculo pesado, que competia com o título por atenção. */
.midia-card__fatos {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--ink-2);
}
.midia-card__fatos > div { display: flex; justify-content: space-between; gap: 10px; }
.midia-card__fatos dt { color: var(--ink-2); }
.midia-card__fatos dd { color: var(--ink); text-align: right; }

/* "usando a foto padrão" é o estado inicial de todo slot novo — merece
   ler-se, não apagar no cinza do texto secundário. */
.midia-card__fatos dd.midia-card__padrao {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}

.midia-card__aviso {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: var(--raio-s);
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--vermelho);
  font-size: 12px;
}

/* Resultado de "Trocar foto" / "Voltar à foto padrão" — mesma linguagem
   visual de .midia-card__aviso (erro), com uma variante verde para
   sucesso. Some sozinha (ver avisarCardMidia em app.js), por isso não
   precisa de botão de fechar. */
.midia-card__status {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: var(--raio-s);
  font-size: 12px;
  line-height: 1.4;
}
.midia-card__status[hidden] { display: none; }
.midia-card__status--sucesso {
  background: #e8f3ee;
  border: 1px solid #bfe0d1;
  color: var(--verde);
}
.midia-card__status--erro {
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--vermelho);
}

/* Ações do card, empurradas para o fim dele (margin-top: auto no
   wrapper, não em cada botão) — com um ou dois botões, ficam sempre
   coladas na base, e não descolam uma da outra se o card crescer. */
.midia-card__acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  margin-top: auto;
}

/* O botão de trocar é a ação primária do card — ocupa a largura toda em
   vez de um botão pequeno perdido no canto esquerdo. */
.midia-card__trocar {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 44px;
}

/*
 * "Voltar à foto padrão" é destrutivo (some com a foto publicada) —
 * confirmação em window.confirm() antes do DELETE (ver app.js). O botão
 * fica desabilitado só durante a própria requisição, para o duplo clique
 * não disparar dois DELETE em sequência.
 */
.midia-card__restaurar {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 40px;
  font-size: 13px;
}

/* Sem foto publicada, o botão fica visível mas desabilitado — em vez de
   sumir — para a Tainana descobrir que a função existe mesmo num slot
   que nunca trocou. O title já explica o motivo ao passar o mouse; aqui
   só o estado visual (opacidade + cursor) para não parecer quebrado. */
.midia-card__restaurar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =========================================================================
   Modal de recorte — moldura travada na proporção do slot.
   ========================================================================= */
.modal__caixa--recorte,
.modal__caixa--preview { width: min(640px, 100%); }

/* O passo de ajuste vira uma coluna flex com altura REAL travada na
   viewport — não só max-height. Isto importa: com só max-height, a caixa
   encolhe para o tamanho do CONTEÚDO, e o conteúdo (a moldura) só cresce
   se tiver espaço sobrando — nenhum dos dois nunca cresce primeiro,
   travando tudo num tamanho mínimo (foi o bug real do problema 1: a
   moldura de retrato-sobre saía minúscula mesmo com viewport alta). Com
   height fixo a caixa SEMPRE ocupa essa altura, #recorte-moldura-area
   (flex: 1 1 auto) recebe o espaço de verdade sobrando, e o JS mede um
   número que existe. 100dvh acompanha a barra de endereço/teclado do
   celular; 100vh é o "chão" para navegadores sem suporte a dvh. */
.modal__caixa--recorte {
  max-height: min(92vh, 92dvh);
}
/* Altura REAL (não só teto) só durante o passo de ajuste — ver o
   comentário acima. O passo de revisar (prévia + salvar) não precisa
   disso: o conteúdo dele já é curto, então volta a valer só o teto
   comum de .modal__caixa (senão sobraria um vão vazio embaixo). A classe
   é alternada em JS junto com a troca de passo (abrirModalRecorte,
   recorte-voltar-ajuste, recorte-confirmar). */
.modal__caixa--recorte.recorte--passo-ajuste {
  display: flex;
  flex-direction: column;
  height: min(680px, 92vh, 92dvh);
}
#recorte-passo-ajuste {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* sem isto o flex item não encolhe abaixo do conteúdo */
  overflow: hidden;
}

.recorte__medida {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.recorte__corpo { padding: 20px 22px 22px; }
.recorte__corpo[hidden] { display: none; }

.recorte__instrucao {
  flex: 0 0 auto;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--ink-2);
}

.recorte__moldura-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fundo escuro: a mesma convenção de qualquer editor de recorte —
     separa visualmente "o que sai da foto" de "a moldura que fica". */
  background: var(--navy-deep);
  border-radius: var(--raio-s);
  padding: 14px;
  /* flex: 1 1 auto dentro da coluna de #recorte-passo-ajuste: esta área
     absorve TODO o espaço que sobrar depois de instrução, zoom e botões
     — é o retângulo que o JS mede (getBoundingClientRect) para decidir
     o tamanho do palco. min-height: 0 é o que permite essa área encolher
     abaixo do "tamanho natural" do conteúdo em vez de estourar o pai. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Palco: o JS define width/height em px exatos (o tamanho que coube na
   viewport). As camadas de dentro só precisam preencher 100% dele —
   nunca calculam o próprio tamanho, então nunca desalinham entre si. */
.recorte__palco {
  position: relative;
  flex: 0 0 auto;
}

/* As duas camadas (imagem embaixo, overlay de seleção em cima) ocupam
   exatamente o mesmo retângulo — como duas folhas de acetato alinhadas. */
.recorte__canvas-camada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  display: block;
}
#recorte-canvas-imagem {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
#recorte-canvas-overlay {
  cursor: grab;
  touch-action: none; /* o próprio JS decide arraste x pinça x rolagem */
}
#recorte-canvas-overlay:active,
.recorte-canvas--arrastando { cursor: grabbing; }
#recorte-canvas-overlay:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Alças de canto — estilo WhatsApp/Instagram: quadrado branco com borda,
   44px de alvo de toque (a marca visível é menor, só o alvo é grande). */
.recorte__alca {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  touch-action: none;
}
.recorte__alca::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--branco);
  border: 2px solid var(--navy);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(14, 22, 39, 0.35);
}
.recorte__alca[data-alca="no"] { cursor: nwse-resize; }
.recorte__alca[data-alca="no"]::before { top: 13px; left: 13px; }
.recorte__alca[data-alca="ne"] { cursor: nesw-resize; }
.recorte__alca[data-alca="ne"]::before { top: 13px; right: 13px; }
.recorte__alca[data-alca="se"] { cursor: nwse-resize; }
.recorte__alca[data-alca="se"]::before { bottom: 13px; right: 13px; }
.recorte__alca[data-alca="so"] { cursor: nesw-resize; }
.recorte__alca[data-alca="so"]::before { bottom: 13px; left: 13px; }

.recorte__zoom {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.recorte__zoom-botao {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--branco);
  color: var(--navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.recorte__zoom-botao:hover { background: var(--off); }

#recorte-zoom-slider {
  flex: 1 1 auto;
  accent-color: var(--blue);
}

.recorte__erro {
  flex: 0 0 auto;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--raio-s);
  background: #fdecea;
  border: 1px solid #f5c6c2;
  color: var(--vermelho);
  font-size: 13px;
}
.recorte__erro[hidden] { display: none; }

#recorte-passo-ajuste .modal__acoes { flex: 0 0 auto; margin-top: 14px; }

.modal__acoes--revisar { flex-wrap: wrap; }

/* ---------- Passo 2: revisar ---------- */
.recorte__revisar-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 6px;
}
@media (max-width: 560px) {
  .recorte__revisar-grade { grid-template-columns: 1fr; }
}

.recorte__resultado { display: flex; flex-direction: column; gap: 8px; }
.recorte__resultado img {
  width: 100%;
  border-radius: var(--raio-s);
  border: 1px solid var(--linha);
  display: block;
}
.recorte__resultado figcaption {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.recorte__preview-layout,
.recorte__preview-corpo { display: flex; align-items: center; justify-content: center; }
.recorte__preview-corpo { padding: 22px; }

/* =========================================================================
   Maquete de layout — reprodução FIEL da dobra real da LP (não a LP
   embutida: ver o comentário de montarPreviewLayout em app.js), com o
   TEXTO VERDADEIRO por cima da foto. Antes eram barrinhas cinzas
   fingindo texto, e isso não respondia à única pergunta que este preview
   existe para responder: "o rosto fica coberto pelo H1?" Só o H1 de
   verdade, no tamanho real, responde isso.
   ========================================================================= */
.preview-maquete {
  width: 100%;
  border-radius: var(--raio-s);
  overflow: hidden;
  border: 1px solid var(--linha);
  background: var(--navy);
  position: relative;
}

/* Proporção do card ≈ a do slot hero-desktop (1600×625) — a família
   inteira (desktop e mobile) usa a mesma maquete: os dois são a mesma
   foto de fundo full-bleed na LP, só o recorte de origem muda. */
.preview-maquete--hero { aspect-ratio: 16 / 6.25; }
.preview-maquete__hero-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Mesmo object-position do desktop real (.hero__foto em
     analise-risco-patrimonial-sp.astro): a foto fica ancorada à direita,
     deixando a esquerda livre para o texto — é essa relação foto/texto
     que a Tainana precisa avaliar aqui. */
  object-position: right center;
}
/* Véu escuro de baixo para cima, mais forte onde o texto pousa — a
   MESMA curva de .hero (radial + linear navy) do site real, sem a qual
   a metade de cima da foto não aparece escurecida no preview. */
.preview-maquete__hero-faixa {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 22, 39, 0.82) 0%, rgba(14, 22, 39, 0.45) 45%, rgba(14, 22, 39, 0.08) 75%),
    linear-gradient(180deg, rgba(14, 22, 39, 0.25) 0%, rgba(14, 22, 39, 0.15) 40%, rgba(14, 22, 39, 0.55) 100%);
}
.preview-maquete__hero-conteudo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 5% 6%;
  width: 56%;
  text-align: left;
}

.preview-maquete__rotulo-real {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* H1 REAL — a mesma frase, quebra e destaque em dourado do hero da LP
   (var(--gold), o mesmo amarelo do CTA e do highlight real). Tamanho
   fluido: o card muda de largura conforme o modal (pequeno x grande),
   e clamp() evita medir em px fixo o que na LP é var(--fs-display-1). */
.preview-maquete__h1-real {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(13px, 2.6vw, 22px);
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
}
.preview-maquete__destaque { color: var(--gold); }

.preview-maquete__botao-real {
  align-self: flex-start;
  margin-top: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--gold);
  color: #3d2600;
  font-family: var(--sans);
  font-size: clamp(10px, 1.3vw, 13px);
  font-weight: 700;
}

.preview-maquete--sobre {
  display: flex;
  aspect-ratio: 16 / 10;
  background: var(--branco);
}
/* 38% do card ≈ a proporção de 380px (max-width real do retrato na LP)
   contra a medida de leitura ao lado — não é o px exato porque o card
   muda de tamanho, mas a RELAÇÃO foto/texto é a mesma. */
.preview-maquete__retrato {
  flex: 0 0 38%;
  background: var(--off);
}
.preview-maquete__retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-maquete__texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 6% 8%;
  text-align: left;
}

.preview-maquete__eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.preview-maquete__titulo-real {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(12px, 1.8vw, 17px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy);
}

.preview-maquete__corpo-real {
  margin: 0;
  font-size: clamp(9.5px, 1.15vw, 12px);
  line-height: 1.5;
  color: var(--ink-2);
  /* Só a abertura do primeiro parágrafo real — a maquete mostra o
     enquadramento junto do texto que realmente abre a página, não o
     bloco de prosa inteiro (que na LP nem fica ao lado da foto). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .midia-grade { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .modal__caixa--recorte, .modal__caixa--preview { animation: none; }
}

/* =========================================================================
   VISTA AGENDA — calendário no modelo iPhone: MÊS (grade) e DIA (linha
   do tempo). Ver docs/CONTRATO-CALENDARIO-NO-PAINEL.md para o porquê da
   vista existir no painel e não no site.
   ========================================================================= */

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

.agenda__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 40px = alvo de toque mínimo do contrato, não estética. */
.agenda__nav-botao {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--navy);
  cursor: pointer;
}
.agenda__nav-botao:hover { background: var(--off); }
.agenda__nav-botao svg { width: 18px; height: 18px; }

.agenda__titulo-mes {
  min-width: 148px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  /* Sem text-transform: capitalize — maiusculiza TODA palavra e
     "agosto de 2026" viraria "Agosto De 2026" (lição já registrada em
     .dash__periodo-chip, neste mesmo arquivo). A inicial certa vem do JS. */
}

.agenda__hoje {
  height: 40px;
  padding: 0 14px;
  margin-left: 4px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.agenda__hoje:hover { background: var(--off); }

.agenda__horarios-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--raio-s);
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.agenda__horarios-botao:hover { background: var(--blue-escuro); }
.agenda__horarios-botao svg { width: 16px; height: 16px; }

/* ---------- MÊS ---------- */

.agenda__semana-rotulos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 2px 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
}

.agenda__grade-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
/* No PC o mês cabe SEMPRE na tela — como no iPhone: as fileiras dividem
   a altura disponível em vez de empurrar a página (relato real: em tela
   de notebook com zoom do Windows, o mês vazava para fora da área
   visível). 100dvh menos os descontos fixos acima/abaixo da grade
   (header, toolbar do mês, linha dos dias, legenda). A célula encolhe
   até 44px — alvo de toque mínimo; abaixo disso, tela baixa DEMAIS, a
   página rola, que é o fallback honesto. Só desktop: no celular a grade
   compacta já cabe, e altura forçada esmagaria os marcadores. */
@media (min-width: 641px) {
  .agenda__grade-mes {
    grid-auto-rows: minmax(44px, 1fr);
    height: calc(100dvh - 230px);
    min-height: 300px;
    max-height: 640px; /* em monitor alto, célula gigante vira deserto */
  }
  .agenda__grade-mes .agenda__dia-celula { min-height: 0; }
}

/* Célula do dia. min-height maior que os 40px de alvo de toque —
   precisa sobrar espaço para os pontos de marcador embaixo do número. */
.agenda__dia-celula {
  position: relative;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 8px 4px 6px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.agenda__dia-celula:hover { border-color: var(--blue); }

/* Dia fora do mês corrente: continua clicável (navegar direto para lá
   é útil na virada de semana), mas lido como "não é o foco agora". */
.agenda__dia-celula--fora {
  color: var(--ink-2);
  background: var(--off);
}

/* Dia com grade de trabalho ativa: fundo em nevoa azul — distinguir
   "dia que atende" de "dia fechado" é requisito explícito do contrato. */
.agenda__dia-celula--util {
  background: var(--blue-nevoa);
  border-color: #d5e2f6;
}
.agenda__dia-celula--util.agenda__dia-celula--fora { background: var(--off); border-color: var(--linha); }

.agenda__dia-celula--hoje {
  border-color: var(--gold-borda);
  box-shadow: inset 0 0 0 1px var(--gold-borda);
}

.agenda__dia-celula:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.agenda__dia-numero {
  font-size: 13.5px;
  font-weight: 700;
}
.agenda__dia-celula--hoje .agenda__dia-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
}

/* Marcadores do dia: pontos por padrão (1-3 agendamentos), contagem
   numérica a partir do 4º — bater o olho em "tem coisa" importa mais
   que contar pontos quando são muitos. */
.agenda__dia-marcadores {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 8px;
}

.agenda__ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.agenda__ponto--presencial { background: var(--ag-presencial); }
.agenda__ponto--online { background: var(--ag-online); }

.agenda__dia-mais {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-2);
}

.agenda__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
  font-size: 12px;
  color: var(--ink-2);
}
.agenda__legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.agenda__chip-trabalho {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--blue-nevoa);
  border: 1px solid #d5e2f6;
}

/* ---------- DIA ---------- */

.agenda__dia[hidden] { display: none; }

.agenda__dia-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.agenda__dia-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.agenda__dia-titulo {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  /* Sem text-transform: capitalize — mesma razão de .agenda__titulo-mes
     acima: maiusculizaria "feira" e "de" também. Inicial vem do JS. */
}
.agenda__dia-contagem {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

/* Linha do tempo 00h-23h. Uma hora = --agenda-hora-altura de pixels —
   a MESMA constante que o JS usa para posicionar os blocos (ver
   POSICIONAR_BLOCO em app.js), para nunca desalinhar grade e bloco. */
.agenda__linha-tempo {
  --agenda-hora-altura: 56px;
  position: relative;
  display: flex;
  /* Altura fixa das 24 horas + rolagem vertical própria (contrato:
     "vista DIA rola verticalmente pelas horas"). */
  height: calc(var(--agenda-hora-altura) * 24);
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
}

.agenda__horas {
  flex: 0 0 52px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--branco);
  border-right: 1px solid var(--linha);
}
.agenda__hora-rotulo {
  height: var(--agenda-hora-altura);
  padding: 0 8px 0 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-2);
  border-top: 1px solid var(--linha);
  box-sizing: border-box;
}
.agenda__hora-rotulo:first-child { border-top: 0; }
/* O rótulo fica CENTRADO na linha da hora (como no Google Agenda), não
   pendurado abaixo dela: pendurado, "14h" lia como o topo de uma faixa
   e um bloco das 14:15 parecia começar "antes das 14h". */
.agenda__hora-rotulo span {
  display: inline-block;
  line-height: 1;
  transform: translateY(-50%);
  background: var(--branco);
  padding: 0 2px;
}
.agenda__hora-rotulo:first-child span { transform: none; padding-top: 4px; }

.agenda__trilho {
  position: relative;
  flex: 1 1 auto;
  /* O trilho só tem filhos absolutos, então por si só não tem altura —
     e como o contêiner rola (overflow), o flex o esticava só até a área
     VISÍVEL (~500px), não até as 24h. Resultado: as linhas de hora do
     gradiente acabavam lá pelas 9h e o resto do dia ficava sem linha
     (bug real, 29/08/2026). A altura do dia inteiro, explícita, resolve. */
  min-height: calc(var(--agenda-hora-altura) * 24);
  /* Faixas horizontais a cada hora, só para dar referência visual ao
     rolar — os blocos é que carregam a posição real. */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--linha) 0,
    var(--linha) 1px,
    transparent 1px,
    transparent var(--agenda-hora-altura)
  );
}

.agenda__bloco {
  position: absolute;
  left: 6px;
  right: 6px;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.agenda__bloco:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.agenda__bloco--presencial {
  background: var(--ag-presencial-nevoa);
  border-left-color: var(--ag-presencial);
  color: #0a5544;
}
.agenda__bloco--online {
  background: var(--ag-online-nevoa);
  border-left-color: var(--ag-online);
  color: #453a8f;
}
/* Reunião curta (< 45 min): hora e nome lado a lado, numa linha só —
   empilhados, o nome não cabia e o bloco virava só "17:00". */
.agenda__bloco--curto {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 0;
  padding-bottom: 0;
}
.agenda__bloco--curto .agenda__bloco-hora,
.agenda__bloco--curto .agenda__bloco-nome { display: inline; }

.agenda__bloco-hora {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.agenda__bloco-nome {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda__dia-vazio {
  padding: 40px 16px;
  text-align: center;
  color: var(--ink-2);
  font-size: 13.5px;
}

/* ---------- Modal de detalhe do agendamento ---------- */

.agendamento-detalhe__linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 13.5px;
}
.agendamento-detalhe__linha:last-of-type { border-bottom: 0; }
.agendamento-detalhe__rotulo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.agendamento-detalhe__valor { color: var(--ink); text-align: right; }

.agendamento-detalhe__selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.agendamento-detalhe__selo--presencial { background: var(--ag-presencial-nevoa); color: #0a5544; }
.agendamento-detalhe__selo--online { background: var(--ag-online-nevoa); color: #453a8f; }

.agendamento-detalhe__acoes {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* Botão de ação destrutiva (cancelar reunião, remover faixa da grade).
   Vermelho do funil (--vermelho = "perdido") reaproveitado de propósito
   aqui: é o MESMO significado — "isto encerra algo" — então herdar a
   cor em vez de inventar um terceiro tom vermelho é a escolha coerente. */
.botao-principal--perigo {
  background: var(--vermelho);
}
.botao-principal--perigo:hover { background: #8f1e18; }

/* ---------- Modal Horários (configuração) ---------- */

.modal__caixa--horarios { width: min(680px, 100%); }

.agenda-config__corpo {
  padding: 4px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.agenda-config__secao { min-width: 0; }

.agenda-config__titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}

.agenda-config__dica {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.agenda-config__grade,
.agenda-config__lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.agenda-config__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--off);
  font-size: 13px;
}
.agenda-config__item-texto { flex: 1 1 auto; }
.agenda-config__item-sub { color: var(--ink-2); font-size: 11.5px; }
.agenda-config__item--inativo { opacity: 0.65; }

/* Ações de texto numa linha de lista (Editar / Remover / Reativar) —
   alvo de 40px de altura como o resto, sem virar botão pesado. */
.agenda-config__acao {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
}
.agenda-config__acao:hover { text-decoration: underline; }
.agenda-config__acao--perigo { color: var(--vermelho); }
.agenda-config__form-linha--inline {
  padding: 8px 10px;
  border: 1px solid var(--blue);
  border-radius: var(--raio-s);
  background: var(--blue-nevoa);
}

/* Remover uma faixa/bloqueio/tipo — alvo de toque 40px mesmo dentro de
   uma lista densa, porque é ação em lista repetida (contrato: alvos
   de toque >= 40px vale para TODO controle, não só os de destaque). */
.agenda-config__remover {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
  color: var(--vermelho);
  cursor: pointer;
}
.agenda-config__remover:hover { background: #fdecea; border-color: #f5c6c2; }

/* Expediente — sete linhas, uma por dia, no modelo "horário de
   trabalho". A linha inteira é clicável (abre o modal do dia); a caixa
   de marcar serve à edição em lote. */
.expediente {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.expediente__dia {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 10px;
  min-height: 46px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-s);
  background: var(--branco);
}
.expediente__dia--marcado { border-color: var(--blue); background: var(--blue-nevoa); }
.expediente__dia--fechado .expediente__nome { color: var(--ink-2); }
.expediente__check {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  cursor: pointer;
  flex: 0 0 auto;
}
.expediente__abrir {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.expediente__abrir:hover .expediente__nome { color: var(--blue); }
.expediente__nome { font-weight: 700; min-width: 72px; }
.expediente__horas { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.expediente__horas--fechado { font-style: italic; }
.expediente__acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.expediente__link {
  border: 0;
  background: none;
  padding: 6px 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
}
.expediente__link:hover { text-decoration: underline; }

/* Conferência da importação — tabela editável, larga porque tem 7
   colunas de dado; rola por dentro para o rodapé com o botão ficar fixo. */
.modal__caixa--importar { width: min(1100px, 100%); padding-bottom: 16px; }
.importar__resumo { padding: 0 22px 10px; font-size: 13px; color: var(--ink-2); }
.importar__tabela-caixa { max-height: 55vh; overflow: auto; margin: 0 22px; border: 1px solid var(--linha); border-radius: var(--raio-s); }
.importar__tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.importar__tabela th {
  position: sticky; top: 0; z-index: 1;
  background: var(--off);
  text-align: left;
  padding: 8px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.importar__tabela td { padding: 6px 8px; border-top: 1px solid var(--linha); vertical-align: middle; }
.importar__tabela input[type="text"],
.importar__tabela select {
  width: 100%;
  min-width: 110px;
  padding: 6px 8px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  background: var(--branco);
}
.importar__tabela input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); }
.importar__linha--existente td { background: #fff8e6; }
.importar__linha--erro td { background: #fdf3f2; }
.importar__situacao { font-size: 11.5px; line-height: 1.35; white-space: normal; min-width: 150px; }
.importar__situacao--ok { color: var(--verde); font-weight: 700; }
.importar__situacao--erro { color: var(--vermelho); }
.importar__situacao--existente { color: #9a6700; }
.importar__situacao small { display: block; color: var(--ink-2); }
.modal__caixa--importar .modal__acoes { padding: 14px 22px 0; }

/* Lista de reuniões presas a um tipo: nome + quando + duas ações. */
.tipo-agendado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 13px;
}
.tipo-agendado:last-child { border-bottom: 0; }
.tipo-agendado__quem { flex: 1 1 auto; min-width: 0; }
.tipo-agendado__quem strong { display: block; }
.tipo-agendado__quem span { color: var(--ink-2); font-size: 12px; }

/* Remarcar, passo 2: grade de horários livres, como no widget do site. */
.voltar-passo {
  border: 0;
  background: none;
  padding: 0 0 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.voltar-passo:hover { color: var(--ink); }
.remarcar-horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 8px;
  margin-top: 10px;
  max-height: 50vh;
  overflow-y: auto;
}
.remarcar-hora {
  min-height: 42px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--branco);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
}
.remarcar-hora:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-nevoa); }
.remarcar-hora:disabled { opacity: .5; cursor: default; }
.remarcar-horas__vazio { grid-column: 1 / -1; color: var(--ink-2); font-size: 13px; padding: 12px 0; }

/* Modal do expediente. */
.turno { display: grid; gap: 14px; }
.turno__dias { font-size: 13px; color: var(--ink-2); }
.turno__dias strong { color: var(--ink); }
.turno__opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  cursor: pointer;
}
.turno__opcao input { width: 18px; height: 18px; accent-color: var(--blue); }
.turno__campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.turno__opcao--larga { grid-column: 1 / -1; padding-top: 4px; }
.turno__campos[hidden] { display: none; }

.agenda-config__form-linha {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.campo--compacto { margin-bottom: 0; flex: 1 1 110px; min-width: 0; }
.campo--compacto.campo--larga { flex: 2 1 200px; }
.agenda-config__form-linha .botao-secundario { flex: 0 0 auto; height: 38px; }

/* ---------- Responsivo: 390px primeiro (contrato) ---------- */

@media (max-width: 640px) {
  .agenda__topo { flex-direction: column; align-items: stretch; }
  .agenda__nav { justify-content: center; }
  .agenda__horarios-botao { justify-content: center; }
  .agenda__dia-celula { min-height: 52px; }
  .agenda__linha-tempo { max-height: calc(100vh - 320px); }
  .agenda-config__form-linha { flex-direction: column; align-items: stretch; }
  .campo--compacto, .campo--compacto.campo--larga { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .agenda__dia-celula { transition: none; }
}