/*
 * Pantalla de ingreso con la identidad de la APE.
 *
 * Sigue al sitio desde el rediseño del 12/10/2026 (docs/04 y app/globals.css):
 * Bricolage Grotesque en títulos, Figtree en texto, crema de fondo, azul noche,
 * bloques de 24 px de radio y botón píldora. Si cambian allá, cambian acá a
 * mano: Keycloak no lee el CSS de la aplicación.
 *
 * Las dos fuentes están DENTRO del tema (resources/fonts, subconjunto latino,
 * variables): la pantalla de ingreso tampoco pide nada a servidores de fuentes.
 */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/bricolage.woff2") format("woff2");
	font-weight: 500 800;
	font-display: swap;
}
@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

:root {
	--ape-fondo: #faf3e8;
	--ape-arena: #efe4d2;
	--ape-superficie: #ffffff;
	--ape-tinta: #2a2621;
	--ape-tinta-suave: #6c6358;
	--ape-borde: #e8dfd1;
	--ape-borde-fuerte: #d6c9b4;
	--ape-azul: #1b4e86;
	--ape-azul-noche: #10375c;
	--ape-rojo: #f9555c;
	--ape-rojo-texto: #b9373d;
	--ape-amarillo: #e4b43c;
	--ape-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
	--ape-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Sin la imagen de fondo de Keycloak ni su franja azul sobre la tarjeta. */
	--keycloak-bg-logo-url: none;
	--keycloak-card-top-color: transparent;

	/* PatternFly toma de acá el primario, los enlaces, el foco y las fuentes. */
	--pf-v5-global--primary-color--100: var(--ape-azul-noche);
	--pf-v5-global--primary-color--200: var(--ape-azul);
	--pf-v5-global--link--Color: var(--ape-azul);
	--pf-v5-global--link--Color--hover: var(--ape-azul-noche);
	--pf-v5-global--Color--100: var(--ape-tinta);
	--pf-v5-global--Color--200: var(--ape-tinta-suave);
	--pf-v5-global--danger-color--100: var(--ape-rojo-texto);
	--pf-v5-global--BorderColor--100: var(--ape-borde-fuerte);
	--pf-v5-global--BorderRadius--sm: 14px;
	--pf-v5-global--FontFamily--text: var(--ape-texto);
	--pf-v5-global--FontFamily--heading: var(--ape-display);
	--pf-v5-global--FontFamily--redhatfont--heading--sans-serif: var(--ape-display);
	--pf-v5-global--FontFamily--redhatfont--text--sans-serif: var(--ape-texto);
}

.login-pf body,
body {
	background: var(--ape-fondo);
	font-family: var(--ape-texto);
	color: var(--ape-tinta);
}

/* ─── Cabecera: el logo, los tres puntos del logo y el nombre ───────────── */

#kc-header-wrapper {
	padding-top: 96px;
	background: url("../img/logo-ape.png") no-repeat center top;
	background-size: 80px auto;
	color: var(--ape-azul-noche) !important;
	font-family: var(--ape-display);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 1.25;
}
#kc-header-wrapper::before {
	/* Los puntos azul, amarillo y rojo del ojo de la portada. */
	content: "";
	display: block;
	width: 38px;
	height: 10px;
	margin: 0 auto 12px;
	background:
		radial-gradient(circle, var(--ape-azul) 4.5px, transparent 5px) 0 0 / 14px 10px no-repeat,
		radial-gradient(circle, var(--ape-amarillo) 4.5px, transparent 5px) 14px 0 / 14px 10px no-repeat,
		radial-gradient(circle, var(--ape-rojo) 4.5px, transparent 5px) 28px 0 / 10px 10px no-repeat;
}

/* ─── La tarjeta ─────────────────────────────────────────────────────────── */

.pf-v5-c-login__main {
	border: 1px solid var(--ape-borde);
	border-radius: 24px;
	box-shadow: none;
	background: var(--ape-superficie);
	overflow: hidden;
}
.pf-v5-c-login__main-header {
	border-top: 0;
	border-radius: 24px 24px 0 0;
	padding-top: 32px;
}
/* PatternFly reserva una segunda columna para el selector de idioma, que acá
   no hay: el título se partía en 312 de 542 px. Ocupa las dos. */
