/* Identidade visual do Guia de Marcas por cima do Bootstrap 5.
   Paleta/estética "EPGRUPO" (kit v1.3, portado dos mocks navegáveis em
   docs/epgrupo-cliente-padrao/mocks/) — petróleo/teal/coral. Tema claro é
   sempre o default pra usuário novo; tema escuro é real, alternado via
   [data-theme="dark"] no <html> (script em base.html/base_publico.html,
   persistido em localStorage) — nunca detecta prefers-color-scheme.
   Os nomes de token (--gm-*) e as classes (.gm-*) foram mantidos da
   identidade Dux anterior de propósito: só o VALOR dos tokens muda aqui,
   os ~20 templates que já usam essas classes não precisaram ser tocados.
   Regra do projeto: estética vive AQUI e nos templates, nunca em parâmetro. */

/* Nunito auto-hospedada, sem uso ativo no momento (mantida no repo por
   compatibilidade — nenhum token aponta pra ela hoje). */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../vendor/fonts/nunito-latin.166202cc391c.woff2") format('woff2');
}

/* Poppins (corpo) e Roboto Slab (display) — fontes do kit EPGRUPO, auto-
   hospedadas (subset latin, cobre acentuação PT-BR) com autorização
   explícita do usuário pra baixar (2026-07-22), substituindo o fallback
   de sistema usado até então. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/poppins-400.9212f6f9860f.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/poppins-600.72993dddf88a.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../vendor/fonts/poppins-700.25b0e113ca7c.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../vendor/fonts/poppins-800.af4d371a1027.woff2") format('woff2');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("../vendor/fonts/roboto-slab-700.fee1dc1edf94.woff2") format('woff2');
}

:root {
  /* --- superfícies / neutros (tema claro, default) --- */
  --gm-paper: #FFFFFF;
  --gm-surface: #FFFFFF;
  --gm-surface-2: #EAEAEA;
  --gm-ink: #202020;          /* superfície SEMPRE escura: header, hero, footer, sidebar — não inverte no escuro */
  --gm-ink-2: #141414;
  --gm-text: #222222;
  --gm-text-soft: #555555;
  --gm-line: #DCE0E0;

  /* cores de marca (petróleo/teal/coral) */
  --gm-indigo: #052C36;        /* petróleo — CTA outline, links */
  --gm-indigo-deep: #03181D;
  --gm-magenta: #F26A43;       /* coral — acento/CTA primário */
  --gm-magenta-deep: #D8532E;
  --gm-orange: #EB5D2D;
  --gm-orange-2: #C94A1F;
  --gm-green: #008D7F;         /* teal — status positivo */

  /* assinatura: gradiente coral→laranja */
  --gm-grad: linear-gradient(100deg, #F26A43, #EB5D2D);

  --gm-mute: #999999;

  /* escala de fonte (vocabulário de componentes do mock) */
  --gm-fs-xs: .75rem;
  --gm-fs-sm: .875rem;
  --gm-fs-lg: 1.25rem;
  --gm-fs-xl: 1.5rem;
  --gm-tracking: .04em;

  /* forma */
  --gm-radius: 22px;
  --gm-radius-sm: 4px;
  --gm-shadow: 0 30px 60px -22px rgba(0, 0, 0, .35);
  --gm-shadow-sm: 0 12px 30px -14px rgba(0, 0, 0, .22);

  /* tipografia (kit novo: display serifado + corpo geométrico) */
  --gm-font-disp: "Roboto Slab", "Roboto Serif", Georgia, "Segoe UI", serif;
  --gm-font-body: Poppins, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* overrides Bootstrap */
  --bs-body-bg: var(--gm-paper);
  --bs-body-font-family: var(--gm-font-body);
  --bs-body-color: var(--gm-text);
  --bs-link-color-rgb: 5, 44, 54;           /* petróleo */
  --bs-link-hover-color-rgb: 216, 83, 46;   /* coral-deep */
  --bs-border-radius: 14px;
  --bs-border-radius-sm: 10px;
  --bs-border-radius-lg: var(--gm-radius);
}

/* Tema escuro: só os neutros de superfície trocam. --gm-ink não entra aqui
   de propósito — header/hero/sidebar já eram escuros no claro (são um
   "painel" fixo, não uma superfície comum), então não têm o que inverter. */
[data-theme="dark"] {
  --gm-paper: #141414;
  --gm-surface: #202020;
  --gm-surface-2: #202020;
  --gm-text: #F2F2F2;
  --gm-text-soft: #B8B8B8;
  --gm-mute: #8F8F8F;
  --gm-line: #3A3A3A;
  --gm-shadow: 0 30px 60px -22px rgba(0, 0, 0, .6);
  --gm-shadow-sm: 0 12px 30px -14px rgba(0, 0, 0, .45);
  /* --gm-indigo (petróleo, #052C36) é escuro demais pra ler sobre --gm-paper
     escuro - cada componente que usa --gm-indigo como cor de link já tem seu
     próprio override pontual aqui embaixo (ex.: .trilha a, .tree a), mas um
     <a> sem classe própria (ex.: "ver histórico completo" em detalhe.html)
     cai nessa cor padrão do Bootstrap e ficava quase invisível - achado
     revisando entidades/detalhe.html no tema escuro. */
  --bs-link-color-rgb: 242, 242, 242;
  --bs-link-hover-color-rgb: 242, 106, 67;
}

/* Rede de segurança contra overflow horizontal no mobile (string longa e sem
   espaço, ex. e-mail em "Olá, <email>" no dashboard, forçando o layout a
   estourar a largura da viewport) - bug real encontrado em produção. */
html, body { overflow-x: hidden; }

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: var(--gm-font-disp);
  font-weight: 800;
  color: var(--gm-text);
  letter-spacing: -.01em;
}

.navbar-gm { background-color: var(--gm-ink); }
.navbar-dark.navbar-gm .nav-link {
  color: rgba(255, 255, 255, .78);
  font-weight: 600;
  transition: color .15s;
}
.navbar-dark.navbar-gm .nav-link:hover, .navbar-dark.navbar-gm .nav-link:focus-visible {
  color: #fff;
}
.navbar-dark.navbar-gm .nav-link.active {
  color: #fff;
  position: relative;
}
.navbar-dark.navbar-gm .nav-link.active::after {
  content: '';
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gm-grad);
}
.navbar-dark.navbar-gm .btn-link.nav-link { color: rgba(255, 255, 255, .78); font-weight: 600; }
.navbar-dark.navbar-gm .btn-link.nav-link:hover { color: #fff; }

/* botões: pill, peso forte; primário = gradiente-assinatura */
.btn { --bs-btn-border-radius: 100px; font-weight: 700; }
.btn-primary {
  --bs-btn-bg: var(--gm-magenta);
  --bs-btn-border-color: var(--gm-magenta);
  --bs-btn-hover-bg: var(--gm-magenta-deep);
  --bs-btn-hover-border-color: var(--gm-magenta-deep);
  --bs-btn-active-bg: var(--gm-magenta-deep);
  --bs-btn-active-border-color: var(--gm-magenta-deep);
  /* Borda transparente, não `border: 0`: sem ela o botão primário fica 2px
     mais baixo que um outline ao lado, e "Aprovar" e "Recusar" lado a lado
     ficavam desencontrados. Transparente porque o gradiente é o acabamento —
     uma borda sólida apareceria na quina. */
  border: 1px solid transparent;
  background-image: var(--gm-grad);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-image: var(--gm-grad);
  filter: brightness(1.04);
}
/* Desabilitado: o Bootstrap NÃO deriva --bs-btn-disabled-* de --bs-btn-bg, ele
   cai no $primary do tema (#0d6efd) — e o gradiente da casa, declarado na regra
   base, continua pintando por cima. Resultado: botão inerte com a MESMA cara de
   um ativo, que é o pior tipo de defeito. "Usar esta imagem" nasce desabilitado
   no modal de logo e parecia clicável. Aqui ele fica neutro e visivelmente
   inerte. */
.btn-primary:disabled, .btn-primary.disabled {
  background-image: none;
  --bs-btn-disabled-bg: var(--gm-surface-2);
  --bs-btn-disabled-border-color: var(--gm-line);
  --bs-btn-disabled-color: var(--gm-mute);
}
.btn-outline-secondary {
  --bs-btn-color: var(--gm-text-soft);
  --bs-btn-border-color: var(--gm-line);
  --bs-btn-hover-bg: var(--gm-surface-2);
  --bs-btn-hover-color: var(--gm-indigo);
  --bs-btn-hover-border-color: var(--gm-indigo);
  --bs-btn-active-bg: var(--gm-surface-2);
  --bs-btn-active-color: var(--gm-indigo);
}

.card {
  --bs-card-border-color: var(--gm-line);
  --bs-card-border-radius: var(--gm-radius);
  --bs-card-bg: var(--gm-surface);
}

.form-control { --bs-border-color: var(--gm-line); }
.form-control:focus, .form-select:focus {
  border-color: var(--gm-indigo);
  box-shadow: 0 0 0 .2rem rgba(59, 31, 201, .15);
}
.form-select { --bs-border-color: var(--gm-line); border-radius: 100px; }

.campo-senha { position: relative; }
.campo-senha .form-control { padding-right: 2.75rem; }
.senha-toggle {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gm-mute);
  cursor: pointer;
}
.senha-toggle:hover, .senha-toggle:focus-visible { color: var(--gm-text-soft); }

/* pills de visibilidade (público / parceiros / interno) */
.pill-publico { color: #0c8b4e; background: #e1f6ec; }
.pill-parceiros { color: #9a5a00; background: #feead3; }
.pill-interno { color: #052c36; background: #e3ebec; }
.pill-visibilidade {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* badge de herança ("herdado de X") */
.badge-herdado {
  font-size: .72rem;
  color: var(--gm-magenta-deep);
  background: #fde7df;
  border: 1px solid #f8cebc;
  padding: 2px 8px;
  border-radius: 999px;
}

/* swatch de cor (tipo_dado lista_cores) */
.gm-swatch {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  border: 1px solid var(--gm-line);
  vertical-align: middle;
}

/* Moldura de imagem — CAIXA QUADRADA FIXA, igual para toda marca/produto
   (padrão de mercado: app stores, diretórios de marca, e-commerce). A imagem
   se ajusta DENTRO da caixa por object-fit: contain (nunca corta nem distorce);
   fundo neutro + respiro. Só o tamanho do quadrado muda por contexto — a forma
   é sempre 1:1. A caixa ter largura+altura definidas também evita o colapso de
   SVG sem dimensões intrínsecas. */
.gm-moldura {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 200px;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* full-bleed: o upload já recorta 1:1 (Cropper), então a imagem preenche o
   tile inteiro. NUNCA usar padding percentual na moldura: padding-% resolve
   contra a largura do PAI, e num container largo (ex.: coluna da vitrine)
   engolia o tile inteiro, deixando a imagem com 0x0. */
.gm-moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* galeria (tipo `imagens`): grade de quadrados iguais */
.gm-galeria { display: flex; flex-wrap: wrap; gap: .5rem; }
.gm-galeria .gm-moldura { width: 120px; }

/* topo da página pública: painel branco colado à direita do hero, com o logo
   preenchendo a ALTURA DO TEXTO (referência: docs/mock/index.html) — a moldura
   vira um preenchimento absoluto da coluna, então quem dita a altura do hero é
   o conteúdo textual, nunca a imagem. Full-bleed (sem padding, decisão de
   2026-07-20): o painel agora é sempre um quadrado do mesmo tamanho da imagem
   1:1 (sincronizarHeroLogo, JS), então cover não corta nada — o padding que
   existia aqui (pra nunca cortar com contain) virou só respiro sobrando. */
.gm-hero-destaque .gm-moldura {
  position: absolute;
  inset: 0;
  max-width: none;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}
.gm-hero-destaque .gm-moldura img { object-fit: cover; }

/* card horizontal de entidade (entidades/_card_entidade.html, componente
   compartilhado por vitrine pública/Parceiro/Cliente): logo à esquerda,
   tipo/nome/resumo à direita. Quadrado FIXO em vez de esticar dinamicamente
   pra altura do texto ao lado - tentativas com align-self: stretch +
   aspect-ratio (em 1 ou 2 níveis, com/sem flex-basis: 0) oscilaram entre
   "vira gigante" (tamanho intrínseco real do upload, 1024x1024, vazando pro
   cálculo de flex antes do stretch resolver) e "largura não acompanha a
   altura" (aspect-ratio não recalculando de forma confiável após o
   stretch). Valor fixo é a opção estável - 80px já cobre de perto a altura
   real do bloco rótulo+nome+resumo com o padding do card. */
.gm-card-logo-fill { width: 80px; height: 80px; flex-shrink: 0; }
.gm-card-logo-fill .gm-moldura { width: 100%; height: 100%; max-width: none; }

/* ============ Console interno (telas de edição) ============ */

/* sidebar escura com a árvore — referência: docs/mock/index.html (SCREEN 2),
   traduzida pra identidade Dux (índigo no lugar do petróleo, seleção com o
   gradiente-assinatura no lugar do laranja chapado) */
.gm-sidebar {
  background: var(--gm-ink);
  border-radius: var(--gm-radius);
  padding: 1rem .75rem;
  box-shadow: var(--gm-shadow-sm);
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.gm-side-titulo {
  font-family: var(--gm-font-disp);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  padding: 0 .6rem;
  margin-bottom: .6rem;
}
.gm-side-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  border-radius: 10px;
  color: rgba(255, 255, 255, .85);
  font-size: .85rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.gm-side-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.gm-side-item.active { background: var(--gm-grad); color: #fff; font-weight: 700; }
.gm-side-item.inativa { opacity: .5; }
.gm-side-item.inativa > .text-truncate { text-decoration: line-through; }
.gm-side-tipo {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .65);
  white-space: nowrap;
}
.gm-side-item.active .gm-side-tipo { background: rgba(255, 255, 255, .25); color: #fff; }
.gm-side-vazio { color: rgba(255, 255, 255, .5); font-size: .82rem; padding: 0 .6rem; }
.gm-side-nova {
  display: block;
  margin-top: .75rem;
  padding: .5rem .6rem;
  border: 1px dashed rgba(255, 255, 255, .25);
  border-radius: 10px;
  color: rgba(255, 255, 255, .65);
  font-size: .82rem;
  text-align: center;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.gm-side-nova:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }

/* título de categoria (seção de atributos) */
.gm-cat-titulo {
  font-family: var(--gm-font-disp);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gm-magenta-deep);
  border-bottom: 2px solid var(--gm-line);
  padding-bottom: .4rem;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* grade de cards de atributo */
.gm-attr-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.gm-attr-card {
  position: relative;
  background: var(--gm-surface);
  border: 1px solid var(--gm-line);
  border-radius: 14px;
  padding: .9rem 1rem;
  transition: box-shadow .15s;
}
.gm-attr-card:hover { box-shadow: var(--gm-shadow-sm); }
.gm-attr-rotulo {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gm-text-soft);
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .45rem;
  padding-right: 3rem; /* não sobrepõe o botão editar */
}
.gm-attr-vazio { color: var(--gm-text-soft); opacity: .55; font-style: italic; font-size: .875rem; }
.gm-attr-editar {
  position: absolute;
  top: .6rem;
  right: .6rem;
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--gm-surface-2);
  border-radius: 8px;
  padding: 2px 8px;
  opacity: 0;
  transition: opacity .15s;
}
.gm-attr-card:hover .gm-attr-editar,
.gm-attr-editar:focus-visible { opacity: 1; }

/* tabela de dados (usuários, catálogo) */
.gm-tabela { --bs-table-border-color: var(--gm-line); }
.gm-tabela thead th {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gm-text-soft);
  border-bottom-width: 2px;
}

/* páginas de configurações (perfil, senha, MFA): título + seções em página
   aberta, sem card centralizado — box centralizado é linguagem de tela de login */
.gm-config { max-width: 640px; margin-inline: auto; }
.gm-acao-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--gm-line);
}
.gm-acao-item:last-child { border-bottom: 0; }

/* tile de destaque no topo do detalhe (logo ao lado do nome, como no mock) */
.gm-destaque-tile { width: 96px; flex-shrink: 0; }
.gm-destaque-tile .gm-moldura { max-width: 96px; }
.gm-destaque-editar {
  display: block;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  margin-top: .25rem;
  text-decoration: none;
  color: var(--gm-indigo);
}
[data-theme="dark"] .gm-destaque-editar { color: var(--gm-text); }
.gm-destaque-vazio {
  font-size: .68rem;
  font-weight: 700;
  color: var(--gm-text-soft);
  text-align: center;
  text-decoration: none;
  border-style: dashed;
  padding: .5rem;
}
.gm-destaque-vazio:hover { color: var(--gm-indigo); border-color: var(--gm-indigo); }

/* linha do tempo de revisões (histórico) */
.gm-rev-item {
  display: flex;
  gap: .85rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--gm-line);
}
.gm-rev-item:last-child { border-bottom: 0; }
.gm-rev-ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gm-green);
  margin-top: .4rem;
  flex-shrink: 0;
}
.gm-rev-ponto.gm-rev-estrutura { background: var(--gm-indigo); }
.gm-rev-ponto.gm-rev-congelamento { background: var(--gm-orange-2); }

