/* =========================================== */
/* OPTIMIZACIONES MÓVILES - Performance CSS */
/* =========================================== */

/* Optimización para scroll suave en iOS */
body {
    -webkit-overflow-scrolling: touch;
}

/* Prevenir zoom no deseado en inputs en iOS */
input, select, textarea {
    font-size: 16px !important;
}

/* Mejorar rendimiento de animaciones */
.sidebar,
.menu-toggle,
.sidebar-overlay,
.btn-login-top {
    will-change: transform;
}

/* Reducir animaciones en dispositivos de bajo rendimiento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Optimizar GPU para transformaciones */
.preview-card,
.card,
.sidebar,
.menu-toggle {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Touch optimizations */
button, a, .btn-procesar, .btn-analizar, .btn-eliminar {
    -webkit-tap-highlight-color: rgba(0, 255, 255, 0.2);
    touch-action: manipulation;
}

/* Prevenir scroll del body cuando el menú móvil está abierto */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* En móvil, asegurar que el sidebar está oculto por defecto */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 999 !important;
    }
    
    .sidebar.active {
        transform: translateX(0) !important;
    }
}

/* Prevenir selección de texto no deseada en elementos interactivos */
.menu-toggle,
.sidebar-overlay,
details summary {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* Mejorar legibilidad de texto en móviles */
@media (max-width: 768px) {
    body {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Optimizar imágenes para móviles */
img {
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
}

/* Mejor experiencia de scroll */
.content,
.main-content {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Reducir complejidad visual en móviles pequeños */
@media (max-width: 480px) {
    /* Simplificar sombras */
    .card,
    .preview-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Reducir blur effects para mejor performance */
    .sidebar,
    footer {
        backdrop-filter: blur(8px) !important;
    }
    
    /* Simplificar gradientes */
    body::before,
    body::after {
        opacity: 0.5;
    }
}

/* Mejoras para pantallas OLED (ahorro de batería) */
@media (prefers-color-scheme: dark) {
    body {
        background: #000;
    }
}

/* Optimización para carga diferida */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Prevenir FOUC (Flash of Unstyled Content) */
html {
    visibility: visible;
    opacity: 1;
}

/* Optimizar área táctil mínima (44x44px recomendado) */
@media (max-width: 768px) {
    .menu li,
    button,
    .btn-login-top,
    details summary {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Safe area para dispositivos con notch */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .menu-toggle {
        top: max(20px, env(safe-area-inset-top));
        left: max(20px, env(safe-area-inset-left));
    }
    
    .top-right {
        top: max(18px, env(safe-area-inset-top));
        right: max(18px, env(safe-area-inset-right));
    }
    
    footer {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* Landscape mode en móviles */
@media (max-width: 768px) and (orientation: landscape) {
    .logo-card {
        min-height: 150px !important;
    }
    
    .main-content {
        padding: 60px 15px 20px 15px !important;
    }
    
    .sidebar {
        width: 200px;
    }
}

/* Mejoras para hover en dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    .card:hover,
    .preview-card:hover,
    .menu li:hover {
        transform: none !important;
    }
    
    /* Usar :active en lugar de :hover para táctil */
    .card:active,
    .preview-card:active {
        transform: scale(0.98);
    }
}