/* Performance Optimizations CSS */
/* Este archivo contiene optimizaciones específicas para mejorar el rendimiento */

/* Optimizaciones de renderizado */
* {
    box-sizing: border-box;
}

/* Optimización de imágenes */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lazy loading para imágenes */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Optimización de fuentes */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Optimización de animaciones */
@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;
    }
}

/* Optimización de scroll */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Optimización de contenido crítico */
.critical-content {
    contain: layout style paint;
}

/* Optimización de elementos fuera de pantalla */
.offscreen {
    contain: strict;
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Optimización de elementos interactivos */
button,
[role="button"],
input[type="submit"],
input[type="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Optimización de elementos con hover */
@media (hover: hover) {
    .hover-optimized:hover {
        will-change: transform;
    }
}

/* Optimización de elementos con animaciones */
.animated-element {
    will-change: transform, opacity;
}

.animated-element.animation-complete {
    will-change: auto;
}

/* Optimización de backdrop-filter */
.backdrop-blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@supports not (backdrop-filter: blur(10px)) {
    .backdrop-blur {
        background: rgba(255, 255, 255, 0.9);
    }
}

/* Optimización de gradientes */
.gradient-optimized {
    background-image: linear-gradient(135deg, #4e228d 0%, #6b46c1 100%);
}

/* Fallback para navegadores que no soportan gradientes */
@supports not (background-image: linear-gradient(135deg, #4e228d 0%, #6b46c1 100%)) {
    .gradient-optimized {
        background-color: #4e228d;
    }
}

/* Optimización de sombras */
.shadow-optimized {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Fallback para navegadores que no soportan múltiples sombras */
@supports not (box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)) {
    .shadow-optimized {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}

/* Optimización de transformaciones */
.transform-optimized {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optimización de elementos sticky */
.sticky-optimized {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Optimización de elementos fixed */
.fixed-optimized {
    position: fixed;
    transform: translateZ(0);
}

/* Optimización de elementos con overflow */
.scroll-optimized {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* Optimización de elementos con border-radius */
.rounded-optimized {
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Optimización de elementos con opacity */
.opacity-optimized {
    opacity: 0.95;
    will-change: opacity;
}

/* Optimización de elementos con z-index */
.layered-optimized {
    isolation: isolate;
}

/* Optimización de elementos con clip-path */
.clipped-optimized {
    clip-path: inset(0);
}

/* Optimización de elementos con filter */
.filtered-optimized {
    filter: brightness(1);
}

/* Optimización de elementos con mask */
.masked-optimized {
    -webkit-mask-image: linear-gradient(black, black);
    mask-image: linear-gradient(black, black);
}

/* Optimización de elementos con mix-blend-mode */
.blended-optimized {
    mix-blend-mode: normal;
    isolation: isolate;
}

/* Optimización de elementos con object-fit */
.fitted-optimized {
    object-fit: cover;
    object-position: center;
}

/* Optimización de elementos con aspect-ratio */
.aspect-optimized {
    aspect-ratio: 16 / 9;
}

/* Fallback para navegadores que no soportan aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    .aspect-optimized {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 aspect ratio */
    }
    
    .aspect-optimized > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Optimización de elementos con grid */
.grid-optimized {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Optimización de elementos con flexbox */
.flex-optimized {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Optimización de elementos con subgrid */
@supports (grid-template-columns: subgrid) {
    .subgrid-optimized {
        grid-template-columns: subgrid;
    }
}

/* Optimización de elementos con container queries */
@supports (container-type: inline-size) {
    .container-optimized {
        container-type: inline-size;
    }
    
    @container (min-width: 400px) {
        .container-optimized .responsive-element {
            font-size: 1.2rem;
        }
    }
}

/* Optimización de elementos con logical properties */
.logical-optimized {
    margin-inline-start: 1rem;
    margin-inline-end: 1rem;
    padding-block-start: 0.5rem;
    padding-block-end: 0.5rem;
}

/* Fallback para navegadores que no soportan logical properties */
@supports not (margin-inline-start: 1rem) {
    .logical-optimized {
        margin-left: 1rem;
        margin-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* Optimización de elementos con custom properties */
.custom-props-optimized {
    --primary-color: #4e228d;
    --secondary-color: #00bdd1;
    color: var(--primary-color, #4e228d);
    background-color: var(--secondary-color, #00bdd1);
}

/* Optimización de elementos con calc() */
.calc-optimized {
    width: calc(100% - 2rem);
    height: calc(100vh - 4rem);
}

/* Optimización de elementos con clamp() */
.clamp-optimized {
    font-size: clamp(1rem, 2.5vw, 2rem);
    width: clamp(300px, 50%, 800px);
}

/* Fallback para navegadores que no soportan clamp() */
@supports not (font-size: clamp(1rem, 2.5vw, 2rem)) {
    .clamp-optimized {
        font-size: 1.5rem;
        width: 50%;
        min-width: 300px;
        max-width: 800px;
    }
}

/* Optimización de elementos con min() y max() */
.minmax-optimized {
    width: min(100%, 800px);
    height: max(200px, 20vh);
}

/* Fallback para navegadores que no soportan min() y max() */
@supports not (width: min(100%, 800px)) {
    .minmax-optimized {
        width: 100%;
        max-width: 800px;
        height: 200px;
    }
    
    @media (min-height: 1000px) {
        .minmax-optimized {
            height: 20vh;
        }
    }
}

/* Optimización de print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-optimized {
        color: black !important;
        background: white !important;
        box-shadow: none !important;
    }
}

/* Optimización de elementos con prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    .theme-optimized {
        background-color: #1f2937;
        color: #f9fafb;
    }
}

/* Optimización de elementos con prefers-contrast */
@media (prefers-contrast: high) {
    .contrast-optimized {
        border: 2px solid currentColor;
        background-color: white;
        color: black;
    }
}

/* Optimización de elementos con forced-colors */
@media (forced-colors: active) {
    .forced-colors-optimized {
        forced-color-adjust: none;
        background-color: ButtonFace;
        color: ButtonText;
        border: 1px solid ButtonText;
    }
}