/* ============================================================
   NEXA - base comun de las paginas sueltas
   ------------------------------------------------------------
   "Sueltas" son las que no usan template.xhtml y por tanto no
   heredan el layout: login, recuperarPassword, 404, viewExpired
   y las de acceso externo.

   Este archivo existe por una razon concreta: la fuente Lexend
   estaba declarada con @font-face DENTRO de 14 .xhtml distintos,
   cada uno con su propia ruta relativa. Aqui se declara una vez.

   Los colores salen de los tokens de nexa-skin.css. Si una regla
   necesita un color que no esta ahi, el color no se inventa aqui:
   se agrega el token alla.
   ============================================================ */


/* --- La fuente ----------------------------------------------
   El @font-face estaba aqui y se fue a nexa-tokens.css, que es
   el unico archivo que cargan las 74 pantallas. Aqui alcanzaba
   solo a las sueltas: las 57 con plantilla pedian Lexend y no la
   descargaba nadie.
   ------------------------------------------------------------ */


/* --- Armazon de pagina suelta -------------------------------
   Cabecera arriba, contenido que crece, pie abajo. El reset va
   acotado a .nexa-pagina y no a "*" global: asi no pisa a los
   componentes de PrimeFaces fuera de estas pantallas.
   ------------------------------------------------------------ */
/* El margen del body va aqui y no en el reset de abajo: ese esta
   acotado a .nexa-pagina, y el body queda FUERA. Sin esto la pagina
   entera se dibuja 8px hacia dentro -los del margen que trae el
   navegador- y le sale una barra de desplazamiento aunque quepa,
   porque el min-height:100vh de .nexa-pagina se suma a los 8. */
html, body {
	height: 100%;
	margin: 0;
}

.nexa-pagina,
.nexa-pagina * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* La fuente se pone AQUI y se hereda, no en el reset de arriba.
   Puesta en ".nexa-pagina *" empataba en especificidad con ".fa"
   de Font Awesome y le ganaba por ir despues en la cascada: los
   iconos de los botones se quedaban en Lexend y salia el cuadrito
   del caracter que falta. Heredada no compite con nada.

   Los controles de formulario no heredan la fuente por defecto,
   asi que se les dice que si. */
.nexa-pagina {
	font-family: var(--nexa-fuente, 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, sans-serif);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.nexa-pagina input,
.nexa-pagina select,
.nexa-pagina textarea,
.nexa-pagina button {
	font-family: inherit;
}

.nexa-pagina__cabecera,
.nexa-pagina__pie {
	color: var(--nexa-texto-medio, #33415c);
	background-color: var(--nexa-fondo, #f3f5f9);
	padding: 20px;
	text-align: left;
	box-shadow: var(--nexa-sombra-2, 0 1px 2px rgba(16, 24, 40, .10));
}

/* El titulo conserva su tamano de siempre. Solo se reduce en pantallas
   estrechas, donde el nombre largo de la entidad se comia la pantalla:
   antes se le puso un clamp tambien en escritorio y se veia mas pequeno
   que el original. */
.nexa-pagina__cabecera h1 {
	line-height: 1.25;
}

.nexa-pagina__cabecera h4,
.nexa-pagina__pie h4 {
	margin-top: 5px;
	font-weight: var(--nexa-peso-normal, 400);
}

@media (max-width: 575px) {
	.nexa-pagina__cabecera h1 {
		font-size: 1.4rem;
	}
}

.nexa-pagina__cabecera .ui-separator {
	margin-top: 5px;
}

.nexa-pagina__centro {
	flex-grow: 1;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (max-width: 575px) {
	.nexa-pagina__cabecera,
	.nexa-pagina__pie,
	.nexa-pagina__centro {
		padding: 14px;
	}
}


/* --- La tarjeta del formulario ------------------------------
   Las tres pantallas sueltas con formulario -acceso, recuperar
   contrasena y verificar- tenian la misma tarjeta escrita tres
   veces, y ya habian divergido: 1px contra 2px de borde, 14px
   contra 10px de radio y tres sombras distintas.

   Se define una vez. La escalera de anchos es la del acceso,
   que es la mas pensada: por debajo de 575px un 80% deja
   margenes tan anchos que el campo se queda sin sitio.
   ------------------------------------------------------------ */
.nexa-pagina__formulario {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid var(--nexa-borde, #e9edf3);
	border-radius: var(--nexa-radio, 14px);
	box-shadow: var(--nexa-sombra-3, 0 2px 5px rgba(16, 24, 40, .14));
	background-color: var(--nexa-superficie, #ffffff);
	width: 40%;
}

@media screen and (max-width: 1199px) {
	.nexa-pagina__formulario { width: 60%; }
}

@media screen and (max-width: 767px) {
	.nexa-pagina__formulario { width: 70%; }
}

@media screen and (max-width: 575px) {
	.nexa-pagina__formulario { width: 90%; }
}