@import "fonts.less";
@import "functions.less";


.certificados-config {
	h2 a {
		color: #07A;
		img {
			height: 25px;
			transform: translateY(4px) translateX(5px);
		}
		&:hover {
			opacity: 80%;
			text-decoration: underline;
		}
	}
	h3.header {
		.flex(10px);
		padding: 5px 15px;
		background: #1231;
		input {
			padding: 5px;
		}
	}
	em.blink {
		display: block;
		padding: 10px 5px;
		color: #E02 !important;
		animation: blink2 infinite 1s;
	}
	h4 {
		margin: 10px 0;
		a {
			color: #07A;
			&:hover {
				text-decoration: underline;
			}
		}
	}

	.list-certificados {
		.flex(5px);
		text-align: center;
		margin-top: 5px;
	}

	.lista-parceiros {
		.flex(10px);
		margin-top: 10px;
		a {
			position: relative;
			text-align: center;
			font-size: .7rem;
			padding: 5px;
			border-radius: 3px;
			cursor: pointer;
			&.sys {
				background: #1231;
			}
			&:not(.sys) {
				background: #6001;
			}
			&:hover {
				background: #1232;
				img[onclick] {
					display: block;
				}
			}
			img:not([onclick]):not(.lock) {
				padding: 10px;
				background: #FFF;
			}

			img[onclick] {
				padding: 5px;
				background: #EEE;
				position: absolute;
				top: -5px;
				right: -5px;
				box-shadow: 0 3px 3px -3px #000;
				border: 1px solid #1234;
				border-radius: 3px;
				display: none;
				&:hover {
					filter: grayscale(100%) brightness(200%);
					background: #123;
				}
				&[onclick^='ExcluirParceiro'] {
					margin-top: 30px;
				}
			}
			.lock {
				display: block;
				position: absolute;
				width: 13px;
				top: 7px;
				left: 7px;
				filter: brightness(80%);
				opacity: 70%;
			}
			p {
				padding: 3px;
				i:not(:empty) {
					position: absolute;
					color: #D00;
					right: 7px;
				}
			}
			&.active {
				background: #D00 !important;
				color: #FFF;
			}
		}
	}

	.lista-assinaturas {
		.grid(repeat(6, 1fr); 10px; stretch);
		margin-top: 10px;
		a {
			display: block;
			position: relative;
			background: #FFF;
			text-align: center;
			cursor: pointer;
			padding: 15px 5px 5px 5px;
			border: 12px solid #ddd;
			border-radius: 5px;
			min-height: 190px;
			p {
				border-top: 1px solid #123;
				padding-top: 10px;
				margin-top: -15px;
				text-transform: uppercase;
			}
			em {
				display: block;
				font-size: .7rem;
				opacity: 70%;
				padding: 0 5%;
			}
			span {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				font-size: .8em;
				color: #D00;
				padding: 2px 10px;
			}
			img:not([onclick]){
				display: block;
				width: 70%;
				margin-left: 15%;
				margin-bottom: -8%;
				height: auto;
				aspect-ratio: 3 / 1 !important;
			}
			img[onclick^=Editar] {
				padding: 5px;
				background: #EEE;
				position: absolute;
				top: -5px;
				right: -5px;
				box-shadow: 0 3px 3px -3px #000;
				border: 1px solid #1234;
				border-radius: 3px;
				display: none;
				&:hover {
					filter: grayscale(100%) brightness(200%);
					background: #123;
				}
			}
			img[onclick^=Excluir] {
				padding: 5px;
				background: #EEE;
				position: absolute;
				top: 25px;
				right: -5px;
				box-shadow: 0 3px 3px -3px #000;
				border: 1px solid #1234;
				border-radius: 3px;
				display: none;
				&:hover {
					filter: grayscale(100%) brightness(200%);
					background: #123;
				}
			}
			&:hover {
				border-color: #FFF;
				> img[onclick] {
					display: block;
				}
			}
			&.active {
				border-color: #D00;
			}
		}
	}

	@media screen and ( max-width: 2300px ){ .lista-assinaturas { .grid(repeat(5, 1fr); 10px; stretch); }}
	@media screen and ( max-width: 1950px ){ .lista-assinaturas { .grid(repeat(4, 1fr); 10px; stretch); }}
	@media screen and ( max-width: 1650px ){ .lista-assinaturas { .grid(repeat(3, 1fr); 10px; stretch); }}
	@media screen and ( max-width: 1300px ){ .lista-assinaturas { .grid(repeat(2, 1fr); 10px; stretch); a { max-width: 550px; } }}
	@media screen and ( max-width: 1000px ){ .lista-assinaturas { .grid(repeat(1, 1fr); 10px; stretch); a { max-width: 550px; } }}

	.btnADD {
		.botao(#D04; @size: .9rem; @padding: 10px 30px);
	}
}

#fileCertificado {
	position: absolute;
	opacity: 0;
}


