:root {
  /* Tipografia — redesign 2026-08-31 (aprovado a partir do mockup PubliHub Redesign).
     Fallbacks cobrem o caso de o painel abrir sem internet. */
  --font-ui: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* A sidebar é sempre preta (identidade) — estes 3 não mudam no dark. */
  --preto: #131210;
  --preto-suave: #1b1915;
  --dourado-sidebar: #ddbd37;    /* acento sobre a sidebar preta */

  /* --- PALETA CLARA (padrão) --- */
  --dourado: #8f7a24;            /* acento sobre fundo claro: botões, foco, links */
  --dourado-hover: #8f6a1e;
  --dourado-texto: #6b4d00;      /* texto dourado escuro sobre tinta clara (chips) */
  --bg: #f5f4f1;
  --card: #ffffff;
  --surface-2: #faf9f6;          /* hover de linha, fundos rebaixados */
  --border: #e6e2da;
  --border-strong: #d8d2c6;
  --text: #1e1d1b;
  --text-muted: #6b6760;
  --text-faint: #726d62;         /* rótulos de coluna, legendas discretas — ~4,7:1, passa WCAG AA */
  --ok: #2f7a4f;
  --ok-bg: #e6f3ec;
  --warn: #92661a;
  --warn-bg: #f7eeda;
  --danger: #b23b2f;
  --danger-hover: #942f26;
  --danger-bg: #f9e8e5;
  --neutral-bg: #efece5;
  --dourado-bg: rgba(169, 127, 40, 0.12);
  --info: #2f5f9e;
  --info-bg: #e6edf7;
  --roxo: #6d4aa8;
  --roxo-bg: #f0eaf9;
  --sombra-card: 0 1px 2px rgba(17, 16, 14, 0.04), 0 1px 3px rgba(17, 16, 14, 0.03);
  --sombra-modal: 0 12px 40px rgba(17, 17, 16, 0.16);
  --backdrop: rgba(0, 0, 0, 0.5);
  /* aliases pra nomes antigos que apareceram como fallback var(--linha,#..) */
  --linha: var(--border);
  --fundo-hover: var(--surface-2);
  --divisoria: rgba(17, 17, 16, 0.12);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --rail-w: 64px;   /* sidebar recolhida (padrão) — só ícone */
  --side-w: 190px;  /* sidebar expandida — ícone + nome (2026-09-14: cortada quase pela metade, sobrava espaço vazio depois do nome mais comprido) */
}

/* --- PALETA ESCURA ---
   Dois gatilhos: (1) o SO no modo escuro e o usuário não forçou "claro";
   (2) o usuário escolheu "escuro" no botão do rodapé da sidebar.
   Só os tokens mudam — nenhuma regra de componente sabe do tema.
   A sidebar continua preta (os --preto* não são redefinidos). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dourado: #ddbd37;
    --dourado-hover: #e7c877;
    --dourado-texto: #e7c877;
    --bg: #1a1815;
    --card: #232019;
    --surface-2: #201d17;
    --border: #35312a;
    --border-strong: #474137;
    --text: #ece9e1;
    --text-muted: #a9a294;
    --text-faint: #8b8477;
    --ok: #63bd8a;   --ok-bg: #18271f;
    --warn: #d7a648;  --warn-bg: #2c2515;
    --danger: #e58175; --danger-hover: #b9564a; --danger-bg: #33211e;
    --neutral-bg: #26241d;
    --dourado-bg: rgba(217, 179, 85, 0.15);
    --info: #7fa9dd;  --info-bg: #1b2732;
    --roxo: #ab92d6;  --roxo-bg: #241f32;
    --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.28);
    --sombra-modal: 0 16px 44px rgba(0, 0, 0, 0.5);
    --backdrop: rgba(0, 0, 0, 0.62);
    --divisoria: rgba(255, 255, 255, 0.09);
  }
}
:root[data-theme="dark"] {
  --dourado: #ddbd37;
  --dourado-hover: #e7c877;
  --dourado-texto: #e7c877;
  --bg: #1a1815;
  --card: #232019;
  --surface-2: #201d17;
  --border: #35312a;
  --border-strong: #474137;
  --text: #ece9e1;
  --text-muted: #a9a294;
  --text-faint: #8b8477;
  --ok: #63bd8a;   --ok-bg: #18271f;
  --warn: #d7a648;  --warn-bg: #2c2515;
  --danger: #e58175; --danger-hover: #b9564a; --danger-bg: #33211e;
  --neutral-bg: #26241d;
  --dourado-bg: rgba(217, 179, 85, 0.15);
  --info: #7fa9dd;  --info-bg: #1b2732;
  --roxo: #ab92d6;  --roxo-bg: #241f32;
  --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.28);
  --sombra-modal: 0 16px 44px rgba(0, 0, 0, 0.5);
  --backdrop: rgba(0, 0, 0, 0.62);
  --divisoria: rgba(255, 255, 255, 0.09);
}

* { box-sizing: border-box; }

/* Sem barra de rolagem visível em lugar nenhum do painel — pedido do
   usuário, 2026-09-14. O scroll continua funcionando normal (roda do
   mouse, teclado, arrastar), só a barra em si some. */
* {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legado */
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .topbar-titulo, .marca-topo, .kpi-valor {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

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

/* ---------- Layout: sidebar + conteúdo ---------- */

.app {
  display: flex;
  height: 100vh;
}

/* Isolada do conteúdo: altura travada na tela inteira. A marca fica fixa no
   topo e só a .sidebar-nav rola, se a navegação um dia crescer demais —
   não importa o quanto o conteúdo do centro cresça.
   Modo ícone (rail) é o padrão — pedido do usuário, 2026-09-14. A alça no
   canto (.sidebar-alca) expande pra ver os nomes; a escolha fica salva. */
.sidebar {
  width: var(--rail-w);
  flex-shrink: 0;
  height: 100vh;
  overflow-y: hidden;           /* nunca rola como um todo — a marca fica fixa, só a .sidebar-nav rola */
  overflow-x: visible;          /* deixa a alça (.sidebar-alca) aparecer meio pra fora, na borda */
  background: var(--preto);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 0 10px;
  /* Sombra na divisa com a área de conteúdo — z-index pra ela passar por
     cima da .main-area (irmã seguinte no flex, que senão a cobriria). */
  position: relative;
  z-index: 2;
  box-shadow: 3px 0 12px rgba(17, 17, 16, 0.18);
  transition: width 0.22s cubic-bezier(.4,0,.2,1);
}

html[data-sidebar="expandida"] .sidebar { width: var(--side-w); }

/* Por padrão só a seta aparece (sem bolinha) — passar o mouse é que revela
   o "botão" (fundo + borda + sombra), nas duas direções (expandir e
   recolher são o mesmo elemento, só o SVG gira). Pedido do usuário,
   2026-09-14. */
.sidebar-alca {
  position: absolute;
  top: 50%;
  right: -11px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  box-shadow: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.sidebar-alca:hover {
  color: #17140c;
  background: var(--dourado-sidebar);
  border-color: var(--dourado-sidebar);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transform: translateY(-50%) scale(1.08);
}
.sidebar-alca svg { width: 13px; height: 13px; transition: transform 0.22s ease; }
html[data-sidebar="expandida"] .sidebar-alca svg { transform: rotate(180deg); }

/* Marca (M) no rodapé da sidebar, não mais no topo (pedido do usuário,
   2026-09-14) — a .sidebar-nav tem flex:1 e cresce sozinha até aqui, então
   isso já fica colado embaixo sem precisar de margin-top:auto. Compacta
   também: a lista de menu precisa caber inteira na tela sem rolar (ver
   .nav-item/.nav-secao-label mais abaixo — sem barra de rolagem visível,
   sobrar item cortado é bug, não é opção). */
.sidebar-topo {
  height: 46px;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  margin-top: 4px;
}

.marca-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

html:not([data-sidebar="expandida"]) .marca-topo { display: none; }

.marca-icone {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--dourado-sidebar);
  color: #17140c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
}

.marca-topo {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.marca-topo-max { color: #fff; }
.marca-topo-hub { color: var(--dourado-sidebar); }
.marca-topo-ia {
  color: rgba(255,255,255,0.4);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-left: 1px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-height: 0;               /* deixa o flex child encolher */
  overflow-y: auto;            /* só a lista rola, e só se realmente não couber */
  scrollbar-width: none;
  padding: 0 8px;
  /* Os ícones ficam na mesma posição de antes de a marca (M) descer pro
     rodapé — pedido do usuário, 2026-09-14 — em vez de subir pra colar no
     topo. 50px = altura+margem que a marca tinha ali antes. */
  margin-top: 50px;
}
.sidebar-nav::-webkit-scrollbar { width: 0; height: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: rgba(255,255,255,0.62);
  text-align: left;
  padding: 6px 10px;
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  position: relative;
  transition: background 0.16s ease, color 0.16s ease;
}

.nav-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.9;
}

.nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.nav-item.ativo {
  color: var(--dourado-sidebar);
  background: rgba(217, 179, 85, 0.13);
  font-weight: 600;
}
.nav-item.ativo::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 5px;
  bottom: 5px;
  width: 2.5px;
  border-radius: 0 3px 3px 0;
  background: var(--dourado-sidebar);
}

.nav-item.desabilitado {
  opacity: 0.4;
  cursor: default;
}
.nav-item.desabilitado:hover { background: transparent; color: rgba(255,255,255,0.75); }

.nav-secao-label {
  margin: 4px 10px 2px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.nav-secao-label:first-child { margin-top: 0; }

/* Modo ícone (padrão): centraliza o ícone e esconde o nome — a dica
   flutuante com o nome (.nav-tooltip, injetada pelo app.js fora da
   sidebar) aparece ao passar o mouse. Não dá pra deixar isso só em CSS
   (::hover + position:absolute) porque a .sidebar-nav precisa manter
   overflow-y:auto pra rolar se a navegação crescer, e isso trava o
   overflow-x junto (regra do próprio CSS Overflow) — cortaria a dica. */
html:not([data-sidebar="expandida"]) .nav-secao-label { display: none; }
html:not([data-sidebar="expandida"]) .nav-item { justify-content: center; }
html:not([data-sidebar="expandida"]) .nav-item > span { display: none; }

.nav-tooltip {
  position: fixed;
  background: #1d1b17;
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  z-index: 100;
  box-shadow: var(--sombra-modal);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.nav-tooltip.visivel { opacity: 1; }

.sidebar-subnav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 6px 20px;
}

.sidebar-subnav-item {
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: rgba(255,255,255,0.55);
  text-align: left;
  padding: 8px 12px;
  font-size: 0.85rem;
  cursor: pointer;
}

.sidebar-subnav-item:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
}

.sidebar-subnav-item.ativo {
  color: var(--dourado-sidebar);
  background: rgba(217, 179, 85, 0.12);
  font-weight: 600;
}

/* Tema + Sair agora ficam no topbar (não mais no rodapé da sidebar) — abre
   espaço pra navegação e alinha o respiro com o topo do conteúdo. */
.topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topbar-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar-btn:hover {
  border-color: var(--dourado);
  color: var(--dourado);
}
/* Empurra o grupo Tema + Sair + data pra ponta direita; título e busca
   ficam à esquerda. */
#btn-tema { margin-left: auto; }

/* .app agora tem 3 colunas de altura: sidebar (cheia) e .main-area (que por
   sua vez empilha topbar fixo + conteúdo com scroll próprio) — decisão do
   usuário, 2026-08-21, piloto de redesenho: sidebar + topbar + aba
   Clientes primeiro, resto do sistema roda depois em cima do mesmo padrão. */
/* main-area inteiro rola como um bloco só (título + conteúdo) — sem barra
   fixa no topo e sem linha separando os dois, pedido do usuário
   (2026-09-14), a partir da maquete: o "Bom dia" some junto com o resto ao
   rolar, não fica preso. */
.main-area {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  padding: 32px 40px 0;
  background: transparent;
}

.topbar-titulo {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-faint);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.topbar-busca:focus-within {
  background: var(--card);
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px var(--dourado-bg);
}
.topbar-busca svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-busca input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.88rem;
  color: var(--text);
  width: 100%;
  font-family: inherit;
}
.topbar-busca.escondida { display: none; }

.topbar-data {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  text-transform: capitalize;
}

/* Título/subtítulo que já viraram o <h1> do topbar não precisam mais
   aparecer dentro da própria seção — só escondidos (não removidos do DOM)
   pra não obrigar reescrever o JS que ainda referencia esses elementos. */
.topbar-oculta-titulo { display: none; }
.secao-topo:has(.topbar-oculta-titulo) { justify-content: flex-end; }

.conteudo {
  padding: 22px 40px 60px;
  min-width: 0;
}

.secao.escondida { display: none; }

/* ---------- Conteúdo (tabelas, botões) ---------- */

.secao-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.secao-topo h2 { margin: 0; font-size: 1.3rem; }

.secao-topo-acoes { display: flex; gap: 8px; }

/* Sem borda/sombra própria — as tabelas hoje sempre ficam dentro de um
   .painel-card, que já dá o contorno arredondado + sombra do sistema. */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: var(--r-md);
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

td { font-variant-numeric: tabular-nums; }

th {
  background: transparent;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--surface-2); }