/* avatar de contato/usuário (iniciais) */
.gm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gm-ink);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  flex-shrink: 0;
}
/* dropdown do usuário no header — max-width preso à viewport (nunca passa
   do lado esquerdo da tela em mobile) e itens/rótulo permitidos a quebrar
   linha (Bootstrap usa white-space:nowrap por padrão no .dropdown-item, o
   que estourava a tela com texto longo tipo "Fulano Sobrenome · Editor
   interno" ou "Senha e verificação (MFA)" — bug real encontrado em
   produção, agravado pelo overflow-x:hidden global, que corta em vez de
   deixar rolar). */
.topbar .dropdown-menu {
  border: 1px solid var(--gm-line);
  border-radius: 14px;
  box-shadow: var(--gm-shadow-sm);
  padding: .4rem;
  min-width: 230px;
  max-width: min(280px, calc(100vw - 2rem));
}
.topbar .dropdown-menu .dropdown-item,
.topbar .dropdown-menu .dropdown-item-text {
  white-space: normal;
}
.navbar-gm .dropdown-item { border-radius: 9px; padding: .45rem .75rem; font-size: .9rem; }
.navbar-gm .dropdown-item:hover { background: var(--gm-surface-2); color: var(--gm-indigo); }
.navbar-gm .dropdown-header { padding: .45rem .75rem .25rem; }

/* árvore de navegação */
.gm-arvore details { margin-left: 1rem; }
.gm-arvore summary {
  cursor: pointer;
  padding: .3rem .4rem;
  border-radius: 10px;
  list-style: none;
}
.gm-arvore summary::-webkit-details-marker { display: none; }
.gm-arvore summary::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-right: .5rem;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--gm-text-soft);
  transition: transform .15s;
  vertical-align: middle;
}
.gm-arvore details[open] > summary::before { transform: rotate(90deg); }
.gm-arvore summary:hover { background: var(--gm-surface-2); }
.gm-arvore .inativa { opacity: .55; }

/* ============ Vitrine pública ============ */

/* header público */
.gm-header-pub { background: var(--gm-ink); position: sticky; top: 0; z-index: 40; }
.gm-accent { height: 5px; background: var(--gm-grad); }
.gm-wordmark {
  font-family: var(--gm-font-disp); font-weight: 800; font-size: 1.35rem;
  color: #fff; letter-spacing: -.02em; white-space: nowrap;
}
@media (max-width: 575.98px) {
  .gm-wordmark { font-size: 1.05rem; }
}
.gm-wordmark span {
  background: var(--gm-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* marca EP Grupo no header (referência: operavr.tech/dux.html) — logotipo
   empilhado verticalmente "ep"/"gru"/"po" + curva de sorriso por baixo.
   "gru" branco só lê porque o header já é escuro (--gm-ink); no mock original
   a marca tinha sua própria barra em gradiente índigo por trás. */
.gm-brand-link { display: inline-flex; line-height: 0; opacity: .92; transition: opacity .15s; }
.gm-brand-link:hover { opacity: 1; }
.gm-epg {
  display: flex; flex-direction: column; align-items: flex-start; width: fit-content;
  font-family: var(--gm-font-disp); font-weight: 800; font-size: 1rem;
  line-height: .8; letter-spacing: -.02em;
}
.gm-epg-r1, .gm-epg-r3 { color: var(--gm-orange-2); }
.gm-epg-r2 { color: #fff; }
.gm-epg-smile { width: 34px; height: 10px; margin-top: 4px; }
.gm-header-div { width: 1px; height: 28px; background: rgba(255,255,255,.18); }

.gm-busca-header .form-control {
  background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: 999px;
}
.gm-busca-header .form-control::placeholder { color: rgba(255,255,255,.6); }
.gm-busca-header .form-control:focus {
  background: rgba(255,255,255,.18); box-shadow: none; color: #fff;
}

/* breadcrumb discreto — sem o azul sublinhado padrão do Bootstrap */
.gm-breadcrumb {
  --bs-breadcrumb-divider-color: var(--gm-line);
  font-size: .78rem;
  margin-bottom: 1rem;
}
.gm-breadcrumb .breadcrumb-item a {
  color: var(--gm-text-soft);
  text-decoration: none;
}
.gm-breadcrumb .breadcrumb-item a:hover { color: var(--gm-indigo); text-decoration: underline; }
.gm-breadcrumb .breadcrumb-item.active { color: var(--gm-text-soft); }

/* hero */
.gm-hero {
  background: linear-gradient(120deg, var(--gm-ink) 0%, var(--gm-indigo-deep) 60%, var(--gm-indigo) 125%);
  color: #fff; padding: 3.75rem 0; border-radius: 0 0 var(--gm-radius) var(--gm-radius);
}
.gm-hero h1 { color: #fff; }
.gm-hero .eyebrow {
  font-weight: 800; letter-spacing: .14em;
  background: var(--gm-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gm-hero .lead { color: rgba(255,255,255,.75); max-width: 40rem; }
.gm-hero-busca { max-width: 34rem; }
.gm-hero-busca .form-control { border-radius: 999px; border: 0; padding: .9rem 1.4rem; }

/* cards da grade */
.gm-card {
  border-color: var(--gm-line); border-radius: var(--gm-radius);
  transition: transform .15s, box-shadow .15s; color: inherit;
}
.gm-card:hover { transform: translateY(-3px); box-shadow: var(--gm-shadow-sm); }

.eyebrow { letter-spacing: .1em; }

/* página da entidade */
.gm-entidade-hero {
  background: linear-gradient(120deg, var(--gm-ink), var(--gm-indigo-deep));
  color: #fff; border: 0; overflow: hidden;
  border-radius: var(--gm-radius); box-shadow: var(--gm-shadow-sm);
}
.gm-entidade-hero h1 { color: #fff; }
.gm-entidade-hero .eyebrow {
  font-weight: 800;
  background: var(--gm-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gm-url-amigavel { color: rgba(255,255,255,.5); font-family: monospace; }
/* painel do logo no hero público: bloco branco colado, altura vinda do texto
   (desktop); a LARGURA precisa ficar igual à altura (painel quadrado) —
   sem isso, texto curto dá um painel mais largo que alto, e a imagem 1:1 com
   object-fit:contain sobra em barras brancas nas laterais (bug real, achado
   no mock de 2026-07-20). `aspect-ratio` puro em item flex com align-self:
   stretch não converge de forma confiável (Chrome deixa o painel virar
   enorme) — por isso o JS (sincronizarHeroLogo, base.html/base_publico.html)
   mede a altura renderizada do texto e aplica como largura inline. No
   empilhamento mobile a coluna não tem altura própria — fixa 200px, JS não
   mexe (ver guard de largura de tela). */
.gm-hero-destaque { background: #fff; position: relative; flex: 0 0 auto; align-self: stretch; }
.gm-entidade-hero .row > .gm-hero-texto { flex: 1 1 0%; min-width: 0; }
@media (max-width: 767.98px) {
  .gm-entidade-hero .row > * { flex: 1 1 100%; }
  .gm-hero-destaque { height: 200px; width: auto !important; }
}

/* footer público */
.gm-footer-pub { background: var(--gm-ink); color: rgba(255,255,255,.7); }

/* ============================================================
   Vocabulário de componentes do mock validado (docs/epgrupo-cliente-
   padrao/mocks/) — nomes de classe IDÊNTICOS ao mock de propósito (não
   gm-*): esses componentes vieram depois da 1ª leva de reskin (Fase 1) e
   substituem o antigo .gm-sidebar/.navbar-gm/.gm-config para as telas
   autenticadas + vitrine. Tokens usados são os --gm-* já existentes —
   só a MONTAGEM/nomeação dos componentes segue o mock à risca, pra manter
   fácil comparar com docs/epgrupo-cliente-padrao/mocks/*.html direto.

   Descoberta importante (corrige a doc anterior): no mock validado, só o
   hero público e o painel do casco de autenticação (.brand-panel) são
   SEMPRE escuros — a topbar e a lateral da árvore (.arvore-rail) agora
   seguem o tema (claro/escuro), diferente do que a "Referência visual" do
   CLAUDE.md dizia antes (herança do mock Dux anterior). Ver CLAUDE.md.
   ============================================================ */

.wordmark { font-family: var(--gm-font-disp); font-weight: 800; letter-spacing: -.01em; }
.wordmark em { font-style: normal; color: var(--gm-magenta); }

.topbar { background: var(--gm-paper); border-bottom: 1px solid var(--gm-line); }
.topbar .wordmark { color: var(--gm-text); }
/* #nav-conta-mobile é um .collapse simples, não um .dropdown-menu - o
   dropdown-divider do Bootstrap depende de --bs-dropdown-divider-bg/
   --bs-dropdown-divider-margin-y, só definidas dentro do componente
   .dropdown-menu; fora dele caem no fallback (rgba(0,0,0,.15) e 0), o que
   deixava a linha invisível E sem espaço nenhum de respiro. */
#nav-conta-mobile .dropdown-divider { margin: .5rem 0; border-top-color: var(--gm-line); }
.topbar .container-fluid { flex-wrap: wrap; row-gap: .5rem; }

.chip {
  display: inline-block; padding: .3em .8em; border-radius: 999px;
  border: 1px solid var(--gm-line); background: var(--gm-surface-2); color: var(--gm-text);
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking);
}

.entrar-btn {
  border: 1px solid var(--gm-line); border-radius: 999px; padding: .5rem 1.1rem;
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking);
  text-transform: uppercase; text-decoration: none; color: var(--gm-text);
  transition: background .15s, color .15s;
}
.entrar-btn:hover { background: var(--gm-text); color: var(--gm-paper); border-color: var(--gm-text); }

.avatar-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--gm-text); color: var(--gm-paper);
  font-family: var(--gm-font-body); font-weight: 700; font-size: var(--gm-fs-xs);
}
.theme-btn {
  border: 1px solid var(--gm-line); background: var(--gm-paper);
  color: var(--gm-text-soft); border-radius: 999px; padding: .5rem .95rem;
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking);
  text-transform: uppercase; cursor: pointer;
}
/* topbar com wordmark + 2 pills (tema/entrar) é apertado em telas pequenas -
   o texto do toggle de tema muda de tamanho (Claro/Escuro), então o ajuste
   certo é dar folga generosa de padding/gap, não depender do texto caber
   por sorte (bug real: "Escuro" só 1 letra mais longo que "Claro" já
   quebrava a linha, sobrando pouquíssima margem). Regra precisa vir DEPOIS
   de .theme-btn/.entrar-btn no arquivo - mesma especificidade, media query
   sozinha não basta pra vencer o cascade se vier antes. */
@media (max-width: 575.98px) {
  .topbar .container-fluid { gap: .5rem; }
  .theme-btn, .entrar-btn { padding: .45rem .55rem; }
}

h2.secao, .secao {
  font-family: var(--gm-font-disp); font-weight: 800; color: var(--gm-text);
  font-size: var(--gm-fs-xl); margin: 0;
}
.nome-entidade {
  font-family: var(--gm-font-disp); font-weight: 800; font-size: var(--gm-fs-lg);
  color: var(--gm-text); margin: .3rem 0 .75rem;
}

/* estado de revisão (pendente/aprovada/rejeitada) */
.estado {
  display: inline-flex; align-items: center; gap: .45em; white-space: nowrap;
  padding: .3em .8em; border-radius: 999px; border: 1px solid var(--gm-line);
  background: var(--gm-surface-2); color: var(--gm-text);
  font-size: var(--gm-fs-xs); font-weight: 700;
}
.estado::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--gm-mute); }
.estado--pendente { border-color: var(--gm-magenta); background: color-mix(in srgb, var(--gm-magenta) 12%, var(--gm-paper)); }
.estado--pendente::before { background: var(--gm-magenta); }
.estado--aprovada { border-color: var(--gm-green); background: color-mix(in srgb, var(--gm-green) 12%, var(--gm-paper)); }
.estado--aprovada::before { background: var(--gm-green); }
.estado--rejeitada { border-color: var(--gm-orange-2); background: color-mix(in srgb, var(--gm-orange-2) 12%, var(--gm-paper)); }
.estado--rejeitada::before { background: var(--gm-orange-2); }

/* árvore de navegação (substitui .gm-sidebar/.gm-side-item) */
.tree, .tree ul { list-style: none; margin: 0; padding-left: 1rem; }
.tree > li { padding-left: 0; }
.tree ul { border-left: 1px solid var(--gm-line); margin-left: .3rem; }
.tree li { position: relative; padding: .22rem 0 .22rem .55rem; font-size: var(--gm-fs-sm); }
.tree ul li::before {
  content: ""; position: absolute; left: -1px; top: .95em;
  width: .5rem; height: 1px; background: var(--gm-line);
}
.tree .tipo { font-size: var(--gm-fs-xs); color: var(--gm-mute); margin-left: .35rem; }
.tree .herdado { font-size: var(--gm-fs-xs); color: var(--gm-text-soft); }
.tree a { color: var(--gm-indigo); text-decoration: none; }
[data-theme="dark"] .tree a { color: var(--gm-text); }
.tree a:hover { text-decoration: underline; text-underline-offset: 2px; }
.tree .atual {
  font-weight: 800; color: var(--gm-text);
  border-left: 2px solid var(--gm-magenta); margin-left: -2px; padding-left: .45rem;
}
.tree .bloqueado { color: var(--gm-mute); }
.tree .bloqueado::after { content: " 🔒"; }

/* logo pequeno ao lado do nome na árvore (opt-in via com_logo, só onde a
   árvore é curta o bastante pra valer o custo - ver _arvore_aninhada) */
.tree-logo { display: inline-flex; width: 18px; vertical-align: middle; margin-right: .35rem; }
.tree-logo .gm-moldura { max-width: 18px; border-radius: 4px; border-width: 1px; }

footer.rodape { color: var(--gm-mute); font-size: var(--gm-fs-xs); }

/* selo de visibilidade (substitui .pill-visibilidade nas telas novas) */
.selo {
  display: inline-block; padding: .18em .7em; border-radius: 999px;
  border: 1px solid var(--gm-line); background: transparent; color: var(--gm-text-soft);
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking); text-transform: uppercase;
}
.selo--interno { background: var(--gm-text); border-color: var(--gm-text); color: var(--gm-paper); }

/* card de atributo (substitui .gm-attr-card/.gm-attr-grid) */
.atributo {
  display: grid; grid-template-columns: 1fr; gap: .2rem .9rem;
  padding: .8rem 0; border-bottom: 1px solid var(--gm-line);
}
@media (min-width: 768px) { .atributo { grid-template-columns: 200px 1fr; } }
.atributo .rotulo {
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking);
  text-transform: uppercase; color: var(--gm-text-soft); padding-top: .15rem;
}
.atributo .valor { font-size: var(--gm-fs-sm); color: var(--gm-text); }
.atributo .valor p { margin: 0; }
.atributo .meta-linha { grid-column: 1 / -1; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.atributo[hidden] { display: none; }
.atributo-acao {
  margin-left: auto; font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking);
  text-transform: uppercase; color: var(--gm-indigo); text-decoration: underline; text-underline-offset: 2px;
  background: none; border: 0; cursor: pointer;
}
[data-theme="dark"] .atributo-acao { color: var(--gm-text); }
.atributo-acao:hover { text-decoration-thickness: 2px; }

.tag-pendente {
  font-style: normal; font-weight: 700; color: var(--gm-text);
  background: color-mix(in srgb, var(--gm-magenta) 16%, var(--gm-paper));
  border-radius: 999px; padding: .1em .55em;
}

/* diff Vigente/Antes ↔ Novo/Proposto/Depois (aprovação, propor edição, revisão) */
.par-diff { display: grid; grid-template-columns: 1fr; gap: .9rem; margin: 1.5rem 0; }
@media (min-width: 768px) { .par-diff { grid-template-columns: 1fr 1fr; } }
.par-diff .lado { border: 1px solid var(--gm-line); border-radius: var(--gm-radius-sm); padding: .8rem 1rem; background: var(--gm-paper); }
.par-diff .lado--proposto { border-color: var(--gm-magenta); background: color-mix(in srgb, var(--gm-magenta) 6%, var(--gm-paper)); }
.par-diff .atributo { padding: 0; border-bottom: 0; }
@media (min-width: 768px) { .par-diff .atributo { grid-template-columns: 1fr; } }
.origem { font-size: var(--gm-fs-xs); color: var(--gm-text-soft); margin: .35rem 0 0; }
.lado-rotulo {
  display: block; font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking);
  text-transform: uppercase; color: var(--gm-text-soft); margin-bottom: .35rem;
}

