/* Looking Glass FREEWAYNET - design tokens de
   skills/freewaynet-looking-glass-design/SKILL.md secao 4, ajustados ao
   screenshot de referencia (CLAUDE.md secao 3).

   Modernizacao visual (2026-09, ver CLAUDE.md secao 7.6): tokens de
   elevacao/vidro/movimento adicionados abaixo NAO mudam paleta, marca ou
   dados - so' acrescentam profundidade (glass surfaces), glow tecnico
   (inspirado em "Real-Time Monitoring" + "HUD/Sci-Fi FUI" da skill
   ui-ux-pro-max, com o risco de acessibilidade daquele estilo mitigado:
   sem neon puro, sem glow em texto de leitura, contraste 4.5:1 mantido)
   e micro-interacoes (transform/opacity only, respeitando
   prefers-reduced-motion - ver bloco no fim do arquivo). Nenhum recurso
   externo novo foi adicionado (sem Google Fonts/CDN novo) - a excecao de
   CSP pro Mapbox (secao 7.4) continua sendo a unica. */

:root {
  --bg-0: #020817;
  --bg-1: #030b17;
  --bg-2: #06101f;
  --surface: #071426;
  --surface-2: #09182a;

  --border: #16304a;
  --border-hover: #087cbf;

  --cyan: #00aeef;
  --cyan-bright: #13c8ff;
  --blue: #006fae;
  --purple: #a66cff;

  --green: #00e676;
  --green-status: #00d084;
  --yellow: #ffd21f;
  --red: #ff4d67;

  --text-1: #f1f5f9;
  --text-2: #94a3b8;
  --text-3: #64748b;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --sidebar-w: 260px;
  --header-h: 76px;
  --mono:
    "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas,
    monospace;
  --sans:
    "Inter", -apple-system, "Segoe UI Variable", "Segoe UI", system-ui,
    sans-serif;

  /* Movimento - tokens compartilhados (quick-reference.md #7:
     "motion-consistency", "duration-timing"). Distancias curtas (hover,
     foco) usam --dur-fast; entrada de secao usa --dur-base/slow. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* Elevacao - escala unica reaproveitada em card/metric/panel/modal
     (quick-reference.md #4: "elevation-consistent"). */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --glow-cyan: 0 0 0 1px rgba(0, 174, 239, 0.35), 0 0 24px -4px rgba(0, 174, 239, 0.35);
  --glow-green: 0 0 0 1px rgba(0, 208, 132, 0.3), 0 0 20px -6px rgba(0, 208, 132, 0.3);

  /* Superficie "vidro" - transparencia sobre o fundo escuro real (nunca
     sobre imagem/foto), contraste de texto verificado (--text-1 sobre
     --glass-bg composto ainda fica > 4.5:1 porque a base continua
     escura). Ver body::before abaixo pra' o que da' profundidade ao blur. */
  --glass-bg: rgba(7, 20, 38, 0.72);
  --glass-bg-2: rgba(9, 24, 42, 0.78);
  --glass-border: rgba(148, 197, 224, 0.14);
  --glass-blur: 16px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--sans);
  font-size: 14px;
  /* Nav lateral (2026-09) faz scroll ate' a secao clicada
     (element.scrollIntoView() sem "behavior" explicito no JS - ver
     app.js::ativarNavLateral) - essa propriedade e' quem decide se isso
     e' suave ou instantaneo. O bloco prefers-reduced-motion no fim deste
     arquivo ja forca "auto" (instantaneo) de volta pra quem pediu menos
     movimento no SO, sem precisar duplicar essa logica em JS
     (ux-guidelines.csv id 1, "Smooth Scroll"). */
  scroll-behavior: smooth;
}

/* Fundo ambiente - blobs radiais bem sutis, fixos (nao rolam com a
   pagina), so' existem pra' dar profundidade real ao backdrop-filter dos
   cards "vidro" abaixo. Fixo atras de tudo (z-index -1), nunca compete
   com o conteudo nem reduz contraste de texto (opacidade baixa,
   dissolve antes de chegar nas superficies). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px circle at 8% 0%, rgba(0, 174, 239, 0.12), transparent 60%),
    radial-gradient(600px circle at 100% 20%, rgba(166, 108, 255, 0.08), transparent 55%),
    radial-gradient(900px circle at 30% 100%, rgba(0, 208, 132, 0.06), transparent 60%);
  pointer-events: none;
}

/* Scrollbar - webkit/blink; Firefox usa o fallback thin/dark abaixo do
   proprio SO. So' cosmetico, sem impacto funcional. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) var(--bg-1);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--bg-1);
}

*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid var(--bg-1);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

::selection {
  background: rgba(0, 174, 239, 0.3);
  color: var(--text-1);
}

a {
  color: inherit;
  text-decoration: none;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Foco visivel - quick-reference.md #1 "focus-states": nunca remover o
   focus ring, so' redesenhar pra' combinar com o tema (glow ciano em vez
   do azul padrao do navegador). Aplica em qualquer elemento focavel real
   deste front (input/select/button/chip). */