/* Bolha com a inicial do nome, antes do nome do cliente na tabela — mesmo
   dourado do resto da marca, em vez de um avatar de foto que não existe
   pra pessoa jurídica. */
.linha-com-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar-iniciais {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--dourado-bg);
  color: var(--dourado-hover);
  font-weight: 700;
  font-size: 0.85rem;
}

.botao-primario, .botao-secundario, .botao-acao {
  border: none;
  border-radius: var(--r-sm);
  padding: 8px 16px;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.botao-primario, .botao-secundario {
  padding: 10px 20px;
  font-size: 0.92rem;
  font-weight: 600;
}

.botao-primario {
  background: var(--dourado);
  color: #17140c; /* quase-preto sobre o dourado — ~5,2:1 (branco dava ~3,6:1, falhava AA) */
}
.botao-primario:hover { background: var(--dourado-hover); }
.botao-primario.perigo { background: var(--danger-btn); color: #fff; }
.botao-primario.perigo:hover { background: var(--danger-hover); }

.botao-secundario {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border-strong);
  margin-right: 8px;
}
.botao-secundario:hover { border-color: var(--text-faint); }

.botao-acao {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 7px 12px;              /* ~30px de altura — era 5px 11px (~26px), no limite da WCAG 2.5.8 */
  font-size: 0.82rem;
  margin-right: 4px;
  margin-bottom: 4px;
}
.botao-acao:hover { background: var(--card); color: var(--text); border-color: var(--border-strong); }
.botao-acao.perigo { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.botao-acao.botao-acao-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }

/* "Melhorar com IA" no Briefing interno (2026-08-31) — mesmo botão-ação,
   com o acento dourado da marca pra se destacar como ação de IA. */
.briefing-melhorar-ia {
  background: var(--dourado-bg);
  color: var(--dourado-hover);
  border-color: transparent;
  align-self: flex-start;
  margin-top: 6px;
}
.briefing-melhorar-ia:hover { background: var(--dourado); color: #17140c; }
.botao-acao:disabled { opacity: 0.5; cursor: default; }

/* Linha de ações + menu "⋯" (achado da auditoria de layout, 2026-09-13):
   Contratos chegava a empilhar 6 botões coloridos por linha, cada um com
   uma cor, quebrando em altura diferente por linha. Fica só o mais comum
   fixo (Editar/Gerar PDF); o resto (enviar, e-mail de parcela, encerrar)
   entra nesse menu — mesma ação, tela muito mais enxuta. Marcação genérica
   (.menu-mais), reaproveitável em qualquer outra tabela. */
.acoes-linha { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.menu-mais { position: relative; display: inline-flex; }
.botao-mais { padding: 7px 10px; font-weight: 700; letter-spacing: 0.02em; }
.menu-mais-lista {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 210px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--sombra-modal);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.menu-mais-lista.escondida { display: none; }
.menu-mais-item {
  width: 100%; text-align: left; background: none; border: none; border-radius: var(--r-sm);
  padding: 9px 10px; font-size: 0.82rem; font-family: inherit; color: var(--text);
  cursor: pointer;
}
.menu-mais-item:hover { background: var(--surface-2); }
.menu-mais-item.perigo { color: var(--danger); }
.menu-mais-item.perigo:hover { background: var(--danger-bg); }
.menu-mais-item:disabled { opacity: 0.5; cursor: default; }
.menu-mais-item:disabled:hover { background: none; }

.relatorio-performance-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.relatorio-performance-filtros {
  display: flex;
  gap: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}
.relatorio-performance-filtros .filtro-ruim:hover { background: var(--danger-bg); color: var(--danger); }
.relatorio-performance-filtros .filtro-boa:hover { background: var(--dourado-bg); color: var(--dourado-hover); }
.relatorio-performance-filtros .filtro-excelente:hover { background: var(--ok-bg); color: var(--ok); }
#btn-enviar-relatorio-cliente { margin-left: auto; margin-right: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--neutral-bg);
  color: var(--text-muted);
  white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }

/* Coluna "Briefing" da aba Briefing: por quem foi preenchido + barra de
   quanto está preenchido. A cor só marca o estado "completo" (verde); em
   andamento fica no dourado neutro do painel. */
.bfstat { display: flex; flex-direction: column; gap: 5px; min-width: 128px; max-width: 168px; }
.bfstat-top { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.bfstat-pct { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.bfstat-check { color: var(--ok); font-weight: 700; }
.bfstat.is-ok .bfstat-top,
.bfstat.is-ok .bfstat-pct { color: var(--ok); }
.bfstat-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--neutral-bg);
  overflow: hidden;
}
.bfstat-barra > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--dourado);
}
.bfstat.is-ok .bfstat-barra > span { background: var(--ok); }
.bfstat-pendente {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--neutral-bg);
  color: var(--text-muted);
}
.bfstat-na { color: var(--text-faint); }

/* Nome do cliente/contrato: destaca quem está ativo, apaga quem não está —
   reforça visualmente a ordenação "ativos primeiro" das tabelas. */
.nome-cliente-ativo { font-weight: 700; color: var(--text); }
.nome-cliente-inativo { color: var(--text-muted); font-weight: 400; }

/* ---------- Toast (confirmação rápida de ação: salvou, enviou, excluiu)
   ---------- */

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 60;
  max-width: min(360px, calc(100vw - 52px));
  padding: 16px 28px;
  border-radius: var(--r-md);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--sombra-modal);
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid rgba(47,122,79,0.3);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.toast-visivel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto; /* precisa pra pausar no hover (JS em app.js) */
}

.toast.toast-erro {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: rgba(178,59,47,0.3);
}

/* ---------- Modais ---------- */

.modal-fundo {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.modal-fundo.escondida { display: none; }

.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-modal);
  padding: 28px;
  width: min(420px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal h3 { margin: 0 0 2px; font-size: 1.15rem; font-weight: 700; }

/* Gerar legenda (2026-09-04, modal de tarefa de conteúdo) — botão, caixa
   com o resultado, botão de copiar, empilhados com gap menor que o resto
   do modal (que já tem 14px por padrão). */
#tarefa-detalhe-legenda { display: flex; flex-direction: column; gap: 8px; }
#tarefa-detalhe-legenda-texto,
#input-rodape-legenda {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  font: inherit;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
}

