/* ============================================================
   NEXA - pantalla de acceso
   ------------------------------------------------------------
   Antes vivia en un <style> dentro de login.xhtml. Se saca aqui
   por lo de siempre: dentro del .xhtml no se puede reutilizar,
   no se cachea y no hay forma de cambiar el aspecto en un sitio.

   Necesita nexa-tokens.css (los valores), nexa-base.css (armazon,
   fuente y la tarjeta del formulario) y nexa-skin.css (la pintura
   de PrimeFaces). Se cargan en ese orden desde login.xhtml.

   Aqui queda SOLO lo que es propio del acceso. La tarjeta -borde,
   radio, sombra y la escalera de anchos- se fue a
   .nexa-pagina__formulario en nexa-base.css, porque es la misma
   que usan recuperarPassword y verificar. El marcado lleva las
   dos clases: la tarjeta y lo de esta pantalla.
   ============================================================ */

.nexa-acceso h2 {
	color: var(--nexa-texto, #1f2a37);
	font-weight: var(--nexa-peso-fuerte, 600);
}

.nexa-acceso label {
	color: var(--nexa-texto-medio, #33415c);
	font-weight: var(--nexa-peso-medio, 500);
}

/* El logo de la entidad: lo dimensiona Personalizar desde la base
   de datos, aqui solo se centra y se le deja aire. */
.nexa-acceso__logo {
	margin: 14px auto;
}

.nexa-acceso__campo {
	margin-top: 10px;
}

.nexa-acceso__boton {
	margin-top: 18px;
}

/* Los inputs de PrimeFaces vienen con ancho propio; dentro del
   formulario tienen que ocupar el ancho completo o se ven sueltos. */
.nexa-acceso .ui-inputfield,
.nexa-acceso .ui-password,
.nexa-acceso .ui-button {
	width: 100%;
}

.nexa-acceso .ui-password input {
	width: 100%;
}

.nexa-pagina__pie a {
	color: var(--nexa-primario, #1f6feb);
	font-weight: var(--nexa-peso-fuerte, 600);
}