input:focus-visible,
select:focus-visible,
button:focus-visible,
.lg-chip:focus-visible {
  outline: none;
  box-shadow: var(--glow-cyan);
}

/* ------------------------------------------------------------------ */
/* Icones - SVG Lucide auto-hospedados (frontend/img/icons/ui/*.svg),  */
/* inlinados no DOM por js/icons.js. currentColor no stroke do SVG e'  */
/* o que permite controlar a cor 100% por CSS aqui (ver icons.js pro   */
/* porque de nao usar <img> pra isso). Simple Icons (marcas de         */
/* terceiros - GitHub, WhatsApp etc.) usam a mesma engrenagem via      */
/* frontend/img/icons/brands/*.svg quando essa parte for implementada. */
/* ------------------------------------------------------------------ */

.icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  color: var(--cyan);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.icon-primary {
  color: var(--cyan);
}

.icon-success {
  color: var(--green);
}

.icon-warning {
  color: var(--yellow);
}

.icon-danger {
  color: var(--red);
}

.icon-ipv6 {
  color: var(--purple);
}

.icon-sm {
  width: 14px;
  height: 14px;
}

/* ------------------------------------------------------------------ */
/* Layout raiz                                                        */
/* ------------------------------------------------------------------ */

#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  min-height: 100vh;
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */

header.lg-header {
  grid-area: header;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border);
}

/* Linha de "scan" - referencia contida ao estilo HUD/monitoramento
   real-time da skill ui-ux-pro-max (glow fino, nunca neon saturado),
   comunica "isto atualiza ao vivo" sem exigir leitura. Puramente
   decorativo (aria-hidden nao se aplica, e' ::after sem semantica) e
   desligado com prefers-reduced-motion (ver bloco no fim do arquivo). */
header.lg-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cyan) 45%,
    var(--cyan-bright) 50%,
    var(--cyan) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: lg-scan 6s linear infinite;
  opacity: 0.6;
}

.lg-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lg-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bg-0);
}

/* Logo real FREEWAYNET (fornecida pelo usuario) - ate' ter o arquivo
   self-hosted em frontend/img/logo.png (precisa de acesso a shell pra
   baixar o binario), referenciamos a URL original. Trocar src por
   "/img/logo.png" assim que o arquivo for colocado nessa pasta.
   Tamanho aumentado (2026-09, pedido do usuario) - 44px cabe folgado
   dentro do --header-h de 76px sem precisar mexer na altura do header. */
.lg-logo-img {
  height: 44px;
  width: auto;
  display: block;
}

/* Divisor fino entre o bloco de marca (logo + wordmark) e a frase de
   efeito - pedido do usuario "personalize o topo, deixa mais elegante":
   uma unica linha vertical sutil substitui o antigo peso visual do h1
   removido, mantendo separacao clara sem precisar de mais texto. */
.lg-header-divider {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, var(--border-hover), transparent);
  flex-shrink: 0;
}

/* Utilitario padrao - esconde visualmente mas mantem acessivel a leitor
   de tela (o h1 real da pagina vive aqui agora, ver index.html). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lg-logo-text {
  line-height: 1.1;
}

.lg-logo-text .brand {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.lg-logo-text .brand .accent {
  color: var(--cyan-bright);
}

.lg-logo-text .sub {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

/* h1 fica so' pra' leitor de tela (.sr-only no index.html) - o titulo
   visivel do header agora e' so' a frase de efeito abaixo (pedido do
   usuario 2026-09, "deixa apenas a frase"). */

.lg-title p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-1);
}

/* Leve gradiente ciano na frase de efeito - unico toque de "titulo" que
   sobra no header, so' aplicado quando o navegador suporta
   background-clip:text; sem isso o texto fica solido em --text-1 (regra
   acima), nunca invisivel. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .lg-title p {
    background: linear-gradient(90deg, var(--text-1) 45%, var(--cyan-bright));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Preenchimento SOLIDO (2026-09, correcao do usuario - a tentativa
   anterior foi um gradiente sutil no .lg-status-group, container que so'
   faz o layout flex ao redor dos 3 chips; pedido real era cor SOLIDA
   #00e676 (mesma de --green) e apenas "dentro da caixa onde esta o
   texto" - ou seja, cada chip individual, nao o wrapper). */
.lg-status-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-2);
}