/* Modal maior (2026-09-04) — pra caber legenda + rodapé inteiros numa tela
   de computador normal, sem precisar de barra de rolagem dentro do modal.
   Regra de layout do usuário: telas de trabalho não podem ficar espremidas. */
.modal.modal-grande { width: min(680px, 94vw); }
.modal.modal-grande #tarefa-detalhe-legenda-texto { min-height: 320px; }

/* Campo opcional com destaque leve (2026-09-15) — pra chamar atenção sem
   virar aviso/alerta (não usa --warn). "Instruções extras" na hora de gerar
   cronograma é o primeiro caso: precisa ser visto e considerado toda vez,
   não uma linha discreta que passa despercebida no meio do formulário. */
.campo-destaque {
  background: var(--dourado-bg);
  border: 1px solid var(--dourado);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.campo-destaque textarea, .campo-destaque input {
  background: var(--card);
}

/* ---------- Modal em 2 colunas ----------
   Padrão pros modais com muitos campos (cliente, contrato, agenda, lead,
   despesa, ativação manual, ideia de conteúdo): mais largo e com os campos
   lado a lado, pra caber na tela sem barra de rolagem. Decisão do usuário,
   2026-08-31. */
.modal.modal-2col {
  width: min(720px, 94vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  align-content: start;
}
/* Ocupam a linha inteira: título, ações, avisos, textos, o 1º campo, e
   qualquer campo que embrulhe um bloco (textarea, lista de checkboxes,
   seletor múltiplo) ou seja um checkbox solto. */
.modal.modal-2col > h3,
.modal.modal-2col > .modal-acoes,
.modal.modal-2col > .modal-erro,
.modal.modal-2col > .texto-explicativo,
.modal.modal-2col > .campo-checkbox,
.modal.modal-2col > .campo-largo,
.modal.modal-2col > label:first-of-type,
.modal.modal-2col > label:has(textarea),
.modal.modal-2col > label:has(.checkboxes),
.modal.modal-2col > label:has(.select-multiplo) {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .modal.modal-2col { grid-template-columns: 1fr; }
}

/* Modal "Novo cliente" — mais largo, pra caber tudo sem rolar de jeito
   nenhum (pedido explícito do usuário, 2026-09-14). Os campos curtos
   (Nome Fantasia, Ramo, Responsável, CPF, E-mail, Como chegou) são
   labels soltas, caem sozinhas nas 2 colunas do .modal-2col — pedido do
   usuário, 2026-10-01: Ramo ao lado do Nome Fantasia, resto ajustado à
   largura da janela em vez de uma grade de 3 colunas apertada. */
#form-cliente { width: min(840px, 94vw); }

/* Modal "Meus dados de contrato" — 4 campos (o 4º só aparece pra CNPJ).
   Padding e gap um pouco menores pra caber inteiro numa tela de laptop
   sem barra de rolagem (pedido explícito do usuário). */
#form-dados-contratada { padding: 22px; gap: 11px; }
#form-dados-contratada textarea { min-height: 0; }


/* Modal de confirmação — substitui o confirm() nativo do navegador (que
   sempre abre no canto superior esquerdo e não dá pra estilizar). */
.modal-confirmar h3 {
  color: var(--danger);
  font-size: 1.1rem;
}
.confirmar-mensagem {
  white-space: pre-line;
  line-height: 1.5;
  color: var(--text);
}

/* Bloco de detalhe opcional do modal de confirmação — hoje usado só pra
   listar os compromissos da Agenda que somem junto ao excluir um
   cronograma. */
.confirmar-detalhe {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: 12px 14px;
  max-height: 34vh;
  overflow-y: auto;
  font-size: 0.88rem;
  line-height: 1.45;
}
.confirmar-detalhe.escondida { display: none; }
.confirmar-detalhe-intro { margin: 0 0 8px; color: var(--text); }
.confirmar-detalhe-intro:not(:first-child) { margin-top: 10px; }
.confirmar-detalhe-vazio { margin: 0; color: var(--text-muted); }
.confirmar-detalhe-alerta { color: var(--danger); font-weight: 600; }
.confirmar-detalhe-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.confirmar-detalhe-lista li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px;
}
.confirmar-detalhe-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}
.confirmar-detalhe-titulo { color: var(--text); }
.confirmar-detalhe-data { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.modal label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.modal input, .modal select, .modal textarea {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--card);
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none;
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px var(--dourado-bg);
}

.fieldset-data-gravacao {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px 12px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 16px;
  align-content: start;
}
.fieldset-data-gravacao legend {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dourado);
  padding: 0 4px;
}
/* Responsável (select) ocupa a linha toda do fieldset. */
.fieldset-data-gravacao > label:last-child { grid-column: 1 / -1; }

/* ---------- Modal Gerar/Continuar Cronograma ----------
   Mais largo e com os campos em 2 colunas pra caber sem rolar no caso comum
   (1 dia de gravação). Decisão do usuário, 2026-08-31. */
#form-cronograma {
  width: min(760px, 94vw);
  max-height: 92vh;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 22px;
  align-content: start;
}
#form-cronograma > .texto-explicativo { margin: 2px 0 0; }
/* Cliente, o bloco de datas de gravação, ações e avisos — linha inteira. */
#form-cronograma > h3,
#form-cronograma > label:first-of-type,
#form-cronograma > .campo-largo,
#form-cronograma > .campo-destaque,
#form-cronograma > .modal-acoes,
#form-cronograma > .texto-explicativo,
#form-cronograma > .modal-erro {
  grid-column: 1 / -1;
}
#form-cronograma > .campo-destaque textarea { width: 100%; min-height: 70px; }
/* 1 dia de gravação: o fieldset ocupa a linha toda e os campos ficam em 2
   colunas (compacto, cabe sem rolar). */
#cronograma-datas-gravacao {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
/* 2+ dias: os fieldsets ficam lado a lado (2 por linha) e, dentro de cada
   um, os campos empilham — assim 2 dias ainda cabem sem rolar. */
#cronograma-datas-gravacao:has(.fieldset-data-gravacao:nth-child(2)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
#cronograma-datas-gravacao:has(.fieldset-data-gravacao:nth-child(2)) .fieldset-data-gravacao {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 680px) {
  #form-cronograma,
  .fieldset-data-gravacao,
  #cronograma-datas-gravacao:has(.fieldset-data-gravacao:nth-child(2)) { grid-template-columns: 1fr; }
}

/* ---------- Modal Gerar Guia de Anúncios ----------
   Mesmo espírito do #form-cronograma acima: mais largo, 2 colunas, sem
   rolar — e a caixa de "instruções extras" ocupando a largura toda pra
   ficar bem maior (pedido do usuário, 2026-09-15). */
#form-guia-anuncios {
  width: min(640px, 94vw);
  max-height: 92vh;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 22px;
  align-content: start;
}
#form-guia-anuncios > .texto-explicativo { margin: 2px 0 0; }
#form-guia-anuncios > h3,
#form-guia-anuncios > label:first-of-type,
#form-guia-anuncios > .campo-destaque,
#form-guia-anuncios > .modal-acoes,
#form-guia-anuncios > .texto-explicativo,
#form-guia-anuncios > .modal-erro {
  grid-column: 1 / -1;
}
#form-guia-anuncios > .campo-destaque textarea { width: 100%; min-height: 90px; }
@media (max-width: 680px) {
  #form-guia-anuncios { grid-template-columns: 1fr; }
}

/* Cronograma avulso (2026-09-11) — mesmo espírito do #form-cronograma
   acima (mais largo, 2 colunas, sem rolar): usuário achou o modal
   apertado e com barra de rolagem, pedindo mais espaço e uma caixa de
   texto maior pra "Conte a novidade". Mais simples que o de cima porque
   a data aqui não tem hora/local/duração/responsável (não vira
   compromisso de Agenda — só a data mesmo). */
#form-cronograma-avulso {
  width: min(760px, 94vw);
  max-height: 97vh;
  padding: 16px 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 22px;
  align-content: start;
}
#form-cronograma-avulso > .texto-explicativo { margin: 2px 0 0; }
#form-cronograma-avulso > h3,
#form-cronograma-avulso > label:first-of-type,
#form-cronograma-avulso > .campo-largo,
#form-cronograma-avulso > .modal-acoes,
#form-cronograma-avulso > .texto-explicativo,
#form-cronograma-avulso > .modal-erro {
  grid-column: 1 / -1;
}
#form-cronograma-avulso textarea[name="textoNovidade"] { min-height: 185px; }
/* "Conte a novidade" e os 4 campos de número lado a lado (mesma linha da
   grade), em vez de empilhados. Os 4 campos em si viram 2x2 (não uma
   coluna de 4) pra não ficarem mais altos que a caixa de texto — senão
   são eles que estufam o modal, não a caixa (2026-09-14). */
.cronograma-avulso-coluna {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: start;
}
/* Só a data (sem hora/local/responsável) — cabe várias por linha. */
#cronograma-avulso-datas {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 16px;
}
#cronograma-avulso-datas label { flex: 1 1 160px; }
@media (max-width: 680px) {
  #form-cronograma-avulso { grid-template-columns: 1fr; }
}

/* ---------- Briefing (formulário inline na página central) ---------- */

.briefing-campos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
  margin: 6px 0 16px;
}

.briefing-campos label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: background 0.15s, border-color 0.15s;
}

.briefing-campos .campo-largo { grid-column: 1 / -1; }

