/* ============================================================
   NEXA — sistema de diseno, capa de pintura
   ------------------------------------------------------------
   Son dos capas y estan en dos archivos:

     nexa-tokens.css  las decisiones. Los colores, la escala de
                      espaciado, la de tipografia, las esquinas,
                      las sombras, el foco, las duraciones.
                      Se sirve DELANTE de este.
     nexa-skin.css    esto. La pintura sobre el tema. No tiene
                      un solo color propio: consume tokens.

   Hasta el 2026-08-21 los tokens estaban aqui dentro, 42 valores
   planos, mientras el catalogo tenia otros 169 por su cuenta. Dos
   fuentes de la verdad son cero fuentes de la verdad. Ahora hay
   una sola y la copian tanto la aplicacion como la maqueta:
   cambiar un valor alli cambia las dos.

   REGLA DE ORO: aqui SOLO van propiedades que pintan.
     Permitido : color, background, border, border-radius,
                 box-shadow, font-weight, transition, outline
     Prohibido : width, height, padding, margin, display,
                 position, float, font-size
   Asi ninguna pantalla se descuadra: los controles siguen
   ocupando exactamente los mismos pixeles que antes.

   UNA EXCEPCION, al final del archivo: font-family. Estuvo en
   la lista de prohibidas hasta el 2026-08-21 y se saco a
   proposito, no por descuido. La razon de la prohibicion era
   buena -cambiar la letra cambia el ancho del texto- pero el
   precio de cumplirla era que la fuente de marca no se veia en
   ninguna pantalla de la aplicacion, solo en el login. Se midio
   antes de decidir: doce pantallas comparadas consigo mismas
   con y sin Lexend, y el coste real son nueve nombres largos de
   empresa que se recortan un poco mas en celdas que ya los
   recortaban. Es lo unico que se paga.

   El prefijo "body" es obligatorio en la capa 2: el tema Avalon
   escribe sus reglas como "body .ui-button", y sin el mismo peso
   le gana a este archivo.
   ============================================================ */


/* ============================================================
   LOS TOKENS YA NO VIVEN AQUI
   ------------------------------------------------------------
   Estaban en este archivo, 42 valores planos, mientras el
   catalogo tenia otros 169 en diseno/nexa-tokens.css. Dos
   fuentes de la verdad son cero fuentes de la verdad, y ya se
   noto: los seis colores que no llegaban al contraste minimo
   estaban corregidos en el catalogo desde hacia tiempo y
   produccion nunca se entero.

   Ahora hay UNA. El archivo se mudo a
   resources/nexa/1_3/css/nexa-tokens.css, se sirve delante de
   este, y la maqueta lo copia de ahi. Cambiar un valor alli
   cambia la aplicacion y el catalogo a la vez.

   Ademas de los 42 de antes trae la paleta numerada completa
   -azul, teal, neutro, ambar y rojo, del 50 al 900, con su
   contraste anotado-, la escala de espaciado, la de tipografia,
   las capas de z-index, las duraciones y curvas de animacion y
   los colores de las series de grafica.

   LO UNICO QUE SE PISA DESDE AQUI SON LAS SOMBRAS, y a
   proposito. El catalogo las pone en "none": es una decision de
   diseno suya -dice que la sombra en reposo mas la sombra mayor
   en hover era lo que mas delataba una plantilla- y deja los
   botones y las tarjetas planos. Eso se ve, asi que no entra de
   rebote con la fontaneria. Se queda pendiente de mirarlo en la
   maqueta y decidirlo aparte.

   Si algun dia se adopta, esto se borra y ya esta: son estas
   cinco lineas.
   ============================================================ */
:root {
	--nexa-sombra-1: 0 1px 2px rgba(16, 24, 40, .05);
	--nexa-sombra-2: 0 1px 2px rgba(16, 24, 40, .10);
	--nexa-sombra-3: 0 2px 5px rgba(16, 24, 40, .14);
	--nexa-sombra-flotante: 0 12px 32px rgba(16, 24, 40, .14);
	--nexa-sombra-hundida: inset 0 2px 4px rgba(0, 0, 0, .12);
}


/* ============================================================
   CAPA 2 — PINTURA SOBRE AVALON
   Tanda 1 (2026-08-07): botones
   ============================================================ */

