/* TOKENS VISUAIS (portar o protótipo, ticket 02): o único lugar onde mora cor, tamanho de texto e espaço. Valores
   idênticos ao `mock-ui/assets/tokens.css` e ao DESIGN.md ("marca-texto sobre papel-tinta"). O resto do arquivo e os
   templates só usam estes valores. O servidor escolhe o tema pelo cookie e escreve <html data-tema="claro|escuro">;
   sem o atributo vale o claro. Nunca escreva cor fixa fora daqui. Contraste de texto >= 4,5:1 nos dois temas; todo
   grifo leva --tinta-marca por cima e o significado nunca depende só da cor. */
:root {
  color-scheme: light;

  /* Papel e tinta */
  --papel: #f4f5fa;
  --papel-2: #ffffff;
  --papel-3: #eceef6;
  --linha: #d9dceb;
  --linha-forte: #b4b9d3;
  --borda-controle: #767da3;
  --tinta: #161a33;
  --tinta-2: #444a6e;
  --tinta-3: #5d6384;

  /* Casco (cabeçalho) */
  --casco: #1e2352;
  --casco-2: #2a3070;
  --casco-texto: #f4f5fa;
  --casco-texto-2: #bcc2e6;

  /* Ação primária e foco */
  --acao: #1e2352;
  --acao-texto: #ffffff;
  --acao-hover: #2b3270;
  --foco: #3a47d5;
  --link: #2a37c2;
  --acao-hover-casco: #fff08f;

  /* Grifos: preenchimento chapado, texto sempre em --tinta-marca */
  --tinta-marca: #161a33;
  --marca-atraso: #ff8fb8;
  --marca-hoje: #ffe45c;
  --marca-info: #7fddf2;
  --marca-ganho: #a6ec74;
  --marca-aviso: #ffb866;
  --marca-selecao: #cdb8ff;
  --marca-neutro: #e3e6f3;

  /* Fundos suaves dos estados (banners, linhas) */
  --fundo-atraso: #ffe6ef;
  --fundo-aviso: #fff1dc;
  --fundo-info: #def6fb;
  --fundo-ganho: #e7f9d9;
  --fundo-selecao: #ece4ff;
  --texto-erro: #9b1445;

  /* Tipografia: três tamanhos de trabalho + um de destaque */
  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans", Arial, sans-serif;
  --t-p: 0.8125rem;   /* 13px: meta, selos, rótulos */
  --t-m: 0.9375rem;   /* 15px: corpo e tabela */
  --t-g: 1.25rem;     /* 20px: título de tela e de bloco */
  --t-xg: 1.875rem;   /* 30px: nome do lead na Fila */
  --lh: 1.45;

  /* Espaço (base 4px) */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;

  /* Forma */
  --r: 6px;
  --r-g: 10px;
  --sombra-painel: 0 10px 28px -10px rgba(22, 26, 51, 0.28), 0 2px 6px -2px rgba(22, 26, 51, 0.12);
  --alvo: 32px;       /* alvo de clique de projeto (mínimo WCAG 2.2: 24px) */
  --alto-casco: 56px;
  --larg-painel: 420px;

  /* Nomes anteriores do app, apontando para os tokens do protótipo (as telas ainda não portadas seguem funcionando) */
  --fundo: var(--papel);
  --superficie: var(--papel-2);
  --superficie-2: var(--papel-3);
  --borda: var(--linha);
  --texto: var(--tinta);
  --texto-suave: var(--tinta-2);
  --destaque: var(--link);
  --sobre-destaque: var(--acao-texto);
  --realce: rgba(22, 26, 51, 0.04);
  --sombra: var(--sombra-painel);
  --raio: var(--r-g);
  --estado-atraso: var(--texto-erro);
  --estado-hoje: #6b4a00;
  --estado-info: var(--link);
  --estado-neutro: var(--tinta-3);
  --estado-ganho: #17683a;
  --perigo: var(--texto-erro);
  --fonte-meta: var(--t-p);
  --fonte-corpo: var(--t-m);
  --fonte-titulo: var(--t-g);
  --alvo-botao: var(--alvo);
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --papel: #12152b;
  --papel-2: #1a1e3a;
  --papel-3: #232850;
  --linha: #2e3466;
  --linha-forte: #474f8c;
  --borda-controle: #6a72b4;
  --tinta: #eef0fa;
  --tinta-2: #b6bbd8;
  --tinta-3: #959bc0;

  --casco: #0b0d1e;
  --casco-2: #1a1e3a;
  --casco-texto: #eef0fa;
  --casco-texto-2: #a9afd3;

  --acao: #ffe45c;
  --acao-texto: #161a33;
  --acao-hover: #fff08f;
  --foco: #9fadff;
  --link: #a9b6ff;

  --marca-neutro: #2f3568;
  --fundo-atraso: #3a1a33;
  --fundo-aviso: #3a2a1c;
  --fundo-info: #14323f;
  --fundo-ganho: #1f3320;
  --fundo-selecao: #2c2766;
  --texto-erro: #ff9fc0;
  --sombra-painel: 0 10px 28px -10px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.4);

  --realce: rgba(255, 255, 255, 0.04);
  --estado-hoje: #ffe45c;
  --estado-ganho: #8fe07a;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-casco) + var(--e4)); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 var(--t-m)/var(--lh) var(--fonte);
  font-variant-numeric: tabular-nums;
  caret-color: var(--foco);
  min-height: 100vh;
}
::selection { background: var(--marca-selecao); color: var(--tinta-marca); }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--t-g); }
h2 { font-size: var(--t-m); }
h3 { font-size: var(--t-p); }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:where(a:visited) { color: var(--link); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 3px; }
b, strong { font-weight: 650; }
code { font: 0.85em ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--papel-3); padding: 1px 5px; border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
[hidden] { display: none !important; }
.icone { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* ---------- Casco (cabeçalho fixo) ---------- */
.casco {
  position: sticky; top: 0; z-index: 50; height: var(--alto-casco);
  display: flex; align-items: center; gap: var(--e5); padding: 0 var(--e5);
  background: var(--casco); color: var(--casco-texto);
}
.marca { display: inline-flex; align-items: center; gap: var(--e2); color: var(--casco-texto); font-weight: 700; font-size: var(--t-m); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.marca-traco { position: relative; isolation: isolate; padding: 0 6px; color: var(--tinta-marca); }
.marca-traco::before { content: ""; position: absolute; inset: 1px 0; z-index: -1; background: var(--marca-hoje); border-radius: 3px 7px 4px 8px / 7px 4px 8px 4px; transform: rotate(-2deg) skewX(-8deg); }
.nav-principal { display: flex; align-items: center; gap: var(--e1); height: 100%; }
.nav-principal a {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--e2);
  min-height: var(--alvo); padding: 0 var(--e3); color: var(--casco-texto-2); font-size: var(--t-m); font-weight: 600; text-decoration: none;
}
.nav-principal a:hover { color: var(--casco-texto); }
.nav-principal a[aria-current="page"] { color: var(--tinta-marca); }
.nav-principal a[aria-current="page"]::before { content: ""; position: absolute; inset: 3px 2px; z-index: -1; background: var(--marca-hoje); border-radius: 3px 8px 4px 9px / 8px 4px 9px 4px; transform: rotate(-1deg) skewX(-6deg); }
.casco :focus-visible { outline-color: var(--marca-hoje); }

.topo-direita { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }
.topo-direita form { margin: 0; }
.frescor { display: inline-flex; align-items: center; gap: var(--e2); margin: 0; color: var(--casco-texto-2); font-size: var(--t-p); white-space: nowrap; }
.selo-desatualizado { padding: 0 6px; border-radius: 3px; background: var(--marca-aviso); color: var(--tinta-marca); font-size: var(--t-p); font-weight: 650; }
.casco .botao-discreto { color: var(--casco-texto); }
.casco .botao-discreto:hover { background: var(--casco-2); }
.casco .botao { background: var(--marca-hoje); color: var(--tinta-marca); }
.casco .botao:hover { background: var(--acao-hover-casco); }
.casco [disabled] { opacity: 0.5; cursor: default; }

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + var(--e2)); z-index: 60; min-width: 240px; max-height: 75vh; overflow: auto;
  display: grid; gap: 2px; padding: var(--e2);
  background: var(--papel-2); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--r-g); box-shadow: var(--sombra-painel);
}
.menu-lista a, .menu-lista button {
  display: flex; align-items: center; gap: var(--e2); width: 100%; min-height: var(--alvo); padding: 0 var(--e3);
  border: 0; border-radius: var(--r); background: none; color: var(--tinta); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-lista a:hover, .menu-lista button:hover { background: var(--papel-3); }
.menu-lista form { margin: 0; }
.menu-lista hr { width: 100%; margin: var(--e1) 0; border: 0; border-top: 1px solid var(--linha); }
.menu-grupo { padding: var(--e2) var(--e3) 2px; color: var(--tinta-3); font-size: var(--t-p); font-weight: 600; }

/* ---------- Banners (logo abaixo do casco, em toda tela) ---------- */
.banners { display: grid; gap: var(--e2); padding: var(--e3) var(--e5) 0; }
.banners:empty { display: none; }
.banner {
  display: flex; align-items: flex-start; gap: var(--e3); margin: 0 0 var(--e4); padding: var(--e3) var(--e4);
  background: var(--fundo-atraso); color: var(--tinta); border: 1px solid var(--marca-atraso); border-radius: var(--r); font-size: var(--t-m);
}
.banners .banner { margin: 0; }
.banner > .icone { margin-top: 3px; color: var(--texto-erro); }
.banner-brando { background: var(--fundo-aviso); border-color: var(--marca-aviso); color: var(--tinta); }
.banner-brando > .icone { color: var(--tinta); }

/* ---------- Página ---------- */
.conteudo { padding: var(--e5); }
.vazio { margin-top: var(--e8); color: var(--tinta-2); text-align: center; }
.cartao { background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r-g); padding: var(--e5); }
.login { max-width: 22rem; margin: 12vh auto 0; display: grid; gap: var(--e2); }
.login h1 { margin: 0 0 var(--e3); }
.erro { margin: 0 0 var(--e2); color: var(--texto-erro); }
.suave { color: var(--tinta-2); font-weight: normal; }

