/*
 * Ajustes propios de WordPress sobre la capa de la demo (assets/demo/css/, que no se edita a mano).
 * Se carga después de todas las hojas de la demo.
 */

/*
 * Barra de administración (sesión iniciada): es fija y mide 32 px (46 px hasta 782 px de ancho).
 * La cabecera pegajosa de la demo se pega a top:0 (móvil) o top:10px (píldora desde 1051 px): se baja lo que mide la barra.
 * Hasta 600 px la barra deja de ser fija (se va con el scroll) y la cabecera vuelve a top:0.
 */
.admin-bar .v21-header {
	top: 32px;
}

@media (min-width: 1051px) {
	.admin-bar .v21-header {
		top: 42px; /* 32 px de la barra + los 10 px de la píldora. */
	}
}

@media (max-width: 782px) {
	.admin-bar .v21-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .v21-header {
		top: 0;
	}
}

/*
 * Selector de idioma de la cabecera (inc/language.php): se ve como los grupos del menú y reutiliza .v21-submenu para
 * el panel. Va alineado a la derecha para no salirse de la pantalla y flota también en móvil, donde los submenús del
 * menú son estáticos.
 */
.v21-language {
	position: relative;
	flex-shrink: 0;
}

.v21-language > summary {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 6px;
	font-size: 13px;
	cursor: pointer;
	list-style: none;
}

.v21-language > summary::-webkit-details-marker {
	display: none;
}

.v21-language > summary > span {
	color: var(--blue);
	font-size: 18px;
}

.v21-header .v21-language > .v21-submenu {
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	min-width: 170px;
	margin: 0;
	padding: 12px 18px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 22px 44px -22px rgba(15, 38, 56, .45);
}

.v21-header .v21-language > .v21-submenu > a {
	text-decoration: none;
}

.v21-header .v21-language > .v21-submenu > a:hover {
	color: var(--blue);
	text-decoration: underline;
}

/*
 * Campo trampa antispam del formulario (destiny-leads): fuera de la vista de las personas; los bots suelen rellenarlo.
 * La demo no lo tiene (su formulario no envía): por eso no hay regla en sus hojas.
 */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Formulario de documentación (page-templates/documentacion.php): el servidor pinta todos los pasos y oculta con
 * «hidden» los que no tocan. Algunas reglas de leadform.css dan display (p. ej. .lf-back), que ganaría al atributo.
 * Con sesión iniciada, su cabecera pegajosa se baja lo que mide la barra de administración, como .v21-header.
 */
.lf [hidden] {
	display: none !important;
}

.admin-bar .lf-top {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .lf-top {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .lf-top {
		top: 0;
	}
}

/*
 * Cuerpo del artículo (single.php): es el contenido de la entrada tal cual, que puede traer piezas que la demo no
 * tiene (su copia del texto las quitó): vídeos incrustados con ancho fijo (560 px) e imágenes con pie de WordPress
 * ([caption], con el ancho en línea). Se ajustan a la columna para que no desborden en móvil.
 */
.v21-source-body iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.v21-source-body .wp-caption {
	max-width: 100%;
}

.v21-source-body img {
	max-width: 100%;
	height: auto;
}