@charset "UTF-8";

/**
 * CSS del framework (independiente de la aplicación)
 *
 * El CSS final que recibe el browser es la concatenación de: 
 *   1. El CSS del framework (fw.css)
 *   2. El CSS de la aplicación (app.css)
 *   3. El CSS del tema (themes/xxxx/theme.css)
 *   4. El CSS de personalización propio del usuario (columna css en fw.users)
 *
 */

:root {
	/* ============ Capa 1: PALETA ============ */

	/* --- Paleta: colores básicos --- */
	--fx-white: 		 #ffffff;
	--fx-black: 		 #000000;
	--fx-gris-claro-1:   #f2f2f2;
	--fx-gris-claro-2:   #e6e6e6;
	--fx-gris-medio: 	 #999999;
	--fx-gris-oscuro-1:  #555555;
	--fx-gris-oscuro-2:  #333333;
	--fx-azulado-claro:  #cbd4e0;
	--fx-azulado-medio:  #89abce;
	--fx-azulado-oscuro: #0d3d56;

	/* --- Paleta: acentos / estado --- */
	--fx-primary: 	#2299ff;
	--fx-danger: 	#ff0000;
	--fx-return: 	#339933;
	--fx-warning: 	#ff944d;
	--fx-link: 		#365899;
	--fx-custom:    #ecd473;

	/* --- Paleta: categóricas (celdas sin connotación buena/mala) --- */
	--fx-cat-1-fondo: #0375b4;
	--fx-cat-1-texto: var(--fx-white);

	--fx-cat-2-fondo: #dcd0d0;
	--fx-cat-2-texto: var(--fx-texto);

	--fx-cat-3-fondo: #373737;
	--fx-cat-3-texto: var(--fx-white);

	--fx-cat-4-fondo: #eeaa7b;
	--fx-cat-4-texto: var(--fx-white);

	--fx-cat-5-fondo: #66b9bf;
	--fx-cat-5-texto: var(--fx-white);

	/* ============ Capa 2: ROLES ============ */

	--fx-texto: 			var(--fx-gris-oscuro-2); /* texto normal: datos, leyendas, etc. */
	--fx-texto-action: 		var(--fx-gris-oscuro-1); /* texto de acción (botones) */
	--fx-texto-disabled: 	var(--fx-gris-medio); /* texto de menor relevancia: datos inactivos, botones deshabilitados, etc. */
	--fx-texto-input: 		var(--fx-azulado-oscuro); /* texto de inputs, comboboxes, etc. */
	--fx-texto-menu: 		var(--fx-gris-oscuro-2); /* texto del menú principal (y submenúes desplegables) */

		/* La barra superior contiene el nombre del sistema, datos del usuario y opciones generales */
	--fx-headbar-texto: 	#808080;
	--fx-headbar-fondo: 	var(--fx-gris-claro-2); /* headbar / whoami */
	--fx-headbar-borde: 	var(--fx-gris-medio);

	--fx-border: 			var(--fx-gris-claro-2);
	--fx-border-strong: 	var(--fx-gris-medio);
	--fx-border-cell: 		var(--fx-azulado-claro);
	--fx-border-input: 		var(--fx-azulado-claro);

		/* la navegación de tabs en la pantalla SDetail */
	--fx-tab-borde: 		 var(--fx-azulado-medio);
	--fx-tab-fondo: 		 var(--fx-white); 			
	--fx-tab-selected-texto: var(--fx-texto);
	--fx-tab-selected-fondo: var(--fx-azulado-claro); 	

		/* totales en las grillas debajo de cada columna */
	--fx-grid-total-fondo: 	var(--fx-gris-claro-2); 
	--fx-grid-total-texto: 	var(--fx-texto); 		

	--fx-fondo: 			var(--fx-white);
	--fx-fondo-header: 		var(--fx-gris-claro-1); /* header de panel */
	--fx-fondo-menu: 		var(--fx-gris-claro-1); /* menú principal */
	--fx-fondo-zebra: 		var(--fx-gris-claro-1); /* fila par de grilla */
	--fx-fondo-th: 			var(--fx-gris-claro-2);
	--fx-fondo-tint: 		var(--fx-gris-claro-2); /* fondo de filtros, code, etc. */
	--fx-highlight: 		var(--fx-azulado-claro); /* tab activo / btn hover */
	--fx-title: 			var(--fx-azulado-medio);
	--fx-shadow: 			var(--fx-gris-claro-2);

	/* ============ Assets (sprites de íconos) ============ */

	--icons16: url("../images/icons16.png");
	--icons32: url("../images/icons32.png");
}