.mini-certificado {
	padding: 10px 10px 5px 10px;
	background: #1232;
	border-radius: 3px;
	cursor: pointer;
	position: relative;
	.fx();
	> div {
		border: none;
	}
	> img[onclick] {
		display: none;
		position: absolute;
		top: 4px;
		right: 4px;
		background: #FFF;
		border-radius: 3px;
		padding: 3px;
		&:nth-child(4) {
			margin-top: 30px;
		}
	}
	&:hover > img[onclick] {
		display: block;
		&:hover {
			background: #123;
			filter: grayscale(100%) brightness(2) invert(0);
		}
	}
	> p {
		padding: 5px;
	}
	&:hover {
		background: #3452;
	}
	&.act {
		background: #D00;
		> p {
			color: #FFF;
		}
	}
}


#dialogAssinatura {
	section {
		max-height: 75vh;
		overflow-y: scroll;
	}
	#container {
        position: relative;
        display: inline-block;
        user-select: none;
        #image {
            display: block;
            max-width: 100%; /* Ajuste para ser responsivo dentro do container */
            height: auto; /* Mantém a proporção */
        }
        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            .mask {
                position: absolute;
                background: rgba(0,0,0,0.5);
                pointer-events: none;
            }
            #lineAssin {
                position: absolute;
                height: 3px;
                background-color: #03FA;
                width: 100%;
                pointer-events: none;
                z-index: 10;
            }
            #selection {
                position: absolute;
                border: 2px solid #F36;
                box-sizing: border-box;
                cursor: move;
                background: transparent;
                pointer-events: auto;
                .handle {
                    width: 12px;
                    height: 12px;
                    background: #F36;
                    position: absolute;
                    border: 1px solid black;
                    box-sizing: border-box;
                    &.tl { top: -6px; left: -6px; cursor: nwse-resize; }
                    &.tr { top: -6px; right: -6px; cursor: nesw-resize; }
                    &.bl { bottom: -6px; left: -6px; cursor: nesw-resize; }
                    &.br { bottom: -6px; right: -6px; cursor: nwse-resize; }
                }
            }
        }
        #saveBtn {
            margin-top: 20px;
            padding: 12px 20px;
            background: purple;
            border: none;
            color: white;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            border-radius: 6px;
        }
    }
}


