/*
 * Lamari Diarios 1.39.52
 * Acabado premium y legibilidad reforzada del visor de Vídeos cortos.
 */

/*
 * Se usa una especificidad deliberadamente alta porque el visor también recibe
 * reglas del modo claro, del modo oscuro y del bloqueo de diseño histórico.
 */
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-media-wrap{
	isolation:isolate!important;
	box-shadow:0 28px 74px rgba(8,22,12,.28),0 0 0 1px rgba(255,255,255,.14)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-gradient{
	z-index:2!important;
	background:
		linear-gradient(180deg,rgba(2,8,4,.55) 0%,rgba(2,8,4,.12) 20%,rgba(2,8,4,0) 43%,rgba(2,8,4,.18) 57%,rgba(2,8,4,.78) 76%,rgba(1,5,2,.97) 100%),
		linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 56%,rgba(0,0,0,.12) 100%)!important;
}

/* Barra superior limpia y consistente. */
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-topbar{
	top:14px!important;
	left:14px!important;
	right:14px!important;
	gap:7px!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-nav,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-control{
	width:38px!important;
	height:38px!important;
	border:1px solid rgba(255,255,255,.16)!important;
	background:rgba(3,10,5,.32)!important;
	box-shadow:0 8px 22px rgba(0,0,0,.16)!important;
	-webkit-backdrop-filter:blur(12px)!important;
	backdrop-filter:blur(12px)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-nav:hover,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-control:hover,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-nav:focus-visible,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-control:focus-visible{
	background:rgba(255,255,255,.18)!important;
	border-color:rgba(255,255,255,.38)!important;
	outline:2px solid rgba(255,255,255,.72)!important;
	outline-offset:2px!important;
}

/* Bloque de información: limpio, jerárquico y siempre legible. */
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-overlay{
	left:17px!important;
	right:82px!important;
	bottom:18px!important;
	z-index:5!important;
	color:#fff!important;
	text-align:left!important;
	text-shadow:0 2px 5px rgba(0,0,0,.92),0 10px 28px rgba(0,0,0,.48)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author-row{
	display:grid!important;
	grid-template-columns:minmax(0,1fr) auto!important;
	align-items:center!important;
	gap:8px!important;
	margin:0 0 12px!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author{
	display:flex!important;
	align-items:center!important;
	gap:9px!important;
	min-width:0!important;
	width:max-content!important;
	max-width:100%!important;
	padding:5px 9px 5px 5px!important;
	border:1px solid rgba(255,255,255,.16)!important;
	border-radius:999px!important;
	background:rgba(4,12,6,.38)!important;
	box-shadow:0 10px 24px rgba(0,0,0,.17)!important;
	-webkit-backdrop-filter:blur(14px)!important;
	backdrop-filter:blur(14px)!important;
	color:#fff!important;
	text-decoration:none!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author img{
	flex:0 0 auto!important;
	width:39px!important;
	height:39px!important;
	border:1px solid rgba(255,255,255,.34)!important;
	border-radius:50%!important;
	box-shadow:0 4px 12px rgba(0,0,0,.28)!important;
	object-fit:cover!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author div{
	min-width:0!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author strong{
	display:block!important;
	max-width:155px!important;
	overflow:hidden!important;
	color:#fff!important;
	font-size:13.5px!important;
	font-weight:850!important;
	line-height:1.12!important;
	letter-spacing:-.01em!important;
	text-overflow:ellipsis!important;
	white-space:nowrap!important;
	text-shadow:0 2px 5px rgba(0,0,0,.94)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author span{
	display:block!important;
	max-width:155px!important;
	margin-top:3px!important;
	overflow:hidden!important;
	color:rgba(255,255,255,.84)!important;
	font-size:10.5px!important;
	font-weight:650!important;
	line-height:1.15!important;
	text-overflow:ellipsis!important;
	white-space:nowrap!important;
	text-shadow:0 2px 5px rgba(0,0,0,.92)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-follow{
	display:inline-flex!important;
	align-items:center!important;
	justify-content:center!important;
	min-height:34px!important;
	height:34px!important;
	padding:0 12px!important;
	border:1px solid rgba(255,255,255,.72)!important;
	border-radius:999px!important;
	background:rgba(249,255,247,.94)!important;
	box-shadow:0 9px 24px rgba(0,0,0,.22)!important;
	color:#184b27!important;
	font-size:10.5px!important;
	font-weight:850!important;
	line-height:1!important;
	letter-spacing:.005em!important;
	text-decoration:none!important;
	text-shadow:none!important;
	white-space:nowrap!important;
	-webkit-backdrop-filter:blur(12px)!important;
	backdrop-filter:blur(12px)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-follow:hover,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-follow:focus-visible{
	background:#fff!important;
	border-color:#fff!important;
	color:#0f3d1d!important;
	outline:2px solid rgba(255,255,255,.72)!important;
	outline-offset:2px!important;
	transform:translateY(-1px)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-overlay h2{
	display:-webkit-box!important;
	margin:0 0 6px!important;
	overflow:hidden!important;
	-webkit-box-orient:vertical!important;
	-webkit-line-clamp:2!important;
	color:#fff!important;
	font-size:21px!important;
	font-weight:900!important;
	line-height:1.08!important;
	letter-spacing:-.027em!important;
	text-shadow:0 2px 5px rgba(0,0,0,1),0 12px 30px rgba(0,0,0,.56)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-caption{
	display:-webkit-box!important;
	margin:0!important;
	overflow:hidden!important;
	-webkit-box-orient:vertical!important;
	-webkit-line-clamp:3!important;
	color:rgba(255,255,255,.96)!important;
	font-size:12.5px!important;
	font-weight:600!important;
	line-height:1.38!important;
	text-shadow:0 2px 5px rgba(0,0,0,.98)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-source{
	display:inline-flex!important;
	align-items:center!important;
	max-width:100%!important;
	margin:8px 0 0!important;
	padding:4px 8px!important;
	overflow:hidden!important;
	border:1px solid rgba(255,255,255,.14)!important;
	border-radius:999px!important;
	background:rgba(2,8,4,.34)!important;
	color:rgba(255,255,255,.9)!important;
	font-size:10.5px!important;
	font-weight:750!important;
	line-height:1.1!important;
	text-overflow:ellipsis!important;
	text-shadow:0 2px 4px rgba(0,0,0,.96)!important;
	white-space:nowrap!important;
	-webkit-backdrop-filter:blur(9px)!important;
	backdrop-filter:blur(9px)!important;
}

/*
 * Rail de acciones: iconos circulares y textos separados. El botón deja de
 * parecer una tarjeta pesada y gana el ritmo visual de una app premium.
 */
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-actions{
	right:12px!important;
	bottom:18px!important;
	z-index:6!important;
	display:flex!important;
	flex-direction:column!important;
	align-items:center!important;
	gap:13px!important;
	width:58px!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action{
	display:flex!important;
	flex-direction:column!important;
	align-items:center!important;
	justify-content:flex-start!important;
	width:58px!important;
	min-width:58px!important;
	min-height:0!important;
	height:auto!important;
	padding:0!important;
	border:0!important;
	border-radius:0!important;
	background:transparent!important;
	box-shadow:none!important;
	color:#fff!important;
	font:inherit!important;
	line-height:1!important;
	text-align:center!important;
	text-decoration:none!important;
	text-shadow:0 2px 5px rgba(0,0,0,.94)!important;
	-webkit-backdrop-filter:none!important;
	backdrop-filter:none!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat > span,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action > span{
	display:flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:47px!important;
	height:47px!important;
	margin:0!important;
	border:1px solid rgba(255,255,255,.22)!important;
	border-radius:50%!important;
	background:rgba(3,10,5,.5)!important;
	box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10)!important;
	color:#fff!important;
	font-size:23px!important;
	font-weight:500!important;
	line-height:1!important;
	filter:none!important;
	-webkit-backdrop-filter:blur(14px)!important;
	backdrop-filter:blur(14px)!important;
	transition:transform .16s ease,background .16s ease,border-color .16s ease!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action > span svg{
	display:block!important;
	width:21px!important;
	height:21px!important;
	fill:none!important;
	stroke:currentColor!important;
	stroke-width:1.9!important;
	stroke-linecap:round!important;
	stroke-linejoin:round!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat > strong{
	display:block!important;
	margin:5px 0 0!important;
	color:#fff!important;
	font-size:11px!important;
	font-weight:900!important;
	line-height:1!important;
	text-shadow:0 2px 5px rgba(0,0,0,.98)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat > small,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action > small{
	display:block!important;
	max-width:58px!important;
	margin:4px 0 0!important;
	overflow:hidden!important;
	color:rgba(255,255,255,.94)!important;
	font-size:9.5px!important;
	font-weight:750!important;
	line-height:1.05!important;
	letter-spacing:-.005em!important;
	text-align:center!important;
	text-overflow:ellipsis!important;
	text-shadow:0 2px 5px rgba(0,0,0,.98)!important;
	white-space:nowrap!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat:hover > span,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action:hover > span,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat:focus-visible > span,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action:focus-visible > span{
	background:rgba(255,255,255,.18)!important;
	border-color:rgba(255,255,255,.5)!important;
	transform:translateY(-2px)!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat:focus-visible,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action:focus-visible{
	outline:0!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat.is-active > span{
	border-color:rgba(172,255,113,.74)!important;
	background:linear-gradient(145deg,rgba(73,145,45,.94),rgba(26,94,44,.94))!important;
	color:#fff!important;
}

html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat:active > span,
html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action:active > span{
	transform:scale(.94)!important;
}

@media (max-width:1024px), (hover:none) and (pointer:coarse){
	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-overlay{
		left:15px!important;
		right:78px!important;
		bottom:max(16px,env(safe-area-inset-bottom))!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-actions{
		right:10px!important;
		bottom:max(16px,env(safe-area-inset-bottom))!important;
		gap:12px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author strong,
	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author span{
		max-width:132px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-overlay h2{
		font-size:20px!important;
	}
}

@media (max-width:480px){
	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-topbar{
		top:11px!important;
		left:11px!important;
		right:11px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-nav,
	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-control{
		width:36px!important;
		height:36px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-overlay{
		left:13px!important;
		right:72px!important;
		bottom:max(13px,env(safe-area-inset-bottom))!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author-row{
		gap:6px!important;
		margin-bottom:10px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author{
		gap:7px!important;
		padding:4px 7px 4px 4px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author img{
		width:35px!important;
		height:35px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author strong{
		max-width:105px!important;
		font-size:12px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-author span{
		max-width:105px!important;
		font-size:9.5px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-follow{
		height:31px!important;
		min-height:31px!important;
		padding:0 9px!important;
		font-size:9.5px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-overlay h2{
		font-size:18.5px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-caption{
		font-size:11.5px!important;
		-webkit-line-clamp:2!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-actions{
		right:7px!important;
		bottom:max(13px,env(safe-area-inset-bottom))!important;
		gap:10px!important;
		width:55px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat,
	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action{
		width:55px!important;
		min-width:55px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat > span,
	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action > span{
		width:44px!important;
		height:44px!important;
	}

	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-stat > small,
	html:root body[class] .kd-short-viewer[data-kd-short-viewer] .kd-short-viewer-action > small{
		max-width:55px!important;
		font-size:9px!important;
	}
}