.lg-status-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Console de status (2026-09, "deixar o header mais profissional e
   moderno tecnologicamente") - os 3 indicadores viravam texto solto
   separado por linhas finas; agora sao chips com o MESMO tratamento
   visual ja usado em .lg-chip (exemplos de busca, secao 7.6) e nos
   badges AFI (.pill-ipv4/.pill-ipv6) - superficie/borda/raio 999px
   reaproveitados, nao inventados, pra' parecer um "systems status bar"
   de NOC em vez de texto solto. Sem hover/transicao nesses chips de
   proposito: eles nao sao clicaveis, e dar feedback de hover implicaria
   uma interatividade que nao existe (mesmo cuidado ja tomado no mockup
   de terminal, CLAUDE.md secao 7.9, e nos itens "Em breve" da nav). */
.lg-status-pill,
.lg-status-chip {
  border-radius: 999px;
  padding: 6px 14px;
}

/* Chips informativos ("Atualizado em...", "AS263609 FREEWAYNET") nao
   representam saude da rede - preenchimento solido incondicional e' so'
   um acento visual, sem risco de "simular status falso" (CLAUDE.md
   secao 4). Texto/icone escurecidos pra --bg-0 pra manter contraste
   > 4.5:1 sobre o verde solido (--text-2, cinza claro, ficaria ilegivel
   em cima de #00e676). */
.lg-status-chip {
  background: var(--green);
  border: 1px solid transparent;
  color: var(--bg-0);
}

.lg-status-chip .icon-slot,
.lg-status-chip .icon {
  color: var(--bg-0);
}

.lg-status-chip .icon {
  width: 14px;
  height: 14px;
}

/* Pill "Operacional" continua neutra por padrao - so' fica solida quando
   o status e' saudavel (dot sem .degraded/.down), o mesmo criterio que ja
   valia pro glow de borda da versao anterior. Preencher de verde solido
   num estado degradado/indisponivel seria um alarme visual enganoso na
   direcao contraria - pareceria "esta tudo bem" quando nao esta (mesmo
   principio da secao 7.4.1: pin do mapa so' fica ambar, nunca inventa
   verde). */
.lg-status-pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.lg-status-pill:has(.dot:not(.degraded):not(.down)) {
  background: var(--green);
  border-color: transparent;
  color: var(--bg-0);
}

/* O dot e o anel de pulso ficam quase invisiveis em cima do preenchimento
   solido (--green-status e' bem proximo de --green em matiz/luminancia) -
   recoloridos pra --bg-0 so' quando a pill esta solida (saudavel), pra
   preservar o "isto e' um status ao vivo" que a secao 7.13 documenta como
   intencional (sem isso, o pulso de fato desapareceria visualmente). */
.lg-status-pill:has(.dot:not(.degraded):not(.down)) .dot {
  background: var(--bg-0);
  box-shadow: 0 0 6px rgba(2, 8, 23, 0.55);
}

.lg-status-pill:has(.dot:not(.degraded):not(.down)) .dot::after {
  border-color: var(--bg-0);
}

/* :has() e' progressive enhancement - navegador sem suporte simplesmente
   nao aplica o preenchimento solido da pill (fica na superficie neutra
   padrao acima), nunca quebra layout nem esconde informacao; o texto/cor
   do dot continuam sendo a fonte primaria do status em qualquer navegador. */

.dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-status);
  box-shadow: 0 0 6px var(--green-status);
}

/* Anel pulsante - so' no estado saudavel ("up"), reforca "isto e' um
   status ao vivo" sem exigir leitura (padrao "Real-Time Monitoring" da
   skill ui-ux-pro-max: "status indicator blink/pulse"). Cor sempre
   acompanhada de texto ao lado (status-texto) - nunca e' o unico sinal
   (quick-reference.md #1 "color-not-only"). */
.dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--green-status);
  animation: lg-pulse 2.2s var(--ease-out) infinite;
}

.dot.degraded {
  background: var(--yellow);
  box-shadow: 0 0 6px var(--yellow);
}

.dot.degraded::after {
  border-color: var(--yellow);
  animation-duration: 1.6s;
}

.dot.down {
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
}

.dot.down::after {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                            */
/* ------------------------------------------------------------------ */

nav.lg-sidebar {
  grid-area: sidebar;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-y: auto;
}

.lg-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lg-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: default;
  border: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out);
}

.lg-nav-item.active {
  background: var(--surface-2);
  color: var(--cyan-bright);
  border: 1px solid var(--border-hover);
  box-shadow: var(--glow-cyan);
}