/* filtros de visibilidade/estado (botões toggle) */
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0 .5rem; }
/* Aceita <a> além de <button>: filtro que só recorta um formulário é botão,
   mas navegação entre agrupamentos é link — e link tem que parecer o mesmo
   chip. */
.filtros button, .filtros a {
  border: 1px solid var(--gm-line); background: var(--gm-paper); color: var(--gm-text-soft);
  border-radius: 999px; padding: .35rem .9rem; font-size: var(--gm-fs-xs); font-weight: 700;
  letter-spacing: var(--gm-tracking); text-transform: uppercase; cursor: pointer;
}
.filtros button[aria-pressed="true"], .filtros a[aria-pressed="true"] { background: var(--gm-text); border-color: var(--gm-text); color: var(--gm-paper); }

.paleta { display: flex; gap: .5rem; flex-wrap: wrap; }
.sw { width: 2.1rem; height: 2.1rem; border-radius: var(--gm-radius-sm); border: 1px solid var(--gm-line); background: var(--sw); display: inline-block; }
.sw-hex { font-size: var(--gm-fs-xs); color: var(--gm-mute); display: block; margin-top: .2rem; }

/* estado vazio (busca sem resultado, lista vazia) */
.estado-vazio { color: var(--gm-text-soft); font-size: var(--gm-fs-sm); padding: 1.5rem 0; }

/* confirmação inline (substitui window.confirm() nativo) */
.confirma-linha {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .5rem;
  padding: .6rem .8rem; background: var(--gm-surface-2); border-radius: var(--gm-radius-sm);
  font-size: var(--gm-fs-sm);
}

/* ficha de metadados (autor/data/justificativa de uma revisão) */
.ficha { font-size: var(--gm-fs-sm); color: var(--gm-text-soft); }
.just-autora { font-style: italic; color: var(--gm-text); margin: .5rem 0 0; }

/* ============ Console/App shell: layout de conteúdo ============ */
.console-grid, .entidade-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 992px) {
  .console-grid, .entidade-grid { grid-template-columns: 300px 1fr; }
  .arvore-rail { position: sticky; top: 0; align-self: start; height: 100svh; overflow: auto; border-right: 1px solid var(--gm-line); }
}
.arvore-rail { padding: 1.5rem 1.25rem; background: var(--gm-paper); }
.arvore-rail .escopo, .acesso-nota, .escopo-nota { margin-top: 1rem; font-size: var(--gm-fs-xs); color: var(--gm-mute); }

.conteudo { width: 100%; padding: 1.75rem 1.25rem 3rem; max-width: 1100px; margin-inline: auto; }
@media (min-width: 992px) { .conteudo { padding: 2.25rem 2.5rem 4rem; } }

h1.saudacao {
  font-family: var(--gm-font-disp); font-weight: 800; color: var(--gm-text);
  font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; overflow-wrap: anywhere;
}

.atalho { position: relative; text-decoration: none; }
.badge-pendencia {
  position: absolute; top: .7rem; right: .7rem; background: var(--gm-magenta); color: #fff;
  font-size: var(--gm-fs-xs); font-weight: 800; border-radius: 999px; padding: .15em .6em;
}

/* busca com trecho destacado (parceiro/cliente) */
.resultado { padding: 1rem 0; border-bottom: 1px solid var(--gm-line); }
.resultado .cab { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.resultado .trecho { font-size: var(--gm-fs-sm); color: var(--gm-text-soft); margin: .3rem 0 0; }
.resultado mark, .trecho mark { background: color-mix(in srgb, var(--gm-magenta) 30%, transparent); color: var(--gm-text); border-radius: 3px; padding: 0 .15em; }

/* linha do tempo de revisões (substitui .gm-rev-item) — .rev em si é
   definido só mais abaixo em .linha-tempo .rev (tinha uma versão solta aqui,
   display:flex sem flex-direction, que vazava pro <li class="rev"> real e
   espalhava cabeçalho/autor/citação/ações lado a lado em vez de empilhados -
   removida; .rev-cab continua aqui porque é a única definição dela). */
.linha-tempo { margin: 0; padding: 0; list-style: none; }
.rev-cab { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* ============================================================
   Casco de autenticação (login, MFA, definir senha) — sempre
   .brand-panel escuro (painel fixo) + .form-card claro/escuro por tema.
   ============================================================ */
body.auth { min-height: 100svh; }
.login-grid { min-height: 100svh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .login-grid { grid-template-columns: 5fr 7fr; } }

.brand-panel {
  background: var(--gm-ink); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2rem 1.5rem;
}
@media (min-width: 992px) { .brand-panel { padding: 3rem 3.25rem; } }
.brand-panel .label { color: rgba(255,255,255,.62); font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking); text-transform: uppercase; }
.brand-panel .wordmark em { font-style: normal; color: var(--gm-magenta); }
.brand-panel .display {
  font-family: var(--gm-font-disp); font-weight: 800; line-height: 1.12;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin: 1.25rem 0 0; color: #fff;
}
.brand-panel .display em { font-style: normal; color: var(--gm-magenta); }
.endosso { margin-top: 2.5rem; font-size: var(--gm-fs-xs); color: rgba(255,255,255,.62); }
.endosso strong { color: #fff; font-weight: 800; letter-spacing: .12em; }

.ladder { list-style: none; margin: 2.5rem 0 0; padding: 0; display: none; }
@media (min-width: 992px) { .ladder { display: block; } }
.ladder li { position: relative; padding: .55rem 0 .55rem 1.4rem; border-left: 1px solid rgba(255,255,255,.25); }
.ladder li::before { content: ""; position: absolute; left: -4px; top: 1.15rem; width: 7px; height: 7px; border-radius: 50%; background: var(--gm-magenta); }
.ladder li:nth-child(1) { margin-left: 0; }
.ladder li:nth-child(2) { margin-left: 1.25rem; }
.ladder li:nth-child(3) { margin-left: 2.5rem; }
.ladder li:nth-child(4) { margin-left: 3.75rem; }
.ladder .label { display: block; margin-bottom: .1rem; }
.ladder .nome { font-weight: 700; font-size: var(--gm-fs-sm); color: #fff; }
.ladder .herda { font-size: var(--gm-fs-xs); color: rgba(255,255,255,.62); }

/* cursor piscando enquanto a animação de digitação preenche o item atual */
.ladder li.escrevendo .nome::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: var(--gm-magenta);
  animation: gm-cursor-blink 1s step-end infinite;
}
@keyframes gm-cursor-blink { 50% { opacity: 0; } }
/* Sem @media (prefers-reduced-motion: reduce) aqui de propósito — a árvore
   decorativa do casco de autenticação é a única exceção deliberada no app
   que ignora essa preferência de sistema (decisão de produto, 2026-07-22;
   ver comentário no <script> de _base_auth.html). */

.form-col { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.form-card { width: 100%; max-width: 400px; }
.form-card h1 { font-family: var(--gm-font-disp); font-weight: 800; font-size: 1.9rem; color: var(--gm-text); margin: .35rem 0 1.5rem; }
.aux { font-size: var(--gm-fs-sm); color: var(--gm-text-soft); }
.aux a { color: var(--gm-indigo); }
[data-theme="dark"] .aux a { color: var(--gm-text); }
.aux a:hover { text-decoration-thickness: 2px; }

.link-pular {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: var(--gm-fs-sm);
  font-weight: 400;
  color: var(--gm-indigo);
  text-align: center;
  text-decoration: underline;
}
[data-theme="dark"] .link-pular { color: var(--gm-text); }
.link-pular:hover { text-decoration-thickness: 2px; }
.convite {
  margin-top: 1.75rem; padding: .8rem 1rem; font-size: var(--gm-fs-xs); color: var(--gm-text-soft);
  background: var(--gm-surface-2); border-left: 3px solid var(--gm-magenta); border-radius: var(--gm-radius-sm);
}

.totp-row { display: flex; gap: .5rem; margin: .25rem 0 1.25rem; }
.totp {
  width: 3rem; height: 3.4rem; text-align: center; font-size: var(--gm-fs-xl); font-weight: 700;
  border-radius: var(--gm-radius-sm); background-color: var(--gm-paper); color: var(--gm-text); border: 1px solid var(--gm-line);
}
.totp:focus { border-color: var(--gm-indigo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gm-indigo) 30%, transparent); outline: none; }

.auth .theme-btn, .theme-btn.theme-btn--fixo { position: fixed; top: .75rem; right: .75rem; z-index: 10; }

.regras { list-style: none; margin: .5rem 0 0; padding: 0; font-size: var(--gm-fs-xs); color: var(--gm-text-soft); }
.regras li { padding-left: 1rem; position: relative; margin-top: .15rem; }
.regras li::before { content: "·"; position: absolute; left: .25rem; color: var(--gm-mute); }

.forca { margin-top: .6rem; }
.forca .trilho { height: 6px; border-radius: 999px; background: var(--gm-surface-2); overflow: hidden; }
.forca .barra { height: 100%; width: 0; background: var(--gm-mute); }
.forca .barra--media { background: var(--gm-magenta); }
.forca .barra--forte { background: var(--gm-green); }
.forca .rotulo-forca { font-size: var(--gm-fs-xs); color: var(--gm-text-soft); margin-top: .25rem; display: block; }

.erro {
  margin: .5rem 0 0; padding: .55rem .8rem; font-size: var(--gm-fs-sm); color: var(--gm-text);
  background: var(--gm-surface-2); border-left: 3px solid var(--gm-magenta); border-radius: var(--gm-radius-sm);
}

.codigos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .9rem;
  margin: .6rem 0 0; padding: .8rem 1rem; border: 1px dashed var(--gm-line); border-radius: var(--gm-radius-sm);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--gm-fs-sm); color: var(--gm-text); background: var(--gm-surface-2);
}
@media (min-width: 480px) { .codigos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.copiar {
  margin-top: .5rem; border: 1px solid var(--gm-line); background: var(--gm-paper); color: var(--gm-text-soft);
  border-radius: var(--gm-radius-sm); padding: .3rem .8rem; font-size: var(--gm-fs-xs); font-weight: 700;
  letter-spacing: var(--gm-tracking); text-transform: uppercase; cursor: pointer;
}
.guarda { font-size: var(--gm-fs-xs); color: var(--gm-text-soft); margin: .45rem 0 0; }

/* ============================================================
   Console interno — telas de entidade/aprovação/criação/histórico
   (docs/epgrupo-cliente-padrao/mocks/editor-*.html): classes que faltavam
   no vocabulário portado acima. Mesma regra: nomes idênticos ao mock,
   tokens --gm-* já existentes.
   ============================================================ */

/* trilha (breadcrumb discreto das telas do console) */
.trilha { font-size: var(--gm-fs-xs); color: var(--gm-mute); }
.trilha a { color: var(--gm-indigo); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .trilha a { color: var(--gm-text); }
.trilha .aqui { color: var(--gm-text-soft); font-weight: 700; }

h1.titulo {
  font-family: var(--gm-font-disp); font-weight: 800; color: var(--gm-text);
  font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin: .3rem 0 .2rem;
}
.meta-entidade, .meta-lista, .meta-form { font-size: var(--gm-fs-sm); color: var(--gm-text-soft); }

.herda-chip {
  font-size: var(--gm-fs-xs); color: var(--gm-text-soft);
  border: 1px dashed var(--gm-line); border-radius: 999px; padding: .15em .7em;
}
.herda-chip a { color: var(--gm-indigo); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .herda-chip a { color: var(--gm-text); }

.secao-bloco { margin-top: 2.25rem; }
.secao-bloco > h2 { margin-bottom: .25rem; }
.nota-parcial { font-size: var(--gm-fs-xs); color: var(--gm-mute); margin: .6rem 0 0; }
.lista-links { margin: 0; padding: 0; list-style: none; display: flex; gap: 1rem; flex-wrap: wrap; }
.lista-links a { color: var(--gm-indigo); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .lista-links a { color: var(--gm-text); }
.lista-links a:hover { text-decoration-thickness: 2px; }

/* editor inline de atributo (console interno — publica direto, RF08) */
.editor-atributo {
  margin: -.4rem 0 1rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--gm-magenta);
  border-radius: var(--gm-radius-sm); background: color-mix(in srgb, var(--gm-magenta) 6%, var(--gm-paper));
}
.editor-atributo .campo, .campo { margin-top: 1.4rem; }
.editor-atributo .campo:first-child { margin-top: 1rem; }
.editor-atributo .contador, .contador { font-size: var(--gm-fs-xs); color: var(--gm-mute); margin-top: .3rem; display: block; }
.alcance {
  margin-top: 1rem; padding: .75rem .9rem; border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-sm); background: var(--gm-paper);
}
.alcance .titulo-alcance {
  display: block; font-size: var(--gm-fs-xs); font-weight: 700;
  letter-spacing: var(--gm-tracking); text-transform: uppercase; color: var(--gm-text-soft); margin-bottom: .4rem;
}
.alcance ul { margin: .3rem 0 .6rem; padding-left: 1.1rem; font-size: var(--gm-fs-sm); }
.opcoes-rf05 { display: flex; flex-direction: column; gap: .4rem; margin-top: .3rem; }
.opcoes-rf05 label { font-size: var(--gm-fs-sm); display: flex; gap: .5rem; align-items: flex-start; }
.opcoes-rf05 .desc { font-size: var(--gm-fs-xs); color: var(--gm-text-soft); display: block; }
.editor-acoes { display: flex; gap: 1rem; align-items: center; margin-top: 1.1rem; flex-wrap: wrap; }
.editor-acoes a.cancelar-inline, .cancelar-inline, .acoes a.cancelar, .decisao-acoes a.cancelar {
  color: var(--gm-indigo); text-decoration: underline; text-underline-offset: 2px;
  font-size: var(--gm-fs-sm); cursor: pointer; background: none; border: 0; padding: 0;
}
[data-theme="dark"] .editor-acoes a.cancelar-inline,
[data-theme="dark"] .cancelar-inline,
[data-theme="dark"] .acoes a.cancelar,
[data-theme="dark"] .decisao-acoes a.cancelar { color: var(--gm-text); }
.sucesso-inline, .sucesso-restaurar {
  margin: .5rem 0 1rem; padding: .6rem .9rem; font-size: var(--gm-fs-sm); color: var(--gm-text);
  background: var(--gm-surface-2); border-left: 3px solid var(--gm-green); border-radius: var(--gm-radius-sm);
}

/* anexo (arquivo/imagem genérico — card de download) */
.anexo {
  display: flex; align-items: center; gap: .7rem; padding: .65rem 0;
  border-bottom: 1px solid var(--gm-line); font-size: var(--gm-fs-sm);
}
.anexo:last-child { border-bottom: 0; }
.anexo .ext {
  font-size: var(--gm-fs-xs); font-weight: 800; border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-sm); padding: .25em .5em; color: var(--gm-text-soft);
}
.anexo .tam { margin-left: auto; color: var(--gm-mute); font-size: var(--gm-fs-xs); }

/* contatos (N:N, não é atributo) */
.contato {
  display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  padding: .55rem 0; border-bottom: 1px solid var(--gm-line); font-size: var(--gm-fs-sm);
}
.contato:last-child { border-bottom: 0; }
.contato .papel { color: var(--gm-text-soft); }
.lgpd-nota { font-size: var(--gm-fs-xs); color: var(--gm-mute); }

/* painel de aprovação (tabela) */
.linha-revisao a.alvo { color: var(--gm-text); text-decoration: none; font-weight: 700; }
.linha-revisao a.alvo:hover { text-decoration: underline; text-underline-offset: 2px; }
.linha-revisao .atrib { color: var(--gm-text-soft); font-weight: 400; }
.perfil-tag { font-size: var(--gm-fs-xs); color: var(--gm-mute); }
.vazio, .estado-vazio { color: var(--gm-mute); font-size: var(--gm-fs-sm); padding: 1.2rem 0; }

/* diff + decisão (aprovar/rejeitar) */
.detalhe-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .3rem 0 .4rem; }
.ficha .linha { display: flex; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--gm-line); flex-wrap: wrap; }
.ficha .linha:last-child { border-bottom: 0; }
.ficha .k {
  flex: 0 0 180px; font-size: var(--gm-fs-xs); font-weight: 700;
  letter-spacing: var(--gm-tracking); text-transform: uppercase; color: var(--gm-text-soft); padding-top: .1rem;
}
.just-autora .quem { display: block; margin-top: .3rem; font-size: var(--gm-fs-xs); color: var(--gm-mute); }
.decisao { margin-top: 1.6rem; }
.decisao-acoes { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.decisao-acoes a.cancelar:hover { text-decoration-thickness: 2px; }
.btn-rejeitar {
  border: 1px solid var(--gm-line); background: var(--gm-paper); color: var(--gm-text);
  border-radius: 100px; padding: .65em 1.4em; font-weight: 700; font-size: var(--gm-fs-sm);
  letter-spacing: var(--gm-tracking); text-transform: uppercase; cursor: pointer;
}
.btn-rejeitar:hover { background: var(--gm-surface-2); }
.form-rejeicao { margin-top: 1.2rem; }
.form-rejeicao[hidden] { display: none; }
.sucesso-decisao {
  margin-top: 1.4rem; padding: .9rem 1.1rem; font-size: var(--gm-fs-sm); color: var(--gm-text);
  border-radius: var(--gm-radius-sm);
}
.sucesso-decisao--aprovada { background: color-mix(in srgb, var(--gm-green) 12%, var(--gm-paper)); border-left: 3px solid var(--gm-green); }
.sucesso-decisao--rejeitada { background: var(--gm-surface-2); border-left: 3px solid var(--gm-text); }

/* criar entidade */
.sem-justificativa {
  margin-top: 1.5rem; padding: .8rem 1rem; font-size: var(--gm-fs-sm);
  color: var(--gm-text-soft); background: var(--gm-surface-2);
  border-left: 3px solid var(--gm-green); border-radius: var(--gm-radius-sm);
}
.campos-tipo { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--gm-line); }
.campos-tipo .aviso-vazio { font-size: var(--gm-fs-sm); color: var(--gm-mute); }
.slug-preview { font-size: var(--gm-fs-xs); color: var(--gm-mute); margin-top: .3rem; }
.slug-preview code { color: var(--gm-text-soft); }
.acoes { display: flex; gap: 1rem; align-items: center; margin-top: 1.6rem; flex-wrap: wrap; }
.raiz-nova { margin-top: 1.5rem; }

