/* A casca do app Run&Co: a barra de cima e a ilha de abas embaixo.
   ═══════════════════════════════════════════════════════════════════════════
   Arquivo separado de propósito: as páginas públicas (desafios, conexão,
   vitrine de parceiros) usam a casca sem herdar o tema do app, que brigaria
   com o estilo editorial delas. Por isso as cores aqui são literais, com
   var(--x, literal) só onde faz diferença: este arquivo não pode depender do
   ui.css estar carregado.

   O que mudou e por quê (ago/26, referência adidas Running)
   ─────────────────────────────────────────────────────────
   A barra de cima era grafite com a logo no centro. Agora ela é do papel e diz
   o NOME DA TELA: a marca assina a casa (o Início) e a barra de baixo, não
   cada tela. A seta de voltar entra no segundo nível, o sino segue à direita.

   A ilha embaixo foi de quatro para CINCO abas, com o Check-in no centro num
   ladrilho neon elevado: é a ação da semana, e ganha o destaque físico de um
   botão de ação, não de mais um destino. A gaveta se aposentou junto com o
   hambúrguer: a cauda longa mora nos domínios (Clube, Perfil, Início).

   O espaço para a ilha vem do `.abas-espaco`, um elemento vazio no fim do
   body. Elemento e não `body { padding-bottom }`: o <style> local de várias
   páginas carrega depois deste arquivo e definiria o padding do body por
   cima, sem avisar. */

/* ── A barra de cima ──────────────────────────────────────────────────────── */

