/*
   pirabook_youtube_theme.css
   Dark "YouTube" theme overrides for the shared pirabook chrome
   (header, top search bar, sidebar, footer) used by:
   Publication, Artist, Favorite, Category and Home views.

   Loaded AFTER osahan.css / owl.carousel.css / owl.theme.css so these
   rules win the cascade without needing !important almost anywhere.
   Reuses the same design tokens already defined in
   css/rockola_default_template.css so the whole site matches.

   IMPORTANT: only visual properties (color/background/border/shadow/
   font) are touched here. No widths, paddings, margins, positions or
   z-index values from osahan.css are changed, to avoid breaking the
   existing layout/structure.
*/

:root{
    --yt-bg:            #0f0f0f;
    --yt-bg-raised:     #181818;
    --yt-bg-card:       #212121;
    --yt-bg-card-hover: #2a2a2a;
    --yt-bg-input:      #121212;
    --yt-border:        #303030;
    --yt-text:          #f1f1f1;
    --yt-text-secondary:#aaaaaa;
    --yt-red:           #ff0000;
    --yt-red-hover:     #d90000;
    --yt-radius:        12px;
    --yt-radius-sm:     8px;
    --yt-font: "Roboto", "Segoe UI", Arial, Helvetica, sans-serif;
}

/* ============ Body / global ============ */

html, body{
    background-color: var(--yt-bg) !important;
    color: var(--yt-text);
    font-family: var(--yt-font);
}

body{
    background-image: none !important;
}

h1, h2, h3, h4, h5, h6{
    color: var(--yt-text);
}

a{
    color: var(--yt-text);
}

a:hover{
    color: var(--yt-red);
}

/* ============ Wrapper / content area ============ */

#wrapper #content-wrapper .container-fluid{
    background: var(--yt-bg) !important;
}

/* ============ Top navbar ============ */

.osahan-nav{
    background: var(--yt-bg-raised) !important;
    box-shadow: 0 1px 0 var(--yt-border);
    border-bottom: 1px solid var(--yt-border);
}

.osahan-nav .navbar-brand,
.osahan-nav a{
    color: var(--yt-text) !important;
}

.osahan-nav #sidebarToggle{
    color: var(--yt-text-secondary);
}

.osahan-nav #sidebarToggle:hover{
    color: var(--yt-text);
}

/* Navbar search pill */
.osahan-navbar-search .form-control{
    background-color: var(--yt-bg-input) !important;
    border: 1px solid var(--yt-border) !important;
    color: var(--yt-text) !important;
}

.osahan-navbar-search .form-control::placeholder{
    color: var(--yt-text-secondary);
}

.osahan-navbar-search .btn{
    background-color: var(--yt-bg-input) !important;
    border: 1px solid var(--yt-border) !important;
    color: var(--yt-text-secondary) !important;
}

.osahan-navbar-search .btn:hover{
    background-color: var(--yt-bg-card-hover) !important;
    color: var(--yt-text) !important;
}

/* Autocompletado del buscador (artista o cancion) */
.osahan-search-wrap{
    position: relative;
}

.osahan-suggest-dropdown{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background-color: var(--yt-bg-card);
    border: 1px solid var(--yt-border);
    border-radius: var(--yt-radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,.45);
    overflow: hidden;
    z-index: 1050;
    display: none;
}

.osahan-suggest-dropdown.is-open{
    display: block;
}

.osahan-suggest-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    cursor: pointer;
    color: var(--yt-text);
    font-size: 13px;
    line-height: 1.3;
}

.osahan-suggest-item i{
    color: var(--yt-text-secondary);
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.osahan-suggest-item:hover,
.osahan-suggest-item.is-active{
    background-color: var(--yt-bg-card-hover);
}

.osahan-suggest-item mark{
    background: none;
    color: inherit;
    font-weight: 700;
    padding: 0;
}

/* Logged in user dropdown */
.osahan-right-navbar-user a,
a#userDropdown{
    color: var(--yt-text) !important;
}

.osahan-right-navbar-user .dropdown-menu{
    background-color: var(--yt-bg-card);
    border: 1px solid var(--yt-border);
}

.osahan-right-navbar-user .dropdown-menu a{
    color: var(--yt-text) !important;
}

.osahan-right-navbar-user .dropdown-menu a:hover{
    background-color: var(--yt-bg-card-hover) !important;
    color: var(--yt-text) !important;
}

