@charset "UTF-8";

/**
 * screens.css
 *
 * Pantallas del framework: grillas, formularios, tabs, etc.
 */


div.fx-screen-error {
	font-weight: bold;
	color: var(--fx-danger);
	margin-top: 1em;
	white-space: pre;
	font-family: monospace; /* los mensajes de error de la base se ven mucho mejor en monospace */
}

/*
 * Tabs
 */
div.fx-tablist ul {
	border-bottom: 1px solid var(--fx-tab-borde);
	margin: 1em 0;
	padding-left: 0;
	padding-bottom: 0;
}

li.fx-tab {
	display: inline-block;
	vertical-align: bottom;
	margin-right: 0.3em;
	/* margin-bottom: -1px;  */
	padding: 0.5em 1em;
	border: 1px solid var(--fx-tab-borde);
	background-color: var(--fx-tab-fondo);
	cursor: pointer;
}

.fx-tab.fx-tab--selected {
	background-color: var(--fx-tab-selected-fondo);
	color: var(--fx-tab-selected-texto);
	border-bottom-color: transparent; 
	box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

@media print {
	div.fx-tablist,
	div#fx-tab-content pre {
		display: none;
	}
}

.fx-grid-bar {
	display: flex;
	align-items: center;
	gap: 0.5em; 
	flex-wrap: wrap;
}

/*
 * Botones
 */
.fx-btn {
	border: 1px solid var(--fx-border);
	background-color: var(--fx-fondo);
	color: var(--fx-texto-action);
	cursor: pointer;
	padding: 0.5em 0.75em; 
}

.fx-btn:hover {
	background-color: var(--fx-highlight);
}

.fx-btn-delete {
	border-color: var(--fx-danger);
	color: var(--fx-danger);
}
.fx-btn-return {
	background-color: var(--fx-return);
	color: var(--fx-white);
}
.fx-btn-ok {
	background-color: var(--fx-primary);
	color: var(--fx-white);
	min-width: 60px;
}
.fx-btn-add {
	background-color: var(--fx-primary);
	color: var(--fx-white);
}
.fx-btn-add-custom {
	background-color: var(--fx-custom);
	color: var(--fx-black);
}
.fx-btn-attach {
	background-color: var(--fx-primary);
	color: var(--fx-white);
}
.fx-btn-undo {
	color: var(--fx-texto-disabled);
}
.fx-btn-approve {
	background-color: var(--fx-warning);
	color: var(--fx-white);
}
.fx-btn-reject {
	border-color: var(--fx-danger);
	color: var(--fx-danger);
}
.fx-btn-dash {
	background-color: #add8e6;
	color: var(--fx-black);
}
.fx-btn-disable {
	color: var(--fx-texto-disabled);
}

.fx-grid-orders {
	height: 25px;
	border: 1px solid var(--fx-border);
	color: var(--fx-texto-action);
	margin-right: 5px;
}

/**
 * Customización EasyUI
 */

/* saco el borde de los tabs */
div.tabs-panels {
	border: none;
}
.panel-header {
	background-color: var(--fx-fondo-header);
}
.panel-title {
	font-weight: normal;
	color: var(--fx-title);
	padding-right: 10px;
}

a.fx-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: bottom; /* alinea la imagen con los INPUTS */
	cursor: pointer;
	background-size: cover;
}

.fx-svg-icon {
	display: inline-block;
	background-color: currentColor; 
	mask-repeat: no-repeat; 
	mask-position: center;
	mask-size: contain; 
	border: 0;
}