.app-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg, #f5f5f0); color: var(--ink, #1a1a1a);
  display: flex; align-items: center; gap: 2px;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 6px;
  min-height: 54px; max-width: 100%;
}
.nav-titulo {
  font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 16px;
  letter-spacing: 0; text-transform: uppercase; color: var(--ink, #1a1a1a);
  margin: 0 auto 0 8px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Com seta na frente o nome encosta nela, sem margem dupla. */
.nav-voltar + .nav-titulo, .nav-voltar + .nav-logo { margin-left: 0; }
/* O ícone da tela, à esquerda do nome no segundo nível. Tucado logo depois da
   seta; o respiro entre desenho e palavra fica no título, e a margem `auto`
   dele continua empurrando o sino pra direita. */
.nav-titulo-ico { flex-shrink: 0; display: flex; align-items: center; color: var(--ink, #1a1a1a); }
.nav-titulo-ico svg { width: 22px; height: 22px; }
.nav-voltar + .nav-titulo-ico { margin-left: -6px; }
.nav-titulo-ico + .nav-titulo { margin-left: 7px; }
.nav-logo {
  font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 16px;
  letter-spacing: -0.02em; color: var(--ink, #1a1a1a); text-decoration: none;
  margin: 0 auto 0 8px; white-space: nowrap;
}
/* O & é MARCA-TEXTO: glifo grafite sobre bloco neon. Sobre fundo claro o neon
   nunca vai como cor de texto, porque some. */
.nav-logo span {
  color: var(--ink, #1a1a1a); background: var(--neon, #CCFF00);
  padding: 0 0.1em; border-radius: 4px;
}
.nav-dir { flex-shrink: 0; display: flex; align-items: center; gap: 2px; }

/* Sino e seta. 44px de alvo, que é o mínimo de toque, e o ícone dentro
   fica em 21px. */
.nav-icone {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--soft, #4a4a45); text-decoration: none;
}
.nav-icone:hover { color: var(--ink, #1a1a1a); }
.nav-icone.ativo { color: var(--ink, #1a1a1a); }
.nav-icone svg { width: 21px; height: 21px; }
.nav-voltar { margin-left: -8px; }

/* O convite de quem não tem conta: mesma barra, com "Entrar no clube" no
   lugar do sino. Neon cheio porque é o ÚNICO controle da barra pública, e é
   exatamente a ação que a gente quer que a visita tome. */
.nav-cta {
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--neon, #CCFF00); color: #1a1a1a; text-decoration: none;
  padding: 11px 14px; border-radius: 10px; white-space: nowrap;
  margin-right: 4px;
}
.nav-cta:hover { opacity: 0.85; }

/* ── Desktop ──────────────────────────────────────────────────────────────
   No celular a barra usa a tela inteira e o nome fica à esquerda. Numa janela
   larga isso espalhava: nome num canto, sino no outro, e parecia erro. Aqui a
   barra se alinha à coluna de 620px do conteúdo (os ícones caem na borda dos
   cartões) e o nome/logo vai pro CENTRO da janela, como o Vini pediu.
   620px de coluna + 50px de folga por lado = o corte em 720px. */
@media (min-width: 720px) {
  .app-nav {
    padding-left: calc(50% - 310px);
    padding-right: calc(50% - 310px);
  }
  .nav-titulo, .nav-logo {
    position: absolute; left: 50%; transform: translateX(-50%);
    margin: 0; max-width: 50%;
  }
  /* Com o título fora do fluxo, quem empurra o sino pra direita é a margem. */
  .nav-dir { margin-left: auto; }
}

.nav-icone .bolha {
  position: absolute; top: 4px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 6px; background: var(--neon, #CCFF00); color: #1a1a1a;
  font-family: 'Unbounded', sans-serif; font-weight: 900; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--bg, #f5f5f0);
}

/* ── A ilha de abas ───────────────────────────────────────────────────────
   Cinco abas, uma por domínio: Início (o agora), Agenda (o corre que vem),
   Check-in (a ação), Clube (as pessoas) e Perfil (eu).

   O Check-in é o CENTRO, num ladrilho neon elevado acima da linha da ilha:
   é a ação que o clube inteiro faz toda semana, e o app inteiro se organiza
   em volta dela. O ladrilho de 52px estoura o topo da ilha de propósito,
   como botão físico, não como aba.

   Estado ativo com TRÊS pistas, nunca cor sozinha: ícone e rótulo no branco
   do papel (contra o cinza das apagadas), traço no topo e aria-current. */

.app-abas {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100% - 24px));
  display: flex; align-items: stretch;
  background: #1a1a1a; border-radius: 22px;
  padding: 8px 4px 6px;
  box-shadow: 0 8px 28px rgba(20, 20, 18, 0.28), 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* ── Liquid glass (ago/26) ────────────────────────────────────────────────
   A ilha e a barra de cima viram VIDRO: fundo translúcido que desfoca o corre
   passando por trás, com uma borda fina clara e brilho no topo pra dar volume.

   Fica num @supports de propósito. As regras sólidas acima são o fallback: sem
   backdrop-filter (navegador velho), a casca segue chapada como sempre foi, e
   nunca fica uma barra transparente deixando o conteúdo cru vazar sem desfoque.
   A barra de cima tinge o próprio --bg (color-mix) pra respeitar o tema; a ilha
   é escura literal, que é a identidade dela e não depende do ui.css. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .app-nav {
    background: color-mix(in srgb, var(--bg, #f5f5f0) 72%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.8);
    backdrop-filter: blur(18px) saturate(1.8);
  }
  .app-abas {
    /* 0.60 e não menos: com ícone branco sobre um app claro, transparência
       demais lava o desenho. É o teto de vidro que ainda deixa o branco legível. */
    background: rgba(20, 20, 18, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(30px) saturate(1.9);
    backdrop-filter: blur(30px) saturate(1.9);
    box-shadow:
      0 10px 36px rgba(10, 10, 8, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  }
}
.aba {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 8px 2px 7px; border-radius: 15px;
  color: #e4e4de; text-decoration: none; background: none; border: none; cursor: pointer;
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 9px;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.aba svg { width: 22px; height: 22px; }
.aba:hover { color: #e8e8e2; }

/* Ativo à la Strava: ícone (que já é contorno) e rótulo em NEON, sobre uma
   PÍLULA translúcida neutra, o "algo a mais" da seleção. A pílula do Strava é
   neutra de propósito; quem carrega a cor é o desenho, não o fundo. Saiu o
   traço no topo: com os inativos em branco, cor cheia + pílula lê melhor. */
.aba.ativa { color: var(--neon, #CCFF00); }
.aba.ativa:not(.acao) {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* O Check-in: ladrilho neon elevado, estourando o topo da ilha. O rótulo
   fica neon para amarrar com o ladrilho; o ativo segue as outras abas. */
.aba.acao { justify-content: flex-end; }
.aba .ladrilho {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--neon, #CCFF00); color: #1a1a1a;
  margin-top: -30px;
  box-shadow: 0 6px 16px rgba(204, 255, 0, 0.30), 0 2px 0 rgba(0,0,0,0.18);
}
.aba .ladrilho svg { width: 22px; height: 22px; }
.aba.acao { color: var(--neon, #CCFF00); }
.aba.acao.ativa { color: var(--neon, #CCFF00); }

/* A folga embaixo do conteúdo, para a última linha não ficar debaixo da ilha.
   Um pouco maior que antes por causa do ladrilho elevado. */
.abas-espaco { height: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* Página que já tem chrome próprio no rodapé (a Conexão tem os controles de
   zoom e o minimapa) dispensa a ilha: quem navega lá volta pela seta. */
body.sem-abas .app-abas, body.sem-abas .abas-espaco { display: none; }

/* Sub-abas do Clube: Membros / Árvore / Conexão. Três vistas de uma coisa só,
   as pessoas do clube. Segmented control simples, no tom do sistema. */
.r-subabas { display: flex; gap: 6px; margin: 4px 0 18px; }
.r-subaba {
  flex: 1; text-align: center; padding: 9px 8px;
  border-radius: var(--raio-ctl, 12px);
  font-family: var(--texto, 'DM Sans', sans-serif); font-weight: 600;
  font-size: 14px; text-decoration: none;
  color: var(--soft, #4a4a45); background: var(--card, #efefe9);
}
.r-subaba.on { color: var(--bg, #f5f5f0); background: var(--ink, #1a1a1a); font-weight: 700; }

/* As sub-abas em vidro, no mesmo sistema da ilha. O anel e o brilho vêm de
   box-shadow (inset), e não de border, pra a pílula não crescer 1px e o
   segmented control não pular entre o fallback sólido e o vidro. A ativa segue
   grafite, só translúcida, porque ela é a seleção e precisa continuar forte. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .r-subaba {
    background: color-mix(in srgb, var(--card, #efefe9) 55%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .r-subaba.on {
    background: color-mix(in srgb, var(--ink, #1a1a1a) 82%, transparent);
    box-shadow:
      0 4px 14px rgba(20, 20, 18, 0.22),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}