/*
 * Estilos propios de /ingresar/ (pantalla de acceso del panel, fuera de
 * wp-login.php). El cascaron compartido -icono+nombre, titulo, ilustracion,
 * tarjeta, campos con etiqueta flotante, boton- ya lo pone auth-shell.css;
 * aca solo queda lo especifico de esta pagina puntual: fondo, margen
 * superior, mensaje de error y la casilla "Recuerdame".
 *
 * A diferencia de login.css (la piel de wp-login.php), esta hoja no
 * necesita pelear contra ningun estilo de fabrica de WordPress: la pagina
 * completa es marcado propio (templates/public/login.php, en el plugin),
 * asi que las clases de auth-shell.css (.auth-field, .auth-card, .auth-btn)
 * se aplican directo, sin trucos de especificidad.
 */

body.iead-auth-page {
	background: var(--wp--preset--color--base);
	margin: 0;
}

body.iead-auth-page .auth-shell {
	margin-top: clamp(1.5rem, 8vh, var(--wp--preset--spacing--70));
	margin-bottom: var(--wp--preset--spacing--50);
}

.auth-error {
	width: 100%;
	max-width: 440px;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--danger-surface);
	color: var(--wp--preset--color--danger);
	border-left: 3px solid var(--wp--preset--color--danger);
	border-radius: var(--wp--preset--border-radius--small);
	font-size: var(--wp--preset--font-size--small);
}

.auth-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast-alt);
	font-size: var(--wp--preset--font-size--small);
}

.auth-remember input {
	accent-color: var(--wp--preset--color--accent);
	width: 16px;
	height: 16px;
}

/* ============ Ojo para ver la contraseña ============ */

.auth-field--pass input {
	padding-right: 52px;
}

.auth-eye {
	position: absolute;
	top: 50%;
	right: 2px;
	z-index: 2;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--target--min, 44px);
	height: var(--wp--custom--target--min, 44px);
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--small);
	background: transparent;
	color: var(--wp--preset--color--contrast-muted);
	cursor: pointer;
}

.auth-eye:hover {
	color: var(--wp--preset--color--contrast);
}

.auth-eye:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

.auth-eye svg {
	width: 1.25rem;
	height: 1.25rem;
}

.auth-eye svg[hidden] {
	display: none;
}