@import url("../../../libs/css/root.css");

body, html { 
	height: 100%; 
}

.password {
	border-radius:10px !important;
}

.container-home {
	top: 0px;
	position: absolute;
}

.containerImage {
	background: var(--color-primary) !important;
	color: var(--color-verdePetroleo) !important;
}

.containerForms {
	background: var(--color-cloud) !important;
}

		
/* Estilo Google Floating Label */
.form-label-group {
	position: relative;
	margin-bottom: 1rem;
}

.form-label-group input {
	height: auto;
	padding: 10px 10px;
	border-radius: 10px;
	border: 1px solid #ced4da;
}

.form-label-group label {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	margin-bottom: 0; 
	//line-height: 60px;
	color: var(--google-gray);
	border: 1px solid transparent;
	border-radius: .25rem;
	transition: all .1s ease-in-out;
	padding: 10px;
	padding-top:15px;
	pointer-events: none;
	
}

/* Efeito de subida do label nativo (CSS puro) */
.form-label-group input {
	height:60px;
	line-height:60px;
}

.form-label-group input::-webkit-input-placeholder { color: transparent; }
.form-label-group input:-ms-input-placeholder { color: transparent; }
.form-label-group input::-ms-input-placeholder { color: transparent; }
.form-label-group input::-moz-placeholder { color: transparent; }
.form-label-group input::placeholder { color: transparent; }


.form-label-group input:not(:placeholder-shown) {
	padding-top: 12px;
    padding-bottom: 12px;
    font-size: 20px;
	
	
}

.form-label-group input:not(:placeholder-shown) ~ label {
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 12px;
	color: var(--primary-red);
	font-weight: bold;
	
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid green;	
}



/* Remove o ícone de traço (-) do estado indeterminado */
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
    background-image: none !important;
}

/* Opcional: Garante que o fundo fique branco/transparente como um checkbox vazio */
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: #fff !important;
    border-color: #adb5bd !important; /* Cor da borda padrão */
}





/* Container relativo para posicionar a label */
.field-animated {
	position: relative;
	margin-top: 1.0rem;
}

.form-label-group input:focus {
	border-color: var(--color-success);
	//box-shadow: 0 0 0 0.1rem rgba(175, 14, 22, 0.25);
}

/* Estilo da label em repouso (dentro do input) */
.field-animated label {
	width: auto;
	position: absolute;
	//top: 8px;
	left: 12px;
	transition: all 0.2s ease;
	pointer-events: none;
	color: #6c757d;
	background-color: transparent;
}

/* Quando o input tem foco ou não está vazio, a label sobe */
.field-animated .form-control:focus ~ label,
.field-animated .form-control:not(:placeholder-shown) ~ label {
	top: -14px;
	left: 10px;
	font-size: 0.85rem;
	color: #007bff; /* Cor primária do BS 4 */
	background-color: white;
	padding: 0 5px;
	z-index: 5;
}

.field-animated .form-control:focus ~ label,
.field-animated .form-control:not(:placeholder-shown) ~ label {
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid var(--color-success);	
	color: var(--color-verdePetroleo);
}

.field-animated .form-control.is-invalid:focus ~ label,
.field-animated .form-control.is-invalid:not(:placeholder-shown) ~ label {
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid var(--color-danger);
	color: var(--color-verdePetroleo);
}

.form-control.is-invalid {
	border-color: var(--color-danger) !important;
}

.form-control:focus {
	box-shadow: none;
}

/* Controle do Fade para o feedback de erro */
.invalid-feedback.fade {
	display: none;
	opacity: 0;
}

.invalid-feedback.show {
	display: block;
	opacity: 1;
}

/* Span de erro */
/*
.error-feedback {
	display: block;
	width: 100%;
	margin-top: .25rem;
	font-size: 80%;
	color: var(--primary-red);
	min-height: 18px;
}
*/

/* Background lateral */
.bg-login-image {
	background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
	url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?q=80&w=1000&auto=format&fit=crop');
	background-size: cover;
	background-position: center;
}

.btn-primary {
	background-color: var(--primary-red);
	border-color: var(--primary-red);
}

.nav-tabs .nav-link.active {
	color: var(--primary-red);
	border-bottom: 3px solid var(--primary-red);
	border-top: none; 
	border-left: none; 
	border-right: none;
}

.nav-tabs .nav-link { 
	border: none; 
	color: var(--google-gray); 
	font-weight: bold; 
}

.tabsHeader {
	display:flex;
	width:100%;
	margin-bottom:30px;
	position:relative;
	background: #e9ecef;
	border-radius: 30px;
	font-size: 25px;
    color: var(--color-verdePetroleo);
}

#tabLogin:hover, #tabCadastro:hover {
	cursor: pointer;
}

#btnSubmitLogin, 
#btnSubmitCadastro {
	color: var(--color-verdePetroleo);
	background: var(--color-primary);
    padding: 12px;
    border-radius: 30px;	
}

#btnSubmitLogin:hover,
#btnSubmitCadastro:hover{
	color: #ffffff;
	background: var(--color-verdePetroleo);
	border-color: var(--color-primary);

}