#dialogParceiro {
	section {
		max-height: 75vh;
		overflow-y: scroll;
	}
    #container {
        position: relative;
        display: inline-block;
        user-select: none;
        #image {
            display: block;
            max-width: 100%;
            height: auto; 
        }
        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            .mask {
                position: absolute;
                background: rgba(0,0,0,0.5);
                pointer-events: none;
            }
            #selection {
                position: absolute;
                border: 2px solid #F04; 
                box-sizing: border-box;
                cursor: move;
                background: transparent;
                pointer-events: auto;
                z-index: 5;
                .grid-line {
                    position: absolute;
                    background-color: #06C8;
                    pointer-events: none;
                    z-index: 1; 
                }
                .horizontal {
                    left: 0;
                    width: 100%;
                    height: 1px; /* Fina */
                }
                .h-1 {
                    top: calc(100% / 3);
                }
                .h-2 {
                    top: calc(100% * 2 / 3);
                }
                .vertical {
                    top: 0;
                    height: 100%;
                    width: 2px; /* Fina */
                }
                .v-1 {
                    left: 25%;
                }
                .v-2 {
                    left: 50%;
                }
                .v-3 {
                    left: 75%;
                }
                .handle {
                    width: 10px; 
                    height: 10px; 
                    background: #E04;
                    position: absolute;
                    border: 1px solid #555;
                    box-sizing: border-box;
                    pointer-events: auto;
                    z-index: 20;
                    &.tl { top: -6px; left: -6px; cursor: nwse-resize; } 
                    &.tr { top: -6px; right: -6px; cursor: nesw-resize; }
                    &.bl { bottom: -6px; left: -6px; cursor: nesw-resize; }
                    &.br { bottom: -6px; right: -6px; cursor: nwse-resize; }
                }
            }
        }
        #saveBtn {
            margin-top: 20px;
            padding: 12px 20px;
            background: #E74C3C;
            border: none;
            color: white;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            border-radius: 6px;
        }
    }
}


#dialogModeloCartaoCracha {
	section {
		max-height: 75vh;
		overflow-y: scroll;
	}
    #container {
        position: relative;
        display: inline-block;
        user-select: none;
        #image {
            display: block;
            max-width: 100%;
            height: auto; 
        }
        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            .mask {
                position: absolute;
                background: rgba(0,0,0,0.5);
                pointer-events: none;
            }
            #selection {
                position: absolute;
                border: 2px solid #F04; 
                box-sizing: border-box;
                cursor: move;
                background: transparent;
                pointer-events: auto;
                z-index: 5;
                .grid-line {
                    position: absolute;
                    background-color: #06C8;
                    pointer-events: none;
                    z-index: 1; 
                }
                .horizontal {
                    left: 0;
                    width: 100%;
                    height: 1px; /* Fina */
                }
                .h-1 {
                    top: calc(100% / 3);
                }
                .h-2 {
                    top: calc(100% * 2 / 3);
                }
                .vertical {
                    top: 0;
                    height: 100%;
                    width: 2px; /* Fina */
                }
                .v-1 {
                    left: 25%;
                }
                .v-2 {
                    left: 50%;
                }
                .v-3 {
                    left: 75%;
                }
                .handle {
                    width: 10px; 
                    height: 10px; 
                    background: #E04;
                    position: absolute;
                    border: 1px solid #555;
                    box-sizing: border-box;
                    pointer-events: auto;
                    z-index: 20;
                    &.tl { top: -6px; left: -6px; cursor: nwse-resize; } 
                    &.tr { top: -6px; right: -6px; cursor: nesw-resize; }
                    &.bl { bottom: -6px; left: -6px; cursor: nesw-resize; }
                    &.br { bottom: -6px; right: -6px; cursor: nwse-resize; }
                }
            }
        }
    
    }
    footer {
    	.btn-salvar {
	        .botao(#07A);
	        &.disabled {
	        	pointer-events: none;
	        	filter: grayscale(100%);
	        }
	    }
    }
}