/* ---------- Campos e botões ---------- */
label { color: var(--tinta-2); font-size: var(--t-p); font-weight: 600; }
input {
  width: 100%; min-height: var(--alvo); padding: 4px var(--e3);
  background: var(--papel-2); color: var(--tinta); border: 1px solid var(--borda-controle); border-radius: var(--r); font: inherit;
}
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
input:focus-visible, .botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acao); }
:root[data-tema="escuro"] input[type="checkbox"], :root[data-tema="escuro"] input[type="radio"] { accent-color: var(--marca-hoje); }

.botao, .botao-discreto {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--alvo); margin-top: var(--e2); padding: 0 var(--e4);
  border: 1px solid transparent; border-radius: var(--r);
  font: 600 var(--t-m)/1 var(--fonte); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.12s ease-out, border-color 0.12s ease-out;
}
.botao { background: var(--acao); color: var(--acao-texto); }
.botao:hover { background: var(--acao-hover); }
a.botao { text-decoration: none; }
.botao-discreto { margin: 0; padding: 0 var(--e3); background: transparent; color: var(--tinta); }
.botao-discreto:hover { background: var(--papel-3); }
.botao.botao-discreto { border-color: var(--borda-controle); }
/* Botão de navegação que não leva a lugar nenhum (o período seguinte sairia dos anos aceitos): sem clique, apagado. */
.botao[data-desligado] { opacity: 0.5; cursor: default; }
.botao[disabled], .botao-discreto[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Ticket 03: atualização, faixas e cartões de lead */
.frescor { margin: 0; }

.contadores { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5); }
.contador {
  padding: var(--e1) var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--texto);
  text-decoration: none;
}

.faixa { margin-bottom: var(--e6); }
.faixa h2 { font-size: var(--fonte-corpo); margin: 0 0 var(--e3); }

.lead {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e2);
}
.lead-nome { font-weight: 600; }
.lead-meta { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); color: var(--texto-suave); font-size: var(--fonte-meta); }
.lead-meta a, .faixa a:not(.botao) { color: var(--destaque); }

/* Ticket 04: próximo contato, ações e nota */
.lead-contato, .lead-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e2); }
.em-linha { display: flex; align-items: center; gap: var(--e2); }
.em-linha input[type="date"] { width: auto; }
.lead-reuniao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e2); }
.em-linha input[type="time"], .em-linha select { width: auto; padding: var(--e1) var(--e2); background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
.lead .botao { margin-top: 0; padding: var(--e1) var(--e3); font-size: var(--fonte-meta); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.lead-nota { display: grid; grid-template-columns: 1fr auto; gap: var(--e1) var(--e2); align-items: end; margin-top: var(--e2); }
.lead-nota label { grid-column: 1 / -1; }
textarea {
  width: 100%;
  padding: var(--e2) var(--e3);
  background: var(--superficie-2);
  color: var(--texto);
  border: 1px solid var(--borda-controle);
  border-radius: var(--r);
  font: inherit;
  resize: vertical;
}
textarea:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* Ticket 06: busca de contatos */
.busca { display: flex; gap: var(--e3); align-items: center; margin-bottom: var(--e5); max-width: 36rem; }
.busca .botao { margin-top: 0; }
.lead-meta form { margin: 0; }
.lead-meta .botao { padding: var(--e1) var(--e3); }

/* Ticket 11: destinos e arquivados */
.lead-destinos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e2); }
.destino { font-weight: 600; }
.destino-ganho { color: var(--estado-ganho); }
.destino-perdido { color: var(--estado-neutro); }

/* Ticket 07: mensagens agendadas */
.lead-agendada { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e4); margin-top: var(--e2); font-size: var(--fonte-meta); }
.lead-agendada q { color: var(--texto-suave); quotes: "“" "”"; }
.selo-aguardando { padding: 0 var(--e2); border: 1px solid var(--estado-info); border-radius: 999px; background: color-mix(in srgb, var(--estado-info) var(--selo-fundo), transparent); color: var(--estado-info); font-size: var(--fonte-meta); }

.historico { list-style: none; padding: 0; }
.historico li { padding: var(--e2) 0; border-bottom: 1px solid var(--borda); display: grid; gap: var(--e1); }
.evento-tipo { font-weight: 600; }
.historico code { color: var(--texto-suave); font-size: var(--fonte-meta); }

.lead-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-top: var(--e2); padding: var(--e2) var(--e2); border-left: 3px solid var(--destaque); background: var(--realce); font-size: var(--fonte-meta); }
.lead-aviso form { margin: 0; }
.oferta-contato { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e3); margin: var(--e2) 0; padding: var(--e2); border-left: 3px solid var(--destaque); background: var(--realce); font-size: var(--fonte-meta); }
.oferta-contato[hidden] { display: none; }
.pergunta-contato form { margin: 0; }
.pergunta-contato > span { flex: 1 1 18rem; }
.pergunta-contato[data-fez-contato] { gap: var(--e2); }
.etapas-funil { border: 1px solid var(--borda); border-radius: 6px; padding: var(--e2) var(--e3); margin: 0 0 var(--e3); }
.etapas-funil legend { font-weight: 600; padding: 0 var(--e1); }
.etapas-funil label { display: flex; align-items: center; gap: var(--e2); padding: var(--e1) 0; }

/* Ticket 12: ações dos destinos (prévia, resultado, configuração) */
input[type="checkbox"] { width: auto; }
.passos { list-style: none; padding: 0; margin: 0 0 var(--e4); }
.passo { display: grid; gap: var(--e1); padding: var(--e2) 0; border-bottom: 1px solid var(--borda); }
.passo-estado { font-weight: 600; font-size: var(--fonte-meta); }
.passo[data-situacao="bloqueada"] .passo-estado, .passo[data-situacao="indisponivel"] .passo-estado,
.passo[data-resultado="falhou"] .passo-estado, .passo[data-resultado="bloqueada"] .passo-estado,
.passo[data-resultado="indisponivel"] .passo-estado, .passo[data-resultado="nao_confirmada"] .passo-estado { color: var(--perigo); }
.passo-aviso { color: var(--perigo); font-size: var(--fonte-meta); }
.confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e4); }
.confirmar .botao { margin-top: 0; text-decoration: none; }
.confirmar-automacao { flex-basis: 100%; color: var(--perigo); }
.config-bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e3) var(--e4); margin-bottom: var(--e4); }
.config-bloco h2 { font-size: var(--fonte-corpo); margin: 0 0 var(--e2); }
.config-acao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); margin-bottom: var(--e2); }
.config-acao select, .config-acao input[type="text"] { width: auto; min-width: 12rem; padding: var(--e1) var(--e2); background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
.opcao { color: var(--texto); font-size: var(--fonte-corpo); display: flex; align-items: center; gap: var(--e2); }
.titulo-pagina { font-size: var(--fonte-titulo); margin: 0 0 var(--e2); }

/* ===== Refino visual, ticket 04: tela Leads (abas, tabela, selo de prazo) ===== */

.leads-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e4); margin-bottom: var(--e3); }
.leads-cabeca .titulo-pagina { margin: 0; }

