/* FONTES SERVIDAS PELO PROPRIO APP (23/09/2026). Antes vinham de um CSS do
   Google Fonts que travava a montagem de toda pagina (o porque esta' no
   base.html, junto do <link rel="preload">). Licenca: SIL Open Font License
   1.1, em app/static/fontes/OFL-*.txt. Blocos copiados da resposta do Google
   Fonts (css2), so' latino e latino estendido — que cobrem o portugues —, com
   a url trocada pelo arquivo local. A Inter continua porque o card de
   compartilhar subidas desenha nela, no canvas. */
/* Google Sans — latin-ext */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fontes/google-sans-latin-ext.woff2?v=9d7e92762f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Google Sans — latin */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fontes/google-sans-latin.woff2?v=9223214a77) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Google Sans — latin-ext */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fontes/google-sans-latin-ext.woff2?v=9d7e92762f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Google Sans — latin */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fontes/google-sans-latin.woff2?v=9223214a77) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Google Sans — latin-ext */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fontes/google-sans-latin-ext.woff2?v=9d7e92762f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Google Sans — latin */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fontes/google-sans-latin.woff2?v=9223214a77) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fontes/inter-latin-ext.woff2?v=cf3eb50fb2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fontes/inter-latin.woff2?v=f11d729bb0) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fontes/inter-latin-ext.woff2?v=cf3eb50fb2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fontes/inter-latin.woff2?v=f11d729bb0) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fontes/inter-latin-ext.woff2?v=cf3eb50fb2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fontes/inter-latin.woff2?v=f11d729bb0) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #131314;
  --bg-elevado: #1b1c1d;
  --bg-card: #1e1f20;
  --bg-card-hover: #252628;
  --bg-input: #1b1c1d;
  --texto: #e8eaed;
  --texto-sub: #9aa0a6;
  --linha: #333537;
  --linha-forte: #46494c;
  --laranja: #ff5a1e;
  --laranja-fraco: rgba(255, 90, 30, 0.15);
  --azul: #3987e5;
  --verde: #22c55e;
  --erro: #f87171;
  /* Paleta categórica — MESMOS valores de CATEGORICAS em charts.js, na
     mesma ordem. Ficam aqui para que elementos de HTML/CSS (faixas de
     card, selos) usem exatamente as cores dos gráficos; se um dia mudarem,
     têm que mudar nos dois lugares juntos. Validadas para daltonismo e
     contraste contra a superfície de card de cada tema. */
  --cat-1: #3987e5;
  --cat-2: #d95926;
  --cat-3: #199e70;
  --cat-4: #c98500;
  --cat-5: #d55181;
  --cat-6: #008300;
  --cat-7: #9085e9;
  --cat-8: #e66767;
  --raio: 1rem;
  --raio-peq: 0.75rem;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.35), 0 12px 32px -16px rgba(0, 0, 0, 0.5);
  --sombra-suave: none;
  --fonte-titulo: "Google Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-texto: "Google Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Usados pelo CSS desde antes e NUNCA definidos: o topo fixo ficava sem
     fundo (a pagina rolava por baixo dele), o modal sem veu escurecendo o
     que ficou atras, e os botoes de filtro sem cor de texto propria. */
  --topo-fundo: rgba(19, 19, 20, 0.86);
  --veu-modal: rgba(0, 0, 0, 0.6);
  --texto-secundario: var(--texto-sub);
  --texto-sec: var(--texto-sub);
  --texto-primario: var(--texto);
}

/* Tema claro — alternado por [data-theme="light"] no <html>, escolhido
   pelo botão de tema em base.html e persistido em localStorage. Os
   nomes das variáveis são os MESMOS de :root acima; como todo o resto
   da folha de estilo (e os templates, depois da varredura que trocou
   cor fixa por var(--...)) já lê essas variáveis, só redefini-las aqui
   já propaga o tema pro app inteiro sem duplicar regra nenhuma. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f8fafd;
  --bg-elevado: #f0f2f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f7fa;
  --bg-input: #ffffff;
  --texto: #1f1f1f;
  --texto-sub: #5f6368;
  --linha: #e0e2e6;
  --linha-forte: #c4c7cc;
  --laranja: #e04f18;
  --laranja-fraco: rgba(224, 79, 24, 0.12);
  --azul: #2a6fc4;
  --verde: #16a34a;
  --erro: #dc2626;
  /* Mesmas oito posições da paleta categórica, nos tons do tema claro
     (ver CATEGORICAS em charts.js — os dois precisam bater). */
  --cat-1: #2a78d6;
  --cat-2: #eb6834;
  --cat-3: #1baf7a;
  --cat-4: #eda100;
  --cat-5: #e87ba4;
  --cat-6: #008300;
  --cat-7: #4a3aa7;
  --cat-8: #e34948;
  --sombra: 0 1px 3px rgba(31, 31, 31, 0.08), 0 12px 32px -16px rgba(31, 31, 31, 0.18);
  --sombra-suave: none;
  --topo-fundo: rgba(248, 250, 253, 0.88);
  --veu-modal: rgba(32, 33, 36, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--fonte-titulo); letter-spacing: 0; }
h1 { font-size: 1.75rem; font-weight: 500; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; font-weight: 500; }
h3, h4 { font-weight: 500; }

a { color: var(--azul); }

::selection { background: var(--laranja-fraco); color: var(--texto); }

:focus-visible {
  outline: 2px solid var(--laranja);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden],
.topo[hidden] {
  display: none !important;
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--linha);
  position: sticky;
  top: 0;
  background: var(--topo-fundo);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 40;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--texto);
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.marca img { border-radius: 7px; display: block; box-shadow: var(--sombra-suave); }

nav { display: flex; align-items: center; gap: 0.75rem; }
.nav-publica { position: relative; }

.usuario { color: var(--texto-sub); font-size: 0.9rem; margin-right: 0.5rem; }

/* ---- layout: barra lateral (desktop) + conteúdo ---- */
.corpo-shell { display: flex; align-items: flex-start; }
.corpo-shell > main { flex: 1; min-width: 0; }

/* ---- menu principal (área logada) ---- */
.nav-principal {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}
.nav-grupo-titulo {
  display: none;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texto-sub);
  opacity: 0.75;
  padding: 1rem 0.75rem 0.35rem;
}
.link-nav {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--raio-peq);
  color: var(--texto-sub);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.link-nav:hover { background: var(--bg-card); color: var(--texto); }
.link-nav.ativo { background: var(--laranja-fraco); color: var(--texto); font-weight: 600; }
.link-nav-icone { font-size: 1.02rem; line-height: 1; opacity: 0.9; }
.nav-separador { width: 1px; height: 1.5rem; background: var(--linha); margin: 0 0.25rem; }
.nav-usuario { color: var(--texto-sub); font-size: 0.85rem; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; }
.nav-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.link-sair { color: var(--erro); }

.botao-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-peq);
  border: 1px solid var(--linha);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.botao-menu span {
  display: block;
  height: 2px;
  width: 20px;
  margin: 0 auto;
  background: var(--texto);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.botao-menu.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.botao-menu.aberto span:nth-child(2) { opacity: 0; }
.botao-menu.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .topo { padding: 0.75rem 1rem; }
  .botao-menu { display: flex; }
  .nav-principal {
    position: fixed;
    top: 61px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg);
    border-bottom: 1px solid var(--linha);
    padding: 0.5rem 1rem 1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    gap: 0;
    z-index: 39;
  }
  .nav-principal.aberto { max-height: 80vh; opacity: 1; overflow-y: auto; }
  .link-nav { padding: 0.85rem 0.5rem; font-size: 1rem; border-bottom: 1px solid var(--linha); border-radius: 0; }
  .link-nav.ativo { border-left: 3px solid var(--laranja); padding-left: calc(0.5rem - 3px); background: transparent; }
  .nav-separador { display: none; }
  .nav-usuario { padding: 0.75rem 0.5rem; display: block; border-bottom: 1px solid var(--linha); }
  form:has(> .link-sair) { display: block; }
  main { padding: 1.5rem 1rem; }
}

main { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.5rem; }

@media (min-width: 769px) {
  .nav-principal {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 240px;
    flex-shrink: 0;
    gap: 0.1rem;
    padding: 1rem 0.75rem 1.25rem;
    border-right: 1px solid var(--linha);
    position: sticky;
    top: 61px;
    align-self: flex-start;
    height: calc(100vh - 61px);
    overflow-y: auto;
  }
  .nav-grupo-titulo { display: block; }
  .nav-grupo-titulo:first-child { padding-top: 0.15rem; }
  .link-nav.ativo { border-left: 3px solid var(--laranja); padding-left: calc(0.75rem - 3px); }
  .nav-separador { display: none; }
  .nav-usuario {
    display: block; margin-top: 0.75rem; padding: 0.9rem 0.75rem 0.3rem;
    border-top: 1px solid var(--linha);
  }
  main { max-width: 1240px; margin: 0; padding: 2.5rem 2rem; }
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--raio-peq);
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  text-decoration: none;
  background: var(--bg-card);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease, background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.botao:hover { background: var(--bg-card-hover); border-color: var(--linha-forte); }
.botao:active { transform: translateY(1px); }

.botao-primario {
  background: linear-gradient(135deg, #ff6a30, var(--laranja));
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 18px -6px rgba(255, 90, 30, 0.55);
}
.botao-primario:hover { box-shadow: 0 8px 22px -6px rgba(255, 90, 30, 0.65); filter: brightness(1.04); }

.botao-grande { padding: 0.8rem 1.6rem; font-size: 1.05rem; border-radius: var(--raio-peq); }

.hero { text-align: center; padding: 4rem 0 3rem; }
.hero h1 { font-size: 2.4rem; max-width: 720px; margin: 0 auto 1rem; line-height: 1.15; }
.hero p { color: var(--texto-sub); max-width: 560px; margin: 0 auto 2rem; line-height: 1.65; font-size: 1.02rem; }
.cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.form-card {
  max-width: 400px;
  margin: 2rem auto;
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 2.25rem;
  box-shadow: var(--sombra);
}
.form-card h1 { margin-top: 0; font-size: 1.5rem; }
.sub { color: var(--texto-sub); font-size: 0.9rem; }

form label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--texto-sub);
}
form input, form select {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--raio-peq);
  border: 1px solid var(--linha);
  background: var(--bg-input);
  color: var(--texto);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
form input:focus, form select:focus {
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px var(--laranja-fraco);
  outline: none;
}
form button { width: 100%; margin-top: 0.5rem; }

.erro { color: var(--erro); font-size: 0.9rem; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--sombra-suave);
}
.card-ok { border-color: var(--verde); }
.card-alerta { border-color: #eab308; }

.grade-dicas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.grade-dicas .card { margin-bottom: 0; }
.card h2 { margin-top: 0; }

.barra-progresso {
  width: 100%;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--bg-input);
  overflow: hidden;
  margin: 0.75rem 0 0.4rem;
}
.barra-progresso-preenchida {
  height: 100%;
  background: linear-gradient(90deg, var(--laranja), #ff8a4d);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.barra-progresso.indeterminada .barra-progresso-preenchida {
  width: 35% !important;
  animation: varre 1.4s ease-in-out infinite;
}
@keyframes varre {
  0%   { margin-left: 0%; }
  50%  { margin-left: 65%; }
  100% { margin-left: 0%; }
}
.progresso-legenda {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--texto-sub);
}

.grade-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.metrica {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 122px;
  box-sizing: border-box;
  box-shadow: var(--sombra-suave);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.metrica:hover { border-color: var(--linha-forte); transform: translateY(-1px); }
.metrica .rotulo { 
  color: var(--texto-sub); 
  font-size: 0.82rem; 
  font-weight: 500; 
  line-height: 1.25;
  display: block;
}
/* O VALOR fica em tinta neutra de propósito. Colorir o número faria a cor
   parecer que significa alguma coisa ("vermelho = ruim?") quando ela é só
   enfeite — a cor que carrega sentido no app é a das faixas/estados. */
.metrica .valor { 
  font-family: var(--fonte-titulo); 
  font-size: 1.65rem; 
  font-weight: 800; 
  letter-spacing: -0.01em; 
  margin: 0.35rem 0 0.2rem;
  line-height: 1.2;
}
.metrica .detalhe { 
  color: var(--texto-sub); 
  font-size: 0.8rem; 
  margin-top: auto;
  line-height: 1.2;
  display: block;
}

/* Faixa de cor no topo de cada card de métrica: quebra o bloco cinzento de
   cards iguais e ajuda a achar de novo o card que você estava olhando. É
   DECORAÇÃO — percorre a mesma paleta categórica dos gráficos, mas em
   posição (topo do card) e espessura que nunca competem com uma cor que
   esteja codificando dado dentro do card. */
.metrica {
  position: relative;
  overflow: hidden;
}
.metrica::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--acento-metrica, var(--azul));
  opacity: 0.9;
}
.grade-metricas .metrica:nth-child(8n + 1) { --acento-metrica: var(--cat-1); }
.grade-metricas .metrica:nth-child(8n + 2) { --acento-metrica: var(--cat-2); }
.grade-metricas .metrica:nth-child(8n + 3) { --acento-metrica: var(--cat-3); }
.grade-metricas .metrica:nth-child(8n + 4) { --acento-metrica: var(--cat-4); }
.grade-metricas .metrica:nth-child(8n + 5) { --acento-metrica: var(--cat-5); }
.grade-metricas .metrica:nth-child(8n + 6) { --acento-metrica: var(--cat-6); }
.grade-metricas .metrica:nth-child(8n + 7) { --acento-metrica: var(--cat-7); }
.grade-metricas .metrica:nth-child(8n + 8) { --acento-metrica: var(--cat-8); }

.grade-trofeus { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.trofeu-card { text-align: center; padding: 1.25rem 1rem; }
.trofeu-icone { font-size: 2.4rem; line-height: 1; margin-bottom: 0.5rem; }
.trofeu-nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1rem; margin: 0 0 0.3rem; }
.trofeu-desc { margin: 0; min-height: 2.4em; }
.trofeu-status { color: #eab308; font-weight: 700; margin: 0.5rem 0 0; }
.trofeu-conquistado { border-color: #eab308; box-shadow: 0 0 0 1px #eab30833, var(--sombra-suave); }
.trofeu-travado { opacity: 0.68; }
.trofeu-travado .trofeu-icone { filter: grayscale(1); }

.hidden { display: none !important; }

.modal-fundo {
  position: fixed; inset: 0;
  background: var(--veu-modal);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  z-index: 50;
}
.modal-caixa {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.5rem;
  max-width: 360px;
  text-align: center;
  box-shadow: var(--sombra);
}
.modal-caixa p { line-height: 1.6; margin-top: 0; }
.modal-caixa-grande {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.5rem;
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--sombra);
  text-align: left;
}

.grafico-card {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--sombra-suave);
}
.grafico-card h2 { margin: 0 0 0.25rem; font-size: 1.02rem; }
.grafico-card .sub { margin: 0 0 1rem; }
.grafico-caixa { position: relative; height: 260px; width: 100%; }
.grafico-stream-caixa { position: relative; height: 180px; width: 100%; }
.filtros-corredor, .filtros-densidade, .filtros-ipg, .filtros-vam, .filtros-zonas-fc, .filtros-radar, .filtros-dist-cat, .filtros-durabilidade, .filtros-protocolo-cp, .filtros-watts-fc, .filtros-evolucao, .filtros-nivel, .filtros-vo2, .filtros-janela-grade, .filtros-janela-peso, .filtros-peso-metrica {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.btn-filtro-corredor, .btn-filtro-densidade, .btn-filtro-ipg, .btn-filtro-vam, .btn-filtro-zonas-fc, .btn-filtro-radar, .btn-filtro-dist-cat, .btn-filtro-durabilidade, .btn-filtro-protocolo-cp, .btn-filtro-watts-fc, .btn-filtro-evolucao, .btn-filtro-nivel, .btn-filtro-vo2, .btn-filtro-janela, .btn-filtro-forma-janela, .btn-filtro-peso, .btn-filtro-metrica {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  color: var(--texto-secundario);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-filtro-corredor:hover, .btn-filtro-densidade:hover, .btn-filtro-ipg:hover, .btn-filtro-vam:hover, .btn-filtro-zonas-fc:hover, .btn-filtro-radar:hover, .btn-filtro-dist-cat:hover, .btn-filtro-durabilidade:hover, .btn-filtro-protocolo-cp:hover, .btn-filtro-watts-fc:hover, .btn-filtro-evolucao:hover, .btn-filtro-nivel:hover, .btn-filtro-vo2:hover, .btn-filtro-janela:hover, .btn-filtro-forma-janela:hover, .btn-filtro-peso:hover, .btn-filtro-metrica:hover {
  background: var(--bg-elevado);
  color: var(--texto-primario);
  border-color: var(--linha);
}
.btn-filtro-corredor.ativo, .btn-filtro-densidade.ativo, .btn-filtro-ipg.ativo, .btn-filtro-vam.ativo, .btn-filtro-zonas-fc.ativo, .btn-filtro-radar.ativo, .btn-filtro-dist-cat.ativo, .btn-filtro-durabilidade.ativo, .btn-filtro-protocolo-cp.ativo, .btn-filtro-watts-fc.ativo, .btn-filtro-evolucao.ativo, .btn-filtro-nivel.ativo, .btn-filtro-vo2.ativo, .btn-filtro-janela.ativo, .btn-filtro-forma-janela.ativo, .btn-filtro-peso.ativo, .btn-filtro-metrica.ativo {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}
.badge-stat-grade {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  color: var(--texto-sub);
}
.badge-stat-grade b {
  color: var(--texto);
  font-weight: 600;
}


.btn-zoom {
  background: none;
  border: none;
  color: var(--texto-secundario);
  font-size: 1.2rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
}
.btn-zoom:hover {
  background: rgba(185, 196, 217, 0.1);
  color: var(--texto-primario);
}
.btn-zoom:active { transform: scale(0.95); }
.grafico-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.grafico-grade .grafico-card { margin-bottom: 0; }

@media (max-width: 600px) {
  .hero h1 { font-size: 1.7rem; }
  .hero { padding: 2.5rem 0; }
  .cta { flex-direction: column; align-items: stretch; }
  .cta .botao { text-align: center; }
  .grade-metricas { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; }
  .metrica { padding: 1rem; }
  .metrica .valor { font-size: 1.4rem; }
  .grafico-caixa, .grafico-container { height: 250px !important; min-height: 240px !important; }
  .grafico-stream-caixa { height: 215px !important; min-height: 205px !important; }
  .form-card { margin: 1rem auto; padding: 1.5rem; }
  h1 { font-size: 1.45rem; }
  .grafico-grade { grid-template-columns: 1fr; }
  /* Responsividade em forms: labels flex ficam empilhadas em telas pequenas */
  form label { display: block; }
  form input, form select { max-width: 100%; }
}

@media (max-width: 420px) {
  main { padding: 1.5rem 0.75rem; }
  .card { padding: 1.25rem; margin-bottom: 1rem; }
  .botao { padding: 0.5rem 0.9rem; font-size: 0.9rem; }
  .botao-grande { padding: 0.7rem 1.3rem; font-size: 1rem; }
}

.tabela-scroll { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; white-space: nowrap; }
.tabela th, .tabela td { padding: 0.75rem 1.1rem; text-align: left; }
.tabela thead th { color: var(--texto-sub); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--linha); background: var(--bg-elevado); }
.tabela tbody tr:not(:last-child) td { border-bottom: 1px solid var(--linha); }
.tabela tbody tr { transition: background-color 0.1s ease; }
.tabela tbody tr:hover { background: var(--bg-card-hover); }

.pilula {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--laranja-fraco);
  color: var(--laranja);
  font-weight: 600;
  font-size: 0.83rem;
}
.pilula-sem-fc { background: var(--linha); color: var(--texto-sub); }