/* --- Boton principal ---------------------------------------
   Antes: #337ab7, esquina 4px, sin sombra
   ------------------------------------------------------------ */
body .ui-button {
	background-color: var(--nexa-primario);
	border-radius: var(--nexa-radio-control);
	font-weight: var(--nexa-peso-medio);
	box-shadow: var(--nexa-sombra-2);
	transition: background-color var(--nexa-transicion),
	            border-color var(--nexa-transicion),
	            box-shadow var(--nexa-transicion);
}

body .ui-button.ui-state-hover {
	background-color: var(--nexa-primario-oscuro);
	box-shadow: var(--nexa-sombra-3);
}

body .ui-button.ui-state-focus {
	background-color: var(--nexa-primario-oscuro);
}

body .ui-button.ui-state-active {
	background-color: var(--nexa-primario-activo);
	box-shadow: var(--nexa-sombra-hundida);
}

/* --- Boton secundario --------------------------------------
   Se declaran los dos nombres de clase a proposito:
     secondary-btn        -> el que define el tema Avalon
     ui-button-secondary  -> el que usan las paginas de NEXA
   (esta segunda no existe en Avalon ni en primefaces-8.0.jar,
    por eso hoy esos botones salen del mismo azul que el resto)
   ------------------------------------------------------------ */
body .ui-button.secondary-btn,
body .ui-button.ui-button-secondary {
	background-color: var(--nexa-superficie);
	border: 1px solid var(--nexa-borde-fuerte);
	color: var(--nexa-texto-medio);
	box-shadow: var(--nexa-sombra-1);
}

body .ui-button.secondary-btn.ui-state-hover,
body .ui-button.ui-button-secondary.ui-state-hover {
	background-color: var(--nexa-superficie-hover);
	border-color: var(--nexa-borde-hover);
	color: var(--nexa-texto);
}

body .ui-button.secondary-btn.ui-state-focus,
body .ui-button.ui-button-secondary.ui-state-focus {
	background-color: var(--nexa-superficie-hover);
	border-color: var(--nexa-borde-hover);
}

body .ui-button.secondary-btn.ui-state-active,
body .ui-button.ui-button-secondary.ui-state-active {
	background-color: #eef1f6;
	border-color: #a4aebf;
}

/* --- Boton de exito (confirmar, radicar, firmar) ------------
   Antes: verde #5cb85c. Ahora teal, igual que los mockups.
   ------------------------------------------------------------ */
body .ui-button.success-btn,
body .ui-button.ui-button-success {
	background-color: var(--nexa-exito);
	border-color: transparent;
	color: var(--nexa-texto-sobre-color);
}

body .ui-button.success-btn.ui-state-hover,
body .ui-button.ui-button-success.ui-state-hover {
	background-color: var(--nexa-exito-oscuro);
	border-color: transparent;
}

body .ui-button.success-btn.ui-state-focus,
body .ui-button.ui-button-success.ui-state-focus {
	background-color: var(--nexa-exito-oscuro);
	border-color: transparent;
}

body .ui-button.success-btn.ui-state-active,
body .ui-button.ui-button-success.ui-state-active {
	background-color: var(--nexa-exito-activo);
	border-color: transparent;
}

/* --- Boton plano (girar, limpiar, subir otra) --------------- */
body .ui-button.ui-button-flat {
	background-color: transparent;
	border-color: transparent;
	color: #6b7280;
	box-shadow: none;
}

body .ui-button.ui-button-flat.ui-state-hover {
	background-color: #f1f4f9;
	border-color: transparent;
	color: #1f2937;
	box-shadow: none;
}

body .ui-button.ui-button-flat.ui-state-focus {
	background-color: #f1f4f9;
	border-color: transparent;
	box-shadow: none;
}

body .ui-button.ui-button-flat.ui-state-active {
	background-color: #e6ebf3;
	border-color: transparent;
	color: #1f2937;
	box-shadow: none;
}

/* ============================================================
   Tanda 2 (2026-08-09): botones dentro de las tablas
   ============================================================ */

/* --- Rotulo cortado en la columna Opciones ------------------
   Las paginas envuelven el contenido en .ui-fluid, que estira
   los controles al ancho de su celda. Con el relleno que el
   tema le pone al texto (32px a la izquierda para el icono y
   16px a la derecha), en una celda angosta no queda espacio y
   la palabra sale cortada.
   ------------------------------------------------------------ */