.tab {
	flex:1;
	text-align:center;
	padding:12px;
	cursor:pointer;
	background:#e9ecef;
	transition:0.3s;
	font-weight:600;
	border-radius: 30px;
}

.tab.active {
	background: var(--color-primary);	
	z-index:2;
	position:relative;
	box-shadow:0px 3px 8px rgba(0,0,0,0.15);
}

#tabCadastro {
	margin-left: -5%;
}

/* Aba não ativa fica atrás */
.tab:not(.active){
	z-index:1;
}

.containerBtns {
	display: flex;
	justify-content: center; /* Centraliza horizontalmente */
	align-items: center;     /* Centraliza verticalmente (precisa de altura na div) */
}		


/* containerValidate --- */
.containerValidate .btnValidateReturn, 
.containerValidate .btnValidateConfirm {
	color: var(--color-verdePetroleo);
	background: var(--color-primary);
    padding: 12px;
    border-radius: 30px;	
}

.containerValidate .btnValidateReturn:hover,
.containerValidate .btnValidateConfirm:hover{
	color: #ffffff;
	background: var(--color-verdePetroleo);
	border-color: var(--color-primary);

}

.containerValidate .btnValidateConfirm:disabled,
.containerValidate .btnValidateConfirm.disabled{
	cursor: not-allowed;
}

.containerValidate .cardValidate { 
	border-radius: 10px; 
}

.containerValidate .dataLabel { 
	font-weight: 700; 
	color: #495057; 
}

.containerValidate .dataValue { 
	color: #6c757d; 
}

.containerValidade .termsText { 
	font-size: 0.85rem; 
	line-height: 1.4; 
}

.containerValidate .cardData {
	padding: 10px;
	border: 1px solid #000;
	border-radius: 10px;
	background: #fff;
}

.containerValidate .customControlLabel { cursor: pointer; padding-top: 2px; }


/* containerSendToken --- */
.containerSendToken .btnSendTokenReturn, 
.containerSendToken .btnSendTokenConfirm {
	color: var(--color-verdePetroleo);
	background: var(--color-primary);
    padding: 12px;
    border-radius: 30px;	
}

.containerSendToken .btnSendTokenReturn:hover,
.containerSendToken .btnSendTokenConfirm:hover{
	color: #ffffff;
	background: var(--color-verdePetroleo);
	border-color: var(--color-primary);

}

.containerSendToken .btnSendTokenConfirm:disabled,
.containerSendToken .btnSendTokenConfirm.disabled{
	cursor: not-allowed;
}


.containerSendToken .cardToken { 
	border-radius: 10px; 
	max-width: 500px; 
	margin: auto; 
}

.containerSendToken .tokenTitle { 
	font-weight: 700; 
	color: #333; 
	font-size: 1.25rem; 
}

.text-muted-custom { 
	color: #6c757d; 
	font-size: 0.95rem; 
}

/* Estilização para o texto mascarado (e-mail/celular) */
.containerSendToken .textCript { 
	font-weight: 600; 
	color: #495057; 
}

.containerSendToken .customControlLabel { 
	cursor: pointer; 
	padding-top: 2px; 
}


/* containerValidadeToken --- */	
.containerValidadeToken .btnValidateToken {
	color: var(--color-verdePetroleo);
	background: var(--color-primary);
    padding: 12px;
    border-radius: 30px;	
}

.containerValidadeToken .btnValidateToken:hover{
	color: #ffffff;
	background: var(--color-verdePetroleo);
	border-color: var(--color-primary);

}

.containerValidadeToken .btnValidateToken:disabled,
.containerValidadeToken .btnValidateToken.disabled{
	cursor: not-allowed;
}

.containerValidadeToken .btnResendToken {
	color: var(--color-verdePetroleo);
	background: var(--color-primary);
    padding: 12px;
    border-radius: 30px;	
}


.containerValidadeToken .card-verify { 
	border-radius: 10px; 
	max-width: 450px; 
	margin: auto; 
}

.containerValidadeToken .login-title { 
	font-weight: 700; 
	color: #333; 
	font-size: 1.15rem; 
}

.containerValidadeToken .user-information { 
	color: #007bff; 
	font-weight: 600; 
}

/* Estilização dos inputs do Token */
.containerValidadeToken .input-token {
	width: 50px;
	height: 60px;
	font-size: 1.5rem;
	text-align: center;
	font-weight: bold;
	border: 2px solid #ced4da;
	border-radius: 8px;
	margin: 0 5px;
}

.containerValidadeToken .input-token:focus {
	border-color: #007bff;
	box-shadow: none;
	outline: none;
}

.containerValidadeToken .timer-text { 
	color: #6c757d; 
	font-size: 0.9rem; 
}

.containerValidadeToken .small-footer { 
	font-size: 0.85rem; 
	color: #6c757d; 
}

.containerValidadeToken .input-token.invalid[_ngcontent-tbj-c141] {
	border-color: red;
	animation: _ngcontent-tbj-c141_shake .5s;
	outline: red !important;
}

.containerValidadeToken .divMessageToken { 
	display: none;
}

.containerValidadeToken .btnResendToken { 
	display: none;
}

.divForgotPasswd a {
	color: var(--color-verdePetroleo);
}

.btnEfetuarLogin {
	cursor: pointer;
}