/* ========================================
   MOBILE-FIRST OPTIMIZATION - PROFESSIONAL UX/UI
   Análisis y corrección por experto en diseño móvil
   Prioridad: Performance, Accesibilidad, Usabilidad
======================================== */

/* ========================================
   1. FOUNDATION - BASE MOBILE (SIEMPRE ACTIVO)
======================================== */

/* Sistema de tipografía escalable y consistente */
:root {
    /* Escala tipográfica móvil */
    --fs-xs: clamp(1.2rem, 2vw, 1.4rem);
    --fs-sm: clamp(1.4rem, 2.5vw, 1.6rem);
    --fs-base: clamp(1.6rem, 3vw, 1.8rem);
    --fs-md: clamp(1.8rem, 3.5vw, 2.2rem);
    --fs-lg: clamp(2.2rem, 4vw, 2.8rem);
    --fs-xl: clamp(2.8rem, 5vw, 3.6rem);
    --fs-2xl: clamp(3.6rem, 6vw, 4.8rem);
    --fs-3xl: clamp(4.8rem, 8vw, 6.4rem);

    /* Espaciado consistente */
    --space-xs: clamp(0.5rem, 1vw, 1rem);
    --space-sm: clamp(1rem, 2vw, 1.5rem);
    --space-md: clamp(1.5rem, 3vw, 2rem);
    --space-lg: clamp(2rem, 4vw, 3rem);
    --space-xl: clamp(3rem, 6vw, 5rem);
    --space-2xl: clamp(5rem, 8vw, 8rem);

    /* Touch targets mínimos */
    --touch-min: 48px;
    --touch-comfortable: 56px;

    /* Z-index hierarchy */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal: 2000;
    --z-toast: 3000;
}

/* Optimización de rendimiento global */
* {
    -webkit-tap-highlight-color: rgba(0, 255, 255, 0.1);
    -webkit-touch-callout: none;
}

html {
    /* Smooth scroll con preferencia de reducción de movimiento */
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   2. REPRODUCTOR DE AUDIO - FIX CRÍTICO
======================================== */

/* DESKTOP: Ocultar player casi completamente en compact */
.audio-player-bar.compact .player-container {
    padding: 6rem 1.5rem !important;
    height: auto !important;
}

/* MÓVIL: Ocultar player completamente en compact */
@media (max-width: 768px) {
    .audio-player-bar.compact .player-container {
        padding: 6rem 1.5rem !important;
        height: auto !important;
    }

    /* Ocultar todos los controles internos en compact móvil */
    .audio-player-bar.compact .player-track-info,
    .audio-player-bar.compact .player-controls,
    .audio-player-bar.compact .player-progress,
    .audio-player-bar.compact .player-volume {
        display: none !important;
    }

    /* Asegurar que solo el toggle button sea visible */
    .audio-player-bar.compact .player-state-controls {
        display: flex !important;
        position: absolute !important;
        bottom: 10px !important;
        right: 10px !important;
        z-index: 100 !important;
    }
}

.audio-player-bar.expanded .player-container {
    padding: 1.5rem 2rem !important;
}

/* Toggle button SIEMPRE visible en móvil */
@media (max-width: 768px) {
    .player-state-controls {
        display: flex !important;
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 100 !important;
    }

    .player-state-btn {
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        background: rgba(0, 0, 0, 0.95) !important;
        border: 2px solid var(--t2-blue) !important;
    }

    /* Mejorar visibilidad del botón */
    .player-state-btn {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.5) !important;
    }

    .player-state-btn:active {
        transform: scale(0.9) !important;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.8) !important;
    }
}

/* ========================================
   3. NAVEGACIÓN MÓVIL - MEJORAS UX
======================================== */

@media (max-width: 768px) {
    /* Logo más grande y legible */
    .nav-logo {
        width: 160px !important;
        height: 55px !important;
    }

    /* Hamburger menu con mejor feedback visual */
    .nav-toggle {
        width: var(--touch-comfortable) !important;
        height: var(--touch-comfortable) !important;
        padding: 1rem !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    .nav-toggle span {
        transition: all 0.3s ease !important;
    }

    /* Estado activo del hamburger */
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Menú fullscreen optimizado */
    .mobile-menu-fullscreen {
        touch-action: none; /* Prevenir scroll mientras el menú está abierto */
    }

    .mobile-menu-fullscreen.active {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    /* Logo aún visible en pantallas pequeñas */
    .nav-logo {
        width: 140px !important;
        height: 48px !important;
    }
}

/* ========================================
   4. DROPDOWN DEL ÁLBUM - OPTIMIZACIÓN TÁCTIL
======================================== */

@media (max-width: 768px) {
    #album-dropdown {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.98) !important;
        z-index: 1500 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 2rem !important;
        display: none;
    }

    #album-dropdown.show {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .dropdown-content {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    .dropdown-album,
    .dropdown-tracks {
        width: 100% !important;
    }

    .track {
        min-height: var(--touch-comfortable) !important;
        padding: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }

    /* Botón cerrar dropdown */
    #album-dropdown::before {
        content: '✕';
        position: fixed;
        top: 2rem;
        right: 2rem;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: var(--t2-blue);
        border: 2px solid var(--t2-blue);
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
    }
}