body .ui-datatable .ui-button:not(.ui-button-icon-only) {
	width: auto;
}

body .ui-datatable .ui-button .ui-button-text {
	white-space: nowrap;
}

/* --- Boton de solo icono aplastado --------------------------
   La regla de arriba se llevaba por delante el ancho fijo que
   el tema le da al boton de solo icono (2.357rem). Al quedar
   en auto, el rotulo oculto "ui-button" pedia mas ancho del
   que tiene la celda, la tabla lo estrujaba y el boton salia
   angosto y estirado hacia abajo. Con el :not() de arriba el
   tema vuelve a mandar; esto lo deja explicito por si el
   orden de las hojas cambia.
   ------------------------------------------------------------ */
body .ui-datatable .ui-button.ui-button-icon-only {
	width: 2.357rem;
}

/* --- SplitButton partido en dos lineas ----------------------
   PrimeFaces coloca el boton de la flecha con position:absolute
   y el tema propio lo devuelve a position:relative, o sea que
   vuelve al flujo. Sumado a que .ui-fluid le da el 100% del
   ancho al boton principal, la flecha caia debajo. Se ponen los
   dos en linea con su ancho natural.
   ------------------------------------------------------------ */
body .ui-splitbutton {
	display: inline-flex;
	vertical-align: middle;
}

body .ui-fluid .ui-splitbutton,
body .ui-fluid .ui-splitbutton > .ui-button {
	width: auto;
}

/* --- Panel del topbar en movil ------------------------------
   De 1024px para abajo, el boton de las tres rayas es lo unico
   que muestra la lista .topbar-items. Entraba con las clases
   "fadeInDown animated" de animate.css: medio segundo cayendo
   desde translate3d(0,-100%,0), es decir, desde su propia
   altura por encima. Se veia como un salto. Ahora entra en
   140ms con un fundido y 4px de recorrido, que es lo que hace
   cualquier menu desplegable.

   Va sobre .topbar-items-visible para ganarle en especificidad
   al animation-duration: .5s que el layout de Avalon deja
   puesto en .topbar-items.
   ------------------------------------------------------------ */
@keyframes nexa-topbar-abrir {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
	.layout-wrapper .topbar .topbar-right .topbar-items.topbar-items-visible {
		animation: nexa-topbar-abrir 140ms ease-out;
	}
}

/* A quien pide menos movimiento en el sistema no se le mueve nada. */
@media (prefers-reduced-motion: reduce) {
	.layout-wrapper .topbar .topbar-right .topbar-items.topbar-items-visible {
		animation: none;
	}
}


/* --- Nota sobre animate.css --------------------------------
   Aqui estuvo un momento la copia de "animated swing", las dos
   unicas clases que NEXA usaba de animate.css. Ya no hace
   falta: el balanceo de los iconos del topbar se retiro.

   Era un adorno de la plantilla de Avalon -los nueve iconos se
   bamboleaban en cada carga de pagina-, del mismo tipo que el
   fadeInDown que se quito antes del panel movil, y el criterio
   de la casa es sobrio antes que llamativo.

   Si alguna vez se quiere devolver, esta en animate.css dentro
   del historial de git, y la clase que hay que reponer en los
   dos topbars es "animated swing".
   ------------------------------------------------------------ */


/* --- La fuente de NEXA, aplicada ----------------------------
   --nexa-fuente estaba declarada arriba desde hace tiempo y no
   la usaba nadie. El resultado era el peor de los dos mundos:
   Lexend se descargaba en cada pagina y no la pintaba ninguna
   regla. El cuerpo corria con la pila de layout-blue.css y los
   componentes con la del tema, asi que la letra de marca solo
   se veia en el login, que carga nexa-base.css aparte.

   Los cuatro sitios que hay que pisar salen de medir el CSS
   servido, no de adivinar:

   - body, que lo fija layout-blue.css en su linea 1242
   - "body .ui-widget", la regla del tema que alcanza a casi
     todo componente de PrimeFaces
   - los tres campos de escritura que el tema declara aparte
     porque viven dentro de un contenedor de fichas
   - --font-family, la variable del tema: hoy solo la lee
     input.ui-spinner-input en components.css, pero cuesta una
     linea dejarla apuntando al mismo sitio

   Los iconos NO se tocan: .fa y .pi resuelven su glifo por
   font-family y pisarsela los convierte en cuadros. Por eso se
   enumeran los campos en vez de barrer con un "*".

   Medido en la maqueta, que carga esta misma pila, sobre doce
   pantallas y comparando cada una consigo misma con y sin la
   fuente: no aparece ni un desbordamiento de pagina, y los
   unicos textos que pasan a recortarse son nueve nombres
   largos de empresa en celdas de ancho fijo que ya se
   recortaban antes. Es un problema de los anchos de esas
   tablas, no de la letra.
   ------------------------------------------------------------ */