/* Título de seção — igual ao modelo do site (decisão do usuário,
   2026-08-25), agrupa os campos em "Sobre o negócio", "Presença digital"
   etc. Primeiro grupo sem borda/margem de cima pra não sobrar espaço vazio
   no topo do formulário. */
.briefing-secao-titulo {
  grid-column: 1 / -1;
  margin: 22px 0 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dourado-hover);
}
.briefing-secao-titulo:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Legenda visível abaixo do label — igual ao .campo__ajuda do site (antes
   só existia como placeholder, que some ao digitar). Decisão do usuário,
   2026-08-25. */
.briefing-campos .campo-ajuda {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: -2px;
}

/* Destaque não é mais fixo em campos específicos (decisão do usuário,
   2026-08-21: "sempre que eu clicar numa caixinha pra preencher, ela fica
   em destaque" — tirou o destaque permanente de campos como "Objetivos com
   a Agência PUBLI"). Agora é dinâmico: qualquer campo ganha a caixinha dourada
   só enquanto está sendo preenchido (:focus-within, porque o clique cai no
   input/textarea/select dentro do label, não no label em si). */
.briefing-campos label:focus-within,
.briefing-campos .checkboxes:focus-within {
  background: var(--dourado-bg);
  border-color: var(--dourado);
  color: var(--text);
}

/* Destaque fixo pra "Objetivos com a Agência PUBLI" e "Demandas mais urgentes" —
   igual ao .campo--peso do site. Reverte a remoção de destaque fixo de
   2026-08-21 especificamente pra esses 2 campos (decisão do usuário,
   2026-08-25: esses pesam mais no planejamento que o resto do briefing). */
.briefing-campos label.campo-peso {
  background: var(--dourado-bg);
  border-color: var(--dourado);
  color: var(--text);
}
/* Wrapper próprio pra nome + selo ficarem numa linha só — sem isso, o
   <span> do selo vira item direto do label (display:flex; column) e
   estica pra largura inteira em vez de ficar como pílula ao lado do
   texto. */
.briefing-campos .campo-titulo-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.briefing-campos .campo-peso-selo {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--preto);
  background: var(--dourado);
  padding: 3px 9px;
  border-radius: 999px;
}

.briefing-campos input,
.briefing-campos select,
.briefing-campos textarea {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--card);
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.briefing-campos input:focus,
.briefing-campos select:focus,
.briefing-campos textarea:focus {
  outline: none;
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px var(--dourado-bg);
}

.briefing-campos .checkboxes {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--card);
}

@media (max-width: 760px) {
  .briefing-campos { grid-template-columns: 1fr; }
}

/* Seção "Endereços" — repetível, uma unidade por card. Separada
   visualmente das outras porque tem estrutura própria (vários campos por
   item, não um texto/número só). */
.campo-enderecos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.campo-enderecos-titulo {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.campo-enderecos-ajuda {
  margin: -4px 0 0;
  font-weight: 400;
}

.enderecos-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.endereco-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
  transition: border-color 0.15s;
}

.endereco-card:focus-within {
  border-color: var(--dourado);
}

.endereco-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
  padding: 0;
  border: none;
}

/* Dentro de um card, só a borda do card acende — não cada campinho junto
   (decisão do usuário, 2026-08-21: "as caixinhas de dentro fica sem
   destaque... deixa somente as bordas"). Sem isso, cada label interno
   herdava o :focus-within geral de .briefing-campos label e acendia junto
   com a borda do card, ficando poluído. */
.endereco-card label:focus-within {
  background: none;
  border-color: transparent;
  color: var(--text-muted);
}

.endereco-card-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.endereco-card-remover {
  align-self: flex-start;
}

/* ---------- Materiais (fotos, vídeos, logo, fontes, identidade visual —
   anexados de verdade, dentro do Briefing) ---------- */

.materiais-secao {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.materiais-secao .secao-topo { margin-bottom: 4px; }
.materiais-secao .secao-topo h4 { margin: 0; font-size: 1rem; }

.materiais-lista { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }

.materiais-grupo-titulo {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.materiais-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.materiais-item + .materiais-item { margin-top: 6px; }

.materiais-item-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
}

.materiais-item-tamanho {
  color: var(--text-muted);
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* Marcar foto como referência pra IA (2026-09-14) — só aparece em
   arquivos de imagem (ver a.ehImagem no render). */
.materiais-item-referencia {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.materiais-item-referencia input { width: auto; margin: 0; cursor: pointer; }
.materiais-referencia-contador { margin: 2px 0 0; font-size: 0.78rem; }

/* Dois cronogramas lado a lado em vez de cards esticados full-width — cada
   um ocupa metade da largura disponível. */
#lista-cronogramas-cliente {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

@media (max-width: 900px) {
  #lista-cronogramas-cliente { grid-template-columns: 1fr; }
}

.cronograma-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  background: var(--card);
  box-shadow: var(--sombra-card);
  min-width: 0;
}

/* Card em edição ocupa a largura das duas colunas — o textarea grande não
   cabe bem espremido na metade da página. */
.cronograma-card--editando {
  grid-column: 1 / -1;
}

.cronograma-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.cronograma-linha-data {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}
.cronograma-linha-data strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
}
/* Duração/período — informação de apoio, não o título. Peso mais leve pra
   não competir com o nome do documento, e linha PRÓPRIA embaixo do
   título/badges/botão (pedido do usuário, 2026-09-15) — antes vivia
   dentro da mesma linha flexível do título, e empurrava o botão Excluir
   pra baixo dela (sobrava vão vazio à direita em vez do botão). Separado
   assim, a 1ª linha nunca quebra por causa do texto de apoio. */
.cronograma-linha-meta {
  display: block;
  margin: 2px 0 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.cronograma-linha-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.cronograma-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Caixa de pedido de revisão pra IA, dentro da edição do cronograma —
   borda dourada pra destacar que é uma ação diferente de "editar na mão". */
.cronograma-ia {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 6px;
}

.cronograma-ia-textarea {
  flex: 1;
  min-width: 0;
  resize: vertical;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--dourado);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}

.cronograma-ia button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Cada cronograma mostra 3 "funções" separadas e nomeadas — Cronograma,
   Roteiro, Resumo de Gravação — pra ficar óbvio de qual documento cada
   botão é, em vez de uma fileira só de botões sem contexto. */
.cronograma-grupos {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cronograma-grupo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.cronograma-grupo-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  width: 132px;
  flex-shrink: 0;
}

.cronograma-grupo-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* .botao-acao (links de PDF) e .botao-secundario (Editar) têm paddings
   diferentes por padrão — aqui dentro precisam parecer o mesmo tamanho de
   botão, já que ficam lado a lado se referindo à mesma "função". */
.cronograma-grupo-acoes .botao-acao,
.cronograma-grupo-acoes .botao-secundario {
  padding: 6px 12px;
  font-size: 0.82rem;
  margin: 0;
}

/* Estado "gerando automaticamente" (Roteiro/Guia de Gravação/Guia de
   Preparação logo depois do Cronograma ser confirmado) — próprio, em vez de
   reaproveitar .texto-explicativo (que tem margem negativa pensada pra
   ficar embaixo de campo de formulário e desalinhava aqui dentro do
   .cronograma-grupo). Cor de "em andamento" (--info), igual o resto do
   painel usa pra status informativo/neutro — não é aviso nem erro. */
.cronograma-gerando {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--info);
  font-size: 0.82rem;
  font-weight: 600;
}

.cronograma-gerando .pontinhos {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.cronograma-gerando .pontinhos span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: cronograma-gerando-pulso 1.1s ease-in-out infinite;
}

.cronograma-gerando .pontinhos span:nth-child(2) { animation-delay: 0.15s; }
.cronograma-gerando .pontinhos span:nth-child(3) { animation-delay: 0.3s; }

@keyframes cronograma-gerando-pulso {
  0%, 60%, 100% { opacity: 0.25; transform: scale(0.75); }
  30% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cronograma-gerando .pontinhos span { animation: none; opacity: 0.7; }
}

.cronograma-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.cronograma-downloads a.botao-acao {
  text-decoration: none;
  background: var(--dourado-bg);
  color: var(--dourado-hover);
  font-weight: 600;
}
.cronograma-downloads a.botao-acao:hover { background: var(--dourado); color: var(--preto); }

.cronograma-textarea {
  width: 100%;
  min-height: 90px;
  /* Cresce até o tamanho real do texto (ver ajustarAlturaTextarea em
     app.js) — sem isso um documento curto sobrava um vão vazio enorme
     dentro da caixa (achado do usuário, 2026-09-15). overflow:hidden tira
     a barra de rolagem que apareceria por 1 frame antes do JS ajustar. */
  overflow: hidden;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 6px 0 10px;
  resize: vertical;
}

.checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.9rem;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--card);
}
.checkboxes label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text);
}
.checkboxes input { width: auto; }

/* Sem rolagem em modal nenhum (pedido do usuário, 2026-09-14) — o rodapé
   fixo/sticky foi removido de propósito: a solução é cada modal caber
   inteiro na tela (ver .modal-2col e as larguras específicas abaixo),
   não rolar por dentro. */
.modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.modal-erro {
  color: var(--danger);
  font-size: 0.85rem;
  margin: 0;
}
.modal-erro.escondida { display: none; }

.prompt-ajuda {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin: -4px 0 0;
  line-height: 1.45;
}
.prompt-ajuda.escondida { display: none; }

/* ---------- Parcelas ---------- */

.lista-parcelas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parcela-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px;
  border-left: 4px solid var(--border);
  border-radius: var(--r-md);
  /* Fundo levemente cinza (não branco puro) — essas linhas hoje sempre
     ficam dentro de um cartão branco (.painel-card ou
     .grupo-cliente-parcelas), então precisam de um pouco de contraste
     pra não sumir no fundo do cartão. */
  background: var(--bg);
}