.osahan-right-navbar-user .dropdown-divider{
    border-top: 1px solid var(--yt-border);
}

/* Menu de usuario compartido (template/user_menu_view.php: Pirabook /
   Mis Favoritos / Salir). El triangulito y la flecha de "abierto" son
   sprites (no texto), definidos originalmente en
   css/pirabook/blog-post.css, que aqui no se carga -> sin esto no se
   ve nada de icono junto al nombre de usuario. No se copia la regla
   "position: absolute" de ese archivo original para no mover el menu
   de donde ya esta bien colocado en esta plantilla. */
li.menuUser > a.infinit{
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("../img/pirabook/interface/50215.png");
    background-repeat: no-repeat;
}

.menuUser > div.downArrow{
    width: 11px;
    height: 11px;
    position: relative;
    display: none;
    background-image: url("../img/pirabook/interface/down50215.png");
    background-repeat: no-repeat;
}

.menuUser .dropdown-menu{
    background-color: var(--yt-bg-card) !important;
    border: 1px solid var(--yt-border) !important;
}

.menuUser .dropdown-menu li a{
    color: var(--yt-text) !important;
    background-color: transparent !important;
}

.menuUser .dropdown-menu li a:hover{
    background-color: var(--yt-bg-card-hover) !important;
}

/* ============ Sidebar ============ */

.sidebar{
    background: var(--yt-bg-raised) !important;
    border-right: 1px solid var(--yt-border);
}

