/*
 * Lamari Diarios 1.39.51
 * Reparación táctil y de contraste del visor de Vídeos cortos.
 */

/* El listado normal debe poder desplazarse con el dedo en móvil y tablet. */
body.kd-shorts-page:not(.kd-short-modal-open),
body.kd-standalone-shorts-template:not(.kd-short-modal-open){
	overflow-x:hidden!important;
	overflow-y:auto!important;
	touch-action:pan-y!important;
	overscroll-behavior-y:auto!important;
	-webkit-overflow-scrolling:touch!important;
}

.kd-shorts-template-main,
.kd-shorts-app,
.kd-short-directory-panel,
.kd-shorts-grid{
	touch-action:pan-y!important;
}

.kd-short-filters{
	touch-action:pan-x!important;
	-webkit-overflow-scrolling:touch!important;
}

/* El visor ocupa el alto real disponible y captura el gesto vertical. */
.kd-short-viewer{
	height:100vh!important;
	height:100dvh!important;
	min-height:100svh!important;
	overflow:hidden!important;
	overscroll-behavior:none!important;
	-webkit-overflow-scrolling:touch!important;
}

.kd-short-viewer-shell,
.kd-short-viewer-stage,
.kd-short-viewer-card,
.kd-short-viewer-media-wrap{
	overscroll-behavior:none!important;
}

.kd-short-viewer-stage,
.kd-short-viewer-card,
.kd-short-viewer-media-wrap,
.kd-short-viewer-media{
	touch-action:none!important;
}

.kd-short-viewer-nav,
.kd-short-viewer-control,
.kd-short-viewer-stat,
.kd-short-viewer-action,
.kd-short-viewer-follow,
.kd-short-viewer-author{
	touch-action:manipulation!important;
}

/* Degradado más sólido: el texto deja de depender de los colores del vídeo. */
.kd-short-viewer-gradient{
	background:
		linear-gradient(180deg,
			rgba(0,0,0,.48) 0%,
			rgba(0,0,0,.08) 22%,
			rgba(0,0,0,.04) 45%,
			rgba(0,0,0,.48) 67%,
			rgba(0,0,0,.90) 84%,
			rgba(0,0,0,.98) 100%)!important;
}

/* Contraste independiente del modo claro/oscuro y de las reglas del tema. */
.kd-short-viewer-overlay,
.kd-short-viewer-overlay h2,
.kd-short-viewer-overlay p,
.kd-short-viewer-author,
.kd-short-viewer-author strong,
.kd-short-viewer-author span,
.kd-short-viewer-follow,
.kd-short-viewer-actions,
.kd-short-viewer-stat,
.kd-short-viewer-action,
.kd-short-viewer-stat span,
.kd-short-viewer-stat strong,
.kd-short-viewer-stat small,
.kd-short-viewer-action span,
.kd-short-viewer-action small{
	color:#fff!important;
}

.kd-short-viewer-overlay{
	text-shadow:0 2px 5px rgba(0,0,0,.96),0 8px 22px rgba(0,0,0,.58)!important;
}

.kd-short-viewer-author strong{
	font-size:15px!important;
	font-weight:900!important;
	line-height:1.15!important;
	letter-spacing:-.01em!important;
}

.kd-short-viewer-author span{
	margin-top:3px!important;
	color:rgba(255,255,255,.92)!important;
	font-size:12px!important;
	font-weight:700!important;
	line-height:1.25!important;
}

.kd-short-viewer-overlay h2{
	margin:0 0 7px!important;
	font-weight:900!important;
	letter-spacing:-.02em!important;
	text-shadow:0 2px 5px rgba(0,0,0,1),0 10px 24px rgba(0,0,0,.65)!important;
}

.kd-short-viewer-caption{
	color:rgba(255,255,255,.98)!important;
	font-weight:650!important;
	text-shadow:0 2px 5px rgba(0,0,0,.98)!important;
}

.kd-short-viewer-source{
	color:rgba(255,255,255,.90)!important;
	font-weight:750!important;
	text-shadow:0 2px 5px rgba(0,0,0,.98)!important;
}

.kd-short-viewer-follow{
	border-color:rgba(255,255,255,.42)!important;
	background:rgba(5,10,6,.58)!important;
	box-shadow:0 8px 22px rgba(0,0,0,.30)!important;
	text-shadow:0 1px 3px rgba(0,0,0,.9)!important;
}

.kd-short-viewer-stat,
.kd-short-viewer-action{
	border:1px solid rgba(255,255,255,.22)!important;
	background:rgba(3,7,4,.68)!important;
	box-shadow:0 10px 26px rgba(0,0,0,.36)!important;
	text-shadow:0 1px 4px rgba(0,0,0,.95)!important;
}

.kd-short-viewer-stat strong{
	font-size:12px!important;
	font-weight:900!important;
	line-height:1!important;
}

.kd-short-viewer-stat small,
.kd-short-viewer-action small{
	margin-top:5px!important;
	color:#fff!important;
	font-size:11px!important;
	font-weight:850!important;
	line-height:1.05!important;
	letter-spacing:.005em!important;
}

.kd-short-viewer-stat span,
.kd-short-viewer-action span{
	font-size:22px!important;
	filter:drop-shadow(0 2px 4px rgba(0,0,0,.65))!important;
}

/* Ajuste real para móviles y tablets, incluidos dispositivos en horizontal. */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
	.kd-short-viewer{
		padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
	}

	.kd-short-viewer-shell,
	.kd-short-viewer-stage,
	.kd-short-viewer-card{
		height:100%!important;
		max-height:100%!important;
	}

	.kd-short-viewer-media-wrap{
		width:auto!important;
		height:min(88dvh,746px)!important;
		max-width:94vw!important;
		max-height:calc(100dvh - 16px)!important;
		aspect-ratio:9/16!important;
		border-radius:22px!important;
	}

	.kd-short-viewer-overlay{
		left:15px!important;
		right:73px!important;
		bottom:max(15px,env(safe-area-inset-bottom))!important;
	}

	.kd-short-viewer-actions{
		right:12px!important;
		bottom:max(15px,env(safe-area-inset-bottom))!important;
		gap:9px!important;
	}

	.kd-short-viewer-overlay h2{
		font-size:21px!important;
		line-height:1.12!important;
	}

	.kd-short-viewer-caption{
		font-size:13px!important;
		line-height:1.42!important;
		-webkit-line-clamp:3!important;
	}

	.kd-short-viewer-source{
		margin-top:8px!important;
		font-size:12px!important;
	}

	.kd-short-viewer-stat,
	.kd-short-viewer-action{
		width:54px!important;
		min-width:54px!important;
		min-height:56px!important;
		padding:7px 5px!important;
		border-radius:17px!important;
	}
}

@media (max-width:480px){
	.kd-short-viewer-media-wrap{
		height:min(90dvh,700px)!important;
		max-width:96vw!important;
	}

	.kd-short-viewer-author img{
		width:38px!important;
		height:38px!important;
	}

	.kd-short-viewer-author strong{
		font-size:14px!important;
	}

	.kd-short-viewer-author span{
		font-size:11px!important;
	}

	.kd-short-viewer-follow{
		min-height:32px!important;
		padding:0 11px!important;
		font-size:11px!important;
	}

	.kd-short-viewer-stat,
	.kd-short-viewer-action{
		width:52px!important;
		min-width:52px!important;
		min-height:54px!important;
	}
}