.pf-v5-c-login__main-header > .pf-v5-c-title {
	grid-column: 1 / -1;
}
.pf-v5-c-login__main-header .pf-v5-c-title,
#kc-page-title {
	font-family: var(--ape-display);
	font-size: clamp(28px, 6vw, 36px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ape-azul-noche);
}

/* ─── Campos ─────────────────────────────────────────────────────────────── */

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
	font-family: var(--ape-texto);
	font-size: 14px;
	font-weight: 600;
	color: var(--ape-tinta);
}

/* 52 px de alto, borde entero y radio 14. PatternFly dibuja el borde con un
   ::before y la línea azul de abajo con un ::after: se apagan los dos y el
   borde va en el propio control. */
.pf-v5-c-form-control {
	--pf-v5-c-form-control--BorderRadius: 14px;
	--pf-v5-c-form-control--before--BorderStyle: none;
	--pf-v5-c-form-control--after--BorderStyle: none;
	min-height: 52px;
	border: 1px solid var(--ape-borde-fuerte);
	border-radius: 14px;
	background-color: var(--ape-superficie);
	font-size: 16px; /* 16 o más: iOS no hace zoom al tocar el campo */
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
	border: 0 !important;
}
.pf-v5-c-form-control:focus-within {
	border-color: var(--ape-azul);
	outline: 3px solid rgb(27 78 134 / 0.25);
	outline-offset: 0;
}
/* El foco lo muestra el marco de arriba: el `input` de adentro no dibuja otro. */
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > textarea {
	border-radius: inherit;
	background: transparent;
}
.pf-v5-c-form-control > input:focus-visible,
.pf-v5-c-form-control > textarea:focus-visible {
	outline: none;
}
.pf-v5-c-form-control.pf-m-error {
	border-color: var(--ape-rojo-texto);
}

/* El campo de la contraseña y su botón del ojo van como una sola pieza. */
.pf-v5-c-input-group {
	border-radius: 14px;
}
.pf-v5-c-input-group > .pf-v5-c-input-group__item:first-child .pf-v5-c-form-control {
	border-right: 0;
	border-radius: 14px 0 0 14px;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
	min-height: 52px;
	border: 1px solid var(--ape-borde-fuerte);
	border-left: 0;
	border-radius: 0 14px 14px 0;
	background: var(--ape-superficie);
	color: var(--ape-tinta-suave);
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
	border: 0;
}

/* ─── Botones: píldora de 52 px, azul noche como los del sitio ──────────── */

.pf-v5-c-button {
	--pf-v5-c-button--BorderRadius: 999px;
	border-radius: 999px;
	min-height: 52px;
	padding-inline: 28px;
	font-family: var(--ape-texto);
	font-size: 16px;
	font-weight: 700;
}
.pf-v5-c-button.pf-m-primary {
	background-color: var(--ape-azul-noche);
	color: #ffffff;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
	background-color: var(--ape-azul);
}
.pf-v5-c-button.pf-m-secondary {
	border: 2px solid var(--ape-azul-noche);
	color: var(--ape-azul-noche);
	background: transparent;
}
.pf-v5-c-button.pf-m-secondary::after {
	border: 0;
}

/* ─── Enlaces, avisos y pie ──────────────────────────────────────────────── */

a,
.pf-v5-c-button.pf-m-link {
	color: var(--ape-azul);
	font-weight: 600;
}
a:hover {
	color: var(--ape-azul-noche);
}

/* Los avisos (contraseña incorrecta, correo enviado) con el radio del sitio. */
.pf-v5-c-alert {
	border-radius: 14px;
	font-family: var(--ape-texto);
}

/* «¿Todavía no tenés cuenta?» sobre arena, como la cita de la portada. */
.pf-v5-c-login__main-footer-band {
	margin-bottom: 24px;
	padding: 16px 20px;
	border-top: 0;
	border-radius: 16px;
	background: var(--ape-arena);
	color: var(--ape-tinta);
}
.pf-v5-c-login__main-footer,
.pf-v5-c-login__footer {
	color: var(--ape-tinta-suave);
}

:focus-visible {
	outline: 3px solid var(--ape-azul);
	outline-offset: 3px;
}