.abas { display: flex; gap: var(--e1); overflow-x: auto; margin-bottom: var(--e4); border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.aba {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 40px; padding: 0 var(--e3); color: var(--tinta-2); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.aba:hover { color: var(--tinta); background: var(--papel-3); border-radius: var(--r) var(--r) 0 0; }
.aba b { min-width: 22px; padding: 0 6px; border-radius: 10px; background: var(--papel-3); color: var(--tinta-2); font-size: var(--t-p); font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
.aba[aria-current="page"] { color: var(--tinta); }
.aba[aria-current="page"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -1px; height: 6px; z-index: -1; background: var(--marca-hoje); border-radius: 3px 8px 4px 9px / 7px 4px 8px 4px; transform: rotate(-0.6deg) skewX(-8deg); }
.aba[aria-current="page"] b { background: var(--tinta); color: var(--papel-2); }

.selo-respondeu { margin-left: var(--e2); }
.aba:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }

.faixa-titulo { font-size: var(--t-m); margin: 0 0 var(--e1); }
.faixa-explicacao { margin: 0 0 var(--e3); max-width: 75ch; font-size: var(--t-p); }
.faixa-explicacao[data-busca-ativa] { color: var(--tinta); }
.vazio-aba { padding: var(--e7) var(--e5); text-align: center; background: var(--papel-2); border: 1px dashed var(--linha-forte); border-radius: var(--r-g); }
.vazio-aba p { margin: 0 auto var(--e3); max-width: 52ch; }
.vazio-aba .vazio-titulo { margin-bottom: var(--e1); font-size: var(--t-g); font-weight: 650; color: var(--tinta); }
.vazio-passo { margin-top: var(--e1); }

.tabela-rolagem { overflow-x: auto; background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r-g); }
.tabela-leads { width: 100%; border-collapse: collapse; font-size: var(--t-m); }
.tabela-leads th { padding: var(--e2) var(--e3); background: var(--papel-3); border-bottom: 1px solid var(--linha); color: var(--tinta-2); font-size: var(--t-p); font-weight: 650; text-align: left; white-space: nowrap; }
.tabela-leads td { padding: var(--e2) var(--e3); border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela-leads tbody tr:hover { background: var(--papel-3); }
.tabela-leads tbody tr:last-child td { border-bottom: 0; }
.col-lead { min-width: 180px; }
.col-faixa { max-width: 140px; }
.col-data { min-width: 150px; }
.col-data .suave { font-size: var(--t-p); }
.col-atividade { white-space: nowrap; }
.lead-nome { font-weight: 650; }
.lead-linha[data-abrir-linha] { cursor: pointer; }
.linha-detalhe { display: block; max-width: 46ch; margin-top: 2px; font-size: var(--t-p); }
.lista-ferramentas { display: none; }

/* Ações da linha: texto curto, alvo de 32px, sem repetir o que o painel já tem */
.col-acoes { white-space: nowrap; text-align: right; }
.col-acoes form { display: inline; margin: 0; }
.botao-linha {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo); margin-left: var(--e1); padding: 0 var(--e3);
  border: 1px solid var(--borda-controle); border-radius: var(--r); background: transparent; color: var(--tinta);
  font: 600 var(--t-p)/1 var(--fonte); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.12s ease-out;
}
/* Com o painel aberto a lista fica estreita: o painel já traz "Abrir conversa" e a última atividade */
.leads-espaco[data-painel="aberto"] .col-acoes [data-linha-acao="abrir-conversa"],
.leads-espaco[data-painel="aberto"] .col-atividade,
.leads-espaco[data-painel="aberto"] .tabela-leads th.col-atividade { display: none; }
.leads-espaco[data-painel="aberto"] .col-data [data-origem-data] { display: block; }
.botao-linha:hover { background: var(--papel-3); }
.botao-linha[disabled] { opacity: 0.5; cursor: progress; }
.botao-linha:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Selo: o traço de marca-texto (preenchimento chapado, tinta por cima; o texto do selo diz o estado, a cor só reforça) */
.selo { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; font-size: var(--t-p); font-weight: 650; line-height: 1.5; white-space: nowrap; color: var(--tinta-marca); }
.selo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--m, var(--marca-neutro)); border-radius: 3px 8px 4px 9px / 8px 4px 9px 4px; transform: rotate(-1.2deg) skewX(-6deg); }
.selo-atraso { --m: var(--marca-atraso); }
.selo-hoje { --m: var(--marca-hoje); }
.selo-info { --m: var(--marca-info); }
.selo-aviso { --m: var(--marca-aviso); }
.selo-ganho { --m: var(--marca-ganho); }
.selo-selecao { --m: var(--marca-selecao); }
.selo-neutro { --m: var(--marca-neutro); color: var(--tinta); }

