/* 
 * responsive.css - Adaptaciones para diferentes dispositivos
 * 
 * Media queries optimizadas para rendimiento
 * y protección contra vulnerabilidades específicas
 * en diferentes contextos de visualización
 */

/* ==========================================================================
   1. Dispositivos móviles pequeños (hasta 375px)
   ========================================================================== */

@media (max-width: 375px) {
    /* Contenedores principales */
    .container-adaptive {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Navegación adaptativa */
    .nav-compact {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    
    /* Elementos de navegación optimizados */
    .brand-minimal {
        font-size: 1rem;
        letter-spacing: 0.1em;
    }
    
    /* Ocultar elementos no esenciales */
    .non-essential-mobile {
        display: none !important;
    }
    
    /* Ajustes tipográficos */
    .text-mobile-optimized {
        font-size: 0.875rem;
        line-height: 1.4;
    }
    
    /* Espaciados reducidos */
    .spacing-compact {
        margin-bottom: 1rem;
        padding: 0.5rem;
    }
    
    /* Botones optimizados para interacción táctil */
    .touch-optimized-small {
        min-height: 2.75rem;
        min-width: 2.75rem;
        padding: 0.625rem 1rem;
    }
}

/* ==========================================================================
   2. Dispositivos móviles medianos (376px - 480px)
   ========================================================================== */

@media (min-width: 376px) and (max-width: 480px) {
    /* Layouts adaptativos */
    .layout-mobile-medium {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Contenedores con márgenes optimizados */
    .container-mobile-medium {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Tipografía escalable */
    .text-scale-mobile {
        font-size: clamp(0.875rem, 3vw, 1rem);
    }
    
    /* Imágenes responsivas */
    .image-responsive-mobile {
        max-height: 50vh;
        object-fit: cover;
    }
    
    /* Elementos de interfaz optimizados */
    .ui-element-mobile {
        border-radius: 0.375rem;
        padding: 0.75rem;
    }
}

/* ==========================================================================
   3. Dispositivos móviles grandes (481px - 640px)
   ========================================================================== */

@media (min-width: 481px) and (max-width: 640px) {
    /* Grid systems adaptativos */
    .grid-mobile-large {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.25rem;
    }
    
    /* Contenedores flexibles */
    .flex-container-mobile {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* Espaciados optimizados */
    .spacing-mobile-large {
        margin: 1rem 0;
        padding: 1rem;
    }
    
    /* Elementos interactivos mejorados */
    .interactive-mobile-large {
        min-height: 3rem;
        padding: 0.75rem 1.5rem;
    }
    
    /* Navegación mejorada */
    .nav-enhanced-mobile {
        padding: 1rem 0;
    }
}

/* ==========================================================================
   4. Tabletas pequeñas (641px - 768px)
   ========================================================================== */

@media (min-width: 641px) and (max-width: 768px) {
    /* Layouts de dos columnas */
    .two-column-tablet {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    /* Contenedores adaptativos */
    .container-tablet-small {
        max-width: 100%;
        padding: 0 1.5rem;
    }
    
    /* Tipografía para tabletas */
    .text-tablet-optimized {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    /* Elementos de navegación tablet */
    .nav-tablet-small {
        justify-content: space-between;
        padding: 1.25rem 0;
    }
    
    /* Imágenes optimizadas para tablet */
    .image-tablet-small {
        max-width: 100%;
        height: auto;
    }
}

/* ==========================================================================
   5. Tabletas estándar (769px - 1024px)
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Layouts de tres columnas */
    .three-column-tablet {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    
    /* Contenedores centrados */
    .container-tablet-standard {
        max-width: 90%;
        margin: 0 auto;
    }
    
    /* Navegación completa */
    .nav-full-tablet {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }
    
    /* Elementos de interfaz tablet */
    .ui-tablet-standard {
        border-radius: 0.5rem;
        padding: 1.5rem;
    }
    
    /* Tipografía mejorada */
    .text-tablet-enhanced {
        font-size: 1.125rem;
        line-height: 1.6;
    }
}

/* ==========================================================================
   6. Dispositivos de escritorio pequeños (1025px - 1280px)
   ========================================================================== */

@media (min-width: 1025px) and (max-width: 1280px) {
    /* Layouts de cuatro columnas */
    .four-column-desktop {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }
    
    /* Contenedores optimizados */
    .container-desktop-small {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    /* Navegación de escritorio */
    .nav-desktop-small {
        gap: 3rem;
        padding: 1.5rem 0;
    }
    
    /* Elementos de interfaz desktop */
    .ui-desktop-small {
        border-radius: 0.75rem;
        padding: 2rem;
    }
    
    /* Tipografía desktop */
    .text-desktop-small {
        font-size: 1.25rem;
        line-height: 1.7;
    }
}

/* ==========================================================================
   7. Dispositivos de escritorio grandes (1281px y superior)
   ========================================================================== */

@media (min-width: 1281px) {
    /* Layouts expansivos */
    .layout-expansive {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 3rem;
    }
    
    /* Contenedores máximos */
    .container-max {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    /* Navegación completa */
    .nav-full-desktop {
        gap: 4rem;
        padding: 2rem 0;
    }
    
    /* Elementos de interfaz grandes */
    .ui-desktop-large {
        border-radius: 1rem;
        padding: 2.5rem;
    }
    
    /* Tipografía expansiva */
    .text-desktop-large {
        font-size: 1.5rem;
        line-height: 1.8;
    }
}

/* ==========================================================================
   8. Orientación específica - Retrato
   ========================================================================== */

@media (orientation: portrait) {
    /* Layouts verticales optimizados */
    .layout-portrait {
        flex-direction: column;
        height: auto;
    }
    
    /* Elementos apilados */
    .stack-portrait {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Imágenes en retrato */
    .image-portrait {
        width: 100%;
        height: auto;
        aspect-ratio: 3/4;
    }
    
    /* Navegación vertical */
    .nav-portrait {
        flex-direction: column;
        align-items: center;
    }
}

/* ==========================================================================
   9. Orientación específica - Paisaje
   ========================================================================== */

@media (orientation: landscape) {
    /* Layouts horizontales */
    .layout-landscape {
        flex-direction: row;
        height: 100vh;
    }
    
    /* Elementos en fila */
    .row-landscape {
        display: flex;
        flex-direction: row;
        gap: 2rem;
    }
    
    /* Imágenes en paisaje */
    .image-landscape {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
    
    /* Navegación horizontal */
    .nav-landscape {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ==========================================================================
   10. Alta densidad de píxeles (Retina)
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
    /* Imágenes de alta resolución */
    .image-high-dpi {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Bordes optimizados */
    .border-high-dpi {
        border-width: 0.5px;
    }
    
    /* Textos optimizados */
    .text-high-dpi {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ==========================================================================
   11. Bajas condiciones de conexión
   ========================================================================== */

@media (max-width: 240px) {
    /* Modo de compatibilidad extrema */
    .compatibility-mode {
        display: block;
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Elementos mínimos */
    .minimal-rendering {
        display: none;
    }
    
    /* Contenido esencial */
    .essential-content {
        display: block;
        font-size: 12px;
        line-height: 1.2;
    }
}

/* ==========================================================================
   12. Preferencias de usuario - Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Eliminar animaciones */
    .motion-safe *,
    .motion-safe *::before,
    .motion-safe *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Estados estáticos */
    .static-states {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   13. Preferencias de usuario - Alto contraste
   ========================================================================== */

@media (prefers-contrast: high) {
    /* Colores de alto contraste */
    .high-contrast {
        --color-stone: #000000;
        --color-cream: #ffffff;
        --color-olive: #006400;
        --color-taupe: #808080;
    }
    
    /* Bordes mejorados */
    .contrast-border {
        border: 2px solid currentColor;
    }
    
    /* Textos optimizados */
    .contrast-text {
        color: #000000;
        background-color: #ffffff;
    }
}

/* ==========================================================================
   14. Preferencias de usuario - Modo oscuro
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    /* Variables para modo oscuro */
    .dark-mode {
        --color-stone: #f5f5f5;
        --color-cream: #121212;
        --color-olive: #4a6b4a;
        --color-taupe: #8a7f70;
    }
    
    /* Ajustes específicos para modo oscuro */
    .dark-optimized {
        background-color: var(--color-cream);
        color: var(--color-stone);
    }
    
    /* Imágenes optimizadas para modo oscuro */
    .image-dark-mode {
        filter: brightness(0.9);
    }
}

/* ==========================================================================
   15. Dispositivos táctiles
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Optimización para interacción táctil */
    .touch-interface {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
    
    /* Estados hover desactivados */
    .hover-disabled {
        opacity: 1;
        transform: none;
    }
    
    /* Elementos de navegación táctiles */
    .nav-touch {
        gap: 1.5rem;
        padding: 1rem;
    }
    
    /* Botones optimizados para toque */
    .button-touch {
        font-size: 16px;
        letter-spacing: 0.05em;
    }
}

/* ==========================================================================
   16. Dispositivos con puntero fino
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    /* Estados hover activos */
    .hover-enabled {
        transition: all var(--transition-fast);
    }
    
    /* Efectos hover específicos */
    .hover-effect {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
    
    /* Navegación con hover */
    .nav-hover {
        gap: 2rem;
    }
}

/* ==========================================================================
   17. Impresión
   ========================================================================== */

@media print {
    /* Estilos de impresión */
    .print-optimized {
        background: white !important;
        color: black !important;
    }
    
    /* Ocultar elementos no imprimibles */
    .no-print {
        display: none !important;
    }
    
    /* Ajustes tipográficos para impresión */
    .text-print {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    /* Enlaces en impresión */
    .link-print::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
    }
}

/* ==========================================================================
   18. Alturas específicas
   ========================================================================== */

@media (max-height: 600px) {
    /* Layouts de altura reducida */
    .short-screen {
        height: auto;
        min-height: 100vh;
    }
    
    /* Elementos compactos verticalmente */
    .compact-vertical {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    /* Navegación para pantallas cortas */
    .nav-short-screen {
        padding: 0.75rem 0;
    }
}

@media (min-height: 1000px) {
    /* Layouts de altura amplia */
    .tall-screen {
        height: 100vh;
    }
    
    /* Elementos expansivos verticalmente */
    .expansive-vertical {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    /* Navegación para pantallas altas */
    .nav-tall-screen {
        padding: 2rem 0;
    }
}

/* ==========================================================================
   19. Anchos específicos
   ========================================================================== */

@media (max-width: 320px) {
    /* Compatibilidad extrema */
    .ultra-narrow {
        padding: 0.5rem;
        font-size: 12px;
    }
    
    /* Elementos mínimos */
    .minimal-view {
        display: block;
        width: 100%;
    }
}

@media (min-width: 1920px) {
    /* Pantallas ultra anchas */
    .ultra-wide {
        max-width: 1600px;
        margin: 0 auto;
    }
    
    /* Layouts expansivos */
    .expansive-layout {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 4rem;
    }
}

/* ==========================================================================
   20. Condiciones de visualización específicas
   ========================================================================== */

/* Pantallas con ancho mayor que alto */
@media (min-aspect-ratio: 16/9) {
    .wide-screen-ratio {
        padding-left: 5%;
        padding-right: 5%;
    }
}

/* Pantallas con alto mayor que ancho */
@media (max-aspect-ratio: 3/4) {
    .tall-screen-ratio {
        padding-top: 10%;
        padding-bottom: 10%;
    }
}

/* ==========================================================================
   21. Navegadores específicos
   ========================================================================== */

/* WebKit específico */
@media (-webkit-min-device-pixel-ratio: 1) {
    .webkit-optimized {
        -webkit-font-smoothing: antialiased;
    }
}

/* Firefox específico */
@-moz-document url-prefix() {
    .firefox-optimized {
        scrollbar-width: thin;
    }
}

/* ==========================================================================
   22. Estados de carga y error
   ========================================================================== */

@media (scripting: none) {
    /* Sin JavaScript */
    .no-script-fallback {
        display: block !important;
    }
    
    .script-dependent {
        display: none !important;
    }
}

/* ==========================================================================
   23. Validación de viewport
   ========================================================================== */

@media (min-width: 0) {
    /* Reglas base para todos los viewports */
    .viewport-validated {
        box-sizing: border-box;
    }
}

/* ==========================================================================
   24. Protección contra overflow
   ========================================================================== */

@media (max-width: 100vw) {
    /* Prevenir desbordamiento horizontal */
    .overflow-protected {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ==========================================================================
   25. Utilidades responsivas finales
   ========================================================================== */

/* Clases para testing responsivo */
.test-responsive {
    outline: 1px solid transparent;
}

/* Debug responsivo (solo desarrollo) */
.debug-responsive::before {
    content: attr(data-breakpoint);
    position: fixed;
    top: 0;
    right: 0;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    z-index: 9999;
}