/* =====================================================================
   ui-hub-mobile.css — o hub no celular (feature hub-mobile, 13/09/2026).

   UM arquivo para os TRÊS hubs (Pos_Edital_Mapeado_PMMA/PPRN/PPMA), carregado
   DEPOIS do <style> inline de cada um: mesma especificidade, vence por
   ordem. Aqui moram só as regras do hub que NÃO são componente React —
   hero, emblema, chips, o padding do body sob a barra. Os componentes
   (barra inferior, cronômetro, botões flutuantes, cards, KPIs) pintam-se
   em public_html/qg/react/qg-react.css.

   Tokens em public_html/qg/qg-tokens-base.css (os hubs já o carregam).
   Breakpoints repetem o contrato dos tokens: 340 / 480 / 768 / 900 —
   media query não lê var(), e o teste hubMobile.tokens confere os dois.

   Regra de ouro do mobile: nada tem largura fixa maior que a viewport,
   nada se posiciona por coordenada absoluta que só serve numa largura,
   e o decorativo fica ATRÁS do que informa.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. CAMADAS — o hero controla o emblema; o conteúdo fica na frente.
   --------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden}
.hero-in{position:relative;z-index:var(--qg-z-conteudo)}
.emblem{z-index:var(--qg-z-decor);pointer-events:none;user-select:none}
.hero::after{z-index:var(--qg-z-decor)}

/* ---------------------------------------------------------------------
   2. CELULAR (≤ 480): emblema pequeno e apagado no canto; chips em duas
      colunas que quebram linha; body termina acima da barra.
   --------------------------------------------------------------------- */
@media (max-width:480px){
  .emblem{width:48px;height:48px;top:12px;right:12px;opacity:.35}
  .hero-in{padding:20px var(--qg-gutter-m) 18px}
  .hero .badge{margin-bottom:10px}
  .hero-dias{margin-left:0;margin-top:6px;max-width:100%;flex-wrap:wrap}
  .hero h1{font-size:clamp(26px,8vw,32px);overflow-wrap:anywhere}
  .statrow{gap:8px}
  .statrow .chip{flex:1 1 calc(50% - 8px);min-width:0;white-space:normal;overflow-wrap:anywhere;padding:8px 12px}
  .statrow .chip.pts{flex-basis:100%}
  .statrow .prog{flex-basis:100%;min-width:0}
  .toolrow .tool{flex:1 1 calc(50% - 10px);min-width:0;justify-content:flex-start;overflow-wrap:anywhere}
}

/* ---------------------------------------------------------------------
   3. MUITO ESTREITO (≤ 340): o emblema some; tudo em uma coluna.
   --------------------------------------------------------------------- */
@media (max-width:340px){
  .emblem{display:none}
  .statrow .chip,.toolrow .tool{flex-basis:100%}
}

/* ---------------------------------------------------------------------
   4. O CHÃO — sob a barra inferior (≤ 900, o breakpoint do rail).
      O conteúdo termina acima de: barra + safe area + um respiro.
      O cronômetro e os botões flutuantes calculam o próprio bottom a
      partir do MESMO --qg-chao (qg-react.css) — uma verdade só.
      As laterais (--qg-safe-l/r) só valem em paisagem, sob o recorte da
      tela: os hubs declaram viewport-fit=cover (sem isso o iOS 26 não
      entrega env() nenhum e a barra para acima da base — 13/09).
   --------------------------------------------------------------------- */
@media (max-width:900px){
  body,body.tem-rail{padding-bottom:calc(var(--qg-chao) + var(--qg-s4x));padding-left:var(--qg-safe-l);padding-right:var(--qg-safe-r)}
  /* a barra legada (fallback sem React) também respeita a safe area */
  #qg-rail{padding-bottom:calc(6px + var(--qg-safe-b));z-index:var(--qg-z-nav)}
  /* com a ilha BottomNavigation montada (body.tem-nav), o rail legado some */
  body.tem-nav #qg-rail{display:none}
}

/* ---------------------------------------------------------------------
   5. MOVIMENTO REDUZIDO — o hub tem transições próprias; aqui só o que
      este arquivo introduz (nada), deixado explícito para o próximo.
   --------------------------------------------------------------------- */