/* ========================================
   CORE WEB VITALS OPTIMIZATIONS
   Mentores Tech - Optimizaciones de rendimiento
   ======================================== */

/* ========================================
   OPTIMIZACIÓN CLS (Cumulative Layout Shift)
   ======================================== */

/* Reservar espacio para imágenes antes de cargar */
img {
    max-width: 100%;
    height: auto;
    /* Prevenir CLS reservando espacio */
    aspect-ratio: attr(width) / attr(height);
}

/* Contenedores con dimensiones fijas para evitar CLS */
.image-container {
    position: relative;
    overflow: hidden;
    /* Dimensiones mínimas para evitar colapso */
    min-height: 200px;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Skeleton loading para evitar CLS */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========================================
   OPTIMIZACIÓN FID (First Input Delay)
   ======================================== */

/* Botones y enlaces con tamaño mínimo para touch */
button, 
.btn,
a[role="button"],
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
    /* Mejorar respuesta táctil */
    touch-action: manipulation;
    /* Prevenir zoom en iOS */
    -webkit-tap-highlight-color: transparent;
}

/* Optimizar interacciones */
.interactive-element {
    /* Reducir latencia de entrada */
    will-change: transform;
    /* Mejorar rendimiento de hover */
    transition: transform 0.1s ease-out;
}

.interactive-element:hover {
    transform: translateY(-1px);
}

/* ========================================
   OPTIMIZACIÓN LCP (Largest Contentful Paint)
   ======================================== */

/* Priorizar contenido crítico */
.critical-content {
    /* Asegurar que el contenido crítico se cargue primero */
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Lazy loading optimizado */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

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

/* ========================================
   OPTIMIZACIONES DE FUENTES
   ======================================== */

/* Preload de fuentes críticas */
@font-face {
    font-family: 'CriticalFont';
    font-display: swap; /* Evitar FOIT (Flash of Invisible Text) */
    src: url('/assets/fonts/critical-font.woff2') format('woff2');
}

/* Fallback de fuentes para evitar CLS */
.font-fallback {
    font-family: 'CriticalFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========================================
   OPTIMIZACIONES DE LAYOUT
   ======================================== */

/* Grid y Flexbox optimizados */
.optimized-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    /* Prevenir reflow */
    contain: layout style paint;
}

.optimized-flex {
    display: flex;
    flex-wrap: wrap;
    /* Optimizar layout */
    align-content: flex-start;
}

/* ========================================
   OPTIMIZACIONES DE ANIMACIONES
   ======================================== */

/* Animaciones optimizadas para rendimiento */
.performance-animation {
    /* Usar transform y opacity para mejor rendimiento */
    transform: translateZ(0); /* Forzar capa de composición */
    will-change: transform, opacity;
}

/* Animaciones CSS optimizadas */
@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
    /* Optimizar para GPU */
    transform: translateZ(0);
}

/* ========================================
   OPTIMIZACIONES DE MEDIA QUERIES
   ======================================== */

/* Breakpoints optimizados para Core Web Vitals */
@media (max-width: 768px) {
    /* Optimizaciones móviles */
    .mobile-optimized {
        /* Reducir complejidad en móviles */
        contain: layout style;
    }
    
    /* Mejorar FID en móviles */
    button, .btn {
        min-height: 48px; /* Tamaño recomendado para móviles */
        min-width: 48px;
    }
}

@media (max-width: 480px) {
    /* Optimizaciones para pantallas pequeñas */
    .small-screen-optimized {
        /* Simplificar layout en pantallas muy pequeñas */
        grid-template-columns: 1fr;
    }
}

/* ========================================
   OPTIMIZACIONES DE CARGA
   ======================================== */

/* Indicador de carga optimizado */
.loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #00d4ff);
    z-index: 9999;
    animation: loading-bar 2s ease-in-out infinite;
}

@keyframes loading-bar {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* ========================================
   OPTIMIZACIONES DE CONTENIDO
   ======================================== */

/* Contenido crítico visible inmediatamente */
.above-the-fold {
    /* Priorizar contenido visible */
    content-visibility: auto;
    contain-intrinsic-size: 0 800px;
}

/* Contenido no crítico con lazy loading */
.below-the-fold {
    /* Cargar contenido cuando sea necesario */
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/* ========================================
   OPTIMIZACIONES DE FORMULARIOS
   ======================================== */

/* Formularios optimizados para FID */
.form-optimized input,
.form-optimized textarea,
.form-optimized select {
    /* Mejorar respuesta de entrada */
    touch-action: manipulation;
    /* Prevenir zoom en móviles */
    font-size: 16px;
}

/* ========================================
   UTILIDADES DE RENDIMIENTO
   ======================================== */

/* Clase para elementos que no deben causar CLS */
.no-cls {
    contain: layout style paint;
    will-change: auto;
}

/* Clase para elementos críticos */
.critical {
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}

/* Clase para elementos no críticos */
.non-critical {
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;
}

/* ========================================
   OPTIMIZACIONES DE IMPRESIÓN
   ======================================== */

@media print {
    /* Ocultar elementos no necesarios en impresión */
    .no-print {
        display: none !important;
    }
    
    /* Optimizar para impresión */
    * {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}