/**
 * Script para verificar optimizaciones 1366x768
 * Muestra mensaje visual cuando las optimizaciones están activas
 */

document.addEventListener('DOMContentLoaded', function() {
    // Detectar resolución específica
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    console.log(`🎯 Resolución detectada: ${width}x${height}`);
    
    // Si es 1366x768 o cercano, mostrar indicador
    if (width >= 1300 && width <= 1450) {
        console.log('🎯 OPTIMIZACIONES 1366x768 ACTIVAS');
        
        // Crear indicador visual temporal
        const indicator = document.createElement('div');
        indicator.innerHTML = `
            <div style="
                position: fixed;
                top: 20px;
                right: 20px;
                background: linear-gradient(45deg, #ff6b6b, #ee5a52);
                color: white;
                padding: 15px 25px;
                border-radius: 10px;
                font-family: Arial, sans-serif;
                font-weight: bold;
                font-size: 14px;
                z-index: 10000;
                box-shadow: 0 4px 20px rgba(0,0,0,0.3);
                border: 2px solid white;
                animation: pulse 2s infinite;
            ">
                🎯 OPTIMIZACIÓN 1366x768<br>
                <small style="font-size: 12px; opacity: 0.9;">
                    Resolución: ${width}x${height}<br>
                    CSS Específico Cargado ✅
                </small>
            </div>
            <style>
                @keyframes pulse {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.05); }
                    100% { transform: scale(1); }
                }
            </style>
        `;
        
        document.body.appendChild(indicator);
        
        // Eliminar el indicador después de 5 segundos
        setTimeout(() => {
            if (indicator.parentNode) {
                indicator.parentNode.removeChild(indicator);
            }
        }, 5000);
        
        // También forzar algunos estilos para asegurar que se vean
        const forceStyles = document.createElement('style');
        forceStyles.innerHTML = `
            /* FORZAR ESTILOS PARA 1366x768 */
            body { 
                zoom: 0.85 !important; 
                font-size: 13px !important;
            }
            .container, .container-fluid { 
                max-width: 95% !important; 
                padding: 0.5rem !important;
            }
            .card { 
                margin-bottom: 0.5rem !important; 
            }
            .btn { 
                padding: 0.3rem 0.6rem !important; 
                font-size: 0.8rem !important; 
            }
            .form-control, .form-select { 
                padding: 0.3rem 0.5rem !important; 
                font-size: 0.8rem !important; 
            }
            .navbar { 
                min-height: 40px !important; 
                padding: 0.2rem 0.5rem !important; 
            }
            .table { 
                font-size: 0.75rem !important; 
            }
            h1 { font-size: 1.4rem !important; }
            h2 { font-size: 1.2rem !important; }
            h3 { font-size: 1rem !important; }
            h4 { font-size: 0.9rem !important; }
            h5 { font-size: 0.8rem !important; }
        `;
        document.head.appendChild(forceStyles);
    }
    
    // Mostrar información de CSS cargado
    const loadedCSS = [];
    const links = document.querySelectorAll('link[rel="stylesheet"]');
    links.forEach(link => {
        if (link.href.includes('responsive')) {
            loadedCSS.push(link.href.split('/').pop());
        }
    });
    
    console.log('📄 CSS Responsive cargado:', loadedCSS);
    
    // Detectar media queries activos
    if (window.matchMedia) {
        const queries = [
            '(min-width: 1300px) and (max-width: 1450px)',
            '(width: 1366px)',
            '(min-width: 1200px) and (max-width: 1400px)'
        ];
        
        queries.forEach(query => {
            if (window.matchMedia(query).matches) {
                console.log(`✅ Media Query ACTIVO: ${query}`);
            }
        });
    }
});
