/* Gerado por split de app/static/css/estilo_ph3a.css (fundação da reorganização de CSS, 03/08/2026). Ver app/utils/css_manifest.py pra ordem de carregamento. */

/* ============================================================
   PWA — Bottom TabBar (mobile + standalone apenas)
   ============================================================
   Visível só quando o app está instalado como PWA (display-mode:
   standalone) em viewport <= 991.98px. Em desktop ou Safari/Chrome
   "navegador normal", oculto via display:none — não polui a
   experiência web. Padrão visual de apps mobile (Instagram, WhatsApp). */

.ph3a-mobile-tabbar {
  display: none;  /* default — só aparece em mobile + standalone (regras abaixo) */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ph3a-white);
  border-top: 1px solid var(--ph3a-border);
  z-index: 1000;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  /* iOS Safari PWA tem bug onde position:fixed se comporta como sticky em
     contextos com scroll ancestral. Forçar composite layer próprio (GPU)
     via translateZ + will-change resolve — o tabbar fica REALMENTE fixo
     mesmo em standalone com scroll ativo. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  /* Backface visibility: hidden ajuda em iOS antigo a respeitar fixed. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ph3a-mobile-tabbar-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  min-height: 56px;
  background: transparent;
  border: 0;
  text-decoration: none;
  color: var(--ph3a-text-light);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  /* iOS Safari aplica ~300ms delay em <a> esperando double-tap zoom.
     touch-action: manipulation instrui o browser a não esperar — toque
     dispara navegação imediata. Combina com viewport=device-width. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Sem transition aqui — feedback visual no :active precisa ser
     instantâneo, não animado. Transition em color/bg torna a percepção
     de "delay" pior mesmo quando navegação é rápida. */
}

.ph3a-mobile-tabbar-item i {
  font-size: 20px;
  line-height: 1;
}

.ph3a-mobile-tabbar-item span {
  line-height: 1;
}

/* :hover SÓ em devices que de fato hovera (mouse desktop). Em touch
   (iOS PWA + Android), :hover causa "double-tap" — primeiro toque vira
   hover, segundo vira click. Bug clássico de PWA mobile com :hover. */
/* Fundo em rgba translúcido (não hex opaco) — sobrepõe a cor real do
   tabbar (navy claro ou dark-mode escuro) em vez de travar num tom claro
   fixo que ficava destoando (caixa clara "zoada") no tabbar em dark mode
   (Paulo 18/08/2026 — auditoria de contraste no hover). */
@media (hover: hover) and (pointer: fine) {
  .ph3a-mobile-tabbar-item:hover {
    color: var(--ph3a-primary);
    background: rgba(239, 89, 41, .08);
    text-decoration: none;
  }
}
/* :active dispara durante o toque — feedback visual IMEDIATO confirma
   que o sistema captou o tap, antes da navegação completar. Sem isso,
   usuário acha que "não funcionou" e toca de novo. */
.ph3a-mobile-tabbar-item:active {
  color: var(--ph3a-primary);
  background: rgba(239, 89, 41, .16);
  text-decoration: none;
  transform: scale(0.96);
}

.ph3a-mobile-tabbar-item.is-active {
  color: var(--ph3a-primary);
}

.ph3a-mobile-tabbar-item.is-active i {
  transform: scale(1.05);
}

/* Aparece SÓ em mobile + standalone (PWA instalada).
   Em web normal continua tudo igual ao que era antes. */
@media (max-width: 991.98px) and (display-mode: standalone) {
  .ph3a-mobile-tabbar {
    display: flex;
    align-items: stretch;
  }
  /* Empurra conteúdo principal pra cima do tabbar (altura ~64px + safe-area) */
  .ph3a-main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* FAB de suporte sobe pra não ficar atrás do tabbar */
  #phBtnSuporte.ph3a-fab-suporte {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* iOS Safari "Add to Home Screen" antigo (iOS 13-) usa 'navigator.standalone'
   ao invés de display-mode. Garantimos cobertura via classe injetada por JS
   no body quando detectado — ver registration script em base.html. */
@media (max-width: 991.98px) {
  body.ph3a-pwa-standalone .ph3a-mobile-tabbar {
    display: flex;
    align-items: stretch;
  }
  body.ph3a-pwa-standalone .ph3a-main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.ph3a-pwa-standalone #phBtnSuporte.ph3a-fab-suporte {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
}