/* ============================================================
   NEXA - las cinco pantallas de acceso
   ------------------------------------------------------------
   login, recuperarPassword, verificar, viewExpired y
   accesoDenegado. Las cinco comparten un mismo armazon de dos
   columnas: a la izquierda un panel azul que dice DONDE estas,
   a la derecha lo que hay que hacer.

   Necesita nexa-tokens.css (los valores) y nexa-skin.css (la
   pintura de los componentes .ui-* de PrimeFaces). Se cargan en
   ese orden desde cada pagina.

   Aqui NO se pintan campos ni botones: eso es de nexa-skin.css.
   Aqui solo va la maquetacion y lo que es propio del acceso. Si
   un campo de estas pantallas se ve distinto al del resto de
   NEXA, el arreglo va en el skin, no aqui.

   Por que dos columnas y no la tarjeta centrada de antes: el
   nombre de la entidad no cabia en una linea y empujaba el
   formulario fuera de la pantalla en portatiles de 768px de
   alto. Puesto al lado, el nombre puede ocupar tres lineas sin
   mover nada.
   ============================================================ */


/* --- El armazon --------------------------------------------- */

.nexa-acceso-marco {
	display: flex;
	min-height: 100vh;
	background-color: var(--nexa-superficie, #ffffff);
	font-family: var(--nexa-fuente, 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, sans-serif);
	color: var(--nexa-texto, #1f2a37);
}

/* El reset va acotado al armazon y no a "*" global: fuera de
   estas pantallas manda PrimeFaces. */
.nexa-acceso-marco,
.nexa-acceso-marco * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Los controles no heredan la fuente por defecto. */
.nexa-acceso-marco input,
.nexa-acceso-marco select,
.nexa-acceso-marco textarea,
.nexa-acceso-marco button {
	font-family: inherit;
}


/* --- La columna azul ---------------------------------------- */

/* El 52,125% no es un numero redondo por gusto: la maqueta declara
   "width: 44%" sobre una caja de contenido -sin box-sizing- mas
   52px de relleno a cada lado, y eso medido en el lienzo de
   1280px da 667,2px, o sea el 52,125% clavado. Aqui el reset pone
   todo en border-box, asi que un 44% dejaba el panel 104px mas
   estrecho que la maqueta: era la diferencia que mas se veia de
   las dos pantallas puestas al lado.

   Estuvo en 52% redondo y eso daba 665,6px a 1280: 1,6px menos que
   la maqueta, que empujaba la caja del formulario a x=794,8 en vez
   de x=795,6. Con 52,125% las dos pantallas coinciden al pixel a
   1280 y la proporcion 52/48 se mantiene en cualquier ancho. */
/* El techo NO va en el panel, va en su CONTENIDO.

   La maqueta es un lienzo fijo de 1280px: alli el panel mide 667px
   y el contenido 563px. En una pantalla de 1990 ese mismo
   porcentaje da 1037px, y el filete divisorio se estiraba a 933px
   -un pelo de casi un metro cruzando la pantalla- con los
   renglones igual de largos.

   Probe a ponerle max-width al panel y sale peor: el reparto se va
   a 33/67, el azul deja de ser media pantalla y el formulario se
   queda flotando. La proporcion 52/48 ES la maqueta.

   Asi que el panel sigue al 52% y el techo va en sus hijos: 563px,
   centrados con margenes automaticos. A 1280 el bloque ocupa el
   panel entero menos los 52px de relleno, exactamente como la
   maqueta; de ahi para arriba el contenido se queda quieto y lo
   que crece es el margen azul.

   NO se hace con relleno en porcentaje. Se intento
   "padding-left: max(52px, calc((100% - 563px)/2))" y sale
   catastrofico: el % de un padding se resuelve contra el ANCHO DEL
   CONTENEDOR -el marco de 1990px-, no contra el del panel, asi que
   el relleno se comio la caja entera y el titulo salio a una
   palabra por renglon. */
.nexa-acceso-marco__panel {
	width: 52.125%;
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--nexa-esp-10, 40px) 52px;
	background-color: var(--nexa-azul-900, #102e5b);
}

/* Margenes en longhand y no "margin: 0 auto": el atajo pisaria el
   margin-top que llevan el lema y el filete. */
/* 563,2px y no 563: es el 44% de 1280 exacto, el ancho de contenido
   que mide la maqueta. Redondeado a 563 sobraban 0,2px que el
   centrado repartia a los dos lados y dejaba los cuatro hijos en
   x=52,1 en vez de x=52. */
.nexa-acceso-marco__panel > * {
	width: 100%;
	max-width: 563.2px;
	margin-left: auto;
	margin-right: auto;
}

.nexa-acceso-panel__titulo {
	font-size: 28px;
	font-weight: var(--nexa-peso-titulo, 700);
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--nexa-neutro-0, #ffffff);
}

.nexa-acceso-panel__lema {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--nexa-azul-300, #82aff3);
}

/* La linea no usa --nexa-borde: sobre el azul-900 ese gris no se
   ve. Un blanco al 14% se comporta igual sobre cualquier azul,
   que es lo que hace falta cuando la entidad cambia el tono.

   Los margenes van en longhand y NO como "margin: 30px 0". Ese
   atajo escribe los cuatro lados, y como esta regla va despues de
   ".nexa-acceso-marco__panel > *" y pesa lo mismo -una clase-, le
   ponia margin-left: 0 y anulaba el centrado del bloque de 563px:
   a 1990px el titulo y los puntos salian en x=236 y el filete en
   x=52. Medido, no supuesto. Misma trampa en cualquier atajo que
   se anada aqui abajo. */
.nexa-acceso-panel__linea {
	height: 1px;
	margin-top: 30px;
	margin-bottom: 30px;
	background-color: rgba(255, 255, 255, .14);
}

/* "Verificar" no lleva lista sino un parrafo corrido: su maqueta lo
   escribe asi y con un interlineado distinto -1,55 frente al 1,4 de
   los puntos-, que es lo que hace que el bloque del panel mida lo
   mismo que en el lienzo. */
.nexa-acceso-panel__texto {
	font-size: var(--nexa-txt-base, 14px);
	line-height: 1.55;
	color: var(--nexa-azul-100, #d1e1fa);
}

.nexa-acceso-panel__puntos {
	display: flex;
	flex-direction: column;
	gap: var(--nexa-esp-4, 16px);
	list-style: none;
}

.nexa-acceso-panel__puntos li {
	font-size: var(--nexa-txt-base, 14px);
	line-height: 1.4;
	color: var(--nexa-azul-100, #d1e1fa);
}


/* --- La columna de trabajo ---------------------------------- */

.nexa-acceso-marco__lado {
	flex-grow: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* El relleno de arriba y abajo es CERO, como en la maqueta, y no
   los 40px que habia. A 1280x760 no se nota -sobran 103px por
   lado y el bloque va centrado-, pero no es adorno: un relleno en
   un contenedor flex con align-items:center recorta por los DOS
   extremos cuando el contenido ya no cabe, y aqui no hay barra de
   desplazamiento que rescate lo recortado. Con los 40px la caja
   de 509,7px empezaba a perder el logo por arriba a partir de una
   ventana de 634px de alto; con cero aguanta hasta 554.

   El respiro lateral si se queda: los 48px son los de la maqueta.
   Por debajo de 992px manda el bloque de pantallas estrechas del
   final, que vuelve a poner relleno arriba porque alli la caja ya
   no va centrada sino pegada al principio. */
.nexa-acceso-marco__centro {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--nexa-esp-12, 48px);
}

.nexa-acceso__caja {
	width: 356px;
	max-width: 100%;
}

/* Aqui hubo un ".nexa-acceso__caja--ancha { width: 460px }" para
   que las columnas de la tabla de soportes de "verificar" no se
   apretaran. Se retira: las cuatro maquetas dibujan la caja de
   356px, y con los 460 la columna entera se corria 52px a la
   izquierda -la tarjeta empezaba en x=744 y la maqueta en x=796-.
   Lo que se apretaba era la tabla, y eso se resuelve en la tabla
   -nombre del soporte a dos renglones si hace falta- y no
   ensanchando la pantalla. */


/* --- El logo de la entidad ---------------------------------- */

/* Banda de alto fijo y object-fit: contain. Los logos reales de
   las entidades son bandas anchas -de 4,7:1 a 8,9:1-, algunas
   con letra pequena legal dentro, y una es azul marino. Con alto
   libre, el mas alto empujaba el formulario media pantalla hacia
   abajo. Con la banda, los tres ocupan lo mismo y ninguno se
   deforma.

   El alto y el ancho que fija cada entidad en Personalizar
   siguen llegando en el atributo style del marcado; esto es el
   techo, para que un valor mal puesto no rompa la pantalla. */
.nexa-acceso__logo-banda {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 54px;
	margin-bottom: 26px;
}


.nexa-acceso__logo {
	max-height: 54px;
	max-width: 100%;
	object-fit: contain;
}


/* --- El bloque de texto ------------------------------------- */

.nexa-acceso__titulo {
	font-size: 22px;
	font-weight: var(--nexa-peso-titulo, 700);
	/* "normal" -32px a 22px de letra- y no el 1,45 general, que da
	   31,9. La maqueta no declara interlineado en este titulo, asi
	   que se queda en el del navegador; con 1,45 la caja del
	   formulario medida 508,56 en vez de 508,67 y, al ir centrada,
	   la decima se repartia y "Bienvenido" se dibujaba un pixel mas
	   arriba que en la maqueta. Con "normal" la caja mide 508,67 y
	   el titulo cae en y=183,66: los dos numeros de la maqueta. */
	line-height: normal;
	letter-spacing: -.01em;
	color: var(--nexa-texto, #1f2a37);
}

.nexa-acceso__ayuda {
	margin-top: 5px;
	font-size: var(--nexa-txt-base, 14px);
	line-height: var(--nexa-alto-normal, 1.45);
	color: var(--nexa-texto-suave, #636e83);
}

/* El dato que hay que retener dentro del parrafo -en "tu sesion se
   cerro", los 30 minutos-. Se declara el peso y el color a mano
   porque el "bold" del navegador no cae en el 700 exacto de Source
   Sans 3 variable, y sin subir el color el resalte no se veria
   sobre el gris del parrafo. */
.nexa-acceso__ayuda strong {
	font-weight: var(--nexa-peso-titulo, 700);
	color: var(--nexa-texto-medio, #33415c);
}


/* --- Los campos --------------------------------------------- */

.nexa-acceso__grupo {
	margin-top: 14px;
}

.nexa-acceso__grupo--primero {
	margin-top: var(--nexa-esp-6, 24px);
}

/* Lleva el marco delante por lo mismo que el boton: el tema
   escribe "body .ui-widget { font-size: 1rem }" y p:outputLabel
   sale con class="ui-outputlabel ui-widget", asi que sin el marco
   la etiqueta se quedaba en 16px en vez de 13px. */
.nexa-acceso-marco .nexa-acceso__etiqueta {
	display: block;
	margin-bottom: 6px;
	font-size: var(--nexa-txt-sm, 13px);
	font-weight: var(--nexa-peso-fuerte, 600);
	color: var(--nexa-texto-medio, #33415c);
}

/* Los campos de PrimeFaces traen ancho propio; aqui tienen que
   ocupar la caja entera o se ven sueltos. El .ui-password lleva
   su input dentro, por eso las dos reglas. */
.nexa-acceso-marco .ui-inputfield,
.nexa-acceso-marco .ui-password,
.nexa-acceso-marco .ui-button {
	width: 100%;
}

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

/* --- El tamano del campo y del boton en el acceso -----------
   Esto SI es una excepcion a "aqui no se pintan campos": no es
   pintura, es densidad. El resto de NEXA trabaja en pantallas
   llenas de tablas y usa el control de 40px del tema; estas
   cinco pantallas tienen un solo formulario en medio del blanco
   y la maqueta lo dibuja de 44px, con la esquina de 8px del
   boton y letra de 14px. Puesto en el skin cambiaria el tamano
   de todos los controles de la aplicacion, asi que va acotado
   al marco del acceso.

   Todos los selectores llevan .nexa-acceso-marco delante: las
   reglas que hay que ganar son "body .ui-inputfield" y
   "body .ui-widget" del tema propio, que pesan mas que una
   clase suelta. */
.nexa-acceso-marco .ui-inputfield,
.nexa-acceso-marco .ui-password input {
	height: 44px;
	padding: 0 12px;
	font-size: var(--nexa-txt-base, 14px);
	border-radius: var(--nexa-radio-control, 8px);
}

/* El ojo de toggleMask se dibuja dentro del campo: sin sitio a
   la derecha se monta encima de lo que se escribe. */
.nexa-acceso-marco .ui-password input {
	padding-right: 36px;
}

/* PrimeFaces pega el ojo a 8px del borde del campo; la maqueta lo
   separa 13 -los 12 de relleno del campo mas el pixel del borde-,
   los mismos 13 que separan del otro lado el texto que se escribe.
   Con los 8 del tema el icono quedaba 5px mas afuera que el resto
   del contenido del campo y el campo se leia descentrado.

   Medido a 1280x760: el ojo pasa de x 1127,6..1143,6 a
   1122,6..1138,6 y la maqueta lo dibuja en 1121,6..1138,6. El
   dibujo no va a coincidir nunca al pixel -el tema usa el glifo de
   primeicons y la maqueta un svg de trazo-, pero el hueco si. */
.nexa-acceso-marco .ui-password .ui-password-icon {
	right: 13px;
}

/* La pista de dentro del campo -"Numero de identificacion",
   "Correo electronico registrado"- va DOS escalones mas clara que
   el texto escrito, como en la maqueta. Sin esta regla salia en
   #636e83, el mismo gris del texto de apoyo, y el campo se leia
   como si YA estuviera lleno.

   El "opacity: 1" no sobra: Firefox le baja la opacidad al
   placeholder por su cuenta y volveria a destenirlo.

   El 3,06:1 se acepta porque la etiqueta del campo esta siempre
   visible encima: la pista no es el unico rotulo. */
.nexa-acceso-marco input::placeholder {
	color: var(--nexa-neutro-500, #8a94a6);
	opacity: 1;
}

/* Lleva el marco delante a proposito. El tema propio de PrimeFaces
   escribe "body .ui-button { margin: 0 }", que con una clase y un
   elemento pesa mas que ".nexa-acceso__boton" a secas: sin el marco
   el boton se queda pegado al campo de la contrasena. Medido en
   pantalla, no supuesto. */
.nexa-acceso-marco .nexa-acceso__boton {
	margin-top: 22px;
	height: 44px;
	font-size: 15px;
	font-weight: var(--nexa-peso-fuerte, 600);
	/* La maqueta no le pone sombra a nada: el boton se separa por
	   color, no por relieve. El skin le deja la sombra-2 general. */
	box-shadow: none;
	/* Centrar por flex y no por relleno: el rotulo es un <span>
	   con su propio relleno y con el alto fijo se salia por abajo. */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* El .ui-button-text-only del selector no sobra: la regla que hay
   que ganar es "body .ui-button.ui-button-text-only .ui-button-text",
   que pesa mas que tres clases sueltas. Sin el, el relleno de 8px
   del tema seguia mandando y el rotulo desbordaba el boton.
   Comprobado recorriendo document.styleSheets, no a ojo. */
/* El interlineado se queda en "normal" -21,33px a 15px de letra- que
   es lo que declaran las tres maquetas grandes. Estuvo en 1 junto al
   relleno 0, pero el que impedia que el rotulo desbordara era el
   relleno: el boton centra por flex dentro de 44px y una caja de
   texto de 21,33px sobra de sitio. Medido en pantalla. */
.nexa-acceso-marco .nexa-acceso__boton.ui-button-text-only .ui-button-text {
	padding: 0;
	line-height: normal;
}

/* El boton de salida digna: en "no tienes permiso" no lleva a
   donde querias ir, solo te saca de ahi, asi que no se pinta de
   azul. Contorno, como en la maqueta. */
.nexa-acceso-marco .nexa-acceso__boton--secundario,
.nexa-acceso-marco .nexa-acceso__boton--secundario.ui-state-hover,
.nexa-acceso-marco .nexa-acceso__boton--secundario.ui-state-focus {
	background-color: transparent;
	border: 1px solid var(--nexa-borde-control, #8a94a6);
	color: var(--nexa-texto-medio, #33415c);
}

.nexa-acceso-marco .nexa-acceso__boton--secundario.ui-state-hover,
.nexa-acceso-marco .nexa-acceso__boton--secundario.ui-state-focus {
	background-color: var(--nexa-superficie-hover, #f8fafd);
}


/* --- Enlaces y pie de la caja ------------------------------- */

/* block + fit-content y NO inline-block. Un inline-block se sienta
   en la linea base de una caja de linea anonima, y esa caja anade
   por debajo el hueco del descendente de la letra: 1px. Era la
   unica deriva que se acumulaba dentro del formulario -la caja
   media 509,56 y la maqueta 508,67- y, como el formulario va
   centrado, ese 1px de mas lo bajaba medio pixel entero y dejaba
   todos los textos medio pixel fuera de rejilla.

   fit-content mantiene el area pulsable pegada al texto: con un
   block a secas el enlace ocuparia los 356px del renglon. */
.nexa-acceso__enlace {
	display: block;
	width: fit-content;
	margin-top: var(--nexa-esp-4, 16px);
	font-size: var(--nexa-txt-sm, 13px);
	font-weight: var(--nexa-peso-fuerte, 600);
	color: var(--nexa-enlace, #1559c4);
	text-decoration: none;
}

.nexa-acceso__enlace:hover {
	color: var(--nexa-enlace-hover, #1249a8);
	text-decoration: underline;
}

/* Lo que no es la tarea principal de la pantalla: verificar un
   documento sin cuenta, y a quien escribirle. Separado por una
   linea para que no compita con el boton. */
.nexa-acceso__extras {
	display: flex;
	flex-direction: column;
	gap: var(--nexa-esp-3, 12px);
	margin-top: 28px;
	padding-top: var(--nexa-esp-5, 20px);
	border-top: 1px solid var(--nexa-borde, #e9edf3);
	font-size: var(--nexa-txt-sm, 13px);
	line-height: 1.4;
	color: var(--nexa-texto-suave, #636e83);
}

.nexa-acceso__extras a {
	font-weight: var(--nexa-peso-fuerte, 600);
	color: var(--nexa-enlace, #1559c4);
	text-decoration: none;
}

.nexa-acceso__extras a:hover {
	text-decoration: underline;
}


/* --- El pie ------------------------------------------------- */

.nexa-acceso-marco__pie {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--nexa-esp-4, 16px);
	padding: 13px var(--nexa-esp-6, 24px);
	border-top: 1px solid var(--nexa-borde, #e9edf3);
	font-size: var(--nexa-txt-xs, 12px);
	/* neutro-500 y NO --nexa-texto-suave. Las cuatro maquetas pintan
	   este renglon en #8a94a6; el #636e83 que salia antes no era una
	   decision, era herencia: --nexa-texto-suave se movio de
	   neutro-500 a neutro-600 por accesibilidad y con el se llevo el
	   pie, que la maqueta distingue del texto de apoyo. Con el gris
	   oscuro el pie pesaba mas que el formulario.

	   Si, 3,06:1 sobre blanco -el 3:1 justo, como dice la ficha de
	   tokens-. Se acepta aqui porque este renglon repite el nombre
	   del producto que ya esta escrito en grande en el panel azul:
	   no informa de nada que no este dicho. No copiar este criterio
	   a un texto que si informe. */
	color: var(--nexa-neutro-500, #8a94a6);
}

.nexa-acceso-marco__version {
	margin-left: auto;
	color: var(--nexa-neutro-400, #b9c2d0);
	font-variant-numeric: tabular-nums;
}

/* EL PIE NO SE ENGORDA PARA EL CHAT. Aqui hubo un modificador
   --chat que le anadia 57px de relleno abajo y 111 a la derecha
   para librar el widget de Tawk.to. Con eso el pie pasaba de los
   44px de la maqueta a 88, y esos 44px se los quitaba a la zona
   central: como el formulario va CENTRADO ahi, subia la mitad
   -22,5px- y arrastraba consigo el logo, el titulo, los dos
   campos, el boton y el enlace. Un solo relleno descolocaba la
   pantalla entera.

   El widget tiene dos estados, y con el pie de la maqueta -borde
   superior en y=716 a 1280x760- los dos tapan el sello:

     saludo   324x44  anclado en bottom:0  right:10  -> y 716..760
     burbuja   67x64  anclado en bottom:20 right:20  -> y 676..740

   Apartar solo el sello no basta: el saludo cruza la banda entera
   desde x=946 y el rotulo del pie ya termina en x=906. Y subir el
   sello es mover la maqueta.

   Asi que se aparta EL WIDGET, no el pie: login.xhtml y
   recuperarPassword.xhtml declaran Tawk_API.customStyle con
   yOffset:60 antes de cargar el guion. Con ese desplazamiento el
   saludo queda en y 656..700 y la burbuja en y 616..680, los dos
   por encima del y=716 donde empieza el pie. El pie vuelve a ser
   el filete de 44px de la maqueta -13 + 17 + 13 + 1- con el sello
   en su sitio, x 1197..1256. */


/* --- La ficha del documento verificado ---------------------- */

/* El borde de la ficha es del color del veredicto y no el gris
   de contenedor: es lo primero que se mira al abrir la pantalla
   y la maqueta lo pinta asi. */
.nexa-acceso-ficha {
	margin-top: 26px;
	background-color: var(--nexa-superficie, #ffffff);
	border: 1px solid var(--nexa-borde, #e9edf3);
	border-radius: 12px;
	overflow: hidden;
}

.nexa-acceso-ficha--valido {
	border-color: var(--nexa-teal-300, #5ad8ce);
}

.nexa-acceso-ficha--invalido {
	border-color: var(--nexa-rojo-300, #e38278);
}

.nexa-acceso-ficha__estado {
	padding: 12px var(--nexa-esp-4, 16px);
	font-size: 15px;
	font-weight: var(--nexa-peso-titulo, 700);
	border-bottom: 1px solid transparent;
}

/* Cuando el documento no es original no hay datos debajo, y la
   linea de separacion quedaba pegada al borde de la ficha
   haciendo un doble filete. */
.nexa-acceso-ficha__estado:last-child {
	border-bottom: 0 none;
}

.nexa-acceso-ficha__estado--valido {
	background-color: var(--nexa-exito-suave, #e7f7f1);
	border-bottom-color: var(--nexa-teal-200, #9ee5df);
	color: var(--nexa-teal-800, #084540);
}

.nexa-acceso-ficha__estado--invalido {
	background-color: var(--nexa-error-suave, #fdeaea);
	border-bottom-color: var(--nexa-rojo-200, #f2b7b0);
	color: var(--nexa-rojo-800, #6a1e16);
}

.nexa-acceso-ficha__nota {
	display: block;
	margin-top: 2px;
	font-size: var(--nexa-txt-sm, 13px);
	font-weight: var(--nexa-peso-normal, 400);
}

.nexa-acceso-ficha__estado--valido .nexa-acceso-ficha__nota {
	color: var(--nexa-teal-700, #0a6b63);
}

.nexa-acceso-ficha__estado--invalido .nexa-acceso-ficha__nota {
	color: var(--nexa-rojo-700, #852419);
}

.nexa-acceso-ficha__datos {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px var(--nexa-esp-4, 16px);
}

/* Rotulo a la izquierda y dato a la derecha en la misma linea:
   asi se lee como la ficha de un documento y no como un
   formulario mas. La alineacion es por la linea base para que
   dos tamanos de letra distintos no bailen. */
.nexa-acceso-ficha__dato {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nexa-esp-4, 16px);
}

.nexa-acceso-ficha__rotulo {
	flex: none;
	font-size: var(--nexa-txt-sm, 13px);
	color: var(--nexa-texto-suave, #636e83);
}

.nexa-acceso-ficha__valor {
	min-width: 0;
	font-size: var(--nexa-txt-base, 14px);
	font-weight: var(--nexa-peso-fuerte, 600);
	text-align: right;
	color: var(--nexa-texto, #1f2a37);
}


/* --- La tabla de soportes de "verificar" ---------------------
   El p:dataTable de esta pantalla no tenia tipografia propia, asi
   que se quedaba en el "body .ui-widget { font-size: 1rem }" del
   tema: 16px en los titulos de columna, en las celdas y en el
   rotulo del bloque, cuando en la caja de al lado nada pasa de
   15px. Es el desvio mas grande de las cinco pantallas, y encima
   en un elemento que se repite fila a fila: era lo que mas hacia
   que la pantalla se viera "de otra letra".

   La maqueta de verificar no dibuja tabla, asi que la referencia
   es la hermana que si la dibuja, FinalListado.dc.html: .l-th a
   11px/700 con letter-spacing .06em, y .l-td a 14px.

   Todo va acotado a .nexa-acceso-marco: las tablas del resto de
   NEXA no se tocan. Y el marco delante hace falta ademas para
   ganarle al tema, que escribe estos estilos con "body" delante. */
.nexa-acceso-marco .ui-datatable .ui-datatable-header {
	font-size: var(--nexa-txt-base, 14px);
	font-weight: var(--nexa-peso-fuerte, 600);
	color: var(--nexa-texto-medio, #33415c);
}

.nexa-acceso-marco .ui-datatable th,
.nexa-acceso-marco .ui-datatable .ui-column-title {
	font-size: 11px;
	font-weight: var(--nexa-peso-titulo, 700);
	/* 11px no esta en la escala de tokens: el escalon mas bajo es
	   --nexa-txt-xs (12px). Es el valor de .l-th de la maqueta del
	   listado, y con el espaciado de letra puesto ocupa lo mismo
	   que un 12px sin el. */
	letter-spacing: .06em;
	color: var(--nexa-texto-suave, #636e83);
}

.nexa-acceso-marco .ui-datatable td {
	font-size: var(--nexa-txt-base, 14px);
	color: var(--nexa-texto, #1f2a37);
}

/* El techo de la lista de soportes. Es la unica pieza de las cinco
   pantallas cuya altura la ponen los datos, y la columna que la
   contiene centra su contenido con align-items:center: cuando el
   contenido pasa de los 716px disponibles, el centrado recorta por
   los DOS extremos y no hay barra de desplazamiento que rescate lo
   recortado -el logo se salia por arriba y el pie por abajo, y el
   documento media 962px en una ventana de 760-.

   El techo es la cabecera del bloque, la de las columnas y TRES
   filas: a partir de ahi la lista se desplaza por dentro y la
   pantalla se queda quieta. El margen superior es el mismo 26px de
   la ficha del documento, que es la pieza de encima.

   La barra de desplazamiento va fina: con la ancha -15px- la tabla
   se quedaba en 341px dentro de una caja de 356 y las columnas no
   caian donde la maqueta las dibuja. */
.nexa-acceso__soportes {
	margin-top: 26px;
	max-height: 208px;
	overflow-y: auto;
	scrollbar-width: thin;
}

/* La tabla, a la densidad del sistema de diseno. Las medidas salen
   de FinalListado.dc.html, que es la maqueta hermana que si dibuja
   tablas: rotulos de columna con 10px 16px de relleno y filas de
   48px con el texto en una sola linea.

   Antes cada fila media 73px -16px de relleno arriba y abajo mas un
   boton de descarga estirado a los 44px del formulario- y el nombre
   del soporte se partia en dos y tres renglones. Cinco soportes eran
   488px de lista: mas que todo el resto de la caja junta.

   El nombre completo se lee al posar el raton encima: el atributo
   title esta puesto en el marcado. */
.nexa-acceso-marco .nexa-acceso__soportes .ui-datatable-header {
	padding: 0 0 8px;
	background: none;
	border: 0 none;
	text-align: left;
}

.nexa-acceso-marco .nexa-acceso__soportes .ui-datatable th {
	padding: 10px var(--nexa-esp-4, 16px);
}

.nexa-acceso-marco .nexa-acceso__soportes .ui-datatable td {
	height: 48px;
	padding: 0 var(--nexa-esp-4, 16px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* El boton de descarga NO es el boton del formulario: aqui vuelve a
   su tamano de tabla. La regla general del marco estira todo
   .ui-button al ancho de la caja, y en una celda de 90px eso daba un
   boton de 122px de ancho y 40 de alto que era quien mandaba en la
   altura de la fila. */
.nexa-acceso-marco .nexa-acceso__soportes .ui-button {
	width: auto;
	height: 32px;
}


/* --- Las pantallas de error ---------------------------------
   No llevan nada propio: el titulo, el parrafo y el boton son
   los mismos del login. La maqueta las dibuja en un lienzo mas
   pequeno, pero con el mismo armazon y el mismo tamano de letra
   -21px frente a 22px-, asi que aqui comparten la clase y no
   hay un modificador que mantener. */


/* --- Pantallas estrechas ------------------------------------
   Por debajo de 992px las dos columnas no caben: el panel pasa a
   ser una banda arriba y se queda solo con el nombre y el lema.
   Los tres puntos se retiran -no son instrucciones, son promesa
   de producto- para que el formulario quede a la vista sin tener
   que desplazar. */

@media screen and (max-width: 991px) {
	.nexa-acceso-marco {
		flex-direction: column;
		min-height: 100vh;
	}

	.nexa-acceso-marco__panel {
		width: 100%;
		padding: var(--nexa-esp-6, 24px);
	}

	/* El techo del contenido se ANULA aqui: plegado, el panel es una
	   banda que cruza la pantalla y su texto va pegado al borde
	   izquierdo, en linea con el formulario de abajo. Centrado
	   dentro de la banda quedaria descolgado de todo lo demas. */
	.nexa-acceso-marco__panel > * {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.nexa-acceso-panel__titulo {
		font-size: var(--nexa-txt-xl, 20px);
	}

	.nexa-acceso-panel__lema {
		margin-top: var(--nexa-esp-1, 4px);
		font-size: var(--nexa-txt-base, 14px);
	}

	.nexa-acceso-panel__linea,
	.nexa-acceso-panel__puntos {
		display: none;
	}

	/* Plegado, el texto del panel de arriba va pegado al borde izquierdo,
	   asi que el formulario tiene que empezar en ese mismo borde: con el
	   centrado horizontal puesto, la caja de 356px se quedaba flotando en
	   medio -medido a 900px: el panel empezaba en x=24 y el formulario en
	   x=272- y las dos mitades de la pantalla no compartian ni un borde.

	   Se consigue con align-items: stretch y la caja al 100%, que ademas
	   es lo que pidio el usuario: en pantalla angosta los campos y los
	   botones ocupan todo el ancho en vez de quedarse en 356px con el
	   hueco al lado. Antes esto era flex-start, que alineaba igual pero
	   dejaba la caja estrecha. */
	.nexa-acceso-marco__centro {
		padding: var(--nexa-esp-8, 32px) var(--nexa-esp-6, 24px);
		align-items: stretch;
	}

	/* Centrado VERTICAL con margenes automaticos y no con
	   justify-content: center. Los dos centran igual cuando sobra sitio,
	   pero un margen automatico nunca se vuelve negativo: si la ventana
	   es mas baja que el formulario, la caja se apoya arriba y se puede
	   desplazar. Con justify-content: center se recortaria por los dos
	   extremos y el logo se perderia por arriba sin forma de alcanzarlo,
	   que es el mismo motivo por el que el relleno de arriba y abajo de
	   esta columna es cero en pantalla ancha. */
	.nexa-acceso__caja {
		width: 100%;
		margin-top: auto;
		margin-bottom: auto;
	}
}

@media screen and (max-width: 575px) {
	.nexa-acceso-marco__panel {
		padding: var(--nexa-esp-5, 20px);
	}

	.nexa-acceso-marco__centro {
		padding: var(--nexa-esp-6, 24px) var(--nexa-esp-5, 20px);
	}

	.nexa-acceso-marco__pie {
		padding: var(--nexa-esp-3, 12px) var(--nexa-esp-5, 20px);
		flex-wrap: wrap;
		gap: var(--nexa-esp-1, 4px);
	}

	/* En el movil tampoco se engorda el pie: el mismo yOffset:60 de
	   Tawk_API sube los dos estados del widget por encima de el. A
	   375px el saludo va de x=41 a x=365 y no deja hueco lateral que
	   apartar, asi que aqui apartarlo por CSS nunca fue posible; era
	   la prueba de que el arreglo tenia que estar en el widget. */
}


/* --- Pantallas grandes: crece TODO, no solo el hueco -------
   La maqueta se dibujo en un lienzo de 1280px. En un monitor de
   1960 el armazon se estiraba pero la letra no, asi que el
   formulario quedaba diminuto en medio del blanco: "veo todo muy
   pequeno" fue exactamente la queja. Decidido con el usuario el
   2026-08-29 enseñandole las tres salidas en tamano real
   (comparador en /interventoria/tamano.html): crecerlo todo a la
   vez, manteniendo las proporciones de la maqueta.

   Se hace con "zoom" y no con una escalera de tamanos en px por
   una razon de peso: los campos, los botones y los dialogos los
   pinta nexa-skin.css y el tema propio de PrimeFaces, no este
   archivo. Subir aqui los px del texto dejaria los controles
   pequenos y la pantalla descuadrada. "zoom" agranda el resultado
   ya dibujado, asi que sube TODO -texto, controles, iconos,
   bordes y separaciones- en el mismo porcentaje y sin tocar ni una
   medida de la maqueta.

   El "min-height" se divide por el mismo factor y no es opcional:
   las unidades vh NO se escalan con zoom, asi que un 100vh dentro
   de un contenedor con zoom 1.4 se dibujaria 1,4 veces mas alto
   que la pantalla y sacaria barra de desplazamiento vertical en
   todas las pantallas de acceso.

   Los cortes empiezan en 1500 y no antes: por debajo de ahi el
   ancho de trabajo (ancho real / factor) se acercaria a los 992px
   del punto de quiebre, y como las @media se evaluan contra el
   ancho REAL y no contra el escalado, la pantalla se quedaria con
   el armazon de dos columnas dentro de un espacio de una. El tope
   de 1,5 esta puesto para que en un monitor 4K no se vuelva una
   caricatura.

   Si un navegador no entiende "zoom" -Firefox por debajo de la
   126- la pantalla se ve como antes de este bloque: mas pequena,
   pero entera y funcionando. */

@media screen and (min-width: 1500px) {
	.nexa-acceso-marco {
		zoom: 1.15;
		min-height: calc(100vh / 1.15);
	}
}

@media screen and (min-width: 1700px) {
	.nexa-acceso-marco {
		zoom: 1.28;
		min-height: calc(100vh / 1.28);
	}
}

@media screen and (min-width: 1900px) {
	.nexa-acceso-marco {
		zoom: 1.4;
		min-height: calc(100vh / 1.4);
	}
}

@media screen and (min-width: 2400px) {
	.nexa-acceso-marco {
		zoom: 1.5;
		min-height: calc(100vh / 1.5);
	}
}