/* 

Add here your custom css styles Example: p { text-align: center; color: red; } 

*/

.home-page-categories .videos .video-list .video-list-title h4 {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #000;
    letter-spacing: -1px;
    max-height: 4rem;

}

.dark_hr{
    display:none !important;
}

.content{
    margin-bottom: 0px !important;
}

.pt_vid_fixed_height {
    min-height: 72px !important;
    max-height: 72px !important;
}

.home-page-categories .title h4{
    font-size: 24px !important;
    font-weight: 600;
    letter-spacing: -1px;
}

.home-page-categories .videos .video-list.short .pt_vid_fixed_height{
    max-height: none !important;
}

.home-page-categories .title h4 > div{
        background-color: #04abf2 !important;
}

.yp_side_drawer ul.sections li a svg{
    width: 21px !important;
    height: 21px !important;
}

.yp_side_drawer ul.sections li a{
    height: 35px; 
    font-weight: 600;
}
/* ACACLIP: se eliminó el hero (Vídeo destacado) del home.
   El wrapper .pt_home_top_m tenía margin-top:-150px para montarse sobre el
   degradado del hero; sin hero, eso metía el contenido bajo la barra de topics.
   Se anula ese margen negativo. */
.pt_home_top_m { margin-top: 20px !important; }

/* ACACLIP: contenido del home a todo el ancho, hasta el borde de la barra lateral.
   El wrapper .yp_side_menu.has_side_menu ya reserva el espacio del sidebar (margin-left),
   así que quitando el tope de 1400px el contenido llena el ancho disponible y
   refluye cuando la barra se esconde. */
.container-home { max-width: none !important; }

