/* Colores personalizados del cliente */
:root {
	--cli-logo-indigo: indigo;
	--cli-logo-cyan: darkcyan;
	--cli-logo-green: darkgreen;
	--cli-logo-blue: #0091c1;

	--qa-menu-select-tab: rgb(129,212,250);     /* rgb(252, 209, 216);*/
    --qa-menu-design: rgb(0, 150, 210);         /* Color del menu QueryApp*/
	--qa-color-field-border: skyblue;
	--qa-color-field-border-hover: #7859ff;
	--qa-color-field-border-focus: #7859ff;
}

/*.cssMenuPpal [name="barraInfo_sup_cont"].close-all > [name="barraInfo_sup_contico"]{background-image: url("w8/_Basicos/24/Lock.png")}
.cssMenuPpal [name="barraInfo_sup_cont"].close-all:hover > [name="barraInfo_sup_contico"]{background-image: url("w8/_Basicos/24/Lock_over.png")}
*/
.cssMenuPpal [name="barraInfo_sup_cont"].login {
	/*color: var(--av-color-indigo);*/
}
.cssMenuPpal [name="barraInfo_sup_cont"].close-all {
	/*color: #367059;*/
}
.cssMenuPpal [name="barraInfo_sup_cont"].csASEMA.selBodega {
	background-color: var(--av-color-green);
    color: white;
    border-color: green;
}

/* clase para imagen del estado */
 /* Default: No lleva fondo degradado, solo imagen*/
.img-estado-Confirmado{	background-image: url("w8/A1/checkmark.png")}
.img-estado-Pendiente{	background-image: url("w8/A1/down_circular.png")}
.img-estado-Anulado{	background-image: url("w8/A1/delete_message.png")}
.img-estado-Preparado{	background-image: url("w8/Animals/fish.png")}
.img-estado-Error{		background-image: url("w8/Animals/prawn.png")}
.img-estado-Desconocido{background-image: url("w8/Animals/sheep.png")}

 /* Para el Filtro y Formulario: Fondo degradado e imagen*/
.imgCombo-form-26.img-estado-Confirmado{	background-image: url("w8/A1/checkmark.png"), 		-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);}
.imgCombo-form-26.img-estado-Pendiente{		background-image: url("w8/A1/down_circular.png"), 	-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);}
.imgCombo-form-26.img-estado-Anulado{		background-image: url("w8/A1/delete_message.png"), 	-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);}
.imgCombo-form-26.img-estado-Preparado{		background-image: url("w8/Animals/fish.png"), 		-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);}
.imgCombo-form-26.img-estado-Error{			background-image: url("w8/Animals/prawn.png"), 		-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);}
.imgCombo-form-26.img-estado-Desconocido{	background-image: url("w8/Animals/sheep.png"), 		-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);}

/* Menu Avatible */

.cssMenuPpal {
	font-size: 0.9rem;
}

.cssMenuPpal div[name="bodyAccion"] > div[name="Objetos"]{
	/*position: absolute;*/
	margin-left: 1px;
	/*z-index: 0;*/
}

.cssMenuPpal > div[name="bodyAccion"] > div[name="MenuLeft"] {
	/*z-index: 999;*/	
}	

.cssMenuPpal div[name="bodyAccion"] > div[name="Objetos"]:empty {
	/*z-index: -1;*/
}

.cssMenuPpal div[name="bodyAccion"] > div[name="MenuLeft"] {
	width: 15%;	
}

/*Se debe agregar al DOM al finalizar su construcción, esto renderiza mas rápido
/ cuando se usa :has en CSS para definir politicas de UI, :has hace muy lento el renderizado directo en el DOM.*/
.cssMenuPpal div[name="bodyAccion"]:has( > div[name="Objetos"]:not(:empty)) > div[name="MenuLeft"] {
	width: 3em;
	transition: width 0.3s ease;
    transform-origin: left;
	&  [name="opc_MenuLeft"] {
		transition: all 0.5s cubic-bezier(0.45, 1.45, 1, 1.4);
		opacity: 0;
	}
	&  [name="contEstado"] {
		display: none;
	}
	&  [name="tdGrupoOpc"] {
		transition: all 0.5s cubic-bezier(0.45, 1.45, 1, 1.4);
		opacity: 0;
		white-space: nowrap;
	}
	&  [name="tdGrupoTra"] {
		display: none;
	}
	& p {
		white-space: nowrap;
	}
}

