/* AS REGRAS DE APLICATIVO DO CELULAR (lote 167, 06/10/2026; a folha reorganizada no lote 168). Folha propria,
   carregada DEPOIS do overpower.css e ANTES do celular.css (base.html): ela muda layout e comportamento da casca no
   celular (cabecalho e barra de baixo solidos, o menu como folha que sobe de baixo, o toque) - o celular.css continua
   so com tamanhos. Os seletores sao mais especificos que os do Overpower de proposito. */
/* ================================================================== O APP NO CELULAR (lote 167, 06/10/2026)
   O dono: "as animacoes no celular sao um pouquinho bugadas... o bot nao parece tao bem organizado dentro do celular...
   queria que tivesse mais cara de aplicativo mesmo, e que fosse ainda mais pratico de mexer". O que o raio-x achou
   (scratchpad/celular_raio_x.py, 390 px, processador 4x mais lento): o quadro por segundo estava bom; o "bugado" era
   (1) o vidro desfocado do cabecalho e da barra de baixo - o celular refaz o desfoque a cada quadro da rolagem e o
   texto aparece embaralhado por tras; (2) o "revelar ao rolar" - rolando rapido, o cartao chega vazio e pisca;
   (3) efeito de passar o mouse que no toque fica PRESO (o cartao sobe 3 px e nao desce); e (4) o "Mais" abria a
   gaveta do computador, com o pe (conta, nivel, ver como, sair) comendo metade da tela - so 9 telas a vista.
   Tudo aqui so vale ate 720 px (onde existe a barra de baixo) ou no toque; o computador nao muda. */