.seletor-periodo { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.seletor-periodo .pilula { background: var(--bg-card); color: var(--texto-sub); border: 1px solid var(--linha); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
.seletor-periodo .pilula:hover { color: var(--texto); border-color: var(--linha-forte); }
.seletor-periodo .pilula-ativa { background: var(--laranja-fraco); color: var(--laranja); border-color: transparent; }

.delta-pos { color: var(--verde); }
.delta-neg { color: var(--erro); }

.calendario-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.75rem; margin: 1rem 0; }
.dia-card { background: var(--bg-card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.85rem; border-top: 3px solid var(--linha); display: flex; flex-direction: column; gap: 0.25rem; min-height: 185px; box-shadow: var(--sombra-suave); text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.dia-card:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--linha-forte); }
.dia-nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; }
.dia-data { color: var(--texto-sub); font-weight: 500; font-size: 0.75rem; padding: 0.1rem 0.35rem; border-radius: 4px; background: var(--bg-input); border: 1px solid var(--linha); }
.dia-prio { font-size: 0.75rem; font-weight: 600; color: var(--texto-sub); display: inline-flex; align-items: center; gap: 0.25rem; }
.dia-treino { font-weight: 700; font-size: 0.88rem; line-height: 1.3; color: var(--texto); margin: 0.1rem 0 0.2rem; }
.dia-aviso { color: #eda100; font-size: 0.72rem; font-weight: 600; }
.dia-meta { margin: 0.15rem 0; padding: 0.35rem 0.45rem; border-radius: 6px; background: var(--bg-input); font-size: 0.76rem; color: var(--texto-sub); display: flex; flex-direction: column; gap: 0.15rem; }
.dia-pot { font-weight: 600; color: var(--texto); }
.dia-zona { font-size: 0.76rem; color: var(--texto-sub); }
.dia-status { font-size: 0.78rem; font-weight: 700; margin-top: auto; padding-top: 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; gap: 0.3rem; }
.dia-feito { font-size: 0.72rem; color: var(--verde); margin-top: 0.15rem; line-height: 1.25; }
/* O dia ja' pedalado (`feito_do_dia`): a categoria em destaque, o tempo exato
   em negrito. A cor de cada um so' muda quando difere do previsto. */
.dia-feito-cat { font-weight: 700; font-size: 0.8rem; color: var(--texto); line-height: 1.25; }
.dia-feito-tempo b { color: var(--texto); }
.dia-feito-incerta { font-weight: 500; color: var(--texto-sub); }
/* O aviso de que o pedal de HOJE deve encolher o treino de AMANHA. Amarelo
   como o "Fora do plano" do mesmo card: os dois dizem "isto saiu do trilho",
   e nenhum dos dois e' erro. Quebra linha de proposito — o nome do treino
   novo ("Recuperacao ativa (pos-longao)") nao cabe numa linha de card. */
.dia-previsao { font-size: 0.72rem; color: #eab308; margin-top: 0.3rem;
  line-height: 1.25; white-space: normal; word-break: break-word; }
@media (max-width: 900px) {
  .calendario-grade { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* ---- Painel executivo de volume e aderência semanal ---- */
.calendario-painel-exec { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.85rem; margin-top: 1rem; }
.card-exec { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 1.15rem 1.25rem; border-radius: var(--raio); background: var(--bg-card); border: 1px solid var(--linha); box-shadow: var(--sombra-suave); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.card-exec:hover { box-shadow: var(--sombra); border-color: var(--linha-forte); }
.exec-topo { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.35rem; }
.exec-rotulo { font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-sub); display: flex; align-items: center; gap: 0.35rem; }
.exec-badge { font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.exec-valor-box { display: flex; align-items: baseline; gap: 0.45rem; margin: 0.35rem 0 0.15rem; }
.exec-valor { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.85rem; line-height: 1; }
.exec-sub { font-size: 0.82rem; color: var(--texto-sub); }
.exec-rodape { margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid var(--linha); }
.exec-barra-trilha { width: 100%; height: 6px; background: var(--bg-input); border-radius: 999px; overflow: hidden; margin: 0.35rem 0; }
.exec-barra-progresso { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.exec-aviso-perdidos { margin-top: 0.5rem; padding: 0.45rem 0.65rem; border-radius: 6px; background: rgba(234, 179, 8, 0.08); border: 1px solid rgba(234, 179, 8, 0.25); font-size: 0.76rem; line-height: 1.35; color: var(--texto); }

/* ---- Detalhes do plano completo ---- */
.details-plano { margin-top: 1.5rem; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--bg-card); }
.details-plano summary { cursor: pointer; padding: 0.2rem 0; font-size: 0.95rem; font-weight: 700; color: var(--texto); display: flex; align-items: center; justify-content: space-between; }

/* ---- Cabeçalho moderno do gráfico de aderência ---- */
.grafico-cabecalho-aderencia { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; }

.cal-mes-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.45rem; margin-top: 0.85rem; }
.cal-wd { text-align: center; font-family: var(--fonte-titulo); font-weight: 700; font-size: 0.72rem; color: var(--texto-sub); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0; background: var(--bg-elevado); border-radius: 4px; }
.cal-cel { background: var(--bg-card); border: 1px solid var(--linha); border-radius: 0.6rem; min-height: 82px; padding: 0.45rem; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.cal-cel:not(.vazia):hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--linha-forte); }
.cal-cel.vazia { background: transparent; border: none; pointer-events: none; }
.cal-cel.hoje { border: 2px solid var(--azul, #3987e5); background: rgba(57, 135, 229, 0.04); }
.cal-cel.futuro { border-style: dashed; background: var(--bg-elevado); }
.cal-topo { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.15rem; }
.cal-num { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; line-height: 1; color: var(--texto); }
.cal-selo { font-size: 0.88rem; font-weight: 800; line-height: 1; }
.cal-tag { font-size: 0.65rem; font-weight: 600; border-radius: 4px; padding: 0.15rem 0.35rem; margin-top: 0.2rem; color: #0a0e16; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.cal-sug { font-size: 0.66rem; color: var(--texto-sub); margin-top: 0.2rem; font-weight: 500; line-height: 1.25; }
.cal-rest { font-size: 0.66rem; color: var(--texto-sub); margin-top: 0.25rem; font-weight: 500; }
.cal-hoje-tag { font-size: 0.6rem; font-weight: 800; color: var(--azul, #3987e5); margin-top: auto; padding-top: 0.25rem; letter-spacing: 0.04em; }
.cal-legenda { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }
@media (max-width: 700px) {
  .cal-mes-grid { grid-template-columns: repeat(7, minmax(32px, 1fr)); gap: 0.2rem; }
  .cal-cel { min-height: 52px; padding: 0.2rem; }
  .cal-tag, .cal-sug, .cal-rest { display: none; }
}

.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }

/* ---- Termômetro único do coach (macro _termometro.html) ---- */
.ot-card { background: var(--bg-card, var(--card)); border: 1px solid var(--linha); border-radius: 12px;
           padding: 1.15rem 1.35rem; margin: 1.15rem 0; box-shadow: 0 4px 18px rgba(0,0,0,0.08); transition: border-color 0.2s; }
.ot-top { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ot-head { font-weight: 800; font-size: 1.12rem; color: var(--texto); display: flex; align-items: center; gap: 0.4rem; }
.ot-tag { border-radius: 999px; padding: 0.2rem 0.75rem; font-weight: 800; font-size: 0.92rem; white-space: nowrap; }
.ot-escala { margin: 1rem 0 0.35rem; position: relative; }
/* A barra é um gradiente contínuo verde→vermelho porque a escala É contínua:
   marcar faixas discretas sugeriria um degrau que o número não tem. */
.ot-escala-barra { height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #22c55e 0%, #84cc16 25%, #eab308 50%, #f97316 75%, #ef4444 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.05); }
.ot-escala-marca { position: relative; top: -6px; font-size: 0.95rem; color: var(--texto); line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.ot-escala-lbl { display: flex; justify-content: space-between; font-size: 0.74rem; font-weight: 600; color: var(--texto-fraco); margin-top: 0.35rem; }
.ot-acao { margin: 0.85rem 0 0.4rem; font-size: 0.96rem; font-weight: 600; line-height: 1.5; color: var(--texto); }
.ot-ctx { margin: 0.5rem 0 0; font-size: 0.8rem; }
.ot-sinais { margin-top: 0.9rem; border-top: 1px solid var(--linha); padding-top: 0.7rem; }
.ot-sinais > summary { cursor: pointer; color: var(--texto-fraco); font-size: 0.85rem; }
.ot-sinal { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.55rem; }
.ot-sinal-barra { flex: 0 0 84px; height: 6px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.ot-sinal-fill { height: 100%; border-radius: 999px; }
.ot-sinal-txt { font-size: 0.82rem; color: var(--texto-fraco); }
@media (max-width: 640px) {
  .ot-sinal { flex-wrap: wrap; gap: 0.3rem; }
  .ot-sinal-barra { flex: 0 0 100%; }
}

/* ---- Progresso da Meta Semanal no Card de Desgaste ---- */
.ot-meta-bloco { margin-top: 0.95rem; padding-top: 0.85rem; border-top: 1px solid var(--linha); }
.ot-meta-topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.45rem; }
.ot-meta-valores { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.ot-meta-titulo { font-weight: 700; font-size: 0.95rem; color: var(--texto); }
.ot-meta-num { font-size: 1.15rem; font-weight: 800; color: var(--texto); letter-spacing: -0.02em; }
.ot-meta-unid { font-size: 0.8rem; font-weight: 500; color: var(--texto-sub); }
.ot-meta-trilha { width: 100%; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08);
  overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.05); position: relative; }
.ot-meta-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.ot-meta-rodape { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; font-size: 0.8rem; color: var(--texto-sub); }

/* ---- Painel de procedência: "de onde veio este número" ----
   O texto que explicava a origem de cada indicador vivia solto no cartão e
   poluía a leitura do número, que é o que a pessoa foi ali ver. Continua
   inteiro, a um clique. */
.fonte-dados { margin-top: 0.9rem; border-top: 1px solid var(--linha); padding-top: 0.6rem; }
.fonte-dados > summary {
  cursor: pointer; color: var(--texto-fraco); font-size: 0.82rem;
  list-style: none; display: flex; align-items: center; gap: 0.4rem;
}
.fonte-dados > summary::-webkit-details-marker { display: none; }
.fonte-dados > summary::before { content: "▸"; font-size: 0.7rem; transition: transform 0.15s; }
.fonte-dados[open] > summary::before { transform: rotate(90deg); }
.fonte-dados > summary:hover { color: var(--texto); }
.fonte-corpo { margin-top: 0.6rem; font-size: 0.8rem; color: var(--texto-fraco); line-height: 1.5; }
.fonte-corpo p { margin: 0 0 0.55rem; }
.fonte-corpo p:last-child { margin-bottom: 0; }
.fonte-corpo b { color: var(--texto); }
.fonte-origem {
  margin: 0 0 0.6rem; padding: 0.5rem 0.6rem; border-radius: 0.45rem;
  background: var(--linha); font-size: 0.78rem;
}
.fonte-lista { margin: 0.2rem 0 0.6rem; padding-left: 1.05rem; }
.fonte-lista li { margin-bottom: 0.25rem; }

/* ---- Ajuste manual da semana (Calendário) ---- */
.ajuste-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.ajuste-dia { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ajuste-dia select { width: 100%; padding: 0.4rem 0.3rem; border-radius: 0.5rem; font-size: 0.8rem;
  border: 1px solid var(--linha); background: var(--bg-input); color: var(--texto); }
@media (max-width: 860px) { .ajuste-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .ajuste-grade { grid-template-columns: 1fr; } }

/* ---- Tabela do plano do coach ----
   A .tabela padrão é nowrap porque a maioria das tabelas do app é de números
   curtos. Esta é de TEXTO: protocolo de treino e nutrição são frases, e com
   nowrap elas simplesmente saíam da tela — a coluna de nutrição não aparecia
   nunca. Aqui o texto quebra e cada coluna ganha uma largura proporcional ao
   que carrega. */
.tabela-plano { white-space: normal; font-size: 0.85rem; min-width: 780px; }
.tabela-plano td, .tabela-plano th { padding: 0.7rem 0.8rem; vertical-align: top; }
.tabela-plano th:nth-child(1), .tabela-plano td:nth-child(1) { width: 8%; }
.tabela-plano th:nth-child(2), .tabela-plano td:nth-child(2) { width: 9%; white-space: nowrap; }
.tabela-plano th:nth-child(3), .tabela-plano td:nth-child(3) { width: 21%; }
.tabela-plano th:nth-child(4), .tabela-plano td:nth-child(4) { width: 40%; }
.tabela-plano th:nth-child(5), .tabela-plano td:nth-child(5) { width: 22%; }
@media (max-width: 720px) {
  /* No celular a tabela vira uma lista de cartões: cinco colunas de texto em
     390px de largura não são legíveis em rolagem horizontal nenhuma. */
  .tabela-plano, .tabela-plano tbody, .tabela-plano tr, .tabela-plano td { display: block; width: 100%; min-width: 0; }
  /* As larguras percentuais por coluna têm especificidade maior que a regra
     acima (`td:nth-child(n)` vence `td`), e media query não muda isso. Sem
     anulá-las explicitamente, o cartão do celular herdava "21% de 390px" e o
     texto quebrava uma palavra por linha. */
  .tabela-plano td:nth-child(1), .tabela-plano td:nth-child(2),
  .tabela-plano td:nth-child(3), .tabela-plano td:nth-child(4),
  .tabela-plano td:nth-child(5) { width: auto; white-space: normal; }
  .tabela-plano thead { display: none; }
  .tabela-plano tr { border: 1px solid var(--linha); border-radius: 0.7rem; margin-bottom: 0.7rem; padding: 0.5rem 0.2rem; }
  .tabela-plano td { border: none !important; padding: 0.3rem 0.8rem; }
  .tabela-plano td::before { content: attr(data-rot); display: block; font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-sub); margin-bottom: 0.15rem; }
}

/* Barras de tempo em zona (tela do dia). Nome à esquerda, trilho no meio,
   número à direita: a leitura vertical dos nomes é o que deixa comparar as
   zonas de relance, que é o ponto do gráfico. */
.barra-zona { display: grid; grid-template-columns: 9.5rem 1fr 7.5rem; align-items: center;
              gap: 0.6rem; margin: 0.3rem 0; font-size: 0.85rem; }
.barra-zona-nome { color: var(--texto-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-zona-trilho { background: var(--bg-elevado); border-radius: 999px; height: 0.8rem;
                     overflow: hidden; border: 1px solid var(--linha); }
.barra-zona-preenchida { display: block; height: 100%; border-radius: 999px; }
.barra-zona-valor { text-align: right; color: var(--texto-sub); white-space: nowrap; }

@media (max-width: 620px) {
  /* Em tela estreita a grade de três colunas espreme o trilho até ele não
     dizer mais nada; empilhar mantém a barra legível. */
  .barra-zona { grid-template-columns: 1fr auto; grid-template-areas: "nome valor" "trilho trilho"; }
  .barra-zona-nome { grid-area: nome; }
  .barra-zona-valor { grid-area: valor; }
  .barra-zona-trilho { grid-area: trilho; }
}

/* Dias do plano viraram links. Herdar a cor evita o azul de link sobre os
   cartões coloridos, e o realce no hover é o que sinaliza que dá para clicar
   — sem ele o cartão continua parecendo um bloco morto. */
a.dia-card, a.cal-cel { color: inherit; text-decoration: none; cursor: pointer;
                         transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
a.dia-card:hover, a.cal-cel:hover { border-color: var(--azul, #3987e5);
                                     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
a.dia-card:hover { transform: translateY(-1px); }
a.dia-card:focus-visible, a.cal-cel:focus-visible { outline: 2px solid var(--azul, #3987e5);
                                                     outline-offset: 2px; }

/* ---- Tooltips e Mini Termômetros dos Indicadores ---- */
.rotulo-com-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  position: relative;
}
.icone-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--linha, #334155);
  color: var(--texto-sub, #94a3b8);
  font-size: 0.68rem;
  font-weight: 800;
  font-family: inherit;
  cursor: help;
  position: relative;
  transition: all 0.2s ease;
  user-select: none;
  flex-shrink: 0;
  z-index: 20;
}
.icone-info:hover {
  background: var(--azul, #3987e5);
  color: #ffffff;
  z-index: 99999;
}
.icone-info[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  right: -6px;
  left: auto;
  transform: none;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 0.55rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid #475569;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
  white-space: normal;
  width: 230px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 999999;
  text-align: left;
}
.icone-info[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  right: 3px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #475569 transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 999999;
}
.icone-info:hover::after,
.icone-info:hover::before {
  opacity: 1;
  visibility: visible;
}
.metrica, .metricas {
  overflow: visible !important;
}
.mini-termometro {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-input, #1e293b);
  border: 1px solid var(--linha, #334155);
  margin: 0.25rem 0 0.15rem;
  overflow: hidden;
  position: relative;
}
.mini-termometro-barra {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ---------------------------------------------------------------
   RODAPÉ LEGAL + PÁGINAS DE TEXTO + MARCA DO STRAVA
   Exigências da API Policy / Brand Guidelines do Strava:
   privacidade e suporte alcançáveis de qualquer tela (§7.3, §2.4);
   atribuição "Powered by Strava" menos destacada que o nome do app;
   links de volta ao Strava em negrito/laranja #FC5200 (Brand §3).
   --------------------------------------------------------------- */
.rodape-legal {
  margin-top: 3rem;
  padding: 1.5rem 0 0.5rem;
  border-top: 1px solid var(--linha);
  text-align: center;
  color: var(--texto-sub);
  font-size: 0.85rem;
}
.rodape-legal nav a { color: var(--texto-sub); text-decoration: none; }
.rodape-legal nav a:hover { text-decoration: underline; }
.rodape-strava { margin: 0.75rem 0 0.5rem; opacity: 0.85; }
.rodape-strava img { height: 20px; width: auto; vertical-align: middle; }

/* O logo oficial "Powered by Strava" existe em duas variantes porque a
   laranja tem as palavras "POWERED BY" em PRETO — ilegível no tema escuro,
   que é o padrão do app. Aqui a escolha é por CSS; a imagem em si nunca é
   alterada (Brand Guidelines, seção 2: nunca modificar os logos). O tema
   claro marca data-theme="light" na raiz; sem o atributo, o tema é escuro. */
.rodape-strava .strava-logo-escuro { display: inline-block; }
.rodape-strava .strava-logo-claro { display: none; }
[data-theme="light"] .rodape-strava .strava-logo-escuro { display: none; }
[data-theme="light"] .rodape-strava .strava-logo-claro { display: inline-block; }
.rodape-legal p { margin: 0.25rem 0 0; font-size: 0.78rem; opacity: 0.8; }

/* Link de volta para a fonte no Strava — as Brand Guidelines (seção 3)
   exigem o texto "View on Strava" (em inglês, literal) identificável como
   link por negrito,
   sublinhado ou a cor laranja da marca. Aqui usa negrito + laranja. */
.link-strava {
  color: #FC5200;
  font-weight: 700;
  text-decoration: none;
}
.link-strava:hover { text-decoration: underline; }

/* Fallback do botão de OAuth enquanto o PNG oficial não está na pasta
   (ver app/static/vendor/strava/LEIA-ME.txt). */
.botao-strava-fallback { background: #FC5200; color: #fff; border-color: #FC5200; }
.link-strava-oauth { display: inline-block; text-decoration: none; }

/* Páginas de texto longo (privacidade, termos, suporte, consentimento) */
.texto-legal { max-width: 52rem; }
.texto-legal h2 { margin-top: 2rem; font-size: 1.15rem; }
.texto-legal h3 { margin-top: 1.25rem; font-size: 1rem; color: var(--texto-sub); }
.texto-legal p, .texto-legal li { line-height: 1.65; }
.texto-legal ul { margin: 0.5rem 0 0.5rem 1.25rem; }
.texto-legal li { margin-bottom: 0.35rem; }

/* ---------------------------------------------------------------
   MAPA — tela cheia e seletor de camadas (ver app/static/mapa.js)
   --------------------------------------------------------------- */

/* Modo tela cheia alternativo, para quando a Fullscreen API não está
   disponível (Safari no iOS não a expõe em elemento comum). Fica por cima
   de tudo, inclusive do menu lateral. */
.bm-mapa-cheio {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;   /* respeita a barra do navegador no celular */
  z-index: 3000 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.bm-sem-rolagem { overflow: hidden; }

.bm-ctrl-telacheia a {
  font-size: 1.05rem;
  line-height: 26px;
  text-align: center;
  font-weight: 700;
}

/* O controle de camadas do Leaflet nasce branco; no tema escuro do app ele
   ficava como um retângulo claro brilhando sobre o mapa. */
.leaflet-control-layers {
  background: var(--bg-elevado) !important;
  color: var(--texto) !important;
  border: 1px solid var(--linha) !important;
  border-radius: 0.6rem !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
.leaflet-control-layers-expanded { padding: 0.5rem 0.7rem !important; }
.leaflet-control-layers label { margin-bottom: 0.2rem; font-size: 0.85rem; cursor: pointer; }
.leaflet-control-layers-selector { margin-right: 0.35rem; }
.leaflet-bar a {
  background: var(--bg-elevado) !important;
  color: var(--texto) !important;
  border-bottom-color: var(--linha) !important;
}
.leaflet-bar a:hover { background: var(--bg-input) !important; }
.leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.55) !important;
  color: #cbd5e1 !important;
  font-size: 0.68rem !important;
}
.leaflet-control-attribution a { color: #93c5fd !important; }

/* Filtros de categoria de esforços recusados do protocolo CP */
.btn-filtro-recusado {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  color: var(--texto-secundario);
  padding: 0.25rem 0.6rem;
  border-radius: 16px;
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-filtro-recusado:hover {
  background: var(--bg-elevado);
  color: var(--texto-primario);
}
.btn-filtro-recusado.ativo {
  background: var(--bg-elevado);
  color: var(--texto-primario);
  border-color: #38bdf8;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(56, 189, 248, 0.25);
}

.card-recusado-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  transition: border-color 0.15s ease;
}
.card-recusado-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Botões de filtro de contexto Estrada/Rolo */
.btn-filtro-ctx-watts, .btn-filtro-ctx-evolucao {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  color: var(--texto-secundario);
  padding: 0.25rem 0.65rem;
  border-radius: 16px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-filtro-ctx-watts:hover, .btn-filtro-ctx-evolucao:hover {
  background: var(--bg-elevado);
  color: var(--texto-primario);
}
.btn-filtro-ctx-watts.ativo, .btn-filtro-ctx-evolucao.ativo {
  background: var(--bg-elevado);
  color: var(--texto-primario);
  border-color: #38bdf8;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(56, 189, 248, 0.25);
}

/* ==========================================================================
   METAS — Painel Executivo e Cards de Progresso
   ========================================================================== */
.metas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.metas-header h1 {
  margin: 0;
  font-size: 1.65rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.metas-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-card);
  padding: 0.4rem 0.75rem;
  border-radius: var(--raio-peq);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-suave);
}
.metas-seletor-semana {
  background: var(--bg-elevado);
  color: var(--texto);
  border: 1px solid var(--linha);
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}
.metas-seletor-semana:hover, .metas-seletor-semana:focus {
  border-color: var(--azul);
}

.metas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.metas-card {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 155px;
  box-shadow: var(--sombra-suave);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.metas-card:hover {
  border-color: var(--linha-forte);
  transform: translateY(-2px);
}
.metas-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--acento-card, var(--azul));
}
.metas-card-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
}
.metas-card-titulo {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--texto-sub);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.metas-hero-valor {
  font-family: var(--fonte-titulo);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--texto);
  line-height: 1.2;
  margin: 0.35rem 0 0.5rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.metas-hero-valor .metas-num {
  color: var(--texto);
}
.metas-hero-valor .metas-unit {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--texto-sub);
  margin-right: 0.25rem;
}
.metas-hero-valor .metas-sep {
  color: var(--linha-forte);
  font-size: 1.2rem;
  font-weight: 400;
  margin: 0 0.15rem;
}

.metas-barra-trilha {
  width: 100%;
  height: 0.55rem;
  background: var(--bg-elevado);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.metas-barra-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.metas-card-sub {
  font-size: 0.8rem;
  color: var(--texto-sub);
  line-height: 1.35;
  margin-top: 0.3rem;
}

.metas-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.metas-campo-bloco {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.metas-campo-bloco label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--texto);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.metas-campo-bloco .sub-dica {
  font-size: 0.78rem;
  color: var(--texto-sub);
  font-weight: 400;
  line-height: 1.35;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}
.badge-azul {
  background: rgba(57, 135, 229, 0.12);
  color: var(--azul);
  border: 1px solid rgba(57, 135, 229, 0.3);
}
.badge-verde {
  background: rgba(34, 197, 94, 0.12);
  color: var(--verde);
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.badge-laranja {
  background: rgba(249, 115, 22, 0.12);
  color: var(--laranja);
  border: 1px solid rgba(249, 115, 22, 0.3);
}
.badge-neutro {
  background: var(--bg-elevado);
  color: var(--texto-sub);
  border: 1px solid var(--linha);
}

/* ==========================================================================
   METAS — Referência Profissional e Pipeline do Coach
   ========================================================================== */
.pro-benchmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.pro-benchmark-card {
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pro-benchmark-card:hover {
  border-color: var(--linha-forte);
  transform: translateY(-1px);
}
.pro-benchmark-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.pro-nome {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texto);
  display: block;
}
.pro-tag {
  font-size: 0.76rem;
  color: var(--texto-sub);
  display: block;
  margin-top: 0.1rem;
}
.pro-meta-wkg {
  font-family: var(--fonte-titulo);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--azul);
  white-space: nowrap;
}
.pro-meta-wkg small {
  font-size: 0.75rem;
  color: var(--texto-sub);
  font-weight: 500;
}
.pro-benchmark-rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
}

.coach-prog-pipeline {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.coach-pipeline-step {
  flex: 1;
  min-width: 170px;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.coach-pipeline-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--linha-forte);
  font-size: 1.25rem;
}
.step-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--texto-sub);
  margin-bottom: 0.35rem;
}
.step-val {
  font-family: var(--fonte-titulo);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--texto);
  line-height: 1.2;
}
.step-val small {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--texto-sub);
}
.step-sub {
  font-size: 0.78rem;
  color: var(--texto-sub);
  margin-top: 0.35rem;
  line-height: 1.3;
}
@media (max-width: 700px) {
  .coach-pipeline-arrow { display: none; }
}

/* ==========================================================================
   METAS — Seletor de Modo e Configuração Intuitiva
   ========================================================================== */
.metas-seletor-modo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
  margin: 1rem 0;
}
.modo-opcao-card {
  background: var(--bg-elevado);
  border: 2px solid var(--linha);
  border-radius: var(--raio-peq);
  padding: 1rem 1.15rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  transition: all 0.2s ease;
  position: relative;
  user-select: none;
}
.modo-opcao-card:hover {
  border-color: var(--linha-forte);
  transform: translateY(-1px);
}
.modo-opcao-card.ativo {
  border-color: var(--azul);
  background: rgba(57, 135, 229, 0.08);
  box-shadow: 0 0 0 1px var(--azul);
}
.modo-opcao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.modo-opcao-titulo-area {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.modo-radio-custom {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--linha-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}
.modo-opcao-card.ativo .modo-radio-custom {
  border-color: var(--azul);
}
.modo-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--azul);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}
.modo-opcao-card.ativo .modo-radio-dot {
  opacity: 1;
  transform: scale(1);
}
.modo-opcao-nome {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texto);
}
.modo-opcao-desc {
  font-size: 0.82rem;
  color: var(--texto-sub);
  line-height: 1.4;
  margin: 0;
}

.painel-config-bloco {
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  padding: 1.15rem;
  margin-top: 1rem;
}
.painel-config-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--texto-sub);
}
.painel-config-aviso strong {
  color: var(--texto);
}
.metas-barra-salvar {
  margin-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha);
}

/* ==========================================================================
   MINHA BIKE — Garagem, Componentes e Ocultação
   ========================================================================== */
.bike-card {
  margin-bottom: 1.5rem;
  padding: 1.35rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  position: relative;
  transition: border-color 0.2s ease;
}
.bike-card:hover {
  border-color: var(--linha-forte);
}
.bike-topo-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: 1px solid var(--linha);
  padding-bottom: 1.15rem;
  margin-bottom: 1.15rem;
}
.bike-avatar-area {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  flex-wrap: wrap;
}
.bike-foto-img {
  width: 80px;
  height: 80px;
  border-radius: 1rem;
  object-fit: cover;
  border: 2px solid var(--linha);
}
.bike-foto-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 1rem;
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}
.bike-header-acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.btn-ocultar-bike {
  background: transparent;
  border: 1px solid var(--linha);
  color: var(--texto-sub);
  padding: 0.35rem 0.65rem;
  font-size: 0.76rem;
  border-radius: var(--raio-peq);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
}
.btn-ocultar-bike:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.bike-saude-box {
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.85rem 1.15rem;
  min-width: 200px;
  text-align: right;
}
.bike-odometro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin: 0.85rem 0;
}
.bike-odometro-card {
  background: var(--bg);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bike-ocultas-card {
  background: var(--bg-elevado);
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  padding: 1rem 1.25rem;
  margin-top: 2rem;
}
.bike-ocultas-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linha);
}
.bike-ocultas-item:last-child {
  border-bottom: none;
}
.comp-card {
  background: var(--bg-elevado);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease;
}
.comp-card:hover {
  border-color: var(--linha-forte);
}

