.float-label-control {
	position: relative;
	margin-bottom: 1.5em;
	text-align: left;
}
    .float-label-control ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.6); }
    .float-label-control :-moz-placeholder { color: rgba(0, 0, 0, 0.6); }
    .float-label-control ::-moz-placeholder { color: rgba(0, 0, 0, 0.6); }
    .float-label-control :-ms-input-placeholder { color: rgba(0, 0, 0, 0.6); }
    .float-label-control input:-webkit-autofill,
    .float-label-control textarea:-webkit-autofill {
    	background-color: transparent !important;
    	-webkit-box-shadow: 0 0 0 1000px white inset !important;
    	-moz-box-shadow: 0 0 0 1000px white inset !important;
    	box-shadow: 0 0 0 1000px white inset !important;
    }
    .float-label-control input,
    .float-label-control textarea,
    .float-label-control label {
    	font-size: 1.3em;
    	box-shadow: none;
    	-webkit-box-shadow: none;
    }
        .float-label-control input:focus,
        .float-label-control textarea:focus {
        	box-shadow: none;
        	-webkit-box-shadow: none;
        	border-bottom-width: 2px;
            border-color: #FF7F30;
        	padding-bottom: 0;
        }
        .float-label-control textarea:focus { padding-bottom: 4px; }
    .float-label-control input,
    .float-label-control textarea {
    	display: block; width: 100%;
    	padding: 0.1em 0em 1px 0em;
    	border: none; border-radius: 0px;
    	border-bottom: 1px solid #aaa;
    	outline: none; margin: 0px;
    	background: none; z-index: 1;
    }
    .float-label-control textarea { padding: 0.1em 0em 5px 0em; }
    .float-label-control label {
    	position: absolute;
    	font-weight: normal;
    	top: -1.0em;
    	left: 0.08em;
    	color: transparent;
    	z-index: -1;
    	font-size: 0.85em;
    	-moz-animation: float-labels 300ms none ease-out;
    	-webkit-animation: float-labels 300ms none ease-out;
    	-o-animation: float-labels 300ms none ease-out;
    	-ms-animation: float-labels 300ms none ease-out;
    	-khtml-animation: float-labels 300ms none ease-out;
    	animation: float-labels 300ms none ease-out;
    	/* There is a bug sometimes pausing the animation. This avoids that.*/
    	animation-play-state: running !important;
    	-webkit-animation-play-state: running !important;
    }
    .float-label-control input.empty + label,
    .float-label-control textarea.empty + label {
    	top: 0.1em; font-size: 1.5em;
    	animation: none;
    	-webkit-animation: none;
    }
    .float-label-control input:not(.empty) + label,
    .float-label-control textarea:not(.empty) + label {
    	z-index: 1;
    	color: rgba(0, 0, 0, 0.6);
    }
    .float-label-control input:not(.empty):focus + label,
    .float-label-control textarea:not(.empty):focus + label { color: rgba(0, 0, 0, 0.6); }
    .float-label-control.label-bottom label {
    	-moz-animation: float-labels-bottom 300ms none ease-out;
    	-webkit-animation: float-labels-bottom 300ms none ease-out;
    	-o-animation: float-labels-bottom 300ms none ease-out;
    	-ms-animation: float-labels-bottom 300ms none ease-out;
    	-khtml-animation: float-labels-bottom 300ms none ease-out;
    	animation: float-labels-bottom 300ms none ease-out;
    }
    .float-label-control.label-bottom input:not(.empty) + label,
    .float-label-control.label-bottom textarea:not(.empty) + label { top: 3em; }


@keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@-webkit-keyframes float-labels {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: -1em; opacity: 1; }
}

@keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}

@-webkit-keyframes float-labels-bottom {
    0% { opacity: 1; color: #aaa; top: 0.1em; font-size: 1.5em; }
    20% { font-size: 1.5em; opacity: 0; }
    30% { top: 0.1em; }
    50% { opacity: 0; font-size: 0.85em; }
    100% { top: 3em; opacity: 1; }
}

#logInForm {
	width: 320px;
	height: auto;
	margin: 0 auto;
	padding: 35px;
    padding-top: 0;
	box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
				0px 8px 1px rgba(0, 0, 0, 0.1),
				0px 18px 23px rgba(0, 0, 0, 0.1);
	background-color: rgba(255, 255, 255, 0.85);
	color: #f4f4f4;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.btn {
	border-radius: 0px;
}
.btn.btn-default {
	background-color: rgba(0, 0, 0, 0.5);
	border-color: transparent;
	color: #f4f4f4 !important;
}
.btn.btn-default:active {
	background-color: rgba(0, 0, 0, 0.3);
	border-color: transparent;
	color: #f4f4f4;
}

:root {
    --orange: #FF7F30;
}

img {
	width: 100%;
	height: 100%;
	padding-bottom: 15px;
}

body {
    background-color: var(--orange);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    position: relative;
}

/* Responsive design para el formulario centrado */
@media (max-width: 400px) {
    #logInForm {
		width: 280px;
		padding: 25px;
	}
	.g-recaptcha {
		transform: scale(0.77);
		transform-origin: center center;
	}
}

@media (max-height: 600px) {
    #logInForm {
        position: relative;
        transform: none;
        top: auto;
        left: auto;
        margin: 50px auto;
    }
}

/* Centrar todo el formulario */
.row {
	text-align: center;
}

/* Estilos personalizados para reCAPTCHA */
.recaptcha-container {
	margin: 20px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

#recaptcha-element {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.g-recaptcha {
	margin: 0 auto !important;
	transform: scale(0.9);
	transform-origin: center center;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Estilos para el botón de mostrar/ocultar contraseña */
.password-field {
	position: relative;
}

.password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: rgba(0, 0, 0, 0.6);
	cursor: pointer;
	font-size: 16px;
	padding: 0;
	z-index: 10;
	outline: none;
}

.password-toggle:hover {
	color: #FF7F30;
}

.password-toggle:focus {
	outline: none;
}

/* Ajustar padding del input para dar espacio al botón */
.password-field input {
	padding-right: 40px !important;
}