/*
 * Vista previa de los vídeos (includes/vista_previa.php, assets/js/vista_previa.js): la ficha que se abre sobre la
 * tarjeta de un vídeo y el botón «i» de las tarjetas en las pantallas táctiles.
 *
 * La ficha va en el <body>, fuera de los bloques, así que vale igual para todos los temas: toma los colores, radios y
 * fuente de Común › Diseño (--color-primary de fondo, --color-secondary de acento, --color-live, --color-premium,
 * --radius-card, --radius-btn, --font-principal). Si un tema necesita cambiarla, en assets/css/temas/{tema}.css con
 * :where([data-tema="..."]) .vprevia.
 *
 * Colores de los equipos (los pone el script en la ficha): --c-l / --c-v su color, --t-l / --t-v el texto que se lee
 * encima y --n-l / --n-v el color con luz, el que se ve sobre el fondo oscuro.
 */

.vprevia {
    --vp-fondo: var(--color-primary, #141428);
    --vp-acento: var(--color-secondary, #3df59e);
    --vp-acento-texto: var(--color-secondary-text, #111111);
    --vp-directo: var(--color-live, #ff2d55);
    --vp-premium: var(--color-premium, #ffd700);
    --vp-radio: var(--radius-card, 16px);
    --vp-texto: #ffffff;
    --vp-suave: rgba(255, 255, 255, .68);
    --vp-tenue: rgba(255, 255, 255, .12);
    --vp-gana: #22c55e;
    --vp-empata: #a1a1aa;
    --vp-pierde: #ef4444;
    --vp-curva: cubic-bezier(.2, .8, .2, 1);
    /* Al crecer se pasa un poco y vuelve: da la sensación de que la tarjeta salta hacia delante */
    --vp-rebote: cubic-bezier(.2, .9, .25, 1.06);
    position: absolute;
    top: 0;
    left: 0;
    /* Por encima de los modales de Bootstrap (1050); si la tarjeta está en una capa más alta, el script la sube */
    z-index: 1060;
    display: flex;
    flex-direction: column;
    width: 420px;
    max-height: calc(100vh - 24px);
    overflow: hidden;
    border-radius: var(--vp-radio);
    background: var(--vp-fondo);
    color: var(--vp-texto);
    font-family: var(--font-principal, inherit);
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    /* Cerrada: encogida sobre la tarjeta (--vprevia-desde y transform-origin los calcula el script para que su imagen
       caiga justo encima de la de la tarjeta) */
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(var(--vprevia-desde, .75));
    transition: opacity .12s ease, transform .34s var(--vp-rebote), box-shadow .34s ease, top .25s var(--vp-curva),
        visibility 0s linear .34s;
}

/* Abierta: crece desde la tarjeta hasta su tamaño, con sombra */
.vprevia--visible {
    box-shadow: 0 28px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .07);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .12s ease, transform .34s var(--vp-rebote), box-shadow .34s ease, top .25s var(--vp-curva),
        visibility 0s;
}

/* El punto de partida se pone sin transición (y así desaparece de golpe la ficha de la tarjeta anterior) */
.vprevia--salto,
.vprevia--salto .vprevia__cuerpo > * {
    transition: none !important;
}

.vprevia *,
.vprevia *::before,
.vprevia *::after {
    box-sizing: border-box;
}

.vprevia button {
    font-family: inherit;
}

/* ---------- Imagen y vídeo ---------- */

.vprevia__media {
    position: relative;
    flex: none;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(120deg, var(--c-l, #23233a) 0%, var(--c-l, #23233a) 49.9%, var(--c-v, #34344f) 50%, var(--c-v, #34344f) 100%);
}

.vprevia--enlace .vprevia__media {
    cursor: pointer;
}

/* Fundido con el cuerpo de la ficha. Mientras llegan los datos no está, para que al empezar se vea igual que la tarjeta */
.vprevia__media::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 45%;
    background: linear-gradient(to top, var(--vp-fondo), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.vprevia--lista .vprevia__media::after {
    opacity: 1;
}

/* Copia de la tarjeta de partido (la ficha empieza siendo la tarjeta): llena la imagen, quieta y sin «Ver partido» */
.vprevia__clon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity .45s ease;
}

.vprevia__clon:empty {
    display: none;
}

.vprevia__clon .tpar {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

.vprevia__clon .tpar-cta {
    display: none;
}

.vprevia--reproduciendo .vprevia__clon {
    opacity: 0;
}

.vprevia__poster,
.vprevia__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vprevia__poster {
    transition: opacity .45s ease;
}

.vprevia__reproductor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}

/* El reproductor de YouTube, más alto que la imagen: el vídeo la llena y quedan fuera sus rótulos de arriba y abajo */
.vprevia__reproductor iframe {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    border: 0;
}

/* Un solo reproductor a la vista: el de YouTube o el <video> (MP4 y HLS) */
.vprevia--media-yt .vprevia__video,
.vprevia:not(.vprevia--media-yt) .vprevia__reproductor iframe {
    display: none;
}

.vprevia--reproduciendo .vprevia__reproductor {
    opacity: 1;
}

.vprevia--reproduciendo .vprevia__poster {
    opacity: 0;
}

/* Sin acceso: candado y «Suscríbete» */
.vprevia__candado {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .55);
    font-weight: 700;
    text-align: center;
}

.vprevia__candado i {
    color: var(--vp-premium);
    font-size: 1.5rem;
}

.vprevia--bloqueado .vprevia__candado {
    display: flex;
}

.vprevia__chips {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    display: flex;
    gap: 6px;
}

.vprevia__chip {
    padding: .3em .7em;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.vprevia__chip--directo {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    background: var(--vp-directo);
    color: #fff;
}

.vprevia__chip--directo::before {
    content: "";
    width: .55em;
    height: .55em;
    border-radius: 50%;
    background: currentColor;
    animation: vprevia-latido 1.2s ease-in-out infinite;
}

.vprevia__chip--nuevo {
    background: var(--vp-acento);
    color: var(--vp-acento-texto);
}

.vprevia__sonido,
.vprevia__cerrar {
    position: absolute;
    top: 8px;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35) !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, .5) !important;
    color: #fff !important;
    font-size: .85rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.vprevia__sonido {
    right: 8px;
}

.vprevia--con-video .vprevia__sonido {
    display: inline-flex;
}

.vprevia__sonido:hover,
.vprevia__cerrar:hover {
    background: rgba(0, 0, 0, .75) !important;
}

/* Lo que lleva visto el usuario */
.vprevia__progreso {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    height: 4px;
    background: rgba(255, 255, 255, .2);
}

.vprevia__progreso i {
    display: block;
    height: 100%;
    background: var(--vp-acento);
}

.vprevia__progreso[hidden] {
    display: none;
}

/* ---------- Cuerpo ---------- */

.vprevia__cuerpo {
    display: grid;
    gap: 14px;
    padding: 4px 16px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Lo que llega con los datos entra escalonado, de arriba abajo */
.vprevia__cuerpo > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s ease, transform .35s var(--vp-curva);
}

.vprevia__cuerpo > .vprevia__esqueleto,
.vprevia--lista .vprevia__cuerpo > * {
    opacity: 1;
    transform: none;
}

.vprevia--lista .vprevia__cuerpo > :nth-child(2) { transition-delay: .04s; }
.vprevia--lista .vprevia__cuerpo > :nth-child(3) { transition-delay: .08s; }
.vprevia--lista .vprevia__cuerpo > :nth-child(4) { transition-delay: .12s; }
.vprevia--lista .vprevia__cuerpo > :nth-child(5) { transition-delay: .16s; }
.vprevia--lista .vprevia__cuerpo > :nth-child(6) { transition-delay: .2s; }
.vprevia--lista .vprevia__cuerpo > :nth-child(n+7) { transition-delay: .24s; }

/* Esqueleto mientras llegan los datos: el botón, el marcador y dos líneas, con un brillo que pasa */
.vprevia__esqueleto {
    display: grid;
    gap: 12px;
    padding: 6px 0 10px;
}

.vprevia__esqueleto i {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .06) 100%);
    background-size: 200% 100%;
    animation: vprevia-brillo 1.1s linear infinite;
}

.vprevia__esqueleto i:nth-child(1) {
    width: 42%;
    height: 32px;
    border-radius: var(--radius-btn, 999px);
}

.vprevia__esqueleto i:nth-child(2) {
    height: 52px;
    border-radius: 10px;
}

.vprevia__esqueleto i:nth-child(3) {
    width: 80%;
}

.vprevia__esqueleto i:nth-child(4) {
    width: 55%;
}

@keyframes vprevia-brillo {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

.vprevia__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vprevia__acciones:empty {
    display: none;
}

.vprevia__boton {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .6em 1.1em;
    border: 0;
    border-radius: var(--radius-btn, 999px);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}

.vprevia__boton:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.vprevia__boton--principal {
    background: var(--vp-acento) !important;
    color: var(--vp-acento-texto) !important;
}

.vprevia__boton--aqui {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: var(--vp-texto) !important;
}

/* «Ver desde aquí» solo cuando hay vídeo en marcha */
.vprevia:not(.vprevia--reproduciendo) .vprevia__boton--aqui {
    display: none;
}

.vprevia__vas {
    color: var(--vp-suave);
    font-size: .75rem;
}

.vprevia__seccion {
    min-width: 0;
}

.vprevia__titulo {
    margin: 0 0 6px;
    color: var(--vp-suave);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vprevia__nombre {
    margin: 0 0 4px;
    color: var(--vp-texto);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.vprevia__meta {
    display: flex;
    align-items: baseline;
    gap: .5em;
    margin: 0;
    color: var(--vp-suave);
    font-size: .8rem;
}

.vprevia__meta i {
    flex: none;
    width: 1em;
    text-align: center;
    opacity: .8;
}

.vprevia__meta--competicion {
    color: var(--vp-texto);
    font-weight: 600;
}

.vprevia__entradilla {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    color: var(--vp-suave);
    font-size: .8rem;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.vprevia__contexto {
    display: grid;
    gap: 3px;
}

/* ---------- Marcador ---------- */

.vprevia__marcador {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

/* El escudo encima y el nombre debajo: la fuente del tema es ancha y en una fila no caben los nombres largos */
.vprevia__equipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.vprevia__equipo-nombre {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vprevia__marcador--final .vprevia__equipo:not(.vprevia__equipo--gana) .vprevia__equipo-nombre {
    opacity: .7;
}

.vprevia__centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.vprevia__resultado {
    display: flex;
    align-items: baseline;
    gap: .25em;
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.vprevia__resultado i {
    font-style: normal;
    opacity: .45;
}

.vprevia__resultado .vprevia__pierde {
    opacity: .55;
}

.vprevia__resultado--vs {
    font-size: 1rem;
    letter-spacing: .1em;
    opacity: .7;
}

.vprevia__estado {
    color: var(--vp-suave);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vprevia__estado--directo {
    color: var(--vp-directo);
}

.vprevia__revelar {
    display: none;
    padding: .45em .9em;
    border: 1px solid rgba(255, 255, 255, .3) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
    font-size: .7rem;
    font-weight: 700;
    cursor: pointer;
}

/* Sin spoilers: el resultado, la línea y los anotadores tapados hasta «Ver resultado» */
.vprevia--tapado .vprevia__resultado {
    display: none;
}

.vprevia--tapado .vprevia__revelar {
    display: inline-block;
}

.vprevia--tapado .vprevia__tapable {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

.vprevia--tapado .vprevia__marcador--final .vprevia__equipo-nombre {
    opacity: 1;
}

/* Escudo: la imagen o, si no hay o no carga, las iniciales en su color */
.vprevia-escudo {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
}

.vprevia-escudo img {
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.vprevia-escudo b {
    display: none;
    color: var(--t, #fff);
    font-size: .7rem;
    font-weight: 800;
}

.vprevia-escudo--sin {
    background: var(--c, #444);
}

.vprevia-escudo--sin b {
    display: block;
}

/* ---------- Línea del partido ---------- */

.vprevia__linea-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.vprevia__leyenda {
    display: flex;
    gap: 10px;
}

.vprevia__punto {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    color: var(--vp-suave);
    font-size: .68rem;
    font-style: normal;
    font-weight: 700;
}

.vprevia__punto::before {
    content: "";
    width: .6em;
    height: .6em;
    border-radius: 2px;
}

.vprevia__punto--l::before {
    background: var(--n-l, #fff);
}

.vprevia__punto--v::before {
    background: var(--n-v, #aaa);
}

.vprevia__pista {
    position: relative;
    height: 38px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
}

/* Eje: arriba los tantos del local, abajo los del visitante */
.vprevia__pista::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, .22);
}

.vprevia__parte {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 0;
    border-left: 1px dashed rgba(255, 255, 255, .3);
}

.vprevia__tanto {
    position: absolute;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    opacity: .85;
}

.vprevia__tanto--principal {
    width: 4px;
    height: 13px;
    margin-left: -2px;
    border-radius: 2px;
    opacity: 1;
}

.vprevia__tanto--l {
    bottom: calc(50% + 3px);
    background: var(--n-l, #fff);
}

.vprevia__tanto--v {
    top: calc(50% + 3px);
    background: var(--n-v, #aaa);
}

.vprevia__tanto:hover {
    transform: scale(1.5);
}

.vprevia__minutos {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    color: var(--vp-suave);
    font-size: .65rem;
}

/* ---------- Anotadores y previa ---------- */

.vprevia__columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vprevia__anotadores {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0 0 0 9px;
    list-style: none;
    font-size: .8rem;
}

.vprevia__anotadores--l {
    border-left: 3px solid var(--n-l, #fff);
}

.vprevia__anotadores--v {
    border-left: 3px solid var(--n-v, #aaa);
}

.vprevia__anotadores b {
    color: var(--vp-suave);
    font-weight: 700;
}

.vprevia__vacio {
    color: var(--vp-suave);
}

/* Una tabla para las dos filas: las columnas miden lo que sus siglas y puestos, iguales en las dos */
.vprevia__previa-tabla {
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    align-items: center;
    gap: 6px 12px;
    font-size: .78rem;
}

.vprevia__previa-fila {
    display: contents;
}

.vprevia__sigla {
    padding-left: 7px;
    font-weight: 800;
    white-space: nowrap;
}

.vprevia__sigla--l {
    border-left: 3px solid var(--n-l, #fff);
}

.vprevia__sigla--v {
    border-left: 3px solid var(--n-v, #aaa);
}

.vprevia__puesto {
    color: var(--vp-suave);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.vprevia__racha {
    display: flex;
    gap: 4px;
}

.vprevia__r {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: #fff;
    font-size: .6rem;
    font-style: normal;
    font-weight: 800;
    cursor: default;
}

.vprevia__r--G {
    background: var(--vp-gana);
}

.vprevia__r--E {
    background: var(--vp-empata);
}

.vprevia__r--P {
    background: var(--vp-pierde);
}

.vprevia__h2h {
    margin-top: 6px;
    flex-wrap: wrap;
}

.vprevia__h2h-tanteo {
    color: var(--vp-texto);
    font-weight: 700;
}

/* ---------- Pie ---------- */

.vprevia__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding-top: 10px;
    border-top: 1px solid var(--vp-tenue);
    color: var(--vp-suave);
    font-size: .75rem;
}

.vprevia__pie > span {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}

.vprevia__visto {
    color: var(--vp-acento);
    font-weight: 700;
}

.vprevia__arbitro img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

/* ---------- Pantallas táctiles: el botón «i» de la tarjeta y la ficha como hoja ---------- */

.vprevia-info {
    position: absolute;
    top: calc(var(--vprevia-info-top, 0px) + 8px);
    right: 8px;
    z-index: 6;
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .75rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.vprevia-info:focus-visible {
    outline: 2px solid var(--color-secondary, #3df59e);
    outline-offset: 2px;
}

/* bloque_video_standart.php: la imagen empieza bajo el margen de .mt-2 */
.product[data-vprevia] {
    --vprevia-info-top: .5rem;
}

@media (hover: none), (pointer: coarse) {
    .vprevia-info {
        display: inline-flex;
    }
}

.vprevia.vprevia--hoja {
    position: fixed;
    top: auto !important;
    right: 0;
    bottom: 0;
    left: 0 !important;
    width: 100% !important;
    max-width: 560px;
    max-height: 88vh;
    margin: 0 auto;
    border-radius: var(--vp-radio) var(--vp-radio) 0 0;
    transform: translateY(100%);
}

.vprevia.vprevia--hoja.vprevia--visible {
    transform: none;
}

.vprevia--hoja .vprevia__cerrar {
    right: 8px;
    display: inline-flex;
}

.vprevia--hoja.vprevia--con-video .vprevia__sonido {
    right: 50px;
}

.vprevia-fondo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1059;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

.vprevia-fondo--visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s;
}

@keyframes vprevia-latido {
    50% {
        opacity: .35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vprevia,
    .vprevia--visible,
    .vprevia.vprevia--hoja {
        transform: none;
        transition: opacity .15s ease, visibility 0s;
    }

    .vprevia__chip--directo::before,
    .vprevia__esqueleto i {
        animation: none;
    }

    .vprevia__cuerpo > * {
        transform: none;
    }
}