/* ---- Telemetria & Gestão de Carga ---- */
.telemetria-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 1.25rem 0 1.5rem;
  padding: 0.75rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-suave);
}
.telemetria-periodos {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.telemetria-periodo-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-sub);
}
.telemetria-botoes-grupo {
  display: inline-flex;
  background: var(--bg-input, #0d131f);
  padding: 3px;
  border-radius: var(--raio-peq);
  border: 1px solid var(--linha);
  gap: 3px;
}
.telemetria-btn-filtro {
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-sub);
  text-decoration: none;
  transition: all 0.15s ease;
}
.telemetria-btn-filtro:hover {
  color: var(--texto);
}
.telemetria-btn-filtro.ativo {
  background: var(--azul, #2563eb);
  color: #fff;
  box-shadow: 0 1px 4px rgba(37,99,235,0.4);
}
.telemetria-toolbar-info {
  font-size: 0.8rem;
  color: var(--texto-sub);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Grade Executiva de Cards de Telemetria */
.telemetria-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.telemetria-card {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-suave);
  position: relative;
  overflow: hidden;
  min-height: 145px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.telemetria-card:hover {
  transform: translateY(-2px);
  border-color: var(--linha-forte);
}
.telemetria-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.telemetria-card.ctl::before { background: #38bdf8; }
.telemetria-card.atl::before { background: #fb923c; }
.telemetria-card.tsb::before { background: #4ade80; }
.telemetria-card.acwr::before { background: #a78bfa; }
.telemetria-card.mono::before { background: #facc15; }

.telemetria-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}
.telemetria-card-titulo {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--texto);
  letter-spacing: -0.01em;
}
.telemetria-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.badge-azul { background: rgba(56,189,248,0.15); color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); }
.badge-laranja { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
.badge-verde { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
.badge-amarelo { background: rgba(250,204,21,0.15); color: #facc15; border: 1px solid rgba(250,204,21,0.3); }
.badge-vermelho { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.badge-cinza { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }

.telemetria-card-valor {
  font-family: var(--fonte-titulo);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--texto);
  margin: 0.2rem 0;
}
.telemetria-card-valor.valor-verde { color: #4ade80; }
.telemetria-card-valor.valor-laranja { color: #fb923c; }

.telemetria-card-sub {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-sub);
  margin-bottom: 0.35rem;
}
.telemetria-card-desc {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--texto-fraco);
  margin-top: auto;
}

.telemetria-kpis {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.telemetria-secao-header {
  margin: 2.25rem 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.telemetria-legenda-zonas {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

/* ==============================================================
   RESPONSIVIDADE MOBILE — BASE AERÓBICA & GRÁFICOS
   ============================================================== */
.base-grafico-caixa {
  position: relative;
  height: 270px;
  width: 100%;
}

.label-mobile { display: none !important; }
.label-desktop { display: inline !important; }

.vo2-stats-container {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
  font-size: 0.8rem;
}

.faixas-vo2-scroll {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.chip-faixa-ativa {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .label-mobile { display: inline !important; }
  .label-desktop { display: none !important; }

  /* Hero Cards em grade compacta 2x2 para caber de primeira na tela */
  .telemetria-cards-grid.base-hero-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
    margin: 0.75rem 0 1.25rem !important;
  }
  .telemetria-cards-grid.base-hero-grid .telemetria-card {
    min-height: 95px !important;
    padding: 0.7rem 0.75rem !important;
  }
  .telemetria-cards-grid.base-hero-grid .telemetria-card-titulo {
    font-size: 0.76rem !important;
  }
  .telemetria-cards-grid.base-hero-grid .telemetria-badge {
    font-size: 0.66rem !important;
    padding: 0.1rem 0.35rem !important;
  }
  .telemetria-cards-grid.base-hero-grid .telemetria-card-valor {
    font-size: 1.35rem !important;
    margin: 0.15rem 0 !important;
  }
  .telemetria-cards-grid.base-hero-grid .telemetria-card-sub {
    font-size: 0.72rem !important;
    margin-bottom: 0 !important;
  }
  .telemetria-cards-grid.base-hero-grid .telemetria-card-desc {
    display: none !important;
  }

  /* Altura adequada no mobile para gráficos não ficarem achatados */
  .base-grafico-caixa {
    height: 240px !important;
    min-height: 240px !important;
  }

  /* Filtros de período do VO2 em 4 colunas uniformes */
  .filtros-vo2 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.25rem !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
  .filtros-vo2 .btn-filtro-vo2 {
    padding: 0.45rem 0.15rem !important;
    font-size: 0.72rem !important;
    text-align: center !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  /* Botões de visão do Crossover em 3 colunas uniformes */
  #card-substratos .telemetria-botoes-grupo {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.25rem !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
  }
  #card-substratos .telemetria-btn-filtro {
    padding: 0.45rem 0.15rem !important;
    font-size: 0.72rem !important;
    text-align: center !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  /* Stats container organizado em 2 colunas com destaque */
  .vo2-stats-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    font-size: 0.74rem !important;
    margin-bottom: 0.65rem !important;
  }
  .vo2-stat-destaque {
    grid-column: span 2 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.35rem 0.6rem !important;
  }
  .vo2-stat-box {
    border-radius: var(--raio-peq);
    background: var(--bg-elevado);
    border: 1px solid var(--linha);
  }

  /* Scroll horizontal suave nas faixas de referência sem ocupar linhas verticais */
  .faixas-vo2-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.35rem !important;
    margin-bottom: 0.65rem !important;
    scrollbar-width: none;
  }
  .faixas-vo2-scroll::-webkit-scrollbar {
    display: none;
  }
  .faixas-vo2-scroll span,
  .faixas-vo2-scroll .chip-faixa {
    flex-shrink: 0 !important;
  }
}

/* ==============================================================
   BOTÃO DE EXPANDIR GRÁFICO (TELA CHEIA) E MODAL UNIVERSAL
   ============================================================== */
.btn-fullscreen-grafico {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-card, #131926);
  border: 1px solid var(--linha, #263348);
  color: var(--texto-sec, #94a3b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.72;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn-fullscreen-grafico:hover {
  opacity: 1;
  color: #38bdf8;
  border-color: #38bdf8;
  background: var(--bg-elevado, #1e293b);
  transform: scale(1.08);
}
.btn-fullscreen-grafico:active {
  transform: scale(0.95);
}

@media (max-width: 600px) {
  .btn-fullscreen-grafico {
    opacity: 0.92;
    width: 32px;
    height: 32px;
    top: 6px;
    right: 6px;
  }
}

.btn-fullscreen-card {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  flex-shrink: 0;
  display: inline-flex;
}

.btn-compartilhar-card,
.btn-compartilhar-nivel,
.btn-compartilhar-vo2,
.btn-compartilhar-calendario {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-card, #131926);
  border: 1px solid var(--linha, #263348);
  color: var(--texto-sec, #94a3b8);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.btn-compartilhar-card:hover,
.btn-compartilhar-nivel:hover,
.btn-compartilhar-vo2:hover,
.btn-compartilhar-calendario:hover {
  opacity: 1;
  color: #eab308;
  border-color: #eab308;
  background: rgba(234, 179, 8, 0.14);
  transform: scale(1.08);
}

.btn-compartilhar-card:active,
.btn-compartilhar-nivel:active,
.btn-compartilhar-vo2:active,
.btn-compartilhar-calendario:active {
  transform: scale(0.95);
}

@media (max-width: 600px) {
  .btn-compartilhar-card,
  .btn-compartilhar-nivel,
  .btn-compartilhar-vo2,
  .btn-compartilhar-calendario {
    opacity: 0.95;
    width: 32px;
    height: 32px;
  }
}

/* MODAL DE TELA CHEIA UNIVERSAL */
.bm-modal-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100005;
  background: rgba(11, 17, 32, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  box-sizing: border-box;
}
.bm-modal-fullscreen.hidden {
  display: none !important;
}
.bm-modal-fullscreen-conteudo {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--bg-card, #131926);
  border: 1px solid var(--linha, #263348);
  border-radius: var(--raio, 12px);
  padding: 1.25rem;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.bm-modal-fullscreen-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--linha, #263348);
  flex-shrink: 0;
}
.bm-modal-fullscreen-titulo-area {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.bm-modal-fullscreen-titulo {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texto, #f8fafc);
  letter-spacing: -0.01em;
}
.bm-modal-fullscreen-dica {
  font-size: 0.78rem;
  color: var(--texto-sec, #94a3b8);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.bm-modal-fullscreen-fechar {
  background: var(--bg-elevado, #1e293b);
  border: 1px solid var(--linha, #263348);
  color: var(--texto, #f8fafc);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.bm-modal-fullscreen-fechar:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
  color: #ef4444;
  transform: scale(1.05);
}
.bm-modal-fullscreen-fechar:active {
  transform: scale(0.95);
}
.bm-modal-fullscreen-corpo {
  flex: 1;
  width: 100%;
  min-height: 0;
  position: relative;
}
.bm-modal-fullscreen-corpo canvas {
  width: 100% !important;
  height: 100% !important;
}

.bm-modal-fullscreen-html {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 0.5rem;
  box-sizing: border-box;
  color: var(--texto, #f8fafc);
  -webkit-overflow-scrolling: touch;
}

.bm-modal-fullscreen-html .card {
  background: var(--bg-card, #131926);
  border: 1px solid var(--linha, #263348);
  border-radius: var(--raio, 12px);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.bm-modal-fullscreen-html [style*="height:14px"] {
  height: 24px !important;
  border-radius: 12px !important;
}

.bm-modal-fullscreen-html [style*="height:12px"] {
  height: 16px !important;
}

.bm-modal-fullscreen-html details.fonte-dados {
  margin-top: 1.5rem;
}

.bm-modal-fullscreen-html .btn-fullscreen-card,
.bm-modal-fullscreen-html .icone-info {
  display: none !important;
}

@media (max-width: 600px) {
  .btn-fullscreen-card {
    width: 28px !important;
    height: 28px !important;
  }
  .bm-modal-fullscreen {
    padding: 0.35rem;
  }
  .bm-modal-fullscreen-conteudo {
    padding: 0.75rem;
    border-radius: 8px;
  }
  .bm-modal-fullscreen-titulo {
    font-size: 0.98rem;
  }
  .bm-modal-fullscreen-dica {
    font-size: 0.72rem;
  }
  .bm-modal-fullscreen-fechar {
    width: 34px;
    height: 34px;
  }
  .bm-modal-fullscreen-html {
    padding: 0.2rem;
  }
  .bm-modal-fullscreen-html .card {
    padding: 0.85rem;
  }
}

/* ==========================================================================
   MODAL DE COMPARTILHAMENTO DE PEDAL (CARD VERTICAL 9:16)
   ========================================================================== */
.btn-compartilhar-pedal {
  background: var(--bg-elevado, #1e293b);
  border: 1px solid var(--linha, #263348);
  color: var(--texto, #f8fafc);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: var(--raio, 6px);
}
.btn-compartilhar-pedal:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-1px);
}
.btn-compartilhar-pedal:active {
  transform: translateY(0);
}

.bm-modal-compartilhar {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(11, 17, 32, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
}
.bm-modal-compartilhar.hidden {
  display: none !important;
}
.bm-modal-compartilhar-conteudo {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  width: 100%;
  max-height: 94vh;
  background: var(--bg-card, #131926);
  border: 1px solid var(--linha, #263348);
  border-radius: var(--raio, 12px);
  padding: 1.25rem;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.bm-modal-compartilhar-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--linha, #263348);
  flex-shrink: 0;
}
.bm-modal-compartilhar-titulo-area {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.bm-modal-compartilhar-titulo-area h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--texto, #f8fafc);
  letter-spacing: -0.01em;
}
.bm-modal-compartilhar-dica {
  font-size: 0.78rem;
  color: var(--texto-sec, #94a3b8);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.bm-modal-compartilhar-fechar {
  background: var(--bg-elevado, #1e293b);
  border: 1px solid var(--linha, #263348);
  color: var(--texto, #f8fafc);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.bm-modal-compartilhar-fechar:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
  color: #ef4444;
  transform: scale(1.05);
}
.bm-modal-compartilhar-fechar:active {
  transform: scale(0.95);
}
.bm-modal-compartilhar-corpo {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 1.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.bm-card-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
}
.bm-compartilhar-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(19, 25, 38, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 14px;
  color: #38bdf8;
  font-size: 0.9rem;
  font-weight: 600;
}
.bm-card-canvas-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 380px;
  width: 100%;
}
.bm-card-canvas-preview {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bm-card-canvas-preview.bm-card-canvas-panoramico {
  aspect-ratio: 16 / 9 !important;
  max-width: 540px !important;
}
.bm-card-canvas-wrapper.bm-card-wrapper-panoramico {
  max-width: 540px !important;
}
.bm-card-canvas-preview:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(56, 189, 248, 0.4);
}
.btn-fullscreen-card-preview {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: all 0.15s ease;
  z-index: 5;
}
.btn-fullscreen-card-preview:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: scale(1.08);
}
.btn-fullscreen-card-preview:active {
  transform: scale(0.95);
}
.bm-card-ampliar-dica {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #e2e8f0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  pointer-events: auto;
  transition: all 0.15s ease;
}
.bm-card-ampliar-dica:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #38bdf8;
}
.bm-card-controles-container {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.bm-grupo-controle {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bm-label-controle {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--texto-sec, #94a3b8);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.bm-opcoes-grid,
.bm-opcoes-grid-estilos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.5rem;
}
.bm-opcoes-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.btn-modelo-opt,
.btn-estilo-opt {
  background: var(--bg-elevado, #1e293b);
  border: 1px solid var(--linha, #263348);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  color: var(--texto, #f8fafc);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.15s ease;
}
.btn-modelo-opt:hover,
.btn-estilo-opt:hover {
  border-color: #38bdf8;
  background: #243048;
}
.btn-modelo-opt.ativo,
.btn-estilo-opt.ativo {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  box-shadow: 0 0 0 1px #38bdf8;
}
.btn-opt-icone {
  font-size: 1.25rem;
  flex-shrink: 0;
}
.btn-opt-texto b {
  font-size: 0.85rem;
  color: #fff;
}
.btn-opt-texto small {
  font-size: 0.72rem;
  color: var(--texto-sec, #94a3b8);
}
.bm-paleta-cores {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 0.35rem 0;
}
.bm-cor-preview-info {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--texto-sec, #94a3b8);
}
.bm-cor-indicador-ponto {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn-cor-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background-color: var(--cor-swatch);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  outline: none;
}
.btn-cor-swatch:hover {
  transform: scale(1.15);
  border-color: #ffffff;
}
.btn-cor-swatch.ativo {
  transform: scale(1.18);
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 0 12px var(--cor-swatch);
}
.bm-cor-custom-wrapper {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.bm-cor-custom-wrapper:hover {
  border-color: #38bdf8;
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
.bm-cor-custom-wrapper input[type="color"] {
  position: absolute;
  inset: -8px;
  width: 48px;
  height: 48px;
  opacity: 0;
  cursor: pointer;
}
.bm-cor-custom-svg {
  pointer-events: none;
  display: block;
  transition: transform 0.25s ease;
}
.bm-cor-custom-wrapper:hover .bm-cor-custom-svg {
  transform: rotate(45deg);
}
.bm-cor-custom-icone {
  font-size: 13px;
  pointer-events: none;
  line-height: 1;
}
.bm-metricas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.btn-metrica-chip {
  background: var(--bg-elevado, #1e293b);
  border: 1px solid var(--linha, #263348);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  color: var(--texto-sec, #94a3b8);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  user-select: none;
}
.btn-metrica-chip:hover {
  border-color: #38bdf8;
  color: #f8fafc;
}
.btn-metrica-chip.ativo {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
  font-weight: 700;
}
.btn-metrica-chip.ativo::before {
  content: "✓";
  font-size: 0.75rem;
  font-weight: 800;
}
.btn-mapa-opt,
.btn-contraste-opt {
  background: var(--bg-elevado, #1e293b);
  border: 1px solid var(--linha, #263348);
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  color: var(--texto, #f8fafc);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-mapa-opt:hover,
.btn-contraste-opt:hover {
  border-color: #38bdf8;
}
.btn-mapa-opt.ativo,
.btn-contraste-opt.ativo {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-weight: 600;
}
.bm-grupo-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--linha, #263348);
}
@media (max-width: 768px) {
  .bm-modal-compartilhar {
    padding: 0.35rem;
  }
  .bm-modal-compartilhar-conteudo {
    padding: 0.75rem 0.65rem 0.65rem;
    max-height: calc(100dvh - 0.7rem);
    border-radius: 12px;
  }
  .bm-modal-compartilhar-topo {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .bm-modal-compartilhar-titulo-area h3 {
    font-size: 1.05rem;
  }
  .bm-modal-compartilhar-fechar {
    width: 34px;
    height: 34px;
  }
  .bm-modal-compartilhar-corpo {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding-right: 0;
  }
  .bm-card-canvas-wrapper {
    max-width: 210px;
    margin: 0 auto;
  }
  .bm-card-canvas-preview {
    max-width: 210px;
    max-height: 33vh;
    margin: 0 auto;
    border-radius: 12px;
  }
  .btn-fullscreen-card-preview {
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
  }
  .bm-card-ampliar-dica {
    bottom: 8px;
    padding: 0.18rem 0.55rem;
    font-size: 0.66rem;
  }
  .bm-opcoes-grid-estilos {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }
  .bm-opcoes-grid-estilos .btn-estilo-opt:nth-child(5) {
    grid-column: 1 / -1;
  }
  .btn-estilo-opt {
    padding: 0.4rem 0.5rem;
    min-height: 46px;
  }
  .btn-metrica-chip {
    padding: 0.28rem 0.55rem;
    font-size: 0.73rem;
    min-height: 30px;
  }
  .bm-metricas-chips {
    gap: 0.35rem;
  }
  .bm-grupo-acoes {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding-top: 0.65rem;
    margin-top: 0.2rem;
  }
  .bm-grupo-acoes .botao {
    padding: 0.65rem 0.5rem;
    font-size: 0.9rem;
    border-radius: 10px;
  }
}
@media (max-width: 420px) {
  .bm-modal-compartilhar-conteudo {
    padding: 0.6rem 0.5rem 0.5rem;
  }
  .bm-card-canvas-wrapper,
  .bm-card-canvas-preview {
    max-width: 190px;
    max-height: 30vh;
  }
  .btn-opt-texto b {
    font-size: 0.78rem;
  }
  .btn-opt-texto small {
    font-size: 0.68rem;
  }
  .bm-grupo-acoes .botao {
    padding: 0.6rem 0.4rem;
    font-size: 0.84rem;
  }
}


/* ==========================================================================
   SITE INSTITUCIONAL — landing, recursos, precos, sobre
   --------------------------------------------------------------------------
   Tudo aqui vale SO' para quem ainda nao entrou. As telas de dentro do app ja'
   tem o proprio sistema (cards, grade-metricas, termometro) e nao sao tocadas
   por nenhuma regra deste bloco: os seletores todos descem de `.site-*`.

   As cores saem das MESMAS variaveis do app (--laranja, --bg-card, --linha).
   Nao ha' paleta separada para o site de propósito — uma landing bonita que
   nao se parece com o produto entrega uma promessa que a primeira tela quebra.
   ========================================================================== */

.site-largura { max-width: 1140px; margin: 0 auto; padding: 0 1.2rem; }

/* ---- Cabecalho publico: o botao de ENTRAR fica no alto, sempre visivel ---- */
.topo-site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.topo-site-inner {
  display: flex; align-items: center; gap: 1.4rem;
  max-width: 1140px; margin: 0 auto; padding: 0.7rem 1.2rem;
}
.topo-site .marca-site { display: flex; align-items: center; gap: 0.5rem;
  text-decoration: none; color: var(--texto); flex: 0 0 auto; }
.topo-site .marca-site svg { height: 34px; width: auto; }
.nav-site { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.nav-site a.link-site {
  color: var(--texto-sub); text-decoration: none; font-weight: 600;
  padding: 0.5rem 0.75rem; border-radius: var(--raio-peq); font-size: 0.95rem;
  white-space: nowrap;
}
.nav-site a.link-site:hover { color: var(--texto); background: var(--bg-card); }
.nav-site a.link-site.ativo { color: var(--laranja); }
.nav-site .sep-site { width: 1px; height: 22px; background: var(--linha);
  margin: 0 0.4rem; flex: 0 0 auto; }

/* O menu sanfona do celular: sem JS novo, so' o <details> do proprio HTML.
   Um script a menos e' um script a menos que pode quebrar no telefone de
   alguem — e a landing e' a unica tela que a pessoa ve antes de confiar. */
.menu-site-mobile { display: none; position: relative; }
.menu-site-mobile > summary {
  list-style: none; cursor: pointer; padding: 0.45rem 0.6rem;
  border: 1px solid var(--linha); border-radius: var(--raio-peq);
  color: var(--texto); font-size: 1.15rem; line-height: 1;
}
.menu-site-mobile > summary::-webkit-details-marker { display: none; }
.menu-site-mobile[open] > summary { background: var(--bg-card); }
.menu-site-painel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 208px;
  background: var(--bg-elevado); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 0.5rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.menu-site-painel a { color: var(--texto); text-decoration: none; font-weight: 600;
  padding: 0.6rem 0.75rem; border-radius: var(--raio-peq); }
.menu-site-painel a:hover { background: var(--bg-card); }
.menu-site-painel .link-menu-instalar {
  background: none; border: 0; color: var(--texto); font: inherit; font-weight: 600;
  text-align: left; padding: 0.6rem 0.75rem; border-radius: var(--raio-peq);
  cursor: pointer; width: 100%;
}
.menu-site-painel .link-menu-instalar:hover { background: var(--bg-card); }

/* ---- Hero ---- */
.site-hero { padding: 3.4rem 0 2.6rem; }
.site-hero-grade { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.6rem;
  align-items: center; }
.site-selo {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--laranja-fraco); color: var(--laranja);
  border: 1px solid color-mix(in srgb, var(--laranja) 35%, transparent);
  padding: 0.32rem 0.8rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
}
.site-hero h1 {
  font-size: clamp(2.05rem, 3.4vw, 2.9rem); line-height: 1.1; margin: 1rem 0 0.9rem;
  letter-spacing: -0.02em; text-wrap: balance;
}
.site-secao-topo h2, .site-fim h2 { text-wrap: balance; }
.site-hero h1 .destaque { color: var(--laranja); }
.site-hero .chamada { font-size: 1.12rem; color: var(--texto-sub); line-height: 1.65;
  max-width: 34rem; }
.site-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.site-cta-nota { font-size: 0.88rem; color: var(--texto-sub); margin-top: 0.9rem; }

.site-print { border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha-forte);
  box-shadow: 0 24px 70px -30px rgba(0,0,0,0.85); background: var(--bg-card); }
.site-print img { display: block; width: 100%; height: auto; }
.site-print-legenda { font-size: 0.8rem; color: var(--texto-sub); padding: 0.55rem 0.8rem;
  border-top: 1px solid var(--linha); background: var(--bg-elevado); }

/* ---- Faixa de numeros ---- */
.site-faixa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  padding: 1.6rem 0; margin: 1rem 0 3rem; }
.site-faixa-item { text-align: center; }
.site-faixa-item b { display: block; font-size: 1.85rem; color: var(--texto);
  font-family: var(--fonte-titulo, inherit); letter-spacing: -0.02em; }
.site-faixa-item span { font-size: 0.86rem; color: var(--texto-sub); }

/* ---- Secoes ---- */
.site-secao { padding: 3.2rem 0; }
.site-secao + .site-secao { border-top: 1px solid var(--linha); }
.site-secao-topo { max-width: 46rem; margin-bottom: 2.2rem; }
.site-secao-topo h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 0.7rem;
  letter-spacing: -0.02em; }
.site-secao-topo p { color: var(--texto-sub); font-size: 1.04rem; line-height: 1.65; margin: 0; }
.site-olho { color: var(--laranja); font-weight: 800; font-size: 0.82rem;
  letter-spacing: 0.09em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }

.site-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  gap: 1.1rem; }
.site-card { background: var(--bg-card); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1.4rem; }
.site-card-icone { font-size: 1.7rem; line-height: 1; margin-bottom: 0.8rem; display: block; }
.site-card h3 { margin: 0 0 0.5rem; font-size: 1.12rem; }
.site-card p { margin: 0; color: var(--texto-sub); line-height: 1.6; font-size: 0.96rem; }
.site-card .fonte { display: block; margin-top: 0.8rem; font-size: 0.8rem;
  color: var(--texto-sub); opacity: 0.85; border-top: 1px solid var(--linha);
  padding-top: 0.6rem; }

/* ---- Recursos alternados (texto + print) ---- */
.site-alt { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.6rem;
  align-items: center; padding: 2.4rem 0; }
.site-alt + .site-alt { border-top: 1px solid var(--linha); }
.site-alt.invertido > :first-child { order: 2; }
.site-alt h3 { font-size: 1.45rem; margin: 0.4rem 0 0.7rem; letter-spacing: -0.01em; }
.site-alt p { color: var(--texto-sub); line-height: 1.68; margin: 0 0 0.8rem; }
.site-lista { list-style: none; padding: 0; margin: 0; }
.site-lista li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem;
  color: var(--texto-sub); line-height: 1.55; }
.site-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--verde);
  font-weight: 800; }

/* ---- Preco ---- */
/* COMO FUNCIONA — os tres passos. Lista ORDENADA de proposito: a ordem e' o
   conteudo aqui, e leitor de tela precisa recebe-la como sequencia, nao como
   tres cartoes soltos. O contador vem do proprio <ol>, entao acrescentar ou
   remover um passo nao exige renumerar nada na mao. */
.site-passos {
  list-style: none; counter-reset: passo; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.site-passos li {
  position: relative; background: var(--bg-card); border: 1px solid var(--linha);
  border-radius: 16px; padding: 2.4rem 1.5rem 1.5rem;
}
.site-passo-num {
  position: absolute; top: -1.1rem; left: 1.5rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--laranja); color: #fff; font-weight: 800; font-size: 1rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.site-passos h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.site-passos p { margin: 0; color: var(--texto-sub); line-height: 1.65; font-size: 0.95rem; }

.site-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.2rem; max-width: 760px; }
.site-plano { background: var(--bg-card); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1.8rem; display: flex; flex-direction: column; }
.site-plano.destaque { border-color: var(--laranja);
  box-shadow: 0 0 0 1px var(--laranja), 0 18px 50px -28px var(--laranja); }
.site-plano-nome { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: 0.8rem; color: var(--laranja); }
.site-plano-preco { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em;
  margin: 0.6rem 0 0.15rem; }
.site-plano-preco small { font-size: 0.95rem; font-weight: 600; color: var(--texto-sub); }
.site-plano .site-lista { margin: 1.2rem 0 1.5rem; flex: 1; }

/* ---- FAQ, sem JS: <details> nativo ---- */
.site-faq { max-width: 46rem; }
.site-faq details { border-bottom: 1px solid var(--linha); padding: 0.2rem 0; }
.site-faq summary { cursor: pointer; padding: 1rem 0; font-weight: 700; font-size: 1.03rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after { content: "+"; color: var(--laranja); font-size: 1.35rem;
  line-height: 1; flex: 0 0 auto; }
.site-faq details[open] summary::after { content: "−"; }
.site-faq details p { margin: 0 0 1.1rem; color: var(--texto-sub); line-height: 1.68; }

/* ---- Chamada final ---- */
.site-fim { text-align: center; padding: 3.6rem 1.2rem; border-radius: var(--raio);
  background: linear-gradient(160deg, var(--bg-card), var(--bg-elevado));
  border: 1px solid var(--linha-forte); margin: 1rem 0 3rem; }
.site-fim h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 0.7rem; }
.site-fim p { color: var(--texto-sub); max-width: 34rem; margin: 0 auto 1.6rem;
  line-height: 1.65; }

/* ---- Equipe / sobre ---- */
.site-perfil { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  align-items: start; background: var(--bg-card); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1.6rem; }
.site-perfil-avatar { width: 84px; height: 84px; border-radius: 50%;
  background: var(--laranja-fraco); border: 1px solid var(--laranja);
  display: grid; place-items: center; font-size: 2.1rem; }

/* ---- Rodape do site ---- */
.rodape-site { border-top: 1px solid var(--linha); margin-top: 2rem; padding: 2.6rem 0 1.4rem; }
.rodape-site-grade { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.rodape-site-grade h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-sub); margin: 0 0 0.85rem; }
.rodape-site-grade a { display: block; color: var(--texto-sub); text-decoration: none;
  padding: 0.28rem 0; font-size: 0.93rem; }
.rodape-site-grade a:hover { color: var(--laranja); }
.rodape-site-marca svg { height: 30px; width: auto; margin-bottom: 0.7rem; }
.rodape-site-marca p { color: var(--texto-sub); font-size: 0.9rem; line-height: 1.6;
  margin: 0 0 1rem; max-width: 26rem; }

@media (max-width: 900px) {
  .site-hero-grade, .site-alt { grid-template-columns: 1fr; gap: 1.8rem; }
  .site-alt.invertido > :first-child { order: 0; }
  .site-faixa { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .rodape-site-grade { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .nav-site .link-site, .nav-site .sep-site { display: none; }
  .menu-site-mobile { display: block; }
  /* NO CELULAR CABE POUCA COISA NO TOPO, E A ESCOLHA E' DELIBERADA: fica a
     marca, o botao de ENTRAR e o sanfona. Em 390 px o cabecalho inteiro dava
     285 px de largura e empurrava a pagina 106 px para fora da tela — o
     defeito classico de landing no telefone, e logo na primeira tela.
     "Criar conta" e "Baixar o app" nao somem: descem para dentro do sanfona,
     e "Criar conta" ainda aparece grande no proprio hero, logo abaixo.
     ENTRAR fica de fora do menu de proposito: quem ja' assina nao veio ler a
     pagina de vendas, veio entrar. */
  .topo-site .marca-site svg { height: 28px; }
  .nav-site #btn-instalar,
  .nav-site .botao-primario { display: none; }
  .nav-site { gap: 0.4rem; }
  .topo-site-inner { gap: 0.6rem; padding: 0.6rem 0.9rem; }
  .site-hero { padding: 2.2rem 0 1.8rem; }
  .site-secao { padding: 2.4rem 0; }
}
@media (max-width: 480px) {
  .rodape-site-grade { grid-template-columns: 1fr; }
  .site-cta .botao { width: 100%; text-align: center; }
}

/* ---- Tela de Login Limpa e Focada ---- */
.login-pagina-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(85vh - 120px);
  padding: 3rem 1.2rem;
}
.login-card-col {
  width: 100%;
  max-width: 440px;
}
.login-card-centralizado {
  display: flex;
  justify-content: center;
}
.login-card-custom {
  background: var(--bg-card);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 2.2rem 2rem;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.38);
  max-width: 440px;
  margin: 0 auto;
}
.login-card-header {
  margin-bottom: 1.5rem;
}
.login-card-header h2 {
  font-size: 1.65rem;
  margin: 0 0 0.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.login-form-inner {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.login-alerta-erro {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #fca5a5;
  padding: 0.75rem 1rem;
  border-radius: var(--raio-peq);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.login-divisor {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--texto-sub);
  margin: 0.9rem 0;
}
.login-divisor::before,
.login-divisor::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--linha);
}
.login-divisor span {
  padding: 0 0.6rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.login-seguranca-badge {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha);
  text-align: center;
  font-size: 0.76rem;
  color: var(--texto-sub);
  line-height: 1.4;
}

/* ---- Elementos Comerciais da Landing Page ---- */
.site-comparativo-wrap {
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: var(--bg-card);
}
.site-comparativo-tab {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.93rem;
}
.site-comparativo-tab th,
.site-comparativo-tab td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--linha);
}
.site-comparativo-tab th {
  background: var(--bg-elevado);
  color: var(--texto);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.site-comparativo-tab th.col-bm {
  background: color-mix(in srgb, var(--laranja) 16%, var(--bg-elevado));
  color: var(--laranja);
  font-weight: 800;
}
.site-comparativo-tab td.col-bm {
  background: color-mix(in srgb, var(--laranja) 5%, transparent);
  font-weight: 600;
  color: var(--texto);
}
.site-comparativo-tab tr:last-child td {
  border-bottom: none;
}
.site-tag-sucesso {
  color: #22c55e;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.site-tag-negativo {
  color: #ef4444;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 900px) {
  .login-pagina-container {
    padding: 2rem 1rem;
    min-height: calc(80vh - 100px);
  }
  .login-card-custom {
    max-width: 100%;
    padding: 1.8rem 1.4rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN MINIMALISTA (22/09/2026)

   O dono mandou o print de um painel de botoes no estilo do NotebookLM e
   pediu o app inteiro "mais minimalista", em todas as paginas. O que o print
   tem, e o que esta camada aplica:

     · superficie CHAPADA: cartao na cor do fundo do cartao, borda de 1 px, e
       nenhuma sombra — a borda ja' separa, a sombra so' pesa;
     · canto bem arredondado e o mesmo em tudo que e' clicavel;
     · a cor mora no ICONE, nao no bloco: botoes e cartoes neutros, com um
       toque de cor pequeno que ajuda o olho sem gritar;
     · texto em Google Sans, com peso 400/500 — numero grande nao precisa de
       800 para ser lido, precisa de tamanho.

   Fica NO FIM da folha de proposito: as regras antigas continuam valendo para
   tudo que esta camada nao menciona, e cada regra aqui ganha delas por ordem,
   sem `!important`. A paleta categorica `--cat-*` NAO muda — ela tem que bater
   com CATEGORICAS em charts.js, e cor de dado nao e' decoracao.
   ═══════════════════════════════════════════════════════════════════════════ */

body { font-size: 0.97rem; letter-spacing: 0.005em; }
p { line-height: 1.6; }

/* ---- icones de traco (ver _icones.html) ---- */
.icone { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.botao .icone { width: 18px; height: 18px; color: var(--azul); }

/* ---- topo ---- */
.topo { padding: 0.75rem 1.5rem; border-bottom-color: var(--linha); }
.marca { font-weight: 500; font-size: 1.12rem; letter-spacing: 0; }
.marca img { box-shadow: none; }

/* ---- menu lateral: pilula tonal, icone colorido ---- */
.nav-grupo-titulo {
  text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 500;
  opacity: 1; padding: 1.1rem 0.9rem 0.35rem;
}
.link-nav {
  gap: 0.75rem; padding: 0.55rem 0.9rem; border-radius: 999px;
  font-size: 0.92rem; font-weight: 400; color: var(--texto);
}
.link-nav-icone { display: inline-flex; color: var(--cor-icone, var(--texto-sub)); opacity: 1; }
.link-nav:hover { background: var(--bg-card-hover); }
.link-nav.ativo {
  background: var(--laranja-fraco); color: var(--texto); font-weight: 500;
  border-left: none; padding-left: 0.9rem;
}
.link-sair, .link-sair .link-nav-icone { color: var(--erro); }
@media (min-width: 769px) {
  .nav-principal { width: 256px; padding: 0.9rem 0.75rem 1.25rem; gap: 0.05rem; }
  .link-nav.ativo { border-left: none; padding-left: 0.9rem; }
}
@media (max-width: 768px) {
  .link-nav { border-radius: 999px; border-bottom: none; padding: 0.75rem 0.9rem; }
  .link-nav.ativo { border-left: none; padding-left: 0.9rem; background: var(--laranja-fraco); }
  .nav-usuario { border-bottom: none; }
}
.nav-usuario { font-size: 0.82rem; }

/* ---- botoes: o formato do print ---- */
.botao {
  gap: 0.5rem; padding: 0.6rem 1.15rem; border-radius: 0.9rem;
  border: 1px solid var(--linha); background: var(--bg-card);
  font-weight: 500; font-size: 0.93rem; box-shadow: none;
}
.botao:hover { background: var(--bg-card-hover); border-color: var(--linha-forte); }
.botao:active { transform: none; }
.botao-primario, .botao-primario:hover {
  background: var(--laranja); border-color: var(--laranja); color: #fff;
  font-weight: 500; box-shadow: none; filter: none;
}
.botao-primario:hover { filter: brightness(1.06); }
.botao-primario .icone { color: currentColor; }
.botao-grande { padding: 0.8rem 1.5rem; font-size: 1rem; border-radius: 1rem; }

/* ---- cartoes: chapados ---- */
.card, .grafico-card, .form-card, .metrica, .dia-card, .card-exec, .ot-card,
.cal-cel, .trofeu-card {
  box-shadow: none;
}
.card { border-radius: 1.1rem; }
.grafico-card { border-radius: 1.1rem; padding: 1.35rem; }
.grafico-card h2, .card h2 { font-weight: 500; }
.form-card { border-radius: 1.25rem; padding: 2.25rem 2rem; }

/* ---- metricas: numero leve, cor so' num traco pequeno ---- */
.metrica { border-radius: 1.1rem; padding: 1.1rem 1.2rem 1rem; }
.metrica:hover { transform: none; border-color: var(--linha-forte); }
.metrica::before {
  top: 0.95rem; left: 1.2rem; right: auto;
  width: 18px; height: 3px; border-radius: 3px; opacity: 1;
}
.metrica .rotulo { margin-top: 0.7rem; font-size: 0.8rem; font-weight: 400; }
.metrica .valor { font-weight: 500; font-size: 1.6rem; letter-spacing: -0.005em; }
.exec-valor, .cal-num, .trofeu-nome, .dia-nome { font-weight: 500; }

/* ---- formularios ---- */
form label { font-weight: 400; }
form input, form select, form textarea {
  border-radius: 0.75rem; border-color: var(--linha-forte); background: var(--bg-input);
}
form input:focus, form select:focus, form textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent);
}

/* ---- filtros e pilulas: tonais, sem bloco saturado ---- */
.btn-filtro-corredor, .btn-filtro-densidade, .btn-filtro-ipg, .btn-filtro-vam, .btn-filtro-zonas-fc, .btn-filtro-radar, .btn-filtro-dist-cat, .btn-filtro-durabilidade, .btn-filtro-protocolo-cp, .btn-filtro-watts-fc, .btn-filtro-evolucao, .btn-filtro-nivel, .btn-filtro-vo2, .btn-filtro-janela, .btn-filtro-forma-janela, .btn-filtro-peso, .btn-filtro-metrica {
  border-radius: 999px; padding: 0.38rem 0.85rem; font-family: inherit;
}
.btn-filtro-corredor.ativo, .btn-filtro-densidade.ativo, .btn-filtro-ipg.ativo, .btn-filtro-vam.ativo, .btn-filtro-zonas-fc.ativo, .btn-filtro-radar.ativo, .btn-filtro-dist-cat.ativo, .btn-filtro-durabilidade.ativo, .btn-filtro-protocolo-cp.ativo, .btn-filtro-watts-fc.ativo, .btn-filtro-evolucao.ativo, .btn-filtro-nivel.ativo, .btn-filtro-vo2.ativo, .btn-filtro-janela.ativo, .btn-filtro-forma-janela.ativo, .btn-filtro-peso.ativo, .btn-filtro-metrica.ativo {
  background: color-mix(in srgb, var(--azul) 16%, var(--bg-card));
  color: var(--texto);
  border-color: color-mix(in srgb, var(--azul) 45%, var(--linha));
  font-weight: 500; box-shadow: none;
}
.pilula { font-weight: 500; }
.seletor-periodo .pilula-ativa { background: var(--laranja-fraco); color: var(--texto); }

/* ---- tabelas: cabecalho em caixa normal ---- */
.tabela-scroll { border-radius: 1.1rem; }
.tabela thead th {
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.82rem;
  background: transparent;
}

/* ---- modais ---- */
.modal-fundo { backdrop-filter: none; }
.modal-caixa, .modal-caixa-grande { border-radius: 1.5rem; }

/* ---- barra de progresso sem degrade ---- */
.barra-progresso-preenchida { background: var(--laranja); }

/* ---- cabecalho das paginas publicas ---- */
.topo-site { background: var(--topo-fundo); }
.nav-site a.link-site { font-weight: 400; border-radius: 999px; }
.nav-site a.link-site.ativo { color: var(--texto); background: var(--bg-card-hover); }
.menu-site-painel a { font-weight: 400; }

/* ---- botoes de compartilhar ----
   Os so'-icone ficam neutros e chapados (sem desfoque, sem sombra, sem o
   amarelo no hover). E o botao COM TEXTO do topo do Plano do treinador herdava
   a classe dos so'-icone, que forca 28x28 px: o rotulo "Compartilhar Semana"
   saia espremido em duas linhas cinzentas, sem cara de botao. Aqui ele volta a
   ter o tamanho do proprio texto. */
.btn-compartilhar-card, .btn-compartilhar-nivel, .btn-compartilhar-vo2, .btn-compartilhar-calendario {
  border-radius: 0.6rem; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--texto-sub); opacity: 1;
}
.btn-compartilhar-card:hover, .btn-compartilhar-nivel:hover, .btn-compartilhar-vo2:hover, .btn-compartilhar-calendario:hover {
  color: var(--texto); border-color: var(--linha-forte); background: var(--bg-card-hover); transform: none;
}
.botao.btn-compartilhar-calendario {
  width: auto; height: auto; padding: 0.55rem 1rem !important; border-radius: 0.9rem !important;
  font-weight: 500 !important; white-space: nowrap; color: var(--texto);
}


/* TRANSICAO ENTRE PAGINAS: SEM ESMAECER (07/10/2026). Havia um
   `@view-transition` com esmaecer de 120 ms (23/09/2026). Medido no navegador,
   com a pagina ja' pre-carregada: ele SOMAVA 80-130 ms a cada clique (a
   captura da tela velha e a animacao seguram a pintura da nova), e zerar a
   animacao nao devolvia o tempo. Sem ele a troca e' seca e nao pisca: o
   navegador segura a tela velha ate' a nova pintar, e o fundo escuro vem
   inline no <head> (`_fundo_imediato.html`). NAO volte o esmaecer para
   "suavizar": ele e' exatamente o atraso que o dono sentia. */

/* ---- compartilhar um grafico (compartilhar_grafico.js) ----
   O botao fica ao lado do de ampliar, com a mesma cara neutra; o modal segue o
   desenho do app: cartao chapado, canto grande, botoes do print. */
.btn-compartilhar-grafico {
  position: absolute; top: 8px; right: 42px; z-index: 5;
  width: 28px; height: 28px; border-radius: 0.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--linha); color: var(--texto-sub);
  cursor: pointer; padding: 0;
}
.btn-compartilhar-grafico:hover { color: var(--texto); border-color: var(--linha-forte); background: var(--bg-card-hover); }
@media (max-width: 600px) {
  .btn-compartilhar-grafico { width: 32px; height: 32px; top: 6px; right: 44px; }
}
/* POR CIMA DE QUALQUER MODAL (29/09/2026). Estava em 60: o grafico da
   evolucao no segmento mora dentro do modal do segmento (999999), e o card
   abria ATRAS dele — o botao funcionava e o atleta nao via nada. */
.bm-cg-modal {
  position: fixed; inset: 0; z-index: 1000001; background: var(--veu-modal);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.bm-cg-modal.hidden { display: none; }
.bm-cg-caixa {
  background: var(--bg-card); border: 1px solid var(--linha); border-radius: 1.5rem;
  padding: 1rem 1rem 1.1rem; width: min(430px, 100%); max-height: 96vh;
  display: flex; flex-direction: column; gap: 0.75rem; box-shadow: var(--sombra);
}
.bm-cg-topo { display: flex; align-items: center; justify-content: space-between; }
.bm-cg-titulo { font-weight: 500; font-size: 1rem; }
.bm-cg-fechar {
  width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--linha);
  background: transparent; color: var(--texto-sub); cursor: pointer; font-size: 0.95rem;
}
.bm-cg-previa { position: relative; display: flex; justify-content: center; min-height: 0; }
.bm-cg-previa canvas {
  height: min(62vh, 640px); width: auto; max-width: 100%; aspect-ratio: 9 / 16;
  border-radius: 1rem; border: 1px solid var(--linha); background: var(--bg);
}
.bm-cg-carregando {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--texto-sub); font-size: 0.9rem;
}
.bm-cg-temas { display: flex; gap: 0.4rem; justify-content: center; }
.bm-cg-tema {
  border: 1px solid var(--linha); background: var(--bg-card); color: var(--texto-sub);
  border-radius: 999px; padding: 0.35rem 0.9rem; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.bm-cg-tema.ativo { color: var(--texto); background: color-mix(in srgb, var(--azul) 16%, var(--bg-card));
  border-color: color-mix(in srgb, var(--azul) 45%, var(--linha)); }
.bm-cg-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.bm-cg-acoes .botao { width: 100%; }
.bm-cg-acoes .botao svg { width: 16px; height: 16px; }


/* ═══════════════════════════════════════════════════════════════════════════
   MENU DE COMPARTILHAR (23/09/2026)

   O dono achou o menu dos cards "muito amador" e pediu o estilo do menu do
   NotebookLM — so' o MENU; o card exportado nao muda. O que havia: veu azul-
   -marinho fixo (ignorava o tema claro), titulo em 700 com subtitulo,
   rotulos em CAIXA ALTA, emoji como icone, subtitulo em cada opcao, botao
   de cor com o nome escrito, texto em gradiente arco-iris e tres botoes de
   peso igual. O que fica, e vale para os sete modais de card:

     · folha chapada na cor do cartao, canto de 28 px, borda de 1 px;
     · titulo em 500, sem subtitulo; fechar e' um icone redondo sem borda;
     · rotulo de secao em frase normal, cinza, pequeno;
     · opcao = pilula tonal com um icone e UMA palavra; escolhida = tom azul;
     · cor = so' a bolinha (o nome vai no title/aria-label);
     · acoes: Compartilhar (cheio), Baixar (tonal) e Copiar so' com icone
       (ordem trocada em 04/10/2026 — ver o fim do arquivo).

   Fica depois do bloco antigo dos modais e ganha dele por ordem e por ser
   mais especifica (`.bm-modal-compartilhar ...`), sem `!important`.
   ═══════════════════════════════════════════════════════════════════════════ */

.bm-modal-compartilhar {
  --cm-tonal: var(--bg-elevado);
  --cm-tonal-hover: var(--bg-card-hover);
  --cm-escolhido: color-mix(in srgb, var(--azul) 20%, var(--bg-card));
  --cm-escolhido-texto: var(--texto);
  background: var(--veu-modal);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 1rem;
}
.bm-modal-compartilhar .bm-modal-compartilhar-conteudo {
  max-width: 860px;
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: 28px;
  padding: 1.25rem 1.5rem 1.5rem;
  box-shadow: var(--sombra);
  color: var(--texto);
  font-family: var(--fonte-texto);
}

/* ---- topo ---- */
.bm-modal-compartilhar .bm-modal-compartilhar-topo {
  border-bottom: none;
  padding: 0;
  margin: 0 0 1rem;
}
.bm-modal-compartilhar .bm-modal-compartilhar-topo h3 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--texto);
}
.bm-modal-compartilhar .bm-modal-compartilhar-fechar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--texto-sub);
  transform: none;
}
.bm-modal-compartilhar .bm-modal-compartilhar-fechar:hover {
  background: var(--cm-tonal-hover);
  color: var(--texto);
  border: none;
  transform: none;
}

/* ---- corpo ---- */
.bm-modal-compartilhar .bm-modal-compartilhar-corpo {
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 1.75rem;
  padding-right: 0;
}
.bm-modal-compartilhar .bm-card-canvas-wrapper { max-width: 300px; }
.bm-modal-compartilhar .bm-card-canvas-preview {
  max-width: 300px;
  border-radius: 16px;
  border: 1px solid var(--linha);
  box-shadow: none;
  cursor: zoom-in;
}
.bm-modal-compartilhar .bm-card-canvas-preview:hover { box-shadow: none; }
.bm-modal-compartilhar .bm-card-canvas-preview.bm-card-canvas-panoramico,
.bm-modal-compartilhar .bm-card-canvas-wrapper.bm-card-wrapper-panoramico { max-width: 100%; }
.bm-modal-compartilhar .btn-fullscreen-card-preview {
  width: 32px;
  height: 32px;
  top: auto;
  bottom: 10px;
  right: 10px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: #fff;
}
.bm-modal-compartilhar .btn-fullscreen-card-preview:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  transform: none;
}
.bm-modal-compartilhar .bm-compartilhar-loading {
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 16px;
  color: var(--texto-sub);
  font-weight: 400;
}

/* ---- secoes ---- */
.bm-modal-compartilhar .bm-card-controles-container { gap: 1.4rem; }
.bm-modal-compartilhar .bm-grupo-controle { gap: 0.6rem; }
.bm-modal-compartilhar .bm-label-controle {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-sub);
  margin: 0;
}
.bm-modal-compartilhar .bm-label-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.bm-modal-compartilhar .bm-contador-metricas { font-size: 0.8rem; color: var(--texto-sub); }

/* ---- opcoes: pilula tonal com icone ---- */
.bm-modal-compartilhar .bm-opcoes-grid-estilos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bm-modal-compartilhar .btn-estilo-opt {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0.45rem 1rem 0.45rem 0.7rem;
  gap: 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--cm-tonal);
  box-shadow: none;
  color: var(--texto);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
}
.bm-modal-compartilhar .btn-estilo-opt:hover {
  background: var(--cm-tonal-hover);
  border-color: transparent;
}
.bm-modal-compartilhar .btn-estilo-opt.ativo {
  background: var(--cm-escolhido);
  border-color: color-mix(in srgb, var(--azul) 55%, transparent);
  box-shadow: none;
  color: var(--cm-escolhido-texto);
}
.bm-modal-compartilhar .btn-opt-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 1rem;
  color: var(--azul);
}
.bm-modal-compartilhar .btn-opt-texto { line-height: 1.2; }
.bm-modal-compartilhar .btn-opt-texto b { font-size: inherit; font-weight: 500; color: inherit; }
.bm-modal-compartilhar .btn-opt-texto small,
.bm-modal-compartilhar .btn-opt-texto br { display: none; }
.bm-amostra-fundo {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--amostra, #131314);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 0 1px var(--linha);
}
.bm-amostra-arcoiris {
  background: conic-gradient(#ef4444, #f97316, #eab308, #10b981, #06b6d4, #3b82f6, #a855f7, #ef4444);
}

/* ---- cor de destaque: so' a bolinha ---- */
.bm-cores-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 4px;        /* o anel da cor escolhida sai 4 px da bolinha: sem isto o corpo, que rola, o corta */
  margin: -4px 0;
}
.bm-cor-bolinha {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: var(--cor, #38bdf8);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.15s ease;
}
.bm-cor-bolinha:hover { box-shadow: 0 0 0 3px var(--cm-tonal-hover); }
.bm-cor-bolinha.ativo { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--texto); }
.bm-cor-bolinha:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.bm-cor-livre {
  display: inline-block;
  overflow: hidden;
  background: conic-gradient(#ef4444, #eab308, #10b981, #06b6d4, #3b82f6, #a855f7, #ef4444);
}
.bm-cor-livre input[type="color"] {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  opacity: 0;
  cursor: pointer;
}
.bm-modal-compartilhar .bm-paleta-cores { padding: 0; gap: 0.75rem; }
.bm-modal-compartilhar .bm-cor-custom-wrapper {
  border: none;
  background: var(--cm-tonal);
  transform: none;
  box-shadow: none;
}
.bm-modal-compartilhar .bm-cor-custom-wrapper:hover { background: var(--cm-tonal-hover); transform: none; box-shadow: none; }
.bm-modal-compartilhar .bm-cor-custom-wrapper:hover .bm-cor-custom-svg { transform: none; }
.bm-modal-compartilhar .bm-cor-preview-info { color: var(--texto-sub); font-size: 0.9rem; }
.bm-modal-compartilhar .bm-cor-indicador-ponto { border: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }

/* ---- chips de dado e de contraste ---- */
.bm-modal-compartilhar .bm-metricas-chips,
.bm-modal-compartilhar .bm-opcoes-linha { gap: 0.45rem; }
.bm-modal-compartilhar .btn-metrica-chip,
.bm-modal-compartilhar .btn-contraste-opt {
  min-height: 34px;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: transparent;
  color: var(--texto);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 400;
}
.bm-modal-compartilhar .btn-metrica-chip:hover,
.bm-modal-compartilhar .btn-contraste-opt:hover { background: var(--cm-tonal-hover); border-color: var(--linha); color: var(--texto); }
.bm-modal-compartilhar .btn-metrica-chip.ativo,
.bm-modal-compartilhar .btn-contraste-opt.ativo {
  background: var(--cm-escolhido);
  border-color: transparent;
  color: var(--cm-escolhido-texto);
  font-weight: 500;
}
.bm-modal-compartilhar .btn-metrica-chip.ativo::before { content: "✓"; font-weight: 500; color: var(--azul); }

/* ---- acoes ---- */
.bm-modal-compartilhar .bm-grupo-acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.25rem;
  border-top: none;
}
.bm-modal-compartilhar .bm-grupo-acoes.bm-grupo-acoes-3 { grid-template-columns: 1fr 1fr auto; }
.bm-modal-compartilhar .bm-grupo-acoes .botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 500;
}
.bm-modal-compartilhar .bm-grupo-acoes .botao-secundario {
  background: var(--cm-tonal);
  border-color: transparent;
  color: var(--texto);
}
.bm-modal-compartilhar .bm-grupo-acoes .botao-secundario:hover { background: var(--cm-tonal-hover); }
.bm-modal-compartilhar .bm-grupo-acoes .bm-btn-copiar { width: 44px; padding: 0; }

@media (max-width: 768px) {
  .bm-modal-compartilhar { padding: 0; align-items: flex-end; }
  .bm-modal-compartilhar .bm-modal-compartilhar-conteudo {
    max-height: 94dvh;
    border-radius: 28px 28px 0 0;
    border-bottom: none;
    padding: 0.9rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .bm-modal-compartilhar .bm-modal-compartilhar-topo { margin-bottom: 0.75rem; }
  .bm-modal-compartilhar .bm-modal-compartilhar-topo h3 { font-size: 1.12rem; }
  .bm-modal-compartilhar .bm-modal-compartilhar-corpo { grid-template-columns: 1fr; gap: 1.25rem; }
  /* A altura manda e a largura segue o 9:16. Com largura fixa e teto de
     altura, o canvas ficava mais largo que o card e sobravam faixas cinzas. */
  .bm-modal-compartilhar .bm-card-canvas-wrapper { width: auto; max-width: 100%; max-height: none; }
  .bm-modal-compartilhar .bm-card-canvas-preview {
    width: auto; height: min(40vh, 380px); max-width: 100%; max-height: none;
  }
  .bm-modal-compartilhar .bm-card-canvas-wrapper.bm-card-wrapper-panoramico { width: 100%; }
  .bm-modal-compartilhar .bm-card-canvas-preview.bm-card-canvas-panoramico { width: 100%; height: auto; }
  .bm-modal-compartilhar .bm-card-controles-container { gap: 1.15rem; }
  .bm-modal-compartilhar .btn-estilo-opt { min-height: 38px; padding: 0.4rem 0.9rem 0.4rem 0.6rem; }
  .bm-modal-compartilhar .bm-grupo-acoes .botao { padding: 0.6rem 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELULAR (23/09/2026)

   O dono achou o app "muito ruim" no smartphone. Medido a 390 px: nada
   estourava a largura — o problema era a ALTURA. Toda grade de cartoes
   pequenos (minmax de 170-280 px) caia para UMA coluna, cada numero ocupava
   uma faixa inteira de ~130 px, e o Painel passava de 11 mil px de rolagem;
   os filtros de periodo quebravam em duas ou tres linhas; cartao dentro de
   cartao somava dois recuos de 22 px e espremia o conteudo; e os botoes de
   compartilhar/ampliar de cada grafico ficavam em cima da legenda.

   Tudo aqui vale so' ate' 600 px e fica NO FIM da folha, para ganhar das
   regras antigas. `!important` so' onde a grade vem em `style=""` no
   template (inline ganha de qualquer folha sem ele). Nenhum dado some da
   tela: o que muda e' densidade, nao conteudo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Aviso de pedal novo que chegou depois de a pagina sair (painel.html). */
.bm-aviso-sync {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 55; /* acima do veu dos modais (50) */
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 0.6rem 0.6rem 1.1rem; border-radius: 999px;
  background: var(--bg-elevado); border: 1px solid var(--linha-forte);
  box-shadow: var(--sombra); color: var(--texto); font-size: 0.9rem;
  max-width: calc(100vw - 2rem); white-space: nowrap;
}
.bm-aviso-sync.hidden { display: none; }
.bm-aviso-sync-botao {
  border: none; border-radius: 999px; padding: 0.45rem 0.95rem; cursor: pointer;
  background: var(--laranja); color: #fff; font: inherit; font-weight: 500;
}

@media (max-width: 600px) {
  main { padding: 1rem 0.875rem 2rem; }
  h1 { font-size: 1.35rem; line-height: 1.25; margin-bottom: 0.4rem; }
  main > p.sub, main > .sub { font-size: 0.88rem; }

  /* ---- cartoes: um recuo so', e menor ---- */
  .card, .grafico-card { padding: 1rem; border-radius: 1rem; margin-bottom: 0.85rem; }
  .card h2, .grafico-card h2 { font-size: 1.08rem; line-height: 1.3; }
  .card .card, .grafico-card .card, .card .grafico-card { padding: 0.85rem; border-radius: 0.9rem; }

  /* ---- numeros: duas colunas, cartao compacto ---- */
  .grade-metricas {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important; margin-bottom: 1rem;
  }
  .metrica { padding: 0.8rem 0.85rem 0.75rem; min-height: 0; border-radius: 0.95rem; }
  .metrica::before { top: 0.75rem; left: 0.85rem; width: 14px; }
  .metrica .rotulo { margin-top: 0.55rem; font-size: 0.76rem; }
  .metrica .valor { font-size: clamp(1.08rem, 5.2vw, 1.28rem); margin: 0.25rem 0 0.15rem; overflow-wrap: anywhere; }
  .metrica .detalhe { font-size: 0.72rem; }
  .metrica .icone-info { transform: scale(0.9); }

  /* As mesmas grades de numero que cada tela declara no proprio <style>.
     `main .x` ganha de `.x` sem precisar de !important. */
  main .telemetria-cards-grid, main .frota-kpi-grid, main .hero-stats-grid,
  main .perfil-metricas-grid, main .premissas-grid, main .bike-odometro-grid,
  main .capacidade-grid, main .eficiencia-grid, main .modal-telemetria-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem;
  }
  /* Grades de ladrilho escritas direto no `style=""` (melhores trechos do
     pedal: 1, 2, 3, 5 min...). Com o recuo do cartao, 2 x 130 px nao cabiam
     e cada ladrilho virava uma faixa inteira. */
  main [style*="minmax(115px"], main [style*="minmax(130px"], main [style*="minmax(140px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.6rem !important;
  }
  /* Nos cartoes ricos em duas colunas, titulo e selo nao cabem lado a lado
     (o selo era cortado: "Ciclista Determinad"). O selo desce para baixo do
     titulo. */
  main .telemetria-card { padding: 0.9rem 0.85rem; }
  main .telemetria-card-topo {
    flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 0.35rem;
  }
  main .telemetria-card-topo > * { max-width: 100%; }
  main .telemetria-card-titulo { font-size: 0.72rem; }
  .grade-trofeus, .grade-trofeus-moderna {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.6rem !important;
  }
  .trofeu-card { padding: 0.9rem 0.7rem; }

  /* ---- filtros: uma linha que rola de lado, em vez de tres empilhadas ----
     POR CLASSE, NAO POR `:has()` (07/10/2026). Era `main div:has(> [class*=
     "btn-filtro-"])`: o navegador testava a regra em TODO div da pagina, a
     cada mudanca no DOM — medido num celular emulado, o recalculo de estilo
     do Painel (que nem tem filtro) caiu de ~700 para ~280 ms sem ela. A linha
     de botoes `btn-filtro-*` leva o atributo `data-filtros`, e o div que a
     embrulha, `data-filtros-pai` (tests/test_velocidade_troca_pagina.py cobra
     os dois). Atributo, e nao classe, para nao mexer no `class` que os testes
     de cada grafico conferem. */
  .seletor-periodo,
  main div[data-filtros] {
    flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    max-width: 100%; min-width: 0;
  }
  .seletor-periodo::-webkit-scrollbar,
  main div[data-filtros]::-webkit-scrollbar { display: none; }
  .seletor-periodo > *, main div[data-filtros] > * { flex-shrink: 0; white-space: nowrap; }
  /* Quem embrulha a linha de filtros e' item flex que cresceria ate' a
     largura da linha inteira (min-width: auto) e empurraria a pagina. */
  main div[data-filtros-pai] { max-width: 100%; min-width: 0; }

  /* ---- graficos: os botoes de compartilhar/ampliar ganham uma faixa
     propria no alto, em vez de cobrir a legenda ---- */
  .grafico-caixa:has(> .btn-fullscreen-grafico),
  .grafico-container:has(> .btn-fullscreen-grafico),
  .base-grafico-caixa:has(> .btn-fullscreen-grafico),
  .grafico-stream-caixa:has(> .btn-fullscreen-grafico) { padding-top: 36px; }
  .grafico-caixa:has(> .btn-fullscreen-grafico),
  .grafico-container:has(> .btn-fullscreen-grafico) { height: 280px !important; }

  /* ---- tabelas e formularios ---- */
  .tabela th, .tabela td { padding: 0.6rem 0.75rem; }
  .form-card { padding: 1.5rem 1.1rem; }
  form input, form select, form textarea { font-size: 16px; } /* iOS nao da' zoom ao focar */

  /* ---- modais comuns: folha que sobe do rodape, rolavel ---- */
  .modal-caixa, .modal-caixa-grande {
    max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-radius: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   JANELAS DE COMPARTILHAR NO CELULAR (24/09/2026)

   O dono: "algumas janelas de compartilhamento ainda estao estourando no
   celular". Medido nos oito modais de card e no de grafico, em 360x640,
   375x548, 390x664, 412x780 e deitado (740x360):
     · os botoes Baixar/Compartilhar ficavam DEPOIS da rolagem: numa tela
       baixa a folha passava da tela e o atleta nao via como terminar;
     · a pagina de tras rolava junto (e no iPhone a folha "fugia");
     · o de grafico media a previa em `vh` — no Safari do iPhone `vh` e' a
       tela SEM as barras do navegador, entao com elas a folha passava do fim;
     · a 360 px o Painel tinha 3 px a mais que a tela (a grade das subidas
       exige 320 px), e a folha, presa a largura da pagina, estourava junto;
     · deitado, tudo empilhado numa folha de 360 px de altura.
   A regra agora: a folha NUNCA passa da tela visivel (`svh`, com as barras),
   as acoes ficam SEMPRE a vista no pe' da folha, so' o meio rola, e o fundo
   nao se mexe. Defendido em test_janelas_compartilhar_celular.py.
   ═══════════════════════════════════════════════════════════════════════════ */

/* O fundo nao rola enquanto uma janela de compartilhar esta' aberta. */
html:has(.bm-modal-compartilhar:not(.hidden)),
html:has(.bm-cg-modal:not(.hidden)) { overflow: hidden; }
.bm-modal-compartilhar, .bm-cg-modal,
.bm-modal-compartilhar .bm-modal-compartilhar-corpo,
.bm-modal-compartilhar .bm-card-controles-container, .bm-cg-caixa { overscroll-behavior: contain; }

/* A pagina nunca fica mais larga que a tela: `clip` corta sem criar area de
   rolagem, entao o topo fixo (sticky) continua funcionando. */
html, body { overflow-x: clip; }

/* Grade escrita no `style=""` com coluna minima maior que o celular (a das
   subidas do Painel pede 320 px): uma coluna que cabe. */
@media (max-width: 600px) {
  main [style*="minmax(260px"], main [style*="minmax(280px"], main [style*="minmax(290px"],
  main [style*="minmax(300px"], main [style*="minmax(320px"], main [style*="minmax(340px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- as oito janelas de card ---- */
@media (max-width: 768px) {
  .bm-modal-compartilhar .bm-modal-compartilhar-conteudo {
    width: 100%; max-width: 100%; box-sizing: border-box; min-height: 0;
    max-height: 94vh; max-height: 94svh;
  }
  .bm-modal-compartilhar .bm-modal-compartilhar-corpo { min-height: 0; overflow-x: hidden; }
  .bm-modal-compartilhar .bm-card-canvas-preview { height: min(36vh, 360px); height: min(36svh, 360px); }
  /* As acoes grudam no pe' da folha enquanto o meio rola. */
  .bm-modal-compartilhar .bm-grupo-acoes {
    position: sticky; bottom: 0; z-index: 3;
    margin: 0; padding: 0.75rem 0 0.1rem;
    background: var(--bg-card);
  }
  /* Coluna estreita (deitado, tela pequena): o rotulo encolhe com reticencias,
     o botao nunca sai da folha. */
  .bm-modal-compartilhar .bm-grupo-acoes .botao { min-width: 0; }
  .bm-modal-compartilhar .bm-grupo-acoes .botao span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bm-modal-compartilhar .bm-grupo-acoes::before {
    content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
    background: linear-gradient(to bottom, transparent, var(--bg-card)); pointer-events: none;
  }
}
/* Tela baixa (celular pequeno, ou com teclado/barras): previa menor. */
@media (max-width: 768px) and (max-height: 700px) {
  .bm-modal-compartilhar .bm-card-canvas-preview { height: min(30vh, 300px); height: min(30svh, 300px); }
  .bm-modal-compartilhar .bm-modal-compartilhar-topo { margin-bottom: 0.5rem; }
  .bm-modal-compartilhar .bm-card-controles-container { gap: 0.9rem; }
}
/* Deitado: previa a esquerda na altura toda, opcoes a direita rolando, acoes
   no pe' da coluna das opcoes. */
@media (max-height: 500px) and (orientation: landscape) {
  .bm-modal-compartilhar { padding: 0; align-items: stretch; }
  .bm-modal-compartilhar .bm-modal-compartilhar-conteudo {
    height: 100vh; height: 100svh; max-height: none; max-width: 100%; width: 100%;
    border-radius: 0; border: none; padding: 0.6rem 1rem 0.5rem;
  }
  .bm-modal-compartilhar .bm-modal-compartilhar-topo { margin-bottom: 0.4rem; }
  .bm-modal-compartilhar .bm-modal-compartilhar-corpo {
    display: grid; grid-template-columns: auto minmax(250px, 1fr); gap: 1rem;
    overflow: hidden; align-items: stretch;
  }
  .bm-modal-compartilhar .bm-card-preview-container { min-height: 0; justify-content: flex-start; }
  .bm-modal-compartilhar .bm-card-canvas-preview {
    height: calc(100vh - 5.5rem); height: calc(100svh - 5.5rem); width: auto; max-width: none;
  }
  /* Panoramico: quem manda e' a largura (metade da tela), e a altura segue o 16:9. */
  .bm-modal-compartilhar .bm-card-canvas-preview.bm-card-canvas-panoramico {
    width: min(50vw, calc((100svh - 5.5rem) * 16 / 9)); height: auto; max-width: none;
  }
  .bm-modal-compartilhar .bm-card-canvas-wrapper.bm-card-wrapper-panoramico { width: auto; }
  .bm-modal-compartilhar .bm-card-controles-container { min-height: 0; overflow-y: auto; padding-right: 0.25rem; }
}

/* "Foto" e' um <label> do campo de arquivo (base.html): mesma pilula dos
   outros estilos, com cara e cursor de botao. */
.bm-modal-compartilhar label.btn-estilo-opt { cursor: pointer; user-select: none; -webkit-user-select: none; }

/* ---- a janela de compartilhar grafico ---- */
.bm-cg-caixa { max-height: 96vh; max-height: 96svh; overflow-y: auto; box-sizing: border-box; }
.bm-cg-previa canvas { height: min(62vh, 640px); height: min(62svh, 640px); }
.bm-cg-acoes { position: sticky; bottom: 0; background: var(--bg-card); padding-top: 0.25rem; }
@media (max-height: 700px) {
  .bm-cg-previa canvas { height: min(50vh, 520px); height: min(50svh, 520px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .bm-cg-modal { padding: 0.5rem; }
  .bm-cg-caixa { width: min(760px, 100%); display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto; column-gap: 1rem; }
  .bm-cg-topo { grid-column: 1 / -1; }
  .bm-cg-previa { grid-row: 2 / 4; }
  .bm-cg-previa canvas { height: calc(96vh - 5rem); height: calc(96svh - 5rem); }
  .bm-cg-temas { align-self: end; }
}

/* ==========================================================================
   CARD DO SEGMENTO (24/09/2026)
   O botao "Compartilhar" fica DENTRO do modal do segmento, que esta' em
   z-index 999999; o modal do card abre por cima dele, senao nasceria atras.
   ========================================================================== */
#bm-modal-compartilhar-segmento { z-index: 1000000; }
.btn-compartilhar-segmento { margin-left: auto; padding: 0.3rem 0.7rem; font-size: 0.82rem;
  display: inline-flex; align-items: center; gap: 0.35rem; }
/* O botao do card do mapa geral, ao lado do seletor de periodo (mapa.html). */
.btn-compartilhar-mapa { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; }

/* ==========================================================================
   POP-UP DE TROFEU NOVO (24/09/2026) — app/templates/_modal_trofeu_novo.html.
   Abaixo dos modais de card (99999), que abrem por cima dele.
   ========================================================================== */
.trofeu-novo-fundo {
  position: fixed; inset: 0; z-index: 99980;
  background: radial-gradient(circle at 50% 35%, rgba(234, 179, 8, 0.16), rgba(11, 17, 32, 0.92) 60%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box;
}
.trofeu-novo-fundo.hidden { display: none; }
.trofeu-novo-confete { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* A caixa: borda em gradiente (ouro para trofeu, laranja para recorde) e
   entrada com "salto". */
.trofeu-novo-caixa {
  --tn-cor: #eab308; --tn-cor2: #f97316;
  position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto;
  background:
    linear-gradient(var(--bg-elevado, #1e1f20), var(--bg-elevado, #1e1f20)) padding-box,
    linear-gradient(135deg, var(--tn-cor), var(--tn-cor2) 55%, rgba(255,255,255,0.08)) border-box;
  border: 2px solid transparent;
  border-radius: 24px; padding: 2rem 1.5rem 1.5rem; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 60px color-mix(in srgb, var(--tn-cor) 25%, transparent);
  animation: tn-entra 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.trofeu-novo-caixa[data-tipo="recorde"] { --tn-cor: #f97316; --tn-cor2: #ef4444; }
.trofeu-novo-caixa[data-raridade="Lendário"] { --tn-cor: #fbbf24; --tn-cor2: #f59e0b; }
.trofeu-novo-caixa[data-raridade="Épico"] { --tn-cor: #a855f7; --tn-cor2: #ec4899; }
.trofeu-novo-caixa[data-raridade="Raro"] { --tn-cor: #38bdf8; --tn-cor2: #6366f1; }
.trofeu-novo-caixa[data-raridade="Comum"] { --tn-cor: #22c55e; --tn-cor2: #10b981; }
.trofeu-novo-fechar {
  position: absolute; top: 0.75rem; right: 0.75rem; width: 40px; height: 40px; border-radius: 50%; z-index: 3;
  border: 1px solid var(--linha, #333537); background: transparent; color: var(--texto-sub);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.trofeu-novo-chamada {
  margin: 0 0 0.5rem; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tn-cor);
}
/* O icone no centro de um "palco": raios girando atras e brilho pulsando. */
.trofeu-novo-palco { position: relative; width: 170px; height: 150px; margin: 0 auto 0.4rem; display: flex; align-items: center; justify-content: center; }
.trofeu-novo-raios {
  position: absolute; inset: -10px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tn-cor) 35%, transparent) 0deg 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%);
  animation: tn-gira 14s linear infinite;
}
.trofeu-novo-icone {
  position: relative; width: 104px; height: 104px; border-radius: 50%; font-size: 3.3rem;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tn-cor) 55%, #fff 0%), color-mix(in srgb, var(--tn-cor) 12%, transparent) 70%);
  border: 3px solid var(--tn-cor);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--tn-cor) 15%, transparent), 0 0 34px color-mix(in srgb, var(--tn-cor) 55%, transparent);
  animation: tn-medalha 0.7s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both, tn-pulsa 2.4s 0.9s ease-in-out infinite;
}
.trofeu-novo-nome { margin: 0.6rem 0 0.3rem; font-size: 1.45rem; line-height: 1.25; }
.trofeu-novo-valor {
  margin: 0.1rem 0 0.35rem; font-size: 2.6rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--tn-cor), var(--tn-cor2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trofeu-novo-desc { margin: 0 0 0.5rem; font-size: 0.9rem; }
.trofeu-novo-resultado { margin: 0 0 1rem; font-weight: 600; color: var(--texto); }
@keyframes tn-entra { from { opacity: 0; transform: translateY(24px) scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes tn-medalha { from { opacity: 0; transform: scale(0.2) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes tn-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes tn-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .trofeu-novo-caixa, .trofeu-novo-icone, .trofeu-novo-raios { animation: none; }
}
.trofeu-novo-outros { text-align: left; margin: 0 0 1rem; }
.trofeu-novo-outros p { margin: 0 0 0.35rem; font-size: 0.8rem; }
.trofeu-novo-outros ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.trofeu-novo-outros li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.trofeu-novo-outros li .botao { padding: 0.2rem 0.5rem; font-size: 0.72rem; flex-shrink: 0; }
.trofeu-novo-acoes { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.trofeu-novo-acoes .botao { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
/* As cores da raridade: as mesmas etiquetas da Galeria (trofeus.html), que
   o Painel nao carrega. */
.trofeu-novo-caixa .telemetria-badge { font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 9999px; font-weight: 700; }
.trofeu-novo-caixa .badge-verde { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.trofeu-novo-caixa .badge-azul { background: rgba(56,189,248,0.15); color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); }
.trofeu-novo-caixa .badge-roxo { background: rgba(168,85,247,0.15); color: #a855f7; border: 1px solid rgba(168,85,247,0.3); }
.trofeu-novo-caixa .badge-ouro { background: rgba(251,191,36,0.2); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }

/* ==========================================================================
   LANDING PROFISSIONALIZADA (24/09/2026) — prefixo `lp-`, so' em index.html
   --------------------------------------------------------------------------
   Mesmas variaveis do app (--bg, --bg-card, --laranja, --cat-*), mesma fonte,
   mesmos cantos de 1-1.5rem e o mesmo botao laranja chapado: a vitrine tem de
   parecer o produto que a pessoa encontra depois de entrar. O unico tom novo
   e' o DOURADO das barras do icone do app (#e3a92e), usado so' em destaque.
   O porque de cada escolha de conversao esta' no topo de index.html.
   ========================================================================== */

/* ---- a marca: o icone do app + o nome, como no cabecalho de quem entrou ---- */
.logo-bm { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--texto);
  font-family: var(--fonte-titulo); font-size: 1.18rem; font-weight: 500; letter-spacing: -0.005em; }
.logo-bm img { width: 34px; height: 34px; border-radius: 9px; display: block; flex: 0 0 auto; }
.rodape-site-marca .logo-bm { margin-bottom: 0.8rem; }
@media (max-width: 900px) { .topo-site .logo-bm img { width: 30px; height: 30px; border-radius: 8px; } }

/* AS FAIXAS DE FUNDO IAM ATE' 1240 px E PARAVAM. O `main` do layout do app
   (max-width 1240, margin 0 no desktop) valia tambem no site publico, e toda
   secao com fundo proprio terminava num degrau a direita. No site, quem
   limita a largura e' `.site-largura`, dentro de cada secao. */
.pagina-site main { max-width: none; margin: 0; padding: 0; }

:root { --lp-ouro: #e3a92e; }
.lp-centro { text-align: center; margin-left: auto; margin-right: auto; }
.lp-centro-flex { justify-content: center; margin-top: 2.2rem; }
.lp-h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0.2rem 0 0.8rem; letter-spacing: -0.02em;
  line-height: 1.2; text-wrap: balance; }
.lp-texto-sub { color: var(--texto-sub); font-size: 1.04rem; line-height: 1.65; margin: 0 0 1.2rem; }
.lp-faixa-fundo { background: var(--bg-elevado); border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha); }
.lp-faixa-fundo + .site-secao, .site-secao + .lp-faixa-fundo { border-top: 1px solid var(--linha); }

/* ---- botoes: o principal e' GRANDE (Fitts) e o UNICO laranja da tela ---- */
.lp-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; align-items: center; }
.lp-botao-principal { padding: 0.95rem 1.7rem; font-size: 1.06rem; border-radius: 1rem;
  font-weight: 600; min-height: 52px; }
.lp-botao-principal, .lp-botao-principal:hover {
  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--laranja) 80%, transparent); }
.lp-botao-principal span { transition: transform 0.18s ease; display: inline-block; }
.lp-botao-principal:hover span { transform: translateX(3px); }
.lp-botao-sec { padding: 0.95rem 1.4rem; font-size: 1.02rem; border-radius: 1rem; min-height: 52px; }
.lp-largo { width: 100%; }

/* ---- hero ---- */
.lp-hero { position: relative; padding: 4.2rem 0 1.4rem; overflow: hidden; isolation: isolate; }
.lp-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto 35%; height: 780px; z-index: -1;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--laranja) 26%, transparent), transparent 70%),
    radial-gradient(closest-side at 70% 60%, color-mix(in srgb, var(--lp-ouro) 16%, transparent), transparent 72%);
  filter: blur(10px); pointer-events: none;
}
.lp-hero-grade { display: grid; grid-template-columns: 1fr 1.12fr; gap: 3rem; align-items: center; }
.lp-selo { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.9rem;
  border-radius: 999px; background: var(--bg-card); border: 1px solid var(--linha);
  font-size: 0.86rem; color: var(--texto-sub); }
.lp-selo-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 22%, transparent); }
.lp-hero h1 { font-size: clamp(2.1rem, 3.9vw, 3.05rem); line-height: 1.06; letter-spacing: -0.035em;
  margin: 1.1rem 0 1.1rem; font-weight: 600; text-wrap: balance; }
.lp-grad { background: linear-gradient(100deg, var(--laranja) 10%, var(--lp-ouro) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-chamada { font-size: 1.14rem; color: var(--texto-sub); line-height: 1.65; margin: 0; max-width: 34rem; }
.lp-chamada b { color: var(--texto); font-weight: 500; }
.lp-garantias { list-style: none; padding: 0; margin: 1.3rem 0 0; display: flex; flex-wrap: wrap;
  gap: 0.5rem 1.2rem; font-size: 0.88rem; color: var(--texto-sub); }
.lp-garantias li { display: inline-flex; align-items: center; gap: 0.4rem; }
.lp-garantias .icone { width: 16px; height: 16px; color: var(--verde); }
.lp-demo-nota { font-size: 0.8rem; color: var(--texto-sub); margin-top: 1.6rem; text-align: right; }

.lp-hero-visual { position: relative; padding: 0 0 2.2rem 0; }
.lp-navegador { border-radius: 1rem; overflow: hidden; border: 1px solid var(--linha-forte);
  background: var(--bg-card); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7); }
.lp-navegador-barra { display: flex; align-items: center; gap: 6px; padding: 0.55rem 0.8rem;
  background: var(--bg-elevado); border-bottom: 1px solid var(--linha); }
.lp-navegador-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--linha-forte); }
.lp-navegador-barra i:first-child { background: #ff5f57; }
.lp-navegador-barra i:nth-child(2) { background: #febc2e; }
.lp-navegador-barra i:nth-child(3) { background: #28c840; }
.lp-navegador-barra span { margin-left: 0.8rem; font-size: 0.74rem; color: var(--texto-sub);
  background: var(--bg-card); padding: 0.18rem 0.8rem; border-radius: 999px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.lp-navegador img { display: block; width: 100%; height: auto; }
.lp-hero-visual .lp-navegador { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg);
  transform-origin: left center; }

.lp-celular { border-radius: 1.6rem; overflow: hidden; border: 5px solid #0b0b0c;
  outline: 1px solid var(--linha-forte); background: #000;
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.8); aspect-ratio: 600 / 1180; }
.lp-celular img { display: block; width: 100%; height: auto; }
.lp-celular-hero { position: absolute; width: 27%; right: -1.5%; bottom: 0; }

.lp-chip { position: absolute; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 0.85rem; border-radius: 999px; font-size: 0.82rem; font-weight: 500;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent); border: 1px solid var(--linha-forte);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px);
  animation: lp-flutua 6s ease-in-out infinite; }
.lp-chip .icone { width: 16px; height: 16px; }
.lp-chip-a { left: -4%; top: 58%; } .lp-chip-a .icone { color: var(--verde); }
.lp-chip-b { left: 30%; top: -1.6rem; animation-delay: -3s; } .lp-chip-b .icone { color: var(--laranja); }
@keyframes lp-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---- faixa de prova ---- */
.lp-faixa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 1.6rem 0 0.4rem;
  background: var(--linha); border: 1px solid var(--linha); border-radius: 1.25rem; overflow: hidden; }
.lp-faixa > div { background: var(--bg-card); padding: 1.3rem 1rem; text-align: center; }
.lp-faixa b { display: block; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 0.2rem; }
.lp-faixa span { font-size: 0.85rem; color: var(--texto-sub); line-height: 1.45; display: block; }

/* ---- icone tonal na cor categorica, como no menu do app ---- */
.lp-icone { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 0.9rem;
  color: var(--c, var(--laranja)); background: color-mix(in srgb, var(--c, var(--laranja)) 15%, transparent);
  flex: 0 0 auto; }
.lp-icone .icone { width: 22px; height: 22px; }

/* ---- problema ---- */
.lp-problemas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.lp-problema { background: var(--bg-card); border: 1px solid var(--linha); border-radius: 1.25rem;
  padding: 1.5rem; }
.lp-problema h3 { margin: 1rem 0 0.5rem; font-size: 1.12rem; font-weight: 500; }
.lp-problema p { margin: 0; color: var(--texto-sub); line-height: 1.62; font-size: 0.95rem; }

/* ---- passos ---- */
.lp-passos li { position: relative; border-radius: 1.25rem; }
.lp-passo-tempo { display: inline-block; margin-top: 0.9rem; font-size: 0.78rem; font-weight: 500;
  padding: 0.2rem 0.65rem; border-radius: 999px; color: var(--verde);
  background: color-mix(in srgb, var(--verde) 14%, transparent); }

/* ---- tour em abas (radio + :checked, zero JS) ---- */
.lp-aba-radio { position: absolute; opacity: 0; pointer-events: none; }
.lp-abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1.8rem; }
.lp-aba { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; user-select: none;
  padding: 0.6rem 1.1rem; border-radius: 999px; border: 1px solid var(--linha); background: var(--bg-card);
  font-size: 0.93rem; color: var(--texto-sub); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.lp-aba .icone { width: 18px; height: 18px; }
.lp-aba:hover { color: var(--texto); background: var(--bg-card-hover); }
.lp-painel { display: none; grid-template-columns: 0.8fr 1.5fr; gap: 2.4rem; align-items: center; }
.lp-painel-texto h3 { font-size: 1.5rem; margin: 0 0 0.7rem; font-weight: 500; letter-spacing: -0.01em; }
.lp-painel-texto p { color: var(--texto-sub); line-height: 1.68; margin: 0 0 1rem; }
#lp-aba-painel:checked ~ .lp-paineis .lp-painel-painel,
#lp-aba-plano:checked ~ .lp-paineis .lp-painel-plano,
#lp-aba-performance:checked ~ .lp-paineis .lp-painel-performance,
#lp-aba-evolucao:checked ~ .lp-paineis .lp-painel-evolucao,
#lp-aba-trofeus:checked ~ .lp-paineis .lp-painel-trofeus,
#lp-aba-bike:checked ~ .lp-paineis .lp-painel-bike { display: grid; animation: lp-entra 0.35s ease; }
#lp-aba-painel:checked ~ .lp-abas .lp-aba-painel,
#lp-aba-plano:checked ~ .lp-abas .lp-aba-plano,
#lp-aba-performance:checked ~ .lp-abas .lp-aba-performance,
#lp-aba-evolucao:checked ~ .lp-abas .lp-aba-evolucao,
#lp-aba-trofeus:checked ~ .lp-abas .lp-aba-trofeus,
#lp-aba-bike:checked ~ .lp-abas .lp-aba-bike {
  background: var(--laranja-fraco); color: var(--texto); border-color: color-mix(in srgb, var(--laranja) 45%, transparent); }
.lp-aba-radio:focus-visible + .lp-aba-radio, .lp-aba-radio:focus-visible { outline: none; }
#lp-aba-painel:focus-visible ~ .lp-abas .lp-aba-painel,
#lp-aba-plano:focus-visible ~ .lp-abas .lp-aba-plano,
#lp-aba-performance:focus-visible ~ .lp-abas .lp-aba-performance,
#lp-aba-evolucao:focus-visible ~ .lp-abas .lp-aba-evolucao,
#lp-aba-trofeus:focus-visible ~ .lp-abas .lp-aba-trofeus,
#lp-aba-bike:focus-visible ~ .lp-abas .lp-aba-bike { outline: 2px solid var(--laranja); outline-offset: 2px; }
@keyframes lp-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- celulares ---- */
.lp-celulares-grade { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.lp-celulares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: center; }
.lp-celular-meio { transform: translateY(-1.4rem) scale(1.06); z-index: 1; }

/* ---- recursos ---- */
.lp-recursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lp-recurso { display: flex; gap: 0.95rem; align-items: flex-start; padding: 1.2rem;
  border-radius: 1.25rem; background: var(--bg-card); border: 1px solid var(--linha);
  transition: border-color 0.15s, transform 0.15s; }
.lp-recurso:hover { border-color: var(--linha-forte); transform: translateY(-2px); }
.lp-recurso h3 { margin: 0.1rem 0 0.3rem; font-size: 1rem; font-weight: 500; }
.lp-recurso p { margin: 0; color: var(--texto-sub); font-size: 0.9rem; line-height: 1.55; }

/* ---- ciencia ---- */
.lp-ciencia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.lp-ref { padding: 1.4rem; border-radius: 1.25rem; background: var(--bg-card); border: 1px solid var(--linha);
  border-top: 3px solid var(--lp-ouro); }
.lp-ref-ano { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; color: var(--lp-ouro); }
.lp-ref h3 { margin: 0.3rem 0 0.5rem; font-size: 1.02rem; font-weight: 500; }
.lp-ref p { margin: 0; color: var(--texto-sub); font-size: 0.9rem; line-height: 1.58; }

/* ---- preco ---- */
.lp-planos { max-width: 60rem; margin: 0 auto; align-items: stretch; }
.lp-plano-principal { position: relative; border-width: 2px;
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--laranja) 70%, transparent); }
.lp-plano-fita { position: absolute; top: -0.8rem; left: 1.4rem; font-size: 0.75rem; font-weight: 600;
  padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--laranja); color: #fff; }
.lp-por-dia { margin: 0 0 0.3rem; color: var(--verde); font-weight: 500; font-size: 0.95rem; }
.lp-plano-nota { margin: 0.7rem 0 0; text-align: center; font-size: 0.82rem; color: var(--texto-sub); }
.lp-plano-ancora { opacity: 0.92; }
.lp-riscado { white-space: nowrap; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--erro) 70%, transparent);
  text-decoration-thickness: 3px; color: var(--texto-sub); }
.lp-lista-x { list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; flex: 1; }
.lp-lista-x li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; color: var(--texto-sub); }
.lp-lista-x li::before { content: "✕"; position: absolute; left: 0; color: var(--erro); font-weight: 700; }

/* ---- FAQ ---- */
.lp-faq-grade { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items: start; }
.lp-faq-grade .site-secao-topo { position: sticky; top: 6rem; }
.lp-faq-grade .site-faq { max-width: none; }

/* ---- CTA final ---- */
.lp-fim { position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: 4rem 1.4rem; margin: 1rem 0 2rem; border-radius: 1.75rem; border: 1px solid var(--linha-forte);
  background: var(--bg-card); }
.lp-fim::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--laranja) 22%, transparent), transparent 70%),
              radial-gradient(40% 60% at 80% 100%, color-mix(in srgb, var(--lp-ouro) 14%, transparent), transparent 70%); }
.lp-fim-icone { border-radius: 16px; margin-bottom: 1rem; }
.lp-fim h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 0.8rem; letter-spacing: -0.025em;
  text-wrap: balance; font-weight: 600; }
.lp-fim p { color: var(--texto-sub); max-width: 36rem; margin: 0 auto; line-height: 1.65; font-size: 1.05rem; }
.lp-fim .lp-centro-flex { margin-top: 1.8rem; }

/* ---- barra fixa do celular ---- */
.lp-barra-fixa { display: none; }

@media (max-width: 1000px) {
  .lp-ciencia { grid-template-columns: repeat(2, 1fr); }
  .lp-recursos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .lp-hero { padding-top: 2.4rem; }
  .lp-hero-grade, .lp-celulares-grade, .lp-painel, .lp-faq-grade { grid-template-columns: 1fr; gap: 2rem; }
  .lp-hero-visual .lp-navegador { transform: none; }
  .lp-hero-visual { padding: 0 8% 2rem 0; }
  .lp-celular-hero { width: 30%; right: 0; }
  .lp-chip-a { left: 0; } .lp-chip-b { left: auto; right: 12%; top: -1.2rem; }
  .lp-problemas { grid-template-columns: 1fr; }
  .lp-faixa { grid-template-columns: repeat(2, 1fr); }
  .lp-faq-grade .site-secao-topo { position: static; }
  .lp-demo-nota { text-align: left; }
  .lp-painel-texto { order: 2; }
  .lp-abas { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.4rem;
    margin: 0 -1.2rem 1.4rem; padding-left: 1.2rem; padding-right: 1.2rem; scrollbar-width: none; }
  .lp-abas::-webkit-scrollbar { display: none; }
  .lp-aba { flex: 0 0 auto; }

  .lp-barra-fixa { display: flex; position: fixed; left: 0.6rem; right: 0.6rem; z-index: 60;
    bottom: calc(0.6rem + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between;
    gap: 0.8rem; padding: 0.55rem 0.55rem 0.55rem 1rem; border-radius: 1.2rem;
    background: color-mix(in srgb, var(--bg-card) 94%, transparent); border: 1px solid var(--linha-forte);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px);
    transform: translateY(160%); transition: transform 0.28s ease; }
  .lp-barra-fixa.visivel { transform: none; }
  .lp-barra-fixa span { font-size: 0.8rem; color: var(--texto-sub); line-height: 1.3; }
  .lp-barra-fixa span b { display: block; color: var(--texto); font-weight: 500; font-size: 0.92rem; }
  .lp-barra-fixa .botao { min-height: 46px; padding: 0.6rem 1.1rem; border-radius: 0.9rem; white-space: nowrap; }
}
@media (max-width: 560px) {
  .lp-recursos, .lp-ciencia { grid-template-columns: 1fr; }
  .lp-cta .botao { width: 100%; }
  .lp-celulares { gap: 0.5rem; }
  .lp-chip { font-size: 0.74rem; padding: 0.4rem 0.7rem; }
  .lp-chip-b { display: none; }
  .lp-faixa b { font-size: 1.4rem; }
}
@media (max-width: 560px) {
  /* No telefone o navegador em miniatura vira um borrao de 350 px: fica so' o
     celular, grande e no centro — e' o aparelho que a pessoa tem na mao. */
  .lp-hero-visual { padding: 0.6rem 0 0; }
  .lp-hero-visual .lp-navegador { display: none; }
  .lp-celular-hero { position: relative; width: 64%; right: auto; margin: 0 auto; }
  .lp-chip-a { left: 0; top: 34%; }
}
@media (max-width: 900px) {
  /* a barra fixa nao cobre o fim do rodape */
  body:has(.lp-barra-fixa) .rodape-site { padding-bottom: 6.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-chip, .lp-painel { animation: none !important; }
  .lp-recurso, .lp-barra-fixa, .lp-botao-principal span { transition: none; }
}

/* ---- gerador de percursos: aviso de conferir, legenda e marcas (24/09/2026) ---- */
.aviso-conferir { margin-top: 1rem; border-color: color-mix(in srgb, var(--azul) 45%, var(--linha));
  background: color-mix(in srgb, var(--azul) 7%, var(--bg-card)); }
.legenda-gerado { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 0.6rem; font-size: 0.82rem; }
.legenda-gerado span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legenda-gerado i { width: 26px; height: 6px; border-radius: 4px; display: inline-block; }
.marca-trecho { display: grid; place-items: center; color: #fff; background: #dc2626;
  border: 2px solid #fff; border-radius: 50%; font-weight: 700; font-size: 12px; line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); }
.mapa-marcando, .mapa-marcando .leaflet-interactive { cursor: crosshair !important; }
.nota-acesso { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--texto-sub); opacity: 0.85; }

/* ---- selo "quanto pesou" do pedal (macro _selo_peso.html) ---- */
.selo-peso { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.12rem 0.55rem;
  border-radius: 9999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; vertical-align: middle;
  color: var(--cor-peso); background: color-mix(in srgb, var(--cor-peso) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor-peso) 33%, transparent); }
.selo-peso b { font-weight: 700; }
.selo-peso-horas { margin-left: 0.3rem; font-size: 0.8rem; color: var(--texto-sub); white-space: nowrap; }
.titulo-com-selo { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.7rem; }
.titulo-com-selo > h1, .titulo-com-selo > h2, .titulo-com-selo > h3 { margin: 0; }

/* ---- a zona de FC do treino, na cor da zona (macro _zona_fc.html) ---- */
.zona-fc { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.05rem 0.45rem;
  border-radius: 999px; font-weight: 600; white-space: nowrap;
  color: var(--cor-zona, var(--texto-sub));
  background: color-mix(in srgb, var(--cor-zona, transparent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor-zona, var(--linha)) 38%, transparent); }
/* o selo da zona: cheio, na cor do grafico de zonas */
.zona-fc:has(.zona-fc-z) { padding-left: 0.15rem; }
.zona-fc-z { display: inline-block; padding: 0 0.4rem; border-radius: 999px; font-weight: 800;
  background: var(--cor-zona); color: var(--cor-zona-txt, #0d1117); }
.metrica .valor .zona-fc { font-size: 0.95rem; }

/* ---- notificacoes no celular (Perfil) ---- */
.notif-card { margin: 1rem 0 1.25rem; }
.notif-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.notif-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-top: 0.9rem;
  padding-top: 0.8rem; border-top: 1px solid var(--linha); font-size: 0.9rem; }
.notif-prefs[hidden] { display: none; }
.notif-prefs label { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---- o convite das notificacoes (pop-up do Painel) ---- */
.notif-convite .modal-caixa { text-align: left; }
.notif-convite-opcoes { display: flex; flex-direction: column; gap: 0.55rem; margin: 0 0 1rem;
  padding: 0.75rem 0.85rem; border: 1px solid var(--linha); border-radius: 0.75rem; font-size: 0.92rem; }
.notif-convite-opcoes label { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.notif-convite-opcoes select { width: auto; display: inline-block; padding: 0.2rem 0.4rem; }
.notif-convite-opcoes[hidden], .notif-convite .botao[hidden] { display: none; }
.notif-convite-instrucao { margin: 0 0 1rem; padding: 0.75rem 0.85rem; border-radius: 0.75rem; font-size: 0.92rem;
  line-height: 1.5; background: color-mix(in srgb, var(--laranja, #f97316) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--laranja, #f97316) 35%, transparent); }
.notif-convite-instrucao[hidden] { display: none; }

/* ---- a roleta do horario das notificacoes (static/notificacoes.js) ----
   5 linhas de 40px visiveis; a do meio e' a escolhida. A mascara desbota as
   bordas e o rotateX de cada item (no JS) faz o tambor. */
.roleta { position: relative; display: flex; justify-content: center; align-items: center; gap: 0.1rem;
  height: 200px; margin: 0.4rem 0 0.2rem; padding: 0 0.6rem; border-radius: 1rem;
  background: var(--bg-elevado, rgba(127, 127, 127, 0.08)); border: 1px solid var(--linha);
  perspective: 600px; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  transition: opacity 0.2s; }
.roleta-desligada { opacity: 0.4; }
.roleta-faixa { position: absolute; left: 0.5rem; right: 0.5rem; top: 80px; height: 40px; pointer-events: none;
  border-radius: 0.6rem; background: color-mix(in srgb, var(--laranja, #ff5a1e) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--laranja, #ff5a1e) 45%, transparent); }
.roleta-col { position: relative; z-index: 1; height: 200px; width: 4.2rem; overflow-y: auto;
  scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; outline: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 68%, transparent 100%);
  transform-style: preserve-3d; }
.roleta-col::-webkit-scrollbar { display: none; }
.roleta-col:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--laranja, #ff5a1e) 70%, transparent);
  border-radius: 0.6rem; }
.roleta-lista { padding: 80px 0; }
.roleta-item { height: 40px; line-height: 40px; text-align: center; scroll-snap-align: center;
  font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--texto-sub);
  cursor: pointer; backface-visibility: hidden; will-change: transform, opacity; }
.roleta-item-ativo { color: var(--texto); font-weight: 800; }
.roleta-dois-pontos { position: relative; z-index: 1; font-size: 1.35rem; font-weight: 800; color: var(--texto);
  padding-bottom: 0.15rem; }
.roleta-legenda { margin: 0.2rem 0 0; font-size: 0.82rem; text-align: center; }
.notif-horario { flex: 1 1 240px; max-width: 320px; }
.notif-horario > label { font-weight: 600; }
.notif-prefs-lado { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.notif-convite-opcoes .roleta { margin-top: 0.1rem; }

/* O fundo do tema tambem no `html` (25/09/2026): o `body` sozinho deixava a
   tela vazia no fundo padrao do navegador (branco) nas bordas e antes de o
   corpo existir. O primeiro quadro ja' vem pintado por _fundo_imediato.html. */
html { background: var(--bg); }

/* ---- o Painel em secoes, sem cor de enfeite (25/09/2026) ----
   O dono: "muita informacao, muitas cores". A ordem mora no template (ver
   "A ORDEM DO PAINEL" em painel.html); aqui, o que era cor sem
   significado vira neutro: o traco colorido do topo de cada metrica (uma cor
   por posicao na grade) e as barrinhas de 16 cores da telemetria. Fica cor
   onde ela diz algo: zona, sinal (`.sinal`), semaforo, status do modelo. */
.painel-secao { margin: 2rem 0 0.75rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--texto-sub); }
.painel-secao:first-of-type { margin-top: 0.5rem; }
.painel-calmo .metrica::before { display: none; }
.painel-calmo .mini-termometro-barra:not(.sinal) { background: color-mix(in srgb, var(--texto-sub) 55%, transparent) !important; }
.painel-hoje { display: grid; gap: 1rem; margin-bottom: 1rem; grid-template-columns: 1fr; }
.painel-hoje > .card, .painel-hoje > .ot-card, .painel-hoje > div { margin: 0; width: 100%; }
.painel-temporada { padding: 1rem; }
.painel-temporada .grade-metricas { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0; }
/* Os seis totais abrem o Painel (30/09/2026): no computador, 3 por linha, duas
   linhas cheias. A grade automatica punha 5 + 1 ou 4 + 2, com cartao sozinho. */
@media (min-width: 900px) {
  .painel-temporada .grade-metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.painel-temporada .metrica { background: var(--bg-elevado); }
.painel-explica summary { cursor: pointer; font-size: 0.84rem; color: var(--texto-sub); }
.painel-explica p { margin: 0.4rem 0 0; font-size: 0.84rem; line-height: 1.55; }
/* Os totais da temporada numa grade dentro do cartao: o numero nunca parte
   ao meio ("10.77 / 2 km"); o selo desce para a linha de baixo. */
.painel-temporada .metrica .valor { white-space: nowrap; }
.painel-temporada .metrica > div:nth-child(2) { flex-wrap: wrap; row-gap: 0.3rem; }
.painel-temporada .metrica .detalhe { flex-wrap: wrap; gap: 0.15rem 0.5rem; }
@media (max-width: 600px) {
  .painel-temporada { padding: 0.6rem; }
  .painel-temporada .grade-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .painel-temporada .metrica { padding: 0.8rem; }
  .painel-temporada .metrica .valor { font-size: 1.25rem; }
}

/* Plano do treinador: onde o plano quebra e o diario do coach (28/09/2026) */
.quebra-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.quebra-linha { display: grid; grid-template-columns: 7.5rem 1fr 2.6rem; align-items: center; gap: 0.5rem; font-size: 0.82rem; margin-bottom: 0.3rem; }
.quebra-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto); }
.quebra-barra { height: 8px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--linha); overflow: hidden; }
.quebra-barra > span { display: block; height: 100%; border-radius: 999px; }
.quebra-num { text-align: right; color: var(--texto-sub); font-variant-numeric: tabular-nums; }
.diario-linha { list-style: none; margin: 0; padding: 0 0 0 0.25rem; border-left: 2px solid var(--linha); }
.diario-item { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.75rem; padding: 0 0 1rem 0.9rem; }
.diario-item::before { content: ""; position: absolute; left: -7px; top: 0.3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--azul); border: 2px solid var(--bg-card); }
.diario-data { font-weight: 700; font-size: 0.9rem; color: var(--texto); line-height: 1.1; }
.diario-data small { display: block; font-weight: 500; font-size: 0.7rem; color: var(--texto-sub); }
.diario-corpo { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; min-width: 0; }
.diario-troca { font-size: 0.88rem; }
.diario-motivo { font-size: 0.85rem; line-height: 1.45; color: var(--texto); }
.diario-ctx { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.diario-ctx span { font-size: 0.74rem; color: var(--texto-sub); background: var(--bg-input); border: 1px solid var(--linha); border-radius: 999px; padding: 0.1rem 0.5rem; }

/* "BAIXAR O APP" (02/10/2026, static/instalar.js): a janela quando o navegador
   nao abre a dele, e a seta que aponta para o botao do NAVEGADOR que a pessoa
   precisa tocar (o menu no canto de cima, o Compartilhar embaixo). */
.modal-instalar-caixa { text-align: left; max-width: 380px; }
.modal-instalar-titulo { font-weight: 700; font-size: 1.05rem; text-align: center; margin: 0 0 0.75rem; }
.modal-instalar-carregando {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  color: var(--texto-secundario); margin: 0.5rem 0 1rem;
}
.modal-instalar-carregando.hidden { display: none !important; }
.giro-instalar {
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid var(--linha); border-top-color: var(--laranja);
  animation: giro-instalar 0.8s linear infinite;
}
@keyframes giro-instalar { to { transform: rotate(360deg); } }
.modal-instalar-passos { margin: 0 0 0.75rem; padding-left: 1.25rem; line-height: 1.6; }
.modal-instalar-passos li { margin-bottom: 0.35rem; }
.modal-instalar-nota { font-size: 0.85rem; color: var(--texto-secundario); margin: 0.25rem 0 0; }
.modal-instalar-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.dica-instalar {
  position: fixed; z-index: 60;
  background: linear-gradient(135deg, #ff6a30, var(--laranja)); color: #fff;
  font-weight: 700; font-size: 0.9rem;
  padding: 0.45rem 0.8rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: dica-instalar 1s ease-in-out infinite alternate;
}
.dica-instalar[data-pos="topo-direita"] { top: 0.6rem; right: 0.6rem; }
.dica-instalar[data-pos="baixo"] { bottom: 0.8rem; left: 50%; transform: translateX(-50%); animation-name: dica-instalar-centro; }
.dica-instalar[data-pos="baixo-direita"] { bottom: 0.8rem; right: 0.8rem; }
@keyframes dica-instalar { from { margin-top: 0; margin-bottom: 0; } to { margin-top: 6px; margin-bottom: 6px; } }
@keyframes dica-instalar-centro { from { transform: translate(-50%, 0); } to { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) {
  .dica-instalar, .giro-instalar { animation: none; }
}

/* ESQUECI A SENHA: passos e campo com "mostrar" (02/10/2026). */
.senha-passos { margin: 1rem 0; padding-left: 1.3rem; line-height: 1.7; }
.senha-passos li { margin: .25rem 0; }
.senha-reenviar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .5rem 0; }
form.senha-reenviar button { width: auto; margin: 0; }
.senha-campo { position: relative; margin: .35rem 0 0; }
.senha-campo input { width: 100%; padding-right: 5.5rem; box-sizing: border-box; margin: 0; }
form .senha-mostrar { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: auto; margin: 0;
  background: transparent; border: 0; color: var(--laranja, #ff6b35); font-weight: 600;
  padding: .45rem .6rem; cursor: pointer; font-size: .9rem; }
.form-card label[for="senha-nova"] { margin-bottom: 0; }

/* ==========================================================================
   PADRAO VISUAL (04/10/2026) — o que fazia o app parecer amador.

   O dono: "parece meio amador ainda". Medido: 125 cores diferentes, 71
   tamanhos de fonte, todo card com uma faixa colorida no topo e todo selo
   numa cor propria. Cor que nao quer dizer nada ensina o olho a ignorar a cor
   que quer dizer algo. A regra daqui para frente:
     - laranja e' ACAO (botao, link principal, item ativo do menu);
     - verde = bom, amarelo = atencao, vermelho = ruim — e so';
     - o resto e' cinza.
   Ficam fora desta regra as cores que SAO dado: zonas de FC/potencia, a
   paleta das series dos graficos, a cor da dificuldade do pedal.
   ========================================================================== */
:root {
  /* Escala de texto: seis passos, e nao 71. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.95rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.1rem;
  --bom: var(--verde);
  --atencao: #eab308;
  --ruim: var(--erro);
}
:root[data-theme="light"] { --atencao: #b45309; }

/* SELO DECORATIVO E' CINZA. Azul, roxo, laranja e "cinza" de selo nao
   significavam nada ("Volume Total", "Regua 50", "Ancora de Amostragem") e
   disputavam com os semanticos. Verde/amarelo/vermelho continuam — mais
   discretos, porque sao status, nao enfeite. */
.badge-azul, .badge-roxo, .badge-laranja, .badge-cinza, .badge-neutro {
  background: transparent !important;
  color: var(--texto-sub) !important;
  border: 1px solid var(--linha) !important;
}
.badge-verde { background: color-mix(in srgb, var(--bom) 12%, transparent) !important; color: var(--bom) !important; border: 1px solid color-mix(in srgb, var(--bom) 30%, transparent) !important; }
.badge-amarelo { background: color-mix(in srgb, var(--atencao) 12%, transparent) !important; color: var(--atencao) !important; border: 1px solid color-mix(in srgb, var(--atencao) 30%, transparent) !important; }
.badge-vermelho { background: color-mix(in srgb, var(--ruim) 12%, transparent) !important; color: var(--ruim) !important; border: 1px solid color-mix(in srgb, var(--ruim) 30%, transparent) !important; }
.badge, .telemetria-badge {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none;
}

/* SEM FAIXA COLORIDA NO TOPO DE CADA CARD. Cinco cores em cinco cards
   vizinhos (Metas, Telemetria, Mais Analises) sem nenhuma querer dizer nada.
   A hierarquia vem do numero, nao da moldura. */
.metas-card::before,
.telemetria-card::before { display: none !important; }
.telemetria-card:hover { transform: none; }

/* Numero alinhado: digitos de largura igual em todo valor e tabela. */
.valor, .telemetria-card-valor, .hero-stat-valor, .card-recorde-valor,
.metas-card-valor, table td, .metrica .valor { font-variant-numeric: tabular-nums; }

/* Titulo de card em caixa alta virou caixa normal: CAIXA ALTA ao lado de
   titulo normal, na mesma tela, era a terceira voz tipografica. */
.telemetria-card-titulo, .metas-card-titulo { text-transform: none !important; letter-spacing: 0 !important; }

/* ICONES DE ACAO DO CARD DISCRETOS. Compartilhar, ampliar e "i" em quase todo
   card: tres botoes de borda cheia por card somavam mais peso que o titulo.
   No computador ficam apagados e acendem ao passar o mouse ou ao focar; no
   celular (sem hover) ficam como estao — la' nao ha' como descobri-los. */
@media (hover: hover) {
  .btn-compartilhar-card, .btn-compartilhar-nivel, .btn-compartilhar-vo2,
  .btn-fullscreen-grafico, .btn-compartilhar-grafico, .icone-info {
    opacity: 0.45;
    transition: opacity 0.15s ease;
  }
  .grafico-card:hover .btn-compartilhar-card, .grafico-card:hover .btn-fullscreen-grafico,
  .grafico-card:hover .btn-compartilhar-grafico, .card:hover .btn-compartilhar-card,
  .card:hover .btn-compartilhar-nivel, .card:hover .btn-compartilhar-vo2,
  .card:hover .icone-info, .grafico-card:hover .icone-info,
  .btn-compartilhar-card:focus-visible, .btn-fullscreen-grafico:focus-visible,
  .btn-compartilhar-grafico:focus-visible, .icone-info:hover, .icone-info:focus-visible {
    opacity: 1;
  }
}

/* GRAFICO ENTRA SUAVE, em vez de "pular" quando o Chart.js desenha. */
@keyframes bm-surgir { from { opacity: 0; } to { opacity: 1; } }
canvas { animation: bm-surgir 0.35s ease both; }
@media (prefers-reduced-motion: reduce) { canvas { animation: none; } }

/* EXPLICACAO RECOLHIDA. A descricao de cada grafico era um paragrafo inteiro
   antes de qualquer dado. Agora mostra duas linhas e um "Ler mais" (o botao
   e' montado em base.html so' quando o texto passa disso). O texto continua
   na pagina inteiro — leitor de tela e busca do navegador o encontram. */
p.sub.bm-recolhido {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.bm-ler-mais {
  background: none; border: 0; padding: 0; margin: 0 0 0.9rem;
  color: var(--texto-sub); font: inherit; font-size: var(--fs-sm);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.bm-ler-mais:hover { color: var(--texto); }

/* LINHA DE FILTROS NO CELULAR ROLA DE LADO, em vez de virar quatro linhas
   de botoes empilhados em cima do grafico. */
@media (max-width: 600px) {
  .bm-rolagem-lateral, [class^="filtros-"], [class*=" filtros-"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .bm-rolagem-lateral::-webkit-scrollbar, [class^="filtros-"]::-webkit-scrollbar { display: none; }
  .bm-rolagem-lateral > *, [class^="filtros-"] > *, [class*=" filtros-"] > * { flex-shrink: 0; }
}

/* Paragrafo de texto corrido nao passa de ~75 caracteres por linha. */
main > .sub, .cabecalho-pagina .sub, header .sub { max-width: 72ch; }

/* ---- NAVEGACAO EM SECOES (04/10/2026) ---- */
/* Abas da secao: as telas irmas no topo de cada uma (Plano, Analises,
   Conquistas, Percursos). Sublinhado na ativa, como em todo app maduro. */
.abas-secao {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--linha);
  margin: -0.5rem 0 1.75rem;
}
.aba-secao {
  padding: 0.6rem 0.9rem; margin-bottom: -1px;
  color: var(--texto-sub); text-decoration: none; font-size: var(--fs-md);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.aba-secao:hover { color: var(--texto); }
.aba-secao.ativa { color: var(--texto); border-bottom-color: var(--laranja); font-weight: 500; }

/* Barra inferior: so' no celular. */
.barra-inferior { display: none; }
@media (max-width: 768px) {
  .barra-inferior {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    background: var(--topo-fundo);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--linha);
    padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom));
  }
  .barra-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.35rem 0; color: var(--texto-sub); text-decoration: none;
    font: inherit; font-size: 0.7rem; background: none; border: 0; cursor: pointer;
  }
  .barra-item .icone { width: 22px; height: 22px; }
  .barra-item.ativo { color: var(--laranja); }
  /* O menu de tres tracos sai: "Mais", embaixo, faz o papel dele. */
  .topo .botao-menu { display: none; }
  /* O menu aberto ocupa a tela acima da barra, e rola. */
  .nav-principal { bottom: calc(58px + env(safe-area-inset-bottom)); }
  .nav-principal.aberto { max-height: none; }
  main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .abas-secao { margin: -0.5rem -1rem 1.25rem; padding: 0 1rem; }
}

/* ---- PEDAL NOVO EM DESTAQUE NO TOPO DO PAINEL (04/10/2026) ---- */
.pedal-novo { margin-bottom: 1.5rem; }
.pedal-novo-card { border: 1px solid color-mix(in srgb, var(--laranja) 45%, var(--linha)); }
.pedal-novo-rotulo {
  margin: 0; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em;
  color: var(--laranja);
}
.pedal-novo-detalhes { margin-top: 1rem; }
.pedal-novo-detalhes > summary {
  cursor: pointer; color: var(--texto-sub); font-size: var(--fs-sm);
  list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
}
.pedal-novo-detalhes > summary::before { content: "▸"; transition: transform 0.15s ease; }
.pedal-novo-detalhes[open] > summary::before { transform: rotate(90deg); }
.pedal-novo-detalhes > summary::-webkit-details-marker { display: none; }

/* Recalculo do historico: uma linha, nao um cartao (04/10/2026). */
.recalculo-linha { margin: 0 0 1.25rem; font-size: var(--fs-sm); color: var(--texto-sub); }
.recalculo-linha > summary {
  display: flex; align-items: center; gap: 0.75rem; cursor: pointer; list-style: none;
  padding: 0.55rem 0.85rem; border: 1px solid var(--linha); border-radius: 999px; width: fit-content; max-width: 100%;
}
.recalculo-linha > summary::-webkit-details-marker { display: none; }
.recalculo-barra { width: 90px; height: 5px; border-radius: 3px; background: var(--bg-input); overflow: hidden; flex-shrink: 0; }
.recalculo-barra > span { display: block; height: 100%; background: var(--atencao); }
.recalculo-pct { font-variant-numeric: tabular-nums; color: var(--texto); }
@media (max-width: 600px) { .recalculo-barra { width: 56px; } .recalculo-titulo { font-size: var(--fs-xs); } }
.ot-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; vertical-align: 0; }
.bm-sem-dado { font-size: var(--fs-sm); margin: -0.75rem 0 1.5rem; }

/* ---- ICONES DE TRACO EM LINHA (04/10/2026) ----
   No lugar dos emojis que tinham SIGNIFICADO (alerta, ok, FC, rolo,
   apagar, editar...). Emoji e' desenhado pelo aparelho, colorido do jeito
   de cada fabricante, e pesa mais que o texto ao lado; estes sao traco
   na cor do texto (ou do status), do mesmo desenho do menu. Uso em
   qualquer template, sem import: <i class="ic ic-alerta"></i>. */
.ic { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em;
  background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat; flex-shrink: 0; margin-right: 0.3em; }
.ic:last-child { margin-right: 0; }
.ic-alerta { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203.5%202.8%2019.5h18.4z%22/%3E%3Cpath%20d%3D%22M12%2010v4.5M12%2017.2h.01%22/%3E%3C/svg%3E"); }
.ic-ok { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22m8%2012.3%202.7%202.7L16.2%209.5%22/%3E%3C/svg%3E"); }
.ic-nao { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22m9%209%206%206M15%209l-6%206%22/%3E%3C/svg%3E"); }
.ic-coracao { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020s-7.5-4.6-7.5-10.2A4.3%204.3%200%200%201%2012%207.4a4.3%204.3%200%200%201%207.5%202.4C19.5%2015.4%2012%2020%2012%2020z%22/%3E%3C/svg%3E"); }
.ic-casa { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010.5%2012%203l9%207.5%22/%3E%3Cpath%20d%3D%22M5.5%209v11h13V9%22/%3E%3C/svg%3E"); }
.ic-estrada { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M12%202.5v2.2M12%2019.3v2.2M2.5%2012h2.2M19.3%2012h2.2M5.3%205.3l1.6%201.6M17.1%2017.1l1.6%201.6M5.3%2018.7l1.6-1.6M17.1%206.9l1.6-1.6%22/%3E%3C/svg%3E"); }
.ic-baixar { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v11M7%2010l5%205%205-5M5%2020h14%22/%3E%3C/svg%3E"); }
.ic-lixo { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M9%207V4.5h6V7M6.5%207l1%2013h9l1-13%22/%3E%3C/svg%3E"); }
.ic-editar { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020h4L19%209l-4-4L4%2016z%22/%3E%3Cpath%20d%3D%22m13.5%206.5%204%204%22/%3E%3C/svg%3E"); }
.ic-config { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M12%202.5v3M12%2018.5v3M4.2%204.2l2.1%202.1M17.7%2017.7l2.1%202.1M2.5%2012h3M18.5%2012h3M4.2%2019.8l2.1-2.1M17.7%206.3l2.1-2.1%22/%3E%3C/svg%3E"); }
.ic-sino { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2016V11a6%206%200%200%201%2012%200v5l1.5%202h-15z%22/%3E%3Cpath%20d%3D%22M10%2020.5h4%22/%3E%3C/svg%3E"); }
.ic-cadeado { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%2210.5%22%20width%3D%2214%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%2010.5V7.5a4%204%200%200%201%208%200v3%22/%3E%3C/svg%3E"); }
.ic-camera { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h3.5L9%205.5h6L16.5%208H20v11H4z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213.2%22%20r%3D%223.3%22/%3E%3C/svg%3E"); }
.ic-email { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225.5%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m3.5%207%208.5%206.5L20.5%207%22/%3E%3C/svg%3E"); }
.ic-olho { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%2012S6%205.5%2012%205.5%2021.5%2012%2021.5%2012%2018%2018.5%2012%2018.5%202.5%2012%202.5%2012z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.8%22/%3E%3C/svg%3E"); }
.ic-link { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2014a4%204%200%200%200%205.7%200l3-3a4%204%200%200%200-5.7-5.7l-1%201%22/%3E%3Cpath%20d%3D%22M14%2010a4%204%200%200%200-5.7%200l-3%203a4%204%200%200%200%205.7%205.7l1-1%22/%3E%3C/svg%3E"); }
.ic-atualizar { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%200%200-14.5-4.5L4%208%22/%3E%3Cpath%20d%3D%22M4%204v4h4M4%2013a8%208%200%200%200%2014.5%204.5L20%2016%22/%3E%3Cpath%20d%3D%22M20%2020v-4h-4%22/%3E%3C/svg%3E"); }
.ic-info { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%2011v5.5M12%207.8h.01%22/%3E%3C/svg%3E"); }
.ic-salvar { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h11l3%203v13H5z%22/%3E%3Cpath%20d%3D%22M8%204v5h7V4M8%2020v-6h8v6%22/%3E%3C/svg%3E"); }
.ic-alerta { color: var(--atencao); }
.ic-ok { color: var(--bom); }
.ic-nao { color: var(--ruim); }
.ic-coracao { color: #e66767; }
.ic-ponto { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.35em; vertical-align: 0.05em; }
.ic-ponto-verde { background: var(--bom); } .ic-ponto-amarelo { background: var(--atencao); }
.ic-ponto-laranja { background: #f97316; } .ic-ponto-vermelho { background: var(--ruim); }
.ic-ponto-azul { background: var(--azul); } .ic-ponto-cinza { background: var(--texto-sub); }
/* Os icones do menu (_icones.html), tambem como classe .ic-<nome>. */
.ic-bussola { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22m15.5%208.5-2%205-5%202%202-5z%22/%3E%3C/svg%3E"); }
.ic-calendario { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%225%22%20width%3D%2217%22%20height%3D%2215.5%22%20rx%3D%222.5%22/%3E%3Cpath%20d%3D%22M3.5%2010h17M8%203v4M16%203v4%22/%3E%3C/svg%3E"); }
.ic-alvo { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3Cpath%20d%3D%22M12%2012h.01%22/%3E%3C/svg%3E"); }
.ic-subindo { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2017%206-6%204%204%208-8%22/%3E%3Cpath%20d%3D%22M15%207h6v6%22/%3E%3C/svg%3E"); }
.ic-velocimetro { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2018a9%209%200%201%201%2015%200%22/%3E%3Cpath%20d%3D%22m12%2013%204-4%22/%3E%3Cpath%20d%3D%22M12%2013h.01%22/%3E%3C/svg%3E"); }
.ic-pulso { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h4l3-8%204%2016%203-8h4%22/%3E%3C/svg%3E"); }
.ic-chama { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203c1%203.5%205%205.5%205%2010a5%205%200%200%201-10%200c0-2%201-3.5%202-4.5%200%202%201%203%202%203%200-3-1-5.5%201-8.5z%22/%3E%3C/svg%3E"); }
.ic-lupa { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%226.5%22/%3E%3Cpath%20d%3D%22m20%2020-4.2-4.2%22/%3E%3C/svg%3E"); }
.ic-barras { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2020v-8M10%2020V8M15%2020v-6M20%2020V4%22/%3E%3C/svg%3E"); }
.ic-trofeu { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%204h8v5a4%204%200%200%201-8%200z%22/%3E%3Cpath%20d%3D%22M8%206H5a3%203%200%200%200%203%204M16%206h3a3%203%200%200%201-3%204M12%2013v4M8.5%2020h7%22/%3E%3C/svg%3E"); }
.ic-medalha { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%225%22/%3E%3Cpath%20d%3D%22m9%2013.5-1.5%207L12%2018l4.5%202.5-1.5-7%22/%3E%3C/svg%3E"); }
.ic-grafico { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204v16h16%22/%3E%3Cpath%20d%3D%22m8%2015%203-4%203%202%205-6%22/%3E%3C/svg%3E"); }
.ic-brilho { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.9%205.1L19%2010l-5.1%201.9L12%2017l-1.9-5.1L5%2010l5.1-1.9z%22/%3E%3Cpath%20d%3D%22M18.5%2015l.6%201.6%201.6.6-1.6.6-.6%201.7-.6-1.7-1.6-.6%201.6-.6z%22/%3E%3C/svg%3E"); }
.ic-mapa { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%204-5.5%202v14L9%2018l6%202%205.5-2V4L15%206z%22/%3E%3Cpath%20d%3D%22M9%204v14M15%206v14%22/%3E%3C/svg%3E"); }
.ic-pino { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-6.5-5.6-6.5-11a6.5%206.5%200%200%201%2013%200c0%205.4-6.5%2011-6.5%2011z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.3%22/%3E%3C/svg%3E"); }
.ic-montanha { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2019%206.5-11%204%206.5%202.5-4L21%2019z%22/%3E%3C/svg%3E"); }
.ic-bike { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2216%22%20r%3D%223.5%22/%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2216%22%20r%3D%223.5%22/%3E%3Cpath%20d%3D%22M5.5%2016%209.5%208.5h6M12%2016%209.5%208.5M12%2016l3.5-7.5%203%207.5M5.5%2016H12M15.5%208.5%2014.8%206h2.2M8%208.5h3%22/%3E%3C/svg%3E"); }
.ic-lista { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206h11M9%2012h11M9%2018h11M4.5%206h.01M4.5%2012h.01M4.5%2018h.01%22/%3E%3C/svg%3E"); }
.ic-livro { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019V5.5A2.5%202.5%200%200%201%206.5%203H20v15H6.5A2.5%202.5%200%200%200%204%2020.5%202.5%202.5%200%200%200%206.5%2023%22/%3E%3Cpath%20d%3D%22M6.5%2021H20%22/%3E%3C/svg%3E"); }
.ic-pessoa { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021a8%208%200%200%201%2016%200%22/%3E%3C/svg%3E"); }
.ic-ferramenta { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%204a5%205%200%200%200-4.6%206.9L4%2017.3V20h2.7l6.4-6.4A5%205%200%200%200%2020%209l-3%201-2-2%201-3z%22/%3E%3C/svg%3E"); }
.ic-contraste { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%203a9%209%200%200%201%200%2018z%22%20fill%3D%22currentColor%22%20stroke%3D%22none%22/%3E%3C/svg%3E"); }
.ic-sair { --ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22/%3E%3Cpath%20d%3D%22m16%2017%205-5-5-5M21%2012H9%22/%3E%3C/svg%3E"); }

/* TELA SEM MENU LATERAL (entrar, criar conta, senha...) CENTRALIZADA
   (04/10/2026). O `main` encostava a esquerda (margin: 0, pensado para ficar
   ao lado do menu), e sem menu o cartao de login e o rodape ficavam
   deslocados para a esquerda no computador. */
@media (min-width: 769px) {
  body.sem-menu main { margin: 0 auto; }
}

/* ---- ABAS DA SECAO E MENU DO CELULAR (04/10/2026) ----
   O MENU FECHADO PEGAVA O TOQUE. No celular o menu "Mais" fechado tinha
   max-height 0 e opacidade 0, mas o padding o deixava com 25 px de altura,
   invisivel, fixo logo abaixo do topo — exatamente por cima das abas da
   secao. Tocar em "Metas" era tocar no link "Painel" escondido. Fechado,
   agora ele nao existe para o toque nem para o leitor de tela. */
@media (max-width: 768px) {
  .nav-principal:not(.aberto) { visibility: hidden; pointer-events: none; padding-top: 0; padding-bottom: 0; }
  .nav-principal.aberto { visibility: visible; pointer-events: auto; }
  /* E MAIS: FECHADO, FORA DA PAGINA (04/10/2026). O dono continuou caindo no
     Painel ao tocar nas abas de Conquistas depois da correcao acima. Esconder
     por visibilidade depende de cada navegador respeitar o pai escondido; aqui
     o menu fechado nem e' desenhado (display: none) e o JavaScript ainda o
     marca `inert` — nenhum navegador entrega toque a elemento inerte. Abrir
     ganha uma animacao curta no lugar da transicao de altura. */
  .nav-principal:not(.aberto) { display: none !important; }
  .nav-principal.aberto { display: flex; animation: bm-menu-abre 0.18s ease-out; }
}
@keyframes bm-menu-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-principal.aberto { animation: none; } }
.aba-curto { display: none; }
@media (max-width: 600px) {
  /* Grade: todas as abas a vista, ate' 3 por linha. */
  .abas-secao {
    display: grid !important; grid-template-columns: repeat(var(--abas-col, 3), minmax(0, 1fr));
    gap: 0.4rem; border-bottom: none; margin: -0.25rem 0 1.25rem; padding: 0; overflow: visible;
  }
  .aba-secao {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 2.6rem; padding: 0.45rem 0.35rem; margin: 0;
    border: 1px solid var(--linha); border-radius: 0.7rem; border-bottom-width: 1px;
    font-size: var(--fs-sm); line-height: 1.2; white-space: normal;
  }
  .aba-secao.ativa { background: var(--laranja-fraco); border-color: transparent; color: var(--texto); }
  .aba-longo { display: none; }
  .aba-curto { display: inline; }
}

/* ==========================================================================
   CARDS DE COMPARTILHAR: ACOES, AVISO E A JANELA DO GRAFICO (04/10/2026)
   - Compartilhar e' o botao principal em toda janela (o card existe para ir
     ao Stories); onde o navegador nao compartilha arquivo, cartao_design.js
     (`ajustarAcoes`) esconde ele e o Baixar assume — `.bm-acoes-sem-share`
     tira a coluna vazia.
   - `.bm-aviso-card` substitui o alert() do navegador.
   - A janela do grafico tinha outro desenho (caixa no meio, "Escuro/Claro"
     soltos, "Baixar imagem" sem icone, X em texto): agora e' a mesma folha
     das outras — de baixo no celular, rotulo do grupo, pilulas com amostra,
     acoes em pilula com Copiar.
   ========================================================================== */
.bm-modal-compartilhar .bm-grupo-acoes.bm-acoes-sem-share { grid-template-columns: 1fr; }
.bm-modal-compartilhar .bm-grupo-acoes.bm-grupo-acoes-3.bm-acoes-sem-share { grid-template-columns: 1fr auto; }

.bm-aviso-card {
  /* No TOPO: no pe' ele cobria os proprios botoes Compartilhar/Baixar. */
  position: fixed; left: 50%; top: calc(0.9rem + env(safe-area-inset-top, 0px));
  /* O mesmo z-index da janela do grafico (o teto do app,
     test_cards_fonte_e_camada): o aviso fica por cima por vir DEPOIS no
     <body> — `aviso()` o move para o fim a cada vez. */
  z-index: 1000001; width: max-content; max-width: min(92vw, 460px); box-sizing: border-box;
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: var(--texto); color: var(--bg); font-size: 0.9rem; font-weight: 500;
  box-shadow: var(--sombra); text-align: center; pointer-events: none;
  opacity: 0; transform: translate(-50%, -12px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.bm-aviso-card.visivel { opacity: 1; transform: translate(-50%, 0); }
.bm-aviso-card.bm-aviso-erro { background: var(--ruim, #ef4444); color: #fff; }

.bm-cg-fechar { display: inline-flex; align-items: center; justify-content: center; padding: 0; border-color: transparent; }
.bm-cg-fechar:hover { background: var(--bg-card-hover); color: var(--texto); }
.bm-cg-titulo { font-size: 1.05rem; }
.bm-cg-grupo { display: flex; flex-direction: column; gap: 0.45rem; }
.bm-cg-rotulo { font-size: 0.82rem; color: var(--texto-sub); }
.bm-cg-temas { justify-content: flex-start; }
.bm-cg-tema { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.35rem 1rem 0.35rem 0.6rem; }
.bm-cg-tema .bm-amostra-fundo { width: 18px; height: 18px; }
.bm-cg-acoes { grid-template-columns: 1fr 1fr auto; gap: 0.6rem; }
.bm-cg-acoes.bm-acoes-sem-share { grid-template-columns: 1fr auto; }
.bm-cg-acoes .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.6rem 1.1rem; border-radius: 999px; font-size: 0.93rem; font-weight: 500;
}
.bm-cg-acoes .botao-secundario { background: var(--bg-elevado); border-color: transparent; color: var(--texto); }
.bm-cg-acoes .bm-cg-copiar { width: 44px; padding: 0; }
@media (max-width: 768px) {
  .bm-cg-modal { padding: 0; align-items: flex-end; }
  .bm-cg-caixa {
    width: 100%; max-width: 100%; border-radius: 1.5rem 1.5rem 0 0; border-bottom: none;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    max-height: 94vh; max-height: 94svh;
  }
  .bm-cg-previa canvas { height: min(52vh, 520px); height: min(52svh, 520px); }
}


/* RESULTADO DA SIMULACAO DE PERCURSO (07/10/2026): termometro de dificuldade,
   grade de numeros e pacing. Moraram no <style> do Percursos ate' o estudo do
   alvo do Plano passar a usar a mesma macro (_macros_percurso.html). */
.dificuldade-termometro-card {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.35rem;
  box-shadow: var(--sombra);
}
.termometro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.dificuldade-nota-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.dificuldade-numero {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  font-family: var(--fonte-titulo);
}
.dificuldade-escala {
  font-size: 1.15rem;
  color: var(--texto-sub);
  font-weight: 600;
}
.dificuldade-badge {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  margin-left: 0.4rem;
}
.termometro-bar-wrapper {
  flex: 1;
  min-width: 240px;
  max-width: 420px;
}
.termometro-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--texto-sub);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.termometro-trilho {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #22c55e 0%, #3b82f6 30%, #eab308 60%, #f97316 80%, #ef4444 100%);
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.termometro-indicador {
  position: absolute;
  top: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transform: translateX(-50%);
  transition: left 0.3s ease;
}
.pacing-card {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.35rem;
  box-shadow: var(--sombra);
}
.pacing-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--laranja);
  background: var(--laranja-fraco);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}
.trecho-badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.trecho-subida {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.trecho-descida {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.trecho-plano {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
}
.hero-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio-peq);
  padding: 1rem;
  box-shadow: var(--sombra-suave);
}
.hero-stat-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--texto-sub);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hero-stat-valor {
  font-size: 1.55rem;
  font-weight: 800;
  margin: 0.35rem 0 0.2rem;
  line-height: 1.15;
  font-family: var(--fonte-titulo);
}
.hero-stat-sub {
  font-size: 0.75rem;
  color: var(--texto-sub);
}
@media (max-width: 600px) {
  .termometro-header { flex-direction: column; align-items: stretch; }
  .termometro-bar-wrapper { max-width: 100%; }
}

/* ALVO DO PLANO: de onde vem o percurso — tres botoes (GPX, rota do Strava,
   pedal feito), cada um abre o seu painel. O radio fica escondido atras do
   botao, mas continua no formulario (e no teclado). */
.alvo-origem {
  flex: 1 1 90px; display: flex; gap: 0.45rem; align-items: center; justify-content: center; text-align: center;
  padding: 0.6rem 0.8rem; border: 1px solid var(--linha); border-radius: var(--raio-peq);
  cursor: pointer; font-weight: 600; font-size: 0.9rem; position: relative;
}
.alvo-origem input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.alvo-origem.ativo { border-color: var(--azul); background: rgba(57,135,229,0.10); color: var(--azul); }
.alvo-origem:focus-within { outline: 2px solid var(--azul); outline-offset: 2px; }
.alvo-painel { margin-top: 0.6rem; }
@media (max-width: 480px) { .alvo-origem { padding: 0.55rem 0.4rem; font-size: 0.82rem; gap: 0.3rem; } }
.alvo-painel[hidden] { display: none; }

/* O CARD DO ALVO NO PLANO (07/10/2026): recolhido, o resumo diz o essencial;
   aberto, numeros primeiro e o resto em abas. So' tokens de cor: vale nos dois
   temas. */
.alvo-card { padding: 0; overflow: hidden; scroll-margin-top: 76px; }
/* O "Recolher" do fim do card: a mesma seta do resumo, apontando para cima.
   O scroll-margin acima deixa o resumo abaixo do topo fixo ao recolher. */
.alvo-rodape { display: flex; justify-content: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.alvo-recolher { width: auto; gap: 0.55rem; font-size: 0.88rem; color: var(--texto-sub); }
.alvo-recolher:hover { color: var(--texto); }
.alvo-recolher::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg) translate(-1px, -1px); margin-top: 0.2rem; }
.alvo-recolher:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.alvo-resumo { position: relative; list-style: none; display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.35rem; cursor: pointer; border-radius: inherit; transition: background 0.15s ease; }
.alvo-resumo::-webkit-details-marker { display: none; }
.alvo-resumo:hover { background: var(--bg-card-hover); }
.alvo-resumo:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.alvo-resumo::after { content: ""; flex: 0 0 auto; width: 0.55rem; height: 0.55rem; margin: 0 0.2rem 0 0.15rem; border-right: 2px solid var(--texto-sub); border-bottom: 2px solid var(--texto-sub); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease; }
.alvo-card[open] > .alvo-resumo::after { transform: rotate(-135deg) translate(-2px, -2px); }
.alvo-card[open] > .alvo-resumo { border-bottom: 1px solid var(--linha); border-radius: var(--raio) var(--raio) 0 0; }
.alvo-resumo-ic { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 0.85rem; display: grid; place-items: center; font-size: 1.3rem; color: var(--laranja); background: var(--laranja-fraco); }
.alvo-resumo-ic-longao { color: var(--azul); background: rgba(57, 135, 229, 0.14); }
.alvo-resumo-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.alvo-resumo-rot { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-sub); }
.alvo-resumo-nome { font-family: var(--fonte-titulo); font-size: 1.08rem; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alvo-resumo-meta { font-size: 0.82rem; color: var(--texto-sub); line-height: 1.35; }
.alvo-resumo-lado { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; text-align: right; }
.alvo-contagem { font-size: 0.8rem; color: var(--texto-sub); white-space: nowrap; }
.alvo-contagem b { font-family: var(--fonte-titulo); font-size: 1.55rem; font-weight: 800; color: var(--texto); letter-spacing: -0.01em; }
.alvo-fase-chip { font-size: 0.74rem; font-weight: 600; padding: 0.22rem 0.65rem; border-radius: 999px; background: var(--bg-elevado); border: 1px solid var(--linha); color: var(--texto); white-space: nowrap; }
.alvo-fase-passou { color: var(--texto-sub); }
.alvo-cta { font-size: 0.82rem; font-weight: 700; color: var(--laranja); white-space: nowrap; }
.alvo-corpo { padding: 1.1rem 1.35rem 1.35rem; }
.alvo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.65rem; }
.alvo-kpis .metrica { padding: 0.85rem 1rem; }
.alvo-kpis .metrica .rotulo { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; }
.alvo-kpis .metrica .valor { font-size: 1.4rem; margin: 0.3rem 0 0.15rem; }
.alvo-kpis .metrica .detalhe { font-size: 0.76rem; line-height: 1.3; }
.alvo-kpis .metrica .detalhe a { color: var(--azul); font-weight: 600; }
.alvo-notas { margin-top: 0.35rem; }
.alvo-notas .sub { font-size: 0.84rem; line-height: 1.5; }
.alvo-abas { display: flex; gap: 0.3rem; margin: 1.15rem 0 1rem; padding: 0.3rem; background: var(--bg-elevado); border: 1px solid var(--linha); border-radius: 999px; }
.alvo-aba { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 0.75rem; border: 0; border-radius: 999px; background: transparent; color: var(--texto-sub); font: inherit; font-size: 0.86rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.alvo-aba:hover { color: var(--texto); }
.alvo-aba[aria-selected="true"] { background: #2563eb; color: #ffffff; box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3); }
.alvo-aba:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.alvo-aba-painel[hidden] { display: none; }
.alvo-aba-painel > .grafico-card:first-child { margin-top: 0 !important; }
.alvo-vazio { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px dashed var(--linha-forte); border-radius: var(--raio-peq); }
.alvo-vazio .sub { margin: 0 !important; }
.alvo-tipo { transition: border-color 0.15s ease, background 0.15s ease; }
.alvo-tipo:has(input:checked) { border-color: var(--azul) !important; background: rgba(57, 135, 229, 0.08); }
.alvo-remover { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--linha); }
.alvo-remover .sub { font-size: 0.82rem; }
/* O ESTUDO DO PERCURSO: o botao de compartilhar ao lado do titulo, e as
   subidas como na pagina do pedal (08/10/2026). */
.estudo-alvo-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.estudo-subidas-topo { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; }
.estudo-legenda-dificuldade { display: flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; flex-shrink: 0; }
.estudo-rampa { display: inline-block; width: 84px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #10b981, #84cc16 30%, #eab308 55%, #f97316 80%, #ef4444); }
#estudo-subidas .grafico-caixa { height: 270px; }
.subida-no-dia { color: var(--texto); }
@media (max-width: 560px) {
  #estudo-subidas .grafico-caixa { height: 230px; }
}
.alvo-remover .botao { width: auto; flex: 0 0 auto; }
.alvo-aviso-km { display: flex; align-items: center; gap: 0.35rem; color: var(--texto) !important; }
.alvo-como { margin-top: 0.55rem; }
.alvo-como > summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--texto-sub); width: fit-content; }
.alvo-como > summary:hover { color: var(--texto); }
.alvo-como[open] > summary { margin-bottom: 0.15rem; }
@media (max-width: 560px) {
  .alvo-resumo { flex-wrap: wrap; gap: 0.6rem 0.75rem; padding: 0.95rem 1rem; }
  .alvo-resumo-texto { flex-basis: calc(100% - 5rem); padding-right: 1.4rem; }
  .alvo-resumo-nome { white-space: normal; }
  .alvo-resumo-lado { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; padding-left: 3.4rem; }
  .alvo-resumo::after { position: absolute; top: 1.35rem; right: 1.15rem; margin: 0; }
  .alvo-contagem b { font-size: 1.3rem; }
  .alvo-corpo { padding: 0.95rem 1rem 1.15rem; }
  .alvo-kpis { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .alvo-kpis .metrica { padding: 0.7rem 0.75rem; }
  .alvo-kpis .metrica .valor { font-size: 1.2rem; }
  .alvo-abas { border-radius: var(--raio-peq); }
  .alvo-aba { flex-direction: column; gap: 0.2rem; padding: 0.5rem 0.3rem; border-radius: 0.6rem; font-size: 0.76rem; }
  .alvo-remover { justify-content: flex-start; }
}

/* ---- BOTÃO DISCRETO DE VOLTAR AO TOPO (14/10/2026) ---- */
.btn-voltar-topo {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--linha);
  color: var(--texto-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 39;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
              background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn-voltar-topo.visivel {
  opacity: 0.92;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.btn-voltar-topo:hover {
  opacity: 1;
  background: var(--bg-card-hover);
  border-color: var(--linha-forte);
  color: var(--laranja);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px) scale(1.04);
}
.btn-voltar-topo:active {
  transform: translateY(0) scale(0.98);
}
@media (max-width: 768px) {
  .btn-voltar-topo {
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    right: 1.25rem;
    width: 42px;
    height: 42px;
  }
  body.sem-menu .btn-voltar-topo {
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

/* ---- AVISOS FECHÁVEIS DO PAINEL (14/10/2026) ---- */
.card-aviso-fechavel {
  position: relative;
}
.card-aviso-fechavel-corpo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.card-aviso-fechavel-conteudo {
  flex: 1;
  min-width: 0;
}
.btn-fechar-aviso {
  background: transparent;
  border: none;
  color: var(--texto-sub);
  width: 28px;
  height: 28px;
  border-radius: var(--raio-peq);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin: -0.25rem -0.25rem 0 0;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  line-height: 1;
}
.btn-fechar-aviso:hover {
  background: var(--bg-card-hover);
  color: var(--texto);
  transform: scale(1.08);
}
.btn-fechar-aviso:active {
  transform: scale(0.95);
}