.parcela-linha.pendente { border-left-color: var(--dourado); }
.parcela-linha.paga { border-left-color: var(--ok); }
.parcela-linha.atrasada { border-left-color: var(--danger); background: var(--danger-bg); }
.parcela-linha.ultimo-mes { border-left-color: var(--warn); background: var(--warn-bg); }

/* Filete à esquerda por tipo — cards Compromissos e Tarefas do Início.
   A cor casa com a etiqueta (badge) de cada linha. */
.parcela-linha.linha-tipo-info { border-left-color: var(--info); }
.parcela-linha.linha-tipo-dourado { border-left-color: var(--dourado); }
.parcela-linha.linha-tipo-roxo { border-left-color: var(--roxo); }
.parcela-linha.linha-tipo-ok { border-left-color: var(--ok); }
.parcela-linha.linha-tipo-neutro { border-left-color: var(--text-faint); }

.parcela-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}

.parcela-mes {
  font-weight: 700;
  font-size: 0.95rem;
}

.parcela-data {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.parcela-valor {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.parcela-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.botao-pequeno {
  padding: 6px 12px;
  font-size: 0.82rem;
}

.escondida { display: none !important; }
/* atributo `hidden` (usado via el.hidden no JS) tem que vencer regras de
   classe que setam display (ex: .campo-checkbox { display:flex }). */
[hidden] { display: none !important; }

#resultado-corpo p { margin: 4px 0; font-size: 0.92rem; }
#resultado-corpo .aviso { color: var(--warn); }
#resultado-corpo a { color: var(--dourado-hover); }

/* Link de acesso (convite de cliente/parceiro pro portal) — tinha fundo
   cinza-claro fixo (#f3f3f3) sem cor de texto definida; no tema escuro o
   texto claro ficava sobre fundo claro, quase ilegível (achado do usuário,
   2026-09-15). Usa os tokens de tema, que já invertem sozinhos. */
.link-copiavel {
  word-break: break-all;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ---------- Dashboard ---------- */

.dashboard-kpi-segunda-linha {
  margin-top: 14px;
}

.dashboard-subtitulo {
  margin: 28px 0 14px;
  font-size: 1.05rem;
}

/* Tarja de resumo — hoje só no Financeiro → Resumo (parcelas atrasadas).
   Os cards do Início não usam mais (decisão do usuário, 2026-08-31): eles
   cortam em 4 linhas e põem "+ N ..." no rodapé. */
.dashboard-atrasadas-resumo {
  margin: 0;
  padding: 12px 16px;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
}

/* Rodapé "+ N ..." dos cards do Início quando passa de 4 itens. */
.dashboard-mais {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Vira botão clicável (leva pra aba correspondente) quando o card tem mais
   itens do que cabe — decisão do usuário, 2026-08-31. */
button.dashboard-mais-link {
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  color: var(--dourado);
}
button.dashboard-mais-link:hover { text-decoration: underline; }

/* ---------- Financeiro ---------- */

.subnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.subnav-item {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 10px 4px;
  margin-right: 20px;
  font-size: 0.92rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.subnav-item:hover { color: var(--text); }

.subnav-item.ativo {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--dourado);
}

.subsecao.escondida { display: none; }

.subsecao h3 { margin: 0; font-size: 1.05rem; }

.texto-explicativo {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: -6px 0 16px;
}

/* Tarja discreta pra texto explicativo "de página" (não embaixo de um campo
   de formulário, onde a margem negativa acima faz sentido) — mesma família
   visual das outras tarjas do sistema (.faixa-backup), só neutra em vez de
   colorida por estado. */
.texto-explicativo.tarja-info {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.grupos-clientes {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.grupo-cliente-parcelas {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-card);
  padding: 18px 20px 20px;
}

.grupo-cliente-header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  border: none;
  background: transparent;
  padding: 0 0 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  /* <button> não herda cor por padrão (usa a cor de botão do SO, ~preta) —
     sem isto o nome do cliente some no modo escuro. */
  color: var(--text);
  text-align: left;
}

.grupo-cliente-seta {
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: transform 0.15s ease;
  transform: rotate(-90deg);
}

.grupo-cliente-parcelas.aberto .grupo-cliente-seta {
  transform: rotate(0deg);
}

.grupo-cliente-nome {
  font-size: 1.05rem;
  font-weight: 700;
}

.grupo-cliente-resumo {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-left: auto;
}

.grupo-cliente-parcelas .lista-parcelas {
  display: none;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.grupo-cliente-parcelas.aberto .lista-parcelas {
  display: flex;
}

.grupo-cliente-parcelas .parcela-linha {
  padding: 10px 14px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px;
}

/* Redesign 2026-08-31: cartão branco com borda fina (borda no lugar de
   fundo colorido) — a cor do "tint" fica só no ícone e no rótulo, como
   sinal, não como preenchimento. */
.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-card);
  padding: 16px 18px 15px;
}

.kpi-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.kpi-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-faint);
}
.kpi-icone svg { width: 16px; height: 16px; }

.kpi-card.tint-ok .kpi-icone { color: var(--ok); }
.kpi-card.tint-warn .kpi-icone { color: var(--warn); }
.kpi-card.tint-danger .kpi-icone { color: var(--danger); }
.kpi-card.tint-dourado .kpi-icone { color: var(--dourado); }
.kpi-card.tint-neutral .kpi-icone { color: var(--text-muted); }

.kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

.kpi-valor {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.kpi-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 6px 0 0;
}

/* Cartão branco pra agrupar seções do Dashboard (Parcelas atrasadas,
   Contratos no último mês etc.) — mesmo tratamento visual dos cards de
   KPI, só que neutro, com sombra suave em vez de cor sólida. */
.painel-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px 22px;
  box-shadow: var(--sombra-card);
  margin-top: 22px;
}

.painel-card > .dashboard-subtitulo {
  margin: 0 0 14px;
}

/* ---------- Início: selos de status + grid bento (2026-09-14) ---------- */
/* Backup/painel viraram selos compactos, na mesma linha da saudação no
   topo (só aparecem na seção Início — ver ativarSecao em app.js) — em vez
   da tarja larga de antes, e sem empilhar embaixo do título. */