/* ===== Refino visual, ticket 05: busca por nome e ordenação na tela Leads ===== */
.busca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0 0 var(--e3); }
.busca-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.busca-campo-caixa { position: relative; display: block; flex: 1 1 260px; max-width: 420px; }
.busca-icone { position: absolute; left: var(--e3); top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.busca-campo { width: 100%; padding-left: calc(var(--e3) + 24px); }
.busca-dica { color: var(--tinta-3); font-size: var(--t-p); }
kbd { padding: 0 5px; border: 1px solid var(--linha-forte); border-bottom-width: 2px; border-radius: 4px; background: var(--papel-2); font: 600 var(--t-p) var(--fonte); }
.ordenar, .faixa .ordenar { color: inherit; text-decoration: none; }
.ordenar { display: inline-flex; align-items: center; gap: 4px; }
.ordenar:hover { color: var(--tinta); text-decoration: underline; }
.ordenar:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.tabela-leads th[aria-sort] { color: var(--tinta); }

/* ===== Refino visual, ticket 06: detalhe do lead (_lead_detalhe.html) =====
   O bloco mede o PRÓPRIO contêiner (não a janela): a mesma marcação serve à página e ao painel lateral (ticket 09). */
.voltar { margin: 0 0 var(--e3); }
.voltar a { color: var(--destaque); }

.lead-detalhe { container-type: inline-size; container-name: detalhe; }
.detalhe-cabeca { display: grid; gap: var(--e1); margin-bottom: var(--e4); }
.detalhe-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e3); }
.detalhe-titulo .titulo-pagina { margin: 0; }
.painel-lead .detalhe-titulo .titulo-pagina { padding: 0 2px; background: linear-gradient(transparent 52%, var(--marca-selecao) 52%, var(--marca-selecao) 92%, transparent 92%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.painel-topo [data-painel-fechar] { gap: var(--e1); }
.painel-topo [data-painel-fechar] .icone { width: 1em; height: 1em; }
.detalhe-cabeca p { margin: 0; }
.detalhe-atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.detalhe-atalhos form { margin: 0; }
.lead-detalhe .botao { margin-top: 0; padding: var(--e1) var(--e3); font-size: var(--fonte-meta); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.detalhe-grade { display: grid; gap: var(--e4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container detalhe (min-width: 46rem) {
  .detalhe-grade { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.detalhe-coluna { display: grid; gap: var(--e4); min-width: 0; }
.detalhe-bloco { display: grid; gap: var(--e2); padding: var(--e3) var(--e4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.detalhe-bloco h2 { margin: 0; font-size: var(--fonte-corpo); }
.detalhe-bloco p { margin: 0; }
.detalhe-bloco form { margin: 0; flex-wrap: wrap; }
.detalhe-valor { font-size: var(--fonte-corpo); }
.form-agendar-detalhe { display: grid; gap: var(--e2); }
.lead-agendamento { display: grid; gap: var(--e2); }
.agendadas-pendentes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.agendadas-pendentes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e1) var(--e3); }
.agendadas-pendentes q { color: var(--texto-suave); quotes: "“" "”"; }
.detalhe-dados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e1) var(--e4); margin: 0; }
.detalhe-dados dt { color: var(--texto-suave); }
.detalhe-dados dd { margin: 0; overflow-wrap: anywhere; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead-detalhe .lead-nota { margin-top: 0; }
.lead-detalhe .historico li { padding: var(--e2) 0; }
.lead-link, .faixa a.lead-link { color: var(--tinta); text-decoration: none; }
.lead-link:hover .lead-nome { text-decoration: underline; }
.lead-link:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* ===== Refino visual, ticket 14: Calendário (mês e semana) =====
   Só tokens existentes (claro e escuro). Hoje, passada e futura levam TEXTO além da cor. */

.cal-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e5); margin-bottom: var(--e3); }
.cal-cabeca .titulo-pagina { margin: 0; }
.cal-visoes { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.cal-visao { display: inline-flex; align-items: center; min-height: var(--alvo-botao); padding: var(--e1) var(--e4); color: var(--texto-suave); text-decoration: none; font-size: var(--fonte-meta); }
.cal-visao:hover { color: var(--texto); background: var(--superficie-2); }
.cal-visao[aria-current="page"] { background: var(--superficie-2); color: var(--texto); font-weight: 600; }
.cal-visao:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }

.cal-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); margin-bottom: var(--e4); }
.cal-nav { display: flex; flex-wrap: wrap; gap: var(--e2); }
.cal-nav .botao { margin-top: 0; padding: var(--e1) var(--e3); font-size: var(--fonte-meta); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.cal-titulo { margin: 0; font-size: var(--fonte-corpo); font-weight: 600; }
.cal-titulo::first-letter { text-transform: uppercase; }

.cal-grade { display: grid; gap: var(--e1); }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e1); }
.cal-semana-cabeca span { padding: 0 var(--e2); color: var(--texto-suave); font-size: var(--fonte-meta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.cal-dia {
  display: grid;
  align-content: start;
  gap: var(--e1);
  min-height: 6.5rem;
  min-width: 0;
  padding: var(--e1) var(--e2);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 8px;
}
.cal-dia[data-fora="sim"] { background: transparent; }
.cal-dia[data-fora="sim"] .cal-dia-numero { color: var(--texto-suave); }
.cal-dia[data-hoje="sim"] { border-color: var(--destaque); box-shadow: inset 0 0 0 1px var(--destaque); }
.cal-dia[data-selecionado="sim"] { background: var(--superficie-2); }
.cal-grade[data-visao="semana"] .cal-dia { min-height: 14rem; }
.cal-dia-cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--e1); margin: 0; }
.cal-dia-numero { display: inline-flex; align-items: center; justify-content: center; min-width: var(--alvo); min-height: var(--alvo); color: var(--texto); font-weight: 600; text-decoration: none; padding: 0 var(--e1); border-radius: 4px; }
.cal-dia-numero:hover { text-decoration: underline; }
.cal-dia-numero:focus-visible, .cal-item-link:focus-visible, .cal-mais:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.cal-hoje { color: var(--destaque); }
.selo.cal-hoje { color: var(--tinta-marca); }
.cal-mais { display: inline-flex; align-items: center; min-height: var(--alvo); color: var(--destaque); font-size: var(--fonte-meta); }

.cal-item { display: grid; gap: 0; padding: var(--e1) var(--e2); border-left: 3px solid var(--destaque); background: var(--realce); border-radius: 4px; font-size: var(--fonte-meta); min-width: 0; }
.cal-item[data-momento="passada"] { border-left-color: var(--texto-suave); }
.cal-item-link { color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
.cal-item-link:hover .cal-item-nome { text-decoration: underline; }
.cal-hora { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: var(--e1); }
.cal-item-meta { font-size: var(--fonte-meta); }
.cal-momento { margin-left: var(--e1); font-style: italic; }
.cal-momento-futura, .cal-momento-hoje { color: var(--destaque); font-style: normal; font-weight: 600; }

.cal-agenda { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--borda); }
.cal-agenda-titulo { margin: 0 0 var(--e2); font-size: var(--fonte-corpo); }
.cal-agenda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); max-width: 40rem; }
.cal-agenda-lista .cal-item { font-size: var(--fonte-corpo); }

@media (max-width: 40rem) {
  .cal-semana { grid-template-columns: minmax(0, 1fr); }
  .cal-semana-cabeca { display: none; }
  .cal-dia { min-height: 0; }
  .cal-dia[data-fora="sim"] { display: none; }
}

/* Ticket 15: camadas do calendário (próximos contatos, mensagens agendadas). Cada tipo tem rótulo em texto
   (.cal-tipo) e uma marca própria na borda e no ícone; a cor sozinha nunca separa os tipos. */
.cal-camadas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e2); margin-bottom: var(--e4); font-size: var(--fonte-meta); }
.cal-camada { display: inline-flex; align-items: center; gap: var(--e1); min-height: var(--alvo); padding: 0 var(--e3); border: 1px solid var(--borda); border-radius: 999px; color: var(--texto-suave); text-decoration: none; }
.cal-camada:hover { color: var(--texto); background: var(--superficie-2); }
.cal-camada[data-ligada="sim"] { border-color: var(--destaque); color: var(--texto); background: var(--realce); }
.cal-camada:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.cal-sem-leitura { flex-basis: 100%; margin: 0; font-size: var(--fonte-meta); }
.cal-tipo { font-weight: 600; margin-right: var(--e1); }
.cal-tipo::before { margin-right: var(--e1); }
.cal-tipo-reuniao::before { content: "\25CF"; }
.cal-tipo-contato::before { content: "\25B2"; }
.cal-tipo-mensagem::before { content: "\2709"; }
.cal-item[data-item="contato"] { border-left-style: dashed; }
.cal-item[data-item="mensagem"] { border-left-style: dotted; border-left-width: 4px; }
.cal-dia-inteiro { font-style: italic; margin-right: var(--e1); }
.cal-item q { font-style: italic; overflow-wrap: anywhere; }

/* Ticket 17: marcar reunião pelo calendário (bloco próprio) */
.cal-marcar { display: inline-flex; align-items: center; justify-content: center; min-width: var(--alvo); min-height: var(--alvo); margin-left: auto; padding: 0 var(--e2); border: 1px solid var(--borda); border-radius: 999px; color: var(--texto-suave); text-decoration: none; font-weight: 600; line-height: 1.4; }
.cal-marcar:hover { color: var(--destaque); border-color: var(--destaque); }
.cal-marcar:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.cal-marcar-linha { margin: var(--e3) 0 0; }
.cal-marcar-linha .botao { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.marcar-reuniao { display: grid; gap: var(--e4); max-width: 40rem; }
.marcar-bloco { margin: 0; padding: var(--e3) var(--e4) var(--e4); border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); display: grid; gap: var(--e3); }
.marcar-bloco legend { padding: 0 var(--e2); font-weight: 600; }
.marcar-busca { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.marcar-busca input { flex: 1 1 14rem; width: auto; }
.marcar-candidatos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.marcar-candidato { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); padding: var(--e2) var(--e2); border: 1px solid var(--borda); border-radius: 8px; color: var(--texto); font-size: var(--fonte-corpo); cursor: pointer; }
.marcar-candidato:hover { background: var(--realce); }
.marcar-candidato input { width: auto; margin: 0; }
.marcar-candidato-nome { font-weight: 600; }
.marcar-campos { display: flex; flex-wrap: wrap; gap: var(--e3); }
.marcar-campos label { display: grid; gap: var(--e1); flex: 1 1 9rem; }
.marcar-campos select { padding: var(--e2) var(--e3); background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
.marcar-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.marcar-acoes .botao { margin-top: 0; text-decoration: none; }

/* ===== Refino visual, ticket 09: painel lateral do lead (#painel-lead) =====
   Duas colunas na tela Leads: a lista e o painel. Só tokens existentes (claro e escuro). Em janela estreita o painel
   vira uma folha sobre a tela inteira (o Fechar e o Esc continuam valendo). O bloco do detalhe mede o próprio
   contêiner (ticket 06), então cabe aqui sem CSS à parte. */
.leads-espaco { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); align-items: start; }
.leads-espaco[data-painel="aberto"] { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
.leads-coluna { min-width: 0; }

.painel-lead {
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 5.5rem);
  overflow: auto;
  padding: var(--e3) var(--e4) var(--e4);
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  box-shadow: var(--sombra-painel);
}
.painel-lead[hidden] { display: none; }
.painel-lead:focus { outline: none; }
.painel-lead:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.painel-lead.htmx-request { opacity: 0.6; }

