/**
 * ALERTA
 */
 :root {
	--udd-alert--height: 52px;
}
body:has(.udd-alert__wrap--show){
	padding-top: var( --udd-alert--height );
}
@media (min-width: 1200px) {
	body:has(.udd-alert__wrap--show) {
		padding-top: 0;
	}
}
.udd-alert__wrap {
	top: 0;
	width: 100%;
	min-height: var( --udd-alert--height );
	z-index: 2;
	position: fixed;
	transition: transform .2s ease-in-out;
	background-color: #00ebff;
	display: none;
}
.admin-bar .udd-alert__wrap {
	top: 46px;
	position: absolute;
}
@media (min-width: 783px) {
	.admin-bar .udd-alert__wrap {
		top: 32px;
	}
}
.udd-alert__wrap.udd-alert__wrap--show {
	display: flex;
	align-items: center;
}
.udd-alert__wrap.sps--blw {
	z-index: 9999;
}
.udd-alert__container {
	width: var( --wp--style--global--content-size );
	margin-inline: auto !important;
	position: relative;
	height: auto !important;
	min-height: 0 !important;
}
.udd-alert {
	color: black;
	transition: all ease-out .15s;
	text-decoration: none;
	width: 100%;
	padding: 0;
	font-size: var( --wp--preset--font-size--small );
	display: grid;
	gap: 0 var( --wp--preset--font-size--x-small );
	grid-template-areas: "icon title close""icon description close";
	grid-template-columns: 40px 1fr 40px;
}
.udd-alert:hover {
	color: black;
	text-decoration: none;
	background-color: hsl(185, 100%, 50%);
}
.udd-alert:hover span {
	text-decoration-color: currentColor;
}
.udd-alert__wrap--show .udd-alert {
	align-items: center;
	align-content: center;
	min-height: var( --udd-alert--height );
}
.udd-alert__description {
	flex-grow: 1;
	display: none;
}
.udd-alert__icon {
	grid-area: icon;
	height: auto;
	aspect-ratio: 1 / 1;
	text-align: center;
	display: flex;
}
.udd-alert__icon svg {
	fill: var( --wp--preset--color--white );
	animation: ring 3.5s 21.5s ease-in-out infinite;
	transform-origin: 50% 4px;
	object-fit: contain;
	display: block;
	margin-inline: auto;
	width: 16px;
	height: auto;
}
@media (prefers-reduced-motion: reduce) {
	.udd-alert__icon svg {
		animation: none;
	}
}
.udd-alert__icon svg path {
	fill: var( --wp--preset--color--black );
}
.udd-alert__title,
.udd-alert__description {
	display: block;
	text-align: left;
	width: 100%;
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: all .15s linear;
}
.udd-alert__title {
	flex-grow: 1;
	font-weight: 500;
	grid-area: title
}
.udd-alert__description {
	grid-area: description;
}
.udd-alert__close {
	align-self: center;
	border: none;
	background: none;
	cursor: pointer;
	grid-area: close;
}
.udd-alert__close svg {
	width: 1.5rem;
	transition: all .15s linear;
	opacity: 0.5;
	position: relative;
	top: 1px;
}
.udd-alert__close:hover svg {
	opacity: 1;
}
/* modifican el header si está activo */
.udd-alert__enabled .site-header {
	top: var( --udd-alert--height );
}
@media ( min-width: 600px ) {
	.admin-bar .udd-alert__wrap.sps--blw {
		top: 46px;
	}
}
@media ( min-width: 783px ) {
	.admin-bar .udd-alert__wrap.sps--blw {
		top: 32px;
	}
}
@media (min-width: 768px) {
	.udd-alert__wrap--show .udd-alert {
		max-height: none;
	}
}
@media ( min-width: 1200px ) {
	.udd-alert__enabled .site-header {
		top: 0;
	}
	.udd-alert__wrap {
		background: transparent;
		position: absolute;
	}
	.udd-alert.sps--abv {
		right: 0;
		padding: 0;
		position: absolute;
		min-height: 80px;
		border-radius: 80px;
		justify-items: center;
		background-color: hsla(185, 100%, 50%, 0.85);
		grid-template-rows: 50% 50%;
		grid-template-columns: 1fr auto 3rem;
	}
	.udd-alert__wrap--show .udd-alert {
		top: max( 200px, 20% );
		width: auto;
		display: grid;
		padding: 0;
	}
	.udd-alert .udd-alert__icon {
		margin: .5rem .5rem .5rem .75rem;
		padding: .875rem;
		grid-row: 1/3;
		background: #fff;
		grid-column: 1/2;
		border-radius: 50%;
		height: calc( 100% - .875rem );
		width: auto;
		aspect-ratio: 1 / 1;
		box-sizing: border-box;
	}
	.udd-alert__icon svg {
		width: 32px;
		height: 37px;
	}
	.udd-alert__icon svg path {
		fill: var( --wp--preset--color--brand-secondary);
	}
	.udd-alert__title {
		flex-grow: 0;
		font-size: var( --wp--preset--font-size--normal );
		grid-row: 1/2;
		align-self: flex-end;
		grid-column: 2/3;
		font-weight: 500;
	}
	.udd-alert__description {
		grid-row: 2/3;
		align-self: flex-start;
		grid-column: 2/3;
		font-size: var( --wp--preset--font-size--small );
	}
	.udd-alert__close {
		padding: 0;
		width: 2.5rem;
		grid-row: 1/3;
		place-self: center;
		grid-column: 3/4;
		padding-right: .75rem;
	}
	.udd-alert__close svg {
		width: unset;
		top: unset;
	}
}
@keyframes ring {
	0% { transform: rotate(0); }
	1% { transform: rotate(22deg); }
	3% { transform: rotate(-26deg); }
	5% { transform: rotate(28deg); }
	7% { transform: rotate(-26deg); }
	9% { transform: rotate(22deg); }
	11% { transform: rotate(-24deg); }
	13% { transform: rotate(22deg); }
	15% { transform: rotate(-18deg); }
	17% { transform: rotate(18deg); }
	19% { transform: rotate(-22deg); }
	21% { transform: rotate(14deg); }
	23% { transform: rotate(-11deg); }
	25% { transform: rotate(10deg); }
	27% { transform: rotate(-8deg); }
	29% { transform: rotate(6deg); }
	31% { transform: rotate(-4deg); }
	33% { transform: rotate(3deg); }
	35% { transform: rotate(-3deg); }
	37% { transform: rotate(2deg); }
	39% { transform: rotate(-1deg); }
	41% { transform: rotate(1deg); }
	43% { transform: rotate(0); }
	100% { transform: rotate(0); }
}