.cssMenuPpal div[name="bodyAccion"]:has( > div[name="Objetos"]:not(:empty)) > div[name="MenuLeft"]:hover {
	width: 15%;	
	&  [name="opc_MenuLeft"] {
		display: flex;
		opacity: 1;
	}
	&  [name="contEstado"] {
		display: flex;
	}
	&  [name="tdGrupoOpc"] {
		display: table-cell;
		opacity: 1;
	}
	&  [name="tdGrupoTra"] {
		display: table-cell;
	}
}


/* Formulario */

/* Fuente de las pestañas de formularios */
.cssBrowseLooper .tabs > item .pTabs {
    font-family: "Arial Narrow";
    font-size: 0.9rem;
    font-weight: 600;
}

/* Fuente de los Campos del formulario*/
seccCamposDatos .opcion div[name="contCampo"],
seccCamposDatos .opcion div[name="contCampo"] {
	font-size: 0.8rem;
	& > div[name='campo'], > div.campo {
		padding: 6px 4px;
	}
}

/* Subgrupo de campos*/
secccampos > secccamposdatos > .opcion {
    column-gap: 0.8rem;
    row-gap: 0.8rem;
}

/* Iconos de Canlendario y Lockup*/
.ui-datepicker-trigger,
.TriggerBuscar  {
	font-size: 1.3rem;
}

.FormControl .ui-datepicker-trigger {
	position: absolute;
	left: 3.4em;
}

/* Grilla */

.cssBrowseLooper .opcTareas {
    font-size: 0.9rem;
}

/* Fuente de los títulos de Filtros*/
div[name='tdLabel'] [name="conttdLabel"] > span {
	font-size: 0.8rem;
}

/* Fuentes de los campos filtros */
div[name='TBodyTablaFiltro'] > div[name='campo'] {
	& input,  select {
		font-size: 0.8rem;
		padding: 2px;
	}
	& .ui-datepicker-trigger {}
	& .TriggerBuscar  {}
}

/* Fuente de los títulos de grilla*/
.cssBrowseLooper /*table[name='contBrwTitulos']*/ .recordsGrid [name='columna']{
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1em;
	height: 1em;
}

/* Contenido la grilla*/
div[name="Contenido"].BL_Datos > table {
	font-size: 0.8rem;
	line-height: 1em;
}

/* Celdas de la grilla*/
.gridCelda {
	padding: 0.2em;
}

/* Memu personalizado */

.cssMenuPpal {
    background-color: white;
}

.cssMenuPpal div[name='contMenu'] > ul[name='Menu'] {
    display: flex;
    gap: 0.5em;
}

/*
.cssMenuPpal div[name='contMenu'] {
    padding-top: 0.5em;
}

.cssMenuPpal > [name='bodyMenu'] {
    display: grid;
    position: absolute;
    width: 100vw;
    grid-template-areas: "menuItems encabezado";
    grid-template-columns: 0fr 1fr;
}

.cssMenuPpal div[name='contMenu'] {
    grid-area: menuItems;
}

.cssMenuPpal > [name='bodyMenu'] > [name='Encabezado'] {
    position: absolute;
	grid-area: encabezado;
    width: 100%;
}
*/

.cssMenuPpal [name='barraInfo_sup'] {
    margin-right: 132px;
}

.cssMenuPpal > [name='bodyMenu'] > [name='Encabezado'] > [name='Titulo'] {
    width: 132px;
	height: 64px;
}

.cssMenuPpal [name="barraInfo_sup"].csASEMA {
    padding-left: 24em;
}

.cssMenuPpal > [name='bodyMenu'] > [name='Encabezado'] > [name="Titulo"] > [name="icoApp"] {
	background-image: url("logos/logo_lj.png");
	height: 80%;
}

.cssMenuPpal > [name='bodyMenu'] > [name='Encabezado'] > [name="Titulo"] > [name="desApp"]{
	color: #0b7394;
	text-align: center;
}