/* Itens com destino real (Inicio/Consulta de Rotas/Mapa da Rede, ver
   app.js::ativarNavLateral) - antes TODOS os itens eram cursor:default
   (nav 100% decorativa, nenhum clique fazia nada). ux-guidelines.csv id
   3 ("Active State") + id 41 ("Keyboard Navigation") - foco visivel e
   feedback de hover/click nos que realmente navegam, pra' nao parecer
   clicavel o que nao e' (Estatisticas/Comunidades/Ferramentas de Rede
   continuam "Em breve", ver .is-disabled abaixo). */
.lg-nav-item[role="link"] {
  cursor: pointer;
}

.lg-nav-item[role="link"]:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

.lg-nav-item[role="link"]:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 1px;
}

/* Feedback tatil imediato no clique (ux-guidelines.csv id 30, "Active
   States" de interacao - nao confundir com .active de navegacao acima,
   que marca "onde eu estou", nao "o que acabei de apertar"). Mesma
   tecnica de :active com scale ja usada no botao primario (secao 7.6). */
.lg-nav-item[role="link"]:active {
  transform: scale(0.98);
}

/* Estatisticas/Comunidades/Ferramentas de Rede - badge "Em breve" ja
   avisava, cursor:not-allowed reforca visualmente pra quem passa o
   mouse (mesmo tratamento do mockup de terminal, secao 7.9). "Sobre o
   FREEWAYNET" fica de fora de proposito - nao tem badge "Em breve"
   porque nao e' um gap de dado/backend, so' ainda nao tem uma secao de
   destino nesta pagina pra' apontar (ver CLAUDE.md secao 7.11). */
.lg-nav-item.is-disabled {
  cursor: not-allowed;
}

/* "Sobre FreewayNet" (2026-09, renomeado de "Sobre o FREEWAYNET" +
   virou link real pro site institucional, a pedido do usuario) - unico
   item da sidebar que navega pra fora, os outros so' dao scroll pra uma
   secao desta mesma pagina (app.js::ativarNavLateral). Padding sai do
   <li> e vai pro <a> (preenche 100% da area) pra' o hover/foco cobrirem
   exatamente a mesma caixa que os outros itens de nav, sem duplicar
   estilo. */
.lg-nav-item--link {
  padding: 0;
}

.lg-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
  cursor: pointer;
}

.lg-nav-link:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

.lg-nav-link:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: -2px;
}

.lg-nav-link:active {
  transform: scale(0.98);
}

/* Seta "abre em outro site" - sinaliza ANTES do clique que este link sai
   do portal, pratica padrao de web (nao uma linha especifica do
   catalogo da skill). Cor neutra (--text-3), empurrada pra' direita
   (mesmo truque de margin-left:auto do .badge-soon). Classe generica
   (nao especifica da nav) - reaproveitada tambem no card "Ferramentas
   de Rede" (Whois/BGPQ4, secao 7.15) em vez de duplicar a mesma regra
   com outro nome, mesma "escala unica" ja seguida no resto do projeto. */
.lg-external-icon {
  margin-left: auto;
  color: var(--text-3);
}

.lg-external-icon.icon {
  width: 13px;
  height: 13px;
}

/* Barra de destaque do item ativo - reforca "voce esta aqui" sem
   depender so' da cor de fundo (quick-reference.md #9 "nav-state-active"). */
.lg-nav-item.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 999px;
  background: var(--cyan-bright);
}

.badge-soon {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
  white-space: nowrap;
}

.lg-nav-item .icon {
  width: 16px;
  height: 16px;
  color: inherit;
}

.lg-nav-item.active .icon {
  color: var(--cyan-bright);
}

.lg-nav-item .badge-soon {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
}

.lg-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.lg-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.lg-card h3 {
  margin: 0 0 var(--space-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.lg-card h3.lg-card-head-flex {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lg-tools-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lg-tools-mini li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-3);
}

/* Ping/Traceroute continuam sem backend real (CLAUDE.md secao 5 - risco
   de injecao de comando, nenhuma decisao de arquitetura tomada ainda) -
   cursor:not-allowed so' nesses dois itens agora, nao no <ul> inteiro
   como antes (2026-09, ver secao 7.15) - Whois/BGPQ4 abaixo viraram
   links reais, e no CLAUDE.md secao 4 dizer "not-allowed" num item que
   funciona seria a mesma mentira ao contrario de fingir que um mock e'
   dado real. Mesmo tratamento visual do mockup de terminal (secao 7.9) e
   dos itens "Em breve" da nav (.lg-nav-item.is-disabled). */
.lg-tools-mini li.is-disabled {
  cursor: not-allowed;
}

.lg-tools-mini li .badge-soon {
  margin-left: auto;
}

.lg-tools-mini .icon {
  color: var(--text-3);
}

/* Whois/BGPQ4 (2026-09, secao 7.15) - unicos itens deste card que sao
   links reais; preenchem a largura do <li> (mesmo truque de padding
   movido pro elemento clicavel usado em .lg-nav-link, secao 7.14) pra'
   o hover/foco cobrir a linha inteira, nao so' o texto. */
.lg-tools-mini-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.lg-tools-mini-link:hover {
  color: var(--text-1);
}

.lg-tools-mini-link:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}

