/* =============================================
   SOLUCIÓN ÚNICA IPHONE SAFE AREA - RAINIFY
   
   Agregar ESTE ARCHIVO como nuevo CSS en el <head>
   después de todos los demás CSS
   
   <link rel="stylesheet" href="css/iphone-fix.css">
   ============================================= */

/* ==================== 1. MAPA ==================== */

/* Logo (arriba izquierda) */
.map-wrapper > div[style*="position: fixed"][style*="top: 15px"][style*="left: 15px"] {
    top: calc(15px + env(safe-area-inset-top)) !important;
}

/* Avatar (arriba derecha) - YA FUNCIONA */
#map-user-avatar {
    top: calc(15px + env(safe-area-inset-top)) !important;
}

/* FAB Stack - YA FUNCIONA */
#fab-stack {
    bottom: calc(90px + env(safe-area-inset-bottom)) !important;
}

/* ==================== 2. FORECAST ==================== */

.forecast-page {
    padding-top: calc(20px + env(safe-area-inset-top)) !important;
}

/* ==================== 3. ACTIVITY (SOCIAL) ==================== */

.feed-container,
[class*="activity"] {
    padding-top: calc(20px) !important; /* + env(safe-area-inset-top)) */
}

/* ==================== 4. MODALES DE PROFILE ==================== */

/* Modal overlay con padding top */
.profile-page .modal-overlay {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Modal header con safe area adicional */
.profile-page .modal-header {
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
}

/* Botón cerrar del modal */
.profile-page .modal-close {
    margin-top: env(safe-area-inset-top);
}

/* ==================== 5. NOTIFICACIONES DRAWER ==================== */

/* Header del drawer */
.notification-drawer .notification-header {
    padding-top: calc(20px + env(safe-area-inset-top)) !important;
}

/* Botón cerrar */
.notification-drawer .notification-close {
    margin-top: env(safe-area-inset-top);
}

/* ==================== 6. BOTTOM NAV (YA FUNCIONA) ==================== */

/* El bottom-nav ya tiene el cálculo correcto */
.bottom-nav {
    bottom: max(15px, env(safe-area-inset-bottom)) !important;
}

/* ==================== 7. STATS Y OTROS MÓDULOS ==================== */

/* Cualquier página/módulo con padding top */
.stats-page,
.module-container,
[class*="-page"] {
    padding-top: calc(20px + env(safe-area-inset-top)) !important;
}

/* ==================== 8. FALLBACK GLOBAL ==================== */

/* Cualquier header fixed cerca del top (excepto los que ya arreglamos) */
header[style*="position: fixed"],
[class*="header"][style*="position: fixed"]:not(.profile-header):not(.map-header),
.page-header,
.view-header {
    padding-top: calc(15px + env(safe-area-inset-top)) !important;
}



/* ==================== NOTAS ==================== */

/*
IMPORTANTE:
- Este archivo debe cargarse DESPUÉS de todos los CSS
- NO modifiques main.css, modal.css, forecast.css, etc
- Este archivo sobrescribe con !important para asegurar que funcione
- En Android, env(safe-area-inset-top) = 0px, así que no afecta

VALORES TÍPICOS:
- iPhone 14 Pro Max: top = 59px, bottom = 34px
- iPhone SE: top = 20px, bottom = 0px
- Android: top = 0px, bottom = 0px
*/