html {
	font-size: 0.875rem;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.fx-hidden 	{ display: none;			}
.italic 	{ font-style: italic;		}
.bold 		{ font-weight: bold;		}
.pre 		{ white-space: pre;			}
.monospace 	{ font-family: monospace;	}

.fx-headbar {
	height: 40px;
	line-height: 40px;
	vertical-align: middle;
	background-color: var(--fx-headbar-fondo);
	border-bottom: 1px solid var(--fx-headbar-borde);
}
.fx-headbar .fx-company {
	text-transform: uppercase;
	padding-left: 5px;
	color: var(--fx-headbar-texto);
	font-size: 20px;
	float: left;
}
.fx-company a {
	color: inherit;
}
.fx-company a:hover {
	text-decoration: inherit;
}

.fx-headbar .fx-supermenu {
	float: right;
	padding-right: 30px;
}
.fx-headbar .fx-supermenu a {
	color: inherit;
}

.fx-supermenu-sep {
	padding-left: 15px;
}
.fx-whoami {
	padding-left: 15px;
	padding-right: 15px;
	background-color: var(--fx-headbar-fondo);
	color: var(--fx-white);
}
.fx-whoami.fx-admin {
	background-color: var(--fx-danger);
	color: var(--fx-white);
	font-weight: bold;
}

span.fx-mytask-count {
	display: inline-block;
	font-size: 14px;
	color: var(--fx-white);
	background-color: var(--fx-danger);
	width: 3em;
	text-align: center;
	border-radius: 50%;
}

@media (max-width: 480px) {
	.fx-headbar .fx-company {
		display: none;
	}
	.fx-headbar .fx-supermenu {
		float: none;
		padding-left: 5px;
	}
}

.fx-content {
	margin-left: 25px;
	margin-right: 25px;
}

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 */
}

@media print {
	.fx-main-menu,
	.fx-headbar,
	.fx-actions,
	.fx-grid-bar,
	.fx-filters,
	.fx-grid-paginator,
	.fx-grid-data-action-item {
		display: none !important;
	}
	a {
		color: inherit !important;
	}
}

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

li.fx-tab {
	display: inline;
	margin-right: 3px;
	padding: 3px 10px;
	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);
}

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

/*
 * Botones
 */
.fx-btn {
	border: 1px solid var(--fx-border);
	background-color: var(--fx-fondo);
	color: var(--fx-texto-action);
	height: 25px;
	margin-right: 5px;
	cursor: pointer;
}

.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-size: 13px;
	font-weight: normal;
	color: var(--fx-title);
	padding-right: 10px;
}
div.tabs-panels .panel-body {
	font-size: 14px;
}

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

.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-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
 */

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

div.fx-panel {
	margin-right: 10px;
	margin-bottom: 10px;
}

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

div.fx-panel-title {
	background-color: var(--fx-fondo-header);
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	vertical-align: middle;
	color: var(--fx-title);
}

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

/*
 * Clase Grid
 */

.fx-grid-paginator {
	margin-top: 10px;
	width: 550px;
	border: 1px solid var(--fx-border);
}
.fx-grid-paginator-nopages table {
	display: none;
} /* paginador cuando tengo menos de 10 registros. No muestro nro. de página ni botones de navegación. */

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

.fx-grid-combo-orders {
	font-size: 12px;
}

table.fx-grid-data {
	border-collapse: collapse;
	min-width: 550px;
	margin-top: 5px;
	font-size: 13px;
}
table.fx-grid-data td,
table.fx-grid-data th {
	border: 1px solid var(--fx-border-cell);
	padding-left: 6px;
	padding-right: 6px;
}

table.fx-grid-data tr {
	height: 20px;
	color: var(--fx-texto);
}
table.fx-grid-data th {
	height: 22px;
	background-color: var(--fx-fondo-th);
	color: var(--fx-texto);
	text-align: center;
}