.lg-tools-mini-link:active {
  transform: scale(0.98);
}

.lg-network-asn {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--cyan-bright);
}

.lg-network-name {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: var(--space-3);
}

.lg-network-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}

.lg-network-facts li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Muted igual .lg-tools-mini .icon - sao fatos institucionais estaticos,
   nao chamadas pra acao, entao o icone nao precisa competir com o ciano
   usado pra elementos interativos/de status. */
.lg-network-facts .icon {
  color: var(--text-3);
}

.lg-sessions-value {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Barra 100% empilhada (2026-09, generalizada 2026-09 pra' virar
   componente reusavel - ver CLAUDE.md secao 7.12) - guiada pela skill
   ui-ux-pro-max: dado tem so' 2 categorias que somam um total (IPv4/IPv6
   das sessoes BGP, ou "ativos/restante" dos peers), o catalogo de charts
   (charts.csv, linha "Proportional / Percentage", id 19) recomenda
   "Stacked Bar 100%" pra esse formato quando o numero de categorias e'
   baixo (waffle so' compensa acima de 3). Nasceu especifica do card
   "Sessões BGP" (`.lg-sessions-*`) e foi renomeada pra' `.lg-bar100*`
   quando o mesmo padrao passou a ser reusado nos cards de metrica
   "Peers BGP"/"Peers Ativos" (main content) - uma unica definicao, nao
   uma copia por card (mesmo principio da "escala unica" da secao 7.6). */
.lg-bar100 {
  display: flex;
  height: 6px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  margin: var(--space-2) 0 6px;
}

.lg-bar100-seg {
  height: 100%;
  width: 0%;
  /* Anima só a largura quando os dados chegam (uma vez por refresh, não
     é uma animação contínua) - ainda assim respeita
     prefers-reduced-motion (bloco no fim do arquivo), igual ao resto do
     motion do projeto. */
  transition: width var(--dur-slow) var(--ease-out);
}

/* Cores IPv4/IPv6 - reaproveitadas de .pill-ipv4/.pill-ipv6 (mesma
   paleta da tabela de rotas) em vez de inventar uma nova - consistencia
   visual entre os lugares que mostram AFI (Sessões BGP + Peers BGP). */
.lg-bar100-ipv4 {
  background: var(--cyan-bright);
}

.lg-bar100-ipv6 {
  background: var(--purple);
}

/* "Ativos" (card Peers Ativos, ver CLAUDE.md secao 7.12) - so' UM
   segmento colorido (verde = saudavel, mesmo tom de .icon-success/
   status "up"); o restante fica so' com o fundo neutro de .lg-bar100
   (var(--surface-2)) em vez de um segundo segmento colorido pra
   "inativo" - "sessao sem estado up" nao e' necessariamente um alarme
   (peer pode estar administrativamente desligado), mesmo principio de
   nunca usar vermelho/alarme sem necessidade real (secao 7.4.1, pins do
   mapa). */
.lg-bar100-up {
  background: var(--green);
}

.lg-sessions-split {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}

/* Numeros do split coloridos com a MESMA cor da barra acima e dos badges
   AFI da tabela de rotas (.pill-ipv4/.pill-ipv6) - reforça a associação
   cor->protocolo pra quem enxerga a barra, sem que a cor seja a ÚNICA
   forma de diferenciar (o texto "IPv4"/"IPv6" ao lado de cada número
   já cobre quem não distingue cor - ui-ux-pro-max, Accessibility,
   "não confiar só na cor"). */
.lg-sessions-split .pill-ipv4,
.lg-sessions-split .pill-ipv6 {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Main                                                                */
/* ------------------------------------------------------------------ */

main.lg-main {
  grid-area: main;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-x: hidden;
}

.lg-search-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lg-search-row {
  display: flex;
  gap: var(--space-3);
}

#prefixo-input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  padding: var(--space-3);
  font-size: 14px;
  font-family: var(--mono);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

#prefixo-input:focus {
  outline: none;
  border-color: var(--border-hover);
}

#protocolo-select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  padding: 0 var(--space-3);
  font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

button.lg-btn-primary {
  background: var(--cyan);
  color: var(--bg-0);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-5);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

button.lg-btn-primary:hover {
  background: var(--cyan-bright);
  box-shadow: var(--glow-cyan);
}

button.lg-btn-primary:active {
  transform: scale(0.97);
}

.lg-examples {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  font-size: 11px;
  color: var(--text-3);
}

.lg-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  display: inline-block;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.lg-chip:hover {
  border-color: var(--border-hover);
  color: var(--cyan-bright);
  transform: translateY(-1px);
}

.lg-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.lg-metric {
  position: relative;
  background: var(--glass-bg-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.lg-metric::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  opacity: 0.7;
}

.lg-metric:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.lg-metric-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: var(--space-2);
}

.lg-metric-label .icon {
  width: 14px;
  height: 14px;
}

.lg-metric-value {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.lg-metric-sub {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
}

.lg-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.lg-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.lg-panel-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-1);
}

