/* =========================================
   CONFIGURACIÓN BASE
   ========================================= */
html {
    scroll-behavior: smooth;
    overscroll-behavior-y: none; 
}

body {
    -webkit-overflow-scrolling: touch; 
}

/* =========================================
   ESTILOS DEL REPRODUCTOR (BASE / MÓVIL)
   ========================================= */

/* El contenedor fijo principal */
#fixed-player-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100; 
    background-color: #000; 
    
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Estado oculto (Móvil) */
.fixed-player-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

/* Estado activo (Móvil) */
.fixed-player-active {
    transform: translateY(0);
}

/* Wrapper del video (16:9) */
.video-player-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; 
    background-color: #000;
    overflow: hidden;
    border-radius: 0; 
}

.video-player,
.video-overlay,
.video-player-wrapper img,
#yt-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

/* =========================================
   TARJETAS Y OVERLAYS
   ========================================= */
.video-overlay {
    z-index: 10;
    cursor: pointer;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s;
}

.card:active .video-overlay {
    background-color: rgba(0,0,0,0.3);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.video-item-anim {
    animation: fadeIn 0.4s ease-out forwards;
}

.footer-avatar {
    object-fit: cover;
    transition: transform 0.3s ease;
}

.footer-avatar:hover {
    transform: scale(1.05);
}

/* =========================================
   LÓGICA DE EMPUJE (MOBILE DEFAULT)
   ========================================= */
.body-push-down {
    padding-top: calc(56.25vw + 1rem); 
}


/* =========================================
   DISEÑO PARA TV Y ESCRITORIO (LG > 1024px)
   ========================================= */
/* Aumentamos el tamaño para que se vea bien en la TV */

@media (min-width: 1024px) {

    /* 1. EL REPRODUCTOR (Gigante a la izquierda) */
    #fixed-player-container {
        top: 5.5rem !important; 
        left: 1.5rem !important; 
        
        /* AHORA OCUPA EL 68% DE LA PANTALLA */
        width: 68% !important; 
        max-width: none !important; /* Quitamos el límite para que crezca en TV 4K */
        
        border-radius: 1rem !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.7) !important;
        transform: none; 
    }
    
    .video-player-wrapper {
        border-radius: 1rem !important;
    }

    /* Ocultar hacia la izquierda */
    .fixed-player-hidden {
        transform: translateX(-150%) !important; 
        opacity: 0;
    }

    .fixed-player-active {
        transform: translateX(0) !important;
        opacity: 1;
    }

    /* 2. EL CONTENIDO (Columna derecha) */
    
    .body-push-down {
        padding-top: 6rem !important; 
        
        /* Empujamos al 70% (68% del video + 2% margen) */
        padding-left: 70% !important; 
        
        transition: padding-left 0.3s ease, padding-top 0.3s ease;
    }

    /* 3. FORZAR UNA SOLA COLUMNA DE VIDEOS */
    .body-push-down #results,
    .body-push-down #viewed-history {
        /* 1fr fuerza a que sea una sola columna que ocupe el espacio restante */
        grid-template-columns: 1fr !important; 
    }
    
    /* Ajuste para que las tarjetas de la lista no sean gigantes de alto */
    .body-push-down .card {
        flex-direction: row; /* Opcional: Si querés diseño horizontal en la lista */
    }

    .container {
        transition: padding-left 0.3s ease;
        max-width: 98% !important; 
    }
}