/* ========================================
   5. HERO SECTION - OPTIMIZACIÓN PERFORMANCE
======================================== */

@media (max-width: 768px) {
    .hero-video {
        /* Reducir calidad en móvil para mejor performance */
        object-fit: cover;
        filter: brightness(0.7);
        will-change: auto; /* No optimizar en exceso */
    }

    /* Cargar poster en lugar de video en conexiones lentas */
    @media (prefers-reduced-data: reduce) {
        .hero-video {
            display: none !important;
        }

        .hero-bg {
            background:
                linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)),
                url('../media/videoIntro-poster.jpg') center/cover no-repeat;
        }
    }

    /* CTA buttons optimizados */
    .hero-cta {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 var(--space-md) !important;
    }

    .hero-cta .btn {
        min-height: var(--touch-comfortable) !important;
        font-size: var(--fs-base) !important;
        padding: 1.4rem 2.5rem !important;
    }
}

/* ========================================
   6. ELEMENTOS FIJOS - GESTIÓN INTELIGENTE
======================================== */

@media (max-width: 768px) {
    /* Mostrar scroll percentage solo cuando hace scroll */
    .scroll-percentage {
        display: none !important;
        position: fixed !important;
        bottom: 120px !important;
        right: 20px !important;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    body.scrolling .scroll-percentage {
        display: flex !important;
        opacity: 1;
    }

    /* Nav bullets - OCULTOS en móvil */
    .nav-bullets {
        display: none !important;
    }

    /* Carrito visible pero compacto */
    .merch-cart-icon {
        bottom: auto !important;
        top: 80px !important;
        right: 15px !important;
        width: 48px !important;
        height: 48px !important;
        z-index: 999 !important;
    }

    /* Ocultar engranajes (section-progress) en móvil */
    .section-progress,
    .progress-item {
        display: none !important;
    }
}

/* ========================================
   7. CONSISTENCIA DE ESPACIADO
======================================== */

/* Aplicar spacing consistente a todas las secciones */
.section {
    padding: var(--space-2xl) var(--space-md) !important;
}

.section-header {
    margin-bottom: var(--space-xl) !important;
}

.container {
    padding-left: var(--space-md) !important;
    padding-right: var(--space-md) !important;
}

/* ========================================
   8. MEJORAS DE ACCESIBILIDAD
======================================== */

/* Focus visible para navegación con teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--t2-blue) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.2) !important;
}

/* Skip to content más visible */
.skip-navigation:focus {
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    padding: 1rem 2rem !important;
    background: var(--t2-blue) !important;
    color: #000 !important;
    font-weight: bold !important;
}

/* ========================================
   9. OPTIMIZACIÓN DE INTERACCIONES TÁCTILES
======================================== */

@media (max-width: 768px) {
    /* Todos los elementos interactivos */
    button,
    a,
    .track-play,
    .gallery-tab,
    .social-link,
    input[type="submit"],
    input[type="button"],
    .btn {
        min-width: var(--touch-min) !important;
        min-height: var(--touch-min) !important;
        padding: var(--space-sm) var(--space-md) !important;
    }

    /* Feedback táctil mejorado */
    button:active,
    a:active,
    .btn:active {
        transform: scale(0.96) !important;
        transition: transform 0.1s ease !important;
    }

    /* Prevenir doble-tap zoom en botones */
    button,
    a,
    input[type="submit"] {
        touch-action: manipulation !important;
    }
}

/* ========================================
   10. ALBUM SECTION - OPTIMIZACIÓN MÓVIL
======================================== */

@media (max-width: 768px) {
    /* Vinilo responsive sin overflow */
    .vinyl-disc-container {
        width: min(95vw, 450px) !important;
        height: min(95vw, 450px) !important;
        margin: 0 auto var(--space-xl) !important;
    }

    .album-cover {
        width: 65% !important;
        height: 65% !important;
    }

    /* Tracklist optimizado */
    .track-item {
        padding: var(--space-sm) var(--space-md) !important;
        min-height: var(--touch-comfortable) !important;
        gap: var(--space-sm) !important;
    }

    .track-title {
        font-size: var(--fs-base) !important;
        line-height: 1.4 !important;
    }

    .track-play {
        width: var(--touch-min) !important;
        height: var(--touch-min) !important;
    }
}

/* ========================================
   11. BAND SECTION - CAROUSEL MÓVIL
======================================== */

@media (max-width: 768px) {
    .member-photo-carousel {
        width: 80% !important;
        max-width: 350px !important;
        margin: 0 auto !important;
    }

    .carousel-prev,
    .carousel-next {
        width: var(--touch-min) !important;
        height: var(--touch-min) !important;
        font-size: 1.8rem !important;
    }

    .carousel-indicators {
        margin-top: var(--space-md) !important;
        gap: var(--space-sm) !important;
    }

    .indicator {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ========================================
   12. FORMS - OPTIMIZACIÓN MÓVIL
======================================== */

@media (max-width: 768px) {
    .form-control {
        min-height: var(--touch-min) !important;
        font-size: 16px !important; /* Prevenir zoom en iOS */
        padding: var(--space-sm) var(--space-md) !important;
    }

    textarea.form-control {
        min-height: 120px !important;
    }

    .btn-submit {
        width: 100% !important;
        min-height: var(--touch-comfortable) !important;
        font-size: var(--fs-md) !important;
    }

    /* Mensajes de error más visibles */
    .error-message {
        font-size: var(--fs-sm) !important;
        margin-top: 0.5rem !important;
        color: var(--t2-red) !important;
    }
}

/* ========================================
   13. GALLERY - GRID OPTIMIZADO
======================================== */

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }

    .gallery-item {
        aspect-ratio: 4/3;
        min-height: 250px;
    }

    .gallery-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: var(--space-sm) !important;
        padding-bottom: var(--space-sm);
        scrollbar-width: none;
    }

    .gallery-tabs::-webkit-scrollbar {
        display: none;
    }

    .gallery-tab {
        flex-shrink: 0;
        min-width: 100px;
        padding: var(--space-sm) var(--space-md) !important;
    }
}