.cssMenuPpal > [name='bodyMenu'] > [name='Encabezado'] > [name="Titulo"] > [name="desApp"] > [name="nombreCia"]{	
	display: none;	
}
.cssMenuPpal > [name='bodyMenu'] > [name='Encabezado'] > [name="Titulo"] > [name="desApp"] > [name="nombreApp"]{		
    font-size: 1em;
    line-height: 0.7;
}

.cssMenuPpal li[name='pestana']:hover > span {
    background-color: transparent;
}

.cssMenuPpal li[name='pestana'].opc_elegida.colorFijo {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    box-shadow: none;
	background-color: var(--qa-menu-select-tab);
    /*height: 56px;*/
    margin-top: 0;
}

.cssMenuPpal li[name='pestana'].colorFijo {
	background-color: transparent; 
    box-shadow: -none; 
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border: transparent;
}

.cssMenuPpal li[name='pestana'] span.contTab:hover > [name="texto"],
.cssMenuPpal li[name='pestana'].opc_elegida span.contTab > [name="texto"] {
    font-weight: 900;
}

.cssMenuPpal li[name='pestana'].colorFijo > ul.sub_menu_elegido {
    background-color: var(--qa-menu-select-tab);
}

.cssMenuPpal li[name='pestana'] ul.sub_menu > li.opc_elegida {
    background-color: transparent;
}

.cssMenuPpal li[name='pestana'] ul.sub_menu_elegido > li:hover {
    background-color: transparent; 
}

.cssMenuPpal li[name='pestana'] ul.sub_menu_elegido > li:hover > i{
    font-weight: 400; 
}
.cssMenuPpal li[name='pestana'] ul.sub_menu_elegido > li:hover > p{
    font-weight: 900; 
}

.cssMenuPpal li[name='pestana'] ul.sub_menu > li.opc_elegida > i{
    font-weight: 900;
}
.cssMenuPpal li[name='pestana'] ul.sub_menu > li.opc_elegida > p{
    font-weight: 900;
    text-decoration: underline;
}

/* Pasar luego a php/cs-custom-styles.php */
.cssMenuPpal li[name='pestana'].Diseno.animada {
    background-color: var(--qa-menu-design);
}

/* Menu acordeón, opciónes  */
.MenuLeft > li:hover {
    background-color: transparent;
}

.MenuLeft > li [name="trGrupo"] {
    font-family: "Source Sans Pro";
    font-weight: 100;
}

.MenuLeft > li.desplegable_select_container td.opcion,
.MenuLeft > li:hover [name="trGrupo"] td.opcion{
    font-weight: 900;
}

/* Menu acordeón elegido */
.MenuLeft > li.desplegable_select_container .opcionPpal {
    background-color: rgba(0,0,0,0.07); 	
}

/* Opcion seleccionada del menu left*/
.MenuLeft .desplegable_select_container tr.desplegable_select_elegida {
    background-color: rgb(110, 211, 144);
}

/* Opcion seleccionada del menu left Hover*/
.MenuLeft .desplegable_select_container .desplegable tr:hover {
    /*background-color: transparent;*/
}

/* texto de la opción */
.MenuLeft .desplegable_select_container .desplegable tr td[name="opc_MenuLeft"] > p {
    font-weight: 100;
}

/* Icono de la opción */
.MenuLeft .desplegable_select_container .desplegable tr td[name="contImg"] > i {
    font-weight: 300;
}

/* Icono de la opción :hover */
.MenuLeft .desplegable_select_container .desplegable tr:hover td[name="contImg"] > i {
    font-weight: 400;
}

/* Icono de la opción elegida */
.MenuLeft .desplegable_select_container .desplegable tr.desplegable_select_elegida td[name="contImg"] > i{
    font-weight: 900;
}

/* texto de la opción :hover */
.MenuLeft .desplegable_select_container .desplegable tr:hover td[name="opc_MenuLeft"] > p {   
    font-weight: 900;
}
/* texto de la opción elegida */
.MenuLeft .desplegable_select_container .desplegable tr.desplegable_select_elegida td[name="opc_MenuLeft"] > p{
    text-decoration: underline;
    font-weight: 900;
}

