/* 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 (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 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á, " 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); border: 0; background-image: var(--gm-grad); } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-image: var(--gm-grad); filter: brightness(1.04); } .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; } /* 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--parceiros { background: var(--gm-surface-2); color: var(--gm-text); } .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; } .filtros button { 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"] { 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

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