/* linha do tempo de revisões (histórico) — timeline com marcador, mais
   detalhada que o .rev genérico acima (que nenhum template ainda consumia) */
.linha-tempo { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.linha-tempo .rev {
  position: relative; padding: 0 0 1.4rem 1.4rem; margin: 0;
  border-left: 2px solid var(--gm-line); border-bottom: 0;
}
.linha-tempo .rev:last-child { border-left-color: transparent; padding-bottom: 0; }
.linha-tempo .rev::before {
  content: ""; position: absolute; left: -5px; top: .2rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gm-text);
}
.linha-tempo .rev.rev--atual::before { background: var(--gm-green); }
.linha-tempo .rev-cab .quando { font-size: var(--gm-fs-xs); color: var(--gm-mute); margin-left: auto; }
.rev-alvo { font-weight: 800; color: var(--gm-text); }
.rev-tipo { font-size: var(--gm-fs-xs); color: var(--gm-text-soft); }
.rev-autor { font-size: var(--gm-fs-xs); color: var(--gm-text-soft); margin: .2rem 0 0; }
.rev-just {
  font-size: var(--gm-fs-sm); color: var(--gm-text); margin: .4rem 0 0;
  border-left: 3px solid var(--gm-line); padding-left: .6rem;
}
.rev-origem { font-size: var(--gm-fs-xs); color: var(--gm-mute); margin: .3rem 0 0; }
.rev-acoes { margin-top: .6rem; }
.rev-acoes button.restaurar {
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking); text-transform: uppercase;
  color: var(--gm-indigo); text-decoration: underline; text-underline-offset: 2px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
[data-theme="dark"] .rev-acoes button.restaurar { color: var(--gm-text); }
.confirma-restaurar {
  margin-top: .6rem; padding: .75rem .9rem; border: 1px solid var(--gm-magenta);
  border-radius: var(--gm-radius-sm); background: color-mix(in srgb, var(--gm-magenta) 6%, var(--gm-paper));
  font-size: var(--gm-fs-sm);
}
.confirma-restaurar .acoes-confirma { display: flex; gap: 1rem; margin-top: .6rem; flex-wrap: wrap; align-items: center; }

/* ============================================================
   MFA — configuração (QR + passos numerados), portado de
   docs/epgrupo-cliente-padrao/mocks/cliente-mfa-setup.html e
   editor-definir-senha.html (mesma anatomia nos dois).
   ============================================================ */
.passo { margin-top: 1.4rem; }
.passo .n {
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking); text-transform: uppercase;
  color: var(--gm-text-soft); display: block; margin-bottom: .4rem;
}
.qr-wrap { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.qr {
  width: 148px; height: 148px; padding: 8px; background: var(--gm-paper);
  border: 1px solid var(--gm-line); border-radius: var(--gm-radius-sm);
}
.cod-manual {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--gm-fs-sm);
  color: var(--gm-text); background: var(--gm-surface-2); border-radius: var(--gm-radius-sm); padding: .15em .5em;
  word-break: break-all;
}
.obrigatorio { font-size: var(--gm-fs-xs); color: var(--gm-text-soft); }

/* divulgação (details/summary) — explicações opcionais que não precisam
   ocupar espaço por padrão (ex.: "o que é isso?", "instalar o app") */
.divulgacao { margin-top: .5rem; }
.divulgacao summary {
  cursor: pointer;
  list-style: none;
  color: var(--gm-indigo);
  font-weight: 600;
}
[data-theme="dark"] .divulgacao summary { color: var(--gm-text); }
.divulgacao summary::-webkit-details-marker { display: none; }
.divulgacao summary::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-right: .45rem;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid currentColor;
  transition: transform .15s;
  vertical-align: middle;
}
.divulgacao[open] > summary::before { transform: rotate(90deg); }
.divulgacao summary:hover { text-decoration: underline; }
.divulgacao .aux { margin-top: .5rem; }

/* ============================================================
   Página "Perfil e segurança" unificada (usuarios/perfil.html) —
   portado de docs/epgrupo-cliente-padrao/mocks/editor-perfil-
   seguranca.html (mesma anatomia em cliente-/parceiro-perfil-
   seguranca.html). Classes novas: os mocks de config/gestão têm
   anatomia própria não coberta pelo vocabulário geral acima.
   ============================================================ */