.sidebar .nav-item .nav-link,
.sidebar .nav-item .nav-link .fas,
.sidebar .nav-item .nav-link span{
    color: var(--yt-text-secondary) !important;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link{
    background-color: var(--yt-bg-card-hover) !important;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item .nav-link:hover .fas,
.sidebar .nav-item .nav-link:hover span,
.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link:active,
.sidebar .nav-item .nav-link:focus{
    color: var(--yt-text) !important;
}

.sidebar .nav-item .dropdown-menu{
    background-color: var(--yt-bg-card);
    border: 1px solid var(--yt-border);
}

.sidebar .nav-item .dropdown-menu .dropdown-item{
    color: var(--yt-text-secondary);
}

.sidebar .nav-item .dropdown-menu .dropdown-item:hover{
    background-color: var(--yt-bg-card-hover) !important;
    color: var(--yt-text) !important;
}

/* Sidebar search box */
.sidebar input#search,
.sidebar .form-control{
    background-color: var(--yt-bg-input) !important;
    border: 1px solid var(--yt-border) !important;
    color: var(--yt-text) !important;
}

.sidebar input#search::placeholder{
    color: var(--yt-text-secondary);
}

.sidebar .button_search{
    background-color: var(--yt-bg-input) !important;
    border: 1px solid var(--yt-border) !important;
    color: var(--yt-text-secondary) !important;
}

/* ============ Footer ============ */

footer.sticky-footer{
    background-color: var(--yt-bg-raised) !important;
    border-top: 1px solid var(--yt-border);
    color: var(--yt-text-secondary);
}

footer.sticky-footer a{
    color: var(--yt-text-secondary);
}

footer.sticky-footer a:hover{
    color: var(--yt-red);
}

.scroll-to-top{
    background-color: var(--yt-bg-card) !important;
    border: 1px solid var(--yt-border);
}

.scroll-to-top:hover{
    background-color: var(--yt-bg-card-hover) !important;
}

/* ============ Generic boxes / cards ============ */

.box{
    background-color: var(--yt-bg-card) !important;
    box-shadow: none;
    border: 1px solid var(--yt-border);
    border-radius: var(--yt-radius-sm);
}

.video-card{
    background-color: var(--yt-bg-card) !important;
    box-shadow: none;
    border: 1px solid var(--yt-border);
}

.video-card-list{
    background: transparent !important;
}

.video-card-image{
    box-shadow: none;
    background-color: var(--yt-bg-input);
}

.video-title a,
.video-title-group a,
.video-card-list .video-card-body .video-title a{
    color: var(--yt-text) !important;
}

.video-title a:hover,
.video-card-list .video-card-body .video-title a:hover{
    color: var(--yt-red) !important;
}

.video-view{
    color: var(--yt-text-secondary);
}

/* ============ Publication (single video) page ============ */

.single-video-title h2 a{
    color: var(--yt-text) !important;
}

.single-video-title p{
    color: var(--yt-text-secondary);
}

.single-video-author p,
.single-video-author a{
    color: var(--yt-text-secondary);
}

.single-video-author strong{
    color: var(--yt-text);
}

.single-video-info-content h6{
    color: var(--yt-text);
}

.single-video-info-content p{
    color: var(--yt-text-secondary);
}

.tags span a{
    background-color: var(--yt-bg-card-hover) !important;
    color: var(--yt-text) !important;
}

/* ============ Forms / buttons / dropdowns (generic) ============ */

.form-control,
.custom-select{
    background-color: var(--yt-bg-input) !important;
    border-color: var(--yt-border) !important;
    color: var(--yt-text) !important;
}

.form-control::placeholder{
    color: var(--yt-text-secondary);
}

.btn-light{
    background-color: var(--yt-bg-card) !important;
    border-color: var(--yt-border) !important;
    color: var(--yt-text) !important;
}

.btn-light:hover{
    background-color: var(--yt-bg-card-hover) !important;
}

.dropdown-menu{
    background-color: var(--yt-bg-card);
    border-color: var(--yt-border);
}

.dropdown-menu .dropdown-item,
.dropdown-item{
    color: var(--yt-text-secondary) !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-item:hover{
    background-color: var(--yt-bg-card-hover) !important;
    color: var(--yt-text) !important;
}

.dropdown-item.active, .dropdown-item:active{
    background-color: var(--yt-bg-card-hover) !important;
    color: var(--yt-text) !important;
}

.dropdown-header{
    color: var(--yt-text-secondary);
}

.dropdown-divider{
    border-top: 1px solid var(--yt-border);
}

label{
    color: var(--yt-text-secondary);
}

/* ============ Modals (login-required, message) ============ */

.modal-content{
    background-color: var(--yt-bg-card);
    border: 1px solid var(--yt-border);
    color: var(--yt-text);
}

.modal-header,
.modal-footer{
    border-color: var(--yt-border);
}

.modal-title{
    color: var(--yt-text);
}

.modal .close{
    color: var(--yt-text);
    text-shadow: none;
    opacity: 0.8;
}

#dialog{
    background-color: var(--yt-bg-card);
    color: var(--yt-text);
}

/* ======================================================================
   Menu lateral -> menu horizontal arriba, oculto en móvil
   (mismo <ul class="sidebar navbar-nav"> de pirabook-leftWidget.php,
   sólo reposicionado con CSS; nada de HTML/IDs/JS cambia)
   ====================================================================== */

/* #wrapper usaba display:-webkit-box (flex legado); lo forzamos a bloque
   para que .sidebar y #container-body se apilen uno debajo del otro
   en vez de quedar lado a lado */
#wrapper{
    display: block !important;
}

/* La barra deja de ser una columna fija a la izquierda y pasa a ser
   una fila horizontal normal, justo debajo del header */
.sidebar{
    position: static !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 10px !important;
    z-index: 98;
}

.sidebar:hover{
    overflow: visible !important;
}

.sidebar .nav-item,
.sidebar .nav-item:last-child{
    margin: 0 !important;
}

.sidebar .nav-item .nav-link{
    width: auto !important;
    text-align: left !important;
    padding: 10px 14px !important;
    display: flex;
    align-items: center;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item.active .nav-link{
    width: auto !important;
}

.sidebar .nav-item .nav-link span{
    margin: 0 !important;
}

/* El dropdown de Categorías se abre hacia abajo, como cualquier
   dropdown de navbar normal, en vez de a un lado */
.sidebar .nav-item .dropdown-menu{
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    transform: none !important;
    margin: 0;
}

.sidebar .nav-item .dropdown-menu.dropup{
    top: auto !important;
    bottom: 100% !important;
}

/* Buscar: que el formulario no ocupe todo el ancho de la fila */
.sidebar li.nav-item form.FormSearch{
    display: flex;
    align-items: center;
}

.sidebar li.nav-item form.FormSearch input#search{
    width: 160px;
    max-width: 40vw;
}

/* Ya no hay columna fija a la izquierda que compensar */
#wrapper #content-wrapper .container-fluid,
.sidebar-toggled #wrapper #content-wrapper .container-fluid{
    padding: 30px !important;
}

