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

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


/* Memu personalizado */


.cssMenuPpal > [name='bodyMenu'] > [name='Encabezado'] > [name='Titulo'] {
    width: 180px;
}
.cssMenuPpal > [name='bodyMenu'] > [name='Encabezado'] > [name="Titulo"] > [name="icoApp"] {
	background-image: url("logos/logo_cliente.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: 20px;
	line-height: 13px;
}

.cssBrowseLooper.flat.css01{
	background-color: #869efd;	
}

.cssBrowseLooper.flat.css01 div[name='contForma']{
	background-color: #869efd;	
}

:root {	
	--qa-menu-select-tab: rgb(129,212,250);     /* rgb(252, 209, 216);*/
    --qa-menu-design: rgb(0, 150, 210);         /* Color del menu QueryApp*/
}

.cssMenuPpal {
    background-color: white;
}

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

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

/* 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;
						}
						& .avatar-qa {
							border-radius: 0.5em;
							justify-content: center;
							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"].requerido {
			background-color: inherit;
		}
	}
	& div[name='contbtnForma'] {
		color: white;
		background-color: transparent;
		& .boton {
			width: 100%;
			height: 2em;
		}
	}
}