/*
Theme Name: temaYT
Description: temaYT.
Version: 3.0
Author: temaYT
*/

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #0f0f0f; color: white; font-family: Roboto, Arial, sans-serif; overflow-x: hidden; }

/* HEADER */
header {
    height: 56px; padding: 0 16px; display: flex; align-items: center;
    justify-content: space-between; position: sticky; top: 0;
    background: #0f0f0f; z-index: 100; gap: 10px;
}
.nav-left { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.logo { font-weight: bold; font-size: 18px; display: flex; align-items: center; cursor: pointer; text-decoration: none; color: white; }
.logo span { background: red; padding: 2px 6px; border-radius: 4px; margin-right: 4px; font-size: 12px; }

.nav-center { display: flex; align-items: center; flex: 1; max-width: 728px; gap: 12px; }
.search-container { 
    display: flex; flex: 1; background: #121212; border: 1px solid #333; 
    border-radius: 40px; overflow: hidden; height: 40px;
}
.search-container input { flex: 1; background: transparent; border: none; color: white; padding: 0 16px; outline: none; width: 100%; }
.search-btn { background: #222; border: none; border-left: 1px solid #333; width: 64px; color: white; cursor: pointer; }
.mic-btn { background: #181818; border: none; width: 40px; height: 40px; border-radius: 50%; color: white; cursor: pointer; flex-shrink: 0; }

.nav-right { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.btn-crear { background: #272727; border: none; color: white; padding: 8px 12px; border-radius: 20px; font-weight: 500; cursor: pointer; }
.user-avatar { width: 32px; height: 32px; background: #00bcd4; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }

/* MENU LATERAL (SIDEBAR) */
#sidebar {
    position: fixed; top: 0; left: -240px; width: 240px; height: 100%;
    background: #0f0f0f; z-index: 1000; transition: 0.3s; padding: 12px;
    border-right: 1px solid #333;
}
#sidebar.active { left: 0; }
#overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: none; z-index: 999;
}
#overlay.active { display: block; }
.side-item { padding: 12px; border-radius: 10px; cursor: pointer; transition: 0.2s; }
.side-item:hover { background: #272727; }

/* GRID PRINCIPAL */
.grid-principal { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 16px; max-width: 1700px; margin: auto; }

/* VIDEO */
.reproductor { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; display: flex; align-items: center; justify-content: center; }

/* FILTROS */
.filtros { display: flex; gap: 12px; margin-bottom: 16px; overflow-x: auto; white-space: nowrap; padding-bottom: 8px; }
.filtros::-webkit-scrollbar { display: none; }
.chip { background: #272727; padding: 6px 12px; border-radius: 8px; font-size: 14px; cursor: pointer; border: none; color: white; }
.chip.active { background: white; color: black; }

/* LISTA LATERAL SUGERIDOS */
.lista-sugeridos { display: flex; flex-direction: column; gap: 12px; }
.miniatura-item { display: flex; gap: 12px; cursor: pointer; margin-bottom: 12px; }
.thumb { width: 168px; height: 94px; background: #222; border-radius: 8px; flex-shrink: 0; position: relative; background-size: cover; background-position: center; }
.meta-data h4 { font-size: 14px; margin-bottom: 4px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: normal; }
.meta-data p { font-size: 12px; color: #aaa; }

/* LIMPIEZA TOTAL PARA GADGETS WORDPRESS */
.lista-sugeridos .widget, .lista-sugeridos ul, .lista-sugeridos li {
    margin: 0 !important; padding: 0 !important; list-style: none !important;
    background: none !important; border: none !important;
}

/* RESPONSIVO */
@media (max-width: 768px) {
    .nav-right .btn-crear, .mic-btn, .nav-right div:nth-child(2) { display: none; }
    .logo { font-size: 14px; }
    .logo small { display: none; }
    .thumb { width: 140px; height: 78px; }
}

@media (min-width: 1012px) {
    .grid-principal { grid-template-columns: 1fr 402px; }
}

/* FIJACIÓN DEL WIDGET SUPERIOR */
.widgets-arriba {
    display: block;
    width: 100%;
    clear: both;
}

/* SOLUCIÓN INTEGRADA: BORRA LOS DUPLICADOS DE ABAJO Y ACTIVA SOLO EL DE ARRIBA */
.widgets-arriba-global {
    display: block !important;
}

main .widgets-arriba,
.grid-principal .widgets-arriba,
section .widgets-arriba {
    display: none !important;
}

/* SOLUCIÓN FOCALIZADA: OCULTA LA COPIA REBELDE EXCLUSIVAMENTE EN LA HOME */
body.home .grid-principal + .widgets-arriba,
body.home main + .widgets-arriba,
body.home .widgets-arriba:not(.widgets-arriba-global) {
    display: none !important;
}