/**
 * Pantalla de acceso — Midacta.
 *
 * Comparte los tokens del panel v3 (azul marino, celeste, radios, sombras) pero los redeclara
 * acá: esta pantalla se muestra SIN sesión, y la hoja del panel no siempre está en juego.
 *
 * BLINDAJE CONTRA EL CSS GLOBAL DE BOTONES
 * ----------------------------------------
 * El Customizer del sitio pinta todo <button> de la página, hover incluido, y su bloque se
 * imprime DESPUÉS de esta hoja (ver changelog, 2026-08-18 16:10). Los botones de acá declaran
 * fondo, color y márgenes con un selector de tipo extra para ganar por especificidad y no por
 * orden de carga.
 */

.midacta-acc {
	--acc-azul: #002d74;
	--acc-azul-d: #001e55;
	--acc-celeste: #00b2e3;
	--acc-linea: #e2e8f0;
	--acc-texto: #5a6a7e;
	--acc-suave: #8b98ab;
	--acc-rojo: #e84855;
	--acc-rojo-bg: #feebed;
	--acc-verde: #1fb573;
	--acc-verde-bg: #e6f7ef;
	--acc-gris-bg: #f4f6f9;

	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 20px 64px;
	/* Transparente a propósito: la tarjeta se recorta contra el fondo que traiga la página.
	   Se sostiene sola por su borde y su sombra, no por el gris que había detrás. */
	background: transparent;
	color: var(--acc-azul);
	font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.5;
}

.midacta-acc__caja {
	width: 100%;
	max-width: 420px;
	padding: 32px 30px 28px;
	background: #fff;
	border: 1px solid var(--acc-linea);
	border-radius: 20px;
	box-shadow: 0 4px 16px rgba(0, 45, 116, 0.08), 0 2px 4px rgba(0, 45, 116, 0.05);
}

.midacta-acc__panel[hidden] {
	display: none;
}

.midacta-acc__t {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--acc-azul);
}

.midacta-acc__sub {
	margin: 0 0 22px;
	font-size: 14px;
	color: var(--acc-texto);
}

/* ——— Avisos ——————————————————————————————————————————————————————————— */
.midacta-acc-aviso {
	margin: 0 0 20px;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 500;
}

.midacta-acc-aviso:focus {
	outline: 2px solid var(--acc-celeste);
	outline-offset: 2px;
}

.midacta-acc-aviso--error {
	background: var(--acc-rojo-bg);
	color: #a3202b;
}

.midacta-acc-aviso--ok {
	background: var(--acc-verde-bg);
	color: #0f7a4c;
}

/*
 * La salida del aviso, en el mismo párrafo que el mensaje.
 *
 * El enlace para recuperar la contraseña ya existía, pero abajo del formulario: medido el
 * 2026-10-20 con la contraseña rebotada, el mensaje quedaba en y=471 y el enlace en y=946 con
 * una ventana de 900 px. Quien veía el error no veía la salida. Hereda el color del aviso para
 * que contraste igual que el texto, y va subrayado para que se lea como enlace.
 */
/*
 * La especificidad tiene que superar a `.midacta-acc a` (0,1,1), que pinta todos los enlaces del
 * acceso de celeste. Ese celeste sobre el fondo del aviso da 2.17:1 de contraste —insuficiente,
 * hace falta 4.5:1—, mientras que el color heredado del aviso da 6.58:1. De ahí el selector
 * doble en lugar de un `!important`.
 */
.midacta-acc-aviso .midacta-acc-aviso__salida {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.midacta-acc-aviso .midacta-acc-aviso__salida:hover,
.midacta-acc-aviso .midacta-acc-aviso__salida:focus {
	text-decoration: none;
}

/* ——— Google y separador ——————————————————————————————————————————————— */
.midacta-acc-social {
	margin-bottom: 4px;
}

/* «Ingresá con tu mail habitual», arriba del botón de Google (sólo en la pantalla de entrar). */
.midacta-acc-social__t {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--acc-texto);
}

.midacta-acc-o {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
	font-size: 12px;
	color: var(--acc-suave);
}

.midacta-acc-o::before,
.midacta-acc-o::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--acc-linea);
}

/* ——— Campos ——————————————————————————————————————————————————————————— */
.midacta-acc-campo {
	margin: 0 0 16px;
}

