/* ========================================================================== Sistema-EDT — Tokens de design + shell da aplicação -------------------------------------------------------------------------- Fonte única de verdade de cor, espaçamento, raio e sombra. Carregado por ÚLTIMO em base.html para vencer os CSS legados por página. Navegação em dois níveis: - barra horizontal no topo -> seções (Escalação, Análises, Konecta, ...) - lateral contextual -> páginas da seção em que se entrou (só aparece nas seções que têm sub-itens) Tema: atributo data-theme no , definido pelo script inline em base.html antes da primeira pintura (evita piscar claro->escuro). ========================================================================== CONTRATO DE TELA — breakpoints canônicos -------------------------------------------------------------------------- Cinco faixas, desktop-first, TODAS em max-width. Antes disto o repo tinha 17 valores distintos em 49 @media, nenhum documentado. nome faixa (CSS px) significado xs < 860 mobile: gaveta hamburger, lateral vira faixa sm 860 – 1199 desktop compacto: lateral em RAIL de ícones md 1200 – 1559 desktop padrão lg 1560 – 1919 4 colunas de card (preescalacao/kanban.html) xl >= 1920 ultrawide: tetos de container liberados Altura: baixa < 640 · media 640–819 · alta >= 820. NÃO se cria `@media (min-width: ...)`. A forma canônica do complemento é `@media not all and (max-width: 859px)` — ver a justificativa completa no bloco 3.1: com `min-width` sobra uma faixa morta nas larguras fracionárias (859,5px), comuns justamente na escala 125/150% do Windows. Viewport CSS = pixels físicos ÷ escala do Windows. O parque real: 1280x720 @100% -> 1280 @125% -> 1024 1366x768 @100% -> 1366 @125% -> 1093 @150% -> 911 1920x1080 @100% -> 1920 @150% -> 1280 2560x1080 e 3440x1440 -> ultrawide As 8 regras de tela (tabela com wrapper, sticky exige max-height, altura derivada de --edt-vh-util, container com max-width e nunca min-width, modal .edt-modal, zero cor hardcoded, media query só no shell, gráfico em .edt-chart-wrap) estão em CLAUDE.md §18.7. ATENÇÃO: o valor 860 aparece em 5 lugares que precisam mudar JUNTOS — blocos 3.1 e 7 deste arquivo, documentos_escalacao.css (2x) e js/nav_topo.js. Divergir abre uma faixa em que o painel acha que está no mobile e o shell acha que não. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens — tema claro (padrão) -------------------------------------------------------------------------- */ :root { /* Superfícies */ --edt-surface-0: #f5f6f8; /* fundo da página */ --edt-surface-1: #ffffff; /* cards, painéis */ --edt-surface-2: #eef0f4; /* linhas alternadas, hover */ --edt-surface-3: #e4e7ec; /* elementos elevados/afundados */ /* Texto */ --edt-text: #1f2937; --edt-text-muted: #6b7280; --edt-text-inverse: #ffffff; /* Bordas */ --edt-border: #e2e5ea; --edt-border-strong: #cbd2dc; /* Marca */ --edt-brand: #2563eb; --edt-brand-hover: #1d4ed8; --edt-brand-soft: #eaf1ff; --edt-brand-contrast: #ffffff; /* Semânticas (status do domínio) */ --edt-success: #16a34a; --edt-success-soft: #dcfce7; --edt-warning: #d97706; --edt-warning-soft: #fef3c7; --edt-danger: #dc2626; --edt-danger-soft: #fee2e2; --edt-info: #0891b2; --edt-info-soft: #cffafe; --edt-neutral: #64748b; --edt-neutral-soft: #e2e8f0; /* Cores que precisam se distinguir das semânticas acima sem entrar na família da marca. Hoje: "campo" e "parcial" na Carga Disponível. O amarelo é mais aberto que --edt-warning (matiz 45° contra 32°), para não colidir com o vermelho na escala de ocupação; escurecido o bastante para manter 3,2:1 sobre fundo branco, porque também pinta texto. */ --edt-violeta: #7c3aed; --edt-amarelo: #b58900; /* Navegação */ --edt-nav-bg: #ffffff; --edt-nav-border: #e2e5ea; --edt-nav-text: #4b5563; --edt-nav-text-active: #2563eb; --edt-nav-hover: #f1f3f7; --edt-nav-active-bg: #eaf1ff; --edt-nav-grupo: #9ca3af; /* Espaçamento (base 4px) */ --edt-space-1: 0.25rem; --edt-space-2: 0.5rem; --edt-space-3: 0.75rem; --edt-space-4: 1rem; --edt-space-5: 1.5rem; --edt-space-6: 2rem; /* Raio */ --edt-radius-sm: 0.25rem; --edt-radius-md: 0.5rem; --edt-radius-lg: 0.75rem; /* Sombra */ --edt-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --edt-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08); --edt-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12); /* Layout */ --edt-topbar-height: 56px; /* Fluida: 200px em telas estreitas, 258px a partir de ~1612px. Em 1366 dá ~218px — 40px devolvidos ao conteúdo sem perder os rótulos. */ --edt-subnav-width: clamp(12.5rem, 16vw, 16.125rem); /* Altura útil abaixo da barra superior. Base de toda área rolável do sistema — ver --edt-chrome no bloco 8.1 e a regra 3 do contrato. dvh porque em 512px de viewport a diferença para vh importa. */ --edt-vh-util: calc(100dvh - var(--edt-topbar-height)); /* Quanto a tela gasta ACIMA da área rolável (cabeçalho, filtros, KPIs). Cada tela redefine o seu; este é só um padrão razoável. Ver o bloco "Contrato vertical" mais abaixo. */ --edt-chrome: 12rem; /* Piso da área rolável. Pequeno de propósito — ver o mesmo bloco. */ --edt-scroll-min: 8rem; /* Tipografia — stack do sistema (Segoe UI no Windows da equipe) */ --edt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --edt-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; } /* -------------------------------------------------------------------------- 2. Tokens — tema escuro Semente: gradiente azul-marinho já usado em login.css -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --edt-surface-0: #1a2029; --edt-surface-1: #232b39; --edt-surface-2: #2c3444; --edt-surface-3: #353f52; --edt-text: #e6eaf2; --edt-text-muted: #9aa5b8; --edt-text-inverse: #1a2029; --edt-border: #333c4d; --edt-border-strong: #465166; --edt-brand: #4d84ff; --edt-brand-hover: #6b99ff; --edt-brand-soft: #1e2f52; --edt-brand-contrast: #ffffff; --edt-success: #34d399; --edt-success-soft: #10352a; --edt-warning: #fbbf24; --edt-warning-soft: #3a2e10; --edt-danger: #f87171; --edt-danger-soft: #3d1d1d; --edt-info: #38bdf8; --edt-info-soft: #10303f; --edt-neutral: #94a3b8; --edt-neutral-soft: #2c3444; --edt-violeta: #a78bfa; --edt-amarelo: #facc15; --edt-nav-bg: #1d2431; --edt-nav-border: #333c4d; --edt-nav-text: #b6c0d0; --edt-nav-text-active: #6b99ff; --edt-nav-hover: #262f3e; --edt-nav-active-bg: #1e2f52; --edt-nav-grupo: #7c889b; --edt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --edt-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35); --edt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); } /* -------------------------------------------------------------------------- 3. Remapeamento das variáveis do Bootstrap Faz componentes não migrados (modal, dropdown, .btn, .table) herdarem a paleta sem precisar tocar cada página individualmente. -------------------------------------------------------------------------- */ :root { --bs-body-bg: var(--edt-surface-0); --bs-body-color: var(--edt-text); --bs-border-color: var(--edt-border); --bs-secondary-color: var(--edt-text-muted); --bs-emphasis-color: var(--edt-text); --bs-primary: var(--edt-brand); --bs-link-color: var(--edt-brand); --bs-link-hover-color: var(--edt-brand-hover); --bs-font-sans-serif: var(--edt-font); } :root[data-theme="dark"] { --bs-tertiary-bg: var(--edt-surface-2); --bs-secondary-bg: var(--edt-surface-2); } :root[data-theme="dark"] .card, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .dropdown-menu, :root[data-theme="dark"] .list-group-item, :root[data-theme="dark"] .accordion-item { background-color: var(--edt-surface-1); color: var(--edt-text); border-color: var(--edt-border); } :root[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--edt-text); --bs-table-border-color: var(--edt-border); --bs-table-striped-bg: var(--edt-surface-2); --bs-table-striped-color: var(--edt-text); --bs-table-hover-bg: var(--edt-surface-2); --bs-table-hover-color: var(--edt-text); } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--edt-surface-2); border-color: var(--edt-border); color: var(--edt-text); } :root[data-theme="dark"] .form-control::placeholder { color: var(--edt-text-muted); } /* -------------------------------------------------------------------------- 4. Shell: topo + (lateral contextual) + conteúdo -------------------------------------------------------------------------- */ html, body { height: 100%; } body { font-family: var(--edt-font); background-color: var(--edt-surface-0); color: var(--edt-text); } .base { display: flex; flex-direction: column; height: 100vh; width: 100%; overflow: hidden; } /* Faixa abaixo do topo: lateral + conteúdo */ .edt-shell { display: flex; flex-direction: row; align-items: stretch; flex: 1 1 auto; min-height: 0; width: 100%; } .content { flex: 1 1 auto; min-width: 0; height: 100%; overflow: auto; background-color: var(--edt-surface-0); color: var(--edt-text); } /* -------------------------------------------------------------------------- 5. Barra superior — seções -------------------------------------------------------------------------- */ .edt-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--edt-space-4); height: var(--edt-topbar-height); padding: 0 var(--edt-space-4); background-color: var(--edt-nav-bg); border-bottom: 1px solid var(--edt-nav-border); z-index: 1100; } /* Marca = logo (que recolhe a lateral) + nome (que leva para a home). São dois alvos separados de propósito: antes o logo fazia parte do link e clicar nele navegava. */ .edt-topbar__marca { display: flex; align-items: center; gap: var(--edt-space-2); flex: 0 0 auto; /* Piso da barra: js/nav_topo.js recolhe seções por medição, mas quando TODAS já foram para o "Mais" e ainda não cabe, não há mais o que recolher. Sem isto a marca (nowrap, flex 0 0 auto) empurra e a topbar transborda — acontece perto de 900px com sufixo de marca e nome de usuário longos. */ min-width: 0; overflow: hidden; } .edt-topbar__brand { display: flex; align-items: center; gap: var(--edt-space-2); flex: 0 0 auto; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--edt-text) !important; text-decoration: none; white-space: nowrap; } /* Logo como botão de recolher/expandir a lateral */ .edt-topbar__logo--acao { border: 0; cursor: pointer; padding: 0; transition: background-color 0.15s ease, opacity 0.15s ease; } /* O botão mostra o que o clique VAI fazer: seta para a esquerda quando a lateral está aberta (vai recolher), para a direita quando está fechada (vai abrir). Antes era o `bi-diagram-3` da marca, que não dizia nada sobre haver um controle ali. Os dois ícones vêm no HTML e quem escolhe é o CSS, a partir do `data-subnav` que o script inline do escreve antes da primeira pintura. Trocar o ícone no JS (que roda no fim do ) faria a seta piscar invertida a cada navegação — o app é multi-page, é o mesmo motivo do script de tema. O padrão é a seta de recolher: sem `data-subnav` (JS desligado) a lateral também nasce aberta. */ .edt-topbar__logo--acao [data-subnav-icone="oculta"] { display: none; } :root[data-subnav="oculta"] .edt-topbar__logo--acao [data-subnav-icone="oculta"] { display: block; } :root[data-subnav="oculta"] .edt-topbar__logo--acao [data-subnav-icone="expandida"] { display: none; } .edt-topbar__logo--acao:hover { background-color: var(--edt-brand-hover); } .edt-topbar__logo--acao:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--edt-brand-soft); } .edt-topbar__logo { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--edt-radius-md); background-color: var(--edt-brand); color: #fff; font-size: 0.95rem; flex-shrink: 0; } /* Seções sem lateral: o quadrado não é renderizado (não há o que recolher), e isto ocupa a caixa dele apenas para reservar o espaço. Sem a reserva, a marca e a barra de seções deslizariam ~2,2rem para a esquerda ao navegar de uma seção com lateral para uma sem — e de volta na seguinte. */ .edt-topbar__logo--vazio { background-color: transparent; } .edt-topbar__suffix { color: var(--edt-brand); } /* Lista de seções */ .edt-topnav { display: flex; align-items: center; /* Seções centradas no vão entre a marca e o menu do usuário. Como os dois lados têm larguras diferentes, isto centra no espaço disponível, não no meio exato da janela — é o que dá para fazer sem tirar a lista do fluxo e quebrar a medição de transbordo de js/nav_topo.js. O `safe` NÃO é enfeite: com `center` puro, quando a lista transborda o excesso vai para OS DOIS lados e o começo fica inalcançável pela rolagem (o scroll só chega até o início da área de conteúdo). O transbordo normalmente é absorvido pelo menu "Mais", mas a PRIMEIRA pintura acontece antes do primeiro recalcular. `safe center` volta a `flex-start` justamente nesse caso. A linha sem `safe` fica como reserva para quem não suportar a palavra-chave. */ justify-content: center; justify-content: safe center; gap: var(--edt-space-1); flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .edt-topnav::-webkit-scrollbar { display: none; } .edt-topnav > li { flex: 0 0 auto; position: relative; } /* Seção recolhida no transbordo. `hidden` sozinho não bastaria se algum dia esta regra ganhar um `display`. */ .edt-topnav > li[hidden] { display: none; } /* Enquanto a seção está NA BARRA o ícone fica escondido — a barra é só texto. Quando o item é movido para dentro do menu "Mais" ele deixa de ser filho direto de `.edt-topnav`, este seletor para de valer e o ícone reaparece, alinhado com os demais itens de menu. A seta do dropdown é exceção. */ .edt-topnav > li > .edt-topnav__link > .bi:not(.bi-chevron-down) { display: none; } /* Item de seção que foi movido para dentro do transbordo: passa a ter a mesma aparência de um `.dropdown-item`, sem precisar de marcação duplicada. */ .edt-topnav .dropdown-menu > li > .edt-topnav__link { display: flex; align-items: center; gap: var(--edt-space-2); width: 100%; padding: var(--edt-space-2) var(--edt-space-3); font-size: 0.8125rem; font-weight: 400; /* `!important` só para vencer o `!important` de `.edt-topnav__link` (que existe por causa dos ~35 CSS legados por tela). Sem isto o item transbordado sairia em `--edt-nav-text` e ficaria de tom diferente dos `.dropdown-item` vizinhos dentro do mesmo menu. */ color: var(--edt-text) !important; border-radius: var(--edt-radius-sm); white-space: normal; } .edt-topnav .dropdown-menu > li > .edt-topnav__link:hover { background-color: var(--edt-surface-2); color: var(--edt-text) !important; } .edt-topnav .dropdown-menu > li > .edt-topnav__link.active { background-color: var(--edt-nav-active-bg); color: var(--edt-nav-text-active) !important; } .edt-topnav .dropdown-menu > li > .edt-topnav__link > .bi { width: 1rem; flex-shrink: 0; text-align: center; } /* Título de grupo de uma seção com submenu que foi achatada no transbordo */ .edt-topnav .dropdown-menu .dropdown-header { padding: var(--edt-space-2) var(--edt-space-3) var(--edt-space-1); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--edt-text-muted); } .edt-topnav__link { display: inline-flex; align-items: center; gap: var(--edt-space-1); padding: 0.4rem var(--edt-space-3); font-size: 0.875rem; font-weight: 500; line-height: 1.4; white-space: nowrap; border-radius: var(--edt-radius-md); color: var(--edt-nav-text) !important; text-decoration: none; background: transparent; border: 0; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .edt-topnav__link:hover { background-color: var(--edt-nav-hover); color: var(--edt-text) !important; } .edt-topnav__link.active { background-color: var(--edt-nav-active-bg); color: var(--edt-nav-text-active) !important; font-weight: 600; } .edt-topnav__link .bi-chevron-down { font-size: 0.7rem; opacity: 0.7; } /* A seta gira quando o menu abre (o Bootstrap mantém aria-expanded no gatilho) */ .edt-topnav__link[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); } /* Por que esta regra existe: `.edt-topnav` tem `overflow-x: auto` para a lista de seções poder rolar na horizontal quando não cabe. Só que, pela especificação, `overflow-x` diferente de `visible` faz o `overflow-y` "visible" virar `auto` — ou seja, a lista passa a recortar nos DOIS eixos. Como o `.dropdown-menu` é posicionado em absolute dentro de um `

` que fica DENTRO desse contêiner de rolagem, ele era recortado pela altura da barra (~40px) e não aparecia: clicar na seta não fazia nada visível. Enquanto o menu está aberto, o recorte é suspenso. A rolagem horizontal fica desativada nesse intervalo, o que é irrelevante — o usuário está escolhendo um item, não rolando a barra. A classe é posta/tirada por js/nav_topo.js nos eventos show/hide do Bootstrap. Só no desktop: abaixo de 860px a lista vira painel deslizante com `overflow-y: auto` (precisa rolar) e os dropdowns já são estáticos. O `not all and (max-width: 859px)` é o COMPLEMENTO exato do breakpoint mobile (mesmo valor usado no bloco 7 e em js/nav_topo.js). Com `min-width: 860px` sobrava uma faixa morta nas larguras fracionárias (859,5px, comuns com escala do Windows em 125/150% ou zoom do navegador): o JS já tratava como desktop, mas o recorte do dropdown não era suspenso e o menu abria numa fatia da altura da barra. */ @media not all and (max-width: 859px) { .edt-topnav.edt-topnav--dropdown-aberto { overflow: visible; } /* O menu do transbordo pode ficar mais alto que a janela: com todas as seções achatadas passa fácil de 20 linhas. Como `.base` é `height: 100vh; overflow: hidden`, o excedente seria recortado sem rolagem em lugar nenhum — os últimos itens ficariam inalcançáveis. Aqui quem rola é o próprio menu. Só no desktop: no mobile o dropdown é estático e quem rola é o painel `.edt-topnav` inteiro. */ .edt-topnav .dropdown-menu { max-height: calc(100vh - var(--edt-topbar-height) - var(--edt-space-4)); overflow-y: auto; overscroll-behavior: contain; } } /* Dropdowns do topo */ .edt-topnav .dropdown-menu { background-color: var(--edt-surface-1); border: 1px solid var(--edt-border); border-radius: var(--edt-radius-md); box-shadow: var(--edt-shadow-lg); padding: var(--edt-space-1); min-width: 15rem; } .edt-topnav .dropdown-item { display: flex; align-items: center; gap: var(--edt-space-2); padding: var(--edt-space-2) var(--edt-space-3); font-size: 0.8125rem; color: var(--edt-text); border-radius: var(--edt-radius-sm); white-space: normal; } .edt-topnav .dropdown-item:hover, .edt-topnav .dropdown-item:focus { background-color: var(--edt-surface-2); color: var(--edt-text); } .edt-topnav .dropdown-item.active { background-color: var(--edt-nav-active-bg); color: var(--edt-nav-text-active); } .edt-topnav .dropdown-item i { width: 1rem; flex-shrink: 0; text-align: center; opacity: 0.75; } /* Lado direito: tema + usuário */ .edt-topbar__right { display: flex; align-items: center; gap: var(--edt-space-1); flex: 0 0 auto; margin-left: auto; } .edt-icon-btn { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: var(--edt-radius-md); background: transparent; color: var(--edt-nav-text); font-size: 1rem; cursor: pointer; } .edt-icon-btn:hover { background-color: var(--edt-nav-hover); color: var(--edt-text); } .edt-user { display: flex; align-items: center; gap: var(--edt-space-2); padding: 0.25rem var(--edt-space-2); border-radius: var(--edt-radius-md); color: var(--edt-text) !important; text-decoration: none; font-size: 0.875rem; } .edt-user:hover { background-color: var(--edt-nav-hover); } .edt-user__avatar { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background-color: var(--edt-brand-soft); color: var(--edt-brand); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; } .edt-topbar__right .dropdown-menu { background-color: var(--edt-surface-1); border: 1px solid var(--edt-border); border-radius: var(--edt-radius-md); box-shadow: var(--edt-shadow-lg); } .edt-topbar__right .dropdown-item { display: flex; align-items: center; gap: var(--edt-space-2); font-size: 0.875rem; color: var(--edt-text); } .edt-topbar__right .dropdown-item:hover, .edt-topbar__right .dropdown-item:focus { background-color: var(--edt-surface-2); color: var(--edt-text); } .edt-topbar__right .dropdown-divider { border-top-color: var(--edt-border); } /* Hamburger (só mobile) */ .edt-topbar__burger { display: none; } /* -------------------------------------------------------------------------- 6. Lateral contextual — páginas da seção atual -------------------------------------------------------------------------- */ /* A lateral tem DOIS estados, ditados por `data-subnav` no : expandida largura fluida com rótulos (padrão em >= 1200px) oculta largura zero (padrão em < 1200px) Havia um terceiro, `rail` (só ícones), que saiu junto com o ciclo de quatro modos do logo: o botão passou a alternar apenas aberto/fechado. O atributo é escrito por um script inline no de base.html, antes da primeira pintura — mesmo motivo do script de tema: o app é multi-page e sem isso a lateral apareceria inteira e encolheria a cada navegação. O estado vem de localStorage['edt-subnav-modo']; sem valor gravado, a largura da janela decide. js/nav_topo.js faz a mesma conta no clique. */ :root { --edt-subnav-atual: var(--edt-subnav-width); } html[data-subnav="oculta"] { --edt-subnav-atual: 0px; } .edt-subnav { flex: 0 0 var(--edt-subnav-atual); width: var(--edt-subnav-atual); height: 100%; overflow-y: auto; /* Durante a transição de largura o conteúdo é mais largo que a faixa por um instante; sem isto pisca uma barra de rolagem horizontal. */ overflow-x: hidden; padding: var(--edt-space-4) var(--edt-space-3); background-color: var(--edt-nav-bg); border-right: 1px solid var(--edt-nav-border); transition: flex-basis 0.18s ease, width 0.18s ease, padding 0.18s ease; } /* Oculta: `visibility: hidden` junto com a largura zero tira os links do foco do teclado — sem isso dava para tabular por uma lateral invisível. */ html[data-subnav="oculta"] .edt-subnav { padding-left: 0; padding-right: 0; overflow: hidden; border-right-width: 0; visibility: hidden; } @media (prefers-reduced-motion: reduce) { .edt-subnav { transition: none; } } .edt-subnav__grupo { padding: var(--edt-space-4) var(--edt-space-3) var(--edt-space-1); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--edt-nav-grupo); user-select: none; } .edt-subnav__grupo:first-child { padding-top: 0; } .edt-subnav__lista { list-style: none; margin: 0; padding: 0; } .edt-subnav__link { display: flex; align-items: center; gap: var(--edt-space-3); width: 100%; padding: 0.5rem var(--edt-space-3); margin-bottom: 1px; font-size: 0.875rem; line-height: 1.4; text-align: left; color: var(--edt-nav-text) !important; text-decoration: none; background: transparent; border: 0; border-radius: var(--edt-radius-md); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .edt-subnav__link:hover { background-color: var(--edt-nav-hover); color: var(--edt-text) !important; } .edt-subnav__link.active { background-color: var(--edt-nav-active-bg); color: var(--edt-nav-text-active) !important; font-weight: 600; } .edt-subnav__link i { flex: 0 0 auto; width: 1rem; font-size: 0.95rem; text-align: center; opacity: 0.85; } /* Quando a lateral controla os painéis, os botões antigos somem. São duas regras de propósito, e a primeira é a que importa: `html.edt-subnav-js` vem de um script inline no (base.html), então vale já na primeira pintura. `body.edt-tem-subnav` só é aplicada quando js/secao_paineis.js termina de montar a lateral — e esse script roda no fim do , depois de ~20