.desplegable_select_container tr.desplegable_select_elegida{
	-webkit-animation: none;
}

ul.desplegable {
	max-height: 400px;
}

/* Catálogo del login */
.cssBrowseLooper.login {
	min-height: 500px;
	& div[name='contForma'] > div[name='FormaBase'] {
		grid-template-rows: 1fr;
		grid-template-columns: 2fr 3fr;
		grid-template-areas: "left body";
		padding: 0;
		& div[name='FormaEnc'] {
			grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            background: linear-gradient(290deg, var(--cli-logo-indigo) 10%, var(--cli-logo-blue) 100%);
            color: whitesmoke;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            gap: 0;
			& div[name='contInfoForma'] {
				width: 100%;
				max-width: unset;
				box-sizing: border-box;
				& .logos {
					display: flex;
                    flex-direction: column;
                    align-items: center;
					background: inherit;
					justify-content: space-around;
                    padding: 1em 0;
					height: 100%;
					font-family: 'Source Sans Pro SemiBold';
					& .logo {
						display: flex;
						width: 120px;
						height: 120px;
						background: white;
						overflow: hidden;
					}
					& .info {
						display: flex;
						flex-direction: column;
                    	align-items: center;
						gap: 0.5em;
						& .avatar-cli {
							border-radius: 4em;
							display: flex;
                            justify-content: center;
                            align-items: center;
							& img {
                        		width: 80%;
							}
						}
						& .avatar-qa {
							display: flex;
                            justify-content: center;
                            align-items: center;
							border-radius: 0.5em;
							width: 80px;
                            height: 60px;
							& img {
								width: 80%;								
							}
						}
					}
					& img {
						height: 100%;
						width: 100%;
						object-fit: contain;
					}
				}
			}
		}
		& .contTitles {
			margin-bottom: 4em;
			font-family: 'Source Sans Pro SemiBold';
			& .title1 {
				font-weight: 900;
				color: var(--cli-logo-blue);
			}
			& .paragraph1 {
				color: #777;
				font-weight:  600;
			}
		}

	}
	& div[name='Forma_body'] {
		padding: 2em;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		overflow: hidden;
		& .link-recuperar-clave {
			text-align: right;
    		width: 100%;
		}
		& seccCamposDatos .opcion div[name="contCampo"] {
			& > div[name='campo'], > div.campo {
					font-size: 1.2rem;
				}
			& .requerido {
				background-color: inherit;
			}
		}
	}
	& div[name='contbtnForma'] {
		color: white;
		background-color: transparent;
		& .boton {
			width: 100%;
			height: 2em;
		}
	}
}

.cssBrowseLooper.flat.css01{
	background-color: whitesmoke !important;	
}

.cssBrowseLooper.flat.css01 div[name='contForma']{
	background-color: whitesmoke !important;	
}

/*fa-solid fa-fan fa-spin*/

/* tamaño de alto y ancho mínimo */
.av-min-content {
	width: min-content !important;
	height: min-content !important;
}

/* Pestañas que contienen catálogos hijos (dentro del form) */

[name="Forma_body"].av-tabs.av-tabs-top.av-tabs-rows {
	gap: 0.5em;;
	padding: 0.5em;
	background-color: white;
	& > .tabsForm.topLeft {
		border: 1px solid lightgray;
		border-radius: 0.3em;
		overflow: hidden;
    	box-sizing: border-box;
	}
}