.midacta-acc-campo label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--acc-azul);
}

.midacta-acc input[type="text"],
.midacta-acc input[type="email"],
.midacta-acc input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 13px 14px;
	border: 1px solid var(--acc-linea);
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	color: var(--acc-azul);
	/* 16px es el mínimo que evita que iOS haga zoom al enfocar el campo. */
	font-size: 16px;
	line-height: 1.35;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.midacta-acc input::placeholder {
	color: var(--acc-suave);
}

.midacta-acc input:focus {
	outline: none;
	border-color: var(--acc-celeste);
	box-shadow: 0 0 0 3px rgba(0, 178, 227, 0.16);
}

.midacta-acc input[aria-invalid="true"] {
	border-color: var(--acc-rojo);
}

.midacta-acc-ayuda {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--acc-texto);
}

/* ——— Contraseña con ojo ——————————————————————————————————————————————— */
.midacta-acc-clave {
	position: relative;
	display: block;
}

.midacta-acc-clave input {
	padding-right: 48px;
}

.midacta-acc button.midacta-acc-ojo {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--acc-suave);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.midacta-acc button.midacta-acc-ojo:hover,
.midacta-acc button.midacta-acc-ojo:focus {
	background: var(--acc-gris-bg);
	color: var(--acc-azul);
}

.midacta-acc button.midacta-acc-ojo[aria-pressed="true"] {
	color: var(--acc-celeste);
}

/* ——— Botón principal ——————————————————————————————————————————————————— */
.midacta-acc button.midacta-acc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* 48px de alto mínimo: el objetivo táctil que recomienda tanto Apple como Google. */
	min-height: 50px;
	margin: 4px 0 0;
	padding: 14px 20px;
	border: 0;
	border-radius: 14px;
	background: var(--acc-azul);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 160ms ease;
}

.midacta-acc button.midacta-acc-btn:hover,
.midacta-acc button.midacta-acc-btn:focus {
	background: var(--acc-azul-d);
	color: #fff;
}

.midacta-acc button.midacta-acc-btn[disabled] {
	opacity: 0.65;
	cursor: default;
}

/* ——— Enlaces secundarios ——————————————————————————————————————————————— */
.midacta-acc-olvido {
	margin: -6px 0 18px;
	text-align: right;
}

.midacta-acc-pie {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--acc-linea);
	font-size: 13.5px;
	color: var(--acc-texto);
	text-align: center;
}

.midacta-acc a {
	color: var(--acc-celeste);
	font-weight: 600;
	text-decoration: none;
}

.midacta-acc a:hover,
.midacta-acc a:focus {
	color: var(--acc-azul);
	text-decoration: underline;
}

.midacta-acc-olvido a {
	font-size: 13px;
	font-weight: 500;
}

/* ——— Trampa para robots ————————————————————————————————————————————————
   Fuera de la pantalla, no `display:none`: hay bots que ignoran los campos ocultos y así el
   señuelo sigue siendo visible para ellos. Con tabindex -1 y aria-hidden, ninguna persona
   —ni con teclado ni con lector de pantalla— llega a él. */
.midacta-acc-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ——— Aviso de verificación dentro del panel ————————————————————————————— */
.midacta-acc-verificar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	padding: 11px 20px;
	background: #fff8e6;
	border-bottom: 1px solid #f2e2b8;
	color: #7a5b12;
	font-size: 13px;
}

.midacta-acc-verificar svg {
	flex-shrink: 0;
}

.midacta-acc-verificar__link {
	margin-left: auto;
	color: #7a5b12;
	font-weight: 700;
	text-decoration: underline;
}

.midacta-acc-verificar__link:hover {
	color: #4d390a;
}

/* Los avisos de la URL, cuando aparecen dentro del panel (ya con sesión). */
.midacta-ud .midacta-acc-aviso {
	margin: 0;
	padding: 11px 20px;
	border-radius: 0;
}

/* ——— Pantallas chicas ——————————————————————————————————————————————————— */
@media (max-width: 480px) {
	.midacta-acc {
		padding: 20px 14px 40px;
	}

	.midacta-acc__caja {
		padding: 26px 20px 22px;
		border-radius: 16px;
	}

	.midacta-acc__t {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.midacta-acc input,
	.midacta-acc button.midacta-acc-btn {
		transition: none;
	}
}