.lg-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

/* Container rola internamente quando tem tabela grande - so' assim o
   "position: sticky" do <thead> (acima) tem uma ancestral que realmente
   rola, senao o cabecalho fixo nao tem efeito nenhum. */
#rotas-container:has(table) {
  max-height: 480px;
  overflow-y: auto;
}

table.lg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

table.lg-table th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--text-3);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface);
  z-index: 1;
}

table.lg-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}

table.lg-table tbody tr:hover td {
  background: rgba(148, 197, 224, 0.05);
}

table.lg-table tr.is-best {
  background: rgba(0, 230, 118, 0.06);
  box-shadow: inset 3px 0 0 var(--green);
}

table.lg-table tr.is-best:hover td {
  background: rgba(0, 230, 118, 0.1);
}

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out);
}

.pill-best {
  background: rgba(0, 230, 118, 0.15);
  color: var(--green);
}

.pill-ipv4 {
  color: var(--cyan-bright);
}

.pill-ipv6 {
  color: var(--purple);
}

.pill-up {
  color: var(--green);
}

.pill-down {
  color: var(--red);
}

.pill-rpki-valid {
  background: rgba(0, 230, 118, 0.15);
  color: var(--green);
}

.pill-rpki-invalid {
  background: rgba(255, 77, 103, 0.15);
  color: var(--red);
}

.pill-rpki-unknown {
  color: var(--text-3);
}

.lg-soon-panel {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
}

.lg-soon-panel .badge-soon {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--yellow);
}

.lg-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.lg-tool-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  opacity: 0.55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.lg-tool-card .icon {
  width: 20px;
  height: 20px;
}

/* Rodape institucional - morava em <footer> no fim do <main> (faixa
   horizontal cheia abaixo do mapa); movido pra sidebar (2026-09, pedido
   do usuario, "libertar espaco" no conteudo principal), logo abaixo do
   card "Ferramentas de Rede". Texto pequeno/discreto, sem borda propria
   - a ultima linha antes do fim do <nav>, entao nao precisa de mt:auto
   pra "colar" em lugar nenhum. */
.lg-sidebar-footer {
  padding: 0 var(--space-2);
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}

.lg-sidebar-footer p {
  margin: 0 0 var(--space-1);
}

.lg-sidebar-footer p:last-child {
  margin-bottom: 0;
}

.lg-sidebar-footer-empresa {
  font-weight: 600;
  color: var(--text-2);
}

/* Envolve o mapa + o mockup do terminal (Ping/Traceroute) lado a lado -
   antes o .lg-mapa-container era filho direto do .lg-panel e sobrava um
   vao vazio a' direita dele (so' ocupava 50% de largura, ver comentario
   abaixo). Adicionado 2026-09, pedido do usuario pra' aproveitar esse
   espaco com uma previa visual das Ferramentas de Rede.

   Mapa continua flush a' esquerda (sem padding-left, mesmo comportamento
   de antes) - so' padding-right pra' o mockup nao ficar colado na borda
   do painel (o mapa em si nunca teve essa borda direita, o vazio a'
   direita e' exatamente o espaco que o mockup agora ocupa). Sem
   padding-bottom de proposito - mapa e mockup continuam tocando a borda
   superior de .lg-mapa-legenda, mesmo espacamento (zero) de antes. */
.lg-mapa-row {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
  padding-right: var(--space-4);
}