/* ========================================
   14. PERFORMANCE - LAZY LOADING
======================================== */

/* Imágenes fuera de viewport */
img[loading="lazy"] {
    background: linear-gradient(
        90deg,
        rgba(0, 255, 255, 0.1) 0%,
        rgba(0, 255, 255, 0.2) 50%,
        rgba(0, 255, 255, 0.1) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* Reducir animaciones pesadas en móvil */
@media (max-width: 768px) {
    *,
    *::before,
    *::after {
        animation-duration: 0.3s !important;
    }

    /* Desactivar animaciones decorativas no esenciales */
    .scanlines,
    .noise-overlay,
    .particle-effect {
        display: none !important;
    }
}

/* ========================================
   15. LANDSCAPE ORIENTATION
======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    /* Reducir spacing vertical en landscape */
    .section {
        padding: var(--space-lg) var(--space-md) !important;
    }

    .hero-section {
        min-height: 100vh !important;
    }

    /* Ocultar elementos que ocupan mucho espacio vertical */
    .hero-scroll {
        display: none !important;
    }

    /* Player más compacto en landscape */
    .audio-player-bar.expanded {
        max-height: 30vh !important;
    }
}

/* ========================================
   16. DARK MODE SUPPORT (BONUS)
======================================== */

@media (prefers-color-scheme: light) {
    /* Si el usuario prefiere light mode, ajustar colores */
    :root {
        --bg-overlay: rgba(255, 255, 255, 0.95);
        --text-primary: #000;
    }
}

/* ========================================
   17. PRINT OPTIMIZATION
======================================== */

@media print {
    /* Ocultar elementos no imprimibles */
    .audio-player-bar,
    .nav-bullets,
    .scroll-percentage,
    .merch-cart-icon,
    .mobile-menu-fullscreen,
    video,
    .hero-video {
        display: none !important;
    }

    /* Optimizar para impresión */
    * {
        background: white !important;
        color: black !important;
    }

    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* ========================================
   18. DEBUGGING (REMOVER EN PRODUCCIÓN)
======================================== */

/* Descomentar para debuggear overflow en móvil */
/*
@media (max-width: 768px) {
    * {
        outline: 1px solid rgba(255, 0, 0, 0.3);
    }

    *:hover {
        outline: 2px solid red;
    }
}
*/