Safe Áreas y Notch

Ningun botón, tab bar, FAB, ni área de toque debe quedar dentro de las zonas de safe-área-inset (env(safe-área-inset-*)). En iOS: inset superior varia por modelo (44-59pt en notch/island, 20pt en modelos viejos), inset inferior varia según home indicator (34pt en modelos con swipe, 0 en modelos con botón home).

La Dynamic Island (iPhone 14 Pro+) y el notch (iPhone X-13) son zonas de exclusión total: nada de la UI del app debe posicionarse detras de ellos. Usa safeAreaInsets.top en iOS o WindowInsetsCompat en Android para obtener el inset correcto por modelo. No hardcodees 44pt, los valores cambian entre generaciones.

En iPhones con home indicator (sin botón home), el área de 34pt sobre el borde inferior es zona de respeto: nada interactivo debe situarse ahí. La tab bar, bottom sheets, y CTAs deben sumar su altura al inset inferior de safe área. Ignora este inset en landscape, en orientación horizontal el home indicator cambia de lado.

La barra de estado (hora, batería, señal) esta siempre presente y ocupa el espacio del inset superior. En iOS puedes configurar el estilo (oscuro/claro) con preferredStatusBarStyle. No hagas overlap de contenido con la status bar, aunque sea visualmente posible en full-screen, los indicadores del sistema siempre quedan encima.

En landscape en iPhone la safe área incluye insets laterales adicionales (en el lado del notch/camara). La tab bar y elementos anclados deben respetar ambos insets laterales. En iPad, los insets laterales en landscape son 0 pero el multitasking agrega sus propios insets, usa additionalSafeAreaInsets para manejarlos.

El inset inferior de safe área (tipicamente 34pt en iPhone modern) debe anadirse a la altura de la tab bar y cualquier CTA fijo al fondo. Si la tab bar tiene 49pt de altura base, su frame total debe ser 49 + 34 = 83pt. En web, usa padding-bottom: env(safe-área-inset-bottom) en el contenedor sticky de la barra inferior.