/*
 * Clara asomada por detrás de la tarjeta de entrar, como en login.clickah.com
 * y en Clickah! Mail. El hueco va justo antes de la tarjeta (que recorta lo
 * que se sale) y ella asoma de hombros para arriba por encima de su borde.
 */
.erp-clara-asoma { position: relative; height: 0; z-index: 0; }
.erp-clara-asoma-ventana {
	position: absolute; right: 40px; bottom: 0; width: 108px; height: 124px; overflow: hidden; pointer-events: none;
}
.erp-clara-asoma-ventana canvas {
	display: block; width: 108px; height: 216px; image-rendering: pixelated;
	transform: translateY(124px);
}
.erp-clara-asoma.is-lista .erp-clara-asoma-ventana canvas { animation: erp-clara-asoma 1s cubic-bezier(.2, .9, .3, 1.3) .4s both; }
.login form { z-index: 1; }   /* la tarjeta, por delante de ella */

/* El saludo de arriba deja sitio a su cabeza. */
body.erp-clara-login .meb-login-saludo { padding-right: 150px; }

.erp-clara-asoma-dice {
	position: absolute; left: calc(100% - 34px); bottom: 78px; z-index: 2;
	width: max-content; max-width: 240px; padding: 9px 13px;
	border-radius: 14px 14px 14px 4px; border: 1px solid rgba(0, 0, 0, .08); background: #fff; color: #1c1719;
	font-family: var(--meb-font, Inter, system-ui, sans-serif); font-size: 13px; font-weight: 600; line-height: 1.35;
	box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55);
	opacity: 0; pointer-events: none;
}
.erp-clara-asoma-dice.is-visible { animation: erp-clara-dice .35s ease both; }
.erp-clara-asoma-dice.is-error { border-color: #f3c9c6; max-width: 280px; }
.erp-clara-asoma-dice.is-error.is-visible { animation: erp-clara-dice .35s ease both, erp-clara-niega .5s ease .35s; }

@keyframes erp-clara-asoma { from { transform: translateY(124px); } to { transform: translateY(0); } }
@keyframes erp-clara-dice { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes erp-clara-niega { 0%, 100% { translate: 0; } 25% { translate: -4px 0; } 75% { translate: 4px 0; } }

/* Pantallas no tan anchas: el bocadillo, encima de ella en vez de al lado. */
@media (max-width: 1100px) {
	.erp-clara-asoma-dice { left: auto; right: 150px; bottom: 112px; border-radius: 14px 14px 4px 14px; max-width: 220px; }
	body.erp-clara-login .meb-login-saludo { padding-right: 0; margin-bottom: 7rem; }
}
@media (max-width: 767px) {
	.erp-clara-asoma { display: none; }
	body.erp-clara-login .meb-login-saludo { padding-right: 0; margin-bottom: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.erp-clara-asoma.is-lista .erp-clara-asoma-ventana canvas { animation: none; transform: none; }
	.erp-clara-asoma-dice.is-visible { animation: none; opacity: 1; }
}