.topbar-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.status-pill strong { font-weight: 600; color: var(--text); font-size: 0.78rem; }
.status-pill.tom-warn { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.status-pill.tom-warn strong { color: var(--warn); }
.status-pill.tom-ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.status-pill.tom-ok strong { color: var(--ok); }
.status-pill-sub { white-space: nowrap; }
.status-pill-btn {
  border: none;
  background: var(--dourado);
  color: #17140c;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.status-pill-btn:hover { background: var(--dourado-hover); }

/* Grid bento: blocos de tamanhos diferentes em vez de cartões uniformes
   empilhados — pedido do usuário, 2026-09-14 (a partir da maquete
   aprovada). O bloco de prioridade ocupa 2 colunas x 2 linhas; o resto
   ocupa 2 ou as 4 colunas. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 14px;
}
.bento-grid .painel-card { margin-top: 0; }
.bento-hero {
  grid-column: span 2;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  background: radial-gradient(120% 140% at 0% 0%, var(--dourado-bg), transparent 60%), var(--card);
}
.bento-2 { grid-column: span 2; }
.bento-4 { grid-column: span 4; }
@media (max-width: 1150px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-hero { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-hero, .bento-2, .bento-4 { grid-column: span 1; }
}

.bento-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.bento-hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.bento-hero.tom-perigo .bento-hero-eyebrow { color: var(--danger); }
.bento-hero.tom-atencao .bento-hero-eyebrow { color: var(--warn); }
.bento-hero.tom-ok .bento-hero-eyebrow { color: var(--ok); }
.bento-hero-titulo {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.01em;
}
.bento-hero-titulo b { color: var(--dourado); }
.bento-hero-sub {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 46ch;
}
.bento-hero-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.bento-hero-acoes:empty { display: none; }

/* ---------- Agenda: calendário mensal (estilo Calendário do iPhone) ---------- */

/* Calendário à esquerda (metade da página) + lista de compromissos e
   tarefas do dia à direita, lado a lado. Já passou por três fases: 440px
   fixo (travava demais, decisão velha pra não estourar a tela com
   aspect-ratio:1 nas células) → full-width empilhado (usuário achou
   grande demais) → metade/metade lado a lado (2026-08-21) → altura travada
   no espaço visível da tela, sem nunca precisar rolar pra ver o mês
   inteiro (2026-08-21, mesmo dia — pedido explícito do usuário: "o
   calendário tem que sempre estar todo visível").
   Pra isso, a seção inteira (#secao-agenda) vira uma coluna com a altura
   exata do espaço visível de .conteudo (height:100%, ver regra dedicada
   abaixo) — cabeçalho/parágrafo ficam com altura natural
   (flex-shrink:0 implícito), e .agenda-calendario-layout consome o resto
   (flex:1) e repassa pros dois cards (agora esticados a mesma altura via
   align-items:stretch, cada um flex-column por dentro — ver
   .agenda-calendario-card/.agenda-dia-painel). Empilha numa coluna só se
   a tela não tiver largura pras duas (ex: janela estreita), via
   flex-wrap — nesse caso a altura travada é solta (ver media query no
   fim do bloco), senão os dois cards ficariam espremidos um em cima do
   outro na mesma altura de meia tela. */
/* :not(.escondida) — #secao-agenda (ID) tem especificidade maior que
   .secao.escondida (duas classes); sem esse :not(), o display:flex daqui
   ganhava de display:none e a aba ficava visível mesmo trocando pra
   outra seção. */
#secao-agenda:not(.escondida) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.agenda-calendario-layout {
  display: flex;
  align-items: stretch;
  gap: 22px;
  flex-wrap: wrap;
  flex: 1;
  min-height: 0;
}

.agenda-calendario-layout > .painel-card {
  margin-top: 22px;
}

.agenda-calendario-card {
  flex: 1 1 480px;
  min-width: 360px;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.agenda-dia-painel {
  flex: 1 1 480px;
  min-width: 320px;
  height: 100%;
  overflow-y: auto;
}

/* Janela estreita demais pras duas colunas: os cards empilham
   (flex-wrap acima) — aí travar a altura do calendário na altura da
   seção inteira ficaria espremido contra o painel do dia embaixo dele.
   Solta a altura nesse caso; .conteudo volta a rolar normalmente, só
   pra essa largura. */
@media (max-width: 860px) {
  #secao-agenda { height: auto; }
  .agenda-calendario-card, .agenda-dia-painel { min-height: 480px; }
}

.agenda-dia-painel h3 { margin: 0 0 14px; text-transform: capitalize; }

.agenda-dia-painel-acoes { margin-top: 16px; }

.calendario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.calendario-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendario-nav h3 {
  margin: 0;
  font-size: 1.05rem;
  text-transform: capitalize;
  min-width: 160px;
  text-align: center;
}

.calendario-nav button {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.calendario-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 8px;
}

.calendario-grade {
  display: grid;
  /* minmax(0, 1fr), não só "1fr": sem o 0 explícito, o mínimo de cada
     coluna vira o min-content do texto do chip (que usa white-space:
     nowrap) — como o título de um compromisso pode ser bem mais largo
     que a coluna, o grid inteiro estourava a largura do card em vez de
     encolher (bug real, achado testando com o calendário em ~metade da
     página; no full-width anterior não aparecia por ter espaço sobrando). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* Sempre 6 semanas renderizadas (42 células, ver renderizarCalendarioAgenda
     em app.js), então 6 linhas fixas — minmax(0,1fr) de novo, mesmo motivo
     das colunas: sem o 0, a altura mínima de cada linha vira o min-content
     do conteúdo (número + chips), e o grid nunca encolhe o suficiente pra
     caber na tela. É isso que faz o calendário inteiro (título + 6 semanas)
     sempre caber no espaço visível, sem rolar — pedido do usuário,
     2026-08-21: "o calendário tem que sempre estar todo visível". */
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 4px;
  flex: 1;
  min-height: 0;
}

.calendario-dia {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: 6px;
  font-family: inherit;
  color: var(--text);
}

.calendario-dia:hover { background: var(--neutral-bg); }

.calendario-dia.fora-do-mes { color: var(--text-muted); opacity: 0.45; }

.calendario-dia-numero {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  font-weight: 600;
}

.calendario-dia.hoje .calendario-dia-numero {
  background: var(--dourado);
  color: #1a1500;
}

.calendario-dia.tem-compromisso { background: var(--dourado-bg); }
.calendario-dia.tem-compromisso:hover { background: var(--border); }

/* Data selecionada (compromissos dela aparecem no painel ao lado) —
   contorno em vez de preenchimento, pra não competir com o destaque
   dourado de "tem compromisso" nem com o "hoje". */
.calendario-dia.selecionado { border-color: var(--preto); }

/* Chips por compromisso dentro da célula do dia — antes só existia uma
   bolinha (.calendario-dia-marcador, removida), sem dizer quantos nem de
   que tipo. Cor por tipo de compromisso (Gravação/Reunião com Lead/
   Postagem/Outro), até 3 chips visíveis + "+N" se sobrar. */
.calendario-dia-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.calendario-chip {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  width: 100%;
}

.calendario-chip-gravacao { background: var(--dourado-bg); color: var(--dourado-texto); }
.calendario-chip-reuniao-com-lead { background: var(--ok-bg); color: var(--ok); }
.calendario-chip-contato-lead { background: var(--roxo-bg); color: var(--roxo); }
.calendario-chip-postagem { background: var(--info-bg); color: var(--info); }
.calendario-chip-outro { background: var(--neutral-bg); color: var(--text-muted); }

/* Mesma paleta por tipo, agora como badge (pílula preenchida) — usado no
   resumo do dia da Agenda e no card "Compromissos de hoje e amanhã" do
   início. Decisão do usuário, 2026-08-31. */
.badge-tipo-gravacao { background: var(--dourado-bg); color: var(--dourado-texto); }
.badge-tipo-reuniao-lead { background: var(--ok-bg); color: var(--ok); }
.badge-tipo-contato-lead { background: var(--roxo-bg); color: var(--roxo); }
.badge-tipo-postagem { background: var(--info-bg); color: var(--info); }
.badge-tipo-outro { background: var(--neutral-bg); color: var(--text-muted); }

/* Tarefas de conteúdo (dashboard + Kanban) — mesmo sistema de cor por tipo
   dos Compromissos. Decisão do usuário, 2026-08-31. */
.badge-tipo-video { background: var(--info-bg); color: var(--info); }
.badge-tipo-imagem { background: var(--dourado-bg); color: var(--dourado-texto); }

/* Selo especial sólido (2026-09-15) — pra flag pontual de destaque num
   item de lista (não pra etiqueta de categoria repetida, essas continuam
   com o fundo sutil "-bg" de sempre). Fundo CHEIO na cor + texto na cor do
   próprio card, que inverte sozinho por tema (branco no claro, quase preto
   no escuro) — sempre com contraste alto, texto centralizado. Usado em
   .badge-avulso e .badge-recente, que ficam lado a lado na mesma linha do
   Cronograma e precisam da mesma força visual entre si. */
.badge-solido { font-weight: 700; flex-shrink: 0; justify-content: center; }

/* Cronograma avulso (2026-09-11) — lançamento/novidade pontual, fora da
   Agenda/Tarefas/Demandas. Roxo (já usado noutra categoria do sistema, ver
   .badge-tipo-contato-lead) — só pra não ficar idêntico ao "Mais recente"
   quando os dois aparecem lado a lado (pedido do usuário, 2026-09-15).
   Tamanho normal do badge — só o "Mais recente" cresceu. */
.badge-avulso { background: var(--roxo); color: var(--card); }

/* "Mais recente" — qual registro é o vigente na sequência (Cronograma/
   Guia de Anúncios/Plano de Ação). Dourado, a cor de destaque de sempre no
   resto do sistema. Maior que um badge comum (pedido do usuário,
   2026-09-15) — é o selo mais importante da linha, precisa saltar aos
   olhos mais que qualquer outro ao lado dele. */
.badge-recente {
  background: var(--dourado); color: var(--card);
  padding: 5px 14px; font-size: 0.86rem;
}

.calendario-chip-mais {
  font-size: 0.66rem;
  color: var(--text-muted);
  padding-left: 6px;
}

/* Lista de compromissos do dia (painel à direita do calendário) */

.agenda-dia-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agenda-dia-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}

/* Concluído — some do card "hoje e amanhã" do início, mas continua visível
   aqui na Agenda como histórico (esmaecido, com o título riscado). */
.agenda-dia-item-concluido {
  opacity: 0.6;
  background: var(--surface-2);
}
.agenda-dia-item-concluido .agenda-dia-item-topo strong {
  text-decoration: line-through;
}

.agenda-dia-item-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.agenda-dia-item-info {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.agenda-dia-item-obs {
  font-style: italic;
  color: var(--text);
}

.agenda-dia-item-acoes { margin-top: 8px; }

/* ---------- Tarefas: Kanban de conteúdo (Pendência/Em andamento/Concluído) ---------- */

/* O título da seção (h2) fica escondido (vira o h1 do topbar — ver
   .topbar-oculta-titulo) e a regra geral de .secao-topo joga o resto pra
   direita nesse caso — sobrescrito aqui pra esse filtro ficar à esquerda,
   junto do botão de rodapé, os dois com a MESMA altura/borda/raio (regra
   de layout do usuário: nunca deixar controle nativo do navegador do lado
   de um botão customizado, sem estilizar os dois iguais). */
#secao-publicar .secao-topo { justify-content: flex-start; gap: 14px; }

.tarefas-filtro-cliente-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.tarefas-filtro-cliente-wrap select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
}
#btn-rodape-legenda { margin: 0; }

.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

.kanban-board-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .kanban-board-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kanban-board-4 { grid-template-columns: 1fr; }
}

.kanban-board-5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1300px) {
  .kanban-board-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .kanban-board-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kanban-board-5 { grid-template-columns: 1fr; }
}

.kanban-coluna {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--sombra-card);
}

.kanban-coluna-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.kanban-coluna-contagem {
  background: var(--neutral-bg);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}

.kanban-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 40px;
}

.kanban-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--dourado);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  cursor: pointer;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kanban-card:hover { background: var(--neutral-bg); }

.kanban-lista[data-status="Concluído"] .kanban-card {
  border-left-color: var(--ok);
  cursor: default;
}

.kanban-card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kanban-card-cliente {
  font-weight: 600;
  font-size: 0.9rem;
}

