/*
 * Estructura común de los bloques de la home, para todos los temas (la carga header.php antes que la hoja
 * del tema). Aquí solo va lo que no cambia entre temas; anchos, márgenes, títulos, flechas y cuántas
 * diapositivas se ven los pone cada tema en assets/css/temas/{tema}.css. Ver includes/tema.php.
 *
 * Piezas de un bloque:
 *   .ott-bloque                 el bloque (con un modificador por bloque: .ott-bloque--canales...)
 *   .ott-bloque__contenedor     marca el ancho del contenido
 *   .ott-bloque__cuerpo         cabecera y contenido
 *   .ott-bloque__cabecera       título (.ott-bloque__titulo) y separador (.ott-bloque__separador)
 *   .ott-carrusel               carrusel (assets/js/carrusel.js); sus elementos son .ott-carrusel__item
 *   .ott-carrusel__flecha       flechas del carrusel (--anterior / --siguiente)
 *   .ott-boton-ver              enlace «Ver todos...» del bloque (es un .coolBtn; el tema puede redibujarlo)
 *   .ott-bloque__pie            debajo del contenido, con el enlace «Ver...»
 *   .ott-carrusel__extra        elemento opcional del carrusel (logo del canal, tarjeta «más vídeos»): si el tema lo
 *                               oculta con display: none, assets/js/carrusel.js lo quita antes de arrancar
 *
 * Fuera de los bloques:
 *   .ott-contenedor             contenedor de página (all_clubs, listado, mi_club, programacion, subcanal); el PHP pinta
 *                               «container ott-contenedor» y el tema decide su ancho
 *   <body data-tema data-pagina>  tema activo y página (nombre del .php: index2, listado...), para que una hoja pueda
 *                               ajustar una página concreta con :where([data-pagina="..."]) sin sumar especificidad
 */

.ott-bloque__cuerpo {
    padding-bottom: 1.5rem;
    margin-bottom: 0.25rem;
}

.ott-bloque__separador {
    display: none;
}

/* Pie del bloque: el enlace «Ver...» a la derecha (sin utilidades de Bootstrap, para que el tema pueda ocultarlo) */
.ott-bloque__pie {
    display: flex;
    justify-content: flex-end;
}

.ott-bloque--nuevos .ott-bloque__pie,
.ott-bloque--programacion .ott-bloque__pie {
    margin-top: 0.25rem;
}

.ott-carrusel {
    position: relative;
    /* Lo que lee assets/js/carrusel.js; cada tema lo cambia con media queries */
    --carrusel-restar: 0;     /* diapositivas menos que las configuradas en el bloque */
    --carrusel-maximo: 99;    /* tope de diapositivas */
    --carrusel-centrado: 0;   /* 1 = centrado (centerMode) cuando hay más elementos que diapositivas configuradas */
    --carrusel-asomo: 0px;    /* lo que asoman los elementos de los lados al centrar */
}

.ott-carrusel__flecha {
    cursor: pointer;
}

/* Rejilla de vídeos (Nuevos vídeos, Más vistos): el primero en grande (.ott-rejilla__principal) y el resto en
   .ott-rejilla__item; cuántos caben por fila lo pone cada tema */
.ott-rejilla__item {
    position: relative;
    width: 100%;
}

/* Fila de un canal con sus vídeos (Vídeos canal/tag): la imagen de fondo del canal y el título que lleva al canal */
.ott-bloque--videos-canal {
    background-size: 79% 100%;
    background-position: 50%;
    background-repeat: no-repeat;
}

@media (max-width: 2300px) {
    .ott-bloque--videos-canal { background-size: 90% 100%; }
}

@media (max-width: 1920px) {
    .ott-bloque--videos-canal { background-size: 100% 100%; }
}

.link-ir-canal {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    transition: color 0.2s ease;
}

.link-ir-canal i {
    margin-left: 0.5rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease, transform 0.2s ease;
}

.link-ir-canal:hover,
.link-ir-canal:hover * {
    color: var(--color-secondary);
    text-decoration: none;
}

.link-ir-canal:hover i {
    transform: translateX(3px);
}

/* Marca de vídeo ya visto (includes/bloque_video_standart.php): triángulo en la esquina con el color del botón
   principal. El texto «Visto» solo lo enseña el tema que quiera una etiqueta */
.ott-visto {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    left: 0;
    clip-path: polygon(0% 0, 100% 0, 100% 0%, 0% 100%);
    z-index: 999;
}

/* Piezas que solo enseña el tema que las quiera: texto «Visto», distintivo «Directo» de la tarjeta, enlace «Ver todo»
   en la cabecera del bloque (los temas que no lo usan dejan el «Ver...» de abajo), logo del canal en la cabecera y
   flechas del slider 2 de la portada (includes/bloque_slider_home2.php) */
.ott-visto__texto,
.ott-etiqueta,
.ott-bloque__logo {
    display: none;
}

/* !important: a las flechas, slick les hace .show() al arrancar (jQuery les pone display: block en línea), y a los
   «Ver todo» algún script de la página también se lo pone */
.ott-bloque__ver-todo,
.ott-slider__flecha {
    display: none !important;
}

/* Diapositiva del slider de la portada sin imagen o con una que no carga: en vez del hueco, un fondo con los colores del
   tema. La clase la ponen includes/bloque_slider_home.php y bloque_slider_home2.php (sin imagen) y assets/js/home.js
   (imagen rota). !important para ganar al background-image en línea de la diapositiva; en móvil, el slider 2 pinta la
   imagen con un ::before que hereda este fondo (full-width.css) */
.ott-slider--sin-imagen {
    background-color: var(--color-primary);
    background-image:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 45%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, rgba(255, 255, 255, 0) 2px 14px),
        linear-gradient(120deg, var(--color-secondary) -60%, var(--color-primary) 60%) !important;
}

/* Foco visible al moverse con el teclado (no con el ratón) por enlaces, flechas y pestañas de los bloques */
.ott-bloque a:focus-visible,
.ott-carrusel__flecha:focus-visible,
.ott-pestana:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}