/* ✅ VARIÁVEIS PARA CONTROLE DE ESPAÇAMENTO */
:root {
  --header-height: 0px; /* Pode ser sobrescrito se houver header fixo */
  --safe-area-top: env(safe-area-inset-top, 0px); /* Para dispositivos com notch */
  --tab-header-height: 48px; /* Altura padrão dos headers das tabs */
}

/* ✅ CLASSES UTILITÁRIAS PARA DIFERENTES ALTURAS DE HEADER */
/*
  MODAL OVERLAY SIMPLIFICADO:
  
  O modal agora usa z-index: 9999 e cobre TODA a aplicação,
  eliminando a necessidade de cálculos complexos de margem.
  
  ✅ COMO FUNCIONA:
  1. Modal overlay com z-index: 9999 sobrepõe tudo
  2. Painéis centralizados sem margens complexas
  3. Responsivo baseado apenas em max-width e max-height
  
  ✅ RESULTADO:
  - Modais sempre visíveis, independente de headers ou tabs
  - Sem cálculos complexos de padding-top
  - Melhor experiência em todos os dispositivos
*/

.has-header-small {
  --header-height: 60px;
}

.has-header-medium {
  --header-height: 80px;
}

.has-header-large {
  --header-height: 100px;
}

/* ✅ CLASSE ESPECÍFICA PARA PWA COM NOTCH */
.has-notch {
  --safe-area-top: env(safe-area-inset-top, 20px);
}

/* ✅ CLASSE PARA iOS ONDE STATUS BAR É MAIS ALTA */
.ios-device {
  --safe-area-top: env(safe-area-inset-top, 44px);
}