.lg-mapa-container {
  position: relative;
  /* Quadrado de verdade (era height:360px fixo, ficava retangular/largo).
     A primeira tentativa so' limitava max-height - em telas largas a
     largura continuava esticando 100% do painel e a altura ficava
     presa no teto, resultando ainda num retangulo (so' que deitado).
     Limitar max-width IGUAL a max-height (784px, 40% maior que o teto
     anterior de 560px - pedido do usuario) e' o que garante a mesma
     proporcao nos dois eixos. margin:auto centraliza o quadrado quando
     ele fica mais estreito que o painel (telas largas). */
  /* Largura = metade do painel (pedido do usuario, 2026-09 - "ate' onde
     a linha vermelha indica"), altura FIXA (nao acompanha mais a
     largura - antes usava aspect-ratio:1/1, mas o usuario pediu pra
     mexer so' na largura). max-width extra evita ficar gigante em
     monitor ultra-wide; alinhado a esquerda (margin:0, sem auto).

     flex-shrink:0 (2026-09, agora que e' filho de .lg-mapa-row junto do
     mockup do terminal) - sem isso o flexbox tentaria encolher os dois
     irmaos igualmente quando faltasse espaco, o que deixaria o mapa
     menor que os 470px de altura/50% de largura pedidos. O mockup
     (flex:1) e' quem cede espaco, nunca o mapa. */
  width: 50%;
  max-width: 640px;
  height: 470px;
  margin: 0;
  flex-shrink: 0;
  background: var(--bg-2);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
}

.lg-mapa-container #mapa-rede {
  width: 100%;
  height: 100%;
}

/* Sobrescreve o branding padrao do Mapbox (fundo claro) pra' combinar
   com o tema escuro do resto do portal - so' cosmetico, nao afeta
   funcionalidade dos controles. */
.lg-mapa-container .mapboxgl-ctrl-attrib,
.lg-mapa-container .mapboxgl-popup-content {
  background: var(--surface);
  color: var(--text-2);
}

/* Mockup visual do terminal Ping/Traceroute (2026-09) - preenche o vao
   vazio ao lado do mapa. PURAMENTE decorativo: nenhum controle aqui
   dispara execucao de verdade (ver comentario no index.html e CLAUDE.md
   secao 5 - allowlist/sandboxing pra execucao real ainda precisam ser
   decididos com o usuario antes de qualquer backend). cursor:not-allowed
   nos "botoes" (na verdade <span>, sem role="button") reforca visualmente
   que nada ali e' clicavel ainda, sem precisar de JS nenhum. */
.lg-terminal-mock {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: not-allowed;
}

.lg-terminal-mock-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.lg-terminal-mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

.lg-terminal-mock-title {
  margin-left: var(--space-1);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lg-terminal-mock-head .badge-soon {
  margin-left: auto;
}

.lg-terminal-mock-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.lg-terminal-mock-btn {
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-3);
  background: var(--surface-2);
}

.lg-terminal-mock-btn.is-active {
  color: var(--cyan-bright);
  background: rgba(0, 174, 239, 0.12);
}

.lg-terminal-mock-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-3);
}

.lg-terminal-mock-run {
  padding: 3px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.lg-terminal-mock-body {
  flex: 1;
  margin: 0;
  padding: var(--space-3);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow: auto;
}

.lg-terminal-mock-prompt {
  color: var(--green-status);
}

.lg-terminal-mock-muted {
  color: var(--text-3);
}

.lg-terminal-mock-nota {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-3);
  font-style: italic;
}

.lg-mapa-legenda {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-2);
}

.lg-legenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lg-legenda-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  /* Glow por ponto - a cor exata (ciano/verde) vem do "background" inline
     no HTML (index.html), reaproveitado aqui como sombra pra' combinar
     sem precisar de uma classe por cor. */
  box-shadow: 0 0 6px var(--lg-dot-color, transparent);
}

/* ------------------------------------------------------------------ */
/* Pin customizado dos switches GROUP_INTERIOR no mapa (task #232/#234) */
/* - status real (online/offline/desconhecido), nunca IP ou tempo de   */
/* indisponibilidade (o backend so' manda o booleano, ver mapa.js).    */
/* Tratamento deliberadamente sobrio: verde pulsante quando online     */
/* (mesmo padrao do .dot::after do header), ambar SEM pulso quando     */
/* offline (nunca vermelho piscando/alarmante em portal publico - foi  */
/* a alternativa negociada com o usuario, ver CLAUDE.md secao 3/7.4),  */
/* cinza neutro quando o Zabbix nao tem o item "icmpping" configurado  */
/* (silencio de dado, nao "esta fora"). PTTs (tipo="ptt") continuam no */
/* marker padrao do Mapbox, sem nenhuma classe destas.                 */
/* ------------------------------------------------------------------ */

