/* ==================== PWA SAFE AREA FIX ==================== */
/* Garante que o conteúdo não passe por trás da status bar e navegação do celular */

:root {
  /* Variáveis para áreas seguras do dispositivo */
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

/* Configuração do HTML para cobrir toda a tela incluindo safe areas */
html {
  width: 100%;
  height: 100%;
  background-color: #00294B; /* Cor azul do Portal 360 */
}

/* Body com padding nas safe areas */
body {
  width: 100%;
  min-height: 100vh;
  /* Adiciona padding nas áreas seguras para evitar conteúdo por trás da status bar */
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

/* Para garantir compatibilidade com diferentes navegadores */
@supports (padding: max(0px)) {
  body {
    padding-top: max(0px, env(safe-area-inset-top));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    padding-left: max(0px, env(safe-area-inset-left));
  }
}

/* Header fixo deve respeitar a safe area */
header,
.header-executivo,
#header-executivo,
.header-container {
  padding-top: env(safe-area-inset-top, 0px) !important;
  top: 0 !important;
}

/* Modais em fullscreen também devem respeitar */
.modal-fullscreen,
.modal-galeria-backdrop {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Botões flutuantes devem respeitar a área inferior */
.floating-button,
.fab,
.btn-float {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Navegação inferior (se existir) */
.bottom-nav,
.nav-bottom,
.footer-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* iOS específico - previne bounce scroll passando por trás */
@supports (-webkit-touch-callout: none) {
  body {
    overscroll-behavior-y: none;
  }
}

/* Previne rolagem horizontal */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Para dispositivos com notch (iPhone X+) */
@media screen and (device-aspect-ratio: 375/812) {
  body {
    padding-top: max(44px, env(safe-area-inset-top));
  }
}

/* Para dispositivos Android com status bar */
@media (display-mode: standalone) {
  body {
    padding-top: max(24px, env(safe-area-inset-top));
  }
}

/* Quando em PWA instalado */
@media (display-mode: standalone), (display-mode: fullscreen) {
  html {
    background-color: #00294B;
  }
  
  /* Garante que a área superior tenha o fundo azul */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background-color: #00294B;
    z-index: 9999;
    pointer-events: none;
  }
  
  /* Garante que a área inferior tenha o fundo azul */
  body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-bottom, 0px);
    background-color: #00294B;
    z-index: 9999;
    pointer-events: none;
  }
}