.pagina-config { max-width: 760px; margin: 0 auto; }
.pagina-config .bloco { margin-top: 2.2rem; }
.pagina-config .bloco:first-of-type { margin-top: 1.5rem; }
.pagina-config .bloco > h2 {
  font-family: var(--gm-font-disp); font-weight: 800; color: var(--gm-text);
  font-size: var(--gm-fs-lg); margin: 0 0 .6rem;
}
.dados-perfil .linha { display: flex; gap: .8rem; padding: .4rem 0; border-bottom: 1px solid var(--gm-line); flex-wrap: wrap; }
.dados-perfil .linha:last-child { border-bottom: 0; }
.dados-perfil .k {
  flex: 0 0 150px; font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking);
  text-transform: uppercase; color: var(--gm-text-soft); padding-top: .15rem;
}
.nota { font-size: var(--gm-fs-xs); color: var(--gm-mute); margin: .5rem 0 0; }
.ok-inline {
  margin: .8rem 0 0; padding: .7rem .9rem; font-size: var(--gm-fs-sm); color: var(--gm-text);
  background: var(--gm-surface-2); border-left: 3px solid var(--gm-green); border-radius: var(--gm-radius-sm);
}
.mfa-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: var(--gm-fs-sm); color: var(--gm-text); }
.acoes-mfa { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.acoes-mfa .reconf {
  color: var(--gm-indigo); text-decoration: underline; text-underline-offset: 2px; font-size: var(--gm-fs-sm);
  background: none; border: 0; cursor: pointer; padding: 0; font-weight: 700;
}
[data-theme="dark"] .acoes-mfa .reconf { color: var(--gm-text); }

/* ============================================================
   Cabeçalho de lista e ações em linha — portado de
   editor-usuarios.html/editor-convidar-usuario.html.
   (.trilha/.meta-lista/.meta-form já definidos acima, seção
   "Console interno".)
   ============================================================ */
.cab-lista { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin: 1.4rem 0 1rem; }
.escopo-col { font-size: var(--gm-fs-xs); color: var(--gm-text-soft); }

.linha-acoes { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ── Lista de usuários ───────────────────────────────────────────────────────
   Colunas de largura fixa. Sem isto cada coluna se ajustava ao conteúdo, e o
   aglomerado de ações — que muda de tamanho conforme o estado da conta —
   empurrava o resto, quebrando linha numa conta e não na outra. */
.tabela-usuarios { table-layout: fixed; min-width: 62rem; }
.tabela-usuarios th:nth-child(1), .tabela-usuarios td:nth-child(1) { width: 30%; }
.tabela-usuarios th:nth-child(2), .tabela-usuarios td:nth-child(2) { width: 9rem; }
.tabela-usuarios th:nth-child(3), .tabela-usuarios td:nth-child(3) { width: 14%; }
.tabela-usuarios th:nth-child(4), .tabela-usuarios td:nth-child(4) { width: 9rem; }
.tabela-usuarios th:nth-child(5), .tabela-usuarios td:nth-child(5) { width: 8rem; }
.tabela-usuarios th:nth-child(6), .tabela-usuarios td:nth-child(6) { width: 3.5rem; }
/* Quem nunca entrou fica mais apagado: e ausencia de dado, nao dado. */
.tabela-usuarios .sem-acesso { color: var(--gm-mute); font-style: italic; }
.tabela-usuarios td { vertical-align: middle; }
.tabela-usuarios .col-acoes { text-align: right; }

/* "Editor interno" quebrava em duas linhas e "Cliente" não — duas alturas de
   linha por causa de um rótulo. O chip nunca quebra. */
.chip { white-space: nowrap; }

/* O "..." — largura fixa é o ponto: é ele que mantém a coluna estável,
   independente de quantas ações aquela conta tem. */
.botao-reticencias {
  appearance: none; -webkit-appearance: none;
  width: 2rem; height: 2rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 50%;
  background: none; color: var(--gm-text-soft); cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.botao-reticencias:hover, .botao-reticencias[aria-expanded="true"] {
  background: var(--gm-surface-2); color: var(--gm-text); border-color: var(--gm-line);
}

/* Ação destrutiva em coral, e sempre abaixo de um divisor: some do caminho de
   quem está só navegando o menu. */
.dropdown-item--risco { color: var(--gm-magenta); }
.dropdown-item--risco:hover { background: var(--gm-magenta); color: #fff; }

/* O item apagado precisa PARECER apagado e continuar legível — `title` explica
   por que ele não está disponível. */
.dropdown-menu .dropdown-item.disabled { color: var(--gm-mute); cursor: not-allowed; }

/* O menu sai de dentro de .table-responsive, que tem overflow: sem isto o
   dropdown aparece recortado na borda da tabela. */
.tabela-usuarios .dropdown-menu { position: absolute; z-index: 1030; }
.tabela-usuarios .dropdown-menu { min-width: 15rem; }

/* Uma linha por celula. A altura da linha passa a ser ditada so pelo par
   nome+e-mail, que e igual em todas — nada mais cresce por baixo. */
.tabela-usuarios td > * { margin-bottom: 0; }
.linha-estado { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
/* A seta e o unico enfeite: e ela que transforma dois enderecos numa frase
   ("de A para B") sem precisar de rotulo nenhum. */
.seta-troca { color: var(--gm-magenta); font-weight: 700; }
.escopo-col .escopo-alerta { white-space: nowrap; }

.linha-acoes button, .linha-acoes .acao-link {
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking); text-transform: uppercase;
  color: var(--gm-indigo); text-decoration: underline; text-underline-offset: 2px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
[data-theme="dark"] .linha-acoes button, [data-theme="dark"] .linha-acoes .acao-link { color: var(--gm-text); }
.linha-acoes button:disabled { color: var(--gm-mute); text-decoration: none; cursor: not-allowed; }
.confirma-linha .acoes-confirma { display: flex; gap: .8rem; margin-top: .5rem; flex-wrap: wrap; }
.confirma-linha .confirmar {
  border: 0; border-radius: var(--gm-radius-sm); padding: .4em 1em; cursor: pointer;
  background: var(--gm-text); color: var(--gm-paper);
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking); text-transform: uppercase;
}
.confirma-linha .cancelar-inline {
  background: none; border: 0; color: var(--gm-indigo); cursor: pointer;
  font-size: var(--gm-fs-xs); text-decoration: underline; text-underline-offset: 2px; padding: .4em 0;
}
[data-theme="dark"] .confirma-linha .cancelar-inline { color: var(--gm-text); }
.sucesso-linha { font-size: var(--gm-fs-xs); color: var(--gm-text-soft); margin-top: .4rem; }

/* bloco de escopo do convite */
.bloco-escopo {
  margin-top: 1.2rem; padding: 1rem 1.1rem; border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius-sm); background: var(--gm-surface-2);
}
.bloco-escopo .titulo-escopo {
  display: block; font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking);
  text-transform: uppercase; color: var(--gm-text-soft); margin-bottom: .5rem;
}
.aviso-sem-escopo { font-size: var(--gm-fs-sm); color: var(--gm-text-soft); margin-top: .5rem; }

/* ============================================================
   Vitrine pública (RF10/RF12) — reskin sobre o vocabulário do mock
   (docs/epgrupo-cliente-padrao/mocks/visitante-home.html e
   visitante-entidade.html). Substitui .gm-hero/.gm-header-pub/
   .gm-footer-pub como base da Home; a entidade pública mantém
   .gm-entidade-hero/.gm-hero-destaque/.gm-moldura (hero-logo, fora
   do escopo deste reskin) e só troca o corpo dos atributos pra
   .atributo/.selo. Painel permanentemente escuro (só este, ver
   CLAUDE.md "Referência visual"): usa --gm-ink direto, sem inverter
   no tema escuro — mesma lógica de .brand-panel. */
.hero-publico { background: var(--gm-ink); color: #fff; padding: 3.5rem 0 3rem; }
/* o mosaico sangra pros quatro lados e é o fundo, não o conteúdo */
.hero-publico { position: relative; overflow: hidden; }
.hero-publico > .container { position: relative; z-index: 1; }
.hero-publico .label {
  color: rgba(255, 255, 255, .62); font-family: var(--gm-font-body);
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking); text-transform: uppercase;
}
.hero-publico .display {
  font-family: var(--gm-font-disp); font-weight: 800; line-height: 1.1;
  font-size: clamp(1.9rem, 4.4vw, 3rem); color: #fff; margin: .8rem 0 1rem;
}
.hero-publico .display em { font-style: normal; color: var(--gm-magenta); }
.hero-publico .lead { color: rgba(255, 255, 255, .75); font-size: 1rem; max-width: 620px; }
/* ── mosaico do hero da vitrine ─────────────────────────────────────────────
   Referência: o site anterior (guiademarcas.epgrupo.com.br), onde um mosaico
   inclinado de logos sangra pela direita do hero escuro. A diferença é que lá
   a seleção era curada à mão no WordPress e aqui ela sai do banco — ficha nova
   que entra na vitrine entra no mosaico (ver vitrine/views.py:_mosaico).

   Decorativo: `aria-hidden` no template e `pointer-events: none` aqui, pra que
   o mosaico nunca roube clique da busca que passa por cima dele. */
.hero-mosaico {
  position: absolute;
  top: -22%; bottom: -22%; right: -14%;
  width: 68%;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(.5rem, 1vw, .9rem);
  transform: rotate(-12deg);
  pointer-events: none;
  /* O lado esquerdo tem que sumir por baixo do título e da busca. Máscara em
     alfa, e não um degradê da cor do hero por cima: assim continua certo se o
     --gm-ink mudar, e não depende de mais um elemento empilhado. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 38%);
  mask-image: linear-gradient(to right, transparent, #000 38%);
}
.mosaico-faixa {
  display: flex; width: max-content;
  gap: clamp(.5rem, 1vw, .9rem);
  /* Duração proporcional ao número de tiles (--tiles vem do template), e não
     fixa: a animação percorre metade da faixa, e com duração fixa a velocidade
     crescia junto com o número de fichas — em hom, 10x mais rápido que em dev.
     Por tile, a velocidade fica a mesma com 7 ou com 12 logos por faixa.
     7,2s por tile dá ~9 px/s: a primeira versão (3,6s) foi achada rápida
     demais no uso (2026-10-19). */
  animation: mosaico-deriva calc(var(--tiles, 24) * 7.2s) linear infinite;
}
/* Sentidos alternados: a faixa do meio vai pro outro lado, o que evita que o
   conjunto pareça um carrossel só. MESMA velocidade das outras de propósito —
   ela já foi ~20% mais rápida "pra dar profundidade", e o que se via era só
   descompasso. Por isso aqui muda o nome da animação e nada mais. */
.mosaico-faixa:nth-child(even) { animation-name: mosaico-deriva-volta; }

.mosaico-tile {
  flex: 0 0 auto;
  width: clamp(72px, 7.6vw, 118px);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.mosaico-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cada faixa é a MESMA sequência duas vezes (vitrine/views.py:_faixa), então
   -50% cai exatamente sobre a cópia e o loop não tem emenda visível. Mexer num
   dos dois lados sem o outro quebra a emenda. */
@keyframes mosaico-deriva       { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes mosaico-deriva-volta { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Abaixo de lg o mosaico cobriria o título e a busca, e não sobra largura pra
   ele sangrar sem criar rolagem horizontal. Sai da tela inteiro — encolher
   deixaria tile de 40px, que não se reconhece como logo. O `loading=lazy` do
   template faz o navegador nem baixar as imagens aqui. */
@media (max-width: 991.98px) { .hero-mosaico { display: none; } }

/* Sem exceção pra prefers-reduced-motion, por decisão de produto (2026-10-19).
   O motivo é o público: Windows multi-session/VDI e sessões RDP costumam vir
   com "Efeitos de animação" desligado por padrão, pra poupar recurso, e aí o
   mosaico ficaria parado pra boa parte dos visitantes corporativos, que não
   escolheram isso. O custo aceito é de acessibilidade: quem desligou de
   propósito por sensibilidade a movimento vê o mosaico andando mesmo assim.
   A deriva é lenta e fica atrás do conteúdo, o que atenua, mas não resolve.
   Se a exceção voltar, ela precisa cobrir também `:nth-child(even)`: a regra
   da faixa do meio é mais específica e escapava de um `animation: none`
   aplicado só a `.mosaico-faixa` (bug real, foi o que revelou essa questão). */

.hero-busca { max-width: 560px; margin-top: 1.5rem; }
.hero-busca .form-control { background: #fff; color: #222222; border: 0; padding: .85rem 1.1rem; font-size: 1rem; border-radius: 999px; }
.hero-busca .form-control::placeholder { color: #757575; }

/* navegar por grupo (Home ociosa) */
.grupos-nav { display: flex; flex-wrap: wrap; gap: .55rem; }
.grupos-nav a {
  border: 1px solid var(--gm-line); border-radius: 999px; padding: .4rem 1rem;
  color: var(--gm-text); text-decoration: none; font-size: var(--gm-fs-sm); font-weight: 600;
}
.grupos-nav a:hover { border-color: var(--gm-indigo); }
[data-theme="dark"] .grupos-nav a:hover { border-color: var(--gm-text); }

.resultado-contagem { font-size: var(--gm-fs-sm); color: var(--gm-text-soft); }

/* label utilitário (eyebrow) — usado dentro do hero escuro (gm-entidade-hero,
   texto branco) e em contexto claro (herda --gm-text-soft por padrão).
   (.trilha/h1.titulo/.secao-bloco já definidos acima, seção "Console interno".) */
.label {
  font-family: var(--gm-font-body); font-size: var(--gm-fs-xs); font-weight: 700;
  letter-spacing: var(--gm-tracking); text-transform: uppercase; color: var(--gm-text-soft);
}
.gm-entidade-hero .label { color: rgba(255, 255, 255, .62); }
.gm-entidade-hero h1.titulo { color: #fff; }

/* ── console do editor: completude ──────────────────────────────────────────
   A barra e o checklist existem por um motivo de produto: a ficha entra na
   vitrine quando fica completa (não há botão publicar), então quem cadastra
   precisa ver o quanto falta sem ler texto. O preenchimento usa o gradiente da
   assinatura; o trilho segue o tema. */
.barra-completude {
  flex: 1 1 auto; min-width: 4rem; height: 8px; border-radius: 999px;
  background: var(--gm-surface-2); overflow: hidden;
}
.barra-completude > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--gm-grad);
}

/* Checklist do que falta: item cumprido ganha o tique e esmaece — a leitura
   rápida tem que ser "o que ainda me cobra", não "o que já fiz". */
.lista-checklist { list-style: none; padding: 0; margin: 0; }
.lista-checklist li {
  position: relative; padding-left: 1.5rem; margin-bottom: .35rem;
  font-size: var(--gm-fs-sm); color: var(--gm-text);
}
.lista-checklist li::before {
  content: '○'; position: absolute; left: 0; color: var(--gm-mute);
}
.lista-checklist li.ok { color: var(--gm-text-soft); }
.lista-checklist li.ok::before { content: '✓'; color: var(--gm-green); }

/* ============================================================
   Seletor de duas colunas com busca (dual-list) — vínculo de licenciadora
   no convite e na alteração. Estilo filter_horizontal do admin, refeito
   sobre os tokens da casa; JS em static/js/dual-list.js.
   ============================================================ */
.dual-list-corpo { display: flex; gap: 1rem; flex-wrap: wrap; }
.dual-list-coluna { flex: 1 1 240px; min-width: 200px; }
.dual-list-cabecalho {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  font-size: var(--gm-fs-xs); font-weight: 700; letter-spacing: var(--gm-tracking);
  text-transform: uppercase; color: var(--gm-text-soft); margin-bottom: .4rem;
}
.dual-list-contagem {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  min-width: 1.6rem; padding: 0 .4rem; text-align: center;
  border: 1px solid var(--gm-line); border-radius: 100px;
}
.dual-list-itens {
  list-style: none; margin: .4rem 0 0; padding: 0; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--gm-line); border-radius: var(--gm-radius-sm);
  background: var(--gm-surface);
}
/* Sem os itens (JS ainda não rodou) a caixa vazia é só uma moldura solta —
   colapsa até haver conteúdo. */
.dual-list-itens:empty { border: 0; margin: 0; }
.dual-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; text-align: left; padding: .45rem .7rem;
  border: 0; border-bottom: 1px solid var(--gm-line); background: transparent;
  font-size: var(--gm-fs-sm); font-weight: 400; color: var(--gm-text); cursor: pointer;
}
.dual-list-itens li:last-child > .dual-list-item { border-bottom: 0; }
.dual-list-item:hover { background: var(--gm-surface-2); }
.dual-list-item:focus-visible { outline: 2px solid var(--gm-magenta); outline-offset: -2px; }
.dual-list-icone { flex-shrink: 0; color: var(--gm-text-soft); font-weight: 700; }
.dual-list-item:hover .dual-list-icone { color: var(--gm-magenta); }
.dual-list-vazio {
  padding: .6rem .1rem 0; margin: 0;
  font-size: var(--gm-fs-sm); color: var(--gm-text-soft);
}

/* Coluna "Escopo" da listagem de usuários: Cliente sem vínculo é um aviso
   inline, não um bloco. Usava .erro, que é callout de formulário (fundo,
   barra lateral, padding) e dentro da célula virava uma caixa cinza
   atravessada no meio da tabela. */
/* Texto no tom normal + marcador coral, em vez de texto coral: #F26A43 a
   12px sobre fundo claro dá 3,04:1, abaixo do 4,5:1 de AA. Mesma solução do
   .erro, que também mantém o texto legível e joga a cor pra borda. */
.escopo-col .escopo-alerta { color: var(--gm-text); font-weight: 600; }
.escopo-col .escopo-alerta::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gm-magenta); margin-right: .4rem; vertical-align: .1em;
}
.escopo-col .aux { margin-top: .2rem; }

/* ============================================================
   Contatos (PLACEHOLDER) — vitrine/_contatos.html

   Esqueleto da lista de contatos que ainda não existe: linhas vazias no
   lugar de nome/cargo/canal. Cor via color-mix sobre --gm-text pra
   acompanhar os dois temas sem um override por tema (no escuro,
   --gm-surface-2 e --gm-surface são o mesmo #202020, e a barra sumiria
   dentro do card).
   ============================================================ */
.contatos-esqueleto { list-style: none; margin: 0; padding: 0; }
.contatos-esqueleto li {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem .1rem; border-bottom: 1px solid var(--gm-line);
}
.contatos-esqueleto li:last-child { border-bottom: 0; }
.contatos-esqueleto .avatar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--gm-text) 12%, transparent);
}
.contatos-esqueleto .linhas { flex-grow: 1; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.contatos-esqueleto .barra {
  display: block; height: .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--gm-text) 12%, transparent);
}

/* O .label (eyebrow) vive dentro do hero escuro na vitrine; no cabeçalho do
   modal o fundo é claro, então volta ao tom de texto suave. */
.modal-header .label { color: var(--gm-text-soft); }

/* ============================================================
   Console do editor — ficha de IP

   .btn-outline-primary não tinha definição nenhuma aqui, então caía no azul
   padrão do Bootstrap (#0d6efd) e destoava de tudo — é o "azul feio" dos
   botões de logo e de desativar. Agora usa o petróleo da casa, que os tokens
   já descrevem como "CTA outline". No tema escuro o petróleo (#052C36) some
   contra o fundo #141414, mesma armadilha já anotada em --gm-indigo, então lá
   o botão vira contorno neutro.
   ============================================================ */
.btn-outline-primary {
  --bs-btn-color: var(--gm-indigo);
  --bs-btn-border-color: var(--gm-indigo);
  --bs-btn-hover-bg: var(--gm-indigo);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--gm-indigo);
  --bs-btn-active-bg: var(--gm-indigo-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--gm-indigo-deep);
}
[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--gm-text);
  --bs-btn-border-color: var(--gm-line);
  --bs-btn-hover-bg: var(--gm-text);
  --bs-btn-hover-color: var(--gm-paper);
  --bs-btn-hover-border-color: var(--gm-text);
  --bs-btn-active-bg: var(--gm-text);
  --bs-btn-active-color: var(--gm-paper);
  --bs-btn-active-border-color: var(--gm-text);
}

/* Aviso de coisa escolhida mas ainda não gravada (hoje: o logo novo, que fica
   esperando o "Salvar ficha"). Marcador coral em vez de texto coral — #F26A43
   a 12px sobre fundo claro dá 3,04:1, abaixo do 4,5:1 de AA. Mesma solução
   já usada em .escopo-alerta. */
.aviso-pendente {
  font-size: var(--gm-fs-xs); color: var(--gm-text); font-weight: 600; margin: 0;
}
.aviso-pendente::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gm-magenta); margin-right: .4rem; vertical-align: .1em;
}