.painel-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  position: sticky;
  top: calc(-1 * var(--e3));
  z-index: 2;
  margin: calc(-1 * var(--e3)) calc(-1 * var(--e4)) var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
}
.painel-topo form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1); }
.painel-topo .botao { margin-top: 0; padding: var(--e1) var(--e3); font-size: var(--fonte-meta); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.painel-topo input[type="date"] { width: auto; padding: var(--e1) var(--e2); font-size: var(--fonte-meta); }
.painel-topo [data-painel-fechar] { margin-left: auto; }

/* Setas ← → entre os leads da lista (portar-mock-ui, ticket 10): no topo do painel e na página do lead. */
.setas-lead { display: inline-flex; align-items: center; gap: var(--e1); margin: 0; }
.setas-lead .botao { margin-top: 0; min-width: var(--alvo); padding: 0 var(--e2); }
.setas-lead [data-seta-desligada] { opacity: 0.5; cursor: not-allowed; }
.setas-posicao { min-width: 4.5rem; text-align: center; color: var(--texto-suave); font-size: var(--fonte-meta); font-variant-numeric: tabular-nums; }
.painel-topo .setas-lead { order: -1; }
main > .setas-lead { margin: 0 0 var(--e3); }

.lead-linha-selecionada,
.tabela-leads tbody tr.lead-linha-selecionada:hover { background: var(--fundo-selecao); }
.lead-linha-selecionada .lead-nome { padding: 0 2px; background: linear-gradient(transparent 52%, var(--marca-selecao) 52%, var(--marca-selecao) 92%, transparent 92%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

@media (max-width: 72rem) {
  .leads-espaco[data-painel="aberto"] { grid-template-columns: minmax(0, 1fr); }
  .painel-lead {
    position: fixed;
    inset: 0;
    z-index: 60;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: var(--fundo);
  }
  .painel-topo { position: sticky; top: calc(-1 * var(--e3)); z-index: 1; margin: calc(-1 * var(--e3)) calc(-1 * var(--e4)) var(--e3); padding: var(--e3) var(--e4); background: var(--superficie-2); }
}

/* Com o painel aberto a lista fica estreita: a coluna Faixa (que repete o selo) sai; o painel já mostra a faixa */
.leads-espaco[data-painel="aberto"] .col-faixa { display: none; }

/* Com o painel aberto a coluna da lista tem ~540 a 670 px (o painel fica com 34rem): a tabela se compacta para as cinco
   colunas caberem sem rolagem. Nada some: o espaço entre colunas encolhe, a data quebra em duas linhas (o selo também, abaixo de 79rem) e os
   mínimos de largura caem. A rolagem horizontal contida em `.tabela-rolagem` fica só como rede de segurança. Abaixo de 72rem
   o painel vira folha sobre a tela e a lista usa a largura inteira. */
.leads-espaco[data-painel="aberto"] .tabela-leads th,
.leads-espaco[data-painel="aberto"] .tabela-leads td { padding-inline: var(--e2); }
.leads-espaco[data-painel="aberto"] .tabela-leads .col-lote { width: var(--alvo); padding-inline: var(--e2) 0; }
.leads-espaco[data-painel="aberto"] .col-lead,
.leads-espaco[data-painel="aberto"] .col-data { min-width: 0; }
@media (max-width: 79rem) {
  .leads-espaco[data-painel="aberto"] .tabela-leads .selo { white-space: normal; border-radius: var(--raio); }
}

/* Fila (portar-mock-ui, ticket 14): um lead por vez, no visual do protótipo (mock-ui/assets/fila.css). */
.fila-pagina { max-width: 760px; margin: 0 auto; }
.fila-pagina > .titulo-pagina { margin: 0 0 var(--e4); }
#fila-cartao > .setas-lead { margin: 0 0 var(--e3); }
#fila-cartao .setas-posicao { font-size: var(--t-m); font-weight: 600; color: var(--tinta); }
.fila-lead { background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r-g); padding: var(--e6) var(--e5); }
.fila-nome { margin: 0 0 var(--e4); font-size: var(--t-xg); line-height: 1.15; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.fila-nome a { color: var(--tinta); text-decoration-color: var(--linha-forte); text-decoration-thickness: 2px; }
.fila-nome a:hover { text-decoration-color: var(--tinta); }
.fila-motivo { margin: 0 0 var(--e2); max-width: 60ch; font-size: var(--t-g); line-height: 1.5; }
.fila-motivo .selo { margin-right: var(--e2); vertical-align: 2px; }
.fila-lead > .suave { margin: 0 0 var(--e6); color: var(--tinta-2); }
.fila-acoes { display: grid; gap: var(--e4); margin: 0; }
.fila-acoes .em-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin: 0; }
.fila-acoes .em-linha .em-linha { display: contents; }
.fila-acoes .botao { margin-top: 0; min-height: 48px; padding: 0 var(--e5); font-size: var(--t-g); }
.fila-acoes .botao-discreto { min-height: 48px; padding: 0 var(--e4); font-size: var(--t-m); }
.fila-acoes .botao.botao-discreto { border-color: var(--linha-forte); }
.fila-acoes .botao.botao-discreto:hover { background: var(--papel-3); }
.fila-acoes [data-fila-acao="adiar"] .botao, .fila-acoes [data-fila-acao="outra-data"] .botao { font-size: var(--t-g); padding: 0 var(--e5); }
.fila-acoes [data-fila-acao="adiar"] .botao-discreto, .fila-acoes [data-fila-acao="outra-data"] .botao-discreto { padding: 0 var(--e5); }
.fila-acoes [data-fila-acao="conversa-e-destino"], .fila-acoes [data-fila-acao="pular"] { padding-top: var(--e4); border-top: 1px solid var(--linha); }
.fila-acoes input[type="date"] { min-height: 48px; padding: 0 var(--e3); font-size: var(--t-m); }
.fila-acoes [data-fila-acao="pular"] .suave { color: var(--tinta-2); }
.fila-lead .banner, #fila-cartao > .banner { margin-bottom: var(--e4); }
.fila-lead .oferta-contato { margin: 0; }
.fila-atalhos { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4); margin: var(--e5) 0 0; font-size: var(--t-p); color: var(--tinta-3); }
.fila-atalhos kbd { margin-right: var(--e1); }
.fila-vazia { padding: var(--e7) var(--e5); background: var(--papel-2); border: 1px dashed var(--linha-forte); border-radius: var(--r-g); }
.fila-vazia h2 { margin: 0 0 var(--e2); font-size: var(--t-g); }
.fila-vazia p { max-width: 52ch; color: var(--tinta-2); }
.fila-vazia .em-linha { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e4); max-width: none; }
.fila-vazia .botao { margin-top: 0; }
@media (max-width: 719px) {
  .fila-lead { padding: var(--e5) var(--e4); }
  .fila-motivo { font-size: var(--t-m); }
  .fila-acoes .em-linha { flex-direction: column; align-items: stretch; }
  .fila-acoes .botao, .fila-acoes input[type="date"] { width: 100%; }
  .fila-acoes [data-fila-acao="pular"] .suave { text-align: center; }
  .fila-atalhos { display: none; }
  .fila-vazia { padding: var(--e6) var(--e4); }
  .fila-vazia .em-linha { flex-direction: column; align-items: stretch; }
}
#fila-cartao.htmx-request { opacity: 0.6; }

/* ===== Refino visual, ticket 12: seleção múltipla e ações em lote =====
   As caixas só valem com JavaScript (lote.js); sem ele o leads.html esconde a coluna (noscript). Só tokens existentes. */
.col-lote { width: 2rem; padding-right: 0; text-align: center; }
.col-lote input[type="checkbox"] { width: 18px; min-height: 0; height: 18px; margin: 0; cursor: pointer; }
.tabela-leads tbody tr.lote-marcada { background: var(--fundo-selecao); }
.lote-barra {
  position: sticky; bottom: var(--e4); z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: var(--e4) 0 0; padding: var(--e2) var(--e3);
  background: var(--papel-2); border: 1px solid var(--linha-forte); border-radius: var(--r-g); box-shadow: var(--sombra-painel);
  font-weight: 650;
}
.lote-barra [data-lote-contagem] { margin-right: auto; }
.lote-barra[hidden] { display: none; }
.lote-barra .botao { margin-top: 0; padding: var(--e1) var(--e3); font-size: var(--fonte-meta); }
.lote-titulo { margin: 0 0 var(--e2); font-size: var(--fonte-corpo); }
.lote-acoes form { margin: 0 0 var(--e2); flex-wrap: wrap; }
.lote-acoes .botao { margin-top: 0; }
.lote-nomes, .lote-falhas { margin: var(--e2) 0 0; padding-left: var(--e4); }
.lote-nomes { color: var(--texto-suave); font-size: var(--fonte-meta); max-height: 12rem; overflow: auto; }
.lote-falhas li { margin-bottom: var(--e1); }
/* Refino visual, ticket 16: calendário com o painel lateral ao lado. Reusa .leads-espaco/.painel-lead (ticket 09). */
.cal-item[data-selecionado="sim"] { box-shadow: inset 0 0 0 1px var(--destaque); background: var(--superficie-2); }
/* Com o painel aberto a célula do dia tem ~90 px: número + selo "hoje" + "+" não cabem numa linha. O selo desce para a
   segunda linha da célula de hoje (nada transborda) e o número e o "+" ficam em cima. */