.kanban-card-data {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Observação de reprovação (Fase 3) — nunca texto cinza solto, sempre com
   destaque leve (regra do usuário: aviso importante ganha caixinha/tarja). */
.kanban-card-aviso {
  margin: 6px 0 0;
  padding: 6px 9px;
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Título da postagem (2026-09-04) — identifica cada tarefa no quadro; sem
   ele, 2 tarefas do mesmo cliente/tipo/semana ficam indistinguíveis. Clique
   pra nomear/renomear (ver handler de [data-renomear] em app.js). */
.kanban-card-titulo {
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.kanban-card-titulo--vazio { color: var(--text-muted); font-style: italic; }

/* Data da postagem também editável (2026-09-30) — mesma pista visual do
   título (sublinhado pontilhado), pra ficar óbvio que dá pra clicar. */
.kanban-card-data[data-editar-data] {
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}

/* ✓ Feito / ↺ Desfazer (2026-09-04) — ficam do LADO da data, na mesma
   linha, não empilhados embaixo (senão o card cresce e a coluna vira uma
   lista enorme — regra de layout do usuário, ver CLAUDE.md). Cliques nesses
   botões não devem abrir o card (handler em app.js checa antes). */
.kanban-card-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kanban-card-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kanban-card-feito,
.kanban-card-desfazer {
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
}
.kanban-card-feito {
  color: var(--ok);
  background: var(--ok-bg);
  border: 1px solid var(--ok);
}
.kanban-card-desfazer {
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 3px 8px;
  line-height: 1;
}
.kanban-card-feito:hover,
.kanban-card-desfazer:hover { filter: brightness(0.97); }
.kanban-card-desfazer:disabled { opacity: 0.6; cursor: default; }
/* Trava de aprovação do cliente (2026-10-01) — não pode ficar com a cara
   de "pode clicar" (verde) só meio apagado; precisa ler como bloqueado
   de verdade, igual aos outros estados neutros/cinza do sistema. */
.kanban-card-feito:disabled {
  color: var(--text-muted);
  background: var(--neutral-bg);
  border-color: var(--border);
  cursor: default;
}

.kanban-vazio {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 8px 2px;
}

/* Duas colunas lado a lado (Parcelas atrasadas + Contratos no último mês)
   — cada uma vira um cartão menor em vez de uma faixa larga. Empilha numa
   coluna só se a tela não tiver espaço pras duas lado a lado. */
.dashboard-duas-colunas {
  display: grid;
  /* Decisão do usuário, 2026-08-30: seções do início em blocos de meia
     página — sempre 2 colunas (não auto-fit, que empilhava 3+ numa linha
     só em tela larga), caindo pra 1 coluna só abaixo de 720px. */
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 22px;
}

@media (max-width: 720px) {
  .dashboard-duas-colunas {
    grid-template-columns: 1fr;
  }
}

.dashboard-duas-colunas .painel-card {
  margin-top: 0;
}

/* Tabela detalhada (2026-09-20, escolhida pelo usuário entre 3 modelos —
   ver conversa): número exato por mês + % do total + acumulado, em vez da
   barra horizontal antiga. Acumulado responde "quanto eu já teria recebido
   até esse mês", útil pra planejar caixa — a barra sozinha não respondia isso. */
.lista-projecao { overflow-x: auto; }

table.projecao-tabela { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.projecao-tabela th {
  text-align: left; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 600;
  padding: 0 10px 8px; border-bottom: 1px solid var(--border-strong);
}
table.projecao-tabela td { padding: 10px; border-bottom: 1px solid var(--border); }
table.projecao-tabela tr:last-child td { border-bottom: 0; }
table.projecao-tabela th.num, table.projecao-tabela td.num { text-align: right; font-family: var(--font-mono); }
table.projecao-tabela tbody tr:hover td { background: var(--surface-2); }
table.projecao-tabela .mes { font-weight: 600; text-transform: capitalize; }
table.projecao-tabela .pct { color: var(--text-faint); font-size: 0.78rem; }
table.projecao-tabela .mini-barra {
  display: inline-block; width: 60px; height: 6px; background: var(--surface-2);
  border-radius: 3px; overflow: hidden; vertical-align: middle; margin-left: 8px;
}
table.projecao-tabela .mini-barra span { display: block; height: 100%; background: var(--dourado); border-radius: 3px; }
table.projecao-tabela tfoot td { padding-top: 12px; border-top: 2px solid var(--border-strong); border-bottom: 0; font-weight: 700; }

/* ---------- Login ---------- */

body.pagina-login {
  background: var(--preto);
  min-height: 100vh;
  /* Fundo sempre escuro aqui, independente do tema do sistema — sem isso,
     texto que usa var(--text) sem cor própria (ex: .envio-msg) herda o
     tom escuro do tema claro e fica ilegível em cima do fundo preto. */
  --text: #ece9e1;
  --text-muted: #a9a294;
}

/* Dividida em duas colunas — frase de efeito à esquerda, caixa de login à
   direita — como uma landing page. Empilha (copy em cima) se a tela for
   estreita demais pras duas colunas. */
.login-layout {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 8vw, 120px);
  padding: 48px 6vw;
}

.login-copy {
  flex: 1 1 380px;
  max-width: 480px;
}

.login-marca {
  margin: 0 0 28px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.login-titulo {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.login-explicacao {
  margin: 0;
  max-width: 420px;
  color: rgba(255,255,255,0.6);
  font-size: 1.05rem;
  line-height: 1.6;
}

.login-caixa {
  flex: 0 0 auto;
}

.cartao-login {
  background: var(--preto-suave);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  padding: 36px 32px;
  width: min(360px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

.titulo-login {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
}

.cartao-login label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}

.cartao-login input {
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cartao-login input:focus {
  outline: none;
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px rgba(203, 161, 53, 0.25);
}

.cartao-login .botao-primario {
  margin-top: 6px;
}

/* ---------- Modal: checkbox de recorrência (linha, não coluna) ---------- */

/* Seletor "Responsáveis" da Agenda — antes era um <select multiple> nativo
   (ficava sempre aberto, exigia Ctrl+clique pra marcar mais de um).
   Decisão do usuário, 2026-08-30: uma caixa de verdade que abre um painel
   de checkboxes ao clicar, fecha sozinha ao clicar fora. */
.select-multiplo {
  position: relative;
}

.select-multiplo-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  cursor: pointer;
  text-align: left;
}

.select-multiplo-toggle svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform 0.15s;
}

.select-multiplo.aberto .select-multiplo-toggle {
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px var(--dourado-bg);
}

.select-multiplo.aberto .select-multiplo-toggle svg {
  transform: rotate(180deg);
}

.select-multiplo-painel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-modal);
  padding: 10px;
  max-height: 240px;
  overflow-y: auto;
}

.select-multiplo-painel.escondida { display: none; }

.select-multiplo-grupo-titulo {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 10px 0 6px;
}

.select-multiplo-grupo-titulo:first-child { margin-top: 2px; }

label.select-multiplo-item {
  /* .modal label (mais específica) força flex-direction:column — precisa
     da mesma especificidade (label + classe) pra sobrescrever de volta. */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 400;
}

.select-multiplo-item:hover { background: var(--fundo-hover); }

.select-multiplo-item input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.select-multiplo-vazio {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 6px 4px;
}

.modal label.campo-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.modal input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: none;
  accent-color: var(--dourado);
}

/* ---------- Financeiro → Relatório ---------- */

.seletor-periodo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.periodo-item {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.85rem;
  cursor: pointer;
}
.periodo-item:hover { color: var(--text); }
.periodo-item.ativo {
  background: var(--dourado-bg);
  border-color: var(--dourado);
  color: var(--dourado-hover);
  font-weight: 600;
}

.periodo-personalizado {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}
.periodo-personalizado label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.periodo-personalizado input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
}

.campo-comparar {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  color: var(--text) !important;
  font-size: 0.88rem !important;
}
.campo-comparar input[type="checkbox"] { accent-color: var(--dourado); }

/* O seletor de período fica dentro de um .painel-card (que só ganha
   margin-top quando ele mesmo vem depois de algo — não ajuda o que vem
   DEPOIS dele). Sem isso, o kpi-grid dos KPIs do relatório colava direto
   embaixo do card de período/comparação. */
#kpi-grid-relatorio {
  margin-top: 22px;
}

.grafico-container {
  position: relative;
  height: 280px;
}
.grafico-container-pequeno { height: 220px; }

/* Quando o gráfico vem logo depois do grid de status de clientes (card
   "Clientes" do relatório), precisa de um respiro — .texto-explicativo já
   cuida do espaço entre o título e o grid, mas nada cuidava do espaço
   entre o grid e o gráfico. */
.kpi-grid + .grafico-container {
  margin-top: 18px;
}

.comparacao-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comparacao-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.comparacao-linha:last-child { border-bottom: none; }
.comparacao-linha > span:first-child { flex: 1; font-weight: 600; }
.comparacao-anterior { color: var(--text-muted); font-size: 0.82rem; }

.delta { font-weight: 700; font-size: 0.9rem; }
.delta-up { color: var(--ok); }
.delta-down { color: var(--danger); }
.delta-neutral { color: var(--text-muted); font-weight: 400; font-size: 0.82rem; }

/* ---------- Despesas: navegador de mês ---------- */

.navegador-mes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.navegador-mes-label {
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 90px;
  text-align: center;
}

/* ---------- Leads / Conteúdo Agência PUBLI: select de status inline na tabela ---------- */

.select-inline {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
}

.texto-atrasado {
  color: var(--danger);
  font-weight: 600;
}

/* Imagens IA removida por inteiro (2026-09-30, pedido do usuário — junto
   com a capacidade de foto IA no /carrossel). CSS/HTML/JS de antes no
   histórico do git, se precisar recuperar algum dia. */

/* Card "Baixar tudo" do Início */
#card-baixar-tudo .secao-topo { align-items: center; }
.bt-resumo { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--r-md); background: var(--surface-2); font-size: 13.5px; line-height: 1.6; }
.bt-resumo p { margin: 2px 0; }
.bt-quando { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px !important; }

/* Solicitações de anúncio dos clientes (Início + aba Anúncios) */
.solic-card { border: 1px solid var(--linha); border-radius: var(--r-md); padding: 12px 14px; margin-top: 10px; background: var(--surface-2); }
.solic-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.solic-cab b { font-size: 14px; }
.solic-cab .botao-primario { margin-left: auto; padding: 6px 14px; font-size: 13px; }
.solic-desc { font-size: 13px; line-height: 1.55; color: var(--text-muted); white-space: pre-wrap; }

