/* Associação Clube v33.3.51 — Native Mobile PWA Experience PRO
   Camada final: experiência mobile/PWA consistente sem alterar desktop. */
:root{
  --v3351-safe-top:env(safe-area-inset-top,0px);
  --v3351-safe-right:env(safe-area-inset-right,0px);
  --v3351-safe-bottom:env(safe-area-inset-bottom,0px);
  --v3351-safe-left:env(safe-area-inset-left,0px);
  --v3351-bottom-nav:64px;
  --v3351-vh:100dvh;
}
html.v3351-pwa-standalone,html.v3351-pwa-mobile{min-height:100%;max-width:100%;overflow-x:hidden!important}
html.v3351-pwa-standalone body,html.v3351-pwa-mobile body{max-width:100%;min-height:var(--v3351-vh);overflow-x:hidden!important;overscroll-behavior-x:none;-webkit-tap-highlight-color:transparent}
html.v3351-pwa-standalone :is(a,button,[role="button"],input,select,textarea),html.v3351-pwa-mobile :is(a,button,[role="button"],input,select,textarea){touch-action:manipulation}

@media (max-width:900px){
  html,body{max-width:100%!important;overflow-x:hidden!important}
  body{padding-left:var(--v3351-safe-left)!important;padding-right:var(--v3351-safe-right)!important}
  img,svg,video,canvas,iframe{max-width:100%}
  .conteudo-admin,.admin-main,.membro-main,.portal-admin-main,main{min-width:0!important;max-width:100%!important}
  .table-container,.table-wrap{max-width:100%!important}

  /* Admin da associação: header estilo app, sem ocupar área útil demais. */
  body.v33321-admin-mobile .topbar-admin{
    min-height:64px!important;height:auto!important;
    padding:calc(7px + var(--v3351-safe-top)) 10px 7px!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:8px!important;align-items:center!important;
  }
  body.v33321-admin-mobile .assoc-app-menu-button{width:40px!important;height:40px!important;min-width:40px!important;border-radius:13px!important;margin:0!important}
  body.v33321-admin-mobile .topbar-branding{min-width:0!important;gap:8px!important}
  body.v33321-admin-mobile .topbar-branding .ac49-platform-logo,
  body.v33321-admin-mobile .topbar-branding .topbar-logo,
  body.v33321-admin-mobile .topbar-branding .topbar-logo-fallback{width:38px!important;height:38px!important;min-width:38px!important}
  body.v33321-admin-mobile .topbar-branding strong{font-size:.88rem!important;line-height:1.08!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important}
  body.v33321-admin-mobile .topbar-subtitle{display:block!important;font-size:.66rem!important;line-height:1.15!important;max-width:min(47vw,220px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.v33321-admin-mobile .topbar-actions{gap:5px!important;min-width:0!important}
  body.v33321-admin-mobile .topbar-actions :is(.v134-collapse,.v134-dark-toggle,.assoc-theme-toggle){width:38px!important;height:38px!important;min-width:38px!important;border-radius:12px!important}

  /* Conteúdo: respeita a barra nativa e nunca fica por baixo dela. */
  body.v33321-admin-mobile .conteudo-admin{
    width:100%!important;max-width:100%!important;min-width:0!important;
    padding:10px 10px calc(var(--v3351-bottom-nav) + var(--v3351-safe-bottom) + 22px)!important;
    overflow-x:clip!important;
  }
  body.v33321-admin-mobile .conteudo-admin>*{min-width:0!important;max-width:100%!important}
  body.v33321-admin-mobile :is(.columns,.column,.level,.level-left,.level-right,.field,.control){min-width:0!important}

  /* KPIs mais úteis no celular: duas colunas quando cabem. */
  body.v33321-admin-mobile :is(.v139-kpis,.v139-mini-grid,.top1020-metrics){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  body.v33321-admin-mobile .v139-kpi{min-height:96px!important;padding:13px!important;border-radius:17px!important}
  body.v33321-admin-mobile .v139-kpi strong{font-size:1.35rem!important}

  /* Campos e botões com área de toque nativa, sem altura exagerada. */
  body.v33321-admin-mobile :is(.input,.select select,.button){min-height:42px}
  body.v33321-admin-mobile textarea.textarea{min-height:92px}

  /* Navegação inferior definitiva. */
  body.v33321-admin-mobile .assoc-mobile-bottom-nav{
    position:fixed!important;
    left:max(8px,var(--v3351-safe-left))!important;
    right:max(8px,var(--v3351-safe-right))!important;
    bottom:max(7px,var(--v3351-safe-bottom))!important;
    width:auto!important;height:var(--v3351-bottom-nav)!important;
    padding:5px!important;gap:2px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    border-radius:22px!important;z-index:1200!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  }
  body.v33321-admin-mobile .assoc-mobile-bottom-nav>a,
  body.v33321-admin-mobile .assoc-mobile-bottom-nav>button{
    min-width:0!important;min-height:52px!important;padding:4px 2px!important;
    border-radius:17px!important;gap:2px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    overflow:hidden!important;
  }
  body.v33321-admin-mobile .assoc-mobile-bottom-nav :is(i,.icon){font-size:1.08rem!important;line-height:1!important}
  body.v33321-admin-mobile .assoc-mobile-bottom-nav span{font-size:.58rem!important;line-height:1.05!important;white-space:nowrap!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body.v33321-admin-mobile .footer-app{display:none!important}

  /* Instalação e atualização nunca cobrem a barra inferior. */
  body.v33321-admin-mobile .v33253-pwa-install{
    right:10px!important;left:auto!important;
    bottom:calc(var(--v3351-bottom-nav) + var(--v3351-safe-bottom) + 16px)!important;
    width:min(270px,calc(100vw - 20px))!important;max-width:270px!important;
    min-height:50px!important;padding:7px 9px!important;border-radius:15px!important;z-index:1250!important;
  }
  body.v33321-admin-mobile .v33253-pwa-install-icon{width:34px!important;height:34px!important;min-width:34px!important;border-radius:10px!important}
  body.v33321-admin-mobile .v33253-pwa-install strong{font-size:.75rem!important}
  body.v33321-admin-mobile .v33253-pwa-install small{font-size:.61rem!important}
  body.v33321-admin-mobile .v33253-pwa-toast{
    left:10px!important;right:10px!important;width:auto!important;
    bottom:calc(var(--v3351-bottom-nav) + var(--v3351-safe-bottom) + 74px)!important;
    border-radius:13px!important;font-size:.7rem!important;z-index:1300!important;
  }

  /* Portal do membro e Portal Admin também ganham safe-area/viewport real. */
  .membro-app,.portal-admin-app{min-height:var(--v3351-vh)!important;max-width:100%!important;overflow-x:hidden!important}
  .membro-main,.portal-admin-main{padding-bottom:calc(var(--v3351-bottom-nav) + var(--v3351-safe-bottom) + 18px)!important}
  .membro-bottom-nav,.assoc-app-bottom-nav{
    padding-bottom:max(5px,var(--v3351-safe-bottom))!important;
  }
}

@media (max-width:380px){
  body.v33321-admin-mobile :is(.v139-kpis,.v139-mini-grid,.top1020-metrics){grid-template-columns:1fr!important}
  body.v33321-admin-mobile .topbar-subtitle{max-width:40vw!important}
}

/* Standalone: visual mais próximo de aplicativo, sem espaços de browser. */
@media (display-mode:standalone){
  html{background:var(--v33256-bg,#f5f7fb)}
  body{min-height:100dvh!important}
  body.v33321-admin-mobile .topbar-admin{position:sticky!important;top:0!important}
}

/* Dark mode: superfícies flutuantes legíveis e coerentes. */
@media (max-width:900px){
  html[data-theme="dark"] body.v33321-admin-mobile .assoc-mobile-bottom-nav,
  body.v33321-admin-mobile.v134-dark .assoc-mobile-bottom-nav{
    background:rgba(7,20,37,.94)!important;border-color:rgba(96,165,250,.22)!important;
    box-shadow:0 16px 38px rgba(0,0,0,.38)!important;
  }
}