.leads-espaco[data-painel="aberto"] .cal-dia-cabeca { flex-wrap: wrap; }
.leads-espaco[data-painel="aberto"] .cal-hoje { order: 3; }
@media (max-width: 80rem) {
  .leads-espaco[data-painel="aberto"] .cal-semana { grid-template-columns: minmax(0, 1fr); }
  .leads-espaco[data-painel="aberto"] .cal-semana-cabeca { display: none; }
  .leads-espaco[data-painel="aberto"] .cal-dia { min-height: 0; }
}

/* ===== Tela Leads no celular (portar o protótipo, ticket 07): as linhas empilham, o lote gruda acima da barra de navegação ===== */
@media (max-width: 720px) {
  .busca-campo-caixa { max-width: none; }
  .busca-dica { display: none; }
  .lista-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); padding: var(--e2) var(--e3); background: var(--papel-3); border-bottom: 1px solid var(--linha); font-size: var(--t-p); }
  .lista-ferramentas .ordenar-movel { display: inline-flex; align-items: center; gap: 4px; min-height: var(--alvo); color: var(--tinta-2); font-weight: 650; text-decoration: none; }
  .tabela-leads thead { display: none; }
  .tabela-leads, .tabela-leads tbody, .tabela-leads tr, .tabela-leads td { display: block; }
  .tabela-leads tr { display: grid; grid-template-columns: 32px 1fr auto; gap: 2px var(--e2); padding: var(--e3); border-bottom: 1px solid var(--linha); }
  .tabela-leads tbody tr:last-child { border-bottom: 0; }
  .tabela-leads td { padding: 0; border: 0; }
  .tabela-leads td.col-lote { grid-row: 1 / span 4; padding-top: 2px; text-align: left; }
  .tabela-leads td.col-lead { grid-column: 2; min-width: 0; }
  .tabela-leads td.col-prazo { grid-column: 3; grid-row: 1; justify-self: end; }
  .tabela-leads td.col-data, .tabela-leads td.col-atividade, .tabela-leads td.col-faixa { grid-column: 2 / -1; min-width: 0; font-size: var(--t-p); color: var(--tinta-2); }
  .tabela-leads td.col-acoes { grid-column: 2 / -1; margin-top: var(--e1); text-align: left; }
  .botao-linha { margin: 0 var(--e2) 0 0; }
  .lote-barra { position: fixed; left: var(--e3); right: var(--e3); bottom: calc(56px + var(--e2)); z-index: 56; margin: 0; }
  body.tem-selecao { padding-bottom: 140px; }
}
@media (min-width: 721px) { .lista-ferramentas { display: none; } }

/* Telas médias: o casco ganhou a aba Hoje e, com o selo "desatualizado", passava da largura. Os botões ficam só com o
   ícone (têm `title` e `aria-label`), como no celular, e o espaçamento aperta. */
@media (min-width: 721px) and (max-width: 1400px) {
  .casco { gap: var(--e3); }
  .casco .rotulo-botao { display: none; }
}

/* ---------- Casco no celular: navegação desce para uma barra fixa de 56px ---------- */
@media (max-width: 720px) {
  :root { --t-m: 1rem; }
  .conteudo { padding: var(--e3); }
  .banners { padding: var(--e3) var(--e3) 0; }
  .casco { gap: var(--e2); padding: 0 var(--e3); }
  .casco .rotulo-botao, .marca-resto { display: none; }
  /* O frescor mostra só a idade ("há 18 min") e o selo: o rótulo "Atualizado" sai (texto solto, sem marcação). */
  .frescor { font-size: 0; min-width: 0; }
  .frescor [data-idade], .frescor .selo-desatualizado { font-size: 12px; }
  .topo-direita { min-width: 0; gap: var(--e1); }
  .topo-direita .frescor { margin-right: var(--e1); }
  /* Desatualizado: o selo (texto) basta; a idade fica no `title` do frescor. Evita o selo sobre os ícones. */
  .frescor[data-desatualizado="sim"] [data-idade] { display: none; }
  .selo-desatualizado { padding: 0 4px; font-size: 11px; }
  .nav-principal a { flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 2px; padding: 0 var(--e1); font-size: 12px; }
  .nav-principal a[aria-current="page"]::before { inset: 4px 6px; }
  .nav-principal { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; justify-content: space-around; height: 56px; padding-bottom: env(safe-area-inset-bottom); background: var(--casco); }
  body { padding-bottom: 64px; }
}

/* ===== Configurações: tela única (ticket 04) ===== */
.config-pagina { max-width: 60rem; margin: 0 auto; }
.config-intro { max-width: 65ch; margin-bottom: var(--e4); }
.config-indice { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e5); }
.config-indice a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--e3); border: 1px solid var(--borda-controle); border-radius: 999px; color: var(--tinta); text-decoration: none; font-size: var(--t-p); }
.config-indice a:hover { background: var(--papel-3); }
.config-secao { padding: var(--e5) 0; border-top: 1px solid var(--linha); scroll-margin-top: var(--e8); }
.config-secao > h2 { margin-bottom: var(--e3); }
.config-regra { display: grid; grid-template-columns: minmax(0, 1fr) 14rem 13rem; gap: var(--e2) var(--e4); align-items: start; padding: var(--e3) 0; border-top: 1px solid var(--linha); }
.config-regra:first-child { border-top: 0; }
.config-regra-texto p { margin: var(--e1) 0 0; max-width: 55ch; font-size: var(--t-p); }
.config-regra-campo { display: flex; align-items: center; gap: var(--e2); }
.config-regra-campo input { width: 100%; min-height: 36px; font-variant-numeric: tabular-nums; }
.config-regra-campo input[type="checkbox"] { width: auto; min-height: 0; }
.config-regra-campo[role="group"] { flex-wrap: wrap; gap: var(--e2) 16px; }
.config-regra-campo .opcao { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.config-regra-origem { display: grid; gap: var(--e1); justify-items: start; font-size: var(--t-p); }
.config-regra-origem .origem { color: var(--tinta); font-weight: 600; }
.config-regra[data-origem="tela"] .origem::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--e2); border-radius: 50%; background: var(--marca-info); }
.config-secao .rodape-form { margin-top: var(--e3); }
.config-secao form[data-etiquetas] { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--linha); }
@media (max-width: 720px) {
  .config-regra { grid-template-columns: 1fr; }
  .config-regra-origem { justify-items: start; }
}
.config-secao > h2 { font-size: var(--t-m); }
.config-regra-texto label { font-size: var(--t-m); color: var(--tinta); }
.config-regra-origem .botao-discreto { min-height: 32px; border: 1px solid var(--borda-controle); }

/* Agenda do dia (portar-mock-ui 15): contato feito (✓), atrasado, mensagem enviada / por sair / confirmando.
   O estado sempre vem em texto; a cor só reforça. */
.cal-item[data-estado="feito"] { border-left-style: solid; border-left-color: var(--texto-suave); }
.cal-item[data-estado="atrasado"] { border-left-color: var(--perigo, var(--destaque)); }
.cal-estado { font-style: normal; font-weight: 600; }
.cal-estado-atrasado { color: var(--perigo, var(--destaque)); }
.cal-estado-feito, .cal-estado-enviada, .cal-estado-confirmando { color: var(--texto-suave); }
.cal-estado-confirmando { font-style: italic; font-weight: 400; }
.cal-estado-por_sair { color: var(--destaque); }
.cal-relativo { color: var(--texto-suave); font-size: var(--fonte-meta); }
.cal-item[data-estado="enviada"] { border-left-color: var(--texto-suave); }
.cal-tipo-feito::before { content: none; }

