/* ============================================
   ESTILOS ESPECÍFICOS PARA MODO PWA STANDALONE
   ============================================ */

/* Detectar si está en modo standalone (app instalada) */
@media all and (display-mode: standalone) {
    body {
        /* Ajustar altura para evitar cortes con la barra de navegación del sistema */
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
        overflow: hidden;
    }
    
    /* Ajustar para iPhone con notch */
    @supports (padding: max(0px)) {
        .mobile-container {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .app-header {
            padding-top: calc(20px + env(safe-area-inset-top));
        }
        
        .bottom-nav {
            padding-bottom: calc(10px + env(safe-area-inset-bottom));
            height: calc(60px + env(safe-area-inset-bottom));
        }
    }
    
    /* Asegurar que los iconos se vean bien */
    .nav-item i,
    .quick-link-icon i,
    .activity-icon i {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* Mejorar visibilidad en modo standalone */
    .mobile-container {
        background: #000 !important;
    }
    
    /* Ajustar scroll */
    .app-content {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* ============================================
   CORRECCIÓN PARA SAFARI IOS EN MODO PWA
   ============================================ */
   
/* Safari specific fixes */
_::-webkit-full-page-media, _:future, :root .safari_only {
    .bottom-nav {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}

/* Fix para iPhone y iPad */
@supports (-webkit-touch-callout: none) {
    .mobile-container {
        min-height: -webkit-fill-available;
    }
    
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid rgba(212, 175, 55, 0.3);
    }
    
    /* Mejorar tappability en iOS */
    .nav-item,
    .quick-link,
    .btn,
    button {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Ajustar tamaño de fuente para mejor legibilidad */
    body {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }
}

/* ============================================
   FIX PARA CHROME ANDROID EN MODO PWA
   ============================================ */
   
/* Chrome Android fixes */
@media all and (display-mode: standalone) and (max-width: 768px) {
    .mobile-container {
        /* Prevenir zoom en inputs */
        touch-action: pan-y pinch-zoom;
    }
    
    /* Mejorar rendimiento */
    .summary-card,
    .quick-link,
    .activity-item {
        will-change: transform;
        backface-visibility: hidden;
    }
    
    /* Asegurar que los iconos se rendericen bien */
    .material-icons, 
    .fas, 
    .far, 
    .fab {
        font-display: block;
    }
}

/* ============================================
   CORRECCIÓN ESPECÍFICA PARA ICONOS FONT AWESOME
   ============================================ */
   
/* Force Font Awesome icons to render properly in PWA mode */
.pwa-mode .fas,
.pwa-mode .far,
.pwa-mode .fab,
.pwa-mode .fa {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Specific icon fixes */
.pwa-mode .fa-home:before { content: "\f015" !important; }
.pwa-mode .fa-chart-line:before { content: "\f201" !important; }
.pwa-mode .fa-credit-card:before { content: "\f09d" !important; }
.pwa-mode .fa-bell:before { content: "\f0f3" !important; }
.pwa-mode .fa-user:before { content: "\f007" !important; }
.pwa-mode .fa-user-graduate:before { content: "\f501" !important; }
.pwa-mode .fa-calendar-check:before { content: "\f274" !important; }
.pwa-mode .fa-book:before { content: "\f02d" !important; }
.pwa-mode .fa-percentage:before { content: "\f541" !important; }

/* ============================================
   UTILITIES PARA MODO PWA
   ============================================ */

/* Clase para detectar PWA mode via JavaScript */
body.pwa-standalone {
    /* Indicadores visuales para modo standalone */
    --pwa-status-bar-height: env(safe-area-inset-top);
    --pwa-bottom-bar-height: env(safe-area-inset-bottom);
}

/* Status bar simulation for PWA */
.pwa-status-bar {
    height: env(safe-area-inset-top);
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
}

/* Loading state for PWA */
.pwa-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.pwa-loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    border-top-color: #D4AF37;
    animation: pwa-spin 1s linear infinite;
}

@keyframes pwa-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE FIXES PARA PWA
   ============================================ */

/* Small phones */
@media (max-width: 360px) and (display-mode: standalone) {
    .quick-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .nav-item span {
        font-size: 10px !important;
    }
    
    .nav-item i {
        font-size: 1.1rem !important;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) and (display-mode: standalone) {
    .mobile-container {
        max-width: 768px !important;
        margin: 0 auto !important;
        border-left: 1px solid #333;
        border-right: 1px solid #333;
    }
}

/* Landscape mode fixes */
@media (orientation: landscape) and (max-height: 500px) and (display-mode: standalone) {
    .mobile-container {
        padding-bottom: 0 !important;
    }
    
    .bottom-nav {
        position: relative !important;
        margin-top: 20px;
    }
    
    .app-header {
        padding: 10px 15px !important;
    }
}