/* Área de recorte dentro do modal de logo. A altura precisa de teto: sem ele
   uma imagem alta empurra os botões do rodapé pra fora da tela, e o Cropper
   monta em cima da altura renderizada do <img>. */
.area-recorte { max-height: 46vh; overflow: hidden; }
.area-recorte img { max-width: 100%; display: block; }

/* Modal fora do centro (achado em 2026-09-01, no modal de logo da ficha).

   O Bootstrap compensa a barra de rolagem somando `padding-right` INLINE no
   .modal, partindo do princípio de que a barra some quando ele põe
   `overflow: hidden` no <body>. Aqui ela não some: a rede de segurança de
   overflow lá em cima declara `overflow-x: hidden` no <html>, e com isso é o
   <html> que vira o contêiner de rolagem — o overflow do <body> deixa de mandar
   na barra da viewport. Sobra barra E padding somado, e o diálogo fica meia
   barra (15px) à esquerda do centro.

   Zerar o padding é o corte certo AQUI porque a compensação nunca acerta neste
   projeto: a barra do <html> não sai. Precisa de !important por ser estilo
   inline do JS do Bootstrap. A correção de fundo — tirar o overflow-x do <html>
   e deixá-lo só no <body> — mexe numa proteção que vale pra todas as telas e
   pede uma rodada própria. */
.modal { padding-right: 0 !important; }

/* Zona de arraste do upload de imagem (modal de logo da ficha).

   Substituiu o botão "Escolher imagem…": a ação aqui é "trazer a imagem", e um
   retângulo grande aceita clique E arraste, enquanto um botão só aceita clique
   e ainda é um alvo pequeno. O tracejado é o que sinaliza "área que recebe",
   convenção já lida em qualquer upload.

   Os filhos ficam com pointer-events:none porque dragleave dispara ao passar
   por cima de elemento interno — sem isso o realce pisca enquanto se arrasta
   por dentro da própria zona. */
.zona-arraste {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; text-align: center; width: 100%;
  min-height: 190px; padding: 1.5rem 1.25rem; margin: 0;
  border: 2px dashed var(--gm-line); border-radius: var(--gm-radius);
  background: var(--gm-surface-2); color: var(--gm-text-soft); cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.zona-arraste > * { pointer-events: none; }
.zona-arraste .chamada { font-size: var(--gm-fs-sm); font-weight: 600; }
.zona-arraste .detalhe { font-size: var(--gm-fs-xs); color: var(--gm-mute); }
.zona-arraste svg { color: var(--gm-mute); }

.zona-arraste:hover,
.zona-arraste-input:focus-visible + .zona-arraste {
  border-color: var(--gm-magenta); color: var(--gm-text);
}
.zona-arraste:hover svg,
.zona-arraste-input:focus-visible + .zona-arraste svg { color: var(--gm-magenta); }

/* Arrastando por cima: o realce precisa ser inequívoco — é o momento em que a
   pessoa solta o botão do mouse confiando que vai cair no lugar certo. */
.zona-arraste.arrastando {
  border-color: var(--gm-magenta); color: var(--gm-text);
  background: color-mix(in srgb, var(--gm-magenta) 10%, var(--gm-surface-2));
}
.zona-arraste.arrastando svg { color: var(--gm-magenta); }

/* Formato recusado: cor na BORDA, texto no tom normal — coral a 12px sobre
   fundo claro dá 3,04:1, abaixo do 4,5:1 de AA (mesma solução de .erro). */
.zona-arraste.recusado { border-color: var(--gm-magenta); border-style: solid; }
.zona-arraste.recusado .detalhe { color: var(--gm-text); font-weight: 600; }

/* .aux é estilo de TEXTO — tamanho e cor, nada mais. Num <button> isso não
   basta: sem resetar a aparência nativa sobra a caixa cinza do navegador, com
   a borda e a fonte dele. Era o caso de "Escolher outra imagem" nas telas de
   upload (console/ip_logo, clientes/logo, clientes/proposta_nova). Aqui o
   botão passa a se comportar como o link que ele sempre quis ser.

   No modal de logo da ficha esse mesmo botão virou .btn-outline-secondary de
   propósito: lá ele divide espaço com "Cancelar" e "Usar esta imagem", e um
   link solto no meio de dois botões lê como outra categoria de coisa. */
button.aux {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0;
  font-family: inherit; font-weight: 600; color: var(--gm-indigo);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
[data-theme="dark"] button.aux { color: var(--gm-text); }
button.aux:hover { text-decoration-thickness: 2px; }
button.aux:focus-visible { outline: 2px solid var(--gm-magenta); outline-offset: 2px; }

/* Lápis de editar no canto do logo (ficha de IP no console).

   Substitui o botão "Alterar logo" que ficava embaixo do tile. A ação é sobre
   a imagem, então o controle mora nela — mesmo gesto de trocar foto de perfil.

   Fica meio fora do tile de propósito: dentro, ele disputa com o conteúdo da
   imagem (logo claro some atrás do círculo); fora, o contorno + a sombra o
   separam tanto do tile quanto do fundo da página. Os 6px que ele avança pra
   baixo entram como margem no contêiner, senão o aviso de pendência encosta. */
.logo-editavel { position: relative; width: 120px; margin-bottom: .75rem; }
/* O lápis do logo e o "+" de cadastrar são a MESMA peça — botão redondo de
   ícone —, então dividem o visual. O lápis acrescenta só o posicionamento. */
.botao-icone, .botao-lapis {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--gm-line); border-radius: 50%;
  background: var(--gm-paper); color: var(--gm-text-soft); text-decoration: none;
  box-shadow: var(--gm-shadow-sm); cursor: pointer;
  transition: color .15s, background-color .15s, border-color .15s;
}
.botao-lapis { position: absolute; right: -6px; bottom: -6px; }
.botao-icone:hover, .botao-lapis:hover {
  color: #fff; background: var(--gm-magenta); border-color: var(--gm-magenta);
}
.botao-icone:focus-visible, .botao-lapis:focus-visible {
  outline: 2px solid var(--gm-magenta); outline-offset: 2px;
}

/* ============================================================
   Campo do formulário da ficha (console) — dica sob demanda

   Medição que motivou: dos 862px da coluna do formulário, 144px (17%) eram
   prosa de ajuda e 98px (11%) eram títulos de seção. Mais de um quarto da
   coluna era moldura, não campo.

   A ajuda não foi apagada — ela carrega conhecimento de domínio que não está
   em nenhum outro lugar. Passou a aparecer só com o campo focado, que é o
   instante em que serve. Quem revela é :focus-within, sem uma linha de JS.
   ============================================================ */
.grupo-campos { margin-top: 2rem; }
.grupo-campos:first-of-type { margin-top: 0; }

/* Título de seção do formulário. NÃO é o .secao (Roboto Slab 800, --gm-fs-xl)
   que titula os painéis da direita: aqui são três títulos pra sete campos, e
   nesse peso eles competiam com o nome da ficha. O .secao fica intocado. */
.secao-campos {
  font-family: var(--gm-font-body); font-size: var(--gm-fs-xs); font-weight: 700;
  letter-spacing: var(--gm-tracking); text-transform: uppercase;
  color: var(--gm-text-soft); margin: 0 0 .75rem;
}

.campo-ficha { margin-bottom: 1.1rem; }
.campo-ficha:last-child { margin-bottom: 0; }

/* Dica entre rótulo e campo (padrão GOV.UK/USWDS). Não precisa de `order`:
   ela já está nessa posição no HTML. */
.campo-ficha > .dica {
  font-size: var(--gm-fs-xs); color: var(--gm-text-soft);
  margin: 0 0 .35rem; line-height: 1.4;
}

/* Campos lado a lado: a dica reserva duas linhas mesmo quando ocupa uma. Numa
   coluna de ~230px a de "Categoria" quebra e as outras duas não, e sem isso os
   três selects da fileira ficam em alturas diferentes (medido: 17px de
   defasagem). O em é relativo à própria .dica, então acompanha a fonte. */
.linha-campos .campo-ficha > .dica { min-height: 2.8em; }

/* "?" de ajuda ao lado do rótulo. Glifo de 16px, praticamente invisível até
   se procurar por ele; o balão do Bootstrap se posiciona sozinho onde couber,
   então nada o cobre e nada se mexe. */
.rotulo-com-ajuda { display: inline-flex; align-items: center; gap: .4rem; }
.ajuda-campo {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--gm-line); border-radius: 50%; background: transparent;
  font-family: var(--gm-font-body); font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--gm-mute); cursor: help;
}
/* [aria-describedby] é o que o Bootstrap põe no gatilho enquanto o balão está
   aberto — serve de seletor de estado sem precisar de classe própria. */
.ajuda-campo:hover, .ajuda-campo[aria-describedby] { border-color: var(--gm-magenta); color: var(--gm-magenta); }
.ajuda-campo:focus-visible { outline: 2px solid var(--gm-magenta); outline-offset: 2px; }

.popover {
  --bs-popover-bg: var(--gm-surface); --bs-popover-border-color: var(--gm-line);
  --bs-popover-body-color: var(--gm-text); --bs-popover-body-font-size: var(--gm-fs-xs);
  --bs-popover-max-width: 320px; --bs-popover-border-radius: var(--gm-radius-sm);
  font-family: var(--gm-font-body); box-shadow: var(--gm-shadow-sm);
}

/* Interruptor de estado da ficha — MESMO controle no console e na área do
   Cliente (templates/_bloco_estado.html). `ativo` é campo da ficha como
   qualquer outro: vale ao salvar lá, vai junto na proposta cá. Discreto, porque
   mora na lateral abaixo de Completude e é ajuste raro, não a ação da página. */
.interruptor-estado { display: flex; align-items: center; gap: .55rem; padding-left: 0; }
.interruptor-estado .form-check-input {
  margin: 0; flex-shrink: 0; width: 2.1rem; height: 1.1rem; cursor: pointer;
  background-color: var(--gm-surface-2); border-color: var(--gm-line);
}
.interruptor-estado .form-check-input:checked {
  background-color: var(--gm-magenta); border-color: var(--gm-magenta);
}
.interruptor-estado .form-check-input:focus {
  border-color: var(--gm-magenta);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--gm-magenta) 25%, transparent);
}
.interruptor-estado .form-check-label {
  font-size: var(--gm-fs-sm); color: var(--gm-text); cursor: pointer;
}

/* O modal de justificativa tem UM campo só; sem isto o textarea encosta na
   dica logo acima dele. */
#modal-justificativa .dica { margin-bottom: .5rem; }

/* Cabeçalho de seção com ação à direita (listagem de grupos e licenciadoras).
   O botão fica na linha do título, e não solto acima da grade, porque a ação
   pertence àquela lista — são duas na mesma tela, e um botão sem âncora não
   diria qual das duas ele cadastra. */
/* `center`, não `baseline`: o alvo é um botão redondo, e alinhar pela linha de
   base do texto o deixaria pendurado alto. */
.cabecalho-secao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

/* Fila de aprovação: colunas de largura declarada, uma linha por proposta.

   O motivo é texto livre de até 500 caracteres. Com o repartimento automático
   ele engolia a tabela e sobravam 119px pro nome da ficha, que quebrava em
   duas linhas — cada proposta com uma altura, que era exatamente a assimetria
   que a tabela veio resolver. `fixed` devolve o controle e faz o truncamento
   ser confiável; o texto inteiro fica no title e no detalhe, que é onde a
   decisão acontece. */
.tabela-propostas { table-layout: fixed; }
.coluna-pedido { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

/* Marcador de estado em coluna de tabela: ponto colorido + texto, sem caixa.

   Duas tentativas anteriores erraram o alvo. Com pílula, "Ficha nova" (100px)
   e "Alteração" (94px) empilhadas deixam a borda direita irregular; igualar a
   largura com min-width resolve a borda e cria espaço vazio DENTRO do chip
   curto, que é pior — e ficaria pior ainda com um rótulo de 15 caracteres.

   Sem caixa não há borda que possa ficar irregular: o ponto e o texto alinham
   à esquerda, e o comprimento do rótulo deixa de importar. A cor do ponto
   continua carregando o estado, que era a única função útil da pílula aqui.

   O chip `.estado` continua existindo pra quando o estado é a informação
   principal da linha (ex.: "Minhas propostas" do Cliente). */
.marcador {
  display: inline-flex; align-items: center; gap: .45em; white-space: nowrap;
  font-size: var(--gm-fs-xs); font-weight: 700; color: var(--gm-text);
  /* Largura mínima pra que o que vem DEPOIS ("+ grupo novo") comece sempre no
     mesmo ponto. É justamente o que a pílula não podia fazer: ali o min-width
     virava espaço vazio visível dentro da borda; aqui, sem caixa, ele é só ar.
     Rótulo maior que isso simplesmente empurra — não quebra nem corta. */
  min-width: 5.5rem;
}
.marcador::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%;
  background: var(--gm-magenta); flex-shrink: 0;
}
.marcador-extra {
  font-size: var(--gm-fs-xs); color: var(--gm-text-soft); white-space: nowrap;
}

/* Aprovar e recusar lado a lado. Eram dois formulários empilhados com um
   textarea entre eles, o que dava à recusa mais peso visual que à aprovação —
   e as duas são a mesma decisão, vista dos dois lados. */