/* ===== Hoje (portar-mock-ui, ticket 16): a entrada do painel, só leitura =====
   Dois blocos lado a lado (Pede você agora / Agenda do dia), contadores em pílula e rodapé de dados. Sem cartões
   repetidos: cada bloco é uma lista; o grifo fica no selo de cada lead e no botão da Fila (a ação primária). */
.hoje-pagina { max-width: 74rem; margin: 0 auto; }
.hoje-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3) var(--e5); margin-bottom: var(--e5); }
.hoje-cabeca .titulo-pagina { margin: 0; }
.hoje-data { margin: 0; }
.hoje-data::first-letter { text-transform: uppercase; }
.hoje-fila { min-height: 48px; padding: 0 var(--e5); font-size: var(--t-g); }
.hoje-fila-zerada { display: inline-flex; align-items: center; gap: var(--e2); margin: 0; color: var(--tinta-2); }

.hoje-colunas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e5); align-items: start; }
.hoje-bloco { padding: var(--e4) var(--e5) var(--e5); background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r-g); }
.hoje-bloco > h2 { margin: 0 0 var(--e3); font-size: var(--t-g); }
.hoje-bloco > p[data-vazio] { max-width: 52ch; margin: 0; }
.hoje-pedidos { list-style: none; display: grid; margin: 0; padding: 0; }
.hoje-pedidos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e3); align-items: center; padding: var(--e3) 0; border-top: 1px solid var(--linha); }
.hoje-pedidos li:first-child { border-top: 0; padding-top: 0; }
.hoje-lead-nome { min-height: var(--alvo); display: inline-flex; align-items: center; color: var(--tinta); font-weight: 650; font-size: var(--t-m); overflow-wrap: anywhere; }
.hoje-motivo { grid-column: 1 / -1; font-size: var(--t-p); max-width: 60ch; }
.hoje-mais { margin: var(--e3) 0 0; font-size: var(--t-p); }
.hoje-bloco .cal-camadas { margin-bottom: var(--e3); }
.hoje-bloco .cal-agenda-lista { max-width: none; gap: 0; }
.hoje-bloco .cal-agenda-lista li { padding: var(--e1) 0; border-top: 1px solid var(--linha); }
.hoje-bloco .cal-agenda-lista li:first-child { padding-top: 0; border-top: 0; }
.hoje-bloco .cal-item { padding: var(--e2) 0; border-left: 0; background: none; border-radius: 0; font-size: var(--t-m); }
.hoje-bloco .cal-item-link { display: flex; align-items: baseline; gap: var(--e2); min-height: var(--alvo); }
.hoje-bloco .cal-relativo { white-space: nowrap; }
.hoje-bloco .cal-hora { font-variant-numeric: tabular-nums; font-weight: 650; }
.hoje-bloco .cal-item-nome { font-weight: 650; }

.hoje-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e3); margin: 0 0 var(--e5); }
.hoje-cartao {
  display: grid; gap: var(--e1); padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--r-g);
  background: var(--papel-2); color: var(--tinta); text-decoration: none;
}
.hoje-cartao span { color: var(--tinta-2); font-size: var(--t-p); font-weight: 600; }
.hoje-cartao b { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hoje-cartao:hover { background: var(--papel-3); }
.hoje-cartao[data-cartao="respondeu"] { border-color: var(--marca-selecao); }
.hoje-cartao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.hoje-graficos { column-count: 2; column-gap: var(--e5); margin: var(--e5) 0; }
.hoje-graficos > .hoje-bloco { break-inside: avoid; margin: 0 0 var(--e5); }
.hoje-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.hoje-barra { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 2.5rem; align-items: center; gap: var(--e3); color: var(--tinta); text-decoration: none; min-height: 32px; }
.hoje-barra-trilho { display: block; height: 10px; border-radius: 5px; background: var(--papel-3); overflow: hidden; }
.hoje-barra-cheia { display: block; height: 100%; border-radius: 5px; background: var(--marca-selecao); }
.hoje-barra b { text-align: right; font-variant-numeric: tabular-nums; }
.hoje-barra:hover .hoje-barra-rotulo { text-decoration: underline; }
.hoje-barra:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
@media (max-width: 45rem) { .hoje-graficos { column-count: 1; } .hoje-barra { grid-template-columns: minmax(6rem, 9rem) 1fr 2rem; } }

.hoje-numero { margin: 0 0 var(--e2); } .hoje-numero b { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hoje-contadores { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e5) 0; }
.hoje-contador {
  display: inline-flex; align-items: center; gap: var(--e2); min-height: 40px; padding: 0 var(--e3);
  border: 1px solid var(--linha); border-radius: 999px; background: var(--papel-2); color: var(--tinta); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.hoje-contador b { min-width: 24px; padding: 0 7px; border-radius: 10px; background: var(--papel-3); color: var(--tinta); font-size: var(--t-p); text-align: center; font-variant-numeric: tabular-nums; }
.hoje-contador:hover { background: var(--papel-3); }
.hoje-contador[data-contador="respondeu"] { border-color: var(--marca-selecao); }
.hoje-contador[data-contador="respondeu"] b { background: var(--marca-selecao); color: var(--tinta-marca); }
.hoje-contador:focus-visible, .hoje-lead-nome:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.hoje-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3) var(--e5); padding-top: var(--e4); border-top: 1px solid var(--linha); color: var(--tinta-2); font-size: var(--t-p); }
.hoje-frescor { display: grid; gap: var(--e2); }
.hoje-falha { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; padding: var(--e2) var(--e3); background: var(--fundo-aviso); border: 1px solid var(--marca-aviso); border-radius: var(--r); color: var(--tinta); }
.hoje-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.hoje-acoes form { margin: 0; }
.hoje-acoes .botao-discreto { margin: 0; border: 1px solid var(--borda-controle); }
@media (max-width: 880px) {
  .hoje-colunas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .hoje-cabeca { align-items: stretch; }
  .hoje-fila { width: 100%; justify-content: center; }
  .hoje-bloco { padding: var(--e4); }
  .hoje-pedidos li { grid-template-columns: minmax(0, 1fr); }
  .hoje-pedidos .selo { justify-self: start; }
}

/* Recursos de uso, ticket 04: motivo ao dar destino Perdido (na prévia). Só tokens; o select herda a aparência dos campos. */
.motivo-perdido { display: grid; gap: var(--e1); max-width: 28rem; margin: var(--e4) 0; }
.motivo-perdido label:not(:first-child) { margin-top: var(--e2); }
.motivo-perdido select, .motivo-perdido input { width: 100%; min-height: var(--alvo); padding: 4px var(--e3); background: var(--papel-2); color: var(--tinta); border: 1px solid var(--borda-controle); border-radius: var(--r); font: inherit; }
.motivo-perdido select:invalid { color: var(--tinta-3); }

/* Recursos de uso, ticket 05: busca global no casco e página de resultados. Só tokens. */
.busca-global { margin: 0 0 0 auto; }
.busca-global + .topo-direita { margin-left: 0; }
.busca-global input { width: 15rem; min-height: var(--alvo); padding: 4px var(--e3); background: var(--casco-2); color: var(--casco-texto); border: 1px solid transparent; border-radius: var(--r); font: inherit; font-size: var(--t-p); }
.busca-global input::placeholder { color: var(--casco-texto-2); }
.busca-global input:focus { background: var(--papel-2); color: var(--tinta); border-color: var(--marca-hoje); }
.busca-global input:focus::placeholder { color: var(--tinta-3); }
.busca-lista { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e2); }
.busca-lista .lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e1) var(--e4); margin: 0; }
.busca-lista .lead-nome a, .busca-lista a.lead-nome { color: var(--tinta); }
.busca-lista [data-arquivado] { background: var(--papel-3); }
@media (max-width: 72rem) { .busca-global input { width: 9rem; } }
@media (max-width: 45rem) { .busca-global { display: none; } }

/* Fila: as 3 últimas mensagens da conversa (fila-mensagens-e-envio, ticket 01). */
.fila-msgs { list-style: none; margin: var(--e3) 0; padding: 0; display: grid; gap: var(--e2); }
.fila-msg { padding: var(--e2) var(--e3); border-radius: var(--r); background: var(--superficie-2); max-width: 42rem; border-left: var(--e1) solid transparent; }
.fila-msg[data-lado="atendente"] { margin-left: var(--e5); border-left-color: var(--destaque); }
.fila-msg-autor { font-weight: 600; font-size: var(--t-p); }
.fila-msg-texto { margin: var(--e1) 0 0; overflow-wrap: anywhere; }