tr.fx-grid-data-par {
	background-color: var(--fx-fondo-zebra);
}
tr.fx-grid-data-impar {
	background-color: var(--fx-fondo);
}
tr.fx-grid-data-total {
	border: 0;
	height: 25px;
}

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,
td.fx-grid-data-checkbox,
th.fx-grid-data-action-item,
th.fx-grid-data-checkbox {
	vertical-align: middle;
	padding: 0 2px !important;
	width: 1px;
	white-space: nowrap;
}
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 {
	font-size: 13px;
	margin: 6px;
}
td.fx-pcols-attr {
	font-weight: bold;
	padding-right: 2em;
	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
 */
div.fx-tgrid {
	padding: 10px;
}

/*
 * 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;
	font-size: 12px;
	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 {
	font-size: 14px;
	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-size: 12px;
	font-family: monospace;
}

/*********************************************************/
/* Submenúes multilevel */
/*********************************************************/
.dropdown-submenu {
	position: relative;
}

.dropdown-submenu a::after {
	transform: rotate(-90deg);
	position: absolute;
	right: 6px;
	top: 0.8em;
}

.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-left: 0.1rem;
	margin-right: 0.1rem;
}

.fx-main-menu {
	margin-bottom: 0.8em;
	height: 37px;
	background-color: var(--fx-fondo-menu);
}

.fx-main-menu .dropdown-item,
.fx-main-menu .dropdown-item.active,
nav.navbar .dropdown-item:active {
	color: var(--fx-texto-menu);
	background-color: inherit;
}

.fx-main-menu .dropdown-menu {
	font-size: 16px; /* agrando la letra, si no queda el default a nivel de html que es 13px */
	margin-top: 0px; /* el default de Bootstrap a mi gusto queda demasiado abajo */
}

/* personalizo el menú bootstrap. lo hago por ID con #fx-main-menu para ganarle fuerte en especificidad */
#fx-main-menu .navbar-light .navbar-nav .nav-link {
	color: var(--fx-texto-menu);
}
#fx-main-menu nav {
	padding-top: 0px;
	padding-bottom: 0px;
}
#fx-main-menu .nav-link {
	font-size: 16px;
	padding-right: 1.5em;
}
#fx-main-menu nav {
	background-color: var(--fx-fondo-menu);
}

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

/* grid paginator */
.fx-grid-pag {
	margin-top: 0.8em;
}
.fx-grid-pag .btn-toolbar button {
	background-color: var(--fx-fondo);
	color: var(--fx-texto-action);
	width: 30px;
	border-color: var(--fx-border-input);
}
.fx-grid-pag .btn-toolbar .input-group input {
	width: 50px;
	text-align: center;
}
.fx-grid-pag .btn-toolbar .input-group {
	margin-right: 6.5px;
}
.fx-grid-pag .btn-toolbar .input-group .fx-paginator-info .input-group-text {
	width: 200px;
	background-color: var(--fx-fondo);
}

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

.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 
 */

table.fx-filters-layout {
	background-color: var(--fx-fondo-tint);
	border: 7px solid var(--fx-fondo-tint);
	/* no es un borde sino que al tener mismo color del fondo, da un poco de aire y queda como un padding */
}

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

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

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

td.fx-filter-label {
	vertical-align: middle;
	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 */
}

td.fx-filter-input {
	padding-top: 3px;
	padding-bottom: 3px;
}

.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;
}

/* Customización de la librería "select-pure" */

.fx-ftag .select-pure__select,
.fx-ftag .select-pure__autocomplete {
	font-size: 13px;
}

/***********************************************************************************************************************
 * 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 {
	vertical-align: top;
	padding-right: 2rem;
}
td.fx-input-input {
	vertical-align: top;
}
td.fx-input-error {
	vertical-align: top;
	font-weight: bold;
	color: var(--fx-danger);
}
tr.fx-input-error td.fx-input-label {
	background-color: #ff9999;
}

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

.fx-input-text {
	padding: 1px;
}

.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;
}

input.fx-input-text {
	border: 1px solid var(--fx-border-input);
}
textarea.fx-textarea {
	border: 1px solid var(--fx-border-input);
	resize: both;
}

/*
 * 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: 1.5rem;
}

/* 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
 */
/*SPAN.fx-icodelookup	.fx-icon { } */
span.fx-icodelookup .fx-icodelookup-txt {
	margin-left: 1rem;
}
span.fx-icodelookup a {
	vertical-align: middle;
	margin-left: 5px;
	margin-top: -4px;
}

.fx-input-text,
.fx-select,
.fx-textarea {
	color: var(--fx-texto-input); /* podría ser también rgb(19,149,186); */
}

/*
 * 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: 16px;
}
.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;
}

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

/********************** 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);
}