body.fixed-nav #content-wrapper,
body.fixed-nav.sidebar-toggled #content-wrapper{
    padding-left: 0 !important;
    margin-top: 0 !important;
}

footer.sticky-footer,
body.sidebar-toggled footer.sticky-footer{
    margin-left: 0 !important;
    width: 100% !important;
}

/* Móvil: el menú se esconde por default y aparece con el botón
   hamburguesa (#sidebarToggle), igual que cualquier menú responsive */
@media (max-width: 767.98px){
    .sidebar{
        display: none !important;
    }

    .sidebar.toggled{
        display: flex !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch;
    }

    .sidebar.toggled .nav-item .nav-link{
        width: 100% !important;
    }

    .sidebar.toggled .nav-item .dropdown-menu{
        position: static !important;
    }

    .sidebar.toggled li.nav-item form.FormSearch{
        width: 100%;
    }

    .sidebar.toggled li.nav-item form.FormSearch input#search{
        width: 100%;
        max-width: none;
    }
}

/* Escritorio: el menú siempre visible en su fila; el botón hamburguesa
   sólo tiene sentido en móvil */
@media (min-width: 768px){
    .sidebar.toggled{
        width: 100% !important;
        overflow: visible !important;
    }

    #sidebarToggle{
        display: none !important;
    }
}

/* ======================================================================
   Buscar (dentro del menú) más compacto: se quita la etiqueta "Buscar"
   (repetida con el placeholder) y se deja sólo el campo, en línea con
   el resto del menú, con su icono de lupa
   ====================================================================== */

.sidebar li.nav-item:has(form.FormSearch) > a.nav-link{
    display: none;
}

.sidebar li.nav-item form.FormSearch input#search{
    width: 130px;
    max-width: 32vw;
    height: auto;
    padding: 6px 10px !important;
    font-size: 13px !important;
}

.sidebar li.nav-item form.FormSearch .button_search{
    background-color: var(--yt-bg-input) !important;
    border: 1px solid var(--yt-border) !important;
    border-left: none !important;
    color: var(--yt-text-secondary) !important;
    display: flex;
    align-items: center;
    padding: 0 10px !important;
}

.sidebar li.nav-item form.FormSearch .button_search:hover{
    background-color: var(--yt-bg-card-hover) !important;
    color: var(--yt-text) !important;
}

.sidebar li.nav-item form.FormSearch .glyphicon-search::before{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f002";
}

@media (max-width: 767.98px){
    .sidebar.toggled li.nav-item:has(form.FormSearch) > a.nav-link{
        display: none;
    }
}

/* ======================================================================
   Botón "Productos - $" (carrito) y su panel desplegable: mismo estilo
   oscuro que el resto del menú, en vez del verde/blanco original
   ====================================================================== */

.dropbtn{
    background-color: var(--yt-bg-card) !important;
    color: var(--yt-text) !important;
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius-sm) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600;
}

.dropdown:hover .dropbtn{
    background-color: var(--yt-bg-card-hover) !important;
}

.cart_header img{
    background-color: var(--yt-bg-card) !important;
}

