.box-form{height: 100vh;}
.firma-box{height: auto;}
.portada{
	height: 100vh;
    display: flex;
    align-items: center;
    background-image: url("../img/banner-portada-03.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50px 0px 0px 50px;
}
.title-bienvenida{color: #ffffff; font-size: 60px;}
.title-portada{color: #ffffff;}
.salfa-brand{width: 100%; max-width: 200px; position: absolute; top: 8vh;}

#mi-imagen{width: 210px; height: auto; margin-bottom: 2rem; border-radius: 14px; border: 1px solid #dddddd; overflow-y: visible;}

#form-firma .labely{font-size: 13px; font-weight: bold; margin-bottom: 4px}
#form-firma select{
	width: 100%;
	/**padding: 1rem 1.5rem;**/
	border-radius: 12px;
	border: 1px solid #dddddd;
	appearance: none;
}


#form-firma input[type="text"]{
	width: 100%;
	/**padding: 1rem 1.5rem;**/
	border-radius: 12px;
	border: 1px solid #dddddd;
}

#form-firma button{
	width: 100%;
	padding: 1.5rem 1rem;
	border-radius: 12px;
	border: none;
	margin-top: 20px;
	background-color: #c5c6c7;
	color: #272828;
	transition: .3s  ease-out;
}

#form-firma button:hover{
	background-color: #b2292e;
	color: #ffffff;
}

.firma-campo{margin-bottom: 8px;}
.flag-obligatorio{width: fit-content; font-size: 12px;}
.obligatorio{background-color: #FFF2D4; padding: 4px; border-radius: 50px;}
.incompleto{border: 1px solid #FF5555 !important;}

.tag-author {
    bottom: 0;
    text-align: right;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    position: absolute;
    right: 0;
    padding-right: 4em;
}

#btn-copiar{
	padding: 1rem 1.5em;
	border-radius: 12px;
	border: none;
	background-color: #b2292e;
	color: #ffffff;
	transition: .3s  ease-out;
	margin-top: 3em;
	margin-bottom: 15px;
}
#btn-copiar:hover{
	background-color: #9aaf45;
}

#btn-back{
	padding: 1rem 1.5em;
	border-radius: 12px;
	border: 1px solid #000000;
	background-color: transparent;
	color: #00000;
	transition: .3s  ease-out;
	margin-left: 8px;
}
#btn-back:hover{
	background-color: #76777a;
	color: #ffffff;
	border: 1px solid #76777a;
}

#firma-generada{background-color: #f9f2ed;}
#mi-firma-generada{ border: 1px solid #ffffff; background-color: #ffffff; border-radius: 15px; padding: 1.5em 1.5em; width: fit-content;}
#mensaje-copiado{display:none; background-color: #ffeeb6; padding: 10px 20px; border-radius: 8px; width: fit-content; margin-top: 30px;}
.title-firma-generada{font-weight: bold;}
.title-firma-generada02{font-weight: bold; margin-bottom: 2em;}
.confetti{width: 100%; max-width: 100px; margin-bottom: 20px;}

/********* Estilo Administrador **********/
.caluga-item{border: 1px solid #ffffff; background-color: #ffffff; border-radius: 15px; padding: 20px; margin-bottom: 0.8em; transition: .3s ease-out;}
.caluga-item:hover{border-color: #d1d1d1; background-color: #eaeaea;}
.caluga-item .logo-item img{width: auto; max-width:90%; height: 100%; max-height: 80px}
.btn-item .update{
	padding: 0.8rem 1.5rem;
    border-radius: 12px;
    border: 1px solid #006aea;
    background-color: #006aea;
    color: #ffffff;
    transition: .3s ease-out;
    margin-right: 15px;
}
.btn-item .update:hover{border: 1px solid #002282; background-color: #002282;}
.btn-item .delet{
	padding: 0.8rem 1.5rem;
    border-radius: 12px;
    border: 1px solid #ff704a;
    background-color: rgba(255, 255, 255, 0);
    color: #ff704a;
    transition: .3s ease-out;
}
.btn-item .delet:hover{color:#ffffff; border: 1px solid #ff704a; background-color: #ff704a;}
/********* Fin Estilo Administrador **********/

@media only screen and (max-width: 1600px){
	#form-firma button{margin-top: 0px !important; padding: 1rem 1.5rem;}
	#mi-imagen{width: 180px; margin-bottom: 1rem;}
	.salfa-brand {max-width: 150px;}
	.firma-campo {margin-bottom: 1px;}
}

@media only screen and (min-width: 1024px){
	#version-tag p {margin-bottom: 0px;}
}

@media only screen and (max-width: 767px){
	.box-form{height: initial;}
	.portada{height: initial; padding-top: 6vh; padding-bottom: 6vh;}
}