.preview-certificado,
.preview-certificado-dialog {
	width: calc(1000px * .7);
	height: calc(700px * .7); 
	border: 1px solid #666;
	position: relative;
	background-position: center;
	box-sizing: border-box;
	overflow: hidden;
	box-shadow: 0 5px 5px -5px #000;
//	font-family: robotolight;
	container-type: inline-size;

	center {
		margin-top: 20px;
	}

	.floating-box {
		width: 80%;
		height: 80%;
		position: absolute;
		top: 0;
		left: 0;
		user-select: none;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 0;
		grid-template-rows: auto 1fr auto auto auto;

		&.size-1 {
			//.b(red);
		}
		&.size-2 {
			//.b(blue);
			.texto {
				font-size: 115% !important;
			}
		}
		&.size-3 {
			//.b(green);
			.texto {
				font-size: 110%;
			}
		}

		.qrcode {
			position: absolute;
			height: 15%;
			bottom: 0%;
			right: -3%;
			z-index: 100;
			border: 1px solid #1238;
			box-shadow: 0 5px 5px -5px #000;
			&.validate:hover {
				cursor: pointer;
				transform: scale(105%);
			}
		}

		.titulo {
			width: 100%;
		}

		.texto {
			.flex();
			justify-content: center;
			font-size: 100%;
			div {
				text-align: center;
				font-size: 90%;
				padding: 0 5%;
				line-height: 150%;
				strong {
					display: block;
					font-size: 210%;
					padding: 3% 0;
				}
			}
		}

		.data {
			font-size: 100%;
			padding: .5%;
		}

		.assinatura {
			display: flex;
			justify-content: center;
			gap: 4%;
			padding: 1.5% 10% 1.5% 10%;
			div {
				width: 100%;
				max-width: 49%;
				img {
					width: 75%;
					margin-bottom: -7%;
				}
				p {
					border-top-width: 1px;
					border-top-style: solid;
					width: 100%;
					padding-top: .3%;
					margin-bottom: .3%;
					font-size: 65%;
				}
				span {
					display: block;
					font-size: 48%;
					opacity: 65%;
					line-height: 110%;
					padding: 0 5%;;
				}
			}
		}

		.parceiros {
			display: flex;
			justify-content: center;
			gap: 1%;
			padding-bottom: 1%;
			img {
				display: block;
				width: 9%;
				height: 115%;
				aspect-ratio: 20 / 11;
				padding: .7%;
				border-radius: 5%;
				background: #FFF;
				border: 1px solid #1236;
			}
		}

		&.normal {
			.assinatura div p {
				border-color: #111;
			}
		}
		&.invert {
			color: #FFF;
			.assinatura div {
				img {
					filter: invert(1) brightness(3);
				}
				p {
					border-color: #EEE;
				}
			}
		}
	}
	
	&.mini, &.act {
		width: calc(1000px * .25);
		height: calc(700px * .25); 
		position: relative;
		background-size: cover;
		background-position: center;

		.lock {
			position: absolute;
			height: 8%;
			left: 3%;
			top: 3%;
			background: #FFF2;
		}

		@div: 4.7;

		.qrcode {
			height: 12%;
		}

		.floating-box {
			padding: calc(1% / @div);
			position: relative;
			cursor: pointer;
			height: 79%;
			background: none;
			transform: translateY(4%) translateX(2%);

			.titulo {
				width: 100%;
			}
			.texto {
				.flex();
				justify-content: center;
				div {
					font-size: calc(150% / @div);
					padding: 0 calc(5% / @div);
					line-height: 150%;
					strong {
						display: block;
						font-size: 210%;
						padding: 4% 0;
					}
				}
			}
			.data {
				font-size: calc(140% / @div);
				padding: 1%;
			}
			.assinatura {
				display: flex;
				justify-content: center;
				gap: 4%;
				padding: 1% 10% 1% 10%;
				transform: translateY(.5%);
				div {
					width: 100%;
					max-width: 49%;
					img {
						width: 50%;
					}
					p {
						border-top-width: 1px;
						border-top-style: solid;
						width: 100%;
						font-size: calc(100% / @div);
					}
					span {
						display: block;
						font-size:calc(100% / @div);
						opacity: 70%;
					}
				}
			}

			.parceiros {
				display: flex;
				justify-content: center;
				gap: 1%;
				margin: 1.5% 0 0 0;
				transform: translateY(calc(.5% / @div));
				img {
					max-width: 23%;
				}
			}
		}
	}
}

@media screen and ( max-height: 600px ){
    .preview-certificado,
    .preview-certificado-dialog {
    	&:not(.mini) {
    		width: calc(124vh - 10%);
			height: calc(84vh - 10%);
		}
		&.mini {
			border-radius: 0px;
			border: none;
		}
    }

}