.dropdown-content{
    background-color: var(--yt-bg-card) !important;
    border: 1px solid var(--yt-border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.dropdown-content a{
    background-color: transparent !important;
    color: var(--yt-text) !important;
}

.dropdown-content a:hover{
    background-color: var(--yt-bg-card-hover) !important;
    color: var(--yt-text) !important;
}

.cart-wrapper{
    border-color: var(--yt-border) !important;
}

.cart-wrapper td{
    border-top-color: var(--yt-border) !important;
    color: var(--yt-text-secondary);
}

.mini-cart-total table td{
    color: var(--yt-text-secondary);
}

.mini-cart-total .button{
    background-color: var(--yt-bg-card-hover) !important;
    color: var(--yt-text) !important;
}

/* El panel del carrito traía un "margin-top:-300px" pensado para cuando
   el botón vivía abajo en la barra lateral vieja; ahora que el botón
   está arriba, lo reposicionamos para que abra justo debajo de él */
.dropdown:hover .dropdown-content{
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    margin-top: 6px !important;
    z-index: 1000 !important;
}

/* ======================================================================
   Promo de la app en Google Play (mismo diseño que en la pantalla
   principal de karaokes, template_rockola/rockola_view.php)
   ====================================================================== */

.yt-app-promo{
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(90deg,#1c1c1c,#242424);
    border: 1px solid var(--yt-border);
    border-radius: var(--yt-radius);
    padding: 12px 18px;
    margin-bottom: 16px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.yt-app-promo:hover{
    background: linear-gradient(90deg,#242424,#2c2c2c);
    border-color: #1c62b9;
    text-decoration: none;
}

.yt-app-promo-icon{
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.yt-app-promo-text{
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.yt-app-promo-text strong{
    color: var(--yt-text);
    font-size: 15px;
    font-weight: 600;
}

.yt-app-promo-text span{
    color: var(--yt-text-secondary);
    font-size: 12.5px;
}

.yt-app-promo-badge{
    height: 40px;
    flex-shrink: 0;
}

@media (max-width: 480px){
    .yt-app-promo{
        padding: 10px 12px;
    }
    .yt-app-promo-text span{
        display: none;
    }
    .yt-app-promo-badge{
        height: 34px;
    }
}

/* Boton "Agregar a Mi Lista" en las tarjetas de karaoke
   (template/video_card_image.php: Home, Artista, Mis Favoritos, busqueda).
   Mismo criterio visual que .yt-favorite-btn del reproductor, a menor
   escala para que quepa dentro de la tarjeta. */
.video-card-actions{
    margin-top: 8px;
}

.card-favorite-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--yt-bg-card);
    color: var(--yt-text);
    border: none;
    border-radius: 16px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .2px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--yt-font);
    transition: background-color .15s, color .15s;
    white-space: nowrap;
}

.card-favorite-btn:hover{
    background-color: var(--yt-bg-card-hover);
}

.card-favorite-btn i{
    color: var(--yt-text-secondary);
    transition: color .15s;
    font-size: 11px;
}

.card-favorite-btn.is-active{
    background-color: rgba(255,0,0,.12);
    color: var(--yt-red);
}

.card-favorite-btn.is-active i{
    color: var(--yt-red);
}

/* ======================================================================
   Movil: letra mas grande en toda la pagina
   El tema base (osahan.css) deja la letra en 13px en todos lados y la
   encoge todavia mas (10-11px) en varias tarjetas y menus dentro de sus
   propios @media para celular. En una pantalla de telefono eso se ve
   demasiado chico, asi que aqui se sube a un tamano comodo de leer, sin
   tocar anchos/paddings/layout (esta hoja carga al final, asi que gana
   la cascada sobre osahan.css).
   ====================================================================== */
@media (max-width: 767.98px){

    body{
        font-size: 16px !important;
    }

    /* Titulos de karaoke y nombre de artista en las tarjetas
       (Home, Destacados, Artista, Favoritos, resultados de busqueda) */
    .video-title a,
    .video-title-group a,
    .channels-title a{
        font-size: 16px !important;
    }
    .video-card-list .video-card-body .video-title a{
        font-size: 15px !important;
    }

    /* Encabezados de sección ("Karaokes Destacados", "Categorias", etc.) */
    .main-title h6,
    div.afterdiv > div.main-title > h6,
    .osahan-title{
        font-size: 16px !important;
    }

    /* Autocompletado del buscador */
    .osahan-suggest-item{
        font-size: 15px !important;
    }

    /* Botón "Agregar a Mi Lista" */
    .card-favorite-btn{
        font-size: 13px !important;
    }
    .card-favorite-btn i{
        font-size: 13px !important;
    }

    /* Buscador y botón "Productos" dentro del menú lateral */
    .sidebar li.nav-item form.FormSearch input#search{
        font-size: 15px !important;
    }
    .dropbtn{
        font-size: 15px !important;
    }

    /* Promo de la app */
    .yt-app-promo-text strong{
        font-size: 16px !important;
    }
    .yt-app-promo-text span{
        font-size: 13px !important;
    }

    /* Lista de artistas del menú lateral */
    .sidebar .channel-sidebar-list h6,
    .sidebar .channel-sidebar-list li a{
        font-size: 13px !important;
    }
    .sidebar .nav-item .nav-link span{
        font-size: 13px !important;
    }

    /* Pantalla de reproducción: titulo, datos del artista, comentarios */
    .single-video-title h2{
        font-size: 19px !important;
    }
    .tags span a{
        font-size: 13px !important;
    }
}