.lg-pin-interior {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lg-pin-core {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid rgba(2, 8, 23, 0.65);
  box-shadow: var(--glow-green);
}

/* Anel pulsante - so' existe no DOM quando online===true (mapa.js nem
   cria o elemento fora desse caso), mesma tecnica do .dot::after do
   header (quick-reference.md #1 "color-not-only": o popup do pin ja'
   mostra o nome/local em texto, a animacao e' reforco, nunca o unico
   sinal de status). */
.lg-pin-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--green);
  /* 3.1s (era 2.2s) - 40% mais lento, pedido do usuario (2026-09). O
     delay negativo aleatorio em criarElementoPinInterior() (mapa.js) usa
     essa mesma duracao pra sortear o ponto de partida no ciclo. */
  animation: lg-pin-pulso 3.1s var(--ease-out) infinite;
  pointer-events: none;
}

.lg-pin-interior.lg-pin-offline .lg-pin-core {
  background: var(--yellow);
  box-shadow: 0 0 6px rgba(255, 210, 31, 0.4);
}

.lg-pin-interior.lg-pin-unknown .lg-pin-core {
  background: var(--text-3);
  box-shadow: none;
}

@keyframes lg-pin-pulso {
  from {
    opacity: 0.9;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

.lg-error {
  color: var(--red);
  font-size: 12px;
  padding: var(--space-3);
}

.lg-loading {
  color: var(--text-3);
  font-size: 12px;
  padding: var(--space-3);
}

@media (max-width: 900px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main";
  }

  /* Os 3 chips de status (secao 7.13) nao cabem numa unica linha ao lado
     do logo/titulo em telas estreitas - --header-h e' uma altura fixa
     pensada pro layout de 1 linha do desktop, entao a linha acima troca
     essa altura fixa por "auto" soo' nesse breakpoint, liberando o header
     pra crescer verticalmente quando envolve. */
  header.lg-header {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    padding-block: var(--space-3);
  }

  .lg-status-group {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  nav.lg-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .lg-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  table.lg-table {
    display: block;
    overflow-x: auto;
  }

  /* Mapa + mockup do terminal lado a lado (2026-09) nao cabem numa tela
     estreita - empilha em vez de espremer os dois (o mapa tem
     flex-shrink:0 de proposito no desktop, entao sem isso ele nao cederia
     espaco e o layout estouraria horizontalmente aqui). */
  .lg-mapa-row {
    flex-direction: column;
  }

  .lg-mapa-container {
    width: 100%;
    max-width: none;
  }
}

/* ------------------------------------------------------------------ */
/* Movimento de entrada - fade + leve subida nos blocos principais do   */
/* <main>, escalonado por ordem (quick-reference.md #7                 */
/* "stagger-sequence": 30-50ms por item). So' roda uma vez no carrega-  */
/* mento (nao repete em toda re-renderizacao de dados), e e' inteira-   */
/* mente desligado se o usuario pedir menos movimento (bloco            */
/* prefers-reduced-motion no fim deste arquivo).                       */
/* ------------------------------------------------------------------ */

@keyframes lg-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lg-scan {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 200% 0;
  }
}

@keyframes lg-pulse {
  from {
    opacity: 0.9;
    transform: scale(0.7);
  }
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}

.lg-search-panel,
.lg-metric,
.lg-panel {
  animation: lg-rise var(--dur-slow) var(--ease-out) both;
}

.lg-search-panel {
  animation-delay: 0ms;
}

.lg-metrics .lg-metric:nth-child(1) {
  animation-delay: 40ms;
}
.lg-metrics .lg-metric:nth-child(2) {
  animation-delay: 80ms;
}
.lg-metrics .lg-metric:nth-child(3) {
  animation-delay: 120ms;
}
.lg-metrics .lg-metric:nth-child(4) {
  animation-delay: 160ms;
}

/* :has() em vez de nth-of-type/nth-child - os dois .lg-panel sao
   <section> como .lg-search-panel/.lg-metrics tambem sao, entao contar
   posicao por tipo de tag mistura os quatro; identificar pelo conteudo
   e' mais robusto a reordenacao futura do <main>. */
.lg-main > .lg-panel:has(#rotas-container) {
  animation-delay: 180ms;
}
.lg-main > .lg-panel:has(.lg-mapa-container) {
  animation-delay: 220ms;
}

/* ------------------------------------------------------------------ */
/* prefers-reduced-motion - quick-reference.md #1 "reduced-motion" e   */
/* #7 "excessive-motion": qualquer usuario que pediu menos movimento   */
/* no sistema operacional nao ve nenhuma das animacoes acima. O status */
/* do sistema (dot verde/amarelo/vermelho) continua comunicado por     */
/* cor + texto (nunca so' pela animacao), entao desligar o pulso aqui   */
/* nao perde informacao nenhuma.                                       */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .lg-search-panel,
  .lg-metric,
  .lg-panel {
    opacity: 1;
    transform: none;
  }

  header.lg-header::after {
    display: none;
  }

  .dot::after {
    display: none;
  }

  .lg-pin-pulse {
    display: none;
  }
}