.decisao-acoes { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* Bloco que só aparece depois de uma escolha (hoje: propor uma casa nova, na
   área do Cliente). A barra à esquerda e o recuo dizem que ele PERTENCE ao
   campo de cima — solto, ele voltaria a parecer mais uma pergunta da tela. */
.bloco-condicional {
  margin: -.4rem 0 1.1rem 0; padding: .9rem 0 .1rem 1rem;
  border-left: 2px solid var(--gm-magenta);
}
.bloco-condicional .campo-ficha { margin-bottom: 0; }

/* Nome da proposta como gatilho do modal (Minhas propostas, área do Cliente).
   É botão porque abre um diálogo, não navega — mas parece o link da coluna
   equivalente na fila do Editor, que é a mesma coluna vista do outro lado. */
.botao-linha {
  appearance: none; -webkit-appearance: none;
  display: block; max-width: 100%;
  background: none; border: 0; padding: 0; text-align: left;
  font-family: inherit; font-size: inherit; font-weight: 700;
  color: var(--gm-text); cursor: pointer;
}
.botao-linha:hover { color: var(--gm-magenta); }
.botao-linha:focus-visible { outline: 2px solid var(--gm-magenta); outline-offset: 2px; }

/* A <tr> que só carrega o modal não desenha nada: dentro de uma <table> o HTML
   só admite <tr>, então o diálogo mora numa célula sem borda nem altura. */
.linha-modal, .linha-modal > td { border: 0 !important; padding: 0 !important; }

/* Variações do marcador de estado — o ponto carrega a cor, o texto não. */
.marcador--ok::before { background: var(--gm-green); }
.marcador--nao::before { background: var(--gm-orange-2); }

/* ============================================================
   Cases de sucesso — carrossel de fotos por colaboração
   ============================================================ */

/* Fotos já salvas na tela de edição do case. Grade pequena: aqui a foto é
   inventário, não vitrine — quem olha está conferindo o que já subiu. */
.lista-fotos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.lista-fotos li { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.lista-fotos .form-check-label {
  font-size: var(--gm-fs-xs); color: var(--gm-text-soft);
  display: flex; align-items: center; gap: .3rem; cursor: pointer;
}
.lista-fotos .form-check-input { margin: 0; }

/* ── Fotos do case ──────────────────────────────────────────────────────────
   A mesma marcação serve a dois caminhos. Sem JS valem o rádio "Capa" e a caixa
   "Retirar" nativos. Com JS, o script põe a classe .com-js e só ENTÃO eles são
   escondidos — nada aqui esconde controle antes de existir substituto. */
.foto-case { position: relative; }
.foto-case .gm-card-logo-fill { position: relative; }

.lista-fotos.com-js .rotulo-capa,
.lista-fotos.com-js .rotulo-retirar { display: none; }

.lista-fotos.com-js .foto-case .gm-card-logo-fill {
  cursor: pointer;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color .12s ease;
}
.lista-fotos.com-js .foto-case:hover .gm-card-logo-fill { outline-color: var(--gm-line); }
.lista-fotos.com-js .foto-case.e-capa .gm-card-logo-fill { outline-color: var(--gm-magenta); }

/* Selo só no caminho com JS: sem ele quem anuncia a capa é o rádio marcado, e
   dois indicadores dizendo a mesma coisa confundem em vez de reforçar. */
.selo-capa { display: none; }
.lista-fotos.com-js .foto-case.e-capa .selo-capa {
  display: block; position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: .1rem 0; text-align: center;
  background: var(--gm-magenta); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* Sempre visível, nunca só no hover: em toque não existe hover, e um controle
   que só aparece com mouse é um controle que metade das pessoas não tem. */
.tirar-foto {
  position: absolute; top: 2px; right: 2px; z-index: 3;
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--gm-ink) 72%, transparent);
  color: #fff; cursor: pointer;
}
.tirar-foto:hover { background: var(--gm-ink); }

/* Retirada: a foto some na hora, mas a VAGA fica. A gravação continua sendo no
   salvar, então quem errou o clique precisa de saída — e uma vaga que some
   levaria junto a chance de desfazer. */
.foto-case.retirada .gm-card-logo-fill { display: none; }
.desfazer-foto { display: none; }
.foto-case.retirada .desfazer-foto {
  display: flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none;
  width: 72px; height: 72px; padding: 0;
  border: 1px dashed var(--gm-line); border-radius: 12px;
  background: none; color: var(--gm-text-soft);
  font-size: var(--gm-fs-xs); cursor: pointer;
}
.foto-case.retirada .desfazer-foto:hover { color: var(--gm-text); border-color: var(--gm-text-soft); }

/* Célula do "+", sempre a última da grade. Ser uma célula igual às outras é o
   ponto: um tile solto embaixo da lista dava a impressão de que a foto nova
   entrava em outro lugar. */
.tile-add {
  appearance: none; -webkit-appearance: none;
  width: 72px; height: 72px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--gm-line); border-radius: 12px;
  background: none; color: var(--gm-text-soft); cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.tile-add:hover { border-color: var(--gm-magenta); color: var(--gm-magenta); }

/* Foto escolhida e ainda não salva: entra na fila com a marca de "Nova" pra
   não se confundir com o que já está no ar. */
.foto-case.pendente .gm-card-logo-fill { outline: 2px dashed var(--gm-magenta); outline-offset: 2px; }
.selo-nova {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: .1rem 0; text-align: center;
  background: var(--gm-magenta); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.galeria-case { position: relative; }
.galeria-case .gm-moldura { max-width: none; }

/* Contador "1/3" — vem da referência (redibra.com.br). Sem ele não se sabe se
   há mais foto adiante, e a seta vira convite no escuro. */
.contador-galeria {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 2;
  padding: .1rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--gm-ink) 70%, transparent);
  color: #fff; font-size: var(--gm-fs-xs); font-weight: 700;
}

/* Setas do Bootstrap sobre foto clara somem. Um disco escuro por baixo resolve
   sem depender da imagem. */
.galeria-case .carousel-control-prev, .galeria-case .carousel-control-next { width: 15%; opacity: 1; }
.galeria-case .carousel-control-prev-icon, .galeria-case .carousel-control-next-icon {
  width: 2rem; height: 2rem; padding: .5rem; border-radius: 50%;
  background-color: color-mix(in srgb, var(--gm-ink) 60%, transparent);
  background-size: 1rem;
}

/* Case na vitrine: foto de um lado, texto do outro, alternando a cada um.

   É o ritmo da referência (redibra.com.br). Dois cases seguidos com a foto do
   mesmo lado viram uma coluna de imagens com legenda; alternando, cada case lê
   como um bloco próprio.

   No celular a alternância some: em uma coluna só, a foto vem sempre primeiro —
   inverter ali deixaria o texto órfão acima da imagem que ele descreve. */
.lista-cases { display: flex; flex-direction: column; gap: 3rem; margin-top: 1.5rem; }
.case-linha { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; }
.case-texto { display: flex; flex-direction: column; gap: .6rem; }
.titulo-case {
  font-family: var(--gm-font-disp); font-weight: 800; font-size: var(--gm-fs-xl);
  color: var(--gm-text); margin: 0;
}