:root {
	--font-family: var(--nexa-fuente);
}

body,
body .ui-widget,
body .ui-widget input,
body .ui-widget select,
body .ui-widget textarea,
body .ui-widget button,
body .ui-autocomplete .ui-autocomplete-multiple-container .ui-autocomplete-input-token input,
body .ui-chips .ui-chips-container .ui-chips-input-token input,
body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-multiple-container .ui-selectcheckboxmenu-input-token input {
	font-family: var(--nexa-fuente);
}


/* ============================================================
   EL FOCO DEL TECLADO
   ------------------------------------------------------------
   Hasta aqui no se veia. El tema apaga el anillo del navegador
   con "outline: 0 none" en 67 reglas y no pone nada en su sitio,
   y no habia una sola regla :focus-visible en toda la pila que
   se sirve. Medido en la pila real: enfocar un boton no cambiaba
   nada, y en un campo aparecia un box-shadow TRANSPARENTE. El
   foco y el hover eran indistinguibles.

   Quien navega con teclado no sabia donde estaba. Y no es solo
   accesibilidad: en un formulario largo -y en NEXA los hay- el
   tabulador es la forma rapida de moverse.

   Esto viene del catalogo, que ya lo tenia resuelto y bien
   pensado: nexa-componentes.css lo pone de TANDA 0, "lo unico de
   todo el archivo que alguien puede necesitar de verdad para
   trabajar".

   :focus-visible y no :focus, que es la diferencia que importa:
   el navegador solo lo enciende cuando el foco llego por
   teclado. Al hacer clic con el raton no aparece ningun anillo,
   que es lo que hace que esto no se note para quien no lo
   necesita.

   NO se apaga con prefers-reduced-motion. El anillo no es una
   animacion: es informacion.
   ------------------------------------------------------------ */

/* Red de seguridad: cualquier cosa enfocable que no tenga una
   regla propia mas abajo. Cubre los 40 enlaces del menu lateral,
   los 475 commandButton, los 123 inputText y los 62 calendar. */
body :focus-visible {
	outline: 0 none;
	box-shadow: var(--nexa-foco);
	border-radius: var(--nexa-radio-control);
}

/* Las que llevan regla propia la llevan porque el tema les pone
   una sombra suya, y sin repetirla aqui la del foco se pierde. */
body .ui-commandlink:focus-visible,
body a.ui-link:focus-visible {
	outline: 0 none;
	box-shadow: var(--nexa-foco);
	border-radius: var(--nexa-radio-control);
}

/* En la pestana el anillo se suma a la linea inferior, no la
   sustituye: siguen leyendose "activa" y "enfocada" a la vez. */
body .ui-tabs .ui-tabs-nav > li > a:focus-visible {
	outline: 0 none;
	box-shadow: var(--nexa-foco);
}

body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link:focus-visible {
	outline: 0 none;
	box-shadow: var(--nexa-foco);
}

/* El boton lleva sombra propia en reposo. El anillo se pone
   DELANTE de ella en la lista para que se vea por fuera. */
body .ui-button:focus-visible {
	outline: 0 none;
	box-shadow: var(--nexa-foco), var(--nexa-sombra-2);
}

/* El tema le pone al <select> y al <input> pelado un anillo suyo,
   #a6d5fa de 0.2em, que no sale de ningun token y no se parece al
   del resto. Su selector pesa mas que la red de seguridad, asi que
   hay que repetirlo con el mismo peso para que el anillo sea uno
   solo en toda la aplicacion. La lista del :not() se copia tal
   cual del tema: si se recorta, se pisan campos que ya tienen su
   propia regla. */
body select:focus-visible,
body input:not([role="combobox"],[type="file"],.ui-widget,.ui-inputfield):focus-visible {
	box-shadow: var(--nexa-foco);
}