/* Pestañas que contienen catálogos hijos (Form y Grilla) */
.css_pestanas.relationChild {
	padding-top: 0.5em;
	border-radius: 0.3em;
	border: 1px solid lightgray;

	& .css_pestanas >[name="contTForma"].tab_container {
		overflow: hidden;
		border-width: 1px;
	}
	& > [name="encabezado"]{}
	& > [name="cuerpo"]{
		& > .css_pestanas {
			& > .tabs {
				color: var(--av-color-appCore);
				bottom: unset;
				padding-bottom: 0.25em;
				padding-left: 1em;
                padding-right: 1em;
				& > item[name="tab_pestana"].pTabs {
					background-color: unset !important;
					font-weight: 100;
					height: 100%;
					max-height: unset;
					border: unset;
					border-bottom-style: inset;
					border-bottom-width: 3px;
					border-bottom-color: rgba(0,0,0,0.2);
					& > span[name="tab_pestana_info"].pTabs {
						background-color: unset;
						min-height: auto;
						padding-top: 0.25em;
                        padding-bottom: 0.25em;
						& > i[name="tab_pestana_img"] {
							font-weight: 300;
							font-size: 1.3em;
						}						
						& > [name="contText"] {
							& > p[name="tab_pestana_texto"] {
								font-family:"Source Sans Pro";
								font-weight: 100;
								text-align: center;
                                padding-left: 0.5em;
                                overflow: hidden;
                                width: 100%;
							}	
						}
					}
					& > span[name="tab_pestana_info"].pTabs:hover {
						& > i[name="tab_pestana_img"] {
							font-weight: 500;
						}
						& > [name="contText"] {
							& > p[name="tab_pestana_texto"] {
								font-weight: 600;
							}	
						}
					}
					& > span[name="tab_pestana_info"].pTabs:active {						
						& > i[name="tab_pestana_img"] {
							font-weight: 900;
						}
					}
				}
				& > item[name="tab_pestana"].pTabs:hover {
					border-bottom-color: rgba(0,0,0,0.8);
				}
				& > item[name="tab_pestana"].pTabs.active {
					border-color: var(--av-color-appCore);
					opacity: 1;
					& > span[name="tab_pestana_info"].pTabs {
						& > i[name="tab_pestana_img"] {
							font-weight: 500;
						}
						& > [name="contText"] {
							& > p[name="tab_pestana_texto"] {
								font-weight: 600;
							}	
						}
					};
				}
			}
		}
	}
}


[name="tab_pestana_info"].pTabs.mw-ctz-details {
	& > i[name="tab_pestana_img"] {
		color: orange;
	}
	& > [name="contText"] {
		& > p[name="tab_pestana_texto"] {
			color: orange;
		}	
	}
}


/* Pestañas de los tabs de formularios */
.conttab {
	align-self: center;
	& > [name="conttab_form"]{
		& > .tabs {
			color: var(--av-color-appCore);
			bottom: unset;
			& > item[name="tab_pestana"].pTabs {
                background-color: unset;
                font-weight: 100;
                height: 100%;
                max-height: unset;
                border: 1px solid;
                border-color: rgba(0, 0, 0, 0.2);
                min-height: 2.5em;
                min-width: 6em;
                justify-content: center;
                border-radius: 0.25em;
				& > span[name="tab_pestana_info"].pTabs {
					background-color: unset;
					min-height: auto;
					padding-top: 0.25em;
					padding-bottom: 0.25em;
					& > i[name="tab_pestana_img"] {
						font-weight: 300;
						font-size: 1.3em;
					}						
					& > [name="contText"] {
						& > p[name="tab_pestana_texto"] {
							font-family:"Source Sans Pro";
							font-weight: 100;
						}	
					}
				}
				& > span[name="tab_pestana_info"].pTabs:hover {					
					& > i[name="tab_pestana_img"] {
						font-weight: 500;
					}
					& > [name="contText"] {
						& > p[name="tab_pestana_texto"] {
							font-weight: 600;
						}	
					}
				}
				& > span[name="tab_pestana_info"].pTabs:active {						
					& > i[name="tab_pestana_img"] {
						font-weight: 900;
					}
				}
			}
			& > item[name="tab_pestana"].pTabs:hover {
				border-style: solid;
                border-width: 1px;
                border-color: rgba(0, 0, 0, 0.5);
				& > span[name="tab_pestana_info"]{

				}

			}
			& > item[name="tab_pestana"].pTabs.active {
				border-radius: 0.25em;
				border: 1px solid;
				border-bottom: 0.25em solid;
				opacity: 1;
				& > span[name="tab_pestana_info"].pTabs {
					& > i[name="tab_pestana_img"] {
						font-weight: 500;
					}
					& > [name="contText"] {
						& > p[name="tab_pestana_texto"] {
							font-weight: 600;
						}	
					}
				};
			}
		}
	}
}