.btn-imprimir {
    display: block;
    width: 200px;
    .botao(#D03);
    padding: 12px 15px;
    margin-top: 15px;
}

.prev-certificado {
	height: 100%;
	margin-top: 15px;

	.preview-certificado.user {
		width: calc(1200px * .95);
		height: calc(840px * .95);
		background-size: cover;
		font-size: 105%;

		.qrcode {
			position: absolute;
			height: 11%;
			bottom: 12%;
			right: 12%;
			z-index: 100;
			border: 1px solid #1238;
			box-shadow: 0 5px 5px -5px #000;
		}

		.floating-box {
			width: 80%;
			height: 83%;
			max-height: 83%;
			position: absolute;
			top: 0;
			left: 0;
			padding-bottom: 1%;
			user-select: none;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 1%;
			grid-template-rows: .8fr 2.6fr .4fr auto auto;

			&.size-1 {
				.texto {
					font-size: 75%;
				}
			}
			&.size-2 {
				.texto {
					font-size: 83%;
				}
			}
			&.size-3 {
				.texto {
					font-size: 95%;
				}
			}
			> * {
				text-align: center;
			}
			.titulo {
				width: 100%;
				margin-top: 1.5%;
			}
			.texto {
				text-align: center;
				font-size: 80%;
				padding: 0 3%;
				line-height: 150%;
				strong {
					display: block;
					font-size: 210%;
					padding: 2.5vh 0;
				}
			}
			.data {
				font-size: 80%;
				padding: 1%;
			}
			.assinatura {
				display: flex;
				justify-content: center;
				gap: 4%;
				padding: 1% 10% 0 10%;
				transform: translateY(.5%);
				div {
					width: 100%;
					max-width: 49%;
					img {
						width: 75%;
						margin-bottom: -8%;
					}
					p {
						border-top-width: 1px;
						border-top-style: solid;
						width: 100%;
						padding-top: 1%;
						font-size: 60%;
					}
					span {
						display: block;
						margin-top: 2%;
						font-size: 52%;
						padding: 0 5%;
						opacity:55%;
					}
				}
			}
			.parceiros {
				display: flex;
				justify-content: center;
				gap: 1%;
				margin-top: 1.5%;
				img {
					display: block;
					height: 130%;
					aspect-ratio: 2 / 1;
					padding: .7% .1%;
					border-radius: .2%;
					background: #FFF;
					border: 1px solid #1234;
				}
			}
			&.normal {
				.assinatura div p {
					border-color: #111;
				}
			}
			&.invert {
				color: #FFF;
				.assinatura div {
					img {
						filter: invert(1) brightness(3);
					}
					p {
						border-color: #EEE;
					}
				}
			}
		}
	}
}

.responsivePrevCertificado(@n){
	.prev-certificado {
		.preview-certificado.user {
			width: calc(1200px * @n / 100);
			height: calc(840px * @n / 100);
			.floating-box {
				&.size-1 { font-size: @n * 1.60%; }
				&.size-2 { font-size: @n * 1.43%; }
				&.size-3 { font-size: @n * 1.40%; }
			}
		}
	}
}

@media screen and (max-height:  1000px){ .responsivePrevCertificado(90); }
@media screen and (max-height:  930px){  .responsivePrevCertificado(85); }
@media screen and (max-height:  890px){  .responsivePrevCertificado(80); }
@media screen and (max-height:  850px){  .responsivePrevCertificado(75); }
@media screen and (max-height:  810px){  .responsivePrevCertificado(70); }
@media screen and (max-height:  770px){  .responsivePrevCertificado(65); }
@media screen and (max-height:  730px){  .responsivePrevCertificado(60); }
@media screen and (max-height:  680px){  .responsivePrevCertificado(55); }
@media screen and (max-height:  640px){  .responsivePrevCertificado(50); }
@media screen and (max-height:  600px){  .responsivePrevCertificado(45); }
@media screen and (max-height:  560px){  .responsivePrevCertificado(40); }
@media screen and (max-height:  520px){  .responsivePrevCertificado(35); }
@media screen and (max-height:  480px){  .responsivePrevCertificado(30); }

.CERTIFICADO.edit {
	+ .info {
		font-size: .75rem;
		margin-top: 8px;
		b {
			.b();
			padding: 2px 4px;
		}
	}
}