/* --- Aba Demandas: card "de hoje", "mais urgentes", lista por empresa --- */
#card-demandas-hoje { border-left: 3px solid var(--danger); }

.dem-foco { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 11px 13px; margin-top: 8px; background: var(--card); }
.dem-foco:first-child { margin-top: 0; }
.dem-foco.alerta { border-color: var(--danger); background: var(--danger-bg); }
.dem-foco-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.dem-foco .dem-cli { font-weight: 700; font-size: 13px; }
.dem-foco .dem-prazo { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.dem-foco .dem-prazo.vermelho { color: var(--danger); font-weight: 600; }
.dem-foco .dem-desc { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.dem-foco .botao-acao { padding: 6px 12px; font-size: 12.5px; } /* altura ~24px+, WCAG 2.5.8 Alvo Mínimo */

.dem-grupo { margin-top: 18px; }
.dem-grupo:first-child { margin-top: 0; }
.dem-grupo-nome { margin: 0 0 7px; font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text); }
.dem-grupo-n { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); background: var(--neutral-bg); border-radius: 999px; padding: 1px 8px; }
.dem-linha { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 7px; background: var(--card); }
.dem-linha:first-of-type { margin-top: 0; }
.dem-linha-desc { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.dem-linha-desc .texto-explicativo { display: inline; font-size: 11.5px; }
.dem-linha-ctrl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dem-linha-ctrl select, .dem-linha-ctrl input[type="date"] { padding: 4px 8px; font-size: 12.5px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--card); color: var(--text); }
.dem-linha-ctrl .botao-acao { padding: 6px 10px; font-size: 12.5px; } /* altura ~24px+, WCAG 2.5.8 Alvo Mínimo */

/* --- Início: selos de status de backup/painel (2026-09-14) — ver
   .status-pill mais acima. O JS só troca classe de tom (tom-warn/tom-ok)
   e os textos; #btn-backup-agora só aparece dentro do selo quando falta
   fazer o backup. --- */
#btn-backup-agora:disabled { opacity: 0.6; cursor: default; }

/* --- Início: cards dentro do grid bento (Envios do site | Pedidos de
   anúncio) — mesma altura esticada, coluna interna com o botão em cima e
   o resultado embaixo. --- */
.bento-grid .dash-card { display: flex; flex-direction: column; padding-bottom: 18px; }
.dash-card > .dashboard-subtitulo { margin-bottom: 12px; }
.dash-card .dash-hint { font-size: 11px; line-height: 1.45; margin: 4px 0 0; }
/* respiro entre o texto de apoio e o conteúdo abaixo ("Nenhum pedido..." ou
   a lista) — sem isto a margem negativa do .texto-explicativo cola os dois. */
#solicitacoes-anuncio-inicio { margin-top: 12px; }
#solicitacoes-anuncio-inicio > .texto-explicativo { margin: 0; }
.dash-card .dash-resultado:empty { display: none; }
.dash-card .bt-resumo { margin-top: 0; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.dash-card .dash-resultado:not(:empty) + .dash-resultado:not(:empty) { margin-top: 8px; }

/* dentro do "Envios do site": botões à esquerda | linha | resultado à direita */
.envios-corpo { display: flex; gap: 16px; flex: 1; align-items: stretch; }
.envios-acoes { flex: 0 0 180px; display: flex; flex-direction: column; gap: 8px; }
.envios-acoes .botao-primario, .envios-acoes .botao-secundario { width: 100%; }
.envios-saida { flex: 1; min-width: 0; border-left: 1px solid var(--border); padding-left: 16px; }
.envios-vazio { color: var(--text-faint); margin: 0; }
.envios-saida:has(> .dash-resultado:not(:empty)) .envios-vazio { display: none; }
@media (max-width: 640px) {
  .envios-corpo { flex-direction: column; gap: 12px; }
  .envios-acoes { flex-basis: auto; }
  .envios-saida { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 12px; }
}

/* lista compacta de pedidos de anúncio no Início — só o nome de quem pediu */
.solic-mini { display: flex; flex-direction: column; gap: 6px; }
.solic-mini-item { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); }
.solic-mini-item:hover { border-color: var(--dourado); background: var(--dourado-bg); }
.solic-mini-item b { font-size: 13px; color: var(--text); }
.solic-mini-item .andamento { font-size: 10.5px; color: var(--info); }
.solic-mini-item .quando { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }

/* ===== Tráfego Pago — saúde dos anúncios (2026-09-10) ===== */
.ads-saude-resumo { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.ads-saude-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; color: var(--text-muted);
}
.ads-saude-chip b { color: var(--text); font-weight: 700; }
.ads-saude-chip.urgente { border-color: var(--danger); color: var(--danger); }
.ads-saude-chip.atencao { border-color: var(--warn); color: var(--warn); }

.ads-saude-cliente { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 14px; }
.ads-saude-cliente-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ads-saude-cliente-nome { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.ads-saude-cliente-ponto { width: 9px; height: 9px; border-radius: 999px; flex: none; background: var(--ok); }
.ads-saude-cliente.nivel-urgente .ads-saude-cliente-ponto { background: var(--danger); }
.ads-saude-cliente.nivel-atencao .ads-saude-cliente-ponto { background: var(--warn); }
.ads-saude-cliente-campanhas { font-size: 12.5px; color: var(--text-faint); }

.ads-saude-alerta { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.ads-saude-cliente .ads-saude-alerta:first-of-type { border-top: none; padding-top: 4px; }
.ads-saude-alerta-ponto { width: 8px; height: 8px; border-radius: 999px; margin-top: 6px; flex: none; background: var(--text-faint); }
.ads-saude-alerta.nivel-urgente .ads-saude-alerta-ponto { background: var(--danger); }
.ads-saude-alerta.nivel-atencao .ads-saude-alerta-ponto { background: var(--warn); }
.ads-saude-alerta.nivel-ok .ads-saude-alerta-ponto { background: var(--ok); }
.ads-saude-alerta-corpo { min-width: 0; }
.ads-saude-alerta-titulo { font-weight: 600; font-size: 13.5px; }
.ads-saude-alerta-detalhe { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.ads-saude-alerta-acao { font-size: 12.5px; color: var(--dourado-hover); margin-top: 4px; font-weight: 600; }
.ads-saude-vazio { font-size: 13px; color: var(--ok); }

/* Card compacto do Início — só os alertas urgentes, sem o resto do detalhe */
.ads-saude-mini { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-top: 1px solid var(--border); }
.ads-saude-mini:first-child { border-top: none; padding-top: 0; }
.ads-saude-mini-titulo { font-size: 13px; font-weight: 600; }
.ads-saude-mini-cliente { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }

/* ===== Serviços de parceiro / Contrato de equipe (sub-linha na aba Contatos) ===== */
.parceiro-servicos-linha > td, .contrato-equipe-linha > td { background: var(--surface-2); padding: 0; border-top: 0; }
.ps-bloco { padding: 12px 16px 14px; }
.ps-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ps-titulo { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ps-resumo { margin-left: 8px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-faint); }
.ps-lista { display: flex; flex-direction: column; gap: 6px; }
.ps-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); }
.ps-item.encerrado { opacity: 0.6; }
.ps-item-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-item-titulo { font-size: 13px; color: var(--text); }
.ps-item-sub { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ps-item-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.ps-selo { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: var(--neutral-bg); color: var(--text-faint); vertical-align: middle; }
.ps-vazio { font-size: 12.5px; color: var(--text-faint); margin: 2px 0 0; }

/* Linha função+forma de pagamento no modal de Contrato de equipe — mesma
   lógica visual dos itens acima (rótulo à esquerda, campos à direita),
   função desmarcada deixa os campos desabilitados (cinza), nunca
   fonte/peso diferentes entre as linhas. */
.ce-funcoes-lista { display: flex; flex-direction: column; gap: 6px; }
.ce-funcao-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); flex-wrap: wrap; }
.ce-funcao-linha > label.campo-checkbox { flex-shrink: 0; }
.ce-funcao-campos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.ce-funcao-valor { display: flex; align-items: center; gap: 4px; }
.ce-funcao-valor input { width: 100px; }
.ce-funcao-qtd { display: flex; align-items: center; gap: 4px; }
.ce-funcao-qtd input { width: 68px; padding: 6px 4px; text-align: center; }
.ce-funcao-campos select,
.ce-funcao-campos input:disabled { color: var(--text-faint); background: var(--neutral-bg); }
.ce-funcao-campos select:disabled { color: var(--text-faint); background: var(--neutral-bg); }
/* Linha de função some pra 100% de largura quando tem conteúdo extra
   embaixo (lista de clientes de 'por_cliente') — mesma régua de sempre. */
.ce-funcao-clientes { flex: 1 0 100%; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px; }

/* Modal de editar despesa: botão de perigo à esquerda, Cancelar/Salvar à direita */
.modal-acoes-espalha { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.modal-acoes-espalha > div { display: flex; gap: 10px; }

/* Briefing em tela cheia (Fullscreen API no #briefing-form-wrap) — vira uma
   página só do briefing, sem o menu lateral. Precisa pintar o fundo (o
   navegador põe preto por baixo do elemento em fullscreen) e rolar sozinho. */
#briefing-form-wrap:fullscreen {
  overflow-y: auto;
  background: var(--bg);
  padding: 40px clamp(20px, 6vw, 80px) 80px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#briefing-form-wrap:fullscreen > form,
#briefing-form-wrap:fullscreen > .materiais-secao {
  max-width: 960px;
  margin-inline: auto;
}