main {
	#loginPanel {
		gap: 8px;
		#inputEye {
			position: relative; width: 100%;
			.input {
				width: 100%; height: 40px; padding: 8px 14px; color: var(--azul-oscuro); background: var(--blanco);
				border: 1px solid var(--gris-claroInterm); border-radius: 7px; outline: none;
				transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
				text-align: center;
				&::placeholder {color: var(--gris-intermOscuro);}
				&:focus {background: var(--blanco); border-color: var(--azul-intermedio); box-shadow: 0 0 0 3px var(--sombra-foco);}
				&:not(:placeholder-shown):valid {
					background: var(--verde-claro); border-color: var(--verde-intermedio);
					&:focus {border-color: var(--verde-intermedio);}
				}
			}
			#eye {
				position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
				font-size: 16px; color: var(--gris-intermOscuro);
				cursor: pointer;
			}
		}
		&:has(.mensajeError:not(:empty)) {
			label {
				color: var(--rojo-oscuro);
			}
			.input {
				border-color: var(--rojo-danger);
				background: var(--blanco);
			}
		}
		.errores {
			color: var(--rojo-oscuro); font-size: 13px; width: fit-content; max-width: 100%;
			&:empty {display: none;}
			span {font-weight: bold;}
		}
	}
}