/* ACACLIP: tarjetas de video estilo YouTube (avatar del canal + metadata) */
.home-page-categories .videos .video-list .acaclip_meta_row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 5px;
}
.acaclip_ch_avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}
.acaclip_ch_avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.acaclip_meta_col { min-width: 0; flex: 1 1 auto; }
.home-page-categories .videos .video-list .acaclip_meta_col .video-list-title h4 {
    color: #0f0f0f;
    margin: 0 0 3px;
}
.acaclip_meta_col .video-list-by {
    color: #606060;
    font-size: 1.25rem;
    line-height: 1;
}
.acaclip_meta_col .video-list-by a { color: #606060; text-decoration: none; }
.acaclip_meta_col .video-list-by a:hover { color: #0f0f0f; }
.acaclip_meta_col .acaclip_stats { margin-top: 1px; }
/* modo noche: título y metadata legibles */
body.night-mode .home-page-categories .videos .video-list .acaclip_meta_col .video-list-title h4 { color: #f1f1f1; }
body.night-mode .acaclip_meta_col .video-list-by,
body.night-mode .acaclip_meta_col .video-list-by a { color: #aaa; }
body.night-mode .acaclip_meta_col .video-list-by a:hover { color: #fff; }

/* ACACLIP fix: el avatar del canal debe medir 36px; vence la regla global
   .home-page-categories .videos .video-list img { position:absolute; width:100% } */
.home-page-categories .videos .video-list .acaclip_ch_avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    position: relative;
}
.home-page-categories .videos .video-list .acaclip_ch_avatar img {
    position: static;
    top: auto; left: auto; right: auto; bottom: auto;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
}

/* ACACLIP: menú ⋮ de tarjetas estilo YouTube */
.home-page-categories .videos .video-list .acaclip_meta_row { position: relative; }
.acaclip_meta_col { padding-right: 22px; }
.acaclip_more_btn {
    position: absolute; top: -3px; right: -4px;
    border: 0; background: transparent; padding: 5px; margin: 0;
    cursor: pointer; color: #606060; border-radius: 50%; line-height: 0;
    transition: background .15s, color .15s;
}
.acaclip_more_btn:hover { background: rgba(0,0,0,.08); color: #0f0f0f; }
.acaclip_card_menu {
    position: absolute; z-index: 9999; display: none;
    background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.2);
    padding: 6px 0; min-width: 190px;
}
.acaclip_card_menu.show { display: block; }
.acaclip_card_menu button {
    display: flex; align-items: center; gap: 14px; width: 100%;
    border: 0; background: transparent; padding: 11px 18px; cursor: pointer;
    font-size: 1.35rem; color: #0f0f0f; text-align: left; white-space: nowrap;
}
.acaclip_card_menu button:hover { background: rgba(0,0,0,.06); }
.acaclip_toast {
    position: fixed; bottom: 28px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0f0f0f; color: #fff; padding: 12px 22px; border-radius: 8px;
    font-size: 1.35rem; z-index: 100000; opacity: 0; transition: all .25s ease;
    pointer-events: none;
}
.acaclip_toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
body.night-mode .acaclip_card_menu { background: #282828; box-shadow: 0 4px 24px rgba(0,0,0,.5); }
body.night-mode .acaclip_card_menu button { color: #f1f1f1; }
body.night-mode .acaclip_card_menu button:hover { background: rgba(255,255,255,.1); }
body.night-mode .acaclip_more_btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ACACLIP fix: en los clips la metadata va superpuesta sobre la imagen (gradiente
   oscuro), así que el título debe ser BLANCO — mi regla #0f0f0f de las tarjetas
   normales tenía la misma especificidad y lo pisaba. Esta regla (más específica)
   restaura el blanco en clips, en tema claro y oscuro. */
.home-page-categories .videos .video-list.short .acaclip_meta_col .video-list-title h4,
body.night-mode .home-page-categories .videos .video-list.short .acaclip_meta_col .video-list-title h4 {
    color: #fff;
}

/* ACACLIP: encabezados de sección más grandes */
.home-page-categories .title h4 span,
.home-page-categories .title h4 .view_more_link a { font-size: 15px; }

/* ACACLIP: quitar margin-top del video-list-by (nombre canal + vistas) */
.home-page-categories .videos .video-list .video-list-by { margin-top: 0; }

/* ACACLIP: en pantallas chicas los títulos ocupan 2 líneas y la metadata quedaba
   pegada al video de abajo -> más espacio inferior entre tarjetas. */
.home-page-categories .videos .video-list:not(.short) { margin-bottom: 24px; }
@media (max-width: 575px) {
    .home-page-categories .videos .video-list:not(.short) { margin-bottom: 32px; }
}

/* ACACLIP: preview de video en hover (overlay sobre la miniatura) */
.home-page-categories .videos .video-list .video-list-image { position: relative; }
.acaclip-preview-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 4; background: #000; pointer-events: none;
    border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;
}

/* ACACLIP: chips de categorías del watch en UNA fila con scroll horizontal (estilo YouTube) */
.article-categories .pt_categories ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding-bottom: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.article-categories .pt_categories ul::-webkit-scrollbar { display: none; height: 0; }
.article-categories .pt_categories ul li { flex: 0 0 auto; margin: 0 !important; white-space: nowrap; }
.article-categories .pt_categories ul li a { white-space: nowrap; }
.article-categories .pt_categories ul li.active a { background-color: #03A9F4; color: #fff; border-color: #03A9F4; }

/* ACACLIP: chips watch -> bordes menos redondos, menos gap, flechas de scroll */
.article-categories .pt_categories ul { gap: 5px; }
.article-categories .pt_categories ul li a { border-radius: 8px; padding: 3px 11px; }
.acaclip_chip_scroller { position: relative; }
.acaclip_chip_scroller ul { scroll-behavior: smooth; }
.acaclip_chip_arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ddd;
    background: #fff; color: #0f0f0f; display: none; align-items: center;
    justify-content: center; cursor: pointer; padding: 0;
    box-shadow: 0 1px 6px rgba(0,0,0,.22);
}
.acaclip_chip_arrow.show { display: flex; }
.acaclip_chip_prev { left: -2px; }
.acaclip_chip_next { right: -2px; }
body.night-mode .acaclip_chip_arrow { background: #282828; color: #f1f1f1; border-color: #444; }

/* ACACLIP ajuste flechas: mismo radio que los chips (8px) + subir un poco */
.article-categories .pt_categories ul { padding-bottom: 0; }
.acaclip_chip_arrow { border-radius: 8px; margin-top: 0px; }