@media (min-width: 768px) {
  .case-linha { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  /* `order` e não troca de markup: a ordem de LEITURA (foto, depois texto)
     continua a mesma pra leitor de tela, só a posição na tela inverte. */
  .case-linha--invertida .case-foto { order: 2; }
}

/* E-mails pontuais: interface aprovada a partir do mock do console. */




#gm-emails{--ep-paper:light-dark(#fff,#141414);--ep-surface:light-dark(#fff,#202020);--ep-soft:light-dark(#f5f5f4,#272727);--ep-line:light-dark(#dce0e0,#3a3a3a);--ep-text:light-dark(#222,#f2f2f2);--ep-muted:light-dark(#626262,#b8b8b8);--ep-brand:light-dark(#052c36,#d7e8ec);--ep-coral:#f26a43;--ep-coral-text:light-dark(#a43c20,#ffac93);--ep-wash:light-dark(#fff3ee,#38241e);--ep-green:light-dark(#00796e,#8ad6cb);--ep-danger:light-dark(#b13b2a,#ffb6a7);font-family:Poppins,Poppins,Arial,sans-serif;font-size:14px;line-height:1.6;color:var(--ep-text);background:var(--ep-paper);width:100%;isolation:isolate}
#gm-emails *{box-sizing:border-box}
#gm-emails [hidden]{display:none!important}
#gm-emails h1,#gm-emails h2,#gm-emails h3,#gm-emails p{margin:0}
#gm-emails button,#gm-emails input,#gm-emails select,#gm-emails textarea{font:inherit;color:inherit}
#gm-emails button,#gm-emails select,#gm-emails input[type=checkbox]{touch-action:manipulation}
#gm-emails button:disabled{opacity:.45;cursor:not-allowed}
#gm-emails button:focus-visible,#gm-emails input:focus-visible,#gm-emails select:focus-visible,#gm-emails textarea:focus-visible{outline:2px solid var(--ep-coral);outline-offset:3px}
#gm-emails button{cursor:var(--cursor-interaction,pointer)}
#gm-emails .ep-body{max-width:1100px;margin:auto;padding:28px 32px 36px}
#gm-emails .ep-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;color:var(--ep-muted);font-size:12px;margin-bottom:22px}
#gm-emails .ep-link{border:0;padding:0;background:transparent;color:var(--ep-brand);text-decoration:underline;text-underline-offset:3px}
#gm-emails .ep-crumb .ep-link{text-decoration:none}
#gm-emails .ep-label{font-size:11px;letter-spacing:.65px;text-transform:uppercase;font-weight:600;color:var(--ep-muted)}
#gm-emails .ep-heading{font-family:'Roboto Slab',Georgia,serif;font-size:31px;line-height:1.25;font-weight:800;letter-spacing:-.65px}
#gm-emails .ep-subheading{color:var(--ep-muted);font-size:13px;margin-top:7px;max-width:660px}
#gm-emails .ep-pagehead{display:flex;gap:18px;align-items:start;justify-content:space-between;margin-bottom:23px}
#gm-emails .ep-previewlabel{font-size:11px;white-space:nowrap;color:var(--ep-muted);padding-top:7px}
#gm-emails .ep-sectiontitle{font-family:'Roboto Slab',Georgia,serif;font-size:20px;line-height:1.4;font-weight:700}
#gm-emails .ep-muted{color:var(--ep-muted)}
#gm-emails .ep-small{font-size:12px}
#gm-emails .ep-button{border:1px solid var(--ep-line);border-radius:999px;padding:10px 17px;background:var(--ep-paper);font-weight:600;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.4;white-space:normal}
#gm-emails .ep-button:hover:not(:disabled){border-color:var(--ep-coral);color:var(--ep-coral-text)}
#gm-emails .ep-primary{background:linear-gradient(100deg,#f26a43,#eb5d2d);border-color:transparent;color:#fff}
#gm-emails .ep-primary:hover:not(:disabled){color:#fff;background:#d8532e}
#gm-emails .ep-quiet{border-color:transparent;background:transparent;color:var(--ep-muted);padding-left:7px;padding-right:7px}
#gm-emails .ep-steps{display:flex;align-items:center;gap:0;max-width:650px;margin:0 0 26px;padding:0;list-style:none}
#gm-emails .ep-steps li{display:flex;flex:1;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--ep-muted)}
#gm-emails .ep-steps li:not(:last-child):after{content:'';height:1px;flex:1;background:var(--ep-line);margin:0 14px 0 3px}
#gm-emails .ep-stepnum{width:26px;height:26px;flex-shrink:0;border:1px solid var(--ep-line);display:grid;place-items:center;border-radius:50%;font-size:11px}
#gm-emails .ep-steps li[aria-current=step]{color:var(--ep-text)}
#gm-emails .ep-steps li[aria-current=step] .ep-stepnum{color:#fff;border-color:var(--ep-coral);background:var(--ep-coral)}
#gm-emails .ep-steps li.ep-done .ep-stepnum{background:var(--ep-soft);color:var(--ep-green)}
#gm-emails .ep-panel{background:var(--ep-surface);border:1px solid var(--ep-line);border-radius:20px;padding:21px 23px}
#gm-emails .ep-panelhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:17px}
#gm-emails .ep-filtermode{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;margin-bottom:16px}
#gm-emails .ep-field,#gm-emails .ep-select{border:1px solid var(--ep-line);background:var(--ep-paper);border-radius:10px;padding:9px 11px;min-height:40px;min-width:0;max-width:100%;width:100%;outline-offset:2px}
#gm-emails .ep-select{padding-right:26px}
#gm-emails .ep-filtermode .ep-select{width:auto;max-width:235px;font-weight:600;font-size:12px;padding-top:7px;padding-bottom:7px;min-height:36px}
#gm-emails .ep-filterrows{display:grid;gap:10px}
#gm-emails .ep-filterrow{display:grid;grid-template-columns:minmax(160px,1.05fr) minmax(160px,1.15fr) minmax(82px,.8fr) 34px;gap:9px;align-items:center}
#gm-emails .ep-filterrow .ep-select,#gm-emails .ep-filterrow .ep-field{font-size:12px}
#gm-emails .ep-inlinefield{display:flex;gap:9px;align-items:center;min-width:0;font-size:12px}
#gm-emails .ep-inlinefield input{width:76px}
#gm-emails .ep-remove{border:0;background:transparent;border-radius:50%;height:34px;min-width:34px;font-size:23px;font-weight:400;color:var(--ep-muted);line-height:1}
#gm-emails .ep-remove:hover{background:var(--ep-soft);color:var(--ep-danger)}
#gm-emails .ep-filterfoot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:17px}
#gm-emails .ep-shortcuts{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px;font-size:11px;align-items:center}
#gm-emails .ep-shortcut{background:var(--ep-paper);border:1px solid var(--ep-line);border-radius:999px;font-size:11px;padding:6px 11px;color:var(--ep-muted)}
#gm-emails .ep-shortcut:hover{border-color:var(--ep-coral);color:var(--ep-coral-text)}
#gm-emails .ep-help{font-size:11px;color:var(--ep-muted);margin-top:12px;line-height:1.6}
#gm-emails .ep-resultshead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;margin-bottom:12px}
#gm-emails .ep-resultshead strong{font-size:20px;font-family:'Roboto Slab',Georgia,serif}
#gm-emails .ep-resultstats{display:flex;gap:14px;flex-wrap:wrap;color:var(--ep-muted);font-size:12px;align-items:baseline}
#gm-emails .ep-tablewrap{overflow-x:auto}
#gm-emails .ep-table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.5}
#gm-emails .ep-table th{text-align:left;font-weight:600;color:var(--ep-muted);font-size:11px;padding:10px 9px;border-bottom:1px solid var(--ep-line);white-space:nowrap}
#gm-emails .ep-table td{padding:13px 9px;border-bottom:1px solid var(--ep-line);vertical-align:middle}
#gm-emails .ep-table td:first-child,#gm-emails .ep-table th:first-child{padding-left:1px;width:28px}
#gm-emails input[type=checkbox]{accent-color:var(--ep-coral);width:15px;height:15px;vertical-align:middle}
#gm-emails .ep-person{font-weight:600;font-size:13px}
#gm-emails .ep-email{color:var(--ep-muted);font-size:11px;overflow-wrap:anywhere}
#gm-emails .ep-reason{font-size:11px;color:var(--ep-muted);max-width:225px}
#gm-emails .ep-skipped{opacity:.45}
#gm-emails .ep-empty{padding:33px 12px!important;color:var(--ep-muted);text-align:center}
#gm-emails .ep-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--ep-line);padding-top:20px;margin-top:24px}
#gm-emails .ep-footer .ep-buttons{display:flex;gap:10px;flex-wrap:wrap}
#gm-emails .ep-footnote{font-size:11px;color:var(--ep-muted)}
#gm-emails .ep-composegrid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:24px;align-items:start}
#gm-emails .ep-formgroup{display:grid;gap:6px;margin-bottom:17px}
#gm-emails .ep-formlabel{font-size:12px;font-weight:600}
#gm-emails .ep-readonly{background:var(--ep-soft);color:var(--ep-muted);overflow-wrap:anywhere;font-size:12px}
#gm-emails .ep-composebody{min-height:236px;resize:vertical;font-size:13px;line-height:1.8}
#gm-emails .ep-tokens{display:flex;gap:7px;flex-wrap:wrap;margin-top:1px}
#gm-emails .ep-token{padding:5px 9px;border:1px solid var(--ep-line);border-radius:6px;background:var(--ep-paper);font-size:11px;color:var(--ep-brand)}
#gm-emails .ep-previewwrap{border:1px solid var(--ep-line);border-radius:16px;overflow:hidden;background:var(--ep-soft)}
#gm-emails .ep-emailmeta{padding:16px 18px;font-size:11px;color:var(--ep-muted);border-bottom:1px solid var(--ep-line);background:var(--ep-surface)}
#gm-emails .ep-emailmeta strong{color:var(--ep-text);font-size:12px;display:block;margin-top:5px}
#gm-emails .ep-emailpaper{margin:18px;padding:25px 23px;background:var(--ep-paper);border-radius:10px}
#gm-emails .ep-emaillogo{font-family:'Roboto Slab',Georgia,serif;font-size:18px;font-weight:700;color:var(--ep-brand);border-bottom:3px solid var(--ep-coral);padding-bottom:17px;margin-bottom:20px}
#gm-emails .ep-emailbody{font-size:12px;line-height:1.9;overflow-wrap:anywhere;white-space:pre-wrap}
#gm-emails .ep-emailcta{display:inline-block;margin-top:20px;border-radius:999px;background:var(--ep-brand);color:var(--ep-paper);padding:11px 16px;font-weight:600;font-size:11px}
#gm-emails .ep-emailfoot{font-size:11px;color:var(--ep-muted);margin-top:25px;border-top:1px solid var(--ep-line);padding-top:14px}
#gm-emails .ep-sample{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:var(--ep-muted);margin-bottom:10px}
#gm-emails .ep-sample select{max-width:160px;font-size:11px;padding:7px 10px;min-height:32px}
#gm-emails .ep-reviewgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:25px;align-items:start}
#gm-emails .ep-reviewlist{display:grid;gap:17px;margin:0}
#gm-emails .ep-reviewlist dt{font-size:11px;color:var(--ep-muted);margin:0 0 3px}
#gm-emails .ep-reviewlist dd{margin:0;font-size:13px;overflow-wrap:anywhere}
#gm-emails .ep-summarycount{font-family:'Roboto Slab',Georgia,serif;font-size:36px;font-weight:700;line-height:1.2;margin-bottom:4px}
#gm-emails .ep-summaryconditions{margin:9px 0 0;padding-left:17px;display:grid;gap:5px;font-size:12px}
#gm-emails .ep-confirm{display:flex;align-items:flex-start;gap:10px;font-size:12px;margin-top:24px;padding-top:19px;border-top:1px solid var(--ep-line)}
#gm-emails .ep-confirm input{flex-shrink:0;margin-top:3px}
#gm-emails .ep-error{color:var(--ep-danger);font-size:12px;margin:12px 0}
#gm-emails .ep-toast{border-left:3px solid var(--ep-green);padding:12px 16px;background:var(--ep-soft);font-size:12px;margin:18px 0}
#gm-emails .ep-newcard{border-color:var(--ep-coral);background:var(--ep-wash)}
#gm-emails .ep-dialog{position:absolute;inset:0;z-index:9;background:light-dark(#ffffffed,#141414ed);display:flex;justify-content:center;align-items:flex-start;padding:90px 24px 30px}
#gm-emails .ep-dialogbox{background:var(--ep-surface);border:1px solid var(--ep-line);border-radius:22px;box-shadow:0 25px 65px #0002;padding:26px;max-width:450px;width:100%;font-size:13px}
#gm-emails .ep-dialogbox .ep-sectiontitle{margin-bottom:12px}
#gm-emails .ep-dialogbox .ep-buttons{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px}
#gm-emails .ep-workspace{position:relative}
@media(min-width:992px){#gm-emails .ep-body{padding:32px 40px 40px}}
@media(max-width:480px){#gm-emails .ep-filterrow{grid-template-columns:minmax(0,1fr) 34px}#gm-emails .ep-filterrow>select:first-child{grid-column:1;grid-row:1}#gm-emails .ep-filterrow>select:nth-child(2){grid-column:1/3;grid-row:2}#gm-emails .ep-filterrow>.ep-value{grid-column:1/3;grid-row:3}#gm-emails .ep-filterrow>.ep-remove{grid-column:2;grid-row:1}#gm-emails .ep-table td{overflow-wrap:anywhere}}
@media(max-width:480px){#gm-emails .ep-steps{gap:4px}#gm-emails .ep-steps li{flex-direction:column;align-items:center;gap:5px;min-width:0}}
@media(pointer:coarse){#gm-emails .ep-button,#gm-emails .ep-remove,#gm-emails .ep-shortcut,#gm-emails .ep-token{min-height:44px}#gm-emails .ep-table td:first-child{min-width:35px}}
#gm-emails .ep-buildertoolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
#gm-emails .ep-buildertoolbar .ep-button{padding:7px 13px}
#gm-emails .ep-parentheses{font-family:Georgia,serif;font-weight:700;color:var(--ep-coral-text);font-size:15px}
#gm-emails .ep-filterrows,#gm-emails .ep-nodes{display:flex;flex-direction:column;gap:0;min-width:0}
#gm-emails .ep-node{min-width:0}
#gm-emails .ep-nodebody{padding:12px 14px;border:1px solid var(--ep-line);border-radius:12px;background:var(--ep-paper);min-width:0}
#gm-emails .ep-nodegroup>.ep-nodebody{border-left:3px solid var(--ep-coral);background:var(--ep-soft)}
#gm-emails .ep-node-selected>.ep-nodebody{border-color:var(--ep-coral);background:var(--ep-wash)}
#gm-emails .ep-nodehead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px;min-height:29px}
#gm-emails .ep-nodecheck{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;min-height:29px}
#gm-emails .ep-nodecheck input{margin:0}
#gm-emails .ep-controls{margin-left:auto;display:flex;align-items:center;gap:3px;flex-wrap:wrap}
#gm-emails .ep-control{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ep-muted);border-radius:7px;min-width:29px;min-height:29px;padding:3px 6px;font-size:15px;line-height:1}
#gm-emails .ep-control:hover:not(:disabled){color:var(--ep-text);background:var(--ep-soft)}
#gm-emails .ep-control[data-ungroup]{font-size:11px;margin-right:4px}
#gm-emails .ep-control[data-drag]{cursor:grab;font-size:20px}
#gm-emails .ep-control[data-delete]{font-size:21px}
#gm-emails .ep-control[data-delete]:hover{color:var(--ep-danger)}
#gm-emails .ep-join{position:relative;display:flex;align-items:center;padding:7px 0 7px 23px}
#gm-emails .ep-join:before{content:'';width:1px;height:100%;background:var(--ep-line);position:absolute;left:13px;top:0}
#gm-emails .ep-join .ep-select{width:74px;min-height:32px;font-size:11px;font-weight:600;padding:5px 9px;background:var(--ep-soft)}
#gm-emails .ep-rulefields{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,.85fr);gap:10px;align-items:start}
#gm-emails .ep-rulefield{min-width:0}
#gm-emails .ep-rulefield>label{display:block;font-size:11px;color:var(--ep-muted);margin-bottom:5px}
#gm-emails .ep-rulefields .ep-select,#gm-emails .ep-rulefields .ep-field{font-size:12px;min-height:39px}
#gm-emails .ep-rulefields .ep-inlinefield{min-height:39px}
#gm-emails .ep-expression{padding:10px 12px;background:var(--ep-soft);border-radius:9px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:18px}
#gm-emails .ep-expression output{font-family:ui-monospace,Consolas,monospace;font-size:13px;overflow-wrap:anywhere;color:var(--ep-text)}
#gm-emails .ep-reading{margin-top:9px;font-size:12px;line-height:1.8;color:var(--ep-text);overflow-wrap:anywhere}
#gm-emails .ep-reading strong{font-weight:600;color:var(--ep-coral-text)}
#gm-emails .ep-builderstatus{font-size:11px;color:var(--ep-muted);margin-top:8px}
#gm-emails .ep-builderstatus:empty{display:none}
#gm-emails .ep-dragging{opacity:.45}
#gm-emails .ep-drop-target>.ep-nodebody{outline:2px dashed var(--ep-coral);outline-offset:3px}
@media(max-width:680px){#gm-emails .ep-rulefields{grid-template-columns:1fr}#gm-emails .ep-nodebody{padding:12px}#gm-emails .ep-control{min-width:32px;min-height:32px}#gm-emails .ep-rulefields .ep-field,#gm-emails .ep-rulefields .ep-select{font-size:16px}#gm-emails .ep-join .ep-select{font-size:12px}#gm-emails .ep-nodegroup>.ep-nodebody{padding:10px}}
@media(pointer:coarse){#gm-emails .ep-control,#gm-emails .ep-nodecheck{min-height:44px}#gm-emails .ep-nodecheck{min-width:44px}}
#gm-emails .ep-tagpalette{border-top:1px solid var(--ep-line);border-bottom:1px solid var(--ep-line);padding:16px 0;margin:4px 0 20px}
#gm-emails .ep-tagpalette-head{display:flex;align-items:baseline;justify-content:space-between;gap:9px;flex-wrap:wrap}
#gm-emails .ep-tagpalette-head h2{font-family:Poppins,Arial,sans-serif;line-height:1.5}
#gm-emails .ep-taggroup{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:start;gap:10px;margin-top:10px}
#gm-emails .ep-taggroup>.ep-label{padding-top:7px}
#gm-emails .ep-tagbuttons{display:flex;gap:6px;flex-wrap:wrap}
#gm-emails .ep-var{padding:6px 10px;border:1px solid var(--ep-line);background:var(--ep-paper);color:var(--ep-brand);border-radius:7px;font-size:11px;line-height:1.5}
#gm-emails .ep-var:hover{border-color:var(--ep-coral);color:var(--ep-coral-text);background:var(--ep-wash)}
#gm-emails .ep-tagfeedback{margin-top:10px;font-size:11px;overflow-wrap:anywhere;color:var(--ep-muted)}
#gm-emails .ep-tagfeedback:empty{display:none}
#gm-emails select:disabled,#gm-emails input:disabled{color:var(--ep-muted);background:var(--ep-soft);opacity:.7}
@media(max-width:480px){#gm-emails .ep-taggroup{grid-template-columns:1fr;gap:4px}#gm-emails .ep-taggroup>.ep-label{padding-top:0}#gm-emails .ep-tagpalette-head{display:block}#gm-emails .ep-tagpalette-head>span{display:block;margin-top:4px}}
@media(pointer:coarse){#gm-emails .ep-var{min-height:44px}}
#gm-emails{color-scheme:light} [data-theme="dark"] #gm-emails{color-scheme:dark}
#gm-emails .ep-preview-frame{width:100%;height:640px;border:0;background:#f4f4f0;border-radius:12px}

/* Acompanhamento: resumo primeiro; atividade e diagnóstico sob demanda. */
.email-historico{table-layout:fixed;min-width:56rem}
.email-historico-quando{width:10rem}
.email-historico-total{width:8rem}
.email-historico-situacao{width:17rem}
.email-historico th{font-size:var(--gm-fs-xs);font-weight:500;color:var(--gm-text-soft);white-space:nowrap}
.email-historico td{padding-top:18px;padding-bottom:18px;font-size:var(--gm-fs-sm)}
.email-historico-assunto{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-historico-data{display:block;white-space:nowrap;font-variant-numeric:tabular-nums}
.email-historico-resumo{margin-top:6px;font-size:var(--gm-fs-xs);color:var(--gm-text-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-cabecalho{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:26px 0}
.email-cabecalho h1{margin:4px 0 10px}
.email-cabecalho>div{min-width:0}
.email-cabecalho p{overflow-wrap:anywhere}
.email-cabecalho>button{flex-shrink:0}
.email-situacao{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;border:1px solid var(--gm-line);border-left:4px solid var(--gm-green);border-radius:14px;background:var(--gm-surface)}
.email-situacao h2{font-family:var(--gm-font-body);font-size:1rem;font-weight:600;margin:0 0 7px}
.email-situacao p{font-size:var(--gm-fs-sm);color:var(--gm-text-soft);max-width:730px}
.email-situacao[data-tone=danger]{border-left-color:#bd4b39}
.email-situacao[data-tone=warning]{border-left-color:#b7802c}
.email-situacao[data-tone=info]{border-left-color:var(--gm-magenta)}
.email-situacao button{flex-shrink:0}
.email-metricas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0 8px}
.email-metricas>div{padding:20px 22px;background:var(--gm-surface);border:1px solid var(--gm-line);border-radius:14px}
.email-metricas span{display:block;font-size:var(--gm-fs-xs);color:var(--gm-text-soft)}
.email-metricas strong{display:block;font-size:2rem;line-height:1.4;font-weight:600;margin-top:5px}
.email-atualizacao{min-height:20px;text-align:right;margin-bottom:24px}
.email-abas{display:flex;gap:26px;border-bottom:1px solid var(--gm-line);margin-bottom:20px}
.email-abas button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 0;color:var(--gm-text-soft);font-weight:500;font-size:var(--gm-fs-sm)}
.email-abas button[aria-selected=true]{border-bottom-color:var(--gm-magenta);color:var(--gm-text);font-weight:600}
.email-filtros-resultados{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px}
.email-filtros-resultados>div:first-child{width:min(350px,100%)}
.email-filtros-resultados>div:last-child{width:255px}
.email-filtros-resultados input,.email-filtros-resultados select{font-size:var(--gm-fs-sm)}
.email-resultados th{font-size:var(--gm-fs-xs);color:var(--gm-text-soft);font-weight:500}
.email-resultados td{padding-top:17px;padding-bottom:17px;font-size:var(--gm-fs-sm)}
.email-resultados td strong{font-weight:500}
.email-endereco{display:block;font-size:var(--gm-fs-xs);color:var(--gm-text-soft);margin-top:3px;overflow-wrap:anywhere}
.email-estado{display:inline-block;font-size:var(--gm-fs-xs);border-radius:99px;padding:4px 10px;white-space:nowrap;background:var(--gm-surface-2);color:var(--gm-text-soft)}
.email-estado--positive,.email-sinal{background:rgba(0,141,127,.1);color:#00796d}
.email-estado--negative{background:rgba(189,75,57,.1);color:#a53d2d}
.email-sinal{display:inline-block;font-size:var(--gm-fs-xs);border-radius:99px;padding:4px 9px;margin:2px 5px 2px 0}
[data-theme=dark] .email-estado--positive,[data-theme=dark] .email-sinal{color:#8ad6cb}
[data-theme=dark] .email-estado--negative{color:#ffb6a7}
.email-ver-atividade{border:0;background:none;color:var(--gm-text-soft);font-size:var(--gm-fs-xs);padding:6px 0;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.email-linha-atividade>td{background:var(--gm-surface-2);padding:18px 22px}
.email-atividade{list-style:none;margin:0;padding:0;max-width:850px}
.email-atividade li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:var(--gm-fs-sm)}
.email-atividade li>span{min-width:0;overflow-wrap:anywhere}
.email-atividade time{flex-shrink:0;font-size:var(--gm-fs-xs);color:var(--gm-text-soft)}
.email-mensagem-topo{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}
.email-mensagem-topo select{font-size:var(--gm-fs-sm);min-width:240px;max-width:100%}
.email-previa-meta{font-size:var(--gm-fs-xs);color:var(--gm-text-soft);overflow-wrap:anywhere;max-width:720px;margin:20px auto 10px}
.email-previa-conteudo{max-width:720px;margin:auto}
.email-previa-conteudo iframe{width:100%;height:720px;border:1px solid var(--gm-line);border-radius:14px;background:#f4f4f0}
.email-detalhes{font-size:var(--gm-fs-xs);color:var(--gm-text-soft)}
.email-detalhes summary{cursor:pointer;padding:10px 0}
.email-detalhes>div{padding:14px 0;border-top:1px solid var(--gm-line)}
.email-detalhes pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.email-diagnostico-item{padding:10px 0}
.email-acompanhamento [hidden]{display:none!important}
@media(max-width:650px){.email-cabecalho{align-items:start;flex-direction:column;gap:12px}.email-situacao{flex-direction:column;align-items:start;gap:16px;padding:18px}.email-metricas{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.email-metricas>div{padding:16px}.email-metricas strong{font-size:1.7rem}.email-filtros-resultados,.email-mensagem-topo{flex-direction:column;align-items:stretch}.email-filtros-resultados>div:first-child,.email-filtros-resultados>div:last-child{width:100%}.email-atividade li{flex-direction:column;gap:3px}.email-resultados{min-width:580px}.email-atualizacao{text-align:left}}