/* Selo "Enviada" e marca "por sair" (fidelidade-visual-mock 03): neutros, só tokens, legíveis nos dois temas. */
.selo-enviada { display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--e2); font-size: var(--t-p); font-weight: 650; line-height: 1.5; white-space: nowrap; color: var(--tinta-2); background: linear-gradient(var(--papel-2), var(--papel-3)); border: 1px solid var(--linha-forte); border-radius: 999px; box-shadow: inset 0 1px 0 var(--papel-2), 0 1px 2px var(--linha); }
.selo-enviada .icone { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.selo-enviada-check { stroke-dasharray: 1; stroke-dashoffset: 0; animation: selo-enviada-entra 0.35s ease-out both; }
@keyframes selo-enviada-entra { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.marca-por-sair { display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--e2); font-size: var(--t-p); line-height: 1.5; white-space: nowrap; color: var(--tinta-2); border: 1px dotted var(--linha-forte); border-radius: 999px; }
.marca-por-sair .icone { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .selo-enviada-check { animation: none; } }

/* Calendário como o mock (fidelidade-visual-mock 03, mock-ui/assets/calendario.css): Mês/Semana na barra de navegação,
   grade num quadro com faixa de dias da semana, cartões coloridos por tipo e a agenda do dia num painel. */
.cal-barra { margin-bottom: var(--e3); }
.cal-nav .botao { border: 1px solid var(--linha); background: var(--papel-2); }
.cal-nav .botao:hover { background: var(--papel-3); }
.cal-nav [aria-disabled="true"] { background: transparent; border-style: dashed; }
.cal-titulo { font-size: var(--t-g); min-width: 12ch; }
.cal-visoes { margin-left: auto; border: 0; border-radius: 0; overflow: visible; gap: var(--e1); }
.cal-visao { color: var(--tinta-2); border-radius: var(--r); position: relative; }
.cal-visao[aria-current="page"] { background: none; color: var(--tinta); font-weight: 650; box-shadow: inset 0 -4px 0 var(--marca-hoje); }
.cal-camada { border-color: var(--linha-forte); background: var(--papel-2); color: var(--tinta); }
.cal-camada:hover { background: var(--papel-3); }
.cal-camada[data-ligada="sim"] { background: var(--fundo-selecao); border-color: var(--foco); }

.cal-grade[data-visao="mes"] { gap: 0; background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r-g); overflow: hidden; }
.cal-semana { gap: 0; }
.cal-semana-cabeca { background: var(--papel-3); border-bottom: 1px solid var(--linha); }
.cal-semana-cabeca span { padding: var(--e2) var(--e3); color: var(--tinta-2); font-weight: 650; }
.cal-grade[data-visao="mes"] .cal-dia { gap: 3px; background: none; border: 0; border-top: 1px solid var(--linha); border-right: 1px solid var(--linha); border-radius: 0; }
.cal-grade[data-visao="mes"] .cal-semana-cabeca + .cal-semana .cal-dia { border-top: 0; }
.cal-grade[data-visao="mes"] .cal-semana .cal-dia:last-child { border-right: 0; }
.cal-grade[data-visao="mes"] .cal-dia[data-fora="sim"] { background: var(--papel); }
.cal-grade[data-visao="mes"] .cal-dia[data-hoje="sim"] { box-shadow: none; }
.cal-grade[data-visao="mes"] .cal-dia[data-selecionado="sim"] { box-shadow: inset 0 0 0 2px var(--foco); background: var(--fundo-selecao); }

.cal-item { border-left: 0; border: 1px solid transparent; border-radius: var(--r); background: var(--fundo-info); }
.cal-item[data-item="mensagem"] { background: var(--fundo-aviso); }
.cal-item[data-item="contato"] { background: var(--papel-3); border: 1px dashed var(--linha-forte); }
.cal-item[data-item="mensagem"][data-estado="por_sair"] { border: 1px dotted var(--linha-forte); }
.cal-item[data-estado="atrasado"] { border-color: var(--marca-atraso); }
.cal-item[data-item] { border-left: 1px solid transparent; }
.cal-item[data-item="contato"] { border-left: 1px dashed var(--linha-forte); }
.cal-item[data-item="mensagem"][data-estado="por_sair"] { border-left: 1px dotted var(--linha-forte); }
.cal-hora { color: var(--tinta-2); }

.cal-agenda { margin-top: var(--e5); padding: var(--e4) var(--e5); background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--r-g); }
.cal-agenda-titulo { font-size: var(--t-g); margin-bottom: var(--e3); }
.cal-agenda-lista { max-width: none; }

/* Fila: campo de resposta e confirmação do envio (fila-mensagens-e-envio, ticket 02). */
.fila-envio { display: grid; gap: var(--e2); margin: var(--e3) 0; max-width: 42rem; }
.fila-envio label { font-weight: 600; font-size: var(--t-p); }
.fila-envio textarea { width: 100%; padding: var(--e2) var(--e3); border: 1px solid var(--borda); border-radius: var(--r); font: inherit; resize: vertical; }
.fila-envio-previa { margin: 0; padding: var(--e2) var(--e3); border-left: var(--e1) solid var(--destaque); background: var(--superficie-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Marca-texto do lead selecionado no tema escuro: o texto segue claro (--tinta), então o traço fica mais suave para não engolir as letras */
:root[data-tema="escuro"] .lead-linha-selecionada .lead-nome,
:root[data-tema="escuro"] .painel-lead .detalhe-titulo .titulo-pagina { background-image: linear-gradient(transparent 52%, color-mix(in srgb, var(--marca-selecao) 45%, transparent) 52%, color-mix(in srgb, var(--marca-selecao) 45%, transparent) 92%, transparent 92%); }

/* Recursos-de-uso, ticket 03: a nota do próximo passo em destaque (card da Fila e painel do lead). Só tokens. */
.nota-destaque { margin: var(--e2) 0; padding: var(--e2) var(--e3); background: var(--superficie-2); border: 1px solid var(--linha); border-left: 3px solid var(--destaque); border-radius: var(--r-g); white-space: pre-wrap; overflow-wrap: anywhere; }
.nota-destaque b { display: block; font-size: var(--fonte-meta); color: var(--texto-suave); font-weight: 650; }

.exportar-csv { display: table; margin: 0 0 var(--e2) auto; }

/* Calendário no celular (mock): o mês fica numa grade de 7 colunas com a contagem de itens do dia; o toque no dia
   abre a agenda dele logo abaixo. A semana segue em lista. A contagem só existe no mês e só aparece em tela estreita. */
.cal-contagem { display: none; }
@media (max-width: 40rem) {
  .cal-grade[data-visao="mes"] .cal-semana { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal-grade[data-visao="mes"] .cal-semana-cabeca { display: grid; }
  .cal-grade[data-visao="mes"] .cal-semana-cabeca span { padding: var(--e2) 0; text-align: center; font-size: var(--t-p, var(--fonte-meta)); }
  .cal-grade[data-visao="mes"] .cal-dia { min-height: 3.5rem; padding: var(--e1) 0; justify-items: center; align-content: start; }
  .cal-grade[data-visao="mes"] .cal-dia[data-fora="sim"] { display: grid; }
  .cal-grade[data-visao="mes"] .cal-dia-cabeca { display: grid; justify-items: center; gap: 2px; }
  .cal-grade[data-visao="mes"] .cal-dia .cal-item,
  .cal-grade[data-visao="mes"] .cal-dia .cal-mais,
  .cal-grade[data-visao="mes"] .cal-dia .cal-marcar,
  .cal-grade[data-visao="mes"] .cal-dia .cal-hoje { display: none; }
  .cal-grade[data-visao="mes"] .cal-dia[data-hoje="sim"] .cal-dia-numero { background: var(--marca-hoje); color: var(--tinta-marca); border-radius: var(--r); font-weight: 650; }
  .cal-grade[data-visao="mes"] .cal-contagem { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; padding: 0 var(--e1); border-radius: 999px; background: var(--fundo-info); color: var(--tinta); font-size: var(--fonte-meta); font-weight: 650; text-decoration: none; }
}

/* Fila (mock): os botões de ação levam ícone antes do texto. */
#fila-cartao .botao-grande:has(.icone) { display: inline-flex; align-items: center; gap: var(--e2); }