@media (max-width: 720px) {
  /* o cabecalho e a barra de baixo: solidos, sem vidro (e mais especificos que os do Overpower, que vem depois) */
  html body .area > header.comando { background-color: var(--fundo); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.tema-claro body .area > header.comando { background-color: var(--painel); }
  html body .casca > nav.barra-de-baixo { background-color: var(--fundo); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .35); -webkit-user-select: none; user-select: none; }
  html.tema-claro body .casca > nav.barra-de-baixo { background-color: var(--painel); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08); }
  /* o "Mais" de baixo e quem abre o menu: o hamburguer do canto sai (app nao tem os dois) */
  html body .comando > .abrir-menu { display: none; }
  /* a aba atual ganha o tracinho em cima, como nos apps */
  .barra-de-baixo a { position: relative; }
  .barra-de-baixo a:not(.central)::before { content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 3px; margin-left: -11px;
    border-radius: 0 0 3px 3px; background: currentColor; opacity: 0; transform: scaleX(.3); transition: opacity .2s, transform .25s var(--curva); }
  .barra-de-baixo a.atual:not(.central)::before { opacity: 1; transform: none; }
  /* com a folha aberta, o "Mais" acende */
  body.menu-aberto .barra-de-baixo [data-abrir-menu] { color: var(--vermelho-claro); }
  html.tema-overpower body.menu-aberto .barra-de-baixo [data-abrir-menu] { color: var(--op-ouro-vivo); }
  /* o periodo de Resultados numa linha so, que corre para o lado
     (body.v3: o painel.css quebrava a barra em duas linhas com body.v3 .barra-de-periodo) */
  body.v3 .conteudo .barra-de-periodo { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.v3 .conteudo .barra-de-periodo::-webkit-scrollbar { display: none; }
  body.v3 .conteudo .barra-de-periodo > * { flex: none; }
  /* titulo de cartao com a esfera escondida do dia (jornada.js poe o ★ no fim) passava 9 px da caixa: quebra a linha */
  body.v3 .conteudo .cartao-cabeca h2 { flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }

  /* ---- O MENU VIRA FOLHA: sobe de baixo, com as telas em icones (4 por linha) e a conta compacta ----
     A ORGANIZACAO (lote 168, o dono: "ta muito mal organizado... o radar fica so o icone sozinho e fica esquisito"):
     grupo com UM item (Radar) perde o titulo e vira um botao largo de uma linha inteira; grupo com DOIS (Resultados)
     vira dois botoes largos lado a lado; so grupo com tres ou mais fica em quadradinhos. O base.html marca cada
     grupo (p.so-um / a[data-largo] / a[data-poucos]); no computador os atributos nao fazem nada. */
  html body .casca > .trilho-lateral, html body.trilho-recolhido .casca > .trilho-lateral {
    inset: auto 0 0 0; width: auto; max-height: 88vh; max-height: 88dvh; z-index: 70;
    border: 1px solid var(--linha); border-bottom: 0; border-radius: 26px 26px 0 0;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(104%); transition: transform .26s cubic-bezier(.4, 0, 1, 1); box-shadow: none;
    -webkit-user-select: none; user-select: none; will-change: transform;
  }
  /* abrindo, uma mola curta (passa 1% e volta); fechando, seco e rapido */
  html body.menu-aberto .casca > .trilho-lateral { transform: none; transition: transform .38s cubic-bezier(.2, 1.05, .32, 1);
    box-shadow: 0 -24px 70px rgba(0, 0, 0, .6); }
  .sombra-do-menu { z-index: 65; }
  .puxador-da-folha { display: block; flex: none; position: sticky; top: 0; z-index: 3; height: 22px; margin-bottom: -22px; touch-action: none; }
  .puxador-da-folha::before { content: ""; position: absolute; left: 50%; top: 8px; width: 42px; height: 5px; margin-left: -21px;
    border-radius: 99px; background: var(--linha-viva); }
  /* o alto da folha: a marca e o estado, mais baixos */
  .trilho-lateral .marca-do-trilho { flex: none; height: 64px; padding-top: 10px; border-bottom: 0; }
  .trilho-lateral .trilho-pino, .trilho-lateral .marcador-do-trilho { display: none; }
  /* as telas em grade */
  /* flex, nao grade: cada grupo escolhe quantos por linha (a[data-quantos], vindo do base.html) - 5 itens em UMA
     linha de 5, em vez de 4 + 1 sozinho; 6 em duas de 3; o resto em 4 */
  .trilho-lateral .trilho-nav { --por-linha: 4; flex: none; overflow: visible; display: flex; flex-wrap: wrap; align-items: stretch;
    gap: 8px 6px; padding: 2px 12px 14px; }
  .trilho-lateral .grupo-do-trilho { flex: 0 0 100%; height: auto; margin: 12px 0 0; padding-left: 6px; }
  .trilho-lateral .grupo-do-trilho:first-of-type { margin-top: 2px; }
  .trilho-lateral .grupo-do-trilho[data-so-um] { display: none; }
  .trilho-lateral .grupo-do-trilho[data-so-um] + a { margin-top: 12px; }
  html body .trilho-lateral .trilho-nav a { flex: 0 0 calc((100% - 6px * (var(--por-linha) - 1)) / var(--por-linha)); }
  html body .trilho-lateral .trilho-nav a[data-quantos="5"] { --por-linha: 5; }
  html body .trilho-lateral .trilho-nav a[data-quantos="6"] { --por-linha: 3; }
  html body .trilho-lateral .trilho-nav a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px;
    height: auto; min-height: 86px; margin: 0; padding: 9px 2px 8px; border-radius: 18px; white-space: normal; overflow: hidden;
    text-align: center; -webkit-tap-highlight-color: transparent; color: var(--fraco); }
  html body .trilho-lateral .trilho-nav a::before, html body .trilho-lateral .trilho-nav a::after { display: none; }
  /* o icone: um quadradinho de app, com relevo, e o traco mais grosso */
  html body .trilho-lateral .trilho-nav a .icone { width: 50px; height: 50px; padding: 13px; box-sizing: border-box; border-radius: 16px;
    background: linear-gradient(160deg, var(--painel-3, var(--painel-2)), var(--painel)); border: 1px solid var(--linha-viva);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 12px rgba(0, 0, 0, .25);
    color: var(--texto); stroke-width: 2; justify-self: auto; transform: none; filter: none; }
  html body .trilho-lateral .trilho-nav a[data-quantos="5"] .icone { width: 46px; height: 46px; padding: 12px; }
  html body .trilho-lateral .trilho-nav a[data-quantos="5"] span { font-size: 10.5px; }
  html body .trilho-lateral .trilho-nav a span { font: 600 11px/1.2 var(--fonte-texto); white-space: normal; color: inherit;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* a tela atual: o quadradinho na cor do tema (o mesmo do botao do meio da barra) */
  html body .trilho-lateral .trilho-nav a.atual { background: none; box-shadow: none; color: var(--texto); }
  html body .trilho-lateral .trilho-nav a.atual .icone { color: #fff; border-color: transparent;
    background: linear-gradient(145deg, #e83a55, var(--vermelho) 42%, #7d0c1e); box-shadow: 0 8px 22px rgba(224, 32, 63, .4); }
  html.tema-overpower body .trilho-lateral .trilho-nav a.atual .icone { color: var(--op-tinta-no-ouro, #1a1200);
    background: linear-gradient(145deg, var(--op-ouro-vivo), var(--op-ouro) 45%, var(--op-ouro-escuro)); box-shadow: 0 8px 22px rgba(var(--op-ouro-rgb), .4); }
  html.tema-claro body .trilho-lateral .trilho-nav a:not(.atual) .icone { background: linear-gradient(160deg, #fff, var(--painel-2)); box-shadow: 0 3px 10px rgba(0, 0, 0, .08); }
  /* os botoes largos (grupo de 1 ou 2 itens): icone a esquerda, nome a direita, a seta no canto */
  html body .trilho-lateral .trilho-nav a[data-largo], html body .trilho-lateral .trilho-nav a[data-poucos] {
    flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 0; padding: 7px 12px 7px 7px; text-align: left;
    border: 1px solid var(--linha); background: var(--painel); }
  html body .trilho-lateral .trilho-nav a[data-largo] { flex-basis: 100%; }
  html body .trilho-lateral .trilho-nav a[data-poucos] { flex-basis: calc(50% - 3px); }
  html body .trilho-lateral .trilho-nav a[data-largo] .icone, html body .trilho-lateral .trilho-nav a[data-poucos] .icone { width: 44px; height: 44px; padding: 11px; border-radius: 14px; flex: none; }
  html body .trilho-lateral .trilho-nav a[data-largo] span, html body .trilho-lateral .trilho-nav a[data-poucos] span { font-size: 13px; -webkit-line-clamp: 1; flex: 1 1 auto; min-width: 0; }
  html body .trilho-lateral .trilho-nav a[data-largo]::after { content: ""; display: block; width: 8px; height: 8px; flex: none; margin-right: 4px;
    border-right: 2px solid var(--fraco-2); border-bottom: 2px solid var(--fraco-2); transform: rotate(-45deg); }
  html body .trilho-lateral .trilho-nav a[data-largo].atual, html body .trilho-lateral .trilho-nav a[data-poucos].atual { border-color: color-mix(in srgb, var(--vermelho) 45%, transparent); }
  html.tema-overpower body .trilho-lateral .trilho-nav a[data-largo].atual, html.tema-overpower body .trilho-lateral .trilho-nav a[data-poucos].atual { border-color: rgba(var(--op-ouro-rgb), .5); }
  body.menu-aberto .trilho-lateral .trilho-nav a { animation: folha-item-entra .28s var(--curva) backwards;
    animation-delay: calc(min(var(--ordem-menu, 0), 12) * 14ms + 60ms); }
  /* o pe da folha: a conta numa linha, os botoes numa fileira so */
  .trilho-lateral .trilho-pe { flex: none; padding: 12px 14px 16px; gap: 10px; white-space: normal; border-top-color: var(--linha); }
  html body .trilho-lateral .acoes-da-conta { display: flex; gap: 6px; }
  html body .trilho-lateral .acoes-da-conta .acao-da-conta { flex: 1 1 0; min-width: 0; }
  .trilho-lateral .acao-da-conta { height: 50px; flex-direction: column; gap: 4px; font-size: 10.5px; padding: 0 4px; }
  .trilho-lateral .acao-da-conta span { max-width: 100%; white-space: normal; text-align: center; line-height: 1.15; }
}
@keyframes folha-item-entra { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@media (min-width: 721px) { .puxador-da-folha { display: none; } }
html.menos-movimento body.menu-aberto .trilho-lateral .trilho-nav a { animation: none; }
html.menos-movimento body .casca > .trilho-lateral { transition-duration: .01ms; }

/* ---- NO TOQUE: efeito de "passar o mouse" nao fica preso, e o dedo ganha resposta (afunda um pouco) ---- */
@media (hover: none) {
  .numero:hover, .kpi:hover, .numeros .numero:hover, a.pilula:hover, .chip:hover, .barra-de-periodo a:hover,
  .lista-de-posts li:hover, .packs-de-emoji li:hover, .atalho-da-jornada:hover, .opcao-do-radar:hover:not(:disabled),
  .acao-da-conta:hover { transform: none; }
  .trilho-nav a:hover .icone, .marca-do-trilho:hover .logo-do-trilho { transform: none; filter: none; }
  :is(.acao, .acao-leve, .chip, .barra-de-periodo a, .trilho-nav a, .acao-da-conta, .opcao-do-radar, .atalho-da-jornada):active {
    transform: scale(.97); transition: transform .08s; }
  .barra-de-baixo a:not(.central):active svg { transform: scale(.9); }
}
a, button, label, summary, [role="button"], input[type="checkbox"], input[type="radio"], select {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* instalado como app: a tela nao "estica" alem do fim (o elastico mostrava o fundo por tras do cabecalho) */
@media (display-mode: standalone) { html, body { overscroll-behavior-y: none; } }

/* ---- O CONVITE PARA COMPARTILHAR: no celular, o botao do proprio aparelho (WhatsApp, Telegram, Instagram...) ---- */
[data-compartilhar][hidden] { display: none !important; }
@media (max-width: 720px) {
  .tem-compartilhar .indique-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tem-compartilhar .indique-botoes > a { display: none; }
  .tem-compartilhar .indique-botoes > * { width: 100%; justify-content: center; }
}