.fx-svg-icon-sort {
	 mask-image: url("data:image/svg+xml,%3Csvg viewBox='2 2 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 12H21M13 8H21M13 16H21M6 7V17M6 17L3 14M6 17L9 14' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); 
}

.fx-svg-icon-reverse {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7H14C17.3137 7 20 9.68629 20 13C20 16.3137 17.3137 19 14 19H4M4 7L8 3M4 7L8 11' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fx-svg-icon-maximize {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10L20 4M20 4H15.5M20 4V8.5M4 4L10 10M4 4V8.5M4 4H8.5M14 14L20 20M20 20V15.5M20 20H15.5M10 14L4 20M4 20H8.5M4 20L4 15.5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fx-svg-icon-tools {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' d='M764.416 254.72a351.68 351.68 0 0 1 86.336 149.184H960v192.064H850.752a351.68 351.68 0 0 1-86.336 149.312l54.72 94.72-166.272 96-54.592-94.72a352.64 352.64 0 0 1-172.48 0L371.136 936l-166.272-96 54.72-94.72a351.68 351.68 0 0 1-86.336-149.312H64v-192h109.248a351.68 351.68 0 0 1 86.336-149.312L204.8 160l166.208-96h.192l54.656 94.592a352.64 352.64 0 0 1 172.48 0L652.8 64h.128L819.2 160l-54.72 94.72zM704 499.968a192 192 0 1 0-384 0 192 192 0 0 0 384 0z'/%3E%3C/svg%3E");
}

.fx-icon-actionitem {
	margin: 2px 3px;
} /* un ícono de acción en una celda de una grilla */

.fx-icon-add  		{ background:var(--icons16)   0px 0; } 
.fx-icon-view  		{ background:var(--icons16)  -16px 0; }
.fx-icon-edit  		{ background:var(--icons16)  -32px 0; }
.fx-icon-delete  	{ background:var(--icons16) -48px 0; }
.fx-icon-reload  	{ background:var(--icons16)  -64px 0; }
.fx-icon-excel		{ background:var(--icons16)  -80px 0; }
.fx-icon-print		{ background:var(--icons16)  -96px 0; }
.fx-icon-enable		{ background:var(--icons16) -112px 0; }
.fx-icon-configure	{ background:var(--icons16) -128px 0; }
.fx-icon-execute	{ background:var(--icons16) -128px 0; }
.fx-icon-select		{ background:var(--icons16) -144px 0; }
.fx-icon-save		{ background:var(--icons16) -160px 0; }
.fx-icon-alert		{ background:var(--icons16) -176px 0; }
.fx-icon-users		{ background:var(--icons16) -192px 0; }
.fx-icon-notusers	{ background:var(--icons16) -208px 0; }
.fx-icon-up			{ background:var(--icons16) -224px 0; }
.fx-icon-right		{ background:var(--icons16) -240px 0; }
.fx-icon-rightdoble	{ background:var(--icons16) -256px 0; }
.fx-icon-down		{ background:var(--icons16) -272px 0; }
.fx-icon-left		{ background:var(--icons16) -288px 0; }
.fx-icon-leftdoble	{ background:var(--icons16) -304px 0; }
.fx-icon-download	{ background:var(--icons16) -320px 0; }
.fx-icon-money		{ background:var(--icons16) -336px 0; }
.fx-icon-info		{ background:var(--icons16) -352px 0; }
.fx-icon-mail		{ background:var(--icons16) -368px 0; }
.fx-icon-minus		{ background:var(--icons16) -384px 0; }
.fx-icon-plus		{ background:var(--icons16) -400px 0; }
.fx-icon-pdf		{ background:var(--icons16) -416px 0; }
.fx-icon-query		{ background:var(--icons16) -432px 0; }
.fx-icon-sortdown	{ background:var(--icons16) -448px 0; }
.fx-icon-sortup		{ background:var(--icons16) -464px 0; }
.fx-icon-return		{ background:var(--icons16) -480px 0; }
.fx-icon-calendar	{ background:var(--icons16) -496px 0; }
.fx-icon-csv  	    { background:var(--icons16) -512px 0; }
.fx-icon-attach	    { background:var(--icons16) -528px 0; }
.fx-icon-eye	    { background:var(--icons16) -544px 0; }
.fx-icon-word	    { background:var(--icons16) -560px 0; }
.fx-icon-image	    { background:var(--icons16) -576px 0; }
.fx-icon-green	    { background:var(--icons16) -592px 0; }
.fx-icon-red	    { background:var(--icons16) -608px 0; }
.fx-icon-blue	    { background:var(--icons16) -624px 0; }
.fx-icon-unlock	    { background:var(--icons16) -640px 0; }
.fx-icon-lock	    { background:var(--icons16) -656px 0; }
.fx-icon-folder	    { background:var(--icons16) -672px 0; }
.fx-icon-preferred  { background:var(--icons16) -688px 0; }
.fx-icon-up-down    { background:var(--icons16) -704px 0; }
.fx-icon-tree       { background:var(--icons16) -720px 0; }
.fx-icon-bell       { background:var(--icons16) -736px 0; }
.fx-icon-bell-on    { background:var(--icons16) -752px 0; }

.fx-icon-pivot 		{ background: url("../images/pivot.svg"); }	

.fx-icon-help {
	background: url("../images/help.png");
}

a.fx-icon32 {
	display: inline-block;
	width: 32px;
	height: 32px;
}

.fx-icon32-left			{ background:var(--icons32)   -0px 0; }
.fx-icon32-leftdoble	{ background:var(--icons32)  -32px 0; }
.fx-icon32-right		{ background:var(--icons32)  -64px 0; }
.fx-icon32-rightdoble	{ background:var(--icons32)  -96px 0; }
.fx-icon32-sortdown		{ background:var(--icons32) -128px 0; }
.fx-icon32-sortup		{ background:var(--icons32) -160px 0; }
.fx-icon32-users		{ background:var(--icons32) -192px 0; }

/*
 * Clase Panel
 *
 * div.fx-panel
 */

/**
 * Clase PanelLayoutTable
 */
table.fx-panel-layout-table {
	border-collapse: collapse;
}

td.fx-panel-layout-table {
	vertical-align: top;
	padding-left: 0;
}

div.fx-panel {
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: var(--fx-panel-bg);
	box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

.fx-panel a {
	color: var(--fx-anchor);
}

.fx-panel-border {
	border: 1px solid var(--fx-border);
}

div.fx-panel-title {
	background-color: var(--fx-fondo-header);
	text-align: center;
	padding: 0.5em;
	vertical-align: middle;
	color: var(--fx-title);
	border-bottom: 1px solid var(--fx-border);
}

div.fx-pcol .fx-pcol-value {
	text-align: center;
	padding: 1rem;
	font-weight: bold;
}


/***********************************************************************************************************************
 * Grid
 ***********************************************************************************************************************/

.fx-grid {
	--max-height: 450px;
}


.fx-variant-actions,
.fx-order-actions {
	display: inline-flex;
	gap: 3px;
	margin-left: 2px;
	margin-right: 6px;
}

.fx-grid-data.fx-maximized {
	position: fixed;
	inset: 0;
	z-index: 9999;
	height: auto;        /* inset ya define el alto */
	max-height: none;
	background: #fff;    /* necesario: si no, se transparenta */
	padding: 1rem;
	overflow: auto; 
}

.fx-grid-data-tbl-container {
	margin-top: 0.3em;
	overflow-y: auto; 
	max-height: var(--max-height);
	overscroll-behavior: contain;		/* evita que el scroll de la grilla haga scroll del body */
	width: fit-content; 				/* ocupa de ancho lo que ocupe la tabla que está adentro */
	max-width: 100%;					/* pero no más que el ancho de la pantalla */
}

.fx-grid-data.fx-maximized .fx-grid-data-tbl-container {
	overflow: hidden; 
	max-height: inherit;
	overscroll-behavior: unset;
}

.fx-grid-data-tbl {
	border-collapse: collapse;
	min-width: 550px;
	/* margin-top: 0.3em; */
}

.fx-grid-data-tbl thead {
	position: sticky; 
	top: 0; 
	z-index: 1; 
}

.fx-grid-data-tbl tfoot {
	background-color: var(--fx-bg);
	position: sticky; 
	bottom: -1px;	/* evita error de redondeo o quirks del navegador que hacen que el contenido de la tabla se vea que pasa por abajo del footer por un gap de 1px */
	z-index: 1; 
}

.fx-grid-data-tbl td,
.fx-grid-data-tbl th {
	border: 1px solid var(--fx-border-cell);
	padding: 0.5em;
}


.fx-grid-data-tbl th {
	background-color: var(--fx-fondo-th);
	text-align: center;
}

.fx-grid-data-tbl a {
	color: var(--fx-anchor);
}

.fx-grid-data-par {
	background-color: var(--fx-fondo-zebra);
}

tr.fx-grid-data-total {
	border: 0;
}

td.fx-grid-data-nototal {
	border: 0 !important;
}

td.fx-grid-data-total {
	font-weight: bold;
	background-color: var(--fx-grid-total-fondo);
	color: var(--fx-grid-total-texto);
	text-align: right;
}

.fx-grid-data-footer {
	margin-top: 10px;
}

/* celda con acciones de ítem. width de 1px + el nowrap hace que sea lo más angosta posible pero que entre todo en una línea. */
td.fx-grid-data-action-item,
th.fx-grid-data-action-item {
	vertical-align: middle;
	padding: 0 2px !important;
	width: 1px;
	white-space: nowrap;
}

.fx-grid-data-checkbox {
	vertical-align: middle; 
	text-align: center; 
}
.fx-grid-data-checkbox input[type=checkbox] {
	width: 1em; 
	height: 1em; 
	padding: 0.5em; 
}


a.fx-grid-data-action-item img {
	vertical-align: middle;
}

div.fx-grid-data-error {
	font-weight: bold;
	color: var(--fx-danger);
	margin-top: 10px;
	padding-left: 26px;
	background: url("../images/alert.png") no-repeat left top;
}

div.fx-grid-data-empty {
	font-weight: bold;
	color: #0000ff;
	margin-top: 10px;
	padding-left: 26px;
	background: url("../images/info.png") no-repeat left top;
}

/*
 * Clase PCols
 *
 * div.fx-pcols
 */
table.fx-pcols {
	margin: 0.5rem;
}

td.fx-pcols-attr {
	font-weight: bold;
	padding: 0.3em 2em 0.3em 0;
	white-space: nowrap;
}

/*
 * Mensajes en ventanas
 */

.fx-msg-info,
.fx-msg-ok,
.fx-msg-warning {
	margin-bottom: 1em;
	margin-top: 1em;
}

.fx-msglist {
	margin-bottom: 1em;
	margin-top: 1em;
}
.fx-msglist ul {
	list-style-type: none;
}
.fx-msglist li {
	background-repeat: no-repeat;
	padding: 0 0 0.5em 2em;
}
li.fx-msglist-info {
	background-image: url("../images/info.png");
}
li.fx-msglist-alert {
	background-image: url("../images/alert.png");
	color: var(--fx-danger);
	white-space: pre;
}
li.fx-msglist-noicon {
	padding-left: 0;
}

/*
 * Cuando un fx-msg-info adentro contiene HTML
 */
.fx-msg-info p {
	margin-bottom: 1em;
}
.fx-msg-info table {
	border-collapse: collapse;
}
.fx-msg-info th {
	padding: 5px 1em 5px 0;
	border-bottom: 1px solid var(--fx-border);
	border-top: 1px solid var(--fx-border);
}
.fx-msg-info td {
	padding: 1em 1em;
}
.fx-msg-info td.fx-number {
	text-align: center;
}
.fx-msg-info td.fx-money {
	text-align: right;
}
.fx-msg-info ul {
	padding-left: 2em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

/*
 * Pantalla SDetail
 */
.fx-sdetail-actions {
	margin-bottom: 10px;
}

/*
 * Pantalla SOption
 */
.fx-soption label {
	margin-left: 20px;
	vertical-align: middle;
	line-height: 20px;
}
.fx-soption .fx-soption-radio {
	vertical-align: baseline;
	margin-right: 10px;
}
.fx-soption label {
	display: block;
	margin-bottom: 10px;
}
.fx-soption label p {
	color: var(--fx-texto-action);
	margin-left: 23px;
	margin-top: 3px;
}

/*
 * TabList
 */

div.fx-tablist {
	width: 100%;
	height: auto;
}

span.fx-tablist-tab-img {
	display: inline-block;
	line-height: 20px;
	padding-top: 5px;
}
span.fx-tablist-tab-img div {
	width: 32px;
	height: 32px;
	margin: auto;
}

/*
 * Tab TText
 */
div.fx-ttext .fx-format-text {
	white-space: pre-wrap;
	max-width: 700px;
}

div.fx-format-code {
	white-space: pre-wrap;
}

/* La solapa additional data cuando estoy mirando un evento en fw.log. Como es un evento de log, el formato lo acomodo
  para que sea algo más técnico */
div.fx-ttext .fx-log-data-text {
	font-family: monospace;
	max-width: 1900px !important; /* override de los 700px máximos de fx-format-text */
}

/*
 * Un bloque de código HTML ingresado por el usuario (con un input IHtmlEdit o similar).
 */
.fx-custom-html p {
	padding-bottom: 10px;
}
.fx-custom-html ul {
	padding-left: 20px;
	padding-bottom: 10px;
	margin: 0;
}

/* Fija un ancho adecuado para un bloque de documentación, de texto puro, etc. para que no tome el ancho completo de la pantalla. Util por ej. para TText,  */
.fx-width-doc {
	width: 600px;
}
.fx-width-email {
	width: 400px;
}

/*
 * TGrid
 */

/*
 * TRow
 */
div.fx-trow {
	padding: 10px;
}
td.fx-trow-key {
	padding-right: 15px;
	font-weight: bold;
}

/*
 * TText
 */
.fx-ttext-actions {
	margin-bottom: 10px;
}

/*
 * Genéricos para aplicar en condiciones o código en general
 */
.rojo 		{ color: #ff0000 !important; }
.verde 		{ color: #008000 !important; }
.gris 		{ color: #888888 !important; }
.azul 		{ color: #0000ff !important; }
.amarillo 	{ color: #ffff00 !important; }
.blanco 	{ color: #ffffff !important; }

tr.gris a:link {
	color: #888888 !important;
}
tr.rojo a:link {
	color: #ff0000 !important;
}

.bg-red    { background-color: #ffaaaa !important; }
.bg-yellow { background-color: #ffff00 !important; }
.bg-green  { background-color: #00ff00 !important; }
.bg-blue   { background-color: #0000ff !important; color: #ffffff; }
.bg-grey   { background-color: #666666 !important; color: #ffffff; }

td:has(> span.bg-red) {
	background-color: #ffaaaa;
}
td:has(> span.bg-green) {
	background-color: #00ff00;
}

/*
 * Estilos de colores para celdas, cuando se quiere identificar valores pero sin 
 * una connotación buena/mala como podría ser verde/rojo. No importa mucho qué colores sean
 * pero están calculados para que intercalados en celdas de una misma grilla se vean bien. 
 */
.bg-color1 {
	background-color: var(--fx-cat-1-fondo) !important;
	color: var(--fx-cat-1-texto);
}
.bg-color2 {
	background-color: var(--fx-cat-2-fondo) !important;
	color: var(--fx-cat-2-texto);
}
.bg-color3 {
	background-color: var(--fx-cat-3-fondo) !important;
	color: var(--fx-cat-3-texto);
}
.bg-color4 {
	background-color: var(--fx-cat-4-fondo) !important;
	color: var(--fx-cat-4-texto);
}
.bg-color5 {
	background-color: var(--fx-cat-5-fondo) !important;
	color: var(--fx-cat-5-texto);
}

.indent1 {
	padding-left: 2em;
}

.right {
	text-align: right;
}
.left {
	text-align: left;
}
.center {
	text-align: center;
}

/*
 * Columnas
 */
.fx-ctext {
	color: var(--fx-texto);
	margin: 0px;
	border: 0;
}

.fx-ctext-monospace {
	font-family: monospace !important;
}

/* TAB de notas FwNoteHtmlTab */
.fx-noteh {
	width: 494px;
	background-color: var(--fx-gris-claro-1);
	font-family: helvetica, arial, sans-serif;
	line-height: 1.34;
}
.fx-noteh-note {
	width: 470px;
	padding: 8px 12px 4px 12px;
}
.fx-noteh-avatar {
	width: 32px;
	height: 32px;
	float: left;
	background-color: var(--fx-texto);
}
.fx-noteh-content-wrap {
	padding-left: 40px;
}
.fx-noteh-author {
	color: var(--fx-link);
	font-weight: bold;
}
.fx-noteh-actions a {
	color: var(--fx-link);
	text-decoration: none;
}
.fx-noteh-actions a:hover {
	text-decoration: underline;
}
.fx-noteh-actions a:visited {
	color: var(--fx-link);
}
.fx-noteh-date {
	color: #90949c;
	padding-top: 2px;
}
.fx-noteh-actions,
.fx-noteh-reminders {
	margin-bottom: 10px;
}
.fx-noteh-reminder > span {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: var(--icons16) -496px 0;
	margin-right: 1em;
}
.fx-noteh-reminder a span:first-child {
	padding-right: 1em;
}

/*
 * Ventana SQuickLookup
 */
#fx-squick-fsearch {
	margin-bottom: 10px;
}
#fx-squick-fsearch #s {
	height: 23px;
	width: 150px;
}

/*
 * IHtmlEdit. Si pongo un tinymce dentro de un contenedor con la clase .fx-mcefullsize hace que el TinyMCE ocupe
 * todo el espacio de su contenedor
 */
.fx-mcefullsize,
.fx-mcefullsize .mce-tinymce,
.fx-mcefullsize .mce-stack-layout,
.fx-mcefullsize .mce-edit-area {
	display: flex !important;
	flex-direction: column;
	flex: 1;
	align-items: stretch;
}
.fx-mcefullsize .mce-tinymce iframe {
	flex: 1;
}

div.fx-format-markdown {
	max-width: 60rem;
}
.fx-format-markdown table {
	border-collapse: collapse;
	box-shadow: 2px 2px var(--fx-shadow);
	margin-bottom: 10px;
}

.fx-format-markdown th {
	border: 1px solid var(--fx-border);
	padding: 5px;
}
.fx-format-markdown td {
	padding: 5px;
	border: 1px solid var(--fx-border);
}
.fx-format-markdown code {
	font-family: monospace;
	background-color: var(--fx-fondo-tint);
}
.fx-format-markdown > *:first-child {
	margin-top: 0;
}
.fx-format-markdown > *:last-child {
	margin-bottom: 0;
}
/*
.fx-format-markdown p {
  padding-bottom: 15px; 
}
*/

.fx-bgtask-output {
	white-space: pre;
	line-height: 12px;
	font-family: monospace;
}



/*********************************************************/

.fx-grid-pag {
    display: flex;
    align-items: center;
    gap: 0.875em;
    flex-wrap: wrap;
	margin-top: 0.5em;
}

/* paginador cuando tengo menos de 10 registros. No muestro nro. de página ni botones de navegación. */
 .fx-grid-pag-nopages .fx-grid-pag-arrows,
 .fx-grid-pag-nopages .fx-grid-pag-pages {
	display: none;
} 


/* --- grupo de flechas --- */
.fx-grid-pag-arrows {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fx-grid-pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2em;
    padding: 0;
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
}
.fx-grid-pag-btn:hover {
    background: #f0f2f5;
    border-color: #adb5bd;
}
.fx-grid-pag-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.fx-grid-pag-btn svg {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- página actual + total --- */
.fx-grid-pag-pages {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
}

.fx-grid-pag-current {
    width: 3.4em;
    height: 2em;
    text-align: center;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    font-size: inherit;
    color: #333;
}

.fx-grid-pag-size {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
}

.fx-grid-pag-pagesize {
    width: 3.4em;
    height: 2em;
    text-align: center;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    font-size: inherit;
    color: #333;
}

.fx-grid-pag-counters {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: #666;
}
.fx-grid-pag-selected {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.6em;
    background: #e6f1fb;
    color: #185fa5;
    border-radius: 4px;
}

.fx-grid-pag-selected:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.125em;
  background-color: currentColor;    
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2"><path d="M3 8.5 L6.5 12 L13 4"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="2"><path d="M3 8.5 L6.5 12 L13 4"/></svg>') center / contain no-repeat;
}

/*********************************************************/

.fx-toggler {
	cursor: pointer;
	font-weight: bold;
}

.fx-no-toggler::before		/* aplica a los span que podrían haber sido togglers pero que no tienen hijos */ {
	content: " ";
	display: inline-block;
	width: 1em;
	margin-right: 0.2rem;
}

.fx-toggler::before {
	/*content: "\25B6";*/
	content: "+";
	display: inline-block; /* esto es un span, pero quiero setearle anchos y márgenes */
	width: 1em; /* el signo más y el menos no tienen el mismo ancho. Le fuerzo un ancho fijo */
	text-align: center; /* dentro de ese ancho fijo, el caracter va centrado */
	margin-right: 0.2rem; /* espacio entre el signo más/menos y la leyenda */
}

.fx-toggler.fx-opened::before {
	content: "-";
}

/* Genéricos para armar columnas en una página */

.fx-flex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	gap: 30px;
}
.fx-flex-col {
	display: flex;
	flex-direction: column;
}

/* Tablas de datos estilo grilla pero generadas a mano en el código (no desde el objeto Grid) */
table.fx-table {
	border-collapse: collapse;
	margin-top: 5px;
	margin-bottom: 5px;
}
table.fx-table td,
table.fx-table th {
	border: 1px solid var(--fx-border-cell);
	padding-left: 6px;
	padding-right: 6px;
}
table.fx-table tr {
	height: 20px;
	color: var(--fx-texto);
}
table.fx-table th {
	height: 22px;
	background-color: var(--fx-fondo-th);
	color: var(--fx-texto);
	text-align: center;
}
table.fx-table td.fx-tmoney,
table.fx-table td.fx-tdecimal {
	text-align: right;
}
table.fx-table td.fx-tdate {
	text-align: center;
}
table.fx-table td.fx-tnumber {
	text-align: right;
}
table.fx-table tbody:nth-of-type(2) td {
	/* el 2do TBODY por convención es la sección de totales */
	background-color: var(--fx-fondo-th);
	font-weight: bold;
	text-align: right;
}
table.fx-table tbody:nth-of-type(2) td:empty {
	background-color: var(--fx-fondo);
	border: 0;
}

iframe.fx-FlexReportHtmlViewer {
	width: 100%;
	margin-top: 1rem;
	border: 1px solid var(--fx-black);
	box-shadow: 10px 5px 5px var(--fx-shadow);
	height: calc(100vh - 150px);
}

/* cuando se muestran los tags en una pantalla de detalle se muestra un bloque de ancho máximo fijo que crece hacia abajo */
div.fx-tags {
	max-width: 40em;
}

div.fx-chtml {
	max-height: 12em;
	overflow: auto;
}

div.fx-chtml img {
	max-width: 100%;
	height: auto;
}

/* cada tag individual tiene un border y una separación (sea que se muestre dentro de un div.ge-tags o en una columna normal de grilla */
span.fx-tag {
	display: inline-block;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	padding: 0.2em;
	margin-left: 0.5em;
	margin-bottom: 0.5em;
}

/* tooltips */

.fx-tooltip {
	position: relative;
	cursor: default;
}

.fx-tooltip-content {
	display: none;
	position: absolute;
	bottom: auto;
	top: 125%;
	left: 50%;

	background: var(--fx-fondo);
	color: var(--fx-texto);
	border: 1px solid var(--fx-border);
	box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15);
	padding: 8px 12px;
	border-radius: 4px;
	white-space: nowrap;
	z-index: 100;
}

.fx-tooltip:hover .fx-tooltip-content {
	display: block;
}

pre.fw-cparagraph {
	background-color: var(--fx-fondo-tint);
	padding: 0.5em;
}

/***********************************************************************************************************************
 * FILTROS
 ***********************************************************************************************************************/

/*
 * Clase FilterList 
 */

.fx-filters-toggle {
  cursor: pointer;
  user-select: none;
  position: relative; 
  top: 0.7em;
  /* left: 0.5em; */
  display: inline-block;
  padding: 0.5em 0.7em;
  border: 1px solid var(--fx-border);
  border-radius: 8px;
  background-color: var(--fx-white);
}
.fx-filters-caret::before {
  content: "▾";
  display: inline-block;
  transition: transform .15s ease;
}
.fx-filters.is-collapsed .fx-filters-caret::before {
  transform: rotate(-90deg);
}
.fx-filters-body {
  overflow: hidden;
  transition: max-height .2s ease;

  background-color: var(--fx-white);  
  border-radius: 5px; 
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  /* margin-bottom: 0.5rem; */
}
.fx-filters.is-collapsed .fx-filters-body {
  max-height: 0 !important;
}

 table.fx-filters-layout {
	margin: 0.5em;
} 

td.fx-filters-layout {
	vertical-align: top;
}

/* div.fx-filters {
	margin-bottom: 4px;
} */

td.fx-filter-label,
td.fx-filter-input {
	vertical-align: middle;
	padding-top: 0.25em; 
	padding-bottom: 0.25em;
}

/* divide entre los filtros y la barra de botones de acciones */

td.fx-filter-label {
	text-align: right;
	padding-right: 10px;
	padding-left: 5px;
	white-space: nowrap;
}

td.fx-filter-label label {
	margin-bottom: 0;
	color: var(--fx-texto);
	/* reseteo un margin-bottom de .5rem que pone _reboot.css */
}


.fx-fdate {
	white-space: nowrap;
	/* evita que el icono del calendario salte de la línea del input */
}

/*
 * FCombo
 */
select.fx-fcombo {
	color: var(--fx-texto);
	margin: 0px;
	font-family: inherit;
}

select.fx-fcombo-monospace {
	font-family: monospace !important;
}

.fx-fcombodrilldown {
	display: flex;
}

.fx-fcombodrilldown-horizontal {
	flex-direction: row;
	gap: 5px;
}

.fx-fcombodrilldown-vertical {
	flex-direction: column;
	gap: 2px;
}


.fx-checkbox {
	width: 1em; 
	height: 1em; 
	margin: 0.5em; 
}

/***********************************************************************************************************************
 * INPUTS
 ***********************************************************************************************************************/


/*
 * Layout de inputs 
 */

td.fx-inputlist-col {
	vertical-align: top;
	padding-right: 15px;
}
table.fx-inputlist-row {
	margin-bottom: 0.2rem;
}

td.fx-input-label,
td.fx-input-input,
td.fx-input-error {
	vertical-align: top;
	padding-top: 0.25em; 
	padding-bottom: 0.25em;
}

td.fx-input-label {
	padding-right: 0.5em;
	text-align: right;
}
div.fx-input-error { 
	font-weight: bold;
	color: var(--fx-danger);
	padding-top: 0.25em;
}
td.fx-input-error {
	font-weight: bold;
	color: var(--fx-danger);
}
tr.fx-input-error td.fx-input-label::after {
content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.35em;
    vertical-align: -0.15em;              /* alinea el triángulo con la base del texto */
    background-color: var(--fx-danger);       /* hereda el color: var(--fx-danger) de la celda */
    mask: var(--fx-icon-warning) center / contain no-repeat;
}


.fx-required {
	font-weight: bold;
}
.fx-required b {
	color: var(--fx-danger);
} /* el asterisco al final de la leyenda en un input obligatorio */

.fx-monospace {
	font-family: monospace !important;
}

textarea.fx-textarea {
	resize: both;
}

/*
 * Link para página de ayuda
 */
.fx-span-help {
	padding-left: 1rem;
}


/*
 * Hago una distinción visible para los inputs que tienen el foco, para ayudar en el manejo con teclado. Según el tipo de control html del que se trate, 
 * la distinción puede estar hecha con border, con outline, con shadow o con alguna combinación.  
 */

input.fx-input-text.fx-readonly {
	border: 0;
	color: var(--fx-texto);
}

div.fx-isubtitle {
	margin-bottom: 0.5rem;
	font-size: var(--fx-fs-l);
	padding-bottom: 0.5rem;
	border-bottom: 5px solid var(--fx-border);
}

/* width define por defecto el ancho máximo, pero se puede especificar input por input con setWidth(). */
.fx-iparagraph {
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
	color: #3b3b3b;
	max-width: 800px;
}

/*
 * Input ICodeLookup
 */
.fx-icodelookup-group {
    display: inline-flex;
    align-items: stretch;          /* iguala alturas, igual que el datepicker */
}

/* El input del código */
.fx-icodelookup-group > input {
    flex: 0 0 auto;                /* respeta el ancho que da size="10", no lo estira */
    border: 1px solid var(--fx-border-input);
    border-radius: 3px 0 0 3px;    /* redondeo solo a la izquierda... */
    outline: none;
}

.fx-icodelookup-group > input:last-child {
    border-radius: var(--fx-border-radius);            /* ...salvo que no haya botones: redondea los 4 */
}

/* Los botones/addons */
.fx-icodelookup-group > a.fx-icodelookup-addon {
    display: flex;
    align-items: center;
	color: inherit;
    justify-content: center;
    width: auto;                   /* anula el ancho fijo del sprite si lo tuviera */
    padding: 0 7px;
    margin: 0;                     /* clave: mata el margin-left:5px / margin-top:-4px viejos */
    background-image: none;        /* anula el sprite (ver punto 3) */
    background-color: #e9ecef;
    border: 1px solid var(--fx-border-input);
    border-left: none;             /* colapsa con el borde del vecino izquierdo */
    cursor: pointer;
}

.fx-icodelookup-group > a.fx-icodelookup-addon:hover {
    background-color: #dde1e5;
}

.fx-icodelookup-group > a.fx-icodelookup-addon:last-child {
    border-radius: 0 var(--fx-border-radius) var(--fx-border-radius) 0;    /* el redondeo derecho lo lleva el último */
}

.fx-icodelookup-group > a.fx-icodelookup-addon::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px; 
    background-color: currentColor;    /* el color del ícono lo da el color del texto */
}

.fx-icodelookup-group > a.fx-icodelookup-btnsearch::before {
	mask: var(--fx-icon-search) center / contain no-repeat;
}

.fx-icodelookup-group > a.fx-icodelookup-btnadd::before {
	mask: var(--fx-icon-plus) center / contain no-repeat;
}

.fx-icodelookup-txt {
	padding-left: 0.5em;
}

/********************************************************************/ 

.fx-input-text,
.fx-select,
.fx-textarea {
	padding: 0.3em 0.4em;
	color: var(--fx-texto-input); /* podría ser también rgb(19,149,186); */
	border: 1px solid var(--fx-border-input);
	border-radius: var(--fx-border-radius);
}

.fx-input-text {
	width: calc(var(--maxlength) * 1ch + 0.8em + 2px); /* ancho = cantidad de caracteres * ancho de un caracter + padding + border */
}

/*
 * IMultiSelect
 */
div.fx-imultiselect {
	border: 1px solid var(--fx-black);
	padding: 3px;
	overflow-y: scroll;
	overflow-x: clip;
}
.fx-imultiselect-item {
	margin-left: 10px;
	cursor: move;
	height: 22px;
	white-space: nowrap;
	overflow-x: clip;
}
.fx-imultiselect-item input {
	margin-right: 10px;
}
.fx-imultiselect-item label {
	font-size: var(--fx-fs-l);
}
.fx-imultiselect-item.fx-dragging {
	color: var(--fx-danger);
	font-weight: bold;
}
/* .fx-imultiselect-item.fx-selected { font-weight: bold; } */
.fx-imultiselect .allnone {
	margin-top: 8px;
	margin-bottom: 8px;
}

/* Dentro de un IBoolInput, el checkbox está encerrado en un SPAN.fx-iboolinput-bool */
.fx-iboolinput-checkbox {
	display: inline-block;
	width: 30px;
	height: 100%;
	background-color: var(--fx-headbar-fondo);
	text-align: center;
	vertical-align: middle;
}
.fx-iboolinput-checkbox.fx-selected {
	background-color: #008000;
}

/*
 * IBooleans
 */
.fx-ibooleans label {
	padding-right: 1rem;
}

/*
 * FTime
 */
.fx-time input {
	width: 70px;
}

.fx-multipleinput {
	display: flex;
}
.fx-multipleinput .fx-multipleinput-label {
	padding-right: 1rem;
	padding-left: 1rem;
}
.fx-multipleinput .fx-multipleinput-label.fx-multipleinput-first {
	padding-left: 0;
}

/********************** IAttach *****************************/

div.fx-iattach {
	border: 1px dashed var(--fx-border-strong);
	cursor: pointer;
	padding: 5px 10px;
}

div.fx-iattach--over {
	border-style: solid;
}

button.fx-iattach__delete {
	width: 16px;
	height: 16px;
	background: var(--icons16) -48px 0;
	border: none;
	position: relative;
	top: -5px;
	display: none;
}

.fx-iattach__empty {
	font-weight: lighter;
	font-style: italic;
	color: var(--fx-texto-action);
}

.fx-iattach__filename {
	border: 1px solid var(--fx-border);
	padding: 2px 5px;
	background-color: #ff8000;
	color: var(--fx-white);
	font-style: normal;
	font-weight: normal;
	display: none;
}

.fx-icombodrilldown {
	display: flex;
}

.fx-icombodrilldown-horizontal {
	flex-direction: row;
	gap: 5px;
}
.fx-icombodrilldown-vertical {
	flex-direction: column;
	gap: 2px;
}

img.fx-iimage {
	border: 1px solid var(--fx-border);
}

/***********************************************************************************************************************
 * IDate y IDateTime
 ***********************************************************************************************************************/

/* Agrupa input + ícono como una sola unidad */
.fx-idate-group {
    display: inline-flex;
    align-items: stretch;   /* input y addon a la misma altura */
    width: 8.75em;
}

.fx-idatetime-group {
    display: inline-flex;
    align-items: stretch;  
    width: 10.625em;
}

/* El input de la fecha  */
.fx-idate-input {
    flex: 1 1 auto;
    min-width: 0;                       /* evita que se desborde en flex */
    padding: 0.3em 0.4em;
    line-height: 1.4;
    color: #333;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-right: none;                 /* se fusiona con el addon */
    border-radius: var(--fx-border-radius) 0 0 var(--fx-border-radius);         /* redondeo solo a la izquierda */
    outline: none;
}
.fx-idate-input:focus {
    border-color: #7aa7d8;
    box-shadow: 0 0 0 2px rgba(122,167,216,.25);
    position: relative;
    z-index: 1;                         /* el foco queda por encima del addon */
}
.fx-idate-input:read-only {
    background-color: #f5f5f5;
}

/* La cajita del ícono */
.fx-idate-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    color: #555;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0 var(--fx-border-radius) var(--fx-border-radius) 0;       /*  redondeo solo a la derecha */
    cursor: pointer;
}
.fx-idate-addon:hover {
    background-color: #dde1e5;
}

.fx-idate-addon::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;   /* ESTE es el color del ícono */
    -webkit-mask: var(--fx-icon-calendar) center / contain no-repeat;
            mask: var(--fx-icon-calendar) center / contain no-repeat;
}

/***********************************************************************************************************************
 * FDate
 ***********************************************************************************************************************/

/* Agrupa input + ícono como una sola unidad */
.fx-fdate-group {
    display: inline-flex;
    align-items: stretch;   /* input y addon a la misma altura */
    width: 8.75em;
}

/* El input de la fecha  */
.fx-fdate-input {
    flex: 1 1 auto;
    min-width: 0;                       /* evita que se desborde en flex */
    padding: 0.3em 0.4em;
    line-height: 1.4;
    color: #333;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-right: none;                 /* se fusiona con el addon */
    border-radius: 3px 0 0 3px;         /* redondeo solo a la izquierda */
    outline: none;
}
.fx-fdate-input:focus {
    border-color: #7aa7d8;
    box-shadow: 0 0 0 2px rgba(122,167,216,.25);
    position: relative;
    z-index: 1;                         /* el foco queda por encima del addon */
}
.fx-fdate-input:read-only {
    background-color: #f5f5f5;
}

/* La cajita del ícono */
.fx-fdate-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    color: #555;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0 3px 3px 0;         /* redondeo solo a la derecha */
    cursor: pointer;
}
.fx-fdate-addon:hover {
    background-color: #dde1e5;
}

.fx-fdate-addon::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;   /* ESTE es el color del ícono */
    -webkit-mask: var(--fx-icon-calendar) center / contain no-repeat;
            mask: var(--fx-icon-calendar) center / contain no-repeat;
}

/******************** Iconos de la barra de grid que tienen dropdown (page size, order by) ********************/

.fx-grid-bar {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.fx-grid-bar-dropdown {
  position: relative;
  display: inline-block;
}

.fx-grid-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  cursor: pointer;   
  background-color: var(--fx-grid-bar-icon-color);
}

.fx-grid-bar-icon:hover {
  background-color: var(--fx-grid-bar-icon-hover-color);
}

.fx-grid-bar-dropdown.fx-open .fx-grid-bar-icon { 
	border-color: #999; 
}

.fx-grid-bar-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  z-index: 1000;
  display: none;
}
.fx-grid-bar-dropdown.fx-open .fx-grid-bar-dropdown-list { display: block; }

.fx-grid-bar-dropdown-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.fx-grid-bar-dropdown-list li:hover { background: #eaf1fb; }

/* El tilde: siempre reserva su espacio para que el texto quede alineado */
.fx-grid-bar-dropdown-list.fx-checkmarks li::before {
  content: "✓";
  width: 14px;
  text-align: center;
  visibility: hidden;
}
.fx-grid-bar-dropdown-list.fx-checkmarks li[aria-checked="true"]::before { 
	visibility: visible; 
}
.fx-grid-bar-dropdown-list.fx-checkmarks li[aria-checked="true"] { 
	font-weight: 600; 
}

.fx-grid-bar-dropdown-list i.fx-icon {
  width: 16px;
  height: 16px;
}

/****  Popup que se genera con fxAlert() *****************************/

.fx-alert-dialog {
  border: none;
  border-radius: 10px;
  padding: 0;
  max-width: 420px;
  width: calc(100% - 2rem);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  font-family: system-ui, sans-serif;

  /* color de acento por defecto (warning) */
  --acento: #d97706;
  --acento-suave: #fef3c7;
}

/* variante error */
.fx-alert-dialog[data-tipo="error"] {
  --acento: #dc2626;
  --acento-suave: #fee2e2;
}

/* backdrop oscurecido */
.fx-alert-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.fx-alert-dialog__body {
  padding: 1.5rem 1.5rem 1rem;
  /* barra de acento a la izquierda para señalar la severidad */
  border-left: 4px solid var(--acento);
}

.fx-alert-dialog__titulo {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--acento);
}

.fx-alert-dialog__mensaje {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #374151;
}

 .fx-alert-dialog__acciones {
  display: flex;
  justify-content: flex-start; 
  padding: 0.75rem 0 1.25rem;
} 

.fx-alert-dialog__btn {
  background: var(--acento);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.fx-alert-dialog__btn:hover {
  opacity: 0.7;
}

.fx-alert-dialog__btn:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.fx-alert-dialog__btn--cancel {
  background: transparent;
  color: #374151;
  border: 1px solid #d1d5db;
}

.fx-alert-dialog__boton--cancel:hover {
  background: #f3f4f6;
  opacity